diff --git a/src/App.vue b/src/App.vue
index 0270f57..36cccfb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,10 @@ import 'vue-sonner/style.css'
 </script>
 
 <template>
-  <RouterView />
+  <RouterView v-slot="{ Component, route }">
+    <Transition name="page" mode="out-in">
+      <component :is="Component" :key="route.fullPath" />
+    </Transition>
+  </RouterView>
   <Toaster class="pointer-events-auto" />
 </template>
diff --git a/src/style.css b/src/style.css
index 1949175..cc27a7f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -122,3 +122,19 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Page transition animations */
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 200ms ease, transform 200ms ease;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+.page-enter-to,
+.page-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}