diff --git a/src/components/node-list/node-list-row-list.js b/src/components/filters/filters-group/filters-group.js
similarity index 67%
rename from src/components/node-list/node-list-row-list.js
rename to src/components/filters/filters-group/filters-group.js
index fac2b346e6..d2b0076860 100644
--- a/src/components/node-list/node-list-row-list.js
+++ b/src/components/filters/filters-group/filters-group.js
@@ -1,11 +1,14 @@
 import React from 'react';
-import modifiers from '../../utils/modifiers';
-import { FilterRow } from '../filter-row/filter-row';
-import { nodeListRowHeight } from '../../config';
-import LazyList from '../lazy-list';
-import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
+import classnames from 'classnames';
+import FiltersRow from '../filters-row/filters-row';
+import { nodeListRowHeight } from '../../../config';
+import LazyList from '../../lazy-list';
+import { getDataTestAttribute } from '../../../utils/get-data-test-attribute';
 
-const NodeRowList = ({
+import './filters-group.scss';
+
+/** A group collection of FiltersRow */
+const FiltersGroup = ({
   items = [],
   group,
   collapsed,
@@ -20,14 +23,12 @@ const NodeRowList = ({
       <ul
         ref={listRef}
         style={listStyle}
-        className={modifiers(
-          'pipeline-nodelist__children',
-          { closed: collapsed },
-          'pipeline-nodelist__list pipeline-nodelist__list--nested'
-        )}
+        className={classnames('filters-group', {
+          'filters-group--closed': collapsed,
+        })}
       >
         {items.slice(start, end).map((item) => (
-          <FilterRow
+          <FiltersRow
             allUnchecked={group.allUnchecked}
             checked={item.checked}
             container={'li'}
@@ -51,4 +52,4 @@ const NodeRowList = ({
   </LazyList>
 );
 
-export default NodeRowList;
+export default FiltersGroup;
diff --git a/src/components/filters/filters-group/filters-group.scss b/src/components/filters/filters-group/filters-group.scss
new file mode 100644
index 0000000000..00dc8045f9
--- /dev/null
+++ b/src/components/filters/filters-group/filters-group.scss
@@ -0,0 +1,15 @@
+@use '../../../styles/variables' as var;
+@use '../../node-list/styles/variables';
+
+.filters-group {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1.2em;
+
+  // Avoid placeholder fade leaking out for small lists
+  overflow: hidden;
+
+  &--closed {
+    display: none;
+  }
+}
diff --git a/src/components/filters/filters-group/filters-group.test.js b/src/components/filters/filters-group/filters-group.test.js
new file mode 100644
index 0000000000..edb6d682f9
--- /dev/null
+++ b/src/components/filters/filters-group/filters-group.test.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import FiltersGroup from './filters-group';
+import { mockState, setup } from '../../../utils/state.mock';
+import { getNodeTypes } from '../../../selectors/node-types';
+import { getGroupedNodes } from '../../../selectors/nodes';
+import { getGroups } from '../../node-list/node-list-items';
+
+describe('FiltersGroup Component', () => {
+  const mockProps = () => {
+    const items = getGroupedNodes(mockState.spaceflights);
+    const nodeTypes = getNodeTypes(mockState.spaceflights);
+    const groups = getGroups({ nodeTypes, items });
+    return { group: groups['tags'], items: [] };
+  };
+
+  it('renders without throwing', () => {
+    expect(() => setup.mount(<FiltersGroup {...mockProps()} />)).not.toThrow();
+  });
+  it('adds class when collapsed prop true', () => {
+    const wrapper = setup.mount(
+      <FiltersGroup {...mockProps()} collapsed={true} />
+    );
+    const children = wrapper.find('.filters-group');
+    expect(children.hasClass('filters-group--closed')).toBe(true);
+  });
+
+  it('removes class when collapsed prop false', () => {
+    const wrapper = setup.mount(
+      <FiltersGroup {...mockProps()} collapsed={false} />
+    );
+    const children = wrapper.find('.filters-group');
+    expect(children.hasClass('filters-group--closed')).toBe(false);
+  });
+});
diff --git a/src/components/filter-row/filter-row.js b/src/components/filters/filters-row/filters-row.js
similarity index 79%
rename from src/components/filter-row/filter-row.js
rename to src/components/filters/filters-row/filters-row.js
index baa8cc772c..f854100608 100755
--- a/src/components/filter-row/filter-row.js
+++ b/src/components/filters/filters-row/filters-row.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import classnames from 'classnames';
-import IndicatorIcon from '../icons/indicator';
-import OffIndicatorIcon from '../icons/indicator-off';
-import { ToggleControl } from '../ui/toggle-control/toggle-control';
-import { RowText } from '../ui/row-text/row-text';
+import IndicatorIcon from '../../icons/indicator';
+import OffIndicatorIcon from '../../icons/indicator-off';
+import { ToggleControl } from '../../ui/toggle-control/toggle-control';
+import { RowText } from '../../ui/row-text/row-text';
 
-import './filter-row.scss';
+import './filters-row.scss';
 
-export const FilterRow = ({
+const FiltersRow = ({
   allUnchecked,
   checked,
   children,
@@ -64,3 +64,5 @@ export const FilterRow = ({
     </ContainerWrapper>
   );
 };
+
+export default FiltersRow;
diff --git a/src/components/filter-row/filter-row.scss b/src/components/filters/filters-row/filters-row.scss
similarity index 91%
rename from src/components/filter-row/filter-row.scss
rename to src/components/filters/filters-row/filters-row.scss
index ff23a5d05e..43a3d657b3 100644
--- a/src/components/filter-row/filter-row.scss
+++ b/src/components/filters/filters-row/filters-row.scss
@@ -1,5 +1,5 @@
-@use '../../styles/variables' as var;
-@use '../node-list/styles/variables';
+@use '../../../styles/variables' as var;
+@use '../../node-list/styles/variables';
 
 .MuiTreeItem-iconContainer svg {
   z-index: var.$zindex-MuiTreeItem-icon;
diff --git a/src/components/filter-row/filter-row.test.js b/src/components/filters/filters-row/filters-row.test.js
similarity index 61%
rename from src/components/filter-row/filter-row.test.js
rename to src/components/filters/filters-row/filters-row.test.js
index 3e1a31a203..1660b20f14 100644
--- a/src/components/filter-row/filter-row.test.js
+++ b/src/components/filters/filters-row/filters-row.test.js
@@ -1,22 +1,22 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { FilterRow } from './filter-row';
+import FiltersRow from './filters-row';
 
-describe('FilterRow Component', () => {
+describe('FiltersRow Component', () => {
   it('renders without crashing', () => {
-    const wrapper = mount(<FilterRow container={'div'} />);
+    const wrapper = mount(<FiltersRow container={'div'} />);
     expect(wrapper.exists()).toBe(true);
   });
 
   it('renders correct visible classnames', () => {
-    const wrapper = mount(<FilterRow container={'div'} visible={true} />);
+    const wrapper = mount(<FiltersRow container={'div'} visible={true} />);
     expect(wrapper.find('.filter-row').hasClass('filter-row--visible')).toBe(
       true
     );
   });
 
   it('renders correct unchecked classnames', () => {
-    const wrapper = mount(<FilterRow container={'div'} checked={false} />);
+    const wrapper = mount(<FiltersRow container={'div'} checked={false} />);
     expect(wrapper.find('.filter-row').hasClass('filter-row--unchecked')).toBe(
       true
     );
diff --git a/src/components/filters/filters-section-heading/filters-section-heading.js b/src/components/filters/filters-section-heading/filters-section-heading.js
new file mode 100644
index 0000000000..f63cba95d0
--- /dev/null
+++ b/src/components/filters/filters-section-heading/filters-section-heading.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import classnames from 'classnames';
+import FiltersRow from '../filters-row/filters-row';
+
+import './filters-section-heading.scss';
+
+const FiltersSectionHeading = ({
+  group,
+  collapsed,
+  groupItems,
+  onGroupToggleChanged,
+  onToggleGroupCollapsed,
+}) => {
+  const { id, kind, name, allUnchecked, checked, invisibleIcon, visibleIcon } =
+    group;
+  const disabled = groupItems.length === 0;
+
+  return (
+    <h3 className="filters-section-heading">
+      <FiltersRow
+        allUnchecked={allUnchecked}
+        checked={checked}
+        container="div"
+        id={id}
+        offIndicatorIcon={invisibleIcon}
+        kind={kind}
+        label={name}
+        name={name}
+        onChange={(e) => {
+          onGroupToggleChanged(id, !e.target.checked);
+        }}
+        indicatorIcon={visibleIcon}
+      >
+        <button
+          aria-label={`${collapsed ? 'Show' : 'Hide'} ${name.toLowerCase()}`}
+          className={classnames('filters-section-heading__toggle-btn', {
+            'filters-section-heading__toggle-btn--alt': collapsed,
+            'filters-section-heading__toggle-btn--disabled': disabled,
+          })}
+          disabled={disabled}
+          onClick={() => onToggleGroupCollapsed(id)}
+        />
+      </FiltersRow>
+    </h3>
+  );
+};
+
+export default FiltersSectionHeading;
diff --git a/src/components/filters/filters-section-heading/filters-section-heading.scss b/src/components/filters/filters-section-heading/filters-section-heading.scss
new file mode 100644
index 0000000000..ce0644bb48
--- /dev/null
+++ b/src/components/filters/filters-section-heading/filters-section-heading.scss
@@ -0,0 +1,62 @@
+@use '../../../styles/variables' as var;
+@use '../../node-list/styles/variables';
+
+.filters-section-heading {
+  background: var(--color-nodelist-filter-panel);
+  margin: 0;
+  position: sticky;
+  top: 0;
+
+  // Avoid pixel gap above when scrolling.
+  transform: translateY(-1px);
+  z-index: var.$zindex-nodelist-heading;
+
+  .row-text .row-text__label {
+    font-size: 1.3em;
+    opacity: 0.65;
+  }
+}
+
+.filters-section-heading__toggle-btn {
+  width: variables.$toggle-size;
+  height: variables.$toggle-size;
+  padding: 0;
+  color: var(--color-default-alt);
+  font-size: inherit;
+  font-family: inherit;
+  line-height: 1em;
+  text-align: center;
+  background: none;
+  border: none;
+  border-radius: 50%;
+  box-shadow: none;
+  cursor: pointer;
+  transition: transform ease 0.1s;
+
+  &:focus {
+    outline: none;
+
+    [data-whatintent='keyboard'] & {
+      box-shadow: 0 0 0 3px var.$blue-300 inset;
+    }
+  }
+
+  &::before {
+    font-size: 1.8em;
+    opacity: 0.55;
+    content: '▾';
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+
+  &--alt {
+    transform: rotate(90deg);
+  }
+
+  &--disabled {
+    color: var.$black-400;
+    transform: rotate(90deg);
+  }
+}
diff --git a/src/components/filters/filters-section-heading/filters-section-heading.test.js b/src/components/filters/filters-section-heading/filters-section-heading.test.js
new file mode 100755
index 0000000000..af752fd847
--- /dev/null
+++ b/src/components/filters/filters-section-heading/filters-section-heading.test.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import FiltersSectionHeading from './filters-section-heading';
+import { mockState, setup } from '../../../utils/state.mock';
+import { getNodeTypes } from '../../../selectors/node-types';
+import { getGroupedNodes } from '../../../selectors/nodes';
+import { getGroups } from '../../node-list/node-list-items';
+
+describe('FiltersSectionHeading', () => {
+  const mockProps = () => {
+    const items = getGroupedNodes(mockState.spaceflights);
+    const nodeTypes = getNodeTypes(mockState.spaceflights);
+    const groups = getGroups({ nodeTypes, items });
+    return { group: groups['elementType'], groupItems: [] };
+  };
+
+  it('renders without throwing', () => {
+    expect(() =>
+      setup.mount(<FiltersSectionHeading {...mockProps()} />)
+    ).not.toThrow();
+  });
+
+  it('handles collapse button click events', () => {
+    const onToggleCollapsed = jest.fn();
+    const wrapper = setup.mount(
+      <FiltersSectionHeading
+        {...mockProps()}
+        onToggleCollapsed={onToggleCollapsed}
+      />
+    );
+    wrapper.find('.filters-section-heading__toggle-btn').simulate('click');
+    expect(() => onToggleCollapsed.mock.calls.length.toEqual(1)).toThrow();
+  });
+
+  it('adds class when collapsed prop true', () => {
+    const wrapper = setup.mount(
+      <FiltersSectionHeading {...mockProps()} collapsed={true} />
+    );
+    const children = wrapper.find('.filters-section-heading__toggle-btn');
+    expect(children.hasClass('filters-section-heading__toggle-btn--alt')).toBe(
+      true
+    );
+  });
+
+  it('adds class when disabled prop true', () => {
+    const wrapper = setup.mount(
+      <FiltersSectionHeading {...mockProps()} disabled={true} />
+    );
+    const children = wrapper.find('.filters-section-heading__toggle-btn');
+    expect(
+      children.hasClass('filters-section-heading__toggle-btn--disabled')
+    ).toBe(true);
+  });
+});
diff --git a/src/components/filters/filters-section/filters-section.js b/src/components/filters/filters-section/filters-section.js
new file mode 100644
index 0000000000..0a16489c20
--- /dev/null
+++ b/src/components/filters/filters-section/filters-section.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import classnames from 'classnames';
+import FiltersSectionHeading from '../filters-section-heading/filters-section-heading';
+import FiltersGroup from '../filters-group/filters-group';
+
+import './filters-section.scss';
+
+/** Represents a section within the filters. */
+const FiltersSection = ({
+  group,
+  groupCollapsed,
+  items,
+  onGroupToggleChanged,
+  onItemChange,
+  onItemClick,
+  onItemMouseEnter,
+  onItemMouseLeave,
+  onToggleGroupCollapsed,
+  searchValue,
+}) => {
+  const { id, allUnchecked } = group;
+  const collapsed = Boolean(searchValue) ? false : groupCollapsed[id];
+  const groupItems = items[id] || [];
+
+  return (
+    <li
+      className={classnames('filters-section', `filters-section--type-${id}`, {
+        'filters-section--all-unchecked': allUnchecked,
+      })}
+      key={id}
+    >
+      <FiltersSectionHeading
+        group={group}
+        collapsed={collapsed}
+        groupItems={groupItems}
+        onGroupToggleChanged={onGroupToggleChanged}
+        onToggleGroupCollapsed={onToggleGroupCollapsed}
+      />
+      <FiltersGroup
+        collapsed={collapsed}
+        group={group}
+        items={groupItems}
+        onItemChange={onItemChange}
+        onItemClick={onItemClick}
+        onItemMouseEnter={onItemMouseEnter}
+        onItemMouseLeave={onItemMouseLeave}
+      />
+    </li>
+  );
+};
+
+export default FiltersSection;
diff --git a/src/components/filters/filters-section/filters-section.scss b/src/components/filters/filters-section/filters-section.scss
new file mode 100644
index 0000000000..a0f90a9516
--- /dev/null
+++ b/src/components/filters/filters-section/filters-section.scss
@@ -0,0 +1,6 @@
+// Bright row text when the parent groups are all unchecked
+.filters-section--all-unchecked {
+  .row-text__label--kind-filter {
+    opacity: 1;
+  }
+}
diff --git a/src/components/filters/filters-section/filters-section.test.js b/src/components/filters/filters-section/filters-section.test.js
new file mode 100755
index 0000000000..57241db95c
--- /dev/null
+++ b/src/components/filters/filters-section/filters-section.test.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import FiltersSection from './filters-section';
+import { mockState, setup } from '../../../utils/state.mock';
+import { getNodeTypes } from '../../../selectors/node-types';
+import { getGroupedNodes } from '../../../selectors/nodes';
+import { getGroups } from '../../node-list/node-list-items';
+
+describe('FiltersSection Component', () => {
+  const mockProps = () => {
+    const items = getGroupedNodes(mockState.spaceflights);
+    const nodeTypes = getNodeTypes(mockState.spaceflights);
+    const groups = getGroups({ nodeTypes, items });
+    return { items, group: groups['elementType'], groupCollapsed: {} };
+  };
+
+  it('renders without throwing', () => {
+    expect(() =>
+      setup.mount(<FiltersSection {...mockProps()} />)
+    ).not.toThrow();
+  });
+  it('adds clas all-uncheckes when allUnchecked prop true', () => {
+    const wrapper = setup.mount(<FiltersSection {...mockProps()} />);
+    const children = wrapper.find('.filters-section');
+    expect(children.hasClass('filters-section--all-unchecked')).toBe(true);
+  });
+});
diff --git a/src/components/filters/filters.js b/src/components/filters/filters.js
new file mode 100644
index 0000000000..749cd4ac6e
--- /dev/null
+++ b/src/components/filters/filters.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import FiltersSection from './filters-section/filters-section';
+
+import './filters.scss';
+
+const Filters = ({
+  groupCollapsed,
+  groups,
+  isResetFilterActive,
+  items,
+  onGroupToggleChanged,
+  onItemChange,
+  onItemClick,
+  onItemMouseEnter,
+  onItemMouseLeave,
+  onResetFilter,
+  onToggleGroupCollapsed,
+  searchValue,
+}) => {
+  return (
+    <>
+      <div className="filters__header">
+        <h2 className="filters__title">
+          <span>Filters</span>
+        </h2>
+        <button
+          disabled={!isResetFilterActive}
+          onClick={onResetFilter}
+          className="filters__reset-button"
+        >
+          Reset
+        </button>
+      </div>
+      <ul className="filters__section-wrapper">
+        {Object.values(groups).map((group) => {
+          return (
+            <FiltersSection
+              group={group}
+              groupCollapsed={groupCollapsed}
+              items={items}
+              key={group.id}
+              onGroupToggleChanged={onGroupToggleChanged}
+              onItemChange={onItemChange}
+              onItemClick={onItemClick}
+              onItemMouseEnter={onItemMouseEnter}
+              onItemMouseLeave={onItemMouseLeave}
+              onToggleGroupCollapsed={onToggleGroupCollapsed}
+              searchValue={searchValue}
+            />
+          );
+        })}
+      </ul>
+    </>
+  );
+};
+
+export default Filters;
diff --git a/src/components/node-list/styles/_section.scss b/src/components/filters/filters.scss
similarity index 72%
rename from src/components/node-list/styles/_section.scss
rename to src/components/filters/filters.scss
index a854ce8ee8..dccad4d453 100644
--- a/src/components/node-list/styles/_section.scss
+++ b/src/components/filters/filters.scss
@@ -1,6 +1,6 @@
-@use './variables';
-@use '../../../styles/extends';
-@use '../../../styles/variables' as colors;
+@use '../node-list/styles/variables';
+@use '../../styles/extends';
+@use '../../styles/variables' as colors;
 
 .kui-theme--light {
   --color-text-reset: #{colors.$black-800};
@@ -10,14 +10,20 @@
   --color-text-reset: #{colors.$white-600};
 }
 
-.pipeline-nodelist-section__filters {
+.filters__section-wrapper {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.filters__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 6px (variables.$section-title-padding-x + 0.92) 12px
     (variables.$section-title-padding-x + 1.06);
 
-  .pipeline-nodelist-section__title {
+  .filters__title {
     font-weight: normal;
     font-size: 1.6em;
     opacity: 0.55;
@@ -25,7 +31,7 @@
     margin: 0;
   }
 
-  .pipeline-nodelist-section__reset-filter {
+  .filters__reset-button {
     @extend %button;
 
     font-size: 1.3em;
diff --git a/src/components/filters/filters.test.js b/src/components/filters/filters.test.js
new file mode 100644
index 0000000000..76af07c597
--- /dev/null
+++ b/src/components/filters/filters.test.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import Filters from './filters';
+import { mockState, setup } from '../../utils/state.mock';
+import { getNodeTypes } from '../../selectors/node-types';
+import { getGroupedNodes } from '../../selectors/nodes';
+import { getGroups } from '../node-list/node-list-items';
+
+describe('Filters', () => {
+  const mockProps = () => {
+    const items = getGroupedNodes(mockState.spaceflights);
+    const nodeTypes = getNodeTypes(mockState.spaceflights);
+    const groups = getGroups({ nodeTypes, items });
+    return { items, groups, groupCollapsed: {} };
+  };
+
+  it('renders without throwing', () => {
+    expect(() => setup.mount(<Filters {...mockProps()} />)).not.toThrow();
+  });
+
+  it('handles collapse button click events', () => {
+    const wrapper = setup.mount(<Filters {...mockProps()} />);
+    const nodeList = () => wrapper.find('.filters-group').first();
+    const toggle = () =>
+      wrapper.find('.filters-section-heading__toggle-btn').first();
+    expect(nodeList().length).toBe(1);
+    expect(toggle().hasClass('filters-section-heading__toggle-btn--alt')).toBe(
+      false
+    );
+    expect(() => {
+      toggle()
+        .hasClass('filters-section-heading__toggle-btn--disabled')
+        .toBe(false);
+      toggle().simulate('click');
+      expect(nodeList().length).toBe(1);
+      expect(
+        toggle().hasClass('filters-section-heading__toggle-btn--alt')
+      ).toBe(true);
+    }).toThrow();
+  });
+
+  it('handles group checkbox change events', () => {
+    const onGroupToggleChanged = jest.fn();
+    const wrapper = setup.mount(
+      <Filters {...mockProps()} onGroupToggleChanged={onGroupToggleChanged} />
+    );
+    const checkbox = () => wrapper.find('input').first();
+    checkbox().simulate('change', { target: { checked: false } });
+    expect(onGroupToggleChanged.mock.calls.length).toEqual(1);
+  });
+
+  it('calls onResetFilter when reset button is clicked', () => {
+    const onResetFilter = jest.fn();
+    const wrapper = setup.mount(
+      <Filters {...mockProps()} onResetFilter={onResetFilter} />
+    );
+    const resetButton = wrapper.find('.filters__reset-button');
+    expect(resetButton.exists()).toBe(true);
+    resetButton.simulate('click');
+    expect(() => onResetFilter.mock.calls.length.toEqual(1)).toThrow();
+  });
+});
diff --git a/src/components/node-list/index.js b/src/components/node-list/index.js
index da2ea0984a..e338a34960 100644
--- a/src/components/node-list/index.js
+++ b/src/components/node-list/index.js
@@ -44,7 +44,10 @@ import {
 } from '../../actions/nodes';
 import { useGeneratePathname } from '../../utils/hooks/use-generate-pathname';
 import './styles/node-list.scss';
-import { params, NODE_TYPES } from '../../config';
+import { params, NODE_TYPES, localStorageName } from '../../config';
+import { loadLocalStorage, saveLocalStorage } from '../../store/helpers';
+
+const storedState = loadLocalStorage(localStorageName);
 
 /**
  * Provides data from the store to populate a NodeList component.
@@ -78,6 +81,9 @@ const NodeListProvider = ({
 }) => {
   const [searchValue, updateSearchValue] = useState('');
   const [isResetFilterActive, setIsResetFilterActive] = useState(false);
+  const [groupCollapsed, setGroupCollapsed] = useState(
+    storedState.groupsCollapsed || {}
+  );
 
   const {
     toSelectedPipeline,
@@ -225,6 +231,17 @@ const NodeListProvider = ({
     }
   };
 
+  // Collapse/expand node group of filters
+  const onToggleGroupCollapsed = (groupID) => {
+    const res = {
+      ...groupCollapsed,
+      [groupID]: !groupCollapsed[groupID],
+    };
+
+    setGroupCollapsed(res);
+    saveLocalStorage(localStorageName, { groupsCollapsed: res });
+  };
+
   const onGroupToggleChanged = (groupType) => {
     // Enable all items in group if none enabled, otherwise disable all of them
     const groupItems = items[groupType] || [];
@@ -319,6 +336,8 @@ const NodeListProvider = ({
       onUpdateSearchValue={debounce(updateSearchValue, 250)}
       onModularPipelineToggleExpanded={handleToggleModularPipelineExpanded}
       onGroupToggleChanged={onGroupToggleChanged}
+      onToggleGroupCollapsed={onToggleGroupCollapsed}
+      groupCollapsed={groupCollapsed}
       onToggleFocusMode={onToggleFocusMode}
       onItemClick={onItemClick}
       onItemMouseEnter={onItemMouseEnter}
diff --git a/src/components/node-list/node-list-group.js b/src/components/node-list/node-list-group.js
deleted file mode 100644
index 4d68df9b19..0000000000
--- a/src/components/node-list/node-list-group.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { FilterRow } from '../filter-row/filter-row';
-import NodeRowList from './node-list-row-list';
-
-export const NodeListGroup = ({
-  allUnchecked,
-  checked,
-  collapsed,
-  group,
-  id,
-  invisibleIcon,
-  items,
-  kind,
-  name,
-  onItemChange,
-  onItemClick,
-  onItemMouseEnter,
-  onItemMouseLeave,
-  onToggleChecked,
-  onToggleCollapsed,
-  visibleIcon,
-}) => {
-  const disabledGroup = items.length === 0;
-
-  return (
-    <li
-      className={classnames(
-        'pipeline-nodelist__group',
-        `pipeline-nodelist__group--type-${id}`,
-        `pipeline-nodelist__group--kind-${kind}`,
-        {
-          'pipeline-nodelist__group--all-unchecked': allUnchecked,
-        }
-      )}
-    >
-      <h3 className="pipeline-nodelist__heading">
-        <FilterRow
-          allUnchecked={allUnchecked}
-          checked={checked}
-          container="div"
-          id={id}
-          offIndicatorIcon={invisibleIcon}
-          kind={kind}
-          label={name}
-          name={name}
-          onChange={(e) => {
-            onToggleChecked(id, !e.target.checked);
-          }}
-          rowType="filter"
-          indicatorIcon={visibleIcon}
-        >
-          <button
-            aria-label={`${collapsed ? 'Show' : 'Hide'} ${name.toLowerCase()}`}
-            className={classnames('pipeline-type-group-toggle', {
-              'pipeline-type-group-toggle--alt': collapsed,
-            })}
-            disabled={disabledGroup}
-            onClick={() => onToggleCollapsed(id)}
-          />
-        </FilterRow>
-      </h3>
-      <NodeRowList
-        collapsed={collapsed}
-        group={group}
-        items={items}
-        onItemChange={onItemChange}
-        onItemClick={onItemClick}
-        onItemMouseEnter={onItemMouseEnter}
-        onItemMouseLeave={onItemMouseLeave}
-      />
-    </li>
-  );
-};
-
-export default NodeListGroup;
diff --git a/src/components/node-list/node-list-group.test.js b/src/components/node-list/node-list-group.test.js
deleted file mode 100644
index 940f9bedc0..0000000000
--- a/src/components/node-list/node-list-group.test.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import { NodeListGroup } from './node-list-group';
-import { getNodeTypes } from '../../selectors/node-types';
-import { setup, mockState } from '../../utils/state.mock';
-
-describe('NodeListGroup', () => {
-  const items = [];
-
-  it('renders without throwing', () => {
-    const type = getNodeTypes(mockState.spaceflights)[0];
-    expect(() =>
-      setup.mount(<NodeListGroup id={type.id} name={type.name} items={items} />)
-    ).not.toThrow();
-  });
-
-  it('handles checkbox change events', () => {
-    const type = getNodeTypes(mockState.spaceflights)[0];
-    const onToggleChecked = jest.fn();
-    const wrapper = setup.mount(
-      <NodeListGroup
-        id={type.id}
-        name={type.name}
-        onToggleChecked={onToggleChecked}
-        items={items}
-      />
-    );
-    const checkbox = () => wrapper.find('input');
-    checkbox().simulate('change', { target: { checked: false } });
-    expect(onToggleChecked.mock.calls.length).toEqual(1);
-  });
-
-  it('handles collapse button click events', () => {
-    const type = getNodeTypes(mockState.spaceflights)[0];
-    const onToggleCollapsed = jest.fn();
-    const wrapper = setup.mount(
-      <NodeListGroup
-        id={type.id}
-        name={type.name}
-        onToggleCollapsed={onToggleCollapsed}
-        items={items}
-      />
-    );
-    wrapper.find('.pipeline-type-group-toggle').simulate('click');
-    expect(() => onToggleCollapsed.mock.calls.length.toEqual(1)).toThrow();
-  });
-
-  it('adds class when collapsed prop true', () => {
-    const type = getNodeTypes(mockState.spaceflights)[0];
-    const wrapper = setup.mount(
-      <NodeListGroup
-        id={type.id}
-        name={type.name}
-        collapsed={true}
-        items={items}
-      />
-    );
-    const children = wrapper.find('.pipeline-nodelist__children');
-    expect(children.hasClass('pipeline-nodelist__children--closed')).toBe(true);
-  });
-
-  it('removes class when collapsed prop false', () => {
-    const type = getNodeTypes(mockState.spaceflights)[0];
-    const wrapper = setup.mount(
-      <NodeListGroup
-        id={type.id}
-        name={type.name}
-        collapsed={false}
-        items={items}
-      />
-    );
-    const children = wrapper.find('.pipeline-nodelist__children');
-    expect(children.hasClass('pipeline-nodelist__children--closed')).toBe(
-      false
-    );
-  });
-});
diff --git a/src/components/node-list/node-list-groups.js b/src/components/node-list/node-list-groups.js
deleted file mode 100644
index a91dd31e94..0000000000
--- a/src/components/node-list/node-list-groups.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useState } from 'react';
-import { loadLocalStorage, saveLocalStorage } from '../../store/helpers';
-import NodeListGroup from './node-list-group';
-import { localStorageName } from '../../config';
-
-const storedState = loadLocalStorage(localStorageName);
-
-const NodeListGroups = ({
-  groups,
-  items,
-  onGroupToggleChanged,
-  onItemChange,
-  onItemClick,
-  onItemMouseEnter,
-  onItemMouseLeave,
-  searchValue,
-}) => {
-  const [collapsed, setCollapsed] = useState(storedState.groupsCollapsed || {});
-
-  // Collapse/expand node group
-  const onToggleGroupCollapsed = (groupID) => {
-    const groupsCollapsed = {
-      ...collapsed,
-      [groupID]: !collapsed[groupID],
-    };
-
-    setCollapsed(groupsCollapsed);
-    saveLocalStorage(localStorageName, { groupsCollapsed });
-  };
-
-  return (
-    <nav className="pipeline-nodelist-section kedro">
-      <ul className="pipeline-nodelist__list">
-        {Object.values(groups).map((group) => (
-          <NodeListGroup
-            allUnchecked={group.allUnchecked}
-            checked={group.checked}
-            collapsed={Boolean(searchValue) ? false : collapsed[group.id]}
-            group={group}
-            id={group.id}
-            invisibleIcon={group.invisibleIcon}
-            items={items[group.id] || []}
-            key={group.id}
-            kind={group.kind}
-            name={group.name}
-            onItemChange={onItemChange}
-            onItemClick={onItemClick}
-            onItemMouseEnter={onItemMouseEnter}
-            onItemMouseLeave={onItemMouseLeave}
-            onToggleChecked={onGroupToggleChanged}
-            onToggleCollapsed={onToggleGroupCollapsed}
-            visibleIcon={group.visibleIcon}
-          />
-        ))}
-      </ul>
-    </nav>
-  );
-};
-
-export default NodeListGroups;
diff --git a/src/components/node-list/node-list-groups.test.js b/src/components/node-list/node-list-groups.test.js
deleted file mode 100644
index abaa7d4d52..0000000000
--- a/src/components/node-list/node-list-groups.test.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import NodeListGroups from './node-list-groups';
-import { mockState, setup } from '../../utils/state.mock';
-import { getNodeTypes } from '../../selectors/node-types';
-import { getGroupedNodes } from '../../selectors/nodes';
-import { getGroups } from './node-list-items';
-
-describe('NodeListGroups', () => {
-  const mockProps = () => {
-    const items = getGroupedNodes(mockState.spaceflights);
-    const nodeTypes = getNodeTypes(mockState.spaceflights);
-    const groups = getGroups({ nodeTypes, items });
-    return { items, groups };
-  };
-
-  it('renders without throwing', () => {
-    expect(() =>
-      setup.mount(<NodeListGroups {...mockProps()} />)
-    ).not.toThrow();
-  });
-
-  it('handles collapse button click events', () => {
-    const wrapper = setup.mount(<NodeListGroups {...mockProps()} />);
-    const nodeList = () =>
-      wrapper.find('.pipeline-nodelist__list--nested').first();
-    const toggle = () => wrapper.find('.pipeline-type-group-toggle').first();
-    expect(nodeList().length).toBe(1);
-    expect(toggle().hasClass('pipeline-type-group-toggle--alt')).toBe(false);
-    expect(() => {
-      toggle().hasClass('pipeline-type-group-toggle--disabled').toBe(false);
-      toggle().simulate('click');
-      expect(nodeList().length).toBe(1);
-      expect(toggle().hasClass('pipeline-type-group-toggle--alt')).toBe(true);
-    }).toThrow();
-  });
-
-  it('handles group checkbox change events', () => {
-    const onGroupToggleChanged = jest.fn();
-    const wrapper = setup.mount(
-      <NodeListGroups
-        {...mockProps()}
-        onGroupToggleChanged={onGroupToggleChanged}
-      />
-    );
-    const checkbox = () => wrapper.find('input').first();
-    checkbox().simulate('change', { target: { checked: false } });
-    expect(onGroupToggleChanged.mock.calls.length).toEqual(1);
-  });
-});
diff --git a/src/components/node-list/node-list.js b/src/components/node-list/node-list.js
index 08f415b4fb..ad3b7690f5 100644
--- a/src/components/node-list/node-list.js
+++ b/src/components/node-list/node-list.js
@@ -2,7 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import { Scrollbars } from 'react-custom-scrollbars-2';
 import SearchList from '../search-list';
-import NodeListGroups from './node-list-groups';
+import Filters from '../filters/filters';
 import NodeListTree from './node-list-tree';
 import SplitPanel from '../split-panel';
 
@@ -21,6 +21,8 @@ const NodeList = ({
   getGroupState,
   onUpdateSearchValue,
   onGroupToggleChanged,
+  onToggleGroupCollapsed,
+  groupCollapsed,
   onItemClick,
   onItemMouseEnter,
   onItemMouseLeave,
@@ -83,28 +85,20 @@ const NodeList = ({
                 autoHide
                 hideTracksWhenNotNeeded
               >
-                <div className="pipeline-nodelist-section__filters">
-                  <h2 className="pipeline-nodelist-section__title">
-                    <span>Filters</span>
-                  </h2>
-                  <button
-                    disabled={!isResetFilterActive}
-                    onClick={onResetFilter}
-                    className="pipeline-nodelist-section__reset-filter"
-                  >
-                    Reset
-                  </button>
-                </div>
-                <NodeListGroups
-                  items={items}
-                  groups={groups}
-                  searchValue={searchValue}
+                <Filters
                   getGroupState={getGroupState}
+                  groupCollapsed={groupCollapsed}
+                  groups={groups}
+                  isResetFilterActive={isResetFilterActive}
+                  items={items}
+                  onGroupToggleChanged={onGroupToggleChanged}
+                  onItemChange={onItemChange}
                   onItemClick={onItemClick}
                   onItemMouseEnter={onItemMouseEnter}
                   onItemMouseLeave={onItemMouseLeave}
-                  onItemChange={onItemChange}
-                  onGroupToggleChanged={onGroupToggleChanged}
+                  onResetFilter={onResetFilter}
+                  onToggleGroupCollapsed={onToggleGroupCollapsed}
+                  searchValue={searchValue}
                 />
               </Scrollbars>
             </div>
diff --git a/src/components/node-list/node-list.test.js b/src/components/node-list/node-list.test.js
index 83305c5af9..be2054c364 100644
--- a/src/components/node-list/node-list.test.js
+++ b/src/components/node-list/node-list.test.js
@@ -31,7 +31,7 @@ describe('NodeList', () => {
       </MemoryRouter>
     );
     const search = wrapper.find('.pipeline-search-list');
-    const nodeList = wrapper.find('.pipeline-nodelist__list');
+    const nodeList = wrapper.find('.filters__section-wrapper');
     expect(search.length).toBe(1);
     expect(nodeList.length).toBeGreaterThan(0);
   });
@@ -255,8 +255,7 @@ describe('NodeList', () => {
       return elements(wrapper).filter(([_, enabled]) => enabled);
     };
 
-    const tagItem = (wrapper) =>
-      wrapper.find('.pipeline-nodelist__group--type-tag');
+    const tagItem = (wrapper) => wrapper.find('.filters-section--type-tag');
 
     const partialIcon = (wrapper) =>
       tagItem(wrapper).find(IndicatorPartialIcon);
@@ -288,7 +287,7 @@ describe('NodeList', () => {
           <NodeList />
         </MemoryRouter>
       );
-      const uncheckedClass = 'pipeline-nodelist__group--all-unchecked';
+      const uncheckedClass = 'filters-section--all-unchecked';
 
       expect(tagItem(wrapper).hasClass(uncheckedClass)).toBe(true);
       changeRows(wrapper, ['Preprocessing'], true);
@@ -373,10 +372,7 @@ describe('NodeList', () => {
           <NodeList />
         </MemoryRouter>
       );
-      const nodeList = wrapper.find(
-        '.pipeline-nodelist__list--nested .node-list-filter-row'
-      );
-      // const nodes = getNodeData(mockState.spaceflights);
+      const nodeList = wrapper.find('.filters-group .node-list-filter-row');
       const tags = getTagData(mockState.spaceflights);
       const elementTypes = Object.keys(sidebarElementTypes);
       expect(nodeList.length).toBe(tags.length + elementTypes.length);
@@ -462,9 +458,7 @@ describe('NodeList', () => {
       </MemoryRouter>
     );
 
-    const resetFilterButton = wrapper.find(
-      '.pipeline-nodelist-section__reset-filter'
-    );
+    const resetFilterButton = wrapper.find('.filters__reset-button');
 
     it('On first load before applying filter button should be disabled', () => {
       expect(resetFilterButton.prop('disabled')).toBe(true);
diff --git a/src/components/node-list/styles/_group.scss b/src/components/node-list/styles/_group.scss
deleted file mode 100644
index f9eb5d66f8..0000000000
--- a/src/components/node-list/styles/_group.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-@use '../../../styles/variables' as var;
-@use './variables';
-
-%nolist {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.pipeline-nodelist__list {
-  @extend %nolist;
-
-  &--nested {
-    margin: 0 0 1.2em;
-  }
-
-  .pipeline-nodelist__children {
-    // Avoid placeholder fade leaking out for small lists
-    overflow: hidden;
-
-    &--closed {
-      display: none;
-    }
-  }
-}
-
-$placeholder-fade: 120px;
-
-.pipeline-nodelist__heading {
-  position: sticky;
-  top: 0;
-  z-index: var.$zindex-nodelist-heading;
-  margin: 0;
-
-  // Avoid pixel gap above when scrolling.
-  transform: translateY(-1px);
-
-  .pipeline-nodelist__row__text,
-  .row-text {
-    position: relative;
-    opacity: 0.65;
-  }
-
-  .row-text .row-text__label {
-    font-size: 1.3em;
-  }
-}
-
-.pipeline-nodelist__elements-panel .pipeline-nodelist__heading {
-  background: var(--color-nodelist-element-panel);
-
-  &::after {
-    position: absolute;
-    bottom: -19px;
-    z-index: var.$zindex-group-background-fade;
-    width: 100%;
-    height: 20px;
-    background: linear-gradient(
-      0deg,
-      var(--color-nodelist-bg-transparent) 0%,
-      var(--color-nodelist-element-panel) 100%
-    );
-    transition: opacity ease 0.3s;
-    content: ' ';
-    pointer-events: none;
-  }
-}
-
-.pipeline-nodelist__filter-panel .pipeline-nodelist__heading {
-  background: var(--color-nodelist-filter-panel);
-
-  &::after {
-    position: absolute;
-    bottom: -19px;
-    z-index: var.$zindex-group-background-fade;
-    width: 100%;
-    height: 20px;
-    background: linear-gradient(
-      0deg,
-      var(--color-nodelist-bg-transparent) 0%,
-      var(--color-nodelist-filter-panel) 100%
-    );
-    transition: opacity ease 0.3s;
-    content: ' ';
-    pointer-events: none;
-  }
-}
-
-.pipeline-type-group-toggle {
-  width: variables.$toggle-size;
-  height: variables.$toggle-size;
-  padding: 0;
-  color: var(--color-default-alt);
-  font-size: inherit;
-  font-family: inherit;
-  line-height: 1em;
-  text-align: center;
-  background: none;
-  border: none;
-  border-radius: 50%;
-  box-shadow: none;
-  cursor: pointer;
-  transition: transform ease 0.1s;
-
-  &:focus {
-    outline: none;
-
-    [data-whatintent='keyboard'] & {
-      box-shadow: 0 0 0 3px var.$blue-300 inset;
-    }
-  }
-
-  &::before {
-    font-size: 1.8em;
-    opacity: 0.55;
-    content: '▾';
-  }
-
-  &:hover::before {
-    opacity: 1;
-  }
-
-  &--alt {
-    transform: rotate(90deg);
-  }
-
-  &--disabled {
-    color: var.$black-400;
-    transform: rotate(90deg);
-  }
-}
-
-// Bright row text when the parent groups are all unchecked
-.pipeline-nodelist__group--all-unchecked {
-  .row-text__label--kind-filter {
-    opacity: 1;
-  }
-}
diff --git a/src/components/node-list/styles/node-list.scss b/src/components/node-list/styles/node-list.scss
index 7cffa2b13b..4ebf9cf0ff 100644
--- a/src/components/node-list/styles/node-list.scss
+++ b/src/components/node-list/styles/node-list.scss
@@ -1,8 +1,6 @@
 @use '../../../styles/mixins' as mixins;
 @use '../../../styles/variables' as colors;
-@use './group';
 @use './panels';
-@use './section';
 @use './variables';
 
 .kui-theme--light {
diff --git a/src/components/sliced-pipeline-action-bar/sliced-pipeline-action-bar.test.js b/src/components/sliced-pipeline-action-bar/sliced-pipeline-action-bar.test.js
index 95e8bfecb9..a96681e509 100644
--- a/src/components/sliced-pipeline-action-bar/sliced-pipeline-action-bar.test.js
+++ b/src/components/sliced-pipeline-action-bar/sliced-pipeline-action-bar.test.js
@@ -1,6 +1,6 @@
 // sliced-pipeline-action-bar.test.js
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { SlicedPipelineActionBar } from './sliced-pipeline-action-bar';
 
 describe('SlicedPipelineActionBar', () => {
diff --git a/src/components/ui/toggle-control/toggle-control.scss b/src/components/ui/toggle-control/toggle-control.scss
index 181770d3ad..68ffd3075c 100644
--- a/src/components/ui/toggle-control/toggle-control.scss
+++ b/src/components/ui/toggle-control/toggle-control.scss
@@ -146,13 +146,6 @@ $filter-icon-opacity-3: 1;
     opacity: $filter-icon-opacity-1;
   }
 
-  &.toggle-control--icon--all-unchecked,
-  .pipeline-nodelist__heading &.toggle-control--icon--all-unchecked > * {
-    > * {
-      opacity: $filter-icon-opacity-0;
-    }
-  }
-
   .node-list-tree-item-row:hover & {
     > * {
       opacity: $filter-icon-opacity-1;