diff --git a/assets/icons/icon-eye-off.svg b/assets/icons/icon-eye-off.svg
new file mode 100644
index 00000000..92fda8aa
--- /dev/null
+++ b/assets/icons/icon-eye-off.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7731 9.97294L13.6501 8.84989C13.8206 7.96014 13.5866 7.20116 12.9481 6.57296C12.3097 5.94476 11.5437 5.70374 10.6501 5.84989L9.52702 4.72684C9.75907 4.61914 9.99785 4.54157 10.2433 4.49414C10.4889 4.44671 10.7411 4.42299 11.0001 4.42299C12.1347 4.42299 13.0978 4.81882 13.8895 5.61049C14.6811 6.40216 15.077 7.36529 15.077 8.49989C15.077 8.75886 15.0549 9.0111 15.0106 9.25662C14.9664 9.50212 14.8872 9.74089 14.7731 9.97294ZM17.9539 13.0845L16.8501 12.0499C17.4834 11.5666 18.0501 11.0291 18.5501 10.4374C19.0501 9.84572 19.4667 9.19989 19.8001 8.49989C18.9667 6.81656 17.7626 5.47906 16.1876 4.48739C14.6126 3.49572 12.8834 2.99989 11.0001 2.99989C10.5167 2.99989 10.0459 3.03322 9.58757 3.09989C9.12924 3.16656 8.66674 3.26656 8.20007 3.39989L7.03472 2.23454C7.67061 1.98326 8.319 1.798 8.9799 1.67877C9.64078 1.55953 10.3142 1.49991 11.0001 1.49991C13.1488 1.49991 15.1225 2.05825 16.9212 3.17491C18.7199 4.29158 20.1032 5.80247 21.0712 7.70759C21.1379 7.83451 21.1863 7.96239 21.2164 8.09124C21.2465 8.22009 21.2616 8.35631 21.2616 8.49989C21.2616 8.64347 21.2491 8.77969 21.2241 8.90854C21.1991 9.03739 21.1532 9.16527 21.0866 9.29219C20.7327 10.0448 20.2885 10.7396 19.7539 11.3768C19.2193 12.014 18.6193 12.5832 17.9539 13.0845ZM11.0001 15.4999C8.89496 15.4999 6.96548 14.9374 5.21165 13.8124C3.4578 12.6874 2.06357 11.2056 1.02895 9.36719C0.945616 9.24027 0.884724 9.10246 0.846274 8.95374C0.807808 8.80502 0.788574 8.65374 0.788574 8.49989C0.788574 8.34604 0.805241 8.19732 0.838574 8.05374C0.871908 7.91016 0.930241 7.76977 1.01357 7.63259C1.38537 6.95311 1.80653 6.30599 2.27705 5.69124C2.74757 5.07649 3.28859 4.52553 3.90012 4.03837L1.64242 1.76526C1.50396 1.61655 1.43569 1.43995 1.43762 1.23546C1.43954 1.03098 1.51293 0.856306 1.6578 0.71144C1.80267 0.566573 1.97831 0.494141 2.18472 0.494141C2.39112 0.494141 2.56676 0.566573 2.71162 0.71144L19.2885 17.2883C19.427 17.4268 19.5004 17.5983 19.5087 17.8027C19.517 18.0072 19.4436 18.187 19.2885 18.3422C19.1437 18.487 18.968 18.5595 18.7616 18.5595C18.5552 18.5595 18.3796 18.487 18.2347 18.3422L14.7155 14.8537C14.1257 15.0819 13.5196 15.2467 12.8972 15.3479C12.2748 15.4492 11.6424 15.4999 11.0001 15.4999ZM4.95395 5.09216C4.36805 5.54473 3.84144 6.0566 3.37412 6.62777C2.90681 7.19892 2.51546 7.82296 2.20007 8.49989C3.03341 10.1832 4.23757 11.5207 5.81257 12.5124C7.38757 13.5041 9.11674 13.9999 11.0001 13.9999C11.4296 13.9999 11.8523 13.971 12.2684 13.9133C12.6844 13.8557 13.0975 13.7666 13.5078 13.646L12.2424 12.3499C12.0398 12.4383 11.8376 12.4982 11.6356 12.5297C11.4337 12.5611 11.2219 12.5768 11.0001 12.5768C9.86547 12.5768 8.90234 12.181 8.11067 11.3893C7.31901 10.5976 6.92317 9.63449 6.92317 8.49989C6.92317 8.27809 6.94048 8.06623 6.9751 7.86432C7.00972 7.66238 7.06805 7.46013 7.1501 7.25757L4.95395 5.09216Z" fill="#4B5563"/>
+</svg>
diff --git a/assets/icons/icon-eye.svg b/assets/icons/icon-eye.svg
new file mode 100644
index 00000000..43a5af17
--- /dev/null
+++ b/assets/icons/icon-eye.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0024 15.5769C13.1354 15.5769 14.0978 15.1803 14.8895 14.3871C15.6811 13.5939 16.077 12.6308 16.077 11.4977C16.077 10.3646 15.6804 9.40224 14.8872 8.61058C14.094 7.81891 13.1309 7.42308 11.9978 7.42308C10.8647 7.42308 9.90235 7.81966 9.11068 8.61282C8.31901 9.40601 7.92318 10.3692 7.92318 11.5023C7.92318 12.6353 8.31976 13.5977 9.11293 14.3894C9.90611 15.181 10.8693 15.5769 12.0024 15.5769ZM12.0001 14.2C11.2501 14.2 10.6126 13.9375 10.0876 13.4125C9.56258 12.8875 9.30008 12.25 9.30008 11.5C9.30008 10.75 9.56258 10.1125 10.0876 9.58748C10.6126 9.06248 11.2501 8.79998 12.0001 8.79998C12.7501 8.79998 13.3876 9.06248 13.9126 9.58748C14.4376 10.1125 14.7001 10.75 14.7001 11.5C14.7001 12.25 14.4376 12.8875 13.9126 13.4125C13.3876 13.9375 12.7501 14.2 12.0001 14.2ZM12.0001 18.5C9.89496 18.5 7.96966 17.9384 6.22415 16.8153C4.47864 15.6923 3.08537 14.2147 2.04436 12.3827C1.96102 12.2391 1.90012 12.0944 1.86166 11.9485C1.82319 11.8027 1.80396 11.653 1.80396 11.4995C1.80396 11.346 1.82319 11.1965 1.86166 11.051C1.90012 10.9054 1.96102 10.7609 2.04436 10.6173C3.08537 8.78525 4.47864 7.30769 6.22415 6.18463C7.96966 5.06154 9.89496 4.5 12.0001 4.5C14.1052 4.5 16.0305 5.06154 17.776 6.18463C19.5215 7.30769 20.9148 8.78525 21.9558 10.6173C22.0391 10.7609 22.1 10.9056 22.1385 11.0514C22.177 11.1973 22.1962 11.347 22.1962 11.5005C22.1962 11.654 22.177 11.8035 22.1385 11.949C22.1 12.0945 22.0391 12.2391 21.9558 12.3827C20.9148 14.2147 19.5215 15.6923 17.776 16.8153C16.0305 17.9384 14.1052 18.5 12.0001 18.5ZM12.0001 17C13.8834 17 15.6126 16.5041 17.1876 15.5125C18.7626 14.5208 19.9667 13.1833 20.8001 11.5C19.9667 9.81664 18.7626 8.47914 17.1876 7.48748C15.6126 6.49581 13.8834 5.99998 12.0001 5.99998C10.1167 5.99998 8.38758 6.49581 6.81258 7.48748C5.23758 8.47914 4.03341 9.81664 3.20008 11.5C4.03341 13.1833 5.23758 14.5208 6.81258 15.5125C8.38758 16.5041 10.1167 17 12.0001 17Z" fill="#4B5563"/>
+</svg>
diff --git a/img/Component 2.png b/assets/img/Component 2.png
similarity index 100%
rename from img/Component 2.png
rename to assets/img/Component 2.png
diff --git a/img/Component 3.png b/assets/img/Component 3.png
similarity index 100%
rename from img/Component 3.png
rename to assets/img/Component 3.png
diff --git a/img/Img_home_01.png b/assets/img/Img_home_01.png
similarity index 100%
rename from img/Img_home_01.png
rename to assets/img/Img_home_01.png
diff --git a/img/Img_home_02.png b/assets/img/Img_home_02.png
similarity index 100%
rename from img/Img_home_02.png
rename to assets/img/Img_home_02.png
diff --git a/img/Img_home_03.png b/assets/img/Img_home_03.png
similarity index 100%
rename from img/Img_home_03.png
rename to assets/img/Img_home_03.png
diff --git a/img/Img_home_bottom.png b/assets/img/Img_home_bottom.png
similarity index 100%
rename from img/Img_home_bottom.png
rename to assets/img/Img_home_bottom.png
diff --git a/img/img__home__top.png b/assets/img/img__home__top.png
similarity index 100%
rename from img/img__home__top.png
rename to assets/img/img__home__top.png
diff --git a/img/panda__face.png b/assets/img/panda__face.png
similarity index 100%
rename from img/panda__face.png
rename to assets/img/panda__face.png
diff --git a/img/title__logo.png b/assets/img/title__logo.png
similarity index 100%
rename from img/title__logo.png
rename to assets/img/title__logo.png
diff --git a/global.css b/global.css
new file mode 100644
index 00000000..a33b07d3
--- /dev/null
+++ b/global.css
@@ -0,0 +1,18 @@
+:root {
+  --gray900: #111827;
+  --gray800: #1f2937;
+  --gray700: #374151;
+  --gray600: #4b5563;
+  --gray500: #6b7280;
+  --gray400: #9ca3af;
+  --gray300: #d1d5db;
+  --gray200: #e5e7eb;
+  --gray100: #f3f4f6;
+  --gray50: #f9fafb;
+  --blue: #3692ff;
+}
+
+* {
+  box-sizing: border-box;
+  font-family: 'Pretendard Variable';
+}
diff --git a/html/login.html b/html/login.html
index 628f159b..a9a81f60 100644
--- a/html/login.html
+++ b/html/login.html
@@ -4,27 +4,47 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/panda_market_login.css" />
+    <link rel="stylesheet" href="/global.css" />
     <title>판다마켓 로그인 페이지</title>
   </head>
   <body>
     <div class="login__container">
       <div class="logo__container">
         <a href="/">
