diff --git a/assets/JSPCE-Cover2.png b/assets/JSPCE-Cover2.png
new file mode 100644
index 0000000..2845b8a
Binary files /dev/null and b/assets/JSPCE-Cover2.png differ
diff --git a/src/public/background-dark.png b/src/public/background-dark.png
new file mode 100644
index 0000000..2845b8a
Binary files /dev/null and b/src/public/background-dark.png differ
diff --git a/src/src/layout/Header/ThemeSwitch.astro b/src/src/layout/Header/ThemeSwitch.astro
index 89e620a..0ff5479 100644
--- a/src/src/layout/Header/ThemeSwitch.astro
+++ b/src/src/layout/Header/ThemeSwitch.astro
@@ -38,5 +38,7 @@
             localStorage.setItem("theme", currentTheme);
             switchIcon.setAttribute("src", sunImage);
         }
+
+        window.dispatchEvent(new Event("themeChanged"));
     })
 </script>
diff --git a/src/src/pages/index.astro b/src/src/pages/index.astro
index 5aab199..75e19ac 100644
--- a/src/src/pages/index.astro
+++ b/src/src/pages/index.astro
@@ -7,7 +7,7 @@ import Layout from '../layout/Layout.astro';
 	<div style={{
 		background: "url('/background.png')",
 		backgroundSize: "cover",
-	}} class="min-h-screen flex items-center justify-center">
+	}} class="min-h-screen flex items-center justify-center" id="hero">
 
 	<div>
 		<div class="text-3xl font-bold">Hello JavaScriptist 👋</div>
@@ -15,3 +15,18 @@ import Layout from '../layout/Layout.astro';
 
 	</div>
 </Layout>
+
+<script>
+	window.addEventListener("themeChanged", () => {
+		const currentTheme = localStorage.getItem("theme") || "light";
+		const hero = document.getElementById("hero");
+
+		if (currentTheme === "dark") {
+			hero.style.background = "url('/background.png')";
+			hero.style.backgroundSize = "cover";
+		}else {
+			hero.style.background = "url('/background-dark.png')";
+			hero.style.backgroundSize = "cover";
+		}
+	})
+</script>
\ No newline at end of file