diff --git a/public/svg/icons/common/right_arrow.svg b/public/svg/icons/common/right_arrow.svg
new file mode 100644
index 0000000..a9fc20c
--- /dev/null
+++ b/public/svg/icons/common/right_arrow.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.6 6L0 1.4L1.4 0L7.4 6L1.4 12L0 10.6L4.6 6Z" fill="white"/>
+</svg>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c22254f..896ebef 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import Script from 'next/script';
 import { NotoSans } from './fonts';
 import Navigation from '@/components/navigation';
+import Footer from "@/components/layout/footer/Footer";
 
 export const metadata = {
   title: {
@@ -29,12 +30,13 @@ export default function RootLayout({
           //  max-w-[430px] mx-auto : 430px 이상일 때 가운데 정렬
           ['min-h-screen w-full'],
           ['shadow-xl'],
-          ['bg-[#050014]'],
+          ['bg-[#000000]'],
           ['text-white'],
         )}
       >
         <Navigation />
         <div className="flex justify-center">{children}</div>
+        <Footer />
       </body>
     </html>
   );
diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx
index beeb8c9..105c2b1 100644
--- a/src/app/timeline/page.tsx
+++ b/src/app/timeline/page.tsx
@@ -1,4 +1,3 @@
-// src/app/timeline/page.tsx
 'use client';
 import React, { useState } from 'react';
 import TimelineHeader from "@/components/timeline/header/TimelineHeader";
@@ -14,21 +13,23 @@ export default function TimelinePage() {
   };
 
   return (
-    <main className="w-full px-10">
-      <TimelineHeader />
-      <section className="w-4/5 flex flex-col mx-auto my-10">
-        <section className="w-full flex justify-start items-center gap-3">
-          {['1st', '2nd', '3rd'].map(generation => (
-            <GenerationButton
-              key={generation}
-              label={generation}
-              isActive={activeGeneration === generation}
-              onClick={() => handleButtonClick(generation)}
-            />
-          ))}
+    <main className="flex justify-center">
+      <div className="max-w-[1200px] desktop:px-10 tablet:px-10 px-4">
+        <TimelineHeader />
+        <section className="mx-auto my-10">
+          <section className="flex justify-start items-center gap-3">
+            {['1st', '2st', '3st'].map(generation => (
+              <GenerationButton
+                key={generation}
+                label={generation}
+                isActive={activeGeneration === generation}
+                onClick={() => handleButtonClick(generation)}
+              />
+            ))}
+          </section>
         </section>
-      </section>
-      <TimelineMonthlyPart timelineData={TIMELINE_CARDS_INFO[activeGeneration]} />
+        <TimelineMonthlyPart timelineData={TIMELINE_CARDS_INFO[activeGeneration]} />
+      </div>
     </main>
   );
 };
