diff --git a/packages/webui/src/routes/__root.tsx b/packages/webui/src/routes/__root.tsx
index ceaa5c9..d4ffe66 100644
--- a/packages/webui/src/routes/__root.tsx
+++ b/packages/webui/src/routes/__root.tsx
@@ -33,8 +33,12 @@ export function Root() {
             <AnimatePresence mode="popLayout">
                 <AnimatedOutlet
                     key={nextMatch.id}
-                    initial={{ x: "100%" }}
-                    animate={{ x: "0" }}
+
+                    transition={{ x: { type: "spring", stiffness: 300, damping: 30 } }}
+
+                    initial={{ x: "100vw", opacity: 0 }}
+                    animate={{ x: "0", opacity: 1 }}
+                    exit={{ x: "-100vw", opacity: 0 }}
                 />
             </AnimatePresence>
         </div>