diff --git a/.github/workflows/deploy-production.yml b/.github/workflows/deploy-production.yml
deleted file mode 100644
index 7e54a92..0000000
--- a/.github/workflows/deploy-production.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-name: Deploy Production
-
-on:
-  push:
-    branches: ['main']
-
-jobs:
-  amplify-webhook:
-    runs-on: ubuntu-latest
-    env:
-      AMPLIFY_WEBHOOK_URL: ${{secrets.AMPLIFY_WEBHOOK_URL}}
-    steps:
-      - uses: actions/checkout@v2
-      - run: curl -X POST -d {} $AMPLIFY_WEBHOOK_URL -H "Content-Type:application/json"
diff --git a/.github/workflows/lint-check.yml b/.github/workflows/lint-check.yml
new file mode 100644
index 0000000..faad6ef
--- /dev/null
+++ b/.github/workflows/lint-check.yml
@@ -0,0 +1,15 @@
+name: lint check
+
+on: pull_request
+
+jobs:
+  eslint-test:
+    name: eslint test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18.18.0'
+      - run: npm install
+      - run: npm run lint
diff --git a/.github/workflows/type-check.yml b/.github/workflows/type-check.yml
new file mode 100644
index 0000000..541053a
--- /dev/null
+++ b/.github/workflows/type-check.yml
@@ -0,0 +1,15 @@
+name: type check
+
+on: pull_request
+
+jobs:
+  type-test:
+    name: type test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18.18.0'
+      - run: npm install
+      - run: npm run typecheck
diff --git a/.husky/pre-commit b/.husky/pre-commit
old mode 100755
new mode 100644
diff --git a/src/App.tsx b/src/App.tsx
index 9322855..460cc94 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,10 @@ import CreateRetroPage from '@/pages/CreateRetroPage';
 import HomePage from '@/pages/HomePage';
 import MyPage from '@/pages/MyPage';
 import SurveyPage from '@/pages/SurveyPage';
