diff --git a/index.html b/index.html
index ae11a646b..430321708 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,7 @@
         <div class="frame">
             <div class="content">
                 <div class="frame-text">
-                    일상의 모든 물건을 </br>
-                    거래해보세요
+                    일상의 모든 물건을<br class="line mobile-line" /> 거래해보세요
                 </div>
                 <a class="see-more" href="items/">구경하러가기</a>
             </div>
@@ -37,45 +36,43 @@
 
             <article class="element">
 
-                <img src="/img/Img_home_01.png">
+                <img class="element-img" src="/img/Img_home_01.png">
                 <div class="element-text-left">
                     <span class="category">Hot item</span>
-                    <p class="element-main-text">인기 상품을 <br />
-                        확인해 보세요 </p>
+                    <p class="element-main-text">인기 상품을 <br class="line" />
+                        확인해보세요 </p>
                     <p class="element-sub-text"> 가장 HOT한 중고거래 물품을 <br />
                         판다 마켓에서 확인해 보세요</p>
                 </div>
             </article>
 
-            <article class="element">
-
+            <article class="element right">
                 <div class="element-text-right">
                     <span class="category">Search</span>
-                    <p class="element-main-text">구매를 원하는 <br />
+                    <p class="element-main-text">구매를 원하는 <br class="line" />
                         상품을 검색하세요</p>
                     <p class="element-sub-text">
                         구매하고 싶은 물품은 검색해서 <br />
                         쉽게 찾아보세요
                     </p>
                 </div>
-                <img src="img/Img_home_02.png">
+                <img class="element-img" src="img/Img_home_02.png">
             </article>
 
             <article class="element">
-                <img src="img/Img_home_03.png">
+                <img class="element-img" src="img/Img_home_03.png">
                 <div class="element-text-left">
                     <span class="category">Register</span>
-                    <p class="element-main-text">판매를 원하는 <br />
+                    <p class="element-main-text">판매를 원하는 <br class="line" />
                         상품을 등록하세요</p>
                     <p class="element-sub-text">
-                        어떤 물건이든 판매하고 싶은 상품을<br />
+                        어떤 물건이든 판매하고 싶은 상품을 <br />
                         쉽게 등록하세요
                     </p>
                 </div>
             </article>
         </section>
 
-        </div>
 
         <div class="frame">
             <div class="content">
diff --git a/login/index.html b/login/index.html
index 244310003..dd919c90e 100644
--- a/login/index.html
+++ b/login/index.html
@@ -9,13 +9,13 @@
 </head>
 
 <body class="loginPage">
+
     <a href="./">
         <div class="logo">
             <img src="/img/logo.png" />
         </div>
     </a>
 
-
     <main>
         <form class="login">
             <div class="login-input">
diff --git a/login/style.css b/login/style.css
index 13a0f7002..008ccf546 100644
--- a/login/style.css
+++ b/login/style.css
@@ -108,4 +108,43 @@ input:focus-out {
     transform: translateY(350%);
     pointer-events: none;
     /* 눈 모양 아이콘 */
+}
+
+/* Tablet */
+@media (max-width: 1200px) {}
+
+
+/* Mobile */
+@media (max-width: 768px) {
+
+    .loginPage {
+        justify-content: flex-start;
+        gap: 20px;
+    }
+
+    .logo {
+        margin-top: 50px;
+    }
+
+    .logo img {
+        width: 198px;
+        height: 66px;
+        object-fit: contain;
+    }
+
+    label {
+        font-size: 14px;
+    }
+
+    input {
+        width: 343px;
+    }
+
+    .login-button {
+        width: 343px;
+    }
+
+    .easy-login {
+        width: 344px;
+    }
 }
\ No newline at end of file
diff --git a/signup/style.css b/signup/style.css
index d7f816b9b..7e4c9b439 100644
--- a/signup/style.css
+++ b/signup/style.css
@@ -108,4 +108,46 @@ input:focus-out {
     transform: translateY(350%);
     pointer-events: none;
     /* 눈 모양 아이콘 */
+}
+
+
+
+
+/* Tablet */
+@media (max-width: 1200px) {}
+
+
+/* Mobile */
+@media (max-width: 768px) {
+
+    .signupPage {
+        justify-content: flex-start;
+        gap: 20px;
+    }
+
+    .logo {
+        margin-top: 50px;
+    }
+
+    .logo img {
+        width: 198px;
+        height: 66px;
+        object-fit: contain;
+    }
+
+    label {
+        font-size: 14px;
+    }
+
+    input {
+        width: 343px;
+    }
+
+    .signup-button {
+        width: 343px;
+    }
+
+    .easy-login {
+        width: 344px;
+    }
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index abb240cdd..b03d6c2f1 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,7 @@
 
 body {
     margin: 70px 0 0;
+    width: 100%;
 }
 
 
@@ -30,6 +31,7 @@ body {
 search 부분 텍스트 오른쪽 정렬  */
 .element-text-right {
     display: flex;
+    width: 100%;
     text-align: right;
     flex-direction: column;
     gap: 30px;
@@ -37,6 +39,7 @@ search 부분 텍스트 오른쪽 정렬  */
 
 .element-text-left {
     display: flex;
+    width: 100%;
     flex-direction: column;
     gap: 30px;
 }
@@ -44,9 +47,9 @@ search 부분 텍스트 오른쪽 정렬  */
 /* 
 요소 3개중 큰 글씨들 */
 .element-main-text {
-
     font-size: 40px;
     font-weight: 700;
+    margin: 0px;
 }
 
 /* 
@@ -55,6 +58,7 @@ search 부분 텍스트 오른쪽 정렬  */
 
     font-size: 24px;
     font-weight: 500;
+    margin: 0px;
 }
 
 /* 
@@ -74,7 +78,6 @@ search 부분 텍스트 오른쪽 정렬  */
 }
 
 
-
 .category {
     color: #3692FF;
     font-weight: 700;
@@ -104,7 +107,6 @@ search 부분 텍스트 오른쪽 정렬  */
     display: flex;
     flex-direction: column;
     justify-content: center;
-    margin: 70px 0 0 200px;
 }
 
 
@@ -115,6 +117,7 @@ search 부분 텍스트 오른쪽 정렬  */
     width: 100%;
     height: 540px;
     overflow: hidden;
+    padding: 0 360px;
 
 }
 
