diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index f97a6d1..37db28c 100755
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -11,6 +11,8 @@
     --ui-header-navbar-height: calc(var(--spacing)*10);
 
     --ui-bg-container: oklch(0.9557 0.1104 102.71);
+    --ui-primary-container: oklch(0.97 0.005 102.71);
+    --ui-on-primary-container: oklch(0.364 0.007 82.5);
     --ui-bg-container-bd: oklch(0.85 0.1104 102.71);
     --ui-on-bg-container: oklch(0.4644 0.0554 82.5);
 
@@ -82,7 +84,7 @@ body {
     @apply bg-linear-[to_bottom,var(--ui-primary)_0%,var(--ui-primary-light)_90%] text-white;
 }
 .hero-section {
-    @apply py-16 drop-shadow-md bg-green-50 bg-cover bg-center;
+    @apply py-16 drop-shadow-md bg-(--ui-primary-container) text-(--ui-on-primary-container) bg-cover bg-center;
 }
 .hero-section > .container > .brace {
     @apply my-4;