diff --git a/signup.css b/auth.css
similarity index 50%
rename from signup.css
rename to auth.css
index b84accd4..3e8cf51c 100644
--- a/signup.css
+++ b/auth.css
@@ -2,54 +2,84 @@ html {
   color: var(--gray800);
 }
 
+body {
+  padding: 10vh 0;
+}
+
 .wrap {
   max-width: 640px;
   width: 100%;
   margin: 0 auto;
 }
 
-.logo {
-  margin-top: 240px;
-}
-
-.logo a{
+.logo a {
   display: flex;
   justify-content: center;
 }
 
-.logo img  {
+.logo img {
   width: 60%;
 }
 
-.signup-form{
+.login-form,
+.signup-form {
   display: flex;
   flex-direction: column;
   gap: 24px;
-  margin-top: 40px;
+  margin-top: 55px;
 }
 
-.input-group{
+.input-group {
   display: flex;
   flex-direction: column;
   gap: 16px;
   position: relative;
 }
 
-.input-group input{
+.input-group input {
   padding: 16px 24px;
   background-color: var(--gray100);
   border-width: 0;
   border-radius: 12px;
 }
 
-.input-group img {
+.input-error {
+  outline: var(--error) solid 1.5px;
+}
+
+.input-valid {
+  outline: var(--blue) solid 1.5px;
+}
+
+.error-message {
+  color: var(--error);
+  padding-left: 16px;
+}
+
+.input-group button {
   position: absolute;
   right: 24px;
-  bottom: 16px;
+  top: 54px;
   width: 24px;
+  height: 24px;
+  padding: 0px;
+  background-color: transparent;
 }
 
-.simple-login{
+.input-group img {
+  width: 100%;
+}
+
+.button-disabled {
+  background-color: var(--gray400);
+}
+
+.button-disabled:active,
+.button-disabled:hover {
+  background-color: var(--gray400)
+}
+
+.simple-login {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -59,22 +89,35 @@ html {
   background-color: #E6F2FF;
 }
 
-.simple-login ul{
+.simple-login ul {
   display: flex;
   gap: 16px;
 }
 
-.simple-login ul li img{
+.simple-login ul li img {
   width: 42px;
 }
 
-.to-login{
+.to-signup,
+.to-login {
   display: flex;
   justify-content: center;
   gap: 4px;
   margin-top: 24px;
 }
 
+.to-signup a,
 .to-login a {
   text-decoration: underline;
+}
+
+/* Mobile */
+@media (min-width:375px) and (max-width:767px) {
+  body {
+    padding: 10vh 16px;
+  }
+
+  .wrap {
+    max-width: 400px;
+  }
 }
\ No newline at end of file
diff --git a/auth.js b/auth.js
new file mode 100644
index 00000000..2da5229f
--- /dev/null
+++ b/auth.js
@@ -0,0 +1,174 @@
+const loginForm = document.querySelector(".login-form");
+const signupForm = document.querySelector(".signup-form");
+
+const setInputError = (event) => {
+  if (event.target.closest("button")) {
+    return;
+  }
+  if (event.target.value === "") {
+    event.target.nextElementSibling?.remove();
+    event.target.classList.add("input-error");
+    setErrorMessage(event.target, "empty");
+  } else if (event.target.id === "useremail") {
+    event.target.nextElementSibling?.remove();
+    if (event.target.validationMessage) {
+      event.target.classList.add("input-error");
+      setErrorMessage(event.target, "email");
+    } else {
+      event.target.classList.remove("input-error");
+    }
+  } else if (
+    event.target.id === "password" ||
+    event.target.id === "passwordCheck"
+  ) {
+    event.target.nextElementSibling?.remove();
+    if (event.target.value.length < 8) {
+      event.target.classList.add("input-error");
+      setErrorMessage(event.target, "password");
+    } else {
+      event.target.classList.remove("input-error");
+      checkPassword();
+    }
+  } else {
+    event.target.classList.remove("input-error");
+    event.target.nextElementSibling?.remove();
+  }
+};
+
+const checkPassword = () => {
+  const password = document.querySelector("#password");
+  const passwordCheck = document.querySelector("#passwordCheck");
+  if (
+    password.value !== passwordCheck?.value &&
+    passwordCheck?.value.length >= 8
+  ) {
+    passwordCheck.nextElementSibling?.remove();
+    passwordCheck.classList.add("input-error");
+    passwordCheck.classList.remove("input-valid");
+    setErrorMessage(passwordCheck, "passwordCheck");
+  } else if (password.value === passwordCheck?.value) {
+    passwordCheck.nextElementSibling?.remove();
+    passwordCheck.classList.remove("input-error");
+    passwordCheck.classList.add("input-valid");
+  }
+};
+
+const setErrorMessage = (element, type) => {
+  const errorMessage = document.createElement("p");
+  errorMessage.classList.add("error-message", "text-lg", "semibold");
+  if (type === "empty") {
+    if (!element.nextElementSibling) {
+      switch (element.id) {
+        case "useremail":
+          errorMessage.textContent = "이메일을 입력해주세요.";
+          break;
+        case "password":
+          errorMessage.textContent = "비밀번호를 입력해주세요.";
+          break;
+        case "nickname":
+          errorMessage.textContent = "닉네임을 입력해주세요.";
+          break;
+        case "passwordCheck":
+          errorMessage.textContent = "비밀번호 확인을 입력해주세요.";
+          break;
+      }
+      element.after(errorMessage);
+    }
+  } else if (type === "email") {
+    errorMessage.textContent = "잘못된 이메일 형식입니다.";
+    element.after(errorMessage);
+  } else if (type === "password") {
+    errorMessage.textContent = "비밀번호를 8자 이상 입력해주세요.";
+    element.after(errorMessage);
+  } else if (type === "passwordCheck") {
+    errorMessage.textContent = "비밀번호가 일치하지 않습니다.";
+    element.after(errorMessage);
+  }
+};
+
+const setInputValid = (event) => {
+  if (event.target.closest("button")) {
+    return;
+  }
+  if (!event.target.classList.contains("input-error")) {
+    event.target.classList.add("input-valid");
+  } else {
+    event.target.classList.remove("input-valid");
+  }
+};
+
+const isValidForm = (event) => {
+  for (let e of event.currentTarget) {
+    if (e.tagName === "INPUT" && !e.classList.contains("input-valid")) {
+      return false;
+    }
+  }
+  return true;
+};
+
+const loginButton = document.querySelector(".login-button");
+const signupButton = document.querySelector(".signup-button");
+
+const toItems = (e) => {
+  e.preventDefault();
+  location.href = "./items.html";
+};
+
+const toLogin = (e) => {
+  e.preventDefault();
+  location.href = "./login.html";
+};
+
+const setLoginButton = (event) => {
+  if (isValidForm(event)) {
+    loginButton.disabled = false;
+    loginButton.classList.remove("button-disabled");
+    loginButton.addEventListener("click", toItems);
+  } else {
+    loginButton.disabled = true;
+    loginButton.classList.add("button-disabled");
+    loginButton.removeEventListener("click", toItems);
+  }
+};
+
+const setSignupButton = (event) => {
+  if (isValidForm(event)) {
+    signupButton.disabled = false;
+    signupButton.classList.remove("button-disabled");
+    signupButton.addEventListener("click", toLogin);
+  } else {
+    signupButton.disabled = true;
+    signupButton.classList.add("button-disabled");
+    signupButton.removeEventListener("click", toLogin);
+  }
+};
+
+const visibilityBtn = document.querySelectorAll(".visibility-btn");
+let isVisible = false;
+const toggleVisibility = (event) => {
+  if (isVisible) {
+    event.target.alt = "눈감음";
+    event.target.src = "images/ic_visibility_off.png";
+    event.target.parentElement.nextElementSibling.nextElementSibling.type =
+      "password";
+  } else {
+    event.target.alt = "눈 뜸";
+    event.target.src = "images/ic_visibility_on.png";
+    event.target.parentElement.nextElementSibling.nextElementSibling.type =
+      "text";
+  }
+  isVisible = !isVisible;
+};
+console.log(visibilityBtn);
+for (let ele of visibilityBtn) {
+  console.log(ele);
+  ele.addEventListener("click", toggleVisibility);
+}
+
+loginForm?.addEventListener("focusout", setInputError);
+loginForm?.addEventListener("focusout", setInputValid);
+loginForm?.addEventListener("focusout", setLoginButton);
+
+signupForm?.addEventListener("focusout", setInputError);
+signupForm?.addEventListener("focusout", setInputValid);
+signupForm?.addEventListener("focusout", setSignupButton);
diff --git a/common.css b/common.css
new file mode 100644
index 00000000..cb70c2ff
--- /dev/null
+++ b/common.css
@@ -0,0 +1,22 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: Pretendard, sans-serif;
+  font-size: 16px;
+}
+
+:root {
+  --gray900: #111827;
+  --gray800: #1F2937;
+  --gray700: #374151;
+  --gray600: #4B5563;
+  --gray500: #6B7280;
+  --gray400: #9CA3AF;
+  --gray200: #E5E7EB;
+  --gray100: #F3F4F6;
+  --gray50: #F9FAFB;
+  --blue: #3692FF;
+  --error: #F74747;
+}
\ No newline at end of file
diff --git a/images/btn_visibility_off.png b/images/ic_visibility_off.png
similarity index 100%
rename from images/btn_visibility_off.png
rename to images/ic_visibility_off.png
diff --git a/images/btn_visibility_on.png b/images/ic_visibility_on.png
similarity index 100%
rename from images/btn_visibility_on.png
rename to images/ic_visibility_on.png
diff --git a/images/logo_lg.png b/images/logo_lg.png
index bc206ad5..3ce14570 100644
Binary files a/images/logo_lg.png and b/images/logo_lg.png differ
diff --git a/images/logo_sm.png b/images/logo_sm.png
index dfd80154..a41e2ae4 100644
Binary files a/images/logo_sm.png and b/images/logo_sm.png differ
diff --git a/images/logo_typo.png b/images/logo_typo.png
new file mode 100644
index 00000000..af3058e2
Binary files /dev/null and b/images/logo_typo.png differ
diff --git a/images/og_image.png b/images/og_image.png
new file mode 100644
index 00000000..02e69b20
Binary files /dev/null and b/images/og_image.png differ
diff --git a/index.css b/index.css
index 258a4b2b..5a26b271 100644
--- a/index.css
+++ b/index.css
@@ -18,7 +18,7 @@ header {
 
 footer {
   background-color: var(--gray900);
-  height: 10rem;
+  height: 160px;
 }
 
 .gnb {
@@ -29,7 +29,8 @@ footer {
 }
 
 .gnb img {
-  max-width: 10rem;
+  display: block;
+  max-width: 160px;
 }
 
 .btn-login {
@@ -44,78 +45,109 @@ footer {
   margin: 0 auto;
 }
 
-.home-top-section img, .home-bottom-section img {
+.home-top-section img,
+.home-bottom-section img {
   max-width: 45rem;
 }
 
 .home-top-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
   background-color: #CFE5FF;
-  height: 34rem;
+  height: 540px;
 }
 
 .home-top {
-  height: 100%;
   display: flex;
   justify-content: center;
   align-items: flex-end;
+  height: 90%;
 }
 
-.home-top-content{
+.home-top-content {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  align-items: flex-start;
+  gap: 32px;
   padding-bottom: 4%;
 }
 
+.home-top-content p {
+  width: 340px;
+}
+
+.home-section {
+  display: flex;
+  flex-direction: column;
+  background-color: #FFFFFF;
+  padding: 24px;
+}
+
 .home-section img {
-  max-width: 36rem;
+  width: 580px;
 }
 
 .home {
-  background-color: #FFFFFF;
-  height: 45rem;
+  height: 720px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.home-content{
+.home-content {
   background-color: #FCFCFC;
   display: flex;
   justify-content: center;
-  gap: 4rem; 
+  gap: 64px;
   border-radius: 12px;
-  width: 65rem;
+  width: 1040px;
 }
 
-.home-content-1, .home-content-2, .home-content-3 {
+.home-content-1,
+.home-content-2,
+.home-content-3 {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-right: 0.75rem;
+  margin-right: 12px;
+
+  word-break: keep-all;
 }
 
 .home-content-2 {
   text-align: end;
   margin-right: 0;
-  margin-left: 0.75rem;
+  margin-left: 12px;
+}
+
+.home-title {
+  width: 340px;
 }
 
 .home-describe {
   margin-top: 1.5rem;
+  width: 340px;
+}
+
+.home-content-3 .home-describe {
+  width: 380px;
 }
 
 .home-bottom-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
   background-color: #CFE5FF;
-  height: 33.75rem;
+  height: 540px;
 }
 
 .home-bottom {
-  height: 100%;
   display: flex;
   justify-content: center;
   align-items: flex-end;
-  gap: 4rem;
+  height: 80%;
+  gap: 64px;
 }
 
 .home-bottom-content {
@@ -125,23 +157,25 @@ footer {
 .footer-content {
   display: flex;
   justify-content: space-between;
-  max-width: 70rem;
-  padding-top: 1.5%;
+  max-width: 1120px;
+  padding-top: 32px;
+  height: 100%;
 }
 
-.faq, .sns {
+.faq,
+.sns {
   display: flex;
 }
 
 .faq {
-  gap: 2rem;
+  gap: 32px;
 }
 
 .sns {
-  gap: 0.75rem;
+  gap: 12px;
 }
 
-.sns img{
+.sns img {
   max-width: 1.25rem;
 }
 
@@ -150,7 +184,8 @@ footer {
   margin-bottom: 0.75rem;
 }
 
-.copyright, .faq {
+.copyright,
+.faq {
   font-size: 1rem;
   font-weight: 400;
 }
@@ -163,14 +198,120 @@ footer {
   color: var(--gray200);
 }
 
-@media (max-width:1920px) {
+@media (min-width:1200px) and (max-width:1920px) {
   .gnb {
     padding: 9px 200px
   }
 }
 
-@media (max-width:1280px) {
-  html {
-    font-size: 12px;
+/* (min-width:768px) and  */
+@media (max-width:1199px) {
+  .gnb {
+    padding: 9px 24px
+  }
+
+  .home-top-section img,
+  .home-bottom-section img {
+    max-width: 100%;
+  }
+
+  .home-top-section {
+    height: 105vw;
+  }
+
+  .home-top {
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .home-top-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .home-top-content p {
+    width: 100%;
+  }
+
+  .home-section {
+    gap: 52px;
+    padding-bottom: 56px;
+  }
+
+  .home-section img {
+    width: 100%;
+  }
+
+  .home {
+    height: auto;
+  }
+
+  .home-content {
+    background-color: #FFFFFF;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+  }
+
+  .home:nth-child(2) .home-content {
+    flex-direction: column-reverse;
+    align-items: flex-end;
+  }
+
+  .home-content-2 {
+    text-align: end;
+    align-items: flex-end;
+    margin-right: 0;
+    margin-left: 12px;
+  }
+
+  .home-title {
+    width: 100%;
+  }
+
+  .home-bottom-section {
+    background-color: #CFE5FF;
+    height: 125vw;
+  }
+
+  .home-bottom {
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+  }
+
+  .footer-content {
+    padding: 32px 10%;
+  }
+}
+
+@media (min-width:375px) and (max-width:767px) {
+  .gnb {
+    padding: 9px 16px
+  }
+
+  .home-top-section {
+    height: 144vw;
+  }
+
+  .home-top-content p {
+    width: 340px;
+    text-align: center;
+  }
+
+  .btn-large {
+    padding: 12px 71px;
+  }
+
+  .footer-content {
+    flex-wrap: wrap;
+    gap: 60px;
+  }
+
+  .copyright {
+    order: 1;
   }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 1d73e512..7d1a7081 100644
--- a/index.html
+++ b/index.html
@@ -1,137 +1,138 @@
 <!DOCTYPE html>
 <html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>판다마켓</title>
-  <link rel="stylesheet" href="reset.css">
-  <link rel="stylesheet" href="utility.css">
-  <link rel="stylesheet" href="index.css">
-</head>
-<body>
-  <header>
-    <div class="gnb wrap">
-      <a href="/" class="logo">
-        <img src="./images/logo_sm.png" alt="판다마켓">
-      </a>
-      <a href="/login.html" class="btn-login btn-small Text-lg semibold">로그인</a>
-    </div>
-  </header>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://leetaesik-sprint.netlify.app/" />
+    <meta property="og:title" content="판다 마켓" />
+    <meta
+      property="og:image"
+      content="https://leetaesik-sprint.netlify.app/images/og_image.png"
+    />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="common.css" />
+    <link rel="stylesheet" href="utility.css" />
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <header>
+      <div class="gnb wrap">
+        <a href="/" class="logo">
+          <picture>
+            <source srcset="./images/logo_typo.png" media="(max-width:767px)" />
+            <img src="./images/logo_sm.png" alt="판다마켓" />
+          </picture>
+        </a>
+        <a href="/login.html" class="btn-login btn-small Text-lg semibold">
+          로그인
+        </a>
+      </div>
+    </header>
 
-  <main>
-    <section class="home-top-section">
-      <div class="home-top wrap">
-        <div class="home-top-content">
-          <p class="text-4xl bold">
-            일상의 모든 물건을<br>
-            거래해 보세요
-          </p>
-          <a href="/items.html" class="btn-large text-xl semibold">구경하러 가기</a>
+    <main>
+      <section class="home-top-section">
+        <div class="home-top wrap">
+          <div class="home-top-content">
+            <p class="text-4xl bold">일상의 모든 물건을 거래해보세요</p>
+            <a href="/items.html" class="btn-large text-xl semibold">
+              구경하러 가기
+            </a>
+          </div>
+          <img src="./images/img_home_top.png" alt="판다 이미지" />
         </div>
-        <img src="./images/img_home_top.png" alt="판다 이미지">
-      </div>
-    </section>
+      </section>
 
-    <section class="home-section">
-      <div class="home">
-        <div class="home-content">
-          <img src="./images/img_home_01.png" alt="인기 상품">
-          <div class="home-content-1">
-            <p class="keyword text-2lg bold">
-              Hot item
-            </p>
-            <p class="text-4xl bold">
-              인기 상품을<br>
-              확인해 보세요
-            </p>
-            <p class="home-describe text-2xl medium">
-              가장 HOT한 중고거래 물품을<br>
-              판다 마켓에서 확인해 보세요
-            </p>
+      <section class="home-section">
+        <div class="home">
+          <div class="home-content">
+            <img src="./images/img_home_01.png" alt="인기 상품" />
+            <div class="home-content-1">
+              <p class="keyword text-2lg bold">Hot item</p>
+              <p class="home-title text-4xl bold">인기 상품을 확인해보세요</p>
+              <p class="home-describe text-2xl medium">
+                가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요
+              </p>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="home">
-        <div class="home-content">
-          <div class="home-content-2">
-            <p class="keyword text-2lg bold">
-              Search
-            </p>
-            <p class="text-4xl bold">
-              구매를 원하는<br>
-              상품을 검색하세요
-            </p>
-            <p class="home-describe text-2xl medium">
-              구매하고 싶은 물품은 검색해서<br>
-              쉽게 찾아보세요
-            </p>
+        <div class="home">
+          <div class="home-content">
+            <div class="home-content-2">
+              <p class="keyword text-2lg bold">Search</p>
+              <p class="home-title text-4xl bold">
+                구매를 원하는 상품을 검색하세요
+              </p>
+              <p class="home-describe text-2xl medium">
+                구매하고 싶은 물품은 검색해서<br />
+                쉽게 찾아보세요
+              </p>
+            </div>
+            <img src="./images/img_home_02.png" alt="상품 검색" />
           </div>
-          <img src="./images/img_home_02.png" alt="상품 검색">
         </div>
-      </div>
-      <div class="home">
-        <div class="home-content">
-          <img src="./images/img_home_03.png" alt="상품 등록">
-          <div class="home-content-3">
-            <p class="keyword text-2lg bold">
-              Register
-            </p>
+        <div class="home">
+          <div class="home-content">
+            <img src="./images/img_home_03.png" alt="상품 등록" />
+            <div class="home-content-3">
+              <p class="keyword text-2lg bold">Register</p>
+              <p class="home-title text-4xl bold">
+                판매를 원하는 상품을 등록하세요
+              </p>
+              <p class="home-describe text-2xl medium">
+                어떤 물건이든 판매하고 싶은 상품을<br />
+                쉽게 등록하세요
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="home-bottom-section">
+        <div class="home-bottom wrap">
+          <div class="home-bottom-content">
             <p class="text-4xl bold">
-              판매를 원하는<br>
-              상품을 등록하세요
-            </p>
-            <p class="home-describe text-2xl medium">
-              어떤 물건이든 판매하고 싶은 상품을<br>
-              쉽게 등록하세요
+              믿을 수 있는<br />
+              판다마켓 중고 거래
             </p>
           </div>
+          <img src="./images/img_home_bottom.png" alt="판다 이미지" />
         </div>
-      </div>
-    </section> 
+      </section>
+    </main>
 
-    <section class="home-bottom-section">
-      <div class="home-bottom wrap">
-        <div class="home-bottom-content">
-          <p class="text-4xl bold">
-            믿을 수 있는<br>
-            판다마켓 중고 거래
-          </p>
+    <footer>
+      <div class="footer-content wrap">
+        <p class="copyright">@codeit - 2024</p>
+        <div class="faq">
+          <a href="/privacy.html">Privacy Policy</a>
+          <a href="/faq.html">FAQ</a>
         </div>
-        <img src="./images/img_home_bottom.png" alt="판다 이미지">
-      </div>
-    </section>
-  </main>
-
-  <footer>
-    <div class="footer-content wrap">
-      <p class="copyright">@codeit - 2024</p>
-      <div class="faq"> 
-        <a href="/privacy.html">Privacy Policy</a>
-        <a href="/faq.html">FAQ</a>
+        <ul class="sns">
+          <li>
+            <a href="https://facebook.com" target="_blank">
+              <img src="./images/ic_facebook.png" alt="페이스북" />
+            </a>
+          </li>
+          <li>
+            <a href="https://twitter.com" target="_blank">
+              <img src="./images/ic_twitter.png" alt="트위터" />
+            </a>
+          </li>
+          <li>
+            <a href="https://youtube.com" target="_blank">
+              <img src="./images/ic_youtube.png" alt="유튜브" />
+            </a>
+          </li>
+          <li>
+            <a href="https://instagram.com" target="_blank">
+              <img src="./images/ic_instagram.png" alt="인스타그램" />
+            </a>
+          </li>
+        </ul>
       </div>
-      <ul class="sns">
-        <li>
-          <a href="https://facebook.com" target="_blank">
-            <img src="./images/ic_facebook.png" alt="페이스북">
-          </a>
-        </li>
-        <li>
-          <a href="https://twitter.com" target="_blank">
-            <img src="./images/ic_twitter.png" alt="트위터">
-          </a>
-        </li>
-        <li>
-          <a href="https://youtube.com" target="_blank">
-            <img src="./images/ic_youtube.png" alt="유튜브">
-          </a>
-        </li>
-        <li>
-          <a href="https://instagram.com" target="_blank">
-            <img src="./images/ic_instagram.png" alt="인스타그램">
-          </a>
-        </li>
-      <ul/>
-    </div>
-  </footer>
-</body>
-</html>
\ No newline at end of file
+    </footer>
+  </body>
+</html>
diff --git a/login.css b/login.css
deleted file mode 100644
index 079b4d54..00000000
--- a/login.css
+++ /dev/null
@@ -1,80 +0,0 @@
-html {
-  color: var(--gray800);
-}
-
-.wrap {
-  max-width: 640px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-.logo {
-  margin-top: 240px;
-}
-
-.logo a{
-  display: flex;
-  justify-content: center;
-}
-
-.logo img  {
-  width: 60%;
-}
-
-.login-form{
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  margin-top: 40px;
-}
-
-.input-group{
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  position: relative;
-}
-
-.input-group input{
-  padding: 16px 24px;
-  background-color: var(--gray100);
-  border-width: 0;
-  border-radius: 12px;
-}
-
-.input-group img {
-  position: absolute;
-  right: 24px;
-  bottom: 16px;
-  width: 24px;
-}
-
-.simple-login{
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 23px;
-  border-radius: 8px;
-  margin-top: 24px;
-  background-color: #E6F2FF;
-}
-
-.simple-login ul{
-  display: flex;
-  gap: 16px;
-}
-
-.simple-login ul li img{
-  width: 42px;
-}
-
-.to-signup{
-  display: flex;
-  justify-content: center;
-  gap: 4px;
-  margin-top: 24px;
-}
-
-.to-signup a {
-  text-decoration: underline;
-}
\ No newline at end of file
diff --git a/login.html b/login.html
index a3b53126..3071ed5a 100644
--- a/login.html
+++ b/login.html
@@ -1,55 +1,75 @@
 <!DOCTYPE html>
 <html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>판다마켓 로그인</title>
-  <link rel="stylesheet" href="reset.css">
-  <link rel="stylesheet" href="utility.css">
-  <link rel="stylesheet" href="login.css">
-</head>
-<body>
-  <header>
-    <div class="logo wrap">
-      <a href="/">
-        <img src="images/logo_lg.png" alt="판다마켓">
-      </a>
-    </div>
-  </header>
-  <main>
-    <div class="wrap">
-      <form class="login-form">
-        <div class="input-group">
-          <label for="useremail" class="bold">이메일</label>
-          <input type="email" id="useremail" class="text-lg regular">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓 로그인</title>
+    <link rel="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="common.css" />
+    <link rel="stylesheet" href="utility.css" />
+    <link rel="stylesheet" href="auth.css" />
+  </head>
+  <body>
+    <header>
+      <div class="logo wrap">
+        <a href="/">
+          <img src="images/logo_lg.png" alt="판다마켓" />
+        </a>
+      </div>
+    </header>
+    <main>
+      <div class="wrap">
+        <form class="login-form">
+          <div class="input-group">
+            <label for="useremail" class="bold">이메일</label>
+            <input
+              type="email"
+              id="useremail"
+              class="text-lg regular"
+              placeholder="이메일을 입력해주세요"
+            />
+          </div>
+          <div class="input-group">
+            <button type="button" class="visibility-btn">
+              <img src="images/ic_visibility_off.png" alt="눈감음" />
+            </button>
+            <label for="password" class="bold">비밀번호</label>
+            <input
+              type="password"
+              id="password"
+              class="text-lg regular"
+              placeholder="비밀번호를 입력해주세요"
+            />
+          </div>
+          <button
+            type="submit"
+            class="login-button btn-large text-xl semibold button-disabled"
+            disabled="true"
+          >
+            로그인
+          </button>
+        </form>
+        <div class="simple-login">
+          <span class="text-lg medium">간편 로그인하기</span>
+          <ul>
+            <li>
+              <a href="https://www.google.com/">
+                <img src="images/ic_google.png" alt="구글" />
+              </a>
+            </li>
+            <li>
+              <a href="https://www.kakaocorp.com/page/">
+                <img src="images/ic_kakao.png" alt="카카오톡" />
+              </a>
+            </li>
+          </ul>
         </div>
-        <div class="input-group">
-          <label for="password" class="bold">비밀번호</label>
-          <input type="password" id="password" class="text-lg regular">
-          <img src="images/btn_visibility_off.png" alt="눈감음">
+        <div class="to-signup">
+          <span>판다마켓이 처음이신가요?</span>
+          <a href="/signup.html">회원가입</a>
         </div>
-        <button class="btn-large text-xl semibold">로그인</button>
-      </form>
-      <div class="simple-login">
-        <span class="text-lg medium">간편 로그인하기</span>
-        <ul>
-          <li>
-            <a href="https://www.google.com/">
-              <img src="images/ic_google.png" alt="구글">
-            </a>
-          </li>
-          <li>
-            <a href="https://www.kakaocorp.com/page/">
-              <img src="images/ic_kakao.png" alt="카카오톡">
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div class="to-signup">
-        <span>판다마켓이 처음이신가요?</span>
-        <a href="/signup.html">회원가입</a>
       </div>
-    </div>
-  </main>
-</body>
-</html>
\ No newline at end of file
+    </main>
+    <script src="./auth.js"></script>
+  </body>
+</html>
diff --git a/reset.css b/reset.css
index 95854cfa..532056bb 100644
--- a/reset.css
+++ b/reset.css
@@ -1,12 +1,3 @@
-* {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: Pretendard, sans-serif;
-  font-size: 16px;
-}
-
 a {
   text-decoration: none;
   cursor: pointer;
@@ -16,7 +7,8 @@ button {
   border: none;
 }
 
-body, p {
+body,
+p {
   margin: 0;
   padding: 0;
 }
diff --git a/signup.html b/signup.html
index 3980ea73..f0fd3119 100644
--- a/signup.html
+++ b/signup.html
@@ -1,64 +1,96 @@
 <!DOCTYPE html>
 <html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>판다마켓 회원가입</title>
-  <link rel="stylesheet" href="reset.css">
-  <link rel="stylesheet" href="utility.css">
-  <link rel="stylesheet" href="signup.css">
-</head>
-<body>
-  <header>
-    <div class="logo wrap">
-      <a href="/">
-        <img src="images/logo_lg.png" alt="판다마켓">
-      </a>
-    </div>
-  </header>
-  <main>
-    <div class="wrap">
-      <form class="signup-form">
-        <div class="input-group">
-          <label for="useremail" class="bold">이메일</label>
-          <input type="email" id="useremail" class="text-lg regular">
-        </div>
-        <div class="input-group">
-          <label for="nickname" class="bold">닉네임</label>
-          <input type="text" id="nickname" class="text-lg regular">
-        </div>
-        <div class="input-group">
-          <label for="password" class="bold">비밀번호</label>
-          <input type="password" id="password" class="text-lg regular">
-          <img src="images/btn_visibility_off.png" alt="눈감음">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓 회원가입</title>
+    <link rel="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="common.css" />
+    <link rel="stylesheet" href="utility.css" />
+    <link rel="stylesheet" href="auth.css" />
+  </head>
+  <body>
+    <header>
+      <div class="logo wrap">
+        <a href="/">
+          <img src="images/logo_lg.png" alt="판다마켓" />
+        </a>
+      </div>
+    </header>
+    <main>
+      <div class="wrap">
+        <form class="signup-form">
+          <div class="input-group">
+            <label for="useremail" class="bold">이메일</label>
+            <input
+              type="email"
+              id="useremail"
+              class="text-lg regular"
+              placeholder="이메일을 입력해주세요"
+            />
+          </div>
+          <div class="input-group">
+            <label for="nickname" class="bold">닉네임</label>
+            <input
+              type="text"
+              id="nickname"
+              class="text-lg regular"
+              placeholder="닉네임을 입력해주세요"
+            />
+          </div>
+          <div class="input-group">
+            <button type="button" class="visibility-btn">
+              <img src="images/ic_visibility_off.png" alt="눈감음" />
+            </button>
+            <label for="password" class="bold">비밀번호</label>
+            <input
+              type="password"
+              id="password"
+              class="text-lg regular"
+              placeholder="비밀번호를 입력해주세요"
+            />
+          </div>
+          <div class="input-group">
+            <button type="button" class="visibility-btn">
+              <img src="images/ic_visibility_off.png" alt="눈감음" />
+            </button>
+            <label for="passwordCheck" class="bold">비밀번호 확인</label>
+            <input
+              type="password"
+              id="passwordCheck"
+              class="text-lg regular"
+              placeholder="비밀번호를 다시 한 번 입력해주세요"
+            />
+          </div>
+          <button
+            type="submit"
+            class="signup-button btn-large text-xl semibold button-disabled"
+            disabled="true"
+          >
+            회원가입
+          </button>
+        </form>
+        <div class="simple-login">
+          <span class="text-lg medium">간편 로그인하기</span>
+          <ul>
+            <li>
+              <a href="https://www.google.com/">
+                <img src="images/ic_google.png" alt="구글" />
+              </a>
+            </li>
+            <li>
+              <a href="https://www.kakaocorp.com/page/">
+                <img src="images/ic_kakao.png" alt="카카오톡" />
+              </a>
+            </li>
+          </ul>
         </div>
-        <div class="input-group">
-          <label for="checkPassword" class="bold">비밀번호 확인</label>
-          <input type="text" id="checkPassword" class="text-lg regular">
-          <img src="images/btn_visibility_on.png" alt="눈뜸">
+        <div class="to-login">
+          <span>이미 회원이신가요?</span>
+          <a href="/login.html">로그인</a>
         </div>
-        <button class="btn-large text-xl semibold">회원가입</button>
-      </form>
-      <div class="simple-login">
-        <span class="text-lg medium">간편 로그인하기</span>
-        <ul>
-          <li>
-            <a href="https://www.google.com/">
-              <img src="images/ic_google.png" alt="구글">
-            </a>
-          </li>
-          <li>
-            <a href="https://www.kakaocorp.com/page/">
-              <img src="images/ic_kakao.png" alt="카카오톡">
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div class="to-login">
-        <span>이미 회원이신가요?</span>
-        <a href="/login.html">로그인</a>
       </div>
-    </div>
-  </main>
-</body>
-</html>
\ No newline at end of file
+    </main>
+    <script src="./auth.js"></script>
+  </body>
+</html>
diff --git a/utility.css b/utility.css
index f11d2f82..c11218be 100644
--- a/utility.css
+++ b/utility.css
@@ -1,31 +1,29 @@
-:root {
-  --gray900: #111827;
-  --gray800: #1F2937;
-  --gray700: #374151;
-  --gray600: #4B5563;
-  --gray500: #6B7280;
-  --gray400: #9CA3AF;
-  --gray200: #E5E7EB;
-  --gray100: #F3F4F6;
-  --gray50: #F9FAFB;
-  --blue: #3692FF;
-}
-
-.btn-large, .btn-small {
+.btn-large,
+.btn-medium,
+.btn-small {
   background-color: var(--blue);
   color: var(--gray100);
 }
 
-.btn-large:hover, .btn-small:hover {
+.btn-large:hover,
+.btn-medium:hover,
+.btn-small:hover {
   background-color: #1967D6;
 }
 
-.btn-large:active, .btn-small:active {
+.btn-large:active,
+.btn-medium:active,
+.btn-small:active {
   background-color: #1251AA;
 }
 
 .btn-large {
-  padding: 1rem 7.75rem;
+  padding: 16px 124px;
+  border-radius: 40px;
+}
+
+.btn-medium {
+  padding: 12px 71px;
   border-radius: 40px;
 }
 
@@ -67,12 +65,12 @@
   line-height: 2rem;
 }
 
-.text-lg {
-  font-size: 1rem;
+.text-2lg {
+  font-size: 1.125rem;
   line-height: 1.625rem;
 }
 
-.text-2lg {
-  font-size: 1.125rem;
+.text-lg {
+  font-size: 1rem;
   line-height: 1.625rem;
 }
\ No newline at end of file