diff --git a/index.html b/index.html
index 6af98cd8..f964a822 100644
--- a/index.html
+++ b/index.html
@@ -14,10 +14,10 @@
     <header>
         <div class="header-content">
             <a href="/">
-                <img src="./src/assets/icons/판다 마켓 로고.svg" alt="판다 마켓 로고" />
+                <img src="./src/assets/icons/panda-market-logo.svg" alt="판다 마켓 로고" />
             </a>
             <a href="./src/pages/login.html">
-                <button class="button--active login-button">로그인</button>
+                <button class="primary-button login-button">로그인</button>
             </a>
         </div>
     </header>
@@ -30,7 +30,7 @@ <h1 class="main-title-h1">
                         거래해 보세요
                     </h1>
                     <a href="./src/pages/items.html">
-                        <button class="button--active visit-button">구경하러 가기</button>
+                        <button class="primary-button visit-button">구경하러 가기</button>
                     </a>
                 </div>
                 <div class="main-title-content-right">
@@ -44,34 +44,34 @@ <h1 class="main-title-h1">
                     <img src="./src/assets/images/popular-items.png" alt="인기 상품 검색" />
                 </div>
                 <div class="main-content-right-text">
-                    <div class="main-content-text-header">
+                    <p class="main-content-text-header">
                         Hot item
-                    </div>
-                    <div class="main-content-text-title">
+                    </p>
+                    <p class="main-content-text-title">
                         인기 상품을 <br />
                         확인해 보세요
-                    </div>
-                    <div class="main-content-text-detail">
+                    </p>
+                    <p class="main-content-text-detail">
                         가장 HOT한 중고거래 물품을 <br />
                         판다 마켓에서 확인해 보세요
-                    </div>
+                    </p>
                 </div>
             </div>
         </div>
         <div class="main-block">
             <div class="main-content">
                 <div class="main-content-left-text">
-                    <div class="main-content-text-header">
+                    <p class="main-content-text-header">
                         Search
-                    </div>
-                    <div class="main-content-text-title">
+                    </p>
+                    <p class="main-content-text-title">
                         구매를 원하는 <br />
                         상품을 검색하세요
-                    </div>
-                    <div class="main-content-text-detail">
+                    </p>
+                    <p class="main-content-text-detail">
                         구매하고 싶은 물품은 검색해서 <br />
                         쉽게 찾아보세요
-                    </div>
+                    </p>
                 </div>
                 <div class="main-content-picture">
                     <img src="./src/assets/images/search.png" alt="상품 검색" />
@@ -84,18 +84,17 @@ <h1 class="main-title-h1">
                     <img src="./src/assets/images/register.png" alt="상품 등록" />
                 </div>
                 <div class="main-content-right-text">
-                    <div class="main-content-text-header">
+                    <p class="main-content-text-header">
                         Register
-                    </div>
-                    <div class="main-content-text-title">
+                    </p>
+                    <p class="main-content-text-title">
                         판매를 원하는<br />
                         상품을 등록하세요
-                    </div>
-                    <div class="main-content-text-detail">
-                        <!--figma에서 시킨대로 한 거 같은데 글자가 다 들어가지 못하는 거 같습니다! 어떻게 해결하면 좋을지 조언 부탁드립니다!-->
+                    </p>
+                    <p class="main-content-text-detail">
                         어떤 물건이든 판매하고 싶은 상품을 </br />
                         쉽게 등록하세요
-                    </div>
+                    </p>
                 </div>
             </div>
         </div>
