diff --git a/packages/core/src/features/application-update/child-features/application-update-using-top-bar/__snapshots__/installing-update-using-topbar-button.test.tsx.snap b/packages/core/src/features/application-update/child-features/application-update-using-top-bar/__snapshots__/installing-update-using-topbar-button.test.tsx.snap
index b162aa2645..95cc6ea202 100644
--- a/packages/core/src/features/application-update/child-features/application-update-using-top-bar/__snapshots__/installing-update-using-topbar-button.test.tsx.snap
+++ b/packages/core/src/features/application-update/child-features/application-update-using-top-bar/__snapshots__/installing-update-using-topbar-button.test.tsx.snap
@@ -189,22 +189,41 @@ exports[`encourage user to update when sufficient time passed since update was d
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
diff --git a/packages/core/src/features/application-update/child-features/force-update/__snapshots__/force-update.test.ts.snap b/packages/core/src/features/application-update/child-features/force-update/__snapshots__/force-update.test.ts.snap
index f6831abe11..c17a4e572f 100644
--- a/packages/core/src/features/application-update/child-features/force-update/__snapshots__/force-update.test.ts.snap
+++ b/packages/core/src/features/application-update/child-features/force-update/__snapshots__/force-update.test.ts.snap
@@ -500,22 +500,41 @@ exports[`force user to update when too long since update was downloaded when app
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -858,22 +877,41 @@ exports[`force user to update when too long since update was downloaded when app
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
diff --git a/packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap
index 6ae0d91f41..75ea5eda8a 100644
--- a/packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap
@@ -56,16 +56,31 @@ exports[`legacy extension adding cluster frame components given custom component
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap
index faf31e0cd7..09df84dae3 100644
--- a/packages/core/src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap
@@ -56,16 +56,31 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -659,16 +674,31 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
index 3f79b3e219..864064afab 100644
--- a/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
@@ -56,16 +56,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -632,16 +647,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -1208,16 +1238,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -1804,16 +1849,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -2278,16 +2338,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -2731,16 +2806,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -3327,16 +3417,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
index 3ad0ba73e9..8e4484eaa6 100644
--- a/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
@@ -56,16 +56,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -632,16 +647,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -1208,16 +1238,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -1820,16 +1865,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -2351,16 +2411,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -2882,16 +2957,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -3376,16 +3466,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -3988,16 +4093,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -4564,16 +4684,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
index 78c7646b7e..5b06a5ee2f 100644
--- a/packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
@@ -56,16 +56,31 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -604,16 +619,31 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
index 7e07408ae0..73c1e7ef1e 100644
--- a/packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
@@ -57,16 +57,31 @@ exports[`workload overview when navigating to workload overview renders 1`] = `
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/delete-dialog/__snapshots__/delete-cluster-dialog.test.tsx.snap b/packages/core/src/features/cluster/delete-dialog/__snapshots__/delete-cluster-dialog.test.tsx.snap
index fdef983669..ad7dc692d9 100644
--- a/packages/core/src/features/cluster/delete-dialog/__snapshots__/delete-cluster-dialog.test.tsx.snap
+++ b/packages/core/src/features/cluster/delete-dialog/__snapshots__/delete-cluster-dialog.test.tsx.snap
@@ -263,7 +263,7 @@ exports[`Deleting a cluster when an internal kubeconfig cluster is used when the
                   <div
                     class="info-panel box grow"
                   >
-                    0 items
+                    3 items
                   </div>
                   <div
                     class="Input SearchInput"
@@ -419,12 +419,264 @@ exports[`Deleting a cluster when an internal kubeconfig cluster is used when the
                       </div>
                     </div>
                     <div
-                      class="NoItems flex box grow"
+                      class="VirtualList Catalog box grow dark"
                     >
-                      <div
-                        class="box center"
-                      >
-                        Item list is empty
+                      <div>
+                        <div
+                          class="list"
+                          style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
+                        >
+                          <div
+                            style="height: 99px; width: 100%;"
+                          >
+                            <div
+                              style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="view_list"
+                                      >
+                                        view_list
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Catalog
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Remove from Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-catalog-entity"
+                                      id="menu-actions-for-catalog-for-catalog-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="meeting_room"
+                                      >
+                                        meeting_room
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Welcome Page
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Add to Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-welcome-page-entity"
+                                      id="menu-actions-for-catalog-for-welcome-page-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              style="position: absolute; left: 0px; top: 66px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="settings"
+                                      >
+                                        settings
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Preferences
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Add to Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-preferences-entity"
+                                      id="menu-actions-for-catalog-for-preferences-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -447,22 +699,41 @@ exports[`Deleting a cluster when an internal kubeconfig cluster is used when the
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar active"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -888,7 +1159,7 @@ exports[`Deleting a cluster when the kubeconfig has multiple clusters when the d
                   <div
                     class="info-panel box grow"
                   >
-                    0 items
+                    3 items
                   </div>
                   <div
                     class="Input SearchInput"
@@ -1044,12 +1315,264 @@ exports[`Deleting a cluster when the kubeconfig has multiple clusters when the d
                       </div>
                     </div>
                     <div
-                      class="NoItems flex box grow"
+                      class="VirtualList Catalog box grow dark"
                     >
-                      <div
-                        class="box center"
-                      >
-                        Item list is empty
+                      <div>
+                        <div
+                          class="list"
+                          style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
+                        >
+                          <div
+                            style="height: 99px; width: 100%;"
+                          >
+                            <div
+                              style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="view_list"
+                                      >
+                                        view_list
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Catalog
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Remove from Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-catalog-entity"
+                                      id="menu-actions-for-catalog-for-catalog-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="meeting_room"
+                                      >
+                                        meeting_room
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Welcome Page
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Add to Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-welcome-page-entity"
+                                      id="menu-actions-for-catalog-for-welcome-page-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              style="position: absolute; left: 0px; top: 66px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="settings"
+                                      >
+                                        settings
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Preferences
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Add to Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-preferences-entity"
+                                      id="menu-actions-for-catalog-for-preferences-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -1072,22 +1595,41 @@ exports[`Deleting a cluster when the kubeconfig has multiple clusters when the d
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar active"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1546,7 +2088,7 @@ exports[`Deleting a cluster when the kubeconfig has multiple clusters when the d
                   <div
                     class="info-panel box grow"
                   >
-                    0 items
+                    3 items
                   </div>
                   <div
                     class="Input SearchInput"
@@ -1702,12 +2244,264 @@ exports[`Deleting a cluster when the kubeconfig has multiple clusters when the d
                       </div>
                     </div>
                     <div
-                      class="NoItems flex box grow"
+                      class="VirtualList Catalog box grow dark"
                     >
-                      <div
-                        class="box center"
-                      >
-                        Item list is empty
+                      <div>
+                        <div
+                          class="list"
+                          style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
+                        >
+                          <div
+                            style="height: 99px; width: 100%;"
+                          >
+                            <div
+                              style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="view_list"
+                                      >
+                                        view_list
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Catalog
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Remove from Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-catalog-entity"
+                                      id="menu-actions-for-catalog-for-catalog-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="meeting_room"
+                                      >
+                                        meeting_room
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Welcome Page
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Add to Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-welcome-page-entity"
+                                      id="menu-actions-for-catalog-for-welcome-page-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              style="position: absolute; left: 0px; top: 66px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="settings"
+                                      >
+                                        settings
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Preferences
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Add to Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-preferences-entity"
+                                      id="menu-actions-for-catalog-for-preferences-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -1730,22 +2524,41 @@ exports[`Deleting a cluster when the kubeconfig has multiple clusters when the d
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar active"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -2283,7 +3096,7 @@ exports[`Deleting a cluster when the kubeconfig has multiple clusters when the d
                   <div
                     class="info-panel box grow"
                   >
-                    0 items
+                    3 items
                   </div>
                   <div
                     class="Input SearchInput focused"
@@ -2439,12 +3252,264 @@ exports[`Deleting a cluster when the kubeconfig has multiple clusters when the d
                       </div>
                     </div>
                     <div
-                      class="NoItems flex box grow"
+                      class="VirtualList Catalog box grow dark"
                     >
-                      <div
-                        class="box center"
-                      >
-                        Item list is empty
+                      <div>
+                        <div
+                          class="list"
+                          style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
+                        >
+                          <div
+                            style="height: 99px; width: 100%;"
+                          >
+                            <div
+                              style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="view_list"
+                                      >
+                                        view_list
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Catalog
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Remove from Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-catalog-entity"
+                                      id="menu-actions-for-catalog-for-catalog-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="meeting_room"
+                                      >
+                                        meeting_room
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Welcome Page
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Add to Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-welcome-page-entity"
+                                      id="menu-actions-for-catalog-for-welcome-page-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              style="position: absolute; left: 0px; top: 66px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="settings"
+                                      >
+                                        settings
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Preferences
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Add to Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-preferences-entity"
+                                      id="menu-actions-for-catalog-for-preferences-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -2467,22 +3532,41 @@ exports[`Deleting a cluster when the kubeconfig has multiple clusters when the d
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar active"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -3020,7 +4104,7 @@ exports[`Deleting a cluster when the kubeconfig has only one cluster when the di
                   <div
                     class="info-panel box grow"
                   >
-                    0 items
+                    3 items
                   </div>
                   <div
                     class="Input SearchInput"
@@ -3176,12 +4260,264 @@ exports[`Deleting a cluster when the kubeconfig has only one cluster when the di
                       </div>
                     </div>
                     <div
-                      class="NoItems flex box grow"
+                      class="VirtualList Catalog box grow dark"
                     >
-                      <div
-                        class="box center"
-                      >
-                        Item list is empty
+                      <div>
+                        <div
+                          class="list"
+                          style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
+                        >
+                          <div
+                            style="height: 99px; width: 100%;"
+                          >
+                            <div
+                              style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="view_list"
+                                      >
+                                        view_list
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Catalog
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Remove from Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-catalog-entity"
+                                      id="menu-actions-for-catalog-for-catalog-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="meeting_room"
+                                      >
+                                        meeting_room
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Welcome Page
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Add to Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-welcome-page-entity"
+                                      id="menu-actions-for-catalog-for-welcome-page-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              style="position: absolute; left: 0px; top: 66px; height: 33px; width: 100%;"
+                            >
+                              <div
+                                class="TableRow nowrap"
+                              >
+                                <div
+                                  class="TableCell entityName"
+                                >
+                                  <div
+                                    class="Avatar rounded catalogAvatar"
+                                    style="width: 24px; height: 24px; background: rgb(61, 144, 206);"
+                                  >
+                                    <i
+                                      class="Icon material focusable small"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="settings"
+                                      >
+                                        settings
+                                      </span>
+                                    </i>
+                                  </div>
+                                  <span>
+                                    Preferences
+                                  </span>
+                                  <i
+                                    class="Icon pinIcon svg interactive focusable small"
+                                    tabindex="0"
+                                  >
+                                    <span
+                                      class="icon"
+                                    />
+                                  </i>
+                                  <div>
+                                    Add to Hotbar
+                                  </div>
+                                </div>
+                                <div
+                                  class="TableCell"
+                                >
+                                  General
+                                </div>
+                                <div
+                                  class="TableCell sourceCell"
+                                >
+                                  app
+                                </div>
+                                <div
+                                  class="TableCell labelsCell scrollable"
+                                />
+                                <div
+                                  class="TableCell statusCell"
+                                >
+                                  <span
+                                    class="active"
+                                  >
+                                    active
+                                  </span>
+                                </div>
+                                <div
+                                  class="TableCell menu"
+                                >
+                                  <div>
+                                    <i
+                                      class="Icon material interactive focusable"
+                                      data-testid="icon-for-menu-actions-for-catalog-for-preferences-entity"
+                                      id="menu-actions-for-catalog-for-preferences-entity"
+                                      tabindex="0"
+                                    >
+                                      <span
+                                        class="icon"
+                                        data-icon-name="more_vert"
+                                      >
+                                        more_vert
+                                      </span>
+                                    </i>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -3204,22 +4540,41 @@ exports[`Deleting a cluster when the kubeconfig has only one cluster when the di
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar active"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
diff --git a/packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap
index df94d42877..29e91d105e 100644
--- a/packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap
@@ -57,16 +57,31 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -485,16 +500,31 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1035,16 +1065,31 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given not yet known
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap
index 0faccf1aaa..cf71d60356 100644
--- a/packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap
@@ -57,16 +57,31 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -625,16 +640,31 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1175,16 +1205,31 @@ exports[`disable sidebar items when cluster is not relevant given not yet known
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
index 885e96a26f..a6ea1e4ed5 100644
--- a/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
@@ -127,16 +127,31 @@ exports[`disable kube object detail items when cluster is not relevant given ext
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -742,16 +757,31 @@ exports[`disable kube object detail items when cluster is not relevant given ext
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1357,16 +1387,31 @@ exports[`disable kube object detail items when cluster is not relevant given not
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap b/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
index a1c528bf78..db90f28c62 100644
--- a/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
+++ b/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
@@ -122,16 +122,31 @@ exports[`reactively hide kube object detail item renders 1`] = `
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -742,16 +757,31 @@ exports[`reactively hide kube object detail item when the item is shown renders
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/kube-object-menu/extension-api/__snapshots__/disable-kube-object-menu-items-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/kube-object-menu/extension-api/__snapshots__/disable-kube-object-menu-items-when-cluster-is-not-relevant.test.tsx.snap
index f1f1bb8490..934e818f14 100644
--- a/packages/core/src/features/cluster/kube-object-menu/extension-api/__snapshots__/disable-kube-object-menu-items-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/kube-object-menu/extension-api/__snapshots__/disable-kube-object-menu-items-when-cluster-is-not-relevant.test.tsx.snap
@@ -57,16 +57,31 @@ exports[`disable kube object menu items when cluster is not relevant given exten
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -490,16 +505,31 @@ exports[`disable kube object menu items when cluster is not relevant given exten
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -917,16 +947,31 @@ exports[`disable kube object menu items when cluster is not relevant given not y
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/kube-object-status-icon/__snapshots__/show-status-for-a-kube-object.test.tsx.snap b/packages/core/src/features/cluster/kube-object-status-icon/__snapshots__/show-status-for-a-kube-object.test.tsx.snap
index 0105bb93ee..d493c9b256 100644
--- a/packages/core/src/features/cluster/kube-object-status-icon/__snapshots__/show-status-for-a-kube-object.test.tsx.snap
+++ b/packages/core/src/features/cluster/kube-object-status-icon/__snapshots__/show-status-for-a-kube-object.test.tsx.snap
@@ -57,16 +57,31 @@ exports[`show status for a kube object given application starts and in test page
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -479,16 +494,31 @@ exports[`show status for a kube object given application starts and in test page
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -941,16 +971,31 @@ exports[`show status for a kube object given application starts and in test page
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1403,16 +1448,31 @@ exports[`show status for a kube object given application starts and in test page
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1825,16 +1885,31 @@ exports[`show status for a kube object given application starts and in test page
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -2247,16 +2322,31 @@ exports[`show status for a kube object given application starts and in test page
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/kube-object-status-icon/extension-api/__snapshots__/disable-kube-object-statuses-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/kube-object-status-icon/extension-api/__snapshots__/disable-kube-object-statuses-when-cluster-is-not-relevant.test.tsx.snap
index 56d42fced8..35600a4c4c 100644
--- a/packages/core/src/features/cluster/kube-object-status-icon/extension-api/__snapshots__/disable-kube-object-statuses-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/kube-object-status-icon/extension-api/__snapshots__/disable-kube-object-statuses-when-cluster-is-not-relevant.test.tsx.snap
@@ -57,16 +57,31 @@ exports[`disable kube object statuses when cluster is not relevant given extensi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -519,16 +534,31 @@ exports[`disable kube object statuses when cluster is not relevant given extensi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -941,16 +971,31 @@ exports[`disable kube object statuses when cluster is not relevant given not yet
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-new-tab.test.tsx.snap b/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-new-tab.test.tsx.snap
index 832ee400c8..5c61bb948b 100644
--- a/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-new-tab.test.tsx.snap
+++ b/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-new-tab.test.tsx.snap
@@ -57,16 +57,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -735,16 +750,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1418,16 +1448,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -2170,16 +2215,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -2900,16 +2960,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -3702,16 +3777,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -4506,16 +4596,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -5272,16 +5377,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -6033,16 +6153,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -6785,16 +6920,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -7537,16 +7687,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -8289,16 +8454,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -8876,16 +9056,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -9637,16 +9832,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -10389,16 +10599,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -10976,16 +11201,31 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap b/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap
index 1612e1d052..db577c0193 100644
--- a/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap
+++ b/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap
@@ -57,16 +57,31 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -642,16 +657,31 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap
index 1b29e79e6b..594c2b4d25 100644
--- a/packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap
@@ -57,16 +57,31 @@ exports[`disable workloads overview details when cluster is not relevant given e
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -612,16 +627,31 @@ exports[`disable workloads overview details when cluster is not relevant given e
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1162,16 +1192,31 @@ exports[`disable workloads overview details when cluster is not relevant given n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap b/packages/core/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap
index a4db82c3c4..0066bc1859 100644
--- a/packages/core/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/packages/core/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -287,309 +287,147 @@ exports[`extensions - navigation using application menu renders 1`] = `
 exports[`extensions - navigation using application menu when navigating to extensions using application menu renders 1`] = `
 <div>
   <div
-    class="ClusterManager"
+    class="ErrorBoundary flex column gaps"
   >
+    <h5>
+      App crash at 
+      <span
+        class="contrast"
+      >
+        /
+      </span>
+    </h5>
+    <p>
+      To help us improve the product please report bugs to 
+      <a
+        href="https://k8slens.dev/slack.html"
+        rel="noreferrer"
+        target="_blank"
+      >
+        Slack
+      </a>
+       community or 
+      <a
+        href="https://github.com/lensapp/lens/issues"
+        rel="noreferrer"
+        target="_blank"
+      >
+        Github
+      </a>
+       issues tracker.
+    </p>
     <div
-      class="topBar"
+      class="wrapper"
     >
-      <div
-        class="items"
+      <code
+        class="block"
       >
-        <div
-          class="preventedDragging"
+        <p
+          class="contrast"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-        </div>
-        <div
-          class="size-sm"
-        />
-        <div
-          class="preventedDragging"
+          Component stack:
+        </p>
+        
+    at main
+    at div
+    at NonInjectedClusterManager (/Users/sebastianmalton/repos/lens/packages/core/src/renderer/components/cluster-manager/cluster-manager.tsx:31:1)
+    at NonInjectedErrorBoundary (/Users/sebastianmalton/repos/lens/packages/core/src/renderer/components/error-boundary/error-boundary.tsx:72:9)
+    at Component
+    at children (/Users/sebastianmalton/repos/lens/node_modules/mobx-react-lite/src/ObserverComponent.ts:8:30)
+    at NonInjectedRootFrame (/Users/sebastianmalton/repos/lens/packages/core/src/renderer/frames/root-frame/root-frame.tsx:18:1)
+    at Router (/Users/sebastianmalton/repos/lens/node_modules/react-router/cjs/react-router.js:283:30)
+      </code>
+      <code
+        class="block"
+      >
+        <p
+          class="contrast"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-        </div>
-        <div
-          class="size-sm"
-        />
-        <div
-          class="preventedDragging"
-        >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-        </div>
-        <div
-          class="separator"
-        />
-      </div>
+          Error stack:
+        </p>
+        Error: Tried to inject non-registered injectable "renderer" -&gt; "NonInjectedExtensions" -&gt; "confirm-uninstall-extension" -&gt; "uninstall-extension" -&gt; "remove-extension-files" -&gt; "remove-extension-symlink-by-name" -&gt; "get-extension-install-path".
+    at E (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:5290)
+    at /Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:1494
+    at Object.inject (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:5056)
+    at Object.inject (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:3948)
+    at inject (/Users/sebastianmalton/repos/lens/packages/core/src/features/extensions/discovery/common/remove-extension-symlink-by-name.injectable.ts:21:40)
+    at instantiateToBeDecorated (/Users/sebastianmalton/repos/lens/packages/core/src/features/telemetry/renderer/telemetry-decorator.injectable.ts:37:30)
+    at /Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:4674
+    at y (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:4223)
+    at /Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:1702
+    at Object.inject (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:5056)
+    at Object.inject (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:3948)
+    at inject (/Users/sebastianmalton/repos/lens/packages/core/src/features/extensions/discovery/common/uninstall-extension.injectable.ts:24:45)
+    at instantiateToBeDecorated (/Users/sebastianmalton/repos/lens/packages/core/src/features/telemetry/renderer/telemetry-decorator.injectable.ts:37:30)
+    at /Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:4674
+    at y (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:4223)
+    at /Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:1702
+    at Object.inject (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:5056)
+    at Object.inject (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:3948)
+    at inject (/Users/sebastianmalton/repos/lens/packages/core/src/renderer/components/+extensions/uninstall-extension.injectable.tsx:29:37)
+    at instantiateToBeDecorated (/Users/sebastianmalton/repos/lens/packages/core/src/features/telemetry/renderer/telemetry-decorator.injectable.ts:37:30)
+    at /Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:4674
+    at y (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:4223)
+    at /Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:1702
+    at Object.inject (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:5056)
+    at Object.inject (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:3948)
+    at inject (/Users/sebastianmalton/repos/lens/packages/core/src/renderer/components/+extensions/confirm-uninstall-extension.injectable.tsx:50:28)
+    at instantiateToBeDecorated (/Users/sebastianmalton/repos/lens/packages/core/src/features/telemetry/renderer/telemetry-decorator.injectable.ts:37:30)
+    at /Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:4674
+    at y (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:4223)
+    at /Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:1702
+    at Object.inject (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:5056)
+    at Object.inject (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable/build/index.js:1:3354)
+    at Object.inject (/Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable-react/build/index.js:1:1284)
+    at inject (/Users/sebastianmalton/repos/lens/packages/core/src/renderer/components/+extensions/extensions.tsx:135:35)
+    at /Users/sebastianmalton/repos/lens/node_modules/@ogre-tools/injectable-react/build/index.js:1:1265
+    at updateContextConsumer (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:18747:19)
+    at beginWork (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:19114:14)
+    at HTMLUnknownElement.callCallback (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
+    at HTMLUnknownElement.callTheUserObjectsOperation (/Users/sebastianmalton/repos/lens/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
+    at innerInvokeEventListeners (/Users/sebastianmalton/repos/lens/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:340:25)
+    at invokeEventListeners (/Users/sebastianmalton/repos/lens/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
+    at HTMLUnknownElementImpl._dispatch (/Users/sebastianmalton/repos/lens/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
+    at HTMLUnknownElementImpl.dispatchEvent (/Users/sebastianmalton/repos/lens/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
+    at HTMLUnknownElement.dispatchEvent (/Users/sebastianmalton/repos/lens/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
+    at Object.invokeGuardedCallbackDev (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
+    at invokeGuardedCallback (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
+    at beginWork$1 (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
+    at performUnitOfWork (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
+    at workLoopSync (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
+    at renderRootSync (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
+    at performSyncWorkOnRoot (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
+    at /Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:11327:26
+    at unstable_runWithPriority (/Users/sebastianmalton/repos/lens/node_modules/scheduler/cjs/scheduler.development.js:468:12)
+    at runWithPriority$1 (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
+    at flushSyncCallbackQueueImpl (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:11322:9)
+    at flushSyncCallbackQueue (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:11309:3)
+    at batchedUpdates$1 (/Users/sebastianmalton/repos/lens/node_modules/react-dom/cjs/react-dom.development.js:22387:7)
+    at fn (/Users/sebastianmalton/repos/lens/node_modules/mobx/src/core/reaction.ts:270:30)
+    at reactionScheduler (/Users/sebastianmalton/repos/lens/node_modules/mobx/src/core/reaction.ts:237:5)
+    at runReactions (/Users/sebastianmalton/repos/lens/node_modules/mobx/src/core/observable.ts:112:9)
+    at endBatch (/Users/sebastianmalton/repos/lens/node_modules/mobx/src/core/action.ts:142:5)
+    at _endAction (/Users/sebastianmalton/repos/lens/node_modules/mobx/src/core/action.ts:74:9)
+    at executeAction (/Users/sebastianmalton/repos/lens/node_modules/mobx/src/api/action.ts:85:12)
+    at /Users/sebastianmalton/repos/lens/packages/core/src/renderer/routes/navigate-to-url.injectable.ts:25:18
+    at instance (/Users/sebastianmalton/repos/lens/packages/core/src/features/telemetry/renderer/telemetry-decorator.injectable.ts:49:24)
+    at Object.navigateToUrl [as handler] (/Users/sebastianmalton/repos/lens/packages/core/src/renderer/navigation/navigation-channel-listener.injectable.ts:29:9)
+    at handler (/Users/sebastianmalton/repos/lens/packages/core/src/test-utils/channel-fakes/override-messaging-from-main-to-window.ts:76:54)
+    at Set.forEach (&lt;anonymous&gt;)
+    at forEach (/Users/sebastianmalton/repos/lens/packages/core/src/test-utils/channel-fakes/override-messaging-from-main-to-window.ts:76:23)
+    at Object.sendToWindow [as send] (/Users/sebastianmalton/repos/lens/packages/core/src/renderer/components/test-utils/get-application-builder.tsx:274:9)
+    at Object.send (/Users/sebastianmalton/repos/lens/packages/core/src/main/start-main-application/lens-window/application-window/create-lens-window.injectable.ts:137:32)
+    at send (/Users/sebastianmalton/repos/lens/packages/core/src/main/start-main-application/lens-window/navigate.injectable.ts:37:25)
+    at /Users/sebastianmalton/repos/lens/packages/core/src/main/navigate-to-url/navigate-to-url.injectable.ts:16:7
+    at /Users/sebastianmalton/repos/lens/packages/core/src/main/navigate-to-route/navigate-to-route.injectable.ts:24:7
+      </code>
     </div>
-    <main>
-      <div
-        id="lens-views"
-      />
-      <div
-        class="SettingLayout DropFileInput Extensions"
-        data-testid="extensions-page"
-      >
-        <div
-          class="contentRegion"
-          id="ScrollSpyRoot"
-        >
-          <div
-            class="content"
-          >
-            <section>
-              <h1>
-                Extensions
-              </h1>
-              <div
-                class="notice"
-              >
-                <p>
-                  Add new features via Lens Extensions. Check out the 
-                  <a
-                    href="https://docs.k8slens.dev/extensions/"
-                    rel="noreferrer"
-                    target="_blank"
-                  >
-                    docs
-                  </a>
-                   and list of 
-                  <a
-                    href="https://github.com/lensapp/lens-extensions/blob/main/README.md"
-                    rel="noreferrer"
-                    target="_blank"
-                  >
-                    available extensions
-                  </a>
-                  .
-                </p>
-              </div>
-              <section>
-                <div
-                  class="SubTitle"
-                >
-                  Name or file path or URL to an extension package (tar, tgz)
-                   
-                </div>
-                <div
-                  class="inputs"
-                >
-                  <div />
-                  <div>
-                    <button
-                      class="Button button primary"
-                      data-waiting="false"
-                      type="button"
-                    >
-                      Install
-                    </button>
-                  </div>
-                </div>
-                <small
-                  class="proTip"
-                >
-                  <b>
-                    Pro-Tip
-                  </b>
-                  : you can drag and drop a tarball file to this area
-                </small>
-              </section>
-              <div
-                class="size-md"
-              />
-              <div>
-                <div
-                  class="Spinner singleColor center"
-                />
-              </div>
-            </section>
-          </div>
-          <div
-            class="toolsRegion"
-          >
-            <div
-              class="fixed top-[60px]"
-            >
-              <div>
-                <div
-                  aria-label="Close"
-                  class="closeButton"
-                  role="button"
-                >
-                  <i
-                    class="Icon icon material focusable"
-                  >
-                    <span
-                      class="icon"
-                      data-icon-name="close"
-                    >
-                      close
-                    </span>
-                  </i>
-                </div>
-                <div
-                  aria-hidden="true"
-                  class="esc"
-                >
-                  ESC
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-    <div
-      class="HotbarMenu flex column"
+    <button
+      class="Button box self-flex-start primary"
+      type="button"
     >
-      <div
-        class="HotbarItems flex column gaps"
-      >
-        <div
-          class="HotbarCell isDraggingOwner animateDown"
-          index="0"
-        >
-          <div
-            style="z-index: 12; position: absolute;"
-          >
-            <div
-              class="HotbarIcon contextMenuAvailable"
-            >
-              <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
-              >
-                Ca
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="HotbarCell isDraggingOwner animateDown"
-          index="1"
-        />
-        <div
-          class="HotbarCell isDraggingOwner animateDown"
-          index="2"
-        />
-        <div
-          class="HotbarCell isDraggingOwner animateDown"
-          index="3"
-        />
-        <div
-          class="HotbarCell isDraggingOwner animateDown"
-          index="4"
-        />
-        <div
-          class="HotbarCell isDraggingOwner animateDown"
-          index="5"
-        />
-        <div
-          class="HotbarCell isDraggingOwner animateDown"
-          index="6"
-        />
-        <div
-          class="HotbarCell isDraggingOwner animateDown"
-          index="7"
-        />
-        <div
-          class="HotbarCell isDraggingOwner animateDown"
-          index="8"
-        />
-        <div
-          class="HotbarCell isDraggingOwner animateDown"
-          index="9"
-        />
-        <div
-          class="HotbarCell isDraggingOwner animateDown"
-          index="10"
-        />
-        <div
-          class="HotbarCell isDraggingOwner animateDown"
-          index="11"
-        />
-      </div>
-      <div
-        class="HotbarSelector"
-      >
-        <i
-          class="Icon Icon previous material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="arrow_left"
-          >
-            arrow_left
-          </span>
-        </i>
-        <div
-          class="HotbarIndex"
-        >
-          <div
-            class="badge Badge small clickable"
-            id="hotbarIndex"
-          >
-            1
-          </div>
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="arrow_right"
-          >
-            arrow_right
-          </span>
-        </i>
-      </div>
-    </div>
-    <div
-      class="StatusBar"
-      data-testid="status-bar"
-    >
-      <div
-        class="leftSide"
-        data-testid="status-bar-left"
-      />
-      <div
-        class="rightSide"
-        data-testid="status-bar-right"
-      />
-    </div>
+      Back
+    </button>
   </div>
   <div
     class="Notifications flex column align-flex-end"
diff --git a/packages/core/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap b/packages/core/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
index 7932686bbf..5fb310162e 100644
--- a/packages/core/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
+++ b/packages/core/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
@@ -6409,22 +6409,41 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -7444,22 +7463,41 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -8298,22 +8336,41 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -9037,22 +9094,41 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -9776,22 +9852,41 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  id="hotbarIcon-catalog-entity"
+                  style="width: 40px; height: 40px; background: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
diff --git a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
index 04fb109fc6..d2760f8bd3 100644
--- a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
+++ b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
@@ -57,16 +57,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -526,16 +541,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1479,16 +1509,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -2277,16 +2322,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -3319,16 +3379,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -4335,16 +4410,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -5346,16 +5436,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -6357,16 +6462,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -7390,16 +7510,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -8432,16 +8567,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -9443,16 +9593,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -10462,16 +10627,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -11340,16 +11520,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -12153,16 +12348,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -13044,16 +13254,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -14301,16 +14526,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -15151,16 +15391,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -16216,16 +16471,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -17279,16 +17549,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -18290,16 +18575,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -19301,16 +19601,31 @@ exports[`installing helm chart from new tab given tab for installing chart was n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
index 42e5d8a35b..fc598b5b1b 100644
--- a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
+++ b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
@@ -57,16 +57,31 @@ exports[`installing helm chart from previously opened tab given tab for installi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -617,16 +632,31 @@ exports[`installing helm chart from previously opened tab given tab for installi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/opening-dock-tab-for-installing-helm-chart.test.ts.snap b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/opening-dock-tab-for-installing-helm-chart.test.ts.snap
index de1103cdc7..857d91cce9 100644
--- a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/opening-dock-tab-for-installing-helm-chart.test.ts.snap
+++ b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/opening-dock-tab-for-installing-helm-chart.test.ts.snap
@@ -57,16 +57,31 @@ exports[`opening dock tab for installing helm chart given application is started
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -594,16 +609,31 @@ exports[`opening dock tab for installing helm chart given application is started
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1301,16 +1331,31 @@ exports[`opening dock tab for installing helm chart given application is started
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -2065,16 +2110,31 @@ exports[`opening dock tab for installing helm chart given application is started
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -3012,16 +3072,31 @@ exports[`opening dock tab for installing helm chart given application is started
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -3969,16 +4044,31 @@ exports[`opening dock tab for installing helm chart given application is started
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -4916,16 +5006,31 @@ exports[`opening dock tab for installing helm chart given application is started
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -5867,16 +5972,31 @@ exports[`opening dock tab for installing helm chart given application is started
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -6824,16 +6944,31 @@ exports[`opening dock tab for installing helm chart given application is started
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap b/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
index 49b066e1a6..1fc596d52f 100644
--- a/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
+++ b/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
@@ -57,16 +57,31 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -757,16 +772,31 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1560,16 +1590,31 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -2379,16 +2424,31 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -3234,16 +3294,31 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -4229,16 +4304,31 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -5226,16 +5316,31 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap b/packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap
index c36ac69784..bbbd8fb4b7 100644
--- a/packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap
+++ b/packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap
@@ -57,16 +57,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -838,16 +853,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1624,16 +1654,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -2600,16 +2645,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -3637,16 +3697,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -4674,16 +4749,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -5956,16 +6046,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -7238,16 +7343,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -8520,16 +8640,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -9607,16 +9742,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -10696,16 +10846,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -11978,16 +12143,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -13015,16 +13195,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -14055,16 +14250,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -15031,16 +15241,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -16068,16 +16293,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -17105,16 +17345,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -18142,16 +18397,31 @@ exports[`showing details for helm release given application is started when navi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
diff --git a/packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap b/packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap
index c6f0631b90..b713511c88 100644
--- a/packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap
+++ b/packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap
@@ -57,16 +57,31 @@ exports[`download logs options in logs dock tab opening pod logs when logs avail
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -950,16 +965,31 @@ exports[`download logs options in logs dock tab opening pod logs when logs not a
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background: rgb(11, 85, 145);"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"