diff --git a/public/assets/images/media/1782918343388-1l2ffb.png b/public/assets/images/media/1782918343388-1l2ffb.png
deleted file mode 100644
index 585c0831..00000000
Binary files a/public/assets/images/media/1782918343388-1l2ffb.png and /dev/null differ
diff --git a/public/assets/images/media/1782918356934-ka3e9z.png b/public/assets/images/media/1782918356934-ka3e9z.png
deleted file mode 100644
index a9ca5294..00000000
Binary files a/public/assets/images/media/1782918356934-ka3e9z.png and /dev/null differ
diff --git a/public/assets/images/media/1782918498476-6wuch2.gif b/public/assets/images/media/1782918498476-6wuch2.gif
deleted file mode 100644
index 4222eb4b..00000000
Binary files a/public/assets/images/media/1782918498476-6wuch2.gif and /dev/null differ
diff --git a/public/assets/images/media/1783005975459-n09cry.png b/public/assets/images/media/1783005975459-n09cry.png
new file mode 100644
index 00000000..ee6f63f6
Binary files /dev/null and b/public/assets/images/media/1783005975459-n09cry.png differ
diff --git a/public/assets/images/media/1783005975752-jw2pl4.png b/public/assets/images/media/1783005975752-jw2pl4.png
new file mode 100644
index 00000000..8beb9692
Binary files /dev/null and b/public/assets/images/media/1783005975752-jw2pl4.png differ
diff --git a/public/assets/images/media/1783005975846-vojrxo.png b/public/assets/images/media/1783005975846-vojrxo.png
new file mode 100644
index 00000000..55e4104f
Binary files /dev/null and b/public/assets/images/media/1783005975846-vojrxo.png differ
diff --git a/public/assets/images/media/1783005975989-79zz1o.png b/public/assets/images/media/1783005975989-79zz1o.png
new file mode 100644
index 00000000..98350357
Binary files /dev/null and b/public/assets/images/media/1783005975989-79zz1o.png differ
diff --git a/public/assets/images/media/1783005976088-c7mpxa.png b/public/assets/images/media/1783005976088-c7mpxa.png
new file mode 100644
index 00000000..a20edd57
Binary files /dev/null and b/public/assets/images/media/1783005976088-c7mpxa.png differ
diff --git a/public/assets/images/media/1783005976216-30uoee.png b/public/assets/images/media/1783005976216-30uoee.png
new file mode 100644
index 00000000..0128131c
Binary files /dev/null and b/public/assets/images/media/1783005976216-30uoee.png differ
diff --git a/src/app/admin/badges/page.tsx b/src/app/admin/badges/page.tsx
index f19d099d..2ed5c22f 100644
--- a/src/app/admin/badges/page.tsx
+++ b/src/app/admin/badges/page.tsx
@@ -1,6 +1,7 @@
 import { giveBadge } from "@/actions/admin-badges";
 import { uploadBadge } from "@/actions/admin-badge-upload";
 import { prisma } from "@/lib/prisma";
+import { Award } from "lucide-react";
 
 export const dynamic = "force-dynamic";
 
