diff --git a/frontend/login.html b/frontend/login.html
index f896bbe..b442e0f 100644
--- a/frontend/login.html
+++ b/frontend/login.html
@@ -84,21 +84,31 @@
               <input
                 name="email"
                 type="email"
+                id="login-email"
                 placeholder="이메일을 입력해주세요"
                 required
               />
             </label>
-
+            <p class="err-msg" id="login-email-err-msg"></p>
             <label>
               비밀번호
               <input
                 name="password"
                 type="password"
+                id="login-pw"
                 placeholder="비밀번호를 입력해주세요"
                 required
               />
+              <p class="err-msg" id="login-pw-err-msg"></p>
             </label>
-            <button class="button-submit-login" type="submit">로그인</button>
+            <button
+              class="button-submit-login"
+              id="login-btn"
+              type="submit"
+              disabled
+            >
+              로그인
+            </button>
           </form>
           <!-- <input class="button-submit-login" type="submit" value="로그인" /> -->
         </div>
@@ -129,5 +139,6 @@
         </div>
       </div>
     </div>
+    <script src="./scripts/auth.js" defer></script>
   </body>
 </html>
diff --git a/frontend/scripts/auth.js b/frontend/scripts/auth.js
new file mode 100644
index 0000000..869ad9e
--- /dev/null
+++ b/frontend/scripts/auth.js
@@ -0,0 +1,188 @@
+// login
+const loginEmail = document.getElementById('login-email');
+const loginPw = document.getElementById('login-pw');
+const loginBtn = document.getElementById('login-btn');
+const loginEmailError = document.getElementById('login-email-err-msg');
+const loginPwError = document.getElementById('login-pw-err-msg');
+
+// signup
+const signupEmail = document.getElementById('signup-email');
+const signupUserName = document.getElementById('signup-username');
+const signupPw = document.getElementById('signup-pw');
+const signupPwCheck = document.getElementById('signup-pw-check');
+const signupPwCheckError = document.getElementById('signup-pw-check-err-msg');
+const signupBtn = document.getElementById('signup-btn');
+const signupEmailError = document.getElementById('signup-email-err-msg');
+const signupPwError = document.getElementById('signup-pw-err-msg');
+
+const USER_DATA = [
+  { email: 'codeit1@codeit.com', password: 'codeit101!' },
+  { email: 'codeit2@codeit.com', password: 'codeit202!' },
+  { email: 'codeit3@codeit.com', password: 'codeit303!' },
+  { email: 'codeit4@codeit.com', password: 'codeit404!' },
+  { email: 'codeit5@codeit.com', password: 'codeit505!' },
+  { email: 'codeit6@codeit.com', password: 'codeit606!' },
+];
+
+const emailRegex = /^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
+
+// login page
+if (loginEmail && loginPw && loginBtn && loginEmailError && loginPwError) {
+  const validateEmail = () => {
+    const email = loginEmail.value.trim();
+
+    if (!emailRegex.test(email)) {
+      loginEmailError.textContent = '잘못된 이메일 형식입니다';
+      return false;
+    }
+
+    loginEmailError.textContent = '';
+    return true;
+  };
+
+  const validatePW = () => {
+    const password = loginPw.value.trim();
+
+    if (password.length < 8) {
+      loginPwError.textContent = '비밀번호를 8자 이상 입력해주세요.';
+      return false;
+    }
+
+    loginPwError.textContent = '';
+    return true;
+  };
+
+  const updateLoginBtn = () => {
+    // 둘 다 유효해야
+    if (!validateEmail() || !validatePW()) {
+      loginBtn.disabled = true;
+    } else {
+      loginBtn.disabled = false;
+    }
+  };
+
+  // input(타이핑) 시 버튼 갱신
+  loginEmail.addEventListener('input', updateLoginBtn);
+  loginPw.addEventListener('input', updateLoginBtn);
+
+  // focus out(blur) 시 에러메시지 표시 + 버튼 갱신
+  loginEmail.addEventListener('blur', updateLoginBtn);
+  loginPw.addEventListener('blur', updateLoginBtn);
+
+  // 로그인 버튼 클릭
+  loginBtn.addEventListener('click', (event) => {
+    event.preventDefault();
+    if (loginBtn.disabled) return;
+
+    const inputEmail = loginEmail.value.trim();
+    const inputPw = loginPw.value.trim();
+
+    const user = USER_DATA.find((u) => u.email === inputEmail);
+
+    if (!user || user.password !== inputPw) {
+      window.alert('비밀번호가 일치하지 않습니다.');
+      return;
+    }
+
+    window.location.href = './items.html';
+  });
+}
+
+// signup page
+if (signupEmail && signupUserName && signupPw && signupPwCheck && signupBtn) {
+  const checkEmailExists = () => {
+    const email = signupEmail.value.trim();
+    if (USER_DATA.some((user) => user.email === email)) {
+      window.alert('사용중인 이메일입니다!');
+      return true;
+    }
+    return false;
+  };
+
+  const validateSignupEmail = () => {
+    const email = signupEmail.value.trim();
+
+    if (!emailRegex.test(email)) {
+      signupEmailError.textContent = '잘못된 이메일 형식입니다';
+      return false;
+    }
+
+    signupEmailError.textContent = '';
+    return true;
+  };
+
+  const validateSignupPW = () => {
+    const password = signupPw.value.trim();
+
+    if (password.length < 8) {
+      signupPwError.textContent = '비밀번호를 8자 이상 입력해주세요.';
+      return false;
+    }
+
+    signupPwError.textContent = '';
+    return true;
+  };
+
+  const validateSignupUserName = () => {
+    const name = signupUserName.value.trim();
+    return name ? true : false;
+  };
+
+  const validatePwCheck = () => {
+    const pw1 = signupPw.value.trim();
+    const pw2 = signupPwCheck.value.trim();
+
+    if (pw1 !== pw2) {
+      signupPwCheckError.textContent = '비밀번호가 일치하지 않습니다.';
+      return false;
+    }
+
+    signupPwCheckError.textContent = '';
+    return true;
+  };
+
+  const updateSignupBtn = () => {
+    if (
+      !validateSignupEmail() ||
+      !validateSignupUserName() ||
+      !validateSignupPW() ||
+      !validatePwCheck() ||
+      checkEmailExists()
+    ) {
+      signupBtn.disabled = true;
+    } else {
+      signupBtn.disabled = false;
+    }
+  };
+
+  signupEmail.addEventListener('input', updateSignupBtn);
+  signupUserName.addEventListener('input', updateSignupBtn);
+  signupPw.addEventListener('input', updateSignupBtn);
+  signupPwCheck.addEventListener('input', updateSignupBtn);
+  signupEmail.addEventListener('blur', updateSignupBtn);
+  signupUserName.addEventListener('blur', updateSignupBtn);
+  signupPw.addEventListener('blur', updateSignupBtn);
+  signupPwCheck.addEventListener('blur', updateSignupBtn);
+
+  console.log(signupEmail.value);
+  console.log(signupPw.value);
+  console.log(signupPwCheck.value);
+  console.log(signupUserName.value);
+
+  // 회원가입 버튼 클릭
+  signupBtn.addEventListener('click', (event) => {
+    event.preventDefault();
+
+    console.log(signupEmail.value);
+    console.log(signupPw.value);
+    console.log(signupPwCheck.value);
+    console.log(signupUserName.value);
+
+    if (checkEmailExists()) {
+      window.alert('사용 중인 이메일입니다');
+      return;
+    }
+
+    window.location.href = './login.html';
+  });
+}
diff --git a/frontend/signup.html b/frontend/signup.html
index f3c9653..db64ea5 100644
--- a/frontend/signup.html
+++ b/frontend/signup.html
@@ -12,6 +12,7 @@
     />
     <link rel="stylesheet" href="./styles/global.css" />
     <link rel="stylesheet" href="./styles/login.css" />
