diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index cb0f2015d2c2aaeed5adaaed87a58cd8936d3ac8..99042da00977457ca86e97a31861758af457d8fa 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -1,6 +1,18 @@
 <app-page-wrapper>
   <div header>Monitoring and Analysis</div>
-
-  Dashboard content goes here
+  <mat-accordion class="accordion__header" multi>
+    <mat-expansion-panel class="accordion__panel">
+      <mat-expansion-panel-header class="accordion__panel-header">
+        <mat-panel-title class="accordion__panel-title"> Statistics </mat-panel-title>
+      </mat-expansion-panel-header>
+      <p>Statistics info</p>
+    </mat-expansion-panel>
+    <mat-expansion-panel class="accordion__panel">
+      <mat-expansion-panel-header class="accordion__panel-header">
+        <mat-panel-title class="accordion__panel-title"> Charts </mat-panel-title>
+      </mat-expansion-panel-header>
+      <p>Charts info</p>
+    </mat-expansion-panel>
+  </mat-accordion>
   <p-skeleton height="10rem" width="100%" />
 </app-page-wrapper>
diff --git a/src/app/components/dashboard/dashboard.component.scss b/src/app/components/dashboard/dashboard.component.scss
index 2995308e841ca96f9de6435ee45baad2167aa6e6..23599fd944a4c552c9f7bbac172d3f3a3a7a34f5 100644
--- a/src/app/components/dashboard/dashboard.component.scss
+++ b/src/app/components/dashboard/dashboard.component.scss
@@ -1,4 +1,40 @@
+@use '../../../vars';
+@use 'sass:map';
+
 :host {
   height: 100%;
   width: 100%;
+
+  .actions {
+    display: flex;
+    gap: map.get(vars.$spacing, 'md');
+  }
+
+  .accordion__panel {
+    border-radius: map.get(vars.$radius, 'xs');
+    background-color: map.get(vars.$grey, 10);
+    padding: map.get(vars.$spacing, 'xs') map.get(vars.$spacing, 'xs');
+
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+
+    border-bottom: 1px solid map.get(vars.$grey, 30);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      transition: background-color 0.3s ease-in-out;
+
+      &:hover {
+        background-color: map.get(vars.$grey, 30);
+      }
+    }
+  }
+
 }
+
+
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index ad068b9d3113826e91430fe8021ee219e7c109ad..3357fa5a2a966390d79be995f7091f515d5e9e73 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -1,10 +1,23 @@
 import { Component } from '@angular/core';
 import { PageWrapperComponent } from '../page-wrapper/page-wrapper.component';
 import { Skeleton } from 'primeng/skeleton';
+import { MatExpansionModule } from '@angular/material/expansion';
+import {
+  MatExpansionPanel,
+  MatExpansionPanelDescription,
+  MatExpansionPanelTitle,
+} from '@angular/material/expansion';
 
 @Component({
   selector: 'app-dashboard',
-  imports: [PageWrapperComponent, Skeleton],
+  imports: [
+    PageWrapperComponent,
+    Skeleton,
+    MatExpansionPanel,
+    MatExpansionPanelTitle,
+    MatExpansionPanelDescription,
+    MatExpansionModule,
+  ],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss',
 })