diff --git a/assets/js/components/HostDetails/HostDetails.jsx b/assets/js/components/HostDetails/HostDetails.jsx
index 88bdd5a78b..3f2a02dc4f 100644
--- a/assets/js/components/HostDetails/HostDetails.jsx
+++ b/assets/js/components/HostDetails/HostDetails.jsx
@@ -17,9 +17,11 @@ import DeregistrationModal from '@components/DeregistrationModal';
 import { canStartExecution } from '@components/ChecksSelection';
 
 import SuseLogo from '@static/suse_logo.svg';
+import ChecksComingSoon from '@static/checks-coming-soon.svg';
 
 import StatusPill from './StatusPill';
 import ProviderDetails from './ProviderDetails';
+import SaptuneSummary from './SaptuneSummary';
 
 import {
   subscriptionsTableConfiguration,
@@ -36,10 +38,12 @@ function HostDetails({
   heartbeat,
   hostID,
   hostname,
+  ipAddresses = [],
   provider,
   providerData,
   sapInstances,
   savingChecks,
+  saptuneStatus = {},
   selectedChecks = [],
   slesSubscriptions,
   cleanUpHost,
@@ -50,6 +54,12 @@ function HostDetails({
 
   const versionWarningMessage = agentVersionWarning(agentVersion);
 
+  const {
+    package_version: saptuneVersion,
+    configured_version: saptuneConfiguredVersion,
+    tuning_state: saptuneTuning,
+  } = saptuneStatus;
+
   const renderedExporters = Object.entries(exportersStatus).map(
     ([exporterName, exporterStatus]) => (
       <StatusPill
@@ -140,18 +150,39 @@ function HostDetails({
         {versionWarningMessage && (
           <WarningBanner>{versionWarningMessage}</WarningBanner>
         )}
-        <div className="mt-4 bg-white shadow rounded-lg py-4 px-8">
-          <ListView
-            orientation="vertical"
-            data={[
-              { title: 'Name', content: hostname },
-              {
-                title: 'Cluster',
-                content: <ClusterLink cluster={cluster} />,
-              },
-              { title: 'Agent version', content: agentVersion },
-            ]}
-          />
+        <div className="flex xl:flex-row flex-col">
+          <div className="mt-4 bg-white shadow rounded-lg py-4 px-8 xl:w-2/5 mr-4">
+            <ListView
+              className="grid-rows-3"
+              orientation="vertical"
+              data={[
+                {
+                  title: 'Cluster',
+                  content: <ClusterLink cluster={cluster} />,
+                },
+                { title: 'Agent Version', content: agentVersion },
+                { title: 'IP addresses', content: ipAddresses.join(',') },
+              ]}
+            />
+          </div>
+          <div className="flex flex-col mt-4 bg-white shadow rounded-lg pt-8 px-8 xl:w-2/5 mr-4">
+            <SaptuneSummary
+              saptuneVersion={saptuneVersion}
+              saptuneConfiguredVersion={saptuneConfiguredVersion}
+              saptuneTuning={saptuneTuning}
+            />
+          </div>
+          <div className="mt-4 bg-white shadow rounded-lg py-4 xl:w-1/4">
+            <div className="flex flex-col items-center h-full">
+              <h1 className="text-center text-2xl font-bold">Check Results</h1>
+              <h6 className="opacity-60 text-xs">Coming soon for Hosts</h6>
+              <img
+                className="h-full inline-block align-middle"
+                alt="checks coming soon"
+                src={ChecksComingSoon}
+              />
+            </div>
+          </div>
         </div>
         <div className="mt-8 bg-white shadow rounded-lg py-4 px-8">
           <iframe
diff --git a/assets/js/components/HostDetails/HostDetails.stories.jsx b/assets/js/components/HostDetails/HostDetails.stories.jsx
index ae3ae38815..7b3469f6dc 100644
--- a/assets/js/components/HostDetails/HostDetails.stories.jsx
+++ b/assets/js/components/HostDetails/HostDetails.stories.jsx
@@ -83,6 +83,10 @@ export default {
         type: { summary: 'string' },
       },
     },
+    ipAddresses: {
+      control: { type: 'array' },
+      description: 'IP addresses',
+    },
     provider: {
       control: 'string',
       description: 'The discovered CSP where the host is running',
@@ -98,6 +102,10 @@ export default {
       control: { type: 'array' },
       description: 'SAP systems running on the host',
     },
+    saptuneStatus: {
+      control: 'object',
+      description: 'Saptune status data',
+    },
     savingChecks: {
       control: { type: 'boolean' },
       description: 'The checks are being saved',
@@ -151,10 +159,16 @@ export const Default = {
     heartbeat: host.heartbeat,
     hostID: host.id,
     hostname: host.hostname,
+    ipAddresses: host.ip_addresses,
     provider: host.provider,
     providerData: host.provider_data,
     sapInstances,
     savingChecks: false,
+    saptuneStatus: {
+      package_version: '3.1.0',
+      configured_version: '3',
+      tuning_state: 'no tuning',
+    },
     selectedChecks: [],
     slesSubscriptions: host.sles_subscriptions,
   },
@@ -180,3 +194,25 @@ export const ChecksSelected = {
     selectedChecks: ['some-check'],
   },
 };
+
+export const SaptuneNotInstalled = {
+  args: {
+    ...Default.args,
+    saptuneStatus: {
+      package_version: null,
+      configured_version: null,
+      tuning_state: null,
+    },
+  },
+};
+
+export const SaptuneOldVersion = {
+  args: {
+    ...Default.args,
+    saptuneStatus: {
+      package_version: '3.0.0',
+      configured_version: null,
+      tuning_state: null,
+    },
+  },
+};
diff --git a/assets/js/components/HostDetails/HostDetails.test.jsx b/assets/js/components/HostDetails/HostDetails.test.jsx
index 449150cee4..59ad8b8a8b 100644
--- a/assets/js/components/HostDetails/HostDetails.test.jsx
+++ b/assets/js/components/HostDetails/HostDetails.test.jsx
@@ -6,7 +6,7 @@ import '@testing-library/jest-dom';
 import { faker } from '@faker-js/faker';
 
 import { renderWithRouter } from '@lib/test-utils';
-import { hostFactory } from '@lib/test-utils/factories';
+import { hostFactory, saptuneStatusFactory } from '@lib/test-utils/factories';
 
 import HostDetails from './HostDetails';
 
@@ -132,4 +132,31 @@ describe('HostDetails component', () => {
       expect(mockCleanUp).toHaveBeenCalled();
     });
   });
+
+  describe('saptune', () => {
+    it('should show the summary of saptune', () => {
+      const saptuneStatus = saptuneStatusFactory.build();
+      const {
+        package_version: packageVersion,
+        configured_version: configuredVersion,
+        tuning_state: tuningState,
+      } = saptuneStatus;
+
+      renderWithRouter(
+        <HostDetails agentVersion="2.0.0" saptuneStatus={saptuneStatus} />
+      );
+
+      expect(screen.getByText('Package').nextSibling).toHaveTextContent(
+        packageVersion
+      );
+
+      expect(
+        screen.getByText('Configured Version').nextSibling
+      ).toHaveTextContent(configuredVersion);
+
+      expect(screen.getByText('Tunning').nextSibling).toHaveTextContent(
+        new RegExp(tuningState, 'i')
+      );
+    });
+  });
 });
diff --git a/assets/js/components/HostDetails/HostDetailsPage.jsx b/assets/js/components/HostDetails/HostDetailsPage.jsx
index f774c09e53..be9499071e 100644
--- a/assets/js/components/HostDetails/HostDetailsPage.jsx
+++ b/assets/js/components/HostDetails/HostDetailsPage.jsx
@@ -63,9 +63,11 @@ function HostDetailsPage() {
       heartbeat={host.heartbeat}
       hostID={host.id}
       hostname={host.hostname}
+      ipAddresses={host.ip_addresses}
       provider={host.provider}
       providerData={host.provider_data}
       sapInstances={sapInstances}
+      saptuneStatus={{}}
       savingChecks={saving}
       selectedChecks={hostSelectedChecks}
       slesSubscriptions={host.sles_subscriptions}
diff --git a/assets/js/components/HostDetails/SaptuneSummary.jsx b/assets/js/components/HostDetails/SaptuneSummary.jsx
new file mode 100644
index 0000000000..dc9ded767b
--- /dev/null
+++ b/assets/js/components/HostDetails/SaptuneSummary.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { isVersionSupported } from '@lib/saptune';
+
+import Button from '@components/Button';
+import ListView from '@components/ListView';
+import { SaptuneVersion, SaptuneTuningState } from '@components/SaptuneDetails';
+
+function SaptuneSummary({
+  saptuneVersion,
+  saptuneConfiguredVersion,
+  saptuneTuning,
+}) {
+  return (
+    <>
+      <div className="flex justify-between mb-2">
+        <h1 className="text-2xl font-bold">Saptune Summary</h1>
+        <Button
+          type="primary-white-fit"
+          className="border-green-500 border"
+          size="small"
+          disabled={!isVersionSupported(saptuneVersion)}
+        >
+          View Details
+        </Button>
+      </div>
+      <ListView
+        className="grid-rows-2"
+        orientation="vertical"
+        data={[
+          {
+            title: 'Package',
+            content: <SaptuneVersion version={saptuneVersion} />,
+          },
+          {
+            title: 'Tunning',
+            content: <SaptuneTuningState state={saptuneTuning} />,
+          },
+          {
+            title: 'Configured Version',
+            content: saptuneConfiguredVersion || '-',
+          },
+        ]}
+      />
+    </>
+  );
+}
+
+export default SaptuneSummary;
diff --git a/assets/js/components/HostDetails/SaptuneSummary.test.jsx b/assets/js/components/HostDetails/SaptuneSummary.test.jsx
new file mode 100644
index 0000000000..aa07192228
--- /dev/null
+++ b/assets/js/components/HostDetails/SaptuneSummary.test.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import 'intersection-observer';
+import '@testing-library/jest-dom';
+
+import { SUPPORTED_VERSION } from '@lib/saptune';
+import { saptuneStatusFactory } from '@lib/test-utils/factories';
+
+import SaptuneSummary from './SaptuneSummary';
+
+describe('SaptuneSummary component', () => {
+  it('should show the summary of saptune', () => {
+    const saptuneStatus = saptuneStatusFactory.build();
+    const {
+      package_version: packageVersion,
+      configured_version: configuredVersion,
+      tuning_state: tuningState,
+    } = saptuneStatus;
+
+    render(
+      <SaptuneSummary
+        saptuneVersion={packageVersion}
+        saptuneConfiguredVersion={configuredVersion}
+        saptuneTuning={tuningState}
+      />
+    );
+
+    expect(screen.getByText('Package').nextSibling).toHaveTextContent(
+      packageVersion
+    );
+
+    expect(
+      screen.getByText('Configured Version').nextSibling
+    ).toHaveTextContent(configuredVersion);
+
+    expect(screen.getByText('Tunning').nextSibling).toHaveTextContent(
+      new RegExp(tuningState, 'i')
+    );
+  });
+
+  it('should enable saptune details button', () => {
+    render(<SaptuneSummary saptuneVersion={SUPPORTED_VERSION} />);
+
+    expect(
+      screen.getByRole('button', {
+        name: 'View Details',
+      })
+    ).toBeEnabled();
+  });
+
+  it('should disable saptune details button', () => {
+    render(<SaptuneSummary saptuneVersion="3.0.0" />);
+
+    expect(
+      screen.getByRole('button', {
+        name: 'View Details',
+      })
+    ).toBeDisabled();
+  });
+});
diff --git a/assets/js/components/SaptuneDetails/SaptuneTuningState.jsx b/assets/js/components/SaptuneDetails/SaptuneTuningState.jsx
new file mode 100644
index 0000000000..3ebb11df64
--- /dev/null
+++ b/assets/js/components/SaptuneDetails/SaptuneTuningState.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import HealthIcon from '@components/Health/HealthIcon';
+
+function SaptuneTuningState({ state }) {
+  switch (state) {
+    case 'compliant':
+      return 'Compliant';
+    case 'not compliant':
+      return (
+        <div className="flex">
+          <HealthIcon health="critical" />
+          <span className="ml-1">Not compliant</span>
+        </div>
+      );
+    case 'no tuning':
+      return (
+        <div className="flex">
+          <HealthIcon health="warning" />
+          <span className="ml-1">No tuning</span>
+        </div>
+      );
+    default:
+      return <span>-</span>;
+  }
+}
+
+export default SaptuneTuningState;
diff --git a/assets/js/components/SaptuneDetails/SaptuneTuningState.test.jsx b/assets/js/components/SaptuneDetails/SaptuneTuningState.test.jsx
new file mode 100644
index 0000000000..3ab754e290
--- /dev/null
+++ b/assets/js/components/SaptuneDetails/SaptuneTuningState.test.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import SaptuneTuningState from './SaptuneTuningState';
+
+describe('SpatuneTuningState', () => {
+  it.each([
+    { state: 'compliant', text: 'Compliant', iconClass: null },
+    {
+      state: 'not compliant',
+      text: 'Not compliant',
+      iconClass: 'fill-red-500',
+    },
+    { state: 'no tuning', text: 'No tuning', iconClass: 'fill-yellow-500' },
+    { state: null, text: '-', icon: null },
+  ])(
+    'should render correctly the $state state',
+    ({ state, text, iconClass }) => {
+      render(<SaptuneTuningState state={state} />);
+
+      expect(screen.getByText(text)).toBeTruthy();
+
+      if (iconClass) {
+        const icon = screen.getByTestId('eos-svg-component');
+        expect(icon).toHaveClass(iconClass);
+      }
+    }
+  );
+});
diff --git a/assets/js/components/SaptuneDetails/SaptuneVersion.jsx b/assets/js/components/SaptuneDetails/SaptuneVersion.jsx
new file mode 100644
index 0000000000..abcc457207
--- /dev/null
+++ b/assets/js/components/SaptuneDetails/SaptuneVersion.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { isVersionSupported, SUPPORTED_VERSION } from '@lib/saptune';
+
+import Tooltip from '@components/Tooltip';
+import HealthIcon from '@components/Health/HealthIcon';
+
+function SaptuneVersion({ version }) {
+  if (!version) {
+    return <span>Not installed</span>;
+  }
+
+  if (isVersionSupported(version)) {
+    return <span>{version}</span>;
+  }
+
+  return (
+    <div className="flex">
+      <Tooltip
+        content={`Saptune version not supported. Minimum supported version is ${SUPPORTED_VERSION}`}
+        place="bottom"
+      >
+        <HealthIcon health="warning" />
+      </Tooltip>
+      <span className="ml-1">{version}</span>
+    </div>
+  );
+}
+
+export default SaptuneVersion;
diff --git a/assets/js/components/SaptuneDetails/SaptuneVersion.test.jsx b/assets/js/components/SaptuneDetails/SaptuneVersion.test.jsx
new file mode 100644
index 0000000000..b20caeaa7b
--- /dev/null
+++ b/assets/js/components/SaptuneDetails/SaptuneVersion.test.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import SaptuneVersion from './SaptuneVersion';
+
+describe('SaptuneVersion', () => {
+  it.each([
+    { version: null, text: 'Not installed', iconCss: null },
+    { version: '3.0.0', text: '3.0.0', iconCss: 'fill-yellow-500' },
+    { version: '3.1.0', text: '3.1.0', iconCss: null },
+  ])(
+    'should render correctly the $version version',
+    ({ version, text, iconClass }) => {
+      render(<SaptuneVersion version={version} />);
+
+      expect(screen.getByText(text)).toBeTruthy();
+
+      if (iconClass) {
+        const icon = screen.getByTestId('eos-svg-component');
+        expect(icon).toHaveClass(iconClass);
+      }
+    }
+  );
+});
diff --git a/assets/js/components/SaptuneDetails/index.js b/assets/js/components/SaptuneDetails/index.js
new file mode 100644
index 0000000000..fa223e1b66
--- /dev/null
+++ b/assets/js/components/SaptuneDetails/index.js
@@ -0,0 +1,4 @@
+import SaptuneTuningState from './SaptuneTuningState';
+import SaptuneVersion from './SaptuneVersion';
+
+export { SaptuneTuningState, SaptuneVersion };
diff --git a/assets/js/lib/saptune/index.js b/assets/js/lib/saptune/index.js
new file mode 100644
index 0000000000..2da0ed475b
--- /dev/null
+++ b/assets/js/lib/saptune/index.js
@@ -0,0 +1,6 @@
+import semver from 'semver';
+
+export const SUPPORTED_VERSION = '3.1.0';
+
+export const isVersionSupported = (saptuneVersion) =>
+  semver.gte(saptuneVersion || '0.0.0', SUPPORTED_VERSION);
diff --git a/assets/js/lib/saptune/saptune.test.js b/assets/js/lib/saptune/saptune.test.js
new file mode 100644
index 0000000000..28d0d49710
--- /dev/null
+++ b/assets/js/lib/saptune/saptune.test.js
@@ -0,0 +1,20 @@
+import { isVersionSupported } from '.';
+
+describe('saptune', () => {
+  it.each([
+    {
+      version: '3.0.0',
+      expected: false,
+    },
+    {
+      version: '3.1.0',
+      expected: true,
+    },
+  ])(
+    'should return if the saptune version is supported',
+    ({ version, expected }) => {
+      const warning = isVersionSupported(version);
+      expect(warning).toBe(expected);
+    }
+  );
+});
diff --git a/assets/js/lib/test-utils/factories/hosts.js b/assets/js/lib/test-utils/factories/hosts.js
index 14f1f20d28..bf3da75541 100644
--- a/assets/js/lib/test-utils/factories/hosts.js
+++ b/assets/js/lib/test-utils/factories/hosts.js
@@ -20,6 +20,9 @@ export const cloudProviderEnum = () =>
 const heartbeatEnum = () =>
   faker.helpers.arrayElement(['unknown', 'critical', 'passing']);
 
+const saptuneTuningStateEnum = () =>
+  faker.helpers.arrayElement(['compliant', 'not compliant', 'no tuning']);
+
 export const slesSubscriptionFactory = Factory.define(() => ({
   arch: 'x86_64',
   expires_at: day(faker.date.future()).format(slesSubscriptionDateFormat),
@@ -34,6 +37,14 @@ export const slesSubscriptionFactory = Factory.define(() => ({
   version: '15.3',
 }));
 
+export const saptuneStatusFactory = Factory.define(() => ({
+  package_version: faker.helpers.fake(
+    '{{datatype.number}}.{{datatype.number}}.{{datatype.number}}'
+  ),
+  configured_version: faker.datatype.number(),
+  tuning_state: saptuneTuningStateEnum(),
+}));
+
 export const hostFactory = Factory.define(({ params, sequence }) => {
   const id = params.id || faker.datatype.uuid();
 
@@ -58,5 +69,6 @@ export const hostFactory = Factory.define(({ params, sequence }) => {
     sles_subscriptions: slesSubscriptionFactory.buildList(4, { host_id: id }),
     deregisterable: false,
     selected_checks: [],
+    saptune_status: saptuneStatusFactory.build(),
   };
 });
diff --git a/test/e2e/cypress/e2e/host_details.cy.js b/test/e2e/cypress/e2e/host_details.cy.js
index ece2c61a8c..b9bef88142 100644
--- a/test/e2e/cypress/e2e/host_details.cy.js
+++ b/test/e2e/cypress/e2e/host_details.cy.js
@@ -19,18 +19,25 @@ context('Host Details', () => {
         .should('eq', 'page');
     });
 
-    it('should show the host I clicked on in the overview', () => {
-      cy.get('.grid-flow-col > :nth-child(1) > :nth-child(2) > span').should(
-        'contain',
-        selectedHost.hostName
-      );
+    it('should show the correct cluster', () => {
+      cy.get('div')
+        .contains(/Cluster$/)
+        .next()
+        .should('contain', selectedHost.clusterName);
     });
 
     it('should show the correct agent version', () => {
-      cy.get('.grid-flow-col > :nth-child(3) > :nth-child(2) > span').should(
-        'contain',
-        selectedHost.agentVersion
-      );
+      cy.get('div')
+        .contains(/Agent Version$/)
+        .next()
+        .should('contain', selectedHost.agentVersion);
+    });
+
+    it('should show the correct IP addresses', () => {
+      cy.get('div')
+        .contains(/IP addresses$/)
+        .next()
+        .should('contain', selectedHost.ipAddresses);
     });
   });
 
diff --git a/test/e2e/cypress/fixtures/host-details/selected_host.js b/test/e2e/cypress/fixtures/host-details/selected_host.js
index 2dc814f4af..6d3fe3921e 100644
--- a/test/e2e/cypress/fixtures/host-details/selected_host.js
+++ b/test/e2e/cypress/fixtures/host-details/selected_host.js
@@ -4,6 +4,7 @@ export const selectedHost = {
   hostName: 'vmhdbprd01',
   clusterName: 'hana_cluster_3',
   clusterId: '469e7be5-4e20-5007-b044-c6f540a87493',
+  ipAddresses: '10.80.1.11,10.80.1.13',
   azureCloudDetails: {
     provider: 'Azure',
     vmName: 'vmhdbprd01',