diff --git a/_data/experiments.yaml b/_data/experiments.yaml
new file mode 100644
index 0000000..28bdfd8
--- /dev/null
+++ b/_data/experiments.yaml
@@ -0,0 +1,8 @@
+# Copyright (c) 2025 Damien Boisvert (AlphaGameDeveloper)
+# 
+# This software is released under the MIT License.
+# https://opensource.org/licenses/MIT
+
+## Site experiments - to be presented to alejandra :3
+experiment_post_userbio: false
+experiment_hero_humanreading: false
diff --git a/_includes/header.html b/_includes/header.html
index c478458..c23815f 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -6,7 +6,7 @@
         <span class="parish-name">{{ site.data.header.navbar.title }}</span>
         <span class="program-name d-none d-md-inline">{{ site.data.header.navbar.subtitle }}</span>
       </a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="navbar-toggler" type="button" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarContent">
diff --git a/_layouts/post.html b/_layouts/post.html
index 45a6555..388bbb6 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -51,9 +51,18 @@ <h1 class="post-title">{{ page.title }}</h1>
     <article class="post-content">
       {{ content }}
     </article>
+
+    {% if site.data.experiments.experiment_post_userbio %}
     <section id="author-tag">
       {% include author-tag.html %}
     </section>
+    {% endif %} 
+
+    <div class="post-tags">
+      {% for tag in page.tags %}
+        <span class="badge bg-secondary">{{ tag }}</span>
+      {% endfor %}
+    </div>
     <div class="post-navigation mt-5 pt-4 border-top">
       <div class="row">
         <div class="col-md-6">
diff --git a/_sass/_navigation.scss b/_sass/_navigation.scss
index 6faf763..d931bd4 100644
--- a/_sass/_navigation.scss
+++ b/_sass/_navigation.scss
@@ -18,10 +18,199 @@
   }
 }
 
+// Mobile navigation full-screen overlay
+@media (max-width: 991.98px) {
+  .navbar-collapse {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: linear-gradient(145deg, 
+      rgba(26, 26, 26, 0.98) 0%, 
+      rgba(40, 40, 40, 0.95) 50%, 
+      rgba(20, 20, 30, 0.98) 100%);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    z-index: 9999;
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(1.1);
+    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    
+    // Add subtle pattern overlay
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
+                        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
+      pointer-events: none;
+    }
+    
+    &.show {
+      opacity: 1;
+      visibility: visible;
+      transform: scale(1);
+    }
+  }
+
+  .navbar-nav {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    z-index: 1;
+  }
+
+  .nav-item {
+    transform: translateY(50px);
+    opacity: 0;
+    width: 100%;
+    max-width: 220px;
+    
+    .navbar-collapse.show & {
+      animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+      
+      &:nth-child(1) { animation-delay: 0.1s; }
+      &:nth-child(2) { animation-delay: 0.15s; }
+      &:nth-child(3) { animation-delay: 0.2s; }
+      &:nth-child(4) { animation-delay: 0.25s; }
+      &:nth-child(5) { animation-delay: 0.3s; }
+      &:nth-child(6) { animation-delay: 0.35s; }
+    }
+  }
+
+  .nav-link {
+    font-size: 1.1rem !important;
+    font-weight: 400 !important;
+    letter-spacing: 0.3px;
+    padding: 0.8rem 1.5rem !important;
+    margin: 0.2rem 0;
+    border-radius: 8px;
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    position: relative;
+    width: 100%;
+    max-width: 220px;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.9) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.03);
+    
+    // Subtle glow effect
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 8px;
+      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.2);
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+      color: white !important;
+      
+      &::before {
+        opacity: 1;
+      }
+    }
+    
+    &.active {
+      background: linear-gradient(135deg, $secondary-color, color.scale($secondary-color, $lightness: 10%));
+      border-color: $secondary-color;
+      color: white !important;
+      transform: translateY(-1px);
+      box-shadow: 0 5px 15px rgba($secondary-color, 0.3);
+      
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .navbar-toggler {
+    z-index: 10000;
+    border: none;
+    padding: 0.5rem;
+    
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  // Hamburger animation
+  .navbar-toggler-icon {
+    background-image: none;
+    width: 24px;
+    height: 2px;
+    background-color: white;
+    position: relative;
+    transition: all 0.3s ease;
+    
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 24px;
+      height: 2px;
+      background-color: white;
+      transition: all 0.3s ease;
+    }
+    
+    &::before {
+      top: -8px;
+    }
+    
+    &::after {
+      top: 8px;
+    }
+  }
+
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
+    background-color: transparent;
+    
+    &::before {
+      transform: rotate(45deg);
+      top: 0;
+    }
+    
+    &::after {
+      transform: rotate(-45deg);
+      top: 0;
+    }
+  }
+}
+
+@keyframes slideInUp {
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
 .navbar-brand {
   display: flex;
   flex-direction: column;
   line-height: 1.2;
+  z-index: 10000;
+  position: relative;
 }
 
 .parish-name {
@@ -58,3 +247,12 @@
     background-color: $secondary-color;
   }
 }
