diff --git a/src/assets/icons/channel.private.svg b/src/assets/icons/channel.private.svg
index 3ffc1de1..8e420e9e 100644
--- a/src/assets/icons/channel.private.svg
+++ b/src/assets/icons/channel.private.svg
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.83667 8.33333L6.48667 11.6667H6.4H3.25V13.3333H6.23333L5.8 17.5H7.475L7.91667 13.3333H11.2417L10.8083 17.5H12.4917L12.9333 13.3333H16.6167V11.6667H13.1167L13.2917 10H11.6625L11.4875 11.6667H8.1625L8.5125 8.33333H10.8334V6.66667H8.66667L9.10833 2.5H7.43333L7 6.66667H3.325V8.33333H6.83667Z" fill="#616161"/>
-<path d="M16.6875 4.16675V3.33341C16.6875 2.40008 15.875 1.66675 15 1.66675C14.125 1.66675 13.3333 2.40008 13.3333 3.33341V4.16675C12.8731 4.16675 12.5 4.53985 12.5 5.00008V7.50008C12.5 7.96031 12.8731 8.33341 13.3333 8.33341H15H16.6667C17.1269 8.33341 17.5 7.96031 17.5 7.50008V4.97925C17.5 4.53051 17.1362 4.16675 16.6875 4.16675ZM15.8333 4.16675H14.1667V3.33341C14.1667 2.85722 14.5556 2.50008 15 2.50008C15.4444 2.50008 15.8333 2.85722 15.8333 3.33341V4.16675Z" fill="#616161"/>
+<svg width="20" height="20" viewBox="0 0 20 20"  fill="#616161" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.83667 8.33333L6.48667 11.6667H6.4H3.25V13.3333H6.23333L5.8 17.5H7.475L7.91667 13.3333H11.2417L10.8083 17.5H12.4917L12.9333 13.3333H16.6167V11.6667H13.1167L13.2917 10H11.6625L11.4875 11.6667H8.1625L8.5125 8.33333H10.8334V6.66667H8.66667L9.10833 2.5H7.43333L7 6.66667H3.325V8.33333H6.83667Z"/>
+<path d="M16.6875 4.16675V3.33341C16.6875 2.40008 15.875 1.66675 15 1.66675C14.125 1.66675 13.3333 2.40008 13.3333 3.33341V4.16675C12.8731 4.16675 12.5 4.53985 12.5 5.00008V7.50008C12.5 7.96031 12.8731 8.33341 13.3333 8.33341H15H16.6667C17.1269 8.33341 17.5 7.96031 17.5 7.50008V4.97925C17.5 4.53051 17.1362 4.16675 16.6875 4.16675ZM15.8333 4.16675H14.1667V3.33341C14.1667 2.85722 14.5556 2.50008 15 2.50008C15.4444 2.50008 15.8333 2.85722 15.8333 3.33341V4.16675Z" />
 </svg>
