diff --git a/components/CreateRootUser.tsx b/components/CreateRootUser.tsx
new file mode 100644
index 0000000..ee9c81c
--- /dev/null
+++ b/components/CreateRootUser.tsx
@@ -0,0 +1,22 @@
+import { Component, ContextType } from "preact";
+import { GlobalCtx } from "./GlobalContext.tsx";
+import { MdOutlinedTextField } from "../server/dmodule.ts";
+
+type Props = {
+    show: boolean;
+};
+
+export default class CreateRootUser extends Component<Props> {
+    static contextType = GlobalCtx;
+    declare context: ContextType<typeof GlobalCtx>;
+    render() {
+        if (!MdOutlinedTextField.value) return null;
+        if (!this.props.show) return null;
+        const OutlinedTextField = MdOutlinedTextField.value;
+        return (
+            <div>
+                <OutlinedTextField />
+            </div>
+        );
+    }
+}
diff --git a/import_map.json b/import_map.json
index ee2da5d..a6dbca7 100644
--- a/import_map.json
+++ b/import_map.json
@@ -23,6 +23,8 @@
         "mime": "https://esm.sh/mime@3.0.0",
         "ua-parser-js": "https://esm.sh/ua-parser-js@1.0.35",
         "pbkdf2-hmac": "https://esm.sh/pbkdf2-hmac@1.2.1",
-        "randomstring": "https://esm.sh/randomstring@1.3.0"
+        "randomstring": "https://esm.sh/randomstring@1.3.0",
+        "@material/web/": "https://esm.sh/@material/web@1.0.0-pre.12/",
+        "@lit-labs/react/": "https://esm.sh/@lit-labs/react@1.2.0/"
     }
 }
diff --git a/islands/Container.tsx b/islands/Container.tsx
index c5baea4..a9a64e0 100644
--- a/islands/Container.tsx
+++ b/islands/Container.tsx
@@ -15,6 +15,8 @@ import { parse_int } from "../server/parse.ts";
 import { addDarkModeListener, detect_darkmode } from "../server/dark.ts";
 import { registeServiceWorker } from "../server/sw.ts";
 import { initCfg } from "../server/cfg.ts";
+import { load_dmodule } from "../server/dmodule.ts";
+import CreateRootUser from "../components/CreateRootUser.tsx";
 
 export type ContainerProps = {
     i18n: I18NMap;
@@ -86,6 +88,9 @@ export default class Container extends Component<ContainerProps> {
                     }
                 }
             });
+            load_dmodule().catch((e) => {
+                console.error(e);
+            });
         }, []);
         return (
             <div>
@@ -158,6 +163,7 @@ export default class Container extends Component<ContainerProps> {
                         show={state === "#/task_manager"}
                     />
                     <NewTask show={state === "#/task_manager/new"} />
+                    <CreateRootUser show={state === "#/create_root_user"} />
                 </div>
             </div>
         );
diff --git a/server/dmodule.ts b/server/dmodule.ts
new file mode 100644
index 0000000..810bee0
--- /dev/null
+++ b/server/dmodule.ts
@@ -0,0 +1,11 @@
+import { signal } from "@preact/signals";
+import type _MdOutlinedTextField from "./md3/md-outlined-text-field.ts";
+
+export const MdOutlinedTextField = signal<
+    typeof _MdOutlinedTextField | undefined
+>(undefined);
+
+export async function load_dmodule() {
+    const m = await import("./md3/md-outlined-text-field.ts");
+    MdOutlinedTextField.value = m.default;
+}
diff --git a/server/md3/md-outlined-text-field.ts b/server/md3/md-outlined-text-field.ts
new file mode 100644
index 0000000..d205346
--- /dev/null
+++ b/server/md3/md-outlined-text-field.ts
@@ -0,0 +1,12 @@
+import { MdOutlinedTextField as _MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js?target=es2022";
+import { createComponent } from "@lit-labs/react/?target=es2022";
+import * as Preact from "preact/compat";
+
+const MdOutlinedTextField = createComponent({
+    tagName: "md-outlined-text-field",
+    elementClass: _MdOutlinedTextField,
+    // @ts-ignore Checked
+    react: Preact,
+});
+
+export default MdOutlinedTextField;