diff --git a/app/component/ProgressChange.js b/app/component/ProgressChange.js
new file mode 100644
index 0000000..bb22d36
--- /dev/null
+++ b/app/component/ProgressChange.js
@@ -0,0 +1,41 @@
+import { Slider } from "@mui/material"
+import { useState } from "react"
+
+function ProgressChange({ data }) {
+
+    const [value, setValue] = useState(70)
+
+    return (
+        <li className="flex items-center justify-start gap-3 w-full">
+            <p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p>
+            <Slider
+                defaultValue={value}
+                className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
+                onChange={e => setValue(e.target.value)}
+                sx={{
+                    '& .MuiSlider-rail': {
+                        background: '#E8E8E8',
+                        opacity: '100'
+                    },
+                    '& .MuiSlider-track': {
+                        background: '#05BA58',
+                        border: 'none'
+                    },
+                    '& .MuiSlider-thumb': {
+                        marginRight: '-21px',
+                        background: '#EBEBEB',
+                        border: '1px solid #05BA58 !important'
+                    },
+                    '& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover': {
+                        boxShadow: 'none'
+                    },
+                }}
+            />
+            <p className="text-[#525252] text-[20px] font-medium w-[30px]">
+                {value}
+            </p>
+        </li>
+    )
+}
+
+export default ProgressChange
\ No newline at end of file
diff --git a/app/component/date/datePicker/index.js b/app/component/date/datePicker/index.js
index b1f1728..971b5d4 100644
--- a/app/component/date/datePicker/index.js
+++ b/app/component/date/datePicker/index.js
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
 
 function DatePicker({ date, updateDate }) {
+
     const [startDate, setStartDate] = useState(null);
     const [endDate, setEndDate] = useState(null);
 
@@ -24,19 +25,20 @@ function DatePicker({ date, updateDate }) {
     };
 
     return (
-        <div className='flex items-start gap-[40px]'>
+        <div className='flex items-start justify-evenly w-full'>
             <DatePickerJalali
                 value={startDate}
                 className='w-1/2'
                 timePicker={false}
                 onChange={handleStartDateChange}
             />
-            <DatePickerJalali
-                value={endDate}
-                className='w-1/2'
-                timePicker={false}
-                onChange={handleEndDateChange}
-            />
+            <div className='w-1/2 hidden md:flex lg:hidden xl:flex'>
+                <DatePickerJalali
+                    value={endDate}
+                    timePicker={false}
+                    onChange={handleEndDateChange}
+                />
+            </div>
         </div>
     );
 }
