diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
index 3f31c7f61..ffdc7f950 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -33,6 +33,7 @@ import { UsersStatsComponent } from './components/users-stats/users-stats.compon
 import { ConfirmDeleteUsersDialogComponent } from './dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component';
 import { FileAttributesCsvImportDialogComponent } from './dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component';
 import { ActiveFieldsListingComponent } from './dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component';
+import { SideNavComponent } from './components/side-nav/side-nav.component';
 
 const dialogs = [
     AddEditRuleSetDialogComponent,
@@ -69,6 +70,7 @@ const components = [
     ComboSeriesVerticalComponent,
     UsersStatsComponent,
     ActiveFieldsListingComponent,
+    SideNavComponent,
 
     ...dialogs,
     ...screens
diff --git a/apps/red-ui/src/app/modules/admin/components/breadcrumbs/admin-breadcrumbs.component.html b/apps/red-ui/src/app/modules/admin/components/breadcrumbs/admin-breadcrumbs.component.html
index 0031814ab..0d36682a3 100644
--- a/apps/red-ui/src/app/modules/admin/components/breadcrumbs/admin-breadcrumbs.component.html
+++ b/apps/red-ui/src/app/modules/admin/components/breadcrumbs/admin-breadcrumbs.component.html
@@ -1,57 +1,5 @@
 <div class="menu flex-2 visible-lg breadcrumbs-container">
-    <a
-        class="breadcrumb"
-        [routerLink]="'/main/admin/project-templates'"
-        [routerLinkActiveOptions]="{ exact: true }"
-        routerLinkActive="active"
-        translate="project-templates"
-        *ngIf="root || !!appStateService.activeRuleSet"
-    ></a>
-
-    <a
-        class="breadcrumb"
-        [routerLink]="'/main/admin/digital-signature'"
-        [routerLinkActiveOptions]="{ exact: true }"
-        routerLinkActive="active"
-        translate="digital-signature"
-        *ngIf="root && permissionService.isAdmin()"
-    ></a>
-
-    <a
-        class="breadcrumb"
-        [routerLink]="'/main/admin/license-info'"
-        [routerLinkActiveOptions]="{ exact: true }"
-        routerLinkActive="active"
-        translate="license-information"
-        *ngIf="root && permissionService.isAdmin()"
-    ></a>
-
-    <a
-        class="breadcrumb"
-        [routerLink]="'/main/admin/audit'"
-        [routerLinkActiveOptions]="{ exact: true }"
-        routerLinkActive="active"
-        translate="audit"
-        *ngIf="root && permissionService.isAdmin()"
-    ></a>
-
-    <a
-        class="breadcrumb"
-        [routerLink]="'/main/admin/users'"
-        [routerLinkActiveOptions]="{ exact: true }"
-        routerLinkActive="active"
-        translate="user-management"
-        *ngIf="root && permissionService.canManageUsers()"
-    ></a>
-
-    <a
-        class="breadcrumb"
-        [routerLink]="'/main/admin/smtp-config'"
-        [routerLinkActiveOptions]="{ exact: true }"
-        routerLinkActive="active"
-        translate="configurations"
-        *ngIf="root && permissionService.isAdmin()"
-    ></a>
+    <a class="breadcrumb" [routerLink]="'/main/admin/project-templates'" translate="project-templates" *ngIf="root || !!appStateService.activeRuleSet"></a>
 
     <ng-container *ngIf="appStateService.activeRuleSet">
         <mat-icon svgIcon="red:arrow-right"></mat-icon>
diff --git a/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.html b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.html
new file mode 100644
index 000000000..3bccf3166
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.html
@@ -0,0 +1,17 @@
+<div class="all-caps-label" [translate]="type"></div>
+
+<ng-container *ngFor="let item of items[type]">
+    <div
+        class="item"
+        *ngIf="
+            (!item.onlyAdmin || permissionsService.isAdmin()) &&
+            (!item.onlyDevMode || userPreferenceService.areDevFeaturesEnabled) &&
+            (!item.userManagerOnly || permissionsService.canManageUsers())
+        "
+        [routerLink]="'../' + item.screen"
+        [routerLinkActiveOptions]="{ exact: true }"
+        routerLinkActive="active"
+    >
+        {{ item.label || item.screen | translate }}
+    </div>
+</ng-container>
diff --git a/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.scss b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.scss
new file mode 100644
index 000000000..fb3cba8fe
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.scss
@@ -0,0 +1,32 @@
+@import '../../../../../assets/styles/red-variables';
+
+:host {
+    display: block;
+    min-width: 200px;
+    background-color: $grey-2;
+    border-right: 1px solid $separator;
+    box-sizing: border-box;
+    padding: 8px;
+
+    .all-caps-label {
+        padding: 16px;
+    }
+
+    .item {
+        margin-bottom: 4px;
+        border-radius: 20px;
+        padding: 9px 16px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        font-weight: 500;
+
+        &:not(.active):hover {
+            background-color: rgba($primary, 0.2);
+        }
+
+        &.active {
+            background-color: $primary;
+            color: $white;
+        }
+    }
+}
diff --git a/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.ts b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.ts
new file mode 100644
index 000000000..09d3ef4d3
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.ts
@@ -0,0 +1,45 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { PermissionsService } from '../../../../services/permissions.service';
+import { Router } from '@angular/router';
+import { UserPreferenceService } from '../../../../services/user-preference.service';
+
+@Component({
+    selector: 'redaction-side-nav',
+    templateUrl: './side-nav.component.html',
+    styleUrls: ['./side-nav.component.scss']
+})
+export class SideNavComponent implements OnInit {
+    @Input() type: 'settings' | 'project-templates';
+
+    public items: { [key: string]: { screen: string; onlyDevMode?: boolean; onlyAdmin?: boolean; userManagerOnly?: boolean; label?: string }[] } = {
+        settings: [
+            { screen: 'project-templates' },
+            { screen: 'digital-signature', onlyAdmin: true },
+            { screen: 'license-info', label: 'license-information', onlyAdmin: true },
+            { screen: 'audit', onlyAdmin: true },
+            { screen: 'users', label: 'user-management', userManagerOnly: true },
+            { screen: 'smtp-config', label: 'configurations', onlyAdmin: true }
+        ],
+        'project-templates': [
+            { screen: 'dictionaries' },
+            { screen: 'rules', onlyDevMode: true, label: 'rule-editor' },
+            { screen: 'default-colors' },
+            { screen: 'watermark' },
+            { screen: 'file-attributes', onlyAdmin: true }
+        ]
+    };
+
+    constructor(
+        private readonly _router: Router,
+        public readonly userPreferenceService: UserPreferenceService,
+        public readonly permissionsService: PermissionsService
+    ) {}
+
+    ngOnInit(): void {}
+
+    //
+    // public navigate(screen: string) {
+    //     if (this.type === '')
+    //         this._router.navigate(['main/admin/project-templates/' + this._appStateService.activeRuleSetId + '/' + screen]);
+    // }
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
index 44dd56a15..22c86f093 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@@ -2,8 +2,6 @@
     <div class="page-header">
         <redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
 
-        <redaction-tabs [screen]="'dictionaries'"></redaction-tabs>
-
         <div class="flex-1 actions">
             <redaction-rule-set-actions> </redaction-rule-set-actions>
 
@@ -12,6 +10,10 @@
     </div>
 
     <div class="red-content-inner">
+        <div class="overlay-shadow"></div>
+
+        <redaction-side-nav type="project-templates"></redaction-side-nav>
+
         <div class="content-container">
             <div class="header-item">
                 <div class="select-all-container">
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
index b122fc718..cfa528f97 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
@@ -15,16 +15,21 @@
     </div>
 
     <div class="red-content-inner">
+        <div class="overlay-shadow"></div>
+
+        <redaction-side-nav type="settings"></redaction-side-nav>
+
         <div class="content-container">
             <div class="content-container-content">
                 <form [formGroup]="digitalSignatureForm" (keyup)="formChanged()" autocomplete="off" *ngIf="digitalSignatureForm">
                     <input #fileInput (change)="fileChanged($event, fileInput)" hidden class="file-upload-input" type="file" />
 
-                    <div *ngIf="!hasDigitalSignatureSet" class="no-certificate">
-                        <div class="heading-l" translate="digital-signature-screen.no-key"></div>
-                        <redaction-icon-button (action)="fileInput.click()" icon="red:upload" text="digital-signature-screen.upload-key" type="primary">
-                        </redaction-icon-button>
-                    </div>
+                    <redaction-empty-state
+                        *ngIf="!hasDigitalSignatureSet"
+                        screen="digital-signature-screen"
+                        buttonIcon="red:upload"
+                        (action)="fileInput.click()"
+                    ></redaction-empty-state>
 
                     <div class="red-input-group required w-300" [class.hidden]="!hasDigitalSignatureSet">
                         <label translate="digital-signature-screen.certificate-name.label"></label>
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss
index 70c529036..17eb5a001 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss
@@ -1,30 +1,11 @@
-@import '../../../../../assets/styles/red-mixins';
-@import '../../../../../assets/styles/red-variables';
-
 .content-container {
-    width: 100vw;
-    @include inset-shadow;
+    width: 100%;
 
     .content-container-content {
         margin: 20px;
     }
 }
 
-.no-certificate {
-    position: absolute;
-    width: 100%;
-    top: 0;
-    bottom: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-
-    redaction-icon-button {
-        margin-top: 12px;
-    }
-}
-
 form {
     display: flex;
     flex-direction: column;
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
index f84a78b72..76e695513 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
@@ -16,6 +16,10 @@
     </div>
 
     <div class="red-content-inner">
+        <div class="overlay-shadow"></div>
+
+        <redaction-side-nav type="settings"></redaction-side-nav>
+
         <div class="content-container">
             <div class="grid-container">
                 <div class="row">
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
index afa5c1d69..de4acc112 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
@@ -2,8 +2,7 @@
 @import '../../../../../assets/styles/red-variables';
 
 .content-container {
-    width: 100vw;
-    @include inset-shadow;
+    width: 100%;
     overflow: auto;
     @include scroll-bar;
 
@@ -12,7 +11,7 @@
     align-items: center;
 
     .grid-container {
-        width: calc(100vw - 40px);
+        width: calc(100vw - 240px);
         display: grid;
         grid-template-columns: 1fr 2fr;
         margin: 20px 20px 50px 20px;
diff --git a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
index e9cf7fcb8..0946cb4f1 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
@@ -1,20 +1,13 @@
 <section>
-    <div class="page-header">
-        <redaction-admin-breadcrumbs class="flex-1" [root]="true"></redaction-admin-breadcrumbs>
+    <div class="overlay-shadow"></div>
 
-        <div class="actions">
-            <redaction-search-input [form]="searchForm" [placeholder]="'project-templates-listing.search'"></redaction-search-input>
+    <redaction-side-nav type="settings"></redaction-side-nav>
 
-            <redaction-icon-button
-                *ngIf="permissionsService.isAdmin() && userPreferenceService.areDevFeaturesEnabled"
-                icon="red:plus"
-                (action)="openAddRuleSetDialog()"
-                text="project-templates-listing.add-new"
-                type="primary"
-            ></redaction-icon-button>
+    <div>
+        <div class="page-header">
+            <redaction-admin-breadcrumbs class="flex-1" [root]="true"></redaction-admin-breadcrumbs>
 
             <redaction-circle-button
-                class="ml-6"
                 *ngIf="permissionsService.isUser()"
                 [routerLink]="['/main/projects/']"
                 tooltip="common.close"
@@ -22,102 +15,114 @@
                 icon="red:close"
             ></redaction-circle-button>
         </div>
-    </div>
 
-    <div class="red-content-inner">
-        <div class="content-container">
-            <div class="header-item">
-                <div class="select-all-container">
-                    <redaction-round-checkbox
-                        (click)="toggleSelectAll()"
-                        [active]="areAllEntitiesSelected"
-                        [indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected"
-                    ></redaction-round-checkbox>
+        <div class="red-content-inner">
+            <div class="content-container">
+                <div class="header-item">
+                    <div class="select-all-container">
+                        <redaction-round-checkbox
+                            (click)="toggleSelectAll()"
+                            [active]="areAllEntitiesSelected"
+                            [indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected"
+                        ></redaction-round-checkbox>
+                    </div>
+
+                    <span class="all-caps-label">
+                        {{ 'project-templates-listing.table-header.title' | translate: { length: displayedEntities.length } }}
+                    </span>
+
+                    <div class="actions flex-1">
+                        <redaction-search-input [form]="searchForm" [placeholder]="'project-templates-listing.search'"></redaction-search-input>
+
+                        <redaction-icon-button
+                            *ngIf="permissionsService.isAdmin() && userPreferenceService.areDevFeaturesEnabled"
+                            icon="red:plus"
+                            (action)="openAddRuleSetDialog()"
+                            text="project-templates-listing.add-new"
+                            type="primary"
+                        ></redaction-icon-button>
+                    </div>
                 </div>
 
-                <span class="all-caps-label">
-                    {{ 'project-templates-listing.table-header.title' | translate: { length: displayedEntities.length } }}
-                </span>
-            </div>
+                <div class="table-header" redactionSyncWidth="table-item" [class.no-data]="!allEntities.length">
+                    <div class="select-oval-placeholder"></div>
 
-            <div class="table-header" redactionSyncWidth="table-item" [class.no-data]="!allEntities.length">
-                <div class="select-oval-placeholder"></div>
-
-                <redaction-table-col-name
-                    label="project-templates-listing.table-col-names.name"
-                    column="name"
-                    (toggleSort)="toggleSort($event)"
-                    [activeSortingOption]="sortingOption"
-                    [withSort]="true"
-                ></redaction-table-col-name>
-                <redaction-table-col-name label="project-templates-listing.table-col-names.created-by" class="user-column"></redaction-table-col-name>
-                <redaction-table-col-name
-                    label="project-templates-listing.table-col-names.created-on"
-                    column="dateAdded"
-                    (toggleSort)="toggleSort($event)"
-                    [activeSortingOption]="sortingOption"
-                    [withSort]="true"
-                ></redaction-table-col-name>
-                <redaction-table-col-name
-                    label="project-templates-listing.table-col-names.modified-on"
-                    column="dateModified"
-                    (toggleSort)="toggleSort($event)"
-                    [activeSortingOption]="sortingOption"
-                    [withSort]="true"
-                ></redaction-table-col-name>
-                <div class="scrollbar-placeholder"></div>
-            </div>
-
-            <redaction-empty-state *ngIf="!allEntities.length" icon="red:template" screen="project-templates-listing"></redaction-empty-state>
-
-            <redaction-empty-state
-                *ngIf="allEntities.length && !displayedEntities.length"
-                screen="project-templates-listing"
-                type="no-match"
-            ></redaction-empty-state>
-
-            <cdk-virtual-scroll-viewport [itemSize]="100" redactionHasScrollbar>
-                <div
-                    class="table-item pointer"
-                    *cdkVirtualFor="let ruleSet of displayedEntities | sortBy: sortingOption.order:sortingOption.column"
-                    [routerLink]="[ruleSet.ruleSetId, 'dictionaries']"
-                >
-                    <div class="selection-column" (click)="toggleEntitySelected($event, ruleSet)">
-                        <redaction-round-checkbox [active]="isEntitySelected(ruleSet)"></redaction-round-checkbox>
-                    </div>
-
-                    <div>
-                        <div class="table-item-title heading">
-                            {{ ruleSet.name }}
-                        </div>
-                        <div class="small-label stats-subtitle">
-                            <div>
-                                <mat-icon svgIcon="red:dictionary"></mat-icon>
-                                {{ 'project-templates-listing.dictionaries' | translate: { length: ruleSet.dictionariesCount } }}
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="user-column">
-                        <redaction-initials-avatar [userId]="ruleSet.createdBy" [withName]="true"> </redaction-initials-avatar>
-                    </div>
-                    <div class="small-label">
-                        {{ ruleSet.dateAdded | date: 'd MMM. yyyy' }}
-                    </div>
-                    <div>
-                        <div class="small-label">
-                            {{ ruleSet.dateModified | date: 'd MMM. yyyy' }}
-                        </div>
-
-                        <redaction-rule-set-actions
-                            class="actions-container"
-                            [ruleSetId]="ruleSet.ruleSetId"
-                            (loadRuleSetsData)="loadRuleSetsData()"
-                        ></redaction-rule-set-actions>
-                    </div>
+                    <redaction-table-col-name
+                        label="project-templates-listing.table-col-names.name"
+                        column="name"
+                        (toggleSort)="toggleSort($event)"
+                        [activeSortingOption]="sortingOption"
+                        [withSort]="true"
+                    ></redaction-table-col-name>
+                    <redaction-table-col-name label="project-templates-listing.table-col-names.created-by" class="user-column"></redaction-table-col-name>
+                    <redaction-table-col-name
+                        label="project-templates-listing.table-col-names.created-on"
+                        column="dateAdded"
+                        (toggleSort)="toggleSort($event)"
+                        [activeSortingOption]="sortingOption"
+                        [withSort]="true"
+                    ></redaction-table-col-name>
+                    <redaction-table-col-name
+                        label="project-templates-listing.table-col-names.modified-on"
+                        column="dateModified"
+                        (toggleSort)="toggleSort($event)"
+                        [activeSortingOption]="sortingOption"
+                        [withSort]="true"
+                    ></redaction-table-col-name>
                     <div class="scrollbar-placeholder"></div>
                 </div>
-            </cdk-virtual-scroll-viewport>
+
+                <redaction-empty-state *ngIf="!allEntities.length" icon="red:template" screen="project-templates-listing"></redaction-empty-state>
+
+                <redaction-empty-state
+                    *ngIf="allEntities.length && !displayedEntities.length"
+                    screen="project-templates-listing"
+                    type="no-match"
+                ></redaction-empty-state>
+
+                <cdk-virtual-scroll-viewport [itemSize]="100" redactionHasScrollbar>
+                    <div
+                        class="table-item pointer"
+                        *cdkVirtualFor="let ruleSet of displayedEntities | sortBy: sortingOption.order:sortingOption.column"
+                        [routerLink]="[ruleSet.ruleSetId, 'dictionaries']"
+                    >
+                        <div class="selection-column" (click)="toggleEntitySelected($event, ruleSet)">
+                            <redaction-round-checkbox [active]="isEntitySelected(ruleSet)"></redaction-round-checkbox>
+                        </div>
+
+                        <div>
+                            <div class="table-item-title heading">
+                                {{ ruleSet.name }}
+                            </div>
+                            <div class="small-label stats-subtitle">
+                                <div>
+                                    <mat-icon svgIcon="red:dictionary"></mat-icon>
+                                    {{ 'project-templates-listing.dictionaries' | translate: { length: ruleSet.dictionariesCount } }}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="user-column">
+                            <redaction-initials-avatar [userId]="ruleSet.createdBy" [withName]="true"> </redaction-initials-avatar>
+                        </div>
+                        <div class="small-label">
+                            {{ ruleSet.dateAdded | date: 'd MMM. yyyy' }}
+                        </div>
+                        <div>
+                            <div class="small-label">
+                                {{ ruleSet.dateModified | date: 'd MMM. yyyy' }}
+                            </div>
+
+                            <redaction-rule-set-actions
+                                class="actions-container"
+                                [ruleSetId]="ruleSet.ruleSetId"
+                                (loadRuleSetsData)="loadRuleSetsData()"
+                            ></redaction-rule-set-actions>
+                        </div>
+                        <div class="scrollbar-placeholder"></div>
+                    </div>
+                </cdk-virtual-scroll-viewport>
+            </div>
         </div>
     </div>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss
index 0e4487311..50a7dc267 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss
@@ -1,6 +1,19 @@
 @import '../../../../../assets/styles/red-variables';
 @import '../../../../../assets/styles/red-mixins';
 
+section {
+    display: flex;
+
+    .page-header,
+    .red-content-inner {
+        width: calc(100vw - 200px);
+    }
+
+    redaction-side-nav {
+        height: calc(100vh - 61px);
+    }
+}
+
 .header-item {
     padding: 0 24px 0 10px;
 }
diff --git a/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.scss b/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.scss
index 3e0d3e4c4..2b1362ac9 100644
--- a/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.scss
+++ b/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.scss
@@ -8,7 +8,6 @@
     background: white;
     z-index: 1;
     width: 100%;
-    @include inset-shadow;
 }
 
 .right-content {
diff --git a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
index bff887116..e7e99efcb 100644
--- a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
@@ -190,9 +190,10 @@
         </div>
     </div>
 
+    <div class="overlay-shadow"></div>
+
     <div class="red-content-inner">
         <div class="content-container">
-            <div class="overlay-shadow"></div>
             <redaction-pdf-viewer
                 *ngIf="displayPDFViewer"
                 (keyUp)="handleKeyEvent($event)"
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html
index fadb6c9a2..6e8669893 100644
--- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html
@@ -44,6 +44,8 @@
         ></redaction-icon-button>
     </div>
 
+    <div class="overlay-shadow"></div>
+
     <div class="red-content-inner">
         <div class="content-container">
             <div class="header-item">
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
index 587c1606f..6054f7350 100644
--- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
@@ -81,6 +81,9 @@
             ></redaction-circle-button>
         </div>
     </div>
+
+    <div class="overlay-shadow"></div>
+
     <div class="red-content-inner">
         <div class="content-container" [class.extended]="collapsedDetails">
             <div class="header-item">
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
index 5a1a0c9e5..9367ebd8b 100644
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
     selector: 'redaction-empty-state',
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index f798c728c..117d0582a 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -750,6 +750,7 @@
     },
     "digital-signature": "Digital Signature",
     "project-templates": "Project Templates",
+    "settings": "Settings",
     "project-templates-listing": {
         "table-header": {
             "title": "{{length}} project templates"
@@ -1126,8 +1127,10 @@
     },
     "digital-signature-screen": {
         "title": "Digital Signature",
-        "no-key": "No Digital Signature certificate is configured. For signing redacted documents please upload a PCKS.12 certificate.",
-        "upload-key": "Upload Certificate",
+        "no-data": {
+            "title": "No Digital Signature certificate is configured. For signing redacted documents please upload a PCKS.12 certificate.",
+            "action": "Upload Certificate"
+        },
         "reason": {
             "label": "Reason",
             "placeholder": "Reason"
diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss
index ae670d201..10aa722de 100644
--- a/apps/red-ui/src/assets/styles/red-components.scss
+++ b/apps/red-ui/src/assets/styles/red-components.scss
@@ -1,4 +1,5 @@
 @import 'red-variables';
+@import 'red-mixins';
 
 .oval,
 .square {
@@ -179,3 +180,11 @@
     stroke: $red-1;
     background-color: $red-1;
 }
+
+.overlay-shadow {
+    @include inset-shadow;
+    position: fixed;
+    width: 100%;
+    height: 4px;
+    z-index: 2;
+}
diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss
index 768ef2948..8865ab11c 100644
--- a/apps/red-ui/src/assets/styles/red-grid.scss
+++ b/apps/red-ui/src/assets/styles/red-grid.scss
@@ -8,9 +8,9 @@
     display: flex;
     align-items: center;
     z-index: 1;
+    border-top: 1px solid $separator;
     border-bottom: 1px solid $separator;
     box-sizing: border-box;
-    @include inset-shadow;
 
     > *:not(:last-child) {
         margin-right: 10px;
@@ -19,9 +19,10 @@
     .actions {
         display: flex;
         align-items: center;
+        justify-content: flex-end;
 
         > *:not(:last-child) {
-            margin-right: 25px;
+            margin-right: 16px;
         }
     }
 }
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index 6007ddc1f..33818c533 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -76,20 +76,11 @@ body {
     position: absolute;
     bottom: 0;
     width: 100%;
-    height: calc(100% - 110px);
-    z-index: 1;
+    height: calc(100% - 112px);
     transition: height ease-in-out 0.2s;
 }
 
 .content-container {
-    .overlay-shadow {
-        @include inset-shadow;
-        position: fixed;
-        width: 100%;
-        height: 4px;
-        z-index: 1;
-    }
-
     overflow: hidden;
     transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;
     position: relative;
@@ -142,9 +133,7 @@ body {
     border-left: 1px solid $grey-4;
     box-sizing: border-box;
     background: $white;
-    z-index: 1;
     overflow: hidden;
-    @include inset-shadow;
     transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;
 
     &:hover {