diff --git a/Layout/AgendaLayout.tsx b/Layout/AgendaLayout.tsx
index 87b29e4b5..ebedb256f 100644
--- a/Layout/AgendaLayout.tsx
+++ b/Layout/AgendaLayout.tsx
@@ -25,7 +25,7 @@ function AgendaAppLayout({ children }: AgendaLayoutProps) {
     <>
       <AgendaHeader />
       <div className={styles.background}></div>
-      <div className={styles.container}>
+      <div className={styles.app}>
         {children}
         <Footer />
         <AgendaModalProvider />
diff --git a/components/agenda/Home/AgendaList.tsx b/components/agenda/Home/AgendaList.tsx
index dd4169c23..2b9e11a8d 100644
--- a/components/agenda/Home/AgendaList.tsx
+++ b/components/agenda/Home/AgendaList.tsx
@@ -1,24 +1,44 @@
-import Link from 'next/link';
-import React from 'react';
+import { useRouter } from 'next/router';
+import React, { useState } from 'react';
 import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaTypes';
 import AgendaDeadLine from 'components/agenda/Home/AgendaDeadLine';
 import AgendaInfo from 'components/agenda/Home/AgendaInfo';
 import styles from 'styles/agenda/Home/AgendaList.module.scss';
 
 const AgendaList = ({ agendaList }: { agendaList: AgendaDataProps[] }) => {
+  const [selectedItem, setSelectedItem] = useState<number | null>(0);
+
   return (
-    <div className={styles.agendaListContainer}>
-      <div className={styles.agendaListItemContainer}>
-        {!agendaList || !agendaList.length ? (
-          <div>
-            <div className={styles.emptyContainer}>일정이 없습니다.</div>
-          </div>
-        ) : (
-          agendaList.map((agendaInfo, idx) => (
-            <AgendaListItem agendaInfo={agendaInfo} key={idx} />
-          ))
-        )}
+    <div className={styles.container}>
+      <div className={styles.agendaListContainer}>
+        <div className={styles.agendaListItemContainer}>
+          {!agendaList || !agendaList.length ? (
+            <div>
+              <div className={styles.emptyContainer}>일정이 없습니다.</div>
+            </div>
+          ) : (
+            agendaList.map((agendaInfo, idx) => {
+              agendaInfo.idx = idx;
+              return (
+                <AgendaListItem
+                  agendaInfo={agendaInfo}
+                  key={idx}
+                  type='list'
+                  className={idx === selectedItem ? styles.selected : ''}
+                  setSelectedItem={setSelectedItem}
+                />
+              );
+            })
+          )}
+        </div>
       </div>
+      {agendaList.length && (
+        <AgendaListItem
+          agendaInfo={agendaList[selectedItem || 0]}
+          key={selectedItem || 0}
+          type='big'
+        />
+      )}
     </div>
   );
 };
@@ -26,25 +46,45 @@ const AgendaList = ({ agendaList }: { agendaList: AgendaDataProps[] }) => {
 const AgendaListItem = ({
   agendaInfo,
   key,
+  type,
+  className,
+  setSelectedItem,
 }: {
   agendaInfo: AgendaDataProps;
   key: number;
+  type?: string;
+  className?: string;
+  setSelectedItem?: (key: number) => void;
 }) => {
+  const router = useRouter();
+  const href = `/agenda/${agendaInfo.agendaKey}`;
   return (
-    <Link href={`/agenda/${agendaInfo.agendaKey}`}>
-      <button
-        className={styles.agendaListItemBtn}
-        style={{
-          background: `linear-gradient(180deg, #fff 5rem, rgba(0, 0, 0, 0) 10rem), url(${
-            agendaInfo.agendaPosterUrl || '/image/agenda/42.jpg'
-          })`,
-        }}
-        key={key}
-      >
-        <AgendaInfo agendaInfo={agendaInfo} key={key} />
-        <AgendaDeadLine />
-      </button>
-    </Link>
+    <button
+      className={`${styles.agendaListItemBtn} ${
+        type === 'list' && styles.listType
+      } ${type === 'big' && styles.listBig}
+       ${className && className}`}
+      style={{
+        background: `linear-gradient(180deg, #fff 5rem, rgba(0, 0, 0, 0) 10rem), url(${
+          agendaInfo.agendaPosterUrl || '/image/agenda/42.jpg'
+        }) lightgray 50% / cover no-repeat`,
+      }}
+      key={key}
+      onClick={() => {
+        if (window.innerWidth < 961) {
+          router.push(href);
+          return;
+        }
+        if (type === 'list' && setSelectedItem && agendaInfo.idx) {
+          setSelectedItem(agendaInfo.idx);
+          return;
+        }
+        router.push(href);
+      }}
+    >
+      <AgendaInfo agendaInfo={agendaInfo} key={key} />
+      <AgendaDeadLine />
+    </button>
   );
 };
 
diff --git a/components/agenda/Home/AgendaTitle.tsx b/components/agenda/Home/AgendaTitle.tsx
index 09bdc6b9b..0e8b1a628 100644
--- a/components/agenda/Home/AgendaTitle.tsx
+++ b/components/agenda/Home/AgendaTitle.tsx
@@ -1,42 +1,46 @@
 import Image from 'next/image';
 import Link from 'next/link';
+import MyAgendaBtn from 'components/agenda/Home/MyAgendaBtn';
 import styles from 'styles/agenda/Home/AgendaTitle.module.scss';
 
 const AgendaTitle = () => {
   return (
-    <div className={styles.agendaTitleContainer}>
-      <div className={styles.agendaTitleButtonContainer}>AGENDA</div>
-      <div className={styles.agendaTitleButtonContainer}>
-        <Link href={`/agenda/create`}>
-          <button className={styles.agendaCreateBtn}>
-            <div>개최신청</div>
-            <div className={styles.imageWrapper}>
-              <Image
-                src='/image/agenda/ArrowRight.svg'
-                width={35}
-                height={35}
-                alt='Create Agenda'
-                className={styles.imageBox}
-              />
-            </div>
-          </button>
-        </Link>
-        <Link href={`/agenda/ticket`}>
-          <button className={styles.agendaCreateBtn}>
-            <div>티켓 확인하기</div>
-            <div className={styles.imageWrapper}>
-              <Image
-                src='/image/agenda/ArrowRight.svg'
-                width={35}
-                height={35}
-                alt='Create Agenda'
-                className={styles.imageBox}
-              />
-            </div>
-          </button>
-        </Link>
+    <>
+      <div className={styles.agendaTitleContainer}>
+        <div className={`${styles.agendaTitle}`}>AGENDA</div>
+        <div className={styles.agendaTitleButton}>
+          <Link href={`/agenda/create`}>
+            <button className={styles.agendaCreateBtn}>
+              <div>개최신청</div>
+              <div className={styles.imageWrapper}>
+                <Image
+                  src='/image/agenda/ArrowRight.svg'
+                  width={35}
+                  height={35}
+                  alt='Create Agenda'
+                  className={styles.imageBox}
+                />
+              </div>
+            </button>
+          </Link>
+          <Link href={`/agenda/ticket`}>
+            <button className={styles.agendaCreateBtn}>
+              <div>티켓 확인하기</div>
+              <div className={styles.imageWrapper}>
+                <Image
+                  src='/image/agenda/ArrowRight.svg'
+                  width={35}
+                  height={35}
+                  alt='Create Agenda'
+                  className={styles.imageBox}
+                />
+              </div>
+            </button>
+          </Link>
+        </div>
       </div>
-    </div>
+      <MyAgendaBtn />
+    </>
   );
 };
 
diff --git a/components/agenda/Home/MyAgendaBtn.tsx b/components/agenda/Home/MyAgendaBtn.tsx
index 1625c29a1..3b4acf66d 100644
--- a/components/agenda/Home/MyAgendaBtn.tsx
+++ b/components/agenda/Home/MyAgendaBtn.tsx
@@ -31,7 +31,7 @@ const MyAgendaBtn = () => {
   };
   const myList =
     useFetchGet<MyTeamDataProps[]>('/profile/current/list')?.data || [];
-
+  console.log(myList);
   return (
     <div
       className={`${styles.myAgendaContainer} ${
@@ -59,7 +59,6 @@ const MyAgendaBtn = () => {
             <Link
               href={`/agenda/${myTeamInfo.agendaKey}/${myTeamInfo.teamKey}`}
               key={idx}
-              style={{ width: '100%' }}
             >
               <div className={styles.myagendaItemContainer} key={idx}>
                 <MyTeamInfo myTeamInfo={myTeamInfo} key={idx} />
diff --git a/components/agenda/Home/MyTeamInfo.tsx b/components/agenda/Home/MyTeamInfo.tsx
index 5c5c63d0c..933fed1dc 100644
--- a/components/agenda/Home/MyTeamInfo.tsx
+++ b/components/agenda/Home/MyTeamInfo.tsx
@@ -16,11 +16,11 @@ const MyTeamInfo = ({
     return <div>참가중인 일정이 없습니다.</div>;
   }
   // myTeamInfo.isOfficial = true; //css test
-  // const startDate = new Date();
+  const startDate = new Date(myTeamInfo.agendaStartTime);
   //아래 주석달린 부분은 api 변경시 추가 예정입니다.
   return (
     <div className={styles.Container} key={key}>
-      {/* <div className={agendastyles.agendaDateBox}>
+      <div className={agendastyles.agendaDateBox}>
         <div className={agendastyles.agendaStartDateMonth}>
           {fillZero(`${startDate.getMonth()}`, 2)}
         </div>
@@ -28,7 +28,7 @@ const MyTeamInfo = ({
         <div className={agendastyles.agendaStartDateDay}>
           {fillZero(`${startDate.getDate()}`, 2)}
         </div>
-      </div> */}
+      </div>
       <div className={styles.infoContainer}>
         <div className={styles.teamInfoContainer}>
           <h2 className={styles.teamTitle}>
diff --git a/components/agenda/Layout/MenuBar.tsx b/components/agenda/Layout/MenuBar.tsx
index 421e3d178..6148d864b 100644
--- a/components/agenda/Layout/MenuBar.tsx
+++ b/components/agenda/Layout/MenuBar.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useUser } from 'hooks/agenda/Layout/useUser';
diff --git a/components/agenda/Ticket/Ticket.tsx b/components/agenda/Ticket/Ticket.tsx
index 2a103618c..56003d8a1 100644
--- a/components/agenda/Ticket/Ticket.tsx
+++ b/components/agenda/Ticket/Ticket.tsx
@@ -12,76 +12,81 @@ const Ticket = ({ type }: { type: string }) => {
   const { data } = useFetchGet<TicketProps>('/ticket');
   const { openModal } = useModal();
 
-  return type === 'page' ? (
-    <div className={styles.container}>
-      <h1 className={styles.h1}>내 티켓</h1>
-      <div className={styles.ticketSection}>
-        <div className={styles.ticketFrame}>
-          <h1>{data && data.ticketCount}</h1>
+  return (
+    <div className={styles.pageContainer}>
+      {' '}
+      {type === 'page' ? (
+        <div className={styles.container}>
+          <h1 className={styles.h1}>내 티켓</h1>
+          <div className={styles.ticketSection}>
+            <div className={styles.ticketFrame}>
+              <h1>{data && data.ticketCount}</h1>
+            </div>
+            <h1>개</h1>
+          </div>
+          <div className={styles.section}>
+            <h3>발급 방법</h3>
+            <div className={styles.line} />
+            <p>발급 시작 누르기</p>
+            <div className={styles.arrowDown} />
+            <p>
+              평가 포인트 기부하기
+              <br />
+              {`(최대 2개까지 반영)`}
+            </p>
+            <div className={styles.arrowDown} />
+            <p>현재 페이지로 돌아와 발급완료 누르기</p>
+          </div>
+          {data && data.setupTicket ? (
+            <button
+              className={styles.submitButton}
+              onClick={() => {
+                instanceInAgenda.patch('/ticket');
+              }}
+            >
+              발급 완료
+            </button>
+          ) : (
+            <button
+              className={styles.submitButton}
+              onClick={() => {
+                openModal({
+                  type: 'proceedCheck',
+                  description: '평가 포인트를 기부하시겠습니까?',
+                  onProceed: () => {
+                    instanceInAgenda.post('/ticket').then(() => {
+                      location.href = 'https://profile.intra.42.fr/';
+                    });
+                  },
+                });
+              }}
+            >
+              발급 시작
+            </button>
+          )}
+          <Link href='/agenda/ticket/history' style={{ width: '100%' }}>
+            <button className={styles.logButton}>내역 보기</button>
+          </Link>
         </div>
-        <h1>개</h1>
-      </div>
-      <div className={styles.section}>
-        <h3>발급 방법</h3>
-        <div className={styles.line} />
-        <p>발급 시작 누르기</p>
-        <div className={styles.arrowDown} />
-        <p>
-          평가 포인트 기부하기
-          <br />
-          {`(최대 2개까지 반영)`}
-        </p>
-        <div className={styles.arrowDown} />
-        <p>현재 페이지로 돌아와 발급완료 누르기</p>
-      </div>
-      {data && data.setupTicket ? (
-        <button
-          className={styles.submitButton}
-          onClick={() => {
-            instanceInAgenda.patch('/ticket');
-          }}
-        >
-          발급 완료
-        </button>
       ) : (
-        <button
-          className={styles.submitButton}
-          onClick={() => {
-            openModal({
-              type: 'proceedCheck',
-              description: '평가 포인트를 기부하시겠습니까?',
-              onProceed: () => {
-                instanceInAgenda.post('/ticket').then(() => {
-                  location.href = 'https://profile.intra.42.fr/';
-                });
-              },
-            });
-          }}
-        >
-          발급 시작
-        </button>
-      )}
-      <Link href='/agenda/ticket/history' style={{ width: '100%' }}>
-        <button className={styles.logButton}>내역 보기</button>
-      </Link>
-    </div>
-  ) : (
-    <div className={styles.container}>
-      <h1 className={styles.h1}>내 티켓</h1>
-      <div
-        className={styles.ticketSection}
-        style={{ gap: '2rem', alignItems: 'center' }}
-      >
-        <Link href='/agenda/ticket'>
-          <button className={styles.submitButton}>발급하러가기</button>
-        </Link>
-        <div className={styles.ticketSection}>
-          <div className={styles.ticketFrame}>
-            <h1>{data && data.ticketCount}</h1>
+        <div className={styles.container}>
+          <h1 className={styles.h1}>내 티켓</h1>
+          <div
+            className={styles.ticketSection}
+            style={{ gap: '2rem', alignItems: 'center' }}
+          >
+            <Link href='/agenda/ticket'>
+              <button className={styles.submitButton}>발급하러가기</button>
+            </Link>
+            <div className={styles.ticketSection}>
+              <div className={styles.ticketFrame}>
+                <h1>{data && data.ticketCount}</h1>
+              </div>
+              <h1>개</h1>
+            </div>
           </div>
-          <h1>개</h1>
         </div>
-      </div>
+      )}
     </div>
   );
 };
diff --git a/components/agenda/agendaDetail/AgendaInfo.tsx b/components/agenda/agendaDetail/AgendaInfo.tsx
index 5dceb3f28..5b64fad66 100644
--- a/components/agenda/agendaDetail/AgendaInfo.tsx
+++ b/components/agenda/agendaDetail/AgendaInfo.tsx
@@ -149,15 +149,22 @@ export default function AgendaInfo({
       <div
         className={`${styles.infoContainer} ${containerSize}`}
         style={{
-          background: `linear-gradient(0deg, #fff 6rem, rgba(0, 0, 0, 0) 10rem), url(${
+          background: `linear-gradient(0deg, #fff 7rem, rgba(0, 0, 0, 0) 10rem), url(${
             agendaData.agendaPosterUrl || '/image/agenda/42.jpg'
-          })`,
+          }) lightgray 50% / cover no-repeat`,
         }}
       >
         <div className={styles.infoWarp}>
           <div className={styles.contentWarp}>
-            {isAgendaDetail && buttonData && (
-              <div className={styles.enrollWarp}>
+            <h2>{agendaTitle}</h2>
+
+            <div className={styles.organizerWrap}>
+              <span>주최자 : {agendaHost}</span>
+            </div>
+            <div className={styles.buttonWarp}>
+              {isAgendaDetail && <ShareBtn onClick={copyLink} />}
+
+              {isAgendaDetail && buttonData && (
                 <UploadBtn
                   text={buttonData.text}
                   onClick={() => {
@@ -167,14 +174,7 @@ export default function AgendaInfo({
                     });
                   }}
                 />
-              </div>
-            )}
-            <div className={styles.titleWarp}>
-              <h2>{agendaTitle}</h2>
-              {isAgendaDetail && <ShareBtn onClick={copyLink} />}
-            </div>
-            <div className={styles.organizerWrap}>
-              <span>주최자 : {agendaHost}</span>
+              )}
             </div>
           </div>
         </div>
diff --git a/components/agenda/agendaDetail/AgendaTab.tsx b/components/agenda/agendaDetail/AgendaTab.tsx
index 11a3952e4..b5f912e59 100644
--- a/components/agenda/agendaDetail/AgendaTab.tsx
+++ b/components/agenda/agendaDetail/AgendaTab.tsx
@@ -3,6 +3,7 @@ import { AgendaTabProps } from 'types/agenda/agendaDetail/tabs/agendaInfoTypes';
 import { TABS, TabValues } from 'constants/agenda/agendaDetail/agendaTabs';
 import TabContent from 'components/agenda/agendaDetail/TabContent';
 import TabButtons from 'components/agenda/button/TabButtons';
+import styles from 'styles/agenda/agendaDetail/AgendaTab.module.scss';
 
 export default function AgendaTab({
   agendaData,
@@ -13,14 +14,20 @@ export default function AgendaTab({
 
   return (
     <>
-      <TabButtons tabs={TABS} activeTab={activeTab} onTabClick={setActiveTab} />
-      <TabContent
-        activeTab={activeTab}
-        tabs={TABS}
-        agendaData={agendaData}
-        isHost={isHost}
-        myTeam={myTeam}
-      />
+      <div className={styles.tabWarp}>
+        <TabButtons
+          tabs={TABS}
+          activeTab={activeTab}
+          onTabClick={setActiveTab}
+        />
+        <TabContent
+          activeTab={activeTab}
+          tabs={TABS}
+          agendaData={agendaData}
+          isHost={isHost}
+          myTeam={myTeam}
+        />
+      </div>
     </>
   );
 }
diff --git a/components/agenda/utils/PageController.tsx b/components/agenda/utils/PageController.tsx
index 8e6824ee5..e33bf7537 100644
--- a/components/agenda/utils/PageController.tsx
+++ b/components/agenda/utils/PageController.tsx
@@ -76,9 +76,9 @@ const PageController = ({
       <button
         className={styles.agendaInfoContainer}
         style={{
-          background: `linear-gradient(180deg, #fff 5rem, rgba(0, 0, 0, 0) 10rem), url(${
+          background: `linear-gradient(0deg, #fff 7rem, rgba(0, 0, 0, 0) 10rem), url(${
             data[current]?.agendaPosterUrl || '/image/agenda/42.jpg'
-          })`,
+          }) lightgray 50% / cover no-repeat`,
         }}
         onClick={(e) => {
           const target = e.target as HTMLElement;
diff --git a/components/takgu/Layout/MainPageProfile.tsx b/components/takgu/Layout/MainPageProfile.tsx
index 9223e8db0..0950ef885 100644
--- a/components/takgu/Layout/MainPageProfile.tsx
+++ b/components/takgu/Layout/MainPageProfile.tsx
@@ -10,7 +10,7 @@ const MainPageProfile = () => {
 
   return (
     <div className={styles.mainPageProfile}>
-      <div className={styles.gridContainer}>
+      <div className={styles.pageContainer}>
         <Link
           className={styles.myImage}
           href={`/takgu/users/detail?intraId=${user.intraId}`}
diff --git a/pages/agenda/[agendaKey]/[teamUID]/index.tsx b/pages/agenda/[agendaKey]/[teamUID]/index.tsx
index e5c41f498..9f9652e71 100644
--- a/pages/agenda/[agendaKey]/[teamUID]/index.tsx
+++ b/pages/agenda/[agendaKey]/[teamUID]/index.tsx
@@ -92,7 +92,7 @@ export default function TeamDetail() {
   };
 
   return (
-    <div className={styles.teamDeatil}>
+    <div className={styles.teamDetail}>
       {agendaData && (
         <Link href={`/agenda/${agendaKey}`} className={styles.agendaLink}>
           <AgendaInfo agendaData={agendaData} />
diff --git a/pages/agenda/[agendaKey]/create-team.tsx b/pages/agenda/[agendaKey]/create-team.tsx
index a1dde5c4b..8197343e6 100644
--- a/pages/agenda/[agendaKey]/create-team.tsx
+++ b/pages/agenda/[agendaKey]/create-team.tsx
@@ -13,15 +13,17 @@ const CreateTeam = () => {
   };
 
   return (
-    <div className={styles.container}>
-      <h2 className={styles.title}>팀 만들기</h2>
-      <p className={styles.description}>팀 인원 : 3명-8명까지 가능</p>
-      <CreateTeamForm
-        location={agendaInfo?.agendaLocation || null}
-        agendaKey={agendaKey as string}
-        handleConvert={backPage}
-        onProceed={backPage}
-      />
+    <div className={styles.pageContainer}>
+      <div className={styles.container}>
+        <h2 className={styles.title}>팀 만들기</h2>
+        <p className={styles.description}>팀 인원 : 3명-8명까지 가능</p>
+        <CreateTeamForm
+          location={agendaInfo?.agendaLocation || null}
+          agendaKey={agendaKey as string}
+          handleConvert={backPage}
+          onProceed={backPage}
+        />
+      </div>
     </div>
   );
 };
diff --git a/pages/agenda/[agendaKey]/index.tsx b/pages/agenda/[agendaKey]/index.tsx
index a05673120..ba0b71b5a 100644
--- a/pages/agenda/[agendaKey]/index.tsx
+++ b/pages/agenda/[agendaKey]/index.tsx
@@ -17,6 +17,7 @@ const AgendaDetail = () => {
   const router = useRouter();
   const { agendaKey } = router.query;
   const agendaData = useAgendaInfo(agendaKey as string);
+
   const { data: myTeam, status: myTeamStatus } = useFetchGet<TeamDataProps>(
     `team/my`,
     { agenda_key: agendaKey }
diff --git a/pages/agenda/create.tsx b/pages/agenda/create.tsx
index 404d3d926..57c29b6e6 100644
--- a/pages/agenda/create.tsx
+++ b/pages/agenda/create.tsx
@@ -10,17 +10,19 @@ export const saveLocal = () => {
 
 const CreateAgenda = () => {
   return (
-    <div className={styles.container}>
-      <div>
-        <CancelBtn onClick={saveLocal} />
+    <div className={styles.pageContainer}>
+      <div className={styles.container}>
+        <div>
+          <CancelBtn onClick={saveLocal} />
+        </div>
+        <h2 className={styles.title}>새로운 아젠다 만들기</h2>
+        <p className={styles.description}>당부사항</p>
+        <AgendaForm
+          onProceed={() => {
+            router.push(`/agenda`);
+          }}
+        />
       </div>
-      <h2 className={styles.title}>새로운 아젠다 만들기</h2>
-      <p className={styles.description}>당부사항</p>
-      <AgendaForm
-        onProceed={() => {
-          router.push(`/agenda`);
-        }}
-      />
     </div>
   );
 };
diff --git a/pages/agenda/index.tsx b/pages/agenda/index.tsx
index 1d696e445..0793fab21 100644
--- a/pages/agenda/index.tsx
+++ b/pages/agenda/index.tsx
@@ -1,10 +1,8 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaTypes';
 import type { NextPage } from 'next';
 import AgendaList from 'components/agenda/Home/AgendaList';
 import AgendaTitle from 'components/agenda/Home/AgendaTitle';
-import MyAgendaBtn from 'components/agenda/Home/MyAgendaBtn';
-import { TestModal, TestModal2 } from 'components/agenda/modal/testModal';
 import PageNation from 'components/Pagination';
 import useFetchGet from 'hooks/agenda/useFetchGet';
 import usePageNation from 'hooks/agenda/usePageNation';
@@ -30,41 +28,40 @@ const Agenda: NextPage = () => {
   return (
     <div className={styles.agendaPageContainer}>
       <AgendaTitle />
-      <MyAgendaBtn />
-      <div className={listStyles.agendaListTextWrapper}>
-        <h2>AGENDA LIST</h2>
-        <div>
-          <button
-            className={`${listStyles.agendaListStatus} ${
-              showCurrent ? listStyles.selectedStatus : ''
-            }`}
-            name='ongoing'
-            onClick={toggleStatus}
-          >
-            진행중
-          </button>
-          {' | '}
-          <button
-            className={`${listStyles.agendaListStatus} 
+      <div className={styles.agendaContainer}>
+        <div className={listStyles.agendaListTextWrapper}>
+          <h2>AGENDA LIST</h2>
+          <div>
+            <button
+              className={`${listStyles.agendaListStatus} ${
+                showCurrent ? listStyles.selectedStatus : ''
+              }`}
+              name='ongoing'
+              onClick={toggleStatus}
+            >
+              진행중
+            </button>
+            {' | '}
+            <button
+              className={`${listStyles.agendaListStatus} 
             ${showCurrent ? '' : listStyles.selectedStatus}`}
-            name='closed'
-            onClick={toggleStatus}
-          >
-            종료된
-          </button>
+              name='closed'
+              onClick={toggleStatus}
+            >
+              종료된
+            </button>
+          </div>
         </div>
-      </div>
 
-      {showCurrent ? (
-        <AgendaList agendaList={currentData || []} />
-      ) : (
-        <>
-          <AgendaList agendaList={historyData || []} />
-          <PageNation {...PagaNationElementProps} />{' '}
-        </>
-      )}
-      <TestModal />
-      <TestModal2 />
+        {showCurrent ? (
+          <AgendaList agendaList={currentData || []} />
+        ) : (
+          <>
+            <AgendaList agendaList={historyData || []} />
+            <PageNation {...PagaNationElementProps} />{' '}
+          </>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/pages/index.tsx b/pages/index.tsx
index 5ee98c0ec..4275d1a74 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -19,7 +19,7 @@ const Index: NextPage = () => {
       </h2>
       <PageController handleNavigation={handleNavigation} />
       <h2 className={styles.title}>Ticket & PingPong</h2>
-      <div className={styles.flex}>
+      <div className={styles.flex + ' ' + styles.content}>
         <button
           className={styles.container}
           onClick={() => handleNavigation('/agenda/ticket')}
@@ -40,7 +40,9 @@ const Index: NextPage = () => {
         </button>
       </div>
 
-      <button className={styles.container}>아우터 매치 준비중입니다.</button>
+      <button className={styles.container + ' ' + styles.match}>
+        아우터 매치 준비중입니다.
+      </button>
     </div>
   );
 };
diff --git a/styles/agenda/Home/Agenda.module.scss b/styles/agenda/Home/Agenda.module.scss
index ac518dc18..90c140e0e 100644
--- a/styles/agenda/Home/Agenda.module.scss
+++ b/styles/agenda/Home/Agenda.module.scss
@@ -1,10 +1,29 @@
 @import 'styles/agenda/common.scss';
 
+.agendaContainer {
+  width: 100%;
+  margin: 0 auto;
+  @media screen and (min-width: 961px) {
+    @include container(2);
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+  }
+}
 .agendaPageContainer {
+  @include layout;
+  position: relative;
+  top: -1rem;
   display: flex;
   width: 100%;
   flex-direction: column;
   padding: 1rem 0;
   margin: 0;
   gap: 1.5rem;
+  @media screen and (min-width: 961px) {
+    gap: 0rem;
+    > div:not(:first-child) {
+      margin-bottom: 1.5rem;
+    }
+  }
 }
diff --git a/styles/agenda/Home/AgendaDeadLine.module.scss b/styles/agenda/Home/AgendaDeadLine.module.scss
index 35f74d960..0a524d04c 100644
--- a/styles/agenda/Home/AgendaDeadLine.module.scss
+++ b/styles/agenda/Home/AgendaDeadLine.module.scss
@@ -1,6 +1,7 @@
 @import 'styles/agenda/common.scss';
 
 .agendaItemDeadLineBox {
+  @include gridHidden(mobile);
   position: absolute;
   right: 1rem;
   bottom: 1rem;
diff --git a/styles/agenda/Home/AgendaList.module.scss b/styles/agenda/Home/AgendaList.module.scss
index 5b7630978..671b82493 100644
--- a/styles/agenda/Home/AgendaList.module.scss
+++ b/styles/agenda/Home/AgendaList.module.scss
@@ -1,11 +1,26 @@
 @import 'styles/agenda/common.scss';
-
+.container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  @media screen and (min-width: 961px) {
+    display: grid;
+    grid-template: 'list big' 1fr / auto 1fr;
+  }
+}
 .agendaListContainer {
   display: flex;
   width: 100%;
   flex-direction: column;
   padding: 0 1rem;
   gap: 0.5rem;
+  @media screen and (min-width: 961px) {
+    width: 26rem;
+    height: 70vh;
+    padding: 0 1rem 0 0;
+    overflow-y: auto;
+    grid-area: list;
+  }
 }
 
 .agendaListTextWrapper {
@@ -39,7 +54,17 @@
   display: flex;
   width: 100%;
   flex-direction: column;
-  gap: 1rem;
+  margin-top: 1.5rem;
+  gap: 1.5rem;
+  align-items: center;
+  a {
+    display: flex;
+    width: 100%;
+  }
+  @media screen and (min-width: 961px) {
+    gap: 0.5rem;
+    margin-top: 0;
+  }
 }
 
 .agendaListItemBtn {
@@ -58,6 +83,27 @@
   box-shadow: var(--default-box-shadow);
   justify-content: center;
   align-items: flex-start;
+  @media screen and (min-width: 961px) {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+.listBig {
+  @include gridHidden(web);
+  width: 100%;
+  grid-area: big;
+  @media screen and (min-width: 961px) {
+    width: 100%;
+    height: 100%;
+  }
+}
+.listType {
+  @media screen and (min-width: 961px) {
+    width: 100%;
+    height: 6rem;
+    min-height: 6rem;
+    background: var(--box-bg-1);
+  }
 }
 
 .emptyContainer {
@@ -72,3 +118,11 @@
   @include text('description');
   @include container(1);
 }
+
+.selected {
+  @media screen and (min-width: 961px) {
+    border-color: var(--highlight-violet);
+    border-width: 2px;
+    box-shadow: 2px 2px 0 2px var(--highlight-violet);
+  }
+}
diff --git a/styles/agenda/Home/AgendaTitle.module.scss b/styles/agenda/Home/AgendaTitle.module.scss
index 6d4d8b985..35bf0a24d 100644
--- a/styles/agenda/Home/AgendaTitle.module.scss
+++ b/styles/agenda/Home/AgendaTitle.module.scss
@@ -8,12 +8,24 @@
   padding: 0 1rem;
   @include text(main-menu);
 
-  .agendaTitleButtonContainer {
+  .agendaTitle {
+    @include gridHidden(mobile);
+  }
+  .agendaTitleButton,
+  .agendaTitle {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     align-items: flex-end;
   }
+  .agendaTitleButton {
+    @media screen and (min-width: 961px) {
+      position: absolute;
+      top: 1rem;
+      right: 6rem;
+      flex-direction: row;
+    }
+  }
 
   .agendaCreateBtn {
     display: flex;
diff --git a/styles/agenda/Home/MyAgendaBtn.module.scss b/styles/agenda/Home/MyAgendaBtn.module.scss
index f155729d8..d45990402 100644
--- a/styles/agenda/Home/MyAgendaBtn.module.scss
+++ b/styles/agenda/Home/MyAgendaBtn.module.scss
@@ -17,14 +17,25 @@
   transition: width 0.15s ease, height 0.15s ease;
   gap: 1rem;
   @include text(sub-menu);
+  @include gridHead;
 }
 
 .myAgendaContainer.expandedHeight {
   height: 28rem;
+  overflow-y: auto;
+  @include gridHead;
+  @media screen and (min-width: 961px) {
+    height: max-content;
+  }
 }
 
 .myAgendaContainer.expandedWidth {
-  width: 23rem;
+  // width: 23rem;
+  width: max-content;
+  @include gridHead;
+  @media screen and (min-width: 961px) {
+    width: 100%;
+  }
 }
 
 .myAgendaBtnToggle {
@@ -68,17 +79,27 @@
   overflow-y: scroll;
   align-items: flex-start;
   gap: 1rem;
+  @media screen and (min-width: 961px) {
+    display: flex;
+    width: auto;
+    height: auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
 }
 
 .myagendaItemContainer {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  width: 100%;
+  width: max-content;
   min-height: 5.5rem;
   padding: 0 1.2rem;
   background-color: var(--box-bg-1);
   border: var(--default-border);
   border-radius: $radius-big;
   box-shadow: var(--default-box-shadow);
+  @media screen and (min-width: 961px) {
+    width: max-content;
+  }
 }
diff --git a/styles/agenda/Layout/Layout.module.scss b/styles/agenda/Layout/Layout.module.scss
index 569fddc69..02fb3febf 100644
--- a/styles/agenda/Layout/Layout.module.scss
+++ b/styles/agenda/Layout/Layout.module.scss
@@ -2,11 +2,12 @@
 
 .background {
   position: fixed;
+  top: 0;
   z-index: -1;
   display: flex;
-  width: 100vw;
+  width: 150vw;
   min-width: 380px;
-  height: calc(100vh - 4rem);
+  height: 150vh;
   flex-direction: column;
   background: var(--color-bg);
   background-attachment: fixed;
@@ -14,8 +15,9 @@
   background-size: cover;
 }
 
-.container {
-  margin-top: 4rem;
+.app {
+  margin-top: 5rem;
+  @include app;
 }
 
 .floatingButton {
diff --git a/styles/agenda/Layout/MenuBar.module.scss b/styles/agenda/Layout/MenuBar.module.scss
index 75c352970..46875755f 100644
--- a/styles/agenda/Layout/MenuBar.module.scss
+++ b/styles/agenda/Layout/MenuBar.module.scss
@@ -1,6 +1,7 @@
 @import 'styles/agenda/common.scss';
 .container {
   position: fixed;
+  top: 4rem;
   z-index: 1999;
   width: 25vw;
   min-width: 200px;
@@ -21,10 +22,12 @@
 
 .inactivebg {
   right: 100vw;
+  background: rgba(0, 0, 0, 0);
   transition: all 0.5s;
 }
 .activebg {
   right: 0;
+  background: var(--box-bg-3);
   transition: all 0.5s;
 }
 
@@ -33,7 +36,6 @@
   z-index: 1998;
   width: 100vw;
   height: 100vh;
-  background: var(--box-bg-3);
   box-shadow: 5px 0 20px 10px var(--box-bg-3);
   opacity: 0.5;
 }
diff --git a/styles/agenda/TeamDetail/TeamDetail.module.scss b/styles/agenda/TeamDetail/TeamDetail.module.scss
index aba424866..94a978079 100644
--- a/styles/agenda/TeamDetail/TeamDetail.module.scss
+++ b/styles/agenda/TeamDetail/TeamDetail.module.scss
@@ -1,16 +1,13 @@
 @import 'styles/agenda/common.scss';
 
 .teamDetail {
-  display: flex;
-  flex-direction: column;
+  @include pageContainer;
 }
 
 .agendaLink {
   display: flex;
-  width: calc(100% - 2rem);
-  max-width: 1200px;
+  width: 100%;
   flex-direction: column;
-  margin: 1rem;
   cursor: pointer;
   justify-content: center;
   align-items: center;
diff --git a/styles/agenda/Ticket/Ticket.module.scss b/styles/agenda/Ticket/Ticket.module.scss
index d454b98e4..0630f796e 100644
--- a/styles/agenda/Ticket/Ticket.module.scss
+++ b/styles/agenda/Ticket/Ticket.module.scss
@@ -1,9 +1,14 @@
 @import 'styles/agenda/common.scss';
 
+.pageContainer {
+  @include pageContainer;
+}
+
 .container {
   @include container(1);
   flex-direction: column;
   gap: 1.5rem;
+  margin-top: 0;
 }
 
 .h1 {
diff --git a/styles/agenda/agendaDetail/AgendaDetail.module.scss b/styles/agenda/agendaDetail/AgendaDetail.module.scss
index b94b7d09e..20ef98934 100644
--- a/styles/agenda/agendaDetail/AgendaDetail.module.scss
+++ b/styles/agenda/agendaDetail/AgendaDetail.module.scss
@@ -1,11 +1,15 @@
 @import 'styles/agenda/common.scss';
 
+.layout {
+  @include layout;
+  grid-template:
+    'top top top top' 450px
+    'content content match match' auto / 1fr 1fr 1fr 1fr;
+  max-width: 100%;
+  padding-top: 1px;
+}
+
 .agendaDetailWrap {
-  display: flex;
-  width: 100%;
+  @include pageContainer;
   height: 100%;
-  flex-direction: column;
-  padding: 1rem;
-  justify-content: center;
-  align-items: center;
 }
diff --git a/styles/agenda/agendaDetail/AgendaInfo.module.scss b/styles/agenda/agendaDetail/AgendaInfo.module.scss
index 1f404c5cd..494e357c2 100644
--- a/styles/agenda/agendaDetail/AgendaInfo.module.scss
+++ b/styles/agenda/agendaDetail/AgendaInfo.module.scss
@@ -12,7 +12,9 @@ $info-gradient: linear-gradient(
   @include container(1);
   position: relative;
   width: 100%;
-  padding: 1.5rem;
+  min-width: 280px;
+  max-width: 100%;
+  padding: 1.2rem;
   margin: 0rem;
   background: $info-gradient;
 
@@ -23,6 +25,16 @@ $info-gradient: linear-gradient(
   &.smallHeight {
     height: 10rem;
   }
+
+  @media screen and (min-width: 481px) and (max-width: 960px) {
+    width: 100%;
+  }
+
+  @media screen and (min-width: 961px) {
+    width: 100%;
+    height: 5rem !important;
+    border-radius: 10rem;
+  }
 }
 
 .infoWarp {
@@ -30,6 +42,9 @@ $info-gradient: linear-gradient(
   right: 1.5rem;
   bottom: 1.5rem;
   left: 1.5rem;
+  @media screen and (min-width: 961px) {
+    bottom: 0.3rem;
+  }
 }
 
 .contentWarp {
@@ -37,14 +52,23 @@ $info-gradient: linear-gradient(
   flex-direction: column;
   align-items: flex-start;
   gap: 0.6rem;
+
+  @media screen and (min-width: 961px) {
+    flex-direction: row; // 가로 배치
+    justify-content: space-between; // 간격 조절
+    align-items: center;
+    gap: 1rem;
+  }
 }
 
 .titleWarp {
   display: flex;
-  width: 100%;
-  height: 2.5rem;
-  justify-content: space-between;
   align-items: center;
+  width: 100%;
+  gap: 1.5rem;
+  @media screen and (max-width: 961px) {
+    justify-content: space-between;
+  }
   h2 {
     @include text('agenda-title');
   }
@@ -54,15 +78,28 @@ $info-gradient: linear-gradient(
   cursor: pointer;
 }
 
-.enrollWarp {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-end;
-  gap: 10px;
-  align-self: stretch;
-}
-
 .organizerWrap {
   @include text('default'); // medium
+  margin-right: auto; // UploadBtn과의 간격 확보
+}
+
+.buttonWarp {
+  position: absolute;
+  right: 0;
+  display: flex; // flex 컨테이너로 설정
+  flex-direction: column; // 기본적으로 세로 정렬
+  align-items: flex-end; // 오른쪽 정렬
+  gap: 0.4rem;
+
+  @media screen and (max-width: 960px) {
+    bottom: 100%; // 960px 이하에서 세로 정렬
+  }
+
+  @media screen and (min-width: 961px) {
+    bottom: 26%; // 961px 이상에서 위치 조정
+    flex-direction: row; // 가로 배치
+    justify-content: flex-end; // 오른쪽 정렬
+    align-items: center; // 세로 중앙 정렬
+    gap: 1rem;
+  }
 }
diff --git a/styles/agenda/agendaDetail/AgendaTab.module.scss b/styles/agenda/agendaDetail/AgendaTab.module.scss
index 66bdf592e..f144f1c39 100644
--- a/styles/agenda/agendaDetail/AgendaTab.module.scss
+++ b/styles/agenda/agendaDetail/AgendaTab.module.scss
@@ -12,3 +12,11 @@
   align-items: center;
   gap: 0.5rem;
 }
+
+.tabWarp {
+  width: 100vw;
+  max-width: 100%;
+  @media screen and (min-width: 481px) and (max-width: 960px) {
+    width: 100%;
+  }
+}
diff --git a/styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss b/styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss
index b943e271d..d77154fe1 100644
--- a/styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss
+++ b/styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss
@@ -11,6 +11,15 @@
   margin: 0;
   gap: 1.5rem;
   align-items: flex-start;
+  @media screen and (min-width: 481px) and (max-width: 960px) {
+    width: 450px;
+    max-width: 800px;
+  }
+
+  @media screen and (min-width: 961px) {
+    width: 1000px;
+    max-width: 100%;
+  }
 }
 
 .conditionTitle {
diff --git a/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss b/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss
index 2f71f1253..c2ff2d4a5 100644
--- a/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss
+++ b/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss
@@ -3,14 +3,23 @@
 .descriptionContainer {
   @include container(1);
   display: flex;
-  width: 100%;
+  width: 100vw;
   flex: 1 0 0;
 
   flex-direction: column;
-  padding: 1.5rem;
+  padding: 1.5rem !important;
   margin: 0;
   gap: 1.2rem;
   align-items: flex-start;
+
+  @media screen and (min-width: 481px) and (max-width: 960px) {
+    width: 100%;
+  }
+
+  @media screen and (min-width: 961px) {
+    width: 1000px;
+    max-width: 100%;
+  }
 }
 
 .descriptionTitle {
diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss
index a107efae5..3cb532e97 100644
--- a/styles/agenda/common.scss
+++ b/styles/agenda/common.scss
@@ -1,5 +1,6 @@
 // https://dev.to/wgnrd/adding-a-dark-mode-to-your-website-using-scss-4pdc
 // @import 'styles/globals.css';
+@import 'responsive.scss';
 
 // radius
 $radius-extra-small: 0.5rem;
@@ -54,8 +55,7 @@ $font-size-xs: 0.8rem; // $small-font
 
 @mixin container($level) {
   display: flex;
-  width: calc(100% - 2rem);
-  max-width: 1200px;
+  width: 100%;
   flex-direction: column;
   padding: 1rem;
   margin: 1rem;
diff --git a/styles/agenda/pages/CreateAgenda.module.scss b/styles/agenda/pages/CreateAgenda.module.scss
index d89529206..97c4639cd 100644
--- a/styles/agenda/pages/CreateAgenda.module.scss
+++ b/styles/agenda/pages/CreateAgenda.module.scss
@@ -1,5 +1,8 @@
 @import 'styles/agenda/Form/Form.module.scss';
 
+.pageContainer {
+  @include pageContainer;
+}
 .container {
   @include container(1);
   padding: 0.5rem;
diff --git a/styles/agenda/pages/create-team.module.scss b/styles/agenda/pages/create-team.module.scss
index 7b7cc4146..7d47e1377 100644
--- a/styles/agenda/pages/create-team.module.scss
+++ b/styles/agenda/pages/create-team.module.scss
@@ -1,8 +1,13 @@
 @import 'styles/agenda/common.scss';
 
+.pageContainer {
+  @include pageContainer;
+}
+
 .container {
   @include container(1);
-  padding: 1rem 0.5rem;
+  padding: 1rem;
+  margin-top: 0;
   @include text('default');
 }
 
diff --git a/styles/agenda/responsive.scss b/styles/agenda/responsive.scss
new file mode 100644
index 000000000..8425ce445
--- /dev/null
+++ b/styles/agenda/responsive.scss
@@ -0,0 +1,96 @@
+@mixin action {
+  transition: all 0.5s;
+}
+
+// 최상위 앱 컨트롤러
+// Layout 모듈에서 사용
+@mixin app {
+  @include action;
+  display: flex;
+  width: 100vw;
+  flex-direction: column;
+  align-items: center;
+  @media screen and (max-width: 480px) {
+    // border: 1px solid red;
+  }
+  @media screen and (min-width: 481px) and (max-width: 960px) {
+    // border: 1px solid blue;
+  }
+  @media screen and (min-width: 961px) {
+    // border: 1px solid yellow;
+  }
+}
+
+// 기본 레이아웃, 모든 페이지에서 사용
+// 웹 뷰에서는 그리드, 모바일 뷰에서는 컬럼
+// 각 페이지 내에서 그리드 템플릿 세팅 필요
+@mixin layout {
+  @include action;
+  width: 100%;
+  @media screen and (max-width: 480px) {
+    display: flex;
+    flex-direction: column;
+    // border: 2px solid red;
+  }
+  @media screen and (min-width: 481px) and (max-width: 960px) {
+    display: flex;
+    flex-direction: column;
+    // padding: 0 5rem;
+    // border: 2px solid blue;
+  }
+  @media screen and (min-width: 961px) {
+    display: grid;
+    padding: 0 5rem;
+    // border: 2px solid yellow;
+  }
+}
+@mixin pageContainer {
+  @include action;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  padding: 0 1rem;
+  align-items: center;
+
+  @media screen and (min-width: 451px) and (max-width: 960px) {
+    padding: 0 2rem;
+  }
+  @media screen and (min-width: 961px) {
+    height: auto;
+  }
+}
+
+// 헤더에 붙어있는 부분
+@mixin gridHead {
+  @include action;
+  @media screen and (min-width: 961px) {
+    width: calc(100%);
+    border: var(--default-border);
+    border-top: none;
+    border-radius: 0 0 $radius-big $radius-big;
+  }
+}
+
+// 아래 컨테이너 중 가장 위에 있는 부분
+@mixin gridTop {
+  @include action;
+  // @media screen and (min-width: 481px) and (max-width: 960px) {
+  // }
+  // @media screen and (min-width: 961px) {
+  //   width: 100%;
+  //   grid-column: 1 / -1;
+  // }
+}
+
+@mixin gridHidden($view) {
+  @include action;
+  @if ($view == 'web') {
+    @media screen and (max-width: 960px) {
+      display: none !important;
+    }
+  } @else {
+    @media screen and (min-width: 961px) {
+      display: none !important;
+    }
+  }
+}
diff --git a/styles/agenda/utils/PageController.module.scss b/styles/agenda/utils/PageController.module.scss
index 8bcc7cf45..aba8823fa 100644
--- a/styles/agenda/utils/PageController.module.scss
+++ b/styles/agenda/utils/PageController.module.scss
@@ -3,15 +3,18 @@
 .container {
   width: 100%;
   height: max-content;
+  grid-area: top;
+  @include pageContainer;
 }
 
 .agendaInfoContainer {
   @include container(1);
+  @media screen and (min-width: 961px) {
+    height: 360px;
+  }
   position: relative;
   z-index: 0;
   display: flex;
-  min-width: 352px;
-  max-width: 750px;
   height: calc(150px + (100vw - 352px) * ((600 - 150) / (750 - 352)));
   min-height: 180px;
   max-height: 600px;
diff --git a/styles/color-theme.css b/styles/color-theme.css
index 5d4890887..81b9a451f 100644
--- a/styles/color-theme.css
+++ b/styles/color-theme.css
@@ -24,6 +24,8 @@
   --highlight-violet-light: #af71ff;
   --highlight-yellow-dark: #fff78a;
   --highlight-violet-dark: #af71ff;
+  --highlight-bg-dark: #af71ff;
+  --highlight-bg-light: #cda7fc;
 
   --box-bg-1-light: #f8f8f8;
   --box-bg-2-light: #c8c8c8ec;
@@ -47,6 +49,7 @@ html[data-theme='light'] {
   --highlight-border: var(--border-highlight-light);
   --default-box-shadow: var(--box-shadow-light);
   --highlight-yellow: var(--highlight-yellow-light);
+  --highlight-bg: var(--highlight-bg-light);
   --highlight-violet: var(--highlight-violet-light);
   --box-bg-1: var(--box-bg-1-light);
   --box-bg-2: var(--box-bg-2-light);
@@ -64,6 +67,7 @@ html[data-theme='dark'] {
   --default-box-shadow: var(--box-shadow-dark);
   --highlight-yellow: var(--highlight-yellow-dark);
   --highlight-violet: var(--highlight-violet-dark);
+  --highlight-bg: var(--highlight-bg-dark);
   --box-bg-1: var(--box-bg-1-dark);
   --box-bg-2: var(--box-bg-2-dark);
   --box-bg-3: var(--box-bg-3-dark);
diff --git a/styles/index.module.scss b/styles/index.module.scss
index 5cb028a9b..0e788d62b 100644
--- a/styles/index.module.scss
+++ b/styles/index.module.scss
@@ -1,5 +1,9 @@
 @import 'styles/agenda/common.scss';
 .layout {
+  @include layout;
+  grid-template:
+    'top top top top' 450px
+    'content content match match' auto / 1fr 1fr 1fr 1fr;
   max-width: 100%;
   padding-top: 1px;
 }
@@ -17,3 +21,11 @@
 .flex {
   display: flex;
 }
+
+.content {
+  grid-area: content;
+}
+
+.match {
+  grid-area: match;
+}
diff --git a/styles/takgu/Layout/MainPageProfile.module.scss b/styles/takgu/Layout/MainPageProfile.module.scss
index e29c38f9c..ae0cd738d 100644
--- a/styles/takgu/Layout/MainPageProfile.module.scss
+++ b/styles/takgu/Layout/MainPageProfile.module.scss
@@ -11,7 +11,7 @@
   align-items: center;
 }
 
-.gridContainer {
+.pageContainer {
   display: grid;
   grid-template-columns: 1fr 3fr;
   grid-template-areas: 'image greetingsArea';
diff --git a/types/agenda/agendaDetail/agendaTypes.ts b/types/agenda/agendaDetail/agendaTypes.ts
index 6a760a71d..a5bf76fdb 100644
--- a/types/agenda/agendaDetail/agendaTypes.ts
+++ b/types/agenda/agendaDetail/agendaTypes.ts
@@ -22,6 +22,7 @@ export interface AgendaDataProps {
   isRanking?: boolean;
   agendaisRanking: boolean;
   agendaKey: string;
+  idx?: number;
 }
 
 export interface AgendaProps {
@@ -32,6 +33,8 @@ export interface MyTeamDataProps {
   agendaKey: string; // 대회 고유 키
   agendaTitle: string;
   agendaLocation: string; // ENUM 상단참고
+  agendaStartTime?: Date | string;
+  teamStatus: string;
   teamKey: string; // 내 팀 조회를 위한 key
   isOfficial: boolean; //공식대회여부
   teamName: string; //fe 추가 0728 : 와이어프레임 참고