diff --git a/.DS_Store b/.DS_Store
index dc894ba1..04e5f045 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/assets/example.png b/assets/example.png
new file mode 100644
index 00000000..b50d1082
Binary files /dev/null and b/assets/example.png differ
diff --git a/css/login.css b/css/login.css
index 0f34ac28..aa052cc8 100644
--- a/css/login.css
+++ b/css/login.css
@@ -1,26 +1,20 @@
 :root {
   --gray-900: #111827;
-  --gray-800: #1F2937;
+  --gray-800: #1f2937;
   --gray-700: #374151;
-  --gray-600: #4B5563;
-  --gray-500: #6B7280;
-  --gray-400: #9CA3AF;
-  --gray-200: #E5E7EB;
-  --gray-100: #F3F4F6;
-  --gray-50: #F9FAFB;
-  --blue: #3692FF;
+  --gray-600: #4b5563;
+  --gray-500: #6b7280;
+  --gray-400: #9ca3af;
+  --gray-200: #e5e7eb;
+  --gray-100: #f3f4f6;
+  --gray-50: #f9fafb;
+  --blue: #3692ff;
 }
 
 * {
   box-sizing: border-box;
-}
-
-body {
   margin: 0;
-}
-
-.empty-area {
-  height: 231px;
+  padding: 0;
 }
 
 .hearder {
@@ -29,6 +23,14 @@ body {
   justify-content: center;
 }
 
+.panda-logo-a {
+  margin-top: 231px;
+}
+
+#join {
+  margin-bottom: 231px;
+}
+
 .panda-logo-img {
   width: 396px;
   height: 132px;
@@ -66,8 +68,8 @@ body {
 }
 
 .eyes {
-  width: 20.47px;
-  height: 18.07px;
+  width: 20px;
+  height: 18px;
   position: relative;
   top: 5px;
   right: 50px;
@@ -140,3 +142,71 @@ body {
 .join-first {
   color: var(--gray-800);
 }
+
+@media (max-width: 1199px) {
+  .panda-logo-a {
+    margin-top: 190px;
+  }
+
+  #join {
+    margin-bottom: 325px;
+  }
+}
+
+@media (max-width: 766px) {
+  .panda-logo-a {
+    display: block;
+    width: fit-content;
+    margin: 0 auto;
+    margin-top: 80px;
+  }
+
+  .panda-logo-img {
+    width: 198px;
+    height: 66px;
+    margin: 0;
+  }
+
+  .hearder {
+    max-width: 400px;
+    width: 100%;
+  }
+
+  .form label {
+    width: 100%;
+    max-width: 400px;
+    margin-bottom: 8px;
+  }
+
+  .form input {
+    width: 100%;
+    max-width: 400px;
+    margin-bottom: 16px;
+  }
+
+  .password-check-flex {
+    width: 100%;
+    max-width: 400px;
+    margin-bottom: 16px;
+    height: 56px;
+  }
+
+  .form button {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .eyes {
+    top: -95%;
+    left: 85%;
+  }
+
+  .simple-login {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  #join {
+    margin-bottom: 231px;
+  }
+}
diff --git a/css/signup.css b/css/signup.css
index c64d8576..7bfdd898 100644
--- a/css/signup.css
+++ b/css/signup.css
@@ -1,30 +1,28 @@
 :root {
   --gray-900: #111827;
-  --gray-800: #1F2937;
+  --gray-800: #1f2937;
   --gray-700: #374151;
-  --gray-600: #4B5563;
-  --gray-500: #6B7280;
-  --gray-400: #9CA3AF;
-  --gray-200: #E5E7EB;
-  --gray-100: #F3F4F6;
-  --gray-50: #F9FAFB;
-  --blue: #3692FF;
+  --gray-600: #4b5563;
+  --gray-500: #6b7280;
+  --gray-400: #9ca3af;
+  --gray-200: #e5e7eb;
+  --gray-100: #f3f4f6;
+  --gray-50: #f9fafb;
+  --blue: #3692ff;
 }
 
 * {
   box-sizing: border-box;
-}
-
-body {
   margin: 0;
+  padding: 0;
 }
 
-.empty-area {
-  height: 231px;
+.panda-logo-a {
+  margin-top: 60px;
 }
 
-.empty-bottom {
-  height: 407px;
+.join {
+  margin-bottom: 178px;
 }
 
 .hearder {
@@ -106,8 +104,8 @@ body {
 }
 
 .eyes {
-  width: 20.47px;
-  height: 18.07px;
+  width: 20px;
+  height: 18px;
   position: relative;
   top: 5px;
   right: 50px;
@@ -141,3 +139,71 @@ body {
 .join-first {
   color: var(--gray-800);
 }
+
+@media (max-width: 1199px) {
+  .panda-logo-a {
+    margin-top: 48px;
+  }
+
+  .join {
+    margin-bottom: 243px;
+  }
+}
+
+@media (max-width: 766px) {
+  .panda-logo-a {
+    display: block;
+    width: fit-content;
+    margin: 0 auto;
+    margin-top: 24px;
+  }
+
+  .panda-logo-img {
+    width: 198px;
+    height: 66px;
+    margin: 0;
+  }
+
+  .hearder {
+    max-width: 400px;
+    width: 100%;
+  }
+
+  .form label {
+    width: 100%;
+    max-width: 400px;
+    margin-bottom: 8px;
+  }
+
+  .form input {
+    width: 100%;
+    max-width: 400px;
+    margin-bottom: 16px;
+  }
+
+  .password-check-flex {
+    width: 100%;
+    max-width: 400px;
+    margin-bottom: 16px;
+    height: 56px;
+  }
+
+  .form button {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .eyes {
+    top: -95%;
+    left: 85%;
+  }
+
+  .simple-login {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .join {
+    margin-bottom: 179px;
+  }
+}
diff --git a/css/style.css b/css/style.css
index 3fa01541..a7f9ca91 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,5 +1,7 @@
 * {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 body {
@@ -8,6 +10,11 @@ body {
   max-width: 100vw;
 }
 
+main {
+  overflow: hidden;
+  padding-top: 70px;
+}
+
 .nav-flex {
   display: flex;
   justify-content: space-between;
@@ -15,8 +22,8 @@ body {
   padding: 0 200px;
   position: fixed;
   width: 100%;
-  background-color: #ffffff; 
-  z-index: 1;
+  background-color: #ffffff;
+  z-index: 1000;
 }
 
 .panda-logo-image {
@@ -91,11 +98,12 @@ body {
 }
 
 .main-img {
-  width: 55%;
-  max-width: 55%;
+  width: 100%;
+  max-width: 746px;
   height: 21.25rem;
   position: relative;
   top: 12.5rem;
+  object-fit: cover;
 }
 
 .second-page {
@@ -215,169 +223,233 @@ body {
   position: relative;
   top: 3px;
 }
-
-@media (max-width: 1200px) {
+/* Tablet (768px ~ 1199px) */
+@media (max-width: 1199px) {
   .nav-flex {
-    padding: 0 200px;
+    margin: 0;
+    padding: 0 24px;
+  }
+
+  .landing-page {
+    height: 771px;
+  }
+
+  .landing-page-text {
+    width: auto;
+    height: 56px;
+    position: relative;
+    top: 84px;
+    left: 400px;
+    white-space: nowrap;
   }
 
   .large-text {
-    font-size: 2rem;
+    margin-bottom: 24px;
+  }
+  
+  h2.large-text br {
+    display: none;
   }
 
-  .main-img {
-    width: 500px;
-    height: 340px;
+  .see-flex {
+    position: relative;
+    left: 80px;
   }
 
-  .see {
-    font-size: 1rem;
-    width: 300px;
-    height: 50px;
-    display: flex;
-    padding: 16px 60px;
+  .main-list {
+    margin: 24px 24px 0 24px;
   }
 
-  .large-text-last {
-    font-size: 2rem;
+  .main-img {
+    top: 430px;
+    right: 255px;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .second-page {
+    margin: 0;
   }
 
   .second-page img {
-    width: 450px;
-    height: 400px;
+    width: 100%;
+    height: auto;
+    border-radius: 12px;
   }
 
-  .second-page .text-box,
-  .second-page .text-box-search,
-  .second-page .text-box-register {
-    width: 450px;
-    height: 400px;
+  .second-page#hot-item {
+    flex-direction: column;
   }
 
-  
+  .text-box,
+  .text-box-search,
+  .text-box-register {
+    width: 100%;
+    height: auto;
+    margin-top: 24px;
+    padding: 0;
+  }
 
   .event-text {
-    font-size: 1rem;
+    margin-bottom: 16px;
+    font-size: 18px;
   }
 
   .event-large-text {
-    font-size: 2rem;
+    font-size: 32px;
   }
-}
 
-@media (max-width: 1024px) {
-  .nav-flex {
-    padding: 0 100px;
+  .hot-text {
+    margin-top: 24px;
+    font-size: 18px;
   }
 
-  .large-text {
-    font-size: 1.25rem;
+  .event-large-text br {
+    display: none;
   }
 
-  .main-img {
-    width: 400px;
-    margin-left: 50px;
+  .second-page#search {
+    margin-top: 52px;
+    flex-direction: column-reverse;
   }
 
-  .see-flex {
-    width: 200px;
+  .second-page#register {
+    margin-top: 52px;
+    flex-direction: column;
+  }
 
+  .empty-area {
+    height: 56px;
   }
 
-  .see {
-    width: 200px;
-    font-size: 0.75rem;
+  .landing-page-last {
+    width: 100%;
+    height: 927px;
   }
 
-  .landing-page-text {
-    margin-right: 20px;
-    top: 15rem;
+  .reliable {
+    position: relative;
+    left: 50px;
   }
 
   .large-text-last {
-    font-size: 1.25rem;
-    margin: 0;
+    top: 150px;
   }
 
-  .second-page img {
-    width: 300px;
-    height: 250px;
+  .main-img#last {
+    top: 587px;
+    height: 397px;
+    width: 100%;
+    right: 176px;
   }
+}
 
-  .second-page .text-box,
-  .second-page .text-box-search,
-  .second-page .text-box-register {
-    width: 300px;
-    height: 250px;
+@media (max-width: 766px) {
+  .nav-flex {
+    padding: 0 16px;
   }
 
-  
-
-  .event-text {
-    font-size: 0.75rem;
+  .landing-page {
+    height: 540px;
   }
 
-  .event-large-text {
-    font-size: 1.5rem;
+  h2.large-text br {
+    display: block;
   }
-}
 
-@media (max-width: 768px) {
-  .nav-flex {
-    padding: 0 50px;
+  .landing-page-text {
+    width: auto;
+    height: 156px;
+    left: 280px;
   }
 
   .large-text {
-    font-size: 1rem;
+    font-size: 32px;
   }
 
-  .main-img {
-    width: 250px;
-    margin-left: 50px;
+  .deal {
+    position: relative;
+    left: 35px;
   }
 
   .see-flex {
-    width: 170px;
+    position: relative;
+    left: 0;
+  }
+  
+  .event-text {
+    font-size: 16px;
+    white-space: nowrap;
+  }
 
+  .event-large-text {
+    font-size: 24px;
+    white-space: nowrap;
   }
 
-  .see {
-    width: 200px;
-    font-size: 0.75rem;
+  .hot-text {
+    font-size: 16px;
+    white-space: nowrap;
   }
 
-  .landing-page-text {
-    margin-right: 20px;
-    top: 15rem;
+  .see {
+    width: 240px;
+    height: 48px;
   }
 
-  .large-text-last {
-    font-size: 1rem;
-    margin: 0;
+  .main-img {
+    height: 204px;
+    top: 336px;
+    right: 177px;
+    width: 448px;
+    max-width: 448px;
+    object-fit: cover;
   }
 
-  .second-page img {
-    width: 270px;
-    height: 270px;
+  .landing-page-last {
+    width: 100%;
+    height: 540px;
   }
 
-  .second-page .text-box,
-  .second-page .text-box-search,
-  .second-page .text-box-register {
-    width: 270px;
-    height: 270px;
+  .large-text-last {
+    font-size: 32px;
+    top: 0;
+    right: 50px;
   }
 
-  
+  .main-img#last {
+    width: 375px;
+    max-width: 375px;
+    height: 198px;
+    top: 342px;
+    right: 148px;
+  }
 
-  .event-text {
-    font-size: 0.75rem;
+  .reliable {
+    position: relative;
+    left: 40px;
   }
 
-  .event-large-text {
-    font-size: 1.5rem;
+  .design {
+    position: relative;
+    white-space: nowrap;
+    top: 80px;
+    left: 32px;
   }
-}
 
+  .fqa,
+  .last-img {
+    position: relative;
+    right: 78px;
+  }
 
+  .fqa {
+    margin-right: 20px;
+    white-space: nowrap;
+  }
 
+  .last-img {
+    top: 3px;
+    right: 50px;
+  }
+}
diff --git a/index.html b/index.html
index dbe70f8e..6aecdaff 100644
--- a/index.html
+++ b/index.html
@@ -1,32 +1,44 @@
 <!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="stylesheet" href="/css/style.css" />
-    <link
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
-      rel="stylesheet"
-    />
-  </head>
+  <!DOCTYPE html>
+  <html lang="ko">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta property="og:title" content="판다 마켓" />
+      <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+      <meta property="og:image" content="https://rainbow-sunflower-f8c164.netlify.app/assets/example.png" />
+      <meta property="og:url" content="https://rainbow-sunflower-f8c164.netlify.app/" />
+      <meta property="og:type" content="website" />
+      <meta name="twitter:title" content="판다 마켓" />
+      <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요" />
+      <meta name="twitter:image" content="https://rainbow-sunflower-f8c164.netlify.app/assets/example.png" />
+      <meta name="twitter:card" content="summary_large_image" />
+      <title>판다마켓</title>
+      <link rel="stylesheet" href="./css/style.css" />
+      <link
+        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+        rel="stylesheet"
+      />
+    </head>
   <body>
-    <header>
-      <nav class="nav-flex">
-        <a href="/" class="logo"
-          ><img
-            src="./assets/panda-logo.png"
-            alt="panda logo image"
-            class="panda-logo-image"
-        /></a>
-        <a href="./login.html" class="login">로그인</a>
-      </nav>
+    <header class="nav-flex">
+      <a href="/" class="logo"
+        ><img
+          src="./assets/panda-logo.png"
+          alt="panda logo image"
+          class="panda-logo-image"
+      /></a>
+      <a href="./login.html" class="login">로그인</a>
     </header>
 
     <main>
       <div class="landing-page">
         <div class="landing-page-text">
-          <h2 class="large-text">일상의 모든 물건을 <br />거래해보세요</h2>
+          <h2 class="large-text">
+            일상의 모든 물건을 <br />
+            <span class="deal">거래해보세요</span>
+          </h2>
           <div class="see-flex">
             <a href="/items.html" class="see">구경하러 가기</a>
           </div>
@@ -48,7 +60,7 @@ <h2>
                 >인기 상품을 <br />확인해보세요</span
               >
             </h2>
-            <span
+            <span class="hot-text"
               >가장 HOT한 중고거래 물품을<br />판다 마켓에서 확인해 보세요</span
             >
           </div>
@@ -64,7 +76,9 @@ <h2>
                 >구매를 원하는<br />상품을 검색하세요</span
               >
             </h2>
-            <span>구매하고 싶은 물품은 검색해서 <br />쉽게 찾아보세요</span>
+            <span class="hot-text"
+              >구매하고 싶은 물품은 검색해서 <br />쉽게 찾아보세요</span
+            >
           </div>
           <img src="./assets/search.png" alt="A magnifying glass picture" />
         </div>
@@ -84,7 +98,7 @@ <h2>
                 >판매를 원하는 <br />상품을 등록하세요</span
               >
             </h2>
-            <span
+            <span class="hot-text"
               >어떤 물건이든 판매하고 싶은 상품을 <br />쉽게 등록하세요</span
             >
           </div>
@@ -96,13 +110,14 @@ <h2>
       <div class="landing-page-last">
         <div class="landing-page-text">
           <span class="large-text-last">
-            믿을 수 있는<br />판다마켓 중고 거래
+            <span class="reliable">믿을 수 있는</span><br />판다마켓 중고 거래
           </span>
         </div>
         <img
           src="./assets/footer.png"
           alt="A photo of a panda waving its hand"
           class="main-img"
+          id="last"
         />
       </div>
     </main>
diff --git a/login.html b/login.html
index 0c72062c..dc2c0e60 100644
--- a/login.html
+++ b/login.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>판다마켓 로그인</title>
-    <link rel="stylesheet" href="/css/login.css" />
+    <link rel="stylesheet" href="./css/login.css" />
     <link
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
       rel="stylesheet"
@@ -12,12 +12,10 @@
   </head>
   <body>
     <main class="all-elements">
-      <div class="empty-area"></div>
-
       <div class="hearder">
-        <a href="/">
+        <a href="./" class="panda-logo-a">
           <img
-            src="/assets/panda-logo.png"
+            src="./assets/panda-logo.png"
             alt="panda logo image"
             class="panda-logo-img"
           />
@@ -50,14 +48,14 @@
             <div>
               <a href="https://www.google.com" id="google">
                 <img
-                  src="/assets/google.png"
+                  src="./assets/google.png"
                   alt="google logo image"
                   class="google-logo"
                 />
               </a>
               <a href="https://www.kakaocorp.com/page" id="kakao">
                 <img
-                  src="/assets/kakao.png"
+                  src="./assets/kakao.png"
                   alt="kakao logo image"
                   class="kakao-logo"
                 />
@@ -66,11 +64,10 @@
           </div>
           <div class="join">
             <span class="join-first">판다마켓이 처음이신가요?</span>
-            <a href="/signup.html" id="join">회원가입</a>
+            <a href="./signup.html" id="join">회원가입</a>
           </div>
         </div>
       </div>
-      <div class="empty-area"></div>
     </main>
   </body>
 </html>
diff --git a/signup.html b/signup.html
index 7fadb02c..683c3bd8 100644
--- a/signup.html
+++ b/signup.html
@@ -4,19 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>판다마켓 로그인</title>
-    <link rel="stylesheet" href="css/signup.css" />
+    <link rel="stylesheet" href="./css/signup.css" />
     <link
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
       rel="stylesheet"
     />
   </head>
   <body>
-    <div class="empty-area"></div>
     <main class="all-elements">
       <div class="hearder">
-        <a href="/">
+        <a href="./" class="panda-logo-a">
           <img
-            src="/assets/panda-logo.png"
+            src="./assets/panda-logo.png"
             alt="panda logo image"
             class="panda-logo-img"
           />
@@ -68,14 +67,14 @@
             <div>
               <a href="https://www.google.com" id="google">
                 <img
-                  src="/assets/google.png"
+                  src="./assets/google.png"
                   alt="google logo image"
                   class="google-logo"
                 />
               </a>
               <a href="https://www.kakaocorp.com/page" id="kakao">
                 <img
-                  src="/assets/kakao.png"
+                  src="./assets/kakao.png"
                   alt="kakao logo image"
                   class="kakao-logo"
                 />
@@ -84,11 +83,10 @@
           </div>
           <div class="join">
             <span class="join-first">이미 회원이신가요?</span>
-            <a href="/login.html" id="join">로그인</a>
+            <a href="./login.html" id="join">로그인</a>
           </div>
         </div>
       </div>
     </main>
-    <div class="empty-bottom"></div>
   </body>
 </html>