diff --git a/src/components/widgets/Hero3.astro b/src/components/widgets/Hero3.astro
index af6192e..abee5ae 100644
--- a/src/components/widgets/Hero3.astro
+++ b/src/components/widgets/Hero3.astro
@@ -23,7 +23,7 @@ const {
   image = await Astro.slots.render('image'),
 } = Astro.props;
 ---
-<section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
+<section class="relative dark:bg-neutral-900 md:-mt-[76px] not-prose" {...id ? { id } : {}}>
   <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
     <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index dd19eb8..ec17e2c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -160,7 +160,7 @@ const metadata = {
     </Fragment>
 
     <Fragment slot="bg">
-      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+      <div class="absolute inset-0 bg-blue-50 dark:bg-neutral-900"></div>
     </Fragment>
   </Content>
 
@@ -210,7 +210,7 @@ const metadata = {
     </Fragment>
 
     <Fragment slot="bg">
-      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+      <div class="absolute inset-0 bg-blue-50 dark:bg-neutral-900"></div>
     </Fragment>
   </Content>
 
@@ -253,7 +253,7 @@ const metadata = {
     </Fragment>
 
     <Fragment slot="bg">
-      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+      <div class="absolute inset-0 bg-blue-50 dark:bg-neutral-900"></div>
     </Fragment>
   </Content>
 
@@ -303,7 +303,7 @@ const metadata = {
     </Fragment>
 
     <Fragment slot="bg">
-      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+      <div class="absolute inset-0 bg-blue-50 dark:bg-neutral-900"></div>
     </Fragment>
   </Content>