diff --git a/package.json b/package.json
index 84f9d3a..24380cb 100644
--- a/package.json
+++ b/package.json
@@ -17,26 +17,26 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
-    "@floating-ui/dom": "^1.6.12",
+    "@floating-ui/dom": "^1.6.13",
     "@kevisual/query": "0.0.7-alpha.3",
     "@kevisual/system-lib": "^0.0.10",
     "@kevisual/system-ui": "^0.0.3",
     "dayjs": "^1.11.13",
     "lodash-es": "^4.17.21",
     "react-dom": "^19.0.0",
-    "zustand": "^5.0.2"
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@kevisual/router": "0.0.6-alpha-5",
     "@kevisual/store": "0.0.1-alpha.10",
     "@kevisual/types": "^0.0.6",
-    "@types/react": "^19.0.3",
-    "@types/react-dom": "^19.0.2",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-basic-ssl": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.4",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.24.2",
+    "esbuild": "^0.25.0",
     "react": "^19.0.0",
-    "vite": "^6.0.7"
+    "vite": "^6.1.0"
   }
 }
\ No newline at end of file
diff --git a/snippets/routes-app/app.ts b/snippets/routes-app/app.ts
new file mode 100644
index 0000000..902dfca
--- /dev/null
+++ b/snippets/routes-app/app.ts
@@ -0,0 +1,12 @@
+import type { Page } from '@kevisual/store/page';
+import type { QueryRouterServer } from '@kevisual/router';
+export const page = useContextKey('page', () => {
+  return new window.Page({
+    basename: '',
+  }) as unknown as Page;
+});
+
+export const app = useContextKey('app', () => {
+  console.error('app not found');
+  return null as unknown as QueryRouterServer;
+});
diff --git a/snippets/routes-app/main.ts b/snippets/routes-app/main.ts
new file mode 100644
index 0000000..60ccec9
--- /dev/null
+++ b/snippets/routes-app/main.ts
@@ -0,0 +1,39 @@
+import { page, app } from './app.ts';
+export const render = ({ renderRoot }) => {
+  renderRoot.innerHTML = `
+    <h1>Hello, World!</h1>
+  `;
+};
+
+if (page) {
+  page.addPage('/app-template', 'home');
+  page.subscribe('home', () => {
+    render({
+      renderRoot: document.getElementById('ai-root'),
+    });
+  });
+}
+
+if (app) {
+  app
+    .route({
+      path: 'app-template',
+      key: 'render',
+    })
+    .define(async (ctx) => {
+      let { renderRoot } = ctx.query;
+      if (!renderRoot) {
+        ctx.throw(404, 'renderRoot is required');
+      }
+      if (typeof renderRoot === 'string') {
+        renderRoot = document.querySelector(renderRoot);
+      }
+      if (!renderRoot) {
+        ctx.throw(404, 'renderRoot not found');
+      }
+      render({
+        renderRoot,
+      });
+    })
+    .addTo(app);
+}