diff --git a/src/ModManUi/src/App.vue b/src/ModManUi/src/App.vue
index 08fc7fde..8902fee4 100644
--- a/src/ModManUi/src/App.vue
+++ b/src/ModManUi/src/App.vue
@@ -6,11 +6,17 @@ import ModManHeader from "./components/ModManHeader.vue";
   <main class="container">
     <ModManHeader />
 
-    <RouterView />
+    <RouterView v-slot="{ Component }">
+      <Transition name="blend">
+        <component :is="Component" />
+      </Transition>
+    </RouterView>
   </main>
 </template>
 
 <style scoped lang="scss">
+@use "@style/variables";
+
 .container {
   margin: 0;
   display: flex;
@@ -19,4 +25,14 @@ import ModManHeader from "./components/ModManHeader.vue";
 
   height: 100vh;
 }
+
+.blend-enter-from,
+.blend-leave-to {
+  opacity: 0;
+}
+
+.blend-enter-active,
+.blend-leave-active {
+  transition: opacity 0.15s ease-in-out;
+}
 </style>