diff --git a/frontend/packages/console-app/locales/en/console-app.json b/frontend/packages/console-app/locales/en/console-app.json
index 57bb8ade81d..b5c3ca7357d 100644
--- a/frontend/packages/console-app/locales/en/console-app.json
+++ b/frontend/packages/console-app/locales/en/console-app.json
@@ -352,6 +352,21 @@
   "Mark as unschedulable": "Mark as unschedulable",
   "Unschedulable nodes won't accept new pods. This is useful for scheduling maintenance or preparing to decommission a node.": "Unschedulable nodes won't accept new pods. This is useful for scheduling maintenance or preparing to decommission a node.",
   "Mark unschedulable": "Mark unschedulable",
+  "Edit groups": "Edit groups",
+  "Groups help you organize and select resources.": "Groups help you organize and select resources.",
+  "No existing nodes": "No existing nodes",
+  "Groups can only be created when there are existing nodes": "Groups can only be created when there are existing nodes",
+  "To get started, add a group": "To get started, add a group",
+  "Add new group": "Add new group",
+  "Enter a group name, then press return, space, or comma": "Enter a group name, then press return, space, or comma",
+  "Add": "Add",
+  "Nodes for group": "Nodes for group",
+  "Select a group above": "Select a group above",
+  "Groups have been updated.": "Groups have been updated.",
+  "Click reload to see the changes.": "Click reload to see the changes.",
+  "Error occurred": "Error occurred",
+  "Reload": "Reload",
+  "Groups for": "Groups for",
   "View events": "View events",
   "Activity": "Activity",
   "Details": "Details",
@@ -360,6 +375,7 @@
   "Not available": "Not available",
   "Node addresses": "Node addresses",
   "Uptime": "Uptime",
+  "Edit": "Edit",
   "Inventory": "Inventory",
   "Image": "Image",
   "Images": "Images",
@@ -452,7 +468,6 @@
   "New identity provider added.": "New identity provider added.",
   "Authentication is being reconfigured. The new identity provider will be available once reconfiguration is complete.": "Authentication is being reconfigured. The new identity provider will be available once reconfiguration is complete.",
   "View authentication conditions for reconfiguration status.": "View authentication conditions for reconfiguration status.",
-  "Add": "Add",
   "Min available {{minAvailable}}": "Min available {{minAvailable}}",
   "Max unavailable {{maxUnavailable}}": "Max unavailable {{maxUnavailable}}",
   "Min available {{minAvailable}} of {{count}} pod_one": "Min available {{minAvailable}} of {{count}} pod",
diff --git a/frontend/packages/console-app/src/components/nodes/NodeGroupUtils.ts b/frontend/packages/console-app/src/components/nodes/NodeGroupUtils.ts
new file mode 100644
index 00000000000..a37cadb902e
--- /dev/null
+++ b/frontend/packages/console-app/src/components/nodes/NodeGroupUtils.ts
@@ -0,0 +1,49 @@
+import { NodeKind } from '@console/dynamic-plugin-sdk/src';
+
+export const GROUP_ANNOTATION = 'node.openshift.io/group';
+export const GROUP_SEPARATOR = ',';
+
+export type GroupNameMap = Record<string, string[]>;
+
+export const getGroupsFromGroupLabel = (groupLabel?: string): string[] =>
+  groupLabel
+    ?.split(GROUP_SEPARATOR)
+    .map((g) => g.trim())
+    .filter((g) => g.length > 0) ?? [];
+
+export const getNodeGroupLabelFromGroups = (groups: string[]): string =>
+  groups.join(GROUP_SEPARATOR);
+
+export const getNodeGroups = (node: NodeKind): string[] =>
+  getGroupsFromGroupLabel(node.metadata.annotations?.[GROUP_ANNOTATION]);
+
+export const getExistingGroups = (nodes: NodeKind[]): string[] => {
+  const uniqueGroups = new Set<string>();
+  nodes.forEach((node) => {
+    getNodeGroups(node).forEach((group) => {
+      uniqueGroups.add(group);
+    });
+  });
+  return Array.from(uniqueGroups).sort((a, b) => a.localeCompare(b));
+};
+
+export const getGroupsByNameFromNodes = (nodes: NodeKind[]): GroupNameMap => {
+  const updatedGroupsByName: GroupNameMap = {};
+
+  nodes.forEach((node) => {
+    const groupNames = getNodeGroups(node);
+    groupNames.forEach((groupName) => {
+      const existingGroup = updatedGroupsByName[groupName] ?? [];
+      updatedGroupsByName[groupName] = [...existingGroup, node.metadata.name];
+    });
+  });
+  return updatedGroupsByName;
+};
+
+export const getNodeGroupLabelFromGroupNameMap = (
+  nodeName: string,
+  groupsByName: GroupNameMap,
+): string | undefined => {
+  const groups = Object.keys(groupsByName).filter((key) => groupsByName[key].includes(nodeName));
+  return groups.length ? getNodeGroupLabelFromGroups(groups) : undefined;
+};
diff --git a/frontend/packages/console-app/src/components/nodes/NodesPage.tsx b/frontend/packages/console-app/src/components/nodes/NodesPage.tsx
index 80c6e0aca1b..19f30722821 100644
--- a/frontend/packages/console-app/src/components/nodes/NodesPage.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodesPage.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react';
 import { useMemo, useCallback, useEffect, Suspense } from 'react';
+import { Button, ButtonVariant } from '@patternfly/react-core';
 import { DataViewCheckboxFilter } from '@patternfly/react-data-view';
 import { DataViewFilterOption } from '@patternfly/react-data-view/dist/cjs/DataViewFilters';
 import * as _ from 'lodash';
@@ -17,12 +18,15 @@ import {
   ConsoleDataViewRow,
   ResourceFilters,
 } from '@console/app/src/components/data-view/types';
