diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index b000aee..4b01d5d 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -18,8 +18,10 @@ const Button: FC<ButtonProps> = (props) => {
     const { label, children, className, loading, variant, type, disabled, ...rest } = props
 
     const buttonClass = clx(
-        'w-full bg-primary text-primary-foreground cursor-pointer rounded-xl font-normal text-xs md:text-sm h-10 px-3 md:px-4 transition-all duration-200 hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
-        variant === 'secondary' && 'bg-[#ECEEF5] text-black',
+        'w-full cursor-pointer rounded-xl font-normal text-xs md:text-sm h-10 px-3 md:px-4 transition-all duration-200 hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
+        variant === 'secondary'
+            ? 'bg-secondary text-secondary-foreground'
+            : 'bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground',
         className
     )
 
diff --git a/src/index.css b/src/index.css
index 9c8543c..7da0f39 100644
--- a/src/index.css
+++ b/src/index.css
@@ -201,7 +201,7 @@ textarea::placeholder {
   --secondary: #f5f5f5;
   --secondary-foreground: #000000;
   --muted: #f5f5f5;
-  --muted-foreground: #888888;
+  --muted-foreground: #8c90a3;
   --accent: #f5f5f5;
   --accent-foreground: #000000;
   --destructive: #ef4444;
diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
index 393aa66..f589ba8 100644
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@@ -132,7 +132,7 @@ const Login: FC = () => {
                     </div>
                 </div>
 
-                <div className='flex-1 min-w-[50%] lg:flex hidden justify-center items-center bg-surface'>
+                <div className='flex-1 min-w-[50%] lg:flex hidden justify-center items-center'>
                     <img src={LogoImage} className='h-14 filterWhite' />
                 </div>
             </div>
diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx
index 4b46077..e961cf2 100644
--- a/src/shared/Header.tsx
+++ b/src/shared/Header.tsx
@@ -274,7 +274,10 @@ const Header: FC = () => {
                     actions={[
                         {
                             label: 'راهنما',
-                            onClick: () => window.location.href = import.meta.env.VITE_HELP_URL + `/${import.meta.env.VITE_SERVICE_ID}`,
+                            onClick: () => window.open(
+                                import.meta.env.VITE_HELP_URL + `/${import.meta.env.VITE_SERVICE_ID}`,
+                                '_blank'
+                            ),
                         },
                         {
                             label: 'گزارش اشکالات',
diff --git a/src/shared/Main.tsx b/src/shared/Main.tsx
index 93f344e..576c114 100644
--- a/src/shared/Main.tsx
+++ b/src/shared/Main.tsx
@@ -6,6 +6,7 @@ import Button from '@/components/Button'
 import { Add } from 'iconsax-react'
 import { useTranslation } from 'react-i18next'
 import { useSharedStore } from './store/sharedStore'
+import { getIconColor } from '@/utils/colorUtils'
 
 const Main: FC = () => {
 
@@ -33,7 +34,7 @@ const Main: FC = () => {
                     }}
                 >
                     <div className='flex gap-2 items-center'>
-                        <Add size={18} color='black' />
+                        <Add size={18} color={getIconColor('primary')} />
                         <div>{t('sidebar.new_message')}</div>
                     </div>
                 </Button>
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
index 9821964..e6bd6cc 100644
--- a/src/shared/SideBar.tsx
+++ b/src/shared/SideBar.tsx
@@ -67,9 +67,9 @@ const SideBar: FC = () => {
                         {t('sidebar.menu')}
                     </div>
 
-                    <div className='text-xs text-secondary-content'>
+                    <div className='text-xs text-[#8C90A3]'>
                         <SideBarItem
-                            icon={<DirectInbox variant={isActive(Paths.received) ? 'Bold' : 'Outline'} color={isActive(Paths.received) ? getIconColor('primary') : getIconColor('muted')} size={iconSizeSideBar} />}
+                            icon={<DirectInbox variant={isActive(Paths.received) ? 'Bold' : 'Outline'} color={isActive(Paths.received) ? getIconColor('primary') : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.received')}
                             isActive={isActive(Paths.received)}
                             link={Paths.received}
@@ -77,14 +77,14 @@ const SideBar: FC = () => {
                         />
 
                         <SideBarItem
-                            icon={<DirectSend variant={isActive(Paths.sent) ? 'Bold' : 'Outline'} color={isActive(Paths.sent) ? getIconColor('primary') : getIconColor('muted')} size={iconSizeSideBar} />}
+                            icon={<DirectSend variant={isActive(Paths.sent) ? 'Bold' : 'Outline'} color={isActive(Paths.sent) ? getIconColor('primary') : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.sent')}
                             isActive={isActive(Paths.sent)}
                             link={Paths.sent}
                         />
 
                         <SideBarItem
-                            icon={<Edit variant={isActive(Paths.draft) ? 'Bold' : 'Outline'} color={isActive(Paths.draft) ? getIconColor('primary') : getIconColor('muted')} size={iconSizeSideBar} />}
+                            icon={<Edit variant={isActive(Paths.draft) ? 'Bold' : 'Outline'} color={isActive(Paths.draft) ? getIconColor('primary') : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.draft')}
                             isActive={isActive(Paths.draft)}
                             link={Paths.draft}
@@ -92,14 +92,14 @@ const SideBar: FC = () => {
                         />
 
                         <SideBarItem
-                            icon={<ArchiveTick variant={isActive(Paths.archive) ? 'Bold' : 'Outline'} color={isActive(Paths.archive) ? getIconColor('primary') : getIconColor('muted')} size={iconSizeSideBar} />}
+                            icon={<ArchiveTick variant={isActive(Paths.archive) ? 'Bold' : 'Outline'} color={isActive(Paths.archive) ? getIconColor('primary') : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.archive')}
                             isActive={isActive(Paths.archive)}
                             link={Paths.archive}
                         />
 
                         <SideBarItem
-                            icon={<Trash variant={isActive(Paths.trash) ? 'Bold' : 'Outline'} color={isActive(Paths.trash) ? getIconColor('primary') : getIconColor('muted')} size={iconSizeSideBar} />}
+                            icon={<Trash variant={isActive(Paths.trash) ? 'Bold' : 'Outline'} color={isActive(Paths.trash) ? getIconColor('primary') : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.trash')}
                             isActive={isActive(Paths.trash)}
                             link={Paths.trash}
@@ -112,14 +112,14 @@ const SideBar: FC = () => {
 
                     <div className='text-xs text-secondary-content'>
                         <SideBarItem
-                            icon={<Star1 variant={isActive(Paths.favorite) ? 'Bold' : 'Outline'} color={isActive(Paths.favorite) ? getIconColor('primary') : getIconColor('muted')} size={iconSizeSideBar} />}
+                            icon={<Star1 variant={isActive(Paths.favorite) ? 'Bold' : 'Outline'} color={isActive(Paths.favorite) ? getIconColor('primary') : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.favorite')}
                             isActive={isActive(Paths.favorite)}
                             link={Paths.favorite}
                         />
 
                         <SideBarItem
-                            icon={<InfoCircle variant={isActive(Paths.spam) ? 'Bold' : 'Outline'} color={isActive(Paths.spam) ? getIconColor('primary') : getIconColor('muted')} size={iconSizeSideBar} />}
+                            icon={<InfoCircle variant={isActive(Paths.spam) ? 'Bold' : 'Outline'} color={isActive(Paths.spam) ? getIconColor('primary') : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.spam')}
                             isActive={isActive(Paths.spam)}
                             link={Paths.spam}
@@ -130,13 +130,13 @@ const SideBar: FC = () => {
                     <div className='flex-1 flex flex-col justify-end mt-10 md:mt-14 pb-6 md:pb-8'>
                         <div className='text-xs text-secondary-content'>
                             <SideBarItem
-                                icon={<Setting2 variant={isActive(Paths.setting) ? 'Bold' : 'Outline'} color={isActive(Paths.setting) ? getIconColor('primary') : getIconColor('muted')} size={iconSizeSideBar} />}
+                                icon={<Setting2 variant={isActive(Paths.setting) ? 'Bold' : 'Outline'} color={isActive(Paths.setting) ? getIconColor('primary') : '#8C90A3'} size={iconSizeSideBar} />}
                                 title={t('sidebar.settings')}
                                 isActive={isActive(Paths.setting)}
                                 link={Paths.setting}
                             />
                             <SideBarItem
-                                icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? getIconColor('primary') : getIconColor('muted')} size={iconSizeSideBar} />}
+                                icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? getIconColor('primary') : '#8C90A3'} size={iconSizeSideBar} />}
                                 title={t('sidebar.logout')}
                                 isActive={isActive('logout')}
                                 link={`#`}
diff --git a/src/shared/SideBarItem.tsx b/src/shared/SideBarItem.tsx
index 104cf85..5efd0f6 100644
--- a/src/shared/SideBarItem.tsx
+++ b/src/shared/SideBarItem.tsx
@@ -34,7 +34,7 @@ const SideBarItem: FC<Props> = (props: Props) => {
             }
             <div className='flex flex-1 gap-3 items-center'>
                 {props.icon}
-                <div className={props.isActive || !!props.count ? 'text-foreground' : 'text-foreground'}>
+                <div className={props.isActive || !!props.count ? 'text-foreground' : 'text-[#8C90A3]'}>
                     {props.title}
                 </div>
                 <div className='flex flex-1 justify-end pl-6'>