diff --git a/modules/blox-tailwind/data/themes/coffee.yaml b/modules/blox-tailwind/data/themes/coffee.yaml
index f2f8b26e..6ffdc099 100644
--- a/modules/blox-tailwind/data/themes/coffee.yaml
+++ b/modules/blox-tailwind/data/themes/coffee.yaml
@@ -18,7 +18,7 @@ hugoblox:
       primary: "#3b2313" # Mocha/Coffee bean
       secondary: "#d97706" # Caramel/Amber
       neutral: "#78716c" # Stone
-    ui:
+    surfaces:
       background: "#fffaf5" # Warm cream/milk foam
       foreground: "#3b2313" # Espresso text
       header:
@@ -34,7 +34,7 @@ hugoblox:
       primary: "#d49255" # Warm Orange/Brown crema
       secondary: "#395260" # Cool Slate Blue
       neutral: "#2b262b" # Deep Espresso (Dark Neutral)
-    ui:
+    surfaces:
       background: "#2b262b" # Deep Espresso
       foreground: "#e0cab6" # Crema
       header:
diff --git a/modules/blox-tailwind/data/themes/contrast.yaml b/modules/blox-tailwind/data/themes/contrast.yaml
index e5b1805e..4e91c637 100644
--- a/modules/blox-tailwind/data/themes/contrast.yaml
+++ b/modules/blox-tailwind/data/themes/contrast.yaml
@@ -16,7 +16,7 @@ hugoblox:
     colors:
       primary: "indigo"
       secondary: "blue"
-    ui:
+    surfaces:
       background: "#ffffff"
       foreground: "#111827"
       header:
@@ -30,7 +30,7 @@ hugoblox:
     colors:
       primary: "blue"
       secondary: "teal"
-    ui:
+    surfaces:
       background: "#0f172a"
       foreground: "#f8fafc"
       header:
diff --git a/modules/blox-tailwind/data/themes/cupcake.yaml b/modules/blox-tailwind/data/themes/cupcake.yaml
index 225bf01d..9883a02f 100644
--- a/modules/blox-tailwind/data/themes/cupcake.yaml
+++ b/modules/blox-tailwind/data/themes/cupcake.yaml
@@ -17,7 +17,7 @@ hugoblox:
       primary: "#e779c1" # Frosting Pink
       secondary: "#d946ef" # Deep Purple/Fuchsia
       neutral: "#5c4033" # Chocolate/Dark Brown
-    ui:
+    surfaces:
       background: "#faf7f5" # Vanilla/Sugar
       foreground: "#7d1f39" # Berry Jam
       header:
@@ -33,7 +33,7 @@ hugoblox:
       primary: "#f472b6" # Bright Icing Pink (Pink-400)
       secondary: "#c084fc" # Purple Sprinkle (Purple-400)
       neutral: "#831843" # Deep Berry (Pink-900)
-    ui:
+    surfaces:
       background: "#4c0519" # Deep Red Velvet / Rose-950
       foreground: "#fce7f3" # Sweet Cream / Pink-100
       header:
diff --git a/modules/blox-tailwind/data/themes/default.yaml b/modules/blox-tailwind/data/themes/default.yaml
index 38fbfa86..27e38aa4 100644
--- a/modules/blox-tailwind/data/themes/default.yaml
+++ b/modules/blox-tailwind/data/themes/default.yaml
@@ -15,7 +15,7 @@ hugoblox:
     colors:
       primary: "indigo"
       secondary: "blue"
-    ui:
+    surfaces:
       background: "#ffffff"
       foreground: "#111827"
       header:
@@ -29,7 +29,7 @@ hugoblox:
     colors:
       primary: "blue"
       secondary: "teal"
-    ui:
+    surfaces:
       background: "#0f172a"
       foreground: "#f8fafc"
       header:
diff --git a/modules/blox-tailwind/data/themes/dracula.yaml b/modules/blox-tailwind/data/themes/dracula.yaml
index 71a892b6..98d5c4ef 100644
--- a/modules/blox-tailwind/data/themes/dracula.yaml
+++ b/modules/blox-tailwind/data/themes/dracula.yaml
@@ -18,7 +18,7 @@ hugoblox:
       primary: "#ff79c6" # Pink
       secondary: "#bd93f9" # Purple
       neutral: "#6272a4" # Comment
