diff --git a/package.json b/package.json
index 9988a30..5113888 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,6 @@
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2",
     "z-makeelement": "^1.0.3",
-    "z-pagerouter": "^1.0.1"
+    "z-pagerouter": "^1.0.2"
   }
 }
diff --git a/src/pages/Secrets/KeyValue/KeyValueDelete.tsx b/src/pages/Secrets/KeyValue/KeyValueDelete.tsx
index c7714a6..b09a3c0 100644
--- a/src/pages/Secrets/KeyValue/KeyValueDelete.tsx
+++ b/src/pages/Secrets/KeyValue/KeyValueDelete.tsx
@@ -41,8 +41,11 @@ export class KeyValueDeletePage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("kv_delete_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("kv_delete_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/KeyValue/KeyValueNew.tsx b/src/pages/Secrets/KeyValue/KeyValueNew.tsx
index 4c1ed98..42d0a31 100644
--- a/src/pages/Secrets/KeyValue/KeyValueNew.tsx
+++ b/src/pages/Secrets/KeyValue/KeyValueNew.tsx
@@ -61,8 +61,11 @@ export class KeyValueNewPage extends Page {
     }
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("kv_new_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("kv_new_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/KeyValue/KeyValueSecret.tsx b/src/pages/Secrets/KeyValue/KeyValueSecret.tsx
index 72cfc3e..f059932 100644
--- a/src/pages/Secrets/KeyValue/KeyValueSecret.tsx
+++ b/src/pages/Secrets/KeyValue/KeyValueSecret.tsx
@@ -162,8 +162,8 @@ export class KeyValueSecretPage extends Page {
     document.getElementById("loadingText").remove();
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router);
+  async renderPageTitle(): Promise<void> {
+    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/KeyValue/KeyValueSecretsEdit.ts b/src/pages/Secrets/KeyValue/KeyValueSecretsEdit.tsx
similarity index 91%
rename from src/pages/Secrets/KeyValue/KeyValueSecretsEdit.ts
rename to src/pages/Secrets/KeyValue/KeyValueSecretsEdit.tsx
index bfb7fac..64629f0 100644
--- a/src/pages/Secrets/KeyValue/KeyValueSecretsEdit.ts
+++ b/src/pages/Secrets/KeyValue/KeyValueSecretsEdit.tsx
@@ -4,6 +4,7 @@ import { SecretTitleElement } from "../SecretTitleElement";
 import { createOrUpdateSecret } from "../../../api/kv/createOrUpdateSecret";
 import { getSecret } from "../../../api/kv/getSecret";
 import { makeElement } from "z-makeelement";
+import { render } from "preact";
 import { setErrorText } from "../../../pageUtils";
 import { sortedObjectMap, verifyJSONString } from "../../../utils";
 import i18next from "i18next";
@@ -79,8 +80,11 @@ export class KeyValueSecretEditPage extends Page {
     };
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("kv_sec_edit_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("kv_sec_edit_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/KeyValue/KeyValueVersions.tsx b/src/pages/Secrets/KeyValue/KeyValueVersions.tsx
index f3f85fc..e8e43be 100644
--- a/src/pages/Secrets/KeyValue/KeyValueVersions.tsx
+++ b/src/pages/Secrets/KeyValue/KeyValueVersions.tsx
@@ -42,8 +42,11 @@ export class KeyValueVersionsPage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("kv_sec_versions_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("kv_sec_versions_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/KeyValue/KeyValueView.tsx b/src/pages/Secrets/KeyValue/KeyValueView.tsx
index a4cf720..f4b550d 100644
--- a/src/pages/Secrets/KeyValue/KeyValueView.tsx
+++ b/src/pages/Secrets/KeyValue/KeyValueView.tsx
@@ -89,8 +89,8 @@ export class KeyValueViewPage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router);
+  async renderPageTitle(): Promise<void> {
+    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/SecretTitleElement.ts b/src/pages/Secrets/SecretTitleElement.tsx
similarity index 55%
rename from src/pages/Secrets/SecretTitleElement.ts
rename to src/pages/Secrets/SecretTitleElement.tsx
index 70f577a..66d590c 100644
--- a/src/pages/Secrets/SecretTitleElement.ts
+++ b/src/pages/Secrets/SecretTitleElement.tsx
@@ -1,6 +1,6 @@
+import { JSX } from "preact/jsx-runtime";
 import { PageRouter } from "z-pagerouter";
 import { PageState } from "../../PageState";
-import { makeElement } from "z-makeelement";
 
 function currentTitleSecretText(state: PageState): string {
   let secretItemText = state.secretItem;
@@ -8,15 +8,20 @@ function currentTitleSecretText(state: PageState): string {
   return secretItemText;
 }
 
-export async function SecretTitleElement(router: PageRouter, suffix = ""): Promise<HTMLElement> {
+type SecretTitleElementProps = {
+  router: PageRouter;
+  suffix?: string;
+};
+
+export function SecretTitleElement(props: SecretTitleElementProps): JSX.Element {
+  const router = props.router;
+  const suffix = props.suffix || "";
   const state = router.state as PageState;
-  const titleElement = makeElement({
-    tag: "div",
-    children: [
-      makeElement({
-        tag: "a",
-        text: state.baseMount + " ",
-        onclick: async () => {
+
+  return (
+    <div>
+      <a
+        onClick={async () => {
           state.secretPath = [];
           state.secretItem = "";
           state.secretVersion = null;
@@ -28,32 +33,25 @@ export async function SecretTitleElement(router: PageRouter, suffix = ""): Promi
           } else if (state.secretMountType == "transit") {
             await router.changePage("TRANSIT_VIEW");
           }
-        },
-      }),
-      ...state.secretPath.map((secretPath, index, secretPaths) => {
-        return makeElement({
-          tag: "a",
-          text: secretPath + " ",
-          onclick: async () => {
+        }}
+      >
+        {state.baseMount + " "}
+      </a>
+      {...state.secretPath.map((secretPath, index, secretPaths) => (
+        <a
+          onClick={async () => {
             state.secretVersion = null;
             if (state.secretMountType.startsWith("kv")) {
               state.secretPath = secretPaths.slice(0, index + 1);
               await router.changePage("KEY_VALUE_VIEW");
             }
-          },
-        });
-      }),
-      makeElement({
-        tag: "span",
-        condition: state.secretItem.length != 0,
-        text: currentTitleSecretText(state),
-      }),
-      makeElement({
-        tag: "span",
-        condition: suffix.length != 0,
-        text: suffix,
-      }),
-    ],
-  });
-  return titleElement;
+          }}
+        >
+          {secretPath + " "}
+        </a>
+      ))}
+      {state.secretItem.length != 0 && <span>{currentTitleSecretText(state)}</span>}
+      {suffix.length != 0 && <span>{suffix}</span>}
+    </div>
+  );
 }
diff --git a/src/pages/Secrets/TOTP/TOTPDelete.tsx b/src/pages/Secrets/TOTP/TOTPDelete.tsx
index f17a4ea..6cb83de 100644
--- a/src/pages/Secrets/TOTP/TOTPDelete.tsx
+++ b/src/pages/Secrets/TOTP/TOTPDelete.tsx
@@ -35,8 +35,11 @@ export class TOTPDeletePage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("totp_delete_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("totp_delete_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/TOTP/TOTPNew.tsx b/src/pages/Secrets/TOTP/TOTPNew.tsx
index 4b8f089..c71cad2 100644
--- a/src/pages/Secrets/TOTP/TOTPNew.tsx
+++ b/src/pages/Secrets/TOTP/TOTPNew.tsx
@@ -81,8 +81,11 @@ export class TOTPNewPage extends Page {
     }
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("totp_new_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("totp_new_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/TOTP/TOTPView.tsx b/src/pages/Secrets/TOTP/TOTPView.tsx
index bb3d995..57698fa 100644
--- a/src/pages/Secrets/TOTP/TOTPView.tsx
+++ b/src/pages/Secrets/TOTP/TOTPView.tsx
@@ -114,8 +114,8 @@ export class TOTPViewPage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router);
+  async renderPageTitle(): Promise<void> {
+    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/Transit/NewTransitKey.tsx b/src/pages/Secrets/Transit/NewTransitKey.tsx
index bec49ee..b4a7690 100644
--- a/src/pages/Secrets/Transit/NewTransitKey.tsx
+++ b/src/pages/Secrets/Transit/NewTransitKey.tsx
@@ -76,8 +76,11 @@ export class NewTransitKeyPage extends Page {
     }
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("transit_new_key_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("transit_new_key_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/Transit/TransitDecrypt.tsx b/src/pages/Secrets/Transit/TransitDecrypt.tsx
index b10dd59..7fb2ea9 100644
--- a/src/pages/Secrets/Transit/TransitDecrypt.tsx
+++ b/src/pages/Secrets/Transit/TransitDecrypt.tsx
@@ -82,8 +82,11 @@ export class TransitDecryptPage extends Page {
     }
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("transit_decrypt_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("transit_decrypt_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/Transit/TransitEncrypt.tsx b/src/pages/Secrets/Transit/TransitEncrypt.tsx
index b93f383..05c3381 100644
--- a/src/pages/Secrets/Transit/TransitEncrypt.tsx
+++ b/src/pages/Secrets/Transit/TransitEncrypt.tsx
@@ -79,8 +79,11 @@ export class TransitEncryptPage extends Page {
     }
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("transit_encrypt_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("transit_encrypt_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/Transit/TransitRewrap.tsx b/src/pages/Secrets/Transit/TransitRewrap.tsx
index dc166f2..8146664 100644
--- a/src/pages/Secrets/Transit/TransitRewrap.tsx
+++ b/src/pages/Secrets/Transit/TransitRewrap.tsx
@@ -94,8 +94,11 @@ export class TransitRewrapPage extends Page {
     }
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("transit_rewrap_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("transit_rewrap_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/Transit/TransitView.tsx b/src/pages/Secrets/Transit/TransitView.tsx
index 46280eb..05884f5 100644
--- a/src/pages/Secrets/Transit/TransitView.tsx
+++ b/src/pages/Secrets/Transit/TransitView.tsx
@@ -97,8 +97,8 @@ export class TransitViewPage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router);
+  async renderPageTitle(): Promise<void> {
+    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
   }
 
   get name(): string {
diff --git a/src/pages/Secrets/Transit/TransitViewSecret.tsx b/src/pages/Secrets/Transit/TransitViewSecret.tsx
index 2b9ec47..debaa9c 100644
--- a/src/pages/Secrets/Transit/TransitViewSecret.tsx
+++ b/src/pages/Secrets/Transit/TransitViewSecret.tsx
@@ -51,8 +51,8 @@ export class TransitViewSecretPage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router);
+  async renderPageTitle(): Promise<void> {
+    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
   }
 
   get name(): string {
diff --git a/src/types/Page.ts b/src/types/Page.ts
index 2a745f9..1c9a02a 100644
--- a/src/types/Page.ts
+++ b/src/types/Page.ts
@@ -13,8 +13,8 @@ export class Page {
   get name(): string {
     return "Page";
   }
-  async getPageTitle(): Promise<Element | string> {
-    return this.name;
+  async renderPageTitle(): Promise<void> {
+    this.router.pageTitleElement.innerText = this.name;
   }
   async goBack(): Promise<void> {
     await this.router.changePage("HOME");