-          <img src="../img/panda__face.png" alt="판다얼굴" />
+          <img src="/assets/img/panda__face.png" alt="판다얼굴" />
         </a>
         <div class="logo__text">판다마켓</div>
       </div>
-      <div class="login__input__text">이메일</div>
-      <input class="login__input" placeholder="이메일을 입력해주세요." />
-
-      <div class="login__input__text">비밀번호</div>
+      <label class="login__input__text" for="email">이메일</label>
       <input
+        id="email"
         class="login__input"
-        type="password"
-        placeholder="비밀번호를 입력하세요"
+        type="text"
+        placeholder="이메일을 입력해주세요."
       />
+      <p class="error-message" id="email-error"></p>
+
+      <!-- 비밀번호 -->
+      <label class="login__input__text" for="password">비밀번호</label>
+      <div class="password__wrapper">
+        <input
+          id="password"
+          class="login__input"
+          type="password"
+          placeholder="비밀번호를 입력하세요"
+        />
+        <img
+          src="/assets/icons/icon-eye-off.svg"
+          alt="비밀번호 보기 토글"
+          class="toggle-password"
+          id="toggle-password"
+        />
+      </div>
+      <p class="error-message" id="password-error"></p>
+
+      <!-- 로그인 버튼 -->
       <div>
