diff --git a/app/components/FontCard.tsx b/app/components/FontCard.tsx
index fe3955c..2f92fff 100644
--- a/app/components/FontCard.tsx
+++ b/app/components/FontCard.tsx
@@ -10,13 +10,26 @@ interface FontCardProps {
     previewText?: string;
 }
 
+const FORMAT_CONFIG: Record<string, { label: string; color: string; bg: string; dot: string }> = {
+    WOFF2:    { label: 'WOFF2',    color: 'text-emerald-700', bg: 'bg-emerald-50',  dot: 'bg-emerald-400' },
+    WOFF:     { label: 'WOFF',     color: 'text-blue-700',    bg: 'bg-blue-50',     dot: 'bg-blue-400' },
+    TRUETYPE: { label: 'TTF',      color: 'text-violet-700',  bg: 'bg-violet-50',   dot: 'bg-violet-400' },
+    TTF:      { label: 'TTF',      color: 'text-violet-700',  bg: 'bg-violet-50',   dot: 'bg-violet-400' },
+    OPENTYPE: { label: 'OTF',      color: 'text-amber-700',   bg: 'bg-amber-50',    dot: 'bg-amber-400' },
+    OTF:      { label: 'OTF',      color: 'text-amber-700',   bg: 'bg-amber-50',    dot: 'bg-amber-400' },
+    EOT:      { label: 'EOT',      color: 'text-red-700',     bg: 'bg-red-50',      dot: 'bg-red-400' },
+};
+
+function getFormatConfig(format: string) {
+    return FORMAT_CONFIG[format.toUpperCase()] || { label: format, color: 'text-zinc-600', bg: 'bg-zinc-100', dot: 'bg-zinc-400' };
+}
+
 export default function FontCard({ font, index, previewText }: FontCardProps) {
     const [fontLoaded, setFontLoaded] = useState(false);
     const [showAlternatives, setShowAlternatives] = useState(false);
     const [alternatives, setAlternatives] = useState<FontAlternative[]>([]);
     const [loadingAlternatives, setLoadingAlternatives] = useState(false);
 
-    // Only proxy external URLs, keep data URLs as is
     const isDataUrl = font.url.startsWith('data:');
     const displayUrl = isDataUrl
         ? font.url
@@ -39,7 +52,6 @@ export default function FontCard({ font, index, previewText }: FontCardProps) {
     `;
         document.head.appendChild(style);
 
-        // Faster timeout for data URLs as they don't need network fetch
         setTimeout(() => setFontLoaded(true), isDataUrl ? 100 : 800);
 
         return () => {
@@ -80,182 +92,186 @@ export default function FontCard({ font, index, previewText }: FontCardProps) {
         }
     };
 
-    const formatBadgeStyle = (format: string): string => {
-        const styles: Record<string, string> = {
-            'WOFF2': 'bg-emerald-50 text-emerald-600',
-            'WOFF': 'bg-blue-50 text-blue-600',
-            'TRUETYPE': 'bg-violet-50 text-violet-600',
-            'TTF': 'bg-violet-50 text-violet-600',
-            'OPENTYPE': 'bg-amber-50 text-amber-600',
-            'OTF': 'bg-amber-50 text-amber-600',
-            'EOT': 'bg-red-50 text-red-600',
-        };
-        return styles[format.toUpperCase()] || 'bg-gray-100 text-gray-600';
-    };
-
-
+    const fmt = getFormatConfig(font.format);
 
     return (
         <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 16 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{
                 duration: 0.4,
                 ease: [0.23, 1, 0.32, 1],
-                delay: index * 0.05
+                delay: Math.min(index * 0.04, 0.3)
             }}
-            className="group relative bg-white rounded-2xl border border-gray-100 hover:border-gray-200 hover:shadow-[0_8px_30px_-12px_rgba(0,0,0,0.12)] transition-all duration-200 ease"
+            className="group relative bg-white rounded-2xl border border-zinc-200/70 hover:border-zinc-300 hover:shadow-[0_4px_24px_-8px_rgba(0,0,0,0.1)] transition-all duration-200 overflow-hidden"
         >
-            <div className="p-6">
+            {/* Top accent line */}
+            <div className={`h-px w-full ${fmt.dot} opacity-60`} />
+
+            <div className="p-5">
                 {/* Header */}
-                <div className="flex items-start justify-between mb-5">
+                <div className="flex items-start justify-between mb-4 gap-3">
                     <div className="flex-1 min-w-0">
-                        <h3 className="text-lg font-semibold text-gray-900 truncate" title={font.family}>
+                        <h3 className="text-[15px] font-semibold text-zinc-900 truncate leading-snug" title={font.family}>
                             {font.family}
                         </h3>
-                        <p className="text-sm text-gray-400 truncate mt-0.5" title={font.name}>
+                        <p className="text-xs text-zinc-400 truncate mt-0.5 font-mono" title={font.name}>
                             {font.name}
                         </p>
                     </div>
-                    <span className={`ml-3 px-2.5 py-1 text-xs font-medium rounded-lg ${formatBadgeStyle(font.format)}`}>
-                        {font.format}
+                    <span className={`shrink-0 inline-flex items-center gap-1.5 px-2 py-0.5 text-xs font-medium rounded-md ${fmt.bg} ${fmt.color}`}>
+                        <span className={`w-1.5 h-1.5 rounded-full ${fmt.dot}`} />
+                        {fmt.label}
                     </span>
                 </div>
 
                 {/* Font Preview */}
-                <div className="mb-5 p-5 bg-gray-50 rounded-xl min-h-[100px] flex items-center justify-center">
+                <div className="mb-4 px-4 py-5 bg-zinc-50 rounded-xl min-h-[96px] flex items-center justify-center border border-zinc-100">
                     {fontLoaded ? (
                         <p
-                            className="text-2xl text-gray-900 text-center leading-relaxed"
+                            className="text-[22px] text-zinc-800 text-center leading-snug"
                             style={{
                                 fontFamily: `'PreviewFont${index}', sans-serif`,
                                 fontStyle: font.style || 'normal',
                                 fontWeight: font.weight || 'normal'
                             }}
                         >
-                            {previewText || 'The quick brown fox jumps over the lazy dog'}
+                            {previewText || 'The quick brown fox'}
                         </p>
                     ) : (
-                        <div className="flex items-center gap-2 text-gray-400">
-                            <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24">
+                        <div className="flex items-center gap-2 text-zinc-400">
+                            <svg className="animate-spin w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24">
                                 <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" fill="none" />
                                 <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                             </svg>
-                            <span className="text-sm">Loading preview…</span>
+                            <span className="text-xs">Loading preview…</span>
                         </div>
                     )}
                 </div>
 
-                {/* Meta Info */}
-                <div className="flex items-center gap-4 mb-5 text-sm text-gray-400">
-                    <span className="flex items-center gap-1.5">
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
+                {/* Meta row */}
+                <div className="flex items-center gap-3 mb-4">
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-zinc-50 border border-zinc-100 text-xs text-zinc-500 font-medium">
+                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h7" />
                         </svg>
-                        <span className="tabular-nums">{font.weight || '400'}</span>
+                        {font.weight || '400'}
                     </span>
-                    <span className="flex items-center gap-1.5 capitalize">
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M4 12h16m-7 6h7" />
-                        </svg>
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-zinc-50 border border-zinc-100 text-xs text-zinc-500 font-medium capitalize">
+                        {font.style && font.style.toLowerCase() !== 'normal' ? (
+                            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                            </svg>
+                        ) : (
+                            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
+                            </svg>
+                        )}
                         {font.style || 'Normal'}
                     </span>
                 </div>
 
-
                 {/* Find Alternatives Button */}
                 <motion.button
                     onClick={findAlternatives}
                     disabled={loadingAlternatives}
-                    whileTap={{ scale: 0.97 }}
+                    whileTap={{ scale: 0.98 }}
                     className={`
-            w-full py-3 px-4 mt-2
-            text-sm font-medium
-            rounded-xl
-            transition-all duration-150 ease
-            focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
-            ${loadingAlternatives
-                            ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                            : 'bg-blue-50 text-blue-600 hover:bg-blue-100 active:bg-blue-200'
+                        w-full py-2.5 px-4 text-xs font-medium rounded-xl
+                        border transition-all duration-150 flex items-center justify-center gap-2
+                        ${loadingAlternatives
+                            ? 'border-zinc-100 bg-zinc-50 text-zinc-400 cursor-not-allowed'
+                            : alternatives.length > 0 && showAlternatives
+                                ? 'border-zinc-200 bg-zinc-50 text-zinc-600 hover:bg-zinc-100'
+                                : 'border-zinc-200 bg-white text-zinc-600 hover:bg-zinc-50 hover:border-zinc-300'
                         }
-          `}
+                    `}
                 >
                     {loadingAlternatives ? (
-                        <span className="flex items-center justify-center gap-2">
-                            <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24">
+                        <>
+                            <svg className="animate-spin w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24">
                                 <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" fill="none" />
                                 <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                             </svg>
                             Finding alternatives…
-                        </span>
+                        </>
                     ) : (
-                        <span className="flex items-center justify-center gap-2">
-                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                        <>
+                            <svg className="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                             </svg>
-                            {alternatives.length > 0 ? (showAlternatives ? 'Hide' : 'Show') + ' Free Alternatives' : 'Find Free Alternatives'}
-                        </span>
+                            {alternatives.length > 0
+                                ? (showAlternatives ? 'Hide Alternatives' : 'Show Free Alternatives')
+                                : 'Find Free Alternatives'}
+                            {alternatives.length > 0 && (
+                                <span className="ml-auto text-zinc-400 tabular-nums">{alternatives.length}</span>
+                            )}
+                        </>
                     )}
                 </motion.button>
 
-                {/* Alternatives Display */}
+                {/* Alternatives */}
                 <AnimatePresence>
                     {showAlternatives && alternatives.length > 0 && (
                         <motion.div
                             initial={{ opacity: 0, height: 0 }}
                             animate={{ opacity: 1, height: 'auto' }}
                             exit={{ opacity: 0, height: 0 }}
-                            transition={{ duration: 0.2 }}
-                            className="mt-4 pt-4 border-t border-gray-100"
+                            transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}
+                            className="overflow-hidden"
                         >
-                            <h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-3 flex items-center gap-2">
-                                <svg className="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                </svg>
-                                Free Alternatives
-                            </h4>
-                            <div className="space-y-2">
-                                {alternatives.map((alt, i) => (
-                                    <motion.a
-                                        key={i}
-                                        href={alt.downloadUrl}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        initial={{ opacity: 0, x: -10 }}
-                                        animate={{ opacity: 1, x: 0 }}
-                                        transition={{ delay: i * 0.05 }}
-                                        className="block p-3 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors duration-150 group"
-                                    >
-                                        <div className="flex items-center justify-between">
-                                            <div className="flex-1 min-w-0 mr-3">
-                                                <div className="flex items-center gap-2">
-                                                    <p className="font-medium text-gray-900 text-sm group-hover:text-blue-600 transition-colors">
+                            <div className="mt-3 pt-3 border-t border-zinc-100">
+                                <p className="text-[11px] font-medium text-zinc-400 uppercase tracking-wider mb-2.5">
+                                    Free Alternatives
+                                </p>
+                                <div className="space-y-1.5">
+                                    {alternatives.map((alt, i) => (
+                                        <motion.a
+                                            key={i}
+                                            href={alt.downloadUrl}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            initial={{ opacity: 0, x: -8 }}
+                                            animate={{ opacity: 1, x: 0 }}
+                                            transition={{ delay: i * 0.04 }}
+                                            className="flex items-center justify-between p-2.5 bg-zinc-50 hover:bg-zinc-100 rounded-lg transition-colors duration-100 group/alt"
+                                        >
+                                            <div className="flex items-center gap-2.5 min-w-0">
+                                                <div className="w-6 h-6 rounded-md bg-white border border-zinc-200 flex items-center justify-center shrink-0 text-[10px] font-bold text-zinc-500 group-hover/alt:border-zinc-300">
+                                                    {alt.family.charAt(0)}
+                                                </div>
+                                                <div className="min-w-0">
+                                                    <p className="text-xs font-medium text-zinc-800 truncate group-hover/alt:text-zinc-900">
                                                         {alt.family}
                                                     </p>
-                                                    {alt.similarity != null && alt.similarity > 0 && (
-                                                        <span className={`text-xs font-medium px-1.5 py-0.5 rounded-md ${
-                                                            alt.similarity >= 80 ? 'bg-green-50 text-green-600' :
-                                                            alt.similarity >= 60 ? 'bg-yellow-50 text-yellow-600' :
-                                                            'bg-gray-100 text-gray-500'
-                                                        }`}>
-                                                            {alt.similarity}%
-                                                        </span>
+                                                    {(alt.reason || alt.category) && (
+                                                        <p className="text-[11px] text-zinc-400 truncate">
+                                                            {alt.reason || alt.category}
+                                                        </p>
                                                     )}
                                                 </div>
-                                                <p className="text-xs text-gray-400 mt-0.5">
-                                                    {alt.reason || alt.category}
-                                                </p>
                                             </div>
-                                            <svg className="w-4 h-4 text-gray-400 group-hover:text-blue-600 transition-colors flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                                            </svg>
-                                        </div>
-                                    </motion.a>
-                                ))}
+                                            <div className="flex items-center gap-2 shrink-0 ml-2">
+                                                {alt.similarity != null && alt.similarity > 0 && (
+                                                    <span className={`text-[11px] font-medium px-1.5 py-0.5 rounded-md ${
+                                                        alt.similarity >= 80 ? 'bg-emerald-50 text-emerald-600' :
+                                                        alt.similarity >= 60 ? 'bg-amber-50 text-amber-600' :
+                                                        'bg-zinc-100 text-zinc-500'
+                                                    }`}>
+                                                        {alt.similarity}%
+                                                    </span>
+                                                )}
+                                                <svg className="w-3.5 h-3.5 text-zinc-400 group-hover/alt:text-zinc-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                                                </svg>
+                                            </div>
+                                        </motion.a>
+                                    ))}
+                                </div>
+                                <p className="text-[11px] text-zinc-400 mt-2.5">
+                                    Free to use commercially via Google Fonts
+                                </p>
                             </div>
-                            <p className="text-xs text-gray-400 mt-3 italic">
-                                These Google Fonts are free to use commercially and personally
-                            </p>
                         </motion.div>
                     )}
                 </AnimatePresence>
diff --git a/app/components/HeroSection.tsx b/app/components/HeroSection.tsx
index e4cba29..6b381bd 100644
--- a/app/components/HeroSection.tsx
+++ b/app/components/HeroSection.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from  'motion/react';
+import { motion, AnimatePresence } from 'motion/react';
 
 const fonts = [
     { name: 'Heading', family: 'CustomHeading, sans-serif' },
@@ -29,65 +29,73 @@ export default function HeroSection() {
     const currentFont = fonts[currentFontIndex];
 
     return (
-        <section className="relative pt-32 pb-16 px-6">
+        <section className="relative pt-28 pb-12 px-6">
             <div className="relative max-w-4xl mx-auto text-center">
-                {/* Eyebrow */}
-                <motion.p
-                    initial={{ opacity: 0, y: 10 }}
+
+                {/* Eyebrow chip */}
+                <motion.div
+                    initial={{ opacity: 0, y: 8 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ duration: 0.5, ease: [0.23, 1, 0.32, 1] }}
-                    className="text-sm font-medium text-gray-500 tracking-wide uppercase mb-6"
+                    className="inline-flex items-center gap-2 mb-8"
                 >
-                    Font Discovery Tool
-                </motion.p>
+                    <div className="flex items-center gap-2 px-3 py-1.5 bg-white border border-zinc-200 rounded-full shadow-sm">
+                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 shrink-0" />
+                        <span className="text-xs font-medium text-zinc-500 tracking-wide uppercase">
+                            Font Discovery Tool
+                        </span>
+                    </div>
+                </motion.div>
 
-                {/* Main Heading - Clickable to switch fonts */}
+                {/* Main Heading - clickable to switch fonts */}
                 <motion.h1
-                    initial={{ opacity: 0, y: 20 }}
+                    initial={{ opacity: 0, y: 16 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ duration: 0.6, ease: [0.23, 1, 0.32, 1], delay: 0.1 }}
                     className="relative"
                 >
                     <button
                         onClick={handleFontSwitch}
-                        className="group relative cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-4 rounded-lg"
+                        className="group relative cursor-pointer focus:outline-none rounded-lg"
                         aria-label={`Currently using ${currentFont.name} font. Click to switch fonts.`}
                     >
                         <AnimatePresence mode="wait">
                             <motion.span
                                 key={currentFontIndex}
-                                initial={{ opacity: 0, y: 20, filter: 'blur(4px)' }}
+                                initial={{ opacity: 0, y: 16, filter: 'blur(6px)' }}
                                 animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
-                                exit={{ opacity: 0, y: -20, filter: 'blur(4px)' }}
-                                transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
-                                className="block text-6xl md:text-8xl font-semibold text-gray-900 tracking-tight leading-none"
+                                exit={{ opacity: 0, y: -16, filter: 'blur(6px)' }}
+                                transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
+                                className="block text-5xl md:text-7xl lg:text-8xl font-semibold text-zinc-950 tracking-tight leading-[1.05]"
                                 style={{ fontFamily: currentFont.family }}
                             >
                                 Analyze Any Font
                             </motion.span>
                         </AnimatePresence>
 
-                        {/* Font indicator badge */}
+                        {/* Font indicator */}
                         <motion.span
-                            initial={{ opacity: 0, scale: 0.9 }}
-                            animate={{ opacity: 1, scale: 1 }}
-                            transition={{ delay: 0.3 }}
-                            className="absolute -bottom-8 left-1/2 -translate-x-1/2 inline-flex items-center gap-2 text-xs font-medium text-gray-400 group-hover:text-gray-600 transition-colors duration-150"
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            transition={{ delay: 0.4 }}
+                            className="absolute -bottom-7 left-1/2 -translate-x-1/2 inline-flex items-center gap-1.5 text-xs text-zinc-400 group-hover:text-zinc-600 transition-colors duration-150 whitespace-nowrap"
                         >
-                            <span className="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-gray-400 transition-colors duration-150" />
-                            {currentFont.name}
-                            <span className="text-gray-300">·</span>
-                            <span className="text-gray-400 group-hover:text-gray-500">Click to switch</span>
+                            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h7" />
+                            </svg>
+                            <span className="font-medium">{currentFont.name}</span>
+                            <span className="text-zinc-300">·</span>
+                            <span>click to switch</span>
                         </motion.span>
                     </button>
                 </motion.h1>
 
                 {/* Subtitle */}
                 <motion.p
-                    initial={{ opacity: 0, y: 20 }}
+                    initial={{ opacity: 0, y: 16 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ duration: 0.6, ease: [0.23, 1, 0.32, 1], delay: 0.2 }}
-                    className="mt-16 text-lg md:text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed"
+                    className="mt-14 text-base md:text-lg text-zinc-500 max-w-xl mx-auto leading-relaxed"
                 >
                     Enter any website URL to instantly discover every font it uses.
                     Preview them live and find free alternatives.
diff --git a/app/components/SearchInput.tsx b/app/components/SearchInput.tsx
index 0f52ba8..5c2bd27 100644
--- a/app/components/SearchInput.tsx
+++ b/app/components/SearchInput.tsx
@@ -24,38 +24,46 @@ export default function SearchInput({ onSearch, loading }: SearchInputProps) {
         onSearch(targetUrl);
     };
 
+    const examples = [
+        { label: 'stripe.com', url: 'stripe.com' },
+        { label: 'linear.app', url: 'linear.app' },
+        { label: 'vercel.com', url: 'vercel.com' },
+    ];
+
     return (
         <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 16 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, ease: [0.23, 1, 0.32, 1], delay: 0.3 }}
             className="w-full max-w-2xl mx-auto px-6"
         >
             <form onSubmit={handleSubmit}>
+                {/* Search bar */}
                 <div
                     className={`
-            relative flex items-center
-            bg-white rounded-2xl
-            transition-shadow duration-200 ease
-            ${isFocused
-                            ? 'shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_4px_24px_-4px_rgba(0,0,0,0.12)]'
-                            : 'shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_2px_8px_-2px_rgba(0,0,0,0.08)]'
+                        relative flex items-center bg-white rounded-2xl
+                        transition-all duration-200
+                        ${isFocused
+                            ? 'shadow-[0_0_0_1.5px_rgba(9,9,11,0.12),0_8px_32px_-8px_rgba(0,0,0,0.14)]'
+                            : 'shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_2px_12px_-4px_rgba(0,0,0,0.08)]'
                         }
-          `}
+                    `}
                 >
-                    {/* Search Icon */}
-                    <div className="pl-5 pr-2">
+                    {/* Globe icon */}
+                    <div className="pl-4 pr-2 shrink-0">
                         <svg
-                            className={`w-5 h-5 transition-colors duration-150 ${isFocused ? 'text-gray-500' : 'text-gray-400'}`}
+                            className={`w-4.5 h-4.5 transition-colors duration-150 ${isFocused ? 'text-zinc-600' : 'text-zinc-400'}`}
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24"
+                            width="18"
+                            height="18"
                         >
                             <path
                                 strokeLinecap="round"
                                 strokeLinejoin="round"
                                 strokeWidth={1.5}
-                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                                d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
                             />
                         </svg>
                     </div>
@@ -68,78 +76,73 @@ export default function SearchInput({ onSearch, loading }: SearchInputProps) {
                         onChange={(e) => setUrl(e.target.value)}
                         onFocus={() => setIsFocused(true)}
                         onBlur={() => setIsFocused(false)}
-                        placeholder="Enter website URL"
-                        className="
-              flex-1 
-              py-4 px-2 
-              text-base text-gray-900 
-              placeholder:text-gray-400
-              bg-transparent 
-              outline-none
-              min-w-0
-            "
-                        style={{ fontSize: '16px' }} /* Prevent iOS zoom */
+                        placeholder="Enter any website URL…"
+                        className="flex-1 py-3.5 px-2 text-[15px] text-zinc-900 placeholder:text-zinc-400 bg-transparent outline-none min-w-0"
+                        style={{ fontSize: '16px' }}
                     />
 
-                    {/* Submit Button */}
-                    <div className="pr-2">
+                    {/* Divider + Submit */}
+                    <div className="pr-1.5 shrink-0 flex items-center">
+                        {url.trim() && (
+                            <button
+                                type="button"
+                                onClick={() => setUrl('')}
+                                className="mr-1 p-1.5 text-zinc-400 hover:text-zinc-600 transition-colors rounded-lg hover:bg-zinc-100"
+                            >
+                                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        )}
                         <motion.button
                             type="submit"
                             disabled={loading || !url.trim()}
-                            whileTap={{ scale: 0.97 }}
+                            whileTap={{ scale: 0.96 }}
                             className={`
-                px-5 py-2.5
-                text-sm font-medium
-                rounded-xl
-                transition-all duration-150 ease
-                outline-none
-                ${loading || !url.trim()
-                                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                                    : 'bg-gray-900 text-white hover:bg-gray-800 active:bg-gray-950'
+                                flex items-center gap-2 px-4 py-2 text-[13px] font-medium rounded-xl
+                                transition-all duration-150
+                                ${loading || !url.trim()
+                                    ? 'bg-zinc-100 text-zinc-400 cursor-not-allowed'
+                                    : 'bg-zinc-950 text-white hover:bg-zinc-800 shadow-sm'
                                 }
-              `}
+                            `}
                         >
                             {loading ? (
-                                <span className="flex items-center gap-2">
-                                    <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24">
-                                        <circle
-                                            className="opacity-25"
-                                            cx="12" cy="12" r="10"
-                                            stroke="currentColor"
-                                            strokeWidth="3"
-                                            fill="none"
-                                        />
-                                        <path
-                                            className="opacity-75"
-                                            fill="currentColor"
-                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                                        />
+                                <>
+                                    <svg className="animate-spin w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24">
+                                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" fill="none" />
+                                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                                     </svg>
                                     Scanning
-                                </span>
+                                </>
                             ) : (
-                                'Extract'
+                                <>
+                                    Extract
+                                    <svg className="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                                    </svg>
+                                </>
                             )}
                         </motion.button>
                     </div>
                 </div>
 
-                {/* Helper text */}
-                <p className="mt-3 text-center text-sm text-gray-400">
-                    Try <button
-                        type="button"
-                        onClick={() => { setUrl('stripe.com'); inputRef.current?.focus(); }}
-                        className="text-gray-500 hover:text-gray-700 underline underline-offset-2 transition-colors duration-150"
-                    >stripe.com</button>, <button
-                        type="button"
-                        onClick={() => { setUrl('linear.app'); inputRef.current?.focus(); }}
-                        className="text-gray-500 hover:text-gray-700 underline underline-offset-2 transition-colors duration-150"
-                    >linear.app</button>, or <button
-                        type="button"
-                        onClick={() => { setUrl('vercel.com'); inputRef.current?.focus(); }}
-                        className="text-gray-500 hover:text-gray-700 underline underline-offset-2 transition-colors duration-150"
-                    >vercel.com</button>
-                </p>
+                {/* Examples */}
+                <div className="mt-3 flex items-center justify-center gap-1.5 text-xs text-zinc-400">
+                    <span>Try</span>
+                    {examples.map((ex, i) => (
+                        <span key={ex.url} className="inline-flex items-center gap-1.5">
+                            <button
+                                type="button"
+                                onClick={() => { setUrl(ex.url); inputRef.current?.focus(); }}
+                                className="text-zinc-500 hover:text-zinc-800 transition-colors duration-100 font-medium"
+                            >
+                                {ex.label}
+                            </button>
+                            {i < examples.length - 1 && <span className="text-zinc-300">·</span>}
+                        </span>
+                    ))}
+                </div>
             </form>
         </motion.div>
     );
diff --git a/app/globals.css b/app/globals.css
index 898bbdd..b66ffe8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -19,21 +19,22 @@
 }
 
 :root {
-  --background: #ffffff;
-  --foreground: #0a0a0a;
-
-  /* Gray scale */
-  --gray-50: #fafafa;
-  --gray-100: #f5f5f5;
-  --gray-200: #e5e5e5;
-  --gray-300: #d4d4d4;
-  --gray-400: #a3a3a3;
-  --gray-500: #737373;
-  --gray-600: #525252;
-  --gray-700: #404040;
-  --gray-800: #262626;
-  --gray-900: #171717;
-  --gray-950: #0a0a0a;
+  --background: #fafafa;
+  --surface: #ffffff;
+  --foreground: #09090b;
+
+  /* Zinc scale */
+  --zinc-50: #fafafa;
+  --zinc-100: #f4f4f5;
+  --zinc-200: #e4e4e7;
+  --zinc-300: #d4d4d8;
+  --zinc-400: #a1a1aa;
+  --zinc-500: #71717a;
+  --zinc-600: #52525b;
+  --zinc-700: #3f3f46;
+  --zinc-800: #27272a;
+  --zinc-900: #18181b;
+  --zinc-950: #09090b;
 }
 
 @theme inline {
@@ -43,6 +44,10 @@
   --font-mono: var(--font-geist-mono);
 }
 
+html {
+  background: var(--background);
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
@@ -74,13 +79,13 @@ h6 {
 /* Selection */
 ::selection {
   background: rgba(0, 0, 0, 0.08);
-  color: var(--gray-900);
+  color: var(--zinc-900);
 }
 
 /* Scrollbar - only for specific containers */
 .custom-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 4px;
+  height: 4px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-track {
@@ -88,12 +93,12 @@ h6 {
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-300);
-  border-radius: 3px;
+  background: var(--zinc-300);
+  border-radius: 2px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-400);
+  background: var(--zinc-400);
 }
 
 /* Reduced motion */
@@ -126,4 +131,33 @@ only screen and (min-resolution: 192dpi) {
   .hairline-border {
     border-width: 0.5px;
   }
-}
\ No newline at end of file
+}
+
+/* Grid background */
+.bg-grid {
+  background-color: var(--background);
+  background-image:
+    linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+/* Format accent colors */
+.format-woff2 { --accent: #10b981; }
+.format-woff  { --accent: #3b82f6; }
+.format-ttf   { --accent: #8b5cf6; }
+.format-otf   { --accent: #f59e0b; }
+.format-eot   { --accent: #ef4444; }
+.format-other { --accent: #71717a; }
+
+/* Shimmer loading effect */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.shimmer {
+  background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 50%, #f4f4f5 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
diff --git a/app/page.tsx b/app/page.tsx
index 9215eb6..c12d0c7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -33,7 +33,6 @@ export default function Home() {
         throw new Error(data.error || 'Failed to extract fonts');
       }
 
-      // Sort fonts: normal style first, then regular weight (400) preferred
       const sortedFonts = [...data.fonts].sort((a: FontInfo, b: FontInfo) => {
         const aIsItalic = a.style?.toLowerCase().includes('italic') ? 1 : 0;
         const bIsItalic = b.style?.toLowerCase().includes('italic') ? 1 : 0;
@@ -60,81 +59,107 @@ export default function Home() {
   };
 
   return (
-    <main className="min-h-screen bg-white relative">
-      {/* Background Pattern */}
-      <div className="fixed inset-0 h-full w-full bg-white pointer-events-none">
-        <div className="absolute h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"></div>
-      </div>
+    <main className="min-h-screen bg-grid relative">
+      {/* Top fade mask over grid */}
+      <div className="fixed inset-0 pointer-events-none" style={{
+        background: 'radial-gradient(ellipse 80% 60% at 50% 0%, rgba(250,250,250,0.0) 0%, transparent 100%)'
+      }} />
+
+      {/* Top navigation bar */}
+      <header className="relative z-20 border-b border-zinc-200/60 bg-white/70 backdrop-blur-sm">
+        <div className="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
+          <div className="flex items-center gap-2.5">
+            <div className="w-6 h-6 rounded-md bg-zinc-950 flex items-center justify-center">
+              <svg className="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h7" />
+              </svg>
+            </div>
+            <span className="text-sm font-semibold text-zinc-800 tracking-tight">Font Analyzer</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-xs text-zinc-400 px-2 py-1 bg-zinc-50 border border-zinc-200 rounded-lg font-medium">
+              WOFF · WOFF2 · TTF · OTF
+            </span>
+          </div>
+        </div>
+      </header>
 
       {/* Content */}
       <div className="relative z-10">
-        {/* Hero Section */}
+        {/* Hero */}
         <HeroSection />
 
-        {/* Search Input */}
-        <div className="mt-10">
+        {/* Search */}
+        <div className="mt-8">
           <SearchInput onSearch={handleSearch} loading={loading} />
         </div>
 
-        {/* Results Section */}
-        <section className="max-w-6xl mx-auto px-6 py-16">
-          {/* Error Message */}
+        {/* Results */}
+        <section className="max-w-6xl mx-auto px-6 py-14">
+          {/* Error */}
           <AnimatePresence mode="wait">
             {error && (
               <motion.div
-                initial={{ opacity: 0, y: 10 }}
+                initial={{ opacity: 0, y: 8 }}
                 animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -10 }}
-                transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}
-                className="mb-8 p-4 bg-red-50 border border-red-100 rounded-xl text-red-600 text-center text-sm"
+                exit={{ opacity: 0, y: -8 }}
+                transition={{ duration: 0.2 }}
+                className="mb-8 p-4 bg-red-50 border border-red-100 rounded-xl text-red-600 text-sm text-center"
               >
                 {error}
               </motion.div>
             )}
           </AnimatePresence>
 
-          {/* Results Header */}
+          {/* Results header + preview input */}
           <AnimatePresence mode="wait">
             {fonts.length > 0 && (
               <motion.div
-                initial={{ opacity: 0, y: 10 }}
+                initial={{ opacity: 0, y: 8 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0 }}
-                transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
-                className="mb-8"
+                transition={{ duration: 0.3 }}
+                className="mb-6"
               >
-                <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wide">
-                  Found {fonts.length} {fonts.length === 1 ? 'font' : 'fonts'}
-                </h2>
+                <div className="flex flex-col sm:flex-row sm:items-center gap-4 mb-5">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-medium text-zinc-500 uppercase tracking-wider">
+                      {fonts.length} {fonts.length === 1 ? 'font' : 'fonts'} found
+                    </span>
+                    <span className="w-1 h-1 rounded-full bg-zinc-300" />
+                    <span className="text-xs text-zinc-400">sorted alphabetically</span>
+                  </div>
+                </div>
+
+                {/* Custom preview text */}
+                <div className="relative">
+                  <div className="absolute inset-y-0 left-3.5 flex items-center pointer-events-none">
+                    <svg className="w-3.5 h-3.5 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                    </svg>
+                  </div>
+                  <input
+                    type="text"
+                    value={previewText}
+                    onChange={(e) => setPreviewText(e.target.value)}
+                    placeholder="Custom preview text…"
+                    className="w-full pl-9 pr-10 py-2.5 bg-white border border-zinc-200 rounded-xl text-sm text-zinc-900 placeholder:text-zinc-400 focus:outline-none focus:border-zinc-400 transition-all duration-150 shadow-sm"
+                  />
+                  {previewText && (
+                    <button
+                      onClick={() => setPreviewText('')}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 transition-colors p-0.5 rounded"
+                    >
+                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </button>
+                  )}
+                </div>
               </motion.div>
             )}
           </AnimatePresence>
 
-          {/* Custom Preview Text */}
-          {fonts.length > 0 && (
-            <div className="mb-6">
-              <div className="relative">
-                <input
-                  type="text"
-                  value={previewText}
-                  onChange={(e) => setPreviewText(e.target.value)}
-                  placeholder="Type custom preview text…"
-                  className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent transition-all duration-150"
-                />
-                {previewText && (
-                  <button
-                    onClick={() => setPreviewText('')}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                  </button>
-                )}
-              </div>
-            </div>
-          )}
-
           {/* Font Grid */}
           <AnimatePresence mode="wait">
             {fonts.length > 0 && (
@@ -149,53 +174,62 @@ export default function Home() {
             )}
           </AnimatePresence>
 
-          {/* Empty State */}
+          {/* Empty state */}
           <AnimatePresence mode="wait">
             {searched && !loading && fonts.length === 0 && !error && (
               <motion.div
-                initial={{ opacity: 0, y: 20 }}
+                initial={{ opacity: 0, y: 16 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0 }}
-                transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
-                className="text-center py-16"
+                transition={{ duration: 0.3 }}
+                className="text-center py-20"
               >
-                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
-                  <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-zinc-100 flex items-center justify-center">
+                  <svg className="w-6 h-6 text-zinc-400" 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" />
                   </svg>
                 </div>
-                <p className="text-gray-500">No fonts found on this website</p>
+                <p className="text-sm text-zinc-500">No fonts found on this website</p>
+                <p className="text-xs text-zinc-400 mt-1">Try a different URL</p>
               </motion.div>
             )}
           </AnimatePresence>
         </section>
 
         {/* Footer */}
-        <footer className="py-16 border-t border-gray-200 mt-20">
-          <div className="max-w-5xl mx-auto px-6">
-            <p className="text-base font-medium text-gray-400 uppercase tracking-wider mb-6">Supports WOFF, WOFF2, TTF, and OTF formats</p>
-            
-            <div className="space-y-5 text-lg text-gray-500 leading-relaxed">
-              <h3 className="text-xl font-bold text-gray-700 uppercase tracking-wide">Disclaimer</h3>
-              
-              <p className="text-lg">
-                Analyze Any Font is a developer utility designed to help designers and developers inspect and identify typography used on the web for testing and research purposes.
-              </p>
-
-              <p className="text-lg">
-                <span className="font-semibold text-gray-700">Respect Licenses:</span> Many web fonts are licensed software. Identifying a font does not grant you a license to use it. You are responsible for ensuring you have the appropriate rights or licenses for any font you reuse.
-              </p>
-
-              <p className="text-lg">
-                <span className="font-semibold text-gray-700">No Circumvention:</span> This tool only detects styles that are already sent to your browser for rendering. It does not bypass DRM, decrypt secured files, or access private directories.
-              </p>
-
-              <p className="text-lg">
-                <span className="font-semibold text-gray-700">User Responsibility:</span> The author of this tool assumes no liability for the misuse of information provided. Please support type foundries by purchasing proper licenses for your projects.
-              </p>
-            </div>
+        <footer className="border-t border-zinc-200/80 mt-8 bg-white/50">
+          <div className="max-w-5xl mx-auto px-6 py-12">
+            <div className="flex flex-col sm:flex-row sm:items-start gap-8">
+              {/* Brand */}
+              <div className="shrink-0">
+                <div className="flex items-center gap-2 mb-2">
+                  <div className="w-5 h-5 rounded bg-zinc-950 flex items-center justify-center">
+                    <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h7" />
+                    </svg>
+                  </div>
+                  <span className="text-sm font-semibold text-zinc-800">Font Analyzer</span>
+                </div>
+                <p className="text-xs text-zinc-400">&copy; {new Date().getFullYear()} · Built for designers</p>
+              </div>
 
-            <p className="mt-10 text-base text-gray-400">&copy; {new Date().getFullYear()} Analyze Any Font. Built for the design community.</p>
+              {/* Disclaimer */}
+              <div className="flex-1 space-y-3 text-xs text-zinc-500 leading-relaxed border-l border-zinc-200 pl-8">
+                <p className="font-medium text-zinc-600 uppercase tracking-wider text-[11px]">Disclaimer</p>
+                <p>
+                  A developer utility to inspect and identify typography used on the web for testing and research.
+                </p>
+                <p>
+                  <span className="font-medium text-zinc-700">Respect licenses:</span> Identifying a font does not grant you a license to use it. Ensure you have the appropriate rights for any font you reuse.
+                </p>
+                <p>
+                  <span className="font-medium text-zinc-700">No circumvention:</span> This tool only detects styles already sent to your browser. It does not bypass DRM or access private files.
+                </p>
+                <p>
+                  <span className="font-medium text-zinc-700">User responsibility:</span> Please support type foundries by purchasing proper licenses for your projects.
+                </p>
+              </div>
+            </div>
           </div>
         </footer>
       </div>