diff --git a/src/components/hero.astro b/src/components/hero.astro
index 074c8ba..6eca4e3 100644
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@@ -11,6 +11,7 @@ const count = soundCount();
 <div class="hero">
   <Container>
     <div class="wrapper">
+      <div class="pattern"></div>
       <img
         alt="Faded Moodist Logo"
         aria-hidden="true"
@@ -39,7 +40,24 @@ const count = soundCount();
 
     .wrapper {
       position: relative;
-      padding: 100px 0 80px;
+      padding: 120px 0 80px;
+
+      & .pattern {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+        background-image: radial-gradient(
+          var(--color-neutral-500) 5%,
+          transparent 5%
+        );
+        background-position: top center;
+        background-size: 21px 21px;
+        opacity: 0.8;
+        mask-image: linear-gradient(#fff, transparent, transparent);
+      }
     }
 
     & .logo {