diff --git a/src/pages/index.js b/src/pages/index.js
index 69a2ff699..61f83f56c 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -19,7 +19,7 @@ export default function Home() {
       title={`Hello from ${siteConfig.title}`}
       description="Welcome to CodeHarborHub. Learn the basics to advanced concepts of web development. html, css, javascript, react, node.js, dsa, and more."
     >
-      <main>
+      <main className={styles.main__home}>
         <div className={styles.home__header}>
           <Header />
         </div>
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index c30740a91..1084b640f 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,3 +1,11 @@
+.main__home {
+  background: linear-gradient(rgb(255 255 255), rgb(255 255 255/50%));
+}
+
+[data-theme='dark'] .main__home {
+  background: linear-gradient(rgb(15 23 42), rgb(15 23 42/50%));
+}
+
 .home__header {
   margin: 1rem;
 }
diff --git a/src/pages/me.md b/src/pages/me.md
index 9c0b00e01..e48f74062 100644
--- a/src/pages/me.md
+++ b/src/pages/me.md
@@ -113,4 +113,4 @@ hide_table_of_contents: true
       <img src="https://img.shields.io/badge/Google%20AdSense-4285F4?style=for-the-badge&logo=google-adsense&logoColor=white" alt="Google AdSense" /> {" "}
       </div>
   </div>
-</div>
\ No newline at end of file
+</div>