diff --git a/app/component/CustomTable.js b/app/component/CustomTable.js
index 3cdf04c..ec608e5 100644
--- a/app/component/CustomTable.js
+++ b/app/component/CustomTable.js
@@ -10,7 +10,7 @@ import {
 function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
   return (
     <TableContainer
-      className="!shadow-none table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]"
+      className="!shadow-none dark:!border-[#35343D] table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]"
       sx={{
         "&.MuiTableContainer-root": {
           borderRadius: zeroRadius && "0 !important",
@@ -19,18 +19,14 @@ function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
     >
       <Table className="!rounded-0 !shadow-none !overflow-hidden">
         <TableHead>
-          <TableRow className="!bg-[#EFEFEF]">
+          <TableRow className="!bg-[#EFEFEF] dark:!bg-[#343645]">
             {tableHead.map((item, idx) => (
               <TableCell
                 key={idx}
                 className={`
-                                !text-[#616161] !text-[14px] !font-normal !py-[10px] !px-[18px]
-                                ${
-                                  centerTable.includes(idx)
-                                    ? "!text-center"
-                                    : "!text-start"
-                                }
-                            `}
+                  !text-[#616161] dark:!border-none dark:!text-[#D7D8ED] !text-[14px] !font-normal !py-[10px] !px-[18px]
+                  ${centerTable.includes(idx) ? "!text-center" : "!text-start"}
+                `}
               >
                 {item}
               </TableCell>
diff --git a/app/globals.css b/app/globals.css
index b47bccc..3340e25 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -486,6 +486,10 @@ html {
   background: #ff975d !important;
 }
 
+.panel-jalaali .highlight {
+  background: #5559ce !important;
+}
+
 .panel-jalaali .panel-footer-wrapper,
 .panel-jalaali .panel-footer-rtl {
   display: none !important;
@@ -517,4 +521,82 @@ html {
   }
 }
 
+/* Dark Style */
+
+.dark tbody .MuiTableCell-root {
+  background: #222433;
+  border-color: #343645 !important;
+}
+
+.dark .MuiInputBase-root .MuiOutlinedInput-notchedOutline:hover,
+.dark .MuiInputBase-root .MuiOutlinedInput-notchedOutline {
+  border-color: #35343d !important;
+}
+
+.dark .MuiList-root {
+  background: #1f1d2b !important;
+  color: #a1a1a1 !important;
+}
+
+/* End Of Dark Style */
+
+/* Dark Date Picker */
+
+.dark .panel-elevation,
+.dark .panel-header-rtl,
+.dark .day-label-bar-inner-rtl,
+.dark .days-body {
+  background: #222433 !important;
+}
+
+.dark .icon-chevron-right::before,
+.dark .icon-chevron-left::before {
+  background: url(../public/assets/icons/arrow-right-light.svg) !important;
+}
+
+.dark .panel-jalaali .days-body .day.hovered:not(.weekend-day) span {
+  color: #a1a1a1 !important;
+}
+
+.dark .MuiPaper-root {
+  box-shadow: 0px 4px 25px 10px #1f1d2b !important;
+  background: #222433 !important;
+  border: none !important;
+}
+
+.dark .panel-header-item-text,
+.dark .panel-header-year-picker span {
+  color: #a1a1a1 !important;
+}
+
+.dark .panel-date-holder-item span:hover {
+  color: #c7cef4 !important;
+}
+
+.dark .panel-jalaali .hovered:not(.disabled):hover {
+  background: transparent !important;
+}
+
+.dark .panel-jalaali .days-body .day.hovered:not(.weekend-day) span:hover {
+  color: #c7cef4 !important;
+}
+
+.dark .panel-jalaali .year-item,
+.dark .panel-jalaali .month-item {
+  color: #a1a1a1;
+}
+
+.dark .panel-jalaali .year-item:hover,
+.dark .panel-jalaali .month-item:hover {
+  background: rgba(199, 206, 244, 0.1) !important;
+}
+
+.dark .panel-jalaali .year-item-selected,
+.dark .panel-jalaali .month-item-selected {
+  background: #5559ce !important;
+  color: #fafafa;
+}
+
+/* End Of Dark Date Picker */
+
 /* End Date Picker Style */
diff --git a/components/icons/ArrowLeftP.js b/components/icons/ArrowLeftP.js
index 7144692..9f33b10 100644
--- a/components/icons/ArrowLeftP.js
+++ b/components/icons/ArrowLeftP.js
@@ -9,6 +9,7 @@ function ArrowLeftP() {
     >
       <path
         d="M9.57 5.92969L3.5 11.9997L9.57 18.0697"
+        className="dark:stroke-[#A1A1A1]"
         stroke="#616161"
         strokeWidth="1.5"
         strokeMiterlimit="10"
@@ -17,6 +18,7 @@ function ArrowLeftP() {
       />
       <path
         d="M20.4999 12H3.66992"
+        className="dark:stroke-[#A1A1A1]"
         stroke="#616161"
         strokeWidth="1.5"
         strokeMiterlimit="10"
diff --git a/components/icons/CalendarTickGreenP.js b/components/icons/CalendarTickGreenP.js
index ad34e2a..4790130 100644
--- a/components/icons/CalendarTickGreenP.js
+++ b/components/icons/CalendarTickGreenP.js
@@ -22,7 +22,7 @@ function CalendarTickGreenP() {
       <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]"
+        className="dark:fill-[#FFFFFF]"
       />
     </svg>
   );
diff --git a/components/layoutPanel/userDetail/Activities.js b/components/layoutPanel/userDetail/Activities.js
index 32c04c3..1debbd0 100644
--- a/components/layoutPanel/userDetail/Activities.js
+++ b/components/layoutPanel/userDetail/Activities.js
@@ -4,7 +4,7 @@ import WarnP from "@/components/icons/WarnP";
 function Activities({ data, loading }) {
   return (
     <div className="w-full mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px]">
-      <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
+      <p className="text-[#525252] text-[14px] md:text-[16px] font-bold dark:text-[#D7D8ED]">
         فعالیت های امروز
       </p>
       <ul className="flex flex-col justify-start w-full mt-[24px]">
@@ -16,19 +16,19 @@ function Activities({ data, loading }) {
                   <WarnP />
                 </div>
                 <TextLoading width={110} height={18} loading={loading}>
-                  <p className="text-[#616161] text-[16px] font-medium">
+                  <p className="text-[#616161] dark:text-[#A1A1A1] text-[16px] font-medium">
                     {item.text}
                   </p>
                 </TextLoading>
               </div>
               <TextLoading width={55} height={18} loading={loading}>
-                <p className="text-[#7E7E7E] text-[12px] font-normal">
+                <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[12px] font-normal">
                   {item.time}
                 </p>
               </TextLoading>
             </div>
             {data.todays_activities.length > idx + 1 && (
-              <span className="block h-px w-full bg-transparent md:bg-[#EFEFEF] px-[13px] my-[16px] md:my-[20px] lg:my-[24px]"></span>
+              <span className="block h-px w-full bg-transparent md:bg-[#EFEFEF] dark:bg-[#343645] px-[13px] my-[16px] md:my-[20px] lg:my-[24px]"></span>
             )}
           </li>
         ))}
diff --git a/components/panel/dashboard/Cards.js b/components/panel/dashboard/Cards.js
index 2718fcd..bcc6e82 100644
--- a/components/panel/dashboard/Cards.js
+++ b/components/panel/dashboard/Cards.js
@@ -42,13 +42,13 @@ function Cards({ data, loading }) {
             {item.icon}
           </div>
           <div className="flex items-center justify-between">
-            <p className="text-[#525252] text-[14px] font-normal">
+            <p className="text-[#525252] text-[14px] font-normal dark:text-[#D7D8ED]">
               {item.text}
             </p>
             <TextLoading width={70} height={20} loading={loading}>
-              <p className="text-[#3B3B3B] text-[24px] font-medium">
+              <p className="text-[#3B3B3B] text-[24px] font-medium dark:text-[#A1A1A1]">
                 {item.value}
-                <span className="text-[#616161] mr-[6px] text-[12px] font-normal">
+                <span className="text-[#616161] mr-[6px] text-[12px] font-normal dark:text-[#A1A1A1]">
                   {item.label}
                 </span>
               </p>
diff --git a/components/panel/dashboard/amountOfIncome/Head.js b/components/panel/dashboard/amountOfIncome/Head.js
index 19fa0c7..516e1ea 100644
--- a/components/panel/dashboard/amountOfIncome/Head.js
+++ b/components/panel/dashboard/amountOfIncome/Head.js
@@ -15,7 +15,7 @@ function Head() {
 
   return (
     <div className="flex items-center justify-start gap-[12px] p-[16px]">
-      <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
+      <p className="text-[#525252] text-[14px] md:text-[16px] font-bold dark:text-[#D7D8ED]">
         میزان درآمد
       </p>
       <Select
@@ -28,12 +28,12 @@ function Head() {
           },
           "&:hover": {
             "& .MuiOutlinedInput-notchedOutline": {
-              border: "1px solid #D7D7D7 !important",
+              border: "1px solid #D7D7D7",
             },
           },
           "& .MuiOutlinedInput-notchedOutline": {
             borderColor: "#D7D7D7 !important",
-            border: "1px solid #D7D7D7 !important",
+            border: "1px solid #D7D7D7",
           },
         }}
       >
diff --git a/components/panel/dashboard/amountOfIncome/index.js b/components/panel/dashboard/amountOfIncome/index.js
index 831d864..fd7bbcd 100644
--- a/components/panel/dashboard/amountOfIncome/index.js
+++ b/components/panel/dashboard/amountOfIncome/index.js
@@ -3,7 +3,7 @@ import Head from "./Head";
 
 function AmountOfIncome({ data, loading }) {
   return (
-    <div className="rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
+    <div className="rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF] dark:bg-[#222433] dark:!border-transparent">
       <Head />
       <div dir="ltr">
         <Chart data={data} loading={loading} />
diff --git a/components/panel/dashboard/list/Table.js b/components/panel/dashboard/list/Table.js
index e591a16..2446c38 100644
--- a/components/panel/dashboard/list/Table.js
+++ b/components/panel/dashboard/list/Table.js
@@ -16,9 +16,9 @@ function Table({ data, loading }) {
         centerTable={centerTable}
       >
         {data.list_of_doctors_appointments.map((row, idx) => (
-          <TableRow key={idx} className="!border-0 !border-b !border-[#DBDBDB]">
+          <TableRow key={idx} className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent">
             <TableCell
-              className="!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap"
+              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
               align="center"
             >
               <TextLoading width={15} height={18} loading={loading}>
@@ -26,7 +26,7 @@ function Table({ data, loading }) {
               </TextLoading>
             </TableCell>
             <TableCell
-              className="!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap"
+              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
               component="th"
               scope="row"
             >
@@ -40,7 +40,7 @@ function Table({ data, loading }) {
               </div>
             </TableCell>
             <TableCell
-              className="!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
+              className="!text-start dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
               align="right"
             >
               <TextLoading width={30} height={18} loading={loading}>
@@ -48,7 +48,7 @@ function Table({ data, loading }) {
               </TextLoading>
             </TableCell>
             <TableCell
-              className="!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
+              className="!text-start dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
               align="right"
             >
               <TextLoading width={50} height={18} loading={loading}>
@@ -56,7 +56,7 @@ function Table({ data, loading }) {
               </TextLoading>
             </TableCell>
             <TableCell
-              className="!text-center !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
+              className="!text-center dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
               align="right"
             >
               <TextLoading width={50} height={18} loading={loading}>
@@ -64,7 +64,7 @@ function Table({ data, loading }) {
               </TextLoading>
             </TableCell>
             <TableCell
-              className="!text-right !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
+              className="!text-right dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
               align="right"
             >
               <TextLoading width={50} height={18} loading={loading}>
diff --git a/components/panel/dashboard/list/index.js b/components/panel/dashboard/list/index.js
index 538eb66..8731a9b 100644
--- a/components/panel/dashboard/list/index.js
+++ b/components/panel/dashboard/list/index.js
@@ -5,14 +5,14 @@ import ColTable from "../../ColTable";
 
 function List({ data, loading }) {
   return (
-    <div className="rounded-[8px] border overflow-hidden border-solid w-full border-transparent md:border-[#EFEFEF] bg-transparent md:bg-[#FFF]">
+    <div className="rounded-[8px] border overflow-hidden border-solid w-full border-transparent md:border-[#EFEFEF] bg-transparent md:bg-[#FFF] dark:bg-[#222433] dark:border-transparent">
       <div className="flex items-center justify-between p-[16px]">
-        <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
+        <p className="text-[#525252] text-[14px] md:text-[16px] font-bold dark:text-[#D7D8ED]">
           لیست نوبت های پزشکان
         </p>
         <Button
           variant="text"
-          className="!hidden md:!flex !items-center !justify-center !text-[#616161] !text-[14px] !font-normal !gap-[4px] !p-1"
+          className="!hidden md:!flex !items-center !justify-center !text-[#616161] !text-[14px] !font-normal !gap-[4px] !p-1 dark:!text-[#A1A1A1]"
         >
           مشاهده همه
           <ArrowLeftP />
diff --git a/public/assets/icons/arrow-right-light.svg b/public/assets/icons/arrow-right-light.svg
new file mode 100644
index 0000000..0f314ca
--- /dev/null
+++ b/public/assets/icons/arrow-right-light.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="vuesax/outline/arrow-right">
+<g id="arrow-right">
+<path id="Vector" d="M8.90961 21.17C8.71961 21.17 8.52961 21.1 8.37961 20.95C8.08961 20.66 8.08961 20.18 8.37961 19.89L14.8996 13.37C15.3796 12.89 15.3796 12.11 14.8996 11.63L8.37961 5.10999C8.08961 4.81999 8.08961 4.33999 8.37961 4.04999C8.66961 3.75999 9.14961 3.75999 9.43961 4.04999L15.9596 10.57C16.4696 11.08 16.7596 11.77 16.7596 12.5C16.7596 13.23 16.4796 13.92 15.9596 14.43L9.43961 20.95C9.28961 21.09 9.09961 21.17 8.90961 21.17Z" fill="#A1A1A1"/>
+</g>
+</g>
+</svg>