diff --git a/images/home/bottom-banner-image.png b/images/home/bottom-banner-image.png
index 4a5f85b2..2de8d597 100644
Binary files a/images/home/bottom-banner-image.png and b/images/home/bottom-banner-image.png differ
diff --git a/images/logo/no-panda-logo.png b/images/logo/no-panda-logo.png
new file mode 100644
index 00000000..386b9c09
Binary files /dev/null and b/images/logo/no-panda-logo.png differ
diff --git a/images/social/panda-maket-share.png b/images/social/panda-maket-share.png
new file mode 100644
index 00000000..47df680d
Binary files /dev/null and b/images/social/panda-maket-share.png differ
diff --git a/index.html b/index.html
index 95a15877..e68cc58d 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,20 @@
     />
     <link rel="stylesheet" href="styles/global.css" />
     <link rel="stylesheet" href="styles/homepage/home.css" />
+
+    <meta property="og:title" content="판다 마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:image" content="images/social/panda-maket-share.png" />
+    <meta property="og:url" content="https://sprint-mission-ktw.netlify.app/" />
+    <meta property="og:type" content="website" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="판다 마켓" />
+    <meta
+      name="twitter:description"
+      content="일상의 모든 물건을 거래해보세요"
+    />
+    <meta name="twitter:image" content="images/social/panda-maket-share.png" />
   </head>
 
   <body>
@@ -22,17 +36,27 @@
           src="images/logo/panda-market-logo.png"
           alt="판다마켓 홈"
           width="153"
+          class="responsive-img"
       /></a>
-      <a href="login.html" id="loginLinkButton" class="button">로그인</a>
+      <a href="login.html" id="login-Link-Button" class="button">로그인</a>
     </header>
+
     <main>
-      <section id="hero" class="banner">
-        <div class="wrapper">
-          <h1>
-            일상의 모든 물건을<br />
-            거래해 보세요
-          </h1>
-          <a href="items.html" class="button pill-button">구경하러 가기</a>
+      <section class="banner">
+        <div class="top-wrapper">
+          <div id="top-banner-text">
+            <h1>
+              일상의 모든 물건을<br />
+              거래해 보세요
+            </h1>
+            <a href="items.html" class="button pill-button">구경하러 가기</a>
+          </div>
+          <img
+            src="images/home/hero-image.png"
+            width="746px"
+            height="340px"
+            id="hero-banner"
+          />
         </div>
       </section>
 
@@ -51,6 +75,7 @@ <h1>인기 상품을<br />확인해 보세요</h1>
             </p>
           </div>
         </div>
+
         <div class="feature">
           <div class="feature-content">
             <h2 class="feature-tag">Search</h2>
@@ -66,6 +91,7 @@ <h1>구매를 원하는<br />상품을 검색하세요</h1>
             width="50%"
           />
         </div>
+
         <div class="feature">
           <img
             src="images/home/feature3-image.png"
@@ -83,24 +109,34 @@ <h1>판매를 원하는<br />상품을 등록하세요</h1>
         </div>
       </section>
 
-      <section id="bottomBanner" class="banner">
-        <div class="wrapper">
-          <h1>
-            믿을 수 있는
-            <br />
-            판다마켓 중고거래
-          </h1>
+      <section class="bottom-banner">
+        <div class="bottom-wrapper">
+          <div id="bottom-text">
+            <h1>
+              믿을 수 있는
+              <br />
+              판다마켓 중고거래
+            </h1>
+          </div>
+          <img
+            src="/images/home/bottom-banner-image.png"
+            alt="바텀배너이미지"
+            width="746px"
+            height="397px"
+            id="bottom-Banner-img"
+          />
         </div>
       </section>
     </main>
 
     <footer>
-      <div>©codeit - 2024</div>
-      <div id="footerMenu">
+      <div id="footer-codeit">©codeit - 2024</div>
+      <div id="footer-Menu">
         <a href="privacy.html">Privacy Policy</a>
         <a href="faq.html">FAQ</a>
       </div>
-      <div id="socialMedia">
+
+      <div id="social-Media">
         <a
           href="https://www.facebook.com/"
           target="_blank"
