diff --git a/src/AppRouter.js b/src/AppRouter.js
index 4c52a07..1f8dbef 100644
--- a/src/AppRouter.js
+++ b/src/AppRouter.js
@@ -1,7 +1,16 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { Login, Main, Save, Vote, MyPage, SaveRecord } from 'pages';
+import {
+  Login,
+  Main,
+  Save,
+  Vote,
+  VoteComplete,
+  MyPage,
+  SaveRecord,
+  SaveComplete,
+} from 'pages';
 
 function AppRouter() {
   return (
@@ -14,7 +23,9 @@ function AppRouter() {
         {/* 추후 로그인 여부 확인 로직 필요 */}
 
         <Route path="/save" element={<Save />} />
+        <Route path="/complete" element={<SaveComplete />} />
         <Route path="/vote" element={<Vote />} />
+        <Route path="/votecomplete" element={<VoteComplete />} />
         <Route path="/mypage" element={<MyPage />} />
         <Route path="/mypage/save/:date" element={<SaveRecord />} />
         <Route path="/" element={<Main />} />
diff --git a/src/pages/Save/SaveComplete/index.js b/src/pages/Save/SaveComplete/index.js
new file mode 100644
index 0000000..88839fe
--- /dev/null
+++ b/src/pages/Save/SaveComplete/index.js
@@ -0,0 +1,33 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import { SaveBear, WhiteClose } from 'assets';
+import {
+  StyledRoot,
+  MainText,
+  ImgBox,
+  HomeButton,
+  Text,
+  ExitButton,
+  ButtonBox,
+} from './style';
+
+function SaveComplete() {
+  return (
+    <StyledRoot>
+      <ButtonBox>
+        <button type="button">
+          <ExitButton src={WhiteClose} alt="창 닫기 버튼" />
+        </button>
+      </ButtonBox>
+      <MainText>날씨 기록이 저장되었어요</MainText>
+      <ImgBox>
+        <img src={SaveBear} alt="저장하는 곰돌이 이미지" />
+      </ImgBox>
+      <HomeButton>
+        <Text>홈으로 돌아가기</Text>
+      </HomeButton>
+    </StyledRoot>
+  );
+}
+
+export default SaveComplete;
diff --git a/src/pages/Save/SaveComplete/style.js b/src/pages/Save/SaveComplete/style.js
new file mode 100644
index 0000000..d89f170
--- /dev/null
+++ b/src/pages/Save/SaveComplete/style.js
@@ -0,0 +1,103 @@
+/* eslint-disable import/no-unresolved */
+import styled from 'styled-components';
+import { applyMediaQuery } from 'styles/mediaQuery';
+
+const StyledRoot = styled.div`
+  width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: ${({ theme: { color } }) => color.greenDarker};
+`;
+
+const ButtonBox = styled.div`
+  ${applyMediaQuery('mobile')} {
+    button {
+      margin-bottom: 3rem;
+      margin-left: 37rem;
+    }
+  }
+`;
+
+const ExitButton = styled.img`
+  ${applyMediaQuery('desktop')} {
+    display: none;
+  }
+
+  ${applyMediaQuery('mobile')} {
+    width: 3rem;
+    height: 3rem;
+  }
+`;
+
+const MainText = styled.p`
+  font-family: 'Cafe24Ssurround';
+  font-size: ${({ theme: { font } }) => font.size.large};
+  color: ${({ theme: { color } }) => color.white};
+  /* margin-top: 7rem; */
+  margin-bottom: 5rem;
+
+  ${applyMediaQuery('mobile')} {
+    font-size: ${({ theme: { font } }) => font.size.semiLarge};
+    margin-bottom: 4rem;
+  }
+`;
+
+const ImgBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40rem;
+  height: 40rem;
+  background-color: ${({ theme: { color } }) => color.white};
+  border-radius: 0.6rem;
+  margin: 0rem;
+
+  img {
+    width: 92%;
+    height: 92%;
+  }
+
+  ${applyMediaQuery('mobile')} {
+    width: 40rem;
+    height: 40rem;
+  }
+`;
+
+const HomeButton = styled.button`
+  width: 20rem;
+  height: 5rem;
+  margin-top: 5rem;
+  border-radius: 0.6rem;
+  background-color: ${({ theme: { color } }) => color.white};
+
+  ${applyMediaQuery('mobile')} {
+    margin-top: 3rem;
+    width: 40rem;
+    height: 5rem;
+  }
+`;
+
+const Text = styled.p`
+  font-family: 'Cafe24Ssurround';
+  font-size: ${({ theme: { font } }) => font.size.small};
+  color: ${({ theme: { color } }) => color.greenDarker};
+
+  ${applyMediaQuery('mobile')} {
+    font-family: 'Noto';
+    font-size: ${({ theme: { font } }) => font.size.small};
+    font-weight: ${({ theme: { font } }) => font.weight.bold};
+  }
+`;
+
+export {
+  StyledRoot,
+  ButtonBox,
+  ExitButton,
+  MainText,
+  ImgBox,
+  HomeButton,
+  Text,
+};
diff --git a/src/pages/Vote/VoteComplete/index.js b/src/pages/Vote/VoteComplete/index.js
new file mode 100644
index 0000000..ed7c2f7
--- /dev/null
+++ b/src/pages/Vote/VoteComplete/index.js
@@ -0,0 +1,28 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import {
+  StyledRoot,
+  MainText,
+  ContentBox,
+  Clothes,
+  Place,
+  HomeButton,
+  Text,
+} from './style';
+
+function VoteComplete() {
+  return (
+    <StyledRoot>
+      <MainText>투표가 등록되었어요</MainText>
+      <ContentBox>
+        <Clothes>오늘 주경바막</Clothes>
+        <Place>조형예술관에서 허, 불허?</Place>
+      </ContentBox>
+      <HomeButton>
+        <Text>홈으로 돌아가기</Text>
+      </HomeButton>
+    </StyledRoot>
+  );
+}
+
+export default VoteComplete;
diff --git a/src/pages/Vote/VoteComplete/style.js b/src/pages/Vote/VoteComplete/style.js
new file mode 100644
index 0000000..682236d
--- /dev/null
+++ b/src/pages/Vote/VoteComplete/style.js
@@ -0,0 +1,86 @@
+/* eslint-disable import/no-unresolved */
+import styled from 'styled-components';
+import { applyMediaQuery } from 'styles/mediaQuery';
+
+const StyledRoot = styled.div`
+  width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: ${({ theme: { color } }) => color.greenDarker};
+`;
+
+const MainText = styled.p`
+  font-family: 'Cafe24Ssurround';
+  font-size: ${({ theme: { font } }) => font.size.semiLarge};
+  color: ${({ theme: { color } }) => color.white};
+  margin-bottom: 10.2rem;
+`;
+
+const ContentBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 56rem;
+  height: 20rem;
+  border-radius: 0.6rem;
+  background-color: ${({ theme: { color } }) => color.greenLighter};
+
+  ${applyMediaQuery('mobile')} {
+    width: 40rem;
+    height: 15rem;
+  }
+`;
+
+const Clothes = styled.p`
+  font-family: 'Noto';
+  font-size: ${({ theme: { font } }) => font.size.semiMedium};
+  color: ${({ theme: { color } }) => color.greenDarker};
+  margin-bottom: 2rem;
+
+  ${applyMediaQuery('mobile')} {
+    font-size: ${({ theme: { font } }) => font.size.regular};
+    margin-bottom: 1rem;
+  }
+`;
+
+const Place = styled.p`
+  font-family: 'Noto';
+  font-size: ${({ theme: { font } }) => font.size.semiMedium};
+  color: ${({ theme: { color } }) => color.greenDarker};
+
+  ${applyMediaQuery('mobile')} {
+    font-size: ${({ theme: { font } }) => font.size.regular};
+  }
+`;
+
+const HomeButton = styled.button`
+  width: 20rem;
+  height: 5rem;
+  margin-top: 13.5rem;
+  border-radius: 0.6rem;
+  background-color: ${({ theme: { color } }) => color.white};
+
+  ${applyMediaQuery('mobile')} {
+    margin-top: 3rem;
+    width: 40rem;
+    height: 5rem;
+  }
+`;
+
+const Text = styled.p`
+  font-family: 'Cafe24Ssurround';
+  font-size: ${({ theme: { font } }) => font.size.small};
+  color: ${({ theme: { color } }) => color.greenDarker};
+
+  ${applyMediaQuery('mobile')} {
+    font-family: 'Noto';
+    font-size: ${({ theme: { font } }) => font.size.small};
+    font-weight: ${({ theme: { font } }) => font.weight.bold};
+  }
+`;
+
+export { StyledRoot, MainText, ContentBox, Clothes, Place, HomeButton, Text };
diff --git a/src/pages/Vote/index.js b/src/pages/Vote/index.js
index 9de99e3..06ba7a5 100644
--- a/src/pages/Vote/index.js
+++ b/src/pages/Vote/index.js
@@ -1,13 +1,74 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react';
-import { RecSun } from 'assets';
-import { StyledRoot, Text } from './style';
+import { useNavigate } from 'react-router-dom';
+import { WhiteLeft } from 'assets';
+import { HeaderIcon, PublicButton } from 'components';
+import {
+  StyledRoot,
+  HeaderIconBox,
+  Text,
+  BackButton,
+  BackButtonBox,
+  SubText,
+  MainText,
+  ContentBox,
+  FormBox,
+  SubjectText,
+  Form,
+  ButtonBox,
+} from './style';
 
 function Vote() {
+  const navigate = useNavigate();
   return (
     <StyledRoot>
-      <Text>Vote</Text>
-      <img src={RecSun} alt="RecSunny" />
+      <HeaderIconBox>
+        <HeaderIcon />
+      </HeaderIconBox>
+      <BackButtonBox>
+        <button
+          className="backbutton"
+          type="button"
+          onClick={() => {
+            navigate(-1);
+          }}
+        >
+          <BackButton src={WhiteLeft} alt="BackButton" />
+        </button>
+      </BackButtonBox>
+      <Text>
+        <SubText>오늘 옷차림이 고민될 땐,</SubText>
+        <MainText>벗들에게 물어봐!</MainText>
+      </Text>
+      <ContentBox>
+        <FormBox>
+          <SubjectText>
+            오늘 이 옷<span>*</span>
+          </SubjectText>
+          <Form>
+            <input
+              type="text"
+              name="clothes"
+              placeholder="입고싶은 옷을 적어주세요"
+              required="required"
+            />
+          </Form>
+        </FormBox>
+        <FormBox>
+          <SubjectText>어디에서</SubjectText>
+          <Form>
+            <input
+              type="text"
+              name="place"
+              placeholder="옷을 입고 갈 장소를 적어주세요"
+            />
+          </Form>
+        </FormBox>
+        <SubjectText>허, 불허?</SubjectText>
+      </ContentBox>
+      <ButtonBox>
+        <PublicButton text="투표 만들기" />
+      </ButtonBox>
     </StyledRoot>
   );
 }
diff --git a/src/pages/Vote/style.js b/src/pages/Vote/style.js
index 8707014..e46418d 100644
--- a/src/pages/Vote/style.js
+++ b/src/pages/Vote/style.js
@@ -4,16 +4,150 @@ import { applyMediaQuery } from 'styles/mediaQuery';
 
 const StyledRoot = styled.div`
   padding: 5rem;
+  width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(
+    to top,
+    ${({ theme: { color } }) => color.white} 70%,
+    ${({ theme: { color } }) => color.greenDarker} 30%
+  );
+`;
+
+const HeaderIconBox = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  ${applyMediaQuery('mobile')} {
+    display: none;
+  }
+`;
+
+const BackButtonBox = styled.div`
+  .backbutton {
+    display: none;
+  }
+
+  ${applyMediaQuery('mobile')} {
+    .backbutton {
+      display: flex;
+      position: absolute;
+      left: 10vw;
+      top: 10vw;
+    }
+  }
+`;
+
+const BackButton = styled.img`
+  width: 3rem;
+  height: 3rem;
 `;
 
 const Text = styled.p`
-  color: ${({ theme: { color } }) => color.red};
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 9rem;
+
+  ${applyMediaQuery('mobile')} {
+    top: 0;
+    padding-top: 11.7rem;
+    position: fixed;
+  }
+`;
+
+const SubText = styled.p`
   font-family: 'Noto Sans';
-  font-size: ${({ theme: { font } }) => font.size.large};
-  font-weight: ${({ theme: { font } }) => font.weight.light};
+  font-size: ${({ theme: { font } }) => font.size.semiSmall};
+  color: ${({ theme: { color } }) => color.white};
+  padding-bottom: 3rem;
+`;
+
+const MainText = styled.p`
+  font-family: 'Cafe24Ssurround';
+  font-size: ${({ theme: { font } }) => font.size.semiLarge};
+  color: ${({ theme: { color } }) => color.white};
+`;
+
+const ContentBox = styled.div`
+  margin-top: 4rem;
+  margin-bottom: 3rem;
+
+  ${applyMediaQuery('mobile')} {
+    margin-top: 20rem;
+  }
+`;
+
+const FormBox = styled.div`
+  margin-bottom: 4rem;
+`;
+
+const SubjectText = styled.p`
+  display: flex;
+  font-family: 'Cafe24Ssurround';
+  font-size: ${({ theme: { font } }) => font.size.regular};
+  color: ${({ theme: { color } }) => color.greenDarker};
+  margin-bottom: 2.7rem;
+
+  span {
+    display: none;
+  }
+
   ${applyMediaQuery('mobile')} {
-    color: ${({ theme: { color } }) => color.greenDarkest};
+    span {
+      display: block;
+      padding-left: 0.7rem;
+      font-family: 'Cafe24SsurroundAir';
+      color: ${({ theme: { color } }) => color.red};
+    }
   }
 `;
 
-export { StyledRoot, Text };
+const Form = styled.form`
+  input {
+    width: 50rem;
+    height: 5rem;
+    outline: none;
+    border: none;
+    border-bottom: 2px solid ${({ theme: { color } }) => color.greenDarker};
+  }
+
+  input::placeholder {
+    font-family: 'Noto';
+    font-weight: ${({ theme: font }) => font.light};
+    color: ${({ theme: { color } }) => color.grey};
+  }
+
+  ${applyMediaQuery('mobile')} {
+    input {
+      width: 43rem;
+    }
+  }
+`;
+
+const ButtonBox = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 3rem;
+`;
+
+export {
+  StyledRoot,
+  HeaderIconBox,
+  Text,
+  BackButton,
+  BackButtonBox,
+  SubText,
+  MainText,
+  ContentBox,
+  FormBox,
+  SubjectText,
+  Form,
+  ButtonBox,
+};
diff --git a/src/pages/index.js b/src/pages/index.js
index c550721..d8fc252 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,5 +2,7 @@ export { default as Login } from './Login';
 export { default as Main } from './Main';
 export { default as MyPage } from './MyPage';
 export { default as Save } from './Save';
+export { default as SaveComplete } from './Save/SaveComplete';
 export { default as Vote } from './Vote';
+export { default as VoteComplete } from './Vote/VoteComplete';
 export { default as SaveRecord } from './SaveRecord';