diff --git a/apps/web/src/domains/intelligence/components/skills/skill-detail.tsx b/apps/web/src/domains/intelligence/components/skills/skill-detail.tsx
index 555b3cdb87a..380b9e8de82 100644
--- a/apps/web/src/domains/intelligence/components/skills/skill-detail.tsx
+++ b/apps/web/src/domains/intelligence/components/skills/skill-detail.tsx
@@ -181,7 +181,7 @@ export function SkillDetail({
                   key={entry.path}
                   type="button"
                   onClick={() => setSelectedPath(entry.path)}
-                  className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-body-medium-lighter transition-colors hover:bg-[var(--ghost-hover)]"
+                  className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-body-medium-lighter transition-colors hover:bg-[var(--surface-hover)]"
                   style={{
                     color: isActive
                       ? "var(--primary-base)"
diff --git a/apps/web/src/domains/intelligence/components/skills/skill-row.tsx b/apps/web/src/domains/intelligence/components/skills/skill-row.tsx
index 9045aef856f..32edfe491d2 100644
--- a/apps/web/src/domains/intelligence/components/skills/skill-row.tsx
+++ b/apps/web/src/domains/intelligence/components/skills/skill-row.tsx
@@ -43,7 +43,7 @@ export function SkillRow({
         tabIndex={0}
         onClick={onSelect}
         onKeyDown={handleRowKeyDown}
-        className="flex cursor-pointer items-center gap-4 px-5 py-4 text-left transition-colors hover:bg-[var(--ghost-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
+        className="flex cursor-pointer items-center gap-4 px-5 py-4 text-left transition-colors hover:bg-[var(--surface-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
       >
       <div className="flex h-10 w-10 shrink-0 items-center justify-center text-2xl">
         {skill.emoji ?? "🧩"}
diff --git a/apps/web/src/domains/intelligence/components/skills/skills-tab.tsx b/apps/web/src/domains/intelligence/components/skills/skills-tab.tsx
index 6c1201c9999..3d5f7262971 100644
--- a/apps/web/src/domains/intelligence/components/skills/skills-tab.tsx
+++ b/apps/web/src/domains/intelligence/components/skills/skills-tab.tsx
@@ -460,7 +460,7 @@ function FilterDropdown({
           type="button"
           aria-haspopup="listbox"
           aria-expanded={open}
-          className="inline-flex w-40 items-center justify-between gap-2 rounded-lg border bg-[var(--surface-active)] px-3 py-2 text-body-medium-lighter transition-colors hover:bg-[var(--ghost-hover)]"
+          className="inline-flex w-40 items-center justify-between gap-2 rounded-lg border bg-[var(--surface-active)] px-3 py-2 text-body-medium-lighter transition-colors hover:bg-[var(--surface-hover)]"
           style={{
             borderColor: "var(--border-base)",
             color: "var(--content-default)",
@@ -541,7 +541,7 @@ function FilterGroup({
                 onClick={() => onSelect(option.value)}
                 role="option"
                 aria-selected={isSelected}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-body-medium-lighter transition-colors hover:bg-[var(--ghost-hover)]"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-body-medium-lighter transition-colors hover:bg-[var(--surface-hover)]"
                 style={{
                   color: isSelected
                     ? "var(--primary-base)"