diff --git a/packages/hoppscotch-app/components/app/Share.vue b/packages/hoppscotch-app/components/app/Share.vue
index 23ec0bb9e..bcc72ce1c 100644
--- a/packages/hoppscotch-app/components/app/Share.vue
+++ b/packages/hoppscotch-app/components/app/Share.vue
@@ -1,6 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="t('app.invite_your_friends')"
     @close="hideModal"
   >
diff --git a/packages/hoppscotch-app/components/app/Support.vue b/packages/hoppscotch-app/components/app/Support.vue
index 3a5c02a9c..681b19e7e 100644
--- a/packages/hoppscotch-app/components/app/Support.vue
+++ b/packages/hoppscotch-app/components/app/Support.vue
@@ -1,6 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="t('support.title')"
     max-width="sm:max-w-md"
     @close="$emit('hide-modal')"
diff --git a/packages/hoppscotch-app/components/collections/Add.vue b/packages/hoppscotch-app/components/collections/Add.vue
index c1a16f70f..269b75bfa 100644
--- a/packages/hoppscotch-app/components/collections/Add.vue
+++ b/packages/hoppscotch-app/components/collections/Add.vue
@@ -1,5 +1,10 @@
 <template>
-  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="$t('collection.new')"
+    @close="hideModal"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/packages/hoppscotch-app/components/collections/AddFolder.vue b/packages/hoppscotch-app/components/collections/AddFolder.vue
index 0de1c6cbb..0643ae108 100644
--- a/packages/hoppscotch-app/components/collections/AddFolder.vue
+++ b/packages/hoppscotch-app/components/collections/AddFolder.vue
@@ -1,6 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="$t('folder.new')"
     @close="$emit('hide-modal')"
   >
diff --git a/packages/hoppscotch-app/components/collections/Edit.vue b/packages/hoppscotch-app/components/collections/Edit.vue
index c8632876d..d8dad4a80 100644
--- a/packages/hoppscotch-app/components/collections/Edit.vue
+++ b/packages/hoppscotch-app/components/collections/Edit.vue
@@ -1,5 +1,10 @@
 <template>
-  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="$t('collection.edit')"
+    @close="hideModal"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/packages/hoppscotch-app/components/collections/EditFolder.vue b/packages/hoppscotch-app/components/collections/EditFolder.vue
index 3da88c0f7..1c1fff9ee 100644
--- a/packages/hoppscotch-app/components/collections/EditFolder.vue
+++ b/packages/hoppscotch-app/components/collections/EditFolder.vue
@@ -1,6 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="$t('folder.edit')"
     @close="$emit('hide-modal')"
   >
diff --git a/packages/hoppscotch-app/components/collections/EditRequest.vue b/packages/hoppscotch-app/components/collections/EditRequest.vue
index 24785dfd9..f69527bbc 100644
--- a/packages/hoppscotch-app/components/collections/EditRequest.vue
+++ b/packages/hoppscotch-app/components/collections/EditRequest.vue
@@ -1,5 +1,10 @@
 <template>
-  <SmartModal v-if="show" :title="$t('modal.edit_request')" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="$t('modal.edit_request')"
+    @close="hideModal"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/packages/hoppscotch-app/components/collections/ImportExport.vue b/packages/hoppscotch-app/components/collections/ImportExport.vue
index 6ade63ec9..ff7b53007 100644
--- a/packages/hoppscotch-app/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/ImportExport.vue
@@ -1,9 +1,9 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="`${t('modal.collections')}`"
     max-width="sm:max-w-md"
-    dialog
     @close="hideModal"
   >
     <template #actions>
diff --git a/packages/hoppscotch-app/components/collections/SaveRequest.vue b/packages/hoppscotch-app/components/collections/SaveRequest.vue
index 129827b7e..06f775fc6 100644
--- a/packages/hoppscotch-app/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-app/components/collections/SaveRequest.vue
@@ -1,6 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="`${t('collection.save_as')}`"
     @close="hideModal"
   >
diff --git a/packages/hoppscotch-app/components/collections/graphql/Add.vue b/packages/hoppscotch-app/components/collections/graphql/Add.vue
index 37a5dd612..499dda94b 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Add.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Add.vue
@@ -1,5 +1,10 @@
 <template>
-  <SmartModal v-if="show" :title="`${$t('collection.new')}`" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="`${$t('collection.new')}`"
+    @close="hideModal"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/packages/hoppscotch-app/components/collections/graphql/AddFolder.vue b/packages/hoppscotch-app/components/collections/graphql/AddFolder.vue
index e507b5c5b..a392b9a06 100644
--- a/packages/hoppscotch-app/components/collections/graphql/AddFolder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/AddFolder.vue
@@ -1,6 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="$t('folder.new')"
     @close="$emit('hide-modal')"
   >
diff --git a/packages/hoppscotch-app/components/collections/graphql/Edit.vue b/packages/hoppscotch-app/components/collections/graphql/Edit.vue
index 4ff9b616b..0917a7826 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Edit.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Edit.vue
@@ -1,6 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="`${$t('collection.edit')}`"
     @close="hideModal"
   >
diff --git a/packages/hoppscotch-app/components/collections/graphql/EditFolder.vue b/packages/hoppscotch-app/components/collections/graphql/EditFolder.vue
index 9ef633f1a..671b298eb 100644
--- a/packages/hoppscotch-app/components/collections/graphql/EditFolder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/EditFolder.vue
@@ -1,6 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="`${$t('folder.edit')}`"
     @close="$emit('hide-modal')"
   >
