From c0635953ccba055096397402b60371417578f410 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 7 Oct 2020 14:39:17 +0200
Subject: [PATCH] Design improvements.

---
 frontend/app-config/webpack.config.js         |    3 +-
 frontend/app/_theme.html                      | 1054 +++++++++++------
 .../pages/restore/restore-page.component.html |    4 +-
 .../contents/contents-page.component.html     |    8 +-
 .../custom-view-editor.component.html         |   12 +-
 .../shared/due-time-selector.component.html   |   21 +-
 .../shared/forms/field-editor.component.html  |   29 +-
 .../list/content-value-editor.component.html  |   15 +-
 .../list/content-value-editor.component.ts    |    4 +-
 .../shared/list/content.component.html        |    8 +-
 .../references/content-creator.component.html |    2 +-
 .../content-selector-item.component.html      |    2 +-
 .../content-selector.component.html           |    6 +-
 .../cards/api-performance-card.component.html |    6 +-
 .../cards/api-traffic-card.component.html     |    6 +-
 .../pages/dashboard-config.component.html     |   14 +-
 .../actions/generic-action.component.html     |    8 +-
 .../pages/rules/rule-wizard.component.html    |   17 +-
 .../content-changed-trigger.component.html    |    8 +-
 .../triggers/usage-trigger.component.html     |    4 +-
 .../common/schema-edit-form.component.html    |    4 +-
 .../export/schema-export-form.component.html  |   16 +-
 .../schema/fields/field-wizard.component.html |   33 +-
 .../field-form-validation.component.html      |    6 +-
 .../fields/forms/field-form.component.html    |    8 +-
 .../fields/types/assets-ui.component.html     |    8 +-
 .../types/assets-validation.component.html    |   12 +-
 .../fields/types/boolean-ui.component.html    |    6 +-
 .../types/boolean-validation.component.html   |    6 +-
 .../types/date-time-validation.component.html |    2 +-
 .../fields/types/number-ui.component.html     |    6 +-
 .../types/number-validation.component.html    |    6 +-
 .../fields/types/references-ui.component.html |    6 +-
 .../references-validation.component.html      |    6 +-
 .../fields/types/string-ui.component.html     |    6 +-
 .../types/string-validation.component.html    |    8 +-
 .../schema-preview-urls-form.component.html   |    4 +-
 .../schema-field-rules-form.component.html    |    8 +-
 .../schema-scripts-form.component.html        |    4 +-
 .../schema/ui/schema-ui-form.component.html   |    4 +-
 .../pages/schemas/schema-form.component.html  |    8 +-
 .../clients/client-add-form.component.html    |    8 +-
 .../client-connect-form.component.html        |    4 +-
 .../pages/clients/client.component.html       |   14 +-
 .../contributor-add-form.component.html       |    6 +-
 .../contributors/contributor.component.html   |    2 +-
 .../import-contributors-dialog.component.html |   14 +-
 .../language-add-form.component.html          |    6 +-
 .../pages/languages/language.component.html   |   27 +-
 .../pages/more/more-page.component.html       |    4 +-
 .../pages/roles/role-add-form.component.html  |    8 +-
 .../settings/pages/roles/role.component.html  |   49 +-
 .../workflow-add-form.component.html          |    8 +-
 .../workflows/workflow-step.component.html    |    6 +-
 .../pages/workflows/workflow.component.html   |    9 +-
 .../forms/editable-title.component.html       |    4 +-
 .../editors/checkbox-group.component.html     |    8 +-
 .../editors/checkbox-group.component.scss     |    4 +-
 .../forms/editors/stars.component.html        |    4 +-
 .../forms/editors/tag-editor.component.html   |    6 +-
 .../angular/image-source.directive.ts         |    5 +-
 .../modals/dialog-renderer.component.html     |   14 +-
 .../framework/angular/pager.component.html    |    2 +-
 .../framework/angular/pager.component.scss    |    2 +-
 .../shared/components/app-form.component.html |    8 +-
 .../assets/asset-dialog.component.html        |   18 +-
 .../assets/asset-folder-dialog.component.html |    4 +-
 .../assets/assets-selector.component.html     |    8 +-
 .../comments/comment.component.html           |    3 +-
 .../forms/geolocation-editor.component.html   |    4 +-
 .../queries/filter-comparison.component.html  |    6 +-
 .../search/queries/sorting.component.html     |    2 +-
 .../search/search-form.component.html         |   14 +-
 frontend/app/style.js                         |    8 +
 frontend/app/theme/_forms.scss                |    5 +
 75 files changed, 1064 insertions(+), 628 deletions(-)
 create mode 100644 frontend/app/style.js