-        <button class="login__button">로그인</button>
+        <button class="login__button" id="login-btn" disabled>로그인</button>
       </div>
       <div class="snsAuth__container">
         <span>간편 로그인하기</span>
@@ -34,14 +54,14 @@
             target="_blank"
             class="snsAuth__icon"
           >
-            <img src="../img/Component 2.png" alt="구글 아이콘" />
+            <img src="/assets/img/Component 2.png" alt="구글 아이콘" />
           </a>
           <a
             href="https://www.kakaocorp.com/page/"
             target="_blank"
             class="snsAuth__icon"
           >
-            <img src="../img/Component 3.png" alt="카카오톡 아이콘" />
+            <img src="/assets/img/Component 3.png" alt="카카오톡 아이콘" />
           </a>
         </div>
       </div>
@@ -52,3 +72,83 @@
     </div>
   </body>
 </html>
+
+<script>
+  const emailInput = document.getElementById('email');
+  const passwordInput = document.getElementById('password');
+  const loginBtn = document.getElementById('login-btn');
+  const emailError = document.getElementById('email-error');
+  const passwordError = document.getElementById('password-error');
+  const togglePasswordIcon = document.getElementById('toggle-password');
+  let passwordVisible = false;
+
+  function validateEmail(email) {
+    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return pattern.test(email);
+  }
+
+  function validateForm() {
+    const email = emailInput.value.trim();
+    const password = passwordInput.value.trim();
+
+    const emailValid = email && validateEmail(email);
+    const passwordValid = password && password.length >= 8;
+
+    loginBtn.disabled = !(emailValid && passwordValid);
+  }
+
+  togglePasswordIcon.addEventListener('click', () => {
+    passwordVisible = !passwordVisible;
+    passwordInput.type = passwordVisible ? 'text' : 'password';
+
+    // 아이콘 이미지 변경
+    togglePasswordIcon.src = passwordVisible
+      ? '/assets/icons/icon-eye.svg' // 눈 뜬 아이콘
+      : '/assets/icons/icon-eye-off.svg'; // 눈 감은 아이콘
+  });
+
+  emailInput.addEventListener('focusout', () => {
+    const value = emailInput.value.trim();
+    if (!value) {
+      emailInput.classList.add('error');
+      emailError.textContent = '이메일을 입력해주세요.';
+    } else if (!validateEmail(value)) {
+      emailInput.classList.add('error');
+      emailError.textContent = '잘못된 이메일 형식입니다.';
+    } else {
+      emailInput.classList.remove('error');
+      emailError.textContent = '';
+    }
+    validateForm();
+  });
+
+  passwordInput.addEventListener('focusout', () => {
+    const value = passwordInput.value.trim();
+    if (!value) {
+      passwordInput.classList.add('error');
+      passwordError.textContent = '비밀번호를 입력해주세요.';
+    } else if (value.length < 8) {
+      passwordInput.classList.add('error');
+      passwordError.textContent = '비밀번호를 8자 이상 입력해주세요.';
+    } else {
+      passwordInput.classList.remove('error');
+      passwordError.textContent = '';
+    }
+    validateForm();
+  });
+
+  emailInput.addEventListener('input', () => {
+    validateForm();
+  });
+
+  passwordInput.addEventListener('input', () => {
+    validateForm();
+  });
+
+  loginBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+    if (!loginBtn.disabled) {
+      window.location.href = './items.html';
+    }
+  });
+</script>
diff --git a/html/signup.html b/html/signup.html
index 910f30f4..7b6c36be 100644
--- a/html/signup.html
+++ b/html/signup.html
@@ -4,38 +4,69 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/panda_market_login.css" />
+    <link rel="stylesheet" href="/global.css" />
     <title>판다마켓 회원가입 페이지</title>
   </head>
   <body>