-import WriteRetroTeamPage from '@/pages/WriteRetroTeamPage';
+import { WriteRetroPersonalPage } from '@/pages/WriteRetroPersonalPage';
+import { WriteRetroRevisePersonalPage } from '@/pages/WriteRetroRevisePersonalPage';
+import { WriteRetroReviseTeamPage } from '@/pages/WriteRetroReviseTeamPage';
+import { WriteRetroTeamPage } from '@/pages/WriteRetroTeamPage';
 
 interface PrivateRouteProps {
   children: ReactElement;
diff --git a/src/components/home/MainDesign.tsx b/src/components/home/MainDesign.tsx
index e58bbc4..58a3ef8 100644
--- a/src/components/home/MainDesign.tsx
+++ b/src/components/home/MainDesign.tsx
@@ -4,33 +4,35 @@ import * as L from '@/styles/layout/layout.style';
 
 const MainDesign = () => {
   return (
-    <S.TopTriangleContainer>
+    <>
+      <S.TopTriangleContainer>
+        <S.TopText>
+          개인회고와 팀 회고 템플릿을 동시에 제공하는 회괴 웹페이지입니다. <br />
+          우리는 개인과 팀이 모두 발전할 수 있도록, <br />
+          과거의 경험을 효과적으로 되새기고 배우는 것을 지원합니다.
+        </S.TopText>
+        <S.BottomText>
+          과거를 회고하며 미래로 나아가는 과정을 촉진하는 의미를 가진 이름으로 <br />
+          &apos; Past&apos; (과거)와 &apos;Forward &apos;(앞으로 나아가다)를 결합하여 비전을 표현합니다.
+        </S.BottomText>
+      </S.TopTriangleContainer>
       <S.BrandContainer>
-        <img src={logo} style={{ marginTop: '150px', marginLeft: '80px', width: '300px', zIndex: '999' }} />
+        <img src={logo} style={{ paddingLeft: '80px', width: '300px' }} />
         <S.BrandTextBox>
-          <S.BrandSmallText style={{ marginLeft: '30%' }}>Moving</S.BrandSmallText>
+          <S.BrandSmallText style={{ paddingLeft: '20%' }}>Moving</S.BrandSmallText>
           <L.LogoText color="white" style={{ fontSize: '70px' }}>
             Forward
           </L.LogoText>
         </S.BrandTextBox>
         <S.BrandTextBox>
-          <S.BrandSmallText style={{ marginLeft: '45%' }}>From the</S.BrandSmallText>
+          <S.BrandSmallText style={{ paddingLeft: '45%' }}>From the</S.BrandSmallText>
           <L.LogoText color="white" style={{ fontSize: '70px' }}>
             Past
           </L.LogoText>
         </S.BrandTextBox>
         <S.StartedFreeButton>Get Started for Free</S.StartedFreeButton>
       </S.BrandContainer>
-      <S.TopText style={{ marginLeft: '70%' }}>
-        개인회고와 팀 회고 템플릿을 동시에 제공하는 회괴 웹페이지입니다. <br />
-        우리는 개인과 팀이 모두 발전할 수 있도록, <br />
-        과거의 경험을 효과적으로 되새기고 배우는 것을 지원합니다.
-      </S.TopText>
-      <S.BottomText>
-        과거를 회고하며 미래로 나아가는 과정을 촉진하는 의미를 가진 이름으로 <br />
-        &apos; Past&apos; (과거)와 &apos;Forward &apos;(앞으로 나아가다)를 결합하여 비전을 표현합니다.
-      </S.BottomText>
-    </S.TopTriangleContainer>
+    </>
   );
 };
 
diff --git a/src/components/layout/parts/LogoBox.tsx b/src/components/layout/parts/LogoBox.tsx
index c7e3ff3..649cf55 100644
--- a/src/components/layout/parts/LogoBox.tsx
+++ b/src/components/layout/parts/LogoBox.tsx
@@ -2,12 +2,12 @@ import Logo from '@/../public/logo.svg';
 import * as S from '@/styles/layout/layout.style';
 const LogoBox = () => {
   return (
-    <S.LogoBox>
+    <>
       <S.LogoText color="brand" href="/#">
         <img src={Logo} />
         Past Forward
       </S.LogoText>
-    </S.LogoBox>
+    </>
   );
 };
 
diff --git a/src/components/writeRetro/AddTaskButton.tsx b/src/components/writeRetro/AddTaskButton.tsx
deleted file mode 100644
index 4bb2f4d..0000000
--- a/src/components/writeRetro/AddTaskButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import dark from '../../assets/PlusIcon_black.png';
-import light from '../../assets/PlusIcon_gray.png';
-import * as S from '../../styles/writeRetroStyles/AddTaskButton.style';
-
-type AddTaskButtonProps = {
-  color: 'dark' | 'light';
-};
-
-function AddTaskButton({ color }: AddTaskButtonProps) {
-  const image = color === 'dark' ? dark : light;
-
-  return (
-    <>
-      <S.AddTaskButtonStyle>
-        <S.AddTaskButtonImage>
-          <img src={image} alt="Add Task"></img>
-        </S.AddTaskButtonImage>
-      </S.AddTaskButtonStyle>
-    </>
-  );
-}
-
-export default AddTaskButton;
diff --git a/src/components/writeRetro/CheckPopUp.tsx b/src/components/writeRetro/CheckPopUp.tsx
deleted file mode 100644
index ff45f29..0000000
--- a/src/components/writeRetro/CheckPopUp.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import image from '../../assets/Vector.png';
-import * as S from '../../styles/writeRetroStyles/CheckPopUp.style';
-
-function CheckPopUp() {
-  return (
-    <>
-      <S.CheckPopUpStyle>
-        <img src={image}></img>
-      </S.CheckPopUpStyle>
-    </>
-  );
-}
-
-export default CheckPopUp;
diff --git a/src/components/writeRetro/Frame.tsx b/src/components/writeRetro/Frame.tsx
deleted file mode 100644
index 031e72e..0000000
--- a/src/components/writeRetro/Frame.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import AddTaskButton from './AddTaskButton';
-import Label from './Label';
-import Task from './Task';
-import * as S from '../../styles/writeRetroStyles/Frame.style';
-
-type FrameProps = {
-  title: string;
-  background_color: string;
-  color: string;
-  mark_background_color: string;
-  left: string;
-  button_color: 'dark' | 'light';
-};
-
-function Frame({ title, background_color, color, mark_background_color, left, button_color }: FrameProps) {
-  return (
-    <>
-      <S.FrameBox left={left}>
-        <S.FrameStyle>
-          <Label
-            title={title}
-            background_color={background_color}
-            color={color}
-            mark_background_color={mark_background_color}
-          ></Label>
-          <S.TaskFrame>
-            <S.TaskBox>
-              <Task></Task>
-            </S.TaskBox>
-            <AddTaskButton color={button_color}></AddTaskButton>
-          </S.TaskFrame>
-        </S.FrameStyle>
-      </S.FrameBox>
-    </>
-  );
-}
-
-export default Frame;
diff --git a/src/components/writeRetro/Label.tsx b/src/components/writeRetro/Label.tsx
deleted file mode 100644
index b72d0d7..0000000
--- a/src/components/writeRetro/Label.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as S from '@/styles/writeRetroStyles/Label.style';
-
-const TaskCount = '8';
-
-type LabelProps = {
-  title: string;
-  background_color: string;
-  color: string;
-  mark_background_color: string;
-};
-
-function Label({ title, background_color, color, mark_background_color }: LabelProps) {
-  return (
-    <>
-      <S.LabelStyle background_color={background_color}>
-        <S.LabelMarkStyle mark_background_color={mark_background_color}></S.LabelMarkStyle>
-        <S.LabelTextStyle color={color}>{title}</S.LabelTextStyle>
-        <S.TaskCountStyle>
-          <S.TaskCountTextStyle>{TaskCount}</S.TaskCountTextStyle>
-        </S.TaskCountStyle>
-      </S.LabelStyle>
-    </>
-  );
-}
-
-export default Label;
diff --git a/src/components/writeRetro/Message.tsx b/src/components/writeRetro/Message.tsx
deleted file mode 100644
index 9bc74c2..0000000
--- a/src/components/writeRetro/Message.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import image from '../../assets/Avatar Image.png';
-import * as S from '../../styles/writeRetroStyles/Message.style';
-
-// 테스트용 객체
-const TestTask = {
-  MessageCount: 3,
-  UserProfile: '유저 이미지',
-  UserName: '홍길동',
-  Message: '맥락까지 꼼꼼하게 문서에 기재해주셔서 너무 좋아요!',
-  Time: '1일전',
-};
-
-function Message() {
-  return (
-    <>
-      <S.MessageStyle>
-        <S.MessageUserProfile>
-          <img src={image}></img>
-        </S.MessageUserProfile>
-        <S.MessageUserName>{TestTask.UserName}</S.MessageUserName>
-        <S.MessageDaysLeft>{TestTask.Time}</S.MessageDaysLeft>
-        <S.MessageText>{TestTask.Message}</S.MessageText>
-        <S.ModifyingMessage>수정 / 삭제</S.ModifyingMessage>
-      </S.MessageStyle>
-    </>
-  );
-}
-
-export default Message;
diff --git a/src/components/writeRetro/SaveButton.tsx b/src/components/writeRetro/SaveButton.tsx
deleted file mode 100644
index 8a245ef..0000000
--- a/src/components/writeRetro/SaveButton.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as S from '../../styles/writeRetroStyles/SaveButton.style';
-
-function SaveButton() {
-  return (
-    <>
-      <S.SaveButtonStyle>SAVE</S.SaveButtonStyle>
-    </>
-  );
-}
-
-export default SaveButton;
diff --git a/src/components/writeRetro/SubTask.tsx b/src/components/writeRetro/SubTask.tsx
deleted file mode 100644
index 926d3d9..0000000
--- a/src/components/writeRetro/SubTask.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as S from '../../styles/writeRetroStyles/SubTask.style';
-
-type SubTaskProps = {
-  image: string;
-  count: string;
-};
-
-function SubTask({ image, count }: SubTaskProps) {
-  return (
-    <>
-      <S.SubTaskStyle>
-        <S.SubTaskIconBox>
-          <S.SubTaskIcon>
-            <img src={image}></img>
-          </S.SubTaskIcon>
-        </S.SubTaskIconBox>
-        <S.TaskSubCount>{count}</S.TaskSubCount>
-      </S.SubTaskStyle>
-    </>
-  );
-}
-
-export default SubTask;
diff --git a/src/components/writeRetro/SubTitle.tsx b/src/components/writeRetro/SubTitle.tsx
deleted file mode 100644
index 2074744..0000000
--- a/src/components/writeRetro/SubTitle.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as S from '@/styles/writeRetroStyles/Subtitle.style';
-
-type SubTitleProps = {
-  subTitle: string;
-};
-
-function SubTitle({ subTitle }: SubTitleProps) {
-  return (
-    <>
-      <S.SubTitleStyle>{subTitle}</S.SubTitleStyle>
-    </>
-  );
-}
-
-export default SubTitle;
diff --git a/src/components/writeRetro/Task.tsx b/src/components/writeRetro/Task.tsx
deleted file mode 100644
index 0a26da4..0000000
--- a/src/components/writeRetro/Task.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import image from '@/assets/Avatar Image.png';
-import DaysLeft from '@/assets/access_alarms.png';
-import Message from '@/assets/message.png';
-import ThumbUp from '@/assets/thumb_up.png';
-import SubTask from '@/components/writeRetro/SubTask';
-import TaskMessage from '@/components/writeRetro/TaskMessage';
-import * as S from '@/styles/writeRetroStyles/Task.style';
-
-// 테스트용 객체
-// ThumbUpCount, MessageCount, DaysLeft, count는 어떻게 전달되는지 확인하고 수정하기(string 또는 number로 받음)
-const TestTask = {
-  UserName: '홍길동',
-  userProfile: '유저 이미지',
-  TaskTitle: '노션의 페이지 작성을 잘했다.',
-  ThumbUpCount: '4',
-  MessageCount: '3',
-  DaysLeft: '2 Hours ago',
-};
-
-function Task() {
-  return (
-    <>
-      <S.TaskStyle>
-        <S.TaskMainStyle>
-          <S.TaskTop>
-            <S.TaskUserProfile>
-              <img src={image}></img>
-            </S.TaskUserProfile>
-            <S.TaskUserNameStyle>{TestTask.UserName}</S.TaskUserNameStyle>
-          </S.TaskTop>
-
-          <S.TaskTitleStyle>{TestTask.TaskTitle}</S.TaskTitleStyle>
-
-          <S.SubTaskBox>
-            <SubTask image={ThumbUp} count={TestTask.ThumbUpCount}></SubTask>
-            <SubTask image={Message} count={TestTask.MessageCount}></SubTask>
-            <SubTask image={DaysLeft} count={TestTask.DaysLeft}></SubTask>
-          </S.SubTaskBox>
-        </S.TaskMainStyle>
-
-        <S.TaskMessageBox>
-          <TaskMessage count={TestTask.MessageCount}></TaskMessage>
-        </S.TaskMessageBox>
-      </S.TaskStyle>
-    </>
-  );
-}
-
-export default Task;
diff --git a/src/components/writeRetro/TaskMessage.tsx b/src/components/writeRetro/TaskMessage.tsx
deleted file mode 100644
index a0ddd2a..0000000
--- a/src/components/writeRetro/TaskMessage.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Message from '../../components/writeRetro/Message';
-import * as S from '../../styles/writeRetroStyles/TaskMessage.style';
-
-type TaskMessageProps = {
-  count: string;
-};
-
-function TaskMessage({ count }: TaskMessageProps) {
-  return (
-    <>
-      <S.TaskMessageStyle>
-        <S.AnnounceMessageCount>{count}개의 댓글</S.AnnounceMessageCount>
-        <S.MessageLine></S.MessageLine>
-        <S.MessageBox>
-          <Message></Message>
-          <Message></Message>
-          <Message></Message>
-        </S.MessageBox>
-      </S.TaskMessageStyle>
-    </>
-  );
-}
-
-export default TaskMessage;
diff --git a/src/components/writeRetro/Title.tsx b/src/components/writeRetro/Title.tsx
deleted file mode 100644
index 36ca789..0000000
--- a/src/components/writeRetro/Title.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import image from '../../assets/-group_senior.png';
-import * as S from '../../styles/writeRetroStyles/Title.style';
-
-type TitleProps = {
-  title: string;
-};
-
-function Title({ title }: TitleProps) {
-  return (
-    <>
-      <S.TitleStyle>
-        <S.TitleImageStyle>
-          <img src={image}></img>
-        </S.TitleImageStyle>
-        <S.TitleTextStyle>{title}</S.TitleTextStyle>
-      </S.TitleStyle>
-    </>
-  );
-}
-
-export default Title;
diff --git a/src/components/writeRetro/WriteRetroActionItems.tsx b/src/components/writeRetro/WriteRetroActionItems.tsx
deleted file mode 100644
index e80b4fc..0000000
--- a/src/components/writeRetro/WriteRetroActionItems.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Frame from './Frame';
-
-function WriteRetroActionItems() {
-  return (
-    <>
-      <Frame
-        title="ActionItems"
-        background_color="#FFFFFF"
-        color="#1A265C"
-        mark_background_color="#CECECE"
-        left="1474px"
-        button_color="light"
-      ></Frame>
-    </>
-  );
-}
-
-export default WriteRetroActionItems;
diff --git a/src/components/writeRetro/WriteRetroToImprove.tsx b/src/components/writeRetro/WriteRetroToImprove.tsx
deleted file mode 100644
index 2c8d4f8..0000000
--- a/src/components/writeRetro/WriteRetroToImprove.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Frame from './Frame';
-
-function WriteRetroToImprove() {
-  return (
-    <>
-      <Frame
-        title="To Improve"
-        background_color="#111B47"
-        color="#FFFFFF"
-        mark_background_color="#FFFFFF"
-        left="1097px"
-        button_color="dark"
-      ></Frame>
-    </>
-  );
-}
-
-export default WriteRetroToImprove;
diff --git a/src/components/writeRetro/WriteRetroWentWell.tsx b/src/components/writeRetro/WriteRetroWentWell.tsx
deleted file mode 100644
index c625a5b..0000000
--- a/src/components/writeRetro/WriteRetroWentWell.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Frame from './Frame';
-
-function WriteRetroWentWell() {
-  return (
-    <>
-      <Frame
-        title="WentWell"
-        background_color="#FFFFFF"
-        color="#1A265C"
-        mark_background_color="#CECECE"
-        left="720px"
-        button_color="light"
-      ></Frame>
-    </>
-  );
-}
-
-export default WriteRetroWentWell;
diff --git a/src/components/writeRetro/layout/Layout.tsx b/src/components/writeRetro/layout/Layout.tsx
new file mode 100644
index 0000000..7eb5e90
--- /dev/null
+++ b/src/components/writeRetro/layout/Layout.tsx
@@ -0,0 +1,242 @@
+import { useState, ChangeEvent } from 'react';
+import { AiFillPlusCircle } from 'react-icons/ai';
+import { IoIosMore } from 'react-icons/io';
+import { MdPeopleAlt } from 'react-icons/md';
+import { PersonalTask, TeamActionItemsTask, TeamTask } from '@/components/writeRetro/task/Task';
+import * as S from '@/styles/writeRetroStyles/Layout.style';
+
+type LabelProps = {
+  labelName: string;
+  labelType: 'dark' | 'light';
+  taskCount: number;
+};
+
+type AddTaskProps = {
+  color: 'dark' | 'light';
+};
+
+export const Title = () => {
+  const title: string = 'FirstRetro';
+  const subTitle: string = '첫 회고 진행 - 앞으로 남은 회고는 2번!';
+
+  return (
+    <>
+      <S.TitleBox>
+        <div style={{ display: 'flex' }}>
+          <MdPeopleAlt size="60px" color="#434343" />
+          <S.TitleText>{title}</S.TitleText>
+        </div>
+        <S.SubTitleText>{subTitle}</S.SubTitleText>
+      </S.TitleBox>
+    </>
+  );
+};
+
+export const SaveSetting = () => {
+  return (
+    <S.SaveSettingBox>
+      <S.SaveButton>SAVE</S.SaveButton>
+      <S.SettingButton>
+        <IoIosMore size={'40px'} color="#B1B2B2" />
+      </S.SettingButton>
+    </S.SaveSettingBox>
+  );
+};
+
+export const Label = ({ labelName, labelType, taskCount }: LabelProps) => {
+  let labelColor, markColor, fontColor;
+
+  if (labelType === 'dark') {
+    labelColor = '#111B47';
+    markColor = '#FFFFFF';
+    fontColor = '#FFFFFF';
+  } else {
+    labelColor = '#FFFFFF';
+    markColor = '#CECECE';
+    fontColor = '#1A265C';
+  }
+
+  return (
+    <>
+      <S.LabelStyle color={labelColor}>
+        <S.LabelMark mark_color={markColor}></S.LabelMark>
+        <S.LabelName font_color={fontColor}>{labelName}</S.LabelName>
+        <S.TaskCount>{taskCount}</S.TaskCount>
+      </S.LabelStyle>
+    </>
+  );
+};
+
+export const AddTask = ({ color }: AddTaskProps) => {
+  const buttonColor = color === 'dark' ? '#111B47' : '#DADEE5';
+  const [isVisible, setIsVisible] = useState(false);
+  const handleClick = () => {
+    setIsVisible(isVisible => !isVisible);
+  };
+
+  return (
+    <>
+      {/* AddTaskButton */}
+      <S.AddTaskButtonStyle>
+        <S.AddTaskButtonBox onClick={handleClick}>
+          <S.AddTaskButtonImage>
+            <AiFillPlusCircle size={'21px'} color={buttonColor} />
+          </S.AddTaskButtonImage>
+        </S.AddTaskButtonBox>
+        {/* AddTaskInput */}
+        {isVisible && <AddTaskInput />}
+      </S.AddTaskButtonStyle>
+    </>
+  );
+};
+
+export const AddTaskInput = () => {
+  // Input 높이 자동 조절
+  const [value, setValue] = useState('');
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    e.target.style.height = 'auto';
+    e.target.style.height = `${e.target.scrollHeight}px`;
+  };
+
+  return (
+    <>
+      <S.InputTaskBox>
+        <S.InputTask value={value} onChange={handleChange} placeholder="내용을 입력해주세요" rows={1}></S.InputTask>
+        <S.InputButton style={{ marginTop: '10px', marginLeft: '256px' }}>확인</S.InputButton>
+      </S.InputTaskBox>
+    </>
+  );
+};
+
+export const Kudos = () => {
+  const labelName = 'Kudos';
+  const labelType = 'dark';
+  const taskCount = 3;
+
+  return (
+    <>
+      <S.FrameStyle>
+        <Label labelName={labelName} labelType={labelType} taskCount={taskCount}></Label>
+        <TeamTask />
+        <TeamTask />
+        <TeamTask />
+        <AddTask color={labelType}></AddTask>
+      </S.FrameStyle>
+    </>
+  );
+};
+
+export const WentWell = () => {
+  const labelName = 'Went Well';
+  const labelType = 'light';
+  const taskCount = 3;
+
+  return (
+    <>
+      <S.FrameStyle>
+        <Label labelName={labelName} labelType={labelType} taskCount={taskCount}></Label>
+        <TeamTask />
+        <AddTask color={labelType}></AddTask>
+      </S.FrameStyle>
+    </>
+  );
+};
+
+export const ToImprove = () => {
+  const labelName = 'To Improve';
+  const labelType = 'dark';
+  const taskCount = 3;
+
+  return (
+    <>
+      <S.FrameStyle>
+        <Label labelName={labelName} labelType={labelType} taskCount={taskCount}></Label>
+        <TeamTask />
+        <AddTask color={labelType}></AddTask>
+      </S.FrameStyle>
+    </>
+  );
+};
+
+export const ActionItems = () => {
+  const labelName = 'Action Items';
+  const labelType = 'light';
+  const taskCount = 3;
+
+  return (
+    <>
+      <S.FrameStyle>
+        <Label labelName={labelName} labelType={labelType} taskCount={taskCount}></Label>
+        <TeamActionItemsTask />
+        <AddTask color={labelType}></AddTask>
+      </S.FrameStyle>
+    </>
+  );
+};
+
+export const Keep = () => {
+  const labelName = 'Keep';
+  const labelType = 'dark';
+  const taskCount = 3;
+
+  return (
+    <>
+      <S.FrameStyle>
+        <Label labelName={labelName} labelType={labelType} taskCount={taskCount}></Label>
+        <PersonalTask />
+        <PersonalTask />
+        <PersonalTask />
+        <AddTask color={labelType}></AddTask>
+      </S.FrameStyle>
+    </>
+  );
+};
+
+export const Problem = () => {
+  const labelName = 'Problem';
+  const labelType = 'light';
+  const taskCount = 3;
+
+  return (
+    <>
+      <S.FrameStyle>
+        <Label labelName={labelName} labelType={labelType} taskCount={taskCount}></Label>
+        <PersonalTask />
+        <AddTask color={labelType}></AddTask>
+      </S.FrameStyle>
+    </>
+  );
+};
+
+export const Try = () => {
+  const labelName = 'Try';
+  const labelType = 'dark';
+  const taskCount = 3;
+
+  return (
+    <>
+      <S.FrameStyle>
+        <Label labelName={labelName} labelType={labelType} taskCount={taskCount}></Label>
+        <PersonalTask />
+        <AddTask color={labelType}></AddTask>
+      </S.FrameStyle>
+    </>
+  );
+};
+
+export const PersonalActionItems = () => {
+  const labelName = 'Action Items';
+  const labelType = 'light';
+  const taskCount = 3;
+
+  return (
+    <>
+      <S.FrameStyle>
+        <Label labelName={labelName} labelType={labelType} taskCount={taskCount}></Label>
+        <PersonalTask />
+        <AddTask color={labelType}></AddTask>
+      </S.FrameStyle>
+    </>
+  );
+};
diff --git a/src/components/writeRetro/layout/Manager.tsx b/src/components/writeRetro/layout/Manager.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/writeRetro/layout/Setting.tsx b/src/components/writeRetro/layout/Setting.tsx
new file mode 100644
index 0000000..87b59e7
--- /dev/null
+++ b/src/components/writeRetro/layout/Setting.tsx
@@ -0,0 +1,202 @@
+import { useState } from 'react';
+import { BiSolidPencil } from 'react-icons/bi';
+import { IoPersonCircle } from 'react-icons/io5';
+import { LiaExclamationCircleSolid } from 'react-icons/lia';
+import { MdPeopleAlt } from 'react-icons/md';
+import { RiFileUploadLine } from 'react-icons/ri';
+import * as S from '@/styles/writeRetroStyles/ReviseLayout.style';
+
+export const SettingTitle = () => {
+  const title: string = 'FirstRetro';
+
+  return (
+    <>
+      <S.TitleBox>
+        <div style={{ display: 'flex' }}>
+          <MdPeopleAlt size="60px" color="#434343" />
+          <S.TitleText>{title}</S.TitleText>
+        </div>
+      </S.TitleBox>
+    </>
+  );
+};
+
+export const SettingMenu = () => {
+  const [clicked, setClicked] = useState(false);
+  const handleClick = () => {
+    setClicked(!clicked);
+  };
+  const color = clicked ? '#111B47' : '#A9A9A9';
+
+  return (
+    <>
+      <S.SettingMenuStyle>
+        <S.SettingMenuBox color={color} onClick={handleClick}>
+          회고 설정
+        </S.SettingMenuBox>
+        <Setting></Setting>
+      </S.SettingMenuStyle>
+    </>
+  );
+};
+
+export const SettingImage = () => {
+  return (
+    <>
+      <S.SettingImage></S.SettingImage>
+      <S.SettingImageButtonBox>
+        <S.SettingImageButton>
+          <div style={{ width: '77px', display: 'flex', margin: '0 auto' }}>
+            <div style={{ marginTop: '8px', marginRight: '10px' }}>
+              <RiFileUploadLine size={'15px'} color="#8D8D8D" />
+            </div>
+            <S.SettingImageButtonText>변경하기</S.SettingImageButtonText>
+          </div>
+        </S.SettingImageButton>
+        <S.SettingImageButton>
+          <S.SettingImageButtonText>삭제하기</S.SettingImageButtonText>
+        </S.SettingImageButton>
+      </S.SettingImageButtonBox>
+    </>
+  );
+};
+
+export const ReviseTitle = () => {
+  const previousTitle: string = '회고명을 입력하세요';
+  return (
+    <>
+      <S.ReviseBox>
+        <div style={{ display: 'flex' }}>
+          <S.ReviseTitle>회고명</S.ReviseTitle>
+        </div>
+        <S.ReviseInput placeholder={previousTitle}></S.ReviseInput>
+      </S.ReviseBox>
+    </>
+  );
+};
+
+export const ReviseType = () => {
+  const previousType: string = '회고 유형을 입력하세요';
+  return (
+    <>
+      <S.ReviseBox>
+        <div style={{ display: 'flex' }}>
+          <S.ReviseTitle>회고 유형</S.ReviseTitle>
+          <S.UnableChange>ꞏ 변경 불가</S.UnableChange>
+        </div>
+        <S.UnableChangeInput placeholder={previousType} readOnly></S.UnableChangeInput>
+      </S.ReviseBox>
+    </>
+  );
+};
+
+export const ReviseTemplateType = () => {
+  const previousType: string = '회고 템플릿 유형을 입력하세요';
+  return (
+    <>
+      <S.ReviseBox>
+        <div style={{ display: 'flex' }}>
+          <S.ReviseTitle>회고 템플릿 유형</S.ReviseTitle>
+          <S.UnableChange>ꞏ 변경 불가</S.UnableChange>
+        </div>
+        <S.UnableChangeInput placeholder={previousType} readOnly></S.UnableChangeInput>
+      </S.ReviseBox>
+    </>
+  );
+};
+
+export const ReviseLeader = () => {
+  return (
+    <>
+      <S.ReviseBox>
+        <div style={{ display: 'flex' }}>
+          <S.ReviseTitle>회고 리더</S.ReviseTitle>
+          <S.UnableChange>ꞏ 변경 불가</S.UnableChange>
+        </div>
+        <S.ReviseLeaderStyle>
+          <div style={{ marginTop: '5px' }}>
+            <IoPersonCircle size={'20px'} color="#C3CAD9" />
+          </div>
+          <S.ReviseLeaderInput placeholder="회고 리더" readOnly></S.ReviseLeaderInput>
+        </S.ReviseLeaderStyle>
+      </S.ReviseBox>
+    </>
+  );
+};
+
+export const ReviseExplanation = () => {
+  const ReviseExplanation: string = '회고 설명을 입력하세요';
+  return (
+    <>
+      <S.ReviseBox>
+        <div style={{ display: 'flex' }}>
+          <S.ReviseTitle>회고 설명</S.ReviseTitle>
+        </div>
+        <div style={{ display: 'flex', position: 'relative' }}>
+          <S.UnlinedInput placeholder={ReviseExplanation}></S.UnlinedInput>
+          <div style={{ position: 'absolute', top: '20px', left: '400px' }}>
+            <BiSolidPencil />
+          </div>
+        </div>
+      </S.ReviseBox>
+    </>
+  );
+};
+
+export const ReviseCompletion = () => {
+  return (
+    <div style={{ width: '422px', height: '70px', marginTop: '20px' }}>
+      <S.ReviseBottomTitle>회고 최종완료</S.ReviseBottomTitle>
+      <div style={{ display: 'flex', padding: '25px 25px 10px' }}>
+        <div style={{ marginTop: '1px', marginRight: '5px' }}>
+          <LiaExclamationCircleSolid size={'10px'} color="#FF4646" />
+        </div>
+        <S.ReviseBottomText>최종 완료 시, Done으로 표시되며 참여자는 수정이 불가합니다.</S.ReviseBottomText>
+      </div>
+    </div>
+  );
+};
+
+export const ReviseDelete = () => {
+  return (
+    <div style={{ width: '422px', height: '80px', marginTop: '20px' }}>
+      <S.ReviseBottomTitle>회고 삭제</S.ReviseBottomTitle>
+      <div style={{ display: 'flex', padding: '20px 25px 10px', position: 'relative' }}>
+        <div style={{ marginTop: '3px', marginRight: '5px' }}>
+          <LiaExclamationCircleSolid size={'10px'} color="#FF4646" />
+        </div>
+        <S.ReviseDeleteText>삭제 후 복구할 수 없습니다.</S.ReviseDeleteText>
+        <S.ReviseDeleteButton>회고 삭제</S.ReviseDeleteButton>
+      </div>
+    </div>
+  );
+};
+
+export const ReviseButton = () => {
+  return (
+    <div style={{ marginTop: '25x', position: 'relative' }}>
+      <div style={{ display: 'flex', marginLeft: '200px' }}>
+        <S.ReviseButtonStyle>CANCLE</S.ReviseButtonStyle>
+        <S.ReviseButtonStyle>SAVE</S.ReviseButtonStyle>
+      </div>
+    </div>
+  );
+};
+
+export const Setting = () => {
+  return (
+    <>
+      <S.SettingStyle>
+        <SettingImage></SettingImage>
+        <ReviseTitle></ReviseTitle>
+        <ReviseType></ReviseType>
+        <ReviseTemplateType></ReviseTemplateType>
+        <ReviseLeader></ReviseLeader>
+        <ReviseExplanation></ReviseExplanation>
+        <ReviseCompletion></ReviseCompletion>
+        <ReviseDelete></ReviseDelete>
+        <ReviseButton></ReviseButton>
+      </S.SettingStyle>
+    </>
+  );
+};
diff --git a/src/components/writeRetro/task/Task.tsx b/src/components/writeRetro/task/Task.tsx
new file mode 100644
index 0000000..af2be72
--- /dev/null
+++ b/src/components/writeRetro/task/Task.tsx
@@ -0,0 +1,376 @@
+import { useState, ChangeEvent } from 'react';
+import { AiFillPlusCircle } from 'react-icons/ai';
+import { BiLike } from 'react-icons/bi';
+import { BiSolidLike } from 'react-icons/bi';
+import { CgProfile } from 'react-icons/cg';
+import { CiCirclePlus } from 'react-icons/ci';
+import { MdMessage } from 'react-icons/md';
+import { MdAccessAlarm } from 'react-icons/md';
+import { Modal, ModalOverlay, ModalContent, ModalCloseButton, useDisclosure } from '@chakra-ui/react';
+import { TeamTaskMessage, PersonalTaskMessage } from '@/components/writeRetro/task/TaskMessage';
+import * as S from '@/styles/writeRetroStyles/Layout.style';
+
+export const TeamTaskReviseBox = () => {
+  return (
+    <div style={{ display: 'flex', width: '35px' }}>
+      <TeamTaskRevise></TeamTaskRevise>
+      <p style={{ fontSize: '8px', fontWeight: '500', color: '#adb8cc' }}>/</p>
+      <TeamTaskDelete></TeamTaskDelete>
+    </div>
+  );
+};
+
+export const TeamTaskRevise = () => {
+  return (
+    <>
+      <S.TaskRevise>수정</S.TaskRevise>
+    </>
+  );
+};
+
+export const TeamTaskDelete = () => {
+  return (
+    <>
+      <S.TaskRevise>삭제</S.TaskRevise>
+    </>
+  );
+};
+
+export const PersonalTaskReviseBox = () => {
+  return (
+    <div style={{ display: 'flex', width: '35px' }}>
+      <PersonalTaskRevise></PersonalTaskRevise>
+      <p style={{ fontSize: '8px', fontWeight: '500', color: '#adb8cc' }}>/</p>
+      <PersonalTaskRevise></PersonalTaskRevise>
+    </div>
+  );
+};
+
+export const PersonalTaskRevise = () => {
+  return (
+    <>
+      <S.TaskRevise>수정</S.TaskRevise>
+    </>
+  );
+};
+
+export const PersonalTaskDelete = () => {
+  return (
+    <>
+      <S.TaskRevise>삭제</S.TaskRevise>
+    </>
+  );
+};
+
+export const ReviseModal = () => {
+  // Input 높이 자동 조절
+  const [value, setValue] = useState('');
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    e.target.style.height = 'auto';
+    e.target.style.height = `${e.target.scrollHeight}px`;
+  };
+  return (
+    <>
+      <S.ReviseModalStyle>
+        <S.ReviseModalLine>
+          <S.ReviseModalTitle>수정</S.ReviseModalTitle>
+        </S.ReviseModalLine>
+        <S.ReviseModalInput
+          value={value}
+          onChange={handleChange}
+          placeholder="내용을 입력하세요."
+          rows={1}
+        ></S.ReviseModalInput>
+
+        <S.ReviseModalButtonBox>
+          <S.ReviseModalButton>삭제</S.ReviseModalButton>
+          <S.ReviseModalButton>확인</S.ReviseModalButton>
+        </S.ReviseModalButtonBox>
+      </S.ReviseModalStyle>
+    </>
+  );
+};
+
+export const Manager = () => {
+  return (
+    <>
+      <S.ManagerStyle>
+        <S.ManagerText>담당자</S.ManagerText>
+        <div>
+          <S.ManagerButton>M</S.ManagerButton>
+        </div>
+      </S.ManagerStyle>
+    </>
+  );
+};
+
+export const TeamTask = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const userName: string = '김사과';
+  const taskText: string = '문서 작성 - 수기를 담당하신 분이 작성한 회의록';
+  const likeCount: number = 3;
+  const MessageCount: number = 4;
+  const DaysLeftCount: number = 20240326;
+
+  const [liked, setLiked] = useState(false);
+  const handleLike = () => {
+    setLiked(!liked);
+  };
+
+  const [messaged, setMessaged] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const handleMessaged = () => {
+    setMessaged(messaged => !messaged);
+    setIsVisible(isVisible => !isVisible);
+  };
+
+  return (
+    <>
+      <S.TaskBox>
+        <S.TaskMainStyle>
+          {/* TaskTop */}
+          <div style={{ display: 'flex' }}>
+            <S.TaskUserProfile>
+              <CgProfile size="20px" color="#DADEE5" />
+            </S.TaskUserProfile>
+            <S.TaskUserName>{userName}</S.TaskUserName>
+            <div style={{ margin: 'auto 0', position: 'relative', left: '180px' }}>
+              <TeamTaskReviseBox></TeamTaskReviseBox>
+            </div>
+          </div>
+
+          {/* TaskCenter */}
+          <S.TaskText onClick={onOpen}>
+            {taskText}
+            <S.ReviseText>(수정됨)</S.ReviseText>
+          </S.TaskText>
+          {/* TaskTextModal */}
+          <Modal isOpen={isOpen} onClose={onClose}>
+            <ModalOverlay />
+            <ModalContent sx={{ width: 'auto', height: 'auto', borderRadius: '30px', position: 'relative' }}>
+              <ReviseModal></ReviseModal>
+              <ModalCloseButton
+                sx={{
+                  width: '30px',
+                  height: '30px',
+                  fontSize: '18px',
+                  color: '#8B8B8B',
+                  position: 'absolute',
+                  top: '31px',
+                  left: '600px',
+                }}
+              />
+            </ModalContent>
+          </Modal>
+
+          {/* TaskBottom */}
+          <S.SubTaskBox>
+            {/* Like */}
+            <S.SubTaskStyle>
+              <S.SubTaskIcon onClick={handleLike}>
+                {liked ? <BiSolidLike size="20px" color="#111B47" /> : <BiLike size="20px" color="#DADEE5" />}
+              </S.SubTaskIcon>
+              <S.SubTaskCount>{likeCount}</S.SubTaskCount>
+            </S.SubTaskStyle>
+            {/* Message */}
+            <S.SubTaskStyle>
+              <S.SubTaskIcon onClick={handleMessaged}>
+                {messaged ? <MdMessage size="20px" color="#111B47" /> : <MdMessage size="20px" color="#DADEE5" />}
+              </S.SubTaskIcon>
+              <S.SubTaskCount>{MessageCount}</S.SubTaskCount>
+            </S.SubTaskStyle>
+            {/* DaysLeft */}
+            <S.SubTaskStyle>
+              <S.SubTaskIcon>
+                <MdAccessAlarm size="20px" color="#DADEE5" />
+              </S.SubTaskIcon>
+              <S.SubTaskCount>{DaysLeftCount}</S.SubTaskCount>
+            </S.SubTaskStyle>
+          </S.SubTaskBox>
+        </S.TaskMainStyle>
+
+        {isVisible && <TeamTaskMessage />}
+      </S.TaskBox>
+    </>
+  );
+};
+
+export const TeamActionItemsTask = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const userName: string = '김사과';
+  const taskText: string = '문서 작성 - 수기를 담당하신 분이 작성한 회의록';
+  const likeCount: number = 3;
+  const MessageCount: number = 4;
+  const DaysLeftCount: number = 20240326;
+
+  const [liked, setLiked] = useState(false);
+  const handleLike = () => {
+    setLiked(!liked);
+  };
+
+  const [messaged, setMessaged] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const handleMessaged = () => {
+    setMessaged(messaged => !messaged);
+    setIsVisible(isVisible => !isVisible);
+  };
+
+  return (
+    <>
+      <S.TaskBox>
+        <S.TaskMainStyle>
+          {/* TaskTop */}
+          <div style={{ display: 'flex' }}>
+            <S.TaskUserProfile>
+              <CgProfile size="20px" color="#DADEE5" />
+            </S.TaskUserProfile>
+            <S.TaskUserName>{userName}</S.TaskUserName>
+            <div style={{ margin: 'auto 0', position: 'relative', left: '180px' }}>
+              <TeamTaskReviseBox></TeamTaskReviseBox>
+            </div>
+          </div>
+
+          {/* TaskCenter */}
+          <div style={{ display: 'flex', position: 'relative' }}>
+            <S.ActionTaskText onClick={onOpen}>
+              {taskText}
+              <S.ReviseText>(수정됨)</S.ReviseText>
+            </S.ActionTaskText>
+            {/* TaskTextModal */}
+            <Modal isOpen={isOpen} onClose={onClose}>
+              <ModalOverlay />
+              <ModalContent sx={{ width: 'auto', height: 'auto', borderRadius: '30px', position: 'relative' }}>
+                <ReviseModal></ReviseModal>
+                <ModalCloseButton
+                  sx={{
+                    width: '30px',
+                    height: '30px',
+                    fontSize: '18px',
+                    color: '#8B8B8B',
+                    position: 'absolute',
+                    top: '31px',
+                    left: '600px',
+                  }}
+                />
+              </ModalContent>
+            </Modal>
+            <Manager></Manager>
+          </div>
+
+          {/* TaskBottom */}
+          <S.SubTaskBox>
+            {/* Like */}
+            <S.SubTaskStyle>
+              <S.SubTaskIcon onClick={handleLike}>
+                {liked ? <BiSolidLike size="20px" color="#111B47" /> : <BiLike size="20px" color="#DADEE5" />}
+              </S.SubTaskIcon>
+              <S.SubTaskCount>{likeCount}</S.SubTaskCount>
+            </S.SubTaskStyle>
+            {/* Message */}
+            <S.SubTaskStyle>
+              <S.SubTaskIcon onClick={handleMessaged}>
+                {messaged ? <MdMessage size="20px" color="#111B47" /> : <MdMessage size="20px" color="#DADEE5" />}
+              </S.SubTaskIcon>
+              <S.SubTaskCount>{MessageCount}</S.SubTaskCount>
+            </S.SubTaskStyle>
+            {/* DaysLeft */}
+            <S.SubTaskStyle>
+              <S.SubTaskIcon>
+                <MdAccessAlarm size="20px" color="#DADEE5" />
+              </S.SubTaskIcon>
+              <S.SubTaskCount>{DaysLeftCount}</S.SubTaskCount>
+            </S.SubTaskStyle>
+          </S.SubTaskBox>
+        </S.TaskMainStyle>
+
+        {isVisible && <TeamTaskMessage />}
+      </S.TaskBox>
+    </>
+  );
+};
+
+export const PersonalTask = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const userName: string = '김사과';
+  const taskText: string = '문서 작성 - 수기를 담당하신 분이 작성한 회의록';
+  const MessageCount: number = 4;
+  const DaysLeftCount: number = 20240326;
+
+  const [messaged, setMessaged] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const handleMessaged = () => {
+    setMessaged(messaged => !messaged);
+    setIsVisible(isVisible => !isVisible);
+  };
+
+  return (
+    <>
+      <S.TaskBox>
+        <S.TaskMainStyle>
+          {/* TaskTop */}
+          <div style={{ display: 'flex' }}>
+            <S.TaskUserProfile>
+              <CgProfile size="20px" color="#DADEE5" />
+            </S.TaskUserProfile>
+            <S.TaskUserName>{userName}</S.TaskUserName>
+            <div style={{ margin: 'auto 0', position: 'relative', left: '180px' }}>
+              <PersonalTaskReviseBox></PersonalTaskReviseBox>
+            </div>
+          </div>
+
+          {/* TaskCenter */}
+          <S.TaskText onClick={onOpen}>
+            {taskText}
+            <S.ReviseText>(수정됨)</S.ReviseText>
+          </S.TaskText>
+          {/* TaskTextModal */}
+          <Modal isOpen={isOpen} onClose={onClose}>
+            <ModalOverlay />
+            <ModalContent sx={{ width: 'auto', height: 'auto', borderRadius: '30px', position: 'relative' }}>
+              <ReviseModal></ReviseModal>
+              <ModalCloseButton
+                sx={{
+                  width: '30px',
+                  height: '30px',
+                  fontSize: '18px',
+                  color: '#8B8B8B',
+                  position: 'absolute',
+                  top: '31px',
+                  left: '600px',
+                }}
+              />
+            </ModalContent>
+          </Modal>
+
+          {/* TaskBottom */}
+          <S.SubTaskBox>
+            {/* Message */}
+            <S.SubTaskStyle>
+              <S.SubTaskIcon onClick={handleMessaged}>
+                {messaged ? (
+                  <AiFillPlusCircle size="20px" color="#111B47" />
+                ) : (
+                  <CiCirclePlus size="20px" color="#DADEE5" />
+                )}{' '}
+              </S.SubTaskIcon>
+              <S.SubTaskCount>{MessageCount}</S.SubTaskCount>
+            </S.SubTaskStyle>
+            {/* DaysLeft */}
+            <S.SubTaskStyle>
+              <S.SubTaskIcon>
+                <MdAccessAlarm size="20px" color="#DADEE5" />
+              </S.SubTaskIcon>
+              <S.SubTaskCount>{DaysLeftCount}</S.SubTaskCount>
+            </S.SubTaskStyle>
+          </S.SubTaskBox>
+        </S.TaskMainStyle>
+
+        {isVisible && <PersonalTaskMessage />}
+      </S.TaskBox>
+    </>
+  );
+};
diff --git a/src/components/writeRetro/task/TaskMessage.tsx b/src/components/writeRetro/task/TaskMessage.tsx
new file mode 100644
index 0000000..c595771
--- /dev/null
+++ b/src/components/writeRetro/task/TaskMessage.tsx
@@ -0,0 +1,255 @@
+import { useState, ChangeEvent } from 'react';
+import { CgProfile } from 'react-icons/cg';
+import { FaPlus } from 'react-icons/fa6';
+import { Modal, ModalOverlay, ModalContent, ModalCloseButton, useDisclosure } from '@chakra-ui/react';
+import * as S from '@/styles/writeRetroStyles/Layout.style';
+
+export const TeamMessageReviseBox = () => {
+  return (
+    <div style={{ display: 'flex', width: '35px' }}>
+      <TeamMessageRevise></TeamMessageRevise>
+      <p style={{ fontSize: '8px', fontWeight: '500', color: '#adb8cc' }}>/</p>
+      <TeamMessageDelete></TeamMessageDelete>
+    </div>
+  );
+};
+
+export const TeamMessageRevise = () => {
+  return (
+    <>
+      <S.TaskRevise>수정</S.TaskRevise>
+    </>
+  );
+};
+
+export const TeamMessageDelete = () => {
+  return (
+    <>
+      <S.TaskRevise>삭제</S.TaskRevise>
+    </>
+  );
+};
+
+export const PersonalMessageReviseBox = () => {
+  return (
+    <div style={{ display: 'flex', width: '35px' }}>
+      <PersonalMessageRevise></PersonalMessageRevise>
+      <p style={{ fontSize: '8px', fontWeight: '500', color: '#adb8cc' }}>/</p>
+      <PersonalMessageDelete></PersonalMessageDelete>
+    </div>
+  );
+};
+
+export const PersonalMessageRevise = () => {
+  return (
+    <>
+      <S.TaskRevise>수정</S.TaskRevise>
+    </>
+  );
+};
+
+export const PersonalMessageDelete = () => {
+  return (
+    <>
+      <S.TaskRevise>삭제</S.TaskRevise>
+    </>
+  );
+};
+
+export const ReviseModal = () => {
+  // Input 높이 자동 조절
+  const [value, setValue] = useState('');
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    e.target.style.height = 'auto';
+    e.target.style.height = `${e.target.scrollHeight}px`;
+  };
+  return (
+    <>
+      <S.ReviseModalStyle>
+        <S.ReviseModalLine>
+          <S.ReviseModalTitle>수정</S.ReviseModalTitle>
+        </S.ReviseModalLine>
+        <S.ReviseModalInput
+          value={value}
+          onChange={handleChange}
+          placeholder="내용을 입력하세요."
+          rows={1}
+        ></S.ReviseModalInput>
+
+        <S.ReviseModalButtonBox>
+          <S.ReviseModalButton>삭제</S.ReviseModalButton>
+          <S.ReviseModalButton>확인</S.ReviseModalButton>
+        </S.ReviseModalButtonBox>
+      </S.ReviseModalStyle>
+    </>
+  );
+};
+
+export const TeamTaskMessage = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const TaskMessageCount = 5;
+  const MessageImage = <CgProfile size="20px" color="#DADEE5" />;
+  const messageUserName = '김체리';
+  const messageTime = '1일 전';
+  const MessageText: string = '맥락까지 꼼꼼하게 문서에 기재해주셔서 너무 좋아요!';
+  // Input 높이 자동 조절
+  const [value, setValue] = useState('');
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    e.target.style.height = 'auto';
+    e.target.style.height = `${e.target.scrollHeight}px`;
+  };
+
+  return (
+    <>
+      {/* TaskMessage */}
+      <S.TaskMessageBoxStyle>
+        {/* TaskMessageTop */}
+        <div style={{ display: 'flex' }}>
+          <S.TaskMessageCount>{TaskMessageCount}개의 댓글</S.TaskMessageCount>
+          <S.TaskMessageLine></S.TaskMessageLine>
+        </div>
+
+        {/* TaskMessages */}
+        <div style={{ width: '279px', height: 'auto' }}>
+          <S.TaskMessageStyle>
+            <div style={{ display: 'flex' }}>
+              <S.MessageUserProfile>{MessageImage}</S.MessageUserProfile>
+
+              <div style={{ marginLeft: '5px' }}>
+                {/* TaskMessageTop */}
+                <S.MessageTopStyle>
+                  <S.MessageUserName>{messageUserName}</S.MessageUserName>
+                  <S.MessageTime>{messageTime}</S.MessageTime>
+                  <div style={{ margin: 'auto 0', position: 'relative', left: '165px' }}>
+                    <TeamMessageReviseBox></TeamMessageReviseBox>
+                  </div>
+                </S.MessageTopStyle>
+                {/* TaskMessageMain */}
+                <S.MessageText onClick={onOpen}>
+                  {MessageText}
+                  <S.ReviseMessageText>(수정됨)</S.ReviseMessageText>
+                </S.MessageText>
+                {/* MessageModal */}
+                <Modal isOpen={isOpen} onClose={onClose}>
+                  <ModalOverlay />
+                  <ModalContent sx={{ width: 'auto', height: 'auto', borderRadius: '30px', position: 'relative' }}>
+                    <ReviseModal></ReviseModal>
+                    <ModalCloseButton
+                      sx={{
+                        width: '30px',
+                        height: '30px',
+                        fontSize: '18px',
+                        color: '#8B8B8B',
+                        position: 'absolute',
+                        top: '31px',
+                        left: '600px',
+                      }}
+                    />
+                  </ModalContent>
+                </Modal>
+              </div>
+            </div>
+          </S.TaskMessageStyle>
+        </div>
+
+        {/* AddMessage */}
+        <div style={{ display: 'flex', marginTop: '10px' }}>
+          <S.InputMessage
+            value={value}
+            onChange={handleChange}
+            placeholder="내용을 입력해주세요"
+            rows={1}
+          ></S.InputMessage>
+          <S.InputButton style={{ marginTop: '3px', marginLeft: '5px' }}>확인</S.InputButton>
+        </div>
+      </S.TaskMessageBoxStyle>
+    </>
+  );
+};
+
+export const PersonalTaskMessage = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const TaskMessageCount = 5;
+  const MessageImage = <FaPlus size="20px" color="#DADEE5" />;
+  const messageUserName = '김체리';
+  const messageTime = '1일 전';
+  const MessageText: string = '맥락까지 꼼꼼하게 문서에 기재해주셔서 너무 좋아요!';
+  // Input 높이 자동 조절
+  const [value, setValue] = useState('');
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    e.target.style.height = 'auto';
+    e.target.style.height = `${e.target.scrollHeight}px`;
+  };
+
+  return (
+    <>
+      {/* TaskMessage */}
+      <S.TaskMessageBoxStyle>
+        {/* TaskMessageTop */}
+        <div style={{ display: 'flex' }}>
+          <S.TaskMessageCount>{TaskMessageCount}개의 댓글</S.TaskMessageCount>
+          <S.TaskMessageLine></S.TaskMessageLine>
+        </div>
+
+        {/* TaskMessages */}
+        <div style={{ width: '279px', height: 'auto' }}>
+          <S.TaskMessageStyle>
+            <div style={{ display: 'flex' }}>
+              <S.MessageUserProfile>{MessageImage}</S.MessageUserProfile>
+
+              <div style={{ marginLeft: '5px' }}>
+                {/* TaskMessageTop */}
+                <S.MessageTopStyle>
+                  <S.MessageUserName>{messageUserName}</S.MessageUserName>
+                  <S.MessageTime>{messageTime}</S.MessageTime>
+                  <div style={{ margin: 'auto 0', position: 'relative', left: '165px' }}>
+                    <PersonalMessageReviseBox></PersonalMessageReviseBox>
+                  </div>
+                </S.MessageTopStyle>
+                {/* TaskMessageMain */}
+                <S.MessageText onClick={onOpen}>
+                  {MessageText}
+                  <S.ReviseMessageText>(수정됨)</S.ReviseMessageText>
+                </S.MessageText>
+                {/* MessageModal */}
+                <Modal isOpen={isOpen} onClose={onClose}>
+                  <ModalOverlay />
+                  <ModalContent sx={{ width: 'auto', height: 'auto', borderRadius: '30px', position: 'relative' }}>
+                    <ReviseModal></ReviseModal>
+                    <ModalCloseButton
+                      sx={{
+                        width: '30px',
+                        height: '30px',
+                        fontSize: '18px',
+                        color: '#8B8B8B',
+                        position: 'absolute',
+                        top: '31px',
+                        left: '600px',
+                      }}
+                    />
+                  </ModalContent>
+                </Modal>
+              </div>
+            </div>
+          </S.TaskMessageStyle>
+        </div>
+
+        {/* AddMessage */}
+        <div style={{ display: 'flex', marginTop: '10px' }}>
+          <S.InputMessage
+            value={value}
+            onChange={handleChange}
+            placeholder="내용을 입력해주세요"
+            rows={1}
+          ></S.InputMessage>
+          <S.InputButton style={{ marginTop: '3px', marginLeft: '5px' }}>확인</S.InputButton>
+        </div>
+      </S.TaskMessageBoxStyle>
+    </>
+  );
+};
diff --git a/src/pages/WriteRetroPersonalPage.tsx b/src/pages/WriteRetroPersonalPage.tsx
new file mode 100644
index 0000000..e9b82d2
--- /dev/null
+++ b/src/pages/WriteRetroPersonalPage.tsx
@@ -0,0 +1,17 @@
+import { Title, SaveSetting, Keep, Problem, Try, PersonalActionItems } from '@/components/writeRetro/layout/Layout';
+import * as S from '@/styles/writeRetroStyles/Layout.style';
+
+export const WriteRetroPersonalPage = () => {
+  return (
+    <>
+      <Title></Title>
+      <SaveSetting></SaveSetting>
+      <S.SectionBox>
+        <Keep></Keep>
+        <Problem></Problem>
+        <Try></Try>
+        <PersonalActionItems></PersonalActionItems>
+      </S.SectionBox>
+    </>
+  );
+};
diff --git a/src/pages/WriteRetroRevisePersonalPage.tsx b/src/pages/WriteRetroRevisePersonalPage.tsx
new file mode 100644
index 0000000..b896bac
--- /dev/null
+++ b/src/pages/WriteRetroRevisePersonalPage.tsx
@@ -0,0 +1,3 @@
+export const WriteRetroRevisePersonalPage = () => {
+  return <></>;
+};
diff --git a/src/pages/WriteRetroReviseTeamPage.tsx b/src/pages/WriteRetroReviseTeamPage.tsx
new file mode 100644
index 0000000..eac1ead
--- /dev/null
+++ b/src/pages/WriteRetroReviseTeamPage.tsx
@@ -0,0 +1,10 @@
+import { SettingMenu, SettingTitle } from '@/components/writeRetro/layout/Setting';
+
+export const WriteRetroReviseTeamPage = () => {
+  return (
+    <>
+      <SettingTitle></SettingTitle>
+      <SettingMenu></SettingMenu>
+    </>
+  );
+};
diff --git a/src/pages/WriteRetroTeamPage.tsx b/src/pages/WriteRetroTeamPage.tsx
index be20a10..e6cc173 100644
--- a/src/pages/WriteRetroTeamPage.tsx
+++ b/src/pages/WriteRetroTeamPage.tsx
@@ -1,23 +1,17 @@
-import CheckPopUp from '@/components/writeRetro/CheckPopUp';
-import SaveButton from '@/components/writeRetro/SaveButton';
-import SubTitle from '@/components/writeRetro/SubTitle';
-import Title from '@/components/writeRetro/Title';
-import WriteRetroActionItems from '@/components/writeRetro/WriteRetroActionItems';
-import WriteRetroToImprove from '@/components/writeRetro/WriteRetroToImprove';
-import WriteRetroWentWell from '@/components/writeRetro/WriteRetroWentWell';
+import { Kudos, WentWell, ToImprove, ActionItems, Title, SaveSetting } from '@/components/writeRetro/layout/Layout';
+import * as S from '@/styles/writeRetroStyles/Layout.style';
 
