diff --git a/packages/hoppscotch-app/components/collections/ImportExport.vue b/packages/hoppscotch-app/components/collections/ImportExport.vue
index c2564da83..6ade63ec9 100644
--- a/packages/hoppscotch-app/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/ImportExport.vue
@@ -3,6 +3,7 @@
     v-if="show"
     :title="`${t('modal.collections')}`"
     max-width="sm:max-w-md"
+    dialog
     @close="hideModal"
   >
     <template #actions>
diff --git a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
index a29b77022..07dc78323 100644
--- a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
@@ -3,6 +3,7 @@
     v-if="show"
     :title="`${t('modal.collections')}`"
     max-width="sm:max-w-md"
+    dialog
     @close="hideModal"
   >
     <template #actions>
diff --git a/packages/hoppscotch-app/components/environments/ImportExport.vue b/packages/hoppscotch-app/components/environments/ImportExport.vue
index 933ac2180..09e1a7ee7 100644
--- a/packages/hoppscotch-app/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-app/components/environments/ImportExport.vue
@@ -3,6 +3,7 @@
     v-if="show"
     :title="`${t('environment.title')}`"
     max-width="sm:max-w-md"
+    dialog
     @close="hideModal"
   >
     <template #actions>