diff --git a/src/components/BaselayerSections.tsx b/src/components/BaselayerSections.tsx
index aa1d52d..f1929bd 100644
--- a/src/components/BaselayerSections.tsx
+++ b/src/components/BaselayerSections.tsx
@@ -1,109 +1,129 @@
-import { LayerSelectorProps } from './LayerSelector';
-import { CollapsibleSection } from './CollapsibleSection';
-import { EXTERNAL_BASELAYERS } from '../configs/mapSettings';
+import { useState, ReactNode, useCallback, memo } from 'react';
+import { LayerSelectorProps, NoMatches } from './LayerSelector';
+import CollapsibleSection from './CollapsibleSection';
+import {
+  EXTERNAL_BASELAYERS,
+  EXTERNAL_DETAILS_ID,
+} from '../configs/mapSettings';
+import { getDefaultExpandedState, filterMapGroups } from '../utils/filterUtils';
+import { ChevronRightIcon } from './icons/ChevronRightIcon';
+import { ChevronDownIcon } from './icons/ChevronDownIcon';
 
 type BaselayerSectionsProps = {
   mapGroups: LayerSelectorProps['mapGroups'];
   activeBaselayerId: LayerSelectorProps['activeBaselayerId'];
   isFlipped: LayerSelectorProps['isFlipped'];
   onBaselayerChange: LayerSelectorProps['onBaselayerChange'];
+  searchText: string;
+  markMatchingSearchText: (
+    label: string,
+    shouldHighlight?: boolean
+  ) => string | ReactNode;
 };
 