-    <div class="signup__container">
+    <div class="login__container">
       <div class="logo__container">
         <a href="/">
-          <img src="../img/panda__face.png" alt="판다얼굴" />
+          <img src="/assets/img/panda__face.png" alt="판다얼굴" />
         </a>
         <div class="logo__text">판다마켓</div>
       </div>
-      <div class="login__input__text">이메일</div>
-      <input class="login__input" placeholder="이메일을 입력해주세요." />
-
-      <div class="login__input__text">닉네임</div>
-      <input class="login__input" placeholder="닉네임을 입력해주세요." />
-
-      <div class="login__input__text">비밀번호</div>
+      <label class="login__input__text" for="email">이메일</label>
       <input
+        id="email"
         class="login__input"
-        type="password"
-        placeholder="비밀번호를 입력하세요"
+        placeholder="이메일을 입력해주세요."
       />
-
-      <div class="login__input__text">비밀번호 확인</div>
+      <p class="error-message" id="email-error"></p>
+      <label class="login__input__text">닉네임</label>
       <input
+        id="nickname"
         class="login__input"
-        type="password"
-        placeholder="비밀번호를 확인하세요"
+        placeholder="닉네임을 입력해주세요."
       />
+      <p class="error-message" id="nickname-error"></p>
+      <label class="login__input__text" for="password">비밀번호</label>
+      <div class="password__wrapper">
+        <input
+          id="password"
+          class="login__input"
+          type="password"
+          placeholder="비밀번호를 입력하세요"
+        />
+        <img
+          src="/assets/icons/icon-eye-off.svg"
+          alt="비밀번호 보기 토글"
+          class="toggle-password"
+          id="toggle-password"
+        />
+      </div>
+      <p class="error-message" id="password-error"></p>
+
+      <label class="login__input__text" for="password-check"
+        >비밀번호 확인</label
+      >
+      <div class="password__wrapper">
+        <input
+          id="password-check"
+          class="login__input"
+          type="password"
+          placeholder="비밀번호를 확인하세요"
+        />
+        <img
+          src="/assets/icons/icon-eye-off.svg"
+          alt="비밀번호 확인 보기 토글"
+          class="toggle-password"
+          id="toggle-password-check"
+        />
+      </div>
+      <p class="error-message" id="password-check-error"></p>
 
       <div>
-        <button class="login__button">회원가입</button>
+        <button class="login__button" id="signup-btn" disabled>회원가입</button>
       </div>
       <div class="snsAuth__container">
         <span>간편 로그인하기</span>
@@ -45,14 +76,14 @@
             target="_blank"
             class="snsAuth__icon"
           >
-            <img src="../img/Component 2.png" alt="구글 아이콘" />
+            <img src="/assets/img/Component 2.png" alt="구글 아이콘" />
           </a>
           <a
             href="https://www.kakaocorp.com/page/"
             target="_blank"
             class="snsAuth__icon"
           >
-            <img src="../img/Component 3.png" alt="카카오톡 아이콘" />
+            <img src="/assets/img/Component 3.png" alt="카카오톡 아이콘" />
           </a>
         </div>
       </div>
@@ -62,5 +93,153 @@
       </div>
     </div>
     <div></div>
