diff --git a/app/api/dtos/ForceGraphAttributesDtoSchema.ts b/app/api/dtos/ForceGraphAttributesDtoSchema.ts
index 1412054..eeadc71 100644
--- a/app/api/dtos/ForceGraphAttributesDtoSchema.ts
+++ b/app/api/dtos/ForceGraphAttributesDtoSchema.ts
@@ -1,8 +1,7 @@
-import { useRef } from 'react';
-
+import { useRef } from 'react'; 
+import { useSelectiveContextListenerNumber } from '../../generic/components/selective-context/selective-context-manager-number';
 import { useNormalizeForceRange } from '../../graphing/components/force-attributes-meta-data';
 import { z } from 'zod';
-import { useSelectiveContextListenerNumber } from '../../generic/components/selective-context/selective-context-manager-number';
 export const ForceGraphAttributesDtoSchema = z.object({
   id: z.number(),
   centerStrength: z.number(),
@@ -17,150 +16,101 @@ export const ForceGraphAttributesDtoSchema = z.object({
   forceYStrength: z.number(),
   forceRadialStrength: z.number(),
   forceRadialXRelative: z.number(),
-  forceRadialYRelative: z.number()
+  forceRadialYRelative: z.number(),
 });
-export type ForceGraphAttributesDto = z.infer<
-  typeof ForceGraphAttributesDtoSchema
->;
-export function useForceAttributeListeners(uniqueGraphName: string) {
-  const { currentState: collideStrength } = useSelectiveContextListenerNumber(
-    `${uniqueGraphName}-collideStrength`,
-    `${uniqueGraphName}-collideStrength-listener`,
-    100
-  );
-  const { currentState: centerStrength } = useSelectiveContextListenerNumber(
-    `${uniqueGraphName}-centerStrength`,
-    `${uniqueGraphName}-centerStrength-listener`,
-    100
-  );
-  const { currentState: manyBodyTheta } = useSelectiveContextListenerNumber(
-    `${uniqueGraphName}-manyBodyTheta`,
-    `${uniqueGraphName}-manyBodyTheta-listener`,
-    100
-  );
-  const { currentState: forceRadialYRelative } =
-    useSelectiveContextListenerNumber(
-      `${uniqueGraphName}-forceRadialYRelative`,
-      `${uniqueGraphName}-forceRadialYRelative-listener`,
-      100
-    );
-  const { currentState: forceYStrength } = useSelectiveContextListenerNumber(
-    `${uniqueGraphName}-forceYStrength`,
-    `${uniqueGraphName}-forceYStrength-listener`,
-    100
-  );
-  const { currentState: manyBodyStrength } = useSelectiveContextListenerNumber(
-    `${uniqueGraphName}-manyBodyStrength`,
-    `${uniqueGraphName}-manyBodyStrength-listener`,
-    100
-  );
-  const { currentState: forceXStrength } = useSelectiveContextListenerNumber(
-    `${uniqueGraphName}-forceXStrength`,
-    `${uniqueGraphName}-forceXStrength-listener`,
-    100
-  );
-  const { currentState: linkDistance } = useSelectiveContextListenerNumber(
-    `${uniqueGraphName}-linkDistance`,
-    `${uniqueGraphName}-linkDistance-listener`,
-    100
-  );
-  const { currentState: manyBodyMinDistance } =
-    useSelectiveContextListenerNumber(
-      `${uniqueGraphName}-manyBodyMinDistance`,
-      `${uniqueGraphName}-manyBodyMinDistance-listener`,
-      100
-    );
-  const { currentState: manyBodyMaxDistance } =
-    useSelectiveContextListenerNumber(
-      `${uniqueGraphName}-manyBodyMaxDistance`,
-      `${uniqueGraphName}-manyBodyMaxDistance-listener`,
-      100
-    );
-  const { currentState: forceRadialXRelative } =
-    useSelectiveContextListenerNumber(
-      `${uniqueGraphName}-forceRadialXRelative`,
-      `${uniqueGraphName}-forceRadialXRelative-listener`,
-      100
-    );
-  const { currentState: forceRadialStrength } =
-    useSelectiveContextListenerNumber(
-      `${uniqueGraphName}-forceRadialStrength`,
-      `${uniqueGraphName}-forceRadialStrength-listener`,
-      100
-    );
-  const { currentState: linkStrength } = useSelectiveContextListenerNumber(
-    `${uniqueGraphName}-linkStrength`,
-    `${uniqueGraphName}-linkStrength-listener`,
-    100
-  );
+export type ForceGraphAttributesDto = z.infer<typeof ForceGraphAttributesDtoSchema>;
+export function useForceAttributeListeners(uniqueGraphName: string){
+const { currentState: collideStrength } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-collideStrength`,
+  `${uniqueGraphName}-collideStrength-listener`,
+  100
+);
+const { currentState: centerStrength } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-centerStrength`,
+  `${uniqueGraphName}-centerStrength-listener`,
+  100
+);
+const { currentState: manyBodyTheta } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-manyBodyTheta`,
+  `${uniqueGraphName}-manyBodyTheta-listener`,
+  100
+);
+const { currentState: forceRadialYRelative } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-forceRadialYRelative`,
+  `${uniqueGraphName}-forceRadialYRelative-listener`,
+  100
+);
+const { currentState: forceYStrength } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-forceYStrength`,
+  `${uniqueGraphName}-forceYStrength-listener`,
+  100
+);
+const { currentState: manyBodyStrength } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-manyBodyStrength`,
+  `${uniqueGraphName}-manyBodyStrength-listener`,
+  100
+);
+const { currentState: forceXStrength } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-forceXStrength`,
+  `${uniqueGraphName}-forceXStrength-listener`,
+  100
+);
+const { currentState: linkDistance } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-linkDistance`,
+  `${uniqueGraphName}-linkDistance-listener`,
+  100
+);
+const { currentState: manyBodyMinDistance } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-manyBodyMinDistance`,
+  `${uniqueGraphName}-manyBodyMinDistance-listener`,
+  100
+);
+const { currentState: manyBodyMaxDistance } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-manyBodyMaxDistance`,
+  `${uniqueGraphName}-manyBodyMaxDistance-listener`,
+  100
+);
+const { currentState: forceRadialXRelative } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-forceRadialXRelative`,
+  `${uniqueGraphName}-forceRadialXRelative-listener`,
+  100
+);
+const { currentState: forceRadialStrength } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-forceRadialStrength`,
+  `${uniqueGraphName}-forceRadialStrength-listener`,
+  100
+);
+const { currentState: linkStrength } = useSelectiveContextListenerNumber(
+              `${uniqueGraphName}-linkStrength`,
+  `${uniqueGraphName}-linkStrength-listener`,
+  100
+);
 
