diff --git a/app/booking/[slug]/page.js b/app/booking/[slug]/page.js
index fe22e62..814ce01 100644
--- a/app/booking/[slug]/page.js
+++ b/app/booking/[slug]/page.js
@@ -1,70 +1,11 @@
-"use client";
-
-import { useState } from "react";
-
-import Layout from "@/components/layout";
-import doctors from "@/data/doctors.json";
-import Date from "@/components/booking/date";
 import BookingPage from "@/components/booking";
-import RegisterPage from "@/components/register";
-import Paying from "@/components/booking/paying";
-import Detail from "@/components/booking/detail";
-import FailedPay from "@/components/booking/failedPay";
-import LogInPage from "@/components/register/LogInPage";
-import SuccessPay from "@/components/booking/successPay";
-import SetCodePage from "@/components/register/SetCodePage";
+import { getStateInfo } from "@/lib/getStateInfo";
 
 function Booking({ params: { slug } }) {
-  const doctor = doctors.find((item) => item.id === +slug);
-
-  const [step, setStep] = useState(0);
-  const [isForAnother, setIsForAnother] = useState(false);
-
-  const [data, setData] = useState({
-    phone: { value: "09121056987", isEdit: true },
-    codemeli: { value: "1741025645", isEdit: true },
-    name: { value: "ساغر صابری نژاد", isEdit: true },
-  });
-
-  const elements = [
-    <Date doctor={doctor} setStep={setStep} />,
-    <LogInPage setIsSendMsg={false} setStep={setStep} />,
-    <SetCodePage setIsSendMsg={false} link={false} setStep={setStep} />,
-    <Detail
-      isForAnother={isForAnother}
-      setIsForAnother={setIsForAnother}
-      setStep={setStep}
-      data={data}
-      setData={setData}
-    />,
-    <Paying setStep={setStep} />,
-    <SuccessPay setStep={setStep} />,
-    <FailedPay setStep={setStep} />,
-  ];
+  const { matchedCity } = getStateInfo();
 
   return (
-    <>
-      {step === 1 || step === 2 ? (
-        <RegisterPage>{elements[step]}</RegisterPage>
-      ) : (
-        <Layout
-          title="رزرو"
-          name="booking"
-          disableFooter={step > 2}
-          paddingBottom="pb-[80px]"
-        >
-          <BookingPage
-            disableSide={step === 5 || step === 6}
-            isFirst={step === 0}
-            setStep={setStep}
-            doctor={doctor}
-            step={step}
-          >
-            {elements[step]}
-          </BookingPage>
-        </Layout>
-      )}
-    </>
+    <BookingPage slug={slug} matchedCity={matchedCity} />
   );
 }
 
