diff --git a/lib/challenge/metarefresh/metarefresh_templ.go b/lib/challenge/metarefresh/metarefresh_templ.go
index 0c7a8371..048260bd 100644
--- a/lib/challenge/metarefresh/metarefresh_templ.go
+++ b/lib/challenge/metarefresh/metarefresh_templ.go
@@ -93,9 +93,9 @@ func page(redir string, difficulty int, loc *localization.SimpleLocalizer) templ
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d; url=%s", difficulty, redir))
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d; url=%s", difficulty+1, redir))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `metarefresh.templ`, Line: 16, Col: 83}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `metarefresh.templ`, Line: 16, Col: 85}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
diff --git a/lib/challenge/preact/build.sh b/lib/challenge/preact/build.sh
index c7f2e3fc..ebd6d596 100755
--- a/lib/challenge/preact/build.sh
+++ b/lib/challenge/preact/build.sh
@@ -40,9 +40,9 @@ for the JavaScript code in this page.
 
 mkdir -p static/js
 
-for file in js/*.jsx; do
+for file in js/*.tsx; do
   filename="${file##*/}"       # Extracts "app.jsx" from "./js/app.jsx"
-  output="${filename%.jsx}.js"  # Changes "app.jsx" to "app.js"
+  output="${filename%.tsx}.js"  # Changes "app.jsx" to "app.js"
   echo $output
 
   esbuild "${file}" --minify --bundle --outfile=static/"${output}" --banner:js="${LICENSE}"
diff --git a/lib/challenge/preact/js/app.jsx b/lib/challenge/preact/js/app.jsx
deleted file mode 100644
index 4aafae99..00000000
--- a/lib/challenge/preact/js/app.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { render, h, Fragment } from 'preact';
-import { useState, useEffect } from 'preact/hooks';
-import { g, j, u, x } from "./xeact.js";
-import { Sha256 } from '@aws-crypto/sha256-js';
-
-/** @jsx h */
-/** @jsxFrag Fragment */
-
-function toHexString(arr) {
-  return Array.from(arr)
-    .map((c) => c.toString(16).padStart(2, "0"))
-    .join("");
-}
-
-const App = () => {
-  const [state, setState] = useState(null);
-  const [imageURL, setImageURL] = useState(null);
-  const [passed, setPassed] = useState(false);
-  const [challenge, setChallenge] = useState(null);
-
-  useEffect(() => {
-    setState(j("preact_info"));
-  });
-
-  useEffect(() => {
-    setImageURL(state.pensive_url);
-    const hash = new Sha256('');
-    hash.update(state.challenge);
-    setChallenge(toHexString(hash.digestSync()));
-  }, [state]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setPassed(true);
-    }, state.difficulty * 125);
-
-    return () => clearTimeout(timer);
-  }, [challenge]);
-
-  useEffect(() => {
-    window.location.href = u(state.redir, {
-      result: challenge,
-    });
-  }, [passed]);
-
-  return (
-    <>
-      {imageURL !== null && (
-        <img src={imageURL} style="width:100%;max-width:256px;" />
-      )}
-      {state !== null && (
-        <>
-          <p id="status">{state.loading_message}</p>
-          <p>{state.connection_security_message}</p>
-        </>
-      )}
-    </>
-  );
-};
-
-x(g("app"));
-render(<App />, g("app"));
\ No newline at end of file
diff --git a/lib/challenge/preact/js/app.tsx b/lib/challenge/preact/js/app.tsx
new file mode 100644
index 00000000..efa90bdb
--- /dev/null
+++ b/lib/challenge/preact/js/app.tsx
@@ -0,0 +1,87 @@
+import { render, h, Fragment } from "preact";
+import { useState, useEffect } from "preact/hooks";
+import { g, j, r, u, x } from "./xeact.js";
+import { Sha256 } from "@aws-crypto/sha256-js";
+
+/** @jsx h */
+/** @jsxFrag Fragment */
+
+function toHexString(arr: Uint8Array) {
+  return Array.from(arr)
+    .map((c) => c.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+interface PreactInfo {
+  redir: string;
+  challenge: string;
+  difficulty: number;
+  connection_security_message: string;
+  loading_message: string;
+  pensive_url: string;
+}
+
+const App = () => {
+  const [state, setState] = useState<PreactInfo>();
+  const [imageURL, setImageURL] = useState<string | null>(null);
+  const [passed, setPassed] = useState<boolean>(false);
+  const [challenge, setChallenge] = useState<string | null>(null);
+
+  useEffect(() => {
+    setState(j("preact_info"));
+  });
+
+  useEffect(() => {
+    if (state === undefined) {
+      return;
+    }
+
+    setImageURL(state?.pensive_url);
+    const hash = new Sha256("");
+    hash.update(state.challenge);
+    setChallenge(toHexString(hash.digestSync()));
+  }, [state]);
+
+  useEffect(() => {
+    if (state === undefined) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setPassed(true);
+    }, state?.difficulty * 125);
+
+    return () => clearTimeout(timer);
+  }, [challenge]);
+
+  useEffect(() => {
+    if (state === undefined) {
+      return;
+    }
+
+    if (challenge === null) {
+      return;
+    }
+
+    window.location.href = u(state.redir, {
+      result: challenge,
+    });
+  }, [passed]);
+
+  return (
+    <>
+      {imageURL !== null && (
+        <img src={imageURL} style={{ width: "100%", maxWidth: "256px" }} />
+      )}
+      {state !== undefined && (
+        <>
+          <p id="status">{state.loading_message}</p>
+          <p>{state.connection_security_message}</p>
+        </>
+      )}
+    </>
+  );
+};
+
+x(g("app"));
+render(<App />, g("app"));