diff --git a/frontend/src/components/marketing/Hero.tsx b/frontend/src/components/marketing/Hero.tsx
index 11ca41f..7db2eff 100644
--- a/frontend/src/components/marketing/Hero.tsx
+++ b/frontend/src/components/marketing/Hero.tsx
@@ -68,22 +68,22 @@ const Hero: React.FC = () => {
 
           {/* Visual Content */}
           <div className="relative lg:ml-auto w-full max-w-lg lg:max-w-none mx-auto">
-            <div className="relative rounded-2xl bg-gray-900 shadow-2xl border border-gray-800 overflow-hidden aspect-[4/3] flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-900">
+            <div className="relative rounded-2xl bg-gray-100 dark:bg-gray-900 shadow-2xl border border-gray-200 dark:border-gray-800 overflow-hidden aspect-[4/3] flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900">
               {/* Abstract Representation of Marketplace/Dashboard */}
               <div className="text-center p-8">
                 <div className="inline-flex p-4 bg-brand-500/20 rounded-2xl mb-6">
-                  <CheckCircle2 className="w-16 h-16 text-brand-400" />
+                  <CheckCircle2 className="w-16 h-16 text-brand-600 dark:text-brand-400" />
                 </div>
-                <h3 className="text-2xl font-bold text-white mb-2">{t('marketing.hero.visualContent.automatedSuccess')}</h3>
-                <p className="text-gray-400">{t('marketing.hero.visualContent.autopilot')}</p>
+                <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">{t('marketing.hero.visualContent.automatedSuccess')}</h3>
+                <p className="text-gray-600 dark:text-gray-400">{t('marketing.hero.visualContent.autopilot')}</p>
 
                 <div className="mt-8 grid grid-cols-2 gap-4">
-                  <div className="bg-gray-800/50 p-3 rounded-lg border border-gray-700">
-                    <div className="text-green-400 font-bold">+24%</div>
+                  <div className="bg-white/50 dark:bg-gray-800/50 p-3 rounded-lg border border-gray-200 dark:border-gray-700">
+                    <div className="text-green-600 dark:text-green-400 font-bold">+24%</div>
                     <div className="text-xs text-gray-500">{t('marketing.hero.visualContent.revenue')}</div>
                   </div>
-                  <div className="bg-gray-800/50 p-3 rounded-lg border border-gray-700">
-                    <div className="text-blue-400 font-bold">-40%</div>
+                  <div className="bg-white/50 dark:bg-gray-800/50 p-3 rounded-lg border border-gray-200 dark:border-gray-700">
+                    <div className="text-blue-600 dark:text-blue-400 font-bold">-40%</div>
                     <div className="text-xs text-gray-500">{t('marketing.hero.visualContent.noShows')}</div>
                   </div>
                 </div>