diff --git a/public/images/icons/CalendarIcon.svg b/public/images/icons/CalendarIcon.svg
index 9595725..cc11b89 100644
--- a/public/images/icons/CalendarIcon.svg
+++ b/public/images/icons/CalendarIcon.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 11H9V13H7V11ZM7 15H9V17H7V15ZM11 11H13V13H11V11ZM11 15H13V17H11V15ZM15 11H17V13H15V11ZM15 15H17V17H15V15Z" fill="none"/>
-<path d="M5 22H19C20.103 22 21 21.103 21 20V6C21 4.897 20.103 4 19 4H17V2H15V4H9V2H7V4H5C3.897 4 3 4.897 3 6V20C3 21.103 3.897 22 5 22ZM19 8L19.001 20H5V8H19Z" fill="none"/>
+<path d="M7 11H9V13H7V11ZM7 15H9V17H7V15ZM11 11H13V13H11V11ZM11 15H13V17H11V15ZM15 11H17V13H15V11ZM15 15H17V17H15V15Z" fill="black"/>
+<path d="M5 22H19C20.103 22 21 21.103 21 20V6C21 4.897 20.103 4 19 4H17V2H15V4H9V2H7V4H5C3.897 4 3 4.897 3 6V20C3 21.103 3.897 22 5 22ZM19 8L19.001 20H5V8H19Z" fill="black"/>
 </svg>
diff --git a/src/app/(global)/(mypage)/myCreateExperiences/page.tsx b/src/app/(global)/(mypage)/myCreateExperiences/page.tsx
index d595220..1b33d77 100644
--- a/src/app/(global)/(mypage)/myCreateExperiences/page.tsx
+++ b/src/app/(global)/(mypage)/myCreateExperiences/page.tsx
@@ -17,6 +17,7 @@ import { useTimeSlotStore } from '@/src/store/TimeSlotStore';
 import { useActivityStore } from '@/src/store/useActivityStore';
 import { openDaumPostcode } from '@/src/utils/daumPostcode';
 import { format } from 'date-fns';
+import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useForm, SubmitHandler, Controller } from 'react-hook-form';
@@ -54,7 +55,6 @@ export default function MyCreateExperiencesPage() {
   } = useForm<ExperiencesFormData>({ mode: 'onBlur' });
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
-
   const router = useRouter();
 
   const handleAddressClick = async () => {
@@ -66,18 +66,27 @@ export default function MyCreateExperiencesPage() {
     }
   };
 
+  const handleBackClick = () => {
+    setIsConfirmOpen(true);
+  };
+
   const handleCloseModal = () => {
     router.back();
   };
 
   const handleConfirm = () => {
     setIsConfirmOpen(false);
+    router.back();
   };
 
   const handleCancel = () => {
     setIsConfirmOpen(false);
   };
 
