diff --git a/assets/img_home_01.png b/assets/img_home_01.png
new file mode 100644
index 00000000..a77985be
Binary files /dev/null and b/assets/img_home_01.png differ
diff --git a/assets/img_home_02.png b/assets/img_home_02.png
new file mode 100644
index 00000000..837a1709
Binary files /dev/null and b/assets/img_home_02.png differ
diff --git a/assets/img_home_03.png b/assets/img_home_03.png
new file mode 100644
index 00000000..d4194c6b
Binary files /dev/null and b/assets/img_home_03.png differ
diff --git a/assets/img_home_bottom.png b/assets/img_home_bottom.png
new file mode 100644
index 00000000..827f1b01
Binary files /dev/null and b/assets/img_home_bottom.png differ
diff --git a/assets/img_home_top.png b/assets/img_home_top.png
new file mode 100644
index 00000000..db639cb9
Binary files /dev/null and b/assets/img_home_top.png differ
diff --git a/assets/visibility_off.png b/assets/visibility_off.png
new file mode 100644
index 00000000..42390197
Binary files /dev/null and b/assets/visibility_off.png differ
diff --git a/assets/visibility_on.png b/assets/visibility_on.png
new file mode 100644
index 00000000..2b75130b
Binary files /dev/null and b/assets/visibility_on.png differ
diff --git a/css/auth.css b/css/auth.css
index e077bad8..3079327a 100644
--- a/css/auth.css
+++ b/css/auth.css
@@ -2,69 +2,76 @@ main {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin: 231px auto;
+  margin: 0 auto;
   width: 640px;
-  height: 618px;
 }
 
 .logo-auth-box {
- display: flex;
- justify-content: center; 
+  display: flex;
+  justify-content: center;
 }
 
