diff --git a/app/components/HeroBanner.js b/app/components/HeroBanner.js
index af595c9..3fe84c8 100644
--- a/app/components/HeroBanner.js
+++ b/app/components/HeroBanner.js
@@ -30,7 +30,7 @@ const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => {
           </div>
 
           {/* Hero Image Container */}
-          <div className="w-full md:flex-1 rounded-[8px] overflow-hidden relative z-10 flex items-center justify-center">
+          <div className="w-full h-full md:flex-1 rounded-[8px] overflow-hidden relative z-10 flex items-center justify-center">
             <img
               src="assets/HeroImage.png"
               alt="Hero illustration"
diff --git a/app/components/HeroDecor.js b/app/components/HeroDecor.js
index ed31e4e..ab12715 100644
--- a/app/components/HeroDecor.js
+++ b/app/components/HeroDecor.js
@@ -3,7 +3,7 @@
 const HeroDecor = ({ className = "" }) => {
   return (
     <svg
-      className={`text-[#FDFAA8] opacity-50 ${className}`}
+      className={`text-[var(--color-surface-default-brand-lighter-accent)] opacity-50 ${className}`}
       viewBox="0 0 1540 645"
       aria-hidden="true"
       overflow="visible"