diff --git a/apps/red-ui/src/app/app.component.html b/apps/red-ui/src/app/app.component.html
index 7115e458f..80f9c88ad 100644
--- a/apps/red-ui/src/app/app.component.html
+++ b/apps/red-ui/src/app/app.component.html
@@ -1,4 +1,2 @@
 <router-outlet></router-outlet>
-<redaction-full-page-loading-indicator
-    [displayed]="appLoadStateService.loading | async"
-></redaction-full-page-loading-indicator>
+<redaction-full-page-loading-indicator [displayed]="appLoadStateService.loading | async"></redaction-full-page-loading-indicator>
diff --git a/apps/red-ui/src/app/components/auth-error/auth-error.component.html b/apps/red-ui/src/app/components/auth-error/auth-error.component.html
index eb7dd22d8..a3d625205 100644
--- a/apps/red-ui/src/app/components/auth-error/auth-error.component.html
+++ b/apps/red-ui/src/app/components/auth-error/auth-error.component.html
@@ -1,19 +1,19 @@
 <section>
-    <p class="heading-xl" [translate]="'auth-error.heading'" *ngIf="!configuredAdminName && !configuredAdminUrl"></p>
+    <p *ngIf="!configuredAdminName && !configuredAdminUrl" [translate]="'auth-error.heading'" class="heading-xl"></p>
     <p
-        class="heading-xl"
-        [innerHTML]="'auth-error.heading-with-name-and-link' | translate: { adminName: configuredAdminName, adminUrl: configuredAdminUrl }"
         *ngIf="configuredAdminName && configuredAdminUrl"
+        [innerHTML]="'auth-error.heading-with-name-and-link' | translate: { adminName: configuredAdminName, adminUrl: configuredAdminUrl }"
+        class="heading-xl"
     ></p>
     <p
-        class="heading-xl"
-        [innerHTML]="'auth-error.heading-with-name' | translate: { adminName: configuredAdminName }"
         *ngIf="configuredAdminName && !configuredAdminUrl"
+        [innerHTML]="'auth-error.heading-with-name' | translate: { adminName: configuredAdminName }"
+        class="heading-xl"
     ></p>
     <p
-        class="heading-xl"
-        [innerHTML]="'auth-error.heading-with-link' | translate: { adminName: configuredAdminName }"
         *ngIf="!configuredAdminName && configuredAdminUrl"
+        [innerHTML]="'auth-error.heading-with-link' | translate: { adminName: configuredAdminName }"
+        class="heading-xl"
     ></p>
     <a (click)="logout()" [translate]="'auth-error.logout'"></a>
 </section>
diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
index 8ba2f7f19..984874129 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
@@ -1,7 +1,7 @@
 <div class="red-top-bar">
     <div class="top-bar-row">
-        <div class="menu-placeholder" *ngIf="!permissionsService.isUser()"></div>
-        <div class="menu visible-lt-lg" *ngIf="permissionsService.isUser()">
+        <div *ngIf="!permissionsService.isUser()" class="menu-placeholder"></div>
+        <div *ngIf="permissionsService.isUser()" class="menu visible-lt-lg">
             <button [matMenuTriggerFor]="menuNav" mat-flat-button>
                 <mat-icon svgIcon="red:menu"></mat-icon>
             </button>
@@ -19,36 +19,36 @@
                 </button>
             </mat-menu>
         </div>
-        <div class="menu flex-2 visible-lg breadcrumbs-container" *ngIf="permissionsService.isUser()">
+        <div *ngIf="permissionsService.isUser()" class="menu flex-2 visible-lg breadcrumbs-container">
             <a
-                class="breadcrumb"
-                routerLink="/main/projects"
-                translate="top-bar.navigation-items.projects"
-                routerLinkActive="active"
                 *ngIf="projectsView"
                 [routerLinkActiveOptions]="{ exact: true }"
+                class="breadcrumb"
+                routerLink="/main/projects"
+                routerLinkActive="active"
+                translate="top-bar.navigation-items.projects"
             ></a>
-            <a class="breadcrumb back" redactionNavigateLastProjectsScreen *ngIf="!projectsView">
+            <a *ngIf="!projectsView" class="breadcrumb back" redactionNavigateLastProjectsScreen>
                 <mat-icon svgIcon="red:expand"></mat-icon>
                 {{ 'top-bar.navigation-items.back' | translate }}
             </a>
             <ng-container *ngIf="projectsView">
-                <mat-icon class="primary" *ngIf="!appStateService.activeProject" svgIcon="red:arrow-down"></mat-icon>
+                <mat-icon *ngIf="!appStateService.activeProject" class="primary" svgIcon="red:arrow-down"></mat-icon>
                 <mat-icon *ngIf="appStateService.activeProject" svgIcon="red:arrow-right"></mat-icon>
                 <a
                     *ngIf="appStateService.activeProject"
-                    class="breadcrumb"
-                    [routerLink]="'/main/projects/' + appStateService.activeProjectId"
-                    routerLinkActive="active"
                     [routerLinkActiveOptions]="{ exact: true }"
+                    [routerLink]="'/main/projects/' + appStateService.activeProjectId"
+                    class="breadcrumb"
+                    routerLinkActive="active"
                 >
                     {{ appStateService.activeProject.project.projectName }}
                 </a>
-                <mat-icon svgIcon="red:arrow-right" *ngIf="appStateService.activeFile"></mat-icon>
+                <mat-icon *ngIf="appStateService.activeFile" svgIcon="red:arrow-right"></mat-icon>
                 <a
                     *ngIf="appStateService.activeFile"
-                    class="breadcrumb"
                     [routerLink]="'/main/projects/' + appStateService.activeProjectId + '/file/' + appStateService.activeFile.fileId"
+                    class="breadcrumb"
                     routerLinkActive="active"
                 >
                     {{ appStateService.activeFile.filename }}
@@ -60,16 +60,16 @@
                 <redaction-logo></redaction-logo>
             </redaction-hidden-action>
             <div class="app-name">{{ titleService.getTitle() }}</div>
-            <span class="dev-mode" *ngIf="userPreferenceService.areDevFeaturesEnabled" translate="dev-mode"></span>
+            <span *ngIf="userPreferenceService.areDevFeaturesEnabled" class="dev-mode" translate="dev-mode"></span>
         </div>
         <div class="menu right flex-2">
-            <redaction-notifications class="mr-8" *ngIf="userPreferenceService.areDevFeaturesEnabled"></redaction-notifications>
-            <redaction-user-button [user]="user" [matMenuTriggerFor]="userMenu" [showDot]="showPendingDownloadsDot"></redaction-user-button>
+            <redaction-notifications *ngIf="userPreferenceService.areDevFeaturesEnabled" class="mr-8"></redaction-notifications>
+            <redaction-user-button [matMenuTriggerFor]="userMenu" [showDot]="showPendingDownloadsDot" [user]="user"></redaction-user-button>
             <mat-menu #userMenu="matMenu" class="user-menu" xPosition="before">
                 <button [routerLink]="'/main/my-profile'" mat-menu-item translate="top-bar.navigation-items.my-account.children.my-profile"></button>
                 <button
-                    *ngIf="permissionsService.isManager() || permissionsService.isUserAdmin()"
                     (click)="appStateService.reset()"
+                    *ngIf="permissionsService.isManager() || permissionsService.isUserAdmin()"
                     [routerLink]="'/main/admin'"
                     mat-menu-item
                     translate="top-bar.navigation-items.my-account.children.admin"
@@ -82,7 +82,7 @@
                 ></button>
                 <button [matMenuTriggerFor]="language" mat-menu-item translate="top-bar.navigation-items.my-account.children.language.label"></button>
                 <mat-menu #language="matMenu">
-                    <button *ngFor="let lang of languages" (click)="changeLanguage(lang)" mat-menu-item translate>
+                    <button (click)="changeLanguage(lang)" *ngFor="let lang of languages" mat-menu-item translate>
                         top-bar.navigation-items.my-account.children.language.{{ lang }}
                     </button>
                 </mat-menu>
diff --git a/apps/red-ui/src/app/components/toast/toast.component.html b/apps/red-ui/src/app/components/toast/toast.component.html
index 3ec0115cc..93c4004fa 100644
--- a/apps/red-ui/src/app/components/toast/toast.component.html
+++ b/apps/red-ui/src/app/components/toast/toast.component.html
@@ -1,32 +1,20 @@
-<div class="row" [style.display]="state.value === 'inactive' ? 'none' : ''">
-    <div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
+<div [style.display]="state.value === 'inactive' ? 'none' : ''" class="row">
+    <div *ngIf="title" [attr.aria-label]="title" [class]="options.titleClass">
         {{ title }}
     </div>
-    <div
-        *ngIf="message && options.enableHtml"
-        role="alert"
-        aria-live="polite"
-        [class]="options.messageClass"
-        [innerHTML]="message"
-    ></div>
-    <div
-        *ngIf="message && !options.enableHtml"
-        role="alert"
-        aria-live="polite"
-        [class]="options.messageClass"
-        [attr.aria-label]="message"
-    >
+    <div *ngIf="message && options.enableHtml" [class]="options.messageClass" [innerHTML]="message" aria-live="polite" role="alert"></div>
+    <div *ngIf="message && !options.enableHtml" [attr.aria-label]="message" [class]="options.messageClass" aria-live="polite" role="alert">
         {{ message }}
     </div>
 
-    <div class="actions-wrapper" *ngIf="actions && actions.length">
-        <a *ngFor="let action of actions" (click)="callAction($event, action.action)">
+    <div *ngIf="actions && actions.length" class="actions-wrapper">
+        <a (click)="callAction($event, action.action)" *ngFor="let action of actions">
             {{ action.title }}
         </a>
     </div>
 </div>
 <div class="text-right">
-    <a *ngIf="options.closeButton" (click)="remove()" class="toast-close-button">
+    <a (click)="remove()" *ngIf="options.closeButton" class="toast-close-button">
         <mat-icon svgIcon="red:close"></mat-icon>
     </a>
 </div>
diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html
index 298361084..760499450 100644
--- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html
+++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html
@@ -3,9 +3,9 @@
         <div class="overlay-shadow"></div>
         <div class="dialog">
             <div class="dialog-header">
-                <div class="heading-l" [translate]="'user-profile.title'"></div>
+                <div [translate]="'user-profile.title'" class="heading-l"></div>
             </div>
-            <form [formGroup]="formGroup" (submit)="save()">
+            <form (submit)="save()" [formGroup]="formGroup">
                 <div class="dialog-content">
                     <div class="dialog-content-left">
                         <div class="red-input-group required">
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 0d36682a3..c8a6720b6 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,12 +1,12 @@
 <div class="menu flex-2 visible-lg breadcrumbs-container">
-    <a class="breadcrumb" [routerLink]="'/main/admin/project-templates'" translate="project-templates" *ngIf="root || !!appStateService.activeRuleSet"></a>
+    <a *ngIf="root || !!appStateService.activeRuleSet" [routerLink]="'/main/admin/project-templates'" class="breadcrumb" translate="project-templates"></a>
 
     <ng-container *ngIf="appStateService.activeRuleSet">
         <mat-icon svgIcon="red:arrow-right"></mat-icon>
         <a
-            class="breadcrumb ml-0"
-            [routerLink]="'/main/admin/project-templates/' + appStateService.activeRuleSetId"
             [class.active]="!appStateService.activeDictionaryType"
+            [routerLink]="'/main/admin/project-templates/' + appStateService.activeRuleSetId"
+            class="breadcrumb ml-0"
         >
             {{ appStateService.activeRuleSet.name }}
         </a>
@@ -15,8 +15,8 @@
     <ng-container *ngIf="appStateService.activeDictionary">
         <mat-icon svgIcon="red:arrow-right"></mat-icon>
         <a
-            class="breadcrumb ml-0"
             [routerLink]="'/main/admin/project-templates/' + appStateService.activeRuleSetId + '/dictionaries/' + appStateService.activeDictionaryType"
+            class="breadcrumb ml-0"
             routerLinkActive="active"
         >
             {{ appStateService.activeDictionary.label }}
diff --git a/apps/red-ui/src/app/modules/admin/components/combo-chart/combo-chart.component.html b/apps/red-ui/src/app/modules/admin/components/combo-chart/combo-chart.component.html
index 5cffc2f32..667d9a3b8 100644
--- a/apps/red-ui/src/app/modules/admin/components/combo-chart/combo-chart.component.html
+++ b/apps/red-ui/src/app/modules/admin/components/combo-chart/combo-chart.component.html
@@ -1,109 +1,109 @@
 <ngx-charts-chart
-    [view]="[width + legendSpacing, height]"
-    [showLegend]="legend"
-    [legendOptions]="legendOptions"
+    (legendLabelActivate)="onActivate($event)"
+    (legendLabelClick)="onClick($event)"
+    (legendLabelDeactivate)="onDeactivate($event)"
     [activeEntries]="activeEntries"
     [animations]="animations"
-    (legendLabelClick)="onClick($event)"
-    (legendLabelActivate)="onActivate($event)"
-    (legendLabelDeactivate)="onDeactivate($event)"
+    [legendOptions]="legendOptions"
+    [showLegend]="legend"
+    [view]="[width + legendSpacing, height]"
 >
     <svg:g [attr.transform]="transform" class="bar-chart chart">
         <svg:g
-            ngx-charts-x-axis
-            *ngIf="xAxis"
-            [xScale]="xScale"
-            [dims]="dims"
-            [showLabel]="showXAxisLabel"
-            [labelText]="xAxisLabel"
-            [tickFormatting]="xAxisTickFormatting"
             (dimensionsChanged)="updateXAxisHeight($event)"
+            *ngIf="xAxis"
+            [dims]="dims"
+            [labelText]="xAxisLabel"
+            [showLabel]="showXAxisLabel"
+            [tickFormatting]="xAxisTickFormatting"
+            [xScale]="xScale"
+            ngx-charts-x-axis
         ></svg:g>
         <svg:g
-            ngx-charts-y-axis
+            (dimensionsChanged)="updateYAxisWidth($event)"
             *ngIf="yAxis"
-            [yScale]="yScale"
             [dims]="dims"
-            [yOrient]="yOrientLeft"
+            [labelText]="yAxisLabel"
             [showGridLines]="showGridLines"
             [showLabel]="showYAxisLabel"
-            [labelText]="yAxisLabel"
             [tickFormatting]="yAxisTickFormatting"
-            (dimensionsChanged)="updateYAxisWidth($event)"
+            [yOrient]="yOrientLeft"
+            [yScale]="yScale"
+            ngx-charts-y-axis
         ></svg:g>
         <svg:g
-            ngx-charts-y-axis
+            (dimensionsChanged)="updateYAxisWidth($event)"
             *ngIf="yAxis"
-            [yScale]="yScaleLine"
             [dims]="dims"
-            [yOrient]="yOrientRight"
+            [labelText]="yAxisLabelRight"
             [showGridLines]="showGridLines"
             [showLabel]="showRightYAxisLabel"
-            [labelText]="yAxisLabelRight"
             [tickFormatting]="yRightAxisTickFormatting"
-            (dimensionsChanged)="updateYAxisWidth($event)"
+            [yOrient]="yOrientRight"
+            [yScale]="yScaleLine"
+            ngx-charts-y-axis
         ></svg:g>
         <svg:g
-            ngx-combo-charts-series-vertical
-            [xScale]="xScale"
-            [yScale]="yScale"
-            [colors]="colors"
-            [series]="results"
-            [seriesLine]="lineChart"
-            [dims]="dims"
-            [gradient]="gradient"
-            [tooltipDisabled]="true"
+            (activate)="onActivate($event)"
+            (bandwidth)="updateLineWidth($event)"
+            (deactivate)="onDeactivate($event)"
             [activeEntries]="activeEntries"
             [animations]="animations"
+            [colors]="colors"
+            [dims]="dims"
+            [gradient]="gradient"
             [noBarWhenZero]="noBarWhenZero"
-            (activate)="onActivate($event)"
-            (deactivate)="onDeactivate($event)"
-            (bandwidth)="updateLineWidth($event)"
+            [seriesLine]="lineChart"
+            [series]="results"
+            [tooltipDisabled]="true"
+            [xScale]="xScale"
+            [yScale]="yScale"
+            ngx-combo-charts-series-vertical
         ></svg:g>
     </svg:g>
     <svg:g [attr.transform]="transform" class="line-chart chart">
         <svg:g>
             <svg:g *ngFor="let series of lineChart; trackBy: trackBy">
                 <svg:g
-                    ngx-charts-line-series
+                    [activeEntries]="activeEntries"
+                    [animations]="animations"
+                    [colors]="colorsLine"
+                    [curve]="curve"
+                    [data]="series"
+                    [rangeFillOpacity]="rangeFillOpacity"
+                    [scaleType]="scaleType"
                     [xScale]="xScaleLine"
                     [yScale]="yScaleLine"
-                    [colors]="colorsLine"
-                    [data]="series"
-                    [activeEntries]="activeEntries"
-                    [scaleType]="scaleType"
-                    [curve]="curve"
-                    [rangeFillOpacity]="rangeFillOpacity"
-                    [animations]="animations"
+                    ngx-charts-line-series
                 />
             </svg:g>
 
             <svg:g
-                ngx-charts-tooltip-area
-                *ngIf="!tooltipDisabled"
-                [dims]="dims"
-                [xSet]="xSet"
-                [xScale]="xScaleLine"
-                [yScale]="yScaleLine"
-                [results]="combinedSeries"
-                [colors]="colorsLine"
-                [tooltipDisabled]="tooltipDisabled"
                 (hover)="updateHoveredVertical($event)"
+                *ngIf="!tooltipDisabled"
+                [colors]="colorsLine"
+                [dims]="dims"
+                [results]="combinedSeries"
+                [tooltipDisabled]="tooltipDisabled"
+                [xScale]="xScaleLine"
+                [xSet]="xSet"
+                [yScale]="yScaleLine"
+                ngx-charts-tooltip-area
             />
 
             <svg:g *ngFor="let series of lineChart">
                 <svg:g
-                    ngx-charts-circle-series
-                    [xScale]="xScaleLine"
-                    [yScale]="yScaleLine"
+                    (activate)="onActivate($event)"
+                    (deactivate)="onDeactivate($event)"
+                    [activeEntries]="activeEntries"
                     [colors]="colorsLine"
                     [data]="series"
                     [scaleType]="scaleType"
-                    [visibleValue]="hoveredVertical"
-                    [activeEntries]="activeEntries"
                     [tooltipDisabled]="tooltipDisabled"
-                    (activate)="onActivate($event)"
-                    (deactivate)="onDeactivate($event)"
+                    [visibleValue]="hoveredVertical"
+                    [xScale]="xScaleLine"
+                    [yScale]="yScaleLine"
+                    ngx-charts-circle-series
                 />
             </svg:g>
         </svg:g>
diff --git a/apps/red-ui/src/app/modules/admin/components/rule-set-actions/rule-set-actions.component.html b/apps/red-ui/src/app/modules/admin/components/rule-set-actions/rule-set-actions.component.html
index 22df77320..0f59fbe3b 100644
--- a/apps/red-ui/src/app/modules/admin/components/rule-set-actions/rule-set-actions.component.html
+++ b/apps/red-ui/src/app/modules/admin/components/rule-set-actions/rule-set-actions.component.html
@@ -2,18 +2,18 @@
     <redaction-circle-button
         (action)="openDeleteRuleSetDialog($event)"
         *ngIf="permissionsService.isAdmin()"
+        icon="red:trash"
         tooltip="project-templates-listing.action.delete"
         type="dark-bg"
-        icon="red:trash"
     >
     </redaction-circle-button>
 
     <redaction-circle-button
         (action)="openEditRuleSetDialog($event)"
         *ngIf="permissionsService.isAdmin()"
+        icon="red:edit"
         tooltip="project-templates-listing.action.edit"
         type="dark-bg"
-        icon="red:edit"
     >
     </redaction-circle-button>
 </div>
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
index dd49f134e..4ff6bb202 100644
--- 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
@@ -1,15 +1,15 @@
-<div class="all-caps-label" [translate]="type"></div>
+<div [translate]="type" class="all-caps-label"></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]="prefix + item.screen"
         [routerLinkActiveOptions]="{ exact: false }"
+        [routerLink]="prefix + item.screen"
+        class="item"
         routerLinkActive="active"
     >
         {{ item.label || item.screen | translate }}
diff --git a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
index 37ec82dbb..d8b54f4b8 100644
--- a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
+++ b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
@@ -1,5 +1,5 @@
 <div class="collapsed-wrapper">
-    <redaction-circle-button (action)="toggleCollapse.emit()" icon="red:expand" tooltipPosition="before" tooltip="user-stats.expand"></redaction-circle-button>
+    <redaction-circle-button (action)="toggleCollapse.emit()" icon="red:expand" tooltip="user-stats.expand" tooltipPosition="before"></redaction-circle-button>
     <div class="all-caps-label" translate="user-stats.title"></div>
 </div>
 
@@ -16,10 +16,10 @@
 <div class="mt-44">
     <redaction-simple-doughnut-chart
         [config]="chartData"
-        [strokeWidth]="15"
         [radius]="63"
+        [strokeWidth]="15"
         [subtitle]="'user-stats.chart.users'"
-        totalType="sum"
         direction="row"
+        totalType="sum"
     ></redaction-simple-doughnut-chart>
 </div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
index 6fa8edc12..243f7e4d0 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
@@ -13,15 +13,15 @@
             </ng-container>
 
             <div class="first-row">
-                <div class="red-input-group required" *ngIf="!dictionary">
+                <div *ngIf="!dictionary" class="red-input-group required">
                     <label translate="add-edit-dictionary.form.name"></label>
-                    <input formControlName="type" name="type" type="text" placeholder="{{ 'add-edit-dictionary.form.name-placeholder' | translate }}" />
+                    <input formControlName="type" name="type" placeholder="{{ 'add-edit-dictionary.form.name-placeholder' | translate }}" type="text" />
                     <span class="hint" translate="add-edit-dictionary.form.name-hint"></span>
                 </div>
 
                 <div class="red-input-group required w-75">
                     <label translate="add-edit-dictionary.form.rank"></label>
-                    <input formControlName="rank" name="rank" type="number" placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}" />
+                    <input formControlName="rank" name="rank" placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}" type="number" />
                 </div>
 
                 <div class="red-input-group required">
@@ -30,19 +30,19 @@
                         class="hex-color-input"
                         formControlName="hexColor"
                         name="hexColor"
-                        type="text"
                         placeholder="{{ 'add-edit-dictionary.form.color-placeholder' | translate }}"
+                        type="text"
                     />
                     <div
-                        class="input-icon"
-                        [style.background]="dictionaryForm.get('hexColor').value"
+                        (colorPickerChange)="dictionaryForm.get('hexColor').setValue($event)"
                         [colorPicker]="dictionaryForm.get('hexColor').value"
                         [cpOutputFormat]="'hex'"
-                        (colorPickerChange)="dictionaryForm.get('hexColor').setValue($event)"
+                        [style.background]="dictionaryForm.get('hexColor').value"
+                        class="input-icon"
                     >
                         <mat-icon
-                            svgIcon="red:color-picker"
                             *ngIf="!dictionaryForm.get('hexColor').value || dictionaryForm.get('hexColor').value?.length === 0"
+                            svgIcon="red:color-picker"
                         ></mat-icon>
                     </div>
                 </div>
@@ -51,30 +51,30 @@
             <div class="red-input-group w-450">
                 <label translate="add-edit-dictionary.form.description"></label>
                 <textarea
-                    redactionHasScrollbar
-                    rows="4"
                     formControlName="description"
                     name="description"
-                    type="text"
                     placeholder="{{ 'add-edit-dictionary.form.description-placeholder' | translate }}"
+                    redactionHasScrollbar
+                    rows="4"
+                    type="text"
                 ></textarea>
             </div>
 
             <div class="red-input-group slider-row">
-                <mat-button-toggle-group name="hint" formControlName="hint" appearance="legacy">
+                <mat-button-toggle-group appearance="legacy" formControlName="hint" name="hint">
                     <mat-button-toggle [value]="false"> {{ 'add-edit-dictionary.form.redaction' | translate }}</mat-button-toggle>
                     <mat-button-toggle [value]="true"> {{ 'add-edit-dictionary.form.hint' | translate }}</mat-button-toggle>
                 </mat-button-toggle-group>
             </div>
 
             <div class="red-input-group">
-                <mat-checkbox name="caseSensitive" formControlName="caseSensitive" color="primary">
+                <mat-checkbox color="primary" formControlName="caseSensitive" name="caseSensitive">
                     {{ 'add-edit-dictionary.form.case-sensitive' | translate }}
                 </mat-checkbox>
             </div>
 
             <div class="red-input-group">
-                <mat-checkbox name="addToDictionaryAction" formControlName="addToDictionaryAction" color="primary">
+                <mat-checkbox color="primary" formControlName="addToDictionaryAction" name="addToDictionaryAction">
                     {{ 'add-edit-dictionary.form.add-to-dictionary-action' | translate }}
                 </mat-checkbox>
             </div>
@@ -87,5 +87,5 @@
         </div>
     </form>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-rule-set-dialog/add-edit-rule-set-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-rule-set-dialog/add-edit-rule-set-dialog.component.html
index 7c0483f12..2098145f2 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-rule-set-dialog/add-edit-rule-set-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-rule-set-dialog/add-edit-rule-set-dialog.component.html
@@ -7,7 +7,7 @@
         <div class="dialog-content">
             <div class="red-input-group required w-300">
                 <label translate="add-edit-project-template.form.name"></label>
-                <input formControlName="name" name="name" type="text" placeholder="{{ 'add-edit-project-template.form.name-placeholder' | translate }}" />
+                <input formControlName="name" name="name" placeholder="{{ 'add-edit-project-template.form.name-placeholder' | translate }}" type="text" />
             </div>
 
             <div class="red-input-group w-400">
@@ -15,19 +15,19 @@
                 <textarea
                     formControlName="description"
                     name="description"
-                    type="text"
-                    rows="4"
                     placeholder="{{ 'add-edit-project-template.form.description-placeholder' | translate }}"
+                    rows="4"
+                    type="text"
                 ></textarea>
             </div>
 
             <div class="validity">
                 <div>
-                    <mat-checkbox [checked]="hasValidFrom" (change)="hasValidFrom = !hasValidFrom" class="filter-menu-checkbox" color="primary">
+                    <mat-checkbox (change)="hasValidFrom = !hasValidFrom" [checked]="hasValidFrom" class="filter-menu-checkbox" color="primary">
                         {{ 'add-edit-project-template.form.valid-from' | translate }}
                     </mat-checkbox>
 
-                    <mat-checkbox [checked]="hasValidTo" (change)="hasValidTo = !hasValidTo" class="filter-menu-checkbox" color="primary">
+                    <mat-checkbox (change)="hasValidTo = !hasValidTo" [checked]="hasValidTo" class="filter-menu-checkbox" color="primary">
                         {{ 'add-edit-project-template.form.valid-to' | translate }}
                     </mat-checkbox>
                 </div>
@@ -35,8 +35,8 @@
                 <div>
                     <div class="red-input-group datepicker-wrapper">
                         <ng-container *ngIf="hasValidFrom">
-                            <input placeholder="dd/mm/yy" [matDatepicker]="fromPicker" formControlName="validFrom" />
-                            <mat-datepicker-toggle matSuffix [for]="fromPicker">
+                            <input [matDatepicker]="fromPicker" formControlName="validFrom" placeholder="dd/mm/yy" />
+                            <mat-datepicker-toggle [for]="fromPicker" matSuffix>
                                 <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                             </mat-datepicker-toggle>
                             <mat-datepicker #fromPicker></mat-datepicker>
@@ -45,8 +45,8 @@
 
                     <div class="red-input-group datepicker-wrapper">
                         <ng-container *ngIf="hasValidTo">
-                            <input placeholder="dd/mm/yy" [matDatepicker]="toPicker" formControlName="validTo" />
-                            <mat-datepicker-toggle matSuffix [for]="toPicker">
+                            <input [matDatepicker]="toPicker" formControlName="validTo" placeholder="dd/mm/yy" />
+                            <mat-datepicker-toggle [for]="toPicker" matSuffix>
                                 <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                             </mat-datepicker-toggle>
                             <mat-datepicker #toPicker></mat-datepicker>
@@ -58,17 +58,17 @@
             <p class="download-includes">{{ 'download-includes' | translate }}</p>
             <div class="space-between">
                 <redaction-select
-                    class="w-410"
+                    [label]="'report-type.label' | translate: { length: this.ruleSetForm.controls['reportTypes'].value.length }"
                     [options]="reportTypesEnum"
                     [translatePrefix]="'report-type.'"
-                    [label]="'report-type.label' | translate: { length: this.ruleSetForm.controls['reportTypes'].value.length }"
+                    class="w-410"
                     formControlName="reportTypes"
                 ></redaction-select>
                 <redaction-select
-                    class="w-410"
+                    [label]="'download-type.label' | translate: { length: this.ruleSetForm.controls['downloadFileTypes'].value.length }"
                     [options]="downloadTypesEnum"
                     [translatePrefix]="'download-type.'"
-                    [label]="'download-type.label' | translate: { length: this.ruleSetForm.controls['downloadFileTypes'].value.length }"
+                    class="w-410"
                     formControlName="downloadFileTypes"
                 ></redaction-select>
             </div>
@@ -81,5 +81,5 @@
         </div>
     </form>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html
index 742318f8e..da43ce99f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html
@@ -28,7 +28,7 @@
             <div class="red-input-group">
                 <label translate="add-edit-user.form.role"></label>
                 <div class="roles-wrapper">
-                    <mat-checkbox [formControlName]="role" *ngFor="let role of ROLES" color="primary">
+                    <mat-checkbox *ngFor="let role of ROLES" [formControlName]="role" color="primary">
                         {{ 'roles.' + role | translate }}
                     </mat-checkbox>
                 </div>
@@ -40,11 +40,11 @@
                 {{ (user ? 'add-edit-user.actions.save-changes' : 'add-edit-user.actions.save') | translate }}
             </button>
 
-            <redaction-icon-button *ngIf="user" icon="red:trash" type="show-bg" (action)="delete()" text="add-edit-user.actions.delete"></redaction-icon-button>
+            <redaction-icon-button (action)="delete()" *ngIf="user" icon="red:trash" text="add-edit-user.actions.delete" type="show-bg"></redaction-icon-button>
 
             <div class="all-caps-label cancel" mat-dialog-close translate="add-edit-user.actions.cancel"></div>
         </div>
     </form>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html
index 4c3b0ac62..4ace83050 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html
@@ -3,7 +3,7 @@
         {{ 'confirm-delete-file-attribute.title.' + type | translate: { name: fileAttribute?.label } }}
     </div>
 
-    <div class="inline-dialog-toast toast-error" *ngIf="showToast">
+    <div *ngIf="showToast" class="inline-dialog-toast toast-error">
         <div translate="confirm-delete-file-attribute.toast-error"></div>
         <a (click)="showToast = false" class="toast-close-button">
             <mat-icon svgIcon="red:close"></mat-icon>
@@ -16,18 +16,18 @@
         <mat-checkbox
             *ngFor="let checkbox of checkboxes; let idx = index"
             [(ngModel)]="checkbox.value"
-            color="primary"
             [class.error]="!checkbox.value && showToast"
+            color="primary"
         >
             {{ 'confirm-delete-file-attribute.' + checkbox.label | translate }}
         </mat-checkbox>
     </div>
 
     <div class="dialog-actions">
-        <button color="primary" mat-flat-button (click)="deleteFileAttribute()">
+        <button (click)="deleteFileAttribute()" color="primary" mat-flat-button>
             {{ 'confirm-delete-file-attribute.delete.' + type | translate }}
         </button>
-        <div class="all-caps-label cancel" (click)="cancel()" [translate]="'confirm-delete-file-attribute.cancel.' + type"></div>
+        <div (click)="cancel()" [translate]="'confirm-delete-file-attribute.cancel.' + type" class="all-caps-label cancel"></div>
     </div>
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.html
index d6d712eb2..2b913fba6 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.html
@@ -1,7 +1,7 @@
 <section class="dialog">
-    <div class="dialog-header heading-l" [translate]="'confirm-delete-users.title.' + type"></div>
+    <div [translate]="'confirm-delete-users.title.' + type" class="dialog-header heading-l"></div>
 
-    <div class="inline-dialog-toast toast-error" *ngIf="showToast">
+    <div *ngIf="showToast" class="inline-dialog-toast toast-error">
         <div translate="confirm-delete-users.toast-error"></div>
         <a (click)="showToast = false" class="toast-close-button">
             <mat-icon svgIcon="red:close"></mat-icon>
@@ -14,18 +14,18 @@
         <mat-checkbox
             *ngFor="let checkbox of checkboxes; let idx = index"
             [(ngModel)]="checkbox.value"
-            color="primary"
             [class.error]="!checkbox.value && showToast"
+            color="primary"
         >
             {{ 'confirm-delete-users.' + checkbox.label | translate: { projectsCount: projectsCount } }}
         </mat-checkbox>
     </div>
 
     <div class="dialog-actions">
-        <button color="primary" mat-flat-button (click)="deleteUser()">
+        <button (click)="deleteUser()" color="primary" mat-flat-button>
             {{ 'confirm-delete-users.delete.' + type | translate }}
         </button>
-        <div class="all-caps-label cancel" (click)="cancel()" [translate]="'confirm-delete-users.cancel.' + type"></div>
+        <div (click)="cancel()" [translate]="'confirm-delete-users.cancel.' + type" class="all-caps-label cancel"></div>
     </div>
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html
index e2ef05935..6bae2c2a5 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html
@@ -1,5 +1,5 @@
 <section class="dialog">
-    <div class="dialog-header heading-l" [translate]="'default-colors-screen.types.' + this.colorKey"></div>
+    <div [translate]="'default-colors-screen.types.' + this.colorKey" class="dialog-header heading-l"></div>
 
     <form (submit)="saveColors()" [formGroup]="colorForm">
         <div class="dialog-content">
@@ -9,17 +9,17 @@
                     class="hex-color-input"
                     formControlName="color"
                     name="color"
-                    type="text"
                     placeholder="{{ 'edit-color-dialog.form.color-placeholder' | translate }}"
+                    type="text"
                 />
                 <div
-                    class="input-icon"
-                    [style.background]="colorForm.get('color').value"
+                    (colorPickerChange)="colorForm.get('color').setValue($event)"
                     [colorPicker]="colorForm.get('color').value"
                     [cpOutputFormat]="'hex'"
-                    (colorPickerChange)="colorForm.get('color').setValue($event)"
+                    [style.background]="colorForm.get('color').value"
+                    class="input-icon"
                 >
-                    <mat-icon svgIcon="red:color-picker" *ngIf="!colorForm.get('color').value || colorForm.get('color').value?.length === 0"></mat-icon>
+                    <mat-icon *ngIf="!colorForm.get('color').value || colorForm.get('color').value?.length === 0" svgIcon="red:color-picker"></mat-icon>
                 </div>
             </div>
         </div>
@@ -31,5 +31,5 @@
         </div>
     </form>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
index d0e9c7fee..6b8e98d14 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
@@ -13,39 +13,39 @@
     <ng-container *ngIf="areSomeEntitiesSelected">
         <redaction-circle-button
             [matMenuTriggerFor]="readOnlyMenu"
+            icon="red:read-only"
             tooltip="file-attributes-csv-import.table-header.actions.read-only"
             type="dark-bg"
-            icon="red:read-only"
         >
         </redaction-circle-button>
 
         <redaction-circle-button
             (action)="deactivateSelection()"
+            icon="red:trash"
             tooltip="file-attributes-csv-import.table-header.actions.remove-selected"
             type="dark-bg"
-            icon="red:trash"
         >
         </redaction-circle-button>
 
         <div class="separator"></div>
 
-        <redaction-chevron-button text="file-attributes-csv-import.table-header.actions.type" [matMenuTriggerFor]="typeMenu"></redaction-chevron-button>
+        <redaction-chevron-button [matMenuTriggerFor]="typeMenu" text="file-attributes-csv-import.table-header.actions.type"></redaction-chevron-button>
 
         <mat-menu #readOnlyMenu="matMenu" class="no-padding-bottom">
             <button
-                mat-menu-item
                 (click)="setAttributeForSelection('readonly', true)"
+                mat-menu-item
                 translate="file-attributes-csv-import.table-header.actions.enable-read-only"
             ></button>
             <button
-                mat-menu-item
                 (click)="setAttributeForSelection('readonly', false)"
+                mat-menu-item
                 translate="file-attributes-csv-import.table-header.actions.disable-read-only"
             ></button>
         </mat-menu>
 
         <mat-menu #typeMenu="matMenu" class="no-padding-bottom">
-            <button *ngFor="let type of typeOptions" mat-menu-item (click)="setAttributeForSelection('type', type)">
+            <button (click)="setAttributeForSelection('type', type)" *ngFor="let type of typeOptions" mat-menu-item>
                 {{ 'file-attribute-types.' + type | translate }}
             </button>
         </mat-menu>
@@ -55,71 +55,71 @@
 <div class="table-header" redactionSyncWidth="table-item">
     <div class="select-oval-placeholder"></div>
 
-    <redaction-table-col-name label="file-attributes-csv-import.table-col-names.name" class="name"></redaction-table-col-name>
+    <redaction-table-col-name class="name" label="file-attributes-csv-import.table-col-names.name"></redaction-table-col-name>
 
     <redaction-table-col-name label="file-attributes-csv-import.table-col-names.type"></redaction-table-col-name>
 
     <redaction-table-col-name
-        label="file-attributes-csv-import.table-col-names.read-only"
         class="flex-center"
+        label="file-attributes-csv-import.table-col-names.read-only"
         leftIcon="red:read-only"
     ></redaction-table-col-name>
 
     <redaction-table-col-name
+        class="flex-center"
         label="file-attributes-csv-import.table-col-names.primary"
         rightIcon="red:status-info"
         rightIconTooltip="file-attributes-csv-import.table-col-names.primary-info-tooltip"
-        class="flex-center"
     ></redaction-table-col-name>
 
     <div></div>
     <div class="scrollbar-placeholder"></div>
 </div>
 
-<redaction-empty-state *ngIf="!allEntities.length" icon="red:attribute" screen="file-attributes-csv-import"> </redaction-empty-state>
+<redaction-empty-state *ngIf="!allEntities.length" icon="red:attribute" screen="file-attributes-csv-import"></redaction-empty-state>
 
 <cdk-virtual-scroll-viewport [itemSize]="50" redactionHasScrollbar>
     <!--      Table lines -->
     <div
-        class="table-item"
-        *cdkVirtualFor="let field of displayedEntities"
         (mouseenter)="setHoveredColumn.emit(field.csvColumn)"
         (mouseleave)="setHoveredColumn.emit()"
+        *cdkVirtualFor="let field of displayedEntities"
+        class="table-item"
     >
-        <div class="selection-column" (click)="toggleEntitySelected($event, field)">
+        <div (click)="toggleEntitySelected($event, field)" class="selection-column">
             <redaction-round-checkbox [active]="isEntitySelected(field)"></redaction-round-checkbox>
         </div>
-        <div class="name" [class.editing]="field.editingName">
+        <div [class.editing]="field.editingName" class="name">
             <div *ngIf="!field.editingName">
                 {{ field.name }}
             </div>
             <form (submit)="field.editingName = false; field.name = field.temporaryName" *ngIf="field.editingName">
                 <div class="red-input-group w-200">
-                    <input name="name" [(ngModel)]="field.temporaryName" />
+                    <input [(ngModel)]="field.temporaryName" name="name" />
                 </div>
             </form>
             <redaction-circle-button
-                class="edit-name-button"
-                *ngIf="!field.editingName"
                 (action)="field.editingName = true"
+                *ngIf="!field.editingName"
+                class="edit-name-button"
+                icon="red:edit"
                 tooltip="file-attributes-csv-import.action.edit-name"
                 type="dark-bg"
-                icon="red:edit"
             >
             </redaction-circle-button>
             <ng-container *ngIf="field.editingName">
                 <redaction-circle-button
                     (action)="field.editingName = false; field.name = field.temporaryName"
+                    icon="red:check"
                     tooltip="file-attributes-csv-import.action.save-name"
                     type="dark-bg"
-                    icon="red:check"
                 >
                 </redaction-circle-button>
                 <redaction-circle-button
                     (action)="field.editingName = false; field.temporaryName = field.name"
+                    icon="red:close"
                     tooltip="file-attributes-csv-import.action.cancel-edit-name"
                     type="dark-bg"
-                    icon="red:close"
                 >
                 </redaction-circle-button>
             </ng-container>
@@ -146,9 +146,9 @@
                 <redaction-circle-button
                     (action)="field.primaryAttribute = false; toggleFieldActive.emit(field)"
                     [removeTooltip]="true"
+                    icon="red:trash"
                     tooltip="file-attributes-csv-import.action.remove"
                     type="dark-bg"
-                    icon="red:trash"
                 >
                 </redaction-circle-button>
             </div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index e52eef96f..633afe952 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -1,5 +1,5 @@
 <section class="dialog">
-    <div translate="file-attributes-csv-import.title" class="dialog-header heading-l"></div>
+    <div class="dialog-header heading-l" translate="file-attributes-csv-import.title"></div>
 
     <div class="dialog-content">
         <div class="sub-header">
@@ -10,18 +10,18 @@
                 </div>
             </div>
             <div class="right">
-                <form [formGroup]="baseConfigForm" (submit)="changedParseConfig && readFile()">
+                <form (submit)="changedParseConfig && readFile()" [formGroup]="baseConfigForm">
                     <div class="red-input-group required w-250">
                         <mat-form-field floatLabel="always">
                             <mat-label>{{ 'file-attributes-csv-import.key-column' | translate }}</mat-label>
                             <input
-                                type="text"
-                                [placeholder]="'file-attributes-csv-import.key-column-placeholder' | translate"
-                                matInput
-                                formControlName="filenameMappingColumnHeaderName"
                                 [matAutocomplete]="auto"
+                                [placeholder]="'file-attributes-csv-import.key-column-placeholder' | translate"
+                                formControlName="filenameMappingColumnHeaderName"
+                                matInput
+                                type="text"
                             />
-                            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+                            <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption>
                                 <mat-option *ngFor="let field of filteredKeyOptions | async" [value]="field">
                                     {{ field }}
                                 </mat-option>
@@ -32,25 +32,25 @@
                     <div class="red-input-group required w-110">
                         <label translate="file-attributes-csv-import.delimiter"></label>
                         <input
+                            [placeholder]="'file-attributes-csv-import.delimiter-placeholder' | translate"
                             formControlName="delimiter"
                             name="delimiter"
                             type="text"
-                            [placeholder]="'file-attributes-csv-import.delimiter-placeholder' | translate"
                         />
                     </div>
 
                     <div class="red-input-group required w-160">
                         <label translate="file-attributes-csv-import.encoding"></label>
                         <input
+                            [placeholder]="'file-attributes-csv-import.encoding-placeholder' | translate"
                             formControlName="encoding"
                             name="encoding"
                             type="text"
-                            [placeholder]="'file-attributes-csv-import.encoding-placeholder' | translate"
                         />
                     </div>
                     <redaction-circle-button
-                        *ngIf="changedParseConfig"
                         (action)="readFile()"
+                        *ngIf="changedParseConfig"
                         icon="red:check"
                         tooltip="file-attributes-csv-import.parse-csv"
                     ></redaction-circle-button>
@@ -68,40 +68,40 @@
                     </div>
                     <div class="actions">
                         <redaction-circle-button
-                            icon="red:search"
                             (click)="isSearchOpen = !isSearchOpen"
                             [attr.aria-expanded]="isSearchOpen"
+                            icon="red:search"
                         ></redaction-circle-button>
                         <div class="quick-activation">
                             <span
-                                class="all-caps-label primary pointer"
                                 (click)="activateAll()"
+                                class="all-caps-label primary pointer"
                                 translate="file-attributes-csv-import.quick-activation.all"
                             ></span>
                             <span
-                                class="all-caps-label primary pointer"
                                 (click)="deactivateAll()"
+                                class="all-caps-label primary pointer"
                                 translate="file-attributes-csv-import.quick-activation.none"
                             ></span>
                         </div>
                     </div>
                 </div>
-                <div class="search-input-container" *ngIf="isSearchOpen">
+                <div *ngIf="isSearchOpen" class="search-input-container">
                     <redaction-search-input
                         [form]="searchForm"
                         placeholder="file-attributes-csv-import.search.placeholder"
                         width="full"
                     ></redaction-search-input>
                 </div>
-                <div class="csv-header-pill-content" [class.search-open]="isSearchOpen">
+                <div [class.search-open]="isSearchOpen" class="csv-header-pill-content">
                     <div
-                        class="csv-header-pill-wrapper"
-                        *ngFor="let field of displayedEntities"
+                        (click)="toggleFieldActive(field)"
                         (mouseenter)="setHoveredColumn(field.csvColumn)"
                         (mouseleave)="setHoveredColumn()"
-                        (click)="toggleFieldActive(field)"
+                        *ngFor="let field of displayedEntities"
+                        class="csv-header-pill-wrapper"
                     >
-                        <div class="csv-header-pill" [class.selected]="isActive(field)">
+                        <div [class.selected]="isActive(field)" class="csv-header-pill">
                             <div class="name">
                                 {{ field.csvColumn }}
                             </div>
@@ -113,19 +113,19 @@
                     </div>
                 </div>
             </div>
-            <div class="center" [class.collapsed]="!previewExpanded" (mouseenter)="keepPreview = true" (mouseleave)="keepPreview = false; setHoveredColumn()">
+            <div (mouseenter)="keepPreview = true" (mouseleave)="keepPreview = false; setHoveredColumn()" [class.collapsed]="!previewExpanded" class="center">
                 <div class="csv-part-header">
                     <div class="all-caps-label">
                         {{ 'file-attributes-csv-import.csv-column' + (previewExpanded ? '' : '-preview') | translate }}
                     </div>
                     <redaction-circle-button
-                        [icon]="previewExpanded ? 'red:expand' : 'red:collapse'"
                         (click)="previewExpanded = !previewExpanded"
+                        [icon]="previewExpanded ? 'red:expand' : 'red:collapse'"
                     ></redaction-circle-button>
                 </div>
-                <div class="csv-part-content" [class.hidden]="!previewExpanded">
-                    <div class="no-column-data" *ngIf="!hoveredColumn" translate="file-attributes-csv-import.no-hovered-column"></div>
-                    <div class="no-column-data" *ngIf="hoveredColumn && !columnSample.length">
+                <div [class.hidden]="!previewExpanded" class="csv-part-content">
+                    <div *ngIf="!hoveredColumn" class="no-column-data" translate="file-attributes-csv-import.no-hovered-column"></div>
+                    <div *ngIf="hoveredColumn && !columnSample.length" class="no-column-data">
                         {{ 'file-attributes-csv-import.no-sample-data-for' | translate: { column: hoveredColumn } }}
                     </div>
                     <div *ngFor="let row of columnSample">
@@ -135,21 +135,21 @@
             </div>
             <div class="content-container">
                 <redaction-active-fields-listing
-                    [(allEntities)]="activeFields"
                     (setHoveredColumn)="setHoveredColumn($event)"
                     (toggleFieldActive)="toggleFieldActive($event)"
+                    [(allEntities)]="activeFields"
                 ></redaction-active-fields-listing>
             </div>
         </div>
     </div>
 
     <div class="dialog-actions">
-        <button color="primary" mat-flat-button (click)="save()" [disabled]="changedParseConfig || baseConfigForm.invalid">
+        <button (click)="save()" [disabled]="changedParseConfig || baseConfigForm.invalid" color="primary" mat-flat-button>
             {{ 'file-attributes-csv-import.save.label' | translate }}
         </button>
 
-        <div class="all-caps-label cancel" (click)="dialogRef.close()">{{ 'file-attributes-csv-import.cancel' | translate }}</div>
+        <div (click)="dialogRef.close()" class="all-caps-label cancel">{{ 'file-attributes-csv-import.cancel' | translate }}</div>
     </div>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html
index 92566a824..e3b00f0eb 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html
@@ -5,7 +5,7 @@
         <div class="dialog-content">
             <div class="red-input-group required w-300">
                 <label translate="smtp-auth-config.form.username"></label>
-                <input formControlName="user" name="user" type="text" placeholder="{{ 'smtp-auth-config.form.username-placeholder' | translate }}" />
+                <input formControlName="user" name="user" placeholder="{{ 'smtp-auth-config.form.username-placeholder' | translate }}" type="text" />
             </div>
 
             <div class="red-input-group required w-300">
@@ -22,5 +22,5 @@
         </div>
     </form>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
index b6ecf8f27..5fa10723c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
@@ -5,7 +5,7 @@
         <div class="flex-1 actions">
             <redaction-rule-set-actions></redaction-rule-set-actions>
 
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" icon="red:close" tooltip="common.close" tooltipPosition="below"></redaction-circle-button>
         </div>
     </div>
 
@@ -23,14 +23,14 @@
 
             <div class="table-header" redactionSyncWidth="table-item">
                 <redaction-table-col-name
-                    label="default-colors-screen.table-col-names.key"
-                    column="key"
                     (toggleSort)="toggleSort($event)"
                     [activeSortingOption]="sortingOption"
                     [withSort]="true"
+                    column="key"
+                    label="default-colors-screen.table-col-names.key"
                 ></redaction-table-col-name>
 
-                <redaction-table-col-name label="default-colors-screen.table-col-names.color" class="flex-center"></redaction-table-col-name>
+                <redaction-table-col-name class="flex-center" label="default-colors-screen.table-col-names.color"></redaction-table-col-name>
 
                 <div></div>
                 <div class="scrollbar-placeholder"></div>
@@ -38,13 +38,13 @@
 
             <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
                 <!--      Table lines -->
-                <div class="table-item" *cdkVirtualFor="let color of allEntities | sortBy: sortingOption.order:sortingOption.column">
+                <div *cdkVirtualFor="let color of allEntities | sortBy: sortingOption.order:sortingOption.column" class="table-item">
                     <div>
-                        <div class="table-item-title heading" [translate]="'default-colors-screen.types.' + color.key"></div>
+                        <div [translate]="'default-colors-screen.types.' + color.key" class="table-item-title heading"></div>
                     </div>
 
                     <div class="color-wrapper">
-                        <div class="color-square" [ngStyle]="{ 'background-color': color.value }"></div>
+                        <div [ngStyle]="{ 'background-color': color.value }" class="color-square"></div>
                     </div>
 
                     <div class="actions-container">
@@ -52,9 +52,9 @@
                             <redaction-circle-button
                                 (action)="openEditColorDialog($event, color)"
                                 *ngIf="permissionsService.isAdmin()"
+                                icon="red:edit"
                                 tooltip="default-colors-screen.action.edit"
                                 type="dark-bg"
-                                icon="red:edit"
                             >
                             </redaction-circle-button>
                         </div>
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 22c86f093..04ca839ae 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
@@ -3,9 +3,9 @@
         <redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
 
         <div class="flex-1 actions">
-            <redaction-rule-set-actions> </redaction-rule-set-actions>
+            <redaction-rule-set-actions></redaction-rule-set-actions>
 
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" icon="red:close" tooltip="common.close" tooltipPosition="below"></redaction-circle-button>
         </div>
     </div>
 
@@ -32,9 +32,9 @@
                     <redaction-search-input [form]="searchForm" [placeholder]="'dictionary-listing.search'"></redaction-search-input>
                     <div class="actions">
                         <redaction-icon-button
+                            (action)="openAddEditDictionaryDialog()"
                             *ngIf="permissionsService.isAdmin()"
                             icon="red:plus"
-                            (action)="openAddEditDictionaryDialog()"
                             text="dictionary-listing.add-new"
                             type="primary"
                         ></redaction-icon-button>
@@ -42,36 +42,36 @@
                 </div>
             </div>
 
-            <div class="table-header" redactionSyncWidth="table-item" [class.no-data]="!allEntities.length">
+            <div [class.no-data]="!allEntities.length" class="table-header" redactionSyncWidth="table-item">
                 <div class="select-oval-placeholder"></div>
 
                 <redaction-table-col-name
-                    label="dictionary-listing.table-col-names.type"
-                    column="label"
                     (toggleSort)="toggleSort($event)"
                     [activeSortingOption]="sortingOption"
                     [withSort]="true"
+                    column="label"
+                    label="dictionary-listing.table-col-names.type"
                 ></redaction-table-col-name>
 
                 <redaction-table-col-name
-                    label="dictionary-listing.table-col-names.order-of-importance"
-                    column="rank"
-                    class="flex-center"
                     (toggleSort)="toggleSort($event)"
                     [activeSortingOption]="sortingOption"
                     [withSort]="true"
+                    class="flex-center"
+                    column="rank"
+                    label="dictionary-listing.table-col-names.order-of-importance"
                 ></redaction-table-col-name>
 
-                <redaction-table-col-name label="dictionary-listing.table-col-names.hint-redaction" class="flex-center"></redaction-table-col-name>
+                <redaction-table-col-name class="flex-center" label="dictionary-listing.table-col-names.hint-redaction"></redaction-table-col-name>
                 <div></div>
                 <div class="scrollbar-placeholder"></div>
             </div>
 
             <redaction-empty-state
-                *ngIf="!allEntities.length"
-                icon="red:dictionary"
                 (action)="openAddEditDictionaryDialog()"
+                *ngIf="!allEntities.length"
                 [showButton]="permissionsService.isAdmin()"
+                icon="red:dictionary"
                 screen="dictionary-listing"
             ></redaction-empty-state>
 
@@ -79,16 +79,16 @@
 
             <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
                 <div
-                    class="table-item pointer"
                     *cdkVirtualFor="let dict of displayedEntities | sortBy: sortingOption.order:sortingOption.column"
                     [routerLink]="[dict.type]"
+                    class="table-item pointer"
                 >
-                    <div class="selection-column" (click)="toggleEntitySelected($event, dict)">
+                    <div (click)="toggleEntitySelected($event, dict)" class="selection-column">
                         <redaction-round-checkbox [active]="isEntitySelected(dict)"></redaction-round-checkbox>
                     </div>
 
                     <div>
-                        <div class="color-square" [ngStyle]="{ 'background-color': dict.hexColor }"></div>
+                        <div [ngStyle]="{ 'background-color': dict.hexColor }" class="color-square"></div>
                         <div class="dict-name">
                             <div class="table-item-title heading">
                                 {{ dict.label }}
@@ -119,18 +119,18 @@
                             <redaction-circle-button
                                 (action)="openDeleteDictionaryDialog($event, dict)"
                                 *ngIf="permissionsService.isAdmin()"
+                                icon="red:trash"
                                 tooltip="dictionary-listing.action.delete"
                                 type="dark-bg"
-                                icon="red:trash"
                             >
                             </redaction-circle-button>
 
                             <redaction-circle-button
                                 (action)="openAddEditDictionaryDialog($event, dict)"
                                 *ngIf="permissionsService.isAdmin()"
+                                icon="red:edit"
                                 tooltip="dictionary-listing.action.edit"
                                 type="dark-bg"
-                                icon="red:edit"
                             >
                             </redaction-circle-button>
                         </div>
@@ -144,11 +144,11 @@
             <redaction-simple-doughnut-chart
                 *ngIf="allEntities.length"
                 [config]="chartData"
-                [strokeWidth]="15"
+                [counterText]="'dictionary-listing.stats.charts.entries' | translate"
                 [radius]="82"
+                [strokeWidth]="15"
                 [subtitle]="'dictionary-listing.stats.charts.types'"
                 totalType="count"
-                [counterText]="'dictionary-listing.stats.charts.entries' | translate"
             ></redaction-simple-doughnut-chart>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
index 73c94a610..e725780fa 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
@@ -6,46 +6,46 @@
             <redaction-circle-button
                 (action)="openDeleteDictionaryDialog($event)"
                 *ngIf="permissionsService.isAdmin()"
+                icon="red:trash"
                 tooltip="dictionary-overview.action.delete"
                 tooltipPosition="below"
                 type="dark-bg"
-                icon="red:trash"
             >
             </redaction-circle-button>
 
             <redaction-circle-button
                 (action)="openEditDictionaryDialog($event)"
                 *ngIf="permissionsService.isAdmin()"
+                icon="red:edit"
                 tooltip="dictionary-overview.action.edit"
                 tooltipPosition="below"
                 type="dark-bg"
-                icon="red:edit"
             >
             </redaction-circle-button>
 
             <redaction-circle-button
                 (action)="download()"
+                icon="red:download"
                 tooltip="dictionary-overview.action.download"
                 tooltipPosition="below"
-                icon="red:download"
             ></redaction-circle-button>
 
             <redaction-circle-button
-                *ngIf="permissionsService.isAdmin()"
                 (action)="fileInput.click()"
+                *ngIf="permissionsService.isAdmin()"
+                icon="red:upload"
                 tooltip="dictionary-overview.action.upload"
                 tooltipPosition="below"
-                icon="red:upload"
             ></redaction-circle-button>
 
-            <input #fileInput (change)="upload($event)" hidden class="file-upload-input" type="file" accept="text/plain" />
+            <input #fileInput (change)="upload($event)" accept="text/plain" class="file-upload-input" hidden type="file" />
 
             <redaction-circle-button
-                class="ml-6"
                 [routerLink]="['..']"
+                class="ml-6"
+                icon="red:close"
                 tooltip="common.close"
                 tooltipPosition="below"
-                icon="red:close"
             ></redaction-circle-button>
         </div>
     </div>
@@ -59,31 +59,31 @@
             <div class="actions-bar">
                 <div class="red-input-group w-450 mr-32">
                     <input
-                        [class.with-matches]="searchText.length > 0"
-                        type="text"
-                        [(ngModel)]="searchText"
-                        (keyup)="searchChanged(searchText)"
                         #inputElement
+                        (keyup)="searchChanged(searchText)"
+                        [(ngModel)]="searchText"
+                        [class.with-matches]="searchText.length > 0"
                         placeholder="{{ 'dictionary-overview.search' | translate }}"
+                        type="text"
                     />
 
                     <div class="input-icons">
-                        <div class="no-input" *ngIf="searchText.length === 0">
+                        <div *ngIf="searchText.length === 0" class="no-input">
                             <mat-icon svgIcon="red:search"></mat-icon>
                         </div>
-                        <div class="with-input" *ngIf="searchText.length > 0">
+                        <div *ngIf="searchText.length > 0" class="with-input">
                             <div class="search-match-text">
                                 {{ currentMatch + '/' + searchPositions.length }}
                             </div>
-                            <mat-icon svgIcon="red:arrow-up" class="pointer" (click)="previousSearchMatch()"></mat-icon>
-                            <mat-icon svgIcon="red:arrow-down" class="pointer" (click)="nextSearchMatch()"></mat-icon>
-                            <mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.focus()" class="pointer"></mat-icon>
+                            <mat-icon (click)="previousSearchMatch()" class="pointer" svgIcon="red:arrow-up"></mat-icon>
+                            <mat-icon (click)="nextSearchMatch()" class="pointer" svgIcon="red:arrow-down"></mat-icon>
+                            <mat-icon (click)="searchChanged(''); inputElement.focus()" class="pointer" svgIcon="red:close"></mat-icon>
                         </div>
                     </div>
                 </div>
-                <form class="compare-form" [formGroup]="compareForm">
+                <form [formGroup]="compareForm" class="compare-form">
                     <div class="red-input-group mr-16">
-                        <mat-checkbox formControlName="active" color="primary"> {{ 'dictionary-overview.compare.compare' | translate }} </mat-checkbox>
+                        <mat-checkbox color="primary" formControlName="active"> {{ 'dictionary-overview.compare.compare' | translate }} </mat-checkbox>
                     </div>
                     <div class="red-input-group w-200 mr-8">
                         <mat-select formControlName="ruleSet">
@@ -105,16 +105,16 @@
             <div class="editor-container">
                 <ace-editor
                     #editorComponent
-                    [mode]="'text'"
-                    [theme]="'eclipse'"
-                    [options]="aceOptions"
-                    [readOnly]="!permissionsService.isAdmin()"
                     (textChanged)="textChanged($event)"
                     [autoUpdateContent]="true"
+                    [mode]="'text'"
+                    [options]="aceOptions"
+                    [readOnly]="!permissionsService.isAdmin()"
+                    [theme]="'eclipse'"
                     class="ace-redaction"
                 >
                 </ace-editor>
-                <div class="no-dictionary-selected" *ngIf="compareForm.get('active').value && compareForm.get('dictionary').value === selectDictionary">
+                <div *ngIf="compareForm.get('active').value && compareForm.get('dictionary').value === selectDictionary" class="no-dictionary-selected">
                     <mat-icon svgIcon="red:dictionary"></mat-icon>
                     <span class="heading-l" translate="dictionary-overview.select-dictionary"></span>
                 </div>
@@ -122,23 +122,23 @@
                     #compareEditorComponent
                     *ngIf="compareForm.get('active').value && compareForm.get('dictionary').value !== selectDictionary"
                     [mode]="'text'"
-                    [theme]="'eclipse'"
                     [options]="aceOptions"
                     [readOnly]="true"
+                    [theme]="'eclipse'"
                     class="ace-redaction"
                 >
                 </ace-editor>
             </div>
 
-            <div class="changes-box" *ngIf="hasChanges && permissionsService.isAdmin()" [class.offset]="compareForm.get('active').value">
-                <redaction-icon-button icon="red:check" (action)="saveEntries()" text="dictionary-overview.save-changes" type="primary"></redaction-icon-button>
-                <div class="all-caps-label cancel" (click)="revert()" translate="dictionary-overview.revert-changes"></div>
+            <div *ngIf="hasChanges && permissionsService.isAdmin()" [class.offset]="compareForm.get('active').value" class="changes-box">
+                <redaction-icon-button (action)="saveEntries()" icon="red:check" text="dictionary-overview.save-changes" type="primary"></redaction-icon-button>
+                <div (click)="revert()" class="all-caps-label cancel" translate="dictionary-overview.revert-changes"></div>
             </div>
         </div>
 
         <div class="right-container">
             <div class="dictionary-header">
-                <div class="color-box" [style.backgroundColor]="dictionary.hexColor"></div>
+                <div [style.backgroundColor]="dictionary.hexColor" class="color-box"></div>
                 <div class="heading-xl">
                     {{ dictionary.type | humanize }}
                 </div>
@@ -166,7 +166,7 @@
                 </div>
             </div>
 
-            <div class="pb-32 mt-20" *ngIf="!!dictionary.description">
+            <div *ngIf="!!dictionary.description" class="pb-32 mt-20">
                 <div class="heading" translate="dictionary-overview.dictionary-details.description"></div>
                 <div class="mt-8">{{ dictionary.description }}</div>
             </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss
index a6a294618..242fa4bdc 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss
@@ -102,6 +102,7 @@
     flex: 1;
     justify-content: flex-end;
     align-items: center;
+
     .red-input-group {
         margin-top: 0;
     }
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index 40569c5ac..8c463c46d 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -3,7 +3,7 @@
         <redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
 
         <div class="actions flex-1">
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" icon="red:close" tooltip="common.close" tooltipPosition="below"></redaction-circle-button>
         </div>
     </div>
 
@@ -27,11 +27,11 @@
                 </span>
 
                 <redaction-circle-button
+                    (click)="openConfirmDeleteAttributeDialog($event)"
                     *ngIf="areSomeEntitiesSelected"
+                    icon="red:trash"
                     tooltip="file-attributes-listing.bulk-actions.delete"
                     type="dark-bg"
-                    icon="red:trash"
-                    (click)="openConfirmDeleteAttributeDialog($event)"
                 >
                 </redaction-circle-button>
 
@@ -39,19 +39,19 @@
 
                 <div class="attributes-actions-container">
                     <redaction-search-input [form]="searchForm" [placeholder]="'file-attributes-listing.search'"></redaction-search-input>
-                    <input #fileInput (change)="importCSV($event.target['files'])" class="csv-input" type="file" accept=".csv" />
+                    <input #fileInput (change)="importCSV($event.target['files'])" accept=".csv" class="csv-input" type="file" />
 
                     <redaction-circle-button
                         (action)="fileInput.click()"
+                        icon="red:upload"
                         tooltip="file-attributes-listing.upload-csv"
                         tooltipPosition="above"
-                        icon="red:upload"
                         type="dark-bg"
                     ></redaction-circle-button>
 
                     <redaction-icon-button
-                        icon="red:plus"
                         (action)="openAddEditAttributeDialog($event)"
+                        icon="red:plus"
                         text="file-attributes-listing.add-new"
                         type="primary"
                     ></redaction-icon-button>
@@ -62,37 +62,37 @@
                 <div class="select-oval-placeholder"></div>
 
                 <redaction-table-col-name
-                    label="file-attributes-listing.table-col-names.name"
                     (toggleSort)="toggleSort($event)"
                     [activeSortingOption]="sortingOption"
                     [withSort]="true"
                     column="label"
+                    label="file-attributes-listing.table-col-names.name"
                 ></redaction-table-col-name>
 
                 <redaction-table-col-name
-                    label="file-attributes-listing.table-col-names.type"
                     (toggleSort)="toggleSort($event)"
                     [activeSortingOption]="sortingOption"
                     [withSort]="true"
                     column="type"
+                    label="file-attributes-listing.table-col-names.type"
                 ></redaction-table-col-name>
 
                 <redaction-table-col-name
-                    label="file-attributes-listing.table-col-names.read-only"
-                    class="flex-center"
                     (toggleSort)="toggleSort($event)"
                     [activeSortingOption]="sortingOption"
                     [withSort]="true"
+                    class="flex-center"
                     column="editable"
+                    label="file-attributes-listing.table-col-names.read-only"
                 ></redaction-table-col-name>
 
                 <redaction-table-col-name label="file-attributes-listing.table-col-names.csv-column"></redaction-table-col-name>
 
                 <redaction-table-col-name
+                    class="flex-center"
                     label="file-attributes-listing.table-col-names.primary"
                     rightIcon="red:status-info"
                     rightIconTooltip="file-attributes-listing.table-col-names.primary-info-tooltip"
-                    class="flex-center"
                 ></redaction-table-col-name>
 
                 <div></div>
@@ -100,7 +100,7 @@
                 <div class="scrollbar-placeholder"></div>
             </div>
 
-            <redaction-empty-state *ngIf="!allEntities.length" screen="file-attributes-listing" icon="red:attribute"></redaction-empty-state>
+            <redaction-empty-state *ngIf="!allEntities.length" icon="red:attribute" screen="file-attributes-listing"></redaction-empty-state>
 
             <redaction-empty-state
                 *ngIf="allEntities.length && !displayedEntities.length"
@@ -110,8 +110,8 @@
 
             <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
                 <!--      Table lines -->
-                <div class="table-item" *cdkVirtualFor="let attribute of displayedEntities | sortBy: sortingOption.order:sortingOption.column">
-                    <div class="selection-column" (click)="toggleEntitySelected($event, attribute)">
+                <div *cdkVirtualFor="let attribute of displayedEntities | sortBy: sortingOption.order:sortingOption.column" class="table-item">
+                    <div (click)="toggleEntitySelected($event, attribute)" class="selection-column">
                         <redaction-round-checkbox [active]="isEntitySelected(attribute)"></redaction-round-checkbox>
                     </div>
 
@@ -119,36 +119,36 @@
                         <span>{{ attribute.label }}</span>
                     </div>
 
-                    <div class="small-label" [translate]="'file-attribute-types.' + attribute.type"></div>
+                    <div [translate]="'file-attribute-types.' + attribute.type" class="small-label"></div>
 
                     <div class="center read-only">
                         <mat-icon
-                            svgIcon="red:read-only"
                             *ngIf="!attribute.editable"
                             [matTooltip]="'file-attributes-listing.read-only' | translate"
                             matTooltipPosition="above"
+                            svgIcon="red:read-only"
                         ></mat-icon>
                     </div>
                     <div class="small-label">
                         {{ attribute.csvColumnHeader }}
                     </div>
                     <div class="center">
-                        <redaction-round-checkbox *ngIf="attribute.primaryAttribute" [size]="18" [active]="true"></redaction-round-checkbox>
+                        <redaction-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></redaction-round-checkbox>
                     </div>
                     <div class="actions-container">
                         <div class="action-buttons">
                             <redaction-circle-button
                                 (action)="openAddEditAttributeDialog($event, attribute)"
+                                icon="red:edit"
                                 tooltip="file-attributes-listing.action.edit"
                                 type="dark-bg"
-                                icon="red:edit"
                             >
                             </redaction-circle-button>
                             <redaction-circle-button
                                 (action)="openConfirmDeleteAttributeDialog($event, attribute)"
+                                icon="red:trash"
                                 tooltip="file-attributes-listing.action.delete"
                                 type="dark-bg"
-                                icon="red:trash"
                             >
                             </redaction-circle-button>
                         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
index 63aaeeb9e..c246bd3df 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
@@ -5,7 +5,7 @@
         <div class="flex-1 actions">
             <redaction-rule-set-actions></redaction-rule-set-actions>
 
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" icon="red:close" tooltip="common.close" tooltipPosition="below"></redaction-circle-button>
         </div>
     </div>
 
@@ -17,20 +17,20 @@
         <div class="editor-container">
             <ace-editor
                 #editorComponent
-                [mode]="'java'"
-                [theme]="'eclipse'"
-                [options]="aceOptions"
-                [readOnly]="!permissionsService.isAdmin()"
                 (textChanged)="textChanged($event)"
                 [autoUpdateContent]="true"
+                [mode]="'java'"
+                [options]="aceOptions"
+                [readOnly]="!permissionsService.isAdmin()"
                 [text]="rules"
+                [theme]="'eclipse'"
                 class="ace-redaction"
             >
             </ace-editor>
         </div>
-        <div class="changes-box" *ngIf="hasChanges && permissionsService.isAdmin()">
-            <redaction-icon-button icon="red:check" (action)="save()" text="rules-screen.save-changes" type="primary"></redaction-icon-button>
-            <div (click)="revert()" translate="rules-screen.revert-changes" class="all-caps-label cancel"></div>
+        <div *ngIf="hasChanges && permissionsService.isAdmin()" class="changes-box">
+            <redaction-icon-button (action)="save()" icon="red:check" text="rules-screen.save-changes" type="primary"></redaction-icon-button>
+            <div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
         </div>
     </div>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
index d85f80a3b..f23aaf099 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
@@ -3,7 +3,7 @@
         <redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
 
         <div class="actions flex-1">
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" icon="red:close" tooltip="common.close" tooltipPosition="below"></redaction-circle-button>
         </div>
     </div>
 
@@ -14,31 +14,31 @@
 
         <div class="content-container">
             <div #viewer class="viewer"></div>
-            <div class="changes-box" *ngIf="changed && permissionsService.isAdmin()">
+            <div *ngIf="changed && permissionsService.isAdmin()" class="changes-box">
                 <redaction-icon-button
+                    (action)="save()"
                     [disabled]="configForm.invalid"
                     icon="red:check"
-                    (action)="save()"
                     text="watermark-screen.action.save"
                     type="primary"
                 ></redaction-icon-button>
-                <div (click)="revert()" translate="watermark-screen.action.revert" class="all-caps-label cancel"></div>
+                <div (click)="revert()" class="all-caps-label cancel" translate="watermark-screen.action.revert"></div>
             </div>
         </div>
 
         <div class="right-container" redactionHasScrollbar>
-            <div class="heading-xl" [translate]="'watermark-screen.title'"></div>
-            <form [formGroup]="configForm" (keyup)="configChanged()">
+            <div [translate]="'watermark-screen.title'" class="heading-xl"></div>
+            <form (keyup)="configChanged()" [formGroup]="configForm">
                 <div class="red-input-group w-300">
                     <textarea
-                        redactionHasScrollbar
-                        formControlName="text"
-                        [placeholder]="'watermark-screen.form.text-placeholder' | translate"
                         (mousemove)="triggerChanges()"
+                        [placeholder]="'watermark-screen.form.text-placeholder' | translate"
                         class="w-full"
+                        formControlName="text"
                         name="text"
-                        type="text"
+                        redactionHasScrollbar
                         rows="4"
+                        type="text"
                     ></textarea>
                 </div>
 
@@ -46,11 +46,11 @@
                     <label class="all-caps-label mb-8" translate="watermark-screen.form.orientation"></label>
                     <div class="square-options">
                         <div
+                            (click)="setValue('orientation', option)"
+                            *ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
                             [class.active]="configForm.get('orientation').value === option"
                             [class.disabled]="configForm.get('orientation').disabled"
                             [ngClass]="option"
-                            (click)="setValue('orientation', option)"
-                            *ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
                         >
                             <span>ABC</span>
                         </div>
@@ -59,33 +59,33 @@
 
                 <div class="red-input-group">
                     <label class="all-caps-label" translate="watermark-screen.form.font-size"></label>
-                    <mat-slider formControlName="fontSize" min="5" max="50" color="primary" (change)="configChanged()"></mat-slider>
+                    <mat-slider (change)="configChanged()" color="primary" formControlName="fontSize" max="50" min="5"></mat-slider>
                 </div>
 
                 <div class="red-input-group">
                     <label class="all-caps-label" translate="watermark-screen.form.opacity"></label>
-                    <mat-slider formControlName="opacity" min="1" color="primary" (change)="configChanged()"></mat-slider>
+                    <mat-slider (change)="configChanged()" color="primary" formControlName="opacity" min="1"></mat-slider>
                 </div>
 
                 <div class="red-input-group w-150">
                     <label class="all-caps-label mb-5" translate="watermark-screen.form.color"></label>
                     <input
-                        formControlName="hexColor"
                         class="hex-color-input"
+                        formControlName="hexColor"
                         name="hexColor"
-                        type="text"
                         placeholder="{{ 'add-edit-dictionary.form.color-placeholder' | translate }}"
+                        type="text"
                     />
                     <div
-                        class="input-icon"
+                        (colorPickerChange)="setValue('hexColor', $event)"
                         [class.disabled]="configForm.get('hexColor').disabled"
-                        [style.background]="configForm.get('hexColor').value"
                         [colorPicker]="configForm.get('hexColor').value"
                         [cpDisabled]="configForm.get('hexColor').disabled"
                         [cpOutputFormat]="'hex'"
                         [cpPosition]="'top-right'"
                         [cpUseRootViewContainer]="true"
-                        (colorPickerChange)="setValue('hexColor', $event)"
+                        [style.background]="configForm.get('hexColor').value"
+                        class="input-icon"
                     >
                         <mat-icon
                             *ngIf="!configForm.get('hexColor')?.value || configForm.get('hexColor').value?.length === 0"
@@ -98,9 +98,6 @@
                     <label class="all-caps-label mb-8" translate="watermark-screen.form.font-type"></label>
                     <div class="square-options">
                         <div
-                            [class.active]="configForm.get('fontType').value === option.value"
-                            [class.disabled]="configForm.get('fontType').disabled"
-                            [ngClass]="option.value"
                             (click)="setValue('fontType', option.value)"
                             *ngFor="
                                 let option of [
@@ -109,6 +106,9 @@
                                     { value: 'courier', display: 'Courier' }
                                 ]
                             "
+                            [class.active]="configForm.get('fontType').value === option.value"
+                            [class.disabled]="configForm.get('fontType').disabled"
+                            [ngClass]="option.value"
                         >
                             {{ option.display }}
                         </div>
diff --git a/apps/red-ui/src/app/modules/projects/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/projects/components/annotation-actions/annotation-actions.component.html
index ef42f3041..936fdffbe 100644
--- a/apps/red-ui/src/app/modules/projects/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/annotation-actions/annotation-actions.component.html
@@ -1,87 +1,87 @@
-<div [class.visible]="menuOpen" *ngIf="canPerformAnnotationActions" class="annotation-actions">
+<div *ngIf="canPerformAnnotationActions" [class.visible]="menuOpen" class="annotation-actions">
     <redaction-circle-button
         (action)="annotationActionsService.forceRedaction($event, [annotation], annotationsChanged)"
-        type="dark-bg"
         *ngIf="annotationPermissions.canForceRedaction"
-        tooltipPosition="before"
-        tooltip="annotation-actions.force-redaction.label"
         icon="red:thumb-up"
+        tooltip="annotation-actions.force-redaction.label"
+        tooltipPosition="before"
+        type="dark-bg"
     >
     </redaction-circle-button>
 
     <redaction-circle-button
         (action)="annotationActionsService.convertRecommendationToAnnotation($event, [annotation], annotationsChanged)"
-        type="dark-bg"
         *ngIf="annotationPermissions.canAcceptRecommendation"
-        tooltipPosition="before"
-        tooltip="annotation-actions.accept-recommendation.label"
         icon="red:check"
+        tooltip="annotation-actions.accept-recommendation.label"
+        tooltipPosition="before"
+        type="dark-bg"
     >
     </redaction-circle-button>
 
     <redaction-circle-button
         (action)="annotationActionsService.markAsFalsePositive($event, [annotation], annotationsChanged)"
-        type="dark-bg"
         *ngIf="annotationPermissions.canMarkTextOnlyAsFalsePositive && !annotationPermissions.canPerformMultipleRemoveActions"
-        tooltipPosition="before"
-        tooltip="annotation-actions.remove-annotation.false-positive"
         icon="red:thumb-down"
+        tooltip="annotation-actions.remove-annotation.false-positive"
+        tooltipPosition="before"
+        type="dark-bg"
     >
     </redaction-circle-button>
 
     <redaction-circle-button
         (action)="annotationActionsService.acceptSuggestion($event, [annotation], annotationsChanged)"
-        type="dark-bg"
         *ngIf="annotationPermissions.canAcceptSuggestion"
-        tooltipPosition="before"
-        tooltip="annotation-actions.accept-suggestion.label"
         icon="red:check"
+        tooltip="annotation-actions.accept-suggestion.label"
+        tooltipPosition="before"
+        type="dark-bg"
     >
     </redaction-circle-button>
 
     <redaction-circle-button
         (action)="annotationActionsService.undoDirectAction($event, [annotation], annotationsChanged)"
         *ngIf="annotationPermissions.canUndo"
-        type="dark-bg"
         icon="red:undo"
-        tooltipPosition="before"
         tooltip="annotation-actions.undo"
+        tooltipPosition="before"
+        type="dark-bg"
     >
     </redaction-circle-button>
 
     <redaction-circle-button
         (action)="hideAnnotation($event)"
         *ngIf="annotation.isImage && viewerAnnotation?.isVisible()"
-        type="dark-bg"
         icon="red:visibility-off"
-        tooltipPosition="before"
         tooltip="annotation-actions.hide"
+        tooltipPosition="before"
+        type="dark-bg"
     >
     </redaction-circle-button>
 
     <redaction-circle-button
         (action)="showAnnotation($event)"
         *ngIf="annotation.isImage && !viewerAnnotation?.isVisible()"
-        type="dark-bg"
         icon="red:visibility"
-        tooltipPosition="before"
         tooltip="annotation-actions.show"
+        tooltipPosition="before"
+        type="dark-bg"
     >
     </redaction-circle-button>
 
     <redaction-circle-button
         (action)="annotationActionsService.rejectSuggestion($event, [annotation], annotationsChanged)"
-        type="dark-bg"
-        icon="red:close"
         *ngIf="annotationPermissions.canRejectSuggestion"
-        tooltipPosition="before"
+        icon="red:close"
         tooltip="annotation-actions.reject-suggestion"
+        tooltipPosition="before"
+        type="dark-bg"
     >
     </redaction-circle-button>
 
     <redaction-annotation-remove-actions
-        [annotations]="[annotation]"
         [(menuOpen)]="menuOpen"
         [annotationsChanged]="annotationsChanged"
+        [annotations]="[annotation]"
     ></redaction-annotation-remove-actions>
 </div>
diff --git a/apps/red-ui/src/app/modules/projects/components/annotation-remove-actions/annotation-remove-actions.component.html b/apps/red-ui/src/app/modules/projects/components/annotation-remove-actions/annotation-remove-actions.component.html
index 13a9889e0..42ea10cf7 100644
--- a/apps/red-ui/src/app/modules/projects/components/annotation-remove-actions/annotation-remove-actions.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/annotation-remove-actions/annotation-remove-actions.component.html
@@ -1,37 +1,37 @@
 <redaction-circle-button
     (action)="suggestRemoveAnnotations($event, false)"
-    [type]="btnType"
-    icon="red:trash"
     *ngIf="permissions.canRemoveOrSuggestToRemoveOnlyHere && permissions.canNotPerformMultipleRemoveActions"
     [tooltipPosition]="tooltipPosition"
+    [type]="btnType"
+    icon="red:trash"
     tooltip="annotation-actions.suggest-remove-annotation"
 >
 </redaction-circle-button>
 
 <redaction-circle-button
-    *ngIf="permissions.canPerformMultipleRemoveActions"
     (action)="openMenu($event)"
+    *ngIf="permissions.canPerformMultipleRemoveActions"
     [class.active]="menuOpen"
     [matMenuTriggerFor]="menu"
     [tooltipPosition]="tooltipPosition"
-    tooltip="annotation-actions.suggest-remove-annotation"
     [type]="btnType"
     icon="red:trash"
+    tooltip="annotation-actions.suggest-remove-annotation"
 >
 </redaction-circle-button>
 
 <mat-menu #menu="matMenu" (closed)="onMenuClosed()" xPosition="before">
-    <div (click)="suggestRemoveAnnotations($event, true)" mat-menu-item *ngIf="permissions.canRemoveOrSuggestToRemoveFromDictionary">
-        <redaction-annotation-icon [type]="'rhombus'" [label]="'S'" [color]="dictionaryColor"></redaction-annotation-icon>
+    <div (click)="suggestRemoveAnnotations($event, true)" *ngIf="permissions.canRemoveOrSuggestToRemoveFromDictionary" mat-menu-item>
+        <redaction-annotation-icon [color]="dictionaryColor" [label]="'S'" [type]="'rhombus'"></redaction-annotation-icon>
         <div [translate]="'annotation-actions.remove-annotation.remove-from-dict'"></div>
     </div>
-    <div (click)="suggestRemoveAnnotations($event, false)" mat-menu-item *ngIf="permissions.canRemoveOrSuggestToRemoveOnlyHere">
-        <redaction-annotation-icon [type]="'rhombus'" [label]="'S'" [color]="suggestionColor"></redaction-annotation-icon>
+    <div (click)="suggestRemoveAnnotations($event, false)" *ngIf="permissions.canRemoveOrSuggestToRemoveOnlyHere" mat-menu-item>
+        <redaction-annotation-icon [color]="suggestionColor" [label]="'S'" [type]="'rhombus'"></redaction-annotation-icon>
         <div translate="annotation-actions.remove-annotation.only-here"></div>
     </div>
 
-    <div (click)="markAsFalsePositive($event)" mat-menu-item *ngIf="permissions.canMarkAsFalsePositive">
-        <mat-icon svgIcon="red:thumb-down" class="false-positive-icon"></mat-icon>
+    <div (click)="markAsFalsePositive($event)" *ngIf="permissions.canMarkAsFalsePositive" mat-menu-item>
+        <mat-icon class="false-positive-icon" svgIcon="red:thumb-down"></mat-icon>
         <div translate="annotation-actions.remove-annotation.false-positive"></div>
     </div>
 </mat-menu>
diff --git a/apps/red-ui/src/app/modules/projects/components/bulk-actions/project-overview-bulk-actions.component.html b/apps/red-ui/src/app/modules/projects/components/bulk-actions/project-overview-bulk-actions.component.html
index c6a2cc3e7..20c695b5b 100644
--- a/apps/red-ui/src/app/modules/projects/components/bulk-actions/project-overview-bulk-actions.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/bulk-actions/project-overview-bulk-actions.component.html
@@ -2,31 +2,31 @@
     <redaction-circle-button
         (action)="delete()"
         *ngIf="canDelete"
+        icon="red:trash"
         tooltip="project-overview.bulk.delete"
         type="dark-bg"
-        icon="red:trash"
     ></redaction-circle-button>
 
     <redaction-circle-button
         (action)="assign()"
         *ngIf="canAssign"
+        icon="red:assign"
         tooltip="project-overview.bulk.assign"
         type="dark-bg"
-        icon="red:assign"
     ></redaction-circle-button>
 
-    <redaction-file-download-btn [project]="project" [file]="selectedFiles"> </redaction-file-download-btn>
+    <redaction-file-download-btn [file]="selectedFiles" [project]="project"></redaction-file-download-btn>
 
     <redaction-circle-button
         (action)="setToUnderApproval()"
         *ngIf="canSetToUnderApproval"
+        icon="red:ready-for-approval"
         tooltip="project-overview.under-approval"
         type="dark-bg"
-        icon="red:ready-for-approval"
     >
     </redaction-circle-button>
 
-    <redaction-circle-button (action)="setToUnderReview()" *ngIf="canSetToUnderReview" tooltip="project-overview.under-review" type="dark-bg" icon="red:undo">
+    <redaction-circle-button (action)="setToUnderReview()" *ngIf="canSetToUnderReview" icon="red:undo" tooltip="project-overview.under-review" type="dark-bg">
     </redaction-circle-button>
 
     <!-- Approved-->
@@ -34,24 +34,24 @@
         (action)="approveDocuments()"
         *ngIf="isReadyForApproval"
         [disabled]="!canApprove"
-        type="dark-bg"
-        icon="red:approved"
         [tooltip]="canApprove ? 'project-overview.approve' : 'project-overview.approve-disabled'"
+        icon="red:approved"
+        type="dark-bg"
     >
     </redaction-circle-button>
 
     <!-- Back to approval -->
-    <redaction-circle-button (action)="setToUnderApproval()" *ngIf="canUndoApproval" tooltip="project-overview.under-approval" type="dark-bg" icon="red:undo">
+    <redaction-circle-button (action)="setToUnderApproval()" *ngIf="canUndoApproval" icon="red:undo" tooltip="project-overview.under-approval" type="dark-bg">
     </redaction-circle-button>
 
-    <redaction-circle-button (action)="ocr()" *ngIf="canOcr" tooltip="project-overview.ocr-file" type="dark-bg" icon="red:ocr"></redaction-circle-button>
+    <redaction-circle-button (action)="ocr()" *ngIf="canOcr" icon="red:ocr" tooltip="project-overview.ocr-file" type="dark-bg"></redaction-circle-button>
 
     <redaction-circle-button
         (action)="reanalyse()"
         *ngIf="canReanalyse"
+        icon="red:refresh"
         tooltip="project-overview.bulk.reanalyse"
         type="dark-bg"
-        icon="red:refresh"
     ></redaction-circle-button>
 </ng-container>
 
diff --git a/apps/red-ui/src/app/modules/projects/components/comments/comments.component.html b/apps/red-ui/src/app/modules/projects/components/comments/comments.component.html
index 0696858b6..68c459c82 100644
--- a/apps/red-ui/src/app/modules/projects/components/comments/comments.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/comments/comments.component.html
@@ -34,7 +34,7 @@
 
     <form (submit)="addComment()" *ngIf="addingComment && permissionsService.canAddComment()" [formGroup]="commentForm">
         <div class="red-input-group">
-            <input [placeholder]="translateService.instant('comments.add-comment')" formControlName="comment" name="comment" type="text" class="w-full" />
+            <input [placeholder]="translateService.instant('comments.add-comment')" class="w-full" formControlName="comment" name="comment" type="text" />
         </div>
     </form>
 
diff --git a/apps/red-ui/src/app/modules/projects/components/comments/comments.component.scss b/apps/red-ui/src/app/modules/projects/components/comments/comments.component.scss
index cd89c143a..60620bb3d 100644
--- a/apps/red-ui/src/app/modules/projects/components/comments/comments.component.scss
+++ b/apps/red-ui/src/app/modules/projects/components/comments/comments.component.scss
@@ -42,6 +42,7 @@
             .comment-icon.comment-owner {
                 display: none;
             }
+
             .trash-icon.comment-owner {
                 display: initial;
             }
diff --git a/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.html b/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.html
index 21527bc31..027063856 100644
--- a/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.html
@@ -1,23 +1,23 @@
 <div class="right-title heading" translate="file-preview.tabs.document-info.label">
     <div>
         <redaction-circle-button
-            icon="red:edit"
             (action)="edit()"
-            tooltipPosition="before"
+            icon="red:edit"
             tooltip="file-preview.tabs.document-info.edit"
+            tooltipPosition="before"
         ></redaction-circle-button>
         <redaction-circle-button
-            icon="red:close"
             (action)="closeDocumentInfoView.emit()"
-            tooltipPosition="before"
+            icon="red:close"
             tooltip="file-preview.tabs.document-info.close"
+            tooltipPosition="before"
         ></redaction-circle-button>
     </div>
 </div>
 
 <div class="right-content" redactionHasScrollbar>
     <div class="section">
-        <div class="attribute" *ngFor="let attr of fileAttributesConfig?.fileAttributeConfigs">
+        <div *ngFor="let attr of fileAttributesConfig?.fileAttributeConfigs" class="attribute">
             <div class="small-label">{{ attr.label }}:</div>
             <div>{{ (file.fileAttributes?.attributeIdToValue)[attr.id] || '-' }}</div>
         </div>
diff --git a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html
index 1fe34414c..7bcdfe0ea 100644
--- a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html
@@ -1,4 +1,4 @@
-<div class="action-buttons" [class.active]="actionMenuOpen" *ngIf="screen === 'project-overview'">
+<div *ngIf="screen === 'project-overview'" [class.active]="actionMenuOpen" class="action-buttons">
     <ng-container *ngTemplateOutlet="actions"></ng-container>
     <redaction-status-bar
         *ngIf="fileStatus.isWorkable"
@@ -41,21 +41,21 @@
 
         <!-- download redacted file-->
         <redaction-file-download-btn
+            [file]="fileStatus"
+            [project]="appStateService.activeProject"
             [tooltipClass]="'small'"
             [tooltipPosition]="tooltipPosition"
             [type]="buttonType"
-            [project]="appStateService.activeProject"
-            [file]="fileStatus"
         >
         </redaction-file-download-btn>
 
         <redaction-circle-button
-            *ngIf="screen === 'file-preview'"
             (action)="toggleViewDocumentInfo()"
+            *ngIf="screen === 'file-preview'"
+            [attr.aria-expanded]="activeDocumentInfo"
+            icon="red:status-info"
             tooltip="file-preview.document-info"
             tooltipPosition="below"
-            icon="red:status-info"
-            [attr.aria-expanded]="activeDocumentInfo"
         ></redaction-circle-button>
 
         <!-- Ready for approval-->
@@ -86,9 +86,9 @@
             *ngIf="permissionsService.isReadyForApproval(fileStatus)"
             [disabled]="!permissionsService.canApprove(fileStatus)"
             [tooltipPosition]="tooltipPosition"
+            [tooltip]="permissionsService.canApprove(fileStatus) ? 'project-overview.approve' : 'project-overview.approve-disabled'"
             [type]="buttonType"
             icon="red:approved"
-            [tooltip]="permissionsService.canApprove(fileStatus) ? 'project-overview.approve' : 'project-overview.approve-disabled'"
         >
         </redaction-circle-button>
 
@@ -117,10 +117,10 @@
         <redaction-circle-button
             (action)="reanalyseFile($event, fileStatus, 100)"
             *ngIf="permissionsService.canReanalyseFile(fileStatus) && screen === 'file-preview'"
-            tooltipPosition="below"
             icon="red:refresh"
             tooltip="file-preview.reanalyse-notification"
             tooltipClass="warn small"
+            tooltipPosition="below"
             type="warn"
         >
         </redaction-circle-button>
@@ -140,11 +140,11 @@
         <div class="red-input-group">
             <mat-slide-toggle
                 (click)="toggleAnalysis($event)"
-                [disabled]="!permissionsService.isManager()"
                 [checked]="!fileStatus?.isExcluded"
-                [matTooltip]="toggleTooltip | translate"
-                [matTooltipPosition]="tooltipPosition"
                 [class.mr-24]="screen === 'project-overview'"
+                [disabled]="!permissionsService.isManager()"
+                [matTooltipPosition]="tooltipPosition"
+                [matTooltip]="toggleTooltip | translate"
                 color="primary"
             >
             </mat-slide-toggle>
diff --git a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
index 73bb7a2be..41a8dd59a 100644
--- a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
@@ -75,7 +75,7 @@
             </div>
         </div>
 
-        <div style="overflow: hidden; width: 100%;">
+        <div style="overflow: hidden; width: 100%">
             <div attr.anotation-page-header="{{ activeViewerPage }}" class="page-separator">
                 <span *ngIf="!!activeViewerPage" class="all-caps-label"
                     ><span translate="page"></span> {{ activeViewerPage }} - {{ displayedAnnotations[activeViewerPage]?.annotations?.length || 0 }}
diff --git a/apps/red-ui/src/app/modules/projects/components/needs-work-badge/needs-work-badge.component.html b/apps/red-ui/src/app/modules/projects/components/needs-work-badge/needs-work-badge.component.html
index 336d34881..ced0314a7 100644
--- a/apps/red-ui/src/app/modules/projects/components/needs-work-badge/needs-work-badge.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/needs-work-badge/needs-work-badge.component.html
@@ -1,9 +1,9 @@
 <div class="needs-work">
-    <redaction-annotation-icon *ngIf="reanalysisRequired()" type="square" label="A" [color]="analysisColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="hasUpdates" type="square" label="U" [color]="updatedColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="needsWorkInput.hasRedactions" type="square" label="R" [color]="redactionColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="hasImages" type="square" label="I" [color]="imageColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="needsWorkInput.hintsOnly" type="circle" label="H" [color]="hintColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="needsWorkInput.hasRequests" type="rhombus" label="S" [color]="suggestionColor"></redaction-annotation-icon>
-    <mat-icon svgIcon="red:comment" *ngIf="hasAnnotationComments"></mat-icon>
+    <redaction-annotation-icon *ngIf="reanalysisRequired()" [color]="analysisColor" label="A" type="square"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="hasUpdates" [color]="updatedColor" label="U" type="square"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="needsWorkInput.hasRedactions" [color]="redactionColor" label="R" type="square"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="hasImages" [color]="imageColor" label="I" type="square"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="needsWorkInput.hintsOnly" [color]="hintColor" label="H" type="circle"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="needsWorkInput.hasRequests" [color]="suggestionColor" label="S" type="rhombus"></redaction-annotation-icon>
+    <mat-icon *ngIf="hasAnnotationComments" svgIcon="red:comment"></mat-icon>
 </div>
diff --git a/apps/red-ui/src/app/modules/projects/components/page-indicator/page-indicator.component.html b/apps/red-ui/src/app/modules/projects/components/page-indicator/page-indicator.component.html
index d912f51bd..c7db169f4 100644
--- a/apps/red-ui/src/app/modules/projects/components/page-indicator/page-indicator.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/page-indicator/page-indicator.component.html
@@ -1,14 +1,14 @@
 <div
-    class="page-wrapper"
-    [class.read]="read"
-    [class.active]="active"
-    [id]="'quick-nav-page-' + number"
     (click)="pageSelected.emit(number)"
     (dblclick)="toggleReadState()"
+    [class.active]="active"
+    [class.read]="read"
+    [id]="'quick-nav-page-' + number"
+    class="page-wrapper"
 >
-    <mat-icon svgIcon="red:page"> </mat-icon>
+    <mat-icon svgIcon="red:page"></mat-icon>
     <div class="text">
         {{ number }}
     </div>
-    <div class="dot" *ngIf="activeSelection"></div>
+    <div *ngIf="activeSelection" class="dot"></div>
 </div>
diff --git a/apps/red-ui/src/app/modules/projects/components/project-details/project-details.component.html b/apps/red-ui/src/app/modules/projects/components/project-details/project-details.component.html
index f92abf6a9..406668a84 100644
--- a/apps/red-ui/src/app/modules/projects/components/project-details/project-details.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/project-details/project-details.component.html
@@ -25,8 +25,8 @@
             <redaction-initials-avatar
                 [userId]="appStateService.activeProject.project.ownerId"
                 [withName]="true"
-                size="large"
                 color="gray"
+                size="large"
             ></redaction-initials-avatar>
         </div>
     </div>
@@ -34,8 +34,8 @@
     <div class="mt-16">
         <div class="all-caps-label" translate="project-details.members"></div>
         <redaction-team-members
-            [memberIds]="memberIds"
             (openAssignProjectMembersDialog)="openAssignProjectMembersDialog.emit()"
+            [memberIds]="memberIds"
             [perLine]="9"
         ></redaction-team-members>
     </div>
@@ -58,7 +58,7 @@
         </div>
     </div>
 
-    <div class="pb-32 small-label stats-subtitle" [class.mt-24]="!hasFiles">
+    <div [class.mt-24]="!hasFiles" class="pb-32 small-label stats-subtitle">
         <div>
             <mat-icon svgIcon="red:document"></mat-icon>
             <span>{{ 'project-overview.project-details.stats.documents' | translate: { count: appStateService.activeProject.files.length } }}</span>
@@ -93,7 +93,7 @@
         </div>
     </div>
 
-    <div class="pb-32" *ngIf="!!appStateService.activeProject.project.description">
+    <div *ngIf="!!appStateService.activeProject.project.description" class="pb-32">
         <div class="heading" translate="project-overview.project-details.description"></div>
         <div class="mt-8">{{ appStateService.activeProject.project.description }}</div>
     </div>
diff --git a/apps/red-ui/src/app/modules/projects/components/project-listing-actions/project-listing-actions.component.html b/apps/red-ui/src/app/modules/projects/components/project-listing-actions/project-listing-actions.component.html
index 8d93d75d7..16a7efa5f 100644
--- a/apps/red-ui/src/app/modules/projects/components/project-listing-actions/project-listing-actions.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/project-listing-actions/project-listing-actions.component.html
@@ -1,40 +1,40 @@
 <redaction-status-bar [config]="getProjectStatusConfig(project)"></redaction-status-bar>
-<div class="action-buttons" [class.active]="actionMenuOpen">
+<div [class.active]="actionMenuOpen" class="action-buttons">
     <redaction-circle-button
         (action)="openDeleteProjectDialog($event, project)"
         *ngIf="permissionsService.canDeleteProject(project)"
+        icon="red:trash"
         tooltip="project-listing.delete.action"
         type="dark-bg"
-        icon="red:trash"
     >
     </redaction-circle-button>
 
     <redaction-circle-button
         (action)="openEditProjectDialog($event, project)"
         *ngIf="permissionsService.isManager()"
+        icon="red:edit"
         tooltip="project-listing.edit.action"
         type="dark-bg"
-        icon="red:edit"
     >
     </redaction-circle-button>
 
     <redaction-circle-button
         (action)="openAssignProjectOwnerDialog($event, project)"
         *ngIf="permissionsService.isManager()"
+        icon="red:assign"
         tooltip="project-listing.assign.action"
         type="dark-bg"
-        icon="red:assign"
     >
     </redaction-circle-button>
 
     <redaction-circle-button
-        *ngIf="permissionsService.displayReanalyseBtn(project)"
         (action)="reanalyseProject($event, project)"
+        *ngIf="permissionsService.displayReanalyseBtn(project)"
+        icon="red:refresh"
         tooltip="project-listing.reanalyse.action"
         type="dark-bg"
-        icon="red:refresh"
     >
     </redaction-circle-button>
 
-    <redaction-file-download-btn [file]="project.files" [project]="project" type="dark-bg"> </redaction-file-download-btn>
+    <redaction-file-download-btn [file]="project.files" [project]="project" type="dark-bg"></redaction-file-download-btn>
 </div>
diff --git a/apps/red-ui/src/app/modules/projects/components/project-listing-details/project-listing-details.component.html b/apps/red-ui/src/app/modules/projects/components/project-listing-details/project-listing-details.component.html
index a4c2073f8..257783794 100644
--- a/apps/red-ui/src/app/modules/projects/components/project-listing-details/project-listing-details.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/project-listing-details/project-listing-details.component.html
@@ -1,8 +1,8 @@
 <div>
     <redaction-simple-doughnut-chart
         [config]="projectsChartData"
-        [strokeWidth]="15"
         [radius]="80"
+        [strokeWidth]="15"
         [subtitle]="'project-listing.stats.charts.projects'"
     ></redaction-simple-doughnut-chart>
 
@@ -26,11 +26,11 @@
 </div>
 <div>
     <redaction-simple-doughnut-chart
-        [config]="documentsChartData"
-        [strokeWidth]="15"
-        [radius]="80"
-        [subtitle]="'project-listing.stats.charts.total-documents'"
-        [filter]="filters.statusFilters"
         (toggleFilter)="toggleFilter('statusFilters', $event)"
+        [config]="documentsChartData"
+        [filter]="filters.statusFilters"
+        [radius]="80"
+        [strokeWidth]="15"
+        [subtitle]="'project-listing.stats.charts.total-documents'"
     ></redaction-simple-doughnut-chart>
 </div>
diff --git a/apps/red-ui/src/app/modules/projects/components/team-members/team-members.component.html b/apps/red-ui/src/app/modules/projects/components/team-members/team-members.component.html
index 0c04aa61c..a78cf5394 100644
--- a/apps/red-ui/src/app/modules/projects/components/team-members/team-members.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/team-members/team-members.component.html
@@ -1,29 +1,29 @@
-<div class="flex container" #container>
+<div #container class="flex container">
     <div
-        *ngFor="let userId of displayedMembers"
-        class="member"
-        [class.large-spacing]="largeSpacing"
-        [class.can-remove]="canRemoveMember(userId)"
         (click)="canRemoveMember(userId) && remove.emit(userId)"
+        *ngFor="let userId of displayedMembers"
+        [class.can-remove]="canRemoveMember(userId)"
+        [class.large-spacing]="largeSpacing"
+        class="member"
     >
-        <redaction-initials-avatar [userId]="userId" size="large" color="gray"></redaction-initials-avatar>
-        <div class="remove" *ngIf="canRemoveMember(userId)">
+        <redaction-initials-avatar [userId]="userId" color="gray" size="large"></redaction-initials-avatar>
+        <div *ngIf="canRemoveMember(userId)" class="remove">
             <mat-icon svgIcon="red:close"></mat-icon>
         </div>
     </div>
-    <div *ngIf="overflowCount && !expandedTeam" class="member pointer" [class.large-spacing]="largeSpacing">
-        <div class="oval large white-dark" (click)="toggleExpandedTeam()">+{{ overflowCount }}</div>
+    <div *ngIf="overflowCount && !expandedTeam" [class.large-spacing]="largeSpacing" class="member pointer">
+        <div (click)="toggleExpandedTeam()" class="oval large white-dark">+{{ overflowCount }}</div>
     </div>
     <redaction-circle-button
-        class="member"
-        [class.large-spacing]="largeSpacing"
         (action)="openAssignProjectMembersDialog.emit()"
-        icon="red:plus"
         *ngIf="permissionsService.isManager() && canAdd"
-        type="primary"
+        [class.large-spacing]="largeSpacing"
         [small]="true"
+        class="member"
+        icon="red:plus"
         tooltip="project-details.assign-members"
+        type="primary"
     >
     </redaction-circle-button>
 </div>
-<div class="all-caps-label see-less pointer" *ngIf="expandedTeam" translate="project-details.see-less" (click)="toggleExpandedTeam()"></div>
+<div (click)="toggleExpandedTeam()" *ngIf="expandedTeam" class="all-caps-label see-less pointer" translate="project-details.see-less"></div>
diff --git a/apps/red-ui/src/app/modules/projects/components/type-annotation-icon/type-annotation-icon.component.html b/apps/red-ui/src/app/modules/projects/components/type-annotation-icon/type-annotation-icon.component.html
index 7a45997b9..22eb999b5 100644
--- a/apps/red-ui/src/app/modules/projects/components/type-annotation-icon/type-annotation-icon.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/type-annotation-icon/type-annotation-icon.component.html
@@ -1 +1 @@
-<redaction-annotation-icon [color]="color" [type]="type" [label]="label"> </redaction-annotation-icon>
+<redaction-annotation-icon [color]="color" [label]="label" [type]="type"></redaction-annotation-icon>
diff --git a/apps/red-ui/src/app/modules/projects/components/type-filter/type-filter.component.html b/apps/red-ui/src/app/modules/projects/components/type-filter/type-filter.component.html
index 5284b95ee..c860ce914 100644
--- a/apps/red-ui/src/app/modules/projects/components/type-filter/type-filter.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/type-filter/type-filter.component.html
@@ -1,15 +1,15 @@
 <ng-container *ngIf="!filter.icon">
-    <redaction-annotation-icon *ngIf="filter.key === 'redaction'" type="square" label="R" [color]="dictionaryColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="filter.key === 'recommendation'" type="hexagon" label="R" [color]="dictionaryColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="filter.key === 'hint'" type="circle" label="H" [color]="dictionaryColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="filter.key === 'manual-redaction'" type="square" label="M" [color]="dictionaryColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="filter.key === 'skipped'" type="square" label="S" [color]="dictionaryColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="isSuggestion(filter.key)" type="rhombus" label="S" [color]="dictionaryColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="needsAnalysis(filter.key)" type="square" label="A" [color]="dictionaryColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="filter.key === 'declined-suggestion'" type="rhombus" label="S" [color]="dictionaryColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="filter.key === 'none'" label="-" color="transparent" type="none"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="filter.key === 'updated'" type="square" label="U" [color]="dictionaryColor"></redaction-annotation-icon>
-    <redaction-annotation-icon *ngIf="filter.key === 'image'" type="square" label="I" [color]="dictionaryColor"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="filter.key === 'redaction'" [color]="dictionaryColor" label="R" type="square"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="filter.key === 'recommendation'" [color]="dictionaryColor" label="R" type="hexagon"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="filter.key === 'hint'" [color]="dictionaryColor" label="H" type="circle"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="filter.key === 'manual-redaction'" [color]="dictionaryColor" label="M" type="square"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="filter.key === 'skipped'" [color]="dictionaryColor" label="S" type="square"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="isSuggestion(filter.key)" [color]="dictionaryColor" label="S" type="rhombus"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="needsAnalysis(filter.key)" [color]="dictionaryColor" label="A" type="square"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="filter.key === 'declined-suggestion'" [color]="dictionaryColor" label="S" type="rhombus"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="filter.key === 'none'" color="transparent" label="-" type="none"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="filter.key === 'updated'" [color]="dictionaryColor" label="U" type="square"></redaction-annotation-icon>
+    <redaction-annotation-icon *ngIf="filter.key === 'image'" [color]="dictionaryColor" label="I" type="square"></redaction-annotation-icon>
 </ng-container>
 
 <ng-container *ngIf="filter.icon">
diff --git a/apps/red-ui/src/app/modules/projects/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html b/apps/red-ui/src/app/modules/projects/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
index 8e0161806..d7ee77d0a 100644
--- a/apps/red-ui/src/app/modules/projects/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
+++ b/apps/red-ui/src/app/modules/projects/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
@@ -9,21 +9,21 @@
             <div class="red-input-group required w-300">
                 <label translate="project-listing.add-edit-dialog.form.name.label"></label>
                 <input
+                    [placeholder]="'project-listing.add-edit-dialog.form.name.placeholder' | translate"
                     formControlName="projectName"
                     name="projectName"
                     type="text"
-                    [placeholder]="'project-listing.add-edit-dialog.form.name.placeholder' | translate"
                 />
             </div>
 
             <div class="red-input-group required w-400">
                 <mat-form-field floatLabel="always">
                     <mat-label>{{ 'project-listing.add-edit-dialog.form.template' | translate }}</mat-label>
-                    <mat-select formControlName="ruleSetId" style="width: 100%;" (valueChange)="ruleSetChanged($event)">
+                    <mat-select (valueChange)="ruleSetChanged($event)" formControlName="ruleSetId" style="width: 100%">
                         <mat-option
                             *ngFor="let ruleSet of ruleSets"
-                            [value]="ruleSet.ruleSetId"
                             [matTooltip]="ruleSet.description ? ruleSet.description : ruleSet.name"
+                            [value]="ruleSet.ruleSetId"
                             matTooltipPosition="after"
                         >
                             {{ ruleSet.name }}
@@ -35,23 +35,23 @@
             <div class="red-input-group w-400">
                 <label translate="project-listing.add-edit-dialog.form.description.label"></label>
                 <textarea
-                    redactionHasScrollbar
+                    [placeholder]="'project-listing.add-edit-dialog.form.description.placeholder' | translate"
                     formControlName="description"
                     name="description"
-                    type="text"
+                    redactionHasScrollbar
                     rows="5"
-                    [placeholder]="'project-listing.add-edit-dialog.form.description.placeholder' | translate"
+                    type="text"
                 ></textarea>
             </div>
 
             <div class="due-date">
-                <mat-checkbox [checked]="hasDueDate" (change)="hasDueDate = !hasDueDate" class="filter-menu-checkbox" color="primary">
+                <mat-checkbox (change)="hasDueDate = !hasDueDate" [checked]="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">
+                <div *ngIf="hasDueDate" class="red-input-group datepicker-wrapper">
+                    <input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
+                    <mat-datepicker-toggle [for]="picker" matSuffix>
                         <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                     </mat-datepicker-toggle>
                     <mat-datepicker #picker></mat-datepicker>
@@ -61,17 +61,17 @@
             <p class="download-includes">{{ 'download-includes' | translate }}</p>
             <div class="space-between">
                 <redaction-select
-                    class="w-410"
+                    [label]="'report-type.label' | translate: { length: reportTypesLength }"
                     [options]="reportTypesEnum"
                     [translatePrefix]="'report-type.'"
-                    [label]="'report-type.label' | translate: { length: reportTypesLength }"
+                    class="w-410"
                     formControlName="reportTypes"
                 ></redaction-select>
                 <redaction-select
-                    class="w-410"
+                    [label]="'download-type.label' | translate: { length: downloadFileTypesLength }"
                     [options]="downloadTypesEnum"
                     [translatePrefix]="'download-type.'"
-                    [label]="'download-type.label' | translate: { length: downloadFileTypesLength }"
+                    class="w-410"
                     formControlName="downloadFileTypes"
                 ></redaction-select>
             </div>
@@ -83,15 +83,15 @@
             </button>
 
             <redaction-icon-button
-                [disabled]="disabled || !changed"
                 (action)="saveProjectAndAddMembers()"
                 *ngIf="!project?.projectId"
-                text="project-listing.add-edit-dialog.actions.save-and-add-members"
+                [disabled]="disabled || !changed"
                 icon="red:assign"
+                text="project-listing.add-edit-dialog.actions.save-and-add-members"
                 type="show-bg"
             ></redaction-icon-button>
         </div>
     </form>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/projects/dialogs/assign-owner-dialog/assign-owner-dialog.component.html b/apps/red-ui/src/app/modules/projects/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
index f91abc1cf..d4b864b01 100644
--- a/apps/red-ui/src/app/modules/projects/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
+++ b/apps/red-ui/src/app/modules/projects/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
@@ -2,7 +2,7 @@
     <div [translate]="'assign-' + data.type + '-owner.dialog.title'" class="dialog-header heading-l"></div>
 
     <form (submit)="saveUsers()" [formGroup]="usersForm">
-        <div class="dialog-content" [class.no-padding-bottom]="data.type === 'project'">
+        <div [class.no-padding-bottom]="data.type === 'project'" class="dialog-content">
             <div class="red-input-group w-300">
                 <mat-form-field floatLabel="always">
                     <mat-label>{{ 'assign-' + data.type + '-owner.dialog.single-user' | translate }}</mat-label>
@@ -14,53 +14,53 @@
                 </mat-form-field>
             </div>
             <ng-container *ngIf="data.type === 'project'">
-                <div class="all-caps-label mt-16" [translate]="'assign-' + data.type + '-owner.dialog.approvers'"></div>
+                <div [translate]="'assign-' + data.type + '-owner.dialog.approvers'" class="all-caps-label mt-16"></div>
                 <redaction-team-members
-                    [memberIds]="selectedApproversList"
-                    [canAdd]="false"
-                    [largeSpacing]="true"
-                    [canRemove]="true"
-                    [unremovableMembers]="[selectedSingleUser]"
                     (remove)="toggleSelected($event)"
+                    [canAdd]="false"
+                    [canRemove]="true"
+                    [largeSpacing]="true"
+                    [memberIds]="selectedApproversList"
                     [perLine]="13"
+                    [unremovableMembers]="[selectedSingleUser]"
                 ></redaction-team-members>
 
                 <pre
                     *ngIf="selectedApproversList.length === 0"
-                    class="info"
                     [innerHTML]="'assign-' + data.type + '-owner.dialog.no-approvers' | translate"
+                    class="info"
                 ></pre>
 
-                <div class="all-caps-label mt-16" [translate]="'assign-' + data.type + '-owner.dialog.reviewers'"></div>
+                <div [translate]="'assign-' + data.type + '-owner.dialog.reviewers'" class="all-caps-label mt-16"></div>
                 <redaction-team-members
-                    [memberIds]="selectedReviewersList"
-                    [canAdd]="false"
-                    [largeSpacing]="true"
-                    [canRemove]="true"
-                    [unremovableMembers]="[selectedSingleUser]"
                     (remove)="toggleSelected($event)"
+                    [canAdd]="false"
+                    [canRemove]="true"
+                    [largeSpacing]="true"
+                    [memberIds]="selectedReviewersList"
                     [perLine]="13"
+                    [unremovableMembers]="[selectedSingleUser]"
                 ></redaction-team-members>
 
                 <pre
                     *ngIf="selectedReviewersList.length === 0"
-                    class="info"
                     [innerHTML]="'assign-' + data.type + '-owner.dialog.no-reviewers' | translate"
+                    class="info"
                 ></pre>
 
                 <redaction-search-input
-                    [width]="560"
                     [form]="searchForm"
                     [placeholder]="'assign-' + data.type + '-owner.dialog.search' | translate"
+                    [width]="560"
                     class="search-container"
                 ></redaction-search-input>
 
                 <div class="members-list">
-                    <div *ngFor="let userId of multiUsersSelectOptions" [class.selected]="isMemberSelected(userId)" (click)="toggleSelected(userId)">
+                    <div (click)="toggleSelected(userId)" *ngFor="let userId of multiUsersSelectOptions" [class.selected]="isMemberSelected(userId)">
                         <redaction-initials-avatar [userId]="userId" [withName]="true" size="large"></redaction-initials-avatar>
                         <div class="actions">
-                            <div class="make-approver" (click)="toggleApprover(userId, $event)">
-                                <redaction-round-checkbox class="mr-8" [active]="isApprover(userId)"></redaction-round-checkbox>
+                            <div (click)="toggleApprover(userId, $event)" class="make-approver">
+                                <redaction-round-checkbox [active]="isApprover(userId)" class="mr-8"></redaction-round-checkbox>
                                 <span [translate]="'assign-' + data.type + '-owner.dialog.make-approver'"></span>
                             </div>
                             <mat-icon *ngIf="!isOwner(userId)" [svgIcon]="'red:' + (isMemberSelected(userId) ? 'close' : 'check')"></mat-icon>
@@ -75,9 +75,9 @@
                 {{ 'assign-' + data.type + '-owner.dialog.save' | translate }}
             </button>
 
-            <div class="all-caps-label pointer cancel" [translate]="'assign-' + data.type + '-owner.dialog.cancel'" mat-dialog-close></div>
+            <div [translate]="'assign-' + data.type + '-owner.dialog.cancel'" class="all-caps-label pointer cancel" mat-dialog-close></div>
         </div>
     </form>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/projects/dialogs/document-info-dialog/document-info-dialog.component.html b/apps/red-ui/src/app/modules/projects/dialogs/document-info-dialog/document-info-dialog.component.html
index 73b6e159a..050300501 100644
--- a/apps/red-ui/src/app/modules/projects/dialogs/document-info-dialog/document-info-dialog.component.html
+++ b/apps/red-ui/src/app/modules/projects/dialogs/document-info-dialog/document-info-dialog.component.html
@@ -3,7 +3,7 @@
 
     <form (submit)="saveDocumentInfo()" [formGroup]="documentInfoForm">
         <div class="dialog-content">
-            <div class="red-input-group w-300" *ngFor="let attr of attributes">
+            <div *ngFor="let attr of attributes" class="red-input-group w-300">
                 <label>{{ attr.label }}</label>
                 <input [formControlName]="attr.id" [name]="attr.id" type="text" />
             </div>
@@ -15,5 +15,5 @@
         </div>
     </form>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/projects/dialogs/force-redaction-dialog/force-redaction-dialog.component.html b/apps/red-ui/src/app/modules/projects/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
index 3c508b551..f56904922 100644
--- a/apps/red-ui/src/app/modules/projects/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
+++ b/apps/red-ui/src/app/modules/projects/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
@@ -1,12 +1,12 @@
 <section class="dialog">
     <form (submit)="handleForceRedaction()" [formGroup]="redactionForm">
-        <div class="dialog-header heading-l" [translate]="'manual-annotation.dialog.header.force'"></div>
+        <div [translate]="'manual-annotation.dialog.header.force'" class="dialog-header heading-l"></div>
 
         <div class="dialog-content">
             <div class="red-input-group required w-400">
                 <label translate="manual-annotation.dialog.content.reason"></label>
-                <mat-select formControlName="reason" class="full-width" [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate">
-                    <mat-option *ngFor="let option of legalOptions" [value]="option" [matTooltip]="option.description">
+                <mat-select [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate" class="full-width" formControlName="reason">
+                    <mat-option *ngFor="let option of legalOptions" [matTooltip]="option.description" [value]="option">
                         {{ option.label }}
                     </mat-option>
                 </mat-select>
@@ -14,21 +14,21 @@
 
             <div class="red-input-group w-400">
                 <label translate="manual-annotation.dialog.content.legalBasis"></label>
-                <input type="text" [value]="redactionForm.get('reason').value?.legalBasis" disabled />
+                <input [value]="redactionForm.get('reason').value?.legalBasis" disabled type="text" />
             </div>
 
-            <div class="red-input-group w-300" [class.required]="!isDocumentAdmin">
+            <div [class.required]="!isDocumentAdmin" class="red-input-group w-300">
                 <label translate="manual-annotation.dialog.content.comment"></label>
-                <textarea redactionHasScrollbar formControlName="comment" name="comment" type="text" rows="4"></textarea>
+                <textarea formControlName="comment" name="comment" redactionHasScrollbar rows="4" type="text"></textarea>
             </div>
         </div>
 
         <div class="dialog-actions">
-            <button color="primary" mat-flat-button [disabled]="!redactionForm.valid" type="submit">
+            <button [disabled]="!redactionForm.valid" color="primary" mat-flat-button type="submit">
                 {{ 'manual-annotation.dialog.actions.save' | translate }}
             </button>
         </div>
     </form>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/projects/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/modules/projects/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
index 9a872514b..90ada6d30 100644
--- a/apps/red-ui/src/app/modules/projects/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/projects/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
@@ -1,6 +1,6 @@
 <section class="dialog">
     <form (submit)="handleAddRedaction()" [formGroup]="redactionForm">
-        <div class="dialog-header heading-l" [translate]="title"></div>
+        <div [translate]="title" class="dialog-header heading-l"></div>
 
         <div class="dialog-content">
             <ng-container *ngIf="manualRedactionEntryWrapper.annotationType === 'TEXT'">
@@ -16,34 +16,34 @@
                 </div>
             </ng-container>
 
-            <div class="red-input-group required w-400" *ngIf="!isDictionaryRequest">
+            <div *ngIf="!isDictionaryRequest" class="red-input-group required w-400">
                 <label translate="manual-annotation.dialog.content.reason"></label>
-                <mat-select formControlName="reason" class="full-width" [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate">
-                    <mat-option *ngFor="let option of legalOptions" [value]="option" [matTooltip]="option.description" matTooltipPosition="after">
+                <mat-select [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate" class="full-width" formControlName="reason">
+                    <mat-option *ngFor="let option of legalOptions" [matTooltip]="option.description" [value]="option" matTooltipPosition="after">
                         {{ option.label }}
                     </mat-option>
                 </mat-select>
             </div>
 
-            <div class="red-input-group w-400" *ngIf="!isDictionaryRequest">
+            <div *ngIf="!isDictionaryRequest" class="red-input-group w-400">
                 <label translate="manual-annotation.dialog.content.legalBasis"></label>
-                <input type="text" [value]="redactionForm.get('reason').value?.legalBasis" disabled />
+                <input [value]="redactionForm.get('reason').value?.legalBasis" disabled type="text" />
             </div>
 
-            <div class="red-input-group w-300" [class.required]="!isDocumentAdmin">
+            <div [class.required]="!isDocumentAdmin" class="red-input-group w-300">
                 <label translate="manual-annotation.dialog.content.comment"></label>
-                <textarea redactionHasScrollbar formControlName="comment" name="comment" type="text" rows="4"></textarea>
+                <textarea formControlName="comment" name="comment" redactionHasScrollbar rows="4" type="text"></textarea>
             </div>
 
-            <div class="red-input-group required w-300" *ngIf="isDictionaryRequest && !isFalsePositiveRequest">
+            <div *ngIf="isDictionaryRequest && !isFalsePositiveRequest" class="red-input-group required w-300">
                 <label translate="manual-annotation.dialog.content.dictionary"></label>
 
                 <mat-select formControlName="dictionary">
                     <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
                     <mat-option
                         *ngFor="let dictionary of redactionDictionaries"
-                        [value]="dictionary.type"
                         [matTooltip]="dictionary.description"
+                        [value]="dictionary.type"
                         matTooltipPosition="after"
                     >
                         <span>
@@ -55,11 +55,11 @@
         </div>
 
         <div class="dialog-actions">
-            <button color="primary" mat-flat-button [disabled]="!redactionForm.valid" type="submit">
+            <button [disabled]="!redactionForm.valid" color="primary" mat-flat-button type="submit">
                 {{ 'manual-annotation.dialog.actions.save' | translate }}
             </button>
         </div>
     </form>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/projects/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html b/apps/red-ui/src/app/modules/projects/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
index a216cb0ab..8dddb8199 100644
--- a/apps/red-ui/src/app/modules/projects/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
+++ b/apps/red-ui/src/app/modules/projects/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
@@ -12,7 +12,7 @@
                 | translate
         }}
 
-        <div class="content-wrapper" *ngIf="data.removeFromDictionary">
+        <div *ngIf="data.removeFromDictionary" class="content-wrapper">
             <table class="default-table">
                 <thead>
                     <tr>
@@ -45,5 +45,5 @@
         </button>
     </div>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
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 e7a207a34..1d6d1d2fc 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
@@ -2,28 +2,28 @@
     <div class="page-header">
         <div class="flex flex-1">
             <div
-                class="red-tab"
-                [matTooltip]="'file-preview.standard-tooltip' | translate"
-                [class.active]="viewMode === 'STANDARD'"
                 (click)="switchView('STANDARD')"
+                [class.active]="viewMode === 'STANDARD'"
+                [matTooltip]="'file-preview.standard-tooltip' | translate"
+                class="red-tab"
             >
                 {{ 'file-preview.standard' | translate }}
             </div>
             <div
-                class="red-tab"
-                [matTooltip]="'file-preview.delta-tooltip' | translate"
+                (click)="canSwitchToDeltaView && switchView('DELTA')"
                 [class.active]="viewMode === 'DELTA'"
                 [class.disabled]="!canSwitchToDeltaView"
-                (click)="canSwitchToDeltaView && switchView('DELTA')"
+                [matTooltip]="'file-preview.delta-tooltip' | translate"
+                class="red-tab"
             >
                 {{ 'file-preview.delta' | translate }}
             </div>
             <div
-                class="red-tab"
-                [matTooltip]="'file-preview.redacted-tooltip' | translate"
+                (click)="canSwitchToRedactedView && switchView('REDACTED')"
                 [class.active]="viewMode === 'REDACTED'"
                 [class.disabled]="!canSwitchToRedactedView"
-                (click)="canSwitchToRedactedView && switchView('REDACTED')"
+                [matTooltip]="'file-preview.redacted-tooltip' | translate"
+                class="red-tab"
             >
                 {{ 'file-preview.redacted' | translate }}
             </div>
@@ -76,13 +76,13 @@
                         <mat-select formControlName="reviewer">
                             <mat-select-trigger>
                                 <redaction-initials-avatar
-                                    size="small"
                                     [userId]="reviewerForm.get('reviewer').value"
                                     [withName]="true"
+                                    size="small"
                                 ></redaction-initials-avatar>
                             </mat-select-trigger>
                             <mat-option *ngFor="let reviewerId of this.appStateService.activeProject.memberIds" [value]="reviewerId">
-                                <redaction-initials-avatar size="small" [userId]="reviewerId" [withName]="true"></redaction-initials-avatar>
+                                <redaction-initials-avatar [userId]="reviewerId" [withName]="true" size="small"></redaction-initials-avatar>
                             </mat-option>
                         </mat-select>
                     </div>
@@ -136,34 +136,34 @@
 
             <redaction-file-actions
                 (actionPerformed)="fileActionPerformed($event)"
-                [activeDocumentInfo]="viewDocumentInfo"
                 *ngIf="viewReady"
+                [activeDocumentInfo]="viewDocumentInfo"
             ></redaction-file-actions>
 
             <redaction-circle-button
                 (action)="toggleFullScreen()"
                 [icon]="fullScreen ? 'red:exit-fullscreen' : 'red:fullscreen'"
+                class="ml-2"
                 tooltip="file-preview.fullscreen"
                 tooltipPosition="below"
-                class="ml-2"
             ></redaction-circle-button>
 
             <!-- Dev Mode Features-->
             <redaction-circle-button
-                *ngIf="userPreferenceService.areDevFeaturesEnabled"
                 (action)="downloadOriginalFile()"
-                icon="red:download"
-                type="primary"
+                *ngIf="userPreferenceService.areDevFeaturesEnabled"
                 class="ml-8"
+                icon="red:download"
                 tooltip="file-preview.download-original-file"
                 tooltipPosition="below"
+                type="primary"
             ></redaction-circle-button>
             <!-- End Dev Mode Features-->
 
             <redaction-circle-button
+                (action)="closeFullScreen()"
                 *ngIf="!fullScreen"
                 [routerLink]="['/main/projects/' + appStateService.activeProjectId]"
-                (action)="closeFullScreen()"
                 class="ml-8"
                 icon="red:close"
                 tooltip="common.close"
@@ -177,63 +177,63 @@
     <div class="red-content-inner">
         <div class="content-container">
             <redaction-pdf-viewer
-                *ngIf="displayPDFViewer"
-                (keyUp)="handleKeyEvent($event)"
                 (annotationSelected)="handleAnnotationSelected($event)"
-                (manualAnnotationRequested)="openManualAnnotationDialog($event)"
                 (annotationsChanged)="annotationsChangedByReviewAction($event)"
+                (keyUp)="handleKeyEvent($event)"
+                (manualAnnotationRequested)="openManualAnnotationDialog($event)"
                 (pageChanged)="viewerPageChanged($event)"
                 (viewerReady)="viewerReady($event)"
+                *ngIf="displayPDFViewer"
+                [annotations]="annotations"
                 [canPerformActions]="canPerformAnnotationActions"
                 [fileData]="displayData"
                 [fileStatus]="appStateService.activeFile"
-                [shouldDeselectAnnotationsOnPageChange]="shouldDeselectAnnotationsOnPageChange"
-                [annotations]="annotations"
                 [multiSelectActive]="!!fileWorkloadComponent?.multiSelectActive"
+                [shouldDeselectAnnotationsOnPageChange]="shouldDeselectAnnotationsOnPageChange"
             ></redaction-pdf-viewer>
         </div>
 
         <div class="right-container">
             <redaction-empty-state
                 *ngIf="viewReady && appStateService.activeFile.isExcluded && !viewDocumentInfo"
+                [horizontalPadding]="40"
                 icon="red:needs-work"
                 text="file-preview.tabs.is-excluded"
-                [horizontalPadding]="40"
             ></redaction-empty-state>
 
             <redaction-document-info
+                (closeDocumentInfoView)="viewDocumentInfo = false"
                 *ngIf="viewReady && viewDocumentInfo"
                 [file]="fileData.fileStatus.fileStatus"
-                (closeDocumentInfoView)="viewDocumentInfo = false"
             >
             </redaction-document-info>
 
             <redaction-file-workload
-                *ngIf="!appStateService.activeFile.isExcluded"
                 #fileWorkloadComponent
-                [annotations]="annotations"
-                [selectedAnnotations]="selectedAnnotations"
-                [activeViewerPage]="activeViewerPage"
-                [(shouldDeselectAnnotationsOnPageChange)]="shouldDeselectAnnotationsOnPageChange"
-                [dialogRef]="dialogRef"
-                [primaryFilters]="primaryFilters"
-                [secondaryFilters]="secondaryFilters"
-                [fileData]="fileData"
-                [hideSkipped]="hideSkipped"
-                [annotationActionsTemplate]="annotationActionsTemplate"
-                (selectAnnotations)="selectAnnotations($event)"
+                (annotationsChanged)="annotationsChangedByReviewAction($event)"
                 (deselectAnnotations)="deselectAnnotations($event)"
+                (selectAnnotations)="selectAnnotations($event)"
                 (selectPage)="selectPage($event)"
                 (toggleSkipped)="toggleSkipped($event)"
-                (annotationsChanged)="annotationsChangedByReviewAction($event)"
+                *ngIf="!appStateService.activeFile.isExcluded"
+                [(shouldDeselectAnnotationsOnPageChange)]="shouldDeselectAnnotationsOnPageChange"
+                [activeViewerPage]="activeViewerPage"
+                [annotationActionsTemplate]="annotationActionsTemplate"
+                [annotations]="annotations"
+                [dialogRef]="dialogRef"
+                [fileData]="fileData"
+                [hideSkipped]="hideSkipped"
+                [primaryFilters]="primaryFilters"
+                [secondaryFilters]="secondaryFilters"
+                [selectedAnnotations]="selectedAnnotations"
             ></redaction-file-workload>
         </div>
     </div>
 </section>
 
 <redaction-full-page-loading-indicator [displayed]="!viewReady" [showIndicator]="!this.loadingMessage">
-    <h1 class="heading-l loading" *ngIf="loadingMessage">{{ loadingMessage | translate }}</h1>
-    <div class="analysis-progress" *ngIf="loadingMessage">
+    <h1 *ngIf="loadingMessage" class="heading-l loading">{{ loadingMessage | translate }}</h1>
+    <div *ngIf="loadingMessage" class="analysis-progress">
         <mat-progress-bar [mode]="indeterminateMode ? 'indeterminate' : 'determinate'" [value]="analysisProgress"></mat-progress-bar>
     </div>
 </redaction-full-page-loading-indicator>
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 416e02ccf..705909549 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
@@ -6,34 +6,34 @@
                 #statusFilter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.status'"
-                [primaryFilters]="statusFilters"
                 [icon]="'red:status'"
+                [primaryFilters]="statusFilters"
             ></redaction-filter>
             <redaction-filter
                 #peopleFilter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.people'"
-                [primaryFilters]="peopleFilters"
                 [icon]="'red:user'"
+                [primaryFilters]="peopleFilters"
             ></redaction-filter>
             <redaction-filter
                 #needsWorkFilter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.needs-work'"
                 [filterTemplate]="needsWorkTemplate"
-                [primaryFilters]="needsWorkFilters"
                 [icon]="'red:needs-work'"
+                [primaryFilters]="needsWorkFilters"
             ></redaction-filter>
             <redaction-filter
-                *ngIf="ruleSetFilters.length > 1"
                 #ruleSetFilter
                 (filtersChanged)="filtersChanged()"
+                *ngIf="ruleSetFilters.length > 1"
                 [filterLabel]="'filters.rulesets'"
-                [primaryFilters]="ruleSetFilters"
                 [icon]="'red:template'"
+                [primaryFilters]="ruleSetFilters"
             ></redaction-filter>
             <redaction-search-input [form]="searchForm" [placeholder]="'project-listing.search'"></redaction-search-input>
-            <div class="reset-filters" *ngIf="hasActiveFilters" (click)="resetFilters()" translate="reset-filters"></div>
+            <div (click)="resetFilters()" *ngIf="hasActiveFilters" class="reset-filters" translate="reset-filters"></div>
         </div>
         <redaction-icon-button
             (action)="openAddProjectDialog()"
@@ -65,18 +65,18 @@
 
                 <redaction-table-col-name label="project-listing.table-col-names.needs-work"></redaction-table-col-name>
 
-                <redaction-table-col-name label="project-listing.table-col-names.owner" class="user-column"></redaction-table-col-name>
+                <redaction-table-col-name class="user-column" label="project-listing.table-col-names.owner"></redaction-table-col-name>
 
                 <redaction-table-col-name class="flex-end" label="project-listing.table-col-names.status"></redaction-table-col-name>
                 <div class="scrollbar-placeholder"></div>
             </div>
 
             <redaction-empty-state
+                (action)="openAddProjectDialog()"
                 *ngIf="!allEntities.length"
+                [showButton]="permissionsService.isManager()"
                 icon="red:folder"
                 screen="project-listing"
-                (action)="openAddProjectDialog()"
-                [showButton]="permissionsService.isManager()"
             ></redaction-empty-state>
 
             <redaction-empty-state *ngIf="allEntities.length && !displayedEntities.length" screen="project-listing" type="no-match"></redaction-empty-state>
@@ -137,8 +137,8 @@
 
         <div class="right-container" redactionHasScrollbar>
             <redaction-project-listing-details
-                *ngIf="allEntities.length"
                 (filtersChanged)="filtersChanged($event)"
+                *ngIf="allEntities.length"
                 [documentsChartData]="documentsChartData"
                 [filters]="detailsContainerFilters"
                 [projectsChartData]="projectsChartData"
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 b0f1ef4a8..af4d7b065 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
@@ -6,78 +6,78 @@
                 #statusFilter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.status'"
-                [primaryFilters]="statusFilters"
                 [icon]="'red:status'"
+                [primaryFilters]="statusFilters"
             ></redaction-filter>
             <redaction-filter
                 #peopleFilter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.assigned-people'"
-                [primaryFilters]="peopleFilters"
                 [icon]="'red:user'"
+                [primaryFilters]="peopleFilters"
             ></redaction-filter>
             <redaction-filter
                 #needsWorkFilter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.needs-work'"
                 [filterTemplate]="needsWorkTemplate"
-                [primaryFilters]="needsWorkFilters"
                 [icon]="'red:needs-work'"
+                [primaryFilters]="needsWorkFilters"
             ></redaction-filter>
 
             <redaction-search-input [form]="searchForm" [placeholder]="'project-overview.search'"></redaction-search-input>
 
-            <div class="reset-filters" *ngIf="hasActiveFilters" (click)="resetFilters()" translate="reset-filters"></div>
+            <div (click)="resetFilters()" *ngIf="hasActiveFilters" class="reset-filters" translate="reset-filters"></div>
         </div>
 
         <div class="actions">
             <redaction-circle-button
-                *ngIf="permissionsService.isManagerAndOwner()"
                 (action)="openEditProjectDialog($event)"
+                *ngIf="permissionsService.isManagerAndOwner()"
+                icon="red:edit"
                 tooltip="project-overview.header-actions.edit"
                 tooltipPosition="below"
-                icon="red:edit"
             ></redaction-circle-button>
             <redaction-circle-button
-                *ngIf="permissionsService.canDeleteProject()"
                 (action)="openDeleteProjectDialog($event)"
+                *ngIf="permissionsService.canDeleteProject()"
+                icon="red:trash"
                 tooltip="project-overview.header-actions.delete"
                 tooltipPosition="below"
-                icon="red:trash"
             ></redaction-circle-button>
             <redaction-circle-button
-                *ngIf="permissionsService.isManagerAndOwner()"
                 (action)="openAssignProjectMembersDialog()"
+                *ngIf="permissionsService.isManagerAndOwner()"
+                icon="red:assign"
                 tooltip="project-overview.header-actions.assign"
                 tooltipPosition="below"
-                icon="red:assign"
             ></redaction-circle-button>
 
-            <redaction-file-download-btn [project]="activeProject" tooltipPosition="below" [file]="allEntities"></redaction-file-download-btn>
+            <redaction-file-download-btn [file]="allEntities" [project]="activeProject" tooltipPosition="below"></redaction-file-download-btn>
 
             <redaction-circle-button
-                *ngIf="permissionsService.displayReanalyseBtn()"
                 (action)="reanalyseProject()"
+                *ngIf="permissionsService.displayReanalyseBtn()"
                 [tooltip]="'project-overview.new-rule.toast.actions.reanalyse-all'"
-                type="warn"
+                icon="red:refresh"
                 tooltipClass="warn small"
                 tooltipPosition="below"
-                icon="red:refresh"
+                type="warn"
             ></redaction-circle-button>
             <redaction-circle-button
-                class="ml-14"
                 (action)="fileInput.click()"
+                class="ml-14"
+                icon="red:upload"
                 tooltip="project-overview.header-actions.upload-document"
                 tooltipPosition="below"
-                icon="red:upload"
                 type="primary"
             ></redaction-circle-button>
             <redaction-circle-button
-                class="ml-6"
                 [routerLink]="['/main/projects/']"
+                class="ml-6"
+                icon="red:close"
                 tooltip="common.close"
                 tooltipPosition="below"
-                icon="red:close"
             ></redaction-circle-button>
         </div>
     </div>
@@ -85,7 +85,7 @@
     <div class="overlay-shadow"></div>
 
     <div class="red-content-inner">
-        <div class="content-container" [class.extended]="collapsedDetails">
+        <div [class.extended]="collapsedDetails" class="content-container">
             <div class="header-item">
                 <div class="select-all-container">
                     <redaction-round-checkbox
@@ -100,12 +100,12 @@
                 </span>
 
                 <redaction-project-overview-bulk-actions
-                    [selectedFileIds]="selectedEntitiesIds"
                     (reload)="bulkActionPerformed()"
+                    [selectedFileIds]="selectedEntitiesIds"
                 ></redaction-project-overview-bulk-actions>
             </div>
 
-            <div class="table-header" redactionSyncWidth="table-item" [class.no-data]="!allEntities.length">
+            <div [class.no-data]="!allEntities.length" class="table-header" redactionSyncWidth="table-item">
                 <!--      Table column names-->
                 <div class="select-oval-placeholder"></div>
 
@@ -131,9 +131,9 @@
                     (toggleSort)="toggleSort($event)"
                     [activeSortingOption]="sortingOption"
                     [withSort]="true"
+                    class="user-column"
                     column="reviewerName"
                     label="project-overview.table-col-names.assigned-to"
-                    class="user-column"
                 ></redaction-table-col-name>
 
                 <redaction-table-col-name
@@ -156,11 +156,11 @@
             </div>
 
             <redaction-empty-state
+                (action)="fileInput.click()"
                 *ngIf="!allEntities.length"
+                buttonIcon="red:upload"
                 icon="red:document"
                 screen="project-overview"
-                (action)="fileInput.click()"
-                buttonIcon="red:upload"
             ></redaction-empty-state>
 
             <redaction-empty-state *ngIf="allEntities.length && !displayedEntities.length" screen="project-overview" type="no-match"></redaction-empty-state>
@@ -168,12 +168,12 @@
             <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
                 <div
                     *cdkVirtualFor="let fileStatus of displayedEntities | sortBy: sortingOption.order:sortingOption.column; trackBy: fileId"
+                    [class.disabled]="fileStatus.isExcluded"
                     [class.pointer]="permissionsService.canOpenFile(fileStatus)"
                     [routerLink]="fileLink(fileStatus)"
                     class="table-item"
-                    [class.disabled]="fileStatus.isExcluded"
                 >
-                    <div class="selection-column" (click)="toggleEntitySelected($event, fileStatus)">
+                    <div (click)="toggleEntitySelected($event, fileStatus)" class="selection-column">
                         <redaction-round-checkbox [active]="isEntitySelected(fileStatus)"></redaction-round-checkbox>
                     </div>
 
@@ -184,19 +184,19 @@
                                 [class.error]="fileStatus.isError"
                                 class="table-item-title text-overflow"
                             >
-                                <span matTooltipPosition="above" [matTooltip]="fileStatus.filename">
+                                <span [matTooltip]="fileStatus.filename" matTooltipPosition="above">
                                     {{ fileStatus.filename }}
                                 </span>
                             </div>
                         </div>
-                        <div class="small-label stats-subtitle" *ngIf="fileStatus.primaryAttribute">
+                        <div *ngIf="fileStatus.primaryAttribute" class="small-label stats-subtitle">
                             <div class="primary-attribute text-overflow">
-                                <span matTooltipPosition="above" [matTooltip]="fileStatus.primaryAttribute">
+                                <span [matTooltip]="fileStatus.primaryAttribute" matTooltipPosition="above">
                                     {{ fileStatus.primaryAttribute }}
                                 </span>
                             </div>
                         </div>
-                        <div class="small-label stats-subtitle" *ngIf="fileStatus.ocrTime">
+                        <div *ngIf="fileStatus.ocrTime" class="small-label stats-subtitle">
                             <div [matTooltipPosition]="'above'" [matTooltip]="'project-overview.ocr-performed' | translate">
                                 <mat-icon svgIcon="red:ocr"></mat-icon>
                                 {{ fileStatus.ocrTime | date: 'mediumDate' }}
@@ -212,7 +212,7 @@
 
                     <!-- always show A for error-->
                     <div *ngIf="fileStatus.isError">
-                        <redaction-annotation-icon type="square" label="A" color="#dd4d50"></redaction-annotation-icon>
+                        <redaction-annotation-icon color="#dd4d50" label="A" type="square"></redaction-annotation-icon>
                     </div>
 
                     <div *ngIf="!fileStatus.isError">
@@ -248,9 +248,9 @@
                         ></redaction-status-bar>
 
                         <redaction-file-actions
-                            [fileStatus]="fileStatus"
                             (actionPerformed)="calculateData()"
                             *ngIf="!fileStatus.isProcessing"
+                            [fileStatus]="fileStatus"
                             class="mr-4"
                         ></redaction-file-actions>
                     </div>
@@ -259,13 +259,13 @@
             </cdk-virtual-scroll-viewport>
         </div>
 
-        <div class="right-container" redactionHasScrollbar [class.collapsed]="collapsedDetails">
+        <div [class.collapsed]="collapsedDetails" class="right-container" redactionHasScrollbar>
             <redaction-project-details
                 #projectDetailsComponent
-                (openAssignProjectMembersDialog)="openAssignProjectMembersDialog()"
-                [filters]="detailsContainerFilters"
                 (filtersChanged)="filtersChanged($event)"
+                (openAssignProjectMembersDialog)="openAssignProjectMembersDialog()"
                 (toggleCollapse)="toggleCollapsedDetails()"
+                [filters]="detailsContainerFilters"
             ></redaction-project-details>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.scss
index c578cb5e8..c305c4f98 100644
--- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.scss
@@ -90,6 +90,7 @@ cdk-virtual-scroll-viewport {
 .reanalyse-link {
     color: $accent;
     text-decoration: underline;
+
     &:hover {
         color: lighten($accent, 10%);
     }
diff --git a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.html b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.html
index 6a1029711..249118c75 100644
--- a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.html
@@ -1,3 +1,3 @@
-<div #icon class="icon" [class.hint]="isHint" [class.request]="isRequest" [class.recommendation]="isRecommendation" [class.none]="type === 'none'">
+<div #icon [class.hint]="isHint" [class.none]="type === 'none'" [class.recommendation]="isRecommendation" [class.request]="isRequest" class="icon">
     <span>{{ label || dictType.label.charAt(0) }}</span>
 </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.html b/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.html
index 4ad4baf78..6c26d9bb7 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.html
@@ -1,5 +1,5 @@
-<button mat-button [class.overlay]="showDot" [class.primary]="primary">
+<button [class.overlay]="showDot" [class.primary]="primary" mat-button>
     <span [translate]="text"></span>
-    <mat-icon svgIcon="red:arrow-down" class="chevron-icon"></mat-icon>
+    <mat-icon class="chevron-icon" svgIcon="red:arrow-down"></mat-icon>
 </button>
-<div class="dot" *ngIf="showDot"></div>
+<div *ngIf="showDot" class="dot"></div>
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html
index 22c547128..8307ca328 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html
@@ -2,14 +2,14 @@
     <button
         (click)="performAction($event)"
         [class.dark-bg]="type === 'dark-bg'"
+        [class.overlay]="showDot"
         [class.primary]="type === 'primary'"
+        [class.small]="small"
         [class.warn]="type === 'warn'"
         [disabled]="disabled"
-        [class.small]="small"
-        [class.overlay]="showDot"
         mat-icon-button
     >
         <mat-icon [svgIcon]="icon"></mat-icon>
     </button>
-    <div class="dot" *ngIf="showDot"></div>
+    <div *ngIf="showDot" class="dot"></div>
 </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html
index e873b8832..5e2965968 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html
@@ -1,9 +1,9 @@
 <redaction-circle-button
-    [disabled]="!canDownloadFiles"
     (action)="downloadFiles($event)"
+    [disabled]="!canDownloadFiles"
     [tooltipClass]="tooltipClass"
     [tooltipPosition]="tooltipPosition"
-    [type]="type"
     [tooltip]="canDownloadFiles ? 'project-overview.download-file' : 'project-overview.download-file-disabled'"
+    [type]="type"
     icon="red:download"
 ></redaction-circle-button>
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.html b/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.html
index f37a1f75f..e238291df 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.html
@@ -1,14 +1,14 @@
 <button
-    mat-button
+    (click)="action.emit($event)"
+    [class.has-icon]="!!icon"
     [class.overlay]="showDot"
     [class.primary]="type === 'primary'"
-    (click)="action.emit($event)"
     [class.show-bg]="type === 'show-bg'"
     [disabled]="disabled"
-    [class.has-icon]="!!icon"
+    mat-button
     type="button"
 >
-    <mat-icon [svgIcon]="icon" *ngIf="icon"></mat-icon>
+    <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
     <span [translate]="text"></span>
 </button>
-<div class="dot" *ngIf="showDot"></div>
+<div *ngIf="showDot" class="dot"></div>
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.html b/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.html
index 7a3a52216..7dbb0ba09 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.html
@@ -1,5 +1,5 @@
-<button mat-button [class.overlay]="showDot">
-    <redaction-initials-avatar size="small" [userId]="user?.id" [withName]="true"></redaction-initials-avatar>
+<button [class.overlay]="showDot" mat-button>
+    <redaction-initials-avatar [userId]="user?.id" [withName]="true" size="small"></redaction-initials-avatar>
     <mat-icon svgIcon="red:arrow-down"></mat-icon>
 </button>
-<div class="dot" *ngIf="showDot"></div>
+<div *ngIf="showDot" class="dot"></div>
diff --git a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html
index 2b5973057..6f8249aac 100644
--- a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html
@@ -1,4 +1,4 @@
-<div class="wrapper" #wrapper [class.inactive]="!active && !indeterminate" [class.red-bg]="type === 'red-bg'">
+<div #wrapper [class.inactive]="!active && !indeterminate" [class.red-bg]="type === 'red-bg'" class="wrapper">
     <mat-icon *ngIf="active && !indeterminate" svgIcon="red:radio-selected"></mat-icon>
     <mat-icon *ngIf="indeterminate" svgIcon="red:radio-indeterminate"></mat-icon>
 </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-annotation-icon/dictionary-annotation-icon.component.html b/apps/red-ui/src/app/modules/shared/components/dictionary-annotation-icon/dictionary-annotation-icon.component.html
index 7a45997b9..22eb999b5 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-annotation-icon/dictionary-annotation-icon.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-annotation-icon/dictionary-annotation-icon.component.html
@@ -1 +1 @@
-<redaction-annotation-icon [color]="color" [type]="type" [label]="label"> </redaction-annotation-icon>
+<redaction-annotation-icon [color]="color" [label]="label" [type]="type"></redaction-annotation-icon>
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
index b9f7b0425..bab3f9c9a 100644
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
@@ -1,9 +1,9 @@
 <div
-    class="empty-state"
     [ngStyle]="{ 'padding-top': verticalPadding + 'px', 'padding-left': horizontalPadding + 'px', 'padding-right': horizontalPadding + 'px' }"
+    class="empty-state"
 >
     <mat-icon [svgIcon]="icon"></mat-icon>
-    <div class="heading-l" [translate]="text || screen + '.' + type + '.title'"></div>
-    <redaction-icon-button *ngIf="showButton" (action)="action.emit()" [icon]="buttonIcon" [text]="screen + '.no-data.action'" type="primary">
+    <div [translate]="text || screen + '.' + type + '.title'" class="heading-l"></div>
+    <redaction-icon-button (action)="action.emit()" *ngIf="showButton" [icon]="buttonIcon" [text]="screen + '.no-data.action'" type="primary">
     </redaction-icon-button>
 </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/filter/filter.component.html b/apps/red-ui/src/app/modules/shared/components/filter/filter.component.html
index 461db1a72..57f2ab817 100644
--- a/apps/red-ui/src/app/modules/shared/components/filter/filter.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/filter/filter.component.html
@@ -1,20 +1,20 @@
 <redaction-icon-button
     *ngIf="!chevron"
-    [text]="filterLabel"
     [icon]="icon"
     [matMenuTriggerFor]="filterMenu"
     [showDot]="hasActiveFilters"
+    [text]="filterLabel"
 ></redaction-icon-button>
 
-<redaction-chevron-button *ngIf="chevron" [text]="filterLabel" [matMenuTriggerFor]="filterMenu" [showDot]="hasActiveFilters"></redaction-chevron-button>
+<redaction-chevron-button *ngIf="chevron" [matMenuTriggerFor]="filterMenu" [showDot]="hasActiveFilters" [text]="filterLabel"></redaction-chevron-button>
 
-<mat-menu #filterMenu="matMenu" xPosition="before" (closed)="applyFilters()">
-    <div (mouseleave)="filterMouseLeave()" (mouseenter)="filterMouseEnter()" [class.pb-24]="secondaryFilters?.length === 0">
+<mat-menu #filterMenu="matMenu" (closed)="applyFilters()" xPosition="before">
+    <div (mouseenter)="filterMouseEnter()" (mouseleave)="filterMouseLeave()" [class.pb-24]="secondaryFilters?.length === 0">
         <div class="filter-menu-header">
             <div class="all-caps-label" translate="filter-menu.filter-types"></div>
             <div class="actions">
-                <div class="all-caps-label primary pointer" [translate]="'actions.all'" (click)="activateAllFilters(); $event.stopPropagation()"></div>
-                <div class="all-caps-label primary pointer" [translate]="'actions.none'" (click)="deactivateAllFilters(); $event.stopPropagation()"></div>
+                <div (click)="activateAllFilters(); $event.stopPropagation()" [translate]="'actions.all'" class="all-caps-label primary pointer"></div>
+                <div (click)="deactivateAllFilters(); $event.stopPropagation()" [translate]="'actions.none'" class="all-caps-label primary pointer"></div>
             </div>
         </div>
         <div *ngFor="let filter of primaryFilters">
@@ -22,7 +22,7 @@
                 *ngTemplateOutlet="defaultFilterTemplate; context: { filter: filter, atLeastOneIsExpandable: atLeastOneFilterIsExpandable }"
             ></ng-template>
         </div>
-        <div class="filter-options" *ngIf="secondaryFilters?.length > 0">
+        <div *ngIf="secondaryFilters?.length > 0" class="filter-options">
             <div class="filter-menu-options">
                 <div class="all-caps-label" translate="filter-menu.filter-options"></div>
             </div>
@@ -39,19 +39,17 @@
     {{ _(filter)?.label }}
 </ng-template>
 
-<ng-template #defaultFilterTemplate let-filter="filter" let-atLeastOneIsExpandable="atLeastOneIsExpandable">
-    <div class="mat-menu-item flex" (click)="toggleFilterExpanded($event, filter)">
-        <div class="arrow-wrapper" *ngIf="isExpandable(filter)">
-            <mat-icon *ngIf="_(filter).expanded" svgIcon="red:arrow-down" color="accent"></mat-icon>
+<ng-template #defaultFilterTemplate let-atLeastOneIsExpandable="atLeastOneIsExpandable" let-filter="filter">
+    <div (click)="toggleFilterExpanded($event, filter)" class="mat-menu-item flex">
+        <div *ngIf="isExpandable(filter)" class="arrow-wrapper">
+            <mat-icon *ngIf="_(filter).expanded" color="accent" svgIcon="red:arrow-down"></mat-icon>
             <mat-icon *ngIf="!_(filter).expanded" color="accent" svgIcon="red:arrow-right"></mat-icon>
         </div>
-        <div class="arrow-wrapper spacer" *ngIf="atLeastOneIsExpandable && !isExpandable(filter)">
-            &nbsp;
-        </div>
+        <div *ngIf="atLeastOneIsExpandable && !isExpandable(filter)" class="arrow-wrapper spacer">&nbsp;</div>
         <mat-checkbox
+            (click)="filterCheckboxClicked($event, filter)"
             [checked]="_(filter).checked"
             [indeterminate]="_(filter).indeterminate"
-            (click)="filterCheckboxClicked($event, filter)"
             class="filter-menu-checkbox"
         >
             <ng-template *ngTemplateOutlet="filterTemplate ? filterTemplate : defaultFilterLabelTemplate; context: { filter: filter }"></ng-template>
@@ -59,8 +57,8 @@
         <ng-template *ngTemplateOutlet="actionsTemplate ? actionsTemplate : null; context: { filter: filter }"></ng-template>
     </div>
     <div *ngIf="_(filter).filters?.length && _(filter).expanded">
-        <div *ngFor="let subFilter of _(filter).filters" class="padding-left mat-menu-item" (click)="$event.stopPropagation()">
-            <mat-checkbox [checked]="subFilter.checked" (click)="filterCheckboxClicked($event, subFilter, filter)">
+        <div (click)="$event.stopPropagation()" *ngFor="let subFilter of _(filter).filters" class="padding-left mat-menu-item">
+            <mat-checkbox (click)="filterCheckboxClicked($event, subFilter, filter)" [checked]="subFilter.checked">
                 <ng-template *ngTemplateOutlet="filterTemplate ? filterTemplate : defaultFilterLabelTemplate; context: { filter: subFilter }"></ng-template>
             </mat-checkbox>
             <ng-template *ngTemplateOutlet="actionsTemplate ? actionsTemplate : null; context: { filter: subFilter }"></ng-template>
diff --git a/apps/red-ui/src/app/modules/shared/components/full-page-loading-indicator/full-page-loading-indicator.component.html b/apps/red-ui/src/app/modules/shared/components/full-page-loading-indicator/full-page-loading-indicator.component.html
index 7b21cde11..102fd8938 100644
--- a/apps/red-ui/src/app/modules/shared/components/full-page-loading-indicator/full-page-loading-indicator.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/full-page-loading-indicator/full-page-loading-indicator.component.html
@@ -1,5 +1,5 @@
-<section class="full-page-load-section" *ngIf="displayed"></section>
-<section class="full-page-load-spinner" *ngIf="displayed">
-    <mat-spinner diameter="40" *ngIf="showIndicator"></mat-spinner>
+<section *ngIf="displayed" class="full-page-load-section"></section>
+<section *ngIf="displayed" class="full-page-load-spinner">
+    <mat-spinner *ngIf="showIndicator" diameter="40"></mat-spinner>
     <ng-content></ng-content>
 </section>
diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
index d77835ae3..0db9c6c2b 100644
--- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
@@ -6,7 +6,7 @@
     >
         {{ initials }}
     </div>
-    <div *ngIf="withName" class="clamp-2 username" [class.disabled]="disabled">
+    <div *ngIf="withName" [class.disabled]="disabled" class="clamp-2 username">
         {{ displayName || ('initials-avatar.unassigned' | translate) }}
     </div>
 </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.html b/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.html
index 2f8c2d059..1132b89e6 100644
--- a/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.html
@@ -1,7 +1,7 @@
-<div translate="pagination.previous" class="page" [class.disabled]="currentPage < 2" (click)="selectPage(currentPage - 1)"></div>
+<div (click)="selectPage(currentPage - 1)" [class.disabled]="currentPage < 2" class="page" translate="pagination.previous"></div>
 <span>|</span>
-<div *ngFor="let page of displayedPages" class="page" [class.dots]="page === '...'" [class.active]="page === currentPage" (click)="selectPage(page)">
+<div (click)="selectPage(page)" *ngFor="let page of displayedPages" [class.active]="page === currentPage" [class.dots]="page === '...'" class="page">
     {{ displayValue(page) }}
 </div>
 <span>|</span>
-<div translate="pagination.next" class="page" [class.disabled]="currentPage === totalPages - 1" (click)="selectPage(currentPage + 1)"></div>
+<div (click)="selectPage(currentPage + 1)" [class.disabled]="currentPage === totalPages - 1" class="page" translate="pagination.next"></div>
diff --git a/apps/red-ui/src/app/modules/shared/components/search-input/search-input.component.html b/apps/red-ui/src/app/modules/shared/components/search-input/search-input.component.html
index 4ba25388d..f1fc3a100 100644
--- a/apps/red-ui/src/app/modules/shared/components/search-input/search-input.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/search-input/search-input.component.html
@@ -1,7 +1,7 @@
 <form [formGroup]="form">
-    <div class="red-input-group" [style.width]="computedWidth" [style.max-width]="computedWidth">
+    <div [style.max-width]="computedWidth" [style.width]="computedWidth" class="red-input-group">
         <input [placeholder]="placeholder | translate" class="with-icon mt-0" formControlName="query" name="query" type="text" />
         <mat-icon *ngIf="!hasContent" class="icon-right" svgIcon="red:search"></mat-icon>
-        <mat-icon *ngIf="hasContent" class="icon-right pointer" svgIcon="red:close" (click)="clearContent()"></mat-icon>
+        <mat-icon (click)="clearContent()" *ngIf="hasContent" class="icon-right pointer" svgIcon="red:close"></mat-icon>
     </div>
 </form>
diff --git a/apps/red-ui/src/app/modules/shared/components/select/select.component.html b/apps/red-ui/src/app/modules/shared/components/select/select.component.html
index 7850f8be9..10d7fc79b 100644
--- a/apps/red-ui/src/app/modules/shared/components/select/select.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/select/select.component.html
@@ -2,13 +2,13 @@
     <div class="label-header space-between">
         <div class="all-caps-label">{{ label }}</div>
         <div class="actions">
-            <div class="all-caps-label primary pointer" [translate]="'actions.all'" (click)="selectAll($event)"></div>
-            <div class="all-caps-label primary pointer" [translate]="'actions.none'" (click)="deselectAll($event)"></div>
+            <div (click)="selectAll($event)" [translate]="'actions.all'" class="all-caps-label primary pointer"></div>
+            <div (click)="deselectAll($event)" [translate]="'actions.none'" class="all-caps-label primary pointer"></div>
         </div>
     </div>
 
-    <mat-chip-list class="options flex-center" selectable [multiple]="multiple" [disabled]="disabled">
-        <mat-chip *ngFor="let option of options" #chip="matChip" (click)="toggleSelection(chip)" [value]="option">
+    <mat-chip-list [disabled]="disabled" [multiple]="multiple" class="options flex-center" selectable>
+        <mat-chip #chip="matChip" (click)="toggleSelection(chip)" *ngFor="let option of options" [value]="option">
             {{ translatePrefix + option | translate }}
         </mat-chip>
     </mat-chip-list>
diff --git a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html
index 6af9a31e1..6ebc25363 100644
--- a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html
@@ -1,32 +1,31 @@
 <div [class]="'container flex ' + direction">
-    <svg attr.height="{{ size }}" attr.width="{{ size }}" attr.viewBox="0 0 {{ size }} {{ size }}" [style.min-width]="size" class="donut-chart">
+    <svg [style.min-width]="size" attr.height="{{ size }}" attr.viewBox="0 0 {{ size }} {{ size }}" attr.width="{{ size }}" class="donut-chart">
         <g *ngFor="let value of parsedConfig; let i = index">
             <circle
                 *ngIf="exists(i)"
+                [attr.stroke]="value.color.includes('#') ? value.color : ''"
+                [class]="value.color"
                 attr.cx="{{ cx }}"
                 attr.cy="{{ cy }}"
                 attr.r="{{ radius }}"
-                [class]="value.color"
-                [attr.stroke]="value.color.includes('#') ? value.color : ''"
-                attr.stroke-width="{{ strokeWidth }}"
                 attr.stroke-dasharray="{{ circumference }}"
                 attr.stroke-dashoffset="{{ calculateStrokeDashOffset(value.value) }}"
-                fill="transparent"
+                attr.stroke-width="{{ strokeWidth }}"
                 attr.transform="{{ returnCircleTransformValue(i) }}"
+                fill="transparent"
             />
         </g>
     </svg>
 
-    <div class="text-container" [style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + strokeWidth + 'px;'">
+    <div [style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + strokeWidth + 'px;'" class="text-container">
         <div class="heading-xl">{{ displayedDataTotal }}</div>
         <div class="mt-5">{{ subtitle | translate }}</div>
     </div>
 
     <div class="breakdown-container">
         <div>
-            <div *ngFor="let val of parsedConfig" [class.active]="val.checked" [class.filter-disabled]="!filter" (click)="selectValue(val)">
+            <div (click)="selectValue(val)" *ngFor="let val of parsedConfig" [class.active]="val.checked" [class.filter-disabled]="!filter">
                 <redaction-status-bar
-                    [small]="true"
                     [config]="[
                         {
                             length: val.value,
@@ -35,6 +34,7 @@
                             cssClass: val.color === 'PROCESSING' || val.color === 'OCR_PROCESSING' ? 'loading' : ''
                         }
                     ]"
+                    [small]="true"
                 >
                 </redaction-status-bar>
             </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.html b/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.html
index bff0ce872..e06bd34f9 100644
--- a/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.html
@@ -1,5 +1,5 @@
-<div class="rectangle-container" [ngClass]="{ small: small }">
-    <div *ngFor="let rect of config" class="section-wrapper" [style]="'flex: ' + (rect.length || 1) + ';'">
+<div [ngClass]="{ small: small }" class="rectangle-container">
+    <div *ngFor="let rect of config" [style]="'flex: ' + (rect.length || 1) + ';'" class="section-wrapper">
         <div
             [className]="'rectangle ' + rect.color"
             [ngStyle]="{
diff --git a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html
index 27e9f2560..064113e3b 100644
--- a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html
@@ -1,8 +1,8 @@
 <div (click)="withSort && toggleSort.emit(column)" [class.pointer]="withSort" [ngClass]="class">
     <mat-icon *ngIf="!!leftIcon" [svgIcon]="leftIcon"></mat-icon>
     <span [translate]="label" class="all-caps-label"></span>
-    <mat-icon *ngIf="!!rightIcon" [svgIcon]="rightIcon" [matTooltip]="rightIconTooltip | translate" matTooltipPosition="above"></mat-icon>
-    <div class="sort-arrows-container" *ngIf="withSort" [class.force-display]="activeSortingOption.column === column">
+    <mat-icon *ngIf="!!rightIcon" [matTooltip]="rightIconTooltip | translate" [svgIcon]="rightIcon" matTooltipPosition="above"></mat-icon>
+    <div *ngIf="withSort" [class.force-display]="activeSortingOption.column === column" class="sort-arrows-container">
         <mat-icon *ngIf="activeSortingOption?.order === 'asc'" svgIcon="red:sort-asc"></mat-icon>
         <mat-icon *ngIf="activeSortingOption?.order === 'desc'" svgIcon="red:sort-desc"></mat-icon>
     </div>
diff --git a/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html b/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html
index 310267be3..cb48ba6d0 100644
--- a/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html
@@ -16,5 +16,5 @@
         </button>
     </div>
 
-    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html b/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html
index db6caf293..bdfaead61 100644
--- a/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html
+++ b/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html
@@ -4,14 +4,14 @@
     <div class="dialog-content">
         <p [innerHTML]="'overwrite-files-dialog.question' | translate: { filename: filename }"></p>
 
-        <mat-checkbox [checked]="remember" (change)="remember = !remember" color="primary" class="flex-1">
+        <mat-checkbox (change)="remember = !remember" [checked]="remember" class="flex-1" color="primary">
             {{ 'overwrite-files-dialog.options.remember' | translate }}
         </mat-checkbox>
     </div>
 
     <div class="dialog-actions">
         <button (click)="selectOption('overwrite')" color="primary" mat-flat-button translate="overwrite-files-dialog.options.overwrite"></button>
-        <redaction-icon-button text="overwrite-files-dialog.options.skip" (action)="selectOption('skip')" type="show-bg"></redaction-icon-button>
-        <div class="all-caps-label cancel" (click)="cancel()" translate="overwrite-files-dialog.options.cancel"></div>
+        <redaction-icon-button (action)="selectOption('skip')" text="overwrite-files-dialog.options.skip" type="show-bg"></redaction-icon-button>
+        <div (click)="cancel()" class="all-caps-label cancel" translate="overwrite-files-dialog.options.cancel"></div>
     </div>
 </section>
diff --git a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.html b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.html
index 90505d92b..7edf1068c 100644
--- a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.html
+++ b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.html
@@ -1,5 +1,5 @@
 <section (mouseout)="close()">
-    <mat-icon svgIcon="red:upload" class="upload-icon"></mat-icon>
+    <mat-icon class="upload-icon" svgIcon="red:upload"></mat-icon>
     <div class="heading-xl">
         {{ 'project-overview.upload-files' | translate }}
     </div>
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
index 1189af41f..5d95c9694 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
@@ -4,50 +4,50 @@
             {{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }}
         </div>
         <redaction-circle-button [icon]="'red:status-' + (collapsed ? 'expand' : 'collapse')"></redaction-circle-button>
-        <redaction-circle-button icon="red:close" (action)="closeDialog()"></redaction-circle-button>
+        <redaction-circle-button (action)="closeDialog()" icon="red:close"></redaction-circle-button>
     </div>
     <div [hidden]="collapsed" class="upload-download-list">
         <div *ngFor="let projectId of uploadService.activeProjectKeys">
             <div class="project-name-wrapper all-caps-label">
                 <span>{{ uploadService.groupedFiles[projectId][0].projectName }}</span>
             </div>
-            <div *ngFor="let model of uploadService.groupedFiles[projectId]" class="upload-download-list-item" [class.error]="model.error">
+            <div *ngFor="let model of uploadService.groupedFiles[projectId]" [class.error]="model.error" class="upload-download-list-item">
                 <div>
                     <div class="upload-download-line">
                         <div
+                            [class.complete]="model.completed && !model.error"
                             [matTooltip]="model.file?.name"
                             class="upload-download-item-name flex-1"
-                            [class.complete]="model.completed && !model.error"
                             matTooltipPosition="above"
                         >
                             {{ model.file?.name }}
                         </div>
-                        <div class="progress" *ngIf="!model.error">{{ model.progress }}%</div>
+                        <div *ngIf="!model.error" class="progress">{{ model.progress }}%</div>
                     </div>
-                    <div class="error-message" *ngIf="model.error">
+                    <div *ngIf="model.error" class="error-message">
                         {{ model.error?.message }}
                     </div>
                 </div>
 
-                <div class="upload-download-progress" *ngIf="!model.error">
-                    <mat-progress-bar [value]="model.progress" color="primary" mode="determinate" [class.green]="model.completed"></mat-progress-bar>
+                <div *ngIf="!model.error" class="upload-download-progress">
+                    <mat-progress-bar [class.green]="model.completed" [value]="model.progress" color="primary" mode="determinate"></mat-progress-bar>
                 </div>
 
-                <div class="actions" [class.error]="model.error" *ngIf="model.error || !model.completed">
+                <div *ngIf="model.error || !model.completed" [class.error]="model.error" class="actions">
                     <redaction-circle-button
+                        (action)="uploadItem(model)"
                         *ngIf="model.error && !model.sizeError"
                         icon="red:refresh"
                         tooltip="upload-status.dialog.actions.re-upload"
-                        (action)="uploadItem(model)"
-                        type="dark-bg"
                         tooltipPosition="before"
+                        type="dark-bg"
                     ></redaction-circle-button>
                     <redaction-circle-button
+                        (action)="cancelItem(model)"
                         icon="red:close"
                         tooltip="upload-status.dialog.actions.cancel"
-                        (action)="cancelItem(model)"
-                        type="dark-bg"
                         tooltipPosition="before"
+                        type="dark-bg"
                     ></redaction-circle-button>
                 </div>
             </div>
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
index e9f452aa3..384096cb5 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
@@ -120,6 +120,7 @@
 
             &:not(.error):hover {
                 background-color: $grey-2;
+
                 .actions {
                     display: flex;
                 }
diff --git a/apps/red-ui/src/assets/icons/general/analyse.svg b/apps/red-ui/src/assets/icons/general/analyse.svg
index 8fc6c5dd5..cd30ad60e 100644
--- a/apps/red-ui/src/assets/icons/general/analyse.svg
+++ b/apps/red-ui/src/assets/icons/general/analyse.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="analyse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M16.5,89 L16.5,100 L0,100 L0,89 L16.5,89 Z M44.5,89 L44.5,100 L28,100 L28,89 L44.5,89 Z M72,89 L72,100 L55.5,100 L55.5,89 L72,89 Z M100,89 L100,100 L83.5,100 L83.5,89 L100,89 Z M16.5,66.5 L16.5,77.5 L0,77.5 L0,66.5 L16.5,66.5 Z M44.5,66.5 L44.5,77.5 L28,77.5 L28,66.5 L44.5,66.5 Z M72,66.5 L72,77.5 L55.5,77.5 L55.5,66.5 L72,66.5 Z M100,66.5 L100,77.5 L83.5,77.5 L83.5,66.5 L100,66.5 Z M16.5,44.5 L16.5,55.5 L0,55.5 L0,44.5 L16.5,44.5 Z M44.5,44.5 L44.5,55.5 L28,55.5 L28,44.5 L44.5,44.5 Z M100,44.5 L100,55.5 L83.5,55.5 L83.5,44.5 L100,44.5 Z M44.5,22 L44.5,33 L28,33 L28,22 L44.5,22 Z M100,22 L100,33 L83.5,33 L83.5,22 L100,22 Z M44.5,0 L44.5,11 L28,11 L28,0 L44.5,0 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="analyse" stroke="none" stroke-width="1">
+        <path
+            d="M16.5,89 L16.5,100 L0,100 L0,89 L16.5,89 Z M44.5,89 L44.5,100 L28,100 L28,89 L44.5,89 Z M72,89 L72,100 L55.5,100 L55.5,89 L72,89 Z M100,89 L100,100 L83.5,100 L83.5,89 L100,89 Z M16.5,66.5 L16.5,77.5 L0,77.5 L0,66.5 L16.5,66.5 Z M44.5,66.5 L44.5,77.5 L28,77.5 L28,66.5 L44.5,66.5 Z M72,66.5 L72,77.5 L55.5,77.5 L55.5,66.5 L72,66.5 Z M100,66.5 L100,77.5 L83.5,77.5 L83.5,66.5 L100,66.5 Z M16.5,44.5 L16.5,55.5 L0,55.5 L0,44.5 L16.5,44.5 Z M44.5,44.5 L44.5,55.5 L28,55.5 L28,44.5 L44.5,44.5 Z M100,44.5 L100,55.5 L83.5,55.5 L83.5,44.5 L100,44.5 Z M44.5,22 L44.5,33 L28,33 L28,22 L44.5,22 Z M100,22 L100,33 L83.5,33 L83.5,22 L100,22 Z M44.5,0 L44.5,11 L28,11 L28,0 L44.5,0 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/approved.svg b/apps/red-ui/src/assets/icons/general/approved.svg
index 69e85476f..38bd85c25 100644
--- a/apps/red-ui/src/assets/icons/general/approved.svg
+++ b/apps/red-ui/src/assets/icons/general/approved.svg
@@ -1,10 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Styleguide-Actions" transform="translate(-62.000000, -567.000000)" fill="currentColor" fill-rule="nonzero">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
+        <g fill="currentColor" fill-rule="nonzero" id="Styleguide-Actions"
+           transform="translate(-62.000000, -567.000000)">
             <g id="Group-6" transform="translate(52.000000, 557.000000)">
                 <g id="status" transform="translate(10.000000, 10.000000)">
-                    <path d="M14,0 L14,11.2 L11.2,11.2 L11.2,14 L0,14 L0,2.8 L2.8,2.8 L2.8,0 L14,0 Z M2.8,4.2 L1.4,4.2 L1.4,12.6 L9.8,12.6 L9.8,11.2 L2.8,11.2 L2.8,4.2 Z M12.6,1.4 L4.2,1.4 L4.2,9.8 L12.6,9.8 L12.6,1.4 Z M10.36,3.36 L11.34,4.34 L7.84,7.84 L5.74,5.74 L6.72,4.76 L7.84,5.88 L10.36,3.36 Z" id="approved"></path>
+                    <path
+                        d="M14,0 L14,11.2 L11.2,11.2 L11.2,14 L0,14 L0,2.8 L2.8,2.8 L2.8,0 L14,0 Z M2.8,4.2 L1.4,4.2 L1.4,12.6 L9.8,12.6 L9.8,11.2 L2.8,11.2 L2.8,4.2 Z M12.6,1.4 L4.2,1.4 L4.2,9.8 L12.6,9.8 L12.6,1.4 Z M10.36,3.36 L11.34,4.34 L7.84,7.84 L5.74,5.74 L6.72,4.76 L7.84,5.88 L10.36,3.36 Z"
+                        id="approved"></path>
                 </g>
             </g>
         </g>
diff --git a/apps/red-ui/src/assets/icons/general/arrow-down.svg b/apps/red-ui/src/assets/icons/general/arrow-down.svg
index c03ea2571..2ddf80100 100644
--- a/apps/red-ui/src/assets/icons/general/arrow-down.svg
+++ b/apps/red-ui/src/assets/icons/general/arrow-down.svg
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
         <g id="Styleguide-Buttons" transform="translate(-469.000000, -757.000000)">
-            <rect x="0" y="0" width="904" height="906"></rect>
-            <rect id="Rectangle" x="359" y="747" width="134" height="34" rx="17"></rect>
-            <g id="right" transform="translate(469.000000, 757.000000)" fill="currentColor">
+            <rect height="906" width="904" x="0" y="0"></rect>
+            <rect height="34" id="Rectangle" rx="17" width="134" x="359" y="747"></rect>
+            <g fill="currentColor" id="right" transform="translate(469.000000, 757.000000)">
                 <polygon id="Fill-1" points="7 9 10 5 4 5"></polygon>
             </g>
         </g>
diff --git a/apps/red-ui/src/assets/icons/general/arrow-right.svg b/apps/red-ui/src/assets/icons/general/arrow-right.svg
index 1b555ad3f..310d69820 100644
--- a/apps/red-ui/src/assets/icons/general/arrow-right.svg
+++ b/apps/red-ui/src/assets/icons/general/arrow-right.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="right_expandable" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <polygon id="Fill-1" fill="currentColor" transform="translate(7.000000, 7.000000) rotate(-90.000000) translate(-7.000000, -7.000000) " points="7 9 10 5 4 5"></polygon>
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="right_expandable" stroke="none" stroke-width="1">
+        <polygon fill="currentColor" id="Fill-1"
+                 points="7 9 10 5 4 5"
+                 transform="translate(7.000000, 7.000000) rotate(-90.000000) translate(-7.000000, -7.000000) "></polygon>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/arrow-up.svg b/apps/red-ui/src/assets/icons/general/arrow-up.svg
index de9dfd205..14f8d06ff 100644
--- a/apps/red-ui/src/assets/icons/general/arrow-up.svg
+++ b/apps/red-ui/src/assets/icons/general/arrow-up.svg
@@ -1,44 +1,43 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   width="14px"
-   height="14px"
-   viewBox="0 0 14 14"
-   version="1.1"
-   id="svg101">
-  <defs
-     id="defs105" />
-  <g
-     id="Styleguide"
-     stroke="none"
-     stroke-width="1"
-     fill="none"
-     fill-rule="evenodd">
+    height="14px"
+    id="svg101"
+    version="1.1"
+    viewBox="0 0 14 14"
+    width="14px"
+    xmlns="http://www.w3.org/2000/svg">
+    <defs
+        id="defs105" />
     <g
-       id="Styleguide-Buttons"
-       transform="translate(-469.000000, -757.000000)">
-      <rect
-         x="0"
-         y="0"
-         width="904"
-         height="906"
-         id="rect94" />
-      <rect
-         id="Rectangle"
-         x="359"
-         y="747"
-         width="134"
-         height="34"
-         rx="17" />
-      <g
-         id="right"
-         transform="rotate(180,241.5,385.5)"
-         fill="currentColor">
-        <polygon
-           id="Fill-1"
-           points="4,5 7,9 10,5 " />
-      </g>
+        fill="none"
+        fill-rule="evenodd"
+        id="Styleguide"
+        stroke="none"
+        stroke-width="1">
+        <g
+            id="Styleguide-Buttons"
+            transform="translate(-469.000000, -757.000000)">
+            <rect
+                height="906"
+                id="rect94"
+                width="904"
+                x="0"
+                y="0" />
+            <rect
+                height="34"
+                id="Rectangle"
+                rx="17"
+                width="134"
+                x="359"
+                y="747" />
+            <g
+                fill="currentColor"
+                id="right"
+                transform="rotate(180,241.5,385.5)">
+                <polygon
+                    id="Fill-1"
+                    points="4,5 7,9 10,5 " />
+            </g>
+        </g>
     </g>
-  </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/assign-me.svg b/apps/red-ui/src/assets/icons/general/assign-me.svg
index 9c1dad028..3d9a876ae 100644
--- a/apps/red-ui/src/assets/icons/general/assign-me.svg
+++ b/apps/red-ui/src/assets/icons/general/assign-me.svg
@@ -1,21 +1,25 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
     <defs>
-        <rect id="path-1" x="0" y="61" width="1440" height="50"></rect>
-        <filter x="-0.5%" y="-10.0%" width="101.0%" height="128.0%" filterUnits="objectBoundingBox" id="filter-2">
+        <rect height="50" id="path-1" width="1440" x="0" y="61"></rect>
+        <filter filterUnits="objectBoundingBox" height="128.0%" id="filter-2" width="101.0%" x="-0.5%" y="-10.0%">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.88627451   0 0 0 0 0.894117647   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"></feGaussianBlur>
+            <feColorMatrix in="shadowBlurOuter1"
+                           type="matrix" values="0 0 0 0 0.88627451   0 0 0 0 0.894117647   0 0 0 0 0.91372549  0 0 0 1 0"></feColorMatrix>
         </filter>
     </defs>
-    <g id="Assignee" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g fill="none" fill-rule="evenodd" id="Assignee" stroke="none" stroke-width="1">
         <g id="01.-Unassigned" transform="translate(-1066.000000, -79.000000)">
             <g id="Header-Document">
-                <g id="Group-13" transform="translate(917.000000, 69.000000)" fill="currentColor" fill-rule="nonzero">
+                <g fill="currentColor" fill-rule="nonzero" id="Group-13" transform="translate(917.000000, 69.000000)">
                     <g id="Group-6" transform="translate(139.000000, 0.000000)">
                         <g id="status" transform="translate(10.000000, 10.000000)">
-                            <path d="M4.61951123,7.00768239 L4.6192693,8.41063592 C2.85882948,8.544763 1.4982383,9.93223022 1.40509185,11.7054415 L1.4,11.9 L1.4,12.6 L4.619,12.599 L4.62,14 L0,14 L0,11.9 C0,9.26418483 2.0228531,7.15039627 4.61951123,7.00768239 Z M4.9,0.7 C6.44,0.7 7.7,1.96 7.7,3.5 C7.7,5.04 6.44,6.3 4.9,6.3 C3.36,6.3 2.1,5.04 2.1,3.5 C2.1,1.96 3.36,0.7 4.9,0.7 Z M4.9,2.1 C4.13,2.1 3.5,2.73 3.5,3.5 C3.5,4.27 4.13,4.9 4.9,4.9 C5.67,4.9 6.3,4.27 6.3,3.5 C6.3,2.73 5.67,2.1 4.9,2.1 Z" id="Combined-Shape"></path>
-                            <polygon id="Path" points="8.05 7 9.03 7.98 7.28 9.8 14 9.8 14 11.2 7.28 11.2 9.03 13.02 8.05 14 4.62 10.5"></polygon>
+                            <path
+                                d="M4.61951123,7.00768239 L4.6192693,8.41063592 C2.85882948,8.544763 1.4982383,9.93223022 1.40509185,11.7054415 L1.4,11.9 L1.4,12.6 L4.619,12.599 L4.62,14 L0,14 L0,11.9 C0,9.26418483 2.0228531,7.15039627 4.61951123,7.00768239 Z M4.9,0.7 C6.44,0.7 7.7,1.96 7.7,3.5 C7.7,5.04 6.44,6.3 4.9,6.3 C3.36,6.3 2.1,5.04 2.1,3.5 C2.1,1.96 3.36,0.7 4.9,0.7 Z M4.9,2.1 C4.13,2.1 3.5,2.73 3.5,3.5 C3.5,4.27 4.13,4.9 4.9,4.9 C5.67,4.9 6.3,4.27 6.3,3.5 C6.3,2.73 5.67,2.1 4.9,2.1 Z"
+                                id="Combined-Shape"></path>
+                            <polygon id="Path"
+                                     points="8.05 7 9.03 7.98 7.28 9.8 14 9.8 14 11.2 7.28 11.2 9.03 13.02 8.05 14 4.62 10.5"></polygon>
                         </g>
                     </g>
                 </g>
diff --git a/apps/red-ui/src/assets/icons/general/assign.svg b/apps/red-ui/src/assets/icons/general/assign.svg
index 680a9e4b4..55a967b7f 100644
--- a/apps/red-ui/src/assets/icons/general/assign.svg
+++ b/apps/red-ui/src/assets/icons/general/assign.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="assign" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M35,50 C54.5,50 70,65.5 70,85 L70,85 L70,100 L0,100 L0,85 C0,65.5 15.5,50 35,50 Z M35,60 C21,60 10,71 10,85 L10,85 L10,90 L60,90 L60,85 C60,71 49,60 35,60 Z M35,5 C46,5 55,14 55,25 C55,36 46,45 35,45 C24,45 15,36 15,25 C15,14 24,5 35,5 Z M85,0 L85,15 L100,15 L100,25 L85,25 L85,40 L75,40 L75,25 L60,25 L60,15 L75,15 L75,0 L85,0 Z M35,15 C29.5,15 25,19.5 25,25 C25,30.5 29.5,35 35,35 C40.5,35 45,30.5 45,25 C45,19.5 40.5,15 35,15 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="assign" stroke="none" stroke-width="1">
+        <path
+            d="M35,50 C54.5,50 70,65.5 70,85 L70,85 L70,100 L0,100 L0,85 C0,65.5 15.5,50 35,50 Z M35,60 C21,60 10,71 10,85 L10,85 L10,90 L60,90 L60,85 C60,71 49,60 35,60 Z M35,5 C46,5 55,14 55,25 C55,36 46,45 35,45 C24,45 15,36 15,25 C15,14 24,5 35,5 Z M85,0 L85,15 L100,15 L100,25 L85,25 L85,40 L75,40 L75,25 L60,25 L60,15 L75,15 L75,0 L85,0 Z M35,15 C29.5,15 25,19.5 25,25 C25,30.5 29.5,35 35,35 C40.5,35 45,30.5 45,25 C45,19.5 40.5,15 35,15 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/attribute.svg b/apps/red-ui/src/assets/icons/general/attribute.svg
index d98542404..6a1c92dd0 100644
--- a/apps/red-ui/src/assets/icons/general/attribute.svg
+++ b/apps/red-ui/src/assets/icons/general/attribute.svg
@@ -1,10 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Styleguide-Actions" transform="translate(-608.000000, -651.000000)" fill="currentColor" fill-rule="nonzero">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
+        <g fill="currentColor" fill-rule="nonzero" id="Styleguide-Actions"
+           transform="translate(-608.000000, -651.000000)">
             <g id="Group-6" transform="translate(598.000000, 641.000000)">
                 <g id="status" transform="translate(10.000000, 10.000000)">
-                    <path d="M14,8.8817842e-15 L14,6.7673716 L7.2326284,13.5347432 C6.612286,14.1550856 5.59718026,14.1550856 4.97683787,13.5347432 L4.97683787,13.5347432 L0.465256798,9.02316213 C-0.155085599,8.40281974 -0.155085599,7.387714 0.465256798,6.7673716 L0.465256798,6.7673716 L7.2326284,8.8817842e-15 L14,8.8817842e-15 Z M12.4209466,1.57905337 L7.90936556,1.57905337 L1.59315206,7.89526687 L6.10473313,12.4068479 L12.4209466,6.09063444 L12.4209466,1.57905337 Z M9.48841893,3.3836858 C9.79987861,3.07222612 10.3048545,3.07222612 10.6163142,3.3836858 C10.9277739,3.69514548 10.9277739,4.20012139 10.6163142,4.51158107 C10.3048545,4.82304075 9.79987861,4.82304075 9.48841893,4.51158107 C9.17695925,4.20012139 9.17695925,3.69514548 9.48841893,3.3836858 Z" id="Combined-Shape"></path>
+                    <path
+                        d="M14,8.8817842e-15 L14,6.7673716 L7.2326284,13.5347432 C6.612286,14.1550856 5.59718026,14.1550856 4.97683787,13.5347432 L4.97683787,13.5347432 L0.465256798,9.02316213 C-0.155085599,8.40281974 -0.155085599,7.387714 0.465256798,6.7673716 L0.465256798,6.7673716 L7.2326284,8.8817842e-15 L14,8.8817842e-15 Z M12.4209466,1.57905337 L7.90936556,1.57905337 L1.59315206,7.89526687 L6.10473313,12.4068479 L12.4209466,6.09063444 L12.4209466,1.57905337 Z M9.48841893,3.3836858 C9.79987861,3.07222612 10.3048545,3.07222612 10.6163142,3.3836858 C10.9277739,3.69514548 10.9277739,4.20012139 10.6163142,4.51158107 C10.3048545,4.82304075 9.79987861,4.82304075 9.48841893,4.51158107 C9.17695925,4.20012139 9.17695925,3.69514548 9.48841893,3.3836858 Z"
+                        id="Combined-Shape"></path>
                 </g>
             </g>
         </g>
diff --git a/apps/red-ui/src/assets/icons/general/calendar.svg b/apps/red-ui/src/assets/icons/general/calendar.svg
index f6e549692..b103404b1 100644
--- a/apps/red-ui/src/assets/icons/general/calendar.svg
+++ b/apps/red-ui/src/assets/icons/general/calendar.svg
@@ -1,8 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="calendar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M35,70 L35,80 L25,80 L25,70 L35,70 Z M55,70 L55,80 L45,80 L45,70 L55,70 Z M35,55 L35,65 L25,65 L25,55 L35,55 Z M55,55 L55,65 L45,65 L45,55 L55,55 Z M75,55 L75,65 L65,65 L65,55 L75,55 Z M55,40 L55,50 L45,50 L45,40 L55,40 Z M75,40 L75,50 L65,50 L65,40 L75,40 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
-        <path d="M90,0 L10,0 C4.5,0 0,4.5 0,10 L0,90 C0,95.5 4.5,100 10,100 L90,100 C95.5,100 100,95.5 100,90 L100,10 C100,4.5 95.5,0 90,0 Z M10,90 L10,10 L90,10 L90,90 L10,90 Z" id="Shape" fill="currentColor" fill-rule="nonzero"></path>
-        <path d="M90,20 L10,20 C4.5,20 0,24.5 0,30 L0,90 C0,95.5 4.5,100 10,100 L90,100 C95.5,100 100,95.5 100,90 L100,30 C100,24.5 95.5,20 90,20 Z M10,90 L10,30 L90,30 L90,90 L10,90 Z" id="Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="calendar" stroke="none" stroke-width="1">
+        <path
+            d="M35,70 L35,80 L25,80 L25,70 L35,70 Z M55,70 L55,80 L45,80 L45,70 L55,70 Z M35,55 L35,65 L25,65 L25,55 L35,55 Z M55,55 L55,65 L45,65 L45,55 L55,55 Z M75,55 L75,65 L65,65 L65,55 L75,55 Z M55,40 L55,50 L45,50 L45,40 L55,40 Z M75,40 L75,50 L65,50 L65,40 L75,40 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
+        <path
+            d="M90,0 L10,0 C4.5,0 0,4.5 0,10 L0,90 C0,95.5 4.5,100 10,100 L90,100 C95.5,100 100,95.5 100,90 L100,10 C100,4.5 95.5,0 90,0 Z M10,90 L10,10 L90,10 L90,90 L10,90 Z"
+            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
+        <path
+            d="M90,20 L10,20 C4.5,20 0,24.5 0,30 L0,90 C0,95.5 4.5,100 10,100 L90,100 C95.5,100 100,95.5 100,90 L100,30 C100,24.5 95.5,20 90,20 Z M10,90 L10,30 L90,30 L90,90 L10,90 Z"
+            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/case-sensitive.svg b/apps/red-ui/src/assets/icons/general/case-sensitive.svg
index b35bbda56..16dfc94f1 100644
--- a/apps/red-ui/src/assets/icons/general/case-sensitive.svg
+++ b/apps/red-ui/src/assets/icons/general/case-sensitive.svg
@@ -1,13 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="10px" version="1.1" viewBox="0 0 10 10" width="10px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Settings" stroke="none" stroke-width="1">
         <g id="02.3-Dictionary-Details" transform="translate(-1111.000000, -204.000000)">
-            <rect x="0" y="0" width="1440" height="705"></rect>
-            <g id="Group-9" transform="translate(1086.000000, 111.000000)" fill="currentColor" opacity="0.5">
+            <rect height="705" width="1440" x="0" y="0"></rect>
+            <g fill="currentColor" id="Group-9" opacity="0.5" transform="translate(1086.000000, 111.000000)">
                 <g id="Group-8" transform="translate(25.000000, 69.000000)">
                     <g id="Group-19" transform="translate(0.000000, 22.000000)">
                         <g id="status" transform="translate(0.000000, 2.000000)">
-                            <path d="M6.72413793,0.7 C7.00968966,0.7 7.24137931,0.931689655 7.24137931,1.21724138 L7.24137931,1.21724138 L7.24137931,2.76896552 L6.20689655,2.76896552 L6.20689655,1.73448276 L4.13793103,1.73448276 L4.13793103,8.2862069 L5.51724138,8.2862069 L5.51724138,9.32068966 L1.72413793,9.32068966 L1.72413793,8.2862069 L3.10344828,8.2862069 L3.10344828,1.73448276 L1.03448276,1.73448276 L1.03448276,2.76896552 L7.01660952e-15,2.76896552 L7.01660952e-15,1.21724138 C7.01660952e-15,0.931689655 0.231689655,0.7 0.517241379,0.7 L0.517241379,0.7 Z M8.27586207,4.14834483 L8.27586207,5.52765517 L9.82758621,5.52765517 L9.82758621,6.56213793 L8.27586207,6.56213793 L8.27586207,7.90844828 C8.27586207,8.11722931 8.44491379,8.28627586 8.65368966,8.28627586 L8.65368966,8.28627586 L10,8.28627586 L10,9.32075862 L8.65368966,9.32075862 C7.8737931,9.32075862 7.24137931,8.68834483 7.24137931,7.90844828 L7.24137931,7.90844828 L7.24137931,6.56213793 L5.86206897,6.56213793 L5.86206897,5.52765517 L7.24137931,5.52765517 L7.24137931,4.14834483 L8.27586207,4.14834483 Z" id="Combined-Shape"></path>
+                            <path
+                                d="M6.72413793,0.7 C7.00968966,0.7 7.24137931,0.931689655 7.24137931,1.21724138 L7.24137931,1.21724138 L7.24137931,2.76896552 L6.20689655,2.76896552 L6.20689655,1.73448276 L4.13793103,1.73448276 L4.13793103,8.2862069 L5.51724138,8.2862069 L5.51724138,9.32068966 L1.72413793,9.32068966 L1.72413793,8.2862069 L3.10344828,8.2862069 L3.10344828,1.73448276 L1.03448276,1.73448276 L1.03448276,2.76896552 L7.01660952e-15,2.76896552 L7.01660952e-15,1.21724138 C7.01660952e-15,0.931689655 0.231689655,0.7 0.517241379,0.7 L0.517241379,0.7 Z M8.27586207,4.14834483 L8.27586207,5.52765517 L9.82758621,5.52765517 L9.82758621,6.56213793 L8.27586207,6.56213793 L8.27586207,7.90844828 C8.27586207,8.11722931 8.44491379,8.28627586 8.65368966,8.28627586 L8.65368966,8.28627586 L10,8.28627586 L10,9.32075862 L8.65368966,9.32075862 C7.8737931,9.32075862 7.24137931,8.68834483 7.24137931,7.90844828 L7.24137931,7.90844828 L7.24137931,6.56213793 L5.86206897,6.56213793 L5.86206897,5.52765517 L7.24137931,5.52765517 L7.24137931,4.14834483 L8.27586207,4.14834483 Z"
+                                id="Combined-Shape"></path>
                         </g>
                     </g>
                 </g>
diff --git a/apps/red-ui/src/assets/icons/general/check.svg b/apps/red-ui/src/assets/icons/general/check.svg
index eff76ca47..655a17760 100644
--- a/apps/red-ui/src/assets/icons/general/check.svg
+++ b/apps/red-ui/src/assets/icons/general/check.svg
@@ -1,10 +1,10 @@
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-     viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
+<svg id="Capa_1" style="enable-background:new 0 0 426.667 426.667;" version="1.1" viewBox="0 0 426.667 426.667" x="0px"
+     xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
 <g>
 	<g>
 		<path d="M421.876,56.307c-6.548-6.78-17.352-6.968-24.132-0.42c-0.142,0.137-0.282,0.277-0.42,0.42L119.257,334.375
 			l-90.334-90.334c-6.78-6.548-17.584-6.36-24.132,0.42c-6.388,6.614-6.388,17.099,0,23.713l102.4,102.4
-			c6.665,6.663,17.468,6.663,24.132,0L421.456,80.44C428.236,73.891,428.424,63.087,421.876,56.307z"/>
+			c6.665,6.663,17.468,6.663,24.132,0L421.456,80.44C428.236,73.891,428.424,63.087,421.876,56.307z" />
 	</g>
 </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/close.svg b/apps/red-ui/src/assets/icons/general/close.svg
index 3120b9e37..ab8741da6 100644
--- a/apps/red-ui/src/assets/icons/general/close.svg
+++ b/apps/red-ui/src/assets/icons/general/close.svg
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <g id="close" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentColor" fill-rule="evenodd" id="close" stroke="none" stroke-width="1">
         <path
             d="M93,0 L100,7 L57,50 L100,93 L93,100 L50,57 L7,100 L3.55271368e-15,93 L43,50 L3.55271368e-15,7 L7,0 L50,43 L93,0 Z"
-            id="Combined-Shape" fill-rule="nonzero"></path>
+            fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/collapse.svg b/apps/red-ui/src/assets/icons/general/collapse.svg
index af70b399c..8f1206247 100644
--- a/apps/red-ui/src/assets/icons/general/collapse.svg
+++ b/apps/red-ui/src/assets/icons/general/collapse.svg
@@ -1,12 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Projects-&amp;-Documents" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Projects-&amp;-Documents" stroke="none" stroke-width="1">
         <g id="04.-Document-Hover" transform="translate(-1400.000000, -137.000000)">
-            <rect x="0" y="0" width="1440" height="980"></rect>
-            <g id="Project-details" transform="translate(1111.000000, 127.000000)" fill="currentColor" fill-rule="nonzero">
+            <rect height="980" width="1440" x="0" y="0"></rect>
+            <g fill="currentColor" fill-rule="nonzero" id="Project-details"
+               transform="translate(1111.000000, 127.000000)">
                 <g id="Group-6" transform="translate(279.000000, 0.000000)">
                     <g id="status" transform="translate(10.000000, 10.000000)">
-                        <polygon id="Path" points="9.17 3.5 8.19 4.48 9.94 6.3 1.4 6.3 1.4 7.7 9.94 7.7 8.19 9.52 9.17 10.5 12.6 7"></polygon>
+                        <polygon id="Path"
+                                 points="9.17 3.5 8.19 4.48 9.94 6.3 1.4 6.3 1.4 7.7 9.94 7.7 8.19 9.52 9.17 10.5 12.6 7"></polygon>
                     </g>
                 </g>
             </g>
diff --git a/apps/red-ui/src/assets/icons/general/color-picker.svg b/apps/red-ui/src/assets/icons/general/color-picker.svg
index 2647473cd..fecf6cdaf 100644
--- a/apps/red-ui/src/assets/icons/general/color-picker.svg
+++ b/apps/red-ui/src/assets/icons/general/color-picker.svg
@@ -1,5 +1,5 @@
-<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-     viewBox="0 0 464.736 464.736" style="enable-background:new 0 0 464.736 464.736;" xml:space="preserve">
+<svg id="Capa_1" style="enable-background:new 0 0 464.736 464.736;" viewBox="0 0 464.736 464.736" x="0px"
+     xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
 <g>
 	<path d="M446.598,18.143c-24.183-24.184-63.393-24.191-87.592-0.008l-16.717,16.717c-8.98-8.979-23.525-8.979-32.504,0
 		c-8.981,8.972-8.981,23.533,0,32.505l5.416,5.419L134.613,253.377h-0.016l-62.685,62.691c-4.982,4.982-7.919,11.646-8.235,18.684
@@ -7,8 +7,8 @@
 		c0.135,0,0.269,0,0.42-0.008l30.064-1.331h0.016l18.318-0.815l8.318-0.366c9.203-0.412,17.944-4.259,24.469-10.776l240.898-240.891
 		l4.506,4.505c4.49,4.488,10.372,6.733,16.252,6.733c5.881,0,11.764-2.245,16.253-6.733c8.98-8.973,8.98-23.534,0-32.505
 		l16.716-16.718C470.782,81.544,470.782,42.334,446.598,18.143z M272.639,227.33l-84.6,15.96l137.998-138.004l34.332,34.316
-		L272.639,227.33z" fill="currentColor"/>
+		L272.639,227.33z" fill="currentColor" />
     <path d="M64.5,423.872c-35.617,0-64.5,9.145-64.5,20.435c0,11.284,28.883,20.428,64.5,20.428s64.486-9.143,64.486-20.428
-		C128.986,433.016,100.117,423.872,64.5,423.872z" fill="currentColor"/>
+		C128.986,433.016,100.117,423.872,64.5,423.872z" fill="currentColor" />
 </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/comment-fill.svg b/apps/red-ui/src/assets/icons/general/comment-fill.svg
index 02062e305..b4a5e30ff 100644
--- a/apps/red-ui/src/assets/icons/general/comment-fill.svg
+++ b/apps/red-ui/src/assets/icons/general/comment-fill.svg
@@ -1,10 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Comments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Comments" stroke="none" stroke-width="1">
         <g id="02.-Show-More/Less" transform="translate(-1159.000000, -306.000000)">
-            <g id="Group-3" transform="translate(1159.000000, 306.000000)" fill="currentColor" fill-rule="nonzero">
+            <g fill="currentColor" fill-rule="nonzero" id="Group-3" transform="translate(1159.000000, 306.000000)">
                 <g id="Group-3">
-                    <path d="M7,12.8947368 C6.718,12.8947368 6.342,12.8947368 5.966,12.8026316 L5.684,12.8026316 L2.3,14 L2.3,10.9605263 L2.018,10.6842105 C0.984,9.48684211 0.42,8.01315789 0.42,6.44736842 C0.42,2.85526316 3.334,0 7,0 C10.666,0 13.58,2.85526316 13.58,6.44736842 C13.58,10.0394737 10.666,12.8947368 7,12.8947368 Z" id="Shape"></path>
+                    <path
+                        d="M7,12.8947368 C6.718,12.8947368 6.342,12.8947368 5.966,12.8026316 L5.684,12.8026316 L2.3,14 L2.3,10.9605263 L2.018,10.6842105 C0.984,9.48684211 0.42,8.01315789 0.42,6.44736842 C0.42,2.85526316 3.334,0 7,0 C10.666,0 13.58,2.85526316 13.58,6.44736842 C13.58,10.0394737 10.666,12.8947368 7,12.8947368 Z"
+                        id="Shape"></path>
                 </g>
             </g>
         </g>
diff --git a/apps/red-ui/src/assets/icons/general/comment.svg b/apps/red-ui/src/assets/icons/general/comment.svg
index 6190f8052..9c25e9c46 100644
--- a/apps/red-ui/src/assets/icons/general/comment.svg
+++ b/apps/red-ui/src/assets/icons/general/comment.svg
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <g id="comments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="comments" stroke="none" stroke-width="1">
         <path
             d="M50,0 C25,0 5,20 5,45 C5,55.5 8.5,65 15,73 L15,100 L44,89.5 C46.5,90 48,90 50,90 C75,90 95,70 95,45 C95,20 75,0 50,0 Z M50,80 C48.5,80 46.5,80 44.5,79.5 L43,79.5 L25,86 L25,69.5 L23.5,68 C18,61.5 15,53.5 15,45 C15,25.5 30.5,10 50,10 C69.5,10 85,25.5 85,45 C85,64.5 69.5,80 50,80 Z"
-            id="Shape" fill="currentColor" fill-rule="nonzero"></path>
+            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/dictionary.svg b/apps/red-ui/src/assets/icons/general/dictionary.svg
index 86baddd35..c7d0eb373 100644
--- a/apps/red-ui/src/assets/icons/general/dictionary.svg
+++ b/apps/red-ui/src/assets/icons/general/dictionary.svg
@@ -1,12 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="10px" version="1.1" viewBox="0 0 10 10" width="10px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Settings" stroke="none" stroke-width="1">
         <g id="01.0-Rule-Sets" transform="translate(-40.000000, -241.000000)">
-            <rect x="0" y="0" width="1440" height="705"></rect>
-            <rect id="Rectangle" x="0" y="193" width="1440" height="80"></rect>
-            <g id="Group-16" transform="translate(40.000000, 239.000000)" fill="currentColor" fill-rule="nonzero" >
+            <rect height="705" width="1440" x="0" y="0"></rect>
+            <rect height="80" id="Rectangle" width="1440" x="0" y="193"></rect>
+            <g fill="currentColor" fill-rule="nonzero" id="Group-16" transform="translate(40.000000, 239.000000)">
                 <g id="status" transform="translate(0.000000, 2.000000)">
-                    <path d="M9.5,0 L9.5,10 L2,10 C1.15,10 0.5,9.35 0.5,8.5 L0.5,8.5 L0.5,1.5 C0.5,0.65 1.15,0 2,0 L2,0 L9.5,0 Z M2.5,1 L2,1 C1.7,1 1.5,1.2 1.5,1.5 L1.5,1.5 L1.5,8.5 C1.5,8.8 1.7,9 2,9 L2,9 L2.5,9 L2.5,1 Z M8.5,1 L3.5,1 L3.5,9 L8.5,9 L8.5,1 Z M7.5,2 L7.5,5 L4.5,5 L4.5,2 L7.5,2 Z M6.5,3 L5.5,3 L5.5,4 L6.5,4 L6.5,3 Z" id="Combined-Shape"></path>
+                    <path
+                        d="M9.5,0 L9.5,10 L2,10 C1.15,10 0.5,9.35 0.5,8.5 L0.5,8.5 L0.5,1.5 C0.5,0.65 1.15,0 2,0 L2,0 L9.5,0 Z M2.5,1 L2,1 C1.7,1 1.5,1.2 1.5,1.5 L1.5,1.5 L1.5,8.5 C1.5,8.8 1.7,9 2,9 L2,9 L2.5,9 L2.5,1 Z M8.5,1 L3.5,1 L3.5,9 L8.5,9 L8.5,1 Z M7.5,2 L7.5,5 L4.5,5 L4.5,2 L7.5,2 Z M6.5,3 L5.5,3 L5.5,4 L6.5,4 L6.5,3 Z"
+                        id="Combined-Shape"></path>
                 </g>
             </g>
             <g id="Group-20" transform="translate(0.000000, 163.000000)"></g>
diff --git a/apps/red-ui/src/assets/icons/general/document.svg b/apps/red-ui/src/assets/icons/general/document.svg
index 1cac84c13..ba0c3b027 100644
--- a/apps/red-ui/src/assets/icons/general/document.svg
+++ b/apps/red-ui/src/assets/icons/general/document.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="document" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
-        <path d="M90,0 L90,100 L10,100 L10,0 L90,0 Z M80,10 L20,10 L20,90 L80,90 L80,10 Z M50,60 L50,70 L30,70 L30,60 L50,60 Z M70,40 L70,50 L30,50 L30,40 L70,40 Z M70,20 L70,30 L30,30 L30,20 L70,20 Z" id="Combined-Shape"  fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentColor" fill-rule="evenodd" id="document" stroke="none" stroke-width="1">
+        <path
+            d="M90,0 L90,100 L10,100 L10,0 L90,0 Z M80,10 L20,10 L20,90 L80,90 L80,10 Z M50,60 L50,70 L30,70 L30,60 L50,60 Z M70,40 L70,50 L30,50 L30,40 L70,40 Z M70,20 L70,30 L30,30 L30,20 L70,20 Z"
+            fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/double-chevron-right.svg b/apps/red-ui/src/assets/icons/general/double-chevron-right.svg
index 800da3f2c..199f12324 100644
--- a/apps/red-ui/src/assets/icons/general/double-chevron-right.svg
+++ b/apps/red-ui/src/assets/icons/general/double-chevron-right.svg
@@ -4,9 +4,11 @@
 <g id="XMLID_27_">
 	<path d="M310.607,154.391l-150-149.997c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0,21.213
 		l139.393,139.39L139.394,304.394c-5.857,5.858-5.857,15.355,0,21.213c2.929,2.929,6.768,4.393,10.606,4.393
-		s7.678-1.464,10.607-4.394l150-150.003c2.813-2.813,4.393-6.628,4.393-10.606C315,161.019,313.42,157.204,310.607,154.391z" id="XMLID_28_"/>
-  <path d="M195.001,164.996c0-3.979-1.581-7.794-4.394-10.607L40.606,4.393c-5.858-5.858-15.355-5.858-21.213,0.001
+		s7.678-1.464,10.607-4.394l150-150.003c2.813-2.813,4.393-6.628,4.393-10.606C315,161.019,313.42,157.204,310.607,154.391z"
+          id="XMLID_28_" />
+    <path d="M195.001,164.996c0-3.979-1.581-7.794-4.394-10.607L40.606,4.393c-5.858-5.858-15.355-5.858-21.213,0.001
 		c-5.857,5.858-5.857,15.355,0.001,21.213l139.394,139.39L19.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213
-		C22.322,328.536,26.161,330,30,330s7.678-1.464,10.607-4.394l150.001-150.004C193.42,172.79,195.001,168.974,195.001,164.996z" id="XMLID_29_"/>
+		C22.322,328.536,26.161,330,30,330s7.678-1.464,10.607-4.394l150.001-150.004C193.42,172.79,195.001,168.974,195.001,164.996z"
+          id="XMLID_29_" />
 </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/download.svg b/apps/red-ui/src/assets/icons/general/download.svg
index f279e4840..577d13f84 100644
--- a/apps/red-ui/src/assets/icons/general/download.svg
+++ b/apps/red-ui/src/assets/icons/general/download.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="download" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M10,60 L10,90 L90,90 L90,60 L100,60 L100,100 L0,100 L0,60 L10,60 Z M55,0 L55,61 L68,48 L75,55 L50,80 L25,55 L32,48 L45,61 L45,0 L55,0 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="download" stroke="none" stroke-width="1">
+        <path
+            d="M10,60 L10,90 L90,90 L90,60 L100,60 L100,100 L0,100 L0,60 L10,60 Z M55,0 L55,61 L68,48 L75,55 L50,80 L25,55 L32,48 L45,61 L45,0 L55,0 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/edit.svg b/apps/red-ui/src/assets/icons/general/edit.svg
index 0c7146875..90582125d 100644
--- a/apps/red-ui/src/assets/icons/general/edit.svg
+++ b/apps/red-ui/src/assets/icons/general/edit.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="edit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M97.0465218,17 L83.0398073,3 C79.0378889,-1 72.5347714,-1 69.0330928,3 L0,71.5 L0,100 L28.5136688,100 L97.0465218,31 C102.54916,25.5 99.047481,19 97.0465218,17 Z M24.0115105,90 L10.0047961,90 L10.0047961,76 L62.0297356,24 L76.03645,38 L24.0115105,90 Z M83.0398073,31 L69.0330928,17 L76.03645,10 L90.0431645,24 L83.0398073,31 Z" id="Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="edit" stroke="none" stroke-width="1">
+        <path
+            d="M97.0465218,17 L83.0398073,3 C79.0378889,-1 72.5347714,-1 69.0330928,3 L0,71.5 L0,100 L28.5136688,100 L97.0465218,31 C102.54916,25.5 99.047481,19 97.0465218,17 Z M24.0115105,90 L10.0047961,90 L10.0047961,76 L62.0297356,24 L76.03645,38 L24.0115105,90 Z M83.0398073,31 L69.0330928,17 L76.03645,10 L90.0431645,24 L83.0398073,31 Z"
+            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/entries.svg b/apps/red-ui/src/assets/icons/general/entries.svg
index 55aafb527..7a587c418 100644
--- a/apps/red-ui/src/assets/icons/general/entries.svg
+++ b/apps/red-ui/src/assets/icons/general/entries.svg
@@ -1,13 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="10px" version="1.1" viewBox="0 0 10 10" width="10px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Settings" stroke="none" stroke-width="1">
         <g id="01.-Dictionaries" transform="translate(-72.000000, -241.000000)">
-            <rect x="0" y="0" width="1440" height="705"></rect>
+            <rect height="705" width="1440" x="0" y="0"></rect>
             <g id="Dictionary" transform="translate(0.000000, 193.000000)">
-                <rect id="Rectangle" x="0" y="0" width="1086" height="80"></rect>
-                <g id="Group-16" transform="translate(72.000000, 46.000000)" fill="currentColor" fill-rule="nonzero">
+                <rect height="80" id="Rectangle" width="1086" x="0" y="0"></rect>
+                <g fill="currentColor" fill-rule="nonzero" id="Group-16" transform="translate(72.000000, 46.000000)">
                     <g id="status" transform="translate(0.000000, 2.000000)">
-                        <path d="M5,7.5 L5,8.5 L0,8.5 L0,7.5 L5,7.5 Z M10,5.5 L10,6.5 L0,6.5 L0,5.5 L10,5.5 Z M10,3.5 L10,4.5 L0,4.5 L0,3.5 L10,3.5 Z M10,1.5 L10,2.5 L0,2.5 L0,1.5 L10,1.5 Z" id="Combined-Shape"></path>
+                        <path
+                            d="M5,7.5 L5,8.5 L0,8.5 L0,7.5 L5,7.5 Z M10,5.5 L10,6.5 L0,6.5 L0,5.5 L10,5.5 Z M10,3.5 L10,4.5 L0,4.5 L0,3.5 L10,3.5 Z M10,1.5 L10,2.5 L0,2.5 L0,1.5 L10,1.5 Z"
+                            id="Combined-Shape"></path>
                     </g>
                 </g>
             </g>
diff --git a/apps/red-ui/src/assets/icons/general/error.svg b/apps/red-ui/src/assets/icons/general/error.svg
index 98251e489..748e8b0e5 100755
--- a/apps/red-ui/src/assets/icons/general/error.svg
+++ b/apps/red-ui/src/assets/icons/general/error.svg
@@ -1,10 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg">
     <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
     <defs></defs>
-    <g id="Upload" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Upload-Errors-01" transform="translate(-1388.000000, -622.000000)" fill="currentColor">
-            <path d="M1405.075,639.075 C1406.88516,637.26484 1408,634.761 1408,632 C1408,629.2398 1406.88516,626.7352 1405.075,624.925 C1403.26484,623.1148 1400.761,622 1398,622 C1395.2398,622 1392.7352,623.11484 1390.925,624.925 C1389.1148,626.73516 1388,629.239 1388,632 C1388,634.7602 1389.11484,637.2648 1390.925,639.075 C1392.73516,640.8852 1395.239,642 1398,642 C1400.7602,642 1403.2648,640.88516 1405.075,639.075 Z M1399.3532,635.8578 C1399.3532,635.10858 1398.75008,634.50468 1398.00008,634.50468 C1397.25086,634.50468 1396.62898,635.1078 1396.62898,635.8578 C1396.62898,636.60702 1397.25086,637.2289 1398.00008,637.2289 C1398.7493,637.2289 1399.3532,636.60702 1399.3532,635.8578 Z M1398.00008,633.1336 C1397.50632,633.1336 1397.1407,632.73126 1397.08602,632.21954 L1396.62898,628.14294 C1396.55554,627.42966 1397.30554,626.77184 1398.00008,626.77184 C1398.69462,626.77184 1399.44462,627.42966 1399.3532,628.14294 L1398.91414,632.21954 C1398.85945,632.73126 1398.49382,633.1336 1398.00008,633.1336 Z" id="error_icon"></path>
+    <g fill="none" fill-rule="evenodd" id="Upload" stroke="none" stroke-width="1">
+        <g fill="currentColor" id="Upload-Errors-01" transform="translate(-1388.000000, -622.000000)">
+            <path
+                d="M1405.075,639.075 C1406.88516,637.26484 1408,634.761 1408,632 C1408,629.2398 1406.88516,626.7352 1405.075,624.925 C1403.26484,623.1148 1400.761,622 1398,622 C1395.2398,622 1392.7352,623.11484 1390.925,624.925 C1389.1148,626.73516 1388,629.239 1388,632 C1388,634.7602 1389.11484,637.2648 1390.925,639.075 C1392.73516,640.8852 1395.239,642 1398,642 C1400.7602,642 1403.2648,640.88516 1405.075,639.075 Z M1399.3532,635.8578 C1399.3532,635.10858 1398.75008,634.50468 1398.00008,634.50468 C1397.25086,634.50468 1396.62898,635.1078 1396.62898,635.8578 C1396.62898,636.60702 1397.25086,637.2289 1398.00008,637.2289 C1398.7493,637.2289 1399.3532,636.60702 1399.3532,635.8578 Z M1398.00008,633.1336 C1397.50632,633.1336 1397.1407,632.73126 1397.08602,632.21954 L1396.62898,628.14294 C1396.55554,627.42966 1397.30554,626.77184 1398.00008,626.77184 C1398.69462,626.77184 1399.44462,627.42966 1399.3532,628.14294 L1398.91414,632.21954 C1398.85945,632.73126 1398.49382,633.1336 1398.00008,633.1336 Z"
+                id="error_icon"></path>
         </g>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/exit-fullscreen.svg b/apps/red-ui/src/assets/icons/general/exit-fullscreen.svg
index 875e0de9d..e747666fd 100644
--- a/apps/red-ui/src/assets/icons/general/exit-fullscreen.svg
+++ b/apps/red-ui/src/assets/icons/general/exit-fullscreen.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="minimize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M40,60 L40,90 L30,90 L30,77 L7,100 L0,93 L23,70 L10,70 L10,60 L40,60 Z M90,60 L90,70 L77,70 L100,93 L93,100 L70,77 L70,90 L60,90 L60,60 L90,60 Z M93,0 L100,7 L77,30 L90,30 L90,40 L60,40 L60,10 L70,10 L70,23 L93,0 Z M7,0 L30,23 L30,10 L40,10 L40,40 L10,40 L10,30 L23,30 L0,7 L7,0 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="minimize" stroke="none" stroke-width="1">
+        <path
+            d="M40,60 L40,90 L30,90 L30,77 L7,100 L0,93 L23,70 L10,70 L10,60 L40,60 Z M90,60 L90,70 L77,70 L100,93 L93,100 L70,77 L70,90 L60,90 L60,60 L90,60 Z M93,0 L100,7 L77,30 L90,30 L90,40 L60,40 L60,10 L70,10 L70,23 L93,0 Z M7,0 L30,23 L30,10 L40,10 L40,40 L10,40 L10,30 L23,30 L0,7 L7,0 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/expand.svg b/apps/red-ui/src/assets/icons/general/expand.svg
index 99d7d23c8..c1d84fcc9 100644
--- a/apps/red-ui/src/assets/icons/general/expand.svg
+++ b/apps/red-ui/src/assets/icons/general/expand.svg
@@ -1,13 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Projects-&amp;-Documents" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Projects-&amp;-Documents" stroke="none" stroke-width="1">
         <g id="04.-Collapsed-Details" transform="translate(-1403.000000, -137.000000)">
-            <rect x="0" y="0" width="1440" height="980"></rect>
-            <rect id="Rectangle" x="1380" y="111" width="60" height="1500"></rect>
+            <rect height="980" width="1440" x="0" y="0"></rect>
+            <rect height="1500" id="Rectangle" width="60" x="1380" y="111"></rect>
             <g id="Group-6" transform="translate(1393.000000, 127.000000)">
-                <rect id="Rectangle" x="0" y="0" width="34" height="34" rx="17"></rect>
-                <g id="status" transform="translate(17.000000, 17.000000) scale(-1, 1) translate(-17.000000, -17.000000) translate(10.000000, 10.000000)" fill="currentColor" fill-rule="nonzero">
-                    <polygon id="Path" points="9.17 3.5 8.19 4.48 9.94 6.3 1.4 6.3 1.4 7.7 9.94 7.7 8.19 9.52 9.17 10.5 12.6 7"></polygon>
+                <rect height="34" id="Rectangle" rx="17" width="34" x="0" y="0"></rect>
+                <g fill="currentColor"
+                   fill-rule="nonzero"
+                   id="status" transform="translate(17.000000, 17.000000) scale(-1, 1) translate(-17.000000, -17.000000) translate(10.000000, 10.000000)">
+                    <polygon id="Path"
+                             points="9.17 3.5 8.19 4.48 9.94 6.3 1.4 6.3 1.4 7.7 9.94 7.7 8.19 9.52 9.17 10.5 12.6 7"></polygon>
                 </g>
             </g>
         </g>
diff --git a/apps/red-ui/src/assets/icons/general/folder.svg b/apps/red-ui/src/assets/icons/general/folder.svg
index f6dfe8512..545911e98 100644
--- a/apps/red-ui/src/assets/icons/general/folder.svg
+++ b/apps/red-ui/src/assets/icons/general/folder.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="folder" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M43,15 L38,5 L0,5 L0,95 L100,95 L100,15 L43,15 Z M32,15 L37,25 L55.5,25 L52,30 L10,30 L10,15 L32,15 Z M90,85 L10,85 L10,40 L57.5,40 L67.5,25 L90,25 L90,85 Z" id="Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="folder" stroke="none" stroke-width="1">
+        <path
+            d="M43,15 L38,5 L0,5 L0,95 L100,95 L100,15 L43,15 Z M32,15 L37,25 L55.5,25 L52,30 L10,30 L10,15 L32,15 Z M90,85 L10,85 L10,40 L57.5,40 L67.5,25 L90,25 L90,85 Z"
+            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/fullscreen.svg b/apps/red-ui/src/assets/icons/general/fullscreen.svg
index f2e060e3f..e96909686 100644
--- a/apps/red-ui/src/assets/icons/general/fullscreen.svg
+++ b/apps/red-ui/src/assets/icons/general/fullscreen.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="full-screen" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M36.5,56.5 L43.5,63.5 L17,90 L30,90 L30,100 L0,100 L0,70 L10,70 L10,83 L36.5,56.5 Z M63.5,56.5 L90,83 L90,70 L100,70 L100,100 L70,100 L70,90 L83,90 L56.5,63.5 L63.5,56.5 Z M100,0 L100,30 L90,30 L90,17 L63.5,43.5 L56.5,36.5 L83,10 L70,10 L70,0 L100,0 Z M30,0 L30,10 L17,10 L43.5,36.5 L36.5,43.5 L10,17 L10,30 L0,30 L0,0 L30,0 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="full-screen" stroke="none" stroke-width="1">
+        <path
+            d="M36.5,56.5 L43.5,63.5 L17,90 L30,90 L30,100 L0,100 L0,70 L10,70 L10,83 L36.5,56.5 Z M63.5,56.5 L90,83 L90,70 L100,70 L100,100 L70,100 L70,90 L83,90 L56.5,63.5 L63.5,56.5 Z M100,0 L100,30 L90,30 L90,17 L63.5,43.5 L56.5,36.5 L83,10 L70,10 L70,0 L100,0 Z M30,0 L30,10 L17,10 L43.5,36.5 L36.5,43.5 L10,17 L10,30 L0,30 L0,0 L30,0 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/html-file.svg b/apps/red-ui/src/assets/icons/general/html-file.svg
index bf55986ff..cd9e2687e 100644
--- a/apps/red-ui/src/assets/icons/general/html-file.svg
+++ b/apps/red-ui/src/assets/icons/general/html-file.svg
@@ -1,15 +1,15 @@
-<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<svg id="Capa_1" style="enable-background:new 0 0 512 512;" viewBox="0 0 512 512" x="0px"
+     xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
 <g fill="currentColor">
 			<path d="M315.36,4.64C312.341,1.645,308.253-0.024,304,0H48C21.49,0,0,21.491,0,48v416c0,26.51,21.49,48,48,48h112v-32H48
 				c-8.837,0-16-7.163-16-16V48c0-8.837,7.163-16,16-16h240v64c0,17.673,14.327,32,32,32h64v48h32v-64
-				c0.025-4.253-1.645-8.341-4.64-11.36L315.36,4.64z"/>
-    <polygon points="176,288 208,288 208,416 240,416 240,288 272,288 272,256 176,256 			"/>
+				c0.025-4.253-1.645-8.341-4.64-11.36L315.36,4.64z" />
+    <polygon points="176,288 208,288 208,416 240,416 240,288 272,288 272,256 176,256 			" />
     <polygon
-        points="128,320 96,320 96,256 64,256 64,416 96,416 96,352 128,352 128,416 160,416 160,256 128,256 			"/>
+        points="128,320 96,320 96,256 64,256 64,416 96,416 96,352 128,352 128,416 160,416 160,256 128,256 			" />
     <path d="M406.08,257.28c-5.99-2.465-12.875-1.075-17.44,3.52L352,297.44l-36.64-36.64c-6.223-6.274-16.353-6.316-22.627-0.093
 				c-3.013,2.988-4.715,7.05-4.733,11.293v144h32V310.56l20.64,20.64c6.241,6.204,16.319,6.204,22.56,0l20.8-20.64V416h32V272
-				C415.968,265.541,412.055,259.735,406.08,257.28z"/>
-    <path d="M464,384V256h-32v144c0,8.837,7.163,16,16,16h64v-32H464z"/>
+				C415.968,265.541,412.055,259.735,406.08,257.28z" />
+    <path d="M464,384V256h-32v144c0,8.837,7.163,16,16,16h64v-32H464z" />
 </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/info.svg b/apps/red-ui/src/assets/icons/general/info.svg
index fbdc1d059..02a60cb52 100644
--- a/apps/red-ui/src/assets/icons/general/info.svg
+++ b/apps/red-ui/src/assets/icons/general/info.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="info" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M50,0 C77.5,0 100,22.5 100,50 C100,77.5 77.5,100 50,100 C22.5,100 0,77.5 0,50 C0,22.5 22.5,0 50,0 Z M50,10 C28,10 10,28 10,50 C10,72 28,90 50,90 C72,90 90,72 90,50 C90,28 72,10 50,10 Z M50,38.25 C57.5,38.25 59.3203,42.6758 58.4805,48.1328 L55,70.7498 L55.0318998,70.7491065 C55.3367202,70.7391667 57.826087,70.5867565 62.5,68.2498 C62.5,68.2498 60,78.2498 50,78.2498 C42.5,78.2498 40.6797,73.824 41.5195,68.367 L45,45.75 L44.9681002,45.7506935 C44.6632798,45.7606333 42.173913,45.9130435 37.5,48.25 C37.5,48.25 40,38.25 50,38.25 Z M52.5,19.75 C56.6445,19.75 60,23.1094 60,27.25 C60,31.3906 56.6445,34.75 52.5,34.75 C48.3555,34.75 45,31.3906 45,27.25 C45,23.1094 48.3555,19.75 52.5,19.75 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="info" stroke="none" stroke-width="1">
+        <path
+            d="M50,0 C77.5,0 100,22.5 100,50 C100,77.5 77.5,100 50,100 C22.5,100 0,77.5 0,50 C0,22.5 22.5,0 50,0 Z M50,10 C28,10 10,28 10,50 C10,72 28,90 50,90 C72,90 90,72 90,50 C90,28 72,10 50,10 Z M50,38.25 C57.5,38.25 59.3203,42.6758 58.4805,48.1328 L55,70.7498 L55.0318998,70.7491065 C55.3367202,70.7391667 57.826087,70.5867565 62.5,68.2498 C62.5,68.2498 60,78.2498 50,78.2498 C42.5,78.2498 40.6797,73.824 41.5195,68.367 L45,45.75 L44.9681002,45.7506935 C44.6632798,45.7606333 42.173913,45.9130435 37.5,48.25 C37.5,48.25 40,38.25 50,38.25 Z M52.5,19.75 C56.6445,19.75 60,23.1094 60,27.25 C60,31.3906 56.6445,34.75 52.5,34.75 C48.3555,34.75 45,31.3906 45,27.25 C45,23.1094 48.3555,19.75 52.5,19.75 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/lightning.svg b/apps/red-ui/src/assets/icons/general/lightning.svg
index 123ab15d9..d1bee0daf 100644
--- a/apps/red-ui/src/assets/icons/general/lightning.svg
+++ b/apps/red-ui/src/assets/icons/general/lightning.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="due" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M70.4893515,-9.9475983e-14 L62.4015412,33.8688525 L83,33.8688525 L43.936,99.999 L25.137,99.999 L32.8329308,67.7704918 L17,67.7704918 L33.1807168,-9.9475983e-14 L70.4893515,-9.9475983e-14 Z M57.9505865,9.83606557 L41.0222871,9.83606557 L29.5384402,57.9344262 L45.3723404,57.9344262 L37.2849872,91.8032787 L65.6971335,43.704918 L49.8632333,43.704918 L57.9505865,9.83606557 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="due" stroke="none" stroke-width="1">
+        <path
+            d="M70.4893515,-9.9475983e-14 L62.4015412,33.8688525 L83,33.8688525 L43.936,99.999 L25.137,99.999 L32.8329308,67.7704918 L17,67.7704918 L33.1807168,-9.9475983e-14 L70.4893515,-9.9475983e-14 Z M57.9505865,9.83606557 L41.0222871,9.83606557 L29.5384402,57.9344262 L45.3723404,57.9344262 L37.2849872,91.8032787 L65.6971335,43.704918 L49.8632333,43.704918 L57.9505865,9.83606557 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/logo.svg b/apps/red-ui/src/assets/icons/general/logo.svg
index 9889e7d63..49eba7b8f 100644
--- a/apps/red-ui/src/assets/icons/general/logo.svg
+++ b/apps/red-ui/src/assets/icons/general/logo.svg
@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="ReadactManager_symbol_positive"
-     xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 119.476 121.277" fill="currentColor"
-     xml:space="preserve">
+<svg fill="currentColor" id="ReadactManager_symbol_positive"
+     version="1.1" viewBox="0 0 119.476 121.277" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
+     y="0px">
 <path d="M74.16,0c0,0,15.096,14.712,45.316,14.712v67.197c0,0,0,19.825-45.316,39.368c-26.899-11.6-37.778-23.266-42.22-30.86
 	H21.561c-2.349,0-4.254-1.905-4.254-4.254c0-2.349,1.904-4.254,4.254-4.254h7.283H52.6c2.349,0,4.254-1.904,4.254-4.254
 	s-1.904-4.254-4.254-4.254H28.843H15.793H4.254C1.904,73.401,0,71.496,0,69.146c0-2.349,1.904-4.254,4.254-4.254h24.59h41.062
 	c2.349,0,4.255-1.904,4.255-4.254s-1.906-4.254-4.255-4.254H28.843H4.254C1.904,56.385,0,54.48,0,52.13
 	c0-2.349,1.904-4.254,4.254-4.254h11.539h13.051H52.6c2.349,0,4.254-1.905,4.254-4.254c0-2.35-1.904-4.254-4.254-4.254H28.843
-	h-7.283c-2.349,0-4.254-1.905-4.254-4.254c0-2.349,1.904-4.254,4.254-4.254h7.283V14.712C59.063,14.712,74.16,0,74.16,0z"/>
+	h-7.283c-2.349,0-4.254-1.905-4.254-4.254c0-2.349,1.904-4.254,4.254-4.254h7.283V14.712C59.063,14.712,74.16,0,74.16,0z" />
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/logout.svg b/apps/red-ui/src/assets/icons/general/logout.svg
index b9ff4680b..5241fc50d 100755
--- a/apps/red-ui/src/assets/icons/general/logout.svg
+++ b/apps/red-ui/src/assets/icons/general/logout.svg
@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg height="14px" version="1.1" viewBox="0 0 17 14" width="17px" xmlns="http://www.w3.org/2000/svg"
 >
-  <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
-  <defs></defs>
-  <g fill="none" fill-rule="evenodd" id="Artboard" stroke="none" stroke-width="1"
-     transform="translate(-488.000000, -4752.000000)">
-    <g fill="currentColor" id="User-Menu" transform="translate(456.000000, 4454.000000)">
-      <path
-        d="M48.7966936,304.522526 C49.0677688,304.796017 49.0677688,305.203983 48.7966936,305.477474 L46.4800677,307.794882 C46.2071762,308.068373 45.7989742,308.068373 45.5260828,307.794882 L45.0488633,307.317862 L46.6839417,305.681457 L38.6810935,305.681457 C38.3069461,305.681457 38,305.374347 38,305 C38,304.625653 38.3069461,304.318543 38.6810935,304.318543 L46.6839417,304.318543 L45.0488633,302.682138 L45.5260828,302.205118 C45.7989742,301.931627 46.2071762,301.931627 46.4800677,302.205118 L48.7966936,304.522526 Z M35.5184445,312 C33.6163541,312 32.0629803,310.462957 32,308.500218 L32,301.499782 C32.0629803,299.537043 33.6163541,298 35.5184445,298 L39.6083615,298 C41.4791731,298 42.9682985,299.571064 43,301.499782 C43,301.891457 42.7142638,302.186304 42.3342684,302.186304 C41.9546957,302.186304 41.6689594,301.891457 41.6689594,301.499782 C41.6689594,300.322138 40.7491931,299.373481 39.6083615,299.373481 L35.5184445,299.373481 C34.377613,299.373481 33.395289,300.289862 33.3310406,301.499782 L33.3310406,308.500218 C33.3935982,309.677862 34.3446434,310.626519 35.5184445,310.626519 L39.6083615,310.626519 C40.7491931,310.626519 41.6689594,309.677862 41.6689594,308.500218 C41.6689594,308.108543 41.9546957,307.813696 42.3342684,307.813696 C42.7142638,307.813696 43,308.108543 43,308.500218 C43,310.430681 41.4774823,312 39.6083615,312 L35.5184445,312 Z"
-        id="logout_icon"></path>
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <defs></defs>
+    <g fill="none" fill-rule="evenodd" id="Artboard" stroke="none" stroke-width="1"
+       transform="translate(-488.000000, -4752.000000)">
+        <g fill="currentColor" id="User-Menu" transform="translate(456.000000, 4454.000000)">
+            <path
+                d="M48.7966936,304.522526 C49.0677688,304.796017 49.0677688,305.203983 48.7966936,305.477474 L46.4800677,307.794882 C46.2071762,308.068373 45.7989742,308.068373 45.5260828,307.794882 L45.0488633,307.317862 L46.6839417,305.681457 L38.6810935,305.681457 C38.3069461,305.681457 38,305.374347 38,305 C38,304.625653 38.3069461,304.318543 38.6810935,304.318543 L46.6839417,304.318543 L45.0488633,302.682138 L45.5260828,302.205118 C45.7989742,301.931627 46.2071762,301.931627 46.4800677,302.205118 L48.7966936,304.522526 Z M35.5184445,312 C33.6163541,312 32.0629803,310.462957 32,308.500218 L32,301.499782 C32.0629803,299.537043 33.6163541,298 35.5184445,298 L39.6083615,298 C41.4791731,298 42.9682985,299.571064 43,301.499782 C43,301.891457 42.7142638,302.186304 42.3342684,302.186304 C41.9546957,302.186304 41.6689594,301.891457 41.6689594,301.499782 C41.6689594,300.322138 40.7491931,299.373481 39.6083615,299.373481 L35.5184445,299.373481 C34.377613,299.373481 33.395289,300.289862 33.3310406,301.499782 L33.3310406,308.500218 C33.3935982,309.677862 34.3446434,310.626519 35.5184445,310.626519 L39.6083615,310.626519 C40.7491931,310.626519 41.6689594,309.677862 41.6689594,308.500218 C41.6689594,308.108543 41.9546957,307.813696 42.3342684,307.813696 C42.7142638,307.813696 43,308.108543 43,308.500218 C43,310.430681 41.4774823,312 39.6083615,312 L35.5184445,312 Z"
+                id="logout_icon"></path>
+        </g>
     </g>
-  </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/menu.svg b/apps/red-ui/src/assets/icons/general/menu.svg
index fac3ef6bf..e90ba2e13 100644
--- a/apps/red-ui/src/assets/icons/general/menu.svg
+++ b/apps/red-ui/src/assets/icons/general/menu.svg
@@ -1,8 +1,8 @@
 <svg height="384pt" viewBox="0 -53 384 384" width="384pt" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="m368 154.667969h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/>
-  <path
-    d="m368 32h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/>
-  <path
-    d="m368 277.332031h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/>
+    <path
+        d="m368 154.667969h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0" />
+    <path
+        d="m368 32h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0" />
+    <path
+        d="m368 277.332031h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0" />
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/nav-first.svg b/apps/red-ui/src/assets/icons/general/nav-first.svg
index afa1b76f6..abf74e5a9 100644
--- a/apps/red-ui/src/assets/icons/general/nav-first.svg
+++ b/apps/red-ui/src/assets/icons/general/nav-first.svg
@@ -1,13 +1,19 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Annotations-Jump-to-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Annotations-Jump-to-" stroke="none" stroke-width="1">
         <g id="03.Jump-to-first-annotation" transform="translate(-1109.000000, -181.000000)">
-            <rect x="0" y="0" width="1440" height="750"></rect>
-            <rect id="Rectangle" x="1087" y="173" width="60" height="32"></rect>
-            <g id="right_white" transform="translate(1109.000000, 181.000000)" fill="currentColor" fill-rule="nonzero">
-                <polygon id="Path" transform="translate(8.000000, 7.680000) scale(1, -1) translate(-8.000000, -7.680000) " points="12 6.24 10.88 5.12 8 8 7.2 7.2 5.12 5.12 4 6.24 8 10.24"></polygon>
-                <polygon id="Path" transform="translate(8.000000, 11.840000) scale(1, -1) translate(-8.000000, -11.840000) " points="12 10.4 10.88 9.28 8 12.16 7.2 11.36 5.12 9.28 4 10.4 8 14.4"></polygon>
-                <polygon id="Path" transform="translate(8.000000, 2.720000) scale(1, -1) translate(-8.000000, -2.720000) " points="14.4 1.92 1.6 1.92 1.22124533e-14 1.92 1.22124533e-14 3.52 16 3.52 16 1.92"></polygon>
+            <rect height="750" width="1440" x="0" y="0"></rect>
+            <rect height="32" id="Rectangle" width="60" x="1087" y="173"></rect>
+            <g fill="currentColor" fill-rule="nonzero" id="right_white" transform="translate(1109.000000, 181.000000)">
+                <polygon id="Path"
+                         points="12 6.24 10.88 5.12 8 8 7.2 7.2 5.12 5.12 4 6.24 8 10.24"
+                         transform="translate(8.000000, 7.680000) scale(1, -1) translate(-8.000000, -7.680000) "></polygon>
+                <polygon id="Path"
+                         points="12 10.4 10.88 9.28 8 12.16 7.2 11.36 5.12 9.28 4 10.4 8 14.4"
+                         transform="translate(8.000000, 11.840000) scale(1, -1) translate(-8.000000, -11.840000) "></polygon>
+                <polygon id="Path"
+                         points="14.4 1.92 1.6 1.92 1.22124533e-14 1.92 1.22124533e-14 3.52 16 3.52 16 1.92"
+                         transform="translate(8.000000, 2.720000) scale(1, -1) translate(-8.000000, -2.720000) "></polygon>
             </g>
         </g>
     </g>
diff --git a/apps/red-ui/src/assets/icons/general/nav-last.svg b/apps/red-ui/src/assets/icons/general/nav-last.svg
index 7ee89b357..954ae5c4b 100644
--- a/apps/red-ui/src/assets/icons/general/nav-last.svg
+++ b/apps/red-ui/src/assets/icons/general/nav-last.svg
@@ -1,13 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Annotations-Jump-to-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Annotations-Jump-to-" stroke="none" stroke-width="1">
         <g id="03.Jump-to-first-annotation" transform="translate(-1109.000000, -726.000000)">
-            <rect x="0" y="0" width="1440" height="750"></rect>
-            <rect id="Rectangle" x="1087" y="718" width="60" height="32"></rect>
-            <g id="right_white" transform="translate(1117.000000, 734.000000) scale(1, -1) translate(-1117.000000, -734.000000) translate(1109.000000, 726.000000)" fill="currentColor" fill-rule="nonzero">
-                <polygon id="Path" transform="translate(8.000000, 7.680000) scale(1, -1) translate(-8.000000, -7.680000) " points="12 6.24 10.88 5.12 8 8 7.2 7.2 5.12 5.12 4 6.24 8 10.24"></polygon>
-                <polygon id="Path" transform="translate(8.000000, 11.840000) scale(1, -1) translate(-8.000000, -11.840000) " points="12 10.4 10.88 9.28 8 12.16 7.2 11.36 5.12 9.28 4 10.4 8 14.4"></polygon>
-                <polygon id="Path" transform="translate(8.000000, 2.720000) scale(1, -1) translate(-8.000000, -2.720000) " points="14.4 1.92 1.6 1.92 1.22124533e-14 1.92 1.22124533e-14 3.52 16 3.52 16 1.92"></polygon>
+            <rect height="750" width="1440" x="0" y="0"></rect>
+            <rect height="32" id="Rectangle" width="60" x="1087" y="718"></rect>
+            <g fill="currentColor"
+               fill-rule="nonzero"
+               id="right_white" transform="translate(1117.000000, 734.000000) scale(1, -1) translate(-1117.000000, -734.000000) translate(1109.000000, 726.000000)">
+                <polygon id="Path"
+                         points="12 6.24 10.88 5.12 8 8 7.2 7.2 5.12 5.12 4 6.24 8 10.24"
+                         transform="translate(8.000000, 7.680000) scale(1, -1) translate(-8.000000, -7.680000) "></polygon>
+                <polygon id="Path"
+                         points="12 10.4 10.88 9.28 8 12.16 7.2 11.36 5.12 9.28 4 10.4 8 14.4"
+                         transform="translate(8.000000, 11.840000) scale(1, -1) translate(-8.000000, -11.840000) "></polygon>
+                <polygon id="Path"
+                         points="14.4 1.92 1.6 1.92 1.22124533e-14 1.92 1.22124533e-14 3.52 16 3.52 16 1.92"
+                         transform="translate(8.000000, 2.720000) scale(1, -1) translate(-8.000000, -2.720000) "></polygon>
             </g>
         </g>
     </g>
diff --git a/apps/red-ui/src/assets/icons/general/nav-next.svg b/apps/red-ui/src/assets/icons/general/nav-next.svg
index b9f52e81b..258fe5ec3 100644
--- a/apps/red-ui/src/assets/icons/general/nav-next.svg
+++ b/apps/red-ui/src/assets/icons/general/nav-next.svg
@@ -1,16 +1,19 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Annotations-Jump-to-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Annotations-Jump-to-" stroke="none" stroke-width="1">
         <g id="01.Jump-to-first-last-annotation" transform="translate(-1222.000000, -486.000000)">
-            <rect x="0" y="0" width="1440" height="750"></rect>
-            <rect id="Rectangle" x="1148" y="206" width="282" height="544"></rect>
+            <rect height="750" width="1440" x="0" y="0"></rect>
+            <rect height="544" id="Rectangle" width="282" x="1148" y="206"></rect>
             <g id="Page-05" transform="translate(1147.000000, 173.000000)"></g>
             <g id="Group" transform="translate(1212.000000, 476.000000)">
-                <rect id="Rectangle" x="0" y="0" width="151" height="34" rx="17"></rect>
-                <g id="collapse" transform="translate(10.000000, 10.000000)" fill="currentColor" fill-rule="nonzero">
+                <rect height="34" id="Rectangle" rx="17" width="151" x="0" y="0"></rect>
+                <g fill="currentColor" fill-rule="nonzero" id="collapse" transform="translate(10.000000, 10.000000)">
                     <g id="Group" transform="translate(1.400000, 3.360000)">
-                        <polygon id="Path" points="9.1 0.98 8.12 0 5.6 2.52 4.9 1.82 3.08 0 2.1 0.98 5.6 4.48"></polygon>
-                        <polygon id="Path" transform="translate(5.600000, 6.580000) scale(1, -1) translate(-5.600000, -6.580000) " points="9.8 5.88 1.4 5.88 7.34412531e-15 5.88 7.34412531e-15 7.28 11.2 7.28 11.2 5.88"></polygon>
+                        <polygon id="Path"
+                                 points="9.1 0.98 8.12 0 5.6 2.52 4.9 1.82 3.08 0 2.1 0.98 5.6 4.48"></polygon>
+                        <polygon id="Path"
+                                 points="9.8 5.88 1.4 5.88 7.34412531e-15 5.88 7.34412531e-15 7.28 11.2 7.28 11.2 5.88"
+                                 transform="translate(5.600000, 6.580000) scale(1, -1) translate(-5.600000, -6.580000) "></polygon>
                     </g>
                 </g>
             </g>
diff --git a/apps/red-ui/src/assets/icons/general/nav-prev.svg b/apps/red-ui/src/assets/icons/general/nav-prev.svg
index 215a5305a..8e43d9d0c 100644
--- a/apps/red-ui/src/assets/icons/general/nav-prev.svg
+++ b/apps/red-ui/src/assets/icons/general/nav-prev.svg
@@ -1,16 +1,20 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Annotations-Jump-to-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Annotations-Jump-to-" stroke="none" stroke-width="1">
         <g id="01.Jump-to-first-last-annotation" transform="translate(-1222.000000, -444.000000)">
-            <rect x="0" y="0" width="1440" height="750"></rect>
-            <rect id="Rectangle" x="1148" y="206" width="282" height="544"></rect>
+            <rect height="750" width="1440" x="0" y="0"></rect>
+            <rect height="544" id="Rectangle" width="282" x="1148" y="206"></rect>
             <g id="Page-05" transform="translate(1147.000000, 173.000000)"></g>
             <g id="Group" transform="translate(1212.000000, 434.000000)">
-                <rect id="Rectangle" x="0" y="0" width="151" height="34" rx="17"></rect>
-                <g id="collapse" transform="translate(10.000000, 10.000000)" fill="currentColor" fill-rule="nonzero">
+                <rect height="34" id="Rectangle" rx="17" width="151" x="0" y="0"></rect>
+                <g fill="currentColor" fill-rule="nonzero" id="collapse" transform="translate(10.000000, 10.000000)">
                     <g id="Group" transform="translate(1.400000, 3.360000)">
-                        <polygon id="Path" transform="translate(5.600000, 5.040000) scale(1, -1) translate(-5.600000, -5.040000) " points="9.1 3.78 8.12 2.8 5.6 5.32 4.9 4.62 3.08 2.8 2.1 3.78 5.6 7.28"></polygon>
-                        <polygon id="Path" transform="translate(5.600000, 0.700000) scale(1, -1) translate(-5.600000, -0.700000) " points="9.8 0 1.4 0 7.34412531e-15 0 7.34412531e-15 1.4 11.2 1.4 11.2 0"></polygon>
+                        <polygon id="Path"
+                                 points="9.1 3.78 8.12 2.8 5.6 5.32 4.9 4.62 3.08 2.8 2.1 3.78 5.6 7.28"
+                                 transform="translate(5.600000, 5.040000) scale(1, -1) translate(-5.600000, -5.040000) "></polygon>
+                        <polygon id="Path"
+                                 points="9.8 0 1.4 0 7.34412531e-15 0 7.34412531e-15 1.4 11.2 1.4 11.2 0"
+                                 transform="translate(5.600000, 0.700000) scale(1, -1) translate(-5.600000, -0.700000) "></polygon>
                     </g>
                 </g>
             </g>
diff --git a/apps/red-ui/src/assets/icons/general/needs-work.svg b/apps/red-ui/src/assets/icons/general/needs-work.svg
index 0f5c35ba0..be18c60d9 100644
--- a/apps/red-ui/src/assets/icons/general/needs-work.svg
+++ b/apps/red-ui/src/assets/icons/general/needs-work.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Needs-work" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M100,90 L100,100 L39,100 L39,90 L100,90 Z M70,0 L70,45 L60,45 L60,10 L10,10 L10,80 L30,80 L30,90 L0,90 L0,0 L70,0 Z M86,72 L86,82 L39,82 L39,72 L86,72 Z M62,54 L62,64 L39,64 L39,54 L62,54 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Needs-work" stroke="none" stroke-width="1">
+        <path
+            d="M100,90 L100,100 L39,100 L39,90 L100,90 Z M70,0 L70,45 L60,45 L60,10 L10,10 L10,80 L30,80 L30,90 L0,90 L0,0 L70,0 Z M86,72 L86,82 L39,82 L39,72 L86,72 Z M62,54 L62,64 L39,64 L39,54 L62,54 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/new-tab.svg b/apps/red-ui/src/assets/icons/general/new-tab.svg
index 4e7f8432e..ae54ce1d2 100644
--- a/apps/red-ui/src/assets/icons/general/new-tab.svg
+++ b/apps/red-ui/src/assets/icons/general/new-tab.svg
@@ -1,15 +1,15 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-     viewBox="0 0 502 502" style="enable-background:new 0 0 502 502;" xml:space="preserve">
+<svg id="Layer_1" style="enable-background:new 0 0 502 502;" viewBox="0 0 502 502" x="0px"
+     xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
 <g fill="currentColor">
 		<path d="M492,0H73.939c-5.523,0-10,4.478-10,10v53.974C28.558,64.72,0,93.713,0,129.271v307.397C0,472.692,29.308,502,65.332,502
 			h307.398c35.557,0,64.549-28.557,65.296-63.938H492c5.523,0,10-4.478,10-10V10C502,4.478,497.523,0,492,0z M418.061,436.668
 			c0,24.996-20.335,45.332-45.332,45.332H65.332C40.335,482,20,461.664,20,436.668V129.271c0-24.996,20.335-45.332,45.332-45.332
 			h307.398c24.996,0,45.332,20.336,45.332,45.332V436.668z M482,418.062h-43.939V129.271c0-36.024-29.308-65.332-65.332-65.332
-			H83.939V20H482V418.062z"/>
+			H83.939V20H482V418.062z" />
     <path d="M60.413,122.959c-5.523,0-10,4.478-10,10v221.327c0,5.522,4.477,10,10,10s10-4.478,10-10V132.959
-			C70.413,127.437,65.936,122.959,60.413,122.959z"/>
+			C70.413,127.437,65.936,122.959,60.413,122.959z" />
     <path d="M60.413,387.321c-5.523,0-10,4.478-10,10v35.658c0,5.522,4.477,10,10,10s10-4.478,10-10v-35.658
-			C70.413,391.799,65.936,387.321,60.413,387.321z"/>
+			C70.413,391.799,65.936,387.321,60.413,387.321z" />
 </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/notification.svg b/apps/red-ui/src/assets/icons/general/notification.svg
index 09498e5f4..1c225a25e 100644
--- a/apps/red-ui/src/assets/icons/general/notification.svg
+++ b/apps/red-ui/src/assets/icons/general/notification.svg
@@ -1,13 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Notifications" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Notifications" stroke="none" stroke-width="1">
         <g id="01.-Notifications-Dropdown" transform="translate(-1258.000000, -23.000000)">
-            <rect x="0" y="0" width="1440" height="980"></rect>
+            <rect height="980" width="1440" x="0" y="0"></rect>
             <g id="Header-Project-Details">
-                <rect id="Rectangle" x="0" y="0" width="1440" height="60"></rect>
+                <rect height="60" id="Rectangle" width="1440" x="0" y="0"></rect>
                 <g id="Group-6" transform="translate(1248.000000, 13.000000)">
-                    <g id="status" transform="translate(10.000000, 10.000000)" fill="currentColor" fill-rule="nonzero">
-                        <path d="M12.6,10.5 L12.32,10.5 C11.55,8.89 11.2,7.07 11.2,5.25 L11.2,4.2 C11.2,1.89 9.31,0 7,0 C4.69,0 2.8,1.89 2.8,4.2 L2.8,5.25 C2.8,7.07 2.38,8.82 1.68,10.5 L1.4,10.5 C0.98,10.5 0.7,10.78 0.7,11.2 C0.7,11.62 0.98,11.9 1.4,11.9 L4.9,11.9 L4.9,11.9 C4.9,13.09 5.81,14 7,14 C8.19,14 9.1,13.09 9.1,11.9 L9.1,11.9 L12.6,11.9 C13.02,11.9 13.3,11.62 13.3,11.2 C13.3,10.78 13.02,10.5 12.6,10.5 Z M7.7,11.9 C7.7,12.32 7.42,12.6 7,12.6 C6.58,12.6 6.3,12.32 6.3,11.9 L6.3,11.9 L7.7,11.9 C7.7,11.9 7.7,11.9 7.7,11.9 Z M3.15,10.5 C3.85,8.82 4.2,7.07 4.2,5.25 L4.2,4.2 C4.2,2.66 5.46,1.4 7,1.4 C8.54,1.4 9.8,2.66 9.8,4.2 L9.8,5.25 C9.8,7.07 10.15,8.82 10.85,10.5 L3.15,10.5 Z" id="Shape"></path>
+                    <g fill="currentColor" fill-rule="nonzero" id="status" transform="translate(10.000000, 10.000000)">
+                        <path
+                            d="M12.6,10.5 L12.32,10.5 C11.55,8.89 11.2,7.07 11.2,5.25 L11.2,4.2 C11.2,1.89 9.31,0 7,0 C4.69,0 2.8,1.89 2.8,4.2 L2.8,5.25 C2.8,7.07 2.38,8.82 1.68,10.5 L1.4,10.5 C0.98,10.5 0.7,10.78 0.7,11.2 C0.7,11.62 0.98,11.9 1.4,11.9 L4.9,11.9 L4.9,11.9 C4.9,13.09 5.81,14 7,14 C8.19,14 9.1,13.09 9.1,11.9 L9.1,11.9 L12.6,11.9 C13.02,11.9 13.3,11.62 13.3,11.2 C13.3,10.78 13.02,10.5 12.6,10.5 Z M7.7,11.9 C7.7,12.32 7.42,12.6 7,12.6 C6.58,12.6 6.3,12.32 6.3,11.9 L6.3,11.9 L7.7,11.9 C7.7,11.9 7.7,11.9 7.7,11.9 Z M3.15,10.5 C3.85,8.82 4.2,7.07 4.2,5.25 L4.2,4.2 C4.2,2.66 5.46,1.4 7,1.4 C8.54,1.4 9.8,2.66 9.8,4.2 L9.8,5.25 C9.8,7.07 10.15,8.82 10.85,10.5 L3.15,10.5 Z"
+                            id="Shape"></path>
                     </g>
                 </g>
             </g>
diff --git a/apps/red-ui/src/assets/icons/general/ocr.svg b/apps/red-ui/src/assets/icons/general/ocr.svg
index 66c3956bf..dc05b234d 100644
--- a/apps/red-ui/src/assets/icons/general/ocr.svg
+++ b/apps/red-ui/src/assets/icons/general/ocr.svg
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="OCR" fill="#283241" fill-rule="nonzero">
-            <path d="M10,70 L10,90 L30,90 L30,100 L0,100 L0,70 L10,70 Z M100,70 L100,100 L70,100 L70,90 L90,90 L90,70 L100,70 Z M54,63 L54,73 L24,73 L24,63 L54,63 Z M76,45 L76,55 L24,55 L24,45 L76,45 Z M76,27 L76,37 L24,37 L24,27 L76,27 Z M30,0 L30,10 L10,10 L10,30 L0,30 L0,0 L30,0 Z M100,0 L100,30 L90,30 L90,10 L70,10 L70,0 L100,0 Z"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Symbols" stroke="none" stroke-width="1">
+        <g fill="#283241" fill-rule="nonzero" id="OCR">
+            <path
+                d="M10,70 L10,90 L30,90 L30,100 L0,100 L0,70 L10,70 Z M100,70 L100,100 L70,100 L70,90 L90,90 L90,70 L100,70 Z M54,63 L54,73 L24,73 L24,63 L54,63 Z M76,45 L76,55 L24,55 L24,45 L76,45 Z M76,27 L76,37 L24,37 L24,27 L76,27 Z M30,0 L30,10 L10,10 L10,30 L0,30 L0,0 L30,0 Z M100,0 L100,30 L90,30 L90,10 L70,10 L70,0 L100,0 Z"></path>
         </g>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/page.svg b/apps/red-ui/src/assets/icons/general/page.svg
index c7f34a0fa..f6610d122 100644
--- a/apps/red-ui/src/assets/icons/general/page.svg
+++ b/apps/red-ui/src/assets/icons/general/page.svg
@@ -1,8 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="36px" height="40px" viewBox="0 0 36 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard" transform="translate(-1099.000000, -440.000000)" fill="currentColor" fill-rule="nonzero">
-            <path d="M1135,440 L1135,472 L1127,480 L1099,480 L1099,440 L1135,440 Z M1133.66667,441.333333 L1100.33333,441.333333 L1100.33333,478.666667 L1125.66667,478.666667 L1125.66667,470.666667 L1133.66667,470.666667 L1133.66667,441.333333 Z M1133.111,472 L1127,472 L1127,478.111 L1133.111,472 Z" id="Page"></path>
+<svg height="40px" version="1.1" viewBox="0 0 36 40" width="36px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
+        <g fill="currentColor" fill-rule="nonzero" id="Artboard" transform="translate(-1099.000000, -440.000000)">
+            <path
+                d="M1135,440 L1135,472 L1127,480 L1099,480 L1099,440 L1135,440 Z M1133.66667,441.333333 L1100.33333,441.333333 L1100.33333,478.666667 L1125.66667,478.666667 L1125.66667,470.666667 L1133.66667,470.666667 L1133.66667,441.333333 Z M1133.111,472 L1127,472 L1127,478.111 L1133.111,472 Z"
+                id="Page"></path>
         </g>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/pages.svg b/apps/red-ui/src/assets/icons/general/pages.svg
index 7070c7d55..b11d6abfa 100644
--- a/apps/red-ui/src/assets/icons/general/pages.svg
+++ b/apps/red-ui/src/assets/icons/general/pages.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="pages" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
-        <path d="M100,0 L100,80 L80,80 L80,100 L0,100 L0,20 L20,20 L20,0 L100,0 Z M20,30 L10,30 L10,90 L70,90 L70,80 L20,80 L20,30 Z M90,10 L30,10 L30,70 L90,70 L90,10 Z M80,40 L80,50 L40,50 L40,40 L80,40 Z M80,20 L80,30 L40,30 L40,20 L80,20 Z"  fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentColor" fill-rule="evenodd" id="pages" stroke="none" stroke-width="1">
+        <path
+            d="M100,0 L100,80 L80,80 L80,100 L0,100 L0,20 L20,20 L20,0 L100,0 Z M20,30 L10,30 L10,90 L70,90 L70,80 L20,80 L20,30 Z M90,10 L30,10 L30,70 L90,70 L90,10 Z M80,40 L80,50 L40,50 L40,40 L80,40 Z M80,20 L80,30 L40,30 L40,20 L80,20 Z"
+            fill-rule="nonzero"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/pdftron-action-add-dict.svg b/apps/red-ui/src/assets/icons/general/pdftron-action-add-dict.svg
index d3ca5af42..670f30d1e 100644
--- a/apps/red-ui/src/assets/icons/general/pdftron-action-add-dict.svg
+++ b/apps/red-ui/src/assets/icons/general/pdftron-action-add-dict.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="dictionary" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M95,0 L95,100 L20,100 C11.5,100 5,93.5 5,85 L5,85 L5,15 C5,6.5 11.5,0 20,0 L20,0 L95,0 Z M25,10 L20,10 C17,10 15,12 15,15 L15,15 L15,85 C15,88 17,90 20,90 L20,90 L25,90 L25,10 Z M85,10 L35,10 L35,90 L85,90 L85,10 Z M75,20 L75,50 L45,50 L45,20 L75,20 Z M65,30 L55,30 L55,40 L65,40 L65,30 Z" id="Combined-Shape" fill="#283241" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="dictionary" stroke="none" stroke-width="1">
+        <path
+            d="M95,0 L95,100 L20,100 C11.5,100 5,93.5 5,85 L5,85 L5,15 C5,6.5 11.5,0 20,0 L20,0 L95,0 Z M25,10 L20,10 C17,10 15,12 15,15 L15,15 L15,85 C15,88 17,90 20,90 L20,90 L25,90 L25,10 Z M85,10 L35,10 L35,90 L85,90 L85,10 Z M75,20 L75,50 L45,50 L45,20 L75,20 Z M65,30 L55,30 L55,40 L65,40 L65,30 Z"
+            fill="#283241" fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/pdftron-action-add-redaction.svg b/apps/red-ui/src/assets/icons/general/pdftron-action-add-redaction.svg
index b7e836dba..f49491ffc 100644
--- a/apps/red-ui/src/assets/icons/general/pdftron-action-add-redaction.svg
+++ b/apps/red-ui/src/assets/icons/general/pdftron-action-add-redaction.svg
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Redacted" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Rectangle" fill="#283241" x="0" y="0" width="16" height="16"></rect>
-        <text id="H" font-family="Inter-SemiBold, Inter" font-size="11" font-weight="500" fill="#FFFFFF">
+<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Redacted" stroke="none" stroke-width="1">
+        <rect fill="#283241" height="16" id="Rectangle" width="16" x="0" y="0"></rect>
+        <text fill="#FFFFFF" font-family="Inter-SemiBold, Inter" font-size="11" font-weight="500" id="H">
             <tspan x="4.421875" y="12">R</tspan>
         </text>
     </g>
diff --git a/apps/red-ui/src/assets/icons/general/pdftron-action-false-positive.svg b/apps/red-ui/src/assets/icons/general/pdftron-action-false-positive.svg
index 1de523d7d..87bbb30b7 100644
--- a/apps/red-ui/src/assets/icons/general/pdftron-action-false-positive.svg
+++ b/apps/red-ui/src/assets/icons/general/pdftron-action-false-positive.svg
@@ -1,7 +1,7 @@
-<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-     width="475.092px" height="475.092px" viewBox="0 0 475.092 475.092"
-     style="enable-background:new 0 0 475.092 475.092;"
-     xml:space="preserve">
+<svg height="475.092px" id="Capa_1" style="enable-background:new 0 0 475.092 475.092;" viewBox="0 0 475.092 475.092"
+     width="475.092px" x="0px" xml:space="preserve"
+     xmlns="http://www.w3.org/2000/svg"
+     y="0px">
 <g fill="#283241">
 	<path d="M442.822,209.562c1.715-6.283,2.57-12.847,2.57-19.702c0-14.655-3.621-28.361-10.852-41.112
 		c0.567-3.995,0.855-8.088,0.855-12.275c0-19.223-5.716-36.162-17.132-50.819v-1.427c0.191-26.075-7.946-46.632-24.414-61.669
@@ -27,6 +27,6 @@
 		c9.328,7.804,13.989,19.795,13.989,35.975c0,4.949-0.479,10.279-1.423,15.987c5.708,3.046,10.231,8.042,13.559,14.987
 		c3.333,6.945,4.996,13.944,4.996,20.985c0,7.039-1.711,13.61-5.141,19.701c10.089,9.517,15.126,20.839,15.126,33.974
 		c0,4.759-0.948,10.039-2.847,15.846c-1.899,5.808-4.285,10.327-7.139,13.562c6.091,0.192,11.184,4.665,15.276,13.422
-		c4.093,8.754,6.14,16.468,6.14,23.127C420.277,265.525,416.561,274.043,409.135,281.377z"/>
+		c4.093,8.754,6.14,16.468,6.14,23.127C420.277,265.525,416.561,274.043,409.135,281.377z" />
 </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/pdftron-action-search.svg b/apps/red-ui/src/assets/icons/general/pdftron-action-search.svg
index 7acd26a7f..cc1d40227 100644
--- a/apps/red-ui/src/assets/icons/general/pdftron-action-search.svg
+++ b/apps/red-ui/src/assets/icons/general/pdftron-action-search.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="search" stroke="none" stroke-width="1" fill="#283241" fill-rule="evenodd">
-        <path d="M95.5,74.5 L76.5,55.5 C78.5,50.5 79.5,45.5 79.5,40 C79.5,18 61.5,0 39.5,0 C18,0 0,18 0,40 C0,62 18,80 40,80 C45.5,80 51,79 55.5,77 L74.5,96 C77.5,99 81.5,100.5 85,100.5 C89,100.5 92.5,99 95.5,96 C101.5,90 101.5,80 95.5,74.5 Z M10,40 C10,23.5 23.5,10 40,10 C56.5,10 70,23.5 70,40 C70,56.5 56.5,70 40,70 C23.5,70 10,56.5 10,40 Z M88.5,88.5 C86.5,90.5 83.5,90.5 81.5,88.5 L64.5,71.5 C67,69.5 69.5,67 71.5,64.5 L88.5,81.5 C90.5,83.5 90.5,86.5 88.5,88.5 Z" id="Shape"  fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#283241" fill-rule="evenodd" id="search" stroke="none" stroke-width="1">
+        <path
+            d="M95.5,74.5 L76.5,55.5 C78.5,50.5 79.5,45.5 79.5,40 C79.5,18 61.5,0 39.5,0 C18,0 0,18 0,40 C0,62 18,80 40,80 C45.5,80 51,79 55.5,77 L74.5,96 C77.5,99 81.5,100.5 85,100.5 C89,100.5 92.5,99 95.5,96 C101.5,90 101.5,80 95.5,74.5 Z M10,40 C10,23.5 23.5,10 40,10 C56.5,10 70,23.5 70,40 C70,56.5 56.5,70 40,70 C23.5,70 10,56.5 10,40 Z M88.5,88.5 C86.5,90.5 83.5,90.5 81.5,88.5 L64.5,71.5 C67,69.5 69.5,67 71.5,64.5 L88.5,81.5 C90.5,83.5 90.5,86.5 88.5,88.5 Z"
+            fill-rule="nonzero" id="Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/plus.svg b/apps/red-ui/src/assets/icons/general/plus.svg
index a965c8f72..6d4c3c898 100644
--- a/apps/red-ui/src/assets/icons/general/plus.svg
+++ b/apps/red-ui/src/assets/icons/general/plus.svg
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="plus_white" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
-        <polygon id="Path"  fill-rule="nonzero" points="78 45 55 45 55 22 45 22 45 45 22 45 22 55 45 55 45 78 55 78 55 55 78 55"></polygon>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentColor" fill-rule="evenodd" id="plus_white" stroke="none" stroke-width="1">
+        <polygon fill-rule="nonzero" id="Path"
+                 points="78 45 55 45 55 22 45 22 45 45 22 45 22 55 45 55 45 78 55 78 55 55 78 55"></polygon>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/preview.svg b/apps/red-ui/src/assets/icons/general/preview.svg
index b03bff13d..532cf42f6 100644
--- a/apps/red-ui/src/assets/icons/general/preview.svg
+++ b/apps/red-ui/src/assets/icons/general/preview.svg
@@ -1,18 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg height="18px" version="1.1" viewBox="0 0 20 18" width="20px" xmlns="http://www.w3.org/2000/svg"
 >
-  <defs></defs>
-  <g fill="none" fill-rule="evenodd" id="Onboarding-New-User" stroke="none" stroke-width="1">
-    <g fill="currentColor" id="06-Restart-Tutorial-Button" transform="translate(-1178.000000, -665.000000)">
-      <g id="Group" transform="translate(1085.000000, 596.000000)">
-        <g id="Group-3" transform="translate(83.000000, 50.000000)">
-          <g id="Hilfe-Floating-btn" transform="translate(0.000000, 8.000000)">
-            <path
-              d="M29.6722897,11.840741 C23.9318544,10.0093428 21.0346091,11.6185908 20.0309663,12.4508372 C19.027435,11.6185852 16.1300783,10.0093428 10.3896402,11.840741 C10.166515,11.9241826 10,12.1181584 10,12.3673901 L10,27.6253428 C10,27.964541 10.3384856,28.2798813 10.7248937,28.1519919 C17.1334954,26.0995476 19.4464461,28.651565 19.5857636,28.8173496 C19.8121544,29.0427512 20.0929626,29.0882642 20.3933588,28.7891751 C20.4488685,28.733908 22.7617551,26.0702634 29.254226,28.1238174 C29.6362622,28.2506054 29.9791224,27.9395956 29.9791224,27.5971683 L29.9780329,12.3675121 C30.0618407,12.1182693 29.8942251,11.9232006 29.6721755,11.8408631 L29.6722897,11.840741 Z M11.1146509,26.8764825 L11.1146509,12.7834051 C14.0099457,11.9229675 17.6213321,11.5816333 19.7523315,13.6991042 L19.7523315,27.5147643 C18.582288,26.6825123 15.9353126,25.5446574 11.1146509,26.8764825 Z M28.9472818,26.8764825 C24.1266201,25.5175815 21.479589,26.6825068 20.3096012,27.4865787 L20.3096012,13.6709186 C20.5882361,13.5322099 22.551748,10.8512489 28.9472818,12.7552195 L28.9472818,26.8764825 Z"
-              id="booklet"></path>
-          </g>
+    <defs></defs>
+    <g fill="none" fill-rule="evenodd" id="Onboarding-New-User" stroke="none" stroke-width="1">
+        <g fill="currentColor" id="06-Restart-Tutorial-Button" transform="translate(-1178.000000, -665.000000)">
+            <g id="Group" transform="translate(1085.000000, 596.000000)">
+                <g id="Group-3" transform="translate(83.000000, 50.000000)">
+                    <g id="Hilfe-Floating-btn" transform="translate(0.000000, 8.000000)">
+                        <path
+                            d="M29.6722897,11.840741 C23.9318544,10.0093428 21.0346091,11.6185908 20.0309663,12.4508372 C19.027435,11.6185852 16.1300783,10.0093428 10.3896402,11.840741 C10.166515,11.9241826 10,12.1181584 10,12.3673901 L10,27.6253428 C10,27.964541 10.3384856,28.2798813 10.7248937,28.1519919 C17.1334954,26.0995476 19.4464461,28.651565 19.5857636,28.8173496 C19.8121544,29.0427512 20.0929626,29.0882642 20.3933588,28.7891751 C20.4488685,28.733908 22.7617551,26.0702634 29.254226,28.1238174 C29.6362622,28.2506054 29.9791224,27.9395956 29.9791224,27.5971683 L29.9780329,12.3675121 C30.0618407,12.1182693 29.8942251,11.9232006 29.6721755,11.8408631 L29.6722897,11.840741 Z M11.1146509,26.8764825 L11.1146509,12.7834051 C14.0099457,11.9229675 17.6213321,11.5816333 19.7523315,13.6991042 L19.7523315,27.5147643 C18.582288,26.6825123 15.9353126,25.5446574 11.1146509,26.8764825 Z M28.9472818,26.8764825 C24.1266201,25.5175815 21.479589,26.6825068 20.3096012,27.4865787 L20.3096012,13.6709186 C20.5882361,13.5322099 22.551748,10.8512489 28.9472818,12.7552195 L28.9472818,26.8764825 Z"
+                            id="booklet"></path>
+                    </g>
+                </g>
+            </g>
         </g>
-      </g>
     </g>
-  </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/radio-indeterminate.svg b/apps/red-ui/src/assets/icons/general/radio-indeterminate.svg
index 2ca9f4776..7a75a84f7 100644
--- a/apps/red-ui/src/assets/icons/general/radio-indeterminate.svg
+++ b/apps/red-ui/src/assets/icons/general/radio-indeterminate.svg
@@ -1,11 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Bulk-Actions" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Bulk-Actions" stroke="none" stroke-width="1">
         <g id="01.-Bulk-Actions" transform="translate(-10.000000, -127.000000)">
-            <rect fill="none" x="0" y="0" width="1440" height="980"></rect>
-            <polygon id="Rectangle" fill="none" points="0 112 1086 112 1086 162 0 162"></polygon>
-            <g id="intermediary_selection" transform="translate(10.000000, 127.000000)" fill="currentColor">
-                <path d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M14,8.9 L6,8.9 C5.44771525,8.9 5,9.34771525 5,9.9 L5,9.9 L5,10.1 C5,10.6522847 5.44771525,11.1 6,11.1 L6,11.1 L14,11.1 C14.5522847,11.1 15,10.6522847 15,10.1 L15,10.1 L15,9.9 C15,9.34771525 14.5522847,8.9 14,8.9 L14,8.9 Z"></path>
+            <rect fill="none" height="980" width="1440" x="0" y="0"></rect>
+            <polygon fill="none" id="Rectangle" points="0 112 1086 112 1086 162 0 162"></polygon>
+            <g fill="currentColor" id="intermediary_selection" transform="translate(10.000000, 127.000000)">
+                <path
+                    d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M14,8.9 L6,8.9 C5.44771525,8.9 5,9.34771525 5,9.9 L5,9.9 L5,10.1 C5,10.6522847 5.44771525,11.1 6,11.1 L6,11.1 L14,11.1 C14.5522847,11.1 15,10.6522847 15,10.1 L15,10.1 L15,9.9 C15,9.34771525 14.5522847,8.9 14,8.9 L14,8.9 Z"></path>
             </g>
         </g>
     </g>
diff --git a/apps/red-ui/src/assets/icons/general/radio-selected.svg b/apps/red-ui/src/assets/icons/general/radio-selected.svg
index 8405c7953..bba849899 100644
--- a/apps/red-ui/src/assets/icons/general/radio-selected.svg
+++ b/apps/red-ui/src/assets/icons/general/radio-selected.svg
@@ -1,13 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Bulk-Actions" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Bulk-Actions" stroke="none" stroke-width="1">
         <g id="01.-Bulk-Actions" transform="translate(-10.000000, -209.000000)">
-            <rect fill="none" x="0" y="0" width="1440" height="980"></rect>
-            <g id="Entry" transform="translate(0.000000, 194.000000)" fill="none">
+            <rect fill="none" height="980" width="1440" x="0" y="0"></rect>
+            <g fill="none" id="Entry" transform="translate(0.000000, 194.000000)">
                 <polygon id="Rectangle" points="0 0 1086 0 1086 50 0 50"></polygon>
             </g>
-            <g id="Radio_selected" transform="translate(10.000000, 209.000000)" fill="currentColor">
-                <path d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M13.6545842,6.07220062 L8.50054373,11.3199291 L6.58289039,9.38262084 C6.34328715,9.14059736 5.95224003,9.14059736 5.71263679,9.38262084 L5.06605523,10.0357335 C4.82983344,10.2743414 4.82983344,10.6586767 5.06605523,10.8972846 L8.06804104,13.9295935 C8.30826653,14.1722455 8.70055256,14.1715218 8.93988111,13.9279851 L15.1747747,7.58346184 C15.4094976,7.34461174 15.4087908,6.96150162 15.1731882,6.72351919 L14.5266067,6.07040651 C14.2863095,5.82768204 13.8938806,5.82848943 13.6545842,6.07220062 Z" id="radio_selected"></path>
+            <g fill="currentColor" id="Radio_selected" transform="translate(10.000000, 209.000000)">
+                <path
+                    d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M13.6545842,6.07220062 L8.50054373,11.3199291 L6.58289039,9.38262084 C6.34328715,9.14059736 5.95224003,9.14059736 5.71263679,9.38262084 L5.06605523,10.0357335 C4.82983344,10.2743414 4.82983344,10.6586767 5.06605523,10.8972846 L8.06804104,13.9295935 C8.30826653,14.1722455 8.70055256,14.1715218 8.93988111,13.9279851 L15.1747747,7.58346184 C15.4094976,7.34461174 15.4087908,6.96150162 15.1731882,6.72351919 L14.5266067,6.07040651 C14.2863095,5.82768204 13.8938806,5.82848943 13.6545842,6.07220062 Z"
+                    id="radio_selected"></path>
             </g>
         </g>
     </g>
diff --git a/apps/red-ui/src/assets/icons/general/read-only.svg b/apps/red-ui/src/assets/icons/general/read-only.svg
index cd887b9fb..3f70a5e2b 100644
--- a/apps/red-ui/src/assets/icons/general/read-only.svg
+++ b/apps/red-ui/src/assets/icons/general/read-only.svg
@@ -1,14 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="File-attributes" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="File-attributes" stroke="none" stroke-width="1">
         <g id="Admin---File-attributes-list" transform="translate(-1154.000000, -212.000000)">
-            <rect x="0" y="0" width="1440" height="900"></rect>
+            <rect height="900" width="1440" x="0" y="0"></rect>
             <polygon id="Rectangle" points="0 194 1430 194 1430 244 0 244"></polygon>
-            <g id="Permission" transform="translate(1124.000000, 171.000000)" fill="currentColor" fill-rule="nonzero">
+            <g fill="currentColor" fill-rule="nonzero" id="Permission" transform="translate(1124.000000, 171.000000)">
                 <g id="icon-read-only" transform="translate(20.000000, 31.000000)">
                     <g id="read-only" transform="translate(10.000000, 10.000000)">
                         <g id="noun_Lock_791668-(1)" transform="translate(1.400000, 0.000000)">
-                            <path d="M9.8,5.6 L9.1,5.6 L9.1,3.5 C9.1,1.54 7.56,0 5.6,0 C3.64,0 2.1,1.54 2.1,3.5 L2.1,5.6 L1.4,5.6 C0.63,5.6 0,6.23 0,7 L0,12.6 C0,13.37 0.63,14 1.4,14 L9.8,14 C10.57,14 11.2,13.37 11.2,12.6 L11.2,7 C11.2,6.23 10.57,5.6 9.8,5.6 Z M3.5,3.5 C3.5,2.31 4.41,1.4 5.6,1.4 C6.79,1.4 7.7,2.31 7.7,3.5 L7.7,5.6 L3.5,5.6 L3.5,3.5 Z M1.4,12.6 L1.4,7 L9.8,7 L9.8,12.6 L1.4,12.6 Z" id="Shape"></path>
+                            <path
+                                d="M9.8,5.6 L9.1,5.6 L9.1,3.5 C9.1,1.54 7.56,0 5.6,0 C3.64,0 2.1,1.54 2.1,3.5 L2.1,5.6 L1.4,5.6 C0.63,5.6 0,6.23 0,7 L0,12.6 C0,13.37 0.63,14 1.4,14 L9.8,14 C10.57,14 11.2,13.37 11.2,12.6 L11.2,7 C11.2,6.23 10.57,5.6 9.8,5.6 Z M3.5,3.5 C3.5,2.31 4.41,1.4 5.6,1.4 C6.79,1.4 7.7,2.31 7.7,3.5 L7.7,5.6 L3.5,5.6 L3.5,3.5 Z M1.4,12.6 L1.4,7 L9.8,7 L9.8,12.6 L1.4,12.6 Z"
+                                id="Shape"></path>
                         </g>
                     </g>
                 </g>
diff --git a/apps/red-ui/src/assets/icons/general/ready-for-approval.svg b/apps/red-ui/src/assets/icons/general/ready-for-approval.svg
index 324d9a54b..6e59d0567 100644
--- a/apps/red-ui/src/assets/icons/general/ready-for-approval.svg
+++ b/apps/red-ui/src/assets/icons/general/ready-for-approval.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="ready_for_approval" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M50,0 C77.5,5.05166805e-15 100,22.5 100,50 C100,77.5 77.5,100 50,100 C22.5,100 -1.42108547e-14,77.5 -1.42108547e-14,50 C0,22.5 22.5,-5.05166805e-15 50,0 Z M50,10 C28,10 10,28 10,50 C10,72 28,90 50,90 C72,90 90,72 90,50 C90,28 72,10 50,10 Z M64,34 L71,41 L46,66 L31,51 L38,44 L46,52 L64,34 Z" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="ready_for_approval" stroke="none" stroke-width="1">
+        <path
+            d="M50,0 C77.5,5.05166805e-15 100,22.5 100,50 C100,77.5 77.5,100 50,100 C22.5,100 -1.42108547e-14,77.5 -1.42108547e-14,50 C0,22.5 22.5,-5.05166805e-15 50,0 Z M50,10 C28,10 10,28 10,50 C10,72 28,90 50,90 C72,90 90,72 90,50 C90,28 72,10 50,10 Z M64,34 L71,41 L46,66 L31,51 L38,44 L46,52 L64,34 Z"
+            fill="currentColor" fill-rule="nonzero"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/rectangle.svg b/apps/red-ui/src/assets/icons/general/rectangle.svg
index a1302324e..222dc696f 100644
--- a/apps/red-ui/src/assets/icons/general/rectangle.svg
+++ b/apps/red-ui/src/assets/icons/general/rectangle.svg
@@ -1,5 +1,5 @@
-<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
         <g fill="#868E96">
             <g>
                 <path
diff --git a/apps/red-ui/src/assets/icons/general/refresh.svg b/apps/red-ui/src/assets/icons/general/refresh.svg
index 936701c81..bf911c235 100644
--- a/apps/red-ui/src/assets/icons/general/refresh.svg
+++ b/apps/red-ui/src/assets/icons/general/refresh.svg
@@ -1,8 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="reanalyse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="refresh" fill="currentColor" fill-rule="nonzero">
-            <path d="M12.5,63.5 C18,79.5 33,90 50,90 C62,90 73.5,84.5 81,75 L81,75 L65,75 L65,65 L95,65 L95,95 L85,95 L85,85.5 C76,94.5 63.5,100 50,100 C29,100 10,86.5 3,67 L3,67 Z M50,0 C71,0 90,13.5 97,33 L97,33 L87.5,36.5 C82,20.5 67,10 50,10 C38,10 26.5,15.5 19,25 L19,25 L35,25 L35,35 L5,35 L5,5 L15,5 L15,14.5 C24.5,5.5 37,0 50,0 Z" id="Combined-Shape"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="reanalyse" stroke="none" stroke-width="1">
+        <g fill="currentColor" fill-rule="nonzero" id="refresh">
+            <path
+                d="M12.5,63.5 C18,79.5 33,90 50,90 C62,90 73.5,84.5 81,75 L81,75 L65,75 L65,65 L95,65 L95,95 L85,95 L85,85.5 C76,94.5 63.5,100 50,100 C29,100 10,86.5 3,67 L3,67 Z M50,0 C71,0 90,13.5 97,33 L97,33 L87.5,36.5 C82,20.5 67,10 50,10 C38,10 26.5,15.5 19,25 L19,25 L35,25 L35,35 L5,35 L5,5 L15,5 L15,14.5 C24.5,5.5 37,0 50,0 Z"
+                id="Combined-Shape"></path>
         </g>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/report.svg b/apps/red-ui/src/assets/icons/general/report.svg
index c36cf9fea..0a3994d7a 100644
--- a/apps/red-ui/src/assets/icons/general/report.svg
+++ b/apps/red-ui/src/assets/icons/general/report.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="report" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M90,0 C95.5,0 100,4.5 100,10 L100,10 L100,90 C100,95.5 95.5,100 90,100 L90,100 L10,100 C4.5,100 0,95.5 0,90 L0,90 L0,10 C0,4.5 4.5,0 10,0 L10,0 Z M90,10 L10,10 L10,90 L90,90 L90,10 Z M35,60 L35,80 L25,80 L25,60 L35,60 Z M55,30 L55,80 L45,80 L45,30 L55,30 Z M75,50 L75,80 L65,80 L65,50 L75,50 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="report" stroke="none" stroke-width="1">
+        <path
+            d="M90,0 C95.5,0 100,4.5 100,10 L100,10 L100,90 C100,95.5 95.5,100 90,100 L90,100 L10,100 C4.5,100 0,95.5 0,90 L0,90 L0,10 C0,4.5 4.5,0 10,0 L10,0 Z M90,10 L10,10 L10,90 L90,90 L90,10 Z M35,60 L35,80 L25,80 L25,60 L35,60 Z M55,30 L55,80 L45,80 L45,30 L55,30 Z M75,50 L75,80 L65,80 L65,50 L75,50 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/right.svg b/apps/red-ui/src/assets/icons/general/right.svg
index 20157bd55..0653a0314 100644
--- a/apps/red-ui/src/assets/icons/general/right.svg
+++ b/apps/red-ui/src/assets/icons/general/right.svg
@@ -1,8 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="down" fill="#283241">
-            <polygon id="Fill-1" transform="translate(3.000000, 3.000000) rotate(-90.000000) translate(-3.000000, -3.000000) " points="3 5 6 1 -1.33216355e-14 1"></polygon>
+<svg height="6px" version="1.1" viewBox="0 0 6 6" width="6px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="right" stroke="none" stroke-width="1">
+        <g fill="#283241" id="down">
+            <polygon id="Fill-1"
+                     points="3 5 6 1 -1.33216355e-14 1"
+                     transform="translate(3.000000, 3.000000) rotate(-90.000000) translate(-3.000000, -3.000000) "></polygon>
         </g>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/search.svg b/apps/red-ui/src/assets/icons/general/search.svg
index 25b907266..721b86aeb 100644
--- a/apps/red-ui/src/assets/icons/general/search.svg
+++ b/apps/red-ui/src/assets/icons/general/search.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M95.5,74.5 L76.5,55.5 C78.5,50.5 79.5,45.5 79.5,40 C79.5,18 61.5,0 39.5,0 C18,0 0,18 0,40 C0,62 18,80 40,80 C45.5,80 51,79 55.5,77 L74.5,96 C77.5,99 81.5,100.5 85,100.5 C89,100.5 92.5,99 95.5,96 C101.5,90 101.5,80 95.5,74.5 Z M10,40 C10,23.5 23.5,10 40,10 C56.5,10 70,23.5 70,40 C70,56.5 56.5,70 40,70 C23.5,70 10,56.5 10,40 Z M88.5,88.5 C86.5,90.5 83.5,90.5 81.5,88.5 L64.5,71.5 C67,69.5 69.5,67 71.5,64.5 L88.5,81.5 C90.5,83.5 90.5,86.5 88.5,88.5 Z" id="Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="search" stroke="none" stroke-width="1">
+        <path
+            d="M95.5,74.5 L76.5,55.5 C78.5,50.5 79.5,45.5 79.5,40 C79.5,18 61.5,0 39.5,0 C18,0 0,18 0,40 C0,62 18,80 40,80 C45.5,80 51,79 55.5,77 L74.5,96 C77.5,99 81.5,100.5 85,100.5 C89,100.5 92.5,99 95.5,96 C101.5,90 101.5,80 95.5,74.5 Z M10,40 C10,23.5 23.5,10 40,10 C56.5,10 70,23.5 70,40 C70,56.5 56.5,70 40,70 C23.5,70 10,56.5 10,40 Z M88.5,88.5 C86.5,90.5 83.5,90.5 81.5,88.5 L64.5,71.5 C67,69.5 69.5,67 71.5,64.5 L88.5,81.5 C90.5,83.5 90.5,86.5 88.5,88.5 Z"
+            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/secret.svg b/apps/red-ui/src/assets/icons/general/secret.svg
index 9f577bcfc..7d554f513 100644
--- a/apps/red-ui/src/assets/icons/general/secret.svg
+++ b/apps/red-ui/src/assets/icons/general/secret.svg
@@ -1,26 +1,26 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
+<svg id="Capa_1" style="enable-background:new 0 0 512.001 512.001;" version="1.1" viewBox="0 0 512.001 512.001" x="0px"
+     xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
 <g>
 	<g>
 		<path d="M423.617,131.695H177.353c-4.153,0-7.519,3.366-7.519,7.519c0,4.153,3.366,7.519,7.519,7.519h246.264
-			c4.153,0,7.519-3.366,7.519-7.519C431.136,135.061,427.77,131.695,423.617,131.695z"/>
+			c4.153,0,7.519-3.366,7.519-7.519C431.136,135.061,427.77,131.695,423.617,131.695z" />
 	</g>
 </g>
-<g>
+    <g>
 	<g>
 		<path d="M142.367,131.694H88.382c-4.153,0-7.519,3.366-7.519,7.519s3.366,7.519,7.519,7.519h53.985
-			c4.153,0,7.519-3.366,7.519-7.519S146.52,131.694,142.367,131.694z"/>
+			c4.153,0,7.519-3.366,7.519-7.519S146.52,131.694,142.367,131.694z" />
 	</g>
 </g>
-<g>
+    <g>
 	<g>
 		<path d="M327.181,80.229H88.382c-4.153,0-7.519,3.366-7.519,7.519c0,4.153,3.367,7.519,7.519,7.519h238.799
-			c4.153,0,7.519-3.366,7.519-7.519S331.334,80.229,327.181,80.229z"/>
+			c4.153,0,7.519-3.366,7.519-7.519S331.334,80.229,327.181,80.229z" />
 	</g>
 </g>
-<g>
+    <g>
 	<g>
 		<path d="M497.203,222.692h-16.771V107.689c0-0.097-0.011-0.192-0.014-0.289c-0.003-0.139-0.01-0.276-0.021-0.414
 			c-0.005-0.056-0.014-0.111-0.021-0.167c-0.171-1.69-0.894-3.312-2.147-4.565l-96.35-96.351c-1.401-1.401-3.264-2.149-5.169-2.187
@@ -30,46 +30,46 @@
 			c-4.818,0-8.739-3.92-8.739-8.738V29.585z M46.605,20.929c0-1.207,0.982-2.189,2.19-2.189h320.248v72.575
 			c0,13.111,10.666,23.776,23.777,23.776h72.574v107.601H245.402c-6.869,0-13.408-3.296-17.493-8.819l-22.063-29.83
 			c-6.908-9.34-17.967-14.916-29.583-14.916H46.605V20.929z M15.038,493.262V184.165h161.224c6.869,0,13.408,3.297,17.493,8.82
-			l22.063,29.83c6.908,9.339,17.967,14.915,29.583,14.915h251.56v255.533H15.038z"/>
+			l22.063,29.83c6.908,9.339,17.967,14.915,29.583,14.915h251.56v255.533H15.038z" />
 	</g>
 </g>
-<g>
+    <g>
 	<g>
 		<path d="M420.744,295.018H91.256c-8.676,0-15.735,7.059-15.735,15.735v106.882c0,8.676,7.059,15.735,15.735,15.735h243.45
 			c4.153,0,7.519-3.366,7.519-7.519s-3.367-7.519-7.519-7.519H91.256c-0.384,0-0.697-0.312-0.697-0.697V310.753
 			c0-0.385,0.312-0.697,0.697-0.697h329.488c0.384,0,0.697,0.312,0.697,0.697v106.882c0,0.385-0.312,0.697-0.697,0.697h-51.052
 			c-4.153,0-7.519,3.366-7.519,7.519s3.366,7.519,7.519,7.519h51.052c8.676,0,15.735-7.059,15.735-15.735V310.753
-			C436.479,302.077,429.42,295.018,420.744,295.018z"/>
+			C436.479,302.077,429.42,295.018,420.744,295.018z" />
 	</g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/sort-asc.svg b/apps/red-ui/src/assets/icons/general/sort-asc.svg
index c6b32e018..812184785 100644
--- a/apps/red-ui/src/assets/icons/general/sort-asc.svg
+++ b/apps/red-ui/src/assets/icons/general/sort-asc.svg
@@ -1,9 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="6px" height="14px" viewBox="0 0 6 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard" transform="translate(-1212.000000, -325.000000)" >
-            <polygon id="Fill-1" fill="currentColor" points="1215 338 1218 334 1212 334"></polygon>
-            <polygon id="Fill-1" fill="#28324180" transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) " points="1215 330 1218 326 1212 326"></polygon>
+<svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
+        <g id="Artboard" transform="translate(-1212.000000, -325.000000)">
+            <polygon fill="currentColor" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
+            <polygon fill="#28324180" id="Fill-1"
+                     points="1215 330 1218 326 1212 326"
+                     transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon>
         </g>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/sort-desc.svg b/apps/red-ui/src/assets/icons/general/sort-desc.svg
index 21e2eb61e..f9211f8d1 100644
--- a/apps/red-ui/src/assets/icons/general/sort-desc.svg
+++ b/apps/red-ui/src/assets/icons/general/sort-desc.svg
@@ -1,9 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="6px" height="14px" viewBox="0 0 6 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard" transform="translate(-1212.000000, -325.000000)" >
-            <polygon id="Fill-1" fill="#28324180" points="1215 338 1218 334 1212 334"></polygon>
-            <polygon id="Fill-1" fill="currentColor" transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) " points="1215 330 1218 326 1212 326"></polygon>
+<svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
+        <g id="Artboard" transform="translate(-1212.000000, -325.000000)">
+            <polygon fill="#28324180" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
+            <polygon fill="currentColor" id="Fill-1"
+                     points="1215 330 1218 326 1212 326"
+                     transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon>
         </g>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/status-collapse.svg b/apps/red-ui/src/assets/icons/general/status-collapse.svg
index 7ead8f40a..21c3e31e3 100644
--- a/apps/red-ui/src/assets/icons/general/status-collapse.svg
+++ b/apps/red-ui/src/assets/icons/general/status-collapse.svg
@@ -1,21 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg"
+<svg height="15px" version="1.1" viewBox="0 0 15 15" width="15px" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
         <path
             d="M1028,576 L1412,576 C1416.41828,576 1420,579.581722 1420,584 L1420,873 C1420,877.418278 1416.41828,881 1412,881 L1028,881 C1023.58172,881 1020,877.418278 1020,873 L1020,584 C1020,579.581722 1023.58172,576 1028,576 Z"
             id="path-1"></path>
-        <filter x="-6.8%" y="-7.9%" width="113.5%" height="117.7%" filterUnits="objectBoundingBox" id="filter-3">
-            <feMorphology radius="2.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+        <filter filterUnits="objectBoundingBox" height="117.7%" id="filter-3" width="113.5%" x="-6.8%" y="-7.9%">
+            <feMorphology in="SourceAlpha" operator="dilate" radius="2.5" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="3" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="6" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.156862745   0 0 0 0 0.196078431   0 0 0 0 0.254901961  0 0 0 0.1428069 0"
-                           type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="6"></feGaussianBlur>
+            <feColorMatrix in="shadowBlurOuter1"
+                           type="matrix" values="0 0 0 0 0.156862745   0 0 0 0 0.196078431   0 0 0 0 0.254901961  0 0 0 0.1428069 0"></feColorMatrix>
         </filter>
     </defs>
-    <g id="File-Upload-&amp;-Download-Overlays" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g fill="none" fill-rule="evenodd" id="File-Upload-&amp;-Download-Overlays" stroke="none" stroke-width="1">
         <g id="Document-Upload---Hover" transform="translate(-1360.000000, -592.000000)">
-            <rect x="0" y="0" width="1440" height="900"></rect>
+            <rect height="900" width="1440" x="0" y="0"></rect>
             <g id="Project-details" transform="translate(1111.000000, 127.000000)">
                 <g id="Group-4" transform="translate(0.000000, 145.000000)"></g>
             </g>
@@ -24,9 +24,9 @@
                 <use fill-rule="evenodd" xlink:href="#path-1"></use>
             </g>
             <g id="Group-6-Copy">
-                <g transform="translate(1352.000000, 584.000000)" id="status">
+                <g id="status" transform="translate(1352.000000, 584.000000)">
                     <g transform="translate(15.500000, 15.500000) rotate(90.000000) translate(-15.500000, -15.500000) translate(8.000000, 8.000000)">
-                        <polygon id="Path" fill="currentColor" fill-rule="nonzero"
+                        <polygon fill="currentColor" fill-rule="nonzero" id="Path"
                                  points="9.825 3.75 8.775 4.8 10.65 6.75 1.5 6.75 1.5 8.25 10.65 8.25 8.775 10.2 9.825 11.25 13.5 7.5"></polygon>
                     </g>
                 </g>
diff --git a/apps/red-ui/src/assets/icons/general/status-expand.svg b/apps/red-ui/src/assets/icons/general/status-expand.svg
index 92f7ee4c2..d3ed4787a 100644
--- a/apps/red-ui/src/assets/icons/general/status-expand.svg
+++ b/apps/red-ui/src/assets/icons/general/status-expand.svg
@@ -1,18 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg height="15px" version="1.1" viewBox="0 0 15 15" width="15px" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
-        <path d="M8,0 L392,0 C396.418278,-8.11624501e-16 400,3.581722 400,8 L400,40 C400,44.418278 396.418278,48 392,48 L8,48 C3.581722,48 5.41083001e-16,44.418278 0,40 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z" id="path-1"></path>
-        <filter x="-6.8%" y="-50.0%" width="113.5%" height="212.5%" filterUnits="objectBoundingBox" id="filter-3">
-            <feMorphology radius="2.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+        <path
+            d="M8,0 L392,0 C396.418278,-8.11624501e-16 400,3.581722 400,8 L400,40 C400,44.418278 396.418278,48 392,48 L8,48 C3.581722,48 5.41083001e-16,44.418278 0,40 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z"
+            id="path-1"></path>
+        <filter filterUnits="objectBoundingBox" height="212.5%" id="filter-3" width="113.5%" x="-6.8%" y="-50.0%">
+            <feMorphology in="SourceAlpha" operator="dilate" radius="2.5" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="3" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="6" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.156862745   0 0 0 0 0.196078431   0 0 0 0 0.254901961  0 0 0 0.1428069 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="6"></feGaussianBlur>
+            <feColorMatrix in="shadowBlurOuter1"
+                           type="matrix" values="0 0 0 0 0.156862745   0 0 0 0 0.196078431   0 0 0 0 0.254901961  0 0 0 0.1428069 0"></feColorMatrix>
         </filter>
     </defs>
-    <g id="File-Upload-&amp;-Download-Overlays" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g fill="none" fill-rule="evenodd" id="File-Upload-&amp;-Download-Overlays" stroke="none" stroke-width="1">
         <g id="Document-Upload---Collapsed" transform="translate(-1359.000000, -847.000000)">
-            <rect x="0" y="0" width="1440" height="900"></rect>
-            <g id="Project-details" transform="translate(1111.000000, 127.000000)" fill="currentColor" font-family="Inter-Regular, Inter" font-size="16" font-weight="normal">
+            <rect height="900" width="1440" x="0" y="0"></rect>
+            <g fill="currentColor" font-family="Inter-Regular, Inter" font-size="16"
+               font-weight="normal" id="Project-details" transform="translate(1111.000000, 127.000000)">
                 <g id="Group-4" transform="translate(0.000000, 145.000000)">
                     <g id="Group-11" transform="translate(0.000000, 566.000000)">
                         <text id="Description">
@@ -31,9 +36,13 @@
                         <use fill-rule="evenodd" xlink:href="#path-1"></use>
                     </g>
                 </g>
-                <g id="Group-6-Copy" transform="translate(347.000000, 23.000000) rotate(180.000000) translate(-347.000000, -23.000000) translate(332.000000, 8.000000)" fill="currentColor" fill-rule="nonzero">
-                    <g id="status" transform="translate(15.500000, 15.500000) rotate(90.000000) translate(-15.500000, -15.500000) translate(8.000000, 8.000000)">
-                        <polygon id="Path" points="9.825 3.75 8.775 4.8 10.65 6.75 1.5 6.75 1.5 8.25 10.65 8.25 8.775 10.2 9.825 11.25 13.5 7.5"></polygon>
+                <g fill="currentColor"
+                   fill-rule="nonzero"
+                   id="Group-6-Copy" transform="translate(347.000000, 23.000000) rotate(180.000000) translate(-347.000000, -23.000000) translate(332.000000, 8.000000)">
+                    <g id="status"
+                       transform="translate(15.500000, 15.500000) rotate(90.000000) translate(-15.500000, -15.500000) translate(8.000000, 8.000000)">
+                        <polygon id="Path"
+                                 points="9.825 3.75 8.775 4.8 10.65 6.75 1.5 6.75 1.5 8.25 10.65 8.25 8.775 10.2 9.825 11.25 13.5 7.5"></polygon>
                     </g>
                 </g>
             </g>
diff --git a/apps/red-ui/src/assets/icons/general/status-info.svg b/apps/red-ui/src/assets/icons/general/status-info.svg
index 5da44f713..1a4e3843e 100644
--- a/apps/red-ui/src/assets/icons/general/status-info.svg
+++ b/apps/red-ui/src/assets/icons/general/status-info.svg
@@ -1,23 +1,25 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
     <defs>
-        <rect id="path-1" x="0" y="61" width="1440" height="50"></rect>
-        <filter x="-0.5%" y="-10.0%" width="101.0%" height="128.0%" filterUnits="objectBoundingBox" id="filter-2">
+        <rect height="50" id="path-1" width="1440" x="0" y="61"></rect>
+        <filter filterUnits="objectBoundingBox" height="128.0%" id="filter-2" width="101.0%" x="-0.5%" y="-10.0%">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.88627451   0 0 0 0 0.894117647   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"></feGaussianBlur>
+            <feColorMatrix in="shadowBlurOuter1"
+                           type="matrix" values="0 0 0 0 0.88627451   0 0 0 0 0.894117647   0 0 0 0 0.91372549  0 0 0 1 0"></feColorMatrix>
         </filter>
     </defs>
-    <g id="File-attributes" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g fill="none" fill-rule="evenodd" id="File-attributes" stroke="none" stroke-width="1">
         <g id="Reviewer---Doc-Info-sidebar" transform="translate(-1256.000000, -79.000000)">
-            <rect x="0" y="0" width="1440" height="750"></rect>
+            <rect height="750" width="1440" x="0" y="0"></rect>
             <g id="Header-Document">
                 <g id="Group-6" transform="translate(1246.000000, 69.000000)">
-                    <rect id="Rectangle" opacity="0.1" x="0" y="0" width="34" height="34" rx="17"></rect>
-                    <g id="status" transform="translate(10.000000, 10.000000)" fill="currentColor">
-                        <path d="M2.8,0 L0,0 L0,14 L14,14 L14,0 M12.6,1.4 L12.6,12.6 L1.4,12.6 L1.4,1.4 L2.8,1.4" id="pages" fill-rule="nonzero"></path>
-                        <rect id="Rectangle" x="6.3" y="5.46" width="1.4" height="5.46"></rect>
-                        <rect id="Rectangle" x="6.3" y="3.08" width="1.4" height="1.4"></rect>
+                    <rect height="34" id="Rectangle" opacity="0.1" rx="17" width="34" x="0" y="0"></rect>
+                    <g fill="currentColor" id="status" transform="translate(10.000000, 10.000000)">
+                        <path d="M2.8,0 L0,0 L0,14 L14,14 L14,0 M12.6,1.4 L12.6,12.6 L1.4,12.6 L1.4,1.4 L2.8,1.4"
+                              fill-rule="nonzero" id="pages"></path>
+                        <rect height="5.46" id="Rectangle" width="1.4" x="6.3" y="5.46"></rect>
+                        <rect height="1.4" id="Rectangle" width="1.4" x="6.3" y="3.08"></rect>
                     </g>
                 </g>
             </g>
diff --git a/apps/red-ui/src/assets/icons/general/status.svg b/apps/red-ui/src/assets/icons/general/status.svg
index 096e8dd60..2cfd29a02 100644
--- a/apps/red-ui/src/assets/icons/general/status.svg
+++ b/apps/red-ui/src/assets/icons/general/status.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="status" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M60.2247499,90 L60.2247499,100 L40.2247499,100 L40.2247499,90 L60.2247499,90 Z M50.2247499,0 C69.7247499,0 85.2247499,15.5 85.2247499,35 C85.2247499,45.5 80.7247499,55 72.7247499,62 C67.7247499,66 65.2247499,71.5 65.2247499,77.5 L65.2247499,77.5 L65.2247499,85 L35.2247499,85 L35.2247499,77.5 C35.2247499,71.5 32.2247499,66 27.2247499,61.5 C17.2247499,53 13.2247499,40.5 15.7247499,28 C18.7247499,14.5 31.2247499,0 50.2247499,0 Z M50.2247499,10 C37.2247499,10 27.7247499,20.5 25.7247499,30 C23.7247499,39 26.7247499,48 33.7247499,54 C40.7247499,59.5 44.7247499,67 45.2247499,75 L45.2247499,75 L55.2247499,75 C56.2247499,66.5 59.7247499,59 66.2247499,54 C71.7247499,49.5 75.2247499,42.5 75.2247499,35 C75.2247499,21 64.2247499,10 50.2247499,10 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="status" stroke="none" stroke-width="1">
+        <path
+            d="M60.2247499,90 L60.2247499,100 L40.2247499,100 L40.2247499,90 L60.2247499,90 Z M50.2247499,0 C69.7247499,0 85.2247499,15.5 85.2247499,35 C85.2247499,45.5 80.7247499,55 72.7247499,62 C67.7247499,66 65.2247499,71.5 65.2247499,77.5 L65.2247499,77.5 L65.2247499,85 L35.2247499,85 L35.2247499,77.5 C35.2247499,71.5 32.2247499,66 27.2247499,61.5 C17.2247499,53 13.2247499,40.5 15.7247499,28 C18.7247499,14.5 31.2247499,0 50.2247499,0 Z M50.2247499,10 C37.2247499,10 27.7247499,20.5 25.7247499,30 C23.7247499,39 26.7247499,48 33.7247499,54 C40.7247499,59.5 44.7247499,67 45.2247499,75 L45.2247499,75 L55.2247499,75 C56.2247499,66.5 59.7247499,59 66.2247499,54 C71.7247499,49.5 75.2247499,42.5 75.2247499,35 C75.2247499,21 64.2247499,10 50.2247499,10 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/template.svg b/apps/red-ui/src/assets/icons/general/template.svg
index bbe5850ae..64ed032cf 100644
--- a/apps/red-ui/src/assets/icons/general/template.svg
+++ b/apps/red-ui/src/assets/icons/general/template.svg
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="rule_sets" fill="currentColor" fill-rule="nonzero">
-            <path d="M35,60 L35,95 L0,95 L0,60 L35,60 Z M100,85 L100,95 L45,95 L45,85 L100,85 Z M25,70 L10,70 L10,85 L25,85 L25,70 Z M100,60 L100,70 L45,70 L45,60 L100,60 Z M35,5 L35,40 L0,40 L0,5 L35,5 Z M100,30 L100,40 L45,40 L45,30 L100,30 Z M25,15 L10,15 L10,30 L25,30 L25,15 Z M100,5 L100,15 L45,15 L45,5 L100,5 Z"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Symbols" stroke="none" stroke-width="1">
+        <g fill="currentColor" fill-rule="nonzero" id="rule_sets">
+            <path
+                d="M35,60 L35,95 L0,95 L0,60 L35,60 Z M100,85 L100,95 L45,95 L45,85 L100,85 Z M25,70 L10,70 L10,85 L25,85 L25,70 Z M100,60 L100,70 L45,70 L45,60 L100,60 Z M35,5 L35,40 L0,40 L0,5 L35,5 Z M100,30 L100,40 L45,40 L45,30 L100,30 Z M25,15 L10,15 L10,30 L25,30 L25,15 Z M100,5 L100,15 L45,15 L45,5 L100,5 Z"></path>
         </g>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/thumb-down.svg b/apps/red-ui/src/assets/icons/general/thumb-down.svg
index b8f41c22e..c78fc5a10 100644
--- a/apps/red-ui/src/assets/icons/general/thumb-down.svg
+++ b/apps/red-ui/src/assets/icons/general/thumb-down.svg
@@ -1,7 +1,7 @@
-<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-     width="475.092px" height="475.092px" viewBox="0 0 475.092 475.092"
-     style="enable-background:new 0 0 475.092 475.092;"
-     xml:space="preserve">
+<svg height="475.092px" id="Capa_1" style="enable-background:new 0 0 475.092 475.092;" viewBox="0 0 475.092 475.092"
+     width="475.092px" x="0px" xml:space="preserve"
+     xmlns="http://www.w3.org/2000/svg"
+     y="0px">
 <g fill="currentColor">
 	<path d="M442.822,209.562c1.715-6.283,2.57-12.847,2.57-19.702c0-14.655-3.621-28.361-10.852-41.112
 		c0.567-3.995,0.855-8.088,0.855-12.275c0-19.223-5.716-36.162-17.132-50.819v-1.427c0.191-26.075-7.946-46.632-24.414-61.669
@@ -27,6 +27,6 @@
 		c9.328,7.804,13.989,19.795,13.989,35.975c0,4.949-0.479,10.279-1.423,15.987c5.708,3.046,10.231,8.042,13.559,14.987
 		c3.333,6.945,4.996,13.944,4.996,20.985c0,7.039-1.711,13.61-5.141,19.701c10.089,9.517,15.126,20.839,15.126,33.974
 		c0,4.759-0.948,10.039-2.847,15.846c-1.899,5.808-4.285,10.327-7.139,13.562c6.091,0.192,11.184,4.665,15.276,13.422
-		c4.093,8.754,6.14,16.468,6.14,23.127C420.277,265.525,416.561,274.043,409.135,281.377z"/>
+		c4.093,8.754,6.14,16.468,6.14,23.127C420.277,265.525,416.561,274.043,409.135,281.377z" />
 </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/thumb-up.svg b/apps/red-ui/src/assets/icons/general/thumb-up.svg
index 60f1effdb..07b9ed971 100644
--- a/apps/red-ui/src/assets/icons/general/thumb-up.svg
+++ b/apps/red-ui/src/assets/icons/general/thumb-up.svg
@@ -1,9 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792" id="svg3888" version="1.1"
-     width="100%" height="100%">
-    <defs id="defs3896"/>
-    <g transform="matrix(1,0,0,-1,129.08475,1346.1695)" id="g3890">
+<svg height="100%" id="svg3888" version="1.1" viewBox="0 -256 1792 1792"
+     width="100%" xmlns="http://www.w3.org/2000/svg">
+    <defs id="defs3896" />
+    <g id="g3890" transform="matrix(1,0,0,-1,129.08475,1346.1695)">
         <path
             d="m 256,192 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 1152,576 q 0,51 -39,89.5 -39,38.5 -89,38.5 H 928 q 0,58 48,159.5 48,101.5 48,160.5 0,98 -32,145 -32,47 -128,47 -26,-26 -38,-85 -12,-59 -30.5,-125.5 Q 777,1131 736,1088 714,1065 659,997 655,992 636,967 617,942 604.5,926 592,910 570,883.5 548,857 530,839.5 512,822 491.5,804 471,786 451.5,777 432,768 416,768 H 384 V 128 h 32 q 13,0 31.5,-3 18.5,-3 33,-6.5 14.5,-3.5 38,-11 Q 542,100 553.5,96 565,92 589,83.5 613,75 618,73 829,0 960,0 h 121 q 192,0 192,167 0,26 -5,56 30,16 47.5,52.5 17.5,36.5 17.5,73.5 0,37 -18,69 53,50 53,119 0,25 -10,55.5 -10,30.5 -25,47.5 32,1 53.5,47 21.5,46 21.5,81 z m 128,1 q 0,-89 -49,-163 9,-33 9,-69 0,-77 -38,-144 3,-21 3,-43 0,-101 -60,-178 1,-139 -85,-219.5 -86,-80.5 -227,-80.5 h -36 -93 q -96,0 -189.5,22.5 Q 677,-83 554,-40 438,0 416,0 H 128 Q 75,0 37.5,37.5 0,75 0,128 V 768 Q 0,821 37.5,858.5 75,896 128,896 h 274 q 36,24 137,155 58,75 107,128 24,25 35.5,85.5 11.5,60.5 30.5,126.5 19,66 62,108 39,37 90,37 84,0 151,-32.5 67,-32.5 102,-101.5 35,-69 35,-186 0,-93 -48,-192 h 176 q 104,0 180,-76 76,-76 76,-179 z"
-            id="path3892" style="fill:currentColor"/>
+            id="path3892" style="fill:currentColor" />
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/thumb_down.svg b/apps/red-ui/src/assets/icons/general/thumb_down.svg
index 6b1aff656..6aefdb656 100644
--- a/apps/red-ui/src/assets/icons/general/thumb_down.svg
+++ b/apps/red-ui/src/assets/icons/general/thumb_down.svg
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <g id="false_positive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="false_positive" stroke="none" stroke-width="1">
         <path
             d="M70.0540046,8 L70.0540046,13 L18.1476125,13 C13.6557132,13 9.16381388,16.5 8.16561403,21 L0.180015248,61 C-0.319084676,64 0.180015248,67 2.17641494,69.5 C4.17281464,71.5 7.16741418,73 10.1620137,73 L23.1386117,73 C18.6467124,78.5 18.1476125,86 22.1404119,91.5 C24.6359115,95.5 29.1278108,98 34.1188101,98 C38.1116095,98 42.1044088,96.5 44.5999085,93.5 L65.0630053,73 L70.0540046,73 L70.0540046,78 L100,78 L100,8 L70.0540046,8 Z M61.0702059,63 L37.6125095,86.5 C36.6143097,87.5 35.6161098,88 34.1188101,88 C32.6215103,88 31.1242105,87 30.1260107,86 C28.6287109,84 29.1278108,81 31.1242105,79 L47.0954081,63 L10.1620137,63 L18.1476125,23 L70.0540046,23 L70.0540046,63 L61.0702059,63 Z M90.0180015,68 L80.036003,68 L80.036003,18 L90.0180015,18 L90.0180015,68 Z"
-            id="Shape" fill="currentColor" fill-rule="nonzero"></path>
+            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/thumb_up.svg b/apps/red-ui/src/assets/icons/general/thumb_up.svg
index 8670d6c34..29ad80db1 100644
--- a/apps/red-ui/src/assets/icons/general/thumb_up.svg
+++ b/apps/red-ui/src/assets/icons/general/thumb_up.svg
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <g id="false_negative" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="false_negative" stroke="none" stroke-width="1">
         <path
             d="M29.9459954,92 L29.9459954,87 L81.8523875,87 C86.3442868,87 90.8361861,83.5 91.834386,79 L99.8199848,39 C100.319085,36 99.8199848,33 97.8235851,30.5 C95.8271854,28.5 92.8325858,27 89.8379863,27 L76.8613883,27 C81.3532876,21.5 81.8523875,14 77.8595881,8.5 C75.3640885,4.5 70.8721892,2 65.8811899,2 C61.8883905,2 57.8955912,3.5 55.4000915,6.5 L34.9369947,27 L29.9459954,27 L29.9459954,22 L0,22 L0,92 L29.9459954,92 Z M38.9297941,37 L62.3874905,13.5 C63.3856903,12.5 64.3838902,12 65.8811899,12 C67.3784897,12 68.8757895,13 69.8739893,14 C71.3712891,16 70.8721892,19 68.8757895,21 L52.9045919,37 L89.8379863,37 L81.8523875,77 L29.9459954,77 L29.9459954,37 L38.9297941,37 Z M9.98199848,32 L19.963997,32 L19.963997,82 L9.98199848,82 L9.98199848,32 Z"
-            id="Shape" fill="currentColor" fill-rule="nonzero"></path>
+            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/trash.svg b/apps/red-ui/src/assets/icons/general/trash.svg
index 19094f08d..a2e0601a7 100644
--- a/apps/red-ui/src/assets/icons/general/trash.svg
+++ b/apps/red-ui/src/assets/icons/general/trash.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="trash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M85,10 L65,10 L65,0 L35,0 L35,10 L15,10 C12,10 10,12 10,15 C10,18 12,20 15,20 L15,85 C15,93.5 21.5,100 30,100 L70,100 C78.5,100 85,93.5 85,85 L85,20 C88,20 90,18 90,15 C90,12 88,10 85,10 Z M75,85 C75,88 73,90 70,90 L30,90 C27,90 25,88 25,85 L25,20 L75,20 L75,85 Z" id="Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="trash" stroke="none" stroke-width="1">
+        <path
+            d="M85,10 L65,10 L65,0 L35,0 L35,10 L15,10 C12,10 10,12 10,15 C10,18 12,20 15,20 L15,85 C15,93.5 21.5,100 30,100 L70,100 C78.5,100 85,93.5 85,85 L85,20 C88,20 90,18 90,15 C90,12 88,10 85,10 Z M75,85 C75,88 73,90 70,90 L30,90 C27,90 25,88 25,85 L25,20 L75,20 L75,85 Z"
+            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/under-construction.svg b/apps/red-ui/src/assets/icons/general/under-construction.svg
index d7a314eaf..f054a2400 100644
--- a/apps/red-ui/src/assets/icons/general/under-construction.svg
+++ b/apps/red-ui/src/assets/icons/general/under-construction.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 128 128">
+<svg height="512" viewBox="0 0 128 128" width="512" xmlns="http://www.w3.org/2000/svg">
     <path
-        d="M126.25,39.258a1.75,1.75,0,0,0,1.75-1.75V11.755a1.75,1.75,0,0,0-1.75-1.75H114.818V1.747A1.75,1.75,0,0,0,113.068,0h-12a1.751,1.751,0,0,0-1.75,1.75v8.258H28.682V1.747A1.751,1.751,0,0,0,26.932,0h-12a1.75,1.75,0,0,0-1.75,1.75v8.258H1.75A1.75,1.75,0,0,0,0,11.755V37.508a1.75,1.75,0,0,0,1.75,1.75H13.182V52.005H1.75A1.75,1.75,0,0,0,0,53.755V79.508a1.75,1.75,0,0,0,1.75,1.75H13.182V114.5H6.75A6.758,6.758,0,0,0,0,121.247v5A1.75,1.75,0,0,0,1.75,128H40.113a1.75,1.75,0,0,0,1.75-1.75v-5a6.758,6.758,0,0,0-6.75-6.75H28.682V81.258H99.318V114.5H92.887a6.758,6.758,0,0,0-6.75,6.75v5a1.75,1.75,0,0,0,1.75,1.75H126.25a1.75,1.75,0,0,0,1.75-1.75v-5a6.758,6.758,0,0,0-6.75-6.75h-6.432V81.258H126.25a1.75,1.75,0,0,0,1.75-1.75V53.755a1.75,1.75,0,0,0-1.75-1.75H114.818V39.258Zm-1.75-3.5H105.618l8.647-22.253H124.5Zm-56.947,42L76.2,55.505h22.31L89.863,77.758ZM99.318,52.005H28.682V39.258H99.318ZM29.489,77.758l8.647-22.253H60.447L51.8,77.758ZM60.447,13.505,51.8,35.758H29.489l8.647-22.253Zm-33.515,42h7.45L25.734,77.758H17.489l8.648-22.253Zm71.579-42L89.863,35.758H67.553L76.2,13.505ZM93.618,35.758l8.648-22.253h8.245l-8.648,22.253Zm9.2-32.261h8.5v6.508h-8.5ZM72.446,13.505,63.8,35.758H55.554L64.2,13.505ZM25.734,35.758H17.489l8.648-22.253h8.245ZM16.682,3.5h8.5v6.508h-8.5ZM3.5,13.505H22.382L13.735,35.758H3.5ZM16.682,39.258h8.5V52.005h-8.5ZM3.5,55.505H22.382L13.735,77.758H3.5Zm34.863,65.742v3.25H3.5v-3.25A3.254,3.254,0,0,1,6.75,118H35.113A3.254,3.254,0,0,1,38.363,121.247ZM16.682,114.5V81.258h8.5V114.5ZM55.554,77.758,64.2,55.505h8.245L63.8,77.758Zm46.712-22.253h8.245l-8.648,22.253H93.618ZM124.5,121.247v3.25H89.637v-3.25a3.254,3.254,0,0,1,3.25-3.25H121.25A3.254,3.254,0,0,1,124.5,121.247Zm-13.182-6.75h-8.5V81.258h8.5ZM124.5,77.758H105.618l8.647-22.253H124.5ZM111.318,52.005h-8.5V39.258h8.5Z"/>
+        d="M126.25,39.258a1.75,1.75,0,0,0,1.75-1.75V11.755a1.75,1.75,0,0,0-1.75-1.75H114.818V1.747A1.75,1.75,0,0,0,113.068,0h-12a1.751,1.751,0,0,0-1.75,1.75v8.258H28.682V1.747A1.751,1.751,0,0,0,26.932,0h-12a1.75,1.75,0,0,0-1.75,1.75v8.258H1.75A1.75,1.75,0,0,0,0,11.755V37.508a1.75,1.75,0,0,0,1.75,1.75H13.182V52.005H1.75A1.75,1.75,0,0,0,0,53.755V79.508a1.75,1.75,0,0,0,1.75,1.75H13.182V114.5H6.75A6.758,6.758,0,0,0,0,121.247v5A1.75,1.75,0,0,0,1.75,128H40.113a1.75,1.75,0,0,0,1.75-1.75v-5a6.758,6.758,0,0,0-6.75-6.75H28.682V81.258H99.318V114.5H92.887a6.758,6.758,0,0,0-6.75,6.75v5a1.75,1.75,0,0,0,1.75,1.75H126.25a1.75,1.75,0,0,0,1.75-1.75v-5a6.758,6.758,0,0,0-6.75-6.75h-6.432V81.258H126.25a1.75,1.75,0,0,0,1.75-1.75V53.755a1.75,1.75,0,0,0-1.75-1.75H114.818V39.258Zm-1.75-3.5H105.618l8.647-22.253H124.5Zm-56.947,42L76.2,55.505h22.31L89.863,77.758ZM99.318,52.005H28.682V39.258H99.318ZM29.489,77.758l8.647-22.253H60.447L51.8,77.758ZM60.447,13.505,51.8,35.758H29.489l8.647-22.253Zm-33.515,42h7.45L25.734,77.758H17.489l8.648-22.253Zm71.579-42L89.863,35.758H67.553L76.2,13.505ZM93.618,35.758l8.648-22.253h8.245l-8.648,22.253Zm9.2-32.261h8.5v6.508h-8.5ZM72.446,13.505,63.8,35.758H55.554L64.2,13.505ZM25.734,35.758H17.489l8.648-22.253h8.245ZM16.682,3.5h8.5v6.508h-8.5ZM3.5,13.505H22.382L13.735,35.758H3.5ZM16.682,39.258h8.5V52.005h-8.5ZM3.5,55.505H22.382L13.735,77.758H3.5Zm34.863,65.742v3.25H3.5v-3.25A3.254,3.254,0,0,1,6.75,118H35.113A3.254,3.254,0,0,1,38.363,121.247ZM16.682,114.5V81.258h8.5V114.5ZM55.554,77.758,64.2,55.505h8.245L63.8,77.758Zm46.712-22.253h8.245l-8.648,22.253H93.618ZM124.5,121.247v3.25H89.637v-3.25a3.254,3.254,0,0,1,3.25-3.25H121.25A3.254,3.254,0,0,1,124.5,121.247Zm-13.182-6.75h-8.5V81.258h8.5ZM124.5,77.758H105.618l8.647-22.253H124.5ZM111.318,52.005h-8.5V39.258h8.5Z" />
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/undo.svg b/apps/red-ui/src/assets/icons/general/undo.svg
index 64b348ae4..7ec760b3e 100644
--- a/apps/red-ui/src/assets/icons/general/undo.svg
+++ b/apps/red-ui/src/assets/icons/general/undo.svg
@@ -1,12 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
         <g id="Styleguide-Actions" transform="translate(-62.000000, -609.000000)">
-            <rect x="0" y="0" width="904" height="906"></rect>
+            <rect height="906" width="904" x="0" y="0"></rect>
             <g id="Group-6" transform="translate(52.000000, 599.000000)">
-                <rect id="Rectangle" x="0" y="0" width="34" height="34" rx="17"></rect>
-                <g id="status" transform="translate(10.000000, 10.000000)" fill="currentColor" fill-rule="nonzero">
-                    <path d="M7.7,2.38 L8.75,3.29 L6.86,5.18 L7.7,5.18 C11.2,5.18 14,8.05 14,11.48 L14,11.48 L12.6,11.48 C12.6,8.75 10.43,6.58 7.7,6.58 L7.7,6.58 L6.86,6.58 L8.75,8.47 L7.77,9.45 L4.2,5.88 L7.7,2.38 Z M3.5,2.38 L4.48,3.36 L1.96,5.88 L4.48,8.47 L3.5,9.45 L0,5.88 L3.5,2.38 Z" id="Back-to-review"></path>
+                <rect height="34" id="Rectangle" rx="17" width="34" x="0" y="0"></rect>
+                <g fill="currentColor" fill-rule="nonzero" id="status" transform="translate(10.000000, 10.000000)">
+                    <path
+                        d="M7.7,2.38 L8.75,3.29 L6.86,5.18 L7.7,5.18 C11.2,5.18 14,8.05 14,11.48 L14,11.48 L12.6,11.48 C12.6,8.75 10.43,6.58 7.7,6.58 L7.7,6.58 L6.86,6.58 L8.75,8.47 L7.77,9.45 L4.2,5.88 L7.7,2.38 Z M3.5,2.38 L4.48,3.36 L1.96,5.88 L4.48,8.47 L3.5,9.45 L0,5.88 L3.5,2.38 Z"
+                        id="Back-to-review"></path>
                 </g>
             </g>
         </g>
diff --git a/apps/red-ui/src/assets/icons/general/upload.svg b/apps/red-ui/src/assets/icons/general/upload.svg
index 3216cbd34..e80e23b9e 100644
--- a/apps/red-ui/src/assets/icons/general/upload.svg
+++ b/apps/red-ui/src/assets/icons/general/upload.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="90px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="upload" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
-        <path d="M35,35 L35,45 L15,45 L15,90 L85,90 L85,45 L65,45 L65,35 L95,35 L95,100 L5,100 L5,35 L35,35 Z M50,0 L70,20 L63,27 L55,19 L55,70 L45,70 L45,19 L37,27 L30,20 L50,0 Z" id="Combined-Shape"  fill-rule="nonzero"></path>
+<svg height="90px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentColor" fill-rule="evenodd" id="upload" stroke="none" stroke-width="1">
+        <path
+            d="M35,35 L35,45 L15,45 L15,90 L85,90 L85,45 L65,45 L65,35 L95,35 L95,100 L5,100 L5,35 L35,35 Z M50,0 L70,20 L63,27 L55,19 L55,70 L45,70 L45,19 L37,27 L30,20 L50,0 Z"
+            fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/user.svg b/apps/red-ui/src/assets/icons/general/user.svg
index 29c5bc677..870d869b9 100644
--- a/apps/red-ui/src/assets/icons/general/user.svg
+++ b/apps/red-ui/src/assets/icons/general/user.svg
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="user" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M50,0 C77.5,0 100,22.5 100,50 C100,77.5 77.5,100 50,100 C22.5,100 0,77.5 0,50 C0,22.5 22.5,0 50,0 Z M50,60 C37.5,60 27,69.5 25.5,81.5 C32,87 40.5,90 50,90 C59.5,90 68,87 74.5,81.5 C73,69.5 62.5,60 50,60 Z M50,10 C28,10 10,28 10,50 C10,58.5 12.5,66.5 17,73 C22,59.5 35,50 50,50 C65,50 78,59.5 83,73 C87.5,66.5 90,58.5 90,50 C90,28 72,10 50,10 Z M50,15 C58.5,15 65,21.5 65,30 C65,38.5 58.5,45 50,45 C41.5,45 35,38.5 35,30 C35,21.5 41.5,15 50,15 Z M50,25 C47,25 45,27 45,30 C45,33 47,35 50,35 C53,35 55,33 55,30 C55,27 53,25 50,25 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="user" stroke="none" stroke-width="1">
+        <path
+            d="M50,0 C77.5,0 100,22.5 100,50 C100,77.5 77.5,100 50,100 C22.5,100 0,77.5 0,50 C0,22.5 22.5,0 50,0 Z M50,60 C37.5,60 27,69.5 25.5,81.5 C32,87 40.5,90 50,90 C59.5,90 68,87 74.5,81.5 C73,69.5 62.5,60 50,60 Z M50,10 C28,10 10,28 10,50 C10,58.5 12.5,66.5 17,73 C22,59.5 35,50 50,50 C65,50 78,59.5 83,73 C87.5,66.5 90,58.5 90,50 C90,28 72,10 50,10 Z M50,15 C58.5,15 65,21.5 65,30 C65,38.5 58.5,45 50,45 C41.5,45 35,38.5 35,30 C35,21.5 41.5,15 50,15 Z M50,25 C47,25 45,27 45,30 C45,33 47,35 50,35 C53,35 55,33 55,30 C55,27 53,25 50,25 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/visibility-off.svg b/apps/red-ui/src/assets/icons/general/visibility-off.svg
index cdfda1260..8b0454954 100644
--- a/apps/red-ui/src/assets/icons/general/visibility-off.svg
+++ b/apps/red-ui/src/assets/icons/general/visibility-off.svg
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none"/><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
\ No newline at end of file
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none" />
+    <path
+        d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
+</svg>
diff --git a/apps/red-ui/src/assets/icons/general/visibility.svg b/apps/red-ui/src/assets/icons/general/visibility.svg
index a066f1e16..b0b727e28 100644
--- a/apps/red-ui/src/assets/icons/general/visibility.svg
+++ b/apps/red-ui/src/assets/icons/general/visibility.svg
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
\ No newline at end of file
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+        d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
+</svg>
diff --git a/apps/red-ui/src/assets/styles/red-dialog.scss b/apps/red-ui/src/assets/styles/red-dialog.scss
index fe4161ca1..037083946 100644
--- a/apps/red-ui/src/assets/styles/red-dialog.scss
+++ b/apps/red-ui/src/assets/styles/red-dialog.scss
@@ -32,6 +32,7 @@
         align-items: center;
 
         display: flex;
+
         > * {
             margin-right: 16px;
         }
diff --git a/apps/red-ui/src/assets/styles/red-tooltips.scss b/apps/red-ui/src/assets/styles/red-tooltips.scss
index e4a693a96..81eaa42ef 100644
--- a/apps/red-ui/src/assets/styles/red-tooltips.scss
+++ b/apps/red-ui/src/assets/styles/red-tooltips.scss
@@ -38,6 +38,7 @@
         }
     }
 }
+
 //
 //.mat-tooltip[style*='transform-origin: center top']:after {
 //    top: -6px;