diff --git a/app/web/src/base/page/vi.tsx b/app/web/src/base/page/vi.tsx
index 94f484bf..1ba8f14e 100644
--- a/app/web/src/base/page/vi.tsx
+++ b/app/web/src/base/page/vi.tsx
@@ -28,7 +28,6 @@ export default page({
       })();
       return <Loading note="init" />;
     }
-
     if (!edInitSync(p)) {
       return <Loading note="connecting-ws" />;
     }
diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts
index 5d580832..f1dcc5a4 100644
--- a/app/web/src/nova/ed/logic/ed-global.ts
+++ b/app/web/src/nova/ed/logic/ed-global.ts
@@ -146,6 +146,9 @@ export const EDGlobal = {
     | "site-not-found"
     | "page-not-found"
     | "ready",
+  preview: {
+    show_loading: false,
+  },
   sync: null as unknown as Awaited<ReturnType<typeof clientStartSync>>,
   site: deepClone(EmptySite),
   site_dts: "",
diff --git a/app/web/src/nova/ed/logic/ed-sync.tsx b/app/web/src/nova/ed/logic/ed-sync.tsx
index 6aea22c1..2644c17b 100644
--- a/app/web/src/nova/ed/logic/ed-sync.tsx
+++ b/app/web/src/nova/ed/logic/ed-sync.tsx
@@ -9,20 +9,65 @@ import { treeRebuild } from "./tree/build";
 import { reloadPage } from "./ed-route";
 import { loadSite } from "./ed-site";
 import { updateComponentMeta } from "./comp/load";
+import { createRouter, RadixRouter } from "radix3";
 
 const decoder = new TextDecoder();
 
+const page = {
+  list: [] as { id: string; url: string }[],
+  route: null as null | RadixRouter<{ id: string; url: string }>,
+};
+
 export const edInitSync = (p: PG) => {
   const session = JSON.parse(
     localStorage.getItem("prasi-session") || "null"
   ) as { data: { user: { id: string; username: string } } };
-  if (!session) {
+  if (!session && location.pathname.startsWith("/ed/")) {
     navigate("/login");
     return <Loading note="logging in" />;
   }
   p.user.id = session.data.user.id;
   p.user.username = session.data.user.username;
 
+  if (!params.page_id && location.pathname.startsWith("/vi/")) {
+    p.preview.show_loading = false;
+    if (page.list.length === 0) {
+      db.page
+        .findMany({
+          where: {
+            id_site: params.site_id,
+            is_deleted: false,
+            is_default_layout: false,
+          },
+          select: {
+            id: true,
+            url: true,
+          },
+        })
+        .then((list) => {
+          page.list = list;
+          edInitSync(p);
+        });
+
+      return;
+    } else {
+      if (!page.route) {
+        page.route = createRouter();
+        for (const e of page.list) {
+          page.route.insert(e.url, e);
+        }
+      }
+
+      const arrpath = location.pathname.split("/");
+      const pathname = "/" + arrpath.slice(3).join("/");
+
+      const res = page.route.lookup(pathname);
+      if (res) {
+        params.page_id = res.id;
+      }
+    }
+  }
+
   if (p.sync) {
     if (p.site.id === "--loading--") return false;
     if (params.site_id !== p.site.id) {
@@ -42,7 +87,11 @@ export const edInitSync = (p: PG) => {
       return false;
     }
 
-    if (!params.page_id && params.site_id) {
+    if (
+      !params.page_id &&
+      params.site_id &&
+      location.pathname.startsWith("/ed/")
+    ) {
       db.page
         .findFirst({
           where: {
@@ -99,7 +148,9 @@ export const edInitSync = (p: PG) => {
           if (params.site_id !== e.site_id || params.page_id !== e.page_id) {
             p.site.id = e.site_id;
             p.page.cur.id = e.page_id;
-            navigate(`/ed/${e.site_id}/${e.page_id}`);
+            if (location.pathname.startsWith("/ed/")) {
+              navigate(`/ed/${e.site_id}/${e.page_id}`);
+            }
           } else {
             p.site.id = e.site_id;
             p.page.cur.id = e.page_id;
diff --git a/app/web/src/nova/ed/panel/main/main.tsx b/app/web/src/nova/ed/panel/main/main.tsx
index 1997bcda..853aeb9a 100644
--- a/app/web/src/nova/ed/panel/main/main.tsx
+++ b/app/web/src/nova/ed/panel/main/main.tsx
@@ -3,6 +3,7 @@ import { Vi } from "../../../vi/vi";
 import { isMetaActive } from "../../logic/active/is-meta.active";
 import { EDGlobal, IMeta, PG, active } from "../../logic/ed-global";
 import { mainPerItemVisit } from "./main-per-item";
+import { w } from "../../../../utils/types/general";
 
 export const EdMain = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -13,6 +14,11 @@ export const EdMain = () => {
     height: 0,
   });
 
+  w.navigateOverride = (_href) => {
+    if (_href.startsWith("/ed")) return _href;
+    return "";
+  };
+
   let meta: undefined | IMeta = undefined;
 
   if (active.comp_id) {
diff --git a/app/web/src/nova/vi/preview.tsx b/app/web/src/nova/vi/preview.tsx
index a1fc5ce9..15f13b67 100644
--- a/app/web/src/nova/vi/preview.tsx
+++ b/app/web/src/nova/vi/preview.tsx
@@ -5,14 +5,46 @@ import { reloadPage } from "../ed/logic/ed-route";
 import { loadSite } from "../ed/logic/ed-site";
 import { Vi } from "./vi";
 import init from "wasm-gzip";
+import { w } from "../../utils/types/general";
 
 export const ViPreview = (arg: { pathname: string }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
 
+  w.navigateOverride = (_href) => {
+    if (_href && _href.startsWith("/")) {
+      if (w.basepath.length > 1) {
+        _href = `${w.basepath}${_href}`;
+      }
+      if (
+        location.hostname === "prasi.app" ||
+        location.hostname === "prasi.avolut.com" ||
+        location.hostname.includes("ngrok") ||
+        location.hostname === "localhost" ||
+        location.hostname === "127.0.0.1" ||
+        location.hostname === "10.0.2.2" // android localhost
+      ) {
+        if (location.pathname.startsWith("/vi") && !_href.startsWith("/vi")) {
+          const patharr = location.pathname.split("/");
+          _href = `/vi/${patharr[2]}${_href}`;
+        }
+      }
+    }
+    return _href;
+  };
+
   viRoute(p);
 
   if (p.status !== "ready") {
-    return <Loading note={p.status + "-page"} />;
+    if (p.preview.show_loading) {
+      return <Loading note={p.status + "-page"} />;
+    } else {
+      setTimeout(() => {
+        p.preview.show_loading = true;
+        p.render();
+      }, 5000);
+
+      return null;
+    }
   }
 
   const mode = p.mode;
diff --git a/app/web/src/utils/types/general.ts b/app/web/src/utils/types/general.ts
index 84af441c..0295a17b 100644
--- a/app/web/src/utils/types/general.ts
+++ b/app/web/src/utils/types/general.ts
@@ -23,6 +23,8 @@ export type PrasiAPI = {
 export const w = window as unknown as {
   isEditor: boolean;
   isMobile: boolean;
+  basepath: string;
+  navigateOverride: (s: string) => string;
   isDesktop: boolean;
   prasiApi: Record<string, PrasiAPI>;
   loadedFonts: string[];