diff --git a/angular/src/app/_components/layout/two-column/two-column.component.html b/angular/src/app/_components/layout/two-column/two-column.component.html
index 77fcca3..fe0bf8a 100644
--- a/angular/src/app/_components/layout/two-column/two-column.component.html
+++ b/angular/src/app/_components/layout/two-column/two-column.component.html
@@ -34,7 +34,7 @@
     </div>
     <div class="pb-5 spt-main">
         <div class="pe-3 pt-3">
-            <div class="btn btn-secondary mb-1" (click)="goBack()" id="go-back">< {{'basic.back' | translate}}</div>
+            <div class="btn-back mb-1" (click)="goBack()" id="go-back"></div>
             <router-outlet></router-outlet>
         </div>
     </div>
diff --git a/angular/src/app/_views/base-data/base-data.component.html b/angular/src/app/_views/base-data/base-data.component.html
index 82c9082..c7e790f 100644
--- a/angular/src/app/_views/base-data/base-data.component.html
+++ b/angular/src/app/_views/base-data/base-data.component.html
@@ -1,5 +1,5 @@
 <div class="spt-container">
-    <div class="d-flex justify-content-between align-items-start">
+    <div class="spt-headline d-flex justify-content-between align-items-start">
         <h2>{{ 'view.base_data' | translate }}</h2>
     </div>
     <mat-tab-group>
diff --git a/angular/src/app/_views/dashboard/dashboard.component.html b/angular/src/app/_views/dashboard/dashboard.component.html
index 94efa18..ef071dc 100644
--- a/angular/src/app/_views/dashboard/dashboard.component.html
+++ b/angular/src/app/_views/dashboard/dashboard.component.html
@@ -1,5 +1,5 @@
 <div class="spt-container">
-    <div class="d-flex justify-content-between align-items-start">
+    <div class="spt-headline d-flex justify-content-between align-items-start">
         <h2>{{ 'dashboard.view' | translate }}</h2>
     </div>
     Space for important stuff.
diff --git a/angular/src/app/_views/location/location-form/location-form.component.html b/angular/src/app/_views/location/location-form/location-form.component.html
index b01aa9f..4666659 100644
--- a/angular/src/app/_views/location/location-form/location-form.component.html
+++ b/angular/src/app/_views/location/location-form/location-form.component.html
@@ -1,39 +1,43 @@
-<h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.location' | translate }}</h2>
-<div class="spt-form">
-    <form [formGroup]="form" (ngSubmit)="onSubmit()">
-        <div class="mb-3">
-            <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
-            <input type="text" class="form-control" id="name" formControlName="name" required/>
-        </div>
-        <div class="mb-3">
-            <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
-            <input type="text" class="form-control" id="code" formControlName="code" required/>
-        </div>
-        <div class="mb-3">
-            <label for="zone" class="form-label">{{ 'model.zone' | translate }}:</label>
-            <app-search-select #zoneSearchSelect
-                               [formId]="'zone'"
-                               [formLabelLangKey]="'model.zone'"
-                               [documentForm]="form"
-                               [getDataFunction]="getZones"
-                               [displayedDataField]="'name'"
-                               [listColDefinitions]="zoneColDefinitions"
-                               [dataSet]="data?.zone"
-            >
-            </app-search-select>
-            <input id="zone" type="hidden" formControlName="zone"/>
-        </div>
+<div class="spt-container">
+    <div class="spt-headline d-flex justify-content-between align-items-start">
+        <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.location' | translate }}</h2>
+    </div>
+    <div class="spt-form">
+        <form [formGroup]="form" (ngSubmit)="onSubmit()">
+            <div class="mb-3">
+                <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
+                <input type="text" class="form-control" id="name" formControlName="name" required/>
+            </div>
+            <div class="mb-3">
+                <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
+                <input type="text" class="form-control" id="code" formControlName="code" required/>
+            </div>
+            <div class="mb-3">
+                <label for="zone" class="form-label">{{ 'model.zone' | translate }}:</label>
+                <app-search-select #zoneSearchSelect
+                                   [formId]="'zone'"
+                                   [formLabelLangKey]="'model.zone'"
+                                   [documentForm]="form"
+                                   [getDataFunction]="getZones"
+                                   [displayedDataField]="'name'"
+                                   [listColDefinitions]="zoneColDefinitions"
+                                   [dataSet]="data?.zone"
+                >
+                </app-search-select>
+                <input id="zone" type="hidden" formControlName="zone"/>
+            </div>
 
