diff --git a/.github/basictag.css b/.github/basictag.css
index 1e3ee208..8b6cd6d0 100644
--- a/.github/basictag.css
+++ b/.github/basictag.css
@@ -9,15 +9,43 @@ a {
   text-decoration: none;
 }
 
-section {
+/*section {
   width: 1920px;
   padding: 138px 466px;
   gap: 10px;
+}*/
+section {
+  width: 100%; /* 화면 너비에 맞춤 */
+  max-width: 1920px; /* 최대 너비 제한 (PC 기준) */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* margin-left: auto;
+  margin-right: auto; */
+  padding-top: 138px;
+  padding-bottom: 138px;
+}
+
+@media (max-width: 1199px) {
+  section {
+    padding: 80px 24px;
+  }
+}
+@media (max-width: 767px) {
+  section {
+    padding: 40px 8px;
+  }
 }
 
 figure {
   background-color: #cfe5ff;
-  height: 540px;
+  width: 100%;
+  max-width: 1920px; /* 최대 너비 제한 (PC 기준) */
+  padding-top: 80px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  height: auto;
 }
 
 figure p {
@@ -30,6 +58,8 @@ figure p {
 }
 
 footer {
+  display: flex;
+  justify-content: space-between;
   background-color: #111827;
   height: 160px;
 }
diff --git a/.github/img/Property 1=lg.png b/.github/img/Property 1=lg.png
deleted file mode 100644
index 77c50149..00000000
Binary files a/.github/img/Property 1=lg.png and /dev/null differ
diff --git a/.github/img/btn_visibility_off_24px.svg b/.github/img/visibility_off.svg
similarity index 100%
rename from .github/img/btn_visibility_off_24px.svg
rename to .github/img/visibility_off.svg
diff --git a/.github/img/btn_visibility_on_24px.svg b/.github/img/visibility_on.svg
similarity index 100%
rename from .github/img/btn_visibility_on_24px.svg
rename to .github/img/visibility_on.svg
diff --git a/.github/index.html b/.github/index.html
index a10f6836..5037aeb7 100644
--- a/.github/index.html
+++ b/.github/index.html
@@ -16,14 +16,14 @@
   <body>
     <header class="top">
       <div class="topheader">
-        <a href=""><img src="img/Property 1=lg.png" alt="판다마켓 로고" /></a>
+        <a href=""><img src="img/logo.png" alt="판다마켓 로고" /></a>
         <a href="./login.html" class="loginbutton">로그인</a>
       </div>
     </header>
     <figure>
       <div class="panda">
         <div class="panda_left">
-          <p>일상의 모든 물건을<br />거래해 보세요</p>
+          <p>일상의 모든 물건을 거래해 보세요</p>
           <a href="./items.html" class="gotosee">구경하러 가기</a>
         </div>
         <img src="img/Img_home_top.png" alt="pandamarket" />
@@ -34,8 +34,8 @@
         <img src="img/Img_home_01.png" alt="Hot item" />
         <div class="section_text first">
           <p>Hot item</p>
-          <p>인기 상품을<br />확인해 보세요</p>
-          <p>가장 HOT한 중고거래 물품을<br />판다 마켓에서 확인해 보세요</p>
+          <p>인기 상품을 확인해 보세요</p>
+          <p>가장 HOT한 중고거래 물품을 <br />판다 마켓에서 확인해 보세요</p>
         </div>
       </div>
     </section>
@@ -43,8 +43,8 @@
       <div class="section_card">
         <div class="section_text middle">
           <p>Search</p>
-          <p>구매를 원하는<br />상품을 검색하세요</p>
-          <p>구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요</p>
+          <p>구매를 원하는 상품을 검색하세요</p>
+          <p>구매하고 싶은 물품은 검색해서 <br />쉽게 찾아보세요</p>
         </div>
         <img src="img/Img_home_02.png" alt="Search" />
       </div>
@@ -54,15 +54,16 @@
         <img src="img/Img_home_03.png" alt="Register" />
         <div class="section_text last">
           <p>Register</p>
-          <p>판매를 원하는<br />상품을 등록하세요</p>
-          <p>어떤 물건이든 판매하고 싶은 상품을<br />쉽게 등록하세요</p>
+          <p>판매를 원하는 상품을 등록하세요</p>
+          <p>어떤 물건이든 판매하고 싶은 상품을 <br />쉽게 등록하세요</p>
         </div>
       </div>
     </section>
     <figure>
       <div class="panda_bottom">
         <div class="panda_bottom_left">
-          <p>믿을 수 있는<br />판다마켓 중고 거래</p>
+          <p>믿을 수 있는</p>
+          <p>판다마켓 중고 거래</p>
         </div>
         <img src="img/Img_home_bottom.png" alt="pandamarket bottom" />
       </div>
diff --git a/.github/login.html b/.github/login.html
index 5e2ea458..87a494d1 100644
--- a/.github/login.html
+++ b/.github/login.html
@@ -9,7 +9,9 @@
   <body>
     <main class="login-container">
       <header class="logo">
-        <a href="./index.html"><img src="./img/logo.png" alt="" /></a>
+        <a href="./index.html"
+          ><img src="./img/logo.png" alt="판다마켓로고"
+        /></a>
       </header>
       <form class="login-form" action="#" method="post">
         <div class="form-group">
@@ -35,10 +37,7 @@
               required
             />
             <button type="button" class="toggle-password">
-              <img
-                src="./img/btn_visibility_off_24px.svg"
-                alt="비밀번호 보기"
-              />
+              <img src="./img/visibility_off.svg" alt="비밀번호 보기" />
             </button>
           </div>
         </div>
diff --git a/.github/login_signup.css b/.github/login_signup.css
index 79d67b52..f1beace2 100644
--- a/.github/login_signup.css
+++ b/.github/login_signup.css
@@ -14,6 +14,11 @@ body {
   padding: 20px;
 }
 
+:root {
+  --primary-color: #3692ff;
+  --background-color: #f3f4f6;
+}
+
 .logo img {
   width: 396px;
   height: 132px;
@@ -59,7 +64,7 @@ input {
   height: 56px;
   padding: 16px 24px;
   border: none;
-  background-color: #f3f4f6;
+  background-color: var(--background-color);
   border-radius: 12px;
   font-size: 16px;
   font-weight: 400;
@@ -70,7 +75,7 @@ input {
 
 input:focus {
   outline: none;
-  background-color: #f3f4f6d0;
+  background-color: var(--background-color);
 }
 
 input[type="password"]::-ms-reveal {
@@ -86,7 +91,7 @@ input[type="password"]::-ms-reveal {
   align-items: center;
   border: none;
   border-radius: 12px;
-  background-color: #f3f4f6;
+  background-color: var(--background-color);
   padding: 16px 24px;
 }
 
@@ -118,8 +123,8 @@ input[type="password"]::-ms-reveal {
   width: 100%;
   height: 56px;
   padding: 16px 124px;
-  background: #3692ff;
-  color: #f3f4f6;
+  background: var(--primary-color);
+  color: var(--background-color);
   border: none;
   border-radius: 40px;
   font-size: 20px;
@@ -131,7 +136,7 @@ input[type="password"]::-ms-reveal {
 }
 
 .login-button:hover {
-  background: #3692ff;
+  background: var(--primary-color);
 }
 
 .ez-login-container {
@@ -140,7 +145,7 @@ input[type="password"]::-ms-reveal {
   padding: 16px 23px;
   border: none;
   border-radius: 8px;
-  background: #e6f2ff;
+  background: var(--background-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -183,7 +188,24 @@ input[type="password"]::-ms-reveal {
 }
 
 .help-text a {
-  color: #3692ff;
+  color: var(--primary-color);
   text-decoration: underline;
   text-decoration-style: solid;
 }
+
+@media (max-width: 767px) and (min-width: 375px) {
+  .login-container {
+    width: 100%;
+    max-width: 400px;
+    padding: auto 16px;
+  }
+  .logo a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .logo img {
+    width: 50%;
+    height: 50%;
+  }
+}
diff --git a/.github/signup.html b/.github/signup.html
index b5845bc4..ac40160d 100644
--- a/.github/signup.html
+++ b/.github/signup.html
@@ -9,7 +9,9 @@
   <body>
     <main class="register-container">
       <header class="logo">
-        <a href="./index.html"><img src="./img/logo.png" alt="" /></a>
+        <a href="./index.html"
+          ><img src="./img/logo.png" alt="판다마켓로고"
+        /></a>
       </header>
       <form class="register-form" action="#" method="post">
         <div class="form-group">
@@ -47,10 +49,7 @@
               required
             />
             <button type="button" class="toggle-password">
-              <img
-                src="./img/btn_visibility_off_24px.svg"
-                alt="비밀번호 보기"
-              />
+              <img src="./img/visibility_off.svg" alt="비밀번호 보기" />
             </button>
           </div>
         </div>
@@ -59,13 +58,13 @@
           <label for="confirm-password">비밀번호 확인</label>
           <div class="confirm-input">
             <input
-              type="confirm-password"
+              type="password"
               id="confirm-password"
               name="confirm-password"
               required
             />
             <button type="button" class="toggle-password">
-              <img src="./img/btn_visibility_on_24px.svg" alt="비밀번호 보기" />
+              <img src="./img/visibility_on.svg" alt="비밀번호 보기" />
             </button>
           </div>
         </div>
diff --git a/.github/style.css b/.github/style.css
index 4044853a..6129d0a3 100644
--- a/.github/style.css
+++ b/.github/style.css
@@ -1,25 +1,34 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
 
+:root {
+  --primary-color: #3692ff;
+  --primary-color-hover: #1967d6;
+  --background-color: #ffffff;
+  --background-gray-color: #f3f4f6;
+  --section-text-color: #374151;
+}
+
 .top {
   position: sticky;
   top: 0;
-  background-color: #ffffff;
+  background-color: var(--background-color);
   display: flex;
   align-items: center;
   max-width: 1920px;
   height: 70px;
   border-bottom: #dfdfdf solid 1px;
   padding: 9px 200px;
+  z-index: 10;
 }
 
 .topheader {
   display: flex;
-  width: 1120px;
-  margin: 0 auto;
+  width: 100%;
+  /* margin: 0 auto; */
   height: 51px;
   justify-content: space-between;
   align-items: center;
-  padding: 9px 0px;
+  /* padding: 9px 0px; */
 }
 
 .top img {
@@ -27,8 +36,8 @@
 }
 
 .loginbutton {
-  background-color: #3692ff;
-  color: white;
+  background-color: var(--primary-color);
+  color: var(--background-color);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -44,13 +53,13 @@
 }
 
 .loginbutton:hover {
-  background-color: #1967d6;
+  background-color: var(--primary-color-hover);
 }
 
 .panda {
   display: flex;
   justify-content: center;
-  margin: 0 auto 0 0;
+  margin: auto;
   padding-top: 200px;
   gap: 7px;
   max-width: 1920px;
@@ -69,6 +78,11 @@
   gap: 32px;
 }
 
+.panda_left p {
+  width: 295px;
+  height: 112px;
+}
+
 .gotosee {
   border-radius: 40px;
   width: 357px;
@@ -84,11 +98,11 @@
   align-items: center;
   color: #f9fafb;
   border-style: none;
-  background-color: #3692ff;
+  background-color: var(--primary-color);
 }
 
 .gotosee:hover {
-  background-color: #1967d6;
+  background-color: var(--primary-color-hover);
 }
 
 .section_card {
@@ -96,7 +110,7 @@
   width: 988px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-around;
   border-radius: 12px;
 }
 
@@ -110,17 +124,18 @@
 .section_text {
   display: flex;
   flex-direction: column;
+  max-width: 362px;
   gap: 12px;
   padding-right: 24px;
 }
 
 .first {
-  padding-right: 66px;
+  padding-right: 24px;
 }
 
 .middle {
   align-items: flex-end;
-  padding: 0 0 0 66px;
+  padding: 0 0 0 24px;
 }
 
 .middle p {
@@ -128,7 +143,7 @@
 }
 
 .section_text :nth-child(1) {
-  color: #3692ff;
+  color: var(--primary-color);
   font-size: 18px;
   font-family: "Abhaya Libre ExtraBold", sans-serif;
   font-weight: 800;
@@ -137,8 +152,9 @@
 }
 
 .section_text :nth-child(2) {
-  height: 112px;
-  color: #374151;
+  width: auto;
+  height: auto;
+  color: var(--section-text-color);
   font-size: 40px;
   font-family: Pretendard, sans-serif;
   font-weight: 700;
@@ -147,7 +163,7 @@
 }
 
 .section_text :nth-child(3) {
-  color: #374151;
+  color: var(--section-text-color);
   font-size: 24px;
   font-family: Pretendard, sans-serif;
   font-weight: 500;
@@ -160,14 +176,15 @@
   align-items: center;
   justify-content: center;
   padding-top: 143px;
-  margin: 0px auto 0 0;
+  /* margin: 0px auto 0 0; */
   gap: 69px;
   max-width: 1920px;
 }
 
 .panda_bottom_left p {
-  padding-bottom: 60px;
-  gap: 10px;
+  width: auto;
+  height: auto;
+  color: var(--section-text-color);
 }
 
 .panda_bottom img {
@@ -203,3 +220,150 @@
   width: 116px;
   gap: 12px;
 }
+
+/* Tablet (768~1199px) */
+@media (max-width: 1199px) and (min-width: 768px) {
+  .top {
+    padding: 10px 0px;
+  }
+  .topheader {
+    margin: 0px 24px;
+    width: 100%;
+  }
+  .loginbutton {
+    height: 44px;
+    width: 104px;
+    font-size: 15px;
+  }
+  .panda {
+    padding-top: auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  .panda img {
+    width: 100%;
+    height: auto;
+  }
+  .panda_left {
+    align-items: center;
+    padding-bottom: 40px;
+  }
+  .panda_left p {
+    width: auto;
+    height: auto;
+  }
+  .section_card {
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+  }
+  .section_card img {
+    width: 100%;
+    height: auto;
+  }
+  section:nth-of-type(2) .section_card {
+    flex-direction: column-reverse;
+  }
+  .section_card p {
+    width: 100%;
+    height: auto;
+  }
+  .section_text {
+    text-align: left; /* 좌측정렬 기본 */
+  }
+  .section_text.middle {
+    text-align: right; /* 두번째 카드만 우측정렬 */
+  }
+  .panda_bottom {
+    flex-direction: column;
+    width: auto;
+  }
+  .panda_bottom p {
+    width: auto;
+    height: auto;
+    text-align: center;
+  }
+  .panda_bottom img {
+    margin-top: 40px;
+    width: 100%;
+    height: auto;
+  }
+  .footer {
+    padding: 32px 104px 64px;
+  }
+}
+
+/* Mobile (375~767px) */
+@media (max-width: 767px) and (min-width: 375px) {
+  .top {
+    padding: 10px 0px;
+  }
+  .topheader {
+    margin: 0px 16px;
+    width: 100%;
+  }
+  .loginbutton {
+    height: 44px;
+    width: 104px;
+    font-size: 15px;
+  }
+  .panda {
+    padding-top: auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  .panda img {
+    width: 100%;
+    height: auto;
+  }
+  .panda_left {
+    align-items: center;
+    padding-bottom: 40px;
+  }
+  .panda_left p {
+    width: auto;
+    height: auto;
+  }
+  .section_card {
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+  }
+  .section_card img {
+    width: 100%;
+    height: auto;
+  }
+  section:nth-of-type(2) .section_card {
+    flex-direction: column-reverse;
+  }
+  .section_card p {
+    width: 100%;
+    height: auto;
+  }
+  .section_text {
+    text-align: left; /* 좌측정렬 기본 */
+  }
+  .section_text.middle {
+    text-align: right; /* 두번째 카드만 우측정렬 */
+  }
+  .panda_bottom {
+    flex-direction: column;
+    width: auto;
+  }
+  .panda_bottom p {
+    width: auto;
+    height: auto;
+    text-align: center;
+  }
+  .panda_bottom img {
+    width: 100%;
+    height: auto;
+  }
+  .footer {
+    padding: 32px 32px 64px;
+  }
+}
