diff --git a/Login/login.css b/Login/login.css
index ef4974e3..e24974b1 100644
--- a/Login/login.css
+++ b/Login/login.css
@@ -1,3 +1,5 @@
+@import url("../color.css");
+
 html,
 body {
   margin: 0;
@@ -9,7 +11,7 @@ body {
 
 main {
   margin-top: 70px;
-  background-color: #ffffff;
+  background-color: var(--white);
 }
 
 .login_main {
@@ -36,7 +38,7 @@ main {
 .login_content > h3 {
   font-size: 18px;
   font-weight: 700;
-  color: #1f2937;
+  color: var(--gray-800);
   margin-bottom: 16px;
 }
 
@@ -44,7 +46,7 @@ main {
 .input_wrapper {
   display: flex;
   align-items: center;
-  background-color: #f3f4f6;
+  background-color: var(--gray-100);
   height: 40px;
   border-radius: 12px;
   padding: 16px 24px;
@@ -54,7 +56,7 @@ main {
 }
 
 .input_wrapper:focus-within {
-  border-color: #3692ff; /* 포커스 상태 테두리 색상 */
+  border-color: var(--primary-100); /* 포커스 상태 테두리 색상 */
 }
 
 input {
@@ -69,7 +71,7 @@ input::placeholder {
   font-size: 16px;
   font-weight: 400;
   line-height: 26px;
-  color: #9ca3af;
+  color: var(--gray-400);
 }
 
 .input_icon {
@@ -84,8 +86,8 @@ input::placeholder {
 .btn_login2 {
   width: 640px;
   height: 56px;
-  background-color: #9ca3af;
-  color: #f3f4f6;
+  background-color: var(--gray-400);
+  color: var(--gray-100);
   border: none;
   border-radius: 40px;
   padding: 16px 124px;
@@ -111,7 +113,7 @@ input::placeholder {
   display: flex;
   text-align: center;
   align-items: center;
-  color: #1f2937;
+  color: var(--gray-800);
   font-size: 16px;
   justify-content: space-between;
   font-weight: 500;
@@ -141,5 +143,20 @@ input::placeholder {
 }
 
 .signup-link {
-  color: #3692ff;
+  color: var(--primary-100);
+}
+
+/*모바일 */
+@media (max-width: 480px) {
+  .login_content,
+  .btn_login2,
+  .sns_login_content {
+    width: calc(100% - 32px);
+    max-width: 400px;
+  }
+
+  .sns_login {
+    width: calc(100% - 32px);
+    max-width: 400px;
+  }
 }
diff --git a/Login/login.html b/Login/login.html
index e206ecc3..8548823c 100644
--- a/Login/login.html
+++ b/Login/login.html
@@ -14,14 +14,13 @@
     <main>
       <div class="login_main">
         <div class="login_header">
-          <a href="/13-Sprint-Mission/"
-            ><img src="../img/login/login_logo.svg"
-          /></a>
+          <a href="../index.html"><img src="../img/login/login_logo.svg" /></a>
         </div>
         <div class="login_content">
           <h3>이메일</h3>
           <div class="input_wrapper">
             <input
+              class="input_main"
               id="email"
               name="email"
               placeholder="이메일을 입력해주세요."
@@ -30,8 +29,9 @@ <h3>이메일</h3>
           <h3>비밀번호</h3>
           <div class="input_wrapper">
             <input
-              id="passwd"
-              name="passwd"
+              class="input_main"
+              id="password"
+              name="password"
               type="password"
               minlength="8"
               maxlength="20"
@@ -60,9 +60,7 @@ <h3>비밀번호</h3>
           </div>
           <div class="first_text">
             <a>판다마켓이 처음인가요? </a
-            ><a href="/13-Sprint-Mission/Signup/signup.html" class="signup-link"
-              >회원가입</a
-            >
+            ><a href="../Signup/signup.html" class="signup-link">회원가입</a>
           </div>
         </div>
       </div>
diff --git a/Signup/signup.css b/Signup/signup.css
index b59233f9..5c2f84e9 100644
--- a/Signup/signup.css
+++ b/Signup/signup.css
@@ -1,6 +1,8 @@
+@import url("color.css");
+
 main {
   margin-top: 70px;
-  background-color: #ffffff;
+  background-color: var(--white);
 }
 
 .signup_main {
diff --git a/Signup/signup.html b/Signup/signup.html
index df864888..f60659c0 100644
--- a/Signup/signup.html
+++ b/Signup/signup.html
@@ -14,9 +14,7 @@
     <main>
       <div class="signup_main">
         <div class="login_header">
-          <a href="/13-Sprint-Mission/"
-            ><img src="../img/login/login_logo.svg"
-          /></a>
+          <a href="../index.html"><img src="../img/login/login_logo.svg" /></a>
         </div>
         <div class="login_content">
           <h3>이메일</h3>
@@ -55,7 +53,7 @@ <h3>비밀번호 확인</h3>
               type="password"
               minlength="8"
               maxlength="20"
-              placeholder="비밀번호를  다시 입력해주세요."
+              placeholder="비밀번호를 다시 입력해주세요."
             />
             <img src="../img/login/btn_showpw.svg" class="input_icon" />
           </div>
@@ -80,9 +78,7 @@ <h3>비밀번호 확인</h3>
           </div>
           <div class="first_text">
             <a>이미 회원이신가요? </a
-            ><a href="/13-Sprint-Mission/Login/Login.html" class="signup-link"
-              >로그인</a
-            >
+            ><a href="../Login/Login.html" class="signup-link">로그인</a>
           </div>
         </div>
       </div>
diff --git a/color.css b/color.css
new file mode 100644
index 00000000..4ad71f6b
--- /dev/null
+++ b/color.css
@@ -0,0 +1,18 @@
+* {
+  --primary-50: #cfe5ff;
+  --primary-100: #3692ff;
+  --primary-200: #1967d6;
+  --primary-300: #1251aa;
+  --error: #f74747;
+  --black: #111322;
+  --white: #ffffff;
+  --gray-900: #111827;
+  --gray-800: #1f2937;
+  --gray-700: #374151;
+  --gray-600: #4b5563;
+  --gray-500: #6b7280;
+  --gray-400: #9ca3af;
+  --gray-200: #e5e7eb;
+  --gray-100: #f3f4f6;
+  --gray-950: #f9fafb;
+}
diff --git a/index.html b/index.html
index 50fb3760..119e5936 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,8 @@
   <head>
     <title>판다마켓</title>
     <meta charset="utf-8" />
+    <!-- 반응형 웹 -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- css 연결 -->
     <link
       rel="stylesheet"
@@ -18,7 +20,7 @@
         <a
           ><button
             class="btn_login"
-            onclick="location.href='/13-Sprint-Mission/Login/Login.html'"
+            onclick="location.href='./Login/Login.html'"
           >
             로그인
           </button></a
diff --git a/main.css b/main.css
index 243871ff..ef5b752a 100644
--- a/main.css
+++ b/main.css
@@ -1,3 +1,5 @@
+@import url("color.css");
+
 /* 글자 위 아래 공백 추가 */
 .spaced_font {
   line-height: 1.3;
@@ -8,7 +10,7 @@ header {
   position: fixed;
   top: 0;
   width: 100%;
-  background-color: white;
+  background-color: var(--white);
   z-index: 1;
 }
 header > nav {
@@ -23,8 +25,8 @@ header > nav {
 .btn_login {
   width: 128px;
   height: 48px;
-  background-color: #3692ff;
-  color: #ffffff;
+  background-color: var(--primary-100);
+  color: var(--white);
   border: none;
   border-radius: 8px;
   padding: 12px 23px;
@@ -41,7 +43,7 @@ main {
 .start_main {
   width: 100%;
   height: 540px;
-  background-color: #cfe5ff;
+  background-color: var(--primary-50);
 }
 .start_main2 {
   max-width: 1110px;
@@ -67,8 +69,8 @@ main {
   margin-top: 190px;
   width: 357px;
   height: 56px;
-  background-color: #3692ff;
-  color: #ffffff;
+  background-color: var(--primary-100);
+  color: var(--white);
   border: none;
   border-radius: 40px;
   padding: 16px 124px;
@@ -104,7 +106,7 @@ main {
 
 .section_text > h2,
 .section_text2 > h2 {
-  color: #3692ff;
+  color: var(--primary-100);
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 10px;
@@ -129,7 +131,7 @@ main {
 .bottom_main {
   width: 100%;
   height: 540px;
-  background-color: #cfe5ff;
+  background-color: var(--primary-50);
 }
 
 .bottom_main2 {
@@ -157,7 +159,7 @@ main {
 
 /* footer */
 footer {
-  background-color: #111827;
+  background-color: var(--gray-900);
   height: 160px;
 }
 
@@ -171,7 +173,7 @@ footer > div {
 }
 
 .copyright {
-  color: #9ca3af;
+  color: var(--gray-400);
   font-size: 16px;
   font-weight: 400;
 }
@@ -182,7 +184,7 @@ footer > div {
 }
 
 .footer_nav > a {
-  color: #e5e7eb;
+  color: var(--gray-200);
   font-size: 16px;
   font-weight: 400;
   text-decoration: none;
@@ -209,3 +211,100 @@ footer > div {
     padding: 0 50px;
   }
 }
+
+/* 태블릿 */
+@media (max-width: 768px) {
+  header > nav {
+    padding: 0 24px;
+  }
+
+  .logo {
+    margin-left: 0;
+  }
+
+  .btn_login {
+    margin-right: 0;
+  }
+
+  .header_container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
+/* 모바일 */
+
+@media (max-width: 480px) {
+  header > nav {
+    padding: 0 16px;
+  }
+
+  .start_main2 > h1 {
+    top: -50px;
+  }
+
+  .bottom_main2 > h2 {
+    align-items: center;
+    text-align: center;
+    top: -50px;
+  }
+
+  .logo {
+    margin-left: 0;
+  }
+
+  .btn_login {
+    margin-right: 0;
+  }
+
+  .header_container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  /* start_main2 내부 요소 순서 변경 */
+  .start_main2 {
+    display: flex;
+    flex-direction: column-reverse; /* img가 아래로 가도록 변경 */
+    align-items: center;
+    text-align: center;
+  }
+
+  .start_main2 > img {
+    position: static;
+    height: auto;
+    max-width: 100%;
+  }
+
+  .bottom_main2 > img {
+    position: static;
+    height: auto;
+    max-width: 100%;
+    margin-top: 150px;
+  }
+
+  .btn_item {
+    margin-bottom: 20px; /* 버튼과 이미지 간 간격 조정 */
+  }
+
+  /* section 내부 요소 순서 변경 */
+  .section {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .section_img {
+    width: 100%;
+    height: auto;
+    max-width: 90%;
+  }
+
+  .section_text {
+    width: 100%;
+    max-width: 90%;
+  }
+}
diff --git a/reset.css b/reset.css
index ff0b5eeb..3d54c02f 100644
--- a/reset.css
+++ b/reset.css
@@ -6,25 +6,93 @@
 /* prettier 비활성화 */
 /* prettier-ignore */
 
-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;
+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;
 }
 /* HTML5 display-role reset for older browsers */
 article,