+    <script>
+      const togglePassword = document.getElementById('toggle-password');
+      const togglePasswordCheck = document.getElementById(
+        'toggle-password-check',
+      );
+
+      const email = document.getElementById('email');
+      const nickname = document.getElementById('nickname');
+      const password = document.getElementById('password');
+      const passwordCheck = document.getElementById('password-check');
+      const signupBtn = document.getElementById('signup-btn');
+
+      const emailError = document.getElementById('email-error');
+      const nicknameError = document.getElementById('nickname-error');
+      const passwordError = document.getElementById('password-error');
+      const passwordCheckError = document.getElementById(
+        'password-check-error',
+      );
+
+      function validateEmailFormat(email) {
+        const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return pattern.test(email);
+      }
+
+      function validateForm() {
+        const isEmailValid = email.value && validateEmailFormat(email.value);
+        const isNicknameValid = nickname.value.trim() !== '';
+        const isPasswordValid = password.value.length >= 8;
+        const isPasswordCheckValid =
+          passwordCheck.value === password.value &&
+          passwordCheck.value.length >= 8;
+
+        signupBtn.disabled = !(
+          isEmailValid &&
+          isNicknameValid &&
+          isPasswordValid &&
+          isPasswordCheckValid
+        );
+      }
+
+      function handleValidation(input, condition, message, errorEl) {
+        if (!condition) {
+          input.classList.add('error');
+          errorEl.textContent = message;
+        } else {
+          input.classList.remove('error');
+          errorEl.textContent = '';
+        }
+        validateForm();
+      }
+
+      togglePassword.addEventListener('click', () => {
+        const type = password.type === 'password' ? 'text' : 'password';
+        password.type = type;
+        togglePassword.src =
+          type === 'password'
+            ? '/assets/icons/icon-eye-off.svg'
+            : '/assets/icons/icon-eye.svg';
+      });
+
+      togglePasswordCheck.addEventListener('click', () => {
+        const type = passwordCheck.type === 'password' ? 'text' : 'password';
+        passwordCheck.type = type;
+        togglePasswordCheck.src =
+          type === 'password'
+            ? '/assets/icons/icon-eye-off.svg'
+            : '/assets/icons/icon-eye.svg';
+      });
+
+      email.addEventListener('focusout', () => {
+        const val = email.value.trim();
+        if (!val) {
+          handleValidation(email, false, '이메일을 입력해주세요.', emailError);
+        } else if (!validateEmailFormat(val)) {
+          handleValidation(
+            email,
+            false,
+            '잘못된 이메일 형식입니다.',
+            emailError,
+          );
+        } else {
+          handleValidation(email, true, '', emailError);
+        }
+      });
+
+      nickname.addEventListener('focusout', () => {
+        handleValidation(
+          nickname,
+          nickname.value.trim() !== '',
+          '닉네임을 입력해주세요.',
+          nicknameError,
+        );
+      });
+
+      password.addEventListener('focusout', () => {
+        const val = password.value;
+        if (!val) {
+          handleValidation(
+            password,
+            false,
+            '비밀번호를 입력해주세요.',
+            passwordError,
+          );
+        } else if (val.length < 8) {
+          handleValidation(
+            password,
+            false,
+            '비밀번호를 8자 이상 입력해주세요.',
+            passwordError,
+          );
+        } else {
+          handleValidation(password, true, '', passwordError);
+        }
+      });
+
+      passwordCheck.addEventListener('focusout', () => {
+        const val = passwordCheck.value;
+        if (!val) {
+          handleValidation(
+            passwordCheck,
+            false,
+            '비밀번호를 확인해주세요.',
+            passwordCheckError,
+          );
+        } else if (val !== password.value) {
+          handleValidation(
+            passwordCheck,
+            false,
+            '비밀번호가 일치하지 않습니다.',
+            passwordCheckError,
+          );
+        } else {
+          handleValidation(passwordCheck, true, '', passwordCheckError);
+        }
+      });
+
+      // 실시간 input 변화 감지
+      [email, nickname, password, passwordCheck].forEach((input) => {
+        input.addEventListener('input', validateForm);
+      });
+
+      signupBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (!signupBtn.disabled) {
+          window.location.href = './login.html';
+        }
+      });
+    </script>
   </body>
 </html>
diff --git a/index.html b/index.html
index d0622a8c..7f6fc120 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,28 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://pandamarket.com/" />
+    <meta property="og:title" content="판다 마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta
+      property="og:image"
+      content="https://img.freepik.com/premium-photo/adorable-white-pomeranian-puppy-spitz_463999-7.jpg?semt=ais_hybrid&w=740"
+    />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="https://pandamarket.com/" />
+    <meta name="twitter:title" content="판다 마켓" />
+    <meta
+      name="twitter:description"
+      content="일상의 모든 물건을 거래해보세요"
+    />
+    <meta
+      name="twitter:image"
+      content="https://img.freepik.com/premium-photo/adorable-white-pomeranian-puppy-spitz_463999-7.jpg?semt=ais_hybrid&w=740"
+    />
     <link rel="stylesheet" href="/panda_market.css" />
+    <link rel="stylesheet" href="/global.css" />
     <link
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
       rel="stylesheet"
@@ -18,63 +39,84 @@
   <body>
     <header>
       <div class="header__container">
-        <a href="/"><img src="/img/title__logo.png" alt="판다마켓" /></a>
+        <a href="/"><img src="/assets/img/title__logo.png" alt="판다마켓" /></a>
         <button onclick="window.location.href='/html/login.html';">
           로그인
         </button>
       </div>
     </header>
     <div class="main__image__container">
-      <div>
-        <p>
-          일상의 모든 물건을 <br />
-          거래해 보세요
-        </p>
+      <div class="main__explain">
+        <p>일상의 모든 물건을 거래해 보세요</p>
         <a href="/html/items.html"><button>구경하러 가기</button></a>
       </div>
       <div>
-        <img src="/img/img__home__top.png" alt="메인이미지지" />
+        <img src="/assets/img/img__home__top.png" alt="메인이미지" />
       </div>
     </div>
 
     <div class="flex__container">
-      <div class="hot__item card__content__container hot__item__padding">
-        <h3 class="min__title">Hot item</h3>
-        <p class="explanation__content explanation__content__margin">
-          인기 상품을 <br />
-          확인해 보세요
-        </p>
-        <p class="explanation__detail">
-          가장 HOT한 중고거래 물품을<br />판다 마켓에서 확인해 보세요
-        </p>
+      <div class="card">
+        <img
+          src="/assets/img/Img_home_01.png"
+          alt="Hot item image"
+          class="card__img"
+        />
+        <div class="card__text">
+          <div class="min__title">Hot item</div>
+          <p class="explanation__content">
+            인기 상품을 <span class="break-md"></span>확인해 보세요
+          </p>
+          <p class="explanation__detail">
+            가장 HOT한 중고거래 물품을 <span class="break-md"></span>판다
+            마켓에서 확인해 보세요
+          </p>
+        </div>
       </div>
 