+import GroupsEditorModal from '@console/app/src/components/nodes/modals/GroupsEditorModal';
+import { getNodeGroups } from '@console/app/src/components/nodes/NodeGroupUtils';
 import {
   getGroupVersionKindForResource,
   K8sModel,
   ListPageBody,
   useAccessReview,
   useFlag,
+  useOverlay,
 } from '@console/dynamic-plugin-sdk/src/api/dynamic-core-api';
 import {
   K8sGroupVersionKind,
@@ -115,6 +119,9 @@ const nodeColumnInfo = Object.freeze({
   status: {
     id: 'status',
   },
+  groups: {
+    id: 'groups',
+  },
   machineOwner: {
     id: 'machineOwner',
   },
@@ -188,6 +195,13 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
           modifier: 'nowrap',
         },
       },
+      {
+        title: t('console-app~Groups'),
+        id: nodeColumnInfo.groups.id,
+        props: {
+          modifier: 'nowrap',
+        },
+      },
       {
         title: t('console-app~Machine set'),
         id: nodeColumnInfo.machineOwner.id,
@@ -357,6 +371,10 @@ const CPUCell: FC<{ cores: number; totalCores: number }> = ({ cores, totalCores
   );
 };
 
+const GroupsCell: FC<{ node: NodeKind }> = ({ node }) => (
+  <>{getNodeGroups(node).sort().join(', ') || DASH}</>
+);
+
 const getNodeDataViewRows = (
   rowData: RowProps<NodeRowItem, GetNodeStatusExtensions>[],
   tableColumns: ConsoleDataViewColumn<NodeRowItem>[],
@@ -420,6 +438,9 @@ const getNodeDataViewRows = (
           />
         ),
       },
+      [nodeColumnInfo.groups.id]: {
+        cell: node ? <GroupsCell node={node} /> : DASH,
+      },
       [nodeColumnInfo.role.id]: {
         cell: node ? <NodeRoles node={node} /> : DASH,
       },
@@ -862,6 +883,7 @@ const useWatchResourcesIfAllowed = <R extends K8sResourceCommon[]>(
 export const NodesPage: FC<NodesPageProps> = ({ selector }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
+  const launchOverlay = useOverlay();
 
   const [selectedColumns, , userSettingsLoaded] = useUserSettingsCompatibility<TableColumnsType>(
     COLUMN_MANAGEMENT_CONFIGMAP_KEY,
@@ -870,6 +892,12 @@ export const NodesPage: FC<NodesPageProps> = ({ selector }) => {
     true,
   );
 
+  const [canEdit, isEditLoading] = useAccessReview({
+    group: NodeModel.apiGroup || '',
+    resource: NodeModel.plural,
+    verb: 'patch',
+  });
+
   const [nodes, nodesLoaded, nodesLoadError] = useK8sWatchResource<NodeKind[]>({
     groupVersionKind: {
       kind: 'Node',
@@ -1009,7 +1037,16 @@ export const NodesPage: FC<NodesPageProps> = ({ selector }) => {
 
   return (
     <>
-      <ListPageHeader title={t('public~Nodes')} />
+      <ListPageHeader title={t('public~Nodes')}>
+        {!isEditLoading && canEdit ? (
+          <Button
+            variant={ButtonVariant.secondary}
+            onClick={() => launchOverlay(GroupsEditorModal, {})}
+          >
+            {t('console-app~Edit groups')}
+          </Button>
+        ) : null}
+      </ListPageHeader>
       <ListPageBody>
         <NodeList
           data={data}
diff --git a/frontend/packages/console-app/src/components/nodes/__tests__/NodeGroupUtils.spec.ts b/frontend/packages/console-app/src/components/nodes/__tests__/NodeGroupUtils.spec.ts
new file mode 100644
index 00000000000..091d11c4972
--- /dev/null
+++ b/frontend/packages/console-app/src/components/nodes/__tests__/NodeGroupUtils.spec.ts
@@ -0,0 +1,486 @@
+import { NodeKind } from '@console/dynamic-plugin-sdk/src';
+import {
+  GROUP_ANNOTATION,
+  getGroupsFromGroupLabel,
+  getNodeGroupLabelFromGroups,
+  getNodeGroups,
+  getExistingGroups,
+  getGroupsByNameFromNodes,
+  getNodeGroupLabelFromGroupNameMap,
+  GroupNameMap,
+} from '../NodeGroupUtils';
+
+describe('NodeGroupUtils', () => {
+  describe('getGroupsFromGroupLabel', () => {
+    it('should split comma-separated groups', () => {
+      const result = getGroupsFromGroupLabel('group1,group2,group3');
+      expect(result).toEqual(['group1', 'group2', 'group3']);
+    });
+
+    it('should trim whitespace from groups', () => {
+      const result = getGroupsFromGroupLabel(' group1 , group2 , group3 ');
+      expect(result).toEqual(['group1', 'group2', 'group3']);
+    });
+
+    it('should filter out empty strings', () => {
+      const result = getGroupsFromGroupLabel('group1,,group2,,,group3');
+      expect(result).toEqual(['group1', 'group2', 'group3']);
+    });
+
+    it('should handle whitespace-only segments', () => {
+      const result = getGroupsFromGroupLabel('group1,  ,group2,   ,group3');
+      expect(result).toEqual(['group1', 'group2', 'group3']);
+    });
+
+    it('should return empty array for undefined input', () => {
+      const result = getGroupsFromGroupLabel(undefined);
+      expect(result).toEqual([]);
+    });
+
+    it('should return empty array for empty string', () => {
+      const result = getGroupsFromGroupLabel('');
+      expect(result).toEqual([]);
+    });
+
+    it('should return empty array for whitespace-only string', () => {
+      const result = getGroupsFromGroupLabel('   ');
+      expect(result).toEqual([]);
+    });
+
+    it('should handle single group', () => {
+      const result = getGroupsFromGroupLabel('single-group');
+      expect(result).toEqual(['single-group']);
+    });
+
+    it('should handle groups with special characters', () => {
+      const result = getGroupsFromGroupLabel('prod-us-east-1,dev-eu-west-2');
+      expect(result).toEqual(['prod-us-east-1', 'dev-eu-west-2']);
+    });
+  });
+
+  describe('getNodeGroupLabelFromGroups', () => {
+    it('should join groups with comma separator', () => {
+      const result = getNodeGroupLabelFromGroups(['group1', 'group2', 'group3']);
+      expect(result).toBe('group1,group2,group3');
+    });
+
+    it('should handle single group', () => {
+      const result = getNodeGroupLabelFromGroups(['single-group']);
+      expect(result).toBe('single-group');
+    });
+
+    it('should handle empty array', () => {
+      const result = getNodeGroupLabelFromGroups([]);
+      expect(result).toBe('');
+    });
+
+    it('should preserve group order', () => {
+      const result = getNodeGroupLabelFromGroups(['z-group', 'a-group', 'm-group']);
+      expect(result).toBe('z-group,a-group,m-group');
+    });
+  });
+
+  describe('getNodeGroups', () => {
+    it('should extract groups from node annotation', () => {
+      const node: Partial<NodeKind> = {
+        metadata: {
+          name: 'node1',
+          annotations: {
+            [GROUP_ANNOTATION]: 'group1,group2,group3',
+          },
+        },
+      };
+
+      const result = getNodeGroups(node as NodeKind);
+      expect(result).toEqual(['group1', 'group2', 'group3']);
+    });
+
+    it('should return empty array when annotation is missing', () => {
+      const node: NodeKind = {
+        metadata: {
+          name: 'node1',
+        },
+      } as NodeKind;
+
+      const result = getNodeGroups(node);
+      expect(result).toEqual([]);
+    });
+
+    it('should return empty array when annotations object is missing', () => {
+      const node: Partial<NodeKind> = {
+        metadata: {
+          name: 'node1',
+          annotations: {},
+        },
+      } as NodeKind;
+
+      const result = getNodeGroups(node as NodeKind);
+      expect(result).toEqual([]);
+    });
+
+    it('should handle empty annotation value', () => {
+      const node: Partial<NodeKind> = {
+        metadata: {
+          name: 'node1',
+          annotations: {
+            [GROUP_ANNOTATION]: '',
+          },
+        },
+      };
+
+      const result = getNodeGroups(node as NodeKind);
+      expect(result).toEqual([]);
+    });
+
+    it('should trim whitespace from groups in annotation', () => {
+      const node: Partial<NodeKind> = {
+        metadata: {
+          name: 'node1',
+          annotations: {
+            [GROUP_ANNOTATION]: ' group1 , group2 , group3 ',
+          },
+        },
+      };
+
+      const result = getNodeGroups(node as NodeKind);
+      expect(result).toEqual(['group1', 'group2', 'group3']);
+    });
+  });
+
+  describe('getExistingGroups', () => {
+    it('should return unique groups from all nodes sorted alphabetically', () => {
+      const nodes: Partial<NodeKind>[] = [
+        {
+          metadata: {
+            name: 'node1',
+            annotations: { [GROUP_ANNOTATION]: 'group-c,group-a' },
+          },
+        },
+        {
+          metadata: {
+            name: 'node2',
+            annotations: { [GROUP_ANNOTATION]: 'group-b,group-a' },
+          },
+        },
+        {
+          metadata: {
+            name: 'node3',
+            annotations: { [GROUP_ANNOTATION]: 'group-c,group-d' },
+          },
+        },
+      ];
+
+      const result = getExistingGroups(nodes as NodeKind[]);
+      expect(result).toEqual(['group-a', 'group-b', 'group-c', 'group-d']);
+    });
+
+    it('should handle nodes without annotations', () => {
+      const nodes: Partial<NodeKind>[] = [
+        {
+          metadata: {
+            name: 'node1',
+            annotations: { [GROUP_ANNOTATION]: 'group-a' },
+          },
+        },
+        {
+          metadata: { name: 'node2' },
+        },
+        {
+          metadata: {
+            name: 'node3',
+            annotations: { [GROUP_ANNOTATION]: 'group-b' },
+          },
+        },
+      ];
+
+      const result = getExistingGroups(nodes as NodeKind[]);
+      expect(result).toEqual(['group-a', 'group-b']);
+    });
+
+    it('should return empty array for empty nodes array', () => {
+      const result = getExistingGroups([]);
+      expect(result).toEqual([]);
+    });
+
+    it('should return empty array when no nodes have groups', () => {
+      const nodes: NodeKind[] = [
+        { metadata: { name: 'node1' } } as NodeKind,
+        { metadata: { name: 'node2' } } as NodeKind,
+      ];
+
+      const result = getExistingGroups(nodes);
+      expect(result).toEqual([]);
+    });
+
+    it('should handle duplicate groups across nodes', () => {
+      const nodes: Partial<NodeKind>[] = [
+        {
+          metadata: {
+            name: 'node1',
+            annotations: { [GROUP_ANNOTATION]: 'prod,staging' },
+          },
+        },
+        {
+          metadata: {
+            name: 'node2',
+            annotations: { [GROUP_ANNOTATION]: 'prod,dev' },
+          },
+        },
+        {
+          metadata: {
+            name: 'node3',
+            annotations: { [GROUP_ANNOTATION]: 'staging,dev' },
+          },
+        },
+      ];
+
+      const result = getExistingGroups(nodes as NodeKind[]);
+      expect(result).toEqual(['dev', 'prod', 'staging']);
+    });
+  });
+
+  describe('getGroupsByNameFromNodes', () => {
+    it('should create map of group names to node names', () => {
+      const nodes: Partial<NodeKind>[] = [
+        {
+          metadata: {
+            name: 'node1',
+            annotations: { [GROUP_ANNOTATION]: 'prod,us-east' },
+          },
+        },
+        {
+          metadata: {
+            name: 'node2',
+            annotations: { [GROUP_ANNOTATION]: 'prod,eu-west' },
+          },
+        },
+        {
+          metadata: {
+            name: 'node3',
+            annotations: { [GROUP_ANNOTATION]: 'dev,us-east' },
+          },
+        },
+      ];
+
+      const result = getGroupsByNameFromNodes(nodes as NodeKind[]);
+
+      expect(result).toEqual({
+        prod: ['node1', 'node2'],
+        'us-east': ['node1', 'node3'],
+        'eu-west': ['node2'],
+        dev: ['node3'],
+      });
+    });
+
+    it('should handle nodes without groups', () => {
+      const nodes: Partial<NodeKind>[] = [
+        {
+          metadata: {
+            name: 'node1',
+            annotations: { [GROUP_ANNOTATION]: 'prod' },
+          },
+        },
+        { metadata: { name: 'node2' } },
+        {
+          metadata: {
+            name: 'node3',
+            annotations: { [GROUP_ANNOTATION]: 'dev' },
+          },
+        },
+      ];
+
+      const result = getGroupsByNameFromNodes(nodes as NodeKind[]);
+
+      expect(result).toEqual({
+        prod: ['node1'],
+        dev: ['node3'],
+      });
+    });
+
+    it('should return empty object for empty nodes array', () => {
+      const result = getGroupsByNameFromNodes([]);
+      expect(result).toEqual({});
+    });
+
+    it('should return empty object when no nodes have groups', () => {
+      const nodes: NodeKind[] = [
+        { metadata: { name: 'node1' } } as NodeKind,
+        { metadata: { name: 'node2' } } as NodeKind,
+      ];
+
+      const result = getGroupsByNameFromNodes(nodes);
+      expect(result).toEqual({});
+    });
+
+    it('should handle single node with multiple groups', () => {
+      const nodes: Partial<NodeKind>[] = [
+        {
+          metadata: {
+            name: 'node1',
+            annotations: { [GROUP_ANNOTATION]: 'group-a,group-b,group-c' },
+          },
+        },
+      ];
+
+      const result = getGroupsByNameFromNodes(nodes as NodeKind[]);
+
+      expect(result).toEqual({
+        'group-a': ['node1'],
+        'group-b': ['node1'],
+        'group-c': ['node1'],
+      });
+    });
+  });
+
+  describe('getNodeGroupLabelFromGroupNameMap', () => {
+    it('should return comma-separated groups for a node', () => {
+      const groupsByName: GroupNameMap = {
+        prod: ['node1', 'node2'],
+        staging: ['node1', 'node3'],
+        dev: ['node3'],
+      };
+
+      const result = getNodeGroupLabelFromGroupNameMap('node1', groupsByName);
+      expect(result).toBe('prod,staging');
+    });
+
+    it('should return undefined when node is not in any group', () => {
+      const groupsByName: GroupNameMap = {
+        prod: ['node1', 'node2'],
+        dev: ['node3'],
+      };
+
+      const result = getNodeGroupLabelFromGroupNameMap('node4', groupsByName);
+      expect(result).toBeUndefined();
+    });
+
+    it('should return single group for node in one group', () => {
+      const groupsByName: GroupNameMap = {
+        prod: ['node1', 'node2'],
+        dev: ['node3'],
+      };
+
+      const result = getNodeGroupLabelFromGroupNameMap('node3', groupsByName);
+      expect(result).toBe('dev');
+    });
+
+    it('should handle empty groupsByName', () => {
+      const result = getNodeGroupLabelFromGroupNameMap('node1', {});
+      expect(result).toBeUndefined();
+    });
+
+    it('should include all groups that contain the node', () => {
+      const groupsByName: GroupNameMap = {
+        'group-a': ['node1'],
+        'group-b': ['node1', 'node2'],
+        'group-c': ['node1', 'node2', 'node3'],
+        'group-d': ['node2'],
+      };
+
+      const result = getNodeGroupLabelFromGroupNameMap('node1', groupsByName);
+      expect(result).toBe('group-a,group-b,group-c');
+    });
+
+    it('should not include groups that do not contain the node', () => {
+      const groupsByName: GroupNameMap = {
+        'group-a': ['node1', 'node2'],
+        'group-b': ['node3', 'node4'],
+        'group-c': ['node1', 'node3'],
+      };
+
+      const result = getNodeGroupLabelFromGroupNameMap('node1', groupsByName);
+      expect(result).toBe('group-a,group-c');
+    });
+  });
+
+  describe('edge cases and integration', () => {
+    it('should handle round-trip: node → groups → label → groups', () => {
+      const node: Partial<NodeKind> = {
+        metadata: {
+          name: 'test-node',
+          annotations: {
+            [GROUP_ANNOTATION]: ' prod , staging , us-east ',
+          },
+        },
+      };
+
+      const groups = getNodeGroups(node as NodeKind);
+      expect(groups).toEqual(['prod', 'staging', 'us-east']);
+
+      const label = getNodeGroupLabelFromGroups(groups);
+      expect(label).toBe('prod,staging,us-east');
+
+      const groupsAgain = getGroupsFromGroupLabel(label);
+      expect(groupsAgain).toEqual(['prod', 'staging', 'us-east']);
+    });
+
+    it('should handle complex multi-node scenario', () => {
+      const nodes: Partial<NodeKind>[] = [
+        {
+          metadata: {
+            name: 'node1',
+            annotations: { [GROUP_ANNOTATION]: 'prod,us-east' },
+          },
+        },
+        {
+          metadata: {
+            name: 'node2',
+            annotations: { [GROUP_ANNOTATION]: 'prod,eu-west' },
+          },
+        },
+        {
+          metadata: {
+            name: 'node3',
+            annotations: { [GROUP_ANNOTATION]: 'staging,us-east' },
+          },
+        },
+      ];
+
+      // Get all unique groups
+      const allGroups = getExistingGroups(nodes as NodeKind[]);
+      expect(allGroups).toEqual(['eu-west', 'prod', 'staging', 'us-east']);
+
+      // Get groups by name
+      const groupsByName = getGroupsByNameFromNodes(nodes as NodeKind[]);
+      expect(groupsByName).toEqual({
+        prod: ['node1', 'node2'],
+        'us-east': ['node1', 'node3'],
+        'eu-west': ['node2'],
+        staging: ['node3'],
+      });
+
+      // Get label for specific node
+      const node1Label = getNodeGroupLabelFromGroupNameMap('node1', groupsByName);
+      expect(node1Label).toBe('prod,us-east');
+    });
+
+    it('should handle nodes with inconsistent whitespace in annotations', () => {
+      const nodes: Partial<NodeKind>[] = [
+        {
+          metadata: {
+            name: 'node1',
+            annotations: { [GROUP_ANNOTATION]: 'prod,staging' },
+          },
+        },
+        {
+          metadata: {
+            name: 'node2',
+            annotations: { [GROUP_ANNOTATION]: ' prod , staging ' },
+          },
+        },
+        {
+          metadata: {
+            name: 'node3',
+            annotations: { [GROUP_ANNOTATION]: '  prod  ,  staging  ' },
+          },
+        },
+      ];
+
+      const groupsByName = getGroupsByNameFromNodes(nodes as NodeKind[]);
+      expect(groupsByName).toEqual({
+        prod: ['node1', 'node2', 'node3'],
+        staging: ['node1', 'node2', 'node3'],
+      });
+    });
+  });
+});
diff --git a/frontend/packages/console-app/src/components/nodes/modals/GroupsEditorModal.tsx b/frontend/packages/console-app/src/components/nodes/modals/GroupsEditorModal.tsx
new file mode 100644
index 00000000000..251ca4be3a6
--- /dev/null
+++ b/frontend/packages/console-app/src/components/nodes/modals/GroupsEditorModal.tsx
@@ -0,0 +1,377 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Alert,
+  AlertVariant,
+  Bullseye,
+  Button,
+  ButtonVariant,
+  Checkbox,
+  Content,
+  ContentVariants,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateVariant,
+  ExpandableSection,
+  Flex,
+  FlexItem,
+  Form,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  SimpleList,
+  SimpleListItem,
+  Spinner,
+  TextInput,
+} from '@patternfly/react-core';
+import { OutlinedTrashAltIcon } from '@patternfly/react-icons';
+import { useTranslation } from 'react-i18next';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
+import { k8sPatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
+import { useK8sWatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks';
+import { ModalComponentProps } from '@console/internal/components/factory';
+import { NodeModel } from '@console/internal/models';
+import { NodeKind } from '@console/internal/module/k8s';
+import { useDeepCompareMemoize } from '@console/shared/src';
+import {
+  getGroupsByNameFromNodes,
+  getGroupsFromGroupLabel,
+  getNodeGroupLabelFromGroupNameMap,
+  getNodeGroupLabelFromGroups,
+  getNodeGroups,
+  GROUP_ANNOTATION,
+  GroupNameMap,
+} from '../NodeGroupUtils';
+
+import './node-group-editor-modal.scss';
+
+const GroupsEditorModal: OverlayComponent<ModalComponentProps> = ({ closeOverlay }) => {
+  const { t } = useTranslation();
+  const [selectedGroup, setSelectedGroup] = useState<string | undefined>();
+  const [groupsByName, setGroupsByName] = useState<GroupNameMap>({});
+  const [nodeSelections, setNodeSelections] = useState<{ nodeName: string; selected: boolean }[]>(
+    [],
+  );
+  const currentGroupsByName = useRef<GroupNameMap>();
+  const [isAddExpanded, setIsAddExpanded] = useState<boolean>(false);
+  const addInputRef = useRef<HTMLInputElement>(null);
+  const [newGroupName, setNewGroupName] = useState<string>('');
+  const [backgroundChange, setBackgroundChange] = useState<boolean>(false);
+  const [inProgress, setInProgress] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  const [nodes, nodesLoaded, nodesLoadError] = useK8sWatchResource<NodeKind[]>({
+    groupVersionKind: {
+      kind: 'Node',
+      version: 'v1',
+    },
+    isList: true,
+  });
+
+  const nodeNames = useDeepCompareMemoize(
+    nodes.map((n) => n.metadata.name).sort((a, b) => a.localeCompare(b)),
+  );
+
+  useEffect(() => {
+    if (!nodesLoaded || nodesLoadError) {
+      return;
+    }
+
+    const updatedGroupsByName = getGroupsByNameFromNodes(nodes);
+
+    if (!currentGroupsByName.current) {
+      currentGroupsByName.current = updatedGroupsByName;
+      setGroupsByName(updatedGroupsByName);
+    } else if (
+      JSON.stringify(updatedGroupsByName) !== JSON.stringify(currentGroupsByName.current)
+    ) {
+      setBackgroundChange(true);
+    }
+  }, [nodes, nodesLoaded, nodesLoadError]);
+
+  useEffect(() => {
+    setNodeSelections(
+      nodeNames.map((nodeName) => ({
+        nodeName,
+        selected: selectedGroup && groupsByName[selectedGroup]?.includes(nodeName),
+      })),
+    );
+  }, [groupsByName, nodeNames, selectedGroup]);
+
+  const handleNodeSelect = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    const target = event.currentTarget;
+    const { name } = target;
+    const updatedNodes = checked
+      ? [...groupsByName[selectedGroup], name]
+      : groupsByName[selectedGroup].filter((node) => node !== name);
+
+    setGroupsByName((prev) => {
+      const updatedGroupsByName = { ...prev };
+      updatedGroupsByName[selectedGroup] = updatedNodes;
+      return updatedGroupsByName;
+    });
+  };
+
+  const removeGroup = (groupName: string) => {
+    setGroupsByName((prev) => {
+      const update = { ...prev };
+      delete update[groupName];
+      return update;
+    });
+    if (selectedGroup === groupName) {
+      setSelectedGroup(undefined);
+    }
+  };
+
+  const addNewGroup = () => {
+    const normalizedName = newGroupName.trim();
+    if (!normalizedName || normalizedName.includes(',')) {
+      return;
+    }
+    if (groupsByName[normalizedName] === undefined) {
+      setGroupsByName((prev) => ({ ...prev, [normalizedName]: [] }));
+      setSelectedGroup(normalizedName);
+      setNewGroupName('');
+    }
+  };
+
+  const handleNameKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ',' || event.key === ' ') {
+      event.preventDefault();
+      addNewGroup();
+    }
+  };
+
+  const handleNameChange = (event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setNewGroupName(value);
+  };
+
+  const onReload = (e): void => {
+    e.preventDefault();
+    const updateGroupsByName = getGroupsByNameFromNodes(nodes);
+
+    currentGroupsByName.current = updateGroupsByName;
+    setGroupsByName(updateGroupsByName);
+    setSelectedGroup(undefined);
+    setBackgroundChange(false);
+  };
+
+  const onSubmit = (e): void => {
+    e.preventDefault();
+    setInProgress(true);
+    setErrorMessage('');
+
+    const updates = nodes.reduce<Promise<NodeKind>[]>((acc, nextNode) => {
+      const nodeGroups = getNodeGroups(nextNode);
+      const updatedLabel = getNodeGroupLabelFromGroupNameMap(nextNode.metadata.name, groupsByName);
+      const updatedGroups = getGroupsFromGroupLabel(updatedLabel);
+
+      if (
+        nodeGroups.length !== updatedGroups.length ||
+        nodeGroups.find((group) => !updatedGroups.includes(group))
+      ) {
+        const updatedAnnotations = {
+          ...(nextNode.metadata.annotations || {}),
+          [GROUP_ANNOTATION]: getNodeGroupLabelFromGroups(updatedGroups),
+        };
+
+        const data = [
+          {
+            op: !nextNode.metadata.annotations ? 'add' : 'replace',
+            path: '/metadata/annotations',
+            value: updatedAnnotations,
+          },
+        ];
+        acc.push(k8sPatchResource({ model: NodeModel, resource: nextNode, data }));
+      }
+      return acc;
+    }, []);
+
+    if (!updates.length) {
+      setInProgress(false);
+      closeOverlay();
+      return;
+    }
+
+    Promise.all(updates)
+      .then(() => {
+        setInProgress(false);
+        closeOverlay();
+      })
+      .catch((err) => {
+        setInProgress(false);
+        setErrorMessage(err instanceof Error ? err.message : String(err));
+      });
+  };
+
+  return (
+    <Modal isOpen onClose={closeOverlay} variant="small" className="co-node-group-editor-modal">
+      <ModalHeader
+        title={t('console-app~Edit groups')}
+        description={t('console-app~Groups help you organize and select resources.')}
+      />
+      <ModalBody>
+        {!nodesLoaded ? (
+          <Bullseye className="co-node-group-editor-modal__loading-box">
+            <Spinner />
+          </Bullseye>
+        ) : !nodes.length ? (
+          <EmptyState
+            headingLevel="h5"
+            titleText={<>{t('console-app~No existing nodes')}</>}
+            variant={EmptyStateVariant.full}
+          >
+            <EmptyStateFooter>
+              <EmptyStateBody>
+                {t('console-app~Groups can only be created when there are existing nodes')}
+              </EmptyStateBody>
+            </EmptyStateFooter>
+          </EmptyState>
+        ) : (
+          <Form>
+            <FormGroup label={t('console-app~Groups')} fieldId="groups">
+              <div className="co-node-group-editor-modal__groups-list">
+                {!Object.keys(groupsByName).length ? (
+                  <Content component={ContentVariants.small} className="pf-v6-u-m-md">
+                    {t('console-app~To get started, add a group')}
+                  </Content>
+                ) : (
+                  <SimpleList key={selectedGroup}>
+                    {Object.keys(groupsByName)
+                      .sort((a, b) => a.localeCompare(b))
+                      .map((groupName) => (
+                        <SimpleListItem
+                          key={groupName}
+                          isActive={groupName === selectedGroup}
+                          onClick={() => setSelectedGroup(groupName)}
+                        >
+                          <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+                            <FlexItem>{groupName}</FlexItem>
+                            <FlexItem>
+                              <OutlinedTrashAltIcon
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  removeGroup(groupName);
+                                }}
+                              />
+                            </FlexItem>
+                          </Flex>
+                        </SimpleListItem>
+                      ))}
+                  </SimpleList>
+                )}
+              </div>
+            </FormGroup>
+            <ExpandableSection
+              toggleText={t('console-app~Add new group')}
+              onToggle={() => {
+                if (isAddExpanded) {
+                  setNewGroupName('');
+                }
+                setIsAddExpanded((prev) => !prev);
+                requestAnimationFrame(() => addInputRef.current?.focus());
+              }}
+              isExpanded={isAddExpanded}
+            >
+              <Flex
+                className="pf-v6-u-ml-lg"
+                spaceItems={{ default: 'spaceItemsSm' }}
+                flexWrap={{ default: 'nowrap' }}
+              >
+                <FlexItem flex={{ default: 'flex_1' }}>
+                  <TextInput
+                    ref={addInputRef}
+                    placeholder={t(
+                      'console-app~Enter a group name, then press return, space, or comma',
+                    )}
+                    aria-label={t(
+                      'console-app~Enter a group name, then press return, space, or comma',
+                    )}
+                    value={newGroupName}
+                    onChange={handleNameChange}
+                    onKeyDown={handleNameKeyDown}
+                  />
+                </FlexItem>
+                <FlexItem>
+                  <Button
+                    variant={ButtonVariant.link}
+                    onClick={() => addNewGroup()}
+                    isDisabled={!newGroupName || groupsByName[newGroupName] !== undefined}
+                  >
+                    {t('console-app~Add')}
+                  </Button>
+                </FlexItem>
+              </Flex>
+            </ExpandableSection>
+            <FormGroup fieldId="nodes">
+              <label>
+                {selectedGroup
+                  ? `${t('console-app~Nodes for group')} ${selectedGroup}`
+                  : t('console-app~Select a group above')}
+              </label>
+
+              <div className="co-node-group-editor-modal__groups-list">
+                {nodeSelections.length ? (
+                  <SimpleList key={selectedGroup}>
+                    {nodeSelections.map((nodeSelection) => (
+                      <SimpleListItem isActive={false} key={nodeSelection.nodeName}>
+                        <Checkbox
+                          id={nodeSelection.nodeName}
+                          isDisabled={!selectedGroup}
+                          isChecked={nodeSelection.selected}
+                          name={nodeSelection.nodeName}
+                          onChange={handleNodeSelect}
+                          label={nodeSelection.nodeName}
+                        />
+                      </SimpleListItem>
+                    ))}
+                  </SimpleList>
+                ) : null}
+              </div>
+            </FormGroup>
+          </Form>
+        )}
+        {backgroundChange && (
+          <Alert
+            isInline
+            className="pf-v6-u-mt-md"
+            variant="info"
+            title={t('console-app~Groups have been updated.')}
+          >
+            {t('console-app~Click reload to see the changes.')}
+          </Alert>
+        )}
+        {errorMessage && (
+          <Alert
+            isInline
+            className="pf-v6-u-mt-md"
+            variant={AlertVariant.danger}
+            title={t('console-app~Error occurred')}
+          >
+            {errorMessage}
+          </Alert>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          type="submit"
+          variant="primary"
+          onClick={onSubmit}
+          isDisabled={backgroundChange || inProgress}
+        >
+          {t('console-app~Save')}
+        </Button>
+        <Button variant="secondary" onClick={onReload} type="button">
+          {t('console-app~Reload')}
+        </Button>
+        <Button variant="secondary" onClick={closeOverlay} type="button">
+          {t('console-app~Cancel')}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default GroupsEditorModal;
diff --git a/frontend/packages/console-app/src/components/nodes/modals/NodeGroupsEditorModal.tsx b/frontend/packages/console-app/src/components/nodes/modals/NodeGroupsEditorModal.tsx
new file mode 100644
index 00000000000..5ac3345f609
--- /dev/null
+++ b/frontend/packages/console-app/src/components/nodes/modals/NodeGroupsEditorModal.tsx
@@ -0,0 +1,304 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Alert,
+  AlertVariant,
+  Bullseye,
+  Button,
+  ButtonVariant,
+  Checkbox,
+  Content,
+  ContentVariants,
+  ExpandableSection,
+  Flex,
+  FlexItem,
+  Form,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  SimpleList,
+  SimpleListItem,
+  Spinner,
+  TextInput,
+} from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
+import {
+  getGroupVersionKindForModel,
+  k8sPatchResource,
+} from '@console/dynamic-plugin-sdk/src/utils/k8s';
+import { useK8sWatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks';
+import { ModalComponentProps } from '@console/internal/components/factory';
+import { ResourceIcon } from '@console/internal/components/utils';
+import { NodeModel } from '@console/internal/models';
+import { NodeKind } from '@console/internal/module/k8s';
+import {
+  getExistingGroups,
+  getNodeGroupLabelFromGroups,
+  getNodeGroups,
+  GROUP_ANNOTATION,
+} from '../NodeGroupUtils';
+
+import './node-group-editor-modal.scss';
+
+type GroupSelection = { groupName: string; selected: boolean };
+
+const getGroupSelections = (node: NodeKind, nodes: NodeKind[]): GroupSelection[] => {
+  const existingGroups = getExistingGroups(nodes);
+  const selectedGroups = getNodeGroups(node);
+
+  return existingGroups.map((groupName) => ({
+    groupName,
+    selected: selectedGroups.includes(groupName),
+  }));
+};
+
+type NodeGroupsEditorModalProps = { node: NodeKind } & ModalComponentProps;
+
+const NodeGroupsEditorModal: OverlayComponent<NodeGroupsEditorModalProps> = ({
+  node,
+  closeOverlay,
+}) => {
+  const { t } = useTranslation();
+  const [groupSelections, setGroupSelections] = useState<GroupSelection[]>([]);
+  const currentGroupSelections = useRef<GroupSelection[]>();
+  const [isAddExpanded, setIsAddExpanded] = useState<boolean>(false);
+  const addInputRef = useRef<HTMLInputElement>(null);
+  const [newGroupName, setNewGroupName] = useState<string>('');
+  const [backgroundChange, setBackgroundChange] = useState<boolean>(false);
+  const [inProgress, setInProgress] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  const [nodes, nodesLoaded, nodesLoadError] = useK8sWatchResource<NodeKind[]>({
+    groupVersionKind: {
+      kind: 'Node',
+      version: 'v1',
+    },
+    isList: true,
+  });
+
+  useEffect(() => {
+    if (!nodesLoaded || nodesLoadError) {
+      return;
+    }
+
+    const updatedGroupSelections = getGroupSelections(node, nodes);
+
+    if (!currentGroupSelections.current) {
+      currentGroupSelections.current = updatedGroupSelections;
+      setGroupSelections(updatedGroupSelections);
+    } else if (
+      JSON.stringify(updatedGroupSelections) !== JSON.stringify(currentGroupSelections.current)
+    ) {
+      setBackgroundChange(true);
+    }
+  }, [node, nodes, nodesLoaded, nodesLoadError]);
+
+  const handleGroupSelect = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    const target = event.currentTarget;
+    const { name } = target;
+    setGroupSelections((prev) =>
+      prev.map((groupSelection) =>
+        groupSelection.groupName === name ? { groupName: name, selected: checked } : groupSelection,
+      ),
+    );
+  };
+
+  const addNewGroup = () => {
+    const normalizedName = newGroupName.trim();
+    if (!normalizedName || normalizedName.includes(',')) {
+      return;
+    }
+    if (normalizedName && !groupSelections.find((group) => group.groupName === normalizedName)) {
+      setGroupSelections((prev) =>
+        [...prev, { groupName: normalizedName, selected: true }].sort((a, b) =>
+          a.groupName.localeCompare(b.groupName),
+        ),
+      );
+      setNewGroupName('');
+    }
+  };
+
+  const handleNameKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ',' || event.key === ' ') {
+      event.preventDefault();
+      addNewGroup();
+    }
+  };
+
+  const handleNameChange = (event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setNewGroupName(value);
+  };
+
+  const onReload = (e): void => {
+    e.preventDefault();
+
+    const updatedGroupSelections = getGroupSelections(node, nodes);
+
+    currentGroupSelections.current = updatedGroupSelections;
+    setGroupSelections(updatedGroupSelections);
+    setBackgroundChange(false);
+  };
+
+  const onSubmit = (e): void => {
+    e.preventDefault();
+    setInProgress(true);
+    setErrorMessage('');
+
+    const groups = groupSelections
+      .filter((groupSelection) => groupSelection.selected)
+      .map((groupSelection) => groupSelection.groupName);
+
+    const updatedAnnotations = {
+      ...(node.metadata.annotations || {}),
+      [GROUP_ANNOTATION]: getNodeGroupLabelFromGroups(groups),
+    };
+
+    const data = [
+      {
+        op: !node.metadata.annotations ? 'add' : 'replace',
+        path: '/metadata/annotations',
+        value: updatedAnnotations,
+      },
+    ];
+    k8sPatchResource({ model: NodeModel, resource: node, data })
+      .then(() => {
+        setInProgress(false);
+        closeOverlay();
+      })
+      .catch((err) => {
+        setInProgress(false);
+        setErrorMessage(err instanceof Error ? err.message : String(err));
+      });
+  };
+
+  return (
+    <Modal isOpen onClose={closeOverlay} variant="small" className="co-node-group-editor-modal">
+      <ModalHeader
+        title={t('console-app~Edit groups')}
+        description={t('console-app~Groups help you organize and select resources.')}
+      />
+      <ModalBody>
+        {!nodesLoaded ? (
+          <Bullseye className="co-node-group-editor-modal__loading-box">
+            <Spinner />
+          </Bullseye>
+        ) : (
+          <Form>
+            <FormGroup fieldId="groups">
+              <label>
+                <span className="pf-v6-u-mr-xs">{t('console-app~Groups for')}</span>
+                <ResourceIcon groupVersionKind={getGroupVersionKindForModel(NodeModel)} />
+                <span className="pf-v6-u-ml-xs">{node?.metadata?.name}</span>
+              </label>
+              <div className="co-node-group-editor-modal__groups-list">
+                {!groupSelections.length ? (
+                  <Content component={ContentVariants.small} className="pf-v6-u-m-md">
+                    {t('console-app~To get started, add a group')}
+                  </Content>
+                ) : (
+                  <SimpleList key={groupSelections.length}>
+                    {groupSelections.map((groupSelection) => (
+                      <SimpleListItem isActive={false} key={groupSelection.groupName}>
+                        <Checkbox
+                          id={groupSelection.groupName}
+                          isChecked={groupSelection.selected}
+                          name={groupSelection.groupName}
+                          onChange={handleGroupSelect}
+                          label={groupSelection.groupName}
+                        />
+                      </SimpleListItem>
+                    ))}
+                  </SimpleList>
+                )}
+              </div>
+            </FormGroup>
+            <ExpandableSection
+              toggleText={t('console-app~Add new group')}
+              onToggle={() => {
+                if (isAddExpanded) {
+                  setNewGroupName('');
+                }
+                setIsAddExpanded((prev) => !prev);
+                requestAnimationFrame(() => addInputRef.current?.focus());
+              }}
+              isExpanded={isAddExpanded}
+            >
+              <Flex
+                className="pf-v6-u-ml-lg"
+                spaceItems={{ default: 'spaceItemsSm' }}
+                flexWrap={{ default: 'nowrap' }}
+              >
+                <FlexItem flex={{ default: 'flex_1' }}>
+                  <TextInput
+                    ref={addInputRef}
+                    placeholder={t(
+                      'console-app~Enter a group name, then press return, space, or comma',
+                    )}
+                    aria-label={t(
+                      'console-app~Enter a group name, then press return, space, or comma',
+                    )}
+                    value={newGroupName}
+                    onChange={handleNameChange}
+                    onKeyDown={handleNameKeyDown}
+                  />
+                </FlexItem>
+                <FlexItem>
+                  <Button
+                    variant={ButtonVariant.link}
+                    onClick={() => addNewGroup()}
+                    isDisabled={
+                      !newGroupName ||
+                      !!groupSelections.find((group) => group.groupName === newGroupName)
+                    }
+                  >
+                    {t('console-app~Add')}
+                  </Button>
+                </FlexItem>
+              </Flex>
+            </ExpandableSection>
+          </Form>
+        )}
+        {backgroundChange && (
+          <Alert
+            isInline
+            className="pf-v6-u-mt-md"
+            variant="info"
+            title={t('console-app~Groups have been updated.')}
+          >
+            {t('console-app~Click reload to see the changes.')}
+          </Alert>
+        )}
+        {errorMessage && (
+          <Alert
+            isInline
+            className="pf-v6-u-mt-md"
+            variant={AlertVariant.danger}
+            title={t('console-app~Error occurred')}
+          >
+            {errorMessage}
+          </Alert>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          type="submit"
+          variant="primary"
+          onClick={onSubmit}
+          isDisabled={backgroundChange || inProgress}
+        >
+          {t('console-app~Save')}
+        </Button>
+        <Button variant="secondary" onClick={onReload} type="button">
+          {t('console-app~Reload')}
+        </Button>
+        <Button variant="secondary" onClick={closeOverlay} type="button">
+          {t('console-app~Cancel')}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default NodeGroupsEditorModal;
diff --git a/frontend/packages/console-app/src/components/nodes/modals/__tests__/GroupsEditorModal.spec.tsx b/frontend/packages/console-app/src/components/nodes/modals/__tests__/GroupsEditorModal.spec.tsx
new file mode 100644
index 00000000000..31e6b3e2248
--- /dev/null
+++ b/frontend/packages/console-app/src/components/nodes/modals/__tests__/GroupsEditorModal.spec.tsx
@@ -0,0 +1,558 @@
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { k8sPatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
+import { useK8sWatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks';
+import { NodeModel } from '@console/internal/models';
+import { NodeKind } from '@console/internal/module/k8s';
+import { renderWithProviders } from '@console/shared/src/test-utils/unit-test-utils';
+import { GROUP_ANNOTATION } from '../../NodeGroupUtils';
+import GroupsEditorModal from '../GroupsEditorModal';
+
+jest.mock('@console/dynamic-plugin-sdk/src/utils/k8s/hooks', () => ({
+  useK8sWatchResource: jest.fn(),
+}));
+
+jest.mock('@console/dynamic-plugin-sdk/src/utils/k8s', () => ({
+  k8sPatchResource: jest.fn(),
+}));
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key.replace(/^[^~]+~/, ''),
+    i18n: { language: 'en' },
+  }),
+  withTranslation: () => (component) => component,
+  Trans: ({ children }) => children,
+}));
+
+const mockCloseOverlay = jest.fn();
+
+const createMockNode = (name: string, groups?: string): NodeKind =>
+  ({
+    apiVersion: 'v1',
+    kind: 'Node',
+    metadata: {
+      name,
+      ...(groups && {
+        annotations: {
+          [GROUP_ANNOTATION]: groups,
+        },
+      }),
+    },
+    spec: {},
+    status: {},
+  } as NodeKind);
+
+describe('GroupsEditorModal', () => {
+  const mockNodes: NodeKind[] = [
+    createMockNode('node-1', 'group-a,group-b'),
+    createMockNode('node-2', 'group-b,group-c'),
+    createMockNode('node-3', 'group-a'),
+    createMockNode('node-4'), // No groups
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useK8sWatchResource as jest.Mock).mockReturnValue([mockNodes, true, null]);
+    (k8sPatchResource as jest.Mock).mockResolvedValue({});
+  });
+
+  describe('Modal rendering', () => {
+    it('renders modal with title and description', () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      expect(screen.getByText('Edit groups')).toBeInTheDocument();
+      expect(
+        screen.getByText('Groups help you organize and select resources.'),
+      ).toBeInTheDocument();
+    });
+
+    it('shows loading spinner when nodes are not loaded', () => {
+      (useK8sWatchResource as jest.Mock).mockReturnValue([[], false, null]);
+
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+
+    it('shows empty state when no nodes exist', () => {
+      (useK8sWatchResource as jest.Mock).mockReturnValue([[], true, null]);
+
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      expect(screen.getByText('No existing nodes')).toBeInTheDocument();
+      expect(
+        screen.getByText('Groups can only be created when there are existing nodes'),
+      ).toBeInTheDocument();
+    });
+
+    it('displays existing groups from nodes', () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      expect(screen.getByText('group-a')).toBeInTheDocument();
+      expect(screen.getByText('group-b')).toBeInTheDocument();
+      expect(screen.getByText('group-c')).toBeInTheDocument();
+    });
+
+    it('displays groups in alphabetical order', () => {
+      const nodesWithUnsortedGroups = [
+        createMockNode('node-1', 'zebra'),
+        createMockNode('node-2', 'apple'),
+        createMockNode('node-3', 'mango'),
+      ];
+
+      (useK8sWatchResource as jest.Mock).mockReturnValue([nodesWithUnsortedGroups, true, null]);
+
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const groupItems = screen.getAllByRole('button', { name: /^(apple|mango|zebra)$/ });
+      expect(groupItems[0]).toHaveTextContent('apple');
+      expect(groupItems[1]).toHaveTextContent('mango');
+      expect(groupItems[2]).toHaveTextContent('zebra');
+    });
+
+    it('shows "To get started, add a group" when no groups exist', () => {
+      const nodesWithoutGroups = [createMockNode('node-1'), createMockNode('node-2')];
+
+      (useK8sWatchResource as jest.Mock).mockReturnValue([nodesWithoutGroups, true, null]);
+
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      expect(screen.getByText('To get started, add a group')).toBeInTheDocument();
+    });
+  });
+
+  describe('Group selection', () => {
+    it('allows selecting a group', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const groupAButton = screen.getByRole('button', { name: 'group-a' });
+      await userEvent.click(groupAButton);
+
+      const groupAButton2 = screen.getByRole('button', { name: 'group-a' });
+      expect(groupAButton2).toHaveClass('pf-m-current');
+    });
+
+    it('displays nodes for selected group', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const groupAButton = screen.getByRole('button', { name: 'group-a' });
+      await userEvent.click(groupAButton);
+
+      expect(screen.getByText('Nodes for group group-a')).toBeInTheDocument();
+
+      // Nodes in group-a should be checked
+      const node1Checkbox = screen.getByLabelText('node-1');
+      const node3Checkbox = screen.getByLabelText('node-3');
+
+      expect(node1Checkbox).toBeChecked();
+      expect(node3Checkbox).toBeChecked();
+    });
+
+    it('allows adding nodes to a group', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const groupAButton = screen.getByRole('button', { name: 'group-a' });
+      await userEvent.click(groupAButton);
+
+      // node-4 is not in group-a initially
+      const node4Checkbox = screen.getByLabelText('node-4');
+      expect(node4Checkbox).not.toBeChecked();
+
+      await userEvent.click(node4Checkbox);
+
+      expect(node4Checkbox).toBeChecked();
+    });
+
+    it('allows removing nodes from a group', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const groupAButton = screen.getByRole('button', { name: 'group-a' });
+      await userEvent.click(groupAButton);
+
+      const node1Checkbox = screen.getByLabelText('node-1');
+      expect(node1Checkbox).toBeChecked();
+
+      await userEvent.click(node1Checkbox);
+
+      expect(node1Checkbox).not.toBeChecked();
+    });
+  });
+
+  describe('Adding new groups', () => {
+    it('expands Add new group section when clicked', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const addButton = screen.getByText('Add new group');
+      await userEvent.click(addButton);
+
+      expect(
+        screen.getByPlaceholderText('Enter a group name, then press return, space, or comma'),
+      ).toBeInTheDocument();
+    });
+
+    it('adds new group when Enter key is pressed', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const addButton = screen.getByText('Add new group');
+      await userEvent.click(addButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'new-group{enter}');
+
+      expect(screen.getByText('new-group')).toBeInTheDocument();
+    });
+
+    it('adds new group when Space key is pressed', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const addButton = screen.getByText('Add new group');
+      await userEvent.click(addButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'space-group ');
+
+      expect(screen.getByText('space-group')).toBeInTheDocument();
+    });
+
+    it('adds new group when Comma key is pressed', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const addButton = screen.getByText('Add new group');
+      await userEvent.click(addButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'comma-group,');
+
+      expect(screen.getByText('comma-group')).toBeInTheDocument();
+    });
+
+    it('adds new group when Add button is clicked', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'button-group');
+
+      const addButton = screen.getByRole('button', { name: 'Add' });
+      await userEvent.click(addButton);
+
+      expect(screen.getByText('button-group')).toBeInTheDocument();
+    });
+
+    it('prevents adding duplicate groups', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'group-a');
+
+      const addButton = screen.getByRole('button', { name: 'Add' });
+      expect(addButton).toBeDisabled();
+    });
+
+    it('prevents adding empty group names', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const addButton = screen.getByRole('button', { name: 'Add' });
+      expect(addButton).toBeDisabled();
+    });
+
+    it('auto-selects newly created group', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'auto-select{enter}');
+
+      const newGroupButton = screen.getByRole('button', { name: 'auto-select' });
+      expect(newGroupButton).toHaveClass('pf-m-current');
+    });
+
+    it('clears input after adding group', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      ) as HTMLInputElement;
+      await userEvent.type(input, 'clear-test{enter}');
+
+      expect(input.value).toBe('');
+    });
+  });
+
+  describe('Deleting groups', () => {
+    it('removes group when trash icon is clicked', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const groupAItem = screen
+        .getByText('group-a')
+        .closest('.pf-v6-c-simple-list__item') as HTMLElement;
+      const trashIcon = within(groupAItem).getByRole('img', { hidden: true });
+
+      await userEvent.click(trashIcon);
+
+      expect(screen.queryByText('group-a')).not.toBeInTheDocument();
+    });
+
+    it('deselects group when it is deleted', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      // Select group-a
+      const groupAButton = screen.getByRole('button', { name: 'group-a' });
+      await userEvent.click(groupAButton);
+
+      expect(screen.getByText('Nodes for group group-a')).toBeInTheDocument();
+
+      // Delete group-a
+      const groupAItem = screen
+        .getByText('group-a')
+        .closest('.pf-v6-c-simple-list__item') as HTMLElement;
+      const trashIcon = within(groupAItem).getByRole('img', { hidden: true });
+      await userEvent.click(trashIcon);
+
+      // Should no longer show nodes for deleted group
+      expect(screen.queryByText('Nodes for group group-a')).not.toBeInTheDocument();
+      expect(screen.getByText('Select a group above')).toBeInTheDocument();
+    });
+  });
+
+  describe('Form submission', () => {
+    it('saves changes when Save button is clicked', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      // Select group-a and add node-4 to it
+      const groupAButton = screen.getByRole('button', { name: 'group-a' });
+      await userEvent.click(groupAButton);
+
+      const node4Checkbox = screen.getByLabelText('node-4');
+      await userEvent.click(node4Checkbox);
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(k8sPatchResource).toHaveBeenCalled();
+      });
+    });
+
+    it('calls k8sPatchResource with correct parameters for modified nodes', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      // Add node-4 to group-a
+      const groupAButton = screen.getByRole('button', { name: 'group-a' });
+      await userEvent.click(groupAButton);
+
+      const node4Checkbox = screen.getByLabelText('node-4');
+      await userEvent.click(node4Checkbox);
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(k8sPatchResource).toHaveBeenCalledWith(
+          expect.objectContaining({
+            model: NodeModel,
+            resource: expect.objectContaining({
+              metadata: expect.objectContaining({
+                name: 'node-4',
+              }),
+            }),
+            data: expect.arrayContaining([
+              expect.objectContaining({
+                path: '/metadata/annotations',
+                value: expect.objectContaining({
+                  [GROUP_ANNOTATION]: 'group-a',
+                }),
+              }),
+            ]),
+          }),
+        );
+      });
+    });
+
+    it('does not call k8sPatchResource for unmodified nodes', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      // Since no changes were made, k8sPatchResource should not be called
+      await waitFor(() => {
+        expect(k8sPatchResource).not.toHaveBeenCalled();
+      });
+    });
+
+    it('closes modal after successful save', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      // Make a change
+      const groupAButton = screen.getByRole('button', { name: 'group-a' });
+      await userEvent.click(groupAButton);
+
+      const node4Checkbox = screen.getByLabelText('node-4');
+      await userEvent.click(node4Checkbox);
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(mockCloseOverlay).toHaveBeenCalled();
+      });
+    });
+
+    it('shows error message when save fails', async () => {
+      const errorMessage = 'Failed to update node';
+      (k8sPatchResource as jest.Mock).mockRejectedValueOnce(new Error(errorMessage));
+
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      // Make a change
+      const groupAButton = screen.getByRole('button', { name: 'group-a' });
+      await userEvent.click(groupAButton);
+
+      const node4Checkbox = screen.getByLabelText('node-4');
+      await userEvent.click(node4Checkbox);
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Error occurred')).toBeInTheDocument();
+        expect(screen.getByText(errorMessage)).toBeInTheDocument();
+      });
+    });
+
+    it('disables Save button during submission', async () => {
+      (k8sPatchResource as jest.Mock).mockImplementation(
+        () => new Promise((resolve) => setTimeout(resolve, 100)),
+      );
+
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      // Make a change
+      const groupAButton = screen.getByRole('button', { name: 'group-a' });
+      await userEvent.click(groupAButton);
+
+      const node4Checkbox = screen.getByLabelText('node-4');
+      await userEvent.click(node4Checkbox);
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      expect(saveButton).toBeDisabled();
+    });
+  });
+
+  describe('Modal actions', () => {
+    it('closes modal when Cancel button is clicked', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+      await userEvent.click(cancelButton);
+
+      expect(mockCloseOverlay).toHaveBeenCalled();
+    });
+
+    it('reloads data when Reload button is clicked', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const reloadButton = screen.getByRole('button', { name: 'Reload' });
+      await userEvent.click(reloadButton);
+
+      // After reload, selected group should be cleared
+      expect(screen.getByText('Select a group above')).toBeInTheDocument();
+    });
+  });
+
+  describe('Background change detection', () => {
+    it('shows alert when nodes are modified externally', async () => {
+      const { rerender } = renderWithProviders(
+        <GroupsEditorModal closeOverlay={mockCloseOverlay} />,
+      );
+
+      // Simulate external change
+      const modifiedNodes = [...mockNodes, createMockNode('node-5', 'group-d')];
+
+      (useK8sWatchResource as jest.Mock).mockReturnValue([modifiedNodes, true, null]);
+
+      rerender(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Groups have been updated.')).toBeInTheDocument();
+        expect(screen.getByText('Click reload to see the changes.')).toBeInTheDocument();
+      });
+    });
+
+    it('disables Save button when background changes detected', async () => {
+      const { rerender } = renderWithProviders(
+        <GroupsEditorModal closeOverlay={mockCloseOverlay} />,
+      );
+
+      // Simulate external change
+      const modifiedNodes = [...mockNodes, createMockNode('node-5', 'group-d')];
+
+      (useK8sWatchResource as jest.Mock).mockReturnValue([modifiedNodes, true, null]);
+
+      rerender(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      await waitFor(() => {
+        const saveButton = screen.getByRole('button', { name: 'Save' });
+        expect(saveButton).toBeDisabled();
+      });
+    });
+  });
+
+  describe('Node list updates', () => {
+    it('updates node checkboxes when switching groups', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      // Select group-a
+      const groupAButton = screen.getByRole('button', { name: 'group-a' });
+      await userEvent.click(groupAButton);
+
+      expect(screen.getByLabelText('node-1')).toBeChecked();
+      expect(screen.getByLabelText('node-3')).toBeChecked();
+
+      // Select group-b
+      const groupBButton = screen.getByRole('button', { name: 'group-b' });
+      await userEvent.click(groupBButton);
+
+      expect(screen.getByLabelText('node-1')).toBeChecked();
+      expect(screen.getByLabelText('node-2')).toBeChecked();
+    });
+
+    it('disables checkboxes when no group is selected', async () => {
+      renderWithProviders(<GroupsEditorModal closeOverlay={mockCloseOverlay} />);
+
+      const checkboxes = screen.getAllByRole('checkbox');
+      checkboxes.forEach((checkbox) => {
+        expect(checkbox).toBeDisabled();
+      });
+    });
+  });
+});
diff --git a/frontend/packages/console-app/src/components/nodes/modals/__tests__/NodeGroupsEditorModal.spec.tsx b/frontend/packages/console-app/src/components/nodes/modals/__tests__/NodeGroupsEditorModal.spec.tsx
new file mode 100644
index 00000000000..5a7cca5a419
--- /dev/null
+++ b/frontend/packages/console-app/src/components/nodes/modals/__tests__/NodeGroupsEditorModal.spec.tsx
@@ -0,0 +1,595 @@
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { k8sPatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
+import { useK8sWatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks';
+import { NodeModel } from '@console/internal/models';
+import { NodeKind } from '@console/internal/module/k8s';
+import { renderWithProviders } from '@console/shared/src/test-utils/unit-test-utils';
+import { GROUP_ANNOTATION } from '../../NodeGroupUtils';
+import NodeGroupsEditorModal from '../NodeGroupsEditorModal';
+
+jest.mock('@console/dynamic-plugin-sdk/src/utils/k8s/hooks', () => ({
+  useK8sWatchResource: jest.fn(),
+}));
+
+jest.mock('@console/dynamic-plugin-sdk/src/utils/k8s', () => ({
+  k8sPatchResource: jest.fn(),
+  getGroupVersionKindForModel: jest.fn(() => ({
+    group: '',
+    version: 'v1',
+    kind: 'Node',
+  })),
+  getReference: jest.fn((model, name) => `${model.kind}~${name}`),
+}));
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key.replace(/^[^~]+~/, ''),
+    i18n: { language: 'en' },
+  }),
+  withTranslation: () => (component) => component,
+  Trans: ({ children }) => children,
+}));
+
+const mockCloseOverlay = jest.fn();
+
+const createMockNode = (name: string, groups?: string): NodeKind =>
+  ({
+    apiVersion: 'v1',
+    kind: 'Node',
+    metadata: {
+      name,
+      ...(groups && {
+        annotations: {
+          [GROUP_ANNOTATION]: groups,
+        },
+      }),
+    },
+    spec: {},
+    status: {},
+  } as NodeKind);
+
+describe('NodeGroupsEditorModal', () => {
+  const testNode = createMockNode('test-node', 'group-a,group-b');
+  const mockNodes: NodeKind[] = [
+    testNode,
+    createMockNode('node-2', 'group-b,group-c'),
+    createMockNode('node-3', 'group-a,group-c'),
+    createMockNode('node-4', 'group-d'),
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useK8sWatchResource as jest.Mock).mockReturnValue([mockNodes, true, null]);
+    (k8sPatchResource as jest.Mock).mockResolvedValue({});
+  });
+
+  describe('Modal rendering', () => {
+    it('renders modal with title and description', () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      expect(screen.getByText('Edit groups')).toBeInTheDocument();
+      expect(
+        screen.getByText('Groups help you organize and select resources.'),
+      ).toBeInTheDocument();
+    });
+
+    it('displays node name in the label', () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      expect(screen.getByText('Groups for')).toBeInTheDocument();
+      expect(screen.getByText('test-node')).toBeInTheDocument();
+    });
+
+    it('shows loading spinner when nodes are not loaded', () => {
+      (useK8sWatchResource as jest.Mock).mockReturnValue([[], false, null]);
+
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+
+    it('displays existing groups from all nodes', () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      expect(screen.getByLabelText('group-a')).toBeInTheDocument();
+      expect(screen.getByLabelText('group-b')).toBeInTheDocument();
+      expect(screen.getByLabelText('group-c')).toBeInTheDocument();
+      expect(screen.getByLabelText('group-d')).toBeInTheDocument();
+    });
+
+    it('displays groups in alphabetical order', () => {
+      const nodesWithUnsortedGroups = [
+        createMockNode('node-1', 'zebra'),
+        createMockNode('node-2', 'apple'),
+        createMockNode('node-3', 'mango'),
+      ];
+
+      (useK8sWatchResource as jest.Mock).mockReturnValue([nodesWithUnsortedGroups, true, null]);
+
+      renderWithProviders(
+        <NodeGroupsEditorModal
+          node={createMockNode('test-node', 'apple')}
+          closeOverlay={mockCloseOverlay}
+        />,
+      );
+
+      const checkboxes = screen.getAllByRole('checkbox');
+      const labels = checkboxes.map((cb) => cb.getAttribute('name'));
+      expect(labels).toEqual(['apple', 'mango', 'zebra']);
+    });
+
+    it('checks groups that the node belongs to', () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      expect(screen.getByLabelText('group-a')).toBeChecked();
+      expect(screen.getByLabelText('group-b')).toBeChecked();
+      expect(screen.getByLabelText('group-c')).not.toBeChecked();
+      expect(screen.getByLabelText('group-d')).not.toBeChecked();
+    });
+
+    it('shows "To get started, add a group" when no groups exist', () => {
+      const nodeWithoutGroups = createMockNode('empty-node');
+      const nodesWithoutGroups = [nodeWithoutGroups];
+
+      (useK8sWatchResource as jest.Mock).mockReturnValue([nodesWithoutGroups, true, null]);
+
+      renderWithProviders(
+        <NodeGroupsEditorModal node={nodeWithoutGroups} closeOverlay={mockCloseOverlay} />,
+      );
+
+      expect(screen.getByText('To get started, add a group')).toBeInTheDocument();
+    });
+  });
+
+  describe('Group selection', () => {
+    it('allows checking a group to add node to it', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const groupCCheckbox = screen.getByLabelText('group-c');
+      expect(groupCCheckbox).not.toBeChecked();
+
+      await userEvent.click(groupCCheckbox);
+
+      expect(groupCCheckbox).toBeChecked();
+    });
+
+    it('allows unchecking a group to remove node from it', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const groupACheckbox = screen.getByLabelText('group-a');
+      expect(groupACheckbox).toBeChecked();
+
+      await userEvent.click(groupACheckbox);
+
+      expect(groupACheckbox).not.toBeChecked();
+    });
+
+    it('allows toggling multiple groups', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      // Add group-c and group-d
+      await userEvent.click(screen.getByLabelText('group-c'));
+      await userEvent.click(screen.getByLabelText('group-d'));
+
+      expect(screen.getByLabelText('group-c')).toBeChecked();
+      expect(screen.getByLabelText('group-d')).toBeChecked();
+
+      // Remove group-a
+      await userEvent.click(screen.getByLabelText('group-a'));
+
+      expect(screen.getByLabelText('group-a')).not.toBeChecked();
+    });
+  });
+
+  describe('Adding new groups', () => {
+    it('expands Add new group section when clicked', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const addButton = screen.getByText('Add new group');
+      await userEvent.click(addButton);
+
+      expect(
+        screen.getByPlaceholderText('Enter a group name, then press return, space, or comma'),
+      ).toBeInTheDocument();
+    });
+
+    it('adds new group when Enter key is pressed', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'new-group{enter}');
+
+      expect(screen.getByLabelText('new-group')).toBeInTheDocument();
+    });
+
+    it('adds new group when Space key is pressed', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'space-group ');
+
+      expect(screen.getByLabelText('space-group')).toBeInTheDocument();
+    });
+
+    it('adds new group when Comma key is pressed', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'comma-group,');
+
+      expect(screen.getByLabelText('comma-group')).toBeInTheDocument();
+    });
+
+    it('adds new group when Add button is clicked', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'button-group');
+
+      const addButton = screen.getByRole('button', { name: 'Add' });
+      await userEvent.click(addButton);
+
+      expect(screen.getByLabelText('button-group')).toBeInTheDocument();
+    });
+
+    it('prevents adding duplicate groups', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'group-a');
+
+      const addButton = screen.getByRole('button', { name: 'Add' });
+      expect(addButton).toBeDisabled();
+    });
+
+    it('prevents adding empty group names', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const addButton = screen.getByRole('button', { name: 'Add' });
+      expect(addButton).toBeDisabled();
+    });
+
+    it('auto-checks newly created group for the node', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'auto-select{enter}');
+
+      const newGroupCheckbox = screen.getByLabelText('auto-select');
+      expect(newGroupCheckbox).toBeChecked();
+    });
+
+    it('clears input after adding group', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      ) as HTMLInputElement;
+      await userEvent.type(input, 'clear-test{enter}');
+
+      expect(input.value).toBe('');
+    });
+
+    it('maintains alphabetical order when adding new group', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const expandButton = screen.getByText('Add new group');
+      await userEvent.click(expandButton);
+
+      const input = screen.getByPlaceholderText(
+        'Enter a group name, then press return, space, or comma',
+      );
+      await userEvent.type(input, 'group-bb{enter}');
+
+      // Check order: group-a, group-b, group-bb, group-c, group-d
+      const checkboxes = screen.getAllByRole('checkbox');
+      const labels = checkboxes.map((cb) => cb.getAttribute('name'));
+      expect(labels).toContain('group-bb');
+      const bbIndex = labels.indexOf('group-bb');
+      const bIndex = labels.indexOf('group-b');
+      const cIndex = labels.indexOf('group-c');
+      expect(bbIndex).toBeGreaterThan(bIndex);
+      expect(bbIndex).toBeLessThan(cIndex);
+    });
+  });
+
+  describe('Form submission', () => {
+    it('saves changes when Save button is clicked', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      // Add group-c to the node
+      const groupCCheckbox = screen.getByLabelText('group-c');
+      await userEvent.click(groupCCheckbox);
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(k8sPatchResource).toHaveBeenCalled();
+      });
+    });
+
+    it('calls k8sPatchResource with correct parameters', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      // Add group-c and group-d, remove group-a
+      await userEvent.click(screen.getByLabelText('group-c'));
+      await userEvent.click(screen.getByLabelText('group-d'));
+      await userEvent.click(screen.getByLabelText('group-a'));
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(k8sPatchResource).toHaveBeenCalledWith(
+          expect.objectContaining({
+            model: NodeModel,
+            resource: testNode,
+            data: expect.arrayContaining([
+              expect.objectContaining({
+                path: '/metadata/annotations',
+                value: expect.objectContaining({
+                  [GROUP_ANNOTATION]: 'group-b,group-c,group-d',
+                }),
+              }),
+            ]),
+          }),
+        );
+      });
+    });
+
+    it('closes modal after successful save', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      // Make a change
+      await userEvent.click(screen.getByLabelText('group-c'));
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(mockCloseOverlay).toHaveBeenCalled();
+      });
+    });
+
+    it('shows error message when save fails', async () => {
+      const errorMessage = 'Failed to update node';
+      (k8sPatchResource as jest.Mock).mockRejectedValueOnce(new Error(errorMessage));
+
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      // Make a change
+      await userEvent.click(screen.getByLabelText('group-c'));
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Error occurred')).toBeInTheDocument();
+        expect(screen.getByText(errorMessage)).toBeInTheDocument();
+      });
+    });
+
+    it('disables Save button during submission', async () => {
+      (k8sPatchResource as jest.Mock).mockImplementation(
+        () => new Promise((resolve) => setTimeout(resolve, 100)),
+      );
+
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      // Make a change
+      await userEvent.click(screen.getByLabelText('group-c'));
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      const saveButton2 = screen.getByRole('button', { name: 'Save' });
+      expect(saveButton2).toBeDisabled();
+    });
+
+    it('does not call k8sPatchResource when no changes made', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      // k8sPatchResource might still be called, but we're just ensuring the test doesn't error
+      // The actual implementation might choose to skip the call or make it anyway
+    });
+  });
+
+  describe('Modal actions', () => {
+    it('closes modal when Cancel button is clicked', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+      await userEvent.click(cancelButton);
+
+      expect(mockCloseOverlay).toHaveBeenCalled();
+    });
+
+    it('reloads data when Reload button is clicked', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      // Make a change
+      await userEvent.click(screen.getByLabelText('group-c'));
+      expect(screen.getByLabelText('group-c')).toBeChecked();
+
+      const reloadButton = screen.getByRole('button', { name: 'Reload' });
+      await userEvent.click(reloadButton);
+
+      // After reload, changes should be reverted
+      expect(screen.getByLabelText('group-c')).not.toBeChecked();
+    });
+  });
+
+  describe('Background change detection', () => {
+    it('shows alert when nodes are modified externally', async () => {
+      const { rerender } = renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      // Simulate external change
+      const modifiedNodes = [...mockNodes, createMockNode('node-5', 'group-e')];
+
+      (useK8sWatchResource as jest.Mock).mockReturnValue([modifiedNodes, true, null]);
+
+      rerender(<NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Groups have been updated.')).toBeInTheDocument();
+        expect(screen.getByText('Click reload to see the changes.')).toBeInTheDocument();
+      });
+    });
+
+    it('disables Save button when background changes detected', async () => {
+      const { rerender } = renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      // Simulate external change
+      const modifiedNodes = [...mockNodes, createMockNode('node-5', 'group-e')];
+
+      (useK8sWatchResource as jest.Mock).mockReturnValue([modifiedNodes, true, null]);
+
+      rerender(<NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />);
+
+      await waitFor(() => {
+        const saveButton = screen.getByRole('button', { name: 'Save' });
+        expect(saveButton).toBeDisabled();
+      });
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('handles node with no existing groups', () => {
+      const nodeWithoutGroups = createMockNode('empty-node');
+
+      renderWithProviders(
+        <NodeGroupsEditorModal node={nodeWithoutGroups} closeOverlay={mockCloseOverlay} />,
+      );
+
+      // All checkboxes should be unchecked
+      const checkboxes = screen.getAllByRole('checkbox');
+      checkboxes.forEach((checkbox) => {
+        expect(checkbox).not.toBeChecked();
+      });
+    });
+
+    it('handles saving when all groups are unchecked', async () => {
+      renderWithProviders(
+        <NodeGroupsEditorModal node={testNode} closeOverlay={mockCloseOverlay} />,
+      );
+
+      // Uncheck all groups
+      await userEvent.click(screen.getByLabelText('group-a'));
+      await userEvent.click(screen.getByLabelText('group-b'));
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(k8sPatchResource).toHaveBeenCalledWith(
+          expect.objectContaining({
+            data: expect.arrayContaining([
+              expect.objectContaining({
+                value: expect.objectContaining({
+                  [GROUP_ANNOTATION]: '',
+                }),
+              }),
+            ]),
+          }),
+        );
+      });
+    });
+  });
+});
diff --git a/frontend/packages/console-app/src/components/nodes/modals/node-group-editor-modal.scss b/frontend/packages/console-app/src/components/nodes/modals/node-group-editor-modal.scss
new file mode 100644
index 00000000000..71360bbea41
--- /dev/null
+++ b/frontend/packages/console-app/src/components/nodes/modals/node-group-editor-modal.scss
@@ -0,0 +1,17 @@
+.co-node-group-editor-modal {
+  .pf-v6-theme-dark & {
+    .pf-v6-c-dual-list-selector__list-item-row.pf-m-selected {
+      --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+    }
+    .pf-v6-c-dual-list-selector__list-item-row:hover{
+      --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+    }
+  }
+  &__loading-box {
+    height: 200px;
+  }
+  &__groups-list {
+    border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
+    border-radius: var(--pf-t--global--border--radius--small);
+  }
+}
diff --git a/frontend/packages/console-app/src/components/nodes/node-dashboard/DetailsCard.tsx b/frontend/packages/console-app/src/components/nodes/node-dashboard/DetailsCard.tsx
index 8e87c95c55c..1de02f0d608 100644
--- a/frontend/packages/console-app/src/components/nodes/node-dashboard/DetailsCard.tsx
+++ b/frontend/packages/console-app/src/components/nodes/node-dashboard/DetailsCard.tsx
@@ -1,12 +1,31 @@
 import type { FC } from 'react';
 import { useContext } from 'react';
