diff --git a/css/components/footer.css b/css/components/footer.css
new file mode 100644
index 00000000..523d8601
--- /dev/null
+++ b/css/components/footer.css
@@ -0,0 +1,67 @@
+footer {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  height: 15rem;
+  background-color: #111827;
+}
+
+.footer-container {
+  div:first-child {
+    color: #676767;
+  }
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 2.5rem;
+  width: 80%;
+  height: 8%;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 400;
+  img {
+    height: 100%;
+  }
+}
+
+.footer-middle {
+  display: flex;
+  gap: 30px;
+  color: #cfcfcf;
+}
+
+.footer-right {
+  display: flex;
+  height: 100%;
+  gap: 12px;
+}
+
+@media (max-width: 1200px) {
+  footer {
+    height: 10rem;
+  }
+
+  .footer-container {
+    font-size: 1.1rem;
+  }
+
+  .footer-right {
+    img {
+      aspect-ratio: 1;
+      width: 1.1rem;
+      height: 1.1rem;
+    }
+  }
+}
+
+@media (max-width: 767px) and (min-width: 375px) {
+  footer {
+    position: relative;
+  }
+  .footer-container {
+    div:first-child {
+      position: absolute;
+      bottom: 20%;
+    }
+  }
+}
diff --git a/css/pages/main/components/nav.css b/css/components/nav.css
similarity index 74%
rename from css/pages/main/components/nav.css
rename to css/components/nav.css
index 3dc3e891..a513db31 100644
--- a/css/pages/main/components/nav.css
+++ b/css/components/nav.css
@@ -1,7 +1,7 @@
 header {
   display: flex;
   justify-content: center;
-  width: 100vw;
+  width: 100%;
   position: fixed;
   top: 0;
   background-color: #ffffff;
@@ -40,3 +40,16 @@ nav {
     width: calc(100% - 400px);
   }
 }
+
+@media (max-width: 1199px) {
+  nav {
+    justify-content: space-between;
+    width: calc(100% - 48px);
+  }
+}
+
+@media (max-width: 767px) and (min-width: 375px) {
+  nav {
+    width: calc(100% - 16px);
+  }
+}
diff --git a/css/pages/login/login.css b/css/login/login.css
similarity index 84%
rename from css/pages/login/login.css
rename to css/login/login.css
index a46a5f75..7a8a4e5c 100644
--- a/css/pages/login/login.css
+++ b/css/login/login.css
@@ -10,7 +10,8 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 40%;
+  width: 100%;
+  max-width: 640px;
 }
 
 .login-logo {
@@ -38,13 +39,14 @@
   input {
     background-color: #f3f4f6;
     border: none;
-    height: 2.5rem;
+    height: 3.5rem;
     padding: 0 1rem;
   }
   #login-submit {
     background-color: #3692ff;
     color: white;
     border-radius: 40px;
+    height: 3.5rem;
   }
   #no-eye {
     position: absolute;
@@ -62,6 +64,7 @@
   padding: 1rem 2rem;
   font-size: 0.9rem;
   margin-bottom: 1rem;
+  height: 4.5rem;
   .social-login__img {
     display: flex;
     justify-content: space-between;
@@ -78,9 +81,17 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 2rem;
   gap: 1rem;
   a {
     color: #3692ff;
     text-decoration: underline;
   }
 }