-    ui:
+    surfaces:
       background: "#282a36" # Background
       foreground: "#f8f8f2" # Foreground
       header:
@@ -34,7 +34,7 @@ hugoblox:
       primary: "#d03282" # Darker Pink for contrast
       secondary: "#9259d6" # Darker Purple for contrast
       neutral: "#44475a" # Current Line (Dark Gray)
-    ui:
+    surfaces:
       background: "#f8f8f2" # Light Gray
       foreground: "#282a36" # Dark Gray
       header:
diff --git a/modules/blox-tailwind/data/themes/marine.yaml b/modules/blox-tailwind/data/themes/marine.yaml
index 3a27e524..bf1db527 100644
--- a/modules/blox-tailwind/data/themes/marine.yaml
+++ b/modules/blox-tailwind/data/themes/marine.yaml
@@ -17,7 +17,7 @@ hugoblox:
       primary: "#2dd4bf" # Teal/Cyan
       secondary: "#a855f7" # Purple
       neutral: "#1e3a8a" # Deep Blue
-    ui:
+    surfaces:
       background: "#1e3a8a" # Deep Ocean Blue
       foreground: "#e0f2fe" # Light Sky
       header:
@@ -32,7 +32,7 @@ hugoblox:
     colors:
       primary: "#2dd4bf"
       secondary: "#a855f7"
-    ui:
+    surfaces:
       background: "#f0f9ff"
       foreground: "#0c4a6e"
       header:
diff --git a/modules/blox-tailwind/data/themes/matcha.yaml b/modules/blox-tailwind/data/themes/matcha.yaml
index 770cf54c..a3619f35 100644
--- a/modules/blox-tailwind/data/themes/matcha.yaml
+++ b/modules/blox-tailwind/data/themes/matcha.yaml
@@ -18,7 +18,7 @@ hugoblox:
       primary: "#65a30d" # Fresh Tea Leaf (Lime-600)
       secondary: "#15803d" # Deep Herbal Green (Green-700)
       neutral: "#3f6212" # Olive text (Lime-800)
-    ui:
+    surfaces:
       background: "#f7fee7" # Very pale lime cream (Lime-50)
       foreground: "#1a2e05" # Dark moss text
       header:
@@ -34,7 +34,7 @@ hugoblox:
       primary: "#a3e635" # Vibrant Matcha Powder (Lime-400)
       secondary: "#4ade80" # Soft green light (Green-400)
       neutral: "#1a2f23" # Deep Forest Background
-    ui:
+    surfaces:
       background: "#14281d" # Deep Nori Green
       foreground: "#ecfccb" # Pale tea green text
       header:
diff --git a/modules/blox-tailwind/data/themes/minimal.yaml b/modules/blox-tailwind/data/themes/minimal.yaml
index b7c944c0..71abe1d8 100644
--- a/modules/blox-tailwind/data/themes/minimal.yaml
+++ b/modules/blox-tailwind/data/themes/minimal.yaml
@@ -18,7 +18,7 @@ hugoblox:
       primary: "#0969da" # GitHub Blue
       secondary: "#1f883d" # GitHub Green
       neutral: "#24292f" # GitHub Dark Gray (Text)
-    ui:
+    surfaces:
       background: "#ffffff"
       foreground: "#24292f"
       header:
@@ -34,7 +34,7 @@ hugoblox:
       primary: "#58a6ff" # GitHub Blue (Dark Mode)
       secondary: "#238636" # GitHub Green (Dark Mode)
       neutral: "#c9d1d9" # GitHub Light Gray (Text)
-    ui:
+    surfaces:
       background: "#0d1117" # GitHub Dimmed BG
       foreground: "#c9d1d9"
       header:
diff --git a/modules/blox-tailwind/data/themes/retro.yaml b/modules/blox-tailwind/data/themes/retro.yaml
index 2f598c1d..c3869f70 100644
--- a/modules/blox-tailwind/data/themes/retro.yaml
+++ b/modules/blox-tailwind/data/themes/retro.yaml
@@ -18,7 +18,7 @@ hugoblox:
       primary: "#e38c89" # Desaturated Red/Pink
       secondary: "#b4e9d6" # Mint Green
       neutral: "#79726b" # Warm Stone