-      <div class="search card__content__container__reverse search__padding">
-        <h3 class="min__title">Search</h3>
-        <p class="explanation__content explanation__content__margin__reverse">
-          구매를 원하는<br />상품을 검색하세요
-        </p>
-        <p class="explanation__detail">
-          구매하고 싶은 물품은 검색해서<br />
-          쉽게 찾아보세요
-        </p>
+      <div class="card reverse">
+        <img
+          src="/assets/img/Img_home_02.png"
+          alt="Search image"
+          class="card__img"
+        />
+        <div class="card__text">
+          <div class="min__title">Search</div>
+          <p class="explanation__content">
+            구매를 원하는 <span class="break-md"></span>상품을 검색하세요
+          </p>
+          <p class="explanation__detail">
+            구매하고 싶은 물품은 검색해서 <span class="break-md"></span>쉽게
+            찾아보세요
+          </p>
+        </div>
       </div>
 
-      <div class="register card__content__container register__padding">
-        <h3 class="min__title">Register</h3>
-        <p class="explanation__content explanation__content__margin__detail">
-          판매를 원하는<br />상품을 등록하세요
-        </p>
-        <p class="explanation__detail">
-          어떤 물건이든 판매하고 싶은 상품을 <br />쉽게 등록하세요
-        </p>
+      <div class="card">
+        <img
+          src="/assets/img/Img_home_03.png"
+          alt="Register image"
+          class="card__img"
+        />
+        <div class="card__text">
+          <div class="min__title">Register</div>
+          <p class="explanation__content">
+            판매를 원하는 <span class="break-md"></span>상품을 등록하세요
+          </p>
+          <p class="explanation__detail">
+            어떤 물건이든 판매하고 싶은 상품을
+            <span class="break-md"></span> 쉽게 등록하세요
+          </p>
+        </div>
       </div>
     </div>
 
     <div class="main__image__container">
-      <p class="sizing__container">믿을 수 있는 <br />판다마켓 중고 거래</p>
+      <p class="sizing__container">
+        믿을 수 있는 <span class="break-md"></span>판다마켓 중고 거래
+      </p>
       <div>
-        <img src="/img/Img_home_bottom.png" alt="바텀이미지" />
+        <img src="/assets/img/Img_home_bottom.png" alt="바텀이미지" />
       </div>
     </div>
 
