diff --git a/README.md b/README.md
index a668d645..ca69a4cb 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,10 @@
-## 판다마켓 2
+## 판다마켓 3
 
 **🌐 배포 주소 : https://myungjiwoo-pandamarket.netlify.app/**
 
 ### 기본 요구사항
 
 - [x] Github의 PR을 만들어서 미션을 제출한다.
-- [x] Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결한다.
 - [x] 피그마 디자인에 맞게 페이지를 만든다.
 - [x] UI 라이브러리를 사용하지 않고 진행한다.
 
@@ -13,31 +12,39 @@
 
 **공통**
 
-- [x] 아래로 스크롤 해도 상단 navbar가 최상단에 고정된다.
-- [x] "판다마켓" 클릭 시 루트 페이지("/")로 이동한다. (새로고침)
-- [x] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일하다.
-- [x] SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동한다.
+- [x] 브라우저에 현재 보이는 화면의 영역 너비를 기준으로 분기되는 반응형 디자인을 적용한다.
+  - PC: 1200px ~
+  - Tablet: 768px ~ 1199px
+  - Mobile: 375px ~ 767px
+  - 375px 미만 사이즈의 디자인은 고려하지 않는다.
 
-**로그인 페이지**
+**랜딩 페이지**
 
-- [x] "회원가입" 버튼 클릭 시 "/signup" 페이지로 이동한다.
+- [x] Tablet 사이즈로 작아질 때 "판다마켓" 로고의 왼쪽에 여백 "24px", "로그인" 버튼 오른쪽 여백 "24px"을 유지할 수 있도록 "판다마켓" 로고와 "로그인" 버튼의 간격이 가까워진다.
+- [x] Mobile 사이즈로 작아질 때 "판다마켓" 로고의 왼쪽에 여백 "16px", "로그인" 버튼 오른쪽 여백 "16px"을 유지할 수 있도록 "판다마켓" 로고와 "로그인" 버튼의 간격이 가까워진다.
+- [x] 화면 영역이 줄어들면 "Privacy Policy", "FAQ", "codeit-2024"이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어든다.
 
-**회원가입 페이지**
+**로그인, 회원가입 페이지 공통**
 
-- [x] "로그인" 버튼 클릭 시 "/login" 페이지로 이동한다.
+- [x] Tablet 사이즈에서 내부 디자인은 PC 사이즈와 동일하다.
+- [x] Mobile 사이즈에서 좌우 여백 16px을 제외하고 내부 요소들이 너비를 모두 차지한다.
+- [x] Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않는다.
 
 ### 체크 리스트 (심화)
 
-- [x] palette에 있는 color 값들을 css 변수로 등록하고 사용한다.
-- [x] 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가한다.
+- [x] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지("/") 공유 시 미리보기를 볼 수 있는 랜딩 페이지 메타 태그를 설정한다.
+- [x] 미리보기에서 제목은 "판다 마켓", 설명은 "일상의 모든 물건을 거래해보세요"로 설정한다.
+- [x] 주소와 이미지는 자유롭게 설정한다.
 
 ### 지난 코드 리뷰
 
