diff --git a/static/css/01-foundation/_themes.css b/static/css/01-foundation/_themes.css
index 9365f11..d8d9372 100644
--- a/static/css/01-foundation/_themes.css
+++ b/static/css/01-foundation/_themes.css
@@ -15,8 +15,14 @@
    LIGHT THEME (DEFAULT)
    ============================================================================== */
 :root {
-  /* Page Background - Softer version of dark theme */
-  --page-bg: #b8bbbe;
+  /* Page Background - Light gray for concentric squares pattern */
+  --page-bg: #d6d6d6;
+
+  /* Concentric Squares Pattern - Light */
+  --page-bg-pattern: repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(75, 85, 99, 0.06) 5px, rgba(75, 85, 99, 0.06) 6px, transparent 6px, transparent 15px),
+                     repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(75, 85, 99, 0.06) 5px, rgba(75, 85, 99, 0.06) 6px, transparent 6px, transparent 15px),
+                     repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(107, 114, 128, 0.04) 10px, rgba(107, 114, 128, 0.04) 11px, transparent 11px, transparent 30px),
+                     repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(107, 114, 128, 0.04) 10px, rgba(107, 114, 128, 0.04) 11px, transparent 11px, transparent 30px);
 
   /* Paper/Card Backgrounds */
   --paper-bg: #ffffff;
@@ -65,8 +71,12 @@
    DARK THEME
    ============================================================================== */
 [data-color-theme="dark"] {
-  /* Page Background - Original background */
-  --page-bg: rgb(82, 86, 89);
+  /* Page Background - Medium gray for dark pattern visibility */
+  --page-bg: #3a3a3a;
+
+  /* Diagonal Grid with Green Glow - Dark */
+  --page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.15) 0, rgba(0, 255, 128, 0.15) 1px, transparent 1px, transparent 20px),
+                     repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.15) 0, rgba(0, 255, 128, 0.15) 1px, transparent 1px, transparent 20px);
 
   /* Paper/Card Backgrounds */
   --paper-bg: #1a1a1a;
@@ -116,8 +126,12 @@
    ============================================================================== */
 @media (prefers-color-scheme: dark) {
   [data-color-theme="auto"] {
-    /* Page Background - Original background */
-    --page-bg: rgb(82, 86, 89);
+    /* Page Background - Medium gray for dark pattern visibility */
+    --page-bg: #3a3a3a;
+
+    /* Diagonal Grid with Green Glow - Dark */
+    --page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.15) 0, rgba(0, 255, 128, 0.15) 1px, transparent 1px, transparent 20px),
+                       repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.15) 0, rgba(0, 255, 128, 0.15) 1px, transparent 1px, transparent 20px);
 
     /* Paper/Card Backgrounds */
     --paper-bg: #1a1a1a;
diff --git a/static/css/01-foundation/_variables.css b/static/css/01-foundation/_variables.css
index 0846930..5a82cd4 100644
--- a/static/css/01-foundation/_variables.css
+++ b/static/css/01-foundation/_variables.css
@@ -15,7 +15,13 @@
 
   /* Theme System - These get overridden by color-theme.css */
   /* Page Background */
-  --page-bg: #b8bbbe;
+  --page-bg: #d6d6d6;
+
+  /* Page Background Pattern - Concentric Squares */
+  --page-bg-pattern: repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(75, 85, 99, 0.06) 5px, rgba(75, 85, 99, 0.06) 6px, transparent 6px, transparent 15px),
+                     repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(75, 85, 99, 0.06) 5px, rgba(75, 85, 99, 0.06) 6px, transparent 6px, transparent 15px),
+                     repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(107, 114, 128, 0.04) 10px, rgba(107, 114, 128, 0.04) 11px, transparent 11px, transparent 30px),
+                     repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(107, 114, 128, 0.04) 10px, rgba(107, 114, 128, 0.04) 11px, transparent 11px, transparent 30px);
 
   /* Paper/Card Backgrounds */
   --paper-bg: #ffffff;