diff --git a/app/file-browser.tsx b/app/file-browser.tsx
index d0292e6..6dbf040 100644
--- a/app/file-browser.tsx
+++ b/app/file-browser.tsx
@@ -40,7 +40,7 @@ function Thumbnail({ fileKey }: { fileKey: string }) {
     <img
       src={thumbnailUrl}
       alt="Document thumbnail"
-      className="aspect-[3/4] w-full object-cover object-top bg-secondary rounded-xl"
+      className="aspect-[3/4] w-full object-cover object-top bg-secondary"
       loading="lazy"
     />
   );
@@ -51,30 +51,28 @@ function FileCard({ file, onClick }: { file: FileItem; onClick: () => void }) {
   return (
     <button
       onClick={onClick}
-      className="group relative bg-card border border-border rounded-2xl p-3 hover:border-primary/50 hover:bg-accent/50 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-1 text-left w-full"
+      className="group relative bg-card rounded-xl overflow-hidden text-left w-full transition-all duration-200 hover:scale-[1.02] hover:shadow-xl hover:shadow-black/20"
       style={{ contentVisibility: 'auto', containIntrinsicSize: '0 280px' }}
     >
-      <div className="mb-3 overflow-hidden rounded-xl group-hover:ring-2 group-hover:ring-primary/20">
+      {/* Thumbnail */}
+      <div className="relative">
         <Thumbnail fileKey={file.key} />
+        {/* Gradient overlay on hover */}
+        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
+        {/* File ID overlay on hover */}
+        <div className="absolute bottom-0 left-0 right-0 p-3 translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-200">
+          <p className="font-mono text-sm font-medium text-white drop-shadow-lg tabular-nums tracking-tight">
+            {getFileId(file.key)}
+          </p>
+          <p className="text-xs text-white/70 tabular-nums mt-0.5">{formatFileSize(file.size)}</p>
+        </div>
       </div>
 
-      <div className="space-y-1.5">
-        <h3
-          className="font-mono text-sm font-medium text-foreground truncate group-hover:text-primary"
-          title={getFileId(file.key)}
-        >
+      {/* Static label below thumbnail */}
+      <div className="px-3 py-2.5 bg-secondary/40">
+        <p className="font-mono text-xs text-muted-foreground truncate group-hover:text-foreground transition-colors tabular-nums tracking-tight">
           {getFileId(file.key)}
-        </h3>
-        <p className="text-xs text-muted-foreground">{formatFileSize(file.size)}</p>
-      </div>
-      
-      {/* Hover indicator */}
-      <div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100">
-        <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
-          <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-          </svg>
-        </div>
+        </p>
       </div>
     </button>
   );
@@ -83,7 +81,7 @@ function FileCard({ file, onClick }: { file: FileItem; onClick: () => void }) {
 // Get celebrities for a specific file and page
 function getCelebritiesForPage(filePath: string, pageNumber: number): { name: string; confidence: number }[] {
   const celebrities: { name: string; confidence: number }[] = [];
-  
+
   for (const celebrity of CELEBRITY_DATA) {
     for (const appearance of celebrity.appearances) {
       if (appearance.file === filePath && appearance.page === pageNumber) {
@@ -94,14 +92,14 @@ function getCelebritiesForPage(filePath: string, pageNumber: number): { name: st
       }
     }
   }
-  
+
   return celebrities.sort((a, b) => b.confidence - a.confidence).filter(celeb => celeb.confidence > 99);
 }
 
 // Prefetch a PDF in the background
 async function prefetchPdf(filePath: string): Promise<void> {
   if (getPdfPages(filePath)) return;
-  
+
   try {
     const fileUrl = `${WORKER_URL}/${filePath}`;
     const pdfjsLib = await import("pdfjs-dist");
@@ -140,17 +138,17 @@ async function prefetchPdf(filePath: string): Promise<void> {
 }
 
 // Modal component for viewing files
-function FileModal({ 
-  file, 
-  onClose, 
-  onPrev, 
+function FileModal({
+  file,
+  onClose,
+  onPrev,
   onNext,
   hasPrev,
   hasNext,
   queryString,
   nextFile
-}: { 
-  file: FileItem; 
+}: {
+  file: FileItem;
   onClose: () => void;
   onPrev: () => void;
   onNext: () => void;
@@ -162,7 +160,7 @@ function FileModal({
   const [pages, setPages] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  
+
   const filePath = file.key;
   const fileId = getFileId(filePath);
   const fileUrl = `${WORKER_URL}/${filePath}`;
@@ -193,7 +191,7 @@ function FileModal({
   // Load PDF
   useEffect(() => {
     const cached = getPdfPages(filePath);
-    
+
     if (cached && cached.length > 0) {
       setPages(cached);
       setLoading(false);
@@ -262,7 +260,7 @@ function FileModal({
       cancelled = true;
     };
   }, [fileUrl, filePath]);
-  
+
   // Prefetch next PDF
   useEffect(() => {
     if (!loading && nextFile) {
@@ -273,11 +271,11 @@ function FileModal({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
-      <div 
+      <div
         className="absolute inset-0 bg-background/95 backdrop-blur-sm"
         onClick={onClose}
       />
-      
+
       {/* Modal content */}
       <div className="relative w-full h-full flex flex-col">
         {/* Header */}
@@ -293,14 +291,14 @@ function FileModal({
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                 </svg>
               </button>
-              <h1 className="text-base sm:text-lg font-mono font-semibold text-foreground truncate">{fileId}</h1>
+              <h1 className="text-mono text-heading text-foreground truncate">{fileId}</h1>
             </div>
 
             {/* Actions */}
             <div className="flex items-center gap-2 flex-shrink-0">
               <Link
                 href={`/file/${encodeURIComponent(filePath)}${queryString}`}
-                className="p-2 sm:px-4 sm:py-2 bg-secondary hover:bg-accent rounded-xl text-sm font-medium flex items-center gap-2"
+                className="p-2 sm:px-4 sm:py-2 bg-secondary hover:bg-accent rounded-xl text-body flex items-center gap-2"
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
@@ -310,7 +308,7 @@ function FileModal({
               <a
                 href={fileUrl}
                 download
-                className="p-2 sm:px-4 sm:py-2 bg-primary hover:bg-primary/90 text-primary-foreground rounded-xl text-sm font-medium flex items-center gap-2 shadow-lg shadow-primary/20"
+                className="p-2 sm:px-4 sm:py-2 bg-primary hover:bg-primary/90 text-primary-foreground rounded-xl text-body font-medium flex items-center gap-2 shadow-lg shadow-primary/20"
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
@@ -329,8 +327,8 @@ function FileModal({
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
               <div>
-                <p className="font-medium">Error loading PDF</p>
-                <p className="text-sm text-destructive/80 mt-0.5">{error}</p>
+                <p className="text-subheading">Error loading PDF</p>
+                <p className="text-caption text-destructive/80 mt-1">{error}</p>
               </div>
             </div>
           )}
@@ -342,7 +340,7 @@ function FileModal({
                 <div key={index} className="bg-card rounded-2xl shadow-xl overflow-hidden border border-border">
                   <div className="relative">
                     {pages.length > 1 && (
-                      <div className="absolute top-3 left-3 px-2.5 py-1 bg-background/80 backdrop-blur-sm rounded-lg text-xs font-medium text-muted-foreground border border-border">
+                      <div className="absolute top-3 left-3 px-2.5 py-1 bg-background/80 backdrop-blur-sm rounded-lg text-label text-muted-foreground border border-border tabular-nums">
                         Page {index + 1}
                       </div>
                     )}
@@ -362,16 +360,16 @@ function FileModal({
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                           </svg>
                         </div>
-                        <p className="text-sm font-medium text-foreground">Detected in this image:</p>
+                        <p className="text-body font-medium text-foreground">Detected in this image</p>
                       </div>
                       <div className="flex flex-wrap gap-2 mb-4">
                         {pageCelebrities.map((celeb, idx) => (
                           <span
                             key={idx}
-                            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm bg-card border border-border text-foreground"
+                            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-caption bg-card border border-border text-foreground"
                           >
                             <span>{celeb.name}</span>
-                            <span className="text-xs text-muted-foreground">({Math.round(celeb.confidence)}%)</span>
+                            <span className="text-label text-muted-foreground tabular-nums">{Math.round(celeb.confidence)}%</span>
                           </span>
                         ))}
                       </div>
@@ -384,12 +382,12 @@ function FileModal({
           </div>
 
           {loading && (
-            <div className="flex flex-col items-center justify-center py-16 gap-5">
+            <div className="flex flex-col items-center justify-center py-16 gap-4">
               <div className="relative">
-                <div className="w-12 h-12 rounded-full border-2 border-secondary"></div>
-                <div className="absolute inset-0 w-12 h-12 rounded-full border-2 border-primary border-t-transparent animate-spin"></div>
+                <div className="w-10 h-10 rounded-full border-2 border-secondary"></div>
+                <div className="absolute inset-0 w-10 h-10 rounded-full border-2 border-primary border-t-transparent animate-spin"></div>
               </div>
-              <p className="text-foreground font-medium">Loading PDF...</p>
+              <p className="text-body text-muted-foreground">Loading document...</p>
             </div>
           )}
         </div>
@@ -399,14 +397,14 @@ function FileModal({
           {hasPrev ? (
             <button
               onClick={onPrev}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-secondary rounded-full"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-caption text-muted-foreground hover:text-foreground hover:bg-secondary rounded-full transition-colors"
             >
-              <kbd className="px-2 py-0.5 bg-secondary rounded-md font-mono text-xs text-foreground">←</kbd>
+              <kbd className="px-2 py-0.5 bg-secondary rounded-md text-mono text-micro text-foreground">←</kbd>
               <span>Prev</span>
             </button>
           ) : (
-            <div className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground/50 cursor-not-allowed">
-              <kbd className="px-2 py-0.5 bg-secondary/50 rounded-md font-mono text-xs text-muted-foreground/50">←</kbd>
+            <div className="flex items-center gap-1.5 px-3 py-1.5 text-caption text-muted-foreground/40 cursor-not-allowed">
+              <kbd className="px-2 py-0.5 bg-secondary/50 rounded-md text-mono text-micro text-muted-foreground/40">←</kbd>
               <span>Prev</span>
             </div>
           )}
@@ -414,15 +412,15 @@ function FileModal({
           {hasNext ? (
             <button
               onClick={onNext}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-secondary rounded-full"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-caption text-muted-foreground hover:text-foreground hover:bg-secondary rounded-full transition-colors"
             >
               <span>Next</span>
-              <kbd className="px-2 py-0.5 bg-secondary rounded-md font-mono text-xs text-foreground">→</kbd>
+              <kbd className="px-2 py-0.5 bg-secondary rounded-md text-mono text-micro text-foreground">→</kbd>
             </button>
           ) : (
-            <div className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground/50 cursor-not-allowed">
+            <div className="flex items-center gap-1.5 px-3 py-1.5 text-caption text-muted-foreground/40 cursor-not-allowed">
               <span>Next</span>
-              <kbd className="px-2 py-0.5 bg-secondary/50 rounded-md font-mono text-xs text-muted-foreground/50">→</kbd>
+              <kbd className="px-2 py-0.5 bg-secondary/50 rounded-md text-mono text-micro text-muted-foreground/40">→</kbd>
             </div>
           )}
         </div>
@@ -471,30 +469,30 @@ export function FileBrowser() {
     const str = params.toString();
     return str ? `?${str}` : "";
   }, [collectionFilter, celebrityFilter]);
-  
+
   // Modal state - find index from file key
   const selectedFileIndex = useMemo(() => {
     if (!openFile) return null;
     const index = filteredFiles.findIndex(f => f.key === openFile);
     return index >= 0 ? index : null;
   }, [openFile, filteredFiles]);
-  
+
   const selectedFile = selectedFileIndex !== null ? filteredFiles[selectedFileIndex] : null;
   const hasPrev = selectedFileIndex !== null && selectedFileIndex > 0;
   const hasNext = selectedFileIndex !== null && selectedFileIndex < filteredFiles.length - 1;
-  
+
   const handlePrev = useCallback(() => {
     if (selectedFileIndex !== null && selectedFileIndex > 0) {
       setOpenFile(filteredFiles[selectedFileIndex - 1].key);
     }
   }, [selectedFileIndex, filteredFiles, setOpenFile]);
-  
+
   const handleNext = useCallback(() => {
     if (selectedFileIndex !== null && selectedFileIndex < filteredFiles.length - 1) {
       setOpenFile(filteredFiles[selectedFileIndex + 1].key);
     }
   }, [selectedFileIndex, filteredFiles, setOpenFile]);
-  
+
   const handleClose = useCallback(() => {
     setOpenFile(null);
   }, [setOpenFile]);
@@ -505,13 +503,9 @@ export function FileBrowser() {
       <header className="border-b border-border bg-card/80 backdrop-blur-xl sticky top-0 z-10">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5">
           <div className="flex items-center justify-between mb-5">
-            <div className="flex items-center gap-3">
-              <div>
-                <h1 className="text-xl sm:text-2xl font-bold text-foreground tracking-tight">
-                  Epstein Files Browser
-                </h1>
-              </div>
-            </div>
+            <h1 className="text-xl sm:text-2xl font-semibold text-foreground tracking-tight">
+              Epstein Files Browser
+            </h1>
             <a
               href="https://github.com/RhysSullivan/epstein-files-browser"
               target="_blank"
@@ -539,7 +533,7 @@ export function FileBrowser() {
               <select
                 value={collectionFilter}
                 onChange={(e) => setCollectionFilter(e.target.value)}
-                className="appearance-none px-4 py-2.5 pr-10 bg-secondary border border-border rounded-xl text-foreground text-sm font-medium focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all cursor-pointer hover:bg-accent"
+                className="appearance-none px-4 py-2.5 pr-10 bg-secondary border border-border rounded-xl text-body text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all cursor-pointer hover:bg-accent"
               >
                 <option value="All">All Collections</option>
                 <option value="VOL00001">Volume 1</option>
@@ -559,13 +553,15 @@ export function FileBrowser() {
               onValueChange={(value) => setCelebrityFilter(value)}
             />
 
-            <div className="flex items-center gap-2 px-3 py-2 bg-secondary/50 rounded-xl">
-              <span className="text-sm font-medium text-muted-foreground">
-                {filteredFiles.length.toLocaleString()} files
-                {collectionFilter !== "All" || celebrityFilter !== "All"
-                  ? <span className="text-foreground/50"> / {initialFiles.length.toLocaleString()}</span>
-                  : ""}
-              </span>
+            <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              <span className="font-mono font-medium text-foreground tabular-nums">{filteredFiles.length.toLocaleString()}</span>
+              {collectionFilter !== "All" || celebrityFilter !== "All" ? (
+                <>
+                  <span>/</span>
+                  <span className="font-mono tabular-nums">{initialFiles.length.toLocaleString()}</span>
+                </>
+              ) : null}
+              <span className="ml-0.5">documents</span>
             </div>
           </div>
         </div>
@@ -574,20 +570,17 @@ export function FileBrowser() {
       {/* Celebrity Detection Disclaimer */}
       {celebrityFilter !== "All" && (
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-5">
-          <div className="bg-amber-500/10 border border-amber-500/20 text-amber-200 px-5 py-4 rounded-2xl backdrop-blur-sm">
-            <div className="flex items-start gap-3">
-              <div className="w-8 h-8 rounded-lg bg-amber-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
-                <svg className="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                </svg>
-              </div>
-              <div>
-                <CelebrityDisclaimer className="text-amber-200/90 [&_a]:text-amber-300 [&_a]:hover:text-amber-100" />
-                <p className="text-sm mt-1.5 text-amber-200/70">
-                  Results limited to {">"}99% confidence matches from AWS Rekognition.
-                </p>
-              </div>
-            </div>
+          <div className="inline-flex items-center gap-2 px-4 py-2.5 bg-secondary/60 border border-border rounded-full text-sm text-muted-foreground">
+            <svg className="w-4 h-4 text-amber-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span>
+              AI detection via{" "}
+              <a href="https://aws.amazon.com/rekognition/" target="_blank" rel="noopener noreferrer" className="text-foreground hover:text-primary transition-colors">
+                AWS Rekognition
+              </a>
+              {" "}&middot; <span className="font-mono tabular-nums">&gt;99%</span> confidence &middot; Results may be inaccurate
+            </span>
           </div>
         </div>
       )}
@@ -603,13 +596,13 @@ export function FileBrowser() {
         {/* Empty state */}
         {filteredFiles.length === 0 && (
           <div className="flex flex-col items-center justify-center py-20 text-center">
-            <div className="w-16 h-16 rounded-2xl bg-secondary flex items-center justify-center mb-4">
-              <svg className="w-8 h-8 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            <div className="w-14 h-14 rounded-2xl bg-secondary flex items-center justify-center mb-4">
+              <svg className="w-7 h-7 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
               </svg>
             </div>
-            <h3 className="text-lg font-semibold text-foreground mb-1">No files found</h3>
-            <p className="text-muted-foreground text-sm">Try adjusting your filters to find what you&apos;re looking for.</p>
+            <h3 className="text-subheading text-foreground mb-1">No documents found</h3>
+            <p className="text-caption text-muted-foreground max-w-xs">Try adjusting your filters to find what you&apos;re looking for.</p>
           </div>
         )}
       </main>
diff --git a/app/file/[...path]/page.tsx b/app/file/[...path]/page.tsx
index ada2c30..1236135 100644
--- a/app/file/[...path]/page.tsx
+++ b/app/file/[...path]/page.tsx
@@ -90,23 +90,23 @@ function getCelebritiesForPage(filePath: string, pageNumber: number): { name: st
 }
 
 // Component to display a page with its celebrity info
-function PageWithCelebrities({ 
-  dataUrl, 
-  pageNumber, 
-  filePath 
-}: { 
-  dataUrl: string; 
-  pageNumber: number; 
+function PageWithCelebrities({
+  dataUrl,
+  pageNumber,
+  filePath
+}: {
+  dataUrl: string;
+  pageNumber: number;
   filePath: string;
 }) {
   const celebrities = useMemo(() => getCelebritiesForPage(filePath, pageNumber), [filePath, pageNumber]);
-  
+
   return (
-    <div className="bg-card rounded-2xl shadow-xl overflow-hidden border border-border">
+    <div className="bg-card rounded-lg overflow-hidden border border-border/60">
       <div className="relative">
         {/* Page number badge */}
-        <div className="absolute top-3 left-3 px-2.5 py-1 bg-background/80 backdrop-blur-sm rounded-lg text-xs font-medium text-muted-foreground border border-border">
-          Page {pageNumber}
+        <div className="absolute top-2 left-2 px-2 py-0.5 bg-background/90 backdrop-blur-sm rounded text-[11px] font-mono text-muted-foreground border border-border/40">
+          {pageNumber}
         </div>
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
@@ -117,26 +117,18 @@ function PageWithCelebrities({
         />
       </div>
       {celebrities.length > 0 && (
-        <div className="bg-secondary/50 border-t border-border px-5 py-4">
-          <div className="flex items-center gap-2 mb-3">
-            <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
-              <svg className="w-3.5 h-3.5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-              </svg>
-            </div>
-            <p className="text-sm font-medium text-foreground">Detected in this image:</p>
-          </div>
-          <div className="flex flex-wrap gap-2 mb-4">
-            {celebrities
-            .map((celeb, idx) => (
+        <div className="bg-secondary/30 border-t border-border/40 px-4 py-3">
+          <p className="text-xs text-muted-foreground mb-2">Detected:</p>
+          <div className="flex flex-wrap gap-1.5 mb-3">
+            {celebrities.map((celeb, idx) => (
               <Link
                 key={idx}
                 prefetch={false}
                 href={`/?celebrity=${encodeURIComponent(celeb.name)}`}
-                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm bg-card border border-border text-foreground hover:bg-accent hover:border-primary/30 transition-all duration-200"
+                className="inline-flex items-center gap-1 px-2 py-1 rounded text-xs bg-card border border-border/60 text-foreground/90 hover:border-primary/40 transition-colors"
               >
                 <span>{celeb.name}</span>
-                <span className="text-xs text-muted-foreground">({Math.round(celeb.confidence)}%)</span>
+                <span className="text-muted-foreground tabular-nums">{Math.round(celeb.confidence)}%</span>
               </Link>
             ))}
           </div>
@@ -328,13 +320,13 @@ export default function FilePage({
   return (
     <div className="min-h-screen bg-background text-foreground flex flex-col">
       {/* Header */}
-      <header className="border-b border-border bg-card/80 backdrop-blur-xl sticky top-0 z-10">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4 flex items-center justify-between gap-3">
-          <div className="flex items-center gap-3 sm:gap-4 min-w-0">
+      <header className="border-b border-border/60 bg-background/95 backdrop-blur-md sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between gap-3">
+          <div className="flex items-center gap-3 min-w-0">
             <Link
               prefetch={false}
               href={`/${queryString}`}
-              className="p-2 rounded-xl bg-secondary hover:bg-accent text-muted-foreground hover:text-foreground transition-all duration-200 flex-shrink-0"
+              className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary/80 transition-colors flex-shrink-0"
               aria-label="Back to file list"
             >
               <svg
@@ -346,22 +338,22 @@ export default function FilePage({
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  strokeWidth={2}
+                  strokeWidth={1.5}
                   d="M10 19l-7-7m0 0l7-7m-7 7h18"
                 />
               </svg>
             </Link>
             <div className="min-w-0">
-              <h1 className="text-base sm:text-lg font-mono font-semibold text-foreground truncate">{fileId}</h1>
+              <h1 className="text-sm sm:text-base font-mono font-medium text-foreground/90 truncate tracking-tight">{fileId}</h1>
               {totalPages > 0 && (
-                <div className="flex items-center gap-2 mt-0.5">
-                  <div className="h-1.5 flex-1 max-w-[120px] bg-secondary rounded-full overflow-hidden">
-                    <div 
-                      className="h-full bg-primary rounded-full transition-all duration-500"
+                <div className="flex items-center gap-2 mt-1">
+                  <div className="h-1 flex-1 max-w-[100px] bg-secondary/60 rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-primary/80 rounded-full transition-all duration-500"
                       style={{ width: `${(pages.length / totalPages) * 100}%` }}
                     />
                   </div>
-                  <span className="text-xs text-muted-foreground flex-shrink-0">
+                  <span className="text-[11px] text-muted-foreground tabular-nums flex-shrink-0">
                     {pages.length}/{totalPages}
                   </span>
                 </div>
@@ -375,7 +367,7 @@ export default function FilePage({
               <Link
                 prefetch={false}
                 href={`/file/${encodeURIComponent(prevPath)}${queryString}`}
-                className="p-2 sm:px-4 sm:py-2 bg-secondary hover:bg-accent rounded-xl text-sm font-medium transition-all duration-200 flex items-center gap-2"
+                className="p-2 sm:px-3 sm:py-1.5 bg-secondary/80 hover:bg-secondary rounded-md text-sm transition-colors flex items-center gap-2"
                 aria-label="Previous file"
               >
                 <svg
@@ -387,7 +379,7 @@ export default function FilePage({
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
-                    strokeWidth={2}
+                    strokeWidth={1.5}
                     d="M15 19l-7-7 7-7"
                   />
                 </svg>
@@ -398,7 +390,7 @@ export default function FilePage({
               <Link
                 prefetch={false}
                 href={`/file/${encodeURIComponent(nextPath)}${queryString}`}
-                className="p-2 sm:px-4 sm:py-2 bg-secondary hover:bg-accent rounded-xl text-sm font-medium transition-all duration-200 flex items-center gap-2"
+                className="p-2 sm:px-3 sm:py-1.5 bg-secondary/80 hover:bg-secondary rounded-md text-sm transition-colors flex items-center gap-2"
                 aria-label="Next file"
               >
                 <span className="hidden sm:inline">Next</span>
@@ -411,7 +403,7 @@ export default function FilePage({
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
-                    strokeWidth={2}
+                    strokeWidth={1.5}
                     d="M9 5l7 7-7 7"
                   />
                 </svg>
@@ -420,7 +412,7 @@ export default function FilePage({
             <a
               href={fileUrl}
               download
-              className="p-2 sm:px-4 sm:py-2 bg-primary hover:bg-primary/90 text-primary-foreground rounded-xl text-sm font-medium transition-all duration-200 flex items-center gap-2 shadow-lg shadow-primary/20"
+              className="p-2 sm:px-3 sm:py-1.5 bg-primary hover:bg-primary/90 text-primary-foreground rounded-md text-sm font-medium transition-colors flex items-center gap-2"
               aria-label="Download PDF"
             >
               <svg
@@ -432,7 +424,7 @@ export default function FilePage({
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  strokeWidth={2}
+                  strokeWidth={1.5}
                   d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                 />
               </svg>
@@ -445,18 +437,18 @@ export default function FilePage({
       {/* PDF Pages */}
       <main ref={containerRef} className="flex-1 overflow-auto p-4 sm:p-6 lg:p-8 pb-24">
         {error && (
-          <div className="max-w-3xl mx-auto bg-destructive/10 border border-destructive/20 text-destructive px-5 py-4 rounded-2xl mb-6 flex items-start gap-3">
-            <svg className="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          <div className="max-w-3xl mx-auto bg-destructive/10 border border-destructive/20 text-destructive px-4 py-3 rounded-md mb-6 flex items-start gap-3">
+            <svg className="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
-            <div>
+            <div className="text-sm">
               <p className="font-medium">Error loading PDF</p>
-              <p className="text-sm text-destructive/80 mt-0.5">{error}</p>
+              <p className="text-destructive/80 mt-0.5">{error}</p>
             </div>
           </div>
         )}
 
-        <div className="max-w-4xl mx-auto space-y-6">
+        <div className="max-w-4xl mx-auto space-y-4">
           {pages.map((dataUrl, index) => (
             <PageWithCelebrities
               key={index}
@@ -469,51 +461,51 @@ export default function FilePage({
 
         {/* Loading State */}
         {loading && (
-          <div className="flex flex-col items-center justify-center py-16 gap-5">
+          <div className="flex flex-col items-center justify-center py-16 gap-4">
             <div className="relative">
-              <div className="w-12 h-12 rounded-full border-2 border-secondary"></div>
-              <div className="absolute inset-0 w-12 h-12 rounded-full border-2 border-primary border-t-transparent animate-spin"></div>
+              <div className="w-8 h-8 rounded-full border border-border"></div>
+              <div className="absolute inset-0 w-8 h-8 rounded-full border border-primary border-t-transparent animate-spin"></div>
             </div>
-            <p className="text-foreground font-medium">
+            <p className="text-sm text-muted-foreground">
               {pages.length > 0
                 ? `Rendering page ${pages.length + 1} of ${totalPages}`
-                : "Loading PDF..."}
+                : "Loading document..."}
             </p>
           </div>
         )}
       </main>
 
       {/* Navigation bar */}
-      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 px-2 py-2 bg-card/90 backdrop-blur-sm border border-border rounded-full shadow-lg">
+      <div className="fixed bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-1 px-1 py-1 bg-card/95 backdrop-blur-md border border-border/60 rounded-lg shadow-lg">
         {prevPath ? (
           <Link
             prefetch={false}
             href={`/file/${encodeURIComponent(prevPath)}${queryString}`}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-secondary rounded-full transition-colors"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary/80 rounded-md transition-colors"
           >
-            <kbd className="px-2 py-0.5 bg-secondary rounded-md font-mono text-xs text-foreground">←</kbd>
+            <kbd className="px-1.5 py-0.5 bg-secondary/80 rounded font-mono text-[10px]">←</kbd>
             <span>Prev</span>
           </Link>
         ) : (
-          <div className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground/50 cursor-not-allowed">
-            <kbd className="px-2 py-0.5 bg-secondary/50 rounded-md font-mono text-xs text-muted-foreground/50">←</kbd>
+          <div className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-muted-foreground/40 cursor-not-allowed">
+            <kbd className="px-1.5 py-0.5 bg-secondary/40 rounded font-mono text-[10px]">←</kbd>
             <span>Prev</span>
           </div>
         )}
-        <div className="w-px h-4 bg-border"></div>
+        <div className="w-px h-4 bg-border/60"></div>
         {nextPath ? (
           <Link
             prefetch={false}
             href={`/file/${encodeURIComponent(nextPath)}${queryString}`}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-secondary rounded-full transition-colors"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary/80 rounded-md transition-colors"
           >
             <span>Next</span>
-            <kbd className="px-2 py-0.5 bg-secondary rounded-md font-mono text-xs text-foreground">→</kbd>
+            <kbd className="px-1.5 py-0.5 bg-secondary/80 rounded font-mono text-[10px]">→</kbd>
           </Link>
         ) : (
-          <div className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground/50 cursor-not-allowed">
+          <div className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-muted-foreground/40 cursor-not-allowed">
             <span>Next</span>
-            <kbd className="px-2 py-0.5 bg-secondary/50 rounded-md font-mono text-xs text-muted-foreground/50">→</kbd>
+            <kbd className="px-1.5 py-0.5 bg-secondary/40 rounded font-mono text-[10px]">→</kbd>
           </div>
         )}
       </div>
diff --git a/app/globals.css b/app/globals.css
index 96fc3a5..aecbfd9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,8 +6,9 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -37,82 +38,108 @@
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 2px);
   --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
+  --radius-2xl: calc(var(--radius) + 6px);
 }
 
+/*
+ * Design System: Archival Document Browser
+ * A refined, professional aesthetic for legal document viewing
+ */
+
 :root {
-  --radius: 0.625rem;
-  --background: oklch(0.09 0.005 260);
-  --foreground: oklch(0.95 0 0);
-  --card: oklch(0.13 0.005 260);
-  --card-foreground: oklch(0.95 0 0);
-  --popover: oklch(0.13 0.005 260);
-  --popover-foreground: oklch(0.95 0 0);
-  --primary: oklch(0.65 0.2 250);
-  --primary-foreground: oklch(0.98 0 0);
-  --secondary: oklch(0.18 0.005 260);
-  --secondary-foreground: oklch(0.95 0 0);
-  --muted: oklch(0.18 0.005 260);
-  --muted-foreground: oklch(0.65 0 0);
-  --accent: oklch(0.22 0.01 260);
-  --accent-foreground: oklch(0.95 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.25 0.01 260);
-  --input: oklch(0.20 0.01 260);
-  --ring: oklch(0.65 0.2 250);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.11 0.005 260);
-  --sidebar-foreground: oklch(0.95 0 0);
-  --sidebar-primary: oklch(0.65 0.2 250);
-  --sidebar-primary-foreground: oklch(0.98 0 0);
-  --sidebar-accent: oklch(0.18 0.005 260);
-  --sidebar-accent-foreground: oklch(0.95 0 0);
-  --sidebar-border: oklch(0.25 0.01 260);
-  --sidebar-ring: oklch(0.65 0.2 250);
+  /* Tighter, more refined border radius */
+  --radius: 0.375rem;
+
+  /* Neutral slate palette - warmer and more archival */
+  --background: oklch(0.10 0.004 250);
+  --foreground: oklch(0.93 0.005 250);
+
+  /* Cards: subtle lift from background */
+  --card: oklch(0.14 0.006 250);
+  --card-foreground: oklch(0.93 0.005 250);
+
+  /* Popover matches card */
+  --popover: oklch(0.14 0.006 250);
+  --popover-foreground: oklch(0.93 0.005 250);
+
+  /* Primary: Warm amber accent - archival gold */
+  --primary: oklch(0.75 0.14 75);
+  --primary-foreground: oklch(0.15 0.02 75);
+
+  /* Secondary: Subtle elevated surface */
+  --secondary: oklch(0.18 0.006 250);
+  --secondary-foreground: oklch(0.93 0.005 250);
+
+  /* Muted text and surfaces */
+  --muted: oklch(0.18 0.006 250);
+  --muted-foreground: oklch(0.55 0.01 250);
+
+  /* Accent for hover states */
+  --accent: oklch(0.20 0.008 250);
+  --accent-foreground: oklch(0.93 0.005 250);
+
+  /* Destructive */
+  --destructive: oklch(0.55 0.22 25);
+
+  /* Borders: very subtle, refined */
+  --border: oklch(0.22 0.008 250);
+  --input: oklch(0.18 0.008 250);
+  --ring: oklch(0.75 0.14 75);
+
+  /* Chart colors */
+  --chart-1: oklch(0.75 0.14 75);
+  --chart-2: oklch(0.6 0.12 185);
+  --chart-3: oklch(0.55 0.10 250);
+  --chart-4: oklch(0.70 0.15 150);
+  --chart-5: oklch(0.65 0.18 30);
+
+  /* Sidebar */
+  --sidebar: oklch(0.12 0.005 250);
+  --sidebar-foreground: oklch(0.93 0.005 250);
+  --sidebar-primary: oklch(0.75 0.14 75);
+  --sidebar-primary-foreground: oklch(0.15 0.02 75);
+  --sidebar-accent: oklch(0.18 0.006 250);
+  --sidebar-accent-foreground: oklch(0.93 0.005 250);
+  --sidebar-border: oklch(0.22 0.008 250);
+  --sidebar-ring: oklch(0.75 0.14 75);
 }
 
 .dark {
-  --background: oklch(0.09 0.005 260);
-  --foreground: oklch(0.95 0 0);
-  --card: oklch(0.13 0.005 260);
-  --card-foreground: oklch(0.95 0 0);
-  --popover: oklch(0.13 0.005 260);
-  --popover-foreground: oklch(0.95 0 0);
-  --primary: oklch(0.65 0.2 250);
-  --primary-foreground: oklch(0.98 0 0);
-  --secondary: oklch(0.18 0.005 260);
-  --secondary-foreground: oklch(0.95 0 0);
-  --muted: oklch(0.18 0.005 260);
-  --muted-foreground: oklch(0.65 0 0);
-  --accent: oklch(0.22 0.01 260);
-  --accent-foreground: oklch(0.95 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(0.25 0.01 260);
-  --input: oklch(0.20 0.01 260);
-  --ring: oklch(0.65 0.2 250);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.11 0.005 260);
-  --sidebar-foreground: oklch(0.95 0 0);
-  --sidebar-primary: oklch(0.65 0.2 250);
-  --sidebar-primary-foreground: oklch(0.98 0 0);
-  --sidebar-accent: oklch(0.18 0.005 260);
-  --sidebar-accent-foreground: oklch(0.95 0 0);
-  --sidebar-border: oklch(0.25 0.01 260);
-  --sidebar-ring: oklch(0.65 0.2 250);
+  --background: oklch(0.10 0.004 250);
+  --foreground: oklch(0.93 0.005 250);
+  --card: oklch(0.14 0.006 250);
+  --card-foreground: oklch(0.93 0.005 250);
+  --popover: oklch(0.14 0.006 250);
+  --popover-foreground: oklch(0.93 0.005 250);
+  --primary: oklch(0.75 0.14 75);
+  --primary-foreground: oklch(0.15 0.02 75);
+  --secondary: oklch(0.18 0.006 250);
+  --secondary-foreground: oklch(0.93 0.005 250);
+  --muted: oklch(0.18 0.006 250);
+  --muted-foreground: oklch(0.55 0.01 250);
+  --accent: oklch(0.20 0.008 250);
+  --accent-foreground: oklch(0.93 0.005 250);
+  --destructive: oklch(0.60 0.20 25);
+  --border: oklch(0.22 0.008 250);
+  --input: oklch(0.18 0.008 250);
+  --ring: oklch(0.75 0.14 75);
+  --chart-1: oklch(0.75 0.14 75);
+  --chart-2: oklch(0.6 0.12 185);
+  --chart-3: oklch(0.55 0.10 250);
+  --chart-4: oklch(0.70 0.15 150);
+  --chart-5: oklch(0.65 0.18 30);
+  --sidebar: oklch(0.12 0.005 250);
+  --sidebar-foreground: oklch(0.93 0.005 250);
+  --sidebar-primary: oklch(0.75 0.14 75);
+  --sidebar-primary-foreground: oklch(0.15 0.02 75);
+  --sidebar-accent: oklch(0.18 0.006 250);
+  --sidebar-accent-foreground: oklch(0.93 0.005 250);
+  --sidebar-border: oklch(0.22 0.008 250);
+  --sidebar-ring: oklch(0.75 0.14 75);
 }
 
 @layer base {
@@ -124,26 +151,143 @@
   }
 }
 
-/* Custom scrollbar */
+/* Custom scrollbar - refined and subtle */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
-  background: oklch(0.12 0.005 260);
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: oklch(0.28 0.01 260);
-  border-radius: 4px;
+  background: oklch(0.30 0.008 250);
+  border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: oklch(0.35 0.01 260);
+  background: oklch(0.40 0.01 250);
 }
 
-/* Selection styling */
+/* Selection styling - warm amber tint */
 ::selection {
-  background: oklch(0.65 0.2 250 / 0.3);
+  background: oklch(0.75 0.14 75 / 0.25);
+}
+
+/* Shimmer animation for loading states */
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+/*
+ * Typography System
+ * Based on 1.25 modular scale with optimized letter-spacing and line-heights
+ * Designed for scannability and clear visual hierarchy
+ */
+
+/* Display/Title - for main page headings */
+.text-title {
+  font-size: 1.5rem; /* 24px */
+  line-height: 1.2;
+  letter-spacing: -0.025em;
+  font-weight: 600;
+}
+
+@media (min-width: 640px) {
+  .text-title {
+    font-size: 1.875rem; /* 30px */
+  }
+}
+
+/* Heading - for section headings and modal titles */
+.text-heading {
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.3;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+}
+
+/* Subheading - for card titles, prominent labels */
+.text-subheading {
+  font-size: 0.9375rem; /* 15px */
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+  font-weight: 500;
+}
+
+/* Body - standard readable text */
+.text-body {
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+/* Caption - for metadata, timestamps, secondary info */
+.text-caption {
+  font-size: 0.8125rem; /* 13px */
+  line-height: 1.4;
+  letter-spacing: 0.005em;
+  font-weight: 400;
+}
+
+/* Label - for UI labels, badges, small metadata */
+.text-label {
+  font-size: 0.75rem; /* 12px */
+  line-height: 1.35;
+  letter-spacing: 0.01em;
+  font-weight: 500;
+}
+
+/* Micro - for keyboard hints, fine print */
+.text-micro {
+  font-size: 0.6875rem; /* 11px */
+  line-height: 1.3;
+  letter-spacing: 0.02em;
+  font-weight: 500;
+}
+
+/* Mono text - for file IDs, code, technical info */
+.text-mono {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-feature-settings: "tnum" on, "lnum" on;
+}
+
+/* Display font for elegant headings */
+.font-display {
+  font-family: var(--font-serif), ui-serif, Georgia, serif;
+  letter-spacing: -0.02em;
+}
+
+/* Tabular numbers for aligned data */
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" on;
+}
+
+/* Improve text rendering */
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* Card hover refinement */
+.card-hover {
+  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
+}
+
+.card-hover:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px -8px oklch(0 0 0 / 0.4);
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 344e090..6f92232 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,21 +1,27 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter, JetBrains_Mono, Newsreader } from "next/font/google";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { Analytics } from "@vercel/analytics/next";
 import { FilesProvider } from "@/lib/files-context";
 import { FileItem } from "@/lib/cache";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const inter = Inter({
+  variable: "--font-sans",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-mono",
   subsets: ["latin"],
 });
 
+const newsreader = Newsreader({
+  variable: "--font-serif",
+  subsets: ["latin"],
+  style: ["normal", "italic"],
+});
+
 export const metadata: Metadata = {
   title: "Epstein Files Browser",
   description: "Browse and view the released Epstein files",
@@ -51,7 +57,7 @@ export default async function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${inter.variable} ${jetbrainsMono.variable} ${newsreader.variable} antialiased`}
       >
         <FilesProvider files={files}>
           <NuqsAdapter>{children}</NuqsAdapter>
diff --git a/components/celebrity-combobox.tsx b/components/celebrity-combobox.tsx
index c09ba3e..08e3259 100644
--- a/components/celebrity-combobox.tsx
+++ b/components/celebrity-combobox.tsx
@@ -50,11 +50,11 @@ export function CelebrityCombobox({
           <div className="flex items-center gap-2 min-w-0">
             <User className="h-4 w-4 text-muted-foreground flex-shrink-0" />
             {value === "All" ? (
-              <span className="text-sm font-medium">All People</span>
+              <span className="text-sm">All People</span>
             ) : selectedCelebrity ? (
-              <span className="truncate text-sm font-medium">
+              <span className="truncate text-sm">
                 {selectedCelebrity.name}
-                <span className="text-muted-foreground ml-1">({selectedCelebrity.count})</span>
+                <span className="text-muted-foreground text-xs font-mono ml-1.5 tabular-nums">({selectedCelebrity.count})</span>
               </span>
             ) : (
               <span className="text-sm text-muted-foreground">Select person...</span>
@@ -67,10 +67,10 @@ export function CelebrityCombobox({
         <Command className="bg-transparent">
           <CommandInput
             placeholder="Search people..."
-            className="text-foreground placeholder:text-muted-foreground border-b border-border"
+            className="text-sm text-foreground placeholder:text-muted-foreground border-b border-border"
           />
           <CommandList className="max-h-[300px]">
-            <CommandEmpty className="text-muted-foreground py-6 text-center text-sm">
+            <CommandEmpty className="text-sm text-muted-foreground py-6 text-center">
               No person found.
             </CommandEmpty>
             <CommandGroup className="p-1.5">
@@ -80,7 +80,7 @@ export function CelebrityCombobox({
                   onValueChange("All");
                   setOpen(false);
                 }}
-                className="text-foreground hover:bg-accent data-[selected=true]:bg-accent rounded-lg px-3 py-2.5 cursor-pointer"
+                className="text-sm text-foreground hover:bg-accent data-[selected=true]:bg-accent rounded-lg px-3 py-2.5 cursor-pointer"
               >
                 <Check
                   className={cn(
@@ -88,7 +88,7 @@ export function CelebrityCombobox({
                     value === "All" ? "opacity-100" : "opacity-0"
                   )}
                 />
-                <span className="font-medium">All People</span>
+                <span>All People</span>
               </CommandItem>
               {celebrities.map((celebrity) => (
                 <CommandItem
@@ -98,7 +98,7 @@ export function CelebrityCombobox({
                     onValueChange(celebrity.name);
                     setOpen(false);
                   }}
-                  className="text-foreground hover:bg-accent data-[selected=true]:bg-accent rounded-lg px-3 py-2.5 cursor-pointer"
+                  className="text-sm text-foreground hover:bg-accent data-[selected=true]:bg-accent rounded-lg px-3 py-2.5 cursor-pointer"
                 >
                   <Check
                     className={cn(
@@ -107,7 +107,7 @@ export function CelebrityCombobox({
                     )}
                   />
                   <span className="truncate flex-1">{celebrity.name}</span>
-                  <span className="text-muted-foreground text-xs ml-2 bg-secondary px-2 py-0.5 rounded-md">
+                  <span className="text-xs font-mono text-muted-foreground ml-2 bg-secondary px-2 py-0.5 rounded-md tabular-nums">
                     {celebrity.count}
                   </span>
                 </CommandItem>
diff --git a/components/celebrity-disclaimer.tsx b/components/celebrity-disclaimer.tsx
index 969447f..a95f713 100644
--- a/components/celebrity-disclaimer.tsx
+++ b/components/celebrity-disclaimer.tsx
@@ -1,6 +1,6 @@
 export function CelebrityDisclaimer({ className = "" }: { className?: string }) {
   return (
-    <div className={`text-xs text-muted-foreground leading-relaxed ${className}`}>
+    <div className={`text-caption text-muted-foreground ${className}`}>
       <p>
         Detection powered by{" "}
         <a