diff --git a/src/components/SettingDialog.tsx b/src/components/SettingDialog.tsx
index f02dbd6..88be876 100644
--- a/src/components/SettingDialog.tsx
+++ b/src/components/SettingDialog.tsx
@@ -1,79 +1,111 @@
 import {
   BeakerIcon,
+  ChatBubbleLeftEllipsisIcon,
+  ChatBubbleLeftRightIcon,
   ChatBubbleOvalLeftEllipsisIcon,
+  CircleStackIcon,
   Cog6ToothIcon,
+  CogIcon,
+  CpuChipIcon,
   FunnelIcon,
   HandRaisedIcon,
+  RocketLaunchIcon,
   SquaresPlusIcon,
 } from '@heroicons/react/24/outline';
-import { useState } from 'react';
-import { CONFIG_DEFAULT, CONFIG_INFO, isDev } from '../config';
+import React, { useMemo, useState } from 'react';
+import { CONFIG_DEFAULT, isDev } from '../config';
+import * as messages from '../lang/en.json';
 import { useAppContext } from '../utils/app.context';
 import { OpenInNewTab } from '../utils/common';
 import { classNames, isBoolean, isNumeric, isString } from '../utils/misc';
 import StorageUtils from '../utils/storage';
+import { Configuration } from '../utils/types';
 import { useModals } from './ModalProvider';
 
-type SettKey = keyof typeof CONFIG_DEFAULT;
+// --- Type Definitions ---
 
-const BASIC_KEYS: SettKey[] = [
-  'temperature',
-  'top_k',
-  'top_p',
-  'min_p',
-  'max_tokens',
-];
-const SAMPLER_KEYS: SettKey[] = [
-  'dynatemp_range',
-  'dynatemp_exponent',
-  'typical_p',
-  'xtc_probability',
-  'xtc_threshold',
-];
-const PENALTY_KEYS: SettKey[] = [
-  'repeat_last_n',
-  'repeat_penalty',
-  'presence_penalty',
-  'frequency_penalty',
-  'dry_multiplier',
-  'dry_base',
-  'dry_allowed_length',
-  'dry_penalty_last_n',
-];
+type ConfigurationKey = keyof Configuration;
 
 enum SettingInputType {
   SHORT_INPUT,
   LONG_INPUT,
   CHECKBOX,
   CUSTOM,
+  SECTION,
+  DELIMETER,
 }
 
+type SettingFieldInputType = Exclude<
+  SettingInputType,
+  | SettingInputType.CUSTOM
+  | SettingInputType.SECTION
+  | SettingInputType.DELIMETER
+>;
+
 interface SettingFieldInput {
-  type: Exclude<SettingInputType, SettingInputType.CUSTOM>;
+  type: SettingFieldInputType;
   label: string | React.ReactElement;
-  help?: string | React.ReactElement;
-  key: SettKey;
+  note?: string | React.ReactElement;
+  key: ConfigurationKey;
+  disabled?: boolean;
 }
 
 interface SettingFieldCustom {
   type: SettingInputType.CUSTOM;
-  key: SettKey;
+  key: ConfigurationKey | 'custom';
   component:
     | string
     | React.FC<{
         value: string | boolean | number;
-        onChange: (value: string) => void;
+        onChange: (value: string | boolean) => void;
       }>;
 }
 
 interface SettingSection {
+  type: SettingInputType.SECTION;
+  label: string | React.ReactElement;
+}
+
+interface SettingDelimeter {
+  type: SettingInputType.DELIMETER;
+}
+
+type SettingField =
+  | SettingFieldInput
+  | SettingFieldCustom
+  | SettingSection
+  | SettingDelimeter;
+
+interface SettingTab {
   title: React.ReactElement;
-  fields: (SettingFieldInput | SettingFieldCustom)[];
+  fields: SettingField[];
 }
 
+// --- Helper Functions ---
+
 const ICON_CLASSNAME = 'w-4 h-4 mr-1 inline';
+const TITLE_ICON_CLASSNAME = 'w-4 h-4 mr-1 inline';
+
+const toInput = (
+  type: SettingFieldInputType,
+  key: ConfigurationKey,
+  disabled?: boolean
+): SettingFieldInput => {
+  return {
+    type,
+    ...(messages.settings.parameters[key] as Omit<
+      Omit<SettingFieldInput, 'type'>,
+      'key'
+    >),
+    disabled,
+    key,
+  };
+};
+
+// --- Setting Tabs Configuration ---
 
