diff --git a/src/behaviours/__snapshots__/extension-special-characters-in-page-registrations.test.tsx.snap b/src/behaviours/__snapshots__/extension-special-characters-in-page-registrations.test.tsx.snap
index 3b43a51f66..80b0028469 100644
--- a/src/behaviours/__snapshots__/extension-special-characters-in-page-registrations.test.tsx.snap
+++ b/src/behaviours/__snapshots__/extension-special-characters-in-page-registrations.test.tsx.snap
@@ -1,11 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`extension special characters in page registrations renders 1`] = `<div />`;
+exports[`extension special characters in page registrations renders 1`] = `
+<div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
+</div>
+`;
 
 exports[`extension special characters in page registrations when navigating to route with ID having special characters renders 1`] = `
 <div>
   <div>
     Some page
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
diff --git a/src/behaviours/__snapshots__/navigate-to-extension-page.test.tsx.snap b/src/behaviours/__snapshots__/navigate-to-extension-page.test.tsx.snap
index edab04b903..c96763fe6e 100644
--- a/src/behaviours/__snapshots__/navigate-to-extension-page.test.tsx.snap
+++ b/src/behaviours/__snapshots__/navigate-to-extension-page.test.tsx.snap
@@ -1,12 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`navigate to extension page renders 1`] = `<div />`;
+exports[`navigate to extension page renders 1`] = `
+<div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
+</div>
+`;
 
 exports[`navigate to extension page when extension navigates to child route renders 1`] = `
 <div>
   <div>
     Child page
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -31,6 +40,9 @@ exports[`navigate to extension page when extension navigates to route with param
       Some button
     </button>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -55,6 +67,9 @@ exports[`navigate to extension page when extension navigates to route without pa
       Some button
     </button>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -79,5 +94,8 @@ exports[`navigate to extension page when extension navigates to route without pa
       Some button
     </button>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
diff --git a/src/behaviours/__snapshots__/navigating-between-routes.test.tsx.snap b/src/behaviours/__snapshots__/navigating-between-routes.test.tsx.snap
index 90ff615b2b..10e9eb2d39 100644
--- a/src/behaviours/__snapshots__/navigating-between-routes.test.tsx.snap
+++ b/src/behaviours/__snapshots__/navigating-between-routes.test.tsx.snap
@@ -8,6 +8,9 @@ exports[`navigating between routes given route with optional path parameters whe
   "someOtherParameter": "some-other-value"
 }
   </pre>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -16,5 +19,8 @@ exports[`navigating between routes given route without path parameters when navi
   <div>
     Some component
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
diff --git a/src/behaviours/add-cluster/__snapshots__/navigation-using-application-menu.test.tsx.snap b/src/behaviours/add-cluster/__snapshots__/navigation-using-application-menu.test.tsx.snap
index d19612eac3..0fd00133aa 100644
--- a/src/behaviours/add-cluster/__snapshots__/navigation-using-application-menu.test.tsx.snap
+++ b/src/behaviours/add-cluster/__snapshots__/navigation-using-application-menu.test.tsx.snap
@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`add-cluster - navigation using application menu renders 1`] = `<div />`;
+exports[`add-cluster - navigation using application menu renders 1`] = `
+<div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
+</div>
+`;
 
 exports[`add-cluster - navigation using application menu when navigating to add cluster using application menu renders 1`] = `
 <div>
@@ -85,5 +91,8 @@ exports[`add-cluster - navigation using application menu when navigating to add
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </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 092337ec82..9af01f0969 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
@@ -328,6 +328,9 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -723,5 +726,8 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
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 ad1f7a8d4c..06d1a1e210 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
@@ -293,6 +293,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -589,6 +592,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -909,6 +915,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1234,6 +1243,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
   <div
     data-testid="some-child-page"
   />
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1534,6 +1546,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
   <div
     data-testid="some-child-page"
   />
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1854,6 +1869,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -2150,5 +2168,8 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
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 be9c321cd5..19cb615cce 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
@@ -293,6 +293,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -589,6 +592,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -929,6 +935,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1313,6 +1322,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </main>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1697,6 +1709,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </main>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -2036,6 +2051,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </main>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -2376,6 +2394,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -2672,5 +2693,8 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
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 4f28c6ecef..cc44f56496 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
@@ -261,6 +261,9 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -573,5 +576,8 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
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 3a1b1309dd..c14ccb6160 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
@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`extensions - navigation using application menu renders 1`] = `<div />`;
+exports[`extensions - navigation using application menu renders 1`] = `
+<div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
+</div>
+`;
 
 exports[`extensions - navigation using application menu when navigating to extensions using application menu renders 1`] = `
 <div>
@@ -118,5 +124,8 @@ exports[`extensions - navigation using application menu when navigating to exten
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
diff --git a/src/behaviours/helm-charts/__snapshots__/navigation-to-helm-charts.test.ts.snap b/src/behaviours/helm-charts/__snapshots__/navigation-to-helm-charts.test.ts.snap
index 4f1555049d..e323205008 100644
--- a/src/behaviours/helm-charts/__snapshots__/navigation-to-helm-charts.test.ts.snap
+++ b/src/behaviours/helm-charts/__snapshots__/navigation-to-helm-charts.test.ts.snap
@@ -454,5 +454,8 @@ exports[`helm-charts - navigation to Helm charts when navigating to Helm charts
       </div>
     </main>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
diff --git a/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
index cb4973203d..740e01edbb 100644
--- a/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
@@ -537,6 +537,9 @@ exports[`preferences - closing-preferences given accessing preferences directly
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -679,6 +682,9 @@ exports[`preferences - closing-preferences given accessing preferences directly
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -687,6 +693,9 @@ exports[`preferences - closing-preferences given accessing preferences directly
   <div>
     Some front page
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -695,6 +704,9 @@ exports[`preferences - closing-preferences given accessing preferences directly
   <div>
     Some front page
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1235,6 +1247,9 @@ exports[`preferences - closing-preferences given already in a page and then navi
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1377,6 +1392,9 @@ exports[`preferences - closing-preferences given already in a page and then navi
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1519,6 +1537,9 @@ exports[`preferences - closing-preferences given already in a page and then navi
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1661,5 +1682,8 @@ exports[`preferences - closing-preferences given already in a page and then navi
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </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 f67337e80c..57e68c4ea5 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
@@ -199,6 +199,9 @@ exports[`preferences - navigation to application preferences given in some child
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -727,5 +730,8 @@ exports[`preferences - navigation to application preferences given in some child
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </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 4e92ac4f95..8daf6eb997 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
@@ -525,6 +525,9 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -935,5 +938,8 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </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 d3f42e6d63..609350c455 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
@@ -525,6 +525,9 @@ exports[`preferences - navigation to extension specific preferences given in pre
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1065,6 +1068,9 @@ exports[`preferences - navigation to extension specific preferences given in pre
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1239,5 +1245,8 @@ exports[`preferences - navigation to extension specific preferences given in pre
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </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 2e9b7722aa..c962cfb2ab 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
@@ -525,6 +525,9 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -836,7 +839,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                 class="flex gaps"
               >
                 <div
-                  class="Select theme-lens box grow css-b62m3t-container"
+                  class="Select theme-lens box grow Select--is-disabled css-3iigni-container"
                 >
                   <span
                     class="css-1f43avz-a11yText-A11yText"
@@ -849,7 +852,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                     class="css-1f43avz-a11yText-A11yText"
                   />
                   <div
-                    class="Select__control css-1s2u09g-control"
+                    class="Select__control Select__control--is-disabled css-1insrsq-control"
                   >
                     <div
                       class="Select__value-container css-319lph-ValueContainer"
@@ -861,7 +864,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                         Repositories
                       </div>
                       <div
-                        class="Select__input-container css-6j8wv5-Input"
+                        class="Select__input-container css-jzldcf-Input"
                         data-value=""
                       >
                         <input
@@ -873,6 +876,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                           autocomplete="off"
                           autocorrect="off"
                           class="Select__input"
+                          disabled=""
                           id="HelmRepoSelect"
                           role="combobox"
                           spellcheck="false"
@@ -886,8 +890,22 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                     <div
                       class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                     >
+                      <div
+                        aria-hidden="true"
+                        class="Select__indicator Select__loading-indicator css-at12u2-loadingIndicator"
+                      >
+                        <span
+                          class="css-1xtdfmb-LoadingDot"
+                        />
+                        <span
+                          class="css-zoievk-LoadingDot"
+                        />
+                        <span
+                          class="css-x748d8-LoadingDot"
+                        />
+                      </div>
                       <span
-                        class="Select__indicator-separator css-1okebmr-indicatorSeparator"
+                        class="Select__indicator-separator css-109onse-indicatorSeparator"
                       />
                       <div
                         aria-hidden="true"
@@ -920,13 +938,11 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                 class="repos"
               >
                 <div
-                  class="notice"
+                  class="pt-5 relative"
                 >
                   <div
-                    class="flex-grow text-center"
-                  >
-                    The repositories have not been added yet
-                  </div>
+                    class="Spinner singleColor center"
+                  />
                 </div>
               </div>
             </div>
@@ -969,5 +985,8 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </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 8c6507ef0a..2718c892e7 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
@@ -525,6 +525,9 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -727,5 +730,8 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </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 80f5b61bb1..0187d3573e 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
@@ -185,6 +185,9 @@ exports[`preferences - navigation to telemetry preferences given URL for Sentry
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -713,6 +716,9 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1253,6 +1259,9 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1429,6 +1438,9 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1568,5 +1580,8 @@ exports[`preferences - navigation to telemetry preferences given no URL for Sent
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </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 5e5934c3bb..8cd1678235 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
@@ -525,6 +525,9 @@ exports[`preferences - navigation to terminal preferences given in preferences,
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -845,5 +848,8 @@ exports[`preferences - navigation to terminal preferences given in preferences,
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </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 141279f4e4..f49e4d460a 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
@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`preferences - navigation using application menu renders 1`] = `<div />`;
+exports[`preferences - navigation using application menu renders 1`] = `
+<div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
+</div>
+`;
 
 exports[`preferences - navigation using application menu when navigating to preferences using application menu renders 1`] = `
 <div>
@@ -527,5 +533,8 @@ exports[`preferences - navigation using application menu when navigating to pref
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
diff --git a/src/behaviours/preferences/__snapshots__/navigation-using-tray.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-using-tray.test.ts.snap
index 0abb2bd928..398e4d4b05 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-using-tray.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-using-tray.test.ts.snap
@@ -2,7 +2,11 @@
 
 exports[`show-about-using-tray renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
@@ -532,6 +536,9 @@ exports[`show-about-using-tray when navigating using tray renders 1`] = `
         </div>
       </div>
     </div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
   </div>
 </body>
 `;
diff --git a/src/behaviours/update-app/__snapshots__/installing-update-using-tray.test.ts.snap b/src/behaviours/update-app/__snapshots__/installing-update-using-tray.test.ts.snap
index f2a174da52..75d9716a6d 100644
--- a/src/behaviours/update-app/__snapshots__/installing-update-using-tray.test.ts.snap
+++ b/src/behaviours/update-app/__snapshots__/installing-update-using-tray.test.ts.snap
@@ -2,54 +2,90 @@
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when new update is discovered renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when new update is discovered when download fails renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when new update is discovered when download succeeds renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when new update is discovered when download succeeds when user answers not to install the update renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when new update is discovered when download succeeds when user answers to install the update renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when new update is discovered when download succeeds when user disregards the question and installs the update using tray renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when no new update is discovered renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
diff --git a/src/behaviours/welcome/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/behaviours/welcome/__snapshots__/navigation-using-application-menu.test.ts.snap
index d59f7d040a..05eee498bf 100644
--- a/src/behaviours/welcome/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/src/behaviours/welcome/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`welcome - navigation using application menu renders 1`] = `<div />`;
+exports[`welcome - navigation using application menu renders 1`] = `
+<div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
+</div>
+`;
 
 exports[`welcome - navigation using application menu when navigating to welcome using application menu renders 1`] = `
 <div>
@@ -87,5 +93,8 @@ exports[`welcome - navigation using application menu when navigating to welcome
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
diff --git a/src/renderer/components/notifications/notifications-store.injectable.ts b/src/renderer/components/notifications/notifications-store.injectable.ts
new file mode 100644
index 0000000000..1b14abef96
--- /dev/null
+++ b/src/renderer/components/notifications/notifications-store.injectable.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { NotificationsStore } from "./notifications.store";
+
+const notificationsStoreInjectable = getInjectable({
+  id: "notifications-store",
+  instantiate: () => new NotificationsStore(),
+});
+
+export default notificationsStoreInjectable;
diff --git a/src/renderer/components/notifications/notifications.store.tsx b/src/renderer/components/notifications/notifications.store.tsx
index 9202a19e31..25774bc9ce 100644
--- a/src/renderer/components/notifications/notifications.store.tsx
+++ b/src/renderer/components/notifications/notifications.store.tsx
@@ -91,5 +91,3 @@ export class NotificationsStore {
     }
   }
 }
-
-export const notificationsStore = new NotificationsStore();
diff --git a/src/renderer/components/notifications/notifications.tsx b/src/renderer/components/notifications/notifications.tsx
index 521a61e638..bd75619275 100644
--- a/src/renderer/components/notifications/notifications.tsx
+++ b/src/renderer/components/notifications/notifications.tsx
@@ -10,61 +10,25 @@ import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
 import { cssNames, prevDefault } from "../../utils";
-import type { Notification, NotificationMessage } from "./notifications.store";
-import { notificationsStore, NotificationStatus } from "./notifications.store";
+import type { Notification, NotificationMessage, NotificationsStore } from "./notifications.store";
+import { NotificationStatus } from "./notifications.store";
 import { Animate } from "../animate";
 import { Icon } from "../icon";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import { asLegacyGlobalForExtensionApi } from "../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
+import notificationsStoreInjectable from "./notifications-store.injectable";
+
+interface Dependencies {
+  store: NotificationsStore;
+}
 
 @observer
-export class Notifications extends React.Component {
+class NonInjectedNotifications extends React.Component<Dependencies> {
   public elem: HTMLDivElement | null = null;
 
-  static ok(message: NotificationMessage) {
-    return notificationsStore.add({
-      message,
-      timeout: 2_500,
-      status: NotificationStatus.OK,
-    });
-  }
-
-  static checkedError(message: unknown, fallback: string, customOpts?: Partial<Omit<Notification, "message">>) {
-    if (typeof message === "string" || message instanceof Error || message instanceof JsonApiErrorParsed) {
-      return Notifications.error(message, customOpts);
-    }
-
-    console.warn("Unknown notification error message, falling back to default", message);
-
-    return Notifications.error(fallback, customOpts);
-  }
-
-  static error(message: NotificationMessage, customOpts: Partial<Omit<Notification, "message">> = {}) {
-    return notificationsStore.add({
-      message,
-      timeout: 10_000,
-      status: NotificationStatus.ERROR,
-      ...customOpts,
-    });
-  }
-
-  static shortInfo(message: NotificationMessage, customOpts: Partial<Omit<Notification, "message">> = {}) {
-    return this.info(message, {
-      timeout: 5_000,
-      ...customOpts,
-    });
-  }
-
-  static info(message: NotificationMessage, customOpts: Partial<Omit<Notification, "message">> = {}) {
-    return notificationsStore.add({
-      status: NotificationStatus.INFO,
-      timeout: 0,
-      message,
-      ...customOpts,
-    });
-  }
-
   componentDidMount() {
     disposeOnUnmount(this, [
-      reaction(() => notificationsStore.notifications.length, () => {
+      reaction(() => this.props.store.notifications.length, () => {
         this.scrollToLastNotification();
       }, { delay: 250 }),
     ]);
@@ -74,7 +38,7 @@ export class Notifications extends React.Component {
     if (!this.elem) {
       return;
     }
-    this.elem.scrollTo({
+    this.elem.scrollTo?.({
       top: this.elem.scrollHeight,
       behavior: "smooth",
     });
@@ -91,7 +55,7 @@ export class Notifications extends React.Component {
   }
 
   render() {
-    const { notifications, remove, addAutoHideTimer, removeAutoHideTimer } = notificationsStore;
+    const { notifications, remove, addAutoHideTimer, removeAutoHideTimer } = this.props.store;
 
     return (
       <div className="Notifications flex column align-flex-end" ref={e => this.elem = e}>
@@ -114,6 +78,7 @@ export class Notifications extends React.Component {
                   <Icon
                     material="close"
                     className="close"
+                    data-testid={`close-notification-for-${id}`}
                     onClick={prevDefault(() => {
                       remove(id);
                       onClose?.();
@@ -128,3 +93,68 @@ export class Notifications extends React.Component {
     );
   }
 }
+
+export const Notifications = withInjectables<Dependencies>(
+  NonInjectedNotifications,
+
+  {
+    getProps: (di) => ({
+      store: di.inject(notificationsStoreInjectable),
+    }),
+  },
+) as React.FC & {
+  ok: (message: NotificationMessage) => () => void;
+  checkedError: (message: unknown, fallback: string, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
+  error: (message: NotificationMessage, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
+  shortInfo: (message: NotificationMessage, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
+  info: (message: NotificationMessage, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
+};
+
+/**
+ * @deprecated
+ */
+const _notificationStore = asLegacyGlobalForExtensionApi(notificationsStoreInjectable);
+
+Notifications.ok = (message: NotificationMessage) => {
+  return _notificationStore.add({
+    message,
+    timeout: 2_500,
+    status: NotificationStatus.OK,
+  });
+};
+
+Notifications.checkedError = (message, fallback, customOpts = {}) => {
+  if (typeof message === "string" || message instanceof Error || message instanceof JsonApiErrorParsed) {
+    return Notifications.error(message, customOpts);
+  }
+
+  console.warn("Unknown notification error message, falling back to default", message);
+
+  return Notifications.error(fallback, customOpts);
+};
+
+Notifications.error = (message, customOpts= {}) => {
+  return _notificationStore.add({
+    message,
+    timeout: 10_000,
+    status: NotificationStatus.ERROR,
+    ...customOpts,
+  });
+};
+
+Notifications.shortInfo = (message, customOpts = {}) => {
+  return Notifications.info(message, {
+    timeout: 5_000,
+    ...customOpts,
+  });
+};
+
+Notifications.info = (message, customOpts = {}) => {
+  return _notificationStore.add({
+    status: NotificationStatus.INFO,
+    timeout: 0,
+    message,
+    ...customOpts,
+  });
+};
+
diff --git a/src/renderer/components/test-utils/get-application-builder.tsx b/src/renderer/components/test-utils/get-application-builder.tsx
index b518ca311b..19764b8408 100644
--- a/src/renderer/components/test-utils/get-application-builder.tsx
+++ b/src/renderer/components/test-utils/get-application-builder.tsx
@@ -44,10 +44,10 @@ import { flushPromises } from "../../../common/test-utils/flush-promises";
 import type { NamespaceStore } from "../+namespaces/store";
 import namespaceStoreInjectable from "../+namespaces/store.injectable";
 import historyInjectable from "../../navigation/history.injectable";
-import trayMenuItemsInjectable from "../../../main/tray/tray-menu-item/tray-menu-items.injectable";
 import type { TrayMenuItem } from "../../../main/tray/tray-menu-item/tray-menu-item-injection-token";
 import electronTrayInjectable from "../../../main/tray/electron-tray/electron-tray.injectable";
 import applicationWindowInjectable from "../../../main/start-main-application/lens-window/application-window/application-window.injectable";
+import { Notifications } from "../notifications/notifications";
 
 type Callback = (dis: DiContainers) => void | Promise<void>;
 
@@ -395,6 +395,8 @@ export const getApplicationBuilder = () => {
               return <Component />;
             }}
           </Observer>
+
+          <Notifications />
         </Router>,
       );
 
diff --git a/src/renderer/ipc/list-namespaces-forbidden-handler.injectable.tsx b/src/renderer/ipc/list-namespaces-forbidden-handler.injectable.tsx
index c787899e84..22434df1b6 100644
--- a/src/renderer/ipc/list-namespaces-forbidden-handler.injectable.tsx
+++ b/src/renderer/ipc/list-namespaces-forbidden-handler.injectable.tsx
@@ -5,17 +5,19 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import navigateToEntitySettingsInjectable from "../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
 import type { ListNamespaceForbiddenArgs } from "../../common/ipc/cluster";
-import { Notifications, notificationsStore } from "../components/notifications";
+import { Notifications } from "../components/notifications";
 import { ClusterStore } from "../../common/cluster-store/cluster-store";
 import { Button } from "../components/button";
 import type { IpcRendererEvent } from "electron";
 import React from "react";
+import notificationsStoreInjectable from "../components/notifications/notifications-store.injectable";
 
 const listNamespacesForbiddenHandlerInjectable = getInjectable({
   id: "list-namespaces-forbidden-handler",
 
   instantiate: (di) => {
     const navigateToEntitySettings = di.inject(navigateToEntitySettingsInjectable);
+    const notificationsStore = di.inject(notificationsStoreInjectable);
 
     const notificationLastDisplayedAt = new Map<string, number>();
     const intervalBetweenNotifications = 1000 * 60; // 60s
diff --git a/src/renderer/ipc/register-listeners.tsx b/src/renderer/ipc/register-listeners.tsx
index a9e0e76d2d..f69feb6d6b 100644
--- a/src/renderer/ipc/register-listeners.tsx
+++ b/src/renderer/ipc/register-listeners.tsx
@@ -8,7 +8,7 @@ import type { IpcRendererEvent } from "electron";
 import { ipcRenderer } from "electron";
 import type { UpdateAvailableFromMain, BackchannelArg } from "../../common/ipc";
 import { areArgsUpdateAvailableFromMain, UpdateAvailableChannel, onCorrect, ipcRendererOn, AutoUpdateChecking, AutoUpdateNoUpdateAvailable } from "../../common/ipc";
-import { Notifications, notificationsStore } from "../components/notifications";
+import { Notifications } from "../components/notifications";
 import { Button } from "../components/button";
 import { isMac } from "../../common/vars";
 import { defaultHotbarCells } from "../../common/hotbars/types";
@@ -16,7 +16,6 @@ import { type ListNamespaceForbiddenArgs, clusterListNamespaceForbiddenChannel,
 import { hotbarTooManyItemsChannel } from "../../common/ipc/hotbar";
 
 function sendToBackchannel(backchannel: string, notificationId: string, data: BackchannelArg): void {
-  notificationsStore.remove(notificationId);
   ipcRenderer.send(backchannel, data);
 }
 
diff --git a/src/renderer/port-forward/about-port-forwarding.injectable.ts b/src/renderer/port-forward/about-port-forwarding.injectable.ts
index 4656310964..29dba28962 100644
--- a/src/renderer/port-forward/about-port-forwarding.injectable.ts
+++ b/src/renderer/port-forward/about-port-forwarding.injectable.ts
@@ -7,18 +7,22 @@ import { aboutPortForwarding } from "./port-forward-notify";
 import navigateToPortForwardsInjectable from "../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
 import hostedClusterIdInjectable from "../../common/cluster-store/hosted-cluster-id.injectable";
 import assert from "assert";
+import notificationsStoreInjectable from "../components/notifications/notifications-store.injectable";
 
 const aboutPortForwardingInjectable = getInjectable({
   id: "about-port-forwarding",
 
   instantiate: (di) => {
     const hostedClusterId = di.inject(hostedClusterIdInjectable);
+    const notificationsStore = di.inject(notificationsStoreInjectable);
+    const navigateToPortForwards = di.inject(navigateToPortForwardsInjectable);
 
     assert(hostedClusterId, "Only allowed to notify about port forward errors within a cluster frame");
 
     return aboutPortForwarding({
-      navigateToPortForwards: di.inject(navigateToPortForwardsInjectable),
+      navigateToPortForwards,
       hostedClusterId,
+      notificationsStore,
     });
   },
 });
diff --git a/src/renderer/port-forward/notify-error-port-forwarding.injectable.ts b/src/renderer/port-forward/notify-error-port-forwarding.injectable.ts
index 9d4cd5caa7..a0f1ed714f 100644
--- a/src/renderer/port-forward/notify-error-port-forwarding.injectable.ts
+++ b/src/renderer/port-forward/notify-error-port-forwarding.injectable.ts
@@ -7,18 +7,22 @@ import { notifyErrorPortForwarding } from "./port-forward-notify";
 import navigateToPortForwardsInjectable from "../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
 import hostedClusterIdInjectable from "../../common/cluster-store/hosted-cluster-id.injectable";
 import assert from "assert";
+import notificationsStoreInjectable from "../components/notifications/notifications-store.injectable";
 
 const notifyErrorPortForwardingInjectable = getInjectable({
   id: "notify-error-port-forwarding",
 
   instantiate: (di) => {
     const hostedClusterId = di.inject(hostedClusterIdInjectable);
+    const notificationsStore = di.inject(notificationsStoreInjectable);
+    const navigateToPortForwards = di.inject(navigateToPortForwardsInjectable);
 
     assert(hostedClusterId, "Only allowed to notify about port forward errors within a cluster frame");
 
     return notifyErrorPortForwarding({
-      navigateToPortForwards: di.inject(navigateToPortForwardsInjectable),
+      navigateToPortForwards,
       hostedClusterId,
+      notificationsStore,
     });
   },
 });
diff --git a/src/renderer/port-forward/port-forward-notify.tsx b/src/renderer/port-forward/port-forward-notify.tsx
index 086771ad46..40dc295602 100644
--- a/src/renderer/port-forward/port-forward-notify.tsx
+++ b/src/renderer/port-forward/port-forward-notify.tsx
@@ -5,17 +5,20 @@
 
 import React from "react";
 import { Button } from "../components/button";
-import { Notifications, notificationsStore } from "../components/notifications";
+import type { NotificationsStore } from "../components/notifications";
+import { Notifications } from "../components/notifications";
 import type { NavigateToPortForwards } from "../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
 
 interface AboutPortForwardingDependencies {
   navigateToPortForwards: NavigateToPortForwards;
   hostedClusterId: string;
+  notificationsStore: NotificationsStore;
 }
 
 export const aboutPortForwarding = ({
   navigateToPortForwards,
   hostedClusterId,
+  notificationsStore,
 }: AboutPortForwardingDependencies) => () => {
   const notificationId = `port-forward-notification-${hostedClusterId}`;
 
@@ -49,12 +52,14 @@ export const aboutPortForwarding = ({
 interface NotifyErrorPortForwardingDependencies {
   navigateToPortForwards: NavigateToPortForwards;
   hostedClusterId: string;
+  notificationsStore: NotificationsStore;
 }
 
 
 export const notifyErrorPortForwarding = ({
   navigateToPortForwards,
   hostedClusterId,
+  notificationsStore,
 }: NotifyErrorPortForwardingDependencies) => (msg: string) => {
   const notificationId = `port-forward-error-notification-${hostedClusterId}`;