diff --git a/src/app/[name]/(Main)/page.tsx b/src/app/[name]/(Main)/page.tsx
index 8ff6a21..54f3163 100644
--- a/src/app/[name]/(Main)/page.tsx
+++ b/src/app/[name]/(Main)/page.tsx
@@ -5,7 +5,6 @@ import SearchBox from "@/components/input/SearchBox";
 import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
 import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
 import Image from "next/image";
-import EqualizerIcon from "@/components/icons/EqualizerIcon";
 import TextAlignIcon from "@/components/icons/TextAlignIcon";
 import VerticalScrollView from "@/components/listview/VerticalScrollView";
 import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
@@ -15,7 +14,7 @@ import Button from "@/components/button/PrimaryButton";
 import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
 import { Switch } from "@/components/ui/switch";
 import { TicketPercentIcon } from "lucide-react";
-import { MedalStar } from 'iconsax-react'
+import { Candle2, MedalStar } from 'iconsax-react'
 import { useQueryState } from 'next-usequerystate'
 import clsx from "clsx";
 import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer";
@@ -224,7 +223,7 @@ const MenuIndex = () => {
             <CategoryItemRenderer
               key={index}
               className={clsx(
-                index === +selectedCategory && "bg-white!",
+                index === +selectedCategory && "bg-container!",
               )}
               onClick={() => updateCategory(index)}
             >
@@ -235,7 +234,7 @@ const MenuIndex = () => {
                 height={32}
                 alt="category image"
               />
-              <span className="text-xs text-black">{item.title}</span>
+              <span className="text-xs text-foreground">{item.title}</span>
             </CategoryItemRenderer>
           ))}
         </HorizontalScrollView>
