diff --git a/README.md b/README.md
index c25d1702..90542066 100644
--- a/README.md
+++ b/README.md
@@ -1,74 +1,72 @@
-# 02. 스프린트 미션 2
+# 03. 스프린트 미션 3
 
 ## 요구사항
 
-### 스프린트 미션 2 시안
+### 스프린트 미션 3 시안
 
-- [실습 과제 디자인 Figma](https://www.figma.com/design/IVkRlYWHY74QlgmxqA99Ym/%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8-%EB%AF%B8%EC%85%98?node-id=18-2760&t=A7sb11LEwIRA2krc-1)
+- [실습 과제 디자인 Figma](https://www.figma.com/design/IVkRlYWHY74QlgmxqA99Ym/%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8-%EB%AF%B8%EC%85%98?node-id=63-3453)
 
 ### 기본 요구사항
 
 - [x] 피그마 디자인에 맞게 페이지 생성 및 UI 라이브러리 미사용
 - [x] HTML, CSS 파일을 Netlify로 배포
-  - 링크: https://fe-14-sprint-mission-1-basic-lsj.netlify.app/
-- [x] PC사이즈만 고려해 주어진 디자인으로 구현
+  - 링크: https://fe-14-sprint-mission-basic-lsj.netlify.app/
 
 ### 체크리스트 [기본]
 
-- 페이지 이동
-  - [x] "판다마켓" 클릭 시 루트 페이지('/')로 이동
-  - [x] '로그인' 버튼 클릭 시 로그인 페이지('/login')로 이동
-  - [x] SNS 아이콘 클릭 시 각각 실제 서비스 홈페이지로 이동
-  - [x] 로그인 페이지 내 [회원가입] 버튼 클릭 시 "/signup" 페이지로 이동
-  - [x] 회원가입 페이지 내 [로그인] 버튼 클릭 시 "/login" 페이지로 이동
+#### 공통
+- [x] 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
+  - PC: 1200px ~
+  - Tablet: 768px ~ 1199px
+  - Mobile: 375px ~ 767px
 
-- 여백
-  - [x] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백 동일
-
-- 스타일
-  - [x] input 요소 focus in 시 `border-color: #3692FF;` 지정
-  - [x] input 요소 focus out 시 `border: none`
+#### 랜딩 페이지
+- [x] 헤더 좌우 여백 수정
+  - Tablet: 24px
+  - Mobile: 16px
+- [x] 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
 
+#### 로그인, 회원가입 페이지
+- [x] Tablet: 내부 디자인은 PC사이즈와 동일
+- [x] Mobile: 좌우 여백 16px, 내부 요소들이 너비를 모두 차지
+- [x] Mobile: 내부 요소 `max-width: 400px`
 
 ### 체크리스트 [심화]
 
-- [x] palette에 있는 color 값을 css 변수로 등록하고 사용
-- [x] 비밀번호 input 요소 위에 비밀번호 확인 아이콘 추가
-
+- [x] SNS에 랜딩 페이지(“/”) 공유 시 미리보기를 볼 수 있도록 메타 태그 설정
+- [x] 미리보기 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정
 
 ## 주요 변경사항
 
-### 스프린트 미션 1 리뷰 반영
-- `<html lang="ko">`으로 수정
-- `a`, `button` 중첩 사용 제거
-- `h1`은 페이지에 하나만 사용
-
-### 스프린트 미션 2
-- [login.html](./login.html)
-  - 로그인 폼 추가
-  - 로그인 페이지 스타일 생성 ([/styles/login.css](./styles/login.css))
-  - script 파일 추가: 로그인 버튼 활성화 및 비밀번호 보기 로직 생성 ([./scripts/login.js](/scripts/login.js))
-- [signup.html](./signup.html)
-  - 회원가입 폼 추가
-  - 회원가입 페이지 스타일 생성: [/styles/signup.css](./styles/signup.css)
-  - script 파일 추가: 회원가입 버튼 활성화 및 비밀번호 보기 로직 생성 ([/scripts/signup.js](./scripts/signup.js))
+### 스프린트 미션 2 리뷰 반영
+- [login.js](./scripts/login.js), [signup.js](./scripts/signup.js)
+  - 변수 지정 및 함수명 변경을 통한 가독성 확보
+- [login.html](./login.html), [signup.html](./signup.html)
+  - `<p>` 태그는 문단을 나타낼 때만 사용으로 변경
+  - 비밀번호 확인 `<input type="checkbox" />`에서 `<button type="button" />`사용으로 변경
+- [login.css](./styles/login.css), [signup.css](./styles/signup.css)
+  - `signup.css`의 중복되는 스타일 제거
+
+### 스프린트 미션 3
+- 
 
 ## 스크린샷
 
-### 로그인
-![desktop-page-image-login](./assets/screenshot/login-page-desktop.png)
+### 랜딩 페이지 헤더 - Tablet
+![tablet-page-image-landing-page](./assets/screenshot/landing-page-tablet.png)
 
-### 회원가입
-![desktop-page-image-signup](./assets/screenshot/signup-page-desktop.png)
+### 랜딩 페이지 헤더 - Mobile
+![mobile-page-image-landing-page](./assets/screenshot/landing-page-mobile.png)
 
-## 멘토에게
+### 로그인 - Tablet
+![tablet-page-image-login](./assets/screenshot/login-page-tablet.png)
+
+### 회원가입 - Mobile
+![mobile-page-image-signup](./assets/screenshot/signup-page-mobile.png)
 
-- 로그인 페이지를 제작한 후에, html 파일과 css 파일을 복사 붙여넣기 하여 회원가입 페이지를 생성하였습니다. <br />로그인 페이지와 회원가입 페이지에 중복되는 스타일을 제거 혹은 파일로 합치고 싶은데 어떻게 처리하는 게 가장 효율적이고 좋을까요?
+### 랜딩 페이지 공유
+![open-graph-image-landing-page](./assets/screenshot/landing-page-open-graph.jpg)
 
-  1) `login.css` , `signup.css` 파일에서 공통되는 스타일을 제거한다.<br/>
-  : 예시로 form 그리드, 인풋, 버튼, SNS 로그인 스타일 등 통일되는 스타일을 담은 `form.css` 파일을 제작하여,<br/>
-  `login.html` 페이지와 `signup.html` 페이지에서 공동으로 사용하고, <br/>
-  각각 추가적인 스타일은 따로 파일을 생성해 추가한다.
-  2) `login.html` 페이지와 `signup.html` 페이지가 하나의 css 파일을 함께 사용한다.
+## 멘토에게
 
