diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 54ed157a4..7591df031 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -17,6 +17,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { MatMenuModule } from '@angular/material/menu';
 import { languageInitializer } from './i18n/language.initializer';
 import { LanguageService } from './i18n/language.service';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import { MatIconModule } from '@angular/material/icon';
 import { IconsModule } from './icons/icons.module';
 import { AddEditProjectDialogComponent } from './dialogs/add-edit-project-dialog/add-edit-project-dialog.component';
@@ -55,7 +56,7 @@ import { RedRoleGuard } from './auth/red-role.guard';
 import { MatListModule } from '@angular/material/list';
 import { AssignOwnerDialogComponent } from './dialogs/assign-owner-dialog/assign-owner-dialog.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatNativeDateModule } from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
 import { MatInputModule } from '@angular/material/input';
 import { HumanizePipe } from './utils/humanize.pipe';
 import { CommentsComponent } from './components/comments/comments.component';
@@ -315,6 +316,15 @@ const matImports = [
             multi: true,
             useFactory: languageInitializer,
             deps: [LanguageService]
+        },
+        { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
+        {
+            provide: MAT_DATE_FORMATS,
+            useValue: {
+                display: {
+                    dateInput: 'DD/MM/YY'
+                }
+            }
         }
     ],
     bootstrap: [AppComponent]
diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
index dc429e50f..b6f760eec 100644
--- a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
+++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
@@ -1,4 +1,4 @@
-<button mat-button [class.overlay]="showDot" [class.primary]="primary" (click)="action.emit($event)" [class.link-button]="linkButton" [disabled]="disabled">
+<button mat-button [class.overlay]="showDot" [class.primary]="primary" (click)="action.emit($event)" [class.show-bg]="type === 'show-bg'" [disabled]="disabled">
     <mat-icon [svgIcon]="icon" *ngIf="icon"></mat-icon>
     <span [translate]="text"></span>
 </button>
diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss
index 92a3847fd..8f44b4566 100644
--- a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss
+++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss
@@ -3,17 +3,11 @@
 button {
     padding: 0 14px 0 10px;
 
+    &.show-bg {
+        background-color: $grey-6;
+    }
+
     mat-icon {
         width: 14px;
     }
 }
-
-.link-button {
-    text-transform: uppercase;
-    opacity: 0.7;
-    color: $accent;
-    font-size: 11px;
-    letter-spacing: 0;
-    line-height: 14px;
-    font-weight: 600 !important;
-}
diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
index 46598d416..acbc8958b 100644
--- a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
+++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
@@ -10,8 +10,8 @@ export class IconButtonComponent implements OnInit {
     @Input() text: string;
     @Input() showDot = false;
     @Input() primary = false;
-    @Input() linkButton = false;
     @Input() disabled = false;
+    @Input() type: 'default' | 'show-bg' = 'default';
     @Output() action = new EventEmitter<any>();
 
     constructor() {}
diff --git a/apps/red-ui/src/app/components/comments/comments.component.html b/apps/red-ui/src/app/components/comments/comments.component.html
index 6759f8fe0..12854b686 100644
--- a/apps/red-ui/src/app/components/comments/comments.component.html
+++ b/apps/red-ui/src/app/components/comments/comments.component.html
@@ -36,6 +36,6 @@
 
     <div *ngIf="addingComment" class="comment-actions-container">
         <redaction-circle-button (action)="addComment()" [disabled]="!commentForm.value.comment" icon="red:check-alt" type="primary"></redaction-circle-button>
-        <div (click)="toggleAddingComment($event)" class="all-caps-label" translate="comments.cancel"></div>
+        <div (click)="toggleAddingComment($event)" class="all-caps-label cancel" translate="comments.cancel"></div>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
index 0fce1b796..71df39fbd 100644
--- a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
@@ -13,9 +13,9 @@
 
             <div class="red-input-group" *ngIf="!project">
                 <mat-form-field floatLabel="always">
-                    <mat-label>{{ 'project-listing.add-edit-dialog.form.rule-set' | translate }}</mat-label>
-                    <mat-select value="EFSA 1 (Authors by vertebrates)" style="width: 100%;">
-                        <mat-option *ngFor="let type of ['EFSA 1 (Authors by vertebrates)']" [value]="type">
+                    <mat-label>{{ 'project-listing.add-edit-dialog.form.template' | translate }}</mat-label>
+                    <mat-select value="EFSA 1 (Vertebrate Authors)" style="width: 100%;">
+                        <mat-option *ngFor="let type of ['EFSA 1 (Vertebrate Authors)']" [value]="type">
                             {{ type }}
                         </mat-option>
                     </mat-select>
@@ -27,32 +27,38 @@
                 <textarea formControlName="description" name="description" type="text" rows="5"></textarea>
             </div>
 
-            <mat-form-field>
-                <mat-label>{{ 'project-listing.add-edit-dialog.form.due-date' | translate }}</mat-label>
-                <input matInput [matDatepicker]="picker" formControlName="dueDate" />
-                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-                <mat-datepicker #picker></mat-datepicker>
-            </mat-form-field>
+            <div class="due-date">
+                <mat-checkbox [checked]="hasDueDate" (change)="hasDueDate = !hasDueDate" class="filter-menu-checkbox" color="primary">
+                    {{ 'project-listing.add-edit-dialog.form.due-date' | translate }}
+                </mat-checkbox>
+
+                <div class="red-input-group datepicker-wrapper" *ngIf="hasDueDate">
+                    <input placeholder="dd/mm/yy" [matDatepicker]="picker" formControlName="dueDate" />
+                    <mat-datepicker-toggle matSuffix [for]="picker">
+                        <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
+                    </mat-datepicker-toggle>
+                    <mat-datepicker #picker></mat-datepicker>
+                </div>
+            </div>
         </div>
 
         <div class="dialog-actions">
             <button
-                [disabled]="projectForm.invalid"
+                [disabled]="disabled || !changed"
                 color="primary"
                 mat-flat-button
                 translate="project-listing.add-edit-dialog.actions.save"
                 type="submit"
             ></button>
 
-            <button
-                [disabled]="projectForm.invalid"
-                (click)="saveProjectAndAddMembers()"
+            <redaction-icon-button
+                [disabled]="disabled || !changed"
+                (action)="saveProjectAndAddMembers()"
                 *ngIf="!project?.projectId"
-                color="primary"
-                mat-flat-button
-                translate="project-listing.add-edit-dialog.actions.save-and-add-members"
-                type="button"
-            ></button>
+                text="project-listing.add-edit-dialog.actions.save-and-add-members"
+                icon="red:assign"
+                type="show-bg"
+            ></redaction-icon-button>
         </div>
     </form>
 
diff --git a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.scss b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.scss
index e69de29bb..67ea93a7d 100644
--- a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.scss
+++ b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.scss
@@ -0,0 +1,14 @@
+@import '../../../assets/styles/red-variables';
+
+.due-date {
+    margin-top: 16px;
+    min-height: 34px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    mat-checkbox {
+        width: fit-content;
+        margin-right: 16px;
+    }
+}
diff --git a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.ts b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.ts
index 9398c607c..f5e3ab52e 100644
--- a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.ts
+++ b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.ts
@@ -1,31 +1,61 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Project } from '@redaction/red-ui-http';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AppStateService } from '../../state/app-state.service';
 import { ProjectWrapper } from '../../state/model/project.wrapper';
