diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6e20c79..2b5106a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -92,8 +92,8 @@ export const Header: React.FC = () => {
 
   return (
     <div className={styles.header}>
-      <div className={styles.inner}>
-        <div className={styles.headerTop}>
+      <div className={styles.headerTop}>
+        <div className={styles.inner}>
           <a href="/">
             <img
               src="https://colley.market/web/upload/category/logo/9dec339bd19e5e585ab528ff4c0b5dad_dATXM62tzO_5_top.jpg"
@@ -157,69 +157,114 @@ export const Header: React.FC = () => {
             </div>
           </div>
         </div>
-        <div
-          className={`${scrollActive ? styles['fixed'] : ''} ${
-            styles['navigation']
-          }`}>
-          <ul className={styles.navInner}>
-            <li>
-              <a href="/productlist">ALL</a>
-            </li>
-            <li>
-              <a href="/productlist?category=NEW">NEW</a>
-            </li>
-            <li>
-              <a href="/productlist?category=BEST">BEST</a>
-            </li>
-            <li>
-              <a href="/productlist?category=LIVING">
-                Living
-                <ul className={styles.dropdown}>
-                  <li>
-                    <a href="/">테이블</a>
-                  </li>
-                  <li>
-                    <a href="/">거실화</a>
-                  </li>
-                  <li>
-                    <a href="/">조명</a>
-                  </li>
-                  <li>
-                    <a href="/">침구</a>
-                  </li>
-                </ul>
-              </a>
-            </li>
-            <li>
-              <a href="/productlist?category=KITCHEN">
-                Kitchen
-                <ul className={styles.dropdown}>
-                  <li>
-                    <a href="/">컵/머그</a>
-                  </li>
-                  <li>
-                    <a href="/">식기</a>
-                  </li>
-                  <li>
-                    <a href="/">쟁반/접시</a>
-                  </li>
-                  <li>
-                    <a href="/">주방잡화</a>
-                  </li>
-                  <li>
-                    <a href="/">도마</a>
-                  </li>
-                </ul>
-              </a>
-            </li>
-            <li>
-              <a href="/productlist?category=STATIONERY">Stationery</a>
-            </li>
-            <li>
-              <a href="/productlist?category=BABY/KIDS">Baby/Kids</a>
-            </li>
-          </ul>
-        </div>
+      </div>
+      <div
+        className={`${scrollActive ? styles['fixed'] : ''} ${
+          styles['navigation']
+        }`}>
+        <ul className={styles.navInner}>
+          <li>
+            <a href="/productlist">ALL</a>
+          </li>
+          <li>
+            <a href="/productlist?category=NEW">NEW</a>
+          </li>
+          <li>
+            <a href="/productlist?category=BEST">BEST</a>
+          </li>
+          <li>
+            <a href="/productlist?category=LIVING">
+              Living
+              <ul className={styles.dropdown}>
+                <li>
+                  <div
+                    onClick={() => {
+                      navigate('/')
+                    }}>
+                    테이블
+                  </div>
+                </li>
+                <li>
+                  <div
+                    onClick={() => {
+                      navigate('/')
+                    }}>
+                    거실화
+                  </div>
+                </li>
+                <li>
+                  <div
+                    onClick={() => {
+                      navigate('/')
+                    }}>
+                    조명
+                  </div>
+                </li>
+                <li>
+                  <div
+                    onClick={() => {
+                      navigate('/')
+                    }}>
+                    침구
+                  </div>
+                </li>
+              </ul>
+            </a>
+          </li>
+          <li>
+            <a href="/productlist?category=KITCHEN">
+              Kitchen
+              <ul className={styles.dropdown}>
+                <li>
+                  <div
+                    onClick={() => {
+                      navigate('/')
+                    }}>
+                    컵/머그
+                  </div>
+                </li>
+                <li>
+                  <div
+                    onClick={() => {
+                      navigate('/')
+                    }}>
+                    식기
+                  </div>
+                </li>
+                <li>
+                  <div
+                    onClick={() => {
+                      navigate('/')
+                    }}>
+                    쟁반/접시
+                  </div>
+                </li>
+                <li>
+                  <div
+                    onClick={() => {
+                      navigate('/')
+                    }}>
+                    주방잡화
+                  </div>
+                </li>
+                <li>
+                  <div
+                    onClick={() => {
+                      navigate('/')
+                    }}>
+                    도마
+                  </div>
+                </li>
+              </ul>
+            </a>
+          </li>
+          <li>
+            <a href="/productlist?category=STATIONERY">Stationery</a>
+          </li>
+          <li>
+            <a href="/productlist?category=BABY/KIDS">Baby/Kids</a>
+          </li>
+        </ul>
       </div>
     </div>
   )
diff --git a/src/styles/components/Modal.module.scss b/src/styles/components/Modal.module.scss
index eee6224..29789b2 100644
--- a/src/styles/components/Modal.module.scss
+++ b/src/styles/components/Modal.module.scss
@@ -10,6 +10,7 @@
   position: fixed;
   top: 0;
   left: 0;
+  z-index:3;
 }
 
 .modal {
@@ -20,6 +21,8 @@
   display: flex;
   flex-direction: column;
   border-radius: 10px;
+  position:relative;
+  z-index:4;
 
   .title {
     background-color: $color-black-0;
diff --git a/src/styles/layout/header.module.scss b/src/styles/layout/header.module.scss
index 8ed3172..fed9b53 100644
--- a/src/styles/layout/header.module.scss
+++ b/src/styles/layout/header.module.scss
@@ -2,27 +2,31 @@
 @import 'src/styles/common.scss';
 
 .header {
-  margin-top: 30px;
   font-family: 'Montserrat', sans-serif;
-  .inner {
-    width: 1240px;
-    margin: auto;
-    .headerTop {
-      display: flex;
-      justify-content: space-between;
+  .headerTop {
+    height: 180px;
+    display: flex;
+    justify-content: space-between;
+    .inner {
+      width: 1240px;
+      margin: auto;
       > a {
-        margin-left: 540px;
+        position:absolute;
+        top:50px;
+        left:50%;
+        transform:translate(-50%,0);
         .logo {
           width: 162px;
           height: 90px;
         }
       }
       .loginTop {
-        height: 130px;
+        height: 80px;
         display: flex;
         flex-direction: column;
         align-items: flex-end;
         overflow: hidden;
+        padding-bottom:20px;
         .inputBox {
           display: flex;
           align-items: center;
@@ -82,63 +86,61 @@
         }
       }
     }
-    .navigation{
-      border-top:2px solid $color-white-ed;
-      border-bottom:2px solid $color-white-ed;
-      width:1240px;
+  }
+  .navigation{
+    border-top:2px solid $color-white-ed;
+    border-bottom:2px solid $color-white-ed;
+    background-color: $color-primary;
+    width:100%;
+    height:60px;
+    position:relative;
+    z-index:2;
+    &.fixed{
+      position:fixed;
+      top:0;
+    }
+    .navInner{
+      max-width:1240px;
       height:60px;
-      &.fixed{
-        position:fixed;
-        top:0;
-        z-index:10;
-      }
-      .navInner{
-        background-color: white;
-        line-height:20px;
-        height:20px;
-        display:flex;
-        justify-content: space-evenly;
-        font-weight:800;
-        padding:20px 100px;
-        >li{
-          width:130px;
-          text-align: center;
-          >a{
-            text-decoration: none;
-            color: $color-black-0;
-            .dropdown{
-              display:none;
-              width:130px;
-              margin-top:20px;
+      margin:auto;
+      background-color: white;
+      line-height:20px;
+      height:20px;
+      display:flex;
+      justify-content: space-evenly;
+      font-weight:800;
+      padding:20px 100px;
+      >li{
+        width:130px;
+        text-align: center;
+        height:40px;
+        >a{
+          text-decoration: none;
+          color: $color-black-0;
+          .dropdown{
+            display:none;
+            width:130px;
+            margin-top:20px;
+            border:1px solid $color-white-ed;
+            z-index: 10;
+            li{
+              height:35px;
+              background-color:$color-primary;
               border:1px solid $color-white-ed;
-              z-index: 10;
-              li{
-                height:25px;
-                padding:5px;
-                background-color:$color-primary;
-                border:1px solid $color-white-ed;
-                text-align: center;
-                line-height:20px;
-                a{
-                  font-size:13px;
-                  text-decoration: none;
-                  color:$color-black-0;
-                  line-height:25px;
-                }
+              text-align: center;
+              line-height:35px;
+              div{
+                font-size:13px;
                 &:hover{
-                  display:block;
+                  background-color: $color-white-ed;
                 }
               }
             }
           }
-          &:hover .dropdown{
-            display:block;
-          }
         }
-      }
-      a{
-        text-decoration: none;
-        color: $color-black-0;
+        &:hover .dropdown{
+          display:block;
+        }
       }
     }
   }