diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d5e4139..962cdf4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import "./globals.css";
 import { ThemeProvider } from "next-themes";
 import { ModeToggle } from "@/components/mode-toggle";
 import SignIn from "./components/sign-in";
+import AuthSessionProvider from "@/components/SessionProvider";
 
 const geist = Geist({ subsets: ['latin', 'cyrillic'], variable: "--font-geist-sans" })
 
@@ -23,21 +24,23 @@ export default function RootLayout({
       <body
         className={`${geist.variable} antialiased min-h-screen flex flex-col  dark:text-gray-300 --color-background`}
       >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <header className="dark:text-white text-gray-900 px-4 py-3 font-bold shadow flex justify-between items-center-safe">
-            {metadata.title as string || "iCal PWA"}
-            <div className="flex flex-row gap-2">
-              <SignIn />
-              <ModeToggle />
-            </div>
-          </header>
-          <main className="flex-1 p-4">{children}</main>
-        </ThemeProvider>
+        <AuthSessionProvider>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <header className="dark:text-white text-gray-900 px-4 py-3 font-bold shadow flex justify-between items-center-safe">
+              {metadata.title as string || "iCal PWA"}
+              <div className="flex flex-row gap-2">
+                <SignIn />
+                <ModeToggle />
+              </div>
+            </header>
+            <main className="flex-1 p-4">{children}</main>
+          </ThemeProvider>
+        </AuthSessionProvider>
       </body>
     </html>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6c07763..70295ea 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client"
 
 import { useEffect, useState } from 'react'
 import { nanoid } from 'nanoid'
@@ -13,9 +13,9 @@ import { addEvent, deleteEvent, getAllEvents, clearEvents, getDB } from '@/lib/d
 import { parseICS, generateICS } from '@/lib/ical'
 import type { CalendarEvent } from '@/lib/types'
 import { Textarea } from '@/components/ui/textarea'
-import { auth } from '@/auth'
+import { useSession } from 'next-auth/react'
 
-export default async function HomePage() {
+export default function HomePage() {
   const [events, setEvents] = useState<CalendarEvent[]>([])
   const [dialogOpen, setDialogOpen] = useState(false)
   const [editingId, setEditingId] = useState<string | null>(null)
@@ -44,7 +44,7 @@ export default async function HomePage() {
     })()
   }, [])
 
-  const session = await auth()
+  const { data: session, status } = useSession()
 
   const resetForm = () => {
     setTitle('')
diff --git a/src/components/SessionProvider.tsx b/src/components/SessionProvider.tsx
new file mode 100644
index 0000000..1ab533c
--- /dev/null
+++ b/src/components/SessionProvider.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import { SessionProvider } from "next-auth/react"
+import { ReactNode } from "react"
+
+interface Props {
+  children: ReactNode
+}
+
+export default function AuthSessionProvider({ children }: Props) {
+  return <SessionProvider>{children}</SessionProvider>
+}
