diff --git a/src/app/components/configuration/configuration.component.ts b/src/app/components/configuration/configuration.component.ts
index 11789edec83a31d97f37799fe86ffc9ff419990a..5645562d5997cbc2a9bb49dd687dcdac4efc6ed2 100644
--- a/src/app/components/configuration/configuration.component.ts
+++ b/src/app/components/configuration/configuration.component.ts
@@ -12,7 +12,6 @@ import { ButtonComponent } from '../button/button.component';
 import { ConfigurationApi } from '../../api/configuration.api';
 import { map, Observable, tap } from 'rxjs';
 import { PillComponent } from '../pill/pill.component';
-import { SkeletonModule } from 'primeng/skeleton';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { FormsModule } from '@angular/forms';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
@@ -36,7 +35,6 @@ enum ConfigurationPageMode {
     ConfigurationFormComponent,
     ButtonComponent,
     PillComponent,
-    SkeletonModule,
     NgxSkeletonLoaderModule,
     FormsModule,
     MatFormField,
diff --git a/src/app/components/dashboard-charts/dashboard-charts.component.html b/src/app/components/dashboard-charts/dashboard-charts.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..12e92e1088a4c2ca23c5013fbb799f1c49dbcb2e
--- /dev/null
+++ b/src/app/components/dashboard-charts/dashboard-charts.component.html
@@ -0,0 +1 @@
+<ngx-skeleton-loader count="10" />
diff --git a/src/app/components/dashboard-charts/dashboard-charts.component.scss b/src/app/components/dashboard-charts/dashboard-charts.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/components/dashboard-charts/dashboard-charts.component.ts b/src/app/components/dashboard-charts/dashboard-charts.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ddf7cf2b24cee9bfe912857526c60b4b186232cd
--- /dev/null
+++ b/src/app/components/dashboard-charts/dashboard-charts.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
+
+@Component({
+  selector: 'app-dashboard-charts',
+  imports: [NgxSkeletonLoaderComponent],
+  templateUrl: './dashboard-charts.component.html',
+  styleUrl: './dashboard-charts.component.scss',
+})
+export class DashboardChartsComponent {}
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.html b/src/app/components/dashboard-statistics/dashboard-statistics.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..12e92e1088a4c2ca23c5013fbb799f1c49dbcb2e
--- /dev/null
+++ b/src/app/components/dashboard-statistics/dashboard-statistics.component.html
@@ -0,0 +1 @@
+<ngx-skeleton-loader count="10" />
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.scss b/src/app/components/dashboard-statistics/dashboard-statistics.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.ts b/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f88f14ff30722c0ebddbef6dfaf55272b6c5cb0
--- /dev/null
+++ b/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
+
+@Component({
+  selector: 'app-dashboard-statistics',
+  imports: [NgxSkeletonLoaderComponent],
+  templateUrl: './dashboard-statistics.component.html',
+  styleUrl: './dashboard-statistics.component.scss',
+})
+export class DashboardStatisticsComponent {}
diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index d8bafe617dbe0d21b31c96bb7e223559926dbdee..c8259a3f08b0d4aa1a6e0eba7a4994163a389196 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -1,7 +1,28 @@
 <app-page-wrapper>
   <div title>Monitoring and Analysis</div>
-  <div actions>actions</div>
 
-  Dashboard content goes here
-  <p-skeleton height="10rem" width="100%" />
+  <div actions class="actions">
+    <button mat-fab class="settings-button" (click)="openSettings()">
+      <mat-icon>settings</mat-icon>
+    </button>
+  </div>
+
+  <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>
+      <app-dashboard-statistics />
+    </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>
+      <app-dashboard-charts />
+    </mat-expansion-panel>
+  </mat-accordion>
 </app-page-wrapper>
diff --git a/src/app/components/dashboard/dashboard.component.scss b/src/app/components/dashboard/dashboard.component.scss
index 2995308e841ca96f9de6435ee45baad2167aa6e6..1938814a9ffa012336e43c56745f11cf1ea4b54c 100644
--- a/src/app/components/dashboard/dashboard.component.scss
+++ b/src/app/components/dashboard/dashboard.component.scss
@@ -1,4 +1,36 @@
+@use '../../../vars';
+@use 'sass:map';
+
 :host {
   height: 100%;
   width: 100%;
+
+  .actions {
+    display: flex;
+    gap: map.get(vars.$spacing, 'md');
+
+    .settings-button {
+      box-shadow: none;
+
+      mat-icon {
+        font-size: map.get(vars.$text, 'xl');
+        color: map.get(vars.$grey, 0);
+      }
+    }
+
+    * {
+      background-color: vars.$textPrimary;
+    }
+  }
+
+  .accordion__panel {
+    background-color: map.get(vars.$grey, 10);
+
+    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;
+    }
+  }
 }
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index ad068b9d3113826e91430fe8021ee219e7c109ad..ab1f72fa34deef45018254ed349cc92a37fd6520 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -1,11 +1,24 @@
 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 { MatIcon } from '@angular/material/icon';
+import { MatFabButton } from '@angular/material/button';
+import { DashboardStatisticsComponent } from '../dashboard-statistics/dashboard-statistics.component';
+import { DashboardChartsComponent } from '../dashboard-charts/dashboard-charts.component';
 
 @Component({
   selector: 'app-dashboard',
-  imports: [PageWrapperComponent, Skeleton],
+  imports: [
+    MatExpansionModule,
+    MatIcon,
+    PageWrapperComponent,
+    MatFabButton,
+    DashboardStatisticsComponent,
+    DashboardChartsComponent,
+  ],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss',
 })
-export class DashboardComponent {}
+export class DashboardComponent {
+  openSettings() {}
+}
diff --git a/src/app/components/page-wrapper/page-wrapper.component.scss b/src/app/components/page-wrapper/page-wrapper.component.scss
index ab5c237d1ca95efeca1f74759bf130e2079d4f03..4d82ce4e970f23b4a74a7ad9e485e5aa2d3e8dd5 100644
--- a/src/app/components/page-wrapper/page-wrapper.component.scss
+++ b/src/app/components/page-wrapper/page-wrapper.component.scss
@@ -3,7 +3,7 @@
 
 :host {
   display: block;
-  min-height: calc(100% - 2 * map.get(vars.$spacing, 'lg'));
+  min-height: calc(100vh - 2 * vars.$headerHeight);
 
   margin: map.get(vars.$spacing, 'xl');
   background-color: map.get(vars.$grey, 0);