diff --git a/components/icons/CalendarTick.js b/components/icons/CalendarTick.js
index 77394d5..44c11fa 100644
--- a/components/icons/CalendarTick.js
+++ b/components/icons/CalendarTick.js
@@ -6,6 +6,7 @@ function CalendarTick({ active }) {
       height="40"
       viewBox="0 0 40 40"
       fill="none"
+      className="delay-500"
     >
       <path
         d="M13.3335 3.33301V8.33301"
@@ -14,7 +15,7 @@ function CalendarTick({ active }) {
         strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M26.6665 3.33301V8.33301"
@@ -23,7 +24,7 @@ function CalendarTick({ active }) {
         strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M5.8335 15.1504H34.1668"
@@ -32,7 +33,7 @@ function CalendarTick({ active }) {
         strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M36.6668 31.6667C36.6668 32.9167 36.3168 34.1 35.7002 35.1C34.5502 37.0333 32.4335 38.3333 30.0002 38.3333C28.3168 38.3333 26.7835 37.7167 25.6168 36.6667C25.1002 36.2333 24.6502 35.7 24.3002 35.1C23.6835 34.1 23.3335 32.9167 23.3335 31.6667C23.3335 27.9833 26.3168 25 30.0002 25C32.0002 25 33.7835 25.8833 35.0002 27.2666C36.0335 28.45 36.6668 29.9833 36.6668 31.6667Z"
@@ -41,7 +42,7 @@ function CalendarTick({ active }) {
         strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M27.4009 31.6666L29.0509 33.3165L32.6009 30.0332"
@@ -49,7 +50,7 @@ function CalendarTick({ active }) {
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M35 14.1663V27.2663C33.7833 25.883 32 24.9997 30 24.9997C26.3167 24.9997 23.3333 27.983 23.3333 31.6663C23.3333 32.9163 23.6833 34.0997 24.3 35.0997C24.65 35.6997 25.1 36.233 25.6167 36.6663H13.3333C7.5 36.6663 5 33.333 5 28.333V14.1663C5 9.16634 7.5 5.83301 13.3333 5.83301H26.6667C32.5 5.83301 35 9.16634 35 14.1663Z"
@@ -58,7 +59,7 @@ function CalendarTick({ active }) {
         strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M19.9926 22.8333H20.0076"
@@ -66,7 +67,7 @@ function CalendarTick({ active }) {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M13.8237 22.8333H13.8387"
@@ -74,7 +75,7 @@ function CalendarTick({ active }) {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M13.8237 27.8333H13.8387"
@@ -82,7 +83,7 @@ function CalendarTick({ active }) {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
     </svg>
   );
diff --git a/components/icons/LocationAdd.js b/components/icons/LocationAdd.js
index 4ab046d..7238a94 100644
--- a/components/icons/LocationAdd.js
+++ b/components/icons/LocationAdd.js
@@ -6,26 +6,27 @@ function LocationAdd({ active }) {
       height="40"
       viewBox="0 0 40 40"
       fill="none"
+      className="delay-500"
     >
       <path
         d="M15.4165 18.333H24.5832"
         stroke="#616161"
         strokeWidth="1.5"
         strokeLinecap="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M20 22.9167V13.75"
         stroke="#616161"
         strokeWidth="1.5"
         strokeLinecap="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M6.0335 14.1497C9.31683 -0.283655 30.7002 -0.266988 33.9668 14.1663C35.8835 22.633 30.6168 29.7997 26.0002 34.233C22.6502 37.4663 17.3502 37.4663 13.9835 34.233C9.3835 29.7997 4.11683 22.6163 6.0335 14.1497Z"
         stroke="#616161"
         strokeWidth="1.5"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
     </svg>
   );
diff --git a/components/icons/UserEdit.js b/components/icons/UserEdit.js
index e460c1c..fb8d409 100644
--- a/components/icons/UserEdit.js
+++ b/components/icons/UserEdit.js
@@ -6,6 +6,7 @@ function UserEdit({ active }) {
       height="40"
       viewBox="0 0 41 40"
       fill="none"
+      className="delay-500"
     >
       <path
         d="M20.4998 19.9997C25.1022 19.9997 28.8332 16.2687 28.8332 11.6663C28.8332 7.06397 25.1022 3.33301 20.4998 3.33301C15.8975 3.33301 12.1665 7.06397 12.1665 11.6663C12.1665 16.2687 15.8975 19.9997 20.4998 19.9997Z"
@@ -13,7 +14,7 @@ function UserEdit({ active }) {
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M32.5166 26.2334L26.6165 32.1334C26.3832 32.3668 26.1666 32.8 26.1166 33.1167L25.7999 35.3667C25.6832 36.1833 26.2499 36.75 27.0666 36.6334L29.3165 36.3167C29.6332 36.2667 30.0832 36.05 30.2999 35.8167L36.1999 29.9167C37.2165 28.9001 37.6999 27.7167 36.1999 26.2167C34.7165 24.7333 33.5333 25.2167 32.5166 26.2334Z"
@@ -22,7 +23,7 @@ function UserEdit({ active }) {
         strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M31.6665 27.083C32.1665 28.883 33.5665 30.283 35.3665 30.783"
@@ -31,7 +32,7 @@ function UserEdit({ active }) {
         strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
       <path
         d="M6.18311 36.6667C6.18311 30.2167 12.5998 25 20.4998 25C22.2331 25 23.8998 25.25 25.4498 25.7167"
@@ -39,7 +40,7 @@ function UserEdit({ active }) {
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={active ? "stroke-[#FAFAFA]" : ""}
+        className={active ? "stroke-[#FAFAFA] delay-500" : ""}
       />
     </svg>
   );
diff --git a/components/panel/addDoctor/Step.js b/components/panel/addDoctor/Step.js
index aadf72b..b0df7d4 100644
--- a/components/panel/addDoctor/Step.js
+++ b/components/panel/addDoctor/Step.js
@@ -4,7 +4,7 @@ import UserEdit from "@/components/icons/UserEdit";
 
 function Step({ value }) {
   const list = [
-    { icon: <UserEdit active={value > 0} />, name: "اطلاعات عمومی" },
+    { icon: <UserEdit active={value >= 0} />, name: "اطلاعات عمومی" },
     { icon: <LocationAdd active={value >= 1} />, name: "اطلاعات مطب" },
     { icon: <CalendarTick active={value >= 2} />, name: "روزهای کاری" },
   ];
@@ -15,15 +15,17 @@ function Step({ value }) {
         <li className="flex items-center justify-center" key={idx}>
           <div className="flex flex-col items-center justify-center gap-2">
             <div
-              className={`flex items-center justify-center p-[18px] w-[75px] h-[75px] rounded-full
-          ${value > idx ? "bg-[#5559CE]" : "bg-[#F6F6F6]"}`}
+              className={`flex items-center bg-[#F6F6F6] justify-center p-[18px] w-[75px] h-[75px] rounded-full
+                relative overflow-hidden before:delay-500 before:transition-all before:duration-500 
+                before:absolute before:w-full before:h-full before:bg-[#5559CE]
+          ${value >= idx ? "before:right-0" : "before:-right-full"}`}
             >
-              {item.icon}
+              <div className="z-10 delay-500">{item.icon}</div>
             </div>
             <p
               className={`text-[16px]
            ${
-             value > idx
+             value >= idx
                ? "font-bold text-[#5559CE]"
                : "font-normal text-[#616161]"
            }`}
@@ -33,9 +35,11 @@ function Step({ value }) {
           </div>
           {list.length > idx + 1 && (
             <span
-              className={`block rounded-[16px] h-[2px] w-[100px] ${
-                value > idx ? "bg-[#5559CE]" : "bg-[#EFEFEF]"
-              }`}
+              className={`block rounded-[16px] transition-all duration-500 h-[2px] bg-[#EFEFEF] w-[100px]
+                relative overflow-hidden before:transition-all before:duration-500 
+                before:absolute before:w-full before:h-full before:bg-[#5559CE] before:ease-linear
+
+                 ${value > idx ? "before:right-0" : "before:-right-full"}`}
             ></span>
           )}
         </li>
diff --git a/components/panel/addDoctor/index.js b/components/panel/addDoctor/index.js
index 0335df7..6ccc837 100644
--- a/components/panel/addDoctor/index.js
+++ b/components/panel/addDoctor/index.js
@@ -13,14 +13,6 @@ import ArrowRightPH from "@/components/icons/ArrowRightPH";
 import { Button } from "@mui/material";
 import Step from "./Step";
 
-const listTab = [
-  "اطلاعات عمومی",
-  "اطلاعات مطب",
-  "نوبت ها",
-  "روزهای کاری",
-  "روزهای خاص",
-];
-
 function AddDoctorPage() {
   const [value, setValue] = useState(0);
   const [open, setOpen] = useState(false);
@@ -28,11 +20,10 @@ function AddDoctorPage() {
   const handleChange = (event, newValue) => setValue(newValue);
 
   const components = [
-    <GeneralInformation />,
-    <OfficeInformation />,
-    <Turns />,
-    <WorkingDays />,
-    <SpecialDays />,
+    <GeneralInformation setValue={setValue} />,
+    <OfficeInformation setValue={setValue} />,
+    <WorkingDays setValue={setValue} />,
+    <SpecialDays setValue={setValue} />,
   ];
 
   return (
diff --git a/components/panel/addDoctor/listMenu/generalInformation/form/Form.js b/components/panel/addDoctor/listMenu/generalInformation/form/index.js
similarity index 97%
rename from components/panel/addDoctor/listMenu/generalInformation/form/Form.js
rename to components/panel/addDoctor/listMenu/generalInformation/form/index.js
index 24ff005..441e36d 100644
--- a/components/panel/addDoctor/listMenu/generalInformation/form/Form.js
+++ b/components/panel/addDoctor/listMenu/generalInformation/form/index.js
@@ -8,7 +8,7 @@ import { Button } from "@mui/material";
 import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
 import FieldDate from "./FieldDate";
 
-function Form() {
+function Form({ setValue }) {
   const [data, setData] = useState({
     name: { value: "احسان احمدی", isEdit: false },
     medical_system_number: { value: 1741025645, isEdit: false },
@@ -100,6 +100,7 @@ function Form() {
       <div className="mt-[40px] w-full flex justify-end">
         <Button
           className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
+          onClick={() => setValue((prev) => prev + 1)}
           variant="contained"
         >
           ثبت اطلاعات
diff --git a/components/panel/addDoctor/listMenu/generalInformation/index.js b/components/panel/addDoctor/listMenu/generalInformation/index.js
index 9122612..272fba2 100644
--- a/components/panel/addDoctor/listMenu/generalInformation/index.js
+++ b/components/panel/addDoctor/listMenu/generalInformation/index.js
@@ -1,11 +1,11 @@
-import Form from "./form/Form";
+import Form from "./form";
 import Head from "./Head";
 
-function GeneralInformation() {
+function GeneralInformation({ setValue }) {
   return (
     <div className="opacity-page pb-[24px]">
       <Head />
-      <Form />
+      <Form setValue={setValue} />
     </div>
   );
 }
diff --git a/components/panel/addDoctor/listMenu/officeInformation/index.js b/components/panel/addDoctor/listMenu/officeInformation/index.js
index 27c91be..3bbbe7f 100644
--- a/components/panel/addDoctor/listMenu/officeInformation/index.js
+++ b/components/panel/addDoctor/listMenu/officeInformation/index.js
@@ -2,13 +2,14 @@ import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
 import { Button } from "@mui/material";
 import Form from "./Form";
 
-function OfficeInformation() {
+function OfficeInformation({ setValue }) {
   return (
     <div className="opacity-page pb-[24px]">
       <Form />
       <div className="mt-[40px] w-full flex justify-end">
         <Button
           className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
+          onClick={() => setValue((prev) => prev + 1)}
           variant="contained"
         >
           ثبت اطلاعات