diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4450a84152..9eb64edb79 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Change the view of API is down and check connection to Server APIs application [#6337](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6337)
 - Changed the usage of the endpoint GET /groups/{group_id}/files/{file_name} [#6385](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6385)
 - Refactoring and redesign endpoints summary visualizations [#6268](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6268)
+- Remove AngularJS controller for manage groups [#6543](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6543)
 
 ### Fixed
 
diff --git a/plugins/main/public/components/common/permissions/button.tsx b/plugins/main/public/components/common/permissions/button.tsx
index 419477fc2e..fb0acc4f72 100644
--- a/plugins/main/public/components/common/permissions/button.tsx
+++ b/plugins/main/public/components/common/permissions/button.tsx
@@ -70,6 +70,7 @@ export const WzButtonPermissions = ({
 
         return additionalProps;
       }}
+      {...rest}
     >
       <Button {...rest} />
     </WzElementPermissions>
diff --git a/plugins/main/public/controllers/management/components/management/groups/__snapshots__/groups-main.test.tsx.snap b/plugins/main/public/controllers/management/components/management/groups/__snapshots__/groups-main.test.tsx.snap
index 2923c94f31..792a26b3e0 100644
--- a/plugins/main/public/controllers/management/components/management/groups/__snapshots__/groups-main.test.tsx.snap
+++ b/plugins/main/public/controllers/management/components/management/groups/__snapshots__/groups-main.test.tsx.snap
@@ -33,23 +33,6 @@ exports[`Group main component renders correctly to match the snapshot 1`] = `
         },
       }
     }
-    groupsProps={
-      Object {
-        "closeAddingAgents": false,
-        "exportConfigurationProps": Object {
-          "type": "group",
-        },
-        "items": Array [
-          Object {
-            "configSum": "ab73af41699f13fdd81903b5f23d8d00",
-            "count": 1,
-            "mergedSum": "2c45c95db2954d2c7d0ea533f09e81a5",
-            "name": "default",
-          },
-        ],
-        "selectedGroup": false,
-      }
-    }
     logtestProps={
       Object {
         "onFlyout": true,
diff --git a/plugins/main/public/controllers/management/components/management/groups/actions-buttons-agents.js b/plugins/main/public/controllers/management/components/management/groups/actions-buttons-agents.js
index 39e04635a5..fa3ffc0a7d 100644
--- a/plugins/main/public/controllers/management/components/management/groups/actions-buttons-agents.js
+++ b/plugins/main/public/controllers/management/components/management/groups/actions-buttons-agents.js
@@ -15,9 +15,7 @@ import { EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 
 import { connect } from 'react-redux';
 
-import {
-  updateShowAddAgents,
-} from '../../../../../redux/actions/groupsActions';
+import { updateShowAddAgents } from '../../../../../redux/actions/groupsActions';
 
 import GroupsHandler from './utils/groups-handler';
 import { ExportConfiguration } from '../../../../agent/components/export-configuration';
@@ -30,22 +28,21 @@ class WzGroupsActionButtonsAgents extends Component {
     super(props);
     this.reportingService = new ReportingService();
 
-
     this.groupsHandler = GroupsHandler;
   }
 
-
   showManageAgents() {
-    const { itemDetail } = this.props.state;
-
-    this.props.groupsProps.showAddingAgents(true, itemDetail);
     this.props.updateShowAddAgents(true);
   }
 
   render() {
     // Add new group button
     const manageAgentsButton = (
-      <EuiButtonEmpty iconSide="left" iconType="folderOpen" onClick={() => this.showManageAgents()}>
+      <EuiButtonEmpty
+        iconSide='left'
+        iconType='folderOpen'
+        onClick={() => this.showManageAgents()}
+      >
         Manage agents
       </EuiButtonEmpty>
     );
@@ -53,14 +50,14 @@ class WzGroupsActionButtonsAgents extends Component {
     // Export PDF button
     const exportPDFButton = (
       <ExportConfiguration
-        exportConfiguration={(enabledComponents) =>
+        exportConfiguration={enabledComponents =>
           this.reportingService.startConfigReport(
             this.props.state.itemDetail,
             'groupConfig',
-            enabledComponents
+            enabledComponents,
           )
         }
-        type="group"
+        type='group'
       />
     );
 
@@ -73,16 +70,20 @@ class WzGroupsActionButtonsAgents extends Component {
   }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   return {
     state: state.groupsReducers,
   };
 };
 
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = dispatch => {
   return {
-    updateShowAddAgents: (showAddAgents) => dispatch(updateShowAddAgents(showAddAgents)),
+    updateShowAddAgents: showAddAgents =>
+      dispatch(updateShowAddAgents(showAddAgents)),
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(WzGroupsActionButtonsAgents);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(WzGroupsActionButtonsAgents);
diff --git a/plugins/main/public/controllers/management/components/management/groups/groups-main.js b/plugins/main/public/controllers/management/components/management/groups/groups-main.js
index 3898978ec3..83cf53c972 100644
--- a/plugins/main/public/controllers/management/components/management/groups/groups-main.js
+++ b/plugins/main/public/controllers/management/components/management/groups/groups-main.js
@@ -30,6 +30,7 @@ import { getErrorOrchestrator } from '../../../../../react-services/common-servi
 import { compose } from 'redux';
 import { withGlobalBreadcrumb } from '../../../../../components/common/hocs';
 import { endpointGroups } from '../../../../../utils/applications';
+import { MultipleAgentSelector } from '../../../../../components/management/groups/multiple-agent-selector';
 
 class WzGroups extends Component {
   constructor(props) {
@@ -71,29 +72,15 @@ class WzGroups extends Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    if (
-      nextProps.groupsProps.closeAddingAgents &&
-      this.props.state.showAddAgents
-    ) {
+    if (this.props.state.showAddAgents) {
       this.props.updateShowAddAgents(false);
     }
-    if (
-      nextProps.groupsProps.selectedGroup &&
-      nextProps.groupsProps.selectedGroup !==
-        this.props.groupsProps.selectedGroup
-    ) {
-      store.dispatch(updateGroupDetail(nextProps.groupsProps.selectedGroup));
-    }
   }
   componentWillUnmount() {
     // When the component is going to be unmounted the groups state is reset
     this.props.resetGroup();
   }
-  componentDidUpdate() {
-    if (this.props.groupsProps.selectedGroup) {
-      this.props.groupsProps.updateProps();
-    }
-  }
+
   render() {
     const { itemDetail, showAddAgents, fileContent } = this.props.state;
     return (
@@ -101,6 +88,12 @@ class WzGroups extends Component {
         {!showAddAgents &&
           ((itemDetail && !fileContent && <WzGroupDetail {...this.props} />) ||
             (fileContent && <WzGroupEditor />) || <WzGroupsOverview />)}
+        {showAddAgents && itemDetail && (
+          <MultipleAgentSelector
+            currentGroup={itemDetail}
+            cancelButton={() => this.props.updateShowAddAgents(false)}
+          />
+        )}
       </WzReduxProvider>
     );
   }
diff --git a/plugins/main/public/controllers/management/components/management/groups/groups-main.test.tsx b/plugins/main/public/controllers/management/components/management/groups/groups-main.test.tsx
index 8b3d0009f6..ca0462bd50 100644
--- a/plugins/main/public/controllers/management/components/management/groups/groups-main.test.tsx
+++ b/plugins/main/public/controllers/management/components/management/groups/groups-main.test.tsx
@@ -28,21 +28,6 @@ jest.mock('../../../../../kibana-services', () => ({
 
 const mockProps = {
   section: 'groups',
-  groupsProps: {
-    items: [
-      {
-        name: 'default',
-        count: 1,
-        mergedSum: '2c45c95db2954d2c7d0ea533f09e81a5',
-        configSum: 'ab73af41699f13fdd81903b5f23d8d00',
-      },
-    ],
-    closeAddingAgents: false,
-    exportConfigurationProps: {
-      type: 'group',
-    },
-    selectedGroup: false,
-  },
   configurationProps: {
     agent: {
       id: '000',
diff --git a/plugins/main/public/controllers/management/groups.js b/plugins/main/public/controllers/management/groups.js
deleted file mode 100644
index caf3bf29f1..0000000000
--- a/plugins/main/public/controllers/management/groups.js
+++ /dev/null
@@ -1,180 +0,0 @@
-/*
- * Wazuh app - Management groups controller
- * Copyright (C) 2015-2022 Wazuh, Inc.
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 2 of the License, or
- * (at your option) any later version.
- *
- * Find more information about this on the LICENSE file.
- */
-import { WazuhConfig } from '../../react-services/wazuh-config';
-import { WzRequest } from '../../react-services/wz-request';
-import { ShareAgent } from '../../factories/share-agent';
-import { GroupHandler } from '../../react-services/group-handler';
-import { ErrorHandler } from '../../react-services/error-handler';
-import { ReportingService } from '../../react-services/reporting';
-
-export class GroupsController {
-  constructor($scope, $location, errorHandler) {
-    this.scope = $scope;
-    this.location = $location;
-    this.errorHandler = errorHandler;
-    this.shareAgent = new ShareAgent();
-    this.groupHandler = GroupHandler;
-    this.wazuhConfig = new WazuhConfig();
-    this.reportingService = new ReportingService();
-  }
-
-  async $onInit() {
-    try {
-      this.mctrl = this.scope.mctrl;
-      this.addingGroup = false;
-      this.load = false;
-      await this.loadGroups();
-
-      // Listeners
-
-      // Resetting the factory configuration
-      this.scope.$on('$destroy', () => {});
-
-      this.scope.$watch('lookingGroup', value => {
-        this.addingAgents = false;
-        if (!value) {
-          this.file = false;
-          this.filename = false;
-        }
-      });
-
-      // Props
-      this.exportConfigurationProps = {
-        exportConfiguration: enabledComponents =>
-          this.exportConfiguration(enabledComponents),
-        type: 'group',
-      };
-
-      this.filesInGroupTableProps = {
-        exportConfigurationProps: this.exportConfigurationProps,
-      };
-
-      return;
-    } catch (error) {
-      ErrorHandler.handle(error, 'Groups');
-    }
-  }
-
-  /**
-   * Loads the initial information
-   */
-  async loadGroups() {
-    try {
-      // If come from agents
-      // Store a boolean variable to check if come from agents
-      this.globalAgent = this.shareAgent.getAgent();
-      if (this.globalAgent || this.location.search()?.group) {
-        const globalGroup =
-          this.shareAgent.getSelectedGroup() || this.location.search().group;
-        // Get ALL groups
-        const data = await WzRequest.apiReq('GET', '/groups', {});
-        const filtered = data.data.data.affected_items.filter(
-          group => group.name === globalGroup,
-        );
-        if (Array.isArray(filtered) && filtered.length) {
-          // Load that our group
-          this.buildGroupsTableProps(data.data.data.items, {
-            group: filtered[0],
-          });
-        } else {
-          throw Error(`Group ${globalGroup} not found`);
-        }
-
-        this.shareAgent.deleteAgent();
-      } else {
-        const loadedGroups = await WzRequest.apiReq('GET', '/groups', {});
-        this.buildGroupsTableProps(loadedGroups.data.data.affected_items);
-        this.load = false;
-      }
-      this.scope.$applyAsync();
-    } catch (error) {
-      return Promise.reject(error);
-    }
-  }
-
-  toggle() {
-    this.lookingGroup = true;
-  }
-
-  /**
-   * This navigate to a selected agent
-   * @param {Number} agentId
-   */
-  showAgent(agent) {
-    this.shareAgent.setAgent(agent);
-    this.location.search('tab', null);
-    this.location.path('/agents');
-    this.scope.$applyAsync();
-  }
-
-  /**
-   *
-   * @param {Object} enabledComponents
-   */
-  exportConfiguration(enabledComponents, group) {
-    this.reportingService.startConfigReport(
-      group,
-      'groupConfig',
-      enabledComponents,
-    );
-  }
-
-  async cancelButton() {
-    this.mctrl.managementProps.groupsProps.closeAddingAgents = true;
-    this.addingAgents = false;
-  }
-
-  switchAddingGroup() {
-    this.addingGroup = !this.addingGroup;
-  }
-
-  buildGroupsTableProps(items, params = {}) {
-    this.redirectGroup = params.group || false;
-    this.groupsTableProps = {
-      items,
-      closeAddingAgents: false,
-      showAddingAgents: (status, group) => {
-        this.showAddingAgents(status, group);
-      },
-      exportConfigurationProps: {
-        exportConfiguration: (enabledComponents, group) =>
-          this.exportConfiguration(enabledComponents, group),
-        type: 'group',
-      },
-      currentGroup: group => {
-        this.currentGroup = group;
-      },
-      updateProps: () => {
-        this.loadGroups();
-      },
-      showAgent: agent => {
-        this.showAgent(agent);
-      },
-      selectedGroup: this.redirectGroup,
-    };
-    this.mctrl.managementProps.groupsProps = this.groupsTableProps;
-  }
-
-  async showAddingAgents(status, group) {
-    this.load = true;
-    this.mctrl.managementProps.groupsProps.closeAddingAgents = false;
-    this.currentGroup = group;
-    this.lookingGroup = true;
-    this.addingAgents = status;
-    this.load = false;
-    this.multipleAgentSelectorProps = {
-      currentGroup: this.currentGroup,
-      cancelButton: () => this.cancelButton(),
-    };
-    this.scope.$applyAsync();
-  }
-}
diff --git a/plugins/main/public/controllers/management/index.js b/plugins/main/public/controllers/management/index.js
index 6ed7e0517c..f879da31d1 100644
--- a/plugins/main/public/controllers/management/index.js
+++ b/plugins/main/public/controllers/management/index.js
@@ -10,7 +10,6 @@
  * Find more information about this on the LICENSE file.
  */
 
-import { GroupsController } from './groups';
 import { ManagementController } from './management';
 import { ClusterController } from './monitoring';
 import WzManagement from './components/management/management-provider';
@@ -24,7 +23,6 @@ WzManagementConfiguration.displayName = 'WzManagementConfiguration';
 
 app
   .controller('managementController', ManagementController)
-  .controller('groupsPreviewController', GroupsController)
   .controller('clusterController', ClusterController)
   .value('WzManagement', WzManagement)
   .value('WzManagementConfiguration', WzManagementConfiguration);
diff --git a/plugins/main/public/templates/management/management.html b/plugins/main/public/templates/management/management.html
index 8bfc57911f..efa961dc3a 100644
--- a/plugins/main/public/templates/management/management.html
+++ b/plugins/main/public/templates/management/management.html
@@ -555,23 +555,4 @@ <h2 class="euiTitle euiTitle--medium">
     ></react-component>
   </div>
   <!-- end management -->
-  <!-- groups -->
-  <div
-    ng-class="{'cursor-wait': multipleSelectorLoading}"
-    ng-controller="groupsPreviewController as gp"
-    ng-if="mctrl.tab == 'groups'"
-  >
-    <!-- TODO -
-        - remove GroupsPreviewController
-        - add 'Manage agents' section to the Groups component
-    -->
-    <div ng-if="gp.currentGroup && gp.addingAgents">
-      <react-component
-        name="MultipleAgentSelector"
-        props="gp.multipleAgentSelectorProps"
-        ng-init="gp.groupsSelectedTab='agents'"
-      ></react-component>
-    </div>
-  </div>
-  <!-- end groups -->
 </div>