diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro
index a2c8fc1..44759a9 100644
--- a/src/components/GlobalStyles.astro
+++ b/src/components/GlobalStyles.astro
@@ -245,4 +245,33 @@ color_set({
     }
 }
 
+@keyframes fade-in-up {
+    0% {
+        transform: translateY(2rem);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+.onload-animation {
+    opacity: 0;
+    animation: 600ms fade-in-up;
+    animation-fill-mode: forwards;
+}
+#top-row {
+    animation-delay: 0ms
+}
+#sidebar {
+    animation-delay: 150ms
+}
+#content-wrapper {
+    animation-delay: 350ms;
+}
+#footer {
+    animation-delay: 500ms;
+}
+
+
 </style>
\ No newline at end of file
diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
index 52276b8..c7cabc6 100644
--- a/src/layouts/MainGridLayout.astro
+++ b/src/layouts/MainGridLayout.astro
@@ -22,12 +22,13 @@ const enableBanner = siteConfig.banner.enable
 <div class="max-w-[var(--page-width)] min-h-screen grid grid-cols-[17.5rem_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
     mx-auto gap-4 relative px-0 md:px-4"
 >
-    <div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={[""]}>
+    <div id="top-row" class="col-span-2 grid-rows-1 z-50 onload-animation" class:list={[""]}>
+        <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->
         <Navbar></Navbar>
     </div>
-    <SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[17.5rem]"></SideBar>
+    <SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[17.5rem] onload-animation"></SideBar>
 
-    <div class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden">
+    <div id="content-wrapper" class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden onload-animation">
         <!-- the overflow-hidden here prevent long text break the layout-->
         <main id="swup" class="transition-fade">
             <slot></slot>
@@ -35,7 +36,7 @@ const enableBanner = siteConfig.banner.enable
 
     </div>
 
-    <div class="grid-rows-3 col-span-2 mt-4">
+    <div id="footer" class="grid-rows-3 col-span-2 mt-4 onload-animation">
         <Footer></Footer>
     </div>
     <BackToTop></BackToTop>