diff --git a/src/behaviours/add-cluster/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/behaviours/add-cluster/__snapshots__/navigation-using-application-menu.test.ts.snap
index 221440818f..4c1203829a 100644
--- a/src/behaviours/add-cluster/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/src/behaviours/add-cluster/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -5,7 +5,7 @@ exports[`add-cluster - navigation using application menu renders 1`] = `<div />`
 exports[`add-cluster - navigation using application menu when navigating to add cluster using application menu renders 1`] = `
 <div>
   <div
-    class="SettingLayout"
+    class="SettingLayout AddClusters"
     data-testid="add-cluster-page"
   >
     <div
@@ -62,10 +62,11 @@ exports[`add-cluster - navigation using application menu when navigating to add
           <div>
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -77,6 +78,7 @@ exports[`add-cluster - navigation using application menu when navigating to add
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
diff --git a/src/behaviours/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap b/src/behaviours/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap
index 4a5b4f1360..092337ec82 100644
--- a/src/behaviours/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap
+++ b/src/behaviours/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap
@@ -6,17 +6,21 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -333,17 +337,21 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
diff --git a/src/behaviours/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap b/src/behaviours/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
index 7e1c7406fd..ad1f7a8d4c 100644
--- a/src/behaviours/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
+++ b/src/behaviours/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
@@ -6,17 +6,21 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -298,17 +302,21 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -590,17 +598,21 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -906,17 +918,21 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -1227,17 +1243,21 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -1523,17 +1543,21 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -1839,17 +1863,21 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
diff --git a/src/behaviours/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap b/src/behaviours/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
index 469eba69f6..808ea1128f 100644
--- a/src/behaviours/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
+++ b/src/behaviours/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
@@ -6,17 +6,21 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -298,17 +302,21 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -590,17 +598,21 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -926,17 +938,21 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -1306,17 +1322,21 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -1686,17 +1706,21 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -2021,17 +2045,21 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -2357,17 +2385,21 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
diff --git a/src/behaviours/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap b/src/behaviours/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
index 37a9c3fcbe..4f28c6ecef 100644
--- a/src/behaviours/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
+++ b/src/behaviours/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
@@ -6,17 +6,21 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
@@ -266,17 +270,21 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
     class="flex flex-col"
     data-testid="cluster-sidebar"
   >
-    <div>
+    <div
+      class="SidebarCluster"
+    >
       <div
-        class=""
+        class="Avatar rounded loadingAvatar"
         style="width: 40px; height: 40px;"
       >
         ??
       </div>
-      <div />
+      <div
+        class="loadingClusterName"
+      />
     </div>
     <div
-      class="undefined sidebar-active-status"
+      class="sidebarNav sidebar-active-status"
     >
       <div
         class="SidebarItem"
diff --git a/src/behaviours/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/behaviours/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap
index a60732c101..4878bbb0b7 100644
--- a/src/behaviours/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/src/behaviours/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -20,7 +20,7 @@ exports[`extensions - navigation using application menu when navigating to exten
             Extensions
           </h1>
           <div
-            class="mb-14 mt-3"
+            class="notice mb-14 mt-3"
           >
             <p>
               Add new features via Lens Extensions.
@@ -96,10 +96,11 @@ exports[`extensions - navigation using application menu when navigating to exten
           <div>
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -111,6 +112,7 @@ exports[`extensions - navigation using application menu when navigating to exten
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
diff --git a/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
index 2fc1f4410f..ec4585cb42 100644
--- a/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
@@ -306,7 +306,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Automatically start Lens on login
@@ -481,10 +481,11 @@ exports[`preferences - closing-preferences given accessing preferences directly
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -496,6 +497,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -621,10 +623,11 @@ exports[`preferences - closing-preferences given accessing preferences directly
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -636,6 +639,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -969,7 +973,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Automatically start Lens on login
@@ -1144,10 +1148,11 @@ exports[`preferences - closing-preferences given already in a page and then navi
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -1159,6 +1164,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -1284,10 +1290,11 @@ exports[`preferences - closing-preferences given already in a page and then navi
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -1299,6 +1306,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -1424,10 +1432,11 @@ exports[`preferences - closing-preferences given already in a page and then navi
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -1439,6 +1448,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -1564,10 +1574,11 @@ exports[`preferences - closing-preferences given already in a page and then navi
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -1579,6 +1590,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
index bb431f6c98..676844b978 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
@@ -142,7 +142,7 @@ exports[`preferences - navigation to application preferences given in some child
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Allow untrusted Certificate Authorities
@@ -174,10 +174,11 @@ exports[`preferences - navigation to application preferences given in some child
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -189,6 +190,7 @@ exports[`preferences - navigation to application preferences given in some child
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -494,7 +496,7 @@ exports[`preferences - navigation to application preferences given in some child
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Automatically start Lens on login
@@ -669,10 +671,11 @@ exports[`preferences - navigation to application preferences given in some child
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -684,6 +687,7 @@ exports[`preferences - navigation to application preferences given in some child
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
index db63d5659a..731d58c794 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
@@ -294,7 +294,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Automatically start Lens on login
@@ -469,10 +469,11 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -484,6 +485,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -607,7 +609,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 class="flex gaps align-center"
               >
                 <label
-                  class=""
+                  class="Switch"
                   data-testid="switch"
                 >
                   Show minimap
@@ -859,10 +861,11 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -874,6 +877,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
index c2d0584210..db0b8f3207 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
@@ -294,7 +294,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Automatically start Lens on login
@@ -469,10 +469,11 @@ exports[`preferences - navigation to extension specific preferences given in pre
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -484,6 +485,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -801,7 +803,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Automatically start Lens on login
@@ -976,10 +978,11 @@ exports[`preferences - navigation to extension specific preferences given in pre
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -991,6 +994,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -1148,10 +1152,11 @@ exports[`preferences - navigation to extension specific preferences given in pre
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -1163,6 +1168,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
index 6da2af1b5e..374f371edb 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
@@ -294,7 +294,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Automatically start Lens on login
@@ -469,10 +469,11 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -484,6 +485,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -604,7 +606,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                  
               </div>
               <label
-                class=""
+                class="Switch"
                 data-testid="switch"
               >
                 Download kubectl binaries matching the Kubernetes cluster version
@@ -772,7 +774,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                
             </div>
             <div
-              class="mt-3"
+              class="notice mt-3"
             >
               <div
                 class="flex-grow text-center"
@@ -864,9 +866,11 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   Add Custom Helm Repo
                 </button>
               </div>
-              <div>
+              <div
+                class="repos"
+              >
                 <div
-                  class=""
+                  class="notice"
                 >
                   <div
                     class="flex-grow text-center"
@@ -890,10 +894,11 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -905,6 +910,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
index e5341cc635..5f4ad2bebd 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
@@ -294,7 +294,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Automatically start Lens on login
@@ -469,10 +469,11 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -484,6 +485,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -637,7 +639,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Allow untrusted Certificate Authorities
@@ -669,10 +671,11 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -684,6 +687,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
index afe1e3f114..17195dc495 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
@@ -160,10 +160,11 @@ exports[`preferences - navigation to telemetry preferences given URL for Sentry
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -175,6 +176,7 @@ exports[`preferences - navigation to telemetry preferences given URL for Sentry
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -480,7 +482,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Automatically start Lens on login
@@ -655,10 +657,11 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -670,6 +673,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -987,7 +991,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Automatically start Lens on login
@@ -1162,10 +1166,11 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -1177,6 +1182,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -1336,10 +1342,11 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -1351,6 +1358,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -1473,10 +1481,11 @@ exports[`preferences - navigation to telemetry preferences given no URL for Sent
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -1488,6 +1497,7 @@ exports[`preferences - navigation to telemetry preferences given no URL for Sent
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
index 140ec85a72..21aca325fe 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
@@ -294,7 +294,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Automatically start Lens on login
@@ -469,10 +469,11 @@ exports[`preferences - navigation to terminal preferences given in preferences,
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -484,6 +485,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
@@ -627,7 +629,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Copy on select and paste on right-click
@@ -778,10 +780,11 @@ exports[`preferences - navigation to terminal preferences given in preferences,
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -793,6 +796,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>
diff --git a/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
index eb8782e28c..fa7004eb24 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -296,7 +296,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                
             </div>
             <label
-              class=""
+              class="Switch"
               data-testid="switch"
             >
               Automatically start Lens on login
@@ -471,10 +471,11 @@ exports[`preferences - navigation using application menu when navigating to pref
           >
             <div
               aria-label="Close"
+              class="closeButton"
               role="button"
             >
               <i
-                class="Icon material focusable"
+                class="Icon icon material focusable"
               >
                 <span
                   class="icon"
@@ -486,6 +487,7 @@ exports[`preferences - navigation using application menu when navigating to pref
             </div>
             <div
               aria-hidden="true"
+              class="esc"
             >
               ESC
             </div>