diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/out_of_date.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/out_of_date.tsx
index 0546c57b38268..d65cfc0cd397b 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/out_of_date.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/out_of_date.tsx
@@ -11,8 +11,14 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 export const OutOfDate = React.memo<{ style?: React.CSSProperties }>(({ style, ...otherProps }) => {
   return (
-    <EuiText color="subdued" size="xs" className="eui-textNoWrap" style={style} {...otherProps}>
-      <EuiIcon size="m" type="alert" color="warning" />
+    <EuiText
+      color="subdued"
+      size="xs"
+      className="eui-textNoWrap eui-displayInlineBlock"
+      style={style}
+      {...otherProps}
+    >
+      <EuiIcon className={'eui-alignTop'} size="m" type="alert" color="warning" />
       <FormattedMessage id="xpack.securitySolution.outOfDateLabel" defaultMessage="Out-of-date" />
     </EuiText>
   );
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/endpoint_details_tabs.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/endpoint_details_tabs.tsx
index adae21b55a637..4c0e1b799a6be 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/endpoint_details_tabs.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/endpoint_details_tabs.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { memo, useMemo } from 'react';
-import { EuiTab, EuiTabs, EuiFlyoutBody, EuiSpacer } from '@elastic/eui';
+import { EuiTab, EuiTabs, EuiFlyoutBody } from '@elastic/eui';
 import { EndpointIndexUIQueryParams } from '../../../types';
 
 import { EndpointDetailsFlyoutHeader } from './flyout_header';
@@ -68,7 +68,6 @@ export const EndpointDetailsFlyoutTabs = memo(
     return (
       <>
         <EndpointDetailsFlyoutHeader hostname={hostname} hasBorder>
-          <EuiSpacer size="s" />
           <EuiTabs style={{ marginBottom: '-25px' }}>{renderTabs}</EuiTabs>
         </EndpointDetailsFlyoutHeader>
         <EuiFlyoutBody data-test-subj="endpointDetailsFlyoutBody">
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/flyout_header.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/flyout_header.tsx
index f791c0d6adf17..3c8cdf6bf3183 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/flyout_header.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/flyout_header.tsx
@@ -28,7 +28,7 @@ export const EndpointDetailsFlyoutHeader = memo(
           <EuiLoadingContent lines={1} />
         ) : (
           <EuiToolTip content={hostname} anchorClassName="eui-textTruncate">
-            <EuiTitle>
+            <EuiTitle size="s">
               <h2
                 style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
                 data-test-subj="endpointDetailsFlyoutTitle"
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details_content.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details_content.tsx
index cb920bdbd1b03..0d43c47b8cef9 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details_content.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details_content.tsx
@@ -8,8 +8,6 @@
 import styled from 'styled-components';
 import {
   EuiDescriptionList,
-  EuiListGroup,
-  EuiListGroupItem,
   EuiText,
   EuiFlexGroup,
   EuiFlexItem,
@@ -19,26 +17,35 @@ import {
 } from '@elastic/eui';
 import React, { memo, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
 import { isPolicyOutOfDate } from '../../utils';
 import { HostInfo, HostMetadata, HostStatus } from '../../../../../../common/endpoint/types';
 import { useEndpointSelector } from '../hooks';
 import { policyResponseStatus, uiQueryParams } from '../../store/selectors';
 import { POLICY_STATUS_TO_BADGE_COLOR } from '../host_constants';
-import { FormattedDateAndTime } from '../../../../../common/components/endpoint/formatted_date_time';
+import { FormattedDate } from '../../../../../common/components/formatted_date';
 import { useNavigateByRouterEventHandler } from '../../../../../common/hooks/endpoint/use_navigate_by_router_event_handler';
 import { getEndpointDetailsPath } from '../../../../common/routing';
 import { EndpointPolicyLink } from '../components/endpoint_policy_link';
 import { OutOfDate } from '../components/out_of_date';
 import { EndpointAgentStatus } from '../components/endpoint_agent_status';
 
-const HostIds = styled(EuiListGroupItem)`
-  margin-top: 0;
-  .euiListGroupItem__text {
-    padding: 0;
+const EndpointDetailsContentStyled = styled.div`
+  dl dt {
+    max-width: 220px;
+  }
+  .policyLineText {
+    padding-right: 5px;
   }
 `;
 
+const ColumnTitle = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <EuiText size="s">
+      <h5>{children}</h5>
+    </EuiText>
+  );
+};
+
 export const EndpointDetailsContent = memo(
   ({
     details,
@@ -70,83 +77,96 @@ export const EndpointDetailsContent = memo(
     const detailsResults = useMemo(() => {
       return [
         {
-          title: i18n.translate('xpack.securitySolution.endpoint.details.os', {
-            defaultMessage: 'OS',
-          }),
-          description: <EuiText>{details.host.os.full}</EuiText>,
+          title: (
+            <ColumnTitle>
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.details.os"
+                defaultMessage="OS"
+              />
+            </ColumnTitle>
+          ),
+          description: <EuiText size="xs">{details.host.os.full}</EuiText>,
         },
         {
-          title: i18n.translate('xpack.securitySolution.endpoint.details.agentStatus', {
-            defaultMessage: 'Agent Status',
-          }),
+          title: (
+            <ColumnTitle>
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.details.agentStatus"
+                defaultMessage="Agent Status"
+              />
+            </ColumnTitle>
+          ),
           description: <EndpointAgentStatus hostStatus={hostStatus} endpointMetadata={details} />,
         },
         {
-          title: i18n.translate('xpack.securitySolution.endpoint.details.lastSeen', {
-            defaultMessage: 'Last Seen',
-          }),
+          title: (
+            <ColumnTitle>
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.details.lastSeen"
+                defaultMessage="Last Seen"
+              />
+            </ColumnTitle>
+          ),
           description: (
-            <EuiText>
-              {' '}
-              <FormattedDateAndTime date={new Date(details['@timestamp'])} />
+            <EuiText size="xs">
+              <FormattedDate value={details['@timestamp']} fieldName="" />
             </EuiText>
           ),
         },
         {
-          title: i18n.translate('xpack.securitySolution.endpoint.details.policy', {
-            defaultMessage: 'Policy',
-          }),
+          title: (
+            <ColumnTitle>
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.details.policy"
+                defaultMessage="Policy"
+              />
+            </ColumnTitle>
+          ),
           description: (
-            <EuiFlexGroup alignItems="center">
-              <EuiFlexItem grow={false}>
-                <EuiText>
-                  <EndpointPolicyLink
-                    policyId={details.Endpoint.policy.applied.id}
-                    data-test-subj="policyDetailsValue"
-                  >
-                    {details.Endpoint.policy.applied.name}
-                  </EndpointPolicyLink>
+            <EuiText size="xs" className={'eui-textBreakWord'}>
+              <EndpointPolicyLink
+                policyId={details.Endpoint.policy.applied.id}
+                data-test-subj="policyDetailsValue"
+                className={'policyLineText'}
+              >
+                {details.Endpoint.policy.applied.name}
+              </EndpointPolicyLink>
+              {details.Endpoint.policy.applied.endpoint_policy_version && (
+                <EuiText
+                  color="subdued"
+                  size="xs"
+                  className={'eui-displayInlineBlock eui-textNoWrap policyLineText'}
+                  data-test-subj="policyDetailsRevNo"
+                >
+                  <FormattedMessage
+                    id="xpack.securitySolution.endpoint.details.policy.revisionNumber"
+                    defaultMessage="rev. {revNumber}"
+                    values={{
+                      revNumber: details.Endpoint.policy.applied.endpoint_policy_version,
+                    }}
+                  />
                 </EuiText>
-              </EuiFlexItem>
-              <EuiFlexGroup gutterSize="s" alignItems="baseline">
-                {details.Endpoint.policy.applied.endpoint_policy_version && (
-                  <EuiFlexItem grow={false}>
-                    <EuiText
-                      color="subdued"
-                      size="xs"
-                      style={{ whiteSpace: 'nowrap' }}
-                      data-test-subj="policyDetailsRevNo"
-                    >
-                      <FormattedMessage
-                        id="xpack.securitySolution.endpoint.details.policy.revisionNumber"
-                        defaultMessage="rev. {revNumber}"
-                        values={{
-                          revNumber: details.Endpoint.policy.applied.endpoint_policy_version,
-                        }}
-                      />
-                    </EuiText>
-                  </EuiFlexItem>
-                )}
-                {isPolicyOutOfDate(details.Endpoint.policy.applied, policyInfo) && (
-                  <EuiFlexItem grow={false}>
-                    <OutOfDate />
-                  </EuiFlexItem>
-                )}
-              </EuiFlexGroup>
-            </EuiFlexGroup>
+              )}
+              {isPolicyOutOfDate(details.Endpoint.policy.applied, policyInfo) && <OutOfDate />}
+            </EuiText>
           ),
         },
         {
-          title: i18n.translate('xpack.securitySolution.endpoint.details.policyStatus', {
-            defaultMessage: 'Policy Status',
-          }),
+          title: (
+            <ColumnTitle>
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.details.policyStatus"
+                defaultMessage="Policy Status"
+              />
+            </ColumnTitle>
+          ),
           description: (
             <EuiHealth
               data-test-subj={`policyStatusValue-${policyStatus}`}
               color={POLICY_STATUS_TO_BADGE_COLOR[policyStatus] || 'default'}
             >
               <EuiLink onClick={policyStatusClickHandler} data-test-subj="policyStatusValue">
-                <EuiText size="m">
+                <EuiText size="xs">
                   <FormattedMessage
                     id="xpack.securitySolution.endpoint.details.policyStatusValue"
                     defaultMessage="{policyStatus, select, success {Success} warning {Warning} failure {Failed} other {Unknown}}"
@@ -158,37 +178,48 @@ export const EndpointDetailsContent = memo(
           ),
         },
         {
-          title: i18n.translate('xpack.securitySolution.endpoint.details.endpointVersion', {
-            defaultMessage: 'Endpoint Version',
-          }),
-          description: <EuiText>{details.agent.version}</EuiText>,
+          title: (
+            <ColumnTitle>
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.details.endpointVersion"
+                defaultMessage="Endpoint Version"
+              />
+            </ColumnTitle>
+          ),
+          description: <EuiText size="xs">{details.agent.version}</EuiText>,
         },
         {
-          title: i18n.translate('xpack.securitySolution.endpoint.details.ipAddress', {
-            defaultMessage: 'IP Address',
-          }),
+          title: (
+            <ColumnTitle>
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.details.ipAddress"
+                defaultMessage="IP Address"
+              />
+            </ColumnTitle>
+          ),
           description: (
-            <EuiListGroup flush>
-              <EuiText size="xs">
-                {details.host.ip.map((ip: string, index: number) => (
-                  <HostIds key={index} label={ip} />
-                ))}
-              </EuiText>
-            </EuiListGroup>
+            <EuiFlexGroup direction="column" gutterSize="s">
+              {details.host.ip.map((ip: string, index: number) => (
+                <EuiFlexItem key={index}>
+                  <EuiText size="xs">{ip}</EuiText>
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGroup>
           ),
         },
       ];
     }, [details, hostStatus, policyStatus, policyStatusClickHandler, policyInfo]);
 
     return (
-      <>
-        <EuiSpacer size="l" />
+      <EndpointDetailsContentStyled>
+        <EuiSpacer size="s" />
         <EuiDescriptionList
+          compressed={true}
           type="column"
           listItems={detailsResults}
           data-test-subj="endpointDetailsList"
         />
-      </>
+      </EndpointDetailsContentStyled>
     );
   }
 );