+import * as moment from 'moment';
 
 @Component({
     selector: 'redaction-add-edit-project-dialog',
     templateUrl: './add-edit-project-dialog.component.html',
     styleUrls: ['./add-edit-project-dialog.component.scss']
 })
-export class AddEditProjectDialogComponent implements OnInit {
-    projectForm: FormGroup;
+export class AddEditProjectDialogComponent {
+    public projectForm: FormGroup;
+    public hasDueDate = true;
 
     constructor(
         private readonly _appStateService: AppStateService,
         private readonly _formBuilder: FormBuilder,
         public dialogRef: MatDialogRef<AddEditProjectDialogComponent>,
         @Inject(MAT_DIALOG_DATA) public project: ProjectWrapper
-    ) {}
-
-    ngOnInit(): void {
+    ) {
         this.projectForm = this._formBuilder.group({
             projectName: [this.project?.projectName, Validators.required],
             description: [this.project?.description],
             dueDate: [this.project?.dueDate]
         });
+        this.hasDueDate = !!this.project?.dueDate;
+    }
+
+    public get changed() {
+        if (!this.project) {
+            return true;
+        }
+
+        for (const key of Object.keys(this.projectForm.getRawValue())) {
+            if (key === 'dueDate') {
+                if (this.hasDueDate !== !!this.project.dueDate) {
+                    return true;
+                }
+                if (this.hasDueDate && !moment(this.project.dueDate).isSame(moment(this.projectForm.get(key).value))) {
+                    return true;
+                }
+            } else if (this.project[key] !== this.projectForm.get(key).value) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    public get disabled() {
+        if (this.hasDueDate && this.projectForm.get('dueDate').value === null) {
+            return true;
+        }
+
+        return this.projectForm.invalid;
     }
 
     async saveProject() {
@@ -47,7 +77,7 @@ export class AddEditProjectDialogComponent implements OnInit {
         return {
             projectName: this.projectForm.get('projectName').value,
             description: this.projectForm.get('description').value,
-            dueDate: this.projectForm.get('dueDate').value
+            dueDate: this.hasDueDate ? this.projectForm.get('dueDate').value : undefined
         };
     }
 
diff --git a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
index c787272c3..25c33a2a0 100644
--- a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
@@ -14,7 +14,7 @@
                 </mat-form-field>
             </div>
             <ng-container *ngIf="data.type === 'project'">
-                <div class="all-caps-label" [translate]="'assign-' + data.type + '-owner.dialog.members'"></div>
+                <div class="all-caps-label mt-10" [translate]="'assign-' + data.type + '-owner.dialog.members'"></div>
                 <redaction-team-members
                     [memberIds]="selectedUserList"
                     [canAdd]="false"
@@ -22,6 +22,9 @@
                     [canRemove]="true"
                     (remove)="toggleSelected($event)"
                 ></redaction-team-members>
+
+                <pre *ngIf="selectedUserList.length === 0" class="info" [innerHTML]="'assign-' + data.type + '-owner.dialog.no-members' | translate"></pre>
+
                 <form [formGroup]="searchForm">
                     <div class="red-input-group search-container">
                         <input
@@ -49,7 +52,7 @@
                 {{ 'assign-' + data.type + '-owner.dialog.save' | translate }}
             </button>
 
-            <div class="all-caps-label pointer" [translate]="'assign-' + data.type + '-owner.dialog.cancel'" mat-dialog-close></div>
+            <div class="all-caps-label pointer cancel" [translate]="'assign-' + data.type + '-owner.dialog.cancel'" mat-dialog-close></div>
         </div>
     </form>
 
diff --git a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.scss b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.scss
index 27860197e..250f30687 100644
--- a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.scss
+++ b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.scss
@@ -1,5 +1,9 @@
 @import '../../../assets/styles/red-mixins';
 
+.dialog-content {
+    padding-bottom: 0;
+}
+
 .search-container {
     width: 560px;
     margin-top: 16px;
@@ -65,3 +69,11 @@
         }
     }
 }
+
+.info {
+    margin-top: 4px;
+}
+
+.mt-10 {
+    margin-top: 10px;
+}
diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts
index f7a9696b5..8f3a5b189 100644
--- a/apps/red-ui/src/app/icons/icons.module.ts
+++ b/apps/red-ui/src/app/icons/icons.module.ts
@@ -18,7 +18,6 @@ export class IconsModule {
             'arrow-right',
             'assign',
             'assign-me',
-            'back-arrow',
             'calendar',
             'check',
             'close',
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
index 99f6d4412..6521a7792 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
@@ -5,26 +5,41 @@
         </div>
 
         <div class="dialog-content">
-            <div class="red-input-group required w-300" *ngIf="!dictionary">
-                <label translate="add-edit-dictionary.form.type"></label>
-                <input formControlName="type" name="type" type="text" placeholder="{{ 'add-edit-dictionary.form.type-placeholder' | translate }}" />
+            <div class="first-row">
+                <div class="red-input-group required w-300">
+                    <label translate="add-edit-dictionary.form.name"></label>
+                    <input
+                        formControlName="type"
+                        name="type"
+                        type="text"
+                        [attr.disabled]="!!dictionary || null"
+                        placeholder="{{ 'add-edit-dictionary.form.name-placeholder' | translate }}"
+                    />
+                </div>
+
+                <div class="red-input-group required w-150">
+                    <label translate="add-edit-dictionary.form.color"></label>
+                    <input
+                        class="hex-color-input"
+                        formControlName="hexColor"
+                        name="hexColor"
+                        type="text"
+                        placeholder="{{ 'add-edit-dictionary.form.color-placeholder' | translate }}"
+                    />
+                    <div
+                        class="input-icon"
+                        [style.background]="dictionaryForm.get('hexColor').value"
+                        [colorPicker]="dictionaryForm.get('hexColor').value"
+                        [cpOutputFormat]="'hex'"
+                        (colorPickerChange)="dictionaryForm.get('hexColor').setValue($event)"
+                    ></div>
+                </div>
             </div>
+
             <div class="red-input-group required w-150">
                 <label translate="add-edit-dictionary.form.rank"></label>
                 <input formControlName="rank" name="rank" type="number" placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}" />
             </div>
-            <div class="red-input-group required w-150">
-                <label translate="add-edit-dictionary.form.color"></label>
-                <input formControlName="hexColor" name="hexColor" type="text" placeholder="{{ 'add-edit-dictionary.form.color-placeholder' | translate }}" />
-                <div
-                    class="input-icon"
-                    [colorPicker]="dictionaryForm.get('hexColor').value"
-                    [cpOutputFormat]="'hex'"
-                    (colorPickerChange)="dictionaryForm.get('hexColor').setValue($event)"
-                >
-                    <mat-icon svgIcon="red:color-picker"></mat-icon>
-                </div>
-            </div>
 
             <div class="red-input-group slider-row">
                 <mat-button-toggle-group name="hint" formControlName="hint" appearance="legacy">
@@ -34,18 +49,16 @@
             </div>
 
             <div class="red-input-group">
-                <mat-checkbox formControlName="caseSensitive" color="primary">
+                <mat-checkbox name="caseSensitive" formControlName="caseSensitive" color="primary">
                     {{ 'add-edit-dictionary.form.case-sensitive' | translate }}
                 </mat-checkbox>
             </div>
         </div>
 
         <div class="dialog-actions">
-            <button [disabled]="dictionaryForm.invalid" color="primary" mat-flat-button translate="add-edit-dictionary.save" type="submit"></button>
+            <button [disabled]="dictionaryForm.invalid || !changed" color="primary" mat-flat-button translate="add-edit-dictionary.save" type="submit"></button>
         </div>
     </form>
 
-    <button (click)="dialogRef.close()" class="dialog-close" mat-icon-button>
-        <mat-icon svgIcon="red:close"></mat-icon>
-    </button>
+    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
index f9cbd4ec1..404b84fe2 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
+++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
@@ -2,21 +2,30 @@
 
 .w-300 {
     max-width: 300px;
+    width: 300px;
 }
 
 .w-150 {
     max-width: 150px;
+    width: 150px;
+}
+
+.first-row {
+    display: flex;
+
+    > *:not(last-child) {
+        margin-right: 24px;
+    }
+
+    .red-input-group {
+        margin-top: 0;
+    }
 }
 
 .slider-row {
     display: flex;
     flex-direction: row;
     align-items: center;
-
-    > mat-slide-toggle {
-        margin-left: 4px;
-        margin-right: 4px;
-    }
 }
 
 .mat-button-toggle-checked {
@@ -24,3 +33,7 @@
     transition: background-color 0.25s ease;
     color: $white;
 }
+
+.hex-color-input {
+    padding-right: 40px;
+}
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts
index 9635bb5ab..c6b9704b3 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts
+++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts
@@ -12,7 +12,7 @@ import { TranslateService } from '@ngx-translate/core';
     templateUrl: './add-edit-dictionary-dialog.component.html',
     styleUrls: ['./add-edit-dictionary-dialog.component.scss']
 })
-export class AddEditDictionaryDialogComponent implements OnInit {
+export class AddEditDictionaryDialogComponent {
     dictionaryForm: FormGroup;
 
     constructor(
@@ -23,21 +23,34 @@ export class AddEditDictionaryDialogComponent implements OnInit {
         private readonly _translateService: TranslateService,
         public dialogRef: MatDialogRef<AddEditDictionaryDialogComponent>,
         @Inject(MAT_DIALOG_DATA) public dictionary: TypeValue
-    ) {}
-
-    ngOnInit(): void {
+    ) {
         this.dictionaryForm = this._formBuilder.group({
             type: [this.dictionary?.type, Validators.required],
             rank: [this.dictionary?.rank, Validators.required],
-            hexColor: [this.dictionary?.hexColor, Validators.required],
+            hexColor: [this.dictionary?.hexColor, [Validators.required, Validators.minLength(7)]],
             hint: [!!this.dictionary?.hint],
-            caseSensitive: [this.dictionary ? !this.dictionary.caseInsensitive : false]
+            caseSensitive: [this.dictCaseSensitive]
         });
+    }
 
-        // edit mode, cannot change type value
-        if (!!this.dictionary) {
-            this.dictionaryForm.get('type').disable();
+    public get dictCaseSensitive() {
+        return this.dictionary ? !this.dictionary.caseInsensitive : false;
+    }
+
+    public get changed(): boolean {
+        if (!this.dictionary) return true;
+
+        for (const key of Object.keys(this.dictionaryForm.getRawValue())) {
+            if (key === 'caseSensitive') {
+                if (this.dictCaseSensitive !== this.dictionaryForm.get(key).value) {
+                    return true;
+                }
+            } else if (this.dictionary[key] !== this.dictionaryForm.get(key).value) {
+                return true;
+            }
         }
+
+        return false;
     }
 
     async saveDictionary() {
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
index a745b3f31..67abc10e6 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
@@ -99,12 +99,7 @@
                     text="dictionary-overview.save-changes"
                     [primary]="true"
                 ></redaction-icon-button>
-                <redaction-icon-button
-                    *ngIf="permissionsService.isAdmin()"
-                    (action)="revert()"
-                    text="dictionary-overview.revert-changes"
-                    [linkButton]="true"
-                ></redaction-icon-button>
+                <div class="all-caps-label cancel" *ngIf="permissionsService.isAdmin()" (click)="revert()" translate="dictionary-overview.revert-changes"></div>
             </div>
         </div>
 
diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
index b8f9f38a3..1a5d45b49 100644
--- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
@@ -54,12 +54,7 @@
                 text="rules-screen.save-changes"
                 [primary]="true"
             ></redaction-icon-button>
-            <redaction-icon-button
-                *ngIf="permissionsService.isAdmin()"
-                (action)="revert()"
-                text="rules-screen.revert-changes"
-                [linkButton]="true"
-            ></redaction-icon-button>
+            <div *ngIf="permissionsService.isAdmin()" (click)="revert()" translate="rules-screen.revert-changes" class="all-caps-label cancel"></div>
         </div>
     </div>
 </section>
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
index 7924a8beb..3bf16b4a2 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
@@ -49,7 +49,7 @@
                     {{ 'watermark-screen.action.save' | translate }}
                 </button>
 
-                <div class="all-caps-label pointer" (click)="revert()" [translate]="'watermark-screen.action.revert'"></div>
+                <div class="all-caps-label pointer cancel" (click)="revert()" [translate]="'watermark-screen.action.revert'"></div>
             </div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts
index 088b5fe6e..2dee11c24 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts
@@ -46,7 +46,7 @@ export class WatermarkScreenComponent implements OnInit {
         this._loadViewer();
     }
 
-    public get changed() {
+    public get changed(): boolean {
         for (const key of Object.keys(this._initialConfig)) {
             if (this._initialConfig[key] !== this.configForm.get(key).value) {
                 return true;
diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
index 7209002fc..7e7ded941 100644
--- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
@@ -35,7 +35,7 @@
                 *ngIf="settingsView"
                 [routerLinkActiveOptions]="{ exact: true }"
             >
-                <mat-icon svgIcon="red:collapse" class="transform-180"></mat-icon>
+                <mat-icon svgIcon="red:expand"></mat-icon>
                 {{ 'top-bar.navigation-items.back-to-projects' | translate }}
             </a>
             <mat-icon *ngIf="appStateService.activeProject" svgIcon="red:arrow-right"></mat-icon>
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 3304587a5..b084734a5 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -103,7 +103,7 @@
                 "description": "Description",
                 "name": "Name",
                 "due-date": "Due Date",
-                "rule-set": "Rule Set"
+                "template": "Project Template"
             },
             "actions": {
                 "save": "Save",
@@ -358,7 +358,8 @@
             "members": "Members",
             "save": "Save Changes",
             "cancel": "Cancel",
-            "search": "Search..."
+            "search": "Search...",
+            "no-members": "No members yet.\nSelect from the list below."
         }
     },
     "project-member-guard": {
@@ -487,8 +488,8 @@
             "new": "Create Dictionary"
         },
         "form": {
-            "type": "Type",
-            "type-placeholder": "Enter Type Name",
+            "name": "Dictionary Name",
+            "name-placeholder": "Enter Name",
             "rank": "Rank",
             "rank-placeholder": "1000",
             "color": "Hex Color",
diff --git a/apps/red-ui/src/assets/icons/general/back-arrow.svg b/apps/red-ui/src/assets/icons/general/back-arrow.svg
deleted file mode 100644
index 5dbf99f08..000000000
--- a/apps/red-ui/src/assets/icons/general/back-arrow.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-     viewBox="0 0 477.862 477.862" xml:space="preserve">
-<g fill="currentColor">
-    <path d="M187.722,102.856V17.062C187.719,7.636,180.076-0.003,170.65,0c-4.834,0.001-9.44,2.053-12.676,5.644L4.375,176.311
-			c-5.617,6.256-5.842,15.67-0.529,22.187l153.6,187.733c5.968,7.295,16.72,8.371,24.016,2.403c3.952-3.233,6.249-8.066,6.26-13.172
-			v-85.043c134.827,4.386,218.965,62.02,256.888,175.787c2.326,6.96,8.841,11.653,16.179,11.656c0.92,0.003,1.84-0.072,2.748-0.222
-			c8.256-1.347,14.319-8.479,14.319-16.845C477.855,259.818,356.87,112.174,187.722,102.856z"/>
-    </g>
-</svg>
diff --git a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
index 30e0cc5ad..d6d0613f2 100644
--- a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
+++ b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
@@ -22,8 +22,7 @@
             align-items: center;
 
             mat-icon {
-                margin-right: 4px;
-                color: $primary;
+                margin-right: 8px;
             }
         }
 
diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss
index 57f561203..008154754 100644
--- a/apps/red-ui/src/assets/styles/red-button.scss
+++ b/apps/red-ui/src/assets/styles/red-button.scss
@@ -18,6 +18,10 @@
             margin-right: 6px;
         }
     }
+
+    &.mat-button-disabled {
+        background-color: $grey-6 !important;
+    }
 }
 
 .cdk-program-focused .mat-button-focus-overlay {
diff --git a/apps/red-ui/src/assets/styles/red-controls.scss b/apps/red-ui/src/assets/styles/red-controls.scss
index 461f5a222..f8ac880d9 100644
--- a/apps/red-ui/src/assets/styles/red-controls.scss
+++ b/apps/red-ui/src/assets/styles/red-controls.scss
@@ -36,7 +36,3 @@
     width: 10px;
     height: 10px;
 }
-
-.transform-180 {
-    transform: rotate(180deg);
-}
diff --git a/apps/red-ui/src/assets/styles/red-dialog.scss b/apps/red-ui/src/assets/styles/red-dialog.scss
index cddf6e42d..fe4161ca1 100644
--- a/apps/red-ui/src/assets/styles/red-dialog.scss
+++ b/apps/red-ui/src/assets/styles/red-dialog.scss
@@ -17,11 +17,11 @@
     }
 
     .dialog-header {
-        padding: 32px 32px 16px 32px;
+        padding: 32px 32px 0 32px;
     }
 
     .dialog-content {
-        padding: 0 32px;
+        padding: 24px 32px 40px;
     }
 
     .dialog-actions {
diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss
index be4b52a67..c416f8bda 100644
--- a/apps/red-ui/src/assets/styles/red-input.scss
+++ b/apps/red-ui/src/assets/styles/red-input.scss
@@ -4,7 +4,7 @@
 .red-input-group {
     display: flex;
     flex-direction: column;
-    margin-top: 13px;
+    margin-top: 24px;
     position: relative;
 
     .input-icon {
@@ -12,14 +12,11 @@
         right: 1px;
         bottom: 1px;
         background: $grey-5;
-        height: 30px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        height: 32px;
         width: 32px;
-        border: 1px solid $grey-5;
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
+        border-left: 1px solid $grey-5;
+        border-top-right-radius: 7px;
+        border-bottom-right-radius: 7px;
         cursor: pointer;
         transition: background-color 0.25s ease;
 
@@ -126,4 +123,36 @@
         content: ' *';
         color: $primary;
     }
+
+    &.datepicker-wrapper {
+        position: relative;
+        display: flex;
+        margin-top: 0;
+        width: 120px;
+
+        .mat-datepicker-input {
+            margin-top: 0;
+        }
+
+        .mat-datepicker-toggle {
+            position: absolute;
+            right: 0;
+            color: $accent;
+
+            &.mat-datepicker-toggle-active {
+                color: $primary;
+            }
+
+            .mat-icon-button {
+                width: 34px;
+                height: 34px;
+                line-height: 34px;
+            }
+
+            mat-icon {
+                width: 14px;
+                height: 17px;
+            }
+        }
+    }
 }
diff --git a/apps/red-ui/src/assets/styles/red-text-styles.scss b/apps/red-ui/src/assets/styles/red-text-styles.scss
index 61963927a..28648588e 100644
--- a/apps/red-ui/src/assets/styles/red-text-styles.scss
+++ b/apps/red-ui/src/assets/styles/red-text-styles.scss
@@ -11,6 +11,11 @@ a {
     cursor: pointer;
 }
 
+pre {
+    font-family: Inter, sans-serif;
+    color: $accent;
+}
+
 .heading-xl {
     font-size: 24px;
     font-weight: 600;
@@ -29,6 +34,12 @@ a {
     font-weight: 600;
 }
 
+.info {
+    font-size: 13px;
+    line-height: 18px;
+    opacity: 0.7;
+}
+
 .page-title {
     font-size: 13px;
     font-weight: 600;
@@ -44,6 +55,11 @@ a {
     font-weight: 600;
     letter-spacing: 0;
     line-height: 14px;
+    transition: opacity 0.2s;
+
+    &.cancel:hover {
+        opacity: 1;
+    }
 }
 
 .small-label {
diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss
index 27f7daf06..3b3ad8f44 100644
--- a/apps/red-ui/src/assets/styles/red-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-theme.scss
@@ -11,6 +11,7 @@
 @import 'red-list';
 @import 'red-checkbox';
 @import 'red-toggle';
+@import 'red-toggle-button';
 @import 'red-menu';
 @import 'red-media-queries';
 @import 'red-tables';
diff --git a/apps/red-ui/src/assets/styles/red-toggle-button.scss b/apps/red-ui/src/assets/styles/red-toggle-button.scss
new file mode 100644
index 000000000..7091b475f
--- /dev/null
+++ b/apps/red-ui/src/assets/styles/red-toggle-button.scss
@@ -0,0 +1,14 @@
+@import './red-variables';
+
+.mat-button-toggle-standalone,
+.mat-button-toggle-group {
+    border-radius: 100px !important;
+    box-shadow: none;
+
+    .mat-button-toggle:not(.mat-button-toggle-checked) {
+        .mat-button-toggle-button {
+            background: $grey-6;
+            color: $grey-7;
+        }
+    }
+}
diff --git a/package.json b/package.json
index b0ef522ea..9253734c5 100644
--- a/package.json
+++ b/package.json
@@ -1,106 +1,107 @@
 {
-  "name": "redaction",
-  "version": "0.0.230",
-  "private": true,
-  "license": "MIT",
-  "scripts": {
-    "affected": "nx affected",
-    "affected:apps": "nx affected:apps",
-    "affected:build": "nx affected:build",
-    "affected:dep-graph": "nx affected:dep-graph",
-    "affected:e2e": "nx affected:e2e",
-    "affected:libs": "nx affected:libs",
-    "affected:lint": "nx affected:lint",
-    "affected:test": "nx affected:test",
-    "build": "nx build",
-    "build-lint-all": "ng lint --project=red-ui-http --fix && ng build --project=red-ui-http && ng lint --project=red-ui --fix && ng build --project=red-ui --prod",
-    "dep-graph": "nx dep-graph",
-    "e2e": "nx e2e",
-    "format": "nx format:write",
-    "format:check": "nx format:check",
-    "format:write": "nx format:write",
-    "help": "nx help",
-    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
-    "lint": "nx workspace-lint && nx lint",
-    "nx": "nx",
-    "start": "nx serve",
-    "test": "nx test",
-    "update": "nx migrate latest",
-    "workspace-schematic": "nx workspace-schematic"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged && ng lint --project=red-ui-http && ng lint --project=red-ui --fix"
+    "name": "redaction",
+    "version": "0.0.230",
+    "private": true,
+    "license": "MIT",
+    "scripts": {
+        "affected": "nx affected",
+        "affected:apps": "nx affected:apps",
+        "affected:build": "nx affected:build",
+        "affected:dep-graph": "nx affected:dep-graph",
+        "affected:e2e": "nx affected:e2e",
+        "affected:libs": "nx affected:libs",
+        "affected:lint": "nx affected:lint",
+        "affected:test": "nx affected:test",
+        "build": "nx build",
+        "build-lint-all": "ng lint --project=red-ui-http --fix && ng build --project=red-ui-http && ng lint --project=red-ui --fix && ng build --project=red-ui --prod",
+        "dep-graph": "nx dep-graph",
+        "e2e": "nx e2e",
+        "format": "nx format:write",
+        "format:check": "nx format:check",
+        "format:write": "nx format:write",
+        "help": "nx help",
+        "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
+        "lint": "nx workspace-lint && nx lint",
+        "nx": "nx",
+        "start": "nx serve",
+        "test": "nx test",
+        "update": "nx migrate latest",
+        "workspace-schematic": "nx workspace-schematic"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "pretty-quick --staged && ng lint --project=red-ui-http && ng lint --project=red-ui --fix"
+        }
+    },
+    "dependencies": {
+        "@angular/animations": "~11.0.1",
+        "@angular/cdk": "~11.0.1",
+        "@angular/common": "~11.0.1",
+        "@angular/compiler": "~11.0.1",
+        "@angular/core": "~11.0.1",
+        "@angular/forms": "~11.0.1",
+        "@angular/material": "~11.0.1",
+        "@angular/material-moment-adapter": "^11.0.2",
+        "@angular/platform-browser": "~11.0.1",
+        "@angular/platform-browser-dynamic": "~11.0.1",
+        "@angular/router": "~11.0.1",
+        "@angular/service-worker": "~11.0.1",
+        "@ngx-translate/core": "^13.0.0",
+        "@ngx-translate/http-loader": "^6.0.0",
+        "@nrwl/angular": "^10.2.0",
+        "@pdftron/webviewer": "^7.0.1",
+        "file-saver": "^2.0.2",
+        "jwt-decode": "^3.0.0",
+        "keycloak-angular": "^8.0.1",
+        "keycloak-js": "10.0.2",
+        "lint-staged": "^10.5.0",
+        "ng2-ace-editor": "^0.3.9",
+        "ng2-file-upload": "^1.4.0",
+        "ngp-sort-pipe": "^0.0.4",
+        "ngx-color-picker": "^10.1.0",
+        "ngx-dropzone": "^2.2.2",
+        "ngx-toastr": "^13.0.0",
+        "rxjs": "~6.6.0",
+        "scroll-into-view-if-needed": "^2.2.26",
+        "tslib": "^2.0.0",
+        "zone.js": "~0.10.2"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "~0.1100.2",
+        "@angular-devkit/build-ng-packagr": "~0.1002.0",
+        "@angular/cli": "~11.0.2",
+        "@angular/compiler": "~11.0.1",
+        "@angular/compiler-cli": "~11.0.1",
+        "@angular/language-service": "~11.0.2",
+        "@nrwl/cypress": "10.2.0",
+        "@nrwl/jest": "10.2.0",
+        "@nrwl/workspace": "10.2.0",
+        "@types/cypress": "^1.1.3",
+        "@types/jasmine": "~3.6.0",
+        "@types/jest": "26.0.8",
+        "@types/node": "^12.11.1",
+        "codelyzer": "^6.0.0",
+        "cypress": "^5.6.0",
+        "cypress-file-upload": "^4.1.1",
+        "cypress-keycloak": "^1.5.0",
+        "cypress-keycloak-commands": "^1.2.0",
+        "cypress-localstorage-commands": "^1.2.4",
+        "dotenv": "6.2.0",
+        "eslint": "6.8.0",
+        "google-translate-api-browser": "^1.1.71",
+        "husky": "^4.3.0",
+        "jest": "26.2.2",
+        "jest-preset-angular": "8.2.1",
+        "lodash": "^4.17.20",
+        "moment": "^2.29.1",
+        "ng-packagr": "^10.1.2",
+        "prettier": "2.0.4",
+        "pretty-quick": "^3.1.0",
+        "superagent": "^6.1.0",
+        "superagent-promise": "^1.1.0",
+        "ts-jest": "26.1.4",
+        "ts-node": "~8.3.0",
+        "tslint": "~6.1.0",
+        "typescript": "~4.0.2"
     }
-  },
-  "dependencies": {
-    "@angular/animations": "~11.0.1",
-    "@angular/cdk": "~11.0.1",
-    "@angular/common": "~11.0.1",
-    "@angular/compiler": "~11.0.1",
-    "@angular/core": "~11.0.1",
-    "@angular/forms": "~11.0.1",
-    "@angular/material": "~11.0.1",
-    "@angular/platform-browser": "~11.0.1",
-    "@angular/platform-browser-dynamic": "~11.0.1",
-    "@angular/router": "~11.0.1",
-    "@angular/service-worker": "~11.0.1",
-    "@ngx-translate/core": "^13.0.0",
-    "@ngx-translate/http-loader": "^6.0.0",
-    "@nrwl/angular": "^10.2.0",
-    "@pdftron/webviewer": "^7.0.1",
-    "file-saver": "^2.0.2",
-    "jwt-decode": "^3.0.0",
-    "keycloak-angular": "^8.0.1",
-    "keycloak-js": "10.0.2",
-    "lint-staged": "^10.5.0",
-    "ng2-ace-editor": "^0.3.9",
-    "ng2-file-upload": "^1.4.0",
-    "ngp-sort-pipe": "^0.0.4",
-    "ngx-color-picker": "^10.1.0",
-    "ngx-dropzone": "^2.2.2",
-    "ngx-toastr": "^13.0.0",
-    "rxjs": "~6.6.0",
-    "scroll-into-view-if-needed": "^2.2.26",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1100.2",
-    "@angular-devkit/build-ng-packagr": "~0.1002.0",
-    "@angular/cli": "~11.0.2",
-    "@angular/compiler": "~11.0.1",
-    "@angular/compiler-cli": "~11.0.1",
-    "@angular/language-service": "~11.0.2",
-    "@nrwl/cypress": "10.2.0",
-    "@nrwl/jest": "10.2.0",
-    "@nrwl/workspace": "10.2.0",
-    "@types/cypress": "^1.1.3",
-    "@types/jasmine": "~3.6.0",
-    "@types/jest": "26.0.8",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^6.0.0",
-    "cypress": "^5.6.0",
-    "cypress-file-upload": "^4.1.1",
-    "cypress-keycloak": "^1.5.0",
-    "cypress-keycloak-commands": "^1.2.0",
-    "cypress-localstorage-commands": "^1.2.4",
-    "dotenv": "6.2.0",
-    "eslint": "6.8.0",
-    "google-translate-api-browser": "^1.1.71",
-    "husky": "^4.3.0",
-    "jest": "26.2.2",
-    "jest-preset-angular": "8.2.1",
-    "lodash": "^4.17.20",
-    "moment": "^2.29.1",
-    "ng-packagr": "^10.1.2",
-    "prettier": "2.0.4",
-    "pretty-quick": "^3.1.0",
-    "superagent": "^6.1.0",
-    "superagent-promise": "^1.1.0",
-    "ts-jest": "26.1.4",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.0.2"
-  }
 }
diff --git a/yarn.lock b/yarn.lock
index b5918a54b..5bda7abe8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -286,6 +286,13 @@
   resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-11.0.2.tgz#b9a97a9bdd3d10ac2335eb94bacf8ab5514aeeb5"
   integrity sha512-Cfam/NEP8hKkcqBVGlkBVuPkojZukmVOxdtsFIkIjJW/mywad2lIfjHR/0rZ43jD1bPb7s+tyYcJBgNg42p2ng==
 
+"@angular/material-moment-adapter@^11.0.2":
+  version "11.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/material-moment-adapter/-/material-moment-adapter-11.0.2.tgz#73afa45174385ece6a1cc9228ebf59ef78963cd2"
+  integrity sha512-/GkNJJuNziFEKU+fC6BJQmXGuWMgJcRalVA5oLotinbaVg1+GgH3eagbB2lVmSpxTDWTecr3D+K1H0ckTAeHRA==
+  dependencies:
+    tslib "^2.0.0"
+
 "@angular/material@~11.0.1":
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/@angular/material/-/material-11.0.1.tgz#add0e87d3e01d7d20484ea5a90d15439ec31a1d6"