diff --git a/ui/assets/css/style.css b/ui/assets/css/style.css
index 1894c280..fb8781d3 100644
--- a/ui/assets/css/style.css
+++ b/ui/assets/css/style.css
@@ -325,7 +325,10 @@ hr {
   white-space: nowrap;
 }
 
-
 .is-max-width {
   max-width: calc(100% - 10px);
 }
+
+.is-bold {
+  font-weight: bold;
+}
diff --git a/ui/components/ConditionForm.vue b/ui/components/ConditionForm.vue
index 144940c6..665b3d8c 100644
--- a/ui/components/ConditionForm.vue
+++ b/ui/components/ConditionForm.vue
@@ -149,7 +149,7 @@ const props = defineProps({
   },
 })
 
-const toast = useToast()
+const toast = useNotification()
 const form = reactive(JSON.parse(JSON.stringify(props.item)))
 const import_string = ref('')
 const showImport = useStorage('showImport', false);
diff --git a/ui/components/FloatingImage.vue b/ui/components/FloatingImage.vue
index 1ac1e289..2c346b57 100644
--- a/ui/components/FloatingImage.vue
+++ b/ui/components/FloatingImage.vue
@@ -43,7 +43,7 @@ const props = defineProps({
 });
 
 const cache = useSessionCache()
-const toast = useToast()
+const toast = useNotification()
 const url = ref()
 const error = ref(false)
 const isPreloading = ref(false)
diff --git a/ui/components/GetInfo.vue b/ui/components/GetInfo.vue
index 273312a9..5135dd2c 100644
--- a/ui/components/GetInfo.vue
+++ b/ui/components/GetInfo.vue
@@ -40,7 +40,7 @@ import { request } from '~/utils/index'
 const emitter = defineEmits(['closeModel'])
 const isLoading = ref(false)
 const data = ref({})
