diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.html b/src/app/components/dashboard-settings/dashboard-settings.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..9ca3bc4c73d064780b5a7b075bfba3052b95c12b
--- /dev/null
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.html
@@ -0,0 +1,42 @@
+<div class="dialog">
+  <h2 mat-dialog-title class="dialog__header">Settings</h2>
+  <mat-dialog-content class="dialog__content">
+    <div class="dialog__content__statistics__columns">
+      <div class="dialog__content__statistics__columns-title">
+        Statistics columns
+      </div>
+      <div class="dialog__content__statistics__columns-content">
+        <mat-slide-toggle [(ngModel)]="isChecked">Total packets</mat-slide-toggle>
+        <mat-slide-toggle [(ngModel)]="isChecked">Packets per seconds</mat-slide-toggle>
+        <mat-slide-toggle [(ngModel)]="isChecked">Total bytes</mat-slide-toggle>
+        <mat-slide-toggle [(ngModel)]="isChecked">Bytes per second</mat-slide-toggle>
+      </div>
+    </div>
+    <div class="dialog__content__statistics__rows">
+      <div class="dialog__content__statistics__rows-title">
+        Statistics rows & charts
+      </div>
+      <div class="dialog__content__statistics__rows-content">
+        <mat-slide-toggle [(ngModel)]="isChecked">ETH</mat-slide-toggle>
+        <mat-slide-toggle [(ngModel)]="isChecked">IPv4</mat-slide-toggle>
+        <mat-slide-toggle [(ngModel)]="isChecked">IPv6</mat-slide-toggle>
+        <mat-slide-toggle [(ngModel)]="isChecked">TCP</mat-slide-toggle>
+      </div>
+    </div>
+    <div class="dialog__content__statistics__ir">
+      <div class="dialog__content__statistics__ir-title">
+        Information Rate
+      </div>
+      <div class="dialog__content__statistics__ir-content">
+        <mat-slide-toggle [(ngModel)]="isChecked">Min value</mat-slide-toggle>
+        <mat-slide-toggle [(ngModel)]="isChecked">Max value</mat-slide-toggle>
+        <mat-slide-toggle [(ngModel)]="isChecked">Current value</mat-slide-toggle>
+
+      </div>
+    </div>
+  </mat-dialog-content>
+  <mat-dialog-actions class="dialog__actions">
+    <button mat-flat-button mat-dialog-close>Cancel</button>
+    <button mat-flat-button mat-dialog-close>Basic</button>
+  </mat-dialog-actions>
+</div>
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.scss b/src/app/components/dashboard-settings/dashboard-settings.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..82aa7b948d8ef91a749e52e1b46d8802d88bae78
--- /dev/null
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.scss
@@ -0,0 +1,86 @@
+@use '../../../vars';
+@use 'sass:map';
+
+
+.custom-dialog-container .mat-dialog-container  {
+
+
+
+}
+
+.dialog {
+  background-color: map.get(vars.$grey, 0);
+  &__header {
+    border-bottom: 1px solid map.get(vars.$grey, 30);
+    font-family: Monoton, cursive;
+
+    font-size: map.get(vars.$text, 'xxl');
+    padding: map.get(vars.$spacing, 'lg') map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'lg') map.get(vars.$spacing, 'xl');
+  }
+
+  &__content {
+    font-weight: 500;
+    &__statistics {
+      &__columns {
+        &-title {
+          font-size: map.get(vars.$text, 'xl');
+          padding: map.get(vars.$spacing, 'xxl') map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'none');
+        }
+        &-content {
+          border-radius: map.get(vars.$radius, 'xs');
+          background-color: map.get(vars.$grey, 10);
+          padding: map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'lg');
+          mat-slide-toggle {
+            width: 25%;
+          }
+        }
+      }
+      &__rows {
+        &-title {
+          font-size: map.get(vars.$text, 'xl');
+          padding: map.get(vars.$spacing, 'xxl') map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'none');
+        }
+        &-content {
+          border-radius: map.get(vars.$radius, 'xs');
+          background-color: map.get(vars.$grey, 10);
+          padding: map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'lg');
+          mat-slide-toggle {
+            width: 25%;
+          }
+        }
+      }
+      &__ir {
+        &-title {
+          font-size: map.get(vars.$text, 'xl');
+          padding: map.get(vars.$spacing, 'xxl') map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'none');
+        }
+        &-content {
+          border-radius: map.get(vars.$radius, 'xs');
+          background-color: map.get(vars.$grey, 10);
+          padding: map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'lg');
+          mat-slide-toggle {
+            width: 25%;
+          }
+        }
+      }
+    }
+  }
+  &__actions {
+    margin-top: map.get(vars.$spacing, 'sm');
+    border-radius: map.get(vars.$radius, 'xs');
+    background-color: map.get(vars.$grey, 30);
+    //padding: map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'xxxl') map.get(vars.$spacing, 'none');
+    button {
+      width: 33%;
+      border-radius: map.get(vars.$radius, 'sm');
+    }
+  }
+}
+
+
+
+
+::ng-deep .p-toggleswitch-input {
+  width:300px;
+  height:300px;
+}
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.spec.ts b/src/app/components/dashboard-settings/dashboard-settings.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a25de393e23c5ae25ff15bf18bbfe488841f508
--- /dev/null
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardSettingsComponent } from './dashboard-settings.component';
+
+describe('DashboardSettingsComponent', () => {
+  let component: DashboardSettingsComponent;
+  let fixture: ComponentFixture<DashboardSettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardSettingsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.ts b/src/app/components/dashboard-settings/dashboard-settings.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..da7902cb87fc2e8b45a3d39db4749f849ba38933
--- /dev/null
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.ts
@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import { FormsModule } from '@angular/forms';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatDialogModule,
+    ToggleSwitchModule,
+    FormsModule,
+    MatSlideToggle,
+    MatButtonModule,
+  ],
+  selector: 'app-dashboard-settings',
+  styleUrl: './dashboard-settings.component.scss',
+  templateUrl: './dashboard-settings.component.html',
+})
+export class DashboardSettingsComponent {
+  isChecked: Boolean = true;
+}
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index c9ea330f3a33f59d37829b1e3c2c53d2924a7491..2638312654af745de1df3ff0aa6976f872591eea 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -1,10 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { PageWrapperComponent } from '../page-wrapper/page-wrapper.component';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIcon } from '@angular/material/icon';
-import { MatFabButton } from '@angular/material/button';
+import { MatButtonModule, MatFabButton } from '@angular/material/button';
 import { DashboardStatisticsComponent } from '../dashboard-statistics/dashboard-statistics.component';
 import { DashboardChartsComponent } from '../dashboard-charts/dashboard-charts.component';
+import {
+  MatDialog,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { DashboardSettingsComponent } from '../dashboard-settings/dashboard-settings.component';
 
 @Component({
   selector: 'app-dashboard',
@@ -21,5 +29,12 @@ import { DashboardChartsComponent } from '../dashboard-charts/dashboard-charts.c
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DashboardComponent {
-  openSettings() {}
+  readonly dialog = inject(MatDialog);
+
+  openSettings() {
+    this.dialog.open(DashboardSettingsComponent, {
+      minWidth: '1100px',
+      minHeight: '550px',
+    });
+  }
 }