-- `global.css` 파일에 사용하지 않는 공통 스타일은 제거하는 것이 좋을까요? <br/>아니면 스타일 가이드를 위해 남겨 놓는 것이 좋을까요?
\ No newline at end of file
+- 
\ No newline at end of file
diff --git a/assets/screenshot/landing-page-mobile.png b/assets/screenshot/landing-page-mobile.png
new file mode 100644
index 00000000..a45d497b
Binary files /dev/null and b/assets/screenshot/landing-page-mobile.png differ
diff --git a/assets/screenshot/landing-page-open-graph.jpg b/assets/screenshot/landing-page-open-graph.jpg
new file mode 100644
index 00000000..ed34451b
Binary files /dev/null and b/assets/screenshot/landing-page-open-graph.jpg differ
diff --git a/assets/screenshot/landing-page-tablet.png b/assets/screenshot/landing-page-tablet.png
new file mode 100644
index 00000000..449d9d23
Binary files /dev/null and b/assets/screenshot/landing-page-tablet.png differ
diff --git a/assets/screenshot/login-page-tablet.png b/assets/screenshot/login-page-tablet.png
new file mode 100644
index 00000000..74fb829e
Binary files /dev/null and b/assets/screenshot/login-page-tablet.png differ
diff --git a/assets/screenshot/signup-page-mobile.png b/assets/screenshot/signup-page-mobile.png
new file mode 100644
index 00000000..7f9052e5
Binary files /dev/null and b/assets/screenshot/signup-page-mobile.png differ
diff --git a/assets/thumbnail/open-graph-thumbnail.png b/assets/thumbnail/open-graph-thumbnail.png
new file mode 100644
index 00000000..9bb2d5b6
Binary files /dev/null and b/assets/thumbnail/open-graph-thumbnail.png differ
diff --git a/index.html b/index.html
index 97c46be6..527a3d7c 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,13 @@
   <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="%PUBLIC_URL%/assets/images/thumbnail/open-graph-thumbnail.png"