-  const collideStrengthNormalized = useNormalizeForceRange(collideStrength);
-  const collideStrengthRef = useRef(collideStrengthNormalized);
-  const centerStrengthNormalized = useNormalizeForceRange(centerStrength);
-  const centerStrengthRef = useRef(centerStrengthNormalized);
-  const manyBodyThetaNormalized = useNormalizeForceRange(manyBodyTheta);
-  const manyBodyThetaRef = useRef(manyBodyThetaNormalized);
-  const forceRadialYRelativeNormalized =
-    useNormalizeForceRange(forceRadialYRelative);
-  const forceRadialYRelativeRef = useRef(forceRadialYRelativeNormalized);
-  const forceYStrengthNormalized = useNormalizeForceRange(forceYStrength);
-  const forceYStrengthRef = useRef(forceYStrengthNormalized);
-  const manyBodyStrengthNormalized = useNormalizeForceRange(
-    manyBodyStrength,
-    'manyBodyStrength'
-  );
-  const manyBodyStrengthRef = useRef(manyBodyStrengthNormalized);
-  const forceXStrengthNormalized = useNormalizeForceRange(forceXStrength);
-  const forceXStrengthRef = useRef(forceXStrengthNormalized);
-  const linkDistanceNormalized = useNormalizeForceRange(
-    linkDistance,
-    'linkDistance'
-  );
-  const linkDistanceRef = useRef(linkDistanceNormalized);
-  const manyBodyMinDistanceNormalized = useNormalizeForceRange(
-    manyBodyMinDistance,
-    'manyBodyMinDistance'
-  );
-  const manyBodyMinDistanceRef = useRef(manyBodyMinDistanceNormalized);
-  const manyBodyMaxDistanceNormalized = useNormalizeForceRange(
-    manyBodyMaxDistance,
-    'manyBodyMaxDistance'
-  );
-  const manyBodyMaxDistanceRef = useRef(manyBodyMaxDistanceNormalized);
-  const forceRadialXRelativeNormalized =
-    useNormalizeForceRange(forceRadialXRelative);
-  const forceRadialXRelativeRef = useRef(forceRadialXRelativeNormalized);
-  const forceRadialStrengthNormalized =
-    useNormalizeForceRange(forceRadialStrength);
-  const forceRadialStrengthRef = useRef(forceRadialStrengthNormalized);
-  const linkStrengthNormalized = useNormalizeForceRange(linkStrength);
-  const linkStrengthRef = useRef(linkStrengthNormalized);
-  return {
-    collideStrengthNormalized,
-    collideStrengthRef,
-    centerStrengthNormalized,
-    centerStrengthRef,
-    manyBodyThetaNormalized,
-    manyBodyThetaRef,
-    forceRadialYRelativeNormalized,
-    forceRadialYRelativeRef,
-    forceYStrengthNormalized,
-    forceYStrengthRef,
-    manyBodyStrengthNormalized,
-    manyBodyStrengthRef,
-    forceXStrengthNormalized,
-    forceXStrengthRef,
-    linkDistanceNormalized,
-    linkDistanceRef,
-    manyBodyMinDistanceNormalized,
-    manyBodyMinDistanceRef,
-    manyBodyMaxDistanceNormalized,
-    manyBodyMaxDistanceRef,
-    forceRadialXRelativeNormalized,
-    forceRadialXRelativeRef,
-    forceRadialStrengthNormalized,
-    forceRadialStrengthRef,
-    linkStrengthNormalized,
-    linkStrengthRef
-  };
+const collideStrengthNormalized = useNormalizeForceRange(collideStrength); 
+const collideStrengthRef = useRef(collideStrengthNormalized); 
+const centerStrengthNormalized = useNormalizeForceRange(centerStrength); 
+const centerStrengthRef = useRef(centerStrengthNormalized); 
+const manyBodyThetaNormalized = useNormalizeForceRange(manyBodyTheta); 
+const manyBodyThetaRef = useRef(manyBodyThetaNormalized); 
+const forceRadialYRelativeNormalized = useNormalizeForceRange(forceRadialYRelative); 
+const forceRadialYRelativeRef = useRef(forceRadialYRelativeNormalized); 
+const forceYStrengthNormalized = useNormalizeForceRange(forceYStrength); 
+const forceYStrengthRef = useRef(forceYStrengthNormalized); 
+const manyBodyStrengthNormalized = useNormalizeForceRange(manyBodyStrength, 'manyBodyStrength'); 
+const manyBodyStrengthRef = useRef(manyBodyStrengthNormalized); 
+const forceXStrengthNormalized = useNormalizeForceRange(forceXStrength); 
+const forceXStrengthRef = useRef(forceXStrengthNormalized); 
+const linkDistanceNormalized = useNormalizeForceRange(linkDistance, 'linkDistance'); 
+const linkDistanceRef = useRef(linkDistanceNormalized); 
+const manyBodyMinDistanceNormalized = useNormalizeForceRange(manyBodyMinDistance, 'manyBodyMinDistance'); 
+const manyBodyMinDistanceRef = useRef(manyBodyMinDistanceNormalized); 
+const manyBodyMaxDistanceNormalized = useNormalizeForceRange(manyBodyMaxDistance, 'manyBodyMaxDistance'); 
+const manyBodyMaxDistanceRef = useRef(manyBodyMaxDistanceNormalized); 
+const forceRadialXRelativeNormalized = useNormalizeForceRange(forceRadialXRelative); 
+const forceRadialXRelativeRef = useRef(forceRadialXRelativeNormalized); 
+const forceRadialStrengthNormalized = useNormalizeForceRange(forceRadialStrength); 
+const forceRadialStrengthRef = useRef(forceRadialStrengthNormalized); 
+const linkStrengthNormalized = useNormalizeForceRange(linkStrength); 
+const linkStrengthRef = useRef(linkStrengthNormalized); 
+    return { collideStrengthNormalized, collideStrengthRef, centerStrengthNormalized, centerStrengthRef, manyBodyThetaNormalized, manyBodyThetaRef, forceRadialYRelativeNormalized, forceRadialYRelativeRef, forceYStrengthNormalized, forceYStrengthRef, manyBodyStrengthNormalized, manyBodyStrengthRef, forceXStrengthNormalized, forceXStrengthRef, linkDistanceNormalized, linkDistanceRef, manyBodyMinDistanceNormalized, manyBodyMinDistanceRef, manyBodyMaxDistanceNormalized, manyBodyMaxDistanceRef, forceRadialXRelativeNormalized, forceRadialXRelativeRef, forceRadialStrengthNormalized, forceRadialStrengthRef, linkStrengthNormalized, linkStrengthRef,  }
 }
diff --git a/app/build-metrics/lesson-cycles/[schedule]/lesson-cycle-build-metrics-card.tsx b/app/build-metrics/lesson-cycles/[schedule]/lesson-cycle-build-metrics-card.tsx
index 7b8e52d..b57713c 100644
--- a/app/build-metrics/lesson-cycles/[schedule]/lesson-cycle-build-metrics-card.tsx
+++ b/app/build-metrics/lesson-cycles/[schedule]/lesson-cycle-build-metrics-card.tsx
@@ -9,7 +9,7 @@ import { NameIdStringTuple } from '../../../api/dtos/NameIdStringTupleSchema';
 import DynamicDimensionTimetable, {
   HeaderTransformer
 } from '../../../generic/components/tables/dynamic-dimension-timetable';
