diff --git a/plugins/main/public/components/common/charts/visualizations/legend.scss b/plugins/main/public/components/common/charts/visualizations/legend.scss
index 84693eb459..e23d12d2c7 100644
--- a/plugins/main/public/components/common/charts/visualizations/legend.scss
+++ b/plugins/main/public/components/common/charts/visualizations/legend.scss
@@ -6,6 +6,10 @@
   margin-top: 0px;
 }
 
+.chart-legend > li svg {
+  margin-right: 6px;
+}
+
 .chart-legend > li > * {
   padding: 0px;
 }
diff --git a/plugins/main/public/components/endpoints-summary/components/donut-card.tsx b/plugins/main/public/components/endpoints-summary/dashboard/components/donut-card.tsx
similarity index 90%
rename from plugins/main/public/components/endpoints-summary/components/donut-card.tsx
rename to plugins/main/public/components/endpoints-summary/dashboard/components/donut-card.tsx
index b8fe369a0e..f06b7c2fed 100644
--- a/plugins/main/public/components/endpoints-summary/components/donut-card.tsx
+++ b/plugins/main/public/components/endpoints-summary/dashboard/components/donut-card.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiCard } from '@elastic/eui';
-import { useApiService } from '../../common/hooks/useApiService';
-import { VisualizationBasic } from '../../common/charts/visualizations/basic';
+import { useApiService } from '../../../common/hooks/useApiService';
+import { VisualizationBasic } from '../../../common/charts/visualizations/basic';
 
 interface AgentsByStatusCardProps {
   title?: string;
diff --git a/plugins/main/public/components/endpoints-summary/components/outdated-agents-card.scss b/plugins/main/public/components/endpoints-summary/dashboard/components/outdated-agents-card.scss
similarity index 55%
rename from plugins/main/public/components/endpoints-summary/components/outdated-agents-card.scss
rename to plugins/main/public/components/endpoints-summary/dashboard/components/outdated-agents-card.scss
index e6d0f8bf75..65ab2e1b83 100644
--- a/plugins/main/public/components/endpoints-summary/components/outdated-agents-card.scss
+++ b/plugins/main/public/components/endpoints-summary/dashboard/components/outdated-agents-card.scss
@@ -1,20 +1,22 @@
 .wazuh-outdated-agents-panel {
   display: flex;
-  gap: 10px;
   align-items: center;
-  justify-content: flex-end;
-  padding: 20px 0;
+  justify-content: center;
   margin: auto;
   flex-direction: column;
   cursor: pointer;
 }
 
 .wazuh-outdated-metric .euiTitle {
-  margin-top: 2rem;
-  font-size: 5.5rem;
+  font-size: 4.5rem;
+  line-height: inherit;
+}
+
+.wazuh-outdated-metric small {
+  font-size: 1.5rem;
 }
 
 .wazuh-outdated-icon {
-  width: 5rem;
-  height: 5rem;
+  width: 3.5rem;
+  height: 3.5rem;
 }
diff --git a/plugins/main/public/components/endpoints-summary/components/outdated-agents-card.tsx b/plugins/main/public/components/endpoints-summary/dashboard/components/outdated-agents-card.tsx
similarity index 79%
rename from plugins/main/public/components/endpoints-summary/components/outdated-agents-card.tsx
rename to plugins/main/public/components/endpoints-summary/dashboard/components/outdated-agents-card.tsx
index 77f1f22fdf..31dc9991ed 100644
--- a/plugins/main/public/components/endpoints-summary/components/outdated-agents-card.tsx
+++ b/plugins/main/public/components/endpoints-summary/dashboard/components/outdated-agents-card.tsx
@@ -11,9 +11,9 @@ import {
   EuiButtonEmpty,
 } from '@elastic/eui';
 import './outdated-agents-card.scss';
-import { getOutdatedAgents } from '../services/get-outdated-agents';
-import { useApiService } from '../../common/hooks/useApiService';
-import { webDocumentationLink } from '../../../../common/services/web_documentation';
+import { getOutdatedAgents } from '../../services/get-outdated-agents';
+import { useApiService } from '../../../common/hooks/useApiService';
+import { webDocumentationLink } from '../../../../../common/services/web_documentation';
 
 interface OutdatedAgentsCardProps {
   onClick?: (status: any) => void;
@@ -34,6 +34,7 @@ const OutdatedAgentsCard = ({ onClick, ...props }: OutdatedAgentsCardProps) => {
   const handleClick = () => {
     if (onClick) {
       onClick(data);
+      setShowOutdatedAgents(false);
     }
   };
 
@@ -43,23 +44,26 @@ const OutdatedAgentsCard = ({ onClick, ...props }: OutdatedAgentsCardProps) => {
         className='wazuh-outdated-agents-panel'
         onClick={onShowOutdatedAgents}
       >
+        <EuiIcon
+          type={contentIcon}
+          color={contentType}
+          className='wazuh-outdated-icon'
+        />
         <EuiStat
           className='wazuh-outdated-metric'
           title={
+            <EuiTextColor color={contentType}>{outdatedAgents}</EuiTextColor>
+          }
+          description={
             <EuiTextColor color={contentType}>
-              <EuiIcon
-                type={contentIcon}
-                color={contentType}
-                className='wazuh-outdated-icon'
-              />{' '}
-              {outdatedAgents}
+              <small>Agents</small>
             </EuiTextColor>
           }
-          description=''
           titleColor='danger'
           isLoading={loading}
           titleSize='l'
           textAlign='center'
+          reverse
         />
       </div>
     );
@@ -67,7 +71,7 @@ const OutdatedAgentsCard = ({ onClick, ...props }: OutdatedAgentsCardProps) => {
 
   return (
     <EuiFlexItem>
-      <EuiCard title='' betaBadgeLabel='Outdated agents' className='eui-panel'>
+      <EuiCard title='' betaBadgeLabel='Outdated'>
         <EuiPopover
           button={renderMetric()}
           isOpen={showOutdatedAgents}
diff --git a/plugins/main/public/components/endpoints-summary/dashboard/endpoints-summary-dashboard.tsx b/plugins/main/public/components/endpoints-summary/dashboard/endpoints-summary-dashboard.tsx
new file mode 100644
index 0000000000..f280661441
--- /dev/null
+++ b/plugins/main/public/components/endpoints-summary/dashboard/endpoints-summary-dashboard.tsx
@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+import { getAgentsByGroup } from '../services/get-agents-by-group';
+import { getAgentsByOs } from '../services/get-agents-by-os';
+import { getSummaryAgentsStatus } from '../services/get-summary-agents-status';
+import DonutCard from './components/donut-card';
+import OutdatedAgentsCard from './components/outdated-agents-card';
+
+interface EndpointsSummaryDashboardProps {
+  filterAgentByStatus: (data: any) => void;
+  filterAgentByOS: (data: any) => void;
+  filterAgentByGroup: (data: any) => void;
+  filterByOutdatedAgent: (data: any) => void;
+}
+
+export const EndpointsSummaryDashboard: FC<EndpointsSummaryDashboardProps> = ({
+  filterAgentByStatus,
+  filterAgentByOS,
+  filterAgentByGroup,
+  filterByOutdatedAgent,
+}) => {
+  return (
+    <div className='endpoints-summary-container-indicators'>
+      <DonutCard
+        betaBadgeLabel='Agents by Status'
+        onClickLabel={filterAgentByStatus}
+        getInfo={getSummaryAgentsStatus}
+      />
+      <DonutCard
+        betaBadgeLabel='Agents by OS'
+        onClickLabel={filterAgentByOS}
+        getInfo={getAgentsByOs}
+      />
+      <DonutCard
+        betaBadgeLabel='Agents by Group'
+        onClickLabel={filterAgentByGroup}
+        getInfo={getAgentsByGroup}
+      />
+      <OutdatedAgentsCard onClick={filterByOutdatedAgent} />
+    </div>
+  );
+};
diff --git a/plugins/main/public/components/endpoints-summary/endpoints-summary.scss b/plugins/main/public/components/endpoints-summary/endpoints-summary.scss
index d6db112073..1e84019560 100644
--- a/plugins/main/public/components/endpoints-summary/endpoints-summary.scss
+++ b/plugins/main/public/components/endpoints-summary/endpoints-summary.scss
@@ -106,7 +106,7 @@
   width: 100%;
   display: grid;
   grid-template-columns: 1fr;
-  gap: 10px;
+  gap: 20px 10px;
   min-height: 200px;
 
   @media (min-width: 1024px) {
@@ -114,6 +114,9 @@
   }
 
   @media (min-width: 1440px) {
-    grid-template-columns: repeat(4, minmax(150px, 1fr));
+    gap: 10px;
+    grid-template-columns:
+      minmax(375px, 1fr) minmax(375px, 1fr) minmax(375px, 1fr)
+      minmax(150px, 1fr);
   }
 }
diff --git a/plugins/main/public/components/endpoints-summary/endpoints-summary.tsx b/plugins/main/public/components/endpoints-summary/endpoints-summary.tsx
index 98789986db..0a86e30810 100644
--- a/plugins/main/public/components/endpoints-summary/endpoints-summary.tsx
+++ b/plugins/main/public/components/endpoints-summary/endpoints-summary.tsx
@@ -36,11 +36,12 @@ import { compose } from 'redux';
 import { endpointSumary, itHygiene } from '../../utils/applications';
 import { ShareAgent } from '../../factories/share-agent';
 import './endpoints-summary.scss';
-import OutdatedAgentsCard from './components/outdated-agents-card';
-import DonutCard from './components/donut-card';
+import OutdatedAgentsCard from './dashboard/components/outdated-agents-card';
+import DonutCard from './dashboard/components/donut-card';
 import { getSummaryAgentsStatus } from './services/get-summary-agents-status';
 import { getAgentsByOs } from './services/get-agents-by-os';
 import { getAgentsByGroup } from './services/get-agents-by-group';
+import { EndpointsSummaryDashboard } from './dashboard/endpoints-summary-dashboard';
 
 export const EndpointsSummary = compose(
   withErrorBoundary,
@@ -133,42 +134,12 @@ export const EndpointsSummary = compose(
       return (
         <EuiPage className='flex-column'>
           <EuiFlexItem>
-            {/* <EuiFlexGrid columns={4}>
-              <DonutCard
-                betaBadgeLabel='Agents by Status'
-                onClickLabel={this.filterAgentByStatus}
-                getInfo={getSummaryAgentsStatus}
-              />
-              <DonutCard
-                betaBadgeLabel='Agents by OS'
-                onClickLabel={this.filterAgentByOS}
-                getInfo={getAgentsByOs}
-              />
-              <DonutCard
-                betaBadgeLabel='Agents by Group'
-                onClickLabel={this.filterAgentByGroup}
-                getInfo={getAgentsByGroup}
-              />
-              <OutdatedAgentsCard onClick={this.filterByOutdatedAgent} />
-            </EuiFlexGrid> */}
-            <div className='endpoints-summary-container-indicators'>
-              <DonutCard
-                betaBadgeLabel='Agents by Status'
-                onClickLabel={this.filterAgentByStatus}
-                getInfo={getSummaryAgentsStatus}
-              />
-              <DonutCard
-                betaBadgeLabel='Agents by OS'
-                onClickLabel={this.filterAgentByOS}
-                getInfo={getAgentsByOs}
-              />
-              <DonutCard
-                betaBadgeLabel='Agents by Group'
-                onClickLabel={this.filterAgentByGroup}
-                getInfo={getAgentsByGroup}
-              />
-              <OutdatedAgentsCard onClick={this.filterByOutdatedAgent} />
-            </div>
+            <EndpointsSummaryDashboard
+              filterAgentByStatus={this.filterAgentByStatus}
+              filterAgentByOS={this.filterAgentByOS}
+              filterAgentByGroup={this.filterAgentByGroup}
+              filterByOutdatedAgent={this.filterByOutdatedAgent}
+            />
             <EuiSpacer size='m' />
             <WzReduxProvider>
               <AgentsTable filters={this.state.agentTableFilters} />