diff --git a/.github/workflows/main-deploy.yml b/.github/workflows/main-deploy.yml
index 7b6452000..4e5685cb6 100644
--- a/.github/workflows/main-deploy.yml
+++ b/.github/workflows/main-deploy.yml
@@ -20,6 +20,7 @@ jobs:
       - name: Build
         env:
           NEXT_PUBLIC_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_SERVER_ENDPOINT }}
+          NEXT_PUBLIC_AGENDA_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_AGENDA_SERVER_ENDPOINT }}
           NEXT_PUBLIC_CLIENT_ENDPOINT: ${{ secrets.NEXT_PUBLIC_CLIENT_ENDPOINT }}
           NEXT_PUBLIC_MANAGE_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_MANAGE_SERVER_ENDPOINT }}
           NEXT_PUBLIC_PARTY_MANAGE_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_PARTY_MANAGE_SERVER_ENDPOINT }}
diff --git a/components/agenda/Home/AgendaInfo.tsx b/components/agenda/Home/AgendaInfo.tsx
index c560fed75..b21000e5d 100644
--- a/components/agenda/Home/AgendaInfo.tsx
+++ b/components/agenda/Home/AgendaInfo.tsx
@@ -3,6 +3,7 @@ import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaTypes';
 import { showPeriod } from 'utils/handleTime';
 import AgendaTags from 'components/agenda/utils/AgendaTags';
 import StartDate from 'components/agenda/utils/StartDate';
+import RightArrow from 'public/image/agenda/ChevronRight.svg';
 import styles from 'styles/agenda/Home/AgendaInfo.module.scss';
 
 // Props: API data
@@ -14,7 +15,15 @@ const AgendaInfo = ({
   idx: number;
 }) => {
   if (!agendaInfo) {
-    return <div>There is no agenda</div>;
+    return (
+      <div className={styles.emptyContainer}>
+        <div>현재 모집 중인 행사가 없습니다.</div>
+        <div className={styles.emptyContent}>
+          <div>Agenda 페이지 이동</div>
+          <RightArrow className={styles.arrowIcon} />
+        </div>
+      </div>
+    );
   }
   const startDate = new Date(agendaInfo.agendaStartTime);
   const endDate = new Date(agendaInfo.agendaEndTime);
diff --git a/components/agenda/Home/AgendaTitle.tsx b/components/agenda/Home/AgendaTitle.tsx
index 0e8b1a628..ccda6f444 100644
--- a/components/agenda/Home/AgendaTitle.tsx
+++ b/components/agenda/Home/AgendaTitle.tsx
@@ -7,7 +7,7 @@ const AgendaTitle = () => {
   return (
     <>
       <div className={styles.agendaTitleContainer}>
-        <div className={`${styles.agendaTitle}`}>AGENDA</div>
+        <div className={`${styles.agendaTitle}`}>Agenda</div>
         <div className={styles.agendaTitleButton}>
           <Link href={`/agenda/create`}>
             <button className={styles.agendaCreateBtn}>
diff --git a/components/agenda/Layout/AgendaHeader.tsx b/components/agenda/Layout/AgendaHeader.tsx
index 68a318608..78dd01617 100644
--- a/components/agenda/Layout/AgendaHeader.tsx
+++ b/components/agenda/Layout/AgendaHeader.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { createContext, Dispatch, SetStateAction, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
 import Logo from 'public/image/main-logo.svg';
diff --git a/components/agenda/Profile/CurrentList.tsx b/components/agenda/Profile/CurrentList.tsx
index 64e0dd6c0..3df648145 100644
--- a/components/agenda/Profile/CurrentList.tsx
+++ b/components/agenda/Profile/CurrentList.tsx
@@ -16,7 +16,9 @@ const CurrentList = ({
           </div>
         ))
       ) : (
-        <div className={styles.currentTeamEmpty}>참여중 아젠다가 없습니다.</div>
+        <div className={styles.currentTeamEmpty}>
+          아젠다 목록이 비어있습니다. 새로운 아젠다를 시작해보세요!
+        </div>
       )}
     </div>
   );
diff --git a/components/agenda/Profile/HistoryList.tsx b/components/agenda/Profile/HistoryList.tsx
index e9110f459..e21053293 100644
--- a/components/agenda/Profile/HistoryList.tsx
+++ b/components/agenda/Profile/HistoryList.tsx
@@ -110,7 +110,9 @@ const HistoryList = ({ historyListData }: HistoryListProps) => {
             }
           )
         ) : (
-          <div className={styles.historyEmpty}>아젠다 기록이 없습니다.</div>
+          <div className={styles.historyEmpty}>
+            아젠다 기록이 없습니다. 새로운 아젠다를 시작해보세요!
+          </div>
         )}
       </div>
     </>
