diff --git a/src/_includes/main/base.njk b/src/_includes/main/base.njk
index 72458a60..830f806c 100644
--- a/src/_includes/main/base.njk
+++ b/src/_includes/main/base.njk
@@ -27,16 +27,10 @@
         <title>{{ title }} | {{ sitemeta.siteName }}</title>
     </head>
     <body>
-        {% include "main/header.njk" %}
+        {% include "main/hero.njk" %}
         {% include "main/navbar.njk" %}
         <main>
-            <!-- <aside class="left-sidebar">
-                Left sidebar content here
-            </aside> -->
             {{ content | safe }}
-            <!-- <aside class="right-sidebar">
-                Right sidebar content here
-            </aside> -->
         </main>
         {% include "main/footer.njk" %}
         {% include "main/top-btn.njk" %}
diff --git a/src/_includes/main/header.njk b/src/_includes/main/hero.njk
similarity index 93%
rename from src/_includes/main/header.njk
rename to src/_includes/main/hero.njk
index b7a902dd..3b4d5e3a 100644
--- a/src/_includes/main/header.njk
+++ b/src/_includes/main/hero.njk
@@ -1,43 +1,43 @@
-<header webc:root="override" class="main-header">
-    <div class="main-header__top-bar"></div>
-    <div class="main-header__img">
+<header class="hero">
+    <div class="hero__top-bar"></div>
+    <div class="hero__img">
         <img src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
     </div>
 </header>
 
-<style webc:keep webc:bucket="defer">
-    .main-header {
+<style>
+    .hero {
         width: 100%;
-        background-color: var(--clr-main-header-bg);
+        background-color: var(--clr-hero-bg);
         display: flex;
         flex-direction: column;
         justify-content: center;
         text-align: center;
     }
 
-    .main-header__top-bar {
+    .hero__top-bar {
         background-color: var(--clr-navbar-bg);
         width: 100%;
         padding: 0.5em 0;
     }
 
-    .main-header__img {
+    .hero__img {
         display: grid;
         place-content: center;
     }
 
-    .main-header img {
+    .hero img {
         object-fit: scale-down;
         overflow: hidden;
         filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
     }
 </style>
 
-<script webc:keep webc:bucket="defer">
-    const header = document.querySelector(".main-header");
+<script defer>
+    const hero = document.querySelector(".hero");
     const todayEvent = getTodayEvent();
-    const headerTopBarEl = document.querySelector(".main-header__top-bar");
-    const headerImgEl = document.querySelector(".main-header__img");
+    const headerTopBarEl = document.querySelector(".hero__top-bar");
+    const headerImgEl = document.querySelector(".hero__img");
 
     if (todayEvent != "No event") {
         if (todayEvent == "Leilukin's Birthday" || todayEvent == "Leilukin's Hub Anniversary") {
diff --git a/src/_includes/main/navbar.njk b/src/_includes/main/navbar.njk
index b2594a18..afa4df38 100644
--- a/src/_includes/main/navbar.njk
+++ b/src/_includes/main/navbar.njk
@@ -56,11 +56,11 @@
 
 <script defer>
     // Make the navigation bar sticky
-    // const header = document.querySelector(".main-header");
+    // const hero = document.querySelector(".hero");
     const navbar = document.querySelector(".navbar");
     window.addEventListener("scroll", e => {
         const scrollPos = window.scrollY || document.documentElement.scrollTop;
-        const stickyLine = document.querySelector(".main-header").scrollHeight - navbar.scrollHeight;
+        const stickyLine = hero.scrollHeight - navbar.scrollHeight;
         if (scrollPos > stickyLine) {
                 navbar.classList.add("sticky-nav");
         } else {
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 8c260781..82f2863b 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -26,7 +26,7 @@
     --clr-link-btn-txt: white;
     --clr-link-btn-hover: #241445;
 
-    --clr-main-header-bg: black;
+    --clr-hero-bg: black;
     --clr-navbar-bg: #222;
     --clr-navbar-link: white;
 