+
+@media (max-width: 765px) and (min-width: 365px) {
+  .loginContainer {
+    width: calc(100% - 32px);
+    max-width: 400px;
+  }
+}
diff --git a/css/main/articles.css b/css/main/articles.css
new file mode 100644
index 00000000..7f3efb17
--- /dev/null
+++ b/css/main/articles.css
@@ -0,0 +1,101 @@
+.main-articles {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 50%;
+}
+
+.main-article {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+  max-width: 988px;
+  max-height: 444px;
+  margin: 3.5rem 0rem;
+}
+
+.main-article-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  img {
+    width: 75%;
+    height: 100%;
+    max-width: 579px;
+    max-height: 444px;
+  }
+}
+
+.main-article__text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #fcfcfc;
+  width: 35%;
+  gap: 2.4rem;
+  padding: 2rem 2rem;
+  h5 {
+    font-size: 1rem;
+    font-weight: 700;
+    color: #3692ff;
+  }
+  h2 {
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: 3rem;
+    color: #374151;
+  }
+  p {
+    font-size: 1.2rem;
+    line-height: 2rem;
+    font-weight: 500;
+    color: #374151;
+  }
+}
+
+.main-article__text2 {
+  align-items: flex-end;
+  text-align: right;
+}
+
+@media (max-width: 1200px) {
+  .main-article {
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
+  .main-article-container {
+    flex-direction: column;
+    align-items: center;
+    img {
+      width: 95%;
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+  .main-article__text {
+    width: 100%;
+  }
+
+  .main-article-container2 {
+    flex-direction: column-reverse;
+  }
+}
+
+@media (max-width: 767px) and (min-width: 375px) {
+  .main-article {
+    margin: 1rem 0;
+  }
+  .main-article__text {
+    gap: 0.5rem;
+    h2 {
+      font-size: 1.5rem;
+    }
+    p {
+      font-size: 1rem;
+      line-height: 120%;
+    }
+  }
+}
diff --git a/css/main/banner.css b/css/main/banner.css
new file mode 100644
index 00000000..87bc9aeb
--- /dev/null
+++ b/css/main/banner.css
@@ -0,0 +1,143 @@
+.main-banner {
+  display: flex;
+  justify-content: center;
+  background-color: #cfe5ff;
+  width: 100%;
+  line-height: 4rem;
+  height: 40vh;
+  margin-top: 4.5rem;
+}
+
+banner {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  width: 100%;
+  max-width: 1920px;
+  height: 100%;
+}
+
+.banner-left {
+  width: 100%;
+  height: 70%;
+  max-width: 357px;
+  h1 {
+    font-size: 2.5rem;
+    color: #374151;
+  }
+}
+
+.banner-right {
+  display: flex;
+  align-items: flex-end;
+  max-width: 746px;
+  max-height: 340px;
+  height: 100%;
+  img {
+    width: 100%;
+  }
+}
+
+.main-banner__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  font-size: 3rem;
+  font-weight: 700;
+  gap: 32px;
+
+  a {
+    width: 100%;
+  }
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 56px;
+    border-radius: 40px;
+    background-color: #3692ff;
+    color: #ffffff;
+    cursor: pointer;
+    font-size: 1.4rem;
+  }
+}
+
+.main-banner-bottom__content {
+  margin-bottom: 0;
+}
+
+@media (max-width: 1920px) {
+  banner {
+    width: calc(100% - 400px);
+  }
+}
+
+@media (max-width: 1200px) {
+  .main-banner {
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .main-banner__content {
+    align-items: center;
+    padding: 5rem 0;
+    h1 {
+      text-align: center;
+      font-size: 100%;
+    }
+    a {
+      display: flex;
+      justify-content: center;
+    }
+    button {
+      width: 30%;
+      max-width: 357px;
+    }
+  }
+  banner {
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+  .banner-left {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .banner-right {
+    width: 100%;
+    max-width: 100%;
+    margin-top: 15rem;
+  }
+  .main-banner-bottom__content {
+    h1 {
+      text-align: center;
+    }
+  }
+}
+
+@media (max-width: 767px) and (min-width: 375px) {
+  .main-banner__content {
+    padding: 3rem 0;
+    h1 {
+      width: 80%;
+      font-size: 80%;
+      line-height: 130%;
+    }
+    #search-btn {
+      width: 70%;
+    }
+  }
+  .banner-right {
+    margin-top: 4rem;
+  }
+
+  .main-article__text {
+    gap: 1.5rem;
+  }
+}
diff --git a/css/pages/main/components/articles.css b/css/pages/main/components/articles.css
deleted file mode 100644
index 2a428ca5..00000000
--- a/css/pages/main/components/articles.css
+++ /dev/null
@@ -1,54 +0,0 @@
-.main-articles {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 50%;
-}
-
-.main-article {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 6rem;
-  height: 100%;
-}
-
-.main-article-container {
-  display: flex;
-  justify-content: center;
-  height: 35rem;
-  img {
-    width: 75%;
-    height: 100%;
-  }
-}
-
-.main-article__text {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  background-color: #fcfcfc;
-  width: 35%;
-  gap: 2.4rem;
-  padding: 2rem 2rem;
-  h5 {
-    font-size: 1.2rem;
-    font-weight: 700;
-    color: #3692ff;
-  }
-  h2 {
-    font-size: 2.5rem;
-    font-weight: 700;
-    line-height: 3rem;
-  }
-  p {
-    font-size: 1.4rem;
-    line-height: 2rem;
-    font-weight: 500;
-  }
-}
-
-.main-article__text2 {
-  align-items: flex-end;
-  text-align: right;
-}
diff --git a/css/pages/main/components/banner.css b/css/pages/main/components/banner.css
deleted file mode 100644
index 2e68398f..00000000
--- a/css/pages/main/components/banner.css
+++ /dev/null
@@ -1,70 +0,0 @@
-.main-banner {
-  display: flex;
-  justify-content: center;
-  background-color: #cfe5ff;
-  width: 100%;
-  line-height: 4rem;
-  height: 40vh;
-  margin-top: 4.5rem;
-}
-
-banner {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  width: 100%;
-  max-width: 1920px;
-  height: 100%;
-}
-
-.banner-left {
-  width: 25%;
-  height: 70%;
-}
-
-.banner-right {
-  display: flex;
-  align-items: flex-end;
-  width: 65%;
-  height: 100%;
-  img {
-    width: 100%;
-    max-height: 80%;
-  }
-}
-
-.main-banner__content {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  width: 100%;
-  height: 100%;
-  font-size: 3rem;
-  font-weight: 700;
-  gap: 32px;
-  a {
-    width: 100%;
-  }
-  button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 56px;
-    border-radius: 40px;
-    background-color: #3692ff;
-    color: #ffffff;
-    cursor: pointer;
-    font-size: 1.4rem;
-  }
-}
-
-.main-banner-bottom__content {
-  margin-bottom: 0;
-}
-
-@media (max-width: 1920px) {
-  banner {
-    width: calc(100% - 400px);
-  }
-}
diff --git a/css/pages/main/components/footer.css b/css/pages/main/components/footer.css
deleted file mode 100644
index 5b0c73f6..00000000
--- a/css/pages/main/components/footer.css
+++ /dev/null
@@ -1,33 +0,0 @@
-footer {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  height: 15rem;
-  background-color: #111827;
-}
-
-.footer-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 2.5rem;
-  width: 80%;
-  height: 8%;
-  color: #ffffff;
-  font-size: 16px;
-  font-weight: 400;
-  img {
-    height: 100%;
-  }
-}
-
-.footer-middle {
-  display: flex;
-  gap: 30px;
-}
-
-.footer-right {
-  display: flex;
-  height: 100%;
-  gap: 12px;
-}
diff --git a/css/style.css b/css/style.css
index eee0197e..edd3992f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,11 +2,11 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
 
 /* pages */
-@import "pages/main/components/nav.css";
-@import "pages/main/components/banner.css";
-@import "pages/main/components/articles.css";
-@import "pages/main/components/footer.css";
-@import "pages/login/login.css";
+@import "components/nav.css";
+@import "main/banner.css";
+@import "main/articles.css";
+@import "components/footer.css";
+@import "login/login.css";
 
 * {
   box-sizing: border-box;
@@ -14,5 +14,5 @@
 
 body {
   font-family: "Pretendard Variable";
-  height: 100vh;
+  min-height: 100vh;
 }
diff --git a/img/Vector1.png b/img/eye.png
similarity index 100%
rename from img/Vector1.png
rename to img/eye.png
diff --git a/img/Vector.png b/img/no-eye.png
similarity index 100%
rename from img/Vector.png
rename to img/no-eye.png
diff --git a/index.html b/index.html
index 1cdd3f8f..4876621a 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
     <header>
       <nav>
         <a href="/"><img src="img/logo.png" /></a>
-        <a href="screens/login.html" id="login">로그인</a>
+        <a href="pages/login.html" id="login">로그인</a>
       </nav>
     </header>
 
@@ -30,7 +30,6 @@ <h1>일상의 모든 물건을 거래해 보세요</h1>
                 ><button id="search-btn">구경하러 가기</button></a
               >
             </div>
-            `
           </div>
           <div class="banner-right">
             <img src="img/img_home_top.png" />
@@ -44,10 +43,7 @@ <h1>일상의 모든 물건을 거래해 보세요</h1>
             <img src="img/Img_home_01.png" />
             <div class="main-article__text">
               <h5>Hot item</h5>
-              <h2>
-                인기 상품을<br />
-                확인해 보세요
-              </h2>
+              <h2>인기 상품을 확인해 보세요</h2>
               <p>
                 가장 HOT한 중고거래 물품을<br />
                 판다 마켓에서 확인해 보세요.
@@ -56,13 +52,10 @@ <h2>
           </div>
         </article>
         <article class="main-article">
-          <div class="main-article-container">
+          <div class="main-article-container main-article-container2">
             <div class="main-article__text main-article__text2">
               <h5>Search</h5>
-              <h2>
-                구매를 원하는<br />
-                상품을 검색하세요
-              </h2>
+              <h2>구매를 원하는 상품을 검색하세요</h2>
               <p>
                 구매하고 싶은 물품은 검색해서<br />
                 쉽게 찾아보세요
@@ -76,10 +69,7 @@ <h2>
             <img src="img/Img_home_03.png" />
             <div class="main-article__text">
               <h5>Register</h5>
-              <h2>
-                판매를 원하는<br />
-                상품을 등록하세요
-              </h2>
+              <h2>판매를 원하는 상품을 등록하세요</h2>
               <p>
                 어떤 물건이든 판매하고 싶은 상품을<br />
                 쉽게 등록하세요
diff --git a/screens/join.html b/pages/join.html
similarity index 83%
rename from screens/join.html
rename to pages/join.html
index c2e5092e..5f22341c 100644
--- a/screens/join.html
+++ b/pages/join.html
@@ -15,35 +15,35 @@
         </a>
         <div class="login-form-container">
           <form class="login-form">
-            <label for="login-email"> 이메일 </label>
+            <label for="login-email">이메일</label>
             <input
               id="login-email"
               type="email"
               placeholder="이메일을 입력해주세요"
               required
             />
-            <label for="login-nickname"> 닉네임 </label>
+            <label for="login-nickname">닉네임</label>
             <input
               id="login-nickname"
               type="text"
               placeholder="닉네임을 입력해주세요"
               required
             />
-            <label for="login-password"> 비밀번호 </label>
+            <label for="login-password">비밀번호</label>
             <input
               id="login-password"
               type="password"
               placeholder="비밀번호를 입력해주세요"
               required
             />
-            <label for="login-password2"> 비밀번호 확인</label>
+            <label for="login-password2">비밀번호 확인</label>
             <input
               id="login-password2"
               type="password"
               placeholder="비밀번호를 다시 입력해주세요"
               required
             />
-            <input type="submit" value="회원가입" id="login-submit" />
+            <button type="submit" id="login-submit">회원가입입</button>
           </form>
           <div class="social-login">
             <span>간편 로그인하기</span>
@@ -58,7 +58,7 @@
           </div>
           <div class="join">
             <span>이미 회원이신가요?</span>
-            <a href="../screens/login.html">로그인</a>
+            <a href="../pages/login.html">로그인</a>
           </div>
         </div>
       </main>
diff --git a/screens/login.html b/pages/login.html
similarity index 81%
rename from screens/login.html
rename to pages/login.html
index c6c8b44b..1dce1d80 100644
--- a/screens/login.html
+++ b/pages/login.html
@@ -27,23 +27,23 @@
               type="password"
               placeholder="비밀번호를 입력해주세요"
             />
-            <img src="../img/Vector.png" id="no-eye" />
+            <img src="../img/no-eye.png" id="no-eye" />
             <input type="submit" value="로그인" id="login-submit" />
           </form>
           <div class="social-login">
             <span>간편 로그인하기</span>
             <div class="social-login__img">
-              <a href="https://www.google.com/" target="_blank"
-                ><img src="../img/Img_google_login.png"
-              /></a>
-              <a href="https://www.kakaocorp.com/page/" target="_blank"
-                ><img src="../img/Img_kakao_login.png"
-              /></a>
+              <a href="https://www.google.com/" target="_blank">
+                <img src="../img/Img_google_login.png" />
+              </a>
+              <a href="https://www.kakaocorp.com/page/" target="_blank">
+                <img src="../img/Img_kakao_login.png" />
+              </a>
             </div>
           </div>
           <div class="join">
             <span>판다마켓이 처음이신가요?</span>
-            <a href="../screens/join.html">회원가입</a>
+            <a href="../pages/join.html">회원가입</a>
           </div>
         </div>
       </main>