diff --git a/frontend/src/components/analyze/AnalyzePanel.tsx b/frontend/src/components/analyze/AnalyzePanel.tsx
index 832419c..9a46b88 100644
--- a/frontend/src/components/analyze/AnalyzePanel.tsx
+++ b/frontend/src/components/analyze/AnalyzePanel.tsx
@@ -285,12 +285,12 @@ export function AnalyzePanel() {
       <div className="absolute right-0 top-0 bottom-0 w-full sm:w-[560px] lg:w-[640px] bg-[#030303] border-l border-white/[0.08] flex flex-col overflow-hidden">
         
         {/* Header */}
-        <div className="shrink-0 border-b border-white/[0.06]">
+        <div className="shrink-0 border-b border-white/[0.08]">
           {/* Top Bar */}
-          <div className="px-4 py-3 flex items-center justify-between gap-4">
+          <div className="px-5 py-4 flex items-center justify-between gap-4">
             <div className="min-w-0">
-              <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider mb-0.5">Analysis</div>
-              <div className="text-base font-bold text-white font-mono truncate">
+              <div className="text-[10px] font-mono text-white/50 uppercase tracking-wider mb-1">Domain Analysis</div>
+              <div className="text-xl font-bold text-white font-mono truncate">
                 {headerDomain}
               </div>
             </div>
@@ -303,33 +303,33 @@ export function AnalyzePanel() {
                   setTimeout(() => setCopied(false), 1500)
                 }}
                 className={clsx(
-                  "w-8 h-8 flex items-center justify-center transition-all",
-                  copied ? "text-accent" : "text-white/30 hover:text-white"
+                  "w-9 h-9 flex items-center justify-center transition-all border border-white/[0.08]",
+                  copied ? "text-accent bg-accent/10" : "text-white/50 hover:text-white hover:bg-white/[0.05]"
                 )}
                 title="Copy domain"
               >