diff --git a/signup.html b/signup.html
index 0944601f..d85886df 100644
--- a/signup.html
+++ b/signup.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="ko">
+  <!-- 헤더 부분 -->
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -7,72 +8,83 @@
     <link rel="icon" href="images/logo/favicon.ico" />
     <link
       rel="stylesheet"
-      as="style"
       crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
     />
     <link rel="stylesheet" href="styles/global.css" />
     <link rel="stylesheet" href="styles/signup&loginpage/signup.css" />
   </head>
+  <!-- 헤더 부분 -->
+  <!-- 바디부분 -->
   <body>
-    <div class="signuppage">
+    <div class="signup-page">
       <a href="index.html">
         <img
           src="./images/logo/panda-market-logo.png"
           alt="panda-market-logo"
-          id="mainlogo"
+          id="main-logo"
         />
       </a>
-      <section class="signupsection">
-        <div class="signupbox">
-          <label class="signuplabel"> 이메일 </label>
-          <input class="logininput" alt="email" />
+      <section class="signup-section">
+        <div class="signup-box">
+          <label class="signup-label"> 이메일 </label>
+          <input
+            class="login-input"
+            alt="email"
+            placeholder="이메일을 입력해주세요"
+          />
         </div>
 
-        <div class="signupbox">
-          <label class="signuplabel"> 닉네임 </label>
-          <input class="logininput" alt="nickname" />
+        <div class="signup-box">
+          <label class="signup-label"> 닉네임 </label>
+          <input
+            class="login-input"
+            alt="nickname"
+            placeholder="닉네임을 입력해주세요"
+          />
         </div>
 
-        <div class="signupbox">
-          <label class="signuplabel"> 비밀번호 </label>
+        <div class="signup-box">
+          <label class="signup-label"> 비밀번호 </label>
           <div class="password-wrapper">
             <input
-              class="logininput"
-              id="passwardinput"
+              placeholder="비밀번호를 입력해주세요"
+              class="login-input"
+              id="passward-input"
               type="password"
               alt="passward"
             />
             <img
               src="./images/anyicons/passwardcancel.svg"
               alt="비밀번호 보기 토글"
-              id="togglePassword"
+              id="toggle-Password"
             />
           </div>
         </div>
 
-        <div class="signupbox">
-          <label class="signuplabel"> 비밀번호 확인 </label>
+        <div class="signup-box">
+          <label class="signup-label"> 비밀번호 확인 </label>
           <div class="password-wrapper">
             <input
-              class="logininput"
-              id="passwardinput"
+              placeholder="비밀번호를 다시 한 번 입력해주세요"
+              class="login-input"
+              id="passward-input"
               type="password"
               alt="passward"
             />
             <img
               src="./images/anyicons/passwardcancel.svg"
               alt="비밀번호 보기 토글"
-              id="togglePassword"
+              id="toggle-Password"
             />
           </div>
         </div>
 
-        <button id="signupbutton" class="button pill-button">회원가입</button>
+        <button id="signup-button" class="button pill-button">회원가입</button>
 
-        <section class="socialloginsection">
-          <div id="sociallogintext">간편 로그인하기</div>
-          <div id="socialloginicon">
+        <section class="social-login-section">
+          <div id="social-login-text">간편 로그인하기</div>
+          <div id="social-login-icon">
             <a href="https://www.google.co.kr/">
               <img src="./images/social/google-logo.png" alt="googleicon" />
             </a>
@@ -82,11 +94,12 @@
           </div>
         </section>
 
-        <div id="gologin">
+        <div id="go-login">
           이미 회원이신가요?
-          <a id="loginlink" href="login.html">로그인</a>
+          <a id="login-link" href="login.html">로그인</a>
         </div>
       </section>
     </div>
   </body>
+  <!-- 바디부분 -->
 </html>
diff --git a/styles/global.css b/styles/global.css
index 7fa7d04a..dbfe25fc 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -28,28 +28,6 @@ body {
   font-family: "Pretendard", sans-serif;
 }
 
