diff --git a/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx b/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx
index 3b21615..6745ea0 100644
--- a/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx
+++ b/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx
@@ -440,15 +440,15 @@ export function BlueprintFieldCatalog({
             {/* Search + category sidebar layout */}
             <div className="flex flex-1 overflow-hidden">
               {/* Category sidebar */}
-              <div className="w-48 shrink-0 border-r border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-slate-800/80 overflow-y-auto hidden md:block">
+              <div className="w-48 shrink-0 border-r border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-900 overflow-y-auto hidden md:block">
                 <nav className="py-2">
                   <button
                     type="button"
                     onClick={() => setActiveCategory(null)}
                     className={`w-full text-left px-4 py-2 text-sm transition-colors ${
                       activeCategory === null
-                        ? "bg-brand-100 dark:bg-brand-900/60 text-brand-700 dark:text-brand-200 font-medium"
-                        : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700/60"
+                        ? "bg-brand-100 dark:bg-gray-800 text-brand-700 dark:text-brand-400 font-medium border-l-2 border-brand-500"
+                        : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800/50 border-l-2 border-transparent"
                     }`}
                   >
                     All Fields
@@ -472,8 +472,8 @@ export function BlueprintFieldCatalog({
                         onClick={() => setActiveCategory(name)}
                         className={`w-full text-left px-4 py-2 text-sm transition-colors ${
                           activeCategory === name
-                            ? "bg-brand-50 text-brand-700 font-medium"
-                            : "text-gray-600 hover:bg-gray-100"
+                            ? "bg-brand-100 dark:bg-gray-800 text-brand-700 dark:text-brand-400 font-medium border-l-2 border-brand-500"
+                            : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800/50 border-l-2 border-transparent"
                         }`}
                       >
                         <span className="truncate block">{name}</span>
diff --git a/apps/web/src/components/blueprints/BlueprintsClient.tsx b/apps/web/src/components/blueprints/BlueprintsClient.tsx
index f5f8c5d..073608a 100644
--- a/apps/web/src/components/blueprints/BlueprintsClient.tsx
+++ b/apps/web/src/components/blueprints/BlueprintsClient.tsx
@@ -369,7 +369,7 @@ export function BlueprintsClient() {
                   const isProject = bp.target === "PROJECT";
 
                   return (
-                    <tr key={bp.id} className="border-b border-gray-100 last:border-b-0 hover:bg-gray-50 transition-colors">
+                    <tr key={bp.id} className="border-b border-gray-100 dark:border-gray-700/50 last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                       <td className="px-3 py-3">
                         <input
                           type="checkbox"
@@ -380,20 +380,20 @@ export function BlueprintsClient() {
                       </td>
                       <td className="px-3 py-3">
                         <div className="min-w-0">
-                          <div className="font-medium text-gray-900">{bp.name}</div>
+                          <div className="font-medium text-gray-900 dark:text-gray-100">{bp.name}</div>
                           {bp.description && <div className="text-xs text-gray-500 mt-0.5 truncate">{bp.description}</div>}
                         </div>
                       </td>
                       <td className="px-3 py-3">
-                        <span className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${isProject ? "bg-purple-50 text-purple-700" : "bg-blue-50 text-blue-700"}`}>
+                        <span className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${isProject ? "bg-purple-50 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300" : "bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"}`}>
                           {bp.target}
                         </span>
                       </td>
-                      <td className="px-3 py-3 text-center text-gray-600">{fieldCount}</td>
-                      <td className="px-3 py-3 text-center text-gray-600">{isProject ? presetCount : "—"}</td>
+                      <td className="px-3 py-3 text-center text-gray-600 dark:text-gray-400">{fieldCount}</td>
+                      <td className="px-3 py-3 text-center text-gray-600 dark:text-gray-400">{isProject ? presetCount : "—"}</td>
                       <td className="px-3 py-3 text-center">
                         {bp.isGlobal ? (
-                          <span className="inline-block px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700 font-medium">
+                          <span className="inline-block px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300 font-medium">
                             Global
                           </span>
                         ) : (