diff --git a/src/assets/icons/google_icon.png b/src/assets/icons/google_icon.png
new file mode 100644
index 00000000..63a81231
Binary files /dev/null and b/src/assets/icons/google_icon.png differ
diff --git a/src/assets/icons/kakaotalk_icon.png b/src/assets/icons/kakaotalk_icon.png
new file mode 100644
index 00000000..8c25d9f9
Binary files /dev/null and b/src/assets/icons/kakaotalk_icon.png differ
diff --git "a/src/assets/icons/\355\214\220\353\213\244 \353\247\210\354\274\223 \353\241\234\352\263\240.svg" b/src/assets/icons/panda-market-logo.svg
similarity index 100%
rename from "src/assets/icons/\355\214\220\353\213\244 \353\247\210\354\274\223 \353\241\234\352\263\240.svg"
rename to src/assets/icons/panda-market-logo.svg
diff --git a/src/assets/icons/visibility_off_btn.svg b/src/assets/icons/visibility_off_btn.svg
new file mode 100644
index 00000000..35a75305
--- /dev/null
+++ b/src/assets/icons/visibility_off_btn.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0021 15.5769C13.1352 15.5769 14.0976 15.1803 14.8892 14.3871C15.6809 13.5939 16.0767 12.6308 16.0767 11.4977C16.0767 10.3646 15.6802 9.40224 14.887 8.61058C14.0938 7.81891 13.1307 7.42308 11.9976 7.42308C10.8645 7.42308 9.9021 7.81966 9.11044 8.61282C8.31877 9.40601 7.92294 10.3692 7.92294 11.5023C7.92294 12.6353 8.31952 13.5977 9.11269 14.3894C9.90587 15.181 10.869 15.5769 12.0021 15.5769ZM11.9998 14.2C11.2498 14.2 10.6123 13.9375 10.0873 13.4125C9.56234 12.8875 9.29984 12.25 9.29984 11.5C9.29984 10.75 9.56234 10.1125 10.0873 9.58748C10.6123 9.06248 11.2498 8.79998 11.9998 8.79998C12.7498 8.79998 13.3873 9.06248 13.9123 9.58748C14.4373 10.1125 14.6998 10.75 14.6998 11.5C14.6998 12.25 14.4373 12.8875 13.9123 13.4125C13.3873 13.9375 12.7498 14.2 11.9998 14.2ZM11.9998 18.5C9.89472 18.5 7.96941 17.9384 6.22391 16.8153C4.47839 15.6923 3.08513 14.2147 2.04411 12.3827C1.96078 12.2391 1.89988 12.0944 1.86141 11.9485C1.82294 11.8027 1.80371 11.653 1.80371 11.4995C1.80371 11.346 1.82294 11.1965 1.86141 11.051C1.89988 10.9054 1.96078 10.7609 2.04411 10.6173C3.08513 8.78525 4.47839 7.30769 6.22391 6.18463C7.96941 5.06154 9.89472 4.5 11.9998 4.5C14.105 4.5 16.0303 5.06154 17.7758 6.18463C19.5213 7.30769 20.9145 8.78525 21.9556 10.6173C22.0389 10.7609 22.0998 10.9056 22.1383 11.0514C22.1767 11.1973 22.196 11.347 22.196 11.5005C22.196 11.654 22.1767 11.8035 22.1383 11.949C22.0998 12.0945 22.0389 12.2391 21.9556 12.3827C20.9145 14.2147 19.5213 15.6923 17.7758 16.8153C16.0303 17.9384 14.105 18.5 11.9998 18.5ZM11.9998 17C13.8832 17 15.6123 16.5041 17.1873 15.5125C18.7623 14.5208 19.9665 13.1833 20.7998 11.5C19.9665 9.81664 18.7623 8.47914 17.1873 7.48748C15.6123 6.49581 13.8832 5.99998 11.9998 5.99998C10.1165 5.99998 8.38734 6.49581 6.81234 7.48748C5.23734 8.47914 4.03317 9.81664 3.19984 11.5C4.03317 13.1833 5.23734 14.5208 6.81234 15.5125C8.38734 16.5041 10.1165 17 11.9998 17Z" fill="#4B5563"/>
+</svg>
diff --git a/src/assets/icons/visibility_on_btn.svg b/src/assets/icons/visibility_on_btn.svg
new file mode 100644
index 00000000..4b8be580
--- /dev/null
+++ b/src/assets/icons/visibility_on_btn.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_56770_9351)">
+<path d="M15.7731 12.9729L14.6501 11.8499C14.8206 10.9601 14.5866 10.2012 13.9481 9.57296C13.3097 8.94476 12.5437 8.70374 11.6501 8.84989L10.527 7.72684C10.7591 7.61914 10.9978 7.54157 11.2433 7.49414C11.4889 7.44671 11.7411 7.42299 12.0001 7.42299C13.1347 7.42299 14.0978 7.81882 14.8895 8.61049C15.6811 9.40216 16.077 10.3653 16.077 11.4999C16.077 11.7589 16.0549 12.0111 16.0106 12.2566C15.9664 12.5021 15.8872 12.7409 15.7731 12.9729ZM18.9539 16.0845L17.8501 15.0499C18.4834 14.5666 19.0501 14.0291 19.5501 13.4374C20.0501 12.8457 20.4667 12.1999 20.8001 11.4999C19.9667 9.81656 18.7626 8.47906 17.1876 7.48739C15.6126 6.49572 13.8834 5.99989 12.0001 5.99989C11.5167 5.99989 11.0459 6.03322 10.5876 6.09989C10.1292 6.16656 9.66674 6.26656 9.20007 6.39989L8.03472 5.23454C8.67061 4.98326 9.319 4.798 9.9799 4.67877C10.6408 4.55953 11.3142 4.49991 12.0001 4.49991C14.1488 4.49991 16.1225 5.05825 17.9212 6.17491C19.7199 7.29158 21.1032 8.80247 22.0712 10.7076C22.1379 10.8345 22.1863 10.9624 22.2164 11.0912C22.2465 11.2201 22.2616 11.3563 22.2616 11.4999C22.2616 11.6435 22.2491 11.7797 22.2241 11.9085C22.1991 12.0374 22.1532 12.1653 22.0866 12.2922C21.7327 13.0448 21.2885 13.7396 20.7539 14.3768C20.2193 15.014 19.6193 15.5832 18.9539 16.0845ZM12.0001 18.4999C9.89496 18.4999 7.96548 17.9374 6.21165 16.8124C4.4578 15.6874 3.06357 14.2056 2.02895 12.3672C1.94562 12.2403 1.88472 12.1025 1.84627 11.9537C1.80781 11.805 1.78857 11.6537 1.78857 11.4999C1.78857 11.346 1.80524 11.1973 1.83857 11.0537C1.87191 10.9102 1.93024 10.7698 2.01357 10.6326C2.38537 9.95311 2.80653 9.30599 3.27705 8.69124C3.74757 8.07649 4.28859 7.52553 4.90012 7.03837L2.64242 4.76526C2.50396 4.61655 2.43569 4.43995 2.43762 4.23546C2.43954 4.03098 2.51293 3.85631 2.6578 3.71144C2.80267 3.56657 2.97831 3.49414 3.18472 3.49414C3.39112 3.49414 3.56676 3.56657 3.71162 3.71144L20.2885 20.2883C20.427 20.4268 20.5004 20.5983 20.5087 20.8027C20.517 21.0072 20.4436 21.187 20.2885 21.3422C20.1437 21.487 19.968 21.5595 19.7616 21.5595C19.5552 21.5595 19.3796 21.487 19.2347 21.3422L15.7155 17.8537C15.1257 18.0819 14.5196 18.2467 13.8972 18.3479C13.2748 18.4492 12.6424 18.4999 12.0001 18.4999ZM5.95395 8.09216C5.36805 8.54473 4.84144 9.0566 4.37412 9.62777C3.90681 10.1989 3.51546 10.823 3.20007 11.4999C4.03341 13.1832 5.23757 14.5207 6.81257 15.5124C8.38757 16.5041 10.1167 16.9999 12.0001 16.9999C12.4296 16.9999 12.8523 16.971 13.2684 16.9133C13.6844 16.8557 14.0975 16.7666 14.5078 16.646L13.2424 15.3499C13.0398 15.4383 12.8376 15.4982 12.6356 15.5297C12.4337 15.5611 12.2219 15.5768 12.0001 15.5768C10.8655 15.5768 9.90234 15.181 9.11067 14.3893C8.31901 13.5976 7.92317 12.6345 7.92317 11.4999C7.92317 11.2781 7.94048 11.0662 7.9751 10.8643C8.00972 10.6624 8.06805 10.4601 8.1501 10.2576L5.95395 8.09216Z" fill="#4B5563"/>
+</g>
+<defs>
+<clipPath id="clip0_56770_9351">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/pages/login.html b/src/pages/login.html
index a4baf1d9..7dbaf68f 100644
--- a/src/pages/login.html
+++ b/src/pages/login.html
@@ -1,11 +1,50 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!--pretendard 폰트-->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css">
+    <link rel="stylesheet" href="/src/styles/reset.css">
+    <link rel="stylesheet" href="/src/styles/global.css">
+    <link rel="stylesheet" href="/src/styles/pages/login.css">
     <title>login</title>
 </head>
 <body>
