diff --git a/packages/sdk/src/conduit.ts b/packages/sdk/src/conduit.ts
index ac735b2..e223540 100644
--- a/packages/sdk/src/conduit.ts
+++ b/packages/sdk/src/conduit.ts
@@ -17,7 +17,7 @@
     client: {
         plugin: () => Promise<PluginType>;
         panels: {
-            [Property in keyof PluginType["panels"]]: (args: IrisPluginConduitPanelArgs<PluginType["panels"][Property]["requiredArgs"]>) => Promise<IrisPluginConduitPanelLayout<PluginType>>;
+            [Property in keyof PluginType["panels"]]: (args: IrisPluginConduitPanelArgs<PluginType["panels"][Property]["requiredArgs"]>, state: IrisPluginConduitPanelState<PluginType>) => Promise<IrisPluginConduitPanelLayout<PluginType>>;
         };
         forms: {
             [Property in keyof PluginType["forms"]]: (data: IrisPluginConduitFieldData<PluginType["forms"][Property]["data"]>) => Promise<string>;
@@ -53,8 +53,19 @@
 
 export type IrisPluginConduitPanelArgs<RequiredArgsType extends string[]> = {
     [Property in RequiredArgsType[number]]: string;
-} & {
-    [arg: string]: string;
+};
+
+export type IrisPluginConduitPanelState<PluginType extends IrisPluginConduit> = {
+    sections: {
+        [id: string]: IrisPluginConduitPanelSectionState<PluginType> | undefined;
+    };
+};
+
+export type IrisPluginConduitPanelSectionState<PluginType extends IrisPluginConduit> = {
+    table?: {
+        search?: string;
+        offset?: number;
+    };
 };
 
 export type IrisPluginConduitForm = {
@@ -83,15 +94,19 @@
     };
 });
 
