diff --git a/src/app/workspace/resource/representation/archive/archive.component.html b/src/app/workspace/resource/representation/archive/archive.component.html
index f5ae10a307..6eef33903f 100644
--- a/src/app/workspace/resource/representation/archive/archive.component.html
+++ b/src/app/workspace/resource/representation/archive/archive.component.html
@@ -23,11 +23,11 @@
                 <button mat-icon-button [matMenuTriggerFor]="more">
                     <mat-icon>more_vert</mat-icon>
                 </button>
-                <mat-menu #more="matMenu">
-                    <button mat-menu-item (click)="downloadArchive(src.fileValue.fileUrl)">
+                <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                    <button class="menu-content" mat-menu-item (click)="downloadArchive(src.fileValue.fileUrl)">
                         Download file
                     </button>
-                    <button mat-menu-item (click)="openReplaceFileDialog()">
+                    <button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
                         Replace file
                     </button>
                 </mat-menu>
@@ -37,4 +37,4 @@
 </div>
 <div *ngIf="!src || !src.fileValue.fileUrl">
     No valid file url found for this resource.
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/workspace/resource/representation/archive/archive.component.scss b/src/app/workspace/resource/representation/archive/archive.component.scss
index c6c58d40a4..b3a72986d3 100644
--- a/src/app/workspace/resource/representation/archive/archive.component.scss
+++ b/src/app/workspace/resource/representation/archive/archive.component.scss
@@ -25,4 +25,11 @@
             }
         }
     }
-}
\ No newline at end of file
+}
+
+::ng-deep .mat-menu-custom-black {
+    background: #292929;
+    .menu-content {
+      color: #FFFFFF;
+    }
+  }
\ No newline at end of file
diff --git a/src/app/workspace/resource/representation/audio/audio.component.html b/src/app/workspace/resource/representation/audio/audio.component.html
index 1b3ecb8814..d7b85a43fc 100644
--- a/src/app/workspace/resource/representation/audio/audio.component.html
+++ b/src/app/workspace/resource/representation/audio/audio.component.html
@@ -1,6 +1,7 @@
 <div class="controls">
     <!-- in case of an error -->
-    <app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'audio'" *ngIf="failedToLoad"></app-status>
+    <app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'audio'" *ngIf="failedToLoad">
+    </app-status>
 
     <div class="file-representation">
         <div class="container">
@@ -9,7 +10,7 @@
                     <mat-icon>
                         audio_file
                     </mat-icon>
-                </div>  
+                </div>
                 <div *ngIf="failedToLoad">Your browser does not support the audio element.</div>
                 <div class="audio-player">
                     <audio id="audio" preload="auto">
@@ -25,17 +26,17 @@
                 <button mat-icon-button [matMenuTriggerFor]="more">
                     <mat-icon>more_vert</mat-icon>
                 </button>
-                <mat-menu #more="matMenu">
-                    <button mat-menu-item (click)="openIIIFnewTab()">
+                <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                    <button class="menu-content" mat-menu-item (click)="openIIIFnewTab()">
                         Open IIIF URL in new tab
                     </button>
-                    <button mat-menu-item [cdkCopyToClipboard]="src.fileValue.fileUrl">
+                    <button class="menu-content" mat-menu-item [cdkCopyToClipboard]="src.fileValue.fileUrl">
                         Copy IIIF URL to clipboard
                     </button>
-                    <button mat-menu-item (click)="downloadAudio(src.fileValue.fileUrl)">
+                    <button class="menu-content" mat-menu-item (click)="downloadAudio(src.fileValue.fileUrl)">
                         Download audio
                     </button>
-                    <button mat-menu-item (click)="openReplaceFileDialog()">
+                    <button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
                         Replace file
                     </button>
                 </mat-menu>
@@ -55,7 +56,8 @@
                     </span>
                 </div>
                 <div class="time-slider-container fill-remaining-space">
