diff --git a/packages/frontend/app/components/connection-status.gjs b/packages/frontend/app/components/connection-status.gjs
index 6bd66bc4e8..6ff43348c5 100644
--- a/packages/frontend/app/components/connection-status.gjs
+++ b/packages/frontend/app/components/connection-status.gjs
@@ -87,7 +87,10 @@ export default class ConnectionStatusComponent extends Component {
     this.reconnect.perform();
   });
   <template>
-    <div class="connection-status{{unless this.isOnline ' offline'}}" aria-hidden={{this.isOnline}}>
+    <div
+      class="connection-status critical-notice{{unless this.isOnline ' offline'}}"
+      aria-hidden={{this.isOnline}}
+    >
       {{#unless this.isOnline}}
         {{#if this.unableToReconnect}}
           <p class="unable-to-reconnect">
diff --git a/packages/frontend/app/components/update-notification.gjs b/packages/frontend/app/components/update-notification.gjs
index 983cc5f14a..f20b9f1f8f 100644
--- a/packages/frontend/app/components/update-notification.gjs
+++ b/packages/frontend/app/components/update-notification.gjs
@@ -25,7 +25,7 @@ export default class UpdateNotificationComponent extends Component {
   });
   <template>
     {{#if this.newVersion.isNewVersionAvailable}}
-      <div class="update-notification" data-test-update-notification>
+      <div class="update-notification critical-notice" data-test-update-notification>
         <button type="button" {{on "click" (perform this.click)}}>
           {{t "general.iliosUpdatePending"}}
         </button>
diff --git a/packages/frontend/app/styles/components/connection-status.scss b/packages/frontend/app/styles/components/connection-status.scss
index a40af4d0c8..87d1acf5dc 100644
--- a/packages/frontend/app/styles/components/connection-status.scss
+++ b/packages/frontend/app/styles/components/connection-status.scss
@@ -1,13 +1,17 @@
 @use "../ilios-common/mixins" as m;
 
 .connection-status {
-  @include m.critical-notice(var(--dark-yellow), var(--black), 2.5rem);
-
   display: none;
   justify-content: space-between;
   align-items: center;
   flex-direction: column;
 
+  &.critical-notice {
+    background-color: var(--dark-yellow);
+    color: var(--black);
+    min-height: 2.5rem;
+  }
+
   &.offline {
     display: flex;
 
diff --git a/packages/frontend/app/styles/components/update-notification.scss b/packages/frontend/app/styles/components/update-notification.scss
index a8ca7fb5f8..d14f9a5a21 100644
--- a/packages/frontend/app/styles/components/update-notification.scss
+++ b/packages/frontend/app/styles/components/update-notification.scss
@@ -2,7 +2,15 @@
 
 .update-notification {
   button {
-    @include m.critical-notice(var(--blue), var(--white), 3rem);
     @include m.font-size("large");
   }
+
+  &.critical-notice {
+    background-color: var(--blue);
+
+    button {
+      color: var(--white);
+      min-height: 3rem;
+    }
+  }
 }
diff --git a/packages/ilios-common/addon/components/api-version-notice.gjs b/packages/ilios-common/addon/components/api-version-notice.gjs
index b238f91c34..11956bea2e 100644
--- a/packages/ilios-common/addon/components/api-version-notice.gjs
+++ b/packages/ilios-common/addon/components/api-version-notice.gjs
@@ -66,7 +66,7 @@ export default class ApiVersionNoticeComponent extends Component {
   });
   <template>
     <div
-      class="api-version-notice{{if this.mismatched ' mismatch'}}"
+      class="api-version-notice critical-notice{{if this.mismatched ' mismatch'}}"
       hidden={{not this.mismatched}}
       role={{if this.mismatched "alert" false}}
       data-test-load-finished={{this.check.lastSuccessful.value}}
diff --git a/packages/ilios-common/app/styles/ilios-common/components/api-version-notice.scss b/packages/ilios-common/app/styles/ilios-common/components/api-version-notice.scss
index 519bec5ee4..bfb46d0343 100644
--- a/packages/ilios-common/app/styles/ilios-common/components/api-version-notice.scss
+++ b/packages/ilios-common/app/styles/ilios-common/components/api-version-notice.scss
@@ -1,11 +1,15 @@
 @use "../mixins" as m;
 
 .api-version-notice {
-  @include m.critical-notice(var(--dark-yellow), var(--black), 1rem);
-
   display: none;
   padding: 0.25rem 1rem;
 
+  &.critical-notice {
+    background-color: var(--dark-yellow);
+    color: var(--black);
+    min-height: 2.5rem;
+  }
+
   &.mismatch {
     display: block;
   }
diff --git a/packages/ilios-common/app/styles/ilios-common/mixins.scss b/packages/ilios-common/app/styles/ilios-common/mixins.scss
index c6163fcfe6..4f1dcec125 100644
--- a/packages/ilios-common/app/styles/ilios-common/mixins.scss
+++ b/packages/ilios-common/app/styles/ilios-common/mixins.scss
@@ -1,6 +1,5 @@
 @forward "mixins/media";
 @forward "mixins/collapsed-container";
-@forward "mixins/critical-notice";
 @forward "mixins/detail-container";
 @forward "mixins/font-size";
 @forward "mixins/graph-with-data-table";
diff --git a/packages/ilios-common/app/styles/ilios-common/mixins/critical-notice.scss b/packages/ilios-common/app/styles/ilios-common/mixins/critical-notice.scss
deleted file mode 100644
index 3186898bf4..0000000000
--- a/packages/ilios-common/app/styles/ilios-common/mixins/critical-notice.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@mixin critical-notice($background-color, $color, $height) {
-  background-color: $background-color;
-  color: $color;
-  display: block;
-  margin: 0;
-  min-height: $height;
-  padding: 0;
-  text-align: center;
-  width: 100%;
-}
diff --git a/packages/ilios-common/app/styles/ilios-common/shared.scss b/packages/ilios-common/app/styles/ilios-common/shared.scss
index cbc9ec55e4..65080bf6e5 100644
--- a/packages/ilios-common/app/styles/ilios-common/shared.scss
+++ b/packages/ilios-common/app/styles/ilios-common/shared.scss
@@ -1,3 +1,4 @@
+@forward "shared/critical-notice";
 @forward "shared/data-visualization";
 @forward "shared/ilios-removable-table";
 @forward "shared/ilios-table";
diff --git a/packages/ilios-common/app/styles/ilios-common/shared/critical-notice.scss b/packages/ilios-common/app/styles/ilios-common/shared/critical-notice.scss
new file mode 100644
index 0000000000..5f52ccea60
--- /dev/null
+++ b/packages/ilios-common/app/styles/ilios-common/shared/critical-notice.scss
@@ -0,0 +1,7 @@
+.critical-notice {
+  display: block;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  width: 100%;
+}