@@ -129,20 +132,19 @@ search 부분 텍스트 오른쪽 정렬  */
 장바구니 판다 인사 프레임 */
 .frame-img {
     position: relative;
-    width: 820px;
-    height: 410px;
-    top: 140px;
-    left: 40px;
+    width: 996px;
+    height: 447px;
+    top: 93px;
+    left: 0px;
 }
 
 /* 
 친구끼리 대화하는 판다 프레임 */
 .frame-img2 {
     position: relative;
-    width: 800px;
-    height: 450px;
-    top: 90px;
-    left: 40px;
+    width: 996px;
+    height: 540px;
+
 }
 
 /* 
@@ -156,7 +158,7 @@ search 부분 텍스트 오른쪽 정렬  */
     padding: 16px 124px;
     width: 357px;
     height: 56px;
-    font-size: 20px;
+    font-size: 17px;
     font-weight: 600;
     text-decoration: none;
 }
@@ -169,13 +171,11 @@ search 부분 텍스트 오른쪽 정렬  */
     height: 160px;
     display: flex;
     justify-content: space-between;
-    padding: 10px 200px;
     align-items: center;
     padding: 32px 200px;
 }
 
 
-.footer-wrap {}
 
 .footer-text-1 {
     color: #9CA3AF;
@@ -197,4 +197,147 @@ search 부분 텍스트 오른쪽 정렬  */
 .footer-icon {
     display: flex;
     gap: 12px;
+}
+
+
+
+/* Tablet */
+@media (max-width: 1200px) {
+
+    .line {
+        display: none;
+    }
+
+    .topBar {
+        padding: 10px 24px;
+    }
+
+    .content {
+        align-items: center;
+    }
+
+    .frame {
+        flex-direction: column;
+        align-items: center;
+        height: 744px;
+        padding: 84px;
+    }
+
+    .frame-img {
+        top: 45px;
+    }
+
+    .frame-text {
+        text-align: center;
+    }
+
+    .elements {
+        gap: 100px;
+        margin: 30px 0px;
+    }
+
+    .element {
+        flex-direction: column;
+        gap: 30px;
+    }
+
+    .right {
+        flex-direction: column-reverse;
+    }
+
+    .element-text-right {
+        gap: 20px;
+    }
+
+    .element-text-left {
+        gap: 20px;
+    }
+
+    .element-main-text {
+        font-size: 32px;
+
+    }
+
+    .element-sub-text {
+        font-size: 18px;
+    }
+
+    .element-img {
+        width: 90vw;
+    }
+
+    .bottomBar {
+        background-color: #111827;
+        width: 100%;
+        height: 160px;
+        display: flex;
+        justify-content: space-between;
+        align-items: self-start;
+        padding: 32px 100px;
+    }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+    .topBar {
+        padding: 10px 16px;
+    }
+
+    .mobile-line {
+        display: inline-block;
+    }
+
+    .bottomBar {
+        flex-wrap: wrap;
+        padding: 32px;
+    }
+
+    .see-more {
+        width: 154px;
+        font-size: 15px;
+        white-space: nowrap;
+        /* 텍스트 줄 바꿈 방지 */
+        display: flex;
+        /* 플렉스 컨테이너로 설정 */
+        align-items: center;
+        /* 수직 중앙 정렬 */
+        justify-content: center;
+        /* 수평 중앙 정렬 */
+    }
+
+    .frame-text {
+        font-size: 32px;
+    }
+
+    .category {
+        font-size: 16px;
+    }
+
+    .elements {
+        gap: 60px;
+    }
+
+    .element-main-text {
+        font-size: 24px;
+    }
+
+    .element-sub-text {
+        font-size: 16px;
+    }
+
+    .frame {
+        height: 540px;
+    }
+
+    .frame-img {
+        width: 626px;
+        height: 281px;
+        top: 0px;
+    }
+
+    .frame-img2 {
+        width: 497px;
+        height: 269px;
+        top: 50px;
+    }
 }
\ No newline at end of file
