diff --git a/docs/src/components/AttributeCard.astro b/docs/src/components/AttributeCard.astro
index 5dea76c2..7ad9c783 100644
--- a/docs/src/components/AttributeCard.astro
+++ b/docs/src/components/AttributeCard.astro
@@ -10,9 +10,10 @@ interface Props {
   attribute: Attribute;
   id: string;
   showCategory?: boolean;
+  defaultHidden?: boolean;
 }
 
-const { attribute, id, showCategory = false } = Astro.props;
+const { attribute, id, showCategory = false, defaultHidden = false } = Astro.props;
 
 const { category } = parseAttributeId(id);
 const isDeprecated = !!attribute.deprecation;
@@ -23,9 +24,16 @@ const rawJson = JSON.stringify(attribute, null, 2);
 <article 
   class:list={[
     'attribute-card bg-bg-secondary border border-border rounded-lg p-5 transition-colors duration-fast scroll-mt-24 hover:border-border-light',
+    { hidden: defaultHidden },
     { 'opacity-70 border-dashed hover:opacity-100': isDeprecated }
   ]} 
   id={anchorId}
+  hidden={defaultHidden}
+  data-attribute-card
+  data-filter-default-hidden={defaultHidden ? 'true' : undefined}
+  data-filter-pii={attribute.pii.key}
+  data-filter-visibility={attribute.visibility}
+  data-filter-otel={attribute.is_in_otel ? 'true' : 'false'}
   data-pagefind-body
 >
   <div class="flex flex-wrap items-start justify-between gap-3 mb-3">
diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
new file mode 100644
index 00000000..da404f00
--- /dev/null
+++ b/docs/src/components/AttributeFilters.svelte
@@ -0,0 +1,456 @@
+<script lang="ts">
+import { onMount, tick } from 'svelte';
+
+interface CategoryFilterCount {
+  category: string;
+  total: number;
+  attributes: Array<{
+    pii: 'true' | 'maybe' | 'false';
+    visibility: 'public' | 'internal';
+    otel: 'true' | 'false';
+  }>;
+}
+
+interface Props {
+  mode: 'cards' | 'sections';
+  totalCount?: number;
+  categoryFilterCounts?: CategoryFilterCount[];
+}
+
+const PII_VALUES = ['true', 'maybe', 'false'] as const;
+const VISIBILITY_VALUES = ['public', 'internal'] as const;
+const OTEL_VALUES = ['true', 'false'] as const;
+
+const { mode, totalCount = 0, categoryFilterCounts = [] }: Props = $props();
+
+let piiFilter = $state('');
+let visibilityFilter = $state('');
+let otelFilter = $state('');
+
+let visibleCardCount = $state(0);
+let visibleSectionCount = $state(0);
+let emptyStateEl: HTMLElement | null = null;
+let attributeListEl: HTMLElement | null = null;
+let filtersInitializedFromUrl = false;
+let latestApplyFiltersRun = 0;
+
+const hasActiveFilters = $derived(piiFilter !== '' || visibilityFilter !== '' || otelFilter !== '');
+
+function readFiltersFromUrl() {
+  const params = new URLSearchParams(window.location.search);
+  const pii = params.get('pii') ?? '';
+  // `vis` avoids clashing with CSS/DOM visibility
+  const visibility = params.get('vis') ?? '';
+  const otel = params.get('otel') ?? '';
+
+  piiFilter = PII_VALUES.includes(pii as (typeof PII_VALUES)[number]) ? pii : '';
+  visibilityFilter = VISIBILITY_VALUES.includes(visibility as (typeof VISIBILITY_VALUES)[number]) ? visibility : '';
+  otelFilter = OTEL_VALUES.includes(otel as (typeof OTEL_VALUES)[number]) ? otel : '';
+}
+
+function syncUrl() {
+  const url = new URL(window.location.href);
+
+  if (piiFilter) {
+    url.searchParams.set('pii', piiFilter);
+  } else {
+    url.searchParams.delete('pii');
+  }
+
+  if (visibilityFilter) {
+    url.searchParams.set('vis', visibilityFilter);
+  } else {
+    url.searchParams.delete('vis');
+  }
+
+  if (otelFilter) {
+    url.searchParams.set('otel', otelFilter);
+  } else {
+    url.searchParams.delete('otel');
+  }
+
+  history.replaceState(null, '', url);
+}
+
+function matchesFilters(pii: string, visibility: string, otel: string) {
+  if (piiFilter && pii !== piiFilter) return false;
+  if (visibilityFilter && visibility !== visibilityFilter) return false;
+  if (otelFilter && otel !== otelFilter) return false;
+  return true;
+}
+
+function formatAttributeCount(count: number) {
+  return `${count} attribute${count === 1 ? '' : 's'}`;
+}
+
+function formatCategoryCount(count: number) {
+  return `${count} categor${count === 1 ? 'y' : 'ies'}`;
+}
+
+function getCardFilterValues(card: HTMLElement) {
+  return {
+    pii: card.dataset.filterPii ?? card.getAttribute('data-filter-pii') ?? '',
+    visibility: card.dataset.filterVisibility ?? card.getAttribute('data-filter-visibility') ?? '',
+    otel: card.dataset.filterOtel ?? card.getAttribute('data-filter-otel') ?? '',
+  };
+}
+
+function cardMatches(card: HTMLElement) {
+  const { pii, visibility, otel } = getCardFilterValues(card);
+  return matchesFilters(pii, visibility, otel);
+}
+
+function isElementVisible(el: HTMLElement) {
+  return !el.hidden && !el.classList.contains('hidden');
+}
+
+function isDefaultHidden(el: HTMLElement) {
+  return el.dataset.filterDefaultHidden === 'true';
+}
+
+function getHashAnchorId() {
+  const hash = window.location.hash.slice(1);
+  if (!hash) return '';
+  try {
+    return decodeURIComponent(hash);
+  } catch {
+    return hash;
+  }
+}
+
+function isHashTarget(card: HTMLElement) {
+  const anchorId = getHashAnchorId();
+  return anchorId !== '' && card.id === anchorId;
+}
+
+function getHashTargetCard(): HTMLElement | null {
+  const anchorId = getHashAnchorId();
+  if (!anchorId) return null;
+
+  const target = getFilterRoot().querySelector<HTMLElement>(`#${CSS.escape(anchorId)}`);
+  return target?.matches('[data-attribute-card]') ? target : null;
+}
+
+function revealHashTarget() {
+  if (hasActiveFilters) return;
+
+  const target = getHashTargetCard();
+  if (!target) return;
+
+  const deprecatedBlock = target.closest<HTMLElement>('[data-category-deprecated]');
+  if (deprecatedBlock) {
+    setElementVisible(deprecatedBlock, true);
+    setDetailsOpen(deprecatedBlock, true);
+  }
+
+  requestAnimationFrame(() => {
+    target.scrollIntoView({ block: 'start' });
+  });
+}
+
+function setElementVisible(el: HTMLElement, show: boolean) {
+  el.hidden = !show;
+  el.classList.toggle('hidden', !show);
+}
+
+function setDetailsOpen(el: HTMLElement, open: boolean) {
+  if (el instanceof HTMLDetailsElement) {
+    el.open = open;
+  }
+}
+
+function getFilterRoot(): ParentNode {
+  return attributeListEl ?? document;
+}
+
+function updateCategoryLinkUrls() {
+  const root = getFilterRoot();
+  const links = root.querySelectorAll<HTMLAnchorElement>('[data-category-filter-link]');
+
+  const query = new URLSearchParams([
+    ...(piiFilter ? [['pii', piiFilter]] : []),
+    ...(visibilityFilter ? [['vis', visibilityFilter]] : []),
+    ...(otelFilter ? [['otel', otelFilter]] : []),
+  ]).toString();
+
+  for (const link of links) {
+    const originalHref = link.dataset.categoryOriginalHref ?? link.getAttribute('href') ?? '';
+    link.dataset.categoryOriginalHref = originalHref;
+
+    const url = new URL(originalHref, window.location.href);
+    url.search = query;
+    link.setAttribute('href', `${url.pathname}${url.search}${url.hash}`);
+  }
+}
+
+function resetCategoryCountLabels() {
+  const root = getFilterRoot();
+  const labels = root.querySelectorAll<HTMLElement>('[data-category-count-label]');
+
+  for (const label of labels) {
+    const total = Number(label.dataset.categoryTotal ?? 0);
+    label.textContent = formatAttributeCount(total);
+  }
+}
+
+function updateCategoryCountLabels() {
+  const labels = getFilterRoot().querySelectorAll<HTMLElement>('[data-category-count-label]');
+
+  const counts = new Map(
+    categoryFilterCounts.map(({ category, total, attributes }) => [
+      category,
+      {
+        total,
+        visible: attributes.filter((attribute) => matchesFilters(attribute.pii, attribute.visibility, attribute.otel))
+          .length,
+      },
+    ]),
+  );
+
+  for (const label of labels) {
+    const category = label.dataset.categoryCountLabel;
+    if (!category) continue;
+
+    const count = counts.get(category);
+    if (!count) continue;
+
+    label.textContent = `${count.visible}/${count.total} attribute${count.total === 1 ? '' : 's'}`;
+  }
+}
+
+function applyCardFilters(): number {
+  const root = getFilterRoot();
+  const cards = root.querySelectorAll<HTMLElement>('[data-attribute-card]');
+  let visible = 0;
+
+  for (const card of cards) {
+    const show = hasActiveFilters ? cardMatches(card) : !isDefaultHidden(card) || isHashTarget(card);
+    setElementVisible(card, show);
+    if (show) visible++;
+  }
+
+  if (mode === 'cards') {
+    const sections = root.querySelectorAll<HTMLElement>('[data-attribute-section]');
+    for (const section of sections) {
+      const sectionCards = section.querySelectorAll<HTMLElement>('[data-attribute-card]');
+      const hasVisible = Array.from(sectionCards).some(isElementVisible);
+      setElementVisible(section, hasVisible);
+    }
+  }
+
+  return visible;
+}
+
+function updateCategorySectionVisibility(): number {
+  const root = getFilterRoot();
+  const sections = root.querySelectorAll<HTMLElement>('[data-category-section]');
+  let visibleSections = 0;
+
+  for (const section of sections) {
+    const cards = section.querySelectorAll<HTMLElement>('[data-attribute-card]');
+    const hasVisibleCard = Array.from(cards).some(isElementVisible);
+
+    setElementVisible(section, hasVisibleCard);
+    if (hasVisibleCard) visibleSections++;
+
+    const viewAllLink = section.querySelector<HTMLElement>('[data-category-view-all]');
+    if (viewAllLink) {
+      const stableGrid = section.querySelector<HTMLElement>('[data-category-stable-grid]');
+      const hasVisibleStable =
+        stableGrid !== null &&
+        Array.from(stableGrid.querySelectorAll<HTMLElement>('[data-attribute-card]')).some(isElementVisible);
+      setElementVisible(viewAllLink, hasVisibleStable);
+    }
+
+    const deprecatedBlock = section.querySelector<HTMLElement>('[data-category-deprecated]');
+    if (deprecatedBlock) {
+      const hasVisibleDeprecated = Array.from(
+        deprecatedBlock.querySelectorAll<HTMLElement>('[data-attribute-card]'),
+      ).some(isElementVisible);
+      setElementVisible(deprecatedBlock, hasVisibleDeprecated);
+      setDetailsOpen(deprecatedBlock, hasVisibleDeprecated);
+    }
+  }
+
+  return visibleSections;
+}
+
+function resetSectionVisibility(showDefaultHidden = false) {
+  const root = getFilterRoot();
+  const sections = root.querySelectorAll<HTMLElement>('[data-category-section]');
+
+  for (const section of sections) {
+    setElementVisible(section, true);
+    const viewAllLink = section.querySelector<HTMLElement>('[data-category-view-all]');
+    if (viewAllLink) setElementVisible(viewAllLink, true);
+    const deprecatedBlock = section.querySelector<HTMLElement>('[data-category-deprecated]');
+    if (deprecatedBlock) {
+      setElementVisible(deprecatedBlock, showDefaultHidden || !isDefaultHidden(deprecatedBlock));
+      setDetailsOpen(deprecatedBlock, false);
+    }
+  }
+}
+
+function applySectionFilters() {
+  updateCategoryLinkUrls();
+
+  if (!hasActiveFilters) {
+    resetSectionVisibility();
+    resetCategoryCountLabels();
+    visibleCardCount = applyCardFilters();
+    revealHashTarget();
+    visibleSectionCount = getFilterRoot().querySelectorAll('[data-category-section]').length;
+    return;
+  }
+
+  // Show all sections first so card filters run against every rendered card
+  resetSectionVisibility(true);
+  visibleCardCount = applyCardFilters();
+  visibleSectionCount = updateCategorySectionVisibility();
+  updateCategoryCountLabels();
+}
+
+function updateEmptyState(visible: number) {
+  if (emptyStateEl) {
+    emptyStateEl.hidden = visible > 0 || !hasActiveFilters;
+    emptyStateEl.classList.toggle('hidden', emptyStateEl.hidden);
+  }
+  if (attributeListEl && mode === 'cards') {
+    const hideList = visible === 0 && hasActiveFilters;
+    attributeListEl.hidden = hideList;
+    attributeListEl.classList.toggle('hidden', hideList);
+  }
+}
+
+async function applyFilters() {
+  const applyFiltersRun = ++latestApplyFiltersRun;
+  await tick();
+
+  if (applyFiltersRun !== latestApplyFiltersRun) {
+    return;
+  }
+
+  if (!attributeListEl) {
+    attributeListEl = document.getElementById('attribute-list');
+  }
+
+  syncUrl();
+
+  if (mode === 'sections') {
+    applySectionFilters();
+    updateEmptyState(visibleSectionCount);
+  } else {
+    visibleCardCount = applyCardFilters();
+    updateEmptyState(visibleCardCount);
+  }
+}
+
+function clearFilters() {
+  piiFilter = '';
+  visibilityFilter = '';
+  otelFilter = '';
+}
+
+function handlePopState() {
+  readFiltersFromUrl();
+}
+
+function handleHashChange() {
+  void applyFilters();
+}
+
+onMount(() => {
+  readFiltersFromUrl();
+  filtersInitializedFromUrl = true;
+  emptyStateEl = document.getElementById('attribute-filter-empty');
+  attributeListEl = document.getElementById('attribute-list');
+  void applyFilters();
+
+  window.addEventListener('popstate', handlePopState);
+  window.addEventListener('hashchange', handleHashChange);
+  return () => {
+    window.removeEventListener('popstate', handlePopState);
+    window.removeEventListener('hashchange', handleHashChange);
+  };
+});
+
+$effect(() => {
+  piiFilter;
+  visibilityFilter;
+  otelFilter;
+  if (!filtersInitializedFromUrl) return;
+  void applyFilters();
+});
+
+const resultLabel = $derived.by(() => {
+  if (mode === 'cards') {
+    if (hasActiveFilters) {
+      return `Showing ${visibleCardCount} of ${formatAttributeCount(totalCount)}`;
+    }
+    return formatAttributeCount(totalCount);
+  }
+
+  if (hasActiveFilters) {
+    return `Showing ${formatAttributeCount(visibleCardCount)} across ${formatCategoryCount(visibleSectionCount)}`;
+  }
+  return null;
+});
+</script>
+
+<div class="mb-6 p-3 bg-bg-secondary border border-border rounded-lg">
+  <div class="flex flex-wrap items-end gap-3">
+    <label class="flex flex-col gap-1 min-w-[140px]">
+      <span class="text-xs text-text-muted uppercase tracking-wider">PII</span>
+      <select
+        class="form-input py-2"
+        bind:value={piiFilter}
+        aria-label="Filter by PII"
+      >
+        <option value="">All</option>
+        <option value="true">True</option>
+        <option value="maybe">Maybe</option>
+        <option value="false">False</option>
+      </select>
+    </label>
+
+    <label class="flex flex-col gap-1 min-w-[140px]">
+      <span class="text-xs text-text-muted uppercase tracking-wider">Visibility</span>
+      <select
+        class="form-input py-2"
+        bind:value={visibilityFilter}
+        aria-label="Filter by visibility"
+      >
+        <option value="">All</option>
+        <option value="public">Public</option>
+        <option value="internal">Internal</option>
+      </select>
+    </label>
+
+    <label class="flex flex-col gap-1 min-w-[140px]">
+      <span class="text-xs text-text-muted uppercase tracking-wider">OTel</span>
+      <select
+        class="form-input py-2"
+        bind:value={otelFilter}
+        aria-label="Filter by OpenTelemetry"
+      >
+        <option value="">All</option>
+        <option value="true">In OTel</option>
+        <option value="false">Not in OTel</option>
+      </select>
+    </label>
+
+    {#if hasActiveFilters}
+      <button
+        type="button"
+        class="text-sm text-accent hover:text-accent-hover px-2 py-2"
+        onclick={clearFilters}
+      >
+        Clear filters
+      </button>
+    {/if}
+  </div>
+
+  {#if resultLabel}
+    <p class="text-sm text-text-muted mt-3 mb-0">{resultLabel}</p>
+  {/if}
+</div>
diff --git a/docs/src/pages/attributes/[category].astro b/docs/src/pages/attributes/[category].astro
index 2ebdc33d..87930809 100644
--- a/docs/src/pages/attributes/[category].astro
+++ b/docs/src/pages/attributes/[category].astro
@@ -1,6 +1,7 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import AttributeCard from '../../components/AttributeCard.astro';
+import AttributeFilters from '../../components/AttributeFilters.svelte';
 import { getCollection } from 'astro:content';
 import { parseAttributeId } from '../../utils/category';
 
@@ -104,10 +105,19 @@ const categoryTitle = category.charAt(0).toUpperCase() + category.slice(1);
           {deprecatedCount > 0 && <span class="text-text-muted">{deprecatedCount} deprecated</span>}
         </p>
       </div>
+
+      <AttributeFilters client:load mode="cards" totalCount={totalCount} />
+
+      <div
+        id="attribute-filter-empty"
+        class="hidden mb-8 p-6 bg-bg-secondary border border-dashed border-border rounded-lg text-center text-text-muted"
+      >
+        No attributes match the current filters.
+      </div>
       
-      <div class="flex flex-col gap-12">
+      <div id="attribute-list" class="flex flex-col gap-12">
         {stableAttributes.length > 0 && (
-          <section>
+          <section data-attribute-section>
             <h2 class="mb-4 pb-3 border-b border-border">Stable Attributes</h2>
             <div class="flex flex-col gap-4">
               {stableAttributes.map(attr => (
@@ -118,7 +128,7 @@ const categoryTitle = category.charAt(0).toUpperCase() + category.slice(1);
         )}
         
         {deprecatedAttributes.length > 0 && (
-          <section class="opacity-90">
+          <section class="opacity-90" data-attribute-section>
             <h2 class="mb-4 pb-3 border-b border-border text-text-muted">Deprecated Attributes</h2>
             <p class="text-sm text-text-muted mb-6">
               These attributes are deprecated and should not be used in new code. 
diff --git a/docs/src/pages/attributes/index.astro b/docs/src/pages/attributes/index.astro
index c596ee2f..59181c60 100644
--- a/docs/src/pages/attributes/index.astro
+++ b/docs/src/pages/attributes/index.astro
@@ -1,10 +1,20 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import AttributeCard from '../../components/AttributeCard.astro';
-import CategoryChip from '../../components/CategoryChip.astro';
+import AttributeFilters from '../../components/AttributeFilters.svelte';
 import { getCollection } from 'astro:content';
 import { parseAttributeId } from '../../utils/category';
 
+type CategoryFilterCounts = Array<{
+  category: string;
+  total: number;
+  attributes: Array<{
+    pii: 'true' | 'maybe' | 'false';
+    visibility: 'public' | 'internal';
+    otel: 'true' | 'false';
+  }>;
+}>;
+
 // Get all attributes
 const allAttributes = await getCollection('attributes');
 
@@ -32,6 +42,20 @@ for (const [category, attrs] of categoryMap) {
   attrs.sort((a, b) => a.data.key.localeCompare(b.data.key));
 }
 
+const categoryFilterCounts: CategoryFilterCounts = sortedCategories.map((category) => {
+  const attributes = categoryMap.get(category) || [];
+
+  return {
+    category,
+    total: attributes.length,
+    attributes: attributes.map((attr) => ({
+      pii: attr.data.pii.key,
+      visibility: attr.data.visibility,
+      otel: attr.data.is_in_otel ? ('true' as const) : ('false' as const),
+    })),
+  };
+});
+
 // Stats
 const totalAttributes = allAttributes.length;
 const stableCount = allAttributes.filter((a) => !a.data.deprecation).length;
@@ -75,39 +99,72 @@ const deprecatedCount = totalAttributes - stableCount;
           LLM-friendly: <a href={`${import.meta.env.BASE_URL}llms.txt`} class="text-accent hover:text-accent-hover">llms.txt</a> · <a href={`${import.meta.env.BASE_URL}llms-full.txt`} class="text-accent hover:text-accent-hover">llms-full.txt</a>
         </p>
       </div>
+
+      <AttributeFilters client:load mode="sections" categoryFilterCounts={categoryFilterCounts} />
+
+      <div
+        id="attribute-filter-empty"
+        class="hidden mb-8 p-6 bg-bg-secondary border border-dashed border-border rounded-lg text-center text-text-muted"
+      >
+        No categories match the current filters.
+      </div>
       
-      
-      <div class="flex flex-col gap-12">
+      <div id="attribute-list" class="flex flex-col gap-12">
     {sortedCategories.map(category => {
       const attributes = categoryMap.get(category) || [];
       const stableAttrs = attributes.filter(a => !a.data.deprecation);
       const deprecatedAttrs = attributes.filter(a => a.data.deprecation);
       
       return (
-        <section class="scroll-mt-20" id={category}>
+        <section class="scroll-mt-20" id={category} data-category-section>
           <div class="flex items-baseline gap-4 mb-6 pb-3 border-b border-border">
             <h2 class="m-0 text-2xl">
-              <a href={`${import.meta.env.BASE_URL}attributes/${category}/`} class="text-text-primary hover:text-accent">{category}</a>
+              <a
+                href={`${import.meta.env.BASE_URL}attributes/${category}/`}
+                class="text-text-primary hover:text-accent"
+                data-category-filter-link
+              >
+                {category}
+              </a>
             </h2>
-            <span class="text-sm text-text-muted">{attributes.length} attributes</span>
+            <span
+              class="text-sm text-text-muted"
+              data-category-count-label={category}
+              data-category-total={attributes.length}
+            >
+              {attributes.length} attributes
+            </span>
           </div>
           
           {stableAttrs.length > 0 && (
-            <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
-              {stableAttrs.slice(0, 6).map(attr => (
-                <AttributeCard attribute={attr.data} id={attr.id} />
+            <div class="grid grid-cols-1 xl:grid-cols-2 gap-4" data-category-stable-grid>
+              {stableAttrs.map((attr, index) => (
+                <AttributeCard attribute={attr.data} id={attr.id} defaultHidden={index >= 6} />
               ))}
             </div>
           )}
           
           {stableAttrs.length > 6 && (
-            <a href={`${import.meta.env.BASE_URL}attributes/${category}/`} class="inline-block mt-4 text-sm text-accent hover:text-accent-hover">
+            <a
+              href={`${import.meta.env.BASE_URL}attributes/${category}/`}
+              data-category-view-all
+              data-category-filter-link
+              class="inline-block mt-4 text-sm text-accent hover:text-accent-hover"
+            >
               View all {attributes.length} {category} attributes →
             </a>
           )}
           
-          {stableAttrs.length <= 6 && deprecatedAttrs.length > 0 && (
-            <details class="mt-6 group">
+          {deprecatedAttrs.length > 0 && (
+            <details
+              class:list={[
+                'mt-6 group',
+                { hidden: stableAttrs.length > 6 }
+              ]}
+              hidden={stableAttrs.length > 6}
+              data-category-deprecated
+              data-filter-default-hidden={stableAttrs.length > 6 ? 'true' : undefined}
+            >
               <summary class="cursor-pointer list-none">
                 <span class="inline-flex items-center gap-2 px-4 py-2 bg-bg-secondary border border-dashed border-border rounded-md text-sm text-text-muted transition-all duration-fast hover:border-border-light hover:text-text-secondary group-open:mb-4">
                   {deprecatedAttrs.length} deprecated attribute{deprecatedAttrs.length > 1 ? 's' : ''}