diff --git a/web/src/components/settings/DrawingSetting.js b/web/src/components/settings/DrawingSetting.js
new file mode 100644
index 00000000..d2cdce1e
--- /dev/null
+++ b/web/src/components/settings/DrawingSetting.js
@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import { Card, Spin } from '@douyinfe/semi-ui';
+import SettingsDrawing from '../../pages/Setting/Drawing/SettingsDrawing.js';
+import { API, showError } from '../../helpers';
+
+const DrawingSetting = () => {
+  let [inputs, setInputs] = useState({
+    /* 绘图设置 */
+    DrawingEnabled: false,
+    MjNotifyEnabled: false,
+    MjAccountFilterEnabled: false,
+    MjForwardUrlEnabled: false,
+    MjModeClearEnabled: false,
+    MjActionCheckSuccessEnabled: false,
+  });
+
+  let [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (item.key.endsWith('Enabled')) {
+          newInputs[item.key] = item.value === 'true' ? true : false;
+        } else {
+          newInputs[item.key] = item.value;
+        }
+      });
+
+      setInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  async function onRefresh() {
+    try {
+      setLoading(true);
+      await getOptions();
+    } catch (error) {
+      showError('刷新失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    onRefresh();
+  }, []);
+
+  return (
+    <>
+      <Spin spinning={loading} size='large'>
+        {/* 绘图设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsDrawing options={inputs} refresh={onRefresh} />
+        </Card>
+      </Spin>
+    </>
+  );
+};
+
+export default DrawingSetting; 
\ No newline at end of file
diff --git a/web/src/components/settings/OperationSetting.js b/web/src/components/settings/OperationSetting.js
index 779d80a6..9b0e772c 100644
--- a/web/src/components/settings/OperationSetting.js
+++ b/web/src/components/settings/OperationSetting.js
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Spin } from '@douyinfe/semi-ui';
 import SettingsGeneral from '../../pages/Setting/Operation/SettingsGeneral.js';
-import SettingsDrawing from '../../pages/Setting/Operation/SettingsDrawing.js';
 import SettingsSensitiveWords from '../../pages/Setting/Operation/SettingsSensitiveWords.js';
 import SettingsLog from '../../pages/Setting/Operation/SettingsLog.js';
 import SettingsDataDashboard from '../../pages/Setting/Operation/SettingsDataDashboard.js';
@@ -28,14 +27,6 @@ const OperationSetting = () => {
     DemoSiteEnabled: false,
     SelfUseModeEnabled: false,
 
-    /* 绘图设置 */
-    DrawingEnabled: false,
-    MjNotifyEnabled: false,
-    MjAccountFilterEnabled: false,
-    MjForwardUrlEnabled: false,
-    MjModeClearEnabled: false,
-    MjActionCheckSuccessEnabled: false,
-
     /* 敏感词设置 */
     CheckSensitiveEnabled: false,
     CheckSensitiveOnPromptEnabled: false,
@@ -103,10 +94,6 @@ const OperationSetting = () => {
         <Card style={{ marginTop: '10px' }}>
           <SettingsGeneral options={inputs} refresh={onRefresh} />
         </Card>
-        {/* 绘图设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsDrawing options={inputs} refresh={onRefresh} />
-        </Card>
         {/* 屏蔽词过滤设置 */}
         <Card style={{ marginTop: '10px' }}>
           <SettingsSensitiveWords options={inputs} refresh={onRefresh} />
diff --git a/web/src/pages/Setting/Operation/SettingsDrawing.js b/web/src/pages/Setting/Drawing/SettingsDrawing.js
similarity index 100%
rename from web/src/pages/Setting/Operation/SettingsDrawing.js
rename to web/src/pages/Setting/Drawing/SettingsDrawing.js
diff --git a/web/src/pages/Setting/index.js b/web/src/pages/Setting/index.js
index 591bfb34..09b9acdf 100644
--- a/web/src/pages/Setting/index.js
+++ b/web/src/pages/Setting/index.js
@@ -10,7 +10,8 @@ import {
   Cog,
   MoreHorizontal,
   LayoutDashboard,
-  MessageSquare
+  MessageSquare,
+  Palette
 } from 'lucide-react';
 
 import SystemSetting from '../../components/settings/SystemSetting.js';
@@ -22,6 +23,7 @@ import ModelSetting from '../../components/settings/ModelSetting.js';
 import DashboardSetting from '../../components/settings/DashboardSetting.js';
 import RatioSetting from '../../components/settings/RatioSetting.js';
 import ChatsSetting from '../../components/settings/ChatsSetting.js';
+import DrawingSetting from '../../components/settings/DrawingSetting.js';
 
 const Setting = () => {
   const { t } = useTranslation();
@@ -51,6 +53,16 @@ const Setting = () => {
       content: <ChatsSetting />,
       itemKey: 'chats',
     });
+    panes.push({
+      tab: (
+        <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+          <Palette size={18} />
+          {t('绘图设置')}
+        </span>
+      ),
+      content: <DrawingSetting />,
+      itemKey: 'drawing',
+    });
     panes.push({
       tab: (
         <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
@@ -131,6 +143,7 @@ const Setting = () => {
         <Layout.Content>
           <Tabs
             type='card'
+            collapsible
             activeKey={tabActiveKey}
             onChange={(key) => onChangeTab(key)}
           >