diff --git a/frontend/src/app/modules/common/common-components.module.ts b/frontend/src/app/modules/common/common-components.module.ts
index ab0385c238..3d29f50b23 100644
--- a/frontend/src/app/modules/common/common-components.module.ts
+++ b/frontend/src/app/modules/common/common-components.module.ts
@@ -34,6 +34,7 @@ import { StatusDropdown } from './status-dropdown/status-dropdown.component';
 import { CustomConfirmDialogComponent } from './custom-confirm-dialog/custom-confirm-dialog.component';
 import { TreeGraphComponent } from './tree-graph/tree-graph.component';
 import { GuardianSwitchButton } from './guardian-switch-button/guardian-switch-button.component';
+import { GuardianTabsSwitch } from './guardian-tabs-switch/guardian-tabs-switch.component';
 import { ImportEntityDialog } from './import-entity-dialog/import-entity-dialog.component';
 import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
 import { GuardianDialogService } from '../../services/guardian-dialog.service';
@@ -53,6 +54,8 @@ import { PluralizePipe } from './pipes/pluralize.pipe';
 import { PagesControl } from './pages-control/pages-control.component';
 import { GridDialogComponent } from './grid-dialog/grid-dialog.component';
 import { ContentSearchComponent } from './content-search/content-search.component';