diff --git a/src/common/component/ChannelIcon.tsx b/src/common/component/ChannelIcon.tsx
index da4c4ac9..b41d7cbf 100644
--- a/src/common/component/ChannelIcon.tsx
+++ b/src/common/component/ChannelIcon.tsx
@@ -10,8 +10,8 @@ interface Props {
 
 const ChannelIcon: FC<Props> = ({ personal = false, muted = false, className = "" }) => {
   return (
-    <div className={`flex${muted ? "!text-gray-400 !fill-slate-400" : ""} ${className}`}>
-      {personal ? <LockHashIcon /> : <HashIcon />}
+    <div className={`flex ${muted ? "!text-gray-400" : ""} ${className}`}>
+      {personal ? <LockHashIcon className="dark:fill-gray-300" /> : <HashIcon className="dark:fill-gray-300" />}
     </div>
   );
 };
diff --git a/src/common/component/FileBox/index.tsx b/src/common/component/FileBox/index.tsx
index 937c6939..58632ec7 100644
--- a/src/common/component/FileBox/index.tsx
+++ b/src/common/component/FileBox/index.tsx
@@ -87,12 +87,12 @@ const FileBox: FC<Props> = ({
 
   return (
     <div
-      className={clsx(`h-[66px] rounded-md border border-solid border-gray-300 bg-gray-100`, flex ? "w-full" : "w-[370px]", withPreview && "relative overflow-hidden h-[281px]", file_type.startsWith("audio") && "h-[125px]")}
+      className={clsx(`h-[66px] rounded-md border border-solid border-gray-300 dark:border-gray-500 bg-gray-100 dark:bg-gray-900`, flex ? "w-full" : "w-[370px]", withPreview && "relative overflow-hidden h-[281px]", file_type.startsWith("audio") && "h-[125px]")}
     >
       <div className="w-full p-2 flex items-center justify-between gap-2">
         {icon}
         <div className="flex flex-col gap-1 w-full overflow-hidden">
-          <span className="font-semibold text-sm text-gray-800 whitespace-nowrap text-ellipsis">{name}</span>
+          <span className="font-semibold text-sm text-gray-800 dark:text-gray-200 whitespace-nowrap text-ellipsis">{name}</span>
           <em className="text-xs text-gray-500 flex gap-4 not-italic">
             <span className="size">{formatBytes(size)}</span>
             <span className="time">{dayjs(created_at).fromNow()}</span>
@@ -102,7 +102,7 @@ const FileBox: FC<Props> = ({
           </em>
         </div>
         <a className="whitespace-nowrap" download={name} href={`${content}&download=true`}>
-          <IconDownload className="fill-gray-500" />
+          <IconDownload className="fill-gray-500 dark:fill-gray-300" />
         </a>
       </div>
       {withPreview && <div className="h-[calc(100%_-_64px)] overflow-hidden">{previewContent}</div>}
diff --git a/src/common/component/FileMessage/index.tsx b/src/common/component/FileMessage/index.tsx
index 21818253..7e3d28ca 100644
--- a/src/common/component/FileMessage/index.tsx
+++ b/src/common/component/FileMessage/index.tsx
@@ -156,22 +156,22 @@ const FileMessage: FC<Props> = ({
       />
     );
   return (
-    <div className={clsx(`file_message bg-slate-50 border border-solid border-gray-300 box-border w-[370px] h-[66px] rounded-md`, sending && "opacity-90")}>
+    <div className={clsx(`file_message bg-slate-50 dark:bg-slate-900 border border-solid border-gray-300 dark:border-gray-500 box-border w-[370px] h-[66px] rounded-md`, sending && "opacity-90")}>
       <div className="p-2 flex items-center justify-between gap-2">
         {icon}
         <div className="flex flex-col gap-1 w-full overflow-hidden">
-          <span className="font-semibold text-sm text-gray-800 whitespace-nowrap text-ellipsis">{name}</span>
-          <span className="whitespace-nowrap text-xs text-gray-500 flex gap-4">
+          <span className="font-semibold text-sm text-gray-800 dark:text-gray-100 whitespace-nowrap text-ellipsis">{name}</span>
+          <span className="whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 flex gap-4">
             {sending ? (
               <Progress value={progress} width={"80%"} />
             ) : (
               <>
-                <i>{formatBytes(size)}</i>
-                <i>{dayjs(created_at).fromNow()}</i>
+                <strong>{formatBytes(size)}</strong>
+                <strong>{dayjs(created_at).fromNow()}</strong>
                 {fromUser && (
-                  <i>
+                  <strong>
                     by <strong className="font-bold">{fromUser.name}</strong>
-                  </i>
+                  </strong>
                 )}
               </>
             )}
@@ -181,7 +181,7 @@ const FileMessage: FC<Props> = ({
           <IconClose className="cursor-pointer" onClick={handleCancel} />
         ) : (
           <a className="whitespace-nowrap" download={name} href={`${content}&download=true`}>
-            <IconDownload className="fill-gray-500" />
+            <IconDownload className="fill-gray-500 dark:fill-gray-400" />
           </a>
         )}
       </div>
diff --git a/src/common/component/GoogleLoginButton.tsx b/src/common/component/GoogleLoginButton.tsx
index b21acfe5..fd4b1ef5 100644
--- a/src/common/component/GoogleLoginButton.tsx
+++ b/src/common/component/GoogleLoginButton.tsx
@@ -44,7 +44,7 @@ const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
   }, [error]);
 
   return (
-    <Button className="group relative w-full !bg-white !text-gray-600 !h-[46px] overflow-hidden !border !border-solid !border-[#d0d5dd]" disabled={!loaded || isLoading}>
+    <Button className=" group relative w-full bg-white dark:bg-[#384250] text-gray-600 dark:text-gray-200 !h-[46px] overflow-hidden border border-solid border-[#d0d5dd]" disabled={!loaded || isLoading}>
       <div className="absolute left-0 top-0 w-full flex-center gap-3 z-[998] h-10 bg-inherit">
         <IconGoogle className="w-6 h-6" />
         {loadError
diff --git a/src/common/component/Message/index.tsx b/src/common/component/Message/index.tsx
index b651de41..87675f45 100644
--- a/src/common/component/Message/index.tsx
+++ b/src/common/component/Message/index.tsx
@@ -96,7 +96,7 @@ const Message: FC<IProps> = ({
       onContextMenu={readOnly ? undefined : handleContextMenuEvent}
       data-msg-mid={mid}
       ref={inviewRef}
-      className={clsx(`group w-full relative flex items-start gap-4 px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800 hover:bg-gray-50`,
+      className={clsx(`group w-full relative flex items-start gap-4 px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800 hover:bg-gray-100`,
         readOnly && "hover:bg-transparent",
         showExpire && "bg-red-200",
         pinInfo && "bg-cyan-50 dark:bg-cyan-800 pt-7"
diff --git a/src/common/component/styled/Input.tsx b/src/common/component/styled/Input.tsx
index 633e8da9..5de1d49f 100644
--- a/src/common/component/styled/Input.tsx
+++ b/src/common/component/styled/Input.tsx
@@ -44,14 +44,14 @@ const Input: FC<Props> = ({ type = "text", prefix = "", className = "", ...rest
     isPwd && "pr-[30px]"
   );
   return type == "password" ? (
-    <div className={`w-full relative flex overflow-hidden rounded border border-gray-300 dark:border-gray-500 shadow ${className}`}>
+    <div className={`w-full relative flex overflow-hidden rounded border border-gray-300 dark:border-gray-400 shadow ${className}`}>
       <input type={inputType} autoComplete={inputType == "password" ? "current-password" : "on"} className={`${inputClass} ${className}`} {...rest} />
       <div className="absolute top-1/2 right-2.5 -translate-y-1/2 cursor-pointer" onClick={togglePasswordVisible}>
         {inputType == "password" ? <IconEyeClose className="fill-gray-500" /> : <IconEyeOpen className="fill-gray-500" />}
       </div>
     </div>
   ) : prefix ? (
-    <div className={`w-full relative flex overflow-hidden rounded border border-gray-300 dark:border-gray-500 shadow ${className}`}>
+    <div className={`w-full relative flex overflow-hidden rounded border border-gray-300 dark:border-gray-400 shadow ${className}`}>
       <span className="px-4 py-2 text-sm text-gray-500 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 border dark:border-gray-600">{prefix}</span>
       <input className={`${inputClass} ${className}`} type={inputType} {...rest} />
     </div>
diff --git a/src/common/component/styled/Radio.tsx b/src/common/component/styled/Radio.tsx
index f8adc1e4..cb98d593 100644
--- a/src/common/component/styled/Radio.tsx
+++ b/src/common/component/styled/Radio.tsx
@@ -43,10 +43,10 @@ const Radio: FC<Props> = ({
             }}
             id={`${id}-${index}`}
           />
-          <div className="drop-shadow px-2 py-3 border border-gray-300 dark:border-gray-400 rounded-lg w-full h-full bg-white dark:bg-gray-800 peer-checked:bg-primary-400 text-sm text-gray-500 dark:text-gray-300  peer-checked:text-white">
+          <div className="drop-shadow px-2 py-3 border border-solid border-gray-300 dark:border-gray-400 rounded-lg w-full h-full bg-white dark:bg-gray-800 peer-checked:bg-primary-400 text-sm text-gray-500 dark:text-gray-300  peer-checked:text-white">
             <label className="ml-6" htmlFor={`${id}-${index}`}>{item}</label>
           </div>
-          <div className="absolute top-1/2 left-3 -translate-y-1/2 w-3.5 h-3.5 rounded-full border border-gray-300 peer-checked:hidden"></div>
+          <div className="absolute top-1/2 left-3 -translate-y-1/2 w-3.5 h-3.5 rounded-full border border-solid border-gray-300 peer-checked:hidden"></div>
           <div className="absolute top-1/2 left-3 -translate-y-1/2 w-3.5 h-3.5 rounded-full border border-solid border-white invisible peer-checked:visible flex-center">
             <div className="w-1 h-1 bg-white rounded-full"></div>
           </div>
diff --git a/src/routes/chat/ChannelChat/index.tsx b/src/routes/chat/ChannelChat/index.tsx
index 026aa07c..9319307b 100644
--- a/src/routes/chat/ChannelChat/index.tsx
+++ b/src/routes/chat/ChannelChat/index.tsx
@@ -132,8 +132,8 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
           </ul>
         }
         header={
-          <header className="box-border h-14 px-5 border-solid border-b border-b-black/10 flex items-center justify-center md:justify-between">
-            <div className="flex items-center gap-1 text-base">
+          <header className="h-14 px-5  flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
+            <div className="flex items-center gap-1">
               <ChannelIcon personal={!is_public} />
               <span className="text-gray-800 dark:text-white">{name}</span>
               <span className="ml-2 text-gray-500">{description}</span>
diff --git a/src/routes/chat/GuestChannelChat/index.tsx b/src/routes/chat/GuestChannelChat/index.tsx
index 82e77de3..459d916b 100644
--- a/src/routes/chat/GuestChannelChat/index.tsx
+++ b/src/routes/chat/GuestChannelChat/index.tsx
@@ -40,8 +40,8 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
         to={cid}
         context="channel"
         header={
-          <header className="head flex items-center h-full justify-center md:justify-between">
-            <div className="flex items-center gap-1 text-base">
+          <header className="box-border h-14 px-5 border-solid border-b border-b-black/10 flex items-center justify-center md:justify-between">
+            <div className="flex items-center gap-1">
               <ChannelIcon personal={!is_public} />
               <span className="text-gray-800 dark:text-white">{name}</span>
               <span className="ml-2 text-gray-500">{description}</span>
diff --git a/src/routes/chat/Layout/index.tsx b/src/routes/chat/Layout/index.tsx
index bb853f75..7fa97869 100644
--- a/src/routes/chat/Layout/index.tsx
+++ b/src/routes/chat/Layout/index.tsx
@@ -124,7 +124,7 @@ const Layout: FC<Props> = ({
               {selects && <Operations context={context} id={to} />}
             </div>
           </div>
-          {users && <div className="shadow-[inset_0px_10px_2px_-10px_rgba(0,_0,_0,_0.1)] hidden md:block">{users}</div>}
+          {users && <div className="hidden md:block">{users}</div>}
           {aside && <div className={clsx("p-3 absolute right-0 -top-14 translate-x-full flex-col hidden md:flex")}>{aside}</div>}
         </main>
         {!readonly && isActive && (
diff --git a/src/routes/chat/index.tsx b/src/routes/chat/index.tsx
index b4a27e2e..97586667 100644
--- a/src/routes/chat/index.tsx
+++ b/src/routes/chat/index.tsx
@@ -55,7 +55,7 @@ function ChatPage() {
       {usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
       <div className={`flex h-full pt-2 pb-2.5 pr-1 ${isGuest ? "!pr-1 !pt-0" : ""} md:!pr-12 `}>
         {sessionListVisible && <div onClick={toggleSessionList} className="z-30 fixed top-0 left-4 w-screen h-screen bg-black/50 transition-all backdrop-blur-sm"></div>}
-        <div className={clsx("flex-col rounded-l-2xl min-w-[268px] h-full border border-solid border-r-black/5 dark:border-none box-border fixed md:relative top-0 left-0 z-40 transition-all md:overflow-auto bg-white dark:!bg-[#1F2A37]", sessionListVisible ? "max-md:translate-x-0" : "max-md:-translate-x-full")}>
+        <div className={clsx("flex-col rounded-l-2xl min-w-[268px] h-full shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] fixed md:relative top-0 left-0 z-40 transition-all md:overflow-auto bg-white dark:!bg-[#1F2A37]", sessionListVisible ? "max-md:translate-x-0" : "max-md:-translate-x-full")}>
           <Server readonly={isGuest} />
           {isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
           {sessionListVisible ? null : <button className="absolute top-2 -right-[52px] z-50 p-2 bg-none  md:hidden" onClick={toggleSessionList}>