diff --git a/css/auth.css b/css/auth.css
new file mode 100644
index 00000000..1db87c01
--- /dev/null
+++ b/css/auth.css
@@ -0,0 +1,185 @@
+.main-btn,
+button {
+  cursor: pointer;
+}
+
+.main-btn:hover,
+button:hover {
+  background: var(--blue200);
+}
+
+.main-btn:active,
+button:active {
+  background: var(--blue300);
+}
+
+.main-btn:disabled,
+button:disabled {
+  background: var(--inactive);
+}
+
+main {
+  height: 61.8rem;
+  margin: 15rem auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.logo-box {
+  width: 39.6rem;
+  height: 13.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+}
+
+.logo {
+  width: 10rem;
+  height: 10rem;
+}
+
+.pandamarket {
+  width: 26.6rem;
+  height: 12rem;
+  color: var(--blue100);
+}
+
+form {
+  margin-top: 4rem;
+  width: 64rem;
+  height: 44.6em;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.login-input {
+  margin-bottom: 2.4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.password-container {
+  position: relative;
+}
+
+.password-container input {
+  width: 100%; /* input이 가득 차도록 */
+  padding-right: 4rem; /* 아이콘과 텍스트 간 간격 확보 */
+  box-sizing: border-box; /* 패딩이 width에 포함되도록 설정 */
+}
+
+.eye-icon {
+  position: absolute;
+  right: 1.5rem;
+  top: 42%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+}
+
+label {
+  margin-bottom: 1rem;
+  font-size: 1.8rem;
+  font-weight: 700;
+}
+
+input {
+  font-size: 1.6rem;
+  height: 5.6rem;
+  padding: 2rem;
+  border-radius: 1.2rem;
+  background-color: var(--gray100);
+}
+
+input::placeholder {
+  color: var(--inactive);
+}
+
+.btn {
+  height: 5.6rem;
+  color: var(--gray100);
+  font-size: 2rem;
+  font-weight: 600;
+  padding: 1.6rem 12.4rem;
+  border-radius: 4rem;
+  background-color: var(--inactive);
+}
+
+.easy-login {
+  width: 64rem;
+  margin: 2.4rem 0;
+  background-color: #e6f2ff;
+  border-radius: 0.8rem;
+}
+
+.easy-login-box {
+  height: 5rem;
+  margin: 1.6rem 2.3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.easy-login-box p {
+  font-size: 1.6rem;
+  font-weight: 500;
+}
+
+.easy-login-icons {
+  display: flex;
+  gap: 1.6rem;
+}
+
+.question {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+
+.question a {
+  text-decoration: underline;
+  color: var(--blue100);
+}
+
+.signup,
+.login {
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+
+/* Mobile: 767px 이하  */
+@media (max-width: 767px) {
+  main {
+    width: 100%;
+    max-width: 40rem; /* 최대 너비 400px */
+    padding: 0 1.6rem; /* 좌우 여백 16px */
+  }
+  .logo-box {
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  form {
+    margin-top: 0;
+    width: 100%; /* 부모(main)의 너비를 따름 */
+  }
+  .logo {
+    width: 5.2rem; /* 로고 크기 줄이기 */
+    height: auto;
+  }
+  .pandamarket {
+    width: 13.3rem; /* 텍스트 로고 크기 조절 */
+    height: auto;
+  }
+}
diff --git a/css/base.css b/css/base.css
index b653ffae..d1e42886 100644
--- a/css/base.css
+++ b/css/base.css
@@ -1,3 +1,5 @@
+@import url(./unsupported.css);
+
 :root {
   /* Primary color */
   --blue100: #3692FF;
diff --git a/css/index.css b/css/index.css
index 78ffdc89..3f7e5345 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,12 +1,3 @@
-/* 전체적인 세팅 */
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  font-family: "Pretendard Variable", sans-serif;
-  font-size: 10px; /* Base font size */
-}
-
 body {
   display: flex;
   flex-direction: column;
@@ -25,7 +16,8 @@ main {
   flex-direction: column;
 }
 
-article, section {
+article,
+section {
   flex: 1;
 }
 
@@ -75,9 +67,10 @@ header {
   justify-content: space-between;
 }
 
-.logo {
-  width: 15rem;
-  height: 5rem;
+.logo-box {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 
 .login {
@@ -154,6 +147,11 @@ article {
   text-decoration: none;
 }
 
+.panda {
+  width: 74.6rem;
+  height: 34rem;
+}
+
 /* main section */
 section {
   background: var(--white);
@@ -164,25 +162,26 @@ section {
 }
 
 .section {
-  padding: 13.8rem 10%;
+  display: flex;
+  padding: 10rem 0;
 }
 
 .content {
   background: var(--gray);
   display: flex;
-  width: 80%;
   height: 44.4rem;
+  width: 105rem;
   margin: 0 auto;
   border-radius: 1.2rem;
   gap: 6.4rem;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0; /* Prevent shrinking */
 }
 
 .content-box {
   display: flex;
   flex-direction: column;
-  width: 30%;
   height: 23.8rem;
   padding-right: 2.4rem;
   gap: 1.2rem;
@@ -198,14 +197,12 @@ section {
 .text-box {
   display: flex;
   flex-direction: column;
-  width: 100%;
   height: 20rem;
   gap: 2.4rem;
 }
 
 h3 {
   width: 100%;
-  height: 11.2rem;
   color: var(--gray700);
   font-weight: 700;
   font-size: 4rem;
@@ -213,9 +210,19 @@ h3 {
   letter-spacing: 2%;
 }
 
+.text-box span {
+  color: var(--gray700);
+  font-weight: 700;
+  font-size: 4rem;
+  display: block;
+}
+
+.hot {
+  width: 22.2rem;
+}
+
 .text-box .info {
   color: var(--gray700);
-  width: 100%;
   height: 6.4rem;
   font-weight: 500;
   font-size: 2.4rem;
@@ -226,49 +233,20 @@ h3 {
   text-align: right;
 }
 
-.reverse .text-box {
-  width: 100%;
-  height: 20rem;
-}
-
-.reverse p {
-  width: 100%;
-  height: 11.2rem;
-}
-
-.reverse .info {
-  width: 100%;
-}
-
-.icon-img {
-  height: auto;
-}
-
 .register .content-box {
   width: 30%;
   height: 23.8rem;
 }
 
-.register p {
-  width: 100%;
-  height: 11.2rem;
-}
-
 .register .info {
-  width: 100%;
-  height: 6.4rem;
+  font-size: 2.4rem;
+  width: 33.5rem;
 }
 
 /* section banner */
-.bottom.banner::before { /* 배경색 */
-  content: "";
-  display: block;
-  width: 100%;
-  height: 10rem;
+.bottom-banner {
+  padding-top: 15rem;
   background-color: var(--gray);
-  position: absolute; /* relative에서 absolute로 변경 */
-    top: 0; /* 밀리지 않도록 변경 */
-    left: 0;
 }
 
 .bottom.banner {
@@ -284,6 +262,8 @@ h3 {
   height: 23.8rem;
   padding-right: 2.4rem;
   gap: 1.2rem;
+  flex-shrink: 0; /* Prevent shrinking */
+  min-width: 300px; /* Set a minimum width */
 }
 
 .bottom .container {
@@ -293,10 +273,6 @@ h3 {
   height: 40rem;
 }
 
-.bottom p {
-  height: 11.2rem;
-}
-
 /* footer */
 footer {
   display: flex;
@@ -317,8 +293,6 @@ footer {
 
 .left {
   color: var(--gray400);
-  font-weight: 400;
-  font-size: 1.6rem;
   text-align: center;
 }
 
@@ -330,6 +304,11 @@ footer {
   text-align: center;
 }
 
+.codeit {
+  font-size: 1.6rem;
+  font-weight: 400;
+}
+
 .policy {
   width: 10rem;
   height: 1.9rem;
@@ -340,6 +319,12 @@ footer {
   height: 1.9rem;
 }
 
+.policy a,
+.faq a {
+  font-size: 1.6rem;
+  font-weight: 400;
+}
+
 .icon {
   display: flex;
   align-items: center;
@@ -348,7 +333,8 @@ footer {
   gap: 1.2rem;
 }
 
-li, ul {
+li,
+ul {
   list-style: none;
 }
 
@@ -356,8 +342,8 @@ a {
   color: var(--gray200);
 }
 
-/* Responsive adjustments */
-@media (max-width: 1200px) {
+/* Desktop: 1200px 이상 */
+@media (min-width: 1200px) {
   .container,
   .bottom .container {
     width: 90%;
@@ -369,45 +355,296 @@ a {
   }
 }
 
-@media (max-width: 768px) {
+/* Tablet: 768px 이상 ~ 1199px 이하 */
+@media (min-width: 768px) and (max-width: 1199px) {
   .container,
-  .bottom .container {
+  .bottom .container,
+  .content {
+    /* 컨텐츠 배열 */
     flex-direction: column;
     align-items: center;
   }
-  .container-box,
-  .bottom .container-box {
-    width: 80%;
+  /* 상단바 */
+  .nav {
+    /* 상단 바 좌우 여백 */
+    padding: 0.9rem 1.5rem;
+  }
+  /* 상단 배너 */
+  .banner {
+    height: 80rem;
+  }
+  .container-box {
+    width: 90%;
+    margin-bottom: 30rem;
+    display: flex;
+    align-items: center;
+  }
+  h3 {
+    /* 배너 제목 글자 넘김 X */
+    display: inline;
+  }
+  .panda {
+    position: absolute;
+    top: 26rem;
+  }
+  /* 섹션 */
+  .section {
+    margin: 12rem 0;
+  }
+  .section-img {
+    width: 70rem;
+    height: 100rem;
+  }
+  .content,
+  .content-box {
+    width: 0;
+    background: white;
+  }
+  .hot {
+    /* 섹션 제목 글자 길이 */
+    width: 32.9rem;
+  }
+  .reverse-span {
+    width: 41rem;
+  }
+  .text-box span {
+    display: inline;
+  }
+  .reverse .text-box {
+    align-self: flex-start;
+    text-align: right;
+    padding: 0 6.5rem;
   }
-  .text p,
+  h3.title {
+    width: 45rem;
+  }
+  h3.title.reverse {
+    position: relative;
+    right: 22rem;
+    margin-right: 10rem;
+  }
+  .text-box h3,
+  .text-box span,
   .text-box p {
+    /* 섹션 제목 글자 크기 */
     font-size: 3.2rem;
   }
-  .main-btn,
-  .font {
-    font-size: 1.6rem;
+  #check {
+    /* 섹션 내용 글자 넘김 */
+    font-size: 1.8rem;
+    width: 20.6rem;
+  }
+  #find {
+    font-size: 1.8rem;
+    width: 21.6rem;
+  }
+  #recommend {
+    font-size: 1.8rem;
+    width: 25.1rem;
+  }
+  #opposite {
+    /* 2번째 섹션 내용 반대 순서 */
+    flex-direction: column-reverse;
+  }
+  .content-box {
+    align-self: flex-end; /* Ensure left alignment */
+    text-align: left; /* Align text to the left */
+  }
+  .reverse.content-box {
+    align-self: flex-start; /* Ensure left alignment */
+    text-align: right; /* Align text to the left */
+  }
+  .content-box {
+    min-width: 32rem;
+  }
+  /* 하단 배너 */
+  .bottom-banner {
+    padding-top: 12rem;
+    background-color: var(--banner);
+  }
+  .bottom .container-box {
+    margin-bottom: 14.2rem;
+  }
+  .bottom .container {
+    top: 24rem;
+  }
+  .trade {
+    display: flex;
+    justify-content: center;
+  }
+  /* footer */
+  .codeit {
+    color: var(--gray200);
   }
 }
 
-@media (max-width: 480px) {
-  .text p,
+/* Mobile: 375px 이상 ~ 767px 이하  */
+@media (min-width: 374px) and (max-width: 767px) {
   .text-box p {
     font-size: 2.4rem;
+    line-height: 3.2rem;
+  }
+  .container,
+  .bottom .container,
+  .content {
+    /* 컨텐츠 배열 */
+    flex-direction: column;
+    align-items: center;
+  }
+  /* 상단바 */
+  .nav {
+    /* 상단 바 좌우 여백 */
+    padding: 0.9rem 1rem;
+  }
+  /* 상단 배너 */
+  .text h3 {
+    width: 24rem;
+    font-size: 3.2rem;
+    display: flex;
+    justify-content: center;
+  }
+  /* 버튼 조정 */
+  .main-btn {
+    width: 24rem;
+    padding: 1.6rem 7rem;
   }
-  .main-btn,
   .font {
-    font-size: 1.4rem;
+    font-size: 1.8rem;
   }
-  .container-box,
-  .bottom .container-box {
-    width: 100%;
+  .container-box {
+    width: 90%;
+    margin-bottom: 40rem;
+    display: flex;
+    align-items: center;
   }
-  .text-box p {
-    font-size: 2.4rem;
-    line-height: 3.2rem;
+  h3 {
+    /* 배너 제목 글자 넘김 X */
+    display: inline;
+  }
+  .panda {
+    width: 44.8rem;
+    height: 20.4rem;
+    position: absolute;
+    top: 13.6rem;
+  }
+  /* 섹션 */
+  .section {
+    padding: 4rem 0;
+  }
+  .section.top {
+    margin-top: 5rem;
+  }
+  .section-img {
+    width: 34.4rem;
+    height: 25.9rem;
+  }
+  .content {
+    gap: 3rem;
+  }
+  .content,
+  .content-box {
+    width: 34.4rem;
+    background: white;
+  }
+  .hot {
+    /* 섹션 제목 글자 길이 */
+    width: 32.9rem;
   }
   .text-box .info {
     font-size: 1.6rem;
-    line-height: 2.4rem;
   }
-}
+  .text-box span {
+    display: inline;
+  }
+  .reverse-span {
+    width: 41rem;
+  }
+  .reverse .text-box {
+    align-self: flex-start;
+    text-align: right;
+    padding: 0 10rem;
+  }
+  h3.title {
+    width: 45rem;
+  }
+  h3.title.reverse {
+    position: relative;
+    right: 22rem;
+    margin-right: 10rem;
+  }
+  .text-box h3,
+  .text-box span {
+    font-size: 2.4rem;
+  }
+  .text-box {
+    gap: 0.5rem;
+  }
+  .content-box p {
+    /* 섹션 제목 글자 크기 */
+    font-size: 1.6rem;
+  }
+  #find {
+    width: 21.6rem;
+  }
+  #opposite {
+    /* 2번째 섹션 내용 반대 순서 */
+    flex-direction: column-reverse;
+  }
+  .content-box {
+    text-align: left; /* Align text to the left */
+  }
+  .reverse.content-box {
+    text-align: right; /* Align text to the left */
+  }
+  .content-box {
+    min-width: 32rem;
+  }
+  /* 하단 배너 */
+  .bottom-banner {
+    padding-top: 0;
+    background-color: var(--banner);
+  }
+  .bottom .container-box {
+    margin-bottom: 25rem;
+  }
+  .bottom .container {
+    top: 18rem;
+  }
+  .text .trade {
+    width: 24rem;
+    font-size: 3.2rem;
+    display: flex;
+    justify-content: center;
+  }
+  .two-panda {
+    position: relative;
+    bottom: 15.3rem;
+    width: 37.5rem;
+    height: 19.8rem;
+  }
+  /* footer */
+  .nav-bottom {
+    padding-top: 1rem;
+    display: grid;
+    justify-items: center; /* 내부 아이템 개별 정렬 */
+    align-items: center;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-template-areas:
+      "center icon"
+      "left .";
+    gap: 1rem;
+  }
+  .center {
+    grid-area: center;
+  }
+  .icon {
+    float: right;
+    grid-area: icon;
+  }
+  .left {
+    padding-right: 5rem;
+    color: var(--gray200);
+    grid-area: left;
+  }
+}
\ No newline at end of file
diff --git a/css/login.css b/css/login.css
deleted file mode 100644
index f5ea24b7..00000000
--- a/css/login.css
+++ /dev/null
@@ -1,142 +0,0 @@
-/* 전체적인 세팅 */
-html {
-  margin: 0;
-  padding: 0;
-  top: 0;
-  bottom: 0;
-  font-family: "Pretendard Variable", sans-serif;
-  font-size: 10px; /* Base font size */
-}
-
-.main-btn,
-button {
-  cursor: pointer;
-}
-
-.main-btn:hover,
-button:hover {
-  background: var(--blue200);
-}
-
-.main-btn:active,
-button:active {
-  background: var(--blue300);
-}
-
-.main-btn:disabled,
-button:disabled {
-  background: var(--inactive);
-}
-
-main {
-    height: 61.8rem;
-    width: 0 auto;
-    margin-top: 5rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-}
-
-form {
-    margin-top: 4rem;
-    width: 64rem;
-    height: 44.6em;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.login-input {
-    margin-bottom: 2.4rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.password-container {
-    position: relative;
-}
-
-.password-container input {
-    width: 100%;  /* input이 가득 차도록 */
-    padding-right: 4rem; /* 아이콘과 텍스트 간 간격 확보 */
-    box-sizing: border-box; /* 패딩이 width에 포함되도록 설정 */
-}
-
-.eye-icon {
-    position: absolute;
-    right: 1.5rem;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    width: 24px;
-    height: 24px;
-}
-
-label {
-    margin-bottom: 1rem;
-    font-size: 1.8rem;
-    font-weight: 700;
-}
-
-input {
-    font-size: 1.6rem;
-    height: 5.6rem;
-    padding: 2rem;
-    border-radius: 1.2rem;
-    background-color: var(--gray100);
-}
-
-input[type="password"] {
-    font-size: 3rem;
-}
-
-button {
-    height: 5.6rem;
-    color: var(--gray100);
-    font-size: 2rem;
-    font-weight: 600;
-    padding: 1.6rem 12.4rem;
-    border-radius: 4rem;
-    background-color: var(--blue100);
-}
-
-.easy-login {
-    margin: 2.4rem 0;
-    background-color: #E6F2FF;
-    border-radius: 0.8rem;
-}
-
-.easy-login-box {
-    height: 5rem;
-    margin: 1.6rem 2.3rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.easy-login-box p {
-    margin-bottom: 1rem;
-    font-size: 1.6rem;
-    font-weight: 500;
-}
-
-.easy-login-icons {
-    display: flex;
-    gap: 1.6rem;
-}
-
-main p {
-    margin-top: 1rem;
-    display: flex;
-    justify-content: center;
-    font-size: 1.4rem;
-    font-weight: 500;
-}
-
-main p a {
-    text-decoration: underline;
-    color: var(--blue100);
-}
\ No newline at end of file
diff --git a/css/reset.css b/css/reset.css
index b6143fb1..247c2f34 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -4,6 +4,9 @@
   padding: 0;
   border: 0;
   box-sizing: border-box;
+  font-family: "Pretendard Variable", sans-serif;
+  font-size: 10px; /* Base font size */
+  transition: all 0.5s;
 }
 
 /* 기본 스타일 초기화 */
diff --git a/css/unsupported.css b/css/unsupported.css
new file mode 100644
index 00000000..3d1547b6
--- /dev/null
+++ b/css/unsupported.css
@@ -0,0 +1,33 @@
+/* 모바일 사이즈 이하 지원 X */
+.unsupported-screen {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(10px);
+    z-index: 9999;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 2rem;
+    color: white;
+    font-size: 1.8rem;
+    font-weight: 600;
+  }
+  
+  .unsupported-message {
+    color: white;
+    font-size: 1.6rem;
+    font-weight: 600;
+    padding: 2rem 2rem;
+    border: 2px solid rgba(255, 255, 255, 0.4);
+    border-radius: 1rem;
+    background-color: rgba(0, 0, 0, 0.4);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  }
+  
+  @media (max-width: 374px) {
+    .unsupported-screen {
+      display: flex;
+    }
+  }
\ No newline at end of file
diff --git a/images/image.png b/images/image.png
new file mode 100644
index 00000000..4568044f
Binary files /dev/null and b/images/image.png differ
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 00000000..a374b7a0
Binary files /dev/null and b/images/logo.png differ
diff --git a/images/pandamarket.png b/images/pandamarket.png
index ac5b678e..532b0f4a 100644
Binary files a/images/pandamarket.png and b/images/pandamarket.png differ
diff --git a/index.html b/index.html
index ba03d5a4..94cb1560 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,10 @@
       crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
     />
+    <meta property="og:title" content="판다 마켓">
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
+    <meta property="og:url" content="https://yuj2n-pandamarket.netlify.app/"> <!-- 실제 URL 입력 -->
+    <meta property="og:image" content="https://yuj2n-pandamarket.netlify.app/images/image.png"> <!-- 썸네일 이미지 URL -->
     <link rel="icon" href="/images/favicon.ico" />
     <link rel="stylesheet" href="css/base.css" />
     <link rel="stylesheet" href="css/reset.css" />
@@ -23,12 +27,11 @@
       <header>
         <nav class="nav">
           <div class="nav-content">
-            <div class="logo">
-              <a href="/">
-                <img src="images/pandamarket.png" width="153" height="51" />
-              </a>
-            </div>
-            <a href="/login.html" class="login"> 로그인 </a>
+            <a href="/" class="logo-box">
+              <img class="logo" src="images/logo.png" width="45" height="45" />
+              <img src="images/pandamarket.png" height="51" />
+            </a>
+            <a href="/login.html" class="login">로그인</a>
           </div>
         </nav>
       </header>
@@ -38,31 +41,26 @@
             <div class="container">
               <div class="container-box">
                 <div class="text">
-                  <h3>
-                    일상의 모든 물건을<br />
-                    거래해 보세요
-                  </h3>
+                  <h3>일상의 모든 물건을 </h3>
+                  <h3>거래해 보세요</h3>
                 </div>
                 <div class="main-btn">
                   <a class="font" href="/items.html">구경하러 가기</a>
                 </div>
               </div>
-              <img src="images/panda1.png" width="746" height="340" />
+              <img class="panda" src="images/panda1.png" />
             </div>
           </div>
         </article>
         <section>
-          <div class="section">
+          <div class="section top">
             <div class="content">
-              <img src="images/main1.png" width="579" height="444" />
+              <img class="section-img" src="images/main1.png" width="579" height="444" />
               <div class="content-box">
                 <p>Hot item</p>
                 <div class="text-box">
-                  <h3>
-                    인기 상품을<br />
-                    확인해 보세요
-                  </h3>
-                  <p class="info">
+                  <h3 class="hot">인기 상품을 확인해 보세요</h3>
+                  <p id="check" class="info">
                     가장 HOT한 중고거래 물품을<br />
                     판다 마켓에서 확인해 보세요
                   </p>
@@ -73,22 +71,19 @@ <h3>
         </section>
         <section>
           <div class="section">
-            <div class="content">
+            <div id="opposite" class="content">
               <div class="reverse content-box">
                 <p>Search</p>
                 <div class="text-box">
-                  <h3>
-                    구매를 원하는<br />
-                    상품을 검색하세요
-                  </h3>
-                  <p class="info">
+                  <h3 class="title reverse">구매를 원하는 <span>상품을 검색하세요</span></h3>
+                  <p id="find" class="info">
                     구매하고 싶은 물품은 검색해서<br />
                     쉽게 찾아보세요
                   </p>
                 </div>
               </div>
               <img
-                class="img"
+                class="img section-img"
                 src="images/main2.png"
                 width="579"
                 height="444"
@@ -99,15 +94,12 @@ <h3>
         <section>
           <div class="section register">
             <div class="content">
-              <img src="images/main3.png" width="579" height="444" />
-              <div class="content-box">
+              <img class="section-img" src="images/main3.png" width="579" height="444" />
+              <div class="bottom content-box">
                 <p>Register</p>
                 <div class="text-box">
-                  <h3>
-                    판매를 원하는<br />
-                    상품을 등록하세요
-                  </h3>
-                  <p class="info">
+                  <h3 class="title">판매를 원하는 <span>상품을 등록하세요</span></h3>
+                  <p id="recommend" class="info">
                     어떤 물건이든 판매하고 싶은 상품을<br />
                     쉽게 등록하세요
                   </p>
@@ -121,13 +113,11 @@ <h3>
             <div class="container">
               <div class="container-box">
                 <div class="text">
-                  <p>
-                    믿을 수 있는<br />
-                    판다마켓 중고 거래
-                  </p>
+                  <p class="trade">믿을 수 있는 </p>
+                  <p class="trade">판다마켓 중고 거래</p>
                 </div>
               </div>
-              <img src="images/panda2.png" width="746" height="397" />
+              <img class="two-panda" src="images/panda2.png" width="746" height="397" />
             </div>
           </div>
         </article>
@@ -136,7 +126,7 @@ <h3>
     <footer>
       <div class="nav-bottom">
         <div class="left">
-          <p>©codeit - 2024</p>
+          <p class="codeit">©codeit - 2024</p>
         </div>
         <div class="center">
           <span class="policy"><a href="/privacy.html">Privacy Policy</a></span>
@@ -182,5 +172,11 @@ <h3>
         </ul>
       </div>
     </footer>
+    <div class="unsupported-screen">
+      <div class="unsupported-message">
+        현재 기기에서는 지원하지 않습니다.<br />
+        375px 이상의 화면에서 이용해 주세요.
+      </div>
+    </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/login.html b/login.html
index 39971551..e424a442 100644
--- a/login.html
+++ b/login.html
@@ -15,43 +15,45 @@
     <link rel="icon" href="/images/favicon.ico" />
     <link rel="stylesheet" href="css/base.css" />
     <link rel="stylesheet" href="css/reset.css" />
-    <link rel="stylesheet" href="css/index.css" />
-    <link rel="stylesheet" href="css/login.css" />
+    <link rel="stylesheet" href="css/auth.css" />
     <title>로그인</title>
   </head>
   <body>
     <main>
-        <a href="/">
-          <img src="images/pandamarket.png" width="396" height="132" />
-        </a>
+      <a class="logo-box" href="/">
+        <img class="logo" src="images/logo.png" />
+        <img class="pandamarket" src="images/pandamarket.png" />
+      </a>
       <form>
-        <div class="login-input email">
+        <div class="login-input">
           <label for="email">이메일</label>
-          <input type="email" id="email" />
+          <input type="email" id="email" placeholder="이메일을 입력해주세요" />
         </div>
         <div class="login-input">
           <label for="password">비밀번호</label>
           <div class="password-container">
-            <input type="password" id="password" />
-            <img
+            <input type="password" id="password" placeholder="비밀번호를 입력해주세요" />
+            <button type="button">
+              <img
               src="images/invisible-eye-icon.png"
               class="eye-icon"
               onclick="togglePasswordVisibility()"
-            />
+              />
+            </button>
           </div>
         </div>
-        <button type="submit">로그인</button> 
-        <div class="easy-login">
-          <div class="easy-login-box">
-            <p>간편 로그인하기</p>
-            <div class="easy-login-icons">
-              <a href="https://www.google.com/"><img src="images/google.png" width="40" height="40" /></a>
-              <a href="https://www.kakaocorp.com/page/"><img src="images/kakao.png" width="40" height="40" /></a>
-            </div>
+        <button class="btn" type="submit">로그인</button> 
+      </form>
+      <div class="easy-login">
+        <div class="easy-login-box">
+          <p>간편 로그인하기</p>
+          <div class="easy-login-icons">
+            <a href="https://www.google.com/"><img src="images/google.png" width="40" height="40" /></a>
+            <a href="https://www.kakaocorp.com/page/"><img src="images/kakao.png" width="40" height="40" /></a>
           </div>
         </div>
-      </form>
-      <p>판다마켓이 처음이신가요?&nbsp;<a class="signup" href="/signup.html">회원가입</span></p>
+      </div>
+      <p class="question">판다마켓이 처음이신가요?&nbsp;<a class="signup" href="/signup.html">회원가입</span></p>
     </main>
   </body>
 </html>
\ No newline at end of file
diff --git a/signup.html b/signup.html
index 4e588787..81b0715b 100644
--- a/signup.html
+++ b/signup.html
@@ -15,59 +15,63 @@
     <link rel="icon" href="/images/favicon.ico" />
     <link rel="stylesheet" href="css/base.css" />
     <link rel="stylesheet" href="css/reset.css" />
-    <link rel="stylesheet" href="css/login.css" />
+    <link rel="stylesheet" href="css/auth.css" />
     <title>로그인</title>
   </head>
   <body>
     <main>
-      <a href="/">
-        <img src="images/pandamarket.png" width="396" height="132" />
+      <a class="logo-box"href="/">
+        <img class="logo" src="images/logo.png" />
+          <img class="pandamarket" src="images/pandamarket.png" />
       </a>
       <form>
         <div class="login-input">
           <label for="email">이메일</label>
-          <input type="email" id="email" />
+          <input type="email" id="email" placeholder="이메일을 입력해주세요" />
         </div>
         <div class="login-input">
           <label for="nickname">닉네임</label>
-          <input type="text" id="nickname" />
+          <input type="text" id="nickname" placeholder="닉네임을 입력해주세요" />
         </div>
         <div class="login-input">
           <label for="password">비밀번호</label>
           <div class="password-container">
-            <input type="password" id="password" />
-            <img
+            <input type="password" id="password" placeholder="비밀번호를 입력해주세요" />
+            <button type="button">
+              <img
               src="images/invisible-eye-icon.png"
               class="eye-icon"
               onclick="togglePasswordVisibility()"
-            />
+            />  
           </div>
         </div>
         <div class="login-input">
           <label for="password-check">비밀번호 확인</label>
           <div class="password-container">
-            <input type="password" id="password-check" />
-            <img
+            <input type="password" id="password-check" placeholder="비밀번호를 다시 한 번 입력해주세요" />
+            <button type="button">
+              <img
               src="images/eye-icon.png"
               class="eye-icon"
               onclick="togglePasswordVisibility()"
             />
+            </button>
           </div>
         </div>
-        <button type="submit">회원가입</button>
-        <div class="easy-login">
-          <div class="easy-login-box">
-            <p>간편 로그인하기</p>
-            <div class="easy-login-icons">
-              <a href="https://www.google.com/"><img src="images/google.png" width="40" height="40" /></a>
-              <a href="https://www.kakaocorp.com/page/"><img src="images/kakao.png" width="40" height="40" /></a>
-            </div>
+        <button class="btn" type="submit">회원가입</button>
+      </form>
+      <div class="easy-login">
+        <div class="easy-login-box">
+          <p>간편 로그인하기</p>
+          <div class="easy-login-icons">
+            <a href="https://www.google.com/"><img src="images/google.png" width="40" height="40" /></a>
+            <a href="https://www.kakaocorp.com/page/"><img src="images/kakao.png" width="40" height="40" /></a>
           </div>
         </div>
-        <p>
-          이미 회원이신가요?&nbsp;<a class="login" href="/login.html">로그인</a>
-        </p>
-      </form>
+      </div>
+      <p class="question">
+        이미 회원이신가요?&nbsp;<a class="login" href="/login.html">로그인</a>
+      </p>
     </main>
   </body>
 </html>