diff --git a/index.html b/index.html
index 678cc0ac..2ec84dc8 100644
--- a/index.html
+++ b/index.html
@@ -1,113 +1,166 @@
 <!DOCTYPE html>
 <html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>판다마켓</title>
-    <link rel="icon" href="./styles/assets/icons/icon/panda.svg" />
-      <!-- reset, normalize 파일 먼저 -->
-    <link rel="stylesheet" href="./styles/reset.css" />
-    <link rel="stylesheet" href="./styles/normalize.css" />
-    <link rel="stylesheet" href="./styles/style.css" />
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>판다마켓</title>
+        <link rel="icon" href="./styles/assets/icons/icon/panda.svg" />
 
-    <!-- components 폴더의 CSS들(순서는 사용 상황/우선순위에 맞게) -->
-    <link rel="stylesheet" href="./styles/components/Home.css" />
-    <link rel="stylesheet" href="./styles/components/buttons.css" />
-    <link rel="stylesheet" href="./styles/components/footer.css" />
-    <link rel="stylesheet" href="./styles/components/gnb.css" />
+        <!-- Open Graph (OG) 메타 태그 -->
+        <meta property="og:title" content="판다마켓" />
+        <meta
+            property="og:description"
+            content="일상의 모든 물건을 거래해 보세요."
+        />
+        <meta
+            property="og:image"
+            content="https://www.google.com/imgres?q=%ED%8C%90%EB%8B%A4&imgurl=https%3A%2F%2Fi.namu.wiki%2Fi%2FN7XtnLu7mENPBU1wMlAoOo5_w13roksendvuswR8gkFw_8SilcxCpT3kTTdzaP42jSpZAQ2-R4x3aNxaj6A3JA.webp&imgrefurl=https%3A%2F%2Fnamu.wiki%2Fw%2F%25ED%258C%2590%25EB%258B%25A4&docid=5YXeSdnyXQW-OM&tbnid=L95TdOcl4sN4TM&vet=12ahUKEwiptZXLvcyMAxU7sVYBHUTEITMQM3oECG4QAA..i&w=578&h=385&hcb=2&ved=2ahUKEwiptZXLvcyMAxU7sVYBHUTEITMQM3oECG4QAA"
+        />
+        <meta
+            property="og:url"
+            content="https://namu.wiki/w/%ED%8C%90%EB%8B%A4/"
+        />
+        <meta property="og:type" content="website" />
 
-    <!-- 마지막으로 전체 스타일 -->
-    <link rel="stylesheet" href="./styles/style.css" />
-</head>
-<body>
-    <div>
-        <header class="gnb-wrapper">
-          <div class="gnb">
-            <a class="logo" href="/">
-                <img src="styles/assets/icons/icon/panda-sm.svg" alt="logo"/>
-            </a>
-            <a class="btn-small-48" href="/login.html">로그인</a>
-          </div>
-        </header>
-        
-        <main>
-            <section class="home-wrapper">
-                <div class="landing-text">
-                  <h2>일상의 모든 물건을 거래해 보세요</h2>
-                  <a class="btn-large" href="/items">구경하러가기</a>
-                </div>
-                <img src="/styles/assets/images/Home/Img_home_top.svg" alt="home-top"/></div>
-            </section>
-            <section class="section-home-container">
-              <div class="section-home-wrapper">
-                <img src="/styles/assets/images/Home/Img_home_01.png" alt="section"/>
-                <div class="section-home-text">
-                  <span>Hot item</span>
-                  <h2>인기 상품을 <br />확인해 보세요</h2>
-                  <p>
-                    가장 HOT한 중고거래 물품을<br />
-                    판다 마켓에서 확인해 보세요
-                  </p>
-                </div>
-              </div>
-              <div class="section-home-wrapper reverse">
-                <img src="/styles/assets/images/Home/Img_home_02.png" alt="section"/>
-                <div class="section-home-text reverse">
-                  <span>Search</span>
-                  <h2>구매를 원하는 <br />
-                    상품을 검색하세요</h2>
-                  <p>
-                    구매하고 싶은 물품은 검색해서 <br />
-                    쉽게 찾아보세요
-                  </p>
-                </div>
-              </div>
-              <div class="section-home-wrapper">
-                <img src="/styles/assets/images/Home/Img_home_03.png" alt="section"/>
-                <div class="section-home-text">
-                  <span>Register</span>
-                  <h2>판매를 원하는 <br />상품을 등록하세요</h2>
-                  <p>
-                    어떤 물건이든 판매하고 싶은 상품을 <br />
-                    쉽게 등록하세요
-                  </p>
+        <!-- reset, normalize 파일 먼저 -->
+        <link rel="stylesheet" href="./styles/reset.css" />
+        <link rel="stylesheet" href="./styles/normalize.css" />
+        <link rel="stylesheet" href="./styles/style.css" />
+
+        <!-- components 폴더의 CSS들(순서는 사용 상황/우선순위에 맞게) -->
+        <link rel="stylesheet" href="./styles/components/Home.css" />
+        <link rel="stylesheet" href="./styles/components/buttons.css" />
+        <link rel="stylesheet" href="./styles/components/footer.css" />
+        <link rel="stylesheet" href="./styles/components/gnb.css" />
+
+        <!-- 마지막으로 전체 스타일 -->
+        <link rel="stylesheet" href="./styles/style.css" />
+    </head>
+    <body>
+        <div>
+            <header class="gnb-wrapper">
+                <div class="gnb">
+                    <a class="logo" href="/">
+                        <img
+                            src="styles/assets/icons/icon/panda-sm.svg"
+                            alt="logo"
+                        />
+                    </a>
+                    <a class="btn-small-48" href="/login.html">로그인</a>
                 </div>
