diff --git a/apps/cloud/src/app/features/semantic-model/model/_model.component.scss b/apps/cloud/src/app/features/semantic-model/model/_model.component.scss
index 0a4e96c79..f2e9bad11 100644
--- a/apps/cloud/src/app/features/semantic-model/model/_model.component.scss
+++ b/apps/cloud/src/app/features/semantic-model/model/_model.component.scss
@@ -9,7 +9,6 @@ $prefix: (ngm, model);
 @function get-unthemable-tokens() {
   @return (
     border-color: theme('colors.gray.200'),
-    // container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
   );
 }
 
diff --git a/apps/cloud/src/app/features/semantic-model/model/entity/entity.component.scss b/apps/cloud/src/app/features/semantic-model/model/entity/entity.component.scss
index eb93c4b92..f48cdb513 100644
--- a/apps/cloud/src/app/features/semantic-model/model/entity/entity.component.scss
+++ b/apps/cloud/src/app/features/semantic-model/model/entity/entity.component.scss
@@ -1,8 +1,5 @@
 :host {
   @apply relative h-full flex-1 flex flex-col;
-
-  // --mat-sidenav-content-background-color: theme(colors.white);
-
   &.pac-fullscreen {
     position: fixed;
     top: 0px;
diff --git a/apps/cloud/src/app/features/story/toolbar/toolbar.component.html b/apps/cloud/src/app/features/story/toolbar/toolbar.component.html
index 902ce9507..05ea02e7b 100644
--- a/apps/cloud/src/app/features/story/toolbar/toolbar.component.html
+++ b/apps/cloud/src/app/features/story/toolbar/toolbar.component.html
@@ -252,7 +252,7 @@
     </div>
 </div>
 
-<div *ngIf="showDetails === 'newPages'" @inOut class="relative w-96 h-full bg-white flex flex-col text-slate-800 p-2 overflow-auto" >
+<div *ngIf="showDetails === 'newPages'" @inOut class="pac-story-bar__detail-card relative w-96 h-full flex flex-col p-2 overflow-auto" >
 
     <button mat-icon-button style="position: absolute;" class="absolute right-1 top-1" (click)="showDetails=null">
         <mat-icon>close</mat-icon>
@@ -274,7 +274,7 @@
     </div>
 </div>
 
-<div *ngIf="showDetails === 'widgets'" @inOut class="w-80 h-full bg-white flex flex-col text-slate-800 p-2 overflow-auto">
+<div *ngIf="showDetails === 'widgets'" @inOut class="pac-story-bar__detail-card w-80 h-full flex flex-col p-2 overflow-auto">
     <div class="text-base text-center my-4">
         {{ 'Story.Toolbar.Charts' | translate: {Default: "Charts"} }}
     </div>
@@ -350,9 +350,9 @@
     </div>
 </div>
 
-<pac-story-designer *ngIf="showDetails === 'storyDesigner'" @inOut class="w-96 h-full bg-white text-slate-800"></pac-story-designer>
+<pac-story-designer *ngIf="showDetails === 'storyDesigner'" @inOut class="pac-story-bar__detail-card w-96 h-full"></pac-story-designer>
 
-<div *ngIf="showDetails === 'devices'" @inOut class="w-80 h-full bg-white flex flex-col text-slate-800 p-2 overflow-auto">
+<div *ngIf="showDetails === 'devices'" @inOut class="pac-story-bar__detail-card w-80 h-full flex flex-col p-2 overflow-auto">
 
     <div class="text-base text-center my-2">
         {{ 'Story.Toolbar.Devices' | translate: {Default: 'Devices'} }}
diff --git a/apps/cloud/src/app/features/story/toolbar/toolbar.component.scss b/apps/cloud/src/app/features/story/toolbar/toolbar.component.scss
index 0118c8178..c72f90444 100644
--- a/apps/cloud/src/app/features/story/toolbar/toolbar.component.scss
+++ b/apps/cloud/src/app/features/story/toolbar/toolbar.component.scss
@@ -4,7 +4,10 @@
   &.pac-toolbar__on-right {
     @apply flex-row-reverse;
   }
+}
 
+.pac-story-bar__detail-card {
+  background-color: var(--mdc-elevated-card-container-color);
 }
 
 .mat-divider {
@@ -27,4 +30,5 @@
 
 .pac-copilot-chat {
   --pac-copilot-bg-color: transparent;
-}
\ No newline at end of file
+}
+
diff --git a/apps/cloud/src/styles/dark.scss b/apps/cloud/src/styles/dark.scss
index 736a113e9..a01d453dc 100644
--- a/apps/cloud/src/styles/dark.scss
+++ b/apps/cloud/src/styles/dark.scss
@@ -7,8 +7,8 @@ body.dark {
 
   @include token-utils.create-token-values(ngm, (
     bg-color: rgb(10 10 10),
-    card-bg-color: theme('colors.bluegray.800'),
-    card-border-color: theme('colors.bluegray.700'),
+    card-bg-color: rgb(22, 24, 28),
+    card-border-color: theme('colors.neutral.800'),
     primary-color: theme('colors.bluegray.500'),
     text-primary-color: theme('colors.bluegray.200'),
     scrollbar-color: theme('colors.neutral.900'),
diff --git a/libs/material-theme/src/styles/material/_dark.theme.scss b/libs/material-theme/src/styles/material/_dark.theme.scss
index a2fe1da2a..66cefa388 100644
--- a/libs/material-theme/src/styles/material/_dark.theme.scss
+++ b/libs/material-theme/src/styles/material/_dark.theme.scss
@@ -26,8 +26,8 @@ $background: (
   app-bar:    theme('colors.neutral.900'),
   background: black,
   hover:      rgba(white, 0.1), // TODO(kara): check style with Material Design UX
-  card:       rgb(22, 24, 28), // rgb(23, 23, 23), // theme('colors.neutral.900'), //#192038, //#222b45,
-  dialog:     theme('colors.neutral.900'),
+  card:       rgb(22, 24, 28),
+  dialog:     rgb(22, 24, 28),
   disabled-button: rgba(white, 0.12),
   raised-button: map.get($grey-palette, 800),
   // focused-button: $light-focused,