diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 5a6fbd400..905447ef2 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -183,19 +183,21 @@ hr {
   @apply w-full;
   @apply px-4 py-2;
   @apply bg-primary;
-  @apply truncate;
   @apply rounded;
   @apply text-secondaryDark;
   @apply border border-divider;
-  @apply transition;
-  @apply focus:(outline-none border-accent);
-  @apply disabled:cursor-not-allowed;
+  @apply focus-visible:border-accent;
 }
 
 input,
 select,
 textarea,
 button {
+  @apply focus:outline-none;
+  @apply truncate;
+  @apply transition;
+  @apply disabled:cursor-not-allowed;
+
   font-size: var(--body-font-size);
   line-height: var(--body-line-height);
 }
@@ -358,6 +360,7 @@ input[type="checkbox"] {
         @apply ml-auto;
         @apply sm:ml-8;
         @apply transition;
+        @apply rounded;
         @apply text-current;
         @apply normal-case;
         @apply hover:(bg-opacity-20 no-underline);
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 399a274da..859847d80 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -16,7 +16,8 @@
           } ${$t('layout.zen_mode')}`"
           :icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
           :class="{
-            '!text-accent focus:text-accent hover:text-accent': ZEN_MODE,
+            '!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
+              ZEN_MODE,
           }"
           @click.native="ZEN_MODE = !ZEN_MODE"
         />
diff --git a/components/app/Search.vue b/components/app/Search.vue
index 5b21f6dd1..0b5f2d51b 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -16,8 +16,6 @@
           px-4
           pt-2
           pb-6
-          truncate
-          focus:outline-none
         "
       />
       <div
diff --git a/components/app/Share.vue b/components/app/Share.vue
index f8f527f64..5f78134d6 100644
--- a/components/app/Share.vue
+++ b/components/app/Share.vue
@@ -104,11 +104,11 @@ export default {
   @apply rounded;
   @apply flex-col flex;
   @apply p-4;
-  @apply transition;
   @apply items-center;
   @apply justify-center;
   @apply hover:(bg-primaryLight text-secondaryDark);
-  @apply focus:(border-divider outline-none);
+  @apply focus:outline-none;
+  @apply focus-visible:border-divider;
 
   svg {
     @apply opacity-80;
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 8f3dfd76f..f544630d3 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -36,10 +36,7 @@
               py-2
               pr-2
               pl-8
-              transition
-              truncate
-              focus:(border-divider
-              outline-none)
+              focus-visible:border-divider
             "
             :placeholder="$t('search')"
           />
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index aa94cde51..3cd980ad4 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -123,9 +123,8 @@ export default defineComponent({
   @apply flex flex-col flex-1;
   @apply items-center;
   @apply justify-center;
-  @apply transition;
   @apply hover:(bg-primaryDark text-secondaryDark);
-  @apply focus:text-secondaryDark;
+  @apply focus-visible:text-secondaryDark;
 
   &::after {
     @apply absolute;
diff --git a/components/button/Primary.vue b/components/button/Primary.vue
index d029f41e5..851b575d4 100644
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -6,7 +6,6 @@
     class="
       font-bold
       py-2
-      transition
       inline-flex
       items-center
       justify-center
@@ -15,8 +14,8 @@
     "
     :class="[
       color
-        ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus:(text-${color}-900 bg-${color}-300)`
-        : `text-accentContrast bg-accent hover:bg-accentDark focus:bg-accentDark`,
+        ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
+        : `text-accentContrast bg-accent hover:bg-accentDark focus-visible:bg-accentDark`,
       label ? 'px-4' : 'px-2',
       rounded ? 'rounded-full' : 'rounded',
       { 'opacity-75 cursor-not-allowed': disabled },
@@ -28,7 +27,7 @@
           gradient,
       },
       {
-        'border border-accent hover:border-accentDark focus:border-accentDark':
+        'border border-accent hover:border-accentDark focus-visible:border-accentDark':
           outline,
       },
     ]"
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index f7f157442..f6e4259ee 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -6,7 +6,6 @@
     class="
       font-medium
       py-2
-      transition
       inline-flex
       items-center
       justify-center
@@ -18,14 +17,14 @@
     :class="[
       color
         ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
-        : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
+        : 'text-secondary hover:text-secondaryDark focus-visible:text-secondaryDark',
       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 },
       {
-        'border border-divider hover:border-dividerDark focus:border-dividerDark':
+        'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
           outline,
       },
     ]"
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index f2832f56a..53c67667a 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -25,7 +25,6 @@
                 py-2
                 px-4
                 appearance-none
-                focus:outline-none
               "
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index 9d2bd955c..ccd94c56c 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -77,7 +77,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
               color="red"
               :label="$t('delete')"
               @click.native="
