diff --git a/app/components/Card/index.tsx b/app/components/Card/index.tsx
index d6f2eb635..782d62cc5 100644
--- a/app/components/Card/index.tsx
+++ b/app/components/Card/index.tsx
@@ -14,7 +14,7 @@ export default function Card(props: CardProps) {
       {title && (
         <div
           className={`
-            capitalize font-black font-setting-card-title text-sm-mobile font-weight-setting-card-title
+            capitalize !font-semibold text-sm-mobile font-weight-setting-card-title
             mb-3
 
             ml-3
diff --git a/app/components/HoverPopover/index.tsx b/app/components/HoverPopover/index.tsx
index 9457d2dd6..8605e9dee 100644
--- a/app/components/HoverPopover/index.tsx
+++ b/app/components/HoverPopover/index.tsx
@@ -8,6 +8,7 @@ export interface PopoverProps {
   popoverClassName?: string;
   noArrow?: boolean;
   align?: ComponentProps<typeof HoverCard.Content>["align"];
+  openDelay?: number;
 }
 
 export default function HoverPopover(props: PopoverProps) {
@@ -18,9 +19,10 @@ export default function HoverPopover(props: PopoverProps) {
     popoverClassName,
     noArrow = false,
     align,
+    openDelay = 300,
   } = props;
   return (
-    <HoverCard.Root>
+    <HoverCard.Root openDelay={openDelay}>
       <HoverCard.Trigger asChild>{children}</HoverCard.Trigger>
       <HoverCard.Portal>
         <HoverCard.Content
diff --git a/app/components/MenuLayout/index.tsx b/app/components/MenuLayout/index.tsx
index 7c9afd2f0..8145690c8 100644
--- a/app/components/MenuLayout/index.tsx
+++ b/app/components/MenuLayout/index.tsx
@@ -1,4 +1,3 @@
-import { useNavigate } from "react-router-dom";
 import {
   DEFAULT_SIDEBAR_WIDTH,
   MAX_SIDEBAR_WIDTH,
@@ -9,13 +8,13 @@ import useDrag from "@/app/hooks/useDrag";
 import useMobileScreen from "@/app/hooks/useMobileScreen";
 import { updateGlobalCSSVars } from "@/app/utils/client";
 import { ComponentType, useRef, useState } from "react";
-
-import DragIcon from "@/app/icons/drag.svg";
 import { useAppConfig } from "@/app/store/config";
 
 export interface MenuWrapperInspectProps {
+  setExternalProps?: (v: Record<string, any>) => void;
   setShowPanel?: (v: boolean) => void;
   showPanel?: boolean;
+  [k: string]: any;
 }
 
 export default function MenuLayout<
@@ -27,8 +26,7 @@ export default function MenuLayout<
 ) {
   return function MenuHood(props: ListComponentProps & PanelComponentProps) {
     const [showPanel, setShowPanel] = useState(false);
-
-    const navigate = useNavigate();
+    const [externalProps, setExternalProps] = useState({});
     const config = useAppConfig();
 
     const isMobileScreen = useMobileScreen();
@@ -62,38 +60,34 @@ export default function MenuLayout<
     return (
       <div
         className={`
-        h-[100%] w-[100%] relative bg-center
-        md:flex 
-      `}
+          w-[100%] relative bg-center
+          md:flex md:my-2.5
+        `}
       >
         <div
           className={`
             flex flex-col px-6 
             h-[100%] 
             max-md:w-[100%] max-md:px-4 max-md:pb-4 max-md:flex-1
-            md:relative md:basis-sidebar md:h-[calc(100%-1.25rem)] md:pb-6  md:rounded-md md:my-2.5 md:bg-menu
+            md:relative md:basis-sidebar  md:pb-6  md:rounded-md md:bg-menu
           `}
-          // onClick={(e) => {
-          //   if (e.target === e.currentTarget) {
-          //     navigate(Path.Home);
-          //   }
-          // }}
         >
           <ListComponent
             {...props}
             setShowPanel={setShowPanel}
+            setExternalProps={setExternalProps}
             showPanel={showPanel}
           />
         </div>
         {!isMobileScreen && (
           <div
-            className={`group/menu-dragger h-[100%] cursor-col-resize w-[0.25rem]  flex items-center justify-center`}
+            className={`group/menu-dragger cursor-col-resize w-[0.25rem]  flex items-center justify-center`}
             onPointerDown={(e) => {
               startDragWidth.current = config.sidebarWidth;
               onDragStart(e as any);
             }}
           >
-            <div className="w-[1px] opacity-0 group-hover/menu-dragger:opacity-100 bg-menu-dragger">
+            <div className="w-[2px] opacity-0 group-hover/menu-dragger:opacity-100 bg-menu-dragger h-[100%] rounded-[2px]">
               &nbsp;
             </div>
           </div>
@@ -108,7 +102,9 @@ export default function MenuLayout<
         >
           <PanelComponent
             {...props}
+            {...externalProps}
             setShowPanel={setShowPanel}
+            setExternalProps={setExternalProps}
             showPanel={showPanel}
           />
         </div>
diff --git a/app/components/Popover/index.tsx b/app/components/Popover/index.tsx
index 2baebc143..54491f17a 100644
--- a/app/components/Popover/index.tsx
+++ b/app/components/Popover/index.tsx
@@ -312,17 +312,21 @@ export default function Popover(props: PopoverProps) {
 
   return (
     <div
-      className={`group relative ${className}`}
+      className={`group/popover relative ${className}`}
       onPointerEnter={(e) => {
         getRelativePosition(e.currentTarget, "");
         e.preventDefault();
         e.stopPropagation();
       }}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
     >
       {children}
       <div
         className={`
-          hidden group-hover:block 
+          hidden group-hover/popover:block 
           ${noArrow ? "opacity-0" : ""} 
           bg-inherit 
           ${arrowClassName}
@@ -332,9 +336,14 @@ export default function Popover(props: PopoverProps) {
         <ArrowIcon sibling={popoverRef} />
       </div>
       <div
-        className={`hidden group-hover:block whitespace-nowrap ${popoverCommonClass} ${placementClassName} ${popoverClassName}`}
+        className={`
+          hidden group-hover/popover:block whitespace-nowrap 
+          ${popoverCommonClass} 
+          ${placementClassName} 
+          ${popoverClassName}
+        `}
         ref={popoverRef}
-        style={{ zIndex: 10000 }}
+        style={{ zIndex: baseZIndex + 1 }}
       >
         {content}
       </div>
diff --git a/app/components/Screen/index.tsx b/app/components/Screen/index.tsx
index e5ed0d3f0..a2e1fafbc 100644
--- a/app/components/Screen/index.tsx
+++ b/app/components/Screen/index.tsx
@@ -28,9 +28,9 @@ export default function Screen(props: ScreenProps) {
   return (
     <div
       className={`
-        bg-global flex h-[100%] w-[100%] bg-center
-        max-md:relative  max-md:flex-col-reverse  
-        md:overflow-hidden
+         flex h-[100%] w-[100%] bg-center
+        max-md:relative  max-md:flex-col-reverse  max-md:bg-global-mobile
+        md:overflow-hidden md:bg-global
       `}
       style={{
         direction: getLang() === "ar" ? "rtl" : "ltr",
@@ -54,7 +54,7 @@ export default function Screen(props: ScreenProps) {
             className={`
               h-[100%]
               max-md:w-[100%] 
-              md:flex-1 md:min-w-0 md:overflow-hidden
+              md:flex-1 md:min-w-0 md:overflow-hidden md:flex
             `}
             id={SlotID.AppBody}
             style={{
diff --git a/app/components/Switch/index.tsx b/app/components/Switch/index.tsx
index 5f88c3f43..051a152d8 100644
--- a/app/components/Switch/index.tsx
+++ b/app/components/Switch/index.tsx
@@ -15,11 +15,15 @@ export default function Switch(props: SwitchProps) {
     <RadixSwitch.Root
       checked={value}
       onCheckedChange={onChange}
-      className={` cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md ${switchClassName} ${
-        value
-          ? "bg-switch-checked justify-end"
-          : "bg-switch-unchecked justify-start"
-      }`}
+      className={` 
+        cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md
+        ${switchClassName} 
+        ${
+          value
+            ? "bg-switch-checked justify-end"
+            : "bg-switch-unchecked justify-start"
+        }
+      `}
     >
       <RadixSwitch.Thumb
         className={` bg-switch-btn block w-4 h-4 drop-shadow-sm rounded-md`}
diff --git a/app/containers/Chat/ChatPanel.tsx b/app/containers/Chat/ChatPanel.tsx
index 833e41bfa..0ba590c07 100644
--- a/app/containers/Chat/ChatPanel.tsx
+++ b/app/containers/Chat/ChatPanel.tsx
@@ -259,7 +259,7 @@ function _Chat() {
       className={`
         relative flex flex-col overflow-hidden bg-chat-panel
         max-md:absolute max-md:h-[100vh] max-md:w-[100%]
-        md:h-[calc(100%-1.25rem)] md:my-2.5 md:mr-2.5 md:rounded-md
+        md:h-[100%] md:mr-2.5 md:rounded-md
         `}
       key={session.id}
     >
diff --git a/app/containers/Chat/components/ChatActions.tsx b/app/containers/Chat/components/ChatActions.tsx
index f6bfeddfc..3957a6136 100644
--- a/app/containers/Chat/components/ChatActions.tsx
+++ b/app/containers/Chat/components/ChatActions.tsx
@@ -30,6 +30,7 @@ export interface Action {
   render?: (key: string) => JSX.Element;
   icon?: JSX.Element;
   placement: "left" | "right";
+  className?: string;
 }
 
 export function ChatActions(props: {
@@ -220,7 +221,11 @@ export function ChatActions(props: {
         .filter((v) => v.placement === "left" && v.isShow)
         .map((act, ind) => {
           if (act.render) {
-            return act.render(act.text);
+            return (
+              <div className={`${act.className ?? ""}`} key={act.text}>
+                {act.render(act.text)}
+              </div>
+            );
           }
           return (
             <Popover
@@ -228,9 +233,10 @@ export function ChatActions(props: {
               content={act.text}
               popoverClassName={`${popoverClassName}`}
               placement={ind ? "t" : "lt"}
+              className={`${act.className ?? ""}`}
             >
               <div
-                className=" cursor-pointer h-[32px] w-[32px] flex items-center justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn"
+                className={` cursor-pointer h-[32px] w-[32px] flex items-center justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn`}
                 onClick={act.onClick}
               >
                 {act.icon}
diff --git a/app/containers/Chat/components/ChatHeader.tsx b/app/containers/Chat/components/ChatHeader.tsx
index a6608f523..21346e4ba 100644
--- a/app/containers/Chat/components/ChatHeader.tsx
+++ b/app/containers/Chat/components/ChatHeader.tsx
@@ -6,7 +6,6 @@ import { DEFAULT_TOPIC, useChatStore } from "@/app/store/chat";
 import LogIcon from "@/app/icons/logIcon.svg";
 import GobackIcon from "@/app/icons/goback.svg";
 import ShareIcon from "@/app/icons/shareIcon.svg";
-import BottomArrow from "@/app/icons/bottomArrow.svg";
 import ModelSelect from "./ModelSelect";
 
 export interface ChatHeaderProps {
@@ -79,7 +78,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
       </div>
 
       <div
-        className=" cursor-pointer"
+        className=" cursor-pointer hover:bg-hovered-btn p-1.5 rounded-action-btn"
         onClick={() => {
           setShowExport(true);
         }}
diff --git a/app/containers/Chat/components/ChatInputPanel.tsx b/app/containers/Chat/components/ChatInputPanel.tsx
index 7d9829467..12a91b9e0 100644
--- a/app/containers/Chat/components/ChatInputPanel.tsx
+++ b/app/containers/Chat/components/ChatInputPanel.tsx
@@ -250,7 +250,7 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
           <label
             className={`
               cursor-text flex flex-col bg-chat-panel-input-hood border border-chat-input-hood 
-              sm:focus-within:border-chat-input-hood-focus sm:focus-within:shadow-chat-input-hood-focus-shadow 
+              focus-within:border-chat-input-hood-focus sm:focus-within:shadow-chat-input-hood-focus-shadow 
               rounded-chat-input p-3 gap-3 max-md:flex-1
               md:rounded-md md:p-4 md:gap-4
             `}
diff --git a/app/containers/Chat/components/ChatMessagePanel.tsx b/app/containers/Chat/components/ChatMessagePanel.tsx
index 318963a30..6fd661848 100644
--- a/app/containers/Chat/components/ChatMessagePanel.tsx
+++ b/app/containers/Chat/components/ChatMessagePanel.tsx
@@ -180,7 +180,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
                 )}
               </div>
               <div
-                className={`group relative flex flex ${
+                className={`group relative flex ${
                   isUser ? "flex-row-reverse" : ""
                 }`}
               >
@@ -218,7 +218,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
                     fontSize={fontSize}
                     parentRef={scrollRef}
                     defaultShow={i >= messages.length - 6}
-                    className={`max-w-message-width ${
+                    className={`leading-6 max-w-message-width ${
                       isUser
                         ? " text-text-chat-message-markdown-user"
                         : "text-text-chat-message-markdown-bot"
diff --git a/app/containers/Chat/components/ModelSelect.tsx b/app/containers/Chat/components/ModelSelect.tsx
index b3bbc16f5..5d6530c60 100644
--- a/app/containers/Chat/components/ModelSelect.tsx
+++ b/app/containers/Chat/components/ModelSelect.tsx
@@ -63,7 +63,9 @@ const ModelSelect = () => {
   };
 
   const content: TriggerProps["content"] = ({ close }) => (
-    <div className={`flex flex-col gap-1 overflow-x-hidden  relative`}>
+    <div
+      className={`flex flex-col gap-1 overflow-x-hidden  relative text-sm-title`}
+    >
       {models?.map((o) => (
         <div
           key={o.displayName}
@@ -125,7 +127,7 @@ const ModelSelect = () => {
       placement={
         position?.poi.relativePosition[1] !== Orientation.bottom ? "lb" : "lt"
       }
-      popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover  bg-select-popover-panel max-h-chat-actions-select-model-popover !py-0"
+      popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover  bg-select-popover-panel max-h-chat-actions-select-model-popover  w-[280px]"
       onShow={(e) => {
         if (e) {
           autoScrollToSelectedModal();
@@ -135,7 +137,7 @@ const ModelSelect = () => {
       getPopoverPanelRef={(ref) => (contentRef.current = ref.current)}
     >
       <div
-        className="flex items-center  justify-center gap-1 cursor-pointer rounded-chat-model-select pl-3 pr-2.5 py-2 font-common leading-4 bg-chat-actions-select-model hover:bg-chat-actions-select-model-hover"
+        className="flex items-center justify-center gap-1 cursor-pointer rounded-chat-model-select pl-3 pr-2.5 py-2 font-common leading-4 bg-chat-actions-select-model hover:bg-chat-actions-select-model-hover"
         ref={rootRef}
       >
         <div className="line-clamp-1 max-w-chat-actions-select-model text-sm-title">
diff --git a/app/containers/Chat/components/SessionItem.tsx b/app/containers/Chat/components/SessionItem.tsx
index d93f7235a..ec9f51e61 100644
--- a/app/containers/Chat/components/SessionItem.tsx
+++ b/app/containers/Chat/components/SessionItem.tsx
@@ -13,6 +13,7 @@ import DeleteIcon from "@/app/icons/deleteIcon.svg";
 import LogIcon from "@/app/icons/logIcon.svg";
 
 import HoverPopover from "@/app/components/HoverPopover";
+import Popover from "@/app/components/Popover";
 
 export default function SessionItem(props: {
   onClick?: () => void;
@@ -45,12 +46,16 @@ export default function SessionItem(props: {
           className={`
               group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2 
               border 
-              bg-chat-menu-session-unselected border-chat-menu-session-unselected cursor-pointer
+              bg-chat-menu-session-unselected-mobile border-chat-menu-session-unselected-mobile
+              md:bg-chat-menu-session-unselected md:border-chat-menu-session-unselected
               ${
                 props.selected &&
                 (currentPath === Path.Chat || currentPath === Path.Home)
-                  ? `!bg-chat-menu-session-selected !border-chat-menu-session-selected`
-                  : `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered`
+                  ? `
+                    md:!bg-chat-menu-session-selected md:!border-chat-menu-session-selected
+                    !bg-chat-menu-session-selected-mobile !border-chat-menu-session-selected-mobile
+                    `
+                  : `md:hover:bg-chat-menu-session-hovered md:hover:chat-menu-session-hovered`
               }
             `}
           onClick={props.onClick}
@@ -75,7 +80,7 @@ export default function SessionItem(props: {
                 {props.title}
               </div>
               <div
-                className={`text-text-chat-menu-item-time text-sm group-hover/chat-menu-list:opacity-0 pl-3`}
+                className={`text-text-chat-menu-item-time text-sm group-hover/chat-menu-list:opacity-0 pl-3 hidden md:block`}
               >
                 {getTime(props.time)}
               </div>
@@ -84,39 +89,82 @@ export default function SessionItem(props: {
               {Locale.ChatItem.ChatItemCount(props.count)}
             </div>
           </div>
-          <HoverPopover
-            content={
-              <div
-                className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
-                onClickCapture={(e) => {
-                  props.onDelete?.();
-                  e.preventDefault();
-                  e.stopPropagation();
-                }}
-              >
-                <DeleteChatIcon />
-                <div className="flex-1 font-common text-actions-popover-menu-item">
-                  {Locale.Chat.Actions.Delete}
-                </div>
-              </div>
-            }
-            popoverClassName={`
-                px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow 
-              `}
-            noArrow
-            align={props.isMobileScreen ? "end" : "start"}
+          <div
+            className={`text-text-chat-menu-item-time text-sm pl-3 block md:hidden`}
           >
-            <div
-              className={`
-                  !absolute top-[50%] translate-y-[-50%] right-3 pointer-events-none opacity-0 
-                  group-hover/chat-menu-list:pointer-events-auto 
-                  group-hover/chat-menu-list:opacity-100
-                  hover:bg-select-hover rounded-chat-img
+            {getTime(props.time)}
+          </div>
+          {props.isMobileScreen ? (
+            <Popover
+              content={
+                <div
+                  className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
+                  onClickCapture={(e) => {
+                    props.onDelete?.();
+                  }}
+                >
+                  <DeleteChatIcon />
+                  <div className="flex-1 font-common text-actions-popover-menu-item text-text-chat-menu-item-delete">
+                    {Locale.Chat.Actions.Delete}
+                  </div>
+                </div>
+              }
+              popoverClassName={`
+                    px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow 
                 `}
+              noArrow
+              placement="r"
             >
-              <DeleteIcon />
-            </div>
-          </HoverPopover>
+              <div
+                className={`
+                        cursor-pointer rounded-chat-img
+                        md:!absolute md:top-[50%] md:translate-y-[-50%] md:right-3 md:pointer-events-none md:opacity-0 
+                        md:group-hover/chat-menu-list:pointer-events-auto 
+                        md:group-hover/chat-menu-list:opacity-100
+                        md:hover:bg-select-hover 
+                        follow-parent-svg
+                        text-text-chat-menu-item-time
+                    `}
+              >
+                <DeleteIcon />
+              </div>
+            </Popover>
+          ) : (
+            <HoverPopover
+              content={
+                <div
+                  className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
+                  onClickCapture={(e) => {
+                    props.onDelete?.();
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                >
+                  <DeleteChatIcon />
+                  <div className="flex-1 font-common text-actions-popover-menu-item text-text-chat-menu-item-delete">
+                    {Locale.Chat.Actions.Delete}
+                  </div>
+                </div>
+              }
+              popoverClassName={`
+                    px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow 
+                `}
+              noArrow
+              align="start"
+            >
+              <div
+                className={`
+                        cursor-pointer rounded-chat-img
+                        md:!absolute md:top-[50%] md:translate-y-[-50%] md:right-3 md:pointer-events-none md:opacity-0 
+                        md:group-hover/chat-menu-list:pointer-events-auto 
+                        md:group-hover/chat-menu-list:opacity-100
+                        md:hover:bg-select-hover 
+                    `}
+              >
+                <DeleteIcon />
+              </div>
+            </HoverPopover>
+          )}
         </div>
       )}
     </Draggable>
diff --git a/app/containers/Settings/SettingPanel.tsx b/app/containers/Settings/SettingPanel.tsx
index a84fc483e..4fed75b68 100644
--- a/app/containers/Settings/SettingPanel.tsx
+++ b/app/containers/Settings/SettingPanel.tsx
@@ -18,7 +18,7 @@ import ProviderSetting from "./components/ProviderSetting";
 import ModelConfigList from "./components/ModelSetting";
 
 export default function Settings(props: MenuWrapperInspectProps) {
-  const { setShowPanel } = props;
+  const { setShowPanel, id } = props;
 
   const navigate = useNavigate();
   const accessStore = useAccessStore();
@@ -49,12 +49,63 @@ export default function Settings(props: MenuWrapperInspectProps) {
 
   const cardClassName = "mb-6 md:mb-8 last:mb-0";
 
+  const itemMap = {
+    [Locale.Settings.GeneralSettings]: (
+      <>
+        <Card className={cardClassName} title={Locale.Settings.Basic.Title}>
+          <AppSetting />
+        </Card>
+
+        <Card className={cardClassName} title={Locale.Settings.Mask.Title}>
+          <MaskSetting />
+        </Card>
+        <Card className={cardClassName} title={Locale.Settings.Prompt.Title}>
+          <PromptSetting />
+        </Card>
+        <Card className={cardClassName} title={Locale.Settings.Provider.Title}>
+          <ProviderSetting />
+        </Card>
+
+        <Card className={cardClassName} title={Locale.Settings.Danger.Title}>
+          <DangerItems />
+        </Card>
+      </>
+    ),
+    [Locale.Settings.ModelSettings]: (
+      <Card className={cardClassName} title={Locale.Settings.Models.Title}>
+        <List
+          widgetStyle={{
+            // selectClassName: "min-w-select-mobile-lg",
+            selectClassName: "min-w-select-mobile md:min-w-select",
+            inputClassName: "md:min-w-select",
+            rangeClassName: "md:min-w-select",
+            rangeNextLine: isMobileScreen,
+          }}
+        >
+          <ModelConfigList
+            modelConfig={config.modelConfig}
+            updateConfig={(updater) => {
+              const modelConfig = { ...config.modelConfig };
+              updater(modelConfig);
+              config.update((config) => (config.modelConfig = modelConfig));
+            }}
+          />
+        </List>
+      </Card>
+    ),
+    [Locale.Settings.DataSettings]: (
+      <Card className={cardClassName} title={Locale.Settings.Sync.Title}>
+        <SyncItems />
+      </Card>
+    ),
+  };
+
   return (
     <div
       className={`
         flex flex-col overflow-hidden bg-settings-panel 
         h-setting-panel-mobile
-        md:h-[calc(100%-1.25rem)] md:my-2.5 md:mr-2.5 md:rounded-md
+        md:h-[100%] md:mr-2.5 md:rounded-md
       `}
     >
       <SettingHeader
@@ -78,47 +129,7 @@ export default function Settings(props: MenuWrapperInspectProps) {
             overflow-y-auto
           `}
         >
-          <Card className={cardClassName} title={Locale.Settings.Basic.Title}>
-            <AppSetting />
-          </Card>
-          <Card className={cardClassName} title={Locale.Settings.Sync.Title}>
-            <SyncItems />
-          </Card>
-          <Card className={cardClassName} title={Locale.Settings.Mask.Title}>
-            <MaskSetting />
-          </Card>
-          <Card className={cardClassName} title={Locale.Settings.Prompt.Title}>
-            <PromptSetting />
-          </Card>
-          <Card
-            className={cardClassName}
-            title={Locale.Settings.Provider.Title}
-          >
-            <ProviderSetting />
-          </Card>
-          <Card className={cardClassName} title={Locale.Settings.Models.Title}>
-            <List
-              widgetStyle={{
-                // selectClassName: "min-w-select-mobile-lg",
-                selectClassName: "min-w-select-mobile md:min-w-select",
-                inputClassName: "md:min-w-select",
-                rangeClassName: "md:min-w-select",
-                rangeNextLine: isMobileScreen,
-              }}
-            >
-              <ModelConfigList
-                modelConfig={config.modelConfig}
-                updateConfig={(updater) => {
-                  const modelConfig = { ...config.modelConfig };
-                  updater(modelConfig);
-                  config.update((config) => (config.modelConfig = modelConfig));
-                }}
-              />
-            </List>
-          </Card>
-          <Card className={cardClassName} title={Locale.Settings.Danger.Title}>
-            <DangerItems />
-          </Card>
+          {itemMap[id] || null}
         </div>
       </div>
     </div>
diff --git a/app/containers/Settings/components/SettingHeader.tsx b/app/containers/Settings/components/SettingHeader.tsx
index 0ecdbe63f..47b945ed6 100644
--- a/app/containers/Settings/components/SettingHeader.tsx
+++ b/app/containers/Settings/components/SettingHeader.tsx
@@ -36,7 +36,7 @@ export default function SettingHeader(props: ChatHeaderProps) {
         <div
           className={`
           line-clamp-1 cursor-pointer text-text-settings-panel-header-title text-chat-header-title font-common 
-          max-md:text-sm-title max-md:h-chat-header-title-mobile max-md:leading-5
+          max-md:text-sm-title max-md:h-chat-header-title-mobile max-md:leading-5 !font-medium
           `}
         >
           {Locale.Settings.Title}
diff --git a/app/containers/Settings/index.tsx b/app/containers/Settings/index.tsx
index 5b449552e..6429b5d8c 100644
--- a/app/containers/Settings/index.tsx
+++ b/app/containers/Settings/index.tsx
@@ -1,3 +1,4 @@
+"use client";
 import Locale from "@/app/locales";
 import MenuLayout from "@/app/components/MenuLayout";
 
@@ -5,24 +6,38 @@ import Panel from "./SettingPanel";
 
 import GotoIcon from "@/app/icons/goto.svg";
 import { useAppConfig } from "@/app/store";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
+export const list = [
+  {
+    id: Locale.Settings.GeneralSettings,
+    title: Locale.Settings.GeneralSettings,
+    icon: null,
+  },
+  {
+    id: Locale.Settings.ModelSettings,
+    title: Locale.Settings.ModelSettings,
+    icon: null,
+  },
+  {
+    id: Locale.Settings.DataSettings,
+    title: Locale.Settings.DataSettings,
+    icon: null,
+  },
+];
 
 export default MenuLayout(function SettingList(props) {
-  const { setShowPanel } = props;
+  const { setShowPanel, setExternalProps } = props;
   const config = useAppConfig();
 
   const { isMobileScreen } = config;
 
-  const list = [
-    {
-      id: Locale.Settings.GeneralSettings,
-      title: Locale.Settings.GeneralSettings,
-      icon: null,
-    },
-  ];
-
   const [selected, setSelected] = useState(list[0].id);
 
+  useEffect(() => {
+    setExternalProps?.(list[0]);
+  }, []);
+
   return (
     <div
       className={`
@@ -39,28 +54,28 @@ export default MenuLayout(function SettingList(props) {
           `}
           data-tauri-drag-region
         >
-          <div className="text-setting-title text-text-settings-menu-title font-common font-setting-title">
+          <div className="text-setting-title text-text-settings-menu-title font-common !font-bold">
             {Locale.Settings.Title}
           </div>
         </div>
       </div>
 
       <div
-        className={`flex flex-col overflow-y-auto overflow-x-hidden w-[100%]`}
+        className={`flex flex-col gap-2 overflow-y-auto overflow-x-hidden w-[100%]`}
       >
         {list.map((i) => (
           <div
             key={i.id}
             className={`
               p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
-             cursor-pointer
+              cursor-pointer
               border 
               rounded-md
 
               bg-chat-menu-session-unselected border-chat-menu-session-unselected
               ${
                 selected === i.id && !isMobileScreen
-                  ? `!bg-chat-menu-session-selected !border-chat-menu-session-selected`
+                  ? `!bg-chat-menu-session-selected !border-chat-menu-session-selected !font-medium`
                   : `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered`
               }
 
@@ -70,6 +85,8 @@ export default MenuLayout(function SettingList(props) {
             `}
             onClick={() => {
               setShowPanel?.(true);
+              setExternalProps?.(i);
+              setSelected(i.id);
             }}
           >
             {i.title}
diff --git a/app/containers/Sidebar/index.tsx b/app/containers/Sidebar/index.tsx
index 1665a8bb6..8a3c53391 100644
--- a/app/containers/Sidebar/index.tsx
+++ b/app/containers/Sidebar/index.tsx
@@ -115,7 +115,7 @@ export function SideBar(props: { className?: string }) {
         }}
         selected={selectedTab}
         className={`
-        max-md:bg-sidebar-mobile max-md:rounded-tl-md max-md:rounded-tr-md max-md:h-mobile max-md:justify-around
+        max-md:bg-sidebar-mobile  max-md:h-mobile max-md:justify-around
         2xl:px-5 xl:px-4 md:px-2 md:py-6 md:flex-col
         `}
       />
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index caa07a333..dec63e6ce 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -134,6 +134,8 @@ const cn = {
     Title: "设置",
     SubTitle: "所有设置选项",
     GeneralSettings: "通用设置",
+    ModelSettings: "模型设置",
+    DataSettings: "同步设置",
     Basic: {
       Title: "基础设置",
     },
diff --git a/app/locales/en.ts b/app/locales/en.ts
index 738ebcb21..7fa9670f9 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -138,6 +138,8 @@ const en: LocaleType = {
     Title: "Settings",
     SubTitle: "All Settings",
     GeneralSettings: "General settings",
+    ModelSettings: "Model settings",
+    DataSettings: "Sync settings",
     Basic: {
       Title: "Basic Settings",
     },
diff --git a/app/styles/base-new.scss b/app/styles/base-new.scss
index 0cb2b88f1..38ff01e1c 100644
--- a/app/styles/base-new.scss
+++ b/app/styles/base-new.scss
@@ -22,14 +22,23 @@ body {
         background-color: inherit;
     }
 
+    .follow-parent-svg {
+        svg {
+            *:not(rect) {
+                fill: currentColor;
+            }
+        }
+    }
+
     --siderbar-mobile-height: 3.125rem;
     --max-message-width: calc(var(--chat-panel-max-width) * 0.6);
 }
 
 .light-new {
   --global-bg: #e3e3ed;
+  --global-mobile-bg: #f0f0f3;
   --actions-bar-btn-default-bg: #2e42f3;
-  --primary-btn: #2e42f3;
+  --primary-btn-bg: #2e42f3;
   --primary-btn-disabled-bg: rgba(60, 68, 255, 0.2);
   --danger-btn-bg: #fff6f6;
   --default-btn-bg: #f7f7f8;
@@ -72,16 +81,18 @@ body {
   --sidebar-btn-hovered-bg: rgba(0, 0, 0, 0.05);
   --delete-chat-popover-panel-bg: #fff;
   --modal-mask-bg: rgba(0, 0, 0, 0.7);
-  --moda-panel-bg: #fff;
+  --modal-panel-bg: #fff;
   --delete-chat-ok-btn-bg: #ff5454;
   --delete-chat-cancel-btn-bg: #fff;
   --chat-message-actions-bg: #fff;
-  --menu-dragger-bg: blue;
+  --menu-dragger-bg: #2E42F3;
   --chat-actions-select-model-bg: rgba(0, 0, 0, 0.05);
   --chat-actions-select-model-hover-bg: rgba(0, 0, 0, 0.1);
   --select-hover-bg: rgba(0, 0, 0, 0.05);
   --input-input-ele-hover-bg: rgba(0, 0, 0, 0);
   --slider-block-hover-bg: #F7F7F8;
+  --chat-menu-session-unselected-mobile-bg:#FFF;
+  --chat-menu-session-selected-mobile-bg:  rgba(0, 0, 0, 0.05);
 
   --select-popover-border: rgba(0, 0, 0, 0.1);
   --slider-block-border: #c9c9d1;
@@ -99,6 +110,8 @@ body {
   --chat-menu-session-unselected-border: #f0f0f3;
   --chat-menu-session-hovered-border: #e2e2e6;
   --modal-header-bottom-border: #f0f0f3;
+  --chat-menu-session-unselected-mobile-border: #FFF;
+  --chat-menu-session-selected-mobile-border: rgba(0, 0, 0, 0);
 
   --sidebar-tab-mobile-active-text: #2e42f3;
   --sidebar-tab-mobile-inactive-text: #a5a5b3;
@@ -126,6 +139,7 @@ body {
   --modal-mask-text: #18182a;
   --delete-chat-ok-btn-text: #fff;
   --delete-chat-cancel-btn-text: #18182a;
+  --chat-menu-item-delete-text: #FF5454;
 
   --btn-shadow: 0px 4px 10px 0px rgba(60, 68, 255, 0.14);
   --chat-actions-popover-mobile-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12);
@@ -141,58 +155,61 @@ body {
 .dark-new {
   --global-bg: #303030;
   --actions-bar-btn-default-bg: #384cfc;
-  --primary-btn: #384cfc;
+  --primary-btn-bg: #384cfc;
   --primary-btn-disabled-bg: rgba(60, 68, 255, 0.2);
   --danger-btn-bg: #20131A;
   --default-btn-bg: #1D1D1D;
-  --hovered-btn-bg: rgba(0, 0, 0, 0.05);
-  --card-bg: #fff;
-  --input-bg: #f7f7f8;
-  --list-item-divider-bg: #f0f0f3;
-  --menu-bg: #f7f7f8;
-  --select-option-hovered-bg: rgba(0, 0, 0, 0.05);
-  --select-popover-panel-bg: #fff;
-  --select-bg: #f7f7f8;
-  --slider-bg: #f0f0f3;
-  --slider-slided-travel-bg: #88889a;
-  --slider-block-bg: #fff;
-  --switch-unchecked-bg: #c9c9d1;
-  --switch-checked-bg: #2e42f3;
-  --switch-btn-bg: #fff;
-  --chat-actions-popover-panel-mobile-bg: #fff;
-  --chat-actions-btn-popover-bg: #434360;
-  --chat-actions-btn-hovered-bg: rgba(0, 0, 0, 0.05);
-  --chat-panel-header-mask-bg: #f7f7f8;
-  --chat-panel-header-mobile-bg: #fff;
-  --chat-panel-input-hood-bg: #fff;
+  --hovered-btn-bg: #303030;
+  --card-bg: #111;
+  --input-bg: #1D1D1D;
+  --list-item-divider-bg: #303030;
+  --menu-bg: #1D1D1D;
+  --select-option-hovered-bg: rgba(255, 255, 255, 0.05);
+  --select-popover-panel-bg: #1D1D1D;
+  --select-bg: #1D1D1D;
+  --slider-bg: #303030;
+  --slider-slided-travel-bg: #B0B0B0;
+  --slider-block-bg: #111;
+  --switch-unchecked-bg: #303030;
+  --switch-checked-bg: #384CFC;
+  --switch-btn-bg: #111;
+  --chat-actions-popover-panel-mobile-bg: #111;
+  --chat-actions-btn-popover-bg: #F0F0F0;
+  --chat-actions-btn-hovered-bg: rgba(255, 255, 255, 0.05);
+  --chat-panel-header-mask-bg: #1D1D1D;
+  --chat-panel-header-mobile-bg: #111;
+  --chat-panel-input-hood-bg: #111;
   --chat-panel-message-user-bg: #4a5cff;
-  --chat-panel-message-bot-bg: #fff;
-  --chat-panel-message-bg: #f7f7f8;
-  --chat-panel-message-mobile-bg: #f0f0f3;
-  --chat-message-actions-btn-hovered-bg: rgba(0, 0, 0, 0.05);
-  --chat-panel-bg: #f7f7f8;
-  --chat-panel-message-clear-divider-bg: #e2e2e6;
-  --chat-menu-session-selected-bg: #dee1fd;
-  --chat-menu-session-unselected-bg: #f0f0f3;
-  --chat-menu-session-hovered-bg: #e2e2e6;
-  --settings-menu-mobile-bg: #f7f7f8;
-  --settings-menu-item-mobile-bg: #fff;
-  --settings-menu-item-selected-bg: #dee1fd;
-  --settings-header-mobile-bg: #fff;
-  --settings-panel-bg: #f7f7f8;
-  --sidebar-mobile-bg: #fff;
-  --sidebar-btn-hovered-bg: rgba(0, 0, 0, 0.05);
-  --delete-chat-popover-panel-bg: #fff;
-  --modal-mask-bg: rgba(0, 0, 0, 0.7);
-  --moda-panel-bg: #fff;
-  --delete-chat-ok-btn-bg: #ff5454;
-  --delete-chat-cancel-btn-bg: #fff;
-  --chat-message-actions-bg: #fff;
-  --menu-dragger-bg: blue;
-  --chat-actions-select-model-bg: rgba(0, 0, 0, 0.05);
-  --chat-actions-select-model-hover-bg: rgba(0, 0, 0, 0.1);
-  --select-hover-bg: rgba(0, 0, 0, 0.05);
+  --chat-panel-message-bot-bg: #111;
+  --chat-panel-message-bg: #1D1D1D;
+  --chat-panel-message-mobile-bg: #303030;
+  --chat-message-actions-btn-hovered-bg: rgba(255, 255, 255, 0.05);
+  --chat-panel-bg: #1D1D1D;
+  --chat-panel-message-clear-divider-bg: #e2e2e6; //////////
+  --chat-menu-session-selected-bg: #182455;
+  --chat-menu-session-unselected-bg: #303030;
+  --chat-menu-session-hovered-bg: #404040;
+  --settings-menu-mobile-bg: #1D1D1D;
+  --settings-menu-item-mobile-bg: #111;
+  --settings-menu-item-selected-bg: #182455;
+  --settings-header-mobile-bg: #111;
+  --settings-panel-bg: #1D1D1D;
+  --sidebar-mobile-bg: #111;
+  --sidebar-btn-hovered-bg: rgba(255, 255, 255, 0.05);
+  --delete-chat-popover-panel-bg: #111;
+  --modal-mask-bg: rgba(0, 0, 0, 0.85);
+  --modal-panel-bg: #111;
+  --delete-chat-ok-btn-bg: #F55151;
+  --delete-chat-cancel-btn-bg: #404040;
+  --chat-message-actions-bg: rgba(255, 255, 255, 0);
+  --menu-dragger-bg: #2E42F3;                  ///////////
+  --chat-actions-select-model-bg: rgba(255, 255, 255, 0.05);
+  --chat-actions-select-model-hover-bg: rgba(255, 255, 255, 0.1);
+  --select-hover-bg: #303030;
   --input-input-ele-hover-bg: rgba(0, 0, 0, 0);
+  --chat-menu-session-unselected-mobile-bg:#111; 
+  --chat-menu-session-selected-mobile-bg:  rgba(0, 0, 0, 0.05);////////////
+  --global-mobile-bg: #303030;
 
   --select-popover-border: rgba(0, 0, 0, 0.1);
   --slider-block-border: #c9c9d1;
@@ -210,6 +227,8 @@ body {
   --chat-menu-session-unselected-border: #f0f0f3;
   --chat-menu-session-hovered-border: #e2e2e6;
   --modal-header-bottom-border: #f0f0f3;
+  --chat-menu-session-unselected-mobile-border: #FFF;
+  --chat-menu-session-selected-mobile-border: rgba(0, 0, 0, 0.05);
 
   --sidebar-tab-mobile-active-text: #2e42f3;
   --sidebar-tab-mobile-inactive-text: #a5a5b3;
@@ -237,6 +256,7 @@ body {
   --modal-mask-text: #18182a;
   --delete-chat-ok-btn-text: #fff;
   --delete-chat-cancel-btn-text: #18182a;
+  --chat-menu-item-delete-text: #FF5454;
 
   --btn-shadow: 0px 4px 10px 0px rgba(60, 68, 255, 0.14);
   --chat-actions-popover-mobile-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12);
diff --git a/tailwind.config.js b/tailwind.config.js
index a23ed6f9a..fa8b3387b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,10 +21,6 @@ module.exports = {
       'setting-title': '1.25rem',
       'setting-items': '1rem',
     },
-    fontWeight: {
-      'setting-title': '700',
-      'setting-card-title': '600',
-    },
     fontFamily: {
       'common': ['Satoshi Variable', "SF Pro Text", "SF Pro Icons", "Helvetica Neue", 'Helvetica', 'Arial', 'sans-serif'],
       'time': ['Hind', "SF Pro Text", "SF Pro Icons", "Helvetica Neue", 'Helvetica', 'Arial', 'sans-serif'],
@@ -71,7 +67,7 @@ module.exports = {
         'page': 'calc(100% - var(--menu-width))',
         'thumbnail': '5rem',
         'actions-popover': '203px',
-        'switch': '2.25rem',
+        'switch': '2rem',
         'modal-modal-type': '26.25rem',
         'modal-modal-type-mobile': 'calc(100vw - 2 * 44px)',
       },
@@ -87,6 +83,7 @@ module.exports = {
       },
       backgroundColor: {
         'global': 'var(--global-bg)',
+        'global-mobile': 'var(--global-mobile-bg)',
         'actions-bar-btn-default': 'var(--actions-bar-btn-default-bg)',
         'primary-btn': 'var(--primary-btn-bg)',
         'primary-btn-disabled': 'var(--primary-btn-disabled-bg)',
@@ -122,7 +119,9 @@ module.exports = {
         'chat-panel': 'var(--chat-panel-bg)',
         'chat-panel-message-clear-divider': 'var(--chat-panel-message-clear-divider-bg)',
         'chat-menu-session-selected': 'var(--chat-menu-session-selected-bg)',
+        'chat-menu-session-selected-mobile': 'var(--chat-menu-session-selected-mobile-bg)',
         'chat-menu-session-unselected': 'var(--chat-menu-session-unselected-bg)',
+        'chat-menu-session-unselected-mobile': 'var(--chat-menu-session-unselected-mobile-bg)',
         'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-bg)',
         'settings-menu-mobile': 'var(--settings-menu-mobile-bg)',
         'settings-menu-item-mobile': 'var(--settings-menu-item-mobile-bg)',
@@ -133,7 +132,7 @@ module.exports = {
         'sidebar-btn-hovered': 'var(--sidebar-btn-hovered-bg)',
         'delete-chat-popover-panel': 'var(--delete-chat-popover-panel-bg)',
         'modal-mask': 'var(--modal-mask-bg)',
-        'moda-panel': 'var(--moda-panel-bg)',
+        'moda-panel': 'var(--modal-panel-bg)',
         'delete-chat-ok-btn': 'var(--delete-chat-ok-btn-bg)',
         'delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-bg)',
         'menu-dragger': 'var(--menu-dragger-bg)',
@@ -155,7 +154,7 @@ module.exports = {
       },
       maxWidth: {
         'message-width': 'var(--max-message-width)',
-        'chat-actions-select-model': '82px',
+        'chat-actions-select-model': '282px',
       },
       boxShadow: {
         'btn': 'var(--btn-shadow)',
@@ -176,12 +175,14 @@ module.exports = {
         'chat-input-top': 'var(--chat-input-top-border)',
         'chat-input-hood': 'var(--chat-input-hood-border)',
         'chat-input-hood-focus': 'var(--chat-input-hood-focus-border)',
-        'chat-menu-session-selected': 'var(--chat-menu-session-selected-border)',
         'settings-menu-item-selected': 'var(--settings-menu-item-selected-border)',
         'settings-header': 'var(--settings-header-border)',
         'delete-chat-popover': 'var(--delete-chat-popover-border)',
         'delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-border)',
+        'chat-menu-session-selected': 'var(--chat-menu-session-selected-border)',
+        'chat-menu-session-selected-mobile': 'var(--chat-menu-session-selected-mobile-border)',
         'chat-menu-session-unselected': 'var(--chat-menu-session-unselected-border)',
+        'chat-menu-session-unselected-mobile': 'var(--chat-menu-session-unselected-mobile-border)',
         'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-border)',
         'modal-header-bottom': 'var(--modal-header-bottom-border)',
 
@@ -204,6 +205,7 @@ module.exports = {
         'text-chat-panel-message-clear-revert': 'var(--chat-panel-message-clear-revert-text)',
         'text-chat-menu-item-title': 'var(--chat-menu-item-title-text)',
         'text-chat-menu-item-time': 'var(--chat-menu-item-time-text)',
+        'text-chat-menu-item-delete': 'var(--chat-menu-item-delete-text)',
         'text-chat-menu-item-description': 'var(--chat-menu-item-description-text)',
         'text-settings-menu-title': 'var(--settings-menu-title-text)',
         'text-settings-menu-item-title': 'var(--settings-menu-item-title-text)',