From 11816111ea117ca1fef640832461ebc5eae6a6df Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 13 Aug 2021 16:44:02 +0530
Subject: [PATCH] refactor(ui): better font weight, icon hover states, etc

---
 assets/scss/styles.scss                       | 18 +++-
 assets/scss/themes.scss                       | 12 +--
 components/app/Announcement.vue               | 68 ++++---------
 components/app/Header.vue                     | 99 ++++++++++---------
 components/app/Search.vue                     |  2 +-
 components/app/Section.vue                    |  2 +-
 components/app/Share.vue                      |  2 +-
 components/app/Shortcuts.vue                  |  9 +-
 components/app/Sidenav.vue                    |  2 +-
 components/button/Primary.vue                 |  1 +
 components/button/Secondary.vue               | 16 +--
 components/collections/ChooseType.vue         |  1 -
 components/collections/SaveRequest.vue        |  2 +-
 components/collections/graphql/Collection.vue |  4 +-
 components/collections/graphql/Folder.vue     |  4 +-
 components/collections/graphql/Request.vue    |  5 +-
 components/collections/graphql/index.vue      |  2 +-
 components/collections/index.vue              | 35 ++++---
 components/collections/my/Collection.vue      |  4 +-
 components/collections/my/Folder.vue          |  4 +-
 components/collections/my/Request.vue         |  5 +-
 components/collections/teams/Collection.vue   |  4 +-
 components/collections/teams/Folder.vue       |  4 +-
 components/collections/teams/Request.vue      |  5 +-
 components/environments/Edit.vue              | 12 +--
 components/environments/Environment.vue       |  4 +-
 components/environments/index.vue             |  2 +-
 components/firebase/Login.vue                 |  2 +-
 components/graphql/Field.vue                  |  8 +-
 components/graphql/Request.vue                |  1 -
 components/graphql/RequestOptions.vue         | 38 ++++---
 components/graphql/Response.vue               |  6 +-
 components/graphql/Sidebar.vue                |  3 +-
 components/graphql/Type.vue                   |  5 +-
 components/graphql/TypeLink.vue               |  1 -
 components/history/graphql/Card.vue           | 13 +--
 components/history/index.vue                  |  1 -
 components/history/rest/Card.vue              | 15 +--
 .../http/{Auth.vue => Authorization.vue}      | 97 +++++++++++++-----
 components/http/Body.vue                      | 31 +++---
 components/http/BodyParameters.vue            | 25 ++---
 components/http/CodegenModal.vue              |  6 +-
 components/http/Headers.vue                   | 18 ++--
 components/http/ImportCurl.vue                |  3 +-
 components/http/Parameters.vue                | 21 ++--
 components/http/PreRequestScript.vue          | 52 +++++++---
 components/http/RawBody.vue                   | 21 ++--
 components/http/Request.vue                   | 16 ++-
 components/http/ResponseMeta.vue              | 12 ++-
 components/http/TestResult.vue                | 14 +--
 components/http/Tests.vue                     | 52 +++++++---
 components/landing/CTA.vue                    |  4 +-
 components/landing/Features.vue               | 14 +--
 components/landing/Footer.vue                 |  8 +-
 components/landing/Hero.vue                   |  2 -
 components/landing/Stats.vue                  |  4 +-
 components/landing/Users.vue                  |  4 +-
 components/lenses/HeadersRenderer.vue         | 30 +-----
 .../lenses/renderers/HTMLLensRenderer.vue     |  3 +-
 .../lenses/renderers/ImageLensRenderer.vue    |  3 +-
 .../lenses/renderers/JSONLensRenderer.vue     |  3 +-
 .../lenses/renderers/RawLensRenderer.vue      |  3 +-
 .../lenses/renderers/XMLLensRenderer.vue      |  3 +-
 components/realtime/Log.vue                   |  5 +-
 components/realtime/Mqtt.vue                  |  7 +-
 components/realtime/Socketio.vue              | 14 ++-
 components/realtime/Sse.vue                   | 18 ++--
 components/realtime/Websocket.vue             | 12 +--
 components/smart/AccentModePicker.vue         |  1 +
 components/smart/AceEditor.vue                |  6 +-
 components/smart/AutoComplete.vue             |  7 +-
 components/smart/ColorModePicker.vue          |  1 +
 components/smart/ConfirmModal.vue             |  2 +-
 components/smart/DeletableChip.vue            |  4 +-
 components/smart/EnvInput.vue                 |  9 +-
 components/smart/Item.vue                     |  4 +-
 components/smart/Modal.vue                    |  1 +
 components/smart/Tabs.vue                     |  2 +-
 components/smart/Toggle.vue                   |  2 +-
 components/tab/Primary.vue                    |  1 -
 components/tab/Secondary.vue                  |  1 -
 components/teams/Edit.vue                     | 18 +---
 components/teams/Team.vue                     |  7 +-
 components/teams/index.vue                    |  2 +-
 helpers/types/HoppRESTAuth.ts                 |  3 +
 helpers/types/HoppRESTRequest.ts              |  5 +-
 lang/en-US.json                               | 20 +++-
 layouts/default.vue                           |  1 -
 layouts/error.vue                             |  4 +-
 newstore/RESTSession.ts                       |  1 +
 pages/documentation.vue                       |  6 +-
 pages/enter.vue                               |  2 +-
 pages/index.vue                               |  2 +-
 pages/settings.vue                            | 23 ++---
 94 files changed, 547 insertions(+), 514 deletions(-)
 rename components/http/{Auth.vue => Authorization.vue} (70%)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 0ebc0cbc1..60442a765 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -35,6 +35,16 @@
   @apply text-accentContrast;
 }
 
+input::placeholder {
+  @apply text-secondaryDark;
+  @apply opacity-25;
+}
+
+input {
+  @apply text-secondaryDark;
+  @apply font-medium;
+}
+
 html {
   scroll-behavior: smooth;
 }
