diff --git a/.gitignore b/.gitignore
index a71f80f..f97a376 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
+.pnpm-store/
 dist
 .env
 .DS_Store
diff --git a/src/views/collection.tsx b/src/views/collection.tsx
index 5309d93..af94135 100644
--- a/src/views/collection.tsx
+++ b/src/views/collection.tsx
@@ -3,8 +3,18 @@ import { Client } from "@atcute/client";
 import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons";
 import * as TID from "@atcute/tid";
 import { A, type RouteSectionProps, useParams, useSearchParams } from "@solidjs/router";
-import { createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
+import {
+  createMemo,
+  createResource,
+  createSignal,
+  For,
+  type JSX,
+  onCleanup,
+  onMount,
+  Show,
+} from "solid-js";
 import { createStore } from "solid-js/store";
+import { Portal } from "solid-js/web";
 import { agent } from "../auth/state";
 import { Button } from "../components/button.jsx";
 import HoverCard from "../components/hover-card/base";
@@ -15,7 +25,6 @@ import { addNotification, removeNotification } from "../components/notification.
 import { PermissionButton } from "../components/permission-button.jsx";
 import { Spinner } from "../components/spinner.jsx";
 import Tooltip from "../components/tooltip.jsx";
-import { canHover } from "../layout.jsx";
 import { createLatch } from "../lib/create-latch.js";
 import { useFilterShortcut } from "../lib/keyboard.js";
 import { useRepo } from "../lib/repo-context.jsx";
@@ -31,23 +40,96 @@ interface AtprotoRecord {
 }
 
 const DEFAULT_LIMIT = 100;
+const PREVIEW_VALUE_MAX_LENGTH = 200;
+const PREVIEW_FIELD_OPTION_MAX_DEPTH = 2;
+
+const getRecordValue = (record: AtprotoRecord) => record.record.value as JSONType;
+
+const isRecordObject = (value: unknown): value is Record<string, JSONType> =>
+  value !== null && typeof value === "object" && !Array.isArray(value);
+
+const getSearchParam = (param: string | string[] | undefined) =>
+  Array.isArray(param) ? param[0] : (param ?? "");
+
+const getPathValue = (value: JSONType, path: string) => {
+  let current: JSONType | undefined = value;
+
+  for (const segment of path.split(".")) {
+    if (!segment) return;
+
+    if (Array.isArray(current)) {
+      const index = Number(segment);
+      if (!Number.isInteger(index) || index < 0 || index >= current.length) return;
+      current = current[index];
+    } else if (isRecordObject(current)) {
+      if (!Object.hasOwn(current, segment)) return;
+      current = current[segment];
+    } else return;
+  }
+
+  return current;
+};
+
+const addPreviewFieldOptions = (value: JSONType, fields: Set<string>, path = "", depth = 1) => {
+  if (!isRecordObject(value) || depth > PREVIEW_FIELD_OPTION_MAX_DEPTH) return;
+
+  for (const key of Object.keys(value)) {
+    if (key === "$type") continue;
+
+    const fieldPath = path ? `${path}.${key}` : key;
+    fields.add(fieldPath);
+    addPreviewFieldOptions(value[key], fields, fieldPath, depth + 1);
+  }
+};
+
+const formatPreviewValue = (value: JSONType | undefined) => {
+  if (value === undefined) return;
+
+  const str =
+    typeof value === "string" ? JSON.stringify(value)
+    : typeof value === "number" || typeof value === "boolean" || value === null ? String(value)
+    : JSON.stringify(value);
+
+  if (str.length <= PREVIEW_VALUE_MAX_LENGTH) return str;
+
+  return `${str.slice(0, PREVIEW_VALUE_MAX_LENGTH)}...`;
+};
+
+const RecordLink = (props: { record: AtprotoRecord; previewField?: string }) => {
+  const previewValue = () => {
+    const field = props.previewField;
+    const value = getRecordValue(props.record);
+    if (!field) return;
+    return formatPreviewValue(getPathValue(value, field));
+  };
 
-const RecordLink = (props: { record: AtprotoRecord }) => {
   return (
     <HoverCard
-      class="flex w-full min-w-0 items-baseline rounded px-1 py-0.5"
+      class="flex w-full min-w-0 flex-col rounded px-1 py-0.5"
       trigger={
         <>
-          <span class="max-w-full shrink-0 truncate text-sm text-blue-500 dark:text-blue-400">
-            {props.record.rkey}
-          </span>
-          <span class="ml-1 truncate text-xs text-neutral-500 dark:text-neutral-400" dir="rtl">
-            {props.record.cid}
-          </span>
-          <Show when={props.record.timestamp && props.record.timestamp <= Date.now()}>
-            <span class="ml-1 shrink-0 text-xs">
-              {localDateFromTimestamp(props.record.timestamp!)}
+          <span class="flex w-full min-w-0 items-baseline">
+            <span class="max-w-full shrink-0 truncate text-sm text-blue-500 dark:text-blue-400">
+              {props.record.rkey}
             </span>
+            <span class="ml-1 truncate text-xs text-neutral-400 dark:text-neutral-500" dir="rtl">
+              {props.record.cid}
+            </span>
+            <Show when={props.record.timestamp && props.record.timestamp <= Date.now()}>
+              <span class="ml-1 shrink-0 text-xs text-neutral-500 dark:text-neutral-400">
+                {localDateFromTimestamp(props.record.timestamp!)}
+              </span>
+            </Show>
+          </span>
+          <Show when={previewValue()}>
+            {(preview) => (
+              <span class="flex w-full min-w-0 items-baseline gap-1 text-xs">
+                <span class="shrink-0 text-neutral-500 dark:text-neutral-400">
+                  {props.previewField}:
+                </span>
+                <span class="min-w-0 truncate">{preview()}</span>
+              </span>
+            )}
           </Show>
         </>
       }
@@ -63,6 +145,138 @@ const RecordLink = (props: { record: AtprotoRecord }) => {
   );
 };
 
+const PreviewFieldMenu = (props: {
+  value: string;
+  options: string[];
+  onChange: (field: string) => void;
+}) => {
+  const [open, setOpen] = createSignal(false);
+  const [menu, setMenu] = createSignal<HTMLDivElement>();
+  const [button, setButton] = createSignal<HTMLButtonElement>();
+  const [buttonRect, setButtonRect] = createSignal<DOMRect>();
+
+  const updatePosition = () => {
+    const rect = button()?.getBoundingClientRect();
+    if (rect) setButtonRect(rect);
+  };
+
+  const menuStyle = (): JSX.CSSProperties | undefined => {
+    const rect = buttonRect();
+    if (!rect) return;
+
+    const menuWidth = Math.min(260, window.innerWidth - 16);
+    const left = Math.min(Math.max(rect.left, 8), window.innerWidth - menuWidth - 8);
+
+    return {
+      position: "fixed",
+      top: `${rect.top - 4}px`,
+      left: `${left}px`,
+      width: `${menuWidth}px`,
+      transform: "translateY(-100%)",
+    };
+  };
+
+  const closeOnOutsideClick = (event: MouseEvent) => {
+    const target = event.target as Node;
+    if (!button()?.contains(target) && !menu()?.contains(target)) setOpen(false);
+  };
+
+  const selectField = (field: string) => {
+    props.onChange(field);
+    setOpen(false);
+  };
+
+  onMount(() => {
+    window.addEventListener("click", closeOnOutsideClick);
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+  });
+
+  onCleanup(() => {
+    window.removeEventListener("click", closeOnOutsideClick);
+    window.removeEventListener("scroll", updatePosition, true);
+    window.removeEventListener("resize", updatePosition);
+  });
+
+  return (
+    <>
+      <button
+        type="button"
+        ref={setButton}
+        class="dark:bg-dark-300 dark:hover:bg-dark-200 dark:active:bg-dark-100 flex max-w-44 min-w-0 items-center gap-1 rounded-md border border-neutral-200 bg-neutral-50 px-2.5 py-1.5 text-xs text-neutral-700 transition-colors select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:text-neutral-300"
+        classList={{
+          "text-blue-500! dark:text-blue-400! border-blue-500! dark:border-blue-400!":
+            !!props.value,
+        }}
+        onClick={() => {
+          updatePosition();
+          setOpen(!open());
+        }}
+      >
+        <span class="min-w-0 truncate">{props.value ? `Preview: ${props.value}` : "Preview"}</span>
+        <span class="iconify lucide--chevron-down shrink-0 text-[10px]"></span>
+      </button>
+      <Show when={open()}>
+        <Portal>
+          <div
+            ref={setMenu}
+            style={menuStyle()}
+            class="dark:bg-dark-300 dark:shadow-dark-700 z-50 flex max-h-80 flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 text-xs shadow-md dark:border-neutral-700"
+          >
+            <button
+              type="button"
+              class="flex items-center gap-2 rounded-md p-1.5 text-left hover:bg-neutral-200/50 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+              onClick={() => selectField("")}
+            >
+              <span
+                class="iconify shrink-0"
+                classList={{
+                  "iconify lucide--check text-blue-500 dark:text-blue-400": !props.value,
+                  "lucide--minus text-neutral-400 dark:text-neutral-500": !!props.value,
+                }}
+              ></span>
+              <span>None</span>
+            </button>
+            <Show when={props.options.length}>
+              <div class="my-1 h-[0.5px] bg-neutral-300 dark:bg-neutral-600" />
+              <div class="flex max-h-42 flex-col overflow-y-auto">
+                <For each={props.options}>
+                  {(field) => (
+                    <button
+                      type="button"
+                      class="flex items-center gap-2 rounded-md p-1.5 text-left hover:bg-neutral-200/50 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+                      onClick={() => selectField(field)}
+                    >
+                      <span
+                        class="iconify shrink-0"
+                        classList={{
+                          "lucide--check text-blue-500 dark:text-blue-400": props.value === field,
+                          "lucide--minus text-transparent": props.value !== field,
+                        }}
+                      ></span>
+                      <span class="min-w-0 truncate">{field}</span>
+                    </button>
+                  )}
+                </For>
+              </div>
+            </Show>
+            <input
+              type="text"
+              spellcheck={false}
+              autocapitalize="off"
+              autocomplete="off"
+              class="dark:bg-dark-100 mt-2 rounded-md bg-white px-2 py-1 outline-1 outline-neutral-200 select-none placeholder:font-sans placeholder:text-xs focus:outline-neutral-400 dark:outline-neutral-600 dark:focus:outline-neutral-400"
+              placeholder="custom path"
+              value={props.value}
+              onInput={(e) => props.onChange(e.currentTarget.value)}
+            />
+          </div>
+        </Portal>
+      </Show>
+    </>
+  );
+};
+
 export const CollectionLayout = (props: RouteSectionProps) => {
   const params = useParams();
   const hasChild = () => !!params.rkey;
@@ -88,6 +302,7 @@ const CollectionView = () => {
   const [batchDelete, setBatchDelete] = createSignal(false);
   const [lastSelected, setLastSelected] = createSignal<number>();
   const [reverse, setReverse] = createSignal(searchParams.reverse === "true");
+  const previewField = () => getSearchParam(searchParams.preview);
   const limit = () => {
     const limitParam =
       Array.isArray(searchParams.limit) ? searchParams.limit[0] : searchParams.limit;
@@ -148,6 +363,21 @@ const CollectionView = () => {
     ),
   );
 
+  const previewFieldOptions = createMemo(() => {
+    const fields = new Set<string>();
+
+    for (const record of records) {
+      addPreviewFieldOptions(getRecordValue(record), fields);
+    }
+
+    return [...fields].sort((a, b) => a.localeCompare(b));
+  });
+
+  const updatePreviewField = (field: string) => {
+    const nextField = field.trim();
+    setSearchParams({ preview: nextField || undefined }, { replace: true });
+  };
+
   const deleteRecords = async () => {
     const recsToDel = records.filter((record) => record.toDelete);
     let writes: Array<
@@ -321,7 +551,7 @@ const CollectionView = () => {
 
           {/* Record list */}
           <Show when={!lexicon.showSchema()}>
-            <div class="flex w-full max-w-full flex-col px-1 pb-20 font-mono">
+            <div class="flex w-full max-w-full flex-col px-1 pb-32 font-mono">
               <Show
                 when={filteredRecords().length > 0}
                 fallback={
@@ -352,7 +582,7 @@ const CollectionView = () => {
                               setRecords(index(), "toDelete", !record.toDelete);
                             }}
                           >
-                            <RecordLink record={record} />
+                            <RecordLink record={record} previewField={previewField()} />
                           </div>
                         </Show>
                         <Show when={!batchDelete()}>
@@ -360,7 +590,7 @@ const CollectionView = () => {
                             href={`/at://${did}/${params.collection}/${record.rkey}`}
                             class="rounded select-none hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
                           >
-                            <RecordLink record={record} />
+                            <RecordLink record={record} previewField={previewField()} />
                           </A>
                         </Show>
                       </>
@@ -400,34 +630,36 @@ const CollectionView = () => {
         {/* Fixed bottom panel */}
         <Show when={!lexicon.showSchema() && records.length > 1}>
           <div class="dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 border-t border-neutral-200 bg-neutral-100 px-3 pt-3 pb-6 dark:border-neutral-700">
-            {/* Filter */}
-            <div
-              class="dark:bg-dark-200 flex w-full max-w-lg cursor-text items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 dark:border-neutral-700"
-              onClick={(e) => {
-                const input = e.currentTarget.querySelector("input");
-                if (e.target !== input) input?.focus();
-              }}
-            >
-              <span class="iconify lucide--filter text-neutral-500 dark:text-neutral-400"></span>
-              <input
-                ref={filterInputRef}
-                type="text"
-                spellcheck={false}
-                autocapitalize="off"
-                autocomplete="off"
-                class="grow py-2 select-none placeholder:text-sm focus:outline-none"
-                placeholder="Filter records..."
-                onInput={(e) => setFilter(e.currentTarget.value)}
+            <div class="flex w-full max-w-lg items-center gap-2">
+              {/* Filter */}
+              <div
+                class="dark:bg-dark-200 flex min-w-0 grow cursor-text items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2 text-sm dark:border-neutral-700"
+                onClick={(e) => {
+                  const input = e.currentTarget.querySelector("input");
+                  if (e.target !== input) input?.focus();
+                }}
+              >
+                <span class="iconify lucide--filter text-neutral-500 dark:text-neutral-400"></span>
+                <input
+                  ref={filterInputRef}
+                  type="text"
+                  spellcheck={false}
+                  autocapitalize="off"
+                  autocomplete="off"
+                  class="min-w-0 grow py-1 select-none placeholder:text-xs focus:outline-none"
+                  placeholder="Filter records..."
+                  onInput={(e) => setFilter(e.currentTarget.value)}
+                />
+              </div>
+              <PreviewFieldMenu
+                value={previewField()}
+                options={previewFieldOptions()}
+                onChange={updatePreviewField}
               />
-              <Show when={canHover && !filter()}>
-                <kbd class="rounded border border-neutral-200 bg-neutral-50 px-1.5 py-0.5 font-mono text-xs text-neutral-400 select-none dark:border-neutral-600 dark:bg-neutral-700">
-                  /
-                </kbd>
-              </Show>
             </div>
 
             {/* Pagination */}
-            <div class="flex min-h-7.5 w-full max-w-lg items-center justify-between">
+            <div class="flex min-h-7.5 w-full max-w-lg items-center justify-between gap-2">
               <Button
                 onClick={() => {
                   const newReverse = !reverse();
@@ -449,7 +681,7 @@ const CollectionView = () => {
               </Button>
 
               {/* Record count */}
-              <div>
+              <div class="shrink-0 text-sm">
                 <Show when={batchDelete()}>
                   <span>{records.filter((rec) => rec.toDelete).length}</span>
                   <span>/</span>
diff --git a/src/views/labels.tsx b/src/views/labels.tsx
index d320fb7..90ab787 100644
--- a/src/views/labels.tsx
+++ b/src/views/labels.tsx
@@ -9,7 +9,6 @@ import DidHoverCard from "../components/hover-card/did.jsx";
 import RecordHoverCard from "../components/hover-card/record.jsx";
 import { TagInput } from "../components/tag-input.jsx";
 import { TextInput } from "../components/text-input.jsx";
-import { canHover } from "../layout.jsx";
 import { getPDS, labelerCache, resolveHandle } from "../lib/api.js";
 import { useFilterShortcut } from "../lib/keyboard.js";
 import { localDateFromTimestamp } from "../utils/date.js";
@@ -278,7 +277,7 @@ export const LabelView = () => {
         <Show when={labels().length > 1}>
           <div class="dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 border-t border-neutral-200 bg-neutral-100 px-3 pt-3 pb-6 dark:border-neutral-700">
             <div
-              class="dark:bg-dark-200 flex w-full max-w-lg cursor-text items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 dark:border-neutral-700"
+              class="dark:bg-dark-200 flex w-full max-w-lg cursor-text items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2 text-sm dark:border-neutral-700"
               onClick={(e) => {
                 const input = e.currentTarget.querySelector("input");
                 if (e.target !== input) input?.focus();
@@ -291,16 +290,11 @@ export const LabelView = () => {
                 spellcheck={false}
                 autocapitalize="off"
                 autocomplete="off"
-                class="grow py-2 select-none placeholder:text-sm focus:outline-none"
+                class="grow py-1.5 select-none placeholder:text-xs focus:outline-none"
                 placeholder="Filter labels... (* for partial, -exclude)"
                 value={filter()}
                 onInput={(e) => setFilter(e.currentTarget.value)}
               />
-              <Show when={canHover && !filter()}>
-                <kbd class="rounded border border-neutral-200 bg-neutral-50 px-1.5 py-0.5 font-mono text-xs text-neutral-400 select-none dark:border-neutral-600 dark:bg-neutral-700">
-                  /
-                </kbd>
-              </Show>
             </div>
 
             <div class="flex min-h-7.5 w-full max-w-lg items-center justify-between">
diff --git a/src/views/repo/index.tsx b/src/views/repo/index.tsx
index d9a82f1..bd680fc 100644
--- a/src/views/repo/index.tsx
+++ b/src/views/repo/index.tsx
@@ -574,7 +574,7 @@ const RepoView = () => {
         <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>
           <div class="dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 border-t border-neutral-200 bg-neutral-100 px-3 pt-3 pb-6 dark:border-neutral-700">
             <div
-              class="dark:bg-dark-200 flex w-full max-w-lg cursor-text items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 dark:border-neutral-700"
+              class="dark:bg-dark-200 flex w-full max-w-lg cursor-text items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2 text-sm dark:border-neutral-700"
               onClick={(e) => {
                 const input = e.currentTarget.querySelector("input");
                 if (e.target !== input) input?.focus();
@@ -587,17 +587,12 @@ const RepoView = () => {
                 spellcheck={false}
                 autocapitalize="off"
                 autocomplete="off"
-                class="grow py-2 select-none placeholder:text-sm focus:outline-none"
+                class="grow py-1.5 select-none placeholder:text-xs focus:outline-none"
                 name="filter"
                 placeholder="Filter collections..."
                 value={filter() ?? ""}
                 onInput={(e) => setFilter(e.currentTarget.value.toLowerCase())}
               />
-              <Show when={canHover && !filter()}>
-                <kbd class="rounded border border-neutral-200 bg-neutral-50 px-1.5 py-0.5 font-mono text-xs text-neutral-400 select-none dark:border-neutral-600 dark:bg-neutral-700">
-                  /
-                </kbd>
-              </Show>
             </div>
             <div class="flex w-full max-w-lg justify-end gap-1">
               <button