-        <div class="flex gap-2">
-            <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
-                {{ 'basic.save' | translate }}
-            </button>
-
-            @if (isEditMode()) {
-                <button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
-                    {{ 'basic.delete' | translate }} {{ 'model.location' | translate }}
+            <div class="flex gap-2">
+                <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
+                    {{ 'basic.save' | translate }}
                 </button>
-            }
-        </div>
-    </form>
-</div>
\ No newline at end of file
+
+                @if (isEditMode()) {
+                    <button type="button" class="ms-3 btn btn-primary" (click)="onDelete()">
+                        {{ 'basic.delete' | translate }} {{ 'model.location' | translate }}
+                    </button>
+                }
+            </div>
+        </form>
+    </div>
+</div>
diff --git a/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html b/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html
index 5e0b3dd..2d48a4a 100644
--- a/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html
+++ b/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html
@@ -1,34 +1,38 @@
-<h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.shipping_company' | translate }}</h2>
-<div class="spt-form">
-    <form [formGroup]="form" (ngSubmit)="onSubmit()">
-        <div class="mb-3">
-            <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
-            <input type="text"
-                   class="form-control"
-                   id="name"
-                   formControlName="name"
-                   required/>
-        </div>
+<div class="spt-container">
+    <div class="spt-headline d-flex justify-content-between align-items-start">
+        <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.shipping_company' | translate }}</h2>
+    </div>
+    <div class="spt-form">
+        <form [formGroup]="form" (ngSubmit)="onSubmit()">
+            <div class="mb-3">
+                <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
+                <input type="text"
+                       class="form-control"
+                       id="name"
+                       formControlName="name"
+                       required/>
+            </div>
 
-        <div class="mb-3">
-            <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
-            <input type="text"
-                   class="form-control"
-                   id="code"
-                   formControlName="code"
-                   required/>
-        </div>
+            <div class="mb-3">
+                <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
+                <input type="text"
+                       class="form-control"
+                       id="code"
+                       formControlName="code"
+                       required/>
+            </div>
 
-        <div class="flex gap-2">
-            <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
-                {{ 'basic.save' | translate }}
-            </button>
-
-            @if (isEditMode()) {
-                <button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
-                    {{ 'basic.delete' | translate }} {{ 'model.shipping_company' | translate }}
+            <div class="flex gap-2">
+                <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
+                    {{ 'basic.save' | translate }}
                 </button>
-            }
-        </div>
-    </form>
+
+                @if (isEditMode()) {
+                    <button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
+                        {{ 'basic.delete' | translate }} {{ 'model.shipping_company' | translate }}
+                    </button>
+                }
+            </div>
+        </form>
+    </div>
 </div>
\ No newline at end of file
diff --git a/angular/src/app/_views/user/user-detail/user-detail.component.html b/angular/src/app/_views/user/user-detail/user-detail.component.html
index 7098d67..8b7f752 100644
--- a/angular/src/app/_views/user/user-detail/user-detail.component.html
+++ b/angular/src/app/_views/user/user-detail/user-detail.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="user" class="spt-container">
-    <div class="d-flex justify-content-between align-items-start">
+    <div class="spt-headline d-flex justify-content-between align-items-start">
         <h1>{{ 'users.user' | translate }}: {{ user.firstName }} {{ user.lastName }}</h1>
     </div>
     <mat-tab-group>
@@ -14,9 +14,10 @@
                         </dl>
                     </div>
                     <div class="col-12 col-sm-6 col-lg-4 has-image">
-        <!--                <img *ngIf="user.imageUrl !== null && user.imageUrl !== undefined"-->
-        <!--                     src="{{user.imageUrl}}" width="247" height="94"-->
-        <!--                     alt="{{user.firstName}} {{user.lastName}}" title="{{user.firstName}} {{user.lastName}}"/>-->
+                        @if (user.imageUrl !== null && user.imageUrl !== undefined) {
+                            <img src="{{user.imageUrl}}" width="247" height="94"
+                                 alt="{{user.firstName}} {{user.lastName}}" title="{{user.firstName}} {{user.lastName}}"/>
+                        }
                     </div>
                 </div>
             </div>
diff --git a/angular/src/app/_views/user/users.component.html b/angular/src/app/_views/user/users.component.html
index 36eebb5..edf572b 100644
--- a/angular/src/app/_views/user/users.component.html
+++ b/angular/src/app/_views/user/users.component.html
@@ -1,5 +1,5 @@
 <div class="spt-container">
-    <div class="d-flex justify-content-between align-items-start">
+    <div class="spt-headline d-flex justify-content-between align-items-start">
         <h2>{{ 'basic.users' | translate }}</h2>
     </div>
     <app-user-list></app-user-list>
diff --git a/angular/src/app/_views/vessel/vessel-form/vessel-form.component.html b/angular/src/app/_views/vessel/vessel-form/vessel-form.component.html
index b365682..374ae84 100644
--- a/angular/src/app/_views/vessel/vessel-form/vessel-form.component.html
+++ b/angular/src/app/_views/vessel/vessel-form/vessel-form.component.html
@@ -1,48 +1,52 @@
-<h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.vessel' | translate }}</h2>
-<div class="spt-form">
-    <form [formGroup]="form" (ngSubmit)="onSubmit()">
-        <div class="mb-3">
-            <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
-            <input type="text"
-                   class="form-control"
-                   id="name"
-                   formControlName="name"
-                   required/>
-        </div>
+<div class="spt-container">
+    <div class="spt-headline d-flex justify-content-between align-items-start">
+        <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.vessel' | translate }}</h2>
+    </div>
+    <div class="spt-form">
+        <form [formGroup]="form" (ngSubmit)="onSubmit()">
+            <div class="mb-3">
+                <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
+                <input type="text"
+                       class="form-control"
+                       id="name"
+                       formControlName="name"
+                       required/>
+            </div>
 
-        <div class="mb-3">
-            <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
-            <input type="text"
-                   class="form-control"
-                   id="code"
-                   formControlName="code"
-                   required/>
-        </div>
+            <div class="mb-3">
+                <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
+                <input type="text"
+                       class="form-control"
+                       id="code"
+                       formControlName="code"
+                       required/>
+            </div>
 