-export type _IrisPluginConduitFieldDeepOptional<FieldSpec extends IrisPluginConduitField | undefined> = FieldSpec extends { type: "string" | "date" | "datetime" | "number" | "boolean" | "dropdown" } ? (
+export type _IrisPluginConduitFieldDeepOptional<FieldSpec extends IrisPluginConduitField | undefined, ArrayOfOptional extends boolean> = FieldSpec extends { type: "string" | "date" | "datetime" | "number" | "boolean" | "dropdown" } ? (
     Omit<FieldSpec, "optional"> & { optional: true; }
 ) : FieldSpec extends { type: "array" } ? (
-    Omit<FieldSpec, "of"> & { of: _IrisPluginConduitFieldDeepOptional<FieldSpec["of"]>; }
+    Omit<FieldSpec, "of" | "optional"> & {
+        of: ArrayOfOptional extends true ? _IrisPluginConduitFieldDeepOptional<FieldSpec["of"], ArrayOfOptional> : FieldSpec["of"];
+        optional: true;
+    }
 ) : FieldSpec extends { type: "object" } ? (
-    Omit<FieldSpec, "struct"> & {
+    Omit<FieldSpec, "struct" | "optional"> & {
         struct: {
-            [Property in keyof FieldSpec["struct"]]: _IrisPluginConduitFieldDeepOptional<FieldSpec["struct"][Property]>;
+            [Property in keyof FieldSpec["struct"]]: _IrisPluginConduitFieldDeepOptional<FieldSpec["struct"][Property], ArrayOfOptional>;
         };
+        optional: true;
     }
 ) : FieldSpec extends undefined ? (
     undefined
@@ -116,7 +131,7 @@
 ) : FieldSpec extends { type: "boolean" } ? (
     boolean
 ) : FieldSpec extends { type: "dropdown" } ? (
-    FieldSpec["options"][number]
+    FieldSpec["options"][number]["value"]
 ) : FieldSpec extends { type: "array" } ? (
     IrisPluginConduitFieldData<FieldSpec["of"]>[]
 ) : FieldSpec extends { type: "object" } ? (
@@ -141,7 +156,7 @@
     sections?: IrisPluginConduitPanelLayoutSection<PluginType>[];
 };
 
-export type IrisPluginConduitPanelLayoutSection<PluginType extends IrisPluginConduit> = IrisPluginConduitPanelLayoutSectionProperties<PluginType> | IrisPluginConduitPanelLayoutSectionTable<PluginType> | IrisPluginConduitPanelLayoutSectionRef<PluginType>;
+export type IrisPluginConduitPanelLayoutSection<PluginType extends IrisPluginConduit> = IrisPluginConduitPanelLayoutSectionProperties<PluginType> | IrisPluginConduitPanelLayoutSectionTable<PluginType> | IrisPluginConduitPanelLayoutSectionPanel<PluginType> | IrisPluginConduitPanelLayoutSectionForm<PluginType>;
 
 export type IrisPluginConduitPanelLayoutSectionCommon = {
     id: string;
@@ -168,16 +183,25 @@
         links?: {
             [key: string]: IrisPluginConduitPanelRef<PluginType>;
         };
+        forms?: IrisPluginConduitFormRef<PluginType>[];
     }[];
-    firstRow: number;
-    totalRows: number;
+    canSearch?: boolean;
+    pagination?: {
+        rowsPerPage: number;
+        totalRows: number;
+    };
 };
 
-export type IrisPluginConduitPanelLayoutSectionRef<PluginType extends IrisPluginConduit> = IrisPluginConduitPanelLayoutSectionCommon & {
-    type: "ref";
+export type IrisPluginConduitPanelLayoutSectionPanel<PluginType extends IrisPluginConduit> = IrisPluginConduitPanelLayoutSectionCommon & {
+    type: "panel";
     panel: IrisPluginConduitPanelRef<PluginType>;
 };
 
+export type IrisPluginConduitPanelLayoutSectionForm<PluginType extends IrisPluginConduit> = IrisPluginConduitPanelLayoutSectionCommon & {
+    type: "form";
+    form: IrisPluginConduitFormRef<PluginType>;
+};
+
 export type IrisPluginConduitPanelRef<PluginType extends IrisPluginConduit> = {
     id: string;
     args?: unknown;
@@ -186,6 +210,7 @@
 export type IrisPluginConduitFormRef<PluginType extends IrisPluginConduit> = {
     id: string;
     data?: unknown;
+    defaults?: unknown;
 };
 
 export type IrisPluginConduitPanelLayoutField = {
@@ -198,8 +223,11 @@
  * Helper utility for implementing an Iris Conduit server with strong type safety.
  */
 export function createIrisConduitServerImpl<PluginType extends IrisPluginConduit>(): {
-    panelRef: <PanelId extends keyof PluginType["panels"]>(id: PanelId, args?: Partial<IrisPluginConduitPanelArgs<PluginType["panels"][PanelId]["requiredArgs"]>>) => IrisPluginConduitPanelRef<PluginType>;
-    formRef: <FormId extends keyof PluginType["forms"]>(id: FormId, args?: IrisPluginConduitFieldData<_IrisPluginConduitFieldDeepOptional<PluginType["forms"][FormId]["data"]>>) => IrisPluginConduitFormRef<PluginType>;
+    panelRef: <PanelId extends keyof PluginType["panels"]>(id: PanelId, args: IrisPluginConduitPanelArgs<PluginType["panels"][PanelId]["requiredArgs"]>) => IrisPluginConduitPanelRef<PluginType>;
+    formRef: <FormId extends keyof PluginType["forms"]>(id: FormId, data?: {
+        data?: IrisPluginConduitFieldData<_IrisPluginConduitFieldDeepOptional<PluginType["forms"][FormId]["data"], false>>;
+        defaults?: IrisPluginConduitFieldData<_IrisPluginConduitFieldDeepOptional<PluginType["forms"][FormId]["data"], true>>;
+    }) => IrisPluginConduitFormRef<PluginType>;
 } {
     return {
         panelRef(id, args) {
@@ -208,10 +236,11 @@
                 args
             }
         },
-        formRef(id, data) {
+        formRef(id, { data, defaults } = {}) {
             return {
                 id: id as string,
-                data
+                data,
+                defaults
             }
         }
     };
diff --git a/packages/webui/src/app/app.css b/packages/webui/src/app/app.css
index f5f776b..8da88a0 100644
--- a/packages/webui/src/app/app.css
+++ b/packages/webui/src/app/app.css
@@ -2,10 +2,26 @@
 @config "../../tailwind.config.js";
 @source "../../../../node_modules/@ffxp/react-dom/lib";
 
-body, html {
+body,
+html {
     height: 100%;
 }
 
-button,[role=button] {
+button,
+[role=button] {
     cursor: pointer
+}
+
+@keyframes loadingImgAnimation {
+    from {
+        opacity: 0.9;
+    }
+
+    to {
+        opacity: 0.6;
+    }
+}
+
+#loadingImg {
+    animation: loadingImgAnimation 0.35s ease-in alternate infinite;
 }
\ No newline at end of file
diff --git a/packages/webui/src/app/components/ErrorScreen.tsx b/packages/webui/src/app/components/ErrorScreen.tsx
new file mode 100644
index 0000000..d9e5cba
--- /dev/null
+++ b/packages/webui/src/app/components/ErrorScreen.tsx
@@ -0,0 +1,40 @@
+// Iris
+// Copyright (c) jottocraft 2025. All rights reserved.
+
+import { Icon } from "@ffxp/react-dom";
+import { YggdrasilStatus } from "@jottocraft/yggdrasil";
+
+import { useError } from "~/app/data/error";
+
+export function ErrorBox({ error, big }: { error: string | YggdrasilStatus<unknown>; big?: boolean; }) {
+    const message = error instanceof YggdrasilStatus ? error.statusMessage : error;
+    return (
+        <div className="p-4 roundness-xl bg-red-200 dark:bg-red-950 space-y-4">
+            <div className="flex flex-row items-center space-x-4">
+                <Icon className="text-2xl flex-shrink-0">error</Icon>
+                {error ? (
+                    <div className="space-y-2">
+                        {message ? <p className="text-lg font-medium">{message}</p> : null}
+                        {error instanceof YggdrasilStatus ? <p className="text-type-30">Error {error.status} {error.statusCode}</p> : null}
+                    </div>
+                ) : null}
+            </div>
+            {(error instanceof YggdrasilStatus) && error.statusCtx ? (
+                <pre className="text-type-60 text-xs font-mono">{JSON.stringify(error.statusCtx, undefined, 2)}</pre>
+            ) : null}
+        </div>
+    );
+}
+
+export default function ErrorScreen({ children }: { children?: React.ReactNode; }) {
+    const error = useError();
+    if (!error) return children ?? null;
+
+    return (
+        <div className="relative w-full h-full min-h-128 p-8">
+            <div className="w-full h-full roundness-3xl bg-linear-to-b from-red-500/5 to-ui-0 flex items-center justify-center">
+                <ErrorBox error={error} big />
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/components/Form/Field.tsx b/packages/webui/src/app/components/Form/Field.tsx
index 122654c..75a60a2 100644
--- a/packages/webui/src/app/components/Form/Field.tsx
+++ b/packages/webui/src/app/components/Form/Field.tsx
@@ -4,40 +4,42 @@
 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;
+export function createInitialFieldData(spec: IrisPluginConduitField, refData?: any, refDefaults?: any, forceRequired?: boolean) {
+    const refInitialData = refData ?? refDefaults;
+
+    if (spec.optional && !forceRequired && !refInitialData) return undefined;
 
     if (spec.type === "string") {
-        return refData ?? "";
+        return refInitialData ?? "";
     } else if (spec.type === "number") {
-        return refData ?? 0;
+        return refInitialData ?? 0;
     } else if (spec.type === "date") {
-        return refData ?? new Date().toISOString().split("T")[0];
+        return refInitialData ?? new Date().toISOString().split("T")[0];
     } else if (spec.type === "datetime") {
-        return refData ?? new Date().toISOString();
+        return refInitialData ?? new Date().toISOString();
     } else if (spec.type === "boolean") {
-        return refData ?? false;
+        return refInitialData ?? false;
     } else if (spec.type === "dropdown") {
-        return refData ?? spec.options[0].value;
+        return refInitialData ?? spec.options[0].value;
     } else if (spec.type === "array") {
-        return refData ? refData.map((refItem: any) => createDefaultFieldData(spec.of, refItem)) : [];
+        return refInitialData ? refInitialData.map((refItem: any) => createInitialFieldData(spec.of, refData ? refItem : undefined, refData ? undefined : refItem, false)) : [];
     } else if (spec.type === "object") {
-        const defaultData: any = {};
+        const initialData: any = {};
         for (const key in spec.struct) {
-            defaultData[key] = createDefaultFieldData(spec.struct[key], refData ? refData[key] : undefined);
+            initialData[key] = createInitialFieldData(spec.struct[key], refData ? refData[key] : undefined, refDefaults ? refDefaults[key] : undefined, false);
         }
-        return defaultData;
+        return initialData;
     }
 }
 
-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; }) {
+export default function Field({ path, data, refData, refDefaults, spec, patchFormData, controls }: { path: string; data: any; refData: any; refDefaults: 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>
+            <Button onClick={() => patchFormData(path, createInitialFieldData(spec, undefined, undefined, true))} iconLeading="add">Set value</Button>
         );
     } else if ((spec.type === "string") || (spec.type === "number") || (spec.type === "date") || (spec.type === "datetime")) {
         fieldInput = (
@@ -109,10 +111,10 @@
                                     patchFormData(path, newValue);
                                 }} iconLeading="delete" size="small" />
                             </div>
-                        )} path={`${path}[${i}]`} data={value} refData={refData !== undefined ? refData[i] : undefined} spec={spec.of} patchFormData={patchFormData} />
+                        )} path={`${path}[${i}]`} data={value} refData={refData !== undefined ? refData[i] : undefined} refDefaults={refDefaults !== undefined ? refDefaults[i] : undefined} spec={spec.of} patchFormData={patchFormData} />
                     );
                 })}
