diff --git a/index.html b/index.html
index 2ec84dc8..f242e70a 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
         />
         <meta
             property="og:image"
-            content="https://www.google.com/imgres?q=%ED%8C%90%EB%8B%A4&imgurl=https%3A%2F%2Fi.namu.wiki%2Fi%2FN7XtnLu7mENPBU1wMlAoOo5_w13roksendvuswR8gkFw_8SilcxCpT3kTTdzaP42jSpZAQ2-R4x3aNxaj6A3JA.webp&imgrefurl=https%3A%2F%2Fnamu.wiki%2Fw%2F%25ED%258C%2590%25EB%258B%25A4&docid=5YXeSdnyXQW-OM&tbnid=L95TdOcl4sN4TM&vet=12ahUKEwiptZXLvcyMAxU7sVYBHUTEITMQM3oECG4QAA..i&w=578&h=385&hcb=2&ved=2ahUKEwiptZXLvcyMAxU7sVYBHUTEITMQM3oECG4QAA"
+            content="https://i.namu.wiki/i/gPk17m9bSWihfGnpoCK_GkWdYAQMnDwbcTDKOAWmZ6jfSzvJJnVJRNmAovYNXgd0ElvPmYkj90EAek4L63N4gk0fg2GEQqBbnSw9v52fvn0vXBGF1z8ZGOgKRC1ybx9QJXdYaDzkK9MB5a_aLdjXh_AvSGFUrI3eGd4HFCMSOqQ.webp"
         />
         <meta
             property="og:url"
@@ -68,8 +68,8 @@ <h2>일상의 모든 물건을 거래해 보세요</h2>
                             alt="home-card01"
                         />
                         <div class="section-home-text">
-                            <h1>Hot item</h1>
-                            <h2>인기 상품을 <br />확인해 보세요</h2>
+                            <span class="blue">Hot item</span>
+                            <span>인기 상품을 <br />확인해 보세요</span>
                             <p>
                                 가장 HOT한 중고거래 물품을<br />
                                 판다 마켓에서 확인해 보세요
@@ -82,11 +82,11 @@ <h2>인기 상품을 <br />확인해 보세요</h2>
                             alt="home-card02"
                         />
                         <div class="section-home-text reverse">
-                            <h1>Search</h1>
-                            <h2>
+                            <span class="blue">Search</span>
+                            <span>
                                 구매를 원하는 <br />
                                 상품을 검색하세요
-                            </h2>
+                            </span>
                             <p>
                                 구매하고 싶은 물품은 검색해서 <br />
                                 쉽게 찾아보세요
@@ -99,8 +99,8 @@ <h2>
                             alt="home-card03"
                         />
                         <div class="section-home-text">
-                            <h1>Register</h1>
-                            <h2>판매를 원하는 <br />상품을 등록하세요</h2>
+                            <span class="blue">Register</span>
+                            <span>판매를 원하는 <br />상품을 등록하세요</span>
                             <p>
                                 어떤 물건이든 판매하고 싶은 상품을 <br />
                                 쉽게 등록하세요
diff --git a/login.html b/login.html
index 5a4e6aae..08d8ebc2 100644
--- a/login.html
+++ b/login.html
@@ -12,6 +12,10 @@
         <link rel="stylesheet" href="./styles/components/sign.css" />
         <link rel="stylesheet" href="./styles/components/buttons.css" />
         <link rel="stylesheet" href="./styles/components/footer.css" />
+
+        <!-- script -->
+        <script src="./login.js"></script>
+        <script src="togglePasswordBtn.js"></script>
     </head>
     <body>
         <div class="login-container">
@@ -32,6 +36,7 @@
                         name="email"
                         placeholder="이메일을 입력해 주세요"
                     />
+                    <span class="error-message" id="email-error"></span>
                 </div>
                 <div class="input-item">
                     <label for="password">비밀번호</label>
@@ -42,14 +47,14 @@
                             name="password"
                             placeholder="비밀번호를 입력해 주세요"
                         />
-                        <button>
+                        <button type="button" class="toggle-password-btn">
                             <img
                                 src="styles/assets/icons/icon/eyes_off.svg"
                                 alt="toggle-password"
