diff --git a/src/components/Dots.astro b/src/components/Dots.astro
index bc8cf0d..02cc034 100644
--- a/src/components/Dots.astro
+++ b/src/components/Dots.astro
@@ -1,3 +1,59 @@
 <div class="absolute top-0 left-0 flex h-12 w-full justify-center p-2">
-  <div class="bg-dots-light dark:bg-dots-dark h-12 w-full bg-repeat-x"></div>
+  <div class="relative h-12 w-full">
+    <!-- Base dots layer -->
+    <div class="bg-dots-light dark:bg-dots-dark absolute inset-0 bg-repeat-x"></div>
+    
+    <!-- Twinkling dots overlay - viewBox matches background SVG -->
+    <svg class="absolute inset-0 h-full w-full" viewBox="0 0 974 47" preserveAspectRatio="xMinYMin slice">
+      <!-- Positioned at exact grid coordinates (9px spacing, starting at 1) -->
+      <circle class="twinkle-dot twinkle-1" cx="10" cy="10" r="1" />
+      <circle class="twinkle-dot twinkle-2" cx="100" cy="19" r="1" />
+      <circle class="twinkle-dot twinkle-3" cx="226" cy="10" r="1" />
+      <circle class="twinkle-dot twinkle-4" cx="370" cy="1" r="1" />
+      <circle class="twinkle-dot twinkle-5" cx="478" cy="19" r="1" />
+      <circle class="twinkle-dot twinkle-6" cx="595" cy="10" r="1" />
+      <circle class="twinkle-dot twinkle-7" cx="721" cy="1" r="1" />
+      <circle class="twinkle-dot twinkle-8" cx="838" cy="19" r="1" />
+      <circle class="twinkle-dot twinkle-9" cx="919" cy="10" r="1" />
+    </svg>
+  </div>
 </div>
+
+<style>
+  .twinkle-dot {
+    opacity: 0;
+    fill: #9090A0;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .twinkle-dot {
+      fill: #667188;
+    }
+  }
+
+  .twinkle-1 { animation: twinkle 2.5s ease-in-out infinite 0.2s; }
+  .twinkle-2 { animation: twinkle 3s ease-in-out infinite 0.8s; }
+  .twinkle-3 { animation: twinkle 2.8s ease-in-out infinite 0.4s; }
+  .twinkle-4 { animation: twinkle 3.5s ease-in-out infinite 1.5s; }
+  .twinkle-5 { animation: twinkle 2.2s ease-in-out infinite 1s; }
+  .twinkle-6 { animation: twinkle 3.2s ease-in-out infinite 0s; }
+  .twinkle-7 { animation: twinkle 2.6s ease-in-out infinite 1.8s; }
+  .twinkle-8 { animation: twinkle 2.9s ease-in-out infinite 0.6s; }
+  .twinkle-9 { animation: twinkle 3.4s ease-in-out infinite 2s; }
+
+  @keyframes twinkle {
+    0%, 70%, 100% {
+      opacity: 0;
+    }
+    80%, 90% {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .twinkle-dot {
+      animation: none;
+      opacity: 0;
+    }
+  }
+</style>