diff --git a/frontend/src/components/PackageCard.jsx b/frontend/src/components/PackageCard.jsx
index a52a519..47d8b4b 100644
--- a/frontend/src/components/PackageCard.jsx
+++ b/frontend/src/components/PackageCard.jsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { CheckCircle, AlertTriangle, Star, ArrowDownToLine } from 'lucide-react';
+import { CheckCircle, AlertTriangle, Star, ArrowRight } from 'lucide-react';
 
 export default function PackageCard({ pkg }) {
   const navigate = useNavigate();
@@ -9,55 +9,61 @@ export default function PackageCard({ pkg }) {
 
   return (
     <div
-      className="card card-interactive p-5 flex flex-col gap-3"
+      className="card card-interactive p-5 flex flex-col gap-3 justify-between"
       onClick={() => navigate(`/package/${pkg.name}`)}
       role="button"
       tabIndex={0}
       onKeyDown={(e) => e.key === 'Enter' && navigate(`/package/${pkg.name}`)}
     >
-      {/* Top row: name + badge */}
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <h3 className="font-semibold truncate" style={{ color: 'var(--text-primary)', fontSize: '0.95rem' }}>
-              {pkg.name}
-            </h3>
-            {pkg.installed && <CheckCircle size={14} style={{ color: 'var(--green)', flexShrink: 0 }} />}
-            {pkg.out_of_date && <AlertTriangle size={14} style={{ color: 'var(--amber)', flexShrink: 0 }} />}
+      <div className="flex flex-col gap-2">
+        {/* Top: Name and badges */}
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-1.5 flex-wrap">
+              <h3 className="font-bold text-sm tracking-tight truncate" style={{ color: 'var(--text-primary)' }}>
+                {pkg.name}
+              </h3>
+              {pkg.installed && <CheckCircle size={13} className="text-emerald-500 shrink-0" />}
+              {pkg.out_of_date && <AlertTriangle size={13} className="text-amber-500 shrink-0" />}
+            </div>
+            <span className="text-[11px] font-mono font-medium" style={{ color: 'var(--text-tertiary)' }}>
+              {pkg.version || '—'}
+            </span>
           </div>
-          <span className="text-xs font-mono" style={{ color: 'var(--text-tertiary)' }}>
-            {pkg.version || '—'}
-          </span>
+          <span className={`badge ${sourceBadge} shrink-0`}>{sourceLabel}</span>
         </div>
-        <span className={`badge ${sourceBadge}`}>{sourceLabel}</span>
+
+        {/* Mid: Description */}
+        <p className={`text-xs leading-relaxed ${!pkg.description ? 'italic' : ''}`}
+           style={{
+             color: pkg.description ? 'var(--text-secondary)' : 'var(--text-tertiary)',
+             display: '-webkit-box',
+             WebkitLineClamp: 2,
+             WebkitBoxOrient: 'vertical',
+             overflow: 'hidden',
+             minHeight: '2.5rem'
+           }}>
+          {pkg.description || 'No description available'}
+        </p>
       </div>
 
-      {/* Description */}
-      <p className="text-sm leading-relaxed flex-1"
-         style={{ color: 'var(--text-secondary)', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
-        {pkg.description || 'No description available'}
-      </p>
-
-      {/* Footer */}
-      <div className="flex items-center justify-between pt-1"
-           style={{ borderTop: '1px solid var(--border-primary)', marginTop: 'auto' }}>
-        <div className="flex items-center gap-3 text-xs" style={{ color: 'var(--text-tertiary)' }}>
-          {pkg.votes !== undefined && (
+      {/* Bottom: Stats & Action */}
+      <div className="flex items-center justify-between pt-3 mt-1"
+           style={{ borderTop: '1px solid var(--border-primary)' }}>
+        <div className="flex items-center gap-3 text-[11px] font-medium" style={{ color: 'var(--text-tertiary)' }}>
+          {pkg.votes !== undefined && pkg.votes > 0 && (
             <span className="flex items-center gap-1">
-              <Star size={12} /> {pkg.votes}
+              <Star size={11} className="fill-amber-400 stroke-amber-400" /> {pkg.votes}
             </span>
           )}
           {pkg.popularity > 0 && (
-            <span>{pkg.popularity.toFixed(2)}</span>
+            <span>Pop: {pkg.popularity.toFixed(1)}</span>
           )}
         </div>
-        {pkg.installed ? (
-          <span className="badge badge-installed">Installed</span>
-        ) : (
-          <span className="flex items-center gap-1 text-xs font-semibold" style={{ color: 'var(--accent)' }}>
-            <ArrowDownToLine size={13} /> Get
-          </span>
-        )}
+        
+        <span className="flex items-center gap-1 text-[11px] font-bold" style={{ color: 'var(--accent)' }}>
+          Details <ArrowRight size={12} className="transition-transform group-hover:translate-x-1" />
+        </span>
       </div>
     </div>
   );
diff --git a/frontend/src/components/SearchBar.jsx b/frontend/src/components/SearchBar.jsx
index 7a088d1..d4b3483 100644
--- a/frontend/src/components/SearchBar.jsx
+++ b/frontend/src/components/SearchBar.jsx
@@ -10,7 +10,7 @@ export default function SearchBar({ onSearch, initialQuery = '' }) {
   }, [query, onSearch]);
 
   return (
-    <form onSubmit={handleSubmit} className="w-full max-w-xl relative">
+    <form onSubmit={handleSubmit} className="searchbar">
       <Search
         size={17}
         className="absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none"
@@ -19,7 +19,7 @@ export default function SearchBar({ onSearch, initialQuery = '' }) {
       <input
         id="search-input"
         type="text"
-        className="input pl-11 pr-5 py-3 rounded-xl"
+        className="input input-search pl-11 pr-5 rounded-xl"
         style={{ background: 'var(--bg-secondary)', fontSize: '0.9rem' }}
         placeholder="Search packages..."
         value={query}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index af33980..2fc8da1 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");
 @import "tailwindcss";
 
 /* ═══════════════════════════════════════════════
@@ -5,25 +6,26 @@
    Dark & Light theme with CSS custom properties
    ═══════════════════════════════════════════════ */
 
-/* ── Dark Mode (Default) ─────────────────────── */
 :root {
-  --bg-base: #07090f;
-  --bg-primary: #0c1018;
-  --bg-secondary: #111827;
-  --bg-tertiary: #1a2235;
-  --bg-card: #111827;
-  --bg-card-hover: #162036;
-  --bg-elevated: #1e293b;
-  --bg-input: #0f172a;
-  --bg-sidebar: rgba(11, 15, 25, 0.92);
-  --bg-overlay: rgba(0, 0, 0, 0.6);
+  /* Default: Dark Theme */
+  --bg-base: #080c14;
+  --bg-primary: #0e1420;
+  --bg-secondary: #151d30;
+  --bg-tertiary: #1b263f;
+  --bg-card: #0e1420;
+  --bg-card-hover: #151d30;
+  --bg-elevated: #1b263f;
+  --bg-input: #080c14;
+  --bg-sidebar: rgba(14, 20, 32, 0.9);
+  --bg-overlay: rgba(0, 0, 0, 0.7);
+  --topbar-bg: rgba(14, 20, 32, 0.85);
 
-  --border-primary: #1e293b;
-  --border-secondary: #334155;
+  --border-primary: #1b263f;
+  --border-secondary: #2c3b5e;
 
-  --text-primary: #f1f5f9;
-  --text-secondary: #94a3b8;
-  --text-tertiary: #64748b;
+  --text-primary: #f8fafc;
+  --text-secondary: #cbd5e1;
+  --text-tertiary: #94a3b8;
   --text-inverse: #0f172a;
 
   --accent-h: 199;
@@ -32,16 +34,16 @@
   --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
   --accent-hover: hsl(var(--accent-h), var(--accent-s), 56%);
   --accent-muted: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.12);
-  --accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2);
+  --accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.25);
 
-  --green: #22c55e;
-  --green-muted: rgba(34, 197, 94, 0.12);
+  --green: #10b981;
+  --green-muted: rgba(16, 185, 129, 0.15);
   --amber: #f59e0b;
-  --amber-muted: rgba(245, 158, 11, 0.12);
+  --amber-muted: rgba(245, 158, 11, 0.15);
   --red: #ef4444;
-  --red-muted: rgba(239, 68, 68, 0.1);
+  --red-muted: rgba(239, 68, 68, 0.15);
   --blue: #3b82f6;
-  --blue-muted: rgba(59, 130, 246, 0.12);
+  --blue-muted: rgba(59, 130, 246, 0.15);
   --violet: #8b5cf6;
 
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -55,14 +57,15 @@
   --radius-xl: 24px;
   --radius-full: 9999px;
 
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
   --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-spring: 350ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* ── Light Mode ──────────────────────────────── */
 .light {
+  /* Light Theme */
   --bg-base: #f8fafc;
   --bg-primary: #f1f5f9;
   --bg-secondary: #ffffff;
@@ -71,34 +74,34 @@
   --bg-card-hover: #f8fafc;
   --bg-elevated: #ffffff;
   --bg-input: #f1f5f9;
-  --bg-sidebar: rgba(255, 255, 255, 0.92);
+  --bg-sidebar: rgba(255, 255, 255, 0.9);
   --bg-overlay: rgba(15, 23, 42, 0.3);
+  --topbar-bg: rgba(255, 255, 255, 0.85);
 
   --border-primary: #e2e8f0;
   --border-secondary: #cbd5e1;
 
   --text-primary: #0f172a;
-  --text-secondary: #475569;
-  --text-tertiary: #94a3b8;
-  --text-inverse: #f1f5f9;
+  --text-secondary: #334155;
+  --text-tertiary: #64748b;
+  --text-inverse: #f8fafc;
 
   --accent: hsl(var(--accent-h), var(--accent-s), 42%);
   --accent-hover: hsl(var(--accent-h), var(--accent-s), 35%);
   --accent-muted: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.08);
-  --accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
+  --accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.15);
 
-  --green-muted: rgba(34, 197, 94, 0.08);
+  --green-muted: rgba(16, 185, 129, 0.08);
   --amber-muted: rgba(245, 158, 11, 0.08);
   --red-muted: rgba(239, 68, 68, 0.06);
   --blue-muted: rgba(59, 130, 246, 0.08);
 
-  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04);
-  --shadow-md: 0 4px 20px -4px rgba(15, 23, 42, 0.06);
-  --shadow-lg: 0 12px 40px -8px rgba(15, 23, 42, 0.08);
+  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
+  --shadow-md: 0 4px 20px -4px rgba(15, 23, 42, 0.08);
+  --shadow-lg: 0 12px 40px -8px rgba(15, 23, 42, 0.1);
   --shadow-glow: 0 0 30px -5px var(--accent-glow);
 }
 
-/* ── Tailwind v4 Theme Tokens ────────────────── */
 @theme {
   --color-bg-base: var(--bg-base);
   --color-bg-primary: var(--bg-primary);
@@ -135,23 +138,19 @@
   --color-violet: var(--violet);
 
   --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
 }
 
 /* ═══════════════════════════════════════════════
-   Global Resets
+   Base Resets
    ═══════════════════════════════════════════════ */
 
-*, *::before, *::after {
+* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-html {
-  scroll-behavior: smooth;
-  -webkit-text-size-adjust: 100%;
-}
-
 body {
   font-family: var(--font-sans);
   background-color: var(--bg-base);
@@ -162,60 +161,29 @@ body {
   transition: background-color var(--transition-normal), color var(--transition-normal);
 }
 
-/* Scrollbar */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: var(--radius-full); }
-::-webkit-scrollbar-thumb:hover { background: var(--border-secondary); }
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: var(--radius-full);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-secondary);
+}
 
 /* ═══════════════════════════════════════════════
-   Animations
-   ═══════════════════════════════════════════════ */
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes slideUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
-@keyframes spin { to { transform: rotate(360deg); } }
-@keyframes pulse-ring {
-  0% { transform: scale(0.9); opacity: 0.5; }
-  100% { transform: scale(1.3); opacity: 0; }
-}
-@keyframes float {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-6px); }
-}
-
-.animate-fade-in { animation: fadeIn 0.3s ease-out both; }
-.animate-slide-up { animation: slideUp 0.4s ease-out both; }
-
-.stagger > * { animation: fadeIn 0.35s ease-out both; }
-.stagger > *:nth-child(1) { animation-delay: 30ms; }
-.stagger > *:nth-child(2) { animation-delay: 60ms; }
-.stagger > *:nth-child(3) { animation-delay: 90ms; }
-.stagger > *:nth-child(4) { animation-delay: 120ms; }
-.stagger > *:nth-child(5) { animation-delay: 150ms; }
-.stagger > *:nth-child(6) { animation-delay: 180ms; }
-.stagger > *:nth-child(7) { animation-delay: 210ms; }
-.stagger > *:nth-child(8) { animation-delay: 240ms; }
-.stagger > *:nth-child(n+9) { animation-delay: 270ms; }
-
-/* ═══════════════════════════════════════════════
-   Layout Structure
+   App Structure
    ═══════════════════════════════════════════════ */
 
 .app-layout {
   display: flex;
   min-height: 100vh;
-  background: var(--bg-base);
 }
 
 .sidebar {
@@ -223,24 +191,24 @@ body {
   left: 0;
   top: 0;
   bottom: 0;
-  width: 272px;
+  width: 280px;
   z-index: 50;
   display: flex;
   flex-direction: column;
-  padding: 28px 20px;
-  overflow-y: auto;
+  padding: 32px 24px;
   background: var(--bg-sidebar);
-  backdrop-filter: blur(24px) saturate(1.4);
-  -webkit-backdrop-filter: blur(24px) saturate(1.4);
   border-right: 1px solid var(--border-primary);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   transition: transform var(--transition-spring), background var(--transition-normal);
 }
 
 .main-content {
-  margin-left: 272px;
+  margin-left: 280px;
   flex: 1;
   min-height: 100vh;
-  padding: 36px 48px;
+  padding: 40px 48px;
+  background-color: var(--bg-base);
   transition: margin-left var(--transition-spring);
 }
 
@@ -258,21 +226,20 @@ body {
 }
 
 /* ═══════════════════════════════════════════════
-   Nav Items
+   Sidebar Items
    ═══════════════════════════════════════════════ */
 
 .nav-link {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 11px 16px;
+  gap: 12px;
+  padding: 10px 16px;
   border-radius: var(--radius-md);
   color: var(--text-secondary);
   text-decoration: none;
-  font-size: 0.9rem;
+  font-size: 0.92rem;
   font-weight: 500;
   transition: all var(--transition-fast);
-  position: relative;
 }
 .nav-link:hover {
   background: var(--accent-muted);
@@ -283,20 +250,9 @@ body {
   color: var(--accent);
   font-weight: 600;
 }
-.nav-link.active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 20px;
-  background: var(--accent);
-  border-radius: 0 var(--radius-full) var(--radius-full) 0;
-}
 
 /* ═══════════════════════════════════════════════
-   Card System
+   Cards & Elements
    ═══════════════════════════════════════════════ */
 
 .card {
@@ -313,74 +269,63 @@ body {
   cursor: pointer;
 }
 .card-interactive:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+  background: var(--bg-card-hover);
   border-color: var(--border-secondary);
+  box-shadow: var(--shadow-md);
 }
 
-/* ═══════════════════════════════════════════════
-   Badges
-   ═══════════════════════════════════════════════ */
-
 .badge {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
   padding: 3px 10px;
   border-radius: var(--radius-full);
-  font-size: 0.68rem;
+  font-size: 0.7rem;
   font-weight: 700;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.03em;
   text-transform: uppercase;
 }
 .badge-pacman {
   background: var(--accent-muted);
   color: var(--accent);
+  border: 1px solid rgba(2, 132, 199, 0.25);
 }
 .badge-aur {
   background: var(--amber-muted);
   color: var(--amber);
+  border: 1px solid rgba(245, 158, 11, 0.25);
 }
 .badge-installed {
   background: var(--green-muted);
   color: var(--green);
+  border: 1px solid rgba(16, 185, 129, 0.25);
 }
 
-/* ═══════════════════════════════════════════════
-   Buttons
-   ═══════════════════════════════════════════════ */
-
+/* Buttons */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 10px 22px;
+  padding: 10px 20px;
   border-radius: var(--radius-md);
-  font-size: 0.85rem;
+  font-size: 0.88rem;
   font-weight: 600;
-  font-family: var(--font-sans);
   cursor: pointer;
   border: none;
   transition: all var(--transition-fast);
-  white-space: nowrap;
 }
 .btn:disabled {
-  opacity: 0.5;
+  opacity: 0.6;
   cursor: not-allowed;
-  transform: none !important;
-  box-shadow: none !important;
 }
 
 .btn-primary {
   background: var(--accent);
-  color: white;
-  box-shadow: 0 2px 12px var(--accent-glow);
+  color: #ffffff;
 }
 .btn-primary:hover:not(:disabled) {
   background: var(--accent-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 20px var(--accent-glow);
 }
 
 .btn-secondary {
@@ -389,37 +334,32 @@ body {
   border: 1px solid var(--border-primary);
 }
 .btn-secondary:hover:not(:disabled) {
-  border-color: var(--border-secondary);
   background: var(--bg-tertiary);
+  border-color: var(--border-secondary);
 }
 
 .btn-danger {
   background: var(--red-muted);
   color: var(--red);
-  border: 1px solid rgba(239, 68, 68, 0.2);
+  border: 1px solid rgba(239, 68, 68, 0.3);
 }
 .btn-danger:hover:not(:disabled) {
-  background: rgba(239, 68, 68, 0.15);
-  border-color: rgba(239, 68, 68, 0.4);
+  background: rgba(239, 68, 68, 0.25);
 }
 
 .btn-ghost {
   background: transparent;
   color: var(--text-secondary);
-  padding: 8px 14px;
 }
 .btn-ghost:hover:not(:disabled) {
-  background: var(--bg-tertiary);
+  background: var(--bg-secondary);
   color: var(--text-primary);
 }
 
-/* ═══════════════════════════════════════════════
-   Inputs
-   ═══════════════════════════════════════════════ */
-
+/* Inputs */
 .input {
   width: 100%;
-  padding: 11px 16px;
+  padding: 10px 16px;
   background: var(--bg-input);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
@@ -429,41 +369,36 @@ body {
   outline: none;
   transition: all var(--transition-fast);
 }
-.input::placeholder { color: var(--text-tertiary); }
+.input::placeholder {
+  color: var(--text-tertiary);
+}
 .input:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--accent-glow);
 }
 
-/* ═══════════════════════════════════════════════
-   Typography
-   ═══════════════════════════════════════════════ */
-
+/* Typography Helpers */
 .page-title {
-  font-size: 1.75rem;
+  font-size: 1.8rem;
   font-weight: 800;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.02em;
   color: var(--text-primary);
-  line-height: 1.2;
 }
-
 .page-subtitle {
   font-size: 0.95rem;
-  color: var(--text-secondary);
-  margin-top: 4px;
+  color: var(--text-tertiary);
 }
 
-/* ═══════════════════════════════════════════════
-   Grids
-   ═══════════════════════════════════════════════ */
-
+/* Layout Grids */
 .pkg-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px;
 }
