diff --git a/ts/routes/card-info/[cardId]/[previousId]/+page.svelte b/ts/routes/card-info/[cardId]/[previousId]/+page.svelte
new file mode 100644
index 000000000..c04cf483b
--- /dev/null
+++ b/ts/routes/card-info/[cardId]/[previousId]/+page.svelte
@@ -0,0 +1,40 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { page } from "$app/stores";
+
+    import CardInfo from "../../CardInfo.svelte";
+    import type { PageData } from "./$types";
+    import { goto } from "$app/navigation";
+
+    export let data: PageData;
+
+    const showRevlog = $page.url.searchParams.get("revlog") !== "0";
+
+    globalThis.anki ||= {};
+    globalThis.anki.updateCardInfos = async (card_id: string): Promise<void> => {
+        const path = `/card-info/${card_id}`;
+        return goto(path).catch(() => {
+            window.location.href = path;
+        });
+    };
+</script>
+
+<center>
+    {#if data.currentInfo}
+        <h3>Current</h3>
+        <CardInfo stats={data.currentInfo} {showRevlog} />
+    {/if}
+    {#if data.previousInfo}
+        <h3>Previous</h3>
+        <CardInfo stats={data.previousInfo} {showRevlog} />
+    {/if}
+</center>
+
+<style>
+    :global(body) {
+        font-size: 80%;
+    }
+</style>
diff --git a/ts/routes/card-info/[cardId]/[previousId]/+page.ts b/ts/routes/card-info/[cardId]/[previousId]/+page.ts
new file mode 100644
index 000000000..d60bf84b9
--- /dev/null
+++ b/ts/routes/card-info/[cardId]/[previousId]/+page.ts
@@ -0,0 +1,22 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import { cardStats } from "@generated/backend";
+
+import type { PageLoad } from "./$types";
+
+function optionalBigInt(x: any): bigint | null {
+    try {
+        return BigInt(x);
+    } catch (e) {
+        return null;
+    }
+}
+
+export const load = (async ({ params }) => {
+    const currentId = optionalBigInt(params.cardId);
+    const currentInfo = currentId !== null ? await cardStats({ cid: currentId }) : null;
+    const previousId = optionalBigInt(params.previousId);
+    const previousInfo = previousId !== null ? await cardStats({ cid: previousId }) : null;
+    return { currentInfo, previousInfo };
+}) satisfies PageLoad;
diff --git a/ts/routes/card-info/card-info-base.scss b/ts/routes/card-info/card-info-base.scss
deleted file mode 100644
index 96e199d3c..000000000
--- a/ts/routes/card-info/card-info-base.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "../lib/sass/base";
diff --git a/ts/routes/card-info/index.ts b/ts/routes/card-info/index.ts
deleted file mode 100644
index 22a7f13a8..000000000
--- a/ts/routes/card-info/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-import "./card-info-base.scss";
-
-import { ModuleName, setupI18n } from "@tslib/i18n";
-import { checkNightMode } from "@tslib/nightmode";
-
-import CardInfo from "./CardInfo.svelte";
-
-const i18n = setupI18n({
-    modules: [ModuleName.CARD_STATS, ModuleName.SCHEDULING, ModuleName.STATISTICS],
-});
-
-export async function setupCardInfo(
-    target: HTMLElement,
-    props = {},
-): Promise<CardInfo> {
-    checkNightMode();
-    await i18n;
-
-    return new CardInfo({ target, props });
-}
-
-if (window.location.hash.startsWith("#test")) {
-    // use #testXXXX where XXXX is card ID to test
-    const cardId = parseInt(window.location.hash.substring(0, "#test".length), 10);
-    setupCardInfo(document.body).then(
-        (cardInfo: CardInfo): Promise<void> => cardInfo.updateStats(BigInt(cardId)),
-    );
-}