-- [x] notoSans 폰트 삭제. Pretendard 폰트만 사용.
-- [x] 페이지에 대응하는 css 파일을 만들고 내부적으로 해당 페이지 구현을 위해 필요한 css 들을 import하는 방식으로 수정
-      ➡️ 만약 css를 분리할거라면, 분리된 스타일 파일에 media query 문도 추가하기.
-- [x] alt 속성을 이미지 내용이 드러나도록 수정.
-- [x] sns 아이콘들을 list로 마크업.
-- [x] 이미지 파일명 일관성있게 수정.
-- [x] 디자인 구현에 불필요한 값들은 삭제.
-- [x] css에서 소수점 사용 지양.
+- [x] alt 속성명 수정하기 (가능한 해당 이미지를 잘 표현할 수 있는 문자열)
+- [x] favicon 배경 삭제
+- [x] 여백 없이 로고 이미지 추출
+- [x] 이미지, 아이콘 파일 네이밍 수정
+- [x] 태그 간 계층 구조를 명확하게 개행하기
+- [x] 작성한 비밀번호 확인하는 버튼의 이미지 태그를 button 요소로 변경
+- [x] 불필요한 주석 삭제하기
+- [x] 태그 선택자 대신에 class 사용하기
+- [x] 네이밍 규칙 통일하기 (카멜 케이스 vs 파스칼 케이스)
+- [x] 불필요한 import 삭제하기 (reset.css)
diff --git a/images/Img_logo.png b/images/Img_logo.png
deleted file mode 100644
index e9fa4352..00000000
Binary files a/images/Img_logo.png and /dev/null differ
diff --git a/images/Img_home_01.png b/images/home_01.png
similarity index 100%
rename from images/Img_home_01.png
rename to images/home_01.png
diff --git a/images/Img_home_02.png b/images/home_02.png
similarity index 100%
rename from images/Img_home_02.png
rename to images/home_02.png
diff --git a/images/Img_home_03.png b/images/home_03.png
similarity index 100%
rename from images/Img_home_03.png
rename to images/home_03.png
diff --git a/images/img_home_banner_bottom.png b/images/home_banner_bottom.png
similarity index 100%
rename from images/img_home_banner_bottom.png
rename to images/home_banner_bottom.png
diff --git a/images/img_home_banner_top.png b/images/home_banner_top.png
similarity index 100%
rename from images/img_home_banner_top.png
rename to images/home_banner_top.png
diff --git a/images/icon_favicon.ico b/images/icon_favicon.ico
deleted file mode 100644
index c6e5fa9d..00000000
Binary files a/images/icon_favicon.ico and /dev/null differ
diff --git a/images/icon_favicon.png b/images/icon_favicon.png
new file mode 100644
index 00000000..9b5d80aa
Binary files /dev/null and b/images/icon_favicon.png differ
diff --git a/images/btn_visibility_on.png b/images/icon_visibility_on.png
similarity index 100%
rename from images/btn_visibility_on.png
rename to images/icon_visibility_on.png
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 00000000..dbcd40cc
Binary files /dev/null and b/images/logo.png differ
diff --git a/images/preview.png b/images/preview.png
new file mode 100644
index 00000000..9189440c
Binary files /dev/null and b/images/preview.png differ
diff --git a/index.html b/index.html
index 5ef85307..0532d467 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,27 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="title" content="판다 마켓" />
+    <meta name="description" content="일상의 모든 물건을 거래해보세요" />
+    <meta name="keywords" content="판다 마켓, 중고 거래, 일상 물건" />
+    <meta property="og:title" content="판다 마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta
+      property="og:image"
+      content="https://myungjiwoo-pandamarket.netlify.app/images/preview.png"
+    />
+    <meta
+      property="og:url"
+      content="https://myungjiwoo-pandamarket.netlify.app/"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="판다 마켓" />
+    <meta
+      name="twitter:description"
+      content="일상의 모든 물건을 거래해보세요"
+    />
+    <meta name="twitter:image" content="/images/preview.png" />
+
     <link
       rel="stylesheet"
       as="style"
@@ -11,13 +32,13 @@
     />
     <link rel="stylesheet" href="styles/index/index.css" />
     <title>판다마켓</title>
-    <link rel="icon" href="/images/icon_favicon.ico" />
+    <link rel="icon" href="/images/icon_favicon.png" />
   </head>
 
   <body>
     <header>
       <a href="/">
-        <img src="images/img_logo.png" alt="판다마켓 로고" class="image-logo" />
+        <img src="images/logo.png" alt="판다마켓" class="image-logo" />
       </a>
       <a href="login.html">
         <div class="btn-login">로그인</div>
@@ -28,15 +49,15 @@
       <div>
         <div class="banner-content">
           <p class="banner-title">
-            일상의 모든 물건을<br />
-            거래해 보세요
+            <span>일상의 모든 물건을</span>
+            <span>거래해 보세요</span>
           </p>
           <a href="items.html">
             <div class="btn-explore">구경하러 가기</div>
           </a>
         </div>
         <img
