diff --git a/unraid-ui/src/global.d.ts b/unraid-ui/src/global.d.ts
deleted file mode 100644
index c9108b0ce..000000000
--- a/unraid-ui/src/global.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/* eslint-disable no-var */
-declare global {
-  /** loaded by Toaster.vue */
-  var toast: (typeof import('vue-sonner'))['toast'];
-}
-
-// an export or import statement is required to make this file a module
-export {};
diff --git a/web/app.config.ts b/web/app.config.ts
index f542e723c..fd09f3554 100644
--- a/web/app.config.ts
+++ b/web/app.config.ts
@@ -32,10 +32,18 @@ export default {
         right: {},
       },
     },
-  },
-  toaster: {
-    position: 'bottom-right' as const,
-    expand: true,
-    duration: 5000,
+
+    //css theming/style-overrides for the toast component
+    // https://ui.nuxt.com/docs/components/toast#theme
+    toast: {},
+
+    // Also, for toasts, BUT this is imported in the Root UApp in mount-engine.ts
+    // https://ui.nuxt.com/docs/components/toast#examples
+    toaster: {
+      position: 'top-center' as const,
+      // expand: false, --> buggy
+      duration: 5000,
+      max: 3,
+    },
   },
 };
diff --git a/web/src/components/Notifications/CriticalNotifications.standalone.vue b/web/src/components/Notifications/CriticalNotifications.standalone.vue
index 783f7a099..025d30bb5 100644
--- a/web/src/components/Notifications/CriticalNotifications.standalone.vue
+++ b/web/src/components/Notifications/CriticalNotifications.standalone.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
 import { useMutation, useQuery, useSubscription } from '@vue/apollo-composable';
