diff --git a/src/app/presets/details/details.component.html b/src/app/presets/details/details.component.html
index ca13492..8c6f350 100644
--- a/src/app/presets/details/details.component.html
+++ b/src/app/presets/details/details.component.html
@@ -1,47 +1,68 @@
-<h2>Preset: {{data.name}}</h2>
+<h2 mat-dialog-title>Preset: {{ data.name }}</h2>
+<mat-dialog-content>
+  <mat-tab-group>
+    <mat-tab label="Mocks details">
+      <mat-table [dataSource]="mocksDataSource" matSort class="mocks">
+        <ng-container matColumnDef="name">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>
+            Name</mat-header-cell
+          >
+          <mat-cell *matCellDef="let element">{{ element.name }}</mat-cell>
+        </ng-container>
 
+        <ng-container matColumnDef="scenario">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>
+            Scenario</mat-header-cell
+          >
+          <mat-cell *matCellDef="let element">{{ element.scenario }}</mat-cell>
+        </ng-container>
 
+        <ng-container matColumnDef="delay">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>
+            Delay</mat-header-cell
+          >
+          <mat-cell *matCellDef="let element">{{ element.delay }}</mat-cell>
+        </ng-container>
 
-<h4>Mocks details</h4>
-<mat-table [dataSource]="mocksDataSource" matSort class="mocks">
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header> Name</mat-header-cell>
-    <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
-  </ng-container>
+        <ng-container matColumnDef="echo">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>
+            Echo</mat-header-cell
+          >
+          <mat-cell *matCellDef="let element">{{ element.echo }}</mat-cell>
+        </ng-container>
 
-  <ng-container matColumnDef="scenario">
-    <mat-header-cell *matHeaderCellDef mat-sort-header> Scenario</mat-header-cell>
-    <mat-cell *matCellDef="let element">{{element.scenario}}</mat-cell>
-  </ng-container>
+        <mat-header-row
+          *matHeaderRowDef="mocksDisplayedColumns"
+        ></mat-header-row>
+        <mat-row *matRowDef="let row; columns: mocksDisplayedColumns"></mat-row>
+      </mat-table>
+    </mat-tab>
+    <mat-tab label="Variables details">
+      <mat-table [dataSource]="variablesDataSource" matSort class="variables">
+        <ng-container matColumnDef="key">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>
+            Key</mat-header-cell
+          >
+          <mat-cell *matCellDef="let element">{{ element.key }}</mat-cell>
+        </ng-container>
 
-  <ng-container matColumnDef="delay">
-    <mat-header-cell *matHeaderCellDef mat-sort-header> Delay</mat-header-cell>
-    <mat-cell *matCellDef="let element">{{element.delay}}</mat-cell>
-  </ng-container>
+        <ng-container matColumnDef="value">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>
+            Value</mat-header-cell
+          >
+          <mat-cell *matCellDef="let element">{{ element.value }}</mat-cell>
+        </ng-container>
 