-          src="images/img_home_banner_top.png"
+          src="images/home_banner_top.png"
           alt="판다마켓 캐릭터"
           class="image-top-banner"
         />
@@ -45,12 +66,12 @@
 
     <section>
       <div class="section-hot-item">
-        <img src="images/img_home_01.png" alt="인기 상품" />
-        <div>
+        <img src="images/home_01.png" alt="인기 상품" />
+        <div class="left">
           <p class="section-badge">Hot item</p>
           <p class="section-title">
-            인기 상품을<br />
-            확인해 보세요
+            <span>인기 상품을</span>
+            <span>확인해 보세요</span>
           </p>
           <p class="section-content">
             가장 HOT한 중고거래 물품을<br />
@@ -63,21 +84,24 @@
         <div class="right">
           <p class="section-badge">Search</p>
           <p class="section-title">
-            구매를 원하는<br />
-            상품을 검색하세요
+            <span>구매를 원하는</span>
+            <span>상품을 검색하세요</span>
           </p>
           <p class="section-content">
             구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
           </p>
         </div>
-        <img src="images/img_home_02.png" alt="상품 검색" />
+        <img src="images/home_02.png" alt="상품 검색" />
       </div>
 
       <div class="section-register">
-        <img src="images/img_home_03.png" alt="상품 등록" />
-        <div>
+        <img src="images/home_03.png" alt="상품 등록" />
+        <div class="left">
           <p class="section-badge">Register</p>
-          <p class="section-title">판매를 원하는<br />상품을 등록하세요</p>
+          <p class="section-title">
+            <span>판매를 원하는</span>
+            <span>상품을 등록하세요</span>
+          </p>
           <p class="section-content">
             어떤 물건이든 판매하고 싶은 상품을<br />
             쉽게 등록하세요
@@ -90,7 +114,7 @@
       <div>
         <p class="banner-title">믿을 수 있는<br />판다마켓 중고 거래</p>
         <img
-          src="images/img_home_banner_bottom.png"
+          src="images/home_banner_bottom.png"
           alt="판다마켓 캐릭터"
           class="image-bottom-banner"
         />
@@ -128,5 +152,12 @@
         </ul>
       </div>
     </footer>
+
+    <div class="unsupported-screen">
+      <p>
+        지원하지 않는 화면 크기입니다.<br />
+        브라우저의 크기를 넓혀주세요.
+      </p>
+    </div>
   </body>
 </html>
diff --git a/login.html b/login.html
index a022a36d..54169ac0 100644
--- a/login.html
+++ b/login.html
@@ -11,33 +11,39 @@
     />
     <link rel="stylesheet" href="styles/account/account.css" />
     <title>판다마켓 - 로그인</title>
-    <link rel="icon" href="/images/icon_favicon.ico" />
+    <link rel="icon" href="/images/icon_favicon.png" />
   </head>
 
   <body>
-    <div class="loginContainer">
+    <div class="login-container">
       <header>
         <a href="/">
-          <img
-            src="images/img_logo.png"
-            alt="판다마켓 로고"
-            class="image-logo"
-          />
+          <img src="images/logo.png" alt="판다마켓" class="image-logo" />
         </a>
       </header>
 
-      <form>
-        <label>이메일 <input type="email" /></label>
-        <label
-          >비밀번호 <input type="password" /><img
-            src="/images/btn_visibility_on.png"
-            alt="비밀번호 보기"
-            class="passwordVisibilityOn"
-        /></label>
-        <button type="submit">로그인</button>
+      <form class="form-account">
+        <label class="label-account">
+          이메일
+          <input
+            type="email"
+            placeholder="이메일을 입력해주세요"
+            class="input-account"
+          />
+        </label>
+        <label class="label-account">
+          비밀번호
+          <input
+            type="password"
+            placeholder="비밀번호를 입력해주세요"
+            class="input-account password"
+          />
+          <button class="btn-visibility-on"></button>
+        </label>
+        <button class="btn-submit" type="submit">로그인</button>
       </form>
 
-      <div class="SociaLoginContainer">
+      <div class="social-login-container">
         <p>간편 로그인하기</p>
         <ul>
           <li>
