diff --git a/app/components/Btn/index.tsx b/app/components/Btn/index.tsx
index 04310c460..c9ba305bf 100644
--- a/app/components/Btn/index.tsx
+++ b/app/components/Btn/index.tsx
@@ -55,6 +55,7 @@ export default function Btn(props: BtnProps) {
         py-2 px-3 flex items-center justify-center gap-1 rounded-action-btn transition-all duration-300 select-none
         ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
         ${btnClassName} 
+        follow-parent-svg
       `}
       onClick={onClick}
       title={title}
diff --git a/app/components/Card/index.tsx b/app/components/Card/index.tsx
index 782d62cc5..92b4734f0 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-semibold text-sm-mobile font-weight-setting-card-title
+            capitalize !font-semibold text-sm-mobile font-weight-setting-card-title text-text-card-title
             mb-3
 
             ml-3
diff --git a/app/components/List/index.tsx b/app/components/List/index.tsx
index ab65af195..decc94b75 100644
--- a/app/components/List/index.tsx
+++ b/app/components/List/index.tsx
@@ -81,7 +81,7 @@ export function ListItem(props: ListItemProps) {
       onClick={onClick}
     >
       <div className={`flex-1 flex flex-col justify-start gap-1`}>
-        <div className=" font-common text-sm-mobile font-weight-[500] line-clamp-1">
+        <div className=" font-common text-sm-mobile font-weight-[500] line-clamp-1 text-text-list-title">
           {title}
         </div>
         {subTitle && (
diff --git a/app/components/Modal/index.tsx b/app/components/Modal/index.tsx
index 74512df2f..9bca53736 100644
--- a/app/components/Modal/index.tsx
+++ b/app/components/Modal/index.tsx
@@ -147,7 +147,7 @@ const Modal = (props: ModalProps) => {
           </div>
           <div
             className={`flex flex-col flex-0      
-              bg-moda-panel text-modal-mask    
+              bg-moda-panel text-modal-panel    
               ${modelClassName}
               ${panelClassName}
             `}
@@ -156,7 +156,7 @@ const Modal = (props: ModalProps) => {
               <AlertDialog.Title
                 className={`
                       flex items-center justify-between gap-3 font-common
-                      md:text-chat-header-title md:font-bold md:leading-5
+                      md:text-chat-header-title md:font-bold md:leading-5 
                       ${
                         headerBordered
                           ? " border-b border-modal-header-bottom"
@@ -165,7 +165,7 @@ const Modal = (props: ModalProps) => {
                       ${titleClassName}
                   `}
               >
-                <div className="flex gap-3 justify-start flex-1 items-center">
+                <div className="flex gap-3 justify-start flex-1 items-center text-text-modal-title text-chat-header-title">
                   {title}
                 </div>
                 {closeble && (
@@ -180,7 +180,7 @@ const Modal = (props: ModalProps) => {
                 )}
               </AlertDialog.Title>
             )}
-            <div className="flex-1 overflow-hidden">
+            <div className="flex-1 overflow-hidden text-text-modal-content text-sm-title">
               {typeof content === "function"
                 ? content({
                     close: () => {
diff --git a/app/components/Select/index.tsx b/app/components/Select/index.tsx
index 50c60d1de..728d97b41 100644
--- a/app/components/Select/index.tsx
+++ b/app/components/Select/index.tsx
@@ -58,14 +58,16 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
       {options?.map((o) => (
         <div
           key={o.value}
-          className={`flex items-center px-3 py-2 gap-3 rounded-action-btn hover:bg-select-option-hovered cursor-pointer`}
+          className={`
+            flex items-center px-3 py-2 gap-3 rounded-action-btn hover:bg-select-option-hovered cursor-pointer
+          `}
           onClick={() => {
             onSelect?.(o.value);
           }}
         >
-          <div className="flex gap-2 flex-1">
-            {!!o.icon && <div className="">{o.icon}</div>}
-            <div className={`flex-1`}>{o.label}</div>
+          <div className="flex gap-2 flex-1 follow-parent-svg text-text-select-option">
+            {!!o.icon && <div className="flex items-center">{o.icon}</div>}
+            <div className={`flex-1 text-text-select-option`}>{o.label}</div>
           </div>
           <div
             className={
@@ -97,7 +99,9 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
         className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title  cursor-pointer hover:bg-select-hover transition duration-300 ease-in-out`}
         ref={contentRef}
       >
-        <div className={`flex items-center gap-2 flex-1`}>
+        <div
+          className={`flex items-center gap-2 flex-1 follow-parent-svg text-text-select`}
+        >
           {!!selectedOption?.icon && (
             <div className={``}>{selectedOption?.icon}</div>
           )}
diff --git a/app/components/SlideRange/index.tsx b/app/components/SlideRange/index.tsx
index 18df7ce89..bf62b36af 100644
--- a/app/components/SlideRange/index.tsx
+++ b/app/components/SlideRange/index.tsx
@@ -62,9 +62,7 @@ export default function SlideRange(props: SlideRangeProps) {
       className={`flex flex-col justify-center items-end gap-1 w-[100%] ${className} ${rangeClassName}`}
     >
       {!!description && (
-        <div className="text-text-slider-block text-common text-sm ">
-          {description}
-        </div>
+        <div className=" text-common text-sm ">{description}</div>
       )}
       <div
         className="flex my-1.5 relative w-[100%] h-1.5 bg-slider rounded-slide cursor-pointer"
@@ -74,7 +72,7 @@ export default function SlideRange(props: SlideRangeProps) {
           &nbsp;
         </div>
         <div
-          className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%]  h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block hover:bg-slider-block-hover"
+          className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%]  h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block hover:bg-slider-block-hover text-text-slider-block"
           // onPointerDown={onPointerDown}
         >
           {value}
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index da700c0fb..76f174527 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -101,6 +101,7 @@ interface ModalProps {
   defaultMax?: boolean;
   footer?: React.ReactNode;
   onClose?: () => void;
+  className?: string;
 }
 export function Modal(props: ModalProps) {
   useEffect(() => {
@@ -122,14 +123,14 @@ export function Modal(props: ModalProps) {
 
   return (
     <div
-      className={
-        styles["modal-container"] + ` ${isMax && styles["modal-container-max"]}`
-      }
+      className={`${styles["modal-container"]} ${
+        isMax && styles["modal-container-max"]
+      } ${props.className ?? ""}`}
     >
-      <div className={styles["modal-header"]}>
-        <div className={styles["modal-title"]}>{props.title}</div>
+      <div className={`${styles["modal-header"]} new-header follow-parent-svg`}>
+        <div className={`${styles["modal-title"]}`}>{props.title}</div>
 
-        <div className={styles["modal-header-actions"]}>
+        <div className={`${styles["modal-header-actions"]}`}>
           <div
             className={styles["modal-header-action"]}
             onClick={() => setMax(!isMax)}
@@ -147,11 +148,11 @@ export function Modal(props: ModalProps) {
 
       <div className={styles["modal-content"]}>{props.children}</div>
 
-      <div className={styles["modal-footer"]}>
+      <div className={`${styles["modal-footer"]} new-footer`}>
         {props.footer}
         <div className={styles["modal-actions"]}>
           {props.actions?.map((action, i) => (
-            <div key={i} className={styles["modal-action"]}>
+            <div key={i} className={`${styles["modal-action"]} new-btn`}>
               {action}
             </div>
           ))}
diff --git a/app/containers/Chat/components/ChatActions.tsx b/app/containers/Chat/components/ChatActions.tsx
index 63845af0f..a03a9cb6a 100644
--- a/app/containers/Chat/components/ChatActions.tsx
+++ b/app/containers/Chat/components/ChatActions.tsx
@@ -187,7 +187,7 @@ export function ChatActions(props: {
             return (
               <div
                 key={act.text}
-                className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
+                className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer follow-parent-svg default-icon-color`}
                 onClick={act.onClick}
               >
                 {act.icon}
@@ -206,7 +206,7 @@ export function ChatActions(props: {
         placement="rt"
         noArrow
         popoverClassName="border border-chat-actions-popover-mobile rounded-md shadow-chat-actions-popover-mobile w-actions-popover bg-chat-actions-popover-panel-mobile "
-        className=" cursor-pointer"
+        className=" cursor-pointer follow-parent-svg default-icon-color"
       >
         <AddCircleIcon />
       </Popover>
@@ -236,7 +236,11 @@ export function ChatActions(props: {
               className={`${act.className ?? ""}`}
             >
               <div
-                className={` cursor-pointer h-[32px] w-[32px] flex items-center justify-center transition duration-300 ease-in-out hover:bg-chat-actions-btn-hovered hover:rounded-action-btn`}
+                className={` 
+                  cursor-pointer h-[32px] w-[32px] flex items-center justify-center transition duration-300 ease-in-out 
+                  hover:bg-chat-actions-btn-hovered hover:rounded-action-btn
+                  follow-parent-svg default-icon-color
+                `}
                 onClick={act.onClick}
               >
                 {act.icon}
@@ -256,7 +260,11 @@ export function ChatActions(props: {
               placement={ind === arr.length - 1 ? "rt" : "t"}
             >
               <div
-                className=" cursor-pointer h-[32px] w-[32px] flex items-center transition duration-300 ease-in-out justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn"
+                className={`
+                  cursor-pointer h-[32px] w-[32px] flex items-center transition duration-300 ease-in-out justify-center 
+                  hover:bg-chat-actions-btn-hovered hover:rounded-action-btn
+                  follow-parent-svg default-icon-color
+                `}
                 onClick={act.onClick}
               >
                 {act.icon}
diff --git a/app/containers/Chat/components/ChatHeader.tsx b/app/containers/Chat/components/ChatHeader.tsx
index 21346e4ba..73d30dbaa 100644
--- a/app/containers/Chat/components/ChatHeader.tsx
+++ b/app/containers/Chat/components/ChatHeader.tsx
@@ -22,8 +22,6 @@ export default function ChatHeader(props: ChatHeaderProps) {
   const chatStore = useChatStore();
   const session = chatStore.currentSession();
 
-  const currentModel = chatStore.currentSession().mask.modelConfig.model;
-
   return (
     <div
       className={`
@@ -40,7 +38,10 @@ export default function ChatHeader(props: ChatHeaderProps) {
       </div>
 
       {isMobileScreen ? (
-        <div className=" cursor-pointer" onClick={() => navigate(Path.Home)}>
+        <div
+          className=" cursor-pointer follow-parent-svg default-icon-color"
+          onClick={() => navigate(Path.Home)}
+        >
           <GobackIcon />
         </div>
       ) : (
@@ -78,7 +79,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
       </div>
 
       <div
-        className=" cursor-pointer hover:bg-hovered-btn p-1.5 rounded-action-btn"
+        className=" cursor-pointer hover:bg-hovered-btn p-1.5 rounded-action-btn follow-parent-svg default-icon-color"
         onClick={() => {
           setShowExport(true);
         }}
diff --git a/app/containers/Chat/components/ChatInputPanel.tsx b/app/containers/Chat/components/ChatInputPanel.tsx
index 12a91b9e0..9deb2141e 100644
--- a/app/containers/Chat/components/ChatInputPanel.tsx
+++ b/app/containers/Chat/components/ChatInputPanel.tsx
@@ -277,7 +277,7 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
               id="chat-input"
               ref={inputRef}
               className={`
-                leading-[19px] flex-1 focus:outline-none focus:shadow-none focus:border-none resize-none
+                leading-[19px] flex-1 focus:outline-none focus:shadow-none focus:border-none resize-none bg-inherit text-text-input
                 max-md:h-chat-input-mobile
                 md:min-h-chat-input
               `}
diff --git a/app/containers/Chat/components/EditMessageModal.tsx b/app/containers/Chat/components/EditMessageModal.tsx
index f7dde5e60..c82699af3 100644
--- a/app/containers/Chat/components/EditMessageModal.tsx
+++ b/app/containers/Chat/components/EditMessageModal.tsx
@@ -42,6 +42,7 @@ export function EditMessageModal(props: { onClose: () => void }) {
             }}
           />,
         ]}
+        // className="!bg-modal-mask"
       >
         <List>
           <ListItem
diff --git a/app/containers/Chat/components/ModelSelect.tsx b/app/containers/Chat/components/ModelSelect.tsx
index 5d6530c60..c3d44fafe 100644
--- a/app/containers/Chat/components/ModelSelect.tsx
+++ b/app/containers/Chat/components/ModelSelect.tsx
@@ -80,7 +80,7 @@ const ModelSelect = () => {
           }}
           ref={currentModel === o.name ? selectedItemRef : undefined}
         >
-          <div className={`flex-1`}>{o.name}</div>
+          <div className={`flex-1 text-text-select`}>{o.name}</div>
           <div
             className={currentModel === o.name ? "opacity-100" : "opacity-0"}
           >
@@ -111,7 +111,10 @@ const ModelSelect = () => {
         noFooter
         modelClassName="h-model-bottom-drawer"
       >
-        <div className="flex items-center gap-1 cursor-pointer" ref={rootRef}>
+        <div
+          className="flex items-center gap-1 cursor-pointer text-text-modal-select"
+          ref={rootRef}
+        >
           {currentModel}
           <BottomArrowMobile />
         </div>
@@ -127,7 +130,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  w-[280px]"
+      popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover  bg-model-select-popover-panel max-h-chat-actions-select-model-popover  w-[280px]"
       onShow={(e) => {
         if (e) {
           autoScrollToSelectedModal();
@@ -140,7 +143,7 @@ const ModelSelect = () => {
         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">
+        <div className="line-clamp-1 max-w-chat-actions-select-model text-sm-title text-text-modal-select">
           {currentModel}
         </div>
         <BottomArrow />
diff --git a/app/containers/Chat/components/SessionConfigModal.tsx b/app/containers/Chat/components/SessionConfigModal.tsx
index e412ea0e6..f2e1083e4 100644
--- a/app/containers/Chat/components/SessionConfigModal.tsx
+++ b/app/containers/Chat/components/SessionConfigModal.tsx
@@ -49,6 +49,7 @@ export default function SessionConfigModel(props: { onClose: () => void }) {
             }}
           />,
         ]}
+        // className="!bg-modal-mask"
       >
         <MaskConfig
           mask={session.mask}
diff --git a/app/containers/Chat/components/SessionItem.tsx b/app/containers/Chat/components/SessionItem.tsx
index 6e5bacea4..5d5f3bd46 100644
--- a/app/containers/Chat/components/SessionItem.tsx
+++ b/app/containers/Chat/components/SessionItem.tsx
@@ -99,13 +99,18 @@ export default function SessionItem(props: {
             <Popover
               content={
                 <div
-                  className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
+                  className={`
+                    flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer
+                    follow-parent-svg
+                    fill-none
+                    text-text-chat-menu-item-delete
+                `}
                   onClickCapture={(e) => {
                     props.onDelete?.();
                   }}
                 >
                   <DeleteChatIcon />
-                  <div className="flex-1 font-common text-actions-popover-menu-item text-text-chat-menu-item-delete">
+                  <div className="flex-1 font-common text-actions-popover-menu-item ">
                     {Locale.Chat.Actions.Delete}
                   </div>
                 </div>
@@ -124,6 +129,7 @@ export default function SessionItem(props: {
                         md:group-hover/chat-menu-list:opacity-100
                         md:hover:bg-select-hover 
                         follow-parent-svg
+                        fill-none
                         text-text-chat-menu-item-time
                     `}
               >
@@ -134,7 +140,12 @@ export default function SessionItem(props: {
             <HoverPopover
               content={
                 <div
-                  className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
+                  className={`
+                    flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer
+                    follow-parent-svg
+                    fill-none
+                    text-text-chat-menu-item-delete
+                `}
                   onClickCapture={(e) => {
                     props.onDelete?.();
                     e.preventDefault();
diff --git a/app/containers/Chat/index.module.scss b/app/containers/Chat/index.module.scss
index e44a13aaf..e4478a487 100644
--- a/app/containers/Chat/index.module.scss
+++ b/app/containers/Chat/index.module.scss
@@ -527,7 +527,7 @@
 
 .prompt-hints {
   .prompt-hint {
-    color: var(--black);
+    color:var(--btn-default-text);
     padding: 6px 10px;
     // animation: slide-in ease 0.3s;
     // cursor: pointer;
diff --git a/app/containers/Settings/components/SyncConfigModal.tsx b/app/containers/Settings/components/SyncConfigModal.tsx
index 5f93efc19..7fb063bdd 100644
--- a/app/containers/Settings/components/SyncConfigModal.tsx
+++ b/app/containers/Settings/components/SyncConfigModal.tsx
@@ -77,6 +77,7 @@ export default function SyncConfigModal(props: { onClose?: () => void }) {
             text={Locale.UI.Confirm}
           />,
         ]}
+        className="!bg-modal-mask active-new"
       >
         <List
           widgetStyle={{
diff --git a/app/containers/Settings/components/UserPromptModal.tsx b/app/containers/Settings/components/UserPromptModal.tsx
index e1eae01cf..c05723204 100644
--- a/app/containers/Settings/components/UserPromptModal.tsx
+++ b/app/containers/Settings/components/UserPromptModal.tsx
@@ -32,6 +32,7 @@ function EditPromptModal(props: { id: string; onClose: () => void }) {
             bordered
           />,
         ]}
+        // className="!bg-modal-mask"
       >
         <div className={styles["edit-prompt-modal"]}>
           <Input
@@ -103,6 +104,7 @@ export default function UserPromptModal(props: { onClose?: () => void }) {
             text={Locale.Settings.Prompt.Modal.Add}
           />,
         ]}
+        // className="!bg-modal-mask"
       >
         <div className={styles["user-prompt-modal"]}>
           <Input
diff --git a/app/icons/logIcon.svg b/app/icons/logIcon.svg
index b49c59f19..19a3cfec6 100644
--- a/app/icons/logIcon.svg
+++ b/app/icons/logIcon.svg
@@ -1,6 +1,6 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="32" height="32" rx="8" fill="url(#paint0_linear_460_33855)"/>
-<rect width="32" height="32" rx="8" stroke="white"/>
+<rect width="32" height="32" rx="8" stroke="url(#paint0_linear_460_33855)"/>
 <g filter="url(#filter0_d_460_33855)">
 <path d="M9.51146 11.3436C9.86914 9.99625 11.2528 9.19527 12.5993 9.55608C13.9414 9.9157 14.7392 11.2938 14.3827 12.6368L11.9487 21.8055C11.591 23.1529 10.2073 23.9538 8.86082 23.593C7.51868 23.2334 6.72089 21.8553 7.07741 20.5123L9.51146 11.3436Z" fill="url(#paint1_linear_460_33855)"/>
 </g>
diff --git a/app/styles/base-new.scss b/app/styles/base-new.scss
index 38ff01e1c..e278bdf66 100644
--- a/app/styles/base-new.scss
+++ b/app/styles/base-new.scss
@@ -23,11 +23,32 @@ body {
     }
 
     .follow-parent-svg {
-        svg {
-            *:not(rect) {
-                fill: currentColor;
-            }
+      svg {
+        fill: inherit;
+        *:not(rect) {
+          fill: currentColor;
         }
+        rect {
+          fill: inherit;
+        }
+      }
+    }
+
+    .default-icon-color {
+      color: var(--default-icon-color);
+    }
+    .active-new {
+      .new-header, .new-footer {
+        border-color: var(--modal-header-bottom-border) !important;
+        color: var(--modal-title-text) !important;
+      }
+  
+      .new-btn {
+        button {
+          background: var(--default-btn-bg);
+          color: var(--btn-default-text);
+        }
+      }
     }
 
     --siderbar-mobile-height: 3.125rem;
@@ -93,6 +114,7 @@ body {
   --slider-block-hover-bg: #F7F7F8;
   --chat-menu-session-unselected-mobile-bg:#FFF;
   --chat-menu-session-selected-mobile-bg:  rgba(0, 0, 0, 0.05);
+  --model-select-popover-panel-bg: #fff;
 
   --select-popover-border: rgba(0, 0, 0, 0.1);
   --slider-block-border: #c9c9d1;
@@ -118,7 +140,9 @@ body {
   --btn-primary-text: #fff;
   --btn-danger-text: #ff5454;
   --btn-default-text: #606078;
+  --card-title-text: #18182A;
   --input-text: #18182a;
+  --select-text: #18182a;
   --list-subtitle-text: #a5a5b3;
   --slider-block-text: #606078;
   --chat-actions-btn-popover-text: #fff;
@@ -136,10 +160,15 @@ body {
   --settings-menu-title-text: #18182a;
   --settings-menu-item-title-text: #18182a;
   --settings-panel-header-title-text: #18182a;
-  --modal-mask-text: #18182a;
+  --modal-panel-text: #18182a;
   --delete-chat-ok-btn-text: #fff;
   --delete-chat-cancel-btn-text: #18182a;
   --chat-menu-item-delete-text: #FF5454;
+  --list-title-text: #18182A;
+  --select-option-text: #18182A;
+  --modal-select-text: #18182A;
+  --modal-title-text: #18182A;
+  --modal-content-text: #18182A;
 
   --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);
@@ -150,6 +179,8 @@ body {
   --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);
+
+  --default-icon-color: #606078;
 }
 
 .dark-new {
@@ -208,63 +239,72 @@ body {
   --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);////////////
+  --chat-menu-session-selected-mobile-bg:  #1D1D1D;
   --global-mobile-bg: #303030;
+  --model-select-popover-panel-bg: #111;
 
-  --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;
-  --modal-header-bottom-border: #f0f0f3;
-  --chat-menu-session-unselected-mobile-border: #FFF;
-  --chat-menu-session-selected-mobile-border: rgba(0, 0, 0, 0.05);
+  --select-popover-border: rgba(255, 255, 255, 0.05);
+  --slider-block-border: #6C6C6C;
+  --thumbnail-border: rgba(255, 255, 255, 0.05);
+  --chat-actions-popover-mobile-border: #303030;
+  --chat-header-bottom-border: #303030;
+  --chat-input-top-border: #303030;
+  --chat-input-hood-border: rgba(0,0,0,0);
+  --chat-input-hood-focus-border: #E3E3E3;
+  --chat-menu-session-selected-border: #1C2E70;
+  --settings-menu-item-selected-border: #1C2E70;
+  --settings-header-border: #404040;
+  --delete-chat-popover-border: rgba(255, 255, 255, 0.1);
+  --delete-chat-cancel-btn-border: #303030;
+  --chat-menu-session-unselected-border: #303030;
+  --chat-menu-session-hovered-border: #1D1D1D;   
+  --modal-header-bottom-border: #303030;
+  --chat-menu-session-unselected-mobile-border: rgba(0, 0, 0, 0);
+  --chat-menu-session-selected-mobile-border: rgba(0, 0, 0, 0);
 
-  --sidebar-tab-mobile-active-text: #2e42f3;
+  --sidebar-tab-mobile-active-text: #384CFC;
   --sidebar-tab-mobile-inactive-text: #a5a5b3;
   --btn-primary-text: #fff;
   --btn-danger-text: #ff5454;
-  --btn-default-text: #606078;
-  --input-text: #18182a;
+  --btn-default-text: #E3E3E3;
+  --card-title-text: #FAFAFA; 
+  --input-text: #FAFAFA; 
+  --select-text: #FAFAFA;
   --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;
-  --modal-mask-text: #18182a;
+  --slider-block-text: #E3E3E3;
+  --chat-actions-btn-popover-text: #111;
+  --chat-header-title-text: #FAFAFA;
+  --chat-header-subtitle-text: #B0B0B0;
+  --chat-input-placeholder-text: #B0B0B0;
+  --chat-message-date-text: #B0B0B0;
+  --chat-message-markdown-user-text: #FAFAFA;
+  --chat-message-markdown-bot-text: #FAFAFA;
+  --chat-panel-message-clear-text: #a5a5b3;  //////////////
+  --chat-panel-message-clear-revert-text: #3c44ff;   ///////////////
+  --chat-menu-item-title-text: #fff;
+  --chat-menu-item-time-text: rgba(255, 255, 255, 0.30);
+  --chat-menu-item-description-text: #B0B0B0;
+  --settings-menu-title-text: #FAFAFA;
+  --settings-menu-item-title-text: #FAFAFA;
+  --settings-panel-header-title-text: #FAFAFA;
+  --modal-panel-text: #FAFAFA;
   --delete-chat-ok-btn-text: #fff;
-  --delete-chat-cancel-btn-text: #18182a;
-  --chat-menu-item-delete-text: #FF5454;
+  --delete-chat-cancel-btn-text: #FAFAFA;
+  --chat-menu-item-delete-text: #F55151;
+  --list-title-text: #FAFAFA;
+  --select-option-text: #FAFAFA;
+  --modal-select-text: #E3E3E3;
+  --modal-title-text: #FAFAFA;
+  --modal-content-text: #FAFAFA;
 
-  --btn-shadow: 0px 4px 10px 0px rgba(60, 68, 255, 0.14);
+  --btn-shadow: 0px 4px 20px 0px rgba(60, 68, 255, 0.13);
   --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);
+  --select-popover-shadow:  0px 8px 30px 0px rgba(0, 0, 0, 0.10);
+  --message-actions-bar-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0);
   --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);
+  --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);
+
+  --default-icon-color: #E3E3E3;
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index fa8b3387b..63e7ad4f0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -140,6 +140,7 @@ module.exports = {
         'chat-actions-select-model-hover': 'var(--chat-actions-select-model-hover-bg)',
         'select-hover': 'var(--select-hover-bg)',
         'input-input-ele-hover': 'var(--input-input-ele-hover-bg)',
+        'model-select-popover-panel': 'var(--model-select-popover-panel-bg)',
       },
       backgroundImage: {
         // 'chat-panel-message-user': 'linear-gradient(259deg, #9786FF 8.42%, #4A5CFF 90.13%)',
@@ -191,7 +192,12 @@ module.exports = {
         'text-btn-primary': 'var(--btn-primary-text)',
         'text-btn-danger': 'var(--btn-danger-text)',
         'text-btn-default': 'var(--btn-default-text)',
+        'text-card-title': 'var(--card-title-text)',
         'text-input': 'var(--input-text)',
+        'text-select': 'var(--select-text)',
+        'text-select-option': 'var(--select-option-text)',
+        'text-modal-select': 'var(--modal-select-text)',
+        'text-list-title': 'var(--list-title-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)',
@@ -210,10 +216,12 @@ module.exports = {
         '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-modal-mask': 'var(--modal-mask-text)',
+        'text-modal-panel': 'var(--modal-panel-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)',
+        'text-modal-title': 'var(--modal-title-text)',
+        'text-modal-content': 'var(--modal-content-text)',
       },
       keyframes: {
         mask: {