-const SETTING_SECTIONS: SettingSection[] = [
+const getSettingTabsConfiguration = (config: Configuration): SettingTab[] => [
+  /* General */
   {
     title: (
       <>
@@ -82,103 +114,73 @@ const SETTING_SECTIONS: SettingSection[] = [
       </>
     ),
     fields: [
-      {
-        type: SettingInputType.SHORT_INPUT,
-        label: 'Base URL',
-        key: 'baseUrl',
-      },
-      {
-        type: SettingInputType.SHORT_INPUT,
-        label: 'API Key',
-        key: 'apiKey',
-      },
-      {
-        type: SettingInputType.LONG_INPUT,
-        label: 'System Message (will be disabled if left empty)',
-        key: 'systemMessage',
-      },
-      ...BASIC_KEYS.map(
-        (key) =>
-          ({
-            type: SettingInputType.SHORT_INPUT,
-            label: key,
-            key,
-          }) as SettingFieldInput
+      ...['baseUrl', 'apiKey'].map((key) =>
+        toInput(SettingInputType.SHORT_INPUT, key as ConfigurationKey)
       ),
-      {
-        type: SettingInputType.SHORT_INPUT,
-        label: 'Paste length to file',
-        key: 'pasteLongTextToFileLen',
-      },
-      {
-        type: SettingInputType.CHECKBOX,
-        label: 'Parse PDF as image instead of text',
-        key: 'pdfAsImage',
-      },
+      toInput(SettingInputType.LONG_INPUT, 'systemMessage'),
     ],
   },
+
+  /* Conversations */
   {
     title: (
       <>
-        <FunnelIcon className={ICON_CLASSNAME} />
-        Samplers
+        <ChatBubbleLeftRightIcon className={ICON_CLASSNAME} />
+        Conversations
       </>
     ),
     fields: [
       {
-        type: SettingInputType.SHORT_INPUT,
-        label: 'Samplers queue',
-        key: 'samplers',
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <ChatBubbleLeftEllipsisIcon className={TITLE_ICON_CLASSNAME} />
+            Chat
+          </>
+        ),
       },
-      ...SAMPLER_KEYS.map(
-        (key) =>
-          ({
-            type: SettingInputType.SHORT_INPUT,
-            label: key,
-            key,
-          }) as SettingFieldInput
-      ),
-    ],
-  },
-  {
-    title: (
-      <>
-        <HandRaisedIcon className={ICON_CLASSNAME} />
-        Penalties
-      </>
-    ),
-    fields: PENALTY_KEYS.map((key) => ({
-      type: SettingInputType.SHORT_INPUT,
-      label: key,
-      key,
-    })),
-  },
-  {
-    title: (
-      <>
-        <ChatBubbleOvalLeftEllipsisIcon className={ICON_CLASSNAME} />
-        Reasoning
-      </>
-    ),
-    fields: [
+      toInput(SettingInputType.SHORT_INPUT, 'pasteLongTextToFileLen'),
+      toInput(SettingInputType.CHECKBOX, 'pdfAsImage'),
+
+      /* Performance */
       {
-        type: SettingInputType.CHECKBOX,
-        label: 'Expand thought process by default when generating messages',
-        key: 'showThoughtInProgress',
+        type: SettingInputType.DELIMETER,
       },
       {
-        type: SettingInputType.CHECKBOX,
-        label:
-          'Exclude thought process when sending requests to API (Recommended for DeepSeek-R1)',
-        key: 'excludeThoughtOnReq',
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <RocketLaunchIcon className={ICON_CLASSNAME} />
+            Performance
+          </>
+        ),
+      },
+      toInput(SettingInputType.CHECKBOX, 'showTokensPerSecond'),
+
+      /* Reasoning */
+      {
+        type: SettingInputType.DELIMETER,
       },
+      {
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <ChatBubbleOvalLeftEllipsisIcon className={ICON_CLASSNAME} />
+            Reasoning
+          </>
+        ),
+      },
+      toInput(SettingInputType.CHECKBOX, 'showThoughtInProgress'),
+      toInput(SettingInputType.CHECKBOX, 'excludeThoughtOnReq'),
     ],
   },
+
+  /* Import/Export */
   {
     title: (
       <>
-        <SquaresPlusIcon className={ICON_CLASSNAME} />
-        Advanced
+        <CircleStackIcon className={ICON_CLASSNAME} />
+        Import/Export
       </>
     ),
     fields: [
@@ -187,11 +189,16 @@ const SETTING_SECTIONS: SettingSection[] = [
         key: 'custom', // dummy key, won't be used
         component: () => {
           const debugImportDemoConv = async () => {
-            const res = await fetch('/demo-conversation.json');
-            const demoConv = await res.json();
-            StorageUtils.remove(demoConv.id);
-            for (const msg of demoConv.messages) {
-              StorageUtils.appendMsg(demoConv.id, msg);
+            try {
+              const res = await fetch('/demo-conversation.json');
+              if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
+              const demoConv = await res.json();
+              StorageUtils.remove(demoConv.id);
+              for (const msg of demoConv.messages) {
+                StorageUtils.appendMsg(demoConv.id, msg);
+              }
+            } catch (error) {
+              console.error('Failed to import demo conversation:', error);
             }
           };
           return (
@@ -201,10 +208,109 @@ const SETTING_SECTIONS: SettingSection[] = [
           );
         },
       },
+    ],
+  },
+
+  /* Advanced */
+  {
+    title: (
+      <>
+        <SquaresPlusIcon className={ICON_CLASSNAME} />
+        Advanced
+      </>
+    ),
+    fields: [
+      /* Generation */
       {
-        type: SettingInputType.CHECKBOX,
-        label: 'Show tokens per second',
-        key: 'showTokensPerSecond',
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <CogIcon className={TITLE_ICON_CLASSNAME} />
+            Generation
+          </>
+        ),
+      },
+      toInput(SettingInputType.CHECKBOX, 'overrideGenerationOptions'),
+      ...['temperature', 'top_k', 'top_p', 'min_p', 'max_tokens'].map((key) =>
+        toInput(
+          SettingInputType.SHORT_INPUT,
+          key as ConfigurationKey,
+          !config['overrideGenerationOptions']
+        )
+      ),
+
+      /* Samplers */
+      {
+        type: SettingInputType.DELIMETER,
+      },
+      {
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <FunnelIcon className={ICON_CLASSNAME} />
+            Samplers
+          </>
+        ),
+      },
+      toInput(SettingInputType.CHECKBOX, 'overrideSamplersOptions'),
+      ...[
+        'samplers',
+        'dynatemp_range',
+        'dynatemp_exponent',
+        'typical_p',
+        'xtc_probability',
+        'xtc_threshold',
+      ].map((key) =>
+        toInput(
+          SettingInputType.SHORT_INPUT,
+          key as ConfigurationKey,
+          !config['overrideSamplersOptions']
+        )
+      ),
+
+      /* Penalties */
+      {
+        type: SettingInputType.DELIMETER,
+      },
+      {
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <HandRaisedIcon className={ICON_CLASSNAME} />
+            Penalties
+          </>
+        ),
+      },
+      toInput(SettingInputType.CHECKBOX, 'overridePenaltyOptions'),
+      ...[
+        'repeat_last_n',
+        'repeat_penalty',
+        'presence_penalty',
+        'frequency_penalty',
+        'dry_multiplier',
+        'dry_base',
+        'dry_allowed_length',
+        'dry_penalty_last_n',
+      ].map((key) =>
+        toInput(
+          SettingInputType.SHORT_INPUT,
+          key as ConfigurationKey,
+          !config['overridePenaltyOptions']
+        )
+      ),
+
+      /* Custom */
+      {
+        type: SettingInputType.DELIMETER,
+      },
+      {
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <CpuChipIcon className={TITLE_ICON_CLASSNAME} />
+            Custom
+          </>
+        ),
       },
       {
         type: SettingInputType.LONG_INPUT,
@@ -221,6 +327,8 @@ const SETTING_SECTIONS: SettingSection[] = [
       },
     ],
   },
