diff --git a/src/index.css b/src/index.css
index 4f90acfb7..7c67ed73f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -31,7 +31,7 @@
     @apply font-sans;
     line-height: 1.6;
 
-    background-color: #0f0f0f;
+    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
     color: #ffffff;
     z-index: -1;
     position: absolute;
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index bbc74a653..b590b4109 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -46,20 +46,17 @@ const Login = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative flex items-center justify-center">
-      {/* Background pattern */}
-      <div className="absolute inset-0 bg-noise opacity-30"></div>
-
+    <div className="min-h-screen relative flex items-center justify-center">
       {/* Main content */}
       <div className="relative z-10 max-w-md w-full mx-4">
         {/* Login/Signup card */}
         <div className="glass rounded-3xl p-8 shadow-large animate-fade-up">
           {/* Header */}
           <div className="text-center mb-8">
-            <h1 className="text-2xl font-bold text-stone-900 mb-2">
+            <h1 className="text-2xl font-bold mb-2">
               Join the Community
             </h1>
-            <p className="text-stone-600">
+            <p className="opacity-70">
               Choose your preferred method to get started
             </p>
           </div>
@@ -75,7 +72,7 @@ const Login = () => {
                 placeholder="(000) 000-0000"
                 className="input-primary rounded-xl pl-20"
               />
-              <div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center space-x-2 text-stone-500">
+              <div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center space-x-2 opacity-60">
                 <span className="text-lg">{selectedCountry.flag}</span>
                 <span className="text-sm">{selectedCountry.dialCode}</span>
               </div>
@@ -103,14 +100,14 @@ const Login = () => {
           </button>
 
           {/* Security note */}
-          <div className="mt-6 p-4 bg-sage-50 rounded-xl border border-sage-200">
+          <div className="mt-6 p-4 bg-stone-800/50 rounded-xl border border-stone-700">
             <div className="flex items-start space-x-2">
-              <svg className="w-5 h-5 text-sage-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+              <svg className="w-5 h-5 text-sage-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                 <path fillRule="evenodd" d="M10 1L5 6v4c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V6l-5-5z"/>
               </svg>
               <div>
-                <p className="text-sage-800 font-medium text-sm">Secure Authentication</p>
-                <p className="text-sage-600 text-xs mt-1">Your data is protected with enterprise-grade encryption</p>
+                <p className="font-medium text-sm">Secure Authentication</p>
+                <p className="opacity-70 text-xs mt-1">Your data is protected with enterprise-grade encryption</p>
               </div>
             </div>
           </div>
@@ -119,7 +116,7 @@ const Login = () => {
         {/* Back button */}
         <button
           onClick={() => navigate('/')}
-          className="mt-6 w-full text-stone-500 hover:text-stone-700 text-sm font-medium transition-colors"
+          className="mt-6 w-full opacity-60 hover:opacity-100 text-sm font-medium transition-opacity"
         >
           ← Back to welcome
         </button>
diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx
index 88675b08a..9c32fbb47 100644
--- a/src/pages/Welcome.tsx
+++ b/src/pages/Welcome.tsx
@@ -5,75 +5,62 @@ const Welcome = () => {
   const navigate = useNavigate();
   const [greeting] = useState(() => {
     const greetings = [
-      "Ready to make your wallet cry tears of joy? 😭💰",
-      "Time to turn those diamond hands into actual diamonds! 💎👋",
-      "Welcome to the exclusive club of crypto degenerates! 🎪🚀",
-      "Let's get you richer than a Nigerian prince's email! 👑💸",
-      "Ready to HODL like your life depends on it? 🤝💀",
-      "Welcome, future crypto millionaire (results not guaranteed)! 🎰💎",
-      "Time to make Wall Street bros jealous AF! 📈🔥",
-      "Ready to go to the moon? Pack light! 🌙🚀"
+      "Hello Satoshi! 👋",
+      "Got Crypto, Anon? 👀",
+      // "Welcome to the exclusive club of crypto degenerates! 🎪🚀",
+      // "Let's get you richer than a Nigerian prince's email! 👑💸",
+      // "Ready to HODL like your life depends on it? 🤝💀",
+      // "Welcome, future crypto millionaire (results not guaranteed)! 🎰💎",
+      // "Time to make Wall Street bros jealous AF! 📈🔥",
+      // "Ready to go to the moon? Pack light! 🌙🚀"
     ];
     return greetings[Math.floor(Math.random() * greetings.length)];
   });
 
-  const handleGetStarted = () => {
-    navigate('/login');
+  const handleTelegramLogin = () => {
+    navigate('/onboarding/step1');
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative flex items-center justify-center">
-      {/* Background pattern */}
-      <div className="absolute inset-0 bg-noise opacity-30"></div>
-
+    <div className="min-h-screen relative flex items-center justify-center">
       {/* Main content */}
       <div className="relative z-10 max-w-md w-full mx-4">
         {/* Welcome card */}
         <div className="glass rounded-3xl p-8 text-center animate-fade-up shadow-large">
-          {/* Logo/Icon placeholder */}
-          <div className="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-primary-500 to-sage-500 rounded-2xl flex items-center justify-center">
-            <svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-            </svg>
-          </div>
-
           {/* Greeting */}
-          <h1 className="text-2xl font-bold text-stone-900 mb-2">
+          <h1 className="text-2xl font-bold mb-4">
             {greeting}
           </h1>
 
-          <p className="text-stone-600 mb-8 leading-relaxed">
-            Ready to join the most exclusive crypto community? Let's get you set up with enterprise-grade security and maximum privacy.
+          {/* <br /> */}
+
+          <p className="opacity-70 mb-8 leading-relaxed">
+            Welcome to AlphaHuman. Your Telegram assistant here to get you 10x more done in your crypto journey.
           </p>
 
-          {/* Get Started button */}
-          <button
-            onClick={handleGetStarted}
-            className="btn-primary w-full py-4 text-lg font-semibold rounded-xl shadow-medium hover:shadow-large transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]"
-          >
-            Get Started
-          </button>
+          <p className="opacity-70 mb-8 leading-relaxed">
+            Are you ready to cook?
+          </p>
 
-          {/* Trust indicators */}
-          <div className="mt-6 flex items-center justify-center space-x-4 text-xs text-stone-500">
-            <span className="flex items-center space-x-1">
-              <div className="w-2 h-2 bg-sage-500 rounded-full"></div>
-              <span>SOC 2 Certified</span>
-            </span>
-            <span className="flex items-center space-x-1">
-              <div className="w-2 h-2 bg-primary-500 rounded-full"></div>
-              <span>Bank-Grade Security</span>
-            </span>
-          </div>
+          {/* Login with Telegram button */}
+          <button
+            onClick={handleTelegramLogin}
+            className="w-full flex items-center justify-center space-x-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-semibold py-4 rounded-xl transition-all duration-300 hover:shadow-medium hover:scale-[1.02] active:scale-[0.98]"
+          >
+            <svg className="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+            </svg>
+            <span>Login with Telegram</span>
+          </button>
         </div>
 
         {/* Bottom text */}
-        <p className="text-center text-stone-500 text-sm mt-6">
-          Trusted by thousands of crypto professionals worldwide
+        <p className="text-center opacity-60 text-sm mt-6">
+          Made with ❤️ by poor Web3 nerds
         </p>
       </div>
     </div>
   );
 };
 
-export default Welcome;
\ No newline at end of file
+export default Welcome;
diff --git a/src/pages/onboarding/Step1Phone.tsx b/src/pages/onboarding/Step1Phone.tsx
index ef59c0f1a..a06349151 100644
--- a/src/pages/onboarding/Step1Phone.tsx
+++ b/src/pages/onboarding/Step1Phone.tsx
@@ -50,10 +50,7 @@ const Step1Phone = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative flex items-center justify-center">
-      {/* Background pattern */}
-      <div className="absolute inset-0 bg-noise opacity-30"></div>
-
+    <div className="min-h-screen relative flex items-center justify-center">
       {/* Main content */}
       <div className="relative z-10 max-w-md w-full mx-4">
         {/* Progress indicator */}
@@ -63,19 +60,19 @@ const Step1Phone = () => {
             <div className="w-12 h-1 bg-primary-500 mx-2"></div>
           </div>
           <div className="flex items-center">
-            <div className="w-8 h-8 bg-stone-300 rounded-full flex items-center justify-center text-stone-500 text-sm font-semibold">2</div>
-            <div className="w-12 h-1 bg-stone-300 mx-2"></div>
+            <div className="w-8 h-8 bg-stone-700 rounded-full flex items-center justify-center text-white text-sm font-semibold">2</div>
+            <div className="w-12 h-1 bg-stone-700 mx-2"></div>
           </div>
-          <div className="w-8 h-8 bg-stone-300 rounded-full flex items-center justify-center text-stone-500 text-sm font-semibold">3</div>
+          <div className="w-8 h-8 bg-stone-700 rounded-full flex items-center justify-center text-white text-sm font-semibold">3</div>
         </div>
 
         {/* Phone input card */}
         <div className="glass rounded-3xl p-8 shadow-large animate-fade-up">
           <div className="text-center mb-8">
-            <h1 className="text-2xl font-bold text-stone-900 mb-2">
+            <h1 className="text-2xl font-bold mb-2">
               Verify Your Phone
             </h1>
-            <p className="text-stone-600">
+            <p className="opacity-70">
               We'll send you a secure verification code to protect your account
             </p>
           </div>
@@ -86,30 +83,30 @@ const Step1Phone = () => {
             <div className="relative">
               <button
                 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                className="w-full flex items-center justify-between p-4 bg-white border border-stone-300 rounded-xl hover:border-primary-500 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
+                className="w-full flex items-center justify-between p-4 bg-black/50 border border-stone-700 rounded-xl hover:border-primary-500 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
               >
                 <div className="flex items-center space-x-3">
                   <span className="text-2xl">{selectedCountry.flag}</span>
-                  <span className="font-medium text-stone-900">{selectedCountry.name}</span>
-                  <span className="text-stone-500">{selectedCountry.dialCode}</span>
+                  <span className="font-medium">{selectedCountry.name}</span>
+                  <span className="opacity-60">{selectedCountry.dialCode}</span>
                 </div>
-                <svg className={`w-5 h-5 text-stone-500 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} fill="currentColor" viewBox="0 0 20 20">
+                <svg className={`w-5 h-5 opacity-60 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
                 </svg>
               </button>
 
               {/* Dropdown menu */}
               {isDropdownOpen && (
-                <div className="absolute z-50 w-full mt-2 bg-white border border-stone-300 rounded-xl shadow-large max-h-60 overflow-y-auto">
+                <div className="absolute z-50 w-full mt-2 bg-black/90 border border-stone-700 rounded-xl shadow-large max-h-60 overflow-y-auto">
                   {countries.map((country) => (
                     <button
                       key={country.code}
                       onClick={() => handleCountrySelect(country)}
-                      className="w-full flex items-center space-x-3 p-3 hover:bg-stone-50 transition-colors text-left"
+                      className="w-full flex items-center space-x-3 p-3 hover:bg-stone-800 transition-colors text-left"
                     >
                       <span className="text-xl">{country.flag}</span>
-                      <span className="font-medium text-stone-900 flex-1">{country.name}</span>
-                      <span className="text-stone-500 text-sm">{country.dialCode}</span>
+                      <span className="font-medium flex-1">{country.name}</span>
+                      <span className="opacity-60 text-sm">{country.dialCode}</span>
                     </button>
                   ))}
                 </div>
@@ -125,7 +122,7 @@ const Step1Phone = () => {
                 placeholder={selectedCountry.code === 'US' ? '(000) 000-0000' : 'Phone number'}
                 className="input-primary rounded-xl pl-20"
               />
-              <div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center space-x-2 text-stone-500">
+              <div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center space-x-2 opacity-60">
                 <span>{selectedCountry.flag}</span>
                 <span className="text-sm">{selectedCountry.dialCode}</span>
               </div>
@@ -144,7 +141,7 @@ const Step1Phone = () => {
           {/* Telegram alternative */}
           <button
             onClick={handleTelegramContinue}
-            className="w-full flex items-center justify-center space-x-2 py-4 text-primary-600 font-medium rounded-xl border border-primary-200 hover:bg-primary-50 transition-colors"
+            className="w-full flex items-center justify-center space-x-2 py-4 text-primary-400 font-medium rounded-xl border border-primary-600/50 hover:bg-primary-600/20 transition-colors"
           >
             <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
               <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
@@ -153,14 +150,14 @@ const Step1Phone = () => {
           </button>
 
           {/* Security note */}
-          <div className="mt-6 p-4 bg-primary-50 rounded-xl border border-primary-200">
+          <div className="mt-6 p-4 bg-stone-800/50 rounded-xl border border-stone-700">
             <div className="flex items-start space-x-2">
-              <svg className="w-5 h-5 text-primary-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+              <svg className="w-5 h-5 text-primary-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                 <path fillRule="evenodd" d="M10 1L5 6v4c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V6l-5-5z"/>
               </svg>
               <div>
-                <p className="text-primary-800 font-medium text-sm">Your Privacy Matters</p>
-                <p className="text-primary-600 text-xs mt-1">Your phone number is encrypted and never shared with third parties</p>
+                <p className="font-medium text-sm">Your Privacy Matters</p>
+                <p className="opacity-70 text-xs mt-1">Your phone number is encrypted and never shared with third parties</p>
               </div>
             </div>
           </div>
@@ -169,7 +166,7 @@ const Step1Phone = () => {
         {/* Back button */}
         <button
           onClick={() => navigate('/login')}
-          className="mt-6 w-full text-stone-500 hover:text-stone-700 text-sm font-medium transition-colors"
+          className="mt-6 w-full opacity-60 hover:opacity-100 text-sm font-medium transition-opacity"
         >
           ← Back to login
         </button>
diff --git a/src/pages/onboarding/Step2Privacy.tsx b/src/pages/onboarding/Step2Privacy.tsx
index 5f964a03f..274590282 100644
--- a/src/pages/onboarding/Step2Privacy.tsx
+++ b/src/pages/onboarding/Step2Privacy.tsx
@@ -8,10 +8,7 @@ const Step2Privacy = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative flex items-center justify-center">
-      {/* Background pattern */}
-      <div className="absolute inset-0 bg-noise opacity-30"></div>
-
+    <div className="min-h-screen relative flex items-center justify-center">
       {/* Main content */}
       <div className="relative z-10 max-w-md w-full mx-4">
         {/* Progress indicator */}
@@ -22,18 +19,18 @@ const Step2Privacy = () => {
           </div>
           <div className="flex items-center">
             <div className="w-8 h-8 bg-primary-500 rounded-full flex items-center justify-center text-white text-sm font-semibold">2</div>
-            <div className="w-12 h-1 bg-stone-300 mx-2"></div>
+            <div className="w-12 h-1 bg-stone-700 mx-2"></div>
           </div>
-          <div className="w-8 h-8 bg-stone-300 rounded-full flex items-center justify-center text-stone-500 text-sm font-semibold">3</div>
+          <div className="w-8 h-8 bg-stone-700 rounded-full flex items-center justify-center text-white text-sm font-semibold">3</div>
         </div>
 
         {/* Privacy card */}
         <div className="glass rounded-3xl p-8 shadow-large animate-fade-up">
           <div className="text-center mb-8">
-            <h1 className="text-2xl font-bold text-stone-900 mb-2">
+            <h1 className="text-2xl font-bold mb-2">
               Privacy
             </h1>
-            <p className="text-stone-600">
+            <p className="opacity-70">
               Your security and privacy are our top priorities
             </p>
           </div>
@@ -41,7 +38,7 @@ const Step2Privacy = () => {
           {/* Enterprise-Grade Security Section */}
           <div className="space-y-6 mb-8">
             {/* Enterprise-Grade Security */}
-            <div className="bg-sage-50 rounded-xl p-6 border border-sage-200">
+            <div className="bg-stone-800/50 rounded-xl p-6 border border-stone-700">
               <div className="flex items-start space-x-4">
                 <div className="w-12 h-12 bg-sage-500 rounded-xl flex items-center justify-center flex-shrink-0">
                   <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
@@ -49,8 +46,8 @@ const Step2Privacy = () => {
                   </svg>
                 </div>
                 <div>
-                  <h3 className="font-semibold text-sage-900 mb-2">Enterprise-Grade Security</h3>
-                  <p className="text-sage-700 text-sm leading-relaxed">
+                  <h3 className="font-semibold mb-2">Enterprise-Grade Security</h3>
+                  <p className="opacity-70 text-sm leading-relaxed">
                     Bank-level encryption, multi-factor authentication, and 24/7 security monitoring to protect your assets and personal information.
                   </p>
                 </div>
@@ -58,7 +55,7 @@ const Step2Privacy = () => {
             </div>
 
             {/* Privacy Section */}
-            <div className="bg-primary-50 rounded-xl p-6 border border-primary-200">
+            <div className="bg-stone-800/50 rounded-xl p-6 border border-stone-700">
               <div className="flex items-start space-x-4">
                 <div className="w-12 h-12 bg-primary-500 rounded-xl flex items-center justify-center flex-shrink-0">
                   <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
@@ -67,8 +64,8 @@ const Step2Privacy = () => {
                   </svg>
                 </div>
                 <div>
-                  <h3 className="font-semibold text-primary-900 mb-2">Privacy</h3>
-                  <p className="text-primary-700 text-sm leading-relaxed">
+                  <h3 className="font-semibold mb-2">Privacy</h3>
+                  <p className="opacity-70 text-sm leading-relaxed">
                     Zero-knowledge architecture ensures your trading patterns and holdings remain completely private from third parties.
                   </p>
                 </div>
@@ -77,29 +74,29 @@ const Step2Privacy = () => {
           </div>
 
           {/* Certifications */}
-          <div className="bg-amber-50 rounded-xl p-6 border border-amber-200 mb-8">
-            <h3 className="font-semibold text-amber-900 mb-4 text-center">Industry Certifications</h3>
+          <div className="bg-stone-800/50 rounded-xl p-6 border border-stone-700 mb-8">
+            <h3 className="font-semibold mb-4 text-center">Industry Certifications</h3>
             <div className="grid grid-cols-2 gap-4">
               {/* SOC 2 Type II */}
-              <div className="bg-white rounded-lg p-4 border border-amber-300 text-center">
+              <div className="bg-black/50 rounded-lg p-4 border border-stone-700 text-center">
                 <div className="w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center mx-auto mb-2">
                   <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                   </svg>
                 </div>
-                <p className="font-medium text-amber-900 text-sm">SOC 2 Type II</p>
-                <p className="text-amber-700 text-xs mt-1">Security & Availability</p>
+                <p className="font-medium text-sm">SOC 2 Type II</p>
+                <p className="opacity-70 text-xs mt-1">Security & Availability</p>
               </div>
 
               {/* CASA Tier II */}
-              <div className="bg-white rounded-lg p-4 border border-amber-300 text-center">
+              <div className="bg-black/50 rounded-lg p-4 border border-stone-700 text-center">
                 <div className="w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center mx-auto mb-2">
                   <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"/>
                   </svg>
                 </div>
-                <p className="font-medium text-amber-900 text-sm">CASA Tier II</p>
-                <p className="text-amber-700 text-xs mt-1">Asset Protection</p>
+                <p className="font-medium text-sm">CASA Tier II</p>
+                <p className="opacity-70 text-xs mt-1">Asset Protection</p>
               </div>
             </div>
           </div>
@@ -116,7 +113,7 @@ const Step2Privacy = () => {
         {/* Back button */}
         <button
           onClick={() => navigate('/onboarding/step1')}
-          className="mt-6 w-full text-stone-500 hover:text-stone-700 text-sm font-medium transition-colors"
+          className="mt-6 w-full opacity-60 hover:opacity-100 text-sm font-medium transition-opacity"
         >
           ← Back
         </button>
diff --git a/src/pages/onboarding/Step3Analytics.tsx b/src/pages/onboarding/Step3Analytics.tsx
index b09b300b6..ee275642c 100644
--- a/src/pages/onboarding/Step3Analytics.tsx
+++ b/src/pages/onboarding/Step3Analytics.tsx
@@ -10,10 +10,7 @@ const Step3Analytics = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative flex items-center justify-center">
-      {/* Background pattern */}
-      <div className="absolute inset-0 bg-noise opacity-30"></div>
-
+    <div className="min-h-screen relative flex items-center justify-center">
       {/* Main content */}
       <div className="relative z-10 max-w-md w-full mx-4">
         {/* Progress indicator */}
@@ -32,10 +29,10 @@ const Step3Analytics = () => {
         {/* Analytics card */}
         <div className="glass rounded-3xl p-8 shadow-large animate-fade-up">
           <div className="text-center mb-8">
-            <h1 className="text-2xl font-bold text-stone-900 mb-2">
+            <h1 className="text-2xl font-bold mb-2">
               Analytics
             </h1>
-            <p className="text-stone-600">
+            <p className="opacity-70">
               Help us improve your experience while maintaining your privacy
             </p>
           </div>
@@ -46,8 +43,8 @@ const Step3Analytics = () => {
             <div
               className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${
                 selectedOption === 'shareAnalytics'
-                  ? 'border-primary-500 bg-primary-50'
-                  : 'border-stone-300 bg-white hover:border-stone-400'
+                  ? 'border-primary-500 bg-primary-500/20'
+                  : 'border-stone-700 bg-black/50 hover:border-stone-600'
               }`}
               onClick={() => setSelectedOption('shareAnalytics')}
             >
@@ -56,7 +53,7 @@ const Step3Analytics = () => {
                   <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                     selectedOption === 'shareAnalytics'
                       ? 'border-primary-500 bg-primary-500'
-                      : 'border-stone-400 bg-white'
+                      : 'border-stone-600 bg-black'
                   }`}>
                     {selectedOption === 'shareAnalytics' && (
                       <div className="w-2 h-2 bg-white rounded-full"></div>
@@ -64,8 +61,8 @@ const Step3Analytics = () => {
                   </div>
                 </div>
                 <div>
-                  <h3 className="font-semibold text-stone-900 mb-1">Securely Share Analytics</h3>
-                  <p className="text-stone-600 text-sm leading-relaxed">
+                  <h3 className="font-semibold mb-1">Securely Share Analytics</h3>
+                  <p className="opacity-70 text-sm leading-relaxed">
                     Share anonymized usage data to help us improve features and performance. All data is encrypted and cannot be traced back to you.
                   </p>
                 </div>
@@ -76,8 +73,8 @@ const Step3Analytics = () => {
             <div
               className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${
                 selectedOption === 'maximumPrivacy'
-                  ? 'border-primary-500 bg-primary-50'
-                  : 'border-stone-300 bg-white hover:border-stone-400'
+                  ? 'border-primary-500 bg-primary-500/20'
+                  : 'border-stone-700 bg-black/50 hover:border-stone-600'
               }`}
               onClick={() => setSelectedOption('maximumPrivacy')}
             >
@@ -86,7 +83,7 @@ const Step3Analytics = () => {
                   <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                     selectedOption === 'maximumPrivacy'
                       ? 'border-primary-500 bg-primary-500'
-                      : 'border-stone-400 bg-white'
+                      : 'border-stone-600 bg-black'
                   }`}>
                     {selectedOption === 'maximumPrivacy' && (
                       <div className="w-2 h-2 bg-white rounded-full"></div>
@@ -94,15 +91,15 @@ const Step3Analytics = () => {
                   </div>
                 </div>
                 <div>
-                  <h3 className="font-semibold text-stone-900 mb-1">Maximum Privacy</h3>
-                  <p className="text-stone-600 text-sm leading-relaxed">
+                  <h3 className="font-semibold mb-1">Maximum Privacy</h3>
+                  <p className="opacity-70 text-sm leading-relaxed">
                     Keep all your data completely private. We won't collect any usage analytics, ensuring total anonymity.
                   </p>
                   <div className="flex items-center space-x-1 mt-2">
-                    <svg className="w-4 h-4 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
+                    <svg className="w-4 h-4 text-primary-400" fill="currentColor" viewBox="0 0 20 20">
                       <path fillRule="evenodd" d="M10 1L5 6v4c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V6l-5-5z"/>
                     </svg>
-                    <span className="text-primary-600 text-xs font-medium">Recommended for privacy</span>
+                    <span className="text-primary-400 text-xs font-medium">Recommended for privacy</span>
                   </div>
                 </div>
               </div>
@@ -118,14 +115,14 @@ const Step3Analytics = () => {
           </button>
 
           {/* Privacy note */}
-          <div className="mt-6 p-4 bg-sage-50 rounded-xl border border-sage-200">
+          <div className="mt-6 p-4 bg-stone-800/50 rounded-xl border border-stone-700">
             <div className="flex items-start space-x-2">
-              <svg className="w-5 h-5 text-sage-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+              <svg className="w-5 h-5 text-sage-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                 <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd"/>
               </svg>
               <div>
-                <p className="text-sage-800 font-medium text-sm">You can change this setting anytime</p>
-                <p className="text-sage-600 text-xs mt-1">Your privacy preferences can be updated in your account settings</p>
+                <p className="font-medium text-sm">You can change this setting anytime</p>
+                <p className="opacity-70 text-xs mt-1">Your privacy preferences can be updated in your account settings</p>
               </div>
             </div>
           </div>
@@ -134,7 +131,7 @@ const Step3Analytics = () => {
         {/* Back button */}
         <button
           onClick={() => navigate('/onboarding/step2')}
-          className="mt-6 w-full text-stone-500 hover:text-stone-700 text-sm font-medium transition-colors"
+          className="mt-6 w-full opacity-60 hover:opacity-100 text-sm font-medium transition-opacity"
         >
           ← Back
         </button>
diff --git a/src/pages/onboarding/Step4Connect.tsx b/src/pages/onboarding/Step4Connect.tsx
index a24b67a7d..5dd6cdd48 100644
--- a/src/pages/onboarding/Step4Connect.tsx
+++ b/src/pages/onboarding/Step4Connect.tsx
@@ -14,10 +14,7 @@ const Step4Connect = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative flex items-center justify-center">
-      {/* Background pattern */}
-      <div className="absolute inset-0 bg-noise opacity-30"></div>
-
+    <div className="min-h-screen relative flex items-center justify-center">
       {/* Main content */}
       <div className="relative z-10 max-w-md w-full mx-4">
         {/* Connect Account card */}
@@ -46,10 +43,10 @@ const Step4Connect = () => {
               </svg>
             </div>
 
-            <h1 className="text-2xl font-bold text-stone-900 mb-2">
+            <h1 className="text-2xl font-bold mb-2">
               Connect Account
             </h1>
-            <p className="text-stone-600">
+            <p className="opacity-70">
               Connect your email to personalize your experience
             </p>
           </div>
@@ -59,7 +56,7 @@ const Step4Connect = () => {
             {/* Google */}
             <button
               onClick={handleGoogleConnect}
-              className="w-full flex items-center justify-center space-x-3 p-4 bg-white border border-stone-300 rounded-xl hover:border-stone-400 hover:shadow-medium transition-all duration-200 group"
+              className="w-full flex items-center justify-center space-x-3 p-4 bg-black/50 border border-stone-700 rounded-xl hover:border-stone-600 hover:shadow-medium transition-all duration-200 group"
             >
               <svg className="w-6 h-6" viewBox="0 0 24 24">
                 <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
@@ -67,13 +64,13 @@ const Step4Connect = () => {
                 <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                 <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
               </svg>
-              <span className="font-medium text-stone-900">Use Google</span>
+              <span className="font-medium">Use Google</span>
             </button>
 
             {/* Microsoft */}
             <button
               onClick={handleMicrosoftConnect}
-              className="w-full flex items-center justify-center space-x-3 p-4 bg-white border border-stone-300 rounded-xl hover:border-stone-400 hover:shadow-medium transition-all duration-200 group"
+              className="w-full flex items-center justify-center space-x-3 p-4 bg-black/50 border border-stone-700 rounded-xl hover:border-stone-600 hover:shadow-medium transition-all duration-200 group"
             >
               <svg className="w-6 h-6" viewBox="0 0 24 24">
                 <path fill="#f25022" d="M1 1h10v10H1z"/>
@@ -81,27 +78,27 @@ const Step4Connect = () => {
                 <path fill="#7fba00" d="M1 13h10v10H1z"/>
                 <path fill="#ffb900" d="M13 13h10v10H13z"/>
               </svg>
-              <span className="font-medium text-stone-900">Use Microsoft</span>
+              <span className="font-medium">Use Microsoft</span>
             </button>
           </div>
 
           {/* Skip option */}
           <button
             onClick={() => navigate('/home')}
-            className="w-full py-3 text-stone-600 hover:text-stone-800 font-medium transition-colors"
+            className="w-full py-3 opacity-60 hover:opacity-100 font-medium transition-opacity"
           >
             Skip for now
           </button>
 
           {/* Privacy note */}
-          <div className="mt-6 p-4 bg-primary-50 rounded-xl border border-primary-200">
+          <div className="mt-6 p-4 bg-stone-800/50 rounded-xl border border-stone-700">
             <div className="flex items-start space-x-2">
-              <svg className="w-5 h-5 text-primary-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+              <svg className="w-5 h-5 text-primary-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                 <path fillRule="evenodd" d="M10 1L5 6v4c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V6l-5-5z"/>
               </svg>
               <div>
-                <p className="text-primary-800 font-medium text-sm">Your data stays private</p>
-                <p className="text-primary-600 text-xs mt-1">We only use your email for account notifications and security</p>
+                <p className="font-medium text-sm">Your data stays private</p>
+                <p className="opacity-70 text-xs mt-1">We only use your email for account notifications and security</p>
               </div>
             </div>
           </div>
@@ -110,7 +107,7 @@ const Step4Connect = () => {
         {/* Back button */}
         <button
           onClick={() => navigate('/onboarding/step3')}
-          className="mt-6 w-full text-stone-500 hover:text-stone-700 text-sm font-medium transition-colors"
+          className="mt-6 w-full opacity-60 hover:opacity-100 text-sm font-medium transition-opacity"
         >
           ← Back
         </button>