+    />
+    <meta property="og:url" content="https://fe-14-sprint-mission-basic-lsj.netlify.app/" />
     <title>판다 마켓</title>
     <link rel="icon" href="assets/images/logo/favicon.ico" />
     <link
diff --git a/login.html b/login.html
index c15ec822..c13877f1 100644
--- a/login.html
+++ b/login.html
@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="styles/login.css" />
   </head>
   <body>
-    <main class="form-wrapper flex-center gap-40" id="login">
+    <main class="form-wrapper flex-center gap-40" id="members">
       <a href="/">
         <img src="assets/images/logo/panda-market-logo.png" alt="로고 이미지" id="logo" />
       </a>
@@ -30,12 +30,12 @@
           <label for="pwd" class="text-2lg text-bold">비밀번호</label>
           <div class="input-wrapper flex-sides radius-12">
             <input id="pwd" type="password" value="" placeholder="비밀번호를 입력해주세요" />
-            <input type="checkbox" alt="비밀번호 확인" id="visibility"  />
+            <button type="button" alt="비밀번호 입력 보기" id="visibility"  />
           </div>
         </div>
-        <button type="submit" id="btn-submit" disabled>로그인</button>
+        <button type="submit" id="btn-submit-login" disabled>로그인</button>
         <div class="flex-sides radius-8" id="sns-login-wrapper">
-          <p class="text-lg text-medium">간편 로그인 하기</p>
+          <div class="text-lg text-medium">간편 로그인 하기</div>
           <ul id="sns-login" class="flex-right gap-16">
             <li>
               <a href="">
diff --git a/scripts/login.js b/scripts/login.js
index 6d367325..cb7eab16 100644
--- a/scripts/login.js
+++ b/scripts/login.js
@@ -1,16 +1,36 @@
-// 비밀번호 확인 버튼 클릭 로직
-document.getElementById("visibility").addEventListener("change", onVisibilityChange);
+const emailInputField = document.getElementById("email");
+const pwdInputField = document.getElementById("pwd");
+const visiblilityBtn = document.getElementById("visibility");
+const loginBtn = document.getElementById("btn-submit-login");
+
+visiblilityBtn.addEventListener("click", onVisibilityChange);
+
+emailInputField.addEventListener("change", onLoginInputChange);
+pwdInputField.addEventListener("change", onLoginInputChange);
+
+/**
+ * 비밀번호 입력 보기 버튼 클릭 로직
+ * @param {*} e - 클릭 이벤트
+ */
 function onVisibilityChange(e) {
-  const value = e.target.checked;
-  if (value) document.getElementById("pwd").setAttribute("type", "text");
-  else document.getElementById("pwd").setAttribute("type", "password");
+  if (e.target.classList.value.includes("checked")) {
+    visiblilityBtn.classList.remove("checked");
+    pwdInputField.setAttribute("type", "password");
+  } else {
+    visiblilityBtn.classList.add("checked");
+    pwdInputField.setAttribute("type", "text");
+  }
 }
