diff --git a/components/appointment/index.js b/components/appointment/index.js
index 3382fef..b0db6ad 100644
--- a/components/appointment/index.js
+++ b/components/appointment/index.js
@@ -31,11 +31,11 @@ function AppointmentPage({ slug, matchedCity }) {
     <LogInPage setIsSendMsg={false} setStep={setStep} />,
     <VerificationPage setIsSendMsg={false} link={false} setStep={setStep} />,
     <Detail
+      data={data}
+      setStep={setStep}
+      setData={setData}
       isForAnother={isForAnother}
       setIsForAnother={setIsForAnother}
-      setStep={setStep}
-      data={data}
-      setData={setData}
     />,
     <Paying setStep={setStep} />,
     <SuccessPay setStep={setStep} />,
diff --git a/components/doctors/modal/Content.js b/components/doctors/modal/Content.js
index aa6692c..bc6fbff 100644
--- a/components/doctors/modal/Content.js
+++ b/components/doctors/modal/Content.js
@@ -1,92 +1,38 @@
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-import RadioContent from "./RadioContent";
-import { FormControlLabel, Switch } from "@mui/material";
 import { useRouter } from "next/navigation";
-import { filterList } from "@/helper";
-const gender = ["زن", "مرد", "هر دو"];
-const degree = ["پزشک عمومی", "پزشک متخصص", "پزشک فوق تخصص", "همه موارد"];
+import specialties from "@/data/specialties.json";
+import Form from "./form";
 
 function Content({ data, setData }) {
   const router = useRouter();
-  const { parentList, childrenList } = filterList(data);
 
-  const changeUrl = (value) => {
+  const changeUrl = (value, name) => {
     const current = new URLSearchParams(window.location.search);
-    current.set("specialties", value.id || value);
+    current.set(name, value.id || value);
     const queryString = current.toString();
     router.push(`/doctors?${queryString}`);
   };
 
-  const changeData = (value, name, removeSpecialties) => {
-    changeUrl(value);
+  const changeData = (value, name, isCategory) => {
+    changeUrl(value, name);
     const newData = data;
     newData[name] = value;
-    if (removeSpecialties) {
+    const childrenList = specialties.filter((item) => item.parent);
+    const filteredChildrenList = childrenList.filter(
+      (item) => item.parent === value.id
+    );
+    if (isCategory) {
       newData.specialties = "";
+      newData.specialties = filteredChildrenList[0];
     }
     setData(newData);
+    return newData;
   };
 
+  console.log(data);
+
   return (
     <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
-      <AutoCompleteSelect
-        list={parentList}
-        updateData={(value) => changeData(value, "category", true)}
-        sendAll={true}
-        value={data.category?.name}
-        label="دسته بندی"
-      />
-      {!!childrenList.length && (
-        <div className="mt-[24px]">
-          <AutoCompleteSelect
-            list={childrenList}
-            updateData={(value) => changeData(value, "specialties")}
-            sendAll={true}
-            value={data.specialties?.name}
-            label="تخصص"
-          />
-        </div>
-      )}
-      <div className="mt-[40px] mb-[32px]">
-        <RadioContent
-          changeData={changeData}
-          value={data.gender}
-          text="جنسیت پزشک"
-          group={gender}
-          name="gender"
-        />
-        <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
-        <RadioContent
-          changeData={changeData}
-          value={data.degree}
-          text="درجه علمی"
-          group={degree}
-          name="degree"
-        />
-        <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
-        <div className="flex items-center justify-start gap-[12px]">
-          <FormControlLabel
-            control={
-              <Switch
-                checked={data.turn}
-                onChange={(event) => {
-                  changeData(event.target.checked ? 1 : 0, "turn");
-                }}
-              />
-            }
-            sx={{
-              ".MuiFormControlLabel-label": {
-                color: "#3B3B3B",
-                fontSize: "16px",
-                fontWeight: 500,
-              },
-              marginLeft: "0 !important",
-            }}
-            label="فقط پزشکان دارای نوبت"
-            labelPlacement="start"
-          />
-        </div>
-      </div>
+      <Form data={data} changeUrl={changeUrl} changeData={changeData} />
     </div>
   );
 }
diff --git a/components/doctors/modal/RadioContent.js b/components/doctors/modal/form/RadioContent.js
similarity index 100%
rename from components/doctors/modal/RadioContent.js
rename to components/doctors/modal/form/RadioContent.js
diff --git a/components/doctors/modal/Radios.js b/components/doctors/modal/form/Radios.js
similarity index 100%
rename from components/doctors/modal/Radios.js
rename to components/doctors/modal/form/Radios.js
diff --git a/components/doctors/modal/form/SwitchContent.js b/components/doctors/modal/form/SwitchContent.js
new file mode 100644
index 0000000..34d99cf
--- /dev/null
+++ b/components/doctors/modal/form/SwitchContent.js
@@ -0,0 +1,30 @@
+import { FormControlLabel, Switch } from "@mui/material";
+
+function SwitchContent({ data }) {
+  return (
+    <div className="flex items-center justify-start gap-[12px]">
+      <FormControlLabel
+        control={
+          <Switch
+            checked={data.turn}
+            onChange={(event) => {
+              changeData(event.target.checked ? 1 : 0, "turn");
+            }}
+          />
+        }
+        sx={{
+          ".MuiFormControlLabel-label": {
+            color: "#3B3B3B",
+            fontSize: "16px",
+            fontWeight: 500,
+          },
+          marginLeft: "0 !important",
+        }}
+        label="فقط پزشکان دارای نوبت"
+        labelPlacement="start"
+      />
+    </div>
+  );
+}
+
+export default SwitchContent;
diff --git a/components/doctors/modal/form/index.js b/components/doctors/modal/form/index.js
new file mode 100644
index 0000000..5e28dfb
--- /dev/null
+++ b/components/doctors/modal/form/index.js
@@ -0,0 +1,62 @@
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import SwitchContent from "./SwitchContent";
+import RadioContent from "./RadioContent";
+import { filterList } from "@/helper";
+import { useState } from "react";
+
+const gender = ["زن", "مرد", "هر دو"];
+const degree = ["پزشک عمومی", "پزشک متخصص", "پزشک فوق تخصص", "همه موارد"];
+
+function Form({ data, changeUrl, changeData }) {
+  const [list, setList] = useState({});
+  const { parentList, childrenList } = filterList(data);
+  console.log(filterList(data));
+
+  return (
+    <>
+      <AutoCompleteSelect
+        list={list.parentList}
+        sendAll={true}
+        label="دسته بندی"
+        value={data.category?.name}
+        updateData={(value) => {
+          const newData = changeData(value, "specialties", true);
+          setList(filterList(newData));
+          console.log(newData);
+        }}
+      />
+      {!!childrenList.length && (
+        <div className="mt-[24px]">
+          <AutoCompleteSelect
+            list={list.childrenList}
+            updateData={(value) => changeData(value, "specialties")}
+            sendAll={true}
+            value={data.specialties?.name}
+            label="تخصص"
+          />
+        </div>
+      )}
+      <div className="mt-[40px] mb-[32px]">
+        <RadioContent
+          changeData={changeData}
+          value={data.gender}
+          text="جنسیت پزشک"
+          group={gender}
+          name="gender"
+        />
+        <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
+        <RadioContent
+          changeData={changeData}
+          value={data.degree}
+          text="درجه علمی"
+          group={degree}
+          name="degree"
+        />
+        <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
+        <SwitchContent data={data} />
+      </div>
+    </>
+  );
+}
+
+export default Form;