diff --git a/src/renderer/components/cluster-manager/bottom-bar.scss b/src/renderer/components/cluster-manager/bottom-bar.scss
index 0a73bbacbb..a40146ad97 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.scss
+++ b/src/renderer/components/cluster-manager/bottom-bar.scss
@@ -17,4 +17,16 @@
       cursor: pointer;
     }
   }
+
+  .extensions {
+    font-size: var(--font-size-small);
+    color: white;
+    .item {
+      padding: $padding / 4 $padding / 2;
+      &:hover {
+        background-color: #ffffff33;
+        cursor: pointer;
+      }
+    }
+  }
 }
diff --git a/src/renderer/components/cluster-manager/bottom-bar.tsx b/src/renderer/components/cluster-manager/bottom-bar.tsx
index 55a5aba81c..cc79de800e 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.tsx
+++ b/src/renderer/components/cluster-manager/bottom-bar.tsx
@@ -23,7 +23,7 @@ export class BottomBar extends React.Component {
         <div className="extensions box grow flex gaps justify-flex-end">
           {statusBarRegistry.getItems().map(({ item }, index) => {
             if (!item) return;
-            return <React.Fragment key={index}>{item}</React.Fragment>;
+            return <div className="flex align-center gaps item" key={index}>{item}</div>;
           })}
         </div>
       </div>