diff --git a/app/globals.css b/app/globals.css
index cc8e694..1ef8b52 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -436,6 +436,10 @@ html {
   rotate: 180deg;
 }
 
+.panel-jalaali * {
+  transition-duration: 0.2s !important;
+}
+
 .panel-date-holder-item span {
   /* font-family: Iran Sans !important; */
   font-size: 18px !important;
@@ -464,6 +468,14 @@ html {
   display: none !important;
 }
 
+.active-today .day-item-outer .today {
+  background: #5559ce !important;
+}
+
+.active-today .panel-jalaali .day-item-outer .today .day-span-text {
+  color: #ffffff !important;
+}
+
 .panel-jalaali .days-body .day.hovered span {
   color: #343a40 !important;
 }
diff --git a/components/layoutPanel/userDetail/Date.js b/components/layoutPanel/userDetail/Date.js
index c73b4b7..01af158 100644
--- a/components/layoutPanel/userDetail/Date.js
+++ b/components/layoutPanel/userDetail/Date.js
@@ -1,10 +1,13 @@
 "use client";
 
 import { DatePicker } from "jalaali-react-date-picker";
+import moment from "moment-jalaali";
 
 function Date() {
+  const todayJalaali = moment().format("jYYYY/jMM/jDD");
+
   return (
-    <div className="flex justify-center sm-datepicker">
+    <div className="flex justify-center sm-datepicker active-today">
       <DatePicker
         nextIcon={<></>}
         prevIcon={<></>}