diff --git a/src/layouts/variables.css b/src/layouts/variables.css
index 2fdbb66..46f3f46 100644
--- a/src/layouts/variables.css
+++ b/src/layouts/variables.css
@@ -26,4 +26,7 @@
   --bg-dark: #343a40;
   --bg-darker: #212529;
   --bg-darkest: #000;
+
+  --dot-grid-light: 214 32% 82%;
+  --dot-grid-dark: 215 25% 20%;
 }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 83c3074..29cf8cf 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -46,7 +46,7 @@ const avatarSize = 150
       </div>
     </div>
   </section>
-  <main>
+  <main class=".dot-grid">
     <section class="introduction-section">
       <p>
         I care about the <em>Web</em>, and I love to <em>create</em> stuff to <em
@@ -75,6 +75,24 @@ const avatarSize = 150
 </Layout>
 
 <style define:vars={{ avatarSize }}>
+  body {
+    background-image: radial-gradient(
+      circle,
+      hsl(var(--dot-grid-light)) 1px,
+      transparent 1px
+    );
+    background-size: 24px 24px;
+    background-position: -24px -24px;
+
+    @media (prefers-color-scheme: dark) {
+      background-image: radial-gradient(
+        circle,
+        hsl(var(--dot-grid-dark)) 1px,
+        transparent 1px
+      );
+    }
+  }
+
   h1 {
     margin: 0;
     color: rgba(255, 255, 255, 0.75);