diff --git a/login.html b/login.html
index cb90558b..ce5d2ea2 100644
--- a/login.html
+++ b/login.html
@@ -15,13 +15,13 @@
         </a>
         <form>
             <label for="email">이메일</label>
-            <input id="email" name="email" type="email">
+            <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요">
             <label for="password">비밀번호</label>
             <div class="password-container">
-                <input id="password" name="password" type="password">
+                <input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요">
                 <button class="eye-btn" type="button"><img src="images/ic_eye_invisible.svg"></button>
             </div>
-            <button class="complete-btn" type="submit">로그인</button>
+            <button class="complete-btn" type="button" onclick="location.href='/items.html'" disabled>로그인</button>
         </form>
         <div class="simple-login">
             간편 로그인하기
@@ -38,5 +38,6 @@
             판다마켓이 처음이신가요? <a href="/signup.html">회원가입</a>
         </div>
     </main>
+    <script src="scripts/auth.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/scripts/auth.js b/scripts/auth.js
new file mode 100644
index 00000000..aba302ca
--- /dev/null
+++ b/scripts/auth.js
@@ -0,0 +1,106 @@
+const form = document.querySelector("form");
+const inputs = document.querySelectorAll("form input");
+const button = document.querySelector("button.complete-btn");
+
+const email = document.querySelector("input#email");
+const nickname = document.querySelector("input#nickname");
+const password = document.querySelector("input#password");
+const passwordCheck = document.querySelector("input#password-check");
+
+const passwordContainers = document.querySelectorAll(".password-container");
+
+function wrongInput(node, text){
+    node.classList.add("wrong");
+    node.classList.remove("correct");
+
+    let wrongMessage;
+    if (node.nextElementSibling?.tagName === 'DIV'){
+        wrongMessage = node.nextElementSibling;
+    } else {
+        wrongMessage = document.createElement('div');
+        wrongMessage.setAttribute("class","wrong-message");
+    }
+    wrongMessage.textContent = text;
+    node.after(wrongMessage);
+}
+
+function correctInput(node) {
+    node.classList.add("correct");
+    node.classList.remove("wrong");
+
+    if (node.nextElementSibling?.tagName === 'DIV'){
+        node.nextElementSibling.remove();
+    }
+}
+
+function passwordMatch() {
+    if (password.value !== passwordCheck.value) {
+        wrongInput(passwordCheck, "비밀번호가 일치하지 않습니다.");
+    } else {
+        correctInput(passwordCheck);
+    }
+}
+
+email.addEventListener("focusout", (e) => {
+    if (!e.target.value) {
+        wrongInput(e.target, "이메일을 입력해주세요.");
+    } else if (!e.target.validity.valid) {
+        wrongInput(e.target, "잘못된 이메일 형식입니다.");
+    } else {
+        correctInput(e.target);
+    }
+});
+
+nickname?.addEventListener("focusout", (e) => {
+    if (!e.target.value) {
+        wrongInput(e.target, "닉네임을 입력해주세요.");
+    } else {
+        correctInput(e.target);
+    }
+});
+
+password.addEventListener("focusout", (e) => {
+    if (!e.target.value) {
+        wrongInput(e.target, "비밀번호를 입력해주세요.");
+    } else if (e.target.value.length < 8) {
+        wrongInput(e.target, "비밀번호를 8자 이상 입력해주세요.");
+    } else {
+        correctInput(e.target);
+    }
+});
+
+if (passwordCheck) {
+    password.addEventListener("change", () => {
+        if (passwordCheck.value) {
+            passwordMatch();
+        }
+    });
+    passwordCheck.addEventListener("input", () => {
+        if (password.value) {
+            passwordMatch();
+        }
+    });
+}
+
+form.addEventListener("focusout", () => {
+    for (let input of inputs) {
+        if (!input.classList.contains("correct")){
+            return;
+        }
+    }
+    button.removeAttribute("disabled");
+});
+
+passwordContainers.forEach( (node) => {
+    node.addEventListener("click", (e) => {
+        if (e.target.tagName === "IMG") {
+            if (e.currentTarget.firstElementChild.getAttribute("type") === "password"){
+                e.currentTarget.firstElementChild.setAttribute("type", "text");
+                e.target.setAttribute("src", "images/ic_eye_visible.svg");
+            } else {
+                e.currentTarget.firstElementChild.setAttribute("type", "password");
+                e.target.setAttribute("src", "images/ic_eye_invisible.svg");
+            }
+        }
+    });
+} )
\ No newline at end of file
diff --git a/signup.html b/signup.html
index 9b75a8d4..4f6d6310 100644
--- a/signup.html
+++ b/signup.html
@@ -15,20 +15,20 @@
         </a>
         <form>
             <label for="email">이메일</label>
