diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 0f83655f..686631a9 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -282,25 +282,6 @@ pre.ace_editor {
   }
 }
 
-.search-wrapper {
-  @apply flex flex-1;
-  @apply relative;
-
-  &::after {
-    @apply absolute;
-    @apply flex;
-    @apply inset-y-0;
-    @apply items-center;
-    @apply justify-center;
-    @apply pointer-events-none;
-    @apply font-icon;
-    @apply text-secondaryLight;
-    @apply left-4;
-
-    content: "\e8b6";
-  }
-}
-
 input[type="checkbox"] {
   @apply hidden;
 
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 6d2f2c5b..31afa2fb 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -20,7 +20,7 @@
         </div>
       </div>
       <div class="bg-primary border-b border-dividerLight">
-        <div class="flex flex-col my-4 mx-6 search-wrapper">
+        <div class="flex flex-col my-4 mx-6">
           <input
             v-model="filterText"
             type="search"
@@ -31,8 +31,7 @@
               flex
               w-full
               py-2
-              pr-2
-              pl-8
+              px-4
               focus-visible:border-divider
             "
             :placeholder="$t('action.search')"
diff --git a/components/button/Primary.vue b/components/button/Primary.vue
index 42b7a203..1e094c7c 100644
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -6,6 +6,7 @@
     class="
       font-bold
       py-2
+      transition
       inline-flex
       items-center
       justify-center
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index 235527d8..ee214804 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -6,6 +6,7 @@
     class="
       font-medium
       py-2
+      transition
       inline-flex
       items-center
       justify-center
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index 37ad0cfc..09077fa1 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -19,7 +19,7 @@
               autofocus
               class="
                 bg-transparent
-                border-b border-transparent
+                border-t border-dividerLight
                 cursor-pointer
                 flex
                 font-medium
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 8b6649bd..384b37ee 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -14,14 +14,13 @@
       "
       :class="{ 'bg-primary': !savingMode }"
     >
-      <div v-if="showCollActions" class="search-wrapper">
-        <input
-          v-model="filterText"
-          type="search"
-          :placeholder="$t('action.search')"
-          class="bg-transparent flex w-full py-2 pr-2 pl-10"
-        />
-      </div>
+      <input
+        v-if="showCollActions"
+        v-model="filterText"
+        type="search"
+        :placeholder="$t('action.search')"
+        class="bg-transparent flex w-full py-2 px-4"
+      />
       <div class="flex flex-1 justify-between">
         <ButtonSecondary
           svg="plus"
diff --git a/components/collections/index.vue b/components/collections/index.vue
index a6c2b732..90290e70 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -16,12 +16,12 @@
       "
       :class="{ '!top-sidebarPrimaryStickyFold': !saveRequest && !doc }"
     >
-      <div v-if="!saveRequest" class="search-wrapper">
+      <div v-if="!saveRequest" class="search-wrappe">
         <input
           v-model="filterText"
           type="search"
           :placeholder="$t('action.search')"
-          class="bg-transparent flex w-full py-2 pr-2 pl-10"
+          class="bg-transparent flex w-full py-2 pr-2 pl-4"
         />
       </div>
       <CollectionsChooseType
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index b9e110de..1de2e324 100644
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -4,14 +4,12 @@
       <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
         <AppSection label="docs">
           <div class="bg-primary flex top-sidebarPrimaryStickyFold z-10 sticky">
-            <div class="search-wrapper">
-              <input
-                v-model="graphqlFieldsFilterText"
-                type="search"
-                :placeholder="$t('action.search')"
-                class="bg-transparent flex w-full py-2 pr-2 pl-10"
-              />
-            </div>
+            <input
+              v-model="graphqlFieldsFilterText"
+              type="search"
+              :placeholder="$t('action.search')"
+              class="bg-transparent flex w-full p-4 py-2"
+            />
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
diff --git a/components/history/index.vue b/components/history/index.vue
index 6134f1aa..8403421a 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -10,14 +10,12 @@
         sticky
       "
     >
-      <div class="search-wrapper">
-        <input
-          v-model="filterText"
-          type="search"
-          class="bg-transparent flex w-full py-2 pr-2 pl-10"
-          :placeholder="$t('action.search')"
-        />
-      </div>
+      <input
+        v-model="filterText"
+        type="search"
+        class="bg-transparent flex w-full p-4 py-2"
+        :placeholder="$t('action.search')"
+      />
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
diff --git a/components/http/Authorization.vue b/components/http/Authorization.vue
index 6d9b0c64..d17fe3c2 100644
--- a/components/http/Authorization.vue
+++ b/components/http/Authorization.vue
@@ -100,7 +100,7 @@
       </span>
       <ButtonSecondary
         outline
-        :label="$t('action.learn_more')"
+        :label="$t('app.documentation')"
         to="https://docs.hoppscotch.io"
         blank
         svg="external-link"
diff --git a/components/http/Body.vue b/components/http/Body.vue
index f86fde87..c683f9e2 100644
--- a/components/http/Body.vue
+++ b/components/http/Body.vue
@@ -64,6 +64,14 @@
       <span class="text-center pb-4">
         {{ $t("empty.body") }}
       </span>
+      <ButtonSecondary
+        outline
+        :label="$t('app.documentation')"
+        to="https://docs.hoppscotch.io"
+        blank
+        svg="external-link"
+        reverse
+      />
     </div>
   </div>
 </template>
diff --git a/components/smart/Item.vue b/components/smart/Item.vue
index 9d2a6c14..4474f2d1 100644
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -5,6 +5,7 @@
     :blank="blank"
     class="
       rounded
+      transition
       font-medium
       flex-shrink-0
       py-2
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index c9b343a6..7c45f2b8 100644
--- a/components/smart/Toggle.vue
+++ b/components/smart/Toggle.vue
@@ -54,7 +54,6 @@ $transition: all 0.2s ease-in-out;
   height: $height;
   border: if($useBorder, 2px solid $borderColor, none);
   background-color: if($useBorder, transparent, $inactiveColor);
-  transition: $transition;
   box-sizing: initial;
 
   .handle {
diff --git a/components/tab/Primary.vue b/components/tab/Primary.vue
index 756b2339..2a53348d 100644
--- a/components/tab/Primary.vue
+++ b/components/tab/Primary.vue
@@ -6,6 +6,7 @@
     class="
       rounded
       py-2
+      transition
       px-4
       inline-flex
       items-center
diff --git a/components/tab/Secondary.vue b/components/tab/Secondary.vue
index 4f28e281..addb08ce 100644
--- a/components/tab/Secondary.vue
+++ b/components/tab/Secondary.vue
@@ -7,6 +7,7 @@
       font-medium
       flex-1
       py-2
+      transition
       transform
       inline-flex
       items-center