diff --git a/src/components/CollapsableGroup.vue b/src/components/CollapsableGroup.vue
index 5f1a9785..9812795e 100644
--- a/src/components/CollapsableGroup.vue
+++ b/src/components/CollapsableGroup.vue
@@ -1,13 +1,29 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import { useCollapsibleGroupsStore } from '@/stores/collapsibleGroups';
 
 const props = defineProps({
   open: Boolean,
+  // Opt-in: when set, expand/collapse state is persisted (keyed by this string) instead
+  // of being purely local to this component instance, so it survives a hard refresh.
+  persistKey: String,
 });
 
-const isOpen = ref<boolean>(props.open);
+const collapsibleGroupsStore = useCollapsibleGroupsStore();
+const localOpen = ref<boolean>(props.open);
+
+const isOpen = computed<boolean>(() =>
+  props.persistKey
+    ? collapsibleGroupsStore.isOpen(props.persistKey)
+    : localOpen.value,
+);
+
 function toggleOpen() {
-  isOpen.value = !isOpen.value;
+  if (props.persistKey) {
+    collapsibleGroupsStore.setOpen(props.persistKey, !isOpen.value);
+  } else {
+    localOpen.value = !localOpen.value;
+  }
 }
 </script>
 
diff --git a/src/components/groups/GroupMembersPanel.vue b/src/components/groups/GroupMembersPanel.vue
index bc7b59b1..96cdac12 100644
--- a/src/components/groups/GroupMembersPanel.vue
+++ b/src/components/groups/GroupMembersPanel.vue
@@ -129,10 +129,6 @@
             {{ adding ? 'Adding…' : 'Add' }}
           </PrimaryButton>
         </div>
-
-        <div class="mt-6 flex justify-end">
-          <SecondaryButton @click="showAddMember = false">Done</SecondaryButton>
-        </div>
       </div>
     </Dialog>
   </div>
diff --git a/src/components/navigation/SideNavCategory.vue b/src/components/navigation/SideNavCategory.vue
index 84317e42..ab2d3063 100644
--- a/src/components/navigation/SideNavCategory.vue
+++ b/src/components/navigation/SideNavCategory.vue
@@ -1,18 +1,46 @@
 <script setup lang="ts">
+import { computed, watch } from 'vue';
 import ChevronRightIcon from '@primevue/icons/chevronright';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
-import { useToggle } from '@/composables/useToggle';
+import { useLeftNavCategoriesStore } from '@/stores/leftNavCategories';
 