-            <input id="email" name="email" type="email">
+            <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요">
             <label for="nickname">닉네임</label>
-            <input id="nickname" name="nickname">
+            <input id="nickname" name="nickname" placeholder="닉네임을 입력해주세요">
             <label for="password">비밀번호</label>
             <div class="password-container">
-                <input id="password" name="password" type="password">
+                <input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요">
                 <button class="eye-btn" type="button"><img src="images/ic_eye_invisible.svg"></button>
             </div>
             <label for="password-check">비밀번호 확인</label>
             <div class="password-container">
-                <input id="password-check" name="password-check" type="password">
+                <input id="password-check" name="password-check" type="password" placeholder="비밀번호를 다시 한 번 입력해주세요">
                 <button class="eye-btn" type="button"><img src="images/ic_eye_invisible.svg"></button>
             </div>
-            <button class="complete-btn" type="submit">회원가입</button>
+            <button class="complete-btn" type="button" onclick="location.href='/login.html'" disabled>회원가입</button>
         </form>
         <div class="simple-login">
             간편 로그인하기
@@ -45,5 +45,6 @@
             이미 회원이신가요? <a href="/login.html">로그인</a>
         </div>
     </main>
+    <script src="scripts/auth.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles/auth.css b/styles/auth.css
index ecae4e65..a54c3d14 100644
--- a/styles/auth.css
+++ b/styles/auth.css
@@ -37,7 +37,7 @@ form label {
 
 form input {
     width: 100%;
-    padding: 16px 24px 14px;
+    padding: 15px 24px ;
     margin-bottom: 24px;
     border-radius: 12px;
     background-color: var(--gray100);
@@ -46,6 +46,27 @@ form input {
     line-height: 26px;
 }
 
+form input.wrong {
+    margin-bottom: 8px;
+    border: solid 1px var(--red);
+}
+
+form input.correct {
+    border: solid 1px var(--blue);
+}
+
+form input::placeholder {
+    color: var(--gray400);
+}
+
+form .wrong-message {
+    margin: 8px 16px 18px;
+    color: var(--red);
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 24px;
+}
+
 form .password-container {
     position: relative;
     justify-content: center;
@@ -56,7 +77,6 @@ form .password-container .eye-btn {
     padding: 0;
     position: absolute;
     top: 16px;
-    bottom: 16px;
     right: 24px;
 }
 
@@ -75,6 +95,10 @@ form .complete-btn {
     line-height: 32px;
 }
 
+form .complete-btn:disabled {
+    background-color: var(--gray400);
+}
+
 .simple-login {
     width: 100%;
     padding: 16px 23px;
diff --git a/styles/color.css b/styles/color.css
index 0d497b3b..1d55bfe6 100644
--- a/styles/color.css
+++ b/styles/color.css
@@ -1,12 +1,13 @@
 :root {
     --blue: #3692FF;
-    --gray900: #111827 ;
-    --gray800: #1F2937 ;
-    --gray700: #374151 ;
-    --gray600: #4B5563 ;
-    --gray500: #6B7280 ;
-    --gray400: #9CA3AF ;
-    --gray200: #E5E7EB ;
-    --gray100: #F3F4F6 ;
-    --gray50: #F9FAFB ;
+    --red: #F74747;
+    --gray900: #111827;
+    --gray800: #1F2937;
+    --gray700: #374151;
+    --gray600: #4B5563;
+    --gray500: #6B7280;
+    --gray400: #9CA3AF;
+    --gray200: #E5E7EB;
+    --gray100: #F3F4F6;
+    --gray50: #F9FAFB;
 }
\ No newline at end of file
diff --git a/styles/index.css b/styles/index.css
index d15b447e..44668557 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -36,6 +36,10 @@ header .logo img {
     height: 100%;
 }
 
+header #logo-small {
+    display: none;
+}
+
 header .login {
     width: 128px;
     height: 48px;
@@ -182,48 +186,6 @@ footer > div {
     vertical-align: top;
 }
 
-/* PC & Tablet */
-@media (min-width: 768px) {
-    header #logo-small {
-        height: 0;
-    }
-}
-
-/* Tablet & Mobile */
-@media (max-width: 1199px) {
-    /* banner */
-    .banner > div {
-        flex-direction: column;
-        justify-content: end;
-        text-align: center;
-    }
-
-    .banner .banner-explain {
-        justify-items: center;
-    }
-
-    /* main */
-    article .enter {
-        display: none;
-    }
-
-    article > div {
-        gap: 24px;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-    }
-
-    article img {
-        width: 100%;
-    }
-
-    .article-right {
-        flex-direction: column;
-        align-items: flex-end;
-    }
-}
-
 /* PC */
 @media (min-width: 1200px) {
     .banner > div {
@@ -246,6 +208,12 @@ footer > div {
     .banner {
         height: 771px;
     }
+
+    .banner > div {
+        flex-direction: column;
+        justify-content: end;
+        text-align: center;
+    }
     
     .banner.bottom {
         height: 927px;
@@ -258,6 +226,7 @@ footer > div {
     
     .banner .banner-explain {
         margin-bottom: 215px;
+        justify-items: center;
     }
 
     .banner .enter {
@@ -269,6 +238,17 @@ footer > div {
         padding: 24px;
     }
 
+    article .enter {
+        display: none;
+    }
+
+    article > div {
+        gap: 24px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+    }
+
     .article-top-text {
         margin-bottom: 16px;
     }
@@ -283,6 +263,15 @@ footer > div {
         line-height: 26px;
     }
     
+    article img {
+        width: 100%;
+    }
+
+    .article-right {
+        flex-direction: column;
+        align-items: flex-end;
+    }
+
     /* footer */
     footer {
         padding: 32px 104px 0;
@@ -300,11 +289,21 @@ footer > div {
         padding: 0 16px;
     }
 
+    header #logo-small {
+        display: unset;
+    }
+
     header #logo-big {
-        height: 0;
+        display: none;
     }
 
     /* banner */
+    .banner > div {
+        flex-direction: column;
+        justify-content: end;
+        text-align: center;
+    }
+
     .banner.bottom {
         margin-top: 63px;
     }
@@ -315,6 +314,7 @@ footer > div {
     
     .banner .banner-explain {
         margin-bottom: 132px;
+        justify-items: center;
     }
     
     .banner a {
@@ -337,6 +337,17 @@ footer > div {
         padding: 20px 16px;
     }
     
+    article .enter {
+        display: none;
+    }
+
+    article > div {
+        gap: 24px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+    }
+
     .article-top-text {
         margin-bottom: 8px;
         font-size: 16px;
@@ -352,7 +363,16 @@ footer > div {
         font-size: 16px;
         line-height: 26px;
     }
-    
+
+    article img {
+        width: 100%;
+    }
+
+    .article-right {
+        flex-direction: column;
+        align-items: flex-end;
+    }
+
     /* footer */
     footer {
         padding: 32px 32px 30px;
diff --git a/styles/reset.css b/styles/reset.css
index 7efe8b30..7ac3cb1b 100644
--- a/styles/reset.css
+++ b/styles/reset.css
@@ -19,6 +19,7 @@ a {
 
 button {
 	cursor: pointer;
+	background-color: unset;
 }
 
 article, aside, details, figcaption, figure,