-                                class="toggle-password"
                             />
                         </button>
                     </div>
+                    <span class="error-message" id="password-error"></span>                        </span>
                 </div>
                 <button type="submit" class="btn-large full-width">
                     로그인
diff --git a/login.js b/login.js
new file mode 100644
index 00000000..52a48686
--- /dev/null
+++ b/login.js
@@ -0,0 +1,88 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const emailInput = document.getElementById("email");
+    const passwordInput = document.getElementById("password");
+    const emailError = document.getElementById("email-error");
+    const passwordError = document.getElementById("password-error");
+    const form = document.querySelector(".login-form");
+    const submitBtn = document.querySelector(".btn-large");
+
+    submitBtn.disabled = true; // 초기 상태에서 버튼 비활성화
+
+    // 필드별로 touched 상태를 추적
+    let emailTouched = false;
+    let passwordTouched = false;
+
+    // 유효성 검사 함수
+    function validateEmail() {
+        if (!emailTouched) return true;
+        const emailValue = emailInput.value.trim();
+        if (!emailValue) {
+            emailError.textContent = "이메일을 입력해 주세요.";
+            emailInput.classList.add("error");
+            return false;
+        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue)) {
+            emailError.textContent = "잘못된 이메일입니다.";
+            emailInput.classList.add("error");
+            return false;
+        }
+        emailError.textContent = ""; // 에러 메시지 초기화
+        emailInput.classList.remove("error");
+        return true;
+    }
+
+    function validatePassword() {
+        if (!passwordTouched) return true;
+        const passwordValue = passwordInput.value.trim();
+        if (!passwordValue) {
+            passwordError.textContent = "비밀번호를 입력해 주세요.";
+            passwordInput.classList.add("error");
+            return false;
+        } else if (passwordValue.length < 8) {
+            passwordError.textContent = "비밀번호를 8자 이상 입력해 주세요.";
+            passwordInput.classList.add("error");
+            return false;
+        }
+        passwordError.textContent = ""; // 에러 메시지 초기화
+        passwordInput.classList.remove("error");
+        return true;
+    }
+
+    function updateSubmitLoginState() {
+        const isEmailValid = validateEmail();
+        const isPasswordValid = validatePassword();
+        submitBtn.disabled = !(
+            emailTouched &&
+            passwordTouched &&
+            isEmailValid &&
+            isPasswordValid
+        );
+    }
+
+    // 폼 제출 시 유효성 검사
+    form.addEventListener("submit", (event) => {
+        const isEmailValid = validateEmail();
+        const isPasswordValid = validatePassword();
+
+        if (!isEmailValid || !isPasswordValid) {
+            event.preventDefault(); // 폼 제출 방지
+        } else {
+            event.preventDefault(); // 기본 제출 방지
+            window.location.href = "/items";
+        }
+        updateSubmitLoginState();
+    });
+
+    // 입력 필드에서 포커스가 벗어날 때 유효성 검사
+    emailInput.addEventListener("blur", () => {
+        emailTouched = true;
+        validateEmail();
+    });
+    passwordInput.addEventListener("blur", () => {
+        passwordTouched = true;
+        validatePassword();
+    });
+    // 입력 필드에서 값이 변경될 때 버튼 상태 업데이트
+    emailInput.addEventListener("input", updateSubmitLoginState);
+    passwordInput.addEventListener("input", updateSubmitLoginState);
+});
+// 로그인 버튼 클릭 시 로그인 처리
diff --git a/sign.js b/sign.js
new file mode 100644
index 00000000..ef962788
--- /dev/null
+++ b/sign.js
@@ -0,0 +1,146 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const emailInput = document.getElementById("signup-email");
+    const usernameInput = document.getElementById("signup-username");
+    const passwordInput = document.getElementById("signup-password");
+    const passwordConfirmInput = document.getElementById(
+        "signup-password-confirm"
+    );
+    const emailError = document.getElementById("signup-email-error");
+    const usernameError = document.getElementById("signup-username-error");
+    const passwordError = document.getElementById("signup-password-error");
+    const passwordConfirmInputError = document.getElementById(
+        "signup-password-confirm-error"
+    );
+    const form = document.querySelector(".login-form");
+    const submitBtn = document.querySelector(".btn-large");
+
+    submitBtn.disabled = true; // 초기 상태에서 버튼 비활성화
+
+    // 필드별로 touched 상태를 추적
+    let emailTouched = false;
+    let usernameTouched = false;
+    let passwordTouched = false;
+    let passwordConfirmTouched = false;
+
+    // 유효성 검사 함수
+    function validateEmail() {
+        if (!emailTouched) return true;
+        const emailValue = emailInput.value.trim();
+        if (!emailValue) {
+            emailError.textContent = "이메일을 입력해 주세요.";
+            emailInput.classList.add("error");
+            return false;
+        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue)) {
+            emailError.textContent = "잘못된 이메일입니다.";
+            emailInput.classList.add("error");
+            return false;
+        }
+        emailError.textContent = ""; // 에러 메시지 초기화
+        emailInput.classList.remove("error");
+        return true;
+    }
+
+    function vaildateUsername() {
+        if (!usernameTouched) return true;
+        const usernameValue = usernameInput.value.trim();
+        if (!usernameValue) {
+            usernameError.textContent = "닉네임을 입력해 주세요.";
+            usernameInput.classList.add("error");
+            return false;
+        }
+        usernameError.textContent = ""; // 에러 메시지 초기화
+        usernameInput.classList.remove("error");
+        return true;
+    }
+
+    function validatePassword() {
+        if (!passwordTouched) return true;
+        const passwordValue = passwordInput.value.trim();
+        if (!passwordValue) {
+            passwordError.textContent = "비밀번호를 입력해 주세요.";
+            passwordInput.classList.add("error");
+            return false;
+        } else if (passwordValue.length < 8) {
+            passwordError.textContent = "비밀번호를 8자 이상 입력해 주세요.";
+            passwordInput.classList.add("error");
+            return false;
+        }
+        passwordError.textContent = ""; // 에러 메시지 초기화
+        passwordInput.classList.remove("error");
+        return true;
+    }
+
+    function validateConfirmPassword() {
+        if (!passwordConfirmTouched) return true;
+        const passwordConfirmValue = passwordConfirmInput.value.trim();
+        const passwordValue = passwordInput.value.trim();
+        if (!passwordConfirmValue) {
+            passwordConfirmInputError.textContent =
+                "비밀번호를 다시 입력해 주세요.";
+            passwordConfirmInput.classList.add("error");
+            return false;
+        } else if (passwordConfirmValue !== passwordValue) {
+            passwordConfirmInputError.textContent =
+                "비밀번호가 일치하지 않습니다.";
+            passwordConfirmInput.classList.add("error");
+            return false;
+        }
+        passwordConfirmInputError.textContent = ""; // 에러 메시지 초기화
+        passwordConfirmInput.classList.remove("error");
+        return true;
+    }
+    // 회원가입 상태 업데이트
+    function updateSubmitSignupState() {
+        const isEmailVaild = validateEmail();
+        const isUsernameValid = vaildateUsername();
+        const isPasswordValid = validatePassword();
+        const isPasswordConfirmValid = validateConfirmPassword();
+        submitBtn.disabled = !(
+            emailTouched &&
+            usernameTouched &&
+            passwordTouched &&
+            passwordConfirmTouched &&
+            isEmailVaild &&
+            isUsernameValid &&
+            isPasswordValid &&
+            isPasswordConfirmValid
+        );
+    }
+    // 폼 제출 시 유효성 검사
+    form.addEventListener("submit", (event) => {
+        const isEmailValid = validateEmail();
+        const isPasswordValid = validatePassword();
+
+        if (!isEmailValid || !isPasswordValid) {
+            event.preventDefault(); // 폼 제출 방지
+        } else {
+            event.preventDefault(); // 폼 제출 방지
+            window.location.href = "/login.html";
+        }
+        updateSubmitLoginState();
+    });
+
+    // 입력 필드에서 포커스가 벗어날 때 유효성 검사
+    emailInput.addEventListener("blur", () => {
+        emailTouched = true;
+        validateEmail();
+    });
+    usernameInput.addEventListener("blur", () => {
+        usernameTouched = true;
+        vaildateUsername();
+    });
+    passwordInput.addEventListener("blur", () => {
+        passwordTouched = true;
+        validatePassword();
+    });
+    passwordConfirmInput.addEventListener("blur", () => {
+        passwordConfirmTouched = true;
+        validateConfirmPassword();
+    });
+    // 입력 필드에서 값이 변경될 때 버튼 상태 업데이트
+    emailInput.addEventListener("input", updateSubmitSignupState);
+    usernameInput.addEventListener("input", updateSubmitSignupState);
+    passwordInput.addEventListener("input", updateSubmitSignupState);
+    passwordConfirmInput.addEventListener("input", updateSubmitSignupState);
+});
+// 로그인 버튼 클릭 시 로그인 처리
diff --git a/signup.html b/signup.html
index c8382bf2..4023e3b9 100644
--- a/signup.html
+++ b/signup.html
@@ -12,6 +12,10 @@
         <link rel="stylesheet" href="./styles/components/sign.css" />
         <link rel="stylesheet" href="./styles/components/buttons.css" />
         <link rel="stylesheet" href="./styles/components/footer.css" />