-                    <mat-slider class="time-slider" min="0" [max]="getDuration()" step="1" [value]="currentTime" (input)="onSliderChangeEnd($event)"></mat-slider>
+                    <mat-slider class="time-slider" min="0" [max]="getDuration()" step="1" [value]="currentTime"
+                        (input)="onSliderChangeEnd($event)"></mat-slider>
                 </div>
                 <button mat-icon-button (click)="toggleMute()" *ngIf="!isMuted()">
                     <mat-icon>
@@ -70,4 +72,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/workspace/resource/representation/audio/audio.component.scss b/src/app/workspace/resource/representation/audio/audio.component.scss
index 7220dbfa86..ee377114bf 100644
--- a/src/app/workspace/resource/representation/audio/audio.component.scss
+++ b/src/app/workspace/resource/representation/audio/audio.component.scss
@@ -27,6 +27,7 @@
         }
     }
 }
+
 .current-time-span {
     padding-left: 2.5%;
     font-weight: bold;
@@ -41,4 +42,11 @@
             }
         }        
     }
-}
\ No newline at end of file
+}
+
+::ng-deep .mat-menu-custom-black {
+    background: #292929;
+    .menu-content {
+      color: #FFFFFF;
+    }
+  }
\ No newline at end of file
diff --git a/src/app/workspace/resource/representation/document/document.component.html b/src/app/workspace/resource/representation/document/document.component.html
index 96226bb3ae..e92732262a 100644
--- a/src/app/workspace/resource/representation/document/document.component.html
+++ b/src/app/workspace/resource/representation/document/document.component.html
@@ -1,44 +1,47 @@
 <div class="pdf-container">
-    <div class="action horizontal bottom overlay">
+    <!-- in case of an error -->
+    <app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'document'" *ngIf="failedToLoad">
+    </app-status>
+
+    <pdf-viewer class="pdf-viewer" [src]="src.fileValue.fileUrl" [original-size]="false" [autoresize]="true"
+        [show-all]="true" [show-borders]="true" [zoom]="zoomFactor" [zoom-scale]="'page-width'">
+    </pdf-viewer>
+</div>
+<div class="toolbar">
+    <div class="action horizontal bottom">
         <!-- caption -->
         <span>
             <button mat-icon-button [matMenuTriggerFor]="more">
                 <mat-icon>more_vert</mat-icon>
             </button>
-            <mat-menu #more="matMenu">
-                <a mat-menu-item (click)="downloadDocument(src.fileValue.fileUrl)">
+            <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                <button class="menu-content" mat-menu-item (click)="downloadDocument(src.fileValue.fileUrl)">
                     Download file
-                </a>
-                <button mat-menu-item (click)="openReplaceFileDialog()">
+                </button>
+                <button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
                     Replace file
                 </button>
             </mat-menu>
         </span>
 
         <!-- input field for searching through document -->
-        <input matInput
-               #queryInp
-               type="text"
-               id="searchbox"
-               name="searchbox"
-               class="pdf-searchbox fill-remaining-space"
-               placeholder="Search in pdf..."
-               [value]="pdfQuery"
-               [disabled]="failedToLoad"
-               (input)="searchQueryChanged($event.target.value)"
-               (keyup.enter)="searchQueryChanged(queryInp.value)"
-        />
+        <input matInput #queryInp type="text" id="searchbox" name="searchbox" class="pdf-searchbox fill-remaining-space"
+            placeholder="Search in pdf..." [value]="pdfQuery" [disabled]="failedToLoad"
+            (input)="searchQueryChanged($event.target.value)" (keyup.enter)="searchQueryChanged(queryInp.value)" />
 
         <!-- image action tools e.g. zoom, rotate and flip -->
         <span>
             <!-- zoom buttons -->
