From 35578ce2cbe4acba968afa817fd8c7da7de2dbcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E6=8C=AF=E6=B4=AA?= <2976151305@qq.com>
Date: Thu, 4 Jan 2024 16:38:07 +0800
Subject: [PATCH] feat: unified UI style

---
 web/app/i18n.ts                               |  2 +
 web/components/chart/autoChart/index.tsx      | 22 +++--
 web/components/chart/bar-chart.tsx            | 51 +++++------
 web/components/chart/line-chart.tsx           | 91 +++++++++----------
 web/components/chart/table-chart.tsx          | 55 +++++------
 web/components/chat/chat-container.tsx        |  6 +-
 .../chat/chat-content/code-preview.tsx        |  7 +-
 web/components/chat/chat-content/config.tsx   |  4 +-
 web/components/chat/chat-content/index.tsx    |  6 +-
 web/components/chat/completion.tsx            |  4 +-
 web/components/chat/header/index.tsx          |  2 +-
 web/components/database/db-card.tsx           |  4 +-
 web/components/icons/colorful-dashboard.tsx   | 43 +++------
 web/components/icons/colorful-data.tsx        | 83 ++++-------------
 web/components/icons/colorful-db.tsx          | 62 ++++++++++++-
 web/components/icons/colorful-doc.tsx         | 39 ++------
 web/components/icons/colorful-excel.tsx       | 26 +++---
 web/components/icons/colorful-plugin.tsx      | 44 +--------
 web/components/layout/side-bar.tsx            | 44 ++++-----
 web/defaultTheme.ts                           | 28 ++----
 web/pages/_app.tsx                            | 17 +++-
 web/pages/index.tsx                           | 14 +--
 web/pages/knowledge/index.tsx                 |  2 +-
 web/styles/globals.css                        | 30 ++++--
 web/tailwind.config.js                        |  8 ++
 25 files changed, 318 insertions(+), 376 deletions(-)

diff --git a/web/app/i18n.ts b/web/app/i18n.ts
index d15310b67..d1c26db07 100644
--- a/web/app/i18n.ts
+++ b/web/app/i18n.ts
@@ -181,6 +181,7 @@ const resources = {
       Advices: 'Advices',
       Retry: 'Retry',
       Load_more: 'load more',
+      new_chat: 'New Chat',
     },
   },
   zh: {
@@ -362,6 +363,7 @@ const resources = {
       Advices: '自动推荐',
       Retry: '重试',
       Load_more: '加载更多',
+      new_chat: '创建会话',
     },
   },
 };
diff --git a/web/components/chart/autoChart/index.tsx b/web/components/chart/autoChart/index.tsx
index cefaae761..c9fff8fa1 100644
--- a/web/components/chart/autoChart/index.tsx
+++ b/web/components/chart/autoChart/index.tsx
@@ -8,12 +8,15 @@ import { useEffect, useMemo, useState } from 'react';
 import { defaultAdvicesFilter } from './advisor/utils';
 import { AutoChartProps, ChartType, CustomAdvisorConfig, CustomChart, Specification } from './types';
 import { customCharts } from './charts';
+import { useColorScheme } from '@mui/joy';
 
 const { Option } = Select;
 
 export const AutoChart = (props: AutoChartProps) => {
   const { data, chartType, scopeOfCharts, ruleConfig } = props;
 
+  const { mode } = useColorScheme();
+
   const [advisor, setAdvisor] = useState<Advisor>();
   const [advices, setAdvices] = useState<Advice[]>([]);
   const [renderChartType, setRenderChartType] = useState<ChartType>();
@@ -54,7 +57,15 @@ export const AutoChart = (props: AutoChartProps) => {
       const chartTypeInput = renderChartType ?? advices[0].type;
       const spec: Specification = advices?.find((item: Advice) => item.type === chartTypeInput)?.spec ?? undefined;
       if (spec) {
-        return <Chart key={chartTypeInput} options={spec} />;
+        return (
+          <Chart
+            key={chartTypeInput}
+            options={{
+              ...spec,
+              theme: mode,
+            }}
+          />
+        );
       }
     }
   }, [advices, renderChartType]);
