diff --git a/auth.css b/auth.css
index ca45e701..17c00597 100644
--- a/auth.css
+++ b/auth.css
@@ -5,11 +5,26 @@
 
 .head-img {
   text-align: center;
-  padding: 20px;
+  padding-bottom: 50px;
+}
+
+.login-link {
+  color: #f3f4f6;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
 }
 
 .pandaMarketImg {
-  max-width: 396px;
+  max-width: 103.53px;
+  width: 100%;
+  height: auto;
+}
+
+.pandaMarketImg-name {
+  max-width: 266px;
   width: 100%;
   height: auto;
 }
@@ -75,17 +90,16 @@
 }
 
 .login-button {
-  text-decoration: none;
   color: #f3f4f6;
   border: none;
   border-radius: 40px;
   background-color: #3692ff;
-  font-size: 20px;
-  font-weight: 600;
   line-height: 32px;
   width: 100%;
   height: 56px;
   cursor: pointer;
+  font-size: 20px;
+  font-weight: 600;
 }
 
 .blue-section {
@@ -119,6 +133,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 4px;
 }
 
 .advice {
@@ -148,7 +163,51 @@
   padding-left: 20px;
 }
 
-@media (max-width: 767px) and (min-width: 375px) {
+.error {
+  border: 1px solid red;
+}
+
+#error-message {
+  color: red;
+  font-size: 14px;
+  font-weight: 600;
+  display: none;
+  margin-left: 15px;
+}
+
+#error-password {
+  color: red;
+  font-size: 14px;
+  font-weight: 600;
+  display: none;
+  margin-left: 15px;
+}
+
+#error-nicname {
+  color: red;
+  font-size: 14px;
+  font-weight: 600;
+  display: none;
+  margin-left: 15px;
+}
+
+#error-checkPassword {
+  color: red;
+  font-size: 14px;
+  font-weight: 600;
+  display: none;
+  margin-left: 15px;
+}
+
+#signupBtn:disabled {
+  background-color: #9ca3af;
+}
+
+#loginBtn:disabled {
+  background-color: #9ca3af;
+}
+
+@media (max-width: 767px) {
   .content {
     max-width: 400px;
     width: 100%;
@@ -156,8 +215,16 @@
     margin: 100px auto;
   }
   .pandaMarketImg {
-    max-width: 197px;
+    max-width: 51px;
     height: auto;
     width: 100%;
   }
+  .pandaMarketImg-name {
+    max-width: 133px;
+    height: auto;
+    width: 100%;
+  }
+  .login-link {
+    gap: 10px;
+  }
 }
diff --git a/img/logo.png b/img/logo.png
deleted file mode 100644
index 64260994..00000000
Binary files a/img/logo.png and /dev/null differ
diff --git a/img/logoHead.png b/img/logoHead.png
new file mode 100644
index 00000000..137fdaac
Binary files /dev/null and b/img/logoHead.png differ
diff --git a/img/logoName.png b/img/logoName.png
new file mode 100644
index 00000000..0d18b208
Binary files /dev/null and b/img/logoName.png differ
diff --git a/index.html b/index.html
index 415f0d60..bd3c3eda 100644
--- a/index.html
+++ b/index.html
@@ -17,10 +17,11 @@
       <div class="container">
         <div class="header-container">
           <a class="login-link" href="/">
-            <img class="title-logo" src="img/logo.png" />
+            <img class="title-logo" src="img/logoHead.png" />
+            <img class="title-logo-name" src="img/logoName.png" />
           </a>
           <div class="login">
-            <a class="login-link" href="login.html">로그인</a>
+            <a class="login-link-see" href="login.html">로그인</a>
           </div>
         </div>
       </div>
@@ -34,7 +35,7 @@ <h2 class="title">
               거래해 보세요
             </h2>
             <div class="button-buy">
-              <a class="login-link" href="/items">구경하러 가기</a>
+              <a class="login-link-see" href="/items">구경하러 가기</a>
             </div>
           </div>
           <img class="panda-pic" src="img/panda1.png" alt="fashionist_panda" />
