diff --git a/front/components/ui/sonner/Sonner.vue b/front/components/ui/sonner/Sonner.vue
new file mode 100644
index 0000000..ead30fc
--- /dev/null
+++ b/front/components/ui/sonner/Sonner.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import type { ToasterProps } from 'vue-sonner'
+import 'vue-sonner/style.css'
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from '@lucide/vue'
+import { Toaster as Sonner } from 'vue-sonner'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+    <Sonner
+        :class="cn('toaster group', props.class)"
+        :style="{
+            '--normal-bg': 'var(--popover)',
+            '--normal-text': 'var(--popover-foreground)',
+            '--normal-border': 'var(--border)',
+            '--border-radius': 'var(--radius)',
+        }"
+        v-bind="props"
+    >
+        <template #success-icon>
+            <CircleCheckIcon class="size-4" />
+        </template>
+        <template #info-icon>
+            <InfoIcon class="size-4" />
+        </template>
+        <template #warning-icon>
+            <TriangleAlertIcon class="size-4" />
+        </template>
+        <template #error-icon>
+            <OctagonXIcon class="size-4" />
+        </template>
+        <template #loading-icon>
+            <div>
+                <Loader2Icon class="size-4 animate-spin" />
+            </div>
+        </template>
+        <template #close-icon>
+            <XIcon class="size-4" />
+        </template>
+    </Sonner>
+</template>
diff --git a/front/components/ui/sonner/index.ts b/front/components/ui/sonner/index.ts
new file mode 100644
index 0000000..0d4a642
--- /dev/null
+++ b/front/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue'
diff --git a/front/layouts/default.vue b/front/layouts/default.vue
index 0a653e6..91c3ed0 100644
--- a/front/layouts/default.vue
+++ b/front/layouts/default.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Toaster } from 'vue-sonner'
+import { Toaster } from '@/components/ui/sonner'
 const { locale } = useI18n()
 await useSeo({ locale: locale.value })
 const appConfig = useMyAppConfig()