+    <link rel="stylesheet" href="./styles/singup.css" />
   </head>
   <body>
     <div id="signup-box" class="login-box">
@@ -84,15 +85,18 @@
               <input
                 name="email"
                 type="email"
+                id="signup-email"
                 placeholder="이메일을 입력해주세요"
                 required
               />
+              <p class="err-msg" id="signup-email-err-msg"></p>
             </label>
             <label>
               닉네임
               <input
                 name="username"
                 type="text"
+                id="signup-username"
                 placeholder="닉네임을 입력해주세요"
                 required
               />
@@ -102,20 +106,31 @@
               <input
                 name="password"
                 type="password"
+                id="signup-pw"
                 placeholder="비밀번호를 입력해주세요"
                 required
               />
+              <p class="err-msg" id="signup-pw-err-msg"></p>
             </label>
             <label>
               비밀번호 확인
               <input
                 name="password"
                 type="password"
+                id="signup-pw-check"
                 placeholder="비밀번호를 다시 한 번 입력해주세요"
                 required
               />
+              <p class="err-msg" id="signup-pw-check-err-msg"></p>
             </label>
-            <button class="button-submit-signup" type="submit">회원가입</button>
+            <button
+              class="button-submit-signup"
+              id="signup-btn"
+              type="submit"
+              disabled
+            >
+              회원가입
+            </button>
           </form>
           <!-- <input class="button-submit-signup" type="submit" value="회원가입" /> -->
         </div>
