diff --git a/app/clientLayout.tsx b/app/clientLayout.tsx
index f8bc8e6..bf48cbb 100644
--- a/app/clientLayout.tsx
+++ b/app/clientLayout.tsx
@@ -4,15 +4,14 @@ import type React from "react"
 
 import { Inter } from "next/font/google"
 import { motion, AnimatePresence } from "framer-motion"
+import { usePathname } from "next/navigation"
 
 import { ThemeProvider } from "@/components/theme-provider"
 import { Navbar } from "@/components/navbar"
 import { Footer } from "@/components/footer"
-import {Toaster} from "react-hot-toast"
+import { Toaster } from "react-hot-toast"
 import AuthProvider from '../context/AuthProvider';
 
-import "./globals.css"
-
 const inter = Inter({ subsets: ["latin"] })
 
 export default function ClientLayout({
@@ -20,32 +19,29 @@ export default function ClientLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
+  const pathname = usePathname()
   return (
-    <html lang="en" suppressHydrationWarning>
-      <AuthProvider>
-      <body className={`${inter.className} min-h-screen bg-background`}>
-        <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false} disableTransitionOnChange>
-          <div className="flex min-h-screen flex-col">
-            <Navbar />
-            <main className="flex-1">
-              <AnimatePresence mode="wait">
-                <motion.div
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  {children}
-                </motion.div>
-              </AnimatePresence>
-            </main>
-            <Footer />
-          </div>
-        
-          <Toaster/>
-        </ThemeProvider>
-      </body>
-      </AuthProvider>
-    </html>
+    <AuthProvider>
+      <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false} disableTransitionOnChange>
+        <div className={`${inter.className} flex min-h-screen flex-col bg-background`}>
+          <Navbar />
+          <main className="flex-1">
+            <AnimatePresence mode="wait" initial={false}>
+              <motion.div
+                key={pathname}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                {children}
+              </motion.div>
+            </AnimatePresence>
+          </main>
+          <Footer />
+        </div>
+        <Toaster />
+      </ThemeProvider>
+    </AuthProvider>
   )
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index d111d61..9ef25d9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,12 +3,13 @@ import type { Metadata } from "next"
 import ClientLayout from "./clientLayout"
 import { Analytics } from "@vercel/analytics/next"
 
+import "./globals.css"
 
 export const metadata: Metadata = {
   title: "LegalEase - Simplifying Legal Access for All",
   description:
     "LegalEase makes the justice system accessible through AI-powered tools, plain language explanations, and personalized guidance.",
-    generator: 'v0.dev'
+  generator: "v0.dev",
 }
 
 export default function RootLayout({
@@ -16,9 +17,14 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  return(
-  <ClientLayout>{children}<Analytics /></ClientLayout>
-)}
-
-
-import './globals.css'
\ No newline at end of file
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ClientLayout>
+          {children}
+        </ClientLayout>
+        <Analytics />
+      </body>
+    </html>
+  )
+}
\ No newline at end of file
