diff --git a/.DS_Store b/.DS_Store
index d6bd930fc..910bc0f38 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/img/Component 2.png b/img/Component 2.png
new file mode 100644
index 000000000..70bcf73b1
Binary files /dev/null and b/img/Component 2.png differ
diff --git a/img/Component 3.png b/img/Component 3.png
new file mode 100644
index 000000000..271002b7c
Binary files /dev/null and b/img/Component 3.png differ
diff --git a/img/logo.png b/img/logo.png
new file mode 100644
index 000000000..14c5674fb
Binary files /dev/null and b/img/logo.png differ
diff --git a/index.html b/index.html
index 027b264c0..ae11a646b 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
 
 <head>
     <meta charset="UTF-8">
@@ -10,14 +10,14 @@
 
 <body>
 
-    <header>
-        <div class="header-wrap">
-            <a href="/" class="logo">
-                <img src="/img/pandaFace.png">
-                <img src="/img/pandaLogo.png">
-            </a>
-            <a class="login" href="login/">로그인</a>
-        </div>
+    <header class="topBar">
+
+        <a href="/" class="logo">
+            <img src="/img/pandaFace.png">
+            <img src="/img/pandaLogo.png">
+        </a>
+        <a class="login" href="login/">로그인</a>
+
     </header>
 
     <main>
@@ -33,85 +33,84 @@
         </div>
 
 
-        <div class="elements">
+        <section class="elements">
 
-            <div class="element">
+            <article class="element">
 
                 <img src="/img/Img_home_01.png">
                 <div class="element-text-left">
-                    <div class="category">Hot item</div>
-                    <div class="element-main-text">인기 상품을 <br />
-                        확인해 보세요 </div>
-                    <div class="element-sub-text"> 가장 HOT한 중고거래 물품을 <br />
-                        판다 마켓에서 확인해 보세요</div>
+                    <span class="category">Hot item</span>
+                    <p class="element-main-text">인기 상품을 <br />
+                        확인해 보세요 </p>
+                    <p class="element-sub-text"> 가장 HOT한 중고거래 물품을 <br />
+                        판다 마켓에서 확인해 보세요</p>
                 </div>
-            </div>
+            </article>
 
-            <div class="element">
+            <article class="element">
 
                 <div class="element-text-right">
-                    <div class="category">Search</div>
-                    <div class="element-main-text">구매를 원하는 <br />
-                        상품을 검색하세요</div>
-                    <div class="element-sub-text">
+                    <span class="category">Search</span>
+                    <p class="element-main-text">구매를 원하는 <br />
+                        상품을 검색하세요</p>
+                    <p class="element-sub-text">
                         구매하고 싶은 물품은 검색해서 <br />
                         쉽게 찾아보세요
-                    </div>
+                    </p>
                 </div>
                 <img src="img/Img_home_02.png">
-            </div>
+            </article>
 
-            <div class="element">
+            <article class="element">
                 <img src="img/Img_home_03.png">
                 <div class="element-text-left">
-                    <div class="category">Register</div>
-                    <div class="element-main-text">판매를 원하는 <br />
-                        상품을 등록하세요</div>
-                    <div class="element-sub-text">
+                    <span class="category">Register</span>
+                    <p class="element-main-text">판매를 원하는 <br />
+                        상품을 등록하세요</p>
+                    <p class="element-sub-text">
                         어떤 물건이든 판매하고 싶은 상품을<br />
                         쉽게 등록하세요
-                    </div>
+                    </p>
                 </div>
-            </div>
-        </div>
+            </article>
+        </section>
 
         </div>
 
         <div class="frame">
             <div class="content">
-                <div class="frame-text">
+                <p class="frame-text">
                     믿을 수 있는 </br>
                     판다마켓 중고거래
-                </div>
-
             </div>
             <img class="frame-img2" src="/img/Img_home_bottom.png">
         </div>
 
-        <footer>
-            <div class="footer-wrap">
+        </div>
 
-                <div class="footer-text-1"> @codeit - 2024</div>
-                <div class="footer-text-2">
+        <footer class="bottomBar">
 
-                    <a href="privacy_policy/">Privacy Policy</a>
-                    <a href="FAQ/">FAQ</a>
+            <span class="footer-text-1"> @codeit - 2024</span>
+            <div class="footer-text-2">
+
+                <a href="privacy_policy/">Privacy Policy</a>
+                <a href="FAQ/">FAQ</a>
+
+            </div>
+            <div class="footer-icon">
+                <a href="https://www.facebook.com/" target="_blank">
+                    <img src="img/ic_facebook.png">
+                </a>
+                <a href="https://x.com/" target="_blank">
+                    <img src="img/ic_twitter.png">
+                </a>
+                <a href="https://www.youtube.com/" target="_blank">
+                    <img src="img/ic_youtube.png">
+                </a>
+                <a href="https://www.instagram.com/" target="_blank">
+                    <img src="img/ic_instagram.png">
+                </a>
 