-    ui:
+    surfaces:
       background: "#ebe6d9" # Vintage Paper / Beige
       foreground: "#7d5e3c" # Sepia/Brown
       header:
@@ -34,7 +34,7 @@ hugoblox:
       primary: "#fbbf24" # Mustard Gold (Amber-400)
       secondary: "#f472b6" # Retro Pink (Pink-400)
       neutral: "#134e4a" # Dark Teal (Teal-900)
-    ui:
+    surfaces:
       background: "#042f2e" # Deep Petrol / Teal-950
       foreground: "#ccfbf1" # Pale Mint / Teal-50
       header:
diff --git a/modules/blox-tailwind/data/themes/solar.yaml b/modules/blox-tailwind/data/themes/solar.yaml
index 47e0625f..791d0846 100644
--- a/modules/blox-tailwind/data/themes/solar.yaml
+++ b/modules/blox-tailwind/data/themes/solar.yaml
@@ -18,7 +18,7 @@ hugoblox:
       primary: "#b58900" # Yellow (Solarized)
       secondary: "#2aa198" # Cyan (Solarized)
       neutral: "#657b83" # Base00 (Primary Content)
-    ui:
+    surfaces:
       background: "#fdf6e3" # Base3 (Creamy Background)
       foreground: "#586e75" # Base01 (Optional darker text for contrast)
       header:
@@ -34,7 +34,7 @@ hugoblox:
       primary: "#268bd2" # Blue (Solarized)
       secondary: "#859900" # Green (Solarized)
       neutral: "#839496" # Base0 (Primary Content)
-    ui:
+    surfaces:
       background: "#002b36" # Base03 (Deep Teal Background)
       foreground: "#93a1a1" # Base1 (Light Content)
       header:
diff --git a/modules/blox-tailwind/data/themes/synthwave.yaml b/modules/blox-tailwind/data/themes/synthwave.yaml
index 92783501..f65f64f3 100644
--- a/modules/blox-tailwind/data/themes/synthwave.yaml
+++ b/modules/blox-tailwind/data/themes/synthwave.yaml
@@ -17,7 +17,7 @@ hugoblox:
       primary: "#e779c1" # Neon Pink
       secondary: "#58c7f3" # Cyan
       neutral: "#2a2e37" # Dark Blue-Gray
-    ui:
+    surfaces:
       background: "#1a103d" # Deep Purple
       foreground: "#f9f7fd" # Light Lavender
       header:
@@ -33,7 +33,7 @@ hugoblox:
       primary: "#d946ef" # Electric Fuchsia
       secondary: "#06b6d4" # Neon Cyan
       neutral: "#701a75" # Deep Magenta (for text utilities)
-    ui:
+    surfaces:
       background: "#fff0f5" # Lavender Blush
       foreground: "#2e1065" # Deep Violet Ink
       header:
diff --git a/modules/blox-tailwind/layouts/_partials/functions/get_theme_config.html b/modules/blox-tailwind/layouts/_partials/functions/get_theme_config.html
index 817e9424..a0259ca0 100644
--- a/modules/blox-tailwind/layouts/_partials/functions/get_theme_config.html
+++ b/modules/blox-tailwind/layouts/_partials/functions/get_theme_config.html
@@ -80,7 +80,7 @@
     "colors" $colors
     "colors_light" $colors_light
     "colors_dark" $colors_dark
-    "surfaces" $surfaces
+    "ui" $ui
     "typography" $typography
     "layout" $layout
 }}
diff --git a/modules/blox-tailwind/layouts/_partials/functions/theme_generator.html b/modules/blox-tailwind/layouts/_partials/functions/theme_generator.html
index 58c363a3..a13a7234 100644
--- a/modules/blox-tailwind/layouts/_partials/functions/theme_generator.html
+++ b/modules/blox-tailwind/layouts/_partials/functions/theme_generator.html
@@ -8,7 +8,7 @@
     - colors: Global color overrides { primary, secondary, neutral }
     - colors_light: Light-mode specific color overrides
     - colors_dark: Dark-mode specific color overrides
-    - ui: Semantic UI overrides
+    - surfaces: Semantic surface color overrides
 */}}
 
 {{ $config := . }}
@@ -17,7 +17,7 @@
 {{ $global_colors := $config.colors | default dict }}
 {{ $colors_light := $config.colors_light | default dict }}
 {{ $colors_dark := $config.colors_dark | default dict }}
