diff --git a/src/components/timetable/LectureBottomSheet/AddOnMyOwn/TimeSelector.tsx b/src/common/components/TimeSelector/index.tsx
similarity index 55%
rename from src/components/timetable/LectureBottomSheet/AddOnMyOwn/TimeSelector.tsx
rename to src/common/components/TimeSelector/index.tsx
index da4d3ccb..638d83ea 100644
--- a/src/components/timetable/LectureBottomSheet/AddOnMyOwn/TimeSelector.tsx
+++ b/src/common/components/TimeSelector/index.tsx
@@ -1,25 +1,32 @@
-import { css } from '@styled-system/css'
 import { useEffect, useState } from 'react'
 import { UseFormSetValue } from 'react-hook-form'
 
+import * as s from './style.css'
+
 import Dropdown from '@/components/timetable/Dropdown'
-import { AddOnMyOwnForm } from '@/components/timetable/LectureBottomSheet/AddOnMyOwn'
+import { AddOnMyOwnForm } from '@/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn/types'
 import { hSelectors, mSelectors } from '@/lib/constants/timeSelectors'
 
 interface TimeSelector {
   type: 'startTime' | 'endTime'
+  value: string
   setValue: UseFormSetValue<AddOnMyOwnForm>
 }
-const TimeSelector = ({ type, setValue }: TimeSelector) => {
-  const [curH, setCurH] = useState(0)
-  const [curM, setCurM] = useState(0)
+const TimeSelector = ({ type, value, setValue }: TimeSelector) => {
+  // Set initial curH and curM from value string
+  const [hours, minutes] = value.split(':')
+  const hIndex = hSelectors.findIndex(h => h.startsWith(hours))
+  const mIndex = mSelectors.findIndex(m => m.startsWith(minutes))
+
+  const [curH, setCurH] = useState(hIndex === -1 ? 0 : hIndex)
+  const [curM, setCurM] = useState(mIndex === -1 ? 0 : mIndex)
 
   useEffect(() => {
     setValue(type, `${hSelectors[curH].slice(0, 2)}:${mSelectors[curM].slice(0, 2)}:00`)
   }, [curH, curM, setValue, type])
 
   return (
-    <div className={css({ display: 'flex', gap: 5 })}>
+    <div className={s.Wrapper}>
       <Dropdown dropdownList={hSelectors} curIndex={curH} setCurIndex={setCurH} isTimeSelector={true} />
       <Dropdown dropdownList={mSelectors} curIndex={curM} setCurIndex={setCurM} isTimeSelector={true} />
     </div>
diff --git a/src/common/components/TimeSelector/style.css.ts b/src/common/components/TimeSelector/style.css.ts
new file mode 100644
index 00000000..d9331102
--- /dev/null
+++ b/src/common/components/TimeSelector/style.css.ts
@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css'
+
+import { f } from '@/style'
+
+export const Wrapper = style([
+  f.flex,
+  {
+    gap: '1.25rem',
+  },
+])
diff --git a/src/components/timetable/Grid/LectureSticker/ScheduledLecture.tsx b/src/components/timetable/Grid/LectureSticker/ScheduledLecture.tsx
index da41aedb..0d36aa47 100644
--- a/src/components/timetable/Grid/LectureSticker/ScheduledLecture.tsx
+++ b/src/components/timetable/Grid/LectureSticker/ScheduledLecture.tsx
@@ -1,10 +1,9 @@
 import { css } from '@styled-system/css'
+import { AnimatePresence } from 'framer-motion'
 import { useSetAtom } from 'jotai'
 import { CircleUser, MapPin } from 'lucide-react'
-import { MouseEvent } from 'react'
-import { createPortal } from 'react-dom'
 
-import EditSchedule from '@/components/timetable/Modal/EditSchedule'
+import EditSchedule from '@/domain/Timetable/components/LectureBottomSheet/EditSchedule'
 import { isBottomSheetVisible } from '@/domain/Timetable/store/bottomSheetVisibility'
 import { GridType } from '@/types/timetable'
 import { getDuration, getStartTime } from '@/util/timetableUtil'
@@ -54,14 +53,6 @@ const ScheduledLecture = ({
     setIsSheetOpened(true)
   }
 
-  const handleModalOutsideClick = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
-    // 모달 안쪽을 눌렀을 때도 모달 state가 null 되는 것을 방지
-    if (event.target === event.currentTarget) {
-      setIsScheduleEditOpened(false)
-      setIsSheetOpened(true)
-    }
-  }
-
   return (
     <>
       <div
@@ -113,30 +104,11 @@ const ScheduledLecture = ({
           )}
         </div>
       </div>
-      {isScheduleEditOpened &&
-        createPortal(
-          <div
-            className={css({
-              position: 'fixed',
-              top: 0,
-              left: 0,
-              w: '100vw',
-              h: '100vh',
-              bgColor: 'rgba(0, 0, 0, 0.40)',
-              zIndex: 100,
-              display: 'flex',
-              flexDir: 'column',
-              justifyContent: 'flex-end',
-              alignItems: 'center',
-              paddingBottom: '50px',
-            })}
-            role="presentation"
-            onClick={handleModalOutsideClick}
-          >
-            <EditSchedule timetableId={timetableId!} data={data} closeScheduleModal={closeScheduleModal} />
-          </div>,
-          document.body,
+      <AnimatePresence>
+        {isScheduleEditOpened && (
+          <EditSchedule timetableId={timetableId!} data={data} closeEditSheet={closeScheduleModal} />
         )}
+      </AnimatePresence>
     </>
   )
 }
diff --git a/src/components/timetable/LectureBottomSheet/AddOnMyOwn/index.tsx b/src/components/timetable/LectureBottomSheet/AddOnMyOwn/index.tsx
deleted file mode 100644
index 677382b2..00000000
--- a/src/components/timetable/LectureBottomSheet/AddOnMyOwn/index.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import { css, cva, cx } from '@styled-system/css'
-import { ReactNode, useState } from 'react'
-import { useForm } from 'react-hook-form'
-
-import TimeSelector from '@/components/timetable/LectureBottomSheet/AddOnMyOwn/TimeSelector'
-import { DayArray, DayType, timePattern } from '@/types/timetable'
-import { getDuration } from '@/util/timetableUtil'
-
-const SelectBtnStyle = cva({
-  base: {
-    color: 'lightGray.1',
-    fontSize: 18,
-    lineHeight: 1,
-    fontWeight: 500,
-    border: '1px solid {colors.lightGray.1}',
-    px: 2.5,
-    py: 1.5,
-    rounded: 'full',
-    bgColor: 'bg.gray',
-    cursor: 'pointer',
-    transition: 'background 0.256s, color 0.256s, border 0.256s',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  variants: {
-    state: {
-      active: {
-        bgColor: 'bg.red.1',
-        color: 'red.1',
-        borderColor: 'red.1',
-      },
-      default: {
-        _hover: {
-          borderColor: 'darkGray.2',
-          color: 'darkGray.2',
-        },
-      },
-    },
-    isDayBtn: {
-      true: {
-        width: '57px',
-      },
-    },
-  },
-})
-
-const FormLayoutStyle = css({ display: 'flex', flexDir: 'row', gap: 10 })
-
-const FormBox = ({ formName, children }: { formName: string; children: ReactNode }) => {
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        flexDir: 'row',
-        alignItems: 'center',
-        gap: 5,
-      })}
-    >
-      <span className={css({ fontWeight: 500, fontSize: 18, color: 'darkGray.2' })}>{formName}</span>
-      {children}
-    </div>
-  )
-}
-
-const InputBoxStyle = css({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  bgColor: 'bg.gray',
-  rounded: 10,
-  border: '1px {colors.darkGray.2} solid',
-  px: 5,
-  py: 3,
-  outline: 'none',
-  fontSize: 18,
-  fontWeight: 500,
-  lineHeight: 1,
-  color: 'black.2',
-  _placeholder: {
-    color: 'lightGray.1',
-  },
-})
-
-export interface AddOnMyOwnForm {
-  title: string
-  day: DayType
-  startTime: string
-  endTime: string
-  location?: string
-}
-
-interface AddOnMyOwnProps {
-  submitHandler: (data: AddOnMyOwnForm) => void
-  prevValue?: { title: string; day: DayType; location?: string }
-}
-
-const AddOnMyOwn = ({ submitHandler, prevValue = { title: '', day: 'Mon', location: '' } }: AddOnMyOwnProps) => {
-  const [trigger, setTrigger] = useState(0)
-
-  const {
-    register,
-    formState: { errors },
-    handleSubmit,
-    setValue,
-    watch,
-    reset,
-  } = useForm<AddOnMyOwnForm>({
-    defaultValues: {
-      title: prevValue?.title,
-      day: prevValue?.day,
-      startTime: '09:00:00',
-      endTime: '09:00:00',
-      location: prevValue?.location,
-    },
-    mode: 'onSubmit',
-  })
-
-  const onSubmit = (data: AddOnMyOwnForm) => {
-    reset()
-    setTrigger(p => p + 1)
-    submitHandler(data)
-  }
-
-  return (
-    <div className={css({ h: '100%', w: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' })}>
-      <form
-        onSubmit={handleSubmit(onSubmit)}
-        className={css({
-          h: '100%',
-          w: '100%',
-          maxH: '300px',
-          maxW: '1000px',
-          display: 'flex',
-          flexDir: 'column',
-          justifyContent: 'space-between',
-          pb: 2.5,
-        })}
-      >
-        <div className={css({ display: 'flex', flexDir: 'column', gap: 10 })}>
-          <div className={FormLayoutStyle}>
-            <FormBox formName="Title">
-              <input
-                className={cx(InputBoxStyle, css({ h: '50px' }))}
-                type="text"
-                {...register('title', { required: 'The name of the schedule is required.' })}
-              />
-            </FormBox>
-            <FormBox formName="Place">
-              <input className={cx(InputBoxStyle, css({ h: '50px' }))} type="text" {...register('location')} />
-            </FormBox>
-          </div>
-          <div className={FormLayoutStyle}>
-            <FormBox formName="Day">
-              <div className={css({ display: 'flex', alignItems: 'center', gap: 1 })}>
-                {DayArray.map(day => (
-                  <button
-                    key={day}
-                    type="button"
-                    className={SelectBtnStyle({
-                      isDayBtn: true,
-                      state: watch('day') === day ? 'active' : 'default',
-                    })}
-                    onClick={() => setValue('day', day)}
-                  >
-                    {day}
-                  </button>
-                ))}
-              </div>
-              <input
-                type="hidden"
-                {...register('day', {
-                  validate: val => {
-                    return DayArray.includes(val as DayType)
-                  },
-                })}
-              />
-            </FormBox>
-          </div>
-          <div className={FormLayoutStyle}>
-            <FormBox formName="Start Time">
-              <TimeSelector key={trigger} type={'startTime'} setValue={setValue} />
-            </FormBox>
-            <FormBox formName="End Time">
-              <TimeSelector key={trigger} type={'endTime'} setValue={setValue} />
-            </FormBox>
-            <input type="hidden" {...register('startTime', { pattern: timePattern })} />
-            <input
-              type="hidden"
-              {...register('endTime', {
-                pattern: timePattern,
-                validate: val => {
-                  return getDuration(val, watch('startTime')) > 0 || 'The end time must be later than the start time.'
-                },
-              })}
-            />
-          </div>
-        </div>
-        <div className={css({ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 5 })}>
-          {errors?.title?.message ?? errors?.endTime?.message}
-          <button
-            type="submit"
-            className={css({
-              fontWeight: 700,
-              fontSize: 12,
-              color: 'white',
-              px: 2.5,
-              py: 1,
-              rounded: 'full',
-              transition: 'all 0.256s',
-              cursor: 'pointer',
-              bgColor: 'darkGray.1',
-            })}
-          >
-            Complete
-          </button>
-        </div>
-      </form>
-    </div>
-  )
-}
-
-export default AddOnMyOwn
diff --git a/src/components/timetable/Modal/EditSchedule.tsx b/src/components/timetable/Modal/EditSchedule.tsx
deleted file mode 100644
index f16313f4..00000000
--- a/src/components/timetable/Modal/EditSchedule.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { css, cx } from '@styled-system/css'
-import { shadow } from '@styled-system/recipes'
-import { useCallback } from 'react'
-
-import { usePatchSchedule } from '@/api/hooks/schedule'
-import AddOnMyOwn, { AddOnMyOwnForm } from '@/components/timetable/LectureBottomSheet/AddOnMyOwn'
-import { GridType } from '@/types/timetable'
-
-interface EditScheduleProps {
-  timetableId: number
-  data: GridType
-  closeScheduleModal: () => void
-}
-const EditSchedule = ({ timetableId, data, closeScheduleModal }: EditScheduleProps) => {
-  const { mutate: editSchedule } = usePatchSchedule()
-
-  const handleSubmit = useCallback(
-    (formData: AddOnMyOwnForm) => {
-      closeScheduleModal()
-      editSchedule({ scheduleId: data.scheduleId, timetableId, ...formData })
-    },
-    [closeScheduleModal, editSchedule, timetableId, data.scheduleId],
-  )
-
-  return (
-    <div
-      className={cx(
-        shadow(),
-        css({
-          bgColor: '#FFFFFFCC',
-          w: 'calc(100vw - 298px)',
-          h: 'calc(50vh - 20px)',
-          backdropFilter: 'blur(25px)',
-          rounded: 50,
-          px: 26,
-          pt: 10,
-          pb: 3.5,
-        }),
-      )}
-    >
-      <AddOnMyOwn
-        submitHandler={handleSubmit}
-        prevValue={{ title: data.title, day: data.day, location: data.location ?? undefined }}
-      />
-    </div>
-  )
-}
-
-export default EditSchedule
diff --git a/src/features/Timetable/components/LectureBottomSheet/AddClass/SearchArea/index.tsx b/src/domain/Timetable/components/LectureBottomSheet/AddClass/SearchArea/index.tsx
similarity index 92%
rename from src/features/Timetable/components/LectureBottomSheet/AddClass/SearchArea/index.tsx
rename to src/domain/Timetable/components/LectureBottomSheet/AddClass/SearchArea/index.tsx
index b59aefc5..8cd6a7f0 100644
--- a/src/features/Timetable/components/LectureBottomSheet/AddClass/SearchArea/index.tsx
+++ b/src/domain/Timetable/components/LectureBottomSheet/AddClass/SearchArea/index.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react'
-import { HiX } from 'react-icons/hi'
 
 import * as s from './style.css'
 
 import Dropdown from '@/components/timetable/Dropdown'
+import CloseButton from '@/domain/Timetable/components/LectureBottomSheet/CloseButton'
 import { COURSE_CATEGORY_LIST, CourseQueryInterface } from '@/domain/Timetable/constants'
 import Input from '@/ui/Input'
 import { useDeepCompareEffect } from '@/util/hooks/useDeepCompare'
@@ -48,9 +48,7 @@ const SearchArea = ({ curCategory, searchQuery, handleDropdown, handleSearch, cl
             variant="search"
           />
         </form>
-        <button className={s.CloseButton} onClick={closeModal}>
-          <HiX />
-        </button>
+        <CloseButton onClick={closeModal} />
       </div>
     </div>
   )
diff --git a/src/features/Timetable/components/LectureBottomSheet/AddClass/SearchArea/style.css.ts b/src/domain/Timetable/components/LectureBottomSheet/AddClass/SearchArea/style.css.ts
similarity index 65%
rename from src/features/Timetable/components/LectureBottomSheet/AddClass/SearchArea/style.css.ts
rename to src/domain/Timetable/components/LectureBottomSheet/AddClass/SearchArea/style.css.ts
index 5ea2aa6b..9507d322 100644
--- a/src/features/Timetable/components/LectureBottomSheet/AddClass/SearchArea/style.css.ts
+++ b/src/domain/Timetable/components/LectureBottomSheet/AddClass/SearchArea/style.css.ts
@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 
-import { BOTTOM_SHEET_CONTENTS_MAX_WIDTH } from '@/features/Timetable/components/LectureBottomSheet/constants'
+import { BOTTOM_SHEET_CONTENTS_MAX_WIDTH } from '@/domain/Timetable/components/LectureBottomSheet/constants'
 import { f } from '@/style'
 import { vars } from '@/theme/theme.css'
 
@@ -33,15 +33,3 @@ export const CategoryChip = style([
 ])
 
 export const Input = style([{ width: '39.625rem' }])
-
-export const CloseButton = style([
-  f.flexCenter,
-  {
-    width: '1.875rem',
-    height: '1.875rem',
-    color: vars.color.white,
-    backgroundColor: vars.color.red3,
-    borderRadius: '100%',
-    cursor: 'pointer',
-  },
-])
diff --git a/src/features/Timetable/components/LectureBottomSheet/AddClass/SearchResult/index.tsx b/src/domain/Timetable/components/LectureBottomSheet/AddClass/SearchResult/index.tsx
similarity index 94%
rename from src/features/Timetable/components/LectureBottomSheet/AddClass/SearchResult/index.tsx
rename to src/domain/Timetable/components/LectureBottomSheet/AddClass/SearchResult/index.tsx
index 1ccfa65f..a40390f5 100644
--- a/src/features/Timetable/components/LectureBottomSheet/AddClass/SearchResult/index.tsx
+++ b/src/domain/Timetable/components/LectureBottomSheet/AddClass/SearchResult/index.tsx
@@ -4,9 +4,9 @@ import { forwardRef, useCallback } from 'react'
 import * as s from './style.css'
 
 import { usePostCourse } from '@/api/hooks/timetable'
+import SearchLectureCard from '@/domain/Timetable/components/LectureBottomSheet/AddClass/SerchLectureCard'
 import { CourseQueryInterface } from '@/domain/Timetable/constants'
 import { useSearchCourse } from '@/domain/Timetable/hooks/useSearchCourse'
-import SearchLectureCard from '@/features/Timetable/components/LectureBottomSheet/AddClass/SerchLectureCard'
 import { SemesterType } from '@/types/timetable'
 import useIntersect from '@/util/hooks/useIntersect'
 import { useQueryParams } from '@/util/hooks/useQueryParams'
diff --git a/src/features/Timetable/components/LectureBottomSheet/AddClass/SearchResult/style.css.ts b/src/domain/Timetable/components/LectureBottomSheet/AddClass/SearchResult/style.css.ts
similarity index 100%
rename from src/features/Timetable/components/LectureBottomSheet/AddClass/SearchResult/style.css.ts
rename to src/domain/Timetable/components/LectureBottomSheet/AddClass/SearchResult/style.css.ts
diff --git a/src/features/Timetable/components/LectureBottomSheet/AddClass/SerchLectureCard/index.tsx b/src/domain/Timetable/components/LectureBottomSheet/AddClass/SerchLectureCard/index.tsx
similarity index 100%
rename from src/features/Timetable/components/LectureBottomSheet/AddClass/SerchLectureCard/index.tsx
rename to src/domain/Timetable/components/LectureBottomSheet/AddClass/SerchLectureCard/index.tsx
diff --git a/src/features/Timetable/components/LectureBottomSheet/AddClass/SerchLectureCard/style.css.ts b/src/domain/Timetable/components/LectureBottomSheet/AddClass/SerchLectureCard/style.css.ts
similarity index 93%
rename from src/features/Timetable/components/LectureBottomSheet/AddClass/SerchLectureCard/style.css.ts
rename to src/domain/Timetable/components/LectureBottomSheet/AddClass/SerchLectureCard/style.css.ts
index 3c2e26e1..b4b511ac 100644
--- a/src/features/Timetable/components/LectureBottomSheet/AddClass/SerchLectureCard/style.css.ts
+++ b/src/domain/Timetable/components/LectureBottomSheet/AddClass/SerchLectureCard/style.css.ts
@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 
-import { BOTTOM_SHEET_CONTENTS_MAX_WIDTH } from '@/features/Timetable/components/LectureBottomSheet/constants'
+import { BOTTOM_SHEET_CONTENTS_MAX_WIDTH } from '@/domain/Timetable/components/LectureBottomSheet/constants'
 import { f } from '@/style'
 import { vars } from '@/theme/theme.css'
 
diff --git a/src/features/Timetable/components/LectureBottomSheet/AddClass/index.tsx b/src/domain/Timetable/components/LectureBottomSheet/AddClass/index.tsx
similarity index 94%
rename from src/features/Timetable/components/LectureBottomSheet/AddClass/index.tsx
rename to src/domain/Timetable/components/LectureBottomSheet/AddClass/index.tsx
index e91ddee0..20c93420 100644
--- a/src/features/Timetable/components/LectureBottomSheet/AddClass/index.tsx
+++ b/src/domain/Timetable/components/LectureBottomSheet/AddClass/index.tsx
@@ -8,9 +8,9 @@ import ErrorBoundarySuspense from '@/common/components/ErrorBoundarySuspense'
 import ClassSelectModal from '@/components/timetable/LectureBottomSheet/AddClass/ClassSelectModal'
 import { LoadingSpinner } from '@/components/ui/spinner'
 import Toast from '@/components/ui/toast'
+import SearchArea from '@/domain/Timetable/components/LectureBottomSheet/AddClass/SearchArea'
+import SearchResult from '@/domain/Timetable/components/LectureBottomSheet/AddClass/SearchResult'
 import { COURSE_CATEGORY_LIST, CourseQueryInterface } from '@/domain/Timetable/constants'
-import SearchArea from '@/features/Timetable/components/LectureBottomSheet/AddClass/SearchArea'
-import SearchResult from '@/features/Timetable/components/LectureBottomSheet/AddClass/SearchResult'
 import { SemesterType } from '@/types/timetable'
 import { useQueryParams } from '@/util/hooks/useQueryParams'
 
diff --git a/src/features/Timetable/components/LectureBottomSheet/AddClass/style.css.ts b/src/domain/Timetable/components/LectureBottomSheet/AddClass/style.css.ts
similarity index 100%
rename from src/features/Timetable/components/LectureBottomSheet/AddClass/style.css.ts
rename to src/domain/Timetable/components/LectureBottomSheet/AddClass/style.css.ts
diff --git a/src/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn/index.tsx b/src/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn/index.tsx
new file mode 100644
index 00000000..4c51b3a0
--- /dev/null
+++ b/src/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn/index.tsx
@@ -0,0 +1,115 @@
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+
+import * as s from './style.css'
+
+import { usePatchSchedule, usePostSchedule } from '@/api/hooks/schedule'
+import TimeSelector from '@/common/components/TimeSelector'
+import Toast from '@/components/ui/toast'
+import { AddOnMyOwnForm } from '@/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn/types'
+import CloseButton from '@/domain/Timetable/components/LectureBottomSheet/CloseButton'
+import DaySelector from '@/domain/Timetable/components/LectureBottomSheet/DaySelector'
+import FormBox from '@/domain/Timetable/components/LectureBottomSheet/FormBox'
+import { DayArray, DayType, timePattern } from '@/types/timetable'
+import { Button } from '@/ui/Button'
+import Input from '@/ui/Input'
+import { getDuration } from '@/util/timetableUtil'
+
+interface Props {
+  timetableId: number
+  closeModal: () => void
+  prevValues?: AddOnMyOwnForm & { scheduleId: number }
+}
+const AddOnMyOwn = ({ timetableId, closeModal, prevValues }: Props) => {
+  const isEditPage = prevValues !== undefined
+  const defaultValues: AddOnMyOwnForm = isEditPage
+    ? prevValues
+    : { title: '', day: 'Mon', startTime: '09:00:00', endTime: '09:00:00', location: undefined }
+
+  const { mutate: postSchedule } = usePostSchedule()
+  const { mutate: editSchedule } = usePatchSchedule()
+  const { register, handleSubmit, setValue, reset, watch } = useForm<AddOnMyOwnForm>({
+    defaultValues,
+    mode: 'onSubmit',
+  })
+
+  const onSubmit = (data: AddOnMyOwnForm) => {
+    isEditPage
+      ? editSchedule({ ...data, timetableId, scheduleId: prevValues.scheduleId })
+      : postSchedule({ ...data, timetableId })
+
+    closeModal()
+    reset()
+  }
+
+  return (
+    <div className={s.FlexWrapper}>
+      <div className={s.Wrapper}>
+        <div className={s.CloseButton}>
+          <CloseButton onClick={closeModal} />
+        </div>
+        <form
+          className={s.Container}
+          onSubmit={handleSubmit(onSubmit, err => {
+            const message = Object.values(err)[0].message
+            if (message !== undefined)
+              toast.custom(() => <Toast message={message} type="error" />, { position: 'top-right' })
+          })}
+        >
+          <div className={s.FormContainer}>
+            <div className={s.FormLayout}>
+              <FormBox formName="Title">
+                <Input {...register('title', { required: 'The name of the schedule is required.' })} />
+              </FormBox>
+              <FormBox formName="Place">
+                <Input placeholder="optional" {...register('location')} />
+              </FormBox>
+            </div>
+            <div>
+              <FormBox formName="Day">
+                <DaySelector
+                  value={watch('day')}
+                  setValue={(day: DayType) => setValue('day', day)}
+                  registerReturn={register('day', {
+                    validate: val => {
+                      return DayArray.includes(val as DayType)
+                    },
+                  })}
+                />
+              </FormBox>
+            </div>
+            <div className={s.FormLayout}>
+              <FormBox formName="Start Time">
+                <TimeSelector
+                  type={'startTime'}
+                  value={watch('startTime')}
+                  setValue={setValue}
+                  {...register('startTime', { pattern: timePattern })}
+                />
+              </FormBox>
+              <FormBox formName="End Time">
+                <TimeSelector
+                  type={'endTime'}
+                  value={watch('endTime')}
+                  setValue={setValue}
+                  {...register('endTime', {
+                    pattern: timePattern,
+                    validate: val => {
+                      return (
+                        getDuration(val, watch('startTime')) > 0 || 'The end time must be later than the start time.'
+                      )
+                    },
+                  })}
+                />
+              </FormBox>
+            </div>
+          </div>
+          <div className={s.SubmitButton}>
+            <Button type="submit">Complete</Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+export default AddOnMyOwn
diff --git a/src/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn/style.css.ts b/src/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn/style.css.ts
new file mode 100644
index 00000000..71cf21c1
--- /dev/null
+++ b/src/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn/style.css.ts
@@ -0,0 +1,39 @@
+import { style } from '@vanilla-extract/css'
+
+import { f } from '@/style'
+
+export const FlexWrapper = style([
+  f.flexColumn,
+  f.alignCenter,
+  f.wFull,
+  f.hFull,
+  {
+    padding: '0 9rem',
+    paddingTop: '0.63rem',
+    paddingBottom: '3.13rem',
+  },
+])
+export const Wrapper = style([
+  f.wFull,
+  f.hFull,
+  f.flexColumn,
+  {
+    maxWidth: '77rem',
+  },
+])
+export const Container = style([f.flexColumn, f.justifyBetween, { flexGrow: 1 }])
+export const FormContainer = style([
+  f.flexColumn,
+  {
+    gap: '2.5rem',
+  },
+])
+export const FormLayout = style([f.flexRow, f.alignCenter, { gap: '2.5rem' }])
+
+export const SubmitButton = style({
+  alignSelf: 'end',
+})
+
+export const CloseButton = style({
+  alignSelf: 'end',
+})
diff --git a/src/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn/types.ts b/src/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn/types.ts
new file mode 100644
index 00000000..6049fe45
--- /dev/null
+++ b/src/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn/types.ts
@@ -0,0 +1,9 @@
+import { DayType } from '@/types/timetable'
+
+export interface AddOnMyOwnForm {
+  title: string
+  day: DayType
+  startTime: string
+  endTime: string
+  location?: string
+}
diff --git a/src/domain/Timetable/components/LectureBottomSheet/CloseButton/index.tsx b/src/domain/Timetable/components/LectureBottomSheet/CloseButton/index.tsx
new file mode 100644
index 00000000..2e3d244f
--- /dev/null
+++ b/src/domain/Timetable/components/LectureBottomSheet/CloseButton/index.tsx
@@ -0,0 +1,15 @@
+import { HiX } from 'react-icons/hi'
+
+import * as s from './style.css'
+
+interface Props {
+  onClick: () => void
+}
+const CloseButton = ({ onClick }: Props) => {
+  return (
+    <button type="button" className={s.Wrapper} onClick={onClick}>
+      <HiX />
+    </button>
+  )
+}
+export default CloseButton
diff --git a/src/domain/Timetable/components/LectureBottomSheet/CloseButton/style.css.ts b/src/domain/Timetable/components/LectureBottomSheet/CloseButton/style.css.ts
new file mode 100644
index 00000000..6aaaf5a2
--- /dev/null
+++ b/src/domain/Timetable/components/LectureBottomSheet/CloseButton/style.css.ts
@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css'
+
+import { f } from '@/style'
+import { vars } from '@/theme/theme.css'
+
+export const Wrapper = style([
+  f.flexCenter,
+  {
+    width: '1.875rem',
+    height: '1.875rem',
+    color: vars.color.white,
+    backgroundColor: vars.color.red3,
+    borderRadius: '100%',
+    cursor: 'pointer',
+  },
+])
diff --git a/src/domain/Timetable/components/LectureBottomSheet/DaySelector/index.tsx b/src/domain/Timetable/components/LectureBottomSheet/DaySelector/index.tsx
new file mode 100644
index 00000000..aa7232f1
--- /dev/null
+++ b/src/domain/Timetable/components/LectureBottomSheet/DaySelector/index.tsx
@@ -0,0 +1,26 @@
+import { css } from '@styled-system/css'
+import { UseFormRegisterReturn } from 'react-hook-form'
+
+import { DayArray, DayType } from '@/types/timetable'
+import { Button } from '@/ui/Button'
+
+interface Props {
+  value: DayType
+  setValue: (day: DayType) => void
+  registerReturn: UseFormRegisterReturn<'day'>
+}
+const DaySelector = ({ value, setValue, registerReturn }: Props) => {
+  return (
+    <>
+      <div className={css({ display: 'flex', alignItems: 'center', gap: 1 })}>
+        {DayArray.map(day => (
+          <Button key={day} type="button" variant="mainPin" isActive={value === day} onClick={() => setValue(day)}>
+            {day}
+          </Button>
+        ))}
+      </div>
+      <input type="hidden" {...registerReturn} />
+    </>
+  )
+}
+export default DaySelector
diff --git a/src/features/Timetable/components/LectureBottomSheet/DrawerHandle/index.tsx b/src/domain/Timetable/components/LectureBottomSheet/DrawerHandle/index.tsx
similarity index 100%
rename from src/features/Timetable/components/LectureBottomSheet/DrawerHandle/index.tsx
rename to src/domain/Timetable/components/LectureBottomSheet/DrawerHandle/index.tsx
diff --git a/src/features/Timetable/components/LectureBottomSheet/DrawerHandle/style.css.ts b/src/domain/Timetable/components/LectureBottomSheet/DrawerHandle/style.css.ts
similarity index 100%
rename from src/features/Timetable/components/LectureBottomSheet/DrawerHandle/style.css.ts
rename to src/domain/Timetable/components/LectureBottomSheet/DrawerHandle/style.css.ts
diff --git a/src/domain/Timetable/components/LectureBottomSheet/EditSchedule/index.tsx b/src/domain/Timetable/components/LectureBottomSheet/EditSchedule/index.tsx
new file mode 100644
index 00000000..3748d61c
--- /dev/null
+++ b/src/domain/Timetable/components/LectureBottomSheet/EditSchedule/index.tsx
@@ -0,0 +1,39 @@
+import { motion } from 'framer-motion'
+import { createPortal } from 'react-dom'
+
+import * as s from './style.css'
+
+import AddOnMyOwn from '@/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn'
+import { BOTTOM_SHEET_DEFAULT_OPEN_HEIGHT } from '@/domain/Timetable/components/LectureBottomSheet/constants'
+import { GridType } from '@/types/timetable'
+
+interface Props {
+  timetableId: number
+  data: GridType
+  closeEditSheet: () => void
+}
+const EditSchedule = ({ timetableId, data, closeEditSheet }: Props) => {
+  const openHeight = Math.min(window.innerHeight * 0.5, BOTTOM_SHEET_DEFAULT_OPEN_HEIGHT)
+
+  return createPortal(
+    <>
+      <button className={s.CloseArea} onClick={closeEditSheet} />
+      <motion.div
+        className={s.Wrapper}
+        animate={{ bottom: `${openHeight}px` }}
+        initial={{ bottom: 0 }}
+        exit={{ bottom: 0 }}
+      >
+        <div className={s.Contents} style={{ height: openHeight }}>
+          <AddOnMyOwn
+            timetableId={timetableId}
+            closeModal={closeEditSheet}
+            prevValues={{ ...data, location: data.location ?? undefined }}
+          />
+        </div>
+      </motion.div>
+    </>,
+    document.body,
+  )
+}
+export default EditSchedule
diff --git a/src/features/Timetable/components/LectureBottomSheet/style.css.ts b/src/domain/Timetable/components/LectureBottomSheet/EditSchedule/style.css.ts
similarity index 100%
rename from src/features/Timetable/components/LectureBottomSheet/style.css.ts
rename to src/domain/Timetable/components/LectureBottomSheet/EditSchedule/style.css.ts
diff --git a/src/domain/Timetable/components/LectureBottomSheet/FormBox/index.tsx b/src/domain/Timetable/components/LectureBottomSheet/FormBox/index.tsx
new file mode 100644
index 00000000..ed090bbd
--- /dev/null
+++ b/src/domain/Timetable/components/LectureBottomSheet/FormBox/index.tsx
@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react'
+
+import * as s from './style.css'
+
+import { Typography } from '@/ui/Typography'
+
+interface Props extends PropsWithChildren {
+  formName: string
+}
+const FormBox = ({ formName, children }: Props) => {
+  return (
+    <div className={s.Wrapper}>
+      <Typography typography="heading2M" color="darkGray2">
+        {formName}
+      </Typography>
+      {children}
+    </div>
+  )
+}
+export default FormBox
diff --git a/src/domain/Timetable/components/LectureBottomSheet/FormBox/style.css.ts b/src/domain/Timetable/components/LectureBottomSheet/FormBox/style.css.ts
new file mode 100644
index 00000000..1ee466da
--- /dev/null
+++ b/src/domain/Timetable/components/LectureBottomSheet/FormBox/style.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css'
+
+import { f } from '@/style'
+
+export const Wrapper = style([f.flexRow, f.alignCenter, { gap: '1.25rem' }])
diff --git a/src/features/Timetable/components/LectureBottomSheet/constants.ts b/src/domain/Timetable/components/LectureBottomSheet/constants.ts
similarity index 100%
rename from src/features/Timetable/components/LectureBottomSheet/constants.ts
rename to src/domain/Timetable/components/LectureBottomSheet/constants.ts
diff --git a/src/features/Timetable/components/LectureBottomSheet/index.tsx b/src/domain/Timetable/components/LectureBottomSheet/index.tsx
similarity index 71%
rename from src/features/Timetable/components/LectureBottomSheet/index.tsx
rename to src/domain/Timetable/components/LectureBottomSheet/index.tsx
index 771f4677..275c13f9 100644
--- a/src/features/Timetable/components/LectureBottomSheet/index.tsx
+++ b/src/domain/Timetable/components/LectureBottomSheet/index.tsx
@@ -6,12 +6,11 @@ import { match } from 'ts-pattern'
 
 import * as s from './style.css'
 
-import { usePostSchedule } from '@/api/hooks/schedule'
-import AddOnMyOwn, { AddOnMyOwnForm } from '@/components/timetable/LectureBottomSheet/AddOnMyOwn'
+import AddClass from '@/domain/Timetable/components/LectureBottomSheet/AddClass'
+import AddOnMyOwn from '@/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn'
+import { BOTTOM_SHEET_DEFAULT_OPEN_HEIGHT } from '@/domain/Timetable/components/LectureBottomSheet/constants'
+import DrawerHandle from '@/domain/Timetable/components/LectureBottomSheet/DrawerHandle'
 import { isBottomSheetVisible } from '@/domain/Timetable/store/bottomSheetVisibility'
-import AddClass from '@/features/Timetable/components/LectureBottomSheet/AddClass'
-import { BOTTOM_SHEET_DEFAULT_OPEN_HEIGHT } from '@/features/Timetable/components/LectureBottomSheet/constants'
-import DrawerHandle from '@/features/Timetable/components/LectureBottomSheet/DrawerHandle'
 import { SemesterType } from '@/types/timetable'
 
 interface LectureBottomSheetProps {
@@ -26,8 +25,6 @@ const LectureBottomSheet = ({ timetableId, year, semester }: LectureBottomSheetP
 
   const openHeight = Math.min(window.innerHeight * 0.5, BOTTOM_SHEET_DEFAULT_OPEN_HEIGHT)
 
-  const { mutate: postSchedule } = usePostSchedule()
-
   const handleDrawer = useCallback(
     (type: 'chevron' | 'class' | 'own') => {
       match(type)
@@ -48,14 +45,11 @@ const LectureBottomSheet = ({ timetableId, year, semester }: LectureBottomSheetP
     },
     [sheetState],
   )
-
-  const addOnMyOwnHandler = (data: AddOnMyOwnForm) => {
-    postSchedule({ timetableId, ...data })
-  }
+  const closeDrawer = () => setIsOpen(false)
 
   return createPortal(
     <>
-      {isOpen && <button className={s.CloseArea} onClick={() => setIsOpen(false)} />}
+      {isOpen && <button className={s.CloseArea} onClick={closeDrawer} />}
       <motion.div
         className={s.Wrapper}
         animate={isOpen ? 'open' : 'close'}
@@ -65,9 +59,9 @@ const LectureBottomSheet = ({ timetableId, year, semester }: LectureBottomSheetP
         <DrawerHandle isVisible={!isOpen && isVisible} handleDrawer={handleDrawer} />
         <div className={s.Contents} style={{ height: openHeight }}>
           {sheetState === 'schedule' ? (
-            <AddOnMyOwn submitHandler={addOnMyOwnHandler} />
+            <AddOnMyOwn timetableId={timetableId} closeModal={closeDrawer} />
           ) : (
-            <AddClass timetableId={timetableId} year={year} semester={semester} closeModal={() => setIsOpen(false)} />
+            <AddClass timetableId={timetableId} year={year} semester={semester} closeModal={closeDrawer} />
           )}
         </div>
       </motion.div>
diff --git a/src/domain/Timetable/components/LectureBottomSheet/style.css.ts b/src/domain/Timetable/components/LectureBottomSheet/style.css.ts
new file mode 100644
index 00000000..2f169c85
--- /dev/null
+++ b/src/domain/Timetable/components/LectureBottomSheet/style.css.ts
@@ -0,0 +1,41 @@
+import { style } from '@vanilla-extract/css'
+
+import { f } from '@/style'
+import { vars } from '@/theme/theme.css'
+
+export const CloseArea = style([
+  f.pFixed,
+  f.wScreen,
+  f.hScreen,
+  {
+    zIndex: 99,
+    top: 0,
+    left: 0,
+  },
+])
+
+export const Wrapper = style([
+  f.pFixed,
+  f.wScreen,
+  f.flex,
+  f.justifyCenter,
+  {
+    zIndex: 100,
+    transform: 'translate3d(0, 100%, 0)',
+  },
+  f.smDown({ display: 'none' }),
+])
+
+export const Contents = style([
+  f.wFull,
+  f.flexColumn,
+  f.alignCenter,
+  {
+    backgroundColor: vars.color.white,
+    boxShadow: vars.shadow.p25,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    backdropFilter: 'blur(25px)',
+    paddingTop: '1.25rem',
+  },
+])
diff --git a/src/pages/TimetablePage/index.tsx b/src/pages/TimetablePage/index.tsx
index 9d962968..bba6e5db 100644
--- a/src/pages/TimetablePage/index.tsx
+++ b/src/pages/TimetablePage/index.tsx
@@ -4,10 +4,10 @@ import * as s from './style.css'
 
 import { useDeleteTimetable, useGetUserTimetableList } from '@/api/hooks/timetable'
 import { LoadingScreen } from '@/components/ui/spinner'
+import LectureBottomSheet from '@/domain/Timetable/components/LectureBottomSheet'
 import Timetable from '@/domain/Timetable/components/Timetable'
 import { useCreateDefaultTimetable } from '@/domain/Timetable/hooks/useCreateDefaultTimetable'
 import Header from '@/features/Timetable/components/Header'
-import LectureBottomSheet from '@/features/Timetable/components/LectureBottomSheet'
 import StatusBar from '@/features/Timetable/components/StatusBar'
 import { DEFAULT_SEMESTER_INDEX, DEFAULT_TIMETABLE_INDEX, TimetableParams } from '@/pages/TimetablePage/constants'
 import { useQueryParams } from '@/util/hooks/useQueryParams'
diff --git a/src/ui/Button/style.css.ts b/src/ui/Button/style.css.ts
index ac067496..5717f3fe 100644
--- a/src/ui/Button/style.css.ts
+++ b/src/ui/Button/style.css.ts
@@ -64,6 +64,28 @@ export const Button = styleVariants({
     },
   ],
   gray: [Base, { ':hover': { boxShadow: vars.shadow.p25 }, ':focus': { boxShadow: vars.shadow.p25 } }],
+  mainPin: [
+    f.cursorPointer,
+    f.flexRow,
+    f.alignCenter,
+    {
+      backgroundColor: vars.color.bgGray,
+      borderRadius: '30px',
+      border: `solid 1px ${vars.color.lightGray1}`,
+      color: vars.color.lightGray1,
+      transition: 'all 0.2s ease-in-out',
+      height: '2.25rem',
+      padding: '0.5rem 0.625rem',
+      gap: '0.25rem',
+      ':hover': { borderColor: vars.color.darkGray2, color: vars.color.darkGray2 },
+      '&[data-active="true"]': {
+        color: vars.color.red1,
+        borderColor: vars.color.red1,
+        backgroundColor: vars.color.bgRed1,
+      },
+      ':disabled': { cursor: 'default' },
+    },
+  ],
 })
 
 export type ButtonVariants = keyof typeof Button