@@ -25,34 +26,34 @@ export default async function AdminBadges({
 
   return (
     <main>
-      <section className="mt-6">
-        <h2>Badges</h2>
-        <p className="muted">
-          Website badge catalogue (<code>website_badges</code>). Granting fires the emulator
-          <code> givebadge</code> RCON command and records the badge in <code>users_badges</code>.
-        </p>
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
+          <Award size={20} className="text-[var(--color-primary)]" />
+        </div>
+        <div>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Badges</h1>
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Website badge catalogue.</p>
+        </div>
+      </div>
 
-        {uploaded ? (
-          <p>
-            <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">Uploaded</span> Badge image{" "}
-            <code>{uploaded}.gif</code> saved.
-          </p>
-        ) : null}
-        {error ? (
-          <p>
-            <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">Error</span> {error}
-          </p>
-        ) : null}
-      </section>
+      {uploaded && (
+        <div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
+          Uploaded Badge image <code>{uploaded}.gif</code> saved.
+        </div>
+      )}
+      {error && (
+        <div className="mb-4 p-3 rounded-lg bg-red-600/10 text-red-600 dark:text-red-400 text-xs">
+          Error: {error}
+        </div>
+      )}
 
       <section className="mt-6">
-        <h2>Upload badge image</h2>
-        <p className="muted" style={{ marginTop: "-0.4rem" }}>
-          Saves a <code>.gif</code> badge image to the emulator badge directory
-          (<code>BADGE_UPLOAD_DIR</code>). The file is stored as <code>&lt;code&gt;.gif</code>.
+        <h2 className="admin-section-title">Upload badge image</h2>
+        <p className="text-xs text-[var(--color-text-muted)] -mt-2 mb-3">
+          Saves a <code>.gif</code> badge image to the emulator badge directory.
         </p>
-        <form action={uploadBadge} className="card">
-          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
+        <form action={uploadBadge} className="admin-card">
+          <div className="flex gap-2 flex-wrap items-center">
             <input type="file" name="file" accept=".gif,.png" required />
             <input
               name="code"
@@ -60,7 +61,7 @@ export default async function AdminBadges({
               required
               maxLength={64}
               pattern="[A-Za-z0-9_-]{1,64}"
-              style={{ flex: 1, minWidth: 160 }}
+              className="flex-1 min-w-[160px]"
             />
             <button type="submit" className="btn btn-primary">
               Upload
@@ -70,16 +71,16 @@ export default async function AdminBadges({
       </section>
 
       <section className="mt-6">
-        <h2>Give badge to user</h2>
-        <form action={giveBadge} className="card">
-          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
+        <h2 className="admin-section-title">Give badge to user</h2>
+        <form action={giveBadge} className="admin-card">
+          <div className="flex gap-2 flex-wrap items-center">
             <input name="userId" type="number" min={1} placeholder="User ID" required />
             <input
               name="code"
               placeholder="Badge code (e.g. ADM)"
               required
               maxLength={32}
-              style={{ flex: 1, minWidth: 160 }}
+              className="flex-1 min-w-[160px]"
               list="badge-codes"
             />
             <datalist id="badge-codes">
@@ -97,11 +98,11 @@ export default async function AdminBadges({
       </section>
 
       <section className="mt-6">
-        <h2>Catalogue ({badges.length})</h2>
+        <h2 className="admin-section-title">Catalogue ({badges.length})</h2>
         {badges.length === 0 ? (
-          <p className="muted">No badges in the catalogue.</p>
+          <div className="admin-empty">No badges in the catalogue.</div>
         ) : (
-          <div style={{ overflowX: "auto" }}>
+          <div className="overflow-x-auto">
             <table>
               <thead>
                 <tr>
@@ -118,11 +119,11 @@ export default async function AdminBadges({
                       <code>{b.badgeKey}</code>
                     </td>
                     <td>{b.badgeName}</td>
-                    <td className="muted">{b.badgeDescription}</td>
+                    <td className="text-sm text-gray-500 dark:text-gray-400">{b.badgeDescription}</td>
                     <td>
                       <form
                         action={giveBadge}
-                        style={{ display: "flex", gap: "0.4rem", alignItems: "center" }}
+                        className="flex gap-2 items-center"
                       >
                         <input type="hidden" name="code" value={b.badgeKey} />
                         <input
@@ -131,7 +132,7 @@ export default async function AdminBadges({
                           min={1}
                           placeholder="User ID"
                           required
-                          style={{ width: 90 }}
+                          className="w-[90px]"
                         />
                         <button type="submit" className="btn btn-outline">
                           Give
diff --git a/src/app/admin/commandocentrum/page.tsx b/src/app/admin/commandocentrum/page.tsx
index 999253a0..60ebeb83 100644
--- a/src/app/admin/commandocentrum/page.tsx
+++ b/src/app/admin/commandocentrum/page.tsx
@@ -1,4 +1,5 @@
 import os from "node:os";
+import { Activity } from 'lucide-react';
 import {
   hotelAlert,
   updateCatalog,
@@ -85,10 +86,15 @@ export default async function CommandoCentrum() {
 
   return (
     <main>
-      <h1>Commandocentrum</h1>
-      <p className="muted" style={{ marginTop: "-0.25rem" }}>
-        Live hotel status, diagnostics and emulator control over RCON.
-      </p>
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
+          <Activity size={20} className="text-[var(--color-primary)]" />
+        </div>
+        <div>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Commandocentrum</h1>
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Live hotel status, diagnostics and emulator control over RCON.</p>
+        </div>
+      </div>
 
       {/* ── Live status ────────────────────────────────────────── */}
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6" style={{ marginTop: "1.1rem" }}>
@@ -123,8 +129,8 @@ export default async function CommandoCentrum() {
       </div>
 
       {/* ── Online users widget ───────────────────────────────── */}
-      <section className="card" style={{ marginBottom: "1.5rem" }}>
-        <h2 style={{ marginTop: 0 }}>Online Users</h2>
+      <section className="admin-card mb-6">
+        <h2 className="admin-section-title">Online Users</h2>
         <OnlineUsersWidget
           users={[]}
           isLoading={false}
@@ -133,8 +139,8 @@ export default async function CommandoCentrum() {
 
       {/* ── Server info + diagnostics ──────────────────────────── */}
       <div className="grid cols-2">
-        <section className="card">
-          <h2 style={{ marginTop: 0 }}>Server info</h2>
+        <section className="admin-card p-5">
+          <h2 className="admin-section-title">Server info</h2>
           <div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-2.5">
             <InfoItem label="Node" value={process.version} />
             <InfoItem label="Platform" value={`${process.platform} ${process.arch}`} />
@@ -147,8 +153,8 @@ export default async function CommandoCentrum() {
           </div>
         </section>
 
-        <section className="card">
-          <h2 style={{ marginTop: 0 }}>System diagnostics</h2>
+        <section className="admin-card p-5">
+          <h2 className="admin-section-title">System diagnostics</h2>
           <div className="flex flex-col">
             <DiagnosticRow
               label="Database"
@@ -184,13 +190,12 @@ export default async function CommandoCentrum() {
         </section>
       </div>
 
-      {/* ── RCON controls ──────────────────────────────────────── */}
       <section className="mt-6">
-        <h2>Emulator controls</h2>
-        <div className="grid cols-3">
-          <form action={updateCatalog} className="card">
-            <h3 style={{ marginTop: 0 }}>Update catalog</h3>
-            <p className="muted" style={{ margin: "0 0 0.85rem" }}>
+        <h2 className="admin-section-title">Emulator controls</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <form action={updateCatalog} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Update catalog</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-4">
               Reload catalog pages and items on the live server.
             </p>
             <button type="submit" className="btn btn-primary">
@@ -198,9 +203,9 @@ export default async function CommandoCentrum() {
             </button>
           </form>
 
-          <form action={updateWordFilter} className="card">
-            <h3 style={{ marginTop: 0 }}>Update word filter</h3>
-            <p className="muted" style={{ margin: "0 0 0.85rem" }}>
+          <form action={updateWordFilter} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Update word filter</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-4">
               Reload the chat word filter from the database.
             </p>
             <button type="submit" className="btn btn-primary">
@@ -208,9 +213,9 @@ export default async function CommandoCentrum() {
             </button>
           </form>
 
-          <form action={updateNavigator} className="card">
-            <h3 style={{ marginTop: 0 }}>Update navigator</h3>
-            <p className="muted" style={{ margin: "0 0 0.85rem" }}>
+          <form action={updateNavigator} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Update navigator</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-4">
               Reload navigator categories and room listings.
             </p>
             <button type="submit" className="btn btn-primary">
@@ -219,18 +224,18 @@ export default async function CommandoCentrum() {
           </form>
         </div>
 
-        <form action={hotelAlert} className="card" style={{ marginTop: "1rem" }}>
-          <h3 style={{ marginTop: 0 }}>Hotel alert</h3>
-          <p className="muted" style={{ margin: "0 0 0.75rem" }}>
+        <form action={hotelAlert} className="admin-card mt-6">
+          <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Hotel alert</h3>
+          <p className="text-xs text-[var(--color-text-muted)] mb-3">
             Broadcast a message to every connected user.
           </p>
-          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+          <div className="flex gap-2">
             <input
               name="message"
               required
               maxLength={512}
               placeholder="Message to broadcast…"
-              style={{ flex: 1, minWidth: 220 }}
+              className="flex-1 min-w-[220px]"
             />
             <button type="submit" className="btn btn-danger">
               Send alert
@@ -241,149 +246,173 @@ export default async function CommandoCentrum() {
 
       {/* ── User RCON actions ──────────────────────────────────── */}
       <section className="mt-6">
-        <h2>User actions (RCON)</h2>
-        <p className="muted" style={{ marginTop: "-0.4rem" }}>
+        <h2 className="admin-section-title">User actions (RCON)</h2>
+        <p className="text-xs text-[var(--color-text-muted)] mb-4">
           Enter a User ID to perform actions on a specific user. Username required for disconnect.
         </p>
 
-        <div className="grid cols-3">
-          <form action={disconnectUser} className="card">
-            <h3 style={{ marginTop: 0 }}>Disconnect / Kick</h3>
-            <p className="muted" style={{ margin: "0 0 0.75rem" }}>Force disconnect a user.</p>
-            <input name="userId" type="number" min={1} placeholder="User ID" required style={{ width: "100%", marginBottom: "0.5rem" }} />
-            <input name="username" type="text" placeholder="Username (required)" required style={{ width: "100%", marginBottom: "0.75rem" }} />
-            <button type="submit" className="btn btn-danger">Disconnect user</button>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <form action={disconnectUser} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Disconnect / Kick</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-3">Force disconnect a user.</p>
+            <div className="space-y-2">
+              <input name="userId" type="number" min={1} placeholder="User ID" required className="w-full" />
+              <input name="username" type="text" placeholder="Username (required)" required className="w-full" />
+              <button type="submit" className="btn btn-danger w-full">Disconnect user</button>
+            </div>
           </form>
 
-          <form action={alertUser} className="card">
-            <h3 style={{ marginTop: 0 }}>Alert user</h3>
-            <p className="muted" style={{ margin: "0 0 0.75rem" }}>Send a popup alert to a user.</p>
-            <input name="userId" type="number" min={1} placeholder="User ID" required style={{ width: "100%", marginBottom: "0.5rem" }} />
-            <input name="message" type="text" placeholder="Alert message" required maxLength={512} style={{ width: "100%", marginBottom: "0.75rem" }} />
-            <button type="submit" className="btn btn-primary">Send alert</button>
+          <form action={alertUser} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Alert user</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-3">Send a popup alert to a user.</p>
+            <div className="space-y-2">
+              <input name="userId" type="number" min={1} placeholder="User ID" required className="w-full" />
+              <input name="message" type="text" placeholder="Alert message" required maxLength={512} className="w-full" />
+              <button type="submit" className="btn btn-primary w-full">Send alert</button>
+            </div>
           </form>
 
-          <form action={forwardUser} className="card">
-            <h3 style={{ marginTop: 0 }}>Forward to room</h3>
-            <p className="muted" style={{ margin: "0 0 0.75rem" }}>Teleport user to a room ID.</p>
-            <input name="userId" type="number" min={1} placeholder="User ID" required style={{ width: "100%", marginBottom: "0.5rem" }} />
-            <input name="roomId" type="number" min={1} placeholder="Room ID" required style={{ width: "100%", marginBottom: "0.75rem" }} />
-            <button type="submit" className="btn btn-primary">Forward user</button>
+          <form action={forwardUser} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Forward to room</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-3">Teleport user to a room ID.</p>
+            <div className="space-y-2">
+              <input name="userId" type="number" min={1} placeholder="User ID" required className="w-full" />
+              <input name="roomId" type="number" min={1} placeholder="Room ID" required className="w-full" />
+              <button type="submit" className="btn btn-primary w-full">Forward user</button>
+            </div>
           </form>
         </div>
 
-        <div className="grid cols-3" style={{ marginTop: "1rem" }}>
-          <form action={giveCredits} className="card">
-            <h3 style={{ marginTop: 0 }}>Give credits</h3>
-            <p className="muted" style={{ margin: "0 0 0.75rem" }}>Add credits to a user.</p>
-            <input name="userId" type="number" min={1} placeholder="User ID" required style={{ width: "100%", marginBottom: "0.5rem" }} />
-            <input name="credits" type="number" min={1} placeholder="Amount" required style={{ width: "100%", marginBottom: "0.75rem" }} />
-            <button type="submit" className="btn btn-primary">Give credits</button>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
+          <form action={giveCredits} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Give credits</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-3">Add credits to a user.</p>
+            <div className="space-y-2">
+              <input name="userId" type="number" min={1} placeholder="User ID" required className="w-full" />
+              <input name="credits" type="number" min={1} placeholder="Amount" required className="w-full" />
+              <button type="submit" className="btn btn-primary w-full">Give credits</button>
+            </div>
           </form>
 
-          <form action={giveDuckets} className="card">
-            <h3 style={{ marginTop: 0 }}>Give duckets</h3>
-            <p className="muted" style={{ margin: "0 0 0.75rem" }}>Add duckets to a user.</p>
-            <input name="userId" type="number" min={1} placeholder="User ID" required style={{ width: "100%", marginBottom: "0.5rem" }} />
-            <input name="amount" type="number" min={1} placeholder="Amount" required style={{ width: "100%", marginBottom: "0.75rem" }} />
-            <button type="submit" className="btn btn-primary">Give duckets</button>
+          <form action={giveDuckets} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Give duckets</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-3">Add duckets to a user.</p>
+            <div className="space-y-2">
+              <input name="userId" type="number" min={1} placeholder="User ID" required className="w-full" />
+              <input name="amount" type="number" min={1} placeholder="Amount" required className="w-full" />
+              <button type="submit" className="btn btn-primary w-full">Give duckets</button>
+            </div>
           </form>
 
-          <form action={giveDiamonds} className="card">
-            <h3 style={{ marginTop: 0 }}>Give diamonds</h3>
-            <p className="muted" style={{ margin: "0 0 0.75rem" }}>Add diamonds to a user.</p>
-            <input name="userId" type="number" min={1} placeholder="User ID" required style={{ width: "100%", marginBottom: "0.5rem" }} />
-            <input name="amount" type="number" min={1} placeholder="Amount" required style={{ width: "100%", marginBottom: "0.75rem" }} />
-            <button type="submit" className="btn btn-primary">Give diamonds</button>
+          <form action={giveDiamonds} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Give diamonds</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-3">Add diamonds to a user.</p>
+            <div className="space-y-2">
+              <input name="userId" type="number" min={1} placeholder="User ID" required className="w-full" />
+              <input name="amount" type="number" min={1} placeholder="Amount" required className="w-full" />
+              <button type="submit" className="btn btn-primary w-full">Give diamonds</button>
+            </div>
           </form>
         </div>
 
-        <div className="grid cols-3" style={{ marginTop: "1rem" }}>
-          <form action={giveBadge} className="card">
-            <h3 style={{ marginTop: 0 }}>Give badge</h3>
-            <p className="muted" style={{ margin: "0 0 0.75rem" }}>Give a badge code (e.g. HOF1).</p>
-            <input name="userId" type="number" min={1} placeholder="User ID" required style={{ width: "100%", marginBottom: "0.5rem" }} />
-            <input name="badge" type="text" placeholder="Badge code" required maxLength={32} style={{ width: "100%", marginBottom: "0.75rem" }} />
-            <button type="submit" className="btn btn-primary">Give badge</button>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
+          <form action={giveBadge} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Give badge</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-3">Give a badge code (e.g. HOF1).</p>
+            <div className="space-y-2">
+              <input name="userId" type="number" min={1} placeholder="User ID" required className="w-full" />
+              <input name="badge" type="text" placeholder="Badge code" required maxLength={32} className="w-full" />
+              <button type="submit" className="btn btn-primary w-full">Give badge</button>
+            </div>
           </form>
 
-          <form action={setMotto} className="card">
-            <h3 style={{ marginTop: 0 }}>Set motto</h3>
-            <p className="muted" style={{ margin: "0 0 0.75rem" }}>Change user's motto (max 127 chars).</p>
-            <input name="userId" type="number" min={1} placeholder="User ID" required style={{ width: "100%", marginBottom: "0.5rem" }} />
-            <input name="motto" type="text" placeholder="New motto" required maxLength={127} style={{ width: "100%", marginBottom: "0.75rem" }} />
-            <button type="submit" className="btn btn-primary">Set motto</button>
+          <form action={setMotto} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Set motto</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-3">Change user's motto (max 127 chars).</p>
+            <div className="space-y-2">
+              <input name="userId" type="number" min={1} placeholder="User ID" required className="w-full" />
+              <input name="motto" type="text" placeholder="New motto" required maxLength={127} className="w-full" />
+              <button type="submit" className="btn btn-primary w-full">Set motto</button>
+            </div>
           </form>
 
-          <form action={setRank} className="card">
-            <h3 style={{ marginTop: 0 }}>Set rank</h3>
-            <p className="muted" style={{ margin: "0 0 0.75rem" }}>Change user rank (0–10).</p>
-            <input name="userId" type="number" min={1} placeholder="User ID" required style={{ width: "100%", marginBottom: "0.5rem" }} />
-            <input name="rank" type="number" min={0} max={10} placeholder="Rank (0–10)" required style={{ width: "100%", marginBottom: "0.75rem" }} />
-            <button type="submit" className="btn btn-primary">Set rank</button>
+          <form action={setRank} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Set rank</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-3">Change user rank (0–10).</p>
+            <div className="space-y-2">
+              <input name="userId" type="number" min={1} placeholder="User ID" required className="w-full" />
+              <input name="rank" type="number" min={0} max={10} placeholder="Rank (0–10)" required className="w-full" />
+              <button type="submit" className="btn btn-primary w-full">Set rank</button>
+            </div>
           </form>
         </div>
 
-        <div className="grid cols-3" style={{ marginTop: "1rem" }}>
-          <form action={executeCommand} className="card">
-            <h3 style={{ marginTop: 0 }}>Execute command</h3>
-            <p className="muted" style={{ margin: "0 0 0.75rem" }}>Run a chat command as the user.</p>
-            <input name="userId" type="number" min={1} placeholder="User ID" required style={{ width: "100%", marginBottom: "0.5rem" }} />
-            <input name="command" type="text" placeholder="Command (e.g. :pickall)" required maxLength={100} style={{ width: "100%", marginBottom: "0.75rem" }} />
-            <button type="submit" className="btn btn-primary">Execute</button>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
+          <form action={executeCommand} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Execute command</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-3">Run a chat command as the user.</p>
+            <div className="space-y-2">
+              <input name="userId" type="number" min={1} placeholder="User ID" required className="w-full" />
+              <input name="command" type="text" placeholder="Command (e.g. :pickall)" required maxLength={100} className="w-full" />
+              <button type="submit" className="btn btn-primary w-full">Execute</button>
+            </div>
           </form>
 
-          <form action={sendGift} className="card">
-            <h3 style={{ marginTop: 0 }}>Send gift</h3>
-            <p className="muted" style={{ margin: "0 0 0.75rem" }}>Send a furniture item as gift.</p>
-            <input name="userId" type="number" min={1} placeholder="User ID" required style={{ width: "100%", marginBottom: "0.5rem" }} />
-            <input name="itemId" type="number" min={1} placeholder="Furni ID" required style={{ width: "100%", marginBottom: "0.5rem" }} />
-            <input name="message" type="text" placeholder="Gift message" maxLength={255} defaultValue="Here is a gift." style={{ width: "100%", marginBottom: "0.75rem" }} />
-            <button type="submit" className="btn btn-primary">Send gift</button>
+          <form action={sendGift} className="admin-card">
+            <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">Send gift</h3>
+            <p className="text-xs text-[var(--color-text-muted)] mb-3">Send a furniture item as gift.</p>
+            <div className="space-y-2">
+              <input name="userId" type="number" min={1} placeholder="User ID" required className="w-full" />
+              <input name="itemId" type="number" min={1} placeholder="Furni ID" required className="w-full" />
+              <input name="message" type="text" placeholder="Gift message" maxLength={255} defaultValue="Here is a gift." className="w-full" />
+              <button type="submit" className="btn btn-primary w-full">Send gift</button>
+            </div>
           </form>
         </div>
       </section>
 
       {/* ── Staff activity ─────────────────────────────────────── */}
       <section className="mt-6">
-        <h2>Recent staff activity</h2>
+        <h2 className="admin-section-title">Recent staff activity</h2>
         {activity.length === 0 ? (
-          <p className="muted">No staff activity logged yet.</p>
+          <div className="admin-empty">No staff activity logged yet.</div>
         ) : (
-          <table>
-            <thead>
-              <tr>
-                <th>When</th>
-                <th>Staff</th>
-                <th>Action</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              {activity.map((a) => (
-                <tr key={String(a.id)}>
-                  <td className="muted" style={{ whiteSpace: "nowrap" }}>
-                    {fromDate(a.createdAt)}
-                  </td>
-                  <td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
-                  <td>
-                    <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{a.action}</span>
-                  </td>
-                  <td>{a.description}</td>
+          <div className="admin-card overflow-x-auto">
+            <table>
+              <thead>
+                <tr>
+                  <th>When</th>
+                  <th>Staff</th>
+                  <th>Action</th>
+                  <th>Description</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {activity.map((a) => (
+                  <tr key={String(a.id)}>
+                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      {fromDate(a.createdAt)}
+                    </td>
+                    <td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
+                    <td>
+                      <span className="inline-block text-[0.6rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{a.action}</span>
+                    </td>
+                    <td className="text-sm text-gray-500 dark:text-gray-400">{a.description}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         )}
       </section>
 
       {/* ── Emulator errors ────────────────────────────────────── */}
       <section className="mt-6">
-        <h2>Recent emulator errors</h2>
+        <h2 className="admin-section-title">Recent emulator errors</h2>
         {errors.length === 0 ? (
-          <p className="muted">No emulator errors logged.</p>
+          <div className="admin-empty">No emulator errors logged.</div>
         ) : (
-          <div className="card" style={{ overflowX: "auto" }}>
+          <div className="admin-card overflow-x-auto">
             <table>
               <thead>
                 <tr>
@@ -398,24 +427,15 @@ export default async function CommandoCentrum() {
                   const trace = decodeStacktrace(e.stacktrace);
                   return (
                     <tr key={e.id}>
-                      <td className="muted" style={{ whiteSpace: "nowrap" }}>
+                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
                         {formatTimestamp(e.timestamp)}
                       </td>
                       <td>{e.type}</td>
-                      <td className="muted" style={{ whiteSpace: "nowrap" }}>
+                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
                         {e.version}
                       </td>
                       <td>
-                        <pre
-                          style={{
-                            margin: 0,
-                            maxHeight: 160,
-                            overflow: "auto",
-                            fontSize: "0.75rem",
-                            whiteSpace: "pre-wrap",
-                            wordBreak: "break-word",
-                          }}
-                        >
+                        <pre className="text-xs p-2 bg-gray-50 dark:bg-black/20 rounded overflow-auto max-h-[160px]">
                           {trace || "(empty)"}
                         </pre>
                       </td>
diff --git a/src/app/admin/email-templates/page.tsx b/src/app/admin/email-templates/page.tsx
index 85ae75a6..8146c29c 100644
--- a/src/app/admin/email-templates/page.tsx
+++ b/src/app/admin/email-templates/page.tsx
@@ -17,37 +17,36 @@ export default async function AdminEmailTemplates() {
 
   return (
     <main>
-      <h1>Email Templates</h1>
-      <p className="muted">
-        Transactional email bodies. Use <code>{"{{ placeholders }}"}</code> in the body and list
-        the available ones in the variables field (comma-separated).
-      </p>
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
+          <span className="text-lg">✉️</span>
+        </div>
+        <div>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Email Templates</h1>
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">
+            Transactional email bodies. Use <code>{"{{ placeholders }}"}</code> in the body and list
+            the available ones in the variables field (comma-separated).
+          </p>
+        </div>
+      </div>
 
       <form
         action={createEmailTemplate}
-        className="card"
-        style={{ marginBottom: "1.5rem" }}
+        className="admin-card mb-6"
       >
-        <h3 style={{ marginTop: 0 }}>New template</h3>
-        <div
-          style={{
-            display: "flex",
-            gap: "0.5rem",
-            flexWrap: "wrap",
-            marginBottom: "0.5rem",
-          }}
-        >
-          <input name="name" placeholder="name (unique)" required style={{ minWidth: 180 }} />
+        <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">New template</h3>
+        <div className="flex gap-2 flex-wrap items-center mb-3">
+          <input name="name" placeholder="name (unique)" required className="flex-1 min-w-[180px]" />
           <input
             name="subject"
             placeholder="subject"
             required
-            style={{ flex: 1, minWidth: 220 }}
+            className="flex-1 min-w-[220px]"
           />
-          <input name="variables" placeholder="variables (comma-separated)" style={{ minWidth: 200 }} />
-          <label style={{ display: "inline-flex", alignItems: "center", gap: "0.35rem" }}>
-            <input type="checkbox" name="isActive" defaultChecked style={{ width: "auto" }} />
-            <span className="muted">Active</span>
+          <input name="variables" placeholder="variables (comma-separated)" className="min-w-[200px]" />
+          <label className="flex items-center gap-2">
+            <input type="checkbox" name="isActive" defaultChecked className="w-auto" />
+            <span className="text-sm text-gray-500 dark:text-gray-400">Active</span>
           </label>
         </div>
         <textarea
@@ -55,7 +54,7 @@ export default async function AdminEmailTemplates() {
           placeholder="Email body (HTML or text)"
           required
           rows={5}
-          style={{ width: "100%", resize: "vertical", marginBottom: "0.5rem" }}
+          className="w-full resize-y mb-3"
         />
         <button type="submit" className="btn btn-primary">
           Create
@@ -66,42 +65,32 @@ export default async function AdminEmailTemplates() {
         {templates.map((t) => {
           const id = String(t.id);
           return (
-            <div key={id} className="card">
+            <div key={id} className="admin-card mb-4">
               <form action={updateEmailTemplate}>
                 <input type="hidden" name="id" value={id} />
-                <div
-                  style={{
-                    display: "flex",
-                    gap: "0.5rem",
-                    flexWrap: "wrap",
-                    alignItems: "center",
-                    marginBottom: "0.5rem",
-                  }}
-                >
-                  <strong style={{ minWidth: 160 }}>{t.name}</strong>
+                <div className="flex gap-2 flex-wrap items-center mb-2">
+                  <strong className="min-w-[160px]">{t.name}</strong>
                   <input
                     name="subject"
                     defaultValue={t.subject}
                     placeholder="subject"
                     required
-                    style={{ flex: 1, minWidth: 220 }}
+                    className="flex-1 min-w-[220px]"
                   />
                   <input
                     name="variables"
                     defaultValue={t.variables ?? ""}
                     placeholder="variables"
-                    style={{ minWidth: 180 }}
+                    className="min-w-[180px]"
                   />
-                  <label
-                    style={{ display: "inline-flex", alignItems: "center", gap: "0.35rem" }}
-                  >
+                  <label className="flex items-center gap-2">
                     <input
                       type="checkbox"
                       name="isActive"
                       defaultChecked={t.isActive}
-                      style={{ width: "auto" }}
+                      className="w-auto"
                     />
-                    <span className="muted">Active</span>
+                    <span className="text-sm text-gray-500 dark:text-gray-400">Active</span>
                   </label>
                 </div>
                 <textarea
@@ -109,20 +98,20 @@ export default async function AdminEmailTemplates() {
                   defaultValue={t.body}
                   required
                   rows={6}
-                  style={{ width: "100%", resize: "vertical", marginBottom: "0.5rem" }}
+                  className="w-full resize-y mb-2"
                 />
-                <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
+                <div className="flex gap-2 items-center">
                   <button type="submit" className="btn btn-primary">
                     Save
                   </button>
                   {t.updatedAt ? (
-                    <span className="muted">
+                    <span className="text-xs text-gray-500 dark:text-gray-400">
                       Updated {new Date(t.updatedAt).toISOString().slice(0, 16).replace("T", " ")}
                     </span>
                   ) : null}
                 </div>
               </form>
-              <form action={deleteEmailTemplate} style={{ marginTop: "0.5rem" }}>
+              <form action={deleteEmailTemplate} className="mt-4">
                 <input type="hidden" name="id" value={id} />
                 <button type="submit" className="btn btn-danger">
                   Delete
@@ -132,7 +121,7 @@ export default async function AdminEmailTemplates() {
           );
         })}
       </div>
-      {templates.length === 0 ? <p className="muted">No email templates yet.</p> : null}
+      {templates.length === 0 ? <div className="admin-empty">No email templates yet.</div> : null}
     </main>
   );
 }
diff --git a/src/app/admin/emulator/page.tsx b/src/app/admin/emulator/page.tsx
index ca7b79fe..26beeb49 100644
--- a/src/app/admin/emulator/page.tsx
+++ b/src/app/admin/emulator/page.tsx
@@ -35,7 +35,7 @@ export default async function AdminEmulator() {
   return (
     <main>
       <h1>Emulator Config</h1>
-      <p className="muted">
+      <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
         Live key/value config read by the Arcturus emulator from
         <code> emulator_settings</code> and <code> emulator_texts</code>. Changes take effect
         on the next emulator read (some keys require an emulator reload).
@@ -48,7 +48,7 @@ export default async function AdminEmulator() {
 
       <section className="mt-6">
         <h2 className="admin-section-title">Settings</h2>
-        <p className="muted" style={{ marginTop: "-0.4rem" }}>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
           {settings.length} keys.
         </p>
 
@@ -74,7 +74,7 @@ export default async function AdminEmulator() {
       <table>
         <thead>
           <tr>
-            <th style={{ width: 320 }}>Key</th>
+            <th className="w-[320px]">Key</th>
             <th>Value</th>
           </tr>
         </thead>
@@ -87,14 +87,14 @@ export default async function AdminEmulator() {
               <td>
                 <form
                   action={updateEmulatorSetting}
-                  style={{ display: "flex", gap: "0.5rem" }}
+                  className="flex gap-2"
                 >
                   <input type="hidden" name="key" value={s.key} />
                   <input
                     name="value"
                     defaultValue={s.value}
                     maxLength={512}
-                    style={{ flex: 1 }}
+                    className="flex-1"
                   />
                   <button type="submit" className="btn btn-outline">
                     Save
@@ -106,13 +106,13 @@ export default async function AdminEmulator() {
         </tbody>
       </table>
       {settings.length === 0 ? (
-        <p className="muted">No emulator settings found.</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400">No emulator settings found.</p>
       ) : null}
       </section>
 
       <section className="mt-6">
         <h2 className="admin-section-title">Texts</h2>
-        <p className="muted" style={{ marginTop: "-0.4rem" }}>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
           {textsCount} keys{textsTruncated ? ` (showing first ${texts.length})` : ""}.
         </p>
 
diff --git a/src/app/admin/radio/embed/embed-snippet.tsx b/src/app/admin/radio/embed/embed-snippet.tsx
index 3b864f56..ef93fcdb 100644
--- a/src/app/admin/radio/embed/embed-snippet.tsx
+++ b/src/app/admin/radio/embed/embed-snippet.tsx
@@ -38,14 +38,14 @@ export function EmbedSnippet({
 
   return (
     <section className="mt-6">
-      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-        <h2 style={{ flex: 1, margin: 0 }}>{title}</h2>
+      <div className="flex items-center justify-between gap-4 mb-1">
+        <h2 className="m-0 text-base font-bold text-[var(--color-text)]">{title}</h2>
         <button type="button" className="btn btn-primary" onClick={copy}>
           {copied ? 'Copied!' : 'Copy'}
         </button>
       </div>
       {description ? (
-        <p className="muted" style={{ marginTop: '0.4rem' }}>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
           {description}
         </p>
       ) : null}
@@ -56,13 +56,7 @@ export function EmbedSnippet({
         rows={Math.min(Math.max(lines + 1, 3), 14)}
         onFocus={(e) => e.currentTarget.select()}
         spellCheck={false}
-        style={{
-          width: '100%',
-          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
-          fontSize: '0.85rem',
-          whiteSpace: 'pre',
-          resize: 'vertical',
-        }}
+        className="w-full font-mono text-sm resize-vertical"
       />
     </section>
   );
diff --git a/src/app/admin/radio/page.tsx b/src/app/admin/radio/page.tsx
index da93e422..1c003d83 100644
--- a/src/app/admin/radio/page.tsx
+++ b/src/app/admin/radio/page.tsx
@@ -108,7 +108,7 @@ export default async function AdminRadioPage() {
 
   return (
     <main>
-      <nav className="muted" style={{ marginBottom: '0.5rem' }}>
+      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
         <Link href="/admin/radio">Radio</Link> ·{' '}
         <Link href="/admin/radio/settings">Settings</Link> ·{' '}
         <Link href="/admin/radio/banners">Banners</Link> ·{' '}
@@ -117,7 +117,7 @@ export default async function AdminRadioPage() {
       </nav>
 
       <h1>Radio Moderation</h1>
-      <p className="muted" style={{ marginTop: '-0.4rem' }}>
+      <p className="text-xs text-gray-500 dark:text-gray-400">
         Latest shouts, DJ applications and on-air schedules (25 most recent of each).
       </p>
 
@@ -141,7 +141,7 @@ export default async function AdminRadioPage() {
       <section className="mt-6">
         <h2>Recent Shouts ({shouts.length})</h2>
         {shouts.length === 0 ? (
-          <p className="muted">No shouts to moderate.</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">No shouts to moderate.</p>
         ) : (
           <table>
             <thead>
@@ -156,10 +156,10 @@ export default async function AdminRadioPage() {
             <tbody>
               {shouts.map((s) => (
                 <tr key={String(s.id)}>
-                  <td>{String(s.id)}</td>
+                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{String(s.id)}</td>
                   <td>{String(s.userId)}</td>
                   <td>{s.message}</td>
-                  <td className="muted">{formatDate(s.createdAt)}</td>
+                  <td className="text-sm text-gray-500 dark:text-gray-400">{formatDate(s.createdAt)}</td>
                   <td>
                     <form action={deleteShout}>
                       <input type="hidden" name="id" value={String(s.id)} />
@@ -178,7 +178,7 @@ export default async function AdminRadioPage() {
       <section className="mt-6">
         <h2>DJ Applications ({applications.length})</h2>
         {applications.length === 0 ? (
-          <p className="muted">No applications submitted.</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">No applications submitted.</p>
         ) : (
           <table>
             <thead>
@@ -207,7 +207,7 @@ export default async function AdminRadioPage() {
                       {a.status}
                     </span>
                   </td>
-                  <td className="muted">{formatDate(a.createdAt)}</td>
+                  <td className="text-sm text-gray-500 dark:text-gray-400">{formatDate(a.createdAt)}</td>
                 </tr>
               ))}
             </tbody>
@@ -218,7 +218,7 @@ export default async function AdminRadioPage() {
       <section className="mt-6">
         <h2>Schedules ({schedules.length})</h2>
         {schedules.length === 0 ? (
-          <p className="muted">No schedules configured.</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">No schedules configured.</p>
         ) : (
           <table>
             <thead>
diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
index 83d6f260..0b54a1dd 100644
--- a/src/app/admin/settings/page.tsx
+++ b/src/app/admin/settings/page.tsx
@@ -54,7 +54,7 @@ export default async function AdminSettings() {
         ) : (
           <div className="grid">
             {settings.map((s) => (
-              <div key={s.key} className="card">
+              <div key={s.key} className="admin-card">
                 <div style={{ display: "flex", gap: "0.75rem", alignItems: "baseline" }}>
                   <strong style={{ minWidth: 220 }}>{s.key}</strong>
                   <form
diff --git a/src/app/admin/shop/[id]/page.tsx b/src/app/admin/shop/[id]/page.tsx
index 8da69a7a..8b1bbaaa 100644
--- a/src/app/admin/shop/[id]/page.tsx
+++ b/src/app/admin/shop/[id]/page.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { deleteShopArticle, updateShopArticle } from "@/actions/admin-shop";
 import { prisma } from "@/lib/prisma";
+import { Package } from "lucide-react";
 
 export const dynamic = "force-dynamic";
 
@@ -21,32 +22,44 @@ export default async function EditShopArticle({
 
   return (
     <main>
-      <p className="muted">
-        <Link href="/admin/shop">← Shop</Link>
-      </p>
-      <h1>Edit shop package</h1>
-      <form action={updateShopArticle} className="card" style={{ display: "grid", gap: "0.6rem" }}>
-        <input type="hidden" name="id" value={String(pkg.id)} />
-        <input name="name" defaultValue={pkg.name} placeholder="Name" required maxLength={255} />
-        <input name="info" defaultValue={pkg.info} placeholder="Info / description" maxLength={255} />
-        <input name="icon" defaultValue={pkg.iconUrl} placeholder="Icon URL" maxLength={255} />
-        <input name="color" defaultValue={pkg.color} placeholder="Color (e.g. #ffcc00)" maxLength={255} />
-        <input name="costs" type="number" min={0} defaultValue={pkg.costs} placeholder="Costs (store price)" required />
-        <input name="credits" type="number" min={0} defaultValue={pkg.credits ?? undefined} placeholder="Credits given (optional)" />
-        <input name="duckets" type="number" min={0} defaultValue={pkg.duckets ?? undefined} placeholder="Duckets given (optional)" />
-        <input name="diamonds" type="number" min={0} defaultValue={pkg.diamonds ?? undefined} placeholder="Diamonds given (optional)" />
-        <input name="giveRank" type="number" min={0} defaultValue={pkg.giveRank ?? undefined} placeholder="Give rank (optional)" />
-        <input name="badges" defaultValue={pkg.badges ?? ""} placeholder="Badge codes (optional)" maxLength={255} />
-        <input name="position" type="number" min={0} defaultValue={pkg.position} placeholder="Position" />
-        <button type="submit" className="btn btn-primary">
-          Save
-        </button>
-      </form>
-      <form action={deleteShopArticle} style={{ marginTop: "1rem" }}>
-        <input type="hidden" name="id" value={String(pkg.id)} />
-        <button type="submit" className="btn btn-danger">
-          Delete package
-        </button>
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
+          <Package size={20} className="text-[var(--color-primary)]" />
+        </div>
+        <div>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Edit shop package</h1>
+          <Link href="/admin/shop" className="text-xs text-[var(--color-text-muted)] hover:text-[var(--color-primary)]">
+            ← Back to shop
+          </Link>
+        </div>
+      </div>
+
+      <form action={updateShopArticle} className="admin-card">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <input type="hidden" name="id" value={String(pkg.id)} />
+          <input name="name" defaultValue={pkg.name} placeholder="Name" required maxLength={255} className="w-full" />
+          <input name="info" defaultValue={pkg.info} placeholder="Info / description" maxLength={255} className="w-full" />
+          <input name="icon" defaultValue={pkg.iconUrl} placeholder="Icon URL" maxLength={255} className="w-full" />
+          <input name="color" defaultValue={pkg.color} placeholder="Color (e.g. #ffcc00)" maxLength={255} className="w-full" />
+          <input name="costs" type="number" min={0} defaultValue={pkg.costs} placeholder="Costs (store price)" required className="w-full" />
+          <input name="credits" type="number" min={0} defaultValue={pkg.credits ?? undefined} placeholder="Credits given (optional)" className="w-full" />
+          <input name="duckets" type="number" min={0} defaultValue={pkg.duckets ?? undefined} placeholder="Duckets given (optional)" className="w-full" />
+          <input name="diamonds" type="number" min={0} defaultValue={pkg.diamonds ?? undefined} placeholder="Diamonds given (optional)" className="w-full" />
+          <input name="giveRank" type="number" min={0} defaultValue={pkg.giveRank ?? undefined} placeholder="Give rank (optional)" className="w-full" />
+          <input name="badges" defaultValue={pkg.badges ?? ""} placeholder="Badge codes (optional)" maxLength={255} className="w-full" />
+          <input name="position" type="number" min={0} defaultValue={pkg.position} placeholder="Position" className="w-full" />
+        </div>
+        <div className="mt-6 flex gap-2">
+          <button type="submit" className="btn btn-primary">
+            Save
+          </button>
+          <form action={deleteShopArticle}>
+            <input type="hidden" name="id" value={String(pkg.id)} />
+            <button type="submit" className="btn btn-danger">
+              Delete package
+            </button>
+          </form>
+        </div>
       </form>
     </main>
   );
diff --git a/src/app/admin/shop/new/page.tsx b/src/app/admin/shop/new/page.tsx
index 2801c73a..11f081d0 100644
--- a/src/app/admin/shop/new/page.tsx
+++ b/src/app/admin/shop/new/page.tsx
@@ -1,28 +1,41 @@
 import Link from "next/link";
 import { createShopArticle } from "@/actions/admin-shop";
+import { Package } from "lucide-react";
 
 export default function NewShopArticle() {
   return (
     <main>
-      <p className="muted">
-        <Link href="/admin/shop">← Shop</Link>
-      </p>
-      <h1>New shop package</h1>
-      <form action={createShopArticle} className="card" style={{ display: "grid", gap: "0.6rem" }}>
-        <input name="name" placeholder="Name" required maxLength={255} />
-        <input name="info" placeholder="Info / description" maxLength={255} />
-        <input name="icon" placeholder="Icon" maxLength={255} />
-        <input name="color" placeholder="Color (e.g. #ffcc00)" maxLength={255} />
-        <input name="costs" type="number" min={0} placeholder="Costs (store price)" required />
-        <input name="credits" type="number" min={0} placeholder="Credits given (optional)" />
-        <input name="duckets" type="number" min={0} placeholder="Duckets given (optional)" />
-        <input name="diamonds" type="number" min={0} placeholder="Diamonds given (optional)" />
-        <input name="giveRank" type="number" min={0} placeholder="Give rank (optional)" />
-        <input name="badges" placeholder="Badge codes (optional)" maxLength={255} />
-        <input name="position" type="number" min={0} placeholder="Position" defaultValue={0} />
-        <button type="submit" className="btn btn-primary">
-          Create
-        </button>
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
+          <Package size={20} className="text-[var(--color-primary)]" />
+        </div>
+        <div>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">New shop package</h1>
+          <Link href="/admin/shop" className="text-xs text-[var(--color-text-muted)] hover:text-[var(--color-primary)]">
+            ← Back to shop
+          </Link>
+        </div>
+      </div>
+
+      <form action={createShopArticle} className="admin-card">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <input name="name" placeholder="Name" required maxLength={255} className="w-full" />
+          <input name="info" placeholder="Info / description" maxLength={255} className="w-full" />
+          <input name="icon" placeholder="Icon" maxLength={255} className="w-full" />
+          <input name="color" placeholder="Color (e.g. #ffcc00)" maxLength={255} className="w-full" />
+          <input name="costs" type="number" min={0} placeholder="Costs (store price)" required className="w-full" />
+          <input name="credits" type="number" min={0} placeholder="Credits given (optional)" className="w-full" />
+          <input name="duckets" type="number" min={0} placeholder="Duckets given (optional)" className="w-full" />
+          <input name="diamonds" type="number" min={0} placeholder="Diamonds given (optional)" className="w-full" />
+          <input name="giveRank" type="number" min={0} placeholder="Give rank (optional)" className="w-full" />
+          <input name="badges" placeholder="Badge codes (optional)" maxLength={255} className="w-full" />
+          <input name="position" type="number" min={0} placeholder="Position" defaultValue={0} className="w-full" />
+        </div>
+        <div className="mt-6 text-right">
+          <button type="submit" className="btn btn-primary">
+            Create
+          </button>
+        </div>
       </form>
     </main>
   );
diff --git a/src/app/admin/theme/page.tsx b/src/app/admin/theme/page.tsx
index b436f4c7..f93f1866 100644
--- a/src/app/admin/theme/page.tsx
+++ b/src/app/admin/theme/page.tsx
@@ -90,35 +90,41 @@ export default async function AdminTheme({
 
   return (
     <main>
-      <h1>Theme</h1>
-      <p className="muted" style={{ marginTop: "-0.4rem" }}>
-        Restyle the whole site. Values are written to <code>website_settings</code> and applied
-        live (no rebuild).
-      </p>
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
+          <span className="text-lg">🎨</span>
+        </div>
+        <div>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Theme</h1>
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">
+            Restyle the whole site. Values are written to <code>website_settings</code> and applied
+            live (no rebuild).
+          </p>
+        </div>
+      </div>
 
       {sp.saved ? (
-        <p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
+        <div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
           Theme saved
-        </p>
+        </div>
       ) : null}
       {sp.preset ? (
-        <p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
+        <div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
           Applied preset “{sp.preset}”
-        </p>
+        </div>
       ) : null}
 
       <section className="mt-6">
-        <h2>Presets</h2>
-        <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
+        <h2 className="admin-section-title">Presets</h2>
+        <div className="flex flex-wrap gap-2">
           {Object.entries(PRESETS).map(([name, palette]) => (
             <form key={name} action={applyPreset}>
               <input type="hidden" name="preset" value={name} />
               <button
                 type="submit"
-                className="btn btn-outline"
-                style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}
+                className="btn btn-outline inline-flex items-center gap-2"
               >
-                <span style={{ display: "inline-flex" }}>
+                <span className="flex items-center gap-1">
                   {["color_primary", "color_accent", "color_surface", "color_text"].map((k) => (
                     <span
                       key={k}
@@ -142,21 +148,25 @@ export default async function AdminTheme({
 
       <form action={saveTheme}>
         <section className="mt-6">
-          <h2>Colours</h2>
-          <div className="card">{colorGrid(COLOR_FIELDS, current)}</div>
+          <h2 className="admin-section-title">Colours</h2>
+          <div className="admin-card">
+            {colorGrid(COLOR_FIELDS, current)}
+          </div>
         </section>
 
         <section className="mt-6">
-          <h2>Buttons & links</h2>
-          <div className="card">{colorGrid(BUTTON_FIELDS, current)}</div>
+          <h2 className="admin-section-title">Buttons & links</h2>
+          <div className="admin-card">
+            {colorGrid(BUTTON_FIELDS, current)}
+          </div>
         </section>
 
         <section className="mt-6">
-          <h2>Typography & layout</h2>
-          <div className="card">
-            <div style={{ display: "flex", flexWrap: "wrap", gap: "1.25rem", alignItems: "center" }}>
-              <label style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-                <span style={{ fontSize: "0.88rem" }}>Font</span>
+          <h2 className="admin-section-title">Typography & layout</h2>
+          <div className="admin-card">
+            <div className="flex flex-wrap gap-5 items-center">
+              <label className="flex items-center gap-2">
+                <span className="text-sm">Font</span>
                 <select name="font_family" defaultValue={fontKey}>
                   {Object.entries(FONTS).map(([key, f]) => (
                     <option key={key} value={key}>
@@ -166,27 +176,27 @@ export default async function AdminTheme({
                 </select>
               </label>
               {HEADINGS.map((h) => (
-                <label key={h.key} style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
-                  <span style={{ fontSize: "0.88rem" }}>{h.label} (px)</span>
+                <label key={h.key} className="flex items-center gap-2">
+                  <span className="text-sm">{h.label} (px)</span>
                   <input
                     name={h.key}
                     type="number"
                     min={10}
                     max={80}
                     defaultValue={/^\d{1,3}$/.test(headings[h.key]) ? headings[h.key] : h.def}
-                    style={{ width: 80 }}
+                    className="w-20"
                   />
                 </label>
               ))}
-              <label style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
-                <span style={{ fontSize: "0.88rem" }}>Border radius (px)</span>
+              <label className="flex items-center gap-2">
+                <span className="text-sm">Border radius (px)</span>
                 <input
                   name="border_radius"
                   type="number"
                   min={0}
                   max={40}
                   defaultValue={/^\d{1,3}$/.test(radius) ? radius : "12"}
-                  style={{ width: 80 }}
+                  className="w-20"
                 />
               </label>
             </div>
@@ -194,8 +204,8 @@ export default async function AdminTheme({
         </section>
 
         <section className="mt-6">
-          <h2>Custom CSS</h2>
-          <p className="muted" style={{ marginTop: "-0.4rem" }}>
+          <h2 className="admin-section-title">Custom CSS</h2>
+          <p className="text-xs text-[var(--color-text-muted)] mb-2">
             Injected raw into every page (after the theme variables). Use it for tweaks the controls
             above don’t cover.
           </p>
@@ -205,9 +215,9 @@ export default async function AdminTheme({
             rows={8}
             spellCheck={false}
             placeholder={"/* e.g. */\n.nav-item { letter-spacing: 0.5px; }"}
-            style={{ width: "100%", fontFamily: "monospace", fontSize: "0.85rem" }}
+            className="w-full font-mono text-sm"
           />
-          <div style={{ marginTop: "1rem", textAlign: "right" }}>
+          <div className="mt-4 text-right">
             <button type="submit" className="btn btn-primary">
               Save theme
             </button>
diff --git a/src/app/admin/users/page.tsx b/src/app/admin/users/page.tsx
index 0d75ee2a..60ac175f 100644
--- a/src/app/admin/users/page.tsx
+++ b/src/app/admin/users/page.tsx
@@ -49,20 +49,20 @@ export default async function AdminUsers({
         />
       </div>
 
-      <form
-        className="card"
-        style={{ display: "flex", gap: "0.5rem", marginBottom: "1.5rem", flexWrap: "wrap" }}
-      >
-        <input
-          name="q"
-          defaultValue={q}
-          placeholder="Search username"
-          style={{ flex: 1, minWidth: 200 }}
-        />
-        <button type="submit" className="btn btn-primary">
-          Search
-        </button>
-      </form>
+       <form
+         className="admin-card mb-6"
+         style={{ display: "flex", gap: "0.5rem", marginBottom: "1.5rem", flexWrap: "wrap" }}
+       >
+         <input
+           name="q"
+           defaultValue={q}
+           placeholder="Search username"
+           style={{ flex: 1, minWidth: 200 }}
+         />
+         <button type="submit" className="btn btn-primary">
+           Search
+         </button>
+       </form>
 
       <section className="mt-6">
         <h2>Accounts ({total})</h2>
diff --git a/src/components/admin/media-grid.tsx b/src/components/admin/media-grid.tsx
index 36f6ae55..22ef4891 100644
--- a/src/components/admin/media-grid.tsx
+++ b/src/components/admin/media-grid.tsx
@@ -9,6 +9,7 @@ export function AdminMediaGrid() {
   const [files, setFiles] = useState<MediaFile[]>([]);
   const [loading, setLoading] = useState(true);
   const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState({ current: 0, total: 0 });
   const fileRef = useRef<HTMLInputElement>(null);
 
   const load = useCallback(async () => {
@@ -24,16 +25,27 @@ export function AdminMediaGrid() {
   useEffect(() => { load(); }, [load]);
 
   async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    if (!file) return;
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
     setUploading(true);
-    const fd = new FormData();
-    fd.set("file", file);
-    try {
-      await uploadMedia(fd);
-      await load();
-    } catch { /* ignore */ }
+    setProgress({ current: 0, total: files.length });
+    
+    const fileArray = Array.from(files);
+    
+    await Promise.all(fileArray.map(async (file) => {
+      const fd = new FormData();
+      fd.set("file", file);
+      try {
+        await uploadMedia(fd);
+      } catch (err) {
+        console.error(err);
+      }
+      setProgress(prev => ({ ...prev, current: prev.current + 1 }));
+    }));
+
+    await load();
     setUploading(false);
+    setProgress({ current: 0, total: 0 });
     if (fileRef.current) fileRef.current.value = "";
   }
 
@@ -42,30 +54,45 @@ export function AdminMediaGrid() {
   }
 
   return (
-    <div className="card" style={{ marginTop: "1rem" }}>
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.75rem" }}>
+    <div className="admin-card mb-4">
+      <div className="flex items-center justify-between mb-3">
         <strong>{files.length} image{files.length !== 1 ? "s" : ""}</strong>
-        <label className="btn btn-primary" style={{ cursor: "pointer", fontSize: "0.88rem" }}>
+        <label className="btn btn-primary cursor-pointer text-sm">
           {uploading ? "Uploading…" : "Upload image"}
-          <input ref={fileRef} type="file" accept="image/png,image/jpeg,image/gif,image/webp" onChange={handleUpload} style={{ display: "none" }} />
+          <input ref={fileRef} type="file" accept="image/png,image/jpeg,image/gif,image/webp" onChange={handleUpload} multiple className="hidden" />
         </label>
       </div>
 
+      {uploading && (
+        <div className="mb-4">
+          <div className="flex justify-between text-xs mb-1">
+            <span>Uploading images...</span>
+            <span>{progress.current} / {progress.total}</span>
+          </div>
+          <div className="h-2 w-full bg-[var(--color-primary)]/10 rounded-full overflow-hidden">
+            <div 
+              className="h-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-hover)] transition-all duration-300" 
+              style={{ width: `${(progress.current / progress.total) * 100}%` }}
+            />
+          </div>
+        </div>
+      )}
+
       {loading ? (
-        <p className="muted">Loading…</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400">Loading…</p>
       ) : files.length === 0 ? (
-        <p className="muted">No images yet. Upload one above.</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400">No images yet. Upload one above.</p>
       ) : (
-        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: "0.75rem" }}>
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-3">
           {files.map((f) => (
-            <div key={f.name} style={{ border: "1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent)", borderRadius: 10, overflow: "hidden", background: "var(--color-background)" }}>
+            <div key={f.name} className="border border-[var(--color-text-muted)]/14 rounded-[10px] overflow-hidden bg-[var(--color-background)]">
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={f.url} alt={f.name} style={{ width: "100%", height: 120, objectFit: "cover", display: "block" }} />
-              <div style={{ padding: "0.4rem" }}>
-                <p style={{ fontSize: "0.72rem", margin: "0 0 0.3rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--color-text-muted)" }}>
+              <img src={f.url} alt={f.name} className="w-full h-[120px] object-cover block" />
+              <div className="p-2">
+                <p className="text-xs text-[var(--color-text-muted)] m-0 mb-1 overflow-hidden text-ellipsis whitespace-nowrap">
                   {f.name}
                 </p>
-                <button type="button" onClick={() => copyUrl(f.url)} className="btn btn-outline" style={{ fontSize: "0.72rem", padding: "0.2rem 0.5rem", width: "100%" }}>
+                <button type="button" onClick={() => copyUrl(f.url)} className="btn btn-outline text-xs p-1 w-full">
                   Copy URL
                 </button>
               </div>
diff --git a/src/components/admin/media-picker.tsx b/src/components/admin/media-picker.tsx
index 1d2bc249..3d6de3c2 100644
--- a/src/components/admin/media-picker.tsx
+++ b/src/components/admin/media-picker.tsx
@@ -35,15 +35,19 @@ export function MediaPicker({
   }, [open, load]);
 
   async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    if (!file) return;
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
     setUploading(true);
-    const fd = new FormData();
-    fd.set("file", file);
-    const url = await uploadMediaAndReturn(fd);
-    if (url) {
+    const urls: string[] = [];
+    for (const file of Array.from(files)) {
+      const fd = new FormData();
+      fd.set("file", file);
+      const url = await uploadMediaAndReturn(fd);
+      if (url) urls.push(url);
+    }
+    if (urls.length > 0) {
       await load();
-      onSelect(url);
+      onSelect(urls[urls.length - 1]); // select the last one for backward compatibility
       setOpen(false);
     }
     setUploading(false);
@@ -63,75 +67,62 @@ export function MediaPicker({
         )}
       </div>
 
-      {open && (
+    {open && (
+      <div
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+        onClick={() => setOpen(false)}
+      >
         <div
-          style={{
-            position: "fixed", inset: 0, zIndex: 9999,
-            display: "flex", alignItems: "center", justifyContent: "center",
-            backgroundColor: "rgba(0,0,0,0.5)",
-          }}
-          onClick={() => setOpen(false)}
+          onClick={(e) => e.stopPropagation()}
+          className="bg-[var(--color-surface)] text-[var(--color-text)] rounded-2xl w-[min(90vw,680px)] max-h-[80vh] flex flex-col shadow-xl"
         >
-          <div
-            onClick={(e) => e.stopPropagation()}
-            style={{
-              background: "var(--color-surface)", color: "var(--color-text)",
-              borderRadius: 14, width: "min(90vw, 680px)", maxHeight: "80vh",
-              display: "flex", flexDirection: "column", boxShadow: "0 16px 48px rgba(0,0,0,0.25)",
-            }}
-          >
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.85rem 1rem", borderBottom: "1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent)" }}>
-              <strong style={{ fontSize: "1rem" }}>Media Library</strong>
-              <div style={{ display: "flex", gap: "0.4rem", alignItems: "center" }}>
-                <label className="btn btn-primary" style={{ fontSize: "0.82rem", padding: "0.3rem 0.7rem", cursor: "pointer" }}>
-                  {uploading ? "Uploading…" : "Upload"}
-                  <input ref={fileRef} type="file" accept="image/png,image/jpeg,image/gif,image/webp" onChange={handleUpload} style={{ display: "none" }} />
-                </label>
-                <button type="button" onClick={() => setOpen(false)} className="btn" style={{ fontSize: "0.82rem", padding: "0.3rem 0.7rem" }}>
-                  Close
-                </button>
-              </div>
-            </div>
-            <div style={{ flex: 1, overflow: "auto", padding: "0.75rem" }}>
-              {loading ? (
-                <p className="muted" style={{ textAlign: "center", padding: "2rem" }}>Loading…</p>
-              ) : files.length === 0 ? (
-                <p className="muted" style={{ textAlign: "center", padding: "2rem" }}>
-                  No images yet. Upload one above.
-                </p>
-              ) : (
-                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: "0.65rem" }}>
-                  {files.map((f) => (
-                    <button
-                      type="button"
-                      key={f.name}
-                      onClick={() => { onSelect(f.url); setOpen(false); }}
-                      style={{
-                        border: `2px solid ${f.url === current ? "var(--color-primary)" : "transparent"}`,
-                        borderRadius: 10, overflow: "hidden", cursor: "pointer",
-                        background: "var(--color-background)", padding: 0,
-                        display: "flex", flexDirection: "column",
-                        transition: "border-color 0.15s",
-                      }}
-                      onMouseEnter={(e) => { if (f.url !== current) e.currentTarget.style.borderColor = "color-mix(in srgb, var(--color-primary) 40%, transparent)"; }}
-                      onMouseLeave={(e) => { if (f.url !== current) e.currentTarget.style.borderColor = "transparent"; }}
-                    >
-                      {/* eslint-disable-next-line @next/next/no-img-element */}
-                      <img
-                        src={f.url}
-                        alt={f.name}
-                        style={{ width: "100%", height: 100, objectFit: "cover", display: "block" }}
-                      />
-                      <span style={{ fontSize: "0.72rem", padding: "0.3rem 0.4rem", textAlign: "center", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                        {f.name}
-                      </span>
-                    </button>
-                  ))}
-                </div>
-              )}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--color-text-muted)]/14">
+            <strong className="text-base">Media Library</strong>
+            <div className="flex gap-2 items-center">
+              <label className="btn btn-primary text-sm cursor-pointer">
+                {uploading ? "Uploading…" : "Upload"}
+                <input ref={fileRef} type="file" accept="image/png,image/jpeg,image/gif,image/webp" onChange={handleUpload} className="hidden" multiple />
+              </label>
+              <button type="button" onClick={() => setOpen(false)} className="btn text-sm">
+                Close
+              </button>
             </div>
           </div>
+          <div className="flex-1 overflow-auto p-3">
+            {loading ? (
+              <p className="text-xs text-[var(--color-text-muted)] text-center py-8">Loading…</p>
+            ) : files.length === 0 ? (
+              <p className="text-xs text-[var(--color-text-muted)] text-center py-8">
+                No images yet. Upload one above.
+              </p>
+            ) : (
+              <div className="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2.5">
+                {files.map((f) => (
+                  <button
+                    type="button"
+                    key={f.name}
+                    onClick={() => { onSelect(f.url); setOpen(false); }}
+                    className="border-2 border-transparent rounded-xl overflow-hidden cursor-pointer bg-[var(--color-background)] p-0 flex flex-col transition-all duration-150"
+                    style={{ borderColor: f.url === current ? "var(--color-primary)" : "transparent" }}
+                    onMouseEnter={(e) => { if (f.url !== current) e.currentTarget.style.borderColor = "color-mix(in srgb, var(--color-primary) 40%, transparent)"; }}
+                    onMouseLeave={(e) => { if (f.url !== current) e.currentTarget.style.borderColor = "transparent"; }}
+                  >
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={f.url}
+                      alt={f.name}
+                      className="w-full h-[100px] object-cover block"
+                    />
+                    <span className="text-xs py-1 text-center overflow-hidden text-ellipsis whitespace-nowrap">
+                      {f.name}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
         </div>
+      </div>
       )}
     </>
   );