diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index d6e294719..d07834e31 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -162,12 +162,24 @@ hr {
   @apply text-lg;
 }
 
-input {
+.input,
+.select {
+  @apply flex;
+  @apply w-full;
+  @apply px-4;
+  @apply py-2;
+  @apply bg-primaryLight;
   @apply truncate;
+  @apply rounded-lg;
+  @apply font-semibold;
+  @apply focus:outline-none;
+  @apply focus-visible:ring;
+  @apply focus-visible:ring-inset;
+  @apply focus-visible:ring-accent;
 }
 
-input[type="file"],
-input[type="radio"],
+.input[type="file"],
+.input[type="radio"],
 #installPWA {
   @apply hidden;
 }
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 9cee6d2eb..4ac55eab9 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -6,27 +6,27 @@
 
 @mixin darkTheme {
   // Background color
-  --primary-color: rgba(32, 33, 36, 1);
+  --primary-color: theme("colors.dark.800");
   // Light Background color
-  --primary-light-color: rgba(255, 255, 255, 0.04);
+  --primary-light-color: theme("colors.dark.700");
   // Dark Background color
-  --primary-dark-color: rgba(12, 12, 12, 1);
+  --primary-dark-color: theme("colors.dark.600");
   // Text color
-  --secondary-color: rgba(255, 255, 255, 0.9);
+  --secondary-color: theme("colors.gray.400");
   // Light Text color
-  --secondary-light-color: rgba(255, 255, 255, 0.5);
+  --secondary-light-color: theme("colors.gray.500");
   // Dark Text color
-  --secondary-dark-color: rgba(0, 0, 0, 0.5);
+  --secondary-dark-color: theme("colors.white");
   // Border color
-  --divider-color: rgba(255, 255, 255, 0.05);
+  --divider-color: theme("colors.dark.500");
   // Light Border color
-  --divider-light-color: rgba(255, 255, 255, 0.05);
+  --divider-light-color: theme("colors.dark.400");
   // Dark Border color
-  --divider-dark-color: rgba(255, 255, 255, 0.05);
+  --divider-dark-color: theme("colors.dark.700");
   // Error color
-  --error-color: rgba(255, 255, 255, 0.05);
+  --error-color: theme("colors.dark.600");
   // Tooltip color
-  --tooltip-color: rgba(48, 48, 48, 1);
+  --tooltip-color: theme("colors.dark.700");
   // Editor theme
   --editor-theme: "twilight";
 }
@@ -102,11 +102,11 @@
 
 @mixin greenTheme {
   // Accent color
-  --accent-color: rgba(73, 204, 104, 1);
+  --accent-color: rgb(97, 207, 123);
   // Light Accent color
   --accent-light-color: rgba(73, 204, 104, 1);
   // Dark Accent color
-  --accent-dark-color: rgba(64, 182, 91, 1);
+  --accent-dark-color: rgb(0, 71, 17);
   // Gradient from
   --gradient-from-color: theme("colors.green.200");
   // Gradient via
@@ -226,15 +226,15 @@
   @include greenTheme;
 }
 
