diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index 8e62c7a63b..2f514c4b68 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -154,6 +154,21 @@ module.exports = {
           900: "#f3f4f6",
         },
       },
+      keyframes: {
+        "fade-in-up": {
+          "0%": {
+            opacity: 0.75,
+            transform: "translateY(20px)",
+          },
+          "100%": {
+            opacity: 1,
+            transform: "translateY(0)",
+          },
+        },
+      },
+      animation: {
+        "fade-in-up": "fade-in-up 0.35s cubic-bezier(.21,1.02,.73,1)",
+      },
       boxShadow: {
         dropdown: "0px 2px 6px -1px rgba(0, 0, 0, 0.08)",
       },
diff --git a/packages/ui/v2/core/notifications.tsx b/packages/ui/v2/core/notifications.tsx
index 428b316d62..6b78b63586 100644
--- a/packages/ui/v2/core/notifications.tsx
+++ b/packages/ui/v2/core/notifications.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { Check, Info } from "react-feather";
 import toast from "react-hot-toast";
 
@@ -5,8 +6,12 @@ export default function showToast(message: string, variant: "success" | "warning
   switch (variant) {
     case "success":
       toast.custom(
-        () => (
-          <div className="data-testid-toast-success bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md">
+        (t) => (
+          <div
+            className={classNames(
+              "data-testid-toast-success bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md",
+              t.visible && "animate-fade-in-up"
+            )}>
             <Check className="h-4 w-4" />
             <p>{message}</p>
           </div>
@@ -16,8 +21,12 @@ export default function showToast(message: string, variant: "success" | "warning
       break;
     case "error":
       toast.custom(
-        () => (
-          <div className="mb-2 flex h-9 items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md">
+        (t) => (
+          <div
+            className={classNames(
+              "animate-fade-in-up mb-2 flex h-9 items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md",
+              t.visible && "animate-fade-in-up"
+            )}>
             <Info className="h-4 w-4" />
             <p>{message}</p>
           </div>
@@ -27,8 +36,12 @@ export default function showToast(message: string, variant: "success" | "warning
       break;
     case "warning":
       toast.custom(
-        () => (
-          <div className="bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md">
+        (t) => (
+          <div
+            className={classNames(
+              "animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md",
+              t.visible && "animate-fade-in-up"
+            )}>
             <Info className="h-4 w-4" />
             <p>{message}</p>
           </div>
@@ -38,8 +51,12 @@ export default function showToast(message: string, variant: "success" | "warning
       break;
     default:
       toast.custom(
-        () => (
-          <div className="bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md">
+        (t) => (
+          <div
+            className={classNames(
+              "animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md",
+              t.visible && "animate-fade-in-up"
+            )}>
             <Check className="h-4 w-4" />
             <p>{message}</p>
           </div>