diff --git a/frontend/bec_atlas/src/app/dashboard/dashboard.component.html b/frontend/bec_atlas/src/app/dashboard/dashboard.component.html
index 54ba06e..0b9141b 100644
--- a/frontend/bec_atlas/src/app/dashboard/dashboard.component.html
+++ b/frontend/bec_atlas/src/app/dashboard/dashboard.component.html
@@ -1,95 +1,196 @@
-<mat-sidenav-container class="sidenav-container">
-  <mat-sidenav mode="side" opened>
-    <div>
-      <img
-        src="assets/BEC-Atlas-full-transparent.png"
-        alt="BEC"
-        width="80"
-        height="80"
-        style="margin: 10px"
-      />
+<div class="dashboard-layout">
+  <!-- Left Icon Sidebar -->
+  <div class="icon-sidebar">
+    <!-- Logo -->
+    <div class="logo-section">
+      <div class="logo-icon">
+        <img
+          src="assets/BEC-Atlas-full-transparent.png"
+          alt="Atlas"
+          class="logo-img"
+        />
+      </div>
     </div>
-    <mat-divider></mat-divider>
 
-    <!-- Username expansion panel -->
-    <mat-expansion-panel>
-      <mat-expansion-panel-header>
-        <mat-icon>account_circle</mat-icon>
-        <span class="menu-text">Username</span>
-      </mat-expansion-panel-header>
-
-      <button mat-button>Profile</button>
-      <button mat-button>Settings</button>
-      <button mat-button (click)="logout()">Logout</button>
-    </mat-expansion-panel>
-
-    <mat-divider></mat-divider>
-
-    <!--  Data Browser -->
-    <mat-expansion-panel>
-      <mat-expansion-panel-header>
-        <mat-icon>table_chart</mat-icon>
-        <span class="menu-text">Data Browser</span>
-      </mat-expansion-panel-header>
+    <!-- Navigation Icons -->
+    <nav class="nav-icons">
+      <button
+        class="nav-icon-btn"
+        [class.active]="selectedNavItem() === 'analytics'"
+        (click)="
+          selectNavItem({
+            id: 'analytics',
+            label: 'Analytics',
+            icon: 'analytics'
+          })
+        "
+      >
+        <mat-icon>analytics</mat-icon>
+        <span class="nav-label">Analytics</span>
+      </button>
 
       <button
-        mat-button
-        class="menu-item"
-        [routerLink]="['/dashboard/scan-table']"
+        class="nav-icon-btn"
+        [class.active]="selectedNavItem() === 'data'"
+        (click)="
+          selectNavItem({
+            id: 'data',
+            label: 'Data Browser',
+            icon: 'table_chart'
+          })
+        "
       >
-        Scan Data
+        <mat-icon>table_chart</mat-icon>
+        <span class="nav-label">Data</span>
       </button>
-      <button mat-button class="menu-item">Device Data</button>
-    </mat-expansion-panel>
 
-    <!-- Experiment Control Expansion -->
-    <mat-expansion-panel
-      (opened)="panelOpened()"
-      [hideToggle]="hideExperimentPanel"
-    >
-      <mat-expansion-panel-header>
+      <button
+        class="nav-icon-btn"
+        [class.active]="selectedNavItem() === 'control'"
+        (click)="
+          selectNavItem({
+            id: 'control',
+            label: 'Experiment Control',
+            icon: 'science'
+          })
+        "
+      >
         <mat-icon>science</mat-icon>
-        <span class="menu-text">Experiment Control</span>
-      </mat-expansion-panel-header>
+        <span class="nav-label">Control</span>
+      </button>
 
       <button
-        mat-button
-        class="menu-item"
-        [routerLink]="['/dashboard/overview-grid']"
+        class="nav-icon-btn"
+        [class.active]="selectedNavItem() === 'settings'"
+        (click)="
+          selectNavItem({ id: 'settings', label: 'Settings', icon: 'settings' })
+        "
       >
-        <span class="menu-text">Control</span>
+        <mat-icon>settings</mat-icon>
+        <span class="nav-label">Settings</span>
       </button>
+    </nav>
+
+    <!-- Bottom Icons -->
+    <div class="bottom-icons">
       <button
-        mat-button
-        class="menu-item"
-        [routerLink]="['/dashboard/deployment-admin']"
+        class="nav-icon-btn"
+        (click)="openDeploymentDialog()"
       >
-        <span class="menu-text">Admin</span>
+        <mat-icon>help_outline</mat-icon>
+        <span class="nav-label">Help</span>
       </button>
 
-      <button mat-button class="menu-item" (click)="openDeploymentDialog()">
-        <span class="menu-text">{{ selectOrSwitchButtonTitle }}</span>
+      <button
+        class="nav-icon-btn"
+        (click)="logout()"
+      >
+        <mat-icon>account_circle</mat-icon>
+        <span class="nav-label">Profile</span>
       </button>
