diff --git a/components/navigation/app-navigation.tsx b/components/navigation/app-navigation.tsx
index 3be9dbf..73c19e0 100644
--- a/components/navigation/app-navigation.tsx
+++ b/components/navigation/app-navigation.tsx
@@ -95,10 +95,10 @@ export function AppNavigation() {
 
   return (
     <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-16 items-center">
-        <div className="flex flex-1 items-center justify-between">
+      <div className="relative container flex h-16 items-center justify-center">
+        <div className="flex flex-1 items-center justify-center">
           {/* Logo and App Name */}
-          <Link href="/" className="flex items-center space-x-3 mr-6">
+          <Link href="/" className="flex items-center space-x-3 absolute left-4">
             <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg">
               <Activity className="h-5 w-5" />
             </div>
@@ -111,7 +111,7 @@ export function AppNavigation() {
           </Link>
 
           {/* Main Navigation */}
-          <NavigationMenu className="mx-6">
+          <NavigationMenu className="mx-auto">
             <NavigationMenuList>
               {navigationItems.map((item) => (
                 <NavigationMenuItem key={item.title}>
@@ -170,7 +170,7 @@ export function AppNavigation() {
           </NavigationMenu>
 
           {/* Right Side Actions */}
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 absolute right-4">
             <ThemeToggle />
           </div>
         </div>