+
+  /* Experimental */
   {
     title: (
       <>
@@ -281,47 +389,51 @@ export default function SettingDialog({
   onClose: () => void;
 }) {
   const { config, saveConfig } = useAppContext();
-  const [sectionIdx, setSectionIdx] = useState(0);
+  const [tabIdx, setTabIdx] = useState(0);
 
   // clone the config object to prevent direct mutation
-  const [localConfig, setLocalConfig] = useState<typeof CONFIG_DEFAULT>(
+  const [localConfig, setLocalConfig] = useState<Configuration>(
     JSON.parse(JSON.stringify(config))
   );
+  const settingTabs = useMemo<SettingTab[]>(
+    () => getSettingTabsConfiguration(localConfig),
+    [localConfig]
+  );
+
   const { showConfirm, showAlert } = useModals();
 
   const resetConfig = async () => {
     if (await showConfirm('Are you sure you want to reset all settings?')) {
-      setLocalConfig(CONFIG_DEFAULT);
+      setLocalConfig({ ...CONFIG_DEFAULT } as Configuration);
     }
   };
 
   const handleSave = async () => {
     // copy the local config to prevent direct mutation
-    const newConfig: typeof CONFIG_DEFAULT = JSON.parse(
-      JSON.stringify(localConfig)
-    );
+    const newConfig: Configuration = JSON.parse(JSON.stringify(localConfig));
     // validate the config
     for (const key in newConfig) {
-      const value = newConfig[key as SettKey];
-      const mustBeBoolean = isBoolean(CONFIG_DEFAULT[key as SettKey]);
-      const mustBeString = isString(CONFIG_DEFAULT[key as SettKey]);
-      const mustBeNumeric = isNumeric(CONFIG_DEFAULT[key as SettKey]);
-      if (mustBeString) {
+      if (!(key in CONFIG_DEFAULT)) continue;
+
+      const typedKey = key as ConfigurationKey;
+      const value = newConfig[typedKey];
+      const defaultValue = CONFIG_DEFAULT[typedKey];
+      if (isString(defaultValue)) {
         if (!isString(value)) {
-          await showAlert(`Value for ${key} must be string`);
+          await showAlert(`Value for ${key} must be a string`);
           return;
         }
-      } else if (mustBeNumeric) {
-        const trimmedValue = value.toString().trim();
+      } else if (isNumeric(defaultValue)) {
+        const trimmedValue = String(value).trim();
         const numVal = Number(trimmedValue);
-        if (isNaN(numVal) || !isNumeric(numVal) || trimmedValue.length === 0) {
+        if (isNaN(numVal) || !isNumeric(numVal) || trimmedValue === '') {
           await showAlert(`Value for ${key} must be numeric`);
           return;
         }
         // force conversion to number
         // @ts-expect-error this is safe
-        newConfig[key] = numVal;
-      } else if (mustBeBoolean) {
+        newConfig[typedKey] = numVal as Configuration[ConfigurationKey];
+      } else if (isBoolean(defaultValue)) {
         if (!isBoolean(value)) {
           await showAlert(`Value for ${key} must be boolean`);
           return;
@@ -335,9 +447,12 @@ export default function SettingDialog({
     onClose();
   };
 
-  const onChange = (key: SettKey) => (value: string | boolean) => {
+  const onChange = (key: ConfigurationKey) => (value: string | boolean) => {
     // note: we do not perform validation here, because we may get incomplete value as user is still typing it
-    setLocalConfig({ ...localConfig, [key]: value });
+    setLocalConfig((prevConfig) => ({
+      ...prevConfig,
+      [key]: value,
+    }));
   };
 
   return (
@@ -355,17 +470,17 @@ export default function SettingDialog({
             aria-description="Settings sections"
             tabIndex={0}
           >
-            {SETTING_SECTIONS.map((section, idx) => (
+            {settingTabs.map((tab, idx) => (
               <button
                 key={idx}
                 className={classNames({
                   'btn btn-ghost justify-start font-normal w-44 mb-1': true,
-                  'btn-active': sectionIdx === idx,
+                  'btn-active': tabIdx === idx,
                 })}
-                onClick={() => setSectionIdx(idx)}
+                onClick={() => setTabIdx(idx)}
                 dir="auto"
               >
-                {section.title}
+                {tab.title}
               </button>
             ))}
           </div>
@@ -378,21 +493,22 @@ export default function SettingDialog({
           >
             <details className="dropdown">
               <summary className="btn bt-sm w-full m-1">
-                {SETTING_SECTIONS[sectionIdx].title}
+                {settingTabs[tabIdx].title}
               </summary>
               <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
-                {SETTING_SECTIONS.map((section, idx) => (
-                  <div
-                    key={idx}
-                    className={classNames({
-                      'btn btn-ghost justify-start font-normal': true,
-                      'btn-active': sectionIdx === idx,
-                    })}
-                    onClick={() => setSectionIdx(idx)}
-                    dir="auto"
-                  >
-                    {section.title}
-                  </div>
+                {settingTabs.map((tab, idx) => (
+                  <li key={idx}>
+                    <button
+                      className={classNames({
+                        'btn btn-ghost justify-start font-normal': true,
+                        'btn-active': tabIdx === idx,
+                      })}
+                      onClick={() => setTabIdx(idx)}
+                      dir="auto"
+                    >
+                      {tab.title}
+                    </button>
+                  </li>
                 ))}
               </ul>
             </details>
@@ -400,49 +516,61 @@ export default function SettingDialog({
 
           {/* Right panel, showing setting fields */}
           <div className="grow overflow-y-auto px-4">
-            {SETTING_SECTIONS[sectionIdx].fields.map((field, idx) => {
-              const key = `${sectionIdx}-${idx}`;
-              if (field.type === SettingInputType.SHORT_INPUT) {
-                return (
-                  <SettingsModalShortInput
-                    key={key}
-                    configKey={field.key}
-                    value={localConfig[field.key]}
-                    onChange={onChange(field.key)}
-                    label={field.label as string}
-                  />
-                );
-              } else if (field.type === SettingInputType.LONG_INPUT) {
-                return (
-                  <SettingsModalLongInput
-                    key={key}
-                    configKey={field.key}
-                    value={localConfig[field.key].toString()}
-                    onChange={onChange(field.key)}
-                    label={field.label as string}
-                  />
-                );
-              } else if (field.type === SettingInputType.CHECKBOX) {
-                return (
-                  <SettingsModalCheckbox
-                    key={key}
-                    configKey={field.key}
-                    value={!!localConfig[field.key]}
-                    onChange={onChange(field.key)}
-                    label={field.label as string}
-                  />
-                );
-              } else if (field.type === SettingInputType.CUSTOM) {
-                return (
-                  <div key={key} className="mb-2">
-                    {typeof field.component === 'string'
-                      ? field.component
-                      : field.component({
-                          value: localConfig[field.key],
-                          onChange: onChange(field.key),
-                        })}
-                  </div>
-                );
+            {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.LONG_INPUT:
+                  return (
+                    <SettingsModalLongInput
+                      key={key}
+                      configKey={field.key}
+                      field={field}
+                      value={String(localConfig[field.key])}
+                      onChange={(value) => onChange(field.key)(value)}
+                    />
+                  );
+                case SettingInputType.CHECKBOX:
+                  return (
+                    <SettingsModalCheckbox
+                      key={key}
+                      configKey={field.key}
+                      field={field}
+                      value={!!localConfig[field.key]}
+                      onChange={(value) => onChange(field.key)(value)}
+                    />
+                  );
+                case SettingInputType.CUSTOM:
+                  return (
+                    <div key={key} className="mb-2">
+                      {typeof field.component === 'string'
+                        ? field.component
+                        : React.createElement(field.component, {
+                            value: localConfig[field.key],
+                            onChange: (value: string | boolean) =>
+                              onChange(field.key)(value),
+                          })}
+                    </div>
+                  );
+                case SettingInputType.SECTION:
+                  return (
+                    <div key={key} className="pb-2">
+                      <h4>{field.label}</h4>
+                    </div>
+                  );
+                case SettingInputType.DELIMETER:
+                  return <div key={key} className="pb-3" />;
+                default:
+                  return null;
               }
             })}
 
@@ -468,56 +596,52 @@ export default function SettingDialog({
   );
 }
 
-function SettingsModalLongInput({
+// --- Helper Input Components ---
+
+interface BaseInputProps {
+  configKey: ConfigurationKey | 'custom';
+  field: SettingFieldInput;
+  onChange: (value: string | boolean) => void;
+}
+
+const SettingsModalLongInput: React.FC<BaseInputProps & { value: string }> = ({
   configKey,
+  field,
   value,
   onChange,
-  label,
-}: {
-  configKey: SettKey;
-  value: string;
-  onChange: (value: string) => void;
-  label?: string;
-}) {
+}) => {
   return (
     <label className="form-control">
-      <div className="label inline text-sm">{label || configKey}</div>
+      <div className="label inline text-sm">{field.label || configKey}</div>
       <textarea
         className="textarea textarea-bordered h-24 mb-2"
         placeholder={`Default: ${CONFIG_DEFAULT[configKey] || 'none'}`}
         value={value}
         onChange={(e) => onChange(e.target.value)}
+        disabled={field.disabled}
       />
+      {field.note && (
+        <div className="text-xs opacity-75 mt-1">{field.note}</div>
+      )}
     </label>
   );
-}
-
-function SettingsModalShortInput({
-  configKey,
-  value,
-  onChange,
-  label,
-}: {
-  configKey: SettKey;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any;
-  onChange: (value: string) => void;
-  label?: string;
-}) {
-  const helpMsg = CONFIG_INFO[configKey];
+};
 
+const SettingsModalShortInput: React.FC<
+  BaseInputProps & { value: string | number }
+> = ({ configKey, field, value, onChange }) => {
   return (
     <>
       {/* on mobile, we simply show the help message here */}
-      {helpMsg && (
+      {field.note && (
         <div className="block mb-1 opacity-75">
-          <p className="text-xs">{helpMsg}</p>
+          <p className="text-xs">{field.note}</p>
         </div>
       )}
       <label className="input input-bordered join-item grow flex items-center gap-2 mb-2">
         <div className="dropdown dropdown-hover">
           <div tabIndex={0} role="button" className="font-bold hidden md:block">
-            {label || configKey}
+            {field.label || configKey}
           </div>
         </div>
         <input
@@ -526,32 +650,37 @@ function SettingsModalShortInput({
           placeholder={`Default: ${CONFIG_DEFAULT[configKey] || 'none'}`}
           value={value}
           onChange={(e) => onChange(e.target.value)}
+          disabled={field.disabled}
         />
       </label>
     </>
   );
-}
+};
 
-function SettingsModalCheckbox({
+const SettingsModalCheckbox: React.FC<BaseInputProps & { value: boolean }> = ({
   configKey,
+  field,
   value,
   onChange,
-  label,
-}: {
-  configKey: SettKey;
-  value: boolean;
-  onChange: (value: boolean) => void;
-  label: string;
-}) {
+}) => {
   return (
-    <div className="flex flex-row items-center mb-2">
-      <input
-        type="checkbox"
-        className="toggle"
-        checked={value}
-        onChange={(e) => onChange(e.target.checked)}
-      />
-      <span className="ml-4">{label || configKey}</span>
-    </div>
+    <>
+      {field.note && (
+        <div className="block mb-1 opacity-75">
+          <p className="text-xs">{field.note}</p>
+        </div>
+      )}
+
+      <div className="flex flex-row items-center mb-2">
+        <input
+          type="checkbox"
+          className="toggle"
+          checked={value}
+          onChange={(e) => onChange(e.target.checked)}
+          disabled={field.disabled}
+        />
+        <span className="ml-2">{field.label || configKey}</span>
+      </div>
+    </>
   );
-}
+};
diff --git a/src/config.ts b/src/config.ts
index a47b513..00d7ab4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,5 @@
 import daisyuiThemes from 'daisyui/theme/object';
-import { isNumeric } from './utils/misc';
+import { Configuration } from './utils/types';
 
 export const isDev = import.meta.env.MODE === 'development';
 
@@ -8,28 +8,41 @@ const baseUrl = new URL('.', document.baseURI).href
   .toString()
   .replace(/\/$/, '');
 
-export const CONFIG_DEFAULT = {
+export const CONFIG_DEFAULT: Configuration = {
   // Note: in order not to introduce breaking changes, please keep the same data type (number, string, etc) if you want to change the default value. Do not use null or undefined for default value.
   // Do not use nested objects, keep it single level. Prefix the key if you need to group them.
   baseUrl: baseUrl,
   apiKey: '',
   systemMessage: '',
+
+  /* conversations */
+  pasteLongTextToFileLen: 10000,
+  pdfAsImage: false,
   showTokensPerSecond: false,
   showThoughtInProgress: false,
   excludeThoughtOnReq: true,
-  pasteLongTextToFileLen: 2500,
-  pdfAsImage: false,
-  // make sure these default values are in sync with `common.h`
-  samplers: 'edkypmxt',
+
+  /* advanced */
+  /* generation */
+  overrideGenerationOptions: false,
   temperature: 0.8,
-  dynatemp_range: 0.0,
-  dynatemp_exponent: 1.0,
   top_k: 40,
   top_p: 0.95,
   min_p: 0.05,
+  max_tokens: -1,
+
+  /* samplers */
+  overrideSamplersOptions: false,
+  // make sure these default values are in sync with `common.h`
+  samplers: 'edkypmxt',
+  dynatemp_range: 0.0,
+  dynatemp_exponent: 1.0,
+  typical_p: 1.0,
   xtc_probability: 0.0,
   xtc_threshold: 0.1,
-  typical_p: 1.0,
+
+  /* penalty */
+  overridePenaltyOptions: false,
   repeat_last_n: 64,
   repeat_penalty: 1.0,
   presence_penalty: 0.0,
@@ -38,58 +51,13 @@ export const CONFIG_DEFAULT = {
   dry_base: 1.75,
   dry_allowed_length: 2,
   dry_penalty_last_n: -1,
-  max_tokens: -1,
+
   custom: '', // custom json-stringified object
-  // experimental features
+
+  /* experimental */
   pyIntepreterEnabled: false,
 };
-export const CONFIG_INFO: Record<string, string> = {
-  baseUrl: 'Set the Base URL if you are using standalone server.',
-  apiKey: 'Set the API Key if you are using --api-key option for the server.',
-  systemMessage: 'The starting message that defines how model should behave.',
-  pasteLongTextToFileLen:
-    'On pasting long text, it will be converted to a file. You can control the file length by setting the value of this parameter. Value 0 means disable.',
-  samplers:
-    'The order at which samplers are applied, in simplified way. Default is "dkypmxt": dry->top_k->typ_p->top_p->min_p->xtc->temperature',
-  temperature:
-    'Controls the randomness of the generated text by affecting the probability distribution of the output tokens. Higher = more random, lower = more focused.',
-  dynatemp_range:
-    'Addon for the temperature sampler. The added value to the range of dynamic temperature, which adjusts probabilities by entropy of tokens.',
-  dynatemp_exponent:
-    'Addon for the temperature sampler. Smoothes out the probability redistribution based on the most probable token.',
-  top_k: 'Keeps only k top tokens.',
-  top_p:
-    'Limits tokens to those that together have a cumulative probability of at least p',
-  min_p:
-    'Limits tokens based on the minimum probability for a token to be considered, relative to the probability of the most likely token.',
-  xtc_probability:
-    'XTC sampler cuts out top tokens; this parameter controls the chance of cutting tokens at all. 0 disables XTC.',
-  xtc_threshold:
-    'XTC sampler cuts out top tokens; this parameter controls the token probability that is required to cut that token.',
-  typical_p:
-    'Sorts and limits tokens based on the difference between log-probability and entropy.',
-  repeat_last_n: 'Last n tokens to consider for penalizing repetition',
-  repeat_penalty:
-    'Controls the repetition of token sequences in the generated text',
-  presence_penalty:
-    'Limits tokens based on whether they appear in the output or not.',
-  frequency_penalty:
-    'Limits tokens based on how often they appear in the output.',
-  dry_multiplier:
-    'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the DRY sampling multiplier.',
-  dry_base:
-    'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the DRY sampling base value.',
-  dry_allowed_length:
-    'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the allowed length for DRY sampling.',
-  dry_penalty_last_n:
-    'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets DRY penalty for the last n tokens.',
-  max_tokens: 'The maximum number of token per output.',
-  custom: '', // custom json-stringified object
-};
-// config keys having numeric value (i.e. temperature, top_k, top_p, etc)
-export const CONFIG_NUMERIC_KEYS = Object.entries(CONFIG_DEFAULT)
-  .filter((e) => isNumeric(e[1]))
-  .map((e) => e[0]);
+
 // list of themes supported by daisyui
 export const THEMES = ['light', 'dark']
   // make sure light & dark are always at the beginning
diff --git a/src/lang/en.json b/src/lang/en.json
new file mode 100644
index 0000000..b8761b6
--- /dev/null
+++ b/src/lang/en.json
@@ -0,0 +1,134 @@
+{
+  "settings": {
+    "parameters": {
+      "baseUrl": {
+        "label": "Base URL",
+        "note": "Set the Base URL if you are using standalone server."
+      },
+      "apiKey": {
+        "label": "API Key",
+        "note": "Set the API Key if you are using --api-key option for the server."
+      },
+      "systemMessage": {
+        "label": "System Message (will be disabled if left empty)",
+        "note": "The starting message that defines how model should behave."
+      },
+      "pasteLongTextToFileLen": {
+        "label": "On Paste: convert to file if length >",
+        "note": "On pasting long text, it will be converted to a file. You can control the file length by setting the value of this parameter. Set to 0 to disable."
+      },
+      "pdfAsImage": {
+        "label": "Use PDF as image instead of text",
+        "note": "Attach PDF as image instead of text. Supported only with multimodal models with vision support."
+      },
+      "showTokensPerSecond": {
+        "label": "Show performance metrics",
+        "note": "Enable to see processing speed, timings, etc."
+      },
+      "showThoughtInProgress": {
+        "label": "Expand thinking section",
+        "note": "Expand thinking message when generating messages"
+      },
+      "excludeThoughtOnReq": {
+        "label": "Exclude thinking messages on submit",
+        "note": "Exclude thinking messages when sending requests to API (recommended)"
+      },
+      "overrideGenerationOptions": {
+        "label": "Override Generation Options",
+        "note": ""
+      },
+      "temperature": {
+        "label": "",
+        "note": "Controls the randomness of the generated text by affecting the probability distribution of the output tokens. Higher = more random, lower = more focused."
+      },
+      "top_k": {
+        "label": "",
+        "note": "Keeps only k top tokens."
+      },
+      "top_p": {
+        "label": "",
+        "note": "Limits tokens to those that together have a cumulative probability of at least p"
+      },
+      "min_p": {
+        "label": "",
+        "note": "Limits tokens based on the minimum probability for a token to be considered, relative to the probability of the most likely token."
+      },
+      "max_tokens": {
+        "label": "",
+        "note": "The maximum number of token per output."
+      },
+      "overrideSamplersOptions": {
+        "label": "Override Samplers Options",
+        "note": ""
+      },
+      "samplers": {
+        "label": "Samplers queue",
+        "note": "The order at which samplers are applied, in simplified way. Default is \"dkypmxt\": dry->top_k->typ_p->top_p->min_p->xtc->temperature"
+      },
+      "dynatemp_range": {
+        "label": "",
+        "note": "Addon for the temperature sampler. The added value to the range of dynamic temperature, which adjusts probabilities by entropy of tokens."
+      },
+      "dynatemp_exponent": {
+        "label": "",
+        "note": "Addon for the temperature sampler. Smoothes out the probability redistribution based on the most probable token."
+      },
+      "typical_p": {
+        "label": "",
+        "note": "Sorts and limits tokens based on the difference between log-probability and entropy."
+      },
+      "xtc_probability": {
+        "label": "",
+        "note": "XTC sampler cuts out top tokens; this parameter controls the chance of cutting tokens at all. 0 disables XTC."
+      },
+      "xtc_threshold": {
+        "label": "",
+        "note": "XTC sampler cuts out top tokens; this parameter controls the token probability that is required to cut that token."
+      },
+      "overridePenaltyOptions": {
+        "label": "Override Penalty Options",
+        "note": ""
+      },
+      "repeat_last_n": {
+        "label": "",
+        "note": "Last n tokens to consider for penalizing repetition"
+      },
+      "repeat_penalty": {
+        "label": "",
+        "note": "Controls the repetition of token sequences in the generated text"
+      },
+      "presence_penalty": {
+        "label": "",
+        "note": "Limits tokens based on whether they appear in the output or not."
+      },
+      "frequency_penalty": {
+        "label": "",
+        "note": "Limits tokens based on how often they appear in the output."
+      },
+      "dry_multiplier": {
+        "label": "",
+        "note": "DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the DRY sampling multiplier."
+      },
+      "dry_base": {
+        "label": "",
+        "note": "DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the DRY sampling base value."
+      },
+      "dry_allowed_length": {
+        "label": "",
+        "note": "DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the allowed length for DRY sampling."
+      },
+      "dry_penalty_last_n": {
+        "label": "",
+        "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": ""
+      },
+      "pyIntepreterEnabled": {
+        "label": "",
+        "note": ""
+      }
+    }
+  }
+}
diff --git a/src/utils/app.context.tsx b/src/utils/app.context.tsx
index 16c6abc..55d506f 100644
--- a/src/utils/app.context.tsx
+++ b/src/utils/app.context.tsx
@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import { matchPath, useLocation, useNavigate } from 'react-router';
-import { CONFIG_DEFAULT, isDev } from '../config';
+import { isDev } from '../config';
 import {
   filterThoughtFromMsgs,
   getSSEStreamAsync,
@@ -12,6 +12,7 @@ import StorageUtils from './storage';
 import {
   APIMessage,
   CanvasData,
+  Configuration,
   Conversation,
   LlamaCppServerProps,
   Message,
@@ -52,8 +53,8 @@ interface AppContextValue {
   setCanvasData: (data: CanvasData | null) => void;
 
   // config
-  config: typeof CONFIG_DEFAULT;
-  saveConfig: (config: typeof CONFIG_DEFAULT) => void;
+  config: Configuration;
+  saveConfig: (config: Configuration) => void;
   showSettings: boolean;
   setShowSettings: (show: boolean) => void;
 
@@ -64,8 +65,22 @@ interface AppContextValue {
 // this callback is used for scrolling to the bottom of the chat and switching to the last node
 export type CallbackGeneratedChunk = (currLeafNodeId?: Message['id']) => void;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const AppContext = createContext<AppContextValue>({} as any);
+const AppContext = createContext<AppContextValue>({
+  viewingChat: null,
+  pendingMessages: {},
+  isGenerating: () => false,
+  sendMessage: async () => false,
+  stopGenerating: () => {},
+  replaceMessage: async () => {},
+  replaceMessageAndGenerate: async () => {},
+  canvasData: null,
+  setCanvasData: () => {},
+  config: {} as Configuration,
+  saveConfig: () => {},
+  showSettings: false,
+  setShowSettings: () => {},
+  serverProps: null,
+});
 
 const getViewingChat = async (convId: string): Promise<ViewingChat | null> => {
   const conv = await StorageUtils.getOneConversation(convId);
@@ -211,33 +226,48 @@ export const AppContextProvider = ({
       if (isDev) console.debug({ messages });
 
       // prepare params
-      const params = {
+      let params = {
         messages,
         stream: true,
         cache_prompt: true,
-        samplers: config.samplers,
-        temperature: config.temperature,
-        dynatemp_range: config.dynatemp_range,
-        dynatemp_exponent: config.dynatemp_exponent,
-        top_k: config.top_k,
-        top_p: config.top_p,
-        min_p: config.min_p,
-        typical_p: config.typical_p,
-        xtc_probability: config.xtc_probability,
-        xtc_threshold: config.xtc_threshold,
-        repeat_last_n: config.repeat_last_n,
-        repeat_penalty: config.repeat_penalty,
-        presence_penalty: config.presence_penalty,
-        frequency_penalty: config.frequency_penalty,
-        dry_multiplier: config.dry_multiplier,
-        dry_base: config.dry_base,
-        dry_allowed_length: config.dry_allowed_length,
-        dry_penalty_last_n: config.dry_penalty_last_n,
-        max_tokens: config.max_tokens,
         timings_per_token: !!config.showTokensPerSecond,
-        ...(config.custom.length ? JSON.parse(config.custom) : {}),
       };
 
+      // advanced options
+      if (config.overrideGenerationOptions)
+        params = Object.assign(params, {
+          temperature: config.temperature,
+          top_k: config.top_k,
+          top_p: config.top_p,
+          min_p: config.min_p,
+          max_tokens: config.max_tokens,
+        });
+
+      if (config.overrideSamplersOptions)
+        params = Object.assign(params, {
+          samplers: config.samplers,
+          dynatemp_range: config.dynatemp_range,
+          dynatemp_exponent: config.dynatemp_exponent,
+          typical_p: config.typical_p,
+          xtc_probability: config.xtc_probability,
+          xtc_threshold: config.xtc_threshold,
+        });
+
+      if (config.overridePenaltyOptions)
+        params = Object.assign(params, {
+          repeat_last_n: config.repeat_last_n,
+          repeat_penalty: config.repeat_penalty,
+          presence_penalty: config.presence_penalty,
+          frequency_penalty: config.frequency_penalty,
+          dry_multiplier: config.dry_multiplier,
+          dry_base: config.dry_base,
+          dry_allowed_length: config.dry_allowed_length,
+          dry_penalty_last_n: config.dry_penalty_last_n,
+        });
+
+      if (config.custom.trim().length)
+        params = Object.assign(params, JSON.parse(config.custom));
+
       // send request
       const fetchResponse = await fetch(
         `${config.baseUrl}/v1/chat/completions`,
@@ -264,8 +294,8 @@ export const AppContextProvider = ({
           throw new Error(chunk.error?.message || 'Unknown error');
         }
         const addedContent = chunk.choices[0].delta.content;
-        const lastContent = pendingMsg.content || '';
         if (addedContent) {
+          const lastContent = pendingMsg.content || '';
           pendingMsg = {
             ...pendingMsg,
             content: lastContent + addedContent,
@@ -275,7 +305,7 @@ export const AppContextProvider = ({
           pendingMsg.model = chunk.model;
         }
         const timings = chunk.timings;
-        if (timings && config.showTokensPerSecond) {
+        if (timings) {
           // only extract what's really needed, to save some space
           pendingMsg.timings = {
             prompt_n: timings.prompt_n,
@@ -292,10 +322,12 @@ export const AppContextProvider = ({
       if ((err as Error).name === 'AbortError') {
         // user stopped the generation via stopGeneration() function
         // we can safely ignore this error
+        if (isDev) console.debug('Generation aborted by user.');
       } else {
-        console.error(err);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        toast.error((err as any)?.message ?? 'Unknown error');
+        console.error('Error during message generation:', err);
+        toast.error(
+          (err as Error)?.message ?? 'Unknown error during generation'
+        );
         throw err; // rethrow
       }
     }
@@ -347,7 +379,9 @@ export const AppContextProvider = ({
     try {
       await generateMessage(convId, currMsgId, onChunk);
       return true;
-    } catch (_) {
+    } catch (error) {
+      console.error('Message sending failed, consider rollback:', error);
+      toast.error('Failed to get response from AI.');
       // TODO: rollback
     }
     return false;
@@ -390,7 +424,7 @@ export const AppContextProvider = ({
     onChunk(currMsgId);
   };
 
-  // if content is undefined, we remove last assistant message
+  // if content is null, we remove last assistant message
   const replaceMessageAndGenerate = async (
     convId: string,
     msg: Message,
@@ -425,7 +459,7 @@ export const AppContextProvider = ({
     await generateMessage(convId, parentNodeId, onChunk);
   };
 
-  const saveConfig = (config: typeof CONFIG_DEFAULT) => {
+  const saveConfig = (config: Configuration) => {
     StorageUtils.setConfig(config);
     setConfig(config);
   };
@@ -454,4 +488,10 @@ export const AppContextProvider = ({
   );
 };
 
-export const useAppContext = () => useContext(AppContext);
+export const useAppContext = () => {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error('useAppContext must be used within an AppContextProvider');
+  }
+  return context;
+};
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
index c461703..6a7a53b 100644
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -3,7 +3,7 @@
 
 import Dexie, { Table } from 'dexie';
 import { CONFIG_DEFAULT } from '../config';
-import { Conversation, Message, TimingReport } from './types';
+import { Configuration, Conversation, Message, TimingReport } from './types';
 
 const event = new EventTarget();
 
@@ -192,7 +192,7 @@ const StorageUtils = {
   },
 
   // manage config
-  getConfig(): typeof CONFIG_DEFAULT {
+  getConfig(): Configuration {
     const savedVal = JSON.parse(localStorage.getItem('config') || '{}');
     // to prevent breaking changes in the future, we always provide default value for missing keys
     return {
@@ -200,7 +200,7 @@ const StorageUtils = {
       ...savedVal,
     };
   },
-  setConfig(config: typeof CONFIG_DEFAULT) {
+  setConfig(config: Configuration) {
     localStorage.setItem('config', JSON.stringify(config));
   },
   getTheme(): string {
diff --git a/src/utils/types.ts b/src/utils/types.ts
index ecc9b6a..87a9f64 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -5,6 +5,53 @@ export interface TimingReport {
   predicted_ms: number;
 }
 
+export interface Configuration {
+  baseUrl: string;
+  apiKey: string;
+  systemMessage: string;
+
+  /* conversations */
+  pasteLongTextToFileLen: number;
+  pdfAsImage: boolean;
+  showTokensPerSecond: boolean;
+  showThoughtInProgress: boolean;
+  excludeThoughtOnReq: boolean;
+
+  /* advanced */
+  /* generation */
+  overrideGenerationOptions: boolean;
+  temperature: number;
+  top_k: number;
+  top_p: number;
+  min_p: number;
+  max_tokens: number;
+
+  /* samplers */
+  overrideSamplersOptions: boolean;
+  samplers: string;
+  dynatemp_range: number;
+  dynatemp_exponent: number;
+  typical_p: number;
+  xtc_probability: number;
+  xtc_threshold: number;
+
+  /* penalty */
+  overridePenaltyOptions: boolean;
+  repeat_last_n: number;
+  repeat_penalty: number;
+  presence_penalty: number;
+  frequency_penalty: number;
+  dry_multiplier: number;
+  dry_base: number;
+  dry_allowed_length: number;
+  dry_penalty_last_n: number;
+
+  custom: string;
+
+  /* experimental */
+  pyIntepreterEnabled: boolean;
+}
+
 /**
  * What is conversation "branching"? It is a feature that allows the user to edit an old message in the history, while still keeping the conversation flow.
  * Inspired by ChatGPT / Claude / Hugging Chat where you edit a message, a new branch of the conversation is created, and the old message is still visible.