+
+        <!-- script -->
+        <script src="./sign.js"></script>
+        <script src="togglePasswordBtn.js"></script>
     </head>
     <body>
         <div class="login-container">
@@ -28,55 +32,66 @@
                     <label for="email">이메일</label>
                     <input
                         type="email"
-                        id="email"
+                        id="signup-email"
                         name="email"
                         placeholder="이메일을 입력해 주세요"
                     />
+                    <span class="error-message" id="signup-email-error"></span>
                 </div>
                 <div class="input-item">
                     <label for="username">닉네임</label>
                     <input
                         type="username"
-                        id="username"
+                        id="signup-username"
                         name="username"
                         placeholder="닉네임을 입력해 주세요"
                     />
+                    <span
+                        class="error-message"
+                        id="signup-username-error"
+                    ></span>
                 </div>
                 <div class="input-item">
                     <label for="password">비밀번호</label>
                     <div class="input-wrapper">
                         <input
                             type="password"
-                            id="password"
+                            id="signup-password"
                             name="password"
                             placeholder="비밀번호를 입력해 주세요"
                         />
-                        <button>
+                        <button type="button" class="toggle-password-btn">
                             <img
                                 src="styles/assets/icons/icon/eyes_off.svg"
                                 alt="toggle-password"
-                                class="toggle-password"
                             />
                         </button>
                     </div>