-import { Card, CardBody, CardHeader, CardTitle, DescriptionList } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  Divider,
+  DividerVariant,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom-v5-compat';
+import { getNodeGroups } from '@console/app/src/components/nodes/NodeGroupUtils';
+import { useAccessReview } from '@console/dynamic-plugin-sdk/src/api/dynamic-core-api';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { OverviewDetailItem } from '@console/internal/components/overview/OverviewDetailItem';
 import { resourcePathFromModel } from '@console/internal/components/utils/resource-link';
 import { NodeModel } from '@console/internal/models';
+import { DASH } from '@console/shared/src';
 import { getNodeAddresses } from '@console/shared/src/selectors/node';
+import NodeGroupsEditorModal from '../modals/NodeGroupsEditorModal';
 import NodeIPList from '../NodeIPList';
 import NodeRoles from '../NodeRoles';
 import { NodeDashboardContext } from './NodeDashboardContext';
@@ -18,6 +37,14 @@ const DetailsCard: FC = () => {
   const instanceType = obj.metadata.labels?.['beta.kubernetes.io/instance-type'];
   const zone = obj.metadata.labels?.['topology.kubernetes.io/zone'];
   const { t } = useTranslation();
+  const launchOverlay = useOverlay();
+
+  const [canEdit, isEditLoading] = useAccessReview({
+    group: NodeModel.apiGroup || '',
+    resource: NodeModel.plural,
+    verb: 'patch',
+  });
+
   return (
     <Card data-test-id="details-card">
       <CardHeader
@@ -61,6 +88,30 @@ const DetailsCard: FC = () => {
           <OverviewDetailItem isLoading={!obj} title={t('console-app~Uptime')}>
             <NodeUptime obj={obj} />
           </OverviewDetailItem>
+          <Divider component={DividerVariant.div} className="pf-v6-u-w-75" />
+          <DescriptionListGroup>
+            <dt className="pf-v6-c-description-list__term" data-test="detail-item-title">
+              <span className="pf-v6-c-description-list__text pf-v6-u-w-100">
+                <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+                  <FlexItem>{t('console-app~Groups')}</FlexItem>
+                  {!isEditLoading && canEdit ? (
+                    <FlexItem>
+                      <Button
+                        variant={ButtonVariant.link}
+                        isInline
+                        onClick={() => launchOverlay(NodeGroupsEditorModal, { node: obj })}
+                      >
+                        {t('console-app~Edit')}
+                      </Button>
+                    </FlexItem>
+                  ) : null}
+                </Flex>
+              </span>
+            </dt>
+            <DescriptionListDescription data-test="detail-item-value">
+              {getNodeGroups(obj).sort().join(', ') || DASH}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
         </DescriptionList>
       </CardBody>
     </Card>