-        <div class="mb-3">
-            <label for="company" class="form-label">{{ 'model.shipping_company' | translate }}:</label>
-            <app-search-select #shippingCompanySearchSelect
-                               [formId]="'company'"
-                               [formLabelLangKey]="'model.shipping_company'"
-                               [documentForm]="form"
-                               [getDataFunction]="getShippingCompanies"
-                               [displayedDataField]="'name'"
-                               [listColDefinitions]="shippingCompanyColDefinitions"
-                               [dataSet]="data?.company">
-            </app-search-select>
-            <input id="company" type="hidden" formControlName="company"/>
-        </div>
+            <div class="mb-3">
+                <label for="company" class="form-label">{{ 'model.shipping_company' | translate }}:</label>
+                <app-search-select #shippingCompanySearchSelect
+                                   [formId]="'company'"
+                                   [formLabelLangKey]="'model.shipping_company'"
+                                   [documentForm]="form"
+                                   [getDataFunction]="getShippingCompanies"
+                                   [displayedDataField]="'name'"
+                                   [listColDefinitions]="shippingCompanyColDefinitions"
+                                   [dataSet]="data?.company">
+                </app-search-select>
+                <input id="company" type="hidden" formControlName="company"/>
+            </div>
 
-        <div class="flex gap-2">
-            <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
-                {{ 'basic.save' | translate }}
-            </button>
-
-            @if (isEditMode()) {
-                <button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
-                    {{ 'basic.delete' | translate }} {{ 'model.vessel' | translate }}
+            <div class="flex gap-2">
+                <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
+                    {{ 'basic.save' | translate }}
                 </button>
-            }
-        </div>
-    </form>
+
+                @if (isEditMode()) {
+                    <button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
+                        {{ 'basic.delete' | translate }} {{ 'model.vessel' | translate }}
+                    </button>
+                }
+            </div>
+        </form>
+    </div>
 </div>
\ No newline at end of file
diff --git a/angular/src/app/_views/zone/zone-form/zone-form.component.html b/angular/src/app/_views/zone/zone-form/zone-form.component.html
index cd0b1cd..97aef3d 100644
--- a/angular/src/app/_views/zone/zone-form/zone-form.component.html
+++ b/angular/src/app/_views/zone/zone-form/zone-form.component.html
@@ -1,21 +1,25 @@
-<h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.zone' | translate }}</h2>
-<div class="spt-form">
-    <form [formGroup]="form" (ngSubmit)="onSubmit()">
-        <div class="mb-3">
-            <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
-            <input type="text" class="form-control" id="name" formControlName="name" required/>
-        </div>
+<div class="spt-container">
+    <div class="spt-headline d-flex justify-content-between align-items-start">
+        <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.zone' | translate }}</h2>
+    </div>
+    <div class="spt-form">
+        <form [formGroup]="form" (ngSubmit)="onSubmit()">
+            <div class="mb-3">
+                <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
+                <input type="text" class="form-control" id="name" formControlName="name" required/>
+            </div>
 
-        <div class="flex gap-2">
-            <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
-                {{ 'basic.save' | translate }}
-            </button>
-
-            @if (isEditMode()) {
-                <button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
-                    {{ 'basic.delete' | translate }} {{ 'model.zone' | translate }}
+            <div class="flex gap-2">
+                <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
+                    {{ 'basic.save' | translate }}
                 </button>
-            }
-        </div>
-    </form>
+
+                @if (isEditMode()) {
+                    <button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
+                        {{ 'basic.delete' | translate }} {{ 'model.zone' | translate }}
+                    </button>
+                }
+            </div>
+        </form>
+    </div>
 </div>
\ No newline at end of file
diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html
index 9258875..719f100 100644
--- a/angular/src/app/app.component.html
+++ b/angular/src/app/app.component.html
@@ -20,10 +20,10 @@
 <!--                    <li><a class="dropdown-item" href="#">Peter Matusik: Christian hat einen Kommentar verfasst</a></li>-->
 <!--                </ul>-->
 <!--            </div>-->
-            <button class="btn btn-secondary me-3" (click)="logout()">{{ 'basic.logout' | translate }}</button>
-            <button class="btn btn-primary me-3" id="c-btn" (click)="copyTokenToClipboard()">c</button>
-            <button [class]="'me-3 btn ' + buttonClassLefties" (click)="leftHanded()">Lefties</button>
-            <button [class]="'btn ' + buttonClassDarkMode" (click)="darkMode()">Dark</button>
+            <button class="btn-logout" (click)="logout()"></button>
+            <button [class]="'toggle-left-hand ' + buttonClassLefties" (click)="leftHanded()" title="Left handed"></button>
+            <button [class]="'toggle-dark-mode ' + buttonClassDarkMode" (click)="darkMode()" title="Dark mode"></button>
+            <button class="btn btn-primary ms-3" id="c-btn" (click)="copyTokenToClipboard()">c</button>
         </div>
     </div>
 </nav>