-header {
-  position: fixed;
-  width: 100%;
-  height: 70px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 200px;
-  background-color: #ffffff;
-  border-bottom: 1px solid #dfdfdf;
-}
-
-footer {
-  background-color: #111827;
-  color: #9ca3af;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 32px 200px 108px 200px;
-  font-size: 16px;
-}
-
 #footerMenu {
   display: flex;
   gap: 30px;
diff --git a/styles/homepage/home.css b/styles/homepage/home.css
index f1f17d34..f149c65a 100644
--- a/styles/homepage/home.css
+++ b/styles/homepage/home.css
@@ -3,28 +3,72 @@
   height: 540px;
   display: flex;
   align-items: center;
+  justify-content: center;
   background-repeat: no-repeat;
   background-position: 80% bottom;
   background-size: 55%;
+  position: relative;
+  overflow: hidden;
 }
 
-#hero {
-  background-image: url("../images/home/hero-image.png");
+#login-Link-Button {
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 8px;
+  padding: 12px 23px;
+  width: 128px;
+  height: 48px;
 }
 
-#features {
-  padding-bottom: 138px;
+.top-wrapper {
+  display: flex;
+  flex-direction: row;
+  height: 340px;
+  margin-top: auto;
+  width: 1110px;
 }
 
-#bottomBanner {
-  background-image: url("../images/home/bottom-banner-image.png");
+.bottom-wrapper {
+  display: flex;
+  flex-direction: row;
+  height: 397px;
+  margin-top: auto;
+  width: 1110px;
 }
 
-#loginLinkButton {
-  font-size: 16px;
-  font-weight: 600;
-  border-radius: 8px;
-  padding: 11.5px 23px;
+.bottom-banner {
+  position: relative;
+  background-color: #cfe5ff;
+  height: 540px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-repeat: no-repeat;
+  background-position: 80% bottom;
+  background-size: 55%;
+  overflow: hidden;
+}
+
+#bottom-text {
+  width: 364px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#footer-Menu {
+  display: flex;
+  gap: 30px;
+  color: #e5e7eb;
+}
+
+#social-Media {
+  gap: 12px;
+  display: flex;
+}
+
+#features {
+  padding-bottom: 138px;
 }
 
 .banner .pill-button {
@@ -32,10 +76,12 @@
 }
 
 .feature {
-  padding: 138px 0;
+  margin: 138px 0;
   display: flex;
   align-items: center;
   gap: 5%;
+  background-color: #fcfcfc;
+  padding: 0 24px;
 }
 
 .feature:nth-child(2) {
@@ -61,3 +107,244 @@
   letter-spacing: 0.08em;
   margin-top: 24px;
 }