-function WriteRetroTeamPage() {
+export const WriteRetroTeamPage = () => {
   return (
     <>
-      <Title title="First Retro"></Title>
-      <SubTitle subTitle="첫 회고 진행 - 앞으로 남은 회고는 2번!"></SubTitle>
-      <SaveButton></SaveButton>
-      <CheckPopUp></CheckPopUp>
-      <WriteRetroWentWell></WriteRetroWentWell>
-      <WriteRetroToImprove></WriteRetroToImprove>
-      <WriteRetroActionItems></WriteRetroActionItems>
+      <Title></Title>
+      <SaveSetting></SaveSetting>
+      <S.SectionBox>
+        <Kudos></Kudos>
+        <WentWell></WentWell>
+        <ToImprove></ToImprove>
+        <ActionItems></ActionItems>
+      </S.SectionBox>
     </>
   );
-}
-
-export default WriteRetroTeamPage;
+};
diff --git a/src/styles/Home/home.style.ts b/src/styles/Home/home.style.ts
index 91567b8..552ea79 100644
--- a/src/styles/Home/home.style.ts
+++ b/src/styles/Home/home.style.ts
@@ -1,53 +1,50 @@
 import styled from 'styled-components';
 
-export const TopTriangleContainer = styled.div`
-  position: relative;
-  background-color: white;
-  min-width: 1200px;
-  height: 1000px;
-`;
-
 export const TopText = styled.p`
-  margin-top: 100px;
-  margin-left: 800px;
+  margin-top: 50px;
+  margin-left: 55%;
   color: #111b47;
 `;
 
 export const BottomText = styled.p`
-  margin-top: 400px;
-  margin-left: 100px;
+  margin-top: 30%;
+  margin-left: 5%;
   color: #111b47;
 `;
 
 export const BrandContainer = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 800px;