-              </div>
-            </section>
-            <section class="home-wrapper">
-              <div class="landing-text">
-                <h2>믿을 수 있는 <br/> 판다마켓 중고거래</h2>
-              </div>
-              <img src="/styles/assets/images/Home/Img_home_bottom.svg" alt="home-bottom"/>
-            </section>
+            </header>
 
-        </main>
-    
-        <footer>
-            <div class="footer-wrapper">
-              <span class="footer-info">
-                  @codeit-2025
-              </span>
-              <div class="footer-links">
-                <a href="/privacy">Privacy Policy</a>
-                <a href="/faq">FAQ</a>
-              </div>
-              <div class="sns-links">
-                  <a href="https://www.facebook.com" target="_blank">
-                    <img src="/styles/assets/icons/sns/ic_facebook.svg" alt="facebook" rel="noopener noreferrer"/>
-                  </a>
-                  <a href="https://twitter.com" target="_blank">
-                    <img src="/styles/assets/icons/sns/ic_twitter.svg" alt="twitter" rel="noopener noreferrer"/>
-                  </a>
-                  <a href="https://youtube.com" target="_blank">
-                    <img src="/styles/assets/icons/sns/ic_youtube.svg" alt="youtube" rel="noopener noreferrer"/>
-                  </a>
-                  <a href="https://instagram.com" target="_blank">
-                    <img src="/styles/assets/icons/sns/ic_instagram.svg" alt="instagram" rel="noopener noreferrer"/>
-                  </a>
-              </div>
+            <div class="home-container">
+                <section class="home-wrapper">
+                    <div class="landing-text top">
+                        <h2>일상의 모든 물건을 거래해 보세요</h2>
+                        <a class="btn-large" href="/items">구경하러가기</a>
+                    </div>
+                    <img
+                        src="/styles/assets/images/Home/Img_home_top.svg"
+                        alt="home-top"
+                    />
+                </section>
+                <section class="section-home-container">
+                    <div class="section-home-wrapper">
+                        <img
+                            src="/styles/assets/images/Home/Img_home_01.png"
+                            alt="home-card01"
+                        />
+                        <div class="section-home-text">
+                            <h1>Hot item</h1>
+                            <h2>인기 상품을 <br />확인해 보세요</h2>
+                            <p>
+                                가장 HOT한 중고거래 물품을<br />
+                                판다 마켓에서 확인해 보세요
+                            </p>
+                        </div>
+                    </div>
+                    <div class="section-home-wrapper reverse">
+                        <img
+                            src="/styles/assets/images/Home/Img_home_02.png"
+                            alt="home-card02"
+                        />
+                        <div class="section-home-text reverse">
+                            <h1>Search</h1>
+                            <h2>
+                                구매를 원하는 <br />
+                                상품을 검색하세요
+                            </h2>
+                            <p>
+                                구매하고 싶은 물품은 검색해서 <br />
+                                쉽게 찾아보세요
+                            </p>
+                        </div>
+                    </div>
+                    <div class="section-home-wrapper">
+                        <img
+                            src="/styles/assets/images/Home/Img_home_03.png"
+                            alt="home-card03"
+                        />
+                        <div class="section-home-text">
+                            <h1>Register</h1>
+                            <h2>판매를 원하는 <br />상품을 등록하세요</h2>
+                            <p>
+                                어떤 물건이든 판매하고 싶은 상품을 <br />
+                                쉽게 등록하세요
+                            </p>
+                        </div>
+                    </div>
+                </section>
+                <section class="home-wrapper">
+                    <div class="landing-text">
+                        <h2>
+                            믿을 수 있는 <br />
+                            판다마켓 중고거래
+                        </h2>
+                    </div>
+                    <img
+                        src="/styles/assets/images/Home/Img_home_bottom.svg"
+                        alt="home-bottom"
+                    />
+                </section>
             </div>