+
+header {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 200px;
+  background-color: #ffffff;
+  border-bottom: 1px solid #dfdfdf;
+  z-index: 9999;
+}
+
+footer {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 366px;
+  justify-content: center;
+  justify-items: center;
+  align-items: center;
+  background-color: #111827;
+  color: #9ca3af;
+  display: flex;
+  padding: 32px 0 108px;
+  font-size: 16px;
+  white-space: nowrap;
+}
+
+@media (max-width: 1199px) {
+  header {
+    padding: 0 24px;
+  }
+
+  .banner {
+    height: 771px;
+  }
+
+  .top-wrapper {
+    flex-direction: column;
+    height: 771px;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  #top-banner-text {
+    margin-top: 84px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 24px;
+  }
+
+  #bottom-text {
+    text-align: center;
+  }
+
+  #features {
+    display: flex;
+    gap: 52px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .feature:nth-child(2) {
+    flex-direction: column-reverse;
+    gap: 20px;
+  }
+
+  .feature img {
+    width: 696px;
+    height: auto;
+  }
+
+  .feature h1 {
+    font-size: 32px;
+  }
+
+  .feature p {
+    font-size: 18px;
+  }
+
+  #features br {
+    display: none;
+  }
+
+  .feature {
+    flex-direction: column;
+    margin: 0 0 52px 0;
+    gap: 5%;
+    padding: 0;
+    width: 100%;
+    min-width: 696px;
+  }
+
+  .feature-content {
+    width: 696px;
+    margin-top: 24px;
+  }
+
+  .bottom-wrapper {
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 201px;
+    height: 100%;
+    gap: 217px;
+    margin: 0;
+  }
+
+  br {
+    display: none;
+  }
+
+  .bottom-banner {
+    height: 927px;
+    align-items: center;
+    justify-items: center;
+  }
+
+  .wrapper {
+    padding: 24px 0 56px;
+  }
+
+  header {
+    padding: 0 16px;
+  }
+
+  footer {
+    padding: 32px 0 108px;
+    font-size: 16px;
+    gap: 63px;
+    color: #e5e7eb;
+  }
+}
+
+@media (max-width: 767px) {
+  #top-banner-text {
+    font-size: 32px;
+    line-height: 140%;
+  }
+
+  br {
+    display: block;
+  }
+
+  #top-banner-text {
+    text-align: center;
+    margin-bottom: 18px;
+    font-size: 32px;
+  }
+
+  .responsive-img {
+    content: url("/images/logo/no-panda-logo.png");
+  }
+
+  #hero-banner {
+    width: 448px;
+    height: 204px;
+  }
+
+  #features {
+    flex-direction: column;
+    padding: 52px 0 83px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .feature {
+    min-width: 344px;
+  }
+  .feature-content {
+    width: 344px;
+  }
+
+  .feature img {
+    width: 344px;
+    height: 259px;
+  }
+
+  .feature h1 {
+    font-size: 24px;
+  }
+
+  .feature p {
+    font-size: 16px;
+  }
+
+  .bottom-banner {
+    height: 540px;
+  }
+  .bottom-banner h1 {
+    font-size: 32px;
+  }
+
+  .bottom-wrapper {
+    gap: 131px;
+    padding-top: 121px;
+  }
+
+  footer {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    gap: 16px;
+    justify-items: center;
+    align-items: center;
+    padding: 32px 32px 30px;
+    color: #cfcfcf;
+  }
+
+  #footer-codeit {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+    justify-self: start;
+  }
+
+  #footer-Menu {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    display: flex;
+    gap: 12px;
+    justify-content: start;
+    width: 100%;
+  }
+
+  #social-Media {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+    display: flex;
+    gap: 12px;
+    justify-content: end;
+    width: 100%;
+  }
+
+  #bottom-Banner-img {
+    width: 375px;
+    height: 198px;
+  }
+}
diff --git a/styles/signup&loginpage/login.css b/styles/signup&loginpage/login.css
index 1de2864b..17720cac 100644
--- a/styles/signup&loginpage/login.css
+++ b/styles/signup&loginpage/login.css
@@ -143,3 +143,55 @@ body {
 }
 
 /* 회원가입 */
+
+@media (max-width: 767px) {
+  /* 최상단 login 페이지 설정 */
+  .loginpage {
+    display: flex;
+    justify-content: center;
+    padding: 0 16px;
+  }
+  /* 메인 로고 설정 */
+  #mainlogo {
+    width: 100%;
+    max-width: 396px;
+    height: auto;
+    object-fit: contain;
+  }
+
+  /* 내부 로그인 섹션 설정 */
+  .loginsection {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  /* 입력 필드, 버튼 설정 */
+  .logininput,
+  #passwardinput,
+  #loginbutton {
+    width: 100%;
+    margin-bottom: 12px;
+  }
+
+  /* 비밀번호 input과 아이콘 정렬 */
+  .password-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    max-width: 400px;
+  }
+
+  /* 소셜 로그인 설정 */
+  .socialloginsection {
+    width: 100%;
+    max-width: 400px;
+    margin-bottom: 16px;
+  }
+
+  /* 회원가입 링크 설정 */
+  #gosignup {
+    text-align: center;
+    margin-top: 16px;
+  }
+}
diff --git a/styles/signup&loginpage/signup.css b/styles/signup&loginpage/signup.css
index e1ec36e5..1c1571fa 100644
--- a/styles/signup&loginpage/signup.css
+++ b/styles/signup&loginpage/signup.css
@@ -9,7 +9,7 @@ body {
   font-family: "Pretendard";
 }
 
