diff --git a/src/App.tsx b/src/App.tsx
index a6c09da..162f05f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { SafeAreaView, StyleSheet } from "react-native";
+import { Button, SafeAreaView, StyleSheet, Text, View } from "react-native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
 import Home from "./screens/Home";
@@ -9,31 +9,63 @@ import Feedback from "./screens/Feedback";
 import History from "./screens/History";
 import { NavigationContainer } from "@react-navigation/native";
 import { StatusBar } from "expo-status-bar";
-import styled from "styled-components/native";
+import styled, { ThemeProvider } from "styled-components/native";
+import Vote from "./screens/Vote";
+import { theme } from "./styled";
 
 const SafeAreaViewContainer = styled(SafeAreaView)`
   flex: 1;
 `;
 
-const Stack = createNativeStackNavigator();
+export type RootStackParamList = {
+  Home: undefined;
+  Matching: undefined;
+  Chat: undefined;
+  Vote: undefined;
+  Feedback: undefined;
+  History: undefined;
+};
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
 
 export default function App() {
   return (
-    <SafeAreaViewContainer>
-      <NavigationContainer>
-        <StatusBar style="dark" />
-        <Stack.Navigator
-          screenOptions={{
-            headerShown: false,
-          }}
-        >
-          <Stack.Screen name="Home" component={Home} />
-          <Stack.Screen name="Matching" component={Matching} />
-          <Stack.Screen name="Chat" component={Chat} />
-          <Stack.Screen name="Feedback" component={Feedback} />
-          <Stack.Screen name="History" component={History} />
-        </Stack.Navigator>
-      </NavigationContainer>
-    </SafeAreaViewContainer>
+    <ThemeProvider theme={theme}>
+      <SafeAreaViewContainer>
+        <NavigationContainer>
+          <StatusBar style="dark" />
+          <Stack.Navigator
+            screenOptions={{
+              headerShown: false,
+            }}
+          >
+            <Stack.Screen name="Home" component={Home} />
+            <Stack.Screen name="Matching" component={Matching} />
+            <Stack.Screen
+              name="Chat"
+              component={Chat}
+              options={{
+                headerShown: true,
+                headerBackVisible: false,
+                headerBackTitleVisible: false,
+                title: "", // TODO: Chat Header Hide하는 방법찾기
+              }}
+            />
+            <Stack.Screen
+              name="Vote"
+              component={Vote}
+              options={{
+                headerShown: true,
+                headerBackVisible: false,
+                headerBackTitleVisible: false,
+                title: "", // TODO: Chat Header Hide하는 방법찾기
+              }}
+            />
+            <Stack.Screen name="Feedback" component={Feedback} />
+            <Stack.Screen name="History" component={History} />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </SafeAreaViewContainer>
+    </ThemeProvider>
   );
 }
diff --git a/src/components/ProfileImage.tsx b/src/components/ProfileImage.tsx
new file mode 100644
index 0000000..ced1bee
--- /dev/null
+++ b/src/components/ProfileImage.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { ImageSourcePropType } from "react-native";
+import styled from "styled-components/native";
+
+type ProfileImageSize = "sm" | "md" | "lg";
+
+const SizeMap: { [k in ProfileImageSize]: number } = {
+  sm: 50,
+  md: 100,
+  lg: 150,
+};
+
+type ContainerProps = {
+  size: ProfileImageSize;
+};
+
+const Container = styled.View<ContainerProps>`
+  width: ${(props) => SizeMap[props.size] + "px"};
+  height: ${(props) => SizeMap[props.size] + "px"};
+  border-radius: ${(props) => SizeMap[props.size] / 2 + "px"};
+  overflow: hidden;
+`;
+
+const Image = styled.Image<ContainerProps>`
+  width: ${(props) => SizeMap[props.size] + "px"};
+  height: ${(props) => SizeMap[props.size] + "px"};
+`;
+
+interface Props {
+  size: ProfileImageSize;
+  image: ImageSourcePropType;
+}
+
+const ProfileImage: React.FC<Props> = ({ size = "sm", image }) => {
+  return (
+    <Container size={size}>
+      <Image size={size} source={image} />
+    </Container>
+  );
+};
+
+export default ProfileImage;
diff --git a/src/constants/color.ts b/src/constants/color.ts
index 6792fdc..afde0ec 100644
--- a/src/constants/color.ts
+++ b/src/constants/color.ts
@@ -1,16 +1,16 @@
 enum Color {
-    PVBlue = "#5988FF",
-    PVSkyblue = "#31BDFF",
-    PVRed = "#EF5D5D",
-    PVYellow = "#FCDE41",
-    PVGreen = "#00AD78",
-    PVBlack01 = "#303134",
-    PVBlack02 = "#6E7081",
-    PVBlack03 = "#AFB1C3",
-    PVBlack04 = "#CBCBD8",
-    PVBlack05 = "#E7E8F0",
-    PVBlack06 = "#F6F6F9",
-    White = "white"
+  PVBlue = "#5988FF",
+  PVSkyblue = "#31BDFF",
+  PVRed = "#EF5D5D",
+  PVYellow = "#FCDE41",
+  PVGreen = "#00AD78",
+  PVBlack01 = "#303134",
+  PVBlack02 = "#6E7081",
+  PVBlack03 = "#AFB1C3",
+  PVBlack04 = "#CBCBD8",
+  PVBlack05 = "#E7E8F0",
+  PVBlack06 = "#F6F6F9",
+  White = "white",
 }
 
