diff --git a/src/pages/Secrets/NewSecretsEngine.ts b/src/pages/Secrets/NewSecretsEngine.ts
deleted file mode 100644
index deb70dd..0000000
--- a/src/pages/Secrets/NewSecretsEngine.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Page } from "../../types/Page";
-import { Tile } from "../../elements/Tile";
-import { makeElement } from "z-makeelement";
-import i18next from "i18next";
-
-export class NewSecretsEnginePage extends Page {
-  constructor() {
-    super();
-  }
-
-  async render(): Promise<void> {
-    await this.router.setPageContent(
-      makeElement({
-        tag: "div",
-        class: "uk-child-width-1-1@s uk-child-width-1-2@m uk-grid-small uk-grid-match",
-        attributes: { "uk-grid": "" },
-        children: [
-          Tile({
-            title: i18next.t("new_secrets_engine_kv_title"),
-            description: i18next.t("new_secrets_engine_kv_description"),
-            onclick: async () => {
-              await this.router.changePage("NEW_KV_ENGINE");
-            },
-          }),
-          Tile({
-            title: i18next.t("new_secrets_engine_totp_title"),
-            description: i18next.t("new_secrets_engine_totp_description"),
-            onclick: async () => {
-              await this.router.changePage("NEW_TOTP_ENGINE");
-            },
-          }),
-          Tile({
-            title: i18next.t("new_secrets_engine_transit_title"),
-            description: i18next.t("new_secrets_engine_transit_description"),
-            onclick: async () => {
-              await this.router.changePage("NEW_TRANSIT_ENGINE");
-            },
-          }),
-        ],
-      }),
-    );
-  }
-
-  get name(): string {
-    return i18next.t("new_secrets_engine_title");
-  }
-}
diff --git a/src/pages/Secrets/NewSecretsEngine.tsx b/src/pages/Secrets/NewSecretsEngine.tsx
new file mode 100644
index 0000000..79d87b1
--- /dev/null
+++ b/src/pages/Secrets/NewSecretsEngine.tsx
@@ -0,0 +1,43 @@
+import { Page } from "../../types/Page";
+import { Tile } from "../../elements/ReactTile";
+import { render } from "preact";
+import i18next from "i18next";
+
+export class NewSecretsEnginePage extends Page {
+  constructor() {
+    super();
+  }
+
+  async render(): Promise<void> {
+    render(
+      <div class="uk-child-width-1-1@s uk-child-width-1-2@m uk-grid-small uk-grid-match" uk-grid>
+        <Tile
+          title={i18next.t("new_secrets_engine_kv_title")}
+          description={i18next.t("new_secrets_engine_kv_description")}
+          onclick={async () => {
+            await this.router.changePage("NEW_KV_ENGINE");
+          }}
+        />
+        <Tile
+          title={i18next.t("new_secrets_engine_totp_title")}
+          description={i18next.t("new_secrets_engine_totp_description")}
+          onclick={async () => {
+            await this.router.changePage("NEW_TOTP_ENGINE");
+          }}
+        />
+        <Tile
+          title={i18next.t("new_secrets_engine_transit_title")}
+          description={i18next.t("new_secrets_engine_transit_description")}
+          onclick={async () => {
+            await this.router.changePage("NEW_TRANSIT_ENGINE");
+          }}
+        />
+      </div>,
+      this.router.pageContentElement,
+    );
+  }
+
+  get name(): string {
+    return i18next.t("new_secrets_engine_title");
+  }
+}