-                </div>
-                <div class="footer-icon">
-                    <a href="https://www.facebook.com/" target="_blank">
-                        <img src="img/ic_facebook.png">
-                    </a>
-                    <a href="https://x.com/" target="_blank">
-                        <img src="img/ic_twitter.png">
-                    </a>
-                    <a href="https://www.youtube.com/" target="_blank">
-                        <img src="img/ic_youtube.png">
-                    </a>
-                    <a href="https://www.instagram.com/" target="_blank">
-                        <img src="img/ic_instagram.png">
-                    </a>
-                </div>
 
             </div>
 
diff --git a/login/index.html b/login/index.html
index 279cc61a3..244310003 100644
--- a/login/index.html
+++ b/login/index.html
@@ -1,14 +1,65 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>login</title>
+    <link rel="stylesheet" href="style.css" />
 </head>
 
-<body>
-    login
+<body class="loginPage">
+    <a href="./">
+        <div class="logo">
+            <img src="/img/logo.png" />
+        </div>
+    </a>
+
+
+    <main>
+        <form class="login">
+            <div class="login-input">
+                <label for="email">이메일</label>
+                <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요" />
+            </div>
+
+            <div class="login-input">
+                <label for="password">비밀번호</label>
+                <input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요" />
+
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                    class="bi bi-eye-slash" viewBox="0 0 16 16">
+                    <path
+                        d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />
+                    <path
+                        d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />
+                    <path
+                        d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />
+                </svg>
+
+            </div>
+
+            <button type="submit" class="login-button">로그인</button>
+
+            <div class="easy-login">
+                <div>간편로그인하기</div>
+                <div class="platform">
+                    <a href="http://www.google.com">
+                        <img src="/img/Component 2.png" alt="구글" />
+                    </a>
+                    <a href="https://www.kakaocorp.com/page/">
+                        <img src="/img/Component 3.png" alt="카카오톡" />
+                    </a>
+                </div>
+            </div>
+
+            <div>
+                판다마켓이 처음이신가요?
+                <a href="/signup/">회원가입</a>
+            </div>
+        </form>
+    </main>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/login/style.css b/login/style.css
new file mode 100644
index 000000000..13a0f7002
--- /dev/null
+++ b/login/style.css
@@ -0,0 +1,111 @@
+* {
+    box-sizing: border-box;
+}
+
+.loginPage {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+}
+
+
+.logo {
+    margin-top: 10px;
+}
+
+.logo img {
+    width: 396px;
+    height: 132px;
+    object-fit: contain;
+}
+
+label {
+    font-size: 18px;
+    font-weight: 700;
+}
+
+input {
+    width: 640px;
+    height: 56px;
+    border-radius: 12px;
+    background-color: #F3F4F6;
+    border: none;
+    color: #9CA3AF;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    padding: 0 15px;
+    outline: none;
+    /* 기본 outline 제거 */
+}
+
+input:focus {
+    border: 2px solid #3692FF;
+
+}
+
+input:focus-out {
+    border: none;
+}
+
+
+.login {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 24px;
+}
+
+.login-input {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.login-button {
+    width: 640px;
+    height: 56px;
+    border-radius: 40px;
+    background-color: #9CA3AF;
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 600;
+    color: #FFFFFF;
+    border: none;
+}
+
+.login-button:hover {
+    background-color: #3692FF;
+}
+
+.easy-login {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 30px;
+    align-items: center;
+    width: 640px;
+    height: 74px;
+    border-radius: 8px;
+    background-color: #E6F2FF;
+}
+
+.platform {
+    display: flex;
+    gap: 20px;
+}
+
+.login-input svg {
+    position: absolute;
+    left: 94%;
+    transform: translateY(350%);
+    pointer-events: none;
+    /* 눈 모양 아이콘 */
+}
\ No newline at end of file
diff --git a/signup/index.html b/signup/index.html
new file mode 100644
index 000000000..3e1b0fd75
--- /dev/null
+++ b/signup/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>signup</title>
+    <link rel="stylesheet" href="style.css" />
+</head>
+
+<body class="signupPage">
+
+    <a href="./">
+        <div class="logo">
+            <img src="/img/logo.png" />
+        </div>
+    </a>
+
+
+    <main>
+        <form class="signup">
+            <div class="signup-input">
+                <label for="email">이메일</label>
+                <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요" />
+            </div>
+            <div class="signup-input">
+                <label for="nickname">닉네임</label>
+                <input id="nickname" name="nickname" type="text" placeholder="닉네임을 입력해주세요" />
+            </div>
+            <div class="signup-input">
+                <label for="password">비밀번호</label>
+                <input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요" />
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                    class="bi bi-eye-slash" viewBox="0 0 16 16">
+                    <path
+                        d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />
+                    <path
+                        d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />
+                    <path
+                        d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />
+                </svg>
+            </div>
+
+            <div class="signup-input">
+                <label for="password-check">비밀번호 확인</label>
+                <input id="password-check" name="password-check" type="password" placeholder="비밀번호를 다시 한 번 입력해주세요" />
+
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                    class="bi bi-eye-slash" viewBox="0 0 16 16">
+                    <path
+                        d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />
+                    <path
+                        d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />
+                    <path
+                        d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />
+                </svg>
+
+
+            </div>
+
+            <button type="submit" class="signup-button">회원가입</button>
+
+            <div class="easy-login">
+                <div> 간편로그인하기</div>
+                <div class="platform">
+                    <a href="http://www.google.com">
+                        <img src="/img/Component 2.png" alt="구글" />
+                    </a>
+                    <a href="https://www.kakaocorp.com/page/">
+                        <img src="/img/Component 3.png" alt="카카오톡" />
+                    </a>
+                </div>
+            </div>
+
+            <div>
+                이미 회원이신가요?
+                <a href="/login/">로그인</a>
+            </div>
+        </form>
+    </main>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/signup/style.css b/signup/style.css
new file mode 100644
index 000000000..d7f816b9b
--- /dev/null
+++ b/signup/style.css
@@ -0,0 +1,111 @@
+* {
+    box-sizing: border-box;
+}
+
+.signupPage {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+}
+
+
+.logo {
+    margin-top: 10px;
+}
+
+.logo img {
+    width: 396px;
+    height: 132px;
+    object-fit: contain;
+}
+
+label {
+    font-size: 18px;
+    font-weight: 700;
+}
+
+input {
+    width: 640px;
+    height: 56px;
+    border-radius: 12px;
+    background-color: #F3F4F6;
+    border: none;
+    color: #9CA3AF;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    padding: 0 15px;
+    outline: none;
+    /* 기본 outline 제거 */
+}
+
+input:focus {
+    border: 2px solid #3692FF;
+
+}
+
+input:focus-out {
+    border: none;
+}
+
+
+.signup {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 24px;
+}
+
+.signup-input {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.signup-button {
+    width: 640px;
+    height: 56px;
+    border-radius: 40px;
+    background-color: #9CA3AF;
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 600;
+    color: #FFFFFF;
+    border: none;
+}
+
+.signup-button:hover {
+    background-color: #3692FF;
+}
+
+.easy-login {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 30px;
+    align-items: center;
+    width: 640px;
+    height: 74px;
+    border-radius: 8px;
+    background-color: #E6F2FF;
+}
+
+.platform {
+    display: flex;
+    gap: 20px;
+}
+
+.signup-input svg {
+    position: absolute;
+    left: 94%;
+    transform: translateY(350%);
+    pointer-events: none;
+    /* 눈 모양 아이콘 */
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index b1506b49e..abb240cdd 100644
--- a/style.css
+++ b/style.css
@@ -57,8 +57,9 @@ search 부분 텍스트 오른쪽 정렬  */
     font-weight: 500;
 }
 
-
-header {
+/* 
+맨 윗줄 판다마켓 로그인  */
+.topBar {
     position: fixed;
     top: 0;
     left: 0;
@@ -66,11 +67,6 @@ header {
     height: 70px;
     background-color: #ffffff;
     z-index: 1;
-}
-
-/* 
-맨 윗줄 판다마켓 로그인  */
-.header-wrap {
     display: flex;
     justify-content: space-between;
     padding: 10px 200px;
@@ -78,6 +74,7 @@ header {
 }
 
 
+
 .category {
     color: #3692FF;
     font-weight: 700;
@@ -166,14 +163,10 @@ header {
 
 
 
-footer {
+.bottomBar {
     background-color: #111827;
     width: 100%;
     height: 160px;
-}
-
-
-.footer-wrap {
     display: flex;
     justify-content: space-between;
     padding: 10px 200px;
@@ -181,6 +174,9 @@ footer {
     padding: 32px 200px;
 }
 
+
+.footer-wrap {}
+
 .footer-text-1 {
     color: #9CA3AF;
 }
