diff --git a/lib/OwlcodeTech/Preview.pm b/lib/OwlcodeTech/Preview.pm
index 28c1e02..2a9e11e 100644
--- a/lib/OwlcodeTech/Preview.pm
+++ b/lib/OwlcodeTech/Preview.pm
@@ -60,7 +60,7 @@ sub _GenerateSVGPreviewHeaderBar ( $self, $svg, $group, $site_name ) {
         y      => 50,
         width  => 1200,
         height => 627,
-        style  => { fill => 'ghostwhite' }
+        style  => { fill => 'azure' }
     );
 
     my $owlcode_logo_png = path( $self->_ToPng($OWLCODE_LOGO) );
@@ -69,7 +69,7 @@ sub _GenerateSVGPreviewHeaderBar ( $self, $svg, $group, $site_name ) {
         y      => 5,
         width  => 40,
         height => 40,
-        style => { fill => 'ghostwhite' },
+        style => { fill => 'azure' },
      );
      $group->image(
         x      => 10,
@@ -202,7 +202,7 @@ sub _AttachImageSVG ( $self, $svg, $image_file ) {
         y      => $y+$height,
         width  => $SVG_WIDTH,
         height => $SVG_HEIGHT,
-        style => { fill => 'ghostwhite' },
+        style => { fill => 'azure' },
     );
     return $y + $height + 50;
 }
diff --git a/public/css/styles.css b/public/css/styles.css
index bad75b3..531f61d 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -44,7 +44,7 @@ body {
     position: fixed;
     overflow-y: scroll;
     z-index: 2;
-    background: ghostwhite;
+    background: azure;
     color: #666362;
     top: 0%;
     left: 0%;
@@ -72,7 +72,7 @@ body {
       padding-right: 10px;
       margin: 0; }
     body div.page-contents div.description {
-      background: ghostwhite;
+      background: azure;
       word-wrap: break-word;
       margin-bottom: 1%; }
       body div.page-contents div.description input {
@@ -197,9 +197,9 @@ body {
       height: 60px; }
       body div.page-contents nav.mobile-shortcuts a.go-to-index {
         height: 100%;
-        background: ghostwhite; }
+        background: azure; }
         body div.page-contents nav.mobile-shortcuts a.go-to-index:hover {
-          background: azure; }
+          background: 'ghostwhite'; }
       body div.page-contents nav.mobile-shortcuts a {
         width: 60px;
         height: 60px; }
diff --git a/public/css/styles.scss b/public/css/styles.scss
index b0b90da..c20f54a 100644
--- a/public/css/styles.scss
+++ b/public/css/styles.scss
@@ -67,7 +67,7 @@ body {
     position: fixed;
     overflow-y: scroll;
     z-index: 2;
-    background: ghostwhite;
+    background: $color_div;
     color: $color-page;
     top: 0%;
     left: 0%;
@@ -108,7 +108,7 @@ body {
     }
 
     div.description {
-        background: ghostwhite;
+        background: $color_div;
       input {
         display: block;
       }
@@ -301,9 +301,9 @@ body {
       height: 60px;
       a.go-to-index {
         height: 100%;
-        background: ghostwhite;
+        background: $color_div;
         &:hover {
-            background: $color_div;
+            background: 'ghostwhite';
         }
       }