diff --git a/packages/core/components/ComboBox/ComboBox.tsx b/packages/core/components/ComboBox/ComboBox.tsx
index 1144875928..e79f732bc5 100644
--- a/packages/core/components/ComboBox/ComboBox.tsx
+++ b/packages/core/components/ComboBox/ComboBox.tsx
@@ -121,7 +121,6 @@ const ComboBox: React.FC<ComboBoxProps> = ({
     setQuery('')
     setFocused(false)
     setActiveIndex(-1)
-    inputRef.current?.blur()
   }
 
   // Handle input change (typing)
@@ -181,7 +180,6 @@ const ComboBox: React.FC<ComboBoxProps> = ({
         setQuery('')
         setFocused(false)
         setActiveIndex(-1)
-        inputRef.current?.blur()
         break
 
       case 'Tab':
diff --git a/packages/core/components/ComboBox/combobox.styles.css b/packages/core/components/ComboBox/combobox.styles.css
index eb8ab507c7..dea12a8917 100644
--- a/packages/core/components/ComboBox/combobox.styles.css
+++ b/packages/core/components/ComboBox/combobox.styles.css
@@ -9,6 +9,11 @@
     display: flex;
     position: relative;
     width: 100%;
+
+    &:focus-within {
+      outline: dashed 2px rgb(0, 122, 153) !important;
+      outline-offset: 3px !important;
+    }
   }
 
   input.cove-combobox-input[role='combobox'] {
@@ -36,12 +41,12 @@
     border: 1px solid var(--cool-gray-10) !important;
     box-shadow: none;
     color: var(--cool-gray-90);
+    outline: none !important;
   }
 
   input.cove-combobox-input[role='combobox']:focus-visible {
     border-radius: 6px !important;
-    outline: dashed 2px rgb(0, 122, 153) !important;
-    outline-offset: 3px !important;
+    outline: none !important;
   }
 
   input.cove-combobox-input[role='combobox']:disabled {
@@ -119,9 +124,9 @@
     color: var(--cool-gray-90);
     cursor: pointer;
     font-family: var(--app-font-secondary);
-    font-size: 0.778rem;
+    font-size: 0.883rem;
     font-weight: 300;
-    padding: 0.5rem 0.5rem;
+    padding: 0.3rem 0.3rem;
     transition: background-color 0.15s ease-in-out;
     user-select: none;
   }
diff --git a/packages/core/components/ComboBox/tests/ComboBox.test.tsx b/packages/core/components/ComboBox/tests/ComboBox.test.tsx
new file mode 100644
index 0000000000..4a9c8c7de0
--- /dev/null
+++ b/packages/core/components/ComboBox/tests/ComboBox.test.tsx
@@ -0,0 +1,57 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import ComboBox from '../ComboBox'
+
+vi.mock('../../../assets/icon-magnifying-glass.svg', () => ({
+  default: props => <svg data-testid='mock-magnifying-glass' {...props} />
+}))
+
+const options = [
+  { value: '2023', label: '2023' },
+  { value: '2024', label: '2024' },
+  { value: '2025', label: '2025' }
+]
+
+const renderComboBox = (selected = '2023') => {
+  const updateField = vi.fn()
+
+  render(
+    <ComboBox fieldName='year' label='Year' options={options} selected={selected} updateField={updateField} />
+  )
+
+  return {
+    input: screen.getByRole('combobox'),
+    updateField
+  }
+}
+
+describe('ComboBox', () => {
+  it('keeps focus on the input when escape closes the listbox', () => {
+    const { input } = renderComboBox()
+
+    input.focus()
+    fireEvent.keyDown(input, { key: 'ArrowDown' })
+
+    expect(input).toHaveAttribute('aria-expanded', 'true')
+
+    fireEvent.keyDown(input, { key: 'Escape' })
+
+    expect(input).toHaveFocus()
+    expect(input).toHaveAttribute('aria-expanded', 'false')
+    expect(input).toHaveDisplayValue('2023')
+  })
+
+  it('selects the active option with enter and restores the closed display', () => {
+    const { input, updateField } = renderComboBox()
+
+    input.focus()
+    fireEvent.change(input, { target: { value: '2024' } })
+    fireEvent.keyDown(input, { key: 'ArrowDown' })
+    fireEvent.keyDown(input, { key: 'Enter' })
+
+    expect(updateField).toHaveBeenCalledWith(null, null, 'year', '2024')
+    expect(input).toHaveFocus()
+    expect(input).toHaveAttribute('aria-expanded', 'false')
+    expect(input).toHaveDisplayValue('2023')
+  })
+})
diff --git a/packages/core/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.test.tsx b/packages/core/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.test.tsx
new file mode 100644
index 0000000000..5b75d50c6b
--- /dev/null
+++ b/packages/core/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.test.tsx
@@ -0,0 +1,104 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import NestedDropdownEditor from './NestedDropdownEditor'
+
+describe('NestedDropdownEditor', () => {
+  it('renders the subgroup-only checkbox below Create query parameters and defaults it to unchecked', () => {
+    const updateField = vi.fn()
+
+    render(
+      <NestedDropdownEditor
+        config={
+          {
+            filters: [
+              {
+                label: 'Year and Quarter',
+                filterStyle: 'nested-dropdown',
+                columnName: 'year',
+                values: ['2023', '2024'],
+                order: 'asc',
+                subGrouping: {
+                  columnName: 'quarter',
+                  valuesLookup: {
+                    '2023': { values: ['Q1', 'Q2'] },
+                    '2024': { values: ['Q3', 'Q4'] }
+                  }
+                }
+              }
+            ]
+          } as any
+        }
+        dataColumns={['year', 'quarter', 'region']}
+        filterIndex={0}
+        handleGroupingCustomOrder={vi.fn()}
+        handleNameChange={vi.fn()}
+        rawData={[
+          { year: '2023', quarter: 'Q1' },
+          { year: '2023', quarter: 'Q2' },
+          { year: '2024', quarter: 'Q3' }
+        ]}
+        updateField={updateField}
+        updateFilterStyle={vi.fn()}
+      />
+    )
+
+    const queryParameters = screen.getByLabelText('Create query parameters')
+    const displaySubgroupingOnly = screen.getByLabelText('Display subgrouping only')
+
+    expect(displaySubgroupingOnly).not.toBeChecked()
+
+    const queryParametersLabel = queryParameters.closest('label')
+    const displaySubgroupingOnlyLabel = displaySubgroupingOnly.closest('label')
+    const isBelowQueryParameters = !!(
+      queryParametersLabel &&
+      displaySubgroupingOnlyLabel &&
+      queryParametersLabel.compareDocumentPosition(displaySubgroupingOnlyLabel) & Node.DOCUMENT_POSITION_FOLLOWING
+    )
+
+    expect(isBelowQueryParameters).toBe(true)
+
+    fireEvent.click(displaySubgroupingOnly)
+
+    expect(updateField).toHaveBeenCalledWith('filters', 0, 'displaySubgroupingOnly', true)
+  })
+
+  it('does not render the subgroup-only checkbox when the filter is not nested-dropdown', () => {
+    render(
+      <NestedDropdownEditor
+        config={
+          {
+            filters: [
+              {
+                label: 'Year and Quarter',
+                filterStyle: 'dropdown',
+                columnName: 'year',
+                values: ['2023', '2024'],
+                order: 'asc',
+                subGrouping: {
+                  columnName: 'quarter',
+                  valuesLookup: {
+                    '2023': { values: ['Q1', 'Q2'] },
+                    '2024': { values: ['Q3', 'Q4'] }
+                  }
+                }
+              }
+            ]
+          } as any
+        }
+        dataColumns={['year', 'quarter', 'region']}
+        filterIndex={0}
+        handleGroupingCustomOrder={vi.fn()}
+        handleNameChange={vi.fn()}
+        rawData={[
+          { year: '2023', quarter: 'Q1' },
+          { year: '2023', quarter: 'Q2' },
+          { year: '2024', quarter: 'Q3' }
+        ]}
+        updateField={vi.fn()}
+        updateFilterStyle={vi.fn()}
+      />
+    )
+
+    expect(screen.queryByLabelText('Display subgrouping only')).not.toBeInTheDocument()
+  })
+})
diff --git a/packages/core/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx b/packages/core/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx
index 2727a939ea..15520df627 100644
--- a/packages/core/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx
+++ b/packages/core/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx
@@ -217,6 +217,20 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
         )}
       </label>
 
+      {filter.filterStyle === 'nested-dropdown' && (
+        <label>
+          <input
+            type='checkbox'
+            checked={!!filter.displaySubgroupingOnly}
+            aria-label='Display subgrouping only'
+            onChange={e => {
+              updateGroupingFilterProp('displaySubgroupingOnly', e.target.checked)
+            }}
+          />
+          <span> Display subgrouping only</span>
+        </label>
+      )}
+
       <div className='mt-2'>
         <div className='edit-label column-heading float-right'>{filter.columnName} </div>
         <Select