diff --git a/app/component/date/datePicker/NextIconDatePicker.js b/app/component/date/datePicker/NextIconDatePicker.js
index da8d6ad..bb5937f 100644
--- a/app/component/date/datePicker/NextIconDatePicker.js
+++ b/app/component/date/datePicker/NextIconDatePicker.js
@@ -11,6 +11,7 @@ function NextIconDatePicker({ nextIconDatePicker }) {
       <Image
         src="/assets/icons/arrow-right.svg"
         className="icon-left-datepicker"
+        alt="arrow"
         height={24}
         width={24}
       />
diff --git a/app/component/date/datePicker/PrevIconDatePicker.js b/app/component/date/datePicker/PrevIconDatePicker.js
index 5580c75..61398ef 100644
--- a/app/component/date/datePicker/PrevIconDatePicker.js
+++ b/app/component/date/datePicker/PrevIconDatePicker.js
@@ -11,6 +11,7 @@ function PrevIconDatePicker({ prevIconDatePicker }) {
       <Image
         src="/assets/icons/arrow-right.svg"
         className="icon-left-datepicker"
+        alt="arrow"
         height={24}
         width={24}
       />
diff --git a/components/booking/Content.js b/components/booking/Content.js
new file mode 100644
index 0000000..eb61109
--- /dev/null
+++ b/components/booking/Content.js
@@ -0,0 +1,32 @@
+import Information from "./information";
+import Location from "./location";
+
+function Content({
+    doctor,
+    step,
+    setStep,
+    children,
+    isFirst,
+    disableSide,
+}) {
+    return (
+        <div
+            className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] 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)]"
+        >
+            {isFirst ? (
+                <Location disableSide={disableSide} doctor={doctor} />
+            ) : (
+                <Information
+                    disableSide={disableSide}
+                    doctor={doctor}
+                    step={step}
+                    setStep={setStep}
+                />
+            )}
+            {children}
+        </div>
+    );
+}
+
+export default Content;
diff --git a/components/booking/index.js b/components/booking/index.js
index 8dad4de..8f48411 100644
--- a/components/booking/index.js
+++ b/components/booking/index.js
@@ -1,31 +1,71 @@
-import Information from "./information";
-import Location from "./location";
+"use client";
+
+import { useState } from "react";
+
+import Content from "./Content";
+import Layout from "@/components/layout";
+import doctors from "@/data/doctors.json";
+import Date from "@/components/booking/date";
+import RegisterPage from "@/components/register";
+import Paying from "@/components/booking/paying";
+import Detail from "@/components/booking/detail";
+import FailedPay from "@/components/booking/failedPay";
+import LogInPage from "@/components/register/LogInPage";
+import SuccessPay from "@/components/booking/successPay";
+import SetCodePage from "@/components/register/SetCodePage";
+
+function BookingPage({ slug, matchedCity }) {
+  const doctor = doctors.find((item) => item.id === +slug);
+
+  const [step, setStep] = useState(0);
+  const [isForAnother, setIsForAnother] = useState(false);
+
+  const [data, setData] = useState({
+    phone: { value: "09121056987", isEdit: true },
+    codemeli: { value: "1741025645", isEdit: true },
+    name: { value: "ساغر صابری نژاد", isEdit: true },
+  });
+
+  const elements = [
+    <Date doctor={doctor} setStep={setStep} />,
+    <LogInPage setIsSendMsg={false} setStep={setStep} />,
+    <SetCodePage setIsSendMsg={false} link={false} setStep={setStep} />,
+    <Detail
+      isForAnother={isForAnother}
+      setIsForAnother={setIsForAnother}
+      setStep={setStep}
+      data={data}
+      setData={setData}
+    />,
+    <Paying setStep={setStep} />,
+    <SuccessPay setStep={setStep} />,
+    <FailedPay setStep={setStep} />,
+  ];
 
-function BookingPage({
-  doctor,
-  step,
-  setStep,
-  children,
-  isFirst,
-  disableSide,
-}) {
   return (
-    <div
-      className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] 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)]"
-    >
-      {isFirst ? (
-        <Location disableSide={disableSide} doctor={doctor} />
+    <>
+      {step === 1 || step === 2 ? (
+        <RegisterPage>{elements[step]}</RegisterPage>
       ) : (
-        <Information
-          disableSide={disableSide}
-          doctor={doctor}
-          step={step}
-          setStep={setStep}
-        />
+        <Layout
+          title="رزرو"
+          name="booking"
+          disableFooter={step > 2}
+          matchedCity={matchedCity}
+          paddingBottom="pb-[80px]"
+        >
+          <Content
+            disableSide={step === 5 || step === 6}
+            isFirst={step === 0}
+            setStep={setStep}
+            doctor={doctor}
+            step={step}
+          >
+            {elements[step]}
+          </Content>
+        </Layout>
       )}
-      {children}
-    </div>
+    </>
   );
 }
 
diff --git a/components/layout/index.js b/components/layout/index.js
index 0eceaa6..6e9fb29 100644
--- a/components/layout/index.js
+++ b/components/layout/index.js
@@ -6,7 +6,6 @@ function Layout({
   children,
   isTurnsDetails,
   setIsTurnsDetails,
-  title,
   name,
   isOpenSide,
   setIsOpenSide,