@@ -186,7 +186,7 @@ export default Vue.extend({
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle"
+      if (this.isSelected) return "check_circle_outline"
       else if (!this.showChildren && !this.isFiltered) return "arrow_right"
       else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
       else return "folder"
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index b4e7f57d3..c01201572 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -73,7 +73,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
               color="red"
               :label="$t('delete')"
               @click.native="
@@ -184,7 +184,7 @@ export default Vue.extend({
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle"
+      if (this.isSelected) return "check_circle_outline"
       else if (!this.showChildren && !this.isFiltered) return "arrow_right"
       else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
       else return "folder"
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index 3639d86fd..949db9768 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -21,7 +21,7 @@
         @click="!doc ? selectRequest() : {}"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
-          {{ isSelected ? "check_circle" : "description" }}
+          {{ isSelected ? "check_circle_outline" : "description" }}
         </i>
       </span>
       <span
@@ -75,7 +75,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
               color="red"
               :label="$t('delete')"
               @click.native="
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 41120c887..341292b06 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -20,8 +20,6 @@
             py-2
             pr-2
             pl-9
-            truncate
-            focus:outline-none
           "
         />
       </div>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 34db23399..a0e7419e2 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -20,8 +20,6 @@
             py-2
             pr-2
             pl-9
-            truncate
-            focus:outline-none
           "
         />
       </div>
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 07c93ec05..0eb69ec02 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -36,7 +36,7 @@
           v-if="doc && !selected"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('import.title')"
-          icon="check_box_outline_blank"
+          icon="radio_button_unchecked"
           color="green"
           @click.native="$emit('select-collection')"
         />
@@ -44,7 +44,7 @@
           v-if="doc && selected"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
-          icon="check_box"
+          icon="check_circle_outline"
           color="green"
           @click.native="$emit('unselect-collection')"
         />
@@ -96,7 +96,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
               color="red"
               :label="$t('delete')"
               @click.native="
@@ -211,7 +211,7 @@ export default {
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle"
+      if (this.isSelected) return "check_circle_outline"
       else if (!this.showChildren && !this.isFiltered) return "arrow_right"
       else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
       else return "folder"
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 39a6d2fc2..af513bde2 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -78,7 +78,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
               color="red"
               :label="$t('delete')"
               @click.native="
@@ -198,7 +198,7 @@ export default {
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle"
+      if (this.isSelected) return "check_circle_outline"
       else if (!this.showChildren && !this.isFiltered) return "arrow_right"
       else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
       else return "folder"
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index 6ba9cfbe6..5c0363427 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -26,7 +26,7 @@
           class="material-icons"
           :class="{ 'text-green-500': isSelected }"
         >
-          check_circle
+          check_circle_outline
         </i>
         <span v-else>
           {{ request.method }}
@@ -86,7 +86,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
               color="red"
               :label="$t('delete')"
               @click.native="
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 7c5bacc2f..3f6778ed7 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -28,7 +28,7 @@
           v-if="doc && !selected"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('import.title')"
-          icon="check_box_outline_blank"
+          icon="radio_button_unchecked"
           color="green"
           @click.native="$emit('select-collection')"
         />
@@ -36,7 +36,7 @@
           v-if="doc && selected"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
-          icon="check_box"
+          icon="check_circle_outline"
           color="green"
           @click.native="$emit('unselect-collection')"
         />
@@ -92,7 +92,7 @@
             />
             <SmartItem
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="delete"
+              icon="remove_circle_outline"
               color="red"
               :label="$t('delete')"
               @click.native="
@@ -204,7 +204,7 @@ export default {
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle"
+      if (this.isSelected) return "check_circle_outline"
       else if (!this.showChildren && !this.isFiltered) return "arrow_right"
       else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
       else return "folder"
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index f991be3f0..241d0609e 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -75,7 +75,7 @@
             />
             <SmartItem
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="delete"
+              icon="remove_circle_outline"
               color="red"
               :label="$t('delete')"
               @click.native="
@@ -188,7 +188,7 @@ export default {
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle"
+      if (this.isSelected) return "check_circle_outline"
       else if (!this.showChildren && !this.isFiltered) return "arrow_right"
       else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
       else return "folder"
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index ce935fbc1..cc21e5a8c 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -19,7 +19,7 @@
           class="material-icons"
           :class="{ 'text-green-500': isSelected }"
         >
-          check_circle
+          check_circle_outline
         </i>
         <span v-else>
           {{ request.method }}
@@ -79,7 +79,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
               color="red"
               :label="$t('delete')"
               @click.native="
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 7258f7dcc..6fc892348 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -45,27 +45,13 @@
           >
             <input
               v-model="variable.key"
-              class="
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
+              class="bg-primaryLight flex flex-1 py-2 px-4"
               :placeholder="$t('count.variable', { count: index + 1 })"
               :name="'param' + index"
             />
             <input
               v-model="variable.value"
-              class="
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
+              class="bg-primaryLight flex flex-1 py-2 px-4"
               :placeholder="$t('count.value', { count: index + 1 })"
               :name="'value' + index"
             />
@@ -74,7 +60,7 @@
                 id="variable"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
-                icon="delete"
+                icon="remove_circle_outline"
                 color="red"
                 @click.native="removeEnvironmentVariable(index)"
               />
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index 01dfec4f1..1f00f39d1 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -40,7 +40,7 @@
           "
         />
         <SmartItem
-          icon="delete"
+          icon="remove_circle_outline"
           color="red"
           :label="$t('delete')"
           @click.native="
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 2791a55ed..2f98cf6bc 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -22,7 +22,6 @@
             py-2
             px-4
             appearance-none
-            focus:outline-none
           "
         >
           <option :value="-1">{{ $t("environment.no_environment") }}</option>
diff --git a/components/graphql/Request.vue b/components/graphql/Request.vue
index e84a2c173..f74ba268d 100644
--- a/components/graphql/Request.vue
+++ b/components/graphql/Request.vue
@@ -15,10 +15,7 @@
           w-full
           py-2
           px-4
-          transition
-          truncate
-          focus:(border-accent
-          outline-none)
+          focus-visible:border-accent
         "
         :placeholder="$t('url')"
         @keyup.enter="onConnectClick"
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index 675313681..206f67f0c 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -163,7 +163,7 @@
                 bg-primaryLight
                 flex
                 flex-1
-          py-1
+                py-1
                 px-4
                 truncate
                 focus:outline-none
@@ -177,14 +177,7 @@
               "
             />
             <input
-              class="
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
+              class="bg-primaryLight flex flex-1 py-2 px-4"
               :placeholder="$t('count.value', { count: index + 1 })"
               :name="`value ${index}`"
               :value="header.value"
@@ -210,9 +203,9 @@
                 :icon="
                   header.hasOwnProperty('active')
                     ? header.active
-                      ? 'check_box'
-                      : 'check_box_outline_blank'
-                    : 'check_box'
+                      ? 'check_circle_outline'
+                      : 'radio_button_unchecked'
+                    : 'check_circle_outline'
                 "
                 color="green"
                 @click.native="
@@ -228,7 +221,7 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
-                icon="delete"
+                icon="remove_circle_outline"
                 color="red"
                 @click.native="removeRequestHeader(index)"
               />
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index 10f7601be..b2f1bad02 100644
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -17,16 +17,7 @@
                 v-model="graphqlFieldsFilterText"
                 type="search"
                 :placeholder="$t('search')"
-                class="
-                  bg-primaryLight
-                  flex
-                  w-full
-                  py-2
-                  pr-2
-                  pl-9
-                  truncate
-                  focus:outline-none
-                "
+                class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
               />
             </div>
             <div class="flex">
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index a5bba2443..1b78883a3 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -21,7 +21,7 @@
       </span>
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        icon="delete"
+        icon="remove_circle_outline"
         color="red"
         :title="$t('delete')"
         class="hidden group-hover:inline-flex"
diff --git a/components/history/index.vue b/components/history/index.vue
index 73cf4a8ed..81585c161 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -14,16 +14,7 @@
         <input
           v-model="filterText"
           type="search"
-          class="
-            bg-primaryLight
-            flex
-            w-full
-            py-2
-            pr-2
-            pl-9
-            truncate
-            focus:outline-none
-          "
+          class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
           :placeholder="$t('search')"
         />
       </div>
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index 4372c5888..a4bd0fe24 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -29,7 +29,7 @@
     </span>
     <ButtonSecondary
       v-tippy="{ theme: 'tooltip' }"
-      icon="delete"
+      icon="remove_circle_outline"
       color="red"
       :title="$t('delete')"
       class="group-hover:inline-flex hidden"
diff --git a/components/http/Authorization.vue b/components/http/Authorization.vue
index a872246db..20fcd9f11 100644
--- a/components/http/Authorization.vue
+++ b/components/http/Authorization.vue
@@ -25,14 +25,12 @@
           arrow
         >
           <template #trigger>
-            <div class="flex">
-              <span class="select-wrapper">
-                <ButtonSecondary
-                  class="rounded-none ml-2 pr-8"
-                  :label="authName"
-                />
-              </span>
-            </div>
+            <span class="select-wrapper">
+              <ButtonSecondary
+                class="rounded-none ml-2 pr-8"
+                :label="authName"
+              />
+            </span>
           </template>
           <SmartItem
             label="None"
diff --git a/components/http/Body.vue b/components/http/Body.vue
index 84d1d16e0..d380cccc3 100644
--- a/components/http/Body.vue
+++ b/components/http/Body.vue
@@ -22,14 +22,12 @@
           arrow
         >
           <template #trigger>
-            <div class="flex">
-              <span class="select-wrapper">
-                <ButtonSecondary
-                  :label="contentType"
-                  class="rounded-none ml-2 pr-8"
-                />
-              </span>
-            </div>
+            <span class="select-wrapper">
+              <ButtonSecondary
+                :label="contentType"
+                class="rounded-none ml-2 pr-8"
+              />
+            </span>
           </template>
           <SmartItem
             v-for="(contentTypeItem, index) in validContentTypes"
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index f05fd3e29..ebf199354 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -53,7 +53,6 @@
           flex-1
           py-1
           px-4
-          focus:outline-none
         "
         @change="
           updateBodyParam(index, {
@@ -66,14 +65,7 @@
       />
       <input
         v-else
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
+        class="bg-primaryLight flex flex-1 py-2 px-4"
         :placeholder="$t('count.parameter', { count: index + 1 })"
         :name="'param' + index"
         :value="param.key"
@@ -109,7 +101,6 @@
           flex-1
           py-1
           px-4
-          focus:outline-none
         "
           @change="
             updateBodyParam(index, {
@@ -122,14 +113,7 @@
         />
         <input
           v-else
-          class="
-            bg-primaryLight
-            flex flex-1
-            py-2
-            px-4
-            truncate
-            focus:outline-none
-          "
+          class="bg-primaryLight flex flex-1 py-2 px-4"
           :placeholder="$t('count.value', { count: index + 1 })"
           :name="'value' + index"
           :value="param.value"
@@ -173,9 +157,9 @@
           :icon="
             param.hasOwnProperty('active')
               ? param.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
+                ? 'check_circle_outline'
+                : 'radio_button_unchecked'
+              : 'check_circle_outline'
           "
           color="green"
           @click.native="
@@ -192,7 +176,7 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
-          icon="delete"
+          icon="remove_circle_outline"
           color="red"
           @click.native="deleteBodyParam(index)"
         />
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 228b56c82..91430cb1d 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -56,7 +56,6 @@
           py-1
           px-4
           truncate
-          focus:outline-none
         "
         :class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }"
         @input="
@@ -77,7 +76,6 @@
           flex-1
           py-1
           px-4
-          focus:outline-none
         "
         @change="
           updateHeader(index, {
@@ -89,14 +87,7 @@
       />
       <input
         v-else
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
+        class="bg-primaryLight flex flex-1 py-2 px-4"
         :placeholder="$t('count.value', { count: index + 1 })"
         :name="'value' + index"
         :value="header.value"
@@ -121,9 +112,9 @@
           :icon="
             header.hasOwnProperty('active')
               ? header.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
+                ? 'check_circle_outline'
+                : 'radio_button_unchecked'
+              : 'check_circle_outline'
           "
           color="green"
           @click.native="
@@ -139,7 +130,7 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
-          icon="delete"
+          icon="remove_circle_outline"
           color="red"
           @click.native="deleteHeader(index)"
         />
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index d4bdc5e9b..c5a5693e1 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -53,7 +53,6 @@
           flex-1
           py-1
           px-4
-          focus:outline-none
         "
         @change="
           updateParam(index, {
@@ -65,14 +64,7 @@
       />
       <input
         v-else
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
+        class="bg-primaryLight flex flex-1 py-2 px-4"
         :placeholder="$t('count.parameter', { count: index + 1 })"
         :name="'param' + index"
         :value="param.key"
@@ -95,7 +87,6 @@
           flex-1
           py-1
           px-4
-          focus:outline-none
         "
         @change="
           updateParam(index, {
@@ -107,14 +98,7 @@
       />
       <input
         v-else
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
+        class="bg-primaryLight flex flex-1 py-2 px-4"
         :placeholder="$t('count.value', { count: index + 1 })"
         :name="'value' + index"
         :value="param.value"
@@ -139,9 +123,9 @@
           :icon="
             param.hasOwnProperty('active')
               ? param.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
+                ? 'check_circle_outline'
+                : 'radio_button_unchecked'
+              : 'check_circle_outline'
           "
           color="green"
           @click.native="
@@ -157,7 +141,7 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
-          icon="delete"
+          icon="remove_circle_outline"
           color="red"
           @click.native="deleteParam(index)"
         />
diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue
index 9e41a8ca9..d1069859d 100644
--- a/components/http/PreRequestScript.vue
+++ b/components/http/PreRequestScript.vue
@@ -16,13 +16,21 @@
       <label class="font-semibold text-secondaryLight">
         {{ $t("javascript_code") }}
       </label>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
-        blank
-        :title="$t('wiki')"
-        icon="help_outline"
-      />
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent"
+        />
+      </div>
     </div>
     <div class="border-b border-dividerLight flex">
       <div class="border-r border-dividerLight w-2/3">
@@ -63,10 +71,11 @@
           {{ $t("preRequest.snippets") }}
         </h4>
         <div class="flex flex-col pt-4">
-          <SmartItem
+          <TabSecondary
             v-for="(snippet, index) in snippets"
             :key="`snippet-${index}`"
             :label="snippet.name"
+            active
             @click.native="useSnippet(snippet.script)"
           />
         </div>
@@ -82,19 +91,22 @@ import preRequestScriptSnippets from "~/helpers/preRequestScriptSnippets"
 
 export default defineComponent({
   setup() {
-    return {
-      preRequestScript: usePreRequestScript(),
+    const preRequestScript = usePreRequestScript()
+
+    const useSnippet = (script: string) => {
+      preRequestScript.value += script
     }
-  },
-  data() {
+
+    const clearContent = () => {
+      preRequestScript.value = ""
+    }
+
     return {
+      preRequestScript,
       snippets: preRequestScriptSnippets,
+      useSnippet,
+      clearContent,
     }
   },
-  methods: {
-    useSnippet(script: string) {
-      this.preRequestScript += script
-    },
-  },
 })
 </script>
diff --git a/components/http/Request.vue b/components/http/Request.vue
index 2474d3cbb..fc8bd0760 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="bg-primary flex p-4 top-0 z-10 sticky">
     <div class="relative inline-flex">
-      <span class="select-wrapper">
-        <tippy
-          ref="methodOptions"
-          interactive
-          trigger="click"
-          theme="popover"
-          arrow
-        >
-          <template #trigger>
+      <tippy
+        ref="methodOptions"
+        interactive
+        trigger="click"
+        theme="popover"
+        arrow
+      >
+        <template #trigger>
+          <span class="select-wrapper">
             <input
               id="method"
               class="
@@ -22,25 +22,23 @@
                 text-secondaryDark
                 py-2
                 px-4
-                transition
                 w-28
-                truncate
                 hover:border-dividerDark
-                focus:border-accent focus:outline-none
+                focus-visible:border-accent
               "
               :value="newMethod"
               :readonly="!isCustomMethod"
               @input="onSelectMethod($event.target.value)"
             />
-          </template>
-          <SmartItem
-            v-for="(method, index) in methods"
-            :key="`method-${index}`"
-            :label="method"
-            @click.native="onSelectMethod(method)"
-          />
-        </tippy>
-      </span>
+          </span>
+        </template>
+        <SmartItem
+          v-for="(method, index) in methods"
+          :key="`method-${index}`"
+          :label="method"
+          @click.native="onSelectMethod(method)"
+        />
+      </tippy>
     </div>
     <div class="flex-1 inline-flex">
       <SmartEnvInput
@@ -55,10 +53,8 @@
           text-secondaryDark
           py-1
           px-4
-          transition
-          truncate
           hover:border-dividerDark
-          focus:outline-none focus:border-accent
+          focus-visible:border-accent
         "
         @enter="newSendRequest()"
       />
@@ -74,9 +70,7 @@
           text-secondaryDark
           py-2
           px-4
-          transition
-          truncate
-          focus:border-accent focus:outline-none
+          focus-visible:border-accent
         "
         name="url"
         type="text"
diff --git a/components/http/Tests.vue b/components/http/Tests.vue
index eb6e2bc72..4d92ddc71 100644
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -16,13 +16,21 @@
       <label class="font-semibold text-secondaryLight">
         {{ $t("javascript_code") }}
       </label>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
-        blank
-        :title="$t('wiki')"
-        icon="help_outline"
-      />
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent"
+        />
+      </div>
     </div>
     <div class="border-b border-dividerLight flex">
       <div class="border-r border-dividerLight w-2/3">
@@ -63,10 +71,11 @@
           {{ $t("test.snippets") }}
         </h4>
         <div class="flex flex-col pt-4">
-          <SmartItem
+          <TabSecondary
             v-for="(snippet, index) in snippets"
             :key="`snippet-${index}`"
             :label="snippet.name"
+            active
             @click.native="useSnippet(snippet.script)"
           />
         </div>
@@ -82,19 +91,22 @@ import testSnippets from "~/helpers/testSnippets"
 
 export default defineComponent({
   setup() {
-    return {
-      testScript: useTestScript(),
+    const testScript = useTestScript()
+
+    const useSnippet = (script: string) => {
+      testScript.value += script
     }
-  },
-  data() {
+
+    const clearContent = () => {
+      testScript.value = ""
+    }
+
     return {
+      testScript,
       snippets: testSnippets,
+      useSnippet,
+      clearContent,
     }
   },
-  methods: {
-    useSnippet(script: string) {
-      this.testScript += script
-    },
-  },
 })
 </script>
diff --git a/components/http/TokenList.vue b/components/http/TokenList.vue
index 40ed6ed61..2439bda4c 100644
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -42,7 +42,7 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
-              icon="delete"
+              icon="remove_circle_outline"
               color="red"
               @click.native="removeOAuthToken(index)"
             />
diff --git a/components/landing/Footer.vue b/components/landing/Footer.vue
index 89aa767e6..06821208f 100644
--- a/components/landing/Footer.vue
+++ b/components/landing/Footer.vue
@@ -159,6 +159,6 @@ export default {
   @apply px-2 py-1;
   @apply -mx-2 -my-1;
   @apply hover:text-secondaryDark;
-  @apply focus:text-secondaryDark;
+  @apply focus-visible:text-secondaryDark;
 }
 </style>
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 3e48cca43..76a496f90 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -20,10 +20,7 @@
                     w-full
                     py-2
                     px-4
-                    transition
-                    truncate
-                    focus:(border-accent
-                    outline-none)
+                    focus-visible:border-accent
                   "
                   :placeholder="$t('url')"
                 />
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 689a6d403..220d90159 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -22,10 +22,7 @@
                     w-full
                     py-2
                     px-4
-                    transition
-                    truncate
-                    focus:(border-accent
-                    outline-none)
+                    focus-visible:border-accent
                   "
                   :placeholder="$t('url')"
                   @keyup.enter="urlValid ? toggleConnection() : null"
@@ -41,10 +38,7 @@
                     w-full
                     py-2
                     px-4
-                    transition
-                    truncate
-                    focus:(border-accent
-                    outline-none)
+                    focus-visible:border-accent
                   "
                   spellcheck="false"
                 />
@@ -124,7 +118,7 @@
                 v-if="index + 1 !== communication.inputs.length"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
-                icon="delete"
+                icon="remove_circle_outline"
                 class="rounded-l-none"
                 color="red"
                 outline
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 09b63ed28..9eaa8f0c3 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -18,10 +18,7 @@
               w-full
               py-2
               px-4
-              transition
-              truncate
-              focus:(border-accent
-              outline-none)
+              focus-visible:border-accent
             "
             :placeholder="$t('url')"
             @keyup.enter="serverValid ? toggleSSEConnection() : null"
@@ -51,10 +48,7 @@
               w-full
               py-2
               px-4
-              transition
-              truncate
-              focus:(border-accent
-              outline-none)
+              focus-visible:border-accent
             "
             spellcheck="false"
           />
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 8db948ff1..f5eab5ffb 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -18,10 +18,7 @@
                     w-full
                     py-2
                     px-4
-                    transition
-                    truncate
-                    focus:(border-accent
-                    outline-none)
+                    focus-visible:border-accent
                   "
                   type="url"
                   spellcheck="false"
@@ -82,14 +79,7 @@
             >
               <input
                 v-model="protocol.value"
-                class="
-                  bg-primaryLight
-                  flex flex-1
-                  py-2
-                  px-4
-                  truncate
-                  focus:outline-none
-                "
+                class="bg-primaryLight flex flex-1 py-2 px-4"
                 :placeholder="$t('count.protocol', { count: index + 1 })"
                 name="message"
                 type="text"
@@ -107,9 +97,9 @@
                   :icon="
                     protocol.hasOwnProperty('active')
                       ? protocol.active
-                        ? 'check_box'
-                        : 'check_box_outline_blank'
-                      : 'check_box'
+                        ? 'check_circle_outline'
+                        : 'radio_button_unchecked'
+                      : 'check_circle_outline'
                   "
                   color="green"
                   @click.native="
@@ -123,7 +113,7 @@
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="$t('delete')"
-                  icon="delete"
+                  icon="remove_circle_outline"
                   color="red"
                   @click.native="deleteProtocol({ index })"
                 />
diff --git a/components/smart/Anchor.vue b/components/smart/Anchor.vue
index 8ba5e3705..431bf3854 100644
--- a/components/smart/Anchor.vue
+++ b/components/smart/Anchor.vue
@@ -6,8 +6,8 @@
     class="inline-flex items-center justify-center focus:outline-none"
     :class="[
       color
-        ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
-        : 'hover:text-secondaryDark focus:text-secondaryDark',
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
+        : 'hover:text-secondaryDark focus-visible:text-secondaryDark',
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
     ]"
diff --git a/components/smart/ChangeLanguage.vue b/components/smart/ChangeLanguage.vue
index 7a9986456..0dd9b31d0 100644
--- a/components/smart/ChangeLanguage.vue
+++ b/components/smart/ChangeLanguage.vue
@@ -1,8 +1,8 @@
 <template>
   <span class="inline-flex">
-    <span class="select-wrapper">
-      <tippy ref="language" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
+    <tippy ref="language" interactive trigger="click" theme="popover" arrow>
+      <template #trigger>
+        <span class="select-wrapper">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('settings.choose_language')"
@@ -13,18 +13,18 @@
               $i18n.locales.find(({ code }) => code == $i18n.locale).name
             }`"
           />
-        </template>
-        <NuxtLink
-          v-for="(locale, index) in $i18n.locales.filter(
-            ({ code }) => code !== $i18n.locale
-          )"
-          :key="`locale-${index}`"
-          :to="switchLocalePath(locale.code)"
-          @click="$refs.language.tippy().hide()"
-        >
-          <SmartItem :label="locale.name" />
-        </NuxtLink>
-      </tippy>
-    </span>
+        </span>
+      </template>
+      <NuxtLink
+        v-for="(locale, index) in $i18n.locales.filter(
+          ({ code }) => code !== $i18n.locale
+        )"
+        :key="`locale-${index}`"
+        :to="switchLocalePath(locale.code)"
+        @click="$refs.language.tippy().hide()"
+      >
+        <SmartItem :label="locale.name" />
+      </NuxtLink>
+    </tippy>
   </span>
 </template>
diff --git a/components/smart/EnvInput.vue b/components/smart/EnvInput.vue
index e3d5a64a3..63e76eb6f 100644
--- a/components/smart/EnvInput.vue
+++ b/components/smart/EnvInput.vue
@@ -496,6 +496,8 @@ export default defineComponent({
   @apply overflow-x-auto;
   @apply overflow-y-hidden;
   @apply resize-none;
+  @apply focus:outline-none;
+  @apply transition;
 }
 
 .env-input::-webkit-scrollbar {
diff --git a/components/smart/FontSizePicker.vue b/components/smart/FontSizePicker.vue
index f458864ca..d75be2bca 100644
--- a/components/smart/FontSizePicker.vue
+++ b/components/smart/FontSizePicker.vue
@@ -1,8 +1,8 @@
 <template>
   <span class="inline-flex">
-    <span class="select-wrapper">
-      <tippy ref="fontSize" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
+    <tippy ref="fontSize" interactive trigger="click" theme="popover" arrow>
+      <template #trigger>
+        <span class="select-wrapper">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('settings.change_font_size')"
@@ -11,20 +11,20 @@
             outline
             :label="getFontSizeName(fontSizes.find((size) => size == active))"
           />
-        </template>
-        <SmartItem
-          v-for="(size, index) in fontSizes"
-          :key="`size-${index}`"
-          :label="getFontSizeName(size)"
-          :info-icon="size === active ? 'done' : ''"
-          :active-info-icon="size === active"
-          @click.native="
-            setActiveFont(size)
-            $refs.fontSize.tippy().hide()
-          "
-        />
-      </tippy>
-    </span>
+        </span>
+      </template>
+      <SmartItem
+        v-for="(size, index) in fontSizes"
+        :key="`size-${index}`"
+        :label="getFontSizeName(size)"
+        :info-icon="size === active ? 'done' : ''"
+        :active-info-icon="size === active"
+        @click.native="
+          setActiveFont(size)
+          $refs.fontSize.tippy().hide()
+        "
+      />
+    </tippy>
   </span>
 </template>
 
diff --git a/components/smart/Item.vue b/components/smart/Item.vue
index fc3e47201..a86c89fc1 100644
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -6,16 +6,14 @@
     class="
       rounded
       font-medium
+      flex-shrink-0
       py-2
       px-4
-      transition
       inline-flex
       items-center
-      hover:(bg-primaryDark
-      text-secondaryDark)
-      focus:(bg-primaryDark
-      outline-none
-      text-secondaryDark)
+      hover:bg-primaryDark hover:text-secondaryDark
+      focus:outline-none
+      focus-visible:bg-primaryDark focus-visible:text-secondaryDark
     "
     :class="[
       { 'opacity-75 cursor-not-allowed': disabled },
@@ -23,7 +21,7 @@
       { 'flex-1': label },
       { 'flex-row-reverse justify-end': reverse },
       {
-        'border border-divider hover:border-dividerDark focus:border-dividerDark':
+        'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
           outline,
       },
     ]"
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 7f6c49d76..20594e662 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -84,9 +84,9 @@ export default {
     @apply text-secondary;
     @apply font-semibold;
     @apply cursor-pointer;
-    @apply transition;
     @apply hover:text-secondaryDark;
-    @apply focus:(text-secondaryDark outline-none);
+    @apply focus:outline-none;
+    @apply focus-visible:text-secondaryDark;
 
     .tab-info {
       @apply inline-flex;
diff --git a/components/tab/Primary.vue b/components/tab/Primary.vue
index cf3c5835f..1ce38bbdd 100644
--- a/components/tab/Primary.vue
+++ b/components/tab/Primary.vue
@@ -7,7 +7,6 @@
       rounded
       py-2
       px-4
-      transition
       inline-flex
       items-center
       truncate
@@ -15,8 +14,8 @@
     "
     :class="[
       color
-        ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
-        : 'hover:text-secondaryDark focus:text-accent',
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
+        : 'hover:text-secondaryDark focus-visible:text-accent',
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
     ]"
diff --git a/components/tab/Secondary.vue b/components/tab/Secondary.vue
index 47b3f7a04..d4ae4071e 100644
--- a/components/tab/Secondary.vue
+++ b/components/tab/Secondary.vue
@@ -4,27 +4,27 @@
     :exact="exact"
     :blank="blank"
     class="
+      font-medium
       flex-1
       py-2
       transform
-      transition
       inline-flex
       items-center
+      truncate
       hover:translate-x-2
-      focus:(outline-none
-      translate-x-2)
+      focus:outline-none
+      focus-visible:translate-x-2
     "
     :class="[
       label ? 'px-3' : 'px-2',
       active
         ? color
-          ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
-          : 'text-accent'
-        : 'hover:text-secondaryDark focus:text-secondaryDark',
+          ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
+          : 'text-accent hover:text-accentDark focus-visible:text-accentDark'
+        : 'hover:text-secondaryDark focus-visible:text-secondaryDark',
       color
-        ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
         : '',
-      { 'translate-x-2': active },
       { 'opacity-75 cursor-not-allowed': disabled },
     ]"
     :disabled="disabled"
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 737832513..3f246413a 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -35,20 +35,13 @@
             class="divide-x divide-dividerLight flex"
           >
             <input
-              class="
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
+              class="bg-primaryLight flex flex-1 py-2 px-4"
               :placeholder="$t('team.email')"
               :name="'param' + index"
               :value="member.user.email"
               readonly
             />
-            <span class="select-wrapper">
+            <span>
               <tippy
                 :ref="`memberOptions-${index}`"
                 interactive
@@ -57,24 +50,19 @@
                 arrow
               >
                 <template #trigger>
-                  <input
-                    class="
-                      bg-primaryLight
-                      flex flex-1
-                      py-2
-                      px-4
-                      truncate
-                      focus:outline-none
-                    "
-                    :placeholder="$t('team.permissions')"
-                    :name="'value' + index"
-                    :value="
-                      typeof member.role === 'string'
-                        ? member.role
-                        : JSON.stringify(member.role)
-                    "
-                    readonly
-                  />
+                  <span class="select-wrapper">
+                    <input
+                      class="bg-primaryLight flex flex-1 py-2 px-4"
+                      :placeholder="$t('team.permissions')"
+                      :name="'value' + index"
+                      :value="
+                        typeof member.role === 'string'
+                          ? member.role
+                          : JSON.stringify(member.role)
+                      "
+                      readonly
+                    />
+                  </span>
                 </template>
                 <SmartItem
                   label="OWNER"
@@ -95,7 +83,7 @@
                 id="member"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
-                icon="delete"
+                icon="remove_circle_outline"
                 color="red"
                 @click.native="removeExistingTeamMember(member.user.uid)"
               />
@@ -108,19 +96,12 @@
           >
             <input
               v-model="member.key"
-              class="
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
+              class="bg-primaryLight flex flex-1 py-2 px-4"
               :placeholder="$t('team.email')"
               :name="'member' + index"
               autofocus
             />
-            <span class="select-wrapper">
+            <span>
               <tippy
                 :ref="`newMemberOptions-${index}`"
                 interactive
@@ -129,24 +110,19 @@
                 arrow
               >
                 <template #trigger>
-                  <input
-                    class="
-                      bg-primaryLight
-                      flex flex-1
-                      py-2
-                      px-4
-                      truncate
-                      focus:outline-none
-                    "
-                    :placeholder="$t('team.permissions')"
-                    :name="'value' + index"
-                    :value="
-                      typeof member.value === 'string'
-                        ? member.value
-                        : JSON.stringify(member.value)
-                    "
-                    readonly
-                  />
+                  <span class="select-wrapper">
+                    <input
+                      class="bg-primaryLight flex flex-1 py-2 px-4"
+                      :placeholder="$t('team.permissions')"
+                      :name="'value' + index"
+                      :value="
+                        typeof member.value === 'string'
+                          ? member.value
+                          : JSON.stringify(member.value)
+                      "
+                      readonly
+                    />
+                  </span>
                 </template>
                 <SmartItem
                   label="OWNER"
@@ -167,7 +143,7 @@
                 id="member"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
-                icon="delete"
+                icon="remove_circle_outline"
                 color="red"
                 @click.native="removeTeamMember(index)"
               />
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index 2fa0301fc..25a43caae 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -39,7 +39,7 @@
         />
         <SmartItem
           v-if="team.myRole === 'OWNER'"
-          icon="delete"
+          icon="remove_circle_outline"
           color="red"
           :label="$t('delete')"
           @click.native="
diff --git a/newstore/RESTSession.ts b/newstore/RESTSession.ts
index cb0d929f2..7884d36cf 100644
--- a/newstore/RESTSession.ts
+++ b/newstore/RESTSession.ts
@@ -33,8 +33,8 @@ const defaultRESTRequest: HoppRESTRequest = {
     authName: "None",
     authActive: true,
   },
-  preRequestScript: "// pw.env.set('variable', 'value');",
-  testScript: "// pw.expect('variable').toBe('value');",
+  preRequestScript: "",
+  testScript: "",
   body: {
     contentType: "application/json",
     body: "",
diff --git a/pages/documentation.vue b/pages/documentation.vue
index 2463c44f8..f853337b3 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -306,19 +306,13 @@ export default defineComponent({
               return this.httpUser && this.httpPassword
             },
             isRawParams() {
-              return this.rawParams && this.rawParams !== "{}"
+              return this.rawParams && this.rawParams !== ""
             },
             isPreRequestScript() {
-              return (
-                this.preRequestScript &&
-                this.preRequestScript !== `// pw.env.set('variable', 'value');`
-              )
+              return this.preRequestScript && this.preRequestScript !== ""
             },
             isTestScript() {
-              return (
-                this.testScript &&
-                this.testScript !== `// pw.expect('variable').toBe('value');`
-              )
+              return this.testScript && this.testScript !== ""
             },
           },
           {