diff --git a/packages/web/src/commands/stdCommands.ts b/packages/web/src/commands/stdCommands.ts
index 4e69d4fbe..b69e93116 100644
--- a/packages/web/src/commands/stdCommands.ts
+++ b/packages/web/src/commands/stdCommands.ts
@@ -74,7 +74,14 @@ registerCommand({
   category: __t('command.theme', { defaultMessage: 'Theme' }),
   name: __t('command.theme.change', { defaultMessage: 'Change' }),
   toolbarName: __t('command.theme.changeToolbar', { defaultMessage: 'Change theme' }),
-  onClick: () => showModal(SettingsModal, { selectedTab: 'theme' }),
+  onClick: () => openNewTab({
+      title: 'Settings',
+      icon: 'icon settings',
+      tabComponent: 'SettingsTab',
+      props: {
+        selectedItem: 'theme',
+      },
+    }),
   // getSubCommands: () => get(extensions).themes.map(themeCommand),
 });
 
diff --git a/packages/web/src/tabs/SettingsTab.svelte b/packages/web/src/tabs/SettingsTab.svelte
index e4e89c8f9..ab7f652b1 100644
--- a/packages/web/src/tabs/SettingsTab.svelte
+++ b/packages/web/src/tabs/SettingsTab.svelte
@@ -20,6 +20,8 @@
     import SQLEditorSettings from "../settings/SQLEditorSettings.svelte";
     import AiSettingsTab from "../settings/AiSettingsTab.svelte";
 
+    export let selectedItem = 'general';
+
     const menuItems = [
         {
             label: _t('settings.general', { defaultMessage: 'General' }),
@@ -106,8 +108,6 @@
             testid: 'settings-other',
         },
     ];
-
-    let selectedItem = 'general';
 </script>
 
 <SettingsFormProvider>