@@ -57,5 +63,12 @@
         판다마켓이 처음이신가요? <a href="/signup.html">회원가입</a>
       </p>
     </div>
+
+    <div class="unsupported-screen">
+      <p>
+        지원하지 않는 화면 크기입니다.<br />
+        브라우저의 크기를 넓혀주세요.
+      </p>
+    </div>
   </body>
 </html>
diff --git a/signup.html b/signup.html
index 3ca4f5cb..ed2f2087 100644
--- a/signup.html
+++ b/signup.html
@@ -11,42 +11,56 @@
     />
     <link rel="stylesheet" href="styles/account/account.css" />
     <title>판다마켓 - 회원가입</title>
-    <link rel="icon" href="/images/icon_favicon.ico" />
+    <link rel="icon" href="/images/icon_favicon.png" />
   </head>
 
   <body>
-    <div class="loginContainer">
+    <div class="login-container">
       <header>
         <a href="/">
-          <img
-            src="images/img_logo.png"
-            alt="판다마켓 로고"
-            class="image-logo"
-          />
+          <img src="images/logo.png" alt="판다마켓" class="image-logo" />
         </a>
       </header>
 
-      <form>
-        <label>이메일 <input type="email" /></label>
-        <label>닉네임 <input type="text" /></label>
-        <label
-          >비밀번호 <input type="password" />
-          <img
-            src="/images/btn_visibility_on.png"
-            alt="비밀번호 보기"
-            class="passwordVisibilityOn"
+      <form class="form-account">
+        <label class="label-account">
+          이메일
+          <input
+            type="email"
+            placeholder="이메일을 입력해주세요"
+            class="input-account"
+          />
+        </label>
+        <label class="label-account">
+          닉네임
+          <input
+            type="text"
+            placeholder="닉네임을 입력해주세요"
+            class="input-account"
+          />
+        </label>
+        <label class="label-account">
+          비밀번호
+          <input
+            type="password"
+            placeholder="비밀번호를 입력해주세요"
+            class="input-account password"
           />
+          <button class="btn-visibility-on"></button>
         </label>
-        <label
-          >비밀번호 확인 <input type="password" /><img
-            src="/images/btn_visibility_on.png"
-            alt="비밀번호 보기"
-            class="passwordVisibilityOn"
-        /></label>
-        <button type="submit">회원가입</button>
+        <label class="label-account">
+          비밀번호 확인
+          <input
+            type="password"
+            placeholder="비밀번호를 다시 입력해주세요"
+            class="input-account password"
+          />
+          <button class="btn-visibility-on"></button>
+        </label>
+        <button class="btn-submit" type="submit">회원가입</button>
       </form>
 
-      <div class="SociaLoginContainer">
+      <div class="social-login-container">
         <p>간편 로그인하기</p>
         <ul>
           <li>
@@ -64,5 +78,12 @@
 
       <p class="footer">이미 회원이신가요? <a href="/login.html">로그인</a></p>
     </div>
+
+    <div class="unsupported-screen">
+      <p>
+        지원하지 않는 화면 크기입니다.<br />
+        브라우저의 크기를 넓혀주세요.
+      </p>
+    </div>
   </body>
 </html>
diff --git a/styles/account/account.css b/styles/account/account.css
index cd77ed15..4e5dc45c 100644
--- a/styles/account/account.css
+++ b/styles/account/account.css
@@ -1,4 +1,3 @@
-@import url(/styles/reset.css);
 @import url(/styles/base.css);
 
 @import url(/styles/account/header.css);
@@ -6,7 +5,6 @@
 @import url(/styles/account/soicalLogin.css);
 @import url(/styles/account/footer.css);
 