-.logo-auth-box img{
-  width: 396px;
-  height: 132px;
+.logo-auth-box a {
+  margin: 0 auto;
+  display: block;
+  margin-top: 24px;
+  margin-bottom: 24px;
 }
 
-.cont-area {
-  margin-top: 40px;
+.logo-auth-box img{
+  width: 396px;
 }
 
-.group-inp {
-  height: 98px;
+.group-input {
+  display: flex;
+  flex-direction: column;
   margin-bottom: 24px;
 }
 
-.group-inp label {
+.group-input label {
   color: var(--gray-800);
   font-weight: 700;
   font-size: 18px;
-  line-height: 26px;
   margin-bottom: 16px;
 }
 
-.group-inp input {
+.group-input input {
   background-color: var(--gray-100);
   width: 100%;
   height: 56px;
   border: none;
   border-radius: 12px;
-  margin: 16px 0 24px;
   font-size: 16px;
   font-weight: 400;
   line-height: 26px;
   vertical-align: middle;
-  padding-left: 24px;
+  padding: 16px 24px;
   outline: none;
 }
 
-#inputPwd {
+.input-font {
   font-size: 18px;
   color: var(--gray-800);
 }
 
 .inputPwd-wrap {
   position: relative;
+  display: flex;
+  align-items: center;
 }
 
-.inputPwd-wrap i {
+.inputPwd-wrap .toggle-password {
+  width: 24px;
   position: absolute;
-  top: 34px;
-  right: 16px;
+  right: 24px;
   cursor: pointer;
 }
 
+.inputPwd-wrap img {
+  width: 100%;
+  border: none;
+}
+
 .login-btn {
   width: 100%;
   padding: 16px 124px;
@@ -107,16 +114,29 @@ main {
 }
 
 .sign-up-link {
-    display: flex;
-    justify-content: center;
-    margin-top: 24px;
-    gap: 4px;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 24px;
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+  gap: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
 }
 
 .sign-up-link a {
   color: var(--blue-100);
   text-decoration: underline;
+}
+
+/* Mobile */
+@media (max-width: 767px) {
+  main {
+    max-width: 400px;
+    padding: 0 16px;
+    margin: 0 auto;
+  }
+
+  .logo-auth-box img {
+    width: 198px;
+  }
 }
\ No newline at end of file
diff --git a/css/palette.css b/css/palette.css
deleted file mode 100644
index c2df9e39..00000000
--- a/css/palette.css
+++ /dev/null
@@ -1,19 +0,0 @@
-:root {
-  --gray-900: #111827;
-  --gray-800: #1F2937;
-  --gray-700: #374151;
-  --gray-600: #4B5563;
-  --gray-500: #6B7280;
-  --gray-400: #9CA3AF;
-  --gray-200: #E5E7EB;
-  --gray-100: #F3F4F6;
-  --gray-50:  #F9FAFB;
-  
-  --blue-100: #3692FF;
-  --blue-200: #1967D6;
-  --blue-300: #1251AA;
-  --blue-light: #CFE5FF;
-
-  --gray: #FCFCFC;
-  --white: #FFFFFF;
-}
\ No newline at end of file
diff --git a/css/reset.css b/css/reset.css
index 5ac153cd..53b00988 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -1,10 +1,35 @@
 /* Reset CSS - Enhanced Version */
+:root {
+  --gray-900: #111827;
+  --gray-800: #1F2937;
+  --gray-700: #374151;
+  --gray-600: #4B5563;
+  --gray-500: #6B7280;
+  --gray-400: #9CA3AF;
+  --gray-200: #E5E7EB;
+  --gray-100: #F3F4F6;
+  --gray-50:  #F9FAFB;
+  
+  --blue-300: #1251AA;
+  --blue-200: #1967D6;
+  --blue-100: #3692FF;
+  --blue-light: #CFE5FF;
+
+  --gray: #FCFCFC;
+  --white: #FFFFFF;
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
+body {
+  word-break: keep-all;
+  font-family: "Pretendard", sans-serif;
+}
+
 a {
   text-decoration: none;
 }
diff --git a/css/style.css b/css/style.css
index 98411061..25712f60 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,7 +1,3 @@
-body {
-  font-family: "Pretendard", sans-serif;
-}
-
 /* haeder 영역 */
 header {
   position: sticky;
@@ -54,18 +50,41 @@ nav {
 }
 
 /* main 영역 banner */
-.main-banner {
-  padding-top: 200px;
-  height: 540px;
+.banner {
   background-color: var(--blue-light);
+  text-align: left;
+  height: 540px;
+  display: flex;
+  align-items: center;
+  background-position: 65% bottom;
+  background-size: 40%;
+  background-repeat: no-repeat;
+}
+
+#topBanner {
+  background-image: url('/assets/img_home_top.png');
 }
 
 .banner-wrap {
-  display: flex;
-  height: 340px;
-  justify-content: center;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1200px;
+  padding-left: 24px;
+}
+
+.banner-title {
+  padding: 0 24px;
 }
 
+.banner-title h2 {
+  color: var(--gray-700);
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+  padding-bottom: 32px;
+}
+
+
 .banner-content {
   display: grid;
   width: 357px;
@@ -111,15 +130,11 @@ nav {
   pointer-events: none;
 }
 
-.banner-wrap img {
-  width: 746px;
-  height: 340px;
-}
-
 /* main 영역 content */
 .main-content {
   display: flex;
   flex-direction: column;
+  padding: 138px 0;
 }
 
 .content-wrap {
@@ -127,7 +142,7 @@ nav {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 720px;
+  margin-bottom: 138px;
 }
 
 .content-layout {
@@ -159,7 +174,6 @@ nav {
 
 .content-text {
   display: flex;
-  height: 238px;
   padding-left: 64px;
   padding-right: 23.5px;
   flex-direction: column;
@@ -189,33 +203,11 @@ nav {
 
 /* main bottom */
 .main-bottom {
-  padding-top: 143px;
-  height: 540px;
   background-color: var(--blue-light);
 }
 
-.bottom-wrap {
-  display: flex;
-  height: 340px;
-  justify-content: center;
-}
-
-.bottom-wrap img {
-  height: 397px;
-}
-
-.bottom-content {
-  display: flex;
-  align-items: center;
-  margin-right: 69px;
-}
-
-.bottom-content h2 {
-  color: var(--gray-700);
-  height: 112px;
-  font-size: 40px;
-  font-weight: 700;
-  line-height: 56px;
+#bottomBanner {
+  background-image: url('/assets/img_home_bottom.png');
 }
 
 /* footer 영역 */
@@ -231,6 +223,7 @@ footer {
   margin: 0 auto;
   padding: 36px 0 0 0;
   max-width: 1120px;
+  align-items: center;
 }
 
 .footer-copyright {
@@ -254,4 +247,157 @@ footer {
 .footer-social img {
   width: 20px;
   height: 20px;
+}
+
+@media (max-width: 1199px) {
+  header nav {
+    padding: 9px 16px;
+  }
+  
+  .banner {
+    padding: 0;
+    display: block;
+    height: 90vh;
+    background-size: 120%;
+    text-align: center;
+  }
+
+  .banner-wrap {
+    display: block;
+  }
+
+  .banner-title {
+    margin: 0;
+  }
+
+  .banner-title h2 {
+    padding-top: 84px;
+  }
+
+  #topBanner h2 br {
+    display: none;
+  }
+
+  .main-content {
+    display: block;
+    padding: 24px 24px 16px 24px;
+  }
+
+  .content-wrap {
+    display: block;
+    margin-bottom: 52px;
+  }
+
+  .content-item {
+    display: block;
+    background-color: var(--white);
+  }
+
+  .content-wrap img {
+    width: 100%;
+    padding: 0;
+    margin-bottom: 20px;
+    height: 70vh;
+  }
+
+  .badge {
+    margin-bottom: 12px;
+  }
+
+  .content-text {
+    display: block;
+    padding: 0;
+  }
+
+  .content-text h2 {
+    font-size: 32px;
+    line-height: 42px;
+  }
+
+  .content-text h2 br {
+    display: none;
+  }
+
+  .content-text .content-desc {
+    font-size: 18px;
+    line-height: 26px;
+    margin-top: 20px;
+  }
+
+  .footer-container {
+    padding: 0;
+  }
+
+  footer {
+    padding: 32px 104px 108px 104px;
+  }
+
+}
+
+@media (max-width: 767px) {
+
+  .banner {
+    height: 60vh;
+    background-size: 114%;
+  }
+
+  .banner-title h2 {
+    font-size: 32px;
+    line-height: 140%;
+    padding-top: 48px;
+    padding-bottom: 18px;
+  }
+
+  #topBanner h2 br {
+    display: block;
+  }
+
+  .btn-items {
+    width: 240px;
+    font-size: 18px;
+    font-weight: 600;
+    padding: 11px 71px;
+  }
+
+  .main-content {
+    padding: 52px 24px 16px 24px;
+  }
+
+  .content-wrap img {
+    height: 37vh;
+  }
+
+  .badge {
+    font-size: 16px;
+  }
+
+  .content-text h2 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  /* footer 영역 */
+  .footer-container {
+    background-color: #111827;
+    padding: 32px;
+    font-size: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 60px;
+  }
+
+  footer {
+    padding: 0;
+  }
+  
+  .footer-links {
+    margin: 0;
+  }
+
+  .footer-copyright {
+    order: 3;
+    flex-basis: 100%;
+  }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index c21778c7..e604b9b0 100644
--- a/index.html
+++ b/index.html
@@ -3,15 +3,22 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="판다마켓" />
+    <meta property="og:url" content="https://hizpanda-market.netlify.app/" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:description"
+      content="일상의 모든 물건을 거래해 보세요"
+    />
+    <meta property="og:image" content="/assets/auth_logo.png" />
     <link rel="icon" href="/assets/favicon.ico">
-    <link rel="stylesheet" href="css/reset.css" />
-    <link rel="stylesheet" href="css/palette.css" />
     <link
-      rel="stylesheet"
-      as="style"
-      crossorigin
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+    rel="stylesheet"
+    as="style"
+    crossorigin
+    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
     />
+    <link rel="stylesheet" href="css/reset.css" />
     <link rel="stylesheet" href="css/style.css" />
     <title>판다마켓</title>
   </head>
@@ -27,16 +34,15 @@ <h1>
       </nav>
     </header>
     <main>
-      <section class="main-banner">
+      <section class="main-banner banner" id="topBanner">
         <div class="banner-wrap">
-          <div class="banner-content">
+          <div class="banner-title">
             <h2>
               일상의 모든 물건을<br />
               거래해 보세요
             </h2>
             <a href="items.html" class="btn btn-items">구경하러 가기</a>
           </div>
-          <img src="assets/img_home_top.png" alt="배너 이미지" />
         </div>
       </section>
       <section class="main-content">
@@ -92,15 +98,14 @@ <h2>
           </div>
         </div>
       </section>
-      <section class="main-bottom">
-        <div class="bottom-wrap">
-          <div class="bottom-content">
+      <section class="main-bottom banner" id="bottomBanner">
+        <div class="banner-wrap">
+          <div class="banner-title">
             <h2>
               믿을 수 있는<br />
               판다마켓 중고 거래
             </h2>
           </div>
-          <img src="assets/img_home_bottom.png" alt="배너 이미지" />
         </div>
       </section>
     </main>
diff --git a/login.html b/login.html
index 8b74e98d..ea8d5881 100644
--- a/login.html
+++ b/login.html
@@ -4,15 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/assets/favicon.ico">
-    <link rel="stylesheet" href="css/reset.css" />
-    <link rel="stylesheet" href="css/palette.css" />
     <link
-      rel="stylesheet"
-      as="style"
-      crossorigin
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+    rel="stylesheet"
+    as="style"
+    crossorigin
+    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
     />
-    <script src="https://kit.fontawesome.com/5b35a6d114.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="css/reset.css" />
     <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="css/auth.css" />
     <title>판다마켓</title>
@@ -20,25 +18,25 @@
 <body>
   <main>
     <div class="logo-auth-box">
-      <h1>
-        <a href="/">
-          <img src="assets/auth_logo.png" alt="판다마켓"/>
-        </a>
-      </h1>
+      <a href="/">
+        <img src="assets/auth_logo.png" alt="판다마켓"/>
+      </a>
     </div>
     <div class="cont-area">
-      <div class="group-inp">
-        <label for="inputEmail">이메일</label>
-        <input type="email" id="inputEmail" placeholder="codeit@email.com">
-      </div>
-      <div class="group-inp">
-        <label for="inputPwd">비밀번호</label>
-        <div class="inputPwd-wrap">
-          <input type="password" id="inputPwd" placeholder="비밀번호를 입력하세요">
-          <i class="fa-regular fa-eye-slash"></i>
+      <form action="" method="post">
+        <div class="group-input">
+          <label for="inputEmail">이메일</label>
+          <input type="email" class="input-font" id="inputEmail" placeholder="이메일을 입력하세요">
         </div>
-      </div>
-      <button type="submit" class="btn login-btn">로그인</button>
+        <div class="group-input">
+          <label for="inputPwd">비밀번호</label>
+          <div class="inputPwd-wrap">
+            <input type="password" class="input-font" id="inputPwd" placeholder="비밀번호를 입력하세요">
+            <img src="assets/visibility_off.png" alt="비밀번호 숨김" class="toggle-password"/>
+          </div>
+        </div>
+        <button type="submit" class="btn login-btn">로그인</button>
+      </form>
       <div class="social-login-wrap">
         <div class="social-login-title">간편 로그인하기</div>
         <ul>
diff --git a/signup.html b/signup.html
index f16b4807..c8af4f75 100644
--- a/signup.html
+++ b/signup.html
@@ -4,15 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/assets/favicon.ico">
-    <link rel="stylesheet" href="css/reset.css" />
-    <link rel="stylesheet" href="css/palette.css" />
     <link
-      rel="stylesheet"
-      as="style"
-      crossorigin
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+    rel="stylesheet"
+    as="style"
+    crossorigin
+    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
     />
-    <script src="https://kit.fontawesome.com/5b35a6d114.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="css/reset.css" />
     <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="css/auth.css" />
     <title>판다마켓</title>
@@ -20,36 +18,36 @@
 <body>
   <main>
     <div class="logo-auth-box">
-      <h1>
-        <a href="/">
-          <img src="assets/auth_logo.png" alt="판다마켓"/>
-        </a>
-      </h1>
+      <a href="/">
+        <img src="assets/auth_logo.png" alt="판다마켓"/>
+      </a>
     </div>
     <div class="cont-area">
-      <div class="group-inp">
-        <label for="inputEmail">이메일</label>
-        <input type="email" id="inputEmail" placeholder="codeit@email.com">
-      </div>
-      <div class="group-inp">
-        <label for="inputNickname">닉네임</label>
-        <input type="email" id="inputNickname" placeholder="닉네임을 입력하세요">
-      </div>
-      <div class="group-inp">
-        <label for="inputPwd">비밀번호</label>
-        <div class="inputPwd-wrap">
-          <input type="password" id="inputPwd" placeholder="비밀번호">
-          <i class="fa-regular fa-eye-slash"></i>
+      <form action="" method="post">
+        <div class="group-input">
+          <label for="inputEmail">이메일</label>
+          <input type="email" class="input-font" id="inputEmail" placeholder="이메일을 입력하세요">
         </div>
-      </div>
-      <div class="group-inp">
-        <label for="inputPwd2">비밀번호 확인</label>
-        <div class="inputPwd-wrap">
-          <input type="password" id="inputPwd2" placeholder="비밀번호 확인">
-          <i class="fa-regular fa-eye-slash"></i>
+        <div class="group-input">
+          <label for="inputNickname">닉네임</label>
+          <input type="email" class="input-font" id="inputNickname" placeholder="닉네임을 입력하세요">
         </div>
-      </div>
-      <button type="submit" class="btn login-btn">회원가입</button>
+        <div class="group-input">
+          <label for="inputPwd">비밀번호</label>
+          <div class="inputPwd-wrap">
+            <input type="password" class="input-font" id="inputPwd" placeholder="비밀번호를 입력하세요">
+            <img src="assets/visibility_off.png" alt="비밀번호 숨김" class="toggle-password"/>
+          </div>
+        </div>
+        <div class="group-input">
+          <label for="inputPwd2">비밀번호 확인</label>
+          <div class="inputPwd-wrap">
+            <input type="password" class="input-font" id="inputPwd2" placeholder="비밀번호를 입력하세요">
+            <img src="assets/visibility_off.png" alt="비밀번호 숨김" class="toggle-password"/>
+          </div>
+        </div>
+        <button type="submit" class="btn login-btn">회원가입</button>
+      </form>
       <div class="social-login-wrap">
         <div class="social-login-title">간편 로그인하기</div>
         <ul>