diff --git a/client/src/apis/timetable.api.js b/client/src/apis/timetable.api.js
index c81a145cb21116731d48c2160647bbf18dfdf06a..0d72f56e654f4ff75bb066c977d096e9453f1201 100644
--- a/client/src/apis/timetable.api.js
+++ b/client/src/apis/timetable.api.js
@@ -11,8 +11,8 @@ const submit = async (sendData) => {
   return data
 }
 
-const remove = async () => {
-  const { data } = await axios.delete(`${baseUrl}/api/timetable/`)
+const remove = async (timeId) => {
+  const { data } = await axios.delete(`${baseUrl}/api/timetable/${timeId}`)
   return data
 }
 
diff --git a/client/src/components/Admin/TimeTable.js b/client/src/components/Admin/TimeTable.js
index e8e5ab030b2e26cefb55c5a291d83e0e0c4f36a6..b33b5647536f36f3f8a892af99ef00c6e99c505e 100644
--- a/client/src/components/Admin/TimeTable.js
+++ b/client/src/components/Admin/TimeTable.js
@@ -1,8 +1,9 @@
 import { useState, useEffect } from "react";
 import moment from 'moment';
-import Calender from "../Calender/Calender.js";
+import HorizontalCalender from "../Calender/HorizontalCalender.js";
 import timetableApi from "../../apis/timetable.api.js";
 import catchErrors from "../../utils/catchErrors.js";
+import styles from "./admin.module.scss";
 
 const TimeTable = () => {
     const [selectDate, setSelectDate] = useState(moment().format('YYYY-MM-DD'))
@@ -23,10 +24,10 @@ const TimeTable = () => {
         }
     }
 
-    async function deleteTime() {
+    async function deleteTime(timeId) {
         try {
             setError("")
-            await timetableApi.remove()
+            await timetableApi.remove(timeId)
             alert('해당 상영시간표 정보를 성공적으로 삭제하였습니다.')
             getTimeTable(selectDate)
         } catch (error) {
@@ -35,24 +36,22 @@ const TimeTable = () => {
     }
 
     return (
-        <div className="col-12 col-lg-6">
-            {console.log("list==", timeList)}
-            <Calender selectDate={selectDate} setSelectDate={setSelectDate} />
+        <div className="col-12 col-lg-6 ms-lg-1 mb-5">
+            <HorizontalCalender selectDate={selectDate} setSelectDate={setSelectDate} />
             {timeList.length !== 0 ?
-                timeList.map(el => <>
-                    <h5>{el.theaterName} 관</h5>
-                    {/* {arr = el.timetable.map(time => <div className="card">
-                        <div className="card-body">{moment(time.start_time, 'hh:mm')} ~ {moment(time.end_time, 'hh:mm')}</div>
-                    </div>
-                    )
-                    } */}
-                    {/* {el.timetable.map(time => {
-                        if (el.id === time.id) return <div className="card">
-                        <div className="card-body">{moment(time.start_time, 'hh:mm')} ~ {moment(time.end_time, 'hh:mm')}</div>
-                    </div>
-                    })} */}
-                </>)
-                : <></>}
+                timeList.map(el => <div className="mt-4">
+                    <h5 className="mb-0">{el.theaterName} 관 / <p className="d-inline fs-6 mb-0">{el.theatertype.theaterTypeName}</p></h5>
+                    {el.timetable.map(time => <div className="d-inline-flex flex-column m-2">
+                        <div className="d-flex justify-content-end">
+                            <button type="button" className={`btn btn-dark btn-sm ${styles.customBtn}`} onClick={() => deleteTime(time.id)}>X</button>
+                        </div>
+                        <div className="card">
+                            <div className="card-body py-1">{moment(time.start_time).format('HH:mm')} ~ {moment(time.end_time).format('HH:mm')}</div>
+                            <div className="card-footer text-center py-1">{time.title}</div>
+                        </div>
+                    </div>)}
+                </div>)
+                : <p className="text-center mt-5 mb-0">서버에 저장되어 있는 상영시간표가 존재하지 않습니다.<br />아래의 양식을 작성해 새로운 상영시간표를 등록해주세요.</p>}
         </div>
     )
 }
diff --git a/client/src/components/Admin/TimeTableEditForm.js b/client/src/components/Admin/TimeTableEditForm.js
index ca9161183b1ed2b496bcbc3bae3b3d31ca233c81..7a6bb88fab52b0abf0cb64bcf2a9c823753df3a8 100644
--- a/client/src/components/Admin/TimeTableEditForm.js
+++ b/client/src/components/Admin/TimeTableEditForm.js
@@ -75,7 +75,7 @@ const TimeTableEditForm = () => {
         const { list } = showTimes
         const isSelect = Object.values(selectInfo).every((el) => Boolean(el))
         if (isSelect) {
-            const isTime = list.find(el => el.theaterTypeId === selectInfo.theater && (getDate(el.start) <= getDate(selectInfo.start) && getDate(selectInfo.start) <= getDate(el.end)) || (getDate(el.start) > getDate(selectInfo.start) && getDate(el.start) <= getDate(selectInfo.end)))
+            const isTime = list.find(el => (el.theaterTypeId === selectInfo.theater) && ((getDate(el.start) <= getDate(selectInfo.start) && getDate(selectInfo.start) <= getDate(el.end)) || (getDate(el.start) > getDate(selectInfo.start) && getDate(el.start) <= getDate(selectInfo.end))))
             if (isTime) alert('이미 추가한 상영시간대입니다. 다른 시간대를 골라주시기 바랍니다.')
             else {
                 const theater = theaterList.find(theater => theater.theatertypeId === selectInfo.theater)
@@ -146,7 +146,8 @@ const TimeTableEditForm = () => {
     }
 
     return (
-        <form className="col-12 col-lg-6" onSubmit={handleSubmit}>
+        <form className="col-12 col-lg-6 me-lg-1" onSubmit={handleSubmit}>
+            <h5 className={`border-top border-dark border-2 pt-3 mb-3 ${styles.borderLg}`}>상영시간표 등록</h5>
             <select className={`form-select mb-3 ${styles.shadowNone} ${styles.selectInput}`} id="movieId" name="movieId" value={selectId} onChange={handleChange} aria-label="select movie" defaultValue="0">
                 {movieList.length !== 0 ?
                     movieList.map((movie, index) => {
diff --git a/client/src/components/Admin/admin.module.scss b/client/src/components/Admin/admin.module.scss
index 20072de30da91deec92b1b1c5e991732fea20461..bb1d3893f290d11178d2f555a4bd06c535a1cc0e 100644
--- a/client/src/components/Admin/admin.module.scss
+++ b/client/src/components/Admin/admin.module.scss
@@ -44,6 +44,12 @@
     }
 }
 
+@media screen and (min-width: 992px) {
+    .borderLg {
+        border: 0 !important;
+    }
+}
+
 .selectInput {
     & option[disabled] {
         color: #000;
diff --git a/client/src/components/Calender/Calender.js b/client/src/components/Calender/Calender.js
deleted file mode 100644
index 8381ad2f81dcd4ed8a70599f24ea9ea2b9ae75bb..0000000000000000000000000000000000000000
--- a/client/src/components/Calender/Calender.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useState, useEffect } from "react";
-import moment from "moment";
-import styles from "./calender.module.scss";
-
-const Calender = ({ selectDate, setSelectDate }) => {
-    const [dateList, setDateList] = useState([])
-    const [week, setWeek] = useState(["일", "월", "화", "수", "목", "금", "토"])
-
-    useEffect(() => {
-        getDate(selectDate)
-    }, [])
-
-    function getDate(oneDay) {
-        let dateArr = []
-        let lastWeek = moment(oneDay).subtract(7, 'days')
-        const nextWeek = moment(oneDay).add(7, 'days')
-        while (lastWeek.isBefore(nextWeek)) {
-            dateArr.push({ date: lastWeek.format('YYYY-MM-DD'), day: lastWeek.format('d') })
-            lastWeek.add(1, 'days')
-        }
-        console.log("arr=", dateArr)
-        console.log("same==", moment(oneDay).isSame('2021-08-07'))
-        const resultArr = dateArr.map(el => <div onClick={() => setSelectDate(el.date)}>
-            {moment(el.date).isSame(oneDay) || el.date.split('-')[2] === "01" ? <strong>{moment(el.date).format('YYYY.MM')}</strong> : ""}
-            <div>
-                <strong>{moment(el.date).format('DD')}</strong>
-                <em>{moment(el.date).isSame(oneDay) ? "오늘" : week[el.day]}</em>
-            </div>
-        </div>)
-        setDateList(resultArr)
-    }
-
-    return (
-        <>
-            {console.log("date==", selectDate)}
-            <div>
-                <i className="bi bi-chevron-left"></i>
-                {dateList.map(el => el)}
-                <i className="bi bi-chevron-right"></i>
-            </div>
-        </>
-    )
-}
-
-export default Calender
\ No newline at end of file
diff --git a/client/src/components/Calender/HorizontalCalender.js b/client/src/components/Calender/HorizontalCalender.js
new file mode 100644
index 0000000000000000000000000000000000000000..c6c07e1a33f617efd3ae5c4c8d0dfb7ee3eea240
--- /dev/null
+++ b/client/src/components/Calender/HorizontalCalender.js
@@ -0,0 +1,44 @@
+import { useState, useEffect } from "react";
+import moment from "moment";
+import styles from "./calender.module.scss";
+
+const Calender = ({ selectDate, setSelectDate }) => {
+    const [dateList, setDateList] = useState([])
+    const [week, setWeek] = useState(["일", "월", "화", "수", "목", "금", "토"])
+
+    useEffect(() => {
+        getDate(selectDate)
+    }, [])
+
+    function getDate(oneDay) {
+        let dateArr = []
+        let lastWeek = moment(oneDay).subtract(7, 'days')
+        const nextWeek = moment(oneDay).add(7, 'days')
+        while (lastWeek.isBefore(nextWeek)) {
+            dateArr.push({ date: lastWeek.format('YYYY-MM-DD'), day: lastWeek.format('d') })
+            lastWeek.add(1, 'days')
+        }
+        const resultArr = dateArr.map(el => <div className="col-2 align-self-end text-center" onClick={() => setSelectDate(el.date)}>
+            {moment(el.date).isSame(oneDay) || el.date.split('-')[2] === "01" ? <strong className={styles.yearmonth}>{moment(el.date).format('YYYY.MM')}</strong> : ""}
+            <div className={"d-flex flex-column " + ((Number(el.day) === 0 || Number(el.day) === 6) ? ((Number(el.day) === 0) ? "text-danger" : "text-primary") : "")}>
+                <strong className={moment(el.date).isSame(oneDay) ? styles.selectDate : ""}>{moment(el.date).format('DD')}</strong>
+                <strong>{moment(el.date).isSame(oneDay) ? "오늘" : week[el.day]}</strong>
+            </div>
+        </div>)
+        setDateList(resultArr)
+    }
+
+    return (
+        <>  
+            {console.log("date==", selectDate)}
+            <div className="d-flex position-relative border-bottom border-dark border-2 p-3">
+                <i className={`bi bi-calendar2 position-absolute top-0 ${styles.calender}`}></i>
+                <i className="col-1 bi bi-chevron-left align-self-center text-center"></i>
+                <div className={`d-flex col-10 ${styles.box}`}>{dateList.map(el => el)}</div>
+                <i className="col-1 bi bi-chevron-right align-self-center text-center"></i>
+            </div>
+        </>
+    )
+}
+
+export default Calender
\ No newline at end of file
diff --git a/client/src/components/Calender/calender.module.scss b/client/src/components/Calender/calender.module.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..91770508fcf538aca07fbc504c7dc32a22e76128 100644
--- a/client/src/components/Calender/calender.module.scss
+++ b/client/src/components/Calender/calender.module.scss
@@ -0,0 +1,21 @@
+.box {
+    overflow: hidden;
+
+    & .yearmonth {
+        position: relative;
+        top: 0;
+        width: 100%;
+        font-size: 10px;
+    }
+
+    & .selectDate {
+        background-color: #000;
+        color: #fff;
+        border-radius: 50%;
+    }
+}
+
+.calender {
+    right: 13px;
+    font-size: 1.5em;
+}
\ No newline at end of file
diff --git a/server/controllers/timetable.controller.js b/server/controllers/timetable.controller.js
index 7502e07fb4ff4faa1b388f9ca0f51525f14bc4b9..e4e4e4c14e605af62cff0a92ccdd2fc39e2fbf04 100644
--- a/server/controllers/timetable.controller.js
+++ b/server/controllers/timetable.controller.js
@@ -1,4 +1,4 @@
-import { TimeTable, Theater } from "../db/index.js";
+import { TimeTable, Theater, TheaterType } from "../db/index.js";
 import moment from 'moment';
 import sequelize from 'sequelize'
 const { Op } = sequelize
@@ -8,21 +8,18 @@ const getAll = async (req, res) => {
         const { when } = req.query
         const selectDate = new Date(when)
         const theaterArr = []
-        // const timeTableArr = []
         const findAll = await TimeTable.findAll({ where: { date: selectDate }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [["theater", "ASC"], ["start_time", "ASC"]] })
         findAll.forEach(element => {
             if (!theaterArr.includes(element.theater)) theaterArr.push(element.theater)
         })
-        const findTheater = await Theater.findAll({ where: { id: theaterArr }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [['theaterName']] })
+        const findTheater = await Theater.findAll({ where: { id: theaterArr }, attributes: { exclude: ['createdAt', 'updatedAt'] }, include: [TheaterType], order: [['theaterName']] })
         findTheater.forEach(el => {
             const arr = findAll.filter(timetable => {
                 if (el.id === timetable.theater) return timetable.dataValues
             })
             el.dataValues.timetable = arr
-            // timeTableArr.push({ id: el.id, info: arr })
         })
         return res.json(findTheater)
-        // return res.json({findTheater, timeTableArr})
     } catch (error) {
         return res.status(500).send(error.message || "상영시간표 정보 가져오는 중 에러 발생")
     }
@@ -85,7 +82,7 @@ const getTime = (string, runtime = 0) => {
 const remove = async (req, res) => {
     try {
         const { timeId } = req.params
-        const delNum = await TimeTable.destroy({ where: {} })
+        const delNum = await TimeTable.destroy({ where: { id: timeId } })
         if (delNum) res.json(delNum)
         else throw new Error("해당 정보를 서버에서 삭제하는데 실패했습니다.")
     } catch (error) {