-export { Color }
+export { Color };
diff --git a/src/img/mute.png b/src/img/mute.png
new file mode 100644
index 0000000..615c1ce
Binary files /dev/null and b/src/img/mute.png differ
diff --git a/src/img/smile_1.png b/src/img/smile_1.png
new file mode 100644
index 0000000..3aefeb5
Binary files /dev/null and b/src/img/smile_1.png differ
diff --git a/src/img/unmute.png b/src/img/unmute.png
new file mode 100644
index 0000000..593ffa2
Binary files /dev/null and b/src/img/unmute.png differ
diff --git a/src/screens/Chat.tsx b/src/screens/Chat.tsx
deleted file mode 100644
index 670328f..0000000
--- a/src/screens/Chat.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import { Button, View, Text } from "react-native";
-
-const Chat = ({ navigation }) => {
-  return (
-    <View>
-      <Text>Chat</Text>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
-    </View>
-  );
-};
-
-export default Chat;
diff --git a/src/screens/Chat/Chat.tsx b/src/screens/Chat/Chat.tsx
new file mode 100644
index 0000000..d549d55
--- /dev/null
+++ b/src/screens/Chat/Chat.tsx
@@ -0,0 +1,56 @@
+import { BottomSection, Container, MiddleSection, TopSection } from "./style";
+import React, { useEffect, useState } from "react";
+
+import { Button } from "react-native";
+import ChatUserCardList from "./ChatUserCardList";
+import { NativeStackScreenProps } from "@react-navigation/native-stack";
+import { RootStackParamList } from "../../App";
+import TimerHeader from "./TimerHeader";
+import TooltipFooter from "./TooltipFooter";
+
+const CHAT_DURATION_SECONDS = 60 * 5;
+const CHAT_DURATION_MILLISECONDS = CHAT_DURATION_SECONDS * 1000;
+
+const Chat: React.FC<NativeStackScreenProps<RootStackParamList, "Chat">> = ({
+  navigation,
+}) => {
+  const [remainSec, setRemainSec] = useState<number>(CHAT_DURATION_SECONDS);
+
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <Button onPress={() => navigation.goBack()} title="방 나가기" />
+      ),
+    });
+  }, [navigation]);
+
+  useEffect(() => {
+    const endTime = new Date().getTime() + CHAT_DURATION_MILLISECONDS;
+    let id: NodeJS.Timer;
+    id = setInterval(() => {
+      const ms = endTime - new Date().getTime();
+      const remain = Math.round(ms / 1000);
+      setRemainSec(remain);
+      if (remain <= 0) clearInterval(id);
+    }, 1000);
+    return () => {
+      clearInterval(id);
+    };
+  }, []);
+
+  return (
+    <Container>
+      <TopSection>
+        <TimerHeader remainSeconds={remainSec} />
+      </TopSection>
+      <MiddleSection>
+        <ChatUserCardList />
+      </MiddleSection>
+      <BottomSection>
+        <TooltipFooter />
+      </BottomSection>
+    </Container>
+  );
+};
+
+export default Chat;
diff --git a/src/screens/Chat/ChatUserCard/ChatUserCard.tsx b/src/screens/Chat/ChatUserCard/ChatUserCard.tsx
new file mode 100644
index 0000000..b7a7da4
--- /dev/null
+++ b/src/screens/Chat/ChatUserCard/ChatUserCard.tsx
@@ -0,0 +1,33 @@
+import { Container, UserNameText, VoiceOnMark } from "./style";
+import React, { useState } from "react";
+import { muteIcon, smileProfileImage, unmuteIcon } from "../../../utils/images";
+
+import EmotionBox from "./EmotionBox";
+import { Image } from "react-native";
+import ProfileImage from "../../../components/ProfileImage";
+
+interface Props {
+  voiceOn?: boolean;
+}
+
+const ChatUserCard: React.FC<Props> = ({ voiceOn = false }) => {
+  const [isShownEmotionBox, setIsShownEmotionBox] = useState<boolean>(false);
+  const handleClick = () => {
+    setIsShownEmotionBox((prev) => !prev);
+  };
+  const closeEmotionBox = () => {
+    setIsShownEmotionBox(false);
+  };
+  return (
+    <Container selected={voiceOn} onPress={() => handleClick()}>
+      <ProfileImage size="md" image={smileProfileImage} />
+      <UserNameText>안녕하세요.</UserNameText>
+      <VoiceOnMark>
+        <Image source={voiceOn ? unmuteIcon : muteIcon} />
+      </VoiceOnMark>
+      {isShownEmotionBox && <EmotionBox onClose={() => closeEmotionBox()} />}
+    </Container>
+  );
+};
+
+export default ChatUserCard;
diff --git a/src/screens/Chat/ChatUserCard/EmotionBox/index.tsx b/src/screens/Chat/ChatUserCard/EmotionBox/index.tsx
new file mode 100644
index 0000000..2a48399
--- /dev/null
+++ b/src/screens/Chat/ChatUserCard/EmotionBox/index.tsx
@@ -0,0 +1,105 @@
+import React, { VoidFunctionComponent } from "react";
+import styled from "styled-components/native";
+
+const Container = styled.View`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 150px;
+  height: 150px;
+  border-radius: 75px;
+  overflow: hidden;
+  transform: translate(-75px, -75px);
+  flex-direction: row;
+  flex-wrap: wrap;
+  background-color: white;
+`;
+
+const EmotionButton = styled.TouchableOpacity`
+  width: 75px;
+  height: 75px;
+  justify-content: center;
+  align-items: center;
+`;
+const LeftTopButton = styled(EmotionButton)`
+  background-color: #f2f3fa;
+`;
+
+const RightTopButton = styled(EmotionButton)`
+  background-color: white;
+`;
+
+const LeftBottomButton = styled(EmotionButton)`
+  background-color: white;
+`;
+
+const RightBottomButton = styled(EmotionButton)`
+  background-color: #f2f3fa;
+`;
+
+const EmotionText = styled.Text`
+  font-size: 30px;
+`;
+
+const CircleHole = styled.View`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  transform: translate(-25px, -25px);
+  background-color: #f6f6f6;
+`;
+
+interface Props {
+  onClose(): void;
+}
+
+const EmotionBox: React.FC<Props> = ({ onClose }) => {
+  return (
+    <Container
+      style={{
+        shadowColor: "#000",
+        shadowOffset: {
+          width: 0,
+          height: 2,
+        },
+        shadowOpacity: 0.23,
+        shadowRadius: 2.62,
+        elevation: 4,
+      }}
+    >
+      <LeftTopButton
+        onPress={() => {
+          onClose();
+        }}
+      >
+        <EmotionText>👀</EmotionText>
+      </LeftTopButton>
+      <RightTopButton
+        onPress={() => {
+          onClose();
+        }}
+      >
+        <EmotionText>👍</EmotionText>
+      </RightTopButton>
+      <LeftBottomButton
+        onPress={() => {
+          onClose();
+        }}
+      >
+        <EmotionText>🔥</EmotionText>
+      </LeftBottomButton>
+      <RightBottomButton
+        onPress={() => {
+          onClose();
+        }}
+      >
+        <EmotionText>💩</EmotionText>
+      </RightBottomButton>
+      <CircleHole />
+    </Container>
+  );
+};
+export default EmotionBox;
diff --git a/src/screens/Chat/ChatUserCard/index.tsx b/src/screens/Chat/ChatUserCard/index.tsx
new file mode 100644
index 0000000..1a2b210
--- /dev/null
+++ b/src/screens/Chat/ChatUserCard/index.tsx
@@ -0,0 +1 @@
+export { default } from "./ChatUserCard";
diff --git a/src/screens/Chat/ChatUserCard/style.tsx b/src/screens/Chat/ChatUserCard/style.tsx
new file mode 100644
index 0000000..415a50f
--- /dev/null
+++ b/src/screens/Chat/ChatUserCard/style.tsx
@@ -0,0 +1,35 @@
+import styled from "styled-components/native";
+interface ContainerProps {
+  selected: boolean;
+}
+
+export const Container = styled.TouchableOpacity<ContainerProps>`
+  width: 45%;
+  margin: 2.5%;
+  height: 45%;
+  border-radius: 20px;
+  border-width: 5px;
+  background-color: #f6f6f6;
+  border-color: ${({ selected }) => (selected ? "#5073cd" : "#f6f6f6")};
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const UserNameText = styled.Text`
+  margin-top: 20px;
+  font-size: 20px;
+  font-weight: 500;
+`;
+
+export const VoiceOnMark = styled.View`
+  right: 5px;
+  top: 5px;
+  width: 26px;
+  height: 26px;
+  border-radius: 13px;
+  background-color: white;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/screens/Chat/ChatUserCardList/ChatUserCardList.tsx b/src/screens/Chat/ChatUserCardList/ChatUserCardList.tsx
new file mode 100644
index 0000000..774f378
--- /dev/null
+++ b/src/screens/Chat/ChatUserCardList/ChatUserCardList.tsx
@@ -0,0 +1,16 @@
+import ChatUserCard from "../ChatUserCard";
+import { Container } from "./style";
+import React from "react";
+
+const UserCardList = () => {
+  return (
+    <Container>
+      <ChatUserCard />
+      <ChatUserCard voiceOn={true} />
+      <ChatUserCard />
+      <ChatUserCard />
+    </Container>
+  );
+};
+
+export default UserCardList;
diff --git a/src/screens/Chat/ChatUserCardList/index.tsx b/src/screens/Chat/ChatUserCardList/index.tsx
new file mode 100644
index 0000000..a5d19e5
--- /dev/null
+++ b/src/screens/Chat/ChatUserCardList/index.tsx
@@ -0,0 +1 @@
+export { default } from "./ChatUserCardList";
diff --git a/src/screens/Chat/ChatUserCardList/style.tsx b/src/screens/Chat/ChatUserCardList/style.tsx
new file mode 100644
index 0000000..0a1b6c9
--- /dev/null
+++ b/src/screens/Chat/ChatUserCardList/style.tsx
@@ -0,0 +1,8 @@
+import styled from "styled-components/native";
+
+export const Container = styled.View`
+  flex: 1;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+`;
diff --git a/src/screens/Chat/TimerHeader/TimerHeader.tsx b/src/screens/Chat/TimerHeader/TimerHeader.tsx
new file mode 100644
index 0000000..2f2fb2e
--- /dev/null
+++ b/src/screens/Chat/TimerHeader/TimerHeader.tsx
@@ -0,0 +1,37 @@
+import {
+  Container,
+  Message,
+  MessageSection,
+  TimeLabel,
+  TimeText,
+  TimerContainer,
+  TimerSection,
+} from "./style";
+
+import React from "react";
+
+interface TimerHeaderProps {
+  remainSeconds: number;
+}
+
+const TimerHeader: React.FC<TimerHeaderProps> = ({ remainSeconds }) => {
+  const minute = Math.floor(remainSeconds / 60);
+  const seconds = remainSeconds % 60;
+  return (
+    <Container>
+      <MessageSection>
+        <Message>자유롭게 이야기를{"\n"}나누어 보세요.</Message>
+      </MessageSection>
+      <TimerSection>
+        <TimerContainer>
+          <TimeLabel>남은대화시간</TimeLabel>
+          <TimeText>
+            {minute}:{seconds / 10 >= 1 ? seconds : "0" + seconds}
+          </TimeText>
+        </TimerContainer>
+      </TimerSection>
+    </Container>
+  );
+};
+
+export default TimerHeader;
diff --git a/src/screens/Chat/TimerHeader/index.tsx b/src/screens/Chat/TimerHeader/index.tsx
new file mode 100644
index 0000000..2a00e61
--- /dev/null
+++ b/src/screens/Chat/TimerHeader/index.tsx
@@ -0,0 +1 @@
+export { default } from "./TimerHeader";
diff --git a/src/screens/Chat/TimerHeader/style.tsx b/src/screens/Chat/TimerHeader/style.tsx
new file mode 100644
index 0000000..14ac6f5
--- /dev/null
+++ b/src/screens/Chat/TimerHeader/style.tsx
@@ -0,0 +1,42 @@
+import styled from "styled-components/native";
+
+export const Container = styled.View`
+  flex: 1;
+  flex-direction: row;
+`;
+
+export const MessageSection = styled.View`
+  flex: 2;
+  justify-content: center;
+`;
+
+export const Message = styled.Text`
+  font-weight: 600;
+  font-size: 20px;
+`;
+
+export const TimerSection = styled.View`
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const TimerContainer = styled.View`
+  padding: 10px 20px;
+  border-radius: 50px;
+  align-items: center;
+  background-color: #f6f6f6;
+`;
+
+export const TimeLabel = styled.Text`
+  font-size: 12px;
+  font-weight: 500;
+  color: #9e9db5;
+`;
+
+export const TimeText = styled.Text`
+  margin-top: 5px;
+  font-weight: 800;
+  font-size: 18px;
+  color: #5073cd;
+`;
diff --git a/src/screens/Chat/TooltipFooter/TooltipFooter.tsx b/src/screens/Chat/TooltipFooter/TooltipFooter.tsx
new file mode 100644
index 0000000..b5afe36
--- /dev/null
+++ b/src/screens/Chat/TooltipFooter/TooltipFooter.tsx
@@ -0,0 +1,26 @@
+import {
+  Container,
+  TooltipContainer,
+  TooltipContent,
+  TooltipContentText,
+  TooltipLabel,
+  TooltipTitle,
+} from "./style";
+
+import React from "react";
+
+const Tooltip = () => (
+  <Container>
+    <TooltipLabel>대화가 잘 이어지지 않나요?</TooltipLabel>
+    <TooltipContainer>
+      <TooltipTitle>지금 핫한 주제로 이야기해보세요.🔥</TooltipTitle>
+      <TooltipContent>
+        <TooltipContentText>오징어 게임</TooltipContentText>
+        <TooltipContentText>스우파</TooltipContentText>
+        <TooltipContentText>스파이더맨</TooltipContentText>
+      </TooltipContent>
+    </TooltipContainer>
+  </Container>
+);
+
+export default Tooltip;
diff --git a/src/screens/Chat/TooltipFooter/index.tsx b/src/screens/Chat/TooltipFooter/index.tsx
new file mode 100644
index 0000000..60fcbf6
--- /dev/null
+++ b/src/screens/Chat/TooltipFooter/index.tsx
@@ -0,0 +1 @@
+export { default } from "./TooltipFooter";
diff --git a/src/screens/Chat/TooltipFooter/style.tsx b/src/screens/Chat/TooltipFooter/style.tsx
new file mode 100644
index 0000000..1306bd6
--- /dev/null
+++ b/src/screens/Chat/TooltipFooter/style.tsx
@@ -0,0 +1,44 @@
+import styled from "styled-components/native";
+
+export const Container = styled.View`
+  justify-content: flex-start;
+`;
+
+export const TooltipLabel = styled.Text`
+  font-weight: 600;
+  font-size: 20px;
+`;
+
+export const TooltipContainer = styled.View`
+  margin-top: 10px;
+  width: 95%;
+  align-self: flex-end;
+  border-radius: 20px;
+  background-color: #f6f6f6;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 20px;
+`;
+
+export const TooltipTitle = styled.Text`
+  width: 100%;
+  font-size: 12px;
+  font-weight: 500;
+`;
+
+export const TooltipContent = styled.View`
+  margin-top: 10px;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+export const TooltipContentText = styled.Text`
+  font-size: 15px;
+  font-weight: 500;
+`;
+
+export const TooltipBubble = styled.Image`
+  position: absolute;
+  width: 100px;
+  height: 100px;
+`;
diff --git a/src/screens/Chat/index.tsx b/src/screens/Chat/index.tsx
new file mode 100644
index 0000000..308d054
--- /dev/null
+++ b/src/screens/Chat/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Chat";
diff --git a/src/screens/Chat/style.tsx b/src/screens/Chat/style.tsx
new file mode 100644
index 0000000..8e00192
--- /dev/null
+++ b/src/screens/Chat/style.tsx
@@ -0,0 +1,24 @@
+import styled from "styled-components/native";
+
+export const Container = styled.View`
+  flex: 1;
+  background-color: ${(props) => props.theme.color.White};
+`;
+
+export const TopSection = styled.View`
+  flex: 1;
+  flex-direction: row;
+  padding-left: 20px;
+  padding-right: 20px;
+`;
+
+export const MiddleSection = styled.View`
+  flex: 4;
+  padding: 10px;
+`;
+
+export const BottomSection = styled.View`
+  flex: 1;
+  padding-right: 20px;
+  padding-left: 20px;
+`;
diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx
index e31b210..501007a 100644
--- a/src/screens/Home.tsx
+++ b/src/screens/Home.tsx
@@ -10,6 +10,7 @@ const Home = ({ navigation }) => {
         onPress={() => navigation.navigate("Matching")}
       />
       <Button title="Chat" onPress={() => navigation.navigate("Chat")} />
+      <Button title="Vote" onPress={() => navigation.navigate("Vote")} />
       <Button
         title="Feedback"
         onPress={() => navigation.navigate("Feedback")}
diff --git a/src/screens/Vote/Vote.tsx b/src/screens/Vote/Vote.tsx
new file mode 100644
index 0000000..71f09c8
--- /dev/null
+++ b/src/screens/Vote/Vote.tsx
@@ -0,0 +1,37 @@
+import { BottomSection, Container, MiddleSection, TopSection } from "./style";
+
+import { Button } from "react-native";
+import { NativeStackScreenProps } from "@react-navigation/native-stack";
+import React from "react";
+import { RootStackParamList } from "../../App";
+import VoteUserCardList from "./VoteUserCardList";
+import VotingFooter from "./VotingFooter";
+import VotingHeader from "./VotingHeader";
+
+const Chat: React.FC<NativeStackScreenProps<RootStackParamList, "Vote">> = ({
+  navigation,
+}) => {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <Button onPress={() => navigation.goBack()} title="방 나가기" />
+      ),
+    });
+  }, [navigation]);
+
+  return (
+    <Container>
+      <TopSection>
+        <VotingHeader />
+      </TopSection>
+      <MiddleSection>
+        <VoteUserCardList />
+      </MiddleSection>
+      <BottomSection>
+        <VotingFooter selected={true} onSkip={() => {}} onSubmit={() => {}} />
+      </BottomSection>
+    </Container>
+  );
+};
+
+export default Chat;
diff --git a/src/screens/Vote/VoteUserCard/VoteUserCard.tsx b/src/screens/Vote/VoteUserCard/VoteUserCard.tsx
new file mode 100644
index 0000000..474b7cc
--- /dev/null
+++ b/src/screens/Vote/VoteUserCard/VoteUserCard.tsx
@@ -0,0 +1,30 @@
+import { Container, UserNameText } from "./style";
+
+import { Image } from "react-native";
+import ProfileImage from "../../../components/ProfileImage";
+import React from "react";
+import { smileProfileImage } from "../../../utils/images";
+
+interface Props {
+  selected?: boolean;
+  name?: string;
+  onSelect(name: string): void;
+}
+
+const VoteUserCard: React.FC<Props> = ({
+  selected = false,
+  name = "이름 없음",
+  onSelect,
+}) => {
+  const handleClick = () => {
+    onSelect(name);
+  };
+  return (
+    <Container selected={selected} onPress={handleClick}>
+      <ProfileImage size="md" image={smileProfileImage} />
+      <UserNameText>{name}</UserNameText>
+    </Container>
+  );
+};
+
+export default VoteUserCard;
diff --git a/src/screens/Vote/VoteUserCard/index.tsx b/src/screens/Vote/VoteUserCard/index.tsx
new file mode 100644
index 0000000..c712782
--- /dev/null
+++ b/src/screens/Vote/VoteUserCard/index.tsx
@@ -0,0 +1 @@
+export { default } from "./VoteUserCard";
diff --git a/src/screens/Vote/VoteUserCard/style.tsx b/src/screens/Vote/VoteUserCard/style.tsx
new file mode 100644
index 0000000..df74393
--- /dev/null
+++ b/src/screens/Vote/VoteUserCard/style.tsx
@@ -0,0 +1,24 @@
+import styled from "styled-components/native";
+
+interface ContainerProps {
+  selected: boolean;
+}
+
+export const Container = styled.TouchableOpacity<ContainerProps>`
+  width: 45%;
+  margin: 2.5%;
+  height: 45%;
+  border-radius: 20px;
+  border-width: 5px;
+  background-color: #f6f6f6;
+  border-color: ${({ selected }) => (selected ? "#5073cd" : "#f6f6f6")};
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const UserNameText = styled.Text`
+  margin-top: 20px;
+  font-size: 20px;
+  font-weight: 500;
+`;
diff --git a/src/screens/Vote/VoteUserCardList/VoteUserCardList.tsx b/src/screens/Vote/VoteUserCardList/VoteUserCardList.tsx
new file mode 100644
index 0000000..f30eb07
--- /dev/null
+++ b/src/screens/Vote/VoteUserCardList/VoteUserCardList.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+
+import { Container } from "./style";
+import VoteUserCard from "../VoteUserCard";
+
+// TODO: User list from Props
+const users = [
+  { id: 1, name: "수당연의" },
+  { id: 2, name: "비프스테이크" },
+  { id: 3, name: "산솜다리" },
+  { id: 4, name: "바다물벼룩" },
+];
+
+const VoteUserCardList = () => {
+  const [selectedUserName, setSelectedUserName] = useState<string>("");
+
+  return (
+    <Container>
+      {users.map(({ id, name }) => {
+        return (
+          <VoteUserCard
+            key={id}
+            selected={selectedUserName === name}
+            name={name}
+            onSelect={(name) => {
+              setSelectedUserName(name);
+            }}
+          />
+        );
+      })}
+    </Container>
+  );
+};
+
+export default VoteUserCardList;
diff --git a/src/screens/Vote/VoteUserCardList/index.tsx b/src/screens/Vote/VoteUserCardList/index.tsx
new file mode 100644
index 0000000..61c1de6
--- /dev/null
+++ b/src/screens/Vote/VoteUserCardList/index.tsx
@@ -0,0 +1 @@
+export { default } from "./VoteUserCardList";
diff --git a/src/screens/Vote/VoteUserCardList/style.tsx b/src/screens/Vote/VoteUserCardList/style.tsx
new file mode 100644
index 0000000..7d940d4
--- /dev/null
+++ b/src/screens/Vote/VoteUserCardList/style.tsx
@@ -0,0 +1,7 @@
+import styled from "styled-components/native";
+export const Container = styled.View`
+  flex: 1;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+`;
diff --git a/src/screens/Vote/VotingFooter/VotingFooter.tsx b/src/screens/Vote/VotingFooter/VotingFooter.tsx
new file mode 100644
index 0000000..2452d1f
--- /dev/null
+++ b/src/screens/Vote/VotingFooter/VotingFooter.tsx
@@ -0,0 +1,31 @@
+import { Container, SkipButton, SkipText, SubmitButton } from "./style";
+
+import { Ionicons } from "@expo/vector-icons";
+import React from "react";
+
+interface Props {
+  selected: boolean;
+  onSkip(): void;
+  onSubmit(): void;
+}
+
+const VotingFooter: React.FC<Props> = ({ selected, onSkip, onSubmit }) => {
+  return (
+    <Container>
+      {selected ? (
+        <SubmitButton enable={true} onPress={() => {}}>
+          <Ionicons name="checkmark-sharp" color="white" size={40} />
+        </SubmitButton>
+      ) : (
+        <SubmitButton enable={false} onPress={() => {}}>
+          <Ionicons name="checkmark-sharp" color="white" size={40} />
+        </SubmitButton>
+      )}
+      <SkipButton>
+        <SkipText>건너뛰기</SkipText>
+      </SkipButton>
+    </Container>
+  );
+};
+
+export default VotingFooter;
diff --git a/src/screens/Vote/VotingFooter/index.tsx b/src/screens/Vote/VotingFooter/index.tsx
new file mode 100644
index 0000000..80dc8b0
--- /dev/null
+++ b/src/screens/Vote/VotingFooter/index.tsx
@@ -0,0 +1 @@
+export { default } from "./VotingFooter";
diff --git a/src/screens/Vote/VotingFooter/style.tsx b/src/screens/Vote/VotingFooter/style.tsx
new file mode 100644
index 0000000..427e32f
--- /dev/null
+++ b/src/screens/Vote/VotingFooter/style.tsx
@@ -0,0 +1,31 @@
+import styled from "styled-components/native";
+
+export const Container = styled.View`
+  justify-content: center;
+  align-items: center;
+`;
+
+type SubmitButtonProps = {
+  enable: boolean;
+};
+
+export const SubmitButton = styled.TouchableOpacity<SubmitButtonProps>`
+  width: 70px;
+  height: 70px;
+  border-radius: 35px;
+  background-color: ${(props) => (props.enable ? "#5073cd" : "#A1A1AD")};
+  justify-content: center;
+  align-items: center;
+`;
+
+export const SkipButton = styled.TouchableOpacity`
+  margin-top: 20px;
+  width: 70px;
+  align-items: center;
+`;
+
+export const SkipText = styled.Text`
+  font-weight: 500;
+  font-size: 18px;
+  color: #b8b8cd;
+`;
diff --git a/src/screens/Vote/VotingHeader/VotingHeader.tsx b/src/screens/Vote/VotingHeader/VotingHeader.tsx
new file mode 100644
index 0000000..b2a5860
--- /dev/null
+++ b/src/screens/Vote/VotingHeader/VotingHeader.tsx
@@ -0,0 +1,23 @@
+import {
+  Container,
+  Message,
+  MessageSection,
+  SubMessage,
+  TimerSection,
+} from "./style";
+
+import React from "react";
+
+const VotingHeader = () => {
+  return (
+    <Container>
+      <MessageSection>
+        <Message>지금 분위키 메이커는{"\n"}누구인가요?</Message>
+        <SubMessage>* 한명만 선택해주세요.</SubMessage>
+      </MessageSection>
+      <TimerSection />
+    </Container>
+  );
+};
+
+export default VotingHeader;
diff --git a/src/screens/Vote/VotingHeader/index.tsx b/src/screens/Vote/VotingHeader/index.tsx
new file mode 100644
index 0000000..38d9bb7
--- /dev/null
+++ b/src/screens/Vote/VotingHeader/index.tsx
@@ -0,0 +1 @@
+export { default } from "./VotingHeader";
diff --git a/src/screens/Vote/VotingHeader/style.tsx b/src/screens/Vote/VotingHeader/style.tsx
new file mode 100644
index 0000000..ad10b73
--- /dev/null
+++ b/src/screens/Vote/VotingHeader/style.tsx
@@ -0,0 +1,27 @@
+import styled from "styled-components/native";
+
+export const Container = styled.View`
+  flex: 1;
+  flex-direction: row;
+`;
+
+export const MessageSection = styled.View`
+  flex: 2;
+  justify-content: center;
+`;
+
+export const Message = styled.Text`
+  font-weight: 600;
+  font-size: 20px;
+`;
+export const SubMessage = styled.Text`
+  font-weight: 600;
+  font-size: 14px;
+  color: #a1a1ad;
+`;
+
+export const TimerSection = styled.View`
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/screens/Vote/index.tsx b/src/screens/Vote/index.tsx
new file mode 100644
index 0000000..4e03cd1
--- /dev/null
+++ b/src/screens/Vote/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Vote";
diff --git a/src/screens/Vote/style.tsx b/src/screens/Vote/style.tsx
new file mode 100644
index 0000000..65975be
--- /dev/null
+++ b/src/screens/Vote/style.tsx
@@ -0,0 +1,24 @@
+import styled from "styled-components/native";
+
+export const Container = styled.View`
+  flex: 1;
+  background-color: #ffffff;
+`;
+
+export const TopSection = styled.View`
+  flex: 1;
+  flex-direction: row;
+  padding-left: 20px;
+  padding-right: 20px;
+`;
+
+export const MiddleSection = styled.View`
+  flex: 4;
+  padding: 10px;
+`;
+
+export const BottomSection = styled.View`
+  flex: 1;
+  padding-right: 20px;
+  padding-left: 20px;
+`;
diff --git a/src/styled.ts b/src/styled.ts
new file mode 100644
index 0000000..2413c41
--- /dev/null
+++ b/src/styled.ts
@@ -0,0 +1,8 @@
+import { Color } from "./constants/color";
+import { FontSize, FontWeight } from "./constants/font";
+
+export const theme = {
+  color: Color,
+  fontSize: FontSize,
+  fontWeight: FontWeight,
+};
diff --git a/src/utils/images.ts b/src/utils/images.ts
new file mode 100644
index 0000000..3db4cf0
--- /dev/null
+++ b/src/utils/images.ts
@@ -0,0 +1,4 @@
+// TODO: Change SVG
+export const smileProfileImage = require("../img/smile_1.png");
+export const muteIcon = require("../img/mute.png");
+export const unmuteIcon = require("../img/unmute.png");
diff --git a/types/styled.d.ts b/types/styled.d.ts
new file mode 100644
index 0000000..5356dce
--- /dev/null
+++ b/types/styled.d.ts
@@ -0,0 +1,21 @@
+// src/assets/styles/styled.d.ts
+import "styled-components";
+
+declare module "styled-components" {
+  export interface DefaultTheme {
+    color: {
+      PVBlue: string;
+      PVSkyblue: string;
+      PVRed: string;
+      PVYellow: string;
+      PVGreen: string;
+      PVBlack01: string;
+      PVBlack02: string;
+      PVBlack03: string;
+      PVBlack04: string;
+      PVBlack05: string;
+      PVBlack06: string;
+      White: string;
+    };
+  }
+}