diff --git a/angular/src/app/app.component.ts b/angular/src/app/app.component.ts
index 6729ef5..a64e225 100644
--- a/angular/src/app/app.component.ts
+++ b/angular/src/app/app.component.ts
@@ -96,10 +96,10 @@ export class AppComponent implements OnInit {
     }
 
     get buttonClassLefties(): string {
-        return this.isLeftHanded ? 'btn-primary' : 'btn-secondary';
+        return this.isLeftHanded ? 'is-left' : '';
     }
 
     get buttonClassDarkMode(): string {
-        return this.isDarkMode ? 'btn-primary' : 'btn-secondary';
+        return this.isDarkMode ? 'toggle-light' : 'toggle-dark';
     }
 }
diff --git a/angular/src/assets/images/icons/dark-mode-toggle-icon.svg b/angular/src/assets/images/icons/dark-mode-toggle-icon.svg
new file mode 100644
index 0000000..e83c83a
--- /dev/null
+++ b/angular/src/assets/images/icons/dark-mode-toggle-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 262.86"><path fill-rule="nonzero" d="M316.78 16.55h-205.9c-30.5 0-58.22 12.48-78.31 32.57C12.47 69.21 0 96.93 0 127.44c0 30.5 12.47 58.22 32.57 78.31 20.09 20.1 47.81 32.57 78.31 32.57h193.25c21.54 15.43 47.9 24.54 76.26 24.54h.18c36.14 0 69.02-14.79 92.83-38.6 23.8-23.81 38.6-56.67 38.6-92.83 0-36.15-14.78-69.03-38.63-92.8C449.53 14.8 416.67 0 380.57 0h-.18c-23.02 0-44.72 6.02-63.61 16.55zm70.62 97.17.43.09c.82-3.45 2.83-6.19 6.04-8.16 3.2-1.98 6.53-2.57 10.01-1.75l.1-.43c-3.47-.82-6.2-2.83-8.17-6.03-1.98-3.22-2.57-6.55-1.75-10.01l-.43-.1c-.82 3.47-2.83 6.2-6.03 8.18-3.21 1.98-6.55 2.56-10.02 1.74l-.1.43c3.47.82 6.2 2.84 8.18 6.04 1.99 3.19 2.56 6.52 1.74 10zm36.87 16.77.53.12c1.02-4.35 3.55-7.78 7.58-10.26 4.02-2.49 8.2-3.22 12.56-2.19l.13-.53c-4.35-1.03-7.78-3.55-10.26-7.59-2.49-4.03-3.22-8.22-2.2-12.56l-.53-.12c-1.02 4.35-3.55 7.77-7.58 10.26-4.02 2.49-8.21 3.22-12.56 2.19l-.13.53c4.36 1.03 7.78 3.55 10.26 7.58 2.49 4.02 3.22 8.22 2.2 12.57zm-38.79-61.01c-15.69 7.67-26.98 23.26-28.29 41.93-1.96 27.88 19.05 52.06 46.92 54.02 13.23.93 25.64-3.32 35.22-11.02 4.75-3.82 9.66-.45 7.59 4.36-11.33 26.42-38.45 44.04-68.74 41.91-38.29-2.69-67.14-35.91-64.45-74.19C316.3 89.8 347.05 61.67 383.44 62c6.71.06 8.13 4.5 2.04 7.48zm-5.09-53.95h.18c63.75 0 115.91 52.15 115.91 115.9 0 63.75-52.23 115.91-115.91 115.91h-.18c-63.68 0-115.91-52.16-115.91-115.91s52.16-115.9 115.91-115.9z"/></svg>
\ No newline at end of file
diff --git a/angular/src/assets/images/icons/icon-back-white.svg b/angular/src/assets/images/icons/icon-back-white.svg
new file mode 100644
index 0000000..b069f21
--- /dev/null
+++ b/angular/src/assets/images/icons/icon-back-white.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M423.466667 141.568a42.666667 42.666667 0 0 1-2.048 60.288l-142.506667 132.992h336.512a280.576 280.576 0 1 1 0 561.152H170.666667a42.666667 42.666667 0 1 1 0-85.333333h444.757333a195.242667 195.242667 0 1 0 0-390.485334H278.912l142.506667 133.034667a42.666667 42.666667 0 1 1-58.24 62.378667L141.568 408.746667a42.666667 42.666667 0 0 1 0-62.421334L363.178667 139.52a42.666667 42.666667 0 0 1 60.288 2.090667z" fill="#ffffff" /></svg>
\ No newline at end of file
diff --git a/angular/src/assets/images/icons/icon-back.svg b/angular/src/assets/images/icons/icon-back.svg
new file mode 100644
index 0000000..fb3c50d
--- /dev/null
+++ b/angular/src/assets/images/icons/icon-back.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M423.466667 141.568a42.666667 42.666667 0 0 1-2.048 60.288l-142.506667 132.992h336.512a280.576 280.576 0 1 1 0 561.152H170.666667a42.666667 42.666667 0 1 1 0-85.333333h444.757333a195.242667 195.242667 0 1 0 0-390.485334H278.912l142.506667 133.034667a42.666667 42.666667 0 1 1-58.24 62.378667L141.568 408.746667a42.666667 42.666667 0 0 1 0-62.421334L363.178667 139.52a42.666667 42.666667 0 0 1 60.288 2.090667z" fill="#212529" /></svg>
\ No newline at end of file
diff --git a/angular/src/assets/images/icons/icon-lefthand-active.svg b/angular/src/assets/images/icons/icon-lefthand-active.svg
new file mode 100644
index 0000000..645f2c3
--- /dev/null
+++ b/angular/src/assets/images/icons/icon-lefthand-active.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: #;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M459.8784 971.52c-208.26112 0-236.19584-210.69824-251.19744-323.88096-1.90464-14.37696-3.64544-27.50464-5.5296-38.81984-8.50944-51.01568-27.05408-110.01856-43.42784-162.05824-16.85504-53.58592-30.16704-95.92832-30.16704-120.3712 0-34.63168 27.53536-60.49792 52.16256-60.49792 30.65856 0 56.05376 20.0192 69.67296 54.91712l42.61888 109.21984c-8.02816-88.7808-18.432-202.60864-20.38784-218.39872-2.95936-23.83872 2.7136-45.23008 15.95392-60.2112 11.1616-12.62592 27.07456-19.58912 44.78976-19.58912 38.35904 0 65.73056 25.81504 73.22624 69.04832 1.88416 10.79296 6.6048 38.42048 12.24704 71.59808L419.84 131.84c0-40.192 30.69952-71.68 69.89824-71.68 39.03488 0 70.78912 32.16384 70.78912 71.68l5.5296 208.9984c11.44832-62.14656 22.62016-125.26592 24.3712-143.872 6.144-65.57696 47.53408-75.3664 71.64928-75.3664 40.88832 0 71.72096 33.024 71.72096 76.8 0 0.55296-0.03072 1.10592-0.09216 1.64864l-46.1824 426.24 54.71232-56.99584c16.0768-16.09728 37.13024-24.84224 59.48416-24.84224 22.34368 0 43.38688 8.74496 59.25888 24.61696 32.84992 32.83968 33.00352 86.15936 0.31744 118.8352l0 0c0.03072 0-53.31968 59.55584-129.51552 135.76192l-12.52352 12.56448C647.0656 908.82048 584.72448 971.52 459.8784 971.52zM181.71904 296.61184c-7.5264 0-21.44256 12.27776-21.44256 29.77792 0 19.73248 13.96736 64.14336 28.75392 111.14496 16.67072 53.01248 35.56352 113.07008 44.42112 166.21568 1.93536 11.6224 3.72736 25.09824 5.6832 39.84384C254.8224 761.9584 278.528 940.8 459.8784 940.8c112.06656 0 167.46496-55.71584 237.59872-126.23872l12.58496-12.61568c75.6224-75.6224 128.4096-134.56384 128.93184-135.13728 21.28896-21.31968 21.13536-55.1424 0.26624-76.02176-10.06592-10.07616-23.40864-15.616-37.53984-15.616-14.14144 0-27.47392 5.53984-37.5296 15.616l-85.7088 89.30304c-4.54656 4.74112-11.61216 6.06208-17.57184 3.2768s-9.49248-9.04192-8.77568-15.57504l50.95424-470.17984c-0.32768-26.70592-17.09056-45.29152-41.00096-45.29152-18.10432 0-37.14048 5.65248-41.07264 47.5136-3.86048 41.22624-49.46944 278.12864-51.41504 288.2048-1.4848 7.70048-8.43776 12.84096-16.34304 12.40064-7.81312-0.63488-13.88544-7.0656-14.09024-14.8992l-9.34912-353.28c-0.01024-23.37792-17.6128-41.3696-40.07936-41.3696-21.97504 0-39.17824 17.99168-39.17824 40.96l0 322.56c0 7.97696-6.11328 14.6432-14.06976 15.3088-7.96672 0.65536-15.09376-4.87424-16.42496-12.73856 0 0-36.61824-215.552-42.73152-250.81856-3.45088-19.88608-13.71136-43.59168-42.96704-43.59168-9.04192 0-16.37376 3.10272-21.77024 9.20576-7.2192 8.17152-10.32192 21.32992-8.48896 36.08576 3.328 26.74688 29.10208 314.84928 30.19776 327.08608 0.67584 7.61856-4.34176 14.58176-11.78624 16.32256-7.35232 1.78176-15.03232-2.22208-17.8176-9.35936l-81.92-209.92C217.61024 318.7712 205.43488 296.61184 181.71904 296.61184z"  /></svg>
\ No newline at end of file
diff --git a/angular/src/assets/images/icons/icon-lefthand.svg b/angular/src/assets/images/icons/icon-lefthand.svg
new file mode 100644
index 0000000..417f032
--- /dev/null
+++ b/angular/src/assets/images/icons/icon-lefthand.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: #2ecc71;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M459.8784 971.52c-208.26112 0-236.19584-210.69824-251.19744-323.88096-1.90464-14.37696-3.64544-27.50464-5.5296-38.81984-8.50944-51.01568-27.05408-110.01856-43.42784-162.05824-16.85504-53.58592-30.16704-95.92832-30.16704-120.3712 0-34.63168 27.53536-60.49792 52.16256-60.49792 30.65856 0 56.05376 20.0192 69.67296 54.91712l42.61888 109.21984c-8.02816-88.7808-18.432-202.60864-20.38784-218.39872-2.95936-23.83872 2.7136-45.23008 15.95392-60.2112 11.1616-12.62592 27.07456-19.58912 44.78976-19.58912 38.35904 0 65.73056 25.81504 73.22624 69.04832 1.88416 10.79296 6.6048 38.42048 12.24704 71.59808L419.84 131.84c0-40.192 30.69952-71.68 69.89824-71.68 39.03488 0 70.78912 32.16384 70.78912 71.68l5.5296 208.9984c11.44832-62.14656 22.62016-125.26592 24.3712-143.872 6.144-65.57696 47.53408-75.3664 71.64928-75.3664 40.88832 0 71.72096 33.024 71.72096 76.8 0 0.55296-0.03072 1.10592-0.09216 1.64864l-46.1824 426.24 54.71232-56.99584c16.0768-16.09728 37.13024-24.84224 59.48416-24.84224 22.34368 0 43.38688 8.74496 59.25888 24.61696 32.84992 32.83968 33.00352 86.15936 0.31744 118.8352l0 0c0.03072 0-53.31968 59.55584-129.51552 135.76192l-12.52352 12.56448C647.0656 908.82048 584.72448 971.52 459.8784 971.52zM181.71904 296.61184c-7.5264 0-21.44256 12.27776-21.44256 29.77792 0 19.73248 13.96736 64.14336 28.75392 111.14496 16.67072 53.01248 35.56352 113.07008 44.42112 166.21568 1.93536 11.6224 3.72736 25.09824 5.6832 39.84384C254.8224 761.9584 278.528 940.8 459.8784 940.8c112.06656 0 167.46496-55.71584 237.59872-126.23872l12.58496-12.61568c75.6224-75.6224 128.4096-134.56384 128.93184-135.13728 21.28896-21.31968 21.13536-55.1424 0.26624-76.02176-10.06592-10.07616-23.40864-15.616-37.53984-15.616-14.14144 0-27.47392 5.53984-37.5296 15.616l-85.7088 89.30304c-4.54656 4.74112-11.61216 6.06208-17.57184 3.2768s-9.49248-9.04192-8.77568-15.57504l50.95424-470.17984c-0.32768-26.70592-17.09056-45.29152-41.00096-45.29152-18.10432 0-37.14048 5.65248-41.07264 47.5136-3.86048 41.22624-49.46944 278.12864-51.41504 288.2048-1.4848 7.70048-8.43776 12.84096-16.34304 12.40064-7.81312-0.63488-13.88544-7.0656-14.09024-14.8992l-9.34912-353.28c-0.01024-23.37792-17.6128-41.3696-40.07936-41.3696-21.97504 0-39.17824 17.99168-39.17824 40.96l0 322.56c0 7.97696-6.11328 14.6432-14.06976 15.3088-7.96672 0.65536-15.09376-4.87424-16.42496-12.73856 0 0-36.61824-215.552-42.73152-250.81856-3.45088-19.88608-13.71136-43.59168-42.96704-43.59168-9.04192 0-16.37376 3.10272-21.77024 9.20576-7.2192 8.17152-10.32192 21.32992-8.48896 36.08576 3.328 26.74688 29.10208 314.84928 30.19776 327.08608 0.67584 7.61856-4.34176 14.58176-11.78624 16.32256-7.35232 1.78176-15.03232-2.22208-17.8176-9.35936l-81.92-209.92C217.61024 318.7712 205.43488 296.61184 181.71904 296.61184z"  /></svg>
\ No newline at end of file
diff --git a/angular/src/assets/images/icons/icon-logout.svg b/angular/src/assets/images/icons/icon-logout.svg
new file mode 100644
index 0000000..88a0c91
Binary files /dev/null and b/angular/src/assets/images/icons/icon-logout.svg differ
diff --git a/angular/src/assets/images/icons/light-mode-toggle-icon.svg b/angular/src/assets/images/icons/light-mode-toggle-icon.svg
new file mode 100644
index 0000000..4fa0e4c
--- /dev/null
+++ b/angular/src/assets/images/icons/light-mode-toggle-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 256.04"><path d="M128.02 0h.18c22.03 0 42.83 5.66 61 15.6h210.38c30.89 0 59 12.65 79.38 33.04C499.35 68.99 512 97.1 512 128.02c0 30.92-12.66 59.03-33.02 79.4l-.42.38c-20.34 20.15-48.29 32.64-78.98 32.64H189.24c-18.17 9.93-38.98 15.6-61.04 15.6h-.18c-35.2 0-67.22-14.41-90.42-37.6C14.41 195.25 0 163.24 0 128.02s14.4-67.24 37.59-90.43l.91-.83C61.65 14.05 93.29 0 128.02 0zm-5.95 54.42c0-1.95.8-3.73 2.08-5 2.74-2.77 7.27-2.76 10.02-.01l.14.16a7.042 7.042 0 0 1 1.94 4.85v12.95c0 1.95-.8 3.73-2.08 5.01-2.75 2.75-7.27 2.75-10.02 0a7.084 7.084 0 0 1-2.08-5.01V54.42zm6.05 31.17c11.72 0 22.32 4.75 30 12.43 7.67 7.68 12.43 18.29 12.43 30 0 11.72-4.75 22.32-12.43 30s-18.28 12.43-30 12.43c-11.72 0-22.32-4.75-30.01-12.43-7.67-7.68-12.43-18.28-12.43-30 0-11.72 4.76-22.32 12.43-30 7.69-7.67 18.3-12.43 30.01-12.43zm-56.33-5.34a7.114 7.114 0 0 1-2.07-5.01c0-3.9 3.18-7.09 7.09-7.09 1.81 0 3.62.69 5 2.07l9.16 9.16a7.065 7.065 0 0 1 2.08 5.01c0 1.8-.7 3.62-2.08 5.01a7.057 7.057 0 0 1-5.01 2.08c-1.8 0-3.61-.7-5-2.07l-9.17-9.16zm-17.28 53.81c-1.95 0-3.73-.8-5-2.08-2.77-2.74-2.76-7.27-.01-10.01l.15-.14a7.04 7.04 0 0 1 4.86-1.94h12.94a7.082 7.082 0 0 1 7.09 7.09c0 1.95-.8 3.73-2.07 5.01a7.099 7.099 0 0 1-5.02 2.07H54.51zm25.82 50.28a7.049 7.049 0 0 1-5 2.07c-3.91 0-7.09-3.16-7.09-7.08 0-1.81.68-3.62 2.07-5.01l9.31-9.29a7.02 7.02 0 0 1 4.86-1.94 7.09 7.09 0 0 1 7.09 7.09c0 1.79-.69 3.6-2.08 4.99l-9.16 9.17zm53.82 17.29c0 1.94-.8 3.73-2.08 5-2.74 2.76-7.27 2.75-10.02 0l-.13-.15a7.033 7.033 0 0 1-1.94-4.85v-12.95c0-1.96.8-3.73 2.07-5.01 2.76-2.75 7.27-2.75 10.03 0a7.1 7.1 0 0 1 2.07 5.01v12.95zm50.28-25.83a7.055 7.055 0 0 1 2.07 5.01c0 3.89-3.18 7.09-7.08 7.09-1.81 0-3.63-.69-5.01-2.07l-9.16-9.16a7.095 7.095 0 0 1-2.07-5.02c0-3.9 3.18-7.09 7.08-7.09 1.8 0 3.61.7 5 2.08l9.17 9.16zm17.29-53.82c1.93 0 3.73.81 5 2.08 2.76 2.75 2.75 7.27 0 10.02l-.15.14a7.098 7.098 0 0 1-4.85 1.94h-12.95c-1.96 0-3.74-.8-5.01-2.08-2.76-2.75-2.76-7.27 0-10.02a7.049 7.049 0 0 1 5.01-2.08h12.95zM175.89 71.7a7.074 7.074 0 0 1 5-2.07c3.9 0 7.1 3.19 7.1 7.09 0 1.81-.69 3.62-2.07 5l-9.32 9.31a7.12 7.12 0 0 1-4.86 1.93c-3.91 0-7.09-3.18-7.09-7.09 0-1.8.7-3.61 2.08-5l9.16-9.17zm34.17-41.87c2.96 2.47 5.81 5.07 8.53 7.8 23.22 23.15 37.63 55.17 37.63 90.39s-14.42 67.23-37.6 90.42a130.2 130.2 0 0 1-8.5 7.77h189.46c26.83 0 51.24-10.91 69.02-28.5l.32-.35c17.79-17.79 28.85-42.35 28.85-69.34 0-26.99-11.06-51.55-28.85-69.35-17.77-17.8-42.33-28.84-69.34-28.84H210.06zm-82.04-14.71h.18c62.09 0 112.89 50.81 112.89 112.9 0 62.1-50.86 112.9-112.89 112.9h-.18c-62.03 0-112.9-50.8-112.9-112.9 0-62.09 50.81-112.9 112.9-112.9z"/></svg>
\ No newline at end of file
diff --git a/angular/src/assets/scss/_basics.scss b/angular/src/assets/scss/_basics.scss
index 8151b9e..ce9bf8f 100644
--- a/angular/src/assets/scss/_basics.scss
+++ b/angular/src/assets/scss/_basics.scss
@@ -78,10 +78,73 @@ body {
   color: #fff;
 }
 