diff --git a/login.html b/login.html
index 49aa1ed4..fe6ff8d6 100644
--- a/login.html
+++ b/login.html
@@ -16,7 +16,8 @@
     <div class="content">
       <div class="head-img">
         <a class="login-link" href="/">
-          <img class="pandaMarketImg" src="img/logo.png" />
+          <img class="pandaMarketImg" src="img/logoHead.png" />
+          <img class="pandaMarketImg-name" src="img/logoName.png" />
         </a>
       </div>
       <form action="/login" method="post">
@@ -29,6 +30,7 @@
             class="userName"
             placeholder="이메일을 입력해주세요"
           />
+          <div id="error-message"></div>
           <label for="userPassword" class="userPassword-label">비밀번호</label>
           <input
             type="password"
@@ -37,9 +39,12 @@
             class="userPassword"
             placeholder="비밀번호를 입력해주세요"
           />
+          <div id="error-password"></div>
         </div>
         <div class="content-login">
-          <button type="submit" class="login-button">로그인</button>
+          <button type="submit" class="login-button" id="loginBtn" disabled>
+            로그인
+          </button>
         </div>
       </form>
       <div>
@@ -64,5 +69,6 @@
         <a class="membership" href="signup.html">회원가입</a>
       </div>
     </div>
+    <script src="login.js"></script>
   </body>
 </html>
