diff --git a/client/src/App.vue b/client/src/App.vue
index cf601a1..e20da2a 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -22,6 +22,7 @@
 </template>
 
 <style lang="scss">
+    @import "assets/scss/_variables";
     @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
     @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
@@ -32,14 +33,14 @@
     }
 
     .ais-SearchBox-input {
-        color: #d7d7d7;
-        background-color: #3e3e3e;
+        color: $grey-8;
+        background-color: $grey-6;
         border-color: transparent;
         border-radius: 1px;
     }
 
     .ais-SearchBox-submitIcon, .ais-SearchBox-resetIcon {
-        > path { fill: #bcbcbc; }
+        > path { fill: $grey-9; }
     }
 
     .ais-SearchBox-input::placeholder {
diff --git a/client/src/assets/scss/_variables.scss b/client/src/assets/scss/_variables.scss
new file mode 100644
index 0000000..d42065c
--- /dev/null
+++ b/client/src/assets/scss/_variables.scss
@@ -0,0 +1,11 @@
+$grey-9: #b3b3b3;
+$grey-8: #a0a0a0;
+$grey-7: #565656;
+$grey-6: #3e3e3e;
+$grey-5: #292929;
+$grey-4: #242424;
+$grey-3: #1d1d1d;
+$grey-2: #181818;
+$grey-1: #151515;
+$grey-0: #000000;
+$highlight: #d2ca00;
diff --git a/client/src/components/CharacterList.vue b/client/src/components/CharacterList.vue
index d699ba6..192dcb3 100644
--- a/client/src/components/CharacterList.vue
+++ b/client/src/components/CharacterList.vue
@@ -11,6 +11,8 @@
 </template>
 
 <style lang="scss">
+    @import "../assets/scss/_variables";
+
     .btn {
         box-shadow: none;
 
@@ -18,30 +20,31 @@
     }
 
     .character-button {
-        background-color: #292929;
-        border-color: #1d1d1d;
+        background-color: $grey-6;
+        border-color: $grey-4;
     }
 
     .character-button {
         &:focus {
-            background-color: #292929 !important;
-            border-color: #1d1d1d !important;
+            background-color: $grey-6 !important;
+            border-color: $grey-4 !important;
+
             &:active { box-shadow: none !important;}
         }
 
         &:hover {
-            background-color: #1d1d1d  !important;
-            border-color: #161616 !important;
+            background-color: $grey-4 !important;
+            border-color: $grey-3 !important;
         }
 
         &:active {
-            background-color: #1d1d1d !important;
-            border-color: #161616 !important;
+            background-color: $grey-3 !important;
+            border-color: $grey-3 !important;
         }
     }
 
     .character-button > .badge {
-        background-color: #565656;
+        background-color: $grey-7;
     }
 
     /*.btn-dark {*/
diff --git a/client/src/components/Episode.vue b/client/src/components/Episode.vue
index 76d1a75..94365b4 100644
--- a/client/src/components/Episode.vue
+++ b/client/src/components/Episode.vue
@@ -22,7 +22,7 @@
     </div>
 </template>
 
-<style>
+<style lang="scss">
     .card-title { font-family: 'Montserrat', sans-serif; font-weight: 600; }
     .deleted-scene { font-size: 0.75em; line-height: 12px; }
 </style>
diff --git a/client/src/components/Home.vue b/client/src/components/Home.vue
index 5238679..ed0ae34 100644
--- a/client/src/components/Home.vue
+++ b/client/src/components/Home.vue
@@ -9,10 +9,12 @@
     </b-card>
 </template>
 
-<style>
+<style lang="scss">
+    @import "../assets/scss/_variables";
+
     .card {
-        color: #b3b3b3;
-        background-color: #161616;
+        color: $grey-9;
+        background-color: $grey-1;
         border-bottom: 1px solid rgba(0, 0, 0, 0.88);
         border-radius: 0;
     }
diff --git a/client/src/components/QuoteList.vue b/client/src/components/QuoteList.vue
index cc29eb1..3b588e9 100644
--- a/client/src/components/QuoteList.vue
+++ b/client/src/components/QuoteList.vue
@@ -12,9 +12,11 @@
 </template>
 
 <style lang="scss">
+    @import "../assets/scss/_variables";
+
     .quote-list > tr {
         white-space: nowrap;
-        &:hover { background-color: #242424; }
+        &:hover { background-color: $grey-4; }
     }
 
     .quote-text {
diff --git a/client/src/components/SearchResult.vue b/client/src/components/SearchResult.vue
index 2a0d5c7..70907be 100644
--- a/client/src/components/SearchResult.vue
+++ b/client/src/components/SearchResult.vue
@@ -31,6 +31,8 @@
 </template>
 
 <style lang="scss">
+    @import "../assets/scss/_variables";
+
     .expandable-result {
         cursor: pointer;
     }
@@ -47,7 +49,7 @@
     .quote-list > tr {
         white-space: nowrap;
 
-        &:hover { background-color: #242424; }
+        &:hover { background-color: $grey-4; }
     }
 
     .quote-text {
diff --git a/client/src/components/SearchResults.vue b/client/src/components/SearchResults.vue
index 4b9af48..cc71053 100644
--- a/client/src/components/SearchResults.vue
+++ b/client/src/components/SearchResults.vue
@@ -21,7 +21,9 @@
         </ais-hits>
     </div>
 </template>
-<style>
+<style lang="scss">
+    @import "../assets/scss/_variables";
+
     .card-footer {
         padding: 0.1em;
         font-size: 0.8em;
@@ -30,7 +32,7 @@
 
     mark, .mark {
         padding: 0.02em;
-        background-color: #d2ca00;
+        background-color: $highlight;
         /*color: #black;*/
         /*-webkit-filter: invert(100%);*/
         /*filter: invert(100%);*/
diff --git a/client/src/components/SeasonList.vue b/client/src/components/SeasonList.vue
index ef06795..1b30e1c 100644
--- a/client/src/components/SeasonList.vue
+++ b/client/src/components/SeasonList.vue
@@ -36,6 +36,8 @@
 </template>
 
 <style lang="scss">
+    @import "../assets/scss/_variables";
+
     .season-card > .card-body > .card-header {
         cursor: pointer;
     }
@@ -61,23 +63,23 @@
         background: transparent;
     }
     .popover-header {
-        background-color: #1d1d1d;
-        border-color: #181818;
+        background-color: $grey-3;
+        border-color: $grey-2;
         color: white;
     }
 
     .bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
         /*left: 1px;*/
         /*border-width: 0.5rem 0.5rem 0.5rem 0;*/
-        border-right-color: #181818;
+        border-right-color: $grey-2;
     }
 
     .popover-body {
         color: white;
-        background-color: #161616;
+        background-color: $grey-2;
     }
 
-    .season-title { color: #a2a2a2; cursor: pointer; }
+    .season-title { color: $grey-8; cursor: pointer; }
 
     .accordion.list-group-item {
         border-radius: 0;
@@ -104,7 +106,7 @@
     }
 
     .card-header {
-        background-color: #161616;
+        background-color: $grey-2;
         border-bottom: 1px solid rgba(0, 0, 0, 0.88);
         font-family: 'Montserrat', sans-serif;
     }
@@ -120,12 +122,12 @@
 
     .list-group-item {
         border-color: rgba(24, 24, 24, 0.82);
-        background-color: #111111;
-        color: #a0a0a0;
+        background-color: $grey-3;
+        color: $grey-8;
         border-left-width: 0;
         border-right-width: 0;
 
-        &:hover { background-color: #161616; }
+        &:hover { background-color: $grey-2; }
     }
 
     .no-link {