-        </footer>
-      </div>
-</body>
-</html>
\ No newline at end of file
+
+            <footer>
+                <div class="footer-wrapper">
+                    <span class="footer-info"> @codeit-2025 </span>
+                    <div class="footer-links">
+                        <a href="/privacy">Privacy Policy</a>
+                        <a href="/faq">FAQ</a>
+                    </div>
+                    <div class="sns-links">
+                        <a href="https://www.facebook.com" target="_blank">
+                            <img
+                                src="/styles/assets/icons/sns/ic_facebook.svg"
+                                alt="facebook"
+                                rel="noopener noreferrer"
+                            />
+                        </a>
+                        <a href="https://twitter.com" target="_blank">
+                            <img
+                                src="/styles/assets/icons/sns/ic_twitter.svg"
+                                alt="twitter"
+                                rel="noopener noreferrer"
+                            />
+                        </a>
+                        <a href="https://youtube.com" target="_blank">
+                            <img
+                                src="/styles/assets/icons/sns/ic_youtube.svg"
+                                alt="youtube"
+                                rel="noopener noreferrer"
+                            />
+                        </a>
+                        <a href="https://instagram.com" target="_blank">
+                            <img
+                                src="/styles/assets/icons/sns/ic_instagram.svg"
+                                alt="instagram"
+                                rel="noopener noreferrer"
+                            />
+                        </a>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    </body>
+</html>
diff --git a/login.html b/login.html
index bdb12a35..5a4e6aae 100644
--- a/login.html
+++ b/login.html
@@ -1,55 +1,82 @@
 <!DOCTYPE html>
 <html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>판다마켓</title>
-    <link rel="icon" href="./styles/assets/icons/icon/panda.svg" />
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>판다마켓</title>
+        <link rel="icon" href="./styles/assets/icons/icon/panda.svg" />
 
-    <link rel="stylesheet" href="./styles/reset.css" />
-    <link rel="stylesheet" href="./styles/normalize.css" />
-    <link rel="stylesheet" href="./styles/style.css" />
-    <link rel="stylesheet" href="./styles/components/sign.css" />
-    <link rel="stylesheet" href="./styles/components/buttons.css" />
-    <link rel="stylesheet" href="./styles/components/footer.css" />
-</head>
-<body>
-    <div class="login-container">
-        <div class="login-logo">
-            <a class="logo" href="/">
-                <img src="styles/assets/icons/icon/panda-lg.svg" alt="logo"/>
-            </a>
-        </div>
-        <form method="post" class="login-form">
-            <div class="input-item">
-                <label for="email">이메일</label>
-                <input type="email" id="email" name="email" placeholder="이메일을 입력해 주세요" />
+        <link rel="stylesheet" href="./styles/reset.css" />
+        <link rel="stylesheet" href="./styles/normalize.css" />
+        <link rel="stylesheet" href="./styles/style.css" />
+        <link rel="stylesheet" href="./styles/components/sign.css" />
+        <link rel="stylesheet" href="./styles/components/buttons.css" />
+        <link rel="stylesheet" href="./styles/components/footer.css" />
+    </head>
+    <body>
+        <div class="login-container">
+            <div class="login-logo">
+                <a class="logo" href="/">
+                    <img
+                        src="styles/assets/icons/icon/panda-lg.svg"
+                        alt="logo"
+                    />
+                </a>
             </div>
