diff --git a/app/globals.css b/app/globals.css
index 60d7555..b47bccc 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -121,6 +121,10 @@ body {
   background: #fafafa;
 }
 
+body * {
+  @apply transition-colors duration-500;
+}
+
 /* Scroll */
 
 html {
diff --git a/app/panel/(layout)/layout.js b/app/panel/(layout)/layout.js
index 0d0e076..d519c29 100644
--- a/app/panel/(layout)/layout.js
+++ b/app/panel/(layout)/layout.js
@@ -21,7 +21,7 @@ function LayoutPanel({ children }) {
   }, []);
 
   return (
-    <div className="flex min-h-screen">
+    <div className="flex min-h-screen dark:bg-[#1F1D2B]">
       <Sidebar
         open={open}
         active={active}
@@ -31,7 +31,7 @@ function LayoutPanel({ children }) {
       <BgGray isActive={active} setIsActive={setActive} />
       <main
         className={`
-                w-full transition-all duration-500
+                w-full transition-all duration-500 dark:bg-[#1F1D2B]
                 ${
                   pathname.includes("dashboard")
                     ? open
diff --git a/components/icons/CalendarTickGreenP.js b/components/icons/CalendarTickGreenP.js
index ca28f0b..ad34e2a 100644
--- a/components/icons/CalendarTickGreenP.js
+++ b/components/icons/CalendarTickGreenP.js
@@ -10,16 +10,19 @@ function CalendarTickGreenP() {
       <path
         d="M16.25 3.56V4.01584L16.7039 4.05787C17.9607 4.17424 18.8396 4.60009 19.4285 5.22534C20.0186 5.8518 20.3659 6.72969 20.4607 7.83991C20.4603 7.84 20.4601 7.84 20.46 7.84H20.46H3.54161C3.54098 7.83968 3.54018 7.83919 3.53936 7.83853C3.63436 6.72896 3.98156 5.85155 4.57144 5.22534C5.16041 4.60009 6.0393 4.17424 7.29608 4.05787L7.74999 4.01584V3.56V2C7.74999 1.86614 7.86613 1.75 7.99999 1.75C8.13384 1.75 8.24999 1.86614 8.24999 2V3.5V4H8.74999H15.25H15.75V3.5V2C15.75 1.86614 15.8661 1.75 16 1.75C16.1338 1.75 16.25 1.86614 16.25 2V3.56Z"
         fill="#14CC26"
+        className="dark:fill-[#FFFFFF] dark:stroke-[#FFFFFF]"
         stroke="#14CC26"
       />
       <path
         d="M16.0097 20.8044L16.0098 20.8044L16.0056 20.7976C15.6837 20.2755 15.5 19.6563 15.5 19C15.5 17.0661 17.0661 15.5 19 15.5C20.9339 15.5 22.5 17.0661 22.5 19C22.5 19.6563 22.3163 20.2755 21.9944 20.7976L21.9944 20.7975L21.9903 20.8044C21.3871 21.8185 20.2773 22.5 19 22.5C17.7227 22.5 16.6129 21.8185 16.0097 20.8044ZM21.4095 18.9371L21.4096 18.9372L21.4175 18.9295C21.9045 18.4588 21.9502 17.6774 21.4755 17.1688C21.0103 16.6704 20.2148 16.6332 19.7098 17.1036C19.7095 17.1039 19.7092 17.1042 19.7088 17.1045L18.4635 18.2564L18.3236 18.1164C17.8383 17.6312 17.0417 17.6312 16.5564 18.1164C16.0712 18.6017 16.0712 19.3983 16.5564 19.8836L17.5464 20.8736C17.7952 21.1223 18.1145 21.24 18.43 21.24C18.7317 21.24 19.0442 21.1253 19.2798 20.9068C19.28 20.9066 19.2801 20.9065 19.2802 20.9064L21.4095 18.9371Z"
         fill="#14CC26"
+        className="dark:fill-[#FFFFFF] dark:stroke-[#FFFFFF]"
         stroke="#14CC26"
       />
       <path
         d="M20 9.83984H4C3.45 9.83984 3 10.2898 3 10.8398V16.9998C3 19.9998 4.5 21.9998 8 21.9998H12.93C13.62 21.9998 14.1 21.3298 13.88 20.6798C13.68 20.0998 13.51 19.4598 13.51 18.9998C13.51 15.9698 15.98 13.4998 19.01 13.4998C19.3 13.4998 19.59 13.5198 19.87 13.5698C20.47 13.6598 21.01 13.1898 21.01 12.5898V10.8498C21 10.2898 20.55 9.83984 20 9.83984ZM9.21 18.2098C9.02 18.3898 8.76 18.4998 8.5 18.4998C8.24 18.4998 7.98 18.3898 7.79 18.2098C7.61 18.0198 7.5 17.7598 7.5 17.4998C7.5 17.2398 7.61 16.9798 7.79 16.7898C7.89 16.6998 7.99 16.6298 8.12 16.5798C8.49 16.4198 8.93 16.5098 9.21 16.7898C9.39 16.9798 9.5 17.2398 9.5 17.4998C9.5 17.7598 9.39 18.0198 9.21 18.2098ZM9.21 14.7098C9.16 14.7498 9.11 14.7898 9.06 14.8298C9 14.8698 8.94 14.8998 8.88 14.9198C8.82 14.9498 8.76 14.9698 8.7 14.9798C8.63 14.9898 8.56 14.9998 8.5 14.9998C8.24 14.9998 7.98 14.8898 7.79 14.7098C7.61 14.5198 7.5 14.2598 7.5 13.9998C7.5 13.7398 7.61 13.4798 7.79 13.2898C8.02 13.0598 8.37 12.9498 8.7 13.0198C8.76 13.0298 8.82 13.0498 8.88 13.0798C8.94 13.0998 9 13.1298 9.06 13.1698C9.11 13.2098 9.16 13.2498 9.21 13.2898C9.39 13.4798 9.5 13.7398 9.5 13.9998C9.5 14.2598 9.39 14.5198 9.21 14.7098ZM12.71 14.7098C12.52 14.8898 12.26 14.9998 12 14.9998C11.74 14.9998 11.48 14.8898 11.29 14.7098C11.11 14.5198 11 14.2598 11 13.9998C11 13.7398 11.11 13.4798 11.29 13.2898C11.67 12.9198 12.34 12.9198 12.71 13.2898C12.89 13.4798 13 13.7398 13 13.9998C13 14.2598 12.89 14.5198 12.71 14.7098Z"
         fill="#14CC26"
+        className="dark:fill-[#FFFFFF] dark:stroke-[#FFFFFF]"
       />
     </svg>
   );
diff --git a/components/icons/CardOrangeP.js b/components/icons/CardOrangeP.js
index af95324..21eb198 100644
--- a/components/icons/CardOrangeP.js
+++ b/components/icons/CardOrangeP.js
@@ -9,16 +9,19 @@ function CardOrangeP() {
     >
       <path
         d="M21.5 21.25C21.5 21.3839 21.3839 21.5 21.25 21.5H2.75C2.61614 21.5 2.5 21.3839 2.5 21.25C2.5 21.1161 2.61614 21 2.75 21H21.25C21.3839 21 21.5 21.1161 21.5 21.25Z"
+        className="dark:stroke-[#FFFFFF] dark:fill-[#FFFFFF]"
         fill="#F17732"
         stroke="#F17732"
       />
       <path
         d="M3.53783 14.9106L3.39067 14.7598H3.38723C2.32968 13.5478 2.37708 11.7097 3.52349 10.5633L10.6735 3.41332C11.8782 2.20858 13.8217 2.20858 15.0264 3.41332L15.0263 3.41343L15.0353 3.42204C15.2363 3.61324 15.243 3.95965 15.0364 4.16621L4.29639 14.9062C4.0792 15.1234 3.73923 15.117 3.53783 14.9106Z"
+        className="dark:stroke-[#FFFFFF] dark:fill-[#FFFFFF]"
         fill="#F17732"
         stroke="#F17732"
       />
       <path
         d="M20.4664 8.84387L20.4676 8.84512C21.6805 10.0494 21.6805 11.9999 20.4589 13.2043L20.4561 13.207L13.3177 20.3555C13.3174 20.3558 13.3171 20.356 13.3169 20.3563C12.1121 21.5516 10.1679 21.5517 8.96309 20.3564C8.9628 20.3561 8.96251 20.3558 8.96222 20.3555L5.91407 17.2973L5.91349 17.2968C5.69631 17.0796 5.70267 16.7396 5.9091 16.5382L5.90913 16.5382L5.91349 16.5339L16.6535 5.79387L16.6535 5.79389L16.6578 5.78947C16.8592 5.58304 17.1992 5.57668 17.4164 5.79387L20.4664 8.84387ZM11.9035 19.0939L11.9049 19.0924L13.1113 17.8761C13.4659 17.5313 13.5361 16.9991 13.3402 16.5731C13.7632 16.7658 14.2822 16.7008 14.6362 16.361L14.6363 16.3611L14.6442 16.3531L17.0835 13.9039C17.0836 13.9038 17.0837 13.9037 17.0838 13.9036C17.5325 13.4546 17.5226 12.7333 17.0904 12.2838L17.0834 12.2765L17.0762 12.2696C16.6368 11.8478 15.9055 11.8376 15.4664 12.2768L13.0164 14.7268L13.0163 14.7267L13.0095 14.7338C12.6721 15.0846 12.5921 15.601 12.7865 16.0243C12.3645 15.8343 11.8407 15.9025 11.4964 16.2468L10.2764 17.4668L10.2763 17.4667L10.2695 17.4738C9.83715 17.9234 9.82739 18.6449 10.2764 19.0939L10.2763 19.0939L10.2834 19.1007C10.7331 19.5331 11.4545 19.5429 11.9035 19.0939Z"
+        className="dark:stroke-[#FFFFFF] dark:fill-[#FFFFFF]"
         fill="#F17732"
         stroke="#F17732"
       />
diff --git a/components/icons/PeopleBlueP.js b/components/icons/PeopleBlueP.js
index 494949e..946d097 100644
--- a/components/icons/PeopleBlueP.js
+++ b/components/icons/PeopleBlueP.js
@@ -10,28 +10,34 @@ function PeopleBlueP() {
       <path
         d="M17.55 7.26883C17.4668 7.26039 17.3833 7.26039 17.3001 7.26883C16.0378 7.20924 15.04 6.16893 15.04 4.89C15.04 3.57502 16.1073 2.5 17.43 2.5C18.7445 2.5 19.8192 3.56642 19.82 4.88843C19.811 6.16964 18.8112 7.20927 17.55 7.26883Z"
         fill="#5559CE"
+        className="dark:fill-[#FFFFFF] dark:stroke-[#FFFFFF]"
         stroke="#5559CE"
       />
       <path
         d="M20.5121 14.2848L20.5119 14.2849C19.6718 14.8475 18.5184 15.1269 17.3659 15.0957C17.6064 14.3892 17.7319 13.6358 17.7401 12.8556L17.7401 12.8556V12.8504C17.7401 12.0328 17.603 11.2414 17.3353 10.5108C18.5036 10.475 19.6562 10.7546 20.5036 11.317L20.5036 11.317L20.5052 11.318C21.1908 11.7693 21.4655 12.3155 21.4663 12.7976C21.4672 13.2802 21.1939 13.8288 20.5121 14.2848Z"
         fill="#5559CE"
+        className="dark:fill-[#FFFFFF] dark:stroke-[#FFFFFF]"
         stroke="#5559CE"
       />
       <path
         d="M6.43991 7.77C6.50991 7.76 6.57991 7.76 6.64991 7.77C8.19991 7.72 9.42991 6.45 9.42991 4.89C9.42991 3.29 8.13991 2 6.53991 2C4.94991 2 3.65991 3.29 3.65991 4.89C3.65991 6.45 4.88991 7.72 6.43991 7.77Z"
         fill="#5559CE"
+        className="dark:fill-[#FFFFFF] dark:stroke-[#FFFFFF]"
       />
       <path
         d="M6.55012 12.8496C6.55012 13.8196 6.76012 14.7396 7.14012 15.5696C5.73012 15.7196 4.26012 15.4196 3.18012 14.7096C1.60012 13.6596 1.60012 11.9496 3.18012 10.8996C4.25012 10.1796 5.76012 9.88962 7.18012 10.0496C6.77012 10.8896 6.55012 11.8396 6.55012 12.8496Z"
         fill="#5559CE"
+        className="dark:fill-[#FFFFFF] dark:stroke-[#FFFFFF]"
       />
       <path
         d="M12.12 15.87C12.04 15.86 11.95 15.86 11.86 15.87C10.02 15.81 8.55005 14.3 8.55005 12.44C8.56005 10.54 10.09 9 12 9C13.9 9 15.44 10.54 15.44 12.44C15.43 14.3 13.97 15.81 12.12 15.87Z"
         fill="#5559CE"
+        className="dark:fill-[#FFFFFF] dark:stroke-[#FFFFFF]"
       />
       <path
         d="M8.8698 17.9396C7.3598 18.9496 7.3598 20.6096 8.8698 21.6096C10.5898 22.7596 13.4098 22.7596 15.1298 21.6096C16.6398 20.5996 16.6398 18.9396 15.1298 17.9396C13.4198 16.7896 10.5998 16.7896 8.8698 17.9396Z"
         fill="#5559CE"
+        className="dark:fill-[#FFFFFF] dark:stroke-[#FFFFFF]"
       />
     </svg>
   );
diff --git a/components/layoutPanel/header/icons/index.js b/components/layoutPanel/header/icons/index.js
index 55414ac..c559bb2 100644
--- a/components/layoutPanel/header/icons/index.js
+++ b/components/layoutPanel/header/icons/index.js
@@ -13,7 +13,7 @@ function Icons() {
       <Button
         className="
                     !p-[8px] !border-[#EFEFEF] !rounded-[8px]
-                    !w-[32px] md:!w-[36px] lg:!w-[40px]
+                    !w-[32px] md:!w-[36px] lg:!w-[40px] dark:!border-[#343645]
                     !h-[32px] md:!h-[36px] lg:!h-[40px] md:!hidden
                     !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
                     !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
@@ -25,7 +25,7 @@ function Icons() {
       <Button
         className="
                     !p-[8px] !border-[#EFEFEF] !rounded-[8px]
-                    !w-[32px] md:!w-[36px] lg:!w-[40px]
+                    !w-[32px] md:!w-[36px] lg:!w-[40px] dark:!border-[#343645]
                     !h-[32px] md:!h-[36px] lg:!h-[40px]
                     !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
                     !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
@@ -37,7 +37,7 @@ function Icons() {
       <Button
         className="
                     !w-[32px] md:!w-[36px] lg:!w-[40px]
-                    !h-[32px] md:!h-[36px] lg:!h-[40px]
+                    !h-[32px] md:!h-[36px] lg:!h-[40px] dark:!border-[#343645]
                     !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
                     !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
                     !p-[8px] !border-[#EFEFEF] !rounded-[8px] !relative before:!rounded-full
diff --git a/components/layoutPanel/header/index.js b/components/layoutPanel/header/index.js
index 3ad6d8d..4d87bb7 100644
--- a/components/layoutPanel/header/index.js
+++ b/components/layoutPanel/header/index.js
@@ -7,9 +7,10 @@ function Header({ disableProfile, data, setActive }) {
   return (
     <div
       className="
-                h-[56px] sm:h-[67px] md:h-[79px] lg:h-[90px] top-0 right-0 sticky border-0 border-b border-[#EFEFEF] bg-[#FFF]
-                flex items-center justify-between pr-[16px] pl-[18px] z-20 gap-[14px] sm:gap-[28px] md:gap-[42px] lg:gap-[56px]
-            "
+        h-[56px] sm:h-[67px] md:h-[79px] lg:h-[90px] top-0 right-0 sticky border-0 border-b border-[#EFEFEF] bg-[#FFF]
+        dark:bg-[#222433] dark:border-transparent
+        flex items-center justify-between pr-[16px] pl-[18px] z-20 gap-[14px] sm:gap-[28px] md:gap-[42px] lg:gap-[56px]
+      "
     >
       <SideButton setActive={setActive} />
       <Search />
diff --git a/components/layoutPanel/sidebar/index.js b/components/layoutPanel/sidebar/index.js
index 10e9342..4c6d60c 100644
--- a/components/layoutPanel/sidebar/index.js
+++ b/components/layoutPanel/sidebar/index.js
@@ -30,8 +30,8 @@ function Sidebar({ active, setActive, open, setOpen }) {
            z-30 md:top-0 md:right-0 w-[85%]
         ${active ? " right-0" : "right-[-85%]"}
           overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed 
-          border-0 border-l border-l-[#EFEFEF] bg-[#FFF]
-          transition-all duration-500
+          border-0 border-l border-l-[#EFEFEF] bg-[#FFF] dark:bg-[#222433]
+          transition-all duration-500 dark:border-transparent
           ${open ? "md:w-[243px]" : "md:w-[92px] hover:md:w-[243px]"}
         `}
         >
diff --git a/components/layoutPanel/userDetail/index.js b/components/layoutPanel/userDetail/index.js
index 7dfb452..05dfc1f 100644
--- a/components/layoutPanel/userDetail/index.js
+++ b/components/layoutPanel/userDetail/index.js
@@ -6,8 +6,8 @@ function UserDetail({ data, loading }) {
   return (
     <div className="hidden xl:flex min-w-[332px] h-full opacity-page">
       <div
-        className="min-w-[332px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
-                bg-[#FFF] py-[40px] px-[16px]"
+        className="min-w-[337px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
+        g-[#FFF] py-[40px] px-[16px] bg-[#FFF] dark:bg-[#222433] dark:border-transparent"
       >
         <Head data={data} loading={loading} />
         <span className="block w-full h-px bg-[#EFEFEF] px-[22px] mt-[13px] mb-[16px]"></span>
diff --git a/components/panel/dashboard/Cards.js b/components/panel/dashboard/Cards.js
index 1763a72..2718fcd 100644
--- a/components/panel/dashboard/Cards.js
+++ b/components/panel/dashboard/Cards.js
@@ -7,21 +7,21 @@ function Cards({ data, loading }) {
   const list = [
     {
       text: "تعداد کل بیماران",
-      bg_color: "bg-[#E5E9FF]",
+      bg_color: "bg-[#E5E9FF] dark:bg-[#5559CE]",
       value: data.number_of_patients,
       label: "نفر",
       icon: <PeopleBlueP />,
     },
     {
       text: "نوبت های امروز",
-      bg_color: "bg-[rgba(20,204,38,0.14)]",
+      bg_color: "bg-[rgba(20,204,38,0.14)] dark:bg-[#009D79]",
       value: data.today_turns,
       label: "نوبت",
       icon: <CalendarTickGreenP />,
     },
     {
       text: "پرداختی ها",
-      bg_color: "bg-[#FFD8C5]",
+      bg_color: "bg-[#FFD8C5] dark:bg-[#F17732]",
       value: data.payments,
       label: "تومان",
       icon: <CardOrangeP />,
@@ -32,7 +32,8 @@ function Cards({ data, loading }) {
     <ul className="flex flex-wrap flex-col sm:flex-row items-center justify-center gap-[32px] mx-[16px]">
       {list.map((item, idx) => (
         <li
-          className="flex min-w-[226px] w-full sm:w-auto flex-col py-[16px] md:py-[18px] px-[12px] gap-[8px] rounded-[4px] border border-solid border-[#EFEFEF] bg-[#FFF]"
+          className="flex min-w-[226px] w-full sm:w-auto flex-col py-[16px] md:py-[18px] px-[12px] gap-[8px] rounded-[8px] border 
+          border-solid border-[#EFEFEF] bg-[#FFF] dark:bg-[#222433] dark:border-transparent"
           key={idx}
         >
           <div