diff --git a/frontend/app/_theme.html b/frontend/app/_theme.html
index 708cac3aa..11ca22d7a 100644
--- a/frontend/app/_theme.html
+++ b/frontend/app/_theme.html
@@ -512,7 +512,7 @@
                                 <div class="form-group">
                                     <label for="exampleInputEmail1">Email address</label>
                                     <input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
-                                    <sqx-form-hint>We'll never share your email with anyone else.</small>
+                                    <small class="text-muted form-text">We'll never share your email with anyone else.</small>
                                 </div>
                                 <div class="form-group">
                                     <label for="exampleInputPassword1">Password</label>
diff --git a/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts b/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts
index 65a692e4e..9c72686a1 100644
--- a/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts
+++ b/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts
@@ -15,7 +15,7 @@ import { EventConsumerDto, EventConsumersState } from '@app/features/administrat
     selector: '[sqxEventConsumer]',
     template: `
         <tr [class.faulted]="eventConsumer.error && eventConsumer.error?.length > 0">
-            <td class="auto-auto">
+            <td class="cell-auto">
                 <span class="truncate">
                     <i class="faulted-icon icon icon-bug" (click)="error.emit()" [class.hidden]="!eventConsumer.error || eventConsumer.error?.length === 0"></i>
 
diff --git a/frontend/app/features/apps/pages/apps-page.component.html b/frontend/app/features/apps/pages/apps-page.component.html
index 60fac9e55..e993078b0 100644
--- a/frontend/app/features/apps/pages/apps-page.component.html
+++ b/frontend/app/features/apps/pages/apps-page.component.html
@@ -111,7 +111,7 @@
     </div>
 </div>
 
-<div *ngIf="info" class="info">{{info}}</div>
+<div class="info">asdsadd</div>
 
 <ng-container *sqxModal="addAppDialog">
     <sqx-app-form [template]="addAppTemplate"
diff --git a/frontend/app/features/content/pages/content/content-history-page.component.scss b/frontend/app/features/content/pages/content/content-history-page.component.scss
index 5392a3fce..b1d0b2caa 100644
--- a/frontend/app/features/content/pages/content/content-history-page.component.scss
+++ b/frontend/app/features/content/pages/content/content-history-page.component.scss
@@ -3,11 +3,11 @@
 
 :host ::ng-deep {
     .user-ref {
-        color: $color-title;
+        font-weight: 500;
     }
 
     .marker-ref {
-        color: $color-title;
+        font-weight: 500;
     }
 }
 
@@ -17,7 +17,6 @@
 
 .event {
     & {
-        color: $color-history;
         font-size: .9rem;
         font-weight: normal;
         margin-bottom: 1.5rem;
diff --git a/frontend/app/features/content/pages/contents/contents-page.component.scss b/frontend/app/features/content/pages/contents/contents-page.component.scss
index 8966039af..37ec92dda 100644
--- a/frontend/app/features/content/pages/contents/contents-page.component.scss
+++ b/frontend/app/features/content/pages/contents/contents-page.component.scss
@@ -33,7 +33,7 @@
 }
 
 .selection {
-    background: $color-table-footer;
+    background: $color-theme-secondary;
     border-bottom: 2px solid $color-border;
     padding: .25 * $panel-padding $panel-padding;
 }
\ No newline at end of file
diff --git a/frontend/app/features/rules/pages/rules/rule.component.scss b/frontend/app/features/rules/pages/rules/rule.component.scss
index 7ec376700..669137560 100644
--- a/frontend/app/features/rules/pages/rules/rule.component.scss
+++ b/frontend/app/features/rules/pages/rules/rule.component.scss
@@ -15,7 +15,7 @@
     }
 
     &-footer {
-        background: $color-table-footer;
+        background: $color-theme-secondary;
         font-weight: normal;
         font-size: 90%;
     }
diff --git a/frontend/app/features/schemas/pages/schema/field-wizard.component.html b/frontend/app/features/schemas/pages/schema/field-wizard.component.html
index cf9681be6..27b37e3cc 100644
--- a/frontend/app/features/schemas/pages/schema/field-wizard.component.html
+++ b/frontend/app/features/schemas/pages/schema/field-wizard.component.html
@@ -52,7 +52,7 @@
                     </div>
 
                     <sqx-form-hint>
-                        You can the field as localizable. It means that is dependent on the language, for example a city name.
+                        You can mark the field as localizable. It means that is dependent on the language, for example a city name.
                     </sqx-form-hint>
                 </div>
 
diff --git a/frontend/app/features/schemas/pages/schema/field-wizard.component.scss b/frontend/app/features/schemas/pages/schema/field-wizard.component.scss
index 230605fcd..de0add640 100644
--- a/frontend/app/features/schemas/pages/schema/field-wizard.component.scss
+++ b/frontend/app/features/schemas/pages/schema/field-wizard.component.scss
@@ -6,6 +6,7 @@ $icon-size: 4.5rem;
 :host ::ng-deep {
     .table-items-row-details-tab {
         padding: 1.5rem 1.75rem;
+        padding-bottom: 0;
     }
 }
 
diff --git a/frontend/app/features/schemas/pages/schema/field.component.scss b/frontend/app/features/schemas/pages/schema/field.component.scss
index 8b2574a57..894871e4d 100644
--- a/frontend/app/features/schemas/pages/schema/field.component.scss
+++ b/frontend/app/features/schemas/pages/schema/field.component.scss
@@ -44,7 +44,7 @@ $padding: 1rem;
     position: relative;
     border: 1px solid $color-border;
     border-top-width: 0;
-    background: $color-table-footer;
+    background: $color-theme-secondary;
 }
 
 .nested-field {
diff --git a/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts b/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts
index 3076ccc91..b6b010547 100644
--- a/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts
+++ b/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts
@@ -17,7 +17,7 @@ import { FieldDto } from '@app/shared';
             <div class="form-group row">
                 <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldName">Name</label>
 
-                <div class="col-6">
+                <div class="col-7">
                     <input type="text" class="form-control" id="{{field.fieldId}}_fieldName" readonly [ngModel]="field.name" [ngModelOptions]="standalone" />
 
                     <sqx-form-hint>
@@ -29,13 +29,13 @@ import { FieldDto } from '@app/shared';
             <div class="form-group row">
                 <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldLabel">Label</label>
 
-                <div class="col-6">
+                <div class="col-7">
                     <sqx-control-errors for="label" [submitted]="editFormSubmitted"></sqx-control-errors>
 
                     <input type="text" class="form-control" id="{{field.fieldId}}_fieldLabel" maxlength="100" formControlName="label" />
 
                     <sqx-form-hint>
-                        Define the display name for the field for documentation and user interfaces.
+                        Display name for documentation and user interfaces.
                     </sqx-form-hint>
                 </div>
             </div>
@@ -43,13 +43,13 @@ import { FieldDto } from '@app/shared';
             <div class="form-group row">
                 <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldHints">Hints</label>
 
-                <div class="col-6">
+                <div class="col-7">
                     <sqx-control-errors for="hints" [submitted]="editFormSubmitted"></sqx-control-errors>
 
                     <input type="text" class="form-control" id="{{field.fieldId}}_fieldHints" maxlength="100" formControlName="hints" />
 
                     <sqx-form-hint>
-                        Define some hints for the user and editor for the field for documentation and user interfaces.
+                        Describe this field for documentation and user interfaces.
                     </sqx-form-hint>
                 </div>
             </div>
@@ -87,7 +87,7 @@ import { FieldDto } from '@app/shared';
             <div class="form-group row" *ngIf="field.properties.isContentField">
                  <label class="col-3 col-form-label">Tags</label>
 
-                <div class="col-9">
+                <div class="col-7">
                     <sqx-tag-editor id="schemaTags" formControlName="tags"></sqx-tag-editor>
 
                     <sqx-form-hint>
diff --git a/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts b/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts
index c6403885b..6385c5c99 100644
--- a/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts
+++ b/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts
@@ -27,7 +27,7 @@ import { FieldDto, PatternDto } from '@app/shared';
             </ul>
 
             <div class="float-right" *ngIf="showButtons">
-                <button [disabled]="field.isLocked" type="reset" class="btn btn-secondary" (click)="cancel.emit()">Cancel</button>
+                <button [disabled]="field.isLocked" type="reset" class="btn btn-text-secondary" (click)="cancel.emit()">Cancel</button>
                 <button [disabled]="field.isLocked" type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">Save</button>
             </div>
         </div>
diff --git a/frontend/app/features/schemas/pages/schema/schema-edit-form.component.html b/frontend/app/features/schemas/pages/schema/schema-edit-form.component.html
index b57572a8d..41b80f503 100644
--- a/frontend/app/features/schemas/pages/schema/schema-edit-form.component.html
+++ b/frontend/app/features/schemas/pages/schema/schema-edit-form.component.html
@@ -17,7 +17,7 @@
         
                 <input type="text" class="form-control" id="schemaLabel" formControlName="label" />
 
-                <sqx-form-hint>If the label is defined it will be shown in the UI instead of the schema name.</sqx-form-hint>
+                <sqx-form-hint>Display name for documentation and user interfaces.</sqx-form-hint>
             </div>
         
             <div class="form-group">
diff --git a/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss b/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss
index 559e9a651..220b21514 100644
--- a/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss
@@ -15,6 +15,8 @@
 }
 
 .inner-header {
+    background: $color-theme-secondary;
+    border: 0;
     padding: 1rem $panel-padding;
 }
 
diff --git a/frontend/app/features/schemas/pages/schema/schema-fields.component.html b/frontend/app/features/schemas/pages/schema/schema-fields.component.html
index 45e69c554..ca1e4b9ed 100644
--- a/frontend/app/features/schemas/pages/schema/schema-fields.component.html
+++ b/frontend/app/features/schemas/pages/schema/schema-fields.component.html
@@ -1,33 +1,31 @@
-<div class="fields">
-    <div class="table-items-row table-items-row-empty" *ngIf="schema && schema.fields.length === 0">
-        No field created yet.
-        
-        <button type="button" class="btn btn-success btn-sm ml-2" (click)="addFieldDialog.show()" *ngIf="schema.canAddField">
-            <i class="icon icon-plus"></i> Add Field
-        </button>
-    </div>
+<div class="table-items-row table-items-row-empty" *ngIf="schema && schema.fields.length === 0">
+    No field created yet.
+    
+    <button type="button" class="btn btn-success btn-sm ml-2" (click)="addFieldDialog.show()" *ngIf="schema.canAddField">
+        <i class="icon icon-plus"></i> Add Field
+    </button>
+</div>
 
-    <ng-container *ngIf="patternsState.patterns | async; let patterns">
-        <div
-            cdkDropList
-            [cdkDropListDisabled]="!schema.canOrderFields"
-            [cdkDropListData]="schema.fields"
-            (cdkDropListDropped)="sortFields($event)">
-            <div *ngFor="let field of schema.fields; trackBy: trackByFieldFn"
-                class="table-drag"
-                cdkDrag
-                cdkDragLockAxis="y">
-                <sqx-field [field]="field" [schema]="schema" [patterns]="patterns">
-                    <i cdkDragHandle class="icon-drag2 drag-handle"></i>
-                </sqx-field>
-            </div>
+<ng-container *ngIf="patternsState.patterns | async; let patterns">
+    <div
+        cdkDropList
+        [cdkDropListDisabled]="!schema.canOrderFields"
+        [cdkDropListData]="schema.fields"
+        (cdkDropListDropped)="sortFields($event)">
+        <div *ngFor="let field of schema.fields; trackBy: trackByFieldFn"
+            class="table-drag"
+            cdkDrag
+            cdkDragLockAxis="y">
+            <sqx-field [field]="field" [schema]="schema" [patterns]="patterns">
+                <i cdkDragHandle class="icon-drag2 drag-handle"></i>
+            </sqx-field>
         </div>
+    </div>
 
-        <button type="button" class="btn btn-success field-button" (click)="addFieldDialog.show()" *ngIf="schema.canAddField">
-            <i class="icon icon-plus field-button-icon"></i> <div class="field-button-text">Add Field</div>
-        </button>
-    </ng-container>
-</div>
+    <button type="button" class="btn btn-success field-button" (click)="addFieldDialog.show()" *ngIf="schema.canAddField">
+        <i class="icon icon-plus field-button-icon"></i> <div class="field-button-text">Add Field</div>
+    </button>
+</ng-container>
 
 <ng-container *sqxModal="addFieldDialog">
     <sqx-field-wizard [schema]="schema"
diff --git a/frontend/app/features/schemas/pages/schema/schema-fields.component.scss b/frontend/app/features/schemas/pages/schema/schema-fields.component.scss
index 0a2241aed..b07a07549 100644
--- a/frontend/app/features/schemas/pages/schema/schema-fields.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-fields.component.scss
@@ -1,8 +1,11 @@
 @import '_vars';
 @import '_mixins';
 
-.fields {
+:host {
     padding: $panel-padding;
+    padding-bottom: 8rem;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .field-button {
diff --git a/frontend/app/features/schemas/pages/schema/schema-page.component.ts b/frontend/app/features/schemas/pages/schema/schema-page.component.ts
index 6bdce5fa2..dd4ef9743 100644
--- a/frontend/app/features/schemas/pages/schema/schema-page.component.ts
+++ b/frontend/app/features/schemas/pages/schema/schema-page.component.ts
@@ -50,11 +50,13 @@ export class SchemaPageComponent extends ResourceOwner implements OnInit {
     }
 
     public ngOnInit() {
+        this.updateTab();
+
         this.own(
             this.router.events
                 .subscribe(event => {
                     if (Types.is(event, NavigationEnd)) {
-                        this.selectedTab = this.route.firstChild!.snapshot.routeConfig!.path!;
+                        this.updateTab();
                     }
                 }));
 
@@ -65,6 +67,10 @@ export class SchemaPageComponent extends ResourceOwner implements OnInit {
                 }));
     }
 
+    private updateTab() {
+        this.selectedTab = this.route.firstChild!.snapshot.routeConfig!.path!;
+    }
+
     public publish() {
         this.schemasState.publish(this.schema).subscribe();
     }
diff --git a/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss b/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss
index 559e9a651..220b21514 100644
--- a/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss
@@ -15,6 +15,8 @@
 }
 
 .inner-header {
+    background: $color-theme-secondary;
+    border: 0;
     padding: 1rem $panel-padding;
 }
 
diff --git a/frontend/app/features/schemas/pages/schema/types/references-ui.component.html b/frontend/app/features/schemas/pages/schema/types/references-ui.component.html
index 0f03581b8..4f9cc2372 100644
--- a/frontend/app/features/schemas/pages/schema/types/references-ui.component.html
+++ b/frontend/app/features/schemas/pages/schema/types/references-ui.component.html
@@ -30,7 +30,7 @@
             </div>
 
             <sqx-form-hint>
-                Check this item to resolve display names for referenced items for the content list.<br />Can only be checked when the MaxItems field in the validation tab is set to 1.
+                Show the name of the referenced item in content list when MaxItems is set to 1.
             </sqx-form-hint>
         </div>
     </div>
diff --git a/frontend/app/features/settings/pages/clients/client-add-form.component.ts b/frontend/app/features/settings/pages/clients/client-add-form.component.ts
index e48e6f9ac..87c0d8e8d 100644
--- a/frontend/app/features/settings/pages/clients/client-add-form.component.ts
+++ b/frontend/app/features/settings/pages/clients/client-add-form.component.ts
@@ -25,7 +25,7 @@ import { AddClientForm, ClientsState } from '@app/shared';
                         <button type="submit" class="btn btn-success" [disabled]="addClientForm.hasNoName | async">Add Client</button>
                     </div>
                     <div class="col-auto pl-1">
-                        <button type="reset" class="btn btn-secondary" (click)="cancel()">Cancel</button>
+                        <button type="reset" class="btn btn-text-secondary" (click)="cancel()">Cancel</button>
                     </div>
                 </div>
             </form>
diff --git a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss
index 7751885f4..dfcfab111 100644
--- a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss
+++ b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss
@@ -12,5 +12,7 @@
 }
 
 .table-items-header {
+    border-width: 0;
+    border-bottom-width: 2px;
     margin: 0;
 }
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/contributors/contributors-page.component.html b/frontend/app/features/settings/pages/contributors/contributors-page.component.html
index b51f5d210..cb6956abe 100644
--- a/frontend/app/features/settings/pages/contributors/contributors-page.component.html
+++ b/frontend/app/features/settings/pages/contributors/contributors-page.component.html
@@ -1,6 +1,6 @@
 <sqx-title message="Contributors"></sqx-title>
 
-<sqx-panel desiredWidth="50rem" [showSidebar]="true">
+<sqx-panel desiredWidth="50rem" contentClass="grid" [showSidebar]="true">
     <ng-container title>
         Contributors
     </ng-container>
@@ -22,43 +22,45 @@
 
     <ng-container content>
         <ng-container *ngIf="contributorsState.isLoaded | async">
-            <ng-container *ngIf="contributorsState.maxContributors | async; let maxContributors">
-                <div class="panel-alert panel-alert-success" *ngIf="maxContributors > 0">
-                    Your plan allows up to {{maxContributors}} contributors.
-                </div>
-            </ng-container>
-            
             <ng-container *ngIf="contributorsState.contributorsPaged | async; let contributors">
                 <ng-container *ngIf="rolesState.roles | async; let roles">
+                    <ng-container *ngIf="contributorsState.maxContributors | async; let maxContributors">
+                        <div class="panel-alert panel-alert-success" *ngIf="maxContributors > 0">
+                            Your plan allows up to {{maxContributors}} contributors.
+                        </div>
+                    </ng-container>
                     <ng-container *ngIf="contributorsState.canCreate | async">
                         <sqx-contributor-add-form
                             [roles]="roles">
                         </sqx-contributor-add-form>
+                    </ng-container>
+                
+                    <div class="grid-content">
 
                         <div class="import-hint">
                             <sqx-form-hint class="text-right">
                                 Big team? <a class="force" (click)="importDialog.show()">Add many contributors at once</a>
                             </sqx-form-hint>
                         </div>
-                    </ng-container>
-                
-                    <ng-container *ngIf="contributors.length > 0; else noContributors">
-                        <table class="table table-items table-fixed">
-                            <tbody *ngFor="let contributor of contributors; trackBy: trackByContributor"
-                                [sqxContributor]="contributor"
-                                [search]="contributorsState.snapshot.queryRegex"
-                                [roles]="roles">
-                            </tbody>
-                        </table>
+                        
+                        <ng-container *ngIf="contributors.length > 0; else noContributors">
+                            <table class="table table-items table-fixed">
+                                <tbody *ngFor="let contributor of contributors; trackBy: trackByContributor"
+                                    [sqxContributor]="contributor"
+                                    [search]="contributorsState.snapshot.queryRegex"
+                                    [roles]="roles">
+                                </tbody>
+                            </table>
 
-                        <sqx-pager [pager]="contributorsState.contributorsPager | async" [autoHide]="true" (prevPage)="goPrev()" (nextPage)="goNext()"></sqx-pager>
-                    </ng-container>
+                            <sqx-pager [pager]="contributorsState.contributorsPager | async" [autoHide]="true" (prevPage)="goPrev()" (nextPage)="goNext()"></sqx-pager>
+                        </ng-container>
 
-                    <ng-template #noContributors>
-                        <div class="table-items-row table-items-row-empty">
-                            No contributors found.
-                        </div>
-                    </ng-template>
+                        <ng-template #noContributors>
+                            <div class="table-items-row table-items-row-empty">
+                                No contributors found.
+                            </div>
+                        </ng-template>
+                    </div>
                 </ng-container>
             </ng-container>
         </ng-container>
diff --git a/frontend/app/features/settings/pages/contributors/contributors-page.component.scss b/frontend/app/features/settings/pages/contributors/contributors-page.component.scss
index a5feb1f2d..9795c0ac2 100644
--- a/frontend/app/features/settings/pages/contributors/contributors-page.component.scss
+++ b/frontend/app/features/settings/pages/contributors/contributors-page.component.scss
@@ -3,6 +3,8 @@
 
 .import-hint {
     margin-bottom: 1rem;
-    font-weight: normal;
-    font-size: 90%;
+}
+
+.panel-alert {
+    margin: 0;
 }
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/languages/language.component.html b/frontend/app/features/settings/pages/languages/language.component.html
index 5ec63b9fa..52b943bb7 100644
--- a/frontend/app/features/settings/pages/languages/language.component.html
+++ b/frontend/app/features/settings/pages/languages/language.component.html
@@ -29,8 +29,8 @@
         <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" (click)="toggleEditing()">Cancel</button>
-                    <button type="submit" class="btn btn-primary" *ngIf="isEditable">Save</button>
+                    <button type="reset" class="btn btn-text-secondary" (click)="toggleEditing()">Cancel</button>
+                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">Save</button>
                 </div>
             </div>
 
diff --git a/frontend/app/features/settings/pages/roles/role-add-form.component.ts b/frontend/app/features/settings/pages/roles/role-add-form.component.ts
index fd3279cc2..90381ad2e 100644
--- a/frontend/app/features/settings/pages/roles/role-add-form.component.ts
+++ b/frontend/app/features/settings/pages/roles/role-add-form.component.ts
@@ -25,7 +25,7 @@ import { AddRoleForm, RolesState } from '@app/shared';
                         <button type="submit" class="btn btn-success" [disabled]="addRoleForm.hasNoName | async">Add role</button>
                     </div>
                     <div class="col-auto pl-1">
-                        <button type="reset" class="btn btn-secondary" (click)="cancel()">Cancel</button>
+                        <button type="reset" class="btn btn-text-secondary" (click)="cancel()">Cancel</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 c3fed1c0a..e1cef538a 100644
--- a/frontend/app/features/settings/pages/roles/role.component.html
+++ b/frontend/app/features/settings/pages/roles/role.component.html
@@ -32,8 +32,8 @@
         <form (ngSubmit)="save()">
             <div class="table-items-row-details-tabs clearfix">
                 <div class="float-right">
-                    <button type="reset" class="btn btn-text" (click)="toggleEditing()">Cancel</button>
-                    <button type="submit" class="btn btn-primary" *ngIf="isEditable">Save</button>
+                    <button type="reset" class="btn btn-text-secondary" (click)="toggleEditing()">Cancel</button>
+                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">Save</button>
                 </div>
             </div>
 
diff --git a/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts b/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts
index d39ac6459..422b00397 100644
--- a/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts
+++ b/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts
@@ -25,7 +25,7 @@ import { AddWorkflowForm, WorkflowsState } from '@app/shared';
                         <button type="submit" class="btn btn-success" [disabled]="addWorkflowForm.hasNoName | async">Add Workflow</button>
                     </div>
                     <div class="col-auto pl-1">
-                        <button type="reset" class="btn btn-secondary" (click)="cancel()">Cancel</button>
+                        <button type="reset" class="btn btn-text-secondary" (click)="cancel()">Cancel</button>
                     </div>
                 </div>
             </form>
diff --git a/frontend/app/features/settings/pages/workflows/workflow.component.html b/frontend/app/features/settings/pages/workflows/workflow.component.html
index f311d85bd..912af6bf2 100644
--- a/frontend/app/features/settings/pages/workflows/workflow.component.html
+++ b/frontend/app/features/settings/pages/workflows/workflow.component.html
@@ -34,8 +34,8 @@
     <div class="table-items-row-details" *ngIf="isEditing">
         <div class="table-items-row-details-tabs clearfix">
             <div class="float-right">
-                <button type="reset" class="btn btn-text" (click)="toggleEditing()">Cancel</button>
-                <button type="submit" class="btn btn-primary" *ngIf="isEditable" (click)="save()">Save</button>
+                <button type="reset" class="btn btn-text-secondary" (click)="toggleEditing()">Cancel</button>
+                <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable" (click)="save()">Save</button>
             </div>
         </div>
 
diff --git a/frontend/app/framework/angular/forms/form-hint.component.ts b/frontend/app/framework/angular/forms/form-hint.component.ts
index 00e241b2a..c64f2ba07 100644
--- a/frontend/app/framework/angular/forms/form-hint.component.ts
+++ b/frontend/app/framework/angular/forms/form-hint.component.ts
@@ -13,6 +13,17 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
         <small class="text-muted form-text {{class}}">
             <ng-content></ng-content>
         </small>`,
