diff --git a/apps/dsp-app/src/app/workspace/resource/representation/archive/archive.component.html b/apps/dsp-app/src/app/workspace/resource/representation/archive/archive.component.html
index c5a58a4e37..aaf1168cb4 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/archive/archive.component.html
+++ b/apps/dsp-app/src/app/workspace/resource/representation/archive/archive.component.html
@@ -26,7 +26,7 @@
                 <button mat-icon-button [matMenuTriggerFor]="more">
                     <mat-icon>more_vert</mat-icon>
                 </button>
-                <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                <mat-menu #more="matMenu" class="representation-menu">
                     <button
                         class="menu-content"
                         mat-menu-item
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/archive/archive.component.scss b/apps/dsp-app/src/app/workspace/resource/representation/archive/archive.component.scss
index 3cb0032f6b..761fda8214 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/archive/archive.component.scss
+++ b/apps/dsp-app/src/app/workspace/resource/representation/archive/archive.component.scss
@@ -5,7 +5,7 @@
     width: 100%;
 
     .container {
-        background: #292929;
+        background: $dark;
         border-radius: 8px 8px 0px 0px;
         display: flex;
         justify-content: center;
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.html b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.html
index 332a745974..79ae7abdff 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.html
+++ b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.html
@@ -31,7 +31,7 @@
                 <button mat-icon-button [matMenuTriggerFor]="more">
                     <mat-icon>more_vert</mat-icon>
                 </button>
-                <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                <mat-menu #more="matMenu" class="representation-menu">
                     <button
                         class="menu-content"
                         mat-menu-item
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.scss b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.scss
index 1afc9d23bb..8b3826a797 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.scss
+++ b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.scss
@@ -5,7 +5,7 @@
     width: 100%;
 
     .container {
-        background: #292929;
+        background: $dark;
         border-radius: 8px 8px 0px 0px;
         display: flex;
         justify-content: center;
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/document/document.component.html b/apps/dsp-app/src/app/workspace/resource/representation/document/document.component.html
index 0184f571a3..fbee83ea7a 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/document/document.component.html
+++ b/apps/dsp-app/src/app/workspace/resource/representation/document/document.component.html
@@ -27,7 +27,7 @@
                 <button mat-icon-button [matMenuTriggerFor]="more">
                     <mat-icon>more_vert</mat-icon>
                 </button>
-                <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                <mat-menu #more="matMenu" class="representation-menu">
                     <button
                         class="menu-content"
                         mat-menu-item
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/document/document.component.scss b/apps/dsp-app/src/app/workspace/resource/representation/document/document.component.scss
index efee8c1316..0359c78543 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/document/document.component.scss
+++ b/apps/dsp-app/src/app/workspace/resource/representation/document/document.component.scss
@@ -23,7 +23,7 @@ $osd-height: 460px;
   .pdf-container {
     color: $bright;
     height: 90%;
-    background-color: #292929;
+    background-color: $dark;
     border-radius: 8px 8px 0px 0px;
 
     pdf-viewer {
@@ -56,7 +56,7 @@ $osd-height: 460px;
   width: 100%;
 
   .container {
-    background: #292929;
+    background: $dark;
     border-radius: 8px 8px 0px 0px;
     display: flex;
     justify-content: center;
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/still-image/still-image.component.html b/apps/dsp-app/src/app/workspace/resource/representation/still-image/still-image.component.html
index 3f530a2571..5869dce82d 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/still-image/still-image.component.html
+++ b/apps/dsp-app/src/app/workspace/resource/representation/still-image/still-image.component.html
@@ -55,7 +55,7 @@
         <button mat-icon-button [matMenuTriggerFor]="more">
             <mat-icon>more_vert</mat-icon>
         </button>
-        <mat-menu #more="matMenu" class="mat-menu-custom-black">
+        <mat-menu #more="matMenu" class="representation-menu">
             <button
                 class="menu-content"
                 mat-menu-item
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/text/text.component.html b/apps/dsp-app/src/app/workspace/resource/representation/text/text.component.html
index 824d3cc362..3039e0e824 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/text/text.component.html
+++ b/apps/dsp-app/src/app/workspace/resource/representation/text/text.component.html
@@ -25,7 +25,7 @@
                 <button mat-icon-button [matMenuTriggerFor]="more">
                     <mat-icon>more_vert</mat-icon>
                 </button>
-                <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                <mat-menu #more="matMenu" class="representation-menu">
                     <button
                         class="menu-content"
                         mat-menu-item
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/text/text.component.scss b/apps/dsp-app/src/app/workspace/resource/representation/text/text.component.scss
index 32a1461674..1d41fac066 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/text/text.component.scss
+++ b/apps/dsp-app/src/app/workspace/resource/representation/text/text.component.scss
@@ -5,7 +5,7 @@
   width: 100%;
 
   .container {
-    background: #292929;
+    background: $dark;
     border-radius: 8px 8px 0px 0px;
     display: flex;
     justify-content: center;
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/video/video.component.html b/apps/dsp-app/src/app/workspace/resource/representation/video/video.component.html
index 946502706c..915aa45f9d 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/video/video.component.html
+++ b/apps/dsp-app/src/app/workspace/resource/representation/video/video.component.html
@@ -87,7 +87,7 @@
             <button mat-icon-button [matMenuTriggerFor]="more">
                 <mat-icon>more_vert</mat-icon>
             </button>
-            <mat-menu #more="matMenu" class="mat-menu-custom-black">
+            <mat-menu #more="matMenu" class="representation-menu">
                 <button
                     mat-menu-item
                     class="menu-content"
diff --git a/apps/dsp-app/src/styles/_elements.scss b/apps/dsp-app/src/styles/_elements.scss
index baf623f188..843adc7c7c 100644
--- a/apps/dsp-app/src/styles/_elements.scss
+++ b/apps/dsp-app/src/styles/_elements.scss
@@ -3,6 +3,7 @@
 @use "sass:math";
 @use "@material/snackbar" as snackbar;
 @use "@material/button" as button;
+@use "@material/menu-surface" as menu-surface;
 
 .fill-remaining-space {
   /* This fills the remaining space, by using flexbox.
@@ -305,7 +306,7 @@ a,
     }
 
     &.overlay {
-      background: #292929;
+      background: $dark;
     }
 
     &.vertical {
@@ -342,6 +343,14 @@ a,
   // }
 }
 
+// file representation menu styling
+.representation-menu {
+  &.mdc-menu-surface {
+    @include menu-surface.fill-color($dark);
+    @include menu-surface.ink-color($white);
+  }
+}
+
 .no-results {
   margin: 64px;
   min-width: 400px;