diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 000000000..39e2c76ea
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "libs/common-ui"]
+	path = libs/common-ui
+	url = https://git.iqser.com/scm/sl/common-ui.git
diff --git a/angular.json b/angular.json
index 95d3aa1c3..aa7773254 100644
--- a/angular.json
+++ b/angular.json
@@ -50,9 +50,14 @@
                 "input": "apps/red-ui/src/assets/",
                 "output": "/assets/"
               },
+              {
+                "glob": "**/*",
+                "input": "libs/common-ui/src/assets/",
+                "output": "/assets/"
+              },
               "apps/red-ui/src/manifest.webmanifest"
             ],
-            "styles": ["apps/red-ui/src/styles.scss"],
+            "styles": ["apps/red-ui/src/styles.scss", "libs/common-ui/src/assets/styles/common.scss"],
             "scripts": ["node_modules/@pdftron/webviewer/webviewer.min.js"],
             "vendorChunk": true,
             "extractLicenses": false,
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 8fe8111a9..d25b81ec6 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
@@ -66,13 +66,13 @@
         </div>
         <div class="menu right flex-2">
             <div class="buttons">
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="openSpotlightSearch()"
                     *ngIf="!isSearchScreen"
                     [icon]="'red:search'"
                     [tooltip]="'search.header-label' | translate"
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
 
                 <redaction-notifications *ngIf="userPreferenceService.areDevFeaturesEnabled"></redaction-notifications>
             </div>
diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.scss b/apps/red-ui/src/app/components/base-screen/base-screen.component.scss
index 12959da2c..b573da15f 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.scss
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.scss
@@ -1,4 +1,4 @@
-@import '../../../assets/styles/red-variables';
+@import '../../../assets/styles/variables';
 @import '../../../assets/styles/red-mixins';
 
 .dev-mode {
diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
index 4ccc08dcc..f41353146 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@@ -22,7 +22,7 @@
                 <!--      Table lines -->
                 <div *cdkVirtualFor="let download of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
                     <div (click)="toggleEntitySelected($event, download)" class="selection-column">
-                        <redaction-round-checkbox [active]="isSelected(download)"></redaction-round-checkbox>
+                        <iqser-round-checkbox [active]="isSelected(download)"></iqser-round-checkbox>
                     </div>
 
                     <div>
@@ -47,22 +47,20 @@
                     </div>
                     <div class="actions-container">
                         <div [class.active]="download.inProgress" class="action-buttons">
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="downloadItem(download)"
                                 *ngIf="download.status === 'READY' && !download.inProgress"
                                 [tooltip]="'downloads-list.actions.download' | translate"
                                 icon="red:download"
-                                type="dark-bg"
-                            >
-                            </redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
 
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="deleteItems([download])"
                                 [tooltip]="'downloads-list.actions.delete' | translate"
                                 icon="red:trash"
-                                type="dark-bg"
-                            >
-                            </redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
 
                             <mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
                         </div>
@@ -75,11 +73,11 @@
 </section>
 
 <ng-template #bulkActions>
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="deleteItems()"
         *ngIf="screenStateService.areSomeEntitiesSelected$ | async"
         [tooltip]="'downloads-list.bulk.delete' | translate"
         icon="red:trash"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 </ng-template>
diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
index 2d998ecb0..6bf3c6a8d 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
@@ -9,6 +9,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 import { SortingService } from '@services/sorting.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-downloads-list-screen',
@@ -17,15 +18,16 @@ import { TableColConfig } from '@shared/components/table-col-name/table-col-name
     providers: [FilterService, SearchService, ScreenStateService, SortingService]
 })
 export class DownloadsListScreenComponent extends BaseListingComponent<DownloadStatusWrapper> implements OnInit {
-    itemSize = 80;
-    tableColConfigs: TableColConfig[] = [
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly itemSize = 80;
+    readonly tableColConfigs: TableColConfig[] = [
         { label: _('downloads-list.table-col-names.name') },
         { label: _('downloads-list.table-col-names.size') },
         { label: _('downloads-list.table-col-names.date') },
         { label: _('downloads-list.table-col-names.status') }
     ];
     protected readonly _primaryKey = 'storageId';
-    protected _tableHeaderLabel = _('downloads-list.table-header.title');
+    protected readonly _tableHeaderLabel = _('downloads-list.table-header.title');
 
     constructor(
         readonly fileDownloadService: FileDownloadService,
diff --git a/apps/red-ui/src/app/components/logo/logo.component.scss b/apps/red-ui/src/app/components/logo/logo.component.scss
index dac4c56ba..2dc42ff64 100644
--- a/apps/red-ui/src/app/components/logo/logo.component.scss
+++ b/apps/red-ui/src/app/components/logo/logo.component.scss
@@ -1,4 +1,4 @@
-@import '../../../assets/styles/red-variables';
+@import '../../../assets/styles/variables';
 
 :host {
     color: $primary;
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.html b/apps/red-ui/src/app/components/notifications/notifications.component.html
index 736aa49b7..df9e2a4ce 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.html
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.html
@@ -1,4 +1,4 @@
-<redaction-circle-button [matMenuTriggerFor]="overlay" [showDot]="hasUnread" icon="red:notification"></redaction-circle-button>
+<iqser-circle-button [matMenuTriggerFor]="overlay" [showDot]="hasUnread" icon="red:notification"></iqser-circle-button>
 <mat-menu #overlay="matMenu" backdropClass="notifications-backdrop" class="notifications-menu" xPosition="before">
     <div *ngFor="let group of groupedNotifications | sortBy: 'desc':'dateString'">
         <div class="all-caps-label">{{ day(group) }}</div>
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.scss b/apps/red-ui/src/app/components/notifications/notifications.component.scss
index 95075e917..9b9bf34d1 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.scss
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.scss
@@ -1,4 +1,4 @@
-@import '../../../assets/styles/red-variables';
+@import '../../../assets/styles/variables';
 
 .mt-2 {
     margin-top: 2px;
diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
index ce8f7bc99..7eeab5d8c 100644
--- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
+++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
@@ -5,12 +5,7 @@
         <ng-container *ngIf="showActions$ | async as showActions">
             <mat-icon class="mr-34" *ngIf="!showActions" [svgIcon]="'red:search'"></mat-icon>
 
-            <redaction-circle-button
-                *ngIf="showActions"
-                class="mr-24"
-                (action)="dialogRef.close()"
-                icon="red:close"
-            ></redaction-circle-button>
+            <iqser-circle-button *ngIf="showActions" class="mr-24" (action)="dialogRef.close()" icon="red:close"></iqser-circle-button>
         </ng-container>
     </div>
 
diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss
index 5f7657fc6..349d5ce01 100644
--- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss
+++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/red-ui/src/assets/styles/red-variables';
+@import '../../../assets/styles/variables';
 
 .spotlight-wrapper {
     overflow: hidden;
@@ -19,7 +19,7 @@
     font-weight: 500;
     border: none;
     outline: none;
-    color: $grey-1;
+    color: $accent;
     padding: 0 24px;
     background-color: $white;
 }
diff --git a/apps/red-ui/src/app/components/toast/toast.component.scss b/apps/red-ui/src/app/components/toast/toast.component.scss
index 93be7acbb..6b1684fa0 100644
--- a/apps/red-ui/src/app/components/toast/toast.component.scss
+++ b/apps/red-ui/src/app/components/toast/toast.component.scss
@@ -1 +1 @@
-@import '../../../assets/styles/red-variables';
+@import '../../../assets/styles/variables';
diff --git a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html
index 84c5a99a5..255cfba5a 100644
--- a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html
+++ b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html
@@ -1,17 +1,17 @@
 <div class="action-buttons">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="openDeleteDossierTemplateDialog($event)"
         *ngIf="permissionsService.isAdmin()"
         [tooltip]="'dossier-templates-listing.action.delete' | translate"
         icon="red:trash"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="openEditDossierTemplateDialog($event)"
         *ngIf="permissionsService.isAdmin()"
         [tooltip]="'dossier-templates-listing.action.edit' | translate"
         icon="red:edit"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 </div>
diff --git a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.scss b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.scss
index eeb99fae7..3a02168bb 100644
--- a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.scss
+++ b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.scss
@@ -1,7 +1,7 @@
 .action-buttons {
     display: flex;
 
-    redaction-circle-button:not(:last-child) {
+    iqser-circle-button:not(:last-child) {
         margin-right: 2px;
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.ts b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.ts
index 3020294f9..6d108c78f 100644
--- a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.ts
+++ b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.ts
@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 import { AdminDialogService } from '../../services/admin-dialog.service';
 import { DossierTemplateControllerService } from '@redaction/red-ui-http';
 import { LoadingService } from '@services/loading.service';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-dossier-template-actions',
@@ -12,6 +13,8 @@ import { LoadingService } from '@services/loading.service';
     styleUrls: ['./dossier-template-actions.component.scss']
 })
 export class DossierTemplateActionsComponent {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     @Input() dossierTemplateId: string;
     @Output() loadDossierTemplatesData = new EventEmitter<any>();
 
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 88d0709fb..06a3f9e7c 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,21 +1,21 @@
 <div class="collapsed-wrapper">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="toggleCollapse.emit()"
         [tooltip]="'user-stats.expand' | translate"
         icon="red:expand"
         tooltipPosition="before"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
     <div class="all-caps-label" translate="user-stats.title"></div>
 </div>
 
 <div class="header-wrapper mt-8">
     <div class="heading-xl flex-1" translate="user-stats.title"></div>
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="toggleCollapse.emit()"
         [tooltip]="'user-stats.collapse' | translate"
         icon="red:collapse"
         tooltipPosition="before"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 </div>
 
 <div class="mt-44">
diff --git a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.scss b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.scss
index 8938e46bf..11153dd15 100644
--- a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.scss
+++ b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.scss
@@ -7,7 +7,7 @@
         max-width: 88%;
     }
 
-    redaction-circle-button {
+    iqser-circle-button {
         position: absolute;
         top: -8px;
         left: 270px;
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 f0693271a..91b00e51d 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
@@ -96,5 +96,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
index c5eefa9a6..ee380a74f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .first-row {
     display: flex;
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
index 5a4f29102..5c2678992 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
@@ -41,5 +41,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
index 73a61f3a2..c761b964d 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
@@ -1,26 +1,23 @@
 import { Component, Inject, OnDestroy } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { DossierAttributeConfig, FileAttributeConfig } from '@redaction/red-ui-http';
-import { AppStateService } from '@state/app-state.service';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { LoadingService } from '@services/loading.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Toaster } from '@services/toaster.service';
-import { AutoUnsubscribeComponent } from '@shared/base/auto-unsubscribe.component';
 import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
 import { dossierAttributeTypesTranslations } from '../../translations/dossier-attribute-types-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { AutoUnsubscribeComponent } from '@iqser/common-ui';
 
 @Component({
-    selector: 'redaction-add-edit-dossier-attribute-dialog',
     templateUrl: './add-edit-dossier-attribute-dialog.component.html',
     styleUrls: ['./add-edit-dossier-attribute-dialog.component.scss']
 })
 export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribeComponent implements OnDestroy {
     dossierAttributeForm: FormGroup;
     dossierAttribute: DossierAttributeConfig;
-    translations = dossierAttributeTypesTranslations;
-    dossierTemplateId: string;
+    readonly translations = dossierAttributeTypesTranslations;
     readonly typeOptions = [
         DossierAttributeConfig.TypeEnum.TEXT,
         DossierAttributeConfig.TypeEnum.NUMBER,
@@ -29,18 +26,16 @@ export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribeCompo
     ];
 
     constructor(
-        private readonly _appStateService: AppStateService,
         private readonly _formBuilder: FormBuilder,
         private readonly _loadingService: LoadingService,
         private readonly _dossierAttributesService: DossierAttributesService,
         private readonly _toaster: Toaster,
-        public dialogRef: MatDialogRef<AddEditDossierAttributeDialogComponent>,
+        readonly dialogRef: MatDialogRef<AddEditDossierAttributeDialogComponent>,
         @Inject(MAT_DIALOG_DATA)
-        public data: { dossierAttribute: DossierAttributeConfig; dossierTemplateId: string }
+        readonly data: { readonly dossierAttribute: DossierAttributeConfig }
     ) {
         super();
         this.dossierAttribute = data.dossierAttribute;
-        this.dossierTemplateId = data.dossierTemplateId;
 
         this.dossierAttributeForm = this._formBuilder.group({
             label: [this.dossierAttribute?.label, Validators.required],
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html
index e659f5a22..7b9674c1f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html
@@ -110,7 +110,7 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
 
 <ng-template #reportTemplateOptionTemplate let-option="option">
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
index d2dba3279..58077d3e8 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
@@ -60,5 +60,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-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 6cf1ed70c..fe02bd8db 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
@@ -13,5 +13,5 @@
         [user]="user"
     ></redaction-reset-password>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html
index a770d5ae2..d7bb85d6b 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html
@@ -45,13 +45,13 @@
             {{ (user ? 'add-edit-user.actions.save-changes' : 'add-edit-user.actions.save') | translate }}
         </button>
 
-        <redaction-icon-button
+        <iqser-icon-button
             (action)="delete()"
             *ngIf="user"
             [label]="'add-edit-user.actions.delete' | translate"
             icon="red:trash"
-            type="show-bg"
-        ></redaction-icon-button>
+            [type]="iconButtonTypes.dark"
+        ></iqser-icon-button>
 
         <div class="all-caps-label cancel" mat-dialog-close translate="add-edit-user.actions.cancel"></div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts
index 3fe562f79..617d32a01 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts
@@ -4,6 +4,7 @@ import { User, UserControllerService } from '@redaction/red-ui-http';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
 import { LoadingService } from '@services/loading.service';
 import { rolesTranslations } from '../../../../../translations/roles-translations';
+import { IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-user-details',
@@ -11,12 +12,14 @@ import { rolesTranslations } from '../../../../../translations/roles-translation
     styleUrls: ['./user-details.component.scss']
 })
 export class UserDetailsComponent implements OnInit {
+    readonly iconButtonTypes = IconButtonTypes;
+
     @Input() user: User;
     @Output() toggleResetPassword = new EventEmitter();
     @Output() closeDialog = new EventEmitter<any>();
     userForm: FormGroup;
     readonly ROLES = ['RED_USER', 'RED_MANAGER', 'RED_USER_ADMIN', 'RED_ADMIN'];
-    translations = rolesTranslations;
+    readonly translations = rolesTranslations;
     private readonly _ROLE_REQUIREMENTS = { RED_MANAGER: 'RED_USER', RED_ADMIN: 'RED_USER_ADMIN' };
 
     constructor(
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 91c3cc26b..f690a3eb1 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
@@ -41,5 +41,5 @@
             class="all-caps-label cancel"
         ></div>
     </div>
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-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.scss b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.scss
index ddf782c9b..2e2ff968a 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .dialog-header {
     color: $primary;
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 47014fd58..2344dc113 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
@@ -39,5 +39,5 @@
             class="all-caps-label cancel"
         ></div>
     </div>
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.scss
index ddf782c9b..2e2ff968a 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .dialog-header {
     color: $primary;
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 bcfc453fd..57dea97ff 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
@@ -34,5 +34,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-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 7931d54a7..e036c7165 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
@@ -1,34 +1,34 @@
 <div class="header-item">
-    <redaction-round-checkbox
+    <iqser-round-checkbox
         (click)="toggleSelectAll()"
         [active]="screenStateService.areAllEntitiesSelected$ | async"
         [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-    ></redaction-round-checkbox>
+    ></iqser-round-checkbox>
     <span class="all-caps-label">
         {{ 'file-attributes-csv-import.table-header.title' | translate: { length: (screenStateService.allEntitiesLength$ | async) } }}
     </span>
 
     <ng-container *ngIf="screenStateService.areSomeEntitiesSelected$ | async">
-        <redaction-circle-button
+        <iqser-circle-button
             [matMenuTriggerFor]="readOnlyMenu"
             [tooltip]="'file-attributes-csv-import.table-header.actions.read-only' | translate"
             icon="red:read-only"
-            type="dark-bg"
-        ></redaction-circle-button>
+            [type]="circleButtonTypes.dark"
+        ></iqser-circle-button>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="deactivateSelection()"
             [tooltip]="'file-attributes-csv-import.table-header.actions.remove-selected' | translate"
             icon="red:trash"
-            type="dark-bg"
-        ></redaction-circle-button>
+            [type]="circleButtonTypes.dark"
+        ></iqser-circle-button>
 
         <div class="separator"></div>
 
-        <redaction-chevron-button
+        <iqser-chevron-button
             [label]="'file-attributes-csv-import.table-header.actions.type' | translate"
             [matMenuTriggerFor]="typeMenu"
-        ></redaction-chevron-button>
+        ></iqser-chevron-button>
 
         <mat-menu #readOnlyMenu="matMenu" class="padding-bottom-8">
             <button
@@ -93,7 +93,7 @@
         class="table-item"
     >
         <div (click)="toggleEntitySelected($event, field)" class="selection-column">
-            <redaction-round-checkbox [active]="isSelected(field)"></redaction-round-checkbox>
+            <iqser-round-checkbox [active]="isSelected(field)"></iqser-round-checkbox>
         </div>
         <div [class.editing]="field.editingName" class="name">
             <div *ngIf="!field.editingName">
@@ -104,27 +104,27 @@
                     <input [(ngModel)]="field.temporaryName" name="name" />
                 </div>
             </form>
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="field.editingName = true"
                 *ngIf="!field.editingName"
                 [tooltip]="'file-attributes-csv-import.action.edit-name' | translate"
                 class="edit-name-button"
                 icon="red:edit"
-                type="dark-bg"
-            ></redaction-circle-button>
+                [type]="circleButtonTypes.dark"
+            ></iqser-circle-button>
             <ng-container *ngIf="field.editingName">
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="field.editingName = false; field.name = field.temporaryName"
                     [tooltip]="'file-attributes-csv-import.action.save-name' | translate"
                     icon="red:check"
-                    type="dark-bg"
-                ></redaction-circle-button>
-                <redaction-circle-button
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
+                <iqser-circle-button
                     (action)="field.editingName = false; field.temporaryName = field.name"
                     [tooltip]="'file-attributes-csv-import.action.cancel-edit-name' | translate"
                     icon="red:close"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
             </ng-container>
         </div>
         <div>
@@ -142,17 +142,17 @@
             <mat-slide-toggle [(ngModel)]="field.readonly" color="primary"></mat-slide-toggle>
         </div>
         <div class="center">
-            <redaction-round-checkbox (click)="togglePrimary(field)" [active]="field.primaryAttribute"></redaction-round-checkbox>
+            <iqser-round-checkbox (click)="togglePrimary(field)" [active]="field.primaryAttribute"></iqser-round-checkbox>
         </div>
         <div class="actions-container">
             <div class="action-buttons">
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="field.primaryAttribute = false; toggleFieldActive.emit(field)"
                     [removeTooltip]="true"
                     [tooltip]="'file-attributes-csv-import.action.remove' | translate"
                     icon="red:trash"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
             </div>
         </div>
         <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
index 08c1ffaad..300d530d8 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../assets/styles/red-variables';
+@import '../../../../../../assets/styles/variables';
 
 redaction-table-col-name::ng-deep {
     > div {
@@ -19,7 +19,7 @@ redaction-table-col-name::ng-deep {
         margin-right: 10px;
     }
 
-    redaction-circle-button {
+    iqser-circle-button {
         margin-right: 2px;
     }
 
@@ -63,7 +63,7 @@ cdk-virtual-scroll-viewport {
                         display: none;
                     }
 
-                    redaction-circle-button:first-of-type {
+                    iqser-circle-button:first-of-type {
                         margin-left: 7px;
                         margin-right: 2px;
                     }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
index 2e7c9cd95..ae2334ee7 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
@@ -7,6 +7,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 import { SortingService } from '@services/sorting.service';
 import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { fileAttributeTypesTranslations } from '../../../translations/file-attribute-types-translations';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-active-fields-listing',
@@ -15,11 +16,13 @@ import { fileAttributeTypesTranslations } from '../../../translations/file-attri
     providers: [FilterService, SearchService, ScreenStateService, SortingService]
 })
 export class ActiveFieldsListingComponent extends BaseListingComponent<Field> implements OnChanges {
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly translations = fileAttributeTypesTranslations;
+
     @Input() entities: Field[];
     @Output() entitiesChange = new EventEmitter<Field[]>();
     @Output() setHoveredColumn = new EventEmitter<string>();
     @Output() toggleFieldActive = new EventEmitter<Field>();
-    translations = fileAttributeTypesTranslations;
 
     readonly typeOptions = [FileAttributeConfig.TypeEnum.TEXT, FileAttributeConfig.TypeEnum.NUMBER, FileAttributeConfig.TypeEnum.DATE];
     protected readonly _primaryKey = 'csvColumn';
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 1e140d174..5ff6e9262 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
@@ -48,12 +48,12 @@
                             type="text"
                         />
                     </div>
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (action)="readFile()"
                         *ngIf="changedParseConfig"
                         [tooltip]="'file-attributes-csv-import.parse-csv' | translate"
                         icon="red:check"
-                    ></redaction-circle-button>
+                    ></iqser-circle-button>
                 </form>
             </div>
         </div>
@@ -69,11 +69,11 @@
                         }}</span>
                     </div>
                     <div class="actions">
-                        <redaction-circle-button
+                        <iqser-circle-button
                             (click)="isSearchOpen = !isSearchOpen"
                             [attr.aria-expanded]="isSearchOpen"
                             icon="red:search"
-                        ></redaction-circle-button>
+                        ></iqser-circle-button>
                         <div class="quick-activation">
                             <span
                                 (click)="activateAll()"
@@ -127,10 +127,10 @@
             >
                 <div class="csv-part-header">
                     <div [translate]="'file-attributes-csv-import.csv-column'" class="all-caps-label"></div>
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (click)="previewExpanded = !previewExpanded"
                         [icon]="previewExpanded ? 'red:expand' : 'red:collapse'"
-                    ></redaction-circle-button>
+                    ></iqser-circle-button>
                 </div>
                 <div [class.hidden]="!previewExpanded" class="csv-part-content">
                     <div *ngIf="!hoveredColumn" class="no-column-data" translate="file-attributes-csv-import.no-hovered-column"></div>
@@ -162,5 +162,5 @@
         </div>
     </div>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
index fa5bc1e46..dd2648c3a 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 .sub-header {
@@ -37,7 +37,7 @@
             margin: 0 8px;
         }
 
-        redaction-circle-button {
+        iqser-circle-button {
             margin-left: 8px;
         }
     }
@@ -174,7 +174,7 @@
         background: $grey-2;
         border-right: 1px solid $separator;
 
-        &:not(.collapsed) redaction-circle-button {
+        &:not(.collapsed) iqser-circle-button {
             margin-right: -8px;
         }
 
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 233615737..cc8b9ed6e 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
@@ -27,5 +27,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
index 5a7783652..c72caa634 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@@ -8,14 +8,14 @@
             <div class="breadcrumb" translate="audit"></div>
 
             <div class="actions">
-                <redaction-circle-button
+                <iqser-circle-button
                     *ngIf="permissionsService.isUser()"
                     [tooltip]="'common.close' | translate"
                     class="ml-6"
                     icon="red:close"
                     redactionNavigateLastDossiersScreen
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
             </div>
         </div>
         <div class="red-content-inner">
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts
index 7e1e3bdaa..1ef28c086 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts
@@ -5,7 +5,7 @@ import { AuditControllerService, AuditResponse, AuditSearchRequest } from '@reda
 import { Moment } from 'moment';
 import { applyIntervalConstraints } from '@utils/date-inputs-utils';
 import { LoadingService } from '@services/loading.service';
-import { AutoUnsubscribeComponent } from '@shared/base/auto-unsubscribe.component';
+import { AutoUnsubscribeComponent } from '@iqser/common-ui';
 import { auditCategoriesTranslations } from '../../translations/audit-categories-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
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 42baf8f09..13f4e0f18 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,12 +5,12 @@
         <div class="flex-1 actions">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
@@ -55,13 +55,13 @@
 
                     <div class="actions-container">
                         <div class="action-buttons">
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="openEditColorDialog($event, color)"
                                 *ngIf="permissionsService.isAdmin()"
                                 [tooltip]="'default-colors-screen.action.edit' | translate"
                                 icon="red:edit"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
                         </div>
                     </div>
                     <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
index 5dae2be05..5b221c678 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
@@ -12,6 +12,7 @@ import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { DefaultColorType } from '@models/default-color-key.model';
 import { SortingService } from '@services/sorting.service';
 import { defaultColorsTranslations } from '../../translations/default-colors-translations';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './default-colors-screen.component.html',
@@ -26,7 +27,8 @@ export class DefaultColorsScreenComponent
     }>
     implements OnInit
 {
-    translations = defaultColorsTranslations;
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly translations = defaultColorsTranslations;
     protected readonly _primaryKey = 'key';
     private _colorsObj: Colors;
 
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 7cbbd7459..972b7fc2b 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
@@ -5,12 +5,12 @@
         <div class="flex-1 actions">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
@@ -21,23 +21,23 @@
 
         <div class="content-container">
             <div class="header-item">
-                <redaction-round-checkbox
+                <iqser-round-checkbox
                     (click)="toggleSelectAll()"
                     [active]="screenStateService.areAllEntitiesSelected$ | async"
                     [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                ></redaction-round-checkbox>
+                ></iqser-round-checkbox>
 
                 <span class="all-caps-label">
                     {{ 'dictionary-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
                 </span>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="openDeleteDictionariesDialog($event)"
                     *ngIf="canBulkDelete$(permissionsService.isAdmin()) | async"
                     [tooltip]="'dictionary-listing.bulk.delete' | translate"
                     icon="red:trash"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
 
                 <div class="attributes-actions-container">
                     <redaction-input-with-action
@@ -46,13 +46,13 @@
                         type="search"
                     ></redaction-input-with-action>
                     <div class="actions">
-                        <redaction-icon-button
+                        <iqser-icon-button
                             (action)="openAddEditDictionaryDialog()"
                             *ngIf="permissionsService.isAdmin()"
                             [label]="'dictionary-listing.add-new' | translate"
                             icon="red:plus"
-                            type="primary"
-                        ></redaction-icon-button>
+                            [type]="iconButtonTypes.primary"
+                        ></iqser-icon-button>
                     </div>
                 </div>
             </div>
@@ -102,7 +102,7 @@
                     class="table-item pointer"
                 >
                     <div (click)="toggleEntitySelected($event, dict)" class="selection-column">
-                        <redaction-round-checkbox [active]="isSelected(dict)"></redaction-round-checkbox>
+                        <iqser-round-checkbox [active]="isSelected(dict)"></iqser-round-checkbox>
                     </div>
 
                     <div>
@@ -134,19 +134,19 @@
 
                     <div class="actions-container">
                         <div *ngIf="permissionsService.isAdmin()" class="action-buttons">
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="openDeleteDictionariesDialog($event, [dict])"
                                 [tooltip]="'dictionary-listing.action.delete' | translate"
                                 icon="red:trash"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
 
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="openAddEditDictionaryDialog($event, dict)"
                                 [tooltip]="'dictionary-listing.action.edit' | translate"
                                 icon="red:edit"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
                         </div>
                     </div>
                     <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
index e49e5d61f..950836853 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 .header-item {
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
index d0cb34314..dee236df5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
@@ -15,6 +15,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 import { SortingService } from '@services/sorting.service';
 import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { AdminDialogService } from '../../services/admin-dialog.service';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 const toChartConfig = (dict: TypeValueWrapper): DoughnutChartConfig => ({
     value: dict.entries?.length ?? 0,
@@ -29,6 +30,9 @@ const toChartConfig = (dict: TypeValueWrapper): DoughnutChartConfig => ({
     providers: [FilterService, SearchService, ScreenStateService, SortingService]
 })
 export class DictionaryListingScreenComponent extends BaseListingComponent<TypeValueWrapper> implements OnInit {
+    readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
+
     chartData: DoughnutChartConfig[] = [];
 
     protected readonly _primaryKey = 'label';
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 d5b568d83..808f064d6 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
@@ -3,48 +3,48 @@
         <redaction-admin-breadcrumbs></redaction-admin-breadcrumbs>
 
         <div class="actions">
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="openDeleteDictionaryDialog($event)"
                 *ngIf="permissionsService.isAdmin()"
                 [tooltip]="'dictionary-overview.action.delete' | translate"
                 icon="red:trash"
                 tooltipPosition="below"
-                type="dark-bg"
-            ></redaction-circle-button>
+                [type]="circleButtonTypes.dark"
+            ></iqser-circle-button>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="openEditDictionaryDialog($event)"
                 *ngIf="permissionsService.isAdmin()"
                 [tooltip]="'dictionary-overview.action.edit' | translate"
                 icon="red:edit"
                 tooltipPosition="below"
-                type="dark-bg"
-            ></redaction-circle-button>
+                [type]="circleButtonTypes.dark"
+            ></iqser-circle-button>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="download()"
                 [tooltip]="'dictionary-overview.action.download' | translate"
                 icon="red:download"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="fileInput.click()"
                 *ngIf="permissionsService.isAdmin()"
                 [tooltip]="'dictionary-overview.action.upload' | translate"
                 icon="red:upload"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
 
             <input #fileInput (change)="upload($event)" accept="text/plain" class="file-upload-input" hidden type="file" />
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['..']"
                 [tooltip]="'common.close' | translate"
                 class="ml-6"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </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 70de05190..b35b035bc 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
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 .right-container {
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts
index 3d0d9cce9..7b1279a95 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts
@@ -11,13 +11,15 @@ import { DictionaryManagerComponent } from '@shared/components/dictionary-manage
 import { DictionarySaveService } from '@shared/services/dictionary-save.service';
 import { TypeValueWrapper } from '@models/file/type-value.wrapper';
 import { LoadingService } from '@services/loading.service';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
-    selector: 'redaction-dictionary-overview-screen',
     templateUrl: './dictionary-overview-screen.component.html',
     styleUrls: ['./dictionary-overview-screen.component.scss']
 })
 export class DictionaryOverviewScreenComponent extends ComponentHasChanges implements OnInit {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     entries: string[] = [];
 
     @ViewChild('dictionaryManager', { static: false })
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
index fd0ba0385..1d9216985 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
@@ -73,21 +73,21 @@
                         </div>
 
                         <div [class.hidden]="!hasDigitalSignatureSet" class="changes-box">
-                            <redaction-icon-button
+                            <iqser-icon-button
                                 (action)="saveDigitalSignature()"
                                 [disabled]="digitalSignatureForm.invalid"
                                 [label]="'digital-signature-screen.action.save' | translate"
                                 icon="red:check"
-                                type="primary"
-                            ></redaction-icon-button>
+                                [type]="iconButtonTypes.primary"
+                            ></iqser-icon-button>
 
-                            <redaction-icon-button
+                            <iqser-icon-button
                                 (action)="removeDigitalSignature()"
                                 *ngIf="digitalSignatureExists"
                                 [label]="'digital-signature-screen.action.delete' | translate"
                                 icon="red:trash"
-                                type="primary"
-                            ></redaction-icon-button>
+                                [type]="iconButtonTypes.primary"
+                            ></iqser-icon-button>
 
                             <div
                                 (click)="loadDigitalSignatureAndInitializeForm()"
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
index a6a0955e6..fd7e1d919 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
@@ -4,9 +4,10 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Toaster } from '@services/toaster.service';
 import { PermissionsService } from '@services/permissions.service';
 import { lastIndexOfEnd } from '@utils/functions';
-import { AutoUnsubscribeComponent } from '@shared/base/auto-unsubscribe.component';
+import { AutoUnsubscribeComponent } from '@iqser/common-ui';
 import { LoadingService } from '@services/loading.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-digital-signature-screen',
@@ -14,6 +15,8 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
     styleUrls: ['./digital-signature-screen.component.scss']
 })
 export class DigitalSignatureScreenComponent extends AutoUnsubscribeComponent implements OnDestroy {
+    readonly iconButtonTypes = IconButtonTypes;
+
     digitalSignature: DigitalSignature;
     digitalSignatureForm: FormGroup;
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index ea9deed98..cfad15a4d 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -5,12 +5,12 @@
         <div class="actions flex-1">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
@@ -21,11 +21,11 @@
 
         <div class="content-container">
             <div *ngIf="(screenStateService.noData$ | async) === false" class="header-item">
-                <redaction-round-checkbox
+                <iqser-round-checkbox
                     (click)="toggleSelectAll()"
                     [active]="screenStateService.areAllEntitiesSelected$ | async"
                     [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                ></redaction-round-checkbox>
+                ></iqser-round-checkbox>
 
                 <span class="all-caps-label">
                     {{
@@ -34,13 +34,13 @@
                     }}
                 </span>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="openConfirmDeleteAttributeDialog($event)"
                     *ngIf="permissionsService.isAdmin() && screenStateService.areSomeEntitiesSelected$ | async"
                     [tooltip]="'dossier-attributes-listing.bulk.delete' | translate"
                     icon="red:trash"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
 
                 <div class="attributes-actions-container">
                     <redaction-input-with-action
@@ -49,13 +49,13 @@
                         type="search"
                     ></redaction-input-with-action>
 
-                    <redaction-icon-button
+                    <iqser-icon-button
                         (action)="openAddEditAttributeDialog($event)"
                         *ngIf="permissionsService.isAdmin()"
                         [label]="'dossier-attributes-listing.add-new' | translate"
                         icon="red:plus"
-                        type="primary"
-                    ></redaction-icon-button>
+                        [type]="iconButtonTypes.primary"
+                    ></iqser-icon-button>
                 </div>
             </div>
 
@@ -102,7 +102,7 @@
                     class="table-item pointer"
                 >
                     <div (click)="toggleEntitySelected($event, attribute)" class="selection-column">
-                        <redaction-round-checkbox [active]="isSelected(attribute)"></redaction-round-checkbox>
+                        <iqser-round-checkbox [active]="isSelected(attribute)"></iqser-round-checkbox>
                     </div>
 
                     <div>
@@ -118,19 +118,19 @@
                     </div>
                     <div class="actions-container">
                         <div *ngIf="permissionsService.isAdmin()" class="action-buttons">
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="openAddEditAttributeDialog($event, attribute)"
                                 [tooltip]="'dossier-attributes-listing.action.edit' | translate"
                                 icon="red:edit"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
 
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="openConfirmDeleteAttributeDialog($event, attribute)"
                                 [tooltip]="'dossier-attributes-listing.action.delete' | translate"
                                 icon="red:trash"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
                         </div>
                     </div>
                     <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
index 3feeccebc..95478125f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
@@ -12,6 +12,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 import { PermissionsService } from '@services/permissions.service';
 import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
 import { dossierAttributeTypesTranslations } from '../../translations/dossier-attribute-types-translations';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './dossier-attributes-listing-screen.component.html',
@@ -19,7 +20,9 @@ import { dossierAttributeTypesTranslations } from '../../translations/dossier-at
     providers: [FilterService, SearchService, ScreenStateService, SortingService]
 })
 export class DossierAttributesListingScreenComponent extends BaseListingComponent<DossierAttributeConfig> implements OnInit {
-    translations = dossierAttributeTypesTranslations;
+    readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly translations = dossierAttributeTypesTranslations;
     protected readonly _primaryKey = 'label';
 
     constructor(
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
index c2bf9a694..ed7af38bd 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
@@ -12,11 +12,11 @@
         <div class="red-content-inner">
             <div class="content-container">
                 <div class="header-item">
-                    <redaction-round-checkbox
+                    <iqser-round-checkbox
                         (click)="toggleSelectAll()"
                         [active]="screenStateService.areAllEntitiesSelected$ | async"
                         [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                    ></redaction-round-checkbox>
+                    ></iqser-round-checkbox>
 
                     <span class="all-caps-label">
                         {{
@@ -25,13 +25,13 @@
                         }}
                     </span>
 
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (action)="openDeleteTemplatesDialog($event)"
                         *ngIf="canBulkDelete$(permissionsService.isAdmin()) | async"
                         [tooltip]="'dossier-templates-listing.bulk.delete' | translate"
                         icon="red:trash"
-                        type="dark-bg"
-                    ></redaction-circle-button>
+                        [type]="circleButtonTypes.dark"
+                    ></iqser-circle-button>
 
                     <div class="actions flex-1">
                         <redaction-input-with-action
@@ -40,13 +40,13 @@
                             type="search"
                         ></redaction-input-with-action>
 
-                        <redaction-icon-button
+                        <iqser-icon-button
                             (action)="openAddDossierTemplateDialog()"
                             *ngIf="permissionsService.isAdmin() && userPreferenceService.areDevFeaturesEnabled"
                             [label]="'dossier-templates-listing.add-new' | translate"
                             icon="red:plus"
-                            type="primary"
-                        ></redaction-icon-button>
+                            [type]="iconButtonTypes.primary"
+                        ></iqser-icon-button>
                     </div>
                 </div>
 
@@ -94,7 +94,7 @@
                         class="table-item pointer"
                     >
                         <div (click)="toggleEntitySelected($event, dossierTemplate)" class="selection-column">
-                            <redaction-round-checkbox [active]="isSelected(dossierTemplate)"></redaction-round-checkbox>
+                            <iqser-round-checkbox [active]="isSelected(dossierTemplate)"></iqser-round-checkbox>
                         </div>
 
                         <div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss
index e602d688d..6fd6360f8 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 .header-item {
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
index 588e394e8..334b0753a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
@@ -11,6 +11,7 @@ import { SearchService } from '@shared/services/search.service';
 import { ScreenStateService } from '@shared/services/screen-state.service';
 import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { SortingService } from '@services/sorting.service';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './dossier-templates-listing-screen.component.html',
@@ -19,7 +20,9 @@ import { SortingService } from '@services/sorting.service';
     providers: [FilterService, SearchService, ScreenStateService, SortingService]
 })
 export class DossierTemplatesListingScreenComponent extends BaseListingComponent<DossierTemplateModelWrapper> implements OnInit {
-    protected _primaryKey = 'name';
+    readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
+    protected readonly _primaryKey = 'name';
 
     constructor(
         private readonly _dialogService: AdminDialogService,
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 8391272b9..69db731d0 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
@@ -5,12 +5,12 @@
         <div class="actions flex-1">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
@@ -21,11 +21,11 @@
 
         <div class="content-container">
             <div class="header-item">
-                <redaction-round-checkbox
+                <iqser-round-checkbox
                     (click)="toggleSelectAll()"
                     [active]="screenStateService.areAllEntitiesSelected$ | async"
                     [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                ></redaction-round-checkbox>
+                ></iqser-round-checkbox>
 
                 <span class="all-caps-label">
                     {{
@@ -33,13 +33,13 @@
                     }}
                 </span>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (click)="openConfirmDeleteAttributeDialog($event)"
                     *ngIf="canBulkDelete$(permissionsService.isAdmin()) | async"
                     [tooltip]="'file-attributes-listing.bulk-actions.delete' | translate"
                     icon="red:trash"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
 
                 <div class="attributes-actions-container">
                     <redaction-input-with-action
@@ -49,22 +49,22 @@
                     ></redaction-input-with-action>
                     <input #fileInput (change)="importCSV($event.target['files'])" accept=".csv" class="csv-input" type="file" />
 
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (action)="fileInput.click()"
                         *ngIf="permissionsService.isAdmin()"
                         [tooltip]="'file-attributes-listing.upload-csv' | translate"
                         icon="red:upload"
                         tooltipPosition="above"
-                        type="dark-bg"
-                    ></redaction-circle-button>
+                        [type]="circleButtonTypes.dark"
+                    ></iqser-circle-button>
 
-                    <redaction-icon-button
+                    <iqser-icon-button
                         (action)="openAddEditAttributeDialog($event)"
                         *ngIf="permissionsService.isAdmin()"
                         [label]="'file-attributes-listing.add-new' | translate"
                         icon="red:plus"
-                        type="primary"
-                    ></redaction-icon-button>
+                        [type]="iconButtonTypes.primary"
+                    ></iqser-icon-button>
                 </div>
             </div>
 
@@ -121,7 +121,7 @@
                 <!--      Table lines -->
                 <div *cdkVirtualFor="let attribute of sortedDisplayedEntities$ | async" class="table-item">
                     <div (click)="toggleEntitySelected($event, attribute)" class="selection-column">
-                        <redaction-round-checkbox [active]="isSelected(attribute)"></redaction-round-checkbox>
+                        <iqser-round-checkbox [active]="isSelected(attribute)"></iqser-round-checkbox>
                     </div>
 
                     <div class="label">
@@ -142,24 +142,22 @@
                         {{ attribute.csvColumnHeader }}
                     </div>
                     <div class="center">
-                        <redaction-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></redaction-round-checkbox>
+                        <iqser-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></iqser-round-checkbox>
                     </div>
                     <div class="actions-container">
                         <div *ngIf="permissionsService.isAdmin()" class="action-buttons">
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="openAddEditAttributeDialog($event, attribute)"
                                 [tooltip]="'file-attributes-listing.action.edit' | translate"
                                 icon="red:edit"
-                                type="dark-bg"
-                            >
-                            </redaction-circle-button>
-                            <redaction-circle-button
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
+                            <iqser-circle-button
                                 (action)="openConfirmDeleteAttributeDialog($event, attribute)"
                                 [tooltip]="'file-attributes-listing.action.delete' | translate"
                                 icon="red:trash"
-                                type="dark-bg"
-                            >
-                            </redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
                         </div>
                     </div>
                     <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
index 239036305..b4d8ef8d5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
@@ -67,6 +67,6 @@ redaction-table-col-name::ng-deep {
     visibility: hidden;
 }
 
-.table-item > div:not(.selection-column) redaction-round-checkbox {
+.table-item > div:not(.selection-column) iqser-round-checkbox {
     cursor: default;
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
index 32d0425ae..db387dac8 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
@@ -11,6 +11,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 import { SortingService } from '@services/sorting.service';
 import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { fileAttributeTypesTranslations } from '../../translations/file-attribute-types-translations';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './file-attributes-listing-screen.component.html',
@@ -19,7 +20,9 @@ import { fileAttributeTypesTranslations } from '../../translations/file-attribut
     providers: [FilterService, SearchService, ScreenStateService, SortingService]
 })
 export class FileAttributesListingScreenComponent extends BaseListingComponent<FileAttributeConfig> implements OnInit, OnDestroy {
-    translations = fileAttributeTypesTranslations;
+    readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly translations = fileAttributeTypesTranslations;
     protected readonly _primaryKey = 'label';
     private _existingConfiguration: FileAttributesConfig;
     @ViewChild('fileInput') private _fileInput: ElementRef;
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html
index 05dae7061..f09d283db 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html
@@ -8,14 +8,14 @@
             <div class="breadcrumb" translate="configurations"></div>
 
             <div class="actions">
-                <redaction-circle-button
+                <iqser-circle-button
                     *ngIf="permissionsService.isUser()"
                     class="ml-6"
                     icon="red:close"
                     redactionNavigateLastDossiersScreen
                     tooltip="common.close"
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
             </div>
         </div>
 
@@ -164,12 +164,12 @@
                                 {{ 'general-config-screen.actions.save' | translate }}
                             </button>
 
-                            <redaction-icon-button
+                            <iqser-icon-button
                                 (action)="testConnection()"
                                 [disabled]="smtpForm.invalid"
                                 [label]="'general-config-screen.actions.test-connection' | translate"
-                                type="show-bg"
-                            ></redaction-icon-button>
+                                [type]="iconButtonTypes.dark"
+                            ></iqser-icon-button>
                         </div>
                     </form>
                 </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss
index 581e22a78..bfb1f492d 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 .content-container {
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts
index 7b616319c..fe4884d8e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AdminDialogService } from '../../services/admin-dialog.service';
@@ -8,20 +8,22 @@ import {
     SmtpConfigurationControllerService,
     SMTPConfigurationModel
 } from '@redaction/red-ui-http';
-import { AppConfigService } from '../../../app-config/app-config.service';
-import { AutoUnsubscribeComponent } from '../../../shared/base/auto-unsubscribe.component';
-import { Toaster } from '../../../../services/toaster.service';
-import { LoadingService } from '../../../../services/loading.service';
+import { AppConfigService } from '@app-config/app-config.service';
+import { AutoUnsubscribeComponent } from '@iqser/common-ui';
+import { Toaster } from '@services/toaster.service';
+import { LoadingService } from '@services/loading.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-general-config-screen',
     templateUrl: './general-config-screen.component.html',
     styleUrls: ['./general-config-screen.component.scss']
 })
-export class GeneralConfigScreenComponent extends AutoUnsubscribeComponent implements OnInit {
-    configForm: FormGroup;
-    smtpForm: FormGroup;
+export class GeneralConfigScreenComponent extends AutoUnsubscribeComponent implements OnInit, OnDestroy {
+    readonly iconButtonTypes = IconButtonTypes;
+    readonly configForm: FormGroup;
+    readonly smtpForm: FormGroup;
 
     private _initialGeneralConfiguration: GeneralConfigurationModel;
     private _initialSMTPConfiguration: SMTPConfigurationModel;
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
index 8c49b89fc..0138500ea 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
@@ -1,5 +1,5 @@
 @import '../../../../../assets/styles/red-mixins';
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .content-container {
     overflow: auto;
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts
index 112675cae..73c972123 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts
@@ -4,9 +4,9 @@ import { LicenseReport, LicenseReportControllerService } from '@redaction/red-ui
 import { AppConfigService } from '@app-config/app-config.service';
 import * as moment from 'moment';
 import { TranslateService } from '@ngx-translate/core';
-import { LoadingService } from '@services/loading.service';
-import { ButtonConfig } from '@shared/components/page-header/models/button-config.model';
-import { IconButtonTypes } from '@shared/components/buttons/icon-button/icon-button.component';
+import { LoadingService } from '../../../../services/loading.service';
+import { ButtonConfig } from '../../../shared/components/page-header/models/button-config.model';
+import { IconButtonTypes } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
@@ -38,7 +38,7 @@ export class LicenseInformationScreenComponent implements OnInit {
         {
             label: _('license-info-screen.email-report'),
             action: () => this.sendMail(),
-            type: IconButtonTypes.PRIMARY
+            type: IconButtonTypes.primary
         }
     ];
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html
index c80a5168a..80a3fe7c6 100644
--- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html
@@ -5,12 +5,12 @@
         <div class="actions flex-1">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
@@ -44,12 +44,12 @@
         <div class="right-container" redactionHasScrollbar>
             <div class="header">
                 <div class="heading" translate="reports-screen.report-documents"></div>
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="fileInput.click()"
                     *ngIf="permissionsService.isAdmin()"
                     [tooltip]="'reports-screen.upload-document' | translate"
                     icon="red:upload"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
             </div>
 
             <div
@@ -63,19 +63,19 @@
                 <div class="name">{{ template.fileName }}</div>
 
                 <div class="actions">
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (action)="download(template)"
                         [iconSize]="12"
                         [size]="18"
                         icon="red:download"
-                    ></redaction-circle-button>
-                    <redaction-circle-button
+                    ></iqser-circle-button>
+                    <iqser-circle-button
                         (action)="deleteTemplate(template)"
                         *ngIf="permissionsService.isAdmin()"
                         [iconSize]="12"
                         [size]="18"
                         icon="red:trash"
-                    ></redaction-circle-button>
+                    ></iqser-circle-button>
                 </div>
             </div>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.scss
index 68b3de75f..880dcd769 100644
--- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 .page-header .actions {
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 6952262fc..45a989ca9 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,12 +5,12 @@
         <div class="flex-1 actions">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
@@ -23,12 +23,12 @@
             <ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
         </div>
         <div *ngIf="hasChanges && permissionsService.isAdmin()" class="changes-box">
-            <redaction-icon-button
+            <iqser-icon-button
                 (action)="save()"
                 [label]="'rules-screen.save-changes' | translate"
                 icon="red:check"
-                type="primary"
-            ></redaction-icon-button>
+                [type]="iconButtonTypes.primary"
+            ></iqser-icon-button>
             <div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts
index 65ef95081..fcc31eeb0 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts
@@ -13,6 +13,7 @@ import { LoadingService } from '../../../../services/loading.service';
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
+import { IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-rules-screen',
@@ -20,7 +21,8 @@ import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorCon
     styleUrls: ['./rules-screen.component.scss']
 })
 export class RulesScreenComponent extends ComponentHasChanges implements OnInit {
-    editorOptions: IStandaloneEditorConstructionOptions = {
+    readonly iconButtonTypes = IconButtonTypes;
+    readonly editorOptions: IStandaloneEditorConstructionOptions = {
         theme: 'vs',
         language: 'java',
         automaticLayout: true,
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
index e7e29e70e..8e07e620f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
@@ -6,31 +6,31 @@
     <div class="red-content-inner">
         <div class="content-container">
             <div class="header-item">
-                <redaction-round-checkbox
+                <iqser-round-checkbox
                     (click)="toggleSelectAll()"
                     [active]="screenStateService.areAllEntitiesSelected$ | async"
                     [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                ></redaction-round-checkbox>
+                ></iqser-round-checkbox>
 
                 <span class="all-caps-label">
                     {{ 'trash.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
                 </span>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="bulkRestore()"
                     *ngIf="screenStateService.areSomeEntitiesSelected$ | async"
                     [tooltip]="'trash.bulk.restore' | translate"
                     icon="red:put-back"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="bulkDelete()"
                     *ngIf="screenStateService.areSomeEntitiesSelected$ | async"
                     [tooltip]="'trash.bulk.delete' | translate"
                     icon="red:trash"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
             </div>
 
             <div [class.no-data]="screenStateService.noData$ | async" class="table-header" redactionSyncWidth="table-item">
@@ -69,7 +69,7 @@
             <cdk-virtual-scroll-viewport [itemSize]="itemSize" redactionHasScrollbar>
                 <div *cdkVirtualFor="let entity of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
                     <div (click)="toggleEntitySelected($event, entity)" class="selection-column">
-                        <redaction-round-checkbox [active]="isSelected(entity)"></redaction-round-checkbox>
+                        <iqser-round-checkbox [active]="isSelected(entity)"></iqser-round-checkbox>
                     </div>
 
                     <div class="filename">
@@ -105,20 +105,20 @@
                             {{ getRestoreDate(entity.softDeletedTime) | date: 'timeFromNow' }}
                         </div>
                         <div class="action-buttons">
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 *ngIf="canRestore(entity.softDeletedTime)"
                                 (action)="bulkRestore([entity.dossierId])"
                                 [tooltip]="'trash.action.restore' | translate"
                                 icon="red:put-back"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
 
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="bulkDelete([entity.dossierId])"
                                 [tooltip]="'trash.action.delete' | translate"
                                 icon="red:trash"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
                         </div>
                     </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
index e22f1dd07..f2e81812c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
@@ -1,10 +1,10 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 .header-item {
     padding: 0 24px 0 10px;
 
-    redaction-circle-button:not(:last-child) {
+    iqser-circle-button:not(:last-child) {
         margin-right: 4px !important;
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
index 1279007ac..50bec14c8 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/c
 import { PermissionsService } from '@services/permissions.service';
 import { Dossier } from '@redaction/red-ui-http';
 import { LoadingService } from '@services/loading.service';
-import { AppConfigKey, AppConfigService } from '../../../app-config/app-config.service';
+import { AppConfigKey, AppConfigService } from '@app-config/app-config.service';
 import * as moment from 'moment';
 import { FilterService } from '@shared/services/filter.service';
 import { SearchService } from '@shared/services/search.service';
@@ -10,6 +10,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 import { SortingService } from '@services/sorting.service';
 import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { DossiersService } from '../../../dossier/services/dossiers.service';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 const HOURS_IN_A_DAY = 24;
 const MINUTES_IN_AN_HOUR = 60;
@@ -21,6 +22,7 @@ const MINUTES_IN_AN_HOUR = 60;
     providers: [FilterService, SearchService, ScreenStateService, SortingService, DossiersService]
 })
 export class TrashScreenComponent extends BaseListingComponent<Dossier> implements OnInit {
+    readonly circleButtonTypes = CircleButtonTypes;
     readonly itemSize = 80;
     protected readonly _primaryKey = 'dossierName';
     private readonly _deleteRetentionHours = this._appConfigService.getConfig(AppConfigKey.DELETE_RETENTION_HOURS);
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index eafd86902..b486f7966 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -13,38 +13,38 @@
                     [placeholder]="'user-listing.search' | translate"
                     type="search"
                 ></redaction-input-with-action>
-                <redaction-icon-button
+                <iqser-icon-button
                     (action)="openAddEditUserDialog($event)"
                     *ngIf="permissionsService.isUserAdmin()"
                     [label]="'user-listing.add-new' | translate"
                     icon="red:plus"
-                    type="primary"
-                ></redaction-icon-button>
-                <redaction-circle-button
+                    [type]="iconButtonTypes.primary"
+                ></iqser-icon-button>
+                <iqser-circle-button
                     *ngIf="permissionsService.isUser()"
                     [tooltip]="'common.close' | translate"
                     class="ml-6"
                     icon="red:close"
                     redactionNavigateLastDossiersScreen
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
             </div>
         </div>
 
         <div class="red-content-inner">
             <div [class.extended]="collapsedDetails" class="content-container">
                 <div class="header-item">
-                    <redaction-round-checkbox
+                    <iqser-round-checkbox
                         (click)="toggleSelectAll()"
                         [active]="screenStateService.areAllEntitiesSelected$ | async"
                         [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                    ></redaction-round-checkbox>
+                    ></iqser-round-checkbox>
 
                     <span class="all-caps-label">
                         {{ 'user-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
                     </span>
 
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (action)="bulkDelete()"
                         *ngIf="screenStateService.areSomeEntitiesSelected$ | async"
                         [disabled]="(canDeleteSelected$ | async) === false"
@@ -55,8 +55,8 @@
                         "
                         icon="red:trash"
                         tooltipPosition="after"
-                        type="dark-bg"
-                    ></redaction-circle-button>
+                        [type]="circleButtonTypes.dark"
+                    ></iqser-circle-button>
                 </div>
 
                 <div class="table-header" redactionSyncWidth="table-item">
@@ -83,7 +83,7 @@
                     <!--      Table lines -->
                     <div *cdkVirtualFor="let user of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
                         <div (click)="toggleEntitySelected($event, user)" class="selection-column">
-                            <redaction-round-checkbox [active]="isSelected(user)"></redaction-round-checkbox>
+                            <iqser-round-checkbox [active]="isSelected(user)"></iqser-round-checkbox>
                         </div>
 
                         <div>
@@ -104,19 +104,19 @@
                         <div class="small-label">{{ getDisplayRoles(user) }}</div>
                         <div class="actions-container">
                             <div class="action-buttons">
-                                <redaction-circle-button
+                                <iqser-circle-button
                                     (action)="openAddEditUserDialog($event, user)"
                                     [tooltip]="'user-listing.action.edit' | translate"
                                     icon="red:edit"
-                                    type="dark-bg"
-                                ></redaction-circle-button>
-                                <redaction-circle-button
+                                    [type]="circleButtonTypes.dark"
+                                ></iqser-circle-button>
+                                <iqser-circle-button
                                     (action)="openDeleteUsersDialog([user], $event)"
                                     [disabled]="user.userId === userService.userId"
                                     [tooltip]="'user-listing.action.delete' | translate"
                                     icon="red:trash"
-                                    type="dark-bg"
-                                ></redaction-circle-button>
+                                    [type]="circleButtonTypes.dark"
+                                ></iqser-circle-button>
                             </div>
                         </div>
                         <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
index 3409814db..4c9b955f9 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
@@ -54,7 +54,7 @@
         margin-right: 16px;
     }
 
-    redaction-icon-button:not(:last-child) {
+    iqser-icon-button:not(:last-child) {
         margin-right: 6px;
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
index cb88b3ddd..b07578d2b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
@@ -16,6 +16,7 @@ import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { rolesTranslations } from '../../../../translations/roles-translations';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './user-listing-screen.component.html',
@@ -23,10 +24,12 @@ import { rolesTranslations } from '../../../../translations/roles-translations';
     providers: [FilterService, SearchService, ScreenStateService, SortingService]
 })
 export class UserListingScreenComponent extends BaseListingComponent<User> implements OnInit {
+    readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
     readonly canDeleteSelected$ = this._canDeleteSelected$;
     collapsedDetails = false;
     chartData: DoughnutChartConfig[] = [];
-    translations = rolesTranslations;
+    readonly translations = rolesTranslations;
     protected readonly _primaryKey = 'userId';
     @ViewChildren(InitialsAvatarComponent)
     private readonly _avatars: QueryList<InitialsAvatarComponent>;
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 d9ef81f1f..4b3044479 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
@@ -5,12 +5,12 @@
         <div class="actions flex-1">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
@@ -22,13 +22,13 @@
         <div class="content-container">
             <div #viewer class="viewer"></div>
             <div *ngIf="changed && permissionsService.isAdmin()" class="changes-box">
-                <redaction-icon-button
+                <iqser-icon-button
                     (action)="save()"
                     [disabled]="configForm.invalid"
                     [label]="'watermark-screen.action.save' | translate"
                     icon="red:check"
-                    type="primary"
-                ></redaction-icon-button>
+                    [type]="iconButtonTypes.primary"
+                ></iqser-icon-button>
                 <div (click)="revert()" class="all-caps-label cancel" translate="watermark-screen.action.revert"></div>
             </div>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
index 894f778bd..e251b5942 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .page-header .actions {
     display: flex;
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts
index 3a4d8fc61..b7ffe527a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts
@@ -13,6 +13,7 @@ import { BASE_HREF } from '../../../../tokens';
 import { stampPDFPage } from '../../../../utils/page-stamper';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { LoadingService } from '../../../../services/loading.service';
+import { IconButtonTypes } from '@iqser/common-ui';
 
 export const DEFAULT_WATERMARK: WatermarkModelRes = {
     text: null,
@@ -21,7 +22,7 @@ export const DEFAULT_WATERMARK: WatermarkModelRes = {
     fontSize: 11,
     fontType: 'sans-serif',
     orientation: WatermarkModelRes.OrientationEnum.DIAGONAL
-};
+} as const;
 
 @Component({
     selector: 'redaction-watermark-screen',
@@ -29,6 +30,7 @@ export const DEFAULT_WATERMARK: WatermarkModelRes = {
     styleUrls: ['./watermark-screen.component.scss']
 })
 export class WatermarkScreenComponent implements OnInit {
+    readonly iconButtonTypes = IconButtonTypes;
     configForm: FormGroup;
     private _instance: WebViewerInstance;
     private _watermark: WatermarkModelRes = {};
diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
index dbbbd44e6..177e62ae4 100644
--- a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
@@ -11,7 +11,7 @@ import { AddEditUserDialogComponent } from '../dialogs/add-edit-user-dialog/add-
 import { ConfirmDeleteUsersDialogComponent } from '../dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component';
 import { FileAttributesCsvImportDialogComponent } from '../dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component';
 import { ComponentType } from '@angular/cdk/portal';
-import { DialogService } from '@shared/services/dialog.service';
+import { DialogService, largeDialogConfig } from '@shared/services/dialog.service';
 import { AddEditDossierAttributeDialogComponent } from '../dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component';
 
 type DialogType =
@@ -57,7 +57,7 @@ export class AdminDialogService extends DialogService<DialogType> {
         },
         importFileAttributes: {
             component: FileAttributesCsvImportDialogComponent,
-            dialogConfig: this._largeConfig
+            dialogConfig: largeDialogConfig
         },
         deleteUsers: {
             component: ConfirmDeleteUsersDialogComponent,
diff --git a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html
index 145bcc4bc..34385181d 100644
--- a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html
@@ -1,118 +1,118 @@
 <div *ngIf="canPerformAnnotationActions" [class.always-visible]="alwaysVisible" class="annotation-actions">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.changeLegalBasis($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canChangeLegalBasis"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.edit-reason.label' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:edit"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.convertRecommendationToAnnotation($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canAcceptRecommendation"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.accept-recommendation.label' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:check"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.acceptSuggestion($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canAcceptSuggestion"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.accept-suggestion.label' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:check"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.undoDirectAction($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canUndo"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.undo' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:undo"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.rejectSuggestion($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canRejectSuggestion"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.reject-suggestion' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:trash"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.recategorizeImage($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canRecategorizeImage"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.recategorize-image' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:thumb-down"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.markAsFalsePositive($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canMarkTextOnlyAsFalsePositive && !annotationPermissions.canPerformMultipleRemoveActions"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.remove-annotation.false-positive' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:thumb-down"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.forceRedaction($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canForceRedaction"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.force-redaction.label' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:thumb-up"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="hideAnnotation($event)"
         *ngIf="isImage && isVisible"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.hide' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:visibility-off"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="showAnnotation($event)"
         *ngIf="isImage && !isVisible"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.show' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:visibility"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="suggestRemoveAnnotations($event, true)"
         *ngIf="annotationPermissions.canRemoveOrSuggestToRemoveFromDictionary"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.remove-annotation.remove-from-dict' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:remove-from-dict"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="markAsFalsePositive($event)"
         *ngIf="annotationPermissions.canMarkAsFalsePositive"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.remove-annotation.false-positive' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:thumb-down"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="suggestRemoveAnnotations($event, false)"
         *ngIf="annotationPermissions.canRemoveOrSuggestToRemoveOnlyHere"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.remove-annotation.only-here' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:trash"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 </div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss
index a9168e3ac..82e86a785 100644
--- a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss
@@ -1,9 +1,9 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .annotation-actions {
     display: none;
 
-    redaction-circle-button {
+    iqser-circle-button {
         display: block;
     }
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts
index 70425a94a..03ae851bc 100644
--- a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts
@@ -6,13 +6,20 @@ import { AnnotationPermissions } from '@models/file/annotation.permissions';
 import { AnnotationActionsService } from '../../services/annotation-actions.service';
 import { WebViewerInstance } from '@pdftron/webviewer';
 
+export const AnnotationButtonTypes = {
+    dark: 'dark',
+    primary: 'primary'
+} as const;
+
+export type AnnotationButtonType = keyof typeof AnnotationButtonTypes;
+
 @Component({
     selector: 'redaction-annotation-actions',
     templateUrl: './annotation-actions.component.html',
     styleUrls: ['./annotation-actions.component.scss']
 })
 export class AnnotationActionsComponent implements OnInit {
-    @Input() btnType: 'dark-bg' | 'primary' = 'dark-bg';
+    @Input() buttonType: AnnotationButtonType = AnnotationButtonTypes.dark;
     @Input() tooltipPosition: 'before' | 'above' = 'before';
     @Input() canPerformAnnotationActions: boolean;
     @Input() viewer: WebViewerInstance;
diff --git a/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.html
index 28809a440..cddedf78f 100644
--- a/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.html
@@ -1,78 +1,78 @@
 <ng-container *ngIf="areSomeFilesSelected">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="delete()"
         *ngIf="canDelete"
         [tooltip]="'dossier-overview.bulk.delete' | translate"
         icon="red:trash"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="assign()"
         *ngIf="canAssign"
         [tooltip]="assignTooltip"
         icon="red:assign"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="assignToMe()"
         *ngIf="canAssignToSelf"
         [tooltip]="'dossier-overview.assign-me' | translate"
         icon="red:assign-me"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="setToUnderApproval()"
         *ngIf="canSetToUnderApproval"
         [tooltip]="'dossier-overview.under-approval' | translate"
         icon="red:ready-for-approval"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="setToUnderReview()"
         *ngIf="canSetToUnderReview"
         [tooltip]="'dossier-overview.under-review' | translate"
         icon="red:undo"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
     <redaction-file-download-btn [dossier]="dossier" [file]="selectedFiles"></redaction-file-download-btn>
 
     <!-- Approved-->
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="approveDocuments()"
         *ngIf="isReadyForApproval"
         [disabled]="!canApprove"
         [tooltip]="canApprove ? ('dossier-overview.approve' | translate) : ('dossier-overview.approve-disabled' | translate)"
         icon="red:approved"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
     <!-- Back to approval -->
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="setToUnderApproval()"
         *ngIf="canUndoApproval"
         [tooltip]="'dossier-overview.under-approval' | translate"
         icon="red:undo"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="ocr()"
         *ngIf="canOcr"
         [tooltip]="'dossier-overview.ocr-file' | translate"
         icon="red:ocr"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="reanalyse()"
         *ngIf="canReanalyse"
         [tooltip]="'dossier-overview.bulk.reanalyse' | translate"
         icon="red:refresh"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 </ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.ts
index 6c69164d7..257df818d 100644
--- a/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.ts
@@ -11,6 +11,7 @@ import { ConfirmationDialogInput } from '@shared/dialogs/confirmation-dialog/con
 import { ScreenStateService } from '@shared/services/screen-state.service';
 import { TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-dossier-overview-bulk-actions',
@@ -18,6 +19,8 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
     styleUrls: ['./dossier-overview-bulk-actions.component.scss']
 })
 export class DossierOverviewBulkActionsComponent {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     @Output()
     reload = new EventEmitter();
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html
index 2bbe4f149..b72105b3a 100644
--- a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html
@@ -5,14 +5,14 @@
             <div>{{ comment.date | date: 'd MMM. yyyy, hh:mm a' }}</div>
         </div>
         <div class="comment-actions">
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="deleteComment(comment)"
                 *ngIf="permissionsService.canDeleteComment(comment)"
                 [iconSize]="10"
                 [size]="20"
                 class="pointer"
                 icon="red:trash"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
     <div>{{ comment.text }}</div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss
index 9915237b0..0ac6ecc1f 100644
--- a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 :host {
     display: flex;
diff --git a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.html b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.html
index bd02b1ad1..69e6a591c 100644
--- a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.html
@@ -1,17 +1,17 @@
 <div class="right-title heading" translate="file-preview.tabs.document-info.label">
     <div>
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="edit()"
             [tooltip]="'file-preview.tabs.document-info.edit' | translate"
             icon="red:edit"
             tooltipPosition="before"
-        ></redaction-circle-button>
-        <redaction-circle-button
+        ></iqser-circle-button>
+        <iqser-circle-button
             (action)="closeDocumentInfoView.emit()"
             [tooltip]="'file-preview.tabs.document-info.close' | translate"
             icon="red:close"
             tooltipPosition="before"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
     </div>
 </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss
index 2b1362ac9..4cbdca5e8 100644
--- a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 :host {
@@ -28,7 +28,7 @@
 .right-title > div {
     display: flex;
 
-    > redaction-circle-button:not(:last-child) {
+    > iqser-circle-button:not(:last-child) {
         margin-right: 2px;
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss b/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss
index daf603ca8..4c89b435d 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-components';
 @import '../../../../../assets/styles/red-text-styles';
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html
index dbd094540..d808d7b0a 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html
@@ -17,14 +17,14 @@
             <ng-container *ngIf="!editingOwner; else editOwner">
                 <redaction-initials-avatar [userId]="owner.userId" [withName]="true" color="gray" size="large"></redaction-initials-avatar>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="editingOwner = true"
                     *ngIf="permissionsService.isManager()"
                     [tooltip]="'dossier-details.edit-owner' | translate"
                     class="ml-14"
                     icon="red:edit"
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
             </ng-container>
         </div>
     </div>
@@ -81,10 +81,10 @@
 </ng-template>
 
 <ng-template #collapsible let-action="action" let-tooltip="tooltip">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="toggleCollapse.emit()"
         [icon]="'red:' + action"
         [tooltip]="tooltip"
         tooltipPosition="before"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss
index aabfd62ce..55794a2a7 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .header-wrapper {
     display: flex;
@@ -9,7 +9,7 @@
         max-width: 88%;
     }
 
-    redaction-circle-button {
+    iqser-circle-button {
         position: absolute;
         top: -8px;
         left: 290px;
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html
index b78c711d0..95fd8149b 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html
@@ -1,20 +1,20 @@
 <redaction-status-bar [config]="getDossierStatusConfig(dossier)"></redaction-status-bar>
 <div [class.active]="actionMenuOpen" class="action-buttons">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="openEditDossierDialog($event, dossier)"
         *ngIf="permissionsService.isManager()"
         [tooltip]="'dossier-listing.edit.action' | translate"
         icon="red:edit"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="reanalyseDossier($event, dossier)"
         *ngIf="permissionsService.displayReanalyseBtn(dossier)"
         [tooltip]="'dossier-listing.reanalyse.action' | translate"
         icon="red:refresh"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-file-download-btn [dossier]="dossier" [file]="dossier.files" type="dark-bg"></redaction-file-download-btn>
+    <redaction-file-download-btn [dossier]="dossier" [file]="dossier.files" [type]="circleButtonTypes.dark"></redaction-file-download-btn>
 </div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts
index e8f6d2469..685937442 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts
@@ -4,6 +4,7 @@ import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { StatusSorter } from '@utils/sorters/status-sorter';
 import { AppStateService } from '@state/app-state.service';
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-dossier-listing-actions',
@@ -11,6 +12,8 @@ import { DossiersDialogService } from '../../services/dossiers-dialog.service';
     styleUrls: ['./dossier-listing-actions.component.scss']
 })
 export class DossierListingActionsComponent {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     @Input() dossier: DossierWrapper;
     @Output() actionPerformed = new EventEmitter<DossierWrapper | undefined>();
     actionMenuOpen = false;
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.scss b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.scss
index 6f60af2c5..d5ecdcf74 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 :host {
     flex: 1;
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
index 428a81c2f..b57c5ad4b 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
@@ -10,32 +10,32 @@
 <ng-template #actions>
     <div class="file-actions" *ngIf="fileStatus">
         <!-- delete-->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="openDeleteFileDialog($event)"
             *ngIf="permissionsService.canDeleteFile(fileStatus)"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.delete.action' | translate"
             [type]="buttonType"
             icon="red:trash"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="assign($event)"
             *ngIf="canAssign && screen === 'dossier-overview'"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="assignTooltip"
             [type]="buttonType"
             icon="red:assign"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="assignToMe($event)"
             *ngIf="canAssignToSelf && screen === 'dossier-overview'"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.assign-me' | translate"
             [type]="buttonType"
             icon="red:assign-me"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!-- download redacted file-->
         <redaction-file-download-btn
@@ -46,16 +46,16 @@
             [type]="buttonType"
         ></redaction-file-download-btn>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="toggleViewDocumentInfo()"
             *ngIf="screen === 'file-preview'"
             [attr.aria-expanded]="activeDocumentInfo"
             [tooltip]="'file-preview.document-info' | translate"
             icon="red:status-info"
             tooltipPosition="below"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="toggleExcludePages()"
             *ngIf="screen === 'file-preview'"
             [attr.aria-expanded]="activeExcludePages"
@@ -63,30 +63,30 @@
             [tooltip]="'file-preview.exclude-pages' | translate"
             icon="red:exclude-pages"
             tooltipPosition="below"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!-- Ready for approval-->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="setFileUnderApproval($event)"
             *ngIf="canSetToUnderApproval"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.under-approval' | translate"
             [type]="buttonType"
             icon="red:ready-for-approval"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!-- Back to review -->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="setFileUnderReview($event, true)"
             *ngIf="canSetToUnderReview"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.under-review' | translate"
             [type]="buttonType"
             icon="red:undo"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!-- Approved-->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="setFileApproved($event)"
             *ngIf="permissionsService.isReadyForApproval(fileStatus)"
             [disabled]="!permissionsService.canApprove(fileStatus)"
@@ -98,47 +98,47 @@
             "
             [type]="buttonType"
             icon="red:approved"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!-- Back to approval -->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="setFileUnderApproval($event)"
             *ngIf="canUndoApproval"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.under-approval' | translate"
             [type]="buttonType"
             icon="red:undo"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="ocrFile($event)"
             *ngIf="canOcr"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.ocr-file' | translate"
             [type]="buttonType"
             icon="red:ocr"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!-- reanalyse file preview -->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="reanalyseFile($event)"
             *ngIf="canReanalyse && screen === 'file-preview'"
             [tooltip]="'file-preview.reanalyse-notification' | translate"
             icon="red:refresh"
             tooltipClass="warn small"
             tooltipPosition="below"
-            type="warn"
-        ></redaction-circle-button>
+            [type]="circleButtonTypes.warn"
+        ></iqser-circle-button>
 
         <!-- reanalyse file listing -->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="reanalyseFile($event)"
             *ngIf="canReanalyse && screen === 'dossier-overview'"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.reanalyse.action' | translate"
             icon="red:refresh"
-            type="dark-bg"
-        ></redaction-circle-button>
+            [type]="circleButtonTypes.dark"
+        ></iqser-circle-button>
 
         <!-- exclude from redaction -->
         <div class="red-input-group">
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts
index 134e5c222..6ffe91d1c 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts
@@ -9,6 +9,7 @@ import { LoadingService } from '@services/loading.service';
 import { FileManagementControllerService } from '@redaction/red-ui-http';
 import { TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-file-actions',
@@ -16,6 +17,8 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
     styleUrls: ['./file-actions.component.scss']
 })
 export class FileActionsComponent implements OnInit {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     @Input() fileStatus: FileStatusWrapper;
     @Input() activeDocumentInfo: boolean;
     @Input() activeExcludePages: boolean;
@@ -43,7 +46,7 @@ export class FileActionsComponent implements OnInit {
     }
 
     get buttonType() {
-        return this.screen === 'file-preview' ? 'default' : 'dark-bg';
+        return this.screen === 'file-preview' ? CircleButtonTypes.default : CircleButtonTypes.dark;
     }
 
     get toggleTooltip(): string {
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
index 3eaf76ea4..a2919dc27 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
@@ -17,12 +17,12 @@
 </div>
 <div *ngIf="excludePages" class="right-title heading" translate="file-preview.tabs.exclude-pages.label">
     <div>
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="actionPerformed.emit('view-exclude-pages')"
             [tooltip]="'file-preview.tabs.exclude-pages.close' | translate"
             icon="red:close"
             tooltipPosition="before"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
     </div>
 </div>
 <div class="right-content">
@@ -38,11 +38,11 @@
     </div>
     <div *ngIf="multiSelectActive" class="multi-select">
         <div class="selected-wrapper">
-            <redaction-round-checkbox
+            <iqser-round-checkbox
                 (click)="!!selectedAnnotations?.length && selectAnnotations.emit()"
                 [indeterminate]="!!selectedAnnotations?.length"
-                type="red-bg"
-            ></redaction-round-checkbox>
+                type="with-bg"
+            ></iqser-round-checkbox>
             <span class="all-caps-label">{{ selectedAnnotations?.length || 0 }} selected </span>
             <redaction-annotation-actions
                 (annotationsChanged)="annotationsChanged.emit($event)"
@@ -51,11 +51,11 @@
                 [annotations]="selectedAnnotations"
                 [canPerformAnnotationActions]="!isReadOnly"
                 [viewer]="viewer"
-                btnType="primary"
+                buttonType="primary"
                 tooltipPosition="above"
             ></redaction-annotation-actions>
         </div>
-        <redaction-circle-button (action)="multiSelectActive = false" icon="red:close" type="primary"></redaction-circle-button>
+        <iqser-circle-button (action)="multiSelectActive = false" icon="red:close" [type]="circleButtonTypes.primary"></iqser-circle-button>
     </div>
     <div [class.lower-height]="multiSelectActive || isReadOnly" class="annotations-wrapper">
         <div
@@ -147,21 +147,21 @@
                             </ng-container>
                         </redaction-empty-state>
                         <div class="no-annotations-buttons-container mt-32">
-                            <redaction-icon-button
+                            <iqser-icon-button
                                 (action)="jumpToPreviousWithAnnotations()"
                                 [disabled]="activeViewerPage <= displayedPages[0]"
                                 [label]="'file-preview.tabs.annotations.jump-to-previous' | translate"
                                 icon="red:nav-prev"
-                                type="show-bg"
-                            ></redaction-icon-button>
-                            <redaction-icon-button
+                                [type]="iconButtonTypes.dark"
+                            ></iqser-icon-button>
+                            <iqser-icon-button
                                 (action)="jumpToNextWithAnnotations()"
                                 [disabled]="activeViewerPage >= displayedPages[displayedPages.length - 1]"
                                 [label]="'file-preview.tabs.annotations.jump-to-next' | translate"
                                 class="mt-8"
                                 icon="red:nav-next"
-                                type="show-bg"
-                            ></redaction-icon-button>
+                                [type]="iconButtonTypes.dark"
+                            ></iqser-icon-button>
                         </div>
                     </ng-container>
 
@@ -195,10 +195,10 @@
                                     </div>
 
                                     <div class="active-icon-marker-container">
-                                        <redaction-round-checkbox
+                                        <iqser-round-checkbox
                                             *ngIf="multiSelectActive && isSelected(annotation)"
                                             [active]="true"
-                                        ></redaction-round-checkbox>
+                                        ></iqser-round-checkbox>
                                     </div>
                                 </div>
 
@@ -244,10 +244,10 @@
 </ng-template>
 
 <ng-template #annotationFilterActionTemplate let-filter="filter">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="toggleSkipped.emit($event)"
         *ngIf="filter.key === 'skipped'"
         [icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss
index dd8d3aa68..85ecf735e 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 .read-only {
@@ -41,7 +41,7 @@
         align-items: center;
         flex-direction: column;
 
-        redaction-icon-button {
+        iqser-icon-button {
             width: 100%;
         }
     }
@@ -59,7 +59,7 @@
             display: flex;
             align-items: center;
 
-            redaction-round-checkbox.inactive {
+            iqser-round-checkbox .wrapper.inactive {
                 cursor: default;
             }
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
index 57cde0bb2..efba5b395 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
@@ -21,6 +21,7 @@ import { FilterModel } from '@shared/components/filters/popup-filter/model/filte
 import { CommentsComponent } from '../comments/comments.component';
 import { PermissionsService } from '@services/permissions.service';
 import { WebViewerInstance } from '@pdftron/webviewer';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];
 const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
@@ -31,6 +32,9 @@ const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
     styleUrls: ['./file-workload.component.scss']
 })
 export class FileWorkloadComponent {
+    readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
+
     displayedAnnotations: { [key: number]: { annotations: AnnotationWrapper[] } } = {};
     @Input() selectedAnnotations: AnnotationWrapper[];
     @Input() activeViewerPage: number;
diff --git a/apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.scss b/apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.scss
index 3e244cd8a..16a25a86a 100644
--- a/apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/red-ui/src/assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .needs-work {
     display: flex;
diff --git a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html
index 8e3605d22..3d0bc5b17 100644
--- a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html
@@ -21,12 +21,12 @@
             {{ range.startPage }}
         </ng-container>
         <ng-container *ngIf="range.startPage !== range.endPage"> {{ range.startPage }} -{{ range.endPage }} </ng-container>
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="includePagesRange(range)"
             *ngIf="permissionsService.canExcludePages()"
             [tooltip]="'file-preview.tabs.exclude-pages.put-back' | translate"
             icon="red:undo"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
     </div>
 </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss
index c5d6bf1eb..3d8347c0d 100644
--- a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 :host {
@@ -29,14 +29,14 @@
             justify-content: space-between;
             height: 50px;
 
-            redaction-circle-button {
+            iqser-circle-button {
                 display: none;
             }
 
             &:hover {
                 background-color: $grey-8;
 
-                redaction-circle-button {
+                iqser-circle-button {
                     display: initial;
                 }
             }
diff --git a/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.scss b/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.scss
index dd386e81d..30afe7bb5 100644
--- a/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.scss
@@ -1,7 +1,7 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .page-wrapper {
-    color: $grey-1;
+    color: $accent;
     position: relative;
     padding: 12px 14px 12px 8px;
     cursor: pointer;
@@ -12,7 +12,7 @@
     }
 
     &.active {
-        border-left: 4px solid $red-1;
+        border-left: 4px solid $primary;
     }
 
     mat-icon {
@@ -38,7 +38,7 @@
         color: $grey-5;
 
         .text {
-            color: $grey-1;
+            color: $accent;
         }
     }
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.scss b/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.scss
index 9c85a3acf..436b3cfef 100644
--- a/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .page {
     display: flex;
@@ -79,7 +79,7 @@
         padding-right: 4px;
 
         &:hover {
-            color: $grey-1;
+            color: $accent;
         }
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.scss b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.scss
index 259750da0..4667400ec 100644
--- a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/red-ui/src/assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .scroll-button {
     background-color: $white;
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
index 7a057fa9c..8e0bd8f9e 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
@@ -52,7 +52,7 @@
             <redaction-initials-avatar [userId]="userId" [withName]="true" size="large"></redaction-initials-avatar>
             <div class="actions">
                 <div (click)="toggleApprover(userId, $event)" *ngIf="!isOwner(userId)" class="make-approver">
-                    <redaction-round-checkbox [active]="isApprover(userId)" class="mr-8"></redaction-round-checkbox>
+                    <iqser-round-checkbox [active]="isApprover(userId)" class="mr-8"></iqser-round-checkbox>
                     <span translate="assign-dossier-owner.dialog.make-approver"></span>
                 </div>
                 <mat-icon *ngIf="!isOwner(userId)" svgIcon="red:check"></mat-icon>
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html
index 026b87721..377b3aed3 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html
@@ -14,7 +14,7 @@
     <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
+    <iqser-circle-button
         (action)="openAssignDossierMembersDialog.emit()"
         *ngIf="permissionsService.isManager() && canAdd"
         [class.large-spacing]="largeSpacing"
@@ -22,8 +22,7 @@
         [tooltip]="'dossier-details.assign-members' | translate"
         class="member"
         icon="red:plus"
-        type="primary"
-    >
-    </redaction-circle-button>
+        [type]="circleButtonTypes.primary"
+    ></iqser-circle-button>
 </div>
 <div (click)="toggleExpandedTeam()" *ngIf="expandedTeam" class="all-caps-label see-less pointer" translate="dossier-details.see-less"></div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.scss b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.scss
index 3b000abab..fd2d72cef 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .container {
     flex-wrap: wrap;
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.ts b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.ts
index fb56e836f..f0742ed28 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.ts
@@ -1,5 +1,6 @@
 import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-team-members',
@@ -7,6 +8,8 @@ import { PermissionsService } from '@services/permissions.service';
     styleUrls: ['./team-members.component.scss']
 })
 export class TeamMembersComponent {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     @Input() memberIds: string[];
     @Input() perLine: number;
     @Input() canAdd = true;
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
index b1ff24e25..316c1a4f5 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
@@ -82,17 +82,17 @@
                 {{ 'add-dossier-dialog.actions.save' | translate }}
             </button>
 
-            <redaction-icon-button
+            <iqser-icon-button
                 (action)="saveDossierAndAddMembers()"
                 [disabled]="disabled"
                 [label]="'add-dossier-dialog.actions.save-and-add-members' | translate"
                 icon="red:assign"
-                type="show-bg"
-            ></redaction-icon-button>
+                [type]="iconButtonTypes.dark"
+            ></iqser-icon-button>
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
 
 <ng-template #reportTemplateOptionTemplate let-option="option">
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss
index b42ed8fc9..dab425932 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .watermark {
     margin-top: 24px;
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts
index 31561a8e1..2337611df 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts
@@ -5,6 +5,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AppStateService } from '@state/app-state.service';
 import * as moment from 'moment';
 import { downloadTypesTranslations } from '../../../../translations/download-types-translations';
+import { IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-add-dossier-dialog',
@@ -12,6 +13,8 @@ import { downloadTypesTranslations } from '../../../../translations/download-typ
     styleUrls: ['./add-dossier-dialog.component.scss']
 })
 export class AddDossierDialogComponent {
+    readonly iconButtonTypes = IconButtonTypes;
+
     dossierForm: FormGroup;
     hasDueDate = false;
     downloadTypesEnum: Dossier.DownloadFileTypesEnum[] = ['ORIGINAL', 'PREVIEW', 'REDACTED'];
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
index 0f73f7b3a..1b1f9fab3 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
@@ -30,5 +30,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
index 150cfafb2..1bdee0e53 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
@@ -35,5 +35,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html
index 050300501..14770bf97 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html
@@ -15,5 +15,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.html
index 445d8cd9e..d46f56def 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.html
@@ -20,5 +20,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
index 5037d8497..72fe36b08 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
@@ -50,15 +50,15 @@
 
                 <label>{{ attr.label }}</label>
 
-                <redaction-icon-button
+                <iqser-icon-button
                     (action)="fileInputClick(attr)"
                     *ngIf="!currentAttrValue(attr)"
                     [disabled]="!canEdit"
                     [label]="'edit-dossier-dialog.attributes.upload-image' | translate"
                     class="upload-button"
                     icon="red:upload"
-                    type="show-bg"
-                ></redaction-icon-button>
+                    [type]="iconButtonTypes.dark"
+                ></iqser-icon-button>
 
                 <input
                     #fileInput
@@ -72,18 +72,18 @@
                 />
             </div>
             <div *ngIf="currentAttrValue(attr) && canEdit">
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="deleteAttr(attr)"
                     [tooltip]="'edit-dossier-dialog.attributes.delete-image' | translate"
                     icon="red:trash"
-                    type="dark-bg"
-                ></redaction-circle-button>
-                <redaction-circle-button
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
+                <iqser-circle-button
                     (action)="fileInputClick(attr)"
                     [tooltip]="'edit-dossier-dialog.attributes.upload-image' | translate"
                     icon="red:upload"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
             </div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
index 468cc47b3..69c1c2210 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../assets/styles/red-variables';
+@import '../../../../../../assets/styles/variables';
 
 :host {
     display: flex;
@@ -64,7 +64,7 @@
                 margin-right: 15px;
             }
 
-            redaction-circle-button:not(:last-child) {
+            iqser-circle-button:not(:last-child) {
                 margin-right: 2px;
             }
         }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
index d4020e3a4..e678d0a62 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
@@ -8,6 +8,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import * as moment from 'moment';
 import { DossierAttributeWithValue } from '@models/dossier-attributes.model';
 import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-edit-dossier-attributes',
@@ -15,6 +16,9 @@ import { DossierAttributesService } from '@shared/services/controller-wrappers/d
     styleUrls: ['./edit-dossier-attributes.component.scss']
 })
 export class EditDossierAttributesComponent implements EditDossierSectionInterface, OnInit {
+    readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
+
     @Input() dossierWrapper: DossierWrapper;
     @Output() updateDossier = new EventEmitter<any>();
     customAttributes: DossierAttributeWithValue[] = [];
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss
index d6a46a650..c8b945532 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../assets/styles/red-variables';
+@import '../../../../../../assets/styles/variables';
 
 .download-includes {
     margin: 16px 0 10px;
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
index c1fa1a5e3..d42a79cf8 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
@@ -75,5 +75,5 @@
         </div>
     </div>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss
index 7eb063989..547ad41ad 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 .dialog-content {
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
index b18f3ed26..43c9e51d6 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
@@ -56,12 +56,12 @@
     </div>
 
     <div class="dialog-actions">
-        <redaction-icon-button
+        <iqser-icon-button
             (action)="openDeleteDossierDialog($event)"
             *ngIf="permissionsService.canDeleteDossier(dossierWrapper)"
             [label]="'dossier-listing.delete.action' | translate"
             icon="red:trash"
-            type="show-bg"
-        ></redaction-icon-button>
+            [type]="iconButtonTypes.dark"
+        ></iqser-icon-button>
     </div>
 </form>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
index 72971f622..99069165f 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../assets/styles/red-variables';
+@import '../../../../../../assets/styles/variables';
 
 .watermark {
     margin-top: 24px;
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index 0875a1a88..dd92dcd78 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -12,6 +12,7 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { EditDossierDialogComponent } from '../edit-dossier-dialog.component';
 import { Toaster } from '@services/toaster.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-edit-dossier-general-info',
@@ -19,6 +20,8 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
     styleUrls: ['./edit-dossier-general-info.component.scss']
 })
 export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSectionInterface {
+    readonly iconButtonTypes = IconButtonTypes;
+
     dossierForm: FormGroup;
     hasDueDate: boolean;
     dossierTemplates: DossierTemplateModel[];
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
index 845be9a24..a441dc986 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
@@ -34,5 +34,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
index 2b2c7427e..292862fd9 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
@@ -70,5 +70,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
index e9284dab0..cf7ad05f8 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
@@ -30,5 +30,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
index aabddd419..a83b023dd 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
@@ -49,5 +49,5 @@
         </button>
     </div>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss
index d101f19d8..1a4ea825d 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss
@@ -1,5 +1,5 @@
 @import '../../../../../assets/styles/red-mixins';
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .content-container {
     position: relative;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
index cee6e3f62..ccefdea92 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
@@ -11,7 +11,7 @@
             tooltipPosition="below"
         ></redaction-file-download-btn>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="reanalyseDossier()"
             *ngIf="permissionsService.displayReanalyseBtn()"
             [disabled]="screenStateService.areSomeEntitiesSelected$ | async"
@@ -19,17 +19,17 @@
             [tooltip]="'dossier-overview.new-rule.toast.actions.reanalyse-all' | translate"
             icon="red:refresh"
             tooltipPosition="below"
-            type="warn"
-        ></redaction-circle-button>
+            [type]="circleButtonTypes.warn"
+        ></iqser-circle-button>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="fileInput.click()"
             [tooltip]="'dossier-overview.header-actions.upload-document' | translate"
             class="ml-14"
             icon="red:upload"
             tooltipPosition="below"
-            type="primary"
-        ></redaction-circle-button>
+            [type]="circleButtonTypes.primary"
+        ></iqser-circle-button>
     </redaction-page-header>
 
     <div class="overlay-shadow"></div>
@@ -37,11 +37,11 @@
     <div class="red-content-inner">
         <div [class.extended]="collapsedDetails" class="content-container">
             <div class="header-item">
-                <redaction-round-checkbox
+                <iqser-round-checkbox
                     (click)="toggleSelectAll()"
                     [active]="screenStateService.areAllEntitiesSelected$ | async"
                     [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                ></redaction-round-checkbox>
+                ></iqser-round-checkbox>
 
                 <span class="all-caps-label">
                     {{ 'dossier-overview.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) || 0 } }}
@@ -113,7 +113,7 @@
                     class="table-item"
                 >
                     <div (click)="toggleEntitySelected($event, fileStatus)" class="selection-column">
-                        <redaction-round-checkbox [active]="isSelected(fileStatus)"></redaction-round-checkbox>
+                        <iqser-round-checkbox [active]="isSelected(fileStatus)"></iqser-round-checkbox>
                     </div>
 
                     <div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
index a84f71a23..2ada265a7 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 .file-upload-input {
@@ -29,7 +29,7 @@ cdk-virtual-scroll-viewport {
             }
 
             .error {
-                color: $red-1;
+                color: $primary;
             }
 
             .extend-cols {
@@ -47,7 +47,7 @@ cdk-virtual-scroll-viewport {
                 align-items: center;
                 justify-content: flex-start;
                 opacity: 0.7;
-                color: $grey-1;
+                color: $accent;
                 font-size: 11px;
                 letter-spacing: 0;
                 line-height: 14px;
@@ -118,7 +118,7 @@ cdk-virtual-scroll-viewport {
 .last-opened {
     > .selection-column {
         padding-left: 6px !important;
-        border-left: 4px solid $red-1;
+        border-left: 4px solid $primary;
     }
 
     > div {
@@ -128,7 +128,7 @@ cdk-virtual-scroll-viewport {
 
 @keyframes red-fading-background {
     0% {
-        background-color: rgba($red-1, 0.1);
+        background-color: rgba($primary, 0.1);
     }
     100% {
         background-color: inherit;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
index acdc86325..1ef8098ec 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
@@ -35,6 +35,7 @@ import { UserPreferenceService } from '@services/user-preference.service';
 import { workloadTranslations } from '../../translations/workload-translations';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './dossier-overview-screen.component.html',
@@ -45,14 +46,16 @@ export class DossierOverviewScreenComponent
     extends BaseListingComponent<FileStatusWrapper>
     implements OnInit, OnDestroy, OnDetach, OnAttach
 {
+    private readonly _lastOpenedFileKey = 'Dossier-Recent-' + this.activeDossier.dossierId;
+    protected readonly _primaryKey = 'filename';
+    readonly circleButtonTypes = CircleButtonTypes;
+
     readonly itemSize = 80;
     collapsedDetails = false;
     actionConfigs: ActionConfig[];
     dossierAttributes: DossierAttributeWithValue[] = [];
-    protected readonly _primaryKey = 'filename';
     @ViewChild(DossierDetailsComponent, { static: false })
     private readonly _dossierDetailsComponent: DossierDetailsComponent;
-    private readonly _lastOpenedFileKey = 'Dossier-Recent-' + this.activeDossier.dossierId;
     private _lastScrollPosition: number;
 
     @ViewChild('needsWorkTemplate', { read: TemplateRef, static: true })
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
index c982ab609..6bba36ab6 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
@@ -63,21 +63,21 @@
             ></redaction-assign-user-dropdown>
 
             <div *ngIf="canAssign" class="assign-actions-wrapper">
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="editingReviewer = true"
                     *ngIf="permissionsService.canAssignUser() && currentReviewer"
                     [tooltip]="assignTooltip"
                     icon="red:edit"
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="assignToMe()"
                     *ngIf="permissionsService.canAssignToSelf()"
                     [tooltip]="'file-preview.assign-me' | translate"
                     icon="red:assign-me"
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
             </div>
 
             <ng-container *ngIf="permissionsService.isApprover() && !!lastReviewer">
@@ -93,27 +93,27 @@
                 [activeExcludePages]="excludePages"
             ></redaction-file-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="toggleFullScreen()"
                 [icon]="fullScreen ? 'red:exit-fullscreen' : 'red:fullscreen'"
                 [tooltip]="'file-preview.fullscreen' | translate"
                 class="ml-2"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
 
             <!-- Dev Mode Features-->
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="downloadOriginalFile()"
                 *ngIf="userPreferenceService.areDevFeaturesEnabled"
                 [tooltip]="'file-preview.download-original-file' | translate"
                 class="ml-8"
                 icon="red:download"
                 tooltipPosition="below"
-                type="primary"
-            ></redaction-circle-button>
+                [type]="circleButtonTypes.primary"
+            ></iqser-circle-button>
             <!-- End Dev Mode Features-->
 
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="closeFullScreen()"
                 *ngIf="!fullScreen"
                 [routerLink]="['/main/dossiers/' + appStateService.activeDossierId]"
@@ -121,7 +121,7 @@
                 class="ml-8"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.scss
index 2ba7f35a8..85e82a593 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 .vertical-line {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
index bb77389a4..a093bafac 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
@@ -15,7 +15,7 @@ import { AnnotationProcessingService } from '../../services/annotation-processin
 import { Toaster } from '@services/toaster.service';
 import { FileStatusWrapper } from '@models/file/file-status.wrapper';
 import { PermissionsService } from '@services/permissions.service';
-import { Subscription, timer } from 'rxjs';
+import { timer } from 'rxjs';
 import { UserPreferenceService } from '@services/user-preference.service';
 import { UserService } from '@services/user.service';
 import {
@@ -34,9 +34,9 @@ import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
 import { FilterModel } from '@shared/components/filters/popup-filter/model/filter.model';
 import { handleFilterDelta, processFilters } from '@shared/components/filters/popup-filter/utils/filter-utils';
 import { LoadingService } from '@services/loading.service';
-import { stampPDFPage } from '../../../../utils/page-stamper';
+import { stampPDFPage } from '@utils/page-stamper';
 import { TranslateService } from '@ngx-translate/core';
-import { AutoUnsubscribeComponent } from '@shared/base/auto-unsubscribe.component';
+import { AutoUnsubscribeComponent, CircleButtonTypes } from '@iqser/common-ui';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
 
 const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f'];
@@ -47,6 +47,9 @@ const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f'];
     styleUrls: ['./file-preview-screen.component.scss']
 })
 export class FilePreviewScreenComponent extends AutoUnsubscribeComponent implements OnInit, OnDestroy, OnAttach, OnDetach {
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly translations = fileStatusTranslations;
+
     dialogRef: MatDialogRef<any>;
     viewMode: ViewMode = 'STANDARD';
     fullScreen = false;
@@ -58,13 +61,11 @@ export class FilePreviewScreenComponent extends AutoUnsubscribeComponent impleme
     primaryFilters: FilterModel[];
     secondaryFilters: FilterModel[];
     canPerformAnnotationActions: boolean;
-    filesAutoUpdateTimer: Subscription;
     hideSkipped = false;
     displayPDFViewer = false;
     viewDocumentInfo = false;
     excludePages = false;
     @ViewChild(PdfViewerComponent) viewerComponent: PdfViewerComponent;
-    translations = fileStatusTranslations;
     private _instance: WebViewerInstance;
     private _lastPage: string;
     private _reloadFileOnReanalysis = false;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss
index c73223165..de52c4111 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss
@@ -1,5 +1,5 @@
 @import 'apps/red-ui/src/assets/styles/red-mixins';
-@import 'apps/red-ui/src/assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .content-container {
     position: relative;
diff --git a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
index becdd9247..08b34e1bd 100644
--- a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
@@ -19,10 +19,10 @@ import { DossierDictionaryDialogComponent } from '../dialogs/dossier-dictionary-
 import { EditDossierDialogComponent } from '../dialogs/edit-dossier-dialog/edit-dossier-dialog.component';
 import { FileStatusWrapper } from '@models/file/file-status.wrapper';
 import { AssignReviewerApproverDialogComponent } from '../dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component';
-import { AppConfigService } from '../../app-config/app-config.service';
+import { AppConfigService } from '@app-config/app-config.service';
 import { ChangeLegalBasisDialogComponent } from '../dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component';
 import { RecategorizeImageDialogComponent } from '../dialogs/recategorize-image-dialog/recategorize-image-dialog.component';
-import { DialogService } from '@shared/services/dialog.service';
+import { DialogService, largeDialogConfig } from '@shared/services/dialog.service';
 import { ComponentType } from '@angular/cdk/portal';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
@@ -30,7 +30,7 @@ const dialogConfig = {
     width: '662px',
     maxWidth: '90vw',
     autoFocus: false
-};
+} as const;
 
 // TODO: Continue refactor
 
@@ -55,7 +55,7 @@ export class DossiersDialogService extends DialogService<DialogType> {
         },
         editDossier: {
             component: EditDossierDialogComponent,
-            dialogConfig: { ...this._largeConfig }
+            dialogConfig: { ...largeDialogConfig }
         }
     };
 
diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts
index 1a8b11b9d..6401b72b9 100644
--- a/apps/red-ui/src/app/modules/icons/icons.module.ts
+++ b/apps/red-ui/src/app/modules/icons/icons.module.ts
@@ -14,7 +14,6 @@ export class IconsModule {
             'add',
             'analyse',
             'approved',
-            'arrow-down',
             'arrow-down-o',
             'arrow-right',
             'arrow-up',
diff --git a/apps/red-ui/src/app/modules/shared/base/auto-unsubscribe.component.ts b/apps/red-ui/src/app/modules/shared/base/auto-unsubscribe.component.ts
deleted file mode 100644
index 761726bf7..000000000
--- a/apps/red-ui/src/app/modules/shared/base/auto-unsubscribe.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs';
-
-/**
- * Inherit this class when you need to subscribe to observables in your components
- */
-@Component({ template: '' })
-export abstract class AutoUnsubscribeComponent implements OnDestroy {
-    private _subscriptions = new Subscription();
-
-    /**
-     * Call this method when you want to subscribe to an observable
-     * @param subscription - the new subscription to add to subscriptions array
-     */
-    set addSubscription(subscription: Subscription) {
-        this._subscriptions.closed = false;
-        this._subscriptions.add(subscription);
-    }
-
-    /**
-     * This method unsubscribes active subscriptions
-     * If you implement OnDestroy in a component that inherits AutoUnsubscribeComponent,
-     * then you must explicitly call super.ngOnDestroy()
-     */
-    ngOnDestroy(): void {
-        this._subscriptions.unsubscribe();
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts b/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts
index c091d8b73..6f8e09b6c 100644
--- a/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts
+++ b/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts
@@ -4,7 +4,7 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { SearchService } from '../services/search.service';
 import { ScreenStateService } from '../services/screen-state.service';
 import { combineLatest, Observable } from 'rxjs';
-import { AutoUnsubscribeComponent } from './auto-unsubscribe.component';
+import { AutoUnsubscribeComponent } from '@iqser/common-ui';
 import { distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import { PermissionsService } from '@services/permissions.service';
 import { FilterService } from '../services/filter.service';
diff --git a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss
index 4fe813206..5011306cf 100644
--- a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .icon {
     height: 16px;
diff --git a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
index ee83a886d..2ed035b3b 100644
--- a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
@@ -10,20 +10,20 @@
         </mat-select>
     </div>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="save.emit(value)"
         [tooltip]="'assign-user.save' | translate"
         class="pl-1"
         icon="red:check"
         tooltipPosition="below"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="value = oldUser; cancel.emit()"
         [tooltip]="'assign-user.cancel' | translate"
         icon="red:close"
         tooltipPosition="below"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 </div>
 
 <ng-template #avatar let-userId="userId">
diff --git a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss
index f03fcd2fb..a96757204 100644
--- a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss
@@ -9,7 +9,7 @@
     height: 40px;
 }
 
-redaction-circle-button {
+iqser-circle-button {
     margin-left: 2px;
 
     &:first-of-type {
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
deleted file mode 100644
index c15aa6378..000000000
--- a/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<button [class.overlay]="showDot" [class.primary]="primary" mat-button>
-    <span>{{ label }}</span>
-    <mat-icon class="chevron-icon" svgIcon="red:arrow-down"></mat-icon>
-</button>
-<div *ngIf="showDot" class="dot"></div>
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.scss b/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.scss
deleted file mode 100644
index d92b062a9..000000000
--- a/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-button {
-    padding: 0 10px 0 14px;
-
-    mat-icon {
-        width: 14px;
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.ts b/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.ts
deleted file mode 100644
index c6b9438ee..000000000
--- a/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-    selector: 'redaction-chevron-button',
-    templateUrl: './chevron-button.component.html',
-    styleUrls: ['./chevron-button.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ChevronButtonComponent {
-    @Input() label: string;
-    @Input() showDot = false;
-    @Input() primary = false;
-}
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
deleted file mode 100644
index 84679d1c8..000000000
--- a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip">
-    <button
-        (click)="performAction($event)"
-        [class.dark-bg]="type === 'dark-bg'"
-        [class.overlay]="showDot"
-        [class.primary]="type === 'primary'"
-        [class.warn]="type === 'warn'"
-        [disabled]="disabled"
-        [type]="isSubmit ? 'submit' : 'button'"
-        mat-icon-button
-    >
-        <mat-icon [svgIcon]="icon"></mat-icon>
-    </button>
-    <div *ngIf="showDot" class="dot"></div>
-</div>
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.scss b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.scss
deleted file mode 100644
index 9058a325b..000000000
--- a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import '../../../../../../assets/styles/red-variables';
-
-:host {
-    height: var(--size);
-    width: var(--size);
-    align-items: center;
-
-    button {
-        height: var(--size);
-        width: var(--size);
-        line-height: var(--size);
-
-        mat-icon {
-            width: var(--iconSize);
-            height: var(--iconSize);
-            line-height: var(--iconSize);
-            margin: 0;
-
-            svg {
-                line-height: var(--iconSize);
-            }
-        }
-
-        &.mat-button-disabled {
-            cursor: not-allowed;
-        }
-
-        &.primary.mat-button-disabled {
-            background-color: $grey-6;
-            color: $white !important;
-        }
-
-        &.warn:not([disabled]) {
-            background-color: $yellow-2;
-
-            &:hover {
-                background-color: $yellow-2;
-            }
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts
deleted file mode 100644
index 83c816ccf..000000000
--- a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { MatTooltip } from '@angular/material/tooltip';
-
-@Component({
-    selector: 'redaction-circle-button',
-    templateUrl: './circle-button.component.html',
-    styleUrls: ['./circle-button.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CircleButtonComponent implements OnInit {
-    @Input() icon: string;
-    @Input() tooltip: string;
-    @Input() showDot = false;
-    @Input() tooltipPosition: 'above' | 'below' | 'before' | 'after' = 'above';
-    @Input() tooltipClass: string;
-    @Input() disabled = false;
-    @Input() type: 'default' | 'primary' | 'warn' | 'dark-bg' = 'default';
-    @Input() removeTooltip = false;
-    @Input() size = 34;
-    @Input() iconSize = 14;
-    @Input() isSubmit = false;
-    @Output() action = new EventEmitter<any>();
-
-    @ViewChild(MatTooltip) matTooltip: MatTooltip;
-
-    constructor(private _elRef: ElementRef) {}
-
-    ngOnInit(): void {
-        this._elRef.nativeElement.style.setProperty('--size', this.size + 'px');
-        this._elRef.nativeElement.style.setProperty('--iconSize', this.iconSize + 'px');
-    }
-
-    performAction($event: any) {
-        if (!this.disabled) {
-            if (this.removeTooltip) {
-                this.matTooltip.hide();
-                // Timeout to allow tooltip to disappear first,
-                // useful when removing an item from the list without a confirmation dialog
-                setTimeout(() => {
-                    this.action.emit($event);
-                }, 0);
-            } else {
-                this.action.emit($event);
-            }
-        }
-    }
-}
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 70bb58548..ebf1b9659 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,4 +1,4 @@
-<redaction-circle-button
+<iqser-circle-button
     (action)="downloadFiles($event)"
     [disabled]="disabled || !canDownloadFiles"
     [tooltipClass]="tooltipClass"
@@ -6,4 +6,4 @@
     [tooltip]="tooltip"
     [type]="type"
     icon="red:download"
-></redaction-circle-button>
+></iqser-circle-button>
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
index 3cba41a15..3bb732613 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
@@ -4,7 +4,7 @@ import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { FileStatusWrapper } from '@models/file/file-status.wrapper';
 import { FileDownloadService } from '@upload-download/services/file-download.service';
 import { Toaster } from '@services/toaster.service';
-import { AutoUnsubscribeComponent } from '@shared/base/auto-unsubscribe.component';
+import { AutoUnsubscribeComponent, CircleButtonType, CircleButtonTypes } from '@iqser/common-ui';
 import { TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
@@ -20,7 +20,7 @@ export class FileDownloadBtnComponent extends AutoUnsubscribeComponent implement
     @Input() dossier: DossierWrapper;
     @Input() file: FileStatusWrapper | FileStatusWrapper[];
     @Input() tooltipPosition: 'above' | 'below' | 'before' | 'after' = 'above';
-    @Input() type: 'default' | 'primary' | 'warn' | 'dark-bg' = 'default';
+    @Input() type: CircleButtonType = CircleButtonTypes.default;
     @Input() tooltipClass: string;
     @Input() disabled = false;
 
@@ -51,8 +51,6 @@ export class FileDownloadBtnComponent extends AutoUnsubscribeComponent implement
         $event.stopPropagation();
         this.addSubscription = this._fileDownloadService
             .downloadFiles(Array.isArray(this.file) ? this.file : [this.file], this.dossier)
-            .subscribe(() => {
-                this._toaster.info(_('download-status.queued'));
-            });
+            .subscribe(() => this._toaster.info(_('download-status.queued')));
     }
 }
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
deleted file mode 100644
index c00373945..000000000
--- a/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<button
-    (click)="action.emit($event)"
-    [class.has-icon]="!!icon"
-    [class.overlay]="showDot"
-    [class.primary]="type === 'primary'"
-    [class.show-bg]="type === 'show-bg'"
-    [disabled]="disabled"
-    mat-button
-    type="button"
->
-    <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
-    <span>{{ label }}</span>
-</button>
-<div *ngIf="showDot" class="dot"></div>
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.scss b/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.scss
deleted file mode 100644
index cf946631d..000000000
--- a/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import '../../../../../../assets/styles/red-variables';
-
-button {
-    padding: 0 14px;
-    width: 100%;
-
-    &.has-icon {
-        padding: 0 14px 0 10px;
-    }
-
-    &.show-bg {
-        background-color: $grey-6;
-
-        &:not(.mat-button-disabled):hover {
-            background-color: $grey-4;
-        }
-    }
-
-    mat-icon {
-        width: 14px;
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.ts b/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.ts
deleted file mode 100644
index 92737b00f..000000000
--- a/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type IconButtonType = 'default' | 'show-bg' | 'primary';
-
-export enum IconButtonTypes {
-    DEFAULT = 'default',
-    SHOW_BG = 'show-bg',
-    PRIMARY = 'primary'
-}
-
-@Component({
-    selector: 'redaction-icon-button',
-    templateUrl: './icon-button.component.html',
-    styleUrls: ['./icon-button.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class IconButtonComponent {
-    @Input() icon: string;
-    @Input() label: string;
-    @Input() showDot = false;
-    @Input() disabled = false;
-    @Input() type: IconButtonType = IconButtonTypes.DEFAULT;
-    @Output() action = new EventEmitter<any>();
-}
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 09fa1a777..92241ad31 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 [class.overlay]="showDot" mat-button>
     <redaction-initials-avatar [userId]="user.userId" [withName]="true" size="small"></redaction-initials-avatar>
-    <mat-icon svgIcon="red:arrow-down"></mat-icon>
+    <mat-icon svgIcon="iqser:arrow-down"></mat-icon>
 </button>
 <div *ngIf="showDot" class="dot"></div>
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss b/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss
index a50092b2a..bf378e5b9 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../assets/styles/red-variables';
+@import '../../../../../../assets/styles/variables';
 
 :host {
     button {
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
deleted file mode 100644
index 6f8249aac..000000000
--- a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<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/checkbox/round-checkbox.component.scss b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.scss
deleted file mode 100644
index 07887913b..000000000
--- a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import '../../../../../assets/styles/red-variables';
-
-:host {
-    cursor: pointer;
-}
-
-.wrapper {
-    width: var(--size);
-    height: var(--size);
-    box-sizing: border-box;
-    border-radius: 50%;
-
-    &.inactive {
-        border: 1px solid $grey-5;
-        background-color: $white;
-    }
-
-    .mat-icon {
-        color: $primary;
-        width: var(--size);
-        height: var(--size);
-    }
-
-    &.red-bg {
-        .mat-icon {
-            color: $white;
-        }
-
-        &.inactive {
-            border: 1px solid $grey-2;
-            background-color: transparent;
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts
deleted file mode 100644
index 1371ac55e..000000000
--- a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component, ElementRef, HostBinding, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
-
-@Component({
-    selector: 'redaction-round-checkbox',
-    templateUrl: './round-checkbox.component.html',
-    styleUrls: ['./round-checkbox.component.scss']
-})
-export class RoundCheckboxComponent implements OnInit, OnChanges {
-    @Input() size = 20;
-    @Input() active: boolean;
-    @Input() indeterminate: boolean;
-    @Input() type: 'default' | 'red-bg';
-
-    @ViewChild('wrapper', { static: true }) private readonly _wrapper: ElementRef;
-
-    @HostBinding('class.active') private _activeClass: boolean;
-    @HostBinding('class.inactive') private _inactiveClass: boolean;
-    @HostBinding('class.indeterminate') private _indeterminateClass: boolean;
-
-    ngOnInit(): void {
-        this._wrapper.nativeElement.style.setProperty('--size', this.size + 'px');
-    }
-
-    ngOnChanges(): void {
-        this._activeClass = this.active && !this.indeterminate;
-        this._inactiveClass = !this.active && !this.indeterminate;
-        this._indeterminateClass = this.indeterminate;
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
index 3f45bd76a..82f6b5d25 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
@@ -19,7 +19,7 @@
                         {{ currentMatch + '/' + findMatches.length }}
                     </div>
                     <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)="nextSearchMatch()" class="pointer" svgIcon="iqser:arrow-down"></mat-icon>
                     <mat-icon (click)="searchChanged(''); inputElement.focus()" class="pointer" svgIcon="red:close"></mat-icon>
                 </div>
             </div>
@@ -62,12 +62,12 @@
     </div>
 
     <div *ngIf="withFloatingActions && hasChanges && canEdit" [class.offset]="compare" class="changes-box">
-        <redaction-icon-button
+        <iqser-icon-button
             (action)="saveDictionary.emit(currentEntries)"
             [label]="'dictionary-overview.save-changes' | translate"
             icon="red:check"
-            type="primary"
-        ></redaction-icon-button>
+            [type]="iconButtonTypes.primary"
+        ></iqser-icon-button>
         <div (click)="revert()" class="all-caps-label cancel" translate="dictionary-overview.revert-changes"></div>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss
index ccdbe36d5..f1dad3ac6 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 :host {
@@ -73,7 +73,7 @@ ngx-monaco-editor {
                 position: absolute;
                 right: 12px;
                 top: 8px;
-                color: $grey-1;
+                color: $accent;
 
                 .with-input {
                     display: flex;
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
index 3bdaac889..61740c678 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
@@ -6,6 +6,7 @@ import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { IconButtonTypes } from '@iqser/common-ui';
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IDiffEditor = monaco.editor.IDiffEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
@@ -21,6 +22,8 @@ const SMOOTH_SCROLL = 0;
     styleUrls: ['./dictionary-manager.component.scss']
 })
 export class DictionaryManagerComponent implements OnChanges, OnInit {
+    readonly iconButtonTypes = IconButtonTypes;
+
     @Input()
     withFloatingActions = true;
     @Input()
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 71fedfada..37b31da41 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
@@ -11,6 +11,11 @@
         <ng-content></ng-content>
     </div>
     <div class="heading-l">{{ text }}</div>
-    <redaction-icon-button (action)="action.emit()" *ngIf="showButton" [icon]="buttonIcon" [label]="buttonLabel" type="primary">
-    </redaction-icon-button>
+    <iqser-icon-button
+        (action)="action.emit()"
+        *ngIf="showButton"
+        [icon]="buttonIcon"
+        [label]="buttonLabel"
+        [type]="iconButtonTypes.primary"
+    ></iqser-icon-button>
 </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
index 7efc6aa36..997cf9525 100644
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
@@ -17,7 +17,7 @@
     }
 
     > .heading-l,
-    redaction-icon-button {
+    iqser-icon-button {
         margin-top: 24px;
     }
 
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
index e3376736c..973f75a07 100644
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-empty-state',
@@ -7,6 +8,8 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EmptyStateComponent implements OnInit {
+    readonly iconButtonTypes = IconButtonTypes;
+
     @Input() text: string;
     @Input() icon: string;
     @Input() showButton = true;
diff --git a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html
index 7d27c3f02..55747bc04 100644
--- a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html
@@ -1,17 +1,17 @@
-<redaction-icon-button
+<iqser-icon-button
     *ngIf="icon"
     [icon]="icon"
     [label]="filterLabel || ('filter-menu.label' | translate)"
     [matMenuTriggerFor]="filterMenu"
     [showDot]="hasActiveFilters"
-></redaction-icon-button>
+></iqser-icon-button>
 
-<redaction-chevron-button
+<iqser-chevron-button
     *ngIf="!icon"
     [label]="filterLabel || ('filter-menu.label' | translate)"
     [matMenuTriggerFor]="filterMenu"
     [showDot]="hasActiveFilters"
-></redaction-chevron-button>
+></iqser-chevron-button>
 
 <mat-menu #filterMenu="matMenu" (closed)="applyFilters()" [class.padding-bottom-0]="secondaryFilters?.length > 0" xPosition="before">
     <ng-template matMenuContent>
@@ -66,7 +66,7 @@
 <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="iqser:arrow-down"></mat-icon>
             <mat-icon *ngIf="!_(filter).expanded" color="accent" svgIcon="red:arrow-right"></mat-icon>
         </div>
         <div *ngIf="atLeastOneIsExpandable && !isExpandable(filter)" class="arrow-wrapper spacer">&nbsp;</div>
diff --git a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss
index 3df1d09d4..30410b491 100644
--- a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../assets/styles/red-variables';
+@import '../../../../../../assets/styles/variables';
 
 .filter-menu-options,
 .filter-menu-header {
diff --git a/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.scss b/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.scss
index b6eec662a..c692e2ffc 100644
--- a/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../assets/styles/red-variables';
+@import '../../../../../../assets/styles/variables';
 
 :host {
     display: flex;
diff --git a/apps/red-ui/src/app/modules/shared/components/full-page-loading-indicator/full-page-loading-indicator.component.scss b/apps/red-ui/src/app/modules/shared/components/full-page-loading-indicator/full-page-loading-indicator.component.scss
index df45e39cf..2be1e9659 100644
--- a/apps/red-ui/src/app/modules/shared/components/full-page-loading-indicator/full-page-loading-indicator.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/full-page-loading-indicator/full-page-loading-indicator.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .full-page-load-section,
 .full-page-load-spinner {
diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss
index b4ab89ac3..b3063d96f 100644
--- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .wrapper {
     display: flex;
diff --git a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html
index a5cc57156..55f148d32 100644
--- a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html
@@ -13,22 +13,22 @@
         <!--        Search-->
         <mat-icon *ngIf="type === 'search' && !hasContent" class="icon-right" svgIcon="red:search"></mat-icon>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="clearContent()"
             *ngIf="type === 'search' && hasContent"
             [disabled]="form.invalid"
             [size]="25"
             icon="red:close"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!--        Submit-->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="executeAction($event)"
             *ngIf="type === 'action'"
             [disabled]="!hasContent"
             [icon]="icon"
             [isSubmit]="true"
             [size]="25"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
     </div>
 </form>
diff --git a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.scss b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.scss
index d5207753c..f2c22fd06 100644
--- a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.scss
@@ -7,7 +7,7 @@ mat-icon.disabled {
     cursor: not-allowed;
 }
 
-redaction-circle-button {
+iqser-circle-button {
     position: absolute;
     top: 4px;
     right: 5px;
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/models/button-config.model.ts b/apps/red-ui/src/app/modules/shared/components/page-header/models/button-config.model.ts
index d9dca889e..96c46cf75 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/models/button-config.model.ts
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/models/button-config.model.ts
@@ -1,4 +1,4 @@
-import { IconButtonType } from '../../buttons/icon-button/icon-button.component';
+import { IconButtonType } from '@iqser/common-ui';
 import { BaseHeaderConfig } from './base-config.model';
 
 export interface ButtonConfig extends BaseHeaderConfig {
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
index 0ce5bf65d..5f2567f6b 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
@@ -24,36 +24,36 @@
 
     <div *ngIf="showCloseButton || actionConfigs || buttonConfigs" class="actions">
         <ng-container *ngFor="let config of buttonConfigs; trackBy: trackByLabel">
-            <redaction-icon-button
+            <iqser-icon-button
                 (action)="config.action($event)"
                 *ngIf="!config.hide"
                 [icon]="config.icon"
                 [label]="config.label | translate"
                 [type]="config.type"
-            ></redaction-icon-button>
+            ></iqser-icon-button>
         </ng-container>
 
         <ng-container *ngFor="let config of actionConfigs; trackBy: trackByLabel">
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="config.action($event)"
                 *ngIf="!config.hide"
                 [icon]="config.icon"
                 [tooltip]="config.label"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </ng-container>
 
         <!-- Extra custom actions here -->
         <ng-content></ng-content>
 
-        <redaction-circle-button
+        <iqser-circle-button
             *ngIf="showCloseButton"
             [class.ml-6]="actionConfigs"
             [tooltip]="'common.close' | translate"
             icon="red:close"
             redactionNavigateLastDossiersScreen
             tooltipPosition="below"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
     </div>
 </div>
 
diff --git a/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss b/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss
index 05ad52074..ef6d9d9df 100644
--- a/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 :host {
     display: flex;
diff --git a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss
index ef7be607f..c2ea5945b 100644
--- a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/red-ui/src/assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 :host {
     border-radius: 8px;
@@ -7,7 +7,7 @@
     display: block;
 
     &.ng-invalid {
-        border-color: rgba($red-1, 0.3);
+        border-color: rgba($primary, 0.3);
     }
 }
 
@@ -48,12 +48,12 @@ mat-chip {
 
 .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
     background-color: $grey-6;
-    color: $grey-1;
+    color: $accent;
 }
 
 .mat-chip.mat-standard-chip {
     background-color: $white;
-    color: $grey-1;
+    color: $accent;
     margin: 0 0 2px 0;
     transition: background-color 0.2s;
 
diff --git a/apps/red-ui/src/app/modules/shared/components/side-nav/side-nav.component.scss b/apps/red-ui/src/app/modules/shared/components/side-nav/side-nav.component.scss
index 2fe13cfdd..b613c0bf5 100644
--- a/apps/red-ui/src/app/modules/shared/components/side-nav/side-nav.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/side-nav/side-nav.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
 :host {
diff --git a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
index 15b8d3f66..b9f005054 100644
--- a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 :host {
     height: fit-content;
diff --git a/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.scss b/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.scss
index 9f7bb6620..dbb1e1e5f 100644
--- a/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 .rectangle-container {
     flex: 1;
diff --git a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss
index d59b7180c..b8d3cb571 100644
--- a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/variables';
 
 :host {
     display: flex;
diff --git a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
index 3b0b92d8f..689a69a0d 100644
--- a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
@@ -1,10 +1,10 @@
 <div [class.selection-enabled]="selectionEnabled" class="header-item">
-    <redaction-round-checkbox
+    <iqser-round-checkbox
         (click)="screenStateService.selectEntities()"
         *ngIf="selectionEnabled"
         [active]="screenStateService.areAllEntitiesSelected$ | async"
         [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-    ></redaction-round-checkbox>
+    ></iqser-round-checkbox>
 
     <span class="all-caps-label">
         {{ tableHeaderLabel | translate: { length: (screenStateService.displayedLength$ | async) } }}
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 ecd8aed71..ec15cfdac 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
@@ -22,5 +22,5 @@
         </div>
     </div>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/shared/services/dialog.service.ts b/apps/red-ui/src/app/modules/shared/services/dialog.service.ts
index 1714cc862..a17286c39 100644
--- a/apps/red-ui/src/app/modules/shared/services/dialog.service.ts
+++ b/apps/red-ui/src/app/modules/shared/services/dialog.service.ts
@@ -2,6 +2,19 @@ import { Injectable } from '@angular/core';
 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { ComponentType } from '@angular/cdk/portal';
 
+export const largeDialogConfig: MatDialogConfig = {
+    width: '90vw',
+    maxWidth: '90vw',
+    maxHeight: '90vh',
+    autoFocus: false
+} as const;
+
+export const defaultDialogConfig: MatDialogConfig = {
+    width: '662px',
+    maxWidth: '90vw',
+    autoFocus: false
+} as const;
+
 @Injectable()
 export abstract class DialogService<T extends string> {
     protected readonly _config: {
@@ -11,19 +24,6 @@ export abstract class DialogService<T extends string> {
         };
     };
 
-    protected _largeConfig = {
-        width: '90vw',
-        maxWidth: '90vw',
-        maxHeight: '90vh',
-        autoFocus: false
-    };
-
-    protected _defaultConfig = {
-        width: '662px',
-        maxWidth: '90vw',
-        autoFocus: false
-    };
-
     protected constructor(protected readonly _dialog: MatDialog) {}
 
     openDialog(type: T, $event: MouseEvent, data: any, cb?: Function, finallyCb?: Function): MatDialogRef<any> {
@@ -31,7 +31,7 @@ export abstract class DialogService<T extends string> {
 
         $event?.stopPropagation();
         const ref = this._dialog.open(config.component, {
-            ...this._defaultConfig,
+            ...defaultDialogConfig,
             ...(config.dialogConfig || {}),
             data
         });
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index 87a37d79e..4062c0c0f 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -6,10 +6,7 @@ import { InitialsAvatarComponent } from './components/initials-avatar/initials-a
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { TableColNameComponent } from './components/table-col-name/table-col-name.component';
 import { PaginationComponent } from './components/pagination/pagination.component';
-import { ChevronButtonComponent } from './components/buttons/chevron-button/chevron-button.component';
-import { CircleButtonComponent } from './components/buttons/circle-button/circle-button.component';
 import { FileDownloadBtnComponent } from './components/buttons/file-download-btn/file-download-btn.component';
-import { IconButtonComponent } from './components/buttons/icon-button/icon-button.component';
 import { UserButtonComponent } from './components/buttons/user-button/user-button.component';
 import { MatConfigModule } from '../mat-config/mat-config.module';
 import { IconsModule } from '../icons/icons.module';
@@ -25,7 +22,6 @@ import { HiddenActionComponent } from './components/hidden-action/hidden-action.
 import { ConfirmationDialogComponent } from './dialogs/confirmation-dialog/confirmation-dialog.component';
 import { EmptyStateComponent } from './components/empty-state/empty-state.component';
 import { SortByPipe } from './pipes/sort-by.pipe';
-import { RoundCheckboxComponent } from './components/checkbox/round-checkbox.component';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import { SelectComponent } from './components/select/select.component';
@@ -40,8 +36,9 @@ import { InputWithActionComponent } from '@shared/components/input-with-action/i
 import { PageHeaderComponent } from './components/page-header/page-header.component';
 import { DatePipe } from '@shared/pipes/date.pipe';
 import { TableHeaderComponent } from './components/table-header/table-header.component';
+import { CommonUiModule } from '@iqser/common-ui';
 
-const buttons = [ChevronButtonComponent, CircleButtonComponent, FileDownloadBtnComponent, IconButtonComponent, UserButtonComponent];
+const buttons = [FileDownloadBtnComponent, UserButtonComponent];
 
 const components = [
     FullPageLoadingIndicatorComponent,
@@ -58,7 +55,6 @@ const components = [
     ConfirmationDialogComponent,
     EmptyStateComponent,
     SortByPipe,
-    RoundCheckboxComponent,
     SelectComponent,
     SideNavComponent,
     DictionaryManagerComponent,
@@ -71,7 +67,7 @@ const components = [
 
 const utils = [HumanizePipe, DatePipe, SyncWidthDirective, HasScrollbarDirective, NavigateLastDossiersScreenDirective];
 
-const modules = [MatConfigModule, TranslateModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule];
+const modules = [MatConfigModule, TranslateModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, CommonUiModule];
 
 @NgModule({
     declarations: [...components, ...utils, TableHeaderComponent],
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 5e0191a28..414969d1b 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
@@ -16,11 +16,11 @@
             mat-flat-button
             translate="overwrite-files-dialog.options.overwrite"
         ></button>
-        <redaction-icon-button
+        <iqser-icon-button
             (action)="selectOption('skip')"
             [label]="'overwrite-files-dialog.options.skip' | translate"
-            type="show-bg"
-        ></redaction-icon-button>
+            [type]="iconButtonTypes.dark"
+        ></iqser-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/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.ts b/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.ts
index be41c881c..811b5be95 100644
--- a/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.ts
@@ -1,6 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-overwrite-files-dialog',
@@ -8,6 +9,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
     styleUrls: ['./overwrite-files-dialog.component.scss']
 })
 export class OverwriteFilesDialogComponent {
+    readonly iconButtonTypes = IconButtonTypes;
     remember = false;
 
     constructor(
diff --git a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss
index f6a221de7..c77ef3a1b 100644
--- a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss
+++ b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../assets/styles/red-variables.scss';
+@import '../../../../assets/styles/variables';
 
 section {
     position: fixed;
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 18ed6f268..a101afe0c 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
@@ -3,8 +3,8 @@
         <div class="title flex-1">
             {{ '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 (action)="closeDialog()" icon="red:close"></redaction-circle-button>
+        <iqser-circle-button [icon]="'red:status-' + (collapsed ? 'expand' : 'collapse')"></iqser-circle-button>
+        <iqser-circle-button (action)="closeDialog()" icon="red:close"></iqser-circle-button>
     </div>
     <div [hidden]="collapsed" class="upload-download-list">
         <div *ngFor="let dossierId of uploadService.activeDossierKeys">
@@ -39,21 +39,21 @@
                 </div>
 
                 <div *ngIf="model.error || !model.completed" [class.error]="model.error" class="actions">
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (action)="uploadItem(model)"
                         *ngIf="model.error && !model.sizeError"
                         [tooltip]="'upload-status.dialog.actions.re-upload' | translate"
                         icon="red:refresh"
                         tooltipPosition="before"
-                        type="dark-bg"
-                    ></redaction-circle-button>
-                    <redaction-circle-button
+                        [type]="circleButtonTypes.dark"
+                    ></iqser-circle-button>
+                    <iqser-circle-button
                         (action)="cancelItem(model)"
                         [tooltip]="'upload-status.dialog.actions.cancel' | translate"
                         icon="red:close"
                         tooltipPosition="before"
-                        type="dark-bg"
-                    ></redaction-circle-button>
+                        [type]="circleButtonTypes.dark"
+                    ></iqser-circle-button>
                 </div>
             </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 5cbe615b8..779ea4115 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
@@ -1,4 +1,4 @@
-@import '../../../../assets/styles/red-variables';
+@import '../../../../assets/styles/variables';
 @import '../../../../assets/styles/red-mixins';
 
 .red-upload-download-overlay {
@@ -19,14 +19,14 @@
         padding: 16px 14px 16px 16px;
         cursor: pointer;
 
-        color: $grey-1;
+        color: $accent;
         font-size: 13px;
         font-weight: 600;
         line-height: 16px;
 
         mat-icon {
             height: 13px;
-            color: $grey-1;
+            color: $accent;
 
             &.collapse-icon {
                 height: 15px;
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
index 39bbe4f8d..900b15930 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FileUploadModel } from '../model/file-upload.model';
 import { FileUploadService } from '../services/file-upload.service';
 import { OverlayRef } from '@angular/cdk/overlay';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-upload-status-overlay',
@@ -9,8 +10,9 @@ import { OverlayRef } from '@angular/cdk/overlay';
     styleUrls: ['./upload-status-overlay.component.scss']
 })
 export class UploadStatusOverlayComponent implements OnInit {
-    collapsed = true;
+    readonly circleButtonTypes = CircleButtonTypes;
 
+    collapsed = true;
     uploadStatusInterval: number;
 
     constructor(
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index 6cfc820ed..4b001a0b1 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,6 +1,6 @@
 {
-  "OAUTH_URL": "https://dev-06.iqser.cloud/auth/realms/redaction",
-  "API_URL": "https://dev-06.iqser.cloud/redaction-gateway-v1",
+  "OAUTH_URL": "https://red-staging.iqser.cloud/auth/realms/redaction",
+  "API_URL": "https://red-staging.iqser.cloud/redaction-gateway-v1",
   "OAUTH_CLIENT_ID": "redaction",
   "BACKEND_APP_VERSION": "4.4.40",
   "FRONTEND_APP_VERSION": "1.1",
diff --git a/apps/red-ui/src/assets/icons/general/arrow-down.svg b/apps/red-ui/src/assets/icons/general/arrow-down.svg
deleted file mode 100644
index 2dc89f6d2..000000000
--- a/apps/red-ui/src/assets/icons/general/arrow-down.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<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 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>
-    </g>
-</svg>
diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/_variables.scss
similarity index 87%
rename from apps/red-ui/src/assets/styles/red-variables.scss
rename to apps/red-ui/src/assets/styles/_variables.scss
index 97c6cdcd7..fe3412d18 100644
--- a/apps/red-ui/src/assets/styles/red-variables.scss
+++ b/apps/red-ui/src/assets/styles/_variables.scss
@@ -27,8 +27,13 @@ $orange-1: #ff801a;
 $pink-1: #f125de;
 
 $primary: $red-1;
+$primary-2: $red-2;
 $accent: $grey-1;
+$warn: $yellow-2;
 $light: $white;
 $dark: $black;
 
+$btn-bg-hover: $grey-4;
+$btn-bg: $grey-6;
+
 $separator: rgba(226, 228, 233, 0.9);
diff --git a/apps/red-ui/src/assets/styles/red-autocomplete.scss b/apps/red-ui/src/assets/styles/red-autocomplete.scss
index cd517e71b..247dd2133 100644
--- a/apps/red-ui/src/assets/styles/red-autocomplete.scss
+++ b/apps/red-ui/src/assets/styles/red-autocomplete.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 @import 'red-mixins';
 
 .mat-autocomplete-panel {
diff --git a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
index bf602c541..ebded2f56 100644
--- a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
+++ b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 @import 'red-mixins';
 
 .breadcrumbs-container {
@@ -17,7 +17,7 @@
 
 .breadcrumb {
     text-decoration: none;
-    color: $grey-1;
+    color: $accent;
     font-weight: 600;
     width: fit-content;
     white-space: nowrap;
diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss
deleted file mode 100644
index cd54d294d..000000000
--- a/apps/red-ui/src/assets/styles/red-button.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-@import 'red-variables';
-
-.mat-button,
-.mat-flat-button {
-    border-radius: 17px !important;
-    font-size: 13px !important;
-    height: 34px;
-    display: flex !important;
-    align-items: center;
-
-    .mat-button-wrapper {
-        display: flex;
-        align-items: center;
-        line-height: 34px;
-        transition: opacity 0.2s;
-        width: 100%;
-
-        > *:not(:last-child) {
-            margin-right: 6px;
-        }
-
-        > span {
-            margin: auto;
-        }
-    }
-
-    &.mat-button-disabled {
-        .mat-button-wrapper {
-            opacity: 0.3;
-        }
-    }
-}
-
-.mat-button-focus-overlay {
-    opacity: 0 !important;
-}
-
-.mat-flat-button.mat-primary,
-.mat-button.primary {
-    padding: 0 14px;
-    transition: background-color 0.2s, color 0.2s;
-
-    background-color: $red-1;
-
-    &.mat-button-disabled {
-        background-color: $red-1;
-
-        .mat-button-wrapper {
-            color: $white;
-            opacity: 0.5;
-        }
-    }
-
-    &:not(.mat-button-disabled):hover {
-        background-color: $red-2;
-    }
-}
-
-redaction-icon-button,
-redaction-chevron-button,
-redaction-user-button,
-redaction-circle-button {
-    position: relative;
-    display: flex;
-
-    button {
-        font-weight: 400 !important;
-        transition: background-color 0.2s;
-
-        &.overlay {
-            background: rgba($primary, 0.1);
-        }
-
-        &:not(.overlay):hover {
-            background-color: $grey-6;
-        }
-
-        &.primary {
-            font-weight: 500 !important;
-            background-color: $primary;
-            color: $white;
-
-            &:hover {
-                background-color: $red-2;
-            }
-        }
-
-        &.dark-bg:hover {
-            background-color: $grey-4;
-        }
-    }
-
-    .dot {
-        background: $primary;
-        height: 10px;
-        width: 10px;
-        border-radius: 50%;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-}
-
-redaction-chevron-button,
-redaction-circle-button,
-redaction-icon-button {
-    &[aria-expanded='true'] {
-        button {
-            background: rgba($primary, 0.1);
-
-            &.primary {
-                background: $red-2;
-            }
-        }
-    }
-}
diff --git a/apps/red-ui/src/assets/styles/red-checkbox.scss b/apps/red-ui/src/assets/styles/red-checkbox.scss
index 247f79a59..bd3220f78 100644
--- a/apps/red-ui/src/assets/styles/red-checkbox.scss
+++ b/apps/red-ui/src/assets/styles/red-checkbox.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 
 .mat-checkbox .mat-checkbox-frame {
     border: 1px solid $grey-5;
@@ -33,5 +33,5 @@
 }
 
 .mat-checkbox.error .mat-checkbox-label {
-    color: $red-1;
+    color: $primary;
 }
diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss
index 10aa722de..9f9f46893 100644
--- a/apps/red-ui/src/assets/styles/red-components.scss
+++ b/apps/red-ui/src/assets/styles/red-components.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 @import 'red-mixins';
 
 .oval,
@@ -29,7 +29,7 @@
 
     &.gray-red {
         background-color: $grey-6;
-        color: $red-1;
+        color: $primary;
     }
 
     &.lightgray-dark {
@@ -38,11 +38,11 @@
 
     &.lightgray-red {
         background-color: $grey-4;
-        color: $red-1;
+        color: $primary;
     }
 
     &.darkgray-white {
-        background-color: $grey-1;
+        background-color: $accent;
         color: $white;
     }
 
@@ -52,7 +52,7 @@
     }
 
     &.red-white {
-        background-color: $red-1;
+        background-color: $primary;
         color: $white;
     }
 
@@ -130,8 +130,8 @@
 }
 
 .PROCESSING {
-    stroke: $grey-1;
-    background-color: $grey-1;
+    stroke: $accent;
+    background-color: $accent;
 }
 
 .OCR_PROCESSING,
@@ -141,13 +141,13 @@
 }
 
 .REPROCESS {
-    stroke: $grey-1;
-    background-color: $grey-1;
+    stroke: $accent;
+    background-color: $accent;
 }
 
 .FULLREPROCESS {
-    stroke: $grey-1;
-    background-color: $grey-1;
+    stroke: $accent;
+    background-color: $accent;
 }
 
 .EXCLUDED {
@@ -156,8 +156,8 @@
 }
 
 .ERROR {
-    stroke: lighten($red-1, 25%);
-    background-color: lighten($red-1, 25%);
+    stroke: lighten($primary, 25%);
+    background-color: lighten($primary, 25%);
 }
 
 .ACTIVE {
@@ -177,8 +177,8 @@
 
 .MANAGER,
 .MANAGER_ADMIN {
-    stroke: $red-1;
-    background-color: $red-1;
+    stroke: $primary;
+    background-color: $primary;
 }
 
 .overlay-shadow {
diff --git a/apps/red-ui/src/assets/styles/red-controls.scss b/apps/red-ui/src/assets/styles/red-controls.scss
index 919a592f1..bd9fcc563 100644
--- a/apps/red-ui/src/assets/styles/red-controls.scss
+++ b/apps/red-ui/src/assets/styles/red-controls.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 
 .btn-group {
     display: flex;
diff --git a/apps/red-ui/src/assets/styles/red-dialog.scss b/apps/red-ui/src/assets/styles/red-dialog.scss
index d46f7c990..2b1824205 100644
--- a/apps/red-ui/src/assets/styles/red-dialog.scss
+++ b/apps/red-ui/src/assets/styles/red-dialog.scss
@@ -1,7 +1,7 @@
-@import './red-variables';
+@import 'variables';
 
 .mat-dialog-container {
-    color: $grey-1;
+    color: $accent;
     padding: 0 !important;
     border-radius: 8px !important;
 }
diff --git a/apps/red-ui/src/assets/styles/red-editor.scss b/apps/red-ui/src/assets/styles/red-editor.scss
index acd3cf62a..e7d8ca367 100644
--- a/apps/red-ui/src/assets/styles/red-editor.scss
+++ b/apps/red-ui/src/assets/styles/red-editor.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 @import 'red-mixins';
 
 .changed-row-marker {
diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss
index 8f11626e9..72e1b083c 100644
--- a/apps/red-ui/src/assets/styles/red-grid.scss
+++ b/apps/red-ui/src/assets/styles/red-grid.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 @import 'red-mixins';
 
 .header-item {
diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss
index c33a8a099..c87d57727 100644
--- a/apps/red-ui/src/assets/styles/red-input.scss
+++ b/apps/red-ui/src/assets/styles/red-input.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 @import 'red-mixins';
 
 form {
@@ -43,7 +43,7 @@ form {
         mat-icon {
             width: 14px;
             height: 14px;
-            color: $grey-1;
+            color: $accent;
         }
 
         &.disabled {
@@ -62,7 +62,7 @@ form {
 
     .mat-form-field-label {
         opacity: 0.7 !important;
-        color: $grey-1 !important;
+        color: $accent !important;
         transform: translateY(-1.34em) !important;
     }
 
@@ -110,25 +110,25 @@ form {
         }
 
         &:focus {
-            border-color: $grey-1;
+            border-color: $accent;
         }
 
         &::placeholder {
-            color: $grey-1;
+            color: $accent;
             opacity: 0.7;
         }
 
         &.ng-invalid.ng-touched {
-            border-color: rgba($red-1, 0.3);
+            border-color: rgba($primary, 0.3);
 
             &:focus {
-                border-color: $red-1;
+                border-color: $primary;
             }
         }
 
         &:disabled {
             background-color: $grey-2;
-            color: rgba($grey-1, 0.3);
+            color: rgba($accent, 0.3);
         }
     }
 
@@ -169,7 +169,7 @@ form {
         letter-spacing: 0;
         line-height: 14px;
         margin-bottom: 2px;
-        color: $grey-1;
+        color: $accent;
 
         &.mat-checkbox-layout {
             opacity: 1;
diff --git a/apps/red-ui/src/assets/styles/red-list.scss b/apps/red-ui/src/assets/styles/red-list.scss
index 48289a7b9..506c9a718 100644
--- a/apps/red-ui/src/assets/styles/red-list.scss
+++ b/apps/red-ui/src/assets/styles/red-list.scss
@@ -1,7 +1,7 @@
-@import 'red-variables';
+@import 'variables';
 
 .mat-list-item {
-    color: $grey-1 !important;
+    color: $accent !important;
     font-size: 13px !important;
     line-height: 16px !important;
 }
diff --git a/apps/red-ui/src/assets/styles/red-material-theme.scss b/apps/red-ui/src/assets/styles/red-material-theme.scss
index 5a241b1fe..52308f0a6 100644
--- a/apps/red-ui/src/assets/styles/red-material-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-material-theme.scss
@@ -1,13 +1,13 @@
 @use '~@angular/material' as mat;
-@import 'red-variables';
+@import 'variables';
 
 @include mat.core();
 
 $primary-palette: (
-    default: $red-1,
-    lighter: lighten($red-1, 30%),
-    darker: darken($red-1, 30%),
-    text: $red-1,
+    default: $primary,
+    lighter: lighten($primary, 30%),
+    darker: darken($primary, 30%),
+    text: $primary,
     contrast: (
         default: $light,
         lighter: $light,
@@ -16,10 +16,10 @@ $primary-palette: (
 );
 
 $secondary-palette: (
-    default: $grey-1,
-    lighter: lighten($grey-1, 30%),
-    darker: darken($grey-1, 30%),
-    text: $grey-1,
+    default: $accent,
+    lighter: lighten($accent, 30%),
+    darker: darken($accent, 30%),
+    text: $accent,
     contrast: (
         default: $light,
         lighter: $light,
@@ -28,10 +28,10 @@ $secondary-palette: (
 );
 
 $red-palette: (
-    default: $red-1,
-    lighter: lighten($red-1, 30%),
-    darker: darken($red-1, 30%),
-    text: $red-1,
+    default: $primary,
+    lighter: lighten($primary, 30%),
+    darker: darken($primary, 30%),
+    text: $primary,
     contrast: (
         default: $light,
         lighter: $light,
diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss
index 41e5d63ec..65b94e05f 100644
--- a/apps/red-ui/src/assets/styles/red-menu.scss
+++ b/apps/red-ui/src/assets/styles/red-menu.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 
 .mat-menu-panel {
     border-radius: 8px !important;
diff --git a/apps/red-ui/src/assets/styles/red-mixins.scss b/apps/red-ui/src/assets/styles/red-mixins.scss
index 3928ec4c5..7236bd77b 100644
--- a/apps/red-ui/src/assets/styles/red-mixins.scss
+++ b/apps/red-ui/src/assets/styles/red-mixins.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 
 @mixin line-clamp($lines) {
     display: -webkit-box;
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index f3cd96c22..36e12ba11 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 @import 'red-mixins';
 
 html,
@@ -333,7 +333,7 @@ section.settings {
     .divider {
         height: 1px;
         opacity: 0.15;
-        background-color: $grey-1;
+        background-color: $accent;
     }
 }
 
diff --git a/apps/red-ui/src/assets/styles/red-progress-bar.scss b/apps/red-ui/src/assets/styles/red-progress-bar.scss
index 71f52195e..22eadd163 100644
--- a/apps/red-ui/src/assets/styles/red-progress-bar.scss
+++ b/apps/red-ui/src/assets/styles/red-progress-bar.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 
 .mat-progress-bar {
     height: 6px;
diff --git a/apps/red-ui/src/assets/styles/red-select.scss b/apps/red-ui/src/assets/styles/red-select.scss
index eaf80a030..1a9c3b0ac 100644
--- a/apps/red-ui/src/assets/styles/red-select.scss
+++ b/apps/red-ui/src/assets/styles/red-select.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 
 .mat-select-panel .mat-option {
     &:hover:not(.mat-option-disabled),
@@ -8,7 +8,7 @@
 
     &.mat-selected:not(.mat-option-multiple) {
         background-color: rgba($primary, 0.2);
-        color: $grey-1;
+        color: $accent;
     }
 }
 
diff --git a/apps/red-ui/src/assets/styles/red-slider.scss b/apps/red-ui/src/assets/styles/red-slider.scss
index db97150e2..4e2e4e181 100644
--- a/apps/red-ui/src/assets/styles/red-slider.scss
+++ b/apps/red-ui/src/assets/styles/red-slider.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 
 .mat-slider-horizontal {
     width: 140px;
diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss
index ba093c1d9..f0ec2d474 100644
--- a/apps/red-ui/src/assets/styles/red-tables.scss
+++ b/apps/red-ui/src/assets/styles/red-tables.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 @import 'red-mixins';
 
 .default-table {
@@ -58,7 +58,7 @@ cdk-virtual-scroll-viewport {
                 &.selection-column {
                     padding-right: 0 !important;
 
-                    redaction-round-checkbox {
+                    iqser-round-checkbox .wrapper {
                         opacity: 0;
                         transition: opacity 0.2s;
 
@@ -92,7 +92,7 @@ cdk-virtual-scroll-viewport {
                     width: 14px;
                 }
 
-                redaction-circle-button:not(:last-child) {
+                iqser-circle-button:not(:last-child) {
                     margin-right: 2px;
                 }
 
@@ -112,7 +112,7 @@ cdk-virtual-scroll-viewport {
                 > div {
                     background-color: $grey-8;
 
-                    &.selection-column redaction-round-checkbox {
+                    &.selection-column iqser-round-checkbox .wrapper {
                         opacity: 1;
                     }
                 }
diff --git a/apps/red-ui/src/assets/styles/red-tabs.scss b/apps/red-ui/src/assets/styles/red-tabs.scss
index 8cbc5e753..d6353c88f 100644
--- a/apps/red-ui/src/assets/styles/red-tabs.scss
+++ b/apps/red-ui/src/assets/styles/red-tabs.scss
@@ -1,4 +1,4 @@
-@import './red-variables';
+@import 'variables';
 
 .red-tab {
     &:not(:last-child) {
@@ -23,7 +23,7 @@
     }
 
     &.disabled {
-        color: rgba($grey-1, 0.3);
+        color: rgba($accent, 0.3);
         cursor: not-allowed;
     }
 }
diff --git a/apps/red-ui/src/assets/styles/red-text-styles.scss b/apps/red-ui/src/assets/styles/red-text-styles.scss
index b80aa2226..6da1afefc 100644
--- a/apps/red-ui/src/assets/styles/red-text-styles.scss
+++ b/apps/red-ui/src/assets/styles/red-text-styles.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 @import 'red-mixins';
 
 a {
@@ -97,7 +97,7 @@ pre {
 }
 
 .large-label {
-    color: $grey-1;
+    color: $accent;
     font-size: 13px;
     line-height: 16px;
 }
diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss
index c90b38a4a..1e411145a 100644
--- a/apps/red-ui/src/assets/styles/red-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-theme.scss
@@ -5,7 +5,6 @@
 @import 'red-text-styles';
 @import 'red-dialog';
 @import 'red-input';
-@import 'red-button';
 @import 'red-select';
 @import 'red-autocomplete';
 @import 'red-list';
diff --git a/apps/red-ui/src/assets/styles/red-toasts.scss b/apps/red-ui/src/assets/styles/red-toasts.scss
index 99c230e0c..bd230786c 100644
--- a/apps/red-ui/src/assets/styles/red-toasts.scss
+++ b/apps/red-ui/src/assets/styles/red-toasts.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 
 $toast-width: 400px;
 
@@ -70,11 +70,11 @@ $toast-width: 400px;
 .toast-warning,
 .toast-success {
     .toast-message {
-        color: $grey-1;
+        color: $accent;
     }
 
     .toast-close-button {
-        color: $grey-1;
+        color: $accent;
     }
 }
 
@@ -90,17 +90,17 @@ $toast-width: 400px;
 }
 
 .toast-error {
-    background-color: $red-1;
+    background-color: $primary;
     color: $white;
 }
 
 .toast-warning {
     background-color: $yellow-2;
-    color: $grey-1;
+    color: $accent;
 }
 
 .toast-info {
-    background-color: $grey-1;
+    background-color: $accent;
 }
 
 .inline-dialog-toast {
diff --git a/apps/red-ui/src/assets/styles/red-toggle-button.scss b/apps/red-ui/src/assets/styles/red-toggle-button.scss
index 13bea0ab6..23758c898 100644
--- a/apps/red-ui/src/assets/styles/red-toggle-button.scss
+++ b/apps/red-ui/src/assets/styles/red-toggle-button.scss
@@ -1,4 +1,4 @@
-@import './red-variables';
+@import 'variables';
 
 .mat-button-toggle-standalone,
 .mat-button-toggle-group {
diff --git a/apps/red-ui/src/assets/styles/red-toggle.scss b/apps/red-ui/src/assets/styles/red-toggle.scss
index b4cadc526..d82c96f82 100644
--- a/apps/red-ui/src/assets/styles/red-toggle.scss
+++ b/apps/red-ui/src/assets/styles/red-toggle.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 
 .mat-slide-toggle {
     .mat-slide-toggle-bar {
diff --git a/apps/red-ui/src/assets/styles/red-tooltips.scss b/apps/red-ui/src/assets/styles/red-tooltips.scss
index b7d8e6f77..3e4f60d72 100644
--- a/apps/red-ui/src/assets/styles/red-tooltips.scss
+++ b/apps/red-ui/src/assets/styles/red-tooltips.scss
@@ -1,4 +1,4 @@
-@import 'red-variables';
+@import 'variables';
 
 .mat-tooltip {
     background-color: $accent;
diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss
index f2cec9162..2b4844453 100644
--- a/apps/red-ui/src/styles.scss
+++ b/apps/red-ui/src/styles.scss
@@ -1,2 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
-@import './assets/styles/red-theme';
+@import 'assets/styles/red-theme';
diff --git a/bamboo-specs/src/main/java/buildjob/PlanSpec.java b/bamboo-specs/src/main/java/buildjob/PlanSpec.java
index a0e019d84..516ca1f34 100644
--- a/bamboo-specs/src/main/java/buildjob/PlanSpec.java
+++ b/bamboo-specs/src/main/java/buildjob/PlanSpec.java
@@ -73,18 +73,19 @@ public class PlanSpec {
                 new VcsCheckoutTask().description("Checkout Default Repository")
                     .checkoutItems(new CheckoutItem().defaultRepository().path("redaction-ui")),
                 new VcsCheckoutTask().description("Checkout UI Shared Lib")
-                    .checkoutItems(new CheckoutItem().repository("Shared Libraries / common-ui").path("redaction-ui/libs/common-ui")),
-          
+                    .checkoutItems(new CheckoutItem().repository("Shared Libraries / common-ui").path("common-ui")),
+
                 // Build
                 new ScriptTask().description("Build")
                     .location(ScriptTaskProperties.Location.FILE)
+                    .workingSubdirectory("redaction-ui")
                     .fileFromPath("bamboo-specs/src/main/resources/scripts/build.sh")
                     .environmentVariables(
                         "PROJECT=\"" + project + "\" " +
                             "BAMBOO_DOWNLOAD_PASS=\"${bamboo.bamboo_download_pass}\" " +
                             "BAMBOO_DOWNLOAD_USER=\"${bamboo.bamboo_download_user}\" "),
                 // read version from artifact
-                new InjectVariablesTask().path("version.properties"),
+                new InjectVariablesTask().path("redaction-ui/version.properties"),
                 // commit release
                 new VcsCommitTask().commitMessage("chore(release)").repository("RED / ui"),
                 // create tag with this version
@@ -109,7 +110,7 @@ public class PlanSpec {
                     .sourcePlan(new PlanIdentifier("RED", "UI"))
                     .artifacts(new DownloadItem().artifact("version")),
                 // read version from artifact
-                new InjectVariablesTask().path("version.properties"),
+                new InjectVariablesTask().path("redaction-ui/version.properties"),
 
                 new ScriptTask().description("checkout tag").inlineBody("git checkout tags/${bamboo.inject.APP_VERSION}"),
 
diff --git a/bamboo-specs/src/main/resources/scripts/build.sh b/bamboo-specs/src/main/resources/scripts/build.sh
index 958b26234..634558591 100755
--- a/bamboo-specs/src/main/resources/scripts/build.sh
+++ b/bamboo-specs/src/main/resources/scripts/build.sh
@@ -1,9 +1,12 @@
 #!/bin/bash
 set -e
 
+
 imageName="nexus.iqser.com:5001/red/$PROJECT"
 dockerfileLocation="docker/$PROJECT/Dockerfile"
 
+mv ../common-ui ./libs/
+
 echo "On branch $bamboo_planRepository_branchName building project $PROJECT"
 # shellcheck disable=SC2154
 if [[ "$bamboo_planRepository_branchName" == "master" ]]
diff --git a/libs/common-ui b/libs/common-ui
new file mode 160000
index 000000000..1633911e1
--- /dev/null
+++ b/libs/common-ui
@@ -0,0 +1 @@
+Subproject commit 1633911e1339b39f96f243885defec4a92b6e6eb
diff --git a/libs/common-ui/.eslintrc.json b/libs/common-ui/.eslintrc.json
deleted file mode 100644
index ae74dc230..000000000
--- a/libs/common-ui/.eslintrc.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "extends": ["../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts"],
-      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
-      "rules": {
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "redaction",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "redaction",
-            "style": "kebab-case"
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
-      "rules": {}
-    }
-  ]
-}
diff --git a/libs/common-ui/README.md b/libs/common-ui/README.md
deleted file mode 100644
index f2a6bbc60..000000000
--- a/libs/common-ui/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# common-ui
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test common-ui` to execute the unit tests.
diff --git a/libs/common-ui/jest.config.js b/libs/common-ui/jest.config.js
deleted file mode 100644
index f06ef5fa7..000000000
--- a/libs/common-ui/jest.config.js
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
-    displayName: 'common-ui',
-    preset: '../../jest.preset.js',
-    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-    globals: {
-        'ts-jest': {
-            tsconfig: '<rootDir>/tsconfig.spec.json',
-            stringifyContentPathRegex: '\\.(html|svg)$',
-            astTransformers: {
-                before: ['jest-preset-angular/build/InlineFilesTransformer', 'jest-preset-angular/build/StripStylesTransformer']
-            }
-        }
-    },
-    coverageDirectory: '../../coverage/libs/common-ui',
-    snapshotSerializers: [
-        'jest-preset-angular/build/serializers/no-ng-attributes',
-        'jest-preset-angular/build/serializers/ng-snapshot',
-        'jest-preset-angular/build/serializers/html-comment'
-    ]
-};
diff --git a/libs/common-ui/src/index.ts b/libs/common-ui/src/index.ts
deleted file mode 100644
index 3b5ad4f19..000000000
--- a/libs/common-ui/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './lib/common-ui.module';
diff --git a/libs/common-ui/src/lib/common-ui.module.ts b/libs/common-ui/src/lib/common-ui.module.ts
deleted file mode 100644
index e4e641375..000000000
--- a/libs/common-ui/src/lib/common-ui.module.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-    imports: [CommonModule]
-})
-export class CommonUiModule {}
diff --git a/libs/common-ui/src/test-setup.ts b/libs/common-ui/src/test-setup.ts
deleted file mode 100644
index 1100b3e8a..000000000
--- a/libs/common-ui/src/test-setup.ts
+++ /dev/null
@@ -1 +0,0 @@
-import 'jest-preset-angular/setup-jest';
diff --git a/libs/common-ui/tsconfig.json b/libs/common-ui/tsconfig.json
deleted file mode 100644
index d7a0c7629..000000000
--- a/libs/common-ui/tsconfig.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "compilerOptions": {
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "angularCompilerOptions": {
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}
diff --git a/libs/common-ui/tsconfig.lib.json b/libs/common-ui/tsconfig.lib.json
deleted file mode 100644
index bbcc12b1c..000000000
--- a/libs/common-ui/tsconfig.lib.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "target": "es2015",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": [],
-    "lib": ["dom", "es2018"]
-  },
-  "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
-  "include": ["**/*.ts"]
-}
diff --git a/libs/common-ui/tsconfig.spec.json b/libs/common-ui/tsconfig.spec.json
deleted file mode 100644
index cfff29a54..000000000
--- a/libs/common-ui/tsconfig.spec.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node"]
-  },
-  "files": ["src/test-setup.ts"],
-  "include": ["**/*.spec.ts", "**/*.d.ts"]
-}
diff --git a/paligo-styles/footer.scss b/paligo-styles/footer.scss
index 0b4da5e57..47cbce181 100644
--- a/paligo-styles/footer.scss
+++ b/paligo-styles/footer.scss
@@ -1,4 +1,4 @@
-@import '../apps/red-ui/src/assets/styles/red-variables';
+@import '../apps/red-ui/src/assets/styles/variables';
 @import 'mixin';
 
 .portal-footer,
diff --git a/paligo-styles/header.scss b/paligo-styles/header.scss
index 5d9afe612..b782d64b8 100644
--- a/paligo-styles/header.scss
+++ b/paligo-styles/header.scss
@@ -1,4 +1,4 @@
-@import '../apps/red-ui/src/assets/styles/red-variables';
+@import '../apps/red-ui/src/assets/styles/variables';
 @import 'mixin';
 
 .portal-header {
diff --git a/paligo-styles/homepage.scss b/paligo-styles/homepage.scss
index 45d3aa3e8..496e6321a 100644
--- a/paligo-styles/homepage.scss
+++ b/paligo-styles/homepage.scss
@@ -1,4 +1,4 @@
-@import '../apps/red-ui/src/assets/styles/red-variables';
+@import '../apps/red-ui/src/assets/styles/variables';
 @import 'mixin';
 
 .portal-publications,
diff --git a/paligo-styles/manual-sidebar.scss b/paligo-styles/manual-sidebar.scss
index abdc8c4fd..08c4d61ff 100644
--- a/paligo-styles/manual-sidebar.scss
+++ b/paligo-styles/manual-sidebar.scss
@@ -1,9 +1,9 @@
-@import '../apps/red-ui/src/assets/styles/red-variables';
+@import '../apps/red-ui/src/assets/styles/variables';
 @import '../apps/red-ui/src/assets/styles/red-mixins';
 @import 'mixin';
 
 .site-sidebar {
-    background-color: $grey-1;
+    background-color: $accent;
 
     .logo {
         padding: 24px 0 30px 0 !important;
diff --git a/paligo-styles/manual.scss b/paligo-styles/manual.scss
index f99e2f460..9170635c5 100644
--- a/paligo-styles/manual.scss
+++ b/paligo-styles/manual.scss
@@ -1,4 +1,4 @@
-@import '../apps/red-ui/src/assets/styles/red-variables';
+@import '../apps/red-ui/src/assets/styles/variables';
 @import 'manual-sidebar';
 
 .toolbar {
@@ -13,16 +13,16 @@
     font-weight: 600;
 
     a {
-        color: $grey-1;
+        color: $accent;
 
         &:hover {
-            color: $red-1;
+            color: $primary;
             text-decoration: underline;
         }
     }
 
     .breadcrumb-node {
-        color: $red-1;
+        color: $primary;
     }
 }
 
@@ -66,10 +66,10 @@ main article {
     margin-bottom: 32px;
     padding: 16px 24px 16px 68px;
     background-color: $white;
-    border-left: 4px solid $red-1;
+    border-left: 4px solid $primary;
 
     &:before {
-        color: $red-1;
+        color: $primary;
         width: 20px;
         height: 20px;
         text-align: center;
diff --git a/paligo-styles/mixin.scss b/paligo-styles/mixin.scss
index d0e9a541b..d39b54307 100644
--- a/paligo-styles/mixin.scss
+++ b/paligo-styles/mixin.scss
@@ -1,4 +1,4 @@
-@import '../apps/red-ui/src/assets/styles/red-variables';
+@import '../apps/red-ui/src/assets/styles/variables';
 
 @mixin search-input {
     .search-field {
@@ -61,7 +61,7 @@
 }
 
 @mixin button {
-    color: $red-1;
+    color: $primary;
     font-size: 14px;
     font-weight: 600;
     line-height: 19px;
@@ -74,7 +74,7 @@
     &:hover {
         text-decoration: underline;
         background-color: transparent;
-        color: $red-1;
+        color: $primary;
     }
 }
 
diff --git a/paligo-styles/search.scss b/paligo-styles/search.scss
index de70de9b5..d872af42a 100644
--- a/paligo-styles/search.scss
+++ b/paligo-styles/search.scss
@@ -1,4 +1,4 @@
-@import '../apps/red-ui/src/assets/styles/red-variables';
+@import '../apps/red-ui/src/assets/styles/variables';
 @import 'mixin';
 
 .portal-search-result {
diff --git a/paligo-styles/style.scss b/paligo-styles/style.scss
index 3dfea03b4..ef0bde074 100644
--- a/paligo-styles/style.scss
+++ b/paligo-styles/style.scss
@@ -1,4 +1,4 @@
-@import '../apps/red-ui/src/assets/styles/red-variables';
+@import '../apps/red-ui/src/assets/styles/variables';
 @import '../apps/red-ui/src/assets/styles/red-mixins';
 @import 'fonts';
 @import 'header';
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 3218e8111..add38d420 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -30,7 +30,7 @@
       "@shared/*": ["apps/red-ui/src/app/modules/shared/*"],
       "@app-config/*": ["apps/red-ui/src/app/modules/app-config/*"],
       "@upload-download/*": ["apps/red-ui/src/app/modules/upload-download/*"],
-      "@devplant/common-ui": ["libs/common-ui/src/index.ts"]
+      "@iqser/common-ui": ["libs/common-ui/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"],