-            <div class="input-item">
-                <label for="password">비밀번호</label>
-                <div class="input-wrapper">
-                    <input type="password" id="password" name="password" placeholder="비밀번호를 입력해 주세요" />
-                    <img src="styles/assets/icons/icon/eyes_off.svg" alt="toggle-password" class="toggle-password" />
+            <form method="post" class="login-form">
+                <div class="input-item">
+                    <label for="email">이메일</label>
+                    <input
+                        type="email"
+                        id="email"
+                        name="email"
+                        placeholder="이메일을 입력해 주세요"
+                    />
+                </div>
+                <div class="input-item">
+                    <label for="password">비밀번호</label>
+                    <div class="input-wrapper">
+                        <input
+                            type="password"
+                            id="password"
+                            name="password"
+                            placeholder="비밀번호를 입력해 주세요"
+                        />
+                        <button>
+                            <img
+                                src="styles/assets/icons/icon/eyes_off.svg"
+                                alt="toggle-password"
+                                class="toggle-password"
+                            />
+                        </button>
+                    </div>
+                </div>
+                <button type="submit" class="btn-large full-width">
+                    로그인
+                </button>
+            </form>
+            <div class="social-login-container">
+                <h3>간편 로그인하기</h3>
+                <div class="social-login-wrapper">
+                    <a href="https://www.google.com" target="_blank">
+                        <img
+                            src="styles/assets/icons/sns/Google.svg"
+                            alt="google-login"
+                        />
+                    </a>
+                    <a href="https://www.kakaocrop.com/page/" target="_blank">
+                        <img
+                            src="styles/assets/icons/sns/Kakao.svg"
+                            alt="kakao-login"
+                        />
+                    </a>
                 </div>
             </div>
-            <button type="submit" class="btn-large full-width">로그인</button>
-        </form>
-        <div class="social-login-container">
-            <h3>간편 로그인하기</h3>
-            <div class="social-login-wrapper">
-                <a href="https://www.google.com" target="_blank">
-                    <img src="styles/assets/icons/sns/Google.svg" alt="google-login"/>
-                </a>
-                <a href="https://www.kakaocrop.com/page/" target="_blank">
-                    <img src="styles/assets/icons/sns/Kakao.svg" alt="kakao-login"/>
-                </a>
+            <div class="login-footer">
+                <p>
+                    판다마켓이 처음이신가요? <a href="/signup.html">회원가입</a>
+                </p>
             </div>
         </div>
-        <div class="login-footer">
-            <p>
-                판다마켓이 처음이신가요? <a href="/signup.html">회원가입</a> 
-            </p> 
-        </div>
-    </div>
-</body>
-</html>
\ No newline at end of file
+    </body>
+</html>
diff --git a/signup.html b/signup.html
index 04fa74cf..c8382bf2 100644
--- a/signup.html
+++ b/signup.html
@@ -1,66 +1,107 @@
 <!DOCTYPE html>
 <html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>판다마켓</title>
-    <link rel="icon" href="./styles/assets/icons/icon/panda.svg" />
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>판다마켓</title>
+        <link rel="icon" href="./styles/assets/icons/icon/panda.svg" />
 
