diff --git a/components/app/Header.vue b/components/app/Header.vue
index 489c4be3..8834b73e 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="space-x-2 flex-shrink-0 inline-flex items-center">
       <AppGitHubStarButton class="flex mx-2 mt-1" />
-      <TabPrimary
+      <ButtonSecondary
         id="installPWA"
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('header.install_pwa')"
@@ -33,7 +33,7 @@
               indicator
               :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
             />
-            <TabPrimary
+            <ButtonSecondary
               v-else
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('account')"
diff --git a/components/collections/Add.vue b/components/collections/Add.vue
index eeab5dcb..273df913 100644
--- a/components/collections/Add.vue
+++ b/components/collections/Add.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue
index 7c76ac6c..4278983c 100644
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <template #header>
-      <h3 class="heading">{{ $t("folder.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.new')"
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue
index c3c06635..5e94f1df 100644
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue
index ce9c37ce..39fcd8d4 100644
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <template #header>
-      <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.edit')"
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue
index fca64ba8..fe2e0f38 100644
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('edit_request')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 357113c2..d95c1d63 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -1,18 +1,21 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
-      <div class="flex">
-        <ButtonSecondary
-          v-if="mode == 'import_from_my_collections'"
-          v-tippy="{ theme: 'tooltip' }"
-          title="Back"
-          icon="arrow_back"
-          @click.native="
-            mode = 'import_export'
-            mySelectedCollectionID = undefined
-          "
-        />
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('collections')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <ButtonSecondary
+        v-if="mode == 'import_from_my_collections'"
+        v-tippy="{ theme: 'tooltip' }"
+        title="Back"
+        icon="arrow_back"
+        @click.native="
+          mode = 'import_export'
+          mySelectedCollectionID = undefined
+        "
+      />
+      <span>
         <tippy
           v-if="
             mode == 'import_export' && collectionsType.type == 'my-collections'
@@ -24,7 +27,7 @@
           arrow
         >
           <template #trigger>
-            <TabPrimary
+            <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
@@ -62,8 +65,7 @@
             "
           />
         </tippy>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      </span>
     </template>
     <template #body>
       <div v-if="mode == 'import_export'" class="flex flex-col space-y-2">
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index 09d4c9bc..aae98490 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.save_as") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.save_as')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div class="flex relative">
diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue
index 2b8edaca..0ce9ea1e 100644
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/graphql/AddFolder.vue b/components/collections/graphql/AddFolder.vue
index 8794c66f..816d4285 100644
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <template #header>
-      <h3 class="heading">{{ $t("folder.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.new')"
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/graphql/Edit.vue b/components/collections/graphql/Edit.vue
index efa5ba0d..47c51110 100644
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/graphql/EditFolder.vue b/components/collections/graphql/EditFolder.vue
index 1d48a732..9a75a76d 100644
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <template #header>
-      <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.edit')"
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -44,6 +44,10 @@ export default Vue.extend({
   },
   methods: {
     editFolder() {
+      if (!this.name) {
+        this.$toast.info(this.$t("collection.invalid_name").toString())
+        return
+      }
       editGraphqlFolder(this.folderPath, { ...this.folder, name: this.name })
       this.hideModal()
     },
diff --git a/components/collections/graphql/EditRequest.vue b/components/collections/graphql/EditRequest.vue
index 90ceb18f..2b817e1f 100644
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('edit_request')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -48,6 +44,10 @@ export default Vue.extend({
   },
   methods: {
     saveRequest() {
+      if (!this.requestUpdateData.name) {
+        this.$toast.info(this.$t("collection.invalid_name").toString())
+        return
+      }
       const requestUpdated = {
         ...this.$props.request,
         name: this.$data.requestUpdateData.name || this.$props.request.name,
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index f6743ec8..2370444f 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -1,11 +1,14 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
-      <div class="flex">
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('collections')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <span>
         <tippy ref="options" interactive trigger="click" theme="popover" arrow>
           <template #trigger>
-            <TabPrimary
+            <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
@@ -43,8 +46,7 @@
             "
           />
         </tippy>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      </span>
     </template>
     <template #body>
       <div class="flex flex-col space-y-2">
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index 7f0bd7bd..c46b5bbf 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("new_environment") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('new_environment')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 903809a5..13e7c6cd 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("edit_environment") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('edit_environment')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div class="flex relative">
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 48c37cdc..d95be469 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -1,13 +1,14 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">
-        {{ $t("import_export") }} {{ $t("environments") }}
-      </h3>
-      <div class="flex">
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('environments')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <span>
         <tippy ref="options" interactive trigger="click" theme="popover" arrow>
           <template #trigger>
-            <TabPrimary
+            <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
@@ -45,8 +46,7 @@
             "
           />
         </tippy>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      </span>
     </template>
     <template #body>
       <div class="flex flex-col space-y-2">
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index a98345e0..5106b077 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -1,9 +1,10 @@
 <template>
-  <SmartModal v-if="show" dialog @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("login_to_hoppscotch") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('login_to_hoppscotch')"
+    dialog
+    @close="hideModal"
+  >
     <template #body>
       <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
         <SmartItem
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index a7f34ba4..705f8dea 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("request.generate_code") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('request.generate_code')"
+    @close="hideModal"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <label for="requestType" class="font-semibold px-4 pb-4">
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index 461a0341..e0cfb46e 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("import.curl") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('import.curl')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <textarea
diff --git a/components/http/TokenList.vue b/components/http/TokenList.vue
index c11c394e..40ed6ed6 100644
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("manage_token") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('manage_token')" @close="hideModal">
     <template #body>
       <div class="flex flex-1">
         <label>{{ $t("token_list") }}</label>
diff --git a/components/smart/ConfirmModal.vue b/components/smart/ConfirmModal.vue
index 462a52ed..24ea4f65 100644
--- a/components/smart/ConfirmModal.vue
+++ b/components/smart/ConfirmModal.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("modal.confirm") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('modal.confirm')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <label class="font-semibold">
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 60be7389..1e209948 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -48,7 +48,15 @@
             "
           >
             <div class="flex pl-2 items-center justify-between">
-              <slot name="header"></slot>
+              <h3 class="heading">{{ title }}</h3>
+              <span class="flex">
+                <slot name="actions"></slot>
+                <ButtonSecondary
+                  v-if="dimissible"
+                  icon="close"
+                  @click.native="close"
+                />
+              </span>
             </div>
             <div
               class="
@@ -97,6 +105,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    title: {
+      type: String,
+      default: "",
+    },
+    dimissible: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup() {
     const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index 3ae0d979..1fc63678 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("team.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('team.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -46,7 +42,11 @@ export default {
       const name = this.name
       // We clear it early to give the UI a snappy feel
       this.name = ""
-      if (name != null && name.replace(/\s/g, "").length < 6) {
+      if (!name) {
+        this.$toast.info(this.$t("empty.team_name"))
+        return
+      }
+      if (name !== null && name.replace(/\s/g, "").length < 6) {
         this.$toast.error(this.$t("team.name_length_insufficient"), {
           icon: "error",
         })
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 4f2a2435..4d656a71 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("team.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('team.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input