diff --git a/src/component/unit/mypage/mypage.mockup.html b/src/component/unit/mypage/mypage.mockup.html
new file mode 100644
index 0000000..466d904
--- /dev/null
+++ b/src/component/unit/mypage/mypage.mockup.html
@@ -0,0 +1,62 @@
+<!-- 목업작업 -->
+<!-- 코딩 완료되면 삭제할 페이지 -->
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mypage Mock Up</title>
+    <link rel="stylesheet" href="./mypage.style.css">
+    <link rel="stylesheet" href="../../../styles/global.style.css">
+    <script src="https://kit.fontawesome.com/116a85af51.js" crossorigin="anonymous"></script>
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <h1 class="header__title">
+                마이페이지
+            </h1>
+        </header>
+        <main class="contents">
+            <section class="user-info">
+                <h2>유저 정보가 들어가는 영역</h2>
+            </section>
+            <section class="challenge-list">
+                <h1>챌린지 목록이 들어가는 영역</h1>
+            </section>
+        </main>
+        <nav class="nav">
+            <ul class="nav__ul">
+                <!-- 폰트어썸 문제 해결해야함
+                토요일에 가서 이야기해보자 -->
+                <li class="nav__ul__li">
+                    <a href="#" data-pathname="todolist">
+                        <i class="fa-solid fa-pen-to-square"></i>
+                    </a>
+                </li>
+                <li class="nav__ul__li">
+                    <a href="#" data-pathname="challenge">
+                        <i class="fa-solid fa-flag"></i>
+                    </a>
+                </li>
+                <li class="nav__ul__li">
+                    <button>
+                        <i class="fa-solid fa-circle-plus"></i>
+                    </button>
+                </li>
+                <li class="nav__ul__li">
+                    <a href="#" data-pathname="community">
+                        <i class="fa-solid fa-list-check"></i>
+                    </a>
+                </li>
+                <li class="nav__ul__li">
+                    <a href="#" data-pathname="mypage">
+                        <i class="fa-solid fa-circle-user"></i>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/component/unit/mypage/mypage.style.css b/src/component/unit/mypage/mypage.style.css
index b776a04..fcbf191 100644
--- a/src/component/unit/mypage/mypage.style.css
+++ b/src/component/unit/mypage/mypage.style.css
@@ -1,10 +1,6 @@
-.test {
-  width: 100vw;
-  height: 100vh;
-  background-color: aqua;
-}
-
-.test > p {
-  color: brown;
-  font-size: 50px;
-}
+.container {
+  max-width: 640px;
+  min-height: 100vh;
+  margin: 0 auto;
+  background: #f4f4f4;
+}
\ No newline at end of file
