diff --git a/src/views/pds.tsx b/src/views/pds.tsx
index 0afe97a..2ad7b5f 100644
--- a/src/views/pds.tsx
+++ b/src/views/pds.tsx
@@ -7,14 +7,12 @@ import { A, useLocation, useParams } from "@solidjs/router";
 import { createResource, createSignal, For, Show } from "solid-js";
 import { Button } from "../components/button";
 import DidHoverCard from "../components/hover-card/did";
-import { Modal } from "../components/modal";
 import { setPDS } from "../components/navbar";
-import Tooltip from "../components/tooltip";
 import { localDateFromTimestamp } from "../utils/date";
 
 const LIMIT = 1000;
 
-const PdsView = () => {
+export const PdsView = () => {
   const params = useParams();
   const location = useLocation();
   const [version, setVersion] = createSignal<string>();
@@ -54,80 +52,37 @@ const PdsView = () => {
   const [repos, setRepos] = createSignal<ComAtprotoSyncListRepos.Repo[]>();
 
   const RepoCard = (repo: ComAtprotoSyncListRepos.Repo) => {
-    const [openInfo, setOpenInfo] = createSignal(false);
-
     return (
-      <div class="flex items-center gap-0.5">
-        <DidHoverCard
-          did={repo.did}
-          class="min-w-0 grow"
-          trigger={
-            <A
-              href={`/at://${repo.did}`}
-              class="block truncate rounded-md p-0.5 font-mono hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
-            >
-              {repo.did}
-            </A>
-          }
-        />
-        <Show when={!repo.active}>
-          <Tooltip text={repo.status ?? "Unknown status"}>
-            <span class="iconify lucide--unplug text-red-500 dark:text-red-400"></span>
-          </Tooltip>
-        </Show>
-        <button
-          onclick={() => setOpenInfo(true)}
-          class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
-        >
-          <span class="iconify lucide--info text-neutral-600 dark:text-neutral-400"></span>
-        </button>
-        <Modal
-          open={openInfo()}
-          onClose={() => setOpenInfo(false)}
-          contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-max max-w-[90vw] rounded-lg border-[0.5px] border-neutral-300 bg-white p-3 shadow-md sm:max-w-xl dark:border-neutral-700"
-        >
-          <div class="mb-2 flex items-center justify-between gap-4">
-            <p class="truncate font-semibold">{repo.did}</p>
-            <button
-              onclick={() => setOpenInfo(false)}
-              class="flex shrink-0 items-center rounded-md p-1.5 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 active:bg-neutral-200 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200 dark:active:bg-neutral-600"
-            >
-              <span class="iconify lucide--x"></span>
-            </button>
+      <A
+        href={`/at://${repo.did}`}
+        class="dark:hover:bg-dark-200 flex min-w-0 items-start gap-2 rounded p-1.5 text-left hover:bg-neutral-200/70"
+      >
+        <div class="flex min-w-0 flex-1 flex-col">
+          <div class="flex 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 lucide--alert-triangle"></span>
+                {repo.status ?? "inactive"}
+              </span>
+            </Show>
           </div>
-          <div class="grid grid-cols-[auto_1fr] items-baseline gap-x-1 gap-y-0.5 text-sm">
-            <span class="font-medium">Head:</span>
-            <span class="wrap-anywhere text-neutral-700 dark:text-neutral-300">{repo.head}</span>
-
+          <div class="flex flex-col gap-x-2 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)}>
-              <span class="font-medium">Rev:</span>
               <div class="flex gap-1">
-                <span class="text-neutral-700 dark:text-neutral-300">{repo.rev}</span>
-                <span class="text-neutral-600 dark:text-neutral-400">·</span>
-                <span class="text-neutral-600 dark:text-neutral-400">
-                  {localDateFromTimestamp(TID.parse(repo.rev).timestamp / 1000)}
-                </span>
+                <span>{repo.rev}</span>
+                <span>•</span>
+                <span>{localDateFromTimestamp(TID.parse(repo.rev).timestamp / 1000)}</span>
               </div>
             </Show>
-
-            <Show when={repo.active !== undefined}>
-              <span class="font-medium">Active:</span>
-              <span
-                class={`iconify self-center ${
-                  repo.active ?
-                    "lucide--check text-green-500 dark:text-green-400"
-                  : "lucide--x text-red-500 dark:text-red-400"
-                }`}
-              ></span>
-            </Show>
-
-            <Show when={repo.status}>
-              <span class="font-medium">Status:</span>
-              <span class="text-neutral-700 dark:text-neutral-300">{repo.status}</span>
-            </Show>
           </div>
-        </Modal>
-      </div>
+        </div>
+      </A>
     );
   };
 
@@ -160,7 +115,7 @@ const PdsView = () => {
             <Tab tab="firehose" label="Firehose" />
           </div>
           <Show when={!location.hash || location.hash === "#repos"}>
-            <div class="flex flex-col divide-y-[0.5px] divide-neutral-300 pb-20 dark:divide-neutral-700">
+            <div class="-mx-1.5 flex flex-col pb-20">
               <For each={repos()}>{(repo) => <RepoCard {...repo} />}</For>
             </div>
           </Show>
@@ -274,5 +229,3 @@ const PdsView = () => {
     </>
   );
 };
-
-export { PdsView };