diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 35bb261..9b9839f 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -6,8 +6,6 @@ const links = [
   { href: '/curriculum', text: 'Curriculum' },
   { href: '/contact', text: 'Contact' },
 ];
-
-// TODO: Fix so the "active" class can come from the server so it doesnt flicker
 ---
 
 <nav class="navbar navbar-expand-lg bg-body-tertiary">
@@ -25,12 +23,16 @@ const links = [
 </nav>
 
 <script>
-  // Add active class to the current link
-  const link = document.querySelector(`a[href='${location.pathname}']`);
+  const setActiveLink = () => {
+    const link = document.querySelector(`a[href='${location.pathname}']`);
 
-  if (link) {
-    link.classList.add('active');
-  }
+    if (link) {
+      link.classList.add('active');
+    }
+  };
+  // Add active class to the current link
+  document.addEventListener('astro:page-load', setActiveLink, { once: true });
+  document.addEventListener('astro:after-swap', setActiveLink);
 </script>
 
 <style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ad0e900..257eda5 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
 export interface Props {
   title: string;
 }
@@ -6,7 +7,6 @@ export interface Props {
 const { title } = Astro.props;
 import '../assets/style/global.css';
 import Navbar from '../components/Navbar.astro';
-
 ---
 
 <!DOCTYPE html>
@@ -18,6 +18,7 @@ import Navbar from '../components/Navbar.astro';
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
+    <ViewTransitions />
 
     <!-- Reset and normilize styles -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
@@ -26,14 +27,13 @@ import Navbar from '../components/Navbar.astro';
     <header>
       <Navbar />
     </header>
-    <main>
+    <main transition:animate="fade">
       <slot />
     </main>
+    <style>
+      header > :global(*) {
+        margin-left: auto;
+      }
+    </style>
   </body>
 </html>
-
-<style>
-  header > :global(*) {
-    margin-left: auto;
-  }
-</style>