diff --git a/login.js b/login.js
new file mode 100644
index 00000000..d8bb465c
--- /dev/null
+++ b/login.js
@@ -0,0 +1,81 @@
+const emailInput = document.getElementById("userName");
+const passwordInput = document.getElementById("userPassword");
+
+const errorMessage = document.getElementById("error-message");
+const errorPassword = document.getElementById("error-password");
+
+const loginBtn = document.getElementById("loginBtn");
+
+document.addEventListener("DOMContentLoaded", () => {
+  emailInput.addEventListener("input", () => {
+    if (emailInput.value !== "" && emailInput.value.includes("@")) {
+      emailInput.classList.remove("error");
+      errorMessage.textContent = "";
+      errorMessage.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  passwordInput.addEventListener("input", () => {
+    if (passwordInput.value.length >= 8) {
+      passwordInput.classList.remove("error");
+      errorPassword.textContent = "";
+      errorPassword.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  emailInput.addEventListener("focusout", () => {
+    if (emailInput.value === "") {
+      emailInput.classList.add("error");
+      errorMessage.textContent = "잘못된 이메일입니다.";
+      errorMessage.style.display = "block";
+    } else if (!emailInput.value.includes("@")) {
+      emailInput.classList.add("error");
+      errorMessage.textContent = "잘못된 이메일 형식입니다.";
+      errorMessage.style.display = "block";
+    } else {
+      emailInput.classList.remove("error");
+      errorMessage.textContent = "";
+      errorMessage.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  passwordInput.addEventListener("focusout", () => {
+    if (passwordInput.value === "") {
+      passwordInput.classList.add("error");
+      errorPassword.textContent = "비밀번호를 입력해주세요";
+      errorPassword.style.display = "block";
+    } else if (passwordInput.value.length < 8) {
+      passwordInput.classList.add("error");
+      errorPassword.textContent = "비밀번호를 8자 이상 입력해주세요.";
+      errorPassword.style.display = "block";
+    } else {
+      passwordInput.classList.remove("error");
+      errorPassword.textContent = "";
+      errorPassword.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  loginBtn.addEventListener("click", function (e) {
+    e.preventDefault();
+    if (!loginBtn.disabled) {
+      window.location.href = "/item";
+    }
+  });
+});
+
+function updateButtonState() {
+  const hasError =
+    emailInput.classList.contains("error") ||
+    passwordInput.classList.contains("error");
+
+  const isFilled = emailInput.value !== "" && passwordInput.value.length >= 8;
+
+  const shouldEnable = !hasError && isFilled;
+
+  loginBtn.disabled = !shouldEnable;
+}
+//비활성화 시킨 버튼 어떻게 활성화 시킬지 모르겠어서 updateButtonState()부분은 챗GPT의 도움을 받았습니다. 코드 보면서 더 공부하겠습니다.
diff --git a/script.js b/script.js
new file mode 100644
index 00000000..032200d0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,135 @@
+const emailInput = document.getElementById("userName");
+const passwordInput = document.getElementById("userPassword");
+const nicnameInput = document.getElementById("nicname");
+const checkPasswordInput = document.getElementById("checkPassword");
+
+const errorMessage = document.getElementById("error-message");
+const errorPassword = document.getElementById("error-password");
+const errorNicname = document.getElementById("error-nicname");
+const errorCheckPassword = document.getElementById("error-checkPassword");
+
+const signupBtn = document.getElementById("signupBtn");
+
+document.addEventListener("DOMContentLoaded", () => {
+  emailInput.addEventListener("input", () => {
+    if (emailInput.value !== "" && emailInput.value.includes("@")) {
+      emailInput.classList.remove("error");
+      errorMessage.textContent = "";
+      errorMessage.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  passwordInput.addEventListener("input", () => {
+    if (passwordInput.value.length >= 8) {
+      passwordInput.classList.remove("error");
+      errorPassword.textContent = "";
+      errorPassword.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  nicnameInput.addEventListener("input", () => {
+    if (nicnameInput.value !== "") {
+      nicnameInput.classList.remove("error");
+      errorNicname.textContent = "";
+      errorNicname.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  checkPasswordInput.addEventListener("input", () => {
+    if (checkPasswordInput.value === passwordInput.value) {
+      checkPasswordInput.classList.remove("error");
+      errorCheckPassword.textContent = "";
+      errorCheckPassword.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  emailInput.addEventListener("focusout", () => {
+    if (emailInput.value === "") {
+      emailInput.classList.add("error");
+      errorMessage.textContent = "잘못된 이메일입니다.";
+      errorMessage.style.display = "block";
+    } else if (!emailInput.value.includes("@")) {
+      emailInput.classList.add("error");
+      errorMessage.textContent = "잘못된 이메일 형식입니다.";
+      errorMessage.style.display = "block";
+    } else {
+      emailInput.classList.remove("error");
+      errorMessage.textContent = "";
+      errorMessage.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  passwordInput.addEventListener("focusout", () => {
+    if (passwordInput.value === "") {
+      passwordInput.classList.add("error");
+      errorPassword.textContent = "비밀번호를 입력해주세요";
+      errorPassword.style.display = "block";
+    } else if (passwordInput.value.length < 8) {
+      passwordInput.classList.add("error");
+      errorPassword.textContent = "비밀번호를 8자 이상 입력해주세요.";
+      errorPassword.style.display = "block";
+    } else {
+      passwordInput.classList.remove("error");
+      errorPassword.textContent = "";
+      errorPassword.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  nicnameInput.addEventListener("focusout", () => {
+    if (nicnameInput.value === "") {
+      nicnameInput.classList.add("error");
+      errorNicname.textContent = "닉네임을 입력해주세요.";
+      errorNicname.style.display = "block";
+    } else {
+      nicnameInput.classList.remove("error");
+      errorNicname.textContent = "";
+      errorNicname.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  checkPasswordInput.addEventListener("focusout", () => {
+    if (checkPasswordInput.value !== passwordInput.value) {
+      checkPasswordInput.classList.add("error");
+      errorCheckPassword.textContent = "비밀번호가 일치하지 않습니다.";
+      errorCheckPassword.style.display = "block";
+    } else {
+      checkPasswordInput.classList.remove("error");
+      errorCheckPassword.textContent = "";
+      errorCheckPassword.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  signupBtn.addEventListener("click", function (e) {
+    e.preventDefault();
+    if (!signupBtn.disabled) {
+      window.location.href = "login.html";
+    }
+  });
+});
+
+function updateButtonState() {
+  const hasError =
+    emailInput.classList.contains("error") ||
+    passwordInput.classList.contains("error") ||
+    nicnameInput.classList.contains("error") ||
+    checkPasswordInput.classList.contains("error");
+
+  const isFilled =
+    emailInput.value !== "" &&
+    passwordInput.value !== "" &&
+    nicnameInput.value !== "" &&
+    checkPasswordInput.value === passwordInput.value;
+
+  const shouldEnable = !hasError && isFilled;
+
+  signupBtn.disabled = !shouldEnable;
+}
+//비활성화 시킨 버튼 어떻게 활성화 시킬지 모르겠어서 챗GPT의 도움을 받았습니다. 코드 보면서 더 공부하겠습니다.
diff --git a/signup.html b/signup.html
index 1fad87a1..86534074 100644
--- a/signup.html
+++ b/signup.html
@@ -16,7 +16,8 @@
     <div class="content">
       <div class="head-img">
         <a class="login-link" href="/">
-          <img class="pandaMarketImg" src="img/logo.png" />
+          <img class="pandaMarketImg" src="img/logoHead.png" />
+          <img class="pandaMarketImg-name" src="img/logoName.png" />
         </a>
       </div>
       <form action="/signup" method="post">
@@ -24,19 +25,21 @@
           <label for="userName" class="userName-label">이메일</label>
           <input
             type="email"
-            name="userEmail"
+            name="userName"
             id="userName"
             class="userName"
             placeholder="이메일을 입력해주세요"
           />
+          <div id="error-message"></div>
           <label for="nicname" class="nicname-label">닉네임</label>
           <input
             type="text"
-            name="userName"
+            name="nicName"
             id="nicname"
             class="nicname"
             placeholder="닉네임을 입력해주세요"
           />
+          <div id="error-nicname"></div>
           <label for="userPassword" class="userPassword-label">비밀번호</label>
           <input
             type="password"
@@ -45,9 +48,10 @@
             class="userPassword"
             placeholder="비밀번호를 입력해주세요"
           />
-          <label for="checkPassword" class="checkPassword-label"
-            >비밀번호 확인</label
-          >
+          <div id="error-password"></div>
+          <label for="checkPassword" class="checkPassword-label">
+            비밀번호 확인
+          </label>
           <input
             type="password"
             name="userPassword"
@@ -55,9 +59,12 @@
             class="checkPassword"
             placeholder="비밀번호를 다시 한 번 입력해주세요"
           />
+          <div id="error-checkPassword"></div>
         </div>
         <div class="content-login">
-          <button type="submit" class="login-button">회원가입</button>
+          <button type="submit" class="login-button" id="signupBtn" disabled>
+            회원가입
+          </button>
         </div>
       </form>
       <div>
@@ -82,5 +89,6 @@
         <a class="membership" href="login.html">로그인</a>
       </div>
     </div>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/style.css b/style.css
index c1367e9d..21966ddb 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,11 @@
 @import "reset.css";
 
+header {
+  background-color: #fff;
+  position: sticky;
+  top: 0;
+}
+
 .blue-section {
   background-color: #cfe5ff;
 }
@@ -26,14 +32,27 @@
   font-weight: 600;
 }
 
+.login-link-see {
+  color: #f3f4f6;
+  text-decoration: none;
+}
+
 .login-link {
   color: #f3f4f6;
   text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 5px;
 }
 
 .title-logo {
-  height: 51px;
-  width: 153px;
+  height: 40px;
+  width: 40.14px;
+}
+.title-logo-name {
+  height: 35px;
+  width: 103px;
+  padding: 3px;
 }
 
 .hero-section {
@@ -108,6 +127,8 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  max-width: 560px;
+  width: 100%;
 }
 
 .section-text {
@@ -177,6 +198,8 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  max-width: 560px;
+  width: 100%;
 }
 
 @media (max-width: 1199px) {
@@ -219,7 +242,7 @@
   }
 }
 
-@media (max-width: 767px) and (min-width: 375px) {
+@media (max-width: 767px) {
   .container {
     margin: auto 16px;
   }
@@ -247,4 +270,7 @@
   .footer-container {
     padding: 32px 50px 80px;
   }
+  .title-logo {
+    display: none;
+  }
 }