+    styles: [`
+        :host {
+            display: block;
+            margin-top: 0;
+            margin-bottom: .5rem
+        }
+
+        :host::last-child {
+            margin-bottom: 0;
+        }`
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FormHintComponent {
diff --git a/frontend/app/shared/components/comment.component.scss b/frontend/app/shared/components/comment.component.scss
index ddb67e7ac..8c129d65c 100644
--- a/frontend/app/shared/components/comment.component.scss
+++ b/frontend/app/shared/components/comment.component.scss
@@ -36,8 +36,4 @@
     &-created {
         font-size: .75rem;
     }
-}
-
-.text-muted {
-    color: $color-history;
 }
\ No newline at end of file
diff --git a/frontend/app/shared/components/history-list.component.scss b/frontend/app/shared/components/history-list.component.scss
index 90f465794..8661d69ba 100644
--- a/frontend/app/shared/components/history-list.component.scss
+++ b/frontend/app/shared/components/history-list.component.scss
@@ -3,11 +3,11 @@
 
 :host ::ng-deep {
     .user-ref {
-        color: $color-title;
+        font-weight: 500;
     }
 
     .marker-ref {
-        color: $color-title;
+        font-weight: 500;
     }
 }
 
@@ -21,7 +21,7 @@
 
 .event {
     & {
-        color: $color-history;
+        color: $color-text-decent;
         font-size: .9rem;
         font-weight: normal;
         margin-bottom: 1.5rem;
diff --git a/frontend/app/theme/_bootstrap-vars.scss b/frontend/app/theme/_bootstrap-vars.scss
index 1b57564ea..9e56a83b5 100644
--- a/frontend/app/theme/_bootstrap-vars.scss
+++ b/frontend/app/theme/_bootstrap-vars.scss
@@ -10,8 +10,6 @@ $h4-font-size:              $font-size-base * 1.1;
 $h5-font-size:              $font-size-base;
 $h6-font-size:              $font-size-base;
 
-$small-font-size:           90%;
-
 $body-bg:                   $color-background;
 
 $border-color:              $color-border;
@@ -22,12 +20,16 @@ $secondary:                 $color-theme-secondary;
 $success:                   $color-theme-green;
 $warning:                   $color-theme-orange;
 
+$text-muted:                $color-text-decent;
+
 $alert-bg-level:            0;
 $alert-color-level:         -12.5;
 
-$input-bg-disabled:         $color-input-disabled;
+$label-margin-bottom:       .25rem;
+
+$input-disabled-bg:         $color-input-disabled;
 $input-border-color:        $color-input;
-$input-placeholder-color:   $color-text-decent;
+$input-placeholder-color:   lighten($color-text-decent, 20%);
 
 $badge-bg-level: 2;
 
diff --git a/frontend/app/theme/_bootstrap.scss b/frontend/app/theme/_bootstrap.scss
index 6983029b6..74e2b75f5 100644
--- a/frontend/app/theme/_bootstrap.scss
+++ b/frontend/app/theme/_bootstrap.scss
@@ -534,7 +534,7 @@ a {
     }
 
     &-tabs {
-        background: $color-border;
+        background: $color-theme-secondary;
         position: relative;
         padding: .75rem 1.25rem;
         height: 70px;
diff --git a/frontend/app/theme/_forms.scss b/frontend/app/theme/_forms.scss
index 05bb9f1f8..f2cac5dff 100644
--- a/frontend/app/theme/_forms.scss
+++ b/frontend/app/theme/_forms.scss
@@ -182,13 +182,28 @@
     }
 }
 
+.col-form-label {
+    font-size: 90%;
+}
+
 label {
     & {
         color: $color-title;
+        font-size: 90%;
+        font-weight: 500;
+    }
+
+    &.form-check-label {
+        font-size: 100%;
+        font-weight: normal;
     }
 
     .hint {
-        color: $color-text-decent2;
+        color: $color-text-decent;
+    }
+
+    .text-muted {
+        font-weight: normal;
     }
 }
 
diff --git a/frontend/app/theme/_lists.scss b/frontend/app/theme/_lists.scss
index 1698f1413..f2a28f112 100644
--- a/frontend/app/theme/_lists.scss
+++ b/frontend/app/theme/_lists.scss
@@ -126,16 +126,16 @@
 
             // Caret that is placed next to the expand button.
             &::before {
-                @include caret-top($color-border);
+                @include caret-top($color-theme-secondary);
                 @include absolute(-1.1rem, 0, auto, auto);
             }
 
             &-tab {
-                padding: .75rem 1.25rem 1.25rem;
+                padding: 1.5rem;
             }
 
             &-tabs {
-                background: $color-border;
+                background: $color-table-footer;
                 position: relative;
                 padding: 1rem 1.25rem;
                 height: 70px;
diff --git a/frontend/app/theme/_panels.scss b/frontend/app/theme/_panels.scss
index cfba56e73..d6fcb6193 100644
--- a/frontend/app/theme/_panels.scss
+++ b/frontend/app/theme/_panels.scss
@@ -2,7 +2,7 @@
 @import '_vars';
 
 @mixin panel-icon {
-    color: $color-panel-icon;
+    color: $color-border-dark;
     font-size: 1.2rem;
     font-weight: 400;
     text-decoration: none;
@@ -13,7 +13,8 @@
     &:hover,
     &:focus {
         text-decoration: none;
-        color: darken($color-panel-icon, 10%);
+        cursor: pointer;
+        color: darken($color-border-dark, 10%);
     }
 
     &.active {
@@ -341,7 +342,7 @@
 
         &.active,
         &:hover {
-            background: $color-background;
+            background: $color-theme-secondary;
         }
 
         &.inactive {
diff --git a/frontend/app/theme/_vars.scss b/frontend/app/theme/_vars.scss
index c2acbe991..de8625e86 100644
--- a/frontend/app/theme/_vars.scss
+++ b/frontend/app/theme/_vars.scss
@@ -6,17 +6,11 @@ $color-border-dark:         #b3bbbf;
 $color-title:               #000;
 $color-text:                #373a3c;
 $color-text-decent:         #8091a5;
-$color-text-decent2:        #a9b9c0;
 $color-tooltip:             #1a2129;
-$color-history:             #7f858c;
 
 $color-code-background:     #f5f7f9;
 $color-code-text:           #708090;
 
-$color-input:               #dbe4eb;
-$color-input-background:    #fff;
-$color-input-disabled:      #eef1f4;
-$color-input-border:        rgba(0, 0, 0, .15);
 $color-extern-google:           #d34836;
 $color-extern-google-icon:      #b02c1b;
 $color-extern-microsoft:        #004185;
@@ -31,7 +25,7 @@ $color-theme-blue-dark:     #297ff6;
 $color-theme-blue-lighter:  #65a6ff;
 $color-theme-blue-light:    #9ebeea;
 $color-theme-blue-lightest: #d9e8fc;
-$color-theme-secondary:     #e1e4e8;
+$color-theme-secondary:     #ecf2f6;
 
 $color-theme-green:         #4bb958;
 $color-theme-green-dark:    #47b353;
@@ -43,6 +37,11 @@ $color-theme-error-dark:    #c00;
 
 $color-theme-info:          #5bc0de;
 
+$color-input:               #dbe4eb;
+$color-input-background:    #fff;
+$color-input-disabled:      $color-theme-secondary;
+$color-input-border:        rgba(0, 0, 0, .15);
+
 $color-dark1-background:        #2e3842;
 $color-dark1-foreground:        #6a7681;
 $color-dark1-border1:           #37424c;
@@ -62,8 +61,6 @@ $color-dark2-placeholder:       #757e8d;
 
 $color-dark-onboarding:         #273039;
 
-$color-panel-icon:              #a2b0b6;
-
 $color-badge-success-background:    #e4f6e6;
 $color-badge-success-foreground:    #4cc159;
 
@@ -83,7 +80,7 @@ $color-badge-secondary-background:  #e6e6e6;
 $color-badge-secondary-foreground:  #999;
 
 $color-table-background:    #fff;
-$color-table-footer:        #ecf2f6;
+$color-table-footer:        $color-theme-secondary;
 
 $color-table-border:        $color-border;
 $color-table-header:        $color-text-decent;