diff --git a/CHANGELOG.md b/CHANGELOG.md
index 599e239464..b2432582b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ### Changed
 
+- Refined the layout of the agent details view [#7193](https://github.com/wazuh/wazuh-dashboard-plugins/issues/7193)
 - Changed the width of the command column, relocate argvs column and change the width of the rest of the columns in the table processes. [#7195](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7195)
 
 ## Wazuh v4.10.0 - OpenSearch Dashboards 2.16.0 - Revision 03
diff --git a/plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap b/plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap
index 281620631e..6e7375e505 100644
--- a/plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap
+++ b/plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`AgentStatus component Renders status indicator with the its color and t
     active
   </span>
   <span
-    class="euiToolTipAnchor wz-margin-left-10"
+    class="euiToolTipAnchor wz-agent-icon-tip"
   >
     <svg
       aria-hidden="true"
@@ -112,7 +112,7 @@ exports[`AgentStatus component Renders status indicator with the its color and t
     disconnected
   </span>
   <span
-    class="euiToolTipAnchor wz-margin-left-10"
+    class="euiToolTipAnchor wz-agent-icon-tip"
   >
     <svg
       aria-label="Description"
@@ -180,7 +180,7 @@ exports[`AgentStatus component Renders status indicator with the its color and t
     never connected
   </span>
   <span
-    class="euiToolTipAnchor wz-margin-left-10"
+    class="euiToolTipAnchor wz-agent-icon-tip"
   >
     <svg
       aria-label="Description"
@@ -248,7 +248,7 @@ exports[`AgentStatus component Renders status indicator with the its color and t
     pending
   </span>
   <span
-    class="euiToolTipAnchor wz-margin-left-10"
+    class="euiToolTipAnchor wz-agent-icon-tip"
   >
     <svg
       aria-label="Description"
diff --git a/plugins/main/public/components/agents/agent-status.scss b/plugins/main/public/components/agents/agent-status.scss
new file mode 100644
index 0000000000..18a2c5c104
--- /dev/null
+++ b/plugins/main/public/components/agents/agent-status.scss
@@ -0,0 +1,3 @@
+.wz-agent-icon-tip {
+  margin-left: 5px;
+}
diff --git a/plugins/main/public/components/agents/agent-status.tsx b/plugins/main/public/components/agents/agent-status.tsx
index 65179ba825..22181b58e9 100644
--- a/plugins/main/public/components/agents/agent-status.tsx
+++ b/plugins/main/public/components/agents/agent-status.tsx
@@ -9,6 +9,7 @@ import { EuiIconTip } from '@elastic/eui';
 import { AGENT_STATUS_CODE } from '../../../common/constants';
 import '../../styles/common.scss';
 import { Agent } from '../endpoints-summary/types';
+import './agent-status.scss';
 
 interface AgentStatusProps {
   status: TAgentStatus;
@@ -37,7 +38,7 @@ export const AgentStatus = ({
         tooltip={agentStatusLabelByAgentStatus(status).toLowerCase()}
       />
       <EuiIconTip
-        anchorClassName='wz-margin-left-10'
+        anchorClassName='wz-agent-icon-tip'
         aria-label='Description'
         size='m'
         type='iInCircle'
diff --git a/plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap b/plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap
index 66b8518138..13c4b57394 100644
--- a/plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap
+++ b/plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap
@@ -17,9 +17,12 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -49,9 +52,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -81,9 +84,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -113,9 +116,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -145,9 +148,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -177,9 +180,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -209,9 +212,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -241,9 +244,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1468,9 +1471,12 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1500,9 +1506,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1532,9 +1538,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1564,9 +1570,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1596,9 +1602,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1628,9 +1634,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1660,9 +1666,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1692,9 +1698,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -2951,9 +2957,12 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -2983,9 +2992,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -3015,9 +3024,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -3047,9 +3056,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -3079,9 +3088,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -3111,9 +3120,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -3143,9 +3152,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -3175,9 +3184,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4426,9 +4435,12 @@ exports[`Inventory data Network Network ports table A Apple agent should render
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4458,9 +4470,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4490,9 +4502,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4522,9 +4534,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4554,9 +4566,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4586,9 +4598,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4618,9 +4630,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4650,9 +4662,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -5877,9 +5889,12 @@ exports[`Inventory data Network Network ports table A Linux agent should render
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -5909,9 +5924,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -5941,9 +5956,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -5973,9 +5988,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -6005,9 +6020,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -6037,9 +6052,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -6069,9 +6084,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -6101,9 +6116,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7360,9 +7375,12 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7392,9 +7410,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7424,9 +7442,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7456,9 +7474,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7488,9 +7506,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7520,9 +7538,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7552,9 +7570,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7584,9 +7602,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -8835,9 +8853,12 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -8867,9 +8888,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -8899,9 +8920,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -8931,9 +8952,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -8963,9 +8984,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -8995,9 +9016,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -9027,9 +9048,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -9059,9 +9080,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10286,9 +10307,12 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10318,9 +10342,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10350,9 +10374,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10382,9 +10406,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10414,9 +10438,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10446,9 +10470,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10478,9 +10502,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10510,9 +10534,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11769,9 +11793,12 @@ exports[`Inventory data Network Network settings table A Windows agent should re
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11801,9 +11828,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11833,9 +11860,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11865,9 +11892,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11897,9 +11924,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11929,9 +11956,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11961,9 +11988,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11993,9 +12020,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13244,9 +13271,12 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13276,9 +13306,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13308,9 +13338,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13340,9 +13370,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13372,9 +13402,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13404,9 +13434,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13436,9 +13466,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13468,9 +13498,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13964,9 +13994,12 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13996,9 +14029,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14028,9 +14061,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14060,9 +14093,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14092,9 +14125,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14124,9 +14157,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14156,9 +14189,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14188,9 +14221,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14834,9 +14867,12 @@ exports[`Inventory data Processes A Windows agent should render processes table
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14866,9 +14902,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14898,9 +14934,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14930,9 +14966,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14962,9 +14998,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14994,9 +15030,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15026,9 +15062,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15058,9 +15094,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15579,9 +15615,12 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15611,9 +15650,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15643,9 +15682,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15675,9 +15714,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15707,9 +15746,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15739,9 +15778,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15771,9 +15810,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15803,9 +15842,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16271,9 +16310,12 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16303,9 +16345,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16335,9 +16377,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16367,9 +16409,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16399,9 +16441,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16431,9 +16473,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16463,9 +16505,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16495,9 +16537,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16964,9 +17006,12 @@ exports[`Inventory data Software Packages table A Windows agent should render so
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16996,9 +17041,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17028,9 +17073,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17060,9 +17105,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17092,9 +17137,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17124,9 +17169,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17156,9 +17201,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17188,9 +17233,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17941,9 +17986,12 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
         style="responsive:"
       >
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17973,9 +18021,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18005,9 +18053,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18037,9 +18085,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18069,9 +18117,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18101,9 +18149,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18133,9 +18181,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18165,9 +18213,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
diff --git a/plugins/main/public/components/agents/syscollector/components/syscollector-metrics.tsx b/plugins/main/public/components/agents/syscollector/components/syscollector-metrics.tsx
index 682e29585b..1f75f8f8c8 100644
--- a/plugins/main/public/components/agents/syscollector/components/syscollector-metrics.tsx
+++ b/plugins/main/public/components/agents/syscollector/components/syscollector-metrics.tsx
@@ -8,6 +8,8 @@ import {
   IRibbonItem,
   RibbonItemLabel,
 } from '../../../common/ribbon/ribbon-item';
+import { getOsName, getPlatformIcon } from '../../../common/platform';
+import { Agent } from '../../../endpoints-summary/types';
 
 export function InventoryMetrics({ agent }) {
   const [params, setParams] = useState({});
@@ -70,6 +72,12 @@ export function InventoryMetrics({ agent }) {
         label: 'Operating system',
         isLoading: syscollector.isLoading,
         style: { maxWidth: 200 },
+        render: (value: Agent) => (
+          <>
+            {getPlatformIcon(value)}
+            {getOsName(value)}
+          </>
+        ),
       },
       {
         key: 'cpu',
diff --git a/plugins/main/public/components/common/platform/index.tsx b/plugins/main/public/components/common/platform/index.tsx
new file mode 100644
index 0000000000..a3b70d9929
--- /dev/null
+++ b/plugins/main/public/components/common/platform/index.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { WAZUH_AGENTS_OS_TYPE } from '../../../../common/constants';
+import { getAgentOSType } from '../../../react-services';
+import { Agent } from '../../endpoints-summary/types';
+
+export const getPlatformIcon = (agent?: Agent): React.JSX.Element => {
+  let icon = '';
+  const osType = getAgentOSType(agent);
+  if (osType === WAZUH_AGENTS_OS_TYPE.DARWIN) {
+    icon = 'apple';
+  } else if (
+    [WAZUH_AGENTS_OS_TYPE.WINDOWS, WAZUH_AGENTS_OS_TYPE.LINUX].includes(osType)
+  ) {
+    icon = osType;
+  }
+
+  if (icon) {
+    return (
+      <i
+        className={`fa fa-${icon} AgentsTable__soBadge AgentsTable__soBadge--${osType}`}
+        aria-hidden='true'
+      ></i>
+    );
+  }
+  return <></>;
+};
+
+export const getOsName = (agent?: Agent) => {
+  const { name, version } = agent?.os || {};
+
+  if (!name && !version) {
+    return '-';
+  }
+
+  if (!version) {
+    return name;
+  }
+
+  if (!name) {
+    return version;
+  }
+
+  return `${name} ${version}`;
+};
diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.scss b/plugins/main/public/components/common/ribbon/ribbon-item.scss
index bf543a6a40..ae0e83a0f0 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.scss
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.scss
@@ -2,3 +2,9 @@
   font-size: 12px;
   font-family: sans-serif;
 }
+
+@media (max-width: 767px) {
+  .wz-ribbon-item {
+    max-width: none !important;
+  }
+}
diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
index 29741c8a6b..b3fbb2a5f8 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
@@ -1,13 +1,12 @@
 import { EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 import React from 'react';
-import { WAZUH_AGENTS_OS_TYPE } from '../../../../common/constants';
 import { AgentStatus } from '../../agents/agent-status';
 import { Agent } from '../../endpoints-summary/types';
 import { WzStat } from '../../wz-stat';
 import { GroupTruncate } from '../util/agent-group-truncate';
 import WzTextWithTooltipIfTruncated from '../wz-text-with-tooltip-if-truncated';
 import './ribbon-item.scss';
-import { getAgentOSType } from '../../../react-services';
+import { TAgentStatus } from '../../../../common/services/wz_agent_status';
 
 const FONT_SIZE = 12;
 
@@ -23,7 +22,8 @@ export type IRibbonItem<LABEL extends string = string, VALUE = any> = {
   value: VALUE;
   style?: React.CSSProperties;
   isLoading?: boolean;
-  icon?: React.ReactNode;
+  condensed?: boolean;
+  render?: (value: any) => React.ReactNode;
 };
 
 const isGroups = (
@@ -32,12 +32,6 @@ const isGroups = (
   return item.key === RibbonItemLabel.GROUPS;
 };
 
-const isOperatingSystem = (
-  item: IRibbonItem,
-): item is IRibbonItem<RibbonItemLabel.OPERATING_SYSTEM, Agent> => {
-  return item.key === RibbonItemLabel.OPERATING_SYSTEM;
-};
-
 const isStatus = (
   item: IRibbonItem,
 ): item is IRibbonItem<RibbonItemLabel.AGENT_STATUS, Agent> => {
@@ -51,47 +45,9 @@ interface RibbonItemProps {
 const WzRibbonItem = (props: RibbonItemProps) => {
   const { item } = props;
 
-  const elementStyle = { ...(item.style || {}), fontSize: FONT_SIZE };
-  const wzWidth100 = { anchorClassName: 'wz-width-100' };
-  const tooltipProps = item.key === 'cluster-node' ? wzWidth100 : {};
-
-  const getPlatformIcon = (agent?: Agent) => {
-    let icon = '';
-    let osType = getAgentOSType(agent);
-    if (osType === WAZUH_AGENTS_OS_TYPE.DARWIN) {
-      icon = 'apple';
-    } else if (
-      [WAZUH_AGENTS_OS_TYPE.WINDOWS, WAZUH_AGENTS_OS_TYPE.LINUX].includes(
-        osType,
-      )
-    ) {
-      icon = osType;
-    }
-
-    if (icon) {
-      return (
-        <i
-          className={`fa fa-${icon} AgentsTable__soBadge AgentsTable__soBadge--${osType}`}
-          aria-hidden='true'
-        ></i>
-      );
-    }
-    return <></>;
-  };
-
-  const getOsName = (agent?: Agent) => {
-    const { name, version } = agent?.os || {};
+  const contentStyle = { ...item.style, fontSize: FONT_SIZE };
 
-    if (!name && !version) return '-';
-
-    if (!version) return name;
-
-    if (!name) return version;
-
-    return `${name} ${version}`;
-  };
-
-  const renderField = function <T>(field?: T): T | string {
+  const renderOptionalField = function <T>(field?: T): T | string {
     return field !== undefined || field ? field : '-';
   };
 
@@ -101,34 +57,21 @@ const WzRibbonItem = (props: RibbonItemProps) => {
     ) : isGroups(item) && item.value?.length ? (
       <GroupTruncate
         groups={item.value}
-        length={40}
+        length={30}
         label={'more'}
         action={'redirect'}
       />
-    ) : isOperatingSystem(item) ? (
-      <WzTextWithTooltipIfTruncated
-        position='bottom'
-        tooltipProps={wzWidth100}
-        elementStyle={{
-          ...elementStyle,
-          maxWidth: item.style?.maxWidth,
-        }}
-      >
-        {getPlatformIcon(item.value)} {getOsName(item.value)}
-      </WzTextWithTooltipIfTruncated>
     ) : isStatus(item) ? (
       <AgentStatus
-        status={item.value?.status}
+        status={item.value?.status as TAgentStatus}
         agent={item.value}
-        style={elementStyle}
+        style={contentStyle}
       />
     ) : (
-      <WzTextWithTooltipIfTruncated
-        position='bottom'
-        tooltipProps={tooltipProps}
-        elementStyle={elementStyle}
-      >
-        {item.icon} {renderField(item.value)}
+      <WzTextWithTooltipIfTruncated contentStyle={contentStyle}>
+        {item.render
+          ? item.render(item.value)
+          : renderOptionalField(item.value)}
       </WzTextWithTooltipIfTruncated>
     );
   };
@@ -136,9 +79,10 @@ const WzRibbonItem = (props: RibbonItemProps) => {
   return (
     <EuiFlexItem
       className='wz-ribbon-item'
+      grow={false}
       data-test-subj={`ribbon-item-${item.key}`}
       key={item.key}
-      style={item.style || null}
+      style={contentStyle || null}
     >
       <WzStat title={renderValue()} description={item.label} titleSize='xs' />
     </EuiFlexItem>
diff --git a/plugins/main/public/components/common/ribbon/ribbon.scss b/plugins/main/public/components/common/ribbon/ribbon.scss
new file mode 100644
index 0000000000..179a5b4480
--- /dev/null
+++ b/plugins/main/public/components/common/ribbon/ribbon.scss
@@ -0,0 +1,18 @@
+.wz-ribbon-condensed > .wz-ribbon-item {
+  margin-block: 24px;
+
+  @media (max-width: 767px) {
+    margin-block: 12px;
+  }
+}
+
+.wz-ribbon-condensed {
+  margin-inline-start: 0;
+  margin-inline-end: 12px;
+  flex-grow: 0;
+
+  @media (max-width: 767px) {
+    margin-block: 0;
+    margin-inline-start: 0;
+  }
+}
diff --git a/plugins/main/public/components/common/ribbon/ribbon.tsx b/plugins/main/public/components/common/ribbon/ribbon.tsx
index 50def4a9a6..d08bceafcb 100644
--- a/plugins/main/public/components/common/ribbon/ribbon.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { EuiFlexGroup, EuiPanel } from '@elastic/eui';
 import WzRibbonItem, { type IRibbonItem } from './ribbon-item';
+import './ribbon.scss';
 
 interface RibbonProps {
   items: Array<IRibbonItem>;
@@ -9,6 +10,10 @@ interface RibbonProps {
 
 const WzRibbon = (props: RibbonProps) => {
   const { items, 'data-test-subj': dataTestSubj } = props;
+
+  const condensedItems = items.filter(item => item.condensed);
+  const nonCondensedItems = items.filter(item => !item.condensed);
+
   return (
     <EuiPanel paddingSize='m'>
       <EuiFlexGroup
@@ -17,7 +22,12 @@ const WzRibbon = (props: RibbonProps) => {
         justifyContent='spaceBetween'
         style={{ responsive: true }}
       >
-        {items.map(item => (
+        <EuiFlexGroup gutterSize='l' className='wz-ribbon-condensed'>
+          {condensedItems.map(item => (
+            <WzRibbonItem key={item.key} item={item} />
+          ))}
+        </EuiFlexGroup>
+        {nonCondensedItems.map(item => (
           <WzRibbonItem key={item.key} item={item} />
         ))}
       </EuiFlexGroup>
diff --git a/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx b/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx
index ca79b0c29b..a99e50348b 100644
--- a/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx
+++ b/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx
@@ -11,7 +11,7 @@
  * Find more information about this on the LICENSE file.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -23,38 +23,51 @@ import {
 import { endpointGroups } from '../../../../utils/applications';
 import NavigationService from '../../../../react-services/navigation-service';
 
-export class GroupTruncate extends React.Component {
-  _isMount = false;
+const ACTION = {
+  REDIRECT: 'redirect',
+  FILTER: 'filter',
+} as const;
+
+type ACTION = (typeof ACTION)[keyof typeof ACTION];
+
+interface GroupTruncateProps {
+  groups?: string[];
+  label: string;
+  length: number;
+  action: ACTION;
+  filterAction?: (group: string) => void;
+}
+
+export class GroupTruncate extends React.Component<GroupTruncateProps> {
   state: {
-    groups: any;
     popoverOpen: boolean;
   };
-  props!: {
-    groups?: string[];
-    label: String;
-    length: number;
-    action: 'redirect' | 'filter';
-    filterAction?: (group: string) => void;
-  };
 
-  constructor(props) {
+  constructor(props: GroupTruncateProps) {
     super(props);
     this.state = {
-      groups: '',
       popoverOpen: false,
     };
   }
 
+  togglePopover() {
+    this.setState({ popoverOpen: !this.state.popoverOpen });
+  }
+
+  stopPropagation(event: Event) {
+    event.stopPropagation();
+  }
+
   action(group: string) {
     switch (this.props.action) {
-      case 'redirect':
+      case ACTION.REDIRECT:
         return NavigationService.getInstance().navigateToApp(
           endpointGroups.id,
           {
             path: `#/manager/?tab=groups&group=${group}`,
           },
         );
-      case 'filter':
+      case ACTION.FILTER:
         return this.props.filterAction?.(group);
       default:
         console.error('Wrong property in GroupTruncate component');
@@ -62,20 +75,18 @@ export class GroupTruncate extends React.Component {
     }
   }
 
-  renderButton(auxIndex) {
+  renderButton(quantity: number) {
     return (
       <EuiLink
         style={{ textDecoration: 'none', fontWeight: '400', fontSize: 'small' }}
         className={'no-focus'}
-        onMouseDown={ev => {
-          ev.stopPropagation();
-        }}
-        onClick={ev => {
-          ev.stopPropagation();
-          this.setState({ popoverOpen: !this.state.popoverOpen });
+        onMouseDown={this.stopPropagation}
+        onClick={(event: Event) => {
+          event.stopPropagation();
+          this.togglePopover();
         }}
       >
-        &nbsp;{`+${auxIndex} ${this.props.label}`}
+        &nbsp;{`+${quantity} ${this.props.label}`}
       </EuiLink>
     );
   }
@@ -86,11 +97,9 @@ export class GroupTruncate extends React.Component {
         color={'hollow'}
         key={`agent-group-${index}`}
         onClickAriaLabel={`agent-group-${index}`}
-        onMouseDown={ev => {
-          ev.stopPropagation();
-        }}
-        onClick={ev => {
-          ev.stopPropagation();
+        onMouseDown={this.stopPropagation}
+        onClick={(event: Event) => {
+          event.stopPropagation();
           this.action(group);
         }}
       >
@@ -101,16 +110,16 @@ export class GroupTruncate extends React.Component {
 
   renderGroups(groups: string[] = []) {
     const { length } = this.props;
-    let auxGroups: Array<React.ReactNode> = [];
-    let tooltipGroups: Array<React.ReactNode> = [];
+    const auxGroups: React.ReactNode[] = [];
+    const tooltipGroups: React.ReactNode[] = [];
     let auxLength = 0;
     let auxIndex = 0;
     if (groups.length >= 2 && groups.toString().length >= length) {
-      groups.map((group, index) => {
-        auxLength = auxLength + group.length;
+      groups.forEach((group, index) => {
+        auxLength += group.length;
         if (auxLength >= length) {
           tooltipGroups.push(
-            <EuiFlexItem grow={1} key={`agent-group-${index}`}>
+            <EuiFlexItem grow={false} key={`agent-group-${index}`}>
               {this.renderBadge(group, index)}
             </EuiFlexItem>,
           );
@@ -120,14 +129,14 @@ export class GroupTruncate extends React.Component {
         }
       });
     } else {
-      groups.map((group, index) => {
+      groups.forEach((group, index) => {
         auxGroups.push(this.renderBadge(group, index));
       });
     }
     const button = this.renderButton(auxIndex);
     return (
       <span style={{ display: 'inline' }}>
-        <Fragment>{auxGroups}</Fragment>
+        {auxGroups}
         {auxIndex > 0 && (
           <EuiPopover
             button={button}
@@ -148,7 +157,6 @@ export class GroupTruncate extends React.Component {
   }
 
   render() {
-    const groups = this.renderGroups(this.props.groups);
-    return groups;
+    return this.renderGroups(this.props.groups);
   }
 }
diff --git a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
index 984e7c5bcf..c72055e567 100644
--- a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
+++ b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
@@ -17,6 +17,7 @@ import { formatUIDate } from '../../../../react-services/time-service';
 import { Agent } from '../../../endpoints-summary/types';
 import { RibbonItemLabel, type IRibbonItem } from '../../ribbon/ribbon-item';
 import WzRibbon from '../../ribbon/ribbon';
+import { getOsName, getPlatformIcon } from '../../platform';
 
 interface AgentInfoProps {
   agent: Agent;
@@ -36,6 +37,10 @@ export class AgentInfo extends Component<AgentInfoProps> {
     });
   }
 
+  isIPv6(ip: string) {
+    return ip.includes(':');
+  }
+
   render() {
     const { agent } = this.props;
     let arrayStats: IRibbonItem[];
@@ -47,24 +52,27 @@ export class AgentInfo extends Component<AgentInfoProps> {
           value: agent.id,
           label: 'ID',
           style: { maxWidth: 100 },
+          condensed: true,
         },
         {
           key: RibbonItemLabel.AGENT_STATUS,
           value: agent,
           label: 'Status',
           style: { maxWidth: 150 },
+          condensed: true,
         },
         {
           key: 'version',
           value: agent.version,
           label: 'Version',
           style: { maxWidth: 150 },
+          condensed: true,
         },
         {
           key: RibbonItemLabel.OPERATING_SYSTEM,
           value: agent,
           label: 'Operating system',
-          style: { minWidth: 200, maxWidth: 200 },
+          style: { maxWidth: 200 },
         },
       ];
     } else {
@@ -73,37 +81,47 @@ export class AgentInfo extends Component<AgentInfoProps> {
           key: 'id',
           value: agent.id,
           label: 'ID',
-          style: { minWidth: 30 },
+          condensed: true,
         },
         {
           key: RibbonItemLabel.AGENT_STATUS,
           value: agent,
           label: 'Status',
-          style: { minWidth: 100 },
+          condensed: true,
         },
         {
           key: 'ip',
           value: agent.ip,
           label: 'IP address',
-          style: {},
+          style: {
+            // IPv4: maxWidth: 100
+            // IPv6: maxWidth: 150
+            maxWidth: this.isIPv6(agent.ip) ? 150 : 100,
+          },
+          condensed: true,
         },
         {
           key: 'version',
           value: agent.version,
           label: 'Version',
-          style: { minWidth: 100 },
+          condensed: true,
         },
         {
           key: RibbonItemLabel.GROUPS,
           value: agent.group,
           label: 'Group',
-          style: { minWidth: 150 },
+          condensed: true,
         },
         {
           key: RibbonItemLabel.OPERATING_SYSTEM,
           value: agent,
           label: 'Operating system',
-          style: { maxWidth: 150 },
+          render: (value: Agent) => (
+            <>
+              {getPlatformIcon(value)}
+              {getOsName(value)}
+            </>
+          ),
         },
         {
           key: 'cluster-node',
@@ -112,19 +130,19 @@ export class AgentInfo extends Component<AgentInfoProps> {
               ? agent.node_name
               : '-',
           label: 'Cluster node',
-          style: { minWidth: 120 },
+          style: { maxWidth: 100 },
         },
         {
           key: 'registration-date',
           value: formatUIDate(agent.dateAdd),
           label: 'Registration date',
-          style: { minWidth: 180 },
+          style: { minWidth: 165 },
         },
         {
           key: 'last-keep-alive',
           value: formatUIDate(agent.lastKeepAlive),
           label: 'Last keep alive',
-          style: { minWidth: 180 },
+          style: { minWidth: 165 },
         },
       ];
     }
diff --git a/plugins/main/public/components/common/welcome/agents-welcome.js b/plugins/main/public/components/common/welcome/agents-welcome.js
index 61d41e9a2e..f031e5560f 100644
--- a/plugins/main/public/components/common/welcome/agents-welcome.js
+++ b/plugins/main/public/components/common/welcome/agents-welcome.js
@@ -51,7 +51,7 @@ import {
   endpointSummary,
   mitreAttack,
   threatHunting,
-  malwareDetection,
+  vulnerabilityDetection,
 } from '../../../utils/applications';
 import { RedirectAppLinks } from '../../../../../../src/plugins/opensearch_dashboards_react/public';
 import { EventsCount } from './dashboard/events-count';
@@ -183,7 +183,7 @@ export const AgentsWelcome = compose(
               fileIntegrityMonitoring.id,
               configurationAssessment.id,
               mitreAttack.id,
-              malwareDetection.id,
+              vulnerabilityDetection.id,
             ];
       }
 
diff --git a/plugins/main/public/components/common/welcome/components/top_packages_table/top_packages_table.tsx b/plugins/main/public/components/common/welcome/components/top_packages_table/top_packages_table.tsx
index 7ae98623c7..b432cd1187 100644
--- a/plugins/main/public/components/common/welcome/components/top_packages_table/top_packages_table.tsx
+++ b/plugins/main/public/components/common/welcome/components/top_packages_table/top_packages_table.tsx
@@ -69,7 +69,7 @@ export function VulsTopPackageTable({ agentId, items, indexPatternId }) {
   ];
 
   return (
-    <EuiPanel paddingSize='s'>
+    <EuiPanel paddingSize='m'>
       <EuiFlexGroup>
         <EuiFlexItem>
           <EuiText size='xs'>
diff --git a/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx b/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx
index fcd13c4d8c..ae59958a01 100644
--- a/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx
+++ b/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx
@@ -105,7 +105,7 @@ const VulsPanelContent = ({ agent }) => {
     const severityColor = severities[severity].color;
     return (
       <EuiFlexItem key={index}>
-        <EuiPanel paddingSize='s'>
+        <EuiPanel paddingSize='m'>
           <EuiFlexGroup className='h-100' gutterSize='none' alignItems='center'>
             <EuiFlexItem>
               <WzLink
@@ -126,6 +126,7 @@ const VulsPanelContent = ({ agent }) => {
                   value={`${getSeverityValue(severityLabel)}`}
                   color={severityColor}
                   isLoading={isLoading || isDataSourceLoading}
+                  textAlign='left'
                 />
               </WzLink>
             </EuiFlexItem>
diff --git a/plugins/main/public/components/common/welcome/dashboard/dashboard_panels.ts b/plugins/main/public/components/common/welcome/dashboard/dashboard_panels.ts
index 7d250e7d05..854fa3642b 100644
--- a/plugins/main/public/components/common/welcome/dashboard/dashboard_panels.ts
+++ b/plugins/main/public/components/common/welcome/dashboard/dashboard_panels.ts
@@ -122,7 +122,7 @@ export const getDashboardPanels = (
     '1': {
       gridData: {
         w: 48,
-        h: 12,
+        h: 7,
         x: 0,
         y: 0,
         i: '1',
diff --git a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.scss b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.scss
new file mode 100644
index 0000000000..86ebf18984
--- /dev/null
+++ b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.scss
@@ -0,0 +1,12 @@
+.wz-text-content {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  @media (max-width: 767px) {
+    max-width: none !important;
+    word-break: break-word;
+    white-space: normal;
+  }
+}
diff --git a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
index bb6de7006b..5ff4ab948d 100644
--- a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
+++ b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
@@ -11,87 +11,81 @@
  * Find more information about this on the LICENSE file.
  */
 
-import React, { Component } from 'react';
-
+import React, { useEffect, useRef, useState } from 'react';
 import { EuiToolTip } from '@elastic/eui';
+import './wz-text-with-tooltip-if-truncated.scss';
 
 interface WzTextWithTooltipIfTruncatedProps extends React.PropsWithChildren {
   tooltip?: string;
-  elementStyle?: React.CSSProperties;
+  contentStyle?: React.CSSProperties;
   tooltipProps?: object;
-  position?: string; // same options as EuiTooltip's position
 }
 
-export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTooltipIfTruncatedProps> {
-  state: {
-    withTooltip: boolean;
-  };
-  static defaultProps = {
-    elementStyle: {},
+const WzTextWithTooltipIfTruncated = (
+  props: WzTextWithTooltipIfTruncatedProps,
+) => {
+  const { contentStyle = {}, tooltip, tooltipProps, children } = props;
+  const [withTooltip, setWithTooltip] = useState(false);
+  const contentReference = useRef<HTMLElement>(null);
+
+  /**
+   * The function `createClone` creates a clone of an HTML element with specific
+   * styling properties.
+   * @param {HTMLElement} reference - The `reference` parameter in the `createClone`
+   * function is an HTMLElement that serves as the reference element from which a
+   * clone will be created.
+   * @returns The function `createClone` returns a clone of the provided
+   * `HTMLElement` reference with specific styles applied.
+   */
+  const createClone = (reference: HTMLElement) => {
+    // HTML element clone of reference
+    const clone = reference.cloneNode(true) as HTMLElement;
+    clone.style.display = 'inline';
+    clone.style.width = 'auto';
+    clone.style.visibility = 'hidden';
+    clone.style.maxWidth = 'none';
+    return clone;
   };
-  timer?: ReturnType<typeof setTimeout>;
-  reference: any;
-  constructor(props: WzTextWithTooltipIfTruncatedProps) {
-    super(props);
-    this.reference = React.createRef<HTMLSpanElement>();
-    this.state = {
-      withTooltip: false,
-    };
-  }
-  componentDidMount() {
-    this.timer = setTimeout(() => {
-      //TODO: remove timer and setTimeout function. It is needed while this component is mounted through the AngularJS react-component directive.
-      // HTML element reference with text (maybe truncated)
-      const reference = this.reference.current;
-      // HTML element clone of reference
-      const clone = reference.cloneNode(true);
-      clone.style.display = 'inline';
-      clone.style.width = 'auto';
-      clone.style.visibility = 'hidden';
-      clone.style.maxWidth = 'none';
-      // Insert clone in DOM appending as sibling of reference to measure both
-      // reference.parentNode.appendChild(clone);
-      // Insert clone in DOM as body child
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const reference = contentReference.current as HTMLElement;
+      const clone = createClone(reference);
       document.body.appendChild(clone);
-      // Compare widths
-      if (reference.offsetWidth < clone.offsetWidth) {
-        // Set withTooltip to true to render truncated element with a tooltip
-        this.setState({ withTooltip: true });
-      }
-      // Remove clone of DOM
+      setWithTooltip(reference.offsetWidth < clone.offsetWidth);
       clone.remove();
     });
-  }
-  componentWillUnmount() {
-    this.timer && clearTimeout(this.timer);
-  }
-  buildContent() {
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [children]);
+
+  const renderContent = () => {
     return (
       <span
-        ref={this.reference}
-        style={{
-          display: 'block',
-          overflow: 'hidden',
-          paddingBottom: '3px',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-          ...this.props.elementStyle,
-        }}
+        ref={contentReference}
+        className='wz-text-content'
+        style={contentStyle}
       >
-        {this.props.children || this.props.tooltip}
+        {children || tooltip}
       </span>
     );
-  }
-  render() {
-    return this.state.withTooltip ? (
-      <EuiToolTip
-        content={this.props.tooltip || this.props.children}
-        {...this.props.tooltipProps}
-      >
-        {this.buildContent()}
-      </EuiToolTip>
-    ) : (
-      this.buildContent()
-    );
-  }
-}
+  };
+
+  return withTooltip ? (
+    <EuiToolTip
+      content={tooltip || children}
+      {...tooltipProps}
+      anchorClassName='wz-width-100'
+    >
+      {renderContent()}
+    </EuiToolTip>
+  ) : (
+    renderContent()
+  );
+};
+
+export default React.memo(WzTextWithTooltipIfTruncated);
diff --git a/plugins/main/public/styles/common.scss b/plugins/main/public/styles/common.scss
index 31007c0175..569d184a89 100644
--- a/plugins/main/public/styles/common.scss
+++ b/plugins/main/public/styles/common.scss
@@ -1593,7 +1593,7 @@ kbn-dis.hide-filter-control .globalFilterGroup__branch {
   display: flex;
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
   .hide-agent-status {
     display: none;
   }