-import NameIdTupleParamsSelector from '../../../generic/components/dropdown/name-id-tuple-params-selector';
+import StringNameStringIdSearchParamsSelector from '../../../generic/components/dropdown/string-name-string-id-search-params-selector';
 
 export function LessonCycleBuildMetricsCard({
   nameIdStringTuples,
@@ -34,7 +34,7 @@ export function LessonCycleBuildMetricsCard({
         </Button>
       </Link>
       {nameIdStringTuples.length > 0 && (
-        <NameIdTupleParamsSelector
+        <StringNameStringIdSearchParamsSelector
           selectionDescriptor={'Selected Lesson Cycle: '}
           selectedProp={selectedLessonCycle}
           selectionList={nameIdStringTuples}
diff --git a/app/contexts/string-map-context/search-params-context-creator.ts b/app/contexts/string-map-context/search-params-context-creator.ts
new file mode 100644
index 0000000..53def77
--- /dev/null
+++ b/app/contexts/string-map-context/search-params-context-creator.ts
@@ -0,0 +1,14 @@
+import { createStringMapContext } from './context-creator';
+import { NameIdStringTuple } from '../../api/dtos/NameIdStringTupleSchema';
+import { useContext } from 'react';
+
+export const {
+  mapContext: SearchParamsContext,
+  dispatchContext: SearchParamsDispatchContext
+} = createStringMapContext<NameIdStringTuple>();
+
+export function useSearchParamsContext() {
+  const searchParamsMap = useContext(SearchParamsContext);
+  const dispatchSearchParams = useContext(SearchParamsDispatchContext);
+  return { searchParamsMap, dispatchSearchParams };
+}
diff --git a/app/contexts/string-map-context/search-params-context-provider.tsx b/app/contexts/string-map-context/search-params-context-provider.tsx
new file mode 100644
index 0000000..22e302c
--- /dev/null
+++ b/app/contexts/string-map-context/search-params-context-provider.tsx
@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+import { StringMapContextProvider } from './string-map-context-provider';
+import { ObjectPlaceholder } from '../../generic/components/selective-context/selective-context-manager-function';
+import {
+  SearchParamsContext,
+  SearchParamsDispatchContext
+} from './search-params-context-creator';
+import { NameIdStringTuple } from '../../api/dtos/NameIdStringTupleSchema';
+import { AccessorFunction } from '../../generic/components/tables/rating/rating-table';
+
+const Provider = StringMapContextProvider<NameIdStringTuple>
+
+const KeyAccessor: AccessorFunction<NameIdStringTuple, string> = tuple => tuple.id 
+export default function SearchParamsContextProvider({children}:PropsWithChildren) {
+  return (
+    <Provider initialEntityMap={ObjectPlaceholder} mapContext={SearchParamsContext} dispatchContext={SearchParamsDispatchContext} mapKeyAccessor={KeyAccessor}>
+      {children}
+    </Provider>
+  )
+}
\ No newline at end of file
diff --git a/app/contexts/string-map-context/string-map-context-provider.tsx b/app/contexts/string-map-context/string-map-context-provider.tsx
index a171b79..c5b38fe 100644
--- a/app/contexts/string-map-context/string-map-context-provider.tsx
+++ b/app/contexts/string-map-context/string-map-context-provider.tsx
@@ -17,10 +17,8 @@ export interface StringMapContextProviderProps<T> {
 
 export function StringMapContextProvider<T>({
   initialEntityMap,
-
   dispatchContext,
   mapContext,
-
   children,
   mapKeyAccessor
 }: StringMapContextProviderProps<T> & PropsWithChildren) {
@@ -28,11 +26,9 @@ export function StringMapContextProvider<T>({
   const MapProvider = mapContext.Provider;
   const EntityReducer = StringMapReducer<T>;
   const [currentModels, dispatch] = useReducer(EntityReducer, initialEntityMap);
-  const initialMapRef = useRef(initialEntityMap);
 
   useSyncStringMapToProps(
     initialEntityMap,
-    initialMapRef,
     dispatch,
     currentModels,
     mapKeyAccessor
diff --git a/app/contexts/string-map-context/string-map-reducer.ts b/app/contexts/string-map-context/string-map-reducer.ts
index c462f8b..641ed18 100644
--- a/app/contexts/string-map-context/string-map-reducer.ts
+++ b/app/contexts/string-map-context/string-map-reducer.ts
@@ -1,3 +1,4 @@
+'use client';
 import { Dispatch, useReducer } from 'react';
 import { Draft, produce } from 'immer';
 
diff --git a/app/contexts/string-map-context/use-sync-string-map-to-props.ts b/app/contexts/string-map-context/use-sync-string-map-to-props.ts
index 1d302e2..3855f15 100644
--- a/app/contexts/string-map-context/use-sync-string-map-to-props.ts
+++ b/app/contexts/string-map-context/use-sync-string-map-to-props.ts
@@ -1,17 +1,23 @@
+'use client';
 import { MapDispatch, MapDispatchBatch, StringMap } from './string-map-reducer';
-import { Dispatch, MutableRefObject, useEffect } from 'react';
+import { Dispatch, MutableRefObject, useEffect, useRef } from 'react';
 import { AccessorFunction } from '../../generic/components/tables/rating/rating-table';
 import { getPayloadArray } from '../../curriculum/delivery-models/use-editing-context-dependency';
+import { isNotUndefined } from '../../api/main';
 
 export function useSyncStringMapToProps<T>(
   initialEntityMap: StringMap<T>,
-  initialMapRef: MutableRefObject<StringMap<T>>,
   dispatch: Dispatch<MapDispatch<T> | MapDispatchBatch<T>>,
   currentModels: StringMap<T>,
   mapKeyAccessor: AccessorFunction<T, string>
 ) {
+  const initialMapRef = useRef(initialEntityMap);
+
   useEffect(() => {
-    if (initialMapRef.current !== initialEntityMap) {
+    if (
+      initialMapRef.current !== initialEntityMap &&
+      isNotUndefined(dispatch)
+    ) {
       const payloadArray = getPayloadArray(
         Object.values(currentModels),
         mapKeyAccessor
@@ -31,4 +37,4 @@ export function useSyncStringMapToProps<T>(
     initialMapRef,
     dispatch
   ]);
-}
\ No newline at end of file
+}
diff --git a/app/contexts/string-map-context/writeable-string-map-context-provider.tsx b/app/contexts/string-map-context/writeable-string-map-context-provider.tsx
index 08583ef..dc92b26 100644
--- a/app/contexts/string-map-context/writeable-string-map-context-provider.tsx
+++ b/app/contexts/string-map-context/writeable-string-map-context-provider.tsx
@@ -59,7 +59,6 @@ export function WriteableStringMapContextProvider<T>({
 
   useSyncStringMapToProps(
     initialEntityMap,
-    initialMapRef,
     dispatch,
     currentModels,
     mapKeyAccessor
diff --git a/app/curriculum/delivery-models/contexts/work-task-type-context-provider.tsx b/app/curriculum/delivery-models/contexts/work-task-type-context-provider.tsx
index 7087d60..2470618 100644
--- a/app/curriculum/delivery-models/contexts/work-task-type-context-provider.tsx
+++ b/app/curriculum/delivery-models/contexts/work-task-type-context-provider.tsx
@@ -1,7 +1,8 @@
 'use client';
 import {
   StringMap,
-  StringMapReducer
+  StringMapReducer,
+  useStringMapReducer
 } from '../../../contexts/string-map-context/string-map-reducer';
 import React, { PropsWithChildren, useReducer } from 'react';
 import { useSelectiveContextControllerBoolean } from '../../../generic/components/selective-context/selective-context-manager-boolean';
@@ -14,6 +15,8 @@ import { putWorkTaskTypes } from '../../../api/actions/work-task-types';
 
 import { getPayloadArray } from '../use-editing-context-dependency';
 import { UnsavedChangesModal } from '../../../generic/components/modals/unsaved-changes-modal';
+import { useSyncStringMapToProps } from '../../../contexts/string-map-context/use-sync-string-map-to-props';
+import { IdStringFromNumberAccessor } from '../../../premises/classroom-suitability/rating-table-accessor-functions';
 
 export const UnsavedWorkTaskTypeChanges = 'unsaved-workTaskType-changes';
 export const WorkTaskTypeChangesProviderListener =
@@ -27,6 +30,7 @@ export function WorkTaskTypeContextProvider({
 }: { entityMap: StringMap<WorkTaskTypeDto> } & PropsWithChildren) {
   const WorkTaskTypeReducer = StringMapReducer<WorkTaskTypeDto>;
   const [currentModels, dispatch] = useReducer(WorkTaskTypeReducer, entityMap);
+  // const [currentModels, dispatch] = useStringMapReducer<WorkTaskTypeDto>(entityMap);
   const { currentState: modalOpen, dispatchUpdate } =
     useSelectiveContextControllerBoolean(
       workTaskTypeCommitKey,
@@ -40,6 +44,13 @@ export function WorkTaskTypeContextProvider({
       false
     );
 
+  useSyncStringMapToProps(
+    entityMap,
+    dispatch,
+    currentModels,
+    IdStringFromNumberAccessor
+  );
+
   const handleClose = () => {
     dispatchUpdate({ contextKey: workTaskTypeCommitKey, value: false });
   };
diff --git a/app/generic/components/dropdown/dropdown-param.tsx b/app/generic/components/dropdown/dropdown-param.tsx
index 5b7436a..18e90ec 100644
--- a/app/generic/components/dropdown/dropdown-param.tsx
+++ b/app/generic/components/dropdown/dropdown-param.tsx
@@ -3,6 +3,7 @@ import { Menu, Transition } from '@headlessui/react';
 import { Fragment, useTransition } from 'react';
 import { ArrowRightIcon, ChevronDownIcon } from '@heroicons/react/20/solid';
 import { usePathname, useRouter } from 'next/navigation';
+import { SpanTruncateEllipsis } from './span-truncate-ellipsis';
 
 interface DropdownParamProps {
   paramOptions: string[];
@@ -85,7 +86,3 @@ export default function DropdownParam({
     </div>
   );
 }
-
-export function SpanTruncateEllipsis({ children }: { children: string }) {
-  return <span className={'truncate ...'}>{children}</span>;
-}
diff --git a/app/generic/components/dropdown/span-truncate-ellipsis.tsx b/app/generic/components/dropdown/span-truncate-ellipsis.tsx
new file mode 100644
index 0000000..1dea90c
--- /dev/null
+++ b/app/generic/components/dropdown/span-truncate-ellipsis.tsx
@@ -0,0 +1,3 @@
+export function SpanTruncateEllipsis({ children }: { children: string }) {
+  return <span className={'truncate ...'}>{children}</span>;
+}
diff --git a/app/generic/components/dropdown/name-id-tuple-params-selector.tsx b/app/generic/components/dropdown/string-name-string-id-search-params-selector.tsx
similarity index 67%
rename from app/generic/components/dropdown/name-id-tuple-params-selector.tsx
rename to app/generic/components/dropdown/string-name-string-id-search-params-selector.tsx
index 5a036de..f3258f9 100644
--- a/app/generic/components/dropdown/name-id-tuple-params-selector.tsx
+++ b/app/generic/components/dropdown/string-name-string-id-search-params-selector.tsx
@@ -1,36 +1,57 @@
 'use client';
 import { Listbox, Transition } from '@headlessui/react';
 import { ChevronUpDownIcon } from '@heroicons/react/24/outline';
-import React, { Fragment, startTransition } from 'react';
+import React, { Fragment, startTransition, useMemo } from 'react';
 import { CheckIcon } from '@heroicons/react/20/solid';
 
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { NameIdStringTuple } from '../../../api/dtos/NameIdStringTupleSchema';
+import { isNotNull, isNotUndefined } from '../../../api/main';
+import { StringMap } from '../../../contexts/string-map-context/string-map-reducer';
 
-export default function NameIdTupleParamsSelector({
-  selectionList,
-  selectedProp,
-  selectionDescriptor
-}: {
+interface NameIdTupleSearchParamSelector {
   selectionDescriptor: string;
   selectionList: NameIdStringTuple[];
-  selectedProp: NameIdStringTuple;
-}) {
+  selectedProp?: NameIdStringTuple;
+  searchParamKey?: string;
+}
+
+export default function StringNameStringIdSearchParamsSelector({
+  selectionList,
+  selectedProp,
+  selectionDescriptor,
+  searchParamKey = 'id'
+}: NameIdTupleSearchParamSelector) {
   const { push } = useRouter();
   const pathname = usePathname();
+  const readonlyURLSearchParams = useSearchParams();
+  const currentSelectionId = readonlyURLSearchParams?.get(searchParamKey);
+  const selectionToIdStringMap = useMemo(() => {
+    const map: StringMap<NameIdStringTuple> = {};
+    selectionList.forEach((tuple) => (map[tuple.name] = tuple));
+    return map;
+  }, [selectionList]);
+  const currentSelection = isNotUndefined(selectedProp)
+    ? selectedProp
+    : isNotNull(currentSelectionId) && isNotUndefined(currentSelectionId)
+    ? selectionToIdStringMap[currentSelectionId]
+    : undefined;
 
-  const updateSearchParams = (updatedSelection: NameIdStringTuple) => {
+  const updateSearchParams = (updatedSelection: NameIdStringTuple | null) => {
     const params = new URLSearchParams(window.location.search);
 
-    params.set('id', updatedSelection.id);
-
+    if (isNotNull(updatedSelection)) {
+      params.set(searchParamKey, updatedSelection.id);
+    } else {
+      params.delete(searchParamKey);
+    }
     startTransition(() => {
       push(`${pathname}?${params.toString()}`, { scroll: false });
     });
   };
 
   return (
-    <Listbox value={selectedProp} by={'id'} onChange={updateSearchParams}>
+    <Listbox value={currentSelection} by={'id'} onChange={updateSearchParams}>
       <div className="relative mt-1">
         <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
           <span className="block truncate">
@@ -38,7 +59,9 @@ export default function NameIdTupleParamsSelector({
               {selectionDescriptor}
               {': '}
             </strong>
-            {selectedProp.name != '' ? selectedProp.name : 'No Selection'}
+            {isNotUndefined(currentSelection)
+              ? currentSelection.name
+              : 'No Selection'}
           </span>
           <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
             <ChevronUpDownIcon
diff --git a/app/generic/components/dropdown/tuple-selector.tsx b/app/generic/components/dropdown/tuple-selector.tsx
index 3b419a7..a21b5d9 100644
--- a/app/generic/components/dropdown/tuple-selector.tsx
+++ b/app/generic/components/dropdown/tuple-selector.tsx
@@ -1,8 +1,9 @@
 import { Listbox, Transition } from '@headlessui/react';
 import { ChevronUpDownIcon } from '@heroicons/react/24/outline';
 import React, { Fragment } from 'react';
-import { CheckIcon } from '@heroicons/react/20/solid';
+import { CheckIcon, XCircleIcon } from '@heroicons/react/20/solid';
 import { NameIdStringTuple } from '../../../api/dtos/NameIdStringTupleSchema';
+import { isNotNull } from '../../../api/main';
 
 export type OptionTransformer = React.FC<OptionTransformerProps>;
 
@@ -33,12 +34,13 @@ export default function TupleSelector({
   selectionDescriptor,
   optionTransformer: OptionTransformerComponent
 }: {
-  selectedState: NameIdStringTuple;
+  selectedState: NameIdStringTuple | null;
   selectionList: NameIdStringTuple[];
-  updateSelectedState: (value: NameIdStringTuple) => void;
+  updateSelectedState: (value: NameIdStringTuple | null) => void;
   selectionDescriptor: string;
   optionTransformer?: OptionTransformer;
 }) {
+  console.log(selectionList);
   return (
     <Listbox
       value={selectedState}
@@ -46,21 +48,41 @@ export default function TupleSelector({
       onChange={(value) => updateSelectedState(value)}
     >
       <div className="relative mt-1">
-        <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
-          <span className="block truncate">
-            <strong>
-              {selectionDescriptor}
-              {': '}
-            </strong>
-            {selectedState.name != '' ? selectedState.name : 'No Selection'}
-          </span>
-          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+        <div
+          className={
+            'flex items-center relative w-full cursor-default rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm'
+          }
+        >
+          <Listbox.Button className="grow text-left h-full p-2">
+            <span className="block truncate">
+              <strong>
+                {selectionDescriptor}
+                {': '}
+              </strong>
+              {isNotNull(selectedState) ? selectedState.name : 'No Selection'}
+            </span>
+            <span></span>
+          </Listbox.Button>
+          <button
+            className={`btn btn-ghost p-0 rounded-full btn-square  btn-sm ${
+              isNotNull(selectedState) ? '' : 'opacity-0'
+            }`}
+            onClick={() => updateSelectedState(null)}
+            disabled={!isNotNull(selectedState)}
+          >
+            <XCircleIcon
+              className={`w-5 h-5 ${
+                isNotNull(selectedState) ? '' : 'opacity-0'
+              }`}
+            ></XCircleIcon>
+          </button>
+          <span className="pointer-events-none flex items-center pr-2">
             <ChevronUpDownIcon
               className="h-5 w-5 text-gray-400"
               aria-hidden="true"
             />
           </span>
-        </Listbox.Button>
+        </div>
         <Transition
           as={Fragment}
           leave="transition ease-in duration-100"
diff --git a/app/navbar/protected-navigation.tsx b/app/navbar/protected-navigation.tsx
index 70220eb..4b2053b 100644
--- a/app/navbar/protected-navigation.tsx
+++ b/app/navbar/protected-navigation.tsx
@@ -7,11 +7,14 @@ import React, {
   useState
 } from 'react';
 import { classNames } from '../utils/class-names';
-import { useSelectiveContextListenerBoolean } from '../generic/components/selective-context/selective-context-manager-boolean';
+import {
+  useSelectiveContextDispatchBoolean,
+  useSelectiveContextListenerBoolean
+} from '../generic/components/selective-context/selective-context-manager-boolean';
 
 const paginationUnsavedListenerKey = ':pagination';
 
-interface Props
+export interface ProtectedNavigationProps
   extends React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
@@ -34,139 +37,144 @@ function useSelectiveListenerKey(
   }, [unsavedContextKey, listenerKey]);
 }
 
-const ProtectedNavigation = forwardRef<HTMLButtonElement, Props>(
-  function ProtectedNavigation(props: Props, ref) {
-    const {
-      onConfirm,
-      children,
-      isActive,
-      requestConfirmation,
-      unsavedContextKey,
-      unsavedListenerKey: listenerKeyProp,
-      className,
-      disabled
-    } = props;
-    let [isOpen, setIsOpen] = useState(false);
+const ProtectedNavigation = forwardRef<
+  HTMLButtonElement,
+  ProtectedNavigationProps
+>(function ProtectedNavigation(props: ProtectedNavigationProps, ref) {
+  const {
+    onConfirm,
+    children,
+    isActive,
+    requestConfirmation,
+    unsavedContextKey,
+    unsavedListenerKey: listenerKeyProp,
+    className,
+    disabled
+  } = props;
+  let [isOpen, setIsOpen] = useState(false);
 
-    const unsavedListenerKey = useSelectiveListenerKey(
-      unsavedContextKey,
-      `${paginationUnsavedListenerKey}:${listenerKeyProp}`
-    );
+  // const unsavedListenerKey = useSelectiveListenerKey(
+  //   unsavedContextKey,
+  //   `${paginationUnsavedListenerKey}:${listenerKeyProp}`
+  // );
 
-    const { isTrue: protectionActive } = useSelectiveContextListenerBoolean(
+  const { currentState: protectionActive, dispatchWithoutControl } =
+    useSelectiveContextDispatchBoolean(
       unsavedContextKey || '',
-      unsavedListenerKey,
+      listenerKeyProp || '',
       false
     );
 
-    const finalClassNames = useMemo(() => {
-      return className
-        ? className
-        : classNames(
-            isActive
-              ? 'border-slate-500 text-gray-900'
-              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
-            'group inline-flex w-full rounded-md items-center px-2 py-2 border-b-2 text-sm font-medium'
-          );
-    }, [className, isActive]);
+  const finalClassNames = useMemo(() => {
+    return className
+      ? className
+      : classNames(
+          isActive
+            ? 'border-slate-500 text-gray-900'
+            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+          'group inline-flex w-full rounded-md items-center px-2 py-2 border-b-2 text-sm font-medium'
+        );
+  }, [className, isActive]);
 
-    function closeModal() {
-      setIsOpen(false);
-    }
+  function closeModal() {
+    setIsOpen(false);
+  }
 
-    function openModal() {
-      setIsOpen(true);
-    }
+  function openModal() {
+    setIsOpen(true);
+  }
 
-    return (
-      <>
-        <button
-          type="button"
-          onClick={
-            requestConfirmation || protectionActive
-              ? openModal
-              : () => onConfirm()
-          }
-          className={finalClassNames}
-          aria-current={isActive ? 'page' : undefined}
-          disabled={disabled}
-        >
-          {children}
-        </button>
+  return (
+    <>
+      <button
+        type="button"
+        onClick={
+          requestConfirmation || protectionActive
+            ? openModal
+            : () => {
+                onConfirm();
+              }
+        }
+        className={finalClassNames}
+        aria-current={isActive ? 'page' : undefined}
+        disabled={disabled}
+      >
+        {children}
+      </button>
 
-        <Transition appear show={isOpen} as={Fragment}>
-          <Dialog as="div" className="relative z-50" onClose={closeModal}>
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-black bg-opacity-25" />
-            </Transition.Child>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-50" onClose={closeModal}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black bg-opacity-25" />
+          </Transition.Child>
 
-            <div className="fixed inset-0 overflow-y-auto">
-              <div className="flex min-h-full items-center justify-center p-4 text-center">
-                <Transition.Child
-                  as={Fragment}
-                  enter="ease-out duration-300"
-                  enterFrom="opacity-0 scale-95"
-                  enterTo="opacity-100 scale-100"
-                  leave="ease-in duration-200"
-                  leaveFrom="opacity-100 scale-100"
-                  leaveTo="opacity-0 scale-95"
-                >
-                  <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-gray-900"
-                    >
-                      Unsafe Navigation
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <p className="text-sm text-gray-500">
-                        You have unsaved changes that will be lost if you
-                        proceed. Discard changes?
-                      </p>
-                    </div>
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-gray-900"
+                  >
+                    Unsafe Navigation
+                  </Dialog.Title>
+                  <div className="mt-2">
+                    <p className="text-sm text-gray-500">
+                      You have unsaved changes that will be lost if you proceed.
+                      Discard changes?
+                    </p>
+                  </div>
 
-                    <div className="mt-4 flex justify-between">
-                      <span></span>
-                      <button
-                        type="button"
-                        className="inline-flex justify-center rounded-md border border-transparent bg-emerald-200 px-4 py-2 text-sm font-medium text-emerald-900 hover:bg-emerald-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                        onClick={() => {
-                          closeModal();
-                        }}
-                        ref={ref}
-                      >
-                        Cancel navigation
-                      </button>
-                      <span></span>
-                      <button
-                        type="button"
-                        className="inline-flex justify-center rounded-md border border-transparent bg-orange-200 px-4 py-2 text-sm font-medium text-orange-900 hover:bg-orange-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                        onClick={() => {
-                          onConfirm();
-                          closeModal();
-                        }}
-                      >
-                        Discard
-                      </button>
-                      <span></span>
-                    </div>
-                  </Dialog.Panel>
-                </Transition.Child>
-              </div>
+                  <div className="mt-4 flex justify-between">
+                    <span></span>
+                    <button
+                      type="button"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-emerald-200 px-4 py-2 text-sm font-medium text-emerald-900 hover:bg-emerald-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={() => {
+                        closeModal();
+                      }}
+                      ref={ref}
+                    >
+                      Cancel navigation
+                    </button>
+                    <span></span>
+                    <button
+                      type="button"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-orange-200 px-4 py-2 text-sm font-medium text-orange-900 hover:bg-orange-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={() => {
+                        dispatchWithoutControl(false);
+                        onConfirm();
+                        closeModal();
+                      }}
+                    >
+                      Discard
+                    </button>
+                    <span></span>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
             </div>
-          </Dialog>
-        </Transition>
-      </>
-    );
-  }
-);
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+});
 
 export default ProtectedNavigation;
diff --git a/app/premises/classroom-suitability/apply-search-params.tsx b/app/premises/classroom-suitability/apply-search-params.tsx
new file mode 100644
index 0000000..a7e42f2
--- /dev/null
+++ b/app/premises/classroom-suitability/apply-search-params.tsx
@@ -0,0 +1,42 @@
+'use client';
+import { useSearchParamsContext } from '../../contexts/string-map-context/search-params-context-creator';
+import { isNotNull, isNotUndefined } from '../../api/main';
+import { startTransition, useTransition } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { PendingOverlay } from '../../generic/components/overlays/pending-overlay';
+import ProtectedNavigation, {
+  ProtectedNavigationProps
+} from '../../navbar/protected-navigation';
+import { UnsavedAssetChanges } from '../asset-string-map-context-creator';
+
+export function ApplySearchParams({ buttonLabel }: { buttonLabel?: string }) {
+  const { searchParamsMap } = useSearchParamsContext();
+  const pathname = usePathname();
+  const { push } = useRouter();
+  const [pending, startTransition] = useTransition();
+  const handleApplyParams = () => {
+    const params = new URLSearchParams();
+    for (let searchParamsMapKey in searchParamsMap) {
+      const updatedSelection = searchParamsMap[searchParamsMapKey];
+      if (isNotNull(updatedSelection)) {
+        params.set(searchParamsMapKey, updatedSelection.id);
+      } else {
+        params.delete(searchParamsMapKey);
+      }
+    }
+    startTransition(() => {
+      push(`${pathname}?${params.toString()}`, { scroll: false });
+    });
+  };
+  return (
+    <ProtectedNavigation
+      onConfirm={handleApplyParams}
+      className={'btn'}
+      unsavedContextKey={UnsavedAssetChanges}
+      unsavedListenerKey={'apply-params'}
+    >
+      <PendingOverlay pending={pending}></PendingOverlay>
+      {isNotUndefined(buttonLabel) ? buttonLabel : 'Apply Filters'}
+    </ProtectedNavigation>
+  );
+}
diff --git a/app/premises/classroom-suitability/asset-disclosure-list-panel.tsx b/app/premises/classroom-suitability/asset-disclosure-list-panel.tsx
index 1981a92..07d54aa 100644
--- a/app/premises/classroom-suitability/asset-disclosure-list-panel.tsx
+++ b/app/premises/classroom-suitability/asset-disclosure-list-panel.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useAssetStringMapContext } from '../asset-string-map-context-creator';
 import { AssetDto } from '../../api/dtos/AssetDtoSchema';
 import { AssetSelectionListContextKey } from './asset-suitability-table-wrapper';
@@ -18,6 +18,7 @@ import DisclosureListPanel, {
 import ListItemSelector from '../../generic/components/disclosure-list/list-item-selector';
 import { useAssetSuitabilityStringMapContext } from '../asset-suitability-context-creator';
 import { IdStringFromNumberAccessor } from './rating-table-accessor-functions';
+import { useSyncStringMapToProps } from '../../contexts/string-map-context/use-sync-string-map-to-props';
 
 export function AssetDisclosureListPanel() {
   const { assetDtoStringMap } = useAssetStringMapContext();
@@ -50,8 +51,6 @@ const AssetPanelTransformer: PanelTransformer<AssetDto> = ({
     initialValue: assetSuitabilityStringMap[IdStringFromNumberAccessor(data)]
   });
 
-  console.log(suitabilityList);
-
   return (
     <RatingList
       data={data}
@@ -65,12 +64,30 @@ const AssetLabelTransformer: DisclosureLabelTransformer<AssetDto> = ({
   data
 }: TransformerProps<AssetDto>) => {
   const { assetSuitabilityStringMap } = useAssetSuitabilityStringMapContext();
-  const {} = useAssetSuitabilityListController({
-    contextKey: `${data.id}`,
+  const assetSuitabilityStringMapElement =
+    assetSuitabilityStringMap[IdStringFromNumberAccessor(data)];
+  const stringMapFromContext = useRef(assetSuitabilityStringMapElement);
+
+  const contextKey = useMemo(() => `${data.id}`, [data]);
+  const { dispatchUpdate } = useAssetSuitabilityListController({
+    contextKey: contextKey,
     listenerKey: 'classroom-label',
-    initialValue: assetSuitabilityStringMap[IdStringFromNumberAccessor(data)]
+    initialValue: assetSuitabilityStringMapElement
   });
 
+  useEffect(() => {
+    if (stringMapFromContext.current !== assetSuitabilityStringMapElement) {
+      console.log('Syncing props with context');
+      dispatchUpdate({ contextKey, value: assetSuitabilityStringMapElement });
+      stringMapFromContext.current = assetSuitabilityStringMapElement;
+    }
+  }, [
+    stringMapFromContext,
+    dispatchUpdate,
+    assetSuitabilityStringMapElement,
+    contextKey
+  ]);
+
   return <>{data.name}</>;
 };
 
diff --git a/app/premises/classroom-suitability/asset-suitability-table-wrapper.tsx b/app/premises/classroom-suitability/asset-suitability-table-wrapper.tsx
index 1f065b2..92a596e 100644
--- a/app/premises/classroom-suitability/asset-suitability-table-wrapper.tsx
+++ b/app/premises/classroom-suitability/asset-suitability-table-wrapper.tsx
@@ -29,26 +29,17 @@ export function AssetSuitabilityTableWrapper() {
     IdStringFromNumberAccessor
   );
 
-  const { currentState: selectedWorkTaskTypeList } =
-    useSelectiveContextControllerNumberList({
-      contextKey: workTaskTypeSelectionListContextKey,
-      listenerKey: assetSuitabilityTableWrapperListenerKey,
-      initialValue: EmptyArray
-    });
   const assetDtos = useMemoizedSelectionFromListAndStringMap(
     selectedAssetList,
     assetDtoStringMap
   );
-  useMemoizedSelectionFromListAndStringMap(
-    selectedWorkTaskTypeList,
-    workTaskTypeMap
-  );
+
   const allWorkTaskTypes = Object.values(workTaskTypeMap).sort((wtt1, wtt2) =>
     wtt1.name.localeCompare(wtt2.name)
   );
 
   return (
-    <Card className={'max-w-[75%] max-h-[75vh] p-0'}>
+    <Card className={'w-full max-w-[50vw] max-h-[75vh] p-0'}>
       <div
         className={
           'max-w-full max-h-full overflow-auto box-border border-8 border-transparent'
@@ -78,5 +69,3 @@ const assetSuitabilityTableWrapperListenerKey =
   'asset-suitability-table-wrapper';
 
 export const AssetSelectionListContextKey = 'asset-selection-list';
-
-const workTaskTypeSelectionListContextKey = 'work-task-type-selection-list';
diff --git a/app/premises/classroom-suitability/page.tsx b/app/premises/classroom-suitability/page.tsx
index 3c4e527..6889b6b 100644
--- a/app/premises/classroom-suitability/page.tsx
+++ b/app/premises/classroom-suitability/page.tsx
@@ -22,6 +22,7 @@ import AssetRoleSuitabilityStringMapContextProvider from '../asset-role-suitabil
 import { IdStringFromNumberAccessor } from './rating-table-accessor-functions';
 import { parseTen } from '../../api/date-and-time';
 import { DataNotFoundCard } from '../../timetables/students/[schedule]/data-not-found-card';
+import WorkTaskTypeFilterGroup from './work-task-type-filter-group';
 
 export default async function Page({
   searchParams: { rootName, ...workTaskParams }
@@ -98,7 +99,7 @@ export default async function Page({
       <AssetStringMapContextProvider assetStringMap={assetStringMap}>
         <AssetRoleSuitabilityStringMapContextProvider suitabilityLists={table}>
           <AssetSuitabilityEditContextProvider>
-            <div className={'w-full flex'}>
+            <div className={'w-full flex gap-2'}>
               <ToolCardContextProvider>
                 <ToolCard>
                   <ToolCard.UpperSixth>
@@ -109,7 +110,9 @@ export default async function Page({
                   </ToolCard.LowerFiveSixths>
                 </ToolCard>
               </ToolCardContextProvider>
+
               <AssetSuitabilityTableWrapper />
+              <WorkTaskTypeFilterGroup />
             </div>
           </AssetSuitabilityEditContextProvider>
         </AssetRoleSuitabilityStringMapContextProvider>
diff --git a/app/premises/classroom-suitability/string-map-context-filter-selector.tsx b/app/premises/classroom-suitability/string-map-context-filter-selector.tsx
new file mode 100644
index 0000000..a05566a
--- /dev/null
+++ b/app/premises/classroom-suitability/string-map-context-filter-selector.tsx
@@ -0,0 +1,78 @@
+'use client';
+import {
+  Context,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useMemo
+} from 'react';
+import { StringMap } from '../../contexts/string-map-context/string-map-reducer';
+import { AccessorFunction } from '../../generic/components/tables/rating/rating-table';
+import StringNameStringIdSearchParamsSelector from '../../generic/components/dropdown/string-name-string-id-search-params-selector';
+import { NameIdStringTuple } from '../../api/dtos/NameIdStringTupleSchema';
+import { isNotNull, isNotUndefined } from '../../api/main';
+import TupleSelector from '../../generic/components/dropdown/tuple-selector';
+import { useSelectiveContextControllerString } from '../../generic/components/selective-context/selective-context-manager-string';
+import { useSearchParamsContext } from '../../contexts/string-map-context/search-params-context-creator';
+
+export interface Comparator<T> {
+  (element1: T, element2: T): number;
+}
+
+interface StringMapContextFilterProps<T> extends PropsWithChildren {
+  context: Context<StringMap<T>>;
+  idAccessor: AccessorFunction<T, string>;
+  idSearchParamKey?: string;
+  labelAccessor: AccessorFunction<T, string>;
+  labelDescriptor: string;
+  sortFunction?: Comparator<T>;
+}
+
+export function StringMapContextFilterSelector<T>({
+  context,
+  idAccessor,
+  idSearchParamKey = 'id',
+  labelAccessor,
+  labelDescriptor,
+  sortFunction
+}: StringMapContextFilterProps<T>) {
+  const stringMapTypeT = useContext(context);
+  const selectionList: NameIdStringTuple[] = useMemo(() => {
+    let values = Object.values(stringMapTypeT);
+    if (isNotUndefined(sortFunction)) {
+      values = values.sort(sortFunction);
+    }
+    return values.map((value) => ({
+      id: idAccessor(value),
+      name: labelAccessor(value)
+    }));
+  }, [idAccessor, labelAccessor, sortFunction, stringMapTypeT]);
+  const { searchParamsMap, dispatchSearchParams } = useSearchParamsContext();
+  const currentSelection = searchParamsMap[idSearchParamKey];
+  console.log(selectionList, stringMapTypeT);
+  const updateSelectedState = useCallback(
+    (selection: NameIdStringTuple | null) => {
+      if (isNotNull(selection)) {
+        dispatchSearchParams({
+          type: 'update',
+          payload: { key: idSearchParamKey, data: selection }
+        });
+      } else {
+        dispatchSearchParams({
+          type: 'delete',
+          payload: { key: idSearchParamKey }
+        });
+      }
+    },
+    [dispatchSearchParams, idSearchParamKey]
+  );
+
+  return (
+    <TupleSelector
+      selectedState={isNotUndefined(currentSelection) ? currentSelection : null}
+      selectionList={selectionList}
+      updateSelectedState={updateSelectedState}
+      selectionDescriptor={labelDescriptor}
+    />
+  );
+}
diff --git a/app/premises/classroom-suitability/work-task-type-filter-group.tsx b/app/premises/classroom-suitability/work-task-type-filter-group.tsx
new file mode 100644
index 0000000..1ed06a0
--- /dev/null
+++ b/app/premises/classroom-suitability/work-task-type-filter-group.tsx
@@ -0,0 +1,49 @@
+'use client';
+import { Card } from '@tremor/react';
+import { StringMapContextFilterSelector } from './string-map-context-filter-selector';
+import {
+  KnowledgeDomainContext,
+  KnowledgeLevelContext
+} from '../../work-types/lessons/use-service-category-context';
+import { AccessorFunction } from '../../generic/components/tables/rating/rating-table';
+import { KnowledgeDomainDto } from '../../api/dtos/KnowledgeDomainDtoSchema';
+import { IdStringFromNumberAccessor } from './rating-table-accessor-functions';
+import SearchParamsContextProvider from '../../contexts/string-map-context/search-params-context-provider';
+import { ApplySearchParams } from './apply-search-params';
+import { useContext } from 'react';
+import { HasNameDto } from '../../api/dtos/HasNameDtoSchema';
+import { KnowledgeLevelDto } from '../../api/dtos/KnowledgeLevelDtoSchema';
+
+export const NameLabelAccessor: AccessorFunction<HasNameDto, string> = (dto) =>
+  dto.name;
+
+export const LevelOrdinalAccessor: AccessorFunction<
+  KnowledgeLevelDto,
+  string
+> = (dto) => dto.levelOrdinal.toString();
+
+export default function WorkTaskTypeFilterGroup() {
+  const knowledgeDomainDtoStringMap = useContext(KnowledgeDomainContext);
+  console.log(knowledgeDomainDtoStringMap);
+  return (
+    <Card className={'max-w-[25%]'}>
+      <SearchParamsContextProvider>
+        <ApplySearchParams />
+        <StringMapContextFilterSelector
+          context={KnowledgeDomainContext}
+          labelAccessor={NameLabelAccessor}
+          idAccessor={IdStringFromNumberAccessor}
+          labelDescriptor={'Subject'}
+          idSearchParamKey={'knowledgeDomain'}
+        />
+        <StringMapContextFilterSelector
+          context={KnowledgeLevelContext}
+          labelAccessor={NameLabelAccessor}
+          idAccessor={LevelOrdinalAccessor}
+          labelDescriptor={'Year'}
+          idSearchParamKey={'knowledgeLevelOrdinal'}
+        />
+      </SearchParamsContextProvider>
+    </Card>
+  );
+}
diff --git a/app/work-types/lessons/knowledge-domain-context-provider.tsx b/app/work-types/lessons/knowledge-domain-context-provider.tsx
index 9e99ef8..767dc53 100644
--- a/app/work-types/lessons/knowledge-domain-context-provider.tsx
+++ b/app/work-types/lessons/knowledge-domain-context-provider.tsx
@@ -19,6 +19,7 @@ export default function KnowledgeDomainContextProvider({
   children,
   knowledgeDomains
 }: KnowledgeDomainContextProviderProps) {
+  console.log(knowledgeDomains);
   return (
     <Provider
       initialEntityMap={knowledgeDomains}
diff --git a/app/work-types/lessons/use-service-category-context.ts b/app/work-types/lessons/use-service-category-context.ts
index 4f0b3e6..9d69e2e 100644
--- a/app/work-types/lessons/use-service-category-context.ts
+++ b/app/work-types/lessons/use-service-category-context.ts
@@ -4,6 +4,20 @@ import { KnowledgeLevelDto } from '../../api/dtos/KnowledgeLevelDtoSchema';
 import { ServiceCategoryDto } from '../../api/dtos/ServiceCategoryDtoSchema';
 import { createStringMapContext } from '../../contexts/string-map-context/context-creator';
 
+export const ServiceCategoryContextKeys = [
+  'categoryMap',
+  'domainMap',
+  'levelMap'
+] as const;
+export const ServiceCategoryDispatchKeys = [
+  'dispatchCategories',
+  'dispatchDomains',
+  'dispatchLevels'
+] as const;
+
+export type ServiceCategoryContextKey =
+  (typeof ServiceCategoryContextKeys)[number];
+
 export function useServiceCategoryContext() {
   const categoryMap = useContext(ServiceCategoryContext);
   const dispatchCategories = useContext(ServiceCategoryContextDispatch);
diff --git a/app/work-types/work-task-filtering-context.tsx b/app/work-types/work-task-filtering-context.tsx
index 5d59b82..fe10011 100644
--- a/app/work-types/work-task-filtering-context.tsx
+++ b/app/work-types/work-task-filtering-context.tsx
@@ -6,6 +6,11 @@ import {
   getAllKnowledgeLevels
 } from '../api/actions/service-categories';
 import { ObjectPlaceholder } from '../generic/components/selective-context/selective-context-manager-function';
+import { convertListToStringMap } from '../contexts/string-map-context/convert-list-to-string-map';
+import { IdStringFromNumberAccessor } from '../premises/classroom-suitability/rating-table-accessor-functions';
+import { EmptyArray } from '../api/main';
+import { KnowledgeLevelDto } from '../api/dtos/KnowledgeLevelDtoSchema';
+import { KnowledgeDomainDto } from '../api/dtos/KnowledgeDomainDtoSchema';
 
 export default async function WorkTaskFilteringContext({
   children
@@ -13,13 +18,18 @@ export default async function WorkTaskFilteringContext({
   const { data: levels } = await getAllKnowledgeLevels();
   const { data: domains } = await getAllKnowledgeDomains();
 
+  const levelsMap = await convertListToStringMap<KnowledgeLevelDto>(
+    levels || EmptyArray,
+    IdStringFromNumberAccessor
+  );
+  const domainsMap = await convertListToStringMap<KnowledgeDomainDto>(
+    domains || EmptyArray,
+    IdStringFromNumberAccessor
+  );
+
   return (
-    <KnowledgeDomainContextProvider
-      knowledgeDomains={domains || ObjectPlaceholder}
-    >
-      <KnowledgeLevelContextProvider
-        knowledgeLevels={levels || ObjectPlaceholder}
-      >
+    <KnowledgeDomainContextProvider knowledgeDomains={domainsMap}>
+      <KnowledgeLevelContextProvider knowledgeLevels={levelsMap}>
         {children}
       </KnowledgeLevelContextProvider>
     </KnowledgeDomainContextProvider>