diff --git a/css/login.css b/css/login.css
index 9f1f97008..85a48b2b8 100644
--- a/css/login.css
+++ b/css/login.css
@@ -58,39 +58,51 @@ h1 {
   width: 100%;
 }
 
-.input-email__container,
-.input-password__container {
+.form__container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.form__group {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%;
 }
 
-.input-email,
-.input-password {
+.form__group-input {
   height: 56px;
   border-radius: 12px;
   border: 0px;
   background-color: #f3f4f6;
   padding: 15px 24px;
+  width: 100%;
 }
 
-.input-email,
-.input-password,
-.input-email::placeholder,
-.input-password::placeholder {
+.form__group-input,
+.form__group-input::placeholder {
   font-size: 16px;
   line-height: 26px;
   font-weight: 400;
 }
 
-.input-email__text,
-.input-password__text {
+.form__group-label {
   font-size: 18px;
   font-weight: 700;
   line-height: 26px;
 }
 
+.form__group-input-container {
+  position: relative;
+}
+
+.form__group-img {
+  position: absolute;
+  right: 24px;
+  top: 15px;
+}
+
 .login-button {
   width: 100%;
   height: 56px;
@@ -104,9 +116,14 @@ h1 {
   font-size: 20px;
   line-height: 32px;
   font-weight: 600;
+  border: 0;
+}
+
+.login-button:hover {
+  cursor: pointer;
 }
 
-.sns-login__container {
+.social-login__container {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -116,14 +133,14 @@ h1 {
   background-color: #e6f2ff;
 }
 
-.sns-login__icon {
+.social-login__icon {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 16px;
 }
 
-.sns-login__container > p {
+.social-login__container > p {
   font-size: 16px;
   line-height: 26px;
   font-weight: 500;
diff --git a/css/signup.css b/css/signup.css
index 2ec299713..8960b7688 100644
--- a/css/signup.css
+++ b/css/signup.css
@@ -58,45 +58,55 @@ h1 {
   width: 100%;
 }
 
-.input-email__container,
-.input-password__container,
-.input-nickname__container,
-.input-check-password__container {
+.form__container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.form__group {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%;
 }
 
-.input-email,
-.input-password,
-.input-nickname,
-.input-check-password {
+.form__group-input {
   height: 56px;
   border-radius: 12px;
   border: 0px;
   background-color: #f3f4f6;
   padding: 15px 24px;
+  width: 100%;
+}
+
+.form__group-input:focus {
+  border: 1px solid #3692ff;
+  outline: none;
 }
 
-.input-email::placeholder,
-.input-password::placeholder,
-.input-nickname::placeholder,
-.input-check-password::placeholder {
+.form__group-input::placeholder {
   font-size: 16px;
   line-height: 26px;
   font-weight: 400;
 }
 
-.input-email__text,
-.input-password__text,
-.input-nickname__text,
-.input-check-password__text {
+.form__group-label {
   font-size: 18px;
   font-weight: 700;
   line-height: 26px;
 }
 
+.form__group-input-container {
+  position: relative;
+}
+
+.form__group-img {
+  position: absolute;
+  top: 15px;
+  right: 24px;
+}
+
 .signup-button {
   width: 100%;
   height: 56px;
@@ -110,9 +120,15 @@ h1 {
   font-size: 20px;
   line-height: 32px;
   font-weight: 600;
+  border: 0;
+}
+
+.signup-button:hover,
+.form__group-img:hover {
+  cursor: pointer;
 }
 
-.sns-login__container {
+.social-login__container {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -122,14 +138,14 @@ h1 {
   background-color: #e6f2ff;
 }
 
-.sns-login__icon {
+.social-login__icon {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 16px;
 }
 
-.sns-login__container > p {
+.social-login__container > p {
   font-size: 16px;
   line-height: 26px;
   font-weight: 500;
diff --git a/img/index/Img_home_top.png b/img/Img_home_top.png
similarity index 100%
rename from img/index/Img_home_top.png
rename to img/Img_home_top.png
diff --git a/img/index/banner-img.png b/img/banner-img.png
similarity index 100%
rename from img/index/banner-img.png
rename to img/banner-img.png
diff --git a/img/login/btn_visibility_on_24px.png b/img/btn_visibility_on_24px.png
similarity index 100%
rename from img/login/btn_visibility_on_24px.png
rename to img/btn_visibility_on_24px.png
diff --git a/img/login/google-icon.png b/img/google-icon.png
similarity index 100%
rename from img/login/google-icon.png
rename to img/google-icon.png
diff --git a/img/index/hot-items-img.png b/img/hot-items-img.png
similarity index 100%
rename from img/index/hot-items-img.png
rename to img/hot-items-img.png
diff --git a/img/index/ic_facebook.png b/img/ic_facebook.png
similarity index 100%
rename from img/index/ic_facebook.png
rename to img/ic_facebook.png
diff --git a/img/index/ic_instagram.png b/img/ic_instagram.png
similarity index 100%
rename from img/index/ic_instagram.png
rename to img/ic_instagram.png
diff --git a/img/index/ic_twitter.png b/img/ic_twitter.png
similarity index 100%
rename from img/index/ic_twitter.png
rename to img/ic_twitter.png
diff --git a/img/index/ic_youtube.png b/img/ic_youtube.png
similarity index 100%
rename from img/index/ic_youtube.png
rename to img/ic_youtube.png
diff --git a/img/login/kakaotalk-icon.png b/img/kakaotalk-icon.png
similarity index 100%
rename from img/login/kakaotalk-icon.png
rename to img/kakaotalk-icon.png
diff --git a/img/index/register-img.png b/img/register-img.png
similarity index 100%
rename from img/index/register-img.png
rename to img/register-img.png
diff --git a/img/index/search-img.png b/img/search-img.png
similarity index 100%
rename from img/index/search-img.png
rename to img/search-img.png
diff --git a/img/signup/google-icon.png b/img/signup/google-icon.png
deleted file mode 100644
index f75dc7616..000000000
Binary files a/img/signup/google-icon.png and /dev/null differ
diff --git a/img/signup/kakaotalk-icon.png b/img/signup/kakaotalk-icon.png
deleted file mode 100644
index bd7678005..000000000
Binary files a/img/signup/kakaotalk-icon.png and /dev/null differ
diff --git "a/img/signup/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png" "b/img/signup/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png"
deleted file mode 100644
index e74e7d911..000000000
Binary files "a/img/signup/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png" and /dev/null differ
diff --git "a/img/login/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png" "b/img/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png"
similarity index 100%
rename from "img/login/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png"
rename to "img/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png"
diff --git "a/img/index/\355\214\220\353\213\244\354\226\274\352\265\264.png" "b/img/\355\214\220\353\213\244\354\226\274\352\265\264.png"
similarity index 100%
rename from "img/index/\355\214\220\353\213\244\354\226\274\352\265\264.png"
rename to "img/\355\214\220\353\213\244\354\226\274\352\265\264.png"
diff --git a/index.html b/index.html
index 19e66502a..92d929ea5 100644
--- a/index.html
+++ b/index.html
@@ -13,12 +13,12 @@
         <a href="/" class="header__logo">
           <img
             class="header__logo-img"
-            src="/img/index/판다얼굴.png"
+            src="/img/판다얼굴.png"
             alt="판다마켓 로고"
           />
           <span class="header__logo-text">판다마켓</span>
         </a>
-        <a href="/login" class="header__login-button">로그인</a>
+        <a href="/login.html" class="header__login-button">로그인</a>
       </div>
     </header>
     <section class="main-banner">
@@ -27,16 +27,13 @@
           <h1>일상의 모든 물건을<br />거래해 보세요</h1>
           <a href="/items" class="main-banner__click-button">구경하러 가기</a>
         </div>
-        <img
-          src="/img/index/Img_home_top.png"
-          alt="홈 페이지 상단 배너 이미지"
-        />
+        <img src="/img/Img_home_top.png" alt="홈 페이지 상단 배너 이미지" />
       </div>
     </section>
     <section class="feature-section">
       <div class="feature-section__container">
         <img
-          src="/img/index/hot-items-img.png"
+          src="/img/hot-items-img.png"
           alt="핫 아이템"
           class="feature-section__image"
         />
@@ -54,7 +51,7 @@ <h2 class="feature-section__content-box__title">
     <section class="feature-section">
       <div class="feature-section__container">
         <img
-          src="/img/index/search-img.png"
+          src="/img/search-img.png"
           alt="검색 아이템"
           class="feature-section__image feature-section__image-left"
         />
@@ -74,7 +71,7 @@ <h2 class="feature-section__content-box__title">
     <section class="feature-section">
       <div class="feature-section__container">
         <img
-          src="/img/index/register-img.png"
+          src="/img/register-img.png"
           alt="등록 아이템"
           class="feature-section__image"
         />
@@ -94,7 +91,7 @@ <h2 class="feature-section__content-box__title">
         <div class="sub-banner__text-container">
           <h1>믿을 수 있는<br />판다마켓 중고 거래</h1>
         </div>
-        <img src="/img/index/banner-img.png" alt="서브 배너 이미지" />
+        <img src="/img/banner-img.png" alt="서브 배너 이미지" />
       </div>
     </section>
     <footer class="footer-section">
@@ -107,16 +104,16 @@ <h1>믿을 수 있는<br />판다마켓 중고 거래</h1>
           </li>
           <li>
             <a href="https://www.facebook.com" target="_blank">
-              <img src="/img/index/ic_facebook.png" alt="facebook" />
+              <img src="/img/ic_facebook.png" alt="facebook" />
             </a>
             <a href="https://www.twitter.com" target="_blank">
-              <img src="/img/index/ic_twitter.png" alt="twitter" />
+              <img src="/img/ic_twitter.png" alt="twitter" />
             </a>
             <a href="https://www.youtube.com" target="_blank">
-              <img src="/img/index/ic_youtube.png" alt="youtube" />
+              <img src="/img/ic_youtube.png" alt="youtube" />
             </a>
             <a href="https://www.instagram.com" target="_blank">
-              <img src="/img/index/ic_instagram.png" alt="instagram" />
+              <img src="/img/ic_instagram.png" alt="instagram" />
             </a>
           </li>
         </ul>
diff --git a/login.html b/login.html
index 1b79e17ec..246250ed6 100644
--- a/login.html
+++ b/login.html
@@ -9,52 +9,64 @@
   </head>
   <body>
     <section class="login">
-      <div class="logo__container">
-        <img src="/img/login/큰판다얼굴.png" alt="판다얼굴" class="logo__img" />
+      <header class="logo__container">
+        <a href="/" class="logo-img__link">
+          <img src="/img/큰판다얼굴.png" alt="판다얼굴" class="logo__img" />
+        </a>
         <a href="/" class="logo__link"><h1>판다마켓</h1></a>
-      </div>
+      </header>
       <div class="login__container">
-        <div class="input-email__container">
-          <p class="input-email__text">이메일</p>
-          <input
-            type="text"
-            placeholder="이메일을 입력해주세요"
-            class="input-email"
-          />
-        </div>
-        <div class="input-password__container">
-          <p class="input-password__text">비밀번호</p>
-          <input
-            type="password"
-            name="userPassword"
-            id="password"
-            placeholder="비밀번호를 입력해주세요"
-            class="input-password"
-          />
-        </div>
-        <a href="/login" class="login-button">로그인</a>
-        <div class="sns-login__container">
+        <form action="/login" method="POST" class="form__container">
+          <div class="form__group">
+            <label class="form__group-label" for="focus">이메일</label>
+            <input
+              type="email"
+              placeholder="이메일을 입력해주세요"
+              class="form__group-input"
+              name="email"
+            />
+          </div>
+          <div class="form__group">
+            <label class="form__group-label" for="focus">비밀번호</label>
+            <div class="form__group-input-container">
+              <input
+                type="password"
+                name="password"
+                id="password"
+                placeholder="비밀번호를 입력해주세요"
+                class="form__group-input"
+              />
+              <img
+                src="/img/btn_visibility_on_24px.png"
+                alt="비밀번호 가림 이미지"
+                class="form__group-img"
+              />
+            </div>
+          </div>
+          <button type="submit" class="login-button">로그인</button>
+        </form>
+        <div class="social-login__container">
           <p>간편 로그인하기</p>
-          <div class="sns-login__icon">
+          <div class="social-login__icon">
             <a href="https://www.google.com/">
               <img
-                src="/img/login/google-icon.png"
+                src="/img/google-icon.png"
                 alt="구글 아이콘"
-                class="sns-login__google-icon"
+                class="social-login__google-icon"
               />
             </a>
             <a href="“https://www.kakaocorp.com/page/">
               <img
-                src="/img/login/kakaotalk-icon.png"
+                src="/img/kakaotalk-icon.png"
                 alt="카카오톡 아이콘"
-                class="sns-login__kakao-icon"
+                class="social-login__kakao-icon"
               />
             </a>
           </div>
         </div>
         <div class="sign-up__container">
           <p>판다마켓이 처음이신가요?</p>
-          <a href="/signup" class="sign-up__link">회원가입</a>
+          <a href="/signup.html" class="sign-up__link">회원가입</a>
         </div>
       </div>
     </section>
diff --git a/signup.html b/signup.html
index 1c5afee21..809d6f59e 100644
--- a/signup.html
+++ b/signup.html
@@ -9,67 +9,88 @@
   </head>
   <body>
     <section class="signup">
-      <div class="logo__container">
-        <img src="/img/login/큰판다얼굴.png" alt="판다얼굴" class="logo__img" />
+      <header class="logo__container">
+        <a href="/" class="logo-img__link">
+          <img src="/img/큰판다얼굴.png" alt="판다얼굴" class="logo__img" />
+        </a>
         <a href="/" class="logo__link"><h1>판다마켓</h1></a>
-      </div>
+      </header>
       <div class="signup__container">
-        <div class="input-email__container">
-          <p class="input-email__text">이메일</p>
-          <input
-            type="text"
-            placeholder="이메일을 입력해주세요"
-            class="input-email"
-          />
-        </div>
-        <div class="input-nickname__container">
-          <p class="input-nickname__text">닉네임</p>
-          <input
-            type="text"
-            placeholder="닉네임을 입력해주세요"
-            class="input-nickname"
-          />
-        </div>
-        <div class="input-password__container">
-          <p class="input-password__text">비밀번호</p>
-          <input
-            type="password"
-            placeholder="비밀번호를 입력해주세요"
-            class="input-password"
-            id="password"
-          />
-        </div>
-        <div class="input-check-password__container">
-          <p class="input-check-password__text">비밀번호확인</p>
-          <input
-            type="text"
-            placeholder="비밀번호를 다시 한 번 입력해주세요"
-            class="input-check-password"
-          />
-        </div>
-        <a href="/signup" class="signup-button">회원가입</a>
-        <div class="sns-login__container">
+        <form action="/signup" method="POST" class="form__container">
+          <div class="form__group">
+            <label class="form__group-label">이메일</label>
+            <input
+              type="email"
+              placeholder="이메일을 입력해주세요"
+              class="form__group-input"
+              name="email"
+            />
+          </div>
+          <div class="form__group">
+            <label class="form__group-label">닉네임</label>
+            <input
+              type="text"
+              placeholder="닉네임을 입력해주세요"
+              class="form__group-input"
+              name="nickname"
+            />
+          </div>
+          <div class="form__group">
+            <label class="form__group-label">비밀번호</label>
+            <div class="form__group-input-container">
+              <input
+                type="password"
+                placeholder="비밀번호를 입력해주세요"
+                class="form__group-input"
+                id="password"
+              />
+              <img
+                src="/img/btn_visibility_on_24px.png"
+                alt="비밀번호 가림 이미지"
+                class="form__group-img"
+              />
+            </div>
+          </div>
+          <div class="form__group">
+            <label class="form__group-label">비밀번호확인</label>
+            <div class="form__group-input-container">
+              <input
+                type="password"
+                name="password"
+                placeholder="비밀번호를 다시 한 번 입력해주세요"
+                class="form__group-input"
+              />
+              <img
+                src="/img/btn_visibility_on_24px.png"
+                alt="비밀번호 가림 이미지"
+                class="form__group-img"
+              />
+            </div>
+          </div>
+          <button type="submit" class="signup-button">회원가입</button>
+        </form>
+        <div class="social-login__container">
           <p>간편 로그인하기</p>
-          <div class="sns-login__icon">
+          <div class="social-login__icon">
             <a href="https://www.google.com/">
               <img
-                src="/img/signup/google-icon.png"
+                src="/img/google-icon.png"
                 alt="구글 아이콘"
-                class="sns-login__google-icon"
+                class="social-login__google-icon"
               />
             </a>
             <a href="“https://www.kakaocorp.com/page/">
               <img
-                src="/img/signup/kakaotalk-icon.png"
+                src="/img/kakaotalk-icon.png"
                 alt="카카오톡 아이콘"
-                class="sns-login__kakao-icon"
+                class="social-login__kakao-icon"
               />
             </a>
           </div>
         </div>
         <div class="login__container">
           <p>이미 회원이신가요?</p>
-          <a href="/login" class="login__link">로그인</a>
+          <a href="/login.html" class="login__link">로그인</a>
         </div>
       </div>
     </section>