diff --git a/frontend/src/components/GameResult/GameResult.styled.ts b/frontend/src/components/GameResult/GameResult.styled.ts
index 0dfd6cae4..5b6951d55 100644
--- a/frontend/src/components/GameResult/GameResult.styled.ts
+++ b/frontend/src/components/GameResult/GameResult.styled.ts
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-export const layout = css`
+export const gameResultLayout = css`
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/frontend/src/components/GameResult/GameResult.tsx b/frontend/src/components/GameResult/GameResult.tsx
index 7355320dc..adfde8a71 100644
--- a/frontend/src/components/GameResult/GameResult.tsx
+++ b/frontend/src/components/GameResult/GameResult.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
-import { gameResultTitle, gameResultTitleWrapper, layout } from './GameResult.styled';
+import { gameResultTitle, gameResultTitleWrapper, gameResultLayout } from './GameResult.styled';
 
 import Button from '@/components/common/Button/Button';
 
@@ -12,7 +12,7 @@ const GameResult = () => {
   };
 
   return (
-    <div css={layout}>
+    <div css={gameResultLayout}>
       <div css={gameResultTitleWrapper}>
         <h1 css={gameResultTitle}>게임 결과</h1>
       </div>
diff --git a/frontend/src/components/NicknameList/NicknameList.styled.ts b/frontend/src/components/NicknameList/NicknameList.styled.ts
index d1fe809c6..28f20d469 100644
--- a/frontend/src/components/NicknameList/NicknameList.styled.ts
+++ b/frontend/src/components/NicknameList/NicknameList.styled.ts
@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
 
-export const layout = css`
+export const nicknameListLayout = css`
   display: flex;
   justify-content: space-around;
-  width: 24.5rem;
-  height: 15.4rem;
+  width: 24.4rem;
+  height: 15.8rem;
 `;
 
 export const nicknameContainer = css`
diff --git a/frontend/src/components/NicknameList/NicknameList.tsx b/frontend/src/components/NicknameList/NicknameList.tsx
index a72d8c950..35f83aa0a 100644
--- a/frontend/src/components/NicknameList/NicknameList.tsx
+++ b/frontend/src/components/NicknameList/NicknameList.tsx
@@ -1,11 +1,11 @@
-import { layout, nicknameContainer, verticalLine } from './NicknameList.styled';
+import { nicknameListLayout, nicknameContainer, verticalLine } from './NicknameList.styled';
 
 const NicknameList = () => {
   const optionANicknames = ['철수', '철수', '철수', '철수', '철수', '철수', '철수', '철수', '철수'];
   const optionBNicknames = ['영미', '영미', '영미'];
 
   return (
-    <div css={layout}>
+    <div css={nicknameListLayout}>
       <div css={nicknameContainer}>
         {optionANicknames.map((optionANickname) => (
           <span key={optionANickname}>{optionANickname}</span>
diff --git a/frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts b/frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts
index b99fb6126..670869b95 100644
--- a/frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts
+++ b/frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts
@@ -2,16 +2,16 @@ import { css } from '@emotion/react';
 
 import { Theme } from '@/styles/Theme';
 
-interface LayoutProps {
+interface RoundVoteResultLayoutProps {
   percentage: number;
 }
 
-export const layout = ({ percentage }: LayoutProps) => css`
+export const roundVoteResultLayout = ({ percentage }: RoundVoteResultLayoutProps) => css`
   display: flex;
   justify-content: space-around;
   align-items: center;
-  width: 24.5rem;
-  height: 11rem;
+  width: 24rem;
+  height: 11.6rem;
 
   font-size: 1.2rem;
   background: linear-gradient(
diff --git a/frontend/src/components/RoundVoteResult/RoundVoteResult.tsx b/frontend/src/components/RoundVoteResult/RoundVoteResult.tsx
index a780a1187..634ac52e8 100644
--- a/frontend/src/components/RoundVoteResult/RoundVoteResult.tsx
+++ b/frontend/src/components/RoundVoteResult/RoundVoteResult.tsx
@@ -1,4 +1,4 @@
-import { layout, fontBold, voteContent } from './RoundVoteResult.styled';
+import { roundVoteResultLayout, fontBold, voteContent } from './RoundVoteResult.styled';
 
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
@@ -6,7 +6,7 @@ const RoundVoteResult = () => {
   const { balanceContent } = useBalanceContentQuery();
 
   return (
-    <div css={layout({ percentage: 72 })}>
+    <div css={roundVoteResultLayout({ percentage: 72 })}>
       <div css={voteContent}>
         <div css={fontBold}>{balanceContent?.firstOption.name}</div>
         <div css={fontBold}>72%</div>
diff --git a/frontend/src/components/SelectContainer/SelectContainer.styled.ts b/frontend/src/components/SelectContainer/SelectContainer.styled.ts
index 80ba82c2c..1a134def7 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.styled.ts
+++ b/frontend/src/components/SelectContainer/SelectContainer.styled.ts
@@ -1,11 +1,11 @@
 import { css } from '@emotion/react';
 
-export const layout = css`
+export const selectContainerLayout = css`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 5rem;
+  gap: 4rem;
   flex-basis: 55%;
 `;
 
diff --git a/frontend/src/components/SelectContainer/SelectContainer.tsx b/frontend/src/components/SelectContainer/SelectContainer.tsx
index 65eed1455..76a40645d 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.tsx
+++ b/frontend/src/components/SelectContainer/SelectContainer.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { layout, selectSection } from './SelectContainer.styled';
+import { selectContainerLayout, selectSection } from './SelectContainer.styled';
 
 import Button from '@/components/common/Button/Button';
 import SelectOption from '@/components/SelectOption/SelectOption';
@@ -25,7 +25,7 @@ const SelectContainer = () => {
   return (
     <>
       {balanceContent && (
-        <div css={layout}>
+        <div css={selectContainerLayout}>
           <section css={selectSection}>
             <SelectOption
               option={balanceContent.firstOption}
diff --git a/frontend/src/components/SelectOption/SelectOption.styled.ts b/frontend/src/components/SelectOption/SelectOption.styled.ts
index 820daf17c..c5b03e0a4 100644
--- a/frontend/src/components/SelectOption/SelectOption.styled.ts
+++ b/frontend/src/components/SelectOption/SelectOption.styled.ts
@@ -2,11 +2,11 @@ import { css } from '@emotion/react';
 
 import { Theme } from '@/styles/Theme';
 
-export const layout = (selected: boolean) => css`
+export const SelectOptionLayout = (selected: boolean) => css`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 11.4rem;
+  width: 11.6rem;
   height: 16.8rem;
   padding: 1.6rem;
 
diff --git a/frontend/src/components/SelectOption/SelectOption.tsx b/frontend/src/components/SelectOption/SelectOption.tsx
index 4070eb93a..cb7f7312b 100644
--- a/frontend/src/components/SelectOption/SelectOption.tsx
+++ b/frontend/src/components/SelectOption/SelectOption.tsx
@@ -1,4 +1,4 @@
-import { layout } from './SelectOption.styled';
+import { SelectOptionLayout } from './SelectOption.styled';
 
 import { BalanceContent } from '@/types/balanceContent';
 
@@ -11,7 +11,7 @@ interface SelectOptionProps {
 const SelectOption = ({ option, selectedId, handleSelectOption }: SelectOptionProps) => {
   return (
     <button
-      css={layout(Boolean(selectedId === option.optionId))}
+      css={SelectOptionLayout(Boolean(selectedId === option.optionId))}
       onClick={() => handleSelectOption(option.optionId)}
     >
       {option.name}
diff --git a/frontend/src/components/Timer/Timer.styled.ts b/frontend/src/components/Timer/Timer.styled.ts
index 3d8fb433b..331ee3842 100644
--- a/frontend/src/components/Timer/Timer.styled.ts
+++ b/frontend/src/components/Timer/Timer.styled.ts
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import { Theme } from '@/styles/Theme';
 
-export const layout = css`
+export const timerLayout = css`
   display: flex;
   justify-content: center;
   width: 100%;
diff --git a/frontend/src/components/Timer/Timer.tsx b/frontend/src/components/Timer/Timer.tsx
index 61b544d03..57dcfa208 100644
--- a/frontend/src/components/Timer/Timer.tsx
+++ b/frontend/src/components/Timer/Timer.tsx
@@ -1,7 +1,7 @@
-import { layout } from './Timer.styled';
+import { timerLayout } from './Timer.styled';
 
 const Timer = () => {
-  return <div css={layout}></div>;
+  return <div css={timerLayout}></div>;
 };
 
 export default Timer;
diff --git a/frontend/src/components/TopicContainer/TopicContainer.styled.ts b/frontend/src/components/TopicContainer/TopicContainer.styled.ts
index ab7e53d5d..5906fc9e8 100644
--- a/frontend/src/components/TopicContainer/TopicContainer.styled.ts
+++ b/frontend/src/components/TopicContainer/TopicContainer.styled.ts
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-export const topicLayout = css`
+export const topicContainerLayout = css`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -11,7 +11,7 @@ export const topicLayout = css`
 
 export const categoryText = css`
   font-weight: bold;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
 `;
 
 export const topicText = css`
diff --git a/frontend/src/components/TopicContainer/TopicContainer.tsx b/frontend/src/components/TopicContainer/TopicContainer.tsx
index a375be173..0c55d196f 100644
--- a/frontend/src/components/TopicContainer/TopicContainer.tsx
+++ b/frontend/src/components/TopicContainer/TopicContainer.tsx
@@ -1,4 +1,4 @@
-import { categoryText, topicLayout, topicText } from './TopicContainer.styled';
+import { categoryText, topicContainerLayout, topicText } from './TopicContainer.styled';
 
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
@@ -6,7 +6,7 @@ const TopicContainer = () => {
   const { balanceContent } = useBalanceContentQuery();
 
   return (
-    <section css={topicLayout}>
+    <section css={topicContainerLayout}>
       <span css={categoryText}>{balanceContent?.category}</span>
       <span css={topicText}>{balanceContent?.question}</span>
     </section>
diff --git a/frontend/src/components/common/Button/Button.tsx b/frontend/src/components/common/Button/Button.tsx
index 804ec0876..62acc28c2 100644
--- a/frontend/src/components/common/Button/Button.tsx
+++ b/frontend/src/components/common/Button/Button.tsx
@@ -1,7 +1,7 @@
 import { buttonLayout } from './Button.styled';
 
 interface ButtonProps {
-  text: '선택' | '확인' | '다음';
+  text: string;
   active: boolean;
   onClick: () => void;
 }
diff --git a/frontend/src/components/layout/Content/Content.styled.ts b/frontend/src/components/layout/Content/Content.styled.ts
index 02d3286f4..a1d90f77d 100644
--- a/frontend/src/components/layout/Content/Content.styled.ts
+++ b/frontend/src/components/layout/Content/Content.styled.ts
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-export const contentSection = css`
+export const contentLayout = css`
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/frontend/src/components/layout/Content/Content.tsx b/frontend/src/components/layout/Content/Content.tsx
index 4f6d7c175..7f14c19a6 100644
--- a/frontend/src/components/layout/Content/Content.tsx
+++ b/frontend/src/components/layout/Content/Content.tsx
@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react';
 
-import { contentSection } from './Content.styled';
+import { contentLayout } from './Content.styled';
 
 const Content = ({ children }: PropsWithChildren) => {
-  return <section css={contentSection}>{children}</section>;
+  return <section css={contentLayout}>{children}</section>;
 };
 
 export default Content;
diff --git a/frontend/src/components/layout/Header/Header.styled.ts b/frontend/src/components/layout/Header/Header.styled.ts
index 25fae2786..0e19358f1 100644
--- a/frontend/src/components/layout/Header/Header.styled.ts
+++ b/frontend/src/components/layout/Header/Header.styled.ts
@@ -4,6 +4,7 @@ export const headerLayout = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 8rem;
 `;
 
 export const gameTitle = css`
diff --git a/frontend/src/pages/MainPage/MainPage.styled.ts b/frontend/src/pages/MainPage/MainPage.styled.ts
new file mode 100644
index 000000000..b38e06d2c
--- /dev/null
+++ b/frontend/src/pages/MainPage/MainPage.styled.ts
@@ -0,0 +1,30 @@
+import { css } from '@emotion/react';
+
+import { Theme } from '@/styles/Theme';
+
+export const mainPageLayout = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+
+  background-color: ${Theme.color.peanut200};
+  gap: 3rem;
+`;
+
+export const logoWrapper = css`
+  width: 16rem;
+  height: 16rem;
+
+  background-color: white;
+`;
+
+export const title = css`
+  font-size: 4.8rem;
+`;
+
+export const intro = css`
+  color: ${Theme.color.gray400};
+  font-size: 1.6rem;
+`;
diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
new file mode 100644
index 000000000..2be7aad30
--- /dev/null
+++ b/frontend/src/pages/MainPage/MainPage.tsx
@@ -0,0 +1,24 @@
+import { useNavigate } from 'react-router-dom';
+
+import { mainPageLayout, logoWrapper, title, intro } from './MainPage.styled';
+
+import Button from '@/components/common/Button/Button';
+
+const MainPage = () => {
+  const navigate = useNavigate();
+
+  const goToNicknamePage = () => {
+    navigate('/nickname');
+  };
+
+  return (
+    <div css={mainPageLayout}>
+      <div css={logoWrapper}>LO to the GO</div>
+      <h1 css={title}>땅콩</h1>
+      <h2 css={intro}>어색한 분위기를 주도해봐요</h2>
+      <Button text="방 만들기" active={true} onClick={goToNicknamePage}></Button>
+    </div>
+  );
+};
+
+export default MainPage;
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.styled.ts b/frontend/src/pages/NicknamePage/NicknamePage.styled.ts
new file mode 100644
index 000000000..7f9fd3a51
--- /dev/null
+++ b/frontend/src/pages/NicknamePage/NicknamePage.styled.ts
@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+
+import { Theme } from '@/styles/Theme';
+
+export const profile = css`
+  width: 8rem;
+  height: 8rem;
+  margin-top: 4rem;
+
+  background-color: ${Theme.color.gray300};
+  border-radius: 50%;
+`;
+
+export const nickname = css`
+  width: 26.8rem;
+  margin: 2rem 0;
+
+  font-weight: 600;
+  font-size: 1.6rem;
+`;
+
+export const nicknameInputWrapper = css`
+  display: flex;
+  align-items: center;
+  width: 26.8rem;
+  height: 4.8rem;
+  padding: 0 1rem;
+
+  background-color: ${Theme.color.gray200};
+  border-radius: 1rem;
+`;
+
+export const nicknameInput = css`
+  width: 100%;
+  border: 0;
+
+  background-color: ${Theme.color.gray200};
+  outline: none;
+`;
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx
new file mode 100644
index 000000000..0647c79bb
--- /dev/null
+++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx
@@ -0,0 +1,20 @@
+import { profile, nickname, nicknameInputWrapper, nicknameInput } from './NicknamePage.styled';
+
+import Content from '@/components/layout/Content/Content';
+import { createRandomNickname } from '@/utils/nickname';
+
+const NicknamePage = () => {
+  const randomNickname = createRandomNickname();
+
+  return (
+    <Content>
+      <div css={profile}></div>
+      <div css={nickname}>닉네임</div>
+      <div css={nicknameInputWrapper}>
+        <input css={nicknameInput} type="text" placeholder={randomNickname} />
+      </div>
+    </Content>
+  );
+};
+
+export default NicknamePage;
diff --git a/frontend/src/pages/RoundResultPage/RoundResultPage.styled.ts b/frontend/src/pages/RoundResultPage/RoundResultPage.styled.ts
index 8425470f1..410f844f0 100644
--- a/frontend/src/pages/RoundResultPage/RoundResultPage.styled.ts
+++ b/frontend/src/pages/RoundResultPage/RoundResultPage.styled.ts
@@ -2,5 +2,5 @@ import { css } from '@emotion/react';
 
 export const NicknameListWrapper = css`
   margin-top: 1.6rem;
-  margin-bottom: 0.7rem;
+  margin-bottom: 0.8rem;
 `;
diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx
index 056d3fe78..02cb7b7d9 100644
--- a/frontend/src/router/index.tsx
+++ b/frontend/src/router/index.tsx
@@ -4,23 +4,37 @@ import { Layout } from './layout';
 
 import GamePage from '@/pages/GamePage/GamePage';
 import GameResultPage from '@/pages/GameResultPage/GameResultPage';
+import MainPage from '@/pages/MainPage/MainPage';
+import NicknamePage from '@/pages/NicknamePage/NicknamePage';
 import RoundResultPage from '@/pages/RoundResultPage/RoundResultPage';
 
 export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <MainPage />,
+  },
   {
     path: '/',
     element: <Layout />,
     children: [
       {
-        index: true,
+        path: 'nickname',
+        element: <NicknamePage />,
+      },
+      {
+        path: 'ready',
+        element: <div>게임 대기 화면</div>,
+      },
+      {
+        path: 'game',
         element: <GamePage />,
       },
       {
-        path: 'round-result',
+        path: 'round/result',
         element: <RoundResultPage />,
       },
       {
-        path: 'game-result',
+        path: 'game/result',
         element: <GameResultPage />,
       },
     ],
diff --git a/frontend/src/styles/GlobalStyle.ts b/frontend/src/styles/GlobalStyle.ts
index f32172627..7c8fe3ef9 100644
--- a/frontend/src/styles/GlobalStyle.ts
+++ b/frontend/src/styles/GlobalStyle.ts
@@ -143,7 +143,6 @@ const GlobalStyle = css`
   ${reset}
 
   html {
-    margin-top: 3rem;
     font-size: 10px;
   }
 
diff --git a/frontend/src/styles/Theme.ts b/frontend/src/styles/Theme.ts
index fdf9bd95d..6939b0f62 100644
--- a/frontend/src/styles/Theme.ts
+++ b/frontend/src/styles/Theme.ts
@@ -1,8 +1,14 @@
 const color = {
   // primary color
+  peanut200: '#FFF0D4',
   peanut300: '#FFF4DF',
   peanut400: '#FFDD9A',
   peanut500: '#FFD076',
+
+  gray200: '#F3F1F1',
+  gray300: '#E4E4E4',
+  gray400: '#9D9B9B',
+  gray500: '#7A7A7A',
 } as const;
 
 export const Theme = {
diff --git a/frontend/src/utils/.gitkeep b/frontend/src/utils/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/src/utils/nickname.ts b/frontend/src/utils/nickname.ts
new file mode 100644
index 000000000..da1525f8d
--- /dev/null
+++ b/frontend/src/utils/nickname.ts
@@ -0,0 +1,77 @@
+export const createRandomNickname = () => {
+  const adjectives = [
+    '춤추는',
+    '노래하는',
+    '웃긴',
+    '귀여운',
+    '사랑스러운',
+    '재치있는',
+    '기운찬',
+    '활발한',
+    '지적인',
+    '영리한',
+    '장난꾸러기',
+    '유쾌한',
+    '깔끔한',
+    '매력적인',
+    '화려한',
+    '신나는',
+    '용감한',
+    '상냥한',
+    '달콤한',
+    '기발한',
+    '짜릿한',
+    '다정한',
+    '평온한',
+    '쾌활한',
+    '따뜻한',
+    '호기심 많은',
+    '재빠른',
+    '천재적인',
+    '엉뚱한',
+    '호탕한',
+    '멋진',
+    '섹시한',
+    '발랄한',
+    '당당한',
+    '명랑한',
+    '흥미로운',
+  ];
+  const nouns = [
+    '강아지',
+    '고양이',
+    '개구리',
+    '딱다구리',
+    '사자',
+    '호랑이',
+    '코끼리',
+    '기린',
+    '고래',
+    '판다',
+    '토끼',
+    '햄스터',
+    '다람쥐',
+    '수달',
+    '원숭이',
+    '여우',
+    '늑대',
+    '말',
+    '돼지',
+    '소',
+    '양',
+    '염소',
+    '치타',
+    '타조',
+    '참새',
+    '비둘기',
+    '까마귀',
+    '공룡',
+    '거북이',
+    '독수리',
+  ];
+
+  const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)];
+  const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
+
+  return `${randomAdjective} ${randomNoun}`;
+};