diff --git a/landing-page/src/Pages/Landing page/Home1.tsx b/landing-page/src/Pages/Landing page/Home1.tsx
index a60532686..70150c8d2 100644
--- a/landing-page/src/Pages/Landing page/Home1.tsx	
+++ b/landing-page/src/Pages/Landing page/Home1.tsx	
@@ -14,7 +14,9 @@ const ShuffleHero = () => {
   };
 
   return (
-    <section className="w-full px-8 py-12 grid grid-cols-1 md:grid-cols-2 items-center gap-8 max-w-6xl mx-auto bg-white dark:bg-black transition-colors duration-300">
+    <>
+      <div className="dotted-background" />
+      <section className="w-full px-8 py-12 grid grid-cols-1 md:grid-cols-2 items-center gap-8 max-w-6xl mx-auto bg-transparent dark:bg-transparent transition-colors duration-300 relative z-10">
       <div className="font-['Inter',_sans-serif]">
         <motion.span 
           initial={{ opacity: 0, y: 10 }}
@@ -74,7 +76,8 @@ const ShuffleHero = () => {
         </div>
       </div>
       <ShuffleGrid />
-    </section>
+      </section>
+    </>
   );
 };
 
diff --git a/landing-page/src/index.css b/landing-page/src/index.css
index 64829d001..7ffcc54a7 100644
--- a/landing-page/src/index.css
+++ b/landing-page/src/index.css
@@ -73,6 +73,22 @@
     @apply bg-background text-foreground;
   }
 
+  /* Dotted Background */
+  .dotted-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
+    background-size: 20px 20px;
+    z-index: -1;
+  }
+
+  .dark .dotted-background {
+    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
+  }
+
   /* Starry Background */
   .starry-background {
     position: fixed;