diff --git a/README.md b/README.md
index 4322e86..64df12c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Bunext
 
-A server-rendering framework for React, built on [Bun](https://bun.sh). Bunext handles file-system routing, SSR, HMR, and client hydration — using ESBuild to bundle client assets and `Bun.serve` as the HTTP server.
+A server-rendering framework for React, built entirely on [Bun](https://bun.sh). Bunext handles file-system routing, SSR, HMR, and client hydration — using `Bun.build` to bundle client assets and `Bun.serve` as the HTTP server.
 
 ## Philosophy
 
@@ -8,7 +8,7 @@ Bunext is focused on **server-side rendering and processing**. Every page is ren
 
 The goal is a framework that is:
 
-- Fast — Bun's runtime speed and ESBuild's bundling make the full dev loop snappy
+- Fast — Bun's runtime speed and Bun.build's bundling make the full dev loop snappy
 - Transparent — the entire request pipeline is readable and debugable
 - Standard — server functions and API handlers use native Web APIs (`Request`, `Response`, `URL`) with no custom wrappers
 
@@ -61,7 +61,8 @@ The goal is a framework that is:
 
 - [Bun](https://bun.sh) v1.0 or later
 - TypeScript 5.0+
-- React 19 and react-dom 19 (peer dependencies)
+
+> **React is managed by Bunext.** You do not need to install `react` or `react-dom` — Bunext enforces its own pinned React version and removes any user-installed copies at startup to prevent version conflicts. Installing this package is all you need.
 
 ---
 
@@ -152,7 +153,7 @@ bun run dev
 | Command        | Description                                                            |
 | -------------- | ---------------------------------------------------------------------- |
 | `bunext dev`   | Start the development server with HMR and file watching.               |
-| `bunext build` | Bundle all pages for production. Outputs artifacts to `public/pages/`. |
+| `bunext build` | Bundle all pages for production. Outputs artifacts to `.bunext/public/pages/`. |
 | `bunext start` | Start the production server using pre-built artifacts.                 |
 
 ### Running the CLI
@@ -186,7 +187,7 @@ bunext build
 bunext start
 ```
 
-> **Note:** `bunext start` will exit with an error if `public/pages/map.json` does not exist. Always run `bunext build` (or `bun run build`) before `bunext start`.
+> **Note:** `bunext start` will exit with an error if `.bunext/public/pages/map.json` does not exist. Always run `bunext build` (or `bun run build`) before `bunext start`.
 
 ---
 
@@ -208,9 +209,10 @@ my-app/
 │       │   └── [slug].tsx # Route: /blog/:slug (dynamic)
 │       └── api/
 │           └── users.ts   # API route: /api/users
-├── public/                # Static files and bundler output
-│   └── __bunext/
-│       ├── pages/         # Generated by bundler (do not edit manually)
+├── public/                # Static files served at /public/*
+├── .bunext/               # Internal build artifacts (do not edit manually)
+│   └── public/
+│       ├── pages/         # Generated by bundler
 │       │   └── map.json   # Artifact map used by production server
 │       └── cache/         # File-based HTML cache (production only)
 ├── bunext.config.ts       # Optional configuration
@@ -605,7 +607,7 @@ public/
 
 Bunext includes a file-based HTML cache for production. Caching is **disabled in development** — every request renders fresh. In production, a cron job runs every 30 seconds to delete expired cache entries.
 
-Cache files are stored in `public/__bunext/cache/`. Each cached page produces two files:
+Cache files are stored in `.bunext/public/cache/`. Each cached page produces two files:
 
 | File              | Contents                                       |
 | ----------------- | ---------------------------------------------- |
@@ -670,14 +672,14 @@ Expiry resolution order (first truthy value wins):
 2. `defaultCacheExpiry` in `bunext.config.ts` (global default, in seconds)
 3. Built-in default: **3600 seconds (1 hour)**
 
-The cron job checks all cache entries every 30 seconds and deletes any whose age exceeds their expiry. Static bundled assets (JS/CSS in `public/__bunext/`) receive a separate HTTP `Cache-Control: public, max-age=604800` header (7 days) via the browser cache — this is independent of the page HTML cache.
+The cron job checks all cache entries every 30 seconds and deletes any whose age exceeds their expiry. Static bundled assets (JS/CSS in `.bunext/public/`) receive a separate HTTP `Cache-Control: public, max-age=604800` header (7 days) via the browser cache — this is independent of the page HTML cache.
 
 ### Cache Behavior and Limitations
 
 - **Production only.** Caching never activates in development (`bunext dev`).
 - **Cold start required.** The cache is populated on the first request; there is no pre-warming step.
 - **Immutable within the expiry window.** Once a page is cached, `writeCache` skips all subsequent write attempts for that key until the cron job deletes the expired entry. There is no manual invalidation API.
-- **Cache is not cleared on rebuild.** Deploying a new build does not automatically flush `public/__bunext/cache/`. Stale HTML files referencing old JS bundles can be served until they expire. Clear the cache directory as part of your deploy process if needed.
+- **Cache is not cleared on rebuild.** Deploying a new build does not automatically flush `.bunext/public/cache/`. Stale HTML files referencing old JS bundles can be served until they expire. Clear the cache directory as part of your deploy process if needed.
 - **No key collision.** Cache keys are generated via `encodeURIComponent()` on the URL path. `/foo/bar` encodes to `%2Ffoo%2Fbar` and `/foo-bar` to `%2Ffoo-bar` — distinct filenames with no collision risk.
 
 ---
@@ -880,7 +882,7 @@ Running `bunext dev`:
 1. Loads `bunext.config.ts` and sets `development: true`.
 2. Initializes directories (`.bunext/`, `public/pages/`).
 3. Creates a `Bun.FileSystemRouter` pointed at `src/pages/`.
-4. Starts the ESBuild bundler in **watch mode** — it will automatically rebuild when file content changes.
+4. Starts `Bun.build` in **watch mode** — it will automatically rebuild when file content changes.
 5. Starts a file-system watcher on `src/` — when a file is created or deleted (a "rename" event), it triggers a full bundler rebuild to update the entry points.
 6. Waits for the first successful bundle.
 7. Starts `Bun.serve()`.
@@ -890,26 +892,26 @@ Running `bunext dev`:
 Running `bunext build`:
 
 1. Sets `NODE_ENV=production`.
-2. Runs ESBuild once (not in watch mode) with minification enabled.
-3. Writes all bundled artifacts to `public/pages/` and the artifact map to `public/pages/map.json`.
+2. Runs `Bun.build` once with minification enabled.
+3. Writes all bundled artifacts to `.bunext/public/pages/` and the artifact map to `.bunext/public/pages/map.json`.
 4. Exits.
 
 ### Production Server
 
 Running `bunext start`:
 
-1. Reads `public/pages/map.json` to load the pre-built artifact map.
+1. Reads `.bunext/public/pages/map.json` to load the pre-built artifact map.
 2. Starts `Bun.serve()` without any bundler or file watcher.
 
 ### Bundler
 
-The bundler (`allPagesBundler`) uses ESBuild with three custom plugins:
+The bundler uses `Bun.build` with the `bun-plugin-tailwind` plugin. For each page, a client hydration entry point is generated and written as a real temporary file under `.bunext/hydration-src/`. Each entry imports the page component and calls `hydrateRoot()` against the server-rendered DOM node. If `src/pages/__root.tsx` exists, the page is wrapped in the root layout.
 
-- **`tailwindcss` plugin** — Processes any `.css` files through PostCSS + Tailwind CSS before bundling.
-- **`virtual-entrypoints` plugin** — Generates an in-memory client hydration entry point for each page. Each entry imports the page component and calls `hydrateRoot()` against the server-rendered DOM node. If `src/pages/__root.tsx` exists, the page is wrapped in the root layout.
-- **`artifact-tracker` plugin** — After each build, collects all output file paths, content hashes, and source entrypoints into a `BundlerCTXMap[]`. This map is stored in `global.BUNDLER_CTX_MAP` and written to `public/pages/map.json`.
+React is loaded externally — `react`, `react-dom`, `react-dom/client`, and `react/jsx-runtime` are all marked as external in the `Bun.build` config. The correct React version is resolved from the framework's own `node_modules` at startup and injected into every HTML page via a `<script type="importmap">` pointing at `esm.sh`. This guarantees a single shared React instance across all page bundles and HMR updates regardless of project size.
 
-Output files are named `[dir]/[name]/[hash]` so filenames change when content changes, enabling cache-busting.
+After each build, output metadata from `Bun.build`'s metafile is used to map each output file back to its source page, producing a `BundlerCTXMap[]`. This map is stored in `global.BUNDLER_CTX_MAP` and written to `.bunext/public/pages/map.json`.
+
+Output files are named `[hash].[ext]` so filenames change when content changes, enabling cache-busting.
 
 ### Hot Module Replacement
 
@@ -949,7 +951,7 @@ Request
   ├── /favicon.*          → Serve favicon from public/
   │
   └── Everything else     → Server-side render a page
-        [Production only] Check public/__bunext/cache/ for key = pathname + search
+        [Production only] Check .bunext/public/cache/ for key = pathname + search
           Cache HIT  → return cached HTML with X-Bunext-Cache: HIT header
           Cache MISS → continue ↓
         1. Match route via FileSystemRouter
@@ -967,6 +969,7 @@ Request
 Server-rendered HTML includes:
 
 - `window.__PAGE_PROPS__` — the serialized server function return value, read by `hydrateRoot` on the client.
+- A `<script type="importmap">` mapping React package specifiers to the esm.sh CDN (uses the `?dev` build in development).
 - A `<script type="module" async>` tag pointing to the page's bundled client script.
 - A `<link rel="stylesheet">` tag if the bundler emitted a CSS file for the page.
 - In development: the HMR client script.
diff --git a/dist/commands/build/index.js b/dist/commands/build/index.js
index 2937524..1121cfa 100644
--- a/dist/commands/build/index.js
+++ b/dist/commands/build/index.js
@@ -1,11 +1,10 @@
 import { Command } from "commander";
-import allPagesBundler from "../../functions/bundler/all-pages-bundler";
 import { log } from "../../utils/log";
 import init from "../../functions/init";
 import rewritePagesModule from "../../utils/rewrite-pages-module";
 import allPagesBunBundler from "../../functions/bundler/all-pages-bun-bundler";
-import { execSync } from "child_process";
 import grabDirNames from "../../utils/grab-dir-names";
+import { rmSync } from "fs";
 const { HYDRATION_DST_DIR, BUNX_CWD_PAGES_REWRITE_DIR } = grabDirNames();
 export default function () {
     return new Command("build")
@@ -14,15 +13,15 @@ export default function () {
         process.env.NODE_ENV = "production";
         process.env.BUILD = "true";
         try {
-            execSync(`rm -rf ${HYDRATION_DST_DIR}`);
-            execSync(`rm -rf ${BUNX_CWD_PAGES_REWRITE_DIR}`);
+            rmSync(HYDRATION_DST_DIR, { recursive: true });
+            rmSync(BUNX_CWD_PAGES_REWRITE_DIR, { recursive: true });
         }
         catch (error) { }
         await rewritePagesModule();
         await init();
         log.banner();
         log.build("Building Project ...");
-        // await allPagesBunBundler();
-        allPagesBundler();
+        await allPagesBunBundler();
+        // await allPagesBundler();
     });
 }
diff --git a/dist/commands/dev/index.js b/dist/commands/dev/index.js
index 658111c..884090a 100644
--- a/dist/commands/dev/index.js
+++ b/dist/commands/dev/index.js
@@ -3,18 +3,18 @@ import startServer from "../../functions/server/start-server";
 import { log } from "../../utils/log";
 import bunextInit from "../../functions/bunext-init";
 import rewritePagesModule from "../../utils/rewrite-pages-module";
-import { execSync } from "child_process";
 import grabDirNames from "../../utils/grab-dir-names";
+import { rmSync } from "fs";
 const { HYDRATION_DST_DIR, BUNX_CWD_PAGES_REWRITE_DIR } = grabDirNames();
 export default function () {
     return new Command("dev")
         .description("Run development server")
         .action(async () => {
-        process.env.NODE_ENV == "development";
+        process.env.NODE_ENV = "development";
         log.info("Running development server ...");
         try {
-            execSync(`rm -rf ${HYDRATION_DST_DIR}`);
-            execSync(`rm -rf ${BUNX_CWD_PAGES_REWRITE_DIR}`);
+            rmSync(HYDRATION_DST_DIR, { recursive: true });
+            rmSync(BUNX_CWD_PAGES_REWRITE_DIR, { recursive: true });
         }
         catch (error) { }
         await rewritePagesModule();
diff --git a/dist/commands/index.js b/dist/commands/index.js
old mode 100755
new mode 100644
diff --git a/dist/functions/bundler/all-pages-bun-bundler.d.ts b/dist/functions/bundler/all-pages-bun-bundler.d.ts
index e4128f3..750a1d8 100644
--- a/dist/functions/bundler/all-pages-bun-bundler.d.ts
+++ b/dist/functions/bundler/all-pages-bun-bundler.d.ts
@@ -1,5 +1,7 @@
+import type { BundlerCTXMap } from "../../types";
 type Params = {
     target?: "bun" | "browser";
+    page_file_paths?: string[];
 };
-export default function allPagesBunBundler(params?: Params): Promise<void>;
+export default function allPagesBunBundler(params?: Params): Promise<BundlerCTXMap[] | undefined>;
 export {};
diff --git a/dist/functions/bundler/all-pages-bun-bundler.js b/dist/functions/bundler/all-pages-bun-bundler.js
index f0e2857..5f7fcf9 100644
--- a/dist/functions/bundler/all-pages-bun-bundler.js
+++ b/dist/functions/bundler/all-pages-bun-bundler.js
@@ -3,45 +3,101 @@ import grabDirNames from "../../utils/grab-dir-names";
 import isDevelopment from "../../utils/is-development";
 import { log } from "../../utils/log";
 import tailwindcss from "bun-plugin-tailwind";
-const { HYDRATION_DST_DIR } = grabDirNames();
+import path from "path";
+import grabClientHydrationScript from "./grab-client-hydration-script";
+import { mkdirSync, rmSync } from "fs";
+import recordArtifacts from "./record-artifacts";
+const { HYDRATION_DST_DIR, BUNX_HYDRATION_SRC_DIR, BUNX_TMP_DIR } = grabDirNames();
 export default async function allPagesBunBundler(params) {
-    const { target = "browser" } = params || {};
+    const { target = "browser", page_file_paths } = params || {};
     const pages = grabAllPages({ exclude_api: true });
+    const target_pages = page_file_paths?.[0]
+        ? pages.filter((p) => page_file_paths.includes(p.local_path))
+        : pages;
+    if (!page_file_paths) {
+        global.PAGE_FILES = pages;
+        try {
+            rmSync(BUNX_HYDRATION_SRC_DIR, { recursive: true });
+        }
+        catch { }
+    }
+    mkdirSync(BUNX_HYDRATION_SRC_DIR, { recursive: true });
     const dev = isDevelopment();
-    let buildStart = 0;
-    buildStart = performance.now();
-    const build = await Bun.build({
-        entrypoints: pages.map((p) => p.transformed_path),
+    const entryToPage = new Map();
+    for (const page of target_pages) {
+        const txt = await grabClientHydrationScript({
+            page_local_path: page.local_path,
+        });
+        if (!txt)
+            continue;
+        const entryFile = path.join(BUNX_HYDRATION_SRC_DIR, `${page.url_path}.tsx`);
+        await Bun.write(entryFile, txt, { createPath: true });
+        entryToPage.set(path.resolve(entryFile), page);
+    }
+    if (entryToPage.size === 0)
+        return;
+    const buildStart = performance.now();
+    const result = await Bun.build({
+        entrypoints: [...entryToPage.keys()],
         outdir: HYDRATION_DST_DIR,
+        root: BUNX_HYDRATION_SRC_DIR,
         minify: true,
         format: "esm",
         define: {
             "process.env.NODE_ENV": JSON.stringify(dev ? "development" : "production"),
         },
         naming: {
-            entry: "[name]/[hash].[ext]",
-            chunk: "chunks/[name]-[hash].[ext]",
+            entry: "[dir]/[hash].[ext]",
+            chunk: "chunks/[hash].[ext]",
         },
-        plugins: [
-            tailwindcss,
-            {
-                name: "post-build",
-                setup(build) {
-                    build.onEnd((result) => {
-                        console.log("result", result);
-                    });
-                },
-            },
-        ],
-        // plugins: [
-        // ],
+        plugins: [tailwindcss],
+        // plugins: [tailwindcss, BunSkipNonBrowserPlugin],
         splitting: true,
         target,
-        external: ["bun"],
+        metafile: true,
+        external: [
+            "react",
+            "react-dom",
+            "react-dom/client",
+            "react/jsx-runtime",
+        ],
     });
-    console.log("build", build);
-    if (build.success) {
-        const elapsed = (performance.now() - buildStart).toFixed(0);
-        log.success(`[Built] in ${elapsed}ms`);
+    await Bun.write(path.join(BUNX_TMP_DIR, "bundle.json"), JSON.stringify(result, null, 4), { createPath: true });
+    if (!result.success) {
+        for (const entry of result.logs) {
+            log.error(`[Build] ${entry.message}`);
+        }
+        return;
     }
+    const artifacts = [];
+    for (const [outputPath, outputInfo] of Object.entries(result.metafile.outputs)) {
+        const entryPoint = outputInfo.entryPoint;
+        const cssBundle = outputInfo.cssBundle;
+        if (!entryPoint)
+            continue;
+        if (outputPath.match(/\.css$/))
+            continue;
+        const page = entryToPage.get(path.resolve(entryPoint));
+        if (!page)
+            continue;
+        artifacts.push({
+            path: path.join(".bunext/public/pages", outputPath),
+            hash: path.basename(outputPath, path.extname(outputPath)),
+            type: outputPath.endsWith(".css") ? "text/css" : "text/javascript",
+            entrypoint: entryPoint,
+            css_path: cssBundle
+                ? path.join(".bunext/public/pages", cssBundle)
+                : undefined,
+            file_name: page.file_name,
+            local_path: page.local_path,
+            url_path: page.url_path,
+        });
+    }
+    if (artifacts?.[0]) {
+        await recordArtifacts({ artifacts });
+    }
+    const elapsed = (performance.now() - buildStart).toFixed(0);
+    log.success(`[Built] in ${elapsed}ms`);
+    global.RECOMPILING = false;
+    return artifacts;
 }
diff --git a/dist/functions/bundler/all-pages-bundler.js b/dist/functions/bundler/all-pages-bundler.js
index 794ea0e..045fab9 100644
--- a/dist/functions/bundler/all-pages-bundler.js
+++ b/dist/functions/bundler/all-pages-bundler.js
@@ -7,6 +7,7 @@ import tailwindEsbuildPlugin from "../server/web-pages/tailwind-esbuild-plugin";
 import grabClientHydrationScript from "./grab-client-hydration-script";
 import grabArtifactsFromBundledResults from "./grab-artifacts-from-bundled-result";
 import { writeFileSync } from "fs";
+import recordArtifacts from "./record-artifacts";
 const { HYDRATION_DST_DIR, HYDRATION_DST_DIR_MAP_JSON_FILE } = grabDirNames();
 let build_starts = 0;
 const MAX_BUILD_STARTS = 10;
@@ -26,6 +27,9 @@ export default async function allPagesBundler(params) {
         const txt = await grabClientHydrationScript({
             page_local_path: page.local_path,
         });
+        // if (page.url_path == "/index") {
+        //     console.log("txt", txt);
+        // }
         if (!txt)
             continue;
         virtualEntries[key] = txt;
@@ -44,10 +48,10 @@ export default async function allPagesBundler(params) {
             }));
         },
     };
+    let buildStart = 0;
     const artifactTracker = {
         name: "artifact-tracker",
         setup(build) {
-            let buildStart = 0;
             build.onStart(() => {
                 build_starts++;
                 buildStart = performance.now();
@@ -57,38 +61,12 @@ export default async function allPagesBundler(params) {
                     process.exit(1);
                 }
             });
-            build.onEnd((result) => {
-                if (result.errors.length > 0) {
-                    for (const error of result.errors) {
-                        const loc = error.location;
-                        const location = loc
-                            ? ` ${loc.file}:${loc.line}:${loc.column}`
-                            : "";
-                        log.error(`[Build]${location} ${error.text}`);
-                    }
-                    return;
-                }
-                const artifacts = grabArtifactsFromBundledResults({
-                    pages: target_pages,
-                    result,
-                });
-                if (artifacts?.[0] && artifacts.length > 0) {
-                    for (let i = 0; i < artifacts.length; i++) {
-                        const artifact = artifacts[i];
-                        global.BUNDLER_CTX_MAP[artifact.local_path] = artifact;
-                    }
-                    // params?.post_build_fn?.({ artifacts });
-                    writeFileSync(HYDRATION_DST_DIR_MAP_JSON_FILE, JSON.stringify(artifacts));
-                }
-                const elapsed = (performance.now() - buildStart).toFixed(0);
-                log.success(`[Built] in ${elapsed}ms`);
-                global.RECOMPILING = false;
-                build_starts = 0;
-            });
+            // build.onEnd((result) => {
+            // });
         },
     };
     const entryPoints = Object.keys(virtualEntries).map((k) => `virtual:${k}`);
-    await esbuild.build({
+    const result = await esbuild.build({
         entryPoints,
         outdir: HYDRATION_DST_DIR,
         bundle: true,
@@ -99,11 +77,38 @@ export default async function allPagesBundler(params) {
         define: {
             "process.env.NODE_ENV": JSON.stringify(dev ? "development" : "production"),
         },
-        entryNames: "[dir]/[name]/[hash]",
+        entryNames: "[dir]/[hash]",
         metafile: true,
         plugins: [tailwindEsbuildPlugin, virtualPlugin, artifactTracker],
         jsx: "automatic",
-        splitting: true,
+        // splitting: true,
         // logLevel: "silent",
+        external: [
+            "react",
+            "react-dom",
+            "react-dom/client",
+            "react/jsx-runtime",
+        ],
     });
+    if (result.errors.length > 0) {
+        for (const error of result.errors) {
+            const loc = error.location;
+            const location = loc
+                ? ` ${loc.file}:${loc.line}:${loc.column}`
+                : "";
+            log.error(`[Build]${location} ${error.text}`);
+        }
+        return;
+    }
+    const artifacts = grabArtifactsFromBundledResults({
+        pages: target_pages,
+        result,
+    });
+    if (artifacts?.[0]) {
+        await recordArtifacts({ artifacts });
+    }
+    const elapsed = (performance.now() - buildStart).toFixed(0);
+    log.success(`[Built] in ${elapsed}ms`);
+    global.RECOMPILING = false;
+    build_starts = 0;
 }
diff --git a/dist/functions/bundler/all-pages-esbuild-context-bundler.d.ts b/dist/functions/bundler/all-pages-esbuild-context-bundler.d.ts
new file mode 100644
index 0000000..6ac7707
--- /dev/null
+++ b/dist/functions/bundler/all-pages-esbuild-context-bundler.d.ts
@@ -0,0 +1,7 @@
+type Params = {
+    post_build_fn?: (params: {
+        artifacts: any[];
+    }) => Promise<void> | void;
+};
+export default function allPagesESBuildContextBundler(params?: Params): Promise<void>;
+export {};
diff --git a/dist/functions/bundler/all-pages-esbuild-context-bundler.js b/dist/functions/bundler/all-pages-esbuild-context-bundler.js
new file mode 100644
index 0000000..9221fdd
--- /dev/null
+++ b/dist/functions/bundler/all-pages-esbuild-context-bundler.js
@@ -0,0 +1,117 @@
+import * as esbuild from "esbuild";
+import grabAllPages from "../../utils/grab-all-pages";
+import grabDirNames from "../../utils/grab-dir-names";
+import isDevelopment from "../../utils/is-development";
+import { log } from "../../utils/log";
+import tailwindEsbuildPlugin from "../server/web-pages/tailwind-esbuild-plugin";
+import grabClientHydrationScript from "./grab-client-hydration-script";
+import grabArtifactsFromBundledResults from "./grab-artifacts-from-bundled-result";
+import { writeFileSync } from "fs";
+const { HYDRATION_DST_DIR, HYDRATION_DST_DIR_MAP_JSON_FILE } = grabDirNames();
+let build_starts = 0;
+const MAX_BUILD_STARTS = 10;
+export default async function allPagesESBuildContextBundler(params) {
+    const pages = grabAllPages({ exclude_api: true });
+    global.PAGE_FILES = pages;
+    const virtualEntries = {};
+    const dev = isDevelopment();
+    for (const page of pages) {
+        const key = page.transformed_path;
+        const txt = await grabClientHydrationScript({
+            page_local_path: page.local_path,
+        });
+        // if (page.url_path == "/index") {
+        //     console.log("txt", txt);
+        // }
+        if (!txt)
+            continue;
+        virtualEntries[key] = txt;
+    }
+    const virtualPlugin = {
+        name: "virtual-entrypoints",
+        setup(build) {
+            build.onResolve({ filter: /^virtual:/ }, (args) => ({
+                path: args.path.replace("virtual:", ""),
+                namespace: "virtual",
+            }));
+            build.onLoad({ filter: /.*/, namespace: "virtual" }, (args) => ({
+                contents: virtualEntries[args.path],
+                loader: "tsx",
+                resolveDir: process.cwd(),
+            }));
+        },
+    };
+    let buildStart = 0;
+    const artifactTracker = {
+        name: "artifact-tracker",
+        setup(build) {
+            build.onStart(() => {
+                build_starts++;
+                buildStart = performance.now();
+                if (build_starts == MAX_BUILD_STARTS) {
+                    const error_msg = `Build Failed. Please check all your components and imports.`;
+                    log.error(error_msg);
+                    process.exit(1);
+                }
+            });
+            build.onEnd((result) => {
+                if (result.errors.length > 0) {
+                    for (const error of result.errors) {
+                        const loc = error.location;
+                        const location = loc
+                            ? ` ${loc.file}:${loc.line}:${loc.column}`
+                            : "";
+                        log.error(`[Build]${location} ${error.text}`);
+                    }
+                    return;
+                }
+                const artifacts = grabArtifactsFromBundledResults({
+                    pages,
+                    result,
+                });
+                if (artifacts?.[0] && artifacts.length > 0) {
+                    for (let i = 0; i < artifacts.length; i++) {
+                        const artifact = artifacts[i];
+                        if (artifact?.local_path && global.BUNDLER_CTX_MAP) {
+                            global.BUNDLER_CTX_MAP[artifact.local_path] =
+                                artifact;
+                        }
+                    }
+                    params?.post_build_fn?.({ artifacts });
+                    writeFileSync(HYDRATION_DST_DIR_MAP_JSON_FILE, JSON.stringify(artifacts, null, 4));
+                }
+                const elapsed = (performance.now() - buildStart).toFixed(0);
+                log.success(`[Built] in ${elapsed}ms`);
+                global.RECOMPILING = false;
+                build_starts = 0;
+            });
+        },
+    };
+    const entryPoints = Object.keys(virtualEntries).map((k) => `virtual:${k}`);
+    const ctx = await esbuild.context({
+        entryPoints,
+        outdir: HYDRATION_DST_DIR,
+        bundle: true,
+        minify: true,
+        format: "esm",
+        target: "es2020",
+        platform: "browser",
+        define: {
+            "process.env.NODE_ENV": JSON.stringify(dev ? "development" : "production"),
+        },
+        entryNames: "[dir]/[hash]",
+        metafile: true,
+        plugins: [tailwindEsbuildPlugin, virtualPlugin, artifactTracker],
+        jsx: "automatic",
+        splitting: true,
+        // logLevel: "silent",
+        external: [
+            "react",
+            "react-dom",
+            "react-dom/client",
+            "react/jsx-runtime",
+        ],
+    });
+    await ctx.rebuild();
+    // global.BUNDLER_CTX = ctx;
+}
diff --git a/dist/functions/bundler/grab-client-hydration-script.js b/dist/functions/bundler/grab-client-hydration-script.js
index 9309c66..9c91487 100644
--- a/dist/functions/bundler/grab-client-hydration-script.js
+++ b/dist/functions/bundler/grab-client-hydration-script.js
@@ -11,7 +11,7 @@ export default async function grabClientHydrationScript({ page_local_path, }) {
     const root_component_path = path.join(PAGES_DIR, `${AppNames["RootPagesComponentName"]}.tsx`);
     const does_root_exist = existsSync(root_component_path);
     let txt = ``;
-    txt += `import { hydrateRoot, createElement } from "react-dom/client";\n`;
+    txt += `import { hydrateRoot } from "react-dom/client";\n`;
     if (does_root_exist) {
         txt += `import Root from "${root_component_path}";\n`;
     }
diff --git a/dist/functions/bundler/plugins/bun-skip-browser-plugin.d.ts b/dist/functions/bundler/plugins/bun-skip-browser-plugin.d.ts
new file mode 100644
index 0000000..88e2580
--- /dev/null
+++ b/dist/functions/bundler/plugins/bun-skip-browser-plugin.d.ts
@@ -0,0 +1,2 @@
+declare const BunSkipNonBrowserPlugin: Bun.BunPlugin;
+export default BunSkipNonBrowserPlugin;
diff --git a/dist/functions/bundler/plugins/bun-skip-browser-plugin.js b/dist/functions/bundler/plugins/bun-skip-browser-plugin.js
new file mode 100644
index 0000000..e8be583
--- /dev/null
+++ b/dist/functions/bundler/plugins/bun-skip-browser-plugin.js
@@ -0,0 +1,32 @@
+const BunSkipNonBrowserPlugin = {
+    name: "skip-non-browser",
+    setup(build) {
+        build.onResolve({ filter: /^(bun:|node:)/ }, (args) => {
+            return { path: args.path, external: true };
+        });
+        build.onResolve({ filter: /^[^./]/ }, (args) => {
+            // If it's a built-in like 'fs' or 'path', skip it immediately
+            const excludes = [
+                "fs",
+                "path",
+                "os",
+                "crypto",
+                "net",
+                "events",
+                "util",
+            ];
+            if (excludes.includes(args.path) || args.path.startsWith("node:")) {
+                return { path: args.path, external: true };
+            }
+            try {
+                Bun.resolveSync(args.path, args.importer || process.cwd());
+                return null;
+            }
+            catch (e) {
+                console.warn(`[Skip] Mark as external: ${args.path}`);
+                return { path: args.path, external: true };
+            }
+        });
+    },
+};
+export default BunSkipNonBrowserPlugin;
diff --git a/dist/functions/bundler/record-artifacts.d.ts b/dist/functions/bundler/record-artifacts.d.ts
new file mode 100644
index 0000000..4ce4440
--- /dev/null
+++ b/dist/functions/bundler/record-artifacts.d.ts
@@ -0,0 +1,6 @@
+import type { BundlerCTXMap } from "../../types";
+type Params = {
+    artifacts: BundlerCTXMap[];
+};
+export default function recordArtifacts({ artifacts }: Params): Promise<void>;
+export {};
diff --git a/dist/functions/bundler/record-artifacts.js b/dist/functions/bundler/record-artifacts.js
new file mode 100644
index 0000000..bc8adfb
--- /dev/null
+++ b/dist/functions/bundler/record-artifacts.js
@@ -0,0 +1,14 @@
+import grabDirNames from "../../utils/grab-dir-names";
+const { HYDRATION_DST_DIR_MAP_JSON_FILE } = grabDirNames();
+export default async function recordArtifacts({ artifacts }) {
+    const artifacts_map = {};
+    for (const artifact of artifacts) {
+        if (artifact?.local_path) {
+            artifacts_map[artifact.local_path] = artifact;
+        }
+    }
+    if (global.BUNDLER_CTX_MAP) {
+        global.BUNDLER_CTX_MAP = artifacts_map;
+    }
+    await Bun.write(HYDRATION_DST_DIR_MAP_JSON_FILE, JSON.stringify(artifacts_map, null, 4));
+}
diff --git a/dist/functions/bunext-init.d.ts b/dist/functions/bunext-init.d.ts
index 929c8da..c4e1a8d 100644
--- a/dist/functions/bunext-init.d.ts
+++ b/dist/functions/bunext-init.d.ts
@@ -16,7 +16,7 @@ declare global {
     var LAST_BUILD_TIME: number;
     var BUNDLER_CTX_MAP: {
         [k: string]: BundlerCTXMap;
-    };
+    } | undefined;
     var BUNDLER_REBUILDS: 0;
     var PAGES_SRC_WATCHER: FSWatcher | undefined;
     var CURRENT_VERSION: string | undefined;
diff --git a/dist/functions/bunext-init.js b/dist/functions/bunext-init.js
index 828120b..4d2c6ab 100644
--- a/dist/functions/bunext-init.js
+++ b/dist/functions/bunext-init.js
@@ -8,6 +8,7 @@ import watcher from "./server/watcher";
 import { log } from "../utils/log";
 import cron from "./server/cron";
 import EJSON from "../utils/ejson";
+import allPagesBunBundler from "./bundler/all-pages-bun-bundler";
 const { PAGES_DIR, HYDRATION_DST_DIR_MAP_JSON_FILE } = grabDirNames();
 export default async function bunextInit() {
     global.ORA_SPINNER = ora();
@@ -25,12 +26,13 @@ export default async function bunextInit() {
     global.ROUTER = router;
     const is_dev = isDevelopment();
     if (is_dev) {
-        await allPagesBundler();
+        // await allPagesBundler();
+        await allPagesBunBundler();
         watcher();
     }
     else {
         const artifacts = EJSON.parse(readFileSync(HYDRATION_DST_DIR_MAP_JSON_FILE, "utf-8"));
-        if (!artifacts?.[0]) {
+        if (!artifacts) {
             log.error("Please build first.");
             process.exit(1);
         }
diff --git a/dist/functions/init.js b/dist/functions/init.js
index 7a93c38..d9a7ee0 100644
--- a/dist/functions/init.js
+++ b/dist/functions/init.js
@@ -1,13 +1,33 @@
-import { existsSync, mkdirSync, writeFileSync } from "fs";
+import { existsSync, mkdirSync, rmSync, writeFileSync } from "fs";
 import grabDirNames from "../utils/grab-dir-names";
-import { execSync } from "child_process";
 import path from "path";
 import grabConfig from "./grab-config";
+import { log } from "../utils/log";
 export default async function () {
     const dirNames = grabDirNames();
     const is_dev = !Boolean(process.env.NODE_ENV == "production");
-    execSync(`rm -rf ${dirNames.BUNEXT_CACHE_DIR}`);
-    execSync(`rm -rf ${dirNames.BUNX_CWD_MODULE_CACHE_DIR}`);
+    rmSync(dirNames.BUNEXT_CACHE_DIR, {
+        recursive: true,
+        force: true,
+    });
+    rmSync(dirNames.BUNX_CWD_MODULE_CACHE_DIR, {
+        recursive: true,
+        force: true,
+    });
+    try {
+        const react_package_dir = path.join(dirNames.ROOT_DIR, "node_modules", "react");
+        const react_dom_package_dir = path.join(dirNames.ROOT_DIR, "node_modules", "react-dom");
+        if (dirNames.ROOT_DIR.startsWith(dirNames.BUNX_ROOT_DIR) &&
+            !dirNames.ROOT_DIR.includes(`${dirNames.BUNX_ROOT_DIR}/test/`)) {
+            log.error(`Can't Run From this Directory => ${dirNames.ROOT_DIR}`);
+            process.exit(1);
+        }
+        else {
+            rmSync(react_package_dir, { recursive: true });
+            rmSync(react_dom_package_dir, { recursive: true });
+        }
+    }
+    catch (error) { }
     try {
         const package_json = await Bun.file(path.resolve(__dirname, "../../package.json")).json();
         const current_version = package_json.version;
diff --git a/dist/functions/server/bunext-req-handler.js b/dist/functions/server/bunext-req-handler.js
index 6062703..705b763 100644
--- a/dist/functions/server/bunext-req-handler.js
+++ b/dist/functions/server/bunext-req-handler.js
@@ -5,6 +5,7 @@ import grabConstants from "../../utils/grab-constants";
 import handleHmr from "./handle-hmr";
 import handlePublic from "./handle-public";
 import handleFiles from "./handle-files";
+import handleBunextPublicAssets from "./handle-bunext-public-assets";
 export default async function bunextRequestHandler({ req: initial_req, }) {
     const is_dev = isDevelopment();
     let req = initial_req.clone();
@@ -27,6 +28,9 @@ export default async function bunextRequestHandler({ req: initial_req, }) {
         if (url.pathname === "/__hmr" && is_dev) {
             response = await handleHmr({ req });
         }
+        else if (url.pathname.startsWith("/.bunext/public/pages")) {
+            response = await handleBunextPublicAssets({ req });
+        }
         else if (url.pathname.startsWith("/api/")) {
             response = await handleRoutes({ req });
         }
diff --git a/dist/functions/server/cleanup-artifacts.d.ts b/dist/functions/server/cleanup-artifacts.d.ts
new file mode 100644
index 0000000..6b3bdf0
--- /dev/null
+++ b/dist/functions/server/cleanup-artifacts.d.ts
@@ -0,0 +1,6 @@
+import type { BundlerCTXMap } from "../../types";
+type Params = {
+    new_artifacts: BundlerCTXMap[];
+};
+export default function cleanupArtifacts({ new_artifacts }: Params): Promise<void>;
+export {};
diff --git a/dist/functions/server/cleanup-artifacts.js b/dist/functions/server/cleanup-artifacts.js
new file mode 100644
index 0000000..ffe4bd4
--- /dev/null
+++ b/dist/functions/server/cleanup-artifacts.js
@@ -0,0 +1,33 @@
+import { log } from "../../utils/log";
+import path from "path";
+import grabDirNames from "../../utils/grab-dir-names";
+import { existsSync, readdirSync, statSync, unlinkSync } from "fs";
+const { ROOT_DIR, HYDRATION_DST_DIR_MAP_JSON_FILE_NAME } = grabDirNames();
+export default async function cleanupArtifacts({ new_artifacts }) {
+    try {
+        for (let i = 0; i < new_artifacts.length; i++) {
+            const new_artifact = new_artifacts[i];
+            const artifact_public_dir = path.dirname(path.join(ROOT_DIR, new_artifact.path));
+            const dir_content = readdirSync(artifact_public_dir);
+            for (let d = 0; d < dir_content.length; d++) {
+                const dir_or_file = dir_content[d];
+                const full_path = path.join(artifact_public_dir, dir_or_file);
+                const file_or_path_stats = statSync(full_path);
+                if (file_or_path_stats.isDirectory() ||
+                    dir_or_file == HYDRATION_DST_DIR_MAP_JSON_FILE_NAME) {
+                    continue;
+                }
+                if (new_artifact.path.includes(dir_or_file) ||
+                    new_artifact.css_path?.includes(dir_or_file)) {
+                    continue;
+                }
+                if (existsSync(full_path)) {
+                    unlinkSync(full_path);
+                }
+            }
+        }
+    }
+    catch (error) {
+        log.error(error);
+    }
+}
diff --git a/dist/functions/server/handle-bunext-public-assets.d.ts b/dist/functions/server/handle-bunext-public-assets.d.ts
new file mode 100644
index 0000000..9130e3e
--- /dev/null
+++ b/dist/functions/server/handle-bunext-public-assets.d.ts
@@ -0,0 +1,5 @@
+type Params = {
+    req: Request;
+};
+export default function ({ req }: Params): Promise<Response>;
+export {};
diff --git a/dist/functions/server/handle-bunext-public-assets.js b/dist/functions/server/handle-bunext-public-assets.js
new file mode 100644
index 0000000..e4236b4
--- /dev/null
+++ b/dist/functions/server/handle-bunext-public-assets.js
@@ -0,0 +1,27 @@
+import grabDirNames from "../../utils/grab-dir-names";
+import path from "path";
+import isDevelopment from "../../utils/is-development";
+import { existsSync } from "fs";
+const { HYDRATION_DST_DIR } = grabDirNames();
+export default async function ({ req }) {
+    try {
+        const is_dev = isDevelopment();
+        const url = new URL(req.url);
+        const file_path = path.join(HYDRATION_DST_DIR, url.pathname.replace(/\/\.bunext\/public\/pages\//, ""));
+        if (!file_path.startsWith(HYDRATION_DST_DIR + path.sep)) {
+            return new Response("Forbidden", { status: 403 });
+        }
+        if (!existsSync(file_path)) {
+            return new Response(`File Doesn't Exist`, {
+                status: 404,
+            });
+        }
+        const file = Bun.file(file_path);
+        return new Response(file);
+    }
+    catch (error) {
+        return new Response(`File Not Found`, {
+            status: 404,
+        });
+    }
+}
diff --git a/dist/functions/server/handle-files.js b/dist/functions/server/handle-files.js
index 6b84ee7..579a7b9 100644
--- a/dist/functions/server/handle-files.js
+++ b/dist/functions/server/handle-files.js
@@ -8,6 +8,9 @@ export default async function ({ req }) {
         const is_dev = isDevelopment();
         const url = new URL(req.url);
         const file_path = path.join(PUBLIC_DIR, url.pathname);
+        if (!file_path.startsWith(PUBLIC_DIR + path.sep)) {
+            return new Response("Forbidden", { status: 403 });
+        }
         if (!existsSync(file_path)) {
             return new Response(`File Doesn't Exist`, {
                 status: 404,
diff --git a/dist/functions/server/handle-hmr.js b/dist/functions/server/handle-hmr.js
index 7dbd5eb..86cabd7 100644
--- a/dist/functions/server/handle-hmr.js
+++ b/dist/functions/server/handle-hmr.js
@@ -2,7 +2,7 @@ export default async function ({ req }) {
     const referer_url = new URL(req.headers.get("referer") || "");
     const match = global.ROUTER.match(referer_url.pathname);
     const target_map = match?.filePath
-        ? global.BUNDLER_CTX_MAP[match.filePath]
+        ? global.BUNDLER_CTX_MAP?.[match.filePath]
         : undefined;
     let controller;
     let heartbeat;
diff --git a/dist/functions/server/handle-public.js b/dist/functions/server/handle-public.js
index 0ff2ba9..6197c44 100644
--- a/dist/functions/server/handle-public.js
+++ b/dist/functions/server/handle-public.js
@@ -8,6 +8,9 @@ export default async function ({ req }) {
         const is_dev = isDevelopment();
         const url = new URL(req.url);
         const file_path = path.join(PUBLIC_DIR, url.pathname.replace(/^\/public/, ""));
+        if (!file_path.startsWith(PUBLIC_DIR + path.sep)) {
+            return new Response("Forbidden", { status: 403 });
+        }
         if (!existsSync(file_path)) {
             return new Response(`Public File Doesn't Exist`, {
                 status: 404,
diff --git a/dist/functions/server/handle-routes.js b/dist/functions/server/handle-routes.js
index 81c8c46..55de3ac 100644
--- a/dist/functions/server/handle-routes.js
+++ b/dist/functions/server/handle-routes.js
@@ -14,7 +14,7 @@ export default async function ({ req }) {
             success: false,
             msg: errMsg,
         }, {
-            status: 401,
+            status: 404,
             headers: {
                 "Content-Type": "application/json",
             },
diff --git a/dist/functions/server/rebuild-bundler.js b/dist/functions/server/rebuild-bundler.js
index bf309df..e91d069 100644
--- a/dist/functions/server/rebuild-bundler.js
+++ b/dist/functions/server/rebuild-bundler.js
@@ -1,15 +1,19 @@
-import allPagesBundler from "../bundler/all-pages-bundler";
 import serverPostBuildFn from "./server-post-build-fn";
 import { log } from "../../utils/log";
+import allPagesBunBundler from "../bundler/all-pages-bun-bundler";
+import cleanupArtifacts from "./cleanup-artifacts";
 export default async function rebuildBundler(params) {
     try {
         global.ROUTER.reload();
         // await global.BUNDLER_CTX?.dispose();
         // global.BUNDLER_CTX = undefined;
-        await allPagesBundler({
+        const new_artifacts = await allPagesBunBundler({
             page_file_paths: params?.target_file_paths,
         });
         await serverPostBuildFn();
+        if (new_artifacts?.[0]) {
+            cleanupArtifacts({ new_artifacts });
+        }
     }
     catch (error) {
         log.error(error);
diff --git a/dist/functions/server/server-post-build-fn.js b/dist/functions/server/server-post-build-fn.js
index 12884e2..23eb074 100644
--- a/dist/functions/server/server-post-build-fn.js
+++ b/dist/functions/server/server-post-build-fn.js
@@ -7,7 +7,7 @@ export default async function serverPostBuildFn() {
     if (!global.HMR_CONTROLLERS?.[0] || !global.BUNDLER_CTX_MAP) {
         return;
     }
-    for (let i = 0; i < global.HMR_CONTROLLERS.length; i++) {
+    for (let i = global.HMR_CONTROLLERS.length - 1; i >= 0; i--) {
         const controller = global.HMR_CONTROLLERS[i];
         if (!controller.target_map?.local_path) {
             continue;
diff --git a/dist/functions/server/watcher.js b/dist/functions/server/watcher.js
index 77e86b8..af0890c 100644
--- a/dist/functions/server/watcher.js
+++ b/dist/functions/server/watcher.js
@@ -6,7 +6,6 @@ import { log } from "../../utils/log";
 import rewritePagesModule from "../../utils/rewrite-pages-module";
 const { ROOT_DIR } = grabDirNames();
 export default async function watcher() {
-    await Bun.sleep(1000);
     const pages_src_watcher = watch(ROOT_DIR, {
         recursive: true,
         persistent: true,
@@ -64,7 +63,9 @@ async function fullRebuild(params) {
         const { msg } = params || {};
         global.RECOMPILING = true;
         const target_file_paths = global.HMR_CONTROLLERS.map((hmr) => hmr.target_map?.local_path).filter((f) => typeof f == "string");
-        await rewritePagesModule({ page_file_path: target_file_paths });
+        await rewritePagesModule({
+            page_file_path: target_file_paths,
+        });
         if (msg) {
             log.watch(msg);
         }
diff --git a/dist/functions/server/web-pages/generate-web-html.js b/dist/functions/server/web-pages/generate-web-html.js
index fb8cbb6..08d13d4 100644
--- a/dist/functions/server/web-pages/generate-web-html.js
+++ b/dist/functions/server/web-pages/generate-web-html.js
@@ -7,6 +7,13 @@ import grabWebPageHydrationScript from "./grab-web-page-hydration-script";
 import grabWebMetaHTML from "./grab-web-meta-html";
 import { log } from "../../../utils/log";
 import { AppData } from "../../../data/app-data";
+import { readFileSync } from "fs";
+import path from "path";
+let _reactVersion = "19";
+try {
+    _reactVersion = JSON.parse(readFileSync(path.join(process.cwd(), "node_modules/react/package.json"), "utf-8")).version;
+}
+catch { }
 export default async function genWebHTML({ component, pageProps, bundledMap, head: Head, module, meta, routeParams, debug, }) {
     const { ClientRootElementIDName, ClientWindowPagePropsName } = grabContants();
     if (debug) {
@@ -30,8 +37,21 @@ export default async function genWebHTML({ component, pageProps, bundledMap, hea
     if (bundledMap?.css_path) {
         html += `        <link rel="stylesheet" href="/${bundledMap.css_path}" />\n`;
     }
-    html += `        <script>window.${ClientWindowPagePropsName} = ${EJSON.stringify(pageProps || {}) || "{}"}</script>\n`;
+    const serializedProps = (EJSON.stringify(pageProps || {}) || "{}").replace(/<\//g, "<\\/");
+    html += `        <script>window.${ClientWindowPagePropsName} = ${serializedProps}</script>\n`;
     if (bundledMap?.path) {
+        const dev = isDevelopment();
+        const devSuffix = dev ? "?dev" : "";
+        const importMap = JSON.stringify({
+            imports: {
+                react: `https://esm.sh/react@${_reactVersion}${devSuffix}`,
+                "react-dom": `https://esm.sh/react-dom@${_reactVersion}${devSuffix}`,
+                "react-dom/client": `https://esm.sh/react-dom@${_reactVersion}/client${devSuffix}`,
+                "react/jsx-runtime": `https://esm.sh/react@${_reactVersion}/jsx-runtime${devSuffix}`,
+                "react/jsx-dev-runtime": `https://esm.sh/react@${_reactVersion}/jsx-dev-runtime${devSuffix}`,
+            },
+        });
+        html += `        <script type="importmap">${importMap}</script>\n`;
         html += `        <script src="/${bundledMap.path}" type="module" id="${AppData["BunextClientHydrationScriptID"]}" async></script>\n`;
     }
     if (isDevelopment()) {
diff --git a/dist/functions/server/web-pages/grab-page-component.js b/dist/functions/server/web-pages/grab-page-component.js
index ba3d5ea..57089fd 100644
--- a/dist/functions/server/web-pages/grab-page-component.js
+++ b/dist/functions/server/web-pages/grab-page-component.js
@@ -33,7 +33,7 @@ export default async function grabPageComponent({ req, file_path: passed_file_pa
             // log.error(errMsg);
             throw new Error(errMsg);
         }
-        const bundledMap = global.BUNDLER_CTX_MAP[file_path];
+        const bundledMap = global.BUNDLER_CTX_MAP?.[file_path];
         if (!bundledMap?.path) {
             const errMsg = `No Bundled File Path for this request path!`;
             log.error(errMsg);
diff --git a/dist/functions/server/web-pages/grab-page-error-component.js b/dist/functions/server/web-pages/grab-page-error-component.js
index 2881544..e9b5abf 100644
--- a/dist/functions/server/web-pages/grab-page-error-component.js
+++ b/dist/functions/server/web-pages/grab-page-error-component.js
@@ -11,8 +11,8 @@ export default async function grabPageErrorComponent({ error, routeParams, is404
         const match = router.match(errorRoute);
         const filePath = match?.filePath || presetComponent;
         const bundledMap = match?.filePath
-            ? global.BUNDLER_CTX_MAP[match.filePath]
-            : {};
+            ? global.BUNDLER_CTX_MAP?.[match.filePath]
+            : undefined;
         const module = await import(filePath);
         const Component = module.default;
         const component = _jsx(Component, { children: _jsx("span", { children: error.message }) });
@@ -41,7 +41,7 @@ export default async function grabPageErrorComponent({ error, routeParams, is404
             component: _jsx(DefaultNotFound, {}),
             routeParams,
             module: { default: DefaultNotFound },
-            bundledMap: {},
+            bundledMap: undefined,
             serverRes: {
                 responseOptions: {
                     status: is404 ? 404 : 500,
diff --git a/dist/functions/server/web-pages/grab-web-meta-html.js b/dist/functions/server/web-pages/grab-web-meta-html.js
index 0ee566f..e49986c 100644
--- a/dist/functions/server/web-pages/grab-web-meta-html.js
+++ b/dist/functions/server/web-pages/grab-web-meta-html.js
@@ -1,60 +1,61 @@
+import { escape } from "lodash";
 export default function grabWebMetaHTML({ meta }) {
     let html = ``;
     if (meta.title) {
-        html += `        <title>${meta.title}</title>\n`;
+        html += `        <title>${escape(meta.title)}</title>\n`;
     }
     if (meta.description) {
-        html += `        <meta name="description" content="${meta.description}" />\n`;
+        html += `        <meta name="description" content="${escape(meta.description)}" />\n`;
     }
     if (meta.keywords) {
         const keywords = Array.isArray(meta.keywords)
             ? meta.keywords.join(", ")
             : meta.keywords;
-        html += `        <meta name="keywords" content="${keywords}" />\n`;
+        html += `        <meta name="keywords" content="${escape(keywords)}" />\n`;
     }
     if (meta.author) {
-        html += `        <meta name="author" content="${meta.author}" />\n`;
+        html += `        <meta name="author" content="${escape(meta.author)}" />\n`;
     }
     if (meta.robots) {
-        html += `        <meta name="robots" content="${meta.robots}" />\n`;
+        html += `        <meta name="robots" content="${escape(meta.robots)}" />\n`;
     }
     if (meta.canonical) {
-        html += `        <link rel="canonical" href="${meta.canonical}" />\n`;
+        html += `        <link rel="canonical" href="${escape(meta.canonical)}" />\n`;
     }
     if (meta.themeColor) {
-        html += `        <meta name="theme-color" content="${meta.themeColor}" />\n`;
+        html += `        <meta name="theme-color" content="${escape(meta.themeColor)}" />\n`;
     }
     if (meta.og) {
         const { og } = meta;
         if (og.title)
-            html += `        <meta property="og:title" content="${og.title}" />\n`;
+            html += `        <meta property="og:title" content="${escape(og.title)}" />\n`;
         if (og.description)
-            html += `        <meta property="og:description" content="${og.description}" />\n`;
+            html += `        <meta property="og:description" content="${escape(og.description)}" />\n`;
         if (og.image)
-            html += `        <meta property="og:image" content="${og.image}" />\n`;
+            html += `        <meta property="og:image" content="${escape(og.image)}" />\n`;
         if (og.url)
-            html += `        <meta property="og:url" content="${og.url}" />\n`;
+            html += `        <meta property="og:url" content="${escape(og.url)}" />\n`;
         if (og.type)
-            html += `        <meta property="og:type" content="${og.type}" />\n`;
+            html += `        <meta property="og:type" content="${escape(og.type)}" />\n`;
         if (og.siteName)
-            html += `        <meta property="og:site_name" content="${og.siteName}" />\n`;
+            html += `        <meta property="og:site_name" content="${escape(og.siteName)}" />\n`;
         if (og.locale)
-            html += `        <meta property="og:locale" content="${og.locale}" />\n`;
+            html += `        <meta property="og:locale" content="${escape(og.locale)}" />\n`;
     }
     if (meta.twitter) {
         const { twitter } = meta;
         if (twitter.card)
-            html += `        <meta name="twitter:card" content="${twitter.card}" />\n`;
+            html += `        <meta name="twitter:card" content="${escape(twitter.card)}" />\n`;
         if (twitter.title)
-            html += `        <meta name="twitter:title" content="${twitter.title}" />\n`;
+            html += `        <meta name="twitter:title" content="${escape(twitter.title)}" />\n`;
         if (twitter.description)
-            html += `        <meta name="twitter:description" content="${twitter.description}" />\n`;
+            html += `        <meta name="twitter:description" content="${escape(twitter.description)}" />\n`;
         if (twitter.image)
-            html += `        <meta name="twitter:image" content="${twitter.image}" />\n`;
+            html += `        <meta name="twitter:image" content="${escape(twitter.image)}" />\n`;
         if (twitter.site)
-            html += `        <meta name="twitter:site" content="${twitter.site}" />\n`;
+            html += `        <meta name="twitter:site" content="${escape(twitter.site)}" />\n`;
         if (twitter.creator)
-            html += `        <meta name="twitter:creator" content="${twitter.creator}" />\n`;
+            html += `        <meta name="twitter:creator" content="${escape(twitter.creator)}" />\n`;
     }
     return html;
 }
diff --git a/dist/utils/grab-all-pages.js b/dist/utils/grab-all-pages.js
index 2425de1..cbbd83b 100644
--- a/dist/utils/grab-all-pages.js
+++ b/dist/utils/grab-all-pages.js
@@ -48,7 +48,13 @@ function grabPageDirRecursively({ page_dir }) {
             }
         }
     }
-    return pages_files;
+    return pages_files.sort((a, b) => {
+        if (a.url_path === "/index")
+            return -1;
+        if (b.url_path === "/index")
+            return 1;
+        return 0;
+    });
 }
 function grabPageFileObject({ file_path, }) {
     let url_path = file_path
diff --git a/dist/utils/grab-dir-names.d.ts b/dist/utils/grab-dir-names.d.ts
index 09ac9df..86029c6 100644
--- a/dist/utils/grab-dir-names.d.ts
+++ b/dist/utils/grab-dir-names.d.ts
@@ -20,4 +20,5 @@ export default function grabDirNames(): {
     BUNEXT_CACHE_DIR: string;
     BUNX_CWD_MODULE_CACHE_DIR: string;
     BUNX_CWD_PAGES_REWRITE_DIR: string;
+    HYDRATION_DST_DIR_MAP_JSON_FILE_NAME: string;
 };
diff --git a/dist/utils/grab-dir-names.js b/dist/utils/grab-dir-names.js
index 28cf1b6..3f02d0f 100644
--- a/dist/utils/grab-dir-names.js
+++ b/dist/utils/grab-dir-names.js
@@ -5,16 +5,17 @@ export default function grabDirNames() {
     const PAGES_DIR = path.join(SRC_DIR, "pages");
     const API_DIR = path.join(PAGES_DIR, "api");
     const PUBLIC_DIR = path.join(ROOT_DIR, "public");
-    const BUNEXT_PUBLIC_DIR = path.join(PUBLIC_DIR, "__bunext");
-    const HYDRATION_DST_DIR = path.join(BUNEXT_PUBLIC_DIR, "pages");
-    const BUNEXT_CACHE_DIR = path.join(BUNEXT_PUBLIC_DIR, "cache");
-    const HYDRATION_DST_DIR_MAP_JSON_FILE = path.join(HYDRATION_DST_DIR, "map.json");
     const CONFIG_FILE = path.join(ROOT_DIR, "bunext.config.ts");
     const BUNX_CWD_DIR = path.resolve(ROOT_DIR, ".bunext");
     const BUNX_CWD_MODULE_CACHE_DIR = path.resolve(BUNX_CWD_DIR, "module-cache");
     const BUNX_CWD_PAGES_REWRITE_DIR = path.resolve(BUNX_CWD_DIR, "pages");
     const BUNX_TMP_DIR = path.resolve(BUNX_CWD_DIR, ".tmp");
     const BUNX_HYDRATION_SRC_DIR = path.resolve(BUNX_CWD_DIR, "client", "hydration-src");
+    const BUNEXT_PUBLIC_DIR = path.join(BUNX_CWD_DIR, "public");
+    const HYDRATION_DST_DIR = path.join(BUNEXT_PUBLIC_DIR, "pages");
+    const BUNEXT_CACHE_DIR = path.join(BUNEXT_PUBLIC_DIR, "cache");
+    const HYDRATION_DST_DIR_MAP_JSON_FILE_NAME = "map.json";
+    const HYDRATION_DST_DIR_MAP_JSON_FILE = path.join(HYDRATION_DST_DIR, HYDRATION_DST_DIR_MAP_JSON_FILE_NAME);
     const BUNX_ROOT_DIR = path.resolve(__dirname, "../../");
     const BUNX_ROOT_SRC_DIR = path.join(BUNX_ROOT_DIR, "src");
     const BUNX_ROOT_PRESETS_DIR = path.join(BUNX_ROOT_SRC_DIR, "presets");
@@ -44,5 +45,6 @@ export default function grabDirNames() {
         BUNEXT_CACHE_DIR,
         BUNX_CWD_MODULE_CACHE_DIR,
         BUNX_CWD_PAGES_REWRITE_DIR,
+        HYDRATION_DST_DIR_MAP_JSON_FILE_NAME,
     };
 }
diff --git a/src/__tests__/e2e/e2e.test.ts b/src/__tests__/e2e/e2e.test.ts
index c8f0969..ef90181 100644
--- a/src/__tests__/e2e/e2e.test.ts
+++ b/src/__tests__/e2e/e2e.test.ts
@@ -1,21 +1,60 @@
 import { describe, expect, test, beforeAll, afterAll } from "bun:test";
 import startServer from "../../../src/functions/server/start-server";
-import bunextInit from "../../../src/functions/bunext-init";
+import rewritePagesModule from "../../../src/utils/rewrite-pages-module";
+import pagePathTransform from "../../../src/utils/page-path-transform";
 import path from "path";
 import fs from "fs";
 
+// Fixture lives under test/ so the framework's directory guard allows it
+const fixtureDir = path.resolve(__dirname, "../../../test/e2e-fixture");
+const fixturePagesDir = path.join(fixtureDir, "src", "pages");
+const fixtureIndexPage = path.join(fixturePagesDir, "index.tsx");
+
+// The rewritten page path (inside .bunext/pages, stripped of server logic)
+const rewrittenIndexPage = pagePathTransform({ page_path: fixtureIndexPage });
+
 let originalCwd = process.cwd();
+let originalPort: string | undefined;
 
 describe("E2E Integration", () => {
     let server: any;
-    
+
     beforeAll(async () => {
-        // Change to the fixture directory to simulate actual user repo
-        const fixtureDir = path.resolve(__dirname, "../__fixtures__/app");
+        originalPort = process.env.PORT;
+        // Use port 0 so Bun.serve picks a random available port
+        process.env.PORT = "0";
+
         process.chdir(fixtureDir);
-        
-        // Mock grabAppPort to assign dynamically to avoid port conflicts
+
         global.CONFIG = { development: true };
+        global.HMR_CONTROLLERS = [];
+        global.BUNDLER_REBUILDS = 0;
+        global.PAGE_FILES = [];
+
+        // Set up router pointing at the fixture's pages directory
+        global.ROUTER = new Bun.FileSystemRouter({
+            style: "nextjs",
+            dir: fixturePagesDir,
+        });
+
+        // Rewrite the fixture page (strips server logic) into .bunext/pages
+        // so that grab-page-react-component-string can resolve the import
+        await rewritePagesModule({ page_file_path: fixtureIndexPage });
+
+        // Pre-populate the bundler context map so grab-page-component can
+        // look up the compiled path. The `path` value only needs to be
+        // present for the guard check; SSR does not require the file to exist.
+        global.BUNDLER_CTX_MAP = {
+            [fixtureIndexPage]: {
+                path: ".bunext/public/pages/index.js",
+                hash: "index",
+                type: "text/javascript",
+                entrypoint: fixtureIndexPage,
+                local_path: fixtureIndexPage,
+                url_path: "/",
+                file_name: "index",
+            },
+        };
     });
 
     afterAll(async () => {
@@ -23,32 +62,35 @@ describe("E2E Integration", () => {
             server.stop(true);
         }
         process.chdir(originalCwd);
-        
-        // Ensure to remove the dummy generated .bunext folder
-        const dotBunext = path.resolve(__dirname, "../__fixtures__/app/.bunext");
+
+        // Restore PORT env variable
+        if (originalPort !== undefined) {
+            process.env.PORT = originalPort;
+        } else {
+            delete process.env.PORT;
+        }
+
+        // Remove the rewritten page created during setup
+        const rewrittenDir = path.dirname(rewrittenIndexPage);
+        if (fs.existsSync(rewrittenDir)) {
+            fs.rmSync(rewrittenDir, { recursive: true, force: true });
+        }
+
+        // Remove any generated .bunext artifacts from the fixture
+        const dotBunext = path.join(fixtureDir, ".bunext");
         if (fs.existsSync(dotBunext)) {
             fs.rmSync(dotBunext, { recursive: true, force: true });
         }
-        const pubBunext = path.resolve(__dirname, "../__fixtures__/app/public/__bunext");
-        if (fs.existsSync(pubBunext)) {
-            fs.rmSync(pubBunext, { recursive: true, force: true });
-        }
     });
 
     test("boots up the server and correctly routes to index.tsx page", async () => {
-        // Mock to randomize port
-        // Note: Bun test runs modules in isolation but startServer imports grab-app-port
-        // If we can't easily mock we can set PORT env
-        process.env.PORT = "0"; // Let Bun.serve pick port
-        
-        await bunextInit();
         server = await startServer();
         expect(server).toBeDefined();
-        
-        // Fetch the index page
+        expect(server.port).toBeGreaterThan(0);
+
         const response = await fetch(`http://localhost:${server.port}/`);
         expect(response.status).toBe(200);
-        
+
         const html = await response.text();
         expect(html).toContain("Hello E2E");
     });
@@ -57,7 +99,7 @@ describe("E2E Integration", () => {
         const response = await fetch(`http://localhost:${server.port}/unknown-foo-bar123`);
         expect(response.status).toBe(404);
         const text = await response.text();
-        // Assume default 404 preset component is rendered
+        // Default 404 component is rendered
         expect(text).toContain("404");
     });
 });
diff --git a/src/__tests__/functions/server/handle-hmr.test.ts b/src/__tests__/functions/server/handle-hmr.test.ts
index a2ec590..9026b37 100644
--- a/src/__tests__/functions/server/handle-hmr.test.ts
+++ b/src/__tests__/functions/server/handle-hmr.test.ts
@@ -10,9 +10,9 @@ describe("handle-hmr", () => {
             }
         } as any;
         global.HMR_CONTROLLERS = [];
-        global.BUNDLER_CTX_MAP = [
-            { local_path: "/test-file" } as any
-        ];
+        global.BUNDLER_CTX_MAP = {
+            "/test-file": { local_path: "/test-file" } as any,
+        };
     });
 
     afterEach(() => {
diff --git a/src/__tests__/functions/server/handle-routes.test.ts b/src/__tests__/functions/server/handle-routes.test.ts
index c813c23..e76af50 100644
--- a/src/__tests__/functions/server/handle-routes.test.ts
+++ b/src/__tests__/functions/server/handle-routes.test.ts
@@ -40,11 +40,11 @@ describe("handle-routes", () => {
         mock.restore();
     });
 
-    test("returns 401 for unknown route", async () => {
+    test("returns 404 for unknown route", async () => {
         const req = new Request("http://localhost/api/unknown");
         const res = await handleRoutes({ req });
-        
-        expect(res.status).toBe(401);
+
+        expect(res.status).toBe(404);
         const json = await res.json();
         expect(json.success).toBe(false);
         expect(json.msg).toContain("not found");
diff --git a/src/__tests__/utils/grab-dir-names.test.ts b/src/__tests__/utils/grab-dir-names.test.ts
index 2e18387..3e48e4d 100644
--- a/src/__tests__/utils/grab-dir-names.test.ts
+++ b/src/__tests__/utils/grab-dir-names.test.ts
@@ -14,17 +14,17 @@ describe("grabDirNames", () => {
         expect(dirs.PUBLIC_DIR).toBe(path.join(cwd, "public"));
     });
 
-    it("nests HYDRATION_DST_DIR under public/__bunext/pages", () => {
+    it("nests HYDRATION_DST_DIR under .bunext/public/pages", () => {
         const dirs = grabDirNames();
         expect(dirs.HYDRATION_DST_DIR).toBe(
-            path.join(dirs.PUBLIC_DIR, "__bunext", "pages"),
+            path.join(dirs.BUNX_CWD_DIR, "public", "pages"),
         );
     });
 
-    it("nests BUNEXT_CACHE_DIR under public/__bunext/cache", () => {
+    it("nests BUNEXT_CACHE_DIR under .bunext/public/cache", () => {
         const dirs = grabDirNames();
         expect(dirs.BUNEXT_CACHE_DIR).toBe(
-            path.join(dirs.PUBLIC_DIR, "__bunext", "cache"),
+            path.join(dirs.BUNX_CWD_DIR, "public", "cache"),
         );
     });
 
diff --git a/src/functions/bundler/all-pages-bun-bundler.ts b/src/functions/bundler/all-pages-bun-bundler.ts
index 3078b18..3725b67 100644
--- a/src/functions/bundler/all-pages-bun-bundler.ts
+++ b/src/functions/bundler/all-pages-bun-bundler.ts
@@ -71,6 +71,7 @@ export default async function allPagesBunBundler(params?: Params) {
             chunk: "chunks/[hash].[ext]",
         },
         plugins: [tailwindcss],
+        // plugins: [tailwindcss, BunSkipNonBrowserPlugin],
         splitting: true,
         target,
         metafile: true,
diff --git a/src/functions/bundler/plugins/bun-skip-browser-plugin.ts b/src/functions/bundler/plugins/bun-skip-browser-plugin.ts
new file mode 100644
index 0000000..23db2e7
--- /dev/null
+++ b/src/functions/bundler/plugins/bun-skip-browser-plugin.ts
@@ -0,0 +1,35 @@
+const BunSkipNonBrowserPlugin: Bun.BunPlugin = {
+    name: "skip-non-browser",
+    setup(build) {
+        build.onResolve({ filter: /^(bun:|node:)/ }, (args) => {
+            return { path: args.path, external: true };
+        });
+
+        build.onResolve({ filter: /^[^./]/ }, (args) => {
+            // If it's a built-in like 'fs' or 'path', skip it immediately
+            const excludes = [
+                "fs",
+                "path",
+                "os",
+                "crypto",
+                "net",
+                "events",
+                "util",
+            ];
+
+            if (excludes.includes(args.path) || args.path.startsWith("node:")) {
+                return { path: args.path, external: true };
+            }
+
+            try {
+                Bun.resolveSync(args.path, args.importer || process.cwd());
+                return null;
+            } catch (e) {
+                console.warn(`[Skip] Mark as external: ${args.path}`);
+                return { path: args.path, external: true };
+            }
+        });
+    },
+};
+
+export default BunSkipNonBrowserPlugin;
diff --git a/src/functions/init.ts b/src/functions/init.ts
index 6cb51f4..6a18c36 100644
--- a/src/functions/init.ts
+++ b/src/functions/init.ts
@@ -3,6 +3,7 @@ import grabDirNames from "../utils/grab-dir-names";
 import path from "path";
 import grabConfig from "./grab-config";
 import type { BunextConfig } from "../types";
+import { log } from "../utils/log";
 
 export default async function () {
     const dirNames = grabDirNames();
@@ -29,7 +30,13 @@ export default async function () {
             "react-dom",
         );
 
-        if (dirNames.BUNX_ROOT_DIR !== dirNames.ROOT_DIR) {
+        if (
+            dirNames.ROOT_DIR.startsWith(dirNames.BUNX_ROOT_DIR) &&
+            !dirNames.ROOT_DIR.includes(`${dirNames.BUNX_ROOT_DIR}/test/`)
+        ) {
+            log.error(`Can't Run From this Directory => ${dirNames.ROOT_DIR}`);
+            process.exit(1);
+        } else {
             rmSync(react_package_dir, { recursive: true });
             rmSync(react_dom_package_dir, { recursive: true });
         }