-.signuppage {
+.signup-page {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -19,27 +19,27 @@ body {
 /* 회원가입 페이지 전체 스타일 */
 
 /* 로고 스타일 */
-#mainlogo {
+#main-logo {
   width: 396px;
   height: 132px;
 }
 /* 로고 스타일 */
 
 /* 회원가입 섹션 스타일 */
-.signupsection {
+.signup-section {
   font-weight: 700;
   font-size: 18px;
   margin-top: 40px;
 }
 
 /* 회원가입 라벨 스타일 */
-.signuplabel {
+.signup-label {
   display: block;
   margin-bottom: 16px;
 }
 
 /* 인풋 스타일 */
-.logininput {
+.login-input {
   width: 640px;
   height: 56px;
   background-color: #f3f4f6;
@@ -50,8 +50,13 @@ body {
   padding-bottom: 16px;
 }
 
+input::placeholder {
+  color: #9ca3af; /* 연한 회색 */
+  font-size: 16px;
+}
+
 /* 회원가입 박스 스타일 */
-.signupbox {
+.signup-box {
   margin-bottom: 24px;
 }
 
@@ -60,12 +65,12 @@ body {
   width: 640px;
 }
 
-#passwardinput {
+#passward-input {
   width: 100%;
   padding-right: 48px;
 }
 
-#togglePassword {
+#toggle-Password {
   position: absolute;
   right: 16px;
   top: 50%;
@@ -75,13 +80,13 @@ body {
   cursor: pointer;
   opacity: 0.6;
 }
-#togglePassword:hover {
+#toggle-Password:hover {
   opacity: 1;
 }
 /* 로그인 섹션 스타일 */
 
 /* 회원가입 버튼 */
-#signupbutton {
+#signup-button {
   margin-bottom: 24px;
   width: 640px;
   height: 56px;
@@ -89,7 +94,7 @@ body {
 /* 로그인 버튼 */
 
 /* 간편 로그인 하기 섹션 스타일 */
-.socialloginsection {
+.social-login-section {
   width: 640px;
   height: 74px;
   background-color: #e6f2ff;
@@ -103,7 +108,7 @@ body {
   justify-content: space-between;
 }
 
-#sociallogintext {
+#social-login-text {
   font-weight: 500;
   line-height: 26px;
   font-size: 16px;
@@ -111,12 +116,12 @@ body {
   margin: 0;
 }
 
-#socialloginicon {
+#social-login-icon {
   display: flex;
   gap: 12px;
 }
 
-#socialloginicon img {
+#social-login-icon img {
   width: 36px;
   height: 36px;
   cursor: pointer;
@@ -125,7 +130,7 @@ body {
 
 /* 회원가입 */
 
-#gologin {
+#go-login {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -133,7 +138,7 @@ body {
   gap: 4px;
 }
 
-#loginlink {
+#login-link {
   color: #3692ff;
   text-decoration: underline;
   font-weight: 500;
@@ -141,3 +146,56 @@ body {
 }
 
 /* 회원가입 */
+
+@media (max-width: 767px) {
+  /* 페이지 전체 설정 */
+  .signup-page {
+    display: flex;
+    justify-content: center; /* 수평 가운데 정렬 */
+    padding: 0 16px; /* 좌우 16px 여백 */
+  }
+
+  /* 회원가입 섹션 설정 */
+  .signup-section {
+    width: 100%;
+    max-width: 400px; /* 최대 400px까지만 확장 */
+  }
+
+  /* 로고 설정 */
+  #main-logo {
+    width: 100%;
+    max-width: 396px; /* 원본 크기 최대 제한 */
+    height: auto; /* 비율 유지하며 축소 */
+  }
+
+  /* 인풋 필드 및 버튼 설정 */
+  .login-input,
+  #passward-input,
+  #signup-button {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  /* 비밀번호 wrapper 설정 */
+  .password-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 400px;
+  }
+
+  /* 소셜 로그인 설정 */
+  .social-login-section {
+    width: 100%;
+    max-width: 400px;
+    margin-bottom: 16px;
+  }
+
+  /* 로그인 링크 설정 */
+  #go-login {
+    text-align: center;
+    margin-top: 16px;
+    width: 100%;
+    max-width: 400px;
+  }
+}
