diff --git a/src/renderer/components/layout/sidebar.module.css b/src/renderer/components/layout/sidebar.module.css
index cf1257627f..2dbdf3d759 100644
--- a/src/renderer/components/layout/sidebar.module.css
+++ b/src/renderer/components/layout/sidebar.module.css
@@ -42,7 +42,19 @@
 }
 
 .cluster {
-  @apply flex items-center m-5;
+  display: flex;
+  align-items: center;
+  padding: 1.25rem;
+  cursor: pointer;
+
+  &:focus-visible {
+    background: var(--blue);
+    color: white;
+  }
+
+  &:hover {
+    background: var(--sidebarLogoBackground);
+  }
 }
 
 .clusterName {
diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index f89b06e6d4..6b661c955f 100644
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/src/renderer/components/layout/sidebar.tsx
@@ -206,7 +206,7 @@ export class Sidebar extends React.Component<Props> {
     const { metadata, spec } = this.clusterEntity;
 
     return (
-      <div className={styles.cluster}>
+      <div className={styles.cluster} tabIndex={0}>
         <HotbarIcon
           uid={metadata.uid}
           title={metadata.name}
@@ -232,6 +232,7 @@ export class Sidebar extends React.Component<Props> {
         <div className={styles.clusterName}>
           {metadata.name}
         </div>
+        <Icon material="arrow_drop_down"/>
       </div>
     );
   }