diff --git a/src/lib/components/Settings.svelte b/src/lib/components/Settings.svelte
index 7cb7162..b06ad37 100644
--- a/src/lib/components/Settings.svelte
+++ b/src/lib/components/Settings.svelte
@@ -37,6 +37,7 @@
   let syncPassphrase = $state("");
   let remoteMode = $state("local");
   let remoteServerUrl = $state("");
+  let byokApiKey = $state("");
   let managedEmail = $state("");
   let managedPassword = $state("");
   let autoCheckUpdates = $state(true);
@@ -107,6 +108,7 @@
     syncPassphrase = cfg.server_sync.passphrase;
     remoteMode = cfg.remote.mode;
     remoteServerUrl = cfg.remote.server_url;
+    byokApiKey = cfg.remote.byok_api_key ?? "";
     autoCheckUpdates = cfg.updates.auto_check;
   });
 
@@ -183,6 +185,7 @@
       remote: {
         mode: remoteMode,
         server_url: remoteServerUrl,
+        byok_api_key: byokApiKey,
       },
       updates: {
         auto_check: autoCheckUpdates,
@@ -572,7 +575,7 @@
             BYOK (Bring Your Own Key)
           </label>
         </div>
-        {#if remoteMode !== "local"}
+        {#if remoteMode === "managed"}
           <div class="field">
             <label for="remote-url">Server URL</label>
             <input
@@ -583,6 +586,20 @@
             />
           </div>
         {/if}
+        {#if remoteMode === "byok"}
+          <div class="field">
+            <label for="byok-key">Deepgram API Key</label>
+            <input
+              id="byok-key"
+              type="password"
+              bind:value={byokApiKey}
+              placeholder="Enter your Deepgram API key"
+            />
+            <p style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">
+              Get a key at <a href="https://console.deepgram.com" target="_blank" rel="noopener" style="color: var(--accent-blue);">console.deepgram.com</a>
+            </p>
+          </div>
+        {/if}
         {#if remoteMode === "managed"}
           <div class="managed-auth">
             <div class="field">