+                    <span
+                        class="error-message"
+                        id="signup-password-error"
+                    ></span>
                 </div>
                 <div class="input-item">
-                    <label for="password">비밀번호 확인</label>
+                    <label for="password-confirm">비밀번호 확인</label>
                     <div class="input-wrapper">
                         <input
                             type="password"
-                            id="password"
+                            id="signup-password-confirm"
                             name="password"
                             placeholder="비밀번호를 다시 한 번 입력해 주세요"
                         />
-                        <button>
+                        <button type="button" class="toggle-password-btn">
                             <img
                                 src="styles/assets/icons/icon/eyes_off.svg"
                                 alt="toggle-password"
-                                class="toggle-password"
                             />
                         </button>
                     </div>
+                    <span
+                        class="error-message"
+                        id="signup-password-confirm-error"
+                    ></span>
                 </div>
                 <button type="submit" class="btn-large full-width">
                     회원가입
diff --git a/styles/components/Home.css b/styles/components/Home.css
index 6845010f..a5187a92 100644
--- a/styles/components/Home.css
+++ b/styles/components/Home.css
@@ -65,12 +65,12 @@
     margin: 103px 0;
     gap: 12px;
 }
-.section-home-text {
+.section-home-text .blue {
     font: var(--text-2lg-bold);
     color: var(--primary---100);
 }
 
-.section-home-text h2 {
+.section-home-text span {
     font: var(--text-3xl-bold);
     color: var(--gray---700);
 }
@@ -132,7 +132,10 @@
     .section-home-text {
         margin: 24px 0;
     }
-    .section-home-text h2 br {
+    .section-home-text p {
+        font: var(--text-2lg-medium);
+    }
+    .section-home-text span br {
         display: none;
     }
 }
@@ -148,4 +151,13 @@
     .section-home-wrapper {
         margin: 20px 0;
     }
+    .section-home-text .blue {
+        font: var(--text-lg-bold);
+    }
+    .section-home-text span {
+        font: var(--text-2xl-bold);
+    }
+    .section-home-text p {
+        font: var(--text-lg-medium);
+    }
 }
diff --git a/styles/components/sign.css b/styles/components/sign.css
index 54a1f3ea..e62394d4 100644
--- a/styles/components/sign.css
+++ b/styles/components/sign.css
@@ -36,7 +36,6 @@
 .input-item {
     display: flex;
     flex-direction: column;
-    gap: 16px;
     position: relative;
 }
 .input-item label {
@@ -50,6 +49,7 @@
     width: 100%;
     height: 56px;
     padding: 16px 24px;
+    margin-top: 16px;
     border-radius: 12px;
     background-color: var(--gray---100);
 
@@ -63,16 +63,28 @@
 .input-item input::placeholder {
     color: var(--gray---400);
 }
+.input-item input.error {
+    outline: 1px solid var(--error---red);
+}
+.error-message {
+    font: var(--text-md-semibold);
+    color: var(--error---red);
+
+    margin-left: 16px;
+    margin-top: 8px;
+}
 
 .input-wrapper {
     position: relative;
 }
-.toggle-password {
+.toggle-password-btn {
     position: absolute;
-    right: 24px;
+    right: 16px;
     top: 50%;
-    transform: translateY(-80%);
+    transform: translateY(-15%);
     cursor: pointer;
+
+    background-color: var(--gray---100);
 }
 
 /* -----------------social login--------------------- */
@@ -122,6 +134,15 @@
         width: 100%;
         gap: 16px;
     }
+    .input-item label {
+        font: var(--text-lg-bold);
+    }
+    .input-item input {
+        margin-top: 8px;
+    }
+    .toggle-password-btn {
+        transform: translateY(-25%);
+    }
     .social-login-container {
         width: 100%;
     }
diff --git a/togglePasswordBtn.js b/togglePasswordBtn.js
new file mode 100644
index 00000000..d1393a20
--- /dev/null
+++ b/togglePasswordBtn.js
@@ -0,0 +1,33 @@
+document.addEventListener("DOMContentLoaded", () => {
+    // 비밀번호 토글 버튼 처리
+    document.querySelectorAll(".toggle-password-btn").forEach((button) => {
+        button.addEventListener("click", () => {
+            const input = button.previousElementSibling; // 버튼 바로 앞의 input 요소
+            const img = button.querySelector("img"); // 버튼 내부의 이미지
+
+            if (input.type === "password") {
+                input.type = "text"; // 비밀번호 보이기
+                img.src = "styles/assets/icons/icon/eyes_on.svg"; // 이미지 변경
+                img.alt = "hide-password"; // 접근성 개선
+            } else {
+                input.type = "password"; // 비밀번호 숨기기
+                img.src = "styles/assets/icons/icon/eyes_off.svg"; // 이미지 변경
+                img.alt = "show-password"; // 접근성 개선
+            }
+        });
+    });
+
+    // 비밀번호 입력 필드에 따라 버튼 표시/숨기기
+    const passwordInput = document.getElementById("password");
+    const togglePasswordBtn = document.querySelector(".toggle-password-btn");
+
+    if (passwordInput && togglePasswordBtn) {
+        passwordInput.addEventListener("input", () => {
+            if (passwordInput.value.length > 0) {
+                togglePasswordBtn.style.display = "block";
+            } else {
+                togglePasswordBtn.style.display = "none";
+            }
+        });
+    }
+});