-// 로그인 버튼 활성화 로직
-document.getElementById("email").addEventListener("change", onchange);
-document.getElementById("pwd").addEventListener("change", onchange);
-function onchange() {
-  const email = document.getElementById("email").value;
-  const pwd = document.getElementById("pwd").value;
-  if (email && pwd) document.getElementById("btn-submit").removeAttribute("disabled");
-  else document.getElementById("btn-submit").setAttribute("disabled", "true");
+
+/**
+ * 로그인 버튼 활성화 로직
+ */
+function onLoginInputChange() {
+  if (!loginBtn) return;
+  const email = emailInputField.value;
+  const pwd = pwdInputField.value;
+
+  // TODO: 입력 체크 로직
+  if (email && pwd) loginBtn.removeAttribute("disabled");
+  else loginBtn.setAttribute("disabled", "true");
 }
diff --git a/scripts/signup.js b/scripts/signup.js
index 452b777e..ab1f4ca6 100644
--- a/scripts/signup.js
+++ b/scripts/signup.js
@@ -1,27 +1,40 @@
-// 비밀번호 확인 버튼 클릭 로직
-document.getElementById("visibility").addEventListener("change", onVisibilityChange);
-function onVisibilityChange(e) {
-  const value = e.target.checked;
-  if (value) document.getElementById("pwd").setAttribute("type", "text");
-  else document.getElementById("pwd").setAttribute("type", "password");
-}
-document.getElementById("visibility-again").addEventListener("change", onVisibilityAgainChange);
+const nicknameInputField = document.getElementById("nickname");
+const pwdCheckInputField = document.getElementById("pwd-check");
+const visiblilityAgainBtn = document.getElementById("visibility-again");
+const signupBtn = document.getElementById("btn-submit-signup");
+
+visiblilityAgainBtn.addEventListener("click", onVisibilityAgainChange);
+
+emailInputField.addEventListener("change", onSignupInputChange);
+nicknameInputField.addEventListener("change", onSignupInputChange);
+pwdInputField.addEventListener("change", onSignupInputChange);
+pwdCheckInputField.addEventListener("change", onSignupInputChange);
+
+/**
+ * 비밀번호 확인 입력 보기 버튼 클릭 로직
+ * @param {*} e - 클릭 로직
+ */
 function onVisibilityAgainChange(e) {
-  const value = e.target.checked;
-  if (value) document.getElementById("pwd-check").setAttribute("type", "text");
-  else document.getElementById("pwd-check").setAttribute("type", "password");
+  if (e.target.classList.value.includes("checked")) {
+    visiblilityAgainBtn.classList.remove("checked");
+    pwdCheckInputField.setAttribute("type", "password");
+  } else {
+    visiblilityAgainBtn.classList.add("checked");
+    pwdCheckInputField.setAttribute("type", "text");
+  }
 }
-// 로그인 버튼 활성화 로직
-document.getElementById("email").addEventListener("change", onchange);
-document.getElementById("nickname").addEventListener("change", onchange);
-document.getElementById("pwd").addEventListener("change", onchange);
-document.getElementById("pwd-check").addEventListener("change", onchange);
-function onchange() {
-  const email = document.getElementById("email").value;
-  const nickname = document.getElementById("nickname").value;
-  const pwd = document.getElementById("pwd").value;
-  const pwdCheck = document.getElementById("pwd-check").value;
-  if (email && nickname && pwd && pwd === pwdCheck)
-    document.getElementById("btn-submit").removeAttribute("disabled");
-  else document.getElementById("btn-submit").setAttribute("disabled", "true");
+
+/**
+ * 회원가입 버튼 활성화 로직
+ */
+function onSignupInputChange() {
+  if (!signupBtn) return;
+  const email = emailInputField.value;
+  const nickname = nicknameInputField.value;
+  const pwd = pwdInputField.value;
+  const pwdCheck = pwdCheckInputField.value;
+
+  // TODO: 입력 체크 로직
+  if (email && nickname && pwd && pwd === pwdCheck) signupBtn.removeAttribute("disabled");
+  else signupBtn.setAttribute("disabled", "true");
 }
diff --git a/signup.html b/signup.html
index 06bdfdcf..8ea5f694 100644
--- a/signup.html
+++ b/signup.html
@@ -12,10 +12,11 @@
       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/login.css" />
     <link rel="stylesheet" href="styles/signup.css" />
   </head>
   <body>
-    <main class="form-wrapper flex-center gap-40" id="signup">
+    <main class="form-wrapper flex-center gap-40" id="members">
       <a href="/">
         <img src="assets/images/logo/panda-market-logo.png" alt="로고 이미지" id="logo" />
       </a>
@@ -36,19 +37,19 @@
           <label for="pwd" class="text-2lg text-bold">비밀번호</label>
           <div class="input-wrapper flex-sides radius-12">
             <input id="pwd" type="password" value="" placeholder="비밀번호를 입력해주세요" />
-            <input type="checkbox" alt="비밀번호 확인" id="visibility"  />
+            <button type="button" alt="비밀번호 입력 보기" id="visibility"  />
           </div>
         </div>
         <div class="input-field grid gap-16">
-          <label for="pwd-check" class="text-2lg text-bold">비밀번호</label>
+          <label for="pwd-check" class="text-2lg text-bold">비밀번호 확인</label>
           <div class="input-wrapper flex-sides radius-12">
             <input id="pwd-check" type="password" value="" placeholder="비밀번호를 다시 한 번 입력해주세요" />
-            <input type="checkbox" alt="비밀번호 확인" id="visibility-again"  />
+            <button type="button" alt="비밀번호 확인 입력 보기" id="visibility-again"  />
           </div>
         </div>
-        <button type="submit" id="btn-submit" disabled>회원가입</button>
+        <button type="submit" id="btn-submit-signup" disabled>회원가입</button>
         <div class="flex-sides radius-8" id="sns-login-wrapper">
-          <p class="text-lg text-medium">간편 로그인 하기</p>
+          <div class="text-lg text-medium">간편 로그인 하기</div>
           <ul id="sns-login" class="flex-right gap-16">
             <li>
               <a href="https://www.google.com/">
@@ -68,6 +69,7 @@
         </p>
       </form>
     </main>
+    <script src="./scripts/login.js"></script>
     <script src="./scripts/signup.js"></script>
   </body>
 </html>
diff --git a/styles/global.css b/styles/global.css
index 6afb200b..c684e199 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -79,7 +79,7 @@ h1,
   font-size: 24px;
   line-height: 32px;
 }
-@media (width < 1110px) {
+@media (width < 1200px) {
   /* Tablet */
   .text-2xl {
     font-size: 18px;
diff --git a/styles/home.css b/styles/home.css
index f744c62d..08fb3b7f 100644
--- a/styles/home.css
+++ b/styles/home.css
@@ -25,7 +25,7 @@ header .wrapper .left a {
 header .wrapper a.button {
   width: 128px;
 }
-@media (width < 1110px) {
+@media (width < 1200px) {
   /* Tablet */
   header .wrapper {
     margin: 0 24px;
@@ -33,6 +33,9 @@ header .wrapper a.button {
 }
 @media (width < 768px) {
   /* Mobile */
+  header .wrapper {
+    margin: 0 16px;
+  }
   header .wrapper .left img {
     display: none;
   }
@@ -64,7 +67,7 @@ main #bottom-banner {
   padding-top: 143px;
   gap: 70px;
 }
-@media (width < 1110px) {
+@media (width < 1200px) {
   /* Tablet */
   main .banner {
     padding-top: 84px;
@@ -178,7 +181,7 @@ footer .wrapper ul li {
   width: 20px;
   height: 20px;
 }
-@media (width < 1110px) {
+@media (width < 1200px) {
   /* Tablet */
   footer {
     padding: 32px 24px;
diff --git a/styles/login.css b/styles/login.css
index 0708945c..d83fde0a 100644
--- a/styles/login.css
+++ b/styles/login.css
@@ -1,23 +1,21 @@
-main#login {
+main#members {
   min-height: 100vh;
   flex-direction: column;
 }
-main#login input,
-main#login p {
+main#members input,
+main#members p {
   color: #1f2937;
 }
-main#login img#logo {
+main#members img#logo {
   height: 132px;
   margin: 60px 0 0;
 }
-main#login > form {
+main#members > form {
   width: 640px;
   margin: 0 0 60px;
+  justify-content: stretch;
 }
 /* Input Field */
-.input-field {
-  width: 640px;
-}
 .input-wrapper {
   gap: 10px;
   padding: 16px 24px;
@@ -44,12 +42,13 @@ main#login > form {
   height: 24px;
   cursor: pointer;
   appearance: none;
+  background-color: transparent;
   background-image: url("../assets/images/login/visibility_off.svg");
 }
-.input-wrapper > #visibility:checked {
+.input-wrapper > #visibility.checked {
   background-image: url("../assets/images/login/visibility_on.svg");
 }
-form > button#btn-submit {
+form > button#btn-submit-login {
   font-weight: 600;
   width: 100%;
 }
@@ -71,3 +70,17 @@ form > button#btn-submit {
   color: var(--primary-100);
   text-decoration: underline;
 }
+
+@media (width < 768px) {
+  main#members {
+    padding: 0 16px;
+  }
+  main#members img#logo {
+    height: 66px;
+    margin: 80px 0 0;
+  }
+  main#members > form {
+    width: 100%;
+    max-width: 400px;
+  }
+}
diff --git a/styles/signup.css b/styles/signup.css
index 0bfe96d6..96af49ae 100644
--- a/styles/signup.css
+++ b/styles/signup.css
@@ -1,75 +1,16 @@
-main#signup {
-  min-height: 100%;
-  flex-direction: column;
-}
-main#signup input,
-main#signup p {
-  color: #1f2937;
-}
-main#signup img#logo {
-  height: 132px;
-  margin: 60px 0 0;
-}
-main#signup > form {
-  width: 640px;
-  margin: 0 0 60px;
-}
 /* Input Field */