@@ -62,13 +73,13 @@ export const AutoChart = (props: AutoChartProps) => {
   if (renderChartType) {
     return (
       <div>
-        <Row justify="start">
+        <Row justify="start" className="mb-2">
           <Col>{i18n.t('Advices')}</Col>
           <Col style={{ marginLeft: 24 }}>
             <Select
+              className="w-52"
               value={renderChartType}
               placeholder={'Chart Switcher'}
-              style={{ width: '180px' }}
               onChange={(value) => setRenderChartType(value)}
               size={'small'}
             >
@@ -78,10 +89,7 @@ export const AutoChart = (props: AutoChartProps) => {
                 return (
                   <Option key={item.type} value={item.type}>
                     <Tooltip title={name} placement={'right'}>
-                      <div style={{ display: 'flex', alignItems: 'center' }}>
-                        <DownOutlined />
-                        <div style={{ marginLeft: '2px' }}>{name}</div>
-                      </div>
+                      <div>{name}</div>
                     </Tooltip>
                   </Option>
                 );
diff --git a/web/components/chart/bar-chart.tsx b/web/components/chart/bar-chart.tsx
index 83487b3c5..66bfeb945 100644
--- a/web/components/chart/bar-chart.tsx
+++ b/web/components/chart/bar-chart.tsx
@@ -1,36 +1,33 @@
 import { ChartData } from '@/types/chat';
 import { Chart } from '@berryv/g2-react';
-import { Card, CardContent, Typography } from '@mui/joy';
+import { useColorScheme } from '@mui/joy';
 
 export default function BarChart({ chart }: { key: string; chart: ChartData }) {
+  const { mode } = useColorScheme();
+
   return (
-    <div className="flex-1 min-w-0">
-      <Card className="h-full" sx={{ background: 'transparent' }}>
-        <CardContent className="h-full">
-          <Typography gutterBottom component="div">
-            {chart.chart_name}
-          </Typography>
-          <Typography gutterBottom level="body3">
-            {chart.chart_desc}
-          </Typography>
-          <div className="h-[300px]">
-            <Chart
-              style={{ height: '100%' }}
-              options={{
-                autoFit: true,
-                type: 'interval',
-                data: chart.values,
-                encode: { x: 'name', y: 'value', color: 'type' },
-                axis: {
-                  x: {
-                    labelAutoRotate: false,
-                  },
+    <div className="flex-1 min-w-0 p-4 bg-white dark:bg-theme-dark-container rounded">
+      <div className="h-full">
+        <div className="mb-2">{chart.chart_name}</div>
+        <div className="opacity-80 text-sm mb-2">{chart.chart_desc}</div>
+        <div className="h-[300px]">
+          <Chart
+            style={{ height: '100%' }}
+            options={{
+              autoFit: true,
+              theme: mode,
+              type: 'interval',
+              data: chart.values,
+              encode: { x: 'name', y: 'value', color: 'type' },
+              axis: {
+                x: {
+                  labelAutoRotate: false,
                 },
-              }}
-            />
-          </div>
-        </CardContent>
-      </Card>
+              },
+            }}
+          />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/web/components/chart/line-chart.tsx b/web/components/chart/line-chart.tsx
index d10dc01af..80f7d7da1 100644
--- a/web/components/chart/line-chart.tsx
+++ b/web/components/chart/line-chart.tsx
@@ -1,59 +1,56 @@
 import { ChartData } from '@/types/chat';
-import { Card, CardContent, Typography } from '@mui/joy';
+import { useColorScheme } from '@mui/joy';
 import { Chart } from '@berryv/g2-react';
 
 export default function LineChart({ chart }: { chart: ChartData }) {
+  const { mode } = useColorScheme();
+
   return (
-    <div className="flex-1 min-w-0">
-      <Card className="h-full" sx={{ background: 'transparent' }}>
-        <CardContent className="h-full">
-          <Typography gutterBottom component="div">
-            {chart.chart_name}
-          </Typography>
-          <Typography gutterBottom level="body3">
-            {chart.chart_desc}
-          </Typography>
-          <div className="h-[300px]">
-            <Chart
-              style={{ height: '100%' }}
-              options={{
-                autoFit: true,
-                type: 'view',
-                data: chart.values,
-                children: [
-                  {
-                    type: 'line',
-                    encode: {
-                      x: 'name',
-                      y: 'value',
-                      color: 'type',
-                      shape: 'smooth',
-                    },
+    <div className="flex-1 min-w-0 p-4 bg-white dark:bg-theme-dark-container rounded">
+      <div className="h-full">
+        <div className="mb-2">{chart.chart_name}</div>
+        <div className="opacity-80 text-sm mb-2">{chart.chart_desc}</div>
+        <div className="h-[300px]">
+          <Chart
+            style={{ height: '100%' }}
+            options={{
+              autoFit: true,
+              theme: mode,
+              type: 'view',
+              data: chart.values,
+              children: [
+                {
+                  type: 'line',
+                  encode: {
+                    x: 'name',
+                    y: 'value',
+                    color: 'type',
+                    shape: 'smooth',
                   },
-                  {
-                    type: 'area',
-                    encode: {
-                      x: 'name',
-                      y: 'value',
-                      color: 'type',
-                      shape: 'smooth',
-                    },
-                    legend: false,
-                    style: {
-                      fillOpacity: 0.15,
-                    },
+                },
+                {
+                  type: 'area',
+                  encode: {
+                    x: 'name',
+                    y: 'value',
+                    color: 'type',
+                    shape: 'smooth',
                   },
-                ],
-                axis: {
-                  x: {
-                    labelAutoRotate: false,
+                  legend: false,
+                  style: {
+                    fillOpacity: 0.15,
                   },
                 },
-              }}
-            />
-          </div>
-        </CardContent>
-      </Card>
+              ],
+              axis: {
+                x: {
+                  labelAutoRotate: false,
+                },
+              },
+            }}
+          />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/web/components/chart/table-chart.tsx b/web/components/chart/table-chart.tsx
index 8d042579a..1df9f07dd 100644
--- a/web/components/chart/table-chart.tsx
+++ b/web/components/chart/table-chart.tsx
@@ -1,41 +1,36 @@
 import { ChartData } from '@/types/chat';
-import { Card, CardContent, Typography, Table } from '@mui/joy';
+import { Table } from '@mui/joy';
 import { groupBy } from 'lodash';
 
 export default function TableChart({ chart }: { key: string; chart: ChartData }) {
   const data = groupBy(chart.values, 'type');
+
   return (
-    <div className="flex-1 min-w-0">
-      <Card className="h-full overflow-auto" sx={{ background: 'transparent' }}>
-        <CardContent className="h-full">
-          <Typography gutterBottom component="div">
-            {chart.chart_name}
-          </Typography>
-          <Typography gutterBottom level="body3">
-            {chart.chart_desc}
-          </Typography>
-          <div className="flex-1">
-            <Table aria-label="basic table" stripe="odd" hoverRow borderAxis="bothBetween">
-              <thead>
-                <tr>
-                  {Object.keys(data).map((key) => (
-                    <th key={key}>{key}</th>
+    <div className="flex-1 min-w-0 p-4 bg-white dark:bg-theme-dark-container rounded">
+      <div className="h-full">
+        <div className="mb-2">{chart.chart_name}</div>
+        <div className="opacity-80 text-sm mb-2">{chart.chart_desc}</div>
+        <div className="flex-1">
+          <Table aria-label="basic table" stripe="odd" hoverRow borderAxis="bothBetween">
+            <thead>
+              <tr>
+                {Object.keys(data).map((key) => (
+                  <th key={key}>{key}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {Object.values(data)?.[0]?.map((value, i) => (
+                <tr key={i}>
+                  {Object.keys(data)?.map((k) => (
+                    <td key={k}>{data?.[k]?.[i].value || ''}</td>
                   ))}
                 </tr>
-              </thead>
-              <tbody>
-                {Object.values(data)?.[0]?.map((value, i) => (
-                  <tr key={i}>
-                    {Object.keys(data)?.map((k) => (
-                      <td key={k}>{data?.[k]?.[i].value || ''}</td>
-                    ))}
-                  </tr>
-                ))}
-              </tbody>
-            </Table>
-          </div>
-        </CardContent>
-      </Card>
+              ))}
+            </tbody>
+          </Table>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/web/components/chat/chat-container.tsx b/web/components/chat/chat-container.tsx
index fd35a9083..180fc3479 100644
--- a/web/components/chat/chat-container.tsx
+++ b/web/components/chat/chat-container.tsx
@@ -109,7 +109,7 @@ const ChatContainer = () => {
       />
       <div className="px-4 flex flex-1 flex-wrap overflow-hidden relative">
         {!!chartsData?.length && (
-          <div className="w-full xl:w-3/4 h-3/5 xl:pr-4 xl:h-full overflow-y-auto">
+          <div className="w-full pb-4 xl:w-3/4 h-3/5 xl:pr-4 xl:h-full overflow-y-auto">
             <Chart chartsData={chartsData} />
           </div>
         )}
@@ -122,8 +122,8 @@ const ChatContainer = () => {
         )}
         {/** chat panel */}
         <div
-          className={classNames('flex flex-1 flex-col overflow-hidden', {
-            'px-0 xl:pl-4 h-2/5 xl:h-full border-t xl:border-t-0 xl:border-l': scene === 'chat_dashboard',
+          className={classNames('flex flex-1 flex-col', {
+            'px-0 xl:pl-4 h-2/5 w-full xl:w-auto xl:h-full border-t xl:border-t-0 xl:border-l dark:border-gray-800': scene === 'chat_dashboard',
             'h-full lg:px-8': scene !== 'chat_dashboard',
           })}
         >
diff --git a/web/components/chat/chat-content/code-preview.tsx b/web/components/chat/chat-content/code-preview.tsx
index 1242d8aae..5e69a9fce 100644
--- a/web/components/chat/chat-content/code-preview.tsx
+++ b/web/components/chat/chat-content/code-preview.tsx
@@ -1,10 +1,13 @@
 import { Button, message } from 'antd';
 import { CopyOutlined } from '@ant-design/icons';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneDark, coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import copy from 'copy-to-clipboard';
+import { useColorScheme } from '@mui/joy';
 
 export function CodePreview({ code, language }: { code: string; language: string }) {
+  const { mode } = useColorScheme();
+
   return (
     <div className="relative">
       <Button
@@ -16,7 +19,7 @@ export function CodePreview({ code, language }: { code: string; language: string
           message[success ? 'success' : 'error'](success ? 'Copy success' : 'Copy failed');
         }}
       />
-      <SyntaxHighlighter language={language} style={oneDark}>
+      <SyntaxHighlighter language={language} style={mode === 'dark' ? coldarkDark : oneDark}>
         {code}
       </SyntaxHighlighter>
     </div>
diff --git a/web/components/chat/chat-content/config.tsx b/web/components/chat/chat-content/config.tsx
index a7c5b16cc..583cacc4f 100644
--- a/web/components/chat/chat-content/config.tsx
+++ b/web/components/chat/chat-content/config.tsx
@@ -37,10 +37,10 @@ const basicComponents: MarkdownComponent = {
 
     return (
       <>
-        {!inline && match ? (
+        {!inline ? (
           <CodePreview code={context} language={match?.[1] ?? 'javascript'} />
         ) : (
-          <code {...props} style={style} className="px-[6px] py-[2px] rounded bg-gray-700 text-gray-100 dark:bg-gray-100 dark:text-gray-800 text-sm">
+          <code {...props} style={style} className="p-1 mx-1 rounded bg-theme-light dark:bg-theme-dark text-sm">
             {children}
           </code>
         )}
diff --git a/web/components/chat/chat-content/index.tsx b/web/components/chat/chat-content/index.tsx
index 80e023892..84d06ad6e 100644
--- a/web/components/chat/chat-content/index.tsx
+++ b/web/components/chat/chat-content/index.tsx
@@ -136,8 +136,8 @@ function ChatContent({ children, content, isChartChat, onLinkClick }: PropsWithC
 
   return (
     <div
-      className={classNames('relative flex flex-wrap w-full px-2 sm:px-4 py-2 sm:py-4 rounded-xl break-words', {
-        'bg-slate-100 dark:bg-[#353539]': isRobot,
+      className={classNames('relative flex flex-wrap w-full px-2 sm:px-4 py-2 sm:py-6 rounded-xl break-words', {
+        'bg-white dark:bg-[#232734]': isRobot,
         'lg:w-full xl:w-full pl-0': ['chat_with_db_execute', 'chat_dashboard'].includes(scene),
       })}
     >
@@ -151,7 +151,7 @@ function ChatContent({ children, content, isChartChat, onLinkClick }: PropsWithC
         {isRobot && isChartChat && typeof context === 'object' && (
           <div>
             {`[${context.template_name}]: `}
-            <span className="text-[#1677ff] cursor-pointer" onClick={onLinkClick}>
+            <span className="text-theme-primary cursor-pointer" onClick={onLinkClick}>
               <CodeOutlined className="mr-1" />
               {context.template_introduce || 'More Details'}
             </span>
diff --git a/web/components/chat/completion.tsx b/web/components/chat/completion.tsx
index 5f052f48c..046236b47 100644
--- a/web/components/chat/completion.tsx
+++ b/web/components/chat/completion.tsx
@@ -156,7 +156,7 @@ const Completion = ({ messages, onSubmit }: Props) => {
                   }}
                 >
                   {content.role === 'view' && (
-                    <div className="flex w-full pt-2 md:pt-4 border-t border-gray-200 mt-2 md:mt-4 pl-2">
+                    <div className="flex w-full pt-2 md:pt-4 border-t border-gray-200 dark:border-theme-dark mt-2 md:mt-4 pl-2">
                       {scene === 'chat_knowledge' && content.retry ? (
                         <Button onClick={handleRetry} slots={{ root: IconButton }} slotProps={{ root: { variant: 'plain', color: 'primary' } }}>
                           <RedoOutlined />
@@ -198,7 +198,7 @@ const Completion = ({ messages, onSubmit }: Props) => {
       </div>
       <div
         className={classNames(
-          'relative after:absolute after:-top-8 after:h-8 after:w-full after:bg-gradient-to-t after:from-white after:to-transparent dark:after:from-[#212121]',
+          'relative after:absolute after:-top-8 after:h-8 after:w-full after:bg-gradient-to-t after:from-theme-light after:to-transparent dark:after:from-theme-dark',
           {
             'cursor-not-allowed': scene === 'chat_excel' && !currentDialogue?.select_param,
           },
diff --git a/web/components/chat/header/index.tsx b/web/components/chat/header/index.tsx
index 6c41cf613..8e10eed1b 100644
--- a/web/components/chat/header/index.tsx
+++ b/web/components/chat/header/index.tsx
@@ -18,7 +18,7 @@ function Header({ refreshHistory, modelChange }: Props) {
   const { scene, refreshDialogList } = useContext(ChatContext);
 
   return (
-    <div className="w-full py-2 px-4 md:px-4 flex flex-wrap items-center justify-center border-b border-gray-100 gap-1 md:gap-4">
+    <div className="w-full py-2 px-4 md:px-4 flex flex-wrap items-center justify-center gap-1 md:gap-4">
       {/* Models Selector */}
       <ModelSelector onChange={modelChange} />
       {/* DB Selector */}
diff --git a/web/components/database/db-card.tsx b/web/components/database/db-card.tsx
index 399e522c8..a42f9686c 100644
--- a/web/components/database/db-card.tsx
+++ b/web/components/database/db-card.tsx
@@ -16,8 +16,8 @@ function DBCard({ info, onClick }: Props) {
 
   return (
     <div
-      className={`relative flex flex-col py-4 px-4 w-72 h-32 cursor-pointer rounded-lg justify-between text-black bg-white border-gray-200 border hover:shadow-md dark:border-gray-600 dark:bg-black dark:text-white dark:hover:border-white transition-all ${
-        info.disabled ? 'grayscale cursor-no-drop' : ''
+      className={`relative flex flex-col py-4 px-4 w-72 h-32 rounded-lg justify-between text-black bg-white shadow-[0_8px_16px_-10px_rgba(100,100,100,.08)] hover:shadow-[0_14px_20px_-10px_rgba(100,100,100,.15)] dark:bg-[#232734] dark:text-white dark:hover:border-white transition-[transfrom_shadow] duration-300 hover:-translate-y-1 ${
+        info.disabled ? 'grayscale cursor-no-drop' : 'cursor-pointer'
       }`}
       onClick={handleClick}
     >
diff --git a/web/components/icons/colorful-dashboard.tsx b/web/components/icons/colorful-dashboard.tsx
index a0aaceff4..4f3fd7baf 100644
--- a/web/components/icons/colorful-dashboard.tsx
+++ b/web/components/icons/colorful-dashboard.tsx
@@ -1,43 +1,26 @@
 function ColorfulDashboard() {
   return (
-    <svg viewBox="0 0 1059 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11020" className="w-full h-full">
+    <svg viewBox="0 0 1116 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1581" className="w-full h-full">
       <path
-        d="M617.931034 971.034483H335.448276c62.834759 0 70.62069-140.994207 70.62069-211.862069h247.172413c0 70.867862 7.785931 211.862069 70.62069 211.862069h-105.931035z"
-        fill="#4DB5E3"
-        p-id="11021"
+        d="M80.75 80.75m67.14674945 0l805.76099677 0q67.14674945 0 67.14674947 67.14674945l0 604.32074759q0 67.14674945-67.14674947 67.14674945l-805.76099677 0q-67.14674945 0-67.14674945-67.14674945l0-604.32074759q0-67.14674945 67.14674945-67.14674945Z"
+        fill="#36CFC9"
+        p-id="1582"
       ></path>
       <path
-        d="M282.482759 953.37931h512a35.310345 35.310345 0 0 1 0 70.62069H282.482759a35.310345 35.310345 0 0 1 0-70.62069z"
-        fill="#47C5FC"
-        p-id="11022"
+        d="M1020.80449568 685.07074759v67.14674945a67.14674945 67.14674945 0 0 1-67.14674946 67.14674945h-308.20358111l91.3195796 100.72012459-24.84429735 22.49416172L600.46584251 819.36424649h-100.72012459L389.62504831 943.25 364.78075097 920.08437108l91.31957961-100.72012459H147.89674945a67.14674945 67.14674945 0 0 1-67.14674945-67.14674945v-67.14674946z"
+        fill="#08979C"
+        p-id="1583"
       ></path>
       <path
-        d="M0 0m73.145379 0l913.019587 0q73.145379 0 73.145379 73.145379l0 683.502345q0 73.145379-73.145379 73.145379l-913.019587 0q-73.145379 0-73.145379-73.145379l0-683.502345q0-73.145379 73.145379-73.145379Z"
-        fill="#47C5FC"
-        p-id="11023"
+        d="M416.48374894 282.19024919v335.7337481H315.76362434V282.19024919z m167.86687404 134.29349975v201.44024834h-100.72012459v-201.44024834z m167.86687406 67.14674945v134.2934989h-100.7201246v-134.2934989z m-225.94881252-302.16037379v141.34390829h201.4402492V272.11823698L819.36424649 341.27938889l-91.3195796 63.45367858V356.38740719h-239.71389641V215.04349975H315.76362434V181.4701246z"
+        fill="#B5F5EC"
+        p-id="1584"
       ></path>
-      <path d="M52.965517 52.965517h953.379311v723.862069H52.965517z" fill="#FFFFFF" p-id="11024"></path>
       <path
-        d="M600.275862 564.965517h335.448276a17.655172 17.655172 0 0 1 0 35.310345H600.275862a17.655172 17.655172 0 0 1 0-35.310345z m0 88.275862h205.78869a17.655172 17.655172 0 0 1 0 35.310345H600.275862a17.655172 17.655172 0 0 1 0-35.310345z m278.068966 0H935.724138a17.655172 17.655172 0 0 1 0 35.310345h-57.37931a17.655172 17.655172 0 0 1 0-35.310345z"
-        fill="#C7EAF9"
-        p-id="11025"
+        d="M550.77724783 752.21749704m-33.57337513 0a33.57337515 33.57337515 0 1 0 67.14675028 0 33.57337515 33.57337515 0 1 0-67.14675028 0Z"
+        fill="#FFFFFF"
+        p-id="1585"
       ></path>
-      <path
-        d="M194.206897 211.862069h282.482758a17.655172 17.655172 0 1 1 0 35.310345H194.206897a17.655172 17.655172 0 1 1 0-35.310345z m0 88.275862h171.59062a17.655172 17.655172 0 1 1 0 35.310345H194.206897a17.655172 17.655172 0 1 1 0-35.310345z m238.344827 0H476.689655a17.655172 17.655172 0 1 1 0 35.310345h-44.137931a17.655172 17.655172 0 1 1 0-35.310345z"
-        fill="#C7EAF9"
-        p-id="11026"
-      ></path>
-      <path
-        d="M194.206897 176.551724H141.241379v52.965517a17.655172 17.655172 0 1 1-35.310345 0V158.896552a17.655172 17.655172 0 0 1 17.655173-17.655173h70.62069a17.655172 17.655172 0 0 1 0 35.310345z"
-        fill="#C7EAF9"
-        p-id="11027"
-      ></path>
-      <path d="M317.793103 564.965517h141.24138a141.241379 141.241379 0 1 1-141.24138-141.241379v141.241379z" fill="#47C5FC" p-id="11028"></path>
-      <path d="M335.448276 406.068966a141.241379 141.241379 0 0 1 141.241379 141.241379h-141.241379v-141.241379z" fill="#FFDE21" p-id="11029"></path>
-      <path d="M582.62069 176.551724h52.965517v247.172414h-52.965517z" fill="#FFDE21" p-id="11030"></path>
-      <path d="M688.551724 247.172414h52.965517v176.551724h-52.965517z" fill="#47C5FC" p-id="11031"></path>
-      <path d="M794.482759 300.137931h52.965517v123.586207h-52.965517z" fill="#47C5FC" p-id="11032"></path>
-      <path d="M900.413793 353.103448h52.965517v70.62069h-52.965517z" fill="#FFDE21" p-id="11033"></path>
     </svg>
   );
 }
diff --git a/web/components/icons/colorful-data.tsx b/web/components/icons/colorful-data.tsx
index 6bf8faf65..a2d02857f 100644
--- a/web/components/icons/colorful-data.tsx
+++ b/web/components/icons/colorful-data.tsx
@@ -1,82 +1,31 @@
 function ColorfulData() {
   return (
-    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13568" className="w-full h-full">
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1722" className="w-full h-full">
       <path
-        d="M185.66 459H70.5c-5.54 0-10 4.48-10 10v373.26c0 5.52 4.46 10 10 10h115.16c5.52 0 10-4.48 10-10V469c0-5.52-4.48-10-10-10z m-10 373.26H80.5V479h95.16v353.26z"
-        fill="#23130D"
-        p-id="13569"
+        d="M207.83 962c-5.4 0-10.88-1.17-16.08-3.67-18.55-8.89-26.39-31.13-17.5-49.69l77.22-161.26c8.9-18.58 31.14-26.41 49.7-17.51 18.55 8.89 26.39 31.13 17.5 49.69l-77.22 161.26c-6.4 13.38-19.74 21.18-33.62 21.18zM821.57 962c-13.88 0-27.21-7.8-33.62-21.17l-77.24-161.26c-8.9-18.55-1.06-40.8 17.5-49.69 18.57-8.87 40.8-1.07 49.7 17.51l77.24 161.26c8.9 18.55 1.06 40.8-17.5 49.69a37.266 37.266 0 0 1-16.08 3.66z"
+        fill="#12926E"
+        p-id="1723"
       ></path>
-      <path d="M80.5 479h95.16v353.26H80.5z" fill="#F9C139" p-id="13570"></path>
-      <path d="M80.5 479H100v353.26h-19.5z" fill="#FFFFFF" opacity=".4" p-id="13571"></path>
-      <path d="M156.16 479h19.5v353.26h-19.5z" fill="#1C1817" opacity=".2" p-id="13572"></path>
       <path
-        d="M377.62 556.06h-115.16c-5.54 0-10 4.48-10 10v276.2c0 5.52 4.46 10 10 10h115.16c5.54 0 10-4.48 10-10v-276.2c0-5.52-4.46-10-10-10z m-10 276.2h-95.16v-256.2h95.16v256.2z"
-        fill="#23130D"
-        p-id="13573"
+        d="M156.74 105.14h710.51c50.7 0 91.8 41.1 91.8 91.8v525.82c0 50.7-41.1 91.8-91.8 91.8H156.74c-50.7 0-91.8-41.1-91.8-91.8V196.93c0.01-50.69 41.11-91.79 91.8-91.79z"
+        fill="#39E2A0"
+        p-id="1724"
       ></path>
-      <path d="M272.46 576.06h95.16v256.2h-95.16z" fill="#EC7063" p-id="13574"></path>
       <path
-        d="M569.58 358.02h-115.16c-5.54 0-10 4.48-10 10v474.24c0 5.52 4.46 10 10 10h115.16c5.54 0 10-4.48 10-10V368.02c0-5.52-4.46-10-10-10z m-10 474.24h-95.16V378.02h95.16v454.24z"
-        fill="#23130D"
-        p-id="13575"
+        d="M835.65 686.01h-614.7c-5.14 0-9.31-4.17-9.31-9.31 0-5.14 4.17-9.31 9.31-9.31h614.7c5.14 0 9.31 4.17 9.31 9.31 0 5.14-4.17 9.31-9.31 9.31z"
+        fill="#D3F8EA"
+        p-id="1725"
       ></path>
-      <path d="M464.42 378.02h95.16v454.24h-95.16z" fill="#72AF5F" p-id="13576"></path>
       <path
-        d="M761.54 419.62h-115.16c-5.54 0-10 4.48-10 10v412.64c0 5.52 4.46 10 10 10h115.16c5.54 0 10-4.48 10-10V429.62c0-5.52-4.46-10-10-10z m-10 412.64h-95.16V439.62h95.16v392.64z"
-        fill="#23130D"
-        p-id="13577"
+        d="M699.31 631.94H624.8V454.95c0-11.28 9.14-20.42 20.42-20.42h33.67c11.28 0 20.42 9.14 20.42 20.42v176.99zM846.22 631.94h-74.51V346.76c0-11.28 9.14-20.42 20.42-20.42h33.67c11.28 0 20.42 9.14 20.42 20.42v285.18zM289.51 631.94H215V417.69c0-11.28 9.14-20.42 20.42-20.42h33.67c11.28 0 20.42 9.14 20.42 20.42v214.25zM436.42 631.94h-74.51V495.77c0-11.28 9.14-20.42 20.42-20.42H416c11.28 0 20.42 9.14 20.42 20.42v136.17z"
+        fill="#FFFFFF"
+        p-id="1726"
       ></path>
-      <path d="M656.38 439.62h95.16v392.64h-95.16z" fill="#EC7063" p-id="13578"></path>
       <path
-        d="M953.5 281.94h-115.16c-5.52 0-10 4.48-10 10v550.32c0 5.52 4.48 10 10 10h115.16c5.54 0 10-4.48 10-10V291.94c0-5.52-4.46-10-10-10z m-10 550.32h-95.16V301.94h95.16v530.32z"
-        fill="#23130D"
-        p-id="13579"
+        d="M715.4 173.76H308.6c-11.11 0-20.12-9.01-20.12-20.12V82.12c0-11.11 9.01-20.12 20.12-20.12h406.8c11.11 0 20.12 9.01 20.12 20.12v71.52c0.01 11.11-9 20.12-20.12 20.12z"
+        fill="#12926E"
+        p-id="1727"
       ></path>
-      <path d="M848.34 301.94h95.16v530.32h-95.16z" fill="#72AF5F" p-id="13580"></path>
-      <path
-        d="M953.51 883.768H70.49a10 10 0 1 0 0 20h883.02c5.524 0 10-4.476 10-10s-4.476-10-10-10zM895.92 120.24c-36.72 0-66.62 29.88-66.62 66.6 0 10.8 2.6 21 7.2 30.04l-84.72 60.34c-12.12-12.5-29.08-20.3-47.82-20.3-26.08 0-48.7 15.08-59.64 36.96l-66.56-21.38c0.56-3.46 0.86-7 0.86-10.62 0-36.72-29.88-66.6-66.62-66.6s-66.62 29.88-66.62 66.6c0 14.88 4.92 28.64 13.18 39.74l-99.32 100.32a66.24 66.24 0 0 0-39.2-12.8c-22.16 0-41.8 10.88-53.92 27.56l-75.9-39.12c2.26-6.7 3.5-13.84 3.5-21.28 0-36.72-29.88-66.6-66.62-66.6-36.72 0-66.6 29.88-66.6 66.6 0 36.74 29.88 66.62 66.6 66.62 22.16 0 41.82-10.88 53.94-27.58l75.9 39.14a66.316 66.316 0 0 0-3.52 21.28c0 36.72 29.88 66.6 66.62 66.6s66.62-29.88 66.62-66.6c0-14.9-4.92-28.64-13.2-39.76l99.32-100.32a66.18 66.18 0 0 0 39.22 12.82c26.08 0 48.7-15.08 59.62-36.96l66.58 21.38c-0.56 3.46-0.86 7-0.86 10.6 0 36.74 29.88 66.62 66.62 66.62s66.62-29.88 66.62-66.62c0-10.8-2.6-21-7.18-30.02l84.7-60.34c12.12 12.5 29.08 20.3 47.82 20.3 36.74 0 66.62-29.88 66.62-66.62 0-36.72-29.88-66.6-66.62-66.6zM127.1 402.92c-25.7 0-46.6-20.92-46.6-46.62 0-25.7 20.9-46.6 46.6-46.6 25.7 0 46.62 20.9 46.62 46.6 0 25.7-20.92 46.62-46.62 46.62z m192.94 99.44c-25.7 0-46.62-20.9-46.62-46.6 0-25.72 20.92-46.62 46.62-46.62 25.7 0 46.62 20.9 46.62 46.62 0 25.7-20.92 46.6-46.62 46.6zM512 308.5c-25.7 0-46.62-20.92-46.62-46.62s20.92-46.6 46.62-46.6 46.62 20.9 46.62 46.6-20.92 46.62-46.62 46.62z m191.96 61.64c-25.7 0-46.62-20.9-46.62-46.62 0-4.94 0.8-9.72 2.22-14.2l0.02-0.02v-0.02c6.04-18.76 23.64-32.36 44.38-32.36 25.7 0 46.62 20.9 46.62 46.6 0 25.72-20.92 46.62-46.62 46.62z m191.96-136.68c-25.7 0-46.62-20.9-46.62-46.62 0-25.7 20.92-46.6 46.62-46.6 25.7 0 46.62 20.9 46.62 46.6 0 25.72-20.92 46.62-46.62 46.62z"
-        fill="#23130D"
-        p-id="13581"
-      ></path>
-      <path
-        d="M942.54 186.84c0 25.72-20.92 46.62-46.62 46.62-25.7 0-46.62-20.9-46.62-46.62 0-25.7 20.92-46.6 46.62-46.6 25.7 0 46.62 20.9 46.62 46.6z"
-        fill="#72AF5F"
-        p-id="13582"
-      ></path>
-      <path
-        d="M750.58 323.52c0 25.72-20.92 46.62-46.62 46.62-25.7 0-46.62-20.9-46.62-46.62 0-4.94 0.8-9.72 2.22-14.2l0.02-0.02v-0.02c6.04-18.76 23.64-32.36 44.38-32.36 25.7 0 46.62 20.9 46.62 46.6z"
-        fill="#EC7063"
-        p-id="13583"
-      ></path>
-      <path
-        d="M558.62 261.88c0 25.7-20.92 46.62-46.62 46.62s-46.62-20.92-46.62-46.62 20.92-46.6 46.62-46.6 46.62 20.9 46.62 46.6z"
-        fill="#72AF5F"
-        p-id="13584"
-      ></path>
-      <path
-        d="M366.66 455.76c0 25.7-20.92 46.6-46.62 46.6-25.7 0-46.62-20.9-46.62-46.6 0-25.72 20.92-46.62 46.62-46.62 25.7 0 46.62 20.9 46.62 46.62z"
-        fill="#EC7063"
-        p-id="13585"
-      ></path>
-      <path
-        d="M173.72 356.3c0 25.7-20.92 46.62-46.62 46.62-25.7 0-46.6-20.92-46.6-46.62 0-25.7 20.9-46.6 46.6-46.6 25.7 0 46.62 20.9 46.62 46.6z"
-        fill="#F9C139"
-        p-id="13586"
-      ></path>
-      <path
-        d="M173.72 356.3c0 25.7-20.92 46.62-46.62 46.62a45.6 45.6 0 0 1-12-1.58c19.9-5.3 34.62-23.48 34.62-45.04s-14.72-39.74-34.62-45.04c3.82-1.02 7.84-1.56 12-1.56 25.7 0 46.62 20.9 46.62 46.6zM366.66 455.74c0 25.7-20.92 46.62-46.62 46.62a45.6 45.6 0 0 1-12-1.58c19.9-5.3 34.62-23.48 34.62-45.04s-14.72-39.74-34.62-45.04c3.82-1.02 7.84-1.56 12-1.56 25.7 0 46.62 20.9 46.62 46.6zM558.62 261.88c0 25.7-20.92 46.62-46.62 46.62a45.6 45.6 0 0 1-12-1.58c19.9-5.3 34.62-23.48 34.62-45.04s-14.72-39.74-34.62-45.04c3.82-1.02 7.84-1.56 12-1.56 25.7 0 46.62 20.9 46.62 46.6zM750.58 323.52c0 25.7-20.92 46.62-46.62 46.62a45.6 45.6 0 0 1-12-1.58c19.9-5.3 34.62-23.48 34.62-45.04s-14.72-39.74-34.62-45.04c3.82-1.02 7.84-1.56 12-1.56 25.7 0 46.62 20.9 46.62 46.6zM943.5 186.84c0 25.7-20.92 46.62-46.62 46.62a45.6 45.6 0 0 1-12-1.58c19.9-5.3 34.62-23.48 34.62-45.04s-14.72-39.74-34.62-45.04c3.82-1.02 7.84-1.56 12-1.56 25.7 0 46.62 20.9 46.62 46.6z"
-        fill="#1C1817"
-        opacity=".2"
-        p-id="13587"
-      ></path>
-      <path d="M272.46 575.06h19.5v257.2h-19.5z" fill="#FFFFFF" opacity=".4" p-id="13588"></path>
-      <path d="M348.12 575.06h19.5v257.2h-19.5z" fill="#1C1817" opacity=".2" p-id="13589"></path>
-      <path d="M463.94 378.746h19.5V832.26h-19.5z" fill="#FFFFFF" opacity=".4" p-id="13590"></path>
-      <path d="M539.6 378.746h19.5V832.26h-19.5z" fill="#1C1817" opacity=".2" p-id="13591"></path>
-      <path d="M656.38 438.7h19.5v393.56h-19.5z" fill="#FFFFFF" opacity=".4" p-id="13592"></path>
-      <path d="M732.04 438.7h19.5v393.56h-19.5z" fill="#1C1817" opacity=".2" p-id="13593"></path>
-      <path d="M848.34 302.306h19.5V832.26h-19.5z" fill="#FFFFFF" opacity=".4" p-id="13594"></path>
-      <path d="M924 302.306h19.5V832.26H924z" fill="#1C1817" opacity=".2" p-id="13595"></path>
     </svg>
   );
 }
diff --git a/web/components/icons/colorful-db.tsx b/web/components/icons/colorful-db.tsx
index c1f74c025..b41078ad1 100644
--- a/web/components/icons/colorful-db.tsx
+++ b/web/components/icons/colorful-db.tsx
@@ -1,10 +1,64 @@
 function ColorfulDB() {
   return (
-    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4946" className="w-full h-full">
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1129" className="w-full h-full">
+      <path d="M226.3 70.4C151.1 91.6 91.6 151.1 70.4 226.3L226.3 70.4z" fill="#FFA65A" p-id="1130"></path>
+      <path d="M277.9 62.2c-116.5 4.7-211 99.1-215.7 215.7L277.9 62.2z" fill="#FFA659" p-id="1131"></path>
+      <path d="M321.5 62H287C163.3 62 62 163.3 62 287v34.5L321.5 62z" fill="#FFA558" p-id="1132"></path>
+      <path d="M365 62h-78C163.3 62 62 163.3 62 287v78L365 62z" fill="#FFA557" p-id="1133"></path>
+      <path d="M408.4 62H287C163.3 62 62 163.3 62 287v121.4L408.4 62z" fill="#FFA556" p-id="1134"></path>
+      <path d="M451.8 62H287c-35.9 0-69.8 8.5-100 23.6L85.6 187C70.5 217.2 62 251.1 62 287v164.8L451.8 62z" fill="#FFA555" p-id="1135"></path>
+      <path d="M495.3 62H287c-12.2 0-24.2 1-35.9 2.9L64.9 251.1C63 262.8 62 274.8 62 287v208.3L495.3 62z" fill="#FFA454" p-id="1136"></path>
+      <path d="M62 538.7L538.7 62H297.5L62 297.5z" fill="#FFA453" p-id="1137"></path>
+      <path d="M62 582.1L582.1 62H340.9L62 340.9z" fill="#FFA452" p-id="1138"></path>
+      <path d="M62 625.6L625.6 62H384.3L62 384.3z" fill="#FFA451" p-id="1139"></path>
+      <path d="M62 427.8V669L669 62H427.8z" fill="#FFA450" p-id="1140"></path>
+      <path d="M62 471.2v241.2L712.4 62H471.2z" fill="#FFA34F" p-id="1141"></path>
+      <path d="M737 62H514.6L62 514.6V737c0 6.1 0.3 12.1 0.7 18.1L755.1 62.7c-6-0.4-12-0.7-18.1-0.7z" fill="#FFA34E" p-id="1142"></path>
+      <path d="M737 62H558.1L62 558.1V737c0 19.1 2.4 37.6 6.9 55.4L792.4 68.9C774.6 64.4 756.1 62 737 62z" fill="#FFA34D" p-id="1143"></path>
+      <path d="M737 62H601.5L62 601.5V737c0 31.1 6.4 60.8 17.9 87.8L824.8 79.9C797.8 68.4 768.1 62 737 62z" fill="#FFA34C" p-id="1144"></path>
+      <path d="M853.5 94.7C819.4 74 779.5 62 737 62h-92.1L62 644.9V737c0 42.5 12 82.4 32.7 116.5L853.5 94.7z" fill="#FFA24B" p-id="1145"></path>
       <path
-        d="M512 128C323.413333 128 170.666667 204.373333 170.666667 298.666667s152.746667 170.666667 341.333333 170.666666 341.333333-76.373333 341.333333-170.666666-152.746667-170.666667-341.333333-170.666667M170.666667 384v128c0 94.293333 152.746667 170.666667 341.333333 170.666667s341.333333-76.373333 341.333333-170.666667V384c0 94.293333-152.746667 170.666667-341.333333 170.666667s-341.333333-76.373333-341.333333-170.666667m0 213.333333v128c0 94.293333 152.746667 170.666667 341.333333 170.666667s341.333333-76.373333 341.333333-170.666667v-128c0 94.293333-152.746667 170.666667-341.333333 170.666667s-341.333333-76.373333-341.333333-170.666667z"
-        fill="#FFCA28"
-        p-id="4947"
+        d="M878.9 112.7C840.1 81.1 790.7 62 737 62h-48.6L62 688.4V737c0 53.7 19.1 103.1 50.7 141.9l766.2-766.2z"
+        fill="#FFA24A"
+        p-id="1146"
+      ></path>
+      <path d="M737 62h-5.2L62 731.8v5.2c0 64.7 27.7 123.2 71.7 164.3l767.6-767.6C860.2 89.7 801.7 62 737 62z" fill="#FFA249" p-id="1147"></path>
+      <path d="M64.8 772.4c9.8 61 44.3 114.1 92.8 148.4l763.2-763.2c-34.3-48.6-87.4-83.1-148.4-92.8L64.8 772.4z" fill="#FFA248" p-id="1148"></path>
+      <path d="M73.3 807.3c18.7 56.4 59.2 103 111.3 129.9l752.6-752.6C910.4 132.5 863.7 92 807.3 73.3l-734 734z" fill="#FFA247" p-id="1149"></path>
+      <path d="M86.1 838c26.5 52.3 72.9 93.1 129.1 112.2l735-735C931.1 159 890.3 112.6 838 86.1L86.1 838z" fill="#FFA147" p-id="1150"></path>
+      <path d="M102.4 865.2c34 48.7 86.7 83.5 147.5 93.7l709-709c-10.2-60.8-45-113.5-93.7-147.5L102.4 865.2z" fill="#FFA146" p-id="1151"></path>
+      <path d="M962 287c0-65.2-28.1-124.1-72.7-165.3L121.7 889.3C162.9 933.9 221.8 962 287 962h3.2L962 290.2V287z" fill="#FFA145" p-id="1152"></path>
+      <path d="M962 287c0-54.2-19.4-104-51.6-143L144 910.4c39 32.2 88.8 51.6 143 51.6h46.6L962 333.6V287z" fill="#FFA144" p-id="1153"></path>
+      <path d="M962 287c0-43.1-12.3-83.4-33.5-117.7L169.3 928.5C203.6 949.7 243.9 962 287 962h90.1L962 377.1V287z" fill="#FFA143" p-id="1154"></path>
+      <path d="M287 962h133.5L962 420.5V287c0-31.6-6.6-61.8-18.5-89.2L197.8 943.4c27.4 12 57.6 18.6 89.2 18.6z" fill="#FFA042" p-id="1155"></path>
+      <path d="M287 962h176.9L962 463.9V287c0-19.7-2.6-38.7-7.4-56.9L230.1 954.6c18.2 4.8 37.2 7.4 56.9 7.4z" fill="#FFA041" p-id="1156"></path>
+      <path d="M287 962h220.4L962 507.4V287c0-6.7-0.3-13.4-0.9-20L267 961.1c6.6 0.6 13.3 0.9 20 0.9z" fill="#FFA040" p-id="1157"></path>
+      <path d="M550.8 962L962 550.8V309.6L309.6 962z" fill="#FFA03F" p-id="1158"></path>
+      <path d="M594.2 962L962 594.2V353L353 962z" fill="#FF9F3E" p-id="1159"></path>
+      <path d="M637.7 962L962 637.7V396.4L396.4 962z" fill="#FF9F3D" p-id="1160"></path>
+      <path d="M681.1 962L962 681.1V439.9L439.9 962z" fill="#FF9F3C" p-id="1161"></path>
+      <path d="M724.5 962L962 724.5V483.3L483.3 962z" fill="#FF9F3B" p-id="1162"></path>
+      <path d="M962 737V526.7L526.7 962H737c11.4 0 22.5-0.9 33.5-2.5l189-189c1.6-11 2.5-22.1 2.5-33.5z" fill="#FF9F3A" p-id="1163"></path>
+      <path d="M962 737V570.2L570.2 962H737c34.3 0 66.9-7.8 96.1-21.7l107.2-107.2c13.9-29.2 21.7-61.8 21.7-96.1z" fill="#FF9E39" p-id="1164"></path>
+      <path d="M962 613.6L613.6 962H737c123.8 0 225-101.3 225-225V613.6z" fill="#FF9E38" p-id="1165"></path>
+      <path d="M962 657L657 962h80c123.8 0 225-101.3 225-225v-80z" fill="#FF9E37" p-id="1166"></path>
+      <path d="M962 700.5L700.5 962H737c123.8 0 225-101.3 225-225v-36.5z" fill="#FF9E36" p-id="1167"></path>
+      <path d="M961.9 744L744 961.9c118.2-3.7 214.2-99.7 217.9-217.9z" fill="#FF9D35" p-id="1168"></path>
+      <path d="M954.4 795L795 954.4c77.4-20.8 138.6-82 159.4-159.4z" fill="#FF9D34" p-id="1169"></path>
+      <path
+        d="M736.3 622.9L523.5 747.3c-5.6 3.3-12.4 3.3-18 0.1L287.8 622.6c-12.2-7-12-24.6 0.3-31.4l212.8-116.7c5.3-2.9 11.8-3 17.2-0.1l217.7 117c12.3 6.7 12.6 24.4 0.5 31.5z"
+        fill="#FFD9C0"
+        p-id="1170"
+      ></path>
+      <path
+        d="M736.3 523.9L523.5 648.3c-5.6 3.3-12.4 3.3-18 0.1L287.8 523.6c-12.2-7-12-24.6 0.3-31.4l212.8-116.7c5.3-2.9 11.8-3 17.2-0.1l217.7 117c12.3 6.7 12.6 24.4 0.5 31.5z"
+        fill="#FFE8D9"
+        p-id="1171"
+      ></path>
+      <path
+        d="M736.3 424.9L523.5 549.3c-5.6 3.3-12.4 3.3-18 0.1L287.8 424.6c-12.2-7-12-24.6 0.3-31.4l212.8-116.7c5.3-2.9 11.8-3 17.2-0.1l217.7 117c12.3 6.7 12.6 24.4 0.5 31.5z"
+        fill="#FFF6F0"
+        p-id="1172"
       ></path>
     </svg>
   );
diff --git a/web/components/icons/colorful-doc.tsx b/web/components/icons/colorful-doc.tsx
index 5fbe2984d..001181a46 100644
--- a/web/components/icons/colorful-doc.tsx
+++ b/web/components/icons/colorful-doc.tsx
@@ -1,40 +1,15 @@
 function ColorfulDoc() {
   return (
-    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27999" className="w-full h-full">
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1300" className="w-full h-full">
       <path
-        d="M701.781333 199.68a22.869333 22.869333 0 0 1 22.698667 22.186667v349.696h45.738667l34.133333-392.533334a22.698667 22.698667 0 0 0-20.650667-24.576L315.221333 113.834667A22.869333 22.869333 0 0 0 290.133333 134.656l-5.632 65.024z"
-        fill="#FFC670"
-        p-id="28000"
+        d="M197.99492187 62v900h-34.18066406C124.57285156 962 92.76171875 930.18886719 92.76171875 890.94746094V133.05253906C92.76171875 93.81113281 124.57285156 62 163.81425781 62h34.18066406z m662.19082032 0C899.42714844 62 931.23828125 93.81113281 931.23828125 133.05253906v757.89492188c0 39.24140625-31.81113281 71.05253906-71.05253906 71.05253906H276.92070312V62h583.26503907z"
+        fill="#19A05F"
+        p-id="1301"
       ></path>
       <path
-        d="M313.002667 674.816A25.6 25.6 0 0 1 338.773333 648.533333h154.965334a51.2 51.2 0 0 0 32.085333-11.264l69.12-54.954666a51.2 51.2 0 0 1 32.085333-11.264h97.450667V221.866667a22.869333 22.869333 0 0 0-22.698667-22.869334H231.253333A22.869333 22.869333 0 0 0 208.554667 221.866667v638.805333a22.698667 22.698667 0 0 0 22.698666 22.698667h81.749334z"
-        fill="#FFF6E6"
-        p-id="28001"
-      ></path>
-      <path
-        d="M724.48 571.562667v-94.890667a472.234667 472.234667 0 0 1-38.570667 94.890667zM313.002667 757.418667a514.56 514.56 0 0 1-104.448-15.36v119.466666a22.698667 22.698667 0 0 0 22.698666 22.698667h81.749334z"
-        fill="#FFEBCC"
-        p-id="28002"
-      ></path>
-      <path
-        d="M594.944 582.826667l-69.12 54.954666a51.2 51.2 0 0 1-32.085333 11.264h-154.965334a25.6 25.6 0 0 0-25.770666 25.770667v209.578667a25.770667 25.770667 0 0 0 25.770666 25.770666h450.901334a25.941333 25.941333 0 0 0 25.770666-25.770666V597.333333a25.941333 25.941333 0 0 0-25.770666-25.770666h-162.645334a51.2 51.2 0 0 0-32.085333 11.264z"
-        fill="#96DDFF"
-        p-id="28003"
-      ></path>
-      <path
-        d="M564.224 840.874667a971.776 971.776 0 0 1-251.221333-31.402667v74.922667a25.770667 25.770667 0 0 0 25.770666 25.770666h450.901334a25.941333 25.941333 0 0 0 25.770666-25.770666v-74.922667a971.776 971.776 0 0 1-251.221333 31.402667z"
-        fill="#69BAF9"
-        p-id="28004"
-      ></path>
-      <path
-        d="M789.674667 554.496h-0.853334l32.768-373.418667A39.936 39.936 0 0 0 785.066667 137.898667l-468.48-40.96A40.106667 40.106667 0 0 0 273.066667 133.12l-4.266667 49.664h-37.546667A39.765333 39.765333 0 0 0 191.488 221.866667v638.805333a39.765333 39.765333 0 0 0 39.765333 39.765333h68.266667a43.178667 43.178667 0 0 0 39.765333 26.794667h450.389334a43.008 43.008 0 0 0 42.837333-42.837333V597.333333a43.008 43.008 0 0 0-42.837333-42.837333zM307.2 136.533333a5.632 5.632 0 0 1 6.144-5.12l468.650667 40.96a5.632 5.632 0 0 1 5.12 6.144l-32.597334 375.978667h-12.970666V221.866667a39.765333 39.765333 0 0 0-39.765334-39.765334H303.445333z m-11.605333 538.794667v190.976h-64.341334a5.632 5.632 0 0 1-5.632-5.632V221.866667a5.632 5.632 0 0 1 5.632-5.632h470.528a5.632 5.632 0 0 1 5.632 5.632v332.629333h-80.384a68.266667 68.266667 0 0 0-42.666666 15.018667l-69.12 54.954666a34.133333 34.133333 0 0 1-21.504 7.509334h-154.965334a42.837333 42.837333 0 0 0-42.837333 42.837333z m502.784 209.066667a8.704 8.704 0 0 1-8.704 8.704H338.773333a8.704 8.704 0 0 1-8.704-8.704V674.816a8.704 8.704 0 0 1 8.704-8.704h154.965334a68.266667 68.266667 0 0 0 42.837333-15.018667l68.266667-54.954666a35.328 35.328 0 0 1 21.504-7.509334h162.645333a8.704 8.704 0 0 1 8.704 8.704z"
-        fill="#3D3D63"
-        p-id="28005"
-      ></path>
-      <path
-        d="M744.789333 823.808h-64.341333a17.066667 17.066667 0 0 0 0 34.133333h64.341333a17.066667 17.066667 0 0 0 0-34.133333zM421.546667 309.248H512a17.066667 17.066667 0 0 0 0-34.133333h-90.453333a17.066667 17.066667 0 0 0 0 34.133333zM324.266667 406.016h283.989333a17.066667 17.066667 0 0 0 0-34.133333H324.266667a17.066667 17.066667 0 0 0 0 34.133333zM625.322667 474.965333a17.066667 17.066667 0 0 0-17.066667-17.066666H324.266667a17.066667 17.066667 0 0 0 0 34.133333h283.989333a17.066667 17.066667 0 0 0 17.066667-17.066667z"
-        fill="#3D3D63"
-        p-id="28006"
+        d="M577.0390625 62l0.33222656 220.3875 111.2475586-108.80771484L800.19951172 284.36328125V62zM425.40224609 508.18554688h377.05078125v50.94404296h-377.05078125V508.18554688z m0 101.88720703h377.05078125v50.94316406h-377.05078125v-50.94316406z"
+        fill="#FFFFFF"
+        p-id="1302"
       ></path>
     </svg>
   );
diff --git a/web/components/icons/colorful-excel.tsx b/web/components/icons/colorful-excel.tsx
index 52ace5fba..87e48b04c 100644
--- a/web/components/icons/colorful-excel.tsx
+++ b/web/components/icons/colorful-excel.tsx
@@ -1,25 +1,25 @@
 function ColorfulExcel() {
   return (
-    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7028" className="w-full h-full">
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2006" className="w-full h-full">
       <path
-        d="M163.560759 0.702493A152.675051 152.675051 0 0 0 11.822365 153.377544v632.243311a152.675051 152.675051 0 0 0 151.738394 151.738395h476.055797a152.675051 152.675051 0 0 0 152.675052-152.675052V314.950835A57.136062 57.136062 0 0 0 775.197622 274.674594L519.256163 17.093986a58.072719 58.072719 0 0 0-41.212898-17.093986z"
-        fill="#41CC8B"
-        p-id="7029"
+        d="M701.95942066 37.1014489H250.80579673a142.46956521 142.46956521 0 0 0-142.46956522 142.46956523v664.85797174a142.46956521 142.46956521 0 0 0 142.46956522 142.46956523h522.38840654a142.46956521 142.46956521 0 0 0 142.46956522-142.46956523V274.55072501L701.95942066 37.1014489z"
+        fill="#53D39C"
+        p-id="2007"
       ></path>
       <path
-        d="M775.197622 274.674594L519.256163 17.093986a57.604391 57.604391 0 0 0-29.738852-15.689001 5.854105 5.854105 0 0 0-6.790762 5.854105V131.834439a178.433112 178.433112 0 0 0 178.433113 178.433112H784.564189a5.854105 5.854105 0 0 0 5.854105-6.790762A55.965241 55.965241 0 0 0 775.197622 274.674594z"
-        fill="#05B25F"
-        p-id="7030"
+        d="M444.2794663 392.18309566l69.64387283 117.72735109h2.70692174l69.97630108-117.70360654h82.4661337l-105.40373371 172.67311305 107.77822609 172.6968587h-83.98580869l-70.83111847-117.89356521h-2.70692174L443.09222066 737.57681196h-83.65338045l108.11065544-172.6968587-106.09233586-172.6968576h82.82230651z"
+        fill="#25BF79"
+        p-id="2008"
       ></path>
       <path
-        d="M667.482095 281.69952h114.03796a51.98445 51.98445 0 0 0-6.322433-7.024926L519.256163 17.093986l-7.727418-6.322433v114.506288A156.187514 156.187514 0 0 0 667.482095 281.69952z"
-        fill="#B0F9D7"
-        p-id="7031"
+        d="M444.2794663 380.31063151l69.64387283 117.7273511h2.70692174l69.97630108-117.70360543h82.4661337l-105.40373371 172.67311305L671.44718803 725.70434783h-83.98580869l-70.83111847-117.89356522h-2.70692174L443.09222066 725.70434783h-83.65338045l108.11065544-172.6968576-106.09233586-172.69685872h82.82230651z"
+        fill="#FFFFFF"
+        p-id="2009"
       ></path>
       <path
-        d="M92.140681 419.856391h117.082095v28.333867H128.904459v39.807913h67.205123v28.802195H128.904459v46.832838h81.957466v28.802195H92.140681zM274.554585 523.825292L232.639195 462.005946h40.510405l14.284015 23.416419q6.322433 11.239881 12.644867 21.777269l5.151612-10.771553 6.322433-11.005716 11.942374-23.416419H363.068649l-41.91539 66.268465 44.72536 63.69266h-40.978733l-15.923165-23.416419L302.185959 555.671621l-7.024925-11.239881-7.024926 11.239881-6.088269 11.70821-13.347359 23.416419H229.829225zM400.534919 576.980563a65.565973 65.565973 0 0 1-19.903956-50.111137 64.629316 64.629316 0 0 1 21.777269-50.813629 76.57169 76.57169 0 0 1 51.047794-17.796478 66.50263 66.50263 0 0 1 41.681225 14.518179l-17.796478 22.011434a35.124628 35.124628 0 0 0-22.011434-8.664075 33.251315 33.251315 0 0 0-26.226389 11.239881 41.447062 41.447062 0 0 0-10.303224 29.504688 40.978733 40.978733 0 0 0 10.06906 28.802195 32.782987 32.782987 0 0 0 25.523896 11.005717 46.832838 46.832838 0 0 0 27.865539-11.005717l14.752344 23.416419a72.590899 72.590899 0 0 1-46.832838 15.689001 70.249257 70.249257 0 0 1-49.642808-17.796478zM535.88182 576.746398a63.926824 63.926824 0 0 1-20.840613-49.876972 67.439287 67.439287 0 0 1 20.372285-50.345301 65.565973 65.565973 0 0 1 46.832838-18.264806 57.838555 57.838555 0 0 1 44.72536 17.562314 65.331809 65.331809 0 0 1 14.986508 44.72536 51.047793 51.047793 0 0 1-1.873313 15.454836h-88.514064a35.827121 35.827121 0 0 0 13.113195 23.416419 40.276241 40.276241 0 0 0 26.460553 8.429911 62.990167 62.990167 0 0 0 32.080494-9.132403l12.87903 21.074777a93.665676 93.665676 0 0 1-50.111136 14.284015 71.420078 71.420078 0 0 1-50.111137-17.32815z m73.527556-63.224331c0-19.201464-9.132403-28.802195-27.163046-28.802195a29.504688 29.504688 0 0 0-20.138121 7.25909 33.719643 33.719643 0 0 0-11.005716 21.543105zM672.399543 555.671621v-149.396752h37.232106V555.671621a10.771553 10.771553 0 0 0 2.575806 7.961583 6.322433 6.322433 0 0 0 5.151612 2.341642h5.151612l4.44912 25.289732a53.857764 53.857764 0 0 1-19.435628 3.044135c-23.416419 0.468328-35.124628-12.644866-35.124628-38.637092z"
-        fill="#F5F6FA"
-        p-id="7032"
+        d="M701.95942066 37.1014489l160.27826087 178.08695653L915.66376849 274.55072501h-142.46956522a71.23478261 71.23478261 0 0 1-71.23478261-71.23478261V37.1014489z"
+        fill="#25BF79"
+        p-id="2010"
       ></path>
     </svg>
   );
diff --git a/web/components/icons/colorful-plugin.tsx b/web/components/icons/colorful-plugin.tsx
index 7476bdffb..4b9d024d3 100644
--- a/web/components/icons/colorful-plugin.tsx
+++ b/web/components/icons/colorful-plugin.tsx
@@ -1,46 +1,10 @@
 function ColorfulPlugin() {
   return (
-    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34873" className="w-full h-full">
-      <path d="M392.32 403.84a48 48 0 0 1-48 48h-96a48 48 0 0 1-48-48V236.16h192z" fill="#EA5E5A" p-id="34874"></path>
-      <path d="M259.84 176h24.32v24.32h-24.32zM307.84 176h24.32v24.32h-24.32z" fill="#34303D" p-id="34875"></path>
-      <path d="M380.16 236.16h-24.32V152.32H236.16v83.84h-24.32V128h168.32v108.16z" fill="#34303D" p-id="34876"></path>
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2147" className="w-full h-full">
       <path
-        d="M344.32 464h-96a60.16 60.16 0 0 1-60.16-60.16V224h215.68v179.84a60.16 60.16 0 0 1-60.16 60.16zM211.84 248.32v155.52a35.84 35.84 0 0 0 35.84 35.84h96a35.84 35.84 0 0 0 35.84-35.84V248.32z"
-        fill="#34303D"
-        p-id="34877"
-      ></path>
-      <path
-        d="M236.16 272h120.32v24.32H236.16zM236.16 320h120.32v24.32H236.16zM320 512h-48a24.32 24.32 0 0 1-23.68-23.68v-36.48h24.32v35.84H320v-35.84h24.32v35.84A24.32 24.32 0 0 1 320 512z"
-        fill="#34303D"
-        p-id="34878"
-      ></path>
-      <path d="M632.32 620.16a48 48 0 0 1 48-48h96a48 48 0 0 1 48 48v168.32h-192z" fill="#EA5E5A" p-id="34879"></path>
-      <path d="M739.84 824.32h24.32v24.32h-24.32zM691.84 824.32h24.32v24.32h-24.32z" fill="#34303D" p-id="34880"></path>
-      <path d="M812.16 896h-168.32v-108.16h24.32v84.48h119.68v-84.48h24.32V896z" fill="#34303D" p-id="34881"></path>
-      <path
-        d="M835.84 800H620.16V620.16a60.16 60.16 0 0 1 60.16-60.16h96a60.16 60.16 0 0 1 60.16 60.16z m-192-23.68h168.32V620.16a35.84 35.84 0 0 0-35.84-35.84h-96a35.84 35.84 0 0 0-35.84 35.84z"
-        fill="#34303D"
-        p-id="34882"
-      ></path>
-      <path
-        d="M668.16 680.32h120.32v24.32h-120.32zM668.16 728.32h120.32v24.32h-120.32zM776.32 572.16h-23.68v-35.84H704v35.84h-23.68v-35.84A24.32 24.32 0 0 1 704 512h48a24.32 24.32 0 0 1 24.32 24.32z"
-        fill="#34303D"
-        p-id="34883"
-      ></path>
-      <path
-        d="M403.84 848a120.32 120.32 0 0 1-119.68-119.68V499.84h24.32v227.84a96 96 0 0 0 192 0V296.32a120.32 120.32 0 0 1 240 0v227.84h-23.68V296.32a96 96 0 0 0-192 0v432a120.32 120.32 0 0 1-119.68 120.32z"
-        fill="#34303D"
-        p-id="34884"
-      ></path>
-      <path
-        d="M608 284.16h24.32v24.32H608zM608 332.16h24.32v24.32H608zM608 380.16h24.32v24.32H608zM392.32 620.16h24.32v24.32h-24.32zM392.32 668.16h24.32v24.32h-24.32zM392.32 716.16h24.32v24.32h-24.32z"
-        fill="#34303D"
-        p-id="34885"
-      ></path>
-      <path
-        d="M691.84 296.32h-23.68a48 48 0 0 0-96 0h-24.32a72.32 72.32 0 0 1 144 0zM403.84 800a72.32 72.32 0 0 1-71.68-71.68h24.32a48 48 0 0 0 96 0h24.32a72.32 72.32 0 0 1-72.96 71.68z"
-        fill="#34303D"
-        p-id="34886"
+        d="M688.51536688 447.75428656l-2.39993719 1.25996719a200.75473031 200.75473031 0 0 1-7.19981156 38.03900156l-47.33875688 166.43563031 110.45710031-59.63843437-47.03876531-114.41699625a108.2971575 108.2971575 0 0 1-6.47982937-31.67916844z m194.87488406-200.99472375l-96.35747063-58.55846344-354.77068687 217.43429251a70.01816156 70.01816156 0 0 0-32.51914688 59.57843624v193.97490844l-158.99582625-98.09742562V362.67651969a69.4181775 69.4181775 0 0 1 33.95910844-60.41841375l358.67058469-206.99456625 13.55964469 7.97979L544.75914031 41.26495719a62.75835281 62.75835281 0 0 0-65.63827687 0L140.54975094 246.75956281a69.89816531 69.89816531 0 0 0-32.81913844 59.75843063v410.98921218c-0.11999719 24.47935781 12.2996775 47.1587625 32.81913844 59.81842969l338.5711125 205.49460563c20.21946937 12.23967844 45.35880937 12.23967844 65.63827687 0l338.69110875-205.49460563c20.33946563-12.41967375 32.87913656-35.09907844 32.8791375-59.81842968v-410.98921219a69.77816813 69.77816813 0 0 0-32.93913562-59.75843063z m-89.51764969 477.88745532l-31.01918625-75.65801438-150.53604844 81.35786438-30.47919937 108.95713968-95.81748563 51.7186425 151.61602032-485.20726312 103.79727562-56.09852719 148.73609531 322.97152219-96.29747156 51.95863594z m0-1e-8"
+        fill="#0F6CF9"
+        p-id="2148"
       ></path>
     </svg>
   );
diff --git a/web/components/layout/side-bar.tsx b/web/components/layout/side-bar.tsx
index 911ddc7c5..387b992c1 100644
--- a/web/components/layout/side-bar.tsx
+++ b/web/components/layout/side-bar.tsx
@@ -43,14 +43,14 @@ type RouteItem = {
 };
 
 function menuItemStyle(active?: boolean) {
-  return `flex items-center px-2 h-8 hover:bg-slate-100 dark:hover:bg-[#353539] text-base w-full my-2 rounded transition-colors whitespace-nowrap ${
-    active ? 'bg-slate-100 dark:bg-[#353539]' : ''
+  return `flex items-center h-12 hover:bg-theme-primary dark:hover:bg-theme-dark hover:text-white text-base w-full transition-colors whitespace-nowrap px-4 ${
+    active ? 'bg-theme-primary text-white dark:bg-theme-dark' : ''
   }`;
 }
 
 function smallMenuItemStyle(active?: boolean) {
-  return `flex items-center justify-center mx-auto w-12 h-12 text-xl rounded hover:bg-slate-100 dark:hover:bg-[#353539] cursor-pointer ${
-    active ? 'bg-slate-100 dark:bg-[#353539]' : ''
+  return `flex items-center justify-center mx-auto rounded w-14 h-14 text-xl hover:text-white hover:bg-theme-primary dark:hover:bg-theme-dark transition-colors cursor-pointer ${
+    active ? 'bg-theme-primary text-white dark:bg-theme-dark' : ''
   }`;
 }
 
@@ -195,7 +195,7 @@ function SideBar() {
   );
 
   const copyLink = useCallback((item: IChatDialogueSchema) => {
-    const success = copy(`${location.origin}/chat/${item.chat_mode}/${item.conv_uid}`);
+    const success = copy(`${location.origin}/chat?scene=${item.chat_mode}&id=${item.conv_uid}`);
     message[success ? 'success' : 'error'](success ? 'Copy success' : 'Copy failed');
   }, []);
 
@@ -209,20 +209,17 @@ function SideBar() {
 
   if (!isMenuExpand) {
     return (
-      <div className="flex flex-col justify-between h-screen border-r dark:bg-[#1A1E26] animate-fade animate-duration-300">
+      <div className="flex flex-col justify-between h-screen bg-white dark:bg-[#232734] animate-fade animate-duration-300">
         <Link href="/" className="px-2 py-3">
           <Image src="/LOGO_SMALL.png" alt="DB-GPT" width={63} height={46} className="w-[63px] h-[46px]" />
         </Link>
-        <div className="border-t border-dashed">
-          <Link
-            href="/"
-            className="flex items-center justify-center my-4 mx-auto w-12 h-12 bg-gradient-to-r from-[#31afff] to-[#1677ff] dark:bg-gradient-to-r dark:from-[#6a6a6a] dark:to-[#80868f] border-none rounded-full text-white"
-          >
+        <div>
+          <Link href="/" className="flex items-center justify-center my-4 mx-auto w-12 h-12 bg-theme-primary rounded-full text-white">
             <PlusOutlined className="text-lg" />
           </Link>
         </div>
         {/* Chat List */}
-        <div className="flex-1 overflow-y-scroll py-4 border-t border-dashed space-y-2">
+        <div className="flex-1 overflow-y-scroll py-4 space-y-2">
           {dialogueList?.map((item) => {
             const active = item.conv_uid === chatId && item.chat_mode === scene;
 
@@ -235,7 +232,7 @@ function SideBar() {
             );
           })}
         </div>
-        <div className="py-4 space-y-2 border-t">
+        <div className="py-4">
           <Dropdown menu={{ items: dropDownRoutes }} placement="topRight">
             <div className={smallMenuItemStyle()}>
               <MenuOutlined />
@@ -261,20 +258,17 @@ function SideBar() {
   }
 
   return (
-    <div className="flex flex-col h-screen border-r dark:border-gray-700">
+    <div className="flex flex-col h-screen bg-white dark:bg-[#232734]">
       {/* LOGO */}
       <Link href="/" className="p-2">
         <Image src={logo} alt="DB-GPT" width={239} height={60} className="w-full h-full" />
       </Link>
-      <Link
-        href="/"
-        className="flex items-center justify-center mb-4 mx-4 h-11 bg-gradient-to-r from-[#31afff] to-[#1677ff] dark:bg-gradient-to-r dark:from-[#6a6a6a] dark:to-[#80868f] border-none rounded text-white"
-      >
+      <Link href="/" className="flex items-center justify-center mb-4 mx-4 h-11 bg-theme-primary rounded text-white">
         <PlusOutlined className="mr-2" />
-        <span>New Chat</span>
+        <span>{t('new_chat')}</span>
       </Link>
       {/* Chat List */}
-      <div className="flex-1 overflow-y-scroll py-4 px-2 border-t dark:border-gray-700">
+      <div className="flex-1 overflow-y-scroll">
         {dialogueList?.map((item) => {
           const active = item.conv_uid === chatId && item.chat_mode === scene;
 
@@ -305,18 +299,18 @@ function SideBar() {
         })}
       </div>
       {/* Settings */}
-      <div className="py-2 border-t dark:border-gray-700">
-        <div className="px-2">
+      <div className="pt-4">
+        <div className="max-h-52 overflow-y-auto">
           {routes.map((item) => (
-            <Link key={item.key} href={item.path} className={`${menuItemStyle(pathname === item.path)}`}>
+            <Link key={item.key} href={item.path} className={`${menuItemStyle(pathname === item.path)} overflow-hidden`}>
               <>
                 {item.icon}
-                <span className="ml-2 text-sm">{item.name}</span>
+                <span className="ml-3 text-sm">{item.name}</span>
               </>
             </Link>
           ))}
         </div>
-        <div className="flex items-center justify-around py-4 border-t border-dashed dark:border-gray-700">
+        <div className="flex items-center justify-around py-4 mt-2">
           {settings.map((item) => (
             <Tooltip key={item.key} title={item.name}>
               <div className="flex-1 flex items-center justify-center cursor-pointer text-xl" onClick={item.onClick}>
diff --git a/web/defaultTheme.ts b/web/defaultTheme.ts
index 4bfe430f4..cf6085970 100644
--- a/web/defaultTheme.ts
+++ b/web/defaultTheme.ts
@@ -17,11 +17,11 @@ export const joyTheme = extendTheme({
           plainHoverColor: '#131318',
           plainHoverBg: '#EBEBEF',
           plainActiveBg: '#D8D8DF',
-          plainDisabledColor: '#B9B9C6'
+          plainDisabledColor: '#B9B9C6',
         },
         background: {
-          body: '#fff',
-          surface: '#fff'
+          body: '#F7F7F7',
+          surface: '#fff',
         },
         text: {
           primary: '#505050',
@@ -46,15 +46,15 @@ export const joyTheme = extendTheme({
           plainActiveBg: '#434356',
           plainDisabledColor: '#434356',
           outlinedBorder: '#353539',
-          outlinedHoverBorder: '#454651'
+          outlinedHoverBorder: '#454651',
         },
         text: {
-          primary: '#EBEBEF'
+          primary: '#FDFDFC',
         },
         background: {
-          body: '#212121',
+          body: '#151622',
           surface: '#51525beb',
-        }
+        },
       },
     },
   },
@@ -62,15 +62,7 @@ export const joyTheme = extendTheme({
     body: 'Josefin Sans, sans-serif',
     display: 'Josefin Sans, sans-serif',
   },
-  typography: {
-    display1: {
-      background:
-        'linear-gradient(-30deg, var(--joy-palette-primary-900), var(--joy-palette-primary-400))',
-      WebkitBackgroundClip: 'text',
-      WebkitTextFillColor: 'transparent',
-    },
-  },
   zIndex: {
-    modal: 1001
-  }
-});
\ No newline at end of file
+    modal: 1001,
+  },
+});
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index ee2ae663f..51bc536e1 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -11,12 +11,22 @@ import '../styles/globals.css';
 import '../nprogress.css';
 import '../app/i18n';
 import { STORAGE_LANG_KEY, STORAGE_THEME_KEY } from '@/utils';
-import { ConfigProvider, theme } from 'antd';
+import { ConfigProvider, MappingAlgorithm, theme } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
 import enUS from 'antd/locale/en_US';
 
 type ThemeMode = ReturnType<typeof useColorScheme>['mode'];
 
+const antdDarkTheme: MappingAlgorithm = (seedToken, mapToken) => {
+  return {
+    ...theme.darkAlgorithm(seedToken, mapToken),
+    colorBgBase: '#232734',
+    colorBorder: '#232734',
+    colorPrimaryHover: '#232734',
+    colorBgContainer: '#232734',
+  };
+};
+
 function getDefaultTheme(): ThemeMode {
   const theme = localStorage.getItem(STORAGE_THEME_KEY) as ThemeMode;
   if (theme) return theme;
@@ -66,13 +76,14 @@ function LayoutWrapper({ children }: { children: React.ReactNode }) {
       locale={i18n.language === 'en' ? enUS : zhCN}
       theme={{
         token: {
+          colorPrimary: '#0069FE',
           borderRadius: 4,
         },
-        algorithm: mode === 'dark' ? theme.darkAlgorithm : undefined,
+        algorithm: mode === 'dark' ? antdDarkTheme : undefined,
       }}
     >
       <div className="flex w-screen h-screen overflow-hidden">
-        <div className={classNames('transition-[width]', isMenuExpand ? 'w-64' : 'w-20', 'hidden', 'md:block')}>
+        <div className={classNames('transition-[width]', isMenuExpand ? 'w-60' : 'w-20', 'hidden', 'md:block')}>
           <SideBar />
         </div>
         <div className="flex flex-col flex-1 relative overflow-hidden">{children}</div>
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index 313583cd1..8fc256c62 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -51,17 +51,17 @@ const Home: NextPage = () => {
   function renderSceneIcon(scene: string) {
     switch (scene) {
       case 'chat_knowledge':
-        return <Icon className="w-10 h-10 mr-4 p-1 bg-white rounded" component={ColorfulDoc} />;
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulDoc} />;
       case 'chat_with_db_execute':
-        return <Icon className="w-10 h-10 mr-4 p-1 bg-white rounded" component={ColorfulData} />;
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulData} />;
       case 'chat_excel':
-        return <Icon className="w-10 h-10 mr-4 p-1 bg-white rounded" component={ColorfulExcel} />;
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulExcel} />;
       case 'chat_with_db_qa':
-        return <Icon className="w-10 h-10 mr-4 p-1 bg-white rounded" component={ColorfulDB} />;
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulDB} />;
       case 'chat_dashboard':
-        return <Icon className="w-10 h-10 mr-4 p-1 bg-white rounded" component={ColorfulDashboard} />;
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulDashboard} />;
       case 'chat_agent':
-        return <Icon className="w-10 h-10 mr-4 p-1 bg-white rounded" component={ColorfulPlugin} />;
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulPlugin} />;
       default:
         return null;
     }
@@ -93,7 +93,7 @@ const Home: NextPage = () => {
               >
                 <div
                   className={classNames(
-                    'flex flex-row justify-center min-h-min border bg-slate-50 border-gray-300 dark:bg-black bg-opacity-50 border-opacity-50 text-gray-950 dark:text-white rounded p-4 cursor-pointer',
+                    'flex flex-row justify-center min-h-min bg-white dark:bg-[#232734] dark:text-white rounded p-4 cursor-pointer hover:-translate-y-1 transition-[transform_shadow] duration-300 hover:shadow-[0_14px_20px_-10px_rgba(100,100,100,.1)]',
                     { 'grayscale !cursor-no-drop': scene.show_disable },
                   )}
                 >
diff --git a/web/pages/knowledge/index.tsx b/web/pages/knowledge/index.tsx
index 7f37fc920..6c3411383 100644
--- a/web/pages/knowledge/index.tsx
+++ b/web/pages/knowledge/index.tsx
@@ -59,7 +59,7 @@ const Knowledge = () => {
   }
 
   return (
-    <div className="bg-[#FAFAFA] dark:bg-[#212121] w-full h-full">
+    <div className="bg-[#FAFAFA] dark:bg-transparent w-full h-full">
       <div className="page-body p-4 md:p-6 h-full overflow-auto">
         <Button
           type="primary"
diff --git a/web/styles/globals.css b/web/styles/globals.css
index d5ca26b8a..f1a687edc 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -4,23 +4,31 @@
 
 body {
   margin: 0;
-  color: var(--joy-palette-text-primary, var(--joy-palette-neutral-800, #25252d));
   font-family: var(--joy-fontFamily-body, var(--joy-Josefin Sans, sans-serif));
-  font-size: var(--joy-fontSize-md, 1rem);
   line-height: var(--joy-lineHeight-md, 1.5);
-  background-color: var(--joy-palette-background-body);
+  --antd-primary-color: #0069fe;
 }
 
-body .ant-btn-primary {
-  background-color: #1677ff;
+.light {
+  color: #333;
+  background-color: #f7f7f7;
+}
+
+.dark {
+  color: #f7f7f7;
+  background-color: #151622;
+}
+
+.ant-btn-primary {
+  background-color: var(--antd-primary-color);
 }
 
 .ant-pagination .ant-pagination-prev * {
-  color: rgb(39, 155, 255) !important;
+  color: var(--antd-primary-color) !important;
 }
 
 .ant-pagination .ant-pagination-next * {
-  color: rgb(39, 155, 255) !important;
+  color: var(--antd-primary-color) !important;
 }
 
 .ant-pagination .ant-pagination-item a {
@@ -28,7 +36,7 @@ body .ant-btn-primary {
 }
 
 .ant-pagination .ant-pagination-item.ant-pagination-item-active {
-  background-color: rgb(39, 155, 255) !important;
+  background-color: var(--antd-primary-color) !important;
 }
 
 .ant-pagination .ant-pagination-item.ant-pagination-item-active a {
@@ -61,11 +69,13 @@ table tr td {
 .dark :where(.css-dev-only-do-not-override-18iikkb).ant-tabs .ant-tabs-tab-btn {
   color: white;
 }
-:where(.css-dev-only-do-not-override-18iikkb).ant-form-item .ant-form-item-label > label {
+
+:where(.css-dev-only-do-not-override-18iikkb).ant-form-item .ant-form-item-label>label {
   height: 36px;
 }
+
 @keyframes rotate {
   to {
     transform: rotate(360deg);
   }
-}
+}
\ No newline at end of file
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 9a604ddc7..d8fc535a8 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -8,6 +8,14 @@ module.exports = {
       fontFamily: {
         sans: ['"Josefin Sans"', ...defaultTheme.fontFamily.sans],
       },
+      colors: {
+        theme: {
+          primary: '#0069fe',
+          light: '#f7f7f7',
+          dark: '#151622',
+          'dark-container': '#232734',
+        },
+      },
     },
   },
   darkMode: 'class',