diff --git a/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx b/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx
index 0cc3fda..3b21615 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-gray-800/50 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-slate-800/80 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-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
-                        : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+                        ? "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"
                     }`}
                   >
                     All Fields
@@ -618,7 +618,7 @@ export function BlueprintFieldCatalog({
 
                           {/* Add custom field */}
                           {showCustomForm ? (
-                            <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 space-y-3 bg-gray-50/50 dark:bg-gray-800/50">
+                            <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 space-y-3 bg-gray-50/50 dark:bg-gray-800">
                               <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                 <div className="flex flex-col gap-1">
                                   <label className="text-xs font-medium text-gray-600">
diff --git a/apps/web/src/components/blueprints/FieldCard.tsx b/apps/web/src/components/blueprints/FieldCard.tsx
index 524ba16..220a390 100644
--- a/apps/web/src/components/blueprints/FieldCard.tsx
+++ b/apps/web/src/components/blueprints/FieldCard.tsx
@@ -83,8 +83,8 @@ export function FieldCard({ field, overrides, onChange }: FieldCardProps) {
     <div
       className={`border rounded-lg transition-all ${
         isActive
-          ? "border-brand-300 bg-brand-50/40 shadow-sm dark:border-brand-700 dark:bg-brand-950/30"
-          : "border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800/50"
+          ? "border-brand-400/60 bg-brand-50/40 shadow-sm dark:border-brand-600/50 dark:bg-brand-950/60"
+          : "border-gray-200 bg-white dark:border-gray-700/50 dark:bg-gray-800"
       }`}
     >
       {/* Header row */}