diff --git a/frontend/libs/components/settings-modal/src/lib/MiscSettingsPane.tsx b/frontend/libs/components/settings-modal/src/lib/MiscSettingsPane.tsx
index a8467298ab..d57cfd3879 100644
--- a/frontend/libs/components/settings-modal/src/lib/MiscSettingsPane.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/MiscSettingsPane.tsx
@@ -1,9 +1,13 @@
 import { useEffect, useState } from "react";
+import { Button } from "@storyteller/ui-button";
 import { Input } from "@storyteller/ui-input";
-import { AppPreferencesPayload, GetAppPreferences } from "@storyteller/tauri-api";
+import { AppPreferencesPayload, GetAppPreferences, CustomDirectory } from "@storyteller/tauri-api";
 import { PreferenceName, UpdateAppPreferences } from "libs/tauri-api/src/lib/settings/UpdateAppPreference";
 import { open } from '@tauri-apps/plugin-dialog';
 
+// NB: On the backend, we expand "$default" to mean the default system download dir.
+const DEFAULT_SYSTEM_DOWNLOAD_DIRECTORY_SIGIL = "$default";
+
 interface MiscSettingsPaneProps {
 }
 
@@ -20,7 +24,12 @@ export const MiscSettingsPane = (args: MiscSettingsPaneProps) => {
     fetchData();
   }, []);
 
-  const downloadDirectory = preferences?.preferred_download_directory || "(default)";
+
+
+  // NB: This might be a complex type.
+  const downloadDirectorySpec = preferences?.preferred_download_directory || DEFAULT_SYSTEM_DOWNLOAD_DIRECTORY_SIGIL;
+  const downloadDirectory = (typeof downloadDirectorySpec === "string")? downloadDirectorySpec : downloadDirectorySpec.custom;
+
   const playSounds = preferences?.play_sounds || false;
 
   const reloadPreferences = async () => {
@@ -29,14 +38,6 @@ export const MiscSettingsPane = (args: MiscSettingsPaneProps) => {
     setPreferences(prefs.preferences);
   }
 
-  const setDownloadDirectory = async (value: string) => {
-    await UpdateAppPreferences({
-      preference: PreferenceName.PreferredDownloadDirectory, 
-      value: value,
-    });
-    await reloadPreferences();
-  }
-
   const setPlaySounds = async (checked: boolean) => {
     const value = checked ? "true" : "false";
     await UpdateAppPreferences({
@@ -46,12 +47,25 @@ export const MiscSettingsPane = (args: MiscSettingsPaneProps) => {
     await reloadPreferences();
   }
 
-  const openPicker = async () => {
-    const file = await open({
+  const openDirectoryPicker = async () => {
+    let defaultPath = downloadDirectory || undefined;
+
+    let directory = await open({
       multiple: false,
-      directory: false,
+      directory: true,
+      defaultPath: defaultPath,
     });
-    console.log(file);
+
+    console.log("selected directory", directory);
+
+    directory = directory === null ? DEFAULT_SYSTEM_DOWNLOAD_DIRECTORY_SIGIL : directory;
+
+    await UpdateAppPreferences({
+      preference: PreferenceName.PreferredDownloadDirectory, 
+      value: directory,
+    });
+
+    await reloadPreferences();
   }
 
   return (<>
@@ -60,18 +74,19 @@ export const MiscSettingsPane = (args: MiscSettingsPaneProps) => {
         <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"
-            value={downloadDirectory}
-            onChange={(e) => setDownloadDirectory((e.target as any).value)}
-            placeholder="Enter API Key"
-        />
+
+
+        <Button 
+          variant="primary" 
+          className="py-1"
+          onClick={openDirectoryPicker}
+        >
+            Choose Directory
+        </Button>
       </div>
       <div>
         <label htmlFor="play-sounds" className="mb-2 block">
-          Play Sounds for Events?
+          Play Notification Sounds for Events?
         </label>
         <Input
             id="play-sounds"
diff --git a/frontend/libs/tauri-api/src/lib/settings/GetAppPreferences.ts b/frontend/libs/tauri-api/src/lib/settings/GetAppPreferences.ts
index d14ab52eeb..51fb85eff8 100644
--- a/frontend/libs/tauri-api/src/lib/settings/GetAppPreferences.ts
+++ b/frontend/libs/tauri-api/src/lib/settings/GetAppPreferences.ts
@@ -6,12 +6,17 @@ export interface GetAppPreferencesResult {
 
 export interface AppPreferencesPayload {
   // Preferred download directory
-  preferred_download_directory: string,
+  preferred_download_directory: string | CustomDirectory,
 
   // Play sounds on events.
   play_sounds: boolean,
 }
 
+export interface CustomDirectory {
+  // If the directory is custom.
+  custom: string,
+}
+
 export const GetAppPreferences = async () : Promise<GetAppPreferencesResult> => {
   let result = await invoke("get_app_preferences_command");
   return (result as GetAppPreferencesResult);