diff --git a/src/components/ui/HowItWorksModal.jsx b/src/components/ui/HowItWorksModal.jsx
index e1f78a9..21c1d40 100644
--- a/src/components/ui/HowItWorksModal.jsx
+++ b/src/components/ui/HowItWorksModal.jsx
@@ -36,7 +36,7 @@ export const HowItWorksModal = ({ onClose }) => {
     {
       num: "05",
       title: "Climb Leaderboards & Mint Badges",
-      desc: "Compare your ratings globally, locally, or in specialized tracks like RankHer. Unlock verified developer badges and showcase your achievements. Soon, badges will be minted as Polygon blockchain tokens for profile verification.",
+      desc: "Compare your ratings globally, locally, or in specialized tracks like RankHer. Unlock verified developer badges and showcase your achievements. Soon, badges builds will be minted as Polygon blockchain tokens for profile verification.",
       icon: Trophy,
       color: "from-amber-600 to-yellow-500 text-amber-400"
     }
@@ -50,7 +50,7 @@ export const HowItWorksModal = ({ onClose }) => {
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         onClick={onClose}
-        className="absolute inset-0 bg-slate-950/70 backdrop-blur-md"
+        className="absolute inset-0 bg-slate-900/40 dark:bg-slate-950/70 backdrop-blur-md"
       />
 
       {/* Modal Box */}
@@ -58,31 +58,31 @@ export const HowItWorksModal = ({ onClose }) => {
         initial={{ opacity: 0, scale: 0.95, y: 20 }}
         animate={{ opacity: 1, scale: 1, y: 0 }}
         exit={{ opacity: 0, scale: 0.95, y: 20 }}
-        className="relative w-full max-w-3xl max-h-[85vh] bg-slate-900 border border-slate-800 rounded-3xl shadow-2xl overflow-y-auto scrollbar-thin scrollbar-thumb-slate-800 p-6 md:p-8 text-slate-100 flex flex-col gap-6"
+        className="relative w-full max-w-3xl max-h-[85vh] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl shadow-2xl overflow-y-auto scrollbar-thin scrollbar-thumb-slate-300 dark:scrollbar-thumb-slate-800 p-6 md:p-8 text-slate-800 dark:text-slate-100 flex flex-col gap-6"
       >
         {/* Close Button */}
         <button
           onClick={onClose}
-          className="absolute top-4 right-4 md:top-6 md:right-6 p-2 rounded-xl border border-slate-800 hover:bg-slate-800 text-slate-400 hover:text-white transition cursor-pointer"
+          className="absolute top-4 right-4 md:top-6 md:right-6 p-2 rounded-xl border border-slate-200 dark:border-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition cursor-pointer"
         >
           <X className="w-5 h-5" />
         </button>
 
         {/* Header */}
         <div className="space-y-2 pr-10">
-          <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">
+          <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-indigo-100 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-500/20">
             Platform Lifecycle
           </span>
-          <h2 className="text-3xl font-black bg-clip-text text-transparent bg-gradient-to-r from-violet-400 via-indigo-400 to-blue-400 my-0">
+          <h2 className="text-3xl font-black bg-clip-text text-transparent bg-gradient-to-r from-violet-600 via-indigo-600 to-blue-600 dark:from-violet-400 dark:via-indigo-400 dark:to-blue-400 my-0">
             How RankerHub Works
           </h2>
-          <p className="text-sm text-slate-400 font-medium my-0">
+          <p className="text-sm text-slate-600 dark:text-slate-400 font-medium my-0">
             Follow these steps to synchronize your metrics, conquer challenges, and unlock verified achievements.
           </p>
         </div>
 
         {/* Steps Vertical Timeline Layout */}
-        <div className="relative border-l border-slate-800/80 ml-4 md:ml-6 my-4 pl-6 md:pl-8 space-y-6">
+        <div className="relative border-l border-slate-200 dark:border-slate-800/80 ml-4 md:ml-6 my-4 pl-6 md:pl-8 space-y-6">
           {steps.map((step, idx) => {
             const Icon = step.icon;
             return (
@@ -94,16 +94,16 @@ export const HowItWorksModal = ({ onClose }) => {
 
                 <div className="space-y-2">
                   <div className="flex items-center gap-2">
-                    <span className="text-[10px] font-black text-violet-500 dark:text-violet-400 bg-violet-500/10 px-2 py-0.5 rounded border border-violet-500/20 tracking-wider">
+                    <span className="text-[10px] font-black text-violet-600 dark:text-violet-400 bg-violet-100 dark:bg-violet-500/10 px-2 py-0.5 rounded border border-violet-200 dark:border-violet-500/20 tracking-wider">
                       STEP {step.num}
                     </span>
-                    <h3 className="text-base font-extrabold text-white my-0 leading-tight">
+                    <h3 className="text-base font-extrabold text-slate-900 dark:text-white my-0 leading-tight">
                       {step.title}
                     </h3>
                   </div>
                   
                   {/* Detailed Description */}
-                  <p className="text-xs text-slate-400 leading-relaxed font-semibold max-w-2xl my-0">
+                  <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed font-semibold max-w-2xl my-0">
                     {step.desc}
                   </p>
                 </div>
@@ -113,9 +113,9 @@ export const HowItWorksModal = ({ onClose }) => {
         </div>
 
         {/* Footer info banner */}
-        <Card className="p-4 bg-gradient-to-r from-violet-900/20 to-indigo-900/20 border-violet-800/40 text-center">
-          <p className="text-xs text-indigo-300 font-bold my-0 flex items-center justify-center gap-1.5">
-            <CheckCircle2 className="w-4 h-4 text-indigo-400" />
+        <Card className="p-4 bg-gradient-to-r from-violet-100 to-indigo-100 dark:from-violet-900/20 dark:to-indigo-900/20 border-violet-200 dark:border-violet-800/40 text-center">
+          <p className="text-xs text-indigo-700 dark:text-indigo-300 font-bold my-0 flex items-center justify-center gap-1.5">
+            <CheckCircle2 className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
             Ready to climb? Link your profile, start coding, and watch your developer standings rise!
           </p>
         </Card>
@@ -124,4 +124,4 @@ export const HowItWorksModal = ({ onClose }) => {
   );
 };
 
-export default HowItWorksModal;
+export default HowItWorksModal;
\ No newline at end of file