From 1be03c17f4e61b508e7be54786c91bd8dffded49 Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 22:15:38 +0700
Subject: [PATCH 01/14] feat: apply mono cream design foundation

---
 src/app/globals.css | 271 +++++++++++++++++++-------------------------
 src/app/layout.tsx  |  12 +-
 2 files changed, 127 insertions(+), 156 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 45fdbd8..ec0f58f 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);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 84dd833..03a7d81 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: `

From a5e3e6824e2c0f828a005ac15910e5698eb34ff5 Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 22:18:40 +0700
Subject: [PATCH 02/14] feat: redesign navigation and footer

---
 src/app/layout.tsx              |  21 +---
 src/components/Footer.tsx       | 204 ++++++++++++--------------------
 src/components/NavbarClient.tsx |  42 ++-----
 src/components/NavbarMobile.tsx |  50 +++-----
 4 files changed, 111 insertions(+), 206 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 03a7d81..dfba1e4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
-import Image from "next/image";
 import Link from "next/link";
 import "./globals.css";
 import AuthProvider from "@/components/AuthProvider";
@@ -100,23 +99,15 @@ 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">
-      <div className="container grid grid-cols-[1fr_auto] items-center relative">
+    <header className="sticky top-0 z-50 border-b border-border bg-surface py-3">
+      <div className="container grid grid-cols-[1fr_auto] items-center gap-4">
         <Link
           href="/"
-          className="text-2xl font-bold grid grid-cols-[auto_1fr] items-center gap-3 no-underline shrink-0"
+          className="font-mono text-base font-bold leading-none tracking-normal text-text-primary no-underline shrink-0"
+          aria-label="EndGit home"
         >
-          <Image
-            src="/logo.png"
-            alt="EndGit Logo"
-            width={42}
-            height={42}
-            className="object-contain"
-            priority
-          />
-          <span className="text-text-primary">
-            endgit<span className="text-brand">.</span>{" "}
-          </span>
+          <span className="hidden sm:inline">[endgit]</span>
+          <span className="sm:hidden">[eg]</span>
         </Link>
         <NavbarMobile />
       </div>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 9eff686..14103ec 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,140 +1,86 @@
-import Image from "next/image";
 import Link from "next/link";
 
+const footerLinks = [
+  { href: "/plugins", label: "Plugins" },
+  { href: "/builds", label: "Builds" },
+  { href: "/faq", label: "FAQ" },
+  { href: "https://discord.gg/9eZhP9y26Q", label: "Discord" },
+  { href: "https://github.com/two-tech-dev/endgit-web", label: "GitHub" },
+];
+
 export default function Footer() {
   return (
-    <footer className="border-t border-border py-8 lg:py-12 mt-auto bg-surface-secondary">
-      <div className="container grid grid-cols-[1fr] lg:grid-cols-[280px_1fr] justify-between gap-6 lg:gap-8">
-        <div className="max-w-[280px]">
-          <div className="grid grid-cols-[auto_1fr] items-center gap-2 mb-3">
-            <Image
-              src="/logo.png"
-              alt="EndGit"
-              width={32}
-              height={32}
-              className="object-contain"
-            />
-            <span className="font-bold text-lg text-text-primary">
-              endgit<span className="text-brand">.</span>
-            </span>
-          </div>
-          <p className="text-text-muted text-xs leading-relaxed m-0">
-            The modern CI/CD and plugin marketplace for the Endstone ecosystem.
-          </p>
-        </div>
+    <footer className="mt-24 border-t border-border bg-surface py-8 text-sm text-text-secondary lg:mt-32">
+      <div className="container">
+        <div className="grid grid-cols-1 border border-border sm:grid-cols-2 lg:grid-cols-5">
+          {footerLinks.map((link) => {
+            const external = link.href.startsWith("http");
+            const className =
+              "flex min-h-11 items-center justify-center border-b border-border px-4 py-3 text-center hover:bg-surface-secondary hover:text-text-primary hover:underline sm:[&:nth-child(2n-1)]:border-r lg:border-b-0 lg:border-r lg:last:border-r-0";
 
-        <div className="footer-links grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-8 lg:gap-12">
-          <div>
-            <h4 className="font-semibold text-xs text-text-primary uppercase tracking-wider mb-3">
-              Platform
-            </h4>
-            <div className="grid gap-2">
-              <Link
-                href="/plugins"
-                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
-              >
-                Releases
-              </Link>
-              <Link
-                href="/builds"
-                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
-              >
-                Dev Builds
-              </Link>
-              <Link
-                href="/rules"
-                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
-              >
-                Submission Rules
-              </Link>
-            </div>
-          </div>
-          <div>
-            <h4 className="font-semibold text-xs text-text-primary uppercase tracking-wider mb-3">
-              Community
-            </h4>
-            <div className="grid gap-2">
-              <a
-                href="https://discord.gg/9eZhP9y26Q"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
-              >
-                Discord
-              </a>
-              <a
-                href="https://github.com/two-tech-dev/endgit-web"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
-              >
-                Source code
-              </a>
-              <a
-                href="https://github.com/apps/endgit-local-dev"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
-              >
-                GitHub App
-              </a>
-              <Link
-                href="/faq"
-                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
-              >
-                FAQ
-              </Link>
-            </div>
-          </div>
-          <div>
-            <h4 className="font-semibold text-xs text-text-primary uppercase tracking-wider mb-3">
-              Legal
-            </h4>
-            <div className="grid gap-2">
-              <Link
-                href="/terms"
-                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
-              >
-                Terms of Service
-              </Link>
-              <Link
-                href="/privacy"
-                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
-              >
-                Privacy Policy
+            if (external) {
+              return (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={className}
+                >
+                  {link.label}
+                </a>
+              );
+            }
+
+            return (
+              <Link key={link.href} href={link.href} className={className}>
+                {link.label}
               </Link>
-            </div>
-          </div>
+            );
+          })}
         </div>
-      </div>
 
-      <div className="container mt-8 pt-6 border-t border-border grid grid-cols-[1fr_auto] items-center flex-wrap gap-2">
-        <p className="text-text-muted text-xs m-0" suppressHydrationWarning>
-          &copy; {new Date().getFullYear()} EndGit. All rights reserved.
-          {process.env.VERCEL_GIT_COMMIT_SHA && (
-            <span className="ml-2 opacity-70 font-mono text-[11px]">
-              <a
-                href={`https://github.com/two-tech-dev/endgit-web/commit/${process.env.VERCEL_GIT_COMMIT_SHA}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-inherit no-underline"
-              >
-                ({process.env.VERCEL_GIT_COMMIT_SHA.substring(0, 7)})
-              </a>
-            </span>
-          )}
-        </p>
-        <p className="text-text-muted text-xs m-0">
-          Powered by{" "}
-          <a
-            href="https://2tech.studio"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-brand no-underline font-semibold"
-          >
-            2Tech Studio
-          </a>
-        </p>
+        <div className="mt-6 grid gap-3 text-xs text-text-muted lg:grid-cols-[1fr_auto] lg:items-center">
+          <p className="m-0" suppressHydrationWarning>
+            © {new Date().getFullYear()} EndGit
+            {process.env.VERCEL_GIT_COMMIT_SHA && (
+              <span className="ml-2 opacity-70">
+                <a
+                  href={`https://github.com/two-tech-dev/endgit-web/commit/${process.env.VERCEL_GIT_COMMIT_SHA}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-inherit hover:underline"
+                >
+                  ({process.env.VERCEL_GIT_COMMIT_SHA.substring(0, 7)})
+                </a>
+              </span>
+            )}
+          </p>
+          <p className="m-0">
+            <Link
+              href="/terms"
+              className="hover:text-text-primary hover:underline"
+            >
+              Terms
+            </Link>
+            <span className="px-2">·</span>
+            <Link
+              href="/privacy"
+              className="hover:text-text-primary hover:underline"
+            >
+              Privacy
+            </Link>
+            <span className="px-2">·</span>
+            <a
+              href="https://2tech.studio"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-text-primary hover:underline"
+            >
+              2Tech Studio
+            </a>
+          </p>
+        </div>
       </div>
     </footer>
   );
diff --git a/src/components/NavbarClient.tsx b/src/components/NavbarClient.tsx
index 5db1901..50924e6 100644
--- a/src/components/NavbarClient.tsx
+++ b/src/components/NavbarClient.tsx
@@ -1,14 +1,6 @@
 "use client";
 
 import { useSession, signIn, signOut } from "next-auth/react";
-import {
-  LogIn,
-  ChevronDown,
-  LogOut,
-  LayoutDashboard,
-  Package,
-  Shield,
-} from "lucide-react";
 import { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
@@ -39,7 +31,7 @@ export default function NavbarClient({
         onClick={() => signIn("github")}
         className={`btn btn-primary text-sm py-2 px-4 ${mobile ? "w-full" : ""}`}
       >
-        <LogIn size={16} /> Sign In
+        [+] Sign In
       </button>
     );
   }
@@ -59,7 +51,7 @@ export default function NavbarClient({
     <div
       className={`${
         mobile ? "w-8 h-8" : "w-7 h-7"
-      } rounded-full bg-linear-to-br from-brand to-brand-dark flex items-center justify-center text-white text-xs font-bold shrink-0`}
+      } rounded-full border border-border bg-surface-secondary flex items-center justify-center text-text-primary text-xs font-bold shrink-0`}
     >
       {initials}
     </div>
@@ -77,7 +69,7 @@ export default function NavbarClient({
           mobile ? "py-2.5 px-3 text-[15px]" : "py-2 px-3 text-sm"
         }`}
       >
-        <LayoutDashboard size={16} /> Dev Dashboard
+        <span>[+]</span> Dev Dashboard
       </Link>
       <Link
         href="/dashboard"
@@ -89,7 +81,7 @@ export default function NavbarClient({
           mobile ? "py-2.5 px-3 text-[15px]" : "py-2 px-3 text-sm"
         }`}
       >
-        <Package size={16} /> My Plugins
+        <span>[+]</span> My Plugins
       </Link>
       {((session?.user as any)?.trustLevel === "ADMIN" ||
         (session?.user as any)?.trustLevel === "TRUSTED") && (
@@ -99,11 +91,11 @@ export default function NavbarClient({
             setDropdownOpen(false);
             onNavigate?.();
           }}
-          className={`grid grid-cols-[auto_1fr] items-center gap-2 rounded-sm text-[#8b5cf6] hover:bg-[#8b5cf6]/5 transition-colors ${
+          className={`grid grid-cols-[auto_1fr] items-center gap-2 rounded-sm text-text-secondary hover:bg-surface-secondary hover:text-text-primary transition-colors ${
             mobile ? "py-2.5 px-3 text-[15px]" : "py-2 px-3 text-sm"
           }`}
         >
-          <Shield size={16} /> Admin Panel
+          <span>[x]</span> Admin Panel
         </Link>
       )}
     </>
@@ -116,11 +108,11 @@ export default function NavbarClient({
         setDropdownOpen(false);
         onNavigate?.();
       }}
-      className={`grid grid-cols-[auto_1fr] items-center gap-2 rounded-sm text-error hover:bg-error/5 w-full text-left transition-colors ${
+      className={`grid grid-cols-[auto_1fr] items-center gap-2 rounded-sm text-text-secondary hover:bg-surface-secondary hover:text-text-primary w-full text-left transition-colors ${
         mobile ? "py-2.5 px-3 text-[15px]" : "py-2 px-3 text-sm"
       }`}
     >
-      <LogOut size={16} /> Sign Out
+      <span>[-]</span> Sign Out
     </button>
   );
 
@@ -142,12 +134,9 @@ export default function NavbarClient({
               <div className="text-xs text-text-muted">{user.email}</div>
             )}
           </div>
-          <ChevronDown
-            size={16}
-            className={`text-text-muted transition-transform duration-200 shrink-0 ${
-              dropdownOpen ? "rotate-180" : ""
-            }`}
-          />
+          <span className="text-text-muted shrink-0">
+            {dropdownOpen ? "[-]" : "[+]"}
+          </span>
         </button>
 
         <div
@@ -175,12 +164,7 @@ export default function NavbarClient({
         <span className="font-medium text-sm text-text-primary max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap">
           {user?.name || user?.email}
         </span>
-        <ChevronDown
-          size={14}
-          className={`text-text-muted transition-transform duration-200 ${
-            dropdownOpen ? "rotate-180" : ""
-          }`}
-        />
+        <span className="text-text-muted">{dropdownOpen ? "[-]" : "[+]"}</span>
       </button>
 
       {dropdownOpen && (
@@ -190,7 +174,7 @@ export default function NavbarClient({
             className="fixed inset-0 z-40"
           />
 
-          <div className="absolute right-0 top-[calc(100%+8px)] z-50 w-[220px] max-w-[calc(100vw-2rem)] bg-surface-card border border-border rounded-sm shadow-lg overflow-hidden animate-fade-in">
+          <div className="absolute right-0 top-[calc(100%+8px)] z-50 w-[220px] max-w-[calc(100vw-2rem)] bg-surface-card border border-border rounded-sm overflow-hidden animate-fade-in">
             <div className="py-3 px-4 border-b border-border bg-surface-secondary">
               <div className="font-semibold text-sm text-text-primary">
                 {user?.name}
diff --git a/src/components/NavbarMobile.tsx b/src/components/NavbarMobile.tsx
index b580d8b..89f5762 100644
--- a/src/components/NavbarMobile.tsx
+++ b/src/components/NavbarMobile.tsx
@@ -2,7 +2,6 @@
 
 import { useState, useRef, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { Menu, X, Moon, Sun } from "lucide-react";
 import Link from "next/link";
 import NavbarClient from "./NavbarClient";
 import { useTheme } from "@/components/ThemeToggle";
@@ -85,16 +84,16 @@ export default function NavbarMobile() {
     <div
       ref={dropdownRef}
       style={{ top: dropdownTop }}
-      className={`fixed left-0 right-0 z-49 bg-surface/80 backdrop-blur-md border-b border-border shadow-sm rounded-b-sm overflow-hidden transition-all duration-250 ease-in-out ${
+      className={`fixed left-0 right-0 z-49 bg-surface border-b border-border overflow-hidden transition-all duration-250 ease-in-out ${
         visible ? "opacity-100 max-h-screen" : "opacity-0 max-h-0"
       }`}
     >
       <div className="container grid pt-4 gap-1">
         {[
-          { href: "/plugins", label: "Releases" },
-          { href: "/plugins/top", label: "Top Plugins" },
-          { href: "/builds", label: "Dev Builds" },
-          { href: "/faq", label: "FAQ" },
+          { href: "/plugins", label: "[+] Releases" },
+          { href: "/plugins/top", label: "[+] Top Plugins" },
+          { href: "/builds", label: "[+] Dev Builds" },
+          { href: "/faq", label: "[?] FAQ" },
         ].map((item, i) => (
           <div
             key={item.href}
@@ -136,7 +135,7 @@ export default function NavbarMobile() {
               onClick={toggleTheme}
               className="flex items-center gap-2 py-2.5 text-text-secondary font-medium text-base w-full text-left hover:text-text-primary transition-colors"
             >
-              {theme === "light" ? <Moon size={16} /> : <Sun size={16} />}
+              <span>{theme === "light" ? "[-]" : "[+]"}</span>
               {theme === "light" ? "Dark mode" : "Light mode"}
             </button>
           </div>
@@ -159,37 +158,37 @@ export default function NavbarMobile() {
 
   return (
     <div ref={wrapperRef} className="grid items-center">
-      <nav className="hidden lg:grid lg:grid-flow-col lg:auto-cols-auto gap-8 xl:gap-12 items-center">
+      <nav className="hidden lg:grid lg:grid-flow-col lg:auto-cols-auto gap-6 xl:gap-8 items-center">
         <Link
           href="/plugins"
-          className="text-text-secondary font-medium hover:text-text-primary transition-colors"
+          className="text-text-secondary font-medium hover:text-text-primary hover:underline transition-colors"
         >
-          Releases
+          Plugins
         </Link>
         <Link
           href="/plugins/top"
-          className="text-text-secondary font-medium hover:text-text-primary transition-colors"
+          className="text-text-secondary font-medium hover:text-text-primary hover:underline transition-colors"
         >
-          Top Plugins
+          Top [100]
         </Link>
         <Link
           href="/builds"
-          className="text-text-secondary font-medium hover:text-text-primary transition-colors"
+          className="text-text-secondary font-medium hover:text-text-primary hover:underline transition-colors"
         >
-          Dev Builds
+          Builds
         </Link>
         <Link
           href="/faq"
-          className="text-text-secondary font-medium hover:text-text-primary transition-colors"
+          className="text-text-secondary font-medium hover:text-text-primary hover:underline transition-colors"
         >
           FAQ
         </Link>
         <button
           onClick={toggleTheme}
-          className="grid items-center justify-center w-8 h-8 rounded-sm bg-surface-secondary text-text-secondary transition-all hover:bg-border hover:text-text-primary"
+          className="grid items-center justify-center h-9 px-3 rounded-sm border border-border bg-surface text-text-secondary transition-colors hover:border-border-highlight hover:text-text-primary"
           title={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
         >
-          {theme === "light" ? <Moon size={16} /> : <Sun size={16} />}
+          {theme === "light" ? "[-]" : "[+]"}
         </button>
         <NavbarClient />
       </nav>
@@ -199,22 +198,7 @@ export default function NavbarMobile() {
         onClick={handleToggle}
         aria-label="Toggle menu"
       >
-        <div className="relative w-6 h-6">
-          <div
-            className={`absolute inset-0 grid items-center justify-center transition-all duration-200 ${
-              open ? "opacity-0 rotate-90" : "opacity-100 rotate-0"
-            }`}
-          >
-            <Menu size={24} />
-          </div>
-          <div
-            className={`absolute inset-0 grid items-center justify-center transition-all duration-200 ${
-              open ? "opacity-100 rotate-0" : "opacity-0 -rotate-90"
-            }`}
-          >
-            <X size={24} />
-          </div>
-        </div>
+        <span className="font-mono text-base">{open ? "[-]" : "[+]"}</span>
       </button>
 
       {mounted && open && createPortal(dropdown, document.body)}

From 9dcb0b1f7b926d3bd2867bb95e0174cfba17c428 Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 22:22:15 +0700
Subject: [PATCH 03/14] feat: redesign home page

---
 src/components/HomeContent.tsx | 418 +++++++++++++++------------------
 1 file changed, 189 insertions(+), 229 deletions(-)

diff --git a/src/components/HomeContent.tsx b/src/components/HomeContent.tsx
index 696e56c..4c0f5a3 100644
--- a/src/components/HomeContent.tsx
+++ b/src/components/HomeContent.tsx
@@ -1,20 +1,8 @@
 "use client";
 
 import Link from "next/link";
-import {
-  Search,
-  Flame,
-  Sparkles,
-  TrendingUp,
-  Clock,
-  MessageCircle,
-  Download,
-  BadgeCheck,
-  Package,
-  Terminal,
-} from "lucide-react";
 import PluginImage from "@/components/PluginImage";
-import { useState } from "react";
+import { type ReactNode, useState } from "react";
 import { useSession } from "next-auth/react";
 import { VERIFIED_ORGS } from "@/lib/constants";
 import useSWR from "swr";
@@ -56,6 +44,21 @@ function timeAgo(dateStr: string) {
   return `${Math.floor(days / 7)}w ago`;
 }
 
+function SectionLabel({
+  marker,
+  children,
+}: {
+  marker: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="mb-4 border-b border-border pb-2 font-bold text-text-primary">
+      <span className="mr-2 text-text-muted">[{marker}]</span>
+      {children}
+    </div>
+  );
+}
+
 function PluginRow({
   plugin,
   metric,
@@ -65,13 +68,19 @@ function PluginRow({
 }) {
   const repoOwner = plugin.repoUrl?.match(/github\.com\/([^/]+)/)?.[1];
   const isVerified = repoOwner ? VERIFIED_ORGS.includes(repoOwner) : false;
+  const typeLabel =
+    plugin.pluginType === "PYTHON"
+      ? "py"
+      : plugin.pluginType === "CPP"
+        ? "cpp"
+        : plugin.pluginType?.toLowerCase();
 
   return (
     <Link
       href={`/plugins/${plugin.slug}`}
-      className="flex items-center gap-4 p-4 rounded-sm border border-transparent hover:border-border hover:bg-surface-secondary transition-all group"
+      className="grid grid-cols-[auto_1fr_auto] items-center gap-3 border-b border-border px-0 py-3 text-text-secondary transition-colors last:border-b-0 hover:bg-surface-secondary hover:text-text-primary sm:gap-4 sm:px-3"
     >
-      <div className="w-12 h-12 shrink-0 rounded-sm overflow-hidden bg-surface-secondary border border-border flex items-center justify-center">
+      <div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-surface-secondary sm:h-12 sm:w-12">
         <PluginImage
           iconUrl={plugin.iconUrl}
           repoUrl={plugin.repoUrl}
@@ -79,57 +88,36 @@ function PluginRow({
         />
       </div>
 
-      <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">
-            {plugin.displayName}
-          </span>
+      <div className="min-w-0">
+        <div className="flex min-w-0 items-center gap-2 text-text-primary">
+          <span className="truncate font-semibold">{plugin.displayName}</span>
           {isVerified && (
-            <BadgeCheck size={14} className="text-brand shrink-0" />
+            <span className="shrink-0 text-xs text-text-muted">[x]</span>
           )}
           {plugin.isPreRelease && (
-            <span className="text-[9px] font-bold uppercase tracking-wider text-error bg-error/10 border border-error/20 rounded-xs px-1 py-0.5 shrink-0">
-              Pre
+            <span className="shrink-0 rounded-sm border border-border px-1 py-0.5 text-[10px] text-text-muted">
+              pre
             </span>
           )}
         </div>
-        <p className="text-sm text-text-muted truncate mt-0.5">
+        <p className="mt-0.5 truncate text-sm text-text-muted">
           {plugin.description || "No description"}
         </p>
-        <div className="flex items-center gap-2 mt-1">
-          {plugin.pluginType && (
-            <span className="text-[10px] font-medium text-text-muted bg-surface-secondary border border-border rounded-xs px-1.5 py-0.5">
-              {plugin.pluginType === "PYTHON"
-                ? "Python"
-                : plugin.pluginType === "CPP"
-                  ? "C++"
-                  : plugin.pluginType}
-            </span>
-          )}
-          <span className="text-[11px] text-text-muted flex items-center gap-0.5">
-            <Download size={10} />
-            {plugin.downloads?.toLocaleString() ?? 0}
-          </span>
+        <div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-text-muted">
+          {typeLabel && <span>[{typeLabel}]</span>}
+          <span>dl {plugin.downloads?.toLocaleString() ?? 0}</span>
           {(plugin.commentCount || 0) > 0 && (
-            <span className="text-[11px] text-text-muted flex items-center gap-0.5">
-              <MessageCircle size={10} />
-              {plugin.commentCount}
-            </span>
+            <span>cm {plugin.commentCount}</span>
           )}
         </div>
       </div>
 
-      <div className="shrink-0 text-right">
-        {metric === "heat" ? (
-          <div className="flex items-center gap-1 text-orange-400 font-bold text-sm">
-            <Flame size={14} />
-            {plugin.heatScore || 0}
-          </div>
-        ) : (
-          <span className="text-xs text-text-muted">
-            {plugin.createdAt ? timeAgo(plugin.createdAt) : ""}
-          </span>
-        )}
+      <div className="shrink-0 text-right text-xs text-text-muted">
+        {metric === "heat"
+          ? `heat ${plugin.heatScore || 0}`
+          : plugin.createdAt
+            ? timeAgo(plugin.createdAt)
+            : ""}
       </div>
     </Link>
   );
@@ -142,43 +130,34 @@ function SidebarFeaturedCard({ plugin }: { plugin: Plugin }) {
   return (
     <Link
       href={`/plugins/${plugin.slug}`}
-      className="flex items-start gap-3 p-3 rounded-sm hover:bg-surface-secondary transition-colors group"
+      className="grid grid-cols-[auto_1fr_auto] gap-3 border-b border-border p-3 transition-colors last:border-b-0 hover:bg-surface-secondary"
     >
-      <div className="w-10 h-10 shrink-0 rounded-sm overflow-hidden bg-surface-secondary border border-border flex items-center justify-center">
+      <div className="flex h-9 w-9 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}
         />
       </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">
-            {plugin.displayName}
-          </span>
+      <div className="min-w-0">
+        <div className="flex items-center gap-1.5 text-sm font-semibold text-text-primary">
+          <span className="truncate">{plugin.displayName}</span>
           {isVerified && (
-            <BadgeCheck size={12} className="text-brand shrink-0" />
+            <span className="shrink-0 text-[10px] text-text-muted">[x]</span>
           )}
         </div>
-        <p className="text-xs text-text-muted truncate mt-0.5">
+        <p className="mt-0.5 truncate text-xs text-text-muted">
           {plugin.description || "No description"}
         </p>
-        <div className="flex items-center gap-2 mt-1 text-[11px] text-text-muted">
+        <div className="mt-1 flex items-center gap-2 text-[11px] text-text-muted">
+          <span>dl {plugin.downloads?.toLocaleString() ?? 0}</span>
           {(plugin.commentCount || 0) > 0 && (
-            <span className="flex items-center gap-0.5">
-              <MessageCircle size={10} />
-              {plugin.commentCount}
-            </span>
+            <span>cm {plugin.commentCount}</span>
           )}
-          <span className="flex items-center gap-0.5">
-            <Download size={10} />
-            {plugin.downloads?.toLocaleString() ?? 0}
-          </span>
         </div>
       </div>
       {(plugin.heatScore || 0) > 0 && (
-        <div className="flex items-center gap-0.5 text-orange-400 font-bold text-xs shrink-0">
-          <Flame size={12} />
+        <div className="text-xs font-medium text-text-muted">
           {plugin.heatScore}
         </div>
       )}
@@ -190,23 +169,20 @@ function SidebarTopItem({ plugin, rank }: { plugin: Plugin; rank: number }) {
   return (
     <Link
       href={`/plugins/${plugin.slug}`}
-      className="flex items-center gap-3 p-2 rounded-sm hover:bg-surface-secondary transition-colors group"
+      className="grid grid-cols-[2rem_auto_1fr_auto] items-center gap-2 px-2 py-2 text-sm transition-colors hover:bg-surface-secondary"
     >
-      <span className="text-sm font-black text-text-muted w-5 text-center shrink-0">
-        {rank}
-      </span>
-      <div className="w-8 h-8 shrink-0 rounded-sm overflow-hidden bg-surface-secondary border border-border flex items-center justify-center">
+      <span className="text-text-muted">{String(rank).padStart(2, "0")}</span>
+      <div className="flex h-7 w-7 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}
         />
       </div>
-      <span className="flex-1 font-medium text-sm text-text-primary group-hover:text-brand transition-colors truncate">
+      <span className="truncate font-medium text-text-primary">
         {plugin.displayName}
       </span>
-      <span className="text-xs text-text-muted flex items-center gap-0.5 shrink-0">
-        <Download size={11} />
+      <span className="text-xs text-text-muted">
         {plugin.downloads?.toLocaleString() ?? 0}
       </span>
     </Link>
@@ -229,171 +205,161 @@ export default function HomeContent({
   };
 
   return (
-    <div className="container py-10 lg:py-14">
-      <div className="mb-10 lg:mb-14 max-w-2xl">
-        <h1 className="text-3xl lg:text-4xl font-extrabold tracking-tight text-text-primary mb-3">
-          Discover, build and distribute plugins for Endstone.
-        </h1>
-        <p className="text-text-secondary text-base lg:text-lg mb-6">
-          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 className="container py-12 lg:py-20">
+      <section className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_420px] lg:items-start">
+        <div className="max-w-3xl">
+          <div className="mb-4 inline-flex rounded-sm bg-text-primary px-2 py-1 text-sm text-surface">
+            News
           </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
+          <h1 className="mb-5 max-w-3xl text-[28px] font-bold leading-[1.5] text-text-primary sm:text-[34px] lg:text-[38px]">
+            The terminal-native registry for Endstone plugins.
+          </h1>
+          <p className="mb-8 max-w-2xl text-base leading-7 text-text-secondary">
+            Discover, build, publish and audit Endstone plugins from GitHub.
+            EndGit keeps the marketplace close to the workflow developers
+            already live in: commits, builds, releases and command lines.
+          </p>
+
+          <form
+            onSubmit={handleSearch}
+            className="grid max-w-2xl gap-3 sm:grid-cols-[1fr_auto]"
+          >
+            <label className="relative block">
+              <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-muted">
+                [?]
+              </span>
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="search plugins..."
+                className="input h-10 pl-10 text-sm"
+              />
+            </label>
+            <button type="submit" className="btn btn-primary h-10 text-sm">
+              Search
+            </button>
+          </form>
+
+          <div className="mt-4 flex flex-wrap gap-2">
+            <Link href="/dashboard/dev" className="btn btn-secondary text-sm">
+              [+] 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"
+              className="btn btn-secondary text-sm"
             >
-              <Terminal size={16} />
-              Install CLI
+              [$] Install CLI
             </a>
           </div>
-        </form>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-10 lg:gap-12">
-        <div className="min-w-0">
-          {hotPlugins.length > 0 && (
-            <section className="mb-10">
-              <div className="flex items-center gap-2 mb-4">
-                <Flame size={18} className="text-orange-400" />
-                <h2 className="text-lg font-bold text-text-primary">
-                  Hot Today
-                </h2>
-              </div>
-              <div className="divide-y divide-border border border-border rounded-sm overflow-hidden bg-surface-card">
-                {hotPlugins.map((plugin) => (
-                  <PluginRow key={plugin.id} plugin={plugin} metric="heat" />
-                ))}
-              </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"
-              >
-                See all hot plugins →
-              </Link>
-            </section>
-          )}
+        </div>
 
-          {newPlugins.length > 0 && (
-            <section>
-              <div className="flex items-center gap-2 mb-4">
-                <Clock size={18} className="text-brand" />
-                <h2 className="text-lg font-bold text-text-primary">
-                  New Releases
-                </h2>
-              </div>
-              <div className="divide-y divide-border border border-border rounded-sm overflow-hidden bg-surface-card">
-                {newPlugins.map((plugin) => (
-                  <PluginRow key={plugin.id} plugin={plugin} metric="time" />
-                ))}
-              </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"
-              >
-                See all new plugins →
-              </Link>
-            </section>
-          )}
+        <div className="border bg-[var(--color-text-primary)] p-5 text-[13px] leading-6 text-[var(--color-surface)] sm:p-8">
+          <pre className="overflow-hidden whitespace-pre-wrap font-mono">{`ENDGIT\n\n$ endgit plugins search worldedit\n[+] found 12 packages\n[x] verified source repository\n[+] latest build: green\n\n$ endgit publish --from github\n[+] queued build\n[+] release draft created\n\ntab switch panel    ctrl-p commands`}</pre>
         </div>
+      </section>
 
-        <aside className="space-y-8">
-          {featuredPlugins.length > 0 && (
-            <section>
-              <div className="flex items-center gap-2 mb-3">
-                <Sparkles size={16} className="text-yellow-400" />
-                <h3 className="text-sm font-bold uppercase tracking-wider text-text-muted">
-                  Featured
-                </h3>
-              </div>
-              <div className="border border-border rounded-sm overflow-hidden bg-surface-card divide-y divide-border">
-                {featuredPlugins.map((plugin) => (
-                  <SidebarFeaturedCard key={plugin.id} plugin={plugin} />
-                ))}
-              </div>
-            </section>
-          )}
+      <section className="mt-16 border-t border-border pt-10 lg:mt-24 lg:pt-16">
+        <div className="grid grid-cols-1 gap-12 lg:grid-cols-[1fr_340px]">
+          <div className="min-w-0 space-y-12">
+            {hotPlugins.length > 0 && (
+              <section>
+                <SectionLabel marker="+">Hot Today</SectionLabel>
+                <div className="border border-border bg-surface-card">
+                  {hotPlugins.map((plugin) => (
+                    <PluginRow key={plugin.id} plugin={plugin} metric="heat" />
+                  ))}
+                </div>
+                <Link
+                  href="/plugins?sort=hot"
+                  className="mt-3 inline-flex text-sm text-text-muted hover:text-text-primary hover:underline"
+                >
+                  See all hot plugins →
+                </Link>
+              </section>
+            )}
 
-          {topPlugins.length > 0 && (
-            <section>
-              <div className="flex items-center gap-2 mb-3">
-                <TrendingUp size={16} className="text-emerald-400" />
-                <h3 className="text-sm font-bold uppercase tracking-wider text-text-muted">
-                  Top This Week
-                </h3>
-              </div>
-              <div className="border border-border rounded-sm overflow-hidden bg-surface-card p-2 space-y-0.5">
-                {topPlugins.map((plugin, i) => (
-                  <SidebarTopItem
-                    key={plugin.id}
-                    plugin={plugin}
-                    rank={i + 1}
-                  />
-                ))}
-              </div>
-              <Link
-                href="/plugins/top"
-                className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-brand mt-3 transition-colors"
-              >
-                See full leaderboard →
-              </Link>
-            </section>
-          )}
+            {newPlugins.length > 0 && (
+              <section>
+                <SectionLabel marker="+">New Releases</SectionLabel>
+                <div className="border border-border bg-surface-card">
+                  {newPlugins.map((plugin) => (
+                    <PluginRow key={plugin.id} plugin={plugin} metric="time" />
+                  ))}
+                </div>
+                <Link
+                  href="/plugins?sort=date"
+                  className="mt-3 inline-flex text-sm text-text-muted hover:text-text-primary hover:underline"
+                >
+                  See all new plugins →
+                </Link>
+              </section>
+            )}
+          </div>
 
-          <YourPlugins />
-        </aside>
-      </div>
+          <aside className="space-y-10">
+            {featuredPlugins.length > 0 && (
+              <section>
+                <SectionLabel marker="x">Featured</SectionLabel>
+                <div className="border border-border bg-surface-card">
+                  {featuredPlugins.map((plugin) => (
+                    <SidebarFeaturedCard key={plugin.id} plugin={plugin} />
+                  ))}
+                </div>
+              </section>
+            )}
 
-      <div className="mt-16 lg:mt-20 pt-10 border-t border-border">
-        <p className="text-center text-base font-semibold text-text-primary mb-6">
-          Trusted EndGit Partners
-        </p>
-        <div className="flex flex-wrap justify-center items-center gap-4">
+            {topPlugins.length > 0 && (
+              <section>
+                <SectionLabel marker="+">Top This Week</SectionLabel>
+                <div className="border border-border bg-surface-card py-1">
+                  {topPlugins.map((plugin, i) => (
+                    <SidebarTopItem
+                      key={plugin.id}
+                      plugin={plugin}
+                      rank={i + 1}
+                    />
+                  ))}
+                </div>
+                <Link
+                  href="/plugins/top"
+                  className="mt-3 inline-flex text-sm text-text-muted hover:text-text-primary hover:underline"
+                >
+                  See full leaderboard →
+                </Link>
+              </section>
+            )}
+
+            <YourPlugins />
+          </aside>
+        </div>
+      </section>
+
+      <section className="mt-16 border-t border-border pt-10 lg:mt-24">
+        <SectionLabel marker="+">Trusted EndGit Partners</SectionLabel>
+        <div className="flex flex-wrap items-center gap-3">
           <a
             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 min-h-12 items-center justify-center rounded-sm border border-border bg-surface px-8 py-3 transition-colors hover:border-border-highlight hover:bg-surface-secondary"
           >
             <img
               src="/partners/SparkedHost.svg"
               alt="Sparked Host"
-              className="h-7 object-contain opacity-80 hover:opacity-100 transition-opacity"
+              className="h-7 object-contain opacity-80"
             />
           </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 min-h-12 items-center justify-center rounded-sm border border-dashed border-border px-6 py-3 text-sm text-text-muted transition-colors hover:border-border-highlight hover:text-text-primary hover:underline"
           >
-            Become a Partner →
+            [+] Become a Partner
           </a>
         </div>
-      </div>
+      </section>
     </div>
   );
 }
@@ -421,31 +387,25 @@ function YourPlugins() {
 
   return (
     <section>
-      <div className="flex items-center gap-2 mb-3">
-        <Package size={16} className="text-brand" />
-        <h3 className="text-sm font-bold uppercase tracking-wider text-text-muted">
-          Your Plugins
-        </h3>
-      </div>
-      <div className="border border-border rounded-sm overflow-hidden bg-surface-card p-2 space-y-0.5">
+      <SectionLabel marker="+">Your Plugins</SectionLabel>
+      <div className="border border-border bg-surface-card py-1">
         {plugins.map((plugin) => (
           <Link
             key={plugin.id}
             href={`/plugins/${plugin.slug}`}
-            className="flex items-center gap-3 p-2 rounded-sm hover:bg-surface-secondary transition-colors group"
+            className="grid grid-cols-[auto_1fr_auto] items-center gap-2 px-2 py-2 text-sm transition-colors hover:bg-surface-secondary"
           >
-            <div className="w-8 h-8 shrink-0 rounded-sm overflow-hidden bg-surface-secondary border border-border flex items-center justify-center">
+            <div className="flex h-7 w-7 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}
               />
             </div>
-            <span className="flex-1 font-medium text-sm text-text-primary group-hover:text-brand transition-colors truncate">
+            <span className="truncate font-medium text-text-primary">
               {plugin.displayName}
             </span>
-            <span className="text-xs text-text-muted flex items-center gap-0.5 shrink-0">
-              <Download size={11} />
+            <span className="text-xs text-text-muted">
               {plugin.downloads?.toLocaleString() ?? 0}
             </span>
           </Link>
@@ -453,7 +413,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="mt-3 inline-flex text-sm text-text-muted hover:text-text-primary hover:underline"
       >
         Manage your plugins →
       </Link>

From 322300958bc6ba9d3178da42e0dfb596d6487532 Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 22:29:09 +0700
Subject: [PATCH 04/14] fix: soften initial design pass

---
 src/app/layout.tsx              |  21 +-
 src/components/Footer.tsx       | 204 ++++++++++------
 src/components/HomeContent.tsx  | 418 +++++++++++++++++---------------
 src/components/NavbarClient.tsx |  42 +++-
 src/components/NavbarMobile.tsx |  50 ++--
 5 files changed, 435 insertions(+), 300 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index dfba1e4..54d28c5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
+import Image from "next/image";
 import Link from "next/link";
 import "./globals.css";
 import AuthProvider from "@/components/AuthProvider";
@@ -99,15 +100,23 @@ export default function RootLayout({
 
 function Navbar() {
   return (
-    <header className="sticky top-0 z-50 border-b border-border bg-surface py-3">
-      <div className="container grid grid-cols-[1fr_auto] items-center gap-4">
+    <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="/"
-          className="font-mono text-base font-bold leading-none tracking-normal text-text-primary no-underline shrink-0"
-          aria-label="EndGit home"
+          className="text-2xl font-bold grid grid-cols-[auto_1fr] items-center gap-3 no-underline shrink-0"
         >
-          <span className="hidden sm:inline">[endgit]</span>
-          <span className="sm:hidden">[eg]</span>
+          <Image
+            src="/logo.png"
+            alt="EndGit Logo"
+            width={42}
+            height={42}
+            className="object-contain"
+            priority
+          />
+          <span className="text-text-primary">
+            endgit<span className="text-brand">.</span>{" "}
+          </span>
         </Link>
         <NavbarMobile />
       </div>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 14103ec..9eff686 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,86 +1,140 @@
+import Image from "next/image";
 import Link from "next/link";
 
-const footerLinks = [
-  { href: "/plugins", label: "Plugins" },
-  { href: "/builds", label: "Builds" },
-  { href: "/faq", label: "FAQ" },
-  { href: "https://discord.gg/9eZhP9y26Q", label: "Discord" },
-  { href: "https://github.com/two-tech-dev/endgit-web", label: "GitHub" },
-];
-
 export default function Footer() {
   return (
-    <footer className="mt-24 border-t border-border bg-surface py-8 text-sm text-text-secondary lg:mt-32">
-      <div className="container">
-        <div className="grid grid-cols-1 border border-border sm:grid-cols-2 lg:grid-cols-5">
-          {footerLinks.map((link) => {
-            const external = link.href.startsWith("http");
-            const className =
-              "flex min-h-11 items-center justify-center border-b border-border px-4 py-3 text-center hover:bg-surface-secondary hover:text-text-primary hover:underline sm:[&:nth-child(2n-1)]:border-r lg:border-b-0 lg:border-r lg:last:border-r-0";
-
-            if (external) {
-              return (
-                <a
-                  key={link.href}
-                  href={link.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={className}
-                >
-                  {link.label}
-                </a>
-              );
-            }
+    <footer className="border-t border-border py-8 lg:py-12 mt-auto bg-surface-secondary">
+      <div className="container grid grid-cols-[1fr] lg:grid-cols-[280px_1fr] justify-between gap-6 lg:gap-8">
+        <div className="max-w-[280px]">
+          <div className="grid grid-cols-[auto_1fr] items-center gap-2 mb-3">
+            <Image
+              src="/logo.png"
+              alt="EndGit"
+              width={32}
+              height={32}
+              className="object-contain"
+            />
+            <span className="font-bold text-lg text-text-primary">
+              endgit<span className="text-brand">.</span>
+            </span>
+          </div>
+          <p className="text-text-muted text-xs leading-relaxed m-0">
+            The modern CI/CD and plugin marketplace for the Endstone ecosystem.
+          </p>
+        </div>
 
-            return (
-              <Link key={link.href} href={link.href} className={className}>
-                {link.label}
+        <div className="footer-links grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-8 lg:gap-12">
+          <div>
+            <h4 className="font-semibold text-xs text-text-primary uppercase tracking-wider mb-3">
+              Platform
+            </h4>
+            <div className="grid gap-2">
+              <Link
+                href="/plugins"
+                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
+              >
+                Releases
+              </Link>
+              <Link
+                href="/builds"
+                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
+              >
+                Dev Builds
+              </Link>
+              <Link
+                href="/rules"
+                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
+              >
+                Submission Rules
+              </Link>
+            </div>
+          </div>
+          <div>
+            <h4 className="font-semibold text-xs text-text-primary uppercase tracking-wider mb-3">
+              Community
+            </h4>
+            <div className="grid gap-2">
+              <a
+                href="https://discord.gg/9eZhP9y26Q"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
+              >
+                Discord
+              </a>
+              <a
+                href="https://github.com/two-tech-dev/endgit-web"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
+              >
+                Source code
+              </a>
+              <a
+                href="https://github.com/apps/endgit-local-dev"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
+              >
+                GitHub App
+              </a>
+              <Link
+                href="/faq"
+                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
+              >
+                FAQ
               </Link>
-            );
-          })}
+            </div>
+          </div>
+          <div>
+            <h4 className="font-semibold text-xs text-text-primary uppercase tracking-wider mb-3">
+              Legal
+            </h4>
+            <div className="grid gap-2">
+              <Link
+                href="/terms"
+                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
+              >
+                Terms of Service
+              </Link>
+              <Link
+                href="/privacy"
+                className="text-text-muted text-sm hover:text-text-primary transition-colors no-underline"
+              >
+                Privacy Policy
+              </Link>
+            </div>
+          </div>
         </div>
+      </div>
 
-        <div className="mt-6 grid gap-3 text-xs text-text-muted lg:grid-cols-[1fr_auto] lg:items-center">
-          <p className="m-0" suppressHydrationWarning>
-            © {new Date().getFullYear()} EndGit
-            {process.env.VERCEL_GIT_COMMIT_SHA && (
-              <span className="ml-2 opacity-70">
-                <a
-                  href={`https://github.com/two-tech-dev/endgit-web/commit/${process.env.VERCEL_GIT_COMMIT_SHA}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-inherit hover:underline"
-                >
-                  ({process.env.VERCEL_GIT_COMMIT_SHA.substring(0, 7)})
-                </a>
-              </span>
-            )}
-          </p>
-          <p className="m-0">
-            <Link
-              href="/terms"
-              className="hover:text-text-primary hover:underline"
-            >
-              Terms
-            </Link>
-            <span className="px-2">·</span>
-            <Link
-              href="/privacy"
-              className="hover:text-text-primary hover:underline"
-            >
-              Privacy
-            </Link>
-            <span className="px-2">·</span>
-            <a
-              href="https://2tech.studio"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-text-primary hover:underline"
-            >
-              2Tech Studio
-            </a>
-          </p>
-        </div>
+      <div className="container mt-8 pt-6 border-t border-border grid grid-cols-[1fr_auto] items-center flex-wrap gap-2">
+        <p className="text-text-muted text-xs m-0" suppressHydrationWarning>
+          &copy; {new Date().getFullYear()} EndGit. All rights reserved.
+          {process.env.VERCEL_GIT_COMMIT_SHA && (
+            <span className="ml-2 opacity-70 font-mono text-[11px]">
+              <a
+                href={`https://github.com/two-tech-dev/endgit-web/commit/${process.env.VERCEL_GIT_COMMIT_SHA}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-inherit no-underline"
+              >
+                ({process.env.VERCEL_GIT_COMMIT_SHA.substring(0, 7)})
+              </a>
+            </span>
+          )}
+        </p>
+        <p className="text-text-muted text-xs m-0">
+          Powered by{" "}
+          <a
+            href="https://2tech.studio"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-brand no-underline font-semibold"
+          >
+            2Tech Studio
+          </a>
+        </p>
       </div>
     </footer>
   );
diff --git a/src/components/HomeContent.tsx b/src/components/HomeContent.tsx
index 4c0f5a3..739c414 100644
--- a/src/components/HomeContent.tsx
+++ b/src/components/HomeContent.tsx
@@ -1,8 +1,20 @@
 "use client";
 
 import Link from "next/link";
+import {
+  Search,
+  Flame,
+  Sparkles,
+  TrendingUp,
+  Clock,
+  MessageCircle,
+  Download,
+  BadgeCheck,
+  Package,
+  Terminal,
+} from "lucide-react";
 import PluginImage from "@/components/PluginImage";
-import { type ReactNode, useState } from "react";
+import { useState } from "react";
 import { useSession } from "next-auth/react";
 import { VERIFIED_ORGS } from "@/lib/constants";
 import useSWR from "swr";
@@ -44,21 +56,6 @@ function timeAgo(dateStr: string) {
   return `${Math.floor(days / 7)}w ago`;
 }
 
-function SectionLabel({
-  marker,
-  children,
-}: {
-  marker: string;
-  children: ReactNode;
-}) {
-  return (
-    <div className="mb-4 border-b border-border pb-2 font-bold text-text-primary">
-      <span className="mr-2 text-text-muted">[{marker}]</span>
-      {children}
-    </div>
-  );
-}
-
 function PluginRow({
   plugin,
   metric,
@@ -68,19 +65,13 @@ function PluginRow({
 }) {
   const repoOwner = plugin.repoUrl?.match(/github\.com\/([^/]+)/)?.[1];
   const isVerified = repoOwner ? VERIFIED_ORGS.includes(repoOwner) : false;
-  const typeLabel =
-    plugin.pluginType === "PYTHON"
-      ? "py"
-      : plugin.pluginType === "CPP"
-        ? "cpp"
-        : plugin.pluginType?.toLowerCase();
 
   return (
     <Link
       href={`/plugins/${plugin.slug}`}
-      className="grid grid-cols-[auto_1fr_auto] items-center gap-3 border-b border-border px-0 py-3 text-text-secondary transition-colors last:border-b-0 hover:bg-surface-secondary hover:text-text-primary sm:gap-4 sm:px-3"
+      className="flex items-center gap-4 p-4 rounded-sm border border-transparent hover:border-border hover:bg-surface-secondary transition-all group"
     >
-      <div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-surface-secondary sm:h-12 sm:w-12">
+      <div className="w-12 h-12 shrink-0 rounded-sm overflow-hidden bg-surface-secondary border border-border flex items-center justify-center">
         <PluginImage
           iconUrl={plugin.iconUrl}
           repoUrl={plugin.repoUrl}
@@ -88,36 +79,57 @@ function PluginRow({
         />
       </div>
 
-      <div className="min-w-0">
-        <div className="flex min-w-0 items-center gap-2 text-text-primary">
-          <span className="truncate font-semibold">{plugin.displayName}</span>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-text-primary group-hover:text-text-primary transition-colors truncate">
+            {plugin.displayName}
+          </span>
           {isVerified && (
-            <span className="shrink-0 text-xs text-text-muted">[x]</span>
+            <BadgeCheck size={14} className="text-brand shrink-0" />
           )}
           {plugin.isPreRelease && (
-            <span className="shrink-0 rounded-sm border border-border px-1 py-0.5 text-[10px] text-text-muted">
-              pre
+            <span className="text-[9px] font-bold uppercase tracking-wider text-error bg-error/10 border border-error/20 rounded-xs px-1 py-0.5 shrink-0">
+              Pre
             </span>
           )}
         </div>
-        <p className="mt-0.5 truncate text-sm text-text-muted">
+        <p className="text-sm text-text-muted truncate mt-0.5">
           {plugin.description || "No description"}
         </p>
-        <div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-text-muted">
-          {typeLabel && <span>[{typeLabel}]</span>}
-          <span>dl {plugin.downloads?.toLocaleString() ?? 0}</span>
+        <div className="flex items-center gap-2 mt-1">
+          {plugin.pluginType && (
+            <span className="text-[10px] font-medium text-text-muted bg-surface-secondary border border-border rounded-xs px-1.5 py-0.5">
+              {plugin.pluginType === "PYTHON"
+                ? "Python"
+                : plugin.pluginType === "CPP"
+                  ? "C++"
+                  : plugin.pluginType}
+            </span>
+          )}
+          <span className="text-[11px] text-text-muted flex items-center gap-0.5">
+            <Download size={10} />
+            {plugin.downloads?.toLocaleString() ?? 0}
+          </span>
           {(plugin.commentCount || 0) > 0 && (
-            <span>cm {plugin.commentCount}</span>
+            <span className="text-[11px] text-text-muted flex items-center gap-0.5">
+              <MessageCircle size={10} />
+              {plugin.commentCount}
+            </span>
           )}
         </div>
       </div>
 
-      <div className="shrink-0 text-right text-xs text-text-muted">
-        {metric === "heat"
-          ? `heat ${plugin.heatScore || 0}`
-          : plugin.createdAt
-            ? timeAgo(plugin.createdAt)
-            : ""}
+      <div className="shrink-0 text-right">
+        {metric === "heat" ? (
+          <div className="flex items-center gap-1 text-text-muted font-bold text-sm">
+            <Flame size={14} />
+            {plugin.heatScore || 0}
+          </div>
+        ) : (
+          <span className="text-xs text-text-muted">
+            {plugin.createdAt ? timeAgo(plugin.createdAt) : ""}
+          </span>
+        )}
       </div>
     </Link>
   );
@@ -130,34 +142,43 @@ function SidebarFeaturedCard({ plugin }: { plugin: Plugin }) {
   return (
     <Link
       href={`/plugins/${plugin.slug}`}
-      className="grid grid-cols-[auto_1fr_auto] gap-3 border-b border-border p-3 transition-colors last:border-b-0 hover:bg-surface-secondary"
+      className="flex items-start gap-3 p-3 rounded-sm hover:bg-surface-secondary transition-colors group"
     >
-      <div className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-surface-secondary">
+      <div className="w-10 h-10 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}
         />
       </div>
-      <div className="min-w-0">
-        <div className="flex items-center gap-1.5 text-sm font-semibold text-text-primary">
-          <span className="truncate">{plugin.displayName}</span>
+      <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-text-primary transition-colors truncate">
+            {plugin.displayName}
+          </span>
           {isVerified && (
-            <span className="shrink-0 text-[10px] text-text-muted">[x]</span>
+            <BadgeCheck size={12} className="text-brand shrink-0" />
           )}
         </div>
-        <p className="mt-0.5 truncate text-xs text-text-muted">
+        <p className="text-xs text-text-muted truncate mt-0.5">
           {plugin.description || "No description"}
         </p>
-        <div className="mt-1 flex items-center gap-2 text-[11px] text-text-muted">
-          <span>dl {plugin.downloads?.toLocaleString() ?? 0}</span>
+        <div className="flex items-center gap-2 mt-1 text-[11px] text-text-muted">
           {(plugin.commentCount || 0) > 0 && (
-            <span>cm {plugin.commentCount}</span>
+            <span className="flex items-center gap-0.5">
+              <MessageCircle size={10} />
+              {plugin.commentCount}
+            </span>
           )}
+          <span className="flex items-center gap-0.5">
+            <Download size={10} />
+            {plugin.downloads?.toLocaleString() ?? 0}
+          </span>
         </div>
       </div>
       {(plugin.heatScore || 0) > 0 && (
-        <div className="text-xs font-medium text-text-muted">
+        <div className="flex items-center gap-0.5 text-text-muted font-bold text-xs shrink-0">
+          <Flame size={12} />
           {plugin.heatScore}
         </div>
       )}
@@ -169,20 +190,23 @@ function SidebarTopItem({ plugin, rank }: { plugin: Plugin; rank: number }) {
   return (
     <Link
       href={`/plugins/${plugin.slug}`}
-      className="grid grid-cols-[2rem_auto_1fr_auto] items-center gap-2 px-2 py-2 text-sm transition-colors hover:bg-surface-secondary"
+      className="flex items-center gap-3 p-2 rounded-sm hover:bg-surface-secondary transition-colors group"
     >
-      <span className="text-text-muted">{String(rank).padStart(2, "0")}</span>
-      <div className="flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-surface-secondary">
+      <span className="text-sm font-black text-text-muted w-5 text-center shrink-0">
+        {rank}
+      </span>
+      <div className="w-8 h-8 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}
         />
       </div>
-      <span className="truncate font-medium text-text-primary">
+      <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">
+      <span className="text-xs text-text-muted flex items-center gap-0.5 shrink-0">
+        <Download size={11} />
         {plugin.downloads?.toLocaleString() ?? 0}
       </span>
     </Link>
@@ -205,161 +229,171 @@ export default function HomeContent({
   };
 
   return (
-    <div className="container py-12 lg:py-20">
-      <section className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_420px] lg:items-start">
-        <div className="max-w-3xl">
-          <div className="mb-4 inline-flex rounded-sm bg-text-primary px-2 py-1 text-sm text-surface">
-            News
+    <div className="container py-10 lg:py-14">
+      <div className="mb-10 lg:mb-14 max-w-2xl">
+        <h1 className="text-3xl lg:text-4xl font-extrabold tracking-tight text-text-primary mb-3">
+          Discover, build and distribute plugins for Endstone.
+        </h1>
+        <p className="text-text-secondary text-base lg:text-lg mb-6">
+          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-text-primary transition-colors"
+            />
           </div>
-          <h1 className="mb-5 max-w-3xl text-[28px] font-bold leading-[1.5] text-text-primary sm:text-[34px] lg:text-[38px]">
-            The terminal-native registry for Endstone plugins.
-          </h1>
-          <p className="mb-8 max-w-2xl text-base leading-7 text-text-secondary">
-            Discover, build, publish and audit Endstone plugins from GitHub.
-            EndGit keeps the marketplace close to the workflow developers
-            already live in: commits, builds, releases and command lines.
-          </p>
-
-          <form
-            onSubmit={handleSearch}
-            className="grid max-w-2xl gap-3 sm:grid-cols-[1fr_auto]"
-          >
-            <label className="relative block">
-              <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-muted">
-                [?]
-              </span>
-              <input
-                type="text"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                placeholder="search plugins..."
-                className="input h-10 pl-10 text-sm"
-              />
-            </label>
-            <button type="submit" className="btn btn-primary h-10 text-sm">
-              Search
-            </button>
-          </form>
-
-          <div className="mt-4 flex flex-wrap gap-2">
-            <Link href="/dashboard/dev" className="btn btn-secondary text-sm">
-              [+] Start Publishing
+          <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"
+              className="btn btn-secondary text-sm px-4"
             >
-              [$] Install CLI
+              <Terminal size={16} />
+              Install CLI
             </a>
           </div>
-        </div>
-
-        <div className="border bg-[var(--color-text-primary)] p-5 text-[13px] leading-6 text-[var(--color-surface)] sm:p-8">
-          <pre className="overflow-hidden whitespace-pre-wrap font-mono">{`ENDGIT\n\n$ endgit plugins search worldedit\n[+] found 12 packages\n[x] verified source repository\n[+] latest build: green\n\n$ endgit publish --from github\n[+] queued build\n[+] release draft created\n\ntab switch panel    ctrl-p commands`}</pre>
-        </div>
-      </section>
+        </form>
+      </div>
 
-      <section className="mt-16 border-t border-border pt-10 lg:mt-24 lg:pt-16">
-        <div className="grid grid-cols-1 gap-12 lg:grid-cols-[1fr_340px]">
-          <div className="min-w-0 space-y-12">
-            {hotPlugins.length > 0 && (
-              <section>
-                <SectionLabel marker="+">Hot Today</SectionLabel>
-                <div className="border border-border bg-surface-card">
-                  {hotPlugins.map((plugin) => (
-                    <PluginRow key={plugin.id} plugin={plugin} metric="heat" />
-                  ))}
-                </div>
-                <Link
-                  href="/plugins?sort=hot"
-                  className="mt-3 inline-flex text-sm text-text-muted hover:text-text-primary hover:underline"
-                >
-                  See all hot plugins →
-                </Link>
-              </section>
-            )}
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-10 lg:gap-12">
+        <div className="min-w-0">
+          {hotPlugins.length > 0 && (
+            <section className="mb-10">
+              <div className="flex items-center gap-2 mb-4">
+                <Flame size={18} className="text-text-muted" />
+                <h2 className="text-lg font-bold text-text-primary">
+                  Hot Today
+                </h2>
+              </div>
+              <div className="divide-y divide-border border border-border rounded-sm overflow-hidden bg-surface-card">
+                {hotPlugins.map((plugin) => (
+                  <PluginRow key={plugin.id} plugin={plugin} metric="heat" />
+                ))}
+              </div>
+              <Link
+                href="/plugins?sort=hot"
+                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>
+            </section>
+          )}
 
-            {newPlugins.length > 0 && (
-              <section>
-                <SectionLabel marker="+">New Releases</SectionLabel>
-                <div className="border border-border bg-surface-card">
-                  {newPlugins.map((plugin) => (
-                    <PluginRow key={plugin.id} plugin={plugin} metric="time" />
-                  ))}
-                </div>
-                <Link
-                  href="/plugins?sort=date"
-                  className="mt-3 inline-flex text-sm text-text-muted hover:text-text-primary hover:underline"
-                >
-                  See all new plugins →
-                </Link>
-              </section>
-            )}
-          </div>
+          {newPlugins.length > 0 && (
+            <section>
+              <div className="flex items-center gap-2 mb-4">
+                <Clock size={18} className="text-brand" />
+                <h2 className="text-lg font-bold text-text-primary">
+                  New Releases
+                </h2>
+              </div>
+              <div className="divide-y divide-border border border-border rounded-sm overflow-hidden bg-surface-card">
+                {newPlugins.map((plugin) => (
+                  <PluginRow key={plugin.id} plugin={plugin} metric="time" />
+                ))}
+              </div>
+              <Link
+                href="/plugins?sort=date"
+                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>
+            </section>
+          )}
+        </div>
 
-          <aside className="space-y-10">
-            {featuredPlugins.length > 0 && (
-              <section>
-                <SectionLabel marker="x">Featured</SectionLabel>
-                <div className="border border-border bg-surface-card">
-                  {featuredPlugins.map((plugin) => (
-                    <SidebarFeaturedCard key={plugin.id} plugin={plugin} />
-                  ))}
-                </div>
-              </section>
-            )}
+        <aside className="space-y-8">
+          {featuredPlugins.length > 0 && (
+            <section>
+              <div className="flex items-center gap-2 mb-3">
+                <Sparkles size={16} className="text-text-muted" />
+                <h3 className="text-sm font-bold uppercase tracking-wider text-text-muted">
+                  Featured
+                </h3>
+              </div>
+              <div className="border border-border rounded-sm overflow-hidden bg-surface-card divide-y divide-border">
+                {featuredPlugins.map((plugin) => (
+                  <SidebarFeaturedCard key={plugin.id} plugin={plugin} />
+                ))}
+              </div>
+            </section>
+          )}
 
-            {topPlugins.length > 0 && (
-              <section>
-                <SectionLabel marker="+">Top This Week</SectionLabel>
-                <div className="border border-border bg-surface-card py-1">
-                  {topPlugins.map((plugin, i) => (
-                    <SidebarTopItem
-                      key={plugin.id}
-                      plugin={plugin}
-                      rank={i + 1}
-                    />
-                  ))}
-                </div>
-                <Link
-                  href="/plugins/top"
-                  className="mt-3 inline-flex text-sm text-text-muted hover:text-text-primary hover:underline"
-                >
-                  See full leaderboard →
-                </Link>
-              </section>
-            )}
+          {topPlugins.length > 0 && (
+            <section>
+              <div className="flex items-center gap-2 mb-3">
+                <TrendingUp size={16} className="text-text-muted" />
+                <h3 className="text-sm font-bold uppercase tracking-wider text-text-muted">
+                  Top This Week
+                </h3>
+              </div>
+              <div className="border border-border rounded-sm overflow-hidden bg-surface-card p-2 space-y-0.5">
+                {topPlugins.map((plugin, i) => (
+                  <SidebarTopItem
+                    key={plugin.id}
+                    plugin={plugin}
+                    rank={i + 1}
+                  />
+                ))}
+              </div>
+              <Link
+                href="/plugins/top"
+                className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text-primary mt-3 transition-colors"
+              >
+                See full leaderboard →
+              </Link>
+            </section>
+          )}
 
-            <YourPlugins />
-          </aside>
-        </div>
-      </section>
+          <YourPlugins />
+        </aside>
+      </div>
 
-      <section className="mt-16 border-t border-border pt-10 lg:mt-24">
-        <SectionLabel marker="+">Trusted EndGit Partners</SectionLabel>
-        <div className="flex flex-wrap items-center gap-3">
+      <div className="mt-16 lg:mt-20 pt-10 border-t border-border">
+        <p className="text-center text-base font-semibold text-text-primary mb-6">
+          Trusted EndGit Partners
+        </p>
+        <div className="flex flex-wrap justify-center items-center gap-4">
           <a
             href="https://sparkedhost.com"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex min-h-12 items-center justify-center rounded-sm border border-border bg-surface px-8 py-3 transition-colors hover:border-border-highlight hover:bg-surface-secondary"
+            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"
               alt="Sparked Host"
-              className="h-7 object-contain opacity-80"
+              className="h-7 object-contain opacity-80 hover:opacity-100 transition-opacity"
             />
           </a>
           <a
             href="mailto:partners@endgit.dev"
-            className="flex min-h-12 items-center justify-center rounded-sm border border-dashed border-border px-6 py-3 text-sm text-text-muted transition-colors hover:border-border-highlight hover:text-text-primary hover:underline"
+            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
+            Become a Partner →
           </a>
         </div>
-      </section>
+      </div>
     </div>
   );
 }
@@ -387,25 +421,31 @@ function YourPlugins() {
 
   return (
     <section>
-      <SectionLabel marker="+">Your Plugins</SectionLabel>
-      <div className="border border-border bg-surface-card py-1">
+      <div className="flex items-center gap-2 mb-3">
+        <Package size={16} className="text-brand" />
+        <h3 className="text-sm font-bold uppercase tracking-wider text-text-muted">
+          Your Plugins
+        </h3>
+      </div>
+      <div className="border border-border rounded-sm overflow-hidden bg-surface-card p-2 space-y-0.5">
         {plugins.map((plugin) => (
           <Link
             key={plugin.id}
             href={`/plugins/${plugin.slug}`}
-            className="grid grid-cols-[auto_1fr_auto] items-center gap-2 px-2 py-2 text-sm transition-colors hover:bg-surface-secondary"
+            className="flex items-center gap-3 p-2 rounded-sm hover:bg-surface-secondary transition-colors group"
           >
-            <div className="flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-surface-secondary">
+            <div className="w-8 h-8 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}
               />
             </div>
-            <span className="truncate font-medium text-text-primary">
+            <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">
+            <span className="text-xs text-text-muted flex items-center gap-0.5 shrink-0">
+              <Download size={11} />
               {plugin.downloads?.toLocaleString() ?? 0}
             </span>
           </Link>
@@ -413,7 +453,7 @@ function YourPlugins() {
       </div>
       <Link
         href="/dashboard/dev"
-        className="mt-3 inline-flex text-sm text-text-muted hover:text-text-primary hover:underline"
+        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/NavbarClient.tsx b/src/components/NavbarClient.tsx
index 50924e6..5db1901 100644
--- a/src/components/NavbarClient.tsx
+++ b/src/components/NavbarClient.tsx
@@ -1,6 +1,14 @@
 "use client";
 
 import { useSession, signIn, signOut } from "next-auth/react";
+import {
+  LogIn,
+  ChevronDown,
+  LogOut,
+  LayoutDashboard,
+  Package,
+  Shield,
+} from "lucide-react";
 import { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
@@ -31,7 +39,7 @@ export default function NavbarClient({
         onClick={() => signIn("github")}
         className={`btn btn-primary text-sm py-2 px-4 ${mobile ? "w-full" : ""}`}
       >
-        [+] Sign In
+        <LogIn size={16} /> Sign In
       </button>
     );
   }
@@ -51,7 +59,7 @@ export default function NavbarClient({
     <div
       className={`${
         mobile ? "w-8 h-8" : "w-7 h-7"
-      } rounded-full border border-border bg-surface-secondary flex items-center justify-center text-text-primary text-xs font-bold shrink-0`}
+      } rounded-full bg-linear-to-br from-brand to-brand-dark flex items-center justify-center text-white text-xs font-bold shrink-0`}
     >
       {initials}
     </div>
@@ -69,7 +77,7 @@ export default function NavbarClient({
           mobile ? "py-2.5 px-3 text-[15px]" : "py-2 px-3 text-sm"
         }`}
       >
-        <span>[+]</span> Dev Dashboard
+        <LayoutDashboard size={16} /> Dev Dashboard
       </Link>
       <Link
         href="/dashboard"
@@ -81,7 +89,7 @@ export default function NavbarClient({
           mobile ? "py-2.5 px-3 text-[15px]" : "py-2 px-3 text-sm"
         }`}
       >
-        <span>[+]</span> My Plugins
+        <Package size={16} /> My Plugins
       </Link>
       {((session?.user as any)?.trustLevel === "ADMIN" ||
         (session?.user as any)?.trustLevel === "TRUSTED") && (
@@ -91,11 +99,11 @@ export default function NavbarClient({
             setDropdownOpen(false);
             onNavigate?.();
           }}
-          className={`grid grid-cols-[auto_1fr] items-center gap-2 rounded-sm text-text-secondary hover:bg-surface-secondary hover:text-text-primary transition-colors ${
+          className={`grid grid-cols-[auto_1fr] items-center gap-2 rounded-sm text-[#8b5cf6] hover:bg-[#8b5cf6]/5 transition-colors ${
             mobile ? "py-2.5 px-3 text-[15px]" : "py-2 px-3 text-sm"
           }`}
         >
-          <span>[x]</span> Admin Panel
+          <Shield size={16} /> Admin Panel
         </Link>
       )}
     </>
@@ -108,11 +116,11 @@ export default function NavbarClient({
         setDropdownOpen(false);
         onNavigate?.();
       }}
-      className={`grid grid-cols-[auto_1fr] items-center gap-2 rounded-sm text-text-secondary hover:bg-surface-secondary hover:text-text-primary w-full text-left transition-colors ${
+      className={`grid grid-cols-[auto_1fr] items-center gap-2 rounded-sm text-error hover:bg-error/5 w-full text-left transition-colors ${
         mobile ? "py-2.5 px-3 text-[15px]" : "py-2 px-3 text-sm"
       }`}
     >
-      <span>[-]</span> Sign Out
+      <LogOut size={16} /> Sign Out
     </button>
   );
 
@@ -134,9 +142,12 @@ export default function NavbarClient({
               <div className="text-xs text-text-muted">{user.email}</div>
             )}
           </div>
-          <span className="text-text-muted shrink-0">
-            {dropdownOpen ? "[-]" : "[+]"}
-          </span>
+          <ChevronDown
+            size={16}
+            className={`text-text-muted transition-transform duration-200 shrink-0 ${
+              dropdownOpen ? "rotate-180" : ""
+            }`}
+          />
         </button>
 
         <div
@@ -164,7 +175,12 @@ export default function NavbarClient({
         <span className="font-medium text-sm text-text-primary max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap">
           {user?.name || user?.email}
         </span>
-        <span className="text-text-muted">{dropdownOpen ? "[-]" : "[+]"}</span>
+        <ChevronDown
+          size={14}
+          className={`text-text-muted transition-transform duration-200 ${
+            dropdownOpen ? "rotate-180" : ""
+          }`}
+        />
       </button>
 
       {dropdownOpen && (
@@ -174,7 +190,7 @@ export default function NavbarClient({
             className="fixed inset-0 z-40"
           />
 
-          <div className="absolute right-0 top-[calc(100%+8px)] z-50 w-[220px] max-w-[calc(100vw-2rem)] bg-surface-card border border-border rounded-sm overflow-hidden animate-fade-in">
+          <div className="absolute right-0 top-[calc(100%+8px)] z-50 w-[220px] max-w-[calc(100vw-2rem)] bg-surface-card border border-border rounded-sm shadow-lg overflow-hidden animate-fade-in">
             <div className="py-3 px-4 border-b border-border bg-surface-secondary">
               <div className="font-semibold text-sm text-text-primary">
                 {user?.name}
diff --git a/src/components/NavbarMobile.tsx b/src/components/NavbarMobile.tsx
index 89f5762..b580d8b 100644
--- a/src/components/NavbarMobile.tsx
+++ b/src/components/NavbarMobile.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
+import { Menu, X, Moon, Sun } from "lucide-react";
 import Link from "next/link";
 import NavbarClient from "./NavbarClient";
 import { useTheme } from "@/components/ThemeToggle";
@@ -84,16 +85,16 @@ export default function NavbarMobile() {
     <div
       ref={dropdownRef}
       style={{ top: dropdownTop }}
-      className={`fixed left-0 right-0 z-49 bg-surface border-b border-border overflow-hidden transition-all duration-250 ease-in-out ${
+      className={`fixed left-0 right-0 z-49 bg-surface/80 backdrop-blur-md border-b border-border shadow-sm rounded-b-sm overflow-hidden transition-all duration-250 ease-in-out ${
         visible ? "opacity-100 max-h-screen" : "opacity-0 max-h-0"
       }`}
     >
       <div className="container grid pt-4 gap-1">
         {[
-          { href: "/plugins", label: "[+] Releases" },
-          { href: "/plugins/top", label: "[+] Top Plugins" },
-          { href: "/builds", label: "[+] Dev Builds" },
-          { href: "/faq", label: "[?] FAQ" },
+          { href: "/plugins", label: "Releases" },
+          { href: "/plugins/top", label: "Top Plugins" },
+          { href: "/builds", label: "Dev Builds" },
+          { href: "/faq", label: "FAQ" },
         ].map((item, i) => (
           <div
             key={item.href}
@@ -135,7 +136,7 @@ export default function NavbarMobile() {
               onClick={toggleTheme}
               className="flex items-center gap-2 py-2.5 text-text-secondary font-medium text-base w-full text-left hover:text-text-primary transition-colors"
             >
-              <span>{theme === "light" ? "[-]" : "[+]"}</span>
+              {theme === "light" ? <Moon size={16} /> : <Sun size={16} />}
               {theme === "light" ? "Dark mode" : "Light mode"}
             </button>
           </div>
@@ -158,37 +159,37 @@ export default function NavbarMobile() {
 
   return (
     <div ref={wrapperRef} className="grid items-center">
-      <nav className="hidden lg:grid lg:grid-flow-col lg:auto-cols-auto gap-6 xl:gap-8 items-center">
+      <nav className="hidden lg:grid lg:grid-flow-col lg:auto-cols-auto gap-8 xl:gap-12 items-center">
         <Link
           href="/plugins"
-          className="text-text-secondary font-medium hover:text-text-primary hover:underline transition-colors"
+          className="text-text-secondary font-medium hover:text-text-primary transition-colors"
         >
-          Plugins
+          Releases
         </Link>
         <Link
           href="/plugins/top"
-          className="text-text-secondary font-medium hover:text-text-primary hover:underline transition-colors"
+          className="text-text-secondary font-medium hover:text-text-primary transition-colors"
         >
-          Top [100]
+          Top Plugins
         </Link>
         <Link
           href="/builds"
-          className="text-text-secondary font-medium hover:text-text-primary hover:underline transition-colors"
+          className="text-text-secondary font-medium hover:text-text-primary transition-colors"
         >
-          Builds
+          Dev Builds
         </Link>
         <Link
           href="/faq"
-          className="text-text-secondary font-medium hover:text-text-primary hover:underline transition-colors"
+          className="text-text-secondary font-medium hover:text-text-primary transition-colors"
         >
           FAQ
         </Link>
         <button
           onClick={toggleTheme}
-          className="grid items-center justify-center h-9 px-3 rounded-sm border border-border bg-surface text-text-secondary transition-colors hover:border-border-highlight hover:text-text-primary"
+          className="grid items-center justify-center w-8 h-8 rounded-sm bg-surface-secondary text-text-secondary transition-all hover:bg-border hover:text-text-primary"
           title={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
         >
-          {theme === "light" ? "[-]" : "[+]"}
+          {theme === "light" ? <Moon size={16} /> : <Sun size={16} />}
         </button>
         <NavbarClient />
       </nav>
@@ -198,7 +199,22 @@ export default function NavbarMobile() {
         onClick={handleToggle}
         aria-label="Toggle menu"
       >
-        <span className="font-mono text-base">{open ? "[-]" : "[+]"}</span>
+        <div className="relative w-6 h-6">
+          <div
+            className={`absolute inset-0 grid items-center justify-center transition-all duration-200 ${
+              open ? "opacity-0 rotate-90" : "opacity-100 rotate-0"
+            }`}
+          >
+            <Menu size={24} />
+          </div>
+          <div
+            className={`absolute inset-0 grid items-center justify-center transition-all duration-200 ${
+              open ? "opacity-100 rotate-0" : "opacity-0 -rotate-90"
+            }`}
+          >
+            <X size={24} />
+          </div>
+        </div>
       </button>
 
       {mounted && open && createPortal(dropdown, document.body)}

From 74120bc5d21a9ef7caee3d69de9d422aa5bb31fe Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 22:32:58 +0700
Subject: [PATCH 05/14] feat: refine marketplace surfaces

---
 src/components/HomeContent.tsx          | 10 +++++-----
 src/components/PluginCardGrid.tsx       | 14 +++++++-------
 src/components/PluginPagination.tsx     | 15 +++++----------
 src/components/PluginSearch.tsx         |  2 +-
 src/components/PluginSidebarFilters.tsx | 24 +++++++++++++++---------
 5 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/components/HomeContent.tsx b/src/components/HomeContent.tsx
index 739c414..0c067f3 100644
--- a/src/components/HomeContent.tsx
+++ b/src/components/HomeContent.tsx
@@ -121,7 +121,7 @@ function PluginRow({
 
       <div className="shrink-0 text-right">
         {metric === "heat" ? (
-          <div className="flex items-center gap-1 text-text-muted font-bold text-sm">
+          <div className="flex items-center gap-1 text-warning font-bold text-sm">
             <Flame size={14} />
             {plugin.heatScore || 0}
           </div>
@@ -177,7 +177,7 @@ function SidebarFeaturedCard({ plugin }: { plugin: Plugin }) {
         </div>
       </div>
       {(plugin.heatScore || 0) > 0 && (
-        <div className="flex items-center gap-0.5 text-text-muted 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>
@@ -280,7 +280,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-text-muted" />
+                <Flame size={18} className="text-warning" />
                 <h2 className="text-lg font-bold text-text-primary">
                   Hot Today
                 </h2>
@@ -326,7 +326,7 @@ export default function HomeContent({
           {featuredPlugins.length > 0 && (
             <section>
               <div className="flex items-center gap-2 mb-3">
-                <Sparkles size={16} className="text-text-muted" />
+                <Sparkles size={16} className="text-warning" />
                 <h3 className="text-sm font-bold uppercase tracking-wider text-text-muted">
                   Featured
                 </h3>
@@ -342,7 +342,7 @@ export default function HomeContent({
           {topPlugins.length > 0 && (
             <section>
               <div className="flex items-center gap-2 mb-3">
-                <TrendingUp size={16} className="text-text-muted" />
+                <TrendingUp size={16} className="text-success" />
                 <h3 className="text-sm font-bold uppercase tracking-wider text-text-muted">
                   Top This Week
                 </h3>
diff --git a/src/components/PluginCardGrid.tsx b/src/components/PluginCardGrid.tsx
index 4e439d7..b7630d7 100644
--- a/src/components/PluginCardGrid.tsx
+++ b/src/components/PluginCardGrid.tsx
@@ -24,7 +24,7 @@ interface Plugin {
 
 export default function PluginCardGrid({ plugins }: { plugins: Plugin[] }) {
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 align-content-start">
+    <div className="grid grid-cols-1 gap-4 align-content-start lg:grid-cols-2 xl:grid-cols-3">
       {plugins.map((plugin, i) => {
         const isFeatured = plugin.isFeatured;
         const repoOwner = plugin.repoUrl?.match(/github\.com\/([^/]+)/)?.[1];
@@ -36,13 +36,13 @@ export default function PluginCardGrid({ plugins }: { plugins: Plugin[] }) {
           <Link
             href={`/plugins/${plugin.slug}`}
             key={plugin.id}
-            className="card p-0 flex flex-col no-underline bg-surface-card overflow-hidden transition-all"
+            className="card flex flex-col overflow-hidden bg-surface-card p-0 no-underline transition-colors"
             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="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">
+            <div className="plugin-card-inner flex items-center gap-4 p-4">
+              <div className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-surface-secondary">
                 <PluginImage
                   iconUrl={plugin.iconUrl}
                   repoUrl={plugin.repoUrl}
@@ -51,7 +51,7 @@ export default function PluginCardGrid({ plugins }: { plugins: Plugin[] }) {
               </div>
 
               <div className="flex-1 min-w-0">
-                <h3 className="text-base 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-semibold text-text-primary">
                   {plugin.displayName}
                 </h3>
                 <div className="flex items-center gap-2 min-w-0 flex-wrap mt-1">
@@ -75,7 +75,7 @@ export default function PluginCardGrid({ plugins }: { plugins: Plugin[] }) {
                   {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"
+                      className="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider text-success bg-success/10 border border-success/20 rounded-xs px-1.5 py-0.5 shrink-0"
                     >
                       Featured
                     </span>
@@ -95,7 +95,7 @@ export default function PluginCardGrid({ plugins }: { plugins: Plugin[] }) {
                   </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">
+                      <span className="flex items-center gap-0.5 font-medium text-warning">
                         <Flame size={12} />
                         {plugin.heatScore}
                       </span>
diff --git a/src/components/PluginPagination.tsx b/src/components/PluginPagination.tsx
index cc53a8f..8e09457 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`;
@@ -61,12 +60,10 @@ export default function PluginPagination({
           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..a5cd137 100644
--- a/src/components/PluginSidebarFilters.tsx
+++ b/src/components/PluginSidebarFilters.tsx
@@ -27,11 +27,13 @@ export default function PluginSidebarFilters() {
   ];
 
   return (
-    <aside className="sidebar-filters w-[250px] shrink-0 grid gap-6">
+    <aside className="sidebar-filters grid w-[250px] shrink-0 gap-4">
       <div className="card p-4">
-        <h3 className="font-semibold mb-3 text-text-primary">Categories</h3>
+        <h3 className="mb-3 border-b border-border pb-2 font-semibold text-text-primary">
+          Categories
+        </h3>
         <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)}
         >
@@ -45,16 +47,18 @@ export default function PluginSidebarFilters() {
       </div>
 
       <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">
+        <h3 className="mb-3 border-b border-border pb-2 font-semibold text-text-primary">
+          Sort By
+        </h3>
+        <ul className="m-0 grid gap-2 p-0">
           {sortOptions.map((opt) => (
             <li
               key={opt.value}
               onClick={() => updateFilter("sort", opt.value)}
               className={`cursor-pointer transition-colors ${
                 currentSort === opt.value
-                  ? "text-brand font-semibold"
-                  : "text-text-secondary font-normal hover:text-brand"
+                  ? "font-semibold text-text-primary underline underline-offset-4"
+                  : "font-normal text-text-secondary hover:text-text-primary hover:underline"
               }`}
             >
               {opt.label}
@@ -64,8 +68,10 @@ export default function PluginSidebarFilters() {
       </div>
 
       <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">
+        <h3 className="mb-3 border-b border-border pb-2 font-semibold text-text-primary">
+          Type
+        </h3>
+        <ul className="m-0 grid gap-2 p-0">
           <li className="grid grid-flow-col auto-cols-max items-center gap-2 text-text-secondary">
             <input
               type="radio"

From a18b20ad1c79e386b9dd2b2497b829f57e0b72d4 Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 22:40:02 +0700
Subject: [PATCH 06/14] feat: prototype enhanced plugins page

---
 src/app/plugins/page.tsx                |   7 +-
 src/components/PluginCardGrid.tsx       | 340 +++++++++++++++++-------
 src/components/PluginSidebarFilters.tsx | 130 ++++-----
 3 files changed, 319 insertions(+), 158 deletions(-)

diff --git a/src/app/plugins/page.tsx b/src/app/plugins/page.tsx
index 5e6b2e7..ecaec05 100644
--- a/src/app/plugins/page.tsx
+++ b/src/app/plugins/page.tsx
@@ -44,9 +44,10 @@ 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-8 lg:py-10">
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_auto] justify-between items-start mb-6 gap-4">
         <div>
+          <p className="mb-2 text-sm font-medium text-brand">Marketplace</p>
           <h1 className="heading-2">Releases</h1>
           {pagination.total > 0 && (
             <p className="text-text-muted text-sm mt-1">
@@ -56,7 +57,7 @@ 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>
diff --git a/src/components/PluginCardGrid.tsx b/src/components/PluginCardGrid.tsx
index b7630d7..2a4a623 100644
--- a/src/components/PluginCardGrid.tsx
+++ b/src/components/PluginCardGrid.tsx
@@ -1,14 +1,25 @@
 "use client";
 
 import Link from "next/link";
-import { BadgeCheck, Download, MessageCircle, Flame } from "lucide-react";
+import {
+  BadgeCheck,
+  Check,
+  Copy,
+  Download,
+  Flame,
+  Grid2X2,
+  List,
+  MessageCircle,
+} from "lucide-react";
 import PluginImage from "@/components/PluginImage";
 import { VERIFIED_ORGS } from "@/lib/constants";
+import { useState } from "react";
 
 interface Plugin {
   id: string;
   slug: string;
   displayName: string;
+  description?: string;
   iconUrl?: string;
   repoUrl?: string;
   latestVersion?: string;
@@ -22,100 +33,245 @@ interface Plugin {
   author?: { displayName?: string; username?: string };
 }
 
+function PluginBadge({ kind }: { kind: "pre" | "verified" | "featured" }) {
+  const styles = {
+    pre: "border-error/25 bg-error/15 text-error",
+    verified: "border-brand/25 bg-brand/15 text-brand",
+    featured: "border-success/25 bg-success/15 text-success",
+  };
+  const labels = {
+    pre: "Pre-release",
+    verified: "Verified",
+    featured: "Featured",
+  };
+
+  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 items-center gap-4 no-underline md:contents"
+        >
+          <div className="flex h-14 w-14 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 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 min-h-[112px] flex-col 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 flex-1 grid-cols-[56px_minmax(0,1fr)] gap-4 p-4 no-underline"
+      >
+        <div className="flex h-14 w-14 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="grid min-w-0 content-start pr-8">
+          <h3 className="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-lg font-bold leading-tight text-text-primary">
+            {plugin.displayName}
+          </h3>
+          <div className="mt-1 flex min-w-0 flex-wrap items-center gap-2">
+            {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 items-center justify-between gap-2 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>
+            <div className="flex items-center gap-2">
+              {(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>
+        </div>
+      </Link>
+    </article>
+  );
+}
+
 export default function PluginCardGrid({ plugins }: { plugins: Plugin[] }) {
+  const [view, setView] = useState<"grid" | "list">("grid");
+
   return (
-    <div className="grid grid-cols-1 gap-4 align-content-start lg:grid-cols-2 xl:grid-cols-3">
-      {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 flex flex-col overflow-hidden bg-surface-card p-0 no-underline transition-colors"
-            style={{
-              animation: `fadeSlideUp 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) ${Math.min(i * 0.04, 0.3)}s both`,
-            }}
+    <div>
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <p className="m-0 text-sm text-text-muted">
+          {plugins.length} package{plugins.length === 1 ? "" : "s"} loaded
+        </p>
+        <div className="grid grid-cols-2 overflow-hidden rounded-sm border border-border bg-surface-card">
+          <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 flex items-center gap-4 p-4">
-              <div className="flex h-14 w-14 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="flex-1 min-w-0">
-                <h3 className="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-base font-semibold text-text-primary">
-                  {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-success bg-success/10 border border-success/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-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>
-                    )}
-                    <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 grid-cols-1 gap-4 align-content-start lg:grid-cols-2 xl:grid-cols-3"
+            : "grid gap-3"
+        }
+      >
+        {plugins.map((plugin, i) => (
+          <PluginCard key={plugin.id} plugin={plugin} index={i} view={view} />
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/components/PluginSidebarFilters.tsx b/src/components/PluginSidebarFilters.tsx
index a5cd137..7003efb 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,15 @@ 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 grid w-[250px] shrink-0 gap-4">
-      <div className="card p-4">
-        <h3 className="mb-3 border-b border-border pb-2 font-semibold text-text-primary">
-          Categories
-        </h3>
+      <FilterSection title="Categories">
         <select
           className="input w-full cursor-pointer rounded-sm border border-border bg-surface-secondary p-2 text-text-primary"
           value={currentCategory}
@@ -44,75 +78,45 @@ export default function PluginSidebarFilters() {
             </option>
           ))}
         </select>
-      </div>
+      </FilterSection>
 
-      <div className="card p-4">
-        <h3 className="mb-3 border-b border-border pb-2 font-semibold text-text-primary">
-          Sort By
-        </h3>
-        <ul className="m-0 grid gap-2 p-0">
+      <FilterSection title="Sort By">
+        <div className="grid gap-2">
           {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
-                  ? "font-semibold text-text-primary underline underline-offset-4"
-                  : "font-normal text-text-secondary hover:text-text-primary hover:underline"
+                  ? "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="mb-3 border-b border-border pb-2 font-semibold text-text-primary">
-          Type
-        </h3>
-        <ul className="m-0 grid gap-2 p-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>
   );
 }

From 5703754aa17b35bdf599cbd83f8f53a93fd0588e Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 22:41:56 +0700
Subject: [PATCH 07/14] fix: compact plugin grid cards

---
 src/components/PluginCardGrid.tsx | 40 +++++++++++++++----------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/PluginCardGrid.tsx b/src/components/PluginCardGrid.tsx
index 2a4a623..7290d86 100644
--- a/src/components/PluginCardGrid.tsx
+++ b/src/components/PluginCardGrid.tsx
@@ -168,7 +168,7 @@ function PluginCard({
 
   return (
     <article
-      className="card group relative flex min-h-[112px] flex-col 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)]"
+      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`,
       }}
@@ -176,7 +176,7 @@ function PluginCard({
       <CopyInstallButton slug={plugin.slug} />
       <Link
         href={`/plugins/${plugin.slug}`}
-        className="grid flex-1 grid-cols-[56px_minmax(0,1fr)] gap-4 p-4 no-underline"
+        className="grid grid-cols-[56px_minmax(0,1fr)] gap-4 p-4 no-underline"
       >
         <div className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-surface-secondary">
           <PluginImage
@@ -186,11 +186,11 @@ function PluginCard({
           />
         </div>
 
-        <div className="grid min-w-0 content-start pr-8">
+        <div className="grid min-w-0 content-start pr-7">
           <h3 className="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-lg font-bold leading-tight text-text-primary">
             {plugin.displayName}
           </h3>
-          <div className="mt-1 flex min-w-0 flex-wrap items-center gap-2">
+          <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" />}
@@ -200,25 +200,23 @@ function PluginCard({
               {author}
             </span>
           </div>
-          <div className="mt-2 flex items-center justify-between gap-2 text-xs text-text-muted">
+          <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>
-            <div className="flex items-center gap-2">
-              {(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>
+            {(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>
@@ -264,7 +262,7 @@ export default function PluginCardGrid({ plugins }: { plugins: Plugin[] }) {
       <div
         className={
           view === "grid"
-            ? "grid grid-cols-1 gap-4 align-content-start lg:grid-cols-2 xl:grid-cols-3"
+            ? "grid grid-cols-1 items-start gap-4 align-content-start lg:grid-cols-2 xl:grid-cols-3"
             : "grid gap-3"
         }
       >

From 772dba470220fd82bcf9add8e3be1c55264c7ee9 Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 22:53:00 +0700
Subject: [PATCH 08/14] fix: improve plugins page ergonomics

---
 src/app/plugins/page.tsx                |  9 ++++-----
 src/components/PluginCardGrid.tsx       | 22 +++++++++++++++-------
 src/components/PluginPagination.tsx     |  2 +-
 src/components/PluginSidebarFilters.tsx |  2 +-
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/app/plugins/page.tsx b/src/app/plugins/page.tsx
index ecaec05..eda0963 100644
--- a/src/app/plugins/page.tsx
+++ b/src/app/plugins/page.tsx
@@ -44,10 +44,9 @@ export default async function PluginsPage({
   };
 
   return (
-    <div className="container py-8 lg:py-10">
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr_auto] justify-between items-start mb-6 gap-4">
+    <div className="container py-4 lg:py-6">
+      <div className="grid grid-cols-1 gap-4 lg:mb-4 lg:grid-cols-[1fr_auto] lg:items-start lg:justify-between">
         <div>
-          <p className="mb-2 text-sm font-medium text-brand">Marketplace</p>
           <h1 className="heading-2">Releases</h1>
           {pagination.total > 0 && (
             <p className="text-text-muted text-sm mt-1">
@@ -62,14 +61,14 @@ export default async function PluginsPage({
         </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/components/PluginCardGrid.tsx b/src/components/PluginCardGrid.tsx
index 7290d86..01fbc70 100644
--- a/src/components/PluginCardGrid.tsx
+++ b/src/components/PluginCardGrid.tsx
@@ -10,6 +10,7 @@ import {
   Grid2X2,
   List,
   MessageCircle,
+  Sparkles,
 } from "lucide-react";
 import PluginImage from "@/components/PluginImage";
 import { VERIFIED_ORGS } from "@/lib/constants";
@@ -34,15 +35,22 @@ interface Plugin {
 }
 
 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",
-    featured: "border-success/25 bg-success/15 text-success",
   };
   const labels = {
     pre: "Pre-release",
     verified: "Verified",
-    featured: "Featured",
   };
 
   return (
@@ -228,10 +236,10 @@ export default function PluginCardGrid({ plugins }: { plugins: Plugin[] }) {
   const [view, setView] = useState<"grid" | "list">("grid");
 
   return (
-    <div>
-      <div className="mb-4 flex items-center justify-between gap-3">
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="mb-3 flex shrink-0 items-center justify-between gap-3">
         <p className="m-0 text-sm text-text-muted">
-          {plugins.length} package{plugins.length === 1 ? "" : "s"} loaded
+          {plugins.length} plugin{plugins.length === 1 ? "" : "s"} loaded
         </p>
         <div className="grid grid-cols-2 overflow-hidden rounded-sm border border-border bg-surface-card">
           <button
@@ -262,8 +270,8 @@ export default function PluginCardGrid({ plugins }: { plugins: Plugin[] }) {
       <div
         className={
           view === "grid"
-            ? "grid grid-cols-1 items-start gap-4 align-content-start lg:grid-cols-2 xl:grid-cols-3"
-            : "grid gap-3"
+            ? "grid flex-1 grid-cols-1 content-start items-start gap-4 overflow-y-auto pr-2 [scrollbar-width:thin] lg:grid-cols-2 xl:grid-cols-3"
+            : "grid flex-1 content-start gap-3 overflow-y-auto pr-2 [scrollbar-width:thin]"
         }
       >
         {plugins.map((plugin, i) => (
diff --git a/src/components/PluginPagination.tsx b/src/components/PluginPagination.tsx
index 8e09457..4ed148e 100644
--- a/src/components/PluginPagination.tsx
+++ b/src/components/PluginPagination.tsx
@@ -54,7 +54,7 @@ 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)}
diff --git a/src/components/PluginSidebarFilters.tsx b/src/components/PluginSidebarFilters.tsx
index 7003efb..46dadc4 100644
--- a/src/components/PluginSidebarFilters.tsx
+++ b/src/components/PluginSidebarFilters.tsx
@@ -64,7 +64,7 @@ export default function PluginSidebarFilters() {
   ];
 
   return (
-    <aside className="sidebar-filters grid w-[250px] shrink-0 gap-4">
+    <aside className="sidebar-filters grid w-[250px] shrink-0 gap-4 lg:max-h-full lg:overflow-y-auto lg:pr-1 lg:[scrollbar-width:thin]">
       <FilterSection title="Categories">
         <select
           className="input w-full cursor-pointer rounded-sm border border-border bg-surface-secondary p-2 text-text-primary"

From c4490f0d2934b66341cd9706bfa25fc525dc3817 Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 23:17:04 +0700
Subject: [PATCH 09/14] feat: improve plugin readme presentation

---
 src/app/globals.css                     | 107 +++++++++
 src/app/plugins/[slug]/page.tsx         |  23 +-
 src/components/MarkdownTabs.tsx         | 287 +++++++++++++++++++++---
 src/components/PluginAnalyticsChart.tsx |  16 +-
 4 files changed, 384 insertions(+), 49 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index ec0f58f..67f8ce5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1020,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/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/components/MarkdownTabs.tsx b/src/components/MarkdownTabs.tsx
index b603355..98a4e73 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-4 lg:px-6">
+          <div className="flex gap-6 overflow-x-auto [scrollbar-width:thin]">
+            {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-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,
               }}

From 9aa5b7691ab31ac38cd2e05b2338724422abfe2e Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 23:20:08 +0700
Subject: [PATCH 10/14] feat: polish builds page

---
 src/components/BuildList.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

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>

From b790e1816da88ba925ed2bb3806d58655e7b39d8 Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 23:27:15 +0700
Subject: [PATCH 11/14] feat: polish dashboard overview

---
 src/app/dashboard/page.tsx | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

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>
                 ) : (

From 4e23ffb7c343cce9034be7ec5247f8ff3fab98c7 Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 23:37:32 +0700
Subject: [PATCH 12/14] docs: simplify submission guidelines

---
 src/app/rules/page.tsx | 222 +++++++++++------------------------------
 1 file changed, 59 insertions(+), 163 deletions(-)

diff --git a/src/app/rules/page.tsx b/src/app/rules/page.tsx
index 959e984..77d5091 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.',
-      },
-      {
-        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.",
+        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: "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,10 +175,11 @@ 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>
 
@@ -381,12 +275,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>

From c94623066d4884b4f98f27e01e9e922c1efb4b32 Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 23:49:41 +0700
Subject: [PATCH 13/14] feat: improve responsiveness and trim extras

---
 src/app/plugins/page.tsx                |  4 +-
 src/app/rules/page.tsx                  | 25 -----------
 src/components/HomeContent.tsx          | 60 ++++++-------------------
 src/components/MarkdownTabs.tsx         |  6 +--
 src/components/PluginCardGrid.tsx       | 34 +++++++++-----
 src/components/PluginSidebarFilters.tsx |  4 +-
 6 files changed, 43 insertions(+), 90 deletions(-)

diff --git a/src/app/plugins/page.tsx b/src/app/plugins/page.tsx
index eda0963..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-4 lg:py-6">
-      <div className="grid grid-cols-1 gap-4 lg:mb-4 lg:grid-cols-[1fr_auto] lg:items-start lg:justify-between">
+    <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 && (
diff --git a/src/app/rules/page.tsx b/src/app/rules/page.tsx
index 77d5091..d111048 100644
--- a/src/app/rules/page.tsx
+++ b/src/app/rules/page.tsx
@@ -183,31 +183,6 @@ export default function RulesPage() {
         </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) => (
diff --git a/src/components/HomeContent.tsx b/src/components/HomeContent.tsx
index 0c067f3..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";
@@ -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-text-primary 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">
diff --git a/src/components/MarkdownTabs.tsx b/src/components/MarkdownTabs.tsx
index 98a4e73..1615da9 100644
--- a/src/components/MarkdownTabs.tsx
+++ b/src/components/MarkdownTabs.tsx
@@ -360,8 +360,8 @@ export default function MarkdownTabs({
   return (
     <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-4 lg:px-6">
-          <div className="flex gap-6 overflow-x-auto [scrollbar-width:thin]">
+        <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}
@@ -379,7 +379,7 @@ export default function MarkdownTabs({
           </div>
         </div>
       )}
-      <div className="p-6 lg:p-7">
+      <div className="p-4 sm:p-6 lg:p-7">
         {activeSection && <MarkdownContent content={activeSection.content} />}
       </div>
     </div>
diff --git a/src/components/PluginCardGrid.tsx b/src/components/PluginCardGrid.tsx
index 01fbc70..8e688cf 100644
--- a/src/components/PluginCardGrid.tsx
+++ b/src/components/PluginCardGrid.tsx
@@ -14,7 +14,7 @@ import {
 } from "lucide-react";
 import PluginImage from "@/components/PluginImage";
 import { VERIFIED_ORGS } from "@/lib/constants";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 interface Plugin {
   id: string;
@@ -127,9 +127,9 @@ function PluginCard({
         <CopyInstallButton slug={plugin.slug} />
         <Link
           href={`/plugins/${plugin.slug}`}
-          className="flex items-center gap-4 no-underline md:contents"
+          className="flex flex-col gap-3 no-underline sm:flex-row sm:items-center md:contents"
         >
-          <div className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-surface-secondary">
+          <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}
@@ -137,7 +137,7 @@ function PluginCard({
             />
           </div>
 
-          <div className="min-w-0 pr-10">
+          <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}
@@ -184,9 +184,9 @@ function PluginCard({
       <CopyInstallButton slug={plugin.slug} />
       <Link
         href={`/plugins/${plugin.slug}`}
-        className="grid grid-cols-[56px_minmax(0,1fr)] gap-4 p-4 no-underline"
+        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-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-surface-secondary">
+        <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}
@@ -194,8 +194,8 @@ function PluginCard({
           />
         </div>
 
-        <div className="grid min-w-0 content-start pr-7">
-          <h3 className="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-lg font-bold leading-tight text-text-primary">
+        <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">
@@ -235,13 +235,23 @@ function PluginCard({
 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="flex min-h-0 flex-1 flex-col">
-      <div className="mb-3 flex shrink-0 items-center justify-between gap-3">
+      <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="grid grid-cols-2 overflow-hidden rounded-sm border border-border bg-surface-card">
+        <div className="hidden grid-cols-2 overflow-hidden rounded-sm border border-border bg-surface-card sm:grid">
           <button
             type="button"
             onClick={() => setView("grid")}
@@ -270,8 +280,8 @@ export default function PluginCardGrid({ plugins }: { plugins: Plugin[] }) {
       <div
         className={
           view === "grid"
-            ? "grid flex-1 grid-cols-1 content-start items-start gap-4 overflow-y-auto pr-2 [scrollbar-width:thin] lg:grid-cols-2 xl:grid-cols-3"
-            : "grid flex-1 content-start gap-3 overflow-y-auto pr-2 [scrollbar-width:thin]"
+            ? "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) => (
diff --git a/src/components/PluginSidebarFilters.tsx b/src/components/PluginSidebarFilters.tsx
index 46dadc4..61a35ee 100644
--- a/src/components/PluginSidebarFilters.tsx
+++ b/src/components/PluginSidebarFilters.tsx
@@ -64,7 +64,7 @@ export default function PluginSidebarFilters() {
   ];
 
   return (
-    <aside className="sidebar-filters grid w-[250px] shrink-0 gap-4 lg:max-h-full lg:overflow-y-auto lg:pr-1 lg:[scrollbar-width:thin]">
+    <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 cursor-pointer rounded-sm border border-border bg-surface-secondary p-2 text-text-primary"
@@ -81,7 +81,7 @@ export default function PluginSidebarFilters() {
       </FilterSection>
 
       <FilterSection title="Sort By">
-        <div className="grid gap-2">
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-1">
           {sortOptions.map((opt) => (
             <button
               type="button"

From fb0139a67f62581c52dae711aba0d839302ba75c Mon Sep 17 00:00:00 2001
From: Alice Soraya <nguyenhieu.c47s@gmail.com>
Date: Tue, 9 Jun 2026 23:59:41 +0700
Subject: [PATCH 14/14] feat: redesign top plugins as leaderboard

---
 src/app/plugins/top/page.tsx | 301 +++++++++++++++--------------------
 1 file changed, 127 insertions(+), 174 deletions(-)

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>