diff --git a/app/component/date/dateTime/Hours.js b/app/component/date/dateTime/Hours.js
index 7b60f1a..c498045 100644
--- a/app/component/date/dateTime/Hours.js
+++ b/app/component/date/dateTime/Hours.js
@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
 function Hours({ doctor, hour, setHour, value, nameHours }) {
     return (
         <ul
-            className="grid grid-cols-6 gap-x-[16px] gap-y-[24px] mt-[24px] mb-[40px]"
+            className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[24px] mt-[24px] mb-[40px]"
         >
             {doctor[nameHours[value]].map((item, idx) => (
                 <li
diff --git a/app/component/date/dateTime/index.js b/app/component/date/dateTime/index.js
index ec66eb5..5ed8cfd 100644
--- a/app/component/date/dateTime/index.js
+++ b/app/component/date/dateTime/index.js
@@ -32,22 +32,21 @@ function DateTime({ doctor }) {
         setHour={setHour}
         nameHours={nameHours}
       />
-      <div className="w-full flex justify-end">
-        <Link
-          href='/login-verify'
+      <Link
+        href='/login-verify'
+        className="w-full flex justify-end"
+      >
+        <Button
+          className="!gap-[4px] !px-[12px] !py-[8px] !w-full !min-w-[157px]"
+          onClick={() =>
+            localStorage.setItem('doctor-id', doctor?.id)
+          }
+          variant="contained"
         >
-          <Button
-            className="!gap-[4px] !px-[12px] !py-[8px] !min-w-[157px]"
-            onClick={() =>
-              localStorage.setItem('doctor-id', doctor?.id)
-            }
-            variant="contained"
-          >
-            <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
-            <ArrowLeftB />
-          </Button>
-        </Link>
-      </div>
+          <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
+          <ArrowLeftB />
+        </Button>
+      </Link>
     </div>
   )
 }
diff --git a/app/globals.css b/app/globals.css
index e4dc65a..be5435c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -301,8 +301,6 @@ html {
     }
 }
 
-
-
 /* Date Picker Style */
 
 .panel-elevation {
@@ -348,10 +346,6 @@ html {
     border-bottom: none !important;
 }
 
-.day-label-bar-inner-rtl {
-    background: #FFF !important;
-}
-
 .day-label-bar-inner-rtl div {
     color: #6C757D !important;
 }
@@ -391,4 +385,18 @@ html {
     border-radius: 50%;
 }
 
+.day-label-bar-inner-rtl {
+    background: #FFF !important;
+}
+
+@media (max-width: 1024px) {
+
+    .day-label-bar-inner-rtl,
+    .panel-jalaali,
+    .panel-header-rtl,
+    .days-body {
+        background: #FAFAFA !important;
+    }
+}
+
 /* End Date Picker Style */
\ No newline at end of file
diff --git a/components/account/detailDoctor/Detail.js b/components/account/detailDoctor/Detail.js
index 48b0f48..93f8e74 100644
--- a/components/account/detailDoctor/Detail.js
+++ b/components/account/detailDoctor/Detail.js
@@ -7,53 +7,77 @@ import { Button } from "@mui/material"
 
 function Detail({ doctor }) {
     return (
-        <div className="mt-[8px]">
+        <div className="">
             <ul className="flex flex-col items-start justify-start gap-[24px]">
                 <li className="flex items-center justify-start gap-[4px]">
-                    <LocationA />
-                    <p className="text-[#616161] text-[16px] font-normal">آدرس: {doctor.location}</p>
+                    <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
+                        <LocationA />
+                    </div>
+                    <p className="text-[#616161] text-[14px] md:text-[16px] font-normal">آدرس: {doctor.location}</p>
                 </li>
                 <li className="flex items-center justify-between w-full">
                     <div className="flex items-center justify-start gap-[4px]">
-                        <CalendarA />
+                        <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
+                            <CalendarA />
+                        </div>
                         <div className="flex items-center justify-start">
-                            <p className="text-[#616161] text-[16px] font-medium">تاریخ نوبت: </p>
-                            <p className="text-[#2F2F2F] text-[16px] font-medium mr-1">13 خرداد 1403</p>
+                            <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تاریخ نوبت: </p>
+                            <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">13 خرداد 1403</p>
                         </div>
                     </div>
                     <Button
                         className="!p-1 !flex !items-center !justify-end !gap-[2px]"
                         variant="text"
                     >
-                        <p className="!text-[#F17732] !text-[14px] !font-normal">تغییر </p>
-                        <ArrowLeftOrangeA />
+                        <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
+                        <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
+                            <ArrowLeftOrangeA />
+                        </div>
                     </Button>
                 </li>
                 <li className="flex items-center justify-between w-full">
                     <div className="flex items-center justify-start gap-[4px]">
-                        <ClockA />
+                        <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
+                            <ClockA />
+                        </div>
                         <div className="flex items-center justify-start">
-                            <p className="text-[#616161] text-[16px] font-medium">زمان نوبت: </p>
-                            <p className="text-[#2F2F2F] text-[16px] font-medium mr-1">ساعت 17:20</p>
+                            <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">زمان نوبت: </p>
+                            <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">ساعت 17:20</p>
                         </div>
                     </div>
                     <Button
                         className="!p-1 !flex !items-center !justify-end !gap-[2px]"
                         variant="text"
                     >
-                        <p className="!text-[#F17732] !text-[14px] !font-normal">تغییر </p>
-                        <ArrowLeftOrangeA />
+                        <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
+                        <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
+                            <ArrowLeftOrangeA />
+                        </div>
                     </Button>
                 </li>
             </ul>
-            <span className="mt-[28px] mb-[24px] w-full h-px bg-[#D7D7D7] block"></span>
-            <ul className="flex flex-col items-start justify-start gap-[24px]">
-                <li className="flex items-center justify-start gap-[8px]">
-                    <TickCircleOrange />
+            <span
+                className="mt-[10px] sm:mt-[16px] md:mt-[22px] lg:mt-[28px] 
+                mb-[8px] sm:mb-[13px] md:mb-[19px] lg:mb-[24px] 
+                w-full h-px bg-[#D7D7D7] block"
+            ></span>
+            <ul className="flex flex-col items-start justify-start gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
+                <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
+                    <div
+                        className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
+                        w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
+                    >
+                        <TickCircleOrange />
+                    </div>
                     <p className="text-[#616161] text-[16px] font-normal">فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.</p>
                 </li>
-                <li className="flex items-center justify-start gap-[8px]">
-                    <TickCircleOrange />
+                <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
+                    <div
+                        className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
+                        w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
+                    >
+                        <TickCircleOrange />
+                    </div>
                     <p className="text-[#616161] text-[16px] font-normal">لطفا به موقع در مطب حضور داشته باشید.</p>
                 </li>
             </ul>
diff --git a/components/account/detailDoctor/Head.js b/components/account/detailDoctor/Head.js
index 3f2db24..cf53aa6 100644
--- a/components/account/detailDoctor/Head.js
+++ b/components/account/detailDoctor/Head.js
@@ -2,16 +2,25 @@ import Image from "next/image"
 
 function Head({ doctor }) {
     return (
-        <div className="flex items-center justify-start gap-[16px] my-[24px]">
+        <div className="
+            flex items-center justify-start 
+            gap-[8px] sm:gap-[11px] md:gap-[14px] lg:gap-[16px] 
+            mt-[8px] sm:mt-[13px] md:mt-[19px] lg:mt-[24px]
+            mb-[12px] sm:mb-[19px] md:mb-[25px] lg:lg:mb-[32px]
+        ">
             <Image
+                className="
+                    w-[40px] sm:w-[58px] md:w-[77px] lg:w-[95px]
+                    h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px]
+                "
                 alt="profile doctor"
                 src={doctor.img}
                 height={95}
                 width={95}
             />
             <div className="flex flex-col items-start justify-center gap-[20px]">
-                <p className="text-[#3B3B3B] text-[20px] font-medium">{doctor.name}</p>
-                <p className="text-[#616161] text-[16px] font-medium">تخصص: {doctor.expertise}</p>
+                <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">{doctor.name}</p>
+                <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
             </div>
         </div>
     )
diff --git a/components/account/detailDoctor/index.js b/components/account/detailDoctor/index.js
index 30eab4d..43103cc 100644
--- a/components/account/detailDoctor/index.js
+++ b/components/account/detailDoctor/index.js
@@ -1,9 +1,14 @@
 import Detail from "./Detail"
 import Head from "./Head"
 
-function DetailDoctor({ doctor }) {
+function DetailDoctor({ doctor, typePay, isPay }) {
     return (
-        <div className="p-[24px] opacity-page w-[41%] rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
+        <div
+            className={`p-[24px] opacity-page w-full lg:w-[41%] rounded-[8px] border 
+                border-solid border-[#EFEFEF] bg-[#FFF] 
+                ${typePay === 'success' || typePay === 'failed' ? 'hidden md:block' : 'block'}
+            `}
+        >
             <p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
             <Head doctor={doctor} />
             <Detail doctor={doctor} />
diff --git a/components/account/index.js b/components/account/index.js
index 862477f..eca7718 100644
--- a/components/account/index.js
+++ b/components/account/index.js
@@ -1,15 +1,32 @@
+'use client';
+
+import { useState } from "react";
 import DetailDoctor from "./detailDoctor"
 import Information from "./information";
 
 function AccountPage({ doctor }) {
+
+    const [typePay, setTypePay] = useState('default');
+    const [isPay, setIsPay] = useState(false);
+
     return (
         <div
-            className="padding-responsive pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] 
-            md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]
-            flex items-start gap-[24px]"
+            className="padding-responsive pt-[76px] sm:pt-[114px] 
+            md:pt-[152px] lg:pt-[192px] flex-col lg:flex-row
+            flex items-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] 
+            pb-[99px] sm:pb-[129px] md:pb-[80px] lg:pb-[108px]"
         >
-            <DetailDoctor doctor={doctor} />
-            <Information />
+            <DetailDoctor
+                typePay={typePay}
+                doctor={doctor}
+                isPay={isPay}
+            />
+            <Information
+                isPay={isPay}
+                typePay={typePay}
+                setIsPay={setIsPay}
+                setTypePay={setTypePay}
+            />
         </div>
     )
 }
diff --git a/components/account/information/ButtonFixed.js b/components/account/information/ButtonFixed.js
new file mode 100644
index 0000000..948d5d1
--- /dev/null
+++ b/components/account/information/ButtonFixed.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+function ButtonFixed({ children }) {
+    return (
+        <div
+            className="!fixed md:!relative !bottom-0 !right-0 bg-[#FFF] border-0 border-t 
+        md:border-t-transparent border-[#D7D7D7]
+        !w-full sm:!w-full !p-[16px] sm:!px-[52px] md:!ml-0 md:!p-0 md:!w-full"
+        >
+            {children}
+        </div>
+    )
+}
+
+export default ButtonFixed
\ No newline at end of file
diff --git a/components/account/information/detail/Content.js b/components/account/information/detail/Content.js
index f6d97de..babc80d 100644
--- a/components/account/information/detail/Content.js
+++ b/components/account/information/detail/Content.js
@@ -1,11 +1,11 @@
 function Content({ isConfirmed, children, title }) {
   return (
-    <div className='flex w-full flex-col items-start justify-start gap-[16px]'>
-      <div className='flex min-h-[32px] items-center justify-start gap-[4px]'>
+    <div className='flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]'>
+      <div className='flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]'>
         <p className="text-[#525252] text-[14px] font-medium">{title}</p>
         {isConfirmed && (
           <p
-            className='py-[2px] px-[5px] leading-[28px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[12px] font-normal'
+            className='py-[4px] md:py-[2px] leading-[8px] sm:leading-[14px] md:leading-[21px] lg:leading-[28px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal'
           >تایید شده</p>
         )}
       </div>
diff --git a/components/account/information/detail/Form.js b/components/account/information/detail/Form.js
index a047649..c10d935 100644
--- a/components/account/information/detail/Form.js
+++ b/components/account/information/detail/Form.js
@@ -10,7 +10,8 @@ const bime = [
 
 function Form({ changeData, data, updateSelect, isForAnother }) {
     return (
-        <div className="grid mt-[20px] items-start justify-center gap-x-[24px] gap-y-[16px] grid-cols-2">
+        <div className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start 
+        justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2">
             <Content title='شماره موبایل' isConfirmed={isForAnother ? false : true}>
                 <EditField changeData={changeData} data={data.phone} name='phone' />
             </Content>
diff --git a/components/account/information/detail/index.js b/components/account/information/detail/index.js
index e02f9f6..c376bf4 100644
--- a/components/account/information/detail/index.js
+++ b/components/account/information/detail/index.js
@@ -3,6 +3,7 @@ import Form from "./Form";
 import { Button } from "@mui/material";
 import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
 import ArrowLeftB from "@/components/icons/ArrowLeftB";
+import ButtonFixed from "../ButtonFixed";
 
 function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) {
 
@@ -40,7 +41,7 @@ function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) {
             />
             {!isForAnother && (
                 <Button
-                    className="!flex !items-center !justify-start !gap-[8px] !mt-[24px] !p-1"
+                    className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
                     onClick={() => {
                         fadeElement(() => setIsForAnother(true))
                         setData({
@@ -54,16 +55,19 @@ function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) {
                     <p className="text-[#5559CE] text-[16px] font-medium">دریافت نوبت برای فرد دیگر </p>
                 </Button>
             )}
-            <Button
-                className={`
-                    !gap-[4px] !mr-auto !flex !px-[12px] !py-[8px] !min-w-[150px] 
-                    ${isForAnother ? '!mt-[94px]' : '!mt-[32px]'}`}
-                variant="contained"
-                onClick={() => fadeElement(() => setIsPay(true))}
-            >
-                <p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
-                <ArrowLeftB />
-            </Button>
+            <ButtonFixed>
+                <Button
+                    className={`
+                    !flex !w-full md:!w-fit
+                    !gap-[4px] md:!mr-auto !px-[12px] !py-[8px] !min-w-[150px]
+                    ${isForAnother ? '!mt-0 md:!mt-[94px]' : '!mt-0 md:!mt-[32px]'}`}
+                    variant="contained"
+                    onClick={() => fadeElement(() => setIsPay(true))}
+                >
+                    <p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
+                    <ArrowLeftB />
+                </Button>
+            </ButtonFixed>
         </>
     )
 }
diff --git a/components/account/information/index.js b/components/account/information/index.js
index bdaf526..701e1c4 100644
--- a/components/account/information/index.js
+++ b/components/account/information/index.js
@@ -1,14 +1,10 @@
-'use client';
-
 import { useState } from "react";
-import Detail from "./detail";
 import Payment from "./payment";
+import Detail from "./detail";
 
-function Information() {
+function Information({ typePay, setTypePay, setIsPay, isPay }) {
 
-    const [isForAnother, setIsForAnother] = useState(false)
-    const [typePay, setTypePay] = useState('success');
-    const [isPay, setIsPay] = useState(true);
+    const [isForAnother, setIsForAnother] = useState(false);
     const [fade, setFade] = useState(false);
 
     const fadeElement = (func) => {
@@ -24,8 +20,9 @@ function Information() {
 
     return (
         <div
-            className={`w-[59%] opacity-page p-[24px] bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]
-            `}
+            className={`w-full lg:w-[59%] opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
+            rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]
+            ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}`}
         >
             <div className={`transition-opacity !duration-300 ease-in ${fade ? '!opacity-0' : '!opacity-100'}`}>
                 {isPay ?
diff --git a/components/account/information/payment/FailedPay.js b/components/account/information/payment/FailedPay.js
index 158f2f4..7cbe490 100644
--- a/components/account/information/payment/FailedPay.js
+++ b/components/account/information/payment/FailedPay.js
@@ -8,9 +8,9 @@ function FailedPay({ setTypePay, setIsPay, fadeElement }) {
         <div className="mt-[7px]">
             <div className="flex flex-col justify-center items-center gap-[14px]">
                 <InfoCircleRedA />
-                <p className="text-[#D32F2F] text-[20px] font-bold">پرداخت شما انجام نشد.</p>
+                <p className="text-[#D32F2F] text-[16px] md:text-[18px] lg:text-[20px] font-bold">پرداخت شما انجام نشد.</p>
             </div>
-            <div className="flex mt-[24px] items-center justify-center gap-[24px]">
+            <div className="flex mt-[32px] sm:mt-[29px] md:mt-[27px] lg:mt-[24px] items-center justify-center gap-[24px]">
                 <Button
                     variant="outlined"
                     onClick={() => fadeElement(() => setIsPay(false))}
diff --git a/components/account/information/payment/Paying.js b/components/account/information/payment/Paying.js
index 5154f1f..5899682 100644
--- a/components/account/information/payment/Paying.js
+++ b/components/account/information/payment/Paying.js
@@ -1,28 +1,31 @@
 import ArrowLeftB from '@/components/icons/ArrowLeftB';
 import { Button } from '@mui/material';
+import ButtonFixed from '../ButtonFixed';
 
 function Paying({ setTypePay, fadeElement }) {
     return (
         <>
-            <p className="text-[#3B3B3B] text-[20px] font-bold">
+            <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
                 اطلاعات پرداخت
             </p>
-            <div className='flex justify-between items-center mt-[30px]'>
-                <p className='text-[#616161] tet-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
-                <p className='text-[#525252] text-[16px] font-bold'>20،000 تومان</p>
-            </div>
-            <span className='bg-[#D7D7D7] h-px w-full mt-[32px] mb-[25px] block'></span>
-            <div className='flex items-center justify-between'>
-                <p className='text-[#3B3B3B] text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
-                <Button
-                    className='!gap-[4px] !mr-auto !flex !px-[12px] !py-[9px] !min-w-[157px]'
-                    onClick={() => fadeElement(() => setTypePay('success'))}
-                    variant="contained"
-                >
-                    <p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
-                    <ArrowLeftB />
-                </Button>
+            <div className='flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]'>
+                <p className='text-[#616161] text-[14px] md:text-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
+                <p className='text-[#525252] text-[14px] md:text-[16px] font-bold'>20،000 تومان</p>
             </div>
+            <span className='bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]'></span>
+            <ButtonFixed>
+                <div className='flex items-center justify-between gap-2'>
+                    <p className='text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
+                    <Button
+                        className='!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]'
+                        onClick={() => fadeElement(() => setTypePay('success'))}
+                        variant="contained"
+                    >
+                        <p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
+                        <ArrowLeftB />
+                    </Button>
+                </div>
+            </ButtonFixed>
         </>
     )
 }
diff --git a/components/account/information/payment/SuccessPay.js b/components/account/information/payment/SuccessPay.js
index 462e561..03b576c 100644
--- a/components/account/information/payment/SuccessPay.js
+++ b/components/account/information/payment/SuccessPay.js
@@ -9,7 +9,19 @@ function SuccessPay() {
                 <TickCircleGreenA />
                 <p className="text-[#3B3B3B] text-[20px] font-bold">پرداخت شما با موفقیت انجام شد.</p>
             </div>
-            <p className="text-[#3B3B3B] text-[16px] font-normal mt-[32px] mb-[16px]">برای نمایش نوبت ها به قسمت نوبت های من بروید.  </p>
+            <p
+                className="text-[#3B3B3B] text-[16px] font-normal 
+                mt-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px] 
+                mb-[24px] md:mb-[16px]"
+            >برای نمایش نوبت ها به قسمت نوبت های من بروید.  </p>
+            <div className="flex w-full md:hidden flex-col justify-center items-center mb-[32px]">
+                <span className="w-full block h-px bg-[#EFEFEF]"></span>
+                <div className="flex items-center justify-between my-[20px]">
+                    <p className="text-[#616161] text-[14px] font-medium">مقدار پرداخت شده: </p>
+                    <p className="text-[#05BA58] text-[14px] font-bold">20،000 تومان</p>
+                </div>
+                <span className="w-full block h-px bg-[#EFEFEF]"></span>
+            </div>
             <Button
                 variant="text"
                 className="!flex !items-center !justify-center !gap-[4px]"
diff --git a/components/booking/date/PlaceVisit.js b/components/booking/date/PlaceVisit.js
index 11bb1b7..d3c1b89 100644
--- a/components/booking/date/PlaceVisit.js
+++ b/components/booking/date/PlaceVisit.js
@@ -17,7 +17,7 @@ function PlaceVisit() {
 
     return (
         <div className="flex flex-col items-start gap-[19px] justify-start">
-            <p className="text-[#3B3B3B] text-[16px] font-bold">1. انتخاب محل ویزیت</p>
+            <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">1. انتخاب محل ویزیت</p>
             <AutoCompleteSelect
                 updateData={updateData}
                 label='درمانگاه'
diff --git a/components/booking/date/Time/SelectDatePicker.js b/components/booking/date/Time/SelectDatePicker.js
index 9acde85..0d595e6 100644
--- a/components/booking/date/Time/SelectDatePicker.js
+++ b/components/booking/date/Time/SelectDatePicker.js
@@ -2,9 +2,7 @@ import DatePicker from "@/app/component/date/datePicker"
 
 function SelectDatePicker() {
     return (
-        <div>
-            <DatePicker />
-        </div>
+        <DatePicker />
     )
 }
 
diff --git a/components/booking/date/Time/index.js b/components/booking/date/Time/index.js
index c0ec69f..88d423a 100644
--- a/components/booking/date/Time/index.js
+++ b/components/booking/date/Time/index.js
@@ -3,7 +3,7 @@ import SelectDatePicker from "./SelectDatePicker"
 function Time() {
     return (
         <div className="flex mt-[24px] flex-col items-start gap-[19px] justify-start">
-            <p className="text-[#3B3B3B] text-[16px] font-bold">2. انتخاب روز</p>
+            <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">2. انتخاب روز</p>
             <SelectDatePicker />
         </div>
     )
diff --git a/components/booking/date/hour/index.js b/components/booking/date/hour/index.js
index 98dfb9e..dd61901 100644
--- a/components/booking/date/hour/index.js
+++ b/components/booking/date/hour/index.js
@@ -3,7 +3,7 @@ import DateTime from "@/app/component/date/dateTime"
 function Hour({ doctor }) {
     return (
         <div className="flex mt-[24px] flex-col items-start gap-[12px] justify-start">
-            <p className="text-[#3B3B3B] text-[16px] font-bold">3. انتخاب ساعت</p>
+            <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">3. انتخاب ساعت</p>
             <DateTime
                 doctor={doctor}
             />
diff --git a/components/booking/date/index.js b/components/booking/date/index.js
index e712fb5..02b7555 100644
--- a/components/booking/date/index.js
+++ b/components/booking/date/index.js
@@ -4,7 +4,7 @@ import Time from "./Time"
 
 function Date({ doctor }) {
     return (
-        <div className="p-[24px] w-[61%] rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
+        <div className="p-0 lg:p-[24px] w-full lg:w-[61%] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] bg-transparent lg:bg-[#FFF]">
             <PlaceVisit />
             <Time />
             <Hour doctor={doctor} />
diff --git a/components/booking/detail/Address.js b/components/booking/detail/Address.js
index 9a794a0..dc63e0e 100644
--- a/components/booking/detail/Address.js
+++ b/components/booking/detail/Address.js
@@ -2,13 +2,13 @@ import React from 'react'
 
 function Address({ doctor }) {
     return (
-        <ul className='mt-[4px] flex flex-col'>
+        <ul className='hidden mt-[4px] lg:flex flex-col'>
             {doctor.address.map((item, idx) => (
                 <li
                     key={idx}
                 >
-                    <div className='flex py-[12px] text-[#616161] text-[14px] items-center justify-start'>
-                        <p className='font-bold'>{`${item.name}: `}</p>
+                    <div className='flex py-[12px] text-[#616161] text-[14px] items-start justify-start'>
+                        <p className='font-bold min-w-[115px]'>{`${item.name}: `}</p>
                         <p className='font-normal'>{item.location}</p>
                     </div>
                     {doctor.address.length > idx + 1 && (
diff --git a/components/booking/detail/Head.js b/components/booking/detail/Head.js
index aaba32e..acc6d4e 100644
--- a/components/booking/detail/Head.js
+++ b/components/booking/detail/Head.js
@@ -5,14 +5,18 @@ function Head({ doctor }) {
     return (
         <div className="flex items-center justify-start gap-[12px]">
             <Image
+                className='
+                    w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
+                    h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
+                '
                 src={doctor.img}
                 alt="profile"
                 height={56}
                 width={56}
             />
-            <div className="flex flex-col items-center justify-start gap-[8px]">
-                <p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
-                <p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
+            <div className="flex flex-col items-start justify-start gap-[8px]">
+                <p className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">{doctor.name}</p>
+                <p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {doctor.expertise}</p>
             </div>
         </div>
     )
diff --git a/components/booking/detail/index.js b/components/booking/detail/index.js
index d0f6b10..7f302c3 100644
--- a/components/booking/detail/index.js
+++ b/components/booking/detail/index.js
@@ -3,12 +3,13 @@ import Head from "./Head";
 
 function Detail({ doctor }) {
     return (
-        <div className="h-screen w-[39%]">
+        <div className="h-fit lg:h-screen w-full lg:w-[39%]">
             <div
-                className="p-[16px] sticky rounded-[8px] bg-[#FFF] border border-solid border-[#EFEFEF]
+                className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
                 top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]"
             >
                 <Head doctor={doctor} />
+                <span className="block w-full bg-[#EFEFEF] h-px my-[16px]"></span>
                 <Address doctor={doctor} />
             </div>
         </div>
diff --git a/components/booking/index.js b/components/booking/index.js
index 01e3122..e55d9b0 100644
--- a/components/booking/index.js
+++ b/components/booking/index.js
@@ -4,7 +4,7 @@ import Detail from "./detail";
 function BookingPage({ doctor }) {
     return (
         <div
-            className="flex justify-center gap-[24px] padding-responsive
+            className="flex flex-col lg:flex-row justify-center gap-0 lg:gap-[24px] padding-responsive
             items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]">
             <Detail doctor={doctor} />
             <Date doctor={doctor} />
diff --git a/components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js b/components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js
index 13b2ef2..59e153f 100644
--- a/components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js
+++ b/components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js
@@ -3,7 +3,7 @@ import { CircularProgress } from "@mui/material"
 
 function ProgressAll({ doctor }) {
     return (
-        <div className="hidden lg:flex w-full h-fit relative">
+        <div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
             <CircularProgress
                 variant="determinate"
                 value={doctor.total_user_satisfaction}
diff --git a/components/doctor/detailDoctor/cards/comments/chart/index.js b/components/doctor/detailDoctor/cards/comments/chart/index.js
index 750abc0..3bc2de0 100644
--- a/components/doctor/detailDoctor/cards/comments/chart/index.js
+++ b/components/doctor/detailDoctor/cards/comments/chart/index.js
@@ -31,7 +31,7 @@ function Chart({ doctor }) {
                     <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
                 </div>
             </div>
-            <div className="flex items-center justify-center gap-[50px]">
+            <div className="flex flex-wrap items-center justify-center gap-[50px]">
                 <ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
                     {doctor.progress_detail.map((item, idx) => (
                         <ProgressDetail
diff --git a/components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js b/components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js
index b638158..40a72e3 100644
--- a/components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js
+++ b/components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js
@@ -2,14 +2,16 @@
 
 import { useState } from "react";
 import { styleDefault } from "@/mui";
-import { Box, Button, Modal, Rating, TextField } from "@mui/material";
+import { Box, Button, Modal, Rating, Slider } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
-import ProgressDetail from "@/app/component/ProfressDetail";
 import Field from "@/app/component/Field";
+import ArrowLeftD from "@/components/icons/ArrowLeftD";
+import ProgressChange from "@/app/component/ProgressChange";
+import Link from "next/link";
 
 function ModalAnswer({ doctor }) {
 
-    const [open, setOpen] = useState(true);
+    const [open, setOpen] = useState(false);
     const handleOpen = () => setOpen(true);
     const handleClose = () => setOpen(false);
 
@@ -18,7 +20,8 @@ function ModalAnswer({ doctor }) {
             <Button
                 variant='outlined'
                 onClick={handleOpen}
-                className='!py-2 md:!py-2.5 !px-[16px] sm:!px-[23px] md:!px-[29px] lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full'
+                className='!py-2 md:!py-2.5 !px-[16px] sm:!px-[23px] md:!px-[29px] 
+                lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full md:!w-fit'
             >ثبت نظر</Button>
             <Modal
                 open={open}
@@ -26,9 +29,12 @@ function ModalAnswer({ doctor }) {
             >
                 <Box
                     sx={styleDefault}
-                    className="!w-full !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[13px] !pb-[30px]"
+                    className="!w-full !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[13px] !pb-[30px] !rounded-none md:!rounded-lg"
                 >
-                    <div className="w-full flex justify-end">
+                    <div
+                        className="w-full flex justify-end cursor-pointer"
+                        onClick={handleClose}
+                    >
                         <CloseModalD />
                     </div>
                     <p className="text-[16px]">امتیاز شما به دکتر مهران امینی</p>
@@ -43,7 +49,7 @@ function ModalAnswer({ doctor }) {
                     />
                     <ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
                         {doctor.progress_detail.map((item, idx) => (
-                            <ProgressDetail
+                            <ProgressChange
                                 data={item}
                                 key={idx}
                             />
@@ -56,6 +62,20 @@ function ModalAnswer({ doctor }) {
                             multiline={true}
                             title='نظر خود را بنویسید...'
                         />
+                        <Link
+                            href={`/booking/${doctor.id}`}
+                            className="!mr-auto"
+                        >
+                            <Button
+                                variant='contained'
+                                className='!py-2.5 !px-4 gap-1 !text-[14px] !font-medium !mt-[32px]'
+                            >
+                                دریافت نوبت
+                                <div className='w-[20px] h-[20px]'>
+                                    <ArrowLeftD />
+                                </div>
+                            </Button>
+                        </Link>
                     </div>
                 </Box>
             </Modal>
diff --git a/components/icons/ArrowLeftWD.js b/components/icons/ArrowLeftWD.js
new file mode 100644
index 0000000..3dd8809
--- /dev/null
+++ b/components/icons/ArrowLeftWD.js
@@ -0,0 +1,10 @@
+function ArrowLeftWD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
+            <path d="M7.97533 5.44167L2.91699 10.5L7.97533 15.5583" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M17.0836 10.5H3.05859" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowLeftWD
\ No newline at end of file
diff --git a/components/icons/TickCircleOrange.js b/components/icons/TickCircleOrange.js
index a0da291..e88a0b4 100644
--- a/components/icons/TickCircleOrange.js
+++ b/components/icons/TickCircleOrange.js
@@ -1,6 +1,6 @@
 function TickCircleOrange() {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
             <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
             <path d="M7.75 12L10.58 14.83L16.25 9.16998" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
diff --git a/package-lock.json b/package-lock.json
index 9f1fa75..0d8a20b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@emotion/cache": "^11.11.0",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
+        "@material-ui/core": "^4.11.2",
         "@mui/material": "^5.14.17",
         "@mui/styled-engine-sc": "^6.0.0-alpha.18",
         "aos": "^2.3.4",
@@ -19,7 +20,7 @@
         "jalaali-react-date-picker": "^1.0.18",
         "next": "14.2.3",
         "npm": "^10.8.2",
-        "react": "^18",
+        "react": "^18.0.0",
         "react-dom": "^18",
         "styled-components": "^6.1.11",
         "swiper": "^11.1.9"
@@ -2552,26 +2553,26 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
-      "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz",
+      "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.0"
+        "@floating-ui/utils": "^0.2.7"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
-      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+      "version": "1.6.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz",
+      "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==",
       "dependencies": {
-        "@floating-ui/core": "^1.0.0",
-        "@floating-ui/utils": "^0.2.0"
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.7"
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
-      "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
+      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
       "dependencies": {
         "@floating-ui/dom": "^1.0.0"
       },
@@ -2581,9 +2582,9 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
-      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
+      "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
@@ -3312,6 +3313,165 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
     },
+    "node_modules/@material-ui/core": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.2.tgz",
+      "integrity": "sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==",
+      "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.",
+      "dependencies": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.11.2",
+        "@material-ui/system": "^4.11.2",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0",
+        "react-transition-group": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/material-ui"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@material-ui/core/node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "node_modules/@material-ui/core/node_modules/@material-ui/styles": {
+      "version": "4.11.5",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
+      "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
+      "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.",
+      "dependencies": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "5.1.0",
+        "@material-ui/utils": "^4.11.3",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.5.1",
+        "jss-plugin-camel-case": "^10.5.1",
+        "jss-plugin-default-unit": "^10.5.1",
+        "jss-plugin-global": "^10.5.1",
+        "jss-plugin-nested": "^10.5.1",
+        "jss-plugin-props-sort": "^10.5.1",
+        "jss-plugin-rule-value-function": "^10.5.1",
+        "jss-plugin-vendor-prefixer": "^10.5.1",
+        "prop-types": "^15.7.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/material-ui"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@material-ui/core/node_modules/@material-ui/system": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
+      "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
+      "dependencies": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.3",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/material-ui"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@material-ui/core/node_modules/@material-ui/utils": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
+      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
+      "dependencies": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
+    "node_modules/@material-ui/core/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@material-ui/core/node_modules/csstype": {
+      "version": "2.6.21",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+    },
+    "node_modules/@material-ui/core/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
+    "node_modules/@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
+      "peerDependencies": {
+        "@types/react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-beta.23",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.23.tgz",
@@ -6892,6 +7052,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "node_modules/css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -9881,6 +10050,11 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw=="
+    },
     "node_modules/i": {
       "version": "0.3.7",
       "resolved": "https://registry.npmjs.org/i/-/i-0.3.7.tgz",
@@ -10244,6 +10418,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -12719,6 +12898,88 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jss": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
+      "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/jss"
+      }
+    },
+    "node_modules/jss-plugin-camel-case": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
+      "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.10.0"
+      }
+    },
+    "node_modules/jss-plugin-default-unit": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz",
+      "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0"
+      }
+    },
+    "node_modules/jss-plugin-global": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
+      "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0"
+      }
+    },
+    "node_modules/jss-plugin-nested": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz",
+      "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "node_modules/jss-plugin-props-sort": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz",
+      "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0"
+      }
+    },
+    "node_modules/jss-plugin-rule-value-function": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz",
+      "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "node_modules/jss-plugin-vendor-prefixer": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz",
+      "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.10.0"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -16226,6 +16487,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -17666,9 +17932,9 @@
       }
     },
     "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
+      "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -20009,6 +20275,11 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
diff --git a/package.json b/package.json
index 364476f..03dd6fe 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@material-ui/core": "^4.11.2",
     "@mui/material": "^5.14.17",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "aos": "^2.3.4",
@@ -20,7 +21,7 @@
     "jalaali-react-date-picker": "^1.0.18",
     "next": "14.2.3",
     "npm": "^10.8.2",
-    "react": "^18",
+    "react": "^18.0.0",
     "react-dom": "^18",
     "styled-components": "^6.1.11",
     "swiper": "^11.1.9"