+.btn-logout {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  margin: 0 0 0 10px;
+  border: none;
+  background: transparent url("../images/icons/icon-logout.svg") no-repeat left top;
+  background-size: 100% auto;
+}
+
+.toggle-left-hand {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  margin: 0 0 0 10px;
+  border: none;
+  background: transparent url("../images/icons/icon-lefthand.svg") no-repeat left top;
+  background-size: 100% auto;
+
+  &.is-left {
+    background: transparent url("../images/icons/icon-lefthand-active.svg") no-repeat left top;
+    background-size: 100% auto;
+  }
+}
+
+.toggle-dark-mode {
+  width: 46px;
+  height: 23px;
+  padding: 0;
+  border: none;
+  margin: 0 0 0 10px;
+  background: transparent;
+
+  &.toggle-dark {
+    background: transparent url("../images/icons/light-mode-toggle-icon.svg") no-repeat left top;
+    background-size: 100% auto;
+  }
+
+  &.toggle-light {
+    background: transparent url("../images/icons/dark-mode-toggle-icon.svg") no-repeat left top;
+    background-size: 100% auto;
+  }
+}
+
+.btn-back {
+  width: 30px;
+  height: 30px;
+  background: transparent url("../images/icons/icon-back.svg") no-repeat left top;
+  background-size: 100% auto;
+  cursor: pointer;
+  @media only screen and (min-width: 1200px) {
+    position: relative;
+    z-index: 100;
+  }
+}
+
+.spt-headline {
+  @media only screen and (min-width: 1200px) {
+    margin: -32px 0 0 50px;
+  }
+}
+
 label,
 .form-label {
   font-size: 13px;
   margin-bottom: 5px !important;
+
   a {
     color: rgba(33, 37, 41);
   }
@@ -307,8 +370,10 @@ textarea#pasteCodes {
   margin-bottom: 3px;
   position: relative;
   cursor: pointer;
+
   &.small {
     padding: 6px 10px 6px 83px;
+
     &:before,
     &:after {
       top: 14px;
@@ -445,9 +510,11 @@ textarea#pasteCodes {
       }
     }
   }
