diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 25e975b..d0b1671 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { Geist } from "next/font/google";
 import "./globals.css";
 import GlobalUserBadge from "@/components/GlobalUserBadge";
 import ServiceWorkerRegistrar from "@/components/ServiceWorkerRegistrar";
+import PageTransition from "@/components/PageTransition";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -40,7 +41,7 @@ export default function RootLayout({
       <body className={`${geistSans.variable} font-sans antialiased`}>
         <ServiceWorkerRegistrar />
         <GlobalUserBadge />
-        {children}
+        <PageTransition>{children}</PageTransition>
       </body>
     </html>
   );
diff --git a/src/components/PageTransition.tsx b/src/components/PageTransition.tsx
new file mode 100644
index 0000000..35f0550
--- /dev/null
+++ b/src/components/PageTransition.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useContext, useRef, type PropsWithChildren } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
+
+/**
+ * Preserves the previous route's React context during the exit animation
+ * so the old page doesn't break while fading out.
+ */
+function FrozenRoute({ children }: PropsWithChildren) {
+  const ctx = useContext(LayoutRouterContext);
+  const frozen = useRef(ctx).current;
+  return (
+    <LayoutRouterContext.Provider value={frozen}>
+      {children}
+    </LayoutRouterContext.Provider>
+  );
+}
+
+const variants = {
+  enter: { opacity: 0, y: 12 },
+  center: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -12 },
+};
+
+export default function PageTransition({ children }: PropsWithChildren) {
+  const pathname = usePathname();
+
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.div
+        key={pathname}
+        variants={variants}
+        initial="enter"
+        animate="center"
+        exit="exit"
+        transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
+      >
+        <FrozenRoute>{children}</FrozenRoute>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
