diff --git a/src/components/section-item-card.tsx b/src/components/section-item-card.tsx
index 1130c7a..59bddf5 100644
--- a/src/components/section-item-card.tsx
+++ b/src/components/section-item-card.tsx
@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 
-import React from "react";
+import React, { memo } from "react";
 
 interface SectionItemCardProps {
   href: string;
@@ -15,28 +15,26 @@ interface SectionItemCardProps {
   footer: string;
 }
 
-export const SectionItemCard = ({
-  href,
-  image,
-  title,
-  subtitle,
-  footer,
-}: SectionItemCardProps) => {
-  return (
-    <div className="transition-all duration-700">
-      <a
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-xl"
-      >
-        <div className="section-item p-3">
-          <Image src={image.src} alt={image.alt} width={150} height={150} />
-          <p className="text-xl md:text-2xl text-foreground">{title}</p>
-          <p className="dark:text-primary-dark text-primary">{subtitle}</p>
-          <p className="text-secondary">{footer}</p>
-        </div>
-      </a>
-    </div>
-  );
-};
+export const SectionItemCard = memo(
+  ({ href, image, title, subtitle, footer }: SectionItemCardProps) => {
+    return (
+      <div className="transition-all duration-700">
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-xl"
+        >
+          <div className="section-item p-3">
+            <Image src={image.src} alt={image.alt} width={150} height={150} />
+            <p className="text-xl md:text-2xl text-foreground">{title}</p>
+            <p className="dark:text-primary-dark text-primary">{subtitle}</p>
+            <p className="text-secondary">{footer}</p>
+          </div>
+        </a>
+      </div>
+    );
+  },
+);
+
+SectionItemCard.displayName = "SectionItemCard";
diff --git a/src/components/unified-filter-bar.tsx b/src/components/unified-filter-bar.tsx
index acf8c24..68247ef 100644
--- a/src/components/unified-filter-bar.tsx
+++ b/src/components/unified-filter-bar.tsx
@@ -3,6 +3,7 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Button } from "@heroui/react";
 import { motion } from "framer-motion";
+import React, { memo } from "react";
 
 import { useFilter } from "@/contexts/filter";
 import { useSearch } from "@/contexts/search";
@@ -13,6 +14,56 @@ import skills from "@/data/skills";
 import { Filter, Selections } from "./filter";
 import { Searchbar } from "./search";
 
+const AREA_OPTIONS = Object.entries(areas).map(([id, a]) => ({
+  id,
+  name: a.name,
+  icon: a.icon,
+}));
+
+const SKILL_OPTIONS = Object.entries(skills).map(([id, s]) => ({
+  id,
+  name: s.name,
+  icon: s.icon,
+}));
+
+const ROLE_OPTIONS = Object.entries(roles).map(([id, r]) => ({
+  id,
+  name: r.name,
+}));
+
+const FilterDropdown = memo(
+  ({
+    selected,
+    setSelected,
+  }: {
+    selected: Record<string, string[]>;
+    setSelected: (category: string, selected: string[]) => void;
+  }) => (
+    <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={AREA_OPTIONS}
+        selected={selected["areas"] || []}
+        setSelected={(vals) => setSelected("areas", vals)}
+      />
+      <Selections
+        label="Skills"
+        values={SKILL_OPTIONS}
+        selected={selected["skills"] || []}
+        setSelected={(vals) => setSelected("skills", vals)}
+      />
+      <Selections
+        label="Roles"
+        values={ROLE_OPTIONS}
+        selected={selected["roles"] || []}
+        setSelected={(vals) => setSelected("roles", vals)}
+      />
+    </Filter>
+  ),
+);
+
+FilterDropdown.displayName = "FilterDropdown";
+
 export const UnifiedFilterBar = () => {
   const { query, setQuery } = useSearch();
   const { selected, setSelected, clearAll } = useFilter();
@@ -42,37 +93,7 @@ export const UnifiedFilterBar = () => {
             className="rounded-l-2xl rounded-r-none border-r-0"
             autoFocus={false}
           />
-          <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.entries(areas).map(([id, a]) => ({
-                id,
-                name: a.name,
-                icon: a.icon,
-              }))}
-              selected={selected["areas"] || []}
-              setSelected={(vals) => setSelected("areas", vals)}
-            />
-            <Selections
-              label="Skills"
-              values={Object.entries(skills).map(([id, s]) => ({
-                id,
-                name: s.name,
-                icon: s.icon,
-              }))}
-              selected={selected["skills"] || []}
-              setSelected={(vals) => setSelected("skills", vals)}
-            />
-            <Selections
-              label="Roles"
-              values={Object.entries(roles).map(([id, r]) => ({
-                id,
-                name: r.name,
-              }))}
-              selected={selected["roles"] || []}
-              setSelected={(vals) => setSelected("roles", vals)}
-            />
-          </Filter>
+          <FilterDropdown selected={selected} setSelected={setSelected} />
         </div>
 
         {hasFilters && (