diff --git a/src/elements/ReactHeaderAndContent.tsx b/src/elements/ReactHeaderAndContent.tsx
new file mode 100644
index 0000000..2412021
--- /dev/null
+++ b/src/elements/ReactHeaderAndContent.tsx
@@ -0,0 +1,19 @@
+import { JSX } from "preact";
+
+export type HeaderAndContentProps = {
+  title: string;
+  content: string;
+};
+
+export function HeaderAndContent(props: HeaderAndContentProps): JSX.Element {
+  return (
+    <tr>
+      <td>
+        <h5>{props.title}</h5>
+      </td>
+      <td>
+        <p>{props.content}</p>
+      </td>
+    </tr>
+  );
+}
diff --git a/src/pages/Access/Auth/userpass/UserPassUserView.ts b/src/pages/Access/Auth/userpass/UserPassUserView.ts
deleted file mode 100644
index 374943f..0000000
--- a/src/pages/Access/Auth/userpass/UserPassUserView.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { HeaderAndContent } from "../../../../elements/HeaderAndContent";
-import { Page } from "../../../../types/Page";
-import { getUserPassUser } from "../../../../api/auth/userpass/getUserPassUser";
-import { makeElement } from "z-makeelement";
-import { toStr } from "../../../../utils";
-import i18next from "i18next";
-
-export class UserPassUserViewPage extends Page {
-  constructor() {
-    super();
-  }
-  async goBack(): Promise<void> {
-    await this.router.changePage("USERPASS_USERS_LIST");
-  }
-
-  async render(): Promise<void> {
-    const pageContent = makeElement({
-      tag: "div",
-    });
-    await this.router.setPageContent(pageContent);
-
-    const buttonBoxElement = makeElement({
-      tag: "p",
-      children: [
-        makeElement({
-          tag: "button",
-          class: ["uk-button", "uk-button-danger"],
-          onclick: async () => {
-            await this.router.changePage("USERPASS_USER_DELETE");
-          },
-          text: i18next.t("userpass_user_view_delete_btn"),
-        }),
-        makeElement({
-          tag: "button",
-          class: ["uk-button", "uk-button-primary"],
-          onclick: async () => {
-            await this.router.changePage("USERPASS_USER_EDIT");
-          },
-          text: i18next.t("userpass_user_view_edit_btn"),
-        }),
-      ],
-    });
-    pageContent.appendChild(buttonBoxElement);
-
-    const contentElement = makeElement({
-      tag: "div",
-    });
-    pageContent.appendChild(contentElement);
-
-    const tableElement = makeElement({
-      tag: "table",
-      class: "uk-table",
-    });
-    contentElement.appendChild(tableElement);
-
-    const tableBody = makeElement({ tag: "tbody" });
-    tableElement.appendChild(tableBody);
-
-    const user = await getUserPassUser(this.state.authPath, this.state.userPassUser);
-
-    tableBody.appendChild(
-      HeaderAndContent(i18next.t("userpass_common_cidrs"), user.token_bound_cidrs.join()),
-    );
-    tableBody.appendChild(
-      HeaderAndContent(
-        i18next.t("userpass_common_exp_max_ttl"),
-        toStr(user.token_explicit_max_ttl),
-      ),
-    );
-    tableBody.appendChild(
-      HeaderAndContent(i18next.t("userpass_common_max_ttl"), toStr(user.token_max_ttl)),
-    );
-    tableBody.appendChild(
-      HeaderAndContent(
-        i18next.t("userpass_common_default_policy_attached"),
-        toStr(user.token_no_default_policy),
-      ),
-    );
-    tableBody.appendChild(
-      HeaderAndContent(i18next.t("userpass_common_max_token_uses"), toStr(user.token_num_uses)),
-    );
-    tableBody.appendChild(
-      HeaderAndContent(i18next.t("userpass_common_token_peroid"), toStr(user.token_period)),
-    );
-    tableBody.appendChild(
-      HeaderAndContent(i18next.t("userpass_common_policies"), user.token_policies.join()),
-    );
-    tableBody.appendChild(
-      HeaderAndContent(i18next.t("userpass_common_initial_ttl"), toStr(user.token_ttl)),
-    );
-    tableBody.appendChild(HeaderAndContent(i18next.t("userpass_common_type"), user.token_type));
-  }
-
-  get name(): string {
-    return i18next.t("userpass_user_view_title");
-  }
-}
diff --git a/src/pages/Access/Auth/userpass/UserPassUserView.tsx b/src/pages/Access/Auth/userpass/UserPassUserView.tsx
new file mode 100644
index 0000000..9a51caf
--- /dev/null
+++ b/src/pages/Access/Auth/userpass/UserPassUserView.tsx
@@ -0,0 +1,88 @@
+import { HeaderAndContent } from "../../../../elements/ReactHeaderAndContent";
+import { Page } from "../../../../types/Page";
+import { getUserPassUser } from "../../../../api/auth/userpass/getUserPassUser";
+import { render } from "preact";
+import { toStr } from "../../../../utils";
+import i18next from "i18next";
+
+export class UserPassUserViewPage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("USERPASS_USERS_LIST");
+  }
+
+  async render(): Promise<void> {
+    const user = await getUserPassUser(this.state.authPath, this.state.userPassUser);
+
+    render(
+      <div>
+        <p>
+          <button
+            class="uk-button uk-button-danger"
+            onClick={async () => {
+              await this.router.changePage("USERPASS_USER_DELETE");
+            }}
+          >
+            {i18next.t("userpass_user_view_delete_btn")}
+          </button>
+          <button
+            class="uk-button uk-button-primary"
+            onClick={async () => {
+              await this.router.changePage("USERPASS_USER_EDIT");
+            }}
+          >
+            {i18next.t("userpass_user_view_edit_btn")}
+          </button>
+        </p>
+        <table class="uk-table">
+          <tbody>
+            <HeaderAndContent
+              title={i18next.t("userpass_common_cidrs")}
+              content={user.token_bound_cidrs.join()}
+            />
+            <HeaderAndContent
+              title={i18next.t("userpass_common_exp_max_ttl")}
+              content={toStr(user.token_explicit_max_ttl)}
+            />
+            <HeaderAndContent
+              title={i18next.t("userpass_common_max_ttl")}
+              content={toStr(user.token_max_ttl)}
+            />
+            <HeaderAndContent
+              title={i18next.t("userpass_common_default_policy_attached")}
+              content={toStr(user.token_no_default_policy)}
+            />
+            <HeaderAndContent
+              title={i18next.t("userpass_common_max_token_uses")}
+              content={toStr(user.token_num_uses)}
+            />
+            <HeaderAndContent
+              title={i18next.t("userpass_common_token_peroid")}
+              content={toStr(user.token_period)}
+            />
+            <HeaderAndContent
+              title={i18next.t("userpass_common_policies")}
+              content={user.token_policies.join()}
+            />
+            <HeaderAndContent
+              title={i18next.t("userpass_common_initial_ttl")}
+              content={toStr(user.token_ttl)}
+            />
+            <HeaderAndContent
+              title={i18next.t("userpass_common_type")}
+              content={toStr(user.token_type)}
+            />
+          </tbody>
+        </table>
+      </div>,
+      this.router.pageContentElement,
+    );
+  }
+
+  get name(): string {
+    return i18next.t("userpass_user_view_title");
+  }
+}
+1;