diff --git a/assets/css/global.css b/assets/css/global.css
index 7eb3ee76..c88254b2 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -7,4 +7,10 @@ nav {
   position: fixed;
   top: 0;
   width: 100%;
+  height: 70px;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
 }
diff --git a/assets/css/pages/login-signup.css b/assets/css/pages/login-signup.css
new file mode 100644
index 00000000..283b6c1a
--- /dev/null
+++ b/assets/css/pages/login-signup.css
@@ -0,0 +1,102 @@
+/* login, signup */
+.login-container,
+.signup-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 100px 600px;
+}
+
+.header__login,
+.header__signup {
+  margin-bottom: 40px;
+}
+
+.form__login,
+.form__signup {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.form__label-email,
+.form__label-nickname,
+.form__label-password,
+.form__label-password-confirm {
+  color: var(--color-text-label);
+  margin-bottom: 20px;
+}
+
+.form__input-email,
+.form__input-nickname,
+.form__input-password,
+.form__input-password-confirm {
+  background-color: var(--color-surface-input);
+  padding: 20px;
+  border-radius: 8px;
+  width: 100%;
+}
+
+.form__input-email,
+.form__input-nickname {
+  margin-bottom: 20px;
+}
+
+.form__input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.form__toggle-password,
+.form__toggle-password-confirm {
+  position: absolute;
+  right: 20px;
+  cursor: pointer;
+}
+
+.form__input-button {
+  padding: 20px;
+  background-color: var(--color-primary);
+  color: var(--gray100);
+  border-radius: 40px;
+  cursor: pointer;
+  font-size: var(--font-size-large);
+  margin: 30px 0;
+  width: 100%;
+}
+
+.quick-login {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  background-color: var(--color-primary-surface);
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.footer__link {
+  text-decoration: underline;
+  color: var(--color-primary);
+}
+
+/* login signup mobile */
+@media (min-width: 375px) and (max-width: 767px) {
+  .login-container,
+  .signup-container {
+    margin: 80px 16px 231px;
+    max-width: 400px;
+  }
+}
+
+/* login signup Tablet */
+@media (min-width: 768px) and (max-width: 1199px) {
+  .login-container,
+  .signup-container {
+    margin: 0 52px;
+  }
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index 875ebbc8..4957946f 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -4,6 +4,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem 12.5rem;
+  background-color: var(--color-nav-background);
 }
 
 .header__login-link {
@@ -31,15 +32,15 @@
   gap: 5%;
 }
 
-.hero__image,
-.closing-banner__image {
-  padding-top: 10rem;
+.closing-banner {
+  margin-top: 83px;
 }
 
 .wrapper {
   display: flex;
   align-items: center;
   max-width: 1200px;
+  padding-top: 200px;
 }
 
 .hero__title,
@@ -84,9 +85,9 @@
 .feature-section__item {
   display: flex;
   align-items: center;
-  margin: 8rem 0;
-  gap: 5%;
+  margin: 40px 0;
   white-space: nowrap;
+  gap: 20px;
 }
 
 .feature-section__item--reverse {
@@ -98,6 +99,7 @@
 .feature-section__content {
   display: flex;
   flex-direction: column;
+  gap: 20px;
 }
 
 /* footer */
@@ -105,14 +107,28 @@
   background-color: var(--color-footer-background);
   display: flex;
   justify-content: space-between;
-  height: 10rem;
-  padding: 2rem 25rem 0;
+  align-items: center;
+  padding: 32px 400px 108px;
+  height: 160px;
+}
+
+.footer__source {
+  font-size: 1rem;
+  color: var(--gray50);
+  white-space: nowrap;
 }
 
 .footer__nav,
 .footer__social {
   display: flex;
-  gap: 5px;
+}
+
+.footer__nav {
+  gap: 30px;
+}
+
+.footer__social {
+  gap: 10px;
 }
 
 .footer__nav-item,
@@ -122,149 +138,161 @@
   white-space: nowrap;
 }
 
-.footer__source {
-  font-size: 1rem;
-  color: var(--gray50);
-}
+/* mobile */
+@media (min-width: 375px) and (max-width: 767px) {
+  br.onlyPC {
+    display: none;
+  }
 
-/* login, signup */
-.login-container,
-.signup-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: 100px 600px;
-}
+  .header__nav {
+    padding: 0 24px;
+  }
 
-.header__login,
-.header__signup {
-  margin-bottom: 40px;
-}
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0;
+  }
 
-.form__login,
-.form__signup {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
+  .hero__content {
+    display: flex;
+    flex-direction: column;
+    padding: 48px 67px 132px;
+  }
 
-.form__label-email,
-.form__label-nickname,
-.form__label-password,
-.form__label-password-confirm {
-  color: var(--color-text-label);
-  margin-bottom: 20px;
-}
+  .hero__title {
+    font-size: var(--font-size-large);
+    text-align: center;
+  }
 
-.form__input-email,
-.form__input-nickname,
-.form__input-password,
-.form__input-password-confirm {
-  background-color: var(--color-surface-input);
-  padding: 20px;
-  border-radius: 8px;
-  width: 100%;
-}
+  .hero__link {
+    padding: 1rem 4rem;
+    font-size: 1rem;
+  }
 
-.form__input-email,
-.form__input-nickname {
-  margin-bottom: 20px;
-}
+  .hero__image {
+    max-width: 100%;
+    height: auto;
+    vertical-align: bottom;
+  }
 
-.form__input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-}
+  .feature-section__item,
+  .feature-section__item--reverse {
+    display: flex;
+    flex-direction: column;
+  }
 
-.form__toggle-password,
-.form__toggle-password-confirm {
-  position: absolute;
-  right: 20px;
-  cursor: pointer;
-}
+  .feature-section__item {
+    align-items: flex-start;
+    width: 100%;
+    padding: 0 10px;
+  }
 
-.form__input-button {
-  padding: 20px;
-  background-color: var(--color-primary);
-  color: var(--gray100);
-  border-radius: 40px;
-  cursor: pointer;
-  font-size: var(--font-size-large);
-  margin: 30px 0;
-  width: 100%;
-}
+  .feature-section__item--reverse {
+    align-items: flex-end;
+  }
 
-.quick-login {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  background-color: var(--color-primary-surface);
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 20px;
-}
+  .feature-section__headline {
+    font-size: 1.5rem;
+  }
 
-.footer__link {
-  text-decoration: underline;
-  color: var(--color-primary);
+  .feature-section__description {
+    font-size: 1rem;
+  }
+
+  .closing-banner__headline {
+    text-align: center;
+    margin: 121px 0 131px;
+    font-size: 2rem;
+  }
+
+  .footer {
+    flex-wrap: wrap;
+    padding: 32px;
+    gap: 20px;
+  }
+
+  .footer__source-wrap {
+    text-align: left;
+    order: 1;
+  }
 }
 
-/* @media screen and (max-width: 767px) {
-  .header__nav {
-    padding: 1rem;
+/* Tablet */
+@media (min-width: 768px) and (max-width: 1199px) {
+  br.onlyPC {
+    display: none;
   }
 
-  .wrapper {
+  .hero {
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 0 24px;
+  }
+
+  .hero__image {
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    margin-top: 2rem;
   }
 
   .hero__content {
-    padding-top: 4rem;
+    text-align: center;
+    padding: 48px 0 0;
+    margin: 84px 150px 211px;
   }
 
-  .hero__image {
-    max-width: 80%;
-    height: auto;
-    vertical-align: bottom;
+  .hero__title {
+    font-size: 2rem;
+    line-height: 1.4;
   }
 
   .hero__link {
-    margin-top: 1rem;
+    padding: 1rem 6rem;
     font-size: 1rem;
   }
 
-  article {
-    display: flex;
-    flex-direction: column;
+  .header__nav {
+    padding: 0 16px;
   }
 
-  .search-banner {
+  .feature-section {
+    padding: 0 24px;
+  }
+
+  .feature-section__item {
     display: flex;
     flex-direction: column;
+    width: 100%;
   }
 
-  .content-item {
-    display: flex;
+  .feature-section__content {
     width: 100%;
+    align-items: flex-start;
   }
 
-  h2 {
-    white-space: nowrap;
-    display: inline;
+  .feature-section__content--reverse {
+    align-items: flex-end;
   }
-}
 
-@media screen and (max-width: 1024px) {
-  .header__nav {
-    padding: 0 1.5rem;
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .closing-banner__headline {
+    margin: 201px 225px 211px;
+    text-align: center;
   }
-}
 
-@media screen and (min-width: 1920px) {
-} */
+  .footer {
+    flex-wrap: wrap;
+    padding: 32px 104px 108px;
+    gap: 20px;
+  }
+}
diff --git a/assets/css/variables.css b/assets/css/variables.css
index 8f491250..42340f66 100644
--- a/assets/css/variables.css
+++ b/assets/css/variables.css
@@ -16,6 +16,7 @@
   --color-surface-input: var(--gray100);
   --color-footer-background: var(--gray900);
   --color-item-link: var(--gray50);
+  --color-nav-background: #ffffff;
 
   --gray900: #111827;
   --gray800: #1f2937;
diff --git a/index.html b/index.html
index 1cb300a2..89640867 100644
--- a/index.html
+++ b/index.html
@@ -46,7 +46,11 @@
       <section class="hero">
         <div class="wrapper">
           <div class="hero__content">
-            <h2 class="hero__title">일상의 모든 물건을<br />거래해 보세요</h2>
+            <!-- prettier-ignore -->
+            <h2 class="hero__title">
+              일상의 모든 물건을
+              거래해 보세요
+            </h2>
             <a class="hero__link" href="/items" aria-label="상품 목록 구경하기">
               구경하러 가기
             </a>
@@ -66,8 +70,9 @@ <h2 class="hero__title">일상의 모든 물건을<br />거래해 보세요</h2>
           />
           <div class="feature-section__content">
             <h3 class="feature-section__title">Hot item</h3>
-            <h2 class="feature-section__headline">
-              인기 상품을<br />확인해 보세요
+            <!-- prettier-ignore -->
+            <h2 class="feature-section__headline">인기 상품을
+              확인해 보세요
             </h2>
             <p class="feature-section__description">
               가장 HOT한 중고거래 물품을<br />판다 마켓에서 확인해 보세요
@@ -80,10 +85,13 @@ <h2 class="feature-section__headline">
             alt="검색 기능을 강조하는 돋보기 아이콘. '구매를 원하는 상품을 검색하세요'라는 메시지가 포함되어, 판다 마켓에서 물품 검색의 간편함을 전달합니다."
             loading="lazy"
           />
-          <div class="feature-section__content">
+          <div
+            class="feature-section__content feature-section__content--reverse"
+          >
             <h3 class="feature-section__title">Search</h3>
-            <h2 class="feature-section__headline">
-              구매를 원하는<br />상품을 검색하세요
+            <!-- prettier-ignore -->
+            <h2 class="feature-section__headline">구매를 원하는
+              상품을 검색하세요
             </h2>
             <p class="feature-section__description">
               구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
@@ -98,8 +106,9 @@ <h2 class="feature-section__headline">
           />
           <div class="feature-section__content">
             <h3 class="feature-section__title">Register</h3>
-            <h2 class="feature-section__headline">
-              판매를 원하는<br />상품을 등록하세요
+            <!-- prettier-ignore -->
+            <h2 class="feature-section__headline">판매를 원하는
+              상품을 등록하세요
             </h2>
             <p class="feature-section__description">
               어떤 물건이든 판매하고 싶은 상품을<br />쉽게 등록하세요
@@ -122,7 +131,7 @@ <h2 class="closing-banner__headline">
       </section>
     </main>
     <footer class="footer">
-      <span class="footer__source">© Codeit - 2024</span>
+      <div class="footer__source footer__source-wrap">© Codeit - 2024</div>
       <ul class="footer__nav">
         <li class="footer__nav-item">
           <a href="/privacy" aria-label="정책 페이지로 이동">Privacy Policy</a>
diff --git a/login.html b/login.html
index d3274127..296b3186 100644
--- a/login.html
+++ b/login.html
@@ -23,13 +23,19 @@
     <link rel="stylesheet" href="./assets/css/reset.css" />
     <link rel="stylesheet" href="./assets/css/variables.css" />
     <link rel="stylesheet" href="./assets/css/global.css" />
-    <link rel="stylesheet" href="./assets/css/style.css" />
+    <link rel="stylesheet" href="./assets/css/pages/auth.css" />
   </head>
   <body>
     <main class="login-container">
       <header class="header__login">
         <a href="/" aria-label="홈으로 이동">
           <img
+            class="logo-image"
+            srcset="
+            /assets/images/logos/panda-logo.png 200w  
+            /assets/images/logos/panda-logo-lg.png 400w,
+            "
+            sizes="(max-width: 767px) 200px, 400px"
             src="/assets/images/logos/panda-logo-lg.png"
             alt="판다 마켓의 상징적인 판다 얼굴 로고"
           />
diff --git a/signup.html b/signup.html
index 9edc9fbc..03c2bd0e 100644
--- a/signup.html
+++ b/signup.html
@@ -23,7 +23,7 @@
     <link rel="stylesheet" href="./assets/css/reset.css" />
     <link rel="stylesheet" href="./assets/css/variables.css" />
     <link rel="stylesheet" href="./assets/css/global.css" />
-    <link rel="stylesheet" href="./assets/css/style.css" />
+    <link rel="stylesheet" href="./assets/css/pages/auth.css" />
   </head>
   <body>
     <main class="signup-container">