diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f1d11a8..0c3d6f3 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -56,8 +56,16 @@ const { title, description, icon } = Astro.props;
 </html>
 
 <style>
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(10%);
+    }
+  }
+
   body {
     background-color: var(--background);
+    animation: fade-in 1s;
   }
 </style>