diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 5991a9a4..6fce38aa 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -56,6 +56,7 @@ body {
   @apply select-none;
   @apply overflow-x-hidden;
 
+  animation: fade 300ms forwards;
   font-size: var(--body-font-size);
   line-height: var(--body-line-height);
   overflow: overlay;
@@ -63,6 +64,15 @@ body {
   -webkit-touch-callout: none;
 }
 
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .fade-enter-active,
 .fade-leave-active,
 .page-enter-active,
@@ -82,7 +92,9 @@ body {
 }
 
 .material-icons {
-  font-size: 133.4% !important;
+  font-size: var(--body-line-height) !important;
+  width: var(--body-line-height);
+  overflow: hidden;
 }
 
 .svg-icons {
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 1fcdaf4a..73246e91 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -1,6 +1,6 @@
 @mixin baseTheme {
-  --font-sans: "Inter", "sans-serif";
-  --font-mono: "Roboto Mono", "monospace";
+  --font-sans: "Inter", sans-serif;
+  --font-mono: "Roboto Mono", monospace;
   --font-icon: "Material Icons";
 }
 
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 3272c2d9..a820dcab 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -50,7 +50,7 @@
               />
               <SmartItem
                 :label="$t('app.whats_new')"
-                to="https://github.com/hoppscotch/hoppscotch/blob/main/CHANGELOG.md"
+                to="https://docs.hoppscotch.io/changelog"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
diff --git a/components/app/Share.vue b/components/app/Share.vue
index 50189fd7..89bd9a4b 100644
--- a/components/app/Share.vue
+++ b/components/app/Share.vue
@@ -87,7 +87,7 @@ export default {
       copyToClipboard(this.url)
       this.copyIcon = "done"
       this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
-        icon: "done",
+        icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 67fa87f0..635952d4 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -55,9 +55,9 @@
           :key="`map-${mapIndex}`"
           class="space-y-4 py-4 px-6"
         >
-          <h5 class="font-semibold text-secondaryDark">
+          <h1 class="font-semibold text-secondaryDark">
             {{ $t(map.section) }}
-          </h5>
+          </h1>
           <div
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
             :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
diff --git a/components/app/Support.vue b/components/app/Support.vue
index e6831e35..1123095c 100644
--- a/components/app/Support.vue
+++ b/components/app/Support.vue
@@ -30,7 +30,7 @@
         <SmartItem
           icon="auto_awesome"
           :label="$t('app.whats_new')"
-          to="https://github.com/hoppscotch/hoppscotch/blob/main/CHANGELOG.md"
+          to="https://docs.hoppscotch.io/changelog"
           :description="$t('support.changelog')"
           info-icon="chevron_right"
           active
diff --git a/components/button/Primary.vue b/components/button/Primary.vue
index 851b575d..42b7a203 100644
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -59,7 +59,7 @@
         ]"
       />
       {{ label }}
-      <div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">
+      <div v-if="shortcut.length" class="ml-2">
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
@@ -75,7 +75,6 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { useSetting } from "~/newstore/settings"
 
 export default defineComponent({
   props: {
@@ -144,10 +143,5 @@ export default defineComponent({
       default: () => [],
     },
   },
-  setup() {
-    return {
-      SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
-    }
-  },
 })
 </script>
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index 64419cca..b61129d0 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -51,11 +51,18 @@
       ]"
     />
     {{ label }}
-    <div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">
+    <div v-if="shortcut.length" class="ml-2">
       <kbd
         v-for="(key, index) in shortcut"
         :key="`key-${index}`"
-        class="bg-dividerLight text-secondaryLight ml-1 px-1 inline-flex"
+        class="
+          bg-dividerLight
+          rounded
+          text-secondaryLight
+          ml-1
+          px-1
+          inline-flex
+        "
       >
         {{ key }}
       </kbd>
@@ -65,7 +72,6 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { useSetting } from "~/newstore/settings"
 
 export default defineComponent({
   props: {
@@ -122,10 +128,5 @@ export default defineComponent({
       default: () => [],
     },
   },
-  setup() {
-    return {
-      SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
-    }
-  },
 })
 </script>
diff --git a/components/collections/Add.vue b/components/collections/Add.vue
index c17af851..9fe0707e 100644
--- a/components/collections/Add.vue
+++ b/components/collections/Add.vue
@@ -44,8 +44,8 @@ export default {
   methods: {
     addNewCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name"), {
-          icon: "info",
+        this.$toast.error(this.$t("collection.invalid_name"), {
+          icon: "error_outline",
         })
         return
       }
diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue
index d018349a..7288d4b0 100644
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -48,8 +48,8 @@ export default {
   methods: {
     addFolder() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name"), {
-          icon: "info",
+        this.$toast.error(this.$t("folder.invalid_name"), {
+          icon: "error_outline",
         })
         return
       }
diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue
index 75c6910d..7cd0b0b5 100644
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -45,8 +45,8 @@ export default {
   methods: {
     saveCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name"), {
-          icon: "info",
+        this.$toast.error(this.$t("collection.invalid_name"), {
+          icon: "error_outline",
         })
         return
       }
diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue
index 013f5c3b..0f32e1b3 100644
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -45,8 +45,8 @@ export default {
   methods: {
     editFolder() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name"), {
-          icon: "info",
+        this.$toast.error(this.$t("folder.invalid_name"), {
+          icon: "error_outline",
         })
         return
       }
diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue
index 149f9101..ea13e7f4 100644
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -44,8 +44,8 @@ export default {
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {
-        this.$toast.info(this.$t("collection.invalid_name"), {
-          icon: "info",
+        this.$toast.error(this.$t("request.invalid_name"), {
+          icon: "error_outline",
         })
         return
       }
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 52b4799d..2899b41f 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -43,7 +43,7 @@
               $refs.options.tippy().hide()
             "
           />
-          <SmartItem
+          <span
             v-tippy="{ theme: 'tooltip' }"
             :title="
               !currentUser
@@ -52,20 +52,23 @@
                 ? $t('export.require_github')
                 : null
             "
-            :disabled="
-              !currentUser
-                ? true
-                : currentUser.provider !== 'github.com'
-                ? true
-                : false
-            "
-            icon="assignment_turned_in"
-            :label="$t('export.create_secret_gist')"
-            @click.native="
-              createCollectionGist
-              $refs.options.tippy().hide()
-            "
-          />
+          >
+            <SmartItem
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              icon="assignment_turned_in"
+              :label="$t('export.create_secret_gist')"
+              @click.native="
+                createCollectionGist
+                $refs.options.tippy().hide()
+              "
+            />
+          </span>
         </tippy>
       </span>
     </template>
@@ -225,7 +228,7 @@ export default defineComponent({
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
@@ -405,7 +408,7 @@ export default defineComponent({
       document.body.appendChild(a)
       a.click()
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -419,7 +422,7 @@ export default defineComponent({
     },
     failedImport() {
       this.$toast.error(this.$t("import.failed"), {
-        icon: "error",
+        icon: "error_outline",
       })
     },
     parsePostmanCollection({ info, name, item }) {
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index c86dcd0a..72fb5f5e 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -119,13 +119,13 @@ export default defineComponent({
     saveRequestAs() {
       if (!this.requestName) {
         this.$toast.error(this.$t("error.empty_req_name"), {
-          icon: "error",
+          icon: "error_outline",
         })
         return
       }
       if (this.picked == null) {
         this.$toast.error(this.$t("collection.select"), {
-          icon: "error",
+          icon: "error_outline",
         })
         return
       }
@@ -218,8 +218,8 @@ export default defineComponent({
       } else if (this.picked.pickedType === "gql-my-collection") {
         saveGraphqlRequestAs(`${this.picked.collectionIndex}`, requestUpdated)
       }
-      this.$toast.success("Requested added", {
-        icon: "done",
+      this.$toast.success(this.$t("request.added"), {
+        icon: "post_add",
       })
 
       this.hideModal()
diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue
index 2a8fe99f..07801de8 100644
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -47,8 +47,8 @@ export default Vue.extend({
   methods: {
     addNewCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name").toString(), {
-          icon: "info",
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+          icon: "error_outline",
         })
         return
       }
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index a190b946..1393a70d 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex w-10 justify-center items-center truncate"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -93,7 +93,7 @@
       <CollectionsGraphqlFolder
         v-for="(folder, index) in collection.folders"
         :key="`folder-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :picked="picked"
         :saving-mode="savingMode"
         :folder="folder"
@@ -110,7 +110,7 @@
       <CollectionsGraphqlRequest
         v-for="(request, index) in collection.requests"
         :key="`request-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :picked="picked"
         :saving-mode="savingMode"
         :request="request"
@@ -131,7 +131,7 @@
           border-l border-dividerLight
           flex flex-col
           text-secondaryLight
-          ml-5
+          ml-6
           p-4
           items-center
           justify-center
@@ -187,8 +187,8 @@ export default Vue.extend({
     },
     getCollectionIcon() {
       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 if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
       else return "folder"
     },
   },
@@ -218,8 +218,7 @@ export default Vue.extend({
         this.$emit("select", { picked: null })
       }
       removeGraphqlCollection(this.collectionIndex)
-
-      this.$toast.error(this.$t("state.deleted").toString(), {
+      this.$toast.success(this.$t("state.deleted").toString(), {
         icon: "delete",
       })
     },
diff --git a/components/collections/graphql/Edit.vue b/components/collections/graphql/Edit.vue
index 82a9d4a5..c3242a34 100644
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -49,8 +49,8 @@ export default Vue.extend({
   methods: {
     saveCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name").toString(), {
-          icon: "info",
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+          icon: "error_outline",
         })
         return
       }
diff --git a/components/collections/graphql/EditFolder.vue b/components/collections/graphql/EditFolder.vue
index 60783e36..ca8df47e 100644
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -50,8 +50,8 @@ export default Vue.extend({
   methods: {
     editFolder() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name").toString(), {
-          icon: "info",
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+          icon: "error_outline",
         })
         return
       }
diff --git a/components/collections/graphql/EditRequest.vue b/components/collections/graphql/EditRequest.vue
index e29c573d..f93bb109 100644
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -49,8 +49,8 @@ export default Vue.extend({
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {
-        this.$toast.info(this.$t("collection.invalid_name").toString(), {
-          icon: "info",
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+          icon: "error_outline",
         })
         return
       }
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index e1824e0b..e0063270 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex w-10 justify-center items-center truncate"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -89,7 +89,7 @@
       <CollectionsGraphqlFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
         :key="`subFolder-${subFolderIndex}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :picked="picked"
         :saving-mode="savingMode"
         :folder="subFolder"
@@ -106,7 +106,7 @@
       <CollectionsGraphqlRequest
         v-for="(request, index) in folder.requests"
         :key="`request-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :picked="picked"
         :saving-mode="savingMode"
         :request="request"
@@ -130,7 +130,7 @@
           border-l border-dividerLight
           flex flex-col
           text-secondaryLight
-          ml-5
+          ml-6
           p-4
           items-center
           justify-center
@@ -185,8 +185,8 @@ export default Vue.extend({
     },
     getCollectionIcon() {
       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 if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
       else return "folder"
     },
   },
@@ -217,7 +217,7 @@ export default Vue.extend({
       }
 
       removeGraphqlFolder(this.folderPath)
-      this.$toast.error(this.$t("state.deleted").toString(), {
+      this.$toast.success(this.$t("state.deleted").toString(), {
         icon: "delete",
       })
     },
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index 9ba8a58a..bb554d4e 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -23,7 +23,7 @@
               $refs.options.tippy().hide()
             "
           />
-          <SmartItem
+          <span
             v-tippy="{ theme: 'tooltip' }"
             :title="
               !currentUser
@@ -32,20 +32,23 @@
                 ? $t('export.require_github')
                 : null
             "
-            :disabled="
-              !currentUser
-                ? true
-                : currentUser.provider !== 'github.com'
-                ? true
-                : false
-            "
-            icon="assignment_turned_in"
-            :label="$t('export.create_secret_gist')"
-            @click.native="
-              createCollectionGist
-              $refs.options.tippy().hide()
-            "
-          />
+          >
+            <SmartItem
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              icon="assignment_turned_in"
+              :label="$t('export.create_secret_gist')"
+              @click.native="
+                createCollectionGist
+                $refs.options.tippy().hide()
+              "
+            />
+          </span>
         </tippy>
       </span>
     </template>
@@ -143,7 +146,7 @@ export default defineComponent({
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
@@ -249,7 +252,7 @@ export default defineComponent({
       document.body.appendChild(a)
       a.click()
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -257,13 +260,13 @@ export default defineComponent({
       }, 1000)
     },
     fileImported() {
-      this.$toast.info(this.$t("state.file_imported"), {
+      this.$toast.success(this.$t("state.file_imported"), {
         icon: "folder_shared",
       })
     },
     failedImport() {
       this.$toast.error(this.$t("import.failed"), {
-        icon: "error",
+        icon: "error_outline",
       })
     },
     parsePostmanCollection({ info, name, item }) {
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index 4356536b..a736eacf 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -12,8 +12,8 @@
         class="
           cursor-pointer
           flex
-          mx-2
-          w-12
+          px-2
+          w-16
           justify-center
           items-center
           truncate
@@ -171,7 +171,7 @@ export default Vue.extend({
       }
 
       removeGraphqlRequest(this.folderPath, this.requestIndex)
-      this.$toast.error(this.$t("state.deleted").toString(), {
+      this.$toast.success(this.$t("state.deleted").toString(), {
         icon: "delete",
       })
     },
diff --git a/components/collections/index.vue b/components/collections/index.vue
index f0100443..39fe8308 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -351,7 +351,7 @@ export default defineComponent({
           })
           .catch((e) => {
             this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error",
+              icon: "error_outline",
             })
             console.error(e)
           })
@@ -361,8 +361,8 @@ export default defineComponent({
     // Intented to be called by CollectionEdit modal submit event
     updateEditingCollection(newName) {
       if (!newName) {
-        this.$toast.info(this.$t("collection.invalid_name"), {
-          icon: "info",
+        this.$toast.error(this.$t("collection.invalid_name"), {
+          icon: "error_outline",
         })
         return
       }
@@ -380,14 +380,13 @@ export default defineComponent({
         teamUtils
           .renameCollection(this.$apollo, newName, this.editingCollection.id)
           .then(() => {
-            // TODO: $t translations ?
-            this.$toast.success("Collection Renamed", {
+            this.$toast.success(this.$t("collection.renamed"), {
               icon: "done",
             })
           })
           .catch((e) => {
             this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error",
+              icon: "error_outline",
             })
             console.error(e)
           })
@@ -411,7 +410,7 @@ export default defineComponent({
           })
           .catch((e) => {
             this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error",
+              icon: "error_outline",
             })
             console.error(e)
           })
@@ -445,14 +444,14 @@ export default defineComponent({
             this.editingRequestIndex
           )
           .then(() => {
-            this.$toast.success("Request Renamed", {
+            this.$toast.success(this.$t("request.renamed"), {
               icon: "done",
             })
             this.$emit("update-team-collections")
           })
           .catch((e) => {
             this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error",
+              icon: "error_outline",
             })
             console.error(e)
           })
@@ -525,7 +524,7 @@ export default defineComponent({
             })
             .catch((e) => {
               this.$toast.error(this.$t("error.something_went_wrong"), {
-                icon: "error",
+                icon: "error_outline",
               })
               console.error(e)
             })
@@ -590,8 +589,7 @@ export default defineComponent({
         }
 
         removeRESTCollection(collectionIndex)
-
-        this.$toast.error(this.$t("state.deleted"), {
+        this.$toast.success(this.$t("state.deleted"), {
           icon: "delete",
         })
       } else if (collectionsType.type === "team-collections") {
@@ -619,13 +617,13 @@ export default defineComponent({
               },
             })
             .then(() => {
-              this.$toast.error(this.$t("state.deleted"), {
+              this.$toast.success(this.$t("state.deleted"), {
                 icon: "delete",
               })
             })
             .catch((e) => {
               this.$toast.error(this.$t("error.something_went_wrong"), {
-                icon: "error",
+                icon: "error_outline",
               })
               console.error(e)
             })
@@ -644,8 +642,7 @@ export default defineComponent({
           this.$emit("select", { picked: null })
         }
         removeRESTRequest(folderPath, requestIndex)
-
-        this.$toast.error(this.$t("state.deleted"), {
+        this.$toast.success(this.$t("state.deleted"), {
           icon: "delete",
         })
       } else if (this.collectionsType.type === "team-collections") {
@@ -661,13 +658,13 @@ export default defineComponent({
         teamUtils
           .deleteRequest(this.$apollo, requestIndex)
           .then(() => {
-            this.$toast.error(this.$t("state.deleted"), {
+            this.$toast.success(this.$t("state.deleted"), {
               icon: "delete",
             })
           })
           .catch((e) => {
             this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error",
+              icon: "error_outline",
             })
             console.error(e)
           })
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index be63d4cf..b8af7928 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex w-10 justify-center items-center truncate"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -112,7 +112,7 @@
       <CollectionsMyFolder
         v-for="(folder, index) in collection.folders"
         :key="`folder-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :folder="folder"
         :folder-index="index"
         :folder-path="`${collectionIndex}/${index}`"
@@ -131,7 +131,7 @@
       <CollectionsMyRequest
         v-for="(request, index) in collection.requests"
         :key="`request-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :request="request"
         :collection-index="collectionIndex"
         :folder-index="-1"
@@ -156,7 +156,7 @@
           border-l border-dividerLight
           flex flex-col
           text-secondaryLight
-          ml-5
+          ml-6
           p-4
           items-center
           justify-center
@@ -212,8 +212,8 @@ export default {
     },
     getCollectionIcon() {
       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 if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
       else return "folder"
     },
   },
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 5b8278be..2548f75c 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex w-10 justify-center items-center truncate"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -94,7 +94,7 @@
       <CollectionsMyFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
         :key="`subFolder-${subFolderIndex}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :folder="subFolder"
         :folder-index="subFolderIndex"
         :collection-index="collectionIndex"
@@ -113,7 +113,7 @@
       <CollectionsMyRequest
         v-for="(request, index) in folder.requests"
         :key="`request-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :request="request"
         :collection-index="collectionIndex"
         :folder-index="folderIndex"
@@ -139,7 +139,7 @@
           border-l border-dividerLight
           flex flex-col
           text-secondaryLight
-          ml-5
+          ml-6
           p-4
           items-center
           justify-center
@@ -199,8 +199,8 @@ export default {
     },
     getCollectionIcon() {
       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 if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
       else return "folder"
     },
   },
@@ -228,8 +228,7 @@ export default {
         this.$emit("select", { picked: null })
       }
       removeRESTFolder(this.folderPath)
-
-      this.$toast.error(this.$t("state.deleted"), {
+      this.$toast.success(this.$t("state.deleted"), {
         icon: "delete",
       })
     },
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index b543d0c3..d6c7c9b4 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -12,8 +12,8 @@
         class="
           cursor-pointer
           flex
-          mx-2
-          w-12
+          px-2
+          w-16
           justify-center
           items-center
           truncate
@@ -28,7 +28,7 @@
         >
           check_circle_outline
         </i>
-        <span v-else>
+        <span v-else class="truncate">
           {{ request.method }}
         </span>
       </span>
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 567969a4..5a0655a4 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <div class="flex items-center group">
       <span
-        class="cursor-pointer flex w-10 justify-center items-center truncate"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -108,7 +108,7 @@
       <CollectionsTeamsFolder
         v-for="(folder, index) in collection.children"
         :key="`folder-${folder}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :folder="folder"
         :folder-index="index"
         :folder-path="`${collectionIndex}/${index}`"
@@ -128,7 +128,7 @@
       <CollectionsTeamsRequest
         v-for="(request, index) in collection.requests"
         :key="`request-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :request="request.request"
         :collection-index="collectionIndex"
         :folder-index="-1"
@@ -152,7 +152,7 @@
           border-l border-dividerLight
           flex flex-col
           text-secondaryLight
-          ml-5
+          ml-6
           p-4
           items-center
           justify-center
@@ -205,8 +205,8 @@ export default {
     },
     getCollectionIcon() {
       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 if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
       else return "folder"
     },
   },
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 519a64e4..bb926c67 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <div class="flex items-center group">
       <span
-        class="cursor-pointer flex w-10 justify-center items-center truncate"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -91,7 +91,7 @@
       <CollectionsTeamsFolder
         v-for="(subFolder, subFolderIndex) in folder.children"
         :key="`subFolder-${subFolderIndex}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :folder="subFolder"
         :folder-index="subFolderIndex"
         :collection-index="collectionIndex"
@@ -111,7 +111,7 @@
       <CollectionsTeamsRequest
         v-for="(request, index) in folder.requests"
         :key="`request-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :request="request.request"
         :collection-index="collectionIndex"
         :folder-index="folderIndex"
@@ -134,7 +134,7 @@
           border-l border-dividerLight
           flex flex-col
           text-secondaryLight
-          ml-5
+          ml-6
           p-4
           items-center
           justify-center
@@ -189,8 +189,8 @@ export default {
     },
     getCollectionIcon() {
       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 if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
       else return "folder"
     },
   },
@@ -221,14 +221,14 @@ export default {
         teamUtils
           .deleteCollection(this.$apollo, this.folder.id)
           .then(() => {
-            this.$toast.error(this.$t("state.deleted"), {
+            this.$toast.success(this.$t("state.deleted"), {
               icon: "delete",
             })
             this.$emit("update-team-collections")
           })
           .catch((e) => {
             this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error",
+              icon: "error_outline",
             })
             console.error(e)
           })
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index f4180c23..b132a60d 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -5,8 +5,8 @@
         class="
           cursor-pointer
           flex
-          mx-2
-          w-12
+          px-2
+          w-16
           justify-center
           items-center
           truncate
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index a4c77ae9..ba21f1af 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -47,8 +47,8 @@ export default Vue.extend({
   methods: {
     addNewEnvironment() {
       if (!this.name) {
-        this.$toast.info(this.$t("environment.invalid_name").toString(), {
-          icon: "info",
+        this.$toast.error(this.$t("environment.invalid_name").toString(), {
+          icon: "error_outline",
         })
         return
       }
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 42bbb0f1..8cc11c09 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -159,7 +159,7 @@ export default defineComponent({
     clearContent() {
       this.vars = []
       this.clearIcon = "done"
-      this.$toast.info(this.$t("state.cleared").toString(), {
+      this.$toast.success(this.$t("state.cleared").toString(), {
         icon: "clear_all",
       })
       setTimeout(() => (this.clearIcon = "clear_all"), 1000)
@@ -175,8 +175,8 @@ export default defineComponent({
     },
     saveEnvironment() {
       if (!this.name) {
-        this.$toast.info(this.$t("environment.invalid_name").toString(), {
-          icon: "info",
+        this.$toast.error(this.$t("environment.invalid_name").toString(), {
+          icon: "error_outline",
         })
         return
       }
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index 668bc75e..b355b028 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center group">
     <span
-      class="cursor-pointer flex w-10 justify-center items-center truncate"
+      class="cursor-pointer flex px-4 justify-center items-center"
       @click="$emit('edit-environment')"
     >
       <i class="material-icons">layers</i>
@@ -82,7 +82,7 @@ export default Vue.extend({
     removeEnvironment() {
       if (this.environmentIndex !== "Global")
         deleteEnvironment(this.environmentIndex)
-      this.$toast.error(this.$t("state.deleted").toString(), {
+      this.$toast.success(this.$t("state.deleted").toString(), {
         icon: "delete",
       })
     },
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 92724482..6a09a073 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -23,7 +23,7 @@
               $refs.options.tippy().hide()
             "
           />
-          <SmartItem
+          <span
             v-tippy="{ theme: 'tooltip' }"
             :title="
               !currentUser
@@ -32,20 +32,23 @@
                 ? $t('export.require_github')
                 : null
             "
-            :disabled="
-              !currentUser
-                ? true
-                : currentUser.provider !== 'github.com'
-                ? true
-                : false
-            "
-            icon="assignment_turned_in"
-            :label="$t('export.create_secret_gist')"
-            @click.native="
-              createEnvironmentGist
-              $refs.options.tippy().hide()
-            "
-          />
+          >
+            <SmartItem
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              icon="assignment_turned_in"
+              :label="$t('export.create_secret_gist')"
+              @click.native="
+                createEnvironmentGist
+                $refs.options.tippy().hide()
+              "
+            />
+          </span>
         </tippy>
       </span>
     </template>
@@ -143,7 +146,7 @@ export default defineComponent({
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
@@ -227,7 +230,7 @@ export default defineComponent({
       document.body.appendChild(a)
       a.click()
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -235,7 +238,7 @@ export default defineComponent({
       }, 1000)
     },
     fileImported() {
-      this.$toast.info(this.$t("state.file_imported"), {
+      this.$toast.success(this.$t("state.file_imported"), {
         icon: "folder_shared",
       })
     },
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 7c3da52c..0ea3c3d9 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -163,7 +163,7 @@ export default {
   },
   methods: {
     showLoginSuccess() {
-      this.$toast.info(this.$t("auth.login_success"), {
+      this.$toast.success(this.$t("auth.login_success"), {
         icon: "vpn_key",
       })
     },
@@ -222,7 +222,6 @@ export default {
 
             return
           }
-
           this.$toast.info(`${this.$t("auth.account_exists")}`, {
             icon: "vpn_key",
             duration: null,
@@ -241,7 +240,7 @@ export default {
           })
         } else {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
         }
       }
@@ -305,7 +304,6 @@ export default {
 
             return
           }
-
           this.$toast.info(`${this.$t("auth.account_exists")}`, {
             icon: "vpn_key",
             duration: null,
@@ -324,7 +322,7 @@ export default {
           })
         } else {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
         }
       }
@@ -346,7 +344,7 @@ export default {
         .catch((e) => {
           console.error(e)
           this.$toast.error(e.message, {
-            icon: "error",
+            icon: "error_outline",
           })
           this.signingInWithEmail = false
         })
diff --git a/components/firebase/Logout.vue b/components/firebase/Logout.vue
index 1b79c059..641ac568 100644
--- a/components/firebase/Logout.vue
+++ b/components/firebase/Logout.vue
@@ -31,14 +31,13 @@ export default Vue.extend({
     async logout() {
       try {
         await signOutUser()
-
-        this.$toast.info(this.$t("auth.logged_out").toString(), {
+        this.$toast.success(this.$t("auth.logged_out").toString(), {
           icon: "vpn_key",
         })
       } catch (e) {
         console.error(e)
         this.$toast.error(this.$t("error.something_went_wrong").toString(), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
     },
diff --git a/components/graphql/QueryEditor.vue b/components/graphql/QueryEditor.vue
index 4ae82185..438b5ae2 100644
--- a/components/graphql/QueryEditor.vue
+++ b/components/graphql/QueryEditor.vue
@@ -182,7 +182,7 @@ export default {
         this.$emit("update-query", gql.print(gql.parse(this.editor.getValue())))
       } catch (e) {
         this.$toast.error(this.$t("error.gql_prettify_invalid_query"), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
     },
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index ce0a0bf3..de8c340e 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -23,7 +23,6 @@
             <div class="flex">
               <ButtonSecondary
                 :label="$t('request.run')"
-                :shortcut="[getSpecialKey(), 'Enter']"
                 icon="play_arrow"
                 class="rounded-none !text-accent"
                 @click.native="runQuery()"
@@ -401,7 +400,7 @@ export default defineComponent({
         nuxt.value.$loading.finish()
 
         $toast.error(`${e} ${t("error.f12_details").toString()}`, {
-          icon: "error",
+          icon: "error_outline",
         })
         console.error(e)
       }
diff --git a/components/graphql/Response.vue b/components/graphql/Response.vue
index d8151be5..fed17569 100644
--- a/components/graphql/Response.vue
+++ b/components/graphql/Response.vue
@@ -152,7 +152,7 @@ export default defineComponent({
       a.click()
       downloadResponseIcon.value = "done"
       $toast.success(t("state.download_started").toString(), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index 96092585..318bb892 100644
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -416,7 +416,7 @@ export default defineComponent({
       a.click()
       downloadSchemaIcon.value = "done"
       $toast.success(t("state.download_started").toString(), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
diff --git a/components/history/index.vue b/components/history/index.vue
index 7398903c..8d137a45 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -136,8 +136,7 @@ export default defineComponent({
     clearHistory() {
       if (this.page === "rest") clearRESTHistory()
       else clearGraphqlHistory()
-
-      this.$toast.error(this.$t("state.history_deleted").toString(), {
+      this.$toast.success(this.$t("state.history_deleted").toString(), {
         icon: "delete",
       })
     },
@@ -147,8 +146,7 @@ export default defineComponent({
     deleteHistory(entry: any) {
       if (this.page === "rest") deleteRESTHistoryEntry(entry)
       else deleteGraphqlHistoryEntry(entry)
-
-      this.$toast.error(this.$t("state.deleted").toString(), {
+      this.$toast.success(this.$t("state.deleted").toString(), {
         icon: "delete",
       })
     },
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index 1147bf8a..59de4429 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center group">
     <span
-      class="cursor-pointer flex mx-2 w-12 justify-center items-center truncate"
+      class="cursor-pointer flex px-2 w-16 justify-center items-center truncate"
       :class="entryStatus.className"
       data-testid="restore_history_entry"
       :title="duration"
@@ -32,7 +32,7 @@
       icon="remove_circle_outline"
       color="red"
       :title="$t('action.remove')"
-      class="group-hover:inline-flex hidden"
+      class="hidden group-hover:inline-flex"
       data-testid="delete_history_entry"
       @click.native="$emit('delete-entry')"
     />
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 1d49afea..72a5a01d 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -140,7 +140,7 @@ export default defineComponent({
       copyToClipboard(this.requestCode)
       this.copyIcon = "done"
       this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
-        icon: "done",
+        icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index 1f7ed50f..caf15e6b 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -128,7 +128,7 @@ export default defineComponent({
       } catch (e) {
         console.error(e)
         this.$toast.error(this.$t("error.curl_invalid_format").toString(), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
       this.hideModal()
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 3536c513..c35d1657 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -108,7 +108,7 @@ export default defineComponent({
           this.rawParamsBody = target.result
         }
         reader.readAsText(file)
-        this.$toast.info(this.$t("state.file_imported"), {
+        this.$toast.success(this.$t("state.file_imported"), {
           icon: "attach_file",
         })
       } else {
@@ -127,7 +127,7 @@ export default defineComponent({
       } catch (e) {
         console.error(e)
         this.$toast.error(`${this.$t("error.json_prettify_invalid_body")}`, {
-          icon: "error",
+          icon: "error_outline",
         })
       }
     },
diff --git a/components/http/Request.vue b/components/http/Request.vue
index be47f192..dbddf9b9 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -1,45 +1,48 @@
 <template>
-  <div class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky">
+  <div class="bg-primary flex p-4 top-0 z-10 sticky">
     <div class="flex flex-1">
       <div class="flex relative">
-        <tippy
-          ref="methodOptions"
-          interactive
-          trigger="click"
-          theme="popover"
-          arrow
-        >
-          <template #trigger>
-            <span class="select-wrapper">
-              <input
-                id="method"
-                class="
-                  bg-primaryLight
-                  border border-divider
-                  rounded-l
-                  cursor-pointer
-                  flex
-                  font-semibold
-                  text-secondaryDark
-                  py-2
-                  px-4
-                  w-28
-                  hover:border-dividerDark
-                  focus-visible:border-accent
-                "
-                :value="newMethod"
-                :readonly="!isCustomMethod"
-                @input="onSelectMethod($event.target.value)"
-              />
-            </span>
-          </template>
-          <SmartItem
-            v-for="(method, index) in methods"
-            :key="`method-${index}`"
-            :label="method"
-            @click.native="onSelectMethod(method)"
-          />
-        </tippy>
+        <label for="method">
+          <tippy
+            ref="methodOptions"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <span class="select-wrapper">
+                <input
+                  id="method"
+                  class="
+                    bg-primaryLight
+                    border border-divider
+                    rounded-l
+                    cursor-pointer
+                    flex
+                    font-semibold
+                    text-secondaryDark
+                    py-2
+                    px-4
+                    w-28
+                    hover:border-dividerDark
+                    focus-visible:border-accent
+                  "
+                  :value="newMethod"
+                  :readonly="!isCustomMethod"
+                  :placeholder="$t('request.method')"
+                  @input="onSelectMethod($event.target.value)"
+                />
+              </span>
+            </template>
+            <SmartItem
+              v-for="(method, index) in methods"
+              :key="`method-${index}`"
+              :label="method"
+              @click.native="onSelectMethod(method)"
+            />
+          </tippy>
+        </label>
       </div>
       <div class="flex flex-1">
         <SmartEnvInput
@@ -50,7 +53,6 @@
           bg-primaryLight
           border border-divider
           flex
-          rounded-r
           flex-1
           text-secondaryDark
           py-1
@@ -68,7 +70,6 @@
           class="
             bg-primaryLight
             border border-divider
-            rounded-r
             flex
             text-secondaryDark
             w-full
@@ -88,9 +89,8 @@
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-r-none flex-1 min-w-20"
+        class="rounded-none flex-1 min-w-24"
         :label="!loading ? $t('action.send') : $t('action.cancel')"
-        :shortcut="[getSpecialKey(), 'G']"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
       <span class="flex">
@@ -136,10 +136,10 @@
         </tippy>
       </span>
       <ButtonSecondary
-        class="rounded-r-none flex-1 ml-2"
+        class="rounded-r-none ml-2"
         :label="$t('request.save')"
-        :shortcut="[getSpecialKey(), 'S']"
         outline
+        icon="save"
         @click.native="saveRequest()"
       />
       <span class="flex">
@@ -223,7 +223,6 @@ import {
   getRESTRequest,
 } from "~/newstore/RESTSession"
 import { editRESTRequest } from "~/newstore/collections"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
 import {
   useStreamSubscriber,
@@ -339,8 +338,8 @@ export default defineComponent({
           .catch(() => {})
       } else {
         copyToClipboard(window.location.href)
-        $toast.info(t("state.copied_to_clipboard").toString(), {
-          icon: "done",
+        $toast.success(t("state.copied_to_clipboard").toString(), {
+          icon: "content_paste",
         })
       }
     }
@@ -401,7 +400,7 @@ export default defineComponent({
         }
       }
       $toast.success(t("request.saved").toString(), {
-        icon: "done",
+        icon: "playlist_add_check",
       })
     }
 
@@ -431,7 +430,6 @@ export default defineComponent({
       loading,
       newSendRequest,
       requestName: useRESTRequestName(),
-      getSpecialKey: getPlatformSpecialKey,
       showCurlImportModal,
       showCodegenModal,
       showSaveRequestModal,
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index edbf2eeb..f30f151d 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -97,7 +97,7 @@ export default {
       a.click()
       this.downloadIcon = "done"
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -109,7 +109,7 @@ export default {
       copyToClipboard(this.responseBodyText)
       this.copyIcon = "done"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "done",
+        icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index f2ac8000..ab6f759d 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -102,7 +102,7 @@ export default {
       a.click()
       this.downloadIcon = "done"
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 11014cb1..5aca7dc5 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -101,7 +101,7 @@ export default {
       a.click()
       this.downloadIcon = "done"
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -113,7 +113,7 @@ export default {
       copyToClipboard(this.responseBodyText)
       this.copyIcon = "done"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "done",
+        icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 334ef9b5..20bde60c 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -93,7 +93,7 @@ export default {
       a.click()
       this.downloadIcon = "done"
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -105,7 +105,7 @@ export default {
       copyToClipboard(this.responseBodyText)
       this.copyIcon = "done"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "done",
+        icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 980b0196..7f8ebb39 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -92,7 +92,7 @@ export default {
       a.click()
       this.downloadIcon = "done"
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -104,7 +104,7 @@ export default {
       copyToClipboard(this.responseBodyText)
       this.copyIcon = "done"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "done",
+        icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 966d8381..3b510036 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -280,7 +280,7 @@ export default defineComponent({
         })
       } else {
         this.$toast.error(this.$t("error.something_went_wrong"), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
       this.manualDisconnect = false
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 9bc527ad..3ba532a0 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -282,7 +282,7 @@ export default defineComponent({
       } catch (e) {
         this.handleError(e)
         this.$toast.error(this.$t("error.something_went_wrong"), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
 
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index dd1b62e3..5348e7cd 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -187,7 +187,7 @@ export default {
         } catch (e) {
           this.handleSSEError(e)
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
         }
       } else {
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index b01fb14f..a15aa8f8 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -322,7 +322,7 @@ export default defineComponent({
       } catch (e) {
         this.handleError(e)
         this.$toast.error(this.$t("error.something_went_wrong"), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
 
@@ -406,7 +406,7 @@ export default defineComponent({
     deleteProtocol({ index }) {
       const oldProtocols = this.protocols.slice()
       this.$delete(this.protocols, index)
-      this.$toast.error(this.$t("state.deleted"), {
+      this.$toast.success(this.$t("state.deleted"), {
         icon: "delete",
         action: {
           text: this.$t("action.undo"),
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index da21b5c7..c394fb28 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -47,14 +47,14 @@ export default {
       // We clear it early to give the UI a snappy feel
       this.name = ""
       if (!name) {
-        this.$toast.info(this.$t("empty.team_name"), {
-          icon: "info",
+        this.$toast.error(this.$t("empty.team_name"), {
+          icon: "error_outline",
         })
         return
       }
       if (name !== null && name.replace(/\s/g, "").length < 6) {
         this.$toast.error(this.$t("team.name_length_insufficient"), {
-          icon: "error",
+          icon: "error_outline",
         })
         return
       }
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 5a2c4cf0..18a041a3 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -251,7 +251,7 @@ export default defineComponent({
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
@@ -275,7 +275,7 @@ export default defineComponent({
         this.$data.rename.replace(/\s/g, "").length < 6
       ) {
         this.$toast.error(this.$t("team.name_length_insufficient"), {
-          icon: "error",
+          icon: "error_outline",
         })
         return
       }
@@ -283,7 +283,7 @@ export default defineComponent({
       this.$data.newMembers.forEach((element) => {
         if (!this.validateEmail(element.key)) {
           this.$toast.error(this.$t("team.invalid_email_format"), {
-            icon: "error",
+            icon: "error_outline",
           })
           invalidEmail = true
         }
@@ -293,7 +293,7 @@ export default defineComponent({
       this.$data.newMembers.forEach((element) => {
         if (!element.value) {
           this.$toast.error(this.$t("invalid_member_permission"), {
-            icon: "error",
+            icon: "error_outline",
           })
           invalidPermission = true
         }
@@ -315,7 +315,7 @@ export default defineComponent({
           })
           .catch((e) => {
             this.$toast.error(e, {
-              icon: "done",
+              icon: "error_outline",
             })
             console.error(e)
           })
@@ -335,7 +335,7 @@ export default defineComponent({
           })
           .catch((e) => {
             this.$toast.error(e, {
-              icon: "done",
+              icon: "error_outline",
             })
             console.error(e)
           })
@@ -345,7 +345,7 @@ export default defineComponent({
           this.name === this.$data.rename ? this.name : this.$data.rename
         if (!/\S/.test(newName))
           return this.$toast.error(this.$t("empty.team_name"), {
-            icon: "error",
+            icon: "error_outline",
           })
         // Call to the graphql mutation
         if (this.name !== this.rename)
@@ -358,7 +358,7 @@ export default defineComponent({
             })
             .catch((e) => {
               this.$toast.error(this.$t("error.something_went_wrong"), {
-                icon: "error",
+                icon: "error_outline",
               })
               console.error(e)
             })
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index f8c890bb..062898c4 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -88,7 +88,7 @@ export default {
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
@@ -104,7 +104,7 @@ export default {
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
diff --git a/layouts/default.vue b/layouts/default.vue
index 8611377b..cc3f75b1 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -155,7 +155,7 @@ export default defineComponent({
       workbox.addEventListener("installed", (event: any) => {
         if (event.isUpdate) {
           this.$toast.show(this.$t("app.new_version_found").toString(), {
-            icon: "info",
+            icon: "download_for_offline",
             duration: 0,
             action: [
               {
diff --git a/locales/en.json b/locales/en.json
index ba536a27..bdd2d415 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -46,7 +46,7 @@
     "reload": "Reload",
     "home": "Home",
     "invite": "Invite",
-    "invite_description": "In Hoppscotch, we designed a simple and intuitive interface for creating and managing your APIs. Hoppscotch is a tool that helps you build, test, document and share your APIs.",
+    "invite_description": "Hoppscotch is an open source API development ecosystem. We designed a simple and intuitive interface for creating and managing your APIs. Hoppscotch is a tool that helps you build, test, document and share your APIs.",
     "invite_your_friends": "Invite your friends",
     "join_discord_community": "Join our Discord community",
     "keyboard_shortcuts": "Keyboard shortcuts",
@@ -94,11 +94,12 @@
   "collection": {
     "created": "Collection created",
     "edit": "Edit Collection",
-    "invalid_name": "Please provide a valid name for the collection",
+    "invalid_name": "Please provide a name for the collection",
     "my_collections": "My Collections",
     "name": "My New Collection",
     "new": "New Collection",
     "save_as": "Save as",
+    "renamed": "Collection renamed",
     "select": "Select a Collection",
     "select_location": "Select location",
     "select_team": "Select a team",
@@ -147,7 +148,7 @@
   "environment": {
     "create_new": "Create new environment",
     "edit": "Edit Environment",
-    "invalid_name": "Please provide a valid name for the environment",
+    "invalid_name": "Please provide a name for the environment",
     "new": "New Environment",
     "no_environment": "No environment",
     "select": "Select environment",
@@ -175,6 +176,7 @@
   "folder": {
     "created": "Folder created",
     "edit": "Edit Folder",
+    "invalid_name": "Please provide a name for the folder",
     "new": "New Folder",
     "renamed": "Folder renamed"
   },
@@ -255,9 +257,12 @@
     "body": "Request Body",
     "choose_language": "Choose language",
     "content_type": "Content Type",
+    "invalid_name": "Please provide a name for the request",
     "copy_link": "Copy link",
     "duration": "Duration",
+    "added": "Request added",
     "enter_curl": "Enter cURL",
+    "renamed": "Request renamed",
     "generate_code": "Generate code",
     "generated_code": "Generated code",
     "header_list": "Header List",
@@ -325,7 +330,6 @@
     "proxy_use_toggle": "Use the proxy middleware to send requests",
     "read_the": "Read the",
     "reset_default": "Reset to default",
-    "shortcuts_indicator": "Shortcuts indicator",
     "sync": "Synchronise",
     "sync_collections": "Collections",
     "sync_description": "These settings are synced to cloud.",
diff --git a/newstore/settings.ts b/newstore/settings.ts
index f507ab1a..b3c32168 100644
--- a/newstore/settings.ts
+++ b/newstore/settings.ts
@@ -47,7 +47,6 @@ export type SettingsType = {
   THEME_COLOR: HoppAccentColor
   BG_COLOR: HoppBgColor
   TELEMETRY_ENABLED: boolean
-  SHORTCUT_INDICATOR: boolean
   LEFT_SIDEBAR: boolean
   RIGHT_SIDEBAR: boolean
   ZEN_MODE: boolean
@@ -73,7 +72,6 @@ export const defaultSettings: SettingsType = {
   THEME_COLOR: "blue",
   BG_COLOR: "system",
   TELEMETRY_ENABLED: true,
-  SHORTCUT_INDICATOR: false,
   LEFT_SIDEBAR: true,
   RIGHT_SIDEBAR: true,
   ZEN_MODE: false,
diff --git a/pages/documentation.vue b/pages/documentation.vue
index 1687bae7..dd3e7b5e 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -119,7 +119,7 @@
                   sticky
                 "
               >
-                <div
+                <span
                   v-tippy="{ theme: 'tooltip' }"
                   :title="
                     !currentUser
@@ -140,7 +140,7 @@
                     :label="$t('export.create_secret_gist')"
                     @click.native="createDocsGist"
                   />
-                </div>
+                </span>
               </div>
               <div
                 v-for="(collection, index) in items"
@@ -236,7 +236,7 @@ export default defineComponent({
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
@@ -250,7 +250,7 @@ export default defineComponent({
           this.collectionJSON = target.result
         }
         reader.readAsText(file)
-        this.$toast.info(this.$t("state.file_imported"), {
+        this.$toast.success(this.$t("state.file_imported"), {
           icon: "attach_file",
         })
       } else {
@@ -287,7 +287,7 @@ export default defineComponent({
         this.items = JSON.parse(this.collectionJSON)
         this.assignIDs(this.items, "", "#")
         this.$toast.clear()
-        this.$toast.info(this.$t("state.docs_generated"), {
+        this.$toast.success(this.$t("state.docs_generated"), {
           icon: "book",
         })
         const docsMarkdown = Mustache.render(
@@ -325,7 +325,7 @@ export default defineComponent({
       } catch (e) {
         console.error(e)
         this.$toast.error(this.$t("error.something_went_wrong"), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
     },
diff --git a/pages/settings.vue b/pages/settings.vue
index 8d1965d9..4db96f8b 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -185,19 +185,6 @@
                   }}
                 </SmartToggle>
               </div>
-              <div class="flex items-center">
-                <SmartToggle
-                  :on="SHORTCUT_INDICATOR"
-                  @change="toggleSetting('SHORTCUT_INDICATOR')"
-                >
-                  {{ $t("settings.shortcuts_indicator") }}
-                  {{
-                    SHORTCUT_INDICATOR
-                      ? $t("state.enabled")
-                      : $t("state.disabled")
-                  }}
-                </SmartToggle>
-              </div>
               <div class="flex items-center">
                 <SmartToggle
                   :on="LEFT_SIDEBAR"
@@ -385,7 +372,6 @@ export default defineComponent({
       SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
       SYNC_HISTORY: useSetting("syncHistory"),
       TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
-      SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
       LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
       ZEN_MODE: useSetting("ZEN_MODE"),
       currentUser: useReadonlyStream(currentUser$, currentUser$.value),
@@ -464,7 +450,7 @@ export default defineComponent({
     resetProxy() {
       applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
       this.clearIcon = "done"
-      this.$toast.info(this.$t("state.cleared").toString(), {
+      this.$toast.success(this.$t("state.cleared").toString(), {
         icon: "clear_all",
       })
       setTimeout(() => (this.clearIcon = "clear_all"), 1000)