diff --git a/vue/src/App.vue b/vue/src/App.vue
index 94fc259..5a13b43 100644
--- a/vue/src/App.vue
+++ b/vue/src/App.vue
@@ -6,7 +6,11 @@ import Footer from "@/components/Footer.vue";
 
 <template>
     <Navbar class="no-print sticky" />
-    <RouterView />
+    <RouterView v-slot="{ Component }">
+        <Transition name="slide" mode="out-in">
+            <component :is="Component" :key="$route.path" />
+        </Transition>
+    </RouterView>
 
     <!-- <Footer style="height: 10vh" /> -->
 </template>
diff --git a/vue/src/assets/styles.css b/vue/src/assets/styles.css
index b32575e..01656c7 100644
--- a/vue/src/assets/styles.css
+++ b/vue/src/assets/styles.css
@@ -1,5 +1,19 @@
 @import "tailwindcss";
 
+/* Route transitions */
+.slide-enter-active,
+.slide-leave-active {
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.slide-enter-from {
+    transform: translateX(30px);
+    opacity: 0;
+}
+.slide-leave-to {
+    transform: translateX(-30px);
+    opacity: 0;
+}
+
 /* PRINTING */
 @media print {