diff --git a/layout/pages/home/home-banner.ejs b/layout/pages/home/home-banner.ejs
index ba918851..6891a6bc 100755
--- a/layout/pages/home/home-banner.ejs
+++ b/layout/pages/home/home-banner.ejs
@@ -39,7 +39,7 @@
         <img src="<%- url_for(theme.home_banner.image.dark) %>" alt="home-banner-background" class="w-full h-full object-cover hidden dark:block">
     </div>
     <% } %>
-    <div class="content mt-8 flex flex-col justify-center items-center">
+    <div class="content mt-8 flex flex-col justify-center items-center transition-fade-down">
         <div class="description flex flex-col justify-center items-center w-screen font-medium text-center"
         <% if (theme.home_banner.custom_font.enable) { %>
              style="font-family: '<%- theme.home_banner.custom_font.family %>', sans-serif; !important;"
diff --git a/source/css/layout/animations.styl b/source/css/layout/animations.styl
index dc09808a..0032356c 100644
--- a/source/css/layout/animations.styl
+++ b/source/css/layout/animations.styl
@@ -7,6 +7,11 @@
   opacity 1
   transition transform 0.4s ease, opacity 0.4s ease
 
+.transition-fade-down
+  transform translateY(0)
+  opacity 1
+  transition transform 0.4s ease, opacity 0.4s ease
+
 // Define transitions for both classes
 html.is-changing
   .transition-fade
@@ -18,6 +23,11 @@ html.is-changing
     transform translateY(0)
     opacity 1
 
+  .transition-fade-down
+    transition transform 0.4s ease, opacity 0.4s ease
+    transform translateY(0)
+    opacity 1
+
 // Define states for unloaded pages
 html.is-animating
   .transition-fade
@@ -26,3 +36,7 @@ html.is-animating
   .transition-fade-up
     transform translateY(20px)
     opacity 0
+
+  .transition-fade-down
+    transform translateY(-20px)
+    opacity 0
\ No newline at end of file