-                <Button iconLeading="add" onClick={() => patchFormData(path, [...data, createDefaultFieldData(spec.of)])}>Add item</Button>
+                <Button iconLeading="add" onClick={() => patchFormData(path, [...data, createInitialFieldData(spec.of)])}>Add item</Button>
             </div>
         );
     } else if (spec.type === "object") {
@@ -120,7 +122,7 @@
             <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} />
+                        <Field path={`${path}.${key}`} data={data[key]} refData={refData !== undefined ? refData[key] : undefined} refDefaults={refDefaults !== undefined ? refDefaults[key] : undefined} spec={spec.struct[key]} patchFormData={patchFormData} />
                     );
                 })}
             </div>
@@ -142,12 +144,14 @@
                         {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>
+                        {spec.optional && (refData === undefined) ? (
+                            data !== undefined ? (
+                                <Button onClick={() => patchFormData(path, undefined)} iconLeading="delete" size="small">Clear value</Button>
+                            ) : (
+                                <div className="text-xs px-2 py-1 bg-ui-10 roundness">
+                                    Optional
+                                </div>
+                            )
                         ) : null}
                         {controls}
                     </div>
diff --git a/packages/webui/src/app/components/Form/index.tsx b/packages/webui/src/app/components/Form/index.tsx
index b323de0..0b54300 100644
--- a/packages/webui/src/app/components/Form/index.tsx
+++ b/packages/webui/src/app/components/Form/index.tsx
@@ -1,27 +1,27 @@
 // Iris
 // Copyright (c) jottocraft 2025
 
-import type { IrisPluginConduitField } from "@jottocraft/iris-sdk";
+import { YggdrasilStatus } from "@jottocraft/yggdrasil";
 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 Field, { createInitialFieldData } from "~/app/components/Form/Field";
 import { usePanelNavigation } from "~/app/data/panels";
 import { usePlugins } from "~/app/data/root";
-import { YggdrasilStatus } from "@jottocraft/yggdrasil";
+import { ErrorBox } from "~/app/components/ErrorScreen";
 
-export default function Form({ ref, onFinished }: { ref: IrisWebuiFormRef; onFinished: () => void; }) {
+export default function Form({ inline, ref, onFinished }: { inline?: boolean; 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 initialData = useMemo(() => form.data ? createInitialFieldData(form.data, ref.data, ref.defaults, false) : undefined, [form, ref]);
 
     const [formData, setFormData] = useState<{ data: unknown; }>({
-        data: clone(defaultData)
+        data: clone(initialData)
     });
 
     const patchFormData = useCallback((path: string, value: unknown) => {
@@ -38,13 +38,51 @@
             try {
                 const data = await plugins[panelNavigation.pluginId].client().forms[ref.id](formData.data as any);
                 setFormResult(data);
-            } catch(e) {
+            } catch (e) {
                 if (!(e instanceof YggdrasilStatus)) throw e;
                 setFormResult(e);
             }
         })();
     }, [panelNavigation, ref, formData]);
 
+    console.log(ref, initialData, formData);
+
+    const formJsx = (
+        <div className="space-y-8">
+            {formResult ? (
+                <>
+                    <div>
+                        {formResult instanceof YggdrasilStatus ? (
+                            <ErrorBox error={formResult} />
+                        ) : (
+                            <p>{formResult}</p>
+                        )}
+                    </div>
+                    <div>
+                        <Button onClick={() => onFinished()}>Close</Button>
+                    </div>
+                </>
+            ) : (
+                <>
+                    <div>
+                        {form.data ? (
+                            <Field path="data" data={formData.data} refData={ref.data} refDefaults={ref.defaults} 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>
+    );
+
+    if (inline) {
+        return formJsx;
+    }
+
     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">
@@ -57,25 +95,8 @@
                         <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 >
+                {formJsx}
+            </div>
         </div >
     ), document.body);
 }
\ No newline at end of file
diff --git a/packages/webui/src/app/components/Loading.tsx b/packages/webui/src/app/components/Loading.tsx
new file mode 100644
index 0000000..cc40064
--- /dev/null
+++ b/packages/webui/src/app/components/Loading.tsx
@@ -0,0 +1,31 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import React, { useEffect, useState } from "react";
+
+function LoadingTextDots() {
+    let [numDots, setNumDots] = useState(0);
+    useEffect(() => {
+        const dotInt = setInterval(() => {
+            numDots++;
+            if (numDots > 3) numDots = 0;
+            setNumDots(numDots);
+        }, 500);
+        return () => clearInterval(dotInt);
+    }, []);
+
+    return <pre className="inline-block">{numDots === 1 ? ".  " : numDots === 2 ? ".. " : numDots === 3 ? "..." : "   "}</pre>;
+}
+
+export default function Loading({ children }: { children: string; }) {
+    return (
+        <div className="relative w-full h-full min-h-128 p-8">
+            <div className="w-full h-full roundness-3xl bg-linear-to-b from-ui-5 to-ui-0">
+                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30 w-32 h-32">
+                    <img id="loadingImg" className="w-full h-full" src="/webui/assets/favicon.png" />
+                </div>
+                {children ? <div className="flex flex-row items-center font-medium text-2xl absolute top-3/4 left-1/2 -translate-x-1/2 z-30"><span>{children}</span><LoadingTextDots /></div> : null}
+            </div>
+        </div>
+    );
+}
\ 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
index bafc717..4a847d0 100644
--- a/packages/webui/src/app/components/Panel/index.tsx
+++ b/packages/webui/src/app/components/Panel/index.tsx
@@ -1,46 +1,69 @@
 // Iris
 // Copyright (c) jottocraft 2025
 
-import { Button, Icon } from "@ffxp/react-dom";
-import type { IrisPluginConduit, IrisPluginConduitPanelArgs, IrisPluginConduitPanelLayout } from "@jottocraft/iris-sdk";
+import { Button, Icon, Pivot } from "@ffxp/react-dom";
+import type { IrisPluginConduit, IrisPluginConduitPanelArgs, IrisPluginConduitPanelLayout, IrisPluginConduitPanelLayoutSection } from "@jottocraft/iris-sdk";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router";
+import { YggdrasilStatus } from "@jottocraft/yggdrasil";
 
 import { usePlugins } from "~/app/data/root";
 import PanelSection from "~/app/components/PanelSection";
 import { usePanelNavigation } from "~/app/data/panels";
 import Form from "~/app/components/Form";
+import Loading from "~/app/components/Loading";
+import { useError } from "~/app/data/error";
+import ErrorScreen from "~/app/components/ErrorScreen";
 
 export default function Panel() {
     const panelNavigation = usePanelNavigation()!;
     const plugins = usePlugins()!;
     const [activeForm, setActiveForm] = useState<IrisWebuiFormRef | null>(null);
+    const [selectedSection, setSelectedSection] = useState<string | null>(null);
+    const error = useError();
+
+    useEffect(() => {
+        setActiveForm(null);
+        setSelectedSection(null);
+    }, [panelNavigation.activeRef]);
+
+    if (error) {
+        return (
+            <ErrorScreen />
+        );
+    }
 
     if (!panelNavigation.activeRef) {
-        return (
-            <p>Please select a panel to open from the sidebar.</p>
-        );
+        return null;
     }
 
     if (!panelNavigation.layout) {
         return (
-            <p>Loading panel {panelNavigation.activeRef.id}...</p>
+            <Loading>
+                {`Loading panel ${panelNavigation.activeRef.id}`}
+            </Loading>
         );
     }
 
     const plugin = plugins[panelNavigation.pluginId];
     const layout = panelNavigation.layout;
+    const activeSection = layout.sections?.length === 1 ? layout.sections[0] : (layout.sections?.find(section => (section.id === selectedSection)) ?? null);
 
     return (
         <>
             {activeForm ? (
-                <Form ref={activeForm} onFinished={() => setActiveForm(null)} />
+                <Form ref={activeForm} onFinished={() => {
+                    setActiveForm(null);
+                    panelNavigation.refreshLayout();
+                }} />
             ) : 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>
+            <div className={panelNavigation.root ? "space-y-8" : "space-y-4"}>
+                {panelNavigation.root ? (
+                    <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>
+                ) : null}
                 {layout.forms ? (
                     <div>
                         {layout.forms?.map((ref) => {
@@ -48,32 +71,44 @@
 
                             return (
                                 <div className="inline-block m-1">
-                                    <Button onClick={() => setActiveForm(ref)} iconLeading={form.icon}>{form.displayName}</Button>
+                                    <Button size={panelNavigation.root ? "default" : "small"} onClick={() => setActiveForm(ref)} iconLeading={form.icon}>{form.displayName}</Button>
                                 </div>
                             );
                         })}
                     </div>
                 ) : null}
                 {layout.main ? (
-                    <div>
+                    <div className="flex flex-row items-center flex-wrap">
                         {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">
+                            <div className={"min-h-24 m-1 bg-ui-5 " + (panelNavigation.root ? "p-4 space-y-2 roundness-xl" : "p-3 space-y-1 roundness-lg")}>
+                                <div className={"flex flex-row items-center space-x-2 font-medium " + (panelNavigation.root ? "text-xl" : "text-lg")}>
                                     {item.icon ? <Icon>{item.icon}</Icon> : null}
                                     <div>{item.displayName}</div>
                                 </div>
-                                <div>
-                                    <div>{item.value}</div>
-                                </div>
+                                <div className={panelNavigation.root ? "text-base" : "text-sm"}>{item.value}</div>
                             </div>
                         ))}
                     </div>
                 ) : null}
                 {layout.sections ? (
                     <div>
-                        {layout.sections.map(section => (
-                            <PanelSection section={section} />
-                        ))}
+                        {layout.sections.length > 1 ? (
+                            <Pivot tabs={layout.sections.map(section => ({
+                                title: section.displayName,
+                                icon: section.icon,
+                                active: selectedSection === section.id,
+                                onClick: () => {
+                                    if (selectedSection === section.id) {
+                                        setSelectedSection(null);
+                                    } else {
+                                        setSelectedSection(section.id);
+                                    }
+                                }
+                            }))} />
+                        ) : null}
+                        {activeSection ? (
+                            <PanelSection section={activeSection} />
+                        ) : null}
                     </div>
                 ) : null}
             </div>
diff --git a/packages/webui/src/app/components/PanelNavigator.tsx b/packages/webui/src/app/components/PanelNavigator.tsx
index 16bcb25..d42f820 100644
--- a/packages/webui/src/app/components/PanelNavigator.tsx
+++ b/packages/webui/src/app/components/PanelNavigator.tsx
@@ -1,33 +1,50 @@
 // Iris
 // Copyright (c) jottocraft 2025
 
-import type { IrisPluginConduit, IrisPluginConduitPanelLayout } from "@jottocraft/iris-sdk";
+import type { IrisPluginConduitPanelState, IrisPluginConduit, IrisPluginConduitPanelLayout, IrisPluginConduitPanelSectionState } from "@jottocraft/iris-sdk";
+import { YggdrasilStatus } from "@jottocraft/yggdrasil";
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router";
 
 import { panelNavigationCtx, panelRefHref } from "~/app/data/panels";
 import { usePlugins } from "~/app/data/root";
+import { ErrorProvider } from "../data/error";
 
-export default function PanelNavigator({ children }: { children?: React.ReactNode; }) {
+export default function PanelNavigator({ root, initialPluginId, initialRef, children }: { initialPluginId?: string; initialRef?: IrisWebuiPanelRef; root: boolean; children?: React.ReactNode; }) {
     const routerNavigate = useNavigate();
     const plugins = usePlugins()!;
 
-    const [pluginId, setPluginId] = useState<string | null>(null);
-    const [activeRef, setActiveRef] = useState<IrisWebuiPanelRef | null>(null);
+    const [pluginId, setPluginId] = useState<string | null>(initialPluginId ?? null);
+    const [activeRef, setActiveRef] = useState<IrisWebuiPanelRef | null>(initialRef ?? null);
+    const [activeState, setActiveState] = useState<IrisPluginConduitPanelState<IrisPluginConduit> | null>(null);
     const [layout, setLayout] = useState<IrisPluginConduitPanelLayout<IrisPluginConduit> | null>(null);
     const [breadcrumbs, setBreadcrumbs] = useState<IrisWebuiPanelBreadcrumb[]>([]);
+    const [error, setError] = useState<null | string | YggdrasilStatus<unknown>>(null);
 
     useEffect(() => {
-        if (!activeRef) return;
+        if (!activeRef || !root) return;
         routerNavigate(panelRefHref(pluginId!, activeRef));
-    }, [pluginId, activeRef, routerNavigate]);
+    }, [pluginId, activeRef, routerNavigate, root]);
 
     const fetchLayout = useCallback(() => {
+        setLayout(null);
+        setError(null);
+
         (async () => {
-            const data = await plugins[pluginId!].client().panels[activeRef!.id]((activeRef!.args ?? {}) as { [key: string]: string; });
-            setLayout(data);
+            try {
+                if (!(pluginId! in plugins))  {
+                    setError("Unknown plugin " + pluginId);
+                    return;
+                }
+
+                const data = await plugins[pluginId!].client().panels[activeRef!.id]((activeRef!.args ?? {}) as { [key: string]: string; }, activeState!);
+                setLayout(data);
+            } catch (e) {
+                if (!(e instanceof YggdrasilStatus)) throw e;
+                setError(e);
+            }
         })();
-    }, [plugins, pluginId, activeRef]);
+    }, [plugins, pluginId, activeRef, activeState]);
 
     useEffect(() => {
         if (!activeRef) return;
@@ -38,12 +55,13 @@
     const navigate = useCallback((ref: IrisWebuiPanelRef, e?: React.MouseEvent) => {
         e?.preventDefault();
 
+        setActiveRef(ref);
+        setActiveState({ sections: {} });
         setBreadcrumbs([...breadcrumbs, {
             displayName: layout?.displayName ?? activeRef!.id,
             icon: layout?.icon ?? undefined,
             ref: activeRef!
         }]);
-        setActiveRef(ref);
     }, [activeRef, layout, breadcrumbs]);
 
     const back = useCallback((e?: React.MouseEvent) => {
@@ -51,6 +69,7 @@
         if (!breadcrumbs.length) return;
 
         setActiveRef(breadcrumbs[breadcrumbs.length - 1].ref);
+        setActiveState({ sections: {} });
         setBreadcrumbs(breadcrumbs.slice(0, -1));
     }, [breadcrumbs]);
 
@@ -59,36 +78,59 @@
         if (!breadcrumbs.length) return;
 
         setActiveRef(breadcrumbs[index].ref);
+        setActiveState({ sections: {} });
         setBreadcrumbs(breadcrumbs.slice(0, index));
     }, [breadcrumbs]);
 
     const startNavigation = useCallback((pluginId: string, ref: IrisWebuiPanelRef, e?: React.MouseEvent) => {
         setPluginId(pluginId);
+
         setActiveRef(ref);
+        setActiveState({ sections: {} });
         setBreadcrumbs([]);
     }, []);
 
-    const refreshLayout = useCallback(() => {
-        setLayout(null);
-        fetchLayout();
-    }, [fetchLayout]);
+    useEffect(() => {
+        if (!initialPluginId || !initialRef) return;
+        startNavigation(initialPluginId, initialRef);
+    }, [initialPluginId, initialRef, startNavigation]);
+
+    const patchActiveSectionState = useCallback((sectionId: string, state: IrisPluginConduitPanelSectionState<IrisPluginConduit>) => {
+        setActiveState({
+            ...activeState,
+            sections: {
+                ...activeState?.sections,
+                [sectionId]: {
+                    ...activeState?.sections?.[sectionId],
+                    ...state
+                }
+            }
+        });
+    }, [activeState]);
 
     return (
-        <panelNavigationCtx.Provider value={activeRef ? {
-            activeRef,
-            layout,
-            pluginId: pluginId!,
-            breadcrumbs,
-            navigate,
-            back,
-            goToBreadcrumb,
-            startNavigation,
-            refreshLayout
-        } : {
-            activeRef,
-            startNavigation
-        }}>
-            {children}
-        </panelNavigationCtx.Provider>
+        <ErrorProvider error={error}>
+            <panelNavigationCtx.Provider value={activeRef ? {
+                activeRef,
+                activeState: activeState!,
+                layout,
+                pluginId: pluginId!,
+                breadcrumbs,
+                navigate,
+                back,
+                goToBreadcrumb,
+                startNavigation,
+                refreshLayout: fetchLayout,
+                setActiveState,
+                patchActiveSectionState,
+                root
+            } : {
+                activeRef,
+                startNavigation,
+                root
+            }}>
+                {children}
+            </panelNavigationCtx.Provider>
+        </ErrorProvider>
     );
 }
\ No newline at end of file
diff --git a/packages/webui/src/app/components/PanelSection/PanelSectionForm.tsx b/packages/webui/src/app/components/PanelSection/PanelSectionForm.tsx
new file mode 100644
index 0000000..c851c5b
--- /dev/null
+++ b/packages/webui/src/app/components/PanelSection/PanelSectionForm.tsx
@@ -0,0 +1,19 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import type { IrisPluginConduit, IrisPluginConduitPanelLayoutSectionForm } from "@jottocraft/iris-sdk";
+
+import Form from "~/app/components/Form";
+import { usePanelNavigation } from "~/app/data/panels";
+
+export default function PanelSectionForm({ section }: { section: IrisPluginConduitPanelLayoutSectionForm<IrisPluginConduit>; }) {
+    const panelNavigation = usePanelNavigation() as IrisWebuiPanelNavigationCtxActive;
+
+    return (
+        <div className="py-8">
+            <Form inline ref={section.form} onFinished={() => {
+                panelNavigation.refreshLayout();
+            }} />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/components/PanelSection/PanelSectionPanel.tsx b/packages/webui/src/app/components/PanelSection/PanelSectionPanel.tsx
new file mode 100644
index 0000000..a998bdd
--- /dev/null
+++ b/packages/webui/src/app/components/PanelSection/PanelSectionPanel.tsx
@@ -0,0 +1,33 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import type { IrisPluginConduit, IrisPluginConduitPanelLayoutSectionPanel } from "@jottocraft/iris-sdk";
+import { useEffect } from "react";
+
+import { usePanelNavigation } from "~/app/data/panels";
+import PanelNavigator from "~/app/components/PanelNavigator";
+import Panel from "~/app/components/Panel";
+import PanelBreadcrumbs from "~/app/components/PanelBreadcrumbs";
+
+export default function PanelSectionPanel({ section }: { section: IrisPluginConduitPanelLayoutSectionPanel<IrisPluginConduit>; }) {
+    const panelNavigation = usePanelNavigation() as IrisWebuiPanelNavigationCtxActive;
+
+    useEffect(() => {
+        if (!panelNavigation.root) {
+            panelNavigation.navigate(section.panel);
+        }
+    }, [panelNavigation.root, section.panel]);
+
+    if (!panelNavigation.root) {
+        return null;
+    }
+
+    return (
+        <PanelNavigator root={false} initialPluginId={panelNavigation.pluginId} initialRef={section.panel}>
+            <div className="py-2 space-y-4">
+                <PanelBreadcrumbs />
+                <Panel />
+            </div>
+        </PanelNavigator>
+    );
+}
\ 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
index 1668d1c..4f05e9c 100644
--- a/packages/webui/src/app/components/PanelSection/PanelSectionProperties.tsx
+++ b/packages/webui/src/app/components/PanelSection/PanelSectionProperties.tsx
@@ -1,10 +1,29 @@
 // Iris
 // Copyright (c) jottocraft 2025
 
+import { Icon } from "@ffxp/react-dom";
 import type { IrisPluginConduit, IrisPluginConduitPanelLayoutSectionProperties } from "@jottocraft/iris-sdk";
 
 export default function PanelSectionProperties({ section }: { section: IrisPluginConduitPanelLayoutSectionProperties<IrisPluginConduit>; }) {
     return (
-        <p>TODO</p>
+        <div className="w-full overflow-auto">
+            <table>
+                <tbody>
+                    {section.properties.map(property => (
+                        <tr>
+                            <td className="p-2">
+                                <div className="flex flex-row flex-shrink-0 items-center space-x-1 text-type-10 font-medium">
+                                    {property.icon ? <Icon>{property.icon}</Icon> : null}
+                                    <div className="whitespace-nowrap">{property.displayName}</div>
+                                </div>
+                            </td>
+                            <td className="p-2">
+                                <div className="text-sm text-type-20">{property.value}</div>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
     );
 }
\ 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
deleted file mode 100644
index c889178..0000000
--- a/packages/webui/src/app/components/PanelSection/PanelSectionRef.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-// 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
index 26229e4..50c40d1 100644
--- a/packages/webui/src/app/components/PanelSection/PanelSectionTable.tsx
+++ b/packages/webui/src/app/components/PanelSection/PanelSectionTable.tsx
@@ -1,46 +1,165 @@
 // Iris
 // Copyright (c) jottocraft 2025
 
+import { Button, Icon, Link, TextInput } from "@ffxp/react-dom";
 import type { IrisPluginConduit, IrisPluginConduitPanelLayoutSectionTable } from "@jottocraft/iris-sdk";
-import { Link, useParams } from "react-router";
+import { useEffect, useState } from "react";
+import { Link as RouterLink } from "react-router";
 
 import { panelRefHref, usePanelNavigation } from "~/app/data/panels";
+import { usePlugins } from "~/app/data/root";
+import Form from "~/app/components/Form";
 
 export default function PanelSectionTable({ section }: { section: IrisPluginConduitPanelLayoutSectionTable<IrisPluginConduit>; }) {
-    const params = useParams();
     const panelNavigation = usePanelNavigation() as IrisWebuiPanelNavigationCtxActive;
+    const plugins = usePlugins()!;
+    const [activeForm, setActiveForm] = useState<IrisWebuiFormRef | null>(null);
+
+    useEffect(() => {
+        setActiveForm(null);
+    }, [section]);
+
+    const plugin = plugins[panelNavigation.pluginId];
+
+    let pagination;
+    if (section.pagination && section.rows.length) {
+        const offset = panelNavigation.activeState.sections[section.id]?.table?.offset ?? 0;
+        const totalPages = Math.ceil(section.pagination.totalRows / section.pagination.rowsPerPage);
+        const activePage = (offset / section.pagination.rowsPerPage) + 1;
+        const firstVisiblePage = Math.max(activePage - 2, 1);
+        const lastVisiblePage = Math.min(activePage + 2, totalPages);
+        const visiblePages: number[] = [];
+        for (let i = firstVisiblePage; i <= lastVisiblePage; ++i) visiblePages.push(i);
+
+        pagination = {
+            firstRow: offset,
+            rowsPerPage: section.pagination.rowsPerPage,
+            totalRows: section.pagination.totalRows,
+            totalPages,
+            activePage,
+            visiblePages
+        };
+    } else {
+        pagination = null;
+    }
 
     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>
+        <>
+            {activeForm ? (
+                <Form ref={activeForm} onFinished={() => {
+                    setActiveForm(null);
+                    panelNavigation.refreshLayout();
+                }} />
+            ) : null}
+            <div className="space-y-4">
+                {section.canSearch ? (
+                    <div className="flex flex-row items-center justify-end">
+                        <TextInput defaultValue={panelNavigation.activeState.sections[section.id]?.table?.search ?? ""} onKeyDown={e => {
+                            const search = e.currentTarget.value || undefined;
+                            if (e.key === "Enter") {
+                                panelNavigation.patchActiveSectionState(section.id, {
+                                    table: {
+                                        ...panelNavigation.activeState.sections[section.id]?.table,
+                                        search,
+                                        offset: 0
+                                    }
+                                });
+                            }
+                        }} placeholder="Search" icon="search" />
+                    </div>
+                ) : null}
+                <div className="w-full overflow-auto">
+                    <table className="w-full">
+                        <thead>
+                            <tr className="border-b border-ui-30 text-left">
+                                {section.columns.map(column => (
+                                    <th className="p-2 whitespace-nowrap font-medium">
+                                        <div className="flex flex-row items-center flex-nowrap space-x-1">
+                                            {column.icon ? <Icon>{column.icon}</Icon> : null}
+                                            <div>{column.displayName}</div>
+                                        </div>
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {section.rows.map((row, i) => (
+                                <tr className={i % 2 === 0 ? undefined : "bg-ui-5"}>
+                                    {section.columns.map(column => {
+                                        const link = row.links?.[column.key];
+                                        return (
+                                            <td className="p-2 whitespace-nowrap text-sm text-type-20">
+                                                {link ? (
+                                                    <RouterLink to={panelRefHref(panelNavigation.pluginId, link)} onClick={(e) => panelNavigation.navigate(link, e)}>
+                                                        <Link>{row.vals[column.key] ?? null}</Link>
+                                                    </RouterLink>
+                                                ) : (
+                                                    row.vals[column.key] ?? null
+                                                )}
+                                            </td>
+                                        );
+                                    })}
+                                    {row.forms ? (
+                                        <td>
+                                            {row.forms.map(ref => {
+                                                const form = plugin.plugin.forms[ref.id];
+
+                                                return (
+                                                    <div className="inline-block m-1">
+                                                        <Button size="small" onClick={() => setActiveForm(ref)} iconLeading={form.icon}>{form.displayName}</Button>
+                                                    </div>
+                                                );
+                                            })}
+                                        </td>
+                                    ) : null}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+                {pagination ? (
+                    <div className="flex flex-row items-center justify-between">
+                        <div className="text-sm text-type-30">Showing rows {pagination.firstRow + 1}-{pagination.firstRow + section.rows.length} of {pagination.totalRows}</div>
+                        <div className="flex flex-row items-center">
+                            {(pagination.visiblePages[0] !== 1) ? (
+                                <>
+                                    <Icon className="text-type-60">more_horiz</Icon>
+                                    <div className="px-1" />
+                                </>
+                            ) : null}
+                            {pagination.visiblePages.map(page => (
+                                <Button onClick={() => {
+                                    panelNavigation.patchActiveSectionState(section.id, {
+                                        table: {
+                                            ...panelNavigation.activeState.sections[section.id]?.table,
+                                            offset: (page - 1) * pagination.rowsPerPage
+                                        }
+                                    });
+                                }} variant={page === pagination.activePage ? "primary" : "borderless"} size="small">{String(page)}</Button>
+                            ))}
+                            {(pagination.visiblePages[pagination.visiblePages.length - 1] !== pagination.totalPages) ? (
+                                <>
+                                    <div className="px-1" />
+                                    <Icon className="text-type-60">more_horiz</Icon>
+                                </>
+                            ) : null}
+                            <div className="px-4" />
+                            <TextInput onKeyDown={e => {
+                                const val = Number(e.currentTarget.value);
+                                if ((e.key === "Enter") && !isNaN(val) && (val >= 1) && (val <= pagination.totalPages)) {
+                                    panelNavigation.patchActiveSectionState(section.id, {
+                                        table: {
+                                            ...panelNavigation.activeState.sections[section.id]?.table,
+                                            offset: (val - 1) * pagination.rowsPerPage
+                                        }
+                                    });
+                                    e.currentTarget.value = "";
+                                }
+                            }} type="number" placeholder="Jump to" width={100} />
+                        </div>
+                    </div>
+                ) : null}
+            </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
index af483f0..f79aaae 100644
--- a/packages/webui/src/app/components/PanelSection/index.tsx
+++ b/packages/webui/src/app/components/PanelSection/index.tsx
@@ -5,7 +5,8 @@
 
 import PanelSectionProperties from "~/app/components/PanelSection/PanelSectionProperties";
 import PanelSectionTable from "~/app/components/PanelSection/PanelSectionTable";
-import PanelSectionRef from "~/app/components/PanelSection/PanelSectionRef";
+import PanelSectionPanel from "~/app/components/PanelSection/PanelSectionPanel";
+import PanelSectionForm from "~/app/components/PanelSection/PanelSectionForm";
 
 export default function PanelSection({ section }: { section: IrisPluginConduitPanelLayoutSection<IrisPluginConduit>; }) {
     if (section.type === "properties") {
@@ -16,9 +17,13 @@
         return (
             <PanelSectionTable section={section} />
         );
-    } else if (section.type === "ref") {
+    } else if (section.type === "panel") {
         return (
-            <PanelSectionRef section={section} />
+            <PanelSectionPanel section={section} />
+        );
+    } else  if (section.type === "form") {
+        return (
+            <PanelSectionForm section={section} />
         );
     } else {
         throw new Error("Unrecognized panel layout section type " + (section as any).type);
diff --git a/packages/webui/src/app/components/Shell.tsx b/packages/webui/src/app/components/Shell.tsx
index 62267db..f2e04ce 100644
--- a/packages/webui/src/app/components/Shell.tsx
+++ b/packages/webui/src/app/components/Shell.tsx
@@ -2,7 +2,7 @@
 // Copyright (c) jottocraft 2025
 
 import { Button, NavbarLayout, NavbarTitle, SidebarHeader, SidebarItem, SidebarItemGroup, SidebarItems, SidebarLayout, SidebarTitle, useThemeEngine } from "@ffxp/react-dom";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { Link, Outlet, useLocation, useParams, useSearchParams } from "react-router";
 
 import IRIS_SITE from "~/IRIS_SITE";
@@ -10,26 +10,15 @@
 import { isAtPanel, panelRefHref, usePanelNavigation } from "~/app/data/panels";
 import PanelNavigator from "~/app/components/PanelNavigator";
 import PanelBreadcrumbs from "~/app/components/PanelBreadcrumbs";
+import Loading from "~/app/components/Loading";
+import { useError } from "~/app/data/error";
+import ErrorScreen from "~/app/components/ErrorScreen";
 
 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={(
@@ -44,7 +33,7 @@
         )}
             right={(
                 <>
-                    <Button onClick={() => {
+                    <Button variant="borderless" onClick={() => {
                         if (window.confirm("Do you want to sign out?")) {
                             window.localStorage.removeItem("jwt");
                             window.location.reload();
@@ -88,6 +77,34 @@
 export default function Shell({ children }: { children?: React.ReactNode; }) {
     const location = useLocation();
     const plugins = usePlugins();
+    const error = useError();
+
+    const routerParams = useParams();
+    const [searchParams] = useSearchParams();
+
+    const { initialPluginId, initialRef } = useMemo((): {
+        initialPluginId?: string;
+        initialRef?: IrisWebuiPanelRef;
+    } => {
+        if (!routerParams.pluginId || !routerParams.panelId) return {};
+
+        const args: { [key: string]: string } = {};
+        for (const [k, v] of searchParams.entries()) args[k] = v;
+
+        return {
+            initialPluginId: routerParams.pluginId,
+            initialRef: {
+                id: routerParams.panelId,
+                args
+            }
+        }
+    }, []);
+
+    if (error) {
+        return (
+            <ErrorScreen />
+        );
+    }
 
     if (location.pathname === "/login") {
         return (
@@ -97,12 +114,14 @@
 
     if (!plugins) {
         return (
-            <p>Loading plugins...</p>
+            <Loading>
+                Loading plugins
+            </Loading>
         );
     }
 
     return (
-        <PanelNavigator>
+        <PanelNavigator initialPluginId={initialPluginId} initialRef={initialRef} root={true}>
             <ShellLayout>
                 {children}
             </ShellLayout>
diff --git a/packages/webui/src/app/data/error.tsx b/packages/webui/src/app/data/error.tsx
new file mode 100644
index 0000000..94e06db
--- /dev/null
+++ b/packages/webui/src/app/data/error.tsx
@@ -0,0 +1,19 @@
+// Iris
+// Copyright (c) jottocraft 2025
+
+import type { YggdrasilStatus } from "@jottocraft/yggdrasil";
+import { createContext, useContext } from "react";
+
+export const errorCtx = createContext<YggdrasilStatus<unknown> | string | null>(null);
+export function useError() {
+    return useContext(errorCtx);
+}
+
+export function ErrorProvider({ error, children }: { error?: YggdrasilStatus<unknown> | string | null; children?: React.ReactNode; }) {
+    if (!error) return children;
+    return (
+        <errorCtx.Provider value={error}>
+            {children}
+        </errorCtx.Provider>
+    );
+}
\ No newline at end of file
diff --git a/packages/webui/src/app/data/panels.ts b/packages/webui/src/app/data/panels.ts
index 26e99f0..1f03d36 100644
--- a/packages/webui/src/app/data/panels.ts
+++ b/packages/webui/src/app/data/panels.ts
@@ -14,7 +14,7 @@
     if (ref.args) {
         const linkParams = new URLSearchParams();
         for (const arg in ref.args) {
-            if (ref.args[arg]) linkParams.set(arg, ref.args[arg]);
+            if ((ref.args as { [key: string]: string; })[arg]) linkParams.set(arg, (ref.args as { [key: string]: string; })[arg]);
         }
         linkHref = linkHref + "?" + linkParams.toString();
     }
diff --git a/packages/webui/src/app/root.tsx b/packages/webui/src/app/root.tsx
index c96602f..a157f47 100644
--- a/packages/webui/src/app/root.tsx
+++ b/packages/webui/src/app/root.tsx
@@ -3,7 +3,7 @@
 
 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 { createConduitClientSideClient, YggdrasilStatus } from "@jottocraft/yggdrasil";
 import { useEffect, useState } from "react";
 import {
     isRouteErrorResponse,
@@ -20,6 +20,7 @@
 import Shell from "~/app/components/Shell";
 import { authContext, pluginContext } from "~/app/data/root";
 import IRIS_SITE from "~/IRIS_SITE";
+import { ErrorProvider } from "./data/error";
 
 export default function App() {
     const location = useLocation();
@@ -67,6 +68,7 @@
     }, [auth, location.pathname]);
 
     const [plugins, setPlugins] = useState<null | IrisPluginCtx>(null);
+    const [error, setError] = useState<null | YggdrasilStatus<unknown>>(null);
     useEffect(() => {
         if (!auth) return;
 
@@ -91,7 +93,12 @@
             }
         })).then(() => {
             setPlugins(plugins);
-        }).catch(e => { throw e; });
+            setError(null);
+        }).catch(e => {
+            if (!(e instanceof YggdrasilStatus)) throw e;
+            setPlugins(null);
+            setError(e);
+        });
     }, [auth]);
 
     return (
@@ -132,18 +139,20 @@
                         <Links />
                     </HeadWrapper>
                     <BodyWrapper>
-                        <authContext.Provider value={auth}>
-                            <pluginContext.Provider value={plugins}>
-                                <Shell>
-                                    <Outlet />
-                                </Shell>
-                            </pluginContext.Provider>
-                        </authContext.Provider>
+                        <ErrorProvider error={error}>
+                            <authContext.Provider value={auth}>
+                                <pluginContext.Provider value={plugins}>
+                                    <Shell>
+                                        <Outlet />
+                                    </Shell>
+                                </pluginContext.Provider>
+                            </authContext.Provider>
+                        </ErrorProvider>
                         <ScrollRestoration />
                         <Scripts />
                     </BodyWrapper>
                 </HTMLWrapper>
             </ThemeEngine>
-        </Root>
+        </Root >
     );
 }
\ No newline at end of file
diff --git a/packages/webui/src/app/routes/index.tsx b/packages/webui/src/app/routes/index.tsx
index 89f6ddd..85e5dd5 100644
--- a/packages/webui/src/app/routes/index.tsx
+++ b/packages/webui/src/app/routes/index.tsx
@@ -2,9 +2,5 @@
 // Copyright (c) jottocraft 2025
 
 export default function Home() {
-    return (
-        <div>
-            <p>Hello world!</p>
-        </div>
-    );
+    return null;
 }
\ No newline at end of file
diff --git a/packages/webui/src/app/routes/login.tsx b/packages/webui/src/app/routes/login.tsx
index f63ce03..79359ec 100644
--- a/packages/webui/src/app/routes/login.tsx
+++ b/packages/webui/src/app/routes/login.tsx
@@ -5,6 +5,9 @@
 import { useEffect, useState } from "react";
 
 import IRIS_SITE from "~/IRIS_SITE";
+import ErrorScreen from "~/app/components/ErrorScreen";
+import Loading from "~/app/components/Loading";
+import { ErrorProvider } from "~/app/data/error";
 
 export default function Login() {
     const [error, setError] = useState<null | string>(null);
@@ -54,15 +57,14 @@
     }, []);
 
     return (
-        <div>
+        <>
             {error ? (
-                <div>
-                    <h1>Authentication error</h1>
-                    <p>{error}</p>
-                </div>
+                <ErrorProvider error={"Authentication error: " + error}>
+                    <ErrorScreen />
+                </ErrorProvider>
             ) : (
-                <p>Signing in...</p>
+                <Loading>Signing in</Loading>
             )}
-        </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
deleted file mode 100644
index 1837210..0000000
--- a/packages/webui/src/app/routes/p/$.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-// 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
index 76e2f75..fdcc298 100644
--- a/packages/webui/src/app/routes/p/$pluginId/$panelId.tsx
+++ b/packages/webui/src/app/routes/p/$pluginId/$panelId.tsx
@@ -8,7 +8,7 @@
 
 export default function PanelRoute() {
     return (
-        <div className="py-12">
+        <div className="h-full py-12">
             <Panel />
         </div >
     );
diff --git a/packages/webui/src/webui.d.ts b/packages/webui/src/webui.d.ts
index 869b1fc..d17ec39 100644
--- a/packages/webui/src/webui.d.ts
+++ b/packages/webui/src/webui.d.ts
@@ -17,11 +17,13 @@
 declare type IrisWebuiPanelNavigationCtx = IrisWebuiPanelNavigationCtxActive | IrisWebuiPanelNavigationCtxInactive;
 
 declare type IrisWebuiPanelNavigationCtxCommon = {
+    root: boolean;
     startNavigation: (pluginId: string, ref: IrisWebuiPanelRef, e?: React.MouseEvent) => void;
 };
 
 declare type IrisWebuiPanelNavigationCtxActive = IrisWebuiPanelNavigationCtxCommon & {
     activeRef: IrisWebuiPanelRef;
+    activeState: import("@jottocraft/iris-sdk").IrisPluginConduitPanelState<import("@jottocraft/iris-sdk").IrisPluginConduit>;
     layout: null | import("@jottocraft/iris-sdk").IrisPluginConduitPanelLayout<import("@jottocraft/iris-sdk").IrisPluginConduit>;
     pluginId: string;
     breadcrumbs: IrisWebuiPanelBreadcrumb[];
@@ -29,6 +31,8 @@
     back: (e?: React.MouseEvent) => void;
     goToBreadcrumb: (index: number, e?: React.MouseEvent) => void;
     refreshLayout: () => void;
+    setActiveState: (state: import("@jottocraft/iris-sdk").IrisPluginConduitPanelState<import("@jottocraft/iris-sdk").IrisPluginConduit>) => void;
+    patchActiveSectionState: (sectionId: string, state: import("@jottocraft/iris-sdk").IrisPluginConduitPanelSectionState<import("@jottocraft/iris-sdk").IrisPluginConduit>) => void;
 };
 
 declare type IrisWebuiPanelNavigationCtxInactive = IrisWebuiPanelNavigationCtxCommon & {