diff --git a/src/api/@types/NoticeBoard.ts b/src/api/@types/NoticeBoard.ts
index b46f258..b2ff45c 100644
--- a/src/api/@types/NoticeBoard.ts
+++ b/src/api/@types/NoticeBoard.ts
@@ -20,10 +20,11 @@ export interface GetNoticeListPosts {
   id: number;
   title: string;
   content: string;
-  status: 'PUBLISHED';
+  status: 'PUBLISHED' | 'TEMP';
   createdDate: string;
   modifiedDate: string;
   views: number;
+  thumbnail: string;
 }
 
 // 개별 게시글 조회
@@ -44,6 +45,7 @@ export interface GetNoticePostsData {
   createdDate: string;
   modifiedDate: string;
   views: number;
+  thumbnail: string;
 }
 
 //post
@@ -51,6 +53,7 @@ export interface PostNoticeRequest {
   title: string;
   content: string;
   status: 'PUBLISHED' | 'TEMP';
+  thumbnail: string;
 }
 
 export interface PostNoticeResponse {
@@ -66,11 +69,14 @@ export interface PostNoticeData {
   createdDate: string;
   modifiedDate: string;
   views: number;
+  thumbnail: string;
 }
 
 export interface PostNoticeTempPostsRequest {
   title: string;
   content: string;
+  status: 'PUBLISHED' | 'TEMP';
+  thumbnail: string;
 }
 
 export interface PostNoticeTempPostsResponse {
@@ -86,6 +92,7 @@ export interface PostNoticeTempPostsData {
   createdDate: string;
   modifiedDate: string;
   views: number;
+  thumbnail: string;
 }
 
 export interface PostNoticePresignedURLRequest {
@@ -110,6 +117,7 @@ export interface PutNoticeRequest {
   title: string;
   content: string;
   status: string;
+  thumbnail: string;
 }
 
 export interface PutNoticeResponse {
@@ -125,6 +133,7 @@ export interface PutNoticeData {
   createdDate: string;
   modifiedDate: string;
   views: number;
+  thumbnail: string;
 }
 
 // delete
diff --git a/src/components/createRetro/modal/TemplateSelect.tsx b/src/components/createRetro/modal/TemplateSelect.tsx
index b592a86..3df3759 100644
--- a/src/components/createRetro/modal/TemplateSelect.tsx
+++ b/src/components/createRetro/modal/TemplateSelect.tsx
@@ -28,6 +28,7 @@ const TemplateSelect: React.FC<TemplateSelectProps> = ({ onChange, defaultTempla
   return (
     <>
       <div>Template</div>
+      <p style={{ fontSize: '10px', fontWeight: '400', color: '#898ea9' }}>템플릿 설정 안할 시, KPT(default)</p>
       <Select
         placeholder="Select option"
         onChange={e => onChange(Number(e.target.value))}
diff --git a/src/components/notice/NoticeBoard.tsx b/src/components/notice/NoticeBoard.tsx
index 644b7f2..b34b84b 100644
--- a/src/components/notice/NoticeBoard.tsx
+++ b/src/components/notice/NoticeBoard.tsx
@@ -1,6 +1,4 @@
 import { useEffect, useState } from 'react';
-// import getUser from '@/api/imageApi/getUser';
-// import { GetUsersResponse } from '@/api/@types/User';
 import { useNavigate } from 'react-router-dom';
 import { NoticeBoardContents } from './NoticeBoardContents';
 import { NoticePagination } from './NoticePagination';
@@ -11,12 +9,51 @@ import { UserServices } from '@/api/services/User';
 import { useCustomToast } from '@/hooks/useCustomToast';
 import * as S from '@/styles/notice/noticeBoard.style';
 
-export const NoticeBoard = () => {
+// 발행한 게시물 조회
+export const usePublishedNotice = () => {
+  const [PublishedNoticeList, setPublishedNoticeList] = useState<GetNoticeListPosts[]>([]);
   const toast = useCustomToast();
-  const navigate = useNavigate();
-  const [user, setUser] = useState<UserData>();
-  const [NoticeList, setNoticeList] = useState<GetNoticeListPosts[]>([]);
 
+  // 게시글 목록 조회 api
+  const fetchNotice = async () => {
+    try {
+      const data = await NoticeServices.listGet({ page: 1, size: 10 });
+      setPublishedNoticeList(data.data.posts.filter(post => post.status === 'PUBLISHED'));
+    } catch (error) {
+      toast.error(error);
+    }
+  };
+
+  useEffect(() => {
+    fetchNotice();
+  }, []);
+
+  return PublishedNoticeList;
+};
+
+// 임시저장한 게시물 조회
+export const useTempNotice = () => {
+  const [TempNoticeList, setTempNoticeList] = useState<GetNoticeListPosts[]>([]);
+  const toast = useCustomToast();
+
+  // 게시글 목록 조회 api
+  const fetchNotice = async () => {
+    try {
+      const data = await NoticeServices.listGet({ page: 1, size: 10 });
+      setTempNoticeList(data.data.posts.filter(post => post.status === 'TEMP'));
+    } catch (error) {
+      toast.error(error);
+    }
+  };
+
+  useEffect(() => {
+    fetchNotice();
+  }, []);
+
+  return TempNoticeList;
+};
+
+export const NoticeBoard = () => {
   // 관리자 권한 부여 api
   // import { UserServices } from '@/api/services/User';
   // const handleNoticeAdmin = async () => {
@@ -31,17 +68,13 @@ export const NoticeBoard = () => {
   //   }
   // };
 
+  const toast = useCustomToast();
+  const navigate = useNavigate();
+  const [user, setUser] = useState<UserData>();
+  const publishedList = usePublishedNotice();
+  // const tempList = useTempNotice();
+
   // 유저 정보 조회
-  // const fetchUserData = async () => {
-  //   try {
-  //     const response = await getUser();
-  //     console.log('유저 정보', response);
-  //     setUserData(response);
-  //   } catch (error) {
-  //     console.error('에러', error);
-  //     toast.error(error);
-  //   }
-  // };
   const fetchUser = async () => {
     try {
       const data = await UserServices.get();
@@ -52,21 +85,8 @@ export const NoticeBoard = () => {
     }
   };
 
-  // 게시글 목록 조회 api
-  // const [page, setPage] = useState<number>(1);
-  // const [size, setSize] = useState<number>(10);
-  const fetchNotice = async () => {
-    try {
-      const data = await NoticeServices.listGet({ page: 1, size: 10 });
-      setNoticeList(data.data.posts);
-    } catch (error) {
-      toast.error(error);
-    }
-  };
-
   useEffect(() => {
     fetchUser();
-    fetchNotice();
   }, []);
   if (!user) return;
 
@@ -95,18 +115,20 @@ export const NoticeBoard = () => {
 
           <S.NoticeBoardContentsBox>
             <div style={{ height: 'auto', display: 'flex', flexDirection: 'column-reverse' }}>
-              {/* 게시판 내용: NoticeList ExData.data.posts*/}
-              {NoticeList.map((posts, index) => (
-                <NoticeBoardContents posts={posts} key={posts.id} index={index + 1}></NoticeBoardContents>
+              {/* 게시판 내용*/}
+              {publishedList.map((posts, index) => (
+                <NoticeBoardContents posts={posts} key={posts.id} index={index}></NoticeBoardContents>
               ))}
             </div>
           </S.NoticeBoardContentsBox>
         </S.NoticeBoardBox>
 
         {/* 글쓰기 버튼 */}
-        <div style={{ textAlign: 'right' }}>
-          <S.NoticeWriteButton onClick={handleNoticeWriteButton}>글쓰기</S.NoticeWriteButton>
-        </div>
+        {user.administrator && (
+          <div style={{ textAlign: 'right' }}>
+            <S.NoticeWriteButton onClick={handleNoticeWriteButton}>글쓰기</S.NoticeWriteButton>
+          </div>
+        )}
 
         {/* 게시판 목록 리모컨 */}
         <NoticePagination></NoticePagination>
diff --git a/src/components/notice/NoticeBoardContents.tsx b/src/components/notice/NoticeBoardContents.tsx
index e376f80..ae154d8 100644
--- a/src/components/notice/NoticeBoardContents.tsx
+++ b/src/components/notice/NoticeBoardContents.tsx
@@ -24,17 +24,17 @@ export const NoticeBoardContents = ({ posts, index }: NoticeBoardContentsProps)
 
   // 개별 게시글 페이지로 이동
   const handleMoveNoticeShow = () => {
-    navigate(`/noticeShow?id=${posts.id}`);
+    navigate(`/noticeShow?id=${posts.id}&index=${index}`);
   };
   return (
     <>
       <S.NoticeBoardContentsStyle>
         {/* 번호 */}
-        <p className="NoticeBoardContentsText">{index}</p>
+        <p className="NoticeBoardContentsText">{index + 1}</p>
 
         {/* 제목 */}
         <div style={{ textAlign: 'left' }} onClick={handleMoveNoticeShow}>
-          <p className="NoticeBoardContentsText" style={{ textAlign: 'left', cursor: 'pointer' }}>
+          <p className="NoticeBoardContentsText" style={{ textAlign: 'left', cursor: 'pointer', margin: '10px 0px' }}>
             {posts.title}
           </p>
         </div>
diff --git a/src/components/notice/NoticeMenuBar.tsx b/src/components/notice/NoticeMenuBar.tsx
index 6c07443..7a2347b 100644
--- a/src/components/notice/NoticeMenuBar.tsx
+++ b/src/components/notice/NoticeMenuBar.tsx
@@ -21,6 +21,21 @@ export const NoticeMenuBar = ({ title, content }: NoticeMenuBarProps) => {
   const query = search.split(/[=,&]/);
   const NoticeShowId = Number(query[1]);
 
+  // 임시 게시글 작성 api 연결
+  const handleNoticeWriteTemp = async () => {
+    try {
+      await NoticeServices.tempSave({
+        title: title,
+        content: content,
+        status: 'TEMP',
+        thumbnail: '',
+      });
+      toast.success('게시글이 임시저장 되었습니다.');
+    } catch (e) {
+      toast.error(e);
+    }
+  };
+
   // 게시글 작성 api 연결
   const handleNoticeWrite = async () => {
     try {
@@ -28,6 +43,7 @@ export const NoticeMenuBar = ({ title, content }: NoticeMenuBarProps) => {
         title: title,
         content: content,
         status: 'PUBLISHED',
+        thumbnail: '',
       });
       toast.success('공지사항이 추가되었습니다.');
       navigate('/');
@@ -44,6 +60,7 @@ export const NoticeMenuBar = ({ title, content }: NoticeMenuBarProps) => {
         title: title,
         content: content,
         status: 'PUBLISHED',
+        thumbnail: '',
       });
       toast.success('공지사항이 수정되었습니다.');
       navigate(`/noticeShow?id=${NoticeShowId}`);
@@ -72,7 +89,9 @@ export const NoticeMenuBar = ({ title, content }: NoticeMenuBarProps) => {
           {isNaN(NoticeShowId) ? (
             <>
               {/* 게시물 임시저장 */}
-              <S.NoticeTempSaveButton>{`저장 | ${TemporarySaveCount}`}</S.NoticeTempSaveButton>
+              <S.NoticeTempSaveButton
+                onClick={handleNoticeWriteTemp}
+              >{`저장 | ${TemporarySaveCount}`}</S.NoticeTempSaveButton>
 
               {/* 게시물 저장 */}
               <S.NoticeSaveButton onClick={handleNoticeWrite}>저장</S.NoticeSaveButton>
diff --git a/src/components/notice/NoticePagination.tsx b/src/components/notice/NoticePagination.tsx
index 388cd0f..bd1f42b 100644
--- a/src/components/notice/NoticePagination.tsx
+++ b/src/components/notice/NoticePagination.tsx
@@ -3,7 +3,7 @@ import { IoIosArrowForward } from 'react-icons/io';
 import * as S from '@/styles/notice/noticeBoard.style';
 
 export const NoticePagination = () => {
-  const NoticePageNumber = [1, 2, 3];
+  const NoticePageNumber = [1];
   return (
     <>
       <S.NoticePaginationContainer>
diff --git a/src/components/notice/NoticeShowFooter.tsx b/src/components/notice/NoticeShowFooter.tsx
index 334cdb5..c770b0e 100644
--- a/src/components/notice/NoticeShowFooter.tsx
+++ b/src/components/notice/NoticeShowFooter.tsx
@@ -1,44 +1,55 @@
 import { IoIosArrowDown } from 'react-icons/io';
 import { IoIosArrowUp } from 'react-icons/io';
 import { useNavigate } from 'react-router-dom';
+// import { GetNoticePostsData } from '@/api/@types/NoticeBoard';
+import { usePublishedNotice } from './NoticeBoard';
+import { GetNoticeListPosts } from '@/api/@types/NoticeBoard';
 import * as S from '@/styles/notice/noticeShow.style';
 
 interface NoticeShowFooterProps {
   id: number;
 }
 
-export const NoticeShowFooter = ({ id }: NoticeShowFooterProps) => {
-  return (
-    <>
-      <S.NoticeShowFooterLine></S.NoticeShowFooterLine>
-      <S.NoticeShowFooterStyle>
-        {/* 이전 글 */}
-        <NoticeShowMove direction="up" id={id}></NoticeShowMove>
-        {/* 다음 글 */}
-        <NoticeShowMove direction="down" id={id}></NoticeShowMove>
-      </S.NoticeShowFooterStyle>
-    </>
-  );
-};
-
 interface NoticeShowMoveProps {
   direction: 'up' | 'down';
   id: number;
+  notice: GetNoticeListPosts[];
 }
 
-export const NoticeShowMove = ({ direction, id }: NoticeShowMoveProps) => {
+export const NoticeShowMove = ({ direction, id, notice }: NoticeShowMoveProps) => {
   const navigate = useNavigate();
+  const index = notice.findIndex(post => post.id === id);
 
-  const { icon, title } =
+  const { move, icon, title } =
     direction === 'up'
-      ? { icon: <IoIosArrowUp size={29} color="#8A95B7" />, title: '이전 글' }
-      : { icon: <IoIosArrowDown size={29} color="#8A95B7" />, title: '다음 글' };
+      ? {
+          move: index - 1,
+          icon: <IoIosArrowUp size={29} color="#8A95B7" />,
+          title: index > 0 ? notice[index - 1]?.title ?? 'No more posts' : 'No more posts',
+        }
+      : {
+          move: index + 1,
+          icon: <IoIosArrowDown size={29} color="#8A95B7" />,
+          title: index < notice.length - 1 ? notice[index + 1]?.title ?? 'No more posts' : 'No more posts',
+        };
 
-  // 게시물로 이동하기
-  const noticeMove = direction === 'up' ? id - 1 : id + 1;
   const handleNoticeShowMove = () => {
-    navigate(`/noticeShow?id=${noticeMove}`);
+    if (move >= 0 && move < notice.length) {
+      navigate(`/noticeShow?id=${notice[move].id}&index=${move}`);
+    }
   };
+
+  // 게시물로 이동하기
+  // const noticeMove = direction === 'up' ? 1 : 1;
+  // const handleNoticeShowMove = () => {
+  //   navigate(`/noticeShow?id=${notice[move].id}&index=${move}`);
+  //   console.log(id);
+  //   console.log(index);
+  //   console.log(notice);
+  //   console.log(move);
+  //   console.log(notice[move].id);
+  //   console.log(notice[move].title);
+  // };
   return (
     <>
       <S.NoticeShowMoveStyle>
@@ -52,3 +63,19 @@ export const NoticeShowMove = ({ direction, id }: NoticeShowMoveProps) => {
     </>
   );
 };
+
+export const NoticeShowFooter = ({ id }: NoticeShowFooterProps) => {
+  const publishedList = usePublishedNotice();
+
+  return (
+    <>
+      <S.NoticeShowFooterLine></S.NoticeShowFooterLine>
+      <S.NoticeShowFooterStyle>
+        {/* 이전 글 */}
+        <NoticeShowMove direction="up" id={id} notice={publishedList}></NoticeShowMove>
+        {/* 다음 글 */}
+        <NoticeShowMove direction="down" id={id} notice={publishedList}></NoticeShowMove>
+      </S.NoticeShowFooterStyle>
+    </>
+  );
+};
diff --git a/src/components/notice/NoticeShowHeader.tsx b/src/components/notice/NoticeShowHeader.tsx
index cef816e..de01041 100644
--- a/src/components/notice/NoticeShowHeader.tsx
+++ b/src/components/notice/NoticeShowHeader.tsx
@@ -1,5 +1,8 @@
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { UserData } from '@/api/@types/Users';
 import { NoticeServices } from '@/api/services/NoticeBoard';
+import { UserServices } from '@/api/services/User';
 import { useCustomToast } from '@/hooks/useCustomToast';
 import * as S from '@/styles/notice/noticeShow.style';
 
@@ -15,6 +18,19 @@ export const NoticeShowHeader = ({ id, title, date, views }: NoticeShowHeaderPro
   const toast = useCustomToast();
   const NoticeWriter = '관리자';
 
+  const [user, setUser] = useState<UserData>();
+
+  // 유저 정보 조회
+  const fetchUser = async () => {
+    try {
+      const data = await UserServices.get();
+      setUser(data.data);
+      console.log(data.data);
+    } catch (error) {
+      toast.error(error);
+    }
+  };
+
   // 게시글 시간 포멧 만들기
   const convertToLocalTime = (dateString: string | number | Date) => {
     const date = new Date(dateString);
@@ -44,27 +60,34 @@ export const NoticeShowHeader = ({ id, title, date, views }: NoticeShowHeaderPro
   const handleReviseNotice = () => {
     navigate(`/noticeWrite?id=${id}`);
   };
+
+  useEffect(() => {
+    fetchUser();
+  }, []);
+  if (!user) return;
   return (
     <>
       <S.NoticeShowHeaderStyle>
         <p style={{ fontSize: '40px', fontWeight: '800', color: '#25213B', margin: '20px' }}>공지사항</p>
-
         {/* 게시물 제목 */}
         <S.NoticeShowTitle>{title}</S.NoticeShowTitle>
-
         {/* 게시물 정보 */}
         <S.NoticeShowInformation>
           <span>{`${NoticeWriter} | ${convertToLocalTime(date)} | 조회수  ${views}`}</span>
         </S.NoticeShowInformation>
 
         {/* 게시물 버튼 */}
-        <S.NoticeShowButtonContainer>
-          {/* 게시물 수정 버튼 */}
-          <S.NoticeReviseButton onClick={handleReviseNotice}>수정</S.NoticeReviseButton>
+        {user.administrator && (
+          <>
+            <S.NoticeShowButtonContainer>
+              {/* 게시물 수정 버튼 */}
+              <S.NoticeReviseButton onClick={handleReviseNotice}>수정</S.NoticeReviseButton>
 
-          {/* 게시물 삭제 버튼 */}
-          <S.NoticeDeleteButton onClick={handleDeleteNotice}>삭제</S.NoticeDeleteButton>
-        </S.NoticeShowButtonContainer>
+              {/* 게시물 삭제 버튼 */}
+              <S.NoticeDeleteButton onClick={handleDeleteNotice}>삭제</S.NoticeDeleteButton>
+            </S.NoticeShowButtonContainer>
+          </>
+        )}
       </S.NoticeShowHeaderStyle>
       <S.NoticeShowHeaderLine></S.NoticeShowHeaderLine>
     </>
diff --git a/src/components/writeRetro/explainModal/explainRetro.tsx b/src/components/writeRetro/explainModal/explainRetro.tsx
index 1afa562..c1208c0 100644
--- a/src/components/writeRetro/explainModal/explainRetro.tsx
+++ b/src/components/writeRetro/explainModal/explainRetro.tsx
@@ -164,18 +164,172 @@ export const ExplainKPT = () => {
   );
 };
 
+// export const ExplainKudos = () => {
+//   return (
+//     <>
+//       <S.ExplainStyle>
+//         <div style={{ display: 'flex' }}>
+//           <div style={{ display: 'flex', marginTop: '15px', position: 'absolute', left: '120px' }}>
+//             <IoPeopleSharp color="#878787" size="26px" />
+//             <S.ExplainSideTitle>팀 단위 회고에 추천!</S.ExplainSideTitle>
+//           </div>
+//           <S.ExplainTitle>Kudos 회고 더 잘 활용하기</S.ExplainTitle>
+//         </div>
+//         <div style={{ display: 'flex' }}>
+//           {/* ExplainKudos */}
+//           <S.ExplainBody>
+//             <S.ExplainSubTitle>진행 방법</S.ExplainSubTitle>
+//             <S.ExplainContent style={{ marginBottom: '9px' }}>
+//               <S.ExplainContentSpan>1.</S.ExplainContentSpan>
+//               <S.ExplainContentSpan>
+//                 팀원 모두가 <span style={{ fontWeight: '700' }}>Kudos, Went Well, To Improve 섹션</span> 먼저 정해진
+//                 기한 내에 입력해 둡니다.
+//               </S.ExplainContentSpan>
+//             </S.ExplainContent>
+
+//             <S.ExplainContent style={{ width: '396px', marginLeft: '15px', marginBottom: '17px' }}>
+//               <S.ExplainContentSpan>1-1.</S.ExplainContentSpan>
+//               <S.ExplainContentSpan>
+//                 <span style={{ fontWeight: '700' }}>Kudos 섹션</span>은
+//                 <div style={{ display: 'inline-flex', margin: '0px 5px' }}>
+//                   <BiSolidLike size={17} color="gray" />
+//                   <S.ExplainTextImg>
+//                     <IoPersonCircleSharp size={15} color="#ADB8CC" />
+//                     <span
+//                       style={{
+//                         fontSize: '8px',
+//                         fontWeight: '500',
+//                         color: '#ADB8CC',
+//                         lineHeight: '16px',
+//                         marginLeft: '3px',
+//                       }}
+//                     >
+//                       닉네임
+//                     </span>
+//                   </S.ExplainTextImg>
+//                 </div>
+//                 해당 버튼에 칭찬하고자<br></br>
+//                 하는 팀원을 지정하면 됩니다.
+//               </S.ExplainContentSpan>
+//             </S.ExplainContent>
+
+//             <S.ExplainContent style={{ marginBottom: '17px' }}>
+//               <S.ExplainContentSpan>2.</S.ExplainContentSpan>
+//               <S.ExplainContentSpan>
+//                 같은 시간에 모여 작성된 <span style={{ fontWeight: '700' }}>3개의 섹션</span>을 함께 읽어보고, <br></br>{' '}
+//                 다음 활동 떄 진행해야 하는 활동을 정합니다.
+//               </S.ExplainContentSpan>
+//             </S.ExplainContent>
+
+//             <S.ExplainContent style={{ marginBottom: '17px' }}>
+//               <S.ExplainContentSpan>3.</S.ExplainContentSpan>
+//               <S.ExplainContentSpan>
+//                 지정한 활동을 <span style={{ fontWeight: '700' }}>Action Items 섹션</span>에 입력합니다.
+//               </S.ExplainContentSpan>
+//             </S.ExplainContent>
+
+//             <S.ExplainContent>
+//               <S.ExplainContentSpan>4.</S.ExplainContentSpan>
+//               <S.ExplainContentSpan>
+//                 <span style={{ fontWeight: '700' }}>Action Items</span>에 작성된 활동을 담당할 담당자를 정하여<br></br>
+//                 <div style={{ display: 'inline-flex', margin: '0 5px' }}>
+//                   <BsPersonFillCheck size={17} color="gray" />
+//                   <S.ExplainTextImg>
+//                     <IoPersonCircleSharp size={15} color="#ADB8CC" />
+//                     <span
+//                       style={{
+//                         fontSize: '8px',
+//                         fontWeight: '500',
+//                         color: '#ADB8CC',
+//                         lineHeight: '16px',
+//                         marginLeft: '3px',
+//                       }}
+//                     >
+//                       닉네임
+//                     </span>
+//                   </S.ExplainTextImg>
+//                 </div>
+//                 해당 버튼에 팀원을 지정합니다.
+//               </S.ExplainContentSpan>
+//             </S.ExplainContent>
+//           </S.ExplainBody>
+
+//           <S.ExplainLine></S.ExplainLine>
+
+//           <S.ExplainBody>
+//             <S.ExplainSubTitle>각 섹션 설명</S.ExplainSubTitle>
+//             <S.ExplainContent style={{ marginBottom: '40px' }}>
+//               <S.ExplainImgStyle>
+//                 <S.ExplainImgLine></S.ExplainImgLine>
+//                 <span style={{ fontSize: '13px', fontWeight: '700', color: '#ffffff', lineHeight: '28px' }}>Kudos</span>
+//               </S.ExplainImgStyle>
+//               <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>: </S.ExplainContentSpan>
+//               <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>
+//                 팀원이 활동 기간 동안 잘한 점을 칭찬해주세요.
+//               </S.ExplainContentSpan>
+//             </S.ExplainContent>
+
+//             <S.ExplainContent style={{ marginBottom: '40px' }}>
+//               <S.ExplainImgStyle>
+//                 <S.ExplainImgLine></S.ExplainImgLine>
+//                 <span style={{ fontSize: '13px', fontWeight: '700', color: '#ffffff', lineHeight: '28px' }}>
+//                   Went Well
+//                 </span>
+//               </S.ExplainImgStyle>
+//               <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>: </S.ExplainContentSpan>
+//               <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>
+//                 프로젝트나 스프린트 동안 잘 진행된 사항을 공유하세요.
+//               </S.ExplainContentSpan>
+//             </S.ExplainContent>
+
+//             <S.ExplainContent style={{ marginBottom: '40px' }}>
+//               <S.ExplainImgStyle>
+//                 <S.ExplainImgLine></S.ExplainImgLine>
+//                 <span style={{ fontSize: '13px', fontWeight: '700', color: '#ffffff', lineHeight: '28px' }}>
+//                   To Improve
+//                 </span>
+//               </S.ExplainImgStyle>
+//               <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>: </S.ExplainContentSpan>
+//               <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>
+//                 개선이 필요한 부분을 솔직하게 공유하세요.
+//               </S.ExplainContentSpan>
+//             </S.ExplainContent>
+
+//             <S.ExplainContent>
+//               <S.ExplainImgStyle>
+//                 <S.ExplainImgLine></S.ExplainImgLine>
+//                 <span style={{ fontSize: '13px', fontWeight: '700', color: '#ffffff', lineHeight: '28px' }}>
+//                   Action Items
+//                 </span>
+//               </S.ExplainImgStyle>
+//               <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>: </S.ExplainContentSpan>
+//               <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>
+//                 <span style={{ fontWeight: '700' }}>Went Well</span>에서 지속되어야 할 행동과<br></br>
+//                 <span style={{ fontWeight: '700' }}>To Improve</span>에서 도출된 문제를 해결하기 위한 구체적인 행동
+//                 계획을 수립하세요.
+//               </S.ExplainContentSpan>
+//             </S.ExplainContent>
+//           </S.ExplainBody>
+//         </div>
+//       </S.ExplainStyle>
+//     </>
+//   );
+// };
+
 export const ExplainKudos = () => {
   return (
     <>
       <S.ExplainStyle>
-        <div style={{ display: 'flex' }}>
-          <div style={{ display: 'flex', marginTop: '15px', position: 'absolute', left: '120px' }}>
-            <IoPeopleSharp color="#878787" size="26px" />
-            <S.ExplainSideTitle>팀 단위 회고에 추천!</S.ExplainSideTitle>
-          </div>
-          <S.ExplainTitle>Kudos 회고 더 잘 활용하기</S.ExplainTitle>
-        </div>
-        <div style={{ display: 'flex' }}>
+        <Flex justifyContent="center">
+          <Flex margin="0 auto" flexDirection={{ md: 'row', base: 'column' }}>
+            <Flex margin="auto 10px">
+              <IoPeopleSharp color="#878787" size="26px" />
+              <S.ExplainSideTitle>팀 단위 회고에 추천!</S.ExplainSideTitle>
+            </Flex>
+            <S.ExplainTitle>Kudos 회고 더 잘 활용하기</S.ExplainTitle>
+          </Flex>
+        </Flex>
+        <Flex flexDirection={{ md: 'row', base: 'column' }}>
           {/* ExplainKudos */}
           <S.ExplainBody>
             <S.ExplainSubTitle>진행 방법</S.ExplainSubTitle>
@@ -310,7 +464,7 @@ export const ExplainKudos = () => {
               </S.ExplainContentSpan>
             </S.ExplainContent>
           </S.ExplainBody>
-        </div>
+        </Flex>
       </S.ExplainStyle>
     </>
   );
diff --git a/src/pages/SectionPage.tsx b/src/pages/SectionPage.tsx
index 9636272..9469d0f 100644
--- a/src/pages/SectionPage.tsx
+++ b/src/pages/SectionPage.tsx
@@ -80,50 +80,48 @@ const RetroTeamPage = () => {
   return (
     <S.Container>
       {retro && <Title name={retro.title} description={retro.description} user={user} retro={retro} />}
-
-      <S.SectionBox column={4}>
-        {/* <Flex flexDirection="column" margin="0 auto">
-          <Flex> */}
-        {template
-          ? template.map(title => (
-              <>
+      <div style={{ width: '100%', display: 'grid', justifyItems: 'center' }}>
+        {/* <S.SectionBox column={4}> */}
+        <S.SectionBox>
+          {template
+            ? template.map(title => (
+                <>
+                  <S.FrameStyle>
+                    <Label
+                      labelName={title.name}
+                      labelType="dark"
+                      taskCount={section.filter(data => data.sectionName === title.name).length}
+                    />
+                    <AddTask template={title.id} retrospectiveId={retro?.retrospectiveId} setRendering={setRendering} />
+                    <div style={{ height: 'auto', display: 'flex', flexDirection: 'column-reverse' }}>
+                      {section
+                        .filter(key => key.sectionName === title.name)
+                        .map(section => (
+                          <TeamTask
+                            section={section}
+                            setRendering={setRendering}
+                            teamId={teamId ?? null}
+                            imageURL={section.thumbnail}
+                            user={user}
+                            fetchSection={fetchSection}
+                            key={section.sectionId}
+                          />
+                        ))}
+                    </div>
+                  </S.FrameStyle>
+                </>
+              ))
+            : PersonalSectionTitleName.map(title => (
                 <S.FrameStyle>
                   <Label
-                    labelName={title.name}
+                    labelName={title.title}
                     labelType="dark"
-                    taskCount={section.filter(data => data.sectionName === title.name).length}
+                    taskCount={section.filter(data => data.sectionName === title.title).length}
                   />
-                  <AddTask template={title.id} retrospectiveId={retro?.retrospectiveId} setRendering={setRendering} />
-                  <div style={{ height: 'auto', display: 'flex', flexDirection: 'column-reverse' }}>
-                    {section
-                      .filter(key => key.sectionName === title.name)
-                      .map(section => (
-                        <TeamTask
-                          section={section}
-                          setRendering={setRendering}
-                          teamId={teamId ?? null}
-                          imageURL={section.thumbnail}
-                          user={user}
-                          fetchSection={fetchSection}
-                          key={section.sectionId}
-                        />
-                      ))}
-                  </div>
                 </S.FrameStyle>
-              </>
-            ))
-          : PersonalSectionTitleName.map(title => (
-              <S.FrameStyle>
-                <Label
-                  labelName={title.title}
-                  labelType="dark"
-                  taskCount={section.filter(data => data.sectionName === title.title).length}
-                />
-              </S.FrameStyle>
-            ))}
-        {/* </Flex>
-        </Flex> */}
-      </S.SectionBox>
+              ))}
+        </S.SectionBox>
+      </div>
     </S.Container>
   );
 };
diff --git a/src/pages/notice/NoticeShowPage.tsx b/src/pages/notice/NoticeShowPage.tsx
index f0061c1..4c5e54a 100644
--- a/src/pages/notice/NoticeShowPage.tsx
+++ b/src/pages/notice/NoticeShowPage.tsx
@@ -15,6 +15,7 @@ export const NoticeShowPage = () => {
   const { search } = useLocation();
   const query = search.split(/[=,&]/);
   const NoticeShowId = Number(query[1]);
+  // const NoticeShowIndex = Number(query[3]);
 
   // 개별 게시물 조회
   const [notice, setNotice] = useState<GetNoticePostsData>();
@@ -28,16 +29,11 @@ export const NoticeShowPage = () => {
       toast.error(e);
     }
   };
+
   useEffect(() => {
     fetchNoticeShow();
   }, [NoticeShowId]);
 
-  // useEffect(() => {
-  //   if (notice) {
-  //     console.log(notice.title);
-  //   }
-  // }, [notice]);
-
   return (
     <>
       <S.NoticeShowContainer>
diff --git a/src/styles/writeRetroStyles/Layout.style.ts b/src/styles/writeRetroStyles/Layout.style.ts
index 0978912..28a5e72 100644
--- a/src/styles/writeRetroStyles/Layout.style.ts
+++ b/src/styles/writeRetroStyles/Layout.style.ts
@@ -115,31 +115,36 @@ export const SettingButton = styled.div`
   }
 `;
 
-interface SectionBoxProps {
-  column: number;
-}
-
-export const SectionBox = styled.div<SectionBoxProps>`
-  width: 100vw;
+// interface SectionBoxProps {
+//   column: number;
+// }
+
+// export const SectionBox = styled.div<SectionBoxProps>`
+export const SectionBox = styled.div`
+  /* width: 100vw; */
+  /* width: 100vw; */
   display: grid;
-  grid-template-columns: repeat(column, 1fr);
+  /* grid-template-columns: repeat(column, 1fr); */
   grid-auto-flow: column;
   gap: 10px;
   margin-top: 10px;
   @media (max-width: 800px) {
     display: block;
     margin: 10px auto;
+    padding: 0px 10px;
   }
   @media (max-width: 1200px) {
-    grid-template-columns: repeat(Math.ceil(calc(column/2)), 1fr);
+    width: 100%;
+    /* grid-template-columns: repeat(Math.ceil(calc(column/2)), 1fr); */
+    grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, 1fr);
   }
 `;
 
 export const FrameStyle = styled.div`
-  /* width: 345px; */
+  width: 345px;
   /* min-width: 300px; */
-  width: 100%;
+  /* width: 100%; */
   height: auto;
   min-height: 100vh;
   background-color: #f8f8f8;
@@ -153,13 +158,14 @@ export const FrameStyle = styled.div`
   @media (max-width: 800px) {
     width: 90%;
     /* box-shadow:
-      0.3px 0 0 0.3px #4d5e80,
-      0 0.3px 0 0.3px #4d5e80,
-      0 -0.3px 0 0.3px #4d5e80;
+    0.3px 0 0 0.3px #4d5e80,
+    0 0.3px 0 0.3px #4d5e80,
+    0 -0.3px 0 0.3px #4d5e80;
     border-radius: 10px;
     margin: 0 auto 35px; */
   }
   @media (max-width: 1200px) {
+    width: 100%;
     box-shadow:
       0.3px 0 0 0.3px #4d5e80,
       0 0.3px 0 0.3px #4d5e80,