diff --git a/src/pages/Access/Auth/userpass/UserPassUserNew.ts b/src/pages/Access/Auth/userpass/UserPassUserNew.ts
deleted file mode 100644
index 586438e..0000000
--- a/src/pages/Access/Auth/userpass/UserPassUserNew.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Form } from "../../../../elements/Form";
-import { Margin } from "../../../../elements/Margin";
-import { Page } from "../../../../types/Page";
-import { UserType } from "../../../../api/types/userpass/user";
-import { createOrUpdateUserPassUser } from "../../../../api/auth/userpass/createOrUpdateUserPassUser";
-import { makeElement } from "z-makeelement";
-import { setErrorText } from "../../../../pageUtils";
-import i18next from "i18next";
-
-export class UserPassUserNewPage extends Page {
-  constructor() {
-    super();
-  }
-  async goBack(): Promise<void> {
-    await this.router.changePage("USERPASS_USERS_LIST");
-  }
-
-  async render(): Promise<void> {
-    await this.router.setPageContent(
-      Form(
-        [
-          Margin(
-            makeElement({
-              tag: "input",
-              class: "uk-input uk-form-width-large",
-              attributes: {
-                name: "username",
-                placeholder: i18next.t("userpass_common_username"),
-              },
-            }),
-          ),
-          Margin(
-            makeElement({
-              tag: "input",
-              class: "uk-input uk-form-width-large",
-              attributes: {
-                type: "password",
-                name: "password",
-                placeholder: i18next.t("userpass_common_password"),
-              },
-            }),
-          ),
-          makeElement({
-            tag: "p",
-            id: "errorText",
-            class: "uk-text-danger",
-          }),
-          makeElement({
-            tag: "button",
-            class: ["uk-button", "uk-button-primary"],
-            text: i18next.t("userpass_user_new_create_btn"),
-            attributes: {
-              type: "submit",
-            },
-          }),
-        ],
-        async (form: HTMLFormElement) => {
-          const data = new FormData(form);
-          const apiData: Partial<UserType> = {
-            password: data.get("password") as string,
-          };
-          try {
-            await createOrUpdateUserPassUser(
-              this.state.authPath,
-              data.get("username") as string,
-              apiData,
-            );
-            await this.router.changePage("USERPASS_USERS_LIST");
-          } catch (e: unknown) {
-            const error = e as Error;
-            setErrorText(error.message);
-          }
-        },
-      ),
-    );
-  }
-
-  get name(): string {
-    return i18next.t("userpass_user_new_title");
-  }
-}
diff --git a/src/pages/Access/Auth/userpass/UserPassUserNew.tsx b/src/pages/Access/Auth/userpass/UserPassUserNew.tsx
new file mode 100644
index 0000000..e2b6003
--- /dev/null
+++ b/src/pages/Access/Auth/userpass/UserPassUserNew.tsx
@@ -0,0 +1,69 @@
+import { Form } from "../../../../elements/ReactForm";
+import { Margin } from "../../../../elements/ReactMargin";
+import { MarginInline } from "../../../../elements/ReactMarginInline";
+import { Page } from "../../../../types/Page";
+import { UserType } from "../../../../api/types/userpass/user";
+import { createOrUpdateUserPassUser } from "../../../../api/auth/userpass/createOrUpdateUserPassUser";
+import { render } from "preact";
+import { setErrorText } from "../../../../pageUtils";
+import i18next from "i18next";
+
+export class UserPassUserNewPage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("USERPASS_USERS_LIST");
+  }
+
+  async render(): Promise<void> {
+    render(
+      <Form onSubmit={(data) => this.onSubmit(data)}>
+        <Margin>
+          <input
+            class="uk-input uk-form-width-large"
+            name="username"
+            type="text"
+            placeholder={i18next.t("userpass_common_username")}
+          />
+        </Margin>
+        <Margin>
+          <input
+            class="uk-input uk-form-width-large"
+            name="password"
+            type="password"
+            placeholder={i18next.t("userpass_common_password")}
+          />
+        </Margin>
+        <p class="uk-text-danger" id="errorText" />
+        <MarginInline>
+          <button class="uk-button uk-button-primary" type="submit">
+            {i18next.t("userpass_user_new_create_btn")}
+          </button>
+        </MarginInline>
+      </Form>,
+      this.router.pageContentElement,
+    );
+  }
+
+  async onSubmit(data: FormData): Promise<void> {
+    const apiData: Partial<UserType> = {
+      password: data.get("password") as string,
+    };
+    try {
+      await createOrUpdateUserPassUser(
+        this.state.authPath,
+        data.get("username") as string,
+        apiData,
+      );
+      await this.router.changePage("USERPASS_USERS_LIST");
+    } catch (e: unknown) {
+      const error = e as Error;
+      setErrorText(error.message);
+    }
+  }
+
+  get name(): string {
+    return i18next.t("userpass_user_new_title");
+  }
+}