-    login!
+    <main>
+        <a href="/index.html">
+            <img src="/src/assets/icons/panda-market-logo.svg" alt="판다 마켓 로고" class="logo">
+        </a>
+        <div class="content-wrapper">
+            <div class="form-structure">
+                <label for="email" class="form-label">이메일</label>
+                <input id="email" class="form-input" type="email" placeholder="이메일을 입력해주세요">
+            </div>
+            <div class="form-structure">
+                <label for="password" class="form-label">비밀번호</label>
+                <div class="input-wrapper">
+                    <input id="password" class="form-input" type="password" placeholder="비밀번호를 입력해주세요">
+                    <img class="input-icon" src="/src/assets/icons/visibility_on_btn.svg" alt="비밀번호 보기">
+                </div>
+            </div>
+            <button class="primary-button login-button" disabled>로그인</button>
+            <div class="social-login">
+                <p>간편 로그인하기</p>
+                <ul class="icon-list">
+                    <a href="https://www.google.com" class="circle white-background">
+                        <img  class="google-icon" src="/src/assets/icons/google_icon.png" alt="구글 로그인">
+                    </a>
+                    <a href="https://www.kakaocorp.com/page/" class="circle kakao-background">
+                        <img class="kakao-icon" src="/src/assets/icons/kakaotalk_icon.png" alt="카카오 로그인">
+                    </a>
+                </ul>
+            </div>
+            <div class="signup-prompt">
+                <span>판다마켓이 처음이신가요?</span>
+                <a href="/src/pages/signup.html">회원가입</a>
+            </div>
+        </div>
+    </main>
+    <script type="module" src="/src/scripts/pages/login.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/pages/signup.html b/src/pages/signup.html
new file mode 100644
index 00000000..289c1d37
--- /dev/null
+++ b/src/pages/signup.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!--pretendard 폰트-->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css">
+    <link rel="stylesheet" href="/src/styles/reset.css">
+    <link rel="stylesheet" href="/src/styles/global.css">
+    <link rel="stylesheet" href="/src/styles/pages/signup.css">
+    <title>signup</title>
+</head>
+<body>
+    <main>
+        <a href="/index.html">
+            <img src="/src/assets/icons/panda-market-logo.svg" alt="판다 마켓 로고" class="logo">
+        </a>
+        <div class="content-wrapper">
+            <div class="form-structure">
+                <label for="email" class="form-label">이메일</label>
+                <input id="email" class="form-input" type="email" placeholder="이메일을 입력해주세요">
+            </div>
+            <div class="form-structure">
+                <label for="nickname" class="form-label">닉네임</label>
+                <input id="nickname" class="form-input" type="text" placeholder="닉네임을 입력해주세요">
+            </div>
+            <div class="form-structure">
+                <label for="password" class="form-label">비밀번호</label>
+                <div class="input-wrapper">
+                    <input id="password" class="form-input" type="password" placeholder="비밀번호를 입력해주세요">
+                    <img class="input-icon" src="/src/assets/icons/visibility_on_btn.svg" alt="비밀번호 보기">
+                </div>
+            </div>
+            <div class="form-structure">
+                <label for="password" class="form-label">비밀번호 확인</label>
+                <div class="input-wrapper">
+                    <input id="password" class="form-input" type="password" placeholder="비밀번호를 입력해주세요">
+                    <img class="input-icon" src="/src/assets/icons/visibility_on_btn.svg" alt="비밀번호 보기">
+                </div>
+            </div>
+            <button class="primary-button login-button" disabled>회원가입</button>
+            <div class="social-login">
+                <p>간편 로그인하기</p>
+                <ul class="icon-list">
+                    <a href="https://www.google.com" class="circle white-background">
+                        <img  class="google-icon" src="/src/assets/icons/google_icon.png" alt="구글 로그인">
+                    </a>
+                    <a href="https://www.kakaocorp.com/page/" class="circle kakao-background">
+                        <img class="kakao-icon" src="/src/assets/icons/kakaotalk_icon.png" alt="카카오 로그인">
+                    </a>
+                </ul>
+            </div>
+            <div class="login-prompt">
+                <span>이미 회원이신가요?</span>
+                <a href="/src/pages/login.html">로그인</a>
+            </div>
+        </div>
+    </main>
+    <script type="module" src="/src/scripts/pages/signup.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/scripts/global.js b/src/scripts/global.js
new file mode 100644
index 00000000..4c2c195d
--- /dev/null
+++ b/src/scripts/global.js
@@ -0,0 +1,49 @@
+export function setVisibilityToggle(inputWrapperSelector) {
+    const inputWrapperList = document.querySelectorAll(inputWrapperSelector);
+
+    inputWrapperList.forEach((wrapper) => {
+        wrapper.addEventListener("click", event => {
+            const target = event.target;
+            if(target.classList.contains("input-icon")) {
+                const input = wrapper.querySelector("input");
+                const icon = target;
+
+                if (input.type === "password")
+                {
+                    input.type = "text";
+                    icon.src = "/src/assets/icons/visibility_off_btn.svg";
+                    icon.alt = "비밀번호 숨기기";
+                }
+                else
+                {
+                    input.type = "password";
+                    icon.src = "/src/assets/icons/visibility_on_btn.svg";
+                    icon.alt = "비밀번호 보기";
+                }
+            }
+        })
+    })
+}
+
+export function setButtonDisable(parent, buttonClass) {
+    const button = parent.querySelector(buttonClass);
+  
+    // 초기 상태 및 입력값 검증 함수
+    function validateInputs() {
+      const inputs = parent.querySelectorAll("input");
+      const allFilled = Array.from(inputs).every(input => input.value.trim() !== "");
+      button.disabled = !allFilled;
+    }
+
+    /*
+        초기 상태에 button을 disabled로 설정하였으나
+        안전성과 일관성을 위해 호출
+    */
+    validateInputs();
+  
+    parent.addEventListener("input", (event) => {
+      if (event.target.tagName === "INPUT") {
+        validateInputs();
+      }
+    });
+  }
\ No newline at end of file
diff --git a/src/scripts/pages/login.js b/src/scripts/pages/login.js
new file mode 100644
index 00000000..c66515e7
--- /dev/null
+++ b/src/scripts/pages/login.js
@@ -0,0 +1,6 @@
+import { setVisibilityToggle, setButtonDisable } from "/src/scripts/global.js";
+
+setVisibilityToggle(".input-wrapper");
+
+const contentWrapper = document.querySelector(".content-wrapper");
+setButtonDisable(contentWrapper, ".primary-button");
diff --git a/src/scripts/pages/signup.js b/src/scripts/pages/signup.js
new file mode 100644
index 00000000..c66515e7
--- /dev/null
+++ b/src/scripts/pages/signup.js
@@ -0,0 +1,6 @@
+import { setVisibilityToggle, setButtonDisable } from "/src/scripts/global.js";
+
+setVisibilityToggle(".input-wrapper");
+
+const contentWrapper = document.querySelector(".content-wrapper");
+setButtonDisable(contentWrapper, ".primary-button");
diff --git a/src/styles/global.css b/src/styles/global.css
index 80365355..b358627d 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,11 +2,27 @@ body {
     font-family: 'Pretendard', Arial, sans-serif;
 }
 