+import { CommonDialogComponent, DialogHeaderDirective, DialogFooterDirective } from './common-dialog/common-dialog.component';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
 
 @NgModule({
     declarations: [
@@ -79,6 +82,7 @@ import { ContentSearchComponent } from './content-search/content-search.componen
         CustomConfirmDialogComponent,
         TreeGraphComponent,
         GuardianSwitchButton,
+        GuardianTabsSwitch,
         ImportEntityDialog,
         MathLiveComponent,
         MenuButton,
@@ -93,6 +97,9 @@ import { ContentSearchComponent } from './content-search/content-search.componen
         PagesControl,
         GridDialogComponent,
         ContentSearchComponent,
+        CommonDialogComponent,
+        DialogHeaderDirective,
+        DialogFooterDirective,
     ],
     imports: [
         CommonModule,
@@ -112,6 +119,7 @@ import { ContentSearchComponent } from './content-search/content-search.componen
         TooltipModule,
         DynamicDialogModule,
         AgGridModule,
+        ProgressSpinnerModule,
     ],
     providers: [
         provideNgxMask(),
@@ -141,6 +149,7 @@ import { ContentSearchComponent } from './content-search/content-search.componen
         CustomConfirmDialogComponent,
         TreeGraphComponent,
         GuardianSwitchButton,
+        GuardianTabsSwitch,
         ImportEntityDialog,
         MathLiveComponent,
         MenuButton,
@@ -155,6 +164,9 @@ import { ContentSearchComponent } from './content-search/content-search.componen
         PagesControl,
         GridDialogComponent,
         ContentSearchComponent,
+        CommonDialogComponent,
+        DialogHeaderDirective,
+        DialogFooterDirective,
     ]
 })
 export class CommonComponentsModule {
diff --git a/frontend/src/app/modules/common/common-dialog/common-dialog.component.html b/frontend/src/app/modules/common/common-dialog/common-dialog.component.html
new file mode 100644
index 0000000000..276afbda71
--- /dev/null
+++ b/frontend/src/app/modules/common/common-dialog/common-dialog.component.html
@@ -0,0 +1,47 @@
+<div class="guardian-common-dialog" [style.width]="width" [style.height]="height">
+  @if (showHeader) {
+    <div class="dialog-header">
+      <div class="header-container">
+        <ng-content select="[appDialogHeader]"></ng-content>
+        @if (!hasCustomHeader && title) {
+          <div class="header-text">{{ title }}</div>
+        }
+      </div>
+      <div class="header-icon" (click)="close.emit()">
+        <svg-icon src="/assets/images/icons/close.svg" svgClass="icon-color-close"></svg-icon>
+      </div>
+    </div>
+  }
+
+  <div class="dialog-body" [style.max-height]="bodyMaxHeight">
+    @if (!loading) {
+      <ng-content></ng-content>
+    } @else {
+      <div class="loading">
+        <p-progressSpinner></p-progressSpinner>
+      </div>
+    }
+  </div>
+
+  @if (showFooter) {
+    <div class="dialog-footer">
+      <ng-content select="[appDialogFooter]"></ng-content>
+      @if (!hasCustomFooter) {
+        <div class="action-buttons">
+          @if (cancelVisible) {
+            <div class="dialog-button">
+              <button (click)="cancel.emit()"
+                class="guardian-button guardian-button-secondary">{{ cancelLabel }}</button>
+            </div>
+          }
+          @if (confirmVisible) {
+            <div class="dialog-button">
+              <button [disabled]="confirmDisabled" (click)="confirm.emit()"
+                class="guardian-button guardian-button-primary">{{ confirmLabel }}</button>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  }
+</div>
diff --git a/frontend/src/app/modules/common/common-dialog/common-dialog.component.scss b/frontend/src/app/modules/common/common-dialog/common-dialog.component.scss
new file mode 100644
index 0000000000..6a3799f97f
--- /dev/null
+++ b/frontend/src/app/modules/common/common-dialog/common-dialog.component.scss
@@ -0,0 +1,32 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.guardian-common-dialog {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+
+    .dialog-body {
+        flex: 1 1 auto;
+        min-height: 0;
+        margin-top: 16px;
+    }
+
+    .dialog-footer {
+        flex-shrink: 0;
+    }
+}
+
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+    min-height: 120px;
+    background: var(--guardian-background, #fff);
+}
diff --git a/frontend/src/app/modules/common/common-dialog/common-dialog.component.ts b/frontend/src/app/modules/common/common-dialog/common-dialog.component.ts
new file mode 100644
index 0000000000..e644e1018d
--- /dev/null
+++ b/frontend/src/app/modules/common/common-dialog/common-dialog.component.ts
@@ -0,0 +1,57 @@
+import {
+    AfterContentInit,
+    Component,
+    ContentChild,
+    Directive,
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+
+@Directive({
+    selector: '[appDialogHeader]',
+    standalone: false,
+})
+export class DialogHeaderDirective {}
+
+@Directive({
+    selector: '[appDialogFooter]',
+    standalone: false,
+})
+export class DialogFooterDirective {}
+
+@Component({
+    selector: 'app-common-dialog',
+    templateUrl: './common-dialog.component.html',
+    styleUrls: ['./common-dialog.component.scss'],
+    standalone: false,
+})
+export class CommonDialogComponent implements AfterContentInit {
+    @Input() title: string;
+    @Input() confirmLabel: string = 'Confirm';
+    @Input() cancelLabel: string = 'Close';
+    @Input() confirmDisabled: boolean = false;
+    @Input() confirmVisible: boolean = true;
+    @Input() cancelVisible: boolean = true;
+    @Input() showHeader: boolean = true;
+    @Input() showFooter: boolean = true;
+    @Input() loading: boolean = false;
+    @Input() width: string;
+    @Input() height: string;
+    @Input() bodyMaxHeight: string;
+
+    @Output() confirm: EventEmitter<void> = new EventEmitter<void>();
+    @Output() cancel: EventEmitter<void> = new EventEmitter<void>();
+    @Output() close: EventEmitter<void> = new EventEmitter<void>();
+
+    @ContentChild(DialogHeaderDirective) private headerContent?: DialogHeaderDirective;
+    @ContentChild(DialogFooterDirective) private footerContent?: DialogFooterDirective;
+
+    public hasCustomHeader: boolean = false;
+    public hasCustomFooter: boolean = false;
+
+    public ngAfterContentInit(): void {
+        this.hasCustomHeader = !!this.headerContent;
+        this.hasCustomFooter = !!this.footerContent;
+    }
+}
diff --git a/frontend/src/app/modules/common/data-input-dialog/data-input-dialog.component.html b/frontend/src/app/modules/common/data-input-dialog/data-input-dialog.component.html
index 3e6ee70a3a..15e0c51de0 100644
--- a/frontend/src/app/modules/common/data-input-dialog/data-input-dialog.component.html
+++ b/frontend/src/app/modules/common/data-input-dialog/data-input-dialog.component.html
@@ -1,13 +1,11 @@
-<div class="dialog-header">
-  <div class="header-container">
-    <div class="header-text">{{ title }}</div>
-  </div>
-  <div class="header-icon" (click)="onNoClick()">
-    <svg-icon src="/assets/images/icons/close.svg" svgClass="icon-color-close"></svg-icon>
-  </div>
-</div>
-
-<div class="dialog-body">
+<app-common-dialog
+  [title]="title"
+  cancelLabel="Close"
+  [confirmLabel]="button"
+  [confirmDisabled]="!dataForm.valid"
+  (cancel)="onNoClick()"
+  (close)="onNoClick()"
+  (confirm)="dialogRef.close(dataForm.value)">
   <form [formGroup]="dataForm">
     @for (field of fieldsConfig; track field) {
       <div class="guardian-input-container">
@@ -21,20 +19,4 @@
       </div>
     }
   </form>
-</div>
-
-<div class="dialog-footer">
-  <div class="action-buttons">
-    <div class="dialog-button">
-      <button
-        (click)="onNoClick()"
-      class="guardian-button guardian-button-secondary">Close</button>
-    </div>
-    <div class="dialog-button">
-      <button
-        [disabled]="!dataForm.valid"
-        (click)="dialogRef.close(dataForm.value)"
-      class="guardian-button guardian-button-primary">{{button}}</button>
-    </div>
-  </div>
-</div>
\ No newline at end of file
+</app-common-dialog>
diff --git a/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.html b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.html
new file mode 100644
index 0000000000..c52fb43dd0
--- /dev/null
+++ b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.html
@@ -0,0 +1,11 @@
+<div class="tabs-nav">
+  <p-tabs [value]="value">
+    <p-tablist>
+      @for (tab of options; track tab.value) {
+        <p-tab [value]="tab.value" (click)="onSelect(tab.value)">
+          <div class="tabview-label">{{ tab.label }}</div>
+        </p-tab>
+      }
+    </p-tablist>
+  </p-tabs>
+</div>
diff --git a/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.scss b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.scss
new file mode 100644
index 0000000000..931e0b3e17
--- /dev/null
+++ b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.scss
@@ -0,0 +1,33 @@
+:host ::ng-deep {
+    .p-tab {
+        padding: 0 !important;
+        color: var(--color-grey-5) !important;
+    }
+
+    .p-tabs,
+    .p-tablist,
+    .p-tablist-content,
+    .p-tablist-tab-list {
+        background: transparent;
+    }
+
+    .p-tabpanels {
+        background: transparent;
+    }
+
+    .p-tabs .p-tab.p-tab-active,
+    .p-tabs .p-tab[data-p-active='true'] {
+        color: var(--color-primary) !important;
+        border-color: var(--color-primary);
+    }
+}
+
+.tabview-label {
+    padding: 10px 25px 10px 25px;
+    background: var(--guardian-grey-background, #f9fafc);
+    text-align: center;
+    font-family: Inter, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+}
diff --git a/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.ts b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.ts
new file mode 100644
index 0000000000..819ce2ecc2
--- /dev/null
+++ b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.ts
@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+/**
+ * Reusable tab-style switcher matching the Schemas page tabs.
+ * Renders a list of options as PrimeNG tabs and emits the selected value.
+ */
+@Component({
+    selector: 'guardian-tabs-switch',
+    templateUrl: './guardian-tabs-switch.component.html',
+    styleUrls: ['./guardian-tabs-switch.component.scss'],
+    standalone: false
+})
+export class GuardianTabsSwitch {
+    @Input('options') options: { label: string; value: any }[] = [];
+    @Input('value') value: any;
+
+    @Output('valueChange') valueChange = new EventEmitter<any>();
+    @Output('onChange') change = new EventEmitter<any>();
+
+    onSelect(value: any): void {
+        if (value === this.value) {
+            return;
+        }
+        this.value = value;
+        this.valueChange.emit(value);
+        this.change.emit(value);
+    }
+}
diff --git a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.css b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.css
index 479894b18a..97e1f78211 100644
--- a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.css
+++ b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.css
@@ -1,54 +1,6 @@
 .actions__tabs {
     position: relative;
-    margin-bottom: 40px;
-
-    &::after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 2px;
-        background: var(--color-grey-3);
-        z-index: 0;
-    }
-
-    ::ng-deep .p-selectbutton .p-button {
-        background: transparent !important;
-        border: none !important;
-        color: #848FA9 !important;
-        position: relative;
-        padding: 0.75rem 2rem 0.5rem 0 !important;
-        margin: 0 0.5rem 0 0 !important;
-        border-radius: 0 !important;
-    }
-
-    ::ng-deep .p-selectbutton .p-button.p-highlight {
-        color: var(--color-primary, #0b73f8) !important;
-        pointer-events: none !important;
-        cursor: default !important;
-    }
-
-    ::ng-deep .p-selectbutton .p-button.p-highlight::after {
-        display: none !important;
-    }
-
-    ::ng-deep .p-selectbutton .p-button .p-button-label {
-        position: relative;
-        padding: 0 !important;
-        margin: 0 !important;
-    }
-
-    ::ng-deep .p-selectbutton .p-button.p-highlight .p-button-label::after {
-        content: "";
-        position: absolute;
-        bottom: -8px;
-        left: 0;
-        width: 100%;
-        height: 3px;
-        background: var(--color-primary, #0b73f8);
-        z-index: 2;
-    }
+    margin-bottom: 28px;
 }
 
 .button-group {
diff --git a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.html b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.html
index c0fe946f33..0ffc558631 100644
--- a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.html
+++ b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.html
@@ -15,14 +15,12 @@
       <div class="guardian-user-page-header">Retirement</div>
       <div class="actions actions--top">
         <div class="actions__tabs">
-          <p-selectButton
-            [(ngModel)]="type"
+          <guardian-tabs-switch
+            [value]="type"
+            [options]="contractTypeOptions"
+            (valueChange)="type = $event"
             (onChange)="onChangeType($event)"
-                        [options]="[
-                                    { label: 'Token Wiping Contracts', value: 'WIPE' },
-                                    { label: 'Token Retirement Contracts', value: 'RETIRE' }
-                                  ]"
-          ></p-selectButton>
+          ></guardian-tabs-switch>
         </div>
         <div class="actions__cta button-group">
           <button
diff --git a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts
index e7d1275c53..bcd1ee914d 100644
--- a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts
+++ b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts
@@ -191,6 +191,11 @@ export class ContractConfigComponent implements OnInit, OnDestroy {
     ];
     type: ContractType = ContractType.WIPE;
 
+    public readonly contractTypeOptions = [
+        { label: 'Token Wiping Contracts', value: ContractType.WIPE },
+        { label: 'Token Retirement Contracts', value: ContractType.RETIRE },
+    ];
+
     constructor(
         public tagsService: TagsService,
         private profileService: ProfileService,
@@ -644,7 +649,7 @@ export class ContractConfigComponent implements OnInit, OnDestroy {
                     .filter((token: Token) => !token.draftToken);
                 const dialogRef = this.dialog.open(SetPoolDialogComponent, {
                     width: '750px',
-                    styleClass: 'g-dialog set-pool-dialog',
+                    styleClass: 'guardian-dialog set-pool-dialog',
                     modal: true,
                     closable: false,
                     showHeader: false,
@@ -691,8 +696,9 @@ export class ContractConfigComponent implements OnInit, OnDestroy {
 
     openWipeRequests(contract: any) {
         this.dialog.open(WipeRequestsDialogComponent, {
-            width: contract.version === '1.0.0' ? '650px' : '850px',
-            styleClass: 'g-dialog',
+            width: '800px',
+            styleClass: 'guardian-dialog',
+            showHeader: false,
             modal: true,
             closable: false,
             data: contract,
@@ -702,7 +708,8 @@ export class ContractConfigComponent implements OnInit, OnDestroy {
     openPools(contract: any) {
         this.dialog.open(RetirePoolsDialogComponent, {
             width: '800px',
-            styleClass: 'g-dialog retire-pool-dialog',
+            styleClass: 'guardian-dialog retire-pool-dialog',
+            showHeader: false,
             modal: true,
             closable: false,
             data: contract,
@@ -712,7 +719,8 @@ export class ContractConfigComponent implements OnInit, OnDestroy {
     openRetireRequests(contract: any) {
         this.dialog.open(RetireRequestsDialogComponent, {
             width: '800px',
-            styleClass: 'g-dialog',
+            styleClass: 'guardian-dialog',
+            showHeader: false,
             modal: true,
             closable: false,
             data: contract,
diff --git a/frontend/src/app/modules/contract-engine/configs/user-contract-config/user-contract-config.component.ts b/frontend/src/app/modules/contract-engine/configs/user-contract-config/user-contract-config.component.ts
index 5008afff7d..7662a6061b 100644
--- a/frontend/src/app/modules/contract-engine/configs/user-contract-config/user-contract-config.component.ts
+++ b/frontend/src/app/modules/contract-engine/configs/user-contract-config/user-contract-config.component.ts
@@ -125,7 +125,8 @@ export class UserContractConfigComponent implements OnInit {
     openRetirePoolsDialog() {
         const dialogRef = this.dialog.open(UserRetirePoolsDialogComponent, {
             width: '800px',
-            styleClass: 'g-dialog pools-dialog',
+            styleClass: 'guardian-dialog pools-dialog',
+            showHeader: false,
             modal: true,
             closable: false,
         })!;
@@ -150,7 +151,8 @@ export class UserContractConfigComponent implements OnInit {
     openRetireRequestsDialog() {
         this.dialog.open(UserRetireRequestsDialogComponent, {
             width: '800px',
-            styleClass: 'g-dialog',
+            styleClass: 'guardian-dialog',
+            showHeader: false,
             modal: true,
             closable: false,
         });
diff --git a/frontend/src/app/modules/contract-engine/contract-engine.module.ts b/frontend/src/app/modules/contract-engine/contract-engine.module.ts
index d8e1ded821..9d681a6a9e 100644
--- a/frontend/src/app/modules/contract-engine/contract-engine.module.ts
+++ b/frontend/src/app/modules/contract-engine/contract-engine.module.ts
@@ -13,7 +13,6 @@ import { RefreshBtnComponent } from './components/refresh-btn/refresh-btn.compon
 // Configs
 import { ContractConfigComponent } from './configs/contract-config/contract-config.component';
 // Dialogs
-import { DialogWrapperComponent } from './dialogs/dialog-wrapper/dialog-wrapper.component';
 import { SetPoolDialogComponent } from './dialogs/set-pool-dialog/set-pool-dialog.component';
 import { RetirePoolsDialogComponent } from './dialogs/retire-pools-dialog/retire-pools-dialog.component';
 import { RetireRequestsDialogComponent } from './dialogs/retire-requests-dialog/retire-requests-dialog.component';
@@ -28,7 +27,6 @@ import { UserContractConfigComponent } from './configs/user-contract-config/user
     declarations: [
         ContractConfigComponent,
         SetPoolDialogComponent,
-        DialogWrapperComponent,
         RetirePoolsDialogComponent,
         RetireRequestsDialogComponent,
         WipeRequestsDialogComponent,
diff --git a/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.html b/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.html
deleted file mode 100644
index e3a14f171e..0000000000
--- a/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<div class="g-dialog-content">
-  <div class="g-dialog-header">
-    <div class="g-dialog-cancel">
-      <div class="g-dialog-cancel-btn" (click)="cancel.emit()">
-        <i class="pi pi-times"></i>
-      </div>
-    </div>
-    <div class="g-dialog-title">
-      {{ title }}
-    </div>
-    <div class="g-dialog-actions">
-      @if (syncVisible) {
-        <div class="sync">
-          <span class="sync__date">Last sync: {{ (syncDate ? (syncDate | date:'medium') : 'Never') }}</span>
-          <app-refresh-btn (refresh)="sync.emit($event)"></app-refresh-btn>
-        </div>
-      }
-      @if (confirmVisible) {
-        <div class="g-dialog-actions-btn" (click)="confirm.emit()"
-          [attr.disabled]="confirmDisabled">
-          {{ confirmBtnLabel || 'Confirm' }}
-        </div>
-      }
-    </div>
-  </div>
-  <div class="g-dialog-body content">
-    @if (!loading) {
-      <ng-content></ng-content>
-    } @else {
-      <div class="loading">
-        <p-progressSpinner></p-progressSpinner>
-      </div>
-    }
-    @if (paginatorVisible && length && length > 0) {
-      <app-paginator
-        [length]="length"
-        [pageSize]="pageSize"
-        (page)="page.emit($event)">
-      </app-paginator>
-    }
-  </div>
-</div>
diff --git a/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.scss b/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.scss
deleted file mode 100644
index 85bfddfb5c..0000000000
--- a/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.sync {
-    display: flex;
-    align-items: center;
-    &__date {
-        text-wrap: nowrap;
-        color: #646464;
-        font-weight: 500;
-        font-size: 16px;
-    }
-}
-
-.content {
-    position: relative;
-}
-
-.loading {
-    background: var(--guardian-background, #fff);
-    display: flex;
-    align-items: center;
-    justify-items: center;
-    justify-content: center;
-    align-content: center;
-}
\ No newline at end of file
diff --git a/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.ts b/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.ts
deleted file mode 100644
index adc732a72f..0000000000
--- a/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-
-@Component({
-    selector: 'app-dialog-wrapper',
-    templateUrl: './dialog-wrapper.component.html',
-    styleUrls: ['./dialog-wrapper.component.scss'],
-    standalone: false
-})
-export class DialogWrapperComponent implements OnInit {
-    @Output() cancel: EventEmitter<void> = new EventEmitter<void>();
-    @Output() confirm: EventEmitter<void> = new EventEmitter<void>();
-    @Output() sync: EventEmitter<any> = new EventEmitter<any>();
-    @Output() page: EventEmitter<any> = new EventEmitter<any>();
-    @Input() confirmDisabled: boolean;
-    @Input() confirmVisible: boolean = true;
-    @Input() syncVisible: boolean = false;
-    @Input() confirmBtnLabel: string;
-    @Input() syncDate: string;
-    @Input() title: string;
-    @Input() loading: boolean;
-    @Input() length: number;
-    @Input() pageSize: number;
-    @Input() paginatorVisible: boolean = true;
-
-    constructor() {}
-
-    ngOnInit(): void {}
-}
diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.html
index c8cb9e6c80..581a8107dc 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.html
+++ b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.html
@@ -1,36 +1,36 @@
-<app-dialog-wrapper
-  (cancel)="onNoClick()"
-  [confirmVisible]="false"
-  [syncVisible]="true"
-  [syncDate]="syncDate"
-  (sync)="sync($event)"
+<app-common-dialog
   [loading]="loading"
-  [title]="'Pools'"
-  [paginatorVisible]="true"
-  [length]="length"
-  [pageSize]="pageSize"
-  (page)="onPage($event)"
-  >
-  <div class="action-buttons">
-    <label for="tokens" class="action-field__label">Token</label>
-    <p-multiSelect
-      id="tokens"
-      [(ngModel)]="selectedTokens"
-      [options]="getTransformedTokens()"
-      optionLabel="label"
-      optionValue="value"
-      [showHeader]="false"
-      defaultLabel="Not selected"
-      [filter]="true"
-      [appendTo]="'body'"
-      (onChange)="loadPools()"
-      >
-      <ng-template let-item pTemplate="item">
-        {{ item.label }}
-      </ng-template>
-    </p-multiSelect>
+  [confirmVisible]="false"
+  cancelLabel="Close"
+  (cancel)="onNoClick()"
+  (close)="onNoClick()">
+  <div appDialogHeader class="pools-header">
+    <span class="header-text">Pools</span>
+    <div class="sync" [class.syncing]="syncLoading">
+      <span class="sync__date">Last sync: {{ syncDate ? (syncDate | date:'medium') : 'Never' }}</span>
+      <app-refresh-btn (refresh)="sync()"></app-refresh-btn>
+    </div>
   </div>
   @if (pools.length) {
+    <div class="action-buttons">
+      <label for="tokens" class="action-field__label">Token</label>
+      <p-multiSelect
+        id="tokens"
+        [(ngModel)]="selectedTokens"
+        [options]="getTransformedTokens()"
+        optionLabel="label"
+        optionValue="value"
+        [showHeader]="false"
+        defaultLabel="Not selected"
+        [filter]="true"
+        [appendTo]="'body'"
+        (onChange)="loadPools()"
+        >
+        <ng-template let-item pTemplate="item">
+          {{ item.label }}
+        </ng-template>
+      </p-multiSelect>
+    </div>
     <div class="pools-head">
       <div class="ph ph--tokens"></div>
       <div class="ph wipe-permission">WIPE PERMISSION</div>
@@ -94,17 +94,17 @@
       }
     </div>
   } @else {
-    <div class="no-pools">There are no pools</div>
+    <div class="no-pools">
+      <i class="pi pi-list no-pools__icon"></i>
+      <span class="no-pools__label">There are no pools</span>
+    </div>
   }
-</app-dialog-wrapper>
 
-
-<div class="pools-dialog__footer">
-  <button
-    type="button"
-    pButton
-    label="Close"
-    class="p-button-outlined pools-dialog__close-btn"
-    (click)="onNoClick()"
-  ></button>
-</div>
+  @if (length) {
+    <app-paginator
+      [length]="length"
+      [pageSize]="pageSize"
+      (page)="onPage($event)">
+    </app-paginator>
+  }
+</app-common-dialog>
diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.scss
index 5cde6ab4b7..2fa943ae6c 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.scss
+++ b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.scss
@@ -1,85 +1,62 @@
-::ng-deep .g-dialog.retire-pool-dialog {
-    min-width: 840px !important;
-    height: 800px;
+:host {
+    display: block;
+    height: 100%;
 }
 
-::ng-deep .g-dialog.retire-pool-dialog .g-dialog-header .g-dialog-actions {
-    flex: 7;
-}
-
-::ng-deep .g-dialog.retire-pool-dialog .g-dialog-header .refresh-action-btn {
-    outline: none !important;
-    box-shadow: none !important;
-    border: none;
+::ng-deep .guardian-dialog.retire-pool-dialog {
+    min-width: 840px !important;
+    height: 800px;
 }
 
-::ng-deep .g-dialog.retire-pool-dialog .g-dialog-header .sync__date {
-    font-size: 14px;
-    margin-bottom: -4px;
-    margin-left: -10px;
-    color: var(--color-grey-4);
+::ng-deep .guardian-dialog.retire-pool-dialog:has(.no-pools) {
+    height: auto;
 }
 
-::ng-deep .g-dialog.retire-pool-dialog .g-dialog-header .g-dialog-cancel-btn {
-    width: 18px;
-    height: 18px;
-    overflow: hidden;
-    margin: -10px 0 0 36px;
-    border-radius: 6px;
-    cursor: pointer;
-    color: #969696;
+::ng-deep .guardian-dialog.retire-pool-dialog:has(.no-pools) .dialog-body {
+    max-height: none;
 }
 
-::ng-deep .g-dialog.retire-pool-dialog .p-dialog-content {
+::ng-deep .guardian-dialog.retire-pool-dialog .p-dialog-content {
     border-radius: 10px;
     padding: 12px 10px 0;
 }
-::ng-deep .g-dialog.retire-pool-dialog > .p-dialog-header {
-    display: none;
-}
 
-::ng-deep .g-dialog.retire-pool-dialog .g-dialog-header {
-    position: relative;
-    padding-right: 48px;
+.pools-header {
     display: flex;
     align-items: center;
-    margin-top: 20px;
-}
-
-::ng-deep .g-dialog.retire-pool-dialog .g-dialog-title {
-    height: 46px;
-    flex: 1;
-    padding: 10px 0;
-    box-sizing: border-box;
-    color: var(--color-grey-black-1);
-    font-weight: 500;
-    font-size: 22px;
-    margin: 0;
-}
+    gap: 16px;
 
-::ng-deep .g-dialog.retire-pool-dialog .g-dialog-cancel {
-    position: absolute;
-    top: 24px;
-    right: 24px;
+    .header-text {
+        font-size: 22px;
+        font-weight: 600;
+        color: var(--guardian-header-color);
+    }
 }
 
-::ng-deep .g-dialog-cancel-btn {
-    width: 28px;
-    height: 28px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
+.sync {
     display: flex;
     align-items: center;
-    justify-content: center;
-    transition: background 0.15s;
-    .pi {
-        font-size: 18px;
-        color: #6b6b6b;
+    gap: 8px;
+
+    &__date {
+        font-size: 14px;
+        color: var(--guardian-disabled-color);
+        white-space: nowrap;
+    }
+
+    ::ng-deep .refresh-action-btn {
+        outline: none !important;
+        box-shadow: none !important;
+        border: none;
     }
-    &:hover {
-        background: rgba(0, 0, 0, 0.05);
-        border-radius: 50%;
+
+    &.syncing {
+        ::ng-deep .pi-sync {
+            animation-name: spin;
+            animation-duration: 3000ms;
+            animation-iteration-count: infinite;
+            animation-timing-function: linear;
+        }
     }
 }
 
@@ -96,12 +73,12 @@
     color: var(--color-grey-black-1);
 }
 
-::ng-deep .g-dialog.retire-pool-dialog .p-multiselect {
+::ng-deep .guardian-dialog.retire-pool-dialog .p-multiselect {
     width: 250px;
     margin-top: 4px;
 }
 
-::ng-deep .g-dialog.retire-pool-dialog p-multiselect-item {
+::ng-deep .guardian-dialog.retire-pool-dialog p-multiselect-item {
     width: 250px;
 }
 
@@ -224,34 +201,34 @@ span.btn--remove {
     }
 }
 
-.no-pools {
-    font-size: 18px;
-    color: #888;
-    text-align: center;
-    padding: 20px;
+@keyframes spin {
+    from {
+        transform: rotate(360deg);
+    }
+    to {
+        transform: rotate(0deg);
+    }
 }
 
-::ng-deep .g-dialog.retire-pool-dialog .table-paginator {
-    box-shadow: none !important;
-}
+.no-pools {
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
 
-:host ::ng-deep .g-dialog.retire-pool-dialog .g-dialog-body {
-    position: relative;
-    padding-bottom: 92px !important;
-}
+    &__icon {
+        font-size: 32px;
+        color: var(--color-grey-5);
+    }
 
-:host ::ng-deep .pools-dialog__footer {
-    position: absolute;
-    right: 32px;
-    bottom: 24px;
-    z-index: 3;
-    margin-bottom: 30px;
-    margin-top: 10px;
+    &__label {
+        font-size: 16px;
+        color: var(--color-grey-5);
+    }
 }
-:host ::ng-deep .pools-dialog__close-btn {
-    min-width: 96px;
-    height: 42px;
-    border-radius: 8px;
-    font-size: 16px;
-    color: var(--guardian-primary-color);
+
+::ng-deep .guardian-dialog.retire-pool-dialog .table-paginator {
+    box-shadow: none !important;
 }
diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.ts b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.ts
index 9f8bd2a14d..af83585221 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.ts
+++ b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.ts
@@ -14,6 +14,7 @@ export class RetirePoolsDialogComponent implements OnInit {
     pools: any[] = [];
     syncDate: string;
     loading: boolean = false;
+    syncLoading: boolean = false;
     pageIndex = 0;
     pageSize = 5;
     length = 0;
@@ -42,8 +43,10 @@ export class RetirePoolsDialogComponent implements OnInit {
         });
     }
 
-    loadPools() {
-        this.loading = true;
+    loadPools(showLoading: boolean = true, onComplete?: () => void) {
+        if (showLoading) {
+            this.loading = true;
+        }
         this.contractService
             .getRetirePools({
                 contractId: this.contract.contractId,
@@ -71,8 +74,12 @@ export class RetirePoolsDialogComponent implements OnInit {
                     const count = pools.headers.get('X-Total-Count');
                     this.length = (count && +count) || this.pools.length;
                     this.loading = false;
+                    onComplete?.();
                 },
-                () => (this.loading = false)
+                () => {
+                    this.loading = false;
+                    onComplete?.();
+                }
             );
     }
 
@@ -91,18 +98,25 @@ export class RetirePoolsDialogComponent implements OnInit {
         this.dialogRef.close(null);
     }
 
-    sync(event: any) {
-        event.target.classList.add('spin');
-        this.loading = true;
+    sync() {
+        const startedAt = Date.now();
+        const stopSyncLoading = () => {
+            const delay = Math.max(0, 800 - (Date.now() - startedAt));
+            setTimeout(() => {
+                this.syncLoading = false;
+            }, delay);
+        };
+
+        this.syncLoading = true;
         this.contractService.retireSyncPools(this.contract.id).subscribe(
             (result) => {
                 this.syncDate = result;
                 this.contract.syncPoolsDate = result;
-                this.loadPools();
+                this.loadPools(false, stopSyncLoading);
             },
-            () => (this.loading = false),
             () => {
-                event.target.classList.remove('spin');
+                this.loading = false;
+                stopSyncLoading();
             }
         );
     }
diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.html
index 4bb7afa1c1..5817cb47f7 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.html
+++ b/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.html
@@ -1,54 +1,53 @@
-<app-dialog-wrapper (cancel)="onNoClick()" [confirmVisible]="false" [loading]="loading" [title]="'Retire requests'"
-  [length]="length" [pageSize]="pageSize" (page)="onPage($event)">
+<app-common-dialog [loading]="loading" [confirmVisible]="false" cancelLabel="Close" title="Retire requests"
+  (cancel)="onNoClick()" (close)="onNoClick()">
 
   @if (requests.length) {
-    <div>
+    <div class="requests">
       @for (request of requests; track request) {
         <div class="request">
           <div class="profile">
             <i class="pi pi-user profile__icon"></i>
-            <span class="profile__id">{{  request.displayUser }}</span>
+            <span class="profile__id">{{ request.displayUser }}</span>
           </div>
           <div class="tokens">
             @for (token of request.tokens; track token) {
               <div class="token-card">
-                <span class="token-card__token">
-                  <svg-icon src="/assets/images/icons/abc.svg" svgClass="icon-style-abc"></svg-icon>
-                  <span>{{ token.tokenSymbol }}</span>
-                </span>
-                <span class="token-card__token">
-                  <svg-icon src="/assets/images/icons/token.svg" svgClass="icon-style-token"></svg-icon>
-                  <span>{{ token.token }}</span>
-                </span>
+                <div class="token-card__row">
+                  <span class="token-card__label">NAME</span>
+                  <span class="token-card__value">{{ token.tokenSymbol }}</span>
+                </div>
+                <div class="token-card__row">
+                  <span class="token-card__label">TOKEN</span>
+                  <span class="token-card__value">{{ token.token }}</span>
+                </div>
                 @if (token.count > 0) {
-                  <span class="token-card__count">
-                    <svg-icon src="/assets/images/icons/calculate.svg" svgClass="icon-style-calculate"></svg-icon>
-                    <span>{{ token.count | tokenCount: token.decimals }}</span>
-                  </span>
+                  <div class="token-card__row">
+                    <span class="token-card__label">COUNT</span>
+                    <span class="token-card__value">{{ token.count | tokenCount: token.decimals }}</span>
+                  </div>
                 }
                 @if (token.serials?.length > 0) {
-                  <span class="token-card__serials"
-                    [title]="token.serials?.join(', ')">
-                    <svg-icon src="/assets/images/icons/123.svg" svgClass="icon-style-123"></svg-icon>
-                    <span>{{ token.serials?.join(', ') }}</span>
-                  </span>
+                  <div class="token-card__row">
+                    <span class="token-card__label">SERIALS</span>
+                    <span class="token-card__value" [title]="token.serials?.join(', ')">{{ token.serials?.join(', ') }}</span>
+                  </div>
                 }
               </div>
             }
           </div>
           <div class="request__actions">
-            <button (click)="approveRequest(request.id)"
-              pButton
+            <button type="button"
               class="btn btn--approve"
+              (click)="approveRequest(request.id)"
               [disabled]="!hasPermissions(contract.permissions, 1)"
               [pTooltip]="'You are not admin'"
               tooltipStyleClass="guardian-tooltip"
               [tooltipDisabled]="hasPermissions(contract.permissions, 1)">
               Approve
             </button>
-            <button (click)="unsetRetire(request.id)"
-              pButton
+            <button type="button"
               class="btn btn--reject"
+              (click)="unsetRetire(request.id)"
               [disabled]="!hasPermissions(contract.permissions, 1)"
               [pTooltip]="'You are not admin'"
               tooltipStyleClass="guardian-tooltip"
@@ -59,7 +58,18 @@
         </div>
       }
     </div>
+
+    @if (length) {
+      <app-paginator
+        [length]="length"
+        [pageSize]="pageSize"
+        (page)="onPage($event)">
+      </app-paginator>
+    }
   } @else {
-    <div class="no-requests">Contract has no requests, try to sync.</div>
+    <div class="no-requests">
+      <i class="pi pi-list no-requests__icon"></i>
+      <span class="no-requests__label">Contract has no requests, try to sync.</span>
+    </div>
   }
-</app-dialog-wrapper>
+</app-common-dialog>
diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.scss
index 5c2a56ad95..b8d4f98ba1 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.scss
+++ b/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.scss
@@ -1,144 +1,119 @@
-.no-requests {
-    font-size: 25px;
-    color: gray;
-    font-weight: bold;
-    min-height: 200px;
+.requests {
     display: flex;
-    align-items: center;
-    justify-content: center;
+    flex-direction: column;
 }
+
 .request {
-    display: grid;
-    grid-template-columns: 170px minmax(150px, 1fr) 170px;
+    display: flex;
     align-items: center;
-    column-gap: 30px;
-    padding: 20px 20px;
-    box-shadow: 0px 0px 4px 2px rgba(127, 127, 127, 0.13);
-    margin-bottom: 20px;
-    border-radius: 10px;
+    justify-content: space-between;
+    gap: 24px;
+    border: 1px solid var(--color-grey-3);
+    background-color: var(--color-grey-white);
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 16px;
+
     &__actions {
-        justify-self: flex-end;
         display: flex;
         align-items: center;
         gap: 10px;
+        flex-shrink: 0;
     }
 }
 
-.status {
-    text-wrap: nowrap;
-    font-size: 20px;
-    font-weight: bold;
-    flex-basis: 117px;
-    &__label--available {
-        color: green;
-    }
-    &__label--not-available {
-        color: gray;
-    }
-}
-.approve {
-    // text-wrap: nowrap;
-    font-size: 20px;
-    font-weight: bold;
-    flex-basis: 117px;
-    &__label--approve {
-        color: green;
+.profile {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--color-grey-6);
+    flex-shrink: 0;
+
+    &__icon {
+        font-size: 28px;
     }
-    &__label--no-approve {
-        color: goldenrod;
+
+    &__id {
+        font-size: 14px;
+        font-weight: 500;
     }
 }
+
 .tokens {
-    justify-self: center;
     display: flex;
-    overflow: auto;
+    flex-wrap: wrap;
+    gap: 15px;
+    flex: 1;
+}
+
+.token-card {
     display: flex;
-    padding: 5px;
-    gap: 25px;
-    .token-card {
+    flex-direction: column;
+    gap: 8px;
+    min-width: 160px;
+    background-color: var(--color-background);
+    border: 1px solid var(--color-grey-3);
+    border-radius: 8px;
+    padding: 12px 14px;
+
+    &__row {
         display: flex;
         flex-direction: column;
-        // border: 1px solid black;
-        box-shadow: 0px 0px 3px 2px rgb(0 144 255 / 20%);
-        border-radius: 5px;
-        padding: 10px;
-        gap: 5px;
-
-        color: rgb(71, 71, 71);
-
-        i, svg {
-            color: #3f51b5;
-        }
-
-        &__serials,
-        &__token,
-        &__count {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font-weight: bold;
-
-            i, svg {
-                font-size: 30px;
-                width: 30px;
-                height: 30px;
-            }
-        }
-
-        &__count {
-            i, svg {
-                transform: translateX(-2px);
-            }
-        }
-
-        &__serials {
-            span {
-                overflow: hidden;
-                max-width: 70px;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-        }
+    }
+
+    &__label {
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--color-grey-5);
+    }
+
+    &__value {
+        font-size: 14px;
+        color: var(--color-grey-black-1);
+        word-break: break-all;
     }
 }
 
-:host ::ng-deep .request-actions {
-    display: flex;
-    align-items: center;
-    i, svg {
-        font-size: 25px;
-        width: 25px;
-        height: 25px;
+.btn {
+    min-width: 96px;
+    height: 36px;
+    padding: 0 16px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid transparent;
+    color: #fff;
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
     }
 }
 
-.btn--remove {
-    color: red;
+.btn--approve {
+    background-color: var(--color-accent-green-1);
 }
 
-.profile {
+.btn--reject {
+    background-color: var(--color-accent-red-1);
+}
+
+.no-requests {
+    min-height: 200px;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 10px;
-    color: #6f6f6f;
+    justify-content: center;
+    gap: 12px;
 
     &__icon {
-        font-size: 45px;
-        width: 45px;
-        height: 45px;
-    }
-    &__id {
-        font-size: 20px;
-        font-weight: 500;
+        font-size: 32px;
+        color: var(--color-grey-5);
     }
-}
 
-.btn {
-    color: white;
-}
-.btn--approve {
-    background-color: darkgreen;
-}
-.btn--reject {
-    background-color: rgb(179, 3, 3);
+    &__label {
+        font-size: 16px;
+        color: var(--color-grey-5);
+    }
 }
diff --git a/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.html
index 0ec7cb1f8a..38e41cf18d 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.html
+++ b/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.html
@@ -1,11 +1,11 @@
-<div class="sp-dialog">
-  <header class="sp-dialog__header">
-    <h3 class="sp-dialog__title">Set Pool</h3>
-    <button type="button" class="sp-dialog__close" (click)="onNoClick()" aria-label="Close">
-      <i class="pi pi-times"></i>
-    </button>
-  </header>
-
+<app-common-dialog
+  title="Set Pool"
+  confirmLabel="Set"
+  cancelLabel="Cancel"
+  [confirmDisabled]="loading || !form.valid"
+  (confirm)="onCreate()"
+  (cancel)="onNoClick()"
+  (close)="onNoClick()">
   <form class="set-pool" [formGroup]="form">
     <div class="set-pool__header">
       <p-checkbox
@@ -28,6 +28,7 @@ <h3 class="sp-dialog__title">Set Pool</h3>
               optionLabel="tokenSymbol"
               placeholder="Token"
               [required]="true"
+              [appendTo]="'body'"
               [style]="{ width: '100%' }"
               >
               <ng-template let-option pTemplate="selectedItem">
@@ -73,25 +74,4 @@ <h3 class="sp-dialog__title">Set Pool</h3>
       }
     </div>
   </form>
-
-  <footer class="sp-dialog__footer set-pool__footer">
-    <button
-      type="button"
-      pButton
-      icon="pi pi-plus"
-      class="p-button-outlined button-cancel"
-      label="Cancel"
-      (click)="onNoClick()"
-    ></button>
-
-    <button
-      type="button"
-      pButton
-      icon="pi pi-check"
-      label="Set"
-      class="button-setl"
-      [disabled]="loading || !form.valid"
-      (click)="onCreate()"
-    ></button>
-  </footer>
-</div>
+</app-common-dialog>
diff --git a/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.scss
index a70cb95424..98040e854d 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.scss
+++ b/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.scss
@@ -1,46 +1,13 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
 ::ng-deep .set-pool-dialog .p-dialog-content {
     border-radius: 10px;
     padding: 0 40px 24px 40px;
 }
 
-.sp-dialog {
-    display: grid;
-    grid-template-rows: 100px 175px auto;
-}
-
-.sp-dialog__header {
-    margin: 30px 0;
-    display: grid;
-    grid-template-columns: 95% 1fr;
-}
-
-.sp-dialog__title {
-    margin: 0;
-    font-size: 22px
-}
-
-.sp-dialog__close {
-    width: 28px;
-    height: 28px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background .15s;
-    outline: none !important;
-    box-shadow: none !important;
-    .pi {
-        font-size: 18px;
-        color: #6b6b6b;
-    }
-    &:hover {
-        background: rgba(0, 0, 0, 0.05);
-        border-radius: 50%;
-    }
-}
-
 .set-pool__header {
     display: flex;
     align-items: center;
@@ -147,30 +114,3 @@
 ::ng-deep .p-dialog-content .mat-progress-bar {
     display: none !important;
 }
-
-[dir='rtl'] .sp-dialog__close {
-    margin-left: 0;
-    margin-right: auto;
-}
-
-.sp-dialog__footer {
-    margin-top: 80px;
-    padding-top: 16px;
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-
-    ::ng-deep .p-button {
-        min-width: 96px;
-        height: 42px;
-        border-radius: 8px;
-        font-size: 16px;
-    }
-
-    ::ng-deep .button-cancel {
-        color: #1976d2 !important;
-    }
-
-    ::ng-deep .button-set {
-    }
-}
diff --git a/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.ts b/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.ts
index 097b7cb1b7..5c8ec1a149 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.ts
+++ b/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.ts
@@ -106,11 +106,11 @@ export class SetPoolDialogComponent {
     getTokenList(tokenId: string) {
         const chosenTokens =
             this.tokens.value
-                ?.filter((item: { token: string }) => item.token !== tokenId)
+                ?.filter((item: { token: any }) => item.token?.tokenId !== tokenId)
                 .map((item: { token: any }) => item.token) || [];
 
         return this._tokenList.filter((tokenFromList) =>
-            !chosenTokens.find((chosenToken: Token) => chosenToken.tokenId === tokenFromList.tokenId))
+            !chosenTokens.find((chosenToken: Token) => chosenToken?.tokenId === tokenFromList.tokenId))
     }
 
     moreThanTokensZeroValidator(): ValidatorFn {
diff --git a/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.html
index f76a5d7767..e1c8bd703b 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.html
+++ b/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.html
@@ -1,37 +1,35 @@
-<app-dialog-wrapper
-  (cancel)="onNoClick()"
-  [confirmVisible]="retireMod"
-  [syncVisible]="false"
+<app-common-dialog
   [loading]="loading"
-  [confirmDisabled]="!retireForm.valid"
   [title]="retireMod ? 'Retire' : 'Pools'"
-  [paginatorVisible]="!retireMod"
-  [length]="length"
-  [pageSize]="pageSize"
-  (page)="onPage($event)"
+  [confirmVisible]="retireMod"
+  [cancelVisible]="!retireMod"
+  [confirmDisabled]="!retireForm.valid"
+  confirmLabel="Retire"
+  cancelLabel="Close"
   (confirm)="confirm()"
-  >
+  (cancel)="onNoClick()"
+  (close)="onNoClick()">
   @if (!retireMod) {
-    <div class="action-buttons">
-      <label for="tokens" class="action-field__label">Token</label>
-      <p-multiSelect
-        id="tokens"
-        [(ngModel)]="selectedTokens"
-        [options]="getTokenOptions()"
-        optionLabel="label"
-        optionValue="value"
-        [showHeader]="false"
-        defaultLabel="Not selected"
-        [filter]="true"
-        [appendTo]="'body'"
-        (onChange)="loadPools()"
-        >
-        <ng-template let-item pTemplate="item">
-          {{ item.label }}
-        </ng-template>
-      </p-multiSelect>
-    </div>
     @if (pools.length) {
+      <div class="action-buttons">
+        <label for="tokens" class="action-field__label">Token</label>
+        <p-multiSelect
+          id="tokens"
+          [(ngModel)]="selectedTokens"
+          [options]="getTokenOptions()"
+          optionLabel="label"
+          optionValue="value"
+          [showHeader]="false"
+          defaultLabel="Not selected"
+          [filter]="true"
+          [appendTo]="'body'"
+          (onChange)="loadPools()"
+          >
+          <ng-template let-item pTemplate="item">
+            {{ item.label }}
+          </ng-template>
+        </p-multiSelect>
+      </div>
       <div class="pools-head">
         <div class="ph ph--tokens"></div>
         <div class="ph wipe-permission">WIPE PERMISSION</div>
@@ -78,7 +76,10 @@
         }
       </div>
     } @else {
-      <div class="no-pools">There are no pools</div>
+      <div class="no-pools">
+        <i class="pi pi-list no-pools__icon"></i>
+        <span class="no-pools__label">There are no pools</span>
+      </div>
     }
   } @else {
     <div class="retire">
@@ -126,18 +127,12 @@
       </div>
     </div>
   }
-</app-dialog-wrapper>
-
-
 
-@if (!retireMod) {
-  <div class="pools-dialog__footer">
-    <button
-      type="button"
-      pButton
-      label="Close"
-      class="p-button-outlined pools-dialog__close-btn"
-      (click)="onNoClick()">
-    </button>
-  </div>
-}
+   @if (!retireMod && length) {
+     <app-paginator
+       [length]="length"
+       [pageSize]="pageSize"
+       (page)="onPage($event)">
+     </app-paginator>
+   }
+</app-common-dialog>
diff --git a/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.scss
index 1efca09a40..09eeee83c0 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.scss
+++ b/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.scss
@@ -1,50 +1,35 @@
-::ng-deep .p-dialog.pools-dialog {
-    min-width: 840px !important;
-    height: 800px;
-}
-
-::ng-deep .p-dialog.pools-dialog .p-dialog-content {
-    border-radius: 10px;
-    padding: 12px 10px 0
+:host {
+    display: block;
+    height: 100%;
 }
 
-::ng-deep .p-dialog.pools-dialog > .p-dialog-header {
-    display: none;
+::ng-deep .guardian-dialog.pools-dialog {
+    min-width: 840px !important;
+    height: 800px;
 }
 
-::ng-deep .g-dialog.pools-dialog .g-dialog-header {
-    margin-top: 20px
+::ng-deep .guardian-dialog.pools-dialog:has(.no-pools) {
+    height: auto;
 }
 
-::ng-deep .g-dialog.pools-dialog .g-dialog-cancel-btn {
-    width: 18px;
-    height: 18px;
-    overflow: hidden;
-    margin: -10px 0 0 36px;
-    border-radius: 6px;
-    cursor: pointer;
-    color: #969696;
+::ng-deep .guardian-dialog.pools-dialog:has(.no-pools) .dialog-body {
+    max-height: none;
 }
 
-::ng-deep .g-dialog.pools-dialog .g-dialog-header .g-dialog-title {
-    height: 46px;
-    flex: 1;
-    padding: 10px 0;
-    box-sizing: border-box;
-    color: var(--color-grey-black-1);
-    font-weight: 500;
-    font-size: 22px;
+::ng-deep .guardian-dialog.pools-dialog .p-dialog-content {
+    border-radius: 10px;
+    padding: 12px 10px 0
 }
 
-::ng-deep .g-dialog.pools-dialog p-multiselect {
+::ng-deep .guardian-dialog.pools-dialog p-multiselect {
     margin-top: 4px;
 }
 
-::ng-deep .g-dialog.pools-dialog .p-multiselect {
+::ng-deep .guardian-dialog.pools-dialog .p-multiselect {
     width: 250px;
 }
 
-::ng-deep .g-dialog.pools-dialog p-multiselect-item {
+::ng-deep .guardian-dialog.pools-dialog p-multiselect-item {
     width: 250px;
 }
 
@@ -166,126 +151,24 @@
     }
 }
 
-.btn--retire {
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--color-grey-black-1);
-    font-size: 20px;
-    display: grid;
-    align-self: start;
-    margin-top: 20px;
-}
-
-.no-pools {
-    font-size: 18px;
-    color: #888;
-    text-align: center;
-    padding: 20px;
-}
-
-.retire {
-    display: flex;
-    flex-direction: column;
-}
-
-.retire__back {
-    margin-bottom: 10px;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    color: #3f51b5;
-}
-
-::ng-deep .g-dialog.pools-dialog .table-paginator {
+::ng-deep .guardian-dialog.pools-dialog .table-paginator {
     box-shadow: none !important;
 }
 
-::ng-deep .g-dialog.pools-dialog .g-dialog-header {
-    position: relative;
-    padding-right: 48px;
-    display: flex;
-    align-items: center;
-}
-
-::ng-deep .g-dialog.pools-dialog .g-dialog-title {
-    font-size: 22px;
-    font-weight: 600;
-    margin: 0;
-}
-
-::ng-deep .g-dialog.pools-dialog .g-dialog-cancel {
-    position: absolute;
-    top: 24px;
-    right: 24px;
-}
-
-::ng-deep .g-dialog-cancel-btn {
-    width: 28px;
-    height: 28px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background .15s;
-
-    .pi {
-        font-size: 18px;
-        color: #6b6b6b;
-    }
-
-    &:hover {
-        background: rgba(0,0,0,.05);
-        border-radius: 50%;
-    }
-}
-
-::ng-deep .g-dialog.pools-dialog .g-dialog-actions {
-    margin-left: auto;
-}
-
-:host ::ng-deep .g-dialog.pools-dialog .g-dialog-body {
-    position: relative;
-    padding-bottom: 92px !important;
-}
-
-:host ::ng-deep .pools-dialog__footer {
-    position: absolute;
-    right: 32px;
-    bottom: 24px;
-    z-index: 3;
-    margin-bottom: 30px;
-    margin-top: 10px;
-}
-
-:host ::ng-deep .pools-dialog__close-btn {
-    min-width: 96px;
-    height: 42px;
-    border-radius: 8px;
-    font-size: 16px;
-    color: var(--guardian-primary-color);
-}
-
-.retire-mode ::ng-deep .g-dialog-actions {
-    display: none !important;
-}
-
 ::ng-deep .retire-serials-ms__panel {
     width: 250px;
 }
 
-::ng-deep .g-dialog.pools-dialog .g-dialog-actions {
-    flex: 1 !important;
-}
-
 .retire__back {
     display: grid;
     grid-template-columns: 1fr auto;
     width: 30px;
     column-gap: 10px;
     color: var(--color-grey-6);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 10px;
 }
 
 .pools-dialog__retire-btn {
@@ -298,3 +181,22 @@
     align-self: start;
     padding: 5px;
 }
+
+.no-pools {
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+
+    &__icon {
+        font-size: 32px;
+        color: var(--color-grey-5);
+    }
+
+    &__label {
+        font-size: 16px;
+        color: var(--color-grey-5);
+    }
+}
diff --git a/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.html
index 6d3d66237f..d72949764f 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.html
+++ b/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.html
@@ -1,44 +1,46 @@
-<app-dialog-wrapper (cancel)="onNoClick()" [confirmVisible]="false" [loading]="loading" [title]="'Retire requests'"
-  [length]="length" [pageSize]="pageSize" (page)="onPage($event)">
+<app-common-dialog [loading]="loading" [confirmVisible]="false" cancelLabel="Close" title="Retire requests"
+  (cancel)="onNoClick()" (close)="onNoClick()">
 
   @if (requests.length) {
-    <div>
+    <div class="requests">
       @for (request of requests; track request) {
         <div class="request">
           <div class="tokens">
             @for (token of request.tokens; track token) {
               <div class="token-card">
-                <span class="token-card__token">
-                  <svg-icon src="/assets/images/icons/abc.svg" svgClass="icon-style-abc"></svg-icon>
-                  <span>{{ token.tokenSymbol }}</span>
-                </span>
-                <span class="token-card__token">
-                  <svg-icon src="/assets/images/icons/token.svg" svgClass="icon-style-token"></svg-icon>
-                  <span>{{ token.token }}</span>
-                </span>
+                <div class="token-card__row">
+                  <span class="token-card__label">NAME</span>
+                  <span class="token-card__value">{{ token.tokenSymbol }}</span>
+                </div>
+                <div class="token-card__row">
+                  <span class="token-card__label">TOKEN</span>
+                  <span class="token-card__value">{{ token.token }}</span>
+                </div>
                 @if (token.count > 0) {
-                  <span class="token-card__count">
-                    <svg-icon src="/assets/images/icons/calculate.svg" svgClass="icon-style-calculate"></svg-icon>
-                    <span>{{ token.count | tokenCount: token.decimals }}</span>
-                  </span>
+                  <div class="token-card__row">
+                    <span class="token-card__label">COUNT</span>
+                    <span class="token-card__value">{{ token.count | tokenCount: token.decimals }}</span>
+                  </div>
                 }
                 @if (token.serials?.length > 0) {
-                  <span class="token-card__serials"
-                    [title]="token.serials?.join(', ')">
-                    <svg-icon src="/assets/images/icons/123.svg" svgClass="icon-style-123"></svg-icon>
-                    <span>{{ token.serials?.join(', ') }}</span>
-                  </span>
+                  <div class="token-card__row">
+                    <span class="token-card__label">SERIALS</span>
+                    <span class="token-card__value" [title]="token.serials?.join(', ')">{{ token.serials?.join(', ') }}</span>
+                  </div>
                 }
               </div>
             }
           </div>
           <div class="request__actions">
-            <button (click)="unsetRetire(request.id)" mat-flat-button class="btn btn--reject">Cancel</button>
+            <button type="button" class="btn btn--cancel" (click)="unsetRetire(request.id)">Cancel</button>
           </div>
         </div>
       }
     </div>
   } @else {
-    <div class="no-requests">You have no retire requests</div>
+    <div class="no-requests">
+      <i class="pi pi-list no-requests__icon"></i>
+      <span class="no-requests__label">You have no retire requests</span>
+    </div>
   }
-</app-dialog-wrapper>
+</app-common-dialog>
diff --git a/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.scss
index 235c4addbb..0cf36c9a49 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.scss
+++ b/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.scss
@@ -1,125 +1,98 @@
-.no-requests {
-    font-size: 25px;
-    color: gray;
-    font-weight: bold;
-    min-height: 200px;
+.requests {
     display: flex;
-    align-items: center;
-    justify-content: center;
+    flex-direction: column;
 }
+
 .request {
-    display: grid;
-    grid-template-columns: minmax(150px, 1fr) 170px;
+    display: flex;
     align-items: center;
-    column-gap: 30px;
-    padding: 20px 20px;
-    box-shadow: 0px 0px 4px 2px rgba(127, 127, 127, 0.13);
-    margin-bottom: 20px;
-    border-radius: 10px;
+    justify-content: space-between;
+    gap: 24px;
+    border: 1px solid var(--color-grey-3);
+    background-color: var(--color-grey-white);
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 16px;
 
     &__actions {
-        justify-self: center;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-shrink: 0;
     }
 }
 
-.status {
-    text-wrap: nowrap;
-    font-size: 20px;
-    font-weight: bold;
-    flex-basis: 117px;
-    &__label--available {
-        color: green;
-    }
-    &__label--not-available {
-        color: gray;
-    }
-}
-.approve {
-    // text-wrap: nowrap;
-    font-size: 20px;
-    font-weight: bold;
-    flex-basis: 117px;
-    &__label--approve {
-        color: green;
-    }
-    &__label--no-approve {
-        color: goldenrod;
-    }
-}
 .tokens {
-    justify-self: center;
     display: flex;
-    overflow: auto;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.token-card {
     display: flex;
-    padding: 5px;
-    gap: 25px;
-    .token-card {
+    flex-direction: column;
+    gap: 8px;
+    min-width: 160px;
+    background-color: var(--color-background);
+    border: 1px solid var(--color-grey-3);
+    border-radius: 8px;
+    padding: 12px 14px;
+
+    &__row {
         display: flex;
         flex-direction: column;
-        // border: 1px solid black;
-        box-shadow: 0px 0px 3px 2px rgb(0 144 255 / 20%);
-        border-radius: 5px;
-        padding: 10px;
-        gap: 5px;
-
-        color: rgb(71, 71, 71);
-
-        i, svg {
-            color: #3f51b5;
-        }
+    }
 
-        &__serials,
-        &__token,
-        &__count {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font-weight: bold;
+    &__label {
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--color-grey-5);
+    }
 
-            i, svg {
-                font-size: 30px;
-                width: 30px;
-                height: 30px;
-            }
-        }
+    &__value {
+        font-size: 14px;
+        color: var(--color-grey-black-1);
+        word-break: break-all;
+    }
+}
 
-        &__count {
-            i, svg {
-                transform: translateX(-2px);
-            }
-        }
+.btn {
+    min-width: 96px;
+    height: 36px;
+    padding: 0 16px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid transparent;
 
-        &__serials {
-            span {
-                overflow: hidden;
-                max-width: 70px;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-        }
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
     }
 }
 
-:host ::ng-deep .request-actions {
+.btn--cancel {
+    background-color: transparent;
+    color: var(--color-accent-red-1);
+    border-color: var(--color-accent-red-1);
+}
+
+.no-requests {
+    min-height: 200px;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    i, svg {
-        font-size: 25px;
-        width: 25px;
-        height: 25px;
-    }
-}
+    justify-content: center;
+    gap: 12px;
 
-.btn--remove {
-    color: red;
-}
+    &__icon {
+        font-size: 32px;
+        color: var(--color-grey-5);
+    }
 
-.btn {
-    color: white;
-}
-.btn--approve {
-    background-color: darkgreen;
-}
-.btn--reject {
-    background-color: rgb(179, 3, 3);
+    &__label {
+        font-size: 16px;
+        color: var(--color-grey-5);
+    }
 }
diff --git a/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.html
index 2e9c8e7f2a..c7ffd8d3b2 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.html
+++ b/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.html
@@ -1,49 +1,57 @@
-<app-dialog-wrapper (cancel)="onNoClick()" title="Wiper requests" [confirmVisible]="false" [syncVisible]="false"
-  [loading]="loading">
+<app-common-dialog [loading]="loading" [confirmVisible]="false" cancelLabel="Close" title="Wiper requests"
+  bodyMaxHeight="740px"
+  (cancel)="onNoClick()" (close)="onNoClick()">
   @if (requests.length) {
-    @for (request of requests; track request) {
-      <div class="request">
-        <div class="profile">
-          <i class="pi pi-user profile__icon"></i>
-          <span class="profile__id">{{ request.user }}</span>
-        </div>
-        @if (version !== '1.0.0') {
-          <div class="token">
-            <svg-icon src="/assets/images/icons/token.svg" svgClass="icon-style-token token__icon"></svg-icon>
-            <span class="token__id">{{ request.token }}</span>
+    <div class="requests">
+      @for (request of requests; track request) {
+        <div class="request">
+          <div class="profile">
+            <i class="pi pi-user profile__icon"></i>
+            <span class="profile__id">{{ request.user }}</span>
+          </div>
+          <div class="tokens">
+            @if (version !== '1.0.0') {
+              <div class="token-card">
+                <div class="token-card__row">
+                  <span class="token-card__label">TOKEN</span>
+                  <span class="token-card__value">{{ request.token }}</span>
+                </div>
+              </div>
+            }
+          </div>
+          <div class="request__actions">
+            <button type="button"
+              class="btn btn--approve"
+              (click)="approveRequest(request.id)"
+              [disabled]="!hasPermissions(contract.permissions, 2)"
+              [pTooltip]="'You are not manager'"
+              tooltipStyleClass="guardian-tooltip"
+              [tooltipDisabled]="hasPermissions(contract.permissions, 2)">
+              Approve
+            </button>
+            <button type="button"
+              class="btn btn--reject"
+              (click)="rejectRequest(request.id)"
+              [disabled]="!hasPermissions(contract.permissions, 2)"
+              [pTooltip]="'You are not manager'"
+              tooltipStyleClass="guardian-tooltip"
+              [tooltipDisabled]="hasPermissions(contract.permissions, 2)">
+              Reject
+            </button>
+            <button type="button"
+              class="btn btn--ban"
+              (click)="rejectRequest(request.id, true)"
+              [disabled]="!hasPermissions(contract.permissions, 2)"
+              [pTooltip]="'You are not manager'"
+              tooltipStyleClass="guardian-tooltip"
+              [tooltipDisabled]="hasPermissions(contract.permissions, 2)">
+              Ban
+            </button>
           </div>
-        }
-        <div class="request__actions">
-          <button (click)="approveRequest(request.id)"
-            pButton
-            class="btn btn--approve"
-            [disabled]="!hasPermissions(contract.permissions, 2)"
-            [pTooltip]="'You are not manager'"
-            tooltipStyleClass="guardian-tooltip"
-            [tooltipDisabled]="hasPermissions(contract.permissions, 2)">
-            Approve
-          </button>
-          <button (click)="rejectRequest(request.id)"
-            pButton
-            class="btn btn--reject"
-            [disabled]="!hasPermissions(contract.permissions, 2)"
-            [pTooltip]="'You are not manager'"
-            tooltipStyleClass="guardian-tooltip"
-            [tooltipDisabled]="hasPermissions(contract.permissions, 2)">
-            Reject
-          </button>
-          <button (click)="rejectRequest(request.id, true)"
-            pButton
-            class="btn btn--ban"
-            [disabled]="!hasPermissions(contract.permissions, 2)"
-            [pTooltip]="'You are not manager'"
-            tooltipStyleClass="guardian-tooltip"
-            [tooltipDisabled]="hasPermissions(contract.permissions, 2)">
-            Ban
-          </button>
         </div>
-      </div>
-    }
+      }
+    </div>
+
     <app-paginator
       [length]="length"
       [pageIndex]="pageIndex"
@@ -51,6 +59,9 @@
       (page)="onPage($event)">
     </app-paginator>
   } @else {
-    <div class="no-requests"><span class="no-requests__label">Contract has no requests, try to sync.</span></div>
+    <div class="no-requests">
+      <i class="pi pi-list no-requests__icon"></i>
+      <span class="no-requests__label">Contract has no requests, try to sync.</span>
+    </div>
   }
-</app-dialog-wrapper>
+</app-common-dialog>
diff --git a/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.scss
index 5db5dbbd93..f8e478b55f 100644
--- a/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.scss
+++ b/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.scss
@@ -1,55 +1,125 @@
-.btn {
-    color: white;
+.requests {
+    display: flex;
+    flex-direction: column;
 }
-.no-requests {
-    min-height: 200px;
+
+.request {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
+    gap: 24px;
+    border: 1px solid var(--color-grey-3);
+    background-color: var(--color-grey-white);
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 16px;
 
-    &__label {
-        font-size: 25px;
-        color: gray;
-        font-weight: bold;
+    &__actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-shrink: 0;
     }
 }
-.profile, .token {
+
+.profile {
     display: flex;
     align-items: center;
     gap: 10px;
-    color: #6f6f6f;
+    color: var(--color-grey-6);
+    flex-shrink: 0;
 
     &__icon {
-        font-size: 25px;
-        width: 25px;
-        height: 25px;
+        font-size: 28px;
     }
+
     &__id {
-        font-size: 20px;
+        font-size: 14px;
+        font-weight: 500;
+    }
+}
+
+.tokens {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    flex: 1;
+}
+
+.token-card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 160px;
+    background-color: var(--color-background);
+    border: 1px solid var(--color-grey-3);
+    border-radius: 8px;
+    padding: 12px 14px;
+
+    &__row {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__label {
+        font-size: 12px;
         font-weight: 500;
+        color: var(--color-grey-5);
+    }
+
+    &__value {
+        font-size: 14px;
+        color: var(--color-grey-black-1);
+        word-break: break-all;
     }
 }
+
+.btn {
+    min-width: 96px;
+    height: 36px;
+    padding: 0 16px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid transparent;
+    color: #fff;
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
 .btn--approve {
-    background-color: darkgreen;
+    background-color: var(--color-accent-green-1);
 }
+
 .btn--reject {
-    background-color: rgb(179, 3, 3);
+    background-color: var(--color-accent-red-1);
 }
+
 .btn--ban {
-    background-color: darkred;
+    background-color: transparent;
+    color: var(--color-accent-red-1);
+    border-color: var(--color-accent-red-1);
 }
-.request {
+
+.no-requests {
+    min-height: 200px;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: space-between;
-    padding: 20px 20px;
-    box-shadow: 0px 0px 4px 2px rgb(127 127 127 / 13%);
-    margin-bottom: 20px;
-    border-radius: 10px;
+    justify-content: center;
+    gap: 12px;
 
-    &__actions {
-        display: flex;
-        align-items: center;
-        gap: 10px;
+    &__icon {
+        font-size: 32px;
+        color: var(--color-grey-5);
+    }
+
+    &__label {
+        font-size: 16px;
+        color: var(--color-grey-5);
     }
 }