diff --git a/frontend/app/components/alert.hbs b/frontend/app/components/alert.hbs
index 22b6e24dc..77dd78314 100644
--- a/frontend/app/components/alert.hbs
+++ b/frontend/app/components/alert.hbs
@@ -1,6 +1,3 @@
-<div
-  class="rounded border border-[color-mix(in_srgb,currentColor_60%,transparent)] bg-[color-mix(in_srgb,currentColor_30%,transparent)] p-4"
-  ...attributes
->
+<div class="alert rounded border" ...attributes>
   {{yield}}
 </div>
\ No newline at end of file
diff --git a/frontend/app/components/filter-sidebar/template.hbs b/frontend/app/components/filter-sidebar/template.hbs
index 9c960e961..6242a3a70 100644
--- a/frontend/app/components/filter-sidebar/template.hbs
+++ b/frontend/app/components/filter-sidebar/template.hbs
@@ -53,7 +53,7 @@
         <FaIcon @icon="sliders" @prefix="fas" />
         {{#if @appliedCount}}
           <span
-            class="filter-sidebar-toggle-icon-badge bg-success text-foreground-primary absolute right-2 top-2 rounded-[50%] px-1 py-0.5 font-mono text-xs shadow-sm duration-300"
+            class="filter-sidebar-toggle-icon-badge bg-success-light text-foreground-primary absolute right-2 top-2 rounded-[50%] px-1 py-0.5 font-mono text-xs shadow-sm duration-300"
           >{{@appliedCount}}</span>
         {{/if}}
       </span>
diff --git a/frontend/app/components/magic-link-modal/template.hbs b/frontend/app/components/magic-link-modal/template.hbs
index dd9c08f82..c56f1fe89 100644
--- a/frontend/app/components/magic-link-modal/template.hbs
+++ b/frontend/app/components/magic-link-modal/template.hbs
@@ -79,12 +79,12 @@
         data-test-magic-link-string
       />
       {{#if this.statusMsg}}
-        <Alert class="text-success">
+        <Alert class="alert-success">
           {{this.statusMsg}}
         </Alert>
       {{/if}}
       {{#if this.errorMsg}}
-        <Alert class="text-danger">
+        <Alert class="alert-danger">
           {{this.errorMsg}}
         </Alert>
       {{/if}}
diff --git a/frontend/app/styles/components/alert.css b/frontend/app/styles/components/alert.css
index b442712f9..54e6fe67f 100644
--- a/frontend/app/styles/components/alert.css
+++ b/frontend/app/styles/components/alert.css
@@ -1,11 +1,15 @@
-.ember-notify.alert-danger {
-  @apply bg-danger text-foreground-primary border-danger/80;
+.alert {
+  @apply rounded p-4;
 }
 
-.ember-notify.alert-info {
-  @apply bg-primary text-foreground-primary border-primary/80;
+.alert-danger {
+  @apply bg-danger-light text-foreground-primary !border-danger/80;
 }
 
-.ember-notify.alert-success {
-  @apply bg-success text-foreground-primary border-success/80;
+.alert-info {
+  @apply bg-primary text-foreground-primary !border-primary/80;
+}
+
+.alert-success {
+  @apply bg-success-light text-foreground-primary !border-success/80;
 }
diff --git a/frontend/config/tailwind.config.js b/frontend/config/tailwind.config.js
index a92159517..43b463839 100644
--- a/frontend/config/tailwind.config.js
+++ b/frontend/config/tailwind.config.js
@@ -131,8 +131,9 @@ module.exports = {
   },
   plugins: [forms()],
   safelist: [
-    { pattern: /noUi-/ },
+    { pattern: /alert-/ },
     { pattern: /ember-/ },
+    { pattern: /noUi-/ },
     { pattern: /shepherd-/ },
     "invalid-feedback",
   ],
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 015c8fead..1a1de7998 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -291,7 +291,7 @@ importers:
         specifier: ~3.0.0
         version: 3.0.3
       prettier-plugin-tailwindcss:
-        specifier: ~0.6.0
+        specifier: ^0.6.9
         version: 0.6.9(prettier@3.0.3)
       qunit:
         specifier: 2.19.4