-                {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
+                {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
               </button>
               <a
                 href={`https://${encodeURIComponent(headerDomain)}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-8 h-8 flex items-center justify-center text-white/30 hover:text-white transition-colors"
+                className="w-9 h-9 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/[0.05] transition-colors border border-white/[0.08]"
                 title="Visit domain"
               >
-                <ExternalLink className="w-3.5 h-3.5" />
+                <ExternalLink className="w-4 h-4" />
               </a>
               <button
                 onClick={refresh}
                 disabled={loading}
-                className="w-8 h-8 flex items-center justify-center text-white/30 hover:text-white transition-colors disabled:opacity-50"
+                className="w-9 h-9 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/[0.05] transition-colors border border-white/[0.08] disabled:opacity-50"
                 title="Refresh"
               >
-                <RefreshCw className={clsx('w-3.5 h-3.5', loading && 'animate-spin')} />
+                <RefreshCw className={clsx('w-4 h-4', loading && 'animate-spin')} />
               </button>
               <button 
                 onClick={close} 
-                className="w-8 h-8 flex items-center justify-center text-white/30 hover:text-white transition-colors"
+                className="w-9 h-9 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/[0.05] transition-colors border border-white/[0.08]"
                 title="Close (ESC)"
               >
                 <X className="w-4 h-4" />
@@ -337,49 +337,53 @@ export function AnalyzePanel() {
             </div>
           </div>
 
-          {/* Score Bar - Compact */}
+          {/* Score Bar */}
           {overallScore && !loading && (
-            <div className="px-4 pb-3">
-              <div className="flex items-center gap-3">
+            <div className="px-5 pb-4">
+              <div className="flex items-center gap-4 p-4 bg-white/[0.02] border border-white/[0.08]">
                 <div 
                   className={clsx(
-                    "w-12 h-12 flex items-center justify-center border",
-                    overallScore.score >= 70 ? "border-accent/30 text-accent" : 
-                    overallScore.score >= 40 ? "border-amber-400/30 text-amber-400" : "border-rose-500/30 text-rose-400"
+                    "w-16 h-16 flex items-center justify-center border-2",
+                    overallScore.score >= 70 ? "border-accent bg-accent/10 text-accent" : 
+                    overallScore.score >= 40 ? "border-amber-400 bg-amber-400/10 text-amber-400" : "border-rose-500 bg-rose-500/10 text-rose-400"
                   )}
                 >
-                  <span className="text-xl font-bold font-mono">{overallScore.score}</span>
+                  <span className="text-2xl font-bold font-mono">{overallScore.score}</span>
                 </div>
                 <div className="flex-1 min-w-0">
-                  <div className="h-1.5 bg-white/[0.05] overflow-hidden flex mb-2">
+                  <div className="text-sm font-bold text-white mb-2">Health Score</div>
+                  <div className="h-2 bg-white/[0.05] overflow-hidden flex mb-2">
                     <div className="h-full bg-accent" style={{ width: `${(overallScore.pass / overallScore.total) * 100}%` }} />
                     <div className="h-full bg-amber-400" style={{ width: `${(overallScore.warn / overallScore.total) * 100}%` }} />
                     <div className="h-full bg-rose-500" style={{ width: `${(overallScore.fail / overallScore.total) * 100}%` }} />
                   </div>
-                  <div className="flex items-center gap-3 text-[10px] font-mono text-white/40">
-                    <span className="text-accent">{overallScore.pass} ok</span>
-                    <span className="text-amber-400">{overallScore.warn} warn</span>
-                    <span className="text-rose-400">{overallScore.fail} fail</span>
+                  <div className="flex items-center gap-4 text-xs font-mono">
+                    <span className="text-accent">{overallScore.pass} passed</span>
+                    <span className="text-amber-400">{overallScore.warn} warnings</span>
+                    <span className="text-rose-400">{overallScore.fail} failed</span>
                   </div>
                 </div>
               </div>
             </div>
           )}
 
-          {/* Controls - Minimal */}
-          <div className="px-4 pb-3 flex items-center gap-2">
+          {/* Controls */}
+          <div className="px-5 pb-3 flex items-center gap-3">
             <button
               onClick={() => setFastMode(!fastMode)}
               className={clsx(
-                "flex items-center gap-1 px-2 py-1 text-[9px] font-mono uppercase transition-all",
-                fastMode ? "text-accent" : "text-white/30 hover:text-white"
+                "flex items-center gap-1.5 px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider border transition-all",
+                fastMode ? "text-accent border-accent/30 bg-accent/10" : "text-white/50 border-white/[0.08] hover:text-white hover:bg-white/[0.05]"
               )}
             >
-              <Zap className="w-3 h-3" />
-              Fast
+              <Zap className="w-3.5 h-3.5" />
+              Fast Mode
             </button>
             {data?.cached && (
-              <span className="text-[9px] font-mono text-white/20">cached</span>
+              <span className="text-[10px] font-mono text-white/40 flex items-center gap-1.5">
+                <Clock className="w-3 h-3" />
+                Cached
+              </span>
             )}
           </div>
         </div>
@@ -419,31 +423,31 @@ export function AnalyzePanel() {
                     {/* Section Header */}
                     <button
                       onClick={() => toggleSection(section.key)}
-                      className="w-full px-4 py-3 flex items-center justify-between transition-colors group hover:bg-white/[0.02]"
+                      className="w-full px-4 py-3 flex items-center justify-between transition-colors group hover:bg-white/[0.03]"
                       title={(config as any).tooltip || ''}
                     >
                       <div className="flex items-center gap-3">
-                        <SectionIcon className="w-4 h-4 text-white/40" />
+                        <SectionIcon className="w-4 h-4 text-white/60" />
                         <div className="text-left">
-                          <span className="text-[11px] font-bold uppercase tracking-wider text-white/70">
+                          <span className="text-xs font-bold uppercase tracking-wider text-white">
                             {section.title}
                           </span>
-                          <div className="text-[10px] font-mono text-white/30">
+                          <div className="text-[10px] font-mono text-white/50">
                             {config.description}
                           </div>
                         </div>
                       </div>
                       <div className="flex items-center gap-2">
                         {section.key !== 'vision' && section.items.length > 0 && (
-                          <span className="text-[10px] font-mono text-white/30">
+                          <span className="text-[10px] font-mono text-white/40">
                             {section.items.length}
                           </span>
                         )}
                         {section.key === 'vision' && (
-                          <span className="text-[9px] font-mono text-accent/70 uppercase">AI</span>
+                          <span className="text-[10px] font-mono text-accent uppercase">AI</span>
                         )}
                         <ChevronRight className={clsx(
-                          "w-4 h-4 text-white/20 transition-transform",
+                          "w-4 h-4 text-white/40 transition-transform",
                           isExpanded && "rotate-90"
                         )} />
                       </div>
@@ -457,7 +461,7 @@ export function AnalyzePanel() {
                             <VisionSection domain={headerDomain} />
                           </div>
                         ) : (
-                          <div className="divide-y divide-white/[0.04]">
+                          <div className="divide-y divide-white/[0.05]">
                             {section.items.map((item) => {
                               const statusStyle = getStatusColor(item.status)
                               const tooltip = getItemTooltip(item.key)
@@ -465,53 +469,62 @@ export function AnalyzePanel() {
                               return (
                                 <div 
                                   key={item.key} 
-                                  className="px-4 py-3 hover:bg-white/[0.02] transition-colors group"
+                                  className="px-4 py-3.5 hover:bg-white/[0.02] transition-colors group"
                                   title={tooltip || undefined}
                                 >
-                                  <div className="flex items-center justify-between gap-4">
-                                    {/* Label + Source */}
-                                    <div className="flex items-center gap-2 min-w-0">
-                                      <span className="text-[11px] font-medium text-white/60 truncate">
-                                        {item.label}
+                                  {isMatrix(item) ? (
+                                    /* TLD Matrix - Full Width Layout */
+                                    <div>
+                                      <div className="flex items-center justify-between mb-3">
+                                        <span className="text-sm font-medium text-white">
+                                          {item.label}
+                                        </span>
+                                        {item.source && (
+                                          <span className="text-[10px] font-mono text-white/40 uppercase">
+                                            {item.source}
+                                          </span>
+                                        )}
+                                      </div>
+                                      <div className="grid grid-cols-4 sm:grid-cols-6 gap-2">
+                                        {(item.value as any[]).slice(0, 12).map((row: any) => (
+                                          <div
+                                            key={String(row.domain)}
+                                            className={clsx(
+                                              "h-10 flex items-center justify-center text-sm font-mono font-medium border",
+                                              row.status === 'available'
+                                                ? "bg-accent/10 text-accent border-accent/30"
+                                                : "bg-white/[0.02] text-white/30 border-white/[0.06]"
+                                            )}
+                                            title={`${String(row.domain).split('.').pop()}: ${row.status === 'available' ? 'Available' : 'Taken'}`}
+                                          >
+                                            .{String(row.domain).split('.').pop()}
+                                          </div>
+                                        ))}
+                                      </div>
+                                    </div>
+                                  ) : (
+                                    /* Regular Item - Row Layout */
+                                    <div className="flex items-center justify-between gap-4">
+                                      <div className="flex items-center gap-2 min-w-0">
+                                        <span className="text-sm font-medium text-white">
+                                          {item.label}
+                                        </span>
+                                        {item.source && (
+                                          <span className="text-[10px] font-mono text-white/40 uppercase shrink-0">
+                                            {item.source}
+                                          </span>
+                                        )}
+                                      </div>
+                                      <span className={clsx(
+                                        "text-base font-mono font-bold",
+                                        item.status === 'pass' ? "text-accent" : 
+                                        item.status === 'warn' ? "text-amber-400" :
+                                        item.status === 'fail' ? "text-rose-400" : "text-white/70"
+                                      )}>
+                                        {formatValue(item.value)}
                                       </span>
-                                      {item.source && (
-                                        <span className="text-[9px] font-mono text-white/20 uppercase shrink-0">
-                                          {item.source}
-                                        </span>
-                                      )}
                                     </div>
-                                    
-                                    {/* Value */}
-                                    <div className="shrink-0">
-                                      {isMatrix(item) ? (
-                                        <div className="flex gap-1">
-                                          {(item.value as any[]).slice(0, 7).map((row: any) => (
-                                            <div
-                                              key={String(row.domain)}
-                                              className={clsx(
-                                                "w-6 h-6 flex items-center justify-center text-[9px] font-mono",
-                                                row.status === 'available'
-                                                  ? "bg-accent/10 text-accent"
-                                                  : "bg-white/[0.03] text-white/20"
-                                              )}
-                                              title={`${String(row.domain).split('.').pop()}: ${row.status === 'available' ? 'Available' : 'Taken'}`}
-                                            >
-                                              .{String(row.domain).split('.').pop()?.slice(0, 2)}
-                                            </div>
-                                          ))}
-                                        </div>
-                                      ) : (
-                                        <span className={clsx(
-                                          "text-sm font-mono font-medium",
-                                          item.status === 'pass' ? "text-accent" : 
-                                          item.status === 'warn' ? "text-amber-400" :
-                                          item.status === 'fail' ? "text-rose-400" : "text-white/50"
-                                        )}>
-                                          {formatValue(item.value)}
-                                        </span>
-                                      )}
-                                    </div>
-                                  </div>
+                                  )}
                                 </div>
                               )
                             })}
@@ -527,25 +540,25 @@ export function AnalyzePanel() {
         </div>
 
         {/* Footer */}
-        <div className="shrink-0 border-t border-white/[0.06] px-4 py-2 bg-[#020202]">
-          <div className="flex items-center justify-between text-[9px] font-mono text-white/20">
-            <span>ESC to close</span>
-            <div className="flex items-center gap-3">
+        <div className="shrink-0 border-t border-white/[0.08] px-5 py-3 bg-[#020202]">
+          <div className="flex items-center justify-between text-[11px] font-mono">
+            <span className="text-white/40">Press ESC to close</span>
+            <div className="flex items-center gap-4">
               <a
                 href={`https://who.is/whois/${encodeURIComponent(headerDomain)}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="hover:text-white/50 transition-colors"
+                className="text-white/50 hover:text-white transition-colors"
               >
-                WHOIS
+                WHOIS →
               </a>
               <a
                 href={`https://web.archive.org/web/*/${encodeURIComponent(headerDomain)}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="hover:text-white/50 transition-colors"
+                className="text-white/50 hover:text-white transition-colors"
               >
-                Archive
+                Archive →
               </a>
             </div>
           </div>