diff --git a/src/app/[name]/(Dialogs)/cart/page.tsx b/src/app/[name]/(Dialogs)/cart/page.tsx
index 03da35f..1bc88b7 100644
--- a/src/app/[name]/(Dialogs)/cart/page.tsx
+++ b/src/app/[name]/(Dialogs)/cart/page.tsx
@@ -65,7 +65,7 @@ const CartIndex = ({ }: Props) => {
                   <>
                     <button
                       onClick={() => increment(0)}
-                      className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-1"
+                      className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-1"
                     >
                       <PlusIcon size={16} />
                     </button>
@@ -80,7 +80,7 @@ const CartIndex = ({ }: Props) => {
                     </motion.div>
                     <button
                       onClick={() => decrement(0)}
-                      className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-1"
+                      className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-1"
                     >
                       {quantity > 1 ? <MinusIcon size={16} /> : <Trash className='stroke-foreground' size={16} />} {/* Use PlusIcon for decrement if quantity is 1 or less */}
                     </button>
diff --git a/src/app/[name]/(Main)/about/AboutPage.tsx b/src/app/[name]/(Main)/about/AboutPage.tsx
index f3ee555..cce8359 100644
--- a/src/app/[name]/(Main)/about/AboutPage.tsx
+++ b/src/app/[name]/(Main)/about/AboutPage.tsx
@@ -67,22 +67,22 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
           <h2 className='text-sm2 font-medium leading-5'>ارتباط</h2>
           <div className='col-span-1 text-center flex justify-center gap-4'>
             {data.contacts.phone &&
-              <a href={`tel://${data.contacts.phone}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
+              <a href={`tel://${data.contacts.phone}`} className='bg-[#EAEDF5] dark:bg-neutral-700 p-2 rounded-normal'>
                 <CallCalling className='stroke-foreground' size={24} />
               </a>
             }
             {data.contacts.telegram &&
-              <a href={`https://t.me/${data.contacts.telegram}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
+              <a href={`https://t.me/${data.contacts.telegram}`} className='bg-[#EAEDF5] dark:bg-neutral-700 p-2 rounded-normal'>
                 <TelegramIcon className='stroke-foreground' width={24} height={24} />
               </a>
             }
             {data.contacts.whatsapp &&
-              <a href={`https://whatsapp.com/?phone=${data.contacts.whatsapp}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
+              <a href={`https://whatsapp.com/?phone=${data.contacts.whatsapp}`} className='bg-[#EAEDF5] dark:bg-neutral-700 p-2 rounded-normal'>
                 <Whatsapp className='stroke-foreground' size={24} />
               </a>
             }
             {data.contacts.instagram &&
-              <a href={`https://instagram.com/${data.contacts.instagram}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
+              <a href={`https://instagram.com/${data.contacts.instagram}`} className='bg-[#EAEDF5] dark:bg-neutral-700 p-2 rounded-normal'>
                 <Instagram className='stroke-foreground' size={24} />
               </a>
             }
@@ -118,7 +118,7 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
               <div
                 key={index}
                 style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
-                className="bg-[#F6F6FA] rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
+                className="bg-[#F6F6FA] dark:bg-border rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
                 <div className="text-sm2">
                   {v.day}
                 </div>
@@ -155,8 +155,8 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
         <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
           <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
             <h2 className='text-sm2 font-medium leading-5'>نظرات کاربران</h2>
-            <button onClick={toggleSortingModal} 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={toggleSortingModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+              <EqualizerIcon className='dark:text-white' />
               <span className="text-xs leading-5 font-medium">{sortings[+sorting]}</span>
             </button>
           </div>
@@ -180,10 +180,10 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
             {sortings.map((v, i) => {
               return (
                 <div key={i}>
-                  <div onClick={() => changeSorting(i)} className="text-sm2 font-medium cursor-pointer">
+                  <div onClick={() => changeSorting(i)} className="text-sm2 font-normal cursor-pointer">
                     {v}
                   </div>
-                  {i < sortings.length - 1 && <hr className="text-white/40 mb-4 mt-4" />}
+                  {i < sortings.length - 1 && <hr className="border-white/40 dark:border-border mb-4 mt-4" />}
                 </div>
               )
             })}
diff --git a/src/app/[name]/(Main)/page.tsx b/src/app/[name]/(Main)/page.tsx
index 54f3163..2c15846 100644
--- a/src/app/[name]/(Main)/page.tsx
+++ b/src/app/[name]/(Main)/page.tsx
@@ -347,10 +347,10 @@ const MenuIndex = () => {
           {sortings.map((v, i) => {
             return (
               <div key={i}>
-                <div onClick={() => changeSorting(i)} className="text-sm2 font-medium cursor-pointer">
+                <div onClick={() => changeSorting(i)} className="text-sm2 font-normal cursor-pointer">
                   {tMenu('MenuSortingDrawer.Options.' + v)}
                 </div>
-                {i < sortings.length - 1 && <hr className="text-white/40 mb-4 mt-4" />}
+                {i < sortings.length - 1 && <hr className="border-white/40 dark:border-border mb-4 mt-4" />}
               </div>
             )
           })}
diff --git a/src/app/globals.css b/src/app/globals.css
index e201ffb..c3d31c8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -329,7 +329,7 @@ html[data-theme="dark"] {
   /* #FFFFFF */
   --primary: oklch(14% 0.005 285.823);
   /* #000000 */
-  --border: oklch(21.15% 0.012 254.09);
+  --border: oklch(1 0 0 / 10%);
   /* #E5E5E5 */
   --invalid: oklch(0.515 0.118 27.5);
   /* red (#FF0000 approx) */
diff --git a/src/components/icons/EqualizerIcon.tsx b/src/components/icons/EqualizerIcon.tsx
index 69dd371..7164213 100644
--- a/src/components/icons/EqualizerIcon.tsx
+++ b/src/components/icons/EqualizerIcon.tsx
@@ -9,7 +9,7 @@ interface EqualizerIconProps {
 
 const EqualizerIcon: React.FC<EqualizerIconProps> = ({
   className = '',
-  stroke = '#333333',
+  stroke = 'currentColor',
   strokeWidth = 1.5,
   size = 16,
 }) => {
diff --git a/src/components/utils/Comment.tsx b/src/components/utils/Comment.tsx
index b8c4089..2e98285 100644
--- a/src/components/utils/Comment.tsx
+++ b/src/components/utils/Comment.tsx
@@ -16,9 +16,9 @@ function Comment({ user, rating, date, text, tags, className = '' }: Props) {
     return (
         <div className={className}>
             <div className="flex items-center justify-start">
-                <span className="rounded-sm bg-primary h-5 mb-1 w-13 flex items-center justify-center gap-1">
-                    <Star1 className='fill-white mb-0.5' size={12} />
-                    <span className='text-sm2 font-medium text-white mt-1'>{rating}</span>
+                <span className="rounded-sm bg-primary dark:bg-foreground h-5 mb-1 w-13 flex items-center justify-center gap-1">
+                    <Star1 className='fill-white dark:fill-primary mb-0.5' size={12} />
+                    <span className='text-sm2 font-medium text-white dark:text-primary mt-1'>{rating}</span>
                 </span>
                 <span className='ms-2 text-sm2'>{user}</span>
                 <span className='ms-3 mb-1 size-1.5 bg-border rounded-full'></span>
@@ -31,7 +31,7 @@ function Comment({ user, rating, date, text, tags, className = '' }: Props) {
 
             <ul className='mt-3 flex flex-wrap items-center justify-start gap-2'>
                 {tags.map((v, i) => (
-                    <li key={i} className='text-xs py-1.5 px-3 bg-[#F2F2F2] rounded-sm text-center'>
+                    <li key={i} className='text-xs py-1.5 px-3 bg-[#F2F2F2] dark:bg-neutral-700 dark:text-disabled-text rounded-sm text-center'>
                         {v}
                     </li>
                 ))}
diff --git a/src/components/utils/Prompt.tsx b/src/components/utils/Prompt.tsx
index beaffed..610f43a 100644
--- a/src/components/utils/Prompt.tsx
+++ b/src/components/utils/Prompt.tsx
@@ -4,7 +4,7 @@ import { BlurredOverlayContainerProps } from '@/components/overlays/BlurredOverl
 import Modal from '@/components/utils/Modal'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '../ui/button'
+import Button from '../button/PrimaryButton';
 
 export type PromptProps = {
     title?: string,
diff --git a/src/components/utils/RateBar.tsx b/src/components/utils/RateBar.tsx
index 4100a13..c569f33 100644
--- a/src/components/utils/RateBar.tsx
+++ b/src/components/utils/RateBar.tsx
@@ -17,11 +17,11 @@ function RateBar({ percentage, content, className = '' }: Props) {
             <span className='mb-1 me-3 relative w-[67px] h-1 bg-border rounded-full'>
                 <motion.span
                     animate={{ width: [0, `${percentage}%`] }}
-                    className='absolute top-0 left-0 w-[10%] h-1 bg-primary rounded-full'
+                    className='absolute top-0 left-0 w-[10%] h-1 bg-primary dark:bg-foreground rounded-full'
                 >
                 </motion.span>
             </span>
-            <Star1 className='fill-black me-1 mb-1' size={12} />
+            <Star1 className='fill-black dark:fill-foreground me-1 mb-1' size={12} />
             <span className='text-xs font-medium'>{content}</span>
         </div>
     )