diff --git a/src/components/layout/.keep b/src/components/layout/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
new file mode 100644
index 0000000..c6f9fe6
--- /dev/null
+++ b/src/components/layout/footer/Footer.tsx
@@ -0,0 +1,50 @@
+'use client';
+import React from 'react';
+import RightArrowIcon from 'public/svg/icons/common/right_arrow.svg';
+
+/**
+ * @description
+ * 레이아웃 Footer
+ * @component Footer
+ * @returns {JSX.Element} Footer
+ * @since 2024.04.26
+ */
+
+const Footer = () => {
+  const handlePress = () => {
+    console.log('Arrow clicked');
+  };
+
+  return (
+    <footer className="w-full py-10 bg-mono_900 flex desktop:pl-80 tablet:pl-20 pl-10">
+      <div className="flex justify-start items-start w-full gap-10">
+        <div>
+          <h1 className="F1">About Us</h1>
+          <p className="F2">Final Update 2023.10.02</p>
+          <div className="flex items-center">
+            <p className="F2">제작자 소개</p>
+            <button onClick={handlePress} className="ml-2 mt-[-2px]">
+              <RightArrowIcon />
+            </button>
+          </div>
+          <div className="mt-4">
+            <p className="F3">Copyright © GDSC DGU</p>
+          </div>
+        </div>
+        <div>
+          <h1 className="F1">Contact</h1>
+          <div className="contact-item">
+            <p className="F2 label-width">이메일</p>
+            <p className="F2">gdsc.gdu@gmail.com</p>
+          </div>
+          <div className="contact-item">
+            <p className="F2 label-width">주소</p>
+            <p className="F2">서울특별시 중구 필동로1길 30</p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/timeline/button/GenerationButton.tsx b/src/components/timeline/button/GenerationButton.tsx
index bb93bdf..48389a2 100644
--- a/src/components/timeline/button/GenerationButton.tsx
+++ b/src/components/timeline/button/GenerationButton.tsx
@@ -1,16 +1,14 @@
+import React from 'react';
+
 /* 
 기수별 버튼 컴포넌트(1st, 2nd, 3rd)
 */
-import React from 'react';
 
 const GenerationButton: React.FC<GenerationButtonProps> = ({ label, isActive, onClick }) => {
-  const borderColor = isActive ? 'white' : '#536E7B';
-  const textColor = isActive ? 'white' : '#536E7B';
-
   return (
     <button
-      className="w-10 h-8 bg-transparent border rounded-lg text-xs leading-4 px-2 py-1"
-      style={{ borderWidth: '1.5px', borderColor, color: textColor }}
+      className="border rounded-lg B2 px-3 py-0.5"
+      style={{ borderWidth: '1px', borderColor: isActive ? 'white' : '#536E7B', color: isActive ? 'white' : '#536E7B' }}
       onClick={() => onClick(label)}
     >
       {label}
diff --git a/src/components/timeline/card/TimelineCard.tsx b/src/components/timeline/card/TimelineCard.tsx
index 856bc25..982d97b 100644
--- a/src/components/timeline/card/TimelineCard.tsx
+++ b/src/components/timeline/card/TimelineCard.tsx
@@ -5,23 +5,21 @@ import { TimelineCardProps } from "@/interfaces/timeline/timelineCard";
 
 const TimelineCard: React.FC<TimelineCardProps> = ({ id, cardImageUrl, date, title, detail }) => {
   return (
-    <section className="w-1/2 max-w-[51%] overflow-hidden rounded-lg shadow-md relative mb-4 px-2">
+    <section className="w-full md:w-1/2 max-w-[100%] md:max-w-[50%] overflow-hidden rounded-lg shadow-md relative mb-4">
       <div className="w-full aspect-w-16 aspect-h-9">
         <Image
           src={cardImageUrl}
           alt={title}
-          layout='responsive'
           width={1600}
           height={900}
-          objectFit='cover'
           quality={100}
         />
-        <div className="absolute bottom-10 left-0 p-4">
-          <h3 className="text-xs text-white">{date}</h3>
-          <h3 className="text-sm text-white">{title}</h3>
+        <div className="relative bottom-20 left-5">
+          <h3 className="B2">{date}</h3>
+          <h3 className="B2">{title}</h3>
         </div>
       </div>
-      <p className="text-sm">{detail}</p>
+      <p className="B2 relative left-5">{detail}</p>
     </section>
   );
 };
diff --git a/src/components/timeline/header/DateHeader.tsx b/src/components/timeline/header/DateHeader.tsx
index 8942125..3b07785 100644
--- a/src/components/timeline/header/DateHeader.tsx
+++ b/src/components/timeline/header/DateHeader.tsx
@@ -1,3 +1,6 @@
+import { DateHeaderProps } from "@/interfaces/timeline/timelineDate";
+import React from 'react';
+
 /**
  * @description
  * 날짜 표시 헤더 컴포넌트
@@ -5,14 +8,11 @@
  * @returns {JSX.Element} DateHeader
  * @since 2024.04.17
  */
-// components/DateHeader.tsx
-import { DateHeaderProps } from "@/interfaces/timeline/timelineDate";
-import React from 'react';
+
 const DateHeader: React.FC<DateHeaderProps> = ({ date }) => {
   return (
-    <div className="w-full flex flex-col justify-center">
-      <div className="text-4xl mb-[0.75rem]">{date}</div>
-      <hr className="border-t-[1px] border-[#3E4348] my-1" />
+    <div className="w-full flex flex-col justify-center px-2">
+      <div className="H4">{date}</div>
     </div>
   );
 };
diff --git a/src/components/timeline/header/TimelineHeader.tsx b/src/components/timeline/header/TimelineHeader.tsx
index 6de27d8..090e3ae 100644
--- a/src/components/timeline/header/TimelineHeader.tsx
+++ b/src/components/timeline/header/TimelineHeader.tsx
@@ -4,20 +4,18 @@
   * @component TimelineHeader
   * @returns {JSX.Element} TimelineHeader
   * @since 2024.04.17
-  */
- /**
-  * Renders the header component for the Timeline section.
   * @returns The rendered header component.
   */
  
  const TimelineHeader = () => {
   return (
-    <section className="w-4/5 flex flex-col mx-auto my-10">  
-      <div className="px-3 pt-10 text-5xl leading-[3.5rem]">Timeline</div>
-      <div className="px-3 pt-3 leading-[1.75rem]">우리가 함께한 시간</div>
-      <div className="w-full pt-6 border-b border-white border-solid"></div>
-    </section>
+    <>
+      <div className="px-3 pt-10 H3">Timeline</div> 
+      <div className="px-3 pt-3 H6">우리가 함께한 시간</div>
+      <div className="w-full pt-6 border-b border-solid"></div>
+  </>
   );
 };
- 
-  export default TimelineHeader;
+
+export default TimelineHeader;
+
diff --git a/src/components/timeline/part/TimelineMonthlyPart.tsx b/src/components/timeline/part/TimelineMonthlyPart.tsx
index 0be19cf..1d568f2 100644
--- a/src/components/timeline/part/TimelineMonthlyPart.tsx
+++ b/src/components/timeline/part/TimelineMonthlyPart.tsx
@@ -1,5 +1,10 @@
+import React from 'react';
+import groupByMonthYear from "@/utils/timeline/groupByMonthYear";
+import DateHeader from "../header/DateHeader";
+import TimelineMonthlyCardSection from "../section/TimelineMonthlyCardSection";
+import { TimelineCardProps } from "@/interfaces/timeline/timelineCard";
+
 /**
- * @description
  * 각 월별로 그룹화된 타임라인 카드 리스트 섹션 컴포넌트
  * ex) 2024 January 하고, 해당 월 카드 리스트 렌더링
  * @component
@@ -7,11 +12,6 @@
  * @returns {JSX.Element} 
  * @since 2024.04.18
  */
-import React from 'react';
-import groupByMonthYear from "@/utils/timeline/groupByMonthYear";
-import DateHeader from "../header/DateHeader";
-import TimelineMonthlyCardSection from "../section/TimelineMonthlyCardSection";
-import { TimelineCardProps } from "@/interfaces/timeline/timelineCard";
 
 interface TimelineMonthlyPartProps {
   timelineData: TimelineCardProps[];
@@ -23,8 +23,9 @@ const TimelineMonthlyPart: React.FC<TimelineMonthlyPartProps> = ({ timelineData
   return (
     <>
       {Object.entries(groupedData).map(([date, cards]) => (
-        <div key={date} className="w-4/5 mx-auto my-10">
+        <div key={date} className="mx-auto my-10 animate-fadeIn">
           <DateHeader date={date} />
+          <hr className="border-t-[1px] border-mono_700 my-1" />
           <TimelineMonthlyCardSection timelineData={cards} />
         </div>
       ))}
diff --git a/src/components/timeline/section/TimelineMonthlyCardSection.tsx b/src/components/timeline/section/TimelineMonthlyCardSection.tsx
index 2092e58..d48cae9 100644
--- a/src/components/timeline/section/TimelineMonthlyCardSection.tsx
+++ b/src/components/timeline/section/TimelineMonthlyCardSection.tsx
@@ -1,8 +1,16 @@
-// components/TimeLineCardListView.tsx
 import React from 'react';
 import TimelineCard from "../card/TimelineCard";
 import { TimelineCardList } from "@/interfaces/timeline/timelineCardList";
 
+/**
+ * @description
+ * 월별 타임라인 카드 리스트 섹션 컴포넌트
+ * @component
+ * @param {TimelineCardList} timelineData
+ * @returns {JSX.Element}
+ * @since 2024.04.18
+ */
+
 const TimelineMonthlyCardSection: React.FC<TimelineCardList> = ({ timelineData }) => {
   return (
     <div className="flex flex-wrap justify-start">
diff --git a/src/constants/member/timeLine.ts b/src/constants/member/timeLine.ts
index c318b4e..d9bff4c 100644
--- a/src/constants/member/timeLine.ts
+++ b/src/constants/member/timeLine.ts
@@ -8,7 +8,11 @@ export const TIME_LINE = [
     date: '2023.9',
   },
   {
-    generate: '2nd',
+    generate: '2st',
     date: '2024.9',
   },
+  {
+    generate: '3st',
+    date: '2025.9',
+  },
 ];
diff --git a/src/constants/timeline/timelineCardInfo.ts b/src/constants/timeline/timelineCardInfo.ts
index cb7b62e..c9e9c2e 100644
--- a/src/constants/timeline/timelineCardInfo.ts
+++ b/src/constants/timeline/timelineCardInfo.ts
@@ -8,21 +8,23 @@ const TIMELINE_CARDS_INFO: Record<string, TimelineCardProps[]> = {
       cardImageUrl: SampleImage.src,
       date: '2023-09-24',
       title: '1차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
     },
     {
       id: 2,
       cardImageUrl: SampleImage.src,
       date: '2023-09-24',
       title: '2차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 3,
       cardImageUrl: SampleImage.src,
       date: '2023-09-24',
       title: '3차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 4,
@@ -36,7 +38,8 @@ const TIMELINE_CARDS_INFO: Record<string, TimelineCardProps[]> = {
       cardImageUrl: SampleImage.src,
       date: '2023-10-24',
       title: '2차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 6,
@@ -50,59 +53,67 @@ const TIMELINE_CARDS_INFO: Record<string, TimelineCardProps[]> = {
       cardImageUrl: SampleImage.src,
       date: '2024-1-24',
       title: '2차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 8,
       cardImageUrl: SampleImage.src,
       date: '2024-01-24',
       title: '3차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 9,
       cardImageUrl: SampleImage.src,
       date: '2024-02-24',
       title: '2차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 10,
       cardImageUrl: SampleImage.src,
       date: '2024-03-24',
       title: '3차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     // 기타 1기 데이터...
   ],
-  '2nd': [
+  '2st': [
     {
       id: 1,
       cardImageUrl: SampleImage.src,
       date: '2024-09-24',
       title: '1차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 2,
       cardImageUrl: SampleImage.src,
       date: '2024-09-24',
       title: '2차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 3,
       cardImageUrl: SampleImage.src,
       date: '2024-09-24',
       title: '3차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 4,
       cardImageUrl: SampleImage.src,
       date: '2024-10-24',
       title: '1차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 5,
@@ -116,7 +127,8 @@ const TIMELINE_CARDS_INFO: Record<string, TimelineCardProps[]> = {
       cardImageUrl: SampleImage.src,
       date: '2024-11-24',
       title: '3차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 7,
@@ -147,7 +159,7 @@ const TIMELINE_CARDS_INFO: Record<string, TimelineCardProps[]> = {
       detail: '세미나에 대한 자세한 내용'
     },
   ],
-  '3rd': [
+  '3st': [
     {
       id: 1,
       cardImageUrl: SampleImage.src,
@@ -160,14 +172,16 @@ const TIMELINE_CARDS_INFO: Record<string, TimelineCardProps[]> = {
       cardImageUrl: SampleImage.src,
       date: '2025-09-24',
       title: '2차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 3,
       cardImageUrl: SampleImage.src,
       date: '2025-09-24',
       title: '3차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 4,
@@ -188,14 +202,16 @@ const TIMELINE_CARDS_INFO: Record<string, TimelineCardProps[]> = {
       cardImageUrl: SampleImage.src,
       date: '2025-11-24',
       title: '3차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 7,
       cardImageUrl: SampleImage.src,
       date: '2026-1-24',
       title: '2차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 8,
@@ -209,14 +225,16 @@ const TIMELINE_CARDS_INFO: Record<string, TimelineCardProps[]> = {
       cardImageUrl: SampleImage.src,
       date: '2026-02-24',
       title: '2차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     {
       id: 10,
       cardImageUrl: SampleImage.src,
       date: '2026-03-24',
       title: '3차 세미나',
-      detail: '세미나에 대한 자세한 내용'
+      detail: '세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용세미나에 대한 자세한 내용'
+
     },
     // 3기 데이터...
   ]
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0991b6c..aba40c5 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -89,3 +89,39 @@
     line-height: calc(14 / 12);
   }
 }
+
+/* Footer */
+.F1 {
+  font-weight: 500;
+  letter-spacing: 0.25px;
+  font-family: Pretendard-Medium;
+  font-size: 1rem;
+}
+.F2 {
+  font-weight: 200; 
+  font-family: Pretendard-Medium;
+  font-size: 0.75rem; 
+  line-height: calc(28 / 14);
+}
+  .F3 {
+  font-weight: 200; 
+  font-family: Pretendard-Regular;
+  font-size: 0.7rem; 
+  line-height: calc(28 / 14);
+}
+.contact-item {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: row;
+}
+.mt-4 {
+  margin-top: 1rem; 
+}
+.mt-2 {
+  margin-top: 0.3rem; 
+}
+.label-width {
+  width: 2rem; 
+}
+
+
diff --git a/src/utils/timeline/groupByMonthYear.ts b/src/utils/timeline/groupByMonthYear.ts
index e90f5fa..0791c65 100644
--- a/src/utils/timeline/groupByMonthYear.ts
+++ b/src/utils/timeline/groupByMonthYear.ts
@@ -1,4 +1,3 @@
-// utils/groupTimelineData.ts
 import { TimelineCardProps } from '@/interfaces/timeline/timelineCard';
 import { formatDate } from "./formDate";
 
@@ -7,6 +6,7 @@ import { formatDate } from "./formDate";
  * @param {TimelineCardProps[]} data - 타임라인 카드 데이터 배열
  * @returns {Record<string, TimelineCardProps[]>} - '년 월'로 그룹화하고 내림차순으로 정렬된 객체
  */
+
 const groupByMonthYear = (data: TimelineCardProps[]): Record<string, TimelineCardProps[]> => {
   const groups = data.reduce((acc, curr) => {
     const formattedDate = formatDate(curr.date);