diff --git a/package.json b/package.json
index 1e8d764..158db4a 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "@solidjs/router": "^0.15.4",
     "@takumi-rs/image-response": "^0.72.0",
     "@takumi-rs/wasm": "^0.72.0",
+    "@tanstack/solid-virtual": "^3.13.22",
     "codemirror": "^6.0.2",
     "solid-js": "^1.9.11"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6294439..8c5070b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,9 @@ importers:
       '@takumi-rs/wasm':
         specifier: ^0.72.0
         version: 0.72.0
+      '@tanstack/solid-virtual':
+        specifier: ^3.13.22
+        version: 3.13.22(solid-js@1.9.11)
       codemirror:
         specifier: ^6.0.2
         version: 6.0.2
@@ -1017,6 +1020,14 @@ packages:
   '@takumi-rs/wasm@0.72.0':
     resolution: {integrity: sha512-5IoekEovpjzpoHd5LM4hRLRgRwW8RdFdF9TR2kmysB1rJF34z0ynIC/Fr0yhraxvFIP0fCzdinz14YzyTq6nuQ==}
 
+  '@tanstack/solid-virtual@3.13.22':
+    resolution: {integrity: sha512-HoFRbuNfMz4IckIJAQ9RY8uJfT28AjL040cmwBZW8c1dD+VJVKRL0leZo90bU7BK4Mnhq6vt8801BZjyrY8Ffg==}
+    peerDependencies:
+      solid-js: ^1.3.0
+
+  '@tanstack/virtual-core@3.13.22':
+    resolution: {integrity: sha512-isuUGKsc5TAPDoHSbWTbl1SCil54zOS2MiWz/9GCWHPUQOvNTQx8qJEWC7UWR0lShhbK0Lmkcf0SZYxvch7G3g==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -2440,6 +2451,13 @@ snapshots:
 
   '@takumi-rs/wasm@0.72.0': {}
 
+  '@tanstack/solid-virtual@3.13.22(solid-js@1.9.11)':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.22
+      solid-js: 1.9.11
+
+  '@tanstack/virtual-core@3.13.22': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.29.0
diff --git a/src/views/pds.tsx b/src/views/pds.tsx
index 6ad0a2a..5748bd6 100644
--- a/src/views/pds.tsx
+++ b/src/views/pds.tsx
@@ -3,6 +3,7 @@ import { Client, simpleFetchHandler } from "@atcute/client";
 import { InferXRPCBodyOutput } from "@atcute/lexicons";
 import * as TID from "@atcute/tid";
 import { A, useLocation, useParams } from "@solidjs/router";
+import { createWindowVirtualizer } from "@tanstack/solid-virtual";
 import { createResource, createSignal, For, Show } from "solid-js";
 import { Button } from "../components/button";
 import DidHoverCard from "../components/hover-card/did";
@@ -12,6 +13,93 @@ import { localDateFromTimestamp } from "../utils/date";
 
 const LIMIT = 1000;
 
+const RepoCard = (props: {
+  repo: ComAtprotoSyncListRepos.Repo;
+  expanded: boolean;
+  onToggle: () => void;
+}) => {
+  const expanded = () => props.expanded;
+
+  return (
+    <div
+      classList={{
+        "group rounded-md border-[0.5px]": true,
+        "dark:hover:bg-dark-200 border-transparent hover:bg-neutral-200/50": !expanded(),
+        "dark:bg-dark-300 border-neutral-200 bg-neutral-50 shadow-sm transition-[background-color,border-color,box-shadow] duration-200 dark:border-neutral-700 dark:shadow-dark-700":
+          expanded(),
+      }}
+    >
+      <div class="flex min-w-0 flex-1 items-center">
+        <button
+          type="button"
+          onclick={() => props.onToggle()}
+          class="flex min-w-0 flex-1 items-center gap-2 p-1.5"
+        >
+          <span
+            classList={{
+              "mt-0.5 flex shrink-0 items-center text-neutral-400 transition-transform duration-200 dark:text-neutral-500": true,
+              "rotate-90": expanded(),
+            }}
+          >
+            <span class="iconify lucide--chevron-right"></span>
+          </span>
+          <div class="flex min-w-0 flex-1 items-center gap-x-2 text-sm">
+            <span class="min-w-0 truncate font-mono" onclick={(e) => e.stopPropagation()}>
+              <DidHoverCard newTab did={props.repo.did} />
+            </span>
+            <Show when={!props.repo.active}>
+              <span class="flex shrink-0 items-center gap-1 text-red-500 dark:text-red-400">
+                <span
+                  class={`iconify ${
+                    props.repo.status === "deactivated" ? "lucide--user-round-x"
+                    : props.repo.status === "takendown" ? "lucide--shield-ban"
+                    : "lucide--unplug"
+                  }`}
+                ></span>
+                {props.repo.status ?? "inactive"}
+              </span>
+            </Show>
+          </div>
+        </button>
+        <Show when={expanded() || canHover}>
+          <A
+            href={`/at://${props.repo.did}`}
+            classList={{
+              "flex shrink-0 items-center p-2 transition-colors duration-200": true,
+              "invisible group-hover:visible not-hover:text-neutral-500 not-hover:dark:text-neutral-400":
+                !expanded(),
+            }}
+          >
+            <span class="iconify lucide--arrow-right"></span>
+          </A>
+        </Show>
+      </div>
+      <div
+        classList={{
+          "grid transition-[grid-template-rows] duration-200 ease-out": true,
+          "grid-rows-[1fr]": expanded(),
+          "grid-rows-[0fr]": !expanded(),
+        }}
+      >
+        <div class="overflow-hidden">
+          <div class="ml-7.5 flex flex-col gap-1.5 pb-1.5 font-mono text-xs text-neutral-500 dark:text-neutral-400">
+            <Show when={props.repo.head}>
+              <span class="truncate">{props.repo.head}</span>
+            </Show>
+            <Show when={TID.validate(props.repo.rev)}>
+              <div class="flex gap-1 text-neutral-700 dark:text-neutral-300">
+                <span>{props.repo.rev}</span>
+                <span>•</span>
+                <span>{localDateFromTimestamp(TID.parse(props.repo.rev).timestamp / 1000)}</span>
+              </div>
+            </Show>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const PdsView = () => {
   const params = useParams();
   const location = useLocation();
@@ -36,9 +124,10 @@ export const PdsView = () => {
     else setServerInfos(res.data);
   };
 
+  getVersion();
+  describeServer();
+
   const fetchRepos = async () => {
-    getVersion();
-    describeServer();
     const res = await rpc.get("com.atproto.sync.listRepos", {
       params: { limit: LIMIT, cursor: cursor() },
     });
@@ -51,71 +140,19 @@ export const PdsView = () => {
   const [response, { refetch }] = createResource(fetchRepos);
   const [repos, setRepos] = createSignal<ComAtprotoSyncListRepos.Repo[]>();
 
-  const RepoCard = (repo: ComAtprotoSyncListRepos.Repo) => {
-    const [expanded, setExpanded] = createSignal(false);
-    const [hovering, setHovering] = createSignal(false);
+  const [expandedIndex, setExpandedIndex] = createSignal<number | null>(null);
 
-    return (
-      <div class="flex flex-col gap-1">
-        <div
-          class="dark:hover:bg-dark-200 flex min-w-0 flex-1 items-center rounded hover:bg-neutral-200/70"
-          onMouseEnter={() => canHover && setHovering(true)}
-          onMouseLeave={() => canHover && setHovering(false)}
-        >
-          <button
-            type="button"
-            onclick={() => setExpanded(!expanded())}
-            class="flex min-w-0 flex-1 items-center gap-2 p-1.5"
-          >
-            <span class="mt-0.5 flex shrink-0 items-center text-neutral-400 dark:text-neutral-500">
-              {expanded() ?
-                <span class="iconify lucide--chevron-down"></span>
-              : <span class="iconify lucide--chevron-right"></span>}
-            </span>
-            <div class="flex min-w-0 flex-1 items-center gap-x-2 text-sm">
-              <span class="min-w-0 truncate font-mono" onclick={(e) => e.stopPropagation()}>
-                <DidHoverCard newTab did={repo.did} />
-              </span>
-              <Show when={!repo.active}>
-                <span class="flex shrink-0 items-center gap-1 text-red-500 dark:text-red-400">
-                  <span
-                    class={`iconify ${
-                      repo.status === "deactivated" ? "lucide--user-round-x"
-                      : repo.status === "takendown" ? "lucide--shield-ban"
-                      : "lucide--unplug"
-                    }`}
-                  ></span>
-                  {repo.status ?? "inactive"}
-                </span>
-              </Show>
-            </div>
-          </button>
-          <Show when={expanded() || hovering()}>
-            <A
-              href={`/at://${repo.did}`}
-              class="flex shrink-0 items-center p-2 transition-colors not-hover:text-neutral-500 not-hover:dark:text-neutral-400"
-            >
-              <span class="iconify lucide--arrow-right"></span>
-            </A>
-          </Show>
-        </div>
-        <Show when={expanded()}>
-          <div class="mb-2 ml-7.5 flex flex-col gap-1 font-mono text-xs text-neutral-500 dark:text-neutral-400">
-            <Show when={repo.head}>
-              <span class="truncate">{repo.head}</span>
-            </Show>
-            <Show when={TID.validate(repo.rev)}>
-              <div class="flex gap-1 text-neutral-700 dark:text-neutral-300">
-                <span>{repo.rev}</span>
-                <span>•</span>
-                <span>{localDateFromTimestamp(TID.parse(repo.rev).timestamp / 1000)}</span>
-              </div>
-            </Show>
-          </div>
-        </Show>
-      </div>
-    );
-  };
+  let containerRef: HTMLDivElement | undefined;
+  const virtualizer = createWindowVirtualizer({
+    get count() {
+      return repos()?.length ?? 0;
+    },
+    estimateSize: () => 32,
+    overscan: 10,
+    get scrollMargin() {
+      return containerRef?.offsetTop ?? 0;
+    },
+  });
 
   const Tab = (props: { tab: "repos" | "info" | "firehose"; label: string }) => (
     <A
@@ -147,8 +184,36 @@ export const PdsView = () => {
             <Tab tab="firehose" label="Firehose" />
           </div>
           <Show when={!location.hash || location.hash === "#repos"}>
-            <div class="-mx-2 flex flex-col pb-12">
-              <For each={repos()}>{(repo) => <RepoCard {...repo} />}</For>
+            <div
+              class="-mx-2 mb-9"
+              ref={containerRef}
+              style={{ height: `${virtualizer.getTotalSize()}px`, position: "relative" }}
+            >
+              <For each={virtualizer.getVirtualItems()}>
+                {(virtualItem) => (
+                  <div
+                    data-index={virtualItem.index}
+                    ref={(el) => virtualizer.measureElement(el)}
+                    classList={{ "z-10": expandedIndex() === virtualItem.index }}
+                    style={{
+                      position: "absolute",
+                      top: `${virtualItem.start - virtualizer.options.scrollMargin}px`,
+                      left: 0,
+                      width: "100%",
+                    }}
+                  >
+                    <RepoCard
+                      repo={repos()![virtualItem.index]}
+                      expanded={expandedIndex() === virtualItem.index}
+                      onToggle={() =>
+                        setExpandedIndex(
+                          expandedIndex() === virtualItem.index ? null : virtualItem.index,
+                        )
+                      }
+                    />
+                  </div>
+                )}
+              </For>
             </div>
           </Show>
           <div class="flex flex-col gap-3">
@@ -256,7 +321,10 @@ export const PdsView = () => {
               </p>
               <Show when={cursor()}>
                 <Button
-                  onClick={() => refetch()}
+                  onClick={() => {
+                    setExpandedIndex(null);
+                    refetch();
+                  }}
                   disabled={response.loading}
                   classList={{ "w-20 h-7.5 justify-center": true }}
                 >