diff --git a/components/agenda/Profile/ProfileCard.tsx b/components/agenda/Profile/ProfileCard.tsx
index 1d4ed497a..59a8d1f0d 100644
--- a/components/agenda/Profile/ProfileCard.tsx
+++ b/components/agenda/Profile/ProfileCard.tsx
@@ -217,7 +217,12 @@ const ProfileCard = ({
                             key={index}
                             className={styles.acheivementImageWrapper}
                           >
-                            <CustomImage src={parsedUrl} alt='achievement' />
+                            <CustomImage
+                              src={parsedUrl}
+                              alt='achievement'
+                              name={data.name}
+                              description={data.description}
+                            />
                           </div>
                         );
                       }
diff --git a/components/agenda/Ticket/Ticket.tsx b/components/agenda/Ticket/Ticket.tsx
index 6adefd82a..b79e39918 100644
--- a/components/agenda/Ticket/Ticket.tsx
+++ b/components/agenda/Ticket/Ticket.tsx
@@ -11,7 +11,7 @@ interface TicketProps {
 const Ticket = ({ type }: { type: string }) => {
   const { data } = useFetchGet<TicketProps>({ url: '/ticket' });
   const { openModal } = useModal();
-  console.log(data);
+
   return (
     <>
       {type === 'page' ? (
diff --git a/components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx b/components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx
index 585db8bc9..0c130e0dc 100644
--- a/components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx
+++ b/components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx
@@ -17,6 +17,10 @@ export default function AgendaAnnouncements() {
     size: 5,
     isReady: Boolean(agendaKey),
   });
+  const newHandler = (page: number) => {
+    setSelected(0);
+    return PagaNationElementProps.pageChangeHandler(page);
+  };
 
   if (!agendaKey || !content) {
     return (
@@ -41,16 +45,23 @@ export default function AgendaAnnouncements() {
                 setSelected={() => setSelected(idx)}
               />
             ))}
-            <PageNation {...PagaNationElementProps} />
+            <PageNation
+              {...PagaNationElementProps}
+              pageChangeHandler={newHandler}
+            />
           </div>
-          <AnnouncementItem
-            key={content[selected].id}
-            id={content[selected].id}
-            title={content[selected].title}
-            content={content[selected].content}
-            createdAt={content[selected].createdAt}
-            isSelected={true}
-          />
+          {content[selected] ? (
+            <AnnouncementItem
+              key={content[selected].id}
+              id={content[selected].id}
+              title={content[selected].title}
+              content={content[selected].content}
+              createdAt={content[selected].createdAt}
+              isSelected={true}
+            />
+          ) : (
+            ''
+          )}
         </>
       ) : (
         <div className={styles.emptyContainer}>공지사항이 없습니다.</div>
diff --git a/components/agenda/agendaDetail/tabs/AgendaDescription.tsx b/components/agenda/agendaDetail/tabs/AgendaDescription.tsx
index fc7bf383f..72db01c78 100644
--- a/components/agenda/agendaDetail/tabs/AgendaDescription.tsx
+++ b/components/agenda/agendaDetail/tabs/AgendaDescription.tsx
@@ -37,7 +37,7 @@ export default function AgendaDescription({ agendaData }: AgendaProps) {
         <div className={styles.midContainer}>
           <div className={styles.descriptionItem}>
             <h3>대회 설명</h3>
-            <span>{agendaContent}</span>
+            <span className={styles.preWrap}>{agendaContent}</span>
           </div>
           <div className={styles.descriptionItem}>
             <h3>모집 완료 기간</h3>
diff --git a/components/agenda/utils/CustomImage.tsx b/components/agenda/utils/CustomImage.tsx
index cc43ff197..87ae26f23 100644
--- a/components/agenda/utils/CustomImage.tsx
+++ b/components/agenda/utils/CustomImage.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import classNames from 'classnames';
-import { useState } from 'react';
+import { MouseEvent, useState } from 'react';
 import { CustomImageProps } from 'types/agenda/utils/customImageTypes';
 import styles from 'styles/agenda/utils/CustomImage.module.scss';
 
@@ -10,8 +10,12 @@ const CustomImage = ({
   alt,
   addClass,
   isProfileImage,
+  name,
+  description,
 }: CustomImageProps) => {
   const [imgSrc, setImgSrc] = useState(src);
+  const [isHovered, setIsHovered] = useState(false);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
 
   const handleError = () => {
     isProfileImage
@@ -19,17 +23,41 @@ const CustomImage = ({
       : setImgSrc('/image/agenda/42-icon.svg');
   };
 
+  const handleMouseEnter = (e: MouseEvent<HTMLDivElement>) => {
+    setIsHovered(true);
+    setMousePosition({
+      x: e.clientX,
+      y: e.clientY,
+    });
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
   return src ? (
-    <Image
-      src={imgSrc}
-      key={imgSrc}
-      alt={alt}
-      width={30}
-      height={30}
-      className={classNames(styles.customImage, addClass)}
-      priority={true}
-      onError={handleError}
-    />
+    <div
+      className={styles.imageContainer}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <Image
+        src={imgSrc}
+        key={imgSrc}
+        alt={alt}
+        width={30}
+        height={30}
+        className={classNames(styles.customImage, addClass)}
+        priority={true}
+        onError={handleError}
+      />
+      {isHovered && (
+        <div className={styles.hoverContainer}>
+          <div className={styles.hoverName}>{name}</div>
+          <div className={styles.hoverDescription}>{description}</div>
+        </div>
+      )}
+    </div>
   ) : null;
 };
 
diff --git a/components/agenda/utils/PageController.tsx b/components/agenda/utils/PageController.tsx
index 1f5f485f2..9b9f62365 100644
--- a/components/agenda/utils/PageController.tsx
+++ b/components/agenda/utils/PageController.tsx
@@ -99,7 +99,7 @@ const PageController = ({
               ? handleNavigation(
                   '/agenda/detail?agenda_key=' + data[current].agendaKey
                 )
-              : null;
+              : handleNavigation('/agenda');
           }}
           className={styles.toClick}
         />
diff --git a/pages/agenda/index.tsx b/pages/agenda/index.tsx
index 393b0e712..113e1ebe8 100644
--- a/pages/agenda/index.tsx
+++ b/pages/agenda/index.tsx
@@ -29,7 +29,7 @@ const Agenda: NextPage = () => {
       <AgendaTitle />
       <div className={styles.agendaContainer}>
         <div className={listStyles.agendaListTextWrapper}>
-          <h2>AGENDA LIST</h2>
+          <h2 className={listStyles.web}>AGENDA LIST</h2>
           <div>
             <button
               className={`${listStyles.agendaListStatus}
@@ -39,7 +39,7 @@ const Agenda: NextPage = () => {
             >
               모집중
             </button>
-            {' | '}
+            {'|'}
             <button
               className={`${listStyles.agendaListStatus}
             ${showCurrent === 'current' ? listStyles.selectedStatus : ''}`}
@@ -48,7 +48,7 @@ const Agenda: NextPage = () => {
             >
               진행중
             </button>
-            {' | '}
+            {'|'}
             <button
               className={`${listStyles.agendaListStatus}
               ${showCurrent === 'history' ? listStyles.selectedStatus : ''}`}
diff --git a/pages/agenda/profile/user.tsx b/pages/agenda/profile/user.tsx
index c2fe22cdd..f41222774 100644
--- a/pages/agenda/profile/user.tsx
+++ b/pages/agenda/profile/user.tsx
@@ -25,7 +25,7 @@ const AgendaProfile = () => {
   const isMyProfile = useRef(false); // 내 프로필 페이지인지 아닌지 확인
   const [isIntraId, setIsIntraId] = useState<boolean>(false); // 인트라 아이디가 42에 있는지 확인
   const [isAgendaId, setIsAgendaId] = useState<boolean>(false); // 인트라 아이디가 agenda에 있는지 확인
-  const [activeTab, setActiveTab] = useState('current'); // 현재 활성화된 탭 상태 관리
+  const [activeTab, setActiveTab] = useState(''); // 현재 활성화된 탭 상태 관리
 
   /** API GET */
   //  GET: intraData (42 인트라 데이터 가져오기)
@@ -39,7 +39,11 @@ const AgendaProfile = () => {
       url: `/profile/${queryIntraId}`,
       isReady: isIntraId,
     });
-
+  // GET: current
+  const currentListData = useFetchGet<MyTeamDataProps[]>({
+    url: '/profile/current/list',
+    isReady: isAgendaId,
+  }).data;
   // GET: host current
   const {
     content: hostCurrentListData,
@@ -48,11 +52,6 @@ const AgendaProfile = () => {
     url: `/host/current/list/${queryIntraId}`,
     isReady: isAgendaId,
   });
-  // GET: current team
-  const currentListData = useFetchGet<MyTeamDataProps[]>({
-    url: '/profile/current/list',
-    isReady: isAgendaId,
-  }).data;
   // GET: host history
   const {
     content: hostHistoryListData,
@@ -70,17 +69,19 @@ const AgendaProfile = () => {
     isReady: isAgendaId,
   });
 
-  /** useEffect */
+  /** useEffect - 순차적으로 데이터 호출 */
   useEffect(() => {
     const updateProfileStatus = () => {
       // 1. queryIntraId와 myIntraId가 있을 때 프로필 URL 설정
       isMyProfile.current = queryIntraId === myIntraId;
+      isMyProfile.current
+        ? setActiveTab('current')
+        : setActiveTab('hostCurrent');
       // 2. intraData가 있으면 인트라 아이디가 42에 있다는 뜻이므로 isIntraId = true
       setIsIntraId(!!intraData);
       // 3. agendaProfileData가 있으면 아젠다에 등록된 사용자이므로 isAgendaId = true
       setIsAgendaId(!!agendaProfileData);
     };
-
     setIsIntraId(false);
     setIsAgendaId(false);
     updateProfileStatus();
@@ -123,17 +124,19 @@ const AgendaProfile = () => {
         <div className={styles.listContainer}>
           <div className={styles.listTitle}>AGENDA LIST</div>
           <div className={styles.listButtonsWrapper}>
-            <Button
-              sx={{
-                color: activeTab === 'current' ? '#af71ff' : 'black',
-                '@media (min-width: 961px)': {
-                  fontSize: '1rem', // 폰트 크기 변경
-                },
-              }}
-              onClick={() => setActiveTab('current')}
-            >
-              참여중
-            </Button>
+            {isMyProfile.current ? (
+              <Button
+                sx={{
+                  color: activeTab === 'current' ? '#af71ff' : 'black',
+                  '@media (min-width: 961px)': {
+                    fontSize: '1rem', // 폰트 크기 변경
+                  },
+                }}
+                onClick={() => setActiveTab('current')}
+              >
+                참여중
+              </Button>
+            ) : null}
             <Button
               sx={{
                 color: activeTab === 'hostCurrent' ? '#af71ff' : 'black',
@@ -170,49 +173,37 @@ const AgendaProfile = () => {
           </div>
           <hr className={styles.divider} />
           <div className={styles.listItemContainer}>
-            {/* Host Current List */}
-            {activeTab === 'hostCurrent' &&
-            hostCurrentListData &&
-            hostCurrentListData.length > 0 ? (
-              <>
-                <CurrentList currentListData={hostCurrentListData} />
-                <PageNation {...PagaNationHostCurrent} />
-              </>
-            ) : activeTab === 'hostCurrent' ? (
-              ''
-            ) : null}
-
-            {/* Current List */}
+            {/* Current List - 참여중 */}
             {activeTab === 'current' &&
             isMyProfile.current &&
             currentListData ? (
               <>
                 <CurrentList currentListData={currentListData} />
               </>
-            ) : activeTab === 'current' ? (
-              ''
             ) : null}
 
-            {/* History Host List */}
-            {activeTab === 'hostHistory' &&
-            hostHistoryListData &&
-            hostHistoryListData.length > 0 ? (
+            {/* Host Current List - 개최중 */}
+            {activeTab === 'hostCurrent' && hostCurrentListData ? (
               <>
-                <HistoryList historyListData={hostHistoryListData} />{' '}
-                <PageNation {...PagaNationHostHistory} />
+                <CurrentList currentListData={hostCurrentListData} />
+                <PageNation {...PagaNationHostCurrent} />
               </>
-            ) : activeTab === 'hostHistory' ? (
-              ''
             ) : null}
 
-            {/* History List */}
+            {/* History List - 참여 기록 */}
             {activeTab === 'history' && historyListData ? (
               <>
                 <HistoryList historyListData={historyListData} />{' '}
                 <PageNation {...PagaNationHistory} />
               </>
-            ) : activeTab === 'history' ? (
-              ''
+            ) : null}
+
+            {/* History Host List - 개최 기록 */}
+            {activeTab === 'hostHistory' && hostHistoryListData ? (
+              <>
+                <HistoryList historyListData={hostHistoryListData} />{' '}
+                <PageNation {...PagaNationHostHistory} />
+              </>
             ) : null}
           </div>
         </div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 5932e6eb2..f2638220b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -24,7 +24,12 @@ const Index: NextPage = () => {
       </div>
       <div className={styles.flex}>
         <div className={styles.ticket}>
-          <h2 className={styles.title}>Ticket</h2>
+          <h2
+            className={styles.title}
+            onClick={() => handleNavigation('/agenda/ticket')}
+          >
+            Ticket
+          </h2>
           <button
             className={styles.container}
             onClick={() => handleNavigation('/agenda/ticket')}
diff --git a/styles/agenda/Home/AgendaInfo.module.scss b/styles/agenda/Home/AgendaInfo.module.scss
index 0d8cfaaf0..5b50dea4a 100644
--- a/styles/agenda/Home/AgendaInfo.module.scss
+++ b/styles/agenda/Home/AgendaInfo.module.scss
@@ -1,5 +1,31 @@
 @import 'styles/agenda/common.scss';
 
+.emptyContainer {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+}
+
+.emptyContent {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.arrowIcon {
+  position: absolute;
+  right: -2rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
 .agendaInfoContainer {
   display: flex;
   width: 100%;
diff --git a/styles/agenda/Home/AgendaList.module.scss b/styles/agenda/Home/AgendaList.module.scss
index 456f463b4..3668f7809 100644
--- a/styles/agenda/Home/AgendaList.module.scss
+++ b/styles/agenda/Home/AgendaList.module.scss
@@ -27,6 +27,9 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
+  @media screen and (max-width: 960px) {
+    justify-content: flex-end;
+  }
   align-items: center;
   > h2 {
     margin: 1rem;
@@ -42,6 +45,7 @@
 
 .agendaListStatus {
   @include text('statusButton');
+  cursor: pointer;
   background: none;
   border: none;
   box-shadow: none;
@@ -133,3 +137,7 @@
     display: none !important ;
   }
 }
+
+.web {
+  @include gridHidden(web);
+}
diff --git a/styles/agenda/Home/MyAgendaBtn.module.scss b/styles/agenda/Home/MyAgendaBtn.module.scss
index 51b8d7f4a..041ed26fc 100644
--- a/styles/agenda/Home/MyAgendaBtn.module.scss
+++ b/styles/agenda/Home/MyAgendaBtn.module.scss
@@ -72,9 +72,7 @@
 }
 
 .myAgendaListContainer {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(16rem, 3fr));
-
+  display: flex;
   width: 100%;
   height: 23rem;
   flex-direction: column;
@@ -83,6 +81,7 @@
   gap: 0.8rem;
   @media screen and (min-width: 961px) {
     display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 3fr));
     width: auto;
     height: auto;
     flex-direction: row;
diff --git a/styles/agenda/Layout/Header.module.scss b/styles/agenda/Layout/Header.module.scss
index f7a29a649..8676290cb 100644
--- a/styles/agenda/Layout/Header.module.scss
+++ b/styles/agenda/Layout/Header.module.scss
@@ -38,11 +38,12 @@
   gap: 2rem;
   justify-content: flex-start;
   align-items: center;
-  .menuIcon {
-    width: 1.5rem;
-    height: 1.5rem;
-    cursor: pointer;
-  }
+}
+
+.menuIcon {
+  width: 1.5rem;
+  height: 1.5rem;
+  cursor: pointer;
 }
 
 .logoWrap {
diff --git a/styles/agenda/Profile/AgendaProfile.module.scss b/styles/agenda/Profile/AgendaProfile.module.scss
index 07a7b6b1b..d41552f5f 100644
--- a/styles/agenda/Profile/AgendaProfile.module.scss
+++ b/styles/agenda/Profile/AgendaProfile.module.scss
@@ -53,8 +53,8 @@
   }
   @media screen and (min-width: 961px) {
     width: 100%;
-    min-height: 43rem;
-    max-height: 43rem;
+    min-height: 47rem;
+    max-height: 47rem;
     margin-top: 1rem;
   }
 }
diff --git a/styles/agenda/Profile/CurrentList.module.scss b/styles/agenda/Profile/CurrentList.module.scss
index 6bdb6953d..68f812a09 100644
--- a/styles/agenda/Profile/CurrentList.module.scss
+++ b/styles/agenda/Profile/CurrentList.module.scss
@@ -9,11 +9,12 @@
 
 .currentTeamEmpty {
   @include text(description-s);
+  margin-left: 0.5rem;
 }
 
 .currentItemWrapper {
   width: 100%;
-  @media screen and (min-width: 961px) {
+  @media screen and (min-width: 1441px) {
     width: 48%;
   }
 }
diff --git a/styles/agenda/Profile/HistoryList.module.scss b/styles/agenda/Profile/HistoryList.module.scss
index 0e65a2353..39c574de6 100644
--- a/styles/agenda/Profile/HistoryList.module.scss
+++ b/styles/agenda/Profile/HistoryList.module.scss
@@ -9,6 +9,7 @@
 
 .historyEmpty {
   @include text(description-s);
+  margin-left: 0.5rem;
 }
 
 // ITEM
@@ -26,7 +27,7 @@
   justify-content: flex-start;
   align-items: flex-start;
   gap: 0.5rem;
-  @media screen and (min-width: 1401px) {
+  @media screen and (min-width: 1441px) {
     width: 48%;
   }
 }
diff --git a/styles/agenda/Profile/ProfileCard.module.scss b/styles/agenda/Profile/ProfileCard.module.scss
index de91d199d..98583b986 100644
--- a/styles/agenda/Profile/ProfileCard.module.scss
+++ b/styles/agenda/Profile/ProfileCard.module.scss
@@ -2,7 +2,7 @@
 
 .profileImageCard {
   width: 22rem;
-  height: 31rem;
+  height: 35rem;
   perspective: 1000px;
   margin-bottom: 1rem;
 }
@@ -217,11 +217,15 @@
 
   .description {
     width: 100%;
-    height: 2.5rem;
+    min-height: 3.5rem;
+    max-height: 3.5rem;
+    overflow-y: scroll;
     @include text(description-s);
+    white-space: pre-wrap;
   }
 
   .acheivementContainer {
+    position: relative; // acheivement hover
     width: 100%;
     height: auto;
 
@@ -233,7 +237,7 @@
       display: flex;
       flex-wrap: wrap;
       width: 100%;
-      height: 5rem;
+      height: 8rem;
       margin-top: 0.5rem;
       gap: 0.3rem;
       overflow-y: scroll;
diff --git a/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss b/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss
index 5f3fd4da4..6ac429e80 100644
--- a/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss
+++ b/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss
@@ -76,3 +76,7 @@
     flex-direction: column;
   }
 }
+
+.preWrap {
+  white-space: pre-wrap;
+}
diff --git a/styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss b/styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss
index 2ead58ac7..6ae9f9cd0 100644
--- a/styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss
+++ b/styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss
@@ -45,6 +45,7 @@
 
 .announcementContent {
   @include text('default');
+  white-space: pre-wrap;
 }
 
 .mobile {
diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss
index 7485a5931..b2e8df5e8 100644
--- a/styles/agenda/common.scss
+++ b/styles/agenda/common.scss
@@ -39,6 +39,9 @@ $bg-color-deadline-cancel: rgba(18, 18, 18, 0.8);
 $agenda-list-bg: linear-gradient(180deg, #fff 65px, rgba(0, 0, 0, 0) 100%),
   var(--color-bg) lightgray 50% / cover no-repeat;
 
+$hover-bg-color: #e0c7fe;
+$hover-bg-title: #cda7fc;
+
 // font-family
 $font-text-bold: '11StreetGothicBold';
 $font-text-regular: '11StreetGothicRegular';
diff --git a/styles/agenda/utils/CustomImage.module.scss b/styles/agenda/utils/CustomImage.module.scss
index edeb4e8fd..9e199eac3 100644
--- a/styles/agenda/utils/CustomImage.module.scss
+++ b/styles/agenda/utils/CustomImage.module.scss
@@ -1,6 +1,36 @@
 @import 'styles/agenda/common.scss';
 
+.imageContainer {
+  width: 100%;
+  height: 100%;
+}
+
 .customImage {
   width: 100%;
   height: 100%;
 }
+
+.hoverContainer {
+  position: absolute;
+  bottom: 90%;
+  left: 55%;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  background-color: $hover-bg-color;
+  border-radius: $radius-extra-small;
+  gap: 0.1rem;
+}
+
+.hoverName {
+  @include text('description-regular');
+  padding: 0.3rem;
+  font-weight: 900;
+  background-color: $hover-bg-title;
+  border-radius: $radius-extra-small $radius-extra-small 0 0;
+}
+
+.hoverDescription {
+  @include text('description');
+  padding: 0.3rem;
+}
diff --git a/styles/agenda/utils/PageController.module.scss b/styles/agenda/utils/PageController.module.scss
index fe83278c2..ac367e36b 100644
--- a/styles/agenda/utils/PageController.module.scss
+++ b/styles/agenda/utils/PageController.module.scss
@@ -8,6 +8,8 @@
   @media screen and (max-width: 960px) {
     height: 90%;
   }
+  pointer-events: auto;
+  cursor: pointer;
 }
 
 .agendaInfoContainer {
diff --git a/styles/index.module.scss b/styles/index.module.scss
index bfdb4b916..4dc5ee2ba 100644
--- a/styles/index.module.scss
+++ b/styles/index.module.scss
@@ -1,4 +1,5 @@
 @import 'styles/agenda/common.scss';
+
 .layout {
   @include layout;
   max-width: 100%;
@@ -7,11 +8,16 @@
     'top top' auto
     'content match' 17rem / 1fr 1fr;
   gap: 1rem;
+  pointer-events: none;
 }
+
 .title {
   @include text(main-menu);
+  display: inline-block;
   margin: 0 0 0 2rem;
   font-size: $font-size-l;
+  pointer-events: auto;
+  cursor: pointer;
 }
 
 .container {
@@ -21,6 +27,8 @@
     width: auto;
     height: calc(100% - 4.7rem);
   }
+  pointer-events: auto;
+  cursor: pointer;
 }
 
 .flex {
diff --git a/types/agenda/utils/customImageTypes.ts b/types/agenda/utils/customImageTypes.ts
index e97236b4a..ffd69b329 100644
--- a/types/agenda/utils/customImageTypes.ts
+++ b/types/agenda/utils/customImageTypes.ts
@@ -3,4 +3,6 @@ export interface CustomImageProps {
   alt: string;
   addClass?: string;
   isProfileImage?: boolean;
+  name?: string;
+  description?: string;
 }