diff --git a/packages/fern-dashboard/src/app/globals.css b/packages/fern-dashboard/src/app/globals.css
index be9606b596..308eb21e25 100644
--- a/packages/fern-dashboard/src/app/globals.css
+++ b/packages/fern-dashboard/src/app/globals.css
@@ -721,14 +721,21 @@ why? who knows. thanks monaco:)
 }
 
 /* Icon animations: Incidents */
-.group:hover .alert,
-.hover-animating .alert {
-  animation: alert-shake-x 0.5s ease-in-out;
+.group:hover .alert-line,
+.hover-animating .alert-line {
+  animation: alert-draw-line 0.3s ease-out;
+}
+
+.group:hover .alert-dot,
+.hover-animating .alert-dot {
+  animation: alert-show-dot 0.3s ease-out;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .group:hover .alert,
-  .hover-animating .alert {
+  .group:hover .alert-line,
+  .hover-animating .alert-line,
+  .group:hover .alert-dot,
+  .hover-animating .alert-dot {
     animation: none;
   }
 }
diff --git a/packages/fern-dashboard/src/components/navbar/AlertIconAnimated.tsx b/packages/fern-dashboard/src/components/navbar/AlertIconAnimated.tsx
index 6683735020..6355d871af 100644
--- a/packages/fern-dashboard/src/components/navbar/AlertIconAnimated.tsx
+++ b/packages/fern-dashboard/src/components/navbar/AlertIconAnimated.tsx
@@ -21,12 +21,28 @@ export function AlertIconAnimated({ className, strokeColor = "var(--green-1100)"
             aria-hidden="true"
         >
             <path
-                d="M10 6.25V10.625M10 13.75H10.0083M8.6025 2.91583L1.79083 14.375C1.34833 15.1417 1.90333 16.125 2.81333 16.125H17.1867C18.0967 16.125 18.6517 15.1417 18.2092 14.375L11.3975 2.91583C10.955 2.14917 9.845 2.14917 9.4025 2.91583H8.6025Z"
+                d="M8.6025 2.91583L1.79083 14.375C1.34833 15.1417 1.90333 16.125 2.81333 16.125H17.1867C18.0967 16.125 18.6517 15.1417 18.2092 14.375L11.3975 2.91583C10.955 2.14917 9.845 2.14917 9.4025 2.91583H8.6025Z"
                 stroke={strokeColor}
                 strokeWidth="1.5"
                 strokeLinecap="round"
                 strokeLinejoin="round"
-                className="transition-stroke-color transition"
+                className="alert-triangle transition-stroke-color transition"
+            />
+            <path
+                d="M10 6.25V10.625"
+                stroke={strokeColor}
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="alert-line transition-stroke-color transition"
+            />
+            <path
+                d="M10 13.75H10.0083"
+                stroke={strokeColor}
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="alert-dot transition-stroke-color transition"
             />
         </svg>
     );
diff --git a/packages/fern-dashboard/src/styles/_keyframe-animations.scss b/packages/fern-dashboard/src/styles/_keyframe-animations.scss
index a7bd6e46a0..4dedabb12f 100644
--- a/packages/fern-dashboard/src/styles/_keyframe-animations.scss
+++ b/packages/fern-dashboard/src/styles/_keyframe-animations.scss
@@ -101,3 +101,30 @@
     transform: translateX(2px);
   }
 }
+
+@keyframes alert-draw-line {
+  0% {
+    stroke-dasharray: 4.375;
+    stroke-dashoffset: 4.375;
+  }
+  60% {
+    stroke-dasharray: 4.375;
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dasharray: 4.375;
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes alert-show-dot {
+  0% {
+    opacity: 0;
+  }
+  60% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}