diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index a31cb78de..b83d84651 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -35,11 +35,6 @@
   @apply text-primary;
 }
 
-::placeholder {
-  @apply text-secondaryLight;
-  @apply opacity-25;
-}
-
 html {
   scroll-behavior: smooth;
 }
@@ -162,6 +157,7 @@ hr {
   @apply text-secondaryDark text-lg;
 }
 
+.textarea,
 .input,
 .select {
   @apply flex flex-1;
@@ -189,7 +185,7 @@ pre.ace_editor {
   @apply z-0;
 }
 
-select {
+.select {
   @apply appearance-none;
   @apply cursor-pointer;
 
@@ -323,7 +319,6 @@ input[type="checkbox"] {
 .splitpanes__splitter {
   @apply relative;
   @apply bg-primaryLight;
-  @apply transition;
 }
 
 .splitpanes--vertical > .splitpanes__splitter {
@@ -339,7 +334,7 @@ input[type="checkbox"] {
   @apply inset-0;
   @apply bg-dividerLight;
   @apply opacity-0;
-  @apply z-1;
+  @apply z-30;
   @apply transition;
 
   content: "";
@@ -348,7 +343,7 @@ input[type="checkbox"] {
 .splitpanes__splitter::after {
   @apply absolute;
   @apply inset-0;
-  @apply z-1;
+  @apply z-30;
   @apply transition;
   @apply flex;
   @apply items-center;
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 2ea5c590e..ff45ef176 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -16,17 +16,17 @@
   // Light Text color
   --secondary-light-color: theme("colors.true-gray.500");
   // Dark Text color
-  --secondary-dark-color: theme("colors.white");
+  --secondary-dark-color: theme("colors.true-gray.100");
   // Border color
   --divider-color: theme("colors.true-gray.700");
   // Light Border color
-  --divider-light-color: theme("colors.true-gray.800");
+  --divider-light-color: theme("colors.dark.600");
   // Dark Border color
-  --divider-dark-color: theme("colors.true-gray.600");
+  --divider-dark-color: theme("colors.dark.200");
   // Error color
-  --error-color: theme("colors.true-gray.600");
+  --error-color: theme("colors.dark.800");
   // Tooltip color
-  --tooltip-color: theme("colors.true-gray.200");
+  --tooltip-color: theme("colors.true-gray.100");
   // Editor theme
   --editor-theme: "merbivore_soft";
 }
@@ -62,25 +62,25 @@
   // Background color
   --primary-color: theme("colors.dark.900");
   // Light Background color
-  --primary-light-color: theme("colors.dark.700");
+  --primary-light-color: theme("colors.dark.800");
   // Dark Background color
-  --primary-dark-color: theme("colors.dark.800");
+  --primary-dark-color: theme("colors.true-gray.900");
   // Text color
   --secondary-color: theme("colors.true-gray.400");
   // Light Text color
-  --secondary-light-color: theme("colors.true-gray.600");
+  --secondary-light-color: theme("colors.true-gray.500");
   // Dark Text color
   --secondary-dark-color: theme("colors.true-gray.100");
   // Border color
-  --divider-color: theme("colors.dark.800");
+  --divider-color: theme("colors.true-gray.800");
   // Light Border color
-  --divider-light-color: theme("colors.dark.700");
+  --divider-light-color: theme("colors.true-gray.900");
   // Dark Border color
-  --divider-dark-color: theme("colors.dark.600");
+  --divider-dark-color: theme("colors.dark.200");
   // Error color
   --error-color: theme("colors.dark.800");
   // Tooltip color
-  --tooltip-color: theme("colors.true-gray.200");
+  --tooltip-color: theme("colors.true-gray.100");
   // Editor theme
   --editor-theme: "vibrant_ink";
 }
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index 4da793f61..c23475a45 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -11,11 +11,12 @@
       items-center
       justify-center
       focus:outline-none
+      hover:bg-primaryDark
     "
     :class="[
       color
         ? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
-        : 'text-secondary hover:text-secondaryDark hover:bg-primaryDark focus:text-secondaryDark',
+        : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
       label ? 'px-3' : 'px-2',
       rounded ? 'rounded-full' : 'rounded',
       { 'opacity-75 cursor-not-allowed': disabled },
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index 20c1db591..2fe0d42f1 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -27,6 +27,7 @@
                 py-3
                 px-4
                 focus:outline-none
+                select
               "
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index 2078a1a42..d159a3076 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -88,6 +88,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index 0ec862353..9d4b4f9bd 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -84,6 +84,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index e188bc1f0..f58066afb 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -80,6 +80,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 45802dfe6..ea2304736 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -47,6 +47,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('import')"
         icon="check_box_outline_blank"
+        color="green"
         @click.native="$emit('select-collection')"
       />
       <ButtonSecondary
@@ -104,6 +105,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index ea0c8a781..8b8ba4b3d 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -89,6 +89,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index ffecd13dd..2360e6eb1 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -91,6 +91,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 8c3a4b026..35c7c41a1 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -39,6 +39,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('import')"
         icon="check_box_outline_blank"
+        color="green"
         @click.native="$emit('select-collection')"
       />
       <ButtonSecondary
@@ -101,6 +102,7 @@
         <SmartItem
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index bf3684709..a2d707a82 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -86,6 +86,7 @@
         <SmartItem
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index 29c4ea19a..b793a5adb 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -84,6 +84,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index d9f41e497..5a63abea0 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -87,6 +87,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
                 icon="delete"
+                color="red"
                 @click.native="removeEnvironmentVariable(index)"
               />
             </div>
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index 2a82e3b19..25c5219d8 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -58,6 +58,7 @@
       />
       <SmartItem
         icon="delete"
+        color="red"
         :label="$t('delete')"
         @click.native="
           confirmRemove = true
diff --git a/components/environments/index.vue b/components/environments/index.vue
index dbdb32759..e3ccf402b 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -15,6 +15,7 @@
             py-3
             px-4
             focus:outline-none
+            select
           "
         >
           <option :value="-1">No environment</option>
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index ce4a653c4..0b07e38a9 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -25,9 +25,9 @@
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         icon="delete"
+        color="red"
         :title="$t('delete')"
         class="group-hover:inline-flex hidden"
-        color="red"
         data-testid="delete_history_entry"
         @click.native="$emit('delete-entry')"
       />
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index 0679c290c..53cff111f 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -43,9 +43,9 @@
     <ButtonSecondary
       v-tippy="{ theme: 'tooltip' }"
       icon="delete"
+      color="red"
       :title="$t('delete')"
       class="group-hover:inline-flex hidden"
-      color="red"
       data-testid="delete_history_entry"
       @click.native="$emit('delete-entry')"
     />
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index 037c37528..ebd055adc 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -103,6 +103,7 @@
                 : 'check_box_outline_blank'
               : 'check_box'
           "
+          color="green"
           @click.native="toggleActive(index, param)"
         />
       </div>
@@ -128,6 +129,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
           icon="delete"
+          color="red"
           @click.native="removeRequestBodyParam(index)"
         />
       </div>
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 545fcb08a..59f516284 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -94,6 +94,7 @@
                 : 'check_box_outline_blank'
               : 'check_box'
           "
+          color="green"
           @click.native="
             updateHeader(index, {
               key: header.key,
@@ -108,6 +109,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
           icon="delete"
+          color="red"
           @click.native="deleteHeader(index)"
         />
       </div>
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index c5c66c6c4..d74e25b94 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -7,14 +7,16 @@
       </div>
     </template>
     <template #body>
-      <textarea
-        id="import-curl"
-        v-model="curl"
-        class="textarea"
-        autofocus
-        rows="8"
-        :placeholder="$t('enter_curl')"
-      ></textarea>
+      <div class="flex flex-col px-2">
+        <textarea
+          id="import-curl"
+          v-model="curl"
+          class="textarea"
+          autofocus
+          rows="8"
+          :placeholder="$t('enter_curl')"
+        ></textarea>
+      </div>
     </template>
     <template #footer>
       <span>
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 1f6425ce6..63622f728 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -103,6 +103,7 @@
                 : 'check_box_outline_blank'
               : 'check_box'
           "
+          color="green"
           @click.native="
             updateParam(index, {
               key: param.key,
@@ -117,6 +118,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
           icon="delete"
+          color="red"
           @click.native="deleteParam(index)"
         />
       </div>
diff --git a/components/http/TokenList.vue b/components/http/TokenList.vue
index 7683c097e..da7204acb 100644
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -49,6 +49,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
               icon="delete"
+              color="red"
               @click.native="removeOAuthToken(index)"
             />
           </li>
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 9c0aa26b7..1b44578a6 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -109,6 +109,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
               icon="delete"
+              color="red"
               @click.native="removeCommunicationInput({ index })"
             />
           </div>
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index f9b581315..653135ff1 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -113,6 +113,7 @@
                       : 'check_box_outline_blank'
                     : 'check_box'
                 "
+                color="green"
                 @click.native="
                   protocol.active = protocol.hasOwnProperty('active')
                     ? !protocol.active
@@ -125,6 +126,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
                 icon="delete"
+                color="red"
                 @click.native="deleteProtocol({ index })"
               />
             </div>
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index eea723715..b1b880ca7 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -213,7 +213,7 @@ export default {
     @apply z-50;
     @apply shadow-lg;
 
-    top: calc(100% - 8px);
+    top: calc(100% - 4px);
     border-radius: 0 0 8px 8px;
 
     li {
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index 346eded2b..bdbd2ace8 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -6,7 +6,7 @@
       v-tippy="{ theme: 'tooltip' }"
       :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
       :class="{
-        'bg-primaryLight !text-accent hover:text-accent': color === activeColor,
+        'bg-primaryLight !text-accent hover:text-accent': color === active,
       }"
       :icon="getIcon(color)"
       @click.native="setBGMode(color)"
@@ -31,7 +31,7 @@ export default Vue.extend({
   },
   subscriptions() {
     return {
-      activeColor: getSettingSubject("BG_COLOR"),
+      active: getSettingSubject("BG_COLOR"),
     }
   },
   methods: {
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index f2eb01099..7c92ae21a 100644
--- a/components/smart/Toggle.vue
+++ b/components/smart/Toggle.vue
@@ -24,9 +24,9 @@ export default {
 
 <style scoped lang="scss">
 $useBorder: false;
-$borderColor: var(--divider-dark-color);
+$borderColor: var(--divider-color);
 $activeColor: var(--accent-color);
-$inactiveColor: var(--divider-dark-color);
+$inactiveColor: var(--divider-color);
 $inactiveHandleColor: var(--primary-color);
 $activeHandleColor: var(--primary-color);
 $width: 2rem;
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 3b4b6cd0d..294989dc9 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -96,6 +96,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
                 icon="delete"
+                color="red"
                 @click.native="removeExistingTeamMember(member.user.uid)"
               />
             </li>
@@ -173,6 +174,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
                 icon="delete"
+                color="red"
                 @click.native="removeTeamMember(index)"
               />
             </li>
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index dd65ec305..eaa08d4bc 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -36,6 +36,7 @@
       <SmartItem
         v-if="team.myRole === 'OWNER'"
         icon="delete"
+        color="red"
         :label="$t('delete')"
         @click.native="
           deleteTeam
diff --git a/pages/graphql.vue b/pages/graphql.vue
index a9f4d9c03..38834d125 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -251,6 +251,7 @@
                               : 'check_box_outline_blank'
                             : 'check_box'
                         "
+                        color="green"
                         @click.native="
                           $store.commit('setActiveGQLHeader', {
                             index,
@@ -266,6 +267,7 @@
                         v-tippy="{ theme: 'tooltip' }"
                         :title="$t('delete')"
                         icon="delete"
+                        color="red"
                         @click.native="removeRequestHeader(index)"
                       />
                     </div>
diff --git a/pages/index.vue b/pages/index.vue
index 553f2c44a..f29bfa4ff 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -326,6 +326,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
               icon="delete"
+              color="red"
             />
           </div>
         </div>