-            <button mat-icon-button id="DSP_PDF_ZOOM_OUT" matTooltip="Zoom out" (click)="zoomFactor = zoomFactor - 0.2" [disabled]="failedToLoad">
+            <button mat-icon-button id="DSP_PDF_ZOOM_OUT" matTooltip="Zoom out" (click)="zoomFactor = zoomFactor - 0.2"
+                [disabled]="failedToLoad">
                 <mat-icon>remove_circle_outline</mat-icon>
             </button>
-            <button mat-icon-button id="DSP_PDF_HOME" matTooltip="Reset zoom" (click)="zoomFactor = 1.0" [disabled]="failedToLoad">
+            <button mat-icon-button id="DSP_PDF_HOME" matTooltip="Reset zoom" (click)="zoomFactor = 1.0"
+                [disabled]="failedToLoad">
                 <mat-icon>adjust</mat-icon>
             </button>
-            <button mat-icon-button id="DSP_PDF_ZOOM_IN" matTooltip="Zoom in" (click)="zoomFactor = zoomFactor + 0.2" [disabled]="failedToLoad">
+            <button mat-icon-button id="DSP_PDF_ZOOM_IN" matTooltip="Zoom in" (click)="zoomFactor = zoomFactor + 0.2"
+                [disabled]="failedToLoad">
                 <mat-icon>add_circle_outline</mat-icon>
             </button>
         </span>
@@ -51,15 +54,10 @@
 
         <!-- full screen button -->
         <span>
-            <button mat-icon-button id="DSP_PDF_FULL_SCREEN" matTooltip="Fullscreen" (click)="openFullscreen()" [disabled]="failedToLoad">
+            <button mat-icon-button id="DSP_PDF_FULL_SCREEN" matTooltip="Fullscreen" (click)="openFullscreen()"
+                [disabled]="failedToLoad">
                 <mat-icon>fullscreen</mat-icon>
             </button>
         </span>
     </div>
-    <!-- in case of an error -->
-    <app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'document'" *ngIf="failedToLoad"></app-status>
-
-    <pdf-viewer class="pdf-viewer" [src]="src.fileValue.fileUrl" [original-size]="false" [autoresize]="true" [show-all]="true"
-        [show-borders]="true" [zoom]="zoomFactor" [zoom-scale]="'page-width'">
-    </pdf-viewer>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/workspace/resource/representation/document/document.component.scss b/src/app/workspace/resource/representation/document/document.component.scss
index fad80cdb72..c88a0f03fd 100644
--- a/src/app/workspace/resource/representation/document/document.component.scss
+++ b/src/app/workspace/resource/representation/document/document.component.scss
@@ -7,7 +7,6 @@ $panelSize: 40px;
 $osd-height: 460px;
 
 :host {
-  border: 1px solid $black;
 
   @media (max-height: 636px) {
     height: 364px;
@@ -24,12 +23,17 @@ $osd-height: 460px;
 
   .pdf-container {
     color: $bright;
-    height: 100%;
-    background-color: $black;
+    height: 90%;
+    background-color: #292929;
+    border-radius: 8px 8px 0px 0px;
 
     pdf-viewer {
       position: inherit;
-      height: calc(100% - 4px);
+      height: 100%;
+
+      ::ng-deep .ng2-pdf-viewer-container {
+        height: 90%;
+      }
     }
   }
 
@@ -44,6 +48,12 @@ $osd-height: 460px;
     }
   }
 
+}
 
+::ng-deep .mat-menu-custom-black {
+  background: #292929;
+  .menu-content {
+    color: #FFFFFF;
+  }
 }
 
diff --git a/src/app/workspace/resource/representation/still-image/still-image.component.html b/src/app/workspace/resource/representation/still-image/still-image.component.html
index 889ef6c51c..e448647028 100644
--- a/src/app/workspace/resource/representation/still-image/still-image.component.html
+++ b/src/app/workspace/resource/representation/still-image/still-image.component.html
@@ -24,8 +24,8 @@
     <!-- navigation -->
     <div class="navigation horizontal" *ngIf="compoundNavigation">
         <mat-slider [color]="'primary'" [disabled]="compoundNavigation.totalPages < 2"