-@media (max-width: 720px) {
-  .pkg-grid { grid-template-columns: 1fr; }
+@media (max-width: 640px) {
+  .pkg-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .cat-grid {
@@ -472,38 +407,33 @@ body {
   gap: 16px;
 }
 
-/* ═══════════════════════════════════════════════
-   Utility Components
-   ═══════════════════════════════════════════════ */
-
+/* Shimmer Loader */
 .shimmer {
   background: linear-gradient(90deg,
     var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
   background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
+  animation: shimmer-anim 1.5s infinite;
   border-radius: var(--radius-md);
 }
+@keyframes shimmer-anim {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
 
 .spinner {
-  width: 28px; height: 28px;
+  width: 28px;
+  height: 28px;
   border: 3px solid var(--border-primary);
   border-top-color: var(--accent);
   border-radius: 50%;
-  animation: spin 0.7s linear infinite;
+  animation: spin-anim 0.8s linear infinite;
+}
+@keyframes spin-anim {
+  to { transform: rotate(360deg); }
 }
 
-.divider {
-  height: 1px;
-  background: var(--border-primary);
-  border: none;
-}
-
-/* ═══════════════════════════════════════════════
-   Theme Toggle
-   ═══════════════════════════════════════════════ */
-
+/* Theme Toggle Button */
 .theme-toggle {
-  position: relative;
   width: 40px;
   height: 40px;
   border-radius: var(--radius-md);
@@ -521,23 +451,3 @@ body {
   color: var(--text-primary);
   background: var(--bg-tertiary);
 }
-
-/* ═══════════════════════════════════════════════
-   Decorative
-   ═══════════════════════════════════════════════ */
-
-.gradient-text {
-  background: linear-gradient(135deg, var(--accent), var(--violet));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.glow-ring {
-  position: absolute;
-  border-radius: 50%;
-  background: var(--accent);
-  opacity: 0.06;
-  filter: blur(60px);
-  pointer-events: none;
-}
diff --git a/frontend/src/layouts/MainLayout.jsx b/frontend/src/layouts/MainLayout.jsx
index 75e11d2..844d313 100644
--- a/frontend/src/layouts/MainLayout.jsx
+++ b/frontend/src/layouts/MainLayout.jsx
@@ -42,37 +42,39 @@ export default function MainLayout() {
       <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
       <main className="main-content">
-        {/* ── Top Bar ── */}
-        <header className="flex items-center gap-3 mb-10">
-          {/* Mobile menu */}
-          <button
-            id="menu-toggle"
-            className="btn-ghost lg:hidden !p-2.5 rounded-xl"
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-            aria-label="Toggle menu"
-          >
-            {sidebarOpen ? <X size={20} /> : <Menu size={20} />}
-          </button>
+        <div className="content-shell">
+          {/* ── Top Bar ── */}
+          <header className="topbar">
+            {/* Mobile menu */}
+            <button
+              id="menu-toggle"
+              className="btn-ghost lg:hidden !p-2.5 rounded-xl"
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+              aria-label="Toggle menu"
+            >
+              {sidebarOpen ? <X size={20} /> : <Menu size={20} />}
+            </button>
 
-          {/* Search */}
-          <div className="flex-1">
-            <SearchBar onSearch={handleSearch} />
+            {/* Search */}
+            <div className="topbar-search">
+              <SearchBar onSearch={handleSearch} />
+            </div>
+
+            {/* Theme toggle */}
+            <button
+              onClick={toggleTheme}
+              className="theme-toggle"
+              aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+              title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+            >
+              {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
+            </button>
+          </header>
+
+          {/* ── Page ── */}
+          <div className="page-shell animate-fade-in">
+            <Outlet />
           </div>
-
-          {/* Theme toggle */}
-          <button
-            onClick={toggleTheme}
-            className="theme-toggle"
-            aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
-            title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
-          >
-            {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
-          </button>
-        </header>
-
-        {/* ── Page ── */}
-        <div className="animate-fade-in">
-          <Outlet />
         </div>
       </main>
     </div>
diff --git a/frontend/src/pages/Updates.jsx b/frontend/src/pages/Updates.jsx
index b3f3c7a..2749893 100644
--- a/frontend/src/pages/Updates.jsx
+++ b/frontend/src/pages/Updates.jsx
@@ -95,12 +95,10 @@ export default function Updates() {
           <div className="card overflow-hidden">
             {updates.map((u, i) => (
               <div key={`${u.source}-${u.name}`}
-                   className="flex items-center justify-between px-5 py-4 transition-colors"
+                   className="update-row"
                    style={{
                      borderBottom: i < updates.length - 1 ? '1px solid var(--border-primary)' : 'none',
                    }}
-                   onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-card-hover)'}
-                   onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
               >
                 <div>
                   <div className="flex items-center gap-2 mb-1">