diff --git a/components/LoginChecker.tsx b/components/LoginChecker.tsx
index 98d4676ce..e8d5d9692 100644
--- a/components/LoginChecker.tsx
+++ b/components/LoginChecker.tsx
@@ -7,7 +7,7 @@ interface LoginCheckerProps {
 }
 
 export default function LoginChecker({ children }: LoginCheckerProps) {
-  // return <>{children}</>;
+  return <>{children}</>;
 
   const [isLoading, loggedIn] = useLoginCheck();
   // return <>{children}</>;
diff --git a/components/agenda/Form/AgendaForm.tsx b/components/agenda/Form/AgendaForm.tsx
index 4491abc74..8a853f6f2 100644
--- a/components/agenda/Form/AgendaForm.tsx
+++ b/components/agenda/Form/AgendaForm.tsx
@@ -73,14 +73,14 @@ const AgendaForm = ({
     if (!Array.isArray(newValue)) {
       return;
     }
-
     if (newValue[1] - newValue[0] < minDistance) {
       if (activeThumb === 0) {
         const clamped = Math.min(newValue[0], 100 - minDistance);
         setTeamLimit([clamped, clamped + minDistance]);
       } else {
         const clamped = Math.max(newValue[1], minDistance);
-        setTeamLimit([clamped - minDistance, clamped]);
+        if (clamped - minDistance < newValue[0]) setTeamLimit([2, 12]);
+        else setTeamLimit([clamped - minDistance, clamped]);
       }
     } else {
       setTeamLimit(newValue as number[]);
diff --git a/components/agenda/Home/AgendaInfo.tsx b/components/agenda/Home/AgendaInfo.tsx
index 0a296089d..d4b797add 100644
--- a/components/agenda/Home/AgendaInfo.tsx
+++ b/components/agenda/Home/AgendaInfo.tsx
@@ -8,10 +8,10 @@ import styles from 'styles/agenda/Home/AgendaInfo.module.scss';
 // Props: API data
 const AgendaInfo = ({
   agendaInfo,
-  key,
+  idx,
 }: {
   agendaInfo: AgendaDataProps;
-  key: number;
+  idx: number;
 }) => {
   if (!agendaInfo) {
     return <div>There is no agenda</div>;
@@ -20,7 +20,7 @@ const AgendaInfo = ({
   const endDate = new Date(agendaInfo.agendaEndTime);
 
   return (
-    <div className={styles.agendaInfoContainer} key={key}>
+    <div className={styles.agendaInfoContainer} key={idx}>
       <div className={styles.agendaDateBox}>
         <div className={styles.agendaStartDateMonth}>
           {fillZero(`${startDate.getMonth()}`, 2)}
diff --git a/components/agenda/Home/AgendaList.tsx b/components/agenda/Home/AgendaList.tsx
index 2b9e11a8d..f3f10c9ee 100644
--- a/components/agenda/Home/AgendaList.tsx
+++ b/components/agenda/Home/AgendaList.tsx
@@ -9,49 +9,48 @@ const AgendaList = ({ agendaList }: { agendaList: AgendaDataProps[] }) => {
   const [selectedItem, setSelectedItem] = useState<number | null>(0);
 
   return (
-    <div className={styles.container}>
-      <div className={styles.agendaListContainer}>
-        <div className={styles.agendaListItemContainer}>
-          {!agendaList || !agendaList.length ? (
-            <div>
-              <div className={styles.emptyContainer}>일정이 없습니다.</div>
+    <>
+      {!agendaList || !agendaList.length ? (
+        <div className={styles.emptyContainer}>일정이 없습니다.</div>
+      ) : (
+        <div className={styles.container}>
+          <div className={styles.agendaListContainer}>
+            <div className={styles.agendaListItemContainer}>
+              {agendaList.map((agendaInfo, idx) => {
+                agendaInfo.idx = idx;
+                return (
+                  <AgendaListItem
+                    agendaInfo={agendaInfo}
+                    key={idx}
+                    idx={idx}
+                    type='list'
+                    className={idx === selectedItem ? styles.selected : ''}
+                    setSelectedItem={setSelectedItem}
+                  />
+                );
+              })}
             </div>
-          ) : (
-            agendaList.map((agendaInfo, idx) => {
-              agendaInfo.idx = idx;
-              return (
-                <AgendaListItem
-                  agendaInfo={agendaInfo}
-                  key={idx}
-                  type='list'
-                  className={idx === selectedItem ? styles.selected : ''}
-                  setSelectedItem={setSelectedItem}
-                />
-              );
-            })
-          )}
+          </div>
+          <AgendaListItem
+            agendaInfo={agendaList[selectedItem || 0]}
+            idx={selectedItem || 0}
+            type='big'
+          />
         </div>
-      </div>
-      {agendaList.length && (
-        <AgendaListItem
-          agendaInfo={agendaList[selectedItem || 0]}
-          key={selectedItem || 0}
-          type='big'
-        />
       )}
-    </div>
+    </>
   );
 };
 
 const AgendaListItem = ({
   agendaInfo,
-  key,
+  idx,
   type,
   className,
   setSelectedItem,
 }: {
   agendaInfo: AgendaDataProps;
-  key: number;
+  idx: number;
   type?: string;
   className?: string;
   setSelectedItem?: (key: number) => void;
@@ -69,20 +68,24 @@ const AgendaListItem = ({
           agendaInfo.agendaPosterUrl || '/image/agenda/42.jpg'
         }) lightgray 50% / cover no-repeat`,
       }}
-      key={key}
+      key={idx}
       onClick={() => {
         if (window.innerWidth < 961) {
           router.push(href);
           return;
         }
-        if (type === 'list' && setSelectedItem && agendaInfo.idx) {
+        if (
+          type === 'list' &&
+          setSelectedItem &&
+          typeof agendaInfo.idx === 'number'
+        ) {
           setSelectedItem(agendaInfo.idx);
           return;
         }
         router.push(href);
       }}
     >
-      <AgendaInfo agendaInfo={agendaInfo} key={key} />
+      <AgendaInfo agendaInfo={agendaInfo} idx={idx} />
       <AgendaDeadLine />
     </button>
   );
diff --git a/components/agenda/Home/MyAgendaBtn.tsx b/components/agenda/Home/MyAgendaBtn.tsx
index 3b4acf66d..9781cb51c 100644
--- a/components/agenda/Home/MyAgendaBtn.tsx
+++ b/components/agenda/Home/MyAgendaBtn.tsx
@@ -31,7 +31,6 @@ const MyAgendaBtn = () => {
   };
   const myList =
     useFetchGet<MyTeamDataProps[]>('/profile/current/list')?.data || [];
-  console.log(myList);
   return (
     <div
       className={`${styles.myAgendaContainer} ${
@@ -61,7 +60,7 @@ const MyAgendaBtn = () => {
               key={idx}
             >
               <div className={styles.myagendaItemContainer} key={idx}>
-                <MyTeamInfo myTeamInfo={myTeamInfo} key={idx} />
+                <MyTeamInfo myTeamInfo={myTeamInfo} key={idx} idx={idx} />
               </div>
             </Link>
           ))
diff --git a/components/agenda/Home/MyTeamInfo.tsx b/components/agenda/Home/MyTeamInfo.tsx
index 0c580a1aa..ff8de004a 100644
--- a/components/agenda/Home/MyTeamInfo.tsx
+++ b/components/agenda/Home/MyTeamInfo.tsx
@@ -7,10 +7,10 @@ import styles from 'styles/agenda/Home/MyTeamInfo.module.scss';
 // Props: API data
 const MyTeamInfo = ({
   myTeamInfo,
-  key,
+  idx,
 }: {
   myTeamInfo: MyTeamDataProps;
-  key: number;
+  idx: number;
 }) => {
   if (!myTeamInfo) {
     return <div>참가중인 일정이 없습니다.</div>;
@@ -19,7 +19,7 @@ const MyTeamInfo = ({
   const startDate = new Date(myTeamInfo.agendaStartTime as string);
   //아래 주석달린 부분은 api 변경시 추가 예정입니다.
   return (
-    <div className={styles.Container} key={key}>
+    <div className={styles.Container} key={idx}>
       <div className={agendastyles.agendaDateBox}>
         <div className={agendastyles.agendaStartDateMonth}>
           {fillZero(`${startDate.getMonth()}`, 2)}
diff --git a/components/agenda/utils/PageController.tsx b/components/agenda/utils/PageController.tsx
index e33bf7537..19c010894 100644
--- a/components/agenda/utils/PageController.tsx
+++ b/components/agenda/utils/PageController.tsx
@@ -41,7 +41,7 @@ const PageController = ({
   const max = data.length;
 
   const fetchAgendaList = async () => {
-    const url = '/list';
+    const url = '/open';
     const data = await instanceInAgenda
       .get(url)
       .then((res) => {
@@ -73,24 +73,13 @@ const PageController = ({
 
   return (
     <div className={styles.container}>
-      <button
+      <div
         className={styles.agendaInfoContainer}
         style={{
-          background: `linear-gradient(0deg, #fff 7rem, rgba(0, 0, 0, 0) 10rem), url(${
+          background: `linear-gradient(180deg, #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;
-          if (
-            target.className.includes(styles.moveButton) ||
-            target.closest(styles.moveButton)
-          )
-            return;
-          data.length && data[current]
-            ? handleNavigation('/agenda/' + data[current].agendaKey)
-            : null;
-        }}
       >
         <button
           onClick={movePrev}
@@ -98,14 +87,29 @@ const PageController = ({
         >
           <div className={styles.prev} />
         </button>
+        <button
+          onClick={(e) => {
+            const target = e.target as HTMLElement;
+            if (
+              target.className.includes(styles.moveButton) ||
+              target.closest(styles.moveButton)
+            )
+              return;
+            data.length && data[current]
+              ? handleNavigation('/agenda/' + data[current].agendaKey)
+              : null;
+          }}
+          className={styles.toClick}
+        />
+
         <button
           className={`${styles.moveButton} ${styles.moveButtonNext}`}
           onClick={moveNext}
         >
           <div className={styles.next} />
         </button>
-        <AgendaInfo agendaInfo={data[current]} key={current || 0} />
-      </button>
+        <AgendaInfo agendaInfo={data[current]} idx={current || 0} />
+      </div>
       <PageControllerNavigator
         currentPage={current}
         maxPage={data.length}
diff --git a/pages/agenda/index.tsx b/pages/agenda/index.tsx
index 0793fab21..294fd7193 100644
--- a/pages/agenda/index.tsx
+++ b/pages/agenda/index.tsx
@@ -10,20 +10,15 @@ import styles from 'styles/agenda/Home/Agenda.module.scss';
 import listStyles from 'styles/agenda/Home/AgendaList.module.scss';
 
 const Agenda: NextPage = () => {
-  const [showCurrent, setShowCurrent] = useState<boolean>(true);
+  const [showCurrent, setShowCurrent] = useState<string>('open');
 
   const { PagaNationElementProps, content: historyData } =
     usePageNation<AgendaDataProps>({
       url: '/history',
     });
 
-  const { data: currentData } = useFetchGet<AgendaDataProps[]>('/list');
-  const toggleStatus = (e: React.MouseEvent) => {
-    const target = e.target as HTMLButtonElement;
-    const status = showCurrent ? 'ongoing' : 'closed';
-    if ((target && target.name === status) || !target.name) return;
-    setShowCurrent(target.name === 'ongoing');
-  };
+  const { data: currentData } = useFetchGet<AgendaDataProps[]>('/confirm');
+  const { data: openData } = useFetchGet<AgendaDataProps[]>('/open');
 
   return (
     <div className={styles.agendaPageContainer}>
@@ -33,28 +28,40 @@ const Agenda: NextPage = () => {
           <h2>AGENDA LIST</h2>
           <div>
             <button
-              className={`${listStyles.agendaListStatus} ${
-                showCurrent ? listStyles.selectedStatus : ''
-              }`}
+              className={`${listStyles.agendaListStatus} 
+                ${showCurrent === 'open' ? listStyles.selectedStatus : ''}`}
               name='ongoing'
-              onClick={toggleStatus}
+              onClick={() => setShowCurrent('open')}
+            >
+              모집중
+            </button>
+            {' | '}
+            <button
+              className={`${listStyles.agendaListStatus} 
+            ${showCurrent === 'current' ? listStyles.selectedStatus : ''}`}
+              name='closed'
+              onClick={() => setShowCurrent('current')}
             >
               진행중
             </button>
             {' | '}
             <button
               className={`${listStyles.agendaListStatus} 
-            ${showCurrent ? '' : listStyles.selectedStatus}`}
+              ${showCurrent === 'history' ? listStyles.selectedStatus : ''}`}
               name='closed'
-              onClick={toggleStatus}
+              onClick={() => setShowCurrent('history')}
             >
               종료된
             </button>
           </div>
         </div>
 
-        {showCurrent ? (
-          <AgendaList agendaList={currentData || []} />
+        {showCurrent !== 'history' ? (
+          <AgendaList
+            agendaList={
+              showCurrent === 'open' ? openData || [] : currentData || []
+            }
+          />
         ) : (
           <>
             <AgendaList agendaList={historyData || []} />
diff --git a/pages/index.tsx b/pages/index.tsx
index 4275d1a74..5932e6eb2 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -3,7 +3,6 @@ import { useRouter } from 'next/router';
 import type { NextPage } from 'next';
 import PageController from 'components/agenda/utils/PageController';
 import PingpongIcon from 'public/image/takgu/ping-pong.svg';
-import { useUser } from 'hooks/agenda/Layout/useUser';
 import styles from 'styles/index.module.scss';
 
 const Index: NextPage = () => {
@@ -14,35 +13,56 @@ const Index: NextPage = () => {
 
   return (
     <div className={styles.layout}>
-      <h2 className={styles.title} onClick={() => handleNavigation('/agenda')}>
-        Agenda
-      </h2>
-      <PageController handleNavigation={handleNavigation} />
-      <h2 className={styles.title}>Ticket & PingPong</h2>
-      <div className={styles.flex + ' ' + styles.content}>
-        <button
-          className={styles.container}
-          onClick={() => handleNavigation('/agenda/ticket')}
+      <div className={styles.top}>
+        <h2
+          className={styles.title}
+          onClick={() => handleNavigation('/agenda')}
         >
-          <Image
-            src='/image/ticket.png'
-            alt='ticket'
-            width={0}
-            height={0}
-            style={{ width: '100%', height: '100%' }}
-          />
-        </button>
-        <button
-          className={styles.container}
-          onClick={() => handleNavigation('/takgu')}
-        >
-          <PingpongIcon width='100%' height='100%' />
-        </button>
+          Agenda
+        </h2>
+        <PageController handleNavigation={handleNavigation} />
+      </div>
+      <div className={styles.flex}>
+        <div className={styles.ticket}>
+          <h2 className={styles.title}>Ticket</h2>
+          <button
+            className={styles.container}
+            onClick={() => handleNavigation('/agenda/ticket')}
+          >
+            <Image
+              src='/image/ticket.png'
+              alt='ticket'
+              width={0}
+              height={0}
+              style={{ width: '100%', height: '100%' }}
+            />
+          </button>
+        </div>
+        <div className={styles.pingpong}>
+          <h2
+            className={styles.title}
+            onClick={() => handleNavigation('/takgu')}
+          >
+            PingPong
+          </h2>
+          <button
+            className={styles.container}
+            onClick={() => handleNavigation('/takgu')}
+          >
+            <PingpongIcon width='100%' height='100%' />
+          </button>
+        </div>
       </div>
 
-      <button className={styles.container + ' ' + styles.match}>
-        아우터 매치 준비중입니다.
-      </button>
+      <div className={styles.match}>
+        <h2
+          className={styles.title}
+          // onClick={() => handleNavigation('/takgu')}
+        >
+          Outer match
+        </h2>
+        <button className={styles.container}>아우터 매치 준비중입니다.</button>
+      </div>
     </div>
   );
 };
diff --git a/styles/agenda/Home/AgendaList.module.scss b/styles/agenda/Home/AgendaList.module.scss
index 671b82493..cdb81fcee 100644
--- a/styles/agenda/Home/AgendaList.module.scss
+++ b/styles/agenda/Home/AgendaList.module.scss
@@ -107,16 +107,16 @@
 }
 
 .emptyContainer {
+  @include container(1);
+  @include text('description');
   display: flex;
-  width: 100%;
+  width: calc(100% - 2rem);
   height: 10rem;
   font-size: $font-size-m;
   opacity: 70%;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
-  @include text('description');
-  @include container(1);
 }
 
 .selected {
diff --git a/styles/agenda/utils/PageController.module.scss b/styles/agenda/utils/PageController.module.scss
index aba8823fa..1827299f9 100644
--- a/styles/agenda/utils/PageController.module.scss
+++ b/styles/agenda/utils/PageController.module.scss
@@ -3,14 +3,17 @@
 .container {
   width: 100%;
   height: max-content;
-  grid-area: top;
   @include pageContainer;
+  @media screen and (max-width: 960px) {
+    padding: 0 1rem !important;
+  }
 }
 
 .agendaInfoContainer {
   @include container(1);
   @media screen and (min-width: 961px) {
-    height: 360px;
+    height: auto;
+    min-height: 300px;
   }
   position: relative;
   z-index: 0;
@@ -65,13 +68,13 @@
   align-items: center;
 }
 
-.moveButtonPrev,
-.moveButtonNext {
+.moveButton {
   position: absolute;
   top: 0;
   z-index: 1000;
   width: 20%;
   height: 100%;
+  cursor: pointer;
   background-color: transparent;
   border: none;
   border-radius: $radius-medium;
@@ -116,3 +119,14 @@
   border-bottom: 1rem solid transparent;
   border-left: 1rem solid transparent;
 }
+
+.toClick {
+  position: absolute;
+  top: 0;
+  right: 20%;
+  width: 60%;
+  height: 100%;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
diff --git a/styles/index.module.scss b/styles/index.module.scss
index 0e788d62b..b6425b17c 100644
--- a/styles/index.module.scss
+++ b/styles/index.module.scss
@@ -2,30 +2,60 @@
 .layout {
   @include layout;
   grid-template:
-    'top top top top' 450px
-    'content content match match' auto / 1fr 1fr 1fr 1fr;
+    'top top' 450px
+    'content match' auto / 1fr 1fr;
   max-width: 100%;
   padding-top: 1px;
+  margin: 1rem;
 }
-
 .title {
   @include text(main-menu);
-  margin: 1rem 0 0 1.5rem;
+  margin-bottom: 0rem;
+  margin-left: 2rem;
   font-size: $font-size-l;
 }
 
 .container {
   @include container(1);
+  width: calc(100% - 2rem);
+  @media screen and (min-width: 961px) {
+    width: auto;
+    height: calc(100% - 4.7rem);
+  }
 }
 
 .flex {
   display: flex;
+  grid-area: content;
 }
 
 .content {
-  grid-area: content;
+  @media screen and (max-width: 960px) {
+    margin: 1rem;
+  }
 }
 
 .match {
   grid-area: match;
+  width: calc(100% - 2rem);
+  .container {
+    width: 100%;
+    height: calc(100% - 4.7rem);
+  }
+}
+
+// grid-template-areas:
+.top,
+.ticket,
+.pingpong {
+  width: 100%;
+}
+.top {
+  grid-area: top;
+}
+.ticket {
+  grid-area: ticket;
+}
+.pingpong {
+  grid-area: pingpong;
 }
diff --git a/styles/takgu/Layout/Layout.module.scss b/styles/takgu/Layout/Layout.module.scss
index a9254f222..da740b9b7 100644
--- a/styles/takgu/Layout/Layout.module.scss
+++ b/styles/takgu/Layout/Layout.module.scss
@@ -4,7 +4,7 @@
 
 .appContainer {
   display: flex;
-  width: 100vw;
+  width: 100%;
   min-width: 380px;
   flex-direction: column;
   background: black;