@@ -247,12 +246,12 @@ const MenuIndex = () => {
             {categories[+selectedCategory]?.title}
           </span>
           <div className="inline-flex gap-2 justify-around items-center">
-            <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
-              <EqualizerIcon />
+            <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+              <Candle2 className="stroke-foreground" size={16} />
               <span className="text-xs leading-5 font-medium">{tMenu('MenuFilterDrawer.Label')}</span>
             </button>
-            <button onClick={toggleSortingModal} className="rounded-lg h-8 bg-white p-1.5">
-              <TextAlignIcon />
+            <button onClick={toggleSortingModal} className="rounded-lg h-8 bg-container p-1.5">
+              <TextAlignIcon className="text-foreground" />
             </button>
           </div>
         </div>
@@ -262,7 +261,7 @@ const MenuIndex = () => {
           animate={{ y: smallCategoriesVisible ? 0 : -50, opacity: smallCategoriesVisible ? 1 : 0 }}
           transition={{ duration: .1 }}
           className={clsx(
-            'fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20',
+            'fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20',
             ``
           )}>
           <HorizontalScrollView className="w-full noscrollbar py-4!">
@@ -270,7 +269,7 @@ const MenuIndex = () => {
               <CategorySmallItemRenderer
                 key={index}
                 className={clsx(
-                  index === +selectedCategory && "bg-white!",
+                  index === +selectedCategory && "bg-container!",
                 )}
                 onClick={() => updateCategory(index)}
               >
@@ -281,7 +280,7 @@ const MenuIndex = () => {
                   height={24}
                   alt="category image"
                 />
-                <span className="text-xs text-black">{item.title}</span>
+                <span className="text-xs text-foreground">{item.title}</span>
               </CategorySmallItemRenderer>
             ))}
           </HorizontalScrollView>
diff --git a/src/app/globals.css b/src/app/globals.css
index eb6fb45..9ec648e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -37,7 +37,7 @@ input[type="password"]:not(:placeholder-shown) {
   font-style: normal;
   font-weight: normal;
   speak: none;
-  color: #b6b6b6da;
+  color: var(--disabled-text);
   margin: 5px 0px 10px 0px;
   font-size: 24px;
   /* Controls dot size (width & height) */
@@ -96,7 +96,7 @@ input[type="password"]:not(:placeholder-shown) {
 input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 0px transparent inset !important;
   box-shadow: 0 0 0px 0px transparent inset !important;
-  -webkit-text-fill-color: #b6b6b6da !important;
+  -webkit-text-fill-color: var(--disabled-text) !important;
   background: currentColor !important;
   transition: background-color 10000s ease-in-out 0s;
 }
@@ -104,7 +104,7 @@ input:-webkit-autofill {
 input:autofill {
   -webkit-box-shadow: 0 0 0px 0px transparent inset !important;
   box-shadow: 0 0 0px 0px transparent inset !important;
-  -webkit-text-fill-color: #b6b6b6da !important;
+  -webkit-text-fill-color: var(--disabled-text) !important;
   background: currentColor !important;
   transition: background-color 10000s ease-in-out 0s;
 }
@@ -129,9 +129,9 @@ input:autofill {
   border-radius: inherit;
   /* inherit border-radius from parent */
   background: linear-gradient(to bottom right,
-      #FFFFFF 6.25%,
+      var(--container) 6.25%,
       rgba(255, 253, 253, 0) 52.01%,
-      #FFFFFF 96.87%);
+      var(--container) 96.87%);
   mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
@@ -146,7 +146,6 @@ input:autofill {
   box-sizing: border-box;
 }
 
-
 @theme {
   --font-irancell: var(--font-irancell);
 
@@ -187,24 +186,38 @@ input:autofill {
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  --color-background: var(--background);       /* oklch(0.963 0.008 289.2) */
-  --color-container: var(--container);         /* oklch(1 0 0) */
-  --color-primary: var(--primary);              /* oklch(0.14 0 0) */
-  --color-border: var(--border);                /* oklch(0.885 0.007 248.3) */
-  --color-invalid: var(--invalid);              /* oklch(0.515 0.118 27.5) */
-  --color-valid: var(--valid);                  /* oklch(0.46 0.107 132.7) */
-  --color-foreground: var(--foreground);        /* oklch(0.202 0 0) */
-  --color-disabled: var(--disabled);            /* oklch(0.91 0.004 295.2) */
-  --color-disabled2: var(--disabled2);          /* oklch(0.5 0 0) */
-  --color-disabled3: var(--disabled3);          /* oklch(0.949 0.002 277.1) */
-  --color-disabled-text: var(--disabled-text);  /* oklch(0.34 0.006 257.4) */
-  --color-menu-header: var(--menu-header);      /* oklch(0.79 0.03 237.3) */
-  --color-icon-deactive: var(--icon-deactive);  /* oklch(0.65 0.027 234.8) */
-  --color-icon-active: var(--icon-active);      /* oklch(0.12 0.002 304.5) */
+  --color-background: var(--background);
+  /* oklch(0.963 0.008 289.2) */
+  --color-container: var(--container);
+  /* oklch(1 0 0) */
+  --color-primary: var(--primary);
+  /* oklch(0.14 0 0) */
+  --color-border: var(--border);
+  /* oklch(0.885 0.007 248.3) */
+  --color-invalid: var(--invalid);
+  /* oklch(0.515 0.118 27.5) */
+  --color-valid: var(--valid);
+  /* oklch(0.46 0.107 132.7) */
+  --color-foreground: var(--foreground);
+  /* oklch(0.202 0 0) */
+  --color-disabled: var(--disabled);
+  /* oklch(0.91 0.004 295.2) */
+  --color-disabled2: var(--disabled2);
+  /* oklch(0.5 0 0) */
+  --color-disabled3: var(--disabled3);
+  /* oklch(0.949 0.002 277.1) */
+  --color-disabled-text: var(--disabled-text);
+  /* oklch(0.34 0.006 257.4) */
+  --color-menu-header: var(--menu-header);
+  /* oklch(0.79 0.03 237.3) */
+  --color-icon-deactive: var(--icon-deactive);
+  /* oklch(0.65 0.027 234.8) */
+  --color-icon-active: var(--icon-active);
+  /* oklch(0.12 0.002 304.5) */
 }
 
 /* unified theme */
-:root { 
+:root {
   --font-irancell: "Irancell";
 
   --radius-normal: 10px;
@@ -247,20 +260,34 @@ html[data-theme="light"] {
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0); */
 
-  --background: oklch(0.963 0.008 289.2);       /* #F4F5F9 */
-  --container: oklch(1 0 0);                    /* #FFFFFF */
-  --primary: oklch(0.14 0 0);                   /* #000000 */
-  --border: oklch(0.885 0.007 248.3);           /* #E5E5E5 */
-  --invalid: oklch(0.515 0.118 27.5);           /* red (#FF0000 approx) */
-  --valid: oklch(0.46 0.107 132.7);             /* #439C46 */
-  --foreground: oklch(0.202 0 0);                /* #333333 */
-  --disabled: oklch(0.91 0.004 295.2);          /* #E7E7E7 */
-  --disabled2: oklch(0.5 0 0);                   /* #7F7F7F */
-  --disabled3: oklch(0.949 0.002 277.1);        /* #F2F2F2 */
-  --disabled-text: oklch(0.34 0.006 257.4);     /* #8C90A3 */
-  --menu-header: oklch(0.79 0.03 237.3);        /* #C3C7DD */
-  --icon-deactive: oklch(0.65 0.027 234.8);     /* #A8ABBF */
-  --icon-active: oklch(0.12 0.002 304.5);       /* #292D32 */
+  --background: oklch(0.963 0.008 289.2);
+  /* #F4F5F9 */
+  --container: oklch(1 0 0);
+  /* #FFFFFF */
+  --primary: oklch(0.14 0 0);
+  /* #000000 */
+  --border: oklch(0.885 0.007 248.3);
+  /* #E5E5E5 */
+  --invalid: oklch(0.515 0.118 27.5);
+  /* red (#FF0000 approx) */
+  --valid: oklch(0.46 0.107 132.7);
+  /* #439C46 */
+  --foreground: oklch(0.202 0 0);
+  /* #333333 */
+  --disabled: oklch(0.91 0.004 295.2);
+  /* #E7E7E7 */
+  --disabled2: oklch(0.5 0 0);
+  /* #7F7F7F */
+  --disabled3: oklch(0.949 0.002 277.1);
+  /* #F2F2F2 */
+  --disabled-text: oklch(0.34 0.006 257.4);
+  /* #8C90A3 */
+  --menu-header: oklch(0.79 0.03 237.3);
+  /* #C3C7DD */
+  --icon-deactive: oklch(0.65 0.027 234.8);
+  /* #A8ABBF */
+  --icon-active: oklch(0.12 0.002 304.5);
+  /* #292D32 */
 }
 
 html[data-theme="dark"] {
@@ -296,20 +323,34 @@ html[data-theme="dark"] {
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0); */
 
-  --background: oklch(23.26% 0.014 253.1);       /* #F4F5F9 */
-  --container: oklch(25.33% 0.016 252.42);                    /* #FFFFFF */
-  --primary: oklch(14% 0.005 285.823);                   /* #000000 */
-  --border: oklch(21.15% 0.012 254.09);           /* #E5E5E5 */
-  --invalid: oklch(0.515 0.118 27.5);           /* red (#FF0000 approx) */
-  --valid: oklch(0.46 0.107 132.7);             /* #439C46 */
-  --foreground: oklch(97.807% 0.029 256.847);                /* #333333 */
-  --disabled: oklch(42.866% 0.00494 286.051);          /* #E7E7E7 */
-  --disabled2: oklch(0.5 0 0);                   /* #7F7F7F */
-  --disabled3: oklch(0.949 0.002 277.1);        /* #F2F2F2 */
-  --disabled-text: oklch(75.73% 0.01398 251.72);     /* #8C90A3 */
-  --menu-header: oklch(0.79 0.03 237.3);        /* #C3C7DD */
-  --icon-deactive: oklch(0.65 0.027 234.8);     /* #A8ABBF */
-  --icon-active: oklch(0.12 0.002 304.5);       /* #292D32 */
+  --background: oklch(23.26% 0.014 253.1);
+  /* #F4F5F9 */
+  --container: oklch(30.33% 0.016 252.42);
+  /* #FFFFFF */
+  --primary: oklch(14% 0.005 285.823);
+  /* #000000 */
+  --border: oklch(21.15% 0.012 254.09);
+  /* #E5E5E5 */
+  --invalid: oklch(0.515 0.118 27.5);
+  /* red (#FF0000 approx) */
+  --valid: oklch(0.46 0.107 132.7);
+  /* #439C46 */
+  --foreground: oklch(97.807% 0.029 256.847);
+  /* #333333 */
+  --disabled: oklch(42.866% 0.00494 286.051);
+  /* #E7E7E7 */
+  --disabled2: oklch(0.5 0 0);
+  /* #7F7F7F */
+  --disabled3: oklch(0.949 0.002 277.1);
+  /* #F2F2F2 */
+  --disabled-text: oklch(75.73% 0.01398 251.72);
+  /* #8C90A3 */
+  --menu-header: oklch(0.79 0.03 237.3);
+  /* #C3C7DD */
+  --icon-deactive: oklch(0.65 0.027 234.8);
+  /* #A8ABBF */
+  --icon-active: oklch(0.12 0.002 304.5);
+  /* #292D32 */
 }
 
 /* @layer base {
@@ -320,4 +361,4 @@ html[data-theme="dark"] {
   body {
     @apply bg-background text-foreground;
   }
-} */
+} */
\ No newline at end of file
diff --git a/src/components/icons/MinusIcon.tsx b/src/components/icons/MinusIcon.tsx
index 51310b0..3032086 100644
--- a/src/components/icons/MinusIcon.tsx
+++ b/src/components/icons/MinusIcon.tsx
@@ -9,7 +9,7 @@ interface MinusIconProps {
 
 const MinusIcon: React.FC<MinusIconProps> = ({
   className = '',
-  stroke = '#333333',
+  stroke = 'currentColor',
   strokeWidth = 1.5,
   size = 10,
 }) => {
diff --git a/src/components/icons/PlusIcon.tsx b/src/components/icons/PlusIcon.tsx
index 828300d..3360593 100644
--- a/src/components/icons/PlusIcon.tsx
+++ b/src/components/icons/PlusIcon.tsx
@@ -9,7 +9,7 @@ interface PlusIconProps {
 
 const PlusIcon: React.FC<PlusIconProps> = ({
   className = '',
-  stroke = '#333333',
+  stroke = 'currentColor',
   strokeWidth = 1.5,
   size = 10,
 }) => {
diff --git a/src/components/icons/TextAlignIcon.tsx b/src/components/icons/TextAlignIcon.tsx
index 264014b..0ee5e82 100644
--- a/src/components/icons/TextAlignIcon.tsx
+++ b/src/components/icons/TextAlignIcon.tsx
@@ -9,7 +9,7 @@ interface TextAlignIconProps {
 
 const TextAlignIcon: React.FC<TextAlignIconProps> = ({
   className = '',
-  stroke = '#333333',
+  stroke = 'currentColor',
   strokeWidth = 1.5,
   size = 20,
 }) => {
diff --git a/src/components/input/SearchBox.tsx b/src/components/input/SearchBox.tsx
index 42c5a6a..013718f 100644
--- a/src/components/input/SearchBox.tsx
+++ b/src/components/input/SearchBox.tsx
@@ -12,7 +12,7 @@ interface SearchboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 export default function SearchBox({ className, value, placeholder = '', onChange, ...props }: SearchboxProps) {
   return (
     <div className={clsx(
-      "bg-white inline-flex rounded-xl px-4 h-10 w-full items-center content-center",
+      "bg-container inline-flex rounded-xl px-4 h-10 w-full items-center content-center",
       className
     )}>
       <SearchIcon stroke="#8C90A3" />
diff --git a/src/components/listview/CategoryItemRenderer.tsx b/src/components/listview/CategoryItemRenderer.tsx
index cc48ebb..50b168a 100644
--- a/src/components/listview/CategoryItemRenderer.tsx
+++ b/src/components/listview/CategoryItemRenderer.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 function CategoryItemRenderer({ children, ...rest }: Props) {
     return (
-        <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-white/40`}>
+        <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40`}>
             <div
                 {...rest}
                 className="rounded-normal w-[88px] h-[88px] flex flex-col justify-center items-center gap-2"
diff --git a/src/components/listview/CategorySmallItemRenderer.tsx b/src/components/listview/CategorySmallItemRenderer.tsx
index cb6b36f..4e5d823 100644
--- a/src/components/listview/CategorySmallItemRenderer.tsx
+++ b/src/components/listview/CategorySmallItemRenderer.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 function CategorySmallItemRenderer({ children, ...rest }: Props) {
     return (
-        <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-white/40`}>
+        <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40 dark:bg-background`}>
             <div
                 {...rest}
                 className="rounded-normal h-[44px] flex flex-row justify-center items-center p-2.5 gap-2"
diff --git a/src/components/listview/MenuItem.tsx b/src/components/listview/MenuItem.tsx
index f1d62fe..75fcf64 100644
--- a/src/components/listview/MenuItem.tsx
+++ b/src/components/listview/MenuItem.tsx
@@ -32,7 +32,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
       />
       <div className="w-full inline-flex flex-col justify-between">
         <div>
-          <div className="text-sm2 font-normal text-black">{food.name}</div>
+          <div className="text-sm2 font-normal text-black dark:text-white">{food.name}</div>
           <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
             {food.contains}
           </div>
@@ -49,15 +49,15 @@ const MenuItem = ({ food }: MenuItemProps) => {
                 className="inline-flex w-full justify-center items-center gap-2"
               >
                 <PlusIcon />
-                <div className="text-sm2 pt-0.5 font-normal text-black">افزودن</div>
+                <div className="text-sm2 pt-0.5 font-normal text-foreground">افزودن</div>
               </button>
             ) : (
               <>
                 <button
                   onClick={() => increment(food.id)}
-                  className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
+                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
                 >
-                  <PlusIcon />
+                  <PlusIcon className="text-foreground" />
                 </button>
                 <motion.div
                   key={quantity}
@@ -72,9 +72,9 @@ const MenuItem = ({ food }: MenuItemProps) => {
 
                 <button
                   onClick={() => decrement(food.id)}
-                  className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
+                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
                 >
-                  <MinusIcon />
+                  <MinusIcon className="text-foreground" />
                 </button>
               </>
             )}
diff --git a/src/components/listview/MenuItemRenderer.tsx b/src/components/listview/MenuItemRenderer.tsx
index d6d9e5d..64dc18d 100644
--- a/src/components/listview/MenuItemRenderer.tsx
+++ b/src/components/listview/MenuItemRenderer.tsx
@@ -10,10 +10,7 @@ function MenuItemRendererComponent({ children, ...rest }: Props) {
   return (
     <div
       {...rest}
-      className={`${rest.className} transition-all duration-200 ease-out w-full min-h-36 bg-white rounded-3xl px-4 flex items-center justify-between gap-4`}
-      style={{
-        boxShadow: '0px 2px 16px 0px #00000014'
-      }}>
+      className={`${rest.className} box-shadow-normal transition-all duration-200 ease-out w-full min-h-36 bg-container rounded-3xl px-4 flex items-center justify-between gap-4`}>
 
       {children}
     </div>
diff --git a/src/components/topbar/TopBar.tsx b/src/components/topbar/TopBar.tsx
index 5351f4c..531baa0 100644
--- a/src/components/topbar/TopBar.tsx
+++ b/src/components/topbar/TopBar.tsx
@@ -1,10 +1,9 @@
 'use client'
 
 import React from 'react'
-import BurgerMenuIcon from '../icons/BurgerMenuIcon'
 import NotificationBellIcon from '../icons/NotificationBellIcon'
 import Image from 'next/image'
-import { ArrowDown2, LogoutCurve, ProfileCircle, Setting2 } from 'iconsax-react'
+import { ArrowDown2, HambergerMenu, LogoutCurve, ProfileCircle, Setting2 } from 'iconsax-react'
 import Dropdown from '../utils/Dropdown'
 import Seperator from '../utils/Seperator'
 import Link from 'next/link'
@@ -33,7 +32,7 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
             <div className='grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 xl:gap-8 items-center'>
                 <div className='inline-flex justify-between items-center'>
                     <button className='inline-block xl:hidden' onClick={toggleMenuState}>
-                        <BurgerMenuIcon />
+                        <HambergerMenu className='stroke-foreground' size={24} />
                     </button>
                     {/* <div onClick={toggleSearchModalState} className='xl:bg-[#EEF0F7] xl:hidden inline-flex rounded-xl px-4 h-12 xl:w-[370px] items-center content-center' >
                         S
@@ -54,7 +53,7 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                         width={73}
                         height={25}
                         alt='Profile avatar'
-                        className='rounded-full'
+                        className='rounded-full dark:invert-100'
                         src={'/assets/images/danak-logo.png'} />
                 </div>
                 <div className='flex items-center justify-end gap-3 xl:gap-6'>
@@ -63,8 +62,8 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                     <Link
                         href={`/${name}/notifications`}
                         className='relative'>
-                        <NotificationBellIcon className='size-4.5 text-icon-active' />
-                        <span className='absolute -right-1 -top-1 bg-red-500 size-3 rounded-full text-[8px] text-white'>
+                        <NotificationBellIcon className='size-4.5 text-icon-active dark:text-foreground' />
+                        <span className='absolute -right-1 -top-1 bg-red-500 size-3 rounded-full text-[8px] text-container'>
                             <div className='mt-0.25 place-self-center'>2</div>
                         </span>
                     </Link>