+  const formatNumber = (value?: number) => {
+    if (value === undefined || value === null) return '';
+    return value.toLocaleString();
+  };
   const { timeSlots } = useTimeSlotStore();
   const selectedDate = useReservationStore(
     (state) => state.dateSelector.selectedDate
@@ -85,13 +94,12 @@ export default function MyCreateExperiencesPage() {
   const { bannerImages, subImages } = useActivityStore();
 
   const onSubmit: SubmitHandler<ExperiencesFormData> = async (data) => {
-    console.log('소개 이미지 상태:', subImages);
     try {
       // 1️⃣ schedules 변환
       const schedules: Schedule[] = timeSlots
         .filter((slot) => slot.startTime && slot.endTime)
         .map((slot) => ({
-          date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : '',
+          date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : 'yy/mm/dd',
           startTime: slot.startTime!,
           endTime: slot.endTime!,
         }));
@@ -105,8 +113,6 @@ export default function MyCreateExperiencesPage() {
         ? await uploadActivityImages(subImages)
         : [];
 
-      console.log('업로드 후 소개 이미지 URL:', subImageUrls);
-
       // 4️⃣ payload 생성
       const payload = {
         ...data,
@@ -128,9 +134,19 @@ export default function MyCreateExperiencesPage() {
     <div>
       <form
         onSubmit={handleSubmit(onSubmit)}
-        className='flex flex-col gap-[30px]'
+        className='flex flex-col gap-[30px] mt-[78px] mb-[53px] px-6 lg:w-[700px] lg:mx-auto'
       >
-        <h1 className='font-bold text-18 text-gray-950'>내 체험 등록</h1>
+        <div className='flex justify-between'>
+          <h1 className='font-bold text-18 text-gray-950'>내 체험 등록</h1>
+          <button onClick={handleBackClick}>
+            <Image
+              src='/images/icons/BackIcon.svg'
+              alt='BackIcon'
+              width={24}
+              height={24}
+            />
+          </button>
+        </div>
         <FormInput
           label='제목'
           variant='experience'
@@ -160,16 +176,24 @@ export default function MyCreateExperiencesPage() {
           errorMessage={errors.description?.message}
           {...register('description', { required: '필수 입력 항목입니다.' })}
         />
-        <FormInput
-          label='가격'
-          type='number'
-          variant='experience'
-          placeholder='체험 금액을 입력해 주세요'
-          errorMessage={errors.price?.message}
-          {...register('price', {
-            valueAsNumber: true,
-            required: '필수 입력 항목입니다.',
-          })}
+        <Controller
+          name='price'
+          control={control}
+          rules={{ required: '필수 입력 항목입니다.' }}
+          render={({ field }) => (
+            <FormInput
+              label='가격'
+              variant='experience'
+              placeholder='체험 금액을 입력해 주세요'
+              value={formatNumber(field.value)}
+              onChange={(e) => {
+                const raw = e.target.value.replace(/,/g, '');
+                const parsed = raw === '' ? undefined : Number(raw);
+                field.onChange(parsed);
+              }}
+              errorMessage={errors.price?.message}
+            />
+          )}
         />
         <FormInput
           label='주소'
diff --git a/src/app/(global)/(mypage)/myUpdateExperiences/[id]/page.tsx b/src/app/(global)/(mypage)/myUpdateExperiences/[id]/page.tsx
index 19c54ea..f8c7dcb 100644
--- a/src/app/(global)/(mypage)/myUpdateExperiences/[id]/page.tsx
+++ b/src/app/(global)/(mypage)/myUpdateExperiences/[id]/page.tsx
@@ -26,8 +26,13 @@ import { useTimeSlotStore } from '@/src/store/TimeSlotStore';
 import { useActivityStore } from '@/src/store/useActivityStore';
 import { openDaumPostcode } from '@/src/utils/daumPostcode';
 import AlertModal from '@/src/components/primitives/modal/AlertModal';
+
+import ConfirmModal from '@/src/components/primitives/modal/ConfirmModal';
+import Image from 'next/image';
+
 import Dropdown from '@/src/components/primitives/Dropdown';
 
+
 interface Schedule {
   date: string;
   startTime: string;
@@ -47,6 +52,7 @@ export default function MyUpdateExperiencesPage() {
   const { id } = useParams<{ id: string }>();
   const router = useRouter();
   const [isAlertOpen, setIsAlertOpen] = useState(false);
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
   const [existingSubImages, setExistingSubImages] = useState<
     { id: number; url: string }[]
   >([]);
@@ -80,10 +86,28 @@ export default function MyUpdateExperiencesPage() {
     }
   };
 
+  const handleBackClick = () => {
+    setIsConfirmOpen(true);
+  };
+
+  const handleConfirm = () => {
+    setIsConfirmOpen(false);
+    router.back();
+  };
+
+  const handleCancel = () => {
+    setIsConfirmOpen(false);
+  };
+
   const handleCloseModal = () => {
     router.back();
   };
 
+  const formatNumber = (value?: number) => {
+    if (value === undefined || value === null) return '';
+    return value.toLocaleString();
+  };
+
   const { timeSlots, setTimeSlots } = useTimeSlotStore();
   const { bannerImages, subImages, setBannerImages, setSubImages } =
     useActivityStore();
@@ -196,10 +220,19 @@ export default function MyUpdateExperiencesPage() {
     <div>
       <form
         onSubmit={handleSubmit(onSubmit)}
-        className='flex flex-col gap-[30px]'
+        className='flex flex-col gap-[30px] mt-[78px] mb-[53px] px-6 lg:w-[700px] lg:mx-auto'
       >
-        <h1 className='font-bold text-18 text-gray-950'>체험 수정하기</h1>
-
+        <div className='flex justify-between'>
+          <h1 className='font-bold text-18 text-gray-950'>체험 수정하기</h1>
+          <button onClick={handleBackClick}>
+            <Image
+              src='/images/icons/BackIcon.svg'
+              alt='BackIcon'
+              width={24}
+              height={24}
+            />
+          </button>
+        </div>
         <FormInput
           label='제목'
           variant='experience'
@@ -207,7 +240,6 @@ export default function MyUpdateExperiencesPage() {
           errorMessage={errors.title?.message}
           {...register('title', { required: '필수 입력 항목입니다.' })}
         />
-
         <Controller
           name='category'
           control={control}
@@ -229,7 +261,6 @@ export default function MyUpdateExperiencesPage() {
             />
           )}
         />
-
         <FormInput
           label='설명'
           variant='experience'
@@ -238,19 +269,25 @@ export default function MyUpdateExperiencesPage() {
           errorMessage={errors.description?.message}
           {...register('description', { required: '필수 입력 항목입니다.' })}
         />
-
-        <FormInput
-          label='가격'
-          type='number'
-          variant='experience'
-          placeholder='체험 금액을 입력해 주세요'
-          errorMessage={errors.price?.message}
-          {...register('price', {
-            valueAsNumber: true,
-            required: '필수 입력 항목입니다.',
-          })}
+        <Controller
+          name='price'
+          control={control}
+          rules={{ required: '필수 입력 항목입니다.' }}
+          render={({ field }) => (
+            <FormInput
+              label='가격'
+              variant='experience'
+              placeholder='체험 금액을 입력해 주세요'
+              value={formatNumber(field.value)}
+              onChange={(e) => {
+                const raw = e.target.value.replace(/,/g, '');
+                const parsed = raw === '' ? undefined : Number(raw);
+                field.onChange(parsed);
+              }}
+              errorMessage={errors.price?.message}
+            />
+          )}
         />
-
         <FormInput
           label='주소'
           placeholder='주소를 입력해 주세요'
@@ -259,9 +296,7 @@ export default function MyUpdateExperiencesPage() {
           errorMessage={errors.address?.message}
           onClick={handleAddressClick}
         />
-
         <AvailableTimeSlots />
-
         <UploadBannerImage
           label='배너'
           maxImages={1}
@@ -269,7 +304,6 @@ export default function MyUpdateExperiencesPage() {
           setImages={setBannerImages}
           existingImages={bannerUrls}
         />
-
         <UploadBannerImage
           label='소개'
           maxImages={4}
@@ -290,6 +324,12 @@ export default function MyUpdateExperiencesPage() {
         message='체험 등록이 완료되었습니다'
         onClose={handleCloseModal}
       />
+      <ConfirmModal
+        isOpen={isConfirmOpen}
+        message='작업 중인 내용이 저장되지 않습니다. 정말 이동하시겠습니까?'
+        onConfirm={handleConfirm}
+        onCancel={handleCancel}
+      />
     </div>
   );
 }
diff --git a/src/components/pages/myCreateExperiences/AvailableTimeSlots.tsx b/src/components/pages/myCreateExperiences/AvailableTimeSlots.tsx
index 37e27a7..9258f40 100644
--- a/src/components/pages/myCreateExperiences/AvailableTimeSlots.tsx
+++ b/src/components/pages/myCreateExperiences/AvailableTimeSlots.tsx
@@ -1,21 +1,38 @@
-import TimepickerDropdown from './TimePickerDropdown';
+'use client';
+
+import { useBreakPoint } from '@/src/hooks/useBreakPoint';
 import CalendarInput from '../../primitives/input/CalendarInput';
+import TimepickerDropdown from './TimePickerDropdown';
 import { useTimeSlotStore } from '@/src/store/TimeSlotStore';
 import Image from 'next/image';
 
 export default function AvailableTimeSlots() {
   const { timeSlots, setTimeSlots } = useTimeSlotStore();
+  const { isMd } = useBreakPoint();
+
   const availableTimes: string[] = Array.from({ length: 24 }, (_, i) => {
     const hour = i.toString().padStart(2, '0');
     return `${hour}:00`;
   });
 
+  // 가이드 슬롯 (UI용, 첫 번째)
+  const guideSlot = { startTime: '', endTime: '' };
+
   const handleAddSlot = () => {
-    const lastSlot = timeSlots[timeSlots.length - 1];
-    if (!lastSlot.startTime || !lastSlot.endTime) return;
-    setTimeSlots([...timeSlots, { startTime: '', endTime: '' }]);
-  };
+    // 실제 슬롯 배열 (첫 번째는 UI 가이드용이므로 제외)
+    const actualSlots = timeSlots;
 
+    // 마지막 실제 슬롯이 완전히 입력되었거나 슬롯이 없는 경우에만 추가
+    if (
+      actualSlots.length === 0 ||
+      (actualSlots[actualSlots.length - 1].startTime &&
+        actualSlots[actualSlots.length - 1].endTime)
+    ) {
+      setTimeSlots([...actualSlots, { startTime: '', endTime: '' }]);
+    } else {
+      alert('예약 날짜를 모두 입력해야 새로운 슬롯을 추가할 수 있습니다.');
+    }
+  };
   const handleRemoveSlot = (index: number) => {
     const updatedSlots = timeSlots.filter((_, i) => i !== index);
     setTimeSlots(updatedSlots);
@@ -28,6 +45,8 @@ export default function AvailableTimeSlots() {
   ) => {
     const updatedSlots = [...timeSlots];
     updatedSlots[index][field] = value;
+
+    // 중복 체크
     const duplicate = updatedSlots.some(
       (slot, i) =>
         i !== index &&
@@ -48,55 +67,97 @@ export default function AvailableTimeSlots() {
       <h1 className='font-bold text-16'>예약 가능한 시간대</h1>
       <h2 className='font-medium text-14 mt-[19px] mb-[9px]'>날짜</h2>
       <div className='flex flex-col gap-2'>
-        <CalendarInput />
-        <div className='flex items-center gap-2'>
-          <div className='flex-1'>
-            <TimepickerDropdown
-              times={availableTimes}
-              selectedTime={timeSlots[0]?.startTime || ''}
-              onSelect={(time) => handleChange(0, 'startTime', time)}
-              placeholder='00:00'
-            />
-          </div>
-          <Image
-            src='/images/icons/MinusIcon.svg'
-            alt='MinusIcon'
-            width={16}
-            height={16}
-          />
-          <div className='flex-1 items-center gap-2'>
-            <TimepickerDropdown
-              times={availableTimes}
-              selectedTime={timeSlots[0]?.endTime || ''}
-              onSelect={(time) => handleChange(0, 'endTime', time)}
-              placeholder='00:00'
-            />
+        <div className='flex flex-col gap-2 md:flex-row md:items-center md:gap-3.5'>
+          {/* 첫 번째 가이드 슬롯 */}
+          <div className='md:min-w-[344px]'>
+            <div className='relative'>
+              <button
+                type='button'
+                className={`flex items-center justify-between border border-gray-100 rounded-2xl pt-4 pr-5 pb-4 pl-5 w-full text-gray-400 ${
+                  isMd ? 'max-w-[344px]' : 'w-full'
+                }`}
+              >
+                <span>{'yy/mm/dd'}</span>
+                <Image
+                  src='/images/icons/CalendarIcon.svg'
+                  alt='Calendar Icon'
+                  width={24}
+                  height={24}
+                />
+              </button>
+            </div>
           </div>
-          <div
-            onClick={handleAddSlot}
-            className='flex cursor-pointer items-center justify-center bg-[var(--color-primary-500)] rounded-[30px] w-7 h-7'
-          >
+          <div className='flex items-center gap-2 flex-1'>
+            <div className='flex-1'>
+              <div className='relative'>
+                <button
+                  type='button'
+                  className={`flex w-full justify-between border border-gray-100 rounded-2xl pt-4 pr-5 pb-4 pl-5 text-gray-400`}
+                >
+                  {'00:00'}
+                  <Image
+                    src={'/images/icons/TriangleDownIcon.svg'}
+                    alt='TriangleDownIcon'
+                    width={24}
+                    height={24}
+                  />
+                </button>
+              </div>
+            </div>
             <Image
-              src='/images/icons/PlusIcon.svg'
-              alt='PlusIcon'
+              src='/images/icons/MinusIcon.svg'
+              alt='MinusIcon'
               width={16}
               height={16}
-              className='filter invert'
             />
+            <div className='flex-1'>
+              <div className='relative'>
+                <button
+                  type='button'
+                  className={`flex w-full justify-between border border-gray-100 rounded-2xl pt-4 pr-5 pb-4 pl-5 text-gray-400`}
+                >
+                  {'00:00'}
+                  <Image
+                    src={'/images/icons/TriangleDownIcon.svg'}
+                    alt='TriangleDownIcon'
+                    width={24}
+                    height={24}
+                  />
+                </button>
+              </div>
+            </div>
+            <div
+              onClick={handleAddSlot}
+              className='flex cursor-pointer items-center justify-center bg-[var(--color-primary-500)] rounded-[30px] w-7 h-7'
+            >
+              <Image
+                src='/images/icons/PlusIcon.svg'
+                alt='PlusIcon'
+                width={16}
+                height={16}
+                className='filter invert'
+              />
+            </div>
           </div>
         </div>
+        <hr className='my-4 border-gray-100' />
+        {timeSlots.map((slot, index) => (
+          <div
+            key={index}
+            className={`flex gap-3.5 ${isMd ? 'flex-row' : 'flex-col'}`}
+          >
+            {/* CalendarInput */}
+            <div className='md:min-w-[344px]'>
+              <CalendarInput />
+            </div>
 
-        {timeSlots.slice(1).map((slot, index) => (
-          <div key={index + 1} className='flex flex-col gap-2'>
-            <CalendarInput />
-            <div className='flex items-center gap-2'>
+            {/* Timepicker + 버튼 그룹 (남은 공간 차지) */}
+            <div className='flex items-center gap-2 flex-1'>
               <div className='flex-1'>
                 <TimepickerDropdown
                   times={availableTimes}
                   selectedTime={slot.startTime}
-                  onSelect={(time) =>
-                    handleChange(index + 1, 'startTime', time)
-                  }
+                  onSelect={(time) => handleChange(index, 'startTime', time)}
                   placeholder='00:00'
                 />
               </div>
@@ -110,16 +171,17 @@ export default function AvailableTimeSlots() {
                 <TimepickerDropdown
                   times={availableTimes}
                   selectedTime={slot.endTime}
-                  onSelect={(time) => handleChange(index + 1, 'endTime', time)}
+                  onSelect={(time) => handleChange(index, 'endTime', time)}
                   placeholder='00:00'
                 />
               </div>
-              <div className='flex cursor-pointer items-center justify-center bg-gray-50 rounded-[30px] w-7 h-7'>
+              <div
+                onClick={() => handleRemoveSlot(index)}
+                className='flex cursor-pointer items-center justify-center bg-gray-50 rounded-[30px] w-7 h-7'
+              >
                 <Image
-                  onClick={() => handleRemoveSlot(index + 1)}
                   src='/images/icons/MinusIcon.svg'
                   alt='MinusIcon'
-                  className='cursor-pointer'
                   width={16}
                   height={16}
                 />
diff --git a/src/components/pages/myCreateExperiences/TimePickerDropdown.tsx b/src/components/pages/myCreateExperiences/TimePickerDropdown.tsx
index 482b28b..0d86023 100644
--- a/src/components/pages/myCreateExperiences/TimePickerDropdown.tsx
+++ b/src/components/pages/myCreateExperiences/TimePickerDropdown.tsx
@@ -8,6 +8,7 @@ interface TimepickerDropdownProps {
   selectedTime?: string;
   onSelect: (time: string) => void;
   placeholder?: string;
+  disabled?: boolean;
 }
 
 export default function TimepickerDropdown({
@@ -15,15 +16,21 @@ export default function TimepickerDropdown({
   selectedTime,
   onSelect,
   placeholder = '시간 선택',
+  disabled = false,
 }: TimepickerDropdownProps) {
   const [open, setOpen] = useState(false);
-
+  const handleButtonClick = () => {
+    if (disabled) return; // ✅ 비활성화 시 클릭 무시
+    setOpen((prev) => !prev);
+  };
   return (
     <div className='relative'>
       <button
         type='button'
-        onClick={() => setOpen((prev) => !prev)}
-        className='flex w-full justify-between border border-gray-100 rounded-2xl pt-4 pr-5 pb-4 pl-5'
+        onClick={handleButtonClick}
+        className={`flex w-full justify-between border border-gray-100 rounded-2xl pt-4 pr-5 pb-4 pl-5 ${
+          disabled ? ' cursor-not-allowed' : ''
+        }`}
       >
         {selectedTime || placeholder}
         <Image
diff --git a/src/components/primitives/input/CalendarInput.tsx b/src/components/primitives/input/CalendarInput.tsx
index f06a796..5109473 100644
--- a/src/components/primitives/input/CalendarInput.tsx
+++ b/src/components/primitives/input/CalendarInput.tsx
@@ -5,6 +5,7 @@ import { format } from 'date-fns';
 import Image from 'next/image';
 import Calendar from '@/src/components/pages/detail/DateSelector/Calendar';
 import { useReservationStore } from '@/src/store/ReservationStore';
+import { useBreakPoint } from '@/src/hooks/useBreakPoint';
 
 export default function CalendarInput() {
   const [open, setOpen] = useState(false);
@@ -12,6 +13,8 @@ export default function CalendarInput() {
     (state) => state.dateSelector.selectedDate
   );
 
+  const { isMd } = useBreakPoint();
+
   const prevDateRef = useRef<Date | null>(null);
   useEffect(() => {
     if (!open) return;
@@ -26,7 +29,9 @@ export default function CalendarInput() {
       <button
         type='button'
         onClick={() => setOpen((prev) => !prev)}
-        className='w-full flex items-center justify-between border border-gray-100 rounded-2xl pt-4 pr-5 pb-4 pl-5'
+        className={`flex items-center justify-between border border-gray-100 rounded-2xl pt-4 pr-5 pb-4 pl-5 w-full ${
+          isMd ? 'max-w-[344px]' : 'w-full'
+        }`}
       >
         <span>
           {selectedDate ? format(selectedDate, 'yyyy-MM-dd') : 'yy/mm/dd'}