-export function BaselayerSections({
+function BaselayerSections({
   mapGroups,
   activeBaselayerId,
   isFlipped,
   onBaselayerChange,
+  searchText,
+  markMatchingSearchText,
 }: BaselayerSectionsProps) {
+  const [expandedState, setExpandedState] = useState<Set<string>>(
+    getDefaultExpandedState(mapGroups, activeBaselayerId)
+  );
+  const { filteredMapGroups, matchedIds } = filterMapGroups(
+    mapGroups,
+    searchText
+  );
+  const filteredExternalLayers = EXTERNAL_BASELAYERS.filter((bl) =>
+    bl.name.toLowerCase().includes(searchText.toLowerCase())
+  );
+  const isEmpty =
+    filteredMapGroups.length + filteredExternalLayers.length === 0;
+
+  const handleToggle = useCallback(
+    (id: string) => {
+      if (expandedState.has(id)) {
+        setExpandedState((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      } else {
+        setExpandedState((prev) => new Set(prev).add(id));
+      }
+    },
+    [expandedState]
+  );
+
+  if (isEmpty) {
+    return <NoMatches />;
+  }
+
   return (
     <>
-      {mapGroups.map((group, groupIndex) => (
+      {filteredMapGroups.map((group) => (
         <CollapsibleSection
-          key={'section-internal-mapGroup-' + groupIndex}
-          summary={group.name}
-          defaultOpen={groupIndex === 0}
-          tooltip={group.description}
-        >
-          {group.maps.map((map, mapIndex) => (
-            <CollapsibleSection
-              key={
-                'section-internal-mapGroup-' + groupIndex + '-map-' + map.map_id
-              }
-              summary={map.name}
-              defaultOpen={mapIndex === 0}
-              tooltip={map.description}
-              nestedDepth={1}
-            >
-              {map.bands.map((band, bandIndex) => (
-                <CollapsibleSection
-                  key={
-                    'section-internal-mapGroup-' +
-                    groupIndex +
-                    '-map-' +
-                    map.map_id +
-                    '-band-' +
-                    band.band_id
-                  }
-                  summary={band.name}
-                  defaultOpen={bandIndex === 0}
-                  tooltip={band.description}
-                  nestedDepth={2}
-                >
-                  {band.layers.map((layer) => (
-                    <label
-                      key={'baselayer-label-' + layer.layer_id}
-                      className="layer-selecter-input-label"
-                    >
-                      <input
-                        key={'baselayer-input-' + layer.layer_id}
-                        type="radio"
-                        id={String(layer.layer_id)}
-                        value={layer.layer_id}
-                        name="baselayer"
-                        checked={layer.layer_id === activeBaselayerId}
-                        onChange={() =>
-                          onBaselayerChange(String(layer.layer_id), 'layerMenu')
-                        }
-                      />
-                      {layer.name}
-                    </label>
-                  ))}
-                </CollapsibleSection>
-              ))}
-            </CollapsibleSection>
-          ))}
-        </CollapsibleSection>
+          key={group.name}
+          node={group}
+          nestedDepth={0}
+          onBaselayerChange={onBaselayerChange}
+          activeBaselayerId={activeBaselayerId}
+          searchText={searchText}
+          expandedState={expandedState}
+          markMatchingSearchText={markMatchingSearchText}
+          matchedIds={matchedIds}
+          highlightMatch={matchedIds.has(group.name)}
+          handleToggle={handleToggle}
+        />
       ))}
-      {
-        <CollapsibleSection
-          key="section-comparison-maps"
-          summary="Comparison maps"
-          defaultOpen={true}
-        >
-          {EXTERNAL_BASELAYERS.map((bl) => (
-            <div
-              className={`input-container ${bl.disabledState(isFlipped) ? 'disabled' : ''}`}
-              key={bl.layer_id}
-              title={
-                bl.disabledState(isFlipped)
-                  ? 'The current RA range is incompatible with this baselayer.'
-                  : undefined
-              }
-            >
-              <input
-                type="radio"
-                id={bl.layer_id}
-                value={bl.layer_id}
-                name="baselayer"
-                checked={bl.layer_id === activeBaselayerId}
-                onChange={() => onBaselayerChange(bl.layer_id, 'layerMenu')}
-                disabled={bl.disabledState(isFlipped)}
-              />
-              <label htmlFor={bl.layer_id}>{bl.name}</label>
-            </div>
-          ))}
-        </CollapsibleSection>
-      }
+      {filteredExternalLayers.length > 0 && (
+        <div>
+          <div
+            title="External maps used for comparison"
+            onClick={() => handleToggle(EXTERNAL_DETAILS_ID)}
+            className="layer-title-container"
+          >
+            {expandedState.has(EXTERNAL_DETAILS_ID) ? (
+              <ChevronDownIcon />
+            ) : (
+              <ChevronRightIcon />
+            )}
+            Comparison maps
+          </div>
+          {expandedState.has(EXTERNAL_DETAILS_ID) &&
+            filteredExternalLayers.map((bl) => (
+              <div
+                className={`input-container ${bl.disabledState(isFlipped) ? 'disabled' : ''}`}
+                key={bl.layer_id}
+                title={
+                  bl.disabledState(isFlipped)
+                    ? 'The current RA range is incompatible with this baselayer.'
+                    : undefined
+                }
+              >
+                <input
+                  type="radio"
+                  id={bl.layer_id}
+                  value={bl.layer_id}
+                  name="baselayer"
+                  checked={bl.layer_id === activeBaselayerId}
+                  onChange={() => onBaselayerChange(bl.layer_id, 'layerMenu')}
+                  disabled={bl.disabledState(isFlipped)}
+                />
+                <label
+                  htmlFor={bl.layer_id}
+                  className="external-layer-selector-input-label"
+                >
+                  {markMatchingSearchText(bl.name)}
+                </label>
+              </div>
+            ))}
+        </div>
+      )}
     </>
   );
 }
+
+export default memo(BaselayerSections);
diff --git a/src/components/CenterMapFeature.tsx b/src/components/CenterMapFeature.tsx
index 93f0b0a..5a08bdf 100644
--- a/src/components/CenterMapFeature.tsx
+++ b/src/components/CenterMapFeature.tsx
@@ -101,7 +101,7 @@ export function CenterMapFeature({
             className="center-feature-form generic-form"
             onSubmit={onSubmit}
           >
-            <label>
+            <label className="dialog-label">
               Feature Name:
               <input
                 name="feature_name"
diff --git a/src/components/CollapsibleSection.tsx b/src/components/CollapsibleSection.tsx
index 61b4a57..ab22f9e 100644
--- a/src/components/CollapsibleSection.tsx
+++ b/src/components/CollapsibleSection.tsx
@@ -1,24 +1,115 @@
-import { ReactNode } from 'react';
+import { ReactNode, memo } from 'react';
+import { LayerSelectorProps } from './LayerSelector';
+import { ChevronRightIcon } from './icons/ChevronRightIcon';
+import { ChevronDownIcon } from './icons/ChevronDownIcon';
+import {
+  BandResponse,
+  LayerResponse,
+  MapGroupResponse,
+  MapResponse,
+} from '../types/maps';
+import { getNodeId } from '../utils/filterUtils';
 
 type Props = {
-  summary: ReactNode;
-  children: ReactNode;
-  defaultOpen: boolean;
-  tooltip?: string;
-  nestedDepth?: number;
+  node: MapGroupResponse | MapResponse | BandResponse | LayerResponse;
+  nestedDepth: number;
+  onBaselayerChange: LayerSelectorProps['onBaselayerChange'];
+  activeBaselayerId: LayerSelectorProps['activeBaselayerId'];
+  searchText: string;
+  expandedState: Set<string>;
+  markMatchingSearchText: (
+    label: string,
+    shouldHighlight?: boolean
+  ) => string | ReactNode;
+  matchedIds: Set<string>;
+  highlightMatch: boolean;
+  handleToggle: (id: string) => void;
 };
 
-export function CollapsibleSection({
-  summary,
-  defaultOpen,
-  children,
-  tooltip,
-  nestedDepth = 0,
+function CollapsibleSection({
+  node,
+  nestedDepth,
+  onBaselayerChange,
+  activeBaselayerId,
+  searchText,
+  expandedState,
+  markMatchingSearchText,
+  matchedIds,
+  highlightMatch,
+  handleToggle,
 }: Props) {
+  let children;
+  const nodeId = getNodeId(node);
+
+  if (expandedState.has(nodeId) || searchText.length > 0) {
+    if ('band_id' in node) {
+      children = (node as BandResponse).layers.map((layer) => (
+        <label
+          key={'baselayer-label-' + layer.layer_id}
+          className="layer-selector-input-label"
+        >
+          <input
+            key={'baselayer-input-' + layer.layer_id}
+            type="radio"
+            id={String(layer.layer_id)}
+            value={layer.layer_id}
+            name="baselayer"
+            checked={layer.layer_id === activeBaselayerId}
+            onChange={() =>
+              onBaselayerChange(String(layer.layer_id), 'layerMenu')
+            }
+          />
+          {markMatchingSearchText(layer.name, matchedIds.has(layer.layer_id))}
+        </label>
+      ));
+    } else if ('map_id' in node) {
+      children = (node as MapResponse).bands.map((band) => (
+        <CollapsibleSection
+          key={band.band_id}
+          node={band}
+          nestedDepth={1}
+          onBaselayerChange={onBaselayerChange}
+          activeBaselayerId={activeBaselayerId}
+          searchText={searchText}
+          expandedState={expandedState}
+          markMatchingSearchText={markMatchingSearchText}
+          matchedIds={matchedIds}
+          highlightMatch={matchedIds.has(band.band_id)}
+          handleToggle={handleToggle}
+        />
+      ));
+    } else {
+      children = (node as MapGroupResponse).maps.map((map) => (
+        <CollapsibleSection
+          key={map.map_id}
+          node={map}
+          nestedDepth={1}
+          onBaselayerChange={onBaselayerChange}
+          activeBaselayerId={activeBaselayerId}
+          searchText={searchText}
+          expandedState={expandedState}
+          markMatchingSearchText={markMatchingSearchText}
+          matchedIds={matchedIds}
+          highlightMatch={matchedIds.has(map.map_id)}
+          handleToggle={handleToggle}
+        />
+      ));
+    }
+  }
+
   return (
-    <details style={{ marginLeft: nestedDepth * 5 }} open={defaultOpen}>
-      <summary title={tooltip}>{summary}</summary>
+    <div style={{ marginLeft: nestedDepth * 10 }}>
+      <div
+        title={node.description}
+        onClick={() => handleToggle(nodeId)}
+        className="layer-title-container"
+      >
+        {expandedState.has(nodeId) ? <ChevronDownIcon /> : <ChevronRightIcon />}
+        {markMatchingSearchText(node.name, highlightMatch)}
+      </div>
       {children}
-    </details>
+    </div>
   );
 }
+
+export default memo(CollapsibleSection);
diff --git a/src/components/CustomColorMapDialog.tsx b/src/components/CustomColorMapDialog.tsx
index cd946c6..89938d6 100644
--- a/src/components/CustomColorMapDialog.tsx
+++ b/src/components/CustomColorMapDialog.tsx
@@ -130,7 +130,7 @@ export function CustomColorMapDialog({
           handleUpdate();
         }}
       >
-        <label>
+        <label className="dialog-label">
           <span>
             Specify a{' '}
             <a
@@ -146,7 +146,7 @@ export function CustomColorMapDialog({
             onChange={(e) => setTempCmap(e.target.value)}
           />
         </label>
-        <label>
+        <label className="dialog-label">
           Minimum of {units}
           <input
             type="number"
@@ -159,7 +159,7 @@ export function CustomColorMapDialog({
             }
           />
         </label>
-        <label>
+        <label className="dialog-label">
           Maximum of {units}
           <input
             type="number"
@@ -173,7 +173,7 @@ export function CustomColorMapDialog({
           />
         </label>
         <div className="cmap-toggles">
-          <label className="cmap-dialog-toggle">
+          <label className="dialog-label cmap-dialog-toggle">
             <input
               type="checkbox"
               checked={tempIsLogScale}
@@ -181,7 +181,7 @@ export function CustomColorMapDialog({
             />
             Log Scale
           </label>
-          <label className="cmap-dialog-toggle">
+          <label className="dialog-label cmap-dialog-toggle">
             <input
               type="checkbox"
               checked={tempIsAbsValue}
diff --git a/src/components/LayerSelector.tsx b/src/components/LayerSelector.tsx
index 861fe1c..a52ddeb 100644
--- a/src/components/LayerSelector.tsx
+++ b/src/components/LayerSelector.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { SourceGroup } from '../types/maps';
 import { LayersIcon } from './icons/LayersIcon';
 import './styles/layer-selector.css';
@@ -9,7 +9,7 @@ import {
 } from './BaselayerHistoryNavigation';
 import { LockClosedIcon } from './icons/LockClosedIcon';
 import { LockOpenIcon } from './icons/LockOpenIcon';
-import { BaselayerSections } from './BaselayerSections';
+import BaselayerSections from './BaselayerSections';
 import { getCatalogMarkerColor } from '../utils/layerUtils';
 
 export interface LayerSelectorProps
@@ -52,6 +52,8 @@ export function LayerSelector({
   const menuRef = useRef<HTMLDivElement | null>(null);
   const [lockMenu, setLockMenu] = useState(false);
   const previousLockMenuHandlerRef = useRef<(e: KeyboardEvent) => void>(null);
+  const [searchText, setSearchText] = useState('');
+  const [debouncedSearchText, setDebouncedSearchText] = useState('');
 
   useEffect(() => {
     if (previousLockMenuHandlerRef.current) {
@@ -91,29 +93,88 @@ export function LayerSelector({
       );
   }, [setLockMenu, lockMenu, menuRef]);
 
-  const toggleMenu = useCallback(
-    (e: MouseEvent) => {
-      if (!menuRef.current || lockMenu) return;
-      const target = (e.target as HTMLElement).closest('div');
-      if (target && target.classList.contains('btn')) {
-        menuRef.current.classList.remove('hide');
-      }
-      if (target && target.classList.contains('menu')) {
-        menuRef.current.classList.add('hide');
+  const showMenu = useCallback(() => {
+    if (!menuRef.current || lockMenu) return;
+    menuRef.current.classList.remove('hide');
+  }, [lockMenu]);
+
+  const hideMenu = useCallback(() => {
+    if (!menuRef.current || lockMenu) return;
+    menuRef.current.classList.add('hide');
+  }, [lockMenu]);
+
+  useEffect(() => {
+    const id = setTimeout(() => {
+      setDebouncedSearchText(searchText);
+    }, 300);
+
+    return () => clearTimeout(id);
+  }, [searchText]);
+
+  const handleFilterChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setSearchText(e.target.value);
+  }, []);
+
+  const handleFilterKeyUp = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Escape') {
+        setSearchText('');
       }
     },
-    [menuRef, lockMenu]
+    []
+  );
+
+  const markMatchingSearchText = useCallback(
+    (label: string, shouldHighlight?: boolean) => {
+      if (
+        !debouncedSearchText.length ||
+        (shouldHighlight !== undefined && !shouldHighlight)
+      )
+        return label;
+
+      const substringStartIndex = label
+        .toLowerCase()
+        .indexOf(debouncedSearchText.toLowerCase());
+      if (substringStartIndex === -1) return label;
+      const substringStopIndex =
+        substringStartIndex + debouncedSearchText.length;
+
+      const preMarkedSubstring = label.slice(0, substringStartIndex);
+      const markedSubstring = label.slice(
+        substringStartIndex,
+        substringStopIndex
+      );
+      const postMarkedSubstring = label.slice(substringStopIndex);
+
+      return (
+        <>
+          {preMarkedSubstring}
+          <mark>{markedSubstring}</mark>
+          {postMarkedSubstring}
+        </>
+      );
+    },
+    [debouncedSearchText]
   );
 
+  const filteredSourceGroups = sourceGroups.filter((sourceGroup) =>
+    sourceGroup.name.toLowerCase().includes(debouncedSearchText.toLowerCase())
+  );
+
+  const filteredHighlightBoxes =
+    highlightBoxes?.filter((box) =>
+      box.name.toLowerCase().includes(debouncedSearchText.toLowerCase())
+    ) ?? [];
+
   return (
     <>
-      <div onMouseEnter={toggleMenu} className="layer-selector-container btn">
+      <div onMouseEnter={showMenu} className="layer-selector-container btn">
         <LayersIcon />
       </div>
       <div
         ref={menuRef}
         className={'layer-selector-container menu hide'}
-        onMouseLeave={toggleMenu}
+        onMouseLeave={hideMenu}
       >
         <div className="layer-selector-header">
           <h3>Select Layer</h3>
@@ -131,6 +192,16 @@ export function LayerSelector({
             goForward={goForward}
           />
         </div>
+        <div className="layer-filter-container">
+          <input
+            id="layer-filter-input"
+            type="text"
+            placeholder="Filter layers..."
+            value={searchText}
+            onChange={handleFilterChange}
+            onKeyUp={handleFilterKeyUp}
+          />
+        </div>
         <div className="layers-fieldset-container">
           <fieldset>
             <legend>Baselayers</legend>
@@ -139,51 +210,74 @@ export function LayerSelector({
               activeBaselayerId={activeBaselayerId}
               isFlipped={isFlipped}
               onBaselayerChange={onBaselayerChange}
+              searchText={debouncedSearchText}
+              markMatchingSearchText={markMatchingSearchText}
             />
           </fieldset>
           {sourceGroups.length ? (
             <fieldset>
               <legend>Source catalogs</legend>
-              {sourceGroups.map((sourceGroup) => (
-                <div
-                  className="input-container"
-                  key={sourceGroup.source_group_id + '-' + sourceGroup.name}
-                >
-                  <input
-                    className="source-group-input"
-                    style={{
-                      outlineColor: getCatalogMarkerColor(sourceGroup.clientId),
-                    }}
-                    onChange={onSelectedSourceGroupsChange}
-                    type="checkbox"
-                    id={String(sourceGroup.source_group_id)}
-                    value={sourceGroup.source_group_id}
-                    checked={activeSourceGroupIds.includes(
-                      sourceGroup.source_group_id
-                    )}
-                  />
-                  <label htmlFor={String(sourceGroup.source_group_id)}>
-                    {sourceGroup.name}
-                  </label>
-                </div>
-              ))}
+              {filteredSourceGroups.length ? (
+                filteredSourceGroups.map((sourceGroup) => (
+                  <div
+                    className="input-container"
+                    key={sourceGroup.source_group_id + '-' + sourceGroup.name}
+                  >
+                    <input
+                      className="source-group-input"
+                      style={{
+                        outlineColor: getCatalogMarkerColor(
+                          sourceGroup.clientId
+                        ),
+                      }}
+                      onChange={onSelectedSourceGroupsChange}
+                      type="checkbox"
+                      id={String(sourceGroup.source_group_id)}
+                      value={sourceGroup.source_group_id}
+                      checked={activeSourceGroupIds.includes(
+                        sourceGroup.source_group_id
+                      )}
+                    />
+                    <label
+                      className="layer-selector-input-label"
+                      htmlFor={String(sourceGroup.source_group_id)}
+                    >
+                      {markMatchingSearchText(sourceGroup.name)}
+                    </label>
+                  </div>
+                ))
+              ) : (
+                <NoMatches />
+              )}
             </fieldset>
           ) : null}
           {highlightBoxes && highlightBoxes.length ? (
             <fieldset>
               <legend>Highlight regions</legend>
-              {highlightBoxes.map((box) => (
-                <div className="input-container" key={box.id + '-' + box.name}>
-                  <input
-                    onChange={onSelectedHighlightBoxChange}
-                    type="checkbox"
-                    id={String(box.id)}
-                    value={box.id}
-                    checked={activeBoxIds.includes(box.id)}
-                  />
-                  <label htmlFor={String(box.id)}>{box.name}</label>
-                </div>
-              ))}
+              {filteredHighlightBoxes.length ? (
+                filteredHighlightBoxes.map((box) => (
+                  <div
+                    className="input-container"
+                    key={box.id + '-' + box.name}
+                  >
+                    <input
+                      onChange={onSelectedHighlightBoxChange}
+                      type="checkbox"
+                      id={String(box.id)}
+                      value={box.id}
+                      checked={activeBoxIds.includes(box.id)}
+                    />
+                    <label
+                      className="layer-selector-input-label"
+                      htmlFor={String(box.id)}
+                    >
+                      {markMatchingSearchText(box.name)}
+                    </label>
+                  </div>
+                ))
+              ) : (
+                <NoMatches />
+              )}
             </fieldset>
           ) : null}
         </div>
@@ -191,3 +285,11 @@ export function LayerSelector({
     </>
   );
 }
+
+export function NoMatches() {
+  return (
+    <span>
+      <em>No matches</em>
+    </span>
+  );
+}
diff --git a/src/components/icons/ChevronDownIcon.tsx b/src/components/icons/ChevronDownIcon.tsx
new file mode 100644
index 0000000..5496a32
--- /dev/null
+++ b/src/components/icons/ChevronDownIcon.tsx
@@ -0,0 +1,25 @@
+import { CSSProperties } from 'react';
+
+type Props = {
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+};
+
+export function ChevronDownIcon({ width = 14, height = 14 }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-chevron-down-icon lucide-chevron-down"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
diff --git a/src/components/icons/ChevronRightIcon.tsx b/src/components/icons/ChevronRightIcon.tsx
new file mode 100644
index 0000000..faa04b3
--- /dev/null
+++ b/src/components/icons/ChevronRightIcon.tsx
@@ -0,0 +1,25 @@
+import { CSSProperties } from 'react';
+
+type Props = {
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+};
+
+export function ChevronRightIcon({ width = 14, height = 14 }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-chevron-right-icon lucide-chevron-right"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}
diff --git a/src/components/styles/color-map-dialog.css b/src/components/styles/color-map-dialog.css
index 1d5b3de..e37946a 100644
--- a/src/components/styles/color-map-dialog.css
+++ b/src/components/styles/color-map-dialog.css
@@ -14,7 +14,7 @@ header {
   margin-left: 2em;
 }
 
-label {
+.dialog-label {
   font-size: 1.25em;
   display: flex;
   flex-direction: column;
diff --git a/src/components/styles/layer-selector.css b/src/components/styles/layer-selector.css
index 8780a1c..dbf3972 100644
--- a/src/components/styles/layer-selector.css
+++ b/src/components/styles/layer-selector.css
@@ -10,6 +10,20 @@
   border: 1px solid var(--border-color-unhovered);
   max-height: 90vh;
   max-width: 400px;
+  row-gap: 2px;
+}
+
+.layer-filter-container {
+  display: flex;
+  justify-content: center;
+}
+
+#layer-filter-input {
+  width: 200px;
+  font-size: 10px;
+  border-radius: 5px;
+  padding: 1px 5px;
+  margin: 1px 1px 0px 1px;
 }
 
 .layers-fieldset-container {
@@ -79,7 +93,8 @@
 
 .input-container > input {
   margin: 0;
-  font-size: 0.5;
+  margin-left: 10px;
+  height: 11px;
 }
 
 .layers-icon {
@@ -117,16 +132,30 @@ input[type='radio']:disabled {
   width: 1em;
 }
 
-.layer-selecter-input-label {
+.layer-title-container {
+  display: flex;
+  align-items: center;
+  cursor: default;
+}
+
+.external-layer-selector-input-label,
+.layer-selector-input-label {
   font-size: 10px;
   display: inline-block;
+}
+
+.layer-selector-input-label {
   margin-right: 15px;
 }
 
-.layer-selecter-input-label > input {
+.layer-selector-input-label:first-of-type {
+  margin-left: 10px;
+}
+
+.layer-selector-input-label > input {
   margin: 0;
   margin-right: 4px;
-  height: 12px;
+  height: 11px;
 }
 
 .source-group-input {
@@ -134,3 +163,8 @@ input[type='radio']:disabled {
   outline-width: 2px;
   outline-offset: -2px;
 }
+
+mark {
+  color: white;
+  background-color: #f26522;
+}
diff --git a/src/configs/mapSettings.ts b/src/configs/mapSettings.ts
index dcd5f7b..2e6036d 100644
--- a/src/configs/mapSettings.ts
+++ b/src/configs/mapSettings.ts
@@ -20,6 +20,8 @@ export const DEFAULT_INTERNAL_MAP_SETTINGS = {
   multiWorld: true,
 };
 
+export const EXTERNAL_DETAILS_ID = 'external-comparison-maps';
+
 export const EXTERNAL_BASELAYERS: ExternalBaselayer[] = [
   {
     layer_id: 'external-unwise-neo6',
diff --git a/src/utils/filterUtils.ts b/src/utils/filterUtils.ts
new file mode 100644
index 0000000..cbdf93a
--- /dev/null
+++ b/src/utils/filterUtils.ts
@@ -0,0 +1,153 @@
+import {
+  MapGroupResponse,
+  MapResponse,
+  BandResponse,
+  LayerResponse,
+} from '../types/maps';
+import { EXTERNAL_DETAILS_ID } from '../configs/mapSettings';
+import { LayerSelectorProps } from '../components/LayerSelector';
+
+/**
+ * <details> elements are closed by default. This method traverses to the selected baselayer
+ * and add its ID and its parent IDs to a Set that is then used to control the "open" state
+ * of the details elements such that, on render, the selected baselayer is shown.
+ * @param mapGroups
+ * @param activeBaselayerId
+ * @returns A set of IDs that are used to control the open/close state of <details> elements
+ */
+export function getDefaultExpandedState(
+  mapGroups: MapGroupResponse[],
+  activeBaselayerId: LayerSelectorProps['activeBaselayerId']
+) {
+  const expandedState: Set<string> = new Set<string>();
+  // Used for the comparison maps, which we default to open
+  expandedState.add(EXTERNAL_DETAILS_ID);
+
+  // Iterate over each mapGroup -> map -> band -> layer until we find the selected
+  // baselayer, at which point add the associated ID and parent IDs to the Set and
+  // break out of the loop/function via the return statement
+  for (const group of mapGroups) {
+    for (const map of group.maps) {
+      for (const band of map.bands) {
+        for (const layer of band.layers) {
+          if (layer.layer_id === activeBaselayerId) {
+            expandedState.add(band.band_id);
+            expandedState.add(map.map_id);
+            expandedState.add(group.name);
+            return expandedState;
+          }
+        }
+      }
+    }
+  }
+
+  // activeBaselayerId wasn't found, so return with only the comparison section's ID
+  return expandedState;
+}
+
+/**
+ * Helper to check if node's name matches the query
+ * @param name
+ * @param query
+ * @returns boolean
+ */
+function match(name: string, query: string) {
+  const lcQuery = query.trim().toLowerCase();
+  return name.toLowerCase().includes(lcQuery);
+}
+
+/**
+ * Applies the search query to filter away nodes from each mapGroup (or the mapGroup itself) while also
+ * adding IDs to a matchedIds set in order to determine which nodes should apply the <mark> element
+ * to its name.
+ * @param mapGroups
+ * @param query
+ * @returns An object with a list of filteredMapGroups and a set of matchedIds. The list of
+ * filteredMapGroups contains mapGroups that have removed nodes that do not match the search
+ * filter. The set of matchedIds is used to determine which node should have the <mark>
+ * elements applied to the matching search query.
+ */
+export function filterMapGroups(mapGroups: MapGroupResponse[], query: string) {
+  const matchedIds = new Set<string>();
+
+  const filteredMapGroups = mapGroups
+    .map((group) => {
+      const groupMatched = match(group.name, query);
+
+      // If group matches, keep group intact
+      if (groupMatched) {
+        matchedIds.add(group.name);
+        return group;
+      }
+
+      // Build filteredMaps (children may be filtered even if group matches;
+      // we'll decide which to return below)
+      const filteredMaps = group.maps
+        .map((map) => {
+          const mapMatched = match(map.name, query);
+
+          // If map matches, keep map intact
+          if (mapMatched) {
+            matchedIds.add(map.map_id);
+            return map;
+          }
+
+          const filteredBands = map.bands
+            .map((band) => {
+              const bandMatched = match(band.name, query);
+
+              // If band matches, keep band intact
+              if (bandMatched) {
+                matchedIds.add(band.band_id);
+                return band;
+              }
+
+              const filteredLayers = band.layers.filter((layer) => {
+                const layerMatched = match(layer.name, query);
+                if (layerMatched) matchedIds.add(layer.layer_id);
+                return layerMatched;
+              });
+
+              // Otherwise include band only if any layer matched
+              if (filteredLayers.length > 0) {
+                return { ...band, layers: filteredLayers };
+              }
+            })
+            .filter(Boolean) as BandResponse[];
+
+          // Otherwise include map only if any band matched
+          if (filteredBands.length > 0) {
+            return { ...map, bands: filteredBands };
+          }
+        })
+        .filter(Boolean) as MapResponse[];
+
+      // Otherwise include group only if any map matched
+      if (filteredMaps.length > 0) {
+        return { ...group, maps: filteredMaps };
+      }
+    })
+    .filter(Boolean) as MapGroupResponse[];
+
+  return { filteredMapGroups, matchedIds };
+}
+
+/**
+ * Simple utility function that takes any node and returns its ID. In the case of a MapGroup,
+ * the name attribute is used as its ID.
+ * @param node
+ * @returns The ID of a node
+ */
+export function getNodeId(
+  node: MapGroupResponse | MapResponse | BandResponse | LayerResponse
+) {
+  let id = node.name;
+  if ('layer_id' in node) {
+    id = node.layer_id;
+  } else if ('band_id' in node) {
+    id = node.band_id;
+  } else if ('map_id' in node) {
+    id = node.map_id;
+  }
+  return id;
+}