diff --git a/src/renderer/src/assets/styles/color.scss b/src/renderer/src/assets/styles/color.scss
index e4bb90fea3..68dfa92a63 100644
--- a/src/renderer/src/assets/styles/color.scss
+++ b/src/renderer/src/assets/styles/color.scss
@@ -47,7 +47,7 @@
   --color-list-item: rgba(255, 255, 255, 0.1);
   --color-list-item-hover: rgba(255, 255, 255, 0.05);
 
-  --modal-background: #1f1f1f;
+  --modal-background: #111111;
 
   --color-highlight: rgba(0, 0, 0, 1);
   --color-background-highlight: rgba(255, 255, 0, 0.9);
diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index ce7d70e9cb..e5718d989e 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -182,3 +182,9 @@ span.highlight {
 span.highlight.selected {
   background-color: var(--color-background-highlight-accent);
 }
+
+textarea {
+  &::-webkit-resizer {
+    display: none;
+  }
+}
diff --git a/src/renderer/src/components/EditableNumber/index.tsx b/src/renderer/src/components/EditableNumber/index.tsx
new file mode 100644
index 0000000000..3cc0f09507
--- /dev/null
+++ b/src/renderer/src/components/EditableNumber/index.tsx
@@ -0,0 +1,114 @@
+import { InputNumber } from 'antd'
+import { FC, useEffect, useRef, useState } from 'react'
+import styled from 'styled-components'
+
+export interface EditableNumberProps {
+  value?: number | null
+  min?: number
+  max?: number
+  step?: number
+  precision?: number
+  placeholder?: string
+  disabled?: boolean
+  changeOnBlur?: boolean
+  onChange?: (value: number | null) => void
+  onBlur?: () => void
+  style?: React.CSSProperties
+  className?: string
+  size?: 'small' | 'middle' | 'large'
+  suffix?: string
+  prefix?: string
+  align?: 'start' | 'center' | 'end'
+}
+
+const EditableNumber: FC<EditableNumberProps> = ({
+  value,
+  min,
+  max,
+  step = 0.01,
+  precision,
+  placeholder,
+  disabled = false,
+  onChange,
+  onBlur,
+  changeOnBlur = false,
+  style,
+  className,
+  size = 'middle',
+  align = 'end'
+}) => {
+  const [isEditing, setIsEditing] = useState(false)
+  const [inputValue, setInputValue] = useState(value)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    setInputValue(value)
+  }, [value])
+
+  const handleFocus = () => {
+    if (disabled) return
+    setIsEditing(true)
+  }
+
+  const handleInputChange = (newValue: number | null) => {
+    onChange?.(newValue ?? null)
+  }
+
+  const handleBlur = () => {
+    setIsEditing(false)
+    onBlur?.()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleBlur()
+    } else if (e.key === 'Escape') {
+      setInputValue(value)
+      setIsEditing(false)
+    }
+  }
+
+  return (
+    <Container>
+      <InputNumber
+        style={{ ...style, opacity: isEditing ? 1 : 0 }}
+        ref={inputRef}
+        value={inputValue}
+        min={min}
+        max={max}
+        step={step}
+        precision={precision}
+        size={size}
+        onChange={handleInputChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        onKeyDown={handleKeyDown}
+        className={className}
+        controls={isEditing}
+        changeOnBlur={changeOnBlur}
+      />
+      <DisplayText style={style} className={className} $align={align} $isEditing={isEditing}>
+        {value ?? placeholder}
+      </DisplayText>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: inline-block;
+  position: relative;
+`
+
+const DisplayText = styled.div<{
+  $align: 'start' | 'center' | 'end'
+  $isEditing: boolean
+}>`
+  position: absolute;
+  inset: 0;
+  display: ${({ $isEditing }) => ($isEditing ? 'none' : 'flex')};
+  align-items: center;
+  justify-content: ${({ $align }) => $align};
+  pointer-events: none;
+`
+
+export default EditableNumber
diff --git a/src/renderer/src/context/AntdProvider.tsx b/src/renderer/src/context/AntdProvider.tsx
index f8279b17bb..1fdb1219f2 100644
--- a/src/renderer/src/context/AntdProvider.tsx
+++ b/src/renderer/src/context/AntdProvider.tsx
@@ -91,6 +91,9 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
             dotSize: 7,
             railSize: 5,
             colorBgElevated: '#ffffff'
+          },
+          Modal: {
+            colorBgElevated: 'var(--modal-background)'
           }
         },
         token: {
diff --git a/src/renderer/src/pages/home/Messages/CitationsList.tsx b/src/renderer/src/pages/home/Messages/CitationsList.tsx
index 0c32f6151a..95e5a26c8a 100644
--- a/src/renderer/src/pages/home/Messages/CitationsList.tsx
+++ b/src/renderer/src/pages/home/Messages/CitationsList.tsx
@@ -318,7 +318,7 @@ const WebSearchCardContent = styled.div`
 `
 
 const PopoverContent = styled.div`
-  max-width: min(300px, 60vw);
+  max-width: min(340px, 60vw);
   max-height: 60vh;
   padding: 0 12px;
 `
diff --git a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
index 43ab6fbcb2..3551f0809a 100644
--- a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
@@ -1,3 +1,4 @@
+import EditableNumber from '@renderer/components/EditableNumber'
 import Scrollbar from '@renderer/components/Scrollbar'
 import Selector from '@renderer/components/Selector'
 import { isMac, isWindows } from '@renderer/config/constant'
@@ -16,7 +17,7 @@ import {
   setShowTranslateConfirm
 } from '@renderer/store/settings'
 import { ThemeMode, TranslateLanguageVarious } from '@renderer/types'
-import { InputNumber, Switch } from 'antd'
+import { Switch } from 'antd'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -67,7 +68,7 @@ const SettingsTab: FC = () => {
             <SettingDivider />
             <SettingRow>
               <SettingRowTitleSmall>{t('settings.messages.input.paste_long_text_threshold')}</SettingRowTitleSmall>
-              <InputNumber
+              <EditableNumber
                 size="small"
                 min={500}
                 max={10000}
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx
index 169ed3ffd5..a593f41cbe 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx
@@ -3,7 +3,7 @@ import { Box } from '@renderer/components/Layout'
 import { useAppSelector } from '@renderer/store'
 import { Assistant, AssistantSettings } from '@renderer/types'
 import { Row, Segmented, Select, SelectProps, Tooltip } from 'antd'
-import { CircleHelp } from 'lucide-react'
+import { ChevronDown, CircleHelp } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -46,6 +46,7 @@ const AssistantKnowledgeBaseSettings: React.FC<Props> = ({ assistant, updateAssi
             .toLowerCase()
             .includes(input.toLowerCase())
         }
+        suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
       />
       <Row align="middle" style={{ marginTop: 10 }}>
         <Label>{t('assistants.settings.knowledge_base.recognition')}</Label>
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx
index 1a22848ce5..31e44abfbb 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx
@@ -1,13 +1,16 @@
 import { DeleteOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons'
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
+import EditableNumber from '@renderer/components/EditableNumber'
 import { HStack } from '@renderer/components/Layout'
 import SelectModelPopup from '@renderer/components/Popups/SelectModelPopup'
+import Selector from '@renderer/components/Selector'
 import { DEFAULT_CONTEXTCOUNT, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
 import { SettingRow } from '@renderer/pages/settings'
 import { Assistant, AssistantSettingCustomParameters, AssistantSettings } from '@renderer/types'
 import { modalConfirm } from '@renderer/utils'
 import { Button, Col, Divider, Input, InputNumber, Row, Select, Slider, Switch, Tooltip } from 'antd'
 import { isNull } from 'lodash'
+import { ChevronDown } from 'lucide-react'
 import { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -107,9 +110,15 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
         )
       case 'boolean':
         return (
-          <Switch
-            checked={param.value as boolean}
-            onChange={(checked) => onUpdateCustomParameter(index, 'value', checked)}
+          <Select
+            value={param.value as boolean}
+            onChange={(value) => onUpdateCustomParameter(index, 'value', value)}
+            style={{ width: '100%' }}
+            options={[
+              { label: 'true', value: true },
+              { label: 'false', value: false }
+            ]}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
           />
         )
       case 'json':
@@ -188,38 +197,57 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
 
   return (
     <Container>
-      <Row align="middle" style={{ marginBottom: 10 }}>
-        <Label style={{ marginBottom: 10 }}>{t('assistants.settings.default_model')}</Label>
-        <Col span={24}>
-          <HStack alignItems="center" gap={5}>
+      <HStack alignItems="center" justifyContent="space-between" style={{ marginBottom: 10 }}>
+        <Label>{t('assistants.settings.default_model')}</Label>
+        <HStack alignItems="center" gap={5}>
+          <ModelSelectButton
+            icon={defaultModel ? <ModelAvatar model={defaultModel} size={20} /> : <PlusOutlined />}
+            onClick={onSelectModel}>
+            <ModelName>{defaultModel ? defaultModel.name : t('agents.edit.model.select.title')}</ModelName>
+          </ModelSelectButton>
+          {defaultModel && (
             <Button
-              icon={defaultModel ? <ModelAvatar model={defaultModel} size={20} /> : <PlusOutlined />}
-              onClick={onSelectModel}>
-              {defaultModel ? defaultModel.name : t('agents.edit.model.select.title')}
-            </Button>
-            {defaultModel && (
-              <Button
-                icon={<DeleteOutlined />}
-                type="text"
-                onClick={() => {
-                  setDefaultModel(undefined)
-                  updateAssistant({ ...assistant, defaultModel: undefined })
-                }}
-                danger
-              />
-            )}
-          </HStack>
-        </Col>
-      </Row>
+              color="danger"
+              variant="filled"
+              icon={<DeleteOutlined />}
+              onClick={() => {
+                setDefaultModel(undefined)
+                updateAssistant({ ...assistant, defaultModel: undefined })
+              }}
+              danger
+            />
+          )}
+        </HStack>
+      </HStack>
       <Divider style={{ margin: '10px 0' }} />
       <Row align="middle">
-        <Label>{t('chat.settings.temperature')}</Label>
-        <Tooltip title={t('chat.settings.temperature.tip')}>
-          <QuestionIcon />
-        </Tooltip>
-      </Row>
-      <Row align="middle" gutter={20}>
         <Col span={20}>
+          <Label>
+            {t('chat.settings.temperature')}
+            <Tooltip title={t('chat.settings.temperature.tip')}>
+              <QuestionIcon />
+            </Tooltip>
+          </Label>
+        </Col>
+        <Col span={4}>
+          <EditableNumber
+            min={0}
+            max={2}
+            step={0.01}
+            precision={2}
+            value={temperature}
+            onChange={(value) => {
+              if (value !== null) {
+                setTemperature(value)
+                setTimeout(() => updateAssistantSettings({ temperature: value }), 500)
+              }
+            }}
+            style={{ width: '100%' }}
+          />
+        </Col>
+      </Row>
+      <Row align="middle" gutter={24}>
+        <Col span={24}>
           <Slider
             min={0}
             max={2}
@@ -230,43 +258,20 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
             step={0.01}
           />
         </Col>
-        <Col span={4}>
-          <InputNumber
-            min={0}
-            max={2}
-            step={0.01}
-            value={temperature}
-            changeOnBlur
-            onChange={(value) => {
-              if (!isNull(value)) {
-                setTemperature(value)
-                setTimeout(() => updateAssistantSettings({ temperature: value }), 500)
-              }
-            }}
-            style={{ width: '100%' }}
-          />
-        </Col>
       </Row>
+      <Divider style={{ margin: '10px 0' }} />
+
       <Row align="middle">
-        <Label>{t('chat.settings.top_p')}</Label>
-        <Tooltip title={t('chat.settings.top_p.tip')}>
-          <QuestionIcon />
-        </Tooltip>
-      </Row>
-      <Row align="middle" gutter={20}>
         <Col span={20}>
-          <Slider
-            min={0}
-            max={1}
-            onChange={setTopP}
-            onChangeComplete={onTopPChange}
-            value={typeof topP === 'number' ? topP : 1}
-            marks={{ 0: '0', 1: '1' }}
-            step={0.01}
-          />
+          <Label>
+            {t('chat.settings.top_p')}
+            <Tooltip title={t('chat.settings.top_p.tip')}>
+              <QuestionIcon />
+            </Tooltip>
+          </Label>
         </Col>
         <Col span={4}>
-          <InputNumber
+          <EditableNumber
             min={0}
             max={1}
             step={0.01}
@@ -282,29 +287,32 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
           />
         </Col>
       </Row>
-      <Row align="middle">
-        <Label>
-          {t('chat.settings.context_count')}{' '}
-          <Tooltip title={t('chat.settings.context_count.tip')}>
-            <QuestionIcon />
-          </Tooltip>
-        </Label>
-      </Row>
-      <Row align="middle" gutter={20}>
-        <Col span={20}>
+      <Row align="middle" gutter={24}>
+        <Col span={24}>
           <Slider
             min={0}
-            max={100}
-            onChange={setContextCount}
-            onChangeComplete={onContextCountChange}
-            value={typeof contextCount === 'number' ? contextCount : 0}
-            marks={{ 0: '0', 25: '25', 50: '50', 75: '75', 100: t('chat.settings.max') }}
-            step={1}
-            tooltip={{ formatter: formatSliderTooltip }}
+            max={1}
+            onChange={setTopP}
+            onChangeComplete={onTopPChange}
+            value={typeof topP === 'number' ? topP : 1}
+            marks={{ 0: '0', 1: '1' }}
+            step={0.01}
           />
         </Col>
+      </Row>
+      <Divider style={{ margin: '10px 0' }} />
+
+      <Row align="middle">
+        <Col span={20}>
+          <Label>
+            {t('chat.settings.context_count')}{' '}
+            <Tooltip title={t('chat.settings.context_count.tip')}>
+              <QuestionIcon />
+            </Tooltip>
+          </Label>
+        </Col>
         <Col span={4}>
-          <InputNumber
+          <EditableNumber
             min={0}
             max={20}
             step={1}
@@ -320,6 +328,20 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
           />
         </Col>
       </Row>
+      <Row align="middle" gutter={24}>
+        <Col span={24}>
+          <Slider
+            min={0}
+            max={100}
+            onChange={setContextCount}
+            onChangeComplete={onContextCountChange}
+            value={typeof contextCount === 'number' ? contextCount : 0}
+            marks={{ 0: '0', 25: '25', 50: '50', 75: '75', 100: t('chat.settings.max') }}
+            step={1}
+            tooltip={{ formatter: formatSliderTooltip }}
+          />
+        </Col>
+      </Row>
       <Divider style={{ margin: '10px 0' }} />
       <SettingRow style={{ minHeight: 30 }}>
         <HStack alignItems="center">
@@ -382,16 +404,18 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
       <Divider style={{ margin: '10px 0' }} />
       <SettingRow style={{ minHeight: 30 }}>
         <Label>{t('assistants.settings.tool_use_mode')}</Label>
-        <Select
+        <Selector
           value={toolUseMode}
-          style={{ width: 110 }}
+          options={[
+            { label: t('assistants.settings.tool_use_mode.prompt'), value: 'prompt' },
+            { label: t('assistants.settings.tool_use_mode.function'), value: 'function' }
+          ]}
           onChange={(value) => {
             setToolUseMode(value)
             updateAssistantSettings({ toolUseMode: value })
-          }}>
-          <Select.Option value="prompt">{t('assistants.settings.tool_use_mode.prompt')}</Select.Option>
-          <Select.Option value="function">{t('assistants.settings.tool_use_mode.function')}</Select.Option>
-        </Select>
+          }}
+          size={14}
+        />
       </SettingRow>
       <Divider style={{ margin: '10px 0' }} />
       <SettingRow style={{ minHeight: 30 }}>
@@ -409,20 +433,26 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
               onChange={(e) => onUpdateCustomParameter(index, 'name', e.target.value)}
             />
           </Col>
-          <Col span={4}>
+          <Col span={6}>
             <Select
               value={param.type}
               onChange={(value) => onUpdateCustomParameter(index, 'type', value)}
-              style={{ width: '100%' }}>
+              style={{ width: '100%' }}
+              suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}>
               <Select.Option value="string">{t('models.parameter_type.string')}</Select.Option>
               <Select.Option value="number">{t('models.parameter_type.number')}</Select.Option>
               <Select.Option value="boolean">{t('models.parameter_type.boolean')}</Select.Option>
               <Select.Option value="json">{t('models.parameter_type.json')}</Select.Option>
             </Select>
           </Col>
-          <Col span={12}>{renderParameterValueInput(param, index)}</Col>
+          <Col span={10}>{renderParameterValueInput(param, index)}</Col>
           <Col span={2} style={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button icon={<DeleteOutlined />} onClick={() => onDeleteCustomParameter(index)} danger />
+            <Button
+              color="danger"
+              variant="filled"
+              icon={<DeleteOutlined />}
+              onClick={() => onDeleteCustomParameter(index)}
+            />
           </Col>
         </Row>
       ))}
@@ -440,13 +470,16 @@ const Container = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  overflow: hidden;
   padding: 5px;
 `
 
 const Label = styled.p`
   margin-right: 5px;
   font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
 `
 
 const QuestionIcon = styled(QuestionCircleOutlined)`
@@ -455,4 +488,21 @@ const QuestionIcon = styled(QuestionCircleOutlined)`
   color: var(--color-text-3);
 `
 
+const ModelSelectButton = styled(Button)`
+  max-width: 300px;
+  justify-content: flex-start;
+
+  .ant-btn-icon {
+    flex-shrink: 0;
+  }
+`
+
+const ModelName = styled.span`
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+`
+
 export default AssistantModelSettings
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx
index 02b8185046..2925a9ea60 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx
@@ -65,7 +65,7 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant }
       <HStack gap={8} alignItems="center">
         <Popover content={<EmojiPicker onEmojiClick={handleEmojiSelect} />} arrow trigger="click">
           <EmojiButtonWrapper>
-            <Button style={{ fontSize: 20, padding: '4px', minWidth: '32px', height: '32px' }}>{emoji}</Button>
+            <Button style={{ fontSize: 18, padding: '4px', minWidth: '28px', height: '28px' }}>{emoji}</Button>
             {emoji && (
               <CloseCircleFilled
                 className="delete-icon"
diff --git a/src/renderer/src/pages/settings/AssistantSettings/index.tsx b/src/renderer/src/pages/settings/AssistantSettings/index.tsx
index 474dbb6625..31fee1320f 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/index.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/index.tsx
@@ -82,15 +82,14 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ resolve, tab, ...prop
       styles={{
         content: {
           padding: 0,
-          overflow: 'hidden',
-          background: 'var(--color-background)'
+          overflow: 'hidden'
         },
         header: { padding: '10px 15px', borderBottom: '0.5px solid var(--color-border)', margin: 0, borderRadius: 0 },
         body: {
           padding: 0
         }
       }}
-      width="70vw"
+      width="min(800px, 70vw)"
       height="80vh"
       centered>
       <HStack>
@@ -141,15 +140,14 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ resolve, tab, ...prop
 }
 
 const LeftMenu = styled.div`
-  background-color: var(--color-background);
   height: calc(80vh - 20px);
   border-right: 0.5px solid var(--color-border);
 `
 
 const Settings = styled.div`
   flex: 1;
-  padding: 10px 20px;
-  height: calc(80vh - 20px);
+  padding: 16px 16px;
+  height: calc(80vh - 16px);
   overflow-y: scroll;
 `
 
@@ -159,6 +157,7 @@ const StyledModal = styled(Modal)`
   }
   .ant-modal-close {
     top: 4px;
+    right: 4px;
   }
   .ant-menu-item {
     height: 36px;