diff --git a/src/App.tsx b/src/App.tsx
index 9f1c8e6..d841827 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,6 @@ import {
 import { Footer } from './components/Footer';
 import Header from './components/Header';
 import { ModalProvider } from './components/ModalProvider';
-import SettingDialog from './components/SettingDialog';
 import Sidebar from './components/Sidebar';
 import { ToastPopup } from './components/ToastPopup';
 import { AppContextProvider, useAppContext } from './context/app';
@@ -24,6 +23,7 @@ import { useDebouncedCallback } from './hooks/useDebouncedCallback';
 import { usePWAUpdatePrompt } from './hooks/usePWAUpdatePrompt';
 import * as lang from './lang/en.json';
 import ChatScreen from './pages/ChatScreen';
+import Settings from './pages/Settings';
 import WelcomeScreen from './pages/WelcomeScreen';
 
 const DEBOUNCE_DELAY = 5000;
@@ -43,6 +43,7 @@ const App: FC = () => {
                 <Routes>
                   <Route element={<AppLayout />}>
                     <Route path="/chat/:convId" element={<Chat />} />
+                    <Route path="/settings" element={<Settings />} />
                     <Route path="*" element={<WelcomeScreen />} />
                   </Route>
                 </Routes>
@@ -141,12 +142,6 @@ const AppLayout: FC = () => {
         </main>
         <Footer />
       </div>
-      {showSettings && (
-        <SettingDialog
-          show={showSettings}
-          onClose={() => setShowSettings(false)}
-        />
-      )}
       <Toaster />
     </>
   );
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index ff01fba..0ae45b0 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -6,7 +6,7 @@ import {
 } from '@heroicons/react/24/solid';
 import { useEffect } from 'react';
 import toast from 'react-hot-toast';
-import { useAppContext } from '../context/app';
+import { useNavigate } from 'react-router';
 import { useChatExtraContext } from '../hooks/useChatExtraContext';
 import { ChatTextareaApi, useChatTextarea } from '../hooks/useChatTextarea';
 import { useVSCodeContext } from '../hooks/useVSCode';
@@ -42,7 +42,7 @@ export function ChatInput({
   onStop: () => void;
   isGenerating: boolean;
 }) {
-  const { setShowSettings } = useAppContext();
+  const navigate = useNavigate();
   const textarea: ChatTextareaApi = useChatTextarea(getPrefilledContent());
   const extraContext = useChatExtraContext();
   useVSCodeContext(textarea, extraContext);
@@ -135,7 +135,7 @@ export function ChatInput({
                 className="btn btn-ghost w-8 h-8 p-0 rounded-full xl:hidden"
                 title="Settings"
                 aria-label="Open settings menu"
-                onClick={() => setShowSettings(true)}
+                onClick={() => navigate('/settings')}
               >
                 <AdjustmentsHorizontalIcon className="h-5 w-5" />
               </button>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 07ba4ab..4ef869d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -16,16 +16,21 @@ export default function Header() {
   const {
     config,
     config: { model },
-    setShowSettings,
     saveConfig,
+    showSettings,
   } = useAppContext();
   const { models } = useInferenceContext();
   const { viewingChat } = useChatContext();
 
   const currConv = useMemo(() => viewingChat?.conv ?? null, [viewingChat]);
   const title = useMemo(
-    () => (currConv ? currConv.name : lang['header.title.noChat']),
-    [currConv]
+    () =>
+      showSettings
+        ? lang['header.title.settings']
+        : currConv
+          ? currConv.name
+          : lang['header.title.noChat'],
+    [currConv, showSettings]
   );
 
   const selectedModel = useMemo(() => {
@@ -47,6 +52,7 @@ export default function Header() {
           aria-label={title}
           role="button"
           onClick={() => {
+            if (showSettings) return;
             if (currConv) navigate(`/chat/${currConv.id}`);
             else navigate('/');
           }}
@@ -64,53 +70,66 @@ export default function Header() {
         </button>
       </section>
 
-      <section className="flex flex-row items-center">
-        {/* model information */}
-        <Dropdown
-          className="ml-2 px-1 xl:px-4 py-0"
-          entity="Model"
-          options={models.map((model) => ({
-            value: model.id,
-            label: model.name,
-          }))}
-          filterable={true}
-          hideChevron={models.length < 2}
-          align="start"
-          currentValue={
-            <span className="max-w-64 sm:max-w-80 truncate text-nowrap font-semibold">
-              {selectedModel}
-            </span>
-          }
-          renderOption={(option) => (
-            <span className="max-w-64 sm:max-w-80 truncate text-nowrap">
-              {option.label}
-            </span>
-          )}
-          isSelected={(option) => model === option.value}
-          onSelect={(option) =>
-            saveConfig({
-              ...config,
-              model: option.value,
-            })
-          }
-        />
+      {showSettings && (
+        <section className="flex items-center max-xl:hidden">
+          <label
+            className="font-medium truncate text-center px-4"
+            aria-label={title}
+          >
+            {title}
+          </label>
+        </section>
+      )}
 
-        {/* spacer */}
-        <div className="grow"></div>
+      {!showSettings && (
+        <section className="flex flex-row items-center">
+          {/* model information */}
+          <Dropdown
+            className="ml-2 px-1 xl:px-4 py-0"
+            entity="Model"
+            options={models.map((model) => ({
+              value: model.id,
+              label: model.name,
+            }))}
+            filterable={true}
+            hideChevron={models.length < 2}
+            align="start"
+            currentValue={
+              <span className="max-w-64 sm:max-w-80 truncate text-nowrap font-semibold">
+                {selectedModel}
+              </span>
+            }
+            renderOption={(option) => (
+              <span className="max-w-64 sm:max-w-80 truncate text-nowrap">
+                {option.label}
+              </span>
+            )}
+            isSelected={(option) => model === option.value}
+            onSelect={(option) =>
+              saveConfig({
+                ...config,
+                model: option.value,
+              })
+            }
+          />
 
-        {/* action buttons (top right) */}
-        <div className="flex items-center">
-          <button
-            className="btn btn-ghost w-8 h-8 p-0 rounded-full max-xl:hidden"
-            title="Settings"
-            aria-label="Open settings menu"
-            onClick={() => setShowSettings(true)}
-          >
-            {/* settings button */}
-            <Cog8ToothIcon className="w-5 h-5" />
-          </button>
-        </div>
-      </section>
+          {/* spacer */}
+          <div className="grow"></div>
+
+          {/* action buttons (top right) */}
+          <div className="flex items-center">
+            <button
+              className="btn btn-ghost w-8 h-8 p-0 rounded-full max-xl:hidden"
+              title="Settings"
+              aria-label="Open settings menu"
+              onClick={() => navigate('/settings')}
+            >
+              {/* settings button */}
+              <Cog8ToothIcon className="w-5 h-5" />
+            </button>
+          </div>
+        </section>
+      )}
     </header>
   );
 }
diff --git a/src/lang/en.json b/src/lang/en.json
index a5ea65f..ca14cdf 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -1,5 +1,6 @@
 {
   "header.title.noChat": "New Chat",
+  "header.title.settings": "Settings",
   "chatScreen": {
     "welcome": "Hi,",
     "welcomeNote": "how can I help you?"
@@ -143,12 +144,12 @@
         "note": "DRY sampling reduces repetition in generated text even across long contexts. This parameter sets DRY penalty for the last n tokens."
       },
       "custom": {
-        "label": "",
-        "note": ""
+        "label": "Custom JSON config",
+        "note": "For more info, refer to <a class=\"underline\" href=\"https://github.com/ggerganov/llama.cpp/blob/master/tools/server/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">server documentation</a>"
       },
       "pyIntepreterEnabled": {
-        "label": "",
-        "note": ""
+        "label": "Enable Python interpreter",
+        "note": "This feature uses <a class=\"underline\" href=\"https://pyodide.org\" target=\"_blank\" rel=\"noopener noreferrer\">pyodide</a>, downloaded from CDN. To use this feature, ask the LLM to generate Python code inside a Markdown code block. You will see a \"Run\" button on the code block, near the \"Copy\" button."
       },
       "ttsPitch": {
         "label": "Pitch",
@@ -192,6 +193,11 @@
         "label": "Syntax Theme",
         "note": "Choose the color theme for code blocks."
       }
+    },
+    "actionButtons": {
+      "saveBtnLabel": "Save",
+      "cancelBtnLabel": "Close",
+      "resetBtnLabel": "Reset"
     }
   },
   "newVersion": {
diff --git a/src/components/SettingDialog.tsx b/src/pages/Settings.tsx
similarity index 76%
rename from src/components/SettingDialog.tsx
rename to src/pages/Settings.tsx
index f9e80ea..193398f 100644
--- a/src/components/SettingDialog.tsx
+++ b/src/pages/Settings.tsx
@@ -26,7 +26,22 @@ import {
   TrashIcon,
   TvIcon,
 } from '@heroicons/react/24/outline';
-import React, { FC, ReactElement, useEffect, useMemo, useState } from 'react';
+import React, {
+  FC,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useNavigate } from 'react-router';
+import { Dropdown } from '../components/common';
+import { useModals } from '../components/ModalProvider';
+import TextToSpeech, {
+  getSpeechSynthesisVoiceByName,
+  getSpeechSynthesisVoices,
+  IS_SPEECH_SYNTHESIS_SUPPORTED,
+} from '../components/TextToSpeech';
 import {
   CONFIG_DEFAULT,
   INFERENCE_PROVIDERS,
@@ -34,6 +49,7 @@ import {
   THEMES,
 } from '../config';
 import { useAppContext } from '../context/app';
+import { useChatContext } from '../context/chat';
 import { useInferenceContext } from '../context/inference';
 import StorageUtils from '../database';
 import { useDebouncedCallback } from '../hooks/useDebouncedCallback';
@@ -54,13 +70,6 @@ import {
   isString,
   normalizeUrl,
 } from '../utils';
-import { Dropdown, OpenInNewTab } from './common';
-import { useModals } from './ModalProvider';
-import TextToSpeech, {
-  getSpeechSynthesisVoiceByName,
-  getSpeechSynthesisVoices,
-  IS_SPEECH_SYNTHESIS_SUPPORTED,
-} from './TextToSpeech';
 
 // --- Type Definitions ---
 enum SettingInputType {
@@ -473,19 +482,7 @@ const getSettingTabsConfiguration = (
       /* Custom */
       DELIMETER,
       toSection('Custom', <CpuChipIcon className={ICON_CLASSNAME} />),
-      {
-        type: SettingInputType.LONG_INPUT,
-        label: (
-          <>
-            Custom JSON config (For more info, refer to{' '}
-            <OpenInNewTab href="https://github.com/ggerganov/llama.cpp/blob/master/tools/server/README.md">
-              server documentation
-            </OpenInNewTab>
-            )
-          </>
-        ),
-        key: 'custom',
-      },
+      toInput(SettingInputType.LONG_INPUT, 'custom'),
     ],
   },
 
@@ -502,56 +499,45 @@ const getSettingTabsConfiguration = (
         type: SettingInputType.CUSTOM,
         key: 'custom', // dummy key, won't be used
         component: () => (
-          <>
-            <p className="mb-8">
-              Experimental features are not guaranteed to work correctly.
-              <br />
-              <br />
+          <div className="flex flex-col gap-2 mb-8">
+            <p>Experimental features are not guaranteed to work correctly.</p>
+            <p>
               If you encounter any problems, create a{' '}
-              <OpenInNewTab href="https://github.com/ggerganov/llama.cpp/issues/new?template=019-bug-misc.yml">
+              <a
+                className="underline"
+                href="https://github.com/ggerganov/llama.cpp/issues/new?template=019-bug-misc.yml"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 Bug (misc.)
-              </OpenInNewTab>{' '}
+              </a>{' '}
               report on Github. Please also specify <b>webui/experimental</b> on
               the report title and include screenshots.
-              <br />
-              <br />
+            </p>
+            <p>
               Some features may require packages downloaded from CDN, so they
               need internet connection.
             </p>
-          </>
-        ),
-      },
-      {
-        type: SettingInputType.CHECKBOX,
-        label: (
-          <>
-            <b>Enable Python interpreter</b>
-            <br />
-            <small className="text-xs">
-              This feature uses{' '}
-              <OpenInNewTab href="https://pyodide.org">pyodide</OpenInNewTab>,
-              downloaded from CDN. To use this feature, ask the LLM to generate
-              Python code inside a Markdown code block. You will see a "Run"
-              button on the code block, near the "Copy" button.
-            </small>
-          </>
+          </div>
         ),
-        key: 'pyIntepreterEnabled',
       },
+      toInput(SettingInputType.CHECKBOX, 'pyIntepreterEnabled'),
     ],
   },
 ];
 
-export default function SettingDialog({
-  show,
-  onClose,
-}: {
-  show: boolean;
-  onClose: () => void;
-}) {
-  const { config, saveConfig, presets, savePreset, removePreset } =
-    useAppContext();
+export default function Settings() {
+  const navigate = useNavigate();
+  const {
+    config,
+    saveConfig,
+    presets,
+    savePreset,
+    removePreset,
+    setShowSettings,
+  } = useAppContext();
   const { models, fetchModels } = useInferenceContext();
+  const { viewingChat } = useChatContext();
   const [tabIdx, setTabIdx] = useState(0);
 
   // clone the config object to prevent direct mutation
@@ -565,9 +551,18 @@ export default function SettingDialog({
     () => getSettingTabsConfiguration(localConfig, localModels),
     [localConfig, localModels]
   );
+  const currConv = useMemo(() => viewingChat?.conv ?? null, [viewingChat]);
+
+  useEffect(() => setShowSettings(true), [setShowSettings]);
 
   const { showConfirm, showAlert } = useModals();
 
+  const onClose = useCallback(() => {
+    setShowSettings(false);
+    if (currConv) navigate(`/chat/${currConv.id}`);
+    else navigate('/');
+  }, [currConv, navigate, setShowSettings]);
+
   const resetConfig = async () => {
     if (await showConfirm('Are you sure you want to reset all settings?')) {
       setLocalConfig({ ...CONFIG_DEFAULT } as Configuration);
@@ -648,212 +643,204 @@ export default function SettingDialog({
       });
     };
 
-  return (
-    <dialog
-      className={classNames({ modal: true, 'modal-open': show })}
-      aria-label="Settings dialog"
-    >
-      <div className="modal-box w-11/12 max-w-4xl max-sm:px-4">
-        <h3 className="text-lg font-bold mb-6 max-sm:mx-2">Settings</h3>
-        <div className="flex flex-col md:flex-row h-[calc(90vh-12rem)]">
-          {/* Left panel, showing sections - Desktop version */}
-          <div
-            className="hidden md:flex flex-col items-stretch pr-4 mr-4 border-r-2 border-base-200"
-            role="complementary"
-            aria-description="Settings sections"
-            tabIndex={0}
-          >
-            {settingTabs.map((tab, idx) => (
+  const mapFieldToElement = (field: SettingField, idx: number) => {
+    const key = `${tabIdx}-${idx}`;
+
+    switch (field.type) {
+      case SettingInputType.SHORT_INPUT:
+        return (
+          <SettingsModalShortInput
+            key={key}
+            configKey={field.key}
+            field={field}
+            value={localConfig[field.key] as string | number}
+            onChange={onChange(field.key)}
+          />
+        );
+      case SettingInputType.RANGE_INPUT:
+        return (
+          <SettingsModalRangeInput
+            key={key}
+            configKey={field.key}
+            field={field}
+            min={field.min as number}
+            max={field.max as number}
+            step={field.step as number}
+            value={localConfig[field.key] as number}
+            onChange={onChange(field.key)}
+          />
+        );
+      case SettingInputType.LONG_INPUT:
+        return (
+          <SettingsModalLongInput
+            key={key}
+            configKey={field.key}
+            field={field}
+            value={String(localConfig[field.key])}
+            onChange={onChange(field.key)}
+          />
+        );
+      case SettingInputType.CHECKBOX:
+        return (
+          <SettingsModalCheckbox
+            key={key}
+            configKey={field.key}
+            field={field}
+            value={!!localConfig[field.key]}
+            onChange={onChange(field.key)}
+          />
+        );
+      case SettingInputType.DROPDOWN:
+        return (
+          <SettingsModalDropdown
+            key={key}
+            configKey={field.key}
+            field={field as SettingFieldInput}
+            options={(field as SettingFieldDropdown).options}
+            filterable={(field as SettingFieldDropdown).filterable}
+            value={String(localConfig[field.key])}
+            onChange={onChange(field.key)}
+          />
+        );
+      case SettingInputType.CUSTOM:
+        switch (field.key) {
+          case 'import-export':
+            return <ImportExportComponent key={key} onClose={onClose} />;
+          case 'preset-manager':
+            return (
+              <PresetManager
+                key={key}
+                config={localConfig}
+                onLoadConfig={setLocalConfig}
+                presets={presets}
+                onSavePreset={savePreset}
+                onRemovePreset={removePreset}
+              />
+            );
+          case 'theme-manager':
+            return <ThemeController key={key} />;
+          case 'fetch-models':
+            return (
               <button
-                key={idx}
-                className={classNames({
-                  'btn btn-ghost justify-start font-normal w-44 mb-1': true,
-                  'btn-active': tabIdx === idx,
-                })}
-                onClick={() => setTabIdx(idx)}
-                dir="auto"
+                key={key}
+                className="btn"
+                onClick={() =>
+                  fetchModels(localConfig).then((models) =>
+                    setLocalModels(models)
+                  )
+                }
               >
-                {tab.title}
+                <ArrowPathIcon className={ICON_CLASSNAME} />
+                Fetch Models
               </button>
-            ))}
-          </div>
+            );
+          default:
+            if (field.component === 'delimeter') {
+              return <DelimeterComponent key={key} />;
+            }
+
+            switch (typeof field.component) {
+              case 'string':
+              case 'number':
+              case 'bigint':
+              case 'boolean':
+              case 'symbol':
+                return (
+                  <div key={key} className="mb-2">
+                    {field.component}
+                  </div>
+                );
+              default:
+                return (
+                  <div key={key} className="mb-2">
+                    {React.createElement(field.component, {
+                      value: localConfig[field.key],
+                      onChange: (value: string | boolean) =>
+                        onChange(field.key as ConfigurationKey)(value),
+                    })}
+                  </div>
+                );
+            }
+        }
+      case SettingInputType.SECTION:
+        return (
+          <SettingsSectionLabel key={key}>{field.label}</SettingsSectionLabel>
+        );
+      default:
+        return null;
+    }
+  };
 
-          {/* Left panel, showing sections - Mobile version */}
-          {/* This menu is skipped on a11y, otherwise it's repeated the desktop version */}
-          <div
-            className="md:hidden flex flex-row gap-2 mb-4 px-4"
-            aria-disabled={true}
-          >
-            <Dropdown
-              className="bg-base-200 w-full border-1 border-base-content/10 rounded-lg shadow-xs cursor-pointer p-2"
-              entity="tab"
-              options={settingTabs.map((tab, idx) => ({
-                label: tab.title,
-                value: idx,
-              }))}
-              currentValue={settingTabs[tabIdx].title}
-              renderOption={(option) => <span>{option.label}</span>}
-              isSelected={(option) => tabIdx === option.value}
-              onSelect={(option) => setTabIdx(option.value as number)}
-            />
-          </div>
+  return (
+    <div className="flex flex-col h-full py-4">
+      <div className="grow flex flex-col md:flex-row">
+        {/* Left panel, showing sections - Desktop version */}
+        <div
+          className="hidden md:flex flex-col items-stretch px-4 border-r-2 border-base-200"
+          role="complementary"
+          aria-description="Settings sections"
+          tabIndex={0}
+        >
+          {settingTabs.map((tab, idx) => (
+            <button
+              key={idx}
+              className={classNames({
+                'btn btn-ghost justify-start font-normal w-44 mb-1': true,
+                'btn-active': tabIdx === idx,
+              })}
+              onClick={() => setTabIdx(idx)}
+              dir="auto"
+            >
+              {tab.title}
+            </button>
+          ))}
+        </div>
 
-          {/* Right panel, showing setting fields */}
-          <div className="grow overflow-y-auto px-2 sm:px-4">
-            {settingTabs[tabIdx].fields.map((field, idx) => {
-              const key = `${tabIdx}-${idx}`;
-              switch (field.type) {
-                case SettingInputType.SHORT_INPUT:
-                  return (
-                    <SettingsModalShortInput
-                      key={key}
-                      configKey={field.key}
-                      field={field}
-                      value={localConfig[field.key] as string | number}
-                      onChange={onChange(field.key)}
-                    />
-                  );
-                case SettingInputType.RANGE_INPUT:
-                  return (
-                    <SettingsModalRangeInput
-                      key={key}
-                      configKey={field.key}
-                      field={field}
-                      min={field.min as number}
-                      max={field.max as number}
-                      step={field.step as number}
-                      value={localConfig[field.key] as number}
-                      onChange={onChange(field.key)}
-                    />
-                  );
-                case SettingInputType.LONG_INPUT:
-                  return (
-                    <SettingsModalLongInput
-                      key={key}
-                      configKey={field.key}
-                      field={field}
-                      value={String(localConfig[field.key])}
-                      onChange={onChange(field.key)}
-                    />
-                  );
-                case SettingInputType.CHECKBOX:
-                  return (
-                    <SettingsModalCheckbox
-                      key={key}
-                      configKey={field.key}
-                      field={field}
-                      value={!!localConfig[field.key]}
-                      onChange={onChange(field.key)}
-                    />
-                  );
-                case SettingInputType.DROPDOWN:
-                  return (
-                    <SettingsModalDropdown
-                      key={key}
-                      configKey={field.key}
-                      field={field as SettingFieldInput}
-                      options={(field as SettingFieldDropdown).options}
-                      filterable={(field as SettingFieldDropdown).filterable}
-                      value={String(localConfig[field.key])}
-                      onChange={onChange(field.key)}
-                    />
-                  );
-                case SettingInputType.CUSTOM:
-                  switch (field.key) {
-                    case 'import-export':
-                      return (
-                        <ImportExportComponent key={key} onClose={onClose} />
-                      );
-                    case 'preset-manager':
-                      return (
-                        <PresetManager
-                          key={key}
-                          config={localConfig}
-                          onLoadConfig={setLocalConfig}
-                          presets={presets}
-                          onSavePreset={savePreset}
-                          onRemovePreset={removePreset}
-                        />
-                      );
-                    case 'theme-manager':
-                      return <ThemeController key={key} />;
-                    case 'fetch-models':
-                      return (
-                        <button
-                          key={key}
-                          className="btn"
-                          onClick={() =>
-                            fetchModels(localConfig).then((models) =>
-                              setLocalModels(models)
-                            )
-                          }
-                        >
-                          <ArrowPathIcon className={ICON_CLASSNAME} />
-                          Fetch Models
-                        </button>
-                      );
-                    default:
-                      if (field.component === 'delimeter') {
-                        return <DelimeterComponent key={key} />;
-                      }
-
-                      switch (typeof field.component) {
-                        case 'string':
-                        case 'number':
-                        case 'bigint':
-                        case 'boolean':
-                        case 'symbol':
-                          return (
-                            <div key={key} className="mb-2">
-                              {field.component}
-                            </div>
-                          );
-                        default:
-                          return (
-                            <div key={key} className="mb-2">
-                              {React.createElement(field.component, {
-                                value: localConfig[field.key],
-                                onChange: (value: string | boolean) =>
-                                  onChange(field.key as ConfigurationKey)(
-                                    value
-                                  ),
-                              })}
-                            </div>
-                          );
-                      }
-                  }
-                case SettingInputType.SECTION:
-                  return (
-                    <SettingsSectionLabel key={key}>
-                      {field.label}
-                    </SettingsSectionLabel>
-                  );
-                default:
-                  return null;
-              }
-            })}
-
-            <p className="opacity-40 mb-6 text-sm mt-8">
-              App Version: {import.meta.env.PACKAGE_VERSION}
-              <br />
-              Settings are saved in browser's localStorage
-            </p>
-          </div>
+        {/* Left panel, showing sections - Mobile version */}
+        {/* This menu is skipped on a11y, otherwise it's repeated the desktop version */}
+        <div
+          className="md:hidden flex flex-row gap-2 mb-4 px-4"
+          aria-disabled={true}
+        >
+          <Dropdown
+            className="bg-base-200 w-full border-1 border-base-content/10 rounded-lg shadow-xs cursor-pointer p-2"
+            entity="tab"
+            options={settingTabs.map((tab, idx) => ({
+              label: tab.title,
+              value: idx,
+            }))}
+            currentValue={settingTabs[tabIdx].title}
+            renderOption={(option) => <span>{option.label}</span>}
+            isSelected={(option) => tabIdx === option.value}
+            onSelect={(option) => setTabIdx(option.value as number)}
+          />
         </div>
 
-        <div className="modal-action">
-          <button className="btn" onClick={resetConfig}>
-            Reset to default
-          </button>
-          <button className="btn" onClick={onClose}>
-            Close
-          </button>
-          <button className="btn btn-neutral" onClick={handleSave}>
-            Save
-          </button>
+        {/* Right panel, showing setting fields */}
+        <div className="grow max-h-[calc(100vh-13rem)] md:max-h-[calc(100vh-10rem)] overflow-y-auto px-6 sm:px-4">
+          {settingTabs[tabIdx].fields.map(mapFieldToElement)}
+
+          <p className="opacity-40 text-sm mt-8">
+            App Version: {import.meta.env.PACKAGE_VERSION}
+            <br />
+            Settings are saved in browser's localStorage
+          </p>
         </div>
       </div>
-    </dialog>
+
+      <div className="sticky bottom-4 flex gap-2 max-md:justify-center mt-4">
+        <div className="hidden md:block w-54 h-10" />
+        <button className="btn btn-neutral" onClick={handleSave}>
+          {lang.settings.actionButtons.saveBtnLabel}
+        </button>
+        <button className="btn" onClick={onClose}>
+          {lang.settings.actionButtons.cancelBtnLabel}
+        </button>
+        <button className="btn" onClick={resetConfig}>
+          {lang.settings.actionButtons.resetBtnLabel}
+        </button>
+      </div>
+    </div>
   );
 }
 
@@ -872,8 +859,8 @@ const SettingsModalLongInput: React.FC<BaseInputProps & { value: string }> = ({
   onChange,
 }) => {
   return (
-    <label className="form-control mb-3">
-      <div className="label inline text-sm">{field.label || configKey}</div>
+    <label className="form-control flex flex-col justify-center max-w-80 mb-3">
+      <div className="text-sm opacity-60 mb-1">{field.label || configKey}</div>
       <textarea
         className="textarea textarea-bordered h-24"
         placeholder={`Default: ${CONFIG_DEFAULT[configKey] || 'none'}`}
@@ -883,7 +870,7 @@ const SettingsModalLongInput: React.FC<BaseInputProps & { value: string }> = ({
       />
       {field.note && (
         <div
-          className="text-xs opacity-75 max-w-80 mt-1"
+          className="text-xs opacity-75 mt-1"
           dangerouslySetInnerHTML={{ __html: field.note }}
         />
       )}