diff --git a/src/web/src/app/page.jsx b/src/web/src/app/page.jsx
index dc253a1..732a61d 100644
--- a/src/web/src/app/page.jsx
+++ b/src/web/src/app/page.jsx
@@ -6,6 +6,6 @@ import { HeroSection1, HeroSection2, HeroSection3 } from "@/components/hero";
 // Exports
 export default function Index() {
   return (
-    <div></div>
+    <div>Home</div>
   );
 }
diff --git a/src/web/src/app/projects/page.jsx b/src/web/src/app/projects/page.jsx
index 595ed7b..98f5457 100644
--- a/src/web/src/app/projects/page.jsx
+++ b/src/web/src/app/projects/page.jsx
@@ -6,6 +6,7 @@
 export default function Projects() {
   return (
     <div>
+      projects
     </div>
   );
 }
diff --git a/src/web/src/app/template.js b/src/web/src/app/template.js
new file mode 100644
index 0000000..8b1ba29
--- /dev/null
+++ b/src/web/src/app/template.js
@@ -0,0 +1,5 @@
+import PageTransition from "@/components/transitions";
+
+export default function rootTemplate({ children }) {
+  return <PageTransition>{children}</PageTransition>;
+}
diff --git a/src/web/src/components/transitions.jsx b/src/web/src/components/transitions.jsx
new file mode 100644
index 0000000..861b727
--- /dev/null
+++ b/src/web/src/components/transitions.jsx
@@ -0,0 +1,19 @@
+"use client"
+
+import { motion } from "framer-motion";
+
+const PageTransition = ({ children }) => (
+  <motion.div
+    initial={{ x: 300, opacity: 0 }}
+    animate={{ x: 0, opacity: 1 }}
+    exit={{ x: 300, opacity: 0 }}
+    transition={{
+      type: "spring",
+      stiffness: 260,
+      damping: 20,
+    }}
+  >
+    {children}
+  </motion.div>
+);
+export default PageTransition;