-defineProps<{
+const props = defineProps<{
   title: string;
   open?: boolean;
+  // Highlights the header to show the currently active route lives under this category
+  // (BCH — LHN active-section indicator).
+  active?: boolean;
 }>();
 
-const { value: isOpen, toggle } = useToggle();
+// Open/closed state lives in this store (persisted to localStorage, keyed by title) rather
+// than local component state, so a submenu the user expands — even with nothing under it
+// selected — stays open across a hard refresh or a new session.
+const categoriesStore = useLeftNavCategoriesStore();
+const isOpen = computed(() => categoriesStore.isOpen(props.title));
+
+// Force the category open when it becomes the one containing the active route, so the
+// highlighted child link is actually visible. Never auto-collapses it back — a user who
+// manually closes it keeps that choice while still browsing inside it.
+watch(
+  () => props.open,
+  (open) => {
+    if (open) categoriesStore.setOpen(props.title, true);
+  },
+  { immediate: true },
+);
+
+function toggle() {
+  categoriesStore.setOpen(props.title, !isOpen.value);
+}
 </script>
 <template>
   <div
-    class="text-zinc-500 dark:text-slate-100 py-2 font-base pl-6 flex items-center gap-x-4"
+    class="text-zinc-500 dark:text-slate-100 py-2 font-base pl-4 flex items-center gap-x-4 border-l-8"
+    :class="
+      active
+        ? 'bg-ccf-100 dark:bg-slate-800 border-l-slate-300 dark:border-l-slate-500 text-zinc-900 dark:text-white font-medium'
+        : 'border-l-transparent'
+    "
     @click="toggle"
   >
     <slot name="title">
diff --git a/src/components/navigation/SideNavLink.vue b/src/components/navigation/SideNavLink.vue
index 1aa165d4..758b0e65 100644
--- a/src/components/navigation/SideNavLink.vue
+++ b/src/components/navigation/SideNavLink.vue
@@ -4,12 +4,20 @@ import type { RouteLocationRaw } from 'vue-router';
 
 defineProps<{
   to: RouteLocationRaw;
+  // Sticky active-section indicator (set by LeftSideNav), independent of RouterLink's own
+  // exact/descendant route match — see LeftSideNav.vue's activeLinkKey.
+  active?: boolean;
 }>();
 </script>
 <template>
   <RouterLink
     :to="to"
-    class="font-light block py-2 hover:bg-gray-50 dark:hover:bg-slate-800 pl-4 border-l-transparent border-l-8 text-zinc-700 dark:text-slate-200"
+    class="font-light block py-2 hover:bg-gray-50 dark:hover:bg-slate-800 pl-4 border-l-8 text-zinc-700 dark:text-slate-200"
+    :class="
+      active
+        ? 'bg-linear-to-r from-slate-200 to-slate-100 border-l-slate-300 dark:from-slate-700 dark:to-slate-800 dark:border-slate-500 dark:text-slate-200'
+        : 'border-l-transparent'
+    "
   >
     <slot />
   </RouterLink>
diff --git a/src/router/__tests__/index.spec.ts b/src/router/__tests__/index.spec.ts
index 19964a89..cb93faa7 100644
--- a/src/router/__tests__/index.spec.ts
+++ b/src/router/__tests__/index.spec.ts
@@ -2,6 +2,14 @@ import { describe, expect, it } from 'vitest';
 import router from '@/router';
 
 describe('router', () => {
+  it('redirects the root route to the canonical evidence route', () => {
+    // So the initial landing page resolves as 'evidence:index' — the name LeftSideNav's
+    // active-section tracking matches on — and "Evidence" is highlighted immediately,
+    // rather than under a separate 'home' route name nothing in the nav matches.
+    const home = router.getRoutes().find((route) => route.name === 'home');
+    expect(home?.redirect).toEqual({ name: 'evidence:index' });
+  });
+
   it('routes SSP creation to the create view', () => {
     const route = router
       .getRoutes()
diff --git a/src/router/index.ts b/src/router/index.ts
index 0f683215..b92d4837 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,10 +16,12 @@ const authenticatedRoutes = [
   {
     path: '/',
     name: 'home',
-    // route level code-splitting
-    // this generates a separate chunk (About.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import('../views/evidence/IndexView.vue'),
+    // Redirects to the canonical evidence route (rather than duplicating its component
+    // under a second route name) so the initial landing page resolves as 'evidence:index'
+    // — the same name LeftSideNav's active-section tracking matches on — and the "Evidence"
+    // nav item is correctly highlighted from the very first render, not just after the user
+    // clicks it.
+    redirect: { name: 'evidence:index' },
     meta: {
       requiresAuth: true,
     },
diff --git a/src/stores/__tests__/leftNavCategories.spec.ts b/src/stores/__tests__/leftNavCategories.spec.ts
new file mode 100644
index 00000000..fad30d16
--- /dev/null
+++ b/src/stores/__tests__/leftNavCategories.spec.ts
@@ -0,0 +1,40 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { nextTick } from 'vue';
+import { createPinia, setActivePinia } from 'pinia';
+import { useLeftNavCategoriesStore } from '../leftNavCategories';
+
+describe('useLeftNavCategoriesStore', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    setActivePinia(createPinia());
+  });
+
+  it('reports categories as closed by default', () => {
+    const store = useLeftNavCategoriesStore();
+    expect(store.isOpen('Control Definitions')).toBe(false);
+  });
+
+  it('remembers an opened category independently of others', () => {
+    const store = useLeftNavCategoriesStore();
+    store.setOpen('Control Definitions', true);
+
+    expect(store.isOpen('Control Definitions')).toBe(true);
+    expect(store.isOpen('Workflows')).toBe(false);
+
+    store.setOpen('Control Definitions', false);
+    expect(store.isOpen('Control Definitions')).toBe(false);
+  });
+
+  it('persists open categories to localStorage across a fresh store instance', async () => {
+    const first = useLeftNavCategoriesStore();
+    first.setOpen('Admin', true);
+    // useLocalStorage writes to storage via a watcher, not synchronously on assignment.
+    await nextTick();
+
+    // Simulates a hard refresh: a brand new Pinia instance, but the same localStorage.
+    setActivePinia(createPinia());
+    const second = useLeftNavCategoriesStore();
+
+    expect(second.isOpen('Admin')).toBe(true);
+  });
+});
diff --git a/src/stores/collapsibleGroups.ts b/src/stores/collapsibleGroups.ts
new file mode 100644
index 00000000..5d6983b3
--- /dev/null
+++ b/src/stores/collapsibleGroups.ts
@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia';
+import { useLocalStorage } from '@vueuse/core';
+
+// Generic persisted open/closed state for CollapsableGroup instances, keyed by an
+// arbitrary caller-supplied string. Opt-in via CollapsableGroup's `persistKey` prop — used
+// where a page wants its expand/collapse tree (e.g. a catalog's groups and controls) to
+// survive a hard refresh, rather than always resetting collapsed on mount.
+export const useCollapsibleGroupsStore = defineStore(
+  'collapsibleGroups',
+  () => {
+    const openKeys = useLocalStorage<string[]>('collapsibleGroupsOpen', []);
+
+    function isOpen(key: string): boolean {
+      return openKeys.value.includes(key);
+    }
+
+    function setOpen(key: string, open: boolean) {
+      if (open === isOpen(key)) {
+        return;
+      }
+      openKeys.value = open
+        ? [...openKeys.value, key]
+        : openKeys.value.filter((openKey) => openKey !== key);
+    }
+
+    return {
+      openKeys,
+      isOpen,
+      setOpen,
+    };
+  },
+);
diff --git a/src/stores/leftNavCategories.ts b/src/stores/leftNavCategories.ts
new file mode 100644
index 00000000..923362b8
--- /dev/null
+++ b/src/stores/leftNavCategories.ts
@@ -0,0 +1,31 @@
+import { defineStore } from 'pinia';
+import { useLocalStorage } from '@vueuse/core';
+
+// Which left-hand-nav categories (keyed by their title, e.g. "Control Definitions") the
+// user has expanded — persisted so a manually-opened submenu stays open across a hard
+// refresh or a new session, even if nothing under it was ever selected.
+export const useLeftNavCategoriesStore = defineStore(
+  'leftNavCategories',
+  () => {
+    const openTitles = useLocalStorage<string[]>('leftNavOpenCategories', []);
+
+    function isOpen(title: string): boolean {
+      return openTitles.value.includes(title);
+    }
+
+    function setOpen(title: string, open: boolean) {
+      if (open === isOpen(title)) {
+        return;
+      }
+      openTitles.value = open
+        ? [...openTitles.value, title]
+        : openTitles.value.filter((openTitle) => openTitle !== title);
+    }
+
+    return {
+      openTitles,
+      isOpen,
+      setOpen,
+    };
+  },
+);
diff --git a/src/views/LeftSideNav.vue b/src/views/LeftSideNav.vue
index f17ea600..eddd2b48 100644
--- a/src/views/LeftSideNav.vue
+++ b/src/views/LeftSideNav.vue
@@ -8,12 +8,15 @@ import darkLogo from '@/assets/logo-dark.svg';
 import lightMiniLogo from '@/assets/logo-light-mini.svg';
 import darkMiniLogo from '@/assets/logo-dark-mini.svg';
 import { useSidebarStore } from '@/stores/sidebar';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { usePermissions } from '@/composables/usePermissions';
 import { RESOURCES, ACTIONS } from '@/constants/permissions';
 
 const sidebarStore = useSidebarStore();
 const { can } = usePermissions();
+const route = useRoute();
+const router = useRouter();
 
 interface NavigationItem {
   title: string;
@@ -252,6 +255,74 @@ const visibleLinks = computed<Array<NavigationItem>>(() =>
     ),
 );
 
+// Identifies a top-level nav entry for the sticky-active tracking below: a category by its
+// (unique) title, a standalone link by its route name.
+function linkKey(item: NavigationItem): string | undefined {
+  return item.children ? item.title : item.name;
+}
+
+function routeIsUnder(name?: string): boolean {
+  if (!name) {
+    return false;
+  }
+  if (route.matched.some((matched) => matched.name === name)) {
+    return true;
+  }
+  // Many sections (e.g. catalogs) are flat sibling routes — /catalogs, /catalogs/:id,
+  // /catalogs/new — rather than nested child routes, so a detail/create page reached
+  // directly (deep link, hard refresh) never shows up in route.matched under the list
+  // route's name. Falling back to a path-prefix check lets a fresh load on such a page
+  // still resolve to the right nav item without depending on any in-session state.
+  try {
+    const basePath = router.resolve({ name }).path;
+    return route.path === basePath || route.path.startsWith(`${basePath}/`);
+  } catch {
+    return false;
+  }
+}
+
+interface ActiveSection {
+  // A category's title, or a standalone top-level link's route name.
+  topLevel?: string;
+  // Set only when `topLevel` is a category: the specific child route name active within
+  // it, so "Governance > Catalogs" stays distinguishable from "Governance > Profiles".
+  child?: string;
+}
+
+// Which nav entry, at both levels, the CURRENT route belongs to (a category whose
+// children include the route anywhere in its matched chain, or a standalone link whose
+// own route matches) — or undefined when the route matches nothing in the nav at all.
+function matchingSection(): ActiveSection | undefined {
+  for (const link of links.value) {
+    if (link.children) {
+      const child = link.children.find((c) => routeIsUnder(c.name));
+      if (child) {
+        return { topLevel: link.title, child: child.name };
+      }
+    } else if (routeIsUnder(link.name)) {
+      return { topLevel: link.name };
+    }
+  }
+  return undefined;
+}
+
+// The section (and, within it, the specific item) the user is "in", kept sticky at both
+// levels: it only moves when navigation lands on a route that genuinely belongs to a
+// different nav entry. A button inside a page pushing to some unlisted detail route (e.g.
+// "New Catalog", never registered as a nav child) would otherwise match nothing and blank
+// the highlight out from under the user — at either level — even though they haven't left
+// that item.
+const activeSection = ref<ActiveSection>(matchingSection() ?? {});
+watch(
+  () => route.fullPath,
+  () => {
+    const matched = matchingSection();
+    if (matched !== undefined) {
+      activeSection.value = matched;
+    }
+  },
+);
+
 const footLinks = ref<Array<NavigationItem>>([
   {
     name: 'logout',
@@ -296,7 +367,12 @@ const footLinks = ref<Array<NavigationItem>>([
       <div>
         <!-- Main Navigation Items -->
         <template v-for="link in visibleLinks" :key="link.name">
-          <SideNavCategory :title="link.title" v-if="link.children">
+          <SideNavCategory
+            :title="link.title"
+            :open="linkKey(link) === activeSection.topLevel"
+            :active="linkKey(link) === activeSection.topLevel"
+            v-if="link.children"
+          >
             <template #title>
               <span>{{
                 sidebarStore.open ? link.title : abbreviated(link)
@@ -305,6 +381,7 @@ const footLinks = ref<Array<NavigationItem>>([
             <template v-for="child in link.children" :key="child.name">
               <SideNavLink
                 :to="{ name: child.name }"
+                :active="child.name === activeSection.child"
                 v-tooltip.right="{
                   value: `${link.title} | ${child.title}`,
                   disabled: sidebarStore.open,
@@ -317,6 +394,7 @@ const footLinks = ref<Array<NavigationItem>>([
           <SideNavLink
             v-else
             :to="{ name: link.name }"
+            :active="link.name === activeSection.topLevel"
             v-tooltip.hover.right="{
               value: link.title,
               disabled: sidebarStore.open,
diff --git a/src/views/__tests__/LeftSideNav.spec.ts b/src/views/__tests__/LeftSideNav.spec.ts
index e5179197..299f9e5b 100644
--- a/src/views/__tests__/LeftSideNav.spec.ts
+++ b/src/views/__tests__/LeftSideNav.spec.ts
@@ -1,12 +1,40 @@
-import { beforeEach, describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { createPinia, setActivePinia } from 'pinia';
 import { useSidebarStore } from '@/stores/sidebar';
 import LeftSideNav from '../LeftSideNav.vue';
+import SideNavCategory from '@/components/navigation/SideNavCategory.vue';
+
+// A simple, non-reactive stand-in: fine for the initial-render check below, which mounts
+// fresh per test. The sticky/path-prefix persistence-across-navigation behavior
+// (LeftSideNav watching route.fullPath and resolving nav item paths) needs a genuinely
+// reactive route and router, and is covered separately in LeftSideNavActiveSection.spec.ts
+// using a real router.
+const { mockRoute } = vi.hoisted(() => ({
+  mockRoute: { matched: [] as Array<{ name?: string }>, path: '/' },
+}));
+
+vi.mock('vue-router', () => ({
+  useRoute: () => mockRoute,
+  useRouter: () => ({
+    resolve: () => {
+      throw new Error('not registered');
+    },
+  }),
+  RouterLink: {
+    name: 'RouterLink',
+    template: '<a><slot /></a>',
+  },
+}));
 
 describe('LeftSideNav', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
+    mockRoute.matched = [];
+    mockRoute.path = '/';
+    // Category open/closed state now persists to real localStorage (leftNavCategories
+    // store), which outlives a fresh Pinia instance — clear it so tests stay isolated.
+    localStorage.clear();
   });
 
   it('no longer renders the retired admin links', () => {
@@ -298,4 +326,100 @@ describe('LeftSideNav', () => {
       expect(indexOf('Systems')).toBeLessThan(indexOf(label));
     }
   });
+
+  it('highlights and opens the category containing the active route', () => {
+    const sidebarStore = useSidebarStore();
+    sidebarStore.open = true;
+    // 'catalog-list' is a child of Control Definitions.
+    mockRoute.matched = [{ name: 'catalog-list' }];
+
+    const wrapper = mount(LeftSideNav, {
+      global: {
+        directives: {
+          tooltip: {
+            mounted: () => undefined,
+          },
+        },
+        stubs: {
+          SideNav: {
+            template: '<div><slot name="logo" /><slot /></div>',
+          },
+          SideNavLink: {
+            template: '<a class="sidenav-link"><slot /></a>',
+          },
+          SideNavLogo: {
+            template: '<img alt="logo" />',
+          },
+        },
+      },
+    });
+
+    const governanceCategory = wrapper
+      .findAllComponents(SideNavCategory)
+      .find((category) => category.props('title') === 'Control Definitions');
+    const workflowsCategory = wrapper
+      .findAllComponents(SideNavCategory)
+      .find((category) => category.props('title') === 'Workflows');
+
+    expect(governanceCategory?.props('active')).toBe(true);
+    expect(governanceCategory?.props('open')).toBe(true);
+
+    // A category that doesn't contain the active route is neither highlighted nor forced open.
+    expect(workflowsCategory?.props('active')).toBe(false);
+    expect(workflowsCategory?.props('open')).toBe(false);
+  });
+
+  it('keeps a manually opened category open across a hard refresh, even with nothing under it selected', async () => {
+    mockRoute.matched = []; // nothing active anywhere
+    const sidebarStore = useSidebarStore();
+    sidebarStore.open = true;
+
+    const mountFresh = () =>
+      mount(LeftSideNav, {
+        global: {
+          directives: {
+            tooltip: {
+              mounted: () => undefined,
+            },
+          },
+          stubs: {
+            SideNav: {
+              template: '<div><slot name="logo" /><slot /></div>',
+            },
+            SideNavLink: {
+              template: '<a class="sidenav-link"><slot /></a>',
+            },
+            SideNavLogo: {
+              template: '<img alt="logo" />',
+            },
+          },
+        },
+      });
+
+    const findWorkflowsChildren = (wrapper: ReturnType<typeof mountFresh>) =>
+      wrapper
+        .findAllComponents(SideNavCategory)
+        .find((category) => category.props('title') === 'Workflows')!
+        .find('div.mb-2');
+
+    const wrapper = mountFresh();
+    expect(findWorkflowsChildren(wrapper).classes()).toContain('hidden');
+
+    const workflowsHeader = wrapper
+      .findAllComponents(SideNavCategory)
+      .find((category) => category.props('title') === 'Workflows')!
+      .find('div');
+    await workflowsHeader.trigger('click');
+
+    expect(findWorkflowsChildren(wrapper).classes()).not.toContain('hidden');
+
+    // Simulate a hard refresh: a brand-new Pinia instance (so the store itself is rebuilt
+    // from scratch, not just re-read from memory) backed by the same localStorage, exactly
+    // as a real browser reload would leave it.
+    setActivePinia(createPinia());
+    const wrapperAfterRefresh = mountFresh();
+    expect(findWorkflowsChildren(wrapperAfterRefresh).classes()).not.toContain(
+      'hidden',
+    );
+  });
 });
diff --git a/src/views/__tests__/LeftSideNavActiveSection.spec.ts b/src/views/__tests__/LeftSideNavActiveSection.spec.ts
new file mode 100644
index 00000000..2cae5f05
--- /dev/null
+++ b/src/views/__tests__/LeftSideNavActiveSection.spec.ts
@@ -0,0 +1,175 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
+import { createPinia, setActivePinia } from 'pinia';
+import { useSidebarStore } from '@/stores/sidebar';
+import LeftSideNav from '../LeftSideNav.vue';
+import SideNavCategory from '@/components/navigation/SideNavCategory.vue';
+import SideNavLink from '@/components/navigation/SideNavLink.vue';
+
+// Every route name referenced by LeftSideNav.vue's nav config, plus two routes that are
+// never registered as nav items anywhere but share a URL prefix with one that is
+// ('catalog-create'/'catalog-view', siblings of 'catalog-list' under /catalogs) — the
+// "New Catalog" button and a catalog detail deep link. A real router is used (rather than
+// mocking vue-router) so route.matched/route.path changes on navigation are genuinely
+// reactive, exercising LeftSideNav's active-section tracking end to end.
+const routeNames = [
+  'admin-agents',
+  'admin-diagnostics',
+  'admin-groups',
+  'admin-import',
+  'admin-parties',
+  'admin-risk-templates',
+  'admin-risks',
+  'admin-roles',
+  'admin-subject-templates',
+  'assessment-plans',
+  'assessment-results',
+  'catalog-list',
+  'component-definitions',
+  'control-links-list',
+  'controls:index',
+  'dashboards',
+  'evidence:index',
+  'inventory:index',
+  'lineage',
+  'logout',
+  'plan-of-action-and-milestones',
+  'profile-list',
+  'risks:index',
+  'system-security-plans',
+  'system:overview',
+  'users-list',
+  'workflow-instances:index',
+  'workflow:index',
+];
+
+function createTestRouter() {
+  return createRouter({
+    history: createWebHistory(),
+    routes: [
+      ...routeNames.map((name) => ({
+        // 'catalog-list' mirrors the real router's /catalogs path, since the whole point
+        // of the tests below is exercising the path-prefix relationship with its siblings.
+        path:
+          name === 'catalog-list' ? '/catalogs' : `/${name.replace(':', '-')}`,
+        name,
+        component: { template: '<div />' },
+      })),
+      // Flat siblings of 'catalog-list', not themselves nav items — matches the real
+      // router's shape (/catalogs, /catalogs/:id, /catalogs/new).
+      {
+        path: '/catalogs/new',
+        name: 'catalog-create',
+        component: { template: '<div />' },
+      },
+      {
+        path: '/catalogs/:id',
+        name: 'catalog-view',
+        component: { template: '<div />' },
+      },
+    ],
+  });
+}
+
+function mountNav(router: ReturnType<typeof createTestRouter>) {
+  const sidebarStore = useSidebarStore();
+  sidebarStore.open = true;
+
+  return mount(LeftSideNav, {
+    global: {
+      plugins: [router],
+      directives: {
+        tooltip: {
+          mounted: () => undefined,
+        },
+      },
+      stubs: {
+        SideNav: {
+          template: '<div><slot name="logo" /><slot /></div>',
+        },
+        SideNavLogo: {
+          template: '<img alt="logo" />',
+        },
+      },
+    },
+  });
+}
+
+describe('LeftSideNav active-section persistence', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    // Category open/closed state now persists to real localStorage (leftNavCategories
+    // store), which outlives a fresh Pinia instance — clear it so tests stay isolated.
+    localStorage.clear();
+  });
+
+  it('resolves the active section from the URL alone on a fresh load (hard refresh / deep link)', async () => {
+    // 'catalog-list' (the nav item) has path /catalogs; 'catalog-view' (a detail page,
+    // never itself a nav item) has path /catalogs/:id — simulating loading
+    // http://localhost/catalogs/<uuid> directly, with no prior in-app navigation to
+    // inherit state from.
+    const router = createTestRouter();
+    await router.push({ name: 'catalog-view', params: { id: 'some-uuid' } });
+    await router.isReady();
+
+    const wrapper = mountNav(router);
+
+    const controlDefinitionsCategory = wrapper
+      .findAllComponents(SideNavCategory)
+      .find((category) => category.props('title') === 'Control Definitions');
+    const catalogsLink = wrapper
+      .findAllComponents(SideNavLink)
+      .find(
+        (link) =>
+          (link.props('to') as { name?: string } | undefined)?.name ===
+          'catalog-list',
+      );
+
+    expect(controlDefinitionsCategory?.props('active')).toBe(true);
+    expect(controlDefinitionsCategory?.props('open')).toBe(true);
+    expect(catalogsLink?.props('active')).toBe(true);
+  });
+
+  it('keeps the previous section highlighted through an unlisted route, and only switches once a genuinely different section is reached', async () => {
+    const router = createTestRouter();
+    await router.push({ name: 'catalog-list' }); // a child of Control Definitions
+    await router.isReady();
+
+    const wrapper = mountNav(router);
+
+    const findCategory = (title: string) =>
+      wrapper
+        .findAllComponents(SideNavCategory)
+        .find((category) => category.props('title') === title);
+    const findChildLink = (routeName: string) =>
+      wrapper
+        .findAllComponents(SideNavLink)
+        .find(
+          (link) =>
+            (link.props('to') as { name?: string } | undefined)?.name ===
+            routeName,
+        );
+
+    expect(findCategory('Control Definitions')?.props('active')).toBe(true);
+    expect(findChildLink('catalog-list')?.props('active')).toBe(true);
+
+    // An in-page button (e.g. "New Catalog") pushes to a route that was never
+    // registered as a nav child anywhere, one level down from the list page.
+    await router.push({ name: 'catalog-create' });
+    await wrapper.vm.$nextTick();
+
+    expect(findCategory('Control Definitions')?.props('active')).toBe(true);
+    expect(findCategory('Control Definitions')?.props('open')).toBe(true);
+    expect(findChildLink('catalog-list')?.props('active')).toBe(true);
+
+    // Only a route that genuinely belongs to a different nav entry moves the highlight —
+    // at either level.
+    await router.push({ name: 'workflow:index' });
+    await wrapper.vm.$nextTick();
+
+    expect(findCategory('Control Definitions')?.props('active')).toBe(false);
+    expect(findChildLink('catalog-list')?.props('active')).toBe(false);
+    expect(findCategory('Workflows')?.props('active')).toBe(true);
+  });
+});
diff --git a/src/views/catalog/CatalogControl.vue b/src/views/catalog/CatalogControl.vue
index 64e49bca..065c148b 100644
--- a/src/views/catalog/CatalogControl.vue
+++ b/src/views/catalog/CatalogControl.vue
@@ -1,5 +1,7 @@
 <template>
-  <CollapsableGroup>
+  <CollapsableGroup
+    :persist-key="`catalog:${catalog.uuid}:control:${control.id}`"
+  >
     <template #header>
       <div class="py-3 px-4 flex flex-wrap items-center gap-3">
         <span
@@ -161,43 +163,44 @@
           @deleted="onChildDeleted"
         />
       </div>
-      <div class="mt-4">
-        <ControlCreateModal
-          @created="controlCreated"
-          :catalog="catalog"
-          :parent-control="props.control"
-          v-model="showControlForm"
-        />
-        <ControlPartEditModal
-          v-model="showEditStatement"
-          :catalog="catalog"
-          :control="props.control"
-          type="statement"
-          @updated="onUpdated"
-        />
-        <ControlPartEditModal
-          v-model="showEditObjective"
-          :catalog="catalog"
-          :control="props.control"
-          type="assessment-objective"
-          @updated="onUpdated"
-        />
-        <ControlPartEditModal
-          v-model="showEditGuidance"
-          :catalog="catalog"
-          :control="props.control"
-          type="guidance"
-          @updated="onUpdated"
-        />
-        <ControlEditModal
-          v-model="showEdit"
-          :catalog="catalog"
-          :control="props.control"
-          @updated="onUpdated"
-        />
-      </div>
     </div>
   </CollapsableGroup>
+  <!-- Outside CollapsableGroup's body, which unmounts (v-if) while collapsed: these modals
+       must stay mounted regardless of expand state, since a header button can open one
+       (e.g. Edit) before the control has ever been expanded. -->
+  <ControlCreateModal
+    @created="controlCreated"
+    :catalog="catalog"
+    :parent-control="props.control"
+    v-model="showControlForm"
+  />
+  <ControlPartEditModal
+    v-model="showEditStatement"
+    :catalog="catalog"
+    :control="props.control"
+    type="statement"
+    @updated="onUpdated"
+  />
+  <ControlPartEditModal
+    v-model="showEditObjective"
+    :catalog="catalog"
+    :control="props.control"
+    type="assessment-objective"
+    @updated="onUpdated"
+  />
+  <ControlPartEditModal
+    v-model="showEditGuidance"
+    :catalog="catalog"
+    :control="props.control"
+    type="guidance"
+    @updated="onUpdated"
+  />
+  <ControlEditModal
+    v-model="showEdit"
+    :catalog="catalog"
+    :control="props.control"
+    @updated="onUpdated"
+  />
 </template>
 <script setup lang="ts">
 import { computed, ref } from 'vue';
diff --git a/src/views/catalog/CatalogGroup.vue b/src/views/catalog/CatalogGroup.vue
index 1a830f31..13fab231 100644
--- a/src/views/catalog/CatalogGroup.vue
+++ b/src/views/catalog/CatalogGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <CollapsableGroup>
+  <CollapsableGroup :persist-key="`catalog:${catalog.uuid}:group:${group.id}`">
     <template #header>
       <div class="py-4 px-4 flex flex-wrap items-center gap-3">
         <span
@@ -112,34 +112,35 @@
           @deleted="onChildGroupDeleted"
         />
       </div>
-      <div class="mt-4">
-        <GroupCreateModal
-          @created="groupCreated"
-          :catalog="catalog"
-          :parent="props.group"
-          v-model="showGroupForm"
-        />
-        <GroupDescriptionModal
-          v-model="showEditDescription"
-          :catalog="catalog"
-          :group="props.group"
-          @updated="onUpdated"
-        />
-        <GroupEditModal
-          v-model="showEdit"
-          :catalog="catalog"
-          :group="props.group"
-          @updated="onUpdated"
-        />
-        <ControlCreateModal
-          @created="controlCreated"
-          :catalog="catalog"
-          :parent-group="props.group"
-          v-model="showControlForm"
-        />
-      </div>
     </div>
   </CollapsableGroup>
+  <!-- Outside CollapsableGroup's body, which unmounts (v-if) while collapsed: these modals
+       must stay mounted regardless of expand state, since a header button can open one
+       (e.g. Edit) before the group has ever been expanded. -->
+  <GroupCreateModal
+    @created="groupCreated"
+    :catalog="catalog"
+    :parent="props.group"
+    v-model="showGroupForm"
+  />
+  <GroupDescriptionModal
+    v-model="showEditDescription"
+    :catalog="catalog"
+    :group="props.group"
+    @updated="onUpdated"
+  />
+  <GroupEditModal
+    v-model="showEdit"
+    :catalog="catalog"
+    :group="props.group"
+    @updated="onUpdated"
+  />
+  <ControlCreateModal
+    @created="controlCreated"
+    :catalog="catalog"
+    :parent-group="props.group"
+    v-model="showControlForm"
+  />
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
diff --git a/src/views/catalog/__tests__/CatalogGroup.spec.ts b/src/views/catalog/__tests__/CatalogGroup.spec.ts
new file mode 100644
index 00000000..57cee183
--- /dev/null
+++ b/src/views/catalog/__tests__/CatalogGroup.spec.ts
@@ -0,0 +1,93 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import CatalogGroup from '../CatalogGroup.vue';
+import { useCollapsibleGroupsStore } from '@/stores/collapsibleGroups';
+import type { Catalog, Group } from '@/oscal';
+
+vi.mock('@/composables/axios', () => ({
+  useDataApi: () => ({
+    data: { value: [] },
+    execute: vi.fn(),
+    isLoading: { value: false },
+    error: { value: null },
+  }),
+}));
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({ add: vi.fn() }),
+}));
+
+vi.mock('@/composables/usePermissions', () => ({
+  usePermissions: () => ({ can: () => true, permissionTooltip: () => '' }),
+}));
+
+vi.mock('@/utils/delete-dialog', () => ({
+  useDeleteConfirmationDialog: () => ({ confirmDeleteDialog: vi.fn() }),
+}));
+
+const catalog: Catalog = {
+  uuid: 'catalog-1',
+  metadata: { title: 'Catalog One' },
+} as Catalog;
+
+const group: Group = {
+  id: 'ac',
+  title: 'Access Control',
+} as Group;
+
+function mountGroup() {
+  return mount(CatalogGroup, {
+    props: { catalog, group },
+    global: {
+      stubs: {
+        PartDisplayEditor: true,
+        GroupCreateModal: { template: '<div />' },
+        GroupDescriptionModal: { template: '<div />' },
+        ControlCreateModal: { template: '<div />' },
+        GroupEditModal: {
+          props: ['modelValue'],
+          template:
+            "<div data-testid=\"group-edit-modal\">{{ modelValue ? 'open' : 'closed' }}</div>",
+        },
+      },
+    },
+  });
+}
+
+describe('CatalogGroup', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    localStorage.clear();
+  });
+
+  it('opens the edit modal on the first Edit click, even before the group has ever been expanded', async () => {
+    const wrapper = mountGroup();
+
+    // Collapsed by default — CollapsableGroup's body (where the modal used to live,
+    // conditionally mounted) isn't in the DOM yet at this point.
+    const editButton = wrapper
+      .findAll('button')
+      .find((button) => button.text() === 'Edit')!;
+    await editButton.trigger('click');
+
+    const modal = wrapper.find('[data-testid="group-edit-modal"]');
+    expect(modal.exists()).toBe(true);
+    expect(modal.text()).toBe('open');
+  });
+
+  it('keeps a manually expanded group open across a hard refresh', async () => {
+    const wrapper = mountGroup();
+
+    // Click the CollapsableGroup header (not a button within it) to expand it.
+    await wrapper.find('.cursor-pointer').trigger('click');
+
+    const key = `catalog:${catalog.uuid}:group:${group.id}`;
+    expect(useCollapsibleGroupsStore().isOpen(key)).toBe(true);
+
+    // Simulate a hard refresh: a brand-new Pinia instance (so the store itself is
+    // rebuilt from scratch) backed by the same localStorage.
+    setActivePinia(createPinia());
+    expect(useCollapsibleGroupsStore().isOpen(key)).toBe(true);
+  });
+});
diff --git a/src/views/control-implementations/partials/ControlStatementMetadata.vue b/src/views/control-implementations/partials/ControlStatementMetadata.vue
index 24a5afd3..8c79f901 100644
--- a/src/views/control-implementations/partials/ControlStatementMetadata.vue
+++ b/src/views/control-implementations/partials/ControlStatementMetadata.vue
@@ -55,14 +55,6 @@ function formatLinks(links: Statement['links']): string {
       />
       <p class="text-sm">{{ statement.remarks || 'None' }}</p>
     </div>
-    <div>
-      <TooltipTitle
-        text="Description"
-        tooltip-key="statement.description"
-        underline-class="text-sm font-medium text-gray-500 underline decoration-dotted cursor-help"
-      />
-      <p class="text-sm">{{ statement.description || 'None' }}</p>
-    </div>
     <div>
       <TooltipTitle
         text="Props"
diff --git a/src/views/dashboard/IndexView.vue b/src/views/dashboard/IndexView.vue
index 21272942..b46e5bdb 100644
--- a/src/views/dashboard/IndexView.vue
+++ b/src/views/dashboard/IndexView.vue
@@ -27,7 +27,66 @@
 
   <div
     v-if="dashboards && dashboards.length > 0"
-    class="mt-6 overflow-hidden rounded-lg border border-ccf-300 bg-white shadow dark:border-slate-700 dark:bg-slate-900"
+    class="mt-6 flex flex-wrap items-center gap-x-6 gap-y-3"
+  >
+    <div class="flex items-center gap-3">
+      <label
+        for="scope-filter"
+        class="text-sm font-medium text-gray-700 dark:text-slate-300"
+      >
+        Scope
+      </label>
+      <Select
+        id="scope-filter"
+        v-model="selectedScope"
+        :options="scopeFilterOptions"
+        optionLabel="label"
+        optionValue="value"
+        class="w-64"
+        data-testid="scope-filter"
+      />
+    </div>
+    <div class="flex items-center gap-3">
+      <label
+        for="control-filter"
+        class="text-sm font-medium text-gray-700 dark:text-slate-300"
+      >
+        Control
+      </label>
+      <Select
+        id="control-filter"
+        v-model="selectedControl"
+        :options="controlFilterOptions"
+        optionLabel="label"
+        optionValue="value"
+        filter
+        class="w-64"
+        data-testid="control-filter"
+      />
+    </div>
+    <div class="flex items-center gap-3">
+      <label
+        for="component-filter"
+        class="text-sm font-medium text-gray-700 dark:text-slate-300"
+      >
+        Component
+      </label>
+      <Select
+        id="component-filter"
+        v-model="selectedComponent"
+        :options="componentFilterOptions"
+        optionLabel="label"
+        optionValue="value"
+        filter
+        class="w-64"
+        data-testid="component-filter"
+      />
+    </div>
+  </div>
+
+  <div
+    v-if="filteredDashboards.length > 0"
+    class="mt-4 overflow-hidden rounded-lg border border-ccf-300 bg-white shadow dark:border-slate-700 dark:bg-slate-900"
   >
     <table class="table-auto w-full dark:text-slate-300">
       <thead class="bg-gray-50 dark:bg-slate-800">
@@ -62,7 +121,7 @@
       </thead>
       <tbody>
         <template
-          v-for="dashboard in dashboards"
+          v-for="dashboard in filteredDashboards"
           :key="dashboardKey(dashboard)"
         >
           <tr
@@ -160,6 +219,19 @@
     </table>
   </div>
 
+  <Message
+    v-else-if="dashboards && dashboards.length > 0"
+    severity="warn"
+    variant="outlined"
+    class="mt-4"
+  >
+    <h4 class="font-bold">No Filters Match These Filters</h4>
+    <p>
+      Try a different scope, control, or component, or reset them all to "All"
+      to see every filter.
+    </p>
+  </Message>
+
   <Message v-else severity="warn" variant="outlined" class="mt-6">
     <h4 class="font-bold">No Filters Found</h4>
     <p>
@@ -192,6 +264,7 @@ import PrimaryButton from '@/volt/PrimaryButton.vue';
 import SecondaryButton from '@/volt/SecondaryButton.vue';
 import Chip from '@/volt/Chip.vue';
 import Message from '@/volt/Message.vue';
+import Select from '@/volt/Select.vue';
 import { useDataApi } from '@/composables/axios';
 import { usePermissions } from '@/composables/usePermissions';
 import { RESOURCES, ACTIONS } from '@/constants/permissions';
@@ -225,6 +298,83 @@ const sspTitleById = computed(
     ),
 );
 
+// 'all' shows every filter regardless of scope; null matches only unscoped (Global)
+// filters; any other value matches filters scoped to that SSP.
+const selectedScope = ref<string | null>('all');
+
+const scopeFilterOptions = computed(() => [
+  { label: 'All Scopes', value: 'all' },
+  { label: 'Global', value: null },
+  ...(systemSecurityPlans.value ?? []).map((ssp) => ({
+    label: ssp.metadata.title,
+    value: ssp.uuid,
+  })),
+]);
+
+// 'all' shows filters with any (or no) controls/components; any other value matches
+// filters that include that specific control/component.
+const selectedControl = ref<string>('all');
+const selectedComponent = ref<string>('all');
+
+const controlFilterOptions = computed(() => {
+  const controlsById = new Map<string, string>();
+  for (const dashboard of dashboards.value ?? []) {
+    for (const control of dashboard.controls ?? []) {
+      controlsById.set(control.id, control.title ?? control.id);
+    }
+  }
+  return [
+    { label: 'All Controls', value: 'all' },
+    ...Array.from(controlsById, ([id, title]) => ({
+      label: `${id} — ${title}`,
+      value: id,
+    })).sort((a, b) => a.label.localeCompare(b.label)),
+  ];
+});
+
+const componentFilterOptions = computed(() => {
+  const componentsByUuid = new Map<string, string>();
+  for (const dashboard of dashboards.value ?? []) {
+    for (const component of dashboard.components ?? []) {
+      componentsByUuid.set(component.uuid, component.title ?? component.uuid);
+    }
+  }
+  return [
+    { label: 'All Components', value: 'all' },
+    ...Array.from(componentsByUuid, ([uuid, title]) => ({
+      label: title,
+      value: uuid,
+    })).sort((a, b) => a.label.localeCompare(b.label)),
+  ];
+});
+
+const filteredDashboards = computed(() => {
+  return (dashboards.value ?? [])
+    .filter((dashboard) => {
+      if (selectedScope.value === 'all') {
+        return true;
+      }
+      if (selectedScope.value === null) {
+        return !dashboard.sspId;
+      }
+      return dashboard.sspId === selectedScope.value;
+    })
+    .filter(
+      (dashboard) =>
+        selectedControl.value === 'all' ||
+        (dashboard.controls ?? []).some(
+          (control) => control.id === selectedControl.value,
+        ),
+    )
+    .filter(
+      (dashboard) =>
+        selectedComponent.value === 'all' ||
+        (dashboard.components ?? []).some(
+          (component) => component.uuid === selectedComponent.value,
+        ),
+    );
+});
+
 function dashboardKey(dashboard: Dashboard): string {
   return dashboard.id ?? dashboard.uuid ?? dashboard.name;
 }
diff --git a/src/views/dashboard/__tests__/IndexView.spec.ts b/src/views/dashboard/__tests__/IndexView.spec.ts
index bff3423d..97c0f684 100644
--- a/src/views/dashboard/__tests__/IndexView.spec.ts
+++ b/src/views/dashboard/__tests__/IndexView.spec.ts
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { shallowRef } from 'vue';
 import type { Dashboard } from '@/stores/filters';
-import type { SystemSecurityPlan } from '@/oscal';
+import type { Control, SystemComponent, SystemSecurityPlan } from '@/oscal';
 
 const dashboards = shallowRef<Dashboard[]>([]);
 const systemSecurityPlans = shallowRef<SystemSecurityPlan[]>([]);
@@ -59,7 +59,11 @@ vi.mock('@/views/dashboard/partials/FilterEditModal.vue', () => ({
 
 import IndexView from '../IndexView.vue';
 
-function makeDashboard(name: string, sspId: string | null = null): Dashboard {
+function makeDashboard(
+  name: string,
+  sspId: string | null = null,
+  overrides: Partial<Pick<Dashboard, 'controls' | 'components'>> = {},
+): Dashboard {
   return {
     id: name,
     uuid: name,
@@ -68,6 +72,7 @@ function makeDashboard(name: string, sspId: string | null = null): Dashboard {
     filter: {} as Dashboard['filter'],
     controls: [],
     components: [],
+    ...overrides,
   };
 }
 
@@ -78,6 +83,14 @@ function makeSsp(uuid: string, title: string): SystemSecurityPlan {
   } as SystemSecurityPlan;
 }
 
+function makeControl(id: string, title: string): Control {
+  return { id, title } as Control;
+}
+
+function makeComponent(uuid: string, title: string): SystemComponent {
+  return { uuid, title } as SystemComponent;
+}
+
 function mountView() {
   return mount(IndexView, {
     global: {
@@ -95,6 +108,22 @@ function mountView() {
           template: '<button @click="$emit(\'click\')"><slot /></button>',
         },
         RouterLink: { props: ['to'], template: '<a><slot /></a>' },
+        // A native <select> would coerce the `null` (Global) option's value to the
+        // string "null" on round-trip; emit the real option value instead via buttons.
+        // There are three Select instances on the page (scope/control/component), so
+        // options are keyed by the select's own id to keep them distinguishable.
+        Select: {
+          props: ['id', 'modelValue', 'options'],
+          emits: ['update:modelValue'],
+          template: `<div>
+            <button
+              v-for="option in options"
+              :key="String(option.value)"
+              :data-testid="id + '-option-' + String(option.value)"
+              @click="$emit('update:modelValue', option.value)"
+            >{{ option.label }}</button>
+          </div>`,
+        },
       },
     },
   });
@@ -128,6 +157,205 @@ describe('Dashboard IndexView (Filters table)', () => {
     expect(wrapper.text()).toContain('No Filters Found');
   });
 
+  it('filters the filter list by scope', async () => {
+    dashboards.value = [
+      makeDashboard('Global filter'),
+      makeDashboard('Payments filter', 'ssp-1'),
+      makeDashboard('Billing filter', 'ssp-2'),
+    ];
+    systemSecurityPlans.value = [
+      makeSsp('ssp-1', 'Payments SSP'),
+      makeSsp('ssp-2', 'Billing SSP'),
+    ];
+
+    const wrapper = mountView();
+
+    // Defaults to showing every filter, regardless of scope.
+    expect(
+      wrapper.find('[data-testid="filter-row-Global filter"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="filter-row-Payments filter"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="filter-row-Billing filter"]').exists(),
+    ).toBe(true);
+
+    // Selecting "Global" shows only unscoped filters.
+    await wrapper
+      .find('[data-testid="scope-filter-option-null"]')
+      .trigger('click');
+    expect(
+      wrapper.find('[data-testid="filter-row-Global filter"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="filter-row-Payments filter"]').exists(),
+    ).toBe(false);
+    expect(
+      wrapper.find('[data-testid="filter-row-Billing filter"]').exists(),
+    ).toBe(false);
+
+    // Selecting a specific SSP shows only that SSP's filters.
+    await wrapper
+      .find('[data-testid="scope-filter-option-ssp-1"]')
+      .trigger('click');
+    expect(
+      wrapper.find('[data-testid="filter-row-Global filter"]').exists(),
+    ).toBe(false);
+    expect(
+      wrapper.find('[data-testid="filter-row-Payments filter"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="filter-row-Billing filter"]').exists(),
+    ).toBe(false);
+
+    // Selecting "All Scopes" again restores every filter.
+    await wrapper
+      .find('[data-testid="scope-filter-option-all"]')
+      .trigger('click');
+    expect(
+      wrapper.find('[data-testid="filter-row-Global filter"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="filter-row-Payments filter"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="filter-row-Billing filter"]').exists(),
+    ).toBe(true);
+  });
+
+  it('shows a distinct message when filters exist but none match the selected scope', async () => {
+    dashboards.value = [makeDashboard('Global filter')];
+    systemSecurityPlans.value = [makeSsp('ssp-1', 'Payments SSP')];
+
+    const wrapper = mountView();
+    await wrapper
+      .find('[data-testid="scope-filter-option-ssp-1"]')
+      .trigger('click');
+
+    expect(wrapper.text()).toContain('No Filters Match These Filters');
+    expect(wrapper.text()).not.toContain('No Filters Found');
+    expect(
+      wrapper.find('[data-testid="filter-row-Global filter"]').exists(),
+    ).toBe(false);
+  });
+
+  it('filters the filter list by control', async () => {
+    dashboards.value = [
+      makeDashboard('AC filter', null, {
+        controls: [makeControl('AC-1', 'Access Control Policy')],
+      }),
+      makeDashboard('AU filter', null, {
+        controls: [makeControl('AU-1', 'Audit Policy')],
+      }),
+      makeDashboard('No controls filter'),
+    ];
+
+    const wrapper = mountView();
+
+    expect(
+      wrapper.find('[data-testid="control-filter-option-AC-1"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="control-filter-option-AU-1"]').exists(),
+    ).toBe(true);
+
+    await wrapper
+      .find('[data-testid="control-filter-option-AC-1"]')
+      .trigger('click');
+
+    expect(wrapper.find('[data-testid="filter-row-AC filter"]').exists()).toBe(
+      true,
+    );
+    expect(wrapper.find('[data-testid="filter-row-AU filter"]').exists()).toBe(
+      false,
+    );
+    expect(
+      wrapper.find('[data-testid="filter-row-No controls filter"]').exists(),
+    ).toBe(false);
+
+    await wrapper
+      .find('[data-testid="control-filter-option-all"]')
+      .trigger('click');
+
+    expect(wrapper.find('[data-testid="filter-row-AC filter"]').exists()).toBe(
+      true,
+    );
+    expect(wrapper.find('[data-testid="filter-row-AU filter"]').exists()).toBe(
+      true,
+    );
+    expect(
+      wrapper.find('[data-testid="filter-row-No controls filter"]').exists(),
+    ).toBe(true);
+  });
+
+  it('filters the filter list by component', async () => {
+    dashboards.value = [
+      makeDashboard('API filter', null, {
+        components: [makeComponent('comp-api', 'API Gateway')],
+      }),
+      makeDashboard('DB filter', null, {
+        components: [makeComponent('comp-db', 'Database')],
+      }),
+    ];
+
+    const wrapper = mountView();
+
+    await wrapper
+      .find('[data-testid="component-filter-option-comp-db"]')
+      .trigger('click');
+
+    expect(wrapper.find('[data-testid="filter-row-API filter"]').exists()).toBe(
+      false,
+    );
+    expect(wrapper.find('[data-testid="filter-row-DB filter"]').exists()).toBe(
+      true,
+    );
+  });
+
+  it('combines scope, control, and component filters', async () => {
+    dashboards.value = [
+      makeDashboard('Match', 'ssp-1', {
+        controls: [makeControl('AC-1', 'Access Control Policy')],
+        components: [makeComponent('comp-api', 'API Gateway')],
+      }),
+      makeDashboard('Wrong scope', 'ssp-2', {
+        controls: [makeControl('AC-1', 'Access Control Policy')],
+        components: [makeComponent('comp-api', 'API Gateway')],
+      }),
+      makeDashboard('Wrong control', 'ssp-1', {
+        controls: [makeControl('AU-1', 'Audit Policy')],
+        components: [makeComponent('comp-api', 'API Gateway')],
+      }),
+    ];
+    systemSecurityPlans.value = [
+      makeSsp('ssp-1', 'Payments SSP'),
+      makeSsp('ssp-2', 'Billing SSP'),
+    ];
+
+    const wrapper = mountView();
+
+    await wrapper
+      .find('[data-testid="scope-filter-option-ssp-1"]')
+      .trigger('click');
+    await wrapper
+      .find('[data-testid="control-filter-option-AC-1"]')
+      .trigger('click');
+    await wrapper
+      .find('[data-testid="component-filter-option-comp-api"]')
+      .trigger('click');
+
+    expect(wrapper.find('[data-testid="filter-row-Match"]').exists()).toBe(
+      true,
+    );
+    expect(
+      wrapper.find('[data-testid="filter-row-Wrong scope"]').exists(),
+    ).toBe(false);
+    expect(
+      wrapper.find('[data-testid="filter-row-Wrong control"]').exists(),
+    ).toBe(false);
+  });
+
   it('loads the dashboard chart only when a row is expanded', async () => {
     dashboards.value = [makeDashboard('Global filter')];
     const wrapper = mountView();