diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
index e6cbbbc96..782139f9c 100644
--- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
+++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
@@ -1,8 +1,19 @@
 @import "../../../../../styles/utilities";
 
 .headerHighLight {
-    @apply flex justify-between items-center spacing-horizontal bg-primary;
+    @apply flex justify-between items-center spacing-horizontal bg-primary caption;
     padding-top: 0.8rem;
     padding-bottom: 0.8rem;
-    
+    color: var(--white);
+    .menu {
+        @apply flex items-center list-none;
+        li {
+            &:not(:last-child) {
+                margin-right: 3.2rem;
+            }
+            a {
+                @appy no-underline;
+            }
+        }
+    }
 }
diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx
index 9dd2184f1..687b906d1 100644
--- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx
+++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx
@@ -29,7 +29,7 @@ const HeaderHighLight = memo(({ }: Props) => {
             <div>
                 Free Shipping on order $49+ / Express $99+
             </div>
-            <div className="menu">
+            <ul className={s.menu}>
                 {
                     MENU.map(item => <li key={item.name}>
                         <Link href={item.link}>
@@ -40,7 +40,7 @@ const HeaderHighLight = memo(({ }: Props) => {
 
                     </li>)
                 }
-            </div>
+            </ul>
         </section>
     )
 })