diff --git a/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html
index fcaa9e487..fd18a4c10 100644
--- a/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html
+++ b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html
@@ -97,7 +97,7 @@
                 <div class="sk-line sk-h-8 sk-w-70"></div>
             </div>
             <div class="sk-line sk-h-8 sk-w-70 mb-10"></div>
-            <div class="d-flex mb-24">
+            <div class="flex mb-24">
                 <div *ngFor="let circle of [].constructor(9)" class="sk-circle w-32 mr-2"></div>
             </div>
             <redaction-skeleton-stats class="mb-32"></redaction-skeleton-stats>
diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.html b/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.html
index 6d01a6bd8..3d4ede492 100644
--- a/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.html
+++ b/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.html
@@ -3,7 +3,7 @@
 </div>
 
 <div class="flex-1">
-    <div *ngFor="let line of [].constructor(4)" class="mb-16 d-flex align-center">
+    <div *ngFor="let line of [].constructor(4)" class="mb-16 flex-align-items-center">
         <div class="flex-1 sk-line sk-h-6 sk-w-12 mr-10"></div>
         <div class="flex-1 sk-line sk-h-8 sk-w-100"></div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-clone-dossier-template-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-clone-dossier-template-dialog.component.html
index 6b2304520..34c415d0d 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-clone-dossier-template-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-clone-dossier-template-dialog.component.html
@@ -76,7 +76,7 @@
             </div>
 
             <p class="download-includes">{{ 'download-includes' | translate }}</p>
-            <div class="d-flex">
+            <div class="flex">
                 <redaction-select
                     [label]="
                         'download-type.label'
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.html
index 60e12518d..0b826c1ff 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.html
@@ -23,7 +23,7 @@
                     <div class="row">
                         <div translate="license-info-screen.copyright-claim-title"></div>
                         <div>
-                            {{ 'license-info-screen.copyright-claim-text' | translate: { currentYear: currentYear } }}
+                            {{ 'license-info-screen.copyright-claim-text' | translate : { currentYear: currentYear } }}
                         </div>
                     </div>
 
@@ -35,7 +35,7 @@
                     <div class="section-title all-caps-label" translate="license-info-screen.licensing-details"></div>
 
                     <div class="row">
-                        <div class="flex align-center" translate="license-info-screen.license-title"></div>
+                        <div class="flex-align-items-center" translate="license-info-screen.license-title"></div>
                         <div>
                             <redaction-license-select></redaction-license-select>
                         </div>
@@ -50,8 +50,8 @@
                         <div class="row">
                             <div translate="license-info-screen.licensing-period"></div>
                             <div>
-                                {{ (selectedLicense.validFrom | date: 'dd-MM-yyyy') || '-' }} /
-                                {{ (selectedLicense.validUntil | date: 'dd-MM-yyyy') || '-' }}
+                                {{ (selectedLicense.validFrom | date : 'dd-MM-yyyy') || '-' }} /
+                                {{ (selectedLicense.validUntil | date : 'dd-MM-yyyy') || '-' }}
                             </div>
                         </div>
                     </ng-container>
@@ -77,7 +77,7 @@
                         <div>
                             {{
                                 'license-info-screen.total-analyzed'
-                                    | translate: { date: licenseService.totalInfo.startDate | date: 'longDate' }
+                                    | translate : { date: licenseService.totalInfo.startDate | date : 'longDate' }
                             }}
                         </div>
                         <div>{{ licenseService.totalInfo.numberOfAnalyzedPages }}</div>
@@ -87,7 +87,7 @@
                         <div translate="license-info-screen.current-analyzed"></div>
                         <div>
                             {{ licenseService.currentInfo.numberOfAnalyzedPages }}
-                            ({{ analysisPercentageOfLicense$ | async | number: '1.0-2' }}%)
+                            ({{ analysisPercentageOfLicense$ | async | number : '1.0-2' }}%)
                         </div>
                     </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html b/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html
index 6694f8c1f..db8191877 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html
@@ -17,9 +17,9 @@
 </div>
 
 <ng-template #licenseInfo let-license="license">
-    <div class="flex space-between align-center">
+    <div class="space-between flex-align-items-center">
         <span>{{ license.name }}</span>
-        <div class="mr-10 flex align-center">
+        <div class="mr-10 flex-align-items-center">
             <div [class.green]="license.id === licenseService.activeLicenseId" class="dot mr-4"></div>
             <span class="small-label">{{ getStatus(license.id) | translate | uppercase }}</span>
         </div>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
index eba0cd9a2..bb343b8be 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
@@ -13,7 +13,7 @@
 
     <div class="mt-24">
         <div class="all-caps-label" translate="dossier-details.owner"></div>
-        <div class="mt-12 d-flex">
+        <div class="mt-12 flex">
             <ng-container *ngIf="!editingOwner; else editOwner">
                 <iqser-initials-avatar [user]="ctx.dossier?.ownerId" [withName]="true" color="gray" size="large"></iqser-initials-avatar>
 
diff --git a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html
index 49ffe3991..b85081c8e 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html
@@ -1,4 +1,4 @@
-<div class="justify-center banner read-only d-flex">
+<div class="justify-center banner read-only flex">
     <div *ngIf="file.isFullProcessing" class="ocr-indicator">
         <ng-container *ngIf="file.isOcrProcessing; else defaultProcessing">
             <redaction-ocr-progress-bar
diff --git a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
index db9d59639..121c9ab13 100644
--- a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
@@ -76,7 +76,7 @@
             </div>
 
             <p class="download-includes">{{ 'download-includes' | translate }}</p>
-            <div class="d-flex">
+            <div class="flex">
                 <redaction-select
                     [height]="165"
                     [label]="'report-type.label' | translate : { length: reportTemplateIdsLength }"
diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss
index e4155f00d..59c6076af 100644
--- a/apps/red-ui/src/assets/styles/red-components.scss
+++ b/apps/red-ui/src/assets/styles/red-components.scss
@@ -99,6 +99,6 @@
     }
 }
 
-.align-center {
-    align-items: center;
+.app-name {
+    margin-left: 10px;
 }
diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss
index fd6f16587..26875aa03 100644
--- a/apps/red-ui/src/styles.scss
+++ b/apps/red-ui/src/styles.scss
@@ -82,7 +82,9 @@
     $iqser-highlight-color: #fffcc4,
     $iqser-skeleton-color: vars.$grey-4,
     $iqser-font-family: 'Inter, sans-serif',
-    $iqser-app-name-font-family: 'OpenSans Extrabold, sans-serif'
+    $iqser-app-name-font-family: 'OpenSans Extrabold, sans-serif',
+    $iqser-app-name-font-size: 13px,
+    $iqser-app-name-color: vars.$accent
 );
 
 $light-accent-5: lighten(vars.$accent, 5%);
@@ -135,5 +137,7 @@ $dark-accent-10: darken(vars.$accent, 10%);
     $iqser-highlight-color: #905854,
     $iqser-skeleton-color: vars.$grey-10,
     $iqser-font-family: 'Inter, sans-serif',
-    $iqser-app-name-font-family: 'OpenSans Extrabold, sans-serif'
+    $iqser-app-name-font-family: 'OpenSans Extrabold, sans-serif',
+    $iqser-app-name-font-size: 13px,
+    $iqser-app-name-color: vars.$white
 );
diff --git a/libs/common-ui b/libs/common-ui
index 03d63fc78..d7b80af5b 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 03d63fc78e36cbb36dbaee65bd5638eb3d501eb9
+Subproject commit d7b80af5bb608347f1f6b24b141a851cf11b779d