+
+// Desktop-specific styles
+@media (min-width: 992px) {
+  .navbar-nav .nav-link {
+    &.active::after {
+      display: block;
+    }
+  }
+}
diff --git a/assets/images/hero-animation.svg b/assets/images/hero-animation.svg
index 3774658..02f546f 100644
--- a/assets/images/hero-animation.svg
+++ b/assets/images/hero-animation.svg
@@ -1,3 +1,5 @@
+---
+---
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid slice">
   <!-- Sky -->
   <rect x="0" y="0" width="1000" height="600" fill="#6ab7ff" opacity="0.3" />
@@ -185,48 +187,47 @@
     </linearGradient>
   </defs>
   
-  <g transform="translate(625, 470) scale(2)">
-    <!-- Fox Group with Animation - Flipped to face left -->
+  {% if site.data.experiments.experiment_hero_humanreading %}
+  <g transform="translate(720, 520)">
+    <!-- Inner group: animation only -->
     <g>
-      <!-- Fox Body - Using Triangular Style (flipped) -->
-      <path d="M0,0 L-20,5 L-10,-15 Z" fill="#e67e22" />
+      <!-- Head -->
+      <circle cx="0" cy="-20" r="8" fill="#40361aff" stroke="#000" stroke-width="1" />
+      <!-- Eyeballs -->
+      <circle cx="-3" cy="-22" r="2" fill="#40361aff" />
+      <circle cx="3" cy="-22" r="2" fill="#40361aff" />
+      <!-- Body -->
+      <line x1="0" y1="-12" x2="0" y2="10" stroke="#000" stroke-width="2" />
       
-      <!-- Fox Head (flipped) -->
-      <path d="M-20,0 L-35,5 L-28,-12 Z" fill="#e67e22" />
+      <!-- Arms -->
+      <line x1="0" y1="-10" x2="-12" y2="0" stroke="#000" stroke-width="2" />
+      <line x1="0" y1="-10" x2="12" y2="0" stroke="#000" stroke-width="2" />
       
-      <!-- Fox Ears (flipped) -->
-      <path d="M-25,-10 L-28,-18 L-32,-8 Z" fill="#d35400" />
-      <path d="M-30,-10 L-35,-16 L-33,-7 Z" fill="#d35400" />
+      <!-- Legs -->
+      <line x1="0" y1="10" x2="-10" y2="22" stroke="#000" stroke-width="2" />
+      <line x1="0" y1="10" x2="10" y2="22" stroke="#000" stroke-width="2" />
       
-      <!-- Fox Eye (flipped) -->
-      <circle cx="-30" cy="-5" r="1.5" fill="#2c3e50" />
-      
-      <!-- Fox Tail with Gradient (now on right side) -->
-      <path d="M0,0 L15,-5 L10,5 Z" fill="url(#foxTailGradient)">
-        <animateTransform 
-          attributeName="transform"
-          type="rotate"
-          values="0;-10;0;5;0"
-          dur="3s"
-          repeatCount="indefinite"
-        />
-      </path>
-      
-      <!-- Fox Legs (flipped) -->
-      <path d="M-5,0 L-7,10 L-10,0 Z" fill="#d35400" />
-      <path d="M-15,0 L-17,10 L-20,0 Z" fill="#d35400" />
-      
-      <!-- Overall Fox Animation -->
+      <!-- Book -->
+      <rect x="-16" y="0" width="32" height="14" fill="#8b5e3c" stroke="#5a3d29" stroke-width="1.5" />
+      <line x1="-16" y1="0" x2="-16" y2="14" stroke="#5a3d29" stroke-width="1.5" />
+      <line x1="16" y1="0" x2="16" y2="14" stroke="#5a3d29" stroke-width="1.5" />
+      <line x1="-16" y1="7" x2="16" y2="7" stroke="#fff" stroke-width="0.8" />
+      <line x1="-16" y1="2" x2="16" y2="2" stroke="#fff" stroke-width="0.5" />
+      <line x1="-16" y1="12" x2="16" y2="12" stroke="#fff" stroke-width="0.5" />
+      <!-- Vertical Split -->
+      <line x1="0" y1="0" x2="0" y2="14" stroke="#5a3d29" stroke-width="1.5" />
+      <!-- Animation only applies to inner group -->
       <animateTransform 
         attributeName="transform"
