diff --git a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
index 657bc3bcdb..3a7c03a716 100644
--- a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
+++ b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
@@ -1,5 +1,6 @@
 <script>
   import { notificationStore } from "builderStore/store/notifications"
+  import { flip } from 'svelte/animate';
   import { fly } from "svelte/transition"
 
   export let themes = {
@@ -26,6 +27,7 @@
 <div class="notifications">
   {#each $notificationStore.notifications as notification (notification.id)}
     <div
+      animate:flip
       class="toast"
       style="background: {themes[notification.type]};"
       transition:fly={{ y: -30 }}>
diff --git a/packages/client/src/components/NotificationDisplay.svelte b/packages/client/src/components/NotificationDisplay.svelte
index 3206c60ec7..8b6fca805e 100644
--- a/packages/client/src/components/NotificationDisplay.svelte
+++ b/packages/client/src/components/NotificationDisplay.svelte
@@ -1,4 +1,5 @@
 <script>
+    import { flip } from 'svelte/animate';
     import { fly } from "svelte/transition"
     import { getContext } from "svelte"
     const notifications = getContext("notifications")
@@ -15,6 +16,7 @@
   <div class="notifications">
     {#each $notifications as notification (notification.id)}
       <div
+        animate:flip
         class="toast"
         style="background: {themes[notification.type]};"
         transition:fly={{ y: -30 }}>