diff --git a/packages/webui/.gitignore b/packages/webui/.gitignore
new file mode 100644
index 0000000..36cd0db
--- /dev/null
+++ b/packages/webui/.gitignore
@@ -0,0 +1,13 @@
+.DS_Store
+/node_modules/
+*.tsbuildinfo
+
+# React Router
+/.react-router/
+/build/
+
+# Cloudflare
+.mf
+.wrangler
+.dev.vars*
+
diff --git a/packages/webui/README.md b/packages/webui/README.md
new file mode 100644
index 0000000..e83f9fc
--- /dev/null
+++ b/packages/webui/README.md
@@ -0,0 +1,79 @@
+# Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications using React Router.
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Previewing the Production Build
+
+Preview the production build locally:
+
+```bash
+npm run preview
+```
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+Deployment is done using the Wrangler CLI.
+
+To build and deploy directly to production:
+
+```sh
+npm run deploy
+```
+
+To deploy a preview URL:
+
+```sh
+npx wrangler versions upload
+```
+
+You can then promote a version to production after verification or roll it out progressively.
+
+```sh
+npx wrangler versions deploy
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
+
+Built with ❤️ using React Router.
diff --git a/packages/webui/package.json b/packages/webui/package.json
new file mode 100644
index 0000000..b7f06b6
--- /dev/null
+++ b/packages/webui/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "iris-webui",
+  "private": true,
+  "license": "UNLICENSED",
+  "author": "jottocraft",
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "clean": "rimraf .cache build",
+    "deploy": "wrangler deploy",
+    "start": "react-router dev",
+    "validate": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@jottocraft/iris-sdk": "workspace:*",
+    "iris-plugins": "workspace:*"
+  }
+}
diff --git a/packages/webui/public/webui/assets/favicon.png b/packages/webui/public/webui/assets/favicon.png
new file mode 100644
index 0000000..6e313fa
--- /dev/null
+++ b/packages/webui/public/webui/assets/favicon.png
Binary files differ
diff --git a/packages/webui/react-router.config.ts b/packages/webui/react-router.config.ts
new file mode 100644
index 0000000..6560dae
--- /dev/null
+++ b/packages/webui/react-router.config.ts
@@ -0,0 +1,12 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import type { Config } from "@react-router/dev/config";
+
+export default {
+    appDirectory: "src/app",
+    buildDirectory: "build",
+    basename: "/webui",
+    ssr: false,
+    prerender: false
+} satisfies Config;
\ No newline at end of file
diff --git a/packages/webui/src/app/app.css b/packages/webui/src/app/app.css
new file mode 100644
index 0000000..f5f776b
--- /dev/null
+++ b/packages/webui/src/app/app.css
@@ -0,0 +1,11 @@
+@import "tailwindcss";
+@config "../../tailwind.config.js";
+@source "../../../../node_modules/@ffxp/react-dom/lib";
+
+body, html {
+    height: 100%;
+}
+
+button,[role=button] {
+    cursor: pointer
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/entry.server.tsx b/packages/webui/src/app/entry.server.tsx
new file mode 100644
index 0000000..2a56409
--- /dev/null
+++ b/packages/webui/src/app/entry.server.tsx
@@ -0,0 +1,77 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+// DO NOT MODIFY THIS FILE
+// This file is auto-generated by `react-router reveal`
+// It's only here because `react-router` has trouble figuring out that it should use the `@react-router/node` runtime
+
+import { PassThrough } from "node:stream";
+
+import type { AppLoadContext, EntryContext } from "react-router";
+import { createReadableStreamFromReadable } from "@react-router/node";
+import { ServerRouter } from "react-router";
+import { isbot } from "isbot";
+import type { RenderToPipeableStreamOptions } from "react-dom/server";
+import { renderToPipeableStream } from "react-dom/server";
+
+export const streamTimeout = 5_000;
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  loadContext: AppLoadContext
+  // If you have middleware enabled:
+  // loadContext: unstable_RouterContextProvider
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    let userAgent = request.headers.get("user-agent");
+
+    // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+    // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+    let readyOption: keyof RenderToPipeableStreamOptions =
+      (userAgent && isbot(userAgent)) || routerContext.isSpaMode
+        ? "onAllReady"
+        : "onShellReady";
+
+    const { pipe, abort } = renderToPipeableStream(
+      <ServerRouter context={routerContext} url={request.url} />,
+      {
+        [readyOption]() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      }
+    );
+
+    // Abort the rendering stream after the `streamTimeout` so it has time to
+    // flush down the rejected boundaries
+    setTimeout(abort, streamTimeout + 1000);
+  });
+}
diff --git a/packages/webui/src/app/root.tsx b/packages/webui/src/app/root.tsx
new file mode 100644
index 0000000..abab211
--- /dev/null
+++ b/packages/webui/src/app/root.tsx
@@ -0,0 +1,64 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import { BodyWrapper, Container, HeadWrapper, HTMLWrapper, Link, Root, ThemeEngine } from "@ffxp/react-dom";
+import {
+    isRouteErrorResponse,
+    Links,
+    Outlet,
+    Scripts,
+    ScrollRestoration,
+    useLoaderData,
+    type LoaderFunction,
+} from "react-router";
+
+import "~/app/app.css";
+
+export default function App() {
+    return (
+        <Root>
+            <ThemeEngine plugins={[
+                {
+                    id: "jottocraft-brand",
+                    config: {
+                        styles: {
+                            defaultFonts: {
+                                googleFonts: ["Public+Sans:wght@100..900"],
+                                sans: ["Public Sans", "sans-serif"]
+                            }
+                        },
+                        colors: {
+                            light: {
+                                vibrant: ["#5787c7", "#818de9"],
+                                onVibrant: "#ffffff",
+                                accent: "#31408c",
+                                link: "#2f6298"
+                            },
+                            dark: {
+                                vibrant: ["#80aaff", "#354ab6"],
+                                onVibrant: "#000000",
+                                accent: "#80aaff",
+                                link: "#80c1ff"
+                            }
+                        }
+                    }
+                }
+            ]}>
+                <HTMLWrapper lang="en">
+                    <HeadWrapper>
+                        <meta charSet="utf-8" />
+                        <meta name="viewport" content="width=device-width, initial-scale=1" />
+                        <title>Iris</title>
+                        <link rel="icon" href="/webui/assets/favicon.png" />
+                        <Links />
+                    </HeadWrapper>
+                    <BodyWrapper>
+                        <Outlet />
+                        <ScrollRestoration />
+                        <Scripts />
+                    </BodyWrapper>
+                </HTMLWrapper>
+            </ThemeEngine>
+        </Root>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/routes.ts b/packages/webui/src/app/routes.ts
new file mode 100644
index 0000000..cbd48f7
--- /dev/null
+++ b/packages/webui/src/app/routes.ts
@@ -0,0 +1,13 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import { type RouteConfig } from "@react-router/dev/routes";
+import { remixRoutesOptionAdapter } from "@react-router/remix-routes-option-adapter";
+import { createRoutesFromFolders } from "@remix-run/v1-route-convention";
+
+export default remixRoutesOptionAdapter((defineRoutes) => {
+    return createRoutesFromFolders(defineRoutes, {
+        appDirectory: "src/app",
+        routesDirectory: "routes"
+    });
+}) satisfies RouteConfig;
\ No newline at end of file
diff --git a/packages/webui/src/app/routes/index.tsx b/packages/webui/src/app/routes/index.tsx
new file mode 100644
index 0000000..89f6ddd
--- /dev/null
+++ b/packages/webui/src/app/routes/index.tsx
@@ -0,0 +1,10 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+export default function Home() {
+    return (
+        <div>
+            <p>Hello world!</p>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/webui.d.ts b/packages/webui/src/webui.d.ts
new file mode 100644
index 0000000..dc05a7e
--- /dev/null
+++ b/packages/webui/src/webui.d.ts
@@ -0,0 +1,2 @@
+// Iris
+// Copyright (c) jottocraft 2025
\ No newline at end of file
diff --git a/packages/webui/tailwind.config.js b/packages/webui/tailwind.config.js
new file mode 100644
index 0000000..6c2f0ff
--- /dev/null
+++ b/packages/webui/tailwind.config.js
@@ -0,0 +1,16 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import ffxpTailwindPreset from "@ffxp/tailwind";
+import path from "path";
+
+export default {
+    content: [
+        "./src/app/**/*.{js,ts,jsx,tsx}",
+        path.join(path.dirname(require.resolve("@ffxp/react-dom/lib")), "components/**/*.js")
+    ],
+    theme: {
+        extend: {}
+    },
+    presets: [ffxpTailwindPreset()]
+};
\ No newline at end of file
diff --git a/packages/webui/tsconfig.json b/packages/webui/tsconfig.json
new file mode 100644
index 0000000..f424c4a
--- /dev/null
+++ b/packages/webui/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "include": [
+    "**/*"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": ["."],
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
\ No newline at end of file
diff --git a/packages/webui/vite.config.ts b/packages/webui/vite.config.ts
new file mode 100644
index 0000000..d723444
--- /dev/null
+++ b/packages/webui/vite.config.ts
@@ -0,0 +1,23 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+    resolve: {
+        preserveSymlinks: true
+    },
+    server: {
+        host: "127.0.0.1",
+        port: 2510,
+        strictPort: true
+    },
+    plugins: [
+        tailwindcss(),
+        reactRouter(),
+        tsconfigPaths()
+    ]
+});
\ No newline at end of file
diff --git a/packages/webui/wrangler.toml b/packages/webui/wrangler.toml
new file mode 100644
index 0000000..2152413
--- /dev/null
+++ b/packages/webui/wrangler.toml
@@ -0,0 +1,6 @@
+name = "iris-webui"
+main = "src/worker/index.ts"
+compatibility_date = "2025-07-12"
+
+account_id = "17174d3fc7098a664b04fb3c4c4ec65c"
+workers_dev = false
\ No newline at end of file