-const toast = useToast()
+const toast = useNotification()
 
 const props = defineProps({
   link: {
diff --git a/ui/components/History.vue b/ui/components/History.vue
index a5954de4..d77b90da 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -385,7 +385,7 @@ const emitter = defineEmits(['getInfo', 'add_new'])
 const config = useConfigStore()
 const stateStore = useStateStore()
 const socket = useSocketStore()
-const toast = useToast()
+const toast = useNotification()
 
 const selectedElms = ref([])
 const masterSelectAll = ref(false)
diff --git a/ui/components/ImageView.vue b/ui/components/ImageView.vue
index 669316d0..8a5a22a4 100644
--- a/ui/components/ImageView.vue
+++ b/ui/components/ImageView.vue
@@ -23,7 +23,7 @@ import { request } from '~/utils/index'
 const emitter = defineEmits(['closeModel'])
 const isLoading = ref(false)
 const data = ref({})
-const toast = useToast()
+const toast = useNotification()
 const image = ref('')
 
 const props = defineProps({
diff --git a/ui/components/NewDownload.vue b/ui/components/NewDownload.vue
index 172a0d48..61a415a2 100644
--- a/ui/components/NewDownload.vue
+++ b/ui/components/NewDownload.vue
@@ -189,7 +189,7 @@ const props = defineProps({
 const emitter = defineEmits(['getInfo', 'clear_form'])
 const config = useConfigStore()
 const socket = useSocketStore()
-const toast = useToast()
+const toast = useNotification()
 
 const showAdvanced = useStorage('show_advanced', false)
 const addInProgress = ref(false)
diff --git a/ui/components/NotificationForm.vue b/ui/components/NotificationForm.vue
index 87130c3f..90a9dcff 100644
--- a/ui/components/NotificationForm.vue
+++ b/ui/components/NotificationForm.vue
@@ -268,7 +268,7 @@
 <script setup>
 import { useStorage } from '@vueuse/core'
 const emitter = defineEmits(['cancel', 'submit']);
-const toast = useToast();
+const toast = useNotification();
 const props = defineProps({
   reference: {
     type: String,
diff --git a/ui/components/PresetForm.vue b/ui/components/PresetForm.vue
index 14d7b33f..7ff1a062 100644
--- a/ui/components/PresetForm.vue
+++ b/ui/components/PresetForm.vue
@@ -218,7 +218,7 @@ const props = defineProps({
 })
 
 const config = useConfigStore()
-const toast = useToast()
+const toast = useNotification()
 const form = reactive(JSON.parse(JSON.stringify(props.preset)))
 const import_string = ref('')
 const showImport = useStorage('showImport', false);
diff --git a/ui/components/TaskForm.vue b/ui/components/TaskForm.vue
index 2694803b..d544a7fa 100644
--- a/ui/components/TaskForm.vue
+++ b/ui/components/TaskForm.vue
@@ -233,7 +233,7 @@ import { useStorage } from '@vueuse/core'
 import { CronExpressionParser } from 'cron-parser'
 
 const emitter = defineEmits(['cancel', 'submit']);
-const toast = useToast();
+const toast = useNotification();
 const config = useConfigStore();
 const showImport = useStorage('showImport', false);
 const import_string = ref('');
diff --git a/ui/components/VideoPlayer.vue b/ui/components/VideoPlayer.vue
index 6a1dcd22..52c6ef1a 100644
--- a/ui/components/VideoPlayer.vue
+++ b/ui/components/VideoPlayer.vue
@@ -31,7 +31,7 @@ import { onMounted, onUpdated, ref, onUnmounted } from 'vue'
 import Hls from 'hls.js'
 import { makeDownload } from '~/utils/index'
 const config = useConfigStore()
-const toast = useToast()
+const toast = useNotification()
 
 const props = defineProps({
   item: {
diff --git a/ui/composables/useNotification.ts b/ui/composables/useNotification.ts
new file mode 100644
index 00000000..f24ee24d
--- /dev/null
+++ b/ui/composables/useNotification.ts
@@ -0,0 +1,47 @@
+import { useStorage } from '@vueuse/core'
+import { useToast } from "vue-toastification"
+
+type notificationType = 'info' | 'success' | 'warning' | 'error'
+type notificationOptions = {
+  timeout?: number
+}
+
+const allowToast = useStorage<boolean>('allow_toasts', true)
+const toast = useToast()
+
+function notify(type: notificationType, message: string, opts?: notificationOptions): void {
+  if (!allowToast.value) {
+    return;
+  }
+
+  if (!opts) {
+    opts = {}
+  }
+
+  switch (type) {
+    case 'info':
+      toast.info(message, opts)
+      break;
+    case 'success':
+      toast.success(message, opts)
+      break;
+    case 'warning':
+      toast.warning(message, opts)
+      break;
+    case 'error':
+      toast.error(message, opts)
+      break;
+    default:
+      toast.error(`Unknown notification type: ${type}. ${message}`, opts)
+      break;
+  }
+}
+
+export default function useNotification() {
+  return {
+    info: (message: string, opts?: notificationOptions) => notify('info', message, opts),
+    success: (message: string, opts?: notificationOptions) => notify('success', message, opts),
+    warning: (message: string, opts?: notificationOptions) => notify('warning', message, opts),
+    error: (message: string, opts?: notificationOptions) => notify('error', message, opts),
+  }
+}
diff --git a/ui/composables/useToast.js b/ui/composables/useToast.js
deleted file mode 100644
index 4738a4ca..00000000
--- a/ui/composables/useToast.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { useToast } from "vue-toastification";
-export default () => useToast()
diff --git a/ui/pages/browser/[...slug].vue b/ui/pages/browser/[...slug].vue
index aa80639a..c9adbd7c 100644
--- a/ui/pages/browser/[...slug].vue
+++ b/ui/pages/browser/[...slug].vue
@@ -155,7 +155,7 @@ import moment from 'moment'
 import { useStorage } from '@vueuse/core'
 
 const route = useRoute()
-const toast = useToast()
+const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
 
diff --git a/ui/pages/conditions.vue b/ui/pages/conditions.vue
index 3c0120dd..075efb03 100644
--- a/ui/pages/conditions.vue
+++ b/ui/pages/conditions.vue
@@ -113,7 +113,7 @@
 <script setup>
 import { request } from '~/utils/index'
 
-const toast = useToast()
+const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
 
diff --git a/ui/pages/logs.vue b/ui/pages/logs.vue
index 7660ddc1..87b33546 100644
--- a/ui/pages/logs.vue
+++ b/ui/pages/logs.vue
@@ -117,7 +117,7 @@ import { useStorage } from '@vueuse/core'
 
 let scrollTimeout = null
 
-const toast = useToast()
+const toast = useNotification()
 const socket = useSocketStore()
 const config = useConfigStore()
 
diff --git a/ui/pages/notifications.vue b/ui/pages/notifications.vue
index 9ca2f80d..dc57249f 100644
--- a/ui/pages/notifications.vue
+++ b/ui/pages/notifications.vue
@@ -140,7 +140,7 @@ div.is-centered {
 <script setup>
 import { request } from '~/utils/index'
 
-const toast = useToast()
+const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
 
diff --git a/ui/pages/presets.vue b/ui/pages/presets.vue
index 22c93183..90864b17 100644
--- a/ui/pages/presets.vue
+++ b/ui/pages/presets.vue
@@ -149,7 +149,7 @@ div.is-centered {
 <script setup>
 import { request } from '~/utils/index'
 
-const toast = useToast()
+const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
 
diff --git a/ui/pages/tasks.vue b/ui/pages/tasks.vue
index 0f965f67..c8e19e8b 100644
--- a/ui/pages/tasks.vue
+++ b/ui/pages/tasks.vue
@@ -122,7 +122,7 @@ import moment from 'moment'
 import { CronExpressionParser } from 'cron-parser'
 import { request } from '~/utils/index'
 
-const toast = useToast()
+const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
 
diff --git a/ui/stores/SocketStore.js b/ui/stores/SocketStore.js
index 4b83f2b2..2441b3ae 100644
--- a/ui/stores/SocketStore.js
+++ b/ui/stores/SocketStore.js
@@ -5,7 +5,7 @@ export const useSocketStore = defineStore('socket', () => {
   const runtimeConfig = useRuntimeConfig()
   const config = useConfigStore()
   const stateStore = useStateStore()
-  const toast = useToast()
+  const toast = useNotification()
 
   const socket = ref(null);
   const isConnected = ref(false);
diff --git a/ui/utils/index.js b/ui/utils/index.js
index 2998280a..74639fcb 100644
--- a/ui/utils/index.js
+++ b/ui/utils/index.js
@@ -1,6 +1,4 @@
-import { useStorage } from '@vueuse/core'
-
-const toast = useToast()
+const toast = useNotification()
 const AG_SEPARATOR = '.'
 
 /**