-    <link rel="stylesheet" href="./styles/reset.css" />
-    <link rel="stylesheet" href="./styles/normalize.css" />
-    <link rel="stylesheet" href="./styles/style.css" />
-    <link rel="stylesheet" href="./styles/components/sign.css" />
-    <link rel="stylesheet" href="./styles/components/buttons.css" />
-    <link rel="stylesheet" href="./styles/components/footer.css" />
-</head>
-<body>
-    <div class="login-container">
-        <div class="login-logo">
-            <a class="logo" href="/">
-                <img src="styles/assets/icons/icon/panda-lg.svg" alt="logo"/>
-            </a>
-        </div>
-        <form method="post" class="login-form">
-            <div class="input-item">
-                <label for="email">이메일</label>
-                <input type="email" id="email" name="email" placeholder="이메일을 입력해 주세요" />
-            </div>
-            <div class="input-item">
-                <label for="username">닉네임</label>
-                <input type="username" id="username" name="username" placeholder="닉네임을 입력해 주세요" />
+        <link rel="stylesheet" href="./styles/reset.css" />
+        <link rel="stylesheet" href="./styles/normalize.css" />
+        <link rel="stylesheet" href="./styles/style.css" />
+        <link rel="stylesheet" href="./styles/components/sign.css" />
+        <link rel="stylesheet" href="./styles/components/buttons.css" />
+        <link rel="stylesheet" href="./styles/components/footer.css" />
+    </head>
+    <body>
+        <div class="login-container">
+            <div class="login-logo">
+                <a class="logo" href="/">
+                    <img
+                        src="styles/assets/icons/icon/panda-lg.svg"
+                        alt="logo"
+                    />
+                </a>
             </div>
-            <div class="input-item">
-                <label for="password">비밀번호</label>
-                <div class="input-wrapper">
-                    <input type="password" id="password" name="password" placeholder="비밀번호를 입력해 주세요" />
-                    <img src="styles/assets/icons/icon/eyes_off.svg" alt="toggle-password" class="toggle-password" />
+            <form method="post" class="login-form">
+                <div class="input-item">
+                    <label for="email">이메일</label>
+                    <input
+                        type="email"
+                        id="email"
+                        name="email"
+                        placeholder="이메일을 입력해 주세요"
+                    />
                 </div>
-            </div>
-            <div class="input-item">
-                <label for="password">비밀번호 확인</label>
-                <div class="input-wrapper">
-                    <input type="password" id="password" name="password" placeholder="비밀번호를 다시 한 번 입력해 주세요" />
-                    <img src="styles/assets/icons/icon/eyes_off.svg" alt="toggle-password" class="toggle-password" />
+                <div class="input-item">
+                    <label for="username">닉네임</label>
+                    <input
+                        type="username"
+                        id="username"
+                        name="username"
+                        placeholder="닉네임을 입력해 주세요"
+                    />
+                </div>
+                <div class="input-item">
+                    <label for="password">비밀번호</label>
+                    <div class="input-wrapper">
+                        <input
+                            type="password"
+                            id="password"
+                            name="password"
+                            placeholder="비밀번호를 입력해 주세요"
+                        />
+                        <button>
+                            <img
+                                src="styles/assets/icons/icon/eyes_off.svg"
+                                alt="toggle-password"
+                                class="toggle-password"
+                            />
+                        </button>
+                    </div>
+                </div>
+                <div class="input-item">
+                    <label for="password">비밀번호 확인</label>
+                    <div class="input-wrapper">
+                        <input
+                            type="password"
+                            id="password"
+                            name="password"
+                            placeholder="비밀번호를 다시 한 번 입력해 주세요"
+                        />
+                        <button>
+                            <img
+                                src="styles/assets/icons/icon/eyes_off.svg"
+                                alt="toggle-password"
+                                class="toggle-password"
+                            />
+                        </button>
+                    </div>
+                </div>
+                <button type="submit" class="btn-large full-width">
+                    회원가입
+                </button>
+            </form>
+            <div class="social-login-container">
+                <h3>간편 로그인하기</h3>
+                <div class="social-login-wrapper">
+                    <a href="https://www.google.com" target="_blank">
+                        <img
+                            src="styles/assets/icons/sns/Google.svg"
+                            alt="google-login"
+                        />
+                    </a>
+                    <a href="https://www.kakaocrop.com/page/" target="_blank">
+                        <img
+                            src="styles/assets/icons/sns/Kakao.svg"
+                            alt="kakao-login"
+                        />
+                    </a>
                 </div>
             </div>
-            <button type="submit" class="btn-large full-width">회원가입</button>
-        </form>
-        <div class="social-login-container">
-            <h3>간편 로그인하기</h3>
-            <div class="social-login-wrapper">
-                <a href="https://www.google.com" target="_blank">
-                    <img src="styles/assets/icons/sns/Google.svg" alt="google-login"/>
-                </a>
-                <a href="https://www.kakaocrop.com/page/" target="_blank">
-                    <img src="styles/assets/icons/sns/Kakao.svg" alt="kakao-login"/>
-                </a>
+            <div class="login-footer">
+                <p>이미 회원이신가요? <a href="/login.html">로그인</a></p>
             </div>
         </div>
