diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5d3cd4f..80835d2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,21 +1,21 @@
 import type { Metadata } from "next";
-import { Geist, Magra } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { CalendarDays } from "lucide-react";
 import Link from "next/link";
 import { ThemeProvider } from "next-themes";
 import { ModeToggle } from "@/components/mode-toggle";
 import SignIn from "@/components/sign-in";
 import { Toaster } from "@/components/ui/sonner";
 
-const geist = Geist({
+const geistSans = Geist({
 	subsets: ["latin", "cyrillic"],
 	variable: "--font-geist-sans",
 });
 
-const magra = Magra({
+const geistMono = Geist_Mono({
 	subsets: ["latin"],
-	weight: "400",
-	variable: "--font-cascadia-code",
+	variable: "--font-geist-mono",
 });
 
 export const metadata: Metadata = {
@@ -32,27 +32,41 @@ export default function RootLayout({
 	return (
 		<html lang="en" suppressHydrationWarning>
 			<body
-				className={`${geist.variable} antialiased min-h-screen flex flex-col  dark:text-gray-300 --color-background`}
+				className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased min-h-screen flex flex-col`}
 			>
 				<ThemeProvider
 					attribute="class"
-					defaultTheme="system"
+					defaultTheme="dark"
 					enableSystem
 					disableTransitionOnChange
 				>
-					<header className="dark:text-white text-gray-900 px-4 py-3 font-bold flex justify-between items-center-safe">
-						<Link href={"/"}>
-							<p className={`${magra.variable}`}>
-								{(metadata.title as string) || "iCal PWA"}
-							</p>
-						</Link>
-						<div className="flex flex-row gap-2">
-							<SignIn />
-							<ModeToggle />
+					<header className="sticky top-0 z-50 glass-strong">
+						<div className="max-w-4xl mx-auto flex items-center justify-between px-4 sm:px-6 h-14">
+							<Link
+								href="/"
+								className="flex items-center gap-2.5 font-semibold text-foreground tracking-tight"
+							>
+								<CalendarDays className="h-5 w-5 text-primary" />
+								<span>{(metadata.title as string) || "iCal PWA"}</span>
+							</Link>
+							<div className="flex items-center gap-2">
+								<SignIn />
+								<ModeToggle />
+							</div>
 						</div>
 					</header>
-					<main className="flex-1 p-4">{children}</main>
-					<Toaster closeButton richColors />
+					<main className="flex-1">
+						<div className="max-w-4xl mx-auto px-4 sm:px-6 py-6">
+							{children}
+						</div>
+					</main>
+					<Toaster
+						closeButton
+						richColors
+						toastOptions={{
+							className: "glass-strong",
+						}}
+					/>
 				</ThemeProvider>
 			</body>
 		</html>