-/*
-* 활성화된 버튼의 배경색 및 글자색 설정
-*/
-.button--active {
+.primary-button {
     cursor: pointer;
     color: #F3F4F6;
     background-color: #3692FF;
+    text-align: center;
+}
+
+.primary-button:disabled {
+    background-color: #9CA3AF;
+    opacity: 0.5;
+}
+
+.white-background {
+    background-color: white;
+}
+
+.kakao-background {
+    background-color: #FAE300;
+}
+
+/*정사각형 모양임이 확실할 때만 사용가능할 듯*/
+.circle {
+    border-radius: 50%;
 }
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index d8dfd861..c679753d 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -2,6 +2,9 @@ header {
     display: flex;
     justify-content: center;
     padding: 9px 0;
+    background-color: white;
+    position: sticky;
+    top: 0;
 }
 
 .header-content {
@@ -73,7 +76,6 @@ header {
     align-items: center;
     padding: 0 24px;
     gap: 64px;
-    width: 988px;
     height: 444px;
     border-radius: 12px;
     background-color: #FCFCFC;
@@ -90,6 +92,7 @@ header {
 .main-content-right-text {
     display: flex;
     flex-direction: column;
+    width: 350px;
     gap: 12px;
     align-items: flex-start;
     text-align: left;
@@ -98,6 +101,7 @@ header {
 .main-content-left-text {
     display: flex;
     flex-direction: column;
+    width: 350px;
     gap: 12px;
     align-items: flex-end;
     text-align: right;
diff --git a/src/styles/pages/login.css b/src/styles/pages/login.css
new file mode 100644
index 00000000..c84569d5
--- /dev/null
+++ b/src/styles/pages/login.css
@@ -0,0 +1,136 @@
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 640px;
+    gap: 40px;
+}
+
+.logo {
+    width: 396px;
+    /*
+        svg라 그런지 width 설정 시
+        자동으로 height가 설정되지만 가독성을 위해 height를 작성해주었습니다.
+    */
+    height: 132px;
+}
+
+.content-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+    align-items: stretch;
+}
+
+.form-structure{
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: stretch;
+}
+
+.form-label {
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 24px;
+    color: #1F2937;
+}
+
+.form-input {
+    border: none;
+    background-color: #F3F4F6;
+    padding: 16px 24px;
+    border-radius: 12px;
+    width: 100%;
+}
+
+.from-input:focus {
+    border: 1px solid #3692FF;
+}
+
+.input-wrapper {
+    position: relative;
+}
+
+.input-icon {
+    position: absolute;
+    top: 50%;
+    right: 24px;
+    transform: translateY(-50%);
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    opacity: 0.6;
+}
+
+.input-icon:hover {
+    opacity: 1;
+}
+
+.login-button {
+    padding: 16px 124px;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 32px;
+    border-radius: 40px;
+}
+
+.social-login {
+    padding: 16px 24px;
+    border-radius: 8px;
+    background-color: #E6F2FF;
+    display: flex; 
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 26px;
+}
+
+.icon-list {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.icon-list a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 42px;
+}
+
+.google-icon {
+    width: 22px;
+    height: 22px;
+}
+
+.kakao-icon {
+    width: 26px;
+    height: 24px;
+}
+
+.signup-prompt {
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+}
+
+.signup-prompt span {
+    line-height: 24px;
+}
+
+.signup-prompt a {
+    line-height: 17px;
+    text-decoration: underline;
+    color: #3692FF;
+}
\ No newline at end of file
diff --git a/src/styles/pages/signup.css b/src/styles/pages/signup.css
new file mode 100644
index 00000000..a0ddd46a
--- /dev/null
+++ b/src/styles/pages/signup.css
@@ -0,0 +1,136 @@
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 640px;
+    gap: 40px;
+}
+
+.logo {
+    width: 396px;
+    /*
+        svg라 그런지 width 설정 시
+        자동으로 height가 설정되지만 가독성을 위해 height를 작성해주었습니다.
+    */
+    height: 132px;
+}
+
+.content-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+    align-items: stretch;
+}
+
+.form-structure{
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: stretch;
+}
+
+.form-label {
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 24px;
+    color: #1F2937;
+}
+
+.form-input {
+    border: none;
+    background-color: #F3F4F6;
+    padding: 16px 24px;
+    border-radius: 12px;
+    width: 100%;
+}
+
+.from-input:focus {
+    border: 1px solid #3692FF;
+}
+
+.input-wrapper {
+    position: relative;
+}
+
+.input-icon {
+    position: absolute;
+    top: 50%;
+    right: 24px;
+    transform: translateY(-50%);
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    opacity: 0.6;
+}
+
+.input-icon:hover {
+    opacity: 1;
+}
+
+.login-button {
+    padding: 16px 124px;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 32px;
+    border-radius: 40px;
+}
+
+.social-login {
+    padding: 16px 24px;
+    border-radius: 8px;
+    background-color: #E6F2FF;
+    display: flex; 
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 26px;
+}
+
+.icon-list {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.icon-list a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 42px;
+}
+
+.google-icon {
+    width: 22px;
+    height: 22px;
+}
+
+.kakao-icon {
+    width: 26px;
+    height: 24px;
+}
+
+.login-prompt {
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+}
+
+.login-prompt span {
+    line-height: 24px;
+}
+
+.login-prompt a {
+    line-height: 17px;
+    text-decoration: underline;
+    color: #3692FF;
+}
\ No newline at end of file