diff --git a/src/index.css b/src/index.css
index da0c394d..1cd4d7b2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -89,6 +89,7 @@
   --media-outline-color: color-mix(in lch, var(--media-fg-color), transparent);
 
   --timing-function: cubic-bezier(0.3, 0.5, 0, 1);
+  --spring-timing-funtion: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 @media (min-resolution: 2dppx) {
@@ -447,6 +448,17 @@ kbd {
   }
 }
 
+@keyframes slide-up-smooth {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes position-object {
   0% {
     object-position: 50% 50%;
diff --git a/src/pages/status.css b/src/pages/status.css
index 49bca448..67c38ba8 100644
--- a/src/pages/status.css
+++ b/src/pages/status.css
@@ -33,7 +33,7 @@
   }
 }
 .ancestors-indicator:not([hidden]) {
-  animation: slide-up 0.3s both ease-out 0.3s;
+  animation: slide-up-smooth 0.3s both var(--spring-timing-funtion) 0.3s;
 }
 .ancestors-indicator[hidden] {
   opacity: 0;