diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 69bce80..351cb5c 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -39,7 +39,7 @@ export default async function DashboardPage() {
   if (githubTokenExpired) {
     return (
       <div className="container py-12 min-h-[60vh] grid place-items-center">
-        <div className="card max-w-[600px] p-6 lg:p-10 text-center border border-border-highlight shadow-lg">
+        <div className="card max-w-[600px] p-6 lg:p-10 text-center border border-border-highlight ">
           <div className="w-20 h-20 bg-warning/10 rounded-sm grid place-items-center mx-auto mb-6">
             <AlertCircle size={40} className="text-warning" />
           </div>
@@ -63,7 +63,7 @@ export default async function DashboardPage() {
   if (!hasAppInstalled) {
     return (
       <div className="container py-12 min-h-[60vh] grid place-items-center">
-        <div className="card max-w-[600px] p-6 lg:p-10 text-center border border-border-highlight shadow-lg">
+        <div className="card max-w-[600px] p-6 lg:p-10 text-center border border-border-highlight ">
           <div className="w-20 h-20 bg-[#7c3aed]/10 rounded-sm grid place-items-center mx-auto mb-6">
             <PackagePlus size={40} className="text-[#7c3aed]" />
           </div>
@@ -98,8 +98,8 @@ export default async function DashboardPage() {
   const myPlugins: any[] = pluginsRes.data?.data || [];
 
   return (
-    <div className="container py-6 lg:py-8">
-      <div className="flex flex-col sm:flex-row sm:items-end mb-6 lg:mb-8 gap-4">
+    <div className="container py-4 lg:py-6">
+      <div className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-end">
         <div>
           <h1 className="heading-2">Developer Dashboard</h1>
           <p className="text-text-muted">
@@ -118,8 +118,8 @@ export default async function DashboardPage() {
       </div>
 
       {/* Stats Grid */}
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(min(200px,100%),1fr))] gap-5 lg:gap-6 mb-10 lg:mb-12">
-        <div className="card p-4 lg:p-6 flex items-center gap-4">
+      <div className="mb-8 grid grid-cols-[repeat(auto-fit,minmax(min(200px,100%),1fr))] gap-4">
+        <div className="card flex items-center gap-4 p-4 transition-colors hover:border-[#7c3aed]/35 hover:bg-surface-secondary">
           <div className="bg-[#7c3aed]/10 p-3 rounded-sm text-[#7c3aed] shrink-0">
             <PackagePlus size={24} />
           </div>
@@ -131,8 +131,8 @@ export default async function DashboardPage() {
           </div>
         </div>
 
-        <div className="card p-4 lg:p-6 flex items-center gap-4">
-          <div className="bg-cyan-500/10 p-3 rounded-sm text-cyan-500 shrink-0">
+        <div className="card flex items-center gap-4 p-4 transition-colors hover:border-[#7c3aed]/35 hover:bg-surface-secondary">
+          <div className="shrink-0 rounded-sm bg-[#7c3aed]/10 p-3 text-[#7c3aed] dark:text-[#c4b5fd]">
             <Activity size={24} />
           </div>
           <div className="min-w-0">
@@ -143,7 +143,7 @@ export default async function DashboardPage() {
           </div>
         </div>
 
-        <div className="card p-4 lg:p-6 flex items-center gap-4">
+        <div className="card flex items-center gap-4 p-4 transition-colors hover:border-[#7c3aed]/35 hover:bg-surface-secondary">
           <div className="bg-warning/10 p-3 rounded-sm text-warning shrink-0">
             <AlertCircle size={24} />
           </div>
@@ -157,10 +157,13 @@ export default async function DashboardPage() {
       </div>
 
       {/* Plugins List */}
-      <h2 className="heading-3 mb-5 lg:mb-6">My Plugins</h2>
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(min(280px,100%),1fr))] gap-5 lg:gap-6">
+      <h2 className="mb-4 text-base font-bold text-text-primary">My Plugins</h2>
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(min(280px,100%),1fr))] gap-4">
         {myPlugins.map((plugin) => (
-          <div key={plugin.id} className="card grid overflow-hidden">
+          <div
+            key={plugin.id}
+            className="card grid overflow-hidden transition-all hover:border-[#7c3aed]/40 hover:bg-surface-secondary hover:shadow-[0_0_24px_rgba(124,58,237,0.12)]"
+          >
             {/* Status Bar */}
             <div
               className={`h-1 w-full ${
@@ -168,7 +171,7 @@ export default async function DashboardPage() {
               }`}
             />
 
-            <div className="p-4 lg:p-5 flex flex-col gap-4">
+            <div className="flex flex-col gap-4 p-4">
               <div className="grid grid-cols-[1fr_auto] items-start">
                 <div className="flex gap-3 items-center min-w-0">
                   <div className="w-12 h-12 rounded-sm bg-surface-secondary grid place-items-center border border-border shrink-0 overflow-hidden">
@@ -181,7 +184,7 @@ export default async function DashboardPage() {
                   <div className="min-w-0">
                     <Link
                       href={`/plugins/${plugin.slug}`}
-                      className="heading-3 text-xl text-text-primary block mb-1 truncate"
+                      className="mb-1 block truncate text-lg font-bold text-text-primary"
                     >
                       {plugin.displayName}
                     </Link>
@@ -203,7 +206,7 @@ export default async function DashboardPage() {
                     Downloads
                   </div>
                   <div className="flex items-center gap-1 font-medium text-text-primary">
-                    <Activity size={14} className="text-accent shrink-0" />{" "}
+                    <Activity size={14} className="shrink-0 text-[#7c3aed]" />{" "}
                     <span className="truncate">
                       {plugin.downloads?.toLocaleString() ?? 0}
                     </span>
@@ -235,7 +238,7 @@ export default async function DashboardPage() {
 
               <div className="mt-auto">
                 {plugin.status === "PENDING_REVIEW" ? (
-                  <div className="w-full bg-warning text-black font-semibold p-2 rounded-sm text-center">
+                  <div className="w-full rounded-sm border border-warning/25 bg-warning/15 p-2 text-center font-semibold text-warning">
                     Submitted
                   </div>
                 ) : (
diff --git a/src/app/globals.css b/src/app/globals.css
index 45fdbd8..67f8ce5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -9,72 +9,72 @@
 
 /* ── Design Tokens ── */
 @theme {
-  --is-light: rgba(0, 0, 0, 0.02);
+  --is-light: rgba(15, 0, 0, 0.02);
 
-  --color-brand: #0ea5e9;
-  --color-brand-light: #e0f2fe;
-  --color-brand-dark: #0284c7;
+  --color-brand: #201d1d;
+  --color-brand-light: #f1eeee;
+  --color-brand-dark: #0f0000;
 
-  --color-surface: #ffffff;
-  --color-surface-secondary: #f8fafc;
-  --color-surface-card: #ffffff;
+  --color-surface: #fdfcfc;
+  --color-surface-secondary: #f8f7f7;
+  --color-surface-card: #fdfcfc;
 
-  --color-text-primary: #0f172a;
-  --color-text-secondary: #475569;
-  --color-text-muted: #94a3b8;
+  --color-text-primary: #201d1d;
+  --color-text-secondary: #424245;
+  --color-text-muted: #646262;
 
-  --color-accent: #0ea5e9;
-  --color-accent-hover: #0284c7;
-  --color-accent-glow: rgba(14, 165, 233, 0.15);
+  --color-accent: #201d1d;
+  --color-accent-hover: #0f0000;
+  --color-accent-glow: rgba(15, 0, 0, 0.08);
 
-  --color-success: #10b981;
-  --color-error: #ef4444;
-  --color-warning: #f59e0b;
+  --color-success: #30d158;
+  --color-error: #ff3b30;
+  --color-warning: #ff9f0a;
 
-  --color-border: #e2e8f0;
-  --color-border-highlight: #cbd5e1;
+  --color-border: rgba(15, 0, 0, 0.12);
+  --color-border-highlight: #646262;
 
   --font-sans:
-    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif;
+    var(--font-geist-mono), "Berkeley Mono", "IBM Plex Mono", ui-monospace,
+    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
   --font-mono:
-    "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    var(--font-geist-mono), "Berkeley Mono", "IBM Plex Mono", ui-monospace,
+    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
 
-  --radius-xs: 1px;
-  --radius-sm: 2px;
-  --radius-md: 3px;
+  --radius-xs: 4px;
+  --radius-sm: 4px;
+  --radius-md: 4px;
 
-  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.6);
+  --shadow-xs: none;
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
 }
-
 /* ── Dark Theme ── */
 [data-theme="dark"] {
   --is-light: transparent;
 
-  --color-brand: #00f2ff;
-  --color-brand-light: #00f2ff1a;
-  --color-brand-dark: #008891;
+  --color-brand: #fdfcfc;
+  --color-brand-light: #302c2c;
+  --color-brand-dark: #ffffff;
 
-  --color-surface: #050505;
-  --color-surface-secondary: #0a0a0a;
-  --color-surface-card: #0f0f0f;
+  --color-surface: #201d1d;
+  --color-surface-secondary: #302c2c;
+  --color-surface-card: #201d1d;
 
-  --color-text-primary: #ffffff;
-  --color-text-secondary: #a1a1aa;
-  --color-text-muted: #52525b;
+  --color-text-primary: #fdfcfc;
+  --color-text-secondary: #d8d4d4;
+  --color-text-muted: #9a9898;
 
-  --color-accent: #00f2ff;
-  --color-accent-hover: #33f5ff;
-  --color-accent-glow: rgba(0, 242, 255, 0.1);
+  --color-accent: #fdfcfc;
+  --color-accent-hover: #ffffff;
+  --color-accent-glow: rgba(253, 252, 252, 0.08);
 
-  --color-border: rgba(255, 255, 255, 0.05);
-  --color-border-highlight: rgba(0, 242, 255, 0.2);
+  --color-border: rgba(253, 252, 252, 0.14);
+  --color-border-highlight: #9a9898;
 }
-
 /* Noise overlay — dark mode only */
 [data-theme="dark"] body::before {
   content: "";
@@ -222,20 +222,22 @@
   .card {
     background: var(--color-surface-card);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
-    box-shadow: var(--shadow-xs);
-    transition: all 180ms ease;
+    border-radius: 0;
+    box-shadow: none;
+    transition:
+      border-color 120ms ease,
+      background-color 120ms ease;
     position: relative;
     overflow: hidden;
   }
 
   .card:hover {
     border-color: var(--color-border-highlight);
-    background: color-mix(in srgb, var(--color-surface-card), white 2%);
+    background: var(--color-surface-secondary);
   }
 
   [data-theme="dark"] .card:hover {
-    background: #141414;
+    background: var(--color-surface-secondary);
   }
 
   /* Global theme transition */
@@ -252,106 +254,64 @@
     transition: none !important;
   }
 
-  /* Podium rank cards */
-  .rank-1-card {
-    border-color: rgba(234, 179, 8, 0.4);
-    background: linear-gradient(
-      to bottom,
-      rgba(234, 179, 8, 0.15),
-      var(--color-surface-card)
-    );
-    box-shadow: 0 4px 20px rgba(234, 179, 8, 0.15);
-  }
-  .rank-1-card:hover {
-    border-color: rgba(234, 179, 8, 0.8);
-    box-shadow: 0 8px 30px rgba(234, 179, 8, 0.25);
-  }
-
-  .rank-2-card {
-    border-color: rgba(148, 163, 184, 0.4);
-    background: linear-gradient(
-      to bottom,
-      rgba(148, 163, 184, 0.15),
-      var(--color-surface-card)
-    );
-    box-shadow: 0 4px 20px rgba(148, 163, 184, 0.15);
-  }
-  .rank-2-card:hover {
-    border-color: rgba(148, 163, 184, 0.8);
-    box-shadow: 0 8px 30px rgba(148, 163, 184, 0.25);
-  }
-
+  /* Podium rank cards — monochrome, no gradients or shadows */
+  .rank-1-card,
+  .rank-2-card,
   .rank-3-card {
-    border-color: rgba(217, 119, 6, 0.4);
-    background: linear-gradient(
-      to bottom,
-      rgba(217, 119, 6, 0.15),
-      var(--color-surface-card)
-    );
-    box-shadow: 0 4px 20px rgba(217, 119, 6, 0.15);
+    border-color: var(--color-border);
+    background: var(--color-surface-card);
+    box-shadow: none;
   }
+
+  .rank-1-card:hover,
+  .rank-2-card:hover,
   .rank-3-card:hover {
-    border-color: rgba(217, 119, 6, 0.8);
-    box-shadow: 0 8px 30px rgba(217, 119, 6, 0.25);
+    border-color: var(--color-border-highlight);
+    background: var(--color-surface-secondary);
+    box-shadow: none;
   }
 
-  [data-theme="dark"] .rank-1-card {
-    background: linear-gradient(
-      to bottom,
-      rgba(234, 179, 8, 0.05),
-      var(--color-surface-card)
-    );
-  }
-  [data-theme="dark"] .rank-2-card {
-    background: linear-gradient(
-      to bottom,
-      rgba(148, 163, 184, 0.05),
-      var(--color-surface-card)
-    );
-  }
+  [data-theme="dark"] .rank-1-card,
+  [data-theme="dark"] .rank-2-card,
   [data-theme="dark"] .rank-3-card {
-    background: linear-gradient(
-      to bottom,
-      rgba(217, 119, 6, 0.05),
-      var(--color-surface-card)
-    );
+    background: var(--color-surface-card);
   }
 
   .text-gradient {
-    background: linear-gradient(135deg, var(--color-brand), #00d4ff);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    color: transparent;
+    background: none;
+    -webkit-background-clip: initial;
+    -webkit-text-fill-color: currentColor;
+    background-clip: initial;
+    color: var(--color-text-primary);
   }
 
   .heading-1 {
-    font-size: clamp(2.5rem, 6vw, 4.5rem);
-    font-weight: 900;
-    line-height: 0.95;
-    letter-spacing: -0.05em;
+    font-size: clamp(1.75rem, 5vw, 2.375rem);
+    font-weight: 700;
+    line-height: 1.5;
+    letter-spacing: 0;
   }
 
   .heading-2 {
-    font-size: clamp(1.75rem, 4vw, 2.5rem);
-    font-weight: 800;
-    line-height: 1.1;
-    letter-spacing: -0.03em;
+    font-size: clamp(1rem, 2vw, 1rem);
+    font-weight: 700;
+    line-height: 1.5;
+    letter-spacing: 0;
   }
 
   .heading-3 {
-    font-size: clamp(1.25rem, 3vw, 1.5rem);
+    font-size: 1rem;
     font-weight: 700;
-    line-height: 1.2;
-    letter-spacing: -0.02em;
+    line-height: 1.5;
+    letter-spacing: 0;
   }
 
   .text-muted {
     color: var(--color-text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    font-size: 0.7rem;
-    font-weight: 700;
+    text-transform: none;
+    letter-spacing: 0;
+    font-size: 0.875rem;
+    font-weight: 400;
   }
 
   .btn {
@@ -359,39 +319,42 @@
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
-    padding: 0.5rem 1.5rem;
+    padding: 0.25rem 1.25rem;
     border-radius: var(--radius-sm);
     font-weight: 500;
     font-size: 1rem;
-    transition: all 100ms ease;
+    transition:
+      color 120ms ease,
+      background-color 120ms ease,
+      border-color 120ms ease;
   }
 
   .btn-primary {
     background: var(--color-text-primary);
     color: var(--color-surface);
-    box-shadow: var(--shadow-sm);
+    box-shadow: none;
   }
   .btn-primary:hover {
-    background: #334155;
-    box-shadow: var(--shadow-md);
-    transform: translateY(-1px);
+    background: var(--color-brand-dark);
+    box-shadow: none;
+    transform: none;
   }
   [data-theme="dark"] .btn-primary:hover {
-    background: #e2e8f0;
+    background: var(--color-brand-dark);
   }
 
   .btn-secondary {
-    background: var(--color-surface-card);
-    border: 1px solid var(--color-border);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border-highlight);
     color: var(--color-text-primary);
-    box-shadow: var(--shadow-sm);
+    box-shadow: none;
   }
   .btn-secondary:hover {
     background: var(--color-surface-secondary);
     border-color: var(--color-border-highlight);
   }
   [data-theme="dark"] .btn-secondary:hover {
-    background: #27272a;
+    background: var(--color-surface-secondary);
   }
 
   .badge {
@@ -410,21 +373,21 @@
   }
 
   .badge-purple {
-    background: rgba(14, 165, 233, 0.2);
-    color: #38bdf8;
-    border: 1px solid rgba(14, 165, 233, 0.3);
+    background: var(--color-surface-secondary);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border);
   }
 
   .badge-cyan {
-    background: rgba(6, 182, 212, 0.2);
-    color: #67e8f9;
-    border: 1px solid rgba(6, 182, 212, 0.3);
+    background: var(--color-surface-secondary);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border);
   }
 
   .badge-green {
-    background: rgba(16, 185, 129, 0.2);
-    color: #6ee7b7;
-    border: 1px solid rgba(16, 185, 129, 0.3);
+    background: var(--color-surface-secondary);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border);
   }
 
   .badge-outline {
@@ -441,19 +404,23 @@
 
   .input {
     width: 100%;
-    background: var(--color-surface-card);
+    background: var(--color-surface-secondary);
     border: 1px solid var(--color-border);
     color: var(--color-text-primary);
-    padding: 0.75rem 1rem;
+    padding: 0.5rem 0.75rem;
     border-radius: var(--radius-sm);
     font-family: inherit;
-    transition: all 100ms ease;
-    box-shadow: var(--shadow-sm);
+    transition:
+      color 120ms ease,
+      background-color 120ms ease,
+      border-color 120ms ease;
+    box-shadow: none;
   }
   .input:focus {
     outline: none;
-    border-color: var(--color-accent);
-    box-shadow: 0 0 0 3px var(--color-accent-glow);
+    border-color: var(--color-text-primary);
+    background: var(--color-surface);
+    box-shadow: none;
   }
   .input::placeholder {
     color: var(--color-text-muted);
@@ -1053,3 +1020,110 @@
     scroll-behavior: auto !important;
   }
 }
+
+/* Plugin README markdown overrides */
+.plugin-readme {
+  color: #d1d5db;
+  font-size: 0.96rem;
+  line-height: 1.75;
+}
+
+.plugin-readme h1,
+.plugin-readme h2,
+.plugin-readme h3,
+.plugin-readme h4 {
+  color: #f9fafb;
+  letter-spacing: 0;
+}
+
+.plugin-readme p {
+  color: #d1d5db;
+  margin-bottom: 1.25rem;
+}
+
+.plugin-readme ul,
+.plugin-readme ol {
+  color: #d1d5db;
+  margin-bottom: 1.5rem;
+  padding-left: 1.35rem;
+}
+
+.plugin-readme li {
+  margin-top: 0.35rem;
+  padding-left: 0.15rem;
+}
+
+.plugin-readme li::marker {
+  color: #a78bfa;
+}
+
+.plugin-readme .table-wrapper,
+.plugin-readme > table,
+.plugin-readme table {
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: 0 !important;
+  border-radius: 0;
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.plugin-readme .table-wrapper {
+  display: block;
+  margin: 1.5rem 0 2rem;
+  overflow-x: auto;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.025);
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+}
+
+.plugin-readme th,
+.plugin-readme td {
+  border: 0 !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
+  padding: 0.85rem 1rem !important;
+  text-align: left;
+  vertical-align: top;
+  color: #d1d5db;
+  background: transparent !important;
+}
+
+.plugin-readme th {
+  background: rgba(255, 255, 255, 0.055) !important;
+  color: #f9fafb !important;
+  font-size: 0.72rem !important;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.plugin-readme tr:last-child td {
+  border-bottom: 0 !important;
+}
+
+.plugin-readme tr:nth-child(even) {
+  background: rgba(255, 255, 255, 0.018) !important;
+}
+
+.plugin-readme code {
+  border: 1px solid rgba(124, 58, 237, 0.28) !important;
+  border-radius: 4px !important;
+  background: rgba(124, 58, 237, 0.16) !important;
+  color: #c4b5fd !important;
+  padding: 0.18rem 0.42rem !important;
+  font-size: 0.86em !important;
+  font-family: var(--font-mono) !important;
+}
+
+.plugin-readme pre code,
+.plugin-readme div > code {
+  border: 0 !important;
+  background: transparent !important;
+  color: inherit !important;
+  padding: 0 !important;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 84dd833..54d28c5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import localFont from "next/font/local";
 import Image from "next/image";
 import Link from "next/link";
 import "./globals.css";
@@ -9,7 +9,11 @@ import { SpeedInsights } from "@vercel/speed-insights/next";
 import NavbarMobile from "@/components/NavbarMobile";
 import Footer from "@/components/Footer";
 
-const inter = Inter({ subsets: ["latin"] });
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  display: "swap",
+});
 
 export const metadata: Metadata = {
   title: "endgit — ci/cd & plugin marketplace for endstone",
@@ -50,7 +54,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <meta name="theme-color" content="#38BDF8" />
+      <meta name="theme-color" content="#fdfcfc" />
       <head>
         <script
           dangerouslySetInnerHTML={{
@@ -67,7 +71,7 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body className={inter.className}>
+      <body className={geistMono.className}>
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -96,7 +100,7 @@ export default function RootLayout({
 
 function Navbar() {
   return (
-    <header className="sticky top-0 z-50 bg-surface/80 backdrop-blur-md border-b border-border rounded-b-sm py-2.5 lg:py-4 shadow-sm">
+    <header className="sticky top-0 z-50 border-b border-border bg-surface py-2.5 lg:py-3">
       <div className="container grid grid-cols-[1fr_auto] items-center relative">
         <Link
           href="/"
diff --git a/src/app/plugins/[slug]/page.tsx b/src/app/plugins/[slug]/page.tsx
index edbe43e..15ee49d 100644
--- a/src/app/plugins/[slug]/page.tsx
+++ b/src/app/plugins/[slug]/page.tsx
@@ -166,7 +166,7 @@ export default async function PluginDetailPage({
       case "CONTRIBUTOR":
         return "bg-accent/10 text-accent border-accent/20";
       case "TRANSLATOR":
-        return "bg-purple-500/10 text-accent border-purple-500/20";
+        return "bg-[#7c3aed]/10 text-[#7c3aed] dark:text-[#c4b5fd] border-[#7c3aed]/25";
       case "REQUESTER":
         return "bg-warning/10 text-warning border-warning/20";
       default:
@@ -181,9 +181,9 @@ export default async function PluginDetailPage({
     plugin.description;
 
   return (
-    <div className="container py-6! lg:py-8!">
+    <div className="container py-4! lg:py-6!">
       {/* Header Section */}
-      <div className="card p-4 lg:p-6 mb-6">
+      <div className="card mb-5 overflow-visible border-border-highlight p-4 transition-colors lg:p-5">
         <div className="grid grid-cols-1 lg:grid-cols-[1fr_auto] justify-between items-start gap-4 lg:flex-nowrap">
           <div className="plugin-header-inner grid grid-cols-[auto_1fr] gap-4 min-w-0 flex-1">
             <div className="w-[72px] h-[72px] rounded-sm bg-surface-secondary grid place-items-center border border-border shrink-0 overflow-hidden">
@@ -248,7 +248,7 @@ export default async function PluginDetailPage({
                 {isAuthor && (
                   <Link
                     href={`/plugins/${plugin.slug}/edit`}
-                    className="inline-grid grid-cols-[auto_1fr] items-center gap-1.5 px-3 py-1 rounded-sm text-[13px] font-medium no-underline bg-purple-500/10 text-accent border border-purple-500/20 hover:bg-purple-500/20 transition-all duration-200"
+                    className="inline-grid grid-cols-[auto_1fr] items-center gap-1.5 rounded-sm border border-[#7c3aed]/25 bg-[#7c3aed]/10 px-3 py-1 text-[13px] font-medium text-[#7c3aed] no-underline transition-all duration-200 hover:bg-[#7c3aed]/20 dark:text-[#c4b5fd]"
                   >
                     <Pencil size={14} /> Edit
                   </Link>
@@ -265,7 +265,7 @@ export default async function PluginDetailPage({
                       <>
                         <Link
                           href={`/plugins/by/${repoOwner}`}
-                          className="text-accent no-underline hover:underline"
+                          className="text-brand no-underline hover:underline"
                         >
                           {repoOwner}
                         </Link>
@@ -291,7 +291,7 @@ export default async function PluginDetailPage({
                     <>
                       <Link
                         href={`/plugins/by/${plugin.author.username}`}
-                        className="text-accent no-underline hover:underline"
+                        className="text-brand no-underline hover:underline"
                       >
                         {plugin.author.displayName || plugin.author.username}
                       </Link>
@@ -355,7 +355,8 @@ export default async function PluginDetailPage({
           {/* Quick Install */}
           <div className="card p-4 lg:p-5">
             <h3 className="font-semibold mb-3 grid grid-flow-col auto-cols-max items-center gap-2">
-              <Terminal size={18} className="text-accent" /> Quick Install (CLI)
+              <Terminal size={18} className="text-[#7c3aed]" /> Quick Install
+              (CLI)
             </h3>
             <CopyCommand command={`endgit install ${plugin.slug}`} />
           </div>
@@ -373,7 +374,7 @@ export default async function PluginDetailPage({
           )}
 
           {/* About — Plugin Description Panel */}
-          <div className="plugin-description-panel border border-border rounded-sm bg-surface-secondary overflow-hidden min-w-0 max-w-full plugin-description-container">
+          <div className="plugin-description-panel min-w-0 max-w-full overflow-hidden rounded-sm border border-border bg-surface-secondary plugin-description-container">
             {/* Header */}
             <div className="plugin-description-header grid grid-cols-[1fr_auto] items-center px-4 py-[10px]">
               <div className="grid grid-flow-col auto-cols-max items-center gap-2">
@@ -416,7 +417,7 @@ export default async function PluginDetailPage({
         </div>
 
         {/* Right Sidebar */}
-        <aside className="plugin-sidebar w-full xl:max-w-[280px] min-w-0 grid gap-6">
+        <aside className="plugin-sidebar grid w-full min-w-0 gap-5 xl:max-w-[280px]">
           {/* VirusTotal Scan */}
           <VirusTotalCard version={activeVersion} />
 
@@ -449,7 +450,7 @@ export default async function PluginDetailPage({
                           href={`https://github.com/${producer.githubUser}`}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-sm font-medium text-text-primary no-underline hover:text-accent"
+                          className="text-sm font-medium text-text-primary no-underline hover:text-brand"
                         >
                           @{producer.githubUser}
                         </a>
@@ -496,7 +497,7 @@ export default async function PluginDetailPage({
                   <span className="text-text-muted">Repository</span>
                   <a
                     href={plugin.repoUrl}
-                    className="text-accent grid grid-flow-col auto-cols-max items-center gap-1 font-medium hover:underline"
+                    className="grid grid-flow-col auto-cols-max items-center gap-1 font-medium text-brand hover:underline"
                   >
                     <GitBranch size={14} /> GitHub
                   </a>
diff --git a/src/app/plugins/page.tsx b/src/app/plugins/page.tsx
index 5e6b2e7..d330e24 100644
--- a/src/app/plugins/page.tsx
+++ b/src/app/plugins/page.tsx
@@ -44,8 +44,8 @@ export default async function PluginsPage({
   };
 
   return (
-    <div className="container py-8">
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr_auto] justify-between items-center mb-4 gap-4">
+    <div className="container py-4 sm:py-5 lg:py-6">
+      <div className="mb-4 grid grid-cols-1 gap-3 lg:grid-cols-[1fr_auto] lg:items-start lg:justify-between">
         <div>
           <h1 className="heading-2">Releases</h1>
           {pagination.total > 0 && (
@@ -56,19 +56,19 @@ export default async function PluginsPage({
             </p>
           )}
         </div>
-        <div className="hidden lg:block w-full max-w-[300px]">
+        <div className="hidden lg:block w-full max-w-[360px]">
           <PluginSearch />
         </div>
       </div>
 
-      <div className="plugins-layout grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-6">
+      <div className="plugins-layout grid grid-cols-1 gap-4 lg:h-[calc(100vh-154px)] lg:min-h-[520px] lg:grid-cols-[auto_1fr] lg:overflow-hidden">
         {/* Sidebar Filters */}
         <MobileFiltersWrapper searchComponent={<PluginSearch />}>
           <PluginSidebarFilters />
         </MobileFiltersWrapper>
 
         {/* Plugin Grid */}
-        <div id="plugin-grid" className="flex-1">
+        <div id="plugin-grid" className="flex min-h-0 flex-1 flex-col">
           <PluginCardGrid plugins={realPlugins} />
 
           {pagination.totalPages > 1 && (
diff --git a/src/app/plugins/top/page.tsx b/src/app/plugins/top/page.tsx
index cfc14c4..6b54b1c 100644
--- a/src/app/plugins/top/page.tsx
+++ b/src/app/plugins/top/page.tsx
@@ -1,13 +1,7 @@
-import {
-  ArrowLeft,
-  Trophy,
-  Download,
-  BadgeCheck,
-  MessageCircle,
-  Flame,
-} from "lucide-react";
+import { Download, BadgeCheck, Flame } from "lucide-react";
 import PluginImage from "@/components/PluginImage";
 import { fetchApi } from "@/lib/api";
+import { VERIFIED_ORGS } from "@/lib/constants";
 import Link from "next/link";
 
 export const metadata = {
@@ -19,7 +13,7 @@ export default async function TopPluginsPage() {
   let plugins: any[] = [];
   try {
     const { data: responseData } = await fetchApi(
-      "/api/v1/plugins?sort=downloads&order=desc&pageSize=12",
+      "/api/v1/plugins?sort=downloads&order=desc&pageSize=25",
       { revalidate: 300 },
     );
     plugins = responseData?.data?.plugins || [];
@@ -27,189 +21,148 @@ export default async function TopPluginsPage() {
     plugins = [];
   }
 
-  const top3 = [plugins[1], plugins[0], plugins[2]].filter(Boolean); // Order: 2nd, 1st, 3rd for podium
-  const rest = plugins.slice(3);
+  const topDownloads = plugins[0]?.downloads || 0;
 
-  const getRankStyle = (rank: number) => {
+  const rankAccent = (rank: number) => {
     switch (rank) {
       case 1:
-        return "rank-1-card";
+        return "text-amber-300";
       case 2:
-        return "rank-2-card";
+        return "text-slate-300";
       case 3:
-        return "rank-3-card";
+        return "text-amber-600";
       default:
-        return "border-border bg-surface-card hover:border-brand/30 shadow-lg hover:shadow-brand/10";
+        return "text-text-muted";
     }
   };
 
-  const getRankBadge = (rank: number) => {
-    switch (rank) {
-      case 1:
-        return (
-          <span className="flex items-center gap-2 text-yellow-500 font-black bg-yellow-500/10 border border-yellow-500/20 px-3 py-1.5 rounded-sm text-xl lg:text-2xl shadow-[0_0_15px_rgba(234,179,8,0.2)]">
-            <Trophy size={20} className="mb-0.5" /> #1
-          </span>
-        );
-      case 2:
-        return (
-          <span className="flex items-center gap-1.5 text-slate-300 font-black bg-slate-300/10 border border-slate-300/20 px-3 py-1.5 rounded-sm text-lg lg:text-xl shadow-[0_0_15px_rgba(203,213,225,0.1)]">
-            #2
-          </span>
-        );
-      case 3:
-        return (
-          <span className="flex items-center gap-1.5 text-amber-600 font-black bg-amber-700/10 border border-amber-700/20 px-3 py-1.5 rounded-sm text-lg lg:text-xl shadow-[0_0_15px_rgba(180,83,9,0.1)]">
-            #3
-          </span>
-        );
-      default:
-        return (
-          <span className="text-text-muted font-black text-lg lg:text-xl px-2">
-            #{rank}
-          </span>
-        );
-    }
-  };
-
-  const renderCard = (plugin: any, rank: number, isPodium: boolean = false) => {
-    const repoOwner = plugin.repoUrl?.match(/github\.com\/([^/]+)/)?.[1];
-    const isVerified = repoOwner
-      ? ["EndstoneMC", "two-tech-dev"].includes(repoOwner)
-      : false;
-
-    // Adjust sizes for podium
-    let padding = "p-5";
-    let iconSize = "w-14 h-14";
-    let titleSize = "text-base";
-    let heightClass = "h-full";
-
-    if (isPodium) {
-      if (rank === 1) {
-        padding = "p-8 lg:p-10";
-        iconSize = "w-24 h-24";
-        titleSize = "text-2xl lg:text-3xl";
-        heightClass = "h-full lg:min-h-[380px]";
-      } else {
-        padding = "p-6 lg:p-8";
-        iconSize = "w-16 h-16";
-        titleSize = "text-lg lg:text-xl";
-        heightClass = "h-full lg:min-h-[320px]";
-      }
-    }
-
-    return (
-      <Link
-        href={`/plugins/${plugin.slug}`}
-        key={plugin.id}
-        className={`group relative flex flex-col no-underline overflow-hidden rounded-sm border transition-all duration-500 hover:-translate-y-2 ${getRankStyle(
-          rank,
-        )} ${heightClass}`}
-      >
-        <div className={`relative z-10 flex flex-col h-full ${padding}`}>
-          <div className="flex justify-between items-start mb-6">
-            <div
-              className={`${iconSize} shrink-0 rounded-sm overflow-hidden bg-surface-secondary border border-border flex items-center justify-center group-hover:border-brand/50 transition-colors shadow-inner`}
-            >
-              <PluginImage
-                iconUrl={plugin.iconUrl}
-                repoUrl={plugin.repoUrl}
-                alt={`${plugin.displayName} icon`}
-              />
-            </div>
-
-            {/* Minimal Stat Badge */}
-            <div className="flex flex-col items-end gap-1.5 backdrop-blur-sm bg-surface-secondary/50 p-2 rounded-sm border border-border">
-              <span className="flex items-center gap-1.5 font-bold text-text-primary text-sm tracking-wide">
-                <Download size={14} className="text-brand" />
-                {plugin.downloads?.toLocaleString() ?? 0}
-              </span>
-              {(plugin.heatScore || 0) > 0 && (
-                <span className="text-orange-400 text-xs flex items-center gap-1 font-semibold">
-                  <Flame size={12} />
-                  <span>{plugin.heatScore}</span>
-                </span>
-              )}
-            </div>
-          </div>
-
-          <div className="flex-1 flex flex-col justify-end mt-6 pr-16 lg:pr-20">
-            <div className="flex items-center gap-2 mb-1.5">
-              <span className="text-[9px] font-black uppercase tracking-[0.2em] text-text-muted">
-                {repoOwner ||
-                  plugin.author?.displayName ||
-                  plugin.author?.username ||
-                  "Community"}
-              </span>
-              {isVerified && (
-                <span className="text-brand shrink-0">
-                  <BadgeCheck size={12} />
-                </span>
-              )}
-            </div>
-            <h3
-              className={`${titleSize} font-extrabold m-0 text-text-primary group-hover:text-brand transition-colors tracking-tight line-clamp-1`}
-            >
-              {plugin.displayName}
-            </h3>
-
-            <div className="mt-4 flex items-center">
-              <span className="font-mono bg-surface-secondary border border-border px-2 py-1 rounded-xs text-xs text-text-secondary">
-                v{plugin.latestVersion || "1.0.0"}
-              </span>
-            </div>
-          </div>
-
-          {/* Enlarged Bottom-Right Rank Badge */}
-          <div className="absolute bottom-5 right-5 lg:bottom-8 lg:right-8 shrink-0">
-            {getRankBadge(rank)}
-          </div>
-        </div>
-      </Link>
-    );
-  };
-
   return (
-    <div className="container py-10 lg:py-16 relative">
-      {/* Background Ambience */}
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-yellow-500/5 blur-[120px] rounded-sm pointer-events-none z-0" />
-
-      <div className="mb-16 relative z-10 text-center flex flex-col items-center">
+    <div className="container py-6 lg:py-10">
+      <div className="mb-6 flex flex-col gap-2 border-b border-border pb-5 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p className="mb-1 font-mono text-xs uppercase tracking-wider text-text-muted">
+            Leaderboard
+          </p>
+          <h1 className="heading-2 m-0">Top Plugins</h1>
+          <p className="mt-1 text-sm text-text-muted">
+            Ranked by total downloads across the registry.
+          </p>
+        </div>
         <Link
           href="/plugins"
-          className="inline-flex items-center gap-2 text-text-muted hover:text-white transition-colors mb-6 text-sm no-underline font-semibold uppercase tracking-widest"
+          className="text-sm text-text-muted hover:text-text-primary hover:underline"
         >
-          <ArrowLeft size={16} /> Registry
+          ← Back to registry
         </Link>
-        <Trophy
-          size={48}
-          className="text-yellow-500 mb-6 drop-shadow-[0_0_15px_rgba(234,179,8,0.5)]"
-        />
-        <h1 className="heading-1 m-0 mb-4">Top Plugins</h1>
-        <p className="text-text-secondary text-lg max-w-lg font-medium">
-          The most downloaded Endstone plugins of all time.
-        </p>
       </div>
 
-      {/* The Podium (Top 3) */}
-      {top3.length > 0 && (
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-end mb-12 relative z-10 lg:px-12">
-          <div className="order-2 lg:order-1">
-            {top3[0] && renderCard(top3[0], 2, true)}
-          </div>
-          <div className="order-1 lg:order-2 z-10 -translate-y-4 lg:-translate-y-8">
-            {top3[1] && renderCard(top3[1], 1, true)}
-          </div>
-          <div className="order-3 lg:order-3">
-            {top3[2] && renderCard(top3[2], 3, true)}
-          </div>
+      {plugins.length === 0 ? (
+        <div className="card grid place-items-center p-12 text-center text-sm text-text-muted">
+          No plugins available yet.
         </div>
-      )}
+      ) : (
+        <div className="overflow-hidden rounded-sm border border-border bg-surface-card">
+          {/* Header row (desktop) */}
+          <div className="hidden grid-cols-[3rem_minmax(0,1fr)_8rem_6rem_5rem] items-center gap-4 border-b border-border bg-surface-secondary px-4 py-2.5 font-mono text-[11px] font-bold uppercase tracking-wider text-text-muted lg:grid">
+            <span className="text-center">#</span>
+            <span>Plugin</span>
+            <span className="text-right">Downloads</span>
+            <span className="text-right">Heat</span>
+            <span className="text-right">Version</span>
+          </div>
 
-      {/* Perfect Grid (Ranks 4-12) */}
-      {rest.length > 0 && (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 relative z-10">
-          {rest.map((plugin, index) => renderCard(plugin, index + 4))}
+          {plugins.map((plugin, index) => {
+            const rank = index + 1;
+            const repoOwner =
+              plugin.repoUrl?.match(/github\.com\/([^/]+)/)?.[1];
+            const isVerified = repoOwner
+              ? VERIFIED_ORGS.includes(repoOwner)
+              : false;
+            const author =
+              repoOwner ||
+              plugin.author?.displayName ||
+              plugin.author?.username ||
+              "Community";
+            const share = topDownloads
+              ? Math.max(
+                  4,
+                  Math.round(((plugin.downloads || 0) / topDownloads) * 100),
+                )
+              : 0;
+
+            return (
+              <Link
+                key={plugin.id}
+                href={`/plugins/${plugin.slug}`}
+                className="group grid grid-cols-[2.5rem_minmax(0,1fr)_auto] items-center gap-3 border-b border-border px-3 py-3 no-underline transition-colors last:border-b-0 hover:bg-surface-secondary lg:grid-cols-[3rem_minmax(0,1fr)_8rem_6rem_5rem] lg:gap-4 lg:px-4"
+              >
+                {/* Rank */}
+                <span
+                  className={`text-center font-mono text-base font-bold ${rankAccent(rank)}`}
+                >
+                  {String(rank).padStart(2, "0")}
+                </span>
+
+                {/* Plugin identity */}
+                <div className="flex min-w-0 items-center gap-3">
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-surface-secondary">
+                    <PluginImage
+                      iconUrl={plugin.iconUrl}
+                      repoUrl={plugin.repoUrl}
+                      alt={`${plugin.displayName} icon`}
+                    />
+                  </div>
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-1.5">
+                      <span className="truncate font-bold text-text-primary group-hover:text-[#c4b5fd]">
+                        {plugin.displayName}
+                      </span>
+                      {isVerified && (
+                        <BadgeCheck size={13} className="shrink-0 text-brand" />
+                      )}
+                    </div>
+                    <div className="mt-0.5 flex items-center gap-2 text-xs text-text-muted">
+                      <span className="truncate">{author}</span>
+                      {/* mobile-only stats */}
+                      <span className="flex items-center gap-1 lg:hidden">
+                        <Download size={11} />
+                        {plugin.downloads?.toLocaleString() ?? 0}
+                      </span>
+                    </div>
+                    {/* progress bar */}
+                    <div className="mt-1.5 hidden h-1 w-full overflow-hidden rounded-full bg-surface-secondary lg:block">
+                      <div
+                        className="h-full rounded-full bg-[#7c3aed]/70"
+                        style={{ width: `${share}%` }}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Downloads (desktop) */}
+                <span className="hidden text-right font-mono text-sm font-semibold text-text-primary lg:block">
+                  {plugin.downloads?.toLocaleString() ?? 0}
+                </span>
+
+                {/* Heat (desktop) */}
+                <span className="hidden items-center justify-end gap-1 text-right font-mono text-sm text-warning lg:flex">
+                  {(plugin.heatScore || 0) > 0 ? (
+                    <>
+                      <Flame size={12} />
+                      {plugin.heatScore}
+                    </>
+                  ) : (
+                    <span className="text-text-muted">—</span>
+                  )}
+                </span>
+
+                {/* Version (desktop) + mobile compact column */}
+                <span className="text-right font-mono text-xs text-text-muted">
+                  v{plugin.latestVersion || "1.0.0"}
+                </span>
+              </Link>
+            );
+          })}
         </div>
       )}
     </div>
diff --git a/src/app/rules/page.tsx b/src/app/rules/page.tsx
index 959e984..d111048 100644
--- a/src/app/rules/page.tsx
+++ b/src/app/rules/page.tsx
@@ -10,66 +10,37 @@ export const metadata: Metadata = {
 const RULE_CATEGORIES = [
   {
     id: "purpose",
-    label: "Purpose & Ethics",
+    label: "What We Accept",
     prefix: "A",
     icon: "shield",
     color: "#8b5cf6",
-    description: "Plugins must be purposeful, original, and ethical.",
+    description:
+      "Plugins should be useful, honest, and appropriate for public servers.",
     rules: [
       {
         id: "A1",
-        title: "Must serve a purpose",
-        text: "Plugins must serve a purpose that cannot be replicated using Endstone's built-in features. Plugins that only provide command aliases or shortcuts to built-in functionality will not be approved.",
+        title: "Useful for server owners",
+        text: "Your plugin should have a clear use case for Endstone servers. Small utilities, focused tools, and quality-of-life plugins are welcome as long as the description explains who it helps and why.",
       },
       {
         id: "A2",
-        title: "Serve a specific purpose",
-        text: 'The plugin must serve a **specific** purpose and be useful to the majority of server operators. Core/private-server-only plugins are not accepted. Plugins containing many mutually irrelevant features bundled together ("kitchen sink" plugins) are also not allowed.',
+        title: "Be honest about scope",
+        text: "Experimental, beta, or server-specific features are allowed, but they must be clearly labeled. Do not present unfinished features as stable or production-ready.",
       },
       {
         id: "A3",
-        title: "No duplicates",
-        text: "If an existing approved plugin covers every feature your plugin provides, you must not submit yours — unless the existing one has been unmaintained for **more than 30 days**. If submitting a competing plugin, explain why yours is better or different in the description.",
+        title: "Original work or permitted forks",
+        text: "Submit your own work, or a fork you are allowed to maintain. Forks and alternatives are allowed when they add meaningful changes, fix abandoned work, or explain how they differ from existing plugins.",
       },
       {
         id: "A4",
-        title: "No remote code execution",
-        text: "Plugins must not execute code fetched from remote sources at runtime. If the plugin requires an external API, it must be from a reputable provider or have high transparency. Auto-updaters that bypass EndGit's CI/CD pipeline are strictly prohibited.",
-      },
-      {
-        id: "A5a",
-        title: "No artificial limitations",
-        text: "Artificially created limitations (e.g., feature-gating behind paid plans, license keys, or subscriptions to unlock self-imposed restrictions) are not allowed.",
-      },
-      {
-        id: "A5b",
-        title: "No unsolicited advertisement",
-        text: "Plugins must not be used as a medium to advertise external servers, products, or resources unless explicitly requested by the user (e.g., through a help command). Reasonable contact information in the description is permitted.",
-      },
-      {
-        id: "A5c",
-        title: "Use of external APIs",
-        text: "External APIs (especially HTTP/HTTPS requests) should only be used when reasonably necessary, such as when involving a public database or large dataset that cannot practically be distributed with the plugin.",
-      },
-      {
-        id: "A5d",
-        title: "Availability of external APIs",
-        text: "Any external API used by a plugin must offer a free tier with a reasonable rate limit. Plugins that depend entirely on paid-only APIs will not be approved.",
-      },
-      {
-        id: "A6",
-        title: "Libraries must be bundled",
-        text: 'Shared libraries must be bundled with the plugin (e.g., statically linked for C++ or included as Python packages). Standalone "API-only" plugins that serve no purpose on their own are not accepted — convert them to libraries.',
-      },
-      {
-        id: "A7",
-        title: "Only submit your own work",
-        text: "You may only submit plugins you have authored. To submit a fork of an abandoned plugin, you must provide proof of the original author's permission, or evidence that the original author did not respond within 14 days of a request to update. Forks must be submitted under a different name.",
+        title: "No harmful or deceptive behavior",
+        text: "Plugins must not hide malicious behavior, mislead users, steal data, abuse permissions, or run code from remote sources to bypass EndGit review.",
       },
       {
-        id: "A8",
-        title: "Complete and functional",
-        text: "Plugins must be complete and functional. Partially implemented features must be clearly marked as experimental and must not be listed as stable features in the description.",
+        id: "A5",
+        title: "External services are allowed when transparent",
+        text: "Plugins may use external APIs or services if the dependency is clearly documented, failure is handled gracefully, and users can understand what data is sent outside their server.",
       },
     ],
   },
@@ -80,97 +51,32 @@ const RULE_CATEGORIES = [
     icon: "code",
     color: "#06b6d4",
     description:
-      "Code must meet quality, readability, and compatibility standards.",
+      "Code should be maintainable enough for review and safe enough to run.",
     rules: [
       {
         id: "B1",
-        title: "Supported Endstone versions",
-        text: "Plugins must declare the minimum supported Endstone API version. Only officially released Endstone versions are accepted — development/nightly API versions must not be declared as requirements.",
+        title: "Declare compatibility",
+        text: "Declare the supported Endstone API version and any required dependencies in the manifest and submission form. If a dependency is optional, document what happens when it is missing.",
       },
       {
         id: "B2",
-        title: "No obfuscation",
-        text: "Source code must be readable and not obfuscated. For C++ plugins, the source repository must contain the complete, readable source. For Python plugins, no bytecode-only submissions are allowed.",
+        title: "Readable source required",
+        text: "Reviewers must be able to inspect the source code. Obfuscated code, bytecode-only Python submissions, or missing C++ source may be rejected.",
       },
       {
         id: "B3",
-        title: "No unnecessary console output",
-        text: 'Plugins must not output unnecessary status messages on startup/shutdown (e.g., "Plugin enabled!", "Author: Xxx", ASCII art banners). Console output is only acceptable if startup genuinely takes significant time (>1 second) or for critical error reporting.',
+        title: "Keep startup output reasonable",
+        text: "Console output is fine when it helps diagnose setup or errors. Avoid noisy banners, repeated logs, or promotional output on every startup.",
       },
       {
-        id: "B4a",
-        title: "Default language must be English",
-        text: "Multi-language support is encouraged, but the default language must be English. All command descriptions, help text, and console output must be available in English.",
-      },
-      {
-        id: "B4b",
-        title: "Political and religious neutrality",
-        text: "Plugins must not contain politically or religiously biased content.",
+        id: "B4",
+        title: "Use stable APIs when possible",
+        text: "Prefer Endstone APIs over raw protocol manipulation or fragile internals. Low-level approaches are acceptable when there is no practical API alternative and the reason is explained.",
       },
       {
         id: "B5",
-        title: "Declare dependencies",
-        text: "All plugin dependencies must be declared in both the plugin manifest (plugin.toml / plugin.yml) and the submission form. Required dependencies that are not available on EndGit must not be used.",
-      },
-      {
-        id: "B6",
-        title: "No hardcoded data",
-        text: "Plugins should use Endstone API methods and constants for vanilla game data where available. Hardcoded block/item IDs, entity type strings, etc. should be avoided in favor of API-provided constants.",
-      },
-      {
-        id: "B7",
-        title: "Clean plugin name",
-        text: 'Plugin names must not include version information (e.g., no "-v2", "-PM5" suffixes), must match the name declared in the plugin manifest exactly, and use only alphanumeric characters, hyphens, and underscores.',
-      },
-      {
-        id: "B8",
-        title: "Use API over protocol",
-        text: "Plugins must not use raw packet handling to implement features that can be accomplished using the Endstone API. Direct protocol manipulation is only acceptable when no API alternative exists.",
-      },
-    ],
-  },
-  {
-    id: "structure",
-    label: "Naming & Structure",
-    prefix: "C",
-    icon: "file",
-    color: "#f59e0b",
-    description: "Proper naming, namespacing, and structural conventions.",
-    rules: [
-      {
-        id: "C1a",
-        title: "Unique namespace (C++)",
-        text: "C++ plugins must use a unique namespace that will not collide with other plugins. The recommended format is author_name::plugin_name. The author/org name should correspond to the GitHub username or organization.",
-      },
-      {
-        id: "C1b",
-        title: "Unique module name (Python)",
-        text: "Python plugins must use a unique top-level module/package name. The recommended format is author_pluginname or a similarly distinctive name that avoids collision.",
-      },
-      {
-        id: "C1c",
-        title: "Stay in your namespace",
-        text: "All classes, types, and symbols declared by a plugin must reside within the plugin's own namespace/package. Do not pollute the global namespace or other plugins' namespaces.",
-      },
-      {
-        id: "C2",
-        title: "Command registration",
-        text: "All commands must be properly registered through the Endstone API. Commands must be associated with the registering plugin. Fallback prefixes must match the plugin name (no abbreviations or acronyms).",
-      },
-      {
-        id: "C3",
-        title: "Permission naming",
-        text: "All permissions must start with the plugin name (lowercase), use only lowercase letters, digits, hyphens, and dots, and be consistently declared in both the manifest and code.",
-      },
-      {
-        id: "C4",
-        title: "Data isolation",
-        text: "Plugin-specific data must be stored in the plugin's data folder. Entity/world-specific data must be stored in a namespaced compound tag. Database tables must use a plugin-prefixed naming convention to prevent collisions.",
-      },
-      {
-        id: "C5",
-        title: "No hardcoded command dispatch",
-        text: "Plugins must not use command dispatch (dispatchCommand) to invoke other plugins' functionality. Use the proper API or declare explicit dependencies instead.",
+        title: "Names should not collide",
+        text: "Use distinctive plugin names, permission names, package/module names, and database table names so your plugin does not conflict with other plugins.",
       },
     ],
   },
@@ -180,37 +86,28 @@ const RULE_CATEGORIES = [
     prefix: "D",
     icon: "book",
     color: "#10b981",
-    description: "Clear, complete, and well-formatted documentation.",
+    description:
+      "Users should understand what the plugin does before installing it.",
     rules: [
       {
         id: "D1",
-        title: "Detailed description",
-        text: "The description must explain what the plugin does, why it is useful, and how to configure/use it. Do not assume the reader already knows the context. Screenshots or videos alone are not sufficient.",
+        title: "Explain the plugin clearly",
+        text: "Include what the plugin does, basic setup steps, important commands or permissions, and any known limitations. A short but clear README is better than a long vague one.",
       },
       {
         id: "D2",
-        title: "English description required",
-        text: "The plugin description must be available in English. Translations in other languages are welcome but English must come first.",
+        title: "English summary required",
+        text: "The main description should include an English summary. Additional languages are welcome and encouraged.",
       },
       {
         id: "D3",
-        title: "Clean description",
-        text: "Do not include irrelevant, duplicated, or misleading information. Do not advertise external products. A reasonable number of contact links (Discord, GitHub) is acceptable.",
+        title: "Changelogs should help users",
+        text: "Updates should include user-readable changelogs for meaningful changes. Tiny maintenance-only updates can be brief.",
       },
       {
         id: "D4",
-        title: "Formatted description",
-        text: "Format your description using Markdown. Use headings, lists, code blocks, and screenshots to make the description easy to read and visually appealing.",
-      },
-      {
-        id: "D5",
-        title: "Informative changelog",
-        text: 'Every update must include a changelog with user-readable information about what changed. Do not include trivial entries like "fixed typo" or "updated README" without meaningful context.',
-      },
-      {
-        id: "D6",
-        title: "Open source license required",
-        text: "All plugins must be published under an OSI-approved open source license. A LICENSE file must be present in the root of the repository. Choose your license carefully — it cannot easily be changed after submission.",
+        title: "License required",
+        text: "Include a license file so users know how the plugin may be used, shared, and modified. Open-source licenses are strongly preferred for marketplace trust.",
       },
     ],
   },
@@ -220,37 +117,33 @@ const RULE_CATEGORIES = [
     prefix: "S",
     icon: "lock",
     color: "#ef4444",
-    description: "Plugins must be safe, efficient, and well-behaved.",
+    description:
+      "These are the rules most likely to block approval because they protect servers.",
     rules: [
       {
         id: "S1",
-        title: "Do not block the main thread",
-        text: "Plugins must not block the server's main thread with long-running operations such as network requests, heavy file I/O, or expensive algorithms. Use std::async / thread pools (C++) or asyncio / threading (Python).",
+        title: "Do not freeze the server",
+        text: "Long network calls, heavy file I/O, expensive database work, and large computations should not run on the main server thread.",
       },
       {
         id: "S2",
-        title: "SQL injection prevention",
-        text: "All SQL queries must use parameterized queries or prepared statements. Never interpolate user input directly into SQL strings, even if the input appears to be validated.",
+        title: "Protect user data and credentials",
+        text: "Never log tokens, passwords, API keys, or private user data. Do not commit credentials to source code, and use encrypted connections for sensitive communication.",
       },
       {
         id: "S3",
-        title: "No unbounded memory growth",
-        text: "Plugins must not allocate memory proportional to persistent quantities (e.g., total registered players). Do not load entire player databases into memory. Use pagination and implement proper cleanup/expiration.",
+        title: "Prevent injection vulnerabilities",
+        text: "Use prepared statements or parameterized queries for SQL. Treat player input, config values, and external API responses as untrusted.",
       },
       {
         id: "S4",
-        title: "Use permissions for access control",
-        text: "Do not intercept command events to block players from running commands. Use the permission system instead. Event-based command blocking is vulnerable to alias attacks and formatting exploits.",
+        title: "Clean up resources",
+        text: "Close database connections, cancel scheduled tasks, release file handles, and stop background workers when the plugin is disabled.",
       },
       {
         id: "S5",
-        title: "Secure credential handling",
-        text: "Plugins must never log passwords, tokens, or API keys to console, include credentials in source code, or transmit credentials over unencrypted connections. Sensitive configuration should be loaded from config files excluded from version control.",
-      },
-      {
-        id: "S6",
-        title: "Resource cleanup",
-        text: "Plugins must properly clean up resources on disable: close database connections, cancel scheduled tasks, release file handles, and stop background threads. Failure to clean up can cause memory leaks and server instability.",
+        title: "Use permissions for protected actions",
+        text: "Commands or actions that affect other players, economy, files, worlds, or server state should be protected by clear permissions.",
       },
     ],
   },
@@ -282,38 +175,14 @@ export default function RulesPage() {
         <div className="w-16 h-16 rounded-sm bg-linear-to-br from-purple-500/10 to-cyan-500/10 grid place-items-center mx-auto mb-5 border border-purple-500/15">
           <Shield size={32} className="text-accent" />
         </div>
-        <h1 className="heading-1 mb-3">Plugin Submission Rules</h1>
+        <h1 className="heading-1 mb-3">Plugin Submission Guidelines</h1>
         <p className="text-text-secondary max-w-2xl mx-auto text-[17px] leading-relaxed">
-          All plugins submitted to the EndGit Marketplace must comply with the
-          following rules. Violations may result in rejection during review.
+          EndGit review focuses on safety, transparency, and usefulness. These
+          guidelines are intentionally practical: they explain what reviewers
+          look for, not how to write your plugin.
         </p>
       </div>
 
-      {/* Quick Navigation */}
-      <div className="card p-5 mb-10 grid grid-flow-col auto-cols-max items-center gap-3">
-        <span className="font-semibold text-sm text-text-muted mr-2">
-          Jump to:
-        </span>
-        {RULE_CATEGORIES.map((cat) => (
-          <a
-            key={cat.id}
-            href={`#${cat.id}`}
-            style={{
-              background: `${cat.color}10`,
-              color: cat.color,
-              borderColor: `${cat.color}25`,
-            }}
-            className="inline-grid grid-cols-[auto_1fr] items-center gap-1.5 px-3.5 py-1.5 rounded-sm text-xs font-semibold no-underline border transition-all hover:opacity-85"
-          >
-            <CategoryIcon icon={cat.icon} color={cat.color} />
-            {cat.label}
-            <span className="opacity-60 text-[10px] ml-0.5">
-              ({cat.rules.length})
-            </span>
-          </a>
-        ))}
-      </div>
-
       {/* Rule Categories */}
       <div className="grid gap-12">
         {RULE_CATEGORIES.map((cat) => (
@@ -381,12 +250,14 @@ export default function RulesPage() {
 
       {/* Footer Note */}
       <div className="mt-12 p-6 bg-error/5 rounded-sm border border-error/15 text-center">
-        <p className="font-semibold text-text-primary mb-2">⚠️ Enforcement</p>
+        <p className="font-semibold text-text-primary mb-2">
+          Review Philosophy
+        </p>
         <p className="text-text-secondary text-sm max-w-xl mx-auto leading-relaxed m-0">
-          Violations of these rules may result in the plugin being rejected
-          during review. Repeated or severe violations may lead to submission
-          privileges being restricted. If you have questions about a specific
-          rule, reach out on our Discord.
+          Most issues can be fixed during review. Rejection is mainly for unsafe
+          behavior, misleading submissions, missing source, or plugins that
+          cannot reasonably be reviewed. If you are unsure about a guideline,
+          ask on Discord before submitting.
         </p>
       </div>
     </div>
diff --git a/src/components/BuildList.tsx b/src/components/BuildList.tsx
index 8484f9d..29a426b 100644
--- a/src/components/BuildList.tsx
+++ b/src/components/BuildList.tsx
@@ -37,7 +37,7 @@ function StatusIcon({ status }: { status: string }) {
       return <XCircle size={16} className="text-error" />;
 
     case "RUNNING":
-      return <Loader2 size={16} className="text-accent animate-spin" />;
+      return <Loader2 size={16} className="animate-spin text-[#7c3aed]" />;
 
     default:
       return <Clock size={16} className="text-text-muted" />;
@@ -51,7 +51,7 @@ function statusBgClass(status: string) {
     case "FAILED":
       return "bg-error";
     case "RUNNING":
-      return "bg-accent";
+      return "bg-[#7c3aed]";
     default:
       return "bg-text-muted";
   }
@@ -64,7 +64,7 @@ function statusTextClass(status: string) {
     case "FAILED":
       return "text-error";
     case "RUNNING":
-      return "text-accent";
+      return "text-[#7c3aed] dark:text-[#c4b5fd]";
     default:
       return "text-text-muted";
   }
@@ -77,7 +77,7 @@ function statusBorderClass(status: string) {
     case "FAILED":
       return "border-l-error";
     case "RUNNING":
-      return "border-l-accent";
+      return "border-l-[#7c3aed]";
     default:
       return "border-l-text-muted";
   }
@@ -120,11 +120,11 @@ export default function BuildsList({
   return (
     <>
       {/* Header */}
-      <div className="mb-8">
-        <div className="grid grid-flow-col auto-cols-max items-center gap-3 mb-2">
+      <div className="mb-5">
+        <div className="mb-2 grid grid-flow-col auto-cols-max items-center gap-3">
           <h1 className="heading-2">Dev Builds</h1>
 
-          <span className="text-xs font-semibold px-2.5 py-0.5 rounded-sm bg-accent/10 text-accent border border-accent/20">
+          <span className="rounded-sm border border-[#7c3aed]/25 bg-[#7c3aed]/10 px-2.5 py-0.5 text-xs font-semibold text-[#7c3aed] dark:text-[#c4b5fd]">
             Today ({today})
           </span>
         </div>
@@ -135,8 +135,8 @@ export default function BuildsList({
       </div>
 
       {/* Search */}
-      <div className="mb-6">
-        <div className="card rounded-sm grid grid-flow-col auto-cols-max items-center gap-3 px-3 lg:px-4 py-0">
+      <div className="mb-4">
+        <div className="card grid grid-flow-col auto-cols-max items-center gap-3 rounded-sm px-3 py-0 transition-colors focus-within:border-[#7c3aed]/45 lg:px-4">
           <Search size={18} className="text-text-muted shrink-0" />
 
           <input
@@ -150,7 +150,7 @@ export default function BuildsList({
       </div>
 
       {/* Warning */}
-      <div className="card rounded-sm p-3 lg:p-4 lg:px-5 mb-8 grid grid-flow-col auto-cols-max items-center gap-3 border-l-4 border-warning bg-warning/5">
+      <div className="card mb-5 grid grid-flow-col auto-cols-max items-center gap-3 rounded-sm border-l-4 border-warning bg-warning/8 p-3 lg:px-5 lg:py-4">
         <AlertTriangle size={20} className="text-warning shrink-0" />
 
         <div>
@@ -167,22 +167,22 @@ export default function BuildsList({
           <p>No matching builds</p>
         </div>
       ) : (
-        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-2 xl:grid-cols-3">
           {filteredBuilds.map((build: any, i: number) => (
             <Link
               key={build.id}
               href={`/plugins/${build.plugin?.slug}/builds`}
-              className={`card p-0 flex flex-col no-underline bg-surface-card overflow-hidden transition-all border-l-4 ${statusBorderClass(build.status)}`}
+              className={`card flex flex-col overflow-hidden border-l-4 bg-surface-card p-0 no-underline transition-all hover:border-[#7c3aed]/45 hover:bg-surface-secondary hover:shadow-[0_0_24px_rgba(124,58,237,0.14)] ${statusBorderClass(build.status)}`}
               style={{
                 animation: `fadeSlideUp 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) ${Math.min(i * 0.04, 0.3)}s both`,
               }}
             >
-              <div className="p-3 flex gap-3 items-center">
+              <div className="flex items-center gap-3 p-3">
                 <div className="flex-1 min-w-0">
-                  <h3 className="text-sm font-semibold m-0 text-brand overflow-hidden text-ellipsis whitespace-nowrap">
+                  <h3 className="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-base font-bold text-text-primary">
                     {build.plugin?.displayName || build.plugin?.name}
                   </h3>
-                  <div className="flex items-center gap-2 text-xs text-text-muted mt-1">
+                  <div className="mt-1 flex items-center gap-2 text-xs text-text-muted">
                     <span className="overflow-hidden text-ellipsis whitespace-nowrap">
                       {build.plugin?.author?.username || "unknown"}
                     </span>
diff --git a/src/components/HomeContent.tsx b/src/components/HomeContent.tsx
index 696e56c..92af599 100644
--- a/src/components/HomeContent.tsx
+++ b/src/components/HomeContent.tsx
@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 import {
-  Search,
   Flame,
   Sparkles,
   TrendingUp,
@@ -14,7 +13,6 @@ import {
   Terminal,
 } from "lucide-react";
 import PluginImage from "@/components/PluginImage";
-import { useState } from "react";
 import { useSession } from "next-auth/react";
 import { VERIFIED_ORGS } from "@/lib/constants";
 import useSWR from "swr";
@@ -81,7 +79,7 @@ function PluginRow({
 
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <span className="font-semibold text-text-primary group-hover:text-brand transition-colors truncate">
+          <span className="font-semibold text-text-primary group-hover:text-text-primary transition-colors truncate">
             {plugin.displayName}
           </span>
           {isVerified && (
@@ -121,7 +119,7 @@ function PluginRow({
 
       <div className="shrink-0 text-right">
         {metric === "heat" ? (
-          <div className="flex items-center gap-1 text-orange-400 font-bold text-sm">
+          <div className="flex items-center gap-1 text-warning font-bold text-sm">
             <Flame size={14} />
             {plugin.heatScore || 0}
           </div>
@@ -153,7 +151,7 @@ function SidebarFeaturedCard({ plugin }: { plugin: Plugin }) {
       </div>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-1.5">
-          <span className="font-semibold text-sm text-text-primary group-hover:text-brand transition-colors truncate">
+          <span className="font-semibold text-sm text-text-primary group-hover:text-text-primary transition-colors truncate">
             {plugin.displayName}
           </span>
           {isVerified && (
@@ -177,7 +175,7 @@ function SidebarFeaturedCard({ plugin }: { plugin: Plugin }) {
         </div>
       </div>
       {(plugin.heatScore || 0) > 0 && (
-        <div className="flex items-center gap-0.5 text-orange-400 font-bold text-xs shrink-0">
+        <div className="flex items-center gap-0.5 text-warning font-bold text-xs shrink-0">
           <Flame size={12} />
           {plugin.heatScore}
         </div>
@@ -202,7 +200,7 @@ function SidebarTopItem({ plugin, rank }: { plugin: Plugin; rank: number }) {
           alt={plugin.displayName}
         />
       </div>
-      <span className="flex-1 font-medium text-sm text-text-primary group-hover:text-brand transition-colors truncate">
+      <span className="flex-1 font-medium text-sm text-text-primary group-hover:text-text-primary transition-colors truncate">
         {plugin.displayName}
       </span>
       <span className="text-xs text-text-muted flex items-center gap-0.5 shrink-0">
@@ -219,15 +217,6 @@ export default function HomeContent({
   topPlugins,
   featuredPlugins,
 }: HomeContentProps) {
-  const [search, setSearch] = useState("");
-
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (search.trim()) {
-      window.location.href = `/plugins?q=${encodeURIComponent(search.trim())}`;
-    }
-  };
-
   return (
     <div className="container py-10 lg:py-14">
       <div className="mb-10 lg:mb-14 max-w-2xl">
@@ -238,41 +227,20 @@ export default function HomeContent({
           The official registry for Endstone plugins. Find what you need, or
           publish your own.
         </p>
-        <form
-          onSubmit={handleSearch}
-          className="flex flex-col sm:flex-row gap-3 max-w-lg"
-        >
-          <div className="flex-1 relative">
-            <Search
-              size={16}
-              className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted"
-            />
-            <input
-              type="text"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search plugins..."
-              className="w-full pl-9 pr-4 py-2.5 rounded-sm border border-border bg-surface-secondary text-text-primary text-sm placeholder:text-text-muted focus:outline-none focus:border-brand transition-colors"
-            />
-          </div>
-          <div className="grid grid-cols-2 sm:flex gap-2 shrink-0">
-            <Link
-              href="/dashboard/dev"
-              className="btn btn-primary text-sm px-4"
-            >
-              Start Publishing
-            </Link>
-            <a
-              href="https://github.com/two-tech-dev/endgit-cli#installation"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="btn btn-secondary text-sm px-4"
-            >
-              <Terminal size={16} />
-              Install CLI
-            </a>
-          </div>
-        </form>
+        <div className="grid max-w-lg grid-cols-2 gap-2 sm:flex">
+          <Link href="/dashboard/dev" className="btn btn-primary text-sm px-4">
+            Start Publishing
+          </Link>
+          <a
+            href="https://github.com/two-tech-dev/endgit-cli#installation"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn btn-secondary text-sm px-4"
+          >
+            <Terminal size={16} />
+            Install CLI
+          </a>
+        </div>
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-10 lg:gap-12">
@@ -280,7 +248,7 @@ export default function HomeContent({
           {hotPlugins.length > 0 && (
             <section className="mb-10">
               <div className="flex items-center gap-2 mb-4">
-                <Flame size={18} className="text-orange-400" />
+                <Flame size={18} className="text-warning" />
                 <h2 className="text-lg font-bold text-text-primary">
                   Hot Today
                 </h2>
@@ -292,7 +260,7 @@ export default function HomeContent({
               </div>
               <Link
                 href="/plugins?sort=hot"
-                className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-brand mt-3 transition-colors"
+                className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text-primary mt-3 transition-colors"
               >
                 See all hot plugins →
               </Link>
@@ -314,7 +282,7 @@ export default function HomeContent({
               </div>
               <Link
                 href="/plugins?sort=date"
-                className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-brand mt-3 transition-colors"
+                className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text-primary mt-3 transition-colors"
               >
                 See all new plugins →
               </Link>
@@ -326,7 +294,7 @@ export default function HomeContent({
           {featuredPlugins.length > 0 && (
             <section>
               <div className="flex items-center gap-2 mb-3">
-                <Sparkles size={16} className="text-yellow-400" />
+                <Sparkles size={16} className="text-warning" />
                 <h3 className="text-sm font-bold uppercase tracking-wider text-text-muted">
                   Featured
                 </h3>
@@ -342,7 +310,7 @@ export default function HomeContent({
           {topPlugins.length > 0 && (
             <section>
               <div className="flex items-center gap-2 mb-3">
-                <TrendingUp size={16} className="text-emerald-400" />
+                <TrendingUp size={16} className="text-success" />
                 <h3 className="text-sm font-bold uppercase tracking-wider text-text-muted">
                   Top This Week
                 </h3>
@@ -358,7 +326,7 @@ export default function HomeContent({
               </div>
               <Link
                 href="/plugins/top"
-                className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-brand mt-3 transition-colors"
+                className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text-primary mt-3 transition-colors"
               >
                 See full leaderboard →
               </Link>
@@ -378,7 +346,7 @@ export default function HomeContent({
             href="https://sparkedhost.com"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center justify-center px-8 py-3 rounded-sm border border-border bg-surface-card hover:border-brand/30 transition-all"
+            className="flex items-center justify-center px-8 py-3 rounded-sm border border-border bg-surface-card hover:border-border-highlight transition-all"
           >
             <img
               src="/partners/SparkedHost.svg"
@@ -388,7 +356,7 @@ export default function HomeContent({
           </a>
           <a
             href="mailto:partners@endgit.dev"
-            className="flex items-center justify-center px-6 py-4 rounded-sm border border-dashed border-border hover:border-brand/30 transition-all text-sm text-text-muted hover:text-brand font-medium"
+            className="flex items-center justify-center px-6 py-4 rounded-sm border border-dashed border-border hover:border-border-highlight transition-all text-sm text-text-muted hover:text-text-primary font-medium"
           >
             Become a Partner →
           </a>
@@ -441,7 +409,7 @@ function YourPlugins() {
                 alt={plugin.displayName}
               />
             </div>
-            <span className="flex-1 font-medium text-sm text-text-primary group-hover:text-brand transition-colors truncate">
+            <span className="flex-1 font-medium text-sm text-text-primary group-hover:text-text-primary transition-colors truncate">
               {plugin.displayName}
             </span>
             <span className="text-xs text-text-muted flex items-center gap-0.5 shrink-0">
@@ -453,7 +421,7 @@ function YourPlugins() {
       </div>
       <Link
         href="/dashboard/dev"
-        className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-brand mt-3 transition-colors"
+        className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text-primary mt-3 transition-colors"
       >
         Manage your plugins →
       </Link>
diff --git a/src/components/MarkdownTabs.tsx b/src/components/MarkdownTabs.tsx
index b603355..1615da9 100644
--- a/src/components/MarkdownTabs.tsx
+++ b/src/components/MarkdownTabs.tsx
@@ -4,7 +4,7 @@ import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
-import vscDarkPlus from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus";
+import oneDark from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
 import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
 import cpp from "react-syntax-highlighter/dist/esm/languages/prism/cpp";
 import javascript from "react-syntax-highlighter/dist/esm/languages/prism/javascript";
@@ -15,6 +15,8 @@ import yaml from "react-syntax-highlighter/dist/esm/languages/prism/yaml";
 import markdown from "react-syntax-highlighter/dist/esm/languages/prism/markdown";
 import css from "react-syntax-highlighter/dist/esm/languages/prism/css";
 import clike from "react-syntax-highlighter/dist/esm/languages/prism/clike";
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
 
 SyntaxHighlighter.registerLanguage("python", python);
 SyntaxHighlighter.registerLanguage("cpp", cpp);
@@ -42,22 +44,12 @@ const markdownSchema = {
   ],
   attributes: {
     ...defaultSchema.attributes,
-
     a: [...(defaultSchema.attributes?.a || []), "href", "target", "rel"],
-
     img: ["src", "alt", "title", "width", "height"],
-
     "*": ["title", "align"],
   },
 };
 
-/**
- * Rewrite relative image/link URLs in markdown to absolute GitHub raw URLs.
- * Handles:
- *   - ![alt](assets/foo.png) → ![alt](https://raw.githubusercontent.com/owner/repo/main/assets/foo.png)
- *   - <img src="assets/foo.png"> → <img src="https://raw.githubusercontent.com/...">
- *   - Skips URLs that are already absolute (http/https/data:)
- */
 function rewriteRelativeUrls(
   markdown: string,
   repoUrl?: string,
@@ -73,13 +65,11 @@ function rewriteRelativeUrls(
   const ref = commitHash || "main";
   const rawBase = `https://raw.githubusercontent.com/${owner}/${repo}/${ref}`;
 
-  // Rewrite markdown image syntax: ![alt](relative/path)
   let result = markdown.replace(
     /!\[([^\]]*)\]\((?!https?:\/\/|data:)([^)]+)\)/g,
     (_, alt, path) => `![${alt}](${rawBase}/${path.replace(/^\.\//, "")})`,
   );
 
-  // Rewrite HTML img src: <img src="relative/path">
   result = result.replace(
     /(<img\s[^>]*src=["'])(?!https?:\/\/|data:)([^"']+)(["'])/gi,
     (_, prefix, path, suffix) =>
@@ -89,35 +79,244 @@ function rewriteRelativeUrls(
   return result;
 }
 
+function splitMarkdownSections(markdown: string) {
+  const lines = markdown.split("\n");
+  const sections: { id: string; title: string; content: string }[] = [];
+  let intro: string[] = [];
+  let current: { id: string; title: string; lines: string[] } | null = null;
+  const seen = new Map<string, number>();
+
+  const makeId = (title: string) => {
+    const base =
+      title
+        .toLowerCase()
+        .trim()
+        .replace(/[`*_~()[\]{}]/g, "")
+        .replace(/[^a-z0-9\s-]/g, "")
+        .replace(/\s+/g, "-")
+        .replace(/-+/g, "-")
+        .replace(/^-|-$/g, "") || "section";
+    const count = seen.get(base) || 0;
+    seen.set(base, count + 1);
+    return count === 0 ? base : `${base}-${count + 1}`;
+  };
+
+  for (const line of lines) {
+    const match = /^##\s+(.+?)\s*#*$/.exec(line.trim());
+    if (match) {
+      if (current) {
+        sections.push({
+          id: current.id,
+          title: current.title,
+          content: current.lines.join("\n").trim(),
+        });
+      }
+      const title = match[1].replace(/[`*_~]/g, "").trim();
+      current = { id: makeId(title), title, lines: [] };
+      continue;
+    }
+
+    if (current) current.lines.push(line);
+    else intro.push(line);
+  }
+
+  if (current) {
+    sections.push({
+      id: current.id,
+      title: current.title,
+      content: current.lines.join("\n").trim(),
+    });
+  }
+
+  const introContent = intro.join("\n").trim();
+  if (introContent || sections.length === 0) {
+    sections.unshift({
+      id: "overview",
+      title: "Overview",
+      content: introContent || markdown,
+    });
+  }
+
+  return sections.filter((section) => section.content.trim());
+}
+
+function CodeBlock({ language, code }: { language: string; code: string }) {
+  const [copied, setCopied] = useState(false);
+  const displayLanguage = language || "text";
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = code;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1600);
+  };
+
+  return (
+    <div className="my-6 overflow-hidden rounded-md border border-[#7c3aed]/25 bg-[#111827] shadow-[0_0_24px_rgba(124,58,237,0.10)]">
+      <div className="grid grid-cols-[1fr_auto] items-center border-b border-white/10 bg-white/[0.035] px-4 py-2">
+        <span className="font-mono text-[11px] font-bold uppercase tracking-wider text-[#c4b5fd]">
+          {displayLanguage}
+        </span>
+        <button
+          type="button"
+          onClick={copy}
+          className="grid h-7 grid-cols-[auto_1fr] items-center gap-1.5 rounded-sm border border-white/10 px-2 text-[11px] text-slate-300 transition-colors hover:border-[#7c3aed]/50 hover:bg-[#7c3aed]/15 hover:text-white"
+        >
+          {copied ? (
+            <Check size={13} className="text-success" />
+          ) : (
+            <Copy size={13} />
+          )}
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+      <SyntaxHighlighter
+        style={oneDark}
+        language={displayLanguage}
+        PreTag="div"
+        customStyle={{
+          margin: 0,
+          padding: "18px 20px",
+          background: "transparent",
+          fontSize: "0.875rem",
+          lineHeight: 1.7,
+        }}
+        codeTagProps={{
+          style: {
+            fontFamily: "var(--font-mono)",
+          },
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+}
+
 function MarkdownContent({ content }: { content: string }) {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
       rehypePlugins={[rehypeRaw, () => rehypeSanitize(markdownSchema)]}
       components={{
-        table({ children, ...props }: any) {
+        h1({ children, ...props }: any) {
+          return (
+            <h1
+              className="mb-5 mt-8 text-2xl font-bold leading-tight text-slate-50 first:mt-0"
+              {...props}
+            >
+              {children}
+            </h1>
+          );
+        },
+        h2({ children, ...props }: any) {
+          return (
+            <h2
+              className="mb-4 mt-8 border-b border-white/10 pb-2 text-xl font-bold leading-tight text-slate-50"
+              {...props}
+            >
+              {children}
+            </h2>
+          );
+        },
+        h3({ children, ...props }: any) {
           return (
-            <div
-              className="table-wrapper"
-              style={{ overflowX: "auto", WebkitOverflowScrolling: "touch" }}
+            <h3
+              className="mb-3 mt-7 text-lg font-bold leading-snug text-slate-100"
+              {...props}
             >
-              <table {...props}>{children}</table>
+              {children}
+            </h3>
+          );
+        },
+        p({ children, ...props }: any) {
+          return (
+            <p className="mb-5 leading-8 text-slate-300" {...props}>
+              {children}
+            </p>
+          );
+        },
+        a({ children, ...props }: any) {
+          return (
+            <a
+              className="text-[#c4b5fd] underline underline-offset-4 hover:text-white"
+              {...props}
+            >
+              {children}
+            </a>
+          );
+        },
+        ul({ children, ...props }: any) {
+          return (
+            <ul
+              className="mb-6 grid list-disc gap-2 pl-6 text-slate-300"
+              {...props}
+            >
+              {children}
+            </ul>
+          );
+        },
+        ol({ children, ...props }: any) {
+          return (
+            <ol
+              className="mb-6 grid list-decimal gap-2 pl-6 text-slate-300"
+              {...props}
+            >
+              {children}
+            </ol>
+          );
+        },
+        table({ children, ...props }: any) {
+          return (
+            <div className="my-6 overflow-x-auto rounded-md border border-white/10 bg-white/[0.025] [scrollbar-width:thin]">
+              <table
+                className="w-full min-w-[640px] border-collapse text-left"
+                {...props}
+              >
+                {children}
+              </table>
             </div>
           );
         },
-        code({ node, inline, className, children, ...props }: any) {
+        th({ children, ...props }: any) {
+          return (
+            <th
+              className="border-b border-white/10 bg-white/[0.045] px-4 py-3 text-[11px] font-black uppercase tracking-wider text-slate-100"
+              {...props}
+            >
+              {children}
+            </th>
+          );
+        },
+        td({ children, ...props }: any) {
+          return (
+            <td
+              className="border-b border-white/10 px-4 py-3 align-top text-sm leading-7 text-slate-300 last:border-b-0"
+              {...props}
+            >
+              {children}
+            </td>
+          );
+        },
+        code({ inline, className, children, ...props }: any) {
           const match = /language-(\w+)/.exec(className || "");
+          const code = String(children).replace(/\n$/, "");
+
           return !inline && match ? (
-            <SyntaxHighlighter
-              style={vscDarkPlus}
-              language={match[1]}
-              PreTag="div"
+            <CodeBlock language={match[1]} code={code} />
+          ) : (
+            <code
+              className="rounded-sm border border-[#7c3aed]/25 bg-[#7c3aed]/12 px-1.5 py-0.5 font-mono text-[0.88em] text-[#c4b5fd]"
               {...props}
             >
-              {String(children).replace(/\n$/, "")}
-            </SyntaxHighlighter>
-          ) : (
-            <code className={className} {...props}>
               {children}
             </code>
           );
@@ -143,18 +342,46 @@ export default function MarkdownTabs({
     repoUrl,
     commitHash,
   );
+  const sections = splitMarkdownSections(processedMarkdown).slice(0, 10);
+  const [activeSectionId, setActiveSectionId] = useState(
+    sections[0]?.id || "overview",
+  );
+  const activeSection =
+    sections.find((section) => section.id === activeSectionId) || sections[0];
 
   if (!processedMarkdown.trim()) {
     return (
-      <div className="markdown-body text-text-secondary leading-relaxed italic p-6 bg-surface-card rounded-sm border border-border">
+      <div className="markdown-body plugin-readme rounded-sm border border-border bg-surface-card p-6 leading-8 text-slate-300 italic">
         No description provided.
       </div>
     );
   }
 
   return (
-    <div className="markdown-body min-w-0 w-full max-w-full p-6 text-text-secondary leading-relaxed">
-      <MarkdownContent content={processedMarkdown} />
+    <div className="markdown-body plugin-readme min-w-0 w-full max-w-full bg-[#111111]/40 text-slate-300">
+      {sections.length > 1 && (
+        <div className="border-b border-white/10 bg-transparent px-3 sm:px-4 lg:px-6">
+          <div className="flex gap-4 overflow-x-auto [scrollbar-width:thin] sm:gap-6">
+            {sections.map((section) => (
+              <button
+                key={section.id}
+                type="button"
+                onClick={() => setActiveSectionId(section.id)}
+                className={`shrink-0 border-b-2 px-0 py-3 text-sm font-semibold transition-colors ${
+                  activeSection?.id === section.id
+                    ? "border-[#a78bfa] text-slate-50"
+                    : "border-transparent text-slate-400 hover:border-white/25 hover:text-slate-200"
+                }`}
+              >
+                {section.title}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+      <div className="p-4 sm:p-6 lg:p-7">
+        {activeSection && <MarkdownContent content={activeSection.content} />}
+      </div>
     </div>
   );
 }
diff --git a/src/components/PluginAnalyticsChart.tsx b/src/components/PluginAnalyticsChart.tsx
index 35787d9..f19201f 100644
--- a/src/components/PluginAnalyticsChart.tsx
+++ b/src/components/PluginAnalyticsChart.tsx
@@ -89,10 +89,10 @@ export default function PluginAnalyticsChart({ slug }: { slug: string }) {
     <div className="card p-4 lg:p-6">
       <div className="chart-header grid grid-cols-[1fr_auto] items-center mb-5 gap-2">
         <h3 className="text-base font-semibold grid grid-flow-col auto-cols-max items-center gap-2 text-text-primary">
-          <BarChart3 size={18} className="text-accent" /> Downloads (Last 30
+          <BarChart3 size={18} className="text-[#7c3aed]" /> Downloads (Last 30
           Days)
         </h3>
-        <span className="text-xl font-bold text-accent">
+        <span className="text-xl font-bold text-[#7c3aed] dark:text-[#c4b5fd]">
           {totalDownloads.toLocaleString()}
         </span>
       </div>
@@ -105,19 +105,19 @@ export default function PluginAnalyticsChart({ slug }: { slug: string }) {
           >
             <defs>
               <linearGradient id="colorDownloads" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor="#0ea5e9" stopOpacity={0.3} />
-                <stop offset="95%" stopColor="#0ea5e9" stopOpacity={0} />
+                <stop offset="5%" stopColor="#7c3aed" stopOpacity={0.28} />
+                <stop offset="95%" stopColor="#7c3aed" stopOpacity={0} />
               </linearGradient>
             </defs>
             <CartesianGrid
               strokeDasharray="3 3"
-              stroke="#e2e8f0"
+              stroke="rgba(154,152,152,0.22)"
               vertical={false}
             />
             <XAxis
               dataKey="date"
               tick={{ fontSize: 11, fill: "#94a3b8" }}
-              axisLine={{ stroke: "#e2e8f0" }}
+              axisLine={{ stroke: "rgba(154,152,152,0.22)" }}
               tickLine={false}
               interval="preserveStartEnd"
             />
@@ -141,13 +141,13 @@ export default function PluginAnalyticsChart({ slug }: { slug: string }) {
             <Area
               type="monotone"
               dataKey="downloads"
-              stroke="#0ea5e9"
+              stroke="#7c3aed"
               strokeWidth={2}
               fill="url(#colorDownloads)"
               dot={false}
               activeDot={{
                 r: 4,
-                fill: "#0ea5e9",
+                fill: "#7c3aed",
                 stroke: "white",
                 strokeWidth: 2,
               }}
diff --git a/src/components/PluginCardGrid.tsx b/src/components/PluginCardGrid.tsx
index 4e439d7..8e688cf 100644
--- a/src/components/PluginCardGrid.tsx
+++ b/src/components/PluginCardGrid.tsx
@@ -1,14 +1,26 @@
 "use client";
 
 import Link from "next/link";
-import { BadgeCheck, Download, MessageCircle, Flame } from "lucide-react";
+import {
+  BadgeCheck,
+  Check,
+  Copy,
+  Download,
+  Flame,
+  Grid2X2,
+  List,
+  MessageCircle,
+  Sparkles,
+} from "lucide-react";
 import PluginImage from "@/components/PluginImage";
 import { VERIFIED_ORGS } from "@/lib/constants";
+import { useEffect, useState } from "react";
 
 interface Plugin {
   id: string;
   slug: string;
   displayName: string;
+  description?: string;
   iconUrl?: string;
   repoUrl?: string;
   latestVersion?: string;
@@ -22,100 +34,260 @@ interface Plugin {
   author?: { displayName?: string; username?: string };
 }
 
+function PluginBadge({ kind }: { kind: "pre" | "verified" | "featured" }) {
+  if (kind === "featured") {
+    return (
+      <span className="inline-flex shrink-0 items-center gap-1 rounded-sm border border-amber-400/45 bg-linear-to-r from-amber-400/20 via-success/15 to-emerald-400/15 px-2 py-0.5 text-[10px] font-black uppercase tracking-wider text-amber-300 shadow-[0_0_18px_rgba(245,158,11,0.18)]">
+        <Sparkles size={11} className="text-amber-300" />
+        Featured
+      </span>
+    );
+  }
+
+  const styles = {
+    pre: "border-error/25 bg-error/15 text-error",
+    verified: "border-brand/25 bg-brand/15 text-brand",
+  };
+  const labels = {
+    pre: "Pre-release",
+    verified: "Verified",
+  };
+
+  return (
+    <span
+      className={`inline-flex shrink-0 items-center gap-1 rounded-sm border px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider ${styles[kind]}`}
+    >
+      {kind === "verified" && <BadgeCheck size={11} />}
+      {labels[kind]}
+    </span>
+  );
+}
+
+function CopyInstallButton({ slug }: { slug: string }) {
+  const [copied, setCopied] = useState(false);
+  const command = `endgit install ${slug}`;
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(command);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = command;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1800);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      className="absolute right-3 top-3 grid h-8 w-8 place-items-center rounded-sm border border-border bg-surface/90 text-text-muted opacity-0 transition-all hover:border-[#7c3aed]/50 hover:bg-[#7c3aed]/10 hover:text-[#a78bfa] group-hover:opacity-100 group-focus-within:opacity-100"
+      title={copied ? "Copied install command" : `Copy: ${command}`}
+      aria-label={
+        copied ? "Copied install command" : `Copy install command for ${slug}`
+      }
+    >
+      {copied ? (
+        <Check size={15} className="text-success" />
+      ) : (
+        <Copy size={15} />
+      )}
+    </button>
+  );
+}
+
+function PluginCard({
+  plugin,
+  index,
+  view,
+}: {
+  plugin: Plugin;
+  index: number;
+  view: "grid" | "list";
+}) {
+  const isFeatured = plugin.isFeatured;
+  const repoOwner = plugin.repoUrl?.match(/github\.com\/([^/]+)/)?.[1];
+  const isVerified = repoOwner ? VERIFIED_ORGS.includes(repoOwner) : false;
+  const author =
+    repoOwner || plugin.author?.displayName || plugin.author?.username;
+
+  if (view === "list") {
+    return (
+      <article
+        className="group relative grid gap-4 border border-border bg-surface-card p-4 transition-all hover:border-[#7c3aed]/50 hover:bg-surface-secondary hover:shadow-[0_0_28px_rgba(124,58,237,0.18)] md:grid-cols-[auto_1fr_auto] md:items-center"
+        style={{
+          animation: `fadeSlideUp 0.22s ease ${Math.min(index * 0.025, 0.2)}s both`,
+        }}
+      >
+        <CopyInstallButton slug={plugin.slug} />
+        <Link
+          href={`/plugins/${plugin.slug}`}
+          className="flex flex-col gap-3 no-underline sm:flex-row sm:items-center md:contents"
+        >
+          <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-surface-secondary sm:h-14 sm:w-14">
+            <PluginImage
+              iconUrl={plugin.iconUrl}
+              repoUrl={plugin.repoUrl}
+              alt={`${plugin.displayName} icon`}
+            />
+          </div>
+
+          <div className="min-w-0 pr-10 sm:pr-10">
+            <div className="flex min-w-0 flex-wrap items-center gap-2">
+              <h3 className="m-0 truncate text-lg font-bold leading-tight text-text-primary">
+                {plugin.displayName}
+              </h3>
+              {plugin.isPreRelease && <PluginBadge kind="pre" />}
+              {isVerified && <PluginBadge kind="verified" />}
+              {isFeatured && <PluginBadge kind="featured" />}
+            </div>
+            <p className="mt-1 line-clamp-1 text-sm text-text-secondary">
+              {plugin.description || author || "No description"}
+            </p>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3 text-xs text-text-muted md:justify-end">
+            <span className="inline-flex items-center gap-1 font-semibold text-text-secondary">
+              <Download size={13} /> {plugin.downloads?.toLocaleString() ?? 0}
+            </span>
+            {(plugin.heatScore || 0) > 0 && (
+              <span className="inline-flex items-center gap-1 font-semibold text-warning">
+                <Flame size={12} /> {plugin.heatScore}
+              </span>
+            )}
+            {(plugin.commentCount || 0) > 0 && (
+              <span className="inline-flex items-center gap-1">
+                <MessageCircle size={12} /> {plugin.commentCount}
+              </span>
+            )}
+            <code className="rounded-sm border border-border bg-surface-secondary px-1.5 py-0.5 font-mono">
+              v{plugin.latestVersion || "1.0.0"}
+            </code>
+          </div>
+        </Link>
+      </article>
+    );
+  }
+
+  return (
+    <article
+      className="card group relative flex flex-col self-start overflow-hidden bg-surface-card p-0 transition-all hover:border-[#7c3aed]/50 hover:bg-surface-secondary hover:shadow-[0_0_30px_rgba(124,58,237,0.18)]"
+      style={{
+        animation: `fadeSlideUp 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) ${Math.min(index * 0.04, 0.3)}s both`,
+      }}
+    >
+      <CopyInstallButton slug={plugin.slug} />
+      <Link
+        href={`/plugins/${plugin.slug}`}
+        className="grid grid-cols-[48px_minmax(0,1fr)] gap-3 p-3 no-underline sm:grid-cols-[56px_minmax(0,1fr)] sm:gap-4 sm:p-4"
+      >
+        <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-surface-secondary sm:h-14 sm:w-14">
+          <PluginImage
+            iconUrl={plugin.iconUrl}
+            repoUrl={plugin.repoUrl}
+            alt={`${plugin.displayName} icon`}
+          />
+        </div>
+
+        <div className="grid min-w-0 content-start pr-8 sm:pr-7">
+          <h3 className="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-base font-bold leading-tight text-text-primary sm:text-lg">
+            {plugin.displayName}
+          </h3>
+          <div className="mt-1 flex min-w-0 flex-wrap items-center gap-1.5">
+            {plugin.isPreRelease && <PluginBadge kind="pre" />}
+            {isVerified && <PluginBadge kind="verified" />}
+            {isFeatured && <PluginBadge kind="featured" />}
+          </div>
+          <div className="mt-1 text-xs text-text-muted">
+            <span className="overflow-hidden text-ellipsis whitespace-nowrap">
+              {author}
+            </span>
+          </div>
+          <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-muted">
+            <span className="flex items-center gap-1 font-semibold text-text-secondary">
+              <Download size={13} /> {plugin.downloads?.toLocaleString() ?? 0}
+            </span>
+            {(plugin.heatScore || 0) > 0 && (
+              <span className="flex items-center gap-0.5 font-medium text-warning">
+                <Flame size={12} /> {plugin.heatScore}
+              </span>
+            )}
+            {(plugin.commentCount || 0) > 0 && (
+              <span className="flex items-center gap-0.5 font-medium text-text-muted">
+                <MessageCircle size={12} /> {plugin.commentCount}
+              </span>
+            )}
+            <code className="font-mono text-text-muted">
+              v{plugin.latestVersion || "1.0.0"}
+            </code>
+          </div>
+        </div>
+      </Link>
+    </article>
+  );
+}
+
 export default function PluginCardGrid({ plugins }: { plugins: Plugin[] }) {
+  const [view, setView] = useState<"grid" | "list">("grid");
+
+  useEffect(() => {
+    const media = window.matchMedia("(max-width: 639px)");
+    const syncMobileView = () => {
+      if (media.matches) setView("grid");
+    };
+    syncMobileView();
+    media.addEventListener("change", syncMobileView);
+    return () => media.removeEventListener("change", syncMobileView);
+  }, []);
+
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 align-content-start">
-      {plugins.map((plugin, i) => {
-        const isFeatured = plugin.isFeatured;
-        const repoOwner = plugin.repoUrl?.match(/github\.com\/([^/]+)/)?.[1];
-        const isVerified = repoOwner
-          ? VERIFIED_ORGS.includes(repoOwner)
-          : false;
-
-        return (
-          <Link
-            href={`/plugins/${plugin.slug}`}
-            key={plugin.id}
-            className="card p-0 flex flex-col no-underline bg-surface-card overflow-hidden transition-all"
-            style={{
-              animation: `fadeSlideUp 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) ${Math.min(i * 0.04, 0.3)}s both`,
-            }}
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="mb-3 flex shrink-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <p className="m-0 text-sm text-text-muted">
+          {plugins.length} plugin{plugins.length === 1 ? "" : "s"} loaded
+        </p>
+        <div className="hidden grid-cols-2 overflow-hidden rounded-sm border border-border bg-surface-card sm:grid">
+          <button
+            type="button"
+            onClick={() => setView("grid")}
+            className={`grid h-9 grid-cols-[auto_1fr] items-center gap-1.5 px-3 text-sm transition-colors ${
+              view === "grid"
+                ? "bg-brand/10 text-brand"
+                : "text-text-muted hover:bg-surface-secondary hover:text-text-primary"
+            }`}
           >
-            <div className="plugin-card-inner p-4 flex gap-4 items-center">
-              <div className="w-14 h-14 shrink-0 rounded-sm overflow-hidden bg-surface-secondary border border-border flex items-center justify-center">
-                <PluginImage
-                  iconUrl={plugin.iconUrl}
-                  repoUrl={plugin.repoUrl}
-                  alt={`${plugin.displayName} icon`}
-                />
-              </div>
-
-              <div className="flex-1 min-w-0">
-                <h3 className="text-base font-semibold m-0 text-brand overflow-hidden text-ellipsis whitespace-nowrap">
-                  {plugin.displayName}
-                </h3>
-                <div className="flex items-center gap-2 min-w-0 flex-wrap mt-1">
-                  {plugin.isPreRelease && (
-                    <span
-                      title="This is a pre-release"
-                      className="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider text-error bg-error/10 border border-error/20 rounded-xs px-1.5 py-0.5 shrink-0"
-                    >
-                      Pre-release
-                    </span>
-                  )}
-                  {isVerified && (
-                    <span
-                      title="Officially supported by EndstoneMC/EndGit"
-                      className="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider text-brand bg-brand/10 border border-brand/20 rounded-xs px-1.5 py-0.5 shrink-0"
-                    >
-                      <BadgeCheck size={11} />
-                      Verified
-                    </span>
-                  )}
-                  {isFeatured && (
-                    <span
-                      title="Featured plugin"
-                      className="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider text-emerald-500 bg-emerald-500/10 border border-emerald-500/20 rounded-xs px-1.5 py-0.5 shrink-0"
-                    >
-                      Featured
-                    </span>
-                  )}
-                </div>
-                <div className="text-xs text-text-muted mt-1">
-                  <span className="overflow-hidden text-ellipsis whitespace-nowrap">
-                    {plugin.repoUrl?.match(/github\.com\/([^/]+)/)?.[1] ||
-                      plugin.author?.displayName ||
-                      plugin.author?.username}
-                  </span>
-                </div>
-                <div className="flex items-center justify-between mt-2 text-xs text-text-muted">
-                  <span className="flex items-center gap-1 font-semibold text-text-secondary">
-                    <Download size={13} className="text-text-muted" />
-                    {plugin.downloads?.toLocaleString() ?? 0}
-                  </span>
-                  <div className="flex items-center gap-2">
-                    {(plugin.heatScore || 0) > 0 && (
-                      <span className="flex items-center gap-0.5 font-medium text-orange-400">
-                        <Flame size={12} />
-                        {plugin.heatScore}
-                      </span>
-                    )}
-                    {(plugin.commentCount || 0) > 0 && (
-                      <span className="flex items-center gap-0.5 font-medium text-text-muted">
-                        <MessageCircle size={12} />
-                        {plugin.commentCount}
-                      </span>
-                    )}
-                    <span className="text-text-muted">
-                      v{plugin.latestVersion || "1.0.0"}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </Link>
-        );
-      })}
+            <Grid2X2 size={14} /> Grid
+          </button>
+          <button
+            type="button"
+            onClick={() => setView("list")}
+            className={`grid h-9 grid-cols-[auto_1fr] items-center gap-1.5 border-l border-border px-3 text-sm transition-colors ${
+              view === "list"
+                ? "bg-brand/10 text-brand"
+                : "text-text-muted hover:bg-surface-secondary hover:text-text-primary"
+            }`}
+          >
+            <List size={14} /> List
+          </button>
+        </div>
+      </div>
+
+      <div
+        className={
+          view === "grid"
+            ? "grid flex-1 grid-cols-1 content-start items-start gap-3 overflow-visible sm:gap-4 lg:grid-cols-2 lg:overflow-y-auto lg:pr-2 lg:[scrollbar-width:thin] xl:grid-cols-3"
+            : "grid flex-1 content-start gap-3 overflow-visible lg:overflow-y-auto lg:pr-2 lg:[scrollbar-width:thin]"
+        }
+      >
+        {plugins.map((plugin, i) => (
+          <PluginCard key={plugin.id} plugin={plugin} index={i} view={view} />
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/components/PluginPagination.tsx b/src/components/PluginPagination.tsx
index cc53a8f..4ed148e 100644
--- a/src/components/PluginPagination.tsx
+++ b/src/components/PluginPagination.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useRouter, useSearchParams } from "next/navigation";
-import { ChevronLeft, ChevronRight } from "lucide-react";
 
 interface PluginPaginationProps {
   currentPage: number;
@@ -46,7 +45,7 @@ export default function PluginPagination({
     const base =
       "inline-grid grid-flow-col place-items-center gap-1 px-3 py-2 min-h-[44px] min-w-[44px] rounded-sm text-sm transition-all text-center no-underline";
     if (active) {
-      return `${base} border border-accent bg-accent/10 text-accent font-bold cursor-pointer`;
+      return `${base} border border-border-highlight bg-surface-secondary text-text-primary font-bold cursor-pointer`;
     }
     if (disabled) {
       return `${base} border border-border bg-surface-secondary text-text-muted font-medium cursor-not-allowed opacity-50`;
@@ -55,18 +54,16 @@ export default function PluginPagination({
   };
 
   return (
-    <div className="grid grid-flow-col auto-cols-max gap-2 mt-6 place-content-center">
+    <div className="sticky bottom-0 z-10 mt-3 grid shrink-0 grid-flow-col auto-cols-max place-content-center gap-2 border-t border-border bg-surface/95 py-3 backdrop-blur-sm">
       {currentPage > 1 ? (
         <button
           onClick={() => goToPage(currentPage - 1)}
           className={getBtnClassName(false, false)}
         >
-          <ChevronLeft size={16} /> Prev
+          ← Prev
         </button>
       ) : (
-        <span className={getBtnClassName(false, true)}>
-          <ChevronLeft size={16} /> Prev
-        </span>
+        <span className={getBtnClassName(false, true)}>← Prev</span>
       )}
 
       {getPageNumbers(currentPage, totalPages).map((p, i) =>
@@ -90,12 +87,10 @@ export default function PluginPagination({
           onClick={() => goToPage(currentPage + 1)}
           className={getBtnClassName(false, false)}
         >
-          Next <ChevronRight size={16} />
+          Next →
         </button>
       ) : (
-        <span className={getBtnClassName(false, true)}>
-          Next <ChevronRight size={16} />
-        </span>
+        <span className={getBtnClassName(false, true)}>Next →</span>
       )}
     </div>
   );
diff --git a/src/components/PluginSearch.tsx b/src/components/PluginSearch.tsx
index 1750efd..51ad44d 100644
--- a/src/components/PluginSearch.tsx
+++ b/src/components/PluginSearch.tsx
@@ -48,7 +48,7 @@ export default function PluginSearch() {
         size={18}
       />
       <input
-        className="input pl-10 w-full"
+        className="input w-full pl-10"
         placeholder="Search plugins..."
         value={search}
         onChange={handleChange}
diff --git a/src/components/PluginSidebarFilters.tsx b/src/components/PluginSidebarFilters.tsx
index ea923b7..61a35ee 100644
--- a/src/components/PluginSidebarFilters.tsx
+++ b/src/components/PluginSidebarFilters.tsx
@@ -1,6 +1,37 @@
 "use client";
 import { useRouter, useSearchParams } from "next/navigation";
 import { PLUGIN_CATEGORIES } from "@/lib/constants";
+import { ChevronDown } from "lucide-react";
+import { type ReactNode, useState } from "react";
+
+function FilterSection({
+  title,
+  children,
+  defaultOpen = true,
+}: {
+  title: string;
+  children: ReactNode;
+  defaultOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <section className="card overflow-hidden p-0">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="grid w-full grid-cols-[1fr_auto] items-center border-b border-border px-4 py-3 text-left font-semibold text-text-primary"
+      >
+        {title}
+        <ChevronDown
+          size={15}
+          className={`text-text-muted transition-transform ${open ? "rotate-180" : ""}`}
+        />
+      </button>
+      {open && <div className="p-4">{children}</div>}
+    </section>
+  );
+}
 
 export default function PluginSidebarFilters() {
   const router = useRouter();
@@ -26,12 +57,17 @@ export default function PluginSidebarFilters() {
     { value: "name", label: "A-Z" },
   ];
 
+  const typeOptions = [
+    { value: "", label: "All Types" },
+    { value: "PYTHON", label: "Python (.whl)" },
+    { value: "CPP", label: "C++ (.so)" },
+  ];
+
   return (
-    <aside className="sidebar-filters w-[250px] shrink-0 grid gap-6">
-      <div className="card p-4">
-        <h3 className="font-semibold mb-3 text-text-primary">Categories</h3>
+    <aside className="sidebar-filters grid w-full shrink-0 gap-3 lg:w-[250px] lg:max-h-full lg:overflow-y-auto lg:pr-1 lg:[scrollbar-width:thin]">
+      <FilterSection title="Categories">
         <select
-          className="input w-full p-2 rounded-sm border border-border bg-surface-secondary text-text-primary cursor-pointer"
+          className="input w-full cursor-pointer rounded-sm border border-border bg-surface-secondary p-2 text-text-primary"
           value={currentCategory}
           onChange={(e) => updateFilter("category", e.target.value)}
         >
@@ -42,71 +78,45 @@ export default function PluginSidebarFilters() {
             </option>
           ))}
         </select>
-      </div>
+      </FilterSection>
 
-      <div className="card p-4">
-        <h3 className="font-semibold mb-3 text-text-primary">Sort By</h3>
-        <ul className="grid gap-2 p-0 m-0">
+      <FilterSection title="Sort By">
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-1">
           {sortOptions.map((opt) => (
-            <li
+            <button
+              type="button"
               key={opt.value}
               onClick={() => updateFilter("sort", opt.value)}
-              className={`cursor-pointer transition-colors ${
+              className={`rounded-sm border px-3 py-2 text-left text-sm transition-colors ${
                 currentSort === opt.value
-                  ? "text-brand font-semibold"
-                  : "text-text-secondary font-normal hover:text-brand"
+                  ? "border-[#7c3aed]/45 bg-[#7c3aed]/15 text-[#7c3aed] dark:text-[#c4b5fd]"
+                  : "border-border bg-surface text-text-secondary hover:border-[#7c3aed]/40 hover:bg-[#7c3aed]/10 hover:text-text-primary"
               }`}
             >
               {opt.label}
-            </li>
+            </button>
           ))}
-        </ul>
-      </div>
+        </div>
+      </FilterSection>
 
-      <div className="card p-4">
-        <h3 className="font-semibold mb-3 text-text-primary">Type</h3>
-        <ul className="grid gap-2 p-0 m-0">
-          <li className="grid grid-flow-col auto-cols-max items-center gap-2 text-text-secondary">
-            <input
-              type="radio"
-              name="type"
-              id="type-all"
-              checked={currentType === ""}
-              onChange={() => updateFilter("type", "")}
-              className="accent-brand"
-            />
-            <label htmlFor="type-all" className="cursor-pointer">
-              All Types
-            </label>
-          </li>
-          <li className="grid grid-flow-col auto-cols-max items-center gap-2 text-text-secondary">
-            <input
-              type="radio"
-              name="type"
-              id="type-python"
-              checked={currentType === "PYTHON"}
-              onChange={() => updateFilter("type", "PYTHON")}
-              className="accent-brand"
-            />
-            <label htmlFor="type-python" className="cursor-pointer">
-              Python (.whl)
-            </label>
-          </li>
-          <li className="grid grid-flow-col auto-cols-max items-center gap-2 text-text-secondary">
-            <input
-              type="radio"
-              name="type"
-              id="type-cpp"
-              checked={currentType === "CPP"}
-              onChange={() => updateFilter("type", "CPP")}
-              className="accent-brand"
-            />
-            <label htmlFor="type-cpp" className="cursor-pointer">
-              C++ (.so)
-            </label>
-          </li>
-        </ul>
-      </div>
+      <FilterSection title="Type">
+        <div className="flex flex-wrap gap-2">
+          {typeOptions.map((opt) => (
+            <button
+              type="button"
+              key={opt.value || "all"}
+              onClick={() => updateFilter("type", opt.value)}
+              className={`rounded-full border px-3 py-1.5 text-sm transition-colors ${
+                currentType === opt.value
+                  ? "border-[#7c3aed]/50 bg-[#7c3aed]/15 text-[#7c3aed] dark:text-[#c4b5fd]"
+                  : "border-border bg-surface text-text-secondary hover:border-[#7c3aed]/40 hover:bg-[#7c3aed]/10 hover:text-text-primary"
+              }`}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </FilterSection>
     </aside>
   );
 }