diff --git a/src/css/themes/blue/_colors.scss b/src/css/themes/blue/_colors.scss
index cecd9b5..19a3149 100644
--- a/src/css/themes/blue/_colors.scss
+++ b/src/css/themes/blue/_colors.scss
@@ -1,3 +1,3 @@
-$gold1: darken(#f0e68c, 10%);
-$blue1: darken(#e4eff8, 35%);
+$primary-color: #569bd3;
+$primary-dark-color: #3383C3;
 $white: #FFF;
diff --git a/src/css/themes/blue/_layout.scss b/src/css/themes/blue/_layout.scss
index c4b01ed..f49f535 100644
--- a/src/css/themes/blue/_layout.scss
+++ b/src/css/themes/blue/_layout.scss
@@ -2,15 +2,15 @@
   @import "colors";
 
   header {
-    h1 , h1 a { color: $blue1; }
+    h1 , h1 a { color: $primary-color; }
     nav .react-select {
-      color: $gold1;
+      color: $primary-dark-color;
     }
     nav .react-select.language {
       ul li {
-        background: $blue1;
+        background: $primary-color;
         color: $white;
-        border: 3px solid lighten($gold1, 5%);
+        border: 3px solid lighten($primary-dark-color, 5%);
       }
     }
   }
diff --git a/src/css/themes/blue/components/_Icon.scss b/src/css/themes/blue/components/_Icon.scss
index b2abf2f..7005b5f 100644
--- a/src/css/themes/blue/components/_Icon.scss
+++ b/src/css/themes/blue/components/_Icon.scss
@@ -3,37 +3,37 @@
 
   ul.body.stream li, footer {
     .play.icon {
-      fill: $blue1;
-      stroke: darken($blue1, 40%);
+      fill: $primary-color;
+      stroke: $primary-dark-color;
       stroke-width: 2px;
     }
 
     .pause.icon {
       rect {
-        fill: $blue1;
-        stroke: darken($blue1, 40%);
+        fill: $primary-color;
+        stroke: $primary-dark-color;
         stroke-width: 1px;
       }
     }
 
     .refresh.icon {
-      fill: $blue1;
+      fill: $primary-color;
     }
 
     .sound-on.icon, .sound-off.icon {
       polygon {
-        fill: $blue1;
+        fill: $primary-color;
         stroke-width: 2;
       }
     }
     .right-arrow.icon {
       g {
-        fill: $gold1;
+        fill: $primary-dark-color;
       }
     }
   }
 
   .stalled.icon {
-    div { background: $gold1; }
+    div { background: $primary-dark-color; }
   }
 }
diff --git a/src/css/themes/blue/components/_Scrollbar.scss b/src/css/themes/blue/components/_Scrollbar.scss
index 3cb8ad1..ea30481 100644
--- a/src/css/themes/blue/components/_Scrollbar.scss
+++ b/src/css/themes/blue/components/_Scrollbar.scss
@@ -1,7 +1,7 @@
 .content.theme.blue {
   ul.body {
     @import "themes/blue/colors";
-    scrollbar-color: $blue1;
+    scrollbar-color: $primary-color;
 
     ::-webkit-scrollbar-track {
       border-radius: 5px;
@@ -9,16 +9,16 @@
     }
 
     ::-webkit-scrollbar-track:hover {
-      background-color: lighten($blue1, 35%);
+      background-color: lighten($primary-color, 35%);
     }
 
     ::-webkit-scrollbar-track:active {
-      background-color: lighten($blue1, 35%);
+      background-color: lighten($primary-color, 35%);
     }
 
     ::-webkit-scrollbar-thumb {
       border-radius: 5px;
-      background-color: $blue1;
+      background-color: $primary-color;
     }
 
     ::-webkit-scrollbar-thumb:hover {
@@ -26,7 +26,7 @@
     }
 
     ::-webkit-scrollbar-thumb:active {
-      background-color: $blue1;
+      background-color: $primary-color;
     }
   }
 }
diff --git a/src/css/themes/blue/components/_Select.scss b/src/css/themes/blue/components/_Select.scss
index 7487ef6..6818aa8 100644
--- a/src/css/themes/blue/components/_Select.scss
+++ b/src/css/themes/blue/components/_Select.scss
@@ -3,10 +3,10 @@
 
   .react-select.theme {
     .selected-option.blue .circle {
-      background: $blue1;
+      background: $primary-color;
     }
     ul li.blue .circle {
-      background: $blue1;
+      background: $primary-color;
     }
   }
 }
@@ -16,7 +16,7 @@
 
   .react-select.language {
     .selected-option {
-      color: $blue1;
+      color: $primary-color;
     }
   }
 
@@ -28,7 +28,7 @@
 
   .react-select.language ul {
     li {
-      color: $blue1;
+      color: $primary-color;
     }
   }
 }
diff --git a/src/css/themes/blue/pages/_SurahIndex.scss b/src/css/themes/blue/pages/_SurahIndex.scss
index 438dd4b..ae6ede1 100644
--- a/src/css/themes/blue/pages/_SurahIndex.scss
+++ b/src/css/themes/blue/pages/_SurahIndex.scss
@@ -4,17 +4,17 @@
   ul.body.index {
     li.surah a {
       &:active, &:link, &:visited {
-        color: $blue1;
+        color: $primary-color;
       }
 
       @media (hover: hover) {
         &:hover {
-          background: lighten($blue1, 38%);
+          background: lighten($primary-color, 38%);
         }
       }
 
       span.id {
-        color: $gold1;
+        color: $primary-dark-color;
       }
     }
   }
@@ -22,7 +22,7 @@
   footer {
     a {
       &:active, &:link, &:visited {
-        color: $blue1;
+        color: $primary-color;
         text-decoration: none;
       }
       &:hover {
@@ -36,7 +36,7 @@
   @import "themes/blue/colors";
   header {
     div {
-      color: $gold1;
+      color: $primary-dark-color;
     }
   }
 }
@@ -46,10 +46,10 @@
   ul.body.index  {
     li.surah a {
       span.id {
-        color: $gold1;
+        color: $primary-dark-color;
       }
       span.name {
-        color: $blue1;
+        color: $primary-color;
       }
     }
   }
diff --git a/src/css/themes/blue/pages/_SurahStream.scss b/src/css/themes/blue/pages/_SurahStream.scss
index 476ef5a..9a18cdb 100644
--- a/src/css/themes/blue/pages/_SurahStream.scss
+++ b/src/css/themes/blue/pages/_SurahStream.scss
@@ -3,14 +3,14 @@
 
   header {
     div {
-      .localized-name, .transliterated-name { color: $gold1; }
+      .localized-name, .transliterated-name { color: $primary-dark-color; }
     }
   }
 
   ul.body.stream {
     li.ayah {
       span.title span {
-        color: $gold1;
+        color: $primary-dark-color;
       }
       p { }
     }
@@ -18,7 +18,7 @@
 
   footer {
     .timer {
-      color: $blue1;
+      color: $primary-color;
     }
   }
 }
@@ -29,7 +29,7 @@
   header {
     div {
       .localized-name {
-        color: $gold1;
+        color: $primary-color;
       }
     }
   }