diff --git a/packages/core/components/Filters/Filters.tsx b/packages/core/components/Filters/Filters.tsx
index b306148862..b27d9f22f7 100644
--- a/packages/core/components/Filters/Filters.tsx
+++ b/packages/core/components/Filters/Filters.tsx
@@ -308,6 +308,7 @@ const Filters: React.FC<FilterProps> = ({
                   <NestedDropdown
                     activeGroup={nestedActiveGroup}
                     activeSubGroup={nestedActiveSubGroup}
+                    displaySubgroupingOnly={singleFilter.displaySubgroupingOnly}
                     filterIndex={outerIndex}
                     options={getNestedOptions(singleFilter)}
                     listLabel={label}
diff --git a/packages/core/components/NestedDropdown/NestedDropdown.tsx b/packages/core/components/NestedDropdown/NestedDropdown.tsx
index 54ad307eb4..8b5ab07cd7 100644
--- a/packages/core/components/NestedDropdown/NestedDropdown.tsx
+++ b/packages/core/components/NestedDropdown/NestedDropdown.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useMemo, useId } from 'react'
+import { useState, useEffect, useRef, useMemo, useId, type FocusEvent } from 'react'
 import './nesteddropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
 import { filterSearchTerm, NestedOptions, ValueTextPair } from './nestedDropdownHelpers'
@@ -6,13 +6,12 @@ import Loader from '../Loader'
 
 const Options: React.FC<{
   subOptions: ValueTextPair[]
-  handleBlur: React.FocusEventHandler<HTMLLIElement>
   filterIndex: number
   label: string
   handleSubGroupSelect: Function
   userSelectedLabel: string
   userSearchTerm: string
-}> = ({ subOptions, handleBlur, filterIndex, label, handleSubGroupSelect, userSelectedLabel, userSearchTerm }) => {
+}> = ({ subOptions, filterIndex, label, handleSubGroupSelect, userSelectedLabel, userSearchTerm }) => {
   const [isTierOneExpanded, setIsTierOneExpanded] = useState(true)
   const checkMark = <>&#10004;</>
 
@@ -46,20 +45,27 @@ const Options: React.FC<{
         tabIndex={0}
         aria-label={label}
         onClick={handleGroupClick}
-        onBlur={handleBlur}
         onKeyUp={handleKeyUp}
         className={`nested-dropdown-group-${filterIndex}`}
       >
-        <span className={'font-weight-bold fw-bold'}>{label} </span>
-        {
-          <span className='list-arrow' aria-hidden='true'>
+        <span className='nested-dropdown-group-header'>
+          <span className='nested-dropdown-group-label'>{label} </span>
+          <span className='list-arrow nested-dropdown-group-arrow' aria-hidden='true'>
             {isTierOneExpanded ? (
-              <Icon display='caretFilledUp' alt='arrow pointing up' />
+              <Icon
+                display='caretFilledDown'
+                alt='arrow pointing down'
+                className='nested-dropdown-group-arrow-icon'
+              />
             ) : (
-              <Icon display='caretFilledDown' alt='arrow pointing down' />
+              <Icon
+                display='caretFilledDown'
+                alt='arrow pointing right'
+                className='nested-dropdown-group-arrow-icon nested-dropdown-group-arrow-icon--collapsed'
+              />
             )}
           </span>
-        }
+        </span>
         <ul
           aria-expanded={isTierOneExpanded}
           role='group'
@@ -108,6 +114,7 @@ const Options: React.FC<{
 type NestedDropdownProps = {
   activeGroup: string
   activeSubGroup?: string
+  displaySubgroupingOnly?: boolean
   filterIndex: number
   listLabel: string
   handleSelectedItems: ([group, subgroup]: [string, string]) => void
@@ -119,6 +126,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
   options,
   activeGroup,
   activeSubGroup,
+  displaySubgroupingOnly = false,
   filterIndex,
   listLabel,
   handleSelectedItems,
@@ -130,19 +138,29 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
 
   const inputValue = useMemo(() => {
     // value from props
-    return activeSubGroup ? `${activeGroup} - ${activeSubGroup}` : ''
-  }, [activeGroup, activeSubGroup])
+    if (!activeSubGroup) return ''
+    return displaySubgroupingOnly ? activeSubGroup : `${activeGroup} - ${activeSubGroup}`
+  }, [activeGroup, activeSubGroup, displaySubgroupingOnly])
+  const inputPlaceholder = useMemo(() => {
+    if (loading) return 'Loading...'
+    return inputValue || '- Select -'
+  }, [inputValue, loading])
   const [inputHasFocus, setInputHasFocus] = useState(false)
   const [isListOpened, setIsListOpened] = useState(false)
   const nestedDropdownRef = useRef(null)
   const searchInput = useRef(null)
   const searchDropdown = useRef(null)
 
-  const chooseSelectedSubGroup = (tierOne: string | number, tierTwo: string | number) => {
-    searchInput.current.focus()
-    setUserSearchTerm(null)
+  const resetDropdownInteraction = () => {
+    setInputHasFocus(false)
     setIsListOpened(false)
+    setUserSearchTerm(null)
+  }
+
+  const chooseSelectedSubGroup = (tierOne: string | number, tierTwo: string | number) => {
+    resetDropdownInteraction()
     handleSelectedItems([String(tierOne), String(tierTwo)])
+    searchInput.current?.focus()
   }
 
   const handleKeyUp = e => {
@@ -211,8 +229,8 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
 
       case 'Escape':
         {
-          setIsListOpened(false)
-          searchInput.current.focus()
+          resetDropdownInteraction()
+          searchInput.current?.focus()
         }
         break
     }
@@ -228,28 +246,24 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
     setUserSearchTerm(newSearchTerm)
   }
 
-  const handleOnBlur = (e: React.FocusEvent<HTMLLIElement, Element>): void => {
-    if (
-      e.relatedTarget === null ||
-      ![
-        `nested-dropdown-${filterIndex}`,
-        `nested-dropdown-group-${filterIndex}`,
-        `selectable-item-${filterIndex}`,
-        `main-nested-dropdown-container-${filterIndex}`
-      ].includes(e.relatedTarget.className)
-    ) {
-      setInputHasFocus(false)
-      setIsListOpened(false)
-    } else {
-      ; (e.relatedTarget as HTMLElement).focus()
+  const handleInputFocus = () => {
+    setInputHasFocus(true)
+
+    if (userSearchTerm === null) {
+      setUserSearchTerm('')
+      requestAnimationFrame(() => {
+        searchInput.current?.setSelectionRange?.(0, 0)
+      })
     }
   }
 
-  function handleBlur(nestedDropdown, handleOnBlur) {
-    nestedDropdown?.addEventListener('blur', handleOnBlur)
+  const handleOnBlur = (e: FocusEvent<HTMLDivElement>): void => {
+    const relatedTarget = e.relatedTarget as Node | null
+
+    if (!relatedTarget || !nestedDropdownRef.current?.contains(relatedTarget)) {
+      resetDropdownInteraction()
+    }
   }
-  handleBlur(searchInput.current, e => handleOnBlur(e))
-  handleBlur(searchDropdown.current, e => handleOnBlur(e))
 
   return (
     <>
@@ -258,6 +272,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
         ref={nestedDropdownRef}
         className={`nested-dropdown nested-dropdown-${filterIndex} ${isListOpened ? 'open-filter' : ''}`}
         onKeyUp={handleKeyUp}
+        onBlur={handleOnBlur}
       >
         <div
           className={`nested-dropdown-input-container${loading || !options?.length ? ' disabled' : ''}`}
@@ -272,15 +287,16 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
             aria-label='searchInput'
             aria-haspopup='true'
             aria-hidden='false'
+            autoComplete='off'
             tabIndex={0}
             value={userSearchTerm !== null ? userSearchTerm : inputValue}
             onChange={handleSearchTermChange}
-            placeholder={loading ? 'Loading...' : '- Select -'}
+            placeholder={inputPlaceholder}
             disabled={loading || !options?.length}
             onClick={() => {
               if (inputHasFocus) setIsListOpened(!isListOpened)
             }}
-            onFocus={() => setInputHasFocus(true)}
+            onFocus={handleInputFocus}
           />
           <span className='list-arrow' aria-hidden={true}>
             {isListOpened ? (
@@ -307,7 +323,6 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
               return (
                 <Options
                   key={groupTextValue + '_' + index}
-                  handleBlur={handleOnBlur}
                   subOptions={subgroup}
                   filterIndex={filterIndex}
                   label={groupTextValue}
diff --git a/packages/core/components/NestedDropdown/nesteddropdown.styles.css b/packages/core/components/NestedDropdown/nesteddropdown.styles.css
index 8c077a8628..de4b7d00b1 100644
--- a/packages/core/components/NestedDropdown/nesteddropdown.styles.css
+++ b/packages/core/components/NestedDropdown/nesteddropdown.styles.css
@@ -16,16 +16,23 @@
   }
 
   .search-input {
-
     border: none;
     color: var(--cool-gray-90);
     display: inline-block;
     font-weight: 300;
     padding: 0;
     position: relative;
+    top: 1px;
     width: 100%;
     &::placeholder {
-      color: var(--cool-gray-90);
+      color: #6c757d;
+      opacity: 1;
+    }
+
+    &:focus,
+    &:focus-visible {
+      box-shadow: none;
+      outline: none !important;
     }
   }
 
@@ -42,9 +49,11 @@
   }
 
   [class^='selectable-item-'] {
-    font-weight: normal;
+    color: var(--cool-gray-90);
+    font-size: 0.833rem !important;
+    font-weight: 300;
     list-style: none;
-    padding-left: 20px;
+    padding: 0.1rem 0 0.1rem 20px;
     position: relative;
     white-space: nowrap;
 
@@ -54,22 +63,34 @@
     }
 
     &:hover {
-      background-color: var(--lightGray);
+      background-color: var(--cool-gray-10);
+    }
+
+    &:focus,
+    &:focus-visible {
+      background-color: var(--cool-gray-10);
+      outline: none;
     }
   }
 
   .nested-dropdown-input-container {
     border-radius: 0.333rem;
     display: block;
-    padding: calc(0.4rem + 1px) 0.75rem;
+    padding: calc(0.4rem + 1px) 0.75rem calc(0.4rem + 1px) calc(0.75rem - 4px);
     position: relative;
     width: calc(100% + 7px);
+
+    &:focus-within:not(.disabled) {
+      outline: dashed 2px rgb(0, 122, 153) !important;
+      outline-offset: 3px !important;
+    }
+
     & > span.list-arrow {
       float: right;
       pointer-events: none;
       position: absolute;
-      right: 9px;
-      top: 9px;
+      right: 8px;
+      top: 11px;
     }
 
     &.disabled {
@@ -82,6 +103,8 @@
 
   & [class^='main-nested-dropdown-container-'] {
     background: white;
+    color: var(--cool-gray-90);
+    font-size: 0.833rem !important;
     max-height: 375px;
     min-width: 200px;
     overflow-y: auto;
@@ -89,6 +112,57 @@
     z-index: 3;
   }
 
+  [class^='nested-dropdown-group-'] {
+    cursor: pointer;
+    font-size: 0.833rem !important;
+    font-weight: 400;
+  }
+
+  .nested-dropdown-group-header {
+    box-sizing: border-box;
+    display: inline-flex;
+    padding: 0.1rem 0 0.1rem 0.2rem;
+    width: 100%;
+
+    &:hover {
+      background-color: var(--cool-gray-10);
+    }
+  }
+
+  [class^='nested-dropdown-group-'] {
+    &:focus,
+    &:focus-visible {
+      outline: none;
+
+      .nested-dropdown-group-header {
+        background-color: var(--cool-gray-10);
+      }
+    }
+  }
+
+  .nested-dropdown-group-arrow {
+    cursor: pointer;
+    display: inline-flex;
+    margin-left: 0.25rem;
+    vertical-align: middle;
+  }
+
+  .nested-dropdown-group-arrow-icon {
+    cursor: pointer !important;
+    width: 12px;
+  }
+
+  .nested-dropdown-group-arrow-icon--collapsed {
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+
+  .nested-dropdown-group-label {
+    color: var(--cool-gray-90);
+    font-size: 0.833rem !important;
+    font-weight: 600 !important;
+  }
+
   .hide {
     display: none;
   }
diff --git a/packages/core/components/NestedDropdown/tests/NestedDropdown.test.tsx b/packages/core/components/NestedDropdown/tests/NestedDropdown.test.tsx
new file mode 100644
index 0000000000..8930143dec
--- /dev/null
+++ b/packages/core/components/NestedDropdown/tests/NestedDropdown.test.tsx
@@ -0,0 +1,177 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import NestedDropdown from '../NestedDropdown'
+import { NestedOptions } from '../nestedDropdownHelpers'
+
+vi.mock('../../ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+const options: NestedOptions = [
+  [['2023'], [['Q1'], ['Q2']]],
+  [['2024'], [['Q3'], ['Q4']]]
+]
+
+const getSearchInput = () => screen.getAllByLabelText('searchInput').find(el => el.tagName === 'INPUT') as HTMLInputElement
+
+describe('NestedDropdown', () => {
+  it('shows the default closed display as group and subgroup', () => {
+    render(
+      <NestedDropdown
+        activeGroup='2023'
+        activeSubGroup='Q2'
+        filterIndex={0}
+        handleSelectedItems={vi.fn()}
+        listLabel='Year and Quarter'
+        options={options}
+      />
+    )
+
+    expect(getSearchInput()).toHaveValue('2023 - Q2')
+  })
+
+  it('shows only the subgroup in the closed display when enabled', () => {
+    render(
+      <NestedDropdown
+        activeGroup='2023'
+        activeSubGroup='Q2'
+        displaySubgroupingOnly
+        filterIndex={0}
+        handleSelectedItems={vi.fn()}
+        listLabel='Year and Quarter'
+        options={options}
+      />
+    )
+
+    expect(getSearchInput()).toHaveValue('Q2')
+  })
+
+  it('preserves the empty state when no subgroup is selected', () => {
+    render(
+      <NestedDropdown
+        activeGroup=''
+        activeSubGroup=''
+        displaySubgroupingOnly
+        filterIndex={0}
+        handleSelectedItems={vi.fn()}
+        listLabel='Year and Quarter'
+        options={options}
+      />
+    )
+
+    const input = getSearchInput()
+    expect(input).toHaveValue('')
+    expect(input).toHaveAttribute('placeholder', '- Select -')
+  })
+
+  it.each([false, true])('keeps search and selection behavior unchanged when displaySubgroupingOnly=%s', flag => {
+    const handleSelectedItems = vi.fn()
+
+    render(
+      <NestedDropdown
+        activeGroup='2023'
+        activeSubGroup='Q2'
+        displaySubgroupingOnly={flag}
+        filterIndex={0}
+        handleSelectedItems={handleSelectedItems}
+        listLabel='Year and Quarter'
+        options={options}
+      />
+    )
+
+    const input = getSearchInput()
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 'Q3' } })
+
+    expect(screen.getByText('2024')).toBeInTheDocument()
+    expect(screen.queryByText('2023')).not.toBeInTheDocument()
+    expect(screen.getByText('Q3')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Q3'))
+
+    expect(handleSelectedItems).toHaveBeenCalledWith(['2024', 'Q3'])
+  })
+
+  it.each([false, true])('restores the closed display text on escape when displaySubgroupingOnly=%s', flag => {
+    render(
+      <NestedDropdown
+        activeGroup='2023'
+        activeSubGroup='Q2'
+        displaySubgroupingOnly={flag}
+        filterIndex={0}
+        handleSelectedItems={vi.fn()}
+        listLabel='Year and Quarter'
+        options={options}
+      />
+    )
+
+    const input = getSearchInput()
+    const expectedClosedValue = flag ? 'Q2' : '2023 - Q2'
+
+    fireEvent.focus(input)
+    expect(input).toHaveValue('')
+
+    fireEvent.keyUp(input, { key: 'ArrowDown' })
+    fireEvent.keyUp(screen.getByRole('treeitem', { name: '2023' }), { key: 'Escape' })
+
+    expect(input).toHaveValue(expectedClosedValue)
+    expect(input).toHaveFocus()
+    expect(screen.getByRole('tree')).toHaveClass('hide')
+  })
+
+  it('keeps the dropdown open when focus moves from the list back to the input', () => {
+    render(
+      <NestedDropdown
+        activeGroup='2023'
+        activeSubGroup='Q2'
+        filterIndex={0}
+        handleSelectedItems={vi.fn()}
+        listLabel='Year and Quarter'
+        options={options}
+      />
+    )
+
+    const input = getSearchInput()
+
+    fireEvent.focus(input)
+    fireEvent.keyUp(input, { key: 'ArrowDown' })
+
+    const firstGroup = screen.getByRole('treeitem', { name: '2023' })
+    expect(firstGroup).toHaveFocus()
+
+    fireEvent.keyUp(firstGroup, { key: 'ArrowUp' })
+
+    expect(input).toHaveFocus()
+    expect(screen.getByRole('tree')).not.toHaveClass('hide')
+  })
+
+  it('keeps focus on the input when selecting a subgroup with the keyboard', () => {
+    const handleSelectedItems = vi.fn()
+
+    render(
+      <NestedDropdown
+        activeGroup='2023'
+        activeSubGroup='Q2'
+        filterIndex={0}
+        handleSelectedItems={handleSelectedItems}
+        listLabel='Year and Quarter'
+        options={options}
+      />
+    )
+
+    const input = getSearchInput()
+
+    input.focus()
+    fireEvent.keyUp(input, { key: 'ArrowDown' })
+    fireEvent.keyUp(screen.getByRole('treeitem', { name: '2023' }), { key: 'ArrowDown' })
+
+    const subgroup = screen.getByRole('treeitem', { name: '2023Q1' })
+    expect(subgroup).toHaveFocus()
+
+    fireEvent.keyUp(subgroup, { key: 'Enter' })
+
+    expect(handleSelectedItems).toHaveBeenCalledWith(['2023', 'Q1'])
+    expect(input).toHaveFocus()
+    expect(screen.getByRole('tree')).toHaveClass('hide')
+  })
+})
diff --git a/packages/core/components/_stories/NestedDropdown.stories.tsx b/packages/core/components/_stories/NestedDropdown.stories.tsx
index 5bc8655bd4..ac20cc5b54 100644
--- a/packages/core/components/_stories/NestedDropdown.stories.tsx
+++ b/packages/core/components/_stories/NestedDropdown.stories.tsx
@@ -1,34 +1,69 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
 import NestedDropdown from '../NestedDropdown'
 import nestedDropdownStory from './_mocks/nested-dropdown.json'
 import { useState } from 'react'
+import { getNestedOptions } from '../Filters/helpers/getNestedOptions'
 
-const meta: Meta<typeof NestedDropdown> = {
-  title: 'Components/Molecules/NestedDropdown',
-  component: NestedDropdown
-}
+const nestedDropdownOptions = getNestedOptions(nestedDropdownStory as any)
 
-const Template = args => {
-  const [currentStoryFilter, setCurrentStoryFilter] = useState({
-    ...nestedDropdownStory
+const NestedDropdownStory = args => {
+  const [selection, setSelection] = useState({
+    activeGroup: args.activeGroup,
+    activeSubGroup: args.activeSubGroup
   })
+
   return (
     <NestedDropdown
-      listLabel='Age'
       handleSelectedItems={([group, subGroup]) => {
-        setCurrentStoryFilter({
-          ...currentStoryFilter,
-          active: group,
-          subGrouping: { ...currentStoryFilter.subGrouping, active: subGroup }
-        })
+        setSelection({ activeGroup: group, activeSubGroup: subGroup })
       }}
-      currentFilter={currentStoryFilter}
+      {...args}
+      activeGroup={selection.activeGroup}
+      activeSubGroup={selection.activeSubGroup}
     />
   )
 }
 
+const getSearchInput = (canvasElement: HTMLElement) =>
+  Array.from(canvasElement.querySelectorAll('input')).find(input => input.classList.contains('search-input'))
+
+const meta: Meta<typeof NestedDropdown> = {
+  title: 'Components/Molecules/NestedDropdown',
+  component: NestedDropdown,
+  render: args => <NestedDropdownStory {...args} />
+}
+
 type Story = StoryObj<typeof NestedDropdown>
 
-export const Primary: Story = Template.bind({})
+export const DefaultDisplay: Story = {
+  args: {
+    activeGroup: 'Age Group',
+    activeSubGroup: '50-64 years',
+    displaySubgroupingOnly: false,
+    filterIndex: 0,
+    handleSelectedItems: () => {},
+    listLabel: 'Age',
+    options: nestedDropdownOptions
+  },
+  play: async ({ canvasElement }) => {
+    expect(getSearchInput(canvasElement)).toHaveValue('Age Group - 50-64 years')
+  }
+}
+
+export const SubgroupOnlyDisplay: Story = {
+  args: {
+    activeGroup: 'Age Group',
+    activeSubGroup: '50-64 years',
+    displaySubgroupingOnly: true,
+    filterIndex: 0,
+    handleSelectedItems: () => {},
+    listLabel: 'Age',
+    options: nestedDropdownOptions
+  },
+  play: async ({ canvasElement }) => {
+    expect(getSearchInput(canvasElement)).toHaveValue('50-64 years')
+  }
+}
 
 export default meta
diff --git a/packages/core/types/VizFilter.ts b/packages/core/types/VizFilter.ts
index a38432f8ee..c1ae3a4fdd 100644
--- a/packages/core/types/VizFilter.ts
+++ b/packages/core/types/VizFilter.ts
@@ -20,12 +20,13 @@ export type VizFilterStyle =
   | 'multi-select'
   | 'nested-dropdown'
   | 'combobox'
-export type GeneralFilter = FilterBase & {
-  active: string
-  queuedActive: string | string[]
-  filterStyle: VizFilterStyle
-  label: string
-  labels?: Record<string, string>
+export type GeneralFilter = FilterBase & {
+  active: string
+  queuedActive: string | string[]
+  displaySubgroupingOnly?: boolean
+  filterStyle: VizFilterStyle
+  label: string
+  labels?: Record<string, string>
   order: OrderBy
   orderColumn?: string
   orderedValues?: string[] // should only exist if the order is 'cust'
diff --git a/packages/dashboard/src/_stories/Dashboard.stories.tsx b/packages/dashboard/src/_stories/Dashboard.stories.tsx
index 08fb251c14..3f13dc6eac 100644
--- a/packages/dashboard/src/_stories/Dashboard.stories.tsx
+++ b/packages/dashboard/src/_stories/Dashboard.stories.tsx
@@ -49,8 +49,10 @@ import TabSimpleFilterConfig from './_mock/tab-simple-filter.json'
 import DashboardFilterAsc from './_mock/dashboard-filter-asc.json'
 const DashboardFilterDesc = cloneDeep(DashboardFilterAsc)
 const DashboardFilterCust = cloneDeep(DashboardFilterAsc)
+const NestedParentChildFiltersSubgroupOnly = cloneDeep(NestedParentChildFilters)
 DashboardFilterDesc.dashboard.sharedFilters[0].order = 'desc'
 DashboardFilterCust.dashboard.sharedFilters[0].order = 'cust'
+NestedParentChildFiltersSubgroupOnly.dashboard.sharedFilters[1].displaySubgroupingOnly = true
 
 // On DashboardFilterCust change the sharedFilters[0].values and orderedValues to be in a custom order
 const customOrder = ['American Samoa', 'Alaska', 'Alabama', 'Arizona', 'Arkansas']
@@ -4788,8 +4790,7 @@ export const Nested_Dropdown_With_Parent_Child: Story = {
 
     // Verify defaultValue is applied on initial load (North region, 2023 Q2)
     expect(initialState.regionSelected).toBe('North')
-    expect(initialState.yearQuarterSelected).toContain('2023')
-    expect(initialState.yearQuarterSelected).toContain('Q2')
+    expect(initialState.yearQuarterSelected).toBe('2023 - Q2')
     expect(initialState.chartRendered).toBe(true)
 
     // Test 1: Change region to South → year options should update based on available data
@@ -4846,6 +4847,31 @@ export const Nested_Dropdown_With_Parent_Child: Story = {
   }
 }
 
+export const Nested_Dropdown_With_Parent_Child_Subgroup_Only: Story = {
+  args: {
+    config: NestedParentChildFiltersSubgroupOnly as unknown as Config,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Displays only the selected subgroup in the closed nested dropdown input while preserving the same filter behavior.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const regionFilter = (await canvas.findByLabelText('Region', { selector: 'select' })) as HTMLSelectElement
+    const yearQuarterInput = canvasElement.querySelector('.nested-dropdown input') as HTMLInputElement
+
+    await waitForOptionsToPopulate(regionFilter, 4)
+
+    expect(regionFilter.value).toBe('North')
+    expect(yearQuarterInput.value).toBe('Q2')
+  }
+}
+
 export const Metadata_In_Dashboard: Story = {
   args: {
     configUrl: '/packages/dashboard/tests/fixtures/dashboard-config-with-metadata.json'
diff --git a/packages/dashboard/src/components/DashboardFilters/DashboardFilters.test.tsx b/packages/dashboard/src/components/DashboardFilters/DashboardFilters.test.tsx
new file mode 100644
index 0000000000..e160172d3d
--- /dev/null
+++ b/packages/dashboard/src/components/DashboardFilters/DashboardFilters.test.tsx
@@ -0,0 +1,129 @@
+import { fireEvent, render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import DashboardFilters from './DashboardFilters'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+const createDataBackedFilter = (displaySubgroupingOnly = false) =>
+  ({
+    key: 'Year and Quarter',
+    type: 'datafilter',
+    filterStyle: 'nested-dropdown',
+    showDropdown: true,
+    values: ['2023', '2024'],
+    columnName: 'year',
+    id: 0,
+    parents: [],
+    order: 'asc',
+    active: '2023',
+    displaySubgroupingOnly,
+    subGrouping: {
+      columnName: 'quarter',
+      active: 'Q2',
+      valuesLookup: {
+        '2023': { values: ['Q1', 'Q2'] },
+        '2024': { values: ['Q3', 'Q4'] }
+      }
+    }
+  } as any)
+
+const createApiBackedFilter = (displaySubgroupingOnly = false) =>
+  ({
+    key: 'API Year and Quarter',
+    type: 'urlfilter',
+    filterStyle: 'nested-dropdown',
+    showDropdown: true,
+    values: [],
+    columnName: 'year',
+    id: 0,
+    parents: [],
+    order: 'asc',
+    active: '2023',
+    displaySubgroupingOnly,
+    apiFilter: {
+      apiEndpoint: '/api/nested-options',
+      valueSelector: 'year',
+      subgroupValueSelector: 'quarter'
+    },
+    subGrouping: {
+      columnName: 'quarter',
+      active: 'Q2',
+      valuesLookup: {}
+    }
+  } as any)
+
+const apiFilterDropdowns = {
+  '/api/nested-options': [
+    {
+      value: '2023',
+      text: '2023',
+      subOptions: [
+        { value: 'Q1', text: 'Q1' },
+        { value: 'Q2', text: 'Q2' }
+      ]
+    },
+    {
+      value: '2024',
+      text: '2024',
+      subOptions: [
+        { value: 'Q3', text: 'Q3' },
+        { value: 'Q4', text: 'Q4' }
+      ]
+    }
+  ]
+}
+
+describe('DashboardFilters nested dropdown display', () => {
+  it.each([
+    ['data-backed', createDataBackedFilter(false), {}, '2023 - Q2'],
+    ['data-backed subgroup only', createDataBackedFilter(true), {}, 'Q2'],
+    ['api-backed', createApiBackedFilter(false), apiFilterDropdowns, '2023 - Q2'],
+    ['api-backed subgroup only', createApiBackedFilter(true), apiFilterDropdowns, 'Q2']
+  ])('shows the expected closed text for %s filters', (_label, filter, dropdowns, expectedValue) => {
+    const { container } = render(
+      <DashboardFilters
+        applyFilters={vi.fn()}
+        apiFilterDropdowns={dropdowns as any}
+        filters={[filter]}
+        handleOnChange={vi.fn()}
+        show={[0]}
+        showSubmit={false}
+      />
+    )
+
+    const input = container.querySelector('.nested-dropdown input')
+    expect(input).toHaveValue(expectedValue)
+  })
+
+  it.each([
+    ['data-backed', createDataBackedFilter(false), {}],
+    ['data-backed subgroup only', createDataBackedFilter(true), {}],
+    ['api-backed', createApiBackedFilter(false), apiFilterDropdowns],
+    ['api-backed subgroup only', createApiBackedFilter(true), apiFilterDropdowns]
+  ])('keeps nested dropdown selection behavior unchanged for %s filters', (_label, filter, dropdowns) => {
+    const handleOnChange = vi.fn()
+    const { container, getByText, queryByText } = render(
+      <DashboardFilters
+        applyFilters={vi.fn()}
+        apiFilterDropdowns={dropdowns as any}
+        filters={[filter]}
+        handleOnChange={handleOnChange}
+        show={[0]}
+        showSubmit={false}
+      />
+    )
+
+    const input = container.querySelector('.nested-dropdown input') as HTMLInputElement
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 'Q3' } })
+
+    expect(getByText('2024')).toBeInTheDocument()
+    expect(queryByText('2023')).not.toBeInTheDocument()
+
+    fireEvent.click(getByText('Q3'))
+
+    expect(handleOnChange).toHaveBeenCalledWith(0, ['2024', 'Q3'])
+  })
+})
diff --git a/packages/dashboard/src/components/DashboardFilters/DashboardFilters.tsx b/packages/dashboard/src/components/DashboardFilters/DashboardFilters.tsx
index f4eaa63485..4b0e151f54 100644
--- a/packages/dashboard/src/components/DashboardFilters/DashboardFilters.tsx
+++ b/packages/dashboard/src/components/DashboardFilters/DashboardFilters.tsx
@@ -164,6 +164,7 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
               <NestedDropdown
                 activeGroup={(filter.queuedActive?.[0] || filter.active) as string}
                 activeSubGroup={(filter.queuedActive?.[1] || filter.subGrouping?.active) as string}
+                displaySubgroupingOnly={filter.displaySubgroupingOnly}
                 filterIndex={filterIndex}
                 options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
                 listLabel={label}
diff --git a/packages/dashboard/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.test.tsx b/packages/dashboard/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.test.tsx
new file mode 100644
index 0000000000..87b0991d81
--- /dev/null
+++ b/packages/dashboard/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.test.tsx
@@ -0,0 +1,127 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import FilterEditor from './FilterEditor'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+const baseConfig = {
+  dashboard: {
+    sharedFilters: []
+  },
+  datasets: {
+    'nested-data.json': {
+      data: [
+        { region: 'North', year: '2023', quarter: 'Q1' },
+        { region: 'North', year: '2023', quarter: 'Q2' }
+      ]
+    }
+  },
+  rows: [],
+  visualizations: {}
+} as any
+
+const createNestedFilter = (type: 'datafilter' | 'urlfilter') =>
+  ({
+    key: 'Year and Quarter',
+    type,
+    filterStyle: 'nested-dropdown',
+    showDropdown: true,
+    values: ['2023', '2024'],
+    columnName: 'year',
+    id: 0,
+    parents: [],
+    order: 'asc',
+    subGrouping: {
+      columnName: 'quarter',
+      valuesLookup: {
+        '2023': { values: ['Q1', 'Q2'] },
+        '2024': { values: ['Q3', 'Q4'] }
+      }
+    },
+    ...(type === 'urlfilter'
+      ? {
+          apiFilter: {
+            apiEndpoint: '/api/nested-options',
+            valueSelector: 'year',
+            subgroupValueSelector: 'quarter'
+          }
+        }
+      : {})
+  } as any)
+
+describe('FilterEditor nested dropdown display toggle', () => {
+  it.each([
+    ['data-backed nested filters', createNestedFilter('datafilter')],
+    ['api-backed nested filters', createNestedFilter('urlfilter')]
+  ])('renders the checkbox below Create query parameters for %s', (_label, filter) => {
+    const updateFilterProp = vi.fn()
+
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={updateFilterProp}
+      />
+    )
+
+    const queryParameters = screen.getByLabelText('Create query parameters')
+    const displaySubgroupingOnly = screen.getByLabelText('Display subgrouping only')
+
+    expect(displaySubgroupingOnly).not.toBeChecked()
+
+    const queryParametersLabel = queryParameters.closest('label')
+    const displaySubgroupingOnlyLabel = displaySubgroupingOnly.closest('label')
+    const isBelowQueryParameters = !!(
+      queryParametersLabel &&
+      displaySubgroupingOnlyLabel &&
+      queryParametersLabel.compareDocumentPosition(displaySubgroupingOnlyLabel) & Node.DOCUMENT_POSITION_FOLLOWING
+    )
+
+    expect(isBelowQueryParameters).toBe(true)
+
+    fireEvent.click(displaySubgroupingOnly)
+
+    expect(updateFilterProp).toHaveBeenCalledWith('displaySubgroupingOnly', true)
+  })
+
+  it.each([
+    [
+      'data-backed non-nested filters',
+      {
+        ...createNestedFilter('datafilter'),
+        filterStyle: 'dropdown'
+      }
+    ],
+    [
+      'api-backed non-nested filters',
+      {
+        ...createNestedFilter('urlfilter'),
+        filterStyle: 'dropdown'
+      }
+    ]
+  ])('does not render the checkbox for %s', (_label, filter) => {
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={vi.fn()}
+      />
+    )
+
+    expect(screen.queryByLabelText('Display subgrouping only')).not.toBeInTheDocument()
+  })
+})
diff --git a/packages/dashboard/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx b/packages/dashboard/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx
index 02ff522d9c..36038c5adf 100644
--- a/packages/dashboard/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx
+++ b/packages/dashboard/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx
@@ -453,6 +453,18 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                 </span>
               </label>
 
+              {isNestedDropdown && (
+                <label>
+                  <input
+                    type='checkbox'
+                    checked={!!filter.displaySubgroupingOnly}
+                    aria-label='Display subgrouping only'
+                    onChange={e => updateFilterProp('displaySubgroupingOnly', e.target.checked)}
+                  />
+                  <span> Display subgrouping only</span>
+                </label>
+              )}
+
               {!!parentFilters.length && (
                 <label>
                   <span className='edit-label column-heading mt-1'>Parent Filter(s): </span>
@@ -598,6 +610,16 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                       </Tooltip>
                     </span>
                   </label>
+
+                  <label>
+                    <input
+                      type='checkbox'
+                      checked={!!filter.displaySubgroupingOnly}
+                      aria-label='Display subgrouping only'
+                      onChange={e => updateFilterProp('displaySubgroupingOnly', e.target.checked)}
+                    />
+                    <span> Display subgrouping only</span>
+                  </label>
                 </>
               )}
               <Select
diff --git a/packages/dashboard/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx b/packages/dashboard/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx
index 630193bf43..a193679c6c 100644
--- a/packages/dashboard/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx
+++ b/packages/dashboard/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx
@@ -242,7 +242,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
         />
       )}
 
-      {/* Default Value for Sub Group */}
+      {/* Default Value for Subgroup */}
       {subGrouping?.columnName && (filter.defaultValue || filter.active) && subGrouping.valuesLookup && (
         <Select
           value={subGrouping.defaultValue}
@@ -255,7 +255,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
             const newSubGrouping = { ...subGrouping, defaultValue: value }
             updateFilterProp('subGrouping', newSubGrouping)
           }}
-          label={'Sub Group Default Value'}
+          label={'Subgroup Default Value'}
           initial={'Select'}
         />
       )}
diff --git a/packages/dashboard/src/types/SharedFilter.ts b/packages/dashboard/src/types/SharedFilter.ts
index 8bdf3a03fb..62aa186610 100644
--- a/packages/dashboard/src/types/SharedFilter.ts
+++ b/packages/dashboard/src/types/SharedFilter.ts
@@ -8,6 +8,7 @@ export type SharedFilter = FilterBase & {
   filterStyle: FilterStyle
   queryParameter?: string
   setByQueryParameter?: string
+  displaySubgroupingOnly?: boolean
   active?: string | string[]
   queuedActive?: string | string[]
   usedBy?: (string | number)[] // if number used by whole row, else used by specific viz
diff --git a/packages/data-bite/src/components/EditorPanel/EditorPanel.tsx b/packages/data-bite/src/components/EditorPanel/EditorPanel.tsx
index 421bcd7b05..009ab09799 100644
--- a/packages/data-bite/src/components/EditorPanel/EditorPanel.tsx
+++ b/packages/data-bite/src/components/EditorPanel/EditorPanel.tsx
@@ -67,6 +67,7 @@ const EditorPanel: React.FC<DataBiteEditorPanelProps> = () => {
   const trendMappings = config.trendIndicator?.mappings || []
   const isNumericModeEligible = NUMERIC_TREND_ELIGIBLE_FUNCTIONS.has(config.dataFunction)
   const isPassthroughFunction = config.dataFunction === DATA_FUNCTION_PASSTHROUGH
+  const supportsTrendIndicator = config.biteStyle === 'tp5'
 
   const trendColumnValues = useMemo(() => {
     const trendColumn = config.trendIndicator?.column
@@ -305,164 +306,181 @@ const EditorPanel: React.FC<DataBiteEditorPanelProps> = () => {
                 label='Ignore Zeros'
                 updateField={updateField}
               />
-              <hr className='accordion__divider' />
-              <div className='checkbox-group'>
-                <span className='divider-heading' style={{ marginTop: 0 }}>
-                  Trend Indicator
-                </span>
-                <Select
-                  value={trendMode}
-                  fieldName='mode'
-                  label='Trend Mode'
-                  options={[
-                    { value: '', label: 'Off' },
-                    { value: TREND_MODE_CATEGORICAL, label: 'Categorical' },
-                    { value: TREND_MODE_NUMERIC, label: 'Numeric' }
-                  ]}
-                  onChange={e => setTrendMode(e.target.value)}
-                />
-                {trendMode &&
-                  (trendMode === TREND_MODE_NUMERIC && !isNumericModeEligible ? (
-                    <p className='cove-accordion__panel-error' style={{ marginBottom: '0.5rem' }}>
-                      Numeric mode only supports Sum, Mean (Average), Median, Min, and Max.
-                    </p>
-                  ) : (
-                    <>
-                      <Select
-                        value={config.trendIndicator?.column || ''}
-                        section='trendIndicator'
-                        fieldName='column'
-                        label='Trend Column'
-                        tooltip={
-                          trendMode === TREND_MODE_NUMERIC ? (
-                            <Tooltip style={{ textTransform: 'none' }}>
-                              <Tooltip.Target>
-                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                              </Tooltip.Target>
-                              <Tooltip.Content>
-                                <p>
-                                  Choose the column that contains past data for your metric. It will be run through the
-                                  same function selected from the Data Function dropdown.
-                                </p>
-                              </Tooltip.Content>
-                            </Tooltip>
-                          ) : null
-                        }
-                        updateField={updateField}
-                        initial='Select'
-                        options={columns}
-                      />
-                      {trendMode === TREND_MODE_CATEGORICAL && (
+              {supportsTrendIndicator && (
+                <>
+                  <hr className='accordion__divider' />
+                  <div className='checkbox-group'>
+                    <span className='divider-heading' style={{ marginTop: 0 }}>
+                      Trend Indicator
+                    </span>
+                    <Select
+                      value={trendMode}
+                      fieldName='mode'
+                      label='Trend Mode'
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>
+                              Choose Categorical if the column containing historical data has labels like "increasing",
+                              or Numeric if the historical data is numeric.
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                      options={[
+                        { value: '', label: 'Off' },
+                        { value: TREND_MODE_CATEGORICAL, label: 'Categorical' },
+                        { value: TREND_MODE_NUMERIC, label: 'Numeric' }
+                      ]}
+                      onChange={e => setTrendMode(e.target.value)}
+                    />
+                    {trendMode &&
+                      (trendMode === TREND_MODE_NUMERIC && !isNumericModeEligible ? (
+                        <p className='cove-accordion__panel-error' style={{ marginBottom: '0.5rem' }}>
+                          Numeric mode only supports Sum, Mean (Average), Median, Min, and Max.
+                        </p>
+                      ) : (
                         <>
-                          {!isPassthroughFunction && (
-                            <span className='subtext' style={{ marginBottom: '0.75rem' }}>
-                              In categorical mode, arrows appear only when filters resolve to exactly one row.
-                            </span>
-                          )}
-                          {trendColumnValues.map(sourceValue => {
-                            const selectedArrowType =
-                              trendMappings.find(mapping => mapping.sourceValue === sourceValue)?.arrowType || ''
-
-                            return (
-                              <div className='cove-accordion__panel-row align-center mb-2' key={sourceValue}>
-                                <div className='cove-accordion__panel-col flex-grow'>{sourceValue}</div>
-                                <div className='cove-accordion__panel-col flex-grow'>
-                                  <Select
-                                    label=''
-                                    value={selectedArrowType}
-                                    options={[
-                                      { value: '', label: 'No Arrow' },
-                                      ...TREND_ARROW_TYPES.map(arrowType => ({
-                                        value: arrowType,
-                                        label: TREND_ARROW_TYPE_LABELS[arrowType]
-                                      }))
-                                    ]}
-                                    onChange={e => updateTrendMapping(sourceValue, e.target.value)}
-                                  />
-                                </div>
-                              </div>
-                            )
-                          })}
-                        </>
-                      )}
-                      {trendMode === TREND_MODE_NUMERIC && (
-                        <ul className='column-edit'>
-                          <li className='two-col'>
-                            <TextField
-                              type='number'
-                              value={config.trendIndicator?.numericThreshold ?? 0}
-                              section='trendIndicator'
-                              fieldName='numericThreshold'
-                              label='Threshold'
-                              updateField={updateField}
-                              min={0}
-                              tooltip={
+                          <Select
+                            value={config.trendIndicator?.column || ''}
+                            section='trendIndicator'
+                            fieldName='column'
+                            label='Trend Column'
+                            tooltip={
+                              trendMode === TREND_MODE_NUMERIC ? (
                                 <Tooltip style={{ textTransform: 'none' }}>
                                   <Tooltip.Target>
                                     <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                                   </Tooltip.Target>
                                   <Tooltip.Content>
                                     <p>
-                                      An arrow will be shown if the difference between the current value and the
-                                      historical value exceeds this threshold.
+                                      Choose the column that contains past data for your metric. It will be run through
+                                      the same function selected from the Data Function dropdown.
                                     </p>
                                   </Tooltip.Content>
                                 </Tooltip>
-                              }
+                              ) : null
+                            }
+                            updateField={updateField}
+                            initial='Select'
+                            options={columns}
+                          />
+                          {trendMode === TREND_MODE_CATEGORICAL && (
+                            <>
+                              {!isPassthroughFunction && (
+                                <span className='subtext' style={{ marginBottom: '0.75rem' }}>
+                                  In categorical mode, arrows appear only when filters resolve to exactly one row.
+                                </span>
+                              )}
+                              {trendColumnValues.map(sourceValue => {
+                                const selectedArrowType =
+                                  trendMappings.find(mapping => mapping.sourceValue === sourceValue)?.arrowType || ''
+
+                                return (
+                                  <div className='cove-accordion__panel-row align-center mb-2' key={sourceValue}>
+                                    <div className='cove-accordion__panel-col flex-grow'>{sourceValue}</div>
+                                    <div className='cove-accordion__panel-col flex-grow'>
+                                      <Select
+                                        label=''
+                                        value={selectedArrowType}
+                                        options={[
+                                          { value: '', label: 'No Arrow' },
+                                          ...TREND_ARROW_TYPES.map(arrowType => ({
+                                            value: arrowType,
+                                            label: TREND_ARROW_TYPE_LABELS[arrowType]
+                                          }))
+                                        ]}
+                                        onChange={e => updateTrendMapping(sourceValue, e.target.value)}
+                                      />
+                                    </div>
+                                  </div>
+                                )
+                              })}
+                            </>
+                          )}
+                          {trendMode === TREND_MODE_NUMERIC && (
+                            <ul className='column-edit'>
+                              <li className='two-col'>
+                                <TextField
+                                  type='number'
+                                  value={config.trendIndicator?.numericThreshold ?? 0}
+                                  section='trendIndicator'
+                                  fieldName='numericThreshold'
+                                  label='Threshold'
+                                  updateField={updateField}
+                                  min={0}
+                                  tooltip={
+                                    <Tooltip style={{ textTransform: 'none' }}>
+                                      <Tooltip.Target>
+                                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                      </Tooltip.Target>
+                                      <Tooltip.Content>
+                                        <p>
+                                          An arrow will be shown if the difference between the current value and the
+                                          historical value exceeds this threshold.
+                                        </p>
+                                      </Tooltip.Content>
+                                    </Tooltip>
+                                  }
+                                />
+                              </li>
+                            </ul>
+                          )}
+                          <TextField
+                            value={config.trendIndicator?.upLabel || ''}
+                            section='trendIndicator'
+                            fieldName='upLabel'
+                            label='Up Label'
+                            placeholder='Increasing'
+                            updateField={updateField}
+                          />
+                          <TextField
+                            value={config.trendIndicator?.downLabel || ''}
+                            section='trendIndicator'
+                            fieldName='downLabel'
+                            label='Down Label'
+                            placeholder='Decreasing'
+                            updateField={updateField}
+                          />
+                          {trendMode === TREND_MODE_NUMERIC && (
+                            <>
+                              <CheckBox
+                                value={config.trendIndicator?.showNoChangeArrows || false}
+                                section='trendIndicator'
+                                fieldName='showNoChangeArrows'
+                                label='Show indicator for no change'
+                                updateField={updateField}
+                              />
+                            </>
+                          )}
+                          {(trendMode === TREND_MODE_CATEGORICAL ||
+                            (trendMode === TREND_MODE_NUMERIC && config.trendIndicator?.showNoChangeArrows)) && (
+                            <TextField
+                              value={config.trendIndicator?.noChangeLabel || ''}
+                              section='trendIndicator'
+                              fieldName='noChangeLabel'
+                              label='No Change Label'
+                              placeholder='No change'
+                              updateField={updateField}
                             />
-                          </li>
-                        </ul>
-                      )}
-                      <TextField
-                        value={config.trendIndicator?.upLabel || ''}
-                        section='trendIndicator'
-                        fieldName='upLabel'
-                        label='Up Label'
-                        placeholder='Increasing'
-                        updateField={updateField}
-                      />
-                      <TextField
-                        value={config.trendIndicator?.downLabel || ''}
-                        section='trendIndicator'
-                        fieldName='downLabel'
-                        label='Down Label'
-                        placeholder='Decreasing'
-                        updateField={updateField}
-                      />
-                      {trendMode === TREND_MODE_NUMERIC && (
-                        <>
-                          <CheckBox
-                            value={config.trendIndicator?.showNoChangeArrows || false}
+                          )}
+                          <TextField
+                            value={config.trendIndicator?.trendLabel || ''}
                             section='trendIndicator'
-                            fieldName='showNoChangeArrows'
-                            label='Show indicator for no change'
+                            fieldName='trendLabel'
+                            label='Trend description'
+                            placeholder='(compared to one year prior)'
                             updateField={updateField}
                           />
                         </>
-                      )}
-                      {(trendMode === TREND_MODE_CATEGORICAL ||
-                        (trendMode === TREND_MODE_NUMERIC && config.trendIndicator?.showNoChangeArrows)) && (
-                        <TextField
-                          value={config.trendIndicator?.noChangeLabel || ''}
-                          section='trendIndicator'
-                          fieldName='noChangeLabel'
-                          label='No Change Label'
-                          placeholder='No change'
-                          updateField={updateField}
-                        />
-                      )}
-                      <TextField
-                        value={config.trendIndicator?.trendLabel || ''}
-                        section='trendIndicator'
-                        fieldName='trendLabel'
-                        label='Trend description'
-                        placeholder='(compared to one year prior)'
-                        updateField={updateField}
-                      />
-                    </>
-                  ))}
-              </div>
-              <hr className='accordion__divider' />
+                      ))}
+                  </div>
+                  <hr className='accordion__divider' />
+                </>
+              )}
 
               <label style={{ marginBottom: '1rem' }}>
                 <span className='edit-label'>
diff --git a/packages/waffle-chart/src/CdcWaffleChart.tsx b/packages/waffle-chart/src/CdcWaffleChart.tsx
index 657dcdba52..f6f59d1757 100644
--- a/packages/waffle-chart/src/CdcWaffleChart.tsx
+++ b/packages/waffle-chart/src/CdcWaffleChart.tsx
@@ -165,6 +165,7 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
   const processedDownLabel = processedTextFields.downLabel
   const processedNoChangeLabel = processedTextFields.noChangeLabel
   const processedTrendLabel = processedTextFields.trendLabel
+  const supportsTrendIndicator = config.visualizationType === 'TP5 Waffle' || config.visualizationType === 'TP5 Gauge'
 
   const gaugeColor = config.visual.colors[config.theme]
   let dataFontSize = config.fontSize ? { fontSize: config.fontSize + 'px' } : null
@@ -452,7 +453,7 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
       : ''
   const resolvedTrendLabel = typeof trendLabel === 'string' ? trendLabel.trim() : ''
   const resolvedTrendFooterLabel = typeof processedTrendLabel === 'string' ? processedTrendLabel.trim() : ''
-  const hasTrendArrow = trendResolution?.state === 'resolved' && !!trendResolution?.arrowType
+  const hasTrendArrow = supportsTrendIndicator && trendResolution?.state === 'resolved' && !!trendResolution?.arrowType
   const shouldUseTrendBelow = Boolean(hasTrendArrow && (resolvedTrendLabel || resolvedTrendFooterLabel))
 
   const renderTrendArrow = ({ wrapperClassName = '' } = {}) => {
diff --git a/packages/waffle-chart/src/components/EditorPanel.jsx b/packages/waffle-chart/src/components/EditorPanel.jsx
index 96d6ba7ea9..1344bf1f34 100644
--- a/packages/waffle-chart/src/components/EditorPanel.jsx
+++ b/packages/waffle-chart/src/components/EditorPanel.jsx
@@ -63,6 +63,7 @@ const EditorPanel = memo(props => {
     { value: 'Gauge', label: 'Gauge' },
     { value: 'TP5 Gauge', label: 'TP5 Style Gauge' }
   ]
+  const supportsTrendIndicator = config.visualizationType === 'TP5 Waffle' || config.visualizationType === 'TP5 Gauge'
 
   const trendMode = config.trendIndicator?.mode || ''
   const trendMappings = config.trendIndicator?.mappings || []
@@ -359,153 +360,170 @@ const EditorPanel = memo(props => {
             />
           </div>
         </>
-        <hr className='cove-accordion__divider' />
-        <div className='checkbox-group'>
-          <h4 style={{ fontWeight: '600', marginTop: 0 }}>Trend Indicator</h4>
-          <Select
-            value={trendMode}
-            label='Trend Mode'
-            options={[
-              { value: '', label: 'Off' },
-              { value: TREND_MODE_CATEGORICAL, label: 'Categorical' },
-              { value: TREND_MODE_NUMERIC, label: 'Numeric' }
-            ]}
-            onChange={e => setTrendMode(e.target.value)}
-          />
-          {trendMode === TREND_MODE_NUMERIC && !isNumericModeEligible && (
-            <p className='cove-accordion__panel-error' style={{ marginBottom: '0.5rem' }}>
-              Numeric mode only supports Sum, Mean (Average), Median, Min, and Max.
-            </p>
-          )}
-          {trendMode && !(trendMode === TREND_MODE_NUMERIC && !isNumericModeEligible) && (
-            <>
+        {supportsTrendIndicator && (
+          <>
+            <hr className='cove-accordion__divider' />
+            <div className='checkbox-group'>
+              <h4 style={{ fontWeight: '600', marginTop: 0 }}>Trend Indicator</h4>
               <Select
-                value={config.trendIndicator?.column || ''}
-                section='trendIndicator'
-                fieldName='column'
-                label={trendMode === TREND_MODE_NUMERIC ? 'Trend Numerator Column' : 'Trend Column'}
+                value={trendMode}
+                label='Trend Mode'
                 tooltip={
-                  trendMode === TREND_MODE_NUMERIC ? (
-                    <Tooltip style={{ textTransform: 'none' }}>
-                      <Tooltip.Target>
-                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                      </Tooltip.Target>
-                      <Tooltip.Content>
-                        <p>
-                          Choose the column that contains past numerator data for your metric. It will be run through
-                          the same function selected from the Data Function dropdown.
-                        </p>
-                      </Tooltip.Content>
-                    </Tooltip>
-                  ) : null
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>
+                        Choose Categorical if the column containing historical data has labels like "increasing", or
+                        Numeric if the historical data is numeric.
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
                 }
-                updateField={updateField}
-                initial='Select'
-                options={columns}
+                options={[
+                  { value: '', label: 'Off' },
+                  { value: TREND_MODE_CATEGORICAL, label: 'Categorical' },
+                  { value: TREND_MODE_NUMERIC, label: 'Numeric' }
+                ]}
+                onChange={e => setTrendMode(e.target.value)}
               />
-              {trendMode === TREND_MODE_CATEGORICAL && (
-                <>
-                  <span className='subtext' style={{ marginBottom: '0.75rem' }}>
-                    In categorical mode, arrows appear only when filters resolve to exactly one row.
-                  </span>
-                  {trendColumnValues.map(sourceValue => {
-                    const selectedArrowType =
-                      trendMappings.find(mapping => mapping.sourceValue === sourceValue)?.arrowType || ''
-                    return (
-                      <div className='cove-accordion__panel-row align-center mb-2' key={sourceValue}>
-                        <div className='cove-accordion__panel-col flex-grow'>{sourceValue}</div>
-                        <div className='cove-accordion__panel-col flex-grow'>
-                          <Select
-                            label=''
-                            value={selectedArrowType}
-                            options={[
-                              { value: '', label: 'No Arrow' },
-                              ...TREND_ARROW_TYPES.map(arrowType => ({
-                                value: arrowType,
-                                label: TREND_ARROW_TYPE_LABELS[arrowType]
-                              }))
-                            ]}
-                            onChange={e => updateTrendMapping(sourceValue, e.target.value)}
-                          />
-                        </div>
-                      </div>
-                    )
-                  })}
-                </>
-              )}
-              {trendMode === TREND_MODE_NUMERIC && (
-                <TextField
-                  type='number'
-                  value={config.trendIndicator?.numericThreshold ?? 0}
-                  section='trendIndicator'
-                  fieldName='numericThreshold'
-                  label='Threshold'
-                  updateField={updateField}
-                  min={0}
-                  tooltip={
-                    <Tooltip style={{ textTransform: 'none' }}>
-                      <Tooltip.Target>
-                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                      </Tooltip.Target>
-                      <Tooltip.Content>
-                        <p>
-                          An arrow is shown when the current displayed percentage differs from the historical displayed
-                          percentage by more than this many percentage points.
-                        </p>
-                      </Tooltip.Content>
-                    </Tooltip>
-                  }
-                />
+              {trendMode === TREND_MODE_NUMERIC && !isNumericModeEligible && (
+                <p className='cove-accordion__panel-error' style={{ marginBottom: '0.5rem' }}>
+                  Numeric mode only supports Sum, Mean (Average), Median, Min, and Max.
+                </p>
               )}
-              <TextField
-                value={config.trendIndicator?.upLabel || ''}
-                section='trendIndicator'
-                fieldName='upLabel'
-                label='Up Label'
-                placeholder='Increasing'
-                updateField={updateField}
-              />
-              <TextField
-                value={config.trendIndicator?.downLabel || ''}
-                section='trendIndicator'
-                fieldName='downLabel'
-                label='Down Label'
-                placeholder='Decreasing'
-                updateField={updateField}
-              />
-              {trendMode === TREND_MODE_NUMERIC && (
+              {trendMode && !(trendMode === TREND_MODE_NUMERIC && !isNumericModeEligible) && (
                 <>
-                  <CheckBox
-                    value={config.trendIndicator?.showNoChangeArrows || false}
+                  <Select
+                    value={config.trendIndicator?.column || ''}
+                    section='trendIndicator'
+                    fieldName='column'
+                    label={trendMode === TREND_MODE_NUMERIC ? 'Trend Numerator Column' : 'Trend Column'}
+                    tooltip={
+                      trendMode === TREND_MODE_NUMERIC ? (
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>
+                              Choose the column that contains past numerator data for your metric. It will be run
+                              through the same function selected from the Data Function dropdown.
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      ) : null
+                    }
+                    updateField={updateField}
+                    initial='Select'
+                    options={columns}
+                  />
+                  {trendMode === TREND_MODE_CATEGORICAL && (
+                    <>
+                      <span className='subtext' style={{ marginBottom: '0.75rem' }}>
+                        In categorical mode, arrows appear only when filters resolve to exactly one row.
+                      </span>
+                      {trendColumnValues.map(sourceValue => {
+                        const selectedArrowType =
+                          trendMappings.find(mapping => mapping.sourceValue === sourceValue)?.arrowType || ''
+                        return (
+                          <div className='cove-accordion__panel-row align-center mb-2' key={sourceValue}>
+                            <div className='cove-accordion__panel-col flex-grow'>{sourceValue}</div>
+                            <div className='cove-accordion__panel-col flex-grow'>
+                              <Select
+                                label=''
+                                value={selectedArrowType}
+                                options={[
+                                  { value: '', label: 'No Arrow' },
+                                  ...TREND_ARROW_TYPES.map(arrowType => ({
+                                    value: arrowType,
+                                    label: TREND_ARROW_TYPE_LABELS[arrowType]
+                                  }))
+                                ]}
+                                onChange={e => updateTrendMapping(sourceValue, e.target.value)}
+                              />
+                            </div>
+                          </div>
+                        )
+                      })}
+                    </>
+                  )}
+                  {trendMode === TREND_MODE_NUMERIC && (
+                    <TextField
+                      type='number'
+                      value={config.trendIndicator?.numericThreshold ?? 0}
+                      section='trendIndicator'
+                      fieldName='numericThreshold'
+                      label='Threshold'
+                      updateField={updateField}
+                      min={0}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>
+                              An arrow is shown when the current displayed percentage differs from the historical
+                              displayed percentage by more than this many percentage points.
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                  )}
+                  <TextField
+                    value={config.trendIndicator?.upLabel || ''}
+                    section='trendIndicator'
+                    fieldName='upLabel'
+                    label='Up Label'
+                    placeholder='Increasing'
+                    updateField={updateField}
+                  />
+                  <TextField
+                    value={config.trendIndicator?.downLabel || ''}
                     section='trendIndicator'
-                    fieldName='showNoChangeArrows'
-                    label='Show indicator for no change'
+                    fieldName='downLabel'
+                    label='Down Label'
+                    placeholder='Decreasing'
+                    updateField={updateField}
+                  />
+                  {trendMode === TREND_MODE_NUMERIC && (
+                    <>
+                      <CheckBox
+                        value={config.trendIndicator?.showNoChangeArrows || false}
+                        section='trendIndicator'
+                        fieldName='showNoChangeArrows'
+                        label='Show indicator for no change'
+                        updateField={updateField}
+                      />
+                    </>
+                  )}
+                  {(trendMode === TREND_MODE_CATEGORICAL ||
+                    (trendMode === TREND_MODE_NUMERIC && config.trendIndicator?.showNoChangeArrows)) && (
+                    <TextField
+                      value={config.trendIndicator?.noChangeLabel || ''}
+                      section='trendIndicator'
+                      fieldName='noChangeLabel'
+                      label='No Change Label'
+                      placeholder='No change'
+                      updateField={updateField}
+                    />
+                  )}
+                  <TextField
+                    value={config.trendIndicator?.trendLabel || ''}
+                    section='trendIndicator'
+                    fieldName='trendLabel'
+                    label='Trend description'
+                    placeholder='(compared to one year prior)'
                     updateField={updateField}
                   />
                 </>
               )}
-              {(trendMode === TREND_MODE_CATEGORICAL ||
-                (trendMode === TREND_MODE_NUMERIC && config.trendIndicator?.showNoChangeArrows)) && (
-                <TextField
-                  value={config.trendIndicator?.noChangeLabel || ''}
-                  section='trendIndicator'
-                  fieldName='noChangeLabel'
-                  label='No Change Label'
-                  placeholder='No change'
-                  updateField={updateField}
-                />
-              )}
-              <TextField
-                value={config.trendIndicator?.trendLabel || ''}
-                section='trendIndicator'
-                fieldName='trendLabel'
-                label='Trend description'
-                placeholder='(compared to one year prior)'
-                updateField={updateField}
-              />
-            </>
-          )}
-        </div>
+            </div>
+          </>
+        )}
         <label style={{ marginBottom: '1rem' }}>
           <span className='edit-label'>
             Data Point Filters
diff --git a/packages/waffle-chart/src/test/CdcWaffleChart.test.jsx b/packages/waffle-chart/src/test/CdcWaffleChart.test.jsx
index 72bd0ddc80..43327a3ceb 100644
--- a/packages/waffle-chart/src/test/CdcWaffleChart.test.jsx
+++ b/packages/waffle-chart/src/test/CdcWaffleChart.test.jsx
@@ -129,6 +129,34 @@ describe('Waffle Chart', () => {
     ).toBeInTheDocument()
   })
 
+  it('does not render a trend arrow for legacy waffle styles', async () => {
+    const { container } = render(
+      <CdcWaffleChart
+        config={createBaseConfig({
+          visualizationType: 'Waffle',
+          data: [{ value: 42, total: 100, trend: 'increase' }],
+          customDenom: true,
+          dataDenomColumn: 'total',
+          showPercent: true,
+          trendIndicator: {
+            mode: 'categorical',
+            column: 'trend',
+            mappings: [{ sourceValue: 'increase', arrowType: 'up' }],
+            upLabel: 'Increasing'
+          }
+        })}
+      />
+    )
+
+    await waitFor(() => {
+      expect(container.querySelector('.cove-waffle-chart__data--primary')).toBeInTheDocument()
+    })
+
+    expect(container.querySelector('.mock-trend-arrow-wrap')).not.toBeInTheDocument()
+    expect(container.querySelector('.cove-waffle-chart__trend-slot--inline')).not.toBeInTheDocument()
+    expect(container.querySelector('.cove-waffle-chart__trend-slot--below')).not.toBeInTheDocument()
+  })
+
   it('moves the trend indicator below the value when a footer trend label is configured', async () => {
     const { container } = render(
       <CdcWaffleChart