diff --git a/web/containers/Checkbox/index.tsx b/web/containers/Checkbox/index.tsx
index db331e2f7..f7c39685e 100644
--- a/web/containers/Checkbox/index.tsx
+++ b/web/containers/Checkbox/index.tsx
@@ -16,7 +16,7 @@ import { useActiveModel } from '@/hooks/useActiveModel'
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toSettingParams } from '@/utils/model_param'
+import { toSettingParams } from '@/utils/modelParam'
 
 import {
   engineParamsUpdateAtom,
diff --git a/web/containers/ModelConfigInput/index.tsx b/web/containers/ModelConfigInput/index.tsx
index b7f9e5904..7e6ffdc38 100644
--- a/web/containers/ModelConfigInput/index.tsx
+++ b/web/containers/ModelConfigInput/index.tsx
@@ -16,7 +16,7 @@ import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
 
-import { toSettingParams } from '@/utils/model_param'
+import { toSettingParams } from '@/utils/modelParam'
 
 import {
   engineParamsUpdateAtom,
diff --git a/web/containers/Slider/index.tsx b/web/containers/SliderRightPanel/index.tsx
similarity index 85%
rename from web/containers/Slider/index.tsx
rename to web/containers/SliderRightPanel/index.tsx
index af2336fdb..1c46be8cf 100644
--- a/web/containers/Slider/index.tsx
+++ b/web/containers/SliderRightPanel/index.tsx
@@ -19,9 +19,7 @@ import { useClickOutside } from '@/hooks/useClickOutside'
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toSettingParams } from '@/utils/model_param'
-
-import { selectedModelAtom } from '../DropdownListSidebar'
+import { toSettingParams } from '@/utils/modelParam'
 
 import {
   engineParamsUpdateAtom,
@@ -59,7 +57,6 @@ const SliderRightPanel: React.FC<Props> = ({
 
   const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
 
-  const selectedModel = useAtomValue(selectedModelAtom)
   const { stopModel } = useActiveModel()
 
   const [showTooltip, setShowTooltip] = useState({ max: false, min: false })
@@ -77,19 +74,6 @@ const SliderRightPanel: React.FC<Props> = ({
     updateModelParameter(threadId, name, e[0])
   }
 
-  const maxValue = (name: string) => {
-    switch (name) {
-      case 'max_tokens':
-        return selectedModel?.parameters.max_tokens || max
-
-      case 'ctx_len':
-        return selectedModel?.settings.ctx_len || max
-
-      default:
-        return max
-    }
-  }
-
   return (
     <div className="flex flex-col">
       <div className="mb-3 flex items-center gap-x-2">
@@ -114,12 +98,12 @@ const SliderRightPanel: React.FC<Props> = ({
             value={[value]}
             onValueChange={onValueChanged}
             min={min}
-            max={maxValue(name)}
+            max={max}
             step={step}
           />
           <div className="relative mt-2 flex items-center justify-between text-gray-400">
             <p className="text-sm">{min}</p>
-            <p className="text-sm">{maxValue(name) as number}</p>
+            <p className="text-sm">{max}</p>
           </div>
         </div>
         <Tooltip open={showTooltip.max || showTooltip.min}>
@@ -128,11 +112,11 @@ const SliderRightPanel: React.FC<Props> = ({
               type="number"
               className="-mt-4 h-8 w-20"
               min={min}
-              max={maxValue(name)}
+              max={max}
               value={String(value)}
               onChange={(e) => {
-                if (Number(e.target.value) > Number(maxValue(name))) {
-                  onValueChanged([Number(maxValue(name))])
+                if (Number(e.target.value) > Number(max)) {
+                  onValueChanged([Number(max)])
                   setShowTooltip({ max: true, min: false })
                 } else if (Number(e.target.value) < Number(min)) {
                   onValueChanged([Number(min)])
diff --git a/web/hooks/useSendChatMessage.ts b/web/hooks/useSendChatMessage.ts
index 91b709a27..b4fdc9bd3 100644
--- a/web/hooks/useSendChatMessage.ts
+++ b/web/hooks/useSendChatMessage.ts
@@ -23,7 +23,7 @@ import { currentPromptAtom } from '@/containers/Providers/Jotai'
 
 import { toaster } from '@/containers/Toast'
 
-import { toRuntimeParams, toSettingParams } from '@/utils/model_param'
+import { toRuntimeParams, toSettingParams } from '@/utils/modelParam'
 
 import { useActiveModel } from './useActiveModel'
 
diff --git a/web/hooks/useUpdateModelParameters.ts b/web/hooks/useUpdateModelParameters.ts
index 632e9f631..0edca5136 100644
--- a/web/hooks/useUpdateModelParameters.ts
+++ b/web/hooks/useUpdateModelParameters.ts
@@ -8,7 +8,7 @@ import {
 
 import { useAtomValue, useSetAtom } from 'jotai'
 
-import { toRuntimeParams, toSettingParams } from '@/utils/model_param'
+import { toRuntimeParams, toSettingParams } from '@/utils/modelParam'
 
 import { extensionManager } from '@/extension'
 import {
diff --git a/web/screens/Chat/EngineSetting/index.tsx b/web/screens/Chat/EngineSetting/index.tsx
index 14c43797f..4394f835b 100644
--- a/web/screens/Chat/EngineSetting/index.tsx
+++ b/web/screens/Chat/EngineSetting/index.tsx
@@ -4,7 +4,7 @@ import { useAtomValue } from 'jotai'
 import { selectedModelAtom } from '@/containers/DropdownListSidebar'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toSettingParams } from '@/utils/model_param'
+import { toSettingParams } from '@/utils/modelParam'
 
 import settingComponentBuilder from '../ModelSetting/settingComponentBuilder'
 
@@ -18,7 +18,7 @@ const EngineSetting = () => {
 
   const modelSettingParams = toSettingParams(activeModelParams)
 
-  const componentData = getConfigurationsData(modelSettingParams)
+  const componentData = getConfigurationsData(modelSettingParams, selectedModel)
 
   componentData.sort((a, b) => a.title.localeCompare(b.title))
 
diff --git a/web/screens/Chat/ModelSetting/index.tsx b/web/screens/Chat/ModelSetting/index.tsx
index c6fa1b9c4..ff5d3d40f 100644
--- a/web/screens/Chat/ModelSetting/index.tsx
+++ b/web/screens/Chat/ModelSetting/index.tsx
@@ -6,7 +6,7 @@ import { useAtomValue } from 'jotai'
 import { selectedModelAtom } from '@/containers/DropdownListSidebar'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toRuntimeParams } from '@/utils/model_param'
+import { toRuntimeParams } from '@/utils/modelParam'
 
 import settingComponentBuilder from './settingComponentBuilder'
 
@@ -20,9 +20,10 @@ const ModelSetting = () => {
 
   const modelRuntimeParams = toRuntimeParams(activeModelParams)
 
-  const componentData = getConfigurationsData(modelRuntimeParams)
-
-  componentData.sort((a, b) => a.title.localeCompare(b.title))
+  const componentData = getConfigurationsData(
+    modelRuntimeParams,
+    selectedModel
+  ).toSorted((a, b) => a.title.localeCompare(b.title))
 
   return (
     <div className="flex flex-col">
diff --git a/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx b/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
index d2e937040..8ff8e7c02 100644
--- a/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
+++ b/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-case-declarations */
 import Checkbox from '@/containers/Checkbox'
 import ModelConfigInput from '@/containers/ModelConfigInput'
-import Slider from '@/containers/Slider'
+import SliderRightPanel from '@/containers/SliderRightPanel'
 
 export type ControllerType = 'slider' | 'checkbox' | 'input'
 
@@ -43,7 +43,7 @@ const settingComponentBuilder = (
         case 'slider':
           const { min, max, step, value } = data.controllerData as SliderData
           return (
-            <Slider
+            <SliderRightPanel
               key={data.name}
               title={data.title}
               description={data.description}
diff --git a/web/screens/Chat/Sidebar/index.tsx b/web/screens/Chat/Sidebar/index.tsx
index b1af0a19e..1826b1700 100644
--- a/web/screens/Chat/Sidebar/index.tsx
+++ b/web/screens/Chat/Sidebar/index.tsx
@@ -19,7 +19,7 @@ import DropdownListSidebar, {
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toRuntimeParams, toSettingParams } from '@/utils/model_param'
+import { toRuntimeParams, toSettingParams } from '@/utils/modelParam'
 
 import EngineSetting from '../EngineSetting'
 import ModelSetting from '../ModelSetting'
diff --git a/web/utils/componentSettings.ts b/web/utils/componentSettings.ts
index c5cc666b5..76b0a12c0 100644
--- a/web/utils/componentSettings.ts
+++ b/web/utils/componentSettings.ts
@@ -1,4 +1,4 @@
-import { ModelRuntimeParams, ModelSettingParams } from '@janhq/core'
+import { Model, ModelRuntimeParams, ModelSettingParams } from '@janhq/core'
 
 import { presetConfiguration } from '@/screens/Chat/ModelSetting/predefinedComponent'
 
@@ -7,9 +7,16 @@ import { SettingComponentData } from '@/screens/Chat/ModelSetting/settingCompone
 import { ModelParams } from '@/helpers/atoms/Thread.atom'
 
 export const getConfigurationsData = (
-  settings: ModelSettingParams | ModelRuntimeParams
+  settings: ModelSettingParams | ModelRuntimeParams,
+  selectedModel?: Model
 ) => {
   const componentData: SettingComponentData[] = []
+
+  const defaultValue = (value?: number) => {
+    if (value && value < 4096) return value
+    return 4096
+  }
+
   Object.keys(settings).forEach((key: string) => {
     const componentSetting = presetConfiguration[key]
 
@@ -18,8 +25,27 @@ export const getConfigurationsData = (
     }
     if ('slider' === componentSetting.controllerType) {
       const value = Number(settings[key as keyof ModelParams])
-      if ('value' in componentSetting.controllerData)
+      if ('value' in componentSetting.controllerData) {
         componentSetting.controllerData.value = value
+        if ('max' in componentSetting.controllerData) {
+          switch (key) {
+            case 'max_tokens':
+              componentSetting.controllerData.max =
+                selectedModel?.parameters.max_tokens || 4096
+              componentSetting.controllerData.value = defaultValue(
+                selectedModel?.parameters.max_tokens
+              )
+              break
+            case 'ctx_len':
+              componentSetting.controllerData.max =
+                selectedModel?.settings.ctx_len || 4096
+              componentSetting.controllerData.value = defaultValue(
+                selectedModel?.settings.ctx_len
+              )
+              break
+          }
+        }
+      }
     } else if ('input' === componentSetting.controllerType) {
       const value = settings[key as keyof ModelParams] as string
       const placeholder = settings[key as keyof ModelParams] as string
diff --git a/web/utils/model_param.ts b/web/utils/modelParam.ts
similarity index 100%
rename from web/utils/model_param.ts
rename to web/utils/modelParam.ts