diff --git a/docs/.env.example b/docs/.env.example
index 6caffa2ee..6755f2520 100644
--- a/docs/.env.example
+++ b/docs/.env.example
@@ -1,3 +1,5 @@
 GTM_ID=xxxx
 POSTHOG_PROJECT_API_KEY=xxxx
-POSTHOG_APP_URL=xxxx
\ No newline at end of file
+POSTHOG_APP_URL=xxxx
+ALGOLIA_API_KEY=xxxx
+ALGOLIA_APP_ID=xxxx
\ No newline at end of file
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index f65074bbe..f443a4e48 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -151,13 +151,13 @@ const config = {
         autoCollapseCategories: false,
       },
     },
-    // Agolia DocSearch
+    // Algolia Search Configuration
     algolia: {
       appId: process.env.ALGOLIA_APP_ID || "XXX",
       apiKey: process.env.ALGOLIA_API_KEY || "XXX",
       indexName: "jan",
+      contextualSearch: false,
       insights: true,
-      debug: false,
     },
     // SEO Docusarus
     metadata: [
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 115bc3f21..9ed8fd0d8 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -1,3 +1,8 @@
 .DocCardList--no-description .card p {
   display: none;
-}
\ No newline at end of file
+}
+
+/* For dark theme */
+[data-theme="dark"] .DocSearch {
+  --docsearch-hit-active-color: #090a11; /* Keep the color unchanged */
+}
diff --git a/uikit/src/badge/index.tsx b/uikit/src/badge/index.tsx
index 387932ff0..2b904432d 100644
--- a/uikit/src/badge/index.tsx
+++ b/uikit/src/badge/index.tsx
@@ -6,6 +6,7 @@ const badgeVariants = cva('badge', {
   variants: {
     themes: {
       primary: 'badge-primary',
+      warning: 'badge-warning',
       success: 'badge-success',
       secondary: 'badge-secondary',
       danger: 'badge-danger',
diff --git a/uikit/src/badge/styles.scss b/uikit/src/badge/styles.scss
index 77feb0769..b777892d7 100644
--- a/uikit/src/badge/styles.scss
+++ b/uikit/src/badge/styles.scss
@@ -21,6 +21,10 @@
     @apply border-transparent bg-red-100 text-red-700;
   }
 
+  &-warning {
+    @apply border-transparent bg-yellow-100 text-yellow-700;
+  }
+
   &-outline {
     @apply text-foreground border-border border;
   }
diff --git a/uikit/src/button/styles.scss b/uikit/src/button/styles.scss
index 2b1e239a5..9c634e67e 100644
--- a/uikit/src/button/styles.scss
+++ b/uikit/src/button/styles.scss
@@ -8,7 +8,7 @@
   }
 
   &-secondary-blue {
-    @apply bg-blue-200 text-blue-900 hover:bg-blue-500/80;
+    @apply bg-blue-200 text-blue-600 hover:bg-blue-500/80;
   }
 
   &-danger {
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 62%
rename from web/containers/Slider/index.tsx
rename to web/containers/SliderRightPanel/index.tsx
index 65a4e1ba1..1c46be8cf 100644
--- a/web/containers/Slider/index.tsx
+++ b/web/containers/SliderRightPanel/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import {
   Slider,
@@ -14,10 +14,12 @@ import { useAtomValue, useSetAtom } from 'jotai'
 import { InfoIcon } from 'lucide-react'
 
 import { useActiveModel } from '@/hooks/useActiveModel'
+import { useClickOutside } from '@/hooks/useClickOutside'
+
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toSettingParams } from '@/utils/model_param'
+import { toSettingParams } from '@/utils/modelParam'
 
 import {
   engineParamsUpdateAtom,
@@ -57,6 +59,10 @@ const SliderRightPanel: React.FC<Props> = ({
 
   const { stopModel } = useActiveModel()
 
+  const [showTooltip, setShowTooltip] = useState({ max: false, min: false })
+
+  useClickOutside(() => setShowTooltip({ max: false, min: false }), null, [])
+
   const onValueChanged = (e: number[]) => {
     if (!threadId) return
     if (engineParams.some((x) => x.name.includes(name))) {
@@ -97,25 +103,43 @@ const SliderRightPanel: React.FC<Props> = ({
           />
           <div className="relative mt-2 flex items-center justify-between text-gray-400">
             <p className="text-sm">{min}</p>
-            <p className="absolute left-1/2 -translate-x-1/2 text-sm">
-              {max / 2}
-            </p>
             <p className="text-sm">{max}</p>
           </div>
         </div>
-        <Input
-          className="-mt-4 h-8 w-16"
-          min={min}
-          max={max}
-          value={String(value)}
-          onChange={(e) => {
-            if (Number(e.target.value) >= max) {
-              onValueChanged([Number(max)])
-            } else {
-              onValueChanged([Number(e.target.value)])
-            }
-          }}
-        />
+        <Tooltip open={showTooltip.max || showTooltip.min}>
+          <TooltipTrigger asChild>
+            <Input
+              type="number"
+              className="-mt-4 h-8 w-20"
+              min={min}
+              max={max}
+              value={String(value)}
+              onChange={(e) => {
+                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)])
+                  setShowTooltip({ max: false, min: true })
+                } else {
+                  onValueChanged([Number(e.target.value)])
+                  setShowTooltip({ max: false, min: false })
+                }
+              }}
+            />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent className="max-w-[240px]" side="top">
+              {showTooltip.max && (
+                <span>Automatically set to the maximum allowed tokens</span>
+              )}
+              {showTooltip.min && (
+                <span>Automatically set to the minimum allowed tokens</span>
+              )}
+              <TooltipArrow />
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
       </div>
     </div>
   )
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/predefinedComponent.ts b/web/screens/Chat/ModelSetting/predefinedComponent.ts
index b8eafa2f1..abcec508e 100644
--- a/web/screens/Chat/ModelSetting/predefinedComponent.ts
+++ b/web/screens/Chat/ModelSetting/predefinedComponent.ts
@@ -32,7 +32,7 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
       min: 0,
       max: 4096,
       step: 128,
-      value: 1024,
+      value: 4096,
     },
   },
   max_tokens: {
@@ -42,10 +42,10 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
       'The maximum number of tokens the model will generate in a single response.',
     controllerType: 'slider',
     controllerData: {
-      min: 128,
+      min: 100,
       max: 4096,
-      step: 128,
-      value: 2048,
+      step: 10,
+      value: 4096,
     },
   },
   ngl: {
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/screens/ExploreModels/ExploreModelItemHeader/index.tsx b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
index c35e480f2..2ec57183f 100644
--- a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
+++ b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
@@ -71,7 +71,7 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
   if (isDownloaded) {
     downloadButton = (
       <Button
-        themes="success"
+        themes="secondaryBlue"
         className="min-w-[98px]"
         onClick={onUseModelClick}
       >
@@ -92,21 +92,21 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
 
     if (minimumRamModel > totalRam) {
       return (
-        <Badge className="rounded-md bg-red-500 text-white">
+        <Badge className="rounded-md" themes="danger">
           Not enough RAM
         </Badge>
       )
     }
     if (minimumRamModel < availableRam) {
       return (
-        <Badge className="rounded-md bg-green-500 text-white">
+        <Badge className="rounded-md" themes="success">
           Recommended
         </Badge>
       )
     }
     if (minimumRamModel < totalRam && minimumRamModel > availableRam) {
       return (
-        <Badge className="rounded-md bg-yellow-500 text-white">
+        <Badge className="rounded-md" themes="warning">
           Slow on your device
         </Badge>
       )
diff --git a/web/styles/base/global.scss b/web/styles/base/global.scss
index 178501296..05584c9e7 100644
--- a/web/styles/base/global.scss
+++ b/web/styles/base/global.scss
@@ -31,4 +31,14 @@
   [type='submit'] {
     background-color: inherit;
   }
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 }
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