diff --git a/v6y-apps/front/src/app/layout.tsx b/v6y-apps/front/src/app/layout.tsx
index cfa4d4dd..e9366c2a 100644
--- a/v6y-apps/front/src/app/layout.tsx
+++ b/v6y-apps/front/src/app/layout.tsx
@@ -34,14 +34,12 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" className={inter.className}>
-            <body>
-                <main>
-                    <AppProvider>
-                        <Suspense fallback={<LoaderView />}>
-                            <VitalityPageLayout>{children}</VitalityPageLayout>
-                        </Suspense>
-                    </AppProvider>
-                </main>
+            <body className="min-h-screen bg-background text-foreground antialiased">
+                <AppProvider>
+                    <Suspense fallback={<LoaderView />}>
+                        <VitalityPageLayout>{children}</VitalityPageLayout>
+                    </Suspense>
+                </AppProvider>
             </body>
         </html>
     );
diff --git a/v6y-apps/front/src/commons/components/layout/DesktopMenuItems.tsx b/v6y-apps/front/src/commons/components/layout/DesktopMenuItems.tsx
index 67afc1be..d109e52d 100644
--- a/v6y-apps/front/src/commons/components/layout/DesktopMenuItems.tsx
+++ b/v6y-apps/front/src/commons/components/layout/DesktopMenuItems.tsx
@@ -22,21 +22,19 @@ interface DesktopMenuItemsProps {
 
 const DesktopMenuItems = ({ isLoggedIn, userName, onLogout }: DesktopMenuItemsProps) => {
     const { translate } = useTranslationProvider();
+    const iconButtonClassName =
+        'h-10 w-10 border-slate-200 bg-white/90 text-slate-700 shadow-sm transition-colors hover:border-slate-300 hover:bg-slate-100';
 
     return (
         <div className="hidden md:flex items-center gap-2 flex-wrap justify-end">
             <Link className="shrink-0" href="/faq">
-                <Button className="border-gray-200 h-10 w-10" size="icon" variant="outline">
+                <Button className={iconButtonClassName} size="icon" variant="outline">
                     <QuestionMarkCircledIcon className="w-5 h-5" />
                 </Button>
             </Link>
 
             {isLoggedIn && (
-                <Button
-                    size="icon"
-                    variant="outline"
-                    className="border-gray-200 h-10 w-10 shrink-0"
-                >
+                <Button size="icon" variant="outline" className={`${iconButtonClassName} shrink-0`}>
                     <MagnifyingGlassIcon className="w-5 h-5" />
                 </Button>
             )}
@@ -58,7 +56,7 @@ const DesktopMenuItems = ({ isLoggedIn, userName, onLogout }: DesktopMenuItemsPr
                         onClick={onLogout}
                         className="shrink-0"
                     >
-                        <Button size="icon" variant="outline" className="border-gray-200 h-10 w-10">
+                        <Button size="icon" variant="outline" className={iconButtonClassName}>
                             <ExitIcon className="w-5 h-5" />
                         </Button>
                     </Link>
diff --git a/v6y-apps/front/src/commons/components/layout/VitalityPageHeader.tsx b/v6y-apps/front/src/commons/components/layout/VitalityPageHeader.tsx
index 3a1e31d6..6a2d3e38 100644
--- a/v6y-apps/front/src/commons/components/layout/VitalityPageHeader.tsx
+++ b/v6y-apps/front/src/commons/components/layout/VitalityPageHeader.tsx
@@ -20,38 +20,49 @@ const VitalityPageHeader = () => {
 
     return (
         <>
-            <header className="py-2 md:py-4 md:px-0 flex items-center justify-between bg-white">
-                <div className="flex items-center gap-4 md:gap-8 shrink-0">
-                    <HeaderLogo />
-                </div>
+            <header className="sticky top-0 z-30 border-b border-slate-200/90 bg-linear-to-r from-white/95 via-slate-50/85 to-white/95 shadow-[0_10px_26px_-24px_rgba(15,23,42,0.9)] backdrop-blur supports-backdrop-filter:bg-white/75">
+                <div className="mx-auto flex w-full max-w-screen-2xl items-center justify-between px-4 py-3 md:px-8 lg:px-12">
+                    <div className="flex items-center gap-4 md:gap-8 shrink-0">
+                        <HeaderLogo />
+                    </div>
 
-                <DesktopMenuItems isLoggedIn={isLoggedIn} userName={userName} onLogout={onLogout} />
+                    <DesktopMenuItems
+                        isLoggedIn={isLoggedIn}
+                        userName={userName}
+                        onLogout={onLogout}
+                    />
 
-                <Button
-                    size="icon"
-                    variant="outline"
-                    className="md:hidden border-gray-200 h-9 w-9 shrink-0"
-                    onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                    aria-label="Toggle menu"
-                >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        {isMobileMenuOpen ? (
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M6 18L18 6M6 6l12 12"
-                            />
-                        ) : (
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M4 6h16M4 12h16M4 18h16"
-                            />
-                        )}
-                    </svg>
-                </Button>
+                    <Button
+                        size="icon"
+                        variant="outline"
+                        className="md:hidden h-10 w-10 shrink-0 border-slate-200 bg-white/90 text-slate-700 shadow-sm transition-colors hover:border-slate-300 hover:bg-slate-100"
+                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                        aria-label="Toggle menu"
+                    >
+                        <svg
+                            className="w-4 h-4"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            {isMobileMenuOpen ? (
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            ) : (
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M4 6h16M4 12h16M4 18h16"
+                                />
+                            )}
+                        </svg>
+                    </Button>
+                </div>
             </header>
 
             <MobileMenu
diff --git a/v6y-apps/front/src/commons/components/layout/VitalityPageLayout.tsx b/v6y-apps/front/src/commons/components/layout/VitalityPageLayout.tsx
index b5a8d387..eb8fcf84 100644
--- a/v6y-apps/front/src/commons/components/layout/VitalityPageLayout.tsx
+++ b/v6y-apps/front/src/commons/components/layout/VitalityPageLayout.tsx
@@ -10,10 +10,14 @@ import VitalityPageHeader from './VitalityPageHeader';
 
 const VitalityPageLayout = ({ children }: { children: ReactNode }) => {
     return (
-        <div className="px-4 md:px-16">
+        <div className="min-h-screen bg-background text-foreground flex flex-col">
             <VitalityPageHeader />
-            <VitalityBreadcrumb />
-            {children}
+            <div className="mx-auto flex w-full max-w-screen-2xl flex-1 min-h-0 flex-col px-4 md:px-8 lg:px-12">
+                <VitalityBreadcrumb />
+                <main className="flex flex-1 min-h-0 flex-col pb-8 pt-2 md:pb-12 md:pt-3">
+                    {children}
+                </main>
+            </div>
             <Toaster position="top-center" richColors />
         </div>
     );
diff --git a/v6y-apps/front/src/features/auth/pages/VitalityLoginPage.tsx b/v6y-apps/front/src/features/auth/pages/VitalityLoginPage.tsx
index 7af6a7bb..64e87988 100644
--- a/v6y-apps/front/src/features/auth/pages/VitalityLoginPage.tsx
+++ b/v6y-apps/front/src/features/auth/pages/VitalityLoginPage.tsx
@@ -4,7 +4,7 @@ import VitalityLoginForm from '../components/VitalityLoginForm';
 
 export default function VitalityLoginPage() {
     return (
-        <div className="w-full min-h-screen flex justify-center items-center md:py-8 lg:py-12">
+        <div className="flex w-full flex-1 items-center justify-center">
             <VitalityLoginForm />
         </div>
     );
