diff --git a/src/Header/Nav/index.tsx b/src/Header/Nav/index.tsx
index 6411ba2..30310ad 100644
--- a/src/Header/Nav/index.tsx
+++ b/src/Header/Nav/index.tsx
@@ -1,26 +1,29 @@
 'use client'
 
 import React from 'react'
-
+import { Container } from '@/components/ui/Container' // Adjust path as needed
 import type { Header as HeaderType } from '@/payload-types'
-
 import { CMSLink } from '@/components/Link'
 
 export const HeaderNav: React.FC<{ data: HeaderType }> = ({ data }) => {
   const navItems = data?.navItems || []
 
   return (
-    <nav className="flex gap-1 items-center">
-      {navItems.map(({ link }, i) => {
-        return (
-          <CMSLink
-            key={i}
-            {...link}
-            appearance="link"
-            className="px-4 py-2 rounded-xl text-sm text-foreground/60 hover:text-foreground hover:bg-foreground/10 transition-all"
-          />
-        )
-      })}
-    </nav>
+    <div className="border-b border-foreground/8">
+      <Container>
+        <nav className="flex gap-1 items-center py-2">
+          {navItems.map(({ link }, i) => {
+            return (
+              <CMSLink
+                key={i}
+                {...link}
+                appearance="link"
+                className="px-4 py-2 rounded-xl text-sm text-foreground/60 hover:text-foreground hover:bg-foreground/10 transition-all"
+              />
+            )
+          })}
+        </nav>
+      </Container>
+    </div>
   )
 }