diff --git a/frontend/app-config/webpack.config.js b/frontend/app-config/webpack.config.js
index 9f8c9d4c1..cf5deeebe 100644
--- a/frontend/app-config/webpack.config.js
+++ b/frontend/app-config/webpack.config.js
@@ -252,6 +252,7 @@ module.exports = function (env) {
          */
         config.entry = {
             'shims': './app/shims.ts',
+            'style': './app/style.js',
               'app': './app/app.ts'
         };
 
@@ -304,7 +305,7 @@ module.exports = function (env) {
             new plugins.HtmlWebpackPlugin({
                 filename: 'theme.html',
                 hash: true, 
-                chunks: [],
+                chunks: ['style'],
                 chunksSortMode: 'none', 
                 template: 'app/_theme.html'
             })
diff --git a/frontend/app/_theme.html b/frontend/app/_theme.html
index dde63e9a4..5c222f5c3 100644
--- a/frontend/app/_theme.html
+++ b/frontend/app/_theme.html
@@ -9,119 +9,129 @@
     <meta content="IE=edge" http-equiv="X-UA-Compatible" />
 
     <style>
-        body {
-            background: white !important;
+        .page-title h1 {
+            font-size: 40px;
         }
 
-        .bs-docs-section {
-            margin-top: 6em;
+        .bs-section-title {
+            font-size: 30px;
+            font-weight: lighter;
+            margin-bottom: 2rem;
         }
 
-        .bs-component .card {
-            margin-bottom: 1rem;
+        .bs-section {
+            padding-top: 2rem;
+            padding-bottom: 2rem;
         }
 
-        .bs-component+.bs-component {
-            margin-top: 1rem;
+        .bs-section-white {
+            background: white;
         }
 
         .bs-component {
-            position: relative;
+            margin-bottom: 1rem;
         }
 
-        .bs-component .modal {
-            position: relative;
-            display: block;
+        .modal-tabs {
+            height: 4rem
         }
-        
-        .progress {
-            margin-bottom: 10px;
+
+        .panel {
+            min-height: 500px;
+        }
+
+        .card {
+            margin-bottom: 1rem;
+        }
+
+        .table-items-row-details::before {
+            right: 80px !important;
         }
     </style>
 </head>
 
 <body>
-    <div class="container">
-        <div class="bs-docs-section clearfix">
+    <div class="bs-section container">
+        <div class="row">
+            <div class="col-lg-12 page-title">
+                <h1>Squidex Theme</h1>
+            </div>
+        </div>
+    </div>
+
+    <div class="bs-section bs-section-white">
+        <div class="container">
             <div class="row">
                 <div class="col-lg-12">
-                    <div class="page-header">
-                        <h1>Navbars</h1>
-                    </div>
-
-                    <div class="bs-component">
-                        <nav class="navbar navbar-toggleable-md navbar-dark bg-primary">
-                            <button type="button" class="navbar-toggler navbar-toggler-right">
-                                <span class="navbar-toggler-icon"></span>
-                            </button>
+                    <h1 class="bs-section-title">Navbars</h1>
+                </div>
+            </div>
 
-                            <a class="navbar-brand" href="#">Navbar</a>
-
-                            <div class="collapse navbar-collapse">
-                                <ul class="navbar-nav mr-auto">
-                                    <li class="nav-item active">
-                                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-                                    </li>
-                                    <li class="nav-item">
-                                        <a class="nav-link" href="#">Features</a>
-                                    </li>
-                                    <li class="nav-item">
-                                        <a class="nav-link" href="#">Pricing</a>
-                                    </li>
-                                    <li class="nav-item">
-                                        <a class="nav-link" href="#">About</a>
-                                    </li>
-                                </ul>
-
-                                <form class="form-inline">
-                                    <input class="form-control mr-sm-2" type="text" placeholder="Search">
-                                    <button type="button" class="btn btn-secondary my-2 my-sm-0">Search</button>
-                                </form>
-                            </div>
-                        </nav>
-                    </div>
+            <div class="row bs-component">
+                <div class="col-lg-12">
+                    <nav class="navbar navbar-expand navbar-dark bg-primary">
+                        <a class="navbar-brand" href="#">Navbar</a>
+        
+                        <ul class="navbar-nav ml-auto">
+                            <li class="nav-item active">
+                                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">Features</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">Pricing</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">About</a>
+                            </li>
+                        </ul>
+        
+                        <form class="form-inline">
+                            <input class="form-control mr-sm-2" type="text" placeholder="Search">
+        
+                            <button type="button" class="btn btn-secondary my-2 my-sm-0">Search</button>
+                        </form>
+                    </nav>
+                </div>
+            </div>
 
-                    <div class="bs-component">
-                        <nav class="navbar navbar-toggleable-md navbar-dark bg-inverse">
-                            <button type="button" class="navbar-toggler navbar-toggler-right">
-                                <span class="navbar-toggler-icon"></span>
-                            </button>
+            <div class="row bs-component">
+                <div class="col-lg-12">
+                    <nav class="navbar navbar-expand navbar-light bg-light">
+                        <a class="navbar-brand" href="#">Navbar</a>
+        
+                        <ul class="navbar-nav ml-auto">
+                            <li class="nav-item active">
+                                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">Features</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">Pricing</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">About</a>
+                            </li>
+                        </ul>
+        
+                        <form class="form-inline">
+                            <input class="form-control mr-sm-2" type="text" placeholder="Search">
 
-                            <a class="navbar-brand" href="#">Navbar</a>
-
-                            <div class="collapse navbar-collapse">
-                                <ul class="navbar-nav mr-auto">
-                                    <li class="nav-item active">
-                                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-                                    </li>
-                                    <li class="nav-item">
-                                        <a class="nav-link" href="#">Features</a>
-                                    </li>
-                                    <li class="nav-item">
-                                        <a class="nav-link" href="#">Pricing</a>
-                                    </li>
-                                    <li class="nav-item">
-                                        <a class="nav-link" href="#">About</a>
-                                    </li>
-                                </ul>
-
-                                <form class="form-inline">
-                                    <input class="form-control mr-sm-2" type="text" placeholder="Search">
-                                    <button type="button" class="btn btn-secondary my-2 my-sm-0">Search</button>
-                                </form>
-                            </div>
-                        </nav>
-                    </div>
+                            <button type="button" class="btn btn-secondary my-2 my-sm-0">Search</button>
+                        </form>
+                    </nav>
                 </div>
             </div>
         </div>
+    </div>
 
-        <div class="bs-docs-section">
-            <div class="page-header">
-                <div class="row">
-                    <div class="col-lg-12">
-                        <h1>Buttons</h1>
-                    </div>
+    <div class="bs-section bs-section-white">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12">
+                    <h1 class="bs-section-title">Buttons</h1>
                 </div>
             </div>
 
@@ -134,6 +144,7 @@
                         <button type="button" class="btn btn-info">Info</button>
                         <button type="button" class="btn btn-warning">Warning</button>
                         <button type="button" class="btn btn-danger">Danger</button>
+
                         <a class="btn btn-link">Link</a>
                     </p>
 
@@ -144,6 +155,7 @@
                         <button type="button" class="btn btn-text-info">Info</button>
                         <button type="button" class="btn btn-text-warning">Warning</button>
                         <button type="button" class="btn btn-text-danger">Danger</button>
+                        <button type="button" class="btn btn-text-secondary2">Secondary2</button>
                     </p>
 
                     <p class="bs-component">
@@ -167,23 +179,17 @@
                     <div class="bs-component">
                         <div class="btn-group" role="group">
                             <button type="button" class="btn btn-primary">Primary</button>
+
                             <div class="btn-group" role="group">
                                 <button type="button" class="btn btn-primary dropdown-toggle"></button>
-                                <div class="dropdown-menu">
-                                    <a class="dropdown-item" href="#">Dropdown link</a>
-                                    <a class="dropdown-item" href="#">Dropdown link</a>
-                                </div>
                             </div>
                         </div>
 
                         <div class="btn-group" role="group">
                             <button type="button" class="btn btn-success">Success</button>
+
                             <div class="btn-group" role="group">
                                 <button type="button" class="btn btn-success dropdown-toggle"></button>
-                                <div class="dropdown-menu">
-                                    <a class="dropdown-item" href="#">Dropdown link</a>
-                                    <a class="dropdown-item" href="#">Dropdown link</a>
-                                </div>
                             </div>
                         </div>
 
@@ -191,21 +197,14 @@
                             <button type="button" class="btn btn-info">Info</button>
                             <div class="btn-group" role="group">
                                 <button type="button" class="btn btn-info dropdown-toggle"></button>
-                                <div class="dropdown-menu">
-                                    <a class="dropdown-item" href="#">Dropdown link</a>
-                                    <a class="dropdown-item" href="#">Dropdown link</a>
-                                </div>
                             </div>
                         </div>
 
                         <div class="btn-group" role="group">
                             <button type="button" class="btn btn-danger">Danger</button>
+
                             <div class="btn-group" role="group">
                                 <button type="button" class="btn btn-danger dropdown-toggle"></button>
-                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
-                                    <a class="dropdown-item" href="#">Dropdown link</a>
-                                    <a class="dropdown-item" href="#">Dropdown link</a>
-                                </div>
                             </div>
                         </div>
                     </div>
@@ -215,8 +214,8 @@
                         <button type="button" class="btn btn-primary">Default button</button>
                         <button type="button" class="btn btn-primary btn-sm">Small button</button>
                     </div>
-
                 </div>
+
                 <div class="col-lg-5">
                     <p class="bs-component">
                         <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
@@ -254,7 +253,7 @@
                             </button>
                         </div>
                     </div>
-                    
+
                     <div class="bs-component" style="margin-bottom: 15px">
                         <div class="btn-group" data-toggle="buttons">
                             <button type="button" class="btn btn-toggle btn-success">
@@ -265,7 +264,7 @@
                             </button>
                         </div>
                     </div>
-                    
+
                     <div class="bs-component" style="margin-bottom: 15px">
                         <div class="btn-group" data-toggle="buttons">
                             <button type="button" class="btn btn-toggle btn-info">
@@ -307,12 +306,9 @@
 
                     <div class="bs-component">
                         <div class="btn-group-vertical" data-toggle="buttons">
-                            <button type="button" class="btn btn-primary">Button</button>
-                            <button type="button" class="btn btn-primary">Button</button>
-                            <button type="button" class="btn btn-primary">Button</button>
-                            <button type="button" class="btn btn-primary">Button</button>
-                            <button type="button" class="btn btn-primary">Button</button>
-                            <button type="button" class="btn btn-primary">Button</button>
+                            <button type="button" class="btn btn-primary">Top</button>
+                            <button type="button" class="btn btn-primary">Middle</button>
+                            <button type="button" class="btn btn-primary">Buttom</button>
                         </div>
                     </div>
 
@@ -332,15 +328,15 @@
                                 <button type="button" class="btn btn-secondary">3</button>
                                 <button type="button" class="btn btn-secondary">4</button>
                             </div>
-                            
+
                             &nbsp;
-                            
+
                             <div class="btn-group" role="group" aria-label="Second group">
                                 <button type="button" class="btn btn-secondary">5</button>
                                 <button type="button" class="btn btn-secondary">6</button>
                                 <button type="button" class="btn btn-secondary">7</button>
                             </div>
-                            
+
                             &nbsp;
 
                             <div class="btn-group" role="group" aria-label="Third group">
@@ -348,17 +344,16 @@
                             </div>
                         </div>
                     </div>
-
                 </div>
             </div>
         </div>
+    </div>
 
-        <div class="bs-docs-section">
+    <div class="bs-section bs-section-white">
+        <div class="container">
             <div class="row">
                 <div class="col-lg-12">
-                    <div class="page-header">
-                        <h1>Typography</h1>
-                    </div>
+                    <h1 class="bs-section-title">Typography</h1>
                 </div>
             </div>
 
@@ -383,7 +378,7 @@
                         <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
                         <p>The following is <strong>rendered as bold text</strong>.</p>
                         <p>The following is <em>rendered as italicized text</em>.</p>
-                        <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
+                        <p>The following is an abbreviation <abbr title="attribute">attr</abbr>.</p>
                     </div>
 
                 </div>
@@ -401,7 +396,7 @@
 
                 </div>
             </div>
-            
+
             <div class="row">
                 <div class="col-lg-12">
                     <h2>Blockquotes</h2>
@@ -412,6 +407,7 @@
                     <div class="bs-component">
                         <blockquote class="blockquote">
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
                             <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                         </blockquote>
                     </div>
@@ -420,20 +416,25 @@
                     <div class="bs-component">
                         <blockquote class="blockquote blockquote-reverse">
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
                             <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                         </blockquote>
                     </div>
                 </div>
             </div>
         </div>
+    </div>
 
-        <div class="bs-docs-section">
+    <div class="bs-section bs-section-white">
+        <div class="container">
             <div class="row">
                 <div class="col-lg-12">
-                    <div class="page-header">
-                        <h1>Tables</h1>
-                    </div>
+                    <h1 class="bs-section-title">Tables</h1>
+                </div>
+            </div>
 
+            <div class="row">
+                <div class="col-lg-12">
                     <div class="bs-component">
                         <table class="table table-striped table-hover table-bordered">
                             <thead class="thead-inverse">
@@ -493,39 +494,101 @@
                 </div>
             </div>
         </div>
+    </div>
 
-        <div class="bs-docs-section">
+    <div class="bs-section">
+        <div class="container">
             <div class="row">
                 <div class="col-lg-12">
-                    <div class="page-header">
-                        <h1>Forms</h1>
-                    </div>
+                    <h1 class="bs-section-title">Tables2</h1>
                 </div>
             </div>
 
             <div class="row">
-                <div class="col-lg-6">
+                <div class="col-lg-12">
                     <div class="bs-component">
-                        <form>
-                            <fieldset>
-                                <legend>Legend</legend>
+                        <table class="table table-items">
+                            <thead class="thead-inverse">
+                                <tr>
+                                    <th>#</th>
+                                    <th>Column heading</th>
+                                    <th>Column heading</th>
+                                    <th>Column heading</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>1</td>
+                                    <td>Column content</td>
+                                    <td>Column content</td>
+                                    <td>Column content</td>
+                                </tr>
+                                <tr class="spacer"></tr>
+
+                                <tr>
+                                    <td>2</td>
+                                    <td>Column content</td>
+                                    <td>Column content</td>
+                                    <td>Column content</td>
+                                </tr>
+                                <tr class="spacer"></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="bs-section bs-section-white">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12">
+                    <h1 class="bs-section-title">Forms</h1>
+                </div>
+            </div>
+
+            <form>
+                <fieldset>
+                    <legend>Legend</legend>
+
+                    <div class="form-alert form-alert-error">
+                        <p>Validation error.</p>
+
+                        <ul>
+                            <li>An user with the same email aready exists.</li>
+                        </ul>
+                    </div>
+
+                    <div class="row">
+                        <div class="col-lg-6">
+                            <div class="bs-component">
                                 <div class="form-group">
-                                    <label for="exampleInputEmail1">Email address</label>
-                                    <input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
-                                    <small class="text-muted form-text">We'll never share your email with anyone else.</small>
+                                    <label>Email address</label>
+
+                                    <input type="email" class="form-control" placeholder="Enter email" autocomplete="off">
+
+                                    <small class="text-muted form-text">We will never share your email with anyone else.</small>
                                 </div>
+
                                 <div class="form-group">
-                                    <label for="underlinedInputHelp">Underlined</label>
-                                    <input type="text" class="form-control form-underlined" name="xyz" aria-describedby="underlinedInputHelp" placeholder="Enter text">
-                                    <small class="text-muted form-text">Input with just a line.</small>
+                                    <label>Underlined</label>
+
+                                    <input type="text" class="form-control form-underlined" placeholder="Enter text" autocomplete="false">
+
+                                    <small class="text-muted form-text">Input with just an underlined.</small>
                                 </div>
+
                                 <div class="form-group">
-                                    <label for="exampleInputPassword1">Password</label>
-                                    <input type="password" class="form-control" placeholder="Password">
+                                    <label>Password</label>
+
+                                    <input type="password" class="form-control" placeholder="Password" autocomplete="false">
                                 </div>
+
                                 <div class="form-group">
-                                    <label for="exampleSelect1">Example select</label>
-                                    <select class="form-control">
+                                    <label>Example custom select</label>
+
+                                    <select class="custom-select">
                                         <option>1</option>
                                         <option>2</option>
                                         <option>3</option>
@@ -533,9 +596,11 @@
                                         <option>5</option>
                                     </select>
                                 </div>
+
                                 <div class="form-group">
-                                    <label for="exampleSelect2">Example multiple select</label>
-                                    <select multiple class="form-control">
+                                    <label>Example custom multiple select</label>
+
+                                    <select multiple class="custom-select">
                                         <option>1</option>
                                         <option>2</option>
                                         <option>3</option>
@@ -543,134 +608,187 @@
                                         <option>5</option>
                                     </select>
                                 </div>
+
                                 <div class="form-group">
-                                    <label for="exampleTextarea">Example textarea</label>
+                                    <label>Example textarea</label>
+
                                     <textarea class="form-control" rows="3"></textarea>
                                 </div>
+
+                                <div class="form-group">
+                                    <label>Custom File input</label>
+
+                                    <div class="custom-file">
+                                        <input type="file" class="custom-file-input" id="customFile">
+
+                                        <label class="custom-file-label" for="customFile">Choose file</label>
+                                    </div>
+                                </div>
+
                                 <div class="form-group">
-                                    <label for="exampleInputFile">File input</label>
-                                    <input type="file" class="form-control-file" aria-describedby="fileHelp">
-                                    <sqx-form-hint>This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
+                                    <label>File input</label>
+
+                                    <input type="file" class="form-control-file">
                                 </div>
-                                <fieldset class="form-group">
-                                    <legend>Radio buttons</legend>
-                                    <div class="form-check">
-                                        <label class="form-check-label">
-                                            <input type="radio" class="form-check-input" name="optionsRadios" value="option1" checked>
-                                            Option one is this and that&mdash;be sure to include why it's great
-                                        </label>
+
+                                <div class="form-group">
+                                    <h2>Custom Radio buttons</h2>
+
+                                    <div class="custom-control custom-radio">
+                                        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
+                                        <label class="custom-control-label" for="customRadio1">Option 1</label>
                                     </div>
-                                    <div class="form-check">
-                                        <label class="form-check-label">
-                                            <input type="radio" class="form-check-input" name="optionsRadios" value="option2">
-                                            Option two can be something else and selecting it will deselect option one
-                                        </label>
+
+                                    <div class="custom-control custom-radio">
+                                        <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
+                                        <label class="custom-control-label" for="customRadio2">Option 2</label>
                                     </div>
-                                    <div class="form-check disabled">
-                                        <label class="form-check-label">
-                                            <input type="radio" class="form-check-input" name="optionsRadios" value="option3" disabled>
-                                            Option three is disabled
-                                        </label>
+                                    
+                                    <div class="custom-control custom-radio">
+                                        <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" disabled>
+                                        <label class="custom-control-label" for="customRadio3">Option 3 (disabled)</label>
                                     </div>
-                                </fieldset>
-                                <div class="form-check">
-                                    <label class="form-check-label">
-                                        <input class="form-check-input" type="checkbox">
-                                        Check me out
-                                    </label>
                                 </div>
-                                <button type="submit" class="btn btn-primary">Submit</button>
-                            </fieldset>
-                        </form>
-                    </div>
-                </div>
+                                
+                                <div class="form-group">
+                                    <h2>Custom Checkboxes</h2>
 
-                <div class="col-lg-4 col-lg-offset-1">
-                    <form class="bs-component">
-                        <div class="form-group">
-                            <fieldset disabled>
-                                <label class="control-label" for="disabledInput">Disabled input</label>
-                                <input class="form-control" type="text" placeholder="Disabled input here..." disabled="">
-                            </fieldset>
-
-                            <fieldset disabled>
-                                <label class="control-label" for="disabledInput">Disabled underlined input</label>
-                                <input class="form-control form-underlined" type="text" placeholder="Disabled input here..." disabled="">
-                            </fieldset>
-                        </div>
+                                    <div class="custom-control custom-checkbox">
+                                        <input type="checkbox" id="customCheckbox1" name="customRadio" class="custom-control-input">
+                                        <label class="custom-control-label" for="customCheckbox1">Option 1</label>
+                                    </div>
 
-                        <div class="form-group">
-                            <fieldset>
-                                <label class="control-label" for="readOnlyInput">Readonly input</label>
-                                <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
-                            </fieldset>
+                                    <div class="custom-control custom-checkbox">
+                                        <input type="checkbox" id="customCheckbox2" name="customRadio" class="custom-control-input">
+                                        <label class="custom-control-label" for="customCheckbox2">Option 2</label>
+                                    </div>
+                                    
+                                    <div class="custom-control custom-checkbox">
+                                        <input type="checkbox" id="customCheckbox3" name="customRadio" class="custom-control-input" disabled>
+                                        <label class="custom-control-label" for="customCheckbox3">Option 3 (disabled)</label>
+                                    </div>
+                                </div>
 
-                            <fieldset>
-                                <label class="control-label" for="readOnlyInput">Readonly underlined input</label>
-                                <input class="form-control form-underlined" type="text" placeholder="Readonly input here…" readonly>
-                            </fieldset>
+                                <button type="submit" class="btn btn-primary">Submit</button>
+                            </div>
                         </div>
 
-                        <div class="form-group has-success">
-                            <label class="form-control-label" for="inputSuccess1">Input with success</label>
-                            <input type="text" class="form-control is-valid">
-                            <div class="valid-feedback">Success! You've done it.</div>
-                        </div>
+                        <div class="col-lg-4 col-lg-offset-1">
+                            <form class="bs-component">
+                                <div class="form-group">
+                                    <label>Disabled input</label>
 
-                        <div class="form-group has-warning">
-                            <label class="form-control-label" for="inputWarning1">Input with warning</label>
-                            <input type="text" class="form-control is-invalid">
-                            <div class="invalid-feedback">Shucks, try again.</div>
-                        </div>
+                                    <input class="form-control" type="text" placeholder="Disabled input here..." disabled>
+                                </div>
 
-                        <div class="form-group">
-                            <label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
-                            <input class="form-control form-control-lg" type="text">
-                        </div>
+                                <div class="form-group">
+                                    <label>Disabled underlined input</label>
 
-                        <div class="form-group">
-                            <label class="col-form-label" for="inputDefault">Default input</label>
-                            <input type="text" class="form-control">
-                        </div>
+                                    <input class="form-control form-underlined" type="text" placeholder="Disabled input here..." disabled>
+                                </div>
 
-                        <div class="form-group">
-                            <label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
-                            <input class="form-control form-control-sm" type="text">
-                        </div>
+                                <div class="form-group">
+                                    <label>Readonly input</label>
 
-                        <div class="form-group">
-                            <label class="control-label">Input addons</label>
-                            
-                            <div class="input-group mb-3">
-                                <div class="input-group-prepend">
-                                    <span class="input-group-text">$</span>
+                                    <input class="form-control" type="text" placeholder="Disabled input here..." readonly>
                                 </div>
-                                
-                                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
-                                
-                                <div class="input-group-append">
-                                    <span class="input-group-text">.00</span>
+
+                                <div class="form-group">
+                                    <label>Readonly underlined input</label>
+
+                                    <input class="form-control form-underlined" type="text" placeholder="Disabled input here..." readonly>
                                 </div>
-                              </div>
-                        </div>
-                    </form>
 
-                </div>
-            </div>
+                                <div class="form-group has-success">
+                                    <label>Input with success</label>
+
+                                    <input type="text" class="form-control is-valid">
+
+                                    <div class="valid-feedback">Success! You've done it.</div>
+                                </div>
+
+                                <div class="form-group has-warning">
+                                    <label>Input with warning</label>
+
+                                    <input type="text" class="form-control is-invalid">
+
+                                    <div class="invalid-feedback">Shucks, try again.</div>
+                                </div>
+
+                                <div class="form-group has-warning">
+                                    <label>Input with error</label>
+
+                                    <div class="errors-container">
+                                        <div class="errors">You have entered an invalid value.</div>
+                                    </div>
+
+                                    <input type="text" class="form-control is-invalid">
+                                </div>
+
+                                <div class="form-group has-warning">
+                                    <label>Input with hint</label>
+
+                                    <input type="text" class="form-control">
+
+                                    <div class="alert alert-hint mt-2">
+                                        <i class="icon-info-outline"></i> The app name cannot be changed later.
+                                    </div>
+                                </div>
+
+                                <div class="form-group">
+                                    <label>Large input</label>
+
+                                    <input class="form-control form-control-lg" type="text">
+                                </div>
+
+                                <div class="form-group">
+                                    <label>Default input</label>
+
+                                    <input type="text" class="form-control">
+                                </div>
+
+                                <div class="form-group">
+                                    <label>Small input</label>
+
+                                    <input class="form-control form-control-sm" type="text">
+                                </div>
+
+                                <div class="form-group">
+                                    <label>Input addons</label>
+
+                                    <div class="input-group mb-3">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text">$</span>
+                                        </div>
+
+                                        <input type="text" class="form-control"
+                                            aria-label="Amount (to the nearest dollar)">
+
+                                        <div class="input-group-append">
+                                            <span class="input-group-text">.00</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </fieldset>
+            </form>
         </div>
+    </div>
 
-        <div class="bs-docs-section">
+    <div class="bs-section bs-section-white">
+        <div class="container">
             <div class="row">
                 <div class="col-lg-12">
-                    <div class="page-header">
-                        <h1>Navs</h1>
-                    </div>
+                    <h1 class="bs-section-title">Forms</h1>
                 </div>
             </div>
 
             <div class="row" style="margin-bottom: 2rem">
                 <div class="col-lg-6">
                     <h2>Tabs</h2>
+
                     <div class="bs-component">
                         <ul class="nav nav-tabs">
                             <li class="nav-item">
@@ -683,7 +801,24 @@
                                 <a class="nav-link disabled" href="#">Disabled</a>
                             </li>
                             <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown</a>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="bs-component">
+                        <ul class="nav nav-tabs2">
+                            <li class="nav-item">
+                                <a class="nav-link active" href="#home">Home</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#profile">Profile</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link disabled" href="#">Disabled</a>
+                            </li>
+                            <li class="nav-item dropdown">
+                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown</a>
                             </li>
                         </ul>
                     </div>
@@ -691,22 +826,14 @@
 
                 <div class="col-lg-6">
                     <h2>Pills</h2>
+
                     <div class="bs-component">
                         <ul class="nav nav-pills">
                             <li class="nav-item">
                                 <a class="nav-link active" href="#">Active</a>
                             </li>
                             <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-                                <div class="dropdown-menu">
-                                    <a class="dropdown-item" href="#">Action</a>
-                                    <a class="dropdown-item" href="#">Another action</a>
-                                    <a class="dropdown-item" href="#">Something else here</a>
-
-                                    <div class="dropdown-divider"></div>
-
-                                    <a class="dropdown-item" href="#">Separated link</a>
-                                </div>
+                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown</a>
                             </li>
                             <li class="nav-item">
                                 <a class="nav-link" href="#">Link</a>
@@ -716,23 +843,16 @@
                             </li>
                         </ul>
                     </div>
+
                     <br>
+
                     <div class="bs-component">
-                        <ul class="nav nav-pills nav-stacked">
+                        <ul class="nav flex-column">
                             <li class="nav-item">
                                 <a class="nav-link active" href="#">Active</a>
                             </li>
                             <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-                                <div class="dropdown-menu">
-                                    <a class="dropdown-item" href="#">Action</a>
-                                    <a class="dropdown-item" href="#">Another action</a>
-                                    <a class="dropdown-item" href="#">Something else here</a>
-
-                                    <div class="dropdown-divider"></div>
-
-                                    <a class="dropdown-item" href="#">Separated link</a>
-                                </div>
+                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown</a>
                             </li>
                             <li class="nav-item">
                                 <a class="nav-link" href="#">Link</a>
@@ -748,6 +868,7 @@
             <div class="row">
                 <div class="col-lg-6">
                     <h2>Breadcrumbs</h2>
+
                     <div class="bs-component">
                         <ol class="breadcrumb">
                             <li class="breadcrumb-item active">Home</li>
@@ -773,6 +894,7 @@
 
                 <div class="col-lg-6">
                     <h2>Pagination</h2>
+
                     <div class="bs-component">
                         <div>
                             <ul class="pagination">
@@ -851,28 +973,48 @@
                                 </li>
                             </ul>
                         </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="row">
+                <div class="col-lg-6">
+                    <h2>Dropdown</h2>
 
+                    <div class="bs-component">
+                        <div class="dropdown-menu" style="position: static; display: block;">
+                            <a class="dropdown-item" href="#">Action</a>
+                            <a class="dropdown-item" href="#">Another action</a>
+                            <a class="dropdown-item" href="#">Something else here</a>
+
+                            <div class="dropdown-divider"></div>
+
+                            <a class="dropdown-item dropdown-item-delete" href="#">Separated link</a>
+                          </div>
                     </div>
                 </div>
             </div>
         </div>
+    </div>
 
-        <div class="bs-docs-section">
+    <div class="bs-section bs-section-white">
+        <div class="container">
             <div class="row">
                 <div class="col-lg-12">
-                    <div class="page-header">
-                        <h1>Indicators</h1>
-                    </div>
+                    <h1 class="bs-section-title">Indicators</h1>
                 </div>
             </div>
 
             <div class="row">
                 <div class="col-lg-12">
                     <h2>Alerts</h2>
+
                     <div class="bs-component">
                         <div class="alert alert-dismissible alert-warning mt-2">
                             <button type="button" class="close" data-dismiss="alert">&times;</button>
+
                             <h4>Warning!</h4>
+
                             <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
                         </div>
                     </div>
@@ -883,6 +1025,7 @@
                     <div class="bs-component">
                         <div class="alert alert-dismissible alert-danger mt-2">
                             <button type="button" class="close" data-dismiss="alert">&times;</button>
+
                             <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
                         </div>
                     </div>
@@ -891,6 +1034,7 @@
                     <div class="bs-component">
                         <div class="alert alert-dismissible alert-success mt-2">
                             <button type="button" class="close" data-dismiss="alert">&times;</button>
+
                             <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
                         </div>
                     </div>
@@ -899,13 +1043,16 @@
                     <div class="bs-component">
                         <div class="alert alert-dismissible alert-info mt-2">
                             <button type="button" class="close" data-dismiss="alert">&times;</button>
+
                             <i class="icon-info-outline"></i> <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
                         </div>
                     </div>
                 </div>
             </div>
+
             <div>
                 <h2>Badges</h2>
+
                 <div class="bs-component" style="margin-bottom: 40px">
                     <span class="badge badge-primary">Primary</span>
                     <span class="badge badge-secondary">Secondary</span>
@@ -916,6 +1063,7 @@
                     <span class="badge badge-light">Light</span>
                     <span class="badge badge-dark">Dark</span>
                 </div>
+
                 <div class="bs-component">
                     <span class="badge badge-pill badge-primary">Primary</span>
                     <span class="badge badge-pill badge-secondary">Secondary</span>
@@ -928,103 +1076,99 @@
                 </div>
             </div>
         </div>
+    </div>
 
-        <div class="bs-docs-section">
+    <div class="bs-section bs-section-white">
+        <div class="container">
             <div class="row">
                 <div class="col-lg-12">
-                    <div class="page-header">
-                        <h1>Progress</h1>
-                    </div>
+                    <h1 class="bs-section-title">Progress</h1>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-lg-12">
+                    <h2>Basic</h2>
 
-                    <h3>Basic</h3>
                     <div class="bs-component">
                         <div class="progress">
-                            <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                            <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px"></div>
                         </div>
                     </div>
 
-                    <h3>Contextual alternatives</h3>
+                    <h2>Contextual alternatives</h2>
+
                     <div class="bs-component">
-                        <div class="progress">
-                            <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div class="progress mb-1">
+                            <div class="progress-bar bg-success" role="progressbar" style="width: 25%"></div>
                         </div>
-                        <div class="progress">
-                            <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div class="progress mb-1">
+                            <div class="progress-bar bg-info" role="progressbar" style="width: 50%"></div>
                         </div>
-                        <div class="progress">
-                            <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div class="progress mb-1">
+                            <div class="progress-bar bg-warning" role="progressbar" style="width: 75%"></div>
                         </div>
-                        <div class="progress">
-                            <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div class="progress mb-1">
+                            <div class="progress-bar bg-danger" role="progressbar" style="width: 100%"></div>
                         </div>
                     </div>
 
-                    <h3>Multiple bars</h3>
+                    <h2>Multiple bars</h2>
+
                     <div class="bs-component">
-                        <div class="progress">
-                            <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
-                            <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
-                            <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div class="progress mb-1">
+                            <div class="progress-bar" role="progressbar" style="width: 15%"></div>
+                            <div class="progress-bar bg-success" role="progressbar" style="width: 30%"></div>
+                            <div class="progress-bar bg-info" role="progressbar" style="width: 20%"></div>
                         </div>
                     </div>
 
-                    <h3>Striped</h3>
+                    <h2>Striped</h2>
+
                     <div class="bs-component">
-                        <div class="progress">
-                            <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" 
-                                aria-valuenow="10"
-                                aria-valuemin="0"
-                                aria-valuemax="100"></div>
+                        <div class="progress mb-1">
+                            <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"></div>
                         </div>
-                        <div class="progress">
-                            <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" 
-                                aria-valuenow="25" 
-                                aria-valuemin="0"
-                                aria-valuemax="100"></div>
+                        <div class="progress mb-1">
+                            <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%"></div>
                         </div>
-                        <div class="progress">
-                            <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" 
-                                aria-valuenow="50" 
-                                aria-valuemin="0"
-                                aria-valuemax="100"></div>
+                        <div class="progress mb-1">
+                            <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%"></div>
                         </div>
-                        <div class="progress">
-                            <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" 
-                                aria-valuenow="75" 
-                                aria-valuemin="0"
-                                aria-valuemax="100"></div>
+                        <div class="progress mb-1">
+                            <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%"></div>
                         </div>
                         <div class="progress">
-                            <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" 
-                                aria-valuenow="100" 
-                                aria-valuemin="0"
-                                aria-valuemax="100"></div>
+                            <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%"></div>
                         </div>
                     </div>
 
-                    <h3>Animated</h3>
+                    <h2>Animated</h2>
+
                     <div class="bs-component">
                         <div class="progress">
-                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" 
-                                aria-valuenow="75" 
-                                aria-valuemin="0"
-                                aria-valuemax="100" style="width: 75%">
-                            </div>
+                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+    </div>
+
+    <div class="bs-section bs-section-white">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12">
+                    <h1 class="bs-section-title">Containers</h1>
+                </div>
+            </div>
 
-        <div class="bs-docs-section">
             <div class="row">
                 <div class="col-lg-12">
-                    <div class="page-header">
-                        <h1>Containers</h1>
-                    </div>
                     <div class="bs-component">
                         <div class="jumbotron">
                             <h1 class="display-3">Jumbotron</h1>
+
                             <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                             <p><a class="btn btn-primary btn-lg" href="#">Learn more</a></p>
                         </div>
@@ -1063,25 +1207,32 @@
                         </div>
                     </div>
                 </div>
+
                 <div class="col-lg-4">
                     <div class="bs-component">
                         <div class="list-group">
                             <a href="#" class="list-group-item list-group-item-action active">
                                 <h4 class="list-group-item-heading">List group item heading</h4>
+
                                 <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                             </a>
                             <a href="#" class="list-group-item list-group-item-action">
                                 <h4 class="list-group-item-heading">List group item heading</h4>
+
                                 <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                             </a>
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 
+    <div class="bs-section">
+        <div class="container">
             <div class="row">
                 <div class="col-lg-12">
-                    <h2>Cards</h2>
+                    <h1 class="bs-section-title">Cards</h1>
                 </div>
             </div>
 
@@ -1092,6 +1243,7 @@
                             <div class="card-body">
                                 <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
@@ -1100,6 +1252,7 @@
                             <div class="card-body">
                                 <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
@@ -1108,6 +1261,7 @@
                             <div class="card-body">
                                 <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
@@ -1116,6 +1270,7 @@
                             <div class="card-body">
                                 <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
@@ -1124,6 +1279,7 @@
                             <div class="card-body">
                                 <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
@@ -1136,6 +1292,7 @@
                             <div class="card-body">
                                 <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
@@ -1144,6 +1301,7 @@
                             <div class="card-body">
                                 <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
@@ -1152,6 +1310,7 @@
                             <div class="card-body">
                                 <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
@@ -1160,6 +1319,7 @@
                             <div class="card-body">
                                 <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
@@ -1168,6 +1328,7 @@
                             <div class="card-body">
                                 <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
@@ -1179,19 +1340,21 @@
                     <div class="bs-component">
                         <div class="card">
                             <h3 class="card-header">Card header</h3>
+
                             <div class="card-body">
                                 <h5 class="card-title">Special title treatment</h5>
+
                                 <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                             </div>
-                            
+
                             <img style="height: 200px; width: 100%; display: block" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
-                            
+
                             <div class="card-body">
-                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                                <p href="#" class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                 <a href="#" class="card-link">Card link</a>
                                 <a href="#" class="card-link">Another link</a>
                             </div>
-                            
+
                             <div class="card-footer text-muted text-xs-center">
                                 2 days ago
                             </div>
@@ -1200,34 +1363,34 @@
                 </div>
             </div>
         </div>
+    </div>
 
-        <div class="bs-docs-section">
+    <div class="bs-section">
+        <div class="container">
             <div class="row">
                 <div class="col-lg-12">
-                    <div class="page-header">
-                        <h1>Dialogs</h1>
-                    </div>
+                    <h1 class="bs-section-title">Modals</h1>
                 </div>
             </div>
+
             <div class="row">
-                <div class="col-lg-6">
-                    <h2>Modals</h2>
+                <div class="col-lg-12">
                     <div class="bs-component">
-                        <div class="modal" style="position: relative; width: 100%; height: 500px">
-                            <div class="modal-backdrop show" style="position: absolute"></div> 
-                        
-                            <div class="modal-dialog modal-lg" style="position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px">
+                        <div class="modal" style="position: relative; width: 100%; height: 500px; display: block;">
+                            <div class="modal-backdrop show" style="position: absolute"></div>
+
+                            <div class="modal-dialog modal-lg" style="position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px; display: block;">
                                 <div class="modal-content">
                                     <div class="modal-header" *ngIf="showHeader">
                                         <h4 class="modal-title">
                                             Title
                                         </h4>
-                        
+
                                         <button type="button" class="close">
                                             <span aria-hidden="true">&times;</span>
                                         </button>
                                     </div>
-                        
+
                                     <div class="modal-tabs clearfix">
                                         <ul class="nav nav-tabs2">
                                             <li class="nav-item">
@@ -1244,15 +1407,16 @@
                                             </li>
                                         </ul>
                                     </div>
-                        
+
                                     <div class="modal-body">
                                         Modal body text goes here.
                                     </div>
-                        
+
                                     <div class="modal-footer">
                                         <div class="clearfix">
                                             <button type="button" class="float-right btn btn-primary">Save changes</button>
-                                            <button type="button" class="float-left btn btn-secondary">Close</button>
+
+                                            <button type="button" class="float-left btn btn-text-secondary2">Close</button>
                                         </div>
                                     </div>
                                 </div>
@@ -1262,18 +1426,147 @@
                 </div>
             </div>
         </div>
+    </div>
 
-        <div class="bs-docs-section">
+    <div class="bs-section">
+        <div class="container">
             <div class="row">
                 <div class="col-lg-12">
-                    <div class="page-header">
-                        <h1>Modals</h1>
+                    <h1 class="bs-section-title">Lists</h1>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="bs-component">
+                        <div class="table-items-row table-items-row-expandable">
+                            <div class="table-items-row-summary">
+                                <div class="row no-gutters">
+                                    <div class="col">
+                                        My Item 1
+                                    </div>
+                                    <div class="col col-auto">
+                                        <button type="button" class="btn btn-secondary table-items-edit-button mr-1">
+                                            <i class="icon-settings"></i>
+                                        </button>
+                                        <button type="button" class="btn btn-text-danger"">
+                                            <i class="icon-bin2"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="table-items-row-details">
+                                <div class="table-items-row-details-tabs clearfix">
+                                    <ul class="nav nav-tabs2">
+                                        <li class="nav-item">
+                                            <a class="nav-link active">Tab1</a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link">Tab2</a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link">Tab3</a>
+                                        </li>
+                                    </ul>
+                                            
+                                    <div class="float-right">
+                                        <button type="reset" class="btn btn-text-secondary2">Cancel</button>
+                                        <button type="submit" class="btn btn-primary ml-1">Save</button>
+                                    </div>
+                                </div>
+                                <div class="table-items-row-details-tab">
+                                    Text
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="table-items-row table-items-row-expandable">
+                            <div class="table-items-row-summary">
+                                <div class="row no-gutters">
+                                    <div class="col">
+                                        My Item 2
+                                    </div>
+                                    <div class="col col-auto">
+                                        <button type="button" class="btn btn-secondary table-items-edit-button mr-1">
+                                            <i class="icon-settings"></i>
+                                        </button>
+                                        <button type="button" class="btn btn-text-danger"">
+                                            <i class="icon-bin2"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="table-items-row table-items-row-expandable">
+                            <div class="table-items-row-summary">
+                                <div class="row no-gutters">
+                                    <div class="col col-name">
+                                        My Item 3
+                                    </div>
+                                    <div class="col col-auto">
+                                        <button type="button" class="btn btn-secondary table-items-edit-button mr-1">
+                                            <i class="icon-settings"></i>
+                                        </button>
+                                        <button type="button" class="btn btn-text-danger"">
+                                            <i class="icon-bin2"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="table-items-row">
+                            <div class="row no-gutters">
+                                <div class="col col-name">
+                                    My Item 4
+                                </div>
+                                <div class="col col-auto">
+                                    <button type="button" class="btn btn-secondary table-items-edit-button mr-1">
+                                        <i class="icon-settings"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-text-danger"">
+                                        <i class="icon-bin2"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                       
+                        <div class="table-items-footer">
+                            <form>
+                                <div class="row no-gutters">
+                                    <div class="col">
+                                        <input class="form-control" placeholder="Enter workflow name">
+                                    </div>
+                                    <div class="col-auto pl-1">
+                                        <button ype="submit" class="btn btn-success">Add Workflow</button>
+                                    </div>
+                                    <div class="col-auto pl-1">
+                                        <button type="reset" class="btn btn-text-secondary2">
+                                            Cancel
+                                        </button>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
+
+    <div class="bs-section">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12">
+                    <h1 class="bs-section-title">Panels</h1>
+                </div>
+            </div>
+
             <div class="row">
                 <div class="col-lg-12">
                     <h2>Default</h2>
+
                     <div class="bs-component">
                         <div class="panel panel-light">
                             <div class="panel-header">
@@ -1281,30 +1574,24 @@
                                     <div class="float-right">
                                         <button type="button" class="btn btn-success">New</button>
                                     </div>
-                        
+
                                     <h3 class="panel-title">
                                         Title
                                     </h3>
                                 </div>
-                        
+
                                 <a class="panel-close">
                                     <i class="icon-close"></i>
                                 </a>
                             </div>
-                        
+
                             <div class="panel-main">
-                                <div class="panel-content">
+                                <div class="panel-content grid">
                                     <div class="panel-alert panel-alert-danger">
                                         Alert
                                     </div>
-
-                                    <ul>
-                                        <li>One</li>
-                                        <li>Two</li>
-                                        <li>Three</li>
-                                    </ul>
                                 </div>
-                        
+
                                 <div class="panel-sidebar">
                                     <a href="#" class="panel-link">
                                         <i class="icon-help2"></i>
@@ -1319,6 +1606,7 @@
             <div class="row">
                 <div class="col-lg-6">
                     <h2>Light</h2>
+
                     <div class="bs-component">
                         <div class="panel panel-light">
                             <div class="panel-header">
@@ -1326,48 +1614,29 @@
                                     <div class="float-right">
                                         <button type="button" class="btn btn-success">New</button>
                                     </div>
-                        
+
                                     <h3 class="panel-title">
                                         Title
                                     </h3>
                                 </div>
-                        
+
                                 <a class="panel-close">
                                     <i class="icon-close"></i>
                                 </a>
                             </div>
-                        
+
                             <div class="panel-main">
                                 <div class="panel-content panel-content-blank">
-                                    <ul class="nav nav-panel nav-dark-bordered flex-column">
-                                        <li class="nav-item">
-                                            <a class="nav-link">Link 1
-                                                <i class="icon-angle-right"></i>
-                                            </a>
-                                        </li>
-                                        <li class="nav-item">
-                                            <a class="nav-link">Link 2
-                                                <i class="icon-angle-right"></i>
-                                            </a>
-                                        </li>
-                                        <li class="nav-item">
-                                            <a class="nav-link active">Link 3
-                                                <i class="icon-angle-right"></i>
-                                            </a>
-                                        </li>
-                                        <li class="nav-item">
-                                            <a class="nav-link">Link 4
-                                                <i class="icon-angle-right"></i>
-                                            </a>
-                                        </li>
-                                    </ul>
+                                    Text
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
+
                 <div class="col-lg-6">
                     <h2>Dark</h2>
+
                     <div class="bs-component">
                         <div class="panel panel-dark">
                             <div class="panel-header large">
@@ -1375,43 +1644,47 @@
                                     <div class="float-right">
                                         <button type="button" class="btn btn-success">New</button>
                                     </div>
-                        
+
                                     <h3 class="panel-title">
                                         Title
                                     </h3>
                                 </div>
-                        
+
                                 <a class="panel-close">
                                     <i class="icon-close"></i>
                                 </a>
-                                    
+
                                 <div class="panel-header-row">
                                     <div class="search-form">
                                         <input class="form-control form-control-dark" placeholder="Search here..." />
                                     </div>
                                 </div>
                             </div>
-                        
+
                             <div class="panel-main">
                                 <div class="panel-content">
                                     <ul class="nav nav-panel nav-dark nav-dark-bordered flex-column">
                                         <li class="nav-item">
-                                            <a class="nav-link">Link 1
+                                            <a class="nav-link d-flex justify-content-between">
+                                                Link 1
                                                 <i class="icon-angle-right"></i>
                                             </a>
                                         </li>
                                         <li class="nav-item">
-                                            <a class="nav-link">Link 2
+                                            <a class="nav-link d-flex justify-content-between">
+                                                Link 2
                                                 <i class="icon-angle-right"></i>
                                             </a>
                                         </li>
                                         <li class="nav-item">
-                                            <a class="nav-link active">Link 3
+                                            <a class="nav-link d-flex justify-content-between">
+                                                Link 3
                                                 <i class="icon-angle-right"></i>
                                             </a>
                                         </li>
                                         <li class="nav-item">
-                                            <a class="nav-link">Link 4
+                                            <a class="nav-link d-flex justify-content-between">
+                                                Link 4
                                                 <i class="icon-angle-right"></i>
                                             </a>
                                         </li>
@@ -1425,5 +1698,4 @@
         </div>
     </div>
 </body>
-
 </html>
\ No newline at end of file
diff --git a/frontend/app/features/administration/pages/restore/restore-page.component.html b/frontend/app/features/administration/pages/restore/restore-page.component.html
index 2b4eaf396..903803700 100644
--- a/frontend/app/features/administration/pages/restore/restore-page.component.html
+++ b/frontend/app/features/administration/pages/restore/restore-page.component.html
@@ -57,7 +57,9 @@
                         <input class="form-control" formControlName="name" placeholder="{{ 'backups.restoreNewAppName' | sqxTranslate }}">
                     </div>
                     <div class="col-auto pl-1">
-                        <button type="submit" class="btn btn-success" [disabled]="restoreForm.hasNoUrl | async">{{ 'backups.restore' | sqxTranslate }}</button>
+                        <button type="submit" class="btn btn-success" [disabled]="restoreForm.hasNoUrl | async">
+                            {{ 'backups.restore' | sqxTranslate }}
+                        </button>
                     </div>
                 </div>
             </form>
diff --git a/frontend/app/features/content/pages/contents/contents-page.component.html b/frontend/app/features/content/pages/contents/contents-page.component.html
index 40f51bffb..241524d64 100644
--- a/frontend/app/features/content/pages/contents/contents-page.component.html
+++ b/frontend/app/features/content/pages/contents/contents-page.component.html
@@ -82,7 +82,13 @@
                         <thead>
                             <tr>
                                 <th class="cell-select">
-                                    <input type="checkbox" class="form-check" [ngModel]="selectedAll" (ngModelChange)="selectAll($event)">
+                                    <div class="custom-control custom-checkbox">
+                                        <input class="custom-control-input" type="checkbox" id="all_selected"
+                                            [ngModel]="selectedAll" 
+                                            (ngModelChange)="selectAll($event)">
+
+                                        <label class="custom-control-label" for="all_selected"></label>
+                                    </div>
                                 </th>
                                 <th class="cell-actions cell-actions-left">
                                     {{ 'common.actions' | sqxTranslate }}
diff --git a/frontend/app/features/content/pages/contents/custom-view-editor.component.html b/frontend/app/features/content/pages/contents/custom-view-editor.component.html
index 8e4e157a3..71d55aa29 100644
--- a/frontend/app/features/content/pages/contents/custom-view-editor.component.html
+++ b/frontend/app/features/content/pages/contents/custom-view-editor.component.html
@@ -14,9 +14,9 @@
         <div *ngFor="let field of fieldNames" cdkDrag>
             <i class="icon-drag2 drag-handle"></i> 
             
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" checked (click)="removeField(field)" id="field_{{field}}">
-                <label class="form-check-label" for="field_{{field}}">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" checked (click)="removeField(field)" id="field_{{field}}">
+                <label class="custom-control-label" for="field_{{field}}">
                     {{field}}
                 </label>
             </div>
@@ -29,9 +29,9 @@
         <div *ngFor="let field of fieldsNotAdded">    
             <i class="icon-drag2 drag-handle invisible"></i> 
 
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" (click)="addField(field)" id="field_{{field}}">
-                <label class="form-check-label" for="field_{{field}}">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" (click)="addField(field)" id="field_{{field}}">
+                <label class="custom-control-label" for="field_{{field}}">
                     {{field}}
                 </label>
             </div>
diff --git a/frontend/app/features/content/shared/due-time-selector.component.html b/frontend/app/features/content/shared/due-time-selector.component.html
index 4e9c5768a..c23ab328c 100644
--- a/frontend/app/features/content/shared/due-time-selector.component.html
+++ b/frontend/app/features/content/shared/due-time-selector.component.html
@@ -5,16 +5,16 @@
         </ng-container>
     
         <ng-container content>
-            <div class="form-check">
-                <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Immediately" id="immediately" name="dueTimeMode">
-                <label class="form-check-label" for="immediately">
+            <div class="custom-control custom-radio">
+                <input class="custom-control-input" type="radio" [(ngModel)]="dueTimeMode" value="Immediately" id="immediately" name="dueTimeMode">
+                <label class="custom-control-label" for="immediately">
                     {{ 'contents.changeStatusToImmediately' | sqxTranslate: { action: dueTimeAction } }}
                 </label>
             </div>
     
-            <div class="form-check">
-                <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Scheduled" id="scheduled" name="dueTimeMode">
-                <label class="form-check-label" for="scheduled">
+            <div class="custom-control custom-radio">
+                <input class="custom-control-input" type="radio" [(ngModel)]="dueTimeMode" value="Scheduled" id="scheduled" name="dueTimeMode">
+                <label class="custom-control-label" for="scheduled">
                     {{ 'contents.changeStatusToLater' | sqxTranslate: { action: dueTimeAction } }}
                 </label>
             </div>
@@ -23,8 +23,13 @@
         </ng-container>
     
         <ng-container footer>
-            <button type="button" class="btn btn-secondary" (click)="cancelStatusChange()">{{ 'common.cancel' | sqxTranslate }}</button>
-            <button type="button" class="btn btn-primary" [disabled]="dueTimeMode === 'Scheduled' && !dueTime" (click)="confirmStatusChange()" sqxFocusOnInit>{{ 'common.confirm' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-text-secondary2" (click)="cancelStatusChange()">
+                {{ 'common.cancel' | sqxTranslate }}
+            </button>
+    
+            <button type="button" class="btn btn-primary" [disabled]="dueTimeMode === 'Scheduled' && !dueTime" (click)="confirmStatusChange()" sqxFocusOnInit>
+                {{ 'common.confirm' | sqxTranslate }}
+            </button>
         </ng-container>
     </sqx-modal-dialog>
 </ng-container>
diff --git a/frontend/app/features/content/shared/forms/field-editor.component.html b/frontend/app/features/content/shared/forms/field-editor.component.html
index 1f7f29adc..f95385d07 100644
--- a/frontend/app/features/content/shared/forms/field-editor.component.html
+++ b/frontend/app/features/content/shared/forms/field-editor.component.html
@@ -36,7 +36,10 @@
                             <sqx-toggle [formControl]="editorControl" [threeStates]="!field.properties.isRequired"></sqx-toggle>
                         </ng-container>
                         <ng-container *ngSwitchCase="'Checkbox'">
-                            <input type="checkbox" [formControl]="editorControl" class="form-check" sqxIndeterminateValue />
+                            <div class="custom-control custom-checkbox">
+                                <input class="custom-control-input" type="checkbox" [formControl]="editorControl" id="{{uniqueId}}" sqxIndeterminateValue>
+                                <label class="custom-control-label" for="{{uniqueId}}"></label>
+                            </div>
                         </ng-container>
                     </ng-container>
                 </ng-container>
@@ -52,21 +55,21 @@
 				<ng-container *ngSwitchCase="'Number'">
 					<ng-container [ngSwitch]="field.rawProperties.editor">
 						<ng-container *ngSwitchCase="'Input'">
-							<input class="form-control" type="number" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" />
+							<input class="form-control" type="number" [formControl]="editorControl" [placeholder]="field.displayPlaceholder">
 						</ng-container>
 						<ng-container *ngSwitchCase="'Stars'">
 							<sqx-stars [formControl]="editorControl" [maximumStars]="field.rawProperties.maxValue"></sqx-stars>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Dropdown'">
-							<select class="form-control" [formControl]="editorControl">
+							<select class="custom-select" [formControl]="editorControl">
 								<option [ngValue]="null"></option>
 								<option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
 							</select>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Radio'">
-							<div class="form-check form-check-inline" *ngFor="let value of field.rawProperties.allowedValues">
-								<input class="form-check-input" type="radio" [value]="value" [formControl]="editorControl" [name]="uniqueId" />
-								<label class="form-check-label">
+							<div class="custom-control custom-radio custom-control-inline" *ngFor="let value of field.rawProperties.allowedValues">
+								<input class="custom-control-input" type="radio" [value]="value" [formControl]="editorControl" [name]="uniqueId" id="{{uniqueId}}_{{value}}">
+								<label class="custom-control-label" for="{{uniqueId}}_{{value}}">
 									{{value}}
 								</label>
 							</div>
@@ -110,10 +113,10 @@
 				<ng-container *ngSwitchCase="'String'">
 					<ng-container [ngSwitch]="field.rawProperties.editor">
 						<ng-container *ngSwitchCase="'Input'">
-							<input class="form-control" type="text" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" />
+							<input class="form-control" type="text" [formControl]="editorControl" [placeholder]="field.displayPlaceholder">
 						</ng-container>
 						<ng-container *ngSwitchCase="'Slug'">
-							<input class="form-control" type="text" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify" />
+							<input class="form-control" type="text" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify">
 						</ng-container>
 						<ng-container *ngSwitchCase="'TextArea'">
 							<textarea class="form-control" [formControl]="editorControl" rows="5" [placeholder]="field.displayPlaceholder"></textarea>
@@ -131,15 +134,15 @@
 							<sqx-stock-photo-editor [formControl]="editorControl"></sqx-stock-photo-editor>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Dropdown'">
-							<select class="form-control" [formControl]="editorControl">
+							<select class="custom-select" [formControl]="editorControl">
 								<option [ngValue]="null"></option>
 								<option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
 							</select>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Radio'">
-							<div class="form-check form-check-inline" *ngFor="let value of field.rawProperties.allowedValues">
-								<input class="form-check-input" type="radio" value="{{value}}" [formControl]="editorControl" [name]="uniqueId" />
-								<label class="form-check-label">
+							<div class="custom-control custom-radio custom-control-inline" *ngFor="let value of field.rawProperties.allowedValues">
+								<input class="custom-control-input" type="radio" [value]="value" [formControl]="editorControl" [name]="uniqueId" id="{{uniqueId}}_{{value}}">
+								<label class="custom-control-label" for="{{uniqueId}}_{{value}}">
 									{{value}}
 								</label>
 							</div>
@@ -158,7 +161,7 @@
                             <sqx-checkbox-group [formControl]="editorControl" [values]="field.rawProperties.allowedValues"></sqx-checkbox-group>
                         </ng-container>
                         <ng-container *ngSwitchCase="'Dropdown'">
-                            <select multiple class="form-control" [formControl]="editorControl">
+                            <select multiple class="custom-select" [formControl]="editorControl">
                                 <option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
                             </select>
                         </ng-container>
diff --git a/frontend/app/features/content/shared/list/content-value-editor.component.html b/frontend/app/features/content/shared/list/content-value-editor.component.html
index 63b77943a..4120d52ea 100644
--- a/frontend/app/features/content/shared/list/content-value-editor.component.html
+++ b/frontend/app/features/content/shared/list/content-value-editor.component.html
@@ -3,13 +3,13 @@
         <ng-container *ngSwitchCase="'Number'">
             <ng-container [ngSwitch]="field.rawProperties.editor">
                 <ng-container *ngSwitchCase="'Input'">
-                    <input class="form-control" type="number" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
+                    <input class="form-control" type="number" [formControlName]="field.name" [placeholder]="field.displayPlaceholder">
                 </ng-container>
                 <ng-container *ngSwitchCase="'Stars'">
                     <sqx-stars [formControlName]="field.name" [maximumStars]="field.rawProperties.maxValue"></sqx-stars>
                 </ng-container>
                 <ng-container *ngSwitchCase="'Dropdown'">
-                    <select class="form-control" [formControlName]="field.name">
+                    <select class="custom-select" [formControlName]="field.name">
                         <option [ngValue]="null"></option>
                         <option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
                     </select>
@@ -19,13 +19,13 @@
         <ng-container *ngSwitchCase="'String'">
             <ng-container [ngSwitch]="field.rawProperties.editor">
                 <ng-container *ngSwitchCase="'Input'">
-                    <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
+                    <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder">
                 </ng-container>
                 <ng-container *ngSwitchCase="'Slug'">
-                    <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify" />
+                    <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify">
                 </ng-container>
                 <ng-container *ngSwitchCase="'Dropdown'">
-                    <select class="form-control" [formControlName]="field.name">
+                    <select class="custom-select" [formControlName]="field.name">
                         <option [ngValue]="null"></option>
                         <option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
                     </select>
@@ -38,8 +38,9 @@
                     <sqx-toggle [formControlName]="field.name" [threeStates]="!field.properties.isRequired"></sqx-toggle>
                 </ng-container>
                 <ng-container *ngSwitchCase="'Checkbox'">
-                    <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" [formControlName]="field.name" sqxIndeterminateValue />
+                    <div class="custom-control custom-checkbox">
+                        <input class="custom-control-input" type="checkbox" [formControlName]="field.name" id="{{uniqueId}}" sqxIndeterminateValue>
+                        <label class="custom-control-label" for="{{uniqueId}}"></label>
                     </div>
                 </ng-container>
             </ng-container>
diff --git a/frontend/app/features/content/shared/list/content-value-editor.component.ts b/frontend/app/features/content/shared/list/content-value-editor.component.ts
index 725ec897b..566df9c9f 100644
--- a/frontend/app/features/content/shared/list/content-value-editor.component.ts
+++ b/frontend/app/features/content/shared/list/content-value-editor.component.ts
@@ -7,7 +7,7 @@
 
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { FieldDto } from '@app/shared';
+import { FieldDto, MathHelper } from '@app/shared';
 
 @Component({
     selector: 'sqx-content-value-editor',
@@ -21,4 +21,6 @@ export class ContentValueEditorComponent {
 
     @Input()
     public form: FormGroup;
+
+    public uniqueId = MathHelper.guid();
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/list/content.component.html b/frontend/app/features/content/shared/list/content.component.html
index 816bb890b..e8fab4253 100644
--- a/frontend/app/features/content/shared/list/content.component.html
+++ b/frontend/app/features/content/shared/list/content.component.html
@@ -1,6 +1,12 @@
 <tr [sqxTabRouterLink]="link">
     <td class="cell-select inline-edit" sqxStopClick>
-        <input type="checkbox" class="form-check" [ngModel]="selected" (ngModelChange)="selectedChange.emit($event)">
+        <div class="custom-control custom-checkbox">
+            <input class="custom-control-input" type="checkbox" id="{{content.id}}_selected" 
+                [ngModel]="selected"
+                (ngModelChange)="selectedChange.emit($event)" />
+
+            <label class="custom-control-label" for="{{content.id}}_selected" ></label>
+        </div>
 
         <ng-container *ngIf="isDirty">
             <div class="edit-menu">
diff --git a/frontend/app/features/content/shared/references/content-creator.component.html b/frontend/app/features/content/shared/references/content-creator.component.html
index 077d2e344..764b885c8 100644
--- a/frontend/app/features/content/shared/references/content-creator.component.html
+++ b/frontend/app/features/content/shared/references/content-creator.component.html
@@ -2,7 +2,7 @@
     <ng-container title>
         <div class="row">
             <div class="col-selector">
-                <select class="form-control form-control-dark" [ngModel]="schema?.id" (ngModelChange)="selectSchema($event)">
+                <select class="custom-select form-control-dark" [ngModel]="schema?.id" (ngModelChange)="selectSchema($event)">
                     <option *ngFor="let schema of schemas" [ngValue]="schema.id">
                         {{ 'contents.referencesSelectSchema' | sqxTranslate: { schema: schema.displayName } }}
                     </option>
diff --git a/frontend/app/features/content/shared/references/content-selector-item.component.html b/frontend/app/features/content/shared/references/content-selector-item.component.html
index 6ae743121..47d34cc93 100644
--- a/frontend/app/features/content/shared/references/content-selector-item.component.html
+++ b/frontend/app/features/content/shared/references/content-selector-item.component.html
@@ -1,6 +1,6 @@
 <tr (click)="toggle()">
     <td class="cell-select" sqxStopClick>
-        <input type="checkbox" class="form-check"
+        <input type="checkbox" class="custom-control custom-checkbox"
             [disabled]="!selectable"
             [ngModel]="selected || !selectable"
             (ngModelChange)="select($event)"
diff --git a/frontend/app/features/content/shared/references/content-selector.component.html b/frontend/app/features/content/shared/references/content-selector.component.html
index 2e4b70634..594fe0851 100644
--- a/frontend/app/features/content/shared/references/content-selector.component.html
+++ b/frontend/app/features/content/shared/references/content-selector.component.html
@@ -2,7 +2,7 @@
     <ng-container title>
         <div class="row">
             <div class="col-selector">
-                <select class="form-control form-control-dark" [ngModel]="schema?.id" (ngModelChange)="selectSchema($event)">
+                <select class="custom-select form-control-dark" [ngModel]="schema?.id" (ngModelChange)="selectSchema($event)">
                     <option *ngFor="let schema of schemas" [ngValue]="schema.id">
                         {{ 'contents.referencesSelectSchema' | sqxTranslate: { schema: schema.displayName } }}
                     </option>
@@ -44,7 +44,7 @@
                         <thead>
                             <tr>
                                 <th class="cell-select">
-                                    <input type="checkbox" class="form-check" [ngModel]="selectedAll" (ngModelChange)="selectAll($event)">
+                                    <input type="checkbox" class="custom-control custom-checkbox" [ngModel]="selectedAll" (ngModelChange)="selectAll($event)">
                                 </th>
                                 <th sqxContentListCell="meta.lastModifiedBy.avatar">
                                     <sqx-content-list-header field="meta.lastModifiedBy.avatar"></sqx-content-list-header>
@@ -85,7 +85,7 @@
     </ng-container>
 
     <ng-container footer>
-        <button type="button" class="btn btn-secondary" (click)="emitComplete()">
+        <button type="button" class="btn text-secondary2" (click)="emitComplete()">
             {{ 'common.cancel' | sqxTranslate }}
         </button>
 
diff --git a/frontend/app/features/dashboard/pages/cards/api-performance-card.component.html b/frontend/app/features/dashboard/pages/cards/api-performance-card.component.html
index 41f2c793e..2c83c485c 100644
--- a/frontend/app/features/dashboard/pages/cards/api-performance-card.component.html
+++ b/frontend/app/features/dashboard/pages/cards/api-performance-card.component.html
@@ -3,10 +3,10 @@
         {{ 'dashboard.apiPerformanceCard' | sqxTranslate: { summary: chartSummary } }}
 
         <div class="float-right">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="stacked" [ngModel]="isStacked" (ngModelChange)="isStackedChange.emit($event)">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="stacked" [ngModel]="isStacked" (ngModelChange)="isStackedChange.emit($event)">
 
-                <label class="form-check-label" for="stacked">
+                <label class="custom-control-label" for="stacked">
                     {{ 'dashboard.stackedChart' | sqxTranslate }}
                 </label>
             </div>
diff --git a/frontend/app/features/dashboard/pages/cards/api-traffic-card.component.html b/frontend/app/features/dashboard/pages/cards/api-traffic-card.component.html
index 6754982ad..eaa04280b 100644
--- a/frontend/app/features/dashboard/pages/cards/api-traffic-card.component.html
+++ b/frontend/app/features/dashboard/pages/cards/api-traffic-card.component.html
@@ -3,10 +3,10 @@
         {{ 'dashboard.trafficHeader' | sqxTranslate }}: {{chartSummary | sqxFileSize}}
 
         <div class="float-right">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="stacked" [ngModel]="isStacked" (ngModelChange)="isStackedChange.emit($event)">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="stacked" [ngModel]="isStacked" (ngModelChange)="isStackedChange.emit($event)">
 
-                <label class="form-check-label" for="stacked">
+                <label class="custom-control-label" for="stacked">
                     {{ 'dashboard.stackedChart' | sqxTranslate }}
                 </label>
             </div>
diff --git a/frontend/app/features/dashboard/pages/dashboard-config.component.html b/frontend/app/features/dashboard/pages/dashboard-config.component.html
index d3784d209..916b34518 100644
--- a/frontend/app/features/dashboard/pages/dashboard-config.component.html
+++ b/frontend/app/features/dashboard/pages/dashboard-config.component.html
@@ -6,10 +6,10 @@
     <ng-container *sqxModal="dropdownModal">
         <div class="dropdown-menu" [sqxAnchoredTo]="buttonSettings" @fade position="bottom-right">
             <div class="dropdown-item" *ngFor="let item of configDefaults">
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="field_{{item.type}}" [ngModel]="isSelected(item)" (ngModelChange)="addOrRemove(item)">
+                <div class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox" id="field_{{item.type}}" [ngModel]="isSelected(item)" (ngModelChange)="addOrRemove(item)">
     
-                    <label class="form-check-label" for="field_{{item.type}}">
+                    <label class="custom-control-label" for="field_{{item.type}}">
                         {{item.name | sqxTranslate}}
                     </label>
                 </div>
@@ -47,9 +47,13 @@
             </ng-container>
     
             <ng-container footer>
-                <button type="button" class="btn btn-secondary" (click)="expertDialog.hide()">{{ 'common.cancel' | sqxTranslate }}</button>
+                <button type="button" class="btn btn-text-secondary2" (click)="expertDialog.hide()">
+                    {{ 'common.cancel' | sqxTranslate }}
+                </button>
 
-                <button type="button" class="btn btn-primary" (click)="completeExpertMode()">{{ 'common.update' | sqxTranslate }}</button>
+                <button type="button" class="btn btn-primary" (click)="completeExpertMode()">
+                    {{ 'common.update' | sqxTranslate }}
+                </button>
             </ng-container>
         </sqx-modal-dialog>
     </ng-container>
diff --git a/frontend/app/features/rules/pages/rules/actions/generic-action.component.html b/frontend/app/features/rules/pages/rules/actions/generic-action.component.html
index a3fca239d..bf34b98c8 100644
--- a/frontend/app/features/rules/pages/rules/actions/generic-action.component.html
+++ b/frontend/app/features/rules/pages/rules/actions/generic-action.component.html
@@ -12,15 +12,15 @@
                     <textarea class="form-control" id="{{property.name}}" [formControlName]="property.name"></textarea>
                 </ng-container>
                 <ng-container *ngSwitchCase="'Checkbox'">
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" id="{{property.name}}" [formControlName]="property.name" />
-                        <label class="form-check-label" for="{{property.name}}">
+                    <div class="custom-control custom-checkbox">
+                        <input class="custom-control-input" type="checkbox" id="{{property.name}}" [formControlName]="property.name">
+                        <label class="custom-control-label" for="{{property.name}}">
                             {{property.display}}
                         </label>
                     </div>
                 </ng-container>
                 <ng-container *ngSwitchDefault>
-                    <input type="{{property.editor | lowercase}}" class="form-control" id="{{property.name}}" [formControlName]="property.name" />
+                    <input type="{{property.editor | lowercase}}" class="form-control" id="{{property.name}}" [formControlName]="property.name">
                 </ng-container>
             </ng-container>
 
diff --git a/frontend/app/features/rules/pages/rules/rule-wizard.component.html b/frontend/app/features/rules/pages/rules/rule-wizard.component.html
index a268bfe4d..523dc3991 100644
--- a/frontend/app/features/rules/pages/rules/rule-wizard.component.html
+++ b/frontend/app/features/rules/pages/rules/rule-wizard.component.html
@@ -106,14 +106,23 @@
 
     <ng-container footer>
         <ng-container *ngIf="step === 2 || step === 4">
-            <button type="button" class="btn btn-secondary" (click)="emitComplete()">{{ 'common.cancel' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-text-secondary2" (click)="emitComplete()">
+                {{ 'common.cancel' | sqxTranslate }}
+            </button>
         </ng-container>
 
         <ng-container *ngIf="isEditable">
-            <button *ngIf="step === 2 &&  isWizard" type="submit" class="btn btn-primary" (click)="saveTrigger()">{{ 'common.continue' | sqxTranslate }}</button>
-            <button *ngIf="step === 2 && !isWizard" type="submit" class="btn btn-primary" (click)="saveTrigger()">{{ 'common.save' | sqxTranslate }}</button>
+            <button *ngIf="step === 2 &&  isWizard" type="submit" class="btn btn-primary" (click)="saveTrigger()">
+                {{ 'common.continue' | sqxTranslate }}
+            </button>
 
-            <button *ngIf="step === 4" type="submit" class="btn btn-primary" (click)="saveAction()">{{ 'common.save' | sqxTranslate }}</button>
+            <button *ngIf="step === 2 && !isWizard" type="submit" class="btn btn-primary" (click)="saveTrigger()">
+                {{ 'common.save' | sqxTranslate }}
+            </button>
+
+            <button *ngIf="step === 4" type="submit" class="btn btn-primary" (click)="saveAction()">
+                {{ 'common.save' | sqxTranslate }}
+            </button>
         </ng-container>
     </ng-container>
 </sqx-modal-dialog>
\ No newline at end of file
diff --git a/frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.html b/frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.html
index da925bae6..23e30f4c8 100644
--- a/frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.html
+++ b/frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.html
@@ -38,7 +38,7 @@
     <div class="section" *ngIf="schemasToAdd.length > 0">
         <form class="form-inline" (ngSubmit)="addSchema()">
             <div class="form-group mr-1">
-                <select class="form-control schemas-control" [disabled]="triggerForm.disabled" [(ngModel)]="schemaToAdd" name="schema">
+                <select class="custom-select schemas-control" [disabled]="triggerForm.disabled" [(ngModel)]="schemaToAdd" name="schema">
                     <option *ngFor="let schema of schemasToAdd; trackBy: trackBySchema" [ngValue]="schema">{{schema.displayName}}</option>
                 </select>
             </div>
@@ -74,9 +74,9 @@
 </ng-container>
 
 <div class="form-group" [formGroup]="triggerForm">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="handleAll" formControlName="handleAll" />
-        <label class="form-check-label" for="handleAll">
+    <div class="custom-control custom-checkbox">
+        <input class="custom-control-input" type="checkbox" id="handleAll" formControlName="handleAll">
+        <label class="custom-control-label" for="handleAll">
             Trigger on all content events
         </label>
     </div>
diff --git a/frontend/app/features/rules/pages/rules/triggers/usage-trigger.component.html b/frontend/app/features/rules/pages/rules/triggers/usage-trigger.component.html
index e27b580de..9e9ebe24c 100644
--- a/frontend/app/features/rules/pages/rules/triggers/usage-trigger.component.html
+++ b/frontend/app/features/rules/pages/rules/triggers/usage-trigger.component.html
@@ -4,7 +4,7 @@
 
         <sqx-control-errors for="limit"></sqx-control-errors>
 
-        <input type="number" step="1" class="form-control" id="limit" formControlName="limit" />
+        <input type="number" step="1" class="form-control" id="limit" formControlName="limit">
         
         <sqx-form-hint>
             The monthly api calls to trigger.
@@ -16,7 +16,7 @@
 
         <sqx-control-errors for="numDays" fieldName="Days"></sqx-control-errors>
 
-        <input type="number" step="1" class="form-control" id="condition" formControlName="numDays" />
+        <input type="number" step="1" class="form-control" id="condition" formControlName="numDays">
         
         <sqx-form-hint>
             The number of days to check or empty to check the current month.
diff --git a/frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.html b/frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.html
index 870ed6444..4f014effe 100644
--- a/frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.html
+++ b/frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.html
@@ -61,7 +61,9 @@
             </div>
         </div>
         <div class="card-footer">
-            <button type="submit" class="float-right btn btn-primary" *ngIf="isEditable">{{ 'common.save' | sqxTranslate }}</button>
+            <button type="submit" class="float-right btn btn-primary" *ngIf="isEditable">
+                {{ 'common.save' | sqxTranslate }}
+            </button>
         </div>
     </div>
 </form>
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/export/schema-export-form.component.html b/frontend/app/features/schemas/pages/schema/export/schema-export-form.component.html
index 53d5388eb..ebb91e9c8 100644
--- a/frontend/app/features/schemas/pages/schema/export/schema-export-form.component.html
+++ b/frontend/app/features/schemas/pages/schema/export/schema-export-form.component.html
@@ -4,23 +4,25 @@
             <div class="col"></div>
             <div class="col-auto">
                 <div class="form-inline">
-                    <div class="form-check pr-4">
-                        <input class="form-check-input" type="checkbox" id="fieldsDelete" formControlName="fieldsDelete">
-                        <label class="form-check-label" for="fieldsDelete">
+                    <div class="custom-control custom-checkbox pr-4">
+                        <input class="custom-control-input" type="checkbox" id="fieldsDelete" formControlName="fieldsDelete">
+                        <label class="custom-control-label" for="fieldsDelete">
                             {{ 'schemas.export.deleteFields' | sqxTranslate }}
                         </label>
                     </div>
     
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" id="fieldsRecreate" formControlName="fieldsRecreate">
-                        <label class="form-check-label" for="fieldsRecreate">
+                    <div class="custom-control custom-checkbox">
+                        <input class="custom-control-input" type="checkbox" id="fieldsRecreate" formControlName="fieldsRecreate">
+                        <label class="custom-control-label" for="fieldsRecreate">
                             {{ 'schemas.export.recreateFields' | sqxTranslate }}
                         </label>
                     </div>
                 </div>
             </div>
             <div class="col-auto">
-                <button type="submit" class="btn btn-primary">{{ 'schemas.export.synchronize' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-primary">
+                    {{ 'schemas.export.synchronize' | sqxTranslate }}
+                </button>
             </div>
         </div>
     </div>
diff --git a/frontend/app/features/schemas/pages/schema/fields/field-wizard.component.html b/frontend/app/features/schemas/pages/schema/fields/field-wizard.component.html
index f99a00322..2142e7441 100644
--- a/frontend/app/features/schemas/pages/schema/fields/field-wizard.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/field-wizard.component.html
@@ -43,9 +43,9 @@
                 </div>
 
                 <div class="form-group" *ngIf="!parent && (addFieldForm.isContentField | async)">
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" id="isLocalizable" formControlName="isLocalizable">
-                        <label class="form-check-label" for="isLocalizable">
+                    <div class="custom-control custom-checkbox">
+                        <input class="custom-control-input" type="checkbox" id="isLocalizable" formControlName="isLocalizable">
+                        <label class="custom-control-label" for="isLocalizable">
                             {{ 'schemas.field.localizable' | sqxTranslate }}
                         </label>
                     </div>
@@ -70,17 +70,32 @@
     </ng-container>
 
     <ng-container footer>
-        <button type="reset" class="float-left btn btn-secondary" (click)="emitComplete()">{{ 'common.cancel' | sqxTranslate }}</button>
+        <button type="reset" class="float-left btn btn-text-secondary2" (click)="emitComplete()">
+            {{ 'common.cancel' | sqxTranslate }}
+        </button>
 
         <div *ngIf="!editing">
-            <button type="button" class="btn btn-outline-success" (click)="addField(false)">{{ 'schemas.addFieldAndClose' | sqxTranslate }}</button>
-            <button type="button" class="btn btn-success ml-1" (click)="addField(true)">{{ 'schemas.addFieldAndCreate' | sqxTranslate }}</button>
-            <button type="button" class="btn btn-success ml-1" (click)="addField(false, true)">{{ 'schemas.addFieldAndEdit' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-outline-success" (click)="addField(false)">
+                {{ 'schemas.addFieldAndClose' | sqxTranslate }}
+            </button>
+
+            <button type="button" class="btn btn-success ml-1" (click)="addField(true)">
+                {{ 'schemas.addFieldAndCreate' | sqxTranslate }}
+            </button>
+
+            <button type="button" class="btn btn-success ml-1" (click)="addField(false, true)">
+                {{ 'schemas.addFieldAndEdit' | sqxTranslate }}
+            </button>
         </div>
 
         <div *ngIf="editing">
-            <button type="button" class="btn btn-success" (click)="save(true)">{{ 'schemas.saveFieldAndNew' | sqxTranslate }}</button>
-            <button type="button" class="btn btn-primary ml-1" (click)="save()">{{ 'schemas.saveFieldAndClose' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-success" (click)="save(true)">
+                {{ 'schemas.saveFieldAndNew' | sqxTranslate }}
+            </button>
+            
+            <button type="button" class="btn btn-primary ml-1" (click)="save()">
+                {{ 'schemas.saveFieldAndClose' | sqxTranslate }}
+            </button>
         </div>
     </ng-container>
 </sqx-modal-dialog>
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.html
index 4647aa76c..f0faa91be 100644
--- a/frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.html
@@ -1,9 +1,9 @@
 <div [formGroup]="fieldForm">
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldRequired">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldRequired">
                     {{ 'schemas.field.required' | sqxTranslate }}
                 </label>
             </div>
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.html b/frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.html
index b7c711eb0..08b9f4536 100644
--- a/frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.html
@@ -12,9 +12,13 @@
     </ul>
 
     <div class="float-right" *ngIf="showButtons">
-        <button [disabled]="field.isLocked" type="reset" class="btn btn-text-secondary2" (click)="cancel.emit()">{{ 'common.cancel' | sqxTranslate }}</button>
+        <button [disabled]="field.isLocked" type="reset" class="btn btn-text-secondary2" (click)="cancel.emit()">
+            {{ 'common.cancel' | sqxTranslate }}
+        </button>
 
-        <button [disabled]="field.isLocked" type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">{{ 'common.save' | sqxTranslate }}</button>
+        <button [disabled]="field.isLocked" type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">
+            {{ 'common.save' | sqxTranslate }}
+        </button>
     </div>
 </div>
 
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.html
index 559426c59..87f84510e 100644
--- a/frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.html
@@ -4,7 +4,7 @@
         <label class="col-3 col-form-label" for="{{field.fieldId}}_previewMode">{{ 'schemas.fieldTypes.assets.previewMode' | sqxTranslate }}</label>
 
         <div class="col-6">
-            <select type="text" class="form-control" id="{{field.fieldId}}_previewMode" formControlName="previewMode">
+            <select class="custom-select" id="{{field.fieldId}}_previewMode" formControlName="previewMode">
                 <option value="ImageAndFileName">{{ 'schemas.fieldTypes.assets.previewImageAndFileName' | sqxTranslate }}</option>
                 <option value="Image">{{ 'schemas.fieldTypes.assets.previewImage' | sqxTranslate }}</option>
                 <option value="FileName">{{ 'schemas.fieldTypes.assets.previewFileName' | sqxTranslate }}</option>
@@ -18,9 +18,9 @@
 
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldResolveFirst" formControlName="resolveFirst">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldResolveFirst">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldResolveFirst" formControlName="resolveFirst">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldResolveFirst">
                     {{ 'schemas.fieldTypes.assets.resolve' | sqxTranslate }}
                 </label>
             </div>
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.html
index 5c11b2e9d..4daa20edb 100644
--- a/frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.html
@@ -30,9 +30,9 @@
 
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldMustBeImage" formControlName="mustBeImage">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldMustBeImage">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldMustBeImage" formControlName="mustBeImage">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldMustBeImage">
                     {{ 'schemas.fieldTypes.assets.mustBeImage' | sqxTranslate }}
                 </label>
             </div>
@@ -89,9 +89,9 @@
 
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldAllowDuplicates" formControlName="allowDuplicates">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldAllowDuplicates">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldAllowDuplicates" formControlName="allowDuplicates">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldAllowDuplicates">
                     {{ 'schemas.fieldTypes.assets.allowDuplicates' | sqxTranslate }}
                 </label>
             </div>
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/boolean-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/boolean-ui.component.html
index dff67f7cd..6ab153481 100644
--- a/frontend/app/features/schemas/pages/schema/fields/types/boolean-ui.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/types/boolean-ui.component.html
@@ -25,9 +25,9 @@
     </div>
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldInlineEditable">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldInlineEditable">
                     {{ 'schemas.field.inlineEditable' | sqxTranslate }}
                 </label>
             </div>
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/boolean-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/boolean-validation.component.html
index 1cda9db43..dc554a3eb 100644
--- a/frontend/app/features/schemas/pages/schema/fields/types/boolean-validation.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/types/boolean-validation.component.html
@@ -1,9 +1,9 @@
 <div [formGroup]="fieldForm">
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldDefaultValue" formControlName="defaultValue" sqxIndeterminateValue />
-                <label class="form-check-label" for="{{field.fieldId}}_fieldDefaultValue">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldDefaultValue" formControlName="defaultValue" sqxIndeterminateValue>
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldDefaultValue">
                     {{ 'schemas.field.defaultValue' | sqxTranslate }}
                 </label>
             </div>
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/date-time-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/date-time-validation.component.html
index 335d57007..f25e74224 100644
--- a/frontend/app/features/schemas/pages/schema/fields/types/date-time-validation.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/types/date-time-validation.component.html
@@ -20,7 +20,7 @@
             <label class="col-3 col-form-label">{{ 'schemas.fieldTypes.dateTime.defaultMode' | sqxTranslate }}</label>
 
             <div class="col-3">
-                <select class="form-control" formControlName="calculatedDefaultValue">
+                <select class="custom-select" formControlName="calculatedDefaultValue">
                     <option></option>
                     <option *ngFor="let value of calculatedDefaultValues" [ngValue]="value">{{value}}</option>
                 </select>
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/number-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/number-ui.component.html
index f0457d130..a80b8b1a3 100644
--- a/frontend/app/features/schemas/pages/schema/fields/types/number-ui.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/types/number-ui.component.html
@@ -32,9 +32,9 @@
     </div>
     <div class="form-group row" [class.hidden]="hideInlineEditable | async">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldInlineEditable">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldInlineEditable">
                     {{ 'schemas.field.inlineEditable' | sqxTranslate }}
                 </label>
             </div>
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.html
index b8f0ebcb3..0a19a5337 100644
--- a/frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.html
@@ -1,9 +1,9 @@
 <div [formGroup]="fieldForm">
     <div class="form-group row" *ngIf="showUnique">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldUnique" formControlName="isUnique"> 
-                <label class="form-check-label" for="{{field.fieldId}}_fieldUnique">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldUnique" formControlName="isUnique"> 
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldUnique">
                     {{ 'schemas.field.unique' | sqxTranslate }}
                 </label>
             </div>
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/references-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/references-ui.component.html
index 4ceaa3a2a..df28d904a 100644
--- a/frontend/app/features/schemas/pages/schema/fields/types/references-ui.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/types/references-ui.component.html
@@ -15,9 +15,9 @@
 
     <div class="form-group row" *ngIf="field.properties.isContentField">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldResolveReferences" formControlName="resolveReference">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldResolveReferences">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldResolveReferences" formControlName="resolveReference">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldResolveReferences">
                     Resolve reference
                 </label>
             </div>
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.html
index a58516efd..d63e0be54 100644
--- a/frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.html
@@ -10,9 +10,9 @@
 
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldAllowDuplicates" formControlName="allowDuplicates">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldAllowDuplicates">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldAllowDuplicates" formControlName="allowDuplicates">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldAllowDuplicates">
                     {{ 'schemas.fieldTypes.assets.allowDuplicates' | sqxTranslate }}
                 </label>
             </div>
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/string-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/string-ui.component.html
index 6c44c3c32..f8501110d 100644
--- a/frontend/app/features/schemas/pages/schema/fields/types/string-ui.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/types/string-ui.component.html
@@ -95,9 +95,9 @@
     </div>
     <div class="form-group row" [class.hidden]="hideInlineEditable | async">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldInlineEditable">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldInlineEditable">
                     {{ 'schemas.field.inlineEditable' | sqxTranslate }}
                 </label>
             </div>
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.html
index 49ca2704a..6148d896b 100644
--- a/frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.html
@@ -1,9 +1,9 @@
 <div [formGroup]="fieldForm">
     <div class="form-group row" *ngIf="showUnique">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldUnique" formControlName="isUnique"> 
-                <label class="form-check-label" for="{{field.fieldId}}_fieldUnique">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldUnique" formControlName="isUnique"> 
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldUnique">
                     {{ 'schemas.field.unique' | sqxTranslate }}
                 </label>
             </div>
@@ -66,7 +66,7 @@
         <label class="col-3 col-form-label">{{ 'schemas.fieldTypes.string.contentType' | sqxTranslate }}</label>
 
         <div class="col-6">
-            <select class="form-control" formControlName="contentType">
+            <select class="custom-select" formControlName="contentType">
                 <option *ngFor="let contentType of contentTypes" [ngValue]="contentType">{{contentType}}</option>
             </select>
         </div>
diff --git a/frontend/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.html b/frontend/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.html
index 8b832f51f..78991ee09 100644
--- a/frontend/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.html
+++ b/frontend/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.html
@@ -54,7 +54,9 @@
             </div>
         </div>
         <div class="card-footer" *ngIf="isEditable">
-            <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">{{ 'common.save' | sqxTranslate }}</button>
+            <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">
+                {{ 'common.save' | sqxTranslate }}
+            </button>
         </div>
     </div>
 </form>
diff --git a/frontend/app/features/schemas/pages/schema/rules/schema-field-rules-form.component.html b/frontend/app/features/schemas/pages/schema/rules/schema-field-rules-form.component.html
index 14434ba82..cfceeb172 100644
--- a/frontend/app/features/schemas/pages/schema/rules/schema-field-rules-form.component.html
+++ b/frontend/app/features/schemas/pages/schema/rules/schema-field-rules-form.component.html
@@ -12,7 +12,7 @@
                     <div class="col col-action pr-1">
                         <sqx-control-errors for="action"></sqx-control-errors>
 
-                        <select class="form-control" formControlName="action">
+                        <select class="custom-select" formControlName="action">
                             <option *ngFor="let fieldAction of fieldActions" [ngValue]="fieldAction">{{fieldAction}}</option>
                         </select>
                     </div>
@@ -20,7 +20,7 @@
                     <div class="col-3 pr-1">
                         <sqx-control-errors for="field"></sqx-control-errors>
 
-                        <select class="form-control" formControlName="field">
+                        <select class="custom-select" formControlName="field">
                             <option *ngFor="let field of fieldNames" [ngValue]="field">{{field}}</option>
                         </select>
                     </div>
@@ -72,7 +72,9 @@
             </div>
         </div>
         <div class="card-footer" *ngIf="isEditable">
-            <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">{{ 'common.save' | sqxTranslate }}</button>
+            <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">
+                {{ 'common.save' | sqxTranslate }}
+            </button>
         </div>
     </div>
 </form>
diff --git a/frontend/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.html b/frontend/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.html
index 4cd426794..49bd6f304 100644
--- a/frontend/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.html
+++ b/frontend/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.html
@@ -6,7 +6,9 @@
             </li>
         </ul>
         
-        <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">{{ 'common.save' | sqxTranslate }}</button>
+        <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">
+            {{ 'common.save' | sqxTranslate }}
+        </button>
     </div>
 
     <div class="inner-main">
diff --git a/frontend/app/features/schemas/pages/schema/ui/schema-ui-form.component.html b/frontend/app/features/schemas/pages/schema/ui/schema-ui-form.component.html
index c07fb9963..a57c26500 100644
--- a/frontend/app/features/schemas/pages/schema/ui/schema-ui-form.component.html
+++ b/frontend/app/features/schemas/pages/schema/ui/schema-ui-form.component.html
@@ -6,7 +6,9 @@
             </li>
         </ul>
 
-        <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">{{ 'common.save' | sqxTranslate }}</button>
+        <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">
+            {{ 'common.save' | sqxTranslate }}
+        </button>
     </div>
 
     <div class="inner-main">
diff --git a/frontend/app/features/schemas/pages/schemas/schema-form.component.html b/frontend/app/features/schemas/pages/schemas/schema-form.component.html
index a1ffebd16..2fe8b4e35 100644
--- a/frontend/app/features/schemas/pages/schemas/schema-form.component.html
+++ b/frontend/app/features/schemas/pages/schemas/schema-form.component.html
@@ -82,9 +82,13 @@
         </ng-container>
 
         <ng-container footer>
-            <button type="button" class="btn btn-secondary" (click)="cancel.emit()">{{ 'common.cancel' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-text-secondary2" (click)="cancel.emit()">
+                {{ 'common.cancel' | sqxTranslate }}
+            </button>
 
-            <button type="submit" class="btn btn-success">{{ 'common.create' | sqxTranslate }}</button>
+            <button type="submit" class="btn btn-success">
+                {{ 'common.create' | sqxTranslate }}
+            </button>
         </ng-container>
     </sqx-modal-dialog>
 </form>
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/clients/client-add-form.component.html b/frontend/app/features/settings/pages/clients/client-add-form.component.html
index f2a6ec231..c06c02e6d 100644
--- a/frontend/app/features/settings/pages/clients/client-add-form.component.html
+++ b/frontend/app/features/settings/pages/clients/client-add-form.component.html
@@ -7,10 +7,14 @@
                 <input type="text" class="form-control" formControlName="id" maxlength="40" placeholder="{{ 'clients.clientNamePlaceholder' | sqxTranslate }}" autocomplete="off" sqxTransformInput="LowerCase">
             </div>
             <div class="col-auto pl-1">
-                <button type="submit" class="btn btn-success" [disabled]="addClientForm.hasNoId | async">{{ 'clients.add' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-success" [disabled]="addClientForm.hasNoId | async">
+                    {{ 'clients.add' | sqxTranslate }}
+                </button>
             </div>
             <div class="col-auto pl-1">
-                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">{{ 'common.cancel' | sqxTranslate }}</button>
+                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">
+                    {{ 'common.cancel' | sqxTranslate }}
+                </button>
             </div>
         </div>
     </form>
diff --git a/frontend/app/features/settings/pages/clients/client-connect-form.component.html b/frontend/app/features/settings/pages/clients/client-connect-form.component.html
index 36173a4bc..f47ab8b16 100644
--- a/frontend/app/features/settings/pages/clients/client-connect-form.component.html
+++ b/frontend/app/features/settings/pages/clients/client-connect-form.component.html
@@ -157,6 +157,8 @@
     </ng-container>
 
     <ng-container footer>
-        <button class="btn btn-secondary" [disabled]="isStart" (click)="go('Start')">{{ 'common.back' | sqxTranslate }}</button>
+        <button class="btn btn-text-secondary2" [disabled]="isStart" (click)="go('Start')">
+            {{ 'common.back' | sqxTranslate }}
+        </button>
     </ng-container>
 </sqx-modal-dialog>
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/clients/client.component.html b/frontend/app/features/settings/pages/clients/client.component.html
index 1c7a8c04c..e657c70a4 100644
--- a/frontend/app/features/settings/pages/clients/client.component.html
+++ b/frontend/app/features/settings/pages/clients/client.component.html
@@ -6,7 +6,9 @@
                 </sqx-editable-title>
             </div>
             <div class="col-auto">
-                <button type="button" class="btn btn-primary" (click)="connectDialog.show()">{{ 'clients.connect' | sqxTranslate }}</button>
+                <button type="button" class="btn btn-primary" (click)="connectDialog.show()">
+                    {{ 'clients.connect' | sqxTranslate }}
+                </button>
             </div>
             <div class="col-auto cell-actions no-padding">
                 <button type="button" class="btn btn-text-danger" [disabled]="!client.canRevoke"
@@ -52,7 +54,7 @@
                     {{ 'common.role' | sqxTranslate }}
                 </label>
                 <div class="col cell-input">
-                    <select class="form-control" [disabled]="!client.canUpdate" [ngModel]="client.role" (ngModelChange)="updateRole($event)">
+                    <select class="custom-select" [disabled]="!client.canUpdate" [ngModel]="client.role" (ngModelChange)="updateRole($event)">
                         <option *ngFor="let role of clientRoles; trackBy: trackByRole" [ngValue]="role.name">{{role.name}}</option>
                     </select>
                 </div>
@@ -60,10 +62,10 @@
             </div>
             <div class="form-group row">
                 <div class="col cell-input offset-3">
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" id="{{client.id}}_allowAnonymous" [disabled]="!client.canUpdate" [ngModel]="client.allowAnonymous" (ngModelChange)="updateAllowAnonymous($event)">
+                    <div class="custom-control custom-checkbox">
+                        <input class="custom-control-input" type="checkbox" id="{{client.id}}_allowAnonymous" [disabled]="!client.canUpdate" [ngModel]="client.allowAnonymous" (ngModelChange)="updateAllowAnonymous($event)">
             
-                        <label class="form-check-label" for="{{client.id}}_allowAnonymous">
+                        <label class="custom-control-label" for="{{client.id}}_allowAnonymous">
                             {{ 'clients.allowAnonymous' | sqxTranslate }}
                         </label>
                     </div>
@@ -79,7 +81,7 @@
                     {{ 'clients.apiCallsLimit' | sqxTranslate }}
                 </label>
                 <div class="col cell-input">
-                    <input type="number" class="form-control" min="0" [disabled]="!client.canUpdate" [(ngModel)]="apiCallsLimit" />
+                    <input type="number" class="form-control" min="0" [disabled]="!client.canUpdate" [(ngModel)]="apiCallsLimit">
 
                     <sqx-form-hint>{{ 'clients.apiCallsLimitHint' | sqxTranslate }}</sqx-form-hint>
                 </div>
diff --git a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.html b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.html
index 5b83dd598..82fcae249 100644
--- a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.html
+++ b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.html
@@ -13,12 +13,14 @@
                 </sqx-autocomplete>
             </div>
             <div class="col-3 pl-1">
-                <select class="form-control" formControlName="role">
+                <select class="custom-select" formControlName="role">
                     <option *ngFor="let role of roles" [ngValue]="role.name">{{role.name}}</option>
                 </select>
             </div>
             <div class="col-auto pl-1">
-                <button type="submit" class="btn btn-success" [disabled]="assignContributorForm.hasNoUser | async">{{ 'contributors.add' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-success" [disabled]="assignContributorForm.hasNoUser | async">
+                    {{ 'contributors.add' | sqxTranslate }}
+                </button>
             </div>
         </div>
     </form>
diff --git a/frontend/app/features/settings/pages/contributors/contributor.component.html b/frontend/app/features/settings/pages/contributors/contributor.component.html
index c26bfde61..4c6639334 100644
--- a/frontend/app/features/settings/pages/contributors/contributor.component.html
+++ b/frontend/app/features/settings/pages/contributors/contributor.component.html
@@ -6,7 +6,7 @@
         <span class="user-name table-cell" [innerHTML]="contributor.contributorName | sqxHighlight:search"></span>
     </td>
     <td class="cell-time">
-        <select class="form-control" [ngModel]="contributor.role" (ngModelChange)="changeRole($event)" [disabled]="!contributor.canUpdate">
+        <select class="custom-select" [ngModel]="contributor.role" (ngModelChange)="changeRole($event)" [disabled]="!contributor.canUpdate">
             <option *ngFor="let role of roles" [ngValue]="role.name">{{role.name}}</option>
         </select>
     </td>
diff --git a/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.html b/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.html
index 0c0dd754b..810a366b7 100644
--- a/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.html
+++ b/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.html
@@ -25,7 +25,7 @@
                         </div>
 
                         <div class="col-5 pl-1">
-                            <select class="form-control" [(ngModel)]="status.role" [ngModelOptions]="standalone">
+                            <select class="custom-select" [(ngModel)]="status.role" [ngModelOptions]="standalone">
                                 <option *ngFor="let role of roles" [ngValue]="role.name">{{role.name}}</option>
                             </select>
                         </div>
@@ -48,15 +48,21 @@
         </ng-container>
 
         <ng-container footer>
-            <button type="button" class="btn btn-secondary" (click)="close.emit()">{{ 'common.cancel' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-text-secondary2" (click)="close.emit()">
+                {{ 'common.cancel' | sqxTranslate }}
+            </button>
 
             <ng-container [ngSwitch]="importStage">
                 <ng-container *ngSwitchCase="'Start'">
-                    <button type="submit" class="btn btn-success" [disabled]="importForm.hasNoUser | async">{{ 'contributors.import.run' | sqxTranslate }}</button>
+                    <button type="submit" class="btn btn-success" [disabled]="importForm.hasNoUser | async">
+                        {{ 'contributors.import.run' | sqxTranslate }}
+                    </button>
                 </ng-container>
 
                 <ng-container *ngSwitchCase="'Change'">
-                    <button type="button" class="btn btn-success" [disabled]="importStatus.length === 0" (click)="import()">{{ 'contributors.import.run2' | sqxTranslate }}</button>
+                    <button type="button" class="btn btn-success" [disabled]="importStatus.length === 0" (click)="import()">
+                        {{ 'contributors.import.run2' | sqxTranslate }}
+                    </button>
                 </ng-container>
             </ng-container>
         </ng-container>
diff --git a/frontend/app/features/settings/pages/languages/language-add-form.component.html b/frontend/app/features/settings/pages/languages/language-add-form.component.html
index 37888e60c..10497f4dc 100644
--- a/frontend/app/features/settings/pages/languages/language-add-form.component.html
+++ b/frontend/app/features/settings/pages/languages/language-add-form.component.html
@@ -2,12 +2,14 @@
     <form [formGroup]="addLanguageForm.form" (ngSubmit)="addLanguage()">
         <div class="row no-gutters">
             <div class="col">
-                <select class="form-control" formControlName="language">
+                <select class="custom-select" formControlName="language">
                     <option *ngFor="let language of newLanguages" [ngValue]="language">{{language.englishName}}</option>
                 </select>
             </div>
             <div class="col-auto pl-1">
-                <button type="submit" class="btn btn-success">{{ 'languages.add' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-success">
+                    {{ 'languages.add' | sqxTranslate }}
+                </button>
             </div>
         </div>
     </form>
diff --git a/frontend/app/features/settings/pages/languages/language.component.html b/frontend/app/features/settings/pages/languages/language.component.html
index d23b6feeb..aa94668d3 100644
--- a/frontend/app/features/settings/pages/languages/language.component.html
+++ b/frontend/app/features/settings/pages/languages/language.component.html
@@ -29,8 +29,13 @@
         <form [formGroup]="editForm.form" (ngSubmit)="save()">
             <div class="table-items-row-details-tabs clearfix">
                 <div class="float-right">
-                    <button type="reset" class="btn btn-text-secondary2" (click)="toggleEditing()">{{ 'common.cancel' | sqxTranslate }}</button>
-                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">{{ 'common.save' | sqxTranslate }}</button>
+                    <button type="reset" class="btn btn-text-secondary2" (click)="toggleEditing()">
+                        {{ 'common.cancel' | sqxTranslate }}
+                    </button>
+                    
+                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">
+                        {{ 'common.save' | sqxTranslate }}
+                    </button>
                 </div>
             </div>
 
@@ -60,12 +65,14 @@
                         <form class="form fallback-form" (ngSubmit)="addFallbackLanguage()" *ngIf="otherLanguage && isEditable">
                             <div class="row no-gutters">
                                 <div class="col">
-                                    <select class="form-control fallback-select" [(ngModel)]="otherLanguage" name="otherLanguage">
+                                    <select class="custom-select fallback-select" [(ngModel)]="otherLanguage" name="otherLanguage">
                                         <option *ngFor="let otherLanguage of fallbackLanguagesNew; trackBy: trackByLanguage" [ngValue]="otherLanguage">{{otherLanguage.englishName}}</option>
                                     </select>
                                 </div>
                                 <div class="col-auto pl-1">
-                                    <button type="submit" class="btn btn-success">{{ 'languages.add' | sqxTranslate }}</button>
+                                    <button type="submit" class="btn btn-success">
+                                        {{ 'languages.add' | sqxTranslate }}
+                                    </button>
                                 </div>
                             </div>
                         </form>
@@ -74,9 +81,9 @@
 
                 <div class="form-group row" *ngIf="!language.isMaster">
                     <div class="col offset-3 col-9">
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="{{language.iso2Code}}_isMaster" formControlName="isMaster">
-                            <label class="form-check-label" for="{{language.iso2Code}}_isMaster">
+                        <div class="custom-control custom-checkbox">
+                            <input class="custom-control-input" type="checkbox" id="{{language.iso2Code}}_isMaster" formControlName="isMaster">
+                            <label class="custom-control-label" for="{{language.iso2Code}}_isMaster">
                                 {{ 'languages.master' | sqxTranslate }}
                             </label>
                         </div>
@@ -89,9 +96,9 @@
 
                 <div class="form-group row" *ngIf="!language.isMaster">
                     <div class="col offset-3 col-9">
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="{{language.iso2Code}}_isOptional" formControlName="isOptional">
-                            <label class="form-check-label" for="{{language.iso2Code}}_isOptional">
+                        <div class="custom-control custom-checkbox">
+                            <input class="custom-control-input" type="checkbox" id="{{language.iso2Code}}_isOptional" formControlName="isOptional">
+                            <label class="custom-control-label" for="{{language.iso2Code}}_isOptional">
                                 {{ 'languages.optional' | sqxTranslate }}
                             </label> 
                         </div>
diff --git a/frontend/app/features/settings/pages/more/more-page.component.html b/frontend/app/features/settings/pages/more/more-page.component.html
index 6210a666b..408f9e91f 100644
--- a/frontend/app/features/settings/pages/more/more-page.component.html
+++ b/frontend/app/features/settings/pages/more/more-page.component.html
@@ -35,7 +35,9 @@
                 </div>
 
                 <div class="card-footer">
-                    <button type="submit" class="float-right btn btn-primary">{{ 'common.save' | sqxTranslate }}</button>
+                    <button type="submit" class="float-right btn btn-primary">
+                        {{ 'common.save' | sqxTranslate }}
+                    </button>
                 </div>
             </div>
         </form>
diff --git a/frontend/app/features/settings/pages/roles/role-add-form.component.html b/frontend/app/features/settings/pages/roles/role-add-form.component.html
index 64d4ba14b..9c39b6064 100644
--- a/frontend/app/features/settings/pages/roles/role-add-form.component.html
+++ b/frontend/app/features/settings/pages/roles/role-add-form.component.html
@@ -7,10 +7,14 @@
                 <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="{{ 'roles.roleNamePlaceholder' | sqxTranslate }}" autocomplete="off">
             </div>
             <div class="col-auto pl-1">
-                <button type="submit" class="btn btn-success" [disabled]="addRoleForm.hasNoName | async">{{ 'roles.add' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-success" [disabled]="addRoleForm.hasNoName | async">
+                    {{ 'roles.add' | sqxTranslate }}
+                </button>
             </div>
             <div class="col-auto pl-1">
-                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">{{ 'common.cancel' | sqxTranslate }}</button>
+                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">
+                    {{ 'common.cancel' | sqxTranslate }}
+                </button>
             </div>
         </div>
     </form>
diff --git a/frontend/app/features/settings/pages/roles/role.component.html b/frontend/app/features/settings/pages/roles/role.component.html
index 6c1a0fb54..06a40c331 100644
--- a/frontend/app/features/settings/pages/roles/role.component.html
+++ b/frontend/app/features/settings/pages/roles/role.component.html
@@ -32,8 +32,13 @@
         <form (ngSubmit)="save()">
             <div class="table-items-row-details-tabs clearfix">
                 <div class="float-right">
-                    <button type="reset" class="btn btn-text-secondary2" (click)="toggleEditing()">{{ 'common.cancel' | sqxTranslate }}</button>
-                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">{{ 'common.save' | sqxTranslate }}</button>
+                    <button type="reset" class="btn btn-text-secondary2" (click)="toggleEditing()">
+                        {{ 'common.cancel' | sqxTranslate }}
+                    </button>
+                    
+                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">
+                        {{ 'common.save' | sqxTranslate }}
+                    </button>
                 </div>
             </div>
 
@@ -45,20 +50,18 @@
                 </sqx-form-hint>
 
                 <ng-container *ngIf="!role.isDefaultRole; else defaultRole">
-                    <table class="table table-bordered table-fixed table-sm">
-                        <tr *ngFor="let control of editForm.controls; let i = index">
-                            <td class="col-name">
-                                <sqx-control-errors [for]="control" [fieldName]="'Permission'"></sqx-control-errors>
-    
-                                <sqx-autocomplete inputStyle="empty" [formControl]="control" [source]="allPermissions"></sqx-autocomplete>
-                            </td>
-                            <td class="col-action" *ngIf="isEditable">
-                                <button type="button" class="btn btn-text-danger" (click)="removePermission(i)">
-                                    <i class="icon-bin2"></i>
-                                </button>
-                            </td>
-                        </tr>
-                    </table>
+                    <div class="row no-gutters mb-1" *ngFor="let control of editForm.controls; let i = index">
+                        <div class="col">
+                            <sqx-control-errors [for]="control" [fieldName]="'Permission'"></sqx-control-errors>
+
+                            <sqx-autocomplete [formControl]="control" [source]="allPermissions"></sqx-autocomplete>
+                        </div>
+                        <div class="col-auto pl-1" *ngIf="isEditable">
+                            <button type="button" class="btn btn-text-danger" (click)="removePermission(i)">
+                                <i class="icon-bin2"></i>
+                            </button>
+                        </div>
+                    </div>
                 </ng-container>
 
                 <ng-template #defaultRole>
@@ -69,7 +72,7 @@
                     <table class="table table-bordered table-fixed table-sm">
                         <tr *ngFor="let control of editForm.controls; let i = index">
                             <td>
-                                <input class="form-control form-control-empty" [formControl]="control" />
+                                {{control.value}}
                             </td>
                         </tr>
                     </table>
@@ -96,13 +99,13 @@
                     </sqx-form-hint>
 
                     <div class="row rule-section">
-                        <div class="form-check col-6" *ngFor="let property of propertiesSimple; trackBy: trackByProperty">
-                            <input class="form-check-input" type="checkbox" id="{{role.name}}_{{property.key}}"
+                        <div class="custom-control custom-checkbox  col-6" *ngFor="let property of propertiesSimple; trackBy: trackByProperty">
+                            <input class="custom-control-input" type="checkbox" id="{{role.name}}_{{property.key}}"
                                 [disabled]="!isEditable"
                                 [ngModel]="getProperty(property.key)"
                                 (ngModelChange)="setProperty(property.key, $event)"
                                 [ngModelOptions]="standalone">
-                            <label class="form-check-label" for="{{role.name}}{{property.key}}">
+                            <label class="custom-control-label" for="{{role.name}}_{{property.key}}">
                                 {{ property.name | sqxTranslate }}
                             </label>
                         </div>
@@ -112,13 +115,13 @@
                         <h5>{{ 'common.schemas' | sqxTranslate }}</h5>
 
                         <div class="row rule-section">
-                            <div class="form-check col-6" *ngFor="let schema of schemas; trackBy: trackBySchema">
-                                <input class="form-check-input" type="checkbox" id="{{role.name}}_schema_{{schema.name}}"
+                            <div class="custom-control custom-checkbox col-6" *ngFor="let schema of schemas; trackBy: trackBySchema">
+                                <input class="custom-control-input" type="checkbox" id="{{role.name}}_schema_{{schema.name}}"
                                     [disabled]="!isEditable"
                                     [ngModel]="getProperty(propertiesList.HIDE_CONTENTS(schema.name))"
                                     (ngModelChange)="setProperty(propertiesList.HIDE_CONTENTS(schema.name), $event)"
                                     [ngModelOptions]="standalone">
-                                <label class="form-check-label truncate" for="{{role.name}}_schema_{{schema.name}}">
+                                <label class="custom-control-label truncate" for="{{role.name}}_schema_{{schema.name}}">
                                     {{ 'roles.properties.hideContents' | sqxTranslate: { schema: schema.displayName } }}
                                 </label>
                             </div>
diff --git a/frontend/app/features/settings/pages/workflows/workflow-add-form.component.html b/frontend/app/features/settings/pages/workflows/workflow-add-form.component.html
index 942e78c41..9fe7c2ee4 100644
--- a/frontend/app/features/settings/pages/workflows/workflow-add-form.component.html
+++ b/frontend/app/features/settings/pages/workflows/workflow-add-form.component.html
@@ -7,10 +7,14 @@
                 <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="{{ 'workflows.workflowNamePlaceholder' | sqxTranslate }}" autocomplete="off">
             </div>
             <div class="col-auto pl-1">
-                <button type="submit" class="btn btn-success" [disabled]="addWorkflowForm.hasNoName | async">{{ 'workflows.add' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-success" [disabled]="addWorkflowForm.hasNoName | async">
+                    {{ 'workflows.add' | sqxTranslate }}
+                </button>
             </div>
             <div class="col-auto pl-1">
-                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">{{ 'common.cancel' | sqxTranslate }}</button>
+                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">
+                    {{ 'common.cancel' | sqxTranslate }}
+                </button>
             </div>
         </div>
     </form>
diff --git a/frontend/app/features/settings/pages/workflows/workflow-step.component.html b/frontend/app/features/settings/pages/workflows/workflow-step.component.html
index 2a7fa36fe..779272ef4 100644
--- a/frontend/app/features/settings/pages/workflows/workflow-step.component.html
+++ b/frontend/app/features/settings/pages/workflows/workflow-step.component.html
@@ -50,10 +50,10 @@
         <div class="row transition-prevent-updates no-gutters">
             <div class="col col-arrow"></div>
             <div class="col col-step">
-                <div class="form-check float-right">
-                    <input class="form-check-input transition-prevent-updates-checkbox" type="checkbox" id="preventUpdates_{{step.name}}" [disabled]="disabled" [ngModel]="step.noUpdate" (ngModelChange)="changeNoUpdate($event)">
+                <div class="custom-control custom-checkbox float-right">
+                    <input class="custom-control-input transition-prevent-updates-checkbox" type="checkbox" id="preventUpdates_{{step.name}}" [disabled]="disabled" [ngModel]="step.noUpdate" (ngModelChange)="changeNoUpdate($event)">
 
-                    <label class="form-check-label" for="preventUpdates_{{step.name}}">
+                    <label class="custom-control-label" for="preventUpdates_{{step.name}}">
                         {{ 'workflows.preventUpdates' | sqxTranslate }}
                     </label>
                 </div>
diff --git a/frontend/app/features/settings/pages/workflows/workflow.component.html b/frontend/app/features/settings/pages/workflows/workflow.component.html
index 0058d3885..0522a6567 100644
--- a/frontend/app/features/settings/pages/workflows/workflow.component.html
+++ b/frontend/app/features/settings/pages/workflows/workflow.component.html
@@ -42,8 +42,13 @@
             </ul>
 
             <div class="float-right">
-                <button type="reset" class="btn btn-text-secondary2" (click)="toggleEditing()">{{ 'common.cancel' | sqxTranslate }}</button>
-                <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable" (click)="save()">{{ 'common.save' | sqxTranslate }}</button>
+                <button type="reset" class="btn btn-text-secondary2" (click)="toggleEditing()">
+                    {{ 'common.cancel' | sqxTranslate }}
+                </button>
+
+                <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable" (click)="save()">
+                    {{ 'common.save' | sqxTranslate }}
+                </button>
             </div>
         </div>
 
diff --git a/frontend/app/framework/angular/forms/editable-title.component.html b/frontend/app/framework/angular/forms/editable-title.component.html
index 9a4058015..cab7959c8 100644
--- a/frontend/app/framework/angular/forms/editable-title.component.html
+++ b/frontend/app/framework/angular/forms/editable-title.component.html
@@ -9,7 +9,9 @@
                 </div>
             </div>
             <div class="col-auto">
-                <button type="submit" class="btn btn-primary mr-1" [disabled]="!renameForm.valid || !renameForm.dirty">{{ 'common.save' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-primary mr-1" [disabled]="!renameForm.valid || !renameForm.dirty">
+                    {{ 'common.save' | sqxTranslate }}
+                </button>
         
                 <button type="button" class="btn btn-text-secondary btn-cancel mr-4" (click)="toggleRename()">
                     <i class="icon-close"></i>
diff --git a/frontend/app/framework/angular/forms/editors/checkbox-group.component.html b/frontend/app/framework/angular/forms/editors/checkbox-group.component.html
index a6d6fca0b..bba5b743b 100644
--- a/frontend/app/framework/angular/forms/editors/checkbox-group.component.html
+++ b/frontend/app/framework/angular/forms/editors/checkbox-group.component.html
@@ -1,11 +1,13 @@
 <div #container (sqxResized)="updateContainerWidth($event.width)">
-    <div class="form-check" [class.form-check-block]="!snapshot.isSingleLine" [class.form-check-inline]="snapshot.isSingleLine" *ngFor="let value of valuesSorted">
-        <input type="checkbox" class="form-check-input" id="{{controlId}}{{value}}"
+    <div class="custom-control custom-checkbox" *ngFor="let value of valuesSorted"
+        [class.custom-control-block]="!snapshot.isSingleLine"
+        [class.custom-control-inline]="snapshot.isSingleLine">
+        <input class="custom-control-input" type="checkbox" id="{{controlId}}_{{value}}"
             (blur)="callTouched()"
             (change)="check($event.target.checked, value)" 
             [checked]="isChecked(value)"
             [disabled]="snapshot.isDisabled">
     
-        <label class="form-check-label" for="{{controlId}}{{value}}">{{value}}</label>
+        <label class="custom-control-label" for="{{controlId}}_{{value}}">{{value}}</label>
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/editors/checkbox-group.component.scss b/frontend/app/framework/angular/forms/editors/checkbox-group.component.scss
index 3a85f63e1..d11bb7bfd 100644
--- a/frontend/app/framework/angular/forms/editors/checkbox-group.component.scss
+++ b/frontend/app/framework/angular/forms/editors/checkbox-group.component.scss
@@ -1,10 +1,10 @@
-.form-check-block {
+.custom-control-block {
     & {
         margin-bottom: .5rem;
         margin-left: 0;
     }
 
-    .form-check-input {
+    .custom-control-input {
         margin-top: .3rem;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/editors/stars.component.html b/frontend/app/framework/angular/forms/editors/stars.component.html
index 81e75f395..a37ac60bd 100644
--- a/frontend/app/framework/angular/forms/editors/stars.component.html
+++ b/frontend/app/framework/angular/forms/editors/stars.component.html
@@ -4,7 +4,9 @@
             <span class="star" *ngFor="let star of snapshot.starsArray" (mouseenter)="setPreview(star)" (click)="setValue(star)" [class.selected]="star <= snapshot.stars"></span>
         </span>
 
-        <button type="button" class="btn btn-text" [class.hidden]="!snapshot.value" (click)="reset()">{{ 'common.clear' | sqxTranslate }}</button>
+        <button type="button" class="btn btn-text" [class.hidden]="!snapshot.value" (click)="reset()">
+            {{ 'common.clear' | sqxTranslate }}
+        </button>
     </ng-container>
 
     <ng-template #noStars>
diff --git a/frontend/app/framework/angular/forms/editors/tag-editor.component.html b/frontend/app/framework/angular/forms/editors/tag-editor.component.html
index d23d45e92..4c2c2acac 100644
--- a/frontend/app/framework/angular/forms/editors/tag-editor.component.html
+++ b/frontend/app/framework/angular/forms/editors/tag-editor.component.html
@@ -47,13 +47,13 @@
             <div class="control-dropdown suggestions-dropdown" [sqxAnchoredTo]="form" position="bottom-left" @fade>
                 <div class="row">
                     <div class=" col-6" *ngFor="let item of suggestionsSorted; let i = index">
-                        <div class="form-check form-check">
-                            <input class="form-check-input" type="checkbox" id="tag_{{i}}"
+                        <div class="custom-control custom-checkbox custom-control custom-checkbox">
+                            <input class="custom-control-input" type="checkbox" id="tag_{{i}}"
                                 [ngModel]="isSelected(item)"
                                 (ngModelChange)="toggleValue($event, item)"
                             />
 
-                            <label class="form-check-label truncate" for="tag_{{i}}" title="{{item.name}}" titlePosition="top-left">
+                            <label class="custom-control-label truncate" for="tag_{{i}}" title="{{item.name}}" titlePosition="top-left">
                                 {{item.name}}
                             </label>
                         </div>
diff --git a/frontend/app/framework/angular/image-source.directive.ts b/frontend/app/framework/angular/image-source.directive.ts
index ed2fe2976..3f6f008f1 100644
--- a/frontend/app/framework/angular/image-source.directive.ts
+++ b/frontend/app/framework/angular/image-source.directive.ts
@@ -23,7 +23,8 @@ export class ImageSourceDirective extends ResourceOwner implements OnChanges, On
     public imageSource: string;
 
     @Input()
-    public retryCount = 10;
+    public retryCount = 0;
+
     @Input()
     public layoutKey: string;
 
@@ -136,7 +137,7 @@ export class ImageSourceDirective extends ResourceOwner implements OnChanges, On
     private retryLoadingImage() {
         this.loadRetries++;
 
-        if (this.loadRetries <= 3) {
+        if (this.loadRetries <= this.retryCount) {
             this.loadTimer =
                 setTimeout(() => {
                     this.loadQuery = MathHelper.guid();
diff --git a/frontend/app/framework/angular/modals/dialog-renderer.component.html b/frontend/app/framework/angular/modals/dialog-renderer.component.html
index 518a9aa7c..8bcd9a2b4 100644
--- a/frontend/app/framework/angular/modals/dialog-renderer.component.html
+++ b/frontend/app/framework/angular/modals/dialog-renderer.component.html
@@ -9,19 +9,23 @@
         <ng-container content>
             <span [innerHTML]="request.text | sqxTranslate | sqxMarkdown"></span>
 
-            <div class="form-check mt-4" *ngIf="request.canRemember">
-                <input class="form-check-input" type="checkbox" id="remember" [(ngModel)]="request.remember">
+            <div class="custom-control custom-checkbox mt-4" *ngIf="request.canRemember">
+                <input class="custom-control-input" type="checkbox" id="remember" [(ngModel)]="request.remember">
 
-                <label class="form-check-label" for="remember">
+                <label class="custom-control-label" for="remember">
                     {{ 'common.remember' | sqxTranslate}}
                 </label>
             </div>
         </ng-container>
     
         <ng-container footer>
-            <button type="button" class="btn btn-secondary" (click)="cancel()">{{ 'common.no' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-text-secondary2" (click)="cancel()">
+                {{ 'common.no' | sqxTranslate }}
+            </button>
 
-            <button type="button" class="btn btn-danger" (click)="confirm()" sqxFocusOnInit>{{ 'common.yes' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-danger" (click)="confirm()" sqxFocusOnInit>
+                {{ 'common.yes' | sqxTranslate }}
+            </button>
         </ng-container>
     </sqx-modal-dialog>
 </ng-container>
diff --git a/frontend/app/framework/angular/pager.component.html b/frontend/app/framework/angular/pager.component.html
index 784459a91..4bb802af7 100644
--- a/frontend/app/framework/angular/pager.component.html
+++ b/frontend/app/framework/angular/pager.component.html
@@ -1,6 +1,6 @@
 <div class="clearfix" *ngIf="pager && (!autoHide || pager.canGoPrev || pager.canGoNext)">
     <div class="float-right pagination">
-        <select class="form-control form-control-sm" [ngModel]="pager.pageSize" (ngModelChange)="setPageSize($event)">
+        <select class="custom-select custom-select-sm" [ngModel]="pager.pageSize" (ngModelChange)="setPageSize($event)">
             <option *ngFor="let pageSize of pageSizes" [ngValue]="pageSize">{{pageSize}}</option>
         </select>
 
diff --git a/frontend/app/framework/angular/pager.component.scss b/frontend/app/framework/angular/pager.component.scss
index af496b3dc..d3e99b4b7 100644
--- a/frontend/app/framework/angular/pager.component.scss
+++ b/frontend/app/framework/angular/pager.component.scss
@@ -1,4 +1,4 @@
-.form-control {
+.custom-select {
     display: inline-block;
     margin-right: 2rem;
     margin-top: .25rem;
diff --git a/frontend/app/shared/components/app-form.component.html b/frontend/app/shared/components/app-form.component.html
index a02fdd709..db3132311 100644
--- a/frontend/app/shared/components/app-form.component.html
+++ b/frontend/app/shared/components/app-form.component.html
@@ -33,9 +33,13 @@
         </ng-container>
 
         <ng-container footer>
-            <button type="button" class="btn btn-secondary" (click)="emitComplete()">{{ 'common.cancel' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-secondary2" (click)="emitComplete()">
+                {{ 'common.cancel' | sqxTranslate }}
+            </button>
 
-            <button type="submit" class="btn btn-success">{{ 'common.create' | sqxTranslate }}</button>
+            <button type="submit" class="btn btn-success">
+                {{ 'common.create' | sqxTranslate }}
+            2</button>
         </ng-container>
     </sqx-modal-dialog>
 </form>
\ No newline at end of file
diff --git a/frontend/app/shared/components/assets/asset-dialog.component.html b/frontend/app/shared/components/assets/asset-dialog.component.html
index b30f2b89b..451c6183d 100644
--- a/frontend/app/shared/components/assets/asset-dialog.component.html
+++ b/frontend/app/shared/components/assets/asset-dialog.component.html
@@ -9,13 +9,19 @@
             
             <ng-container [ngSwitch]="selectedTab">
                 <ng-container *ngSwitchCase="'i18n:assets.tabImage'">
-                    <button type="button" class="btn btn-primary ml-auto mr-4" (click)="cropImage()" [class.invisible]="!isUploadable" [disabled]="progress > 0">{{ 'common.save' | sqxTranslate }}</button>
+                    <button type="button" class="btn btn-primary ml-auto mr-4" (click)="cropImage()" [class.invisible]="!isUploadable" [disabled]="progress > 0">
+                        {{ 'common.save' | sqxTranslate }}
+                    </button>
                 </ng-container>
                 <ng-container *ngSwitchCase="'i18n:assets.tabFocusPoint'">
-                    <button type="button" class="btn btn-primary ml-auto mr-4" (click)="setFocusPoint()" [class.invisible]="!isEditable">{{ 'common.save' | sqxTranslate }}</button>
+                    <button type="button" class="btn btn-primary ml-auto mr-4" (click)="setFocusPoint()" [class.invisible]="!isEditable">
+                        {{ 'common.save' | sqxTranslate }}
+                    </button>
                 </ng-container>
                 <ng-container *ngSwitchCase="'i18n:assets.tabMetadata'">
-                    <button type="submit" class="btn btn-primary ml-auto mr-4" [class.invisible]="!isEditable">{{ 'common.save' | sqxTranslate }}</button>
+                    <button type="submit" class="btn btn-primary ml-auto mr-4" [class.invisible]="!isEditable">
+                        {{ 'common.save' | sqxTranslate }}
+                    </button>
                 </ng-container>
             </ng-container>
         </ng-container>
@@ -108,10 +114,10 @@
                             </div>
                         </div>
                     
-                        <div class="form-group form-check">
-                            <input type="checkbox" class="form-check-input" id="isProtected" formControlName="isProtected">
+                        <div class="form-group custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" id="isProtected" formControlName="isProtected">
             
-                            <label class="form-check-label" for="isProtected">{{ 'assets.protected' | sqxTranslate }}</label>
+                            <label class="custom-control-label" for="isProtected">{{ 'assets.protected' | sqxTranslate }}</label>
                         </div>
                     </div>
                 </ng-container>
diff --git a/frontend/app/shared/components/assets/asset-folder-dialog.component.html b/frontend/app/shared/components/assets/asset-folder-dialog.component.html
index 1a78e1522..4d3081df2 100644
--- a/frontend/app/shared/components/assets/asset-folder-dialog.component.html
+++ b/frontend/app/shared/components/assets/asset-folder-dialog.component.html
@@ -28,7 +28,9 @@
         </ng-container>
 
         <ng-container footer>
-            <button type="button" class="btn btn-secondary" (click)="emitComplete()">{{ 'common.cancel' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-text-secondary2" (click)="emitComplete()">
+                {{ 'common.cancel' | sqxTranslate }}
+            </button>
             
             <button type="submit" class="btn btn-success">
                 <ng-container *ngIf="assetFolder; else noAssetFolderButton">
diff --git a/frontend/app/shared/components/assets/assets-selector.component.html b/frontend/app/shared/components/assets/assets-selector.component.html
index 49300bbbd..893afc567 100644
--- a/frontend/app/shared/components/assets/assets-selector.component.html
+++ b/frontend/app/shared/components/assets/assets-selector.component.html
@@ -41,8 +41,12 @@
     </ng-container>
 
     <ng-container footer>
-        <button type="button" class="btn btn-secondary" (click)="emitComplete()">{{ 'common.cancel' | sqxTranslate }}</button>
+        <button type="button" class="btn btn-text-secondary2" (click)="emitComplete()">
+            {{ 'common.cancel' | sqxTranslate }}
+        </button>
 
-        <button type="submit" class="btn btn-success" (click)="emitSelect()" [disabled]="snapshot.selectionCount === 0">{{ 'assets.linkSelected' | sqxTranslate: { count: snapshot.selectionCount } }})</button>
+        <button type="submit" class="btn btn-success" (click)="emitSelect()" [disabled]="snapshot.selectionCount === 0">
+            {{ 'assets.linkSelected' | sqxTranslate: { count: snapshot.selectionCount } }})
+        </button>
     </ng-container>
 </sqx-modal-dialog>
\ No newline at end of file
diff --git a/frontend/app/shared/components/comments/comment.component.html b/frontend/app/shared/components/comments/comment.component.html
index 16d95918d..33c468cfc 100644
--- a/frontend/app/shared/components/comments/comment.component.html
+++ b/frontend/app/shared/components/comments/comment.component.html
@@ -29,9 +29,10 @@
                 <textarea class="form-control mb-1" name="{{comment.id}}" sqxFocusOnInit [(ngModel)]="editingText" [mention]="mentionUsers" [mentionConfig]="mentionConfig" (keydown)="updateWhenEnter($event)"></textarea>
     
                 <div>
-                    <button type="button" class="btn btn-sm btn-secondary mr-1" (click)="cancelEdit()">
+                    <button type="button" class="btn btn-sm btn-text-secondary2 mr-1" (click)="cancelEdit()">
                         {{ 'common.cancel' | sqxTranslate }}
                     </button>
+
                     <button type="submit" class="btn btn-sm btn-primary">
                         <i class="icon-enter"></i> {{ 'common.save' | sqxTranslate }}
                     </button>
diff --git a/frontend/app/shared/components/forms/geolocation-editor.component.html b/frontend/app/shared/components/forms/geolocation-editor.component.html
index ad1c948d5..200060741 100644
--- a/frontend/app/shared/components/forms/geolocation-editor.component.html
+++ b/frontend/app/shared/components/forms/geolocation-editor.component.html
@@ -27,7 +27,9 @@
             </div>
 
             <div class="form-group col-auto" *ngIf="!snapshot.isCompact">
-                <button [class.hidden]="!hasValue" type="reset" class="btn btn-text clear" [disabled]="snapshot.isDisabled" (click)="clearValue()">{{ 'common.clear' | sqxTranslate }}</button>
+                <button [class.hidden]="!hasValue" type="reset" class="btn btn-text clear" [disabled]="snapshot.isDisabled" (click)="clearValue()">
+                    {{ 'common.clear' | sqxTranslate }}
+                </button>
             </div>
         </form>
         <div class="col-auto">
diff --git a/frontend/app/shared/components/search/queries/filter-comparison.component.html b/frontend/app/shared/components/search/queries/filter-comparison.component.html
index e27451cda..cc72d5a7d 100644
--- a/frontend/app/shared/components/search/queries/filter-comparison.component.html
+++ b/frontend/app/shared/components/search/queries/filter-comparison.component.html
@@ -7,14 +7,14 @@
         </sqx-query-path>
     </div>
     <div class="col-auto operator pl-1">
-        <select class="form-control" [ngModel]="filter.op" (ngModelChange)="changeOp($event)">
+        <select class="custom-select" [ngModel]="filter.op" (ngModelChange)="changeOp($event)">
             <option *ngFor="let operator of fieldModel.operators" [ngValue]="operator.value">{{operator.name | sqxTranslate}}</option>
         </select>
     </div>
     <div class="col pl-1" *ngIf="!noValue" [ngSwitch]="fieldModel.type">
         <ng-container *ngSwitchCase="'boolean'">
-            <div class="form-check form-check-inline pl-2">
-                <input type="checkbox" class="form-check-input"
+            <div class="custom-control custom-checkbox custom-control custom-checkbox-inline pl-2">
+                <input type="checkbox" class="custom-control-input"
                     [ngModel]="filter.value"
                     (ngModelChange)="changeValue($event)"
                 />
diff --git a/frontend/app/shared/components/search/queries/sorting.component.html b/frontend/app/shared/components/search/queries/sorting.component.html
index d79ce4abf..46e3caa92 100644
--- a/frontend/app/shared/components/search/queries/sorting.component.html
+++ b/frontend/app/shared/components/search/queries/sorting.component.html
@@ -7,7 +7,7 @@
                 [model]="model">
             </sqx-query-path>
 
-            <select class="form-control ml-1" [ngModel]="sorting.order" (ngModelChange)="changeOrder($event)">
+            <select class="custom-select ml-1" [ngModel]="sorting.order" (ngModelChange)="changeOrder($event)">
                 <option *ngFor="let mode of modes" [ngValue]="mode">{{mode}}</option>
             </select>
         </div>
diff --git a/frontend/app/shared/components/search/search-form.component.html b/frontend/app/shared/components/search/search-form.component.html
index 9d901cc7e..aed8385e9 100644
--- a/frontend/app/shared/components/search/search-form.component.html
+++ b/frontend/app/shared/components/search/search-form.component.html
@@ -75,18 +75,22 @@
                     <input type="text" class="form-control" id="appName" formControlName="name" autocomplete="off" sqxFocusOnInit>
                 </div>
 
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" formControlName="user" id="user">
-                    <label class="form-check-label" for="user">
+                <div class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox" formControlName="user" id="user">
+                    <label class="custom-control-label" for="user">
                         {{ 'search.saveQueryMyself' | sqxTranslate }}
                     </label>
                 </div>
             </ng-container>
         
             <ng-container footer>
-                <button type="button" class="btn btn-secondary" (click)="saveQueryDialog.hide()">{{ 'common.cancel' | sqxTranslate }}</button>
+                <button type="button" class="btn btn-text-secondary2" (click)="saveQueryDialog.hide()">
+                    {{ 'common.cancel' | sqxTranslate }}
+                </button>
                
-                <button type="submit" class="btn btn-success">{{ 'common.create' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-success">
+                    {{ 'common.create' | sqxTranslate }}
+                </button>
             </ng-container>
         </sqx-modal-dialog>
     </form>
diff --git a/frontend/app/style.js b/frontend/app/style.js
new file mode 100644
index 000000000..aa0f23cc9
--- /dev/null
+++ b/frontend/app/style.js
@@ -0,0 +1,8 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import './theme/theme.scss';
diff --git a/frontend/app/theme/_forms.scss b/frontend/app/theme/_forms.scss
index 8412e0b4e..da58569d9 100644
--- a/frontend/app/theme/_forms.scss
+++ b/frontend/app/theme/_forms.scss
@@ -223,6 +223,11 @@ label {
         font-weight: normal;
     }
 
+    &.custom-control-label {
+        font-size: 100%;
+        font-weight: normal;
+    }
+
     .hint {
         color: $color-text-decent;
     }