diff --git a/apps/web/app/(marketing)/_components/site-header.tsx b/apps/web/app/(marketing)/_components/site-header.tsx
index 650488582..7cb85c34b 100644
--- a/apps/web/app/(marketing)/_components/site-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-header.tsx
@@ -1,21 +1,28 @@
 import type { User } from '@supabase/supabase-js';
 
-import { SiteHeaderAccountSection } from '~/(marketing)/_components/site-header-account-section';
-import { SiteNavigation } from '~/(marketing)/_components/site-navigation';
 import { AppLogo } from '~/components/app-logo';
 
+import { SiteHeaderAccountSection } from './site-header-account-section';
+import { SiteNavigation } from './site-navigation';
+
 export function SiteHeader(props: { user?: User | null }) {
   return (
-    <div className={'border-b border-gray-100 dark:border-border'}>
+    <div
+      className={
+        'sticky top-0 z-10 w-full bg-background/80 shadow-sm backdrop-blur-md dark:bg-background/50 dark:shadow-primary/20'
+      }
+    >
       <div className={'px-4 lg:px-8'}>
-        <div className="flex h-14 items-center justify-between">
-          <div className={'flex w-6/12 items-center space-x-8'}>
+        <div className="grid h-14 grid-cols-3 items-center">
+          <div>
             <AppLogo />
+          </div>
 
+          <div className={'order-first md:order-none'}>
             <SiteNavigation />
           </div>
 
-          <div className={'flex flex-1 items-center justify-end space-x-1'}>
+          <div className={'flex items-center justify-end space-x-1'}>
             <SiteHeaderAccountSection user={props.user ?? null} />
           </div>
         </div>
diff --git a/apps/web/app/(marketing)/_components/site-navigation-item.tsx b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
index 607c17b94..67bca5bbb 100644
--- a/apps/web/app/(marketing)/_components/site-navigation-item.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
@@ -9,9 +9,13 @@ import { cn, isRouteActive } from '@kit/ui/utils';
 const getClassName = (path: string, currentPathName: string) => {
   const isActive = isRouteActive(path, currentPathName);
 
-  return cn(`text-[0.9em] font-medium`, {
-    'hover:underline': !isActive,
-  });
+  return cn(
+    `text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors`,
+    {
+      'hover:border-border': !isActive,
+      'dark:bg-secondary bg-gray-50': isActive,
+    },
+  );
 };
 
 export function SiteNavigationItem({
diff --git a/apps/web/app/(marketing)/_components/site-navigation.tsx b/apps/web/app/(marketing)/_components/site-navigation.tsx
index afa458666..d51593951 100644
--- a/apps/web/app/(marketing)/_components/site-navigation.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation.tsx
@@ -43,15 +43,15 @@ export function SiteNavigation() {
 
   return (
     <>
-      <div className={'hidden items-center lg:flex'}>
+      <div className={'hidden items-center justify-center md:flex'}>
         <NavigationMenu>
-          <NavigationMenuList className={'space-x-4'}>
+          <NavigationMenuList className={'space-x-1'}>
             {NavItems}
           </NavigationMenuList>
         </NavigationMenu>
       </div>
 
-      <div className={'flex items-center lg:hidden'}>
+      <div className={'flex justify-start sm:items-center md:hidden'}>
         <MobileDropdown />
       </div>
     </>
@@ -62,7 +62,7 @@ function MobileDropdown() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger aria-label={'Open Menu'}>
-        <Menu className={'h-9'} />
+        <Menu className={'h-8 w-8'} />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className={'w-full'}>
diff --git a/apps/web/app/(marketing)/layout.tsx b/apps/web/app/(marketing)/layout.tsx
index eddf235ae..260c7e727 100644
--- a/apps/web/app/(marketing)/layout.tsx
+++ b/apps/web/app/(marketing)/layout.tsx
@@ -8,13 +8,13 @@ async function SiteLayout(props: React.PropsWithChildren) {
   const user = await getUser();
 
   return (
-    <div className={'flex flex-col'}>
+    <>
       <SiteHeader user={user} />
 
       {props.children}
 
       <SiteFooter />
-    </div>
+    </>
   );
 }
 
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 6f73bc2ec..bd00a799a 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -20,7 +20,7 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 function Home() {
   return (
-    <div className={'flex flex-col space-y-24 py-16'}>
+    <div className={'mt-4 flex flex-col space-y-24 py-16'}>
       <div className={'container mx-auto flex flex-col space-y-20'}>
         <div
           className={
diff --git a/packages/ui/src/makerkit/top-loading-bar-indicator.tsx b/packages/ui/src/makerkit/top-loading-bar-indicator.tsx
index 301b8aad2..ebbaf2c82 100644
--- a/packages/ui/src/makerkit/top-loading-bar-indicator.tsx
+++ b/packages/ui/src/makerkit/top-loading-bar-indicator.tsx
@@ -27,10 +27,10 @@ export function TopLoadingBarIndicator() {
 
   return (
     <LoadingBar
+      className={'bg-primary'}
       height={4}
       waitingTime={0}
       shadow
-      className={'bg-primary'}
       color={''}
       ref={ref}
     />