diff --git a/ui/src/components/lib/tabs-panel/tabs-panel.tsx b/ui/src/components/lib/tabs-panel/tabs-panel.tsx
index 4d44e52082..196451dcfb 100644
--- a/ui/src/components/lib/tabs-panel/tabs-panel.tsx
+++ b/ui/src/components/lib/tabs-panel/tabs-panel.tsx
@@ -47,23 +47,25 @@ export const TabsPanel = <T extends boolean = false>({
       <PanelHeader className={cn(styles.tabsPanel, className)} transparent={mode === 'plain'}>
         <Tabs>
           {content.map((tab) => (
-            <TabsItem
-              key={tab.id}
-              aria-controls={tab.ariaControls}
-              before={tab.before}
-              disabled={tab.disabled}
-              id={tab.id}
-              selected={tab.id === selectedId}
-              status={tab.status}
-              onClick={() => onTabClick(tab.id)}
-            >
-              {t(tab.title)}
-            </TabsItem>
+            <ConditionalRender key={tab.id} conditions={[!tab.disabled]}>
+              <TabsItem
+                key={tab.id}
+                aria-controls={tab.ariaControls}
+                before={tab.before}
+                disabled={tab.disabled}
+                id={tab.id}
+                selected={tab.id === selectedId}
+                status={tab.status}
+                onClick={() => onTabClick(tab.id)}
+              >
+                {t(tab.title)}
+              </TabsItem>
+            </ConditionalRender>
           ))}
         </Tabs>
       </PanelHeader>
       {content.map((tab) => (
-        <ConditionalRender key={tab.id} conditions={[tab.id === selectedId]}>
+        <ConditionalRender key={tab.id} conditions={[tab.id === selectedId, !tab.disabled]}>
           <Group
             aria-controls={tab.ariaControls}
             aria-labelledby={tab.id}