@@ -141,7 +151,7 @@ a {
 
 [interactive] > div {
   @apply flex;
-  @apply h-full;
+  @apply flex-1;
 }
 
 .tippy-content > div {
@@ -174,7 +184,7 @@ hr {
   @apply bg-primary;
   @apply truncate;
   @apply rounded;
-  @apply font-semibold;
+  @apply text-secondaryDark;
   @apply border border-divider;
   @apply transition;
   @apply focus:(outline-none border-accent);
@@ -196,7 +206,7 @@ button {
 }
 
 .floating-input ~ label {
-  @apply font-semibold;
+  @apply font-medium;
   @apply py-0.5;
   @apply px-2;
   @apply m-2;
@@ -352,7 +362,7 @@ input[type="checkbox"] {
       @apply text-primary;
       @apply justify-start;
       @apply shadow;
-      @apply font-semibold;
+      @apply font-medium;
 
       font-size: var(--body-font-size);
       line-height: var(--body-line-height);
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 28b3feec3..b3080c167 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -24,7 +24,7 @@
   // Dark Border color
   --divider-dark-color: theme("colors.dark.300");
   // Error color
-  --error-color: theme("colors.dark.800");
+  --error-color: theme("colors.warm-gray.800");
   // Tooltip color
   --tooltip-color: theme("colors.true-gray.100");
   // Popover color
@@ -53,7 +53,7 @@
   // Dark Border color
   --divider-dark-color: theme("colors.blue-gray.300");
   // Error color
-  --error-color: theme("colors.blue-gray.700");
+  --error-color: theme("colors.yellow.100");
   // Tooltip color
   --tooltip-color: theme("colors.blue-gray.800");
   // Popover color
@@ -82,7 +82,7 @@
   // Dark Border color
   --divider-dark-color: theme("colors.dark.300");
   // Error color
-  --error-color: theme("colors.dark.800");
+  --error-color: theme("colors.warm-gray.900");
   // Tooltip color
   --tooltip-color: theme("colors.true-gray.100");
   // Popover color
@@ -308,7 +308,7 @@
   // Upper secondary sticky fold
   --upper-secondary-sticky-fold: 6.125rem;
   // Upper tertiary sticky fold
-  --upper-tertiary-sticky-fold: 8.125rem;
+  --upper-tertiary-sticky-fold: 8.188rem;
   // Lower primary sticky fold
   --lower-primary-sticky-fold: 3rem;
   // Lower secondary sticky fold
@@ -329,7 +329,7 @@
   // Upper secondary sticky fold
   --upper-secondary-sticky-fold: 6.625rem;
   // Upper tertiary sticky fold
-  --upper-tertiary-sticky-fold: 8.875rem;
+  --upper-tertiary-sticky-fold: 8.813rem;
   // Lower primary sticky fold
   --lower-primary-sticky-fold: 3.25rem;
   // Lower secondary sticky fold
@@ -350,7 +350,7 @@
   // Upper secondary sticky fold
   --upper-secondary-sticky-fold: 7.125rem;
   // Upper tertiary sticky fold
-  --upper-tertiary-sticky-fold: 9.625rem;
+  --upper-tertiary-sticky-fold: 9.5rem;
   // Lower primary sticky fold
   --lower-primary-sticky-fold: 3.5rem;
   // Lower secondary sticky fold
diff --git a/components/app/Announcement.vue b/components/app/Announcement.vue
index e6f98cd4f..6fd8d0510 100644
--- a/components/app/Announcement.vue
+++ b/components/app/Announcement.vue
@@ -1,54 +1,26 @@
 <template>
-  <div class="bg-dividerLight border-b border-divider flex justify-between">
-    <span class="flex">
-      <SmartLink
-        to="https://forms.gle/8yFiEynXB7h477Ns6"
-        blank
-        class="
-          flex
-          py-2
-          px-4
-          transition
-          relative
-          items-center
-          justify-center
-          group
-        "
-      >
-        <i class="mr-4 material-icons">science</i>
-        <span class="text-secondaryDark">
-          <span class="md:hidden"> Beta Layout </span>
-          <span class="hidden md:inline">
-            You're currently viewing an experimental beta layout
-          </span>
+  <div class="bg-error flex justify-between">
+    <span
+      class="
+        flex
+        py-2
+        px-4
+        transition
+        relative
+        items-center
+        justify-center
+        group
+      "
+    >
+      <i class="mr-2 material-icons">info_outline</i>
+      <span class="text-secondaryDark">
+        <span class="md:hidden">
+          {{ $t("helpers.offline_short") }}
         </span>
-        <span
-          class="
-            border-l border-divider
-            flex
-            font-semibold
-            text-accent
-            ml-4
-            pl-4
-            transition
-            items-center
-            justify-center
-            group-hover:text-accentDark
-          "
-        >
-          <span class="md:hidden"> Give Feedback </span>
-          <span class="hidden md:inline"> Report a problem </span>
+        <span class="hidden md:inline">
+          {{ $t("helpers.offline") }}
         </span>
-      </SmartLink>
-      <SmartLink
-        to="https://hoppscotch.io"
-        class="flex transition items-center justify-center group"
-      >
-        <span class="text-secondaryDark">
-          Switch back to the Hoppscotch website
-        </span>
-      </SmartLink>
+      </span>
     </span>
-    <ButtonSecondary icon="close" />
   </div>
 </template>
diff --git a/components/app/Header.vue b/components/app/Header.vue
index de51ee9e8..8ad7c617f 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -1,53 +1,56 @@
 <template>
-  <header class="flex flex-1 py-2 px-4 items-center justify-between">
-    <div class="font-bold flex-shrink-0 inline-flex items-center">
-      <AppLogo />
-    </div>
-    <div class="space-x-2 flex-shrink-0 inline-flex items-center">
-      <AppGitHubStarButton class="flex mx-2 mt-1" />
-      <ButtonSecondary
-        id="installPWA"
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('header.install_pwa')"
-        icon="offline_bolt"
-        @click.native="showInstallPrompt()"
-      />
-      <ButtonPrimary
-        v-if="currentUser === null"
-        label="Login"
-        @click.native="showLogin = true"
-      />
-      <span v-else>
-        <tippy ref="user" interactive trigger="click" theme="popover" arrow>
-          <template #trigger>
-            <ProfilePicture
-              v-if="currentUser.photoURL"
-              v-tippy="{ theme: 'tooltip' }"
-              :url="currentUser.photoURL"
-              :alt="currentUser.displayName"
-              :title="currentUser.displayName"
-              indicator
-              :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
+  <div>
+    <header class="flex flex-1 py-2 px-4 items-center justify-between">
+      <div class="font-bold flex-shrink-0 inline-flex items-center">
+        Hoppscotch
+      </div>
+      <div class="space-x-2 flex-shrink-0 inline-flex items-center">
+        <AppGitHubStarButton class="flex mx-2 mt-1" />
+        <ButtonSecondary
+          id="installPWA"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('header.install_pwa')"
+          icon="offline_bolt"
+          @click.native="showInstallPrompt()"
+        />
+        <ButtonPrimary
+          v-if="currentUser === null"
+          label="Login"
+          @click.native="showLogin = true"
+        />
+        <span v-else>
+          <tippy ref="user" interactive trigger="click" theme="popover" arrow>
+            <template #trigger>
+              <ProfilePicture
+                v-if="currentUser.photoURL"
+                v-tippy="{ theme: 'tooltip' }"
+                :url="currentUser.photoURL"
+                :alt="currentUser.displayName"
+                :title="currentUser.displayName"
+                indicator
+                :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
+              />
+              <ButtonSecondary
+                v-else
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('account')"
+                icon="account_circle"
+              />
+            </template>
+            <SmartItem
+              to="/settings"
+              icon="settings"
+              :label="$t('navigation.settings')"
+              @click.native="$refs.user.tippy().hide()"
             />
-            <ButtonSecondary
-              v-else
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('account')"
-              icon="account_circle"
-            />
-          </template>
-          <SmartItem
-            to="/settings"
-            icon="settings"
-            :label="$t('navigation.settings')"
-            @click.native="$refs.user.tippy().hide()"
-          />
-          <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
-        </tippy>
-      </span>
-    </div>
-    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
-  </header>
+            <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
+          </tippy>
+        </span>
+      </div>
+      <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+    </header>
+    <AppAnnouncement v-if="!isOnLine" />
+  </div>
 </template>
 
 <script>
diff --git a/components/app/Search.vue b/components/app/Search.vue
index 0d506a870..754171724 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -34,7 +34,7 @@
           v-for="(map, mapIndex) in filteredMappings"
           :key="`map-${mapIndex}`"
         >
-          <h5 class="font-normal my-2 text-secondaryLight py-2 px-4">
+          <h5 class="my-2 text-secondaryLight py-2 px-4">
             {{ map.section }}
           </h5>
           <div
diff --git a/components/app/Section.vue b/components/app/Section.vue
index f84e338bd..a2694ca81 100644
--- a/components/app/Section.vue
+++ b/components/app/Section.vue
@@ -1,5 +1,5 @@
 <template>
-  <section :id="label.toLowerCase()" class="flex flex-col flex-1">
+  <section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
     <slot></slot>
   </section>
 </template>
diff --git a/components/app/Share.vue b/components/app/Share.vue
index 214059f0c..f8f527f64 100644
--- a/components/app/Share.vue
+++ b/components/app/Share.vue
@@ -24,7 +24,7 @@
           </a>
           <button class="share-link" @click="copyAppLink">
             <span class="font-icon h-6 text-xl w-6">{{ copyIcon }}</span>
-            <span class="font-medium mt-3">
+            <span class="mt-3">
               {{ $t("app.copy") }}
             </span>
           </button>
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 1e3e8a303..78acbac43 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -15,7 +15,11 @@
       >
         <h3 class="ml-4 heading">{{ $t("shortcuts") }}</h3>
         <div class="flex">
-          <ButtonSecondary icon="close" @click.native="close()" />
+          <ButtonSecondary
+            icon="close"
+            class="rounded"
+            @click.native="close()"
+          />
         </div>
       </div>
       <div class="border-b border-dividerLight">
@@ -28,7 +32,6 @@
               border border-dividerLight
               rounded
               flex
-              font-semibold font-mono
               w-full
               py-2
               pr-2
@@ -54,7 +57,7 @@
           :key="`map-${mapIndex}`"
           class="space-y-4 py-4 px-6"
         >
-          <h5 class="font-bold text-secondaryDark">
+          <h5 class="font-semibold text-secondaryDark">
             {{ map.section }}
           </h5>
           <div
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index 337a9ad26..e59bc66f2 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -130,7 +130,7 @@ export default defineComponent({
 
   span {
     @apply mt-2;
-    @apply font-semibold;
+    @apply font-font-medium;
   }
 
   &.exact-active-link {
diff --git a/components/button/Primary.vue b/components/button/Primary.vue
index 7b1d38345..d029f41e5 100644
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -11,6 +11,7 @@
       items-center
       justify-center
       focus:outline-none
+      focus-visible:bg-accentDark
     "
     :class="[
       color
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index 67bc81825..3620d992f 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -4,7 +4,7 @@
     :exact="exact"
     :blank="blank"
     class="
-      font-semibold
+      font-medium
       py-2
       transition
       inline-flex
@@ -12,13 +12,14 @@
       justify-center
       hover:bg-primaryDark
       focus:outline-none
+      focus-visible:bg-primaryDark
     "
     :class="[
       color
         ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
         : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
-      label ? 'px-4' : 'px-2',
-      rounded ? 'rounded-full' : 'rounded',
+      label ? 'rounded px-4' : 'px-2',
+      { 'rounded-full': rounded },
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
       { 'px-6 py-4 text-lg': large },
@@ -53,14 +54,7 @@
       <kbd
         v-for="(key, index) in shortcut"
         :key="`key-${index}`"
-        class="
-          bg-dividerLight
-          rounded
-          text-secondaryLight
-          ml-1
-          px-1
-          inline-flex
-        "
+        class="bg-dividerLight text-secondaryLight ml-1 px-1 inline-flex"
       >
         {{ key }}
       </kbd>
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index 7380c8764..20b4dc2f6 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -21,7 +21,6 @@
                 bg-primaryLight
                 border-b border-dividerLight
                 flex
-                font-semibold
                 w-full
                 py-2
                 px-4
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index 947252382..5c505c951 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -16,7 +16,7 @@
             {{ $t("request.name") }}
           </label>
         </div>
-        <label class="font-semibold px-4 pt-4 pb-4">
+        <label class="px-4 pt-4 pb-4">
           {{ $t("collection.select_location") }}
         </label>
         <CollectionsGraphql
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index a9fbaeb99..e1b22aec6 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -20,9 +20,7 @@
       <span
         class="
           cursor-pointer
-          flex
-          font-semibold
-          flex-1
+          flex flex-1
           min-w-0
           py-2
           pr-2
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index f3a09869c..b6f41ec13 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -20,9 +20,7 @@
       <span
         class="
           cursor-pointer
-          flex
-          font-semibold
-          flex-1
+          flex flex-1
           min-w-0
           py-2
           pr-2
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index d22bd468c..a62cf7a74 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -12,7 +12,6 @@
         class="
           cursor-pointer
           flex
-          font-mono font-bold
           mx-2
           w-12
           justify-center
@@ -28,9 +27,7 @@
       <span
         class="
           cursor-pointer
-          flex
-          font-semibold
-          flex-1
+          flex flex-1
           min-w-0
           py-2
           pr-2
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 4f76df9c0..5b53beb50 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -16,7 +16,6 @@
             bg-primaryLight
             border-b border-dividerLight
             flex
-            font-semibold font-mono
             w-full
             py-2
             pr-2
@@ -30,6 +29,7 @@
         <ButtonSecondary
           icon="add"
           :label="$t('new')"
+          class="rounded-none"
           @click.native="displayModalAdd(true)"
         />
         <ButtonSecondary
diff --git a/components/collections/index.vue b/components/collections/index.vue
index f4c29a1d3..b6279801e 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -16,7 +16,6 @@
             bg-primaryLight
             border-b border-dividerLight
             flex
-            font-semibold font-mono
             w-full
             py-2
             pr-2
@@ -42,6 +41,7 @@
           "
           v-tippy="{ theme: 'tooltip' }"
           disabled
+          class="rounded-none"
           icon="add"
           :title="$t('team.no_access')"
           :label="$t('new')"
@@ -50,19 +50,29 @@
           v-else
           icon="add"
           :label="$t('new')"
+          class="rounded-none"
           @click.native="displayModalAdd(true)"
         />
-        <ButtonSecondary
-          v-if="!saveRequest"
-          v-tippy="{ theme: 'tooltip' }"
-          :disabled="
-            collectionsType.type == 'team-collections' &&
-            collectionsType.selectedTeam == undefined
-          "
-          icon="import_export"
-          :title="$t('modal.import_export')"
-          @click.native="displayModalImportExport(true)"
-        />
+        <span class="flex">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            to="https://docs.hoppscotch.io/"
+            blank
+            :title="$t('wiki')"
+            icon="help_outline"
+          />
+          <ButtonSecondary
+            v-if="!saveRequest"
+            v-tippy="{ theme: 'tooltip' }"
+            :disabled="
+              collectionsType.type == 'team-collections' &&
+              collectionsType.selectedTeam == undefined
+            "
+            icon="import_export"
+            :title="$t('modal.import_export')"
+            @click.native="displayModalImportExport(true)"
+          />
+        </span>
       </div>
     </div>
     <div class="flex flex-col">
@@ -99,7 +109,6 @@
       v-if="collections.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
       <span class="text-center pb-4">
         {{ $t("empty.collections") }}
       </span>
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 9525adb17..e5912bc92 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -20,9 +20,7 @@
       <span
         class="
           cursor-pointer
-          flex
-          font-semibold
-          flex-1
+          flex flex-1
           min-w-0
           py-2
           pr-2
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index c3425d175..d4f001f00 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -20,9 +20,7 @@
       <span
         class="
           cursor-pointer
-          flex
-          font-semibold
-          flex-1
+          flex flex-1
           min-w-0
           py-2
           pr-2
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index b48fd6221..ad00ee4ed 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -12,7 +12,6 @@
         class="
           cursor-pointer
           flex
-          font-mono font-bold
           mx-2
           w-12
           justify-center
@@ -36,9 +35,7 @@
       <span
         class="
           cursor-pointer
-          flex
-          font-semibold
-          flex-1
+          flex flex-1
           min-w-0
           py-2
           pr-2
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 760e2a7b1..67d47caab 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -12,9 +12,7 @@
       <span
         class="
           cursor-pointer
-          flex
-          font-semibold
-          flex-1
+          flex flex-1
           min-w-0
           py-2
           pr-2
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index eec9a1465..202d30a8f 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -12,9 +12,7 @@
       <span
         class="
           cursor-pointer
-          flex
-          font-semibold
-          flex-1
+          flex flex-1
           min-w-0
           py-2
           pr-2
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index 62a9d045f..83708c088 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -5,7 +5,6 @@
         class="
           cursor-pointer
           flex
-          font-mono font-bold
           mx-2
           w-12
           justify-center
@@ -29,9 +28,7 @@
       <span
         class="
           cursor-pointer
-          flex
-          font-semibold
-          flex-1
+          flex flex-1
           min-w-0
           py-2
           pr-2
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 0c7e463b7..705dcfbca 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -17,7 +17,7 @@
           </label>
         </div>
         <div class="flex flex-1 justify-between items-center">
-          <label for="variableList" class="font-semibold p-4">
+          <label for="variableList" class="p-4">
             {{ $t("env_variable_list") }}
           </label>
           <div class="flex">
@@ -25,12 +25,14 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
               :icon="clearIcon"
+              class="rounded"
               @click.native="clearContent()"
             />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               icon="add"
               :title="$t('add.new')"
+              class="rounded"
               @click.native="addEnvironmentVariable"
             />
           </div>
@@ -45,9 +47,7 @@
               v-model="variable.key"
               class="
                 bg-primaryLight
-                flex
-                font-semibold font-mono
-                flex-1
+                flex flex-1
                 py-2
                 px-4
                 truncate
@@ -60,9 +60,7 @@
               v-model="variable.value"
               class="
                 bg-primaryLight
-                flex
-                font-semibold font-mono
-                flex-1
+                flex flex-1
                 py-2
                 px-4
                 truncate
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index 605b8f8ee..01dfec4f1 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -9,9 +9,7 @@
     <span
       class="
         cursor-pointer
-        flex
-        font-semibold
-        flex-1
+        flex flex-1
         min-w-0
         py-2
         pr-2
diff --git a/components/environments/index.vue b/components/environments/index.vue
index cca1e9133..a8b7d4435 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -18,7 +18,6 @@
             bg-primaryLight
             border-b border-dividerLight
             flex
-            font-semibold
             w-full
             py-2
             px-4
@@ -43,6 +42,7 @@
         <ButtonSecondary
           icon="add"
           :label="$t('new')"
+          class="rounded-none"
           @click.native="displayModalAdd(true)"
         />
         <ButtonSecondary
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 3ab71e7d2..7a7cf1d00 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -64,7 +64,7 @@
           <i class="text-accent material-icons !text-4xl">
             mark_email_unread
           </i>
-          <h3 class="font-bold my-2 text-center text-lg">
+          <h3 class="my-2 text-center text-lg">
             {{ $t("auth.we_sent_magic_link") }}
           </h3>
           <p class="text-center">
diff --git a/components/graphql/Field.vue b/components/graphql/Field.vue
index edcfa3762..69d1bbb86 100644
--- a/components/graphql/Field.vue
+++ b/components/graphql/Field.vue
@@ -1,9 +1,6 @@
 <template>
   <div>
-    <div
-      class="font-semibold field-title"
-      :class="{ 'field-highlighted': isHighlighted }"
-    >
+    <div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
       {{ fieldName }}
       <span v-if="fieldArgs.length > 0">
         (
@@ -32,7 +29,6 @@
       v-if="gqlField.isDeprecated"
       class="
         rounded
-        font-semibold
         bg-yellow-200
         my-1
         text-black
@@ -48,7 +44,7 @@
       <h5 class="my-2">Arguments:</h5>
       <div class="border-divider border-l-2 pl-4">
         <div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
-          <span class="font-semibold">
+          <span>
             {{ field.name }}:
             <GraphqlTypeLink
               :gql-type="field.type"
diff --git a/components/graphql/Request.vue b/components/graphql/Request.vue
index e03d34ca9..e84a2c173 100644
--- a/components/graphql/Request.vue
+++ b/components/graphql/Request.vue
@@ -11,7 +11,6 @@
           bg-primaryLight
           border border-divider
           rounded-l
-          font-semibold font-mono
           text-secondaryDark
           w-full
           py-2
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index a31b72097..b0c9f03f8 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -17,7 +17,7 @@
               gqlRunQuery
             "
           >
-            <label for="gqlQuery" class="font-semibold">
+            <label class="font-semibold text-secondaryLight">
               {{ $t("query") }}
             </label>
             <div class="flex">
@@ -25,7 +25,7 @@
                 :label="$t('run')"
                 :shortcut="[getSpecialKey(), 'Enter']"
                 icon="play_arrow"
-                class="!text-accent"
+                class="rounded-none !text-accent"
                 @click.native="runQuery()"
               />
               <ButtonSecondary
@@ -83,7 +83,7 @@
               justify-between
             "
           >
-            <label class="font-semibold">
+            <label class="font-semibold text-secondaryLight">
               {{ $t("variables") }}
             </label>
             <div class="flex">
@@ -126,7 +126,7 @@
               justify-between
             "
           >
-            <label class="font-semibold">
+            <label class="font-semibold text-secondaryLight">
               {{ $t("headers") }}
             </label>
             <div class="flex">
@@ -163,9 +163,8 @@
               styles="
                 bg-primaryLight
                 flex
-                font-semibold font-mono
                 flex-1
-                py-2
+          py-1
                 px-4
                 truncate
                 focus:outline-none
@@ -181,9 +180,7 @@
             <input
               class="
                 bg-primaryLight
-                flex
-                font-semibold font-mono
-                w-full
+                flex flex-1
                 py-2
                 px-4
                 truncate
@@ -248,13 +245,13 @@
               justify-center
             "
           >
-            <i class="opacity-75 pb-2 material-icons">post_add</i>
             <span class="text-center pb-4">
               {{ $t("empty.headers") }}
             </span>
             <ButtonSecondary
               :label="$t('add.new')"
               outline
+              icon="add"
               @click.native="addRequestHeader"
             />
           </div>
@@ -273,6 +270,7 @@
 <script lang="ts">
 import {
   defineComponent,
+  onMounted,
   PropType,
   ref,
   useContext,
@@ -335,8 +333,24 @@ export default defineComponent({
     const showSaveRequestModal = ref(false)
 
     const schema = useReadonlyStream(props.conn.schemaString$, "")
-    watch(schema, () => {
-      console.log(schema.value)
+    watch(
+      headers,
+      () => {
+        console.log("changed")
+        if (
+          (headers.value[headers.value.length - 1]?.key !== "" ||
+            headers.value[headers.value.length - 1]?.value !== "") &&
+          headers.value.length
+        )
+          addRequestHeader()
+      },
+      { deep: true }
+    )
+
+    onMounted(() => {
+      if (!headers.value?.length) {
+        addRequestHeader()
+      }
     })
 
     const copyQuery = () => {
diff --git a/components/graphql/Response.vue b/components/graphql/Response.vue
index dcc7b5601..8c8bf3364 100644
--- a/components/graphql/Response.vue
+++ b/components/graphql/Response.vue
@@ -14,7 +14,7 @@
         justify-between
       "
     >
-      <label class="font-semibold" for="responseField">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response") }}
       </label>
       <div class="flex">
@@ -59,7 +59,7 @@
         justify-center
       "
     >
-      <div class="flex space-x-2 pb-8">
+      <div class="flex space-x-2 pb-4">
         <div class="flex flex-col space-y-4 items-end">
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.send_request") }}
@@ -94,8 +94,10 @@
       <ButtonSecondary
         :label="$t('documentation')"
         to="https://docs.hoppscotch.io"
+        icon="open_in_new"
         blank
         outline
+        reverse
       />
     </div>
   </AppSection>
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index fd394bfd5..c5a55d5a9 100644
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -20,7 +20,6 @@
                 class="
                   bg-primaryLight
                   flex
-                  font-semibold font-mono
                   w-full
                   py-2
                   pr-2
@@ -150,7 +149,7 @@
               justify-between
             "
           >
-            <label class="font-semibold">
+            <label class="font-semibold text-secondaryLight">
               {{ $t("schema") }}
             </label>
             <div class="flex">
diff --git a/components/graphql/Type.vue b/components/graphql/Type.vue
index 6094d64ae..d23ebfba1 100644
--- a/components/graphql/Type.vue
+++ b/components/graphql/Type.vue
@@ -1,9 +1,6 @@
 <template>
   <div :id="`type_${gqlType.name}`" class="p-4">
-    <div
-      class="font-semibold type-title"
-      :class="{ 'text-accent': isHighlighted }"
-    >
+    <div class="type-title" :class="{ 'text-accent': isHighlighted }">
       <span v-if="isInput" class="text-accent">input </span>
       <span v-else-if="isInterface" class="text-accent">interface </span>
       <span v-else-if="isEnum" class="text-accent">enum </span>
diff --git a/components/graphql/TypeLink.vue b/components/graphql/TypeLink.vue
index a508d33c0..4e9dab2ce 100644
--- a/components/graphql/TypeLink.vue
+++ b/components/graphql/TypeLink.vue
@@ -1,7 +1,6 @@
 <template>
   <span
     :class="isScalar ? 'text-secondaryLight' : 'cursor-pointer text-accent'"
-    class="font-mono"
     @click="jumpToType"
   >
     {{ typeString }}
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index f914f9f48..5e7c14763 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -4,9 +4,7 @@
       <span
         class="
           cursor-pointer
-          flex
-          font-semibold
-          flex-1
+          flex flex-1
           min-w-0
           py-2
           pr-2
@@ -51,14 +49,7 @@
       <span
         v-for="(line, index) in query"
         :key="`line-${index}`"
-        class="
-          cursor-pointer
-          font-mono
-          text-secondaryLight
-          px-4
-          whitespace-pre
-          truncate
-        "
+        class="cursor-pointer text-secondaryLight px-4 whitespace-pre truncate"
         data-testid="restore_history_entry"
         @click="useEntry"
         >{{ line }}</span
diff --git a/components/history/index.vue b/components/history/index.vue
index a7e71dd24..58a9874db 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -17,7 +17,6 @@
           class="
             bg-primaryLight
             flex
-            font-semibold font-mono
             w-full
             py-2
             pr-2
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index 87b241794..4372c5888 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -1,16 +1,7 @@
 <template>
   <div class="flex items-center group">
     <span
-      class="
-        cursor-pointer
-        flex
-        font-mono font-bold
-        mx-2
-        w-12
-        justify-center
-        items-center
-        truncate
-      "
+      class="cursor-pointer flex mx-2 w-12 justify-center items-center truncate"
       :class="entryStatus.className"
       data-testid="restore_history_entry"
       :title="duration"
@@ -21,9 +12,7 @@
     <span
       class="
         cursor-pointer
-        flex
-        font-semibold
-        flex-1
+        flex flex-1
         min-w-0
         py-2
         pr-2
diff --git a/components/http/Auth.vue b/components/http/Authorization.vue
similarity index 70%
rename from components/http/Auth.vue
rename to components/http/Authorization.vue
index 0d537ceea..d204d17bf 100644
--- a/components/http/Auth.vue
+++ b/components/http/Authorization.vue
@@ -1,21 +1,22 @@
 <template>
   <div>
-    <div class="flex flex-1 p-2 items-center justify-between">
-      <span class="flex">
-        <span
-          class="
-            border
-            rounded-r-none rounded
-            border-divider border-r-0
-            font-semibold
-            text-secondaryLight
-            py-2
-            px-4
-            py-2
-          "
-        >
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <span class="flex items-center">
+        <label class="font-semibold text-secondaryLight">
           {{ $t("authorization_type") }}
-        </span>
+        </label>
         <tippy
           ref="authTypeOptions"
           interactive
@@ -27,9 +28,8 @@
             <div class="flex">
               <span class="select-wrapper">
                 <ButtonSecondary
-                  class="rounded-l-none pr-8"
-                  :label="authType.charAt(0).toUpperCase() + authType.slice(1)"
-                  outline
+                  class="rounded-none ml-2 pr-8"
+                  :label="authName"
                 />
               </span>
             </div>
@@ -38,20 +38,23 @@
             label="None"
             @click.native="
               authType = 'none'
+              authName = 'None'
               $refs.authTypeOptions.tippy().hide()
             "
           />
           <SmartItem
-            label="Basic"
+            label="Basic Auth"
             @click.native="
               authType = 'basic'
+              authName = 'Basic Auth'
               $refs.authTypeOptions.tippy().hide()
             "
           />
           <SmartItem
-            label="Bearer"
+            label="Bearer Token"
             @click.native="
               authType = 'bearer'
+              authName = 'Bearer Token'
               $refs.authTypeOptions.tippy().hide()
             "
           />
@@ -60,11 +63,18 @@
       <div class="flex">
         <SmartToggle
           :on="authActive"
-          class="mr-2 px-2"
+          class="px-2"
           @change="authActive = !authActive"
         >
           {{ authActive ? $t("enabled") : $t("disabled") }}
         </SmartToggle>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('clear')"
@@ -73,6 +83,22 @@
         />
       </div>
     </div>
+    <div
+      v-if="authType === 'none'"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <span class="text-center pb-4">
+        {{ $t("empty.authorization") }}
+      </span>
+      <ButtonSecondary
+        outline
+        :label="$t('action.learn_more')"
+        to="https://docs.hoppscotch.io"
+        blank
+        icon="open_in_new"
+        reverse
+      />
+    </div>
     <div v-if="authType === 'basic'" class="space-y-2 p-2">
       <div class="flex relative">
         <input
@@ -101,10 +127,21 @@
         <ButtonSecondary
           :icon="passwordFieldType === 'text' ? 'visibility' : 'visibility_off'"
           outline
-          class="ml-2"
+          class="rounded ml-2"
           @click.native="switchVisibility"
         />
       </div>
+      <div class="p-2">
+        <div class="text-secondaryLight pb-2">
+          {{ $t("helpers.authorization") }}
+        </div>
+        <SmartAnchor
+          class="link"
+          :label="$t('action.learn_more')"
+          to="https://docs.hoppscotch.io/"
+          blank
+        />
+      </div>
     </div>
     <div v-if="authType === 'bearer'" class="space-y-2 p-2">
       <div class="flex relative">
@@ -117,6 +154,17 @@
         />
         <label for="bearer_token"> Token </label>
       </div>
+      <div class="p-2">
+        <div class="text-secondaryLight pb-2">
+          {{ $t("helpers.authorization") }}
+        </div>
+        <SmartAnchor
+          class="link"
+          :label="$t('action.learn_more')"
+          to="https://docs.hoppscotch.io/"
+          blank
+        />
+      </div>
     </div>
     <!-- <button
             v-if="authType === 'OAuth 2.0'"
@@ -157,11 +205,12 @@ export default defineComponent({
   setup() {
     const auth = useStream(
       restAuth$,
-      { authType: "none", authActive: true },
+      { authType: "none", authName: "None", authActive: true },
       setRESTAuth
     )
 
     const authType = pluckRef(auth, "authType")
+    const authName = pluckRef(auth, "authName")
     const authActive = pluckRef(auth, "authActive")
 
     const basicUsername = pluckRef(auth as Ref<HoppRESTAuthBasic>, "username")
@@ -176,6 +225,7 @@ export default defineComponent({
     const clearContent = () => {
       auth.value = {
         authType: "none",
+        authName: "None",
         authActive: true,
       }
     }
@@ -189,6 +239,7 @@ export default defineComponent({
     return {
       auth,
       authType,
+      authName,
       authActive,
       basicUsername,
       basicPassword,
diff --git a/components/http/Body.vue b/components/http/Body.vue
index 09724c63a..40cf46667 100644
--- a/components/http/Body.vue
+++ b/components/http/Body.vue
@@ -1,21 +1,19 @@
 <template>
   <div>
-    <div class="flex flex-1 p-2 items-center justify-between">
-      <span class="flex">
-        <span
-          class="
-            border
-            rounded-r-none rounded
-            border-divider border-r-0
-            font-semibold
-            text-secondaryLight
-            py-2
-            px-4
-            py-2
-          "
-        >
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        pl-4 pl-4
+        items-center
+        justify-between
+      "
+    >
+      <span class="flex items-center">
+        <label class="font-semibold text-secondaryLight">
           {{ $t("content_type") }}
-        </span>
+        </label>
         <tippy
           ref="contentTypeOptions"
           interactive
@@ -28,8 +26,7 @@
               <span class="select-wrapper">
                 <ButtonSecondary
                   :label="contentType"
-                  outline
-                  class="rounded-l-none pr-8"
+                  class="rounded-none ml-2 pr-8"
                 />
               </span>
             </div>
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index 131972fcd..d5304c92b 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -13,10 +13,17 @@
         justify-between
       "
     >
-      <label class="font-semibold">
+      <label>
         {{ $t("request_body") }}
       </label>
       <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('clear')"
@@ -44,7 +51,7 @@
         styles="
           bg-primaryLight
           flex
-          font-semibold font-mono
+
           flex-1
           py-1
           px-4
@@ -62,9 +69,7 @@
         v-else
         class="
           bg-primaryLight
-          flex
-          font-semibold font-mono
-          flex-1
+          flex flex-1
           py-2
           px-4
           truncate
@@ -89,7 +94,7 @@
         styles="
           bg-primaryLight
           flex
-          font-semibold font-mono
+
           flex-1
           py-1
           px-4
@@ -107,9 +112,7 @@
         v-if="!EXPERIMENTAL_URL_BAR_ENABLED && !requestBodyParamIsFile(index)"
         class="
           bg-primaryLight
-          flex
-          font-semibold font-mono
-          flex-1
+          flex flex-1
           py-2
           px-4
           truncate
@@ -195,13 +198,13 @@
       v-if="bodyParams.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-75 pb-2 material-icons">post_add</i>
       <span class="text-center pb-4">
-        {{ $t("empty.parameters") }}
+        {{ $t("empty.body") }}
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
         outline
+        icon="add"
         @click.native="addBodyParam"
       />
     </div>
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index f07f4b4a9..96fbde1f5 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -6,7 +6,7 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="requestType" class="font-semibold px-4 pb-4">
+        <label for="requestType" class="px-4 pb-4">
           {{ $t("request.choose_language") }}
         </label>
         <div class="flex flex-1">
@@ -22,7 +22,7 @@
                 <ButtonSecondary
                   :label="codegens.find((x) => x.id === codegenType).name"
                   outline
-                  class="w-full"
+                  class="pr-8"
                 />
               </span>
             </template>
@@ -40,7 +40,7 @@
           </tippy>
         </div>
         <div class="flex flex-1 justify-between">
-          <label for="generatedCode" class="font-semibold px-4 pt-4 pb-4">
+          <label for="generatedCode" class="px-4 pt-4 pb-4">
             {{ $t("request.generated_code") }}
           </label>
         </div>
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 6e193b71c..e8f20ec93 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -13,10 +13,17 @@
         justify-between
       "
     >
-      <label for="headerList" class="font-semibold">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("header_list") }}
       </label>
       <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('clear')"
@@ -46,13 +53,13 @@
         styles="
           bg-primaryLight
           flex
-          font-semibold font-mono
           flex-1
           py-1
           px-4
           truncate
           focus:outline-none
         "
+        :class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }"
         @input="
           updateHeader(index, {
             key: $event,
@@ -68,7 +75,6 @@
         styles="
           bg-primaryLight
           flex
-          font-semibold font-mono
           flex-1
           py-1
           px-4
@@ -86,9 +92,7 @@
         v-else
         class="
           bg-primaryLight
-          flex
-          font-semibold font-mono
-          flex-1
+          flex flex-1
           py-2
           px-4
           truncate
@@ -146,13 +150,13 @@
       v-if="headers$.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-75 pb-2 material-icons">post_add</i>
       <span class="text-center pb-4">
         {{ $t("empty.headers") }}
       </span>
       <ButtonSecondary
         outline
         :label="$t('add.new')"
+        icon="add"
         @click.native="addHeader"
       />
     </div>
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index d2722a903..32e6910fc 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -5,7 +5,7 @@
         <textarea
           id="import-curl"
           v-model="curl"
-          class="font-mono textarea floating-input"
+          class="textarea floating-input"
           autofocus
           rows="8"
           placeholder=" "
@@ -113,6 +113,7 @@ export default defineComponent({
             testScript: "",
             auth: {
               authType: "none",
+              authName: "None",
               authActive: true,
             },
             body: {
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 3c91320e4..c00ae7237 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -13,10 +13,17 @@
         justify-between
       "
     >
-      <label class="font-semibold">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("parameter_list") }}
       </label>
       <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('clear_all')"
@@ -44,7 +51,6 @@
         styles="
           bg-primaryLight
           flex
-          font-semibold font-mono
           flex-1
           py-1
           px-4
@@ -62,9 +68,7 @@
         v-else
         class="
           bg-primaryLight
-          flex
-          font-semibold font-mono
-          flex-1
+          flex flex-1
           py-2
           px-4
           truncate
@@ -89,7 +93,6 @@
         styles="
           bg-primaryLight
           flex
-          font-semibold font-mono
           flex-1
           py-1
           px-4
@@ -107,9 +110,7 @@
         v-else
         class="
           bg-primaryLight
-          flex
-          font-semibold font-mono
-          flex-1
+          flex flex-1
           py-2
           px-4
           truncate
@@ -167,12 +168,12 @@
       v-if="params$.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-75 pb-2 material-icons">post_add</i>
       <span class="text-center pb-4">
         {{ $t("empty.parameters") }}
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
+        icon="add"
         outline
         @click.native="addParam"
       />
diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue
index 638d09e7f..0356e94c1 100644
--- a/components/http/PreRequestScript.vue
+++ b/components/http/PreRequestScript.vue
@@ -13,7 +13,7 @@
         justify-between
       "
     >
-      <label class="font-semibold">
+      <label>
         {{ $t("javascript_code") }}
       </label>
       <ButtonSecondary
@@ -24,18 +24,44 @@
         icon="help_outline"
       />
     </div>
-    <SmartJsEditor
-      v-model="preRequestScript"
-      :options="{
-        maxLines: Infinity,
-        minLines: 16,
-        fontSize: '12px',
-        autoScrollEditorIntoView: true,
-        showPrintMargin: false,
-        useWorker: false,
-      }"
-      complete-mode="pre"
-    />
+    <div class="flex">
+      <div class="border-r border-dividerLight w-2/3">
+        <SmartJsEditor
+          v-model="preRequestScript"
+          :options="{
+            maxLines: Infinity,
+            minLines: 16,
+            fontSize: '12px',
+            autoScrollEditorIntoView: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+          complete-mode="pre"
+        />
+      </div>
+      <div
+        class="
+          h-full
+          max-w-1/3
+          top-upperTertiaryStickyFold
+          min-w-46
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
+      >
+        <div class="text-secondaryLight pb-2">
+          {{ $t("helpers.pre_request_script") }}
+        </div>
+        <SmartAnchor
+          class="link"
+          :label="$t('action.learn_more')"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
+          blank
+        />
+      </div>
+    </div>
   </AppSection>
 </template>
 
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index f0fa2669c..692ec6cad 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -13,10 +13,23 @@
         justify-between
       "
     >
-      <label for="rawBody" class="font-semibold">
+      <label for="rawBody">
         {{ $t("raw_request_body") }}
       </label>
       <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent('rawParams', $event)"
+        />
         <ButtonSecondary
           v-if="contentType.endsWith('json')"
           ref="prettifyRequest"
@@ -40,12 +53,6 @@
           type="file"
           @change="uploadPayload"
         />
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('clear')"
-          icon="clear_all"
-          @click.native="clearContent('rawParams', $event)"
-        />
       </div>
     </div>
     <div class="relative">
diff --git a/components/http/Request.vue b/components/http/Request.vue
index cdbdc488d..2474d3cbb 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -18,13 +18,14 @@
                 rounded-l
                 cursor-pointer
                 flex
-                font-semibold font-mono
+                font-semibold
                 text-secondaryDark
                 py-2
                 px-4
                 transition
                 w-28
                 truncate
+                hover:border-dividerDark
                 focus:border-accent focus:outline-none
               "
               :value="newMethod"
@@ -36,7 +37,6 @@
             v-for="(method, index) in methods"
             :key="`method-${index}`"
             :label="method"
-            class="font-mono"
             @click.native="onSelectMethod(method)"
           />
         </tippy>
@@ -51,13 +51,13 @@
           bg-primaryLight
           border border-divider
           flex
-          font-semibold font-mono
           flex-1
           text-secondaryDark
           py-1
           px-4
           transition
           truncate
+          hover:border-dividerDark
           focus:outline-none focus:border-accent
         "
         @enter="newSendRequest()"
@@ -70,9 +70,7 @@
         class="
           bg-primaryLight
           border border-divider
-          flex
-          font-semibold font-mono
-          flex-1
+          flex flex-1
           text-secondaryDark
           py-2
           px-4
@@ -157,7 +155,7 @@
             <ButtonSecondary
               icon="keyboard_arrow_down"
               outline
-              class="rounded-l-none"
+              class="rounded-r"
             />
           </template>
           <input
@@ -236,14 +234,14 @@ import { useSetting } from "~/newstore/settings"
 
 const methods = [
   "GET",
-  "HEAD",
   "POST",
   "PUT",
+  "PATCH",
   "DELETE",
+  "HEAD",
   "CONNECT",
   "OPTIONS",
   "TRACE",
-  "PATCH",
   "CUSTOM",
 ]
 
diff --git a/components/http/ResponseMeta.vue b/components/http/ResponseMeta.vue
index 12b5e8f9b..9c6a1aaf9 100644
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -9,7 +9,7 @@
         justify-center
       "
     >
-      <div class="flex space-x-2 pb-8">
+      <div class="flex space-x-2 pb-4">
         <div class="flex flex-col space-y-4 items-end">
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.send_request") }}
@@ -44,8 +44,10 @@
       <ButtonSecondary
         :label="$t('documentation')"
         to="https://docs.hoppscotch.io"
+        icon="open_in_new"
         blank
         outline
+        reverse
       />
     </div>
     <div v-else>
@@ -55,18 +57,18 @@
       <div
         v-else
         :class="statusCategory.className"
-        class="font-mono font-semibold space-x-4"
+        class="font-semibold space-x-4"
       >
         <span v-if="response.statusCode">
-          <span class="text-secondaryDark"> Status: </span>
+          <span class="text-secondary"> Status: </span>
           {{ response.statusCode || $t("waiting_send_req") }}
         </span>
         <span v-if="response.meta && response.meta.responseDuration">
-          <span class="text-secondaryDark"> Time: </span>
+          <span class="text-secondary"> Time: </span>
           {{ `${response.meta.responseDuration} ms` }}
         </span>
         <span v-if="response.meta && response.meta.responseSize">
-          <span class="text-secondaryDark"> Size: </span>
+          <span class="text-secondary"> Size: </span>
           {{ `${response.meta.responseSize} B` }}
         </span>
       </div>
diff --git a/components/http/TestResult.vue b/components/http/TestResult.vue
index 23de2b5e9..0a865a74a 100644
--- a/components/http/TestResult.vue
+++ b/components/http/TestResult.vue
@@ -19,7 +19,7 @@
           justify-between
         "
       >
-        <label class="font-semibold"> Test Report </label>
+        <label> Test Report </label>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('clear')"
@@ -35,13 +35,13 @@
           :progress="(failedTests / totalTests) * 100"
         />
         <div class="ml-2">
-          <span v-if="failedTests" class="font-semibold text-red-500">
+          <span v-if="failedTests" class="text-red-500">
             {{ failedTests }} failing,
           </span>
-          <span v-if="passedTests" class="font-semibold text-green-500">
+          <span v-if="passedTests" class="text-green-500">
             {{ passedTests }} successful,
           </span>
-          <span class="font-semibold"> out of {{ totalTests }} tests. </span>
+          <span> out of {{ totalTests }} tests. </span>
         </div>
       </div>
       <div class="divide-y divide-dividerLight">
@@ -57,7 +57,6 @@
           class="
             border-b border-dividerLight
             flex
-            font-semibold
             text-secondaryDark
             py-2
             px-4
@@ -83,10 +82,7 @@
             >
               {{ result.status === "pass" ? "check" : "close" }}
             </i>
-            <span
-              v-if="result.message"
-              class="font-semibold text-secondaryDark"
-            >
+            <span v-if="result.message" class="text-secondaryDark">
               {{ result.message }}
             </span>
             <span class="text-secondaryLight">
diff --git a/components/http/Tests.vue b/components/http/Tests.vue
index 6de194277..f1cd772f5 100644
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -13,7 +13,7 @@
         justify-between
       "
     >
-      <label class="font-semibold">
+      <label>
         {{ $t("javascript_code") }}
       </label>
       <ButtonSecondary
@@ -24,18 +24,44 @@
         icon="help_outline"
       />
     </div>
-    <SmartJsEditor
-      v-model="testScript"
-      :options="{
-        maxLines: Infinity,
-        minLines: 16,
-        fontSize: '12px',
-        autoScrollEditorIntoView: true,
-        showPrintMargin: false,
-        useWorker: false,
-      }"
-      complete-mode="test"
-    />
+    <div class="flex">
+      <div class="border-r border-dividerLight w-2/3">
+        <SmartJsEditor
+          v-model="testScript"
+          :options="{
+            maxLines: Infinity,
+            minLines: 16,
+            fontSize: '12px',
+            autoScrollEditorIntoView: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+          complete-mode="test"
+        />
+      </div>
+      <div
+        class="
+          h-full
+          max-w-1/3
+          top-upperTertiaryStickyFold
+          min-w-46
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
+      >
+        <div class="text-secondaryLight pb-2">
+          {{ $t("helpers.post_request_tests") }}
+        </div>
+        <SmartAnchor
+          class="link"
+          :label="$t('action.learn_more')"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
+          blank
+        />
+      </div>
+    </div>
   </AppSection>
 </template>
 
diff --git a/components/landing/CTA.vue b/components/landing/CTA.vue
index fb87b1c47..a98de4bde 100644
--- a/components/landing/CTA.vue
+++ b/components/landing/CTA.vue
@@ -19,9 +19,7 @@
     >
       <i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
       <div class="flex-grow">
-        <h2
-          class="font-semibold mt-4 text-lg text-secondaryDark mb-2 transition"
-        >
+        <h2 class="mt-4 text-lg text-secondaryDark mb-2 transition">
           {{ cta.title }}
         </h2>
         <p>
diff --git a/components/landing/Features.vue b/components/landing/Features.vue
index 4d4eb2764..d422531d0 100644
--- a/components/landing/Features.vue
+++ b/components/landing/Features.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="flex flex-col p-4">
     <div class="flex flex-col items-center">
-      <p class="font-semibold my-4 text-center text-accent tracking-widest">
-        FEATURES
-      </p>
+      <p class="my-4 text-center text-accent tracking-widest">FEATURES</p>
     </div>
     <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
       <div
@@ -13,15 +11,7 @@
       >
         <i class="text-accent text-4xl material-icons">{{ feature.icon }}</i>
         <div class="flex-grow">
-          <h2
-            class="
-              font-semibold
-              mt-4
-              text-lg text-secondaryDark
-              mb-2
-              transition
-            "
-          >
+          <h2 class="mt-4 text-lg text-secondaryDark mb-2 transition">
             {{ feature.title }}
           </h2>
           <p>
diff --git a/components/landing/Footer.vue b/components/landing/Footer.vue
index 0515668a2..89aa767e6 100644
--- a/components/landing/Footer.vue
+++ b/components/landing/Footer.vue
@@ -2,7 +2,7 @@
   <footer class="flex flex-col p-6">
     <nav class="grid gap-4 grid-cols-2 md:grid-cols-4">
       <div class="flex flex-col space-y-2">
-        <h4 class="font-semibold my-2">Hoppscotch</h4>
+        <h4 class="my-2">Hoppscotch</h4>
         <ul class="space-y-4">
           <li>
             <SmartChangeLanguage />
@@ -13,7 +13,7 @@
         </ul>
       </div>
       <div class="flex flex-col space-y-2">
-        <h4 class="font-semibold my-2">Solutions</h4>
+        <h4 class="my-2">Solutions</h4>
         <ul class="space-y-2">
           <li
             v-for="(item, index) in navigation.solutions"
@@ -28,7 +28,7 @@
         </ul>
       </div>
       <div class="flex flex-col space-y-2">
-        <h4 class="font-semibold my-2">Platform</h4>
+        <h4 class="my-2">Platform</h4>
         <ul class="space-y-2">
           <li
             v-for="(item, index) in navigation.platform"
@@ -43,7 +43,7 @@
         </ul>
       </div>
       <div class="flex flex-col space-y-2">
-        <h4 class="font-semibold my-2">Company</h4>
+        <h4 class="my-2">Company</h4>
         <ul class="space-y-2">
           <li
             v-for="(item, index) in navigation.company"
diff --git a/components/landing/Hero.vue b/components/landing/Hero.vue
index 1c2c4d776..435bf8645 100644
--- a/components/landing/Hero.vue
+++ b/components/landing/Hero.vue
@@ -3,7 +3,6 @@
     <div class="flex flex-col mt-16 items-center justify-center">
       <h2
         class="
-          font-extrabold
           text-accent text-center
           leading-none
           tracking-tighter
@@ -16,7 +15,6 @@
       </h2>
       <h3
         class="
-          font-extrabold
           my-4
           text-center text-secondaryDark
           leading-none
diff --git a/components/landing/Stats.vue b/components/landing/Stats.vue
index b9681c995..ed604e167 100644
--- a/components/landing/Stats.vue
+++ b/components/landing/Stats.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex font-mono space-x-16 p-6">
+  <div class="flex space-x-16 p-6">
     <div v-for="(stat, index) in stats" :key="`stat-${index}`">
-      <span class="font-bold text-xl">
+      <span class="text-xl">
         {{ stat.count }}<span class="text-secondaryLight">+</span>
       </span>
       <br />
diff --git a/components/landing/Users.vue b/components/landing/Users.vue
index 812a3bf2e..0ecb420ad 100644
--- a/components/landing/Users.vue
+++ b/components/landing/Users.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="bg-primaryLight rounded flex flex-col mx-6 p-4">
     <div class="flex flex-col items-center">
-      <p class="font-semibold my-4 text-center tracking-widest">
-        EMPOWERING DEVELOPERS FROM
-      </p>
+      <p class="my-4 text-center tracking-widest">EMPOWERING DEVELOPERS FROM</p>
     </div>
     <div class="grid gap-4 grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
       <div
diff --git a/components/lenses/HeadersRenderer.vue b/components/lenses/HeadersRenderer.vue
index 827096c22..00b5a57ab 100644
--- a/components/lenses/HeadersRenderer.vue
+++ b/components/lenses/HeadersRenderer.vue
@@ -1,41 +1,19 @@
 <template>
-  <div class="font-mono p-2">
+  <div class="p-2">
     <div
       v-for="(header, index) in headers"
       :key="`header-${index}`"
       class="flex items-center"
     >
-      <span
-        class="
-          flex
-          font-semibold
-          min-w-0
-          p-2
-          transition
-          group-hover:text-secondaryDark
-        "
-      >
+      <span class="flex min-w-0 p-2 transition group-hover:text-secondaryDark">
         <span class="rounded select-all truncate">
           {{ header.key }}
         </span>
       </span>
+      <span class="flex mx-2 justify-center items-center truncate"> → </span>
       <span
         class="
-          flex
-          font-mono font-bold
-          mx-2
-          justify-center
-          items-center
-          truncate
-        "
-      >
-        →
-      </span>
-      <span
-        class="
-          flex
-          font-semibold
-          flex-1
+          flex flex-1
           min-w-0
           p-2
           transition
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 19b32f360..22ab35364 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -6,13 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         top-lowerSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold px-4">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response_body") }}
       </label>
       <div class="flex">
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index 2a947acf7..ea127a9ad 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -6,13 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         top-lowerSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold px-4">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response_body") }}
       </label>
       <div class="flex">
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 08bcec83f..a42c6f67c 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -6,13 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         top-lowerSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold px-4">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response_body") }}
       </label>
       <div class="flex">
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 356c3d240..a1aa2f6aa 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -6,13 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         top-lowerSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold px-4">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response_body") }}
       </label>
       <div class="flex">
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 80f48d55b..2f87a1546 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -6,13 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         top-lowerSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold px-4">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response_body") }}
       </label>
       <div class="flex">
diff --git a/components/realtime/Log.vue b/components/realtime/Log.vue
index 266347c2d..39e7674c5 100644
--- a/components/realtime/Log.vue
+++ b/components/realtime/Log.vue
@@ -13,7 +13,9 @@
         justify-between
       "
     >
-      <label for="log" class="font-semibold py-2">{{ title }}</label>
+      <label for="log" class="font-semibold text-secondaryLight py-2">
+        {{ title }}
+      </label>
     </div>
     <div ref="log" name="log" class="realtime-log">
       <span v-if="log" class="space-y-2">
@@ -65,7 +67,6 @@ export default {
 
   &,
   span {
-    @apply font-mono font-semibold;
     @apply select-text;
   }
 
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 95b1f44e6..3e48cca43 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -16,7 +16,6 @@
                     bg-primaryLight
                     border border-divider
                     rounded-l
-                    font-semibold font-mono
                     text-secondaryDark
                     w-full
                     py-2
@@ -56,7 +55,7 @@
     >
       <AppSection label="messages">
         <div class="flex flex-col flex-1 p-4 inline-flex">
-          <label for="pub_topic" class="font-semibold">
+          <label for="pub_topic" class="font-semibold text-secondaryLight">
             {{ $t("mqtt.topic") }}
           </label>
         </div>
@@ -71,7 +70,7 @@
           />
         </div>
         <div class="flex flex-1 p-4 items-center justify-between">
-          <label for="mqtt-message" class="font-semibold">{{
+          <label for="mqtt-message" class="font-semibold text-secondaryLight">{{
             $t("communication")
           }}</label>
         </div>
@@ -102,7 +101,7 @@
             inline-flex
           "
         >
-          <label for="sub_topic" class="font-semibold">{{
+          <label for="sub_topic" class="font-semibold text-secondaryLight">{{
             $t("mqtt.topic")
           }}</label>
         </div>
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 4263245a3..689a6d403 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -17,9 +17,7 @@
                     bg-primaryLight
                     border border-divider
                     rounded-l
-                    flex
-                    font-semibold font-mono
-                    flex-1
+                    flex flex-1
                     text-secondaryDark
                     w-full
                     py-2
@@ -38,9 +36,7 @@
                   class="
                     bg-primaryLight
                     border border-divider
-                    flex
-                    font-semibold font-mono
-                    flex-1
+                    flex flex-1
                     text-secondaryDark
                     w-full
                     py-2
@@ -81,7 +77,7 @@
     >
       <AppSection label="messages">
         <div class="flex flex-col flex-1 p-4 inline-flex">
-          <label for="events" class="font-semibold">
+          <label for="events" class="font-semibold text-secondaryLight">
             {{ $t("events") }}
           </label>
         </div>
@@ -97,7 +93,9 @@
           />
         </div>
         <div class="flex flex-1 p-4 items-center justify-between">
-          <label class="font-semibold">{{ $t("communication") }}</label>
+          <label class="font-semibold text-secondaryLight">{{
+            $t("communication")
+          }}</label>
           <div class="flex">
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 11544f3d6..09b63ed28 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -13,9 +13,7 @@
               bg-primaryLight
               border border-divider
               rounded-l
-              flex
-              font-semibold font-mono
-              flex-1
+              flex flex-1
               text-secondaryDark
               w-full
               py-2
@@ -30,7 +28,15 @@
           />
           <label
             for="url"
-            class="bg-primaryLight border border-divider py-2 px-4 truncate"
+            class="
+              bg-primaryLight
+              border-t border-b border-divider
+              font-semibold
+              text-secondaryLight
+              py-2
+              px-4
+              truncate
+            "
           >
             {{ $t("event_type") }}
           </label>
@@ -40,9 +46,7 @@
             class="
               bg-primaryLight
               border border-divider
-              flex
-              font-semibold font-mono
-              flex-1
+              flex flex-1
               text-secondaryDark
               w-full
               py-2
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 5f9cbc0f6..37e9fcf4d 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -14,7 +14,6 @@
                     bg-primaryLight
                     border border-divider
                     rounded-l
-                    font-semibold font-mono
                     text-secondaryDark
                     w-full
                     py-2
@@ -54,7 +53,7 @@
                 justify-between
               "
             >
-              <label class="font-semibold">
+              <label class="font-semibold text-secondaryLight">
                 {{ $t("websocket.protocols") }}
               </label>
               <div class="flex">
@@ -86,9 +85,7 @@
                 v-model="protocol.value"
                 class="
                   bg-primaryLight
-                  flex
-                  font-semibold font-mono
-                  flex-1
+                  flex flex-1
                   py-2
                   px-4
                   truncate
@@ -166,7 +163,10 @@
     >
       <AppSection label="messages">
         <div class="flex flex-col flex-1 p-4 inline-flex">
-          <label for="websocket-message" class="font-semibold">
+          <label
+            for="websocket-message"
+            class="font-semibold text-secondaryLight"
+          >
             {{ $t("communication") }}
           </label>
         </div>
diff --git a/components/smart/AccentModePicker.vue b/components/smart/AccentModePicker.vue
index 542945e3b..5295efca3 100644
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -15,6 +15,7 @@
       v-tippy="{ theme: 'tooltip' }"
       :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
       :class="[{ 'bg-primaryLight': color === active }]"
+      class="rounded"
       icon="lens"
       :color="color"
       @click.native="setActiveColor(color)"
diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue
index d58b73f24..a2076e903 100644
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -6,9 +6,7 @@
       class="
         bg-primaryLight
         border-t border-divider
-        flex flex-nowrap
-        font-mono
-        flex-1
+        flex flex-nowrap flex-1
         py-1
         px-4
         bottom-0
@@ -23,7 +21,6 @@
         :key="`p-${index}`"
         class="
           cursor-pointer
-          font-semibold
           flex-grow-0 flex-shrink-0
           text-secondaryLight
           inline-flex
@@ -48,7 +45,6 @@
           <SmartItem
             v-for="(sibling, siblingIndex) in currentSibling"
             :key="`p-${index}-sibling-${siblingIndex}`"
-            class="font-mono"
             :label="sibling.key ? sibling.key.value : i"
             @click.native="goToSibling(sibling)"
           />
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index 61a66272e..9dd830e76 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -186,9 +186,7 @@ export default {
 
 <style scoped lang="scss">
 .autocomplete-wrapper {
-  @apply relative;
-  @apply flex;
-  @apply w-full;
+  @apply contents;
 
   input:focus + ul.suggestions,
   ul.suggestions:hover {
@@ -211,8 +209,7 @@ export default {
       @apply w-full;
       @apply block;
       @apply py-2 px-4;
-      @apply text-secondaryLight;
-      @apply font-semibold font-mono;
+      @apply text-secondary;
 
       &:last-child {
         border-radius: 0 0 8px 8px;
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index 7992aad4c..615ae6629 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -8,6 +8,7 @@
       :class="{
         'bg-primaryLight !text-accent hover:text-accent': color === active,
       }"
+      class="rounded"
       :icon="getIcon(color)"
       @click.native="setBGMode(color)"
     />
diff --git a/components/smart/ConfirmModal.vue b/components/smart/ConfirmModal.vue
index 21fc1341b..df6e07042 100644
--- a/components/smart/ConfirmModal.vue
+++ b/components/smart/ConfirmModal.vue
@@ -2,7 +2,7 @@
   <SmartModal v-if="show" :title="$t('modal.confirm')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
-        <label class="font-semibold">
+        <label>
           {{ title }}
         </label>
       </div>
diff --git a/components/smart/DeletableChip.vue b/components/smart/DeletableChip.vue
index e741cd58e..a96c67eb6 100644
--- a/components/smart/DeletableChip.vue
+++ b/components/smart/DeletableChip.vue
@@ -2,7 +2,7 @@
   <span class="chip">
     <span><slot></slot></span>
     <ButtonSecondary
-      class="p-2 close-button icon"
+      class="rounded p-2 close-button icon"
       icon="close"
       @click.native="$emit('chip-delete')"
     />
@@ -19,7 +19,7 @@
   @apply pl-4;
   @apply bg-primaryDark;
   @apply text-secondary;
-  @apply font-mono font-semibold;
+
   @apply border border-divider;
 }
 
diff --git a/components/smart/EnvInput.vue b/components/smart/EnvInput.vue
index 6f5b12aca..c7d897d82 100644
--- a/components/smart/EnvInput.vue
+++ b/components/smart/EnvInput.vue
@@ -464,12 +464,15 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 [contenteditable="true"] {
+  @apply text-secondaryDark;
+  @apply font-medium;
+
   &:empty {
     line-height: 1.9;
 
     &::before {
-      @apply text-secondary;
-      @apply opacity-75;
+      @apply text-secondaryDark;
+      @apply opacity-25;
       @apply pointer-events-none;
 
       content: attr(placeholder);
@@ -479,7 +482,7 @@ export default defineComponent({
 
 .env-input-container {
   @apply inline-grid;
-  @apply w-full;
+  @apply flex-1;
 }
 
 .env-input {
diff --git a/components/smart/Item.vue b/components/smart/Item.vue
index 85e3496fc..9786baa40 100644
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -5,7 +5,7 @@
     :blank="blank"
     class="
       rounded
-      font-semibold
+      font-medium
       py-2
       px-4
       transition
@@ -60,7 +60,7 @@
       class="flex-1 inline-flex items-start"
       :class="{ 'flex-col': description }"
     >
-      <div class="font-semibold">
+      <div>
         {{ label }}
       </div>
       <p v-if="description" class="my-2 text-left text-secondaryLight">
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 22fa56917..59a8717bb 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -57,6 +57,7 @@
                 <slot name="actions"></slot>
                 <ButtonSecondary
                   v-if="dimissible"
+                  class="rounded"
                   icon="close"
                   @click.native="close"
                 />
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index f3f56cf65..7f6c49d76 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -97,7 +97,7 @@ export default {
       @apply ml-2;
       @apply text-8px;
       @apply border border-divider;
-      @apply font-mono;
+
       @apply rounded;
       @apply text-secondaryLight;
     }
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index c60f34058..c09620ff7 100644
--- a/components/smart/Toggle.vue
+++ b/components/smart/Toggle.vue
@@ -6,7 +6,7 @@
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
-    <label class="cursor-pointer font-semibold pl-0 align-middle truncate">
+    <label class="cursor-pointer pl-0 align-middle truncate">
       <slot></slot>
     </label>
   </div>
diff --git a/components/tab/Primary.vue b/components/tab/Primary.vue
index 754ef702f..cf3c5835f 100644
--- a/components/tab/Primary.vue
+++ b/components/tab/Primary.vue
@@ -5,7 +5,6 @@
     :blank="blank"
     class="
       rounded
-      font-semibold
       py-2
       px-4
       transition
diff --git a/components/tab/Secondary.vue b/components/tab/Secondary.vue
index 9c30f6c04..47b3f7a04 100644
--- a/components/tab/Secondary.vue
+++ b/components/tab/Secondary.vue
@@ -4,7 +4,6 @@
     :exact="exact"
     :blank="blank"
     class="
-      font-semibold
       flex-1
       py-2
       transform
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 8767fd782..771eddf76 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -17,7 +17,7 @@
           </label>
         </div>
         <div class="flex flex-1 justify-between items-center">
-          <label for="memberList" class="font-semibold p-4">
+          <label for="memberList" class="p-4">
             {{ $t("team.members") }}
           </label>
           <div class="flex">
@@ -37,9 +37,7 @@
             <input
               class="
                 bg-primaryLight
-                flex
-                font-semibold font-mono
-                flex-1
+                flex flex-1
                 py-2
                 px-4
                 truncate
@@ -62,9 +60,7 @@
                   <input
                     class="
                       bg-primaryLight
-                      flex
-                      font-semibold font-mono
-                      flex-1
+                      flex flex-1
                       py-2
                       px-4
                       truncate
@@ -114,9 +110,7 @@
               v-model="member.key"
               class="
                 bg-primaryLight
-                flex
-                font-semibold font-mono
-                flex-1
+                flex flex-1
                 py-2
                 px-4
                 truncate
@@ -138,9 +132,7 @@
                   <input
                     class="
                       bg-primaryLight
-                      flex
-                      font-semibold font-mono
-                      flex-1
+                      flex flex-1
                       py-2
                       px-4
                       truncate
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index ae9e07ff7..2fa0301fc 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -3,12 +3,7 @@
     <div class="flex flex-1 items-start">
       <div class="p-4">
         <label
-          class="
-            cursor-pointer
-            font-semibold
-            transition
-            hover:text-secondaryDark
-          "
+          class="cursor-pointer transition hover:text-secondaryDark"
           @click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
         >
           {{ team.name || $t("nothing_found") }}
diff --git a/components/teams/index.vue b/components/teams/index.vue
index 35a113b99..38f7643dc 100644
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -1,6 +1,6 @@
 <template>
   <AppSection label="teams">
-    <h4 class="font-bold text-secondaryDark">
+    <h4 class="text-secondaryDark">
       {{ $t("team.title") }}
     </h4>
     <div class="mt-1 text-secondaryLight">
diff --git a/helpers/types/HoppRESTAuth.ts b/helpers/types/HoppRESTAuth.ts
index 3682a6bae..de82e4ff8 100644
--- a/helpers/types/HoppRESTAuth.ts
+++ b/helpers/types/HoppRESTAuth.ts
@@ -1,10 +1,12 @@
 export type HoppRESTAuthNone = {
   authType: "none"
+  authName: "None"
   authActive: true
 }
 
 export type HoppRESTAuthBasic = {
   authType: "basic"
+  authName: "Basic Auth"
   authActive: true
 
   username: string
@@ -13,6 +15,7 @@ export type HoppRESTAuthBasic = {
 
 export type HoppRESTAuthBearer = {
   authType: "bearer"
+  authName: "Bearer Token"
   authActive: true
 
   token: string
diff --git a/helpers/types/HoppRESTRequest.ts b/helpers/types/HoppRESTRequest.ts
index b0ad526fd..81b3b90ae 100644
--- a/helpers/types/HoppRESTRequest.ts
+++ b/helpers/types/HoppRESTRequest.ts
@@ -115,12 +115,14 @@ export function parseOldAuth(x: any): HoppRESTAuth {
   if (!x.auth || x.auth === "None")
     return {
       authType: "none",
+      authName: "None",
       authActive: true,
     }
 
   if (x.auth === "Basic Auth")
     return {
       authType: "basic",
+      authName: "Basic Auth",
       authActive: true,
       username: x.httpUser,
       password: x.httpPassword,
@@ -129,9 +131,10 @@ export function parseOldAuth(x: any): HoppRESTAuth {
   if (x.auth === "Bearer Token")
     return {
       authType: "bearer",
+      authName: "Bearer Token",
       authActive: true,
       token: x.bearerToken,
     }
 
-  return { authType: "none", authActive: true }
+  return { authType: "none", authName: "None", authActive: true }
 }
diff --git a/lang/en-US.json b/lang/en-US.json
index c69513926..b597d6818 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -13,7 +13,8 @@
     "turn_on": "Turn on",
     "turn_off": "Turn off",
     "dismiss": "Dismiss",
-    "copy": "Copy"
+    "copy": "Copy",
+    "learn_more": "Learn more"
   },
   "confirm": {
     "logout": "Are you sure you want to logout?",
@@ -32,13 +33,15 @@
     "team_name": "Team name empty",
     "collection": "Collection is empty",
     "folder": "Folder is empty",
-    "parameters": "Parameters are empty",
+    "parameters": "This request does not have any parameters",
     "history": "History is empty",
-    "headers": "Headers are empty",
+    "headers": "This request does not have any headers",
     "tests": "Tests are empty",
     "schema": "Connect to a GraphQL endpoint",
     "teams": "Teams are empty",
-    "members": "Team is empty"
+    "members": "Team is empty",
+    "body": "This request does not have a body",
+    "authorization": "This request does not use any authorization"
   },
   "count": {
     "message": "Message {count}",
@@ -244,6 +247,13 @@
     "something_went_wrong": "Something went wrong",
     "check_console_details": "Check console log for details."
   },
+  "helpers": {
+    "authorization": "The authorization header will be automatically generated when you send the request.",
+    "pre_request_script": "Pre-request scripts are written in JavaScript, and are run before the request is sent.",
+    "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",
+    "offline_short": "You seem to be offline.",
+    "offline": "You seem to be offline. Data in this workspace might not be up to date."
+  },
   "options": "Options",
   "communication": "Communication",
   "endpoint": "Endpoint",
@@ -288,7 +298,7 @@
   "event_type": "Event type",
   "variables": "Variables",
   "get_schema": "Get schema",
-  "header_list": "Header list",
+  "header_list": "Header List",
   "response": "Response",
   "query": "Query",
   "queries": "Queries",
diff --git a/layouts/default.vue b/layouts/default.vue
index a65b284cb..194f204b8 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -16,7 +16,6 @@
           <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
             <Splitpanes :dbl-click-splitter="false" horizontal>
               <Pane v-if="!ZEN_MODE" style="height: auto">
-                <!-- <AppAnnouncement /> -->
                 <AppHeader />
               </Pane>
               <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
diff --git a/layouts/error.vue b/layouts/error.vue
index ce6a52bdb..c22b9a103 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page page-error">
-    <h1 class="font-mono mb-4 text-4xl heading">{{ statusCode }}</h1>
-    <h3 class="font-mono font-semibold select-text">{{ message }}</h3>
+    <h1 class="mb-4 text-4xl heading">{{ statusCode }}</h1>
+    <h3 class="select-text">{{ message }}</h3>
     <p class="mt-4">
       <ButtonSecondary to="/" icon="home" outline :label="$t('home')" />
       <ButtonSecondary
diff --git a/newstore/RESTSession.ts b/newstore/RESTSession.ts
index 1a6df5ef7..2496aefed 100644
--- a/newstore/RESTSession.ts
+++ b/newstore/RESTSession.ts
@@ -28,6 +28,7 @@ const defaultRESTRequest: HoppRESTRequest = {
   method: "GET",
   auth: {
     authType: "none",
+    authName: "None",
     authActive: true,
   },
   preRequestScript: "// pw.env.set('variable', 'value');",
diff --git a/pages/documentation.vue b/pages/documentation.vue
index 2f8275715..b5ed7a2ea 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -5,14 +5,13 @@
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="import">
             <div class="flex p-4 items-start justify-between">
-              <label class="font-semibold">
+              <label>
                 {{ $t("generate_docs_message") }}
               </label>
               <span
                 class="
                   bg-accentDark
                   rounded
-                  font-semibold
                   text-accentContrast
                   py-1
                   px-2
@@ -34,11 +33,12 @@
                 sticky
               "
             >
-              <label for="collectionUpload" class="font-semibold">
+              <label for="collectionUpload">
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   title="JSON"
                   icon="folder"
+                  class="rounded-none"
                   :label="$t('import.collections')"
                   @click.native="$refs.collectionUpload.click()"
                 />
diff --git a/pages/enter.vue b/pages/enter.vue
index ace60941d..a980931d2 100644
--- a/pages/enter.vue
+++ b/pages/enter.vue
@@ -6,7 +6,7 @@
     <span v-else class="text-secondaryLight">
       {{ $t("waiting_for_connection") }}
     </span>
-    <pre v-if="error" class="font-mono">{{ error }}</pre>
+    <pre v-if="error">{{ error }}</pre>
   </div>
 </template>
 
diff --git a/pages/index.vue b/pages/index.vue
index da878af66..65ab4fa34 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -27,7 +27,7 @@
             </SmartTab>
 
             <SmartTab :id="'authorization'" :label="$t('authorization')">
-              <HttpAuth />
+              <HttpAuthorization />
             </SmartTab>
 
             <SmartTab
diff --git a/pages/settings.vue b/pages/settings.vue
index 847ca83f8..5388f1906 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -17,7 +17,7 @@
           </div>
           <div v-else class="space-y-8">
             <section>
-              <h4 class="font-bold text-secondaryDark">User</h4>
+              <h4 class="font-semibold text-secondaryDark">User</h4>
               <div class="space-y-4 py-4">
                 <div class="flex items-start">
                   <div class="flex items-center">
@@ -29,7 +29,7 @@
                     <i v-else class="material-icons">account_circle</i>
                   </div>
                   <div class="ml-4">
-                    <label class="font-semibold">
+                    <label>
                       {{ currentUser.displayName || $t("nothing_found") }}
                     </label>
                     <p class="mt-1 text-secondaryLight">
@@ -42,7 +42,7 @@
                     <i class="material-icons">email</i>
                   </div>
                   <div class="ml-4">
-                    <label class="font-semibold">
+                    <label>
                       {{ currentUser.email || $t("nothing_found") }}
                     </label>
                     <p class="mt-1 text-secondaryLight">
@@ -54,7 +54,7 @@
             </section>
             <Teams v-if="currentBackendUser && currentBackendUser.eaInvited" />
             <section>
-              <h4 class="font-bold text-secondaryDark">Sync</h4>
+              <h4 class="font-semibold text-secondaryDark">Sync</h4>
               <div class="mt-1 text-secondaryLight">
                 These settings are synced to cloud.
               </div>
@@ -104,7 +104,7 @@
         </div>
         <div class="space-y-8 p-8 md:col-span-2">
           <section>
-            <h4 class="font-bold text-secondaryDark">
+            <h4 class="font-semibold text-secondaryDark">
               {{ $t("background") }}
             </h4>
             <div class="mt-1 text-secondaryLight">
@@ -123,7 +123,7 @@
             </div>
           </section>
           <section>
-            <h4 class="font-bold text-secondaryDark">
+            <h4 class="font-semibold text-secondaryDark">
               {{ $t("settings.accent_color") }}
             </h4>
             <div class="mt-1 text-secondaryLight">
@@ -134,7 +134,7 @@
             </div>
           </section>
           <section>
-            <h4 class="font-bold text-secondaryDark">
+            <h4 class="font-semibold text-secondaryDark">
               {{ $t("settings.font_size") }}
             </h4>
             <div class="mt-4">
@@ -142,7 +142,7 @@
             </div>
           </section>
           <section>
-            <h4 class="font-bold text-secondaryDark">
+            <h4 class="font-semibold text-secondaryDark">
               {{ $t("settings.language") }}
             </h4>
             <div class="mt-4">
@@ -150,7 +150,7 @@
             </div>
           </section>
           <section>
-            <h4 class="font-bold text-secondaryDark">
+            <h4 class="font-semibold text-secondaryDark">
               {{ $t("settings.experiments") }}
             </h4>
             <div class="mt-1 text-secondaryLight">
@@ -218,7 +218,7 @@
         </div>
         <div class="space-y-8 p-8 md:col-span-2">
           <section>
-            <h4 class="font-bold text-secondaryDark">
+            <h4 class="font-semibold text-secondaryDark">
               {{ $t("extensions") }}
             </h4>
             <div class="mt-1 text-secondaryLight">
@@ -270,7 +270,7 @@
             </div>
           </section>
           <section>
-            <h4 class="font-bold text-secondaryDark">
+            <h4 class="font-semibold text-secondaryDark">
               {{ $t("proxy") }}
             </h4>
             <div class="mt-1 text-secondaryLight">
@@ -312,6 +312,7 @@
                 :title="$t('reset_default')"
                 :icon="clearIcon"
                 outline
+                class="rounded"
                 @click.native="resetProxy"
               />
             </div>