diff --git a/frontend/libs/components/settings-modal/package.json b/frontend/libs/components/settings-modal/package.json
index 63f67ddfe9..9b59cee188 100644
--- a/frontend/libs/components/settings-modal/package.json
+++ b/frontend/libs/components/settings-modal/package.json
@@ -13,5 +13,8 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     }
+  },
+  "dependencies": {
+    "@tauri-apps/plugin-dialog": "^2.2.1"
   }
 }
diff --git a/frontend/libs/components/settings-modal/src/lib/MiscSettingsPane.tsx b/frontend/libs/components/settings-modal/src/lib/MiscSettingsPane.tsx
index 9b36600455..a8467298ab 100644
--- a/frontend/libs/components/settings-modal/src/lib/MiscSettingsPane.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/MiscSettingsPane.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { Input } from "@storyteller/ui-input";
 import { AppPreferencesPayload, GetAppPreferences } from "@storyteller/tauri-api";
 import { PreferenceName, UpdateAppPreferences } from "libs/tauri-api/src/lib/settings/UpdateAppPreference";
+import { open } from '@tauri-apps/plugin-dialog';
 
 interface MiscSettingsPaneProps {
 }
@@ -45,12 +46,21 @@ export const MiscSettingsPane = (args: MiscSettingsPaneProps) => {
     await reloadPreferences();
   }
 
+  const openPicker = async () => {
+    const file = await open({
+      multiple: false,
+      directory: false,
+    });
+    console.log(file);
+  }
+
   return (<>
     <div className="space-y-4">
       <div>
         <label htmlFor="pal-api-key" className="mb-2 block">
           Default Download Directory
         </label>
+        <button onClick={openPicker}>button</button>
         <Input
             id="pal-api-key"
             type="input"
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5ae19e3d95..ddf4370695 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2225,7 +2225,10 @@
     },
     "libs/components/settings-modal": {
       "name": "@storyteller/ui-settings-modal",
-      "version": "0.0.1"
+      "version": "0.0.1",
+      "dependencies": {
+        "@tauri-apps/plugin-dialog": "^2.2.1"
+      }
     },
     "libs/components/tab-selector": {
       "name": "@storyteller/ui-tab-selector",
@@ -11164,6 +11167,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tauri-apps/plugin-dialog": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-dialog/-/plugin-dialog-2.2.1.tgz",
+      "integrity": "sha512-wZmCouo4PgTosh/UoejPw9DPs6RllS5Pp3fuOV2JobCu36mR5AXU2MzU9NZiVaFi/5Zfc8RN0IhcZHnksJ1o8A==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.0.0"
+      }
+    },
     "node_modules/@tauri-apps/plugin-http": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-http/-/plugin-http-2.4.3.tgz",