diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 7f58b9f93..9fd8277db 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -13,8 +13,8 @@ $responsiveWidth: 768px;
 }
 
 ::selection {
-  @apply bg-acColor;
-  @apply text-actColor;
+  @apply bg-accent;
+  @apply text-primary;
 }
 
 ::-webkit-scrollbar {
@@ -22,20 +22,20 @@ $responsiveWidth: 768px;
   @apply w-2;
 
   &:hover {
-    @apply bg-bgDarkColor;
+    @apply bg-primaryDark;
   }
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-fgLightColor;
+  @apply bg-secondaryLight;
 
   &:hover {
-    @apply bg-fgColor;
+    @apply bg-secondary;
   }
 }
 
 ::placeholder {
-  @apply text-fgLightColor;
+  @apply text-secondaryLight;
   @apply opacity-25;
 }
 
@@ -44,8 +44,8 @@ html {
 }
 
 body {
-  @apply bg-bgColor;
-  @apply text-fgColor;
+  @apply bg-primary;
+  @apply text-secondary;
   @apply text-base;
   @apply font-medium;
   @apply select-none;
@@ -89,7 +89,7 @@ a {
   @apply outline-none;
 
   &.link {
-    @apply text-acColor;
+    @apply text-accent;
   }
 }
 
@@ -169,7 +169,7 @@ p {
 hr {
   @apply border-b;
   @apply border-dashed;
-  @apply border-brdColor;
+  @apply border-divider;
   @apply my-4;
 }
 
@@ -187,8 +187,8 @@ hr {
     @apply transition;
     @apply ease-in-out;
     @apply duration-150;
-    @apply bg-ttColor;
-    @apply text-fgColor;
+    @apply bg-tooltip;
+    @apply text-secondary;
   }
 
   .tooltip-arrow {
@@ -197,7 +197,7 @@ hr {
     @apply border-solid;
     @apply absolute;
     @apply m-2;
-    @apply border-ttColor;
+    @apply border-tooltip;
     @apply z-30;
     @apply transition;
     @apply ease-in-out;
@@ -274,8 +274,8 @@ hr {
     }
 
     .popover-inner {
-      @apply bg-ttColor;
-      @apply text-fgColor;
+      @apply bg-tooltip;
+      @apply text-secondary;
       @apply text-base;
       @apply p-2;
       @apply rounded-lg;
@@ -301,7 +301,7 @@ hr {
     }
 
     .popover-arrow {
-      @apply border-ttColor;
+      @apply border-tooltip;
     }
   }
 
@@ -324,7 +324,7 @@ hr {
 
 .info:not(.toasted) {
   @apply m-4;
-  @apply text-fgLightColor;
+  @apply text-secondaryLight;
 
   .material-icons {
     @apply align-middle;
@@ -337,8 +337,8 @@ button {
   @apply items-center;
   @apply justify-center;
   @apply p-4;
-  @apply bg-acColor;
-  @apply text-actColor;
+  @apply bg-accent;
+  @apply text-primary;
   @apply font-bold;
   @apply transition;
   @apply ease-in-out;
@@ -357,16 +357,16 @@ button {
   &:not([disabled]):hover,
   &:not([disabled]):active,
   &:not([disabled]):focus {
-    @apply text-actColor;
+    @apply text-primary;
     @apply fill-current;
     @apply outline-none;
 
-    box-shadow: inset 0 0 0 2px var(--fg-color);
+    box-shadow: inset 0 0 0 2px var(--secondary-color);
   }
 
   &.icon {
     @apply bg-transparent;
-    @apply text-fgLightColor;
+    @apply text-secondaryLight;
     @apply fill-current;
     @apply outline-none;
     @apply border-none;
@@ -375,21 +375,21 @@ button {
     &:not([disabled]):hover,
     &:not([disabled]):active,
     &:not([disabled]):focus {
-      @apply text-fgColor;
+      @apply text-secondary;
       @apply fill-current;
       @apply shadow-none;
     }
   }
 
   &.primary {
-    @apply text-acColor;
+    @apply text-accent;
     @apply px-6;
 
     &:not([disabled]):hover,
     &:not([disabled]):active,
     &:not([disabled]):focus {
-      @apply bg-acColor;
-      @apply text-actColor;
+      @apply bg-accent;
+      @apply text-primary;
     }
   }
 }
@@ -422,7 +422,7 @@ section:target {
 
 @keyframes highlight {
   50% {
-    box-shadow: 0 0 0 2px var(--ac-color);
+    box-shadow: 0 0 0 2px var(--accent-color);
   }
 }
 
@@ -451,8 +451,8 @@ pre,
 code {
   @apply flex;
   @apply p-4;
-  @apply bg-bgDarkColor;
-  @apply text-fgColor;
+  @apply bg-primaryDark;
+  @apply text-secondary;
   @apply font-mono;
   @apply font-normal;
   @apply transition;
@@ -466,7 +466,7 @@ code {
   &:not([readonly]):not(.ace_editor):hover,
   &:not([readonly]):not(.ace_editor):active,
   &:not([readonly]):not(.ace_editor):focus {
-    box-shadow: inset 0 0 0 2px var(--fg-light-color);
+    box-shadow: inset 0 0 0 2px var(--secondary-light-color);
   }
 }
 
@@ -479,7 +479,7 @@ code {
   &:hover,
   &:active,
   &:focus {
-    box-shadow: inset 0 0 0 2px var(--fg-light-color);
+    box-shadow: inset 0 0 0 2px var(--secondary-light-color);
   }
 }
 
@@ -518,7 +518,7 @@ pre {
     @apply absolute;
     @apply pointer-events-none;
     @apply font-icon;
-    @apply text-fgLightColor;
+    @apply text-secondaryLight;
 
     content: "\e313";
     top: 16px;
@@ -538,7 +538,7 @@ select {
 }
 
 option {
-  @apply bg-bgColor;
+  @apply bg-primary;
 }
 
 input[type="checkbox"] {
@@ -551,7 +551,7 @@ input[type="checkbox"] {
 
     &::before {
       @apply border;
-      @apply border-fgColor;
+      @apply border-secondary;
       @apply rounded-lg;
       @apply inline-flex;
       @apply items-center;
@@ -569,29 +569,29 @@ input[type="checkbox"] {
   }
 
   &:checked + label::before {
-    @apply bg-acColor;
-    @apply border-acColor;
-    @apply text-actColor;
+    @apply bg-accent;
+    @apply border-accent;
+    @apply text-primary;
   }
 }
 
 .error:not(input),
 .disabled:not(input),
 [disabled] {
-  @apply bg-errColor;
-  @apply text-fgLightColor;
+  @apply bg-error;
+  @apply text-secondaryLight;
   @apply fill-current;
   @apply cursor-not-allowed;
 
   &.icon {
-    @apply text-errColor;
+    @apply text-error;
     @apply fill-current;
   }
 }
 
 label {
   @apply p-4;
-  @apply text-fgLightColor;
+  @apply text-secondaryLight;
   @apply text-sm;
   @apply transition;
   @apply ease-in-out;
@@ -653,7 +653,7 @@ ol li {
 }
 
 .missing-data-response {
-  @apply text-fgLightColor;
+  @apply text-secondaryLight;
 }
 
 #response-details-wrapper {
@@ -707,8 +707,8 @@ section {
 }
 
 .toasted.info {
-  background-color: var(--ac-color) !important;
-  color: var(--act-color) !important;
+  background-color: var(--accent-color) !important;
+  color: var(--primary-color) !important;
   font-weight: 700 !important;
 }
 
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index d9614513c..7f54c94c8 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -6,116 +6,110 @@
 
 @mixin darkTheme {
   // Background color
-  --bg-color: rgba(32, 33, 36, 1);
+  --primary-color: rgba(32, 33, 36, 1);
   // Light Background color
-  --bg-light-color: rgba(255, 255, 255, 0.04);
+  --primary-light-color: rgba(255, 255, 255, 0.04);
   // Dark Background color
-  --bg-dark-color: rgba(0, 0, 0, 0.2);
+  --primary-dark-color: rgba(0, 0, 0, 0.2);
   // Text color
-  --fg-color: rgba(255, 255, 255, 0.9);
+  --secondary-color: rgba(255, 255, 255, 0.9);
   // Light Text color
-  --fg-light-color: rgba(255, 255, 255, 0.5);
+  --secondary-light-color: rgba(255, 255, 255, 0.5);
   // Border color
-  --brd-color: rgba(255, 255, 255, 0.05);
+  --divider-color: rgba(255, 255, 255, 0.05);
   // Error color
-  --err-color: rgba(255, 255, 255, 0.05);
+  --error-color: rgba(255, 255, 255, 0.05);
   // Tooltip color
-  --tt-color: rgba(48, 48, 48, 1);
+  --tooltip-color: rgba(48, 48, 48, 1);
   // Editor theme
   --editor-theme: "twilight";
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin lightTheme {
   // Background color
-  --bg-color: rgba(255, 255, 255, 1);
+  --primary-color: rgba(255, 255, 255, 1);
   // Light Background color
-  --bg-light-color: rgba(0, 0, 0, 0.05);
+  --primary-light-color: rgba(0, 0, 0, 0.05);
   // Dark Background color
-  --bg-dark-color: rgba(0, 0, 0, 0.02);
+  --primary-dark-color: rgba(0, 0, 0, 0.02);
   // Text color
-  --fg-color: rgba(0, 0, 0, 0.9);
+  --secondary-color: rgba(0, 0, 0, 0.9);
   // Light Text color
-  --fg-light-color: rgba(0, 0, 0, 0.6);
+  --secondary-light-color: rgba(0, 0, 0, 0.6);
   // Border color
-  --brd-color: rgba(0, 0, 0, 0.1);
+  --divider-color: rgba(0, 0, 0, 0.1);
   // Error color
-  --err-color: rgba(0, 0, 0, 0.1);
+  --error-color: rgba(0, 0, 0, 0.1);
   // Tooltip color
-  --tt-color: rgba(255, 255, 255, 1);
+  --tooltip-color: rgba(255, 255, 255, 1);
   // Editor theme
   --editor-theme: "iplastic";
-  // Active text color
-  --act-color: rgba(255, 255, 255, 1);
 }
 
 @mixin blackTheme {
   // Background color
-  --bg-color: rgba(0, 0, 0, 1);
+  --primary-color: rgba(0, 0, 0, 1);
   // Light Background color
-  --bg-light-color: rgba(255, 255, 255, 0.02);
+  --primary-light-color: rgba(255, 255, 255, 0.02);
   // Dark Background color
-  --bg-dark-color: rgba(255, 255, 255, 0.07);
+  --primary-dark-color: rgba(255, 255, 255, 0.07);
   // Text color
-  --fg-color: rgba(255, 255, 255, 0.9);
+  --secondary-color: rgba(255, 255, 255, 0.9);
   // Light Text color
-  --fg-light-color: rgba(255, 255, 255, 0.5);
+  --secondary-light-color: rgba(255, 255, 255, 0.5);
   // Border color
-  --brd-color: rgba(255, 255, 255, 0.11);
+  --divider-color: rgba(255, 255, 255, 0.11);
   // Error color
-  --err-color: rgba(255, 255, 255, 0.05);
+  --error-color: rgba(255, 255, 255, 0.05);
   // Tooltip color
-  --tt-color: rgba(32, 32, 32, 1);
+  --tooltip-color: rgba(32, 32, 32, 1);
   // Editor theme
   --editor-theme: "vibrant_ink";
-  // Active text color
-  --act-color: rgba(0, 0, 0, 1);
 }
 
 @mixin blueTheme {
-  // Acent color
-  --ac-color: theme("colors.blue.400");
+  // Accent color
+  --accent-color: theme("colors.blue.400");
 }
 
 @mixin greenTheme {
-  // Acent color
-  --ac-color: theme("colors.green.400");
+  // Accent color
+  --accent-color: theme("colors.green.400");
 }
 
 @mixin tealTheme {
-  // Acent color
-  --ac-color: theme("colors.teal.400");
+  // Accent color
+  --accent-color: theme("colors.teal.400");
 }
 
 @mixin indigoTheme {
-  // Acent color
-  --ac-color: theme("colors.indigo.400");
+  // Accent color
+  --accent-color: theme("colors.indigo.400");
 }
 
 @mixin purpleTheme {
-  // Acent color
-  --ac-color: theme("colors.purple.400");
+  // Accent color
+  --accent-color: theme("colors.purple.400");
 }
 
 @mixin orangeTheme {
-  // Acent color
-  --ac-color: theme("colors.orange.400");
+  // Accent color
+  --accent-color: theme("colors.orange.400");
 }
 
 @mixin pinkTheme {
-  // Acent color
-  --ac-color: theme("colors.pink.400");
+  // Accent color
+  --accent-color: theme("colors.pink.400");
 }
 
 @mixin redTheme {
-  // Acent color
-  --ac-color: theme("colors.red.400");
+  // Accent color
+  --accent-color: theme("colors.red.400");
 }
 
 @mixin yellowTheme {
-  // Acent color
-  --ac-color: theme("colors.yellow.400");
+  // Accent color
+  --accent-color: theme("colors.yellow.400");
 }
 
 :root {
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 09db24e31..f2c61244d 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -87,11 +87,11 @@ export default {
   @apply flex-shrink-0;
   @apply my-2;
   @apply mx-4;
-  @apply text-fgLightColor;
+  @apply text-secondaryLight;
   @apply text-sm;
 
   &:hover {
-    @apply text-fgColor;
+    @apply text-secondary;
   }
 }
 </style>
diff --git a/components/app/Header.vue b/components/app/Header.vue
index 67d6985b9..275d84a4f 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -30,7 +30,7 @@
             font-mono
             text-sm
             rounded-md
-            bg-bgDarkColor
+            bg-primaryDark
             hide-on-small-screen
           "
         >
@@ -309,7 +309,7 @@ $responsiveWidth: 768px;
   @apply duration-150;
 
   &:hover {
-    @apply text-acColor;
+    @apply text-accent;
   }
 }
 
diff --git a/components/app/Section.vue b/components/app/Section.vue
index 7366a6675..2bb6c204f 100644
--- a/components/app/Section.vue
+++ b/components/app/Section.vue
@@ -55,7 +55,7 @@ export default Vue.extend({
 fieldset {
   @apply my-4;
   @apply rounded-lg;
-  @apply bg-bgDarkColor;
+  @apply bg-primaryDark;
   @apply transition;
   @apply ease-in-out;
   @apply duration-150;
@@ -63,7 +63,7 @@ fieldset {
 
   legend {
     @apply px-4;
-    @apply text-fgColor;
+    @apply text-secondary;
     @apply font-bold;
     @apply cursor-pointer;
     @apply transition;
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index afd04c121..e81d47f9c 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -160,7 +160,7 @@ $responsiveWidth: 768px;
   @apply z-10;
   @apply h-screen;
   @apply p-2;
-  @apply bg-bgDarkColor;
+  @apply bg-primaryDark;
   @apply transition;
   @apply ease-in-out;
   @apply duration-150;
@@ -187,16 +187,19 @@ nav.primary-nav {
     @apply flex-shrink-0;
     @apply p-4;
     @apply rounded-full;
-    @apply bg-bgLightColor;
-    @apply text-fgLightColor;
+    @apply bg-primaryLight;
+    @apply text-secondaryLight;
     @apply fill-current;
     @apply outline-none;
     @apply transition;
     @apply ease-in-out;
     @apply duration-150;
 
+    border-radius: 50%;
+    transition-property: all !important;
+
     &:hover {
-      @apply text-fgColor;
+      @apply text-secondary;
       @apply fill-current;
 
       svg {
@@ -205,8 +208,8 @@ nav.primary-nav {
     }
 
     &.nuxt-link-exact-active {
-      @apply bg-acColor;
-      @apply text-actColor;
+      @apply bg-accent;
+      @apply text-primary;
       @apply fill-current;
 
       border-radius: 16px;
@@ -231,7 +234,7 @@ nav.secondary-nav {
   @apply justify-center;
   @apply border-t-2;
   @apply border-dashed;
-  @apply border-brdColor;
+  @apply border-divider;
   @apply pt-2;
   @apply space-y-2;
 
@@ -242,8 +245,8 @@ nav.secondary-nav {
     @apply flex-shrink-0;
     @apply p-4;
     @apply rounded-full;
-    @apply bg-bgDarkColor;
-    @apply text-fgLightColor;
+    @apply bg-primaryDark;
+    @apply text-secondaryLight;
     @apply fill-current;
     @apply outline-none;
     @apply transition;
@@ -251,12 +254,12 @@ nav.secondary-nav {
     @apply duration-150;
 
     &:hover {
-      @apply text-fgColor;
+      @apply text-secondary;
       @apply fill-current;
     }
 
     &.current {
-      @apply text-acColor;
+      @apply text-accent;
       @apply fill-current;
     }
   }
@@ -270,7 +273,7 @@ nav.secondary-nav {
     @apply h-auto;
     @apply p-0;
     @apply w-full;
-    @apply bg-bgColor;
+    @apply bg-primary;
     @apply shadow-2xl;
   }
 
@@ -278,7 +281,7 @@ nav.secondary-nav {
     @apply flex-row;
     @apply flex-nowrap;
     @apply overflow-auto;
-    @apply bg-bgDarkColor;
+    @apply bg-primaryDark;
     @apply space-y-0;
 
     padding-bottom: env(safe-area-inset-bottom);
@@ -290,7 +293,7 @@ nav.secondary-nav {
 
       &.nuxt-link-exact-active {
         @apply bg-transparent;
-        @apply text-acColor;
+        @apply text-accent;
         @apply fill-current;
 
         svg {
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index a0571ace7..fef0716ae 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -3,7 +3,7 @@
     <div
       :class="[
         'row-wrapper transition duration-150 ease-in-out',
-        { 'bg-bgDarkColor': dragging },
+        { 'bg-primaryDark': dragging },
       ]"
       @dragover.prevent
       @drop.prevent="dropEvent"
@@ -84,7 +84,7 @@
         <li
           v-for="(folder, index) in collection.folders"
           :key="folder.name"
-          class="ml-8 border-l border-brdColor"
+          class="ml-8 border-l border-divider"
         >
           <CollectionsGraphqlFolder
             :picked="picked"
@@ -106,7 +106,7 @@
         <li
           v-for="(request, index) in collection.requests"
           :key="index"
-          class="ml-8 border-l border-brdColor"
+          class="ml-8 border-l border-divider"
         >
           <CollectionsGraphqlRequest
             :picked="picked"
@@ -128,7 +128,7 @@
           v-if="
             collection.folders.length === 0 && collection.requests.length === 0
           "
-          class="flex ml-8 border-l border-brdColor"
+          class="flex ml-8 border-l border-divider"
         >
           <p class="info">
             <i class="material-icons">not_interested</i>
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index 812413712..f1d257537 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -3,7 +3,7 @@
     <div
       :class="[
         'row-wrapper transition duration-150 ease-in-out',
-        { 'bg-bgDarkColor': dragging },
+        { 'bg-primaryDark': dragging },
       ]"
       @dragover.prevent
       @drop.prevent="dropEvent"
@@ -67,7 +67,7 @@
         <li
           v-for="(subFolder, subFolderIndex) in folder.folders"
           :key="subFolder.name"
-          class="ml-8 border-l border-brdColor"
+          class="ml-8 border-l border-divider"
         >
           <CollectionsGraphqlFolder
             :picked="picked"
@@ -89,7 +89,7 @@
         <li
           v-for="(request, index) in folder.requests"
           :key="index"
-          class="flex ml-8 border-l border-brdColor"
+          class="flex ml-8 border-l border-divider"
         >
           <CollectionsGraphqlRequest
             :picked="picked"
@@ -114,7 +114,7 @@
           folder.requests.length === 0
         "
       >
-        <li class="flex ml-8 border-l border-brdColor">
+        <li class="flex ml-8 border-l border-divider">
           <p class="info">
             <i class="material-icons">not_interested</i>
             {{ $t("folder_empty") }}
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index c22652938..3c1156604 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -3,7 +3,7 @@
     <div
       :class="[
         'row-wrapper transition duration-150 ease-in-out',
-        { 'bg-bgDarkColor': dragging },
+        { 'bg-primaryDark': dragging },
       ]"
       draggable="true"
       @dragstart="dragStart"
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 899a963c1..8c134a3b0 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -49,7 +49,7 @@
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
-    <div class="border-b row-wrapper border-brdColor">
+    <div class="border-b row-wrapper border-divider">
       <button
         v-if="showCollActions"
         class="icon"
diff --git a/components/collections/index.vue b/components/collections/index.vue
index d0bbb3b0a..3161d93d2 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -52,7 +52,7 @@
       @hide-modal="displayModalImportExport(false)"
       @update-team-collections="updateTeamCollections"
     />
-    <div class="border-b row-wrapper border-brdColor">
+    <div class="border-b row-wrapper border-divider">
       <button
         v-if="
           collectionsType.type == 'team-collections' &&
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 518fd5855..3034f730a 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -3,7 +3,7 @@
     <div
       :class="[
         'row-wrapper transition duration-150 ease-in-out',
-        { 'bg-bgDarkColor': dragging },
+        { 'bg-primaryDark': dragging },
       ]"
       @dragover.prevent
       @drop.prevent="dropEvent"
@@ -93,7 +93,7 @@
         <li
           v-for="(folder, index) in collection.folders"
           :key="index"
-          class="ml-8 border-l border-brdColor"
+          class="ml-8 border-l border-divider"
         >
           <CollectionsMyFolder
             :folder="folder"
@@ -117,7 +117,7 @@
         <li
           v-for="(request, index) in collection.requests"
           :key="index"
-          class="ml-8 border-l border-brdColor"
+          class="ml-8 border-l border-divider"
         >
           <CollectionsMyRequest
             :request="request"
@@ -144,7 +144,7 @@
             (collection.requests == undefined ||
               collection.requests.length === 0)
           "
-          class="flex ml-8 border-l border-brdColor"
+          class="flex ml-8 border-l border-divider"
         >
           <p class="info">
             <i class="material-icons">not_interested</i>
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 8b13bd3b2..72aa3493a 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -3,7 +3,7 @@
     <div
       :class="[
         'row-wrapper transition duration-150 ease-in-out',
-        { 'bg-bgDarkColor': dragging },
+        { 'bg-primaryDark': dragging },
       ]"
       @dragover.prevent
       @drop.prevent="dropEvent"
@@ -73,7 +73,7 @@
         <li
           v-for="(subFolder, subFolderIndex) in folder.folders"
           :key="subFolder.name"
-          class="ml-8 border-l border-brdColor"
+          class="ml-8 border-l border-divider"
         >
           <CollectionsMyFolder
             :folder="subFolder"
@@ -97,7 +97,7 @@
         <li
           v-for="(request, index) in folder.requests"
           :key="index"
-          class="flex ml-8 border-l border-brdColor"
+          class="flex ml-8 border-l border-divider"
         >
           <CollectionsMyRequest
             :request="request"
@@ -124,7 +124,7 @@
           folder.requests.length === 0
         "
       >
-        <li class="flex ml-8 border-l border-brdColor">
+        <li class="flex ml-8 border-l border-divider">
           <p class="info">
             <i class="material-icons">not_interested</i>
             {{ $t("folder_empty") }}
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index 3c62bbff2..60d82a06e 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -3,7 +3,7 @@
     <div
       :class="[
         'row-wrapper transition duration-150 ease-in-out',
-        { 'bg-bgDarkColor': dragging },
+        { 'bg-primaryDark': dragging },
       ]"
       draggable="true"
       @dragstart="dragStart"
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 34cd56b8f..af7a55c82 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -89,7 +89,7 @@
         <li
           v-for="(folder, index) in collection.children"
           :key="folder.title"
-          class="ml-8 border-l border-brdColor"
+          class="ml-8 border-l border-divider"
         >
           <CollectionsTeamsFolder
             :folder="folder"
@@ -114,7 +114,7 @@
         <li
           v-for="(request, index) in collection.requests"
           :key="index"
-          class="ml-8 border-l border-brdColor"
+          class="ml-8 border-l border-divider"
         >
           <CollectionsTeamsRequest
             :request="request.request"
@@ -140,7 +140,7 @@
             (collection.requests == undefined ||
               collection.requests.length === 0)
           "
-          class="flex ml-8 border-l border-brdColor"
+          class="flex ml-8 border-l border-divider"
         >
           <p class="info">
             <i class="material-icons">not_interested</i>
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index e9fd237b8..c7d724c0a 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -75,7 +75,7 @@
         <li
           v-for="(subFolder, subFolderIndex) in folder.children"
           :key="subFolder.name"
-          class="ml-8 border-l border-brdColor"
+          class="ml-8 border-l border-divider"
         >
           <CollectionsTeamsFolder
             :folder="subFolder"
@@ -100,7 +100,7 @@
         <li
           v-for="(request, index) in folder.requests"
           :key="index"
-          class="flex ml-8 border-l border-brdColor"
+          class="flex ml-8 border-l border-divider"
         >
           <CollectionsTeamsRequest
             :request="request.request"
@@ -124,7 +124,7 @@
           (folder.requests == undefined || folder.requests.length === 0)
         "
       >
-        <li class="flex ml-8 border-l border-brdColor">
+        <li class="flex ml-8 border-l border-divider">
           <p class="info">
             <i class="material-icons">not_interested</i>
             {{ $t("folder_empty") }}
diff --git a/components/docs/Folder.vue b/components/docs/Folder.vue
index 6cd991181..231b4e094 100644
--- a/components/docs/Folder.vue
+++ b/components/docs/Folder.vue
@@ -29,7 +29,7 @@ export default {
   @apply flex-1;
   @apply p-4;
   @apply border-l;
-  @apply border-brdColor;
+  @apply border-divider;
   @apply mt-4;
 
   .material-icons {
diff --git a/components/docs/Request.vue b/components/docs/Request.vue
index c4cac7378..10e1ed93b 100644
--- a/components/docs/Request.vue
+++ b/components/docs/Request.vue
@@ -117,7 +117,7 @@ export default {
   @apply flex-1;
   @apply p-4;
   @apply border;
-  @apply border-brdColor;
+  @apply border-divider;
   @apply rounded-lg;
   @apply mt-4;
 
@@ -136,10 +136,10 @@ export default {
   @apply justify-center;
   @apply flex-1;
   @apply p-4;
-  @apply text-fgLightColor;
+  @apply text-secondaryLight;
   @apply border-b;
   @apply border-dashed;
-  @apply border-brdColor;
+  @apply border-divider;
   @apply m-0;
 
   &:last-child {
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 6b25f6b4e..7fad7a7cd 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -38,8 +38,8 @@
           border-b border-dashed
           divide-y
           md:divide-x
-          border-brdColor
-          divide-dashed divide-brdColor
+          border-divider
+          divide-dashed divide-divider
           md:divide-y-0
         "
         :class="{ 'border-t': index == 0 }"
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 777c665f8..dbb649175 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -40,7 +40,7 @@
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
-    <div class="border-b row-wrapper border-brdColor">
+    <div class="border-b row-wrapper border-divider">
       <div>
         <button class="icon" @click="displayModalAdd(true)">
           <i class="material-icons">add</i>
diff --git a/components/firebase/Email.vue b/components/firebase/Email.vue
index 5b1bbde75..5d6f223e9 100644
--- a/components/firebase/Email.vue
+++ b/components/firebase/Email.vue
@@ -27,7 +27,7 @@
     </div>
     <div v-else slot="body" class="flex flex-col items-center">
       <div class="flex justify-center max-w-md p-4 items-center flex-col">
-        <i class="material-icons text-acColor" style="font-size: 64px">
+        <i class="material-icons text-accent" style="font-size: 64px">
           verified
         </i>
         <h3 class="font-bold my-2 text-center text-lg">
diff --git a/components/firebase/Feeds.vue b/components/firebase/Feeds.vue
index 8bd66ae49..e3b46f6c4 100644
--- a/components/firebase/Feeds.vue
+++ b/components/firebase/Feeds.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="fb.currentFeeds.length !== 0"
-    class="divide-y virtual-list divide-dashed divide-brdColor"
+    class="divide-y virtual-list divide-dashed divide-divider"
   >
     <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="flex-col">
       <div data-test="list-item" class="show-on-large-screen">
diff --git a/components/firebase/Inputform.vue b/components/firebase/Inputform.vue
index 91a230090..0a39060fd 100644
--- a/components/firebase/Inputform.vue
+++ b/components/firebase/Inputform.vue
@@ -11,7 +11,7 @@
         @keyup.enter="formPost"
       />
     </div>
-    <div class="border-b show-on-large-screen border-brdColor">
+    <div class="border-b show-on-large-screen border-divider">
       <input
         v-model="label"
         :aria-label="$t('label')"
diff --git a/components/graphql/Field.vue b/components/graphql/Field.vue
index 9b1d05784..17634506b 100644
--- a/components/graphql/Field.vue
+++ b/components/graphql/Field.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-2 m-2 border-b border-dashed border-brdColor">
+  <div class="p-2 m-2 border-b border-dashed border-divider">
     <div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
       {{ fieldName }}
       <span v-if="fieldArgs.length > 0">
@@ -19,7 +19,10 @@
         :jump-type-callback="jumpTypeCallback"
       />
     </div>
-    <div v-if="gqlField.description" class="mt-2 text-fgLightColor field-desc">
+    <div
+      v-if="gqlField.description"
+      class="mt-2 text-secondaryLight field-desc"
+    >
       {{ gqlField.description }}
     </div>
     <div
@@ -41,7 +44,7 @@
     </div>
     <div v-if="fieldArgs.length > 0">
       <h5 class="my-2 text-xs">ARGUMENTS:</h5>
-      <div class="px-4 border-l-2 border-acColor">
+      <div class="px-4 border-l-2 border-accent">
         <div v-for="(field, index) in fieldArgs" :key="index">
           {{ field.name }}:
           <GraphqlTypeLink
@@ -50,7 +53,7 @@
           />
           <div
             v-if="field.description"
-            class="mt-2 text-fgLightColor field-desc"
+            class="mt-2 text-secondaryLight field-desc"
           >
             {{ field.description }}
           </div>
@@ -82,6 +85,6 @@ export default {
 <style scoped lang="scss">
 .field-highlighted {
   @apply border-b-2;
-  @apply border-acColor;
+  @apply border-accent;
 }
 </style>
diff --git a/components/graphql/Type.vue b/components/graphql/Type.vue
index c2b999faa..b77d0197a 100644
--- a/components/graphql/Type.vue
+++ b/components/graphql/Type.vue
@@ -4,14 +4,14 @@
       class="font-bold type-title"
       :class="{ 'type-highlighted': isHighlighted }"
     >
-      <span v-if="isInput" class="font-normal text-acColor">input </span>
-      <span v-else-if="isInterface" class="font-normal text-acColor"
+      <span v-if="isInput" class="font-normal text-accent">input </span>
+      <span v-else-if="isInterface" class="font-normal text-accent"
         >interface
       </span>
-      <span v-else-if="isEnum" class="font-normal text-acColor">enum </span>
+      <span v-else-if="isEnum" class="font-normal text-accent">enum </span>
       {{ gqlType.name }}
     </div>
-    <div v-if="gqlType.description" class="mt-2 text-fgLightColor type-desc">
+    <div v-if="gqlType.description" class="mt-2 text-secondaryLight type-desc">
       {{ gqlType.description }}
     </div>
     <div v-if="interfaces.length > 0" class="mb-2">
@@ -104,6 +104,6 @@ export default {
 
 <style scoped lang="scss">
 .type-highlighted {
-  @apply text-acColor;
+  @apply text-accent;
 }
 </style>
diff --git a/components/graphql/TypeLink.vue b/components/graphql/TypeLink.vue
index 243f11c07..f0e12413e 100644
--- a/components/graphql/TypeLink.vue
+++ b/components/graphql/TypeLink.vue
@@ -1,7 +1,7 @@
 <template>
   <span
     :class="{ 'cursor-pointer': !isScalar }"
-    class="font-mono font-normal text-acColor"
+    class="font-mono font-normal text-accent"
     @click="jumpToType"
   >
     {{ typeString }}
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index 3813d8ba1..737c7e69a 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -82,7 +82,7 @@
           type="text"
           readonly
           :value="`${line}`"
-          class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
+          class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
         />
       </li>
     </div>
@@ -95,7 +95,7 @@
             type="text"
             readonly
             :value="entry.time"
-            class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
+            class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
           />
         </li>
         <li>
@@ -105,7 +105,7 @@
             readonly
             :value="`Duration: ${entry.duration}ms`"
             :placeholder="$t('no_duration')"
-            class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
+            class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
           />
         </li>
         <!-- <li>
@@ -115,7 +115,7 @@
             readonly
             :value="entry.preRequestScript"
             :placeholder="$t('no_prerequest_script')"
-            class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
+            class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
           />
         </li> -->
       </div>
diff --git a/components/history/index.vue b/components/history/index.vue
index fc55283fa..6015dc058 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -10,7 +10,7 @@
       />
     </div>
     <div
-      class="divide-y virtual-list divide-dashed divide-brdColor"
+      class="divide-y virtual-list divide-dashed divide-divider"
       :class="{ filled: filteredHistory.length }"
     >
       <ul v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
@@ -42,7 +42,7 @@
     <p v-if="history.length === 0" class="info">
       <i class="material-icons">schedule</i> {{ $t("history_empty") }}
     </p>
-    <div v-if="history.length !== 0" class="rounded-b-lg bg-bgDarkColor">
+    <div v-if="history.length !== 0" class="rounded-b-lg bg-primaryDark">
       <div v-if="!isClearingHistory" class="row-wrapper">
         <button
           data-testid="clear_history"
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index 12ac55d85..5051d6bfa 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -87,7 +87,7 @@
           readonly
           :value="`${entry.url}${entry.path}`"
           :placeholder="$t('no_url')"
-          class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
+          class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
         />
       </li>
     </div>
@@ -100,7 +100,7 @@
             type="text"
             readonly
             :value="entry.time"
-            class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
+            class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
           />
         </li>
         <li>
@@ -110,7 +110,7 @@
             readonly
             :value="`Duration: ${entry.duration}ms`"
             :placeholder="$t('no_duration')"
-            class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
+            class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
           />
         </li>
         <!-- <li>
@@ -120,7 +120,7 @@
             readonly
             :value="entry.preRequestScript"
             :placeholder="$t('no_prerequest_script')"
-            class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
+            class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
           />
         </li> -->
       </div>
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index 16448a00b..49190ded4 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -23,8 +23,8 @@
         border-b border-dashed
         divide-y
         md:divide-x
-        border-brdColor
-        divide-dashed divide-brdColor
+        border-divider
+        divide-dashed divide-divider
         md:divide-y-0
       "
       :class="{ 'border-t': index == 0 }"
@@ -238,7 +238,7 @@ export default {
   @apply flex-1;
   @apply whitespace-nowrap;
   @apply overflow-auto;
-  @apply bg-bgDarkColor;
+  @apply bg-primaryDark;
 
   .file-chips-wrapper {
     @apply flex;
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 84d601d50..dec483809 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -23,8 +23,8 @@
         border-b border-dashed
         divide-y
         md:divide-x
-        border-brdColor
-        divide-dashed divide-brdColor
+        border-divider
+        divide-dashed divide-divider
         md:divide-y-0
       "
       :class="{ 'border-t': index == 0 }"
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 9a205c835..43b3bade6 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -23,8 +23,8 @@
         border-b border-dashed
         divide-y
         md:divide-x
-        border-brdColor
-        divide-dashed divide-brdColor
+        border-divider
+        divide-dashed divide-divider
         md:divide-y-0
       "
       :class="{ 'border-t': index == 0 }"
diff --git a/components/realtime/Log.vue b/components/realtime/Log.vue
index f5368aafe..9cf52d22d 100644
--- a/components/realtime/Log.vue
+++ b/components/realtime/Log.vue
@@ -43,8 +43,8 @@ export default {
 <style scoped lang="scss">
 .realtime-log {
   @apply p-4;
-  @apply bg-bgDarkColor;
-  @apply text-fgColor;
+  @apply bg-primaryDark;
+  @apply text-secondary;
   @apply overflow-auto;
 
   height: 256px;
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 9b66a28d0..556180165 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -57,7 +57,7 @@
             v-model="msg"
             type="text"
             spellcheck="false"
-            class="border-dashed md:border-l border-brdColor"
+            class="border-dashed md:border-l border-divider"
           />
         </li>
         <div>
@@ -172,7 +172,7 @@ export default {
         {
           payload: this.$t("connecting_to", { name: this.url }),
           source: "info",
-          color: "var(--ac-color)",
+          color: "var(--accent-color)",
           ts: new Date().toLocaleTimeString(),
         },
       ]
@@ -204,7 +204,7 @@ export default {
       this.log.push({
         payload: this.$t("connected_to", { name: this.url }),
         source: "info",
-        color: "var(--ac-color)",
+        color: "var(--accent-color)",
         ts: new Date().toLocaleTimeString(),
       })
       this.$toast.success(this.$t("connected"), {
@@ -215,7 +215,7 @@ export default {
       this.log.push({
         payload: `Message: ${payloadString} arrived on topic: ${destinationName}`,
         source: "info",
-        color: "var(--ac-color)",
+        color: "var(--accent-color)",
         ts: new Date().toLocaleTimeString(),
       })
     },
@@ -257,7 +257,7 @@ export default {
           payload: `Published message: ${this.msg} to topic: ${this.pub_topic}`,
           ts: new Date().toLocaleTimeString(),
           source: "info",
-          color: "var(--ac-color)",
+          color: "var(--accent-color)",
         })
       } catch (e) {
         this.log.push({
@@ -302,7 +302,7 @@ export default {
           (this.subscriptionState ? "subscribed" : "unsubscribed") +
           ` to topic: ${this.sub_topic}`,
         source: "info",
-        color: "var(--ac-color)",
+        color: "var(--accent-color)",
         ts: new Date().toLocaleTimeString(),
       })
     },
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 2ab7ad5cf..52a2edbe4 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -81,8 +81,8 @@
           border-b border-dashed
           divide-y
           md:divide-x
-          border-brdColor
-          divide-dashed divide-brdColor
+          border-divider
+          divide-dashed divide-divider
           md:divide-y-0
         "
       >
@@ -197,7 +197,7 @@ export default {
         {
           payload: this.$t("connecting_to", { name: this.url }),
           source: "info",
-          color: "var(--ac-color)",
+          color: "var(--accent-color)",
         },
       ]
 
@@ -216,7 +216,7 @@ export default {
             {
               payload: this.$t("connected_to", { name: this.url }),
               source: "info",
-              color: "var(--ac-color)",
+              color: "var(--accent-color)",
               ts: new Date().toLocaleTimeString(),
             },
           ]
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 3e03d48a3..6caf7e0e4 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -105,7 +105,7 @@ export default {
         {
           payload: this.$t("connecting_to", { name: this.server }),
           source: "info",
-          color: "var(--ac-color)",
+          color: "var(--accent-color)",
         },
       ]
       if (typeof EventSource !== "undefined") {
@@ -117,7 +117,7 @@ export default {
               {
                 payload: this.$t("connected_to", { name: this.server }),
                 source: "info",
-                color: "var(--ac-color)",
+                color: "var(--accent-color)",
                 ts: new Date().toLocaleTimeString(),
               },
             ]
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index ac48f3846..2c8bb6678 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -139,7 +139,7 @@ export default {
         {
           payload: this.$t("connecting_to", { name: this.url }),
           source: "info",
-          color: "var(--ac-color)",
+          color: "var(--accent-color)",
         },
       ]
       try {
@@ -150,7 +150,7 @@ export default {
             {
               payload: this.$t("connected_to", { name: this.url }),
               source: "info",
-              color: "var(--ac-color)",
+              color: "var(--accent-color)",
               ts: new Date().toLocaleTimeString(),
             },
           ]
diff --git a/components/smart/AccentModePicker.vue b/components/smart/AccentModePicker.vue
index 494204cdb..f05c0ce6c 100644
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -29,7 +29,7 @@
           cursor-pointer
           hover:shadow-none
         "
-        :class="[`text-${color}-400`, { 'bg-actColor': color === active }]"
+        :class="[`text-${color}-400`, { 'bg-primary': color === active }]"
         @click="setActiveColor(color)"
       >
         <i class="material-icons">lens</i>
diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue
index 924d63bc4..1bbbe3527 100644
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -270,11 +270,11 @@ export default {
     @apply items-center;
     @apply flex-grow-0;
     @apply flex-shrink-0;
-    @apply text-fgLightColor;
+    @apply text-secondaryLight;
     @apply text-sm;
 
     &:hover {
-      @apply text-fgColor;
+      @apply text-secondary;
       @apply cursor-pointer;
     }
 
@@ -289,11 +289,11 @@ export default {
       @apply absolute;
       @apply z-50;
       @apply top-9;
-      @apply bg-bgColor;
+      @apply bg-primary;
       @apply max-h-60;
       @apply overflow-auto;
       @apply shadow-lg;
-      @apply text-fgLightColor;
+      @apply text-secondaryLight;
       @apply overscroll-none;
 
       border-radius: 0 0 8px 8px;
@@ -304,8 +304,8 @@ export default {
       @apply py-1;
 
       &:hover {
-        @apply text-fgColor;
-        @apply bg-bgLightColor;
+        @apply text-secondary;
+        @apply bg-primaryLight;
       }
     }
   }
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index def6526a8..d0873476d 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -194,7 +194,7 @@ export default {
 
   ul.suggestions {
     @apply hidden;
-    @apply bg-actColor;
+    @apply bg-primary;
     @apply absolute;
     @apply mx-2;
     @apply left-0;
@@ -222,8 +222,8 @@ export default {
 
       &:hover,
       &.active {
-        @apply bg-acColor;
-        @apply text-actColor;
+        @apply bg-accent;
+        @apply text-primary;
         @apply cursor-pointer;
       }
     }
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index 78ea6e45c..a706ff6c5 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -30,12 +30,12 @@
           rounded-full
           cursor-pointer
           border-collapseer-2
-          text-fgLightColor
-          hover:text-fgColor
+          text-secondaryLight
+          hover:text-secondary
         "
         :class="[
-          { 'bg-actColor': color === $colorMode.preference },
-          { 'text-acColor hover:text-acColor': color === $colorMode.value },
+          { 'bg-primary': color === $colorMode.preference },
+          { 'text-accent hover:text-accent': color === $colorMode.value },
         ]"
         @click="$colorMode.preference = color"
       >
diff --git a/components/smart/DeletableChip.vue b/components/smart/DeletableChip.vue
index 0b3e581d8..3914700ae 100644
--- a/components/smart/DeletableChip.vue
+++ b/components/smart/DeletableChip.vue
@@ -15,15 +15,15 @@
   @apply rounded-lg;
   @apply m-1;
   @apply pl-4;
-  @apply bg-bgDarkColor;
-  @apply text-fgColor;
+  @apply bg-primaryDark;
+  @apply text-secondary;
   @apply font-mono;
   @apply font-normal;
   @apply transition;
   @apply ease-in-out;
   @apply duration-150;
   @apply border;
-  @apply border-brdColor;
+  @apply border-divider;
 }
 
 .close-button {
diff --git a/components/smart/HideMenu.vue b/components/smart/HideMenu.vue
index a2e908255..00352fcde 100644
--- a/components/smart/HideMenu.vue
+++ b/components/smart/HideMenu.vue
@@ -9,9 +9,9 @@
       justify-center
       px-2
       py-1
-      bg-brdColor
-      text-fgLightColor
-      hover:text-fgColor
+      bg-divider
+      text-secondaryLight
+      hover:text-secondary
       my-4
       z-10
       rounded-l
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index b7de431f8..e019dd8f9 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -63,11 +63,11 @@ export default {
   @apply transition;
   @apply ease-in-out;
   @apply duration-150;
-  @apply bg-bgColor;
+  @apply bg-primary;
   @apply rounded-lg;
   @apply shadow-2xl;
   @apply border;
-  @apply border-ttColor;
+  @apply border-tooltip;
 
   max-height: calc(100vh - 128px);
   max-width: 640px;
@@ -121,12 +121,12 @@ export default {
 
   &.top {
     top: 68px;
-    background: linear-gradient(to bottom, var(--bg-color), transparent);
+    background: linear-gradient(to bottom, var(--primary-color), transparent);
   }
 
   &.bottom {
     bottom: 16px;
-    background: linear-gradient(to top, var(--bg-color), transparent);
+    background: linear-gradient(to top, var(--primary-color), transparent);
   }
 }
 </style>
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 71db1ad98..b75ad76b5 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -83,7 +83,7 @@ export default {
         @apply justify-center;
         @apply py-2;
         @apply px-4;
-        @apply text-fgLightColor;
+        @apply text-secondaryLight;
         @apply text-sm;
         @apply rounded-lg;
         @apply cursor-pointer;
@@ -96,17 +96,17 @@ export default {
         }
 
         &:hover {
-          @apply text-fgColor;
+          @apply text-secondary;
         }
       }
 
       &:focus a {
-        @apply text-fgColor;
+        @apply text-secondary;
       }
 
       &.is-active a {
-        @apply bg-brdColor;
-        @apply text-fgColor;
+        @apply bg-divider;
+        @apply text-secondary;
       }
     }
   }
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index 009d3777a..98b55bace 100644
--- a/components/smart/Toggle.vue
+++ b/components/smart/Toggle.vue
@@ -29,11 +29,11 @@ export default {
 
 <style scoped lang="scss">
 $useBorder: false;
-$borderColor: var(--fg-light-color);
-$activeColor: var(--ac-color);
-$inactiveColor: var(--fg-light-color);
-$inactiveHandleColor: var(--bg-color);
-$activeHandleColor: var(--act-color);
+$borderColor: var(--secondary-light-color);
+$activeColor: var(--accent-color);
+$inactiveColor: var(--secondary-light-color);
+$inactiveHandleColor: var(--primary-color);
+$activeHandleColor: var(--primary-color);
 $width: 32px;
 $height: 16px;
 $handleSpacing: 4px;
diff --git a/components/smart/UrlField.vue b/components/smart/UrlField.vue
index 8de0044a7..9a0d3a763 100644
--- a/components/smart/UrlField.vue
+++ b/components/smart/UrlField.vue
@@ -1,4 +1,4 @@
-<!-- 
+<!--
  This code is a complete adaptation of the work done here
  https://github.com/SyedWasiHaider/vue-highlightable-input
 -->
@@ -392,14 +392,14 @@ export default {
 <style lang="scss">
 .VAR {
   @apply font-bold;
-  @apply text-acColor;
+  @apply text-accent;
 }
 .url-field-container {
   @apply inline-grid;
 }
 .url-field {
   @apply border-dashed;
-  @apply border-brdColor;
+  @apply border-divider;
   @apply whitespace-nowrap;
   @apply overflow-x-auto;
   @apply resize-none;
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index ff563c555..375b29159 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -40,8 +40,8 @@
           border-b border-dashed
           divide-y
           md:divide-x
-          border-brdColor
-          divide-dashed divide-brdColor
+          border-divider
+          divide-dashed divide-divider
           md:divide-y-0
         "
         :class="{ 'border-t': index == 0 }"
@@ -119,8 +119,8 @@
           border-b border-dashed
           divide-y
           md:divide-x
-          border-brdColor
-          divide-dashed divide-brdColor
+          border-divider
+          divide-dashed divide-divider
           md:divide-y-0
         "
       >
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index 039ec2c8f..9470d6db7 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -101,16 +101,3 @@ export default {
   },
 }
 </script>
-
-<style scoped lang="scss">
-ul {
-  display: flex;
-  flex-direction: column;
-}
-
-ul li {
-  display: flex;
-  padding-left: 16px;
-  border-left: 1px solid var(--brd-color);
-}
-</style>
diff --git a/helpers/teams/TeamMemberAdapter.ts b/helpers/teams/TeamMemberAdapter.ts
index 356088855..b7ec2d75e 100644
--- a/helpers/teams/TeamMemberAdapter.ts
+++ b/helpers/teams/TeamMemberAdapter.ts
@@ -75,8 +75,6 @@ export default class TeamMemberAdapter {
         },
       })
 
-      debugger
-
       result.push(...response.data.team.members)
 
       if ((response.data.team.members as any[]).length === 0) break
diff --git a/layouts/error.vue b/layouts/error.vue
index 1e1842130..b48488983 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -2,7 +2,7 @@
   <div class="page page-error">
     <h1 class="mb-4 font-mono text-4xl">{{ statusCode }}</h1>
     <h3 class="mb-4 font-mono text-xs">{{ message }}</h3>
-    <p class="mt-4 border-t border-ttColor">
+    <p class="mt-4 border-t border-tooltip">
       <nuxt-link to="/">
         <button class="icon">
           <i class="material-icons">home</i>
diff --git a/nuxt.config.js b/nuxt.config.js
index 547d6a9a1..036593c1f 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -7,8 +7,8 @@ export const options = {
   description:
     "Helps you create requests faster, saving precious time on development.",
   loading: {
-    color: "var(--ac-color)",
-    background: "var(--bg-color)",
+    color: "var(--accent-color)",
+    background: "var(--primary-color)",
   },
   app: {
     background: "#202124",
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 6a3ec843f..a03b3fe9c 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -63,8 +63,8 @@
                 border-b border-dashed
                 divide-y
                 md:divide-x
-                border-brdColor
-                divide-dashed divide-brdColor
+                border-divider
+                divide-dashed divide-divider
                 md:divide-y-0
               "
               :class="{ 'border-t': index == 0 }"
diff --git a/pages/index.vue b/pages/index.vue
index 94271dbc7..9d4aca933 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -42,7 +42,7 @@
               <input
                 v-if="!EXPERIMENTAL_URL_BAR_ENABLED"
                 :class="{ error: !isValidURL }"
-                class="border-dashed md:border-l border-brdColor"
+                class="border-dashed md:border-l border-divider"
                 @keyup.enter="isValidURL ? sendRequest() : null"
                 id="url"
                 name="url"
diff --git a/tailwind.config.js b/tailwind.config.js
index 759f5f817..96415d685 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,16 +22,15 @@ export default {
     },
     extend: {
       colors: {
-        bgColor: "var(--bg-color)",
-        bgLightColor: "var(--bg-light-color)",
-        bgDarkColor: "var(--bg-dark-color)",
-        fgColor: "var(--fg-color)",
-        fgLightColor: "var(--fg-light-color)",
-        brdColor: "var(--brd-color)",
-        errColor: "var(--err-color)",
-        acColor: "var(--ac-color)",
-        actColor: "var(--act-color)",
-        ttColor: "var(--tt-color)",
+        primary: "var(--primary-color)",
+        primaryLight: "var(--primary-light-color)",
+        primaryDark: "var(--primary-dark-color)",
+        secondary: "var(--secondary-color)",
+        secondaryLight: "var(--secondary-light-color)",
+        accent: "var(--accent-color)",
+        divider: "var(--divider-color)",
+        error: "var(--error-color)",
+        tooltip: "var(--tooltip-color)",
         blue: colors.blue,
         green: colors.green,
         teal: colors.teal,