diff --git a/frontend/src/components/HowItWorks.tsx b/frontend/src/components/HowItWorks.tsx
index fa963903..69a94479 100644
--- a/frontend/src/components/HowItWorks.tsx
+++ b/frontend/src/components/HowItWorks.tsx
@@ -28,7 +28,7 @@ export const HowItWorks: React.FC = () => {
         borderTop: '1px solid var(--border-color, rgba(128, 128, 128, 0.2))',
       }}
     >
-      <h3 style={{ marginBottom: '1.5rem', fontSize: '1.2rem', fontWeight: '600' }}>
+      <h3 style={{ marginBottom: '1.5rem', fontSize: '1.2rem', fontWeight: '600', color: 'var(--card-text)' }}>
         How It Works
       </h3>
 
@@ -40,24 +40,25 @@ export const HowItWorks: React.FC = () => {
               flex: '1 1 250px',
               minWidth: '250px',
               padding: '24px 20px',
-              background: 'var(--card-bg, rgba(128, 128, 128, 0.05))',
+              background: 'var(--card-bg)',
               borderRadius: 'var(--radius-md, 8px)',
               border: '1px solid var(--border-color, rgba(128, 128, 128, 0.1))',
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
               textAlign: 'center',
+              color: 'var(--card-text)',
             }}
           >
             <div style={{ color: '#818cf8', marginBottom: '16px' }}>{step.icon}</div>
-            <h4 style={{ margin: '0 0 8px 0', fontSize: '1.05rem', fontWeight: '600' }}>
+            <h4 style={{ margin: '0 0 8px 0', fontSize: '1.05rem', fontWeight: '600', color: 'var(--card-text)' }}>
               {step.title}
             </h4>
             <p
               style={{
                 margin: 0,
                 fontSize: 'var(--font-size-sm, 0.875rem)',
-                opacity: 0.8,
+                color: 'var(--card-text)',
                 lineHeight: '1.5',
               }}
             >