-  clip-path: polygon(0 49%, 0 0, 100% 47%, 100% 100%);
+  clip-path: polygon(0 0, 100% 48%, 100% 100%, 0 56%);
   background: rgb(2, 0, 36);
   background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(28, 28, 101, 1) 37%, rgba(36, 123, 218, 1) 100%);
+  padding: 10% 5%;
 `;
 
 export const BrandSmallText = styled.p`
   color: white;
   font-size: 40px;
-  margin-top: 40px;
-  margin-right: 10px;
+  padding-top: 50px;
 `;
 
 export const BrandTextBox = styled.div`
   display: flex;
-  flex-direction: row;
 `;
 
 export const StartedFreeButton = styled.button`
   background-color: white;
   color: #111b47;
   font-size: 30px;
-  padding: 10px 20px;
+  padding: 10px 40px;
   margin-left: 70%;
   border-radius: 10px;
   &:hover {
     background-color: #ababab;
   }
 `;
+export const TopTriangleContainer = styled.div`
+  position: absolute;
+  width: 100%;
+`;
+
+export const Container = styled.div`
+  margin: 0 auto;
+`;
diff --git a/src/styles/layout/layout.style.ts b/src/styles/layout/layout.style.ts
index 0a76fc4..101bc8c 100644
--- a/src/styles/layout/layout.style.ts
+++ b/src/styles/layout/layout.style.ts
@@ -88,7 +88,7 @@ export const LogoText = styled.a<ColorProps>`
   font-size: 30px;
   font-weight: bold;
   border: 20px;
