diff --git a/app/components/ActionsBar/index.tsx b/app/components/ActionsBar/index.tsx
index 03699a5b5..608fc379b 100644
--- a/app/components/ActionsBar/index.tsx
+++ b/app/components/ActionsBar/index.tsx
@@ -79,7 +79,7 @@ export default function ActionsBar(props: ActionsBarProps) {
               key={action.id}
               className={` cursor-pointer shrink-1 grow-0 basis-[${
                 (100 - 1) / arr.length
-              }%] flex flex-col items-center justify-center gap-0.5
+              }%] flex flex-col items-center justify-around gap-0.5 py-1.5
                         ${
                           selected === action.id
                             ? "text-text-sidebar-tab-mobile-active"
diff --git a/app/components/Btn/index.tsx b/app/components/Btn/index.tsx
index 9f86866d9..bb3898adb 100644
--- a/app/components/Btn/index.tsx
+++ b/app/components/Btn/index.tsx
@@ -32,7 +32,9 @@ export default function Btn(props: {
   switch (type) {
     case "primary":
       btnClassName = `${
-        disabled ? "bg-primary-btn-disabled" : "bg-primary-btn shadow-btn"
+        disabled
+          ? "bg-primary-btn-disabled dark:opacity-30 dark:text-primary-btn-disabled-dark"
+          : "bg-primary-btn shadow-btn"
       } text-text-btn-primary `;
       break;
     case "danger":
diff --git a/app/components/MenuLayout/index.tsx b/app/components/MenuLayout/index.tsx
index 1a6b6e3fc..7c9afd2f0 100644
--- a/app/components/MenuLayout/index.tsx
+++ b/app/components/MenuLayout/index.tsx
@@ -84,20 +84,20 @@ export default function MenuLayout<
             setShowPanel={setShowPanel}
             showPanel={showPanel}
           />
-          {!isMobileScreen && (
-            <div
-              className={`group/menu-dragger absolute right-0 h-[100%] flex items-center`}
-              onPointerDown={(e) => {
-                startDragWidth.current = config.sidebarWidth;
-                onDragStart(e as any);
-              }}
-            >
-              <div className="opacity-0 group-hover/menu-dragger:bg-[rgba($color: #000000, $alpha: 0.01)] group-hover/menu-dragger:opacity-20">
-                <DragIcon />
-              </div>
-            </div>
-          )}
         </div>
+        {!isMobileScreen && (
+          <div
+            className={`group/menu-dragger h-[100%] 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">
+              &nbsp;
+            </div>
+          </div>
+        )}
         <div
           className={`
           md:flex-1 md:h-[100%] md:w-page
diff --git a/app/components/Popover/index.tsx b/app/components/Popover/index.tsx
index a4eee6ee4..15014c4f0 100644
--- a/app/components/Popover/index.tsx
+++ b/app/components/Popover/index.tsx
@@ -39,7 +39,7 @@ if (!popoverRoot) {
   popoverRoot.style.width = "100%";
   popoverRoot.style.position = "fixed";
   popoverRoot.style.bottom = "0";
-  popoverRoot.style.zIndex = "100";
+  popoverRoot.style.zIndex = "10000";
   popoverRoot.id = "popover-root";
 }
 
diff --git a/app/components/Screen/index.tsx b/app/components/Screen/index.tsx
index 2f7a7b19c..e5ed0d3f0 100644
--- a/app/components/Screen/index.tsx
+++ b/app/components/Screen/index.tsx
@@ -52,9 +52,9 @@ export default function Screen(props: ScreenProps) {
 
           <div
             className={`
-            h-[100%]
-            max-md:w-[100%] 
-            md:flex-1 md:min-w-0 md:overflow-hidden
+              h-[100%]
+              max-md:w-[100%] 
+              md:flex-1 md:min-w-0 md:overflow-hidden
             `}
             id={SlotID.AppBody}
             style={{
diff --git a/app/components/Select/index.tsx b/app/components/Select/index.tsx
index e1a67cba1..15a14d1d6 100644
--- a/app/components/Select/index.tsx
+++ b/app/components/Select/index.tsx
@@ -79,13 +79,14 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
       placement={
         position?.poi.relativePosition[1] !== Orientation.bottom ? "rb" : "rt"
       }
-      popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover  bg-select-popover-panel dark:bg-select-popover-panel-dark"
+      popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover  bg-select-popover-panel"
       onShow={(e) => {
         getRelativePosition(contentRef.current!, "");
       }}
+      className={selectClassName}
     >
       <div
-        className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title ${selectClassName} cursor-pointer`}
+        className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title  cursor-pointer`}
         ref={contentRef}
       >
         <div className={`flex items-center gap-2 flex-1`}>
diff --git a/app/containers/Chat/ChatPanel.tsx b/app/containers/Chat/ChatPanel.tsx
index ed46d4da8..5d4839c15 100644
--- a/app/containers/Chat/ChatPanel.tsx
+++ b/app/containers/Chat/ChatPanel.tsx
@@ -278,7 +278,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:ml-1 md:mr-2.5 md:rounded-md
+        md:h-[calc(100%-1.25rem)] md:my-2.5 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 52172c271..2ec9a8c53 100644
--- a/app/containers/Chat/components/ChatActions.tsx
+++ b/app/containers/Chat/components/ChatActions.tsx
@@ -12,17 +12,26 @@ import { Path } from "@/app/constant";
 
 import BottomIcon from "@/app/icons/bottom.svg";
 import StopIcon from "@/app/icons/pause.svg";
-import RobotIcon from "@/app/icons/robot.svg";
 import LoadingButtonIcon from "@/app/icons/loading.svg";
-import PromptIcon from "@/app/icons/prompt.svg";
-import MaskIcon from "@/app/icons/mask.svg";
-import BreakIcon from "@/app/icons/break.svg";
-import SettingsIcon from "@/app/icons/chat-settings.svg";
-import ImageIcon from "@/app/icons/image.svg";
+import PromptIcon from "@/app/icons/comandIcon.svg";
+import MaskIcon from "@/app/icons/maskIcon.svg";
+import BreakIcon from "@/app/icons/eraserIcon.svg";
+import SettingsIcon from "@/app/icons/configIcon.svg";
+import ImageIcon from "@/app/icons/uploadImgIcon.svg";
 import AddCircleIcon from "@/app/icons/addCircle.svg";
+import BottomArrow from "@/app/icons/downArrowLgIcon.svg";
 
 import Popover from "@/app/components/Popover";
 
+export interface Action {
+  onClick: () => void;
+  text: string;
+  isShow: boolean;
+  pcRender?: () => JSX.Element;
+  icon?: JSX.Element;
+  placement: "left" | "right";
+}
+
 export function ChatActions(props: {
   uploadImage: () => void;
   setAttachImages: (images: string[]) => void;
@@ -83,7 +92,7 @@ export function ChatActions(props: {
     }
   }, [chatStore, currentModel, models]);
 
-  const actions = [
+  const actions: Action[] = [
     {
       onClick: stopAll,
       text: Locale.Chat.InputActions.Stop,
@@ -91,6 +100,18 @@ export function ChatActions(props: {
       icon: <StopIcon />,
       placement: "left",
     },
+    {
+      onClick: () => props.showModelSelector(true),
+      text: currentModel,
+      isShow: true,
+      pcRender: () => (
+        <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">
+          {currentModel}
+          <BottomArrow />
+        </div>
+      ),
+      placement: "left",
+    },
     {
       onClick: props.scrollToBottom,
       text: Locale.Chat.InputActions.ToBottom,
@@ -98,13 +119,6 @@ export function ChatActions(props: {
       icon: <BottomIcon />,
       placement: "left",
     },
-    {
-      onClick: props.showChatSetting,
-      text: Locale.Chat.InputActions.Settings,
-      isShow: true,
-      icon: <SettingsIcon />,
-      placement: "right",
-    },
     {
       onClick: props.uploadImage,
       text: Locale.Chat.InputActions.UploadImage,
@@ -162,11 +176,11 @@ export function ChatActions(props: {
       placement: "right",
     },
     {
-      onClick: () => props.showModelSelector(true),
-      text: currentModel,
+      onClick: props.showChatSetting,
+      text: Locale.Chat.InputActions.Settings,
       isShow: true,
-      icon: <RobotIcon />,
-      placement: "left",
+      icon: <SettingsIcon />,
+      placement: "right",
     },
   ] as const;
 
@@ -174,7 +188,7 @@ export function ChatActions(props: {
     const content = (
       <div className="w-[100%]">
         {actions
-          .filter((v) => v.isShow)
+          .filter((v) => v.isShow && v.icon)
           .map((act) => {
             return (
               <div
@@ -212,6 +226,13 @@ export function ChatActions(props: {
       {actions
         .filter((v) => v.placement === "left" && v.isShow)
         .map((act, ind) => {
+          if (act.pcRender) {
+            return (
+              <div key={act.text} onClick={act.onClick}>
+                {act.pcRender()}
+              </div>
+            );
+          }
           return (
             <Popover
               key={act.text}
diff --git a/app/containers/Chat/index.tsx b/app/containers/Chat/index.tsx
index 45a8d3bc2..1b52238e6 100644
--- a/app/containers/Chat/index.tsx
+++ b/app/containers/Chat/index.tsx
@@ -119,7 +119,7 @@ export function SessionItem(props: {
             align={props.isMobileScreen ? "end" : "start"}
           >
             <div
-              className={` pointer-events-none opacity-0 group-hover/chat-menu-list:pointer-events-auto group-hover/chat-menu-list:opacity-100`}
+              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`}
             >
               <DeleteIcon />
             </div>
