diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 616235fb9..0739aef07 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -20,7 +20,6 @@ $responsiveWidth: 768px;
 ::-webkit-scrollbar {
   @apply h-1;
   @apply w-2;
-  @apply rounded-lg;
 
   &:hover {
     @apply bg-bgDarkColor;
@@ -28,7 +27,6 @@ $responsiveWidth: 768px;
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply rounded-lg;
   @apply bg-fgLightColor;
 
   &:hover {
@@ -290,6 +288,7 @@ hr {
       button {
         @apply flex-1;
         @apply m-0;
+        @apply p-2;
         @apply justify-start;
         @apply text-left;
       }
@@ -337,10 +336,7 @@ button {
   @apply inline-flex;
   @apply items-center;
   @apply justify-center;
-  @apply m-2;
-  @apply py-2;
-  @apply px-4;
-  @apply rounded-lg;
+  @apply p-4;
   @apply bg-acColor;
   @apply text-actColor;
   @apply font-body;
@@ -373,10 +369,9 @@ button {
     @apply bg-transparent;
     @apply text-fgLightColor;
     @apply fill-current;
-    @apply rounded-lg;
     @apply outline-none;
     @apply border-none;
-    @apply p-2;
+    @apply rounded-lg;
 
     &:not([disabled]):hover,
     &:not([disabled]):active,
@@ -389,6 +384,7 @@ button {
 
   &.primary {
     @apply text-acColor;
+    @apply px-6;
 
     &:not([disabled]):hover,
     &:not([disabled]):active,
@@ -473,9 +469,7 @@ textarea,
 pre,
 code {
   @apply flex;
-  @apply m-2;
-  @apply p-2;
-  @apply rounded-lg;
+  @apply p-4;
   @apply bg-bgDarkColor;
   @apply text-fgColor;
   @apply font-mono;
@@ -486,8 +480,7 @@ code {
   @apply select-text;
   @apply resize-y;
   @apply outline-none;
-
-  width: calc(100% - 16px);
+  @apply w-full;
 
   &:not([readonly]):not(.ace_editor):hover,
   &:not([readonly]):not(.ace_editor):active,
@@ -499,6 +492,7 @@ code {
 .method {
   @apply cursor-pointer;
   @apply uppercase;
+  @apply rounded-none;
 
   min-width: 128px;
 
@@ -527,6 +521,7 @@ pre {
 
 .select-wrapper {
   @apply relative;
+  @apply w-full;
 
   pre,
   input {
@@ -553,7 +548,7 @@ select {
   @apply cursor-pointer;
   @apply appearance-none;
 
-  height: 40px;
+  // height: 40px;
 
   &::-ms-expand {
     @apply hidden;
@@ -613,7 +608,7 @@ input[type="checkbox"] {
 }
 
 label {
-  @apply px-2;
+  @apply p-4;
   @apply text-fgLightColor;
   @apply text-sm;
   @apply transition;
@@ -624,15 +619,6 @@ label {
 ul,
 ol {
   @apply flex;
-  @apply p-0;
-  @apply list-none;
-
-  margin: 4px 0 4px;
-
-  ul,
-  ol {
-    @apply m-0;
-  }
 }
 
 ul li,
@@ -689,8 +675,6 @@ ol li {
 
 #response-details-wrapper {
   @apply relative;
-  @apply overflow-hidden;
-  @apply rounded-lg;
 
   textarea {
     @apply m-0;
@@ -720,6 +704,7 @@ ol li {
     @apply ease-in-out;
     @apply duration-200;
     @apply shadow-lg;
+    @apply rounded-lg;
 
     bottom: 86px;
     left: 50%;
diff --git a/components/collections/add-collection.vue b/components/collections/add-collection.vue
index e037e04b5..ec3981562 100644
--- a/components/collections/add-collection.vue
+++ b/components/collections/add-collection.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         type="text"
diff --git a/components/collections/add-folder.vue b/components/collections/add-folder.vue
index d639d04e2..936922ded 100644
--- a/components/collections/add-folder.vue
+++ b/components/collections/add-folder.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         type="text"
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 2a8440ab2..7ec938cf3 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -55,7 +55,6 @@
         </v-popover>
       </div>
     </div>
-
     <div v-show="showChildren || isFiltered">
       <ul class="flex-col">
         <li
@@ -75,9 +74,6 @@
             @edit-request="$emit('edit-request', $event)"
           />
         </li>
-        <li v-if="collection.folders.length === 0 && collection.requests.length === 0">
-          <p class="info">{{ $t("collection_empty") }}</p>
-        </li>
       </ul>
       <ul class="flex-col">
         <li
@@ -96,6 +92,16 @@
           />
         </li>
       </ul>
+      <ul>
+        <li
+          v-if="collection.folders.length === 0 && collection.requests.length === 0"
+          class="flex ml-8 border-l border-brdColor"
+        >
+          <p class="info">
+            <i class="material-icons">not_interested</i> {{ $t("collection_empty") }}
+          </p>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
diff --git a/components/collections/edit-collection.vue b/components/collections/edit-collection.vue
index fc3b79cd1..b27df64b1 100644
--- a/components/collections/edit-collection.vue
+++ b/components/collections/edit-collection.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         type="text"
diff --git a/components/collections/edit-folder.vue b/components/collections/edit-folder.vue
index 866bdddd5..cb414790c 100644
--- a/components/collections/edit-folder.vue
+++ b/components/collections/edit-folder.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         type="text"
diff --git a/components/collections/edit-request.vue b/components/collections/edit-request.vue
index b96be5d6a..c1bc187b5 100644
--- a/components/collections/edit-request.vue
+++ b/components/collections/edit-request.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         type="text"
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 59ddb4b66..defe324df 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -51,7 +51,6 @@
         </template>
       </v-popover>
     </div>
-
     <div v-show="showChildren || isFiltered">
       <ul class="flex-col">
         <li
@@ -71,7 +70,11 @@
         </li>
       </ul>
       <ul v-if="folder.folders && folder.folders.length" class="flex-col">
-        <li v-for="(subFolder, subFolderIndex) in folder.folders" :key="subFolder.name">
+        <li
+          v-for="(subFolder, subFolderIndex) in folder.folders"
+          :key="subFolder.name"
+          class="ml-8 border-l border-brdColor"
+        >
           <folder
             :folder="subFolder"
             :folder-index="subFolderIndex"
@@ -84,6 +87,11 @@
           />
         </li>
       </ul>
+      <ul v-if="folder.folders.length === 0 && folder.requests.length === 0">
+        <li class="flex ml-8 border-l border-brdColor">
+          <p class="info"><i class="material-icons">not_interested</i> {{ $t("folder_empty") }}</p>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
diff --git a/components/collections/import-export-collections.vue b/components/collections/import-export-collections.vue
index 7d74bd207..bb99c13c3 100644
--- a/components/collections/import-export-collections.vue
+++ b/components/collections/import-export-collections.vue
@@ -44,8 +44,8 @@
         </div>
       </div>
     </div>
-    <div slot="body">
-      <div class="flex flex-col items-start">
+    <div slot="body" class="flex flex-col">
+      <div class="flex flex-col items-start p-2">
         <span
           v-tooltip="{
             content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 120d4e67a..1c43b31d9 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -1,15 +1,13 @@
-<!--
-TODO:
-    - probably refactor and pass event arguments to modals directly without unpacking
--->
-
 <template>
-  <pw-section class="yellow" :label="$t('collections')" ref="collections">
+  <pw-section class="yellow" :label="$t('collections')" ref="collections" no-legend>
     <div class="show-on-large-screen">
-      <input aria-label="Search" type="search" :placeholder="$t('search')" v-model="filterText" />
-      <!-- <button class="icon">
-        <i class="material-icons">search</i>
-      </button> -->
+      <input
+        aria-label="Search"
+        type="search"
+        :placeholder="$t('search')"
+        v-model="filterText"
+        class="rounded-t-lg"
+      />
     </div>
     <add-collection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <edit-collection
@@ -45,28 +43,14 @@ TODO:
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
-
-    <div class="row-wrapper">
-      <div>
-        <button class="icon" @click="displayModalAdd(true)">
-          <i class="material-icons">add</i>
-          <span>{{ $t("new") }}</span>
-        </button>
-      </div>
-      <div>
-        <button class="icon" @click="displayModalImportExport(true)">
-          {{ $t("import_export") }}
-        </button>
-        <!-- <a
-          href="https://github.com/hoppscotch/hoppscotch/wiki/Collections"
-          target="_blank"
-          rel="noopener"
-        >
-          <button class="icon" v-tooltip="'Wiki'">
-            <i class="material-icons">help_outline</i>
-          </button>
-        </a> -->
-      </div>
+    <div class="border-b row-wrapper border-brdColor">
+      <button class="icon" @click="displayModalAdd(true)">
+        <i class="material-icons">add</i>
+        <span>{{ $t("new") }}</span>
+      </button>
+      <button class="icon" @click="displayModalImportExport(true)">
+        {{ $t("import_export") }}
+      </button>
     </div>
     <p v-if="collections.length === 0" class="info">
       <i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
@@ -90,7 +74,7 @@ TODO:
       </ul>
     </div>
     <p v-if="filterText && filteredCollections.length === 0" class="info">
-      {{ $t("nothing_found") }} "{{ filterText }}"
+      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{ filterText }}"
     </p>
   </pw-section>
 </template>
diff --git a/components/collections/save-request-as.vue b/components/collections/save-request-as.vue
index 7526f3ae4..3f9a9ee35 100644
--- a/components/collections/save-request-as.vue
+++ b/components/collections/save-request-as.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("token_req_name") }}</label>
       <input type="text" id="selectLabel" v-model="requestData.name" @keyup.enter="saveRequestAs" />
       <ul>
diff --git a/components/environments/add-environment.vue b/components/environments/add-environment.vue
index 84764cbe0..edad95bfc 100644
--- a/components/environments/add-environment.vue
+++ b/components/environments/add-environment.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         type="text"
diff --git a/components/environments/edit-environment.vue b/components/environments/edit-environment.vue
index a55a3b083..5f0e83b08 100644
--- a/components/environments/edit-environment.vue
+++ b/components/environments/edit-environment.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         type="text"
diff --git a/components/environments/import-export-environment.vue b/components/environments/import-export-environment.vue
index dac69068e..bff235539 100644
--- a/components/environments/import-export-environment.vue
+++ b/components/environments/import-export-environment.vue
@@ -44,8 +44,8 @@
         </div>
       </div>
     </div>
-    <div slot="body">
-      <div class="flex flex-col items-start">
+    <div slot="body" class="flex flex-col">
+      <div class="flex flex-col items-start p-2">
         <span
           v-tooltip="{
             content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
diff --git a/components/environments/index.vue b/components/environments/index.vue
index c2a6c8f7f..bda1f996d 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -1,26 +1,23 @@
 <template>
-  <pw-section class="green" icon="history" :label="$t('environments')" ref="environments">
+  <pw-section class="green" icon="history" :label="$t('environments')" ref="environments" no-legend>
     <div class="show-on-large-screen">
-      <ul class="w-full">
-        <li>
-          <label for="currentEnvironment">{{ $t("select_environment") }}</label>
-          <span class="select-wrapper">
-            <select
-              id="currentEnvironment"
-              v-model="selectedEnvironmentIndex"
-              :disabled="environments.length == 0"
-            >
-              <option :value="-1">No environment</option>
-              <option v-if="environments.length === 0" value="0">
-                {{ $t("create_new_environment") }}
-              </option>
-              <option v-for="(environment, index) in environments" :value="index" :key="index">
-                {{ environment.name }}
-              </option>
-            </select>
-          </span>
-        </li>
-      </ul>
+      <!-- <label for="currentEnvironment">{{ $t("select_environment") }}</label> -->
+      <span class="select-wrapper">
+        <select
+          id="currentEnvironment"
+          v-model="selectedEnvironmentIndex"
+          :disabled="environments.length == 0"
+          class="rounded-t-lg"
+        >
+          <option :value="-1">No environment</option>
+          <option v-if="environments.length === 0" value="0">
+            {{ $t("create_new_environment") }}
+          </option>
+          <option v-for="(environment, index) in environments" :value="index" :key="index">
+            {{ environment.name }}
+          </option>
+        </select>
+      </span>
     </div>
     <add-environment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <edit-environment
@@ -33,7 +30,7 @@
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
-    <div class="row-wrapper">
+    <div class="border-b row-wrapper border-brdColor">
       <div>
         <button class="icon" @click="displayModalAdd(true)">
           <i class="material-icons">add</i>
diff --git a/components/firebase/feeds.vue b/components/firebase/feeds.vue
index ef31d055d..2b32204c7 100644
--- a/components/firebase/feeds.vue
+++ b/components/firebase/feeds.vue
@@ -1,10 +1,9 @@
 <template>
-  <div v-if="fb.currentFeeds.length !== 0" class="virtual-list">
-    <ul
-      v-for="feed in fb.currentFeeds"
-      :key="feed.id"
-      class="flex-col py-2 border-b border-dashed border-brdColor"
-    >
+  <div
+    v-if="fb.currentFeeds.length !== 0"
+    class="divide-y virtual-list divide-dashed divide-brdColor"
+  >
+    <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="flex-col">
       <div data-test="list-item" class="show-on-large-screen">
         <li class="info">
           <label data-test="list-label">
@@ -24,7 +23,7 @@
   </div>
   <ul v-else class="flex-col">
     <li>
-      <label class="info">{{ $t("empty") }}</label>
+      <p class="info"><i class="material-icons">not_interested</i> {{ $t("empty") }}</p>
     </li>
   </ul>
 </template>
diff --git a/components/firebase/inputform.vue b/components/firebase/inputform.vue
index 717764b40..06bbe03b1 100644
--- a/components/firebase/inputform.vue
+++ b/components/firebase/inputform.vue
@@ -8,9 +8,10 @@
         v-model="message"
         :placeholder="$t('paste_a_note')"
         @keyup.enter="formPost"
+        class="rounded-t-lg"
       />
     </div>
-    <div class="show-on-large-screen">
+    <div class="border-b show-on-large-screen border-brdColor">
       <input
         :aria-label="$t('label')"
         type="text"
diff --git a/components/graphql/queryeditor.vue b/components/graphql/queryeditor.vue
index efb97ff97..81f7ee918 100644
--- a/components/graphql/queryeditor.vue
+++ b/components/graphql/queryeditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="opacity-0 show-if-initialized" :class="{ initialized }">
-    <pre ref="editor"></pre>
+    <pre ref="editor" :class="styles"></pre>
   </div>
 </template>
 
@@ -46,6 +46,10 @@ export default {
       type: Object,
       default: {},
     },
+    styles: {
+      type: String,
+      default: "",
+    },
   },
 
   data() {
diff --git a/components/http/codegen-modal.vue b/components/http/codegen-modal.vue
index 125fdc5dd..2844b5c6a 100644
--- a/components/http/codegen-modal.vue
+++ b/components/http/codegen-modal.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <label for="requestType">{{ $t("request_type") }}</label>
       <span class="select-wrapper">
         <v-popover>
@@ -54,6 +54,7 @@
         rows="8"
         v-model="requestCode"
         readonly
+        class="rounded-b-lg"
       ></textarea>
     </div>
   </modal>
diff --git a/components/http/http-headers.vue b/components/http/http-headers.vue
index 060332a25..21dcac0d2 100644
--- a/components/http/http-headers.vue
+++ b/components/http/http-headers.vue
@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="orange" label="Headers" ref="headers">
+  <pw-section class="orange" label="Headers" ref="headers" no-legend>
     <ul v-if="headers.length !== 0">
       <li>
         <div class="row-wrapper">
diff --git a/components/http/http-parameters.vue b/components/http/http-parameters.vue
index be50f4a70..619ddad09 100644
--- a/components/http/http-parameters.vue
+++ b/components/http/http-parameters.vue
@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="pink" label="Parameters" ref="parameters">
+  <pw-section class="pink" label="Parameters" ref="parameters" no-legend>
     <ul v-if="params.length !== 0">
       <li>
         <div class="row-wrapper">
diff --git a/components/http/import-curl.vue b/components/http/import-curl.vue
index 8fd449ef2..f00a3c982 100644
--- a/components/http/import-curl.vue
+++ b/components/http/import-curl.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
     </div>
     <div slot="footer">
diff --git a/components/http/notes.vue b/components/http/notes.vue
index aa1aba315..6ffc49cef 100644
--- a/components/http/notes.vue
+++ b/components/http/notes.vue
@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="pink" :label="$t('notes')" ref="sync">
+  <pw-section class="pink" :label="$t('notes')" ref="sync" no-legend>
     <div v-if="fb.currentUser">
       <inputform />
       <feeds />
diff --git a/components/http/token-list.vue b/components/http/token-list.vue
index 899d2ec6c..a3bbc5af7 100644
--- a/components/http/token-list.vue
+++ b/components/http/token-list.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <div class="row-wrapper">
         <label for="token-list">{{ $t("token_list") }}</label>
         <div v-if="tokens.length != 0">
diff --git a/components/layout/contributors.vue b/components/layout/contributors.vue
index 39b7c737c..91143e5d7 100644
--- a/components/layout/contributors.vue
+++ b/components/layout/contributors.vue
@@ -6,7 +6,7 @@
     <p class="info">
       {{ $t("donate_info2") }}
     </p>
-    <div class="row-wrapper">
+    <div class="px-2 row-wrapper">
       <span>
         <a
           href="https://github.com/sponsors/hoppscotch"
@@ -33,7 +33,7 @@
         </a>
       </span>
     </div>
-    <div class="row-wrapper">
+    <div class="px-2 row-wrapper">
       <span>
         <a
           href="https://opencollective.com/hoppscotch"
@@ -48,84 +48,96 @@
         </a>
       </span>
     </div>
-    <div>
-      <a
-        href="https://www.patreon.com/liyasthomas"
-        target="_blank"
-        rel="noopener"
-        v-tooltip.right="$t('recurring')"
-      >
-        <button class="icon">
-          <i class="material-icons">local_parking</i>
-          <span>{{ $t("patreon") }}</span>
-        </button>
-      </a>
+    <div class="px-2 row-wrapper">
+      <span>
+        <a
+          href="https://www.patreon.com/liyasthomas"
+          target="_blank"
+          rel="noopener"
+          v-tooltip.right="$t('recurring')"
+        >
+          <button class="icon">
+            <i class="material-icons">local_parking</i>
+            <span>{{ $t("patreon") }}</span>
+          </button>
+        </a>
+      </span>
     </div>
-    <div>
-      <a
-        href="https://www.paypal.me/liyascthomas"
-        target="_blank"
-        rel="noopener"
-        v-tooltip.right="$t('one_time')"
-      >
-        <button class="icon">
-          <i class="material-icons">payment</i>
-          <span>{{ $t("paypal") }}</span>
-        </button>
-      </a>
+    <div class="px-2 row-wrapper">
+      <span>
+        <a
+          href="https://www.paypal.me/liyascthomas"
+          target="_blank"
+          rel="noopener"
+          v-tooltip.right="$t('one_time')"
+        >
+          <button class="icon">
+            <i class="material-icons">payment</i>
+            <span>{{ $t("paypal") }}</span>
+          </button>
+        </a>
+      </span>
     </div>
     <hr />
-    <h3 class="title">Financial Contributors</h3>
-    <div class="contributors fle">
-      <a href="https://www.deta.sh/?ref=hoppscotch" target="_blank" rel="noopener">
-        <img style="max-width: 200px" src="~assets/images/hs-gh-banner.png" alt="Deta" />
-      </a>
+    <div class="p-2">
+      <h3 class="title">Financial Contributors</h3>
+      <div class="contributors">
+        <a href="https://www.deta.sh/?ref=hoppscotch" target="_blank" rel="noopener">
+          <img style="max-width: 200px" src="~assets/images/hs-gh-banner.png" alt="Deta" />
+        </a>
+      </div>
+      <div class="contributors">
+        <a
+          href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship"
+          target="_blank"
+          rel="noopener"
+        >
+          <img
+            style="max-width: 100px"
+            src="~assets/images/Paw-Logo-for-Hoppscotch.png"
+            alt="Paw"
+          />
+        </a>
+      </div>
+      <div class="contributors">
+        <a href="https://tyk.io" target="_blank" rel="noopener">
+          <img
+            style="max-width: 320px"
+            src="~assets/images/Tyk-side-project-logo-tagline-blk.png"
+            alt="Tyk Banner"
+          />
+        </a>
+      </div>
+      <div class="contributors">
+        <a
+          target="_blank"
+          rel="noopener"
+          href="https://opencollective.com/hoppscotch/organization/0/website"
+        >
+          <img src="https://opencollective.com/hoppscotch/organization/0/avatar.svg" />
+        </a>
+        <a
+          target="_blank"
+          rel="noopener"
+          href="https://opencollective.com/hoppscotch/organization/1/website"
+        >
+          <img src="https://opencollective.com/hoppscotch/organization/1/avatar.svg" />
+        </a>
+      </div>
     </div>
-    <div class="contributors">
-      <a
-        href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship"
-        target="_blank"
-        rel="noopener"
-      >
-        <img style="max-width: 100px" src="~assets/images/Paw-Logo-for-Hoppscotch.png" alt="Paw" />
-      </a>
-    </div>
-    <div class="contributors">
-      <a href="https://tyk.io" target="_blank" rel="noopener">
-        <img
-          style="max-width: 320px"
-          src="~assets/images/Tyk-side-project-logo-tagline-blk.png"
-          alt="Tyk Banner"
-        />
-      </a>
-    </div>
-    <div class="contributors">
-      <a
-        target="_blank"
-        rel="noopener"
-        href="https://opencollective.com/hoppscotch/organization/0/website"
-      >
-        <img src="https://opencollective.com/hoppscotch/organization/0/avatar.svg" />
-      </a>
-      <a
-        target="_blank"
-        rel="noopener"
-        href="https://opencollective.com/hoppscotch/organization/1/website"
-      >
-        <img src="https://opencollective.com/hoppscotch/organization/1/avatar.svg" />
-      </a>
-    </div>
-    <h3 class="title">Code Contributors</h3>
-    <p class="info">This project exists thanks to all the people who contribute.</p>
-    <div class="contributors">
+    <hr />
+    <p class="info">
+      This project exists thanks to all the
       <a
         target="_blank"
         rel="noopener"
         href="https://github.com/hoppscotch/hoppscotch/graphs/contributors"
+        class="link"
       >
-        <img src="https://opencollective.com/hoppscotch/contributors.svg" />
+        people who contribute
       </a>
-    </div>
+      .
+    </p>
   </div>
 </template>
 
@@ -135,11 +147,6 @@
   @apply items-center;
   @apply flex-no-wrap;
   @apply overflow-auto;
-  @apply my-4;
-}
-
-.github-sponsor {
-  @apply mr-2;
-  @apply rounded-full;
+  @apply m-2;
 }
 </style>
diff --git a/components/layout/history.vue b/components/layout/history.vue
index 507ca6e67..221598b5d 100644
--- a/components/layout/history.vue
+++ b/components/layout/history.vue
@@ -1,13 +1,19 @@
 <template>
-  <pw-section class="green" icon="history" :label="$t('history')" ref="history">
+  <pw-section class="green" icon="history" :label="$t('history')" ref="history" no-legend>
     <div class="show-on-large-screen">
-      <input aria-label="Search" type="search" :placeholder="$t('search')" v-model="filterText" />
-      <button class="icon">
-        <i class="material-icons">search</i>
-      </button>
+      <input
+        aria-label="Search"
+        type="search"
+        :placeholder="$t('search')"
+        v-model="filterText"
+        class="rounded-t-lg"
+      />
     </div>
-    <div class="virtual-list" :class="{ filled: filteredHistory.length }">
-      <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
+    <div
+      class="divide-y virtual-list divide-dashed divide-brdColor"
+      :class="{ filled: filteredHistory.length }"
+    >
+      <ul v-for="(entry, index) in filteredHistory" :key="index">
         <div class="show-on-large-screen">
           <span
             class="p-2 m-2"
@@ -105,15 +111,17 @@
                 readonly
                 :value="entry.time"
                 v-tooltip="entry.date"
+                class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
               />
             </li>
             <li>
               <input
-                :aria-label="$t('duration')"
+                :aria-label="$t('nn')"
                 type="text"
                 readonly
                 :value="entry.duration"
                 :placeholder="$t('no_duration')"
+                class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
               />
             </li>
             <li>
@@ -123,6 +131,7 @@
                 readonly
                 :value="entry.preRequestScript"
                 :placeholder="$t('no_prerequest_script')"
+                class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
               />
             </li>
           </div>
@@ -135,7 +144,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">
+    <div v-if="history.length !== 0" class="rounded-b-lg bg-bgDarkColor">
       <div class="row-wrapper" v-if="!isClearingHistory">
         <button
           class="icon"
@@ -199,9 +208,9 @@
         </v-popover>
       </div>
       <div class="row-wrapper" v-else>
-        <label for="clear-history-button" class="info">
+        <p for="clear-history-button" class="info">
           <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
-        </label>
+        </p>
         <div>
           <button
             class="icon"
@@ -253,11 +262,6 @@ ol {
   flex-direction: column;
 }
 
-.entry {
-  border-bottom: 1px dashed var(--brd-color);
-  padding: 0 0 8px;
-}
-
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;
diff --git a/components/layout/pw-section.vue b/components/layout/pw-section.vue
index 2fd5dd393..1bfea4dfd 100644
--- a/components/layout/pw-section.vue
+++ b/components/layout/pw-section.vue
@@ -1,6 +1,6 @@
 <template>
   <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
-    <legend @click.prevent="collapse">
+    <legend v-if="!noLegend" @click.prevent="collapse">
       <span>{{ label }}</span>
       <i class="ml-2 align-middle material-icons">
         {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
@@ -14,8 +14,7 @@
 
 <style scoped lang="scss">
 fieldset {
-  @apply my-2;
-  @apply p-2;
+  @apply my-4;
   @apply rounded-lg;
   @apply bg-bgDarkColor;
   @apply transition;
@@ -23,8 +22,8 @@ fieldset {
   @apply duration-200;
 
   legend {
+    @apply px-4;
     @apply text-fgColor;
-    @apply text-sm;
     @apply font-bold;
     @apply cursor-pointer;
     @apply transition;
@@ -86,6 +85,10 @@ export default {
       type: String,
       default: "Section",
     },
+    noLegend: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   methods: {
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 70320d35b..bdce3fb3f 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -61,6 +61,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="rounded-b-lg"
       />
       <iframe
         :class="{ hidden: !previewEnabled }"
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 15a56aaed..267de275d 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -52,6 +52,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="rounded-b-lg"
       />
     </div>
   </div>
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index be8592fbc..6f93ee950 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -49,6 +49,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="rounded-b-lg"
       />
     </div>
   </div>
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index f0ba40021..0ef64c8c8 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -49,6 +49,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="rounded-b-lg"
       />
     </div>
   </div>
diff --git a/components/lenses/response-body-renderer.vue b/components/lenses/response-body-renderer.vue
index 5f69ff572..6f5193756 100644
--- a/components/lenses/response-body-renderer.vue
+++ b/components/lenses/response-body-renderer.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tabs>
+    <tabs styles="m-4">
       <tab
         v-for="(lens, index) in validLenses"
         :key="lens.lensName"
diff --git a/components/others/extensions.vue b/components/others/extensions.vue
index cd9cbab81..434bd55d5 100644
--- a/components/others/extensions.vue
+++ b/components/others/extensions.vue
@@ -10,11 +10,11 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <p class="info">
         {{ $t("extensions_info1") }}
       </p>
-      <div>
+      <div class="px-2">
         <a
           href="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
           target="_blank"
@@ -33,7 +33,7 @@
           </button>
         </a>
       </div>
-      <div>
+      <div class="px-2">
         <a
           href="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
           target="_blank"
diff --git a/components/others/shortcuts.vue b/components/others/shortcuts.vue
index ecd70400e..5ffd427c6 100644
--- a/components/others/shortcuts.vue
+++ b/components/others/shortcuts.vue
@@ -10,57 +10,63 @@
         </div>
       </div>
     </div>
-    <div slot="body">
-      <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 slot="body" class="flex flex-col">
+      <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>
-        <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 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>
-        <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="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>
       </div>
     </div>
     <div slot="footer"></div>
@@ -71,6 +77,11 @@
 kbd {
   @apply inline-flex;
   @apply resize-none;
+  @apply m-2;
+  @apply rounded-lg;
+  @apply py-2;
+  @apply px-4;
+  @apply text-sm;
 }
 </style>
 
diff --git a/components/others/support.vue b/components/others/support.vue
index 69f09e71b..37fab9e22 100644
--- a/components/others/support.vue
+++ b/components/others/support.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
       <contributors />
     </div>
     <div slot="footer"></div>
diff --git a/components/realtime/log.vue b/components/realtime/log.vue
index 3f74594f4..533e4b120 100644
--- a/components/realtime/log.vue
+++ b/components/realtime/log.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col">
     <label for="log">{{ title }}</label>
     <div name="log" class="realtime-log" ref="log">
       <span v-if="log">
@@ -14,9 +14,7 @@
 
 <style scoped lang="scss">
 .realtime-log {
-  @apply m-2;
-  @apply p-2;
-  @apply rounded-lg;
+  @apply p-4;
   @apply bg-bgDarkColor;
   @apply text-fgColor;
   @apply overflow-auto;
@@ -25,7 +23,6 @@
 
   &,
   span {
-    @apply text-sm;
     @apply font-mono;
     @apply font-normal;
     @apply select-text;
diff --git a/components/realtime/mqtt.vue b/components/realtime/mqtt.vue
index fbf3e9ea3..8b3eae5e6 100644
--- a/components/realtime/mqtt.vue
+++ b/components/realtime/mqtt.vue
@@ -1,15 +1,26 @@
 <template>
   <div>
-    <pw-section class="blue" :label="$t('request')">
+    <pw-section class="blue" :label="$t('request')" no-legend>
       <ul>
         <li>
           <label for="mqtt-url">{{ $t("url") }}</label>
-          <input id="mqtt-url" type="url" v-model="url" spellcheck="false" />
+          <input
+            id="mqtt-url"
+            type="url"
+            v-model="url"
+            spellcheck="false"
+            class="md:rounded-bl-lg"
+          />
         </li>
         <div>
           <li>
             <label for="connect" class="hide-on-small-screen">&nbsp;</label>
-            <button id="connect" :disabled="!validUrl" @click="toggleConnection">
+            <button
+              id="connect"
+              :disabled="!validUrl"
+              @click="toggleConnection"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
               {{ this.connectionState ? $t("disconnect") : $t("connect") }}
               <span>
                 <i class="material-icons">{{ !connectionState ? "sync" : "sync_disabled" }}</i>
@@ -20,7 +31,7 @@
       </ul>
     </pw-section>
 
-    <pw-section class="blue" :label="$t('communication')">
+    <pw-section class="blue" :label="$t('communication')" no-legend>
       <ul>
         <li>
           <log :title="$t('log')" :log="this.log" />
@@ -50,12 +61,24 @@
       <ul>
         <li>
           <label for="sub_topic">{{ $t("mqtt_topic") }}</label>
-          <input id="sub_topic" type="text" v-model="sub_topic" spellcheck="false" />
+          <input
+            id="sub_topic"
+            type="text"
+            v-model="sub_topic"
+            spellcheck="false"
+            class="md:rounded-bl-lg"
+          />
         </li>
         <div>
           <li>
             <label for="subscribe" class="hide-on-small-screen">&nbsp;</label>
-            <button id="subscribe" name="get" :disabled="!cansubscribe" @click="toggleSubscription">
+            <button
+              id="subscribe"
+              name="get"
+              :disabled="!cansubscribe"
+              @click="toggleSubscription"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
               {{ subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe") }}
               <span>
                 <i class="material-icons">{{ subscriptionState ? "sync_disabled" : "sync" }}</i>
diff --git a/components/realtime/socketio.vue b/components/realtime/socketio.vue
index 5dd8891fb..dd5b0f380 100644
--- a/components/realtime/socketio.vue
+++ b/components/realtime/socketio.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <pw-section class="blue" :label="$t('request')" ref="request">
+    <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
       <ul>
         <li>
           <label for="socketio-url">{{ $t("url") }}</label>
@@ -11,6 +11,7 @@
             :class="{ error: !urlValid }"
             v-model="url"
             @keyup.enter="urlValid ? toggleConnection() : null"
+            class="md:rounded-bl-lg"
           />
         </li>
         <div>
@@ -22,7 +23,13 @@
         <div>
           <li>
             <label for="connect" class="hide-on-small-screen">&nbsp;</label>
-            <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
+            <button
+              :disabled="!urlValid"
+              id="connect"
+              name="connect"
+              @click="toggleConnection"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
               {{ !connectionState ? $t("connect") : $t("disconnect") }}
               <span>
                 <i class="material-icons">
@@ -34,7 +41,8 @@
         </div>
       </ul>
     </pw-section>
-    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+
+    <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
       <ul>
         <li>
           <log :title="$t('log')" :log="communication.log" />
diff --git a/components/realtime/sse.vue b/components/realtime/sse.vue
index 788618d06..e436b4fd3 100644
--- a/components/realtime/sse.vue
+++ b/components/realtime/sse.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="blue" :label="$t('request')" ref="request">
+    <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
       <ul>
         <li>
           <label for="server">{{ $t("server") }}</label>
@@ -10,12 +10,19 @@
             :class="{ error: !serverValid }"
             v-model="server"
             @keyup.enter="serverValid ? toggleSSEConnection() : null"
+            class="md:rounded-bl-lg"
           />
         </li>
         <div>
           <li>
             <label for="start" class="hide-on-small-screen">&nbsp;</label>
-            <button :disabled="!serverValid" id="start" name="start" @click="toggleSSEConnection">
+            <button
+              :disabled="!serverValid"
+              id="start"
+              name="start"
+              @click="toggleSSEConnection"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
               {{ !connectionSSEState ? $t("start") : $t("stop") }}
               <span>
                 <i class="material-icons">
@@ -28,7 +35,7 @@
       </ul>
     </pw-section>
 
-    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+    <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
       <ul>
         <li>
           <log :title="$t('events')" :log="events.log" />
diff --git a/components/realtime/websocket.vue b/components/realtime/websocket.vue
index ba00dd0e8..afab5ccb2 100644
--- a/components/realtime/websocket.vue
+++ b/components/realtime/websocket.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="blue" :label="$t('request')" ref="request">
+    <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
       <ul>
         <li>
           <label for="websocket-url">{{ $t("url") }}</label>
@@ -11,12 +11,19 @@
             :class="{ error: !urlValid }"
             v-model="url"
             @keyup.enter="urlValid ? toggleConnection() : null"
+            class="md:rounded-bl-lg"
           />
         </li>
         <div>
           <li>
             <label for="connect" class="hide-on-small-screen">&nbsp;</label>
-            <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
+            <button
+              :disabled="!urlValid"
+              id="connect"
+              name="connect"
+              @click="toggleConnection"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
               {{ !connectionState ? $t("connect") : $t("disconnect") }}
               <span>
                 <i class="material-icons">
@@ -29,7 +36,7 @@
       </ul>
     </pw-section>
 
-    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+    <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
       <ul>
         <li>
           <log :title="$t('log')" :log="communication.log" />
@@ -47,12 +54,19 @@
             @keyup.enter="connectionState ? sendMessage() : null"
             @keyup.up="connectionState ? walkHistory('up') : null"
             @keyup.down="connectionState ? walkHistory('down') : null"
+            class="md:rounded-bl-lg"
           />
         </li>
         <div>
           <li>
             <label for="send" class="hide-on-small-screen">&nbsp;</label>
-            <button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
+            <button
+              id="send"
+              name="send"
+              :disabled="!connectionState"
+              @click="sendMessage"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
               {{ $t("send") }}
               <span>
                 <i class="material-icons">send</i>
diff --git a/components/ui/accent-mode-picker.vue b/components/ui/accent-mode-picker.vue
index a956c5e47..3fde662a3 100644
--- a/components/ui/accent-mode-picker.vue
+++ b/components/ui/accent-mode-picker.vue
@@ -1,5 +1,5 @@
 <template>
-  <li>
+  <div>
     <label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
     <div class="space-x-2">
       <span
@@ -13,7 +13,7 @@
         <i class="material-icons">lens</i>
       </span>
     </div>
-  </li>
+  </div>
 </template>
 
 <script>
diff --git a/components/ui/ace-editor.vue b/components/ui/ace-editor.vue
index 89b6ca5f1..f6e080e05 100644
--- a/components/ui/ace-editor.vue
+++ b/components/ui/ace-editor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="show-if-initialized" :class="{ initialized }">
-    <pre ref="editor"></pre>
+    <pre ref="editor" :class="styles"></pre>
   </div>
 </template>
 
@@ -48,6 +48,10 @@ export default {
       type: Object,
       default: {},
     },
+    styles: {
+      type: String,
+      default: "",
+    },
   },
 
   data() {
diff --git a/components/ui/autocomplete.vue b/components/ui/autocomplete.vue
index 1bf613206..5adda0ab6 100644
--- a/components/ui/autocomplete.vue
+++ b/components/ui/autocomplete.vue
@@ -12,6 +12,7 @@
       :spellcheck="spellcheck"
       :autocapitalize="autocapitalize"
       :autocorrect="spellcheck"
+      :class="styles"
     />
     <ul
       class="suggestions"
@@ -108,6 +109,11 @@ export default {
       default: "",
       required: false,
     },
+
+    styles: {
+      type: String,
+      default: "",
+    },
   },
 
   watch: {
diff --git a/components/ui/color-mode-picker.vue b/components/ui/color-mode-picker.vue
index d89f29452..e17d97979 100644
--- a/components/ui/color-mode-picker.vue
+++ b/components/ui/color-mode-picker.vue
@@ -1,5 +1,5 @@
 <template>
-  <li>
+  <div>
     <label>
       <ColorScheme placeholder="..." tag="span">
         {{ $t("background") }}:
@@ -24,7 +24,7 @@
         <i class="material-icons">{{ getIcon(color) }}</i>
       </span>
     </div>
-  </li>
+  </div>
 </template>
 
 <script>
diff --git a/components/ui/js-editor.vue b/components/ui/js-editor.vue
index 94931e3e5..f3964b553 100644
--- a/components/ui/js-editor.vue
+++ b/components/ui/js-editor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="show-if-initialized" :class="{ initialized }">
-    <pre ref="editor"></pre>
+    <pre ref="editor" :class="styles"></pre>
   </div>
 </template>
 
@@ -40,6 +40,10 @@ export default {
       type: Object,
       default: {},
     },
+    styles: {
+      type: String,
+      default: "",
+    },
   },
 
   data() {
diff --git a/components/ui/modal.vue b/components/ui/modal.vue
index deeed1195..48c14f392 100644
--- a/components/ui/modal.vue
+++ b/components/ui/modal.vue
@@ -49,7 +49,6 @@
   @apply flex-1;
   @apply flex-col;
   @apply m-2;
-  @apply p-2;
   @apply transition;
   @apply ease-in-out;
   @apply duration-200;
@@ -58,13 +57,21 @@
   @apply shadow-2xl;
 
   max-height: calc(100vh - 128px);
-  max-width: 720px;
+  max-width: 640px;
+}
+
+.modal-header {
+  @apply pl-2;
 }
 
 .modal-body {
   @apply overflow-auto;
 }
 
+.modal-footer {
+  @apply p-2;
+}
+
 /*
   * The following styles are auto-applied to elements with
   * transition="modal" when their visibility is toggled
diff --git a/components/ui/pw-toggle.vue b/components/ui/pw-toggle.vue
index b4653eb06..e15654e21 100644
--- a/components/ui/pw-toggle.vue
+++ b/components/ui/pw-toggle.vue
@@ -1,9 +1,9 @@
 <template>
-  <div @click="toggle()">
+  <div @click="toggle()" class="inline-block cursor-pointer">
     <label class="toggle" :class="{ on: on }" ref="toggle">
       <span class="handle"></span>
     </label>
-    <label class="caption">
+    <label class="pl-0 align-middle cursor-pointer">
       <slot />
     </label>
   </div>
@@ -21,24 +21,13 @@ $height: 16px;
 $handleSpacing: 4px;
 $transition: all 0.2s ease-in-out;
 
-div {
-  @apply inline-block;
-  @apply cursor-pointer;
-}
-
-label.caption {
-  @apply align-middle;
-  @apply cursor-pointer;
-}
-
-label.toggle {
+.toggle {
   @apply relative;
   @apply inline-block;
   @apply align-middle;
   @apply rounded-full;
   @apply p-0;
-  @apply my-4;
-  @apply mx-2;
+  @apply m-4;
   @apply cursor-pointer;
 
   width: $width;
diff --git a/components/ui/tabs.vue b/components/ui/tabs.vue
index 2cfe8da18..b60513203 100644
--- a/components/ui/tabs.vue
+++ b/components/ui/tabs.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tabs-wrapper">
     <div class="tabs">
-      <ul>
+      <ul :class="styles">
         <li
           v-for="(tab, index) in tabs"
           :class="{ 'is-active': tab.isActive }"
@@ -90,6 +90,13 @@
 
 <script>
 export default {
+  props: {
+    styles: {
+      type: String,
+      default: "",
+    },
+  },
+
   data() {
     return {
       tabs: [],
diff --git a/lang/en-US.json b/lang/en-US.json
index 8088decfc..8ea7fcf76 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -64,6 +64,7 @@
   "server": "Server",
   "events": "Events",
   "url": "URL",
+  "variables": "Variables",
   "get_schema": "Get schema",
   "header_list": "Header list",
   "add_new": "Add new",
diff --git a/package-lock.json b/package-lock.json
index c648479f5..d36414b49 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2924,9 +2924,9 @@
       }
     },
     "@nuxtjs/tailwindcss": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-3.3.3.tgz",
-      "integrity": "sha512-IAWyKm9iXGlok0GgNcjEuoMvPIAmOrUmlAFJVlpZBTySr1Bs0aeZhNqfiTUSQAEaSDLFw+gwZvxRPrHytR3J0w==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-3.3.4.tgz",
+      "integrity": "sha512-blign8PnZDoHI/A7vxSJTNEpqS7REu7ZwaclB37+HskJSep1qYXblELwvNlMa3/eVuP/KKk8tUFxCtDXiqOdUQ==",
       "dev": true,
       "requires": {
         "clear-module": "^4.1.1",
@@ -8613,9 +8613,9 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
+      "integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ=="
     },
     "inquirer": {
       "version": "7.3.3",
diff --git a/package.json b/package.json
index 2f14460cc..5ed36cfd5 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@nuxtjs/color-mode": "^2.0.2",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/pwa": "^3.3.2",
-    "@nuxtjs/tailwindcss": "^3.3.3",
+    "@nuxtjs/tailwindcss": "^3.3.4",
     "@testing-library/jest-dom": "^5.11.6",
     "@vue/test-utils": "^1.1.1",
     "babel-core": "^7.0.0-bridge.0",
diff --git a/pages/doc.vue b/pages/doc.vue
index 4ea535a1a..35ed58072 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -2,110 +2,188 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <pw-section class="blue" :label="$t('import')" ref="import">
-          <ul>
-            <li>
-              <p class="info">
-                {{ $t("generate_docs_message") }}
-              </p>
-            </li>
-          </ul>
-          <ul>
-            <li>
-              <div class="row-wrapper">
-                <label for="collectionUpload">
-                  <button
-                    class="icon"
-                    @click="$refs.collectionUpload.click()"
-                    v-tooltip="$t('json')"
-                  >
-                    <i class="material-icons">folder</i>
-                    <span>{{ $t("import_collections") }}</span>
-                  </button>
-                </label>
-                <input
-                  ref="collectionUpload"
-                  name="collectionUpload"
-                  type="file"
-                  @change="uploadCollection"
-                />
-                <div>
-                  <button
-                    class="icon"
-                    @click="collectionJSON = '[]'"
-                    v-tooltip.bottom="$t('clear')"
-                  >
-                    <i class="material-icons">clear_all</i>
-                  </button>
-                </div>
-              </div>
-            </li>
-          </ul>
-          <ul>
-            <li>
-              <ace-editor
-                v-model="collectionJSON"
-                :lang="'json'"
-                :lint="false"
-                :options="{
-                  maxLines: '16',
-                  minLines: '8',
-                  fontSize: '16px',
-                  autoScrollEditorIntoView: true,
-                  showPrintMargin: false,
-                  useWorker: false,
-                }"
+        <pw-section class="blue" :label="$t('import')" ref="import" no-legend>
+          <div class="flex flex-col">
+            <label>{{ $t("collection") }}</label>
+            <p class="info">
+              {{ $t("generate_docs_message") }}
+            </p>
+            <div class="row-wrapper">
+              <label for="collectionUpload">
+                <button class="icon" @click="$refs.collectionUpload.click()" v-tooltip="$t('json')">
+                  <i class="material-icons">folder</i>
+                  <span>{{ $t("import_collections") }}</span>
+                </button>
+              </label>
+              <input
+                ref="collectionUpload"
+                name="collectionUpload"
+                type="file"
+                @change="uploadCollection"
               />
-            </li>
-          </ul>
-          <ul>
-            <li>
-              <button class="icon" @click="getDoc">
-                <i class="material-icons">topic</i>
-                <span>{{ $t("generate_docs") }}</span>
-              </button>
-            </li>
-          </ul>
+              <div>
+                <button class="icon" @click="collectionJSON = '[]'" v-tooltip.bottom="$t('clear')">
+                  <i class="material-icons">clear_all</i>
+                </button>
+              </div>
+            </div>
+            <ace-editor
+              v-model="collectionJSON"
+              :lang="'json'"
+              :lint="false"
+              :options="{
+                maxLines: '16',
+                minLines: '8',
+                fontSize: '16px',
+                autoScrollEditorIntoView: true,
+                showPrintMargin: false,
+                useWorker: false,
+              }"
+            />
+            <button class="icon" @click="getDoc">
+              <i class="material-icons">topic</i>
+              <span>{{ $t("generate_docs") }}</span>
+            </button>
+          </div>
         </pw-section>
 
-        <pw-section class="green" :label="$t('documentation')" ref="documentation">
-          <p v-if="this.items.length === 0" class="info">
-            {{ $t("generate_docs_first") }}
-          </p>
-          <div v-else class="row-wrapper">
-            <div
-              v-tooltip.bottom="{
-                content: !fb.currentUser
-                  ? $t('login_with_github_to') + $t('create_secret_gist')
-                  : fb.currentUser.provider !== 'github.com'
-                  ? $t('login_with_github_to') + $t('create_secret_gist')
-                  : null,
-              }"
-            >
-              <button
-                :disabled="
-                  !fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
-                "
-                class="icon"
-                @click="createDocsGist"
+        <pw-section class="green" :label="$t('documentation')" ref="documentation" no-legend>
+          <div class="flex flex-col">
+            <label>{{ $t("documentation") }}</label>
+            <p v-if="this.items.length === 0" class="info">
+              {{ $t("generate_docs_first") }}
+            </p>
+            <div v-else class="row-wrapper">
+              <div
+                v-tooltip.bottom="{
+                  content: !fb.currentUser
+                    ? $t('login_with_github_to') + $t('create_secret_gist')
+                    : fb.currentUser.provider !== 'github.com'
+                    ? $t('login_with_github_to') + $t('create_secret_gist')
+                    : null,
+                }"
               >
-                <i class="material-icons">assignment</i>
-                <span>{{ $t("create_secret_gist") }}</span>
-              </button>
+                <button
+                  :disabled="
+                    !fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
+                  "
+                  class="icon"
+                  @click="createDocsGist"
+                >
+                  <i class="material-icons">assignment</i>
+                  <span>{{ $t("create_secret_gist") }}</span>
+                </button>
+              </div>
             </div>
-          </div>
-          <div>
-            <span class="collection" v-for="(collection, index) in this.items" :key="index">
-              <h2>
-                <i class="material-icons">folder</i>
-                {{ collection.name || $t("none") }}
-              </h2>
-              <span class="folder" v-for="(folder, index) in collection.folders" :key="index">
-                <h3>
-                  <i class="material-icons">folder_open</i>
-                  {{ folder.name || $t("none") }}
-                </h3>
-                <span class="request" v-for="(request, index) in folder.requests" :key="index">
+            <div>
+              <span class="collection" v-for="(collection, index) in this.items" :key="index">
+                <h2>
+                  <i class="material-icons">folder</i>
+                  {{ collection.name || $t("none") }}
+                </h2>
+                <span class="folder" v-for="(folder, index) in collection.folders" :key="index">
+                  <h3>
+                    <i class="material-icons">folder_open</i>
+                    {{ folder.name || $t("none") }}
+                  </h3>
+                  <span class="request" v-for="(request, index) in folder.requests" :key="index">
+                    <h4>
+                      <i class="material-icons">insert_drive_file</i>
+                      {{ request.name || $t("none") }}
+                    </h4>
+                    <p class="doc-desc" v-if="request.url">
+                      <span>
+                        {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
+                      </span>
+                    </p>
+                    <p class="doc-desc" v-if="request.path">
+                      <span>
+                        {{ $t("path") }}:
+                        <code>{{ request.path || $t("none") }}</code>
+                      </span>
+                    </p>
+                    <p class="doc-desc" v-if="request.method">
+                      <span>
+                        {{ $t("method") }}:
+                        <code>{{ request.method || $t("none") }}</code>
+                      </span>
+                    </p>
+                    <p class="doc-desc" v-if="request.auth">
+                      <span>
+                        {{ $t("authentication") }}:
+                        <code>{{ request.auth || $t("none") }}</code>
+                      </span>
+                    </p>
+                    <p class="doc-desc" v-if="request.httpUser">
+                      <span>
+                        {{ $t("username") }}:
+                        <code>{{ request.httpUser || $t("none") }}</code>
+                      </span>
+                    </p>
+                    <p class="doc-desc" v-if="request.httpPassword">
+                      <span>
+                        {{ $t("password") }}:
+                        <code>{{ request.httpPassword || $t("none") }}</code>
+                      </span>
+                    </p>
+                    <p class="doc-desc" v-if="request.bearerToken">
+                      <span>
+                        {{ $t("token") }}:
+                        <code>{{ request.bearerToken || $t("none") }}</code>
+                      </span>
+                    </p>
+                    <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
+                    <span v-if="request.headers">
+                      <p v-for="header in request.headers" :key="header.key" class="doc-desc">
+                        <span>
+                          {{ header.key || $t("none") }}:
+                          <code>{{ header.value || $t("none") }}</code>
+                        </span>
+                      </p>
+                    </span>
+                    <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
+                    <span v-if="request.params">
+                      <p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
+                        <span>
+                          {{ parameter.key || $t("none") }}:
+                          <code>{{ parameter.value || $t("none") }}</code>
+                        </span>
+                      </p>
+                    </span>
+                    <h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
+                    <span v-if="request.bodyParams">
+                      <p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
+                        <span>
+                          {{ payload.key || $t("none") }}:
+                          <code>{{ payload.value || $t("none") }}</code>
+                        </span>
+                      </p>
+                    </span>
+                    <p class="doc-desc" v-if="request.rawParams">
+                      <span>
+                        {{ $t("parameters") }}:
+                        <code>{{ request.rawParams || $t("none") }}</code>
+                      </span>
+                    </p>
+                    <p class="doc-desc" v-if="request.contentType">
+                      <span>
+                        {{ $t("content_type") }}:
+                        <code>{{ request.contentType || $t("none") }}</code>
+                      </span>
+                    </p>
+                    <p class="doc-desc" v-if="request.requestType">
+                      <span>
+                        {{ $t("request_type") }}:
+                        <code>{{ request.requestType || $t("none") }}</code>
+                      </span>
+                    </p>
+                  </span>
+                </span>
+                <span
+                  class="request"
+                  v-for="(request, index) in collection.requests"
+                  :key="`request-${index}`"
+                >
                   <h4>
                     <i class="material-icons">insert_drive_file</i>
                     {{ request.name || $t("none") }}
@@ -117,8 +195,7 @@
                   </p>
                   <p class="doc-desc" v-if="request.path">
                     <span>
-                      {{ $t("path") }}:
-                      <code>{{ request.path || $t("none") }}</code>
+                      {{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
                     </span>
                   </p>
                   <p class="doc-desc" v-if="request.method">
@@ -198,102 +275,7 @@
                   </p>
                 </span>
               </span>
-              <span
-                class="request"
-                v-for="(request, index) in collection.requests"
-                :key="`request-${index}`"
-              >
-                <h4>
-                  <i class="material-icons">insert_drive_file</i>
-                  {{ request.name || $t("none") }}
-                </h4>
-                <p class="doc-desc" v-if="request.url">
-                  <span>
-                    {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
-                  </span>
-                </p>
-                <p class="doc-desc" v-if="request.path">
-                  <span>
-                    {{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
-                  </span>
-                </p>
-                <p class="doc-desc" v-if="request.method">
-                  <span>
-                    {{ $t("method") }}:
-                    <code>{{ request.method || $t("none") }}</code>
-                  </span>
-                </p>
-                <p class="doc-desc" v-if="request.auth">
-                  <span>
-                    {{ $t("authentication") }}:
-                    <code>{{ request.auth || $t("none") }}</code>
-                  </span>
-                </p>
-                <p class="doc-desc" v-if="request.httpUser">
-                  <span>
-                    {{ $t("username") }}:
-                    <code>{{ request.httpUser || $t("none") }}</code>
-                  </span>
-                </p>
-                <p class="doc-desc" v-if="request.httpPassword">
-                  <span>
-                    {{ $t("password") }}:
-                    <code>{{ request.httpPassword || $t("none") }}</code>
-                  </span>
-                </p>
-                <p class="doc-desc" v-if="request.bearerToken">
-                  <span>
-                    {{ $t("token") }}:
-                    <code>{{ request.bearerToken || $t("none") }}</code>
-                  </span>
-                </p>
-                <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
-                <span v-if="request.headers">
-                  <p v-for="header in request.headers" :key="header.key" class="doc-desc">
-                    <span>
-                      {{ header.key || $t("none") }}:
-                      <code>{{ header.value || $t("none") }}</code>
-                    </span>
-                  </p>
-                </span>
-                <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
-                <span v-if="request.params">
-                  <p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
-                    <span>
-                      {{ parameter.key || $t("none") }}:
-                      <code>{{ parameter.value || $t("none") }}</code>
-                    </span>
-                  </p>
-                </span>
-                <h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
-                <span v-if="request.bodyParams">
-                  <p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
-                    <span>
-                      {{ payload.key || $t("none") }}:
-                      <code>{{ payload.value || $t("none") }}</code>
-                    </span>
-                  </p>
-                </span>
-                <p class="doc-desc" v-if="request.rawParams">
-                  <span>
-                    {{ $t("parameters") }}:
-                    <code>{{ request.rawParams || $t("none") }}</code>
-                  </span>
-                </p>
-                <p class="doc-desc" v-if="request.contentType">
-                  <span>
-                    {{ $t("content_type") }}:
-                    <code>{{ request.contentType || $t("none") }}</code>
-                  </span>
-                </p>
-                <p class="doc-desc" v-if="request.requestType">
-                  <span>
-                    {{ $t("request_type") }}:
-                    <code>{{ request.requestType || $t("none") }}</code>
-                  </span>
-                </p>
-              </span>
-            </span>
+            </div>
           </div>
         </pw-section>
       </div>
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 7d29d5cbe..3c6350313 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <pw-section class="blue" :label="$t('endpoint')" ref="endpoint">
+        <pw-section class="blue" :label="$t('endpoint')" ref="endpoint" no-legend>
           <ul>
             <li>
               <label for="url">{{ $t("url") }}</label>
@@ -12,12 +12,18 @@
                 v-model="url"
                 spellcheck="false"
                 @keyup.enter="onPollSchemaClick()"
+                class="md:rounded-bl-lg"
               />
             </li>
             <div>
               <li>
                 <label for="get" class="hide-on-small-screen">&nbsp;</label>
-                <button id="get" name="get" @click="onPollSchemaClick">
+                <button
+                  id="get"
+                  name="get"
+                  @click="onPollSchemaClick"
+                  class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+                >
                   {{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
                   <span
                     ><i class="material-icons">{{
@@ -30,73 +36,76 @@
           </ul>
         </pw-section>
 
-        <pw-section class="orange" :label="$t('headers')" ref="headers">
-          <ul v-if="headers.length !== 0">
-            <li>
-              <div class="row-wrapper">
-                <label for="headerList">{{ $t("header_list") }}</label>
-                <div>
-                  <button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
-                    <i class="material-icons">clear_all</i>
-                  </button>
-                </div>
-              </div>
-            </li>
-          </ul>
-          <ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
-            <li>
-              <autocomplete
-                :placeholder="$t('header_count', { count: index + 1 })"
-                :source="commonHeaders"
-                :spellcheck="false"
-                :value="header.key"
-                @input="
-                  $store.commit('setGQLHeaderKey', {
-                    index,
-                    value: $event,
-                  })
-                "
-                autofocus
-              />
-            </li>
-            <li>
-              <input
-                :placeholder="$t('value_count', { count: index + 1 })"
-                :name="'value' + index"
-                :value="header.value"
-                @change="
-                  $store.commit('setGQLHeaderValue', {
-                    index,
-                    value: $event.target.value,
-                  })
-                "
-                autofocus
-              />
-            </li>
-            <div>
+        <pw-section class="orange" :label="$t('headers')" ref="headers" no-legend>
+          <div class="flex flex-col">
+            <label>{{ $t("headers") }}</label>
+            <ul v-if="headers.length !== 0">
               <li>
-                <button
-                  class="icon"
-                  @click="removeRequestHeader(index)"
-                  v-tooltip.bottom="$t('delete')"
-                  id="header"
-                >
-                  <i class="material-icons">delete</i>
+                <div class="row-wrapper">
+                  <label for="headerList">{{ $t("header_list") }}</label>
+                  <div>
+                    <button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
+                      <i class="material-icons">clear_all</i>
+                    </button>
+                  </div>
+                </div>
+              </li>
+            </ul>
+            <ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
+              <li>
+                <autocomplete
+                  :placeholder="$t('header_count', { count: index + 1 })"
+                  :source="commonHeaders"
+                  :spellcheck="false"
+                  :value="header.key"
+                  @input="
+                    $store.commit('setGQLHeaderKey', {
+                      index,
+                      value: $event,
+                    })
+                  "
+                  autofocus
+                />
+              </li>
+              <li>
+                <input
+                  :placeholder="$t('value_count', { count: index + 1 })"
+                  :name="'value' + index"
+                  :value="header.value"
+                  @change="
+                    $store.commit('setGQLHeaderValue', {
+                      index,
+                      value: $event.target.value,
+                    })
+                  "
+                  autofocus
+                />
+              </li>
+              <div>
+                <li>
+                  <button
+                    class="icon"
+                    @click="removeRequestHeader(index)"
+                    v-tooltip.bottom="$t('delete')"
+                    id="header"
+                  >
+                    <i class="material-icons">delete</i>
+                  </button>
+                </li>
+              </div>
+            </ul>
+            <ul>
+              <li>
+                <button class="icon" @click="addRequestHeader">
+                  <i class="material-icons">add</i>
+                  <span>{{ $t("add_new") }}</span>
                 </button>
               </li>
-            </div>
-          </ul>
-          <ul>
-            <li>
-              <button class="icon" @click="addRequestHeader">
-                <i class="material-icons">add</i>
-                <span>{{ $t("add_new") }}</span>
-              </button>
-            </li>
-          </ul>
+            </ul>
+          </div>
         </pw-section>
 
-        <pw-section class="green" :label="$t('schema')" ref="schema">
+        <pw-section class="green" :label="$t('schema')" ref="schema" no-legend>
           <div class="row-wrapper">
             <label>{{ $t("schema") }}</label>
             <div v-if="schema">
@@ -143,10 +152,11 @@
               showPrintMargin: false,
               useWorker: false,
             }"
+            styles="rounded-b-lg"
           />
           <input
             v-else
-            class="missing-data-response"
+            class="rounded-b-lg missing-data-response"
             :value="$t('waiting_receive_schema')"
             ref="status"
             id="status"
@@ -156,7 +166,7 @@
           />
         </pw-section>
 
-        <pw-section class="teal" :label="$t('query')" ref="query">
+        <pw-section class="teal" :label="$t('query')" ref="query" no-legend>
           <div class="row-wrapper gqlRunQuery">
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
@@ -195,80 +205,95 @@
               showPrintMargin: false,
               useWorker: false,
             }"
+            styles="rounded-b-lg"
           />
         </pw-section>
 
-        <pw-section class="yellow" label="Variables" ref="variables">
-          <ace-editor
-            v-model="variableString"
-            :lang="'json'"
-            :options="{
-              maxLines: 10,
-              minLines: 5,
-              fontSize: '16px',
-              autoScrollEditorIntoView: true,
-              showPrintMargin: false,
-              useWorker: false,
-            }"
-          />
-        </pw-section>
-
-        <pw-section class="purple" label="Response" ref="response">
-          <div class="row-wrapper">
-            <label for="responseField">{{ $t("response") }}</label>
-            <div>
-              <button
-                class="icon"
-                @click="downloadResponse"
-                ref="downloadResponse"
-                v-if="response"
-                v-tooltip="$t('download_file')"
-              >
-                <i class="material-icons">save_alt</i>
-              </button>
-              <button
-                class="icon"
-                @click="copyResponse"
-                ref="copyResponseButton"
-                v-if="response"
-                v-tooltip="$t('copy_response')"
-              >
-                <i class="material-icons">content_copy</i>
-              </button>
-            </div>
+        <pw-section class="yellow" :label="$t('variables')" ref="variables" no-legend>
+          <div class="flex flex-col">
+            <label>{{ $t("variables") }}</label>
+            <ace-editor
+              v-model="variableString"
+              :lang="'json'"
+              :options="{
+                maxLines: 10,
+                minLines: 5,
+                fontSize: '16px',
+                autoScrollEditorIntoView: true,
+                showPrintMargin: false,
+                useWorker: false,
+              }"
+              styles="rounded-b-lg"
+            />
+          </div>
+        </pw-section>
+
+        <pw-section class="purple" :label="$t('response')" ref="response" no-legend>
+          <div class="flex flex-col">
+            <label>{{ $t("response") }}</label>
+            <div class="row-wrapper">
+              <label for="responseField">{{ $t("response") }}</label>
+              <div>
+                <button
+                  class="icon"
+                  @click="downloadResponse"
+                  ref="downloadResponse"
+                  v-if="response"
+                  v-tooltip="$t('download_file')"
+                >
+                  <i class="material-icons">save_alt</i>
+                </button>
+                <button
+                  class="icon"
+                  @click="copyResponse"
+                  ref="copyResponseButton"
+                  v-if="response"
+                  v-tooltip="$t('copy_response')"
+                >
+                  <i class="material-icons">content_copy</i>
+                </button>
+              </div>
+            </div>
+            <ace-editor
+              v-if="response"
+              :value="response"
+              :lang="'json'"
+              :lint="false"
+              :options="{
+                maxLines: responseBodyMaxLines,
+                minLines: 10,
+                fontSize: '16px',
+                autoScrollEditorIntoView: true,
+                readOnly: true,
+                showPrintMargin: false,
+                useWorker: false,
+              }"
+              styles="rounded-b-lg"
+            />
+            <input
+              v-else
+              class="rounded-b-lg missing-data-response"
+              :value="$t('waiting_receive_response')"
+              ref="status"
+              id="status"
+              name="status"
+              readonly
+              type="text"
+            />
           </div>
-          <ace-editor
-            v-if="response"
-            :value="response"
-            :lang="'json'"
-            :lint="false"
-            :options="{
-              maxLines: responseBodyMaxLines,
-              minLines: 10,
-              fontSize: '16px',
-              autoScrollEditorIntoView: true,
-              readOnly: true,
-              showPrintMargin: false,
-              useWorker: false,
-            }"
-          />
-          <input
-            v-else
-            class="missing-data-response"
-            :value="$t('waiting_receive_response')"
-            ref="status"
-            id="status"
-            name="status"
-            readonly
-            type="text"
-          />
         </pw-section>
       </div>
+
       <aside class="sticky-inner inner-right lg:max-w-md">
-        <pw-section class="purple" :label="$t('docs')" ref="docs">
+        <pw-section class="purple" :label="$t('docs')" ref="docs" no-legend>
           <section class="flex-col">
-            <input type="text" :placeholder="$t('search')" v-model="graphqlFieldsFilterText" />
-            <tabs ref="gqlTabs">
+            <input
+              type="text"
+              :placeholder="$t('search')"
+              v-model="graphqlFieldsFilterText"
+              class="rounded-t-lg"
+            />
+            <tabs ref="gqlTabs" styles="m-4">
               <div class="gqlTabs">
                 <tab
                   v-if="queryFields.length > 0"
diff --git a/pages/index.vue b/pages/index.vue
index d1e84702d..e39fb486f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <pw-section class="blue" :label="$t('request')" ref="request">
+        <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
           <ul>
             <li class="shrink">
               <label for="method">{{ $t("method") }}</label>
@@ -40,6 +40,7 @@
               <input
                 v-if="!this.$store.state.postwoman.settings.EXPERIMENTAL_URL_BAR_ENABLED"
                 :class="{ error: !isValidURL }"
+                class="rounded-none"
                 @keyup.enter="isValidURL ? sendRequest() : null"
                 id="url"
                 name="url"
@@ -47,6 +48,7 @@
                 v-model="uri"
                 spellcheck="false"
                 @input="pathInputHandler"
+                :placeholder="$t('url')"
               />
               <url-field v-model="uri" v-else />
             </li>
@@ -72,18 +74,27 @@
               </button>
             </li>
           </ul>
-          <div>
-            <label for="name">{{ $t("token_req_name") }}</label>
-            <input id="name" name="name" type="text" v-model="name" />
-          </div>
+          <ul>
+            <li>
+              <label for="name" class="text-sm">{{ $t("token_req_name") }}</label>
+              <input
+                id="name"
+                name="name"
+                type="text"
+                v-model="name"
+                class="text-sm rounded-none"
+              />
+            </li>
+          </ul>
           <div label="Request Body" v-if="['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)">
             <ul>
               <li>
-                <label for="contentType">{{ $t("content_type") }}</label>
+                <label for="contentType" class="text-sm">{{ $t("content_type") }}</label>
                 <autocomplete
                   :source="validContentTypes"
                   :spellcheck="false"
                   v-model="contentType"
+                  styles="text-sm rounded-none"
                 />
               </li>
             </ul>
@@ -96,7 +107,7 @@
                     </pw-toggle>
                   </span>
                   <div>
-                    <label for="attachment">
+                    <label for="attachment" class="p-0">
                       <button
                         class="icon"
                         @click="$refs.attachment.click()"
@@ -123,7 +134,7 @@
                       @change="uploadAttachment"
                       multiple
                     />
-                    <label for="payload">
+                    <label for="payload" class="p-0">
                       <button
                         class="icon"
                         @click="$refs.payload.click()"
@@ -318,8 +329,23 @@
               />
             </tab>
 
+            <tab
+              :id="'headers'"
+              :label="
+                $t('headers') + `${headers.length !== 0 ? ' \xA0 • \xA0 ' + headers.length : ''}`
+              "
+            >
+              <http-headers
+                :headers="headers"
+                @clear-content="clearContent"
+                @set-route-query-state="setRouteQueryState"
+                @remove-request-header="removeRequestHeader"
+                @add-request-header="addRequestHeader"
+              />
+            </tab>
+
             <tab :id="'authentication'" :label="$t('authentication')">
-              <pw-section class="teal" :label="$t('authentication')" ref="authentication">
+              <pw-section class="teal" :label="$t('authentication')" ref="authentication" no-legend>
                 <ul>
                   <li>
                     <div class="row-wrapper">
@@ -401,6 +427,7 @@
                   </pw-toggle>
                 </div>
               </pw-section>
+
               <pw-section
                 v-if="showTokenRequest"
                 class="red"
@@ -522,27 +549,13 @@
               </pw-section>
             </tab>
 
-            <tab
-              :id="'headers'"
-              :label="
-                $t('headers') + `${headers.length !== 0 ? ' \xA0 • \xA0 ' + headers.length : ''}`
-              "
-            >
-              <http-headers
-                :headers="headers"
-                @clear-content="clearContent"
-                @set-route-query-state="setRouteQueryState"
-                @remove-request-header="removeRequestHeader"
-                @add-request-header="addRequestHeader"
-              />
-            </tab>
-
             <tab :id="'pre_request_script'" :label="$t('pre_request_script')">
               <pw-section
                 v-if="showPreRequestScript"
                 class="orange"
                 :label="$t('pre_request_script')"
                 ref="preRequest"
+                no-legend
               >
                 <ul>
                   <li>
@@ -570,6 +583,7 @@
                         showPrintMargin: false,
                         useWorker: false,
                       }"
+                      styles="rounded-b-lg"
                     />
                   </li>
                 </ul>
@@ -582,6 +596,7 @@
                 class="orange"
                 :label="$t('tests')"
                 ref="postRequestTests"
+                no-legend
               >
                 <ul>
                   <li>
@@ -609,6 +624,7 @@
                         showPrintMargin: false,
                         useWorker: false,
                       }"
+                      styles="rounded-b-lg"
                     />
                     <div v-if="testReports.length !== 0">
                       <div class="row-wrapper">
@@ -654,7 +670,10 @@
             <li>
               <label for="status">{{ $t("status") }}</label>
               <input
-                :class="statusCategory ? statusCategory.className : ''"
+                :class="[
+                  statusCategory ? statusCategory.className : '',
+                  response.status ? '' : 'rounded-b-lg',
+                ]"
                 :value="response.status || $t('waiting_send_req')"
                 ref="status"
                 id="status"
@@ -733,7 +752,7 @@
           </div>
         </div>
       </div>
-      <div slot="body">
+      <div slot="body" class="flex flex-col">
         <div class="row-wrapper">
           <label for="token-req-list">{{ $t("token_req_list") }}</label>
           <div>
diff --git a/pages/settings.vue b/pages/settings.vue
index c89104182..785165c6c 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,173 +1,147 @@
 <template>
   <div class="page">
-    <pw-section class="green" :label="$t('account')" ref="account">
-      <ul>
-        <li>
-          <div v-if="fb.currentUser">
-            <button class="icon">
-              <img
-                v-if="fb.currentUser.photoURL"
-                :src="fb.currentUser.photoURL"
-                class="rounded-full material-icons"
-              />
-              <i v-else class="material-icons">account_circle</i>
-              <span>
-                {{ fb.currentUser.displayName || $t("nothing_found") }}
-              </span>
-            </button>
-            <br />
-            <button class="icon">
-              <i class="material-icons">email</i>
-              <span>
-                {{ fb.currentUser.email || $t("nothing_found") }}
-              </span>
-            </button>
-            <br />
-            <logout />
-            <p v-for="setting in fb.currentSettings" :key="setting.id">
-              <pw-toggle
-                :key="setting.name"
-                :on="setting.value"
-                @change="toggleSettings(setting.name, setting.value)"
-              >
-                {{ $t(setting.name) + " " + $t("sync") }}
-                {{ setting.value ? $t("enabled") : $t("disabled") }}
-              </pw-toggle>
-            </p>
-            <p v-if="fb.currentSettings.length !== 3">
-              <button class="" @click="initSettings">
-                <i class="material-icons">sync</i>
-                <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
-              </button>
-            </p>
-          </div>
-          <div v-else>
-            <label>{{ $t("login_with") }}</label>
-            <p>
-              <login />
-            </p>
-          </div>
-        </li>
-      </ul>
-    </pw-section>
-
-    <pw-section class="teal" :label="$t('theme')" ref="theme">
-      <ul>
-        <color-mode-picker />
-      </ul>
-      <ul>
-        <accent-mode-picker />
-      </ul>
-      <ul>
-        <li>
-          <span>
-            <pw-toggle
-              :on="settings.FRAME_COLORS_ENABLED"
-              @change="toggleSetting('FRAME_COLORS_ENABLED')"
-            >
-              {{ $t("multi_color") }}
-              {{ settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled") }}
-            </pw-toggle>
-          </span>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <span>
-            <pw-toggle
-              :on="settings.SCROLL_INTO_ENABLED"
-              @change="toggleSetting('SCROLL_INTO_ENABLED')"
-            >
-              {{ $t("scrollInto_use_toggle") }}
-              {{ settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
-            </pw-toggle>
-          </span>
-        </li>
-      </ul>
-    </pw-section>
-
-    <pw-section class="purple" :label="$t('extensions')" ref="extensions">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <pw-toggle
-              :on="settings.EXTENSIONS_ENABLED"
-              @change="toggleSetting('EXTENSIONS_ENABLED')"
-            >
-              {{ $t("extensions_use_toggle") }}
-            </pw-toggle>
-          </div>
-        </li>
-      </ul>
-      <ul class="info">
-        <li v-if="extensionVersion != null">
-          <p>
-            {{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{
-              extensionVersion.minor
-            }}
-          </p>
-        </li>
-        <li v-else>
-          <p>{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}</p>
-        </li>
-      </ul>
-    </pw-section>
-
-    <pw-section class="blue" :label="$t('proxy')" ref="proxy">
-      <ul>
-        <li>
-          <div class="row-wrapper">
+    <pw-section class="green" :label="$t('account')" ref="account" no-legend>
+      <div class="flex flex-col">
+        <label>{{ $t("account") }}</label>
+        <div v-if="fb.currentUser">
+          <button class="icon">
+            <img
+              v-if="fb.currentUser.photoURL"
+              :src="fb.currentUser.photoURL"
+              class="rounded-full material-icons"
+            />
+            <i v-else class="material-icons">account_circle</i>
             <span>
-              <pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
-                {{ $t("proxy") }}
-                {{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
-              </pw-toggle>
+              {{ fb.currentUser.displayName || $t("nothing_found") }}
             </span>
-            <a
-              href="https://github.com/hoppscotch/hoppscotch/wiki/Proxy"
-              target="_blank"
-              rel="noopener"
+          </button>
+          <br />
+          <button class="icon">
+            <i class="material-icons">email</i>
+            <span>
+              {{ fb.currentUser.email || $t("nothing_found") }}
+            </span>
+          </button>
+          <br />
+          <logout />
+          <p v-for="setting in fb.currentSettings" :key="setting.id">
+            <pw-toggle
+              :key="setting.name"
+              :on="setting.value"
+              @change="toggleSettings(setting.name, setting.value)"
             >
-              <button class="icon" v-tooltip="$t('wiki')">
-                <i class="material-icons">help_outline</i>
-              </button>
-            </a>
-          </div>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <label for="url">{{ $t("url") }}</label>
-            <button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
-              <i class="material-icons">clear_all</i>
-            </button>
-          </div>
-          <input
-            id="url"
-            type="url"
-            v-model="settings.PROXY_URL"
-            :disabled="!settings.PROXY_ENABLED"
-          />
-        </li>
-      </ul>
-      <ul class="info">
-        <li>
-          <p>
-            {{ $t("postwoman_official_proxy_hosting") }}
-            <br />
-            {{ $t("read_the") }}
-            <a
-              class="link"
-              href="https://apollosoftware.xyz/legal/postwoman"
-              target="_blank"
-              rel="noopener"
-            >
-              {{ $t("apollosw_privacy_policy") }} </a
-            >.
+              {{ $t(setting.name) + " " + $t("sync") }}
+              {{ setting.value ? $t("enabled") : $t("disabled") }}
+            </pw-toggle>
           </p>
-        </li>
-      </ul>
+          <p v-if="fb.currentSettings.length !== 3">
+            <button class="" @click="initSettings">
+              <i class="material-icons">sync</i>
+              <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
+            </button>
+          </p>
+        </div>
+        <div v-else>
+          <label>{{ $t("login_with") }}</label>
+          <p>
+            <login />
+          </p>
+        </div>
+      </div>
+    </pw-section>
+
+    <pw-section class="teal" :label="$t('theme')" ref="theme" no-legend>
+      <div class="flex flex-col">
+        <label>{{ $t("theme") }}</label>
+        <color-mode-picker />
+        <accent-mode-picker />
+        <span>
+          <pw-toggle
+            :on="settings.FRAME_COLORS_ENABLED"
+            @change="toggleSetting('FRAME_COLORS_ENABLED')"
+          >
+            {{ $t("multi_color") }}
+            {{ settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled") }}
+          </pw-toggle>
+        </span>
+        <span>
+          <pw-toggle
+            :on="settings.SCROLL_INTO_ENABLED"
+            @change="toggleSetting('SCROLL_INTO_ENABLED')"
+          >
+            {{ $t("scrollInto_use_toggle") }}
+            {{ settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
+          </pw-toggle>
+        </span>
+      </div>
+    </pw-section>
+
+    <pw-section class="purple" :label="$t('extensions')" ref="extensions" no-legend>
+      <div class="flex flex-col">
+        <label>{{ $t("extensions") }}</label>
+        <div class="row-wrapper">
+          <pw-toggle
+            :on="settings.EXTENSIONS_ENABLED"
+            @change="toggleSetting('EXTENSIONS_ENABLED')"
+          >
+            {{ $t("extensions_use_toggle") }}
+          </pw-toggle>
+        </div>
+        <p v-if="extensionVersion != null" class="info">
+          {{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }}
+        </p>
+        <p v-else class="info">
+          {{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}
+        </p>
+      </div>
+    </pw-section>
+
+    <pw-section class="blue" :label="$t('proxy')" ref="proxy" no-legend>
+      <div class="flex flex-col">
+        <label>{{ $t("proxy") }}</label>
+        <div class="row-wrapper">
+          <span>
+            <pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
+              {{ $t("proxy") }}
+              {{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
+            </pw-toggle>
+          </span>
+          <a
+            href="https://github.com/hoppscotch/hoppscotch/wiki/Proxy"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon" v-tooltip="$t('wiki')">
+              <i class="material-icons">help_outline</i>
+            </button>
+          </a>
+        </div>
+        <div class="row-wrapper">
+          <label for="url">{{ $t("url") }}</label>
+          <button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
+            <i class="material-icons">clear_all</i>
+          </button>
+        </div>
+        <input
+          id="url"
+          type="url"
+          v-model="settings.PROXY_URL"
+          :disabled="!settings.PROXY_ENABLED"
+        />
+        <p class="info">
+          {{ $t("postwoman_official_proxy_hosting") }}
+          <br />
+          {{ $t("read_the") }}
+          <a
+            class="link"
+            href="https://apollosoftware.xyz/legal/postwoman"
+            target="_blank"
+            rel="noopener"
+          >
+            {{ $t("apollosw_privacy_policy") }} </a
+          >.
+        </p>
+      </div>
       <!--
       PROXY SETTINGS URL AND KEY
       --------------
@@ -185,33 +159,28 @@
       -->
     </pw-section>
 
-    <pw-section class="red" :label="$t('experiments')" ref="experiments">
-      <ul class="info">
-        <li>
-          <p>
-            {{ $t("experiments_notice") }}
-            <a
-              class="link"
-              href="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
-              target="_blank"
-              rel="noopener noreferrer"
-              >{{ $t("contact_us") }}</a
-            >.
-          </p>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <pw-toggle
-              :on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
-              @change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
-            >
-              {{ $t("use_experimental_url_bar") }}
-            </pw-toggle>
-          </div>
-        </li>
-      </ul>
+    <pw-section class="red" :label="$t('experiments')" ref="experiments" no-legend>
+      <div class="flex flex-col">
+        <label>{{ $t("experiments") }}</label>
+        <p class="info">
+          {{ $t("experiments_notice") }}
+          <a
+            class="link"
+            href="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
+            target="_blank"
+            rel="noopener noreferrer"
+            >{{ $t("contact_us") }}</a
+          >.
+        </p>
+        <div class="row-wrapper">
+          <pw-toggle
+            :on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
+            @change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
+          >
+            {{ $t("use_experimental_url_bar") }}
+          </pw-toggle>
+        </div>
+      </div>
     </pw-section>
   </div>
 </template>