diff --git a/lib/core/viewer/components/imgViewer.component.scss b/lib/core/viewer/components/imgViewer.component.scss
index 3c414b360e..7691524cde 100644
--- a/lib/core/viewer/components/imgViewer.component.scss
+++ b/lib/core/viewer/components/imgViewer.component.scss
@@ -1,4 +1,6 @@
 @mixin adf-image-viewer-theme($theme) {
+    $background: map-get($theme, background);
+
     .adf-image-viewer {
         .image-container {
             display: flex;
@@ -22,7 +24,7 @@
 
             .adf-toolbar .mat-toolbar {
                 max-height: 48px;
-                background-color: mat-color($primary, default-contrast, 1);
+                background-color: mat-color($background, card);
                 border-width: 0;
                 border-radius: 2px;
                 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
diff --git a/lib/core/viewer/components/viewer.component.html b/lib/core/viewer/components/viewer.component.html
index 55c5b6a75b..efab72face 100644
--- a/lib/core/viewer/components/viewer.component.html
+++ b/lib/core/viewer/components/viewer.component.html
@@ -134,7 +134,7 @@
         <div *ngIf="!isLoading" fxLayout="row" fxFlex="1 1 auto">
 
             <ng-container *ngIf="allowSidebar && showSidebar">
-                <div class="adf-viewer__sidebar" fxFlexOrder="{{sidebarPosition === 'left'? 1 : 4 }}">
+                <div class="adf-viewer__sidebar adf-viewer__sidebar__{{sidebarPosition}}" fxFlexOrder="{{sidebarPosition === 'left'? 1 : 4 }}">
                     <ng-container *ngIf="sidebarTemplate">
                         <ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container>
                     </ng-container>
diff --git a/lib/core/viewer/components/viewer.component.scss b/lib/core/viewer/components/viewer.component.scss
index 5211893307..89f6309104 100644
--- a/lib/core/viewer/components/viewer.component.scss
+++ b/lib/core/viewer/components/viewer.component.scss
@@ -27,7 +27,7 @@
 
         &-toolbar {
             .mat-toolbar {
-                background-color: mat-color($primary, default-contrast);
+                background-color: mat-color($background, card, 0.87);
             }
         }
 
@@ -129,10 +129,17 @@
             width: 350px;
             display: block;
             padding: 0;
-            background-color: #fafafa;
+            background-color: mat-color($background, background);
             box-shadow: 0 2px 4px 0 mat-color($foreground, text, 0.27);
-            border-left: 1px solid mat-color($foreground, text, 0.07);
             overflow: auto;
+
+            &__right {
+                border-left: 1px solid mat-color($foreground, text, 0.07);
+            }
+    
+            &__left {
+                border-right: 1px solid mat-color($foreground, text, 0.07);
+            }                
         }
 
         &__thumbnails {