diff --git a/panda_market.css b/panda_market.css
index 7cd32418..527273c4 100644
--- a/panda_market.css
+++ b/panda_market.css
@@ -1,22 +1,3 @@
-:root {
-  --gray900: #111827;
-  --gray800: #1f2937;
-  --gray700: #374151;
-  --gray600: #4b5563;
-  --gray500: #6b7280;
-  --gray400: #9ca3af;
-  --gray300: #d1d5db;
-  --gray200: #e5e7eb;
-  --gray100: #f3f4f6;
-  --gray50: #f9fafb;
-  --blue: #3692ff;
-}
-
-* {
-  box-sizing: border-box;
-  font-family: 'Pretendard Variable';
-}
-
 a {
   cursor: pointer;
   text-decoration: none;
@@ -33,7 +14,6 @@ body {
 }
 
 header {
-  padding: 0 200px;
   position: fixed;
   top: 0;
   left: 0;
@@ -43,7 +23,7 @@ header {
 }
 
 .header__container {
-  margin: 9px 200px 10px;
+  margin: 10px 350px 9px;
   display: flex;
   justify-content: space-between;
 }
@@ -55,13 +35,18 @@ header {
 
 .header__container button {
   width: 128px;
-  height: 48px;
+  padding: 12px 23px;
   color: white;
   background-color: var(--blue);
   border-radius: 8px;
   border: solid 1px;
   font-size: 16px;
   font-weight: 600;
+  white-space: nowrap;
+}
+
+.main__explain {
+  width: 360px;
 }
 
 .main__image__container {
@@ -71,13 +56,12 @@ header {
   color: var(--gray700);
   width: 100%;
   margin: 0 auto;
-  padding: 200px 405px 0;
-  height: 540px;
+  padding: 200px 0 0;
 }
 
 .main__image__container p {
   margin-bottom: 32px;
-  margin-top: 40px;
+  margin-right: 60px;
   font-weight: 700;
   font-size: 40px;
   line-height: 140%;
@@ -97,7 +81,24 @@ header {
 
 .main__image__container img {
   width: 740px;
-  height: 340px;
+  height: auto;
+}
+
+.flex__container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.card {
+  width: 100%;
+  max-width: 1020px;
+  display: flex;
+  align-items: center;
+  gap: 64px;
+  margin: 138px 0;
+  background-color: #fcfcfc;
 }
 
 .min__title {
@@ -107,83 +108,36 @@ header {
   margin: 0px;
 }
 
+.card__text {
+  display: flex;
+  flex-direction: column;
+  margin-right: 23.5px;
+}
+
 .explanation__content {
   font-weight: bold;
   font-size: 40px;
   line-height: 1.4;
   color: var(--gray700);
-}
-
-.explanation__content__margin {
-  margin-top: 12px;
-  margin-bottom: 24px;
-  margin-right: 52px;
+  margin: 12px 52px 24px 0;
+  width: 100%;
 }
 
 .explanation__detail {
   font-size: 24px;
   font-weight: 500;
   color: var(--gray700);
-  margin: 0px;
-}
-
-.hot__item {
-  background-image: url('/img/Img_home_01.png');
-}
-
-.search {
-  background-image: url('/img/Img_home_02.png');
-}
-
-.register {
-  background-image: url('/img/Img_home_03.png');
-}
-
-.card__content__container {
-  background-repeat: no-repeat;
-  width: 988px;
-  height: 444px;
-  background-color: #fcfcfc;
-  margin: 138px 466px;
-}
-
-.flex__container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.card__content__container__reverse {
-  background-repeat: no-repeat;
-  background-position: right;
-  width: 988px;
-  height: 444px;
-  background-color: #fcfcfc;
-  margin: 138px 0;
-  text-align: end;
-}
-
-.explanation__content__margin__reverse {
-  margin-top: 12px;
-  margin-bottom: 24px;
-}
-
-.hot__item__padding {
-  padding: 103px 23.5px 103px 666.5px;
-}
-
-.search__padding {
-  padding: 103px 657px 103px 14px;
+  margin: 0;
+  width: 100%;
 }
 
-.register__padding {
-  padding: 103px 7px 103px 636px;
+.reverse {
+  flex-direction: row-reverse;
+  text-align: right;
 }
 
 .sizing__container {
   width: 320px;
-  height: 172px;
 }
 
 footer {
@@ -222,127 +176,119 @@ footer {
   height: 20px;
 }
 
-@media (max-width: 1440px) {
+.break-md {
+  display: block;
+  height: 0;
+}
+
+@media (max-width: 1024px) {
   header {
-    padding: 0 100px;
+    padding: 0 24px;
   }
 
-  .header__container {
-    margin: 9px 100px 10px;
+  .main__image__container {
+    flex-direction: column;
+    align-items: center;
   }
 
-  .main__image__container {
-    padding: 150px 50px 0;
-    height: auto;
+  .header__container {
+    margin: 10px 24px 9px;
   }
 
-  .main__image__container img {
+  .main__explain {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     width: 100%;
-    max-width: 740px;
-    height: auto;
   }
 
   .main__image__container p {
-    font-size: 32px;
+    margin-right: 0;
   }
-
-  .main__image__container button {
-    width: 300px;
-    font-size: 18px;
+  .card {
+    flex-direction: column;
+    gap: 24px;
+    margin: 24px 0;
+    align-items: normal;
+    padding: 0 24px;
+    background-color: white;
   }
-}
-
-@media (max-width: 1024px) {
-  .card__content__container,
-  .card__content__container__reverse {
-    width: 90%;
-    height: auto;
-    margin: 50px auto;
+  .explanation__content .break-md {
+    display: none;
   }
 
-  .hot__item__padding,
-  .search__padding,
-  .register__padding {
-    padding: 50px 20px;
+  .sizing__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
   }
 
-  .explanation__content {
-    font-size: 32px;
+  .main__image__container .sizing__container {
+    margin-bottom: 217px;
   }
 
-  .explanation__detail {
-    font-size: 20px;
+  .footer__text {
+    padding-right: 63.44px;
   }
 
-  .main__image__container {
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-
-  .main__image__container img {
-    max-width: 100%;
+  .footer__sns {
+    padding-left: 63.44px;
   }
 }
 
-@media (max-width: 768px) {
+/* 모바일 */
+@media (max-width: 767px) {
   header {
-    padding: 0 20px;
+    padding: 0 16px;
   }
 
-  .header__container {
-    flex-direction: column;
-    align-items: center;
-    margin: 0;
+  .main__explain {
+    max-width: 240px;
+    margin-bottom: 132px;
   }
-
-  .header__container img,
-  .header__container button {
-    margin: 10px 0;
-  }
-
   .main__image__container {
-    padding: 50px 20px 0;
-    height: auto;
+    padding: 150px 0 0;
+  }
+  .main__image__container p {
+    text-align: center;
+    font-size: 32px;
   }
 
   .main__image__container button {
-    width: 90%;
-    font-size: 16px;
+    max-width: 240px;
+    font-size: 18px;
   }
 
-  .card__content__container,
-  .card__content__container__reverse {
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    padding: 20px;
-    height: auto;
+  .main__image__container .sizing__container {
+    margin-bottom: 131px;
   }
 
-  footer {
-    flex-direction: column;
-    align-items: center;
-    padding: 20px;
-    font-size: 14px;
-    text-align: center;
+  .card {
+    margin: 52px 0;
   }
-}
 
-@media (max-width: 480px) {
-  .main__image__container p {
-    font-size: 24px;
+  footer {
+    flex-wrap: wrap;
+    height: auto;
+    padding: 24px 16px;
+    align-items: flex-start;
   }
 
-  .main__image__container button {
+  .footer__text {
+    order: 2;
+    margin-top: 24px;
+    padding-right: 0;
     width: 100%;
+    padding-left: 50px;
   }
 
-  .explanation__content {
-    font-size: 24px;
-  }
-
-  .explanation__detail {
-    font-size: 16px;
+  .footer__text--a,
+  .footer__sns {
+    order: 1;
+    margin-top: 0;
+    padding-right: 50px;
+    padding-left: 50px;
   }
 }
diff --git a/panda_market_login.css b/panda_market_login.css
index e417e32c..27fccec1 100644
--- a/panda_market_login.css
+++ b/panda_market_login.css
@@ -1,48 +1,22 @@
-:root {
-  --gray900: #111827;
-  --gray800: #1f2937;
-  --gray700: #374151;
-  --gray600: #4b5563;
-  --gray500: #6b7280;
-  --gray400: #9ca3af;
-  --gray300: #d1d5db;
-  --gray200: #e5e7eb;
-  --gray100: #f3f4f6;
-  --gray50: #f9fafb;
-  --blue: #3692ff;
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1080px;
 }
 
-* {
-  box-sizing: border-box;
-  font-family: 'Pretendard Variable';
+a {
+  text-decoration: none;
 }
 
 .login__container {
-  margin: 231px 640px;
-  width: 650px;
-  height: 618px;
+  max-width: 640px;
+  width: 100%;
 }
 
-.signup__container {
-  width: 640px;
-  height: 857px;
-  margin: 60px 640px 407px;
-}
-/*질문 사항. 정적으로 수치를 넣으니까 화면 창에 따라 크기가 줄여지는 게 안됨. 그럼 대부분의 UI를 
-  %를 사용해서 수치를 계산해야 하는가? 이런 화면의 경우 어떤 식으로 해야 하는지?? 
-  
-  안에 요소(input, button) 길이는 정적으로 두고 밖에 컨테이너에서만 크기 조절 로직을 바꿔서
-  창 크기를 줄였을 때 자연스럽게 줄어들게 할 수 없나? 
-  부트스트랩에서 반응형 DIV 안에 요소만 넣으면 알아서 길이 조절이 되는 것처럼..
-
-  CASE 1 : 밖에도 %, 안에 요소도 %
-  CASE 2 : 밖에는 %, 안에 요소는 정적으로 px
-  CASE 3 : 밖에도 px, 안에도 px
-  */
-
 /*logo*/
 .logo__container {
-  margin: 0 122px 40px 122px;
+  margin-bottom: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -59,11 +33,28 @@
   font-weight: 700;
   font-family: ROKAF Sans;
   color: var(--blue);
-  margin: 23.98px 4.23px 18.02px 22.24px;
+  margin: 0 4.23px 0 22.24px;
 }
 
 /*input*/
 
+.error-message {
+  color: red;
+  font-size: 14px;
+  font-weight: 600;
+  margin-left: 16px;
+  margin-top: 0;
+}
+
+.login__input.error {
+  border: 1px solid red;
+}
+
+.login__button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
 .login__input__text {
   font-weight: 700;
   font-size: 18px;
@@ -72,38 +63,64 @@
 
 .login__input {
   background-color: var(--gray100);
-  width: 640px;
+  width: 100%;
+  max-width: 640px;
   height: 56px;
   border-radius: 12px;
   border: none;
   margin-top: 16px;
-  margin-bottom: 24px;
+  margin-bottom: 15px;
   font-size: 16px;
   font-weight: 400;
   color: var(--gray800);
   padding-left: 24px;
+  padding-right: 24px;
 }
 
 .login__input:focus {
   outline: none;
+  border: 1px solid var(--blue);
+}
+
+.password__wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.toggle-password {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.toggle-password:hover {
+  opacity: 1;
 }
 
 /*button*/
 .login__button {
   background-color: var(--blue);
-  width: 640px;
+  width: 100%;
+  max-width: 640px;
   height: 56px;
   border-radius: 40px;
   border: none;
   font-size: 20px;
   font-weight: 600;
   color: var(--gray100);
+  cursor: pointer;
 }
 
 /*sns*/
 .snsAuth__container {
   margin: 24px 0;
-  width: 640px;
+  width: 100%;
+  max-width: 640px;
   height: 74px;
   background-color: #e6f2ff;
   display: flex;
@@ -136,3 +153,31 @@
   text-decoration: underline;
   cursor: pointer;
 }
+
+@media (max-width: 767px) {
+  .logo__container img {
+    width: 51.76px;
+    height: 51.94px;
+  }
+
+  .logo__text {
+    font-size: 33.17px;
+  }
+
+  .login__input__text {
+    font-size: 14px;
+  }
+
+  .login__container {
+    max-width: 400px;
+  }
+  .login__input {
+    max-width: 400px;
+  }
+  .login__button {
+    max-width: 400px;
+  }
+  .snsAuth__container {
+    max-width: 400px;
+  }
+}
diff --git a/reset.css b/reset.css
new file mode 100644
index 00000000..0ef62576
--- /dev/null
+++ b/reset.css
@@ -0,0 +1,130 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+/* html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+  box-sizing: border-box;
+} */
+/* HTML5 display-role reset for older browsers */
+/* article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+} */