-.input-field {
-  width: 640px;
-}
-.input-wrapper {
-  gap: 10px;
-  padding: 16px 24px;
-  background-color: var(--cool-gray-100);
-  flex: auto 1;
-}
-.input-wrapper:has(input:focus) {
-  border: 2px solid #3692ff;
-}
-.input-wrapper > input {
-  background-color: transparent;
-  border: none;
-  width: 100%;
-  height: 26px;
-}
-.input-wrapper > input:focus {
-  outline: none;
-}
-.input-wrapper > input::placeholder {
-  color: #9ca3af;
-}
-.input-wrapper > #visibility,
 .input-wrapper > #visibility-again {
   width: 24px;
   height: 24px;
   cursor: pointer;
   appearance: none;
+  background-color: transparent;
   background-image: url("../assets/images/login/visibility_off.svg");
 }
-.input-wrapper > #visibility:checked,
-.input-wrapper > #visibility-again:checked {
+.input-wrapper > #visibility-again.checked {
   background-image: url("../assets/images/login/visibility_on.svg");
 }
-form > button#btn-submit {
+form > button#btn-submit-signup {
   font-weight: 600;
   width: 100%;
 }
-#sns-login-wrapper {
-  padding: 16px 23px;
-  background-color: #e6f2ff;
-}
-#sns-login-wrapper > #sns-login {
-  list-style: none;
-}
-#google,
-#kakao {
-  width: 42px;
-}
-#signup-wrapper > * {
-  font: inherit;
-}
-#signup-wrapper > a {
-  color: var(--primary-100);
-  text-decoration: underline;
-}
