diff --git a/client/pages/viewerpage.scss b/client/pages/viewerpage.scss
index 0d8284d4..b60dd20b 100644
--- a/client/pages/viewerpage.scss
+++ b/client/pages/viewerpage.scss
@@ -26,7 +26,7 @@
         }
         .box {
             background: white;
-            box-shadow: rgba(158, 163, 172, 0.3) 3px 3px 10px;
+            box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
         }
     }
 }
diff --git a/client/pages/viewerpage/appframe.scss b/client/pages/viewerpage/appframe.scss
index a40b9e27..2fe8f8ef 100644
--- a/client/pages/viewerpage/appframe.scss
+++ b/client/pages/viewerpage/appframe.scss
@@ -1,6 +1,9 @@
+body:not(.dark-mode) .component_appframe {
+    background: #525659;
+}
+
 .component_appframe {
     text-align: center;
-    background: #525659;
     width: 100%;
 
     iframe {
diff --git a/client/pages/viewerpage/audioplayer.scss b/client/pages/viewerpage/audioplayer.scss
index ec8f8148..d5195a0e 100644
--- a/client/pages/viewerpage/audioplayer.scss
+++ b/client/pages/viewerpage/audioplayer.scss
@@ -1,3 +1,6 @@
+body:not(.dark-mode) .component_audioplayer > .audioplayer_container {
+    background: #525659;
+}
 .component_audioplayer{
     display: flex;
     flex-direction: column;
@@ -10,7 +13,6 @@
         flex: 1;
         width: 100%;
         text-align: center;
-        background: #525659;
         height: 100%;
         overflow: hidden;
         padding: 20px;
diff --git a/client/pages/viewerpage/ebookviewer.js b/client/pages/viewerpage/ebookviewer.js
index 6df00510..87948db5 100644
--- a/client/pages/viewerpage/ebookviewer.js
+++ b/client/pages/viewerpage/ebookviewer.js
@@ -1,9 +1,13 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { MenuBar } from "./menubar";
+import { Loader } from "../../components/";
+
 import "./ebookviewer.scss";
 import ePub, { Book } from "epubjs";
 
 export function EbookViewer({ filename, data }) {
+    const [isLoading, setIsLoading] = useState(true);
+
     useEffect(() => {
         const book = new Book({ replacements: "blobUrl" });
         book.open(data);
@@ -11,6 +15,9 @@ export function EbookViewer({ filename, data }) {
             width: "100%", height: "100%",
             flow: "scrolled-doc",
         });
+        rendition.hooks.render.register(function() {
+            setIsLoading(false);
+        });
         const displayed = rendition.display();
         return () => {
             book.destroy();
@@ -20,6 +27,11 @@ export function EbookViewer({ filename, data }) {
     return (
         <div className="component_ebookviewer">
             <MenuBar title={filename} download={data} />
+            {
+                isLoading && (
+                    <Loader />
+                )
+            }
             <div className="ebookviewer_container" id="epubjs"></div>
         </div>
     )
diff --git a/client/pages/viewerpage/ebookviewer.scss b/client/pages/viewerpage/ebookviewer.scss
index ff74da99..1edda8c5 100644
--- a/client/pages/viewerpage/ebookviewer.scss
+++ b/client/pages/viewerpage/ebookviewer.scss
@@ -10,7 +10,7 @@
         flex-grow: 1;
         min-height: 0;
         .epub-container {
-            background: white;
+            background: var(--super-light);
             padding-top: 50px;
             padding-bottom: 50px;
             box-sizing: border-box;
diff --git a/client/pages/viewerpage/filedownloader.scss b/client/pages/viewerpage/filedownloader.scss
index 3afd3d19..fc3ccf3d 100644
--- a/client/pages/viewerpage/filedownloader.scss
+++ b/client/pages/viewerpage/filedownloader.scss
@@ -1,6 +1,6 @@
 body:not(.dark-mode) .component_filedownloader {
     background: #525659;
-    .download_button { background: rgba(0,0,0,0.4); }
+    .download_button a > div { color: var(--light); }
 }
 .component_filedownloader {
     text-align: center;
@@ -8,7 +8,7 @@ body:not(.dark-mode) .component_filedownloader {
 
     .download_button{
         padding: 15px 20px;
-        background: rgba(255,255,255,0.05);
+        background: var(--dark);
         border-radius: 3px;
         color: inherit;
         display: inline-block;
@@ -20,7 +20,7 @@ body:not(.dark-mode) .component_filedownloader {
             font-size: 17px;
             display: inline-block;
             text-transform: uppercase;
-            color: var(--light);
+            color: var(--super-light);
             font-weight: bold;
         }
         // loading
diff --git a/client/pages/viewerpage/formviewer.scss b/client/pages/viewerpage/formviewer.scss
index aece4163..80d3e02c 100644
--- a/client/pages/viewerpage/formviewer.scss
+++ b/client/pages/viewerpage/formviewer.scss
@@ -1,3 +1,6 @@
+body:not(.dark-mode) .component_formviewer {
+    background: #525659;
+}
 .component_formviewer{
     display: flex;
     flex-direction: column;
diff --git a/client/pages/viewerpage/imageviewer.scss b/client/pages/viewerpage/imageviewer.scss
index ce743e31..557d734b 100644
--- a/client/pages/viewerpage/imageviewer.scss
+++ b/client/pages/viewerpage/imageviewer.scss
@@ -1,3 +1,6 @@
+body:not(.dark-mode) .component_imageviewer .component_image_container {
+    &, .fullscreen .component_pager .wrapper > span { background: #525659; }
+}
 .component_imageviewer{
     &, .component_image_container > .images_wrapper, .component_image_container > .images_wrapper > span, .component_image_container > .images_wrapper > span > div{
         flex: 1;
@@ -11,7 +14,7 @@
         &.fullscreen{
             background: var(--dark);
             .component_pager .wrapper > span{
-                background: #525659;
+                background: var(--dark);
             }
             img[srcset]{
                 background: var(--color);
@@ -23,7 +26,6 @@
         height: 100%;
         width: 100%;
         text-align: center;
-        background: #525659;
         overflow: hidden;
         padding: 15px 10px 65px 10px;
         &.component_image_no_pager { padding-bottom: 15px; }
diff --git a/client/pages/viewerpage/org_viewer.scss b/client/pages/viewerpage/org_viewer.scss
index ddc729b8..cdca6f2c 100644
--- a/client/pages/viewerpage/org_viewer.scss
+++ b/client/pages/viewerpage/org_viewer.scss
@@ -1,6 +1,5 @@
 .component_modal.todo-modal{
-    background: var(--super-light);
-    background: linear-gradient(var(--super-light), var(--bg-color));
+    background: var(--bg-color);
 
     > div{
         width: calc(100% - 20px);
diff --git a/client/pages/viewerpage/pdfviewer.js b/client/pages/viewerpage/pdfviewer.js
index 67dd64b7..2d32acd0 100644
--- a/client/pages/viewerpage/pdfviewer.js
+++ b/client/pages/viewerpage/pdfviewer.js
@@ -48,7 +48,7 @@ function PDFEmbedViewer({ src }) {
                 ref={$embed}
                 src={`${src}#toolbar=0`}
                 type="application/pdf"
-                style={{ height: "100%", width: "100%" }}
+                style={{ height: "100%", width: "100%", "opacity": (isLoading ? "0": "1") }}
             />
         </React.Fragment>
     );
diff --git a/client/pages/viewerpage/pdfviewer.scss b/client/pages/viewerpage/pdfviewer.scss
index 5f0b47ce..c2ffd5d7 100644
--- a/client/pages/viewerpage/pdfviewer.scss
+++ b/client/pages/viewerpage/pdfviewer.scss
@@ -1,3 +1,7 @@
+body:not(.dark-mode) .component_pdfviewer .pdfviewer_container {
+    background: #525659;
+}
+
 .component_pdfviewer{
     display: flex;
     flex-direction: column;
@@ -5,9 +9,8 @@
     width: 100%;
     flex-grow: 1;
 
-    .pdfviewer_container{
+    .pdfviewer_container {
         text-align: center;
-        background: #525659;
         height: 100%;
         width: 100%;
         flex-grow: 1;
@@ -21,6 +24,7 @@
             height: 100%;
             .react-pdf__Page{
                 margin-top: 15px;
+                padding-bottom: 50px;
             }
         }
     }
diff --git a/client/pages/viewerpage/videoplayer.scss b/client/pages/viewerpage/videoplayer.scss
index db50f817..29fe7bf7 100644
--- a/client/pages/viewerpage/videoplayer.scss
+++ b/client/pages/viewerpage/videoplayer.scss
@@ -1,5 +1,7 @@
-.component_videoplayer {
+body:not(.dark-mode) .component_videoplayer {
     background: #525659;
+}
+.component_videoplayer {
     display: flex;
     flex: 1;
     flex-direction: column;