-
-import { AlertTriangle, Octagon } from 'lucide-vue-next';
+import { useToast } from '@nuxt/ui/composables/useToast.js';
 
 import type { FragmentType } from '~/composables/gql';
 import type {
@@ -23,6 +22,8 @@ import {
 import { useFragment } from '~/composables/gql';
 import { NotificationImportance } from '~/composables/gql/graphql';
 
+const toast = useToast();
+
 const { result, loading, error, refetch } = useQuery<
   WarningAndAlertNotificationsQuery,
   WarningAndAlertNotificationsQueryVariables
@@ -88,24 +89,24 @@ const formatTimestamp = (notification: NotificationFragmentFragment) => {
 
 const importanceMeta: Record<
   NotificationImportance,
-  { label: string; badge: string; icon: typeof AlertTriangle; accent: string }
+  { label: string; badge: string; icon: string; accent: string }
 > = {
   [NotificationImportance.ALERT]: {
     label: 'Alert',
     badge: 'bg-red-100 text-red-700 border border-red-300',
-    icon: Octagon,
+    icon: 'i-lucide-octagon',
     accent: 'text-red-600',
   },
   [NotificationImportance.WARNING]: {
     label: 'Warning',
     badge: 'bg-amber-100 text-amber-700 border border-amber-300',
-    icon: AlertTriangle,
+    icon: 'i-lucide-alert-triangle',
     accent: 'text-amber-600',
   },
   [NotificationImportance.INFO]: {
     label: 'Info',
     badge: 'bg-blue-100 text-blue-700 border border-blue-300',
-    icon: AlertTriangle,
+    icon: 'i-lucide-alert-triangle',
     accent: 'text-blue-600',
   },
 };
@@ -156,30 +157,32 @@ onNotificationAdded(({ data }) => {
 
   void refetch();
 
-  if (!globalThis.toast) {
-    return;
-  }
-
   if (notification.timestamp) {
     // Trigger the global toast in tandem with the subscription update.
     const funcMapping: Record<
       NotificationImportance,
-      (typeof globalThis)['toast']['info' | 'error' | 'warning']
+      'error' | 'warning' | 'info' | 'primary' | 'secondary' | 'success' | 'neutral'
     > = {
-      [NotificationImportance.ALERT]: globalThis.toast.error,
-      [NotificationImportance.WARNING]: globalThis.toast.warning,
-      [NotificationImportance.INFO]: globalThis.toast.info,
+      [NotificationImportance.ALERT]: 'error',
+      [NotificationImportance.WARNING]: 'warning',
+      [NotificationImportance.INFO]: 'success',
     };
-    const toast = funcMapping[notification.importance];
+    const color = funcMapping[notification.importance];
     const createOpener = () => ({
       label: 'Open',
-      onClick: () => notification.link && window.open(notification.link, '_blank', 'noopener'),
+      onClick: () => {
+        if (notification.link) {
+          window.location.assign(notification.link);
+        }
+      },
     });
 
     requestAnimationFrame(() =>
-      toast(notification.title, {
+      toast.add({
+        title: notification.title,
         description: notification.subject,
-        action: notification.link ? createOpener() : undefined,
+        color,
+        actions: notification.link ? [createOpener()] : undefined,
       })
     );
   }
@@ -190,7 +193,7 @@ onNotificationAdded(({ data }) => {
   <section class="flex flex-col gap-4 rounded-lg border border-amber-200 bg-white p-4 shadow-sm">
     <header class="flex items-center justify-between gap-3">
       <div class="flex items-center gap-2">
-        <AlertTriangle class="h-5 w-5 text-amber-600" aria-hidden="true" />
+        <UIcon name="i-lucide-alert-triangle" class="h-5 w-5 text-amber-600" aria-hidden="true" />
         <h2 class="text-base font-semibold text-gray-900">Warnings & Alerts</h2>
       </div>
       <span
@@ -217,8 +220,8 @@ onNotificationAdded(({ data }) => {
         class="grid gap-2 rounded-md border border-gray-200 p-3 transition hover:border-amber-300"
       >
         <div class="flex items-start gap-3">
-          <component
-            :is="meta.icon"
+          <UIcon
+            :name="meta.icon"
             class="mt-0.5 h-5 w-5 flex-none"
             :class="meta.accent"
             aria-hidden="true"
diff --git a/web/src/components/Notifications/Item.vue b/web/src/components/Notifications/Item.vue
index 4c0f8dee2..3a97cf937 100644
--- a/web/src/components/Notifications/Item.vue
+++ b/web/src/components/Notifications/Item.vue
@@ -64,6 +64,12 @@ const mutationError = computed(() => {
   return archive.error?.message ?? deleteNotification.error?.message;
 });
 
+const openLink = () => {
+  if (props.link) {
+    window.location.assign(props.link);
+  }
+};
+
 const reformattedTimestamp = computed<string>(() => {
   if (!props.timestamp) return '';
   const userLocale = navigator.language ?? 'en-US'; // Get the user's browser language (e.g., 'en-US', 'fr-FR')
@@ -110,7 +116,13 @@ const reformattedTimestamp = computed<string>(() => {
     <p v-if="mutationError" class="text-destructive">{{ t('common.error') }}: {{ mutationError }}</p>
 
     <div class="flex items-baseline justify-end gap-4">
-      <UButton v-if="link" :to="link" variant="link" icon="i-heroicons-link-20-solid">
+      <UButton
+        v-if="link"
+        variant="link"
+        icon="i-heroicons-link-20-solid"
+        color="neutral"
+        @click="openLink"
+      >
         {{ t('notifications.item.viewLink') }}
       </UButton>
       <UButton
diff --git a/web/src/components/Notifications/List.vue b/web/src/components/Notifications/List.vue
index f98d2e64a..151eb9c8a 100644
--- a/web/src/components/Notifications/List.vue
+++ b/web/src/components/Notifications/List.vue
@@ -5,8 +5,6 @@ import { storeToRefs } from 'pinia';
 import { useQuery } from '@vue/apollo-composable';
 import { vInfiniteScroll } from '@vueuse/components';
 
-import { CheckIcon } from '@heroicons/vue/24/solid';
-
 import type { ApolloError } from '@apollo/client/errors';
 import type { NotificationImportance as Importance, NotificationType } from '~/composables/gql/graphql';
 import type { GraphQLError } from 'graphql';
@@ -250,7 +248,7 @@ const displayErrorMessage = computed(() => {
 
     <!-- Default (empty state) -->
     <div v-else class="contents">
-      <CheckIcon class="text-unraid-green h-10 translate-y-3" />
+      <UIcon name="i-heroicons-check-20-solid" class="text-unraid-green h-10 w-10 translate-y-3" />
       {{ noNotificationsMessage }}
     </div>
   </div>
diff --git a/web/src/components/Notifications/Sidebar.vue b/web/src/components/Notifications/Sidebar.vue
index a747e7294..57693f790 100644
--- a/web/src/components/Notifications/Sidebar.vue
+++ b/web/src/components/Notifications/Sidebar.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMutation, useQuery, useSubscription } from '@vue/apollo-composable';
+import { useToast } from '@nuxt/ui/composables/useToast.js';
 
 import ConfirmDialog from '~/components/ConfirmDialog.vue';
 import {
@@ -22,6 +23,8 @@ import { useFragment } from '~/composables/gql';
 import { NotificationImportance as Importance, NotificationType } from '~/composables/gql/graphql';
 import { useConfirm } from '~/composables/useConfirm';
 
+const toast = useToast();
+
 const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation(archiveAllNotifications);
 const { mutate: deleteArchives, loading: loadingDeleteAll } = useMutation(deleteArchivedNotifications);
 const { mutate: recalculateOverview } = useMutation(resetOverview);
@@ -88,25 +91,27 @@ onNotificationAdded(({ data }) => {
   if (notif.timestamp) {
     latestNotificationTimestamp.value = notif.timestamp;
   }
-  if (!globalThis.toast) {
-    return;
-  }
 
-  const funcMapping: Record<Importance, (typeof globalThis)['toast']['info' | 'error' | 'warning']> = {
-    [Importance.ALERT]: globalThis.toast.error,
-    [Importance.WARNING]: globalThis.toast.warning,
-    [Importance.INFO]: globalThis.toast.info,
+  const funcMapping: Record<
+    Importance,
+    'error' | 'warning' | 'info' | 'primary' | 'secondary' | 'success' | 'neutral'
+  > = {
+    [Importance.ALERT]: 'error',
+    [Importance.WARNING]: 'warning',
+    [Importance.INFO]: 'success',
   };
-  const toast = funcMapping[notif.importance];
+  const color = funcMapping[notif.importance];
   const createOpener = () => ({
     label: t('notifications.sidebar.toastOpen'),
     onClick: () => window.location.assign(notif.link as string),
   });
 
   requestAnimationFrame(() =>
-    toast(notif.title, {
+    toast.add({
+      title: notif.title,
       description: notif.subject,
-      action: notif.link ? createOpener() : undefined,
+      color,
+      actions: notif.link ? [createOpener()] : undefined,
     })
   );
 });
diff --git a/web/src/components/UnraidToaster.vue b/web/src/components/UnraidToaster.vue
deleted file mode 100644
index 702a792ad..000000000
--- a/web/src/components/UnraidToaster.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-import { Toaster } from '@unraid/ui';
-
-import { useThemeStore } from '~/store/theme';
-
-const themeStore = useThemeStore();
-
-// Get dark mode from theme store
-const theme = computed(() => (themeStore.darkMode ? 'dark' : 'light'));
-
-withDefaults(
-  defineProps<{
-    position?:
-      | 'top-center'
-      | 'top-right'
-      | 'top-left'
-      | 'bottom-center'
-      | 'bottom-right'
-      | 'bottom-left';
-  }>(),
-  {
-    position: 'top-right',
-  }
-);
-</script>
-
-<template>
-  <Toaster rich-colors close-button :position="position" :theme="theme" />
-</template>
diff --git a/web/src/components/Wrapper/component-registry.ts b/web/src/components/Wrapper/component-registry.ts
index c1be8659e..1a5540626 100644
--- a/web/src/components/Wrapper/component-registry.ts
+++ b/web/src/components/Wrapper/component-registry.ts
@@ -139,11 +139,6 @@ export const componentMappings: ComponentMapping[] = [
     selector: 'unraid-color-switcher',
     appId: 'color-switcher',
   },
-  {
-    component: defineAsyncComponent(() => import('@/components/UnraidToaster.vue')),
-    selector: ['unraid-toaster', 'uui-toaster'],
-    appId: 'toaster',
-  },
   {
     component: defineAsyncComponent(() => import('../UpdateOs/TestUpdateModal.standalone.vue')),
     selector: 'unraid-test-update-modal',
diff --git a/web/src/components/Wrapper/mount-engine.ts b/web/src/components/Wrapper/mount-engine.ts
index 7c748747a..c834ad6f1 100644
--- a/web/src/components/Wrapper/mount-engine.ts
+++ b/web/src/components/Wrapper/mount-engine.ts
@@ -12,6 +12,8 @@ import { createI18nInstance, ensureLocale, getWindowLocale } from '~/helpers/i18
 import { globalPinia } from '~/store/globalPinia';
 import { useThemeStore } from '~/store/theme';
 import { ensureUnapiScope, ensureUnapiScopeForSelectors, observeUnapiScope } from '~/utils/unapiScope';
+// Import the app config to pass runtime settings (like toaster position)
+import appConfig from '../../../app.config';
 
 // Ensure Apollo client is singleton
 const apolloClient = (typeof window !== 'undefined' && window.apolloClient) || client;
@@ -223,6 +225,7 @@ export async function mountUnifiedApp() {
             UApp,
             {
               portal: portalTarget,
+              toaster: appConfig.ui.toaster,
             },
             {
               default: () => h(component, props),
diff --git a/web/src/composables/useClipboardWithToast.ts b/web/src/composables/useClipboardWithToast.ts
index c7aedd16b..655130ab0 100644
--- a/web/src/composables/useClipboardWithToast.ts
+++ b/web/src/composables/useClipboardWithToast.ts
@@ -5,6 +5,7 @@ import { useClipboard } from '@vueuse/core';
  */
 export function useClipboardWithToast() {
   const { copy, copied, isSupported } = useClipboard();
+  const toast = useToast();
 
   /**
    * Copy text and show toast
@@ -19,10 +20,7 @@ export function useClipboardWithToast() {
     if (isSupported.value) {
       try {
         await copy(text);
-        // Use global toast if available
-        if (globalThis.toast) {
-          globalThis.toast.success(successMessage);
-        }
+        toast.add({ title: successMessage, color: 'success' });
         return true;
       } catch (error) {
         console.error('Failed to copy to clipboard:', error);
@@ -43,9 +41,7 @@ export function useClipboardWithToast() {
       document.body.removeChild(textarea);
 
       if (success) {
-        if (globalThis.toast) {
-          globalThis.toast.success(successMessage);
-        }
+        toast.add({ title: successMessage, color: 'success' });
         return true;
       }
     } catch (error) {
@@ -53,9 +49,7 @@ export function useClipboardWithToast() {
     }
 
     // Both methods failed
-    if (globalThis.toast) {
-      globalThis.toast.error('Failed to copy to clipboard');
-    }
+    toast.add({ title: 'Failed to copy to clipboard', color: 'error' });
     return false;
   };