-  padding: 10px 5px;
+  padding: 10px 20px;
   text-decoration: none;
   padding-top: 10px;
 `;
diff --git a/src/styles/writeRetroStyles/AddTaskButton.style.ts b/src/styles/writeRetroStyles/AddTaskButton.style.ts
deleted file mode 100644
index cb36931..0000000
--- a/src/styles/writeRetroStyles/AddTaskButton.style.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-
-export const AddTaskButtonStyle = styled.div`
-  width: 317px;
-  height: 39px;
-  border-radius: 8px;
-  background-color: #ffffff;
-  border: 1px solid #f2f4f7;
-  box-shadow: 0px 1px 3px 0px rgba(96, 108, 128, 0.05);
-  margin-top: 10px;
-  position: relative;
-`;
-
-export const AddTaskButtonImage = styled.div`
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
diff --git a/src/styles/writeRetroStyles/CheckPopUp.style.ts b/src/styles/writeRetroStyles/CheckPopUp.style.ts
deleted file mode 100644
index a65dc87..0000000
--- a/src/styles/writeRetroStyles/CheckPopUp.style.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-export const CheckPopUpStyle = styled.div`
-  width: 40px;
-  height: 10px;
-  position: absolute;
-  top: 140px;
-  left: 1724px;
-`;
diff --git a/src/styles/writeRetroStyles/Frame.style.ts b/src/styles/writeRetroStyles/Frame.style.ts
deleted file mode 100644
index 6f846e6..0000000
--- a/src/styles/writeRetroStyles/Frame.style.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import styled from 'styled-components';
-
-export const FrameBox = styled.div<{ left: string }>`
-  width: 347px;
-  height: auto;
-  position: absolute;
-  top: 261px;
-  left: ${props => props.left};
-`;
-
-export const FrameStyle = styled.div`
-  width: 347px;
-  min-height: 847px;
-  height: auto;
-  border-radius: 10px 10px 0px 0px;
-  border-width: 0.3px 0.3px 0px 0.3px;
-  border-style: solid;
-  border-color: #4d5e80;
-  background-color: #f8f8f8;
-  position: relative;
-  padding: 15px;
-`;
-
-export const TaskFrame = styled.div`
-  width: 313px;
-  height: auto;
-  position: relative;
-  margin-left: 1px;
-`;
-
-export const TaskBox = styled.div`
-  width: 313px;
-  height: auto;
-`;
diff --git a/src/styles/writeRetroStyles/Label.style.ts b/src/styles/writeRetroStyles/Label.style.ts
deleted file mode 100644
index 2579119..0000000
--- a/src/styles/writeRetroStyles/Label.style.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import styled from 'styled-components';
-
-export const LabelStyle = styled.div<{ background_color: string }>`
-  width: 317px;
-  height: 60px;
-  border-radius: 5px;
-  background-color: ${props => props.background_color}; // 블로그에 정리하기
-  display: flex;
-  position: relative;
-  margin-bottom: 38px;
-  box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.3);
-`;
-
-export const LabelMarkStyle = styled.div<{ mark_background_color: string }>`
-  width: 3px;
-  height: 30px;
-  border-radius: 5px;
-  background-color: ${props => props.mark_background_color};
-  margin: auto 0;
-  position: absolute;
-  top: 15px;
-  left: 12px;
-`;
-
-export const LabelTextStyle = styled.span<{ color: string }>`
-  height: 20px;
-  font-size: 18px;
-  font-weight: 900;
-  color: ${props => props.color};
-  margin: auto 0;
-  position: absolute;
-  top: 17px;
-  left: 25px;
-`;
-
-export const TaskCountStyle = styled.div`
-  width: 22px;
-  height: 24px;
-  border-radius: 16px;
-  background-color: #e4e4e4;
-  position: absolute;
-  top: 17.87px;
-  left: 278px;
-`;
-
-export const TaskCountTextStyle = styled.span`
-  font-size: 10px;
-  font-weight: 800;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
diff --git a/src/styles/writeRetroStyles/Layout.style.ts b/src/styles/writeRetroStyles/Layout.style.ts
new file mode 100644
index 0000000..4345350
--- /dev/null
+++ b/src/styles/writeRetroStyles/Layout.style.ts
@@ -0,0 +1,522 @@
+import styled from 'styled-components';
+
+export const TitleBox = styled.div`
+  width: auto;
+  height: auto;
+  position: absolute;
+  top: 120px;
+  left: 349px;
+`;
+
+export const TitleText = styled.p`
+  width: auto;
+  font-size: 40px;
+  font-weight: 700;
+  color: #434343;
+  margin-top: 3px;
+  margin-left: 13px;
+`;
+
+export const SubTitleText = styled.p`
+  width: auto;
+  height: 20px;
+  font-size: 20px;
+  font-weight: 600;
+  color: #8d8d8d;
+  margin-left: 10px;
+`;
+
+export const SaveSettingBox = styled.div`
+  display: flex;
+  position: absolute;
+  top: 134px;
+  left: 1602px;
+`;
+
+export const SaveButton = styled.div`
+  width: 107px;
+  height: 31px;
+  font-size: 15px;
+  font-weight: 500;
+  color: #979797;
+  line-height: 30px;
+  text-align: center;
+  background-color: #ebeef2;
+  border: 0.2px solid rgba(17, 27, 71, 1);
+  border-radius: 5px;
+  margin: auto 0;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const SettingButton = styled.div`
+  margin: auto 0;
+  margin-left: 15px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const SectionBox = styled.div`
+  width: auto;
+  height: auto;
+  display: flex;
+  position: absolute;
+  top: 261px;
+  left: 349px;
+`;
+
+export const FrameStyle = styled.div`
+  width: 347px;
+  height: auto;
+  min-height: 100vh;
+  background-color: #f8f8f8;
+  box-shadow:
+    -0.3px 0 0 0.3px #4d5e80,
+    0 0.3px 0 0.3px #4d5e80,
+    0 -0.3px 0 0.3px #4d5e80;
+  border-radius: 10px 10px 0px 0px;
+  padding: 15px;
+  margin-right: 30px;
+`;
+
+export const LabelStyle = styled.div<{ color: string }>`
+  width: 317px;
+  height: 60px;
+  background-color: ${props => props.color};
+  box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03);
+  border-radius: 5px;
+  display: flex;
+  position: relative;
+`;
+
+export const LabelMark = styled.div<{ mark_color: string }>`
+  width: 3px;
+  height: 30px;
+  background-color: ${props => props.mark_color};
+  border-radius: 5px;
+  margin: auto 0;
+  margin-left: 13px;
+`;
+
+export const LabelName = styled.p<{ font_color: string }>`
+  width: auto;
+  height: 20px;
+  font-size: 18px;
+  font-weight: 900;
+  color: ${props => props.font_color};
+  line-height: 20px;
+  margin: auto 0;
+  margin-left: 10px;
+`;
+
+export const TaskCount = styled.div`
+  width: auto;
+  min-width: 22px;
+  height: 24px;
+  font-size: 10px;
+  font-weight: 800;
+  color: #111b47;
+  text-align: center;
+  background-color: #e4e4e4;
+  border-radius: 16px;
+  padding: 5px 8.5px;
+  position: absolute;
+  top: 18px;
+  left: 278px;
+`;
+
+export const TaskBox = styled.div`
+  width: 311px;
+  height: auto;
+  min-height: 115px;
+  background-color: #ffffff;
+  border-radius: 5px;
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
+  margin-left: 3px;
+  margin-top: 25px;
+`;
+
+export const TaskMainStyle = styled.div`
+  width: 311px;
+  height: auto;
+  padding: 16px;
+`;
+
+export const TaskUserProfile = styled.div`
+  width: 20px;
+  height: 20px;
+`;
+
+export const TaskUserName = styled.p`
+  width: auto;
+  height: 20px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #adb8cc;
+  line-height: 20px;
+  margin-left: 10px;
+`;
+
+export const TaskRevise = styled.div`
+  width: 18px;
+  height: 10px;
+  font-size: 8px;
+  font-weight: 500;
+  color: #adb8cc;
+  text-align: center;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const TaskText = styled.span`
+  width: 261px;
+  height: auto;
+  font-size: 12px;
+  font-weight: 700;
+  color: #6b7a99;
+  line-height: 20px;
+  vertical-align: top;
+  display: inline-block;
+  margin-top: 5px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const ReviseText = styled.p`
+  width: 35px;
+  height: 10px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #adb8cc;
+  line-height: 10px;
+  margin-left: 3px;
+  display: inline;
+`;
+
+export const SubTaskBox = styled.div`
+  width: auto;
+  height: 20px;
+  display: flex;
+  margin-top: 12px;
+`;
+
+export const SubTaskStyle = styled.div`
+  width: auto;
+  height: 20px;
+  display: flex;
+  margin-right: 18px;
+`;
+
+export const SubTaskIcon = styled.div`
+  width: 20px;
+  height: 20px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const SubTaskCount = styled.p`
+  width: auto;
+  height: 20px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #6b7a99;
+  line-height: 20px;
+  margin-left: 7px;
+`;
+
+export const TaskMessageBoxStyle = styled.div`
+  width: 311px;
+  height: auto;
+  min-height: 50px;
+  background-color: #ffffff;
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
+  padding: 8px 16px 10px;
+`;
+
+export const TaskMessageCount = styled.p`
+  width: 48px;
+  font-size: 8px;
+  font-weight: 700;
+  color: #dadee5;
+  padding: 0 auto;
+`;
+
+export const TaskMessageLine = styled.div`
+  width: 231px;
+  height: 6px;
+  border-bottom: 1px solid #dadee5;
+`;
+
+export const TaskMessageStyle = styled.div`
+  width: 279px;
+  height: auto;
+  min-height: 35px;
+  display: flex;
+  margin-top: 10px;
+`;
+
+export const MessageUserProfile = styled.div`
+  width: 20px;
+  height: 20px;
+`;
+
+export const MessageTopStyle = styled.div`
+  width: auto;
+  max-width: 200px;
+  display: flex;
+  position: relative;
+`;
+
+export const MessageUserName = styled.p`
+  width: auto;
+  height: 10px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #adb8cc;
+`;
+
+export const MessageTime = styled.p`
+  width: auto;
+  height: 6px;
+  font-size: 6px;
+  font-weight: 700;
+  color: #dadee5;
+  margin-left: 5px;
+  position: relative;
+  top: 4px;
+`;
+
+export const MessageText = styled.div`
+  width: 244px;
+  height: auto;
+  font-size: 10px;
+  font-weight: 700;
+  color: #6b7a99;
+  line-height: 15px;
+  vertical-align: top;
+  display: inline-block;
+  margin-top: 3px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const ReviseMessageText = styled.p`
+  width: 35px;
+  height: 10px;
+  font-size: 7px;
+  font-weight: 600;
+  color: #adb8cc;
+  line-height: 10px;
+  margin-left: 3px;
+  display: inline;
+`;
+
+export const InputMessage = styled.textarea.attrs(props => ({
+  placeholder: props.placeholder,
+}))`
+  width: 232px;
+  height: auto;
+  min-height: 25px;
+  font-size: 10px;
+  font-weight: 500;
+  color: #425170;
+  line-height: 20px;
+  background-color: #f3f3f3;
+  border: 0.7px solid rgba(175, 175, 175, 1);
+  border-radius: 7px;
+  padding: 2px 7px;
+  resize: none;
+  overflow-y: hidden;
+  ::placeholder {
+    color: #9ca6ba;
+  }
+`;
+
+export const InputButton = styled.button`
+  width: 35px;
+  height: 18px;
+  font-size: 9px;
+  font-weight: 700;
+  color: #ffffff;
+  background-color: #111b47;
+  border-radius: 10px;
+  display: block;
+`;
+
+// AddTaskButtonStyle
+export const AddTaskButtonStyle = styled.div`
+  width: 311px;
+  height: auto;
+  min-height: 39px;
+  background-color: #ffffff;
+  border: 1px solid rgba(242, 244, 247, 1);
+  border-radius: 8px;
+  box-shadow: 0px 1px 3px 0px rgba(96, 108, 128, 0.05);
+  margin-top: 30px;
+  position: relative;
+`;
+
+export const AddTaskButtonBox = styled.div`
+  width: 311px;
+  height: 39px;
+  border-radius: 8px;
+  position: relative;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const AddTaskButtonImage = styled.div`
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+export const InputTaskBox = styled.div`
+  width: 311px;
+  height: auto;
+  border-top: 1px solid rgba(218, 222, 229, 1);
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  padding: 12px 0px 8px;
+  margin: 0 auto;
+`;
+
+export const InputTask = styled.textarea.attrs(props => ({
+  placeholder: props.placeholder,
+}))`
+  width: 272px;
+  height: auto;
+  min-height: 53px;
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #425170;
+  background-color: #f3f3f3;
+  border: 0.7px solid rgba(175, 175, 175, 1);
+  border-radius: 6px;
+  display: block;
+  padding: 5px 7px;
+  margin: 0 auto;
+  resize: none;
+  overflow-y: hidden;
+  ::placeholder {
+    color: #9ca6ba;
+  }
+`;
+
+export const ActionTaskText = styled(TaskText)`
+  width: 220px;
+`;
+
+export const ManagerStyle = styled.div`
+  width: 50px;
+  height: auto;
+  display: flex;
+  margin-top: 6px;
+  margin-left: 9px;
+`;
+
+export const ManagerText = styled.p`
+  width: 21px;
+  height: 28px;
+  font-size: 8px;
+  font-weight: 500;
+  color: #1a265c;
+  line-height: 28px;
+`;
+
+export const ManagerButton = styled.button`
+  width: 24px;
+  height: 24px;
+  font-size: 10px;
+  font-weight: 800;
+  color: #4d5e80;
+  line-height: 24px;
+  text-align: center;
+  background-color: #e4e4e4;
+  border-radius: 16px;
+  margin-left: 5px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const ReviseModalStyle = styled.div`
+  width: 672px;
+  height: auto;
+  min-height: 274px;
+  background-color: #ffffff;
+  border-radius: 30px;
+  padding: 36px 36px 24px;
+`;
+
+export const ReviseModalLine = styled.div`
+  width: 591px;
+  box-shadow: 0px -1px 0px rgba(181, 181, 181, 0.7) inset;
+`;
+
+export const ReviseModalTitle = styled.div`
+  width: 62px;
+  height: 38px;
+  font-size: 25px;
+  font-weight: 500;
+  color: #111b47;
+  line-height: 30px;
+  text-align: center;
+  border-bottom: 3px solid #111b47;
+`;
+
+export const ReviseModalInput = styled.textarea.attrs(props => ({
+  placeholder: props.placeholder,
+}))`
+  width: 573px;
+  height: auto;
+  min-height: 87px;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #425170;
+  background-color: #f3f3f3;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  display: block;
+  padding: 10px;
+  margin: 0 auto;
+  margin-top: 26px;
+  resize: none;
+  overflow-y: hidden;
+  ::placeholder {
+    color: #9ca6ba;
+  }
+`;
+
+export const ReviseModalButtonBox = styled.div`
+  display: flex;
+  margin-top: 34px;
+  margin-left: 359px;
+`;
+
+export const ReviseModalButton = styled.button`
+  width: 101px;
+  height: 30px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #888888;
+  line-height: 30px;
+  text-align: center;
+  background-color: #f1f1f1;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  margin-right: 30px;
+`;
diff --git a/src/styles/writeRetroStyles/Message.style.ts b/src/styles/writeRetroStyles/Message.style.ts
deleted file mode 100644
index 2157cf8..0000000
--- a/src/styles/writeRetroStyles/Message.style.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import styled from 'styled-components';
-
-export const MessageStyle = styled.div`
-  width: 289px;
-  height: auto;
-  min-height: 40px;
-  position: relative;
-  padding: 3px 3px 5px 3px;
-  margin: 5px 0px;
-`;
-
-export const MessageUserProfile = styled.div`
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  top: 6px;
-`;
-
-export const MessageUserName = styled.p`
-  width: 30px;
-  height: 15px;
-  font-size: 10px;
-  font-weight: 700;
-  color: #adb8cc;
-  position: absolute;
-  left: 30px;
-`;
-
-export const MessageDaysLeft = styled.span`
-  width: 50px;
-  height: 10px;
-  font-size: 6px;
-  font-weight: 700;
-  color: #dadee5;
-  position: absolute;
-  top: 6px;
-  left: 60px;
-`;
-
-export const ModifyingMessage = styled.div`
-  width: 38px;
-  height: 15px;
-  font-size: 8px;
-  font-weight: 500;
-  color: #adb8cc;
-  position: absolute;
-  top: 3px;
-  right: 10px;
-`;
-
-export const MessageText = styled.p`
-  width: 243px;
-  height: auto;
-  min-height: 20px;
-  font-size: 10px;
-  font-weight: 700;
-  color: #6b7a99;
-  margin-top: 15px;
-  margin-left: 27px;
-`;
diff --git a/src/styles/writeRetroStyles/ReviseLayout.style.ts b/src/styles/writeRetroStyles/ReviseLayout.style.ts
new file mode 100644
index 0000000..d4f2c66
--- /dev/null
+++ b/src/styles/writeRetroStyles/ReviseLayout.style.ts
@@ -0,0 +1,212 @@
+import styled from 'styled-components';
+
+export const TitleBox = styled.div`
+  width: auto;
+  height: auto;
+  position: absolute;
+  top: 95px;
+  left: 357px;
+`;
+
+export const TitleText = styled.p`
+  width: auto;
+  font-size: 40px;
+  font-weight: 700;
+  color: #434343;
+  margin-top: 3px;
+  margin-left: 27px;
+`;
+
+export const SettingMenuStyle = styled.div`
+  width: 1409px;
+  height: 61px;
+  box-shadow: 0px -2px 0px #a9a9a9 inset;
+  display: flex;
+  position: absolute;
+  top: 273px;
+  left: 389px;
+`;
+
+export const SettingMenuBox = styled.div<{ color: string }>`
+  width: 129px;
+  height: 61px;
+  font-size: 28px;
+  font-weight: 500;
+  color: ${props => props.color};
+  text-align: center;
+  /* border-bottom: 4px solid ${props => props.color}; */
+  margin-right: 10px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const SettingStyle = styled.div`
+  width: 422px;
+  height: auto;
+  position: relative;
+  margin: 0 auto;
+  margin-top: 153px;
+`;
+
+export const SettingImage = styled.div`
+  width: 422px;
+  height: 260px;
+  border: 5px solid #e0e0e0;
+`;
+
+export const SettingImageButtonBox = styled.div`
+  width: 422px;
+  height: auto;
+  display: flex;
+  margin-top: 23px;
+`;
+
+export const SettingImageButton = styled.button`
+  width: 187px;
+  height: 33px;
+  background-color: #ffffff;
+  border: 1px solid #9b9b9b;
+  border-radius: 5px;
+  margin: 0px 12px;
+  position: relative;
+`;
+
+export const SettingImageButtonText = styled.p`
+  font-size: 15px;
+  font-weight: 500;
+  color: #8d8d8d;
+  line-height: 33px;
+`;
+
+export const ReviseBox = styled.div`
+  width: 422px;
+  height: 66px;
+  margin-top: 20px;
+`;
+
+export const ReviseTitle = styled.div`
+  font-size: 10px;
+  font-weight: 500;
+  color: #3c3c3c;
+  line-height: 20px;
+  margin-right: 10px;
+`;
+
+export const UnableChange = styled.p`
+  width: 55px;
+  height: 18px;
+  font-size: 7px;
+  font-weight: 500;
+  color: #f93333;
+  line-height: 20px;
+`;
+
+export const ReviseInput = styled.input`
+  width: 422px;
+  height: 33px;
+  font-size: 10px;
+  font-weight: 400;
+  color: #0e0e0e;
+  background-color: #ffffff;
+  border: 1px solid #9b9b9b;
+  border-radius: 5px;
+  padding: 0px 10px;
+  margin-top: 13px;
+  position: relative;
+`;
+
+export const UnableChangeInput = styled(ReviseInput)`
+  background-color: #d9d9d933;
+`;
+
+export const ReviseLeaderStyle = styled.div`
+  width: 422px;
+  height: 33px;
+  font-size: 10px;
+  font-weight: 400;
+  color: #0e0e0e;
+  background-color: #ffffff;
+  border: 1px solid #9b9b9b;
+  border-radius: 5px;
+  display: flex;
+  padding: 0px 10px;
+  margin-top: 13px;
+  position: relative;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const ReviseLeaderInput = styled(ReviseInput)`
+  width: 300px;
+  height: 30px;
+  border: none;
+  margin-top: 0px;
+  margin-right: 5px;
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const UnlinedInput = styled(ReviseInput)`
+  width: 390px;
+  border: none;
+  margin-right: 10px;
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const ReviseBottomTitle = styled.p`
+  width: 422px;
+  height: 25px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #111b47;
+  box-shadow: 0px -2px 0px #111b47 inset;
+`;
+
+export const ReviseBottomText = styled.p`
+  font-size: 9px;
+  font-weight: 400;
+  color: #636363;
+`;
+
+export const ReviseDeleteText = styled(ReviseBottomText)`
+  font-size: 11px;
+`;
+
+export const ReviseDeleteButton = styled.button`
+  width: 97px;
+  height: 26px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #111b47;
+  line-height: 26px;
+  text-align: center;
+  border: 1.3px solid #ff4646;
+  border-radius: 10px;
+  position: absolute;
+  left: 280px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const ReviseButtonStyle = styled.button`
+  width: 97px;
+  height: 26px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #111b47cc;
+  line-height: 26px;
+  text-align: center;
+  border: 1.3px solid #c3cad9;
+  border-radius: 10px;
+  margin-left: 10px;
+  margin-bottom: 30px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
diff --git a/src/styles/writeRetroStyles/SaveButton.style.ts b/src/styles/writeRetroStyles/SaveButton.style.ts
deleted file mode 100644
index 842ed63..0000000
--- a/src/styles/writeRetroStyles/SaveButton.style.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-export const SaveButtonStyle = styled.button`
-  width: 107px;
-  height: 31px;
-  border-radius: 5px;
-  border: 0.2px solid rgba(17, 27, 71, 1);
-  background-color: #ebeef2;
-  font-size: 15px;
-  font-weight: 500;
-  color: #979797;
-  position: absolute;
-  top: 134px;
-  left: 1602px;
-`;
diff --git a/src/styles/writeRetroStyles/SubTask.style.ts b/src/styles/writeRetroStyles/SubTask.style.ts
deleted file mode 100644
index 8f19b9d..0000000
--- a/src/styles/writeRetroStyles/SubTask.style.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import styled from 'styled-components';
-
-export const SubTaskStyle = styled.div`
-  width: auto;
-  height: 20px;
-  position: relative;
-  display: flex;
-  margin-left: 15px;
-`;
-
-export const SubTaskIconBox = styled.div`
-  width: 20px;
-  height: 20px;
-  position: relative;
-`;
-
-export const SubTaskIcon = styled.div`
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
-
-export const TaskSubCount = styled.p`
-  width: auto;
-  height: 20px;
-  font-size: 10px;
-  font-weight: 700;
-  color: #6b7a99;
-  margin-left: 7px;
-  line-height: 20px;
-`;
diff --git a/src/styles/writeRetroStyles/Subtitle.style.ts b/src/styles/writeRetroStyles/Subtitle.style.ts
deleted file mode 100644
index 5b61300..0000000
--- a/src/styles/writeRetroStyles/Subtitle.style.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-export const SubTitleStyle = styled.div`
-  width: auto;
-  height: 18px;
-  font-size: 20px;
-  font-weight: 600;
-  color: #8d8d8d;
-  line-height: 20px;
-  position: absolute;
-  top: 180px;
-  left: 356px;
-`;
diff --git a/src/styles/writeRetroStyles/Task.style.ts b/src/styles/writeRetroStyles/Task.style.ts
deleted file mode 100644
index d423510..0000000
--- a/src/styles/writeRetroStyles/Task.style.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import styled from 'styled-components';
-
-export const TaskStyle = styled.div`
-  width: 313px;
-  height: auto;
-  border-radius: 5px;
-  background-color: #ffffff;
-  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
-  margin-bottom: 20px;
-`;
-
-export const TaskMainStyle = styled.div`
-  width: 313px;
-  height: auto;
-  min-height: 110px;
-  padding-top: 1px;
-  position: relative;
-`;
-
-export const TaskTop = styled.div`
-  width: 313px;
-  height: 20px;
-  position: relative;
-  padding: 0px 15px;
-  margin-top: 15px;
-  display: flex;
-`;
-
-export const TaskUserProfile = styled.div`
-  width: 20px;
-  height: 20px;
-`;
-
-export const TaskUserNameStyle = styled.span`
-  font-size: 10px;
-  font-weight: 700;
-  color: #adb8cc;
-  margin-top: 2px;
-  margin-left: 10px;
-`;
-
-export const TaskTitleStyle = styled.p`
-  width: 313px;
-  height: auto;
-  font-size: 12px;
-  font-weight: 700;
-  color: #6b7a99;
-  position: relative;
-  padding: 0px 15px;
-  margin-top: 5px;
-`;
-
-export const SubTaskBox = styled.div`
-  width: 313px;
-  height: 20px;
-  position: relative;
-  display: flex;
-  margin-top: 15px;
-`;
-
-export const TaskMessageBox = styled.div`
-  width: 313px;
-  height: auto;
-`;
diff --git a/src/styles/writeRetroStyles/TaskMessage.style.ts b/src/styles/writeRetroStyles/TaskMessage.style.ts
deleted file mode 100644
index d7dceef..0000000
--- a/src/styles/writeRetroStyles/TaskMessage.style.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-
-export const TaskMessageStyle = styled.div`
-  width: 313px;
-  height: auto;
-  min-height: 80px;
-  background-color: #ffffff;
-  padding: 2px 6px 6px 6px;
-  position: relative;
-`;
-
-export const AnnounceMessageCount = styled.p`
-  font-size: 8px;
-  font-weight: 700;
-  color: #dadee5;
-  width: 57px;
-  height: 13px;
-  text-align: center;
-`;
-
-export const MessageLine = styled.div`
-  width: 222.74px;
-  position: absolute;
-  top: 7.5px;
-  left: 63.76px;
-  border-top: 1px solid #dadee5;
-`;
-
-export const MessageBox = styled.div`
-  width: 301px;
-  height: auto;
-  padding: 6px;
-`;
diff --git a/src/styles/writeRetroStyles/Title.style.ts b/src/styles/writeRetroStyles/Title.style.ts
deleted file mode 100644
index 4869a32..0000000
--- a/src/styles/writeRetroStyles/Title.style.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-
-export const TitleStyle = styled.div`
-  width: 396px;
-  height: 73px;
-  display: flex;
-  position: absolute;
-  top: 107px;
-  left: 349px;
-`;
-
-export const TitleImageStyle = styled.div`
-  width: 73px;
-  height: 73px;
-`;
-
-export const TitleTextStyle = styled.span`
-  font-size: 40px;
-  font-weight: 700;
-  color: #434343;
-  margin: auto 5px;
-`;