diff --git a/src/components/sections/skills.tsx b/src/components/sections/skills.tsx
index 206d5105..b05c5b4b 100644
--- a/src/components/sections/skills.tsx
+++ b/src/components/sections/skills.tsx
@@ -15,6 +15,7 @@ export const SkillsSection = () => {
   const { selected } = useFilter();
 
   const areas = selected["areas"];
+  const skills = selected["skills"];
 
   // ⚡ Optimization: Memoize areaMatchingSkills separately from the query filter.
   // This avoids re-calculating the matching skills set when only the search query changes.
@@ -30,6 +31,8 @@ export const SkillsSection = () => {
     return matchingSkills;
   }, [areas]);
 
+  const selectedSkills = useMemo(() => new Set(skills || []), [skills]);
+
   // ⚡ Optimization: filteredSkills now only depends on debouncedQuery and the memoized areaMatchingSkills.
   const filteredSkills = useMemo(() => {
     const lowercaseQuery = debouncedQuery.toLowerCase();
@@ -38,9 +41,10 @@ export const SkillsSection = () => {
       const matchesQuery =
         !lowercaseQuery || skill.name.toLowerCase().includes(lowercaseQuery);
       const matchesArea = areaMatchingSkills.has(key);
-      return matchesQuery && matchesArea;
+      const matchesSkill = selectedSkills.size === 0 || selectedSkills.has(key);
+      return matchesQuery && matchesArea && matchesSkill;
     });
-  }, [debouncedQuery, areaMatchingSkills]);
+  }, [debouncedQuery, areaMatchingSkills, selectedSkills]);
 
   return (
     <Section id="skills" title="Technical Skills">
diff --git a/src/components/unified-filter-bar.tsx b/src/components/unified-filter-bar.tsx
index de41b28a..f074d325 100644
--- a/src/components/unified-filter-bar.tsx
+++ b/src/components/unified-filter-bar.tsx
@@ -37,8 +37,8 @@ export const UnifiedFilterBar = () => {
           <Filter className="rounded-l-none rounded-r-2xl border-l-0 bg-white dark:bg-slate-800 h-[38px] min-w-[48px] hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border-zinc-200 dark:border-zinc-700">
             <Selections
               label="Areas"
-              values={Object.values(areas).map((a) => ({
-                id: a.name.toLowerCase(),
+              values={Object.entries(areas).map(([id, a]) => ({
+                id,
                 name: a.name,
                 icon: a.icon,
               }))}
@@ -47,8 +47,8 @@ export const UnifiedFilterBar = () => {
             />
             <Selections
               label="Skills"
-              values={Object.values(skills).map((s) => ({
-                id: s.name.toLowerCase(),
+              values={Object.entries(skills).map(([id, s]) => ({
+                id,
                 name: s.name,
                 icon: s.icon,
               }))}
@@ -57,8 +57,8 @@ export const UnifiedFilterBar = () => {
             />
             <Selections
               label="Roles"
-              values={Object.values(roles).map((r) => ({
-                id: r.name.toLowerCase(),
+              values={Object.entries(roles).map(([id, r]) => ({
+                id,
                 name: r.name,
               }))}
               selected={selected["roles"] || []}