diff --git a/src/popup/components/Tabs/Tabs.scss b/src/popup/components/Tabs/Tabs.scss
index 39d1867..4454669 100644
--- a/src/popup/components/Tabs/Tabs.scss
+++ b/src/popup/components/Tabs/Tabs.scss
@@ -1,7 +1,7 @@
 .tab-navigation {
   width: 80%;
   height: 26px;
-  background-color: #efefef;
+  background-color: var(--navigation-color);
   border-radius: 13px;
   display: flex;
   align-items: center;
diff --git a/src/popup/index.scss b/src/popup/index.scss
index d7e5b7b..2ee1e7e 100644
--- a/src/popup/index.scss
+++ b/src/popup/index.scss
@@ -1,3 +1,9 @@
+:root {
+  --border-color: #ddd;
+  --button-color: #eee;
+  --warning-color: #e62c2c;
+}
+
 html {
   font-size: 62.5%;
 }
diff --git a/src/popup/popup.scss b/src/popup/popup.scss
index a9d5e14..297e8be 100644
--- a/src/popup/popup.scss
+++ b/src/popup/popup.scss
@@ -6,7 +6,7 @@
 
   &__header {
     padding: 10px 0;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--warning-color);
   }
 
   &__loader {
@@ -25,7 +25,7 @@
       height: 26px;
       font-size: 1.2rem;
       border-radius: 13px;
-      background-color: #eee;
+      background-color: var(--button-color);
       position: absolute;
       font-weight: 600;
       line-height: 20px;
@@ -37,7 +37,7 @@
     }
 
     .out-of-limit {
-      color: #e62c2c;
+      color: var(--warning-color);
     }
   }
 }