diff --git a/panda_mall/css/layout.css b/panda_mall/css/layout.css
index c8c7bac1..d59c1815 100644
--- a/panda_mall/css/layout.css
+++ b/panda_mall/css/layout.css
@@ -1,47 +1,46 @@
 * { box-sizing:border-box; margin:0; }
 
-
 @font-face {
   font-family: 'Pretendard-Regular';
   src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
 }
-
 body { font-family: 'Pretendard-Regular'; font-size:15px;  font-weight: 400; color:var(--Secondary); }
 a { text-decoration: none; }
 
 .inner,.box_inner { margin:0 auto;  min-width:325px; max-width:1120px; }
 
-:root {
-  --Primary: #3692FF;
-  --Secondary: #374151;
-  --Secondary_200:#E5E7EB;
-  --Secondary_400:#9CA3AF;
-  --Secondary_900:#111827;
-}
-
-.font_1 { font-size:40px; }
-.font_2 { font-size:24px; }
-.font_3 { font-size:18px; }
+input:hover,
+input:focus {outline:1px solid #3692FF;}
+input::placeholder { color:#9CA3AF; }
+input[type='submit'] { outline:0; }
 
+/* 상단 */
+header { position:sticky; top:0; width:100%; background-color: #fff; z-index: 9999; }
 header .inner { display:flex; justify-content: space-between; align-items: center; padding:13px 0; }
 header .inner .logo_top {  }
 header .inner .logo_top img { height:40px;  }
 header .inner .logo_top img:last-child { height:35px; }
 header .inner .login_btn {  }
 
+
+
+/* 내용 _ mainimg */
 .main_title { width:100%; background-color: #CFE5FF ; height: 540px; }
 .main_title .inner { 
   position:relative; 
   height:100%; 
-  background-image: url(/images/Img_home_top.png); 
+  background-image: url(../images/Img_home_top.png); 
   background-position: bottom right; 
   background-repeat: no-repeat; 
 }
 .main_title h1 { font-weight:700; margin-bottom:25px; }
 .main_title a {  }
 .main_title .text_box { position:absolute; top:40%; left:0; }
+
+
+/* 내용 _ section */
 .section { height: 720px;  }
 .section .box_inner { 
   display:flex; height: 100%; align-items: center; 
@@ -67,7 +66,7 @@ header .inner .login_btn {  }
   font-weight: 700;
   color:var(--Primary);
 }
-.section .box_inner .box h1 { 
+.section .box_inner .box h2 { 
   font-weight: 700; 
   margin-top:12px;
   margin-bottom:24px;
@@ -87,7 +86,7 @@ header .inner .login_btn {  }
 .section._4 .inner {
   position:relative; 
   height:100%; 
-  background-image: url(/images/Img_home_bottom.png); 
+  background-image: url(../images/Img_home_bottom.png); 
   background-position: bottom right; 
   background-repeat: no-repeat; 
   margin-top:138px;
@@ -98,8 +97,9 @@ header .inner .login_btn {  }
 
 }
 
+/* 하단 */
 footer { 
-  background-color: var(--Secondary_900);
+  background-color: var(--Cool_Gray_900);
 }
 footer .inner {
   position:relative;
@@ -109,7 +109,7 @@ footer .inner {
   padding:32px 0 108px;
 }
 footer .inner .left {
-  color:var(--Secondary_400);
+  color:var(--Cool_Gray_400);
 }
 
 footer .inner .center {
@@ -118,7 +118,7 @@ footer .inner .center {
 }
 
 footer .inner .center a {
-  color:var(--Secondary_400);
+  color:var(--Cool_Gray_400);
 }
 
 footer .inner .right {
@@ -150,23 +150,23 @@ footer .inner .right img {
 }
 @media (max-width: 780px) {
   
-  .font_1 { font-size:1.3rem; }
-  .font_2 { font-size:1em; }
-  .font_3 { font-size:0.8rem; }
+  .font_1 { font-size:1.8rem; }
+  .font_2 { font-size:1.2em; }
+  .font_3 { font-size:1.3rem; }
   .section._4 .inner, .main_title .inner { background-size: contain; }
   
   .section { height:auto; }
-  .section .box_inner { padding:100px 0; }
+  .section .box_inner { padding:100px 0 0; height:auto;}
   .section .box_inner .box { flex-direction:column; width:100%; gap: 10px; align-items: stretch; }
   .section .box_inner .box > div { padding: 0 0 24px; }
-  .section .box_inner .box > div h1 { margin-top: 12px; margin-bottom: 12px; }
+  .section .box_inner .box > div h2 { margin-top: 12px; margin-bottom: 12px; }
   .section .box_inner .box > div br { display:none; }
   .section .box_inner .box img { width:100%; }
 }
 
 @media (max-width: 375px){
-  a.btn._a { padding: 16px 44px; }
+  a.btn._roundedM { padding: 16px 44px; }
   header .inner .logo_top img:first-child { display:none; }
   footer .inner .left { position: absolute; top:65px; }
-  .section { height:500px; }
+  .section .box_inner { padding:50px 0 0;}
 }
diff --git a/panda_mall/css/page.css b/panda_mall/css/page.css
new file mode 100644
index 00000000..9f46ebc5
--- /dev/null
+++ b/panda_mall/css/page.css
@@ -0,0 +1,55 @@
+
+
+
+/* 로그인 페이지 */
+
+#login { min-height: 100vh; display: flex; align-items: center; }
+.login_wrap { width:95%; max-width:640px; margin:0 auto; text-align: center; }
+.login_wrap .logo { margin-bottom:55px; }
+.login_wrap .logo a {  }
+.login_wrap .logo a img { vertical-align: middle; }
+.login_wrap .logo a img:first-child { height:100px; margin-right:22px; }
+.login_wrap .logo a img:last-child { height:50px; }
+
+.login_wrap .login_box { text-align: left; }
+.login_wrap .login_box label { display:block; font-weight:700; font-size:18px; margin-bottom:16px; }
+.login_wrap .login_box input[type='email'],
+.login_wrap .login_box input[type='password'],
+.login_wrap .login_box input[type='text']  { 
+  display:block; width:100%; margin-bottom:24px; 
+  padding:15px 24px; background-color: var(--Cool_Gray_100); 
+  border-radius: 12px; border:0; 
+}
+
+.login_wrap .login_box input[type='password']{
+  background-image : url('../images/Variant202.png');
+  background-position: center right 20px;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+.login_wrap .login_box input[type='password'].active {
+  background-image : url('../images/Default01.png');
+}
+.login_wrap .login_box input[type='submit'] { 
+  display:block; width:100%; 
+  border-radius: 9999px; 
+  padding:12px 0; color: var(--Cool_Gray_100); 
+  font-size:20px; font-weight:600; line-height:32px;
+  background-color: var(--Primary); border:0; cursor: pointer;
+}
+.login_wrap .login_box input[type='submit']:disabled { background-color: #9CA3AF; }
+
+.login_wrap .sns_login {  
+  background-color: #E6F2FF; color:#1F2937;
+  padding:14px 23px; margin-top:24px; margin-bottom:24px; border-radius: 8px;
+  display:flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.login_wrap .sns_icon {  }
+.login_wrap .sns_icon a { display:inline-block; margin-left:8px; }
+.login_wrap .sns_icon a img { height: 42px; width:42px; }
+
+.login_wrap .member_sub_box {  }
+.login_wrap .member_sub_box span { font-size:14px; }
+.login_wrap .member_sub_box span a {  }
\ No newline at end of file
diff --git a/panda_mall/css/ui.css b/panda_mall/css/ui.css
index cb1770a5..d5e3bb8e 100644
--- a/panda_mall/css/ui.css
+++ b/panda_mall/css/ui.css
@@ -1,4 +1,20 @@
 
+:root {
+  --Secondary: #374151;
+  --Secondary_200:#E5E7EB;
+
+  
+  --Primary: #3692FF;
+  --Cool_Gray_900:#111827;
+  --Cool_Gray_800:#1F2937;
+  --Cool_Gray_700:#374151;
+  --Cool_Gray_600:#4B5563;
+  --Cool_Gray_500:#6B7280;
+  --Cool_Gray_400:#9CA3AF;
+  --Cool_Gray_200:#E5E7EB;
+  --Cool_Gray_100:#F3F4F6;
+  --Cool_Gray_50:#F9FAFB;
+}
 
 
 .btn { background-color: #3692FF;  color:#fff; }
@@ -6,5 +22,9 @@
 .btn:active { background-color: #1251AA; color:#fff; }
 .btn.n_act { background-color: #9CA3AF; color:#fff; }
 
-.btn._a { display:inline-block; padding:16px 124px; border-radius: 50px; }
-.btn._b { display:inline-block; padding:12px 20px;  border-radius: 8px; }
\ No newline at end of file
+.btn._roundedM { display:inline-block; padding:16px 124px; border-radius: 50px; }
+.btn._roundedS { display:inline-block; padding:12px 20px;  border-radius: 8px; }
+
+.font_1 { font-size:40px; }
+.font_2 { font-size:24px; }
+.font_3 { font-size:18px; }
\ No newline at end of file
diff --git a/panda_mall/faq.html b/panda_mall/faq.html
index 9b4a720c..0104f01f 100644
--- a/panda_mall/faq.html
+++ b/panda_mall/faq.html
@@ -3,31 +3,31 @@
   <head>
     <meta charset="utf-8" />
     
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
     <meta name="Description" content="안녕하세요. 판다마켓입니다." />
 
-    <meta property="og:image" content="/images/Img_home_01.png">
+    <meta property="og:image" content="images/Img_home_01.png">
     <meta property="og:title" content="판다마켓,쇼핑몰">
     <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
     <meta property="og:url" content="">
-    <link rel="shorcut icon" href="/images/logo_02.ico">
+    <link rel="shorcut icon" href="images/logo_02.ico">
     <title>판다마켓 </title>
-    <link rel="stylesheet" href="/css/layout.css">
-    <link rel="stylesheet" href="/css/ui.css">
+    <link rel="stylesheet" href="css/layout.css">
+    <link rel="stylesheet" href="css/ui.css">
   </head>
   <body>
     <header> 
       <div class="inner">
-        <a href="/" class="logo_top">
-          <img src="/images/logo_01.png">
-          <img src="/images/logo_03.png">
+        <a href="index.html" class="logo_top">
+          <img src="images/logo_01.png">
+          <img src="images/logo_03.png">
         </a>
         <div class="login_btn">
-          <a href="/login.html" class="btn _b">로그인</a>
+          <a href="login.html" class="btn _b">로그인</a>
         </div>
       </div>
     </header>
@@ -40,14 +40,14 @@
           <span>©codeit - 2024</span>
         </div>
         <div class="center">
-          <a href="/privacy.html">Privacy Policy</a>
-          <a href="/faq.html">FAQ</a>
+          <a href="privacy.html">Privacy Policy</a>
+          <a href="faq.html">FAQ</a>
         </div>
         <div class="right">
-          <a href="https://www.facebook.com/" target="_blank"><img src="/images/ic_facebook.png"></a>
-          <a href="https://x.com/" target="_blank"><img src="/images/ic_twitter.png"></a>
-          <a href="https://www.youtube.com/" target="_blank"><img src="/images/ic_youtube.png"></a>
-          <a href="https://www.instagram.com/" target="_blank"><img src="/images/ic_instagram.png"></a>
+          <a href="https://www.facebook.com/" target="_blank"><img src="images/ic_facebook.png"></a>
+          <a href="https://x.com/" target="_blank"><img src="images/ic_twitter.png"></a>
+          <a href="https://www.youtube.com/" target="_blank"><img src="images/ic_youtube.png"></a>
+          <a href="https://www.instagram.com/" target="_blank"><img src="images/ic_instagram.png"></a>
         </div>
       </div>
     </footer>
diff --git a/panda_mall/images/Default_Property 1=Default01.png b/panda_mall/images/Default01.png
similarity index 100%
rename from panda_mall/images/Default_Property 1=Default01.png
rename to panda_mall/images/Default01.png
diff --git a/panda_mall/images/Default_Property 1=Variant202.png b/panda_mall/images/Variant202.png
similarity index 100%
rename from panda_mall/images/Default_Property 1=Variant202.png
rename to panda_mall/images/Variant202.png
diff --git a/panda_mall/images/Vector.png b/panda_mall/images/Vector.png
new file mode 100644
index 00000000..fd11075b
Binary files /dev/null and b/panda_mall/images/Vector.png differ
diff --git a/panda_mall/images/gg_icon.png b/panda_mall/images/gg_icon.png
new file mode 100644
index 00000000..f75dc761
Binary files /dev/null and b/panda_mall/images/gg_icon.png differ
diff --git a/panda_mall/images/google.png b/panda_mall/images/google.png
new file mode 100644
index 00000000..0c4b3886
Binary files /dev/null and b/panda_mall/images/google.png differ
diff --git a/panda_mall/images/kakao_icon.png b/panda_mall/images/kakao_icon.png
new file mode 100644
index 00000000..bd767800
Binary files /dev/null and b/panda_mall/images/kakao_icon.png differ
diff --git a/panda_mall/index.html b/panda_mall/index.html
index a63e5939..ea1a487a 100644
--- a/panda_mall/index.html
+++ b/panda_mall/index.html
@@ -1,32 +1,32 @@
 
-<html>
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
     <meta name="Description" content="안녕하세요. 판다마켓입니다." />
-    <meta property="og:image" content="/images/Img_home_01.png">
+    <meta property="og:image" content="images/Img_home_01.png">
     <meta property="og:title" content="판다마켓,쇼핑몰">
     <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
     <meta property="og:url" content="">
-    <link rel="shorcut icon" href="/images/logo_02.ico">
+    <link rel="shorcut icon" href="images/logo_02.ico">
     <title>판다마켓</title>
-    <link rel="stylesheet" href="/css/layout.css">
-    <link rel="stylesheet" href="/css/ui.css">
+    <link rel="stylesheet" type="text/css" href="css/layout.css">
+    <link rel="stylesheet" type="text/css" href="css/ui.css">
   </head>
   <body>
     <header> 
       <div class="inner">
-        <a href="/" class="logo_top">
-          <img src="/images/logo_01.png">
-          <img src="/images/logo_03.png">
+        <a href="index.html" class="logo_top">
+          <img src="images/logo_01.png" alt="logo img">
+          <img src="images/logo_03.png" alt="logo text">
         </a>
         <div class="login_btn">
-          <a href="/login.html" class="btn _b">로그인</a>
+          <a href="login.html" class="btn _roundedS">로그인</a>
         </div>
       </div>
     </header>
@@ -38,17 +38,17 @@ <h1 class="font_1">
               일상의 모든 물건을<br>
               거래해 보세요
             </h1>
-            <a href="/items.html" class="btn _a">구경하러 가기</a>
+            <a href="items.html" class="btn _roundedM">구경하러 가기</a>
           </div>
         </div>
       </section>
       <section class="section _1">
         <div class="box_inner">
           <div class="box">
-            <img src="/images/Img_home_01.png" alt="Hot item">
+            <img src="images/Img_home_01.png" alt="Hot item">
             <div>
               <h4 class="font_3">Hot item</h4>
-              <h1 class="font_1">인기 상품을<br>확인해 보세요</h1>
+              <h2 class="font_1">인기 상품을<br>확인해 보세요</h2>
               <p class="font_2">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
             </div>
           </div>
@@ -57,11 +57,11 @@ <h1 class="font_1">인기 상품을<br>확인해 보세요</h1>
       <section class="section _2">
         <div class="box_inner">
           <div class="box">
-            <img src="/images/Img_home_02.png" alt="Search">
+            <img src="images/Img_home_02.png" alt="Search">
             <div>
               <h4 class="font_3">Search</h4>
-              <h1 class="font_1">구매를 원하는<br>
-                상품을 검색하세요</h1>
+              <h2 class="font_1">구매를 원하는<br>
+                상품을 검색하세요</h2>
               <p class="font_2">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
             </div>
         </div>
@@ -69,10 +69,10 @@ <h1 class="font_1">구매를 원하는<br>
       <section class="section _3">
         <div class="box_inner">
           <div class="box">
-            <img src="/images/Img_home_03.png" alt="Register">
+            <img src="images/Img_home_03.png" alt="Register">
             <div>
               <h4 class="font_3">Register</h4>
-              <h1 class="font_1">판매를 원하는<br>상품을 등록하세요</h1>
+              <h2 class="font_1">판매를 원하는<br>상품을 등록하세요</h2>
               <p class="font_2">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
             </div>
         </div>
@@ -81,10 +81,10 @@ <h1 class="font_1">판매를 원하는<br>상품을 등록하세요</h1>
       <section class="section _4">
         <div class="inner">
           <div class="text_box">
-            <h1 class="font_1">
+            <h2 class="font_1">
               믿을 수 있는<br>
               판다마켓 중고 거래
-            </h1>
+            </h2>
           </div>
         </div>
       </section>
@@ -95,14 +95,14 @@ <h1 class="font_1">
           <span>©codeit - 2024</span>
         </div>
         <div class="center">
-          <a href="/privacy.html">Privacy Policy</a>
-          <a href="/faq.html">FAQ</a>
+          <a href="privacy.html">Privacy Policy</a>
+          <a href="faq.html">FAQ</a>
         </div>
         <div class="right">
-          <a href="https://www.facebook.com/" target="_blank"><img src="/images/ic_facebook.png"></a>
-          <a href="https://x.com/" target="_blank"><img src="/images/ic_twitter.png"></a>
-          <a href="https://www.youtube.com/" target="_blank"><img src="/images/ic_youtube.png"></a>
-          <a href="https://www.instagram.com/" target="_blank"><img src="/images/ic_instagram.png"></a>
+          <a href="https://www.facebook.com/" target="_blank"><img src="images/ic_facebook.png" alt="sns1"></a>
+          <a href="https://x.com/" target="_blank"><img src="images/ic_twitter.png" alt="sns2"></a>
+          <a href="https://www.youtube.com/" target="_blank"><img src="images/ic_youtube.png" alt="sns3"></a>
+          <a href="https://www.instagram.com/" target="_blank"><img src="images/ic_instagram.png" alt="sns4"></a>
         </div>
       </div>
     </footer>
diff --git a/panda_mall/items.html b/panda_mall/items.html
index 7fcf1b84..0104f01f 100644
--- a/panda_mall/items.html
+++ b/panda_mall/items.html
@@ -3,31 +3,31 @@
   <head>
     <meta charset="utf-8" />
     
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
     <meta name="Description" content="안녕하세요. 판다마켓입니다." />
 
-    <meta property="og:image" content="/images/Img_home_01.png">
+    <meta property="og:image" content="images/Img_home_01.png">
     <meta property="og:title" content="판다마켓,쇼핑몰">
     <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
     <meta property="og:url" content="">
-    <link rel="shorcut icon" href="/images/logo_02.ico">
-    <title>판다마켓</title>
-    <link rel="stylesheet" href="/css/layout.css">
-    <link rel="stylesheet" href="/css/ui.css">
+    <link rel="shorcut icon" href="images/logo_02.ico">
+    <title>판다마켓 </title>
+    <link rel="stylesheet" href="css/layout.css">
+    <link rel="stylesheet" href="css/ui.css">
   </head>
   <body>
     <header> 
       <div class="inner">
-        <a href="/" class="logo_top">
-          <img src="/images/logo_01.png">
-          <img src="/images/logo_03.png">
+        <a href="index.html" class="logo_top">
+          <img src="images/logo_01.png">
+          <img src="images/logo_03.png">
         </a>
         <div class="login_btn">
-          <a href="/login.html" class="btn _b">로그인</a>
+          <a href="login.html" class="btn _b">로그인</a>
         </div>
       </div>
     </header>
@@ -40,14 +40,14 @@
           <span>©codeit - 2024</span>
         </div>
         <div class="center">
-          <a href="/privacy.html">Privacy Policy</a>
-          <a href="/faq.html">FAQ</a>
+          <a href="privacy.html">Privacy Policy</a>
+          <a href="faq.html">FAQ</a>
         </div>
         <div class="right">
-          <a href="https://www.facebook.com/" target="_blank"><img src="/images/ic_facebook.png"></a>
-          <a href="https://x.com/" target="_blank"><img src="/images/ic_twitter.png"></a>
-          <a href="https://www.youtube.com/" target="_blank"><img src="/images/ic_youtube.png"></a>
-          <a href="https://www.instagram.com/" target="_blank"><img src="/images/ic_instagram.png"></a>
+          <a href="https://www.facebook.com/" target="_blank"><img src="images/ic_facebook.png"></a>
+          <a href="https://x.com/" target="_blank"><img src="images/ic_twitter.png"></a>
+          <a href="https://www.youtube.com/" target="_blank"><img src="images/ic_youtube.png"></a>
+          <a href="https://www.instagram.com/" target="_blank"><img src="images/ic_instagram.png"></a>
         </div>
       </div>
     </footer>
diff --git a/panda_mall/login.html b/panda_mall/login.html
index 9b4a720c..c0b30e0a 100644
--- a/panda_mall/login.html
+++ b/panda_mall/login.html
@@ -1,55 +1,62 @@
 
-<html>
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
     <meta name="Description" content="안녕하세요. 판다마켓입니다." />
-
-    <meta property="og:image" content="/images/Img_home_01.png">
+    <meta property="og:image" content="images/Img_home_01.png">
     <meta property="og:title" content="판다마켓,쇼핑몰">
     <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
     <meta property="og:url" content="">
-    <link rel="shorcut icon" href="/images/logo_02.ico">
-    <title>판다마켓 </title>
-    <link rel="stylesheet" href="/css/layout.css">
-    <link rel="stylesheet" href="/css/ui.css">
+    <link rel="shorcut icon" href="images/logo_02.ico">
+    <title>판다마켓</title>
+    <link rel="stylesheet" type="text/css" href="css/layout.css">
+    <link rel="stylesheet" type="text/css" href="css/ui.css">
+    <link rel="stylesheet" type="text/css" href="css/page.css">
   </head>
-  <body>
-    <header> 
-      <div class="inner">
-        <a href="/" class="logo_top">
-          <img src="/images/logo_01.png">
-          <img src="/images/logo_03.png">
+  <body id="login">
+    <main class="login_wrap">
+      <div class="logo">
+        <a href="index.html" class="logo_top">
+          <img src="images/logo_01.png" alt="logo img">
+          <img src="images/logo_03.png" alt="logo text">
         </a>
-        <div class="login_btn">
-          <a href="/login.html" class="btn _b">로그인</a>
-        </div>
       </div>
-    </header>
-    <main>
-       
-    </main>
-    <footer>
-      <div class="inner">
-        <div class="left">
-          <span>©codeit - 2024</span>
-        </div>
-        <div class="center">
-          <a href="/privacy.html">Privacy Policy</a>
-          <a href="/faq.html">FAQ</a>
-        </div>
-        <div class="right">
-          <a href="https://www.facebook.com/" target="_blank"><img src="/images/ic_facebook.png"></a>
-          <a href="https://x.com/" target="_blank"><img src="/images/ic_twitter.png"></a>
-          <a href="https://www.youtube.com/" target="_blank"><img src="/images/ic_youtube.png"></a>
-          <a href="https://www.instagram.com/" target="_blank"><img src="/images/ic_instagram.png"></a>
+      <div class="login_box">
+        <form onchange="login_check()">
+          <label for="login_email">이메일</label>
+          <input id='login_email' type='email' placeholder="이메일을 입력해주세요"/>
+          <label for="login_pwd">비밀번호</label>
+          <input id='login_pwd' type='password' placeholder="비밀번호를 입력해주세요"/>
+          <input type="submit" id="submit" value="로그인" disabled>
+        </form>
+      </div>
+      <div class="sns_login">
+        <div class="sns_txt">간편 로그인하기</div>
+        <div class="sns_icon">
+          <a href="https://www.google.com/" class="sns_gg"><img src="images/gg_icon.png" alt="sns_icon1"></a>
+          <a href="https://www.kakaocorp.com/page/" class="sns_kt"><img src="images/kakao_icon.png" alt="sns_icon2"></a>
         </div>
       </div>
-    </footer>
+      <div class="member_sub_box">
+        <span>판다마켓은 처음이신가요? <a href="signup.html">회원가입</a></span>
+      </div>
+    </main>
+    <script>
+      function login_check(){
+        let in_email = document.getElementById('login_email').value;
+        let in_pwd = document.getElementById('login_pwd').value;
+        if( in_email.length > 0 && in_pwd.length > 0 ){
+          document.getElementById('submit').disabled = false; 
+        } else {
+          document.getElementById('submit').disabled = true;
+        }
+      }
+    </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/panda_mall/privacy.html b/panda_mall/privacy.html
index 9b4a720c..0104f01f 100644
--- a/panda_mall/privacy.html
+++ b/panda_mall/privacy.html
@@ -3,31 +3,31 @@
   <head>
     <meta charset="utf-8" />
     
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
     <meta name="Description" content="안녕하세요. 판다마켓입니다." />
 
-    <meta property="og:image" content="/images/Img_home_01.png">
+    <meta property="og:image" content="images/Img_home_01.png">
     <meta property="og:title" content="판다마켓,쇼핑몰">
     <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
     <meta property="og:url" content="">
-    <link rel="shorcut icon" href="/images/logo_02.ico">
+    <link rel="shorcut icon" href="images/logo_02.ico">
     <title>판다마켓 </title>
-    <link rel="stylesheet" href="/css/layout.css">
-    <link rel="stylesheet" href="/css/ui.css">
+    <link rel="stylesheet" href="css/layout.css">
+    <link rel="stylesheet" href="css/ui.css">
   </head>
   <body>
     <header> 
       <div class="inner">
-        <a href="/" class="logo_top">
-          <img src="/images/logo_01.png">
-          <img src="/images/logo_03.png">
+        <a href="index.html" class="logo_top">
+          <img src="images/logo_01.png">
+          <img src="images/logo_03.png">
         </a>
         <div class="login_btn">
-          <a href="/login.html" class="btn _b">로그인</a>
+          <a href="login.html" class="btn _b">로그인</a>
         </div>
       </div>
     </header>
@@ -40,14 +40,14 @@
           <span>©codeit - 2024</span>
         </div>
         <div class="center">
-          <a href="/privacy.html">Privacy Policy</a>
-          <a href="/faq.html">FAQ</a>
+          <a href="privacy.html">Privacy Policy</a>
+          <a href="faq.html">FAQ</a>
         </div>
         <div class="right">
-          <a href="https://www.facebook.com/" target="_blank"><img src="/images/ic_facebook.png"></a>
-          <a href="https://x.com/" target="_blank"><img src="/images/ic_twitter.png"></a>
-          <a href="https://www.youtube.com/" target="_blank"><img src="/images/ic_youtube.png"></a>
-          <a href="https://www.instagram.com/" target="_blank"><img src="/images/ic_instagram.png"></a>
+          <a href="https://www.facebook.com/" target="_blank"><img src="images/ic_facebook.png"></a>
+          <a href="https://x.com/" target="_blank"><img src="images/ic_twitter.png"></a>
+          <a href="https://www.youtube.com/" target="_blank"><img src="images/ic_youtube.png"></a>
+          <a href="https://www.instagram.com/" target="_blank"><img src="images/ic_instagram.png"></a>
         </div>
       </div>
     </footer>
diff --git a/panda_mall/signup.html b/panda_mall/signup.html
new file mode 100644
index 00000000..ede3d0d6
--- /dev/null
+++ b/panda_mall/signup.html
@@ -0,0 +1,68 @@
+
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="robots" content="noindex">
+    <meta name="Keywords" content="판다마켓,쇼핑몰" />
+    <meta name="Description" content="안녕하세요. 판다마켓입니다." />
+    <meta property="og:image" content="images/Img_home_01.png">
+    <meta property="og:title" content="판다마켓,쇼핑몰">
+    <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
+    <meta property="og:url" content="">
+    <link rel="shorcut icon" href="images/logo_02.ico">
+    <title>판다마켓</title>
+    <link rel="stylesheet" type="text/css" href="css/layout.css">
+    <link rel="stylesheet" type="text/css" href="css/ui.css">
+    <link rel="stylesheet" type="text/css" href="css/page.css">
+  </head>
+  <body id="login">
+    <main class="login_wrap">
+      <div class="logo">
+        <a href="index.html" class="logo_top">
+          <img src="images/logo_01.png" alt="logo img">
+          <img src="images/logo_03.png" alt="logo text">
+        </a>
+      </div>
+      <div class="login_box">
+        <form onchange="login_check()">
+          <label for="login_email">이메일</label>
+          <input id='login_email' type='email' placeholder="이메일을 입력해주세요"/>
+          <label for="login_name">닉네임</label>
+          <input id='login_name' type='text' placeholder="닉네임을 입력해주세요"/>
+          <label for="login_pwd">비밀번호</label>
+          <input id='login_pwd' type='password' placeholder="비밀번호를 입력해주세요"/>
+          <label for="login_pwd_check">비밀번호 확인</label>
+          <input id='login_pwd_check' type='password' placeholder="비밀번호를 다시 입력해주세요"/>
+          <input type="submit" id="submit" value="회원가입" disabled>
+        </form>
+      </div>
+      <div class="sns_login">
+        <div class="sns_txt">간편 로그인하기</div>
+        <div class="sns_icon">
+          <a href="https://www.google.com/" class="sns_gg"><img src="images/gg_icon.png" alt="sns_icon1"></a>
+          <a href="https://www.kakaocorp.com/page/" class="sns_kt"><img src="images/kakao_icon.png" alt="sns_icon2"></a>
+        </div>
+      </div>
+      <div class="member_sub_box">
+        <span>이미 회원이신가요? <a href="login.html">로그인</a></span>
+      </div>
+    </main>
+    <script>
+      function login_check(){
+        let in_email = document.getElementById('login_email').value;
+        let in_name = document.getElementById('login_name').value;
+        let in_pwd = document.getElementById('login_pwd').value;
+        let in_pwd_check = document.getElementById('login_pwd_check').value;
+        if( in_email.length > 0 && in_name.length > 0 && in_pwd.length > 0 && in_pwd_check.length > 0 ){
+          document.getElementById('submit').disabled = false; 
+        } else {
+          document.getElementById('submit').disabled = true;
+        }
+      }
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/panda_mall/ui_test.html b/panda_mall/ui_test.html
index 509ede8d..cb36e5eb 100644
--- a/panda_mall/ui_test.html
+++ b/panda_mall/ui_test.html
@@ -3,21 +3,21 @@
   <head>
     <meta charset="utf-8" />
     
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
     <meta name="Description" content="안녕하세요. 판다마켓입니다." />
 
-    <meta property="og:image" content="/images/Img_home_01.png">
+    <meta property="og:image" content="images/Img_home_01.png">
     <meta property="og:title" content="판다마켓,쇼핑몰">
     <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
     <meta property="og:url" content="">
-    <link rel="shorcut icon" href="/images/logo_02.ico">
+    <link rel="shorcut icon" href="images/logo_02.ico">
     <title>판다마켓 </title>
-    <link rel="stylesheet" href="/css/layout.css">
-    <link rel="stylesheet" href="/css/ui.css">
+    <link rel="stylesheet" href="css/layout.css">
+    <link rel="stylesheet" href="css/ui.css">
   </head>
   <body>