diff --git a/app/component/EditField.js b/app/component/fields/EditField.js
similarity index 100%
rename from app/component/EditField.js
rename to app/component/fields/EditField.js
diff --git a/app/component/Field.js b/app/component/fields/Field.js
similarity index 100%
rename from app/component/Field.js
rename to app/component/fields/Field.js
diff --git a/app/component/FieldIcon.js b/app/component/fields/FieldIcon.js
similarity index 100%
rename from app/component/FieldIcon.js
rename to app/component/fields/FieldIcon.js
diff --git a/app/component/selectors/MultipleSelect.js b/app/component/selectors/MultipleSelect.js
new file mode 100644
index 0000000..79b8169
--- /dev/null
+++ b/app/component/selectors/MultipleSelect.js
@@ -0,0 +1,72 @@
+import OutlinedInput from "@mui/material/OutlinedInput";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import { styleTextSelectRight } from "@/mui";
+import IconMultipleSelect from "@/components/icons/IconMultipleSelect";
+
+export default function MultipleSelect({ value, updateData, name, list }) {
+  const handleChange = (event) => {
+    const {
+      target: { value },
+    } = event;
+    const newVal = typeof value === "string" ? value.split(",") : value;
+    updateData(newVal, "value", name);
+  };
+
+  return (
+    <div className="auto-complete-selector w-full">
+      <Select
+        multiple
+        displayEmpty
+        value={value}
+        onChange={handleChange}
+        input={<OutlinedInput />}
+        IconComponent={IconMultipleSelect}
+        className=""
+        sx={{
+          ...styleTextSelectRight,
+          width: "100% !important",
+          "& .MuiInputBase-input": { padding: "12.5px 14px !important" },
+          "& .MuiInputBase-root": {
+            borderRadius: 2,
+            padding: "0 !important",
+            height: {
+              xs: "43px !important",
+              sm: "43px !important",
+              md: "46px !important",
+              lg: "48px !important",
+            },
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #D7D7D7",
+          },
+          "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
+            {
+              borderColor: "#D7D7D7 !important",
+            },
+          "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+            {
+              border: "1px solid #5559CE !important",
+            },
+        }}
+      >
+        {list.map((item) => (
+          <MenuItem
+            key={item.id || item.uuid}
+            value={item.id}
+            selected={value.includes(item.id)}
+            className={`!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1]
+    ${
+      value.includes(item.id)
+        ? "dark:!bg-[#35343D] !bg-[#F1F1F1]"
+        : "dark:!bg-[#1F1D2B] !bg-[#FFF]"
+    } 
+    hover:dark:!bg-[#35343D] hover:!bg-[#F5F5F5]`}
+          >
+            {item.name || item.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </div>
+  );
+}
diff --git a/components/appointment/detail/Form.js b/components/appointment/detail/Form.js
index c9d3c0e..980ce9d 100644
--- a/components/appointment/detail/Form.js
+++ b/components/appointment/detail/Form.js
@@ -1,5 +1,5 @@
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-import EditField from "../../../app/component/EditField";
+import EditField from "../../../app/component/fields/EditField";
 import Content from "./Content";
 
 const bime = [
diff --git a/components/contactUs/Connect.js b/components/contactUs/Connect.js
index a9db08b..00c7100 100644
--- a/components/contactUs/Connect.js
+++ b/components/contactUs/Connect.js
@@ -1,7 +1,7 @@
 import ArrowLeftC from "../icons/ArrowLeftC";
 import { Button } from "@mui/material";
 import FieldLabel from "./FieldLabel";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 
 function Connect() {
   return (
diff --git a/components/dashboard/userAccount/detailUser/allergies/modal/Content.js b/components/dashboard/userAccount/detailUser/allergies/modal/Content.js
index 67ca62f..ee917e2 100644
--- a/components/dashboard/userAccount/detailUser/allergies/modal/Content.js
+++ b/components/dashboard/userAccount/detailUser/allergies/modal/Content.js
@@ -1,5 +1,5 @@
 import FieldLabel from "@/components/contactUs/FieldLabel";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 import AutoSelector from "@/app/component/element/AutoSelector";
 
 const listIntensity = [
diff --git a/components/dashboard/userAccount/detailUser/familyHistory/modal/Content.js b/components/dashboard/userAccount/detailUser/familyHistory/modal/Content.js
index 106d193..af1b9a0 100644
--- a/components/dashboard/userAccount/detailUser/familyHistory/modal/Content.js
+++ b/components/dashboard/userAccount/detailUser/familyHistory/modal/Content.js
@@ -1,5 +1,5 @@
 import FieldLabel from "@/components/contactUs/FieldLabel";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 
 function Content({ setData, data }) {
   const handleChange = (name, value) =>
diff --git a/components/dashboard/userAccount/detailUser/medications/modal/Content.js b/components/dashboard/userAccount/detailUser/medications/modal/Content.js
index 584940e..9447902 100644
--- a/components/dashboard/userAccount/detailUser/medications/modal/Content.js
+++ b/components/dashboard/userAccount/detailUser/medications/modal/Content.js
@@ -1,5 +1,5 @@
 import FieldLabel from "@/components/contactUs/FieldLabel";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 
 function Content({ setData, data }) {
   const handleChange = (name, value) =>
diff --git a/components/dashboard/userAccount/detailUser/relatives/modal/Content.js b/components/dashboard/userAccount/detailUser/relatives/modal/Content.js
index 4a436b4..a783e1f 100644
--- a/components/dashboard/userAccount/detailUser/relatives/modal/Content.js
+++ b/components/dashboard/userAccount/detailUser/relatives/modal/Content.js
@@ -1,5 +1,5 @@
 import FieldLabel from "@/components/contactUs/FieldLabel";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 
 function Content({ setData, data }) {
   const handleChange = (name, value) =>
diff --git a/components/dashboard/userAccount/detailUser/surgeries/modal/Content.js b/components/dashboard/userAccount/detailUser/surgeries/modal/Content.js
index 8b59ba0..9008d98 100644
--- a/components/dashboard/userAccount/detailUser/surgeries/modal/Content.js
+++ b/components/dashboard/userAccount/detailUser/surgeries/modal/Content.js
@@ -1,5 +1,5 @@
 import FieldLabel from "@/components/contactUs/FieldLabel";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 
 const listIntensity = [
   { label: "شدید" },
diff --git a/components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js b/components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js
index dc7dcac..db993b8 100644
--- a/components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js
+++ b/components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js
@@ -4,7 +4,7 @@ import { useState } from "react";
 import { styleDefault } from "@/mui";
 import { Box, Button, Modal, Rating, Slider } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
 import ProgressChange from "@/app/component/ProgressChange";
 import Link from "next/link";
diff --git a/components/icons/IconMultipleSelect.js b/components/icons/IconMultipleSelect.js
new file mode 100644
index 0000000..7ada94d
--- /dev/null
+++ b/components/icons/IconMultipleSelect.js
@@ -0,0 +1,23 @@
+function IconMultipleSelect() {
+  return (
+    <svg
+      className="cursor-pointer ml-[14px] min-w-[24px] min-h-[24px]"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M19.9181 8.95L13.3981 15.47C12.6281 16.24 11.3681 16.24 10.5981 15.47L4.07812 8.95"
+        stroke="#495057"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default IconMultipleSelect;
diff --git a/components/panel/addDoctor/defaultState.js b/components/panel/addDoctor/defaultState.js
index c1e5a3d..5e48fe1 100644
--- a/components/panel/addDoctor/defaultState.js
+++ b/components/panel/addDoctor/defaultState.js
@@ -7,7 +7,7 @@ export const defaultState = {
   },
   expertise: { value: "", placeholder: "دندان پزشکی", isEdit: true },
   description: { value: "", isEdit: true },
-  skills: { value: "", isEdit: true },
+  skills: { value: [], isEdit: true },
   time_work: { value: "", isEdit: true },
   phone: { value: "", placeholder: "", isEdit: true },
   degree: { value: "", isEdit: true },
diff --git a/components/panel/addDoctor/form/fields/FieldDate.js b/components/panel/addDoctor/form/fields/FieldDate.js
index ca552ac..a43b3de 100644
--- a/components/panel/addDoctor/form/fields/FieldDate.js
+++ b/components/panel/addDoctor/form/fields/FieldDate.js
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { convertToJalali } from "@/helper";
-import EditField from "@/app/component/EditField";
+import EditField from "@/app/component/fields/EditField";
 import ButtonDate from "@/app/component/ButtonDate";
 import CalendarPD from "@/components/icons/CalendarPD";
 import ContentText from "@/app/component/ContentText";
diff --git a/components/panel/addDoctor/form/fields/Selector.js b/components/panel/addDoctor/form/fields/Selector.js
index 6ec19a6..8833fa4 100644
--- a/components/panel/addDoctor/form/fields/Selector.js
+++ b/components/panel/addDoctor/form/fields/Selector.js
@@ -9,7 +9,7 @@ function Selector({ updateData, nameKey, label, name, list }) {
       options={list}
       getOptionLabel={(option) => option[nameKey] || ""}
       isOptionEqualToValue={(option, value) => option.id === value.id}
-      className="!w-full !rounded-lg auto-complete-selector "
+      className="!w-full !rounded-lg auto-complete-selector"
       onChange={(e, newValue) => {
         if (newValue) {
           updateData && updateData(newValue.id, "value", name);
diff --git a/components/panel/addDoctor/form/index.js b/components/panel/addDoctor/form/index.js
index a268925..aeac80b 100644
--- a/components/panel/addDoctor/form/index.js
+++ b/components/panel/addDoctor/form/index.js
@@ -1,15 +1,18 @@
+import { useEffect, useState } from "react";
 import FieldDate from "./fields/FieldDate";
 import RadioGender from "./fields/RadioGender";
 import SendReq from "./sendReq";
 import Selector from "./fields/Selector";
 
 // Components
-import EditField from "@/app/component/EditField";
+import EditField from "@/app/component/fields/EditField";
 import ContentText from "@/app/component/ContentText";
 
 // Data
 import specialties from "@/data/specialties.json";
 import education from "@/data/education.json";
+import MultipleSelect from "@/app/component/selectors/MultipleSelect";
+import { request } from "@/services/response";
 
 const validate_medical_number = {
   min: 1,
@@ -17,6 +20,8 @@ const validate_medical_number = {
 };
 
 function Form({ image, data, setData, resetData }) {
+  const [services, setServices] = useState([]);
+
   const changeData = (value, type, name) => {
     type !== "isEdit" &&
       setData((prev) => {
@@ -38,6 +43,18 @@ function Form({ image, data, setData, resetData }) {
   };
   const filteredSpe = specialties.filter((item) => item.parent);
 
+  useEffect(() => {
+    request
+      .getDoctorServices()
+      .then((res) => {
+        setServices(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
+  console.log(services);
+
   return (
     <>
       <div className="mt-[24px] sm-modal scroll-mui md:mt-[26px] lg:mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
@@ -86,29 +103,14 @@ function Form({ image, data, setData, resetData }) {
             nameKey="label"
           />
         </ContentText>
-        <ContentText text="توضیحات">
-          <EditField
-            multiline={5}
-            placeholder="درباره سوابق خود توضیحاتی بنویسید..."
-            isTransparent={true}
-            iconGray={true}
-            changeData={changeData}
-            data={data?.description}
-            name="description"
-          />
-        </ContentText>
         <ContentText text="مهارت ها">
-          <EditField
-            multiline={5}
-            placeholder="مهارت های خود را بنویسید..."
-            isTransparent={true}
-            iconGray={true}
-            changeData={changeData}
-            data={data?.skills}
+          <MultipleSelect
             name="skills"
+            list={services}
+            updateData={changeData}
+            value={data?.skills.value}
           />
         </ContentText>
-
         <ContentText text="شماره موبایل">
           <EditField
             isTransparent={true}
@@ -124,6 +126,17 @@ function Form({ image, data, setData, resetData }) {
         <ContentText text="جنسیت">
           <RadioGender changeData={changeData} name="gender" />
         </ContentText>
+        <ContentText text="توضیحات">
+          <EditField
+            multiline={5}
+            placeholder="درباره سوابق خود توضیحاتی بنویسید..."
+            isTransparent={true}
+            iconGray={true}
+            changeData={changeData}
+            data={data?.description}
+            name="description"
+          />
+        </ContentText>
       </div>
       <SendReq img={image} data={data} resetData={resetData} />
     </>
diff --git a/components/panel/addDoctor/form/sendReq/index.js b/components/panel/addDoctor/form/sendReq/index.js
index 9914298..1ed303e 100644
--- a/components/panel/addDoctor/form/sendReq/index.js
+++ b/components/panel/addDoctor/form/sendReq/index.js
@@ -4,7 +4,6 @@ import { request } from "@/services/response";
 import { Button } from "@mui/material";
 import { useState } from "react";
 import { transformData } from "./function";
-import { defaultState } from "../../defaultState";
 
 function SendReq({ img, data, resetData }) {
   const [loading, setLoading] = useState(false);
diff --git a/components/panel/addDoctor/index.js b/components/panel/addDoctor/index.js
index fdd06ad..a6b1330 100644
--- a/components/panel/addDoctor/index.js
+++ b/components/panel/addDoctor/index.js
@@ -9,6 +9,7 @@ function AddDoctorPage() {
   const [data, setData] = useState(defaultState);
   const [image, setImage] = useState("");
   console.log(data);
+
   const resetData = () => {
     setData(defaultState);
     setImage();
diff --git a/components/panel/userAccount/account/form/index.js b/components/panel/userAccount/account/form/index.js
index 1d4c511..a3ae0d7 100644
--- a/components/panel/userAccount/account/form/index.js
+++ b/components/panel/userAccount/account/form/index.js
@@ -3,7 +3,7 @@
 import { useState } from "react";
 
 import ContentText from "../../../../../app/component/ContentText";
-import EditField from "@/app/component/EditField";
+import EditField from "@/app/component/fields/EditField";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import { bank, city, state } from "./listSelector";
 import AddLocationP from "@/components/icons/AddLocationP";
diff --git a/components/panel/userAccount/bank/head/modal/Form.js b/components/panel/userAccount/bank/head/modal/Form.js
index e285bda..6dbea5c 100644
--- a/components/panel/userAccount/bank/head/modal/Form.js
+++ b/components/panel/userAccount/bank/head/modal/Form.js
@@ -1,4 +1,4 @@
-import EditField from "@/app/component/EditField";
+import EditField from "@/app/component/fields/EditField";
 import ContentText from "@/app/component/ContentText";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import { validate_phone_number } from "./validate";
diff --git a/services/response.js b/services/response.js
index 3b1082d..dfd6fa3 100644
--- a/services/response.js
+++ b/services/response.js
@@ -68,4 +68,6 @@ export const request = {
         "X-CSRF-Token": "",
       },
     }),
+  getDoctorServices: () =>
+    api.get("api/v1/categorys/doctor_services", removeTokenHead),
 };