diff --git a/src/composables/use-menu.ts b/src/composables/use-menu.ts
index 1868b1420..0cbaf140a 100644
--- a/src/composables/use-menu.ts
+++ b/src/composables/use-menu.ts
@@ -1,9 +1,16 @@
 import { onUnmounted } from 'vue'
+import { useFileDialog } from '@vueuse/core'
 
 import { IS_TAURI } from '@/constants'
 import { useEditorStore } from '@/stores/editor'
 import { openFileInNewTab, createTab, closeTab, activeTab } from '@/stores/tabs'
 
+const fileDialog = useFileDialog({ accept: '.fig', multiple: false, reset: true })
+fileDialog.onChange((files) => {
+  const file = files?.[0]
+  if (file) void openFileInNewTab(file)
+})
+
 export async function openFileDialog() {
   if (IS_TAURI) {
     const { open } = await import('@tauri-apps/plugin-dialog')
@@ -37,14 +44,7 @@ export async function openFileDialog() {
     }
   }
 
-  const input = document.createElement('input')
-  input.type = 'file'
-  input.accept = '.fig'
-  input.addEventListener('change', () => {
-    const file = input.files?.[0]
-    if (file) void openFileInNewTab(file)
-  })
-  input.click()
+  fileDialog.open()
 }
 
 const store = useEditorStore()