diff --git a/app/containers/Settings/SettingPanel.tsx b/app/containers/Settings/SettingPanel.tsx
index 7d9f23503..74c30e2de 100644
--- a/app/containers/Settings/SettingPanel.tsx
+++ b/app/containers/Settings/SettingPanel.tsx
@@ -54,7 +54,7 @@ export default function Settings(props: MenuWrapperInspectProps) {
       className={`
         flex flex-col overflow-hidden bg-settings-panel 
         h-setting-panel-mobile
-        md:h-[calc(100%-1.25rem)] md:my-2.5 md:ml-1 md:mr-2.5 md:rounded-md
+        md:h-[calc(100%-1.25rem)] md:my-2.5 md:mr-2.5 md:rounded-md
       `}
     >
       <SettingHeader
diff --git a/app/containers/Settings/index.tsx b/app/containers/Settings/index.tsx
index 78a431d73..5b449552e 100644
--- a/app/containers/Settings/index.tsx
+++ b/app/containers/Settings/index.tsx
@@ -26,7 +26,7 @@ export default MenuLayout(function SettingList(props) {
   return (
     <div
       className={`
-      max-md:h-[100%] max-md:mx-[-1.5rem] max-md:py-6 max-md:bg-settings-menu-mobile
+      max-md:h-[100%] max-md:mx-[-1rem] max-md:py-6 max-md:px-4 max-md:bg-settings-menu-mobile
       md:pt-7
     `}
     >
diff --git a/app/hooks/useSwitchTheme.ts b/app/hooks/useSwitchTheme.ts
index 71d9508fd..4fb094946 100644
--- a/app/hooks/useSwitchTheme.ts
+++ b/app/hooks/useSwitchTheme.ts
@@ -1,14 +1,20 @@
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 import { Theme, useAppConfig } from "@/app/store/config";
 
+const DARK_CLASS = "dark-new";
+const LIGHT_CLASS = "light-new";
+
 export function useSwitchTheme() {
   const config = useAppConfig();
 
-  useEffect(() => {
-    document.body.classList.remove("dark");
+  useLayoutEffect(() => {
+    document.body.classList.remove(DARK_CLASS);
+    document.body.classList.remove(LIGHT_CLASS);
 
     if (config.theme === Theme.Dark) {
-      document.body.classList.add("dark");
+      document.body.classList.add(DARK_CLASS);
+    } else {
+      document.body.classList.add(LIGHT_CLASS);
     }
   }, [config.theme]);
 }
diff --git a/app/icons/comandIcon.svg b/app/icons/comandIcon.svg
new file mode 100644
index 000000000..861c63e5e
--- /dev/null
+++ b/app/icons/comandIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.75C3.21079 1.75 1.75 3.21079 1.75 5C1.75 6.78921 3.21079 8.25 5 8.25H6.75V11.75H5C3.21079 11.75 1.75 13.2108 1.75 15C1.75 16.7892 3.21079 18.25 5 18.25C6.78921 18.25 8.25 16.7892 8.25 15V13.25H11.75V15C11.75 16.7892 13.2108 18.25 15 18.25C16.7892 18.25 18.25 16.7892 18.25 15C18.25 13.2108 16.7892 11.75 15 11.75H13.25V8.25H15C16.7892 8.25 18.25 6.78921 18.25 5C18.25 3.21079 16.7892 1.75 15 1.75C13.2108 1.75 11.75 3.21079 11.75 5V6.75H8.25V5C8.25 3.21079 6.78921 1.75 5 1.75ZM3.25 5C3.25 4.03921 4.03921 3.25 5 3.25C5.96079 3.25 6.75 4.03921 6.75 5V6.75H5C4.03921 6.75 3.25 5.96079 3.25 5ZM8.25 8.25V11.75H11.75V8.25H8.25ZM5 13.25C4.03921 13.25 3.25 14.0392 3.25 15C3.25 15.9608 4.03921 16.75 5 16.75C5.96079 16.75 6.75 15.9608 6.75 15V13.25H5ZM15 3.25C14.0392 3.25 13.25 4.03921 13.25 5V6.75H15C15.9608 6.75 16.75 5.96079 16.75 5C16.75 4.03921 15.9608 3.25 15 3.25ZM13.25 15V13.25H15C15.9608 13.25 16.75 14.0392 16.75 15C16.75 15.9608 15.9608 16.75 15 16.75C14.0392 16.75 13.25 15.9608 13.25 15Z" fill="#606078"/>
+</svg>
\ No newline at end of file
diff --git a/app/icons/configIcon.svg b/app/icons/configIcon.svg
new file mode 100644
index 000000000..bc5aa33f7
--- /dev/null
+++ b/app/icons/configIcon.svg
@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5834 5.4165C12.5834 5.00229 12.9192 4.6665 13.3334 4.6665H18.3334C18.7476 4.6665 19.0834 5.00229 19.0834 5.4165C19.0834 5.83072 18.7476 6.1665 18.3334 6.1665H13.3334C12.9192 6.1665 12.5834 5.83072 12.5834 5.4165Z" fill="#606078"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.916687 5.4165C0.916687 5.00229 1.25247 4.6665 1.66669 4.6665H5.00002C5.41423 4.6665 5.75002 5.00229 5.75002 5.4165C5.75002 5.83072 5.41423 6.1665 5.00002 6.1665H1.66669C1.25247 6.1665 0.916687 5.83072 0.916687 5.4165Z" fill="#606078"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.33335 3.25C7.13674 3.25 6.16669 4.22005 6.16669 5.41667C6.16669 6.61328 7.13674 7.58333 8.33335 7.58333C9.52997 7.58333 10.5 6.61328 10.5 5.41667C10.5 4.22005 9.52997 3.25 8.33335 3.25ZM4.66669 5.41667C4.66669 3.39162 6.30831 1.75 8.33335 1.75C10.3584 1.75 12 3.39162 12 5.41667C12 7.44171 10.3584 9.08333 8.33335 9.08333C6.30831 9.08333 4.66669 7.44171 4.66669 5.41667Z" fill="#606078"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.25 14.5835C14.25 14.1693 14.5858 13.8335 15 13.8335H18.3333C18.7475 13.8335 19.0833 14.1693 19.0833 14.5835C19.0833 14.9977 18.7475 15.3335 18.3333 15.3335H15C14.5858 15.3335 14.25 14.9977 14.25 14.5835Z" fill="#606078"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.916687 14.5835C0.916687 14.1693 1.25247 13.8335 1.66669 13.8335H6.66669C7.0809 13.8335 7.41669 14.1693 7.41669 14.5835C7.41669 14.9977 7.0809 15.3335 6.66669 15.3335H1.66669C1.25247 15.3335 0.916687 14.9977 0.916687 14.5835Z" fill="#606078"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6667 12.4165C10.47 12.4165 9.5 13.3866 9.5 14.5832C9.5 15.7798 10.47 16.7498 11.6667 16.7498C12.8633 16.7498 13.8333 15.7798 13.8333 14.5832C13.8333 13.3866 12.8633 12.4165 11.6667 12.4165ZM8 14.5832C8 12.5581 9.64162 10.9165 11.6667 10.9165C13.6917 10.9165 15.3333 12.5581 15.3333 14.5832C15.3333 16.6082 13.6917 18.2498 11.6667 18.2498C9.64162 18.2498 8 16.6082 8 14.5832Z" fill="#606078"/>
+</svg>
diff --git a/app/icons/downArrowLgIcon.svg b/app/icons/downArrowLgIcon.svg
new file mode 100644
index 000000000..ce6272319
--- /dev/null
+++ b/app/icons/downArrowLgIcon.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7574 4.90913C13.5231 4.67482 13.1432 4.67482 12.9088 4.90913L8.04691 9.77106C8.02088 9.7971 7.97867 9.7971 7.95263 9.77106L3.0907 4.90913C2.85639 4.67482 2.47649 4.67482 2.24217 4.90913C2.00786 5.14345 2.00786 5.52335 2.24217 5.75766L7.1041 10.6196C7.59877 11.1143 8.40078 11.1143 8.89544 10.6196L13.7574 5.75766C13.9917 5.52335 13.9917 5.14345 13.7574 4.90913Z" fill="#606078"/>
+</svg>
+
+
diff --git a/app/icons/eraserIcon.svg b/app/icons/eraserIcon.svg
new file mode 100644
index 000000000..212bc07ac
--- /dev/null
+++ b/app/icons/eraserIcon.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.70147 1.52959C10.9629 0.258642 13.0303 0.26234 14.2965 1.52856L13.7662 2.05889L14.2965 1.52856L17.2192 4.45128C17.2196 4.45166 17.22 4.45203 17.2203 4.4524C18.4914 5.71383 18.4877 7.7813 17.2215 9.04755L10.2998 15.9692C10.2994 15.9696 10.299 15.97 10.2986 15.9703C9.03721 17.2414 6.9698 17.2377 5.70357 15.9714L2.77856 13.0464C1.51234 11.7802 1.50864 9.71286 2.77958 8.45142C2.78 8.45101 2.78042 8.45059 2.78084 8.45018L9.70023 1.53084C9.70064 1.53042 9.70105 1.53001 9.70147 1.52959ZM13.2358 2.58922C12.5525 1.90585 11.4374 1.90913 10.7654 2.58694L10.7632 2.58922L10.7632 2.58922L3.83921 9.51311L3.83694 9.51538C3.15913 10.1874 3.15585 11.3024 3.83922 11.9858L6.76422 14.9108L6.25218 15.4228L6.76423 14.9108C7.4476 15.5942 8.56261 15.5909 9.23462 14.9131L9.23689 14.9108L16.1608 7.98689C16.8442 7.30352 16.8409 6.18849 16.1631 5.51648L16.1608 5.51421L13.2358 2.58922L13.7624 2.06268L13.2358 2.58922Z" fill="#606078"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.375 17.625C4.375 17.2108 4.65482 16.875 5 16.875H16.6667C17.0118 16.875 17.2917 17.2108 17.2917 17.625C17.2917 18.0392 17.0118 18.375 16.6667 18.375H5C4.65482 18.375 4.375 18.0392 4.375 17.625Z" fill="#606078"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.88671 6.55281C5.1798 6.26011 5.65468 6.26043 5.94737 6.55352L12.089 12.7034C12.3817 12.9965 12.3814 13.4714 12.0883 13.7641C11.7952 14.0568 11.3204 14.0565 11.0277 13.7634L4.886 7.61347C4.5933 7.32038 4.59362 6.84551 4.88671 6.55281Z" fill="#606078"/>
+</svg>
diff --git a/app/icons/maskIcon.svg b/app/icons/maskIcon.svg
new file mode 100644
index 000000000..2e2aed516
--- /dev/null
+++ b/app/icons/maskIcon.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_446_14961)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99984 2.4165C5.81168 2.4165 2.4165 5.81168 2.4165 9.99984C2.4165 14.188 5.81168 17.5832 9.99984 17.5832C14.188 17.5832 17.5832 14.188 17.5832 9.99984C17.5832 5.81168 14.188 2.4165 9.99984 2.4165ZM0.916504 9.99984C0.916504 4.98325 4.98325 0.916504 9.99984 0.916504C15.0164 0.916504 19.0832 4.98325 19.0832 9.99984C19.0832 15.0164 15.0164 19.0832 9.99984 19.0832C4.98325 19.0832 0.916504 15.0164 0.916504 9.99984ZM6.6665 8.24984C6.62048 8.24984 6.58317 8.28715 6.58317 8.33317C6.58317 8.37919 6.62048 8.4165 6.6665 8.4165C6.71253 8.4165 6.74984 8.37919 6.74984 8.33317C6.74984 8.28715 6.71253 8.24984 6.6665 8.24984ZM5.08317 8.33317C5.08317 7.45872 5.79205 6.74984 6.6665 6.74984C7.54096 6.74984 8.24984 7.45872 8.24984 8.33317C8.24984 9.20762 7.54096 9.9165 6.6665 9.9165C5.79205 9.9165 5.08317 9.20762 5.08317 8.33317ZM13.3332 8.24984C13.2871 8.24984 13.2498 8.28715 13.2498 8.33317C13.2498 8.37919 13.2871 8.4165 13.3332 8.4165C13.3792 8.4165 13.4165 8.37919 13.4165 8.33317C13.4165 8.28715 13.3792 8.24984 13.3332 8.24984ZM11.7498 8.33317C11.7498 7.45872 12.4587 6.74984 13.3332 6.74984C14.2076 6.74984 14.9165 7.45872 14.9165 8.33317C14.9165 9.20762 14.2076 9.9165 13.3332 9.9165C12.4587 9.9165 11.7498 9.20762 11.7498 8.33317ZM7.49984 12.4998L7.00156 13.0604C6.69198 12.7852 6.66409 12.3112 6.93928 12.0016C7.21313 11.6935 7.6839 11.6644 7.99357 11.9353M7.49984 12.4998C7.00156 13.0604 7.00133 13.0602 7.00156 13.0604L7.00356 13.0622L7.00592 13.0642L7.01172 13.0693L7.02765 13.0829C7.04018 13.0934 7.05655 13.1069 7.07669 13.1229C7.11693 13.1549 7.17238 13.197 7.24244 13.2457C7.38231 13.343 7.58202 13.4679 7.83669 13.5914C8.34609 13.8383 9.08284 14.0832 9.99984 14.0832C10.9168 14.0832 11.6536 13.8383 12.163 13.5914C12.4177 13.4679 12.6174 13.343 12.7572 13.2457C12.8273 13.197 12.8827 13.1549 12.923 13.1229C12.9431 13.1069 12.9595 13.0934 12.972 13.0829L12.988 13.0693L12.9938 13.0642L12.9961 13.0622L12.9972 13.0612C12.9974 13.061 12.9981 13.0604 12.4998 12.4998L12.9981 13.0604C13.3077 12.7852 13.3356 12.3112 13.0604 12.0016C12.7853 11.6921 12.3116 11.6641 12.002 11.9389L12.0032 11.9378L12.0045 11.9366L12.0062 11.9352C12.0069 11.9346 12.0072 11.9343 12.0062 11.9352C12.0043 11.9368 11.9986 11.9416 11.99 11.9484C11.9729 11.962 11.9429 11.985 11.9006 12.0144C11.8159 12.0733 11.6836 12.1568 11.5086 12.2416C11.1586 12.4113 10.6453 12.5832 9.99984 12.5832C9.35433 12.5832 8.84108 12.4113 8.4911 12.2416C8.31609 12.1568 8.18377 12.0733 8.09903 12.0144C8.05679 11.985 8.02679 11.962 8.00966 11.9484C8.00111 11.9416 7.99553 11.9369 7.99357 11.9353L7.99513 11.9366L7.99646 11.9378M7.99357 11.9353C7.99316 11.9349 7.99341 11.9351 7.99357 11.9353V11.9353Z" fill="#606078"/>
+</g>
+<defs>
+<clipPath id="clip0_446_14961">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
diff --git a/app/icons/uploadImgIcon.svg b/app/icons/uploadImgIcon.svg
new file mode 100644
index 000000000..e8fe6ccf2
--- /dev/null
+++ b/app/icons/uploadImgIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.49046 2.49034C3.63743 1.34337 5.34265 0.916504 7.49996 0.916504H12.5C14.6573 0.916504 16.3625 1.34337 17.5095 2.49034C18.6564 3.63731 19.0833 5.34253 19.0833 7.49984V11.5771C19.0833 11.5813 19.0833 11.5856 19.0833 11.5898V12.4998C19.0833 14.6571 18.6564 16.3624 17.5095 17.5093C16.3625 18.6563 14.6573 19.0832 12.5 19.0832H7.49996C5.34265 19.0832 3.63743 18.6563 2.49046 17.5093C1.34349 16.3624 0.916626 14.6571 0.916626 12.4998V7.49984C0.916626 5.34253 1.34349 3.63731 2.49046 2.49034ZM17.5833 9.95026V7.49984C17.5833 5.49048 17.1768 4.27903 16.4488 3.551C15.7208 2.82297 14.5093 2.4165 12.5 2.4165H7.49996C5.4906 2.4165 4.27915 2.82297 3.55112 3.551C2.82309 4.27903 2.41663 5.49048 2.41663 7.49984V12.4998C2.41663 13.3382 2.48738 14.0376 2.62272 14.621L5.91524 12.4104C6.84666 11.7856 8.16843 11.8475 9.02206 12.5809L9.02842 12.5864L9.29971 12.8248C9.66903 13.1394 10.3016 13.1386 10.6696 12.8225L14.1363 9.84751C15.0674 9.04797 16.5327 9.04782 17.4637 9.84751L17.5833 9.95026ZM3.2085 16.0345L6.75137 13.6558C7.13557 13.3982 7.71178 13.4352 8.04187 13.7164L8.31319 13.9548L8.31961 13.9604C9.25059 14.7601 10.7159 14.7599 11.647 13.9604L15.1137 10.9854C15.4826 10.6685 16.1173 10.6685 16.4863 10.9854L17.5833 11.9276V12.4998C17.5833 14.5092 17.1768 15.7206 16.4488 16.4487C15.7208 17.1767 14.5093 17.5832 12.5 17.5832H7.49996C5.4906 17.5832 4.27915 17.1767 3.55112 16.4487C3.4275 16.3251 3.31316 16.1875 3.2085 16.0345ZM7.49996 5.74984C6.9937 5.74984 6.58329 6.16024 6.58329 6.6665C6.58329 7.17277 6.9937 7.58317 7.49996 7.58317C8.00622 7.58317 8.41663 7.17277 8.41663 6.6665C8.41663 6.16024 8.00622 5.74984 7.49996 5.74984ZM5.08329 6.6665C5.08329 5.33182 6.16527 4.24984 7.49996 4.24984C8.83465 4.24984 9.91663 5.33182 9.91663 6.6665C9.91663 8.00119 8.83465 9.08317 7.49996 9.08317C6.16527 9.08317 5.08329 8.00119 5.08329 6.6665Z" fill="#606078"/>
+</svg>
\ No newline at end of file
diff --git a/app/styles/globals.css b/app/styles/globals.css
index dd94c4442..a243cde0d 100644
--- a/app/styles/globals.css
+++ b/app/styles/globals.css
@@ -30,101 +30,220 @@ body {
   outline: none;
 }
 
-:root {
+.light-new {
   --global-bg: #e3e3ed;
-  --actived-widget-bg: #2e42f3;
+  --actions-bar-btn-default-bg: #2e42f3;
+  --primary-btn: #2e42f3;
   --primary-btn-disabled-bg: rgba(60, 68, 255, 0.2);
   --danger-btn-bg: #fff6f6;
-  --default-widget-bg: #f7f7f8;
-  --default-container-bg: #f7f7f8;
-  --similar-panel-bg: #fff;
-  --similar-highlight-hood-bg: #fff;
-  --similar-widget-btn-bg: #fff;
-  --chat-panel-message-bot-bg: #fff;
-  --chat-panel-message-user-bg: #4a5cff;
-  --similar-line-bg: #f0f0f3;
-  --chat-panel-message-mobile-bg: #f0f0f3;
-  --chat-menu-session-unselected-bg: #f0f0f3;
-  --similar-btn-hovered-bg: rgba(0, 0, 0, 0.05);
+  --default-btn-bg: #f7f7f8;
+  --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;
+  --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;
-  --menu-item-selected-bg: #dee1fd;
-  --small-widget-border: rgba(0, 0, 0, 0.1);
+  --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;
+  --confirm-mask-bg: rgba(0, 0, 0, 0.7);
+  --confirm-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.1);
+
+  --select-popover-border: rgba(0, 0, 0, 0.1);
   --slider-block-border: #c9c9d1;
+  --thumbnail-border: rgba(0, 0, 0, 0.1);
   --chat-actions-popover-mobile-border: #f0f0f3;
-  --panel-header-border: #e2e2e6;
+  --chat-header-bottom-border: #e2e2e6;
+  --chat-input-top-border: #e2e2e6;
   --chat-input-hood-border: #fff;
   --chat-input-hood-focus-border: #606078;
-  --menu-item-selected-border: #c9cefc;
-  --sidebar-tab-mobile-active-text: #2e42f3;
-  --bg-contract-text: #fff;
-  --danger-btn-text: #ff5454;
-  --btn-default-text: #606078;
-  --weakness-text: #a5a5b3;
-  --key-text: #18182a;
-  --description-text: #88889a;
-  --message-clear-revert-text: #3c44ff;
-  --menu-item-time: rgba(0, 0, 0, 0.3);
-  --siderbar-mobile-height: 3.125rem;
-  --max-message-width: calc(var(--chat-panel-max-width) * 0.6);
-  --confirm-mask-bg: rgba(0, 0, 0, 0.7);
-  --confirm-mask-text: #18182a;
-  --delete-chat-ok-btn-bg: #ff5454;
-  --delete-chat-ok-btn-text: #fff;
-  --delete-chat-cancel-btn-bg: #fff;
-  --delete-chat-cancel-btn-text: #18182a;
+  --chat-menu-session-selected-border: #c9cefc;
+  --settings-menu-item-selected-border: #c9cefc;
+  --settings-header-border: #e2e2e6;
+  --delete-chat-popover-border: rgba(0, 0, 0, 0.1);
   --delete-chat-cancel-btn-border: #e2e2e6;
-  --sidebar-btn-hovered-bg: rgba(0, 0, 0, 0.05);
   --chat-menu-session-unselected-border: #f0f0f3;
   --chat-menu-session-hovered-border: #e2e2e6;
-  --hovered-btn-bg: rgba(0, 0, 0, 0.05);
-}
 
-.dark {
-  --global-bg: #303030;
-  --actived-widget-bg: #384cfc;
-  --primary-btn-disabled-bg: rgba(60, 68, 255, 0.2);
-  --danger-btn-bg: #20131a;
-  --default-widget-bg: #1d1d1d;
-  --default-container-bg: #1d1d1d;
-  --similar-panel-bg: #111;
-
-  --similar-highlight-hood-bg: #fff;
-
-  --similar-widget-btn-bg: #fff;
-  --chat-panel-message-bot-bg: #fff;
-  --chat-panel-message-user-bg: #4a5cff;
-  --similar-line-bg: #f0f0f3;
-  --chat-panel-message-mobile-bg: #f0f0f3;
-  --chat-menu-session-unselected-bg: #f0f0f3;
-  --similar-btn-hovered-bg: rgba(0, 0, 0, 0.05);
-  --slider-slided-travel-bg: #88889a;
-  --switch-unchecked-bg: #c9c9d1;
-  --chat-actions-btn-popover-bg: #434360;
-  --chat-panel-message-clear-divider-bg: #e2e2e6;
-  --chat-menu-session-hovered-bg: #e2e2e6;
-  --menu-item-selected-bg: #dee1fd;
-  --small-widget-border: rgba(0, 0, 0, 0.1);
-  --slider-block-border: #c9c9d1;
-  --chat-actions-popover-mobile-border: #f0f0f3;
-  --panel-header-border: #e2e2e6;
-  --chat-input-hood-border: #fff;
-  --chat-input-hood-focus-border: #606078;
-  --menu-item-selected-border: #c9cefc;
   --sidebar-tab-mobile-active-text: #2e42f3;
-  --bg-contract-text: #fff;
+  --sidebar-tab-mobile-inactive-text: #a5a5b3;
+  --btn-primary-text: #fff;
   --danger-btn-text: #ff5454;
   --btn-default-text: #606078;
-  --weakness-text: #a5a5b3;
-  --key-text: #18182a;
-  --description-text: #88889a;
-  --message-clear-revert-text: #3c44ff;
-  --menu-item-time: rgba(0, 0, 0, 0.3);
+  --input-text: #18182a;
+  --list-subtitle-text: #a5a5b3;
+  --slider-block-text: #606078;
+  --chat-actions-btn-popover-text: #fff;
+  --chat-header-title-text: #18182a;
+  --chat-header-subtitle-text: #88889a;
+  --chat-input-placeholder-text: #88889a;
+  --chat-message-date-text: #88889a;
+  --chat-message-markdown-user-text: #fff;
+  --chat-message-markdown-bot-text: #18182a;
+  --chat-panel-message-clear-text: #a5a5b3;
+  --chat-panel-message-clear-revert-text: #3c44ff;
+  --chat-menu-item-title-text: #18182a;
+  --chat-menu-item-time-text: rgba(0, 0, 0, 0.3);
+  --chat-menu-item-description-text: #88889a;
+  --settings-menu-title-text: #18182a;
+  --settings-menu-item-title-text: #18182a;
+  --settings-panel-header-title-text: #18182a;
+  --confirm-mask-text: #18182a;
+  --delete-chat-ok-btn-text: #fff;
+  --delete-chat-cancel-btn-text: #18182a;
 
-  --select-popover-panel-bg: #1d1d1d;
+  --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);
+  --chat-input-hood-focus-shadow: 0px 4px 20px 0px rgba(60, 68, 255, 0.13);
+  --select-popover-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12);
+  --message-actions-bar-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
+  --prompt-hint-container-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  --delete-chat-popover-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
+    0px 8px 20px 0px rgba(0, 0, 0, 0.08);
+  --sidebar-btn-shadow: 4px 8px 16px 0px rgba(60, 68, 255, 0.2);
+
+  --siderbar-mobile-height: 3.125rem;
+  --max-message-width: calc(var(--chat-panel-max-width) * 0.6);
+}
+
+.dark-new {
+  --global-bg: #303030;
+  --actions-bar-btn-default-bg: #384cfc;
+  --primary-btn: #384cfc;
+  --primary-btn-disabled-bg: rgba(60, 68, 255, 0.2);
+  --danger-btn-bg: #fff6f6;
+  --default-btn-bg: #f7f7f8;
+  --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;
+  --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;
+  --confirm-mask-bg: rgba(0, 0, 0, 0.7);
+  --confirm-panel-bg: #fff;
+  --delete-chat-ok-btn-bg: #ff5454;
+  --delete-chat-cancel-btn-bg: #fff;
+  --chat-message-actions-bg: #fff;
+
+  --select-popover-border: rgba(0, 0, 0, 0.1);
+  --slider-block-border: #c9c9d1;
+  --thumbnail-border: rgba(0, 0, 0, 0.1);
+  --chat-actions-popover-mobile-border: #f0f0f3;
+  --chat-header-bottom-border: #e2e2e6;
+  --chat-input-top-border: #e2e2e6;
+  --chat-input-hood-border: #fff;
+  --chat-input-hood-focus-border: #606078;
+  --chat-menu-session-selected-border: #c9cefc;
+  --settings-menu-item-selected-border: #c9cefc;
+  --settings-header-border: #e2e2e6;
+  --delete-chat-popover-border: rgba(0, 0, 0, 0.1);
+  --delete-chat-cancel-btn-border: #e2e2e6;
+  --chat-menu-session-unselected-border: #f0f0f3;
+  --chat-menu-session-hovered-border: #e2e2e6;
+
+  --sidebar-tab-mobile-active-text: #2e42f3;
+  --sidebar-tab-mobile-inactive-text: #a5a5b3;
+  --btn-primary-text: #fff;
+  --danger-btn-text: #ff5454;
+  --btn-default-text: #606078;
+  --input-text: #18182a;
+  --list-subtitle-text: #a5a5b3;
+  --slider-block-text: #606078;
+  --chat-actions-btn-popover-text: #fff;
+  --chat-header-title-text: #18182a;
+  --chat-header-subtitle-text: #88889a;
+  --chat-input-placeholder-text: #88889a;
+  --chat-message-date-text: #88889a;
+  --chat-message-markdown-user-text: #fff;
+  --chat-message-markdown-bot-text: #18182a;
+  --chat-panel-message-clear-text: #a5a5b3;
+  --chat-panel-message-clear-revert-text: #3c44ff;
+  --chat-menu-item-title-text: #18182a;
+  --chat-menu-item-time-text: rgba(0, 0, 0, 0.3);
+  --chat-menu-item-description-text: #88889a;
+  --settings-menu-title-text: #18182a;
+  --settings-menu-item-title-text: #18182a;
+  --settings-panel-header-title-text: #18182a;
+  --confirm-mask-text: #18182a;
+  --delete-chat-ok-btn-text: #fff;
+  --delete-chat-cancel-btn-text: #18182a;
+  --primary-btn-disabled-dark-text: #fafafa;
+
+  --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);
+  --chat-input-hood-focus-shadow: 0px 4px 20px 0px rgba(60, 68, 255, 0.13);
+  --select-popover-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12);
+  --message-actions-bar-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
+  --prompt-hint-container-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  --delete-chat-popover-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
+    0px 8px 20px 0px rgba(0, 0, 0, 0.08);
+  --sidebar-btn-shadow: 4px 8px 16px 0px rgba(60, 68, 255, 0.2);
 }
 
 input {
diff --git a/tailwind.config.js b/tailwind.config.js
index 2b74d4832..ae9bd98d7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -85,55 +85,56 @@ module.exports = {
       },
       backgroundColor: {
         'global': 'var(--global-bg)',
-        'actions-bar-btn-default': 'var(--actived-widget-bg)',
-        'primary-btn': 'var(--actived-widget-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)',
         'danger-btn': 'var(--danger-btn-bg)',
-        'default-btn': 'var(--default-widget-bg)',
+        'default-btn': 'var(--default-btn-bg)',
         'hovered-btn': 'var(--hovered-btn-bg)',
-        'card': 'var(--similar-panel-bg)',
-        'input': 'var(--default-widget-bg)',
-        'list-item-divider': 'var(--similar-line-bg)',
-        'menu': 'var(--default-container-bg)',
-        'select-option-hovered': 'var(--similar-btn-hovered-bg)',
-        'select-popover-panel': 'var(--similar-panel-bg)',
-        'select-popover-panel-dark': 'var(--select-popover-panel-bg)',
-        'select': 'var(--default-widget-bg)',
-        'slider': 'var(--similar-line-bg)',
+        'card': 'var(--card-bg)',
+        'input': 'var(--input-bg)',
+        'list-item-divider': 'var(--list-item-divider-bg)',
+        'menu': 'var(--menu-bg)',
+        'select-option-hovered': 'var(--select-option-hovered-bg)',
+        'select-popover-panel': 'var(--select-popover-panel-bg)',
+        'select': 'var(--select-bg)',
+        'slider': 'var(--slider-bg)',
         'slider-slided-travel': 'var(--slider-slided-travel-bg)',
-        'slider-block': 'var(--similar-widget-btn-bg)',
+        'slider-block': 'var(--slider-block-bg)',
         'switch-unchecked': 'var(--switch-unchecked-bg)',
-        'switch-checked': 'var(--actived-widget-bg)',
-        'switch-btn': 'var(--similar-widget-btn-bg)',
-        'chat-actions-popover-panel-mobile': 'var(--similar-panel-bg)',
+        'switch-checked': 'var(--switch-checked-bg)',
+        'switch-btn': 'var(--switch-btn-bg)',
+        'chat-actions-popover-panel-mobile': 'var(--chat-actions-popover-panel-mobile-bg)',
         'chat-actions-btn-popover': 'var(--chat-actions-btn-popover-bg)',
-        'chat-actions-btn-hovered': 'var(--similar-btn-hovered-bg)',
-        'chat-panel-header-mask': 'var(--default-container-bg)',
-        'chat-panel-header-mobile': 'var(--similar-highlight-hood-bg)',
-        'chat-panel-input-hood': 'var(--similar-highlight-hood-bg)',
+        'chat-actions-btn-hovered': 'var(--chat-actions-btn-hovered-bg)',
+        'chat-panel-header-mask': 'var(--chat-panel-header-mask-bg)',
+        'chat-panel-header-mobile': 'var(--chat-panel-header-mobile-bg)',
+        'chat-panel-input-hood': 'var(--chat-panel-input-hood-bg)',
         'chat-panel-message-user': 'var(--chat-panel-message-user-bg)',
         'chat-panel-message-bot': 'var(--chat-panel-message-bot-bg)',
-        'chat-panel-message': 'var(--default-container-bg)',
+        'chat-panel-message': 'var(--chat-panel-message-bg)',
         'chat-panel-message-mobile': 'var(--chat-panel-message-mobile-bg)',
-        'chat-message-actions': 'var(--similar-panel-bg)',
-        'chat-message-actions-btn-hovered': 'var(--similar-btn-hovered-bg)',
-        'chat-panel': 'var(--default-container-bg)',
+        'chat-message-actions': 'var(--chat-message-actions-bg)',
+        'chat-message-actions-btn-hovered': 'var(--chat-message-actions-btn-hovered-bg)',
+        'chat-panel': 'var(--chat-panel-bg)',
         'chat-panel-message-clear-divider': 'var(--chat-panel-message-clear-divider-bg)',
-        'chat-menu-session-selected': 'var(--menu-item-selected-bg)',
+        'chat-menu-session-selected': 'var(--chat-menu-session-selected-bg)',
         'chat-menu-session-unselected': 'var(--chat-menu-session-unselected-bg)',
         'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-bg)',
-        'settings-menu-mobile': 'var(--default-container-bg)',
-        'settings-menu-item-mobile': 'var(--similar-highlight-hood-bg)',
-        'settings-menu-item-selected': 'var(--menu-item-selected-bg)',
-        'settings-header-mobile': 'var(--similar-highlight-hood-bg)',
-        'settings-panel': 'var(--default-container-bg)',
-        'sidebar-mobile': 'var(--similar-highlight-hood-bg)',
+        'settings-menu-mobile': 'var(--settings-menu-mobile-bg)',
+        'settings-menu-item-mobile': 'var(--settings-menu-item-mobile-bg)',
+        'settings-menu-item-selected': 'var(--settings-menu-item-selected-bg)',
+        'settings-header-mobile': 'var(--settings-header-mobile-bg)',
+        'settings-panel': 'var(--settings-panel-bg)',
+        'sidebar-mobile': 'var(--sidebar-mobile-bg)',
         'sidebar-btn-hovered': 'var(--sidebar-btn-hovered-bg)',
-        'delete-chat-popover-panel': 'var(--similar-panel-bg)',
+        'delete-chat-popover-panel': 'var(--delete-chat-popover-panel-bg)',
         'confirm-mask': 'var(--confirm-mask-bg)',
-        'confirm-panel': 'var(--similar-panel-bg)',
+        'confirm-panel': 'var(--confirm-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)',
+        'chat-actions-select-model': 'var(--chat-actions-select-model-bg)',
       },
       backgroundImage: {
         // 'chat-panel-message-user': 'linear-gradient(259deg, #9786FF 8.42%, #4A5CFF 90.13%)',
@@ -149,57 +150,59 @@ module.exports = {
         'setting-list': '710px',
       },
       boxShadow: {
-        'btn': '0px 4px 10px 0px rgba(60, 68, 255, 0.14)',
-        'chat-actions-popover-mobile': '0px 14px 40px 0px rgba(0, 0, 0, 0.12)',
-        'chat-input-hood-focus-shadow': '0px 4px 20px 0px rgba(60, 68, 255, 0.13)',
-        'select-popover-shadow': '0px 14px 40px 0px rgba(0, 0, 0, 0.12)',
-        'message-actions-bar': '0px 4px 30px 0px var(--small-widget-border)',
-        'prompt-hint-container': 'inset 0 4px 8px 0 rgba(0, 0, 0, 0.1)',
-        'delete-chat-popover-shadow': '0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px 8px 20px 0px rgba(0, 0, 0, 0.08)',
-        'sidebar-btn-shadow': '4px 8px 16px 0px rgba(60, 68, 255, 0.20);',
+        'btn': 'var(--btn-shadow)',
+        'chat-actions-popover-mobile': 'var(--chat-actions-popover-mobile-shadow)',
+        'chat-input-hood-focus-shadow': 'var(--chat-input-hood-focus-shadow)',
+        'select-popover-shadow': 'var(--select-popover-shadow)',
+        'message-actions-bar': 'var(--message-actions-bar-shadow)',
+        'prompt-hint-container': 'var(--prompt-hint-container-shadow)',
+        'delete-chat-popover-shadow': 'var(--delete-chat-popover-shadow)',
+        'sidebar-btn-shadow': 'var(--sidebar-btn-shadow)',
       },
       colors: {
-        'select-popover': 'var(--small-widget-border)',
+        'select-popover': 'var(--select-popover-border)',
         'slider-block': 'var(--slider-block-border)',
-        'thumbnail': 'var(--small-widget-border)',
+        'thumbnail': 'var(--thumbnail-border)',
         'chat-actions-popover-mobile': 'var(--chat-actions-popover-mobile-border)',
-        'chat-header-bottom': 'var(--panel-header-border)',
-        'chat-input-top': 'var(--panel-header-border)',
+        'chat-header-bottom': 'var(--chat-header-bottom-border)',
+        '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(--menu-item-selected-border)',
-        'settings-menu-item-selected': 'var(--menu-item-selected-border)',
-        'settings-header': 'var(--panel-header-border)',
-        'delete-chat-popover': 'var(--small-widget-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-unselected': 'var(--chat-menu-session-unselected-border)',
         'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-border)',
+
         'text-sidebar-tab-mobile-active': 'var(--sidebar-tab-mobile-active-text)',
-        'text-sidebar-tab-mobile-inactive': 'var(--weakness-text)',
-        'text-btn-primary': 'var(--bg-contract-text)',
-        'text-btn-danger': 'var(--danger-btn-text)',
+        'text-sidebar-tab-mobile-inactive': 'var(--sidebar-tab-mobile-inactive-text)',
+        'text-btn-primary': 'var(--btn-primary-text)',
+        'text-btn-danger': 'var(--btn-danger-text)',
         'text-btn-default': 'var(--btn-default-text)',
-        'text-input': 'var(--key-text)',
-        'text-list-subtitle': 'var(--weakness-text)',
-        'text-slider-block': 'var(--btn-default-text)',
-        'text-chat-actions-btn-popover': 'var(--bg-contract-text)',
-        'text-chat-header-title': 'var(--key-text)',
-        'text-chat-header-subtitle': 'var(--description-text)',
-        'text-chat-input-placeholder': 'var(--description-text)',
-        'text-chat-message-date': 'var(--description-text)',
-        'text-chat-message-markdown-user': 'var(--bg-contract-text)',
-        'text-chat-message-markdown-bot': 'var(--key-text)',
-        'text-chat-panel-message-clear': 'var(--weakness-text)',
-        'text-chat-panel-message-clear-revert': 'var(--message-clear-revert-text)',
-        'text-chat-menu-item-title': 'var(--key-text)',
-        'text-chat-menu-item-time': 'var(--menu-item-time)',
-        'text-chat-menu-item-description': 'var(--description-text)',
-        'text-settings-menu-title': 'var(--key-text)',
-        'text-settings-menu-item-title': 'var(--key-text)',
-        'text-settings-panel-header-title': 'var(--key-text)',
+        'text-input': 'var(--input-text)',
+        'text-list-subtitle': 'var(--list-subtitle-text)',
+        'text-slider-block': 'var(--slider-block-text)',
+        'text-chat-actions-btn-popover': 'var(--chat-actions-btn-popover-text)',
+        'text-chat-header-title': 'var(--chat-header-title-text)',
+        'text-chat-header-subtitle': 'var(--chat-header-subtitle-text)',
+        'text-chat-input-placeholder': 'var(--chat-input-placeholder-text)',
+        'text-chat-message-date': 'var(--chat-message-date-text)',
+        'text-chat-message-markdown-user': 'var(--chat-message-markdown-user-text)',
+        'text-chat-message-markdown-bot': 'var(--chat-message-markdown-bot-text)',
+        'text-chat-panel-message-clear': 'var(--chat-panel-message-clear-text)',
+        '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-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)',
+        'text-settings-panel-header-title': 'var(--settings-panel-header-title-text)',
         'text-confirm-mask': 'var(--confirm-mask-text)',
         'text-delete-chat-ok-btn': 'var(--delete-chat-ok-btn-text)',
         'text-delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-text)',
+        'text-primary-btn-disabled-dark': 'var(--primary-btn-disabled-dark-text)',
       },
       keyframes: {
         mask: {
@@ -224,6 +227,7 @@ module.exports = {
       'chat-input': '0.5rem',
       'chat-img': '0.5rem',
       'slide': '0.625rem',
+      'chat-model-select': '1.25rem',
     },
     borderWidth: {
       DEFAULT: '1px',