+
   .mat-mdc-header-row {
     height: auto;
   }
+
   img {
     width: 30px;
   }
@@ -590,12 +657,14 @@ textarea#pasteCodes {
     width: 54px;
     height: 28px;
     margin: 0 !important;
+
     input {
       opacity: 0;
       width: 0;
       height: 0;
     }
   }
+
   .slider {
     position: absolute;
     cursor: pointer;
@@ -605,6 +674,7 @@ textarea#pasteCodes {
     bottom: 0;
     background-color: #ccc;
     transition: .4s;
+
     &:before {
       position: absolute;
       content: "";
@@ -616,15 +686,19 @@ textarea#pasteCodes {
       transition: .4s;
     }
   }
+
   input:checked + .slider {
     background-color: #2ecc71;
   }
+
   input:checked + .slider:before {
     transform: translateX(26px);
   }
+
   .slider.round {
     border-radius: 34px;
   }
+
   .slider.round:before {
     border-radius: 50%;
   }
@@ -654,6 +728,7 @@ input[readonly], input:disabled {
       font-size: 10px;
       line-height: 13px;
     }
+
     .lastname {
       top: 75%;
       font-size: 8px;
@@ -678,7 +753,7 @@ input[readonly], input:disabled {
     //transform: translate(-50%, -50%);
     right: 0;
     bottom: 0;
-    transform: translate(-10%,-46.3%);
+    transform: translate(-10%, -46.3%);
     width: 65%;
   }
 
@@ -747,11 +822,13 @@ input[readonly], input:disabled {
     &:first-child {
       border: none;
     }
+
     > div {
       display: flex;
       justify-content: flex-start;
       align-items: center;
       padding-left: 20px;
+
       div {
         &:first-child {
           min-width: 300px;
@@ -804,13 +881,16 @@ input[readonly], input:disabled {
   border: 1px solid #2b3b44;
   padding: 10px 0;
   max-height: 600px;
+
   ul {
     margin-right: 20px;
+
     li {
       border-bottom: 1px solid #eee;
       padding: 3px 0;
     }
   }
+
   p {
     margin-bottom: 0;
   }
diff --git a/angular/src/assets/scss/_dark.scss b/angular/src/assets/scss/_dark.scss
index ccec16d..eab5b4f 100644
--- a/angular/src/assets/scss/_dark.scss
+++ b/angular/src/assets/scss/_dark.scss
@@ -1,5 +1,4 @@
 .dark-mode {
-  .navbar-primary,
   .spt-main,
   .mat-mdc-table,
   .mat-elevation-z8 th, .mat-mdc-elevation-specific.mat-elevation-z8 th,
@@ -7,6 +6,10 @@
     background: #2b3a44 !important;
   }
 
+  .navbar-primary {
+    background: #6a7277 !important;
+  }
+
   h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1,
   .mat-mdc-select,
   .mat-mdc-select-arrow svg,
@@ -32,31 +35,49 @@
     fill: #fff;
   }
 
-  .toggle:before, .toggle:after {
+  .toggle:before, .toggle:after,
+  #btn-sidebar::after {
     background: #fff;
   }
+
   .spt-dl dt,
   .spt-dl dd,
   .mat-mdc-cell,
-  .spt-container .card:not(.contacts .card, .tasks .card, .post .card) {
+  .spt-container .card:not(.contacts .card, .tasks .card, .post .card),
+  #btn-sidebar::before, #btn-sidebar::after,
+  .mat-elevation-z8 th, .mat-mdc-elevation-specific.mat-elevation-z8 th {
     border-color: #fff;
   }
+
   .mat-mdc-icon-button[disabled] .mat-mdc-paginator-icon {
     fill: #3e525f;
   }
+
   .mat-mdc-tab-list .mat-ripple {
     background: #4e697b;
   }
+
   .mat-mdc-table .mat-mdc-row:hover .mdc-data-table__cell,
   .toggle,
   .mat-mdc-tab-list .mdc-tab-indicator--active .mat-ripple {
     background: #3e525f;
   }
+
   .spt-icon-details {
     border-color: #3e525f;
   }
+
   .form-control,
   select {
     background: #1d262d !important;
   }
+
+  .modal-content {
+    background-color: #6c757d;
+  }
+
+  .btn-back {
+    background-image: url("../images/icons/icon-back-white.svg");
+    background-size: 100% auto;
+  }
 }
\ No newline at end of file