-:root.light-mode {
+:root.light {
   @include lightTheme;
 }
 
-:root.dark-mode {
+:root.dark {
   @include darkTheme;
 }
 
-:root.black-mode {
+:root.black {
   @include blackTheme;
 }
 
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index ba3c7df70..b11fb57d1 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -7,61 +7,30 @@
       </div>
     </template>
     <template #body>
-      <div class="p-2">
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd>
-          +
-          <kbd>G</kbd>
-          <label>{{ $t("send_request") }}</label>
-        </div>
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd
-          >+<kbd>S</kbd>
-          <label>{{ $t("save_to_collections") }}</label>
-        </div>
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd
-          >+<kbd>K</kbd>
-          <label>{{ $t("copy_request_link") }}</label>
-        </div>
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd
-          >+<kbd>I</kbd>
-          <label>{{ $t("reset_request") }}</label>
-        </div>
-      </div>
-      <hr />
-      <div class="p-2">
-        <div>
-          <kbd>Alt</kbd>+<kbd>▲</kbd>
-          <label>{{ $t("select_next_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>▼</kbd>
-          <label>{{ $t("select_previous_method") }}</label>
-        </div>
-      </div>
-      <hr />
-      <div class="p-2">
-        <div>
-          <kbd>Alt</kbd>+<kbd>G</kbd>
-          <label>{{ $t("select_get_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>H</kbd>
-          <label>{{ $t("select_head_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>P</kbd>
-          <label>{{ $t("select_post_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>U</kbd>
-          <label>{{ $t("select_put_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>X</kbd>
-          <label>{{ $t("select_delete_method") }}</label>
+      <div class="px-2">
+        <div
+          v-for="(shortcut, index) in shortcuts"
+          :key="`shortcut-${index}`"
+          class="flex items-center"
+        >
+          <kbd
+            v-for="(key, keyIndex) in shortcut.keys"
+            :key="`key-${keyIndex}`"
+            class="
+              py-2
+              px-4
+              m-1
+              text-xs
+              border border-divider
+              rounded-lg
+              font-bold
+            "
+          >
+            {{ key }}
+          </kbd>
+          <span class="flex text-xs ml-4">
+            {{ shortcut.label }}
+          </span>
         </div>
       </div>
     </template>
@@ -75,6 +44,56 @@ export default {
   props: {
     show: Boolean,
   },
+  data() {
+    return {
+      shortcuts: [
+        {
+          keys: [this.getSpecialKey(), "G"],
+          label: this.$t("send_request"),
+        },
+        {
+          keys: [this.getSpecialKey(), "S"],
+          label: this.$t("save_to_collections"),
+        },
+        {
+          keys: [this.getSpecialKey(), "K"],
+          label: this.$t("copy_request_link"),
+        },
+        {
+          keys: [this.getSpecialKey(), "I"],
+          label: this.$t("reset_request"),
+        },
+        {
+          keys: ["Alt", "▲"],
+          label: this.$t("select_next_method"),
+        },
+        {
+          keys: ["Alt", "▼"],
+          label: this.$t("select_previous_method"),
+        },
+        {
+          keys: ["Alt", "G"],
+          label: this.$t("select_get_method"),
+        },
+        {
+          keys: ["Alt", "H"],
+          label: this.$t("select_head_method"),
+        },
+        {
+          keys: ["Alt", "P"],
+          label: this.$t("select_post_method"),
+        },
+        {
+          keys: ["Alt", "U"],
+          label: this.$t("select_put_method"),
+        },
+        {
+          keys: ["Alt", "X"],
+          label: this.$t("select_delete_method"),
+        },
+      ],
+    }
+  },
   methods: {
     getSpecialKey: getPlatformSpecialKey,
     hideModal() {
@@ -83,14 +102,3 @@ export default {
   },
 }
 </script>
-
-<style scoped lang="scss">
-kbd {
-  @apply inline-flex;
-  @apply resize-none;
-  @apply m-2;
-  @apply py-2 px-4;
-  @apply rounded-lg;
-  @apply text-sm;
-}
-</style>
diff --git a/components/button/Primary.vue b/components/button/Primary.vue
index 6d28c38f7..3c5236bac 100644
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -15,7 +15,7 @@
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
-        : `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
+        : `text-white dark:text-accentDark bg-accent hover:bg-accentDark focus:bg-accentDark`,
       label ? 'px-4' : 'px-2',
       rounded ? 'rounded-full' : 'rounded-lg',
       { 'opacity-50 cursor-not-allowed': disabled },
diff --git a/components/collections/Add.vue b/components/collections/Add.vue
index 545834098..836c556a0 100644
--- a/components/collections/Add.vue
+++ b/components/collections/Add.vue
@@ -2,26 +2,27 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("new_collection") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <label for="selectLabelAdd">{{ $t("label") }}</label>
-      <input
-        id="selectLabelAdd"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="$t('my_new_collection')"
-        @keyup.enter="addNewCollection"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelAdd" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelAdd"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="$t('my_new_collection')"
+          @keyup.enter="addNewCollection"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue
index d961cad96..fc187228b 100644
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -7,21 +7,27 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelAddFolder">{{ $t("label") }}</label>
-      <input
-        id="selectLabelAddFolder"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="$t('my_new_folder')"
-        @keyup.enter="addFolder"
-      />
+      <div class="px-2 flex flex-col">
+        <label
+          for="selectLabelAddFolder"
+          class="px-4 font-semibold pb-4 text-xs"
+        >
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelAddFolder"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="$t('my_new_folder')"
+          @keyup.enter="addFolder"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="addFolder" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue
index ef45bb0cb..64fc8213f 100644
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -7,21 +7,24 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelEdit">{{ $t("label") }}</label>
-      <input
-        id="selectLabelEdit"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="placeholderCollName"
-        @keyup.enter="saveCollection"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelEdit" class="px-4 font-semibold pb-4 text-xs">{{
+          $t("label")
+        }}</label>
+        <input
+          id="selectLabelEdit"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="placeholderCollName"
+          @keyup.enter="saveCollection"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue
index 62dfeeaaf..3964a2c4c 100644
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -7,20 +7,25 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelEditFolder">{{ $t("label") }}</label>
-      <input
-        id="selectLabelEditFolder"
-        v-model="name"
-        class="input"
-        type="text"
-        @keyup.enter="editFolder"
-      />
+      <div class="px-2 flex flex-col">
+        <label
+          for="selectLabelEditFolder"
+          class="px-4 font-semibold pb-4 text-xs"
+          >{{ $t("label") }}</label
+        >
+        <input
+          id="selectLabelEditFolder"
+          v-model="name"
+          class="input"
+          type="text"
+          @keyup.enter="editFolder"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="editFolder" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue
index 6b332cf79..d47a60903 100644
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -7,21 +7,24 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelEditReq">{{ $t("label") }}</label>
-      <input
-        id="selectLabelEditReq"
-        v-model="requestUpdateData.name"
-        class="input"
-        type="text"
-        :placeholder="placeholderReqName"
-        @keyup.enter="saveRequest"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelEditReq" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}</label
+        >
+        <input
+          id="selectLabelEditReq"
+          v-model="requestUpdateData.name"
+          class="input"
+          type="text"
+          :placeholder="placeholderReqName"
+          @keyup.enter="saveRequest"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 1e4e53868..85afeac71 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -2,7 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
-      <div>
+      <div class="flex">
         <ButtonSecondary
           v-if="mode == 'import_from_my_collections'"
           v-tippy="{ theme: 'tooltip' }"
@@ -67,8 +67,8 @@
       </div>
     </template>
     <template #body>
-      <div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start">
-        <ButtonSecondary
+      <div v-if="mode == 'import_export'" class="flex flex-col space-y-2">
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('replace_current')"
           icon="folder_special"
@@ -83,7 +83,7 @@
           accept="application/json"
           @change="replaceWithJSON"
         />
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
           icon="create_new_folder"
@@ -98,7 +98,7 @@
           accept="application/json"
           @change="importFromJSON"
         />
-        <ButtonSecondary
+        <SmartItem
           v-if="collectionsType.type == 'team-collections'"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
@@ -106,7 +106,7 @@
           :label="$t('import_from_my_collections')"
           @click.native="mode = 'import_from_my_collections'"
         />
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
           icon="drive_file_move"
@@ -114,8 +114,11 @@
           @click.native="exportJSON"
         />
       </div>
-      <div v-if="mode == 'import_from_my_collections'">
-        <span class="select-wrapper">
+      <div
+        v-if="mode == 'import_from_my_collections'"
+        class="flex px-2 flex-col"
+      >
+        <div class="select-wrapper">
           <select
             type="text"
             class="select"
@@ -143,15 +146,13 @@
               {{ collection.name }}
             </option>
           </select>
-        </span>
+        </div>
       </div>
     </template>
     <template #footer>
       <div v-if="mode == 'import_from_my_collections'">
-        <span></span>
         <span>
-          <ButtonSecondary
-            class="m-2"
+          <ButtonPrimary
             :disabled="mySelectedCollectionID == undefined"
             icon="create_new_folder"
             :label="$t('import')"
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index 0c8ff49e6..09b8aec9c 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -2,45 +2,45 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("save_request_as") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <label for="selectLabelSaveReq">{{ $t("token_req_name") }}</label>
-      <input
-        id="selectLabelSaveReq"
-        v-model="requestData.name"
-        class="input"
-        type="text"
-        @keyup.enter="saveRequestAs"
-      />
-      <label>Select location</label>
-      <!-- <input class="input" readonly :value="path" /> -->
-
-      <CollectionsGraphql
-        v-if="mode === 'graphql'"
-        :doc="false"
-        :show-coll-actions="false"
-        :picked="picked"
-        :saving-mode="true"
-        @select="onSelect"
-      />
-
-      <Collections
-        v-else
-        :picked="picked"
-        :save-request="true"
-        @select="onSelect"
-        @update-collection="collectionsType.type = $event"
-        @update-coll-type="onUpdateCollType"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelSaveReq" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("token_req_name") }}</label
+        >
+        <input
+          id="selectLabelSaveReq"
+          v-model="requestData.name"
+          class="input"
+          type="text"
+          @keyup.enter="saveRequestAs"
+        />
+        <label class="px-4 pt-4 font-semibold pb-4 text-xs">
+          Select Location
+        </label>
+        <CollectionsGraphql
+          v-if="mode === 'graphql'"
+          :doc="false"
+          :show-coll-actions="false"
+          :picked="picked"
+          :saving-mode="true"
+          @select="onSelect"
+        />
+        <Collections
+          v-else
+          :picked="picked"
+          :save-request="true"
+          @select="onSelect"
+          @update-collection="collectionsType.type = $event"
+          @update-coll-type="onUpdateCollType"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="saveRequestAs" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue
index c55ee5ab5..086ca9ad8 100644
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -2,26 +2,27 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("new_collection") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <label for="selectLabelGqlAdd">{{ $t("label") }}</label>
-      <input
-        id="selectLabelGqlAdd"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="$t('my_new_collection')"
-        @keyup.enter="addNewCollection"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelGqlAdd" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelGqlAdd"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="$t('my_new_collection')"
+          @keyup.enter="addNewCollection"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/collections/graphql/AddFolder.vue b/components/collections/graphql/AddFolder.vue
index fa5376369..6661b9ec9 100644
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -7,21 +7,27 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlAddFolder">{{ $t("label") }}</label>
-      <input
-        id="selectLabelGqlAddFolder"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="$t('my_new_folder')"
-        @keyup.enter="addFolder"
-      />
+      <div class="px-2 flex flex-col">
+        <label
+          for="selectLabelGqlAddFolder"
+          class="px-4 font-semibold pb-4 text-xs"
+        >
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelGqlAddFolder"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="$t('my_new_folder')"
+          @keyup.enter="addFolder"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="addFolder" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index 6d7c2a793..c5359dc55 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -35,6 +35,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         @click="toggleShowChildren()"
       >
diff --git a/components/collections/graphql/Edit.vue b/components/collections/graphql/Edit.vue
index f57fe2a32..5a8c5ba61 100644
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -7,21 +7,24 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlEdit">{{ $t("label") }}</label>
-      <input
-        id="selectLabelGqlEdit"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="editingCollection.name"
-        @keyup.enter="saveCollection"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelGqlEdit" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelGqlEdit"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="editingCollection.name"
+          @keyup.enter="saveCollection"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/collections/graphql/EditFolder.vue b/components/collections/graphql/EditFolder.vue
index 60e474a79..5911bc0d0 100644
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -7,21 +7,27 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlEditFolder">{{ $t("label") }}</label>
-      <input
-        id="selectLabelGqlEditFolder"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="folder.name"
-        @keyup.enter="editFolder"
-      />
+      <div class="px-2 flex flex-col">
+        <label
+          for="selectLabelGqlEditFolder"
+          class="px-4 font-semibold pb-4 text-xs"
+        >
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelGqlEditFolder"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="folder.name"
+          @keyup.enter="editFolder"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="editFolder" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/collections/graphql/EditRequest.vue b/components/collections/graphql/EditRequest.vue
index 7c7fecdc4..deba13085 100644
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -7,21 +7,27 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlEditReq">{{ $t("label") }}</label>
-      <input
-        id="selectLabelGqlEditReq"
-        v-model="requestUpdateData.name"
-        class="input"
-        type="text"
-        :placeholder="request.name"
-        @keyup.enter="saveRequest"
-      />
+      <div class="px-2 flex flex-col">
+        <label
+          for="selectLabelGqlEditReq"
+          class="px-4 font-semibold pb-4 text-xs"
+        >
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelGqlEditReq"
+          v-model="requestUpdateData.name"
+          class="input"
+          type="text"
+          :placeholder="request.name"
+          @keyup.enter="saveRequest"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index 00744c20b..ced1caf3c 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -35,6 +35,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         @click="toggleShowChildren()"
       >
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index 32a69d5a1..deb94a50b 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -2,7 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
-      <div>
+      <div class="flex">
         <tippy
           ref="options"
           interactive
@@ -54,8 +54,8 @@
       </div>
     </template>
     <template #body>
-      <div class="flex flex-col items-start p-2">
-        <ButtonSecondary
+      <div class="flex flex-col space-y-2">
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('replace_current')"
           icon="folder_special"
@@ -70,7 +70,7 @@
           accept="application/json"
           @change="replaceWithJSON"
         />
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
           icon="create_new_folder"
@@ -85,7 +85,7 @@
           accept="application/json"
           @change="importFromJSON"
         />
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
           icon="drive_file_move"
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index 695d8d5c7..ac0a64531 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -36,6 +36,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         @click="!doc ? selectRequest() : {}"
       >
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index a3cb3be9d..fb5080461 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -35,6 +35,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         @click="toggleShowChildren()"
       >
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 3784edf6f..5d6635943 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -35,6 +35,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         @click="toggleShowChildren()"
       >
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index 746c46e32..122436ff8 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -44,6 +44,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         @click="!doc ? selectRequest() : {}"
       >
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 30400f072..f436d58de 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -27,6 +27,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         @click="toggleShowChildren()"
       >
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index c72360e59..cf28f8744 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -27,6 +27,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         @click="toggleShowChildren()"
       >
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index 21bd65441..5f0c0297a 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -37,6 +37,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         @click="!doc ? selectRequest() : {}"
       >
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index d43a0ba19..34d4f4332 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -7,21 +7,24 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelEnvAdd">{{ $t("label") }}</label>
-      <input
-        id="selectLabelEnvAdd"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="$t('my_new_environment')"
-        @keyup.enter="addNewEnvironment"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelEnvAdd" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelEnvAdd"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="$t('my_new_environment')"
+          @keyup.enter="addNewEnvironment"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="addNewEnvironment" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index e2522afc8..12d61e782 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -7,82 +7,90 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelEnvEdit">{{ $t("label") }}</label>
-      <input
-        id="selectLabelEnvEdit"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="editingEnvironment.name"
-        @keyup.enter="saveEnvironment"
-      />
-      <div class="flex flex-1">
-        <label for="variableList">{{ $t("env_variable_list") }}</label>
-        <div>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('clear')"
-            icon="clearIcon"
-            @click.native="clearContent($event)"
-          />
-        </div>
-      </div>
-      <ul
-        v-for="(variable, index) in vars"
-        :key="index"
-        class="
-          border-b border-dashed
-          divide-y
-          md:divide-x
-          border-divider
-          divide-dashed divide-divider
-          md:divide-y-0
-        "
-        :class="{ 'border-t': index == 0 }"
-      >
-        <li>
-          <input
-            v-model="variable.key"
-            class="input"
-            :placeholder="$t('variable_count', { count: index + 1 })"
-            :name="'param' + index"
-          />
-        </li>
-        <li>
-          <input
-            v-model="variable.value"
-            class="input"
-            :placeholder="$t('value_count', { count: index + 1 })"
-            :name="'value' + index"
-          />
-        </li>
-        <div>
-          <li>
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelEnvEdit" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelEnvEdit"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="editingEnvironment.name"
+          @keyup.enter="saveEnvironment"
+        />
+        <div class="flex justify-between items-center flex-1">
+          <label
+            for="variableList"
+            class="px-4 pt-4 font-semibold pb-4 text-xs"
+          >
+            {{ $t("env_variable_list") }}
+          </label>
+          <div>
             <ButtonSecondary
-              id="variable"
               v-tippy="{ theme: 'tooltip' }"
-              :title="$t('delete')"
-              icon="delete"
-              @click.native="removeEnvironmentVariable(index)"
+              :title="$t('clear')"
+              :icon="clearIcon"
+              @click.native="clearContent($event)"
+            />
+          </div>
+        </div>
+        <ul
+          v-for="(variable, index) in vars"
+          :key="index"
+          class="
+            border-b border-dashed
+            divide-y
+            md:divide-x
+            border-divider
+            divide-dashed divide-divider
+            md:divide-y-0
+          "
+          :class="{ 'border-t': index == 0 }"
+        >
+          <li>
+            <input
+              v-model="variable.key"
+              class="input"
+              :placeholder="$t('variable_count', { count: index + 1 })"
+              :name="'param' + index"
             />
           </li>
-        </div>
-      </ul>
-      <ul>
-        <li>
-          <ButtonSecondary
-            icon="add"
-            :label="$t('add_new')"
-            @click.native="addEnvironmentVariable"
-          />
-        </li>
-      </ul>
+          <li>
+            <input
+              v-model="variable.value"
+              class="input"
+              :placeholder="$t('value_count', { count: index + 1 })"
+              :name="'value' + index"
+            />
+          </li>
+          <div>
+            <li>
+              <ButtonSecondary
+                id="variable"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('delete')"
+                icon="delete"
+                @click.native="removeEnvironmentVariable(index)"
+              />
+            </li>
+          </div>
+        </ul>
+        <ul>
+          <li>
+            <ButtonSecondary
+              icon="add"
+              :label="$t('add_new')"
+              @click.native="addEnvironmentVariable"
+            />
+          </li>
+        </ul>
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="saveEnvironment" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index 4d81a8ecc..a37a01b39 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -24,6 +24,7 @@
         text-xs
         group-hover:text-secondaryDark
         transition
+        font-semibold
       "
       @click="$emit('edit-environment')"
     >
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 499aafbbf..032db0776 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -4,7 +4,7 @@
       <h3 class="heading">
         {{ $t("import_export") }} {{ $t("environments") }}
       </h3>
-      <div>
+      <div class="flex">
         <tippy
           ref="options"
           interactive
@@ -56,8 +56,8 @@
       </div>
     </template>
     <template #body>
-      <div class="flex flex-col items-start p-2">
-        <ButtonSecondary
+      <div class="flex flex-col space-y-2">
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('replace_current')"
           icon="folder_special"
@@ -72,7 +72,7 @@
           accept="application/json"
           @change="replaceWithJSON"
         />
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
           icon="create_new_folder"
@@ -87,7 +87,7 @@
           accept="application/json"
           @change="importFromJSON"
         />
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
           icon="drive_file_move"
diff --git a/components/graphql/Field.vue b/components/graphql/Field.vue
index 6919c3480..9015e4e86 100644
--- a/components/graphql/Field.vue
+++ b/components/graphql/Field.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="font-bold text-xs field-title"
+      class="font-semibold text-xs field-title"
       :class="{ 'field-highlighted': isHighlighted }"
     >
       {{ fieldName }}
@@ -38,7 +38,7 @@
         text-xs text-black
         bg-yellow-200
         rounded
-        font-bold
+        font-semibold
         field-deprecated
       "
     >
@@ -48,7 +48,7 @@
       <h5 class="my-2 text-xs">Arguments:</h5>
       <div class="pl-4 border-l-2 border-divider">
         <div v-for="(field, index) in fieldArgs" :key="index">
-          <span class="font-bold text-xs">
+          <span class="font-semibold text-xs">
             {{ field.name }}:
             <GraphqlTypeLink
               :gql-type="field.type"
diff --git a/components/graphql/Type.vue b/components/graphql/Type.vue
index 0e2484559..3ed256bba 100644
--- a/components/graphql/Type.vue
+++ b/components/graphql/Type.vue
@@ -1,7 +1,7 @@
 <template>
   <div :id="`type_${gqlType.name}`" class="p-4">
     <div
-      class="font-bold text-xs type-title"
+      class="font-semibold text-xs type-title"
       :class="{ 'text-accent': isHighlighted }"
     >
       <span v-if="isInput" class="text-accent">input </span>
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index e9996e9a7..4b83bf2ef 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -12,6 +12,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         data-testid="restore_history_entry"
         @click="$emit('use-entry')"
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index 271639071..569563b22 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -28,6 +28,7 @@
         text-xs
         group-hover:text-secondaryDark
         transition
+        font-semibold
       "
       data-testid="restore_history_entry"
       @click="$emit('use-entry')"
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index ed0e93e4d..26d0656f5 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -2,49 +2,61 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("generate_code") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <label for="requestType">{{ $t("choose_language") }}</label>
-      <span class="select-wrapper">
-        <tippy
-          ref="options"
-          interactive
-          tabindex="-1"
-          trigger="click"
-          theme="popover"
-          arrow
-        >
-          <template #trigger>
-            <pre v-if="requestType">{{
-              codegens.find((x) => x.id === requestType).name
-            }}</pre>
-            <input
-              v-else
-              id="requestType"
-              v-model="requestType"
-              :placeholder="$t('choose_language')"
-              class="input cursor-pointer"
-              readonly
-              autofocus
-            />
-          </template>
-          <SmartItem
-            v-for="gen in codegens"
-            :key="gen.id"
-            :label="gen.name"
-            @click.native="
-              requestType = gen.id
-              $refs.options.tippy().hide()
-            "
-          />
-        </tippy>
-      </span>
-      <div class="flex flex-1">
-        <label for="generatedCode">{{ $t("generated_code") }}</label>
-        <div>
+      <div class="px-2 flex flex-col">
+        <label for="requestType" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("choose_language") }}
+        </label>
+        <div class="flex flex-1">
+          <span class="select-wrapper">
+            <tippy
+              ref="options"
+              interactive
+              tabindex="-1"
+              trigger="click"
+              theme="popover"
+              arrow
+            >
+              <template #trigger>
+                <span
+                  class="
+                    flex
+                    w-full
+                    px-4
+                    text-xs
+                    py-3
+                    rounded-lg
+                    font-semibold
+                    focus:outline-none
+                    border-b border-dividerLight
+                    bg-primaryLight
+                    cursor-pointer
+                  "
+                >
+                  {{ codegens.find((x) => x.id === requestType).name }}
+                </span>
+              </template>
+              <SmartItem
+                v-for="gen in codegens"
+                :key="gen.id"
+                :label="gen.name"
+                @click.native="
+                  requestType = gen.id
+                  $refs.options.tippy().hide()
+                "
+              />
+            </tippy>
+          </span>
+        </div>
+        <div class="flex justify-between flex-1">
+          <label
+            for="generatedCode"
+            class="px-4 pt-4 font-semibold pb-4 text-xs"
+          >
+            {{ $t("generated_code") }}
+          </label>
           <ButtonSecondary
             ref="copyRequestCode"
             v-tippy="{ theme: 'tooltip' }"
@@ -53,23 +65,23 @@
             @click.native="copyRequestCode"
           />
         </div>
+        <SmartAceEditor
+          v-if="requestType"
+          ref="generatedCode"
+          :value="requestCode"
+          :lang="codegens.find((x) => x.id === requestType).language"
+          :options="{
+            maxLines: '10',
+            minLines: '10',
+            fontSize: '15px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+          styles="rounded-lg"
+        />
       </div>
-      <SmartAceEditor
-        v-if="requestType"
-        ref="generatedCode"
-        :value="requestCode"
-        :lang="codegens.find((x) => x.id === requestType).language"
-        :options="{
-          maxLines: '10',
-          minLines: '10',
-          fontSize: '15px',
-          autoScrollEditorIntoView: true,
-          readOnly: true,
-          showPrintMargin: false,
-          useWorker: false,
-        }"
-        styles="rounded-b-lg"
-      />
     </template>
   </SmartModal>
 </template>
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index e9edfe54f..281ce3475 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -16,10 +16,9 @@
       ></textarea>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('import')" @click.native="handleImport" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/smart/ConfirmModal.vue b/components/smart/ConfirmModal.vue
index 01f5da9d1..1ed6201e8 100644
--- a/components/smart/ConfirmModal.vue
+++ b/components/smart/ConfirmModal.vue
@@ -7,13 +7,16 @@
       </div>
     </template>
     <template #body>
-      <label>{{ title }}</label>
+      <div class="px-2 flex flex-col">
+        <label class="font-semibold text-xs">
+          {{ title }}
+        </label>
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="no" @click.native="hideModal" />
         <ButtonPrimary :label="yes" @click.native="resolve" />
+        <ButtonSecondary :label="no" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 5d557287e..e90cf2805 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -30,23 +30,20 @@
           bg-primary
           rounded-lg
           shadow-xl
-          max-w-md
+          max-w-md max-h-lg
         "
       >
-        <div class="pl-2">
-          <div class="flex items-center justify-between">
-            <slot name="header"></slot>
-          </div>
+        <div class="flex pl-2 items-center justify-between">
+          <slot name="header"></slot>
         </div>
-        <div class="my-4 overflow-auto max-h-xl">
-          <div class="flex flex-col">
-            <slot name="body"></slot>
-          </div>
+        <div class="my-4 overflow-auto flex flex-col">
+          <slot name="body"></slot>
         </div>
-        <div v-if="hasFooterSlot" class="p-2">
-          <div class="flex flex-1">
-            <slot name="footer"></slot>
-          </div>
+        <div
+          v-if="hasFooterSlot"
+          class="p-2 flex flex-1 items-center justify-between"
+        >
+          <slot name="footer"></slot>
         </div>
       </div>
     </div>
@@ -138,46 +135,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.modal-backdrop {
-  @apply fixed;
-  @apply inset-0;
-  @apply z-50;
-  @apply w-full;
-  @apply h-full;
-  @apply flex;
-  @apply items-center;
-  @apply justify-center;
-  @apply transition;
-
-  @apply bg-primaryLight;
-}
-
-.modal-container {
-  @apply relative;
-  @apply flex flex-1 flex-col;
-  @apply m-2;
-  @apply p-4;
-  @apply transition;
-  @apply bg-primary;
-  @apply rounded-lg;
-  @apply shadow-xl;
-  @apply max-w-md;
-}
-
-.modal-header {
-  @apply pl-2;
-}
-
-.modal-body {
-  @apply my-4;
-  @apply overflow-auto;
-  @apply max-h-xl;
-}
-
-.modal-footer {
-  @apply p-2;
-}
-
 .modal-enter,
 .modal-leave-active {
   @apply opacity-0;
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index 1f643ea18..666955db8 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -5,28 +5,24 @@
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <ul>
-        <li>
-          <label>{{ $t("label") }}</label>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <input
-            v-model="name"
-            class="input"
-            type="text"
-            :placeholder="$t('my_new_team')"
-            @keyup.enter="addNewTeam"
-          />
-        </li>
-      </ul>
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelTeamAdd" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelTeamAdd"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="$t('my_new_team')"
+          @keyup.enter="addNewTeam"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="addNewTeam" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 01140576f..90d23b411 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -5,208 +5,200 @@
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <ul>
-        <li>
-          <div class="flex flex-1">
-            <label>{{ $t("label") }}</label>
-          </div>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <input
-            v-model="name"
-            class="input"
-            type="text"
-            :placeholder="editingTeam.name"
-            @keyup.enter="saveTeam"
-          />
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <div class="flex flex-1">
-            <label for="memberList">{{ $t("team_member_list") }}</label>
-            <div></div>
-          </div>
-        </li>
-      </ul>
-      <ul
-        v-for="(member, index) in members"
-        :key="`new-${index}`"
-        class="
-          border-b border-dashed
-          divide-y
-          md:divide-x
-          border-divider
-          divide-dashed divide-divider
-          md:divide-y-0
-        "
-        :class="{ 'border-t': index == 0 }"
-      >
-        <li>
-          <input
-            class="input"
-            :placeholder="$t('email')"
-            :name="'param' + index"
-            :value="member.user.email"
-            readonly
-          />
-        </li>
-        <li>
-          <span class="select-wrapper">
-            <tippy
-              ref="options"
-              interactive
-              tabindex="-1"
-              trigger="click"
-              theme="popover"
-              arrow
-            >
-              <template #trigger>
-                <input
-                  class="input"
-                  :placeholder="$t('permissions')"
-                  :name="'value' + index"
-                  :value="
-                    typeof member.role === 'string'
-                      ? member.role
-                      : JSON.stringify(member.role)
-                  "
-                  readonly
-                />
-              </template>
-              <SmartItem
-                label="OWNER"
-                @click.native="
-                  updateRole(index, 'OWNER')
-                  $refs.options.tippy().hide()
-                "
-              />
-              <SmartItem
-                label="EDITOR"
-                @click.native="
-                  updateRole(index, 'EDITOR')
-                  $refs.options.tippy().hide()
-                "
-              />
-              <SmartItem
-                label="VIEWER"
-                @click.native="
-                  updateRole(index, 'VIEWER')
-                  $refs.options.tippy().hide()
-                "
-              />
-            </tippy>
-          </span>
-        </li>
-        <div>
+      <div class="px-2 flex flex-col">
+        <label
+          for="selectLabelTeamEdit"
+          class="px-4 font-semibold pb-4 text-xs"
+        >
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelTeamEdit"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="editingTeam.name"
+          @keyup.enter="saveTeam"
+        />
+        <label for="memberList" class="px-4 pt-4 font-semibold pb-4 text-xs">
+          {{ $t("team_member_list") }}
+        </label>
+        <ul
+          v-for="(member, index) in members"
+          :key="`new-${index}`"
+          class="
+            border-b border-dashed
+            divide-y
+            md:divide-x
+            border-divider
+            divide-dashed divide-divider
+            md:divide-y-0
+          "
+          :class="{ 'border-t': index == 0 }"
+        >
           <li>
-            <ButtonSecondary
-              id="member"
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('delete')"
-              icon="delete"
-              @click.native="removeExistingTeamMember(member.user.uid)"
+            <input
+              class="input"
+              :placeholder="$t('email')"
+              :name="'param' + index"
+              :value="member.user.email"
+              readonly
             />
           </li>
-        </div>
-      </ul>
-      <ul
-        v-for="(member, index) in newMembers"
-        :key="index"
-        class="
-          border-b border-dashed
-          divide-y
-          md:divide-x
-          border-divider
-          divide-dashed divide-divider
-          md:divide-y-0
-        "
-      >
-        <li>
-          <input
-            v-model="member.key"
-            class="input"
-            :placeholder="$t('email')"
-            :name="'param' + index"
-            autofocus
-          />
-        </li>
-        <li>
-          <span class="select-wrapper">
-            <tippy
-              ref="memberOptions"
-              interactive
-              tabindex="-1"
-              trigger="click"
-              theme="popover"
-              arrow
-            >
-              <template #trigger>
-                <input
-                  class="input"
-                  :placeholder="$t('permissions')"
-                  :name="'value' + index"
-                  :value="
-                    typeof member.value === 'string'
-                      ? member.value
-                      : JSON.stringify(member.value)
-                  "
-                  readonly
-                />
-              </template>
-              <SmartItem
-                label="OWNER"
-                @click.native="
-                  member.value = 'OWNER'
-                  $refs.options.tippy().hide()
-                "
-              />
-              <SmartItem
-                label="EDITOR"
-                @click.native="
-                  member.value = 'EDITOR'
-                  $refs.options.tippy().hide()
-                "
-              />
-              <SmartItem
-                label="VIEWER"
-                @click.native="
-                  member.value = 'VIEWER'
-                  $refs.options.tippy().hide()
-                "
-              />
-            </tippy>
-          </span>
-        </li>
-        <div>
           <li>
-            <ButtonSecondary
-              id="member"
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('delete')"
-              icon="delete"
-              @click.native="removeTeamMember(index)"
+            <span class="select-wrapper">
+              <tippy
+                ref="options"
+                interactive
+                tabindex="-1"
+                trigger="click"
+                theme="popover"
+                arrow
+              >
+                <template #trigger>
+                  <input
+                    class="input"
+                    :placeholder="$t('permissions')"
+                    :name="'value' + index"
+                    :value="
+                      typeof member.role === 'string'
+                        ? member.role
+                        : JSON.stringify(member.role)
+                    "
+                    readonly
+                  />
+                </template>
+                <SmartItem
+                  label="OWNER"
+                  @click.native="
+                    updateRole(index, 'OWNER')
+                    $refs.options.tippy().hide()
+                  "
+                />
+                <SmartItem
+                  label="EDITOR"
+                  @click.native="
+                    updateRole(index, 'EDITOR')
+                    $refs.options.tippy().hide()
+                  "
+                />
+                <SmartItem
+                  label="VIEWER"
+                  @click.native="
+                    updateRole(index, 'VIEWER')
+                    $refs.options.tippy().hide()
+                  "
+                />
+              </tippy>
+            </span>
+          </li>
+          <div>
+            <li>
+              <ButtonSecondary
+                id="member"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('delete')"
+                icon="delete"
+                @click.native="removeExistingTeamMember(member.user.uid)"
+              />
+            </li>
+          </div>
+        </ul>
+        <ul
+          v-for="(member, index) in newMembers"
+          :key="index"
+          class="
+            border-b border-dashed
+            divide-y
+            md:divide-x
+            border-divider
+            divide-dashed divide-divider
+            md:divide-y-0
+          "
+        >
+          <li>
+            <input
+              v-model="member.key"
+              class="input"
+              :placeholder="$t('email')"
+              :name="'param' + index"
+              autofocus
             />
           </li>
-        </div>
-      </ul>
-      <ul>
-        <li>
-          <ButtonSecondary
-            icon="add"
-            :label="$t('add_new')"
-            @click.native="addTeamMember"
-          />
-        </li>
-      </ul>
+          <li>
+            <span class="select-wrapper">
+              <tippy
+                ref="memberOptions"
+                interactive
+                tabindex="-1"
+                trigger="click"
+                theme="popover"
+                arrow
+              >
+                <template #trigger>
+                  <input
+                    class="input"
+                    :placeholder="$t('permissions')"
+                    :name="'value' + index"
+                    :value="
+                      typeof member.value === 'string'
+                        ? member.value
+                        : JSON.stringify(member.value)
+                    "
+                    readonly
+                  />
+                </template>
+                <SmartItem
+                  label="OWNER"
+                  @click.native="
+                    member.value = 'OWNER'
+                    $refs.options.tippy().hide()
+                  "
+                />
+                <SmartItem
+                  label="EDITOR"
+                  @click.native="
+                    member.value = 'EDITOR'
+                    $refs.options.tippy().hide()
+                  "
+                />
+                <SmartItem
+                  label="VIEWER"
+                  @click.native="
+                    member.value = 'VIEWER'
+                    $refs.options.tippy().hide()
+                  "
+                />
+              </tippy>
+            </span>
+          </li>
+          <div>
+            <li>
+              <ButtonSecondary
+                id="member"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('delete')"
+                icon="delete"
+                @click.native="removeTeamMember(index)"
+              />
+            </li>
+          </div>
+        </ul>
+        <ul>
+          <li>
+            <ButtonSecondary
+              icon="add"
+              :label="$t('add_new')"
+              @click.native="addTeamMember"
+            />
+          </li>
+        </ul>
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="saveTeam" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>
diff --git a/nuxt.config.js b/nuxt.config.js
index d48c71a20..baacf37d3 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -361,6 +361,11 @@ export default {
     },
   },
 
+  // https://github.com/nuxt-community/color-mode-module
+  colorMode: {
+    classSuffix: "",
+  },
+
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {
     transpile: ["three"],