-        <div class="login-footer">
-            <p>
-                이미 회원이신가요? <a href="/login.html">로그인</a> 
-            </p> 
-        </div>
-    </div>
-</body>
-</html>
\ No newline at end of file
+    </body>
+</html>
diff --git a/styles/components/Home.css b/styles/components/Home.css
index 554118dc..6845010f 100644
--- a/styles/components/Home.css
+++ b/styles/components/Home.css
@@ -1,23 +1,23 @@
-main{
+.home-container {
     display: flex;
     flex-direction: column;
 }
 /* landing top,bottom */
-.home-wrapper{
+.home-wrapper {
     display: flex;
     flex-direction: row;
     justify-content: center;
-    align-items:flex-end;
+    align-items: flex-end;
 
     height: 540px;
-    background-color: #CFE5FF;
+    background-color: #cfe5ff;
 }
 
-.home-wrapper h2{
+.home-wrapper h2 {
     font: var(--text-3xl-bold);
     color: var(--gray---700);
 }
-.landing-text{
+.landing-text {
     display: flex;
     flex-direction: column;
     width: 357px;
@@ -31,14 +31,16 @@ main{
 }
 
 /* section 설명 부분 */
-.section-home-container{
+.section-home-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
+    background-color: #fcfcfc;
 }
 
-.section-home-wrapper{
+.section-home-wrapper {
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -50,21 +52,22 @@ main{
     padding: 0 10px;
     gap: 64px;
 
-    background-color: #FCFCFC;
+    background-color: #fcfcfc;
 }
-.section-home-wrapper.reverse{
+.section-home-wrapper.reverse {
     flex-direction: row-reverse;
 }
-.section-home-text{
+
+/* home section 글자 부분 */
+.section-home-text {
     display: flex;
     flex-direction: column;
     margin: 103px 0;
     gap: 12px;
 }
-.section-home-text span{
+.section-home-text {
     font: var(--text-2lg-bold);
     color: var(--primary---100);
-    
 }
 
 .section-home-text h2 {
@@ -78,4 +81,71 @@ main{
 
 .section-home-text.reverse {
     text-align: right;
-}
\ No newline at end of file
+}
+
+@media (max-width: 1200px) {
+    .home-wrapper {
+        flex-direction: column;
+        align-items: center;
+        height: auto;
+        padding-top: 80px;
+    }
+    .home-wrapper img {
+        width: 100%;
+        height: auto;
+    }
+    .landing-text {
+        align-items: center;
+        transition: 0.5s;
+    }
+    .landing-text h2 {
+        text-align: center;
+    }
+    .landing-text.top {
+        width: auto;
+    }
+    .landing-text.top h2 {
+        width: 100%;
+    }
+    /* section */
+    .section-home-container {
+        width: 100%;
+        padding: 0 24px;
+    }
+    .section-home-wrapper {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0;
+
+        width: 100%;
+        height: auto;
+        /* height의 중요성!! */
+        padding: 0;
+        margin: 26px 0;
+    }
+    .section-home-wrapper.reverse {
+        flex-direction: column;
+    }
+    .section-home-wrapper img {
+        width: 100%;
+    }
+    .section-home-text {
+        margin: 24px 0;
+    }
+    .section-home-text h2 br {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .landing-text.top {
+        width: 240px;
+        transition: 0.5s;
+    }
+    .section-home-container {
+        padding: 32px 16px;
+    }
+    .section-home-wrapper {
+        margin: 20px 0;
+    }
+}
diff --git a/styles/components/buttons.css b/styles/components/buttons.css
index 7ec6bad5..e3d85a5e 100644
--- a/styles/components/buttons.css
+++ b/styles/components/buttons.css
@@ -60,4 +60,13 @@ button {
 
 .full-width {
     width: 100%;
-}
\ No newline at end of file
+}
+
+@media (max-width: 768px) {
+    .btn-large {
+        width: 100%;
+        padding: 16px 71px;
+        font: var(--text-2lg-semibold);
+        transition: 0.5s;
+    }
+}
diff --git a/styles/components/footer.css b/styles/components/footer.css
index 1a559498..87ddb971 100644
--- a/styles/components/footer.css
+++ b/styles/components/footer.css
@@ -1,4 +1,4 @@
-footer{
+footer {
     height: 160px;
     font-weight: 400;
     background-color: var(--gray---900);
@@ -7,7 +7,7 @@ footer{
     align-items: flex-start;
 }
 
-.footer-wrapper{
+.footer-wrapper {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
@@ -15,18 +15,36 @@ footer{
     padding-top: 32px;
 }
 
-.footer-info{
+.footer-info {
     color: var(--gray---400);
 }
-.footer-links{
+.footer-links {
     display: flex;
     gap: 30px;
 }
-.footer-links a{
+.footer-links a {
     color: var(--gray---200);
 }
-.sns-links{
+.sns-links {
     display: flex;
     gap: 12px;
 }
 
+@media (max-width: 768px) {
+    .footer-wrapper {
+        position: relative;
+        padding: 32px 32px 0 32px;
+    }
+
+    .footer-info {
+        position: absolute;
+        top: 111px;
+        left: 32px;
+    }
+
+    .footer-links {
+        justify-content: space-between;
+        width: 50%;
+        margin-right: auto;
+    }
+}
diff --git a/styles/components/gnb.css b/styles/components/gnb.css
index aeb19198..dbe5bc37 100644
--- a/styles/components/gnb.css
+++ b/styles/components/gnb.css
@@ -25,6 +25,18 @@
         padding: 9px 0;
     }
     .gnb{
-        margin: 0 200px;
+        margin: 0 100px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .gnb{
+        margin: 0 24px;
+    }
+}
+
+@media (max-width: 768px) {
+    .gnb{
+        margin: 0 16px;
     }
 }
\ No newline at end of file
diff --git a/styles/components/sign.css b/styles/components/sign.css
index 7486d1f7..54a1f3ea 100644
--- a/styles/components/sign.css
+++ b/styles/components/sign.css
@@ -1,19 +1,19 @@
-.login-container{
+.login-container {
     display: flex;
     flex-direction: column;
-    /* justify-content: center; */
+    justify-content: center;
     align-items: center;
     width: 100%;
     max-width: 640px;
     height: 100vh;
     gap: 40px;
-    margin: 60px auto;
+    margin: 80px auto;
 }
-.login-logo{
+.login-logo {
     display: flex;
     align-items: center;
 }
-.login-logo .logo span{
+.login-logo .logo span {
     color: var(--primary---100);
     font-weight: 700;
     font-size: 66.34px;
@@ -25,17 +25,14 @@
     width: 103.53;
 }
 
-.login-container {
-    display: flex;
-    flex-direction: column;
-}
-
 .login-form {
     display: flex;
     flex-direction: column;
     gap: 24px;
     width: 640px;
 }
+
+/* -------------input---------------- */
 .input-item {
     display: flex;
     flex-direction: column;
@@ -74,10 +71,11 @@
     position: absolute;
     right: 24px;
     top: 50%;
-    transform: translateY(-50%);
+    transform: translateY(-80%);
     cursor: pointer;
 }
 
+/* -----------------social login--------------------- */
 .social-login-container {
     display: flex;
     justify-content: space-between;
@@ -86,7 +84,7 @@
     width: 640px;
     height: 74px;
     padding: 16px 23px;
-    background-color: #E6F2FF;
+    background-color: #e6f2ff;
     border-radius: 8px;
 }
 
@@ -103,7 +101,28 @@
     color: var(--gray---800);
 }
 
-.login-footer a{
+.login-footer a {
     color: var(--primary---100);
     text-decoration: underline;
-}
\ No newline at end of file
+}
+@media (max-width: 768px) {
+    .login-container {
+        justify-content: center;
+        align-items: center;
+        margin: 0 auto;
+        padding: 0 16px;
+        max-width: 400px;
+        gap: 24px;
+    }
+    .login-logo .logo img {
+        width: 198px;
+        transition: 0.5s;
+    }
+    .login-form {
+        width: 100%;
+        gap: 16px;
+    }
+    .social-login-container {
+        width: 100%;
+    }
+}
