diff --git a/packages/webui/.gitignore b/packages/webui/.gitignore
index 36cd0db..7bd7f37 100644
--- a/packages/webui/.gitignore
+++ b/packages/webui/.gitignore
@@ -11,3 +11,4 @@
 .wrangler
 .dev.vars*
 
+src/IRIS_SITE.ts
\ No newline at end of file
diff --git a/packages/webui/package.json b/packages/webui/package.json
index b7f06b6..74f6b9e 100644
--- a/packages/webui/package.json
+++ b/packages/webui/package.json
@@ -13,7 +13,6 @@
     "validate": "tsc --noEmit"
   },
   "dependencies": {
-    "@jottocraft/iris-sdk": "workspace:*",
-    "iris-plugins": "workspace:*"
+    "@jottocraft/iris-sdk": "workspace:*"
   }
 }
diff --git a/packages/webui/src/app/components/Form/Field.tsx b/packages/webui/src/app/components/Form/Field.tsx
new file mode 100644
index 0000000..122654c
--- /dev/null
+++ b/packages/webui/src/app/components/Form/Field.tsx
@@ -0,0 +1,162 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import { Button, Dropdown, DropdownItem, Icon, Switch, TextInput } from "@ffxp/react-dom";
+import type { IrisPluginConduitField } from "@jottocraft/iris-sdk";
+
+export function createDefaultFieldData(spec: IrisPluginConduitField, refData?: any, forceRequired?: boolean) {
+    if (spec.optional && !forceRequired) return undefined;
+
+    if (spec.type === "string") {
+        return refData ?? "";
+    } else if (spec.type === "number") {
+        return refData ?? 0;
+    } else if (spec.type === "date") {
+        return refData ?? new Date().toISOString().split("T")[0];
+    } else if (spec.type === "datetime") {
+        return refData ?? new Date().toISOString();
+    } else if (spec.type === "boolean") {
+        return refData ?? false;
+    } else if (spec.type === "dropdown") {
+        return refData ?? spec.options[0].value;
+    } else if (spec.type === "array") {
+        return refData ? refData.map((refItem: any) => createDefaultFieldData(spec.of, refItem)) : [];
+    } else if (spec.type === "object") {
+        const defaultData: any = {};
+        for (const key in spec.struct) {
+            defaultData[key] = createDefaultFieldData(spec.struct[key], refData ? refData[key] : undefined);
+        }
+        return defaultData;
+    }
+}
+
+export default function Field({ path, data, refData, spec, patchFormData, controls }: { path: string; data: any; refData: any; spec: IrisPluginConduitField; patchFormData: (path: string, value: unknown) => void; controls?: React.ReactNode; }) {
+    let fieldInput: React.ReactNode = null;
+
+    if ((refData !== undefined) && (spec.type !== "object")) return null;
+
+    if (data === undefined) {
+        fieldInput = (
+            <Button onClick={() => patchFormData(path, createDefaultFieldData(spec, undefined, true))} iconLeading="add">Set value</Button>
+        );
+    } else if ((spec.type === "string") || (spec.type === "number") || (spec.type === "date") || (spec.type === "datetime")) {
+        fieldInput = (
+            <TextInput
+                onChange={e => {
+                    if (spec.type === "string") {
+                        patchFormData(path, e.target.value);
+                    } else if (spec.type === "number") {
+                        patchFormData(path, Number(e.target.value));
+                    } else if (spec.type === "date") {
+                        patchFormData(path, e.target.value);
+                    } else if (spec.type === "datetime") {
+                        patchFormData(path, e.target.value + "Z");
+                    }
+                }}
+                value={spec.type === "datetime" ? new Date(data).toISOString().split(":").slice(0, -1).join(":") : data}
+                type={spec.type === "string" ? (
+                    "text"
+                ) : spec.type === "number" ? (
+                    "number"
+                ) : spec.type === "date" ? (
+                    "date"
+                ) : spec.type === "datetime" ? (
+                    "datetime-local"
+                ) : undefined}
+            />
+        );
+    } else if (spec.type === "boolean") {
+        fieldInput = (
+            <Switch onClick={() => patchFormData(path, !data)} active={data} />
+        );
+    } else if (spec.type === "dropdown") {
+        const selectedOption = spec.options.find(option => option.value === data)!;
+        fieldInput = (
+            <Dropdown menu={(
+                <>
+                    {spec.options.map(option => (
+                        <DropdownItem onClick={() => patchFormData(path, option.value)} icon={option.icon}>{option.label}</DropdownItem>
+                    ))}
+                </>
+            )}>
+                <Button variant="outline" iconLeading={selectedOption.icon} iconTrailing="arrow_drop_down">{selectedOption.label}</Button>
+            </Dropdown>
+        );
+    } else if (spec.type === "array") {
+        fieldInput = (
+            <div className="space-y-6 border border-ui-20 p-4 roundness-xl">
+                {data.map((value: any, i: number) => {
+                    return (
+                        <Field controls={(
+                            <div className="space-x-2">
+                                <Button onClick={() => {
+                                    if (i === 0) return;
+                                    const newValue = [...data];
+                                    newValue.splice(i, 1);
+                                    newValue.splice(i - 1, 0, value);
+                                    patchFormData(path, newValue);
+                                }} iconLeading="arrow_upward" size="small" />
+                                <Button onClick={() => {
+                                    if (i === (data.length - 1)) return;
+                                    const newValue = [...data];
+                                    newValue.splice(i, 1);
+                                    newValue.splice(i + 1, 0, value);
+                                    patchFormData(path, newValue);
+                                }} iconLeading="arrow_downward" size="small" />
+                                <Button onClick={() => {
+                                    const newValue = [...data];
+                                    newValue.splice(i, 1);
+                                    patchFormData(path, newValue);
+                                }} iconLeading="delete" size="small" />
+                            </div>
+                        )} path={`${path}[${i}]`} data={value} refData={refData !== undefined ? refData[i] : undefined} spec={spec.of} patchFormData={patchFormData} />
+                    );
+                })}
+                <Button iconLeading="add" onClick={() => patchFormData(path, [...data, createDefaultFieldData(spec.of)])}>Add item</Button>
+            </div>
+        );
+    } else if (spec.type === "object") {
+        fieldInput = (
+            <div className="space-y-6 border border-ui-20 p-4 roundness-xl">
+                {Object.keys(spec.struct).map(key => {
+                    return (
+                        <Field path={`${path}.${key}`} data={data[key]} refData={refData !== undefined ? refData[key] : undefined} spec={spec.struct[key]} patchFormData={patchFormData} />
+                    );
+                })}
+            </div>
+        );
+    } else {
+        fieldInput = (
+            <div>
+                <p>Unrecognized field type {spec.type}</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-2">
+            {spec.icon || spec.displayName || spec.optional || controls ? (
+                <div className="flex flex-row items-center justify-between">
+                    <div className="flex flex-row items-center space-x-2">
+                        {spec.icon ? <Icon className="text-lg">{spec.icon}</Icon> : null}
+                        {spec.displayName ? <div>{spec.displayName}</div> : null}
+                    </div>
+                    <div className="flex flex-row items-center space-x-8">
+                        {spec.optional && (data !== undefined) ? (
+                            <Button onClick={() => patchFormData(path, undefined)} iconLeading="delete" size="small">Clear value</Button>
+                        ) : spec.optional ? (
+                            <div className="text-xs px-2 py-1 bg-ui-10 roundness">
+                                Optional
+                            </div>
+                        ) : null}
+                        {controls}
+                    </div>
+                </div>
+            ) : null}
+            {fieldInput}
+            {spec.helpText ? (
+                <div className="text-type-30 text-xs">{spec.helpText}</div>
+            ) : null}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/components/Form/index.tsx b/packages/webui/src/app/components/Form/index.tsx
new file mode 100644
index 0000000..b323de0
--- /dev/null
+++ b/packages/webui/src/app/components/Form/index.tsx
@@ -0,0 +1,81 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import type { IrisPluginConduitField } from "@jottocraft/iris-sdk";
+import { Button, Icon } from "@ffxp/react-dom";
+import { useCallback, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import set from "lodash/set";
+import clone from "lodash/clone";
+
+import Field, { createDefaultFieldData } from "~/app/components/Form/Field";
+import { usePanelNavigation } from "~/app/data/panels";
+import { usePlugins } from "~/app/data/root";
+import { YggdrasilStatus } from "@jottocraft/yggdrasil";
+
+export default function Form({ ref, onFinished }: { ref: IrisWebuiFormRef; onFinished: () => void; }) {
+    const plugins = usePlugins()!;
+    const panelNavigation = usePanelNavigation() as IrisWebuiPanelNavigationCtxActive;
+    const form = plugins[panelNavigation.pluginId].plugin.forms[ref.id];
+
+    const defaultData = useMemo(() => form.data ? createDefaultFieldData(form.data, ref.data) : undefined, [form, ref]);
+
+    const [formData, setFormData] = useState<{ data: unknown; }>({
+        data: clone(defaultData)
+    });
+
+    const patchFormData = useCallback((path: string, value: unknown) => {
+        set(formData, path, value);
+
+        setFormData({
+            data: formData.data
+        });
+    }, [formData]);
+
+    const [formResult, setFormResult] = useState<YggdrasilStatus<unknown> | string | null>(null);
+    const submitForm = useCallback(() => {
+        (async () => {
+            try {
+                const data = await plugins[panelNavigation.pluginId].client().forms[ref.id](formData.data as any);
+                setFormResult(data);
+            } catch(e) {
+                if (!(e instanceof YggdrasilStatus)) throw e;
+                setFormResult(e);
+            }
+        })();
+    }, [panelNavigation, ref, formData]);
+
+    return createPortal((
+        <div className="w-full h-full py-10 absolute top-0 left-0 z-99 bg-black/90 flex items-center justify-center">
+            <div className="max-h-full overflow-auto w-2xl bg-ui-0 p-4 roundness-xl shadow-xl space-y-8">
+                <div className="flex flex-row items-center justify-between">
+                    <div className="flex flex-row items-center text-xl space-x-2 font-medium">
+                        {form.icon ? <Icon className="text-2xl">{form.icon}</Icon> : null}
+                        <h1>{form.displayName}</h1>
+                    </div>
+                    <div>
+                        <Button variant="borderless" onClick={() => onFinished()} iconLeading="close" size="small" />
+                    </div>
+                </div>
+                {formResult ? (
+                    <div>
+                        <p>{formResult instanceof YggdrasilStatus ? formResult.statusCode : formResult}</p>
+                    </div>
+                ) : (
+                    <>
+                        <div>
+                            {form.data ? (
+                                <Field path="data" data={formData.data} refData={ref.data} spec={form.data} patchFormData={patchFormData} />
+                            ) : (
+                                <p>This form doesn't take any input.</p>
+                            )}
+                        </div>
+                        <div>
+                            <Button onClick={submitForm} variant="primary">Submit</Button>
+                        </div>
+                    </>
+                )}
+            </div >
+        </div >
+    ), document.body);
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/components/Panel/index.tsx b/packages/webui/src/app/components/Panel/index.tsx
new file mode 100644
index 0000000..bafc717
--- /dev/null
+++ b/packages/webui/src/app/components/Panel/index.tsx
@@ -0,0 +1,82 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import { Button, Icon } from "@ffxp/react-dom";
+import type { IrisPluginConduit, IrisPluginConduitPanelArgs, IrisPluginConduitPanelLayout } from "@jottocraft/iris-sdk";
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router";
+
+import { usePlugins } from "~/app/data/root";
+import PanelSection from "~/app/components/PanelSection";
+import { usePanelNavigation } from "~/app/data/panels";
+import Form from "~/app/components/Form";
+
+export default function Panel() {
+    const panelNavigation = usePanelNavigation()!;
+    const plugins = usePlugins()!;
+    const [activeForm, setActiveForm] = useState<IrisWebuiFormRef | null>(null);
+
+    if (!panelNavigation.activeRef) {
+        return (
+            <p>Please select a panel to open from the sidebar.</p>
+        );
+    }
+
+    if (!panelNavigation.layout) {
+        return (
+            <p>Loading panel {panelNavigation.activeRef.id}...</p>
+        );
+    }
+
+    const plugin = plugins[panelNavigation.pluginId];
+    const layout = panelNavigation.layout;
+
+    return (
+        <>
+            {activeForm ? (
+                <Form ref={activeForm} onFinished={() => setActiveForm(null)} />
+            ) : null}
+            <div className="space-y-8">
+                <div className="flex flex-row items-center space-x-3 text-4xl font-semibold">
+                    {layout.icon ? <Icon>{layout.icon}</Icon> : null}
+                    <h1>{layout.displayName}</h1>
+                </div>
+                {layout.forms ? (
+                    <div>
+                        {layout.forms?.map((ref) => {
+                            const form = plugin.plugin.forms[ref.id];
+
+                            return (
+                                <div className="inline-block m-1">
+                                    <Button onClick={() => setActiveForm(ref)} iconLeading={form.icon}>{form.displayName}</Button>
+                                </div>
+                            );
+                        })}
+                    </div>
+                ) : null}
+                {layout.main ? (
+                    <div>
+                        {layout.main.map(item => (
+                            <div className="inline-block space-y-2 m-1 p-4 bg-ui-5 roundness-xl">
+                                <div className="flex flex-row items-center space-x-2 text-xl font-medium">
+                                    {item.icon ? <Icon>{item.icon}</Icon> : null}
+                                    <div>{item.displayName}</div>
+                                </div>
+                                <div>
+                                    <div>{item.value}</div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                ) : null}
+                {layout.sections ? (
+                    <div>
+                        {layout.sections.map(section => (
+                            <PanelSection section={section} />
+                        ))}
+                    </div>
+                ) : null}
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/components/PanelBreadcrumbs.tsx b/packages/webui/src/app/components/PanelBreadcrumbs.tsx
new file mode 100644
index 0000000..1e824a2
--- /dev/null
+++ b/packages/webui/src/app/components/PanelBreadcrumbs.tsx
@@ -0,0 +1,38 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import { Button, Icon, Link } from "@ffxp/react-dom";
+import { Link as RouterLink } from "react-router";
+import { panelRefHref, usePanelNavigation } from "~/app/data/panels";
+
+export default function PanelBreadcrumbs() {
+    const panelNavigation = usePanelNavigation()!;
+
+    if (!panelNavigation.activeRef) return;
+
+    return (
+        <div className="flex-grow flex flex-row items-center border-ui-20 border-2 roundness-lg p-1">
+            <div className="mr-4 space-x-1">
+                <Button onClick={() => panelNavigation.back()} iconLeading="arrow_back" size="small" />
+                <Button onClick={() => panelNavigation.refreshLayout()} iconLeading="refresh" size="small" />
+            </div>
+            {panelNavigation.breadcrumbs.map((breadcrumb, i) => (
+                <div className="flex flex-row items-center space-x-1 text-sm text-type-20">
+                    {breadcrumb.icon ? <Icon className="text-base">{breadcrumb.icon}</Icon> : null}
+                    <div>
+                        <RouterLink to={panelRefHref(panelNavigation.pluginId, breadcrumb.ref)} onClick={(e) => panelNavigation.goToBreadcrumb(i, e)}>
+                            <Link>{breadcrumb.displayName}</Link>
+                        </RouterLink>
+                    </div>
+                    <Icon className="text-xl mx-1">keyboard_arrow_right</Icon>
+                </div>
+            ))}
+            {panelNavigation.layout ? (
+                <div className="flex flex-row items-center space-x-1 text-base text-type-0 mr-2">
+                    {panelNavigation.layout.icon ? <Icon className="text-lg">{panelNavigation.layout.icon}</Icon> : null}
+                    <div className="font-medium">{panelNavigation.layout.displayName}</div>
+                </div>
+            ) : null}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/components/PanelNavigator.tsx b/packages/webui/src/app/components/PanelNavigator.tsx
new file mode 100644
index 0000000..16bcb25
--- /dev/null
+++ b/packages/webui/src/app/components/PanelNavigator.tsx
@@ -0,0 +1,94 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import type { IrisPluginConduit, IrisPluginConduitPanelLayout } from "@jottocraft/iris-sdk";
+import { useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+
+import { panelNavigationCtx, panelRefHref } from "~/app/data/panels";
+import { usePlugins } from "~/app/data/root";
+
+export default function PanelNavigator({ children }: { children?: React.ReactNode; }) {
+    const routerNavigate = useNavigate();
+    const plugins = usePlugins()!;
+
+    const [pluginId, setPluginId] = useState<string | null>(null);
+    const [activeRef, setActiveRef] = useState<IrisWebuiPanelRef | null>(null);
+    const [layout, setLayout] = useState<IrisPluginConduitPanelLayout<IrisPluginConduit> | null>(null);
+    const [breadcrumbs, setBreadcrumbs] = useState<IrisWebuiPanelBreadcrumb[]>([]);
+
+    useEffect(() => {
+        if (!activeRef) return;
+        routerNavigate(panelRefHref(pluginId!, activeRef));
+    }, [pluginId, activeRef, routerNavigate]);
+
+    const fetchLayout = useCallback(() => {
+        (async () => {
+            const data = await plugins[pluginId!].client().panels[activeRef!.id]((activeRef!.args ?? {}) as { [key: string]: string; });
+            setLayout(data);
+        })();
+    }, [plugins, pluginId, activeRef]);
+
+    useEffect(() => {
+        if (!activeRef) return;
+
+        fetchLayout();
+    }, [activeRef, fetchLayout]);
+
+    const navigate = useCallback((ref: IrisWebuiPanelRef, e?: React.MouseEvent) => {
+        e?.preventDefault();
+
+        setBreadcrumbs([...breadcrumbs, {
+            displayName: layout?.displayName ?? activeRef!.id,
+            icon: layout?.icon ?? undefined,
+            ref: activeRef!
+        }]);
+        setActiveRef(ref);
+    }, [activeRef, layout, breadcrumbs]);
+
+    const back = useCallback((e?: React.MouseEvent) => {
+        e?.preventDefault();
+        if (!breadcrumbs.length) return;
+
+        setActiveRef(breadcrumbs[breadcrumbs.length - 1].ref);
+        setBreadcrumbs(breadcrumbs.slice(0, -1));
+    }, [breadcrumbs]);
+
+    const goToBreadcrumb = useCallback((index: number, e?: React.MouseEvent) => {
+        e?.preventDefault();
+        if (!breadcrumbs.length) return;
+
+        setActiveRef(breadcrumbs[index].ref);
+        setBreadcrumbs(breadcrumbs.slice(0, index));
+    }, [breadcrumbs]);
+
+    const startNavigation = useCallback((pluginId: string, ref: IrisWebuiPanelRef, e?: React.MouseEvent) => {
+        setPluginId(pluginId);
+        setActiveRef(ref);
+        setBreadcrumbs([]);
+    }, []);
+
+    const refreshLayout = useCallback(() => {
+        setLayout(null);
+        fetchLayout();
+    }, [fetchLayout]);
+
+    return (
+        <panelNavigationCtx.Provider value={activeRef ? {
+            activeRef,
+            layout,
+            pluginId: pluginId!,
+            breadcrumbs,
+            navigate,
+            back,
+            goToBreadcrumb,
+            startNavigation,
+            refreshLayout
+        } : {
+            activeRef,
+            startNavigation
+        }}>
+            {children}
+        </panelNavigationCtx.Provider>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/components/PanelSection/PanelSectionProperties.tsx b/packages/webui/src/app/components/PanelSection/PanelSectionProperties.tsx
new file mode 100644
index 0000000..1668d1c
--- /dev/null
+++ b/packages/webui/src/app/components/PanelSection/PanelSectionProperties.tsx
@@ -0,0 +1,10 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import type { IrisPluginConduit, IrisPluginConduitPanelLayoutSectionProperties } from "@jottocraft/iris-sdk";
+
+export default function PanelSectionProperties({ section }: { section: IrisPluginConduitPanelLayoutSectionProperties<IrisPluginConduit>; }) {
+    return (
+        <p>TODO</p>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/components/PanelSection/PanelSectionRef.tsx b/packages/webui/src/app/components/PanelSection/PanelSectionRef.tsx
new file mode 100644
index 0000000..c889178
--- /dev/null
+++ b/packages/webui/src/app/components/PanelSection/PanelSectionRef.tsx
@@ -0,0 +1,10 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import type { IrisPluginConduit, IrisPluginConduitPanelLayoutSectionRef } from "@jottocraft/iris-sdk";
+
+export default function PanelSectionRef({ section }: { section: IrisPluginConduitPanelLayoutSectionRef<IrisPluginConduit>; }) {
+    return (
+        <p>TODO</p>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/components/PanelSection/PanelSectionTable.tsx b/packages/webui/src/app/components/PanelSection/PanelSectionTable.tsx
new file mode 100644
index 0000000..26229e4
--- /dev/null
+++ b/packages/webui/src/app/components/PanelSection/PanelSectionTable.tsx
@@ -0,0 +1,46 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import type { IrisPluginConduit, IrisPluginConduitPanelLayoutSectionTable } from "@jottocraft/iris-sdk";
+import { Link, useParams } from "react-router";
+
+import { panelRefHref, usePanelNavigation } from "~/app/data/panels";
+
+export default function PanelSectionTable({ section }: { section: IrisPluginConduitPanelLayoutSectionTable<IrisPluginConduit>; }) {
+    const params = useParams();
+    const panelNavigation = usePanelNavigation() as IrisWebuiPanelNavigationCtxActive;
+
+    return (
+        <div>
+            <table>
+                <thead>
+                    <tr>
+                        {section.columns.map(column => (
+                            <th>
+                                {column.displayName}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {section.rows.map(row => (
+                        <tr>
+                            {section.columns.map(column => {
+                                const link = row.links?.[column.key];
+                                return (
+                                    <td>
+                                        {link ? (
+                                            <Link to={panelRefHref(panelNavigation.pluginId, link)} onClick={(e) => panelNavigation.navigate(link, e)}>{row.vals[column.key] ?? null}</Link>
+                                        ) : (
+                                            row.vals[column.key] ?? null
+                                        )}
+                                    </td>
+                                );
+                            })}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/components/PanelSection/index.tsx b/packages/webui/src/app/components/PanelSection/index.tsx
new file mode 100644
index 0000000..af483f0
--- /dev/null
+++ b/packages/webui/src/app/components/PanelSection/index.tsx
@@ -0,0 +1,26 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import type { IrisPluginConduit, IrisPluginConduitPanelLayoutSection } from "@jottocraft/iris-sdk";
+
+import PanelSectionProperties from "~/app/components/PanelSection/PanelSectionProperties";
+import PanelSectionTable from "~/app/components/PanelSection/PanelSectionTable";
+import PanelSectionRef from "~/app/components/PanelSection/PanelSectionRef";
+
+export default function PanelSection({ section }: { section: IrisPluginConduitPanelLayoutSection<IrisPluginConduit>; }) {
+    if (section.type === "properties") {
+        return (
+            <PanelSectionProperties section={section} />
+        );
+    } else if (section.type === "table") {
+        return (
+            <PanelSectionTable section={section} />
+        );
+    } else if (section.type === "ref") {
+        return (
+            <PanelSectionRef section={section} />
+        );
+    } else {
+        throw new Error("Unrecognized panel layout section type " + (section as any).type);
+    }
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/components/Shell.tsx b/packages/webui/src/app/components/Shell.tsx
new file mode 100644
index 0000000..62267db
--- /dev/null
+++ b/packages/webui/src/app/components/Shell.tsx
@@ -0,0 +1,111 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import { Button, NavbarLayout, NavbarTitle, SidebarHeader, SidebarItem, SidebarItemGroup, SidebarItems, SidebarLayout, SidebarTitle, useThemeEngine } from "@ffxp/react-dom";
+import { useEffect } from "react";
+import { Link, Outlet, useLocation, useParams, useSearchParams } from "react-router";
+
+import IRIS_SITE from "~/IRIS_SITE";
+import { useAuth, usePlugins } from "~/app/data/root";
+import { isAtPanel, panelRefHref, usePanelNavigation } from "~/app/data/panels";
+import PanelNavigator from "~/app/components/PanelNavigator";
+import PanelBreadcrumbs from "~/app/components/PanelBreadcrumbs";
+
+function ShellLayout({ children }: { children?: React.ReactNode; }) {
+    const theme = useThemeEngine();
+    const plugins = usePlugins()!;
+    const auth = useAuth();
+    const panelNavigation = usePanelNavigation()!;
+    const routerParams = useParams();
+    const [searchParams] = useSearchParams();
+
+    useEffect(() => {
+        if (!panelNavigation.activeRef && (routerParams.pluginId && routerParams.panelId)) {
+            const args: { [key: string]: string } = {};
+            for (const [k, v] of searchParams.entries()) args[k] = v;
+
+            panelNavigation.startNavigation(routerParams.pluginId, {
+                id: routerParams.panelId,
+                args
+            });
+        }
+    }, [routerParams, searchParams, panelNavigation]);
+
+    return (
+        <NavbarLayout left={(
+            <div className="flex-grow flex flex-row items-center space-x-8">
+                <Link to="/">
+                    <NavbarTitle logo="/webui/assets/favicon.png">
+                        Iris
+                    </NavbarTitle>
+                </Link>
+                <PanelBreadcrumbs />
+            </div>
+        )}
+            right={(
+                <>
+                    <Button onClick={() => {
+                        if (window.confirm("Do you want to sign out?")) {
+                            window.localStorage.removeItem("jwt");
+                            window.location.reload();
+                        }
+                    }}>
+                        Signed in as {auth?.claims.email as string}
+                    </Button>
+                </>
+            )}>
+            <SidebarLayout sidebar={(
+                <>
+                    <SidebarHeader>
+                        {IRIS_SITE.brand.logo ? (
+                            <img className="w-full h-10 object-contain" src={theme.config.colors.dark ? IRIS_SITE.brand.logo.light : IRIS_SITE.brand.logo.dark} />
+                        ) : (
+                            <SidebarTitle>{IRIS_SITE.brand.name}</SidebarTitle>
+                        )}
+                    </SidebarHeader>
+                    <SidebarItems>
+                        {IRIS_SITE.plugins.map(({ id }) => {
+                            const plugin = plugins[id];
+                            return (
+                                <SidebarItemGroup title={plugin.plugin.displayName} icon={plugin.plugin.icon}>
+                                    {plugin.plugin.navigation.map(item => (
+                                        <Link to={panelRefHref(id, item.panel)} onClick={e => panelNavigation.startNavigation(id, item.panel, e)}>
+                                            <SidebarItem active={(panelNavigation.activeRef && (panelNavigation.pluginId === id)) ? isAtPanel(panelNavigation.breadcrumbs[0]?.ref ?? panelNavigation.activeRef, item.panel) : false} icon={item.icon}>{item.displayName}</SidebarItem>
+                                        </Link>
+                                    ))}
+                                </SidebarItemGroup>
+                            );
+                        })}
+                    </SidebarItems>
+                </>
+            )}>
+                {children}
+            </SidebarLayout>
+        </NavbarLayout>
+    );
+}
+
+export default function Shell({ children }: { children?: React.ReactNode; }) {
+    const location = useLocation();
+    const plugins = usePlugins();
+
+    if (location.pathname === "/login") {
+        return (
+            <Outlet />
+        );
+    }
+
+    if (!plugins) {
+        return (
+            <p>Loading plugins...</p>
+        );
+    }
+
+    return (
+        <PanelNavigator>
+            <ShellLayout>
+                {children}
+            </ShellLayout>
+        </PanelNavigator>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/data/panels.ts b/packages/webui/src/app/data/panels.ts
new file mode 100644
index 0000000..26e99f0
--- /dev/null
+++ b/packages/webui/src/app/data/panels.ts
@@ -0,0 +1,28 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import { createContext, useContext } from "react";
+import isEqual from "lodash/isEqual";
+
+export const panelNavigationCtx = createContext<IrisWebuiPanelNavigationCtx | null>(null);
+export function usePanelNavigation() {
+    return useContext(panelNavigationCtx);
+}
+
+export function panelRefHref(pluginId: string, ref: IrisWebuiPanelRef) {
+    let linkHref: string = `/p/${pluginId}/${ref.id}`;
+    if (ref.args) {
+        const linkParams = new URLSearchParams();
+        for (const arg in ref.args) {
+            if (ref.args[arg]) linkParams.set(arg, ref.args[arg]);
+        }
+        linkHref = linkHref + "?" + linkParams.toString();
+    }
+
+    return linkHref;
+}
+
+export function isAtPanel(activeRef: IrisWebuiPanelRef, desiredRef: IrisWebuiPanelRef) {
+    if (activeRef.id !== desiredRef.id) return false;
+    return isEqual(activeRef.args ?? {}, desiredRef.args ?? {});
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/data/root.ts b/packages/webui/src/app/data/root.ts
new file mode 100644
index 0000000..0697087
--- /dev/null
+++ b/packages/webui/src/app/data/root.ts
@@ -0,0 +1,15 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import type { IrisAuthCtx, IrisPluginCtx } from "@jottocraft/iris-sdk";
+import { createContext, useContext } from "react";
+
+export const pluginContext = createContext<IrisPluginCtx | null>(null);
+export function usePlugins() {
+    return useContext(pluginContext);
+}
+
+export const authContext = createContext<IrisAuthCtx | null>(null);
+export function useAuth() {
+    return useContext(authContext);
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/root.tsx b/packages/webui/src/app/root.tsx
index abab211..c96602f 100644
--- a/packages/webui/src/app/root.tsx
+++ b/packages/webui/src/app/root.tsx
@@ -2,6 +2,9 @@
 // Copyright (c) jottocraft 2025
 
 import { BodyWrapper, Container, HeadWrapper, HTMLWrapper, Link, Root, ThemeEngine } from "@ffxp/react-dom";
+import type { IrisAuthCtx, IrisPluginConduit, IrisPluginConduitConduitServerTypes, IrisPluginCtx } from "@jottocraft/iris-sdk";
+import { createConduitClientSideClient } from "@jottocraft/yggdrasil";
+import { useEffect, useState } from "react";
 import {
     isRouteErrorResponse,
     Links,
@@ -9,12 +12,88 @@
     Scripts,
     ScrollRestoration,
     useLoaderData,
+    useLocation,
     type LoaderFunction,
 } from "react-router";
 
 import "~/app/app.css";
+import Shell from "~/app/components/Shell";
+import { authContext, pluginContext } from "~/app/data/root";
+import IRIS_SITE from "~/IRIS_SITE";
 
 export default function App() {
+    const location = useLocation();
+
+    const [auth, setAuth] = useState<IrisAuthCtx | null>(null);
+    useEffect(() => {
+        if (location.pathname === "/login") {
+            return;
+        }
+
+        if (!auth) {
+            let jwt = window.localStorage.getItem("jwt");
+            if (jwt) {
+                const jwtData = JSON.parse(atob(jwt.split(".")[1]));
+                if (!jwtData.exp || (new Date().getTime() > (jwtData.exp * 1000))) {
+                    jwt = null;
+                } else {
+                    setAuth({
+                        jwt,
+                        claims: jwtData
+                    });
+                }
+            }
+
+            if (!jwt) {
+                const redirectUrl = new URL(window.location.origin);
+                redirectUrl.pathname = "/webui/login";
+
+                const nonce = crypto.randomUUID();
+                window.localStorage.setItem("nonce", JSON.stringify({
+                    nonce,
+                    // Expires in 30 minutes
+                    useBefore: new Date().getTime() + 30 * 60 * 1000
+                } satisfies IrisWebuiNonceStorage));
+
+                const authUrl = new URL(IRIS_SITE.auth.authUrl);
+                authUrl.searchParams.set("client_id", IRIS_SITE.auth.clientId);
+                authUrl.searchParams.set("redirect_uri", redirectUrl.href);
+                authUrl.searchParams.set("response_type", "id_token");
+                authUrl.searchParams.set("scope", IRIS_SITE.auth.scope ?? "openid email profile");
+                authUrl.searchParams.set("nonce", nonce);
+                window.location.href = authUrl.href;
+            }
+        }
+    }, [auth, location.pathname]);
+
+    const [plugins, setPlugins] = useState<null | IrisPluginCtx>(null);
+    useEffect(() => {
+        if (!auth) return;
+
+        const plugins: IrisPluginCtx = {};
+        Promise.all(IRIS_SITE.plugins.map(async (sitePlugin) => {
+            if (sitePlugin.type === "conduit") {
+                const client = createConduitClientSideClient<IrisPluginConduitConduitServerTypes<IrisPluginConduit>>({
+                    jwt: auth.jwt
+                }, {
+                    baseURL: sitePlugin.baseUrl
+                });
+
+                const plugin = await client().plugin();
+
+                plugins[sitePlugin.id] = {
+                    type: "conduit",
+                    plugin,
+                    client
+                };
+            } else {
+                throw new Error("Unexpected plugin type " + sitePlugin.type);
+            }
+        })).then(() => {
+            setPlugins(plugins);
+        }).catch(e => { throw e; });
+    }, [auth]);
+
     return (
         <Root>
             <ThemeEngine plugins={[
@@ -53,7 +132,13 @@
                         <Links />
                     </HeadWrapper>
                     <BodyWrapper>
-                        <Outlet />
+                        <authContext.Provider value={auth}>
+                            <pluginContext.Provider value={plugins}>
+                                <Shell>
+                                    <Outlet />
+                                </Shell>
+                            </pluginContext.Provider>
+                        </authContext.Provider>
                         <ScrollRestoration />
                         <Scripts />
                     </BodyWrapper>
diff --git a/packages/webui/src/app/routes/login.tsx b/packages/webui/src/app/routes/login.tsx
new file mode 100644
index 0000000..f63ce03
--- /dev/null
+++ b/packages/webui/src/app/routes/login.tsx
@@ -0,0 +1,68 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import type { JWTPayload } from "jose";
+import { useEffect, useState } from "react";
+
+import IRIS_SITE from "~/IRIS_SITE";
+
+export default function Login() {
+    const [error, setError] = useState<null | string>(null);
+    useEffect(() => {
+        const nonce = window.localStorage.getItem("nonce");
+        if (!nonce) {
+            setError("Missing auth state");
+            return;
+        }
+
+        const nonceData = JSON.parse(nonce) as IrisWebuiNonceStorage;
+        if (new Date().getTime() > nonceData.useBefore) {
+            setError("Auth state has expired");
+            return;
+        }
+
+        if (!window.location.hash.slice(1)) {
+            setError("Missing auth parameters");
+            return;
+        }
+
+        const hashParams = new URLSearchParams(window.location.hash.slice(1));
+        const jwt = hashParams.get("id_token");
+        if (!jwt) {
+            setError("Missing required id_token parameter");
+            return;
+        }
+
+        const jwtData = JSON.parse(atob(jwt.split(".")[1])) as JWTPayload;
+        if ((jwtData.aud !== IRIS_SITE.auth.clientId) ||
+            (jwtData.iss !== IRIS_SITE.auth.iss) ||
+            !jwtData.nbf ||
+            ((jwtData.nbf * 1000) > new Date().getTime()) ||
+            !jwtData.exp ||
+            ((jwtData.exp * 1000) < new Date().getTime()) ||
+            (jwtData.nonce !== nonceData.nonce)) {
+            setError("Invalid or expired id_token");
+            return;
+        }
+
+        const webuiUrl = new URL(window.location.origin);
+        webuiUrl.pathname = "/webui";
+
+        window.localStorage.removeItem("nonce");
+        window.localStorage.setItem("jwt", jwt);
+        window.location.href = webuiUrl.href;
+    }, []);
+
+    return (
+        <div>
+            {error ? (
+                <div>
+                    <h1>Authentication error</h1>
+                    <p>{error}</p>
+                </div>
+            ) : (
+                <p>Signing in...</p>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/routes/p/$.tsx b/packages/webui/src/app/routes/p/$.tsx
new file mode 100644
index 0000000..1837210
--- /dev/null
+++ b/packages/webui/src/app/routes/p/$.tsx
@@ -0,0 +1,10 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+export default function Home() {
+    return (
+        <div>
+            <p>Hello plugin!</p>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/routes/p/$pluginId/$panelId.tsx b/packages/webui/src/app/routes/p/$pluginId/$panelId.tsx
new file mode 100644
index 0000000..76e2f75
--- /dev/null
+++ b/packages/webui/src/app/routes/p/$pluginId/$panelId.tsx
@@ -0,0 +1,15 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import { useState } from "react";
+import { useParams } from "react-router";
+
+import Panel from "~/app/components/Panel";
+
+export default function PanelRoute() {
+    return (
+        <div className="py-12">
+            <Panel />
+        </div >
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/webui.d.ts b/packages/webui/src/webui.d.ts
index dc05a7e..869b1fc 100644
--- a/packages/webui/src/webui.d.ts
+++ b/packages/webui/src/webui.d.ts
@@ -1,2 +1,42 @@
 // Iris
-// Copyright (c) jottocraft 2025
\ No newline at end of file
+// Copyright (c) jottocraft 2025
+
+declare type IrisWebuiConfig = {
+    origin: string;
+    site: import("@jottocraft/iris-sdk").IrisSiteConfig;
+};
+
+declare type IrisWebuiNonceStorage = {
+    nonce: string;
+    useBefore: number;
+};
+
+declare type IrisWebuiPanelRef = import("@jottocraft/iris-sdk").IrisPluginConduitPanelRef<import("@jottocraft/iris-sdk").IrisPluginConduit>;
+declare type IrisWebuiFormRef = import("@jottocraft/iris-sdk").IrisPluginConduitFormRef<import("@jottocraft/iris-sdk").IrisPluginConduit>;
+
+declare type IrisWebuiPanelNavigationCtx = IrisWebuiPanelNavigationCtxActive | IrisWebuiPanelNavigationCtxInactive;
+
+declare type IrisWebuiPanelNavigationCtxCommon = {
+    startNavigation: (pluginId: string, ref: IrisWebuiPanelRef, e?: React.MouseEvent) => void;
+};
+
+declare type IrisWebuiPanelNavigationCtxActive = IrisWebuiPanelNavigationCtxCommon & {
+    activeRef: IrisWebuiPanelRef;
+    layout: null | import("@jottocraft/iris-sdk").IrisPluginConduitPanelLayout<import("@jottocraft/iris-sdk").IrisPluginConduit>;
+    pluginId: string;
+    breadcrumbs: IrisWebuiPanelBreadcrumb[];
+    navigate: (ref: IrisWebuiPanelRef, e?: React.MouseEvent) => void;
+    back: (e?: React.MouseEvent) => void;
+    goToBreadcrumb: (index: number, e?: React.MouseEvent) => void;
+    refreshLayout: () => void;
+};
+
+declare type IrisWebuiPanelNavigationCtxInactive = IrisWebuiPanelNavigationCtxCommon & {
+    activeRef: null;
+};
+
+declare type IrisWebuiPanelBreadcrumb = {
+    displayName: string;
+    icon?: string;
+    ref: IrisWebuiPanelRef;
+};
\ No newline at end of file