diff --git a/frontend/src/pages/ClusterManagement.tsx b/frontend/src/pages/ClusterManagement.tsx
index 599e7a5..3c4ded3 100644
--- a/frontend/src/pages/ClusterManagement.tsx
+++ b/frontend/src/pages/ClusterManagement.tsx
@@ -629,8 +629,18 @@ const ClusterManagement: React.FC = () => {
             {record.gadget_version && (
               needsUpgrade ? (
                 <Tooltip title={`Upgrade available: ${supportedGadgetVersion}. Click to view upgrade script.`}>
-                  <Typography.Text
-                    style={{ fontSize: '11px', color: '#fa8c16', cursor: 'pointer' }}
+                  <span
+                    style={{
+                      fontSize: '11px',
+                      color: '#fa8c16',
+                      cursor: 'pointer',
+                      border: '1px solid #ffd591',
+                      borderRadius: '10px',
+                      padding: '1px 8px',
+                      background: '#fff7e6',
+                      display: 'inline-block',
+                      lineHeight: '18px',
+                    }}
                     onClick={(e) => {
                       e.stopPropagation();
                       setUpgradeCluster(record);
@@ -645,8 +655,8 @@ const ClusterManagement: React.FC = () => {
                         });
                     }}
                   >
-                    {record.gadget_version} <ArrowUpOutlined style={{ fontSize: '10px' }} />
-                  </Typography.Text>
+                    {record.gadget_version} <ArrowUpOutlined style={{ fontSize: '9px' }} />
+                  </span>
                 </Tooltip>
               ) : (
                 <Typography.Text type="secondary" style={{ fontSize: '11px' }}>
diff --git a/frontend/src/pages/Dashboard/tabs/OperationsTab.tsx b/frontend/src/pages/Dashboard/tabs/OperationsTab.tsx
index 9231809..da94294 100644
--- a/frontend/src/pages/Dashboard/tabs/OperationsTab.tsx
+++ b/frontend/src/pages/Dashboard/tabs/OperationsTab.tsx
@@ -269,9 +269,21 @@ const OperationsTab: React.FC<OperationsTabProps> = ({ clusterId, analysisId })
                       }
                       return needsUpgrade ? (
                         <Tooltip title={`Upgrade available: ${supportedGadgetVersion}. Go to Cluster Management to upgrade.`}>
-                          <Text style={{ marginLeft: 8, fontSize: 12, color: '#fa8c16' }}>
-                            {currentCluster.gadget_version} <ArrowUpOutlined style={{ fontSize: 10 }} />
-                          </Text>
+                          <span
+                            style={{
+                              marginLeft: 8,
+                              fontSize: 11,
+                              color: '#fa8c16',
+                              cursor: 'pointer',
+                              border: '1px solid #ffd591',
+                              borderRadius: 10,
+                              padding: '1px 8px',
+                              background: '#fff7e6',
+                              lineHeight: '18px',
+                            }}
+                          >
+                            {currentCluster.gadget_version} <ArrowUpOutlined style={{ fontSize: 9 }} />
+                          </span>
                         </Tooltip>
                       ) : (
                         <Text type="secondary" style={{ marginLeft: 8 }}>