diff --git a/playground/framework-spa/app/modules/transactions/routes.ts b/playground/framework-spa/app/modules/transactions/routes.ts
new file mode 100644
index 0000000000..b33c9652e4
--- /dev/null
+++ b/playground/framework-spa/app/modules/transactions/routes.ts
@@ -0,0 +1,5 @@
+import { type RouteConfig, route } from "@react-router/dev/routes";
+
+export default [
+  route("transactions", "./routes/home.tsx"),
+] satisfies RouteConfig;
diff --git a/playground/framework-spa/app/modules/transactions/routes/home.tsx b/playground/framework-spa/app/modules/transactions/routes/home.tsx
new file mode 100644
index 0000000000..13756c10c6
--- /dev/null
+++ b/playground/framework-spa/app/modules/transactions/routes/home.tsx
@@ -0,0 +1,10 @@
+import { href, Link } from "react-router";
+
+export default function TransactionHomePage() {
+  return (
+    <div>
+      <h1>Transactions Home page</h1>
+      <Link to={href("/")}>Root Route</Link>
+    </div>
+  );
+}
diff --git a/playground/framework-spa/app/modules/user-management/routes.ts b/playground/framework-spa/app/modules/user-management/routes.ts
new file mode 100644
index 0000000000..84856d5c2d
--- /dev/null
+++ b/playground/framework-spa/app/modules/user-management/routes.ts
@@ -0,0 +1,5 @@
+import { type RouteConfig, route } from "@react-router/dev/routes";
+
+export default [
+  route("user-management", "./routes/home.tsx"),
+] satisfies RouteConfig;
diff --git a/playground/framework-spa/app/modules/user-management/routes/home.tsx b/playground/framework-spa/app/modules/user-management/routes/home.tsx
new file mode 100644
index 0000000000..1bed511005
--- /dev/null
+++ b/playground/framework-spa/app/modules/user-management/routes/home.tsx
@@ -0,0 +1,10 @@
+import { href, Link } from "react-router";
+
+export default function UserManagementHomePage() {
+  return (
+    <div>
+      <h1>User Management Home page</h1>
+      <Link to={href("/")}>Root Route</Link>
+    </div>
+  );
+}
diff --git a/playground/framework-spa/app/routes.ts b/playground/framework-spa/app/routes.ts
index 715c844dd6..95a732fe4c 100644
--- a/playground/framework-spa/app/routes.ts
+++ b/playground/framework-spa/app/routes.ts
@@ -1,3 +1,10 @@
 import { type RouteConfig, index } from "@react-router/dev/routes";
 
-export default [index("routes/_index.tsx")] satisfies RouteConfig;
+import transactionRoutes from "~/modules/transactions/routes";
+import userManagementRoutes from "~/modules/user-management/routes";
+
+export default [
+  index("routes/_index.tsx"),
+  ...transactionRoutes,
+  ...userManagementRoutes,
+] satisfies RouteConfig;
diff --git a/playground/framework-spa/app/routes/_index.tsx b/playground/framework-spa/app/routes/_index.tsx
index ecfc25c614..3142551a8d 100644
--- a/playground/framework-spa/app/routes/_index.tsx
+++ b/playground/framework-spa/app/routes/_index.tsx
@@ -1,4 +1,4 @@
-import type { MetaFunction } from "react-router";
+import { href, Link, type MetaFunction } from "react-router";
 
 export const meta: MetaFunction = () => {
   return [
@@ -11,6 +11,7 @@ export default function Index() {
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
       <h1>Welcome to React Router</h1>
+<Link to={href("/transaction")}>Transactions Dashboard</Link>
     </div>
   );
 }