diff --git a/src/app/styles/app.css b/src/app/styles/app.css
index 0de879a..909b793 100644
--- a/src/app/styles/app.css
+++ b/src/app/styles/app.css
@@ -19,6 +19,7 @@
   --color-border-subtle: var(--neutral-300);
   --color-text-subtle: var(--neutral-500);
   --color-skeleton: var(--neutral-200);
+  --color-grid-line: rgb(0 0 0 / 0.03);
 
   /* Neutral Grays */
   --neutral-50: #fafafa;
@@ -114,6 +115,7 @@
   --color-border-subtle: rgb(255 255 255 / 0.1);
   --color-text-subtle: var(--neutral-400);
   --color-skeleton: var(--neutral-800);
+  --color-grid-line: rgb(255 255 255 / 0.05);
 
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
@@ -401,6 +403,25 @@
   background-color: color-mix(in srgb, var(--color-skeleton) 70%, transparent);
 }
 
+/* Subtle dotted-grid overlay used as a decorative background on the
+   comparison paper surface. Color and intensity auto-switch via
+   --color-grid-line. `bg-grid-sm` uses a tighter cell — typical mobile
+   choice; `bg-grid` is the default desktop cell. Pair with absolute /
+   pointer-events-none on the overlay element. */
+@utility bg-grid {
+  background-image:
+    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+@utility bg-grid-sm {
+  background-image:
+    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
+  background-size: 10px 10px;
+}
+
 /* ── Typography ───────────────────────────────────────────────── */
 
 @utility text-label-mono {
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index debff88..a5ae2de 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -288,10 +288,9 @@ $effect(() => {
             'shadow-floating-panel dark:shadow-floating-panel-dark',
         )}
     >
-        <!-- Subtle grid overlay — pointer-events-none, very low opacity -->
+        <!-- Subtle dotted-grid overlay — purely decorative. -->
         <div
-            class="absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.05] text-swiss-black dark:text-swiss-white"
-            style={gridStyle}
+            class="absolute inset-0 pointer-events-none bg-grid-sm md:bg-grid"
             aria-hidden="true"
         >
         </div>