diff --git a/apps/web/src/components/skills/SkillsPage.tsx b/apps/web/src/components/skills/SkillsPage.tsx
index a7f3f2a2d..88ec65f9c 100644
--- a/apps/web/src/components/skills/SkillsPage.tsx
+++ b/apps/web/src/components/skills/SkillsPage.tsx
@@ -138,30 +138,53 @@ function SkillDetailDialog(props: {
   const mutable = isCatalog ? !skill.immutable && skill.installed : skill.mutable;
   const pathValue = skill.path;
   const slashName = isCatalog ? skill.name.toLowerCase().replace(/\s+/g, "-") : skill.name;
+  const tags = "tags" in skill ? skill.tags : [];
+  const Icon = skillIcon("icon" in skill ? skill.icon : "file");
   return (
     <Dialog open={props.open} onOpenChange={props.onOpenChange}>
       <DialogPopup>
         <DialogHeader>
-          <DialogTitle>{skill.name}</DialogTitle>
-          <DialogDescription>{skill.description}</DialogDescription>
-        </DialogHeader>
-        <DialogPanel className="space-y-4">
-          <div className="flex flex-wrap gap-2">
-            {("tags" in skill ? skill.tags : []).map((tag) => (
-              <Badge key={tag} variant="secondary">
-                {tag}
-              </Badge>
-            ))}
+          <div className="flex items-center gap-3">
+            <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-accent/70 text-foreground">
+              <Icon className="size-5" />
+            </div>
+            <div className="min-w-0">
+              <DialogTitle>{skill.name}</DialogTitle>
+              <DialogDescription className="mt-1">{skill.description}</DialogDescription>
+            </div>
           </div>
+          {tags.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 pt-1">
+              {tags.map((tag) => (
+                <Badge key={tag} variant="secondary" className="text-xs">
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </DialogHeader>
+        <DialogPanel className="space-y-3">
           <div className="rounded-xl border bg-muted/35 p-3 text-sm">
-            <p className="font-medium text-foreground">Slash commands</p>
-            <p className="mt-2 font-mono text-xs text-muted-foreground">/{slashName}</p>
-            <p className="mt-1 font-mono text-xs text-muted-foreground">/skill read {slashName}</p>
+            <p className="font-medium text-foreground text-xs uppercase tracking-wider text-muted-foreground">
+              Slash commands
+            </p>
+            <div className="mt-2 space-y-1">
+              <p className="rounded-md bg-muted/50 px-2 py-1 font-mono text-xs text-foreground">
+                /{slashName}
+              </p>
+              <p className="rounded-md bg-muted/50 px-2 py-1 font-mono text-xs text-foreground">
+                /skill read {slashName}
+              </p>
+            </div>
           </div>
           {pathValue ? (
             <div className="rounded-xl border bg-muted/35 p-3 text-sm">
-              <p className="font-medium text-foreground">Path</p>
-              <p className="mt-1 break-all font-mono text-xs text-muted-foreground">{pathValue}</p>
+              <p className="font-medium text-xs uppercase tracking-wider text-muted-foreground">
+                Installed path
+              </p>
+              <p className="mt-2 break-all rounded-md bg-muted/50 px-2 py-1 font-mono text-xs text-foreground">
+                {pathValue}
+              </p>
             </div>
           ) : null}
         </DialogPanel>
@@ -422,7 +445,7 @@ export function SkillsPage(props: {
             <SkillLibraryTabs current="skills" />
           </div>
         </div>
-        <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-8 px-4 py-8 sm:px-6">
+        <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-8 overflow-y-auto px-4 py-8 sm:px-6">
           <div className="space-y-6">
             <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
               <div className="space-y-2">
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 774047fee..73ae52e11 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -90,7 +90,13 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function DialogPanel({ className, ...props }: React.ComponentProps<"div">) {
-  return <div className={cn("px-6 pb-6", className)} data-slot="dialog-panel" {...props} />;
+  return (
+    <div
+      className={cn("min-h-0 overflow-y-auto px-6 pb-6", className)}
+      data-slot="dialog-panel"
+      {...props}
+    />
+  );
 }
 
 function DialogFooter({
diff --git a/apps/web/src/hooks/useTheme.ts b/apps/web/src/hooks/useTheme.ts
index 327dabcfa..053eecd63 100644
--- a/apps/web/src/hooks/useTheme.ts
+++ b/apps/web/src/hooks/useTheme.ts
@@ -6,7 +6,6 @@ type ColorTheme =
   | "default"
   | "iridescent-void"
   | "solar-witch"
-  | "midnight-clarity"
   | "carbon"
   | "vapor"
   | "cathedral-circuit"
@@ -25,7 +24,6 @@ export const COLOR_THEMES: { id: ColorTheme; label: string }[] = [
   { id: "default", label: "Default" },
   { id: "iridescent-void", label: "Iridescent Void" },
   { id: "solar-witch", label: "Solar Witch" },
-  { id: "midnight-clarity", label: "Midnight Clarity" },
   { id: "carbon", label: "Carbon" },
   { id: "vapor", label: "Vapor" },
   { id: "cathedral-circuit", label: "Cathedral Circuit" },
@@ -66,7 +64,6 @@ function getStoredColorTheme(): ColorTheme {
     raw === "default" ||
     raw === "iridescent-void" ||
     raw === "solar-witch" ||
-    raw === "midnight-clarity" ||
     raw === "carbon" ||
     raw === "vapor" ||
     raw === "cathedral-circuit" ||
diff --git a/apps/web/src/themes.css b/apps/web/src/themes.css
index eff0af130..9ee918e37 100644
--- a/apps/web/src/themes.css
+++ b/apps/web/src/themes.css
@@ -123,66 +123,6 @@
   --warning-foreground: #f1a10d;
 }
 
-/* ─── Midnight Clarity ─── clean, intelligent, trustworthy (OpenAI-inspired) ─── */
-
-:root.theme-midnight-clarity {
-  color-scheme: light;
-  --background: #ffffff;
-  --foreground: #0d0d0d;
-  --card: #f7f7f8;
-  --card-foreground: #0d0d0d;
-  --popover: #f7f7f8;
-  --popover-foreground: #0d0d0d;
-  --primary: oklch(0.59 0.14 168);
-  --primary-foreground: #ffffff;
-  --secondary: rgba(0, 0, 0, 0.04);
-  --secondary-foreground: #0d0d0d;
-  --muted: rgba(0, 0, 0, 0.04);
-  --muted-foreground: #6e6e80;
-  --accent: rgba(0, 0, 0, 0.05);
-  --accent-foreground: #0d0d0d;
-  --destructive: #ef4444;
-  --destructive-foreground: #dc2626;
-  --border: rgba(0, 0, 0, 0.08);
-  --input: rgba(0, 0, 0, 0.1);
-  --ring: oklch(0.59 0.14 168);
-  --info: #0ea5e9;
-  --info-foreground: #0284c7;
-  --success: #10a37f;
-  --success-foreground: #0d8a6a;
-  --warning: #f59e0b;
-  --warning-foreground: #b45309;
-}
-
-:root.theme-midnight-clarity.dark {
-  color-scheme: dark;
-  --background: #212121;
-  --foreground: #ececec;
-  --card: #2f2f2f;
-  --card-foreground: #ececec;
-  --popover: #2f2f2f;
-  --popover-foreground: #ececec;
-  --primary: oklch(0.72 0.14 168);
-  --primary-foreground: #0d0d0d;
-  --secondary: rgba(255, 255, 255, 0.05);
-  --secondary-foreground: #ececec;
-  --muted: rgba(255, 255, 255, 0.05);
-  --muted-foreground: #9a9a9a;
-  --accent: rgba(255, 255, 255, 0.06);
-  --accent-foreground: #ececec;
-  --destructive: #f87171;
-  --destructive-foreground: #fca5a5;
-  --border: rgba(255, 255, 255, 0.08);
-  --input: rgba(255, 255, 255, 0.1);
-  --ring: oklch(0.72 0.14 168);
-  --info: #38bdf8;
-  --info-foreground: #7dd3fc;
-  --success: #34d399;
-  --success-foreground: #6ee7b7;
-  --warning: #fbbf24;
-  --warning-foreground: #fcd34d;
-}
-
 /* ─── Carbon ─── stark, modern, performance-focused (Vercel-inspired) ─── */
 
 :root.theme-carbon {