-        [max]="compoundNavigation.totalPages" [min]="1" [step]="1" [thumbLabel]="true" [tickInterval]="'auto'"
-        [(ngModel)]="compoundNavigation.page" (change)="openPage($event.value)">
+            [max]="compoundNavigation.totalPages" [min]="1" [step]="1" [thumbLabel]="true" [tickInterval]="'auto'"
+            [(ngModel)]="compoundNavigation.page" (change)="openPage($event.value)">
         </mat-slider>
     </div>
     <!-- toolbar -->
@@ -34,18 +34,18 @@
         <button mat-icon-button [matMenuTriggerFor]="more">
             <mat-icon>more_vert</mat-icon>
         </button>
-        <mat-menu #more="matMenu">
-            <button mat-menu-item (click)="openImageInNewTab(iiifUrl)">
+        <mat-menu #more="matMenu" class="mat-menu-custom-black">
+            <button class="menu-content" mat-menu-item (click)="openImageInNewTab(iiifUrl)">
                 Open IIIF file in new tab
             </button>
-            <button mat-menu-item [cdkCopyToClipboard]="iiifUrl"
-            (click)="openSnackBar('IIIF URL copied to clipboard!')">
+            <button class="menu-content" mat-menu-item [cdkCopyToClipboard]="iiifUrl"
+                (click)="openSnackBar('IIIF URL copied to clipboard!')">
                 Copy IIIF URL to clipboard
             </button>
-            <button mat-menu-item (click)="downloadStillImage(images[0].fileValue.fileUrl)">
+            <button class="menu-content" mat-menu-item (click)="downloadStillImage(images[0].fileValue.fileUrl)">
                 Download file
             </button>
-            <button mat-menu-item (click)="openReplaceFileDialog()">
+            <button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
                 Replace file
             </button>
         </mat-menu>
@@ -97,7 +97,7 @@
         <!-- action buttons: create annotation/region, fullscreen -->
         <span>
             <button mat-icon-button id="DSP_OSD_DRAW_REGION" matTooltip="Draw Region" [disabled]="failedToLoad"
-            (click)="drawButtonClicked()" [class.active]="regionDrawMode">
+                (click)="drawButtonClicked()" [class.active]="regionDrawMode">
                 <mat-icon svgIcon="draw_region_icon"></mat-icon>
             </button>
             <button mat-icon-button id="DSP_OSD_FULL_PAGE" matTooltip="Open in fullscreen" [disabled]="failedToLoad">
@@ -105,4 +105,4 @@
             </button>
         </span>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/workspace/resource/representation/still-image/still-image.component.scss b/src/app/workspace/resource/representation/still-image/still-image.component.scss
index 553d04767b..82e24b472a 100644
--- a/src/app/workspace/resource/representation/still-image/still-image.component.scss
+++ b/src/app/workspace/resource/representation/still-image/still-image.component.scss
@@ -142,3 +142,14 @@
   filter: alpha(opacity=100);
   opacity: 1;
 }
+
+/*
+ Mat-menu styling
+ */
+
+::ng-deep .mat-menu-custom-black {
+  background: #292929;
+  .menu-content {
+    color: #FFFFFF;
+  }
+}
diff --git a/src/assets/style/_elements.scss b/src/assets/style/_elements.scss
index 781cca9662..82d3e12080 100644
--- a/src/assets/style/_elements.scss
+++ b/src/assets/style/_elements.scss
@@ -341,7 +341,7 @@ a,
     }
 
     &.overlay {
-      background: rgba(0, 0, 0, 0.48);
+      background: #292929;
     }
 
     &.vertical {
@@ -373,9 +373,9 @@ a,
     }
   }
 
-  .pdfViewer {
-    margin-top: $panel-height;
-  }
+  // .pdfViewer {
+  //   margin-bottom: 64px;
+  // }
 }
 
 .no-results {