-  <ng-container matColumnDef="echo">
-    <mat-header-cell *matHeaderCellDef mat-sort-header> Echo</mat-header-cell>
-    <mat-cell *matCellDef="let element">{{element.echo}}</mat-cell>
-  </ng-container>
-
-  <mat-header-row *matHeaderRowDef="mocksDisplayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: mocksDisplayedColumns;"></mat-row>
-
-</mat-table>
-
-@if (variablesDataSource.data.length > 0) {
-  <h4>Variables details</h4>
-  <mat-table [dataSource]="variablesDataSource" matSort class="variables">
-    <ng-container matColumnDef="key">
-      <mat-header-cell *matHeaderCellDef mat-sort-header> Key</mat-header-cell>
-      <mat-cell *matCellDef="let element">{{element.key}}</mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="value">
-      <mat-header-cell *matHeaderCellDef mat-sort-header> Value</mat-header-cell>
-      <mat-cell *matCellDef="let element">{{element.value}}</mat-cell>
-    </ng-container>
-    <mat-header-row *matHeaderRowDef="variablesDisplayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: variablesDisplayedColumns;"></mat-row>
-  </mat-table>
-}
-<br />
+        <mat-header-row
+          *matHeaderRowDef="variablesDisplayedColumns"
+        ></mat-header-row>
+        <mat-row
+          *matRowDef="let row; columns: variablesDisplayedColumns"
+        ></mat-row>
+      </mat-table>
+    </mat-tab>
+  </mat-tab-group>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Close</button>
+</mat-dialog-actions>
diff --git a/src/app/presets/details/details.component.scss b/src/app/presets/details/details.component.scss
deleted file mode 100644
index 30eef40..0000000
--- a/src/app/presets/details/details.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use '@angular/material' as mat;
-@use '../../../theme.scss';
-@import '../../../style.scss';
-
-:host {
-  mat-color-header-row {
-    min-height: 30px;
-    padding-left: 0px;
-
-    mat-color-header-cell {
-      padding-left: 10px;
-      font-size: 16px;
-      color: mat.get-color-from-palette(theme.$ngapimock-primary);
-    }
-  }
-
-}
diff --git a/src/app/presets/details/details.component.ts b/src/app/presets/details/details.component.ts
index 786fd73..da70eed 100644
--- a/src/app/presets/details/details.component.ts
+++ b/src/app/presets/details/details.component.ts
@@ -1,39 +1,41 @@
-import { Preset } from '@ng-apimock/core/dist/preset/preset';
-
-import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { Preset } from "@ng-apimock/core/dist/preset/preset";
+import { Component, Inject } from "@angular/core";
+import { MAT_DIALOG_DATA, MatDialogModule } from "@angular/material/dialog";
+import { MatTableDataSource, MatTableModule } from "@angular/material/table";
 import { MockState } from "@ng-apimock/core/dist/state/mock.state";
-
+import { MatButton } from "@angular/material/button";
+import { MatTabsModule } from "@angular/material/tabs";
 
 @Component({
-    selector: 'apimock-presets-details',
-    templateUrl: './details.component.html',
-    styleUrls: ['./details.component.scss'],
-    standalone: true,
-    imports: [MatTableModule],
+  selector: "apimock-presets-details",
+  templateUrl: "./details.component.html",
+  standalone: true,
+  imports: [MatTableModule, MatDialogModule, MatButton, MatTabsModule],
 })
 export class PresetDetailsComponent {
+  mocksDataSource: MatTableDataSource<any>;
+  mocksDisplayedColumns = ["name", "scenario", "delay", "echo"];
 
-    mocksDataSource: MatTableDataSource<any>;
-    mocksDisplayedColumns = ['name', 'scenario', 'delay', 'echo'];
-
-    variablesDataSource: MatTableDataSource<any>;
-    variablesDisplayedColumns = ['key', 'value'];
+  variablesDataSource: MatTableDataSource<any>;
+  variablesDisplayedColumns = ["key", "value"];
 
-    constructor(
-        @Inject(MAT_DIALOG_DATA) public data: Preset
-    ) {
-        this.mocksDataSource = new MatTableDataSource([] as { [name: string]: MockState; }[]);
-        this.mocksDataSource.data = Object.keys(this.data.mocks).map(key => ({
-            name: key,
-            ...this.data.mocks[key]
-        }));
+  constructor(@Inject(MAT_DIALOG_DATA) public data: Preset) {
+    this.mocksDataSource = new MatTableDataSource(
+      [] as { [name: string]: MockState }[]
+    );
+    this.mocksDataSource.data = Object.keys(this.data.mocks).map((key) => ({
+      name: key,
+      ...this.data.mocks[key],
+    }));
 
-        this.variablesDataSource = new MatTableDataSource([] as { [key: string]: any }[]);
-        this.variablesDataSource.data = Object.keys(this.data.variables).map(key => ({
-            key: key,
-            value: this.data.variables[key]
-        }));
-    }
+    this.variablesDataSource = new MatTableDataSource(
+      [] as { [key: string]: any }[]
+    );
+    this.variablesDataSource.data = Object.keys(this.data.variables).map(
+      (key) => ({
+        key: key,
+        value: this.data.variables[key],
+      })
+    );
+  }
 }