diff --git a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/content/content.tsx b/x-pack/solutions/observability/plugins/infra/public/components/asset_details/content/content.tsx
index 489bce8f69192..18a13672a8559 100644
--- a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/content/content.tsx
+++ b/x-pack/solutions/observability/plugins/infra/public/components/asset_details/content/content.tsx
@@ -94,12 +94,21 @@ const TabPanel = ({
 }) => {
   const { renderedTabsSet, activeTabId } = useTabSwitcherContext();
 
+  // The logs tab is a special case because it is not rendered in the DOM until it is clicked due to performance reasons.
+  if (activeWhen === ContentTabIds.LOGS && activeTabId === activeWhen) {
+    return <div data-test-subj={makeTabPanelDataTestSubj({ tabId: activeWhen })}>{children}</div>;
+  }
+
   return renderedTabsSet.current.has(activeWhen) ? (
     <div
       hidden={activeTabId !== activeWhen}
-      data-test-subj={`infraAssetDetails${capitalize(activeWhen)}TabContent`}
+      data-test-subj={makeTabPanelDataTestSubj({ tabId: activeWhen })}
     >
       {children}
     </div>
   ) : null;
 };
+
+function makeTabPanelDataTestSubj({ tabId }: { tabId: ContentTabIds }) {
+  return `infraAssetDetails${capitalize(tabId)}TabContent`;
+}
diff --git a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx b/x-pack/solutions/observability/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx
index 777e9a3332fa3..051eca7cc6db8 100644
--- a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx
+++ b/x-pack/solutions/observability/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx
@@ -7,7 +7,7 @@
 
 import createContainer from 'constate';
 import { useLazyRef } from '../../../hooks/use_lazy_ref';
-import type { TabIds } from '../types';
+import { ContentTabIds, type TabIds } from '../types';
 import { useAssetDetailsUrlState } from './use_asset_details_url_state';
 
 interface TabSwitcherParams {
@@ -23,8 +23,10 @@ export function useTabSwitcher({ defaultActiveTabId }: TabSwitcherParams) {
   const renderedTabsSet = useLazyRef(() => new Set([activeTabId]));
 
   const showTab = (tabId: TabIds, options?: { scrollTo?: string }) => {
-    // On a tab click, mark the tab content as allowed to be rendered
-    renderedTabsSet.current.add(tabId);
+    // On a tab click, mark the tab content as allowed to be rendered except for the logs tab.
+    if (tabId !== ContentTabIds.LOGS) {
+      renderedTabsSet.current.add(tabId);
+    }
 
     setUrlState({
       tabId: options?.scrollTo ? `${tabId}#${options?.scrollTo}` : tabId,
diff --git a/x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/components/tabs/tabs.tsx b/x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/components/tabs/tabs.tsx
index 3d7ee78723732..dc13cd19693b1 100644
--- a/x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/components/tabs/tabs.tsx
+++ b/x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/components/tabs/tabs.tsx
@@ -52,7 +52,13 @@ export const Tabs = () => {
       {...tab}
       key={index}
       onClick={() => {
-        renderedTabsSet.current.add(tab.id); // On a tab click, mark the tab content as allowed to be rendered
+        if (tab.id === selectedTabId) return;
+
+        // On a tab click, mark the tab content as allowed to be rendered except for the logs tab.
+        if (tab.id !== TabIds.LOGS) {
+          renderedTabsSet.current.add(tab.id);
+        }
+
         setSelectedTabId(tab.id);
       }}
       isSelected={tab.id === selectedTabId}
@@ -71,11 +77,7 @@ export const Tabs = () => {
           <MetricsGrid />
         </div>
       )}
-      {renderedTabsSet.current.has(TabIds.LOGS) && (
-        <div hidden={selectedTabId !== TabIds.LOGS}>
-          <LogsTabContent />
-        </div>
-      )}
+      {selectedTabId === TabIds.LOGS && <LogsTabContent />}
       {renderedTabsSet.current.has(TabIds.ALERTS) && (
         <div hidden={selectedTabId !== TabIds.ALERTS}>
           <AlertsTabContent />
diff --git a/x-pack/solutions/observability/plugins/infra/test/scout/ui/parallel_tests/inventory/host_asset_details_flyout.spec.ts b/x-pack/solutions/observability/plugins/infra/test/scout/ui/parallel_tests/inventory/host_asset_details_flyout.spec.ts
index 649c83e5be911..da5210cbed9ef 100644
--- a/x-pack/solutions/observability/plugins/infra/test/scout/ui/parallel_tests/inventory/host_asset_details_flyout.spec.ts
+++ b/x-pack/solutions/observability/plugins/infra/test/scout/ui/parallel_tests/inventory/host_asset_details_flyout.spec.ts
@@ -63,7 +63,7 @@ test.describe(
           assetDetailsPage.hostOverviewTab.kpiCpuUsageChart.getByRole('heading', {
             name: 'CPU Usage',
           })
-        ).toBeVisible();
+        ).toBeVisible({ timeout: EXTENDED_TIMEOUT });
         await expect(
           assetDetailsPage.hostOverviewTab.kpiNormalizedLoadChart.getByRole('heading', {
             name: 'Normalized Load',
@@ -400,6 +400,7 @@ test.describe(
       });
 
       await test.step('return to flyout from asset details page', async () => {
+        await expect(assetDetailsPage.returnButton).toBeVisible({ timeout: EXTENDED_TIMEOUT });
         await assetDetailsPage.returnButton.click();
         await expect(
           page.getByRole('dialog').getByRole('heading', { name: HOST1_NAME })