-        type="translate"
-        values="0,0; 0,-2; 0,0"
-        dur="4s"
+        type="rotate"
+        values="0;2;0;-2;0"
+        dur="3s"
         repeatCount="indefinite"
       />
     </g>
   </g>
-  
+  {% endif %}
+
   <!-- Lion and Lamb on left side of cross (moved down and separated) -->
   <g transform="translate(380, 490)">
     <!-- Lion Group - More recognizable design -->
diff --git a/assets/js/healthcheck.js b/assets/js/healthcheck.js
index 10df239..697ef23 100644
--- a/assets/js/healthcheck.js
+++ b/assets/js/healthcheck.js
@@ -3,6 +3,8 @@
 // This software is released under the MIT License.
 // https://opensource.org/licenses/MIT
 
+(() => {console.log("[healthcheck] Initializing healthcheck script")})();
+
 const updateHealthStatus = () => {
     console.log("[updateHealthStatus] Checking backend health status...");
     const emojis = {
@@ -19,7 +21,8 @@ const updateHealthStatus = () => {
     const statusDot = healthElement.querySelector('.status-dot');
     const statusText = healthElement.querySelector('.status-text');
 
-    fetch(`${window.backendBaseURL}/healthcheck?fcnl=1`, {
+    let startTime = Date.now();
+    fetch(`${window.backendBaseURL}/healthcheck?fcnl=1&c=1`, { //c - server-side cache
         method: 'GET',
         cache: 'no-cache',
         headers: {
@@ -30,10 +33,15 @@ const updateHealthStatus = () => {
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
+
+            responseMilliseconds = Date.now() - startTime;
+            console.log("[updateHealthStatus] Backend health status fetched successfully. (Took " + responseMilliseconds + " ms)");
             statusDot.title = `Last checked: ${new Date().toLocaleTimeString()}`;
+            console.log("X-Cache: " + response.headers.get("X-Cache"));
             return response.json();
         })
         .then(data => {
+            console.log("[updateHealthStatus] Backend health status data:", data);
             if (data.status === 'healthy') {
                 statusDot.textContent = emojis['healthy'];
                 statusText.textContent = 'All Systems Operational';
@@ -55,9 +63,9 @@ const updateHealthStatus = () => {
         });
 }
 
-setInterval(updateHealthStatus, 60000);
+setInterval(() => {updateHealthStatus()}, 60000);
 
-document.addEventListener('DOMContentLoaded', () => {
-    console.log("[healthcheck] Firing updateHealthStatus");
-    setTimeout(() => {updateHealthStatus()}, 250);
-});
\ No newline at end of file
+// This second `setTimeout` is a workaround for Safari.
+// No idea why this works, or why it's needed, but if it ain't broke,
+// don't fix it.
+setTimeout(() => {updateHealthStatus()}, 100);
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index a86efef..3e8a49b 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -5,6 +5,7 @@
 
 document.addEventListener('DOMContentLoaded', function() {
   console.log("[main.js] Document is ready. Initializing scripts...");
+  
   // Navbar scroll behavior
   const navbar = document.querySelector('.navbar');
   
@@ -19,6 +20,100 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   }
 
+  // Mobile navigation handling
+  const navbarToggler = document.querySelector('.navbar-toggler');
+  const navbarCollapse = document.querySelector('#navbarContent');
+  const navLinks = document.querySelectorAll('.nav-link');
+  
+  if (navbarToggler && navbarCollapse) {
+    console.log("[main.js] Mobile navigation found. Setting up handlers...");
+    
+    // Ensure initial state
+    navbarCollapse.classList.add('collapse');
+    navbarToggler.classList.add('collapsed');
+    navbarToggler.setAttribute('aria-expanded', 'false');
+    
+    // Toggle mobile menu
+    navbarToggler.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      const isExpanded = this.getAttribute('aria-expanded') === 'true';
+      console.log(`[main.js] Toggler clicked. Currently expanded: ${isExpanded}`);
+      
+      if (!isExpanded) {
+        // Opening menu
+        console.log("[main.js] Opening mobile menu");
+        this.setAttribute('aria-expanded', 'true');
+        this.classList.remove('collapsed');
+        document.body.style.overflow = 'hidden';
+        navbarCollapse.style.display = 'flex';
+        navbarCollapse.classList.remove('collapse');
+        // Small delay to ensure display is set before adding show class
+        setTimeout(() => {
+          navbarCollapse.classList.add('show');
+        }, 10);
+      } else {
+        // Closing menu
+        console.log("[main.js] Closing mobile menu");
+        this.setAttribute('aria-expanded', 'false');
+        this.classList.add('collapsed');
+        document.body.style.overflow = '';
+        navbarCollapse.classList.remove('show');
+        // Wait for animation to complete before hiding
+        setTimeout(() => {
+          if (!navbarCollapse.classList.contains('show')) {
+            navbarCollapse.style.display = '';
+            navbarCollapse.classList.add('collapse');
+          }
+        }, 500);
+      }
+    });
+
+    // Close menu function
+    function closeMenu() {
+      console.log("[main.js] Closing menu via function");
+      navbarToggler.setAttribute('aria-expanded', 'false');
+      navbarToggler.classList.add('collapsed');
+      document.body.style.overflow = '';
+      navbarCollapse.classList.remove('show');
+      setTimeout(() => {
+        if (!navbarCollapse.classList.contains('show')) {
+          navbarCollapse.style.display = '';
+          navbarCollapse.classList.add('collapse');
+        }
+      }, 500);
+    }
+
+    // Close menu when clicking on a nav link (mobile)
+    navLinks.forEach(link => {
+      link.addEventListener('click', function() {
+        if (window.innerWidth < 992) {
+          closeMenu();
+        }
+      });
+    });
+
+    // Close menu when clicking outside (mobile)
+    navbarCollapse.addEventListener('click', function(e) {
+      if (e.target === this) {
+        closeMenu();
+      }
+    });
+
+    // Handle window resize
+    window.addEventListener('resize', function() {
+      if (window.innerWidth >= 992) {
+        document.body.style.overflow = '';
+        navbarCollapse.classList.remove('show');
+        navbarCollapse.style.display = '';
+        navbarCollapse.classList.add('collapse');
+        navbarToggler.setAttribute('aria-expanded', 'false');
+        navbarToggler.classList.add('collapsed');
+      }
+    });
+  }
+
   // Smooth scrolling for anchor links
   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function(e) {
diff --git a/pages/confirmation.md b/pages/confirmation.md
new file mode 100644
index 0000000..2785c28
--- /dev/null
+++ b/pages/confirmation.md
@@ -0,0 +1,44 @@
+---
+title: Confirmation Program
+permalink: /programs/confirmation
+layout: page
+---
+
+# Welcome to the Confirmation Program!
+
+> **Embark on an incredible journey of faith and discovery!**  
+> Our confirmation program is designed to help you uncover the true meaning of your faith and connect with God in a real, personal way.
+
+---
+
+## Why Confirmation?
+
+It takes more faith to believe everything came from nothing than to trust in a Supreme Being who created it all, and that Being we call **God**.
+
+But who is this God?  
+- Is He near or far?  
+- Do I matter to Him or not?  
+- Can we know Him and have a relationship with Him?  
+- And what do the Church and the sacraments have to do with it?
+
+---
+
+## What You'll Discover
+
+Our goal is to help you:
+- **Discover God**
+- **Explore the deepest truths of our faith**
+- **Find answers that will transform your life**
+
+---
+
+## Class Details
+
+**When:** Sundays, 9:30–11:00 AM  
+**First Class:** September 7th  
+**Who:** Teens entering 8th grade and older
+
+---
+
+Ready to join the adventure?  
+**Sign up for our 2025–2026 class year and let your faith shine!**
diff --git a/pages/youthgroup.md b/pages/youthgroup.md
new file mode 100644
index 0000000..884b361
--- /dev/null
+++ b/pages/youthgroup.md
@@ -0,0 +1,25 @@
+---
+title: Youth Group
+permalink: /programs/youthgroup
+layout: page
+---
+
+# Welcome to Our Youth Group!
+
+Welcome to our **Youth Group**, a vibrant space where young people can discover and use the gifts God has given them! Together, we’ll embark on a journey of faith, purpose, and connection through:
+
+- **Optional ministries** to serve the church
+- Moments of **prayer, worship**, and growing in faith
+- Opportunities to build **lasting friendships and bonds**
+
+Join us as we explore, connect, and grow together in a supportive and faith-filled community.
+
+## Meeting Details
+
+- **When:** First and third Wednesday of the month  
+    **Time:** 6:00 PM to 8:15 PM  
+    **Start Date:** September 17th  
+
+For **Mass and Confession times**, please visit the parish website.
+
+We can’t wait to see you there!