-{{ $ui_overrides := $config.ui | default dict }}
+{{ $surfaces_overrides := $config.surfaces | default dict }}
 
 {{/* Load Theme Data using the new loader */}}
 {{ if not site.Data.themes }}
@@ -74,13 +74,13 @@
   
   {{ $light_base = merge $light_base (dict "colors" $light_colors) }}
   
-  {{/* Apply UI overrides */}}
-  {{ if $ui_overrides }}
-    {{ $light_ui := merge (dict) ($light_base.ui | default dict) }}
-    {{ range $key, $value := $ui_overrides }}
-      {{ $light_ui = merge $light_ui (dict $key $value) }}
+  {{/* Apply surface overrides */}}
+  {{ if $surfaces_overrides }}
+    {{ $light_surfaces := merge (dict) ($light_base.surfaces | default dict) }}
+    {{ range $key, $value := $surfaces_overrides }}
+      {{ $light_surfaces = merge $light_surfaces (dict $key $value) }}
     {{ end }}
-    {{ $light_base = merge $light_base (dict "ui" $light_ui) }}
+    {{ $light_base = merge $light_base (dict "surfaces" $light_surfaces) }}
   {{ end }}
 {{ end }}
 
@@ -112,13 +112,13 @@
   
   {{ $dark_base = merge $dark_base (dict "colors" $dark_colors) }}
   
-  {{/* Apply UI overrides */}}
-  {{ if $ui_overrides }}
-    {{ $dark_ui := merge (dict) ($dark_base.ui | default dict) }}
-    {{ range $key, $value := $ui_overrides }}
-      {{ $dark_ui = merge $dark_ui (dict $key $value) }}
+  {{/* Apply surface overrides */}}
+  {{ if $surfaces_overrides }}
+    {{ $dark_surfaces := merge (dict) ($dark_base.surfaces | default dict) }}
+    {{ range $key, $value := $surfaces_overrides }}
+      {{ $dark_surfaces = merge $dark_surfaces (dict $key $value) }}
     {{ end }}
-    {{ $dark_base = merge $dark_base (dict "ui" $dark_ui) }}
+    {{ $dark_base = merge $dark_base (dict "surfaces" $dark_surfaces) }}
   {{ end }}
 {{ end }}
 
diff --git a/modules/blox-tailwind/layouts/_partials/functions/theme_variables.html b/modules/blox-tailwind/layouts/_partials/functions/theme_variables.html
index c86f131c..318e3de6 100644
--- a/modules/blox-tailwind/layouts/_partials/functions/theme_variables.html
+++ b/modules/blox-tailwind/layouts/_partials/functions/theme_variables.html
@@ -13,14 +13,14 @@
   {{ partial "functions/generate_color_scale" (dict "name" "gray" "color" $data.colors.neutral) }}
 {{ end }}
 
-{{/* 2. Semantic Surface Variables */}}
---color-background: {{ $data.surfaces.background | default "#ffffff" }};
---color-foreground: {{ $data.surfaces.foreground | default "#000000" }};
+{{/* 2. Semantic UI Variables */}}
+--color-background: {{ $data.ui.background | default "#ffffff" }};
+--color-foreground: {{ $data.ui.foreground | default "#000000" }};
 
 {{/* Header */}}
---color-header-bg: {{ $data.surfaces.header.background | default $data.surfaces.background | default "#ffffff" }};
---color-header-fg: {{ $data.surfaces.header.foreground | default $data.surfaces.foreground | default "#000000" }};
+--color-header-bg: {{ $data.ui.header.background | default $data.ui.background | default "#ffffff" }};
+--color-header-fg: {{ $data.ui.header.foreground | default $data.ui.foreground | default "#000000" }};
 
 {{/* Footer */}}
---color-footer-bg: {{ $data.surfaces.footer.background | default $data.surfaces.background | default "#f3f4f6" }};
---color-footer-fg: {{ $data.surfaces.footer.foreground | default $data.surfaces.foreground | default "#000000" }};
+--color-footer-bg: {{ $data.ui.footer.background | default $data.ui.background | default "#f3f4f6" }};
+--color-footer-fg: {{ $data.ui.footer.foreground | default $data.ui.foreground | default "#000000" }};