diff --git a/packages/widget-react/src/components/form/hooks.ts b/packages/widget-react/src/components/form/hooks.ts
index 2053f0b..0aa593b 100644
--- a/packages/widget-react/src/components/form/hooks.ts
+++ b/packages/widget-react/src/components/form/hooks.ts
@@ -7,7 +7,9 @@ export function useAutoFocus<T extends HTMLInputElement>() {
 
   useEffect(() => {
     if (isSmall) return
-    ref.current?.focus()
+    // wait 250ms to allow transition to complete
+    const timeout = setTimeout(() => ref.current?.focus(), 250)
+    return () => clearTimeout(timeout)
   }, [isSmall])
 
   return ref
diff --git a/packages/widget-react/src/lib/router/MemoryRouter.tsx b/packages/widget-react/src/lib/router/MemoryRouter.tsx
index 6b3f665..de24520 100644
--- a/packages/widget-react/src/lib/router/MemoryRouter.tsx
+++ b/packages/widget-react/src/lib/router/MemoryRouter.tsx
@@ -14,10 +14,14 @@ interface MemoryRouterProps {
 
 const MemoryRouter = ({ children, initialEntry }: PropsWithChildren<MemoryRouterProps>) => {
   const [history, setHistory] = useState<HistoryEntry[]>([initialEntry ?? { path: "/" }])
+  // we cannot use history to track prevLocation since navigate(-1) will remove the current entry
+  const [previousLocation, setPreviousLocation] = useState<HistoryEntry | null>(null)
   const location = history[history.length - 1]
 
   const navigate = useCallback((to: string | number, state?: object) => {
     setHistory((prev) => {
+      setPreviousLocation(prev[prev.length - 1])
+
       if (typeof to === "string") {
         return [...prev, { path: to, state }]
       }
@@ -45,7 +49,7 @@ const MemoryRouter = ({ children, initialEntry }: PropsWithChildren<MemoryRouter
   }, [])
 
   return (
-    <RouterContext.Provider value={{ location, history, navigate, reset }}>
+    <RouterContext.Provider value={{ location, previousLocation, history, navigate, reset }}>
       {children}
     </RouterContext.Provider>
   )
diff --git a/packages/widget-react/src/lib/router/RouterContext.ts b/packages/widget-react/src/lib/router/RouterContext.ts
index 54fbd51..72204d4 100644
--- a/packages/widget-react/src/lib/router/RouterContext.ts
+++ b/packages/widget-react/src/lib/router/RouterContext.ts
@@ -7,6 +7,7 @@ export interface HistoryEntry {
 
 interface RouterContextProps {
   location: HistoryEntry
+  previousLocation: HistoryEntry | null
   history: HistoryEntry[]
   navigate: (to: string | number, state?: object) => void
   reset: (to: string, state?: object) => void
@@ -23,6 +24,11 @@ export function useLocation() {
   return location
 }
 
+export function usePreviousPath() {
+  const { previousLocation } = useRouterContext()
+  return previousLocation?.path
+}
+
 export function usePath() {
   const { path } = useLocation()
   return path
diff --git a/packages/widget-react/src/pages/wallet/tabs/Home.module.css b/packages/widget-react/src/pages/wallet/tabs/Home.module.css
index 972962c..bd2de19 100644
--- a/packages/widget-react/src/pages/wallet/tabs/Home.module.css
+++ b/packages/widget-react/src/pages/wallet/tabs/Home.module.css
@@ -1,3 +1,7 @@
+.container {
+  height: 100%;
+}
+
 .nav {
   display: flex;
   gap: 8px;
diff --git a/packages/widget-react/src/pages/wallet/tabs/Home.tsx b/packages/widget-react/src/pages/wallet/tabs/Home.tsx
index 27f3c61..13f6d3f 100644
--- a/packages/widget-react/src/pages/wallet/tabs/Home.tsx
+++ b/packages/widget-react/src/pages/wallet/tabs/Home.tsx
@@ -1,6 +1,8 @@
+import { useMemo } from "react"
 import { Tabs } from "radix-ui"
 import { IconArrowRight, IconSwap } from "@initia/icons-react"
-import { Link, useNavigate, usePath } from "@/lib/router"
+import { animated, useTransition } from "@react-spring/web"
+import { Link, useNavigate, usePath, usePreviousPath } from "@/lib/router"
 import { useClaimableModal } from "@/pages/bridge/op/reminder"
 import Scrollable from "@/components/Scrollable"
 import Assets from "./assets/Assets"
@@ -8,14 +10,39 @@ import Nfts from "./nft/Nfts"
 import Activity from "./activity/Activity"
 import styles from "./Home.module.css"
 
+const tabs = [
+  { label: "Assets", value: "/", component: <Assets /> },
+  { label: "NFTs", value: "/nfts", component: <Nfts /> },
+  { label: "History", value: "/activity", component: <Activity /> },
+]
+
 const Home = () => {
   useClaimableModal()
 
   const navigate = useNavigate()
   const path = usePath()
+  const prevPath = usePreviousPath()
+
+  const direction = useMemo(() => {
+    const currentIndex = tabs.findIndex((t) => t.value === path)
+    const prevIndex = tabs.findIndex((t) => t.value === prevPath)
+
+    return currentIndex > prevIndex ? 1 : -1
+  }, [path, prevPath])
+
+  const skipAnimation =
+    !tabs.find((t) => t.value === prevPath) || !tabs.find((t) => t.value === path)
+
+  const transitions = useTransition(path, {
+    from: { opacity: 0, transform: `translateX(${direction * 100}%)` },
+    enter: { opacity: 1, transform: "translateX(0%)" },
+    leave: { opacity: 0, transform: `translateX(${direction * -100}%)` },
+    config: { tension: 250, friction: 30 },
+    immediate: skipAnimation,
+  })
 
   return (
-    <Scrollable>
+    <Scrollable className={styles.container}>
       <div className={styles.nav}>
         <Link to="/send" className={styles.item}>
           <IconArrowRight size={16} />
@@ -30,30 +57,25 @@ const Home = () => {
 
       <Tabs.Root value={path} onValueChange={navigate}>
         <Tabs.List className={styles.tabs}>
-          <Tabs.Trigger className={styles.tab} value="/">
-            Assets
-          </Tabs.Trigger>
-
-          <Tabs.Trigger className={styles.tab} value="/nfts">
-            NFTs
-          </Tabs.Trigger>
-
-          <Tabs.Trigger className={styles.tab} value="/activity">
-            History
-          </Tabs.Trigger>
+          {tabs.map((tab) => (
+            <Tabs.Trigger key={tab.value} className={styles.tab} value={tab.value}>
+              {tab.label}
+            </Tabs.Trigger>
+          ))}
         </Tabs.List>
 
-        <Tabs.Content value="/">
-          <Assets />
-        </Tabs.Content>
-
-        <Tabs.Content value="/nfts">
-          <Nfts />
-        </Tabs.Content>
-
-        <Tabs.Content value="/activity">
-          <Activity />
-        </Tabs.Content>
+        <div style={{ position: "relative" }}>
+          {transitions((style, item) => {
+            const tab = tabs.find((t) => t.value === item)
+            return (
+              <Tabs.Content forceMount key={item} value={item} asChild>
+                <animated.div style={{ ...style, position: "absolute", width: "100%" }}>
+                  {tab?.component}
+                </animated.div>
+              </Tabs.Content>
+            )
+          })}
+        </div>
       </Tabs.Root>
     </Scrollable>
   )
diff --git a/packages/widget-react/src/public/app/Routes.tsx b/packages/widget-react/src/public/app/Routes.tsx
index 50e2a5b..eb86f22 100644
--- a/packages/widget-react/src/public/app/Routes.tsx
+++ b/packages/widget-react/src/public/app/Routes.tsx
@@ -1,5 +1,8 @@
 import { useEffect } from "react"
-import { useNavigate, usePath } from "@/lib/router"
+import { useTransition, animated } from "@react-spring/web"
+import { useNavigate, usePath, usePreviousPath } from "@/lib/router"
+import { useModal } from "./ModalContext"
+import { useAddress } from "../data/hooks"
 import Connect from "@/pages/connect/Connect"
 import Home from "@/pages/wallet/tabs/Home"
 import Send from "@/pages/wallet/txs/send/Send"
@@ -12,15 +15,32 @@ import Withdrawals from "@/pages/bridge/op/Withdrawals"
 import BridgePreview from "@/pages/bridge/BridgePreview"
 import BridgeHistory from "@/pages/bridge/BridgeHistory"
 import TxRequest from "@/pages/tx/TxRequest"
-import { useAddress } from "../data/hooks"
-import { useModal } from "./ModalContext"
+
+const routes = [
+  { path: "/connect", Component: Connect },
+  { path: "/", Component: Home },
+  { path: "/send", Component: Send, rerender: true },
+  { path: "/collection", Component: CollectionDetails },
+  { path: "/nft", Component: NftDetails },
+  { path: "/nft/send", Component: SendNft, rerender: true },
+  { path: "/rollups", Component: ManageChains },
+  { path: "/bridge", Component: BridgeForm, renderWithoutAddress: true, rerender: true },
+  { path: "/bridge/preview", Component: BridgePreview },
+  { path: "/bridge/history", Component: BridgeHistory, renderWithoutAddress: true },
+  { path: "/op/withdrawals", Component: Withdrawals },
+  { path: "/tx", Component: TxRequest },
+]
 
 const Routes = () => {
+  const rawPath = usePath()
+  const rawPrevPath = usePreviousPath()
   const navigate = useNavigate()
-  const path = usePath()
   const address = useAddress()
   const { closeModal } = useModal()
 
+  const path = ["/nfts", "/activity"].includes(rawPath) ? "/" : rawPath
+  const prevPath = ["/nfts", "/activity"].includes(rawPrevPath || "") ? "/" : rawPrevPath
+
   // whenever address changes, navigate to the appropriate path
   useEffect(() => {
     closeModal()
@@ -28,55 +48,62 @@ const Routes = () => {
     if (path.startsWith("/bridge/")) {
       navigate("/bridge")
     }
-
     if (path === "/collection" || path.startsWith("/nft")) {
       navigate("/nfts")
     }
-
     // Run only on address changes, preventing navigation from triggering on path updates.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [address])
 
-  if (path === "/connect") {
-    if (address) return null
-    return <Connect />
-  }
+  // Compute transition direction
+  const currentIndex = routes.findIndex((r) => r.path === path)
+  const prevIndex = routes.findIndex((r) => r.path === prevPath)
+  const direction = currentIndex >= prevIndex ? 1 : -1
+
+  const transitions = useTransition(path, {
+    from:
+      direction > 0
+        ? { opacity: 1, transform: `translateX(100%)` }
+        : { opacity: 0, transform: `translateX(0%)` },
+    enter: { opacity: 1, transform: "translateX(0%)" },
+    leave:
+      direction < 0
+        ? { opacity: 1, transform: `translateX(100%)` }
+        : { opacity: 0, transform: `translateX(0%)` },
+    immediate: !prevPath,
+  })
+
+  if (path === "/connect" && !address) return <Connect />
+
+  // FIXME: do we need to block all routes when address is not connected?
+  if (!address) return null
 
-  switch (path) {
-    case "/bridge":
-      return <BridgeForm key={address} />
-    case "/bridge/history":
-      return <BridgeHistory />
-  }
+  return (
+    <div style={{ position: "relative", height: "100%", overflow: "hidden" }}>
+      {transitions((style, animatedPath) => {
+        const route = routes.find((r) => r.path === animatedPath)
+        if (!route) return null
+        if (!address && !route.renderWithoutAddress) return null
 
-  if (!address) {
-    return null
-  }
+        const { Component, rerender } = route
 
-  switch (path) {
-    case "/":
-    case "/nfts":
-    case "/activity":
-      return <Home />
-    case "/send":
-      return <Send key={address} />
-    case "/collection":
-      return <CollectionDetails />
-    case "/nft":
-      return <NftDetails />
-    case "/nft/send":
-      return <SendNft key={address} />
-    case "/rollups":
-      return <ManageChains />
-    case "/bridge/preview":
-      return <BridgePreview />
-    case "/op/withdrawals":
-      return <Withdrawals />
-    case "/tx":
-      return <TxRequest />
-    case "/blank":
-      return null
-  }
+        return (
+          <animated.div
+            key={animatedPath}
+            style={{
+              ...style,
+              position: "absolute",
+              width: "100%",
+              height: "100%",
+              backgroundColor: "var(--bg)",
+            }}
+          >
+            {rerender ? <Component key={address} /> : <Component />}
+          </animated.div>
+        )
+      })}
+    </div>
+  )
 }
 
 export default Routes