-    </mat-expansion-panel>
+    </div>
+  </div>
+
+  <!-- Main Content with Navigation Panel -->
+  <div class="main-area">
+    <!-- Navigation Panel -->
+    @if (showNavPanel()) {
+    <div class="nav-panel">
+      <div class="panel-header">
+        <h2>{{ getCurrentNavContent()?.label || "Navigation" }}</h2>
+      </div>
 
-    <!-- Help -->
-    <button mat-button class="menu-item">
-      <mat-icon>help</mat-icon>
-      <span class="menu-text">Help</span>
-    </button>
-    <div class="spacer"></div>
-    @if ((realm_name) && (deployment_name)) {
-    <div class="footer">
-      <mat-divider></mat-divider>
-      <div class="menu-text">{{ realm_name }}</div>
-      <div class="menu-text">{{ deployment_name }}</div>
+      <div class="panel-content">
+        @if (getCurrentNavContent()?.children) {
+        <!-- Show navigation sections based on selected item -->
+        <div class="section-items">
+          @for (child of getCurrentNavContent()!.children; track child.id) {
+          <div
+            class="nav-item"
+            [class.active]="selectedSubItem() === child.id"
+            (click)="navigateToChild(child)"
+          >
+            <mat-icon class="item-icon">{{ child.icon }}</mat-icon>
+            <span class="item-label">{{ child.label }}</span>
+          </div>
+          }
+        </div>
+        } @else {
+        <!-- For items without children, show a simple message or content -->
+        <div class="section-items">
+          <div class="nav-item">
+            <mat-icon class="item-icon">{{
+              getCurrentNavContent()?.icon
+            }}</mat-icon>
+            <span class="item-label"
+              >{{ getCurrentNavContent()?.label }} Dashboard</span
+            >
+          </div>
+        </div>
+        }
+      </div>
     </div>
     }
-  </mat-sidenav>
 
-  <mat-sidenav-content>
-    <div class="content">
-      <router-outlet></router-outlet>
+    <!-- Content Area -->
+    <div class="content-area">
+      <!-- Content Header -->
+      <div class="content-header">
+        <div class="header-title">
+          <h1>{{ getCurrentNavContent()?.label || "Dashboard" }}</h1>
+          <p class="header-subtitle">
+            Manage and monitor your
+            {{ getCurrentNavContent()?.label?.toLowerCase() || "workspace" }}
+          </p>
+        </div>
+        <div class="header-actions">
+          <button mat-raised-button color="primary" class="action-btn">
+            <mat-icon>add</mat-icon>
+            New Report
+          </button>
+          <button mat-stroked-button class="action-btn">
+            <mat-icon>filter_list</mat-icon>
+            Filter
+          </button>
+          <button mat-stroked-button class="action-btn">
+            <mat-icon>file_download</mat-icon>
+            Export
+          </button>
+        </div>
+      </div>
+
+      <!-- Main Content -->
+      <div class="main-content">
+        <router-outlet></router-outlet>
+
+        <!-- Empty State (shown when no specific route content) -->
+        <div class="empty-state" *ngIf="!getCurrentNavContent()">
+          <div class="empty-state-content">
+            <div class="empty-state-icon">
+              <mat-icon>analytics</mat-icon>
+            </div>
+            <h2>Welcome to BEC Atlas</h2>
+            <p>
+              Select a section from the sidebar to get started with your data
+              analytics and experiment control.
+            </p>
+            <button
+              mat-raised-button
+              color="primary"
+              (click)="
+                selectNavItem({
+                  id: 'analytics',
+                  label: 'Analytics',
+                  icon: 'analytics'
+                })
+              "
+            >
+              <mat-icon>trending_up</mat-icon>
+              Explore Analytics
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
-  </mat-sidenav-content>
-</mat-sidenav-container>
+  </div>
+</div>
diff --git a/frontend/bec_atlas/src/app/dashboard/dashboard.component.scss b/frontend/bec_atlas/src/app/dashboard/dashboard.component.scss
index bd7cfaa..71f7fd6 100644
--- a/frontend/bec_atlas/src/app/dashboard/dashboard.component.scss
+++ b/frontend/bec_atlas/src/app/dashboard/dashboard.component.scss
@@ -1,107 +1,670 @@
 @use "@angular/material" as mat;
 
-.sidenav-container {
+.dashboard-layout {
+  display: flex;
   height: 100vh;
+  width: 100%;
+  overflow: hidden;
+}
+
+// Left Icon Sidebar
+.icon-sidebar {
+  width: 90px;
+  background: var(--surface-glass);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--surface-glass-border);
   display: flex;
-  background-color: var(--mat-sys-surface-dim);
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0;
+  @include mat.elevation(8);
+  position: relative;
+  z-index: 10;
 }
 
-mat-sidenav {
-  width: 250px;
-  background: var(--mat-sys-surface-container);
-  border-radius: 0px;
-  padding-left: 6px;
-  text-align: center;
-  @include mat.elevation(3);
+.logo-section {
+  margin-bottom: 32px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--surface-glass-border);
+
+  .logo-icon {
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .logo-img {
+      width: 48px;
+      height: 48px;
+    }
+  }
 }
 
-::ng-deep .mat-drawer-inner-container {
+.nav-icons {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  height: 100%; /* Ensure it takes full height */
+  gap: 16px;
 }
 
-.sidenav.collapsed {
-  width: 60px;
+.nav-icon-btn {
+  width: 64px;
+  height: 60px;
+  border: none;
+  background: var(--surface-tint);
+  color: var(--accent-primary);
+  border-radius: 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  position: relative;
+  gap: 4px;
+  padding: 6px 4px;
+
+  // Animated gradient border effect
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -2px;
+    border-radius: 16px;
+    background: linear-gradient(
+      45deg,
+      var(--accent-secondary),
+      var(--accent-primary),
+      var(--accent-secondary)
+    );
+    background-size: 200% 200%;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &:hover {
+    background: color-mix(
+      in srgb,
+      var(--surface-glass) 50%,
+      var(--surface-tint) 50%
+    );
+    transform: translateY(-1px) scale(1.05);
+    @include mat.elevation(8);
+    color: var(--accent-primary-dark);
+
+    // Show the gradient border and animate on hover
+    &::after {
+      opacity: 0.22;
+      animation: borderGlow 3s ease-in-out infinite;
+    }
+  }
+
+  &.active {
+    background: var(--accent-primary);
+    color: var(--sys-color-surface);
+    @include mat.elevation(12);
+    transform: translateY(-2px) scale(1.1);
+
+    // Show the gradient border when active (but no animation unless hovering)
+    &::after {
+      opacity: 0.12;
+    }
+
+    // Animate only when active AND hovering
+    &:hover::after {
+      animation: borderGlow 3s ease-in-out infinite;
+    }
+
+    .nav-label {
+      color: var(--sys-color-surface);
+    }
+  }
+
+  mat-icon {
+    font-size: 22px;
+    width: 22px;
+    height: 22px;
+    margin-bottom: 2px;
+  }
+
+  .nav-label {
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1;
+    text-align: center;
+    color: inherit;
+    transition: color 0.3s ease;
+    letter-spacing: -0.02em;
+  }
 }
 
-.menu-items {
+.bottom-icons {
   display: flex;
   flex-direction: column;
+  gap: 16px;
+  margin-top: auto;
+  padding-top: 24px;
+  border-top: 1px solid var(--surface-glass-border);
 }
 
-mat-divider {
-  margin: 8px 0;
-  border-top-color: var(--mat-sys-surface-container-highest);
+@keyframes borderGlow {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
 }
 
-.menu-item {
-  width: 100%;
+// Main Area
+.main-area {
+  flex: 1;
+  display: flex;
+  background: var(--sys-color-surface-variant, #f1f5f9);
+}
+
+// Navigation Panel
+.nav-panel {
+  width: 280px;
+  background: var(--surface-glass);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--surface-glass-border);
+  border-left: none;
+  display: flex;
+  flex-direction: column;
+  @include mat.elevation(2);
+  transition: width 0.3s ease;
+  position: relative;
+  z-index: 5;
+}
+
+.panel-header {
+  padding: 20px 20px 16px 20px;
+  border-bottom: 1px solid
+    color-mix(in srgb, var(--sys-color-outline) 30%, transparent 70%);
   display: flex;
   align-items: center;
-  justify-content: flex-start;
-  margin: 8px 0;
-  @include mat.elevation(0);
-  border-radius: 4px;
+  background: var(--surface-tint);
+  min-height: 48px;
 
-  &:hover {
-    cursor: pointer;
+  h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--sys-color-on-surface, #1e293b);
+    letter-spacing: -0.025em;
+    line-height: 1.2;
   }
 }
 
-.menu-item mat-icon {
-  margin-right: 8px;
-  vertical-align: middle;
+.panel-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 0;
 }
 
-.menu-item .menu-text {
-  transition: opacity 0.3s ease;
+// Navigation Sections
+.nav-section {
+  margin: 0 !important;
+  box-shadow: none !important;
+  border-top: 1px solid
+    color-mix(in srgb, var(--sys-color-outline) 20%, transparent 80%);
+
+  &:first-child {
+    border-top: none;
+  }
+
+  ::ng-deep .mat-expansion-panel-header {
+    padding: 16px 20px;
+    height: auto;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--sys-color-on-surface, #1e293b);
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: var(--surface-tint);
+    }
+
+    .mat-expansion-panel-header-title {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    mat-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+      color: var(--accent-secondary);
+    }
+  }
+
+  ::ng-deep .mat-expansion-panel-body {
+    padding: 0;
+    margin-bottom: 8px;
+  }
 }
 
-mat-expansion-panel {
-  background-color: var(--mat-sys-surface-container);
-  border-radius: 4px;
-  padding: 0px;
-  box-shadow: none !important;
-  margin: 8px 0;
+.section-items {
+  .nav-item {
+    padding: 12px 20px 12px 52px;
+    font-size: 13px;
+    color: var(--sys-color-on-surface-variant, #64748b);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 36px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 5px;
+      height: 5px;
+      background: var(--sys-color-outline-variant, #cbd5e1);
+      border-radius: 50%;
+      transition: all 0.2s ease;
+    }
+
+    .item-icon {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+      color: var(--sys-color-on-surface-variant, #94a3b8);
+    }
+
+    .item-label {
+      font-weight: 500;
+      letter-spacing: -0.01em;
+    }
 
-  &.mat-expansion-panel-body {
-    margin: 0px;
+    &:hover {
+      background: color-mix(
+        in srgb,
+        var(--accent-secondary) 8%,
+        transparent 92%
+      );
+      color: var(--sys-color-on-surface, #1e293b);
+
+      &::before {
+        background: var(--accent-secondary);
+        transform: translateY(-50%) scale(1.3);
+      }
+
+      .item-icon {
+        color: var(--accent-secondary);
+        transform: scale(1.1);
+      }
+    }
+
+    &.active {
+      background: linear-gradient(
+        90deg,
+        color-mix(in srgb, var(--accent-secondary) 15%, transparent 85%) 0%,
+        color-mix(in srgb, var(--accent-secondary) 5%, transparent 95%) 100%
+      );
+      color: var(--accent-secondary);
+      border-right: 4px solid var(--accent-secondary);
+      font-weight: 600;
+
+      &::before {
+        background: var(--accent-secondary);
+        transform: translateY(-50%) scale(1.5);
+        box-shadow: 0 0 8px
+          color-mix(in srgb, var(--accent-secondary) 40%, transparent 60%);
+      }
+
+      .item-icon {
+        color: var(--accent-secondary);
+        transform: scale(1.15);
+      }
+    }
   }
 }
 
-mat-expansion-panel-header {
-  padding: 0px 12px;
-  color: var(--mat-sys-primary);
-  font-size: 14px;
+// Content Area
+.content-area {
+  flex: 1;
+  background: var(--sys-color-surface);
+  overflow-y: auto;
+  margin: 16px;
+  border-radius: 16px;
+  @include mat.elevation(2);
+  display: flex;
+  flex-direction: column;
+}
+
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 32px 32px 24px 32px;
+  border-bottom: 1px solid var(--sys-color-outline-variant, #f1f5f9);
+  background: linear-gradient(
+    135deg,
+    var(--sys-color-surface) 0%,
+    var(--sys-color-surface-variant) 100%
+  );
+  border-radius: 16px 16px 0 0;
 
-  mat-icon {
+  .header-title {
+    h1 {
+      margin: 0 0 8px 0;
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--sys-color-on-surface, #1e293b);
+      letter-spacing: -0.025em;
+    }
+
+    .header-subtitle {
+      margin: 0;
+      font-size: 16px;
+      color: var(--sys-color-on-surface-variant, #64748b);
+      font-weight: 400;
+    }
+  }
+
+  .header-actions {
     display: flex;
-    margin-right: 2px;
-    font-size: 18px;
+    gap: 12px;
     align-items: center;
+
+    .action-btn {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 500;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+
+      mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+      }
+
+      &:hover {
+        transform: translateY(-1px);
+        @include mat.elevation(4);
+      }
+    }
+  }
+}
+
+.main-content {
+  flex: 1;
+  padding: 24px 32px;
+  position: relative;
+
+  // Card containers for future content
+  .content-card {
+    background: var(--sys-color-surface);
+    border-radius: 12px;
+    padding: 24px;
+    margin-bottom: 24px;
+    border: 1px solid var(--sys-color-outline-variant);
+    transition: all 0.2s ease;
+    @include mat.elevation(1);
+
+    &:hover {
+      @include mat.elevation(4);
+      border-color: var(--sys-color-outline);
+    }
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+
+      h3 {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--sys-color-on-surface);
+      }
+
+      .card-actions {
+        display: flex;
+        gap: 8px;
+      }
+    }
+
+    .card-content {
+      color: var(--sys-color-on-surface-variant);
+      line-height: 1.6;
+    }
+  }
+
+  // Grid layout for cards
+  .content-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 24px;
+    margin-top: 24px;
   }
-  // mat-expanded {
-  //   background-color: var(--mat-sys-primary);
-  // }
 }
 
-mat-panel-title mat-icon {
-  margin-right: 8px;
+// Empty State
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 400px;
+
+  .empty-state-content {
+    text-align: center;
+    max-width: 480px;
+    padding: 48px 24px;
+
+    .empty-state-icon {
+      width: 120px;
+      height: 120px;
+      margin: 0 auto 32px auto;
+      background: linear-gradient(
+        135deg,
+        var(--accent-secondary) 0%,
+        color-mix(in srgb, var(--accent-secondary) 80%, black 20%) 100%
+      );
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      @include mat.elevation(8);
+
+      mat-icon {
+        font-size: 48px;
+        width: 48px;
+        height: 48px;
+        color: var(--sys-color-surface);
+      }
+    }
+
+    h2 {
+      margin: 0 0 16px 0;
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--sys-color-on-surface, #1e293b);
+      letter-spacing: -0.025em;
+    }
+
+    p {
+      margin: 0 0 32px 0;
+      font-size: 16px;
+      color: var(--sys-color-on-surface-variant, #64748b);
+      line-height: 1.6;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 500;
+      border-radius: 8px;
+      padding: 12px 24px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        transform: translateY(-2px);
+        @include mat.elevation(8);
+      }
+
+      mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
 }
 
-mat-sidenav-content {
-  background-color: var(--mat-sys-surface-dim);
-  height: 100vh;
-  width: 100%;
-  padding: 12px;
+// Responsive Design
+@media (max-width: 1024px) {
+  .nav-panel {
+    width: 260px;
+  }
+
+  .content-header {
+    flex-direction: column;
+    gap: 20px;
+    align-items: flex-start;
+
+    .header-actions {
+      width: 100%;
+      justify-content: flex-start;
+    }
+  }
 }
 
-.spacer {
-  flex-grow: 1; /* Pushes everything below it down */
+@media (max-width: 768px) {
+  .icon-sidebar {
+    width: 80px;
+
+    .logo-section .logo-icon {
+      width: 52px;
+      height: 52px;
+
+      .logo-img {
+        width: 44px;
+        height: 44px;
+      }
+    }
+
+    .nav-icon-btn {
+      width: 56px;
+      height: 56px;
+
+      mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+      }
+
+      .nav-label {
+        font-size: 9px;
+      }
+    }
+  }
+
+  .nav-panel {
+    width: 240px;
+  }
+
+  .content-area {
+    margin: 12px;
+  }
+
+  .content-header {
+    padding: 24px 20px 16px 20px;
+
+    .header-title h1 {
+      font-size: 24px;
+    }
+
+    .header-actions {
+      flex-wrap: wrap;
+      gap: 8px;
+
+      .action-btn {
+        flex: 1;
+        min-width: auto;
+      }
+    }
+  }
+
+  .main-content {
+    padding: 16px 20px;
+  }
 }
 
-.footer {
-  padding-bottom: 10px;
-  color: var(--mat-sys-primary);
+@media (max-width: 640px) {
+  .main-area {
+    position: relative;
+  }
+
+  .nav-panel {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+
+    &.open {
+      transform: translateX(0);
+    }
+  }
+
+  .content-header {
+    .header-actions {
+      .action-btn {
+        padding: 8px 12px;
+        font-size: 14px;
+
+        mat-icon {
+          font-size: 16px;
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    .empty-state-content {
+      padding: 24px 16px;
+
+      .empty-state-icon {
+        width: 80px;
+        height: 80px;
+
+        mat-icon {
+          font-size: 32px;
+          width: 32px;
+          height: 32px;
+        }
+      }
+
+      h2 {
+        font-size: 20px;
+      }
+
+      p {
+        font-size: 14px;
+      }
+    }
+  }
 }
diff --git a/frontend/bec_atlas/src/app/dashboard/dashboard.component.spec.ts b/frontend/bec_atlas/src/app/dashboard/dashboard.component.spec.ts
index 4ed6858..50fc7e0 100644
--- a/frontend/bec_atlas/src/app/dashboard/dashboard.component.spec.ts
+++ b/frontend/bec_atlas/src/app/dashboard/dashboard.component.spec.ts
@@ -1,38 +1,164 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { of, Subject } from 'rxjs';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { DashboardComponent } from './dashboard.component';
+import { DeploymentService } from '../deployment.service';
+import { AuthDataService } from '../core/remote-data.service';
+import { RedisConnectorService } from '../core/redis-connector.service';
+import { AppConfigService } from '../app-config.service';
+import { DeploymentSelectionComponent } from '../deployment-selection/deployment-selection.component';
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { AppConfigService } from '../app-config.service';
-import { ActivatedRoute, provideRouter } from '@angular/router';
+import { provideRouter } from '@angular/router';
 
 describe('DashboardComponent', () => {
   let component: DashboardComponent;
   let fixture: ComponentFixture<DashboardComponent>;
+  let mockRouter: jasmine.SpyObj<Router>;
+  let mockDialog: jasmine.SpyObj<MatDialog>;
+  let mockDeploymentService: jasmine.SpyObj<DeploymentService>;
+  let mockAuthDataService: jasmine.SpyObj<AuthDataService>;
 
   beforeEach(async () => {
+    const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
+    const deploymentSpy = jasmine.createSpyObj('DeploymentService', [
+      'selectDeployment',
+    ]);
+    const authSpy = jasmine.createSpyObj('AuthDataService', ['logout']);
+    const breakpointSpy = jasmine.createSpyObj('BreakpointObserver', [
+      'observe',
+    ]);
+    const dialogSpy = jasmine.createSpyObj('MatDialog', ['open'], {
+      openDialogs: [],
+      afterOpened: new Subject(),
+      afterAllClosed: new Subject(),
+      _getAfterAllClosed: () => new Subject(),
+    });
+
+    breakpointSpy.observe.and.returnValue(
+      of({ matches: false, breakpoints: {} })
+    );
+    dialogSpy.open.and.returnValue({
+      afterClosed: () => of(null),
+      close: () => {},
+      componentInstance: {},
+      id: 'test-dialog',
+    } as any);
+
     await TestBed.configureTestingModule({
+      imports: [
+        DashboardComponent,
+        DeploymentSelectionComponent,
+        NoopAnimationsModule,
+      ],
       providers: [
         provideHttpClient(),
         provideHttpClientTesting(),
-        AppConfigService,
         provideRouter([]),
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            snapshot: { paramMap: new Map() }, // Mocks route params
-          },
-        },
+        AppConfigService,
+        { provide: Router, useValue: routerSpy },
+        { provide: MatDialog, useValue: dialogSpy },
+        { provide: BreakpointObserver, useValue: breakpointSpy },
+        { provide: DeploymentService, useValue: deploymentSpy },
+        { provide: AuthDataService, useValue: authSpy },
+        { provide: RedisConnectorService, useValue: {} },
       ],
-      imports: [DashboardComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(DashboardComponent);
     component = fixture.componentInstance;
+    mockRouter = TestBed.inject(Router) as jasmine.SpyObj<Router>;
+    mockDialog = TestBed.inject(MatDialog) as jasmine.SpyObj<MatDialog>;
+    mockDeploymentService = TestBed.inject(
+      DeploymentService
+    ) as jasmine.SpyObj<DeploymentService>;
+    mockAuthDataService = TestBed.inject(
+      AuthDataService
+    ) as jasmine.SpyObj<AuthDataService>;
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should initialize with default values', () => {
+    expect(component.selectedNavItem()).toBe('analytics');
+    expect(component.selectedSubItem()).toBe('reports');
+    expect(component.showNavPanel()).toBe(true);
+    expect(component.isMobile()).toBe(false);
+  });
+
+  it('should have navigation items', () => {
+    expect(component.navItems.length).toBe(4);
+    const navItemIds = component.navItems.map((item) => item.id);
+    expect(navItemIds).toEqual(['analytics', 'data', 'control', 'settings']);
+  });
+
+  it('should get current navigation content', () => {
+    component.selectedNavItem.set('data');
+    const currentNav = component.getCurrentNavContent();
+
+    expect(currentNav?.id).toBe('data');
+    expect(currentNav?.label).toBe('Data Browser');
+  });
+
+  it('should toggle navigation panel', () => {
+    component.showNavPanel.set(true);
+    component.toggleNavPanel();
+    expect(component.showNavPanel()).toBe(false);
+  });
+
+  it('should select navigation item', () => {
+    const dataItem = component.navItems.find((item) => item.id === 'data')!;
+    component.selectNavItem(dataItem);
+
+    expect(component.selectedNavItem()).toBe('data');
+    expect(component.showNavPanel()).toBe(true);
+  });
+
+  it('should navigate to child', () => {
+    const child = { id: 'scan-data', label: 'Scan Data', icon: 'scatter_plot' };
+    component.navigateToChild(child);
+
+    expect(component.selectedSubItem()).toBe('scan-data');
+  });
+
+  it('should call logout and navigate', () => {
+    component.logout();
+
+    expect(mockAuthDataService.logout).toHaveBeenCalled();
+    expect(mockRouter.navigate).toHaveBeenCalledWith(['/login']);
+  });
+
+  it('should open deployment dialog', () => {
+    // Spy on the actual dialog service the component uses
+    spyOn(component['dialog'], 'open').and.returnValue({
+      afterClosed: () => of(null),
+      close: () => {},
+      componentInstance: {},
+      id: 'test-dialog',
+    } as any);
+
+    component.openDeploymentDialog();
+
+    expect(component['dialog'].open).toHaveBeenCalledWith(
+      DeploymentSelectionComponent,
+      jasmine.objectContaining({
+        disableClose: true,
+        maxWidth: '95vw',
+      })
+    );
+  });
+
+  it('should render main layout', () => {
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.dashboard-layout')).toBeTruthy();
+    expect(compiled.querySelector('.icon-sidebar')).toBeTruthy();
+  });
 });
diff --git a/frontend/bec_atlas/src/app/dashboard/dashboard.component.ts b/frontend/bec_atlas/src/app/dashboard/dashboard.component.ts
index 2d73d74..7122cb9 100644
--- a/frontend/bec_atlas/src/app/dashboard/dashboard.component.ts
+++ b/frontend/bec_atlas/src/app/dashboard/dashboard.component.ts
@@ -1,12 +1,11 @@
-import { Component, inject } from '@angular/core';
+import { Component, signal, OnInit } from '@angular/core';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatIconModule } from '@angular/material/icon';
-import { BreakpointObserver } from '@angular/cdk/layout';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDividerModule } from '@angular/material/divider';
 import { Router, RouterModule } from '@angular/router';
-import { MatExpansionModule } from '@angular/material/expansion';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { DeploymentService } from '../deployment.service';
 import {
   MatDialog,
@@ -16,15 +15,23 @@ import {
 import { DeploymentSelectionComponent } from '../deployment-selection/deployment-selection.component';
 import { RedisConnectorService } from '../core/redis-connector.service';
 import { AuthDataService } from '../core/remote-data.service';
+
+interface NavItem {
+  id: string;
+  label: string;
+  icon: string;
+  route?: string;
+  children?: NavItem[];
+}
+
 @Component({
   selector: 'app-dashboard',
   imports: [
     CommonModule,
-    MatExpansionModule,
-    MatDividerModule,
     MatSidenavModule,
     MatIconModule,
     MatButtonModule,
+    MatTooltipModule,
     MatDialogModule,
     RouterModule,
   ],
@@ -32,68 +39,160 @@ import { AuthDataService } from '../core/remote-data.service';
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss',
 })
-export class DashboardComponent {
-  // isScreenSmall = false;
-  readonly dialog = inject(MatDialog);
-  deployment_name: string = '';
-  realm_name: string = '';
-  hideExperimentPanel = true;
-  selectOrSwitchButtonTitle = 'Select Deployment';
+export class DashboardComponent implements OnInit {
+  // Signals for responsive design
+  isMobile = signal(false);
+
+  // UI state
+  selectedNavItem = signal<string>('analytics');
+  selectedSubItem = signal<string>('');
+  showNavPanel = signal<boolean>(true);
+
+  // Navigation items with their content
+  navItems: NavItem[] = [
+    {
+      id: 'analytics',
+      label: 'Analytics',
+      icon: 'analytics',
+      route: '/dashboard/analytics',
+      children: [
+        { id: 'reports', label: 'Reports', icon: 'assessment' },
+        { id: 'metrics', label: 'Metrics', icon: 'speed' },
+        { id: 'dashboards', label: 'Dashboards', icon: 'dashboard' },
+        { id: 'exports', label: 'Data Exports', icon: 'file_download' },
+      ],
+    },
+    {
+      id: 'data',
+      label: 'Data Browser',
+      icon: 'table_chart',
+      children: [
+        {
+          id: 'scan-data',
+          label: 'Scan Data',
+          icon: 'scatter_plot',
+          route: '/dashboard/scan-table',
+        },
+        {
+          id: 'device-data',
+          label: 'Device Data',
+          icon: 'developer_board',
+          route: '/dashboard/device-data',
+        },
+        { id: 'historical', label: 'Historical Data', icon: 'history' },
+        { id: 'realtime', label: 'Real-time Data', icon: 'timeline' },
+      ],
+    },
+    {
+      id: 'control',
+      label: 'Experiment Control',
+      icon: 'science',
+      children: [
+        {
+          id: 'overview',
+          label: 'Control Panel',
+          icon: 'tune',
+          route: '/dashboard/overview-grid',
+        },
+        {
+          id: 'admin',
+          label: 'Admin',
+          icon: 'admin_panel_settings',
+          route: '/dashboard/deployment-admin',
+        },
+        { id: 'automation', label: 'Automation', icon: 'auto_fix_high' },
+        { id: 'sequences', label: 'Sequences', icon: 'playlist_play' },
+      ],
+    },
+    {
+      id: 'settings',
+      label: 'Settings',
+      icon: 'settings',
+      route: '/dashboard/settings',
+      children: [
+        { id: 'user-settings', label: 'User Settings', icon: 'person' },
+        {
+          id: 'system-config',
+          label: 'System Configuration',
+          icon: 'settings_applications',
+        },
+        { id: 'security', label: 'Security', icon: 'security' },
+        { id: 'integrations', label: 'Integrations', icon: 'extension' },
+      ],
+    },
+  ];
+
+  // Get current navigation content
+  getCurrentNavContent() {
+    return this.navItems.find((item) => item.id === this.selectedNavItem());
+  }
+
+  // Navigate to child route
+  navigateToChild(child: NavItem): void {
+    this.selectedSubItem.set(child.id);
+    if (child.route) {
+      this.router.navigate([child.route]);
+    }
+  }
 
   constructor(
     private breakpointObserver: BreakpointObserver,
     private deploymentService: DeploymentService,
     private authDataService: AuthDataService,
-    private router: Router
-  ) {}
+    private router: Router,
+    private dialog: MatDialog
+  ) {
+    // Setup responsive breakpoints
+    this.breakpointObserver
+      .observe([Breakpoints.Handset])
+      .subscribe((result) => this.isMobile.set(result.matches));
+  }
 
   ngOnInit(): void {
-    // check if the user has already selected a deployment
-    // if not, open the deployment selection dialog
-    this.deploymentService.selectedDeployment.subscribe((deployment) => {
-      if (deployment) {
-        console.log('Updating deployment name to: ', deployment.name);
-        this.deployment_name = deployment.name;
-        this.realm_name = deployment.realm_id;
-        this.hideExperimentPanel = false;
-        this.selectOrSwitchButtonTitle = 'Switch Deployment';
-      } else {
-        this.deployment_name = '';
-        this.realm_name = '';
-        this.hideExperimentPanel = true;
-        this.selectOrSwitchButtonTitle = 'Select Deployment';
-      }
-    });
+    // Initialize any needed data
+    // Set default selected navigation item
+    this.selectedNavItem.set('analytics');
+    this.selectedSubItem.set('reports');
+  }
+
+  selectNavItem(item: NavItem): void {
+    // If clicking the same item, toggle the panel
+    if (this.selectedNavItem() === item.id) {
+      this.toggleNavPanel();
+    } else {
+      // If clicking a different item, switch content and ensure panel is open
+      this.selectedNavItem.set(item.id);
+      this.showNavPanel.set(true);
+    }
+
+    if (item.route) {
+      this.router.navigate([item.route]);
+    }
+  }
 
-    // this.breakpointObserver
-    //   .observe([Breakpoints.Small, Breakpoints.XSmall])
-    //   .subscribe((result) => {
-    //     this.isScreenSmall = result.matches;
-    //   });
+  toggleNavPanel(): void {
+    this.showNavPanel.update((visible) => !visible);
   }
 
-  openDeploymentDialog() {
-    // open deployment dialog
-    let dialogConfig: MatDialogConfig = {
+  openDeploymentDialog(): void {
+    const dialogConfig: MatDialogConfig = {
       disableClose: true,
-      width: '80%',
+      width: this.isMobile() ? '95vw' : '600px',
+      maxWidth: '95vw',
     };
-    let dialogRef = this.dialog.open(
+
+    const dialogRef = this.dialog.open(
       DeploymentSelectionComponent,
       dialogConfig
     );
     dialogRef.afterClosed().subscribe((result) => {
-      this.deploymentService.selectDeployment(result);
+      if (result) {
+        this.deploymentService.selectDeployment(result);
+      }
     });
   }
 
-  panelOpened() {
-    if (!this.deploymentService.selectedDeployment.value) {
-      this.openDeploymentDialog();
-    }
-  }
-
-  logout() {
+  logout(): void {
     this.authDataService.logout();
     this.router.navigate(['/login']);
   }
diff --git a/frontend/bec_atlas/src/styles.scss b/frontend/bec_atlas/src/styles.scss
index 0cf625e..4bdeadf 100644
--- a/frontend/bec_atlas/src/styles.scss
+++ b/frontend/bec_atlas/src/styles.scss
@@ -1,61 +1,42 @@
 /* You can add global styles to this file, and also import other style files */
-@use "@angular/material" as mat;
-@use "_theme-colors.scss" as theme;
+@use "styles/theme/bec-atlas-theme";
 
 @import "gridstack/dist/gridstack.min.css";
 @import "gridstack/dist/gridstack-extra.min.css";
 @import "css-star-rating/scss/star-rating";
 
-// for debugging the layout
-// * * * * * {
-//   outline: 3px solid red;
-// }
-
+// Base styles
 html,
 body {
   height: 100%;
+  margin: 0;
+  padding: 0;
 }
+
 body {
-  margin: 0;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-html {
-  color-scheme: light dark;
+// Smooth theme transitions
+* {
+  transition: background-color 0.3s ease, color 0.3s ease,
+    border-color 0.3s ease;
+}
 
-  // Light theme
-  @media (prefers-color-scheme: light) {
-    @include mat.theme(
-      (
-        color: theme.$primary-palette,
-        typography: (
-          plain-family: Poppins,
-          bold-weight: 600,
-          medium-weight: 400,
-          regular-weight: 300,
-        ),
-        density: 0,
-      ),
-      $overrides: (primary-container: orange),
-      // Light-specific override)
-    );
-  }
+// Remove transition for backdrop-filter to avoid flickering
+*[style*="backdrop-filter"] {
+  transition: background-color 0.3s ease, color 0.3s ease,
+    border-color 0.3s ease !important;
+}
 
-  // Dark theme
-  @media (prefers-color-scheme: dark) {
-    @include mat.theme(
-      (
-        color: theme.$primary-palette,
-        typography: (
-          plain-family: Poppins,
-          bold-weight: 600,
-          medium-weight: 400,
-          regular-weight: 300,
-        ),
-        density: 0,
-      ),
-      $overrides: (primary-container: darkorange),
-      // Dark-specific override)
-    );
-  }
+// Enhanced theme transition
+.theme-transitioning * {
+  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
diff --git a/frontend/bec_atlas/src/styles/theme/bec-atlas-theme.scss b/frontend/bec_atlas/src/styles/theme/bec-atlas-theme.scss
new file mode 100644
index 0000000..74072da
--- /dev/null
+++ b/frontend/bec_atlas/src/styles/theme/bec-atlas-theme.scss
@@ -0,0 +1,89 @@
+@use "@angular/material" as mat;
+
+// Modern Angular Material M3 theming approach
+html {
+  // Enable automatic light/dark mode switching based on system preference
+  color-scheme: light dark;
+
+  // Define the M3 theme with primary and tertiary colors
+  @include mat.theme(
+    (
+      color: (
+        primary: mat.$azure-palette,
+        tertiary: mat.$magenta-palette,
+        theme-type: color-scheme,
+      ),
+      typography: (
+        plain-family:
+          'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        brand-family:
+          'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        bold-weight: 600,
+        medium-weight: 500,
+        regular-weight: 400,
+      ),
+      density: 0,
+    )
+  );
+}
+
+// Apply default surface colors to body
+body {
+  background: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+}
+
+// CSS Custom Properties for BEC Atlas design tokens
+:root {
+  // Primary BEC Atlas brand colors
+  --bec-primary: #64748b;
+  --bec-primary-light: #94a3b8;
+  --bec-primary-dark: #475569;
+  --bec-secondary: #8c3168;
+  --bec-secondary-light: #be4f8b;
+  --bec-secondary-dark: #6b1e4a;
+
+  // Glass effect and surface colors
+  --surface-glass: rgba(248, 250, 252, 0.85);
+  --surface-glass-border: rgba(226, 232, 240, 0.6);
+  --surface-tint: rgba(248, 250, 252, 0.6);
+
+  // Accent colors for UI elements
+  --accent-primary: var(--bec-primary);
+  --accent-primary-dark: var(--bec-primary-dark);
+  --accent-secondary: var(--bec-secondary);
+  --accent-secondary-light: var(--bec-secondary-light);
+
+  // System color tokens
+  --sys-color-surface: #ffffff;
+  --sys-color-surface-variant: #f8fafc;
+  --sys-color-on-surface: #1e293b;
+  --sys-color-on-surface-variant: #64748b;
+  --sys-color-outline: #e2e8f0;
+  --sys-color-outline-variant: #f1f5f9;
+}
+
+// Dark mode color overrides
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bec-primary: #94a3b8;
+    --bec-primary-light: #cbd5e1;
+    --bec-primary-dark: #64748b;
+    --bec-secondary: #be4f8b;
+    --bec-secondary-light: #d946ef;
+    --bec-secondary-dark: #8c3168;
+
+    // Glass effect and surface colors for dark mode
+    --surface-glass: rgba(30, 41, 59, 0.85);
+    --surface-glass-border: rgba(71, 85, 105, 0.6);
+    --surface-tint: rgba(30, 41, 59, 0.6);
+
+    // System color tokens for dark mode
+    --sys-color-surface: #0f172a;
+    --sys-color-surface-variant: #1e293b;
+    --sys-color-on-surface: #f8fafc;
+    --sys-color-on-surface-variant: #94a3b8;
+    --sys-color-outline: #334155;
+    --sys-color-outline-variant: #475569;
+  }
+}