diff --git a/packages/hoppscotch-app/components/collections/graphql/EditRequest.vue b/packages/hoppscotch-app/components/collections/graphql/EditRequest.vue
index 31d435cda..add839bc1 100644
--- a/packages/hoppscotch-app/components/collections/graphql/EditRequest.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/EditRequest.vue
@@ -1,6 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="`${$t('modal.edit_request')}`"
     @close="hideModal"
   >
diff --git a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
index 2a5f49f62..ada76075b 100644
--- a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
@@ -1,9 +1,9 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="`${t('modal.collections')}`"
     max-width="sm:max-w-md"
-    dialog
     @close="hideModal"
   >
     <template #actions>
diff --git a/packages/hoppscotch-app/components/environments/Details.vue b/packages/hoppscotch-app/components/environments/Details.vue
index 460f49e9a..80d3f3029 100644
--- a/packages/hoppscotch-app/components/environments/Details.vue
+++ b/packages/hoppscotch-app/components/environments/Details.vue
@@ -1,6 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="$t(`environment.${action}`)"
     @close="hideModal"
   >
diff --git a/packages/hoppscotch-app/components/environments/ImportExport.vue b/packages/hoppscotch-app/components/environments/ImportExport.vue
index 4d0dce47a..92ad97a6f 100644
--- a/packages/hoppscotch-app/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-app/components/environments/ImportExport.vue
@@ -1,9 +1,9 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="`${t('environment.title')}`"
     max-width="sm:max-w-md"
-    dialog
     @close="hideModal"
   >
     <template #actions>
diff --git a/packages/hoppscotch-app/components/firebase/Login.vue b/packages/hoppscotch-app/components/firebase/Login.vue
index 3f850aa64..59a41f0de 100644
--- a/packages/hoppscotch-app/components/firebase/Login.vue
+++ b/packages/hoppscotch-app/components/firebase/Login.vue
@@ -1,9 +1,9 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="`${$t('auth.login_to_hoppscotch')}`"
     max-width="sm:max-w-md"
-    dialog
     @close="hideModal"
   >
     <template #body>
diff --git a/packages/hoppscotch-app/components/http/CodegenModal.vue b/packages/hoppscotch-app/components/http/CodegenModal.vue
index 2940ce0ac..cc522f38b 100644
--- a/packages/hoppscotch-app/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-app/components/http/CodegenModal.vue
@@ -1,6 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
+    dialog
     :title="`${t('request.generate_code')}`"
     @close="hideModal"
   >
diff --git a/packages/hoppscotch-app/components/http/ImportCurl.vue b/packages/hoppscotch-app/components/http/ImportCurl.vue
index 07eee449f..671643879 100644
--- a/packages/hoppscotch-app/components/http/ImportCurl.vue
+++ b/packages/hoppscotch-app/components/http/ImportCurl.vue
@@ -1,5 +1,10 @@
 <template>
-  <SmartModal v-if="show" :title="`${t('import.curl')}`" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="`${t('import.curl')}`"
+    @close="hideModal"
+  >
     <template #body>
       <div class="px-2 h-46">
         <div
diff --git a/packages/hoppscotch-app/components/teams/Add.vue b/packages/hoppscotch-app/components/teams/Add.vue
index ef5daf13c..95b528349 100644
--- a/packages/hoppscotch-app/components/teams/Add.vue
+++ b/packages/hoppscotch-app/components/teams/Add.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="t('team.new')" @close="hideModal">
+  <SmartModal v-if="show" dialog :title="t('team.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/packages/hoppscotch-app/components/teams/Edit.vue b/packages/hoppscotch-app/components/teams/Edit.vue
index 3c08559c3..a2e1475dc 100644
--- a/packages/hoppscotch-app/components/teams/Edit.vue
+++ b/packages/hoppscotch-app/components/teams/Edit.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="t('team.edit')" @close="hideModal">
+  <SmartModal v-if="show" dialog :title="t('team.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div class="relative flex">
diff --git a/packages/hoppscotch-app/components/teams/Invite.vue b/packages/hoppscotch-app/components/teams/Invite.vue
index fc5b62905..a98f741fe 100644
--- a/packages/hoppscotch-app/components/teams/Invite.vue
+++ b/packages/hoppscotch-app/components/teams/Invite.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="t('team.invite')" @close="hideModal">
+  <SmartModal v-if="show" dialog :title="t('team.invite')" @close="hideModal">
     <template #body>
       <div v-if="sendInvitesResult.length" class="flex flex-col px-4">
         <div class="flex flex-col items-center justify-center max-w-md">
diff --git a/packages/hoppscotch-app/components/teams/Modal.vue b/packages/hoppscotch-app/components/teams/Modal.vue
index 51ddffee8..2a6b81538 100644
--- a/packages/hoppscotch-app/components/teams/Modal.vue
+++ b/packages/hoppscotch-app/components/teams/Modal.vue
@@ -1,5 +1,10 @@
 <template>
-  <SmartModal v-if="show" :title="t('team.select_a_team')" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="t('team.select_a_team')"
+    @close="hideModal"
+  >
     <template #body>
       <Teams :modal="true" />
     </template>