diff --git a/src/assets/fonts/subset-PyeongChangPeace-Bold.woff2 b/src/assets/fonts/subset-PyeongChangPeace-Bold.woff2
new file mode 100644
index 0000000..afe0917
Binary files /dev/null and b/src/assets/fonts/subset-PyeongChangPeace-Bold.woff2 differ
diff --git a/src/assets/fonts/subset-PyeongChangPeace-Light.woff2 b/src/assets/fonts/subset-PyeongChangPeace-Light.woff2
new file mode 100644
index 0000000..b606d8d
Binary files /dev/null and b/src/assets/fonts/subset-PyeongChangPeace-Light.woff2 differ
diff --git a/src/components/ImageModal/index.css.ts b/src/components/ImageModal/index.css.ts
index 1d392e5..176023d 100644
--- a/src/components/ImageModal/index.css.ts
+++ b/src/components/ImageModal/index.css.ts
@@ -1,13 +1,15 @@
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
+  position: "relative",
   width: "100%",
   height: "100%",
 });
 export const zoomInBtn = style({
   position: "absolute",
+  top: "5px",
+  left: "5px",
   cursor: "pointer",
-  margin: "5px",
   padding: "3px",
   borderRadius: "5px",
   backgroundColor: "rgba(255, 255, 255, 0.3)",
@@ -17,3 +19,13 @@ export const image = style({
   height: "100%",
   objectFit: "cover",
 });
+
+export const placeBtn = style({
+  position: "absolute",
+  top: "5px",
+  right: "5px",
+  cursor: "pointer",
+  padding: "3px",
+  borderRadius: "5px",
+  backgroundColor: "rgba(255, 255, 255, 0.3)",
+});
diff --git a/src/components/ImageModal/index.tsx b/src/components/ImageModal/index.tsx
index e48cffe..ddb3d53 100644
--- a/src/components/ImageModal/index.tsx
+++ b/src/components/ImageModal/index.tsx
@@ -1,6 +1,31 @@
 import * as styles from "./index.css.ts";
 
-export default function ImageModal({ src, alt }: { src: string; alt: string }) {
+interface ImageModalProps {
+  src: string;
+  alt: string;
+  activePlace?: "60주년기념관" | "함인섭광장" | "대운동장";
+}
+
+export default function ImageModal({ src, alt, activePlace }: ImageModalProps) {
+  const placeLinks: { [key: string]: string } = {
+    "60주년기념관": "https://kko.to/hKoJW3SEaa",
+    함인섭광장: "https://kko.to/KvvTprkn8T",
+    대운동장: "https://kko.to/MkBZQvfuH0",
+  };
+
+  const handlePlaceButtonClick = () => {
+    if (activePlace) {
+      const link = placeLinks[activePlace];
+      if (link) {
+        window.location.href = link;
+      } else {
+        console.error(`Link for ${activePlace} is not defined.`);
+      }
+    } else {
+      console.error("activePlace is not provided.");
+    }
+  };
+
   return (
     <div className={styles.container}>
       <span
@@ -9,6 +34,14 @@ export default function ImageModal({ src, alt }: { src: string; alt: string }) {
       >
         zoom_in
       </span>
+      {alt === "layout" && (
+        <span
+          className={`material-symbols-outlined ${styles.placeBtn}`}
+          onClick={handlePlaceButtonClick}
+        >
+          map
+        </span>
+      )}
       <img src={src} alt={alt} className={styles.image} />
     </div>
   );
diff --git a/src/pages/BoothNFoodDetail/Overview/index.tsx b/src/pages/BoothNFoodDetail/Overview/index.tsx
index dd4b188..e6785fa 100644
--- a/src/pages/BoothNFoodDetail/Overview/index.tsx
+++ b/src/pages/BoothNFoodDetail/Overview/index.tsx
@@ -1,4 +1,5 @@
 import ImageModal from "../../../components/ImageModal/index.tsx";
+import { BoothPlaceType } from "../../../shared/types/asset_types.ts";
 import * as styles from "./index.css.ts";
 
 type OverviewProps = {
@@ -6,7 +7,7 @@ type OverviewProps = {
   date: number[];
   imgURL: string;
   order: number;
-  place: string;
+  place: BoothPlaceType;
 };
 
 export default function Overview({ title, date, imgURL, order, place }: OverviewProps) {
@@ -20,7 +21,13 @@ export default function Overview({ title, date, imgURL, order, place }: Overview
           <div className={styles.hoursContainer}>
             <div className={styles.hoursLabel}>
               <span className="material-symbols-outlined">schedule</span>
-              <span>{title.includes("주점") ? "18:00 ~ 01:00" : "11:00 ~ 17:00"}</span>
+              <span>
+                {title === "주점"
+                  ? place === "미래광장"
+                    ? "18:00 ~ 00:00"
+                    : "18:00 ~ 01:00"
+                  : "11:00 ~ 17:00"}
+              </span>
             </div>
             <div className={styles.hoursLabel}>
               <span className="material-symbols-outlined">date_range</span>
diff --git a/src/pages/BoothNFoodList/index.tsx b/src/pages/BoothNFoodList/index.tsx
index 8d83478..651cb6b 100644
--- a/src/pages/BoothNFoodList/index.tsx
+++ b/src/pages/BoothNFoodList/index.tsx
@@ -29,15 +29,15 @@ export default function BoothNFoodList() {
         <div className={styles.imgContainer2}>
           {activePlace !== "미래광장" && (
             <ImageModal
-              {...{
-                src:
-                  activePlace === "함인섭광장"
-                    ? haminseop_layout
-                    : activePlace === "대운동장"
-                      ? playground_layout
-                      : sixty_anniv_layout,
-                alt: "layout",
-              }}
+              src={
+                activePlace === "함인섭광장"
+                  ? haminseop_layout
+                  : activePlace === "대운동장"
+                    ? playground_layout
+                    : sixty_anniv_layout
+              }
+              alt="layout"
+              activePlace={activePlace}
             />
           )}
         </div>
diff --git a/src/pages/Notice/index.tsx b/src/pages/Notice/index.tsx
index f888fb7..22f13e0 100644
--- a/src/pages/Notice/index.tsx
+++ b/src/pages/Notice/index.tsx
@@ -101,19 +101,25 @@ function Notice() {
           ) : (
             currentNotices.map((noticeItem, index) => (
               <div className={noticeContainer} key={noticeItem.id}>
-                <div className={notice}>
+                <div onClick={() => toggleNotice(noticeItem.id)} className={notice}>
                   <div style={{ display: "flex", alignItems: "center" }}>
                     <p className={noticeNumber}>{index + 1 + (currentPage - 1) * itemsPerPage}</p>
                     {/* 공지사항의 renewal이 true일 경우 'New' 배지를 표시 */}
                     {noticeItem.renewal && <span className={newBadge}>중요</span>}
                   </div>
 
-                  <div onClick={() => toggleNotice(noticeItem.id)} className={noticeContentWrapper}>
+                  <div className={noticeContentWrapper}>
                     <p className={noticeTitle}>{noticeItem.title}</p>
                   </div>
 
                   {/* downbtn을 클릭하면 토글 */}
-                  <button onClick={() => toggleNotice(noticeItem.id)} className={arrowButton}>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation(); // 이벤트 전파 방지
+                      toggleNotice(noticeItem.id);
+                    }}
+                    className={arrowButton}
+                  >
                     <span className="material-symbols-outlined">
                       {expandedNoticeId === noticeItem.id ? "arrow_drop_up" : "arrow_drop_down"}
                     </span>
diff --git a/src/pages/Notice/notice.css.ts b/src/pages/Notice/notice.css.ts
index 6e74419..2b5e70a 100644
--- a/src/pages/Notice/notice.css.ts
+++ b/src/pages/Notice/notice.css.ts
@@ -95,6 +95,7 @@ export const notice = style({
   alignItems: "center",
   flexDirection: "row",
   position: "relative",
+  cursor: "pointer",
   "@media": {
     "(max-width: 375px)": {
       //Iphone SE 같은 소형폰
@@ -115,7 +116,6 @@ export const noticeContentWrapper = style({
   overflow: "hidden", // 넘치는 부분을 숨김
   position: "relative",
   marginLeft: 10,
-  cursor: "pointer",
 });
 
 export const noticeTitle = style({
diff --git a/src/pages/QnA/index.tsx b/src/pages/QnA/index.tsx
index f3e8b52..e26c14f 100644
--- a/src/pages/QnA/index.tsx
+++ b/src/pages/QnA/index.tsx
@@ -121,19 +121,23 @@ function QnA() {
           ) : (
             currentNotices.map((QnaItem, index) => (
               <div className={qnaContainer} key={QnaItem.id}>
-                <div className={qna}>
+                <div onClick={() => toggleQna(QnaItem.id)} className={qna}>
                   {/* 번호와 제목 표시 */}
                   <div style={{ display: "flex", alignItems: "center" }}>
                     <p className={qnaNumber}>{index + 1 + (currentPage - 1) * itemsPerPage}</p>
                   </div>
 
-                  <div onClick={() => toggleQna(QnaItem.id)} className={qnaContentWrapper}>
+                  <div className={qnaContentWrapper}>
                     <p className={qnaContent}>{QnaItem.title}</p>
                   </div>
+
                   {/* downbtn을 클릭하면 토글 */}
                   <button
-                    onClick={() => toggleQna(QnaItem.id)}
-                    className={arrowButton} // 스타일 추가
+                    onClick={(e) => {
+                      e.stopPropagation(); // 이벤트 버블링을 막음
+                      toggleQna(QnaItem.id);
+                    }}
+                    className={arrowButton}
                   >
                     <span className="material-symbols-outlined">
                       {expandedQna.includes(QnaItem.id) ? "arrow_drop_up" : "arrow_drop_down"}
diff --git a/src/pages/QnA/qna.css.ts b/src/pages/QnA/qna.css.ts
index 629778b..c0dc79b 100644
--- a/src/pages/QnA/qna.css.ts
+++ b/src/pages/QnA/qna.css.ts
@@ -63,6 +63,7 @@ export const qna = style({
   alignItems: "center",
   flexDirection: "row",
   position: "relative",
+  cursor: "pointer",
   "@media": {
     "(max-width: 375px)": {
       //Iphone SE 같은 소형폰
@@ -83,7 +84,6 @@ export const qnaContentWrapper = style({
   overflow: "hidden", // 넘치는 부분을 숨김
   position: "relative",
   marginLeft: 10,
-  cursor: "pointer",
 });
 
 export const qnaContent = style({
diff --git a/src/pages/Timetable/.css.ts b/src/pages/Timetable/.css.ts
index ced9d30..b46ade2 100644
--- a/src/pages/Timetable/.css.ts
+++ b/src/pages/Timetable/.css.ts
@@ -17,13 +17,27 @@ export const section = style({
 });
 
 const baseFilterButton = style({
+  position: "relative",
   padding: "10px 15px",
   margin: "0 5px 10px 0",
   border: "none",
   borderRadius: "20px",
   cursor: "pointer",
-  transition: "background-color 0.3s ease",
-  backgroundColor: "rgba(79, 205, 197, 0.5)",
+  transition: "all 0.3s ease",
+  overflow: "hidden",
+
+  "::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(255, 255, 255, 0.5)",
+    transition: "background-color 0.3s ease",
+    zIndex: -1,
+  },
+
   "@media": {
     "screen and (max-width: 768px)": {
       padding: "8px 12px",
@@ -37,7 +51,8 @@ export const filterButton = styleVariants({
     baseFilterButton,
     {
       color: vars.color.white,
-      ":hover": {
+
+      ":hover::before": {
         backgroundColor: "rgba(255, 255, 255, 0.2)",
       },
     },
@@ -45,10 +60,17 @@ export const filterButton = styleVariants({
   active: [
     baseFilterButton,
     {
+      backgroundImage: "linear-gradient(to top left, #04D1C3, #009efd, #FFFFFF)",
       fontWeight: "bold",
-      backgroundColor: "rgba(255, 255, 255, 0.3)",
-      color: vars.color.white,
-      ":hover": {
+      WebkitBackgroundClip: "text",
+      backgroundClip: "text",
+      color: "transparent",
+
+      "::before": {
+        backgroundColor: "rgba(255, 255, 255, 0.5)",
+      },
+
+      ":hover::before": {
         backgroundColor: "rgba(255, 255, 255, 0.4)",
       },
     },
@@ -70,13 +92,13 @@ export const timeTableItem = style({
 });
 
 export const timeTableTitle = style({
-  fontSize: "1.2rem",
+  fontSize: "1.3rem",
   fontWeight: "bold",
   marginBottom: "10px",
   fontFamily: vars.font.pyeongChangBold,
   "@media": {
     "screen and (max-width: 768px)": {
-      fontSize: "1rem",
+      fontSize: "1.3rem",
       marginBottom: "8px",
     },
   },
@@ -85,7 +107,7 @@ export const timeTableTitle = style({
 export const timeTableDescription = style({
   fontSize: "0.9rem",
   color: "#6c757d",
-  marginBottom: "10px",
+  marginBottom: "20px",
   fontFamily: vars.font.pretendardRegular,
   "@media": {
     "screen and (max-width: 768px)": {
@@ -94,6 +116,13 @@ export const timeTableDescription = style({
   },
 });
 
+export const timeTableLink = style({
+  color: vars.color.blue2,
+  textDecoration: "none",
+  marginLeft: "5px",
+  fontFamily: vars.font.pretendardRegular,
+});
+
 export const timeTableTime = style({
   fontSize: "0.9rem",
   fontWeight: "bold",
@@ -101,7 +130,7 @@ export const timeTableTime = style({
   fontFamily: vars.font.pretendardRegular,
   "@media": {
     "screen and (max-width: 768px)": {
-      fontSize: "0.8rem",
+      fontSize: "1rem",
     },
   },
 });
@@ -145,20 +174,22 @@ export const artistImage = style({
   height: "100px",
   marginRight: "10px",
   objectFit: "cover",
+
   "@media": {
     "screen and (max-width: 768px)": {
-      width: "80px",
-      height: "80px",
+      width: "150px",
+      height: "150px",
     },
   },
 });
 
 export const artistName = style({
-  fontSize: "2rem",
+  fontSize: "1.7rem",
   fontFamily: vars.font.pyeongChangLight,
+  wordBreak: "keep-all",
   "@media": {
     "screen and (max-width: 768px)": {
-      fontSize: "2rem",
+      fontSize: "1.7rem",
     },
   },
 });
diff --git a/src/pages/Timetable/index.tsx b/src/pages/Timetable/index.tsx
index 5baf5b2..0adfc63 100644
--- a/src/pages/Timetable/index.tsx
+++ b/src/pages/Timetable/index.tsx
@@ -1,106 +1,20 @@
-import React, { useEffect, useState, useMemo, useCallback, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { timeTableInfo } from "./timeTableInfo.ts";
-import { timeTableFilterProps, timeTableInfoProps } from "../../shared/types/timeTable.ts";
 import * as styles from "./.css.ts";
-import { Link } from "react-router-dom";
-import { artistInfoListProps } from "../../shared/types/mainPage.ts";
+import { FilterButton, TimeTableItem } from "./subComponents.tsx";
+import { clearTime, END_DATE, START_DATE, TIME_TABLE_FILTER } from "./utils.tsx";
 
-// Constants
-const TIME_TABLE_FILTER: timeTableFilterProps[] = [
-  { name: "1일차", date: new Date("2024-09-23T00:00:00+09:00") },
-  { name: "2일차", date: new Date("2024-09-24T00:00:00+09:00") },
-  { name: "3일차", date: new Date("2024-09-25T00:00:00+09:00") },
-  { name: "4일차", date: new Date("2024-09-26T00:00:00+09:00") },
-];
-
-const START_DATE = new Date("2024-09-23T00:00:00+09:00");
-const END_DATE = new Date("2024-09-26T00:00:00+09:00");
-
-const clearTime = (date: Date): Date => {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-};
-
-const formatTime = (date: Date): string => {
-  return date.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", hour12: false });
-};
-
-const getEventStatus = (
-  event: timeTableInfoProps,
-  currentTime: Date,
-): "past" | "current" | "future" => {
-  let adjustedStartTime = new Date(event.startTime);
-
-  // KNU-ARTIST 항목에 대한 시작 시간 조정
-  if (event.description.includes("KNU-ARTIST")) {
-    if (event.description.includes("댄스")) {
-      adjustedStartTime = new Date(adjustedStartTime.getTime() - 5 * 60000);
-    } else if (event.description.includes("밴드")) {
-      adjustedStartTime = new Date(adjustedStartTime.getTime() - 4 * 60000);
-    }
-  }
-
-  if (currentTime < adjustedStartTime) return "future";
-  if (currentTime > event.endTime) return "past";
-  return "current";
-};
-
-// Sub-components
-const FilterButton: React.FC<{
-  timeTable: timeTableFilterProps;
-  onClick: (date: Date) => void;
-  isActive: boolean;
-}> = React.memo(({ timeTable, onClick, isActive }) => (
-  <button
-    className={isActive ? styles.filterButton.active : styles.filterButton.default}
-    onClick={() => onClick(clearTime(timeTable.date))}
-  >
-    {timeTable.name}
-  </button>
-));
-
-const ArtistInfo: React.FC<{
-  artist: artistInfoListProps[];
-}> = React.memo(({ artist }) => (
-  <div className={styles.artistInfoContainer}>
-    <h3 className={styles.artistInfoTitle}>상세정보</h3>
-    {artist.map((a: artistInfoListProps, index) => (
-      <Link to={a.url} key={index} className={styles.artistItem}>
-        <img src={a.image} alt={a.name} className={styles.artistImage} />
-        <p className={styles.artistName}>{a.name}</p>
-      </Link>
-    ))}
-  </div>
-));
-
-const TimeTableItem: React.FC<{
-  timeTable: timeTableInfoProps;
-  currentTime: Date;
-  refCallback: (node: HTMLDivElement | null) => void;
-}> = React.memo(({ timeTable, currentTime, refCallback }) => {
-  const status = getEventStatus(timeTable, currentTime);
-
-  return (
-    <div className={`${styles.timeTableItem}`} ref={status === "current" ? refCallback : null}>
-      <h2 className={styles.timeTableTitle}>{timeTable.title}</h2>
-      {timeTable.descriptionShow && (
-        <p className={styles.timeTableDescription}>{timeTable.description}</p>
-      )}
-      <p className={styles.timeTableTime}>
-        {timeTable.startTime.getMonth() + 1}/{timeTable.startTime.getDate()} |{" "}
-        {formatTime(timeTable.startTime)} ~ {formatTime(timeTable.endTime)}
-      </p>
-      {timeTable.artist && <ArtistInfo artist={timeTable.artist} />}
-      {status === "current" && <div className={styles.currentIndicator}>진행 중</div>}
-    </div>
-  );
-});
-
-// Main component
+/**
+ * 타임테이블 페이지
+ */
 export default function Timetable() {
   const [viewTime, setViewTime] = useState<Date>(START_DATE);
   const [currentTime, setCurrentTime] = useState<Date>(new Date());
   const lastCurrentEventRef = useRef<HTMLDivElement | null>(null);
 
+  /**
+   * 현재 날짜에 맞게 기준시간 설정
+   */
   useEffect(() => {
     const today = clearTime(new Date());
     const start = clearTime(START_DATE);
@@ -120,6 +34,11 @@ export default function Timetable() {
     return () => clearInterval(timer);
   }, []);
 
+  /**
+   * 필터링된 타임테이블 정보
+   * @see timeTableInfo
+   * @see useMemo
+   */
   const filteredTimeTableInfo = useMemo(
     () =>
       timeTableInfo
@@ -128,23 +47,43 @@ export default function Timetable() {
     [viewTime],
   );
 
+  /**
+   * 현재 진행중인 이벤트로 스크롤
+   */
   useEffect(() => {
-    // 진행 중인 마지막 요소로 스크롤
-    if (lastCurrentEventRef.current) {
-      if ("scrollIntoView" in lastCurrentEventRef.current) {
-        lastCurrentEventRef.current.scrollIntoView({ behavior: "smooth" });
-        return;
-      }
+    if (
+      lastCurrentEventRef.current &&
+      clearTime(currentTime).getTime() === clearTime(viewTime).getTime()
+    ) {
+      const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+      const offset = rootFontSize * 3.75;
+
+      const elementPosition =
+        lastCurrentEventRef.current!.getBoundingClientRect().top + window.scrollY;
+      const offsetPosition = elementPosition - offset;
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: "smooth",
+      });
+    } else {
+      window.scrollTo(0, 0);
     }
-    window.scrollTo(0, 0);
   }, [filteredTimeTableInfo]);
 
+  /**
+   * 필터 클릭 이벤트
+   */
   const handleFilterClick = useCallback((date: Date) => {
     setViewTime(clearTime(date));
   }, []);
 
+  /**
+   * 렌더링
+   */
   return (
     <section className={styles.section}>
+      {/*상단 필터링 버튼*/}
       <div>
         {TIME_TABLE_FILTER.map((timeTable, index) => (
           <FilterButton
@@ -155,6 +94,7 @@ export default function Timetable() {
           />
         ))}
       </div>
+      {/*필터링된 타임테이블 정보*/}
       <div>
         {filteredTimeTableInfo.map((timeTable, index) => (
           <React.Fragment key={index}>
@@ -169,6 +109,7 @@ export default function Timetable() {
           </React.Fragment>
         ))}
       </div>
+      {/*하단 필터링 버튼*/}
       <div>
         {TIME_TABLE_FILTER.map((timeTable, index) => (
           <FilterButton
diff --git a/src/pages/Timetable/subComponents.tsx b/src/pages/Timetable/subComponents.tsx
new file mode 100644
index 0000000..b74d00a
--- /dev/null
+++ b/src/pages/Timetable/subComponents.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import { artistInfoListProps } from "../../shared/types/mainPage.ts";
+import * as styles from "./.css.ts";
+import { Link } from "react-router-dom";
+import { timeTableFilterProps, timeTableInfoProps } from "../../shared/types/timeTable.ts";
+import { clearTime, formatTime, getEventStatus } from "./utils.tsx";
+
+/**
+ * 일별 필터 버튼
+ */
+export const FilterButton: React.FC<{
+  timeTable: timeTableFilterProps;
+  onClick: (date: Date) => void;
+  isActive: boolean;
+}> = React.memo(({ timeTable, onClick, isActive }) => (
+  <button
+    className={isActive ? styles.filterButton.active : styles.filterButton.default}
+    onClick={() => onClick(clearTime(timeTable.date))}
+  >
+    {timeTable.name}
+  </button>
+));
+
+/**
+ * 아티스트 정보
+ * @param artist 아티스트 정보
+ * @see artistInfoListProps
+ */
+const ArtistInfo: React.FC<{
+  artist: artistInfoListProps[];
+}> = React.memo(({ artist }) => (
+  <div className={styles.artistInfoContainer}>
+    <h3 className={styles.artistInfoTitle}>상세정보</h3>
+    {artist.map((a: artistInfoListProps, index) => (
+      <Link to={a.url} key={index} className={styles.artistItem}>
+        <img src={a.image} alt={a.name} className={styles.artistImage} />
+        <p className={styles.artistName}>{a.name}</p>
+      </Link>
+    ))}
+  </div>
+));
+
+/**
+ * 타임테이블 아이템
+ * @param timeTable 타임테이블 정보
+ * @param currentTime 현재 시간
+ * @param refCallback 현재 진행중인 이벤트를 가리키기 위한 콜백
+ */
+export const TimeTableItem: React.FC<{
+  timeTable: timeTableInfoProps;
+  currentTime: Date;
+  refCallback: (node: HTMLDivElement | null) => void;
+}> = React.memo(({ timeTable, currentTime, refCallback }) => {
+  const status = getEventStatus(timeTable, currentTime);
+
+  return (
+    <div className={`${styles.timeTableItem}`} ref={status === "current" ? refCallback : null}>
+      <h2 className={styles.timeTableTitle}>{timeTable.title}</h2>
+      {timeTable.descriptionShow && (
+        <p className={styles.timeTableDescription}>
+          {timeTable.description}
+          {timeTable.link && (
+            <a
+              className={styles.timeTableLink}
+              href={timeTable.link.url}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {timeTable.link.text}
+            </a>
+          )}
+        </p>
+      )}
+      <p className={styles.timeTableTime}>
+        {timeTable.startTime.getMonth() + 1}/{timeTable.startTime.getDate()} |{" "}
+        {formatTime(timeTable.startTime)} ~ {formatTime(timeTable.endTime)}
+      </p>
+      {timeTable.artist && <ArtistInfo artist={timeTable.artist} />}
+      {status === "current" && <div className={styles.currentIndicator}>진행 중</div>}
+    </div>
+  );
+});
diff --git a/src/pages/Timetable/timeTableInfo.ts b/src/pages/Timetable/timeTableInfo.ts
index d892a7f..aa88aea 100644
--- a/src/pages/Timetable/timeTableInfo.ts
+++ b/src/pages/Timetable/timeTableInfo.ts
@@ -387,85 +387,133 @@ export const timeTableInfo: timeTableInfoProps[] = [
     endTime: new Date("2024-09-24 20:14"),
   },
   {
-    title: "재학생 우선 입장",
-    description: "재학생 우선 입장 시간 (자세한 안내는 인스타그램 참조)",
+    title: "무대 입장(재학생)",
+    description: "팔찌 착용 필요",
     descriptionShow: true,
     date: new Date("2024-09-23"),
     startTime: new Date("2024-09-23 17:00"),
     endTime: new Date("2024-09-23 17:50"),
+    link: {
+      text: "(자세히보기)",
+      url: "https://www.instagram.com/p/DAFpPQ_SQyL",
+    },
   },
   {
-    title: "전체 입장",
-    description: "전체 입장 시간",
-    descriptionShow: true,
+    title: "무대 입장(전체)",
+    description: "무대 입장(전체) 시간",
+    descriptionShow: false,
     date: new Date("2024-09-23"),
     startTime: new Date("2024-09-23 17:50"),
     endTime: new Date("2024-09-23 24:00"),
   },
   {
-    title: "재학생 우선 입장",
-    description: "재학생 우선 입장 시간 (자세한 안내는 인스타그램 참조)",
+    title: "무대 입장(재학생)",
+    description: "팔찌 착용 필요",
     descriptionShow: true,
     date: new Date("2024-09-24"),
     startTime: new Date("2024-09-24 17:00"),
     endTime: new Date("2024-09-24 17:50"),
+    link: {
+      text: "(자세히보기)",
+      url: "https://www.instagram.com/p/DAFpPQ_SQyL",
+    },
   },
   {
-    title: "전체 입장",
-    description: "전체 입장 시간",
-    descriptionShow: true,
+    title: "무대 입장(전체)",
+    description: "무대 입장(전체) 시간",
+    descriptionShow: false,
     date: new Date("2024-09-24"),
     startTime: new Date("2024-09-24 17:50"),
     endTime: new Date("2024-09-24 24:00"),
   },
   {
-    title: "재학생 우선 입장",
-    description: "재학생 우선 입장 시간 (자세한 안내는 인스타그램 참조)",
+    title: "무대 입장(재학생)",
+    description: "팔찌 착용 필요",
     descriptionShow: true,
     date: new Date("2024-09-25"),
     startTime: new Date("2024-09-25 17:00"),
     endTime: new Date("2024-09-25 17:50"),
+    link: {
+      text: "(자세히보기)",
+      url: "https://www.instagram.com/p/DAFpPQ_SQyL",
+    },
   },
   {
-    title: "전체 입장",
-    description: "전체 입장 시간",
-    descriptionShow: true,
+    title: "무대 입장(전체)",
+    description: "무대 입장(전체) 시간",
+    descriptionShow: false,
     date: new Date("2024-09-25"),
     startTime: new Date("2024-09-25 17:50"),
     endTime: new Date("2024-09-25 24:00"),
   },
   {
-    title: "주점 개시",
+    title: "미래광장 주점 운영",
+    description: "",
+    descriptionShow: false,
+    artist: [futurePubInfo],
+    date: new Date("2024-09-23"),
+    startTime: new Date("2024-09-23 18:00"),
+    endTime: new Date("2024-09-24 00:00"),
+  },
+  {
+    title: "60주년기념관 주점 운영",
     description: "",
     descriptionShow: false,
-    artist: [futurePubInfo, sixtyPubInfo],
+    artist: [sixtyPubInfo],
     date: new Date("2024-09-23"),
     startTime: new Date("2024-09-23 18:00"),
     endTime: new Date("2024-09-24 01:00"),
   },
   {
-    title: "주점 개시",
+    title: "미래광장 주점 운영",
     description: "",
     descriptionShow: false,
-    artist: [futurePubInfo, sixtyPubInfo],
+    artist: [futurePubInfo],
+    date: new Date("2024-09-24"),
+    startTime: new Date("2024-09-24 18:00"),
+    endTime: new Date("2024-09-25 00:00"),
+  },
+  {
+    title: "60주년기념관 주점 운영",
+    description: "",
+    descriptionShow: false,
+    artist: [sixtyPubInfo],
     date: new Date("2024-09-24"),
     startTime: new Date("2024-09-24 18:00"),
     endTime: new Date("2024-09-25 01:00"),
   },
   {
-    title: "주점 개시",
+    title: "미래광장 주점 운영",
     description: "",
     descriptionShow: false,
-    artist: [futurePubInfo, sixtyPubInfo],
+    artist: [futurePubInfo],
     date: new Date("2024-09-25"),
     startTime: new Date("2024-09-25 18:00"),
-    endTime: new Date("2024-09-25 01:00"),
+    endTime: new Date("2024-09-26 00:00"),
+  },
+  {
+    title: "60주년기념관 주점 운영",
+    description: "",
+    descriptionShow: false,
+    artist: [sixtyPubInfo],
+    date: new Date("2024-09-25"),
+    startTime: new Date("2024-09-25 18:00"),
+    endTime: new Date("2024-09-26 01:00"),
+  },
+  {
+    title: "미래광장 주점 운영",
+    description: "",
+    descriptionShow: false,
+    artist: [futurePubInfo],
+    date: new Date("2024-09-26"),
+    startTime: new Date("2024-09-26 18:00"),
+    endTime: new Date("2024-09-27 00:00"),
   },
   {
-    title: "주점 개시",
+    title: "60주년기념관 주점 운영",
     description: "",
     descriptionShow: false,
-    artist: [futurePubInfo, sixtyPubInfo],
+    artist: [sixtyPubInfo],
     date: new Date("2024-09-26"),
     startTime: new Date("2024-09-26 18:00"),
     endTime: new Date("2024-09-27 01:00"),
diff --git a/src/pages/Timetable/utils.tsx b/src/pages/Timetable/utils.tsx
new file mode 100644
index 0000000..9b7e298
--- /dev/null
+++ b/src/pages/Timetable/utils.tsx
@@ -0,0 +1,64 @@
+import { timeTableFilterProps, timeTableInfoProps } from "../../shared/types/timeTable.ts";
+
+/**
+ * 일별 필터 버튼
+ * name: 버튼 이름
+ * date: 필터링할 날짜
+ */
+export const TIME_TABLE_FILTER: timeTableFilterProps[] = [
+  { name: "1일차", date: new Date("2024-09-23T00:00:00+09:00") },
+  { name: "2일차", date: new Date("2024-09-24T00:00:00+09:00") },
+  { name: "3일차", date: new Date("2024-09-25T00:00:00+09:00") },
+  { name: "4일차", date: new Date("2024-09-26T00:00:00+09:00") },
+];
+
+/**
+ * 축제 시작일
+ */
+export const START_DATE = new Date("2024-09-23T00:00:00+09:00");
+
+/**
+ * 축제 종료일
+ */
+export const END_DATE = new Date("2024-09-26T00:00:00+09:00");
+
+/**
+ * 시간을 00:00:00으로 설정 (날짜만 유지, 시간 초기화)
+ * @param date 날짜
+ */
+export const clearTime = (date: Date): Date => {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+};
+
+/**
+ * Date 객체가 들어왔을때 시간을 mm:hh 형식으로 변환
+ * @param date
+ */
+export const formatTime = (date: Date): string => {
+  return date.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", hour12: false });
+};
+
+/**
+ * 이벤트 상태 반환
+ * @param event
+ * @param currentTime past: 지난 이벤트, current: 현재 진행중인 이벤트, future: 미래 이벤트
+ */
+export const getEventStatus = (
+  event: timeTableInfoProps,
+  currentTime: Date,
+): "past" | "current" | "future" => {
+  let adjustedStartTime = new Date(event.startTime);
+
+  // KNU-ARTIST 항목에 대한 시작 시간 조정
+  if (event.description.includes("KNU-ARTIST")) {
+    if (event.description.includes("댄스")) {
+      adjustedStartTime = new Date(adjustedStartTime.getTime() - 5 * 60000);
+    } else if (event.description.includes("밴드")) {
+      adjustedStartTime = new Date(adjustedStartTime.getTime() - 4 * 60000);
+    }
+  }
+
+  if (currentTime < adjustedStartTime) return "future";
+  if (currentTime > event.endTime) return "past";
+  return "current";
+};
diff --git a/src/shared/routing/routerInfo.ts b/src/shared/routing/routerInfo.ts
index 9094ba4..a1a2b63 100644
--- a/src/shared/routing/routerInfo.ts
+++ b/src/shared/routing/routerInfo.ts
@@ -79,7 +79,7 @@ export const routerInfo: routerInfoType[] = [
     path: "timetable",
     element: lazy(() => import("../../pages/Timetable")),
     english: "Timetable",
-    korean: "타임테이블",
+    korean: "축제 일정",
     expose: true,
     mainPage: true,
     scrollOptions: "never",
diff --git a/src/shared/styles/vars.css.ts b/src/shared/styles/vars.css.ts
index 722b43c..21780a8 100644
--- a/src/shared/styles/vars.css.ts
+++ b/src/shared/styles/vars.css.ts
@@ -1,12 +1,14 @@
 import { createGlobalTheme, fontFace } from "@vanilla-extract/css";
+import boldFont from "../../assets/fonts/subset-PyeongChangPeace-Bold.woff2";
+import lightFont from "../../assets/fonts/subset-PyeongChangPeace-Light.woff2";
 
 const pyeongChangBold = fontFace({
-  src: "url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');",
+  src: `url('${boldFont}') format('woff2');`,
   fontWeight: 700,
   fontStyle: "nomal",
 });
 const pyeongChangLight = fontFace({
-  src: "url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Light.woff2') format('woff2');",
+  src: `url('${lightFont}') format('woff2');`,
   fontWeight: 300,
   fontStyle: "nomal",
 });
diff --git a/src/shared/types/timeTable.ts b/src/shared/types/timeTable.ts
index 17a1224..fb52f03 100644
--- a/src/shared/types/timeTable.ts
+++ b/src/shared/types/timeTable.ts
@@ -8,6 +8,7 @@ export interface timeTableInfoProps {
   date: Date;
   startTime: Date;
   endTime: Date;
+  link?: { text: string; url: string };
 }
 
 export interface timeTableFilterProps {