diff --git a/assets/js/pages/HostDetailsPage/HostDetails.jsx b/assets/js/pages/HostDetailsPage/HostDetails.jsx
index dec9920580..0038568cad 100644
--- a/assets/js/pages/HostDetailsPage/HostDetails.jsx
+++ b/assets/js/pages/HostDetailsPage/HostDetails.jsx
@@ -4,7 +4,6 @@ import classNames from 'classnames';
 import { EOS_CLEAR_ALL, EOS_PLAY_CIRCLE, EOS_SETTINGS } from 'eos-icons-react';
 
 import { agentVersionWarning } from '@lib/agent';
-import { getFromConfig } from '@lib/config';
 
 import BackButton from '@common/BackButton';
 import Button from '@common/Button';
@@ -64,6 +63,7 @@ function HostDetails({
   slesSubscriptions,
   catalog,
   lastExecution,
+  suseManagerEnabled,
   relevantPatches,
   upgradablePackages,
   softwareUpdatesLoading,
@@ -223,7 +223,7 @@ function HostDetails({
           </div>
         </div>
 
-        {getFromConfig('suseManagerEnabled') && (
+        {suseManagerEnabled && (
           <AvailableSoftwareUpdates
             className="mx-0 my-4"
             relevantPatches={relevantPatches}
diff --git a/assets/js/pages/HostDetailsPage/HostDetails.stories.jsx b/assets/js/pages/HostDetailsPage/HostDetails.stories.jsx
index 7046ba420c..82d7182d87 100644
--- a/assets/js/pages/HostDetailsPage/HostDetails.stories.jsx
+++ b/assets/js/pages/HostDetailsPage/HostDetails.stories.jsx
@@ -181,6 +181,11 @@ export const Default = {
         completed_at: faker.date.past().toISOString(),
       },
     },
+    suseManagerEnabled: false,
+    relevantPatches: 0,
+    upgradablePackages: 0,
+    softwareUpdatesLoading: false,
+    softwareUpdatesTooltip: undefined,
     selectedChecks: [],
     slesSubscriptions: host.sles_subscriptions,
   },
@@ -249,3 +254,30 @@ export const HostSummaryWithTooltip = {
     ipAddresses: Array.from({ length: 10 }, () => faker.internet.ipv4()),
   },
 };
+
+export const WithSuseManager = {
+  args: {
+    ...Default.args,
+    suseManagerEnabled: true,
+    relevantPatches: 123,
+    upgradablePackages: 456,
+  },
+};
+
+export const SuseManagerLoading = {
+  args: {
+    ...Default.args,
+    suseManagerEnabled: true,
+    softwareUpdatesLoading: true,
+  },
+};
+
+export const SuseManagerUnknown = {
+  args: {
+    ...Default.args,
+    suseManagerEnabled: true,
+    relevantPatches: undefined,
+    upgradablePackages: undefined,
+    softwareUpdatesTooltip: 'SUSE Manager is not available',
+  },
+};
diff --git a/assets/js/pages/HostDetailsPage/HostDetails.test.jsx b/assets/js/pages/HostDetailsPage/HostDetails.test.jsx
index cc84a67cfc..4923983ccf 100644
--- a/assets/js/pages/HostDetailsPage/HostDetails.test.jsx
+++ b/assets/js/pages/HostDetailsPage/HostDetails.test.jsx
@@ -176,7 +176,7 @@ describe('HostDetails component', () => {
     });
   });
 
-  describe('SUMA', () => {
+  describe('SUSE Manager', () => {
     it('should show the summary of SUMA software updates', () => {
       const relevantPatches = faker.number.int(100);
       const upgradablePackages = faker.number.int(100);
@@ -184,6 +184,7 @@ describe('HostDetails component', () => {
       renderWithRouter(
         <HostDetails
           agentVersion="2.0.0"
+          suseManagerEnabled
           relevantPatches={relevantPatches}
           upgradablePackages={upgradablePackages}
         />
@@ -211,6 +212,7 @@ describe('HostDetails component', () => {
       renderWithRouter(
         <HostDetails
           agentVersion="2.0.0"
+          suseManagerEnabled
           relevantPatches={relevantPatches}
           upgradablePackages={upgradablePackages}
         />
@@ -226,6 +228,31 @@ describe('HostDetails component', () => {
       expect(relevantPatchesElement).toHaveTextContent('Unknown');
       expect(upgradablePackagesElement).toHaveTextContent('Unknown');
     });
+
+    it('should show the summary of SUMA software updates in a loading state', () => {
+      const relevantPatches = faker.number.int(100);
+      const upgradablePackages = faker.number.int(100);
+
+      renderWithRouter(
+        <HostDetails
+          agentVersion="2.0.0"
+          suseManagerEnabled
+          softwareUpdatesLoading
+          relevantPatches={relevantPatches}
+          upgradablePackages={upgradablePackages}
+        />
+      );
+
+      const relevantPatchesElement = screen
+        .getByText(/Relevant Patches/)
+        .closest('div');
+      const upgradablePackagesElement = screen
+        .getByText(/Upgradable Packages/)
+        .closest('div');
+
+      expect(relevantPatchesElement).toHaveTextContent('Loading');
+      expect(upgradablePackagesElement).toHaveTextContent('Loading');
+    });
   });
 
   describe('last execution overview', () => {
diff --git a/assets/js/pages/HostDetailsPage/HostDetailsPage.jsx b/assets/js/pages/HostDetailsPage/HostDetailsPage.jsx
index 31841c8219..1e4935b15e 100644
--- a/assets/js/pages/HostDetailsPage/HostDetailsPage.jsx
+++ b/assets/js/pages/HostDetailsPage/HostDetailsPage.jsx
@@ -3,6 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { get } from 'lodash';
 
+import { getFromConfig } from '@lib/config';
 import { networkClient } from '@lib/network';
 
 import { TARGET_HOST } from '@lib/model';
@@ -28,8 +29,8 @@ import { deregisterHost } from '@state/hosts';
 import { fetchSoftwareUpdates } from '@state/softwareUpdates';
 import HostDetails from './HostDetails';
 
-// eslint-disable-next-line no-undef
-const { chartsEnabled } = config;
+const chartsEnabled = getFromConfig('chartsEnabled');
+const suseManagerEnabled = getFromConfig('suseManagerEnabled');
 
 function HostDetailsPage() {
   const { hostID } = useParams();
@@ -105,6 +106,8 @@ function HostDetailsPage() {
       selectedChecks={hostSelectedChecks}
       slesSubscriptions={host.sles_subscriptions}
       catalog={catalog}
+      lastExecution={lastExecution}
+      suseManagerEnabled={suseManagerEnabled}
       relevantPatches={numRelevantPatches}
       upgradablePackages={numUpgradablePackages}
       softwareUpdatesLoading={softwareUpdatesLoading}
@@ -113,7 +116,6 @@ function HostDetailsPage() {
           ? 'SUSE Manager is not available'
           : undefined
       }
-      lastExecution={lastExecution}
       cleanUpHost={() => {
         dispatch(
           deregisterHost({ id: hostID, hostname: host.hostname, navigate })