-@import url(/styles/account/accountTablet.css);
 @import url(/styles/account/accountPhone.css);
 
 body {
diff --git a/styles/account/accountPhone.css b/styles/account/accountPhone.css
index a681ace3..b2ef9e2a 100644
--- a/styles/account/accountPhone.css
+++ b/styles/account/accountPhone.css
@@ -1,8 +1,8 @@
-/* 반응형 : 핸드폰 */
-@media screen and (max-width: 767px) {
-  .loginContainer {
-    width: 60%;
-    min-width: 14rem;
+@media screen and (min-width: 375px) and (max-width: 767px) {
+  .login-container {
+    width: 100%;
+    max-width: 25rem;
+    padding: 0 1rem;
   }
 
   .image-logo {
diff --git a/styles/account/accountTablet.css b/styles/account/accountTablet.css
deleted file mode 100644
index 11da930f..00000000
--- a/styles/account/accountTablet.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/* 반응형 : 타블릿 */
-@media screen and (min-width: 768px) and (max-width: 1100px) {
-  .loginContainer {
-    width: 60%;
-  }
-
-  .image-logo {
-    width: 20rem;
-  }
-}
diff --git a/styles/account/form.css b/styles/account/form.css
index fa03ed5f..55d79977 100644
--- a/styles/account/form.css
+++ b/styles/account/form.css
@@ -1,4 +1,4 @@
-form {
+.form-account {
   width: 100%;
   margin-top: 40px;
   display: flex;
@@ -6,7 +6,7 @@ form {
   gap: 24px;
 }
 
-label {
+.label-account {
   display: flex;
   flex-direction: column;
   position: relative;
@@ -17,7 +17,7 @@ label {
   line-height: 26px;
 }
 
-input {
+.input-account {
   margin-top: 16px;
   padding: 16px 24px;
 
@@ -31,15 +31,15 @@ input {
   background-color: var(--gray100);
 }
 
-input:focus {
+.input-account:focus {
   outline: none;
 }
 
-input[type="password"] {
+.password {
   padding-right: 52px;
 }
 
-button {
+.btn-submit {
   width: 100%;
   padding: 1rem 0;
   border-radius: 2.5rem;
@@ -53,14 +53,19 @@ button {
   cursor: pointer;
 }
 
-.passwordVisibilityOn {
+.btn-visibility-on {
   width: 1.5rem;
   height: 1.5rem;
 
+  background-image: url("/images/icon_visibility_on.png");
+  background-color: transparent;
+  background-size: contain;
+  background-repeat: no-repeat;
+  border: none;
+  outline: none;
+
   position: absolute;
   right: 1.5rem;
   top: calc(1.375rem + 50%);
   transform: translateY(-50%);
-
-  cursor: pointer;
 }
diff --git a/styles/account/header.css b/styles/account/header.css
index e4cdd11f..4b9e5fa8 100644
--- a/styles/account/header.css
+++ b/styles/account/header.css
@@ -1,4 +1,4 @@
-.loginContainer {
+.login-container {
   width: 40rem;
   display: flex;
   flex-direction: column;
diff --git a/styles/account/soicalLogin.css b/styles/account/soicalLogin.css
index c50c310b..11adbd51 100644
--- a/styles/account/soicalLogin.css
+++ b/styles/account/soicalLogin.css
@@ -1,4 +1,4 @@
-.SociaLoginContainer {
+.social-login-container {
   width: 100%;
   padding: 1rem 1.5rem;
   margin-top: 1.5rem;
@@ -9,18 +9,18 @@
   background-color: #e6f2ff;
 }
 
-.SociaLoginContainer > p {
+.social-login-container > p {
   color: var(--gray800);
   font-size: 1rem;
   font-weight: 500;
 }
 
-.SociaLoginContainer > ul {
+.social-login-container > ul {
   display: flex;
   gap: 1rem;
 }
 
-.SociaLoginContainer > ul img {
+.social-login-container > ul img {
   width: 2.625rem;
   height: 2.625rem;
 }
diff --git a/styles/base.css b/styles/base.css
index 133dd721..5bbadf5f 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -1,4 +1,5 @@
 @import url(/styles/reset.css);
+@import url("/styles/unsupportedScreen.css");
 
 :root {
   --blue: #3692ff;
@@ -23,3 +24,11 @@ body {
 * {
   transition: all 300ms ease-in-out;
 }
+
+button {
+  cursor: pointer;
+}
+
+.unsupported-screen {
+  display: none;
+}
diff --git a/styles/index/banner.css b/styles/index/banner.css
index bb2b93ec..8b6f7fc5 100644
--- a/styles/index/banner.css
+++ b/styles/index/banner.css
@@ -3,9 +3,9 @@
   width: 100%;
   padding-top: 12.5rem;
 
-  display: flex;
+  /* display: flex;
   justify-content: center;
-  align-items: flex-end;
+  align-items: flex-end; */
 
   background-color: var(--blue100);
 }
@@ -34,6 +34,10 @@
   flex-shrink: 0;
 }
 
+.banner-title > span {
+  display: inline-block;
+}
+
 .btn-explore {
   width: 100%;
   border-radius: 2.5rem;
diff --git a/styles/index/indexPhone.css b/styles/index/indexPhone.css
index 3869d73f..bc35076e 100644
--- a/styles/index/indexPhone.css
+++ b/styles/index/indexPhone.css
@@ -1,8 +1,7 @@
-/* 반응형 : 핸드폰 (모바일의 0.6배) */
-@media screen and (max-width: 767px) {
+@media screen and (min-width: 375px) and (max-width: 767px) {
   /* header */
   header {
-    padding: 0.625rem 4.5rem;
+    padding: 0.625rem 1rem;
   }
 
   .image-logo {
@@ -20,66 +19,100 @@
     padding-top: 4rem;
   }
 
+  .home-top-banner > div {
+    flex-direction: column;
+  }
+
+  .banner-content {
+    width: 12rem;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+  }
+
   .banner-title,
   .section-title {
-    font-size: 1rem;
-    line-height: 1.25rem;
+    font-size: 1.5rem;
+    text-align: center;
+    line-height: 2rem;
   }
 
   .image-top-banner {
-    width: 16.75rem;
+    width: 80%;
     height: auto;
-  }
-
-  .banner-content {
-    width: 8rem;
+    margin-top: 4rem;
   }
 
   .btn-explore {
-    padding: 0.5rem;
-    margin-top: 0.625rem;
-    font-size: 0.75rem;
+    width: 12rem;
+    padding: 0.5rem 0;
+    margin-top: 0;
+    font-size: 0.875rem;
   }
 
   .bottom-banner {
-    padding-top: 3.75rem;
+    padding-top: 4rem;
+  }
+
+  .bottom-banner > div {
+    flex-direction: column;
   }
 
   .image-bottom-banner {
-    width: 15rem;
+    width: 80%;
     height: auto;
+    margin-top: 5rem;
   }
 
   /* section */
+  section {
+    margin: 0;
+    padding: 3rem 0;
+    background-color: #fcfcfc;
+  }
+
   .section-hot-item,
   .section-search,
   .section-register {
-    width: 26.25rem;
-    height: 10rem;
-    margin: 3rem 0;
-    gap: 0.9rem;
+    width: 100%;
+    height: fit-content;
+    margin: 0;
+    padding: 1rem;
+
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+  }
+
+  .section-search {
+    flex-direction: column-reverse;
+    align-items: flex-end;
   }
 
   section img {
-    width: 13.375rem;
-    height: 9.9375rem;
+    border-radius: 1rem;
+    width: 100%;
+    height: auto;
   }
 
   .section-badge {
-    margin-bottom: 0.56rem;
-    font-size: 0.625rem;
-    line-height: 0.75rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1rem;
   }
 
   .section-content {
-    margin-top: 0.75rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
   }
 
   /* footer */
   footer {
-    padding: 1.1875rem 0 4rem;
+    padding: 1.25rem 0 4rem;
+    position: relative;
   }
 
   footer > div {
@@ -87,15 +120,18 @@
   }
 
   .footer-company {
-    font-size: 0.75rem;
+    font-size: 0.875rem;
+    position: absolute;
+    bottom: 1.25rem;
   }
 
   .footer-links {
-    gap: 0.625rem;
+    font-size: 0.875rem;
+    gap: 0.875rem;
   }
 
   .footer-sns {
-    gap: 0.3125rem;
+    gap: 0.5rem;
   }
 
   .footer-links > a,
diff --git a/styles/index/indexTablet.css b/styles/index/indexTablet.css
index e2520170..e7087049 100644
--- a/styles/index/indexTablet.css
+++ b/styles/index/indexTablet.css
@@ -1,74 +1,107 @@
-/* 반응형 : 타블릿 (PC의 0.6배) */
-@media screen and (min-width: 768px) and (max-width: 1100px) {
+@media screen and (min-width: 768px) and (max-width: 1199px) {
   /* header */
   header {
-    padding: 0.625rem 7.5rem;
-  }
-
-  .btn-login {
-    width: 4.75rem;
-    height: 2.5rem;
+    padding: 0.625rem 1.5rem;
   }
 
   /* banner */
   .home-top-banner {
-    padding-top: 7.5rem;
+    padding-top: 5rem;
+  }
+
+  .home-top-banner > div {
+    flex-direction: column;
+  }
+
+  .banner-content {
+    width: fit-content;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
   }
 
   .banner-title,
   .section-title {
-    font-size: 1.5rem;
+    white-space: nowrap;
+    font-size: 2rem;
     line-height: 2rem;
   }
 
-  .image-top-banner {
-    width: 27.9375rem;
-    height: auto;
+  .banner-title {
+    font-size: 2.5rem;
+    text-align: center;
+    line-height: 3.5rem;
   }
 
-  .banner-content {
-    width: 13.375rem;
+  .image-top-banner {
+    width: 80%;
+    height: auto;
+    margin-top: 7rem;
   }
 
   .btn-explore {
+    width: 15rem;
+    margin: 0;
     padding: 0.625rem;
-    margin-top: 0.625rem;
   }
 
   .bottom-banner {
-    padding-top: 6.25rem;
+    padding-top: 5rem;
+  }
+
+  .bottom-banner > div {
+    flex-direction: column;
   }
 
   .image-bottom-banner {
-    width: 25rem;
+    width: 80%;
     height: auto;
+    margin-top: 7rem;
   }
 
   /* section */
+  section {
+    margin: 0;
+    padding: 5rem 0;
+    background-color: #fcfcfc;
+  }
+
   .section-hot-item,
   .section-search,
   .section-register {
-    width: 37.5rem;
-    height: 16.625rem;
-    margin: 5.125rem 0;
-    gap: 1.875rem;
+    width: 100%;
+    height: fit-content;
+    margin: 0;
+    padding: 1.5rem;
+
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+  }
+
+  .section-search {
+    flex-direction: column-reverse;
+    align-items: flex-end;
   }
 
   section img {
-    width: 22.375rem;
-    height: 16.625rem;
+    border-radius: 1rem;
+    width: 100%;
+    height: auto;
   }
 
   .section-badge {
-    margin-bottom: 0.4rem;
-    font-size: 0.75rem;
+    margin-bottom: 1rem;
+    font-size: 1rem;
     line-height: 1rem;
   }
 
   .section-content {
-    margin-top: 0.875rem;
-    font-size: 0.875rem;
-    line-height: 1.1875rem;
+    margin-top: 1rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
   }
 
   /* footer */
diff --git a/styles/index/section.css b/styles/index/section.css
index cd79026e..57bcc3b6 100644
--- a/styles/index/section.css
+++ b/styles/index/section.css
@@ -45,6 +45,10 @@ section img {
   color: var(--blue);
 }
 
+.section-title > span {
+  display: inline-block;
+}
+
 .section-content {
   margin-top: 1.5rem;
 
diff --git a/styles/unsupportedScreen.css b/styles/unsupportedScreen.css
new file mode 100644
index 00000000..68642237
--- /dev/null
+++ b/styles/unsupportedScreen.css
@@ -0,0 +1,28 @@
+@media screen and (max-width: 374px) and (min-width: 0px) {
+  body .unsupported-screen {
+    width: 100vw;
+    height: 100vh;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: blur(1rem);
+  }
+
+  .unsupported-screen > p {
+    padding: 1rem 2rem;
+    border-radius: 1rem;
+    background-color: white;
+    color: var(--blue);
+    font-size: 5vw;
+    line-height: 7vw;
+    white-space: nowrap;
+    text-align: center;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+  }
+}