diff --git a/app/component/date/datePicker/index.js b/app/component/date/datePicker/index.js
index 3d1ad35..dde70e8 100644
--- a/app/component/date/datePicker/index.js
+++ b/app/component/date/datePicker/index.js
@@ -1,128 +1,70 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
-import FirstDatePicker from "./date/FirstDatePicker";
-import SecondDatePicker from "./date/SecondDatePicker";
-import { dateToTimestamp } from "@/helper";
+import { useEffect, useState } from "react";
 import moment from "moment-jalaali";
 import "moment-timezone";
+import { dateToTimestamp } from "@/helper";
+import InlineJalaliMonth from "@/components/common/InlineJalaliMonth";
 
 function DatePicker({ setDate, disabledDates = [] }) {
-  const nextIconDatePickerF = useRef();
-  const prevIconDatePickerF = useRef();
-  const nextIconDatePickerS = useRef();
-  const prevIconDatePickerS = useRef();
-
-  const [startDate, setStartDate] = useState(null);
-  const [endDate, setEndDate] = useState();
-  const [loading, setLoading] = useState(true);
+  const [baseMonth, setBaseMonth] = useState(moment().tz("Asia/Tehran"));
+  const [selectedDate, setSelectedDate] = useState(null);
   const [autoSelected, setAutoSelected] = useState(false);
 
-  const handleStartDateChange = (date, e) => {
-    if (date) {
-      setDate(dateToTimestamp(date));
-      setEndDate(null);
-      setStartDate(date);
-    }
+  const isDisabled = (date) => {
+    const day = moment(date).startOf("day");
+    if (day.isBefore(moment().startOf("day"))) return true;
+    return disabledDates.some((ts) => day.isSame(moment.unix(ts).startOf("day")));
   };
 
-  const handleEndDateChange = (date) => {
-    if (date) {
-      setDate(dateToTimestamp(date));
-      setEndDate(date);
-      setStartDate(null);
-    }
-  };
-
-
-  const handleDisableDate = (e) => {
-    const date = moment(e).startOf("day");
-    const today = moment().startOf("day");
-
-    if (date.isBefore(today)) return true;
-
-    if (
-      disabledDates.some((ts) => date.isSame(moment.unix(ts).startOf("day")))
-    ) {
-      return true;
-    }
-
-    return false;
+  const selectDay = (date) => {
+    if (isDisabled(date)) return;
+    setSelectedDate(date);
+    setDate(dateToTimestamp(date));
   };
 
   useEffect(() => {
-    // تنظیم loading به false بعد از یک تاخیر کوتاه
-    setTimeout(() => {
-      setLoading(false);
-    }, 1000);
+    if (autoSelected) return;
 
-    if (nextIconDatePickerS.current) {
-      nextIconDatePickerS.current.click();
-    }
-  }, [nextIconDatePickerS, disabledDates]);
-
-  // انتخاب خودکار امروز یا نزدیک‌ترین روز قابل انتخاب
-  useEffect(() => {
-    if (!loading && !autoSelected && disabledDates) {
-      const today = moment().tz("Asia/Tehran");
-      const todayTimestamp = moment().tz("Asia/Tehran").startOf("day").unix();
-
-      // بررسی اینکه امروز قابل انتخاب است یا نه
-      const isTodayDisabled = disabledDates.some((ts) =>
-        moment.unix(ts).startOf("day").isSame(today.startOf("day"))
-      );
-
-      if (!isTodayDisabled) {
-        // امروز قابل انتخاب است
-        setStartDate(today);
-        setDate(todayTimestamp);
+    const today = moment().tz("Asia/Tehran");
+    for (let i = 0; i <= 30; i++) {
+      const candidate = today.clone().add(i, "days");
+      if (!isDisabled(candidate)) {
+        setSelectedDate(candidate);
+        setBaseMonth(candidate.clone());
+        setDate(candidate.clone().startOf("day").unix());
         setAutoSelected(true);
-      } else {
-        // پیدا کردن نزدیک‌ترین روز قابل انتخاب
-        let nearestDate = null;
-        let daysToCheck = 30; // بررسی 30 روز آینده
-
-        for (let i = 1; i <= daysToCheck; i++) {
-          const futureDate = moment().tz("Asia/Tehran").add(i, "days");
-          const futureDateTimestamp = futureDate.clone().startOf("day").unix();
-
-          const isFutureDateDisabled = disabledDates.some((ts) =>
-            moment.unix(ts).startOf("day").isSame(futureDate.startOf("day"))
-          );
-
-          if (!isFutureDateDisabled) {
-            nearestDate = futureDate;
-            setStartDate(futureDate);
-            setDate(futureDateTimestamp);
-            setAutoSelected(true);
-            break;
-          }
-        }
+        break;
       }
     }
-  }, [loading, disabledDates, autoSelected, setDate]);
+  }, [disabledDates, autoSelected, setDate]);
+
+  const secondMonth = moment(baseMonth).add(1, "jMonth");
 
   return (
-    <div className="datePickerApt flex items-start custom-datepicker justify-evenly w-full">
-      <FirstDatePicker
-        loading={loading}
-        startDate={startDate}
-        disableDates={disabledDates}
-        handleDisableDate={handleDisableDate}
-        nextIconDatePickerF={nextIconDatePickerF}
-        prevIconDatePickerF={prevIconDatePickerF}
-        prevIconDatePickerS={prevIconDatePickerS}
-        handleStartDateChange={handleStartDateChange}
-      />
-      <SecondDatePicker
-        loading={loading}
-        endDate={endDate}
-        handleDisableDate={handleDisableDate}
-        nextIconDatePickerF={nextIconDatePickerF}
-        nextIconDatePickerS={nextIconDatePickerS}
-        prevIconDatePickerS={prevIconDatePickerS}
-        handleEndDateChange={handleEndDateChange}
-      />
+    <div className="datePickerApt flex items-start justify-evenly gap-[24px] w-full">
+      <div className="hidden md:block lg:hidden xl:block w-1/2">
+        <InlineJalaliMonth
+          displayDate={secondMonth}
+          selectedDate={selectedDate}
+          onSelectDay={selectDay}
+          isDisabled={isDisabled}
+          showPrev={false}
+          onNext={() => setBaseMonth(moment(baseMonth).add(1, "jMonth"))}
+          onPrev={() => setBaseMonth(moment(baseMonth).subtract(1, "jMonth"))}
+        />
+      </div>
+      <div className="w-full lg:w-1/2">
+        <InlineJalaliMonth
+          displayDate={baseMonth}
+          selectedDate={selectedDate}
+          onSelectDay={selectDay}
+          isDisabled={isDisabled}
+          showNext={false}
+          onPrev={() => setBaseMonth(moment(baseMonth).subtract(1, "jMonth"))}
+          onNext={() => setBaseMonth(moment(baseMonth).add(1, "jMonth"))}
+        />
+      </div>
     </div>
   );
 }
diff --git a/components/common/InlineJalaliMonth.js b/components/common/InlineJalaliMonth.js
new file mode 100644
index 0000000..439bdb1
--- /dev/null
+++ b/components/common/InlineJalaliMonth.js
@@ -0,0 +1,118 @@
+"use client";
+
+import moment from "moment-jalaali";
+
+moment.loadPersian({ dialect: "persian-modern", usePersianDigits: false });
+
+const WEEKDAYS = ["شنبه", "۱ شنبه", "۲ شنبه", "۳ شنبه", "۴ شنبه", "۵ شنبه", "جمعه"];
+const MONTHS = [
+  "فروردین",
+  "اردیبهشت",
+  "خرداد",
+  "تیر",
+  "مرداد",
+  "شهریور",
+  "مهر",
+  "آبان",
+  "آذر",
+  "دی",
+  "بهمن",
+  "اسفند",
+];
+
+function buildDays(displayDate) {
+  const year = displayDate.jYear();
+  const month = displayDate.jMonth();
+  const daysInMonth = moment.jDaysInMonth(year, month);
+  const firstDayOfMonth = moment(`${year}/${month + 1}/1`, "jYYYY/jM/jD").day();
+  const startOffset = (firstDayOfMonth + 1) % 7;
+
+  const days = [];
+  for (let i = 0; i < startOffset; i++) days.push(null);
+  for (let day = 1; day <= daysInMonth; day++) days.push(day);
+  return days;
+}
+
+function InlineJalaliMonth({
+  displayDate,
+  selectedDate,
+  onSelectDay,
+  isDisabled,
+  onPrev,
+  onNext,
+  showPrev = true,
+  showNext = true,
+}) {
+  const days = buildDays(displayDate);
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-between mb-[16px] px-1">
+        <button
+          type="button"
+          onClick={onNext}
+          className={`p-1 text-[#525252] ${showNext ? "" : "invisible"}`}
+          aria-label="ماه بعد"
+        >
+          ‹
+        </button>
+        <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
+          {MONTHS[displayDate.jMonth()]} {displayDate.jYear()}
+        </p>
+        <button
+          type="button"
+          onClick={onPrev}
+          className={`p-1 text-[#525252] ${showPrev ? "" : "invisible"}`}
+          aria-label="ماه قبل"
+        >
+          ›
+        </button>
+      </div>
+
+      <div className="grid grid-cols-7 gap-y-[12px] mb-[8px]">
+        {WEEKDAYS.map((label, idx) => (
+          <span
+            key={idx}
+            className="text-center text-[#9B9B9B] text-[11px] md:text-[12px] font-normal"
+          >
+            {label}
+          </span>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-7 gap-y-[12px]">
+        {days.map((day, index) => {
+          if (!day) return <span key={index} />;
+
+          const dayDate = moment(displayDate).jDate(day);
+          const isFriday = dayDate.day() === 5;
+          const disabled = isDisabled(dayDate);
+          const selected =
+            selectedDate &&
+            dayDate.jYear() === selectedDate.jYear() &&
+            dayDate.jMonth() === selectedDate.jMonth() &&
+            dayDate.jDate() === selectedDate.jDate();
+
+          return (
+            <button
+              type="button"
+              key={index}
+              disabled={disabled}
+              onClick={() => onSelectDay(dayDate)}
+              className={`
+                mx-auto flex items-center justify-center w-[34px] h-[34px] rounded-full
+                text-[14px] md:text-[16px] font-normal transition-colors
+                ${selected ? "!bg-[#F17732] !text-[#FFF]" : ""}
+                ${disabled ? "text-[#D7D7D7] cursor-not-allowed" : isFriday ? "text-[#E0383B]" : "text-[#525252] hover:bg-[#F5F5F5]"}
+              `}
+            >
+              {day}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default InlineJalaliMonth;