@@ -146,5 +161,6 @@
         </div>
       </div>
     </div>
+    <script src="./scripts/auth.js" defer></script>
   </body>
 </html>
diff --git a/frontend/styles/global.css b/frontend/styles/global.css
index cee565a..1ad56d6 100644
--- a/frontend/styles/global.css
+++ b/frontend/styles/global.css
@@ -79,7 +79,7 @@ body {
 
 .link-home {
   color: #3692ff;
-  font-family: "ROKAF Sans";
+  font-family: 'ROKAF Sans';
   font-size: 25.633px;
   font-style: normal;
   font-weight: 700;
@@ -190,3 +190,29 @@ footer {
   align-items: center;
   flex-shrink: 0;
 }
+
+/* tablet size */
+@media (max-width: 1199px) {
+  .navbar {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  footer {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+
+/* Mobile size */
+@media (max-width: 743px) {
+  .navbar {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  footer {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+}
diff --git a/frontend/styles/home.css b/frontend/styles/home.css
index 90abfff..07e3a3d 100644
--- a/frontend/styles/home.css
+++ b/frontend/styles/home.css
@@ -76,7 +76,7 @@
 
 .section {
   display: flex;
-  width: 1920px;
+  width: 100%;
   padding-top: 138px;
   padding-bottom: 138px;
   flex-direction: column;
@@ -91,6 +91,7 @@
   justify-content: center;
   align-items: center;
   gap: 64px;
+  padding: 0 24px;
 }
 
 .img-sec1 {
@@ -165,3 +166,49 @@
   align-items: center;
   gap: 10px;
 }
+
+@media (max-width: 743px) {
+  .section-box {
+    padding: 0 16px;
+    flex-direction: column;
+    gap: 24px;
+    align-items: center;
+    text-align: center;
+  }
+
+  .img-sec1,
+  .img-sec2,
+  .img-sec3 {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+  }
+
+  .main-top,
+  .main-bottom {
+    height: auto;
+    padding-top: 80px;
+    padding-bottom: 80px;
+  }
+
+  .main-top-box,
+  .main-bottom-box {
+    flex-direction: column;
+    gap: 24px;
+    padding: 0 16px;
+    text-align: center;
+  }
+
+  .main-top-box-right,
+  .main-bottom-box-right {
+    width: 100%;
+    height: auto;
+  }
+
+  .img-home-top,
+  .img-home-bottom {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+  }
+}
diff --git a/frontend/styles/login.css b/frontend/styles/login.css
index 5545359..1190458 100644
--- a/frontend/styles/login.css
+++ b/frontend/styles/login.css
@@ -20,7 +20,7 @@
 
 .login-logo-text {
   color: var(--brand-blue, #3692ff);
-  font-family: "ROKAF Sans";
+  font-family: 'ROKAF Sans';
   font-size: 66.344px;
   font-style: normal;
   font-weight: 700;
@@ -102,11 +102,17 @@ label {
   line-height: 32px; /* 160% */
 }
 
-.button-submit-login:hover,
-.button-submit-signup:hover {
+.button-submit-login:not(:disabled):hover,
+.button-submit-signup:not(:disabled):hover {
   background-color: #3692ff;
 }
 
+.button-submit-login:disabled,
+.button-submit-signup:disabled {
+  background: var(--Cool-Gray-400, #9ca3af);
+  cursor: not-allowed;
+}
+
 .login-main-mid {
   width: 640px;
   height: 74px;
@@ -169,3 +175,53 @@ label {
   text-underline-offset: auto;
   text-underline-position: from-font;
 }
+
+@media (max-width: 743px) {
+  .login-box {
+    max-width: 400px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 16px;
+  }
+
+  .login-logo {
+    width: 100%;
+    justify-content: center;
+    gap: 12px;
+  }
+
+  .login-main,
+  .login-main-top,
+  .inputs,
+  label {
+    width: 100%;
+    align-self: stretch;
+  }
+
+  input,
+  .button-submit-login,
+  .button-submit-signup,
+  .login-main-mid {
+    width: 100%;
+  }
+
+  .mid-container {
+    width: 100%;
+  }
+}
+
+/* error msg */
+.err-msg {
+  color: var(--error-red, #f74747);
+  font-family: Pretendard;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  margin-top: 2px;
+}
+
+.input-error {
+  color: #f74747;
+  border: 1px solid #f74747 !important;
+}