diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 428dc86..5f1a83f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -37,9 +37,9 @@ function Home() {
           </motion.div>
           
           <h1 className="text-6xl md:text-8xl font-black tracking-tighter text-foreground mb-6 leading-[0.9]">
-            Optimize<span className="text-primary">.</span><br />
-            Apply<span className="text-primary">.</span><br />
-            Succeed<span className="text-primary">.</span>
+            Optimize<span className="text-accent-dot">.</span><br />
+            Apply<span className="text-accent-dot">.</span><br />
+            Succeed<span className="text-accent-dot">.</span>
           </h1>
           
           <p className="max-w-2xl mx-auto text-xl text-muted-foreground font-medium mb-10 leading-relaxed">
diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx
index a42be4a..000fb43 100644
--- a/frontend/src/components/Dashboard.tsx
+++ b/frontend/src/components/Dashboard.tsx
@@ -157,7 +157,7 @@ export default function Dashboard() {
         >
           <div className="flex items-center gap-3 mb-2">
             <h1 className="text-4xl font-black tracking-tight">
-              Workspace<span className="text-primary">.</span>
+              Workspace<span className="text-accent-dot">.</span>
             </h1>
           </div>
           <p className="text-muted-foreground text-lg flex items-center gap-2">
@@ -170,7 +170,7 @@ export default function Dashboard() {
         >
           <Link 
             to="/" 
-            className="group inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white px-8 py-4 rounded-2xl font-black shadow-xl shadow-primary/20 transition-smooth hover:-translate-y-1 active:translate-y-0"
+            className="group inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-primary-foreground px-8 py-4 rounded-2xl font-black shadow-xl shadow-primary/20 transition-smooth hover:-translate-y-1 active:translate-y-0"
           >
             <Plus className="w-5 h-5 group-hover:rotate-90 transition-transform duration-300" />
             Create New Resume
@@ -317,7 +317,7 @@ export default function Dashboard() {
                   <div className="flex justify-between items-start mb-6">
                     <button 
                       onClick={() => setViewingJobDetails(resume)}
-                      className="p-3.5 bg-muted rounded-2xl text-primary group-hover:bg-primary group-hover:text-white transition-smooth shadow-inner cursor-pointer hover:scale-105"
+                      className="p-3.5 bg-muted rounded-2xl text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-smooth shadow-inner cursor-pointer hover:scale-105"
                       title="View Job Details"
                     >
                       <FileText className="w-6 h-6" />
@@ -339,7 +339,7 @@ export default function Dashboard() {
                   <div className="grid grid-cols-2 gap-3">
                     <button 
                       onClick={() => handlePreview(resume.id)}
-                      className="bg-primary hover:bg-primary-dark text-white py-3 rounded-2xl text-sm font-black transition-smooth flex items-center justify-center gap-2 shadow-lg shadow-primary/20"
+                      className="bg-primary hover:bg-primary-dark text-primary-foreground py-3 rounded-2xl text-sm font-black transition-smooth flex items-center justify-center gap-2 shadow-lg shadow-primary/20"
                     >
                       {previewResumeId === resume.id && !previewUrl ? (
                           <Loader2 className="w-4 h-4 animate-spin" />
@@ -351,7 +351,7 @@ export default function Dashboard() {
                     <div className="flex gap-2">
                        <button 
                         onClick={() => handleDownload(resume.id, resume.job_title)}
-                        className="flex-1 bg-muted hover:bg-slate-200 text-foreground py-3 rounded-2xl transition-smooth flex items-center justify-center border border-transparent hover:border-white/20"
+                        className="flex-1 bg-muted hover:bg-muted/80 text-foreground py-3 rounded-2xl transition-smooth flex items-center justify-center border border-transparent hover:border-white/20"
                         title="Download PDF"
                       >
                         <Download className="w-4 h-4" />
@@ -459,13 +459,13 @@ export default function Dashboard() {
                 </div>
                 <button 
                     onClick={closePreview}
-                    className="p-2.5 bg-muted hover:bg-slate-200 text-foreground rounded-xl transition-smooth"
+                    className="p-2.5 bg-muted hover:bg-muted/80 text-foreground rounded-xl transition-smooth"
                 >
                     <X className="w-5 h-5" />
                 </button>
               </div>
               
-              <div className="flex-1 w-full bg-slate-100/50 p-4 sm:p-8 overflow-auto flex justify-center">
+              <div className="flex-1 w-full bg-muted/50/50 p-4 sm:p-8 overflow-auto flex justify-center">
                 <motion.div 
                     initial={{ opacity: 0, scale: 0.9 }}
                     animate={{ opacity: 1, scale: 1 }}
@@ -487,14 +487,14 @@ export default function Dashboard() {
                         link.setAttribute('download', 'tailored_resume.pdf');
                         link.click();
                     }}
-                    className="w-full sm:w-auto flex items-center justify-center gap-3 bg-primary hover:bg-primary-dark text-white px-10 py-3.5 rounded-2xl font-black shadow-xl shadow-primary/25 transition-smooth"
+                    className="w-full sm:w-auto flex items-center justify-center gap-3 bg-primary hover:bg-primary-dark text-primary-foreground px-10 py-3.5 rounded-2xl font-black shadow-xl shadow-primary/25 transition-smooth"
                 >
                     <Download className="w-5 h-5" />
                     Download PDF Document
                 </button>
                 <button 
                     onClick={closePreview}
-                    className="w-full sm:w-auto px-10 py-3.5 bg-muted hover:bg-slate-200 text-foreground rounded-2xl font-bold transition-smooth"
+                    className="w-full sm:w-auto px-10 py-3.5 bg-muted hover:bg-muted/80 text-foreground rounded-2xl font-bold transition-smooth"
                 >
                     Dismiss
                 </button>
@@ -526,7 +526,7 @@ export default function Dashboard() {
                 </div>
                 <button 
                   onClick={() => setViewingJobDetails(null)}
-                  className="p-2.5 bg-muted hover:bg-slate-200 text-foreground rounded-xl transition-smooth"
+                  className="p-2.5 bg-muted hover:bg-muted/80 text-foreground rounded-xl transition-smooth"
                 >
                   <X className="w-5 h-5" />
                 </button>
@@ -547,7 +547,7 @@ export default function Dashboard() {
               <div className="p-6 bg-card border-t border-muted flex justify-end">
                 <button 
                   onClick={() => setViewingJobDetails(null)}
-                  className="px-8 py-3 bg-primary hover:bg-primary-dark text-white rounded-2xl font-bold transition-smooth shadow-lg shadow-primary/20"
+                  className="px-8 py-3 bg-primary hover:bg-primary-dark text-primary-foreground rounded-2xl font-bold transition-smooth shadow-lg shadow-primary/20"
                 >
                   Close Details
                 </button>
diff --git a/frontend/src/components/InterviewPrepPlan.tsx b/frontend/src/components/InterviewPrepPlan.tsx
index 14892b5..ccf3436 100644
--- a/frontend/src/components/InterviewPrepPlan.tsx
+++ b/frontend/src/components/InterviewPrepPlan.tsx
@@ -54,10 +54,10 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n   Context: ${q?.context}`
       transition={{ delay: 0.3 }}
       className="mt-8 space-y-6"
     >
-      <div className="bg-white rounded-[2rem] border border-slate-100 shadow-xl overflow-hidden">
-        <div className="bg-slate-900 p-6 text-white flex items-center justify-between">
+      <div className="bg-card rounded-[2rem] border border-border shadow-xl overflow-hidden">
+        <div className="bg-primary p-6 text-white flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <Trophy className="w-6 h-6 text-indigo-400" />
+            <Trophy className="w-6 h-6 text-success" />
             <h3 className="text-xl font-black tracking-tight text-white mb-0">Interview Game Plan</h3>
           </div>
           <button 
@@ -66,7 +66,7 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n   Context: ${q?.context}`
             className="flex items-center gap-2 bg-white/10 hover:bg-white/20 px-4 py-2 rounded-xl transition-all text-sm font-bold border border-white/10"
           >
             {copied ? (
-              <><Check className="w-4 h-4 text-emerald-400" /> Copied!</>
+              <><Check className="w-4 h-4 text-success" /> Copied!</>
             ) : (
               <><Copy className="w-4 h-4" /> Copy Plan</>
             )}
@@ -75,19 +75,19 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n   Context: ${q?.context}`
         
         <div className="p-8 space-y-10">
           <div className="relative group">
-            <div className="absolute -inset-4 bg-indigo-50/50 rounded-[2rem] -z-10 group-hover:bg-indigo-50 transition-colors" />
-            <h4 className="text-indigo-900 font-bold mb-3 flex items-center gap-2 text-lg">
-              <Lightbulb className="w-6 h-6 text-indigo-600" /> Winning Strategy
+            <div className="absolute -inset-4 bg-muted/50 rounded-[2rem] -z-10 group-hover:bg-muted transition-colors" />
+            <h4 className="text-primary font-bold mb-3 flex items-center gap-2 text-lg">
+              <Lightbulb className="w-6 h-6 text-primary" /> Winning Strategy
             </h4>
-            <p className="text-indigo-800 text-sm leading-relaxed font-semibold italic">
+            <p className="text-primary/80 text-sm leading-relaxed font-semibold italic">
               "{winningStrategy}"
             </p>
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             <div className="space-y-4">
-              <h4 className="text-slate-900 font-black text-sm uppercase tracking-widest flex items-center gap-2">
-                <CheckCircle2 className="w-4 h-4 text-indigo-600" /> Actionable Tips
+              <h4 className="text-foreground font-black text-sm uppercase tracking-widest flex items-center gap-2">
+                <CheckCircle2 className="w-4 h-4 text-primary" /> Actionable Tips
               </h4>
               <div className="space-y-3">
                 {tips.length > 0 ? tips.map((tip, i) => (
@@ -96,43 +96,43 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n   Context: ${q?.context}`
                     initial={{ opacity: 0, x: -10 }}
                     animate={{ opacity: 1, x: 0 }}
                     transition={{ delay: i * 0.1 }}
-                    className="flex gap-3 p-4 rounded-2xl bg-slate-50 border border-slate-100 items-start hover:border-indigo-100 transition-colors"
+                    className="flex gap-3 p-4 rounded-2xl bg-muted/30 border border-border items-start hover:border-primary/20 transition-colors"
                   >
-                    <div className="mt-1 w-1.5 h-1.5 rounded-full bg-indigo-600 shrink-0" />
-                    <p className="text-sm text-slate-700 font-medium leading-relaxed">{tip}</p>
+                    <div className="mt-1 w-1.5 h-1.5 rounded-full bg-primary shrink-0" />
+                    <p className="text-sm text-foreground/70 font-medium leading-relaxed">{tip}</p>
                   </motion.div>
-                )) : <p className="text-xs text-slate-400 italic">No specific tips generated.</p>}
+                )) : <p className="text-xs text-muted-foreground italic">No specific tips generated.</p>}
               </div>
             </div>
 
-            <div className="bg-slate-900 rounded-3xl p-6 text-white flex flex-col justify-center relative overflow-hidden">
+            <div className="bg-primary rounded-3xl p-6 text-white flex flex-col justify-center relative overflow-hidden">
                <div className="absolute top-0 right-0 p-8 opacity-10">
                   <Brain className="w-24 h-24" />
                </div>
-               <p className="text-indigo-400 font-bold text-xs uppercase tracking-tighter mb-4">Preparation Scope</p>
+               <p className="text-success font-bold text-xs uppercase tracking-tighter mb-4">Preparation Scope</p>
                <div className="space-y-4 relative z-10">
                   <div className="flex items-center justify-between">
-                    <span className="text-slate-400 text-xs font-medium">Technical Depth</span>
-                    <span className="text-white font-bold text-xs uppercase bg-indigo-600 px-2 py-0.5 rounded">High</span>
+                    <span className="text-white/60 text-xs font-medium">Technical Depth</span>
+                    <span className="text-white font-bold text-xs uppercase bg-white/10 px-2 py-0.5 rounded">High</span>
                   </div>
                   <div className="flex items-center justify-between">
-                    <span className="text-slate-400 text-xs font-medium">Behavioral Focus</span>
-                    <span className="text-white font-bold text-xs uppercase bg-indigo-600 px-2 py-0.5 rounded">Strategic</span>
+                    <span className="text-white/60 text-xs font-medium">Behavioral Focus</span>
+                    <span className="text-white font-bold text-xs uppercase bg-white/10 px-2 py-0.5 rounded">Strategic</span>
                   </div>
                   <div className="flex items-center justify-between">
-                    <span className="text-slate-400 text-xs font-medium">Complexity</span>
-                    <span className="text-white font-bold text-xs uppercase bg-indigo-600 px-2 py-0.5 rounded">Level 4</span>
+                    <span className="text-white/60 text-xs font-medium">Complexity</span>
+                    <span className="text-white font-bold text-xs uppercase bg-white/10 px-2 py-0.5 rounded">Level 4</span>
                   </div>
                </div>
             </div>
           </div>
 
-          <div className="space-y-8 pt-4 border-t border-slate-100">
+          <div className="space-y-8 pt-4 border-t border-border">
             {techQs.length > 0 && (
               <PrepSection 
                 title="Technical Excellence" 
                 subtitle="Skills & Implementations"
-                icon={<Brain className="w-5 h-5 text-indigo-600" />} 
+                icon={<Brain className="w-5 h-5 text-primary" />} 
                 questions={techQs}
               />
             )}
@@ -141,7 +141,7 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n   Context: ${q?.context}`
               <PrepSection 
                 title="Behavioral Alignment" 
                 subtitle="Culture & Soft Skills"
-                icon={<MessageSquare className="w-5 h-5 text-indigo-600" />} 
+                icon={<MessageSquare className="w-5 h-5 text-primary" />} 
                 questions={behavioralQs}
               />
             )}
@@ -150,7 +150,7 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n   Context: ${q?.context}`
               <PrepSection 
                 title="Situational Awareness" 
                 subtitle="Scenario Based Challenges"
-                icon={<Briefcase className="w-5 h-5 text-indigo-600" />} 
+                icon={<Briefcase className="w-5 h-5 text-primary" />} 
                 questions={situationalQs}
               />
             )}
@@ -165,12 +165,12 @@ function PrepSection({ title, subtitle, icon, questions }: { title: string; subt
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-3 mb-2">
-        <div className="p-2.5 rounded-xl bg-indigo-50 border border-indigo-100">
+        <div className="p-2.5 rounded-xl bg-muted border border-border">
           {icon}
         </div>
         <div>
-          <h4 className="text-slate-900 font-black text-base leading-none mb-1 tracking-tight">{title}</h4>
-          <p className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">{subtitle}</p>
+          <h4 className="text-foreground font-black text-base leading-none mb-1 tracking-tight">{title}</h4>
+          <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em]">{subtitle}</p>
         </div>
       </div>
       <div className="grid grid-cols-1 gap-3">
diff --git a/frontend/src/components/LoadingProgress.tsx b/frontend/src/components/LoadingProgress.tsx
index ed34669..c60e204 100644
--- a/frontend/src/components/LoadingProgress.tsx
+++ b/frontend/src/components/LoadingProgress.tsx
@@ -3,13 +3,13 @@ import { motion } from 'framer-motion';
 export default function LoadingProgress({ label, progress }: { label: string; progress: number }) {
   return (
     <div className="space-y-1.5 text-left">
-      <div className="flex justify-between text-[10px] font-bold text-slate-400 uppercase tracking-tighter">
+      <div className="flex justify-between text-[10px] font-bold text-muted-foreground uppercase tracking-tighter">
         <span>{label}</span>
         <span>{progress}%</span>
       </div>
-      <div className="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200/50">
+      <div className="h-1.5 w-full bg-muted rounded-full overflow-hidden border border-border">
         <motion.div 
-          className="h-full bg-indigo-600"
+          className="h-full bg-primary"
           initial={{ width: 0 }}
           animate={{ width: `${progress}%` }}
           transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 56bdf34..df89590 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -22,12 +22,12 @@ export default function Navbar() {
             <Link to="/" className="flex items-center gap-2 group">
               <motion.div 
                 whileHover={{ rotate: 12, scale: 1.1 }}
-                className="bg-primary p-2 rounded-xl shadow-lg shadow-primary/20"
+                className="bg-black p-2 rounded-xl shadow-lg shadow-black/20"
               >
                 <Briefcase className="w-5 h-5 text-white" />
               </motion.div>
               <span className="text-2xl font-black tracking-tight text-foreground">
-                LLMployable<span className="text-primary">.</span>
+                LLMployable<span className="text-accent-dot">.</span>
               </span>
             </Link>
           </div>
@@ -61,7 +61,7 @@ export default function Navbar() {
                       <span className="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em]">Verified</span>
                       <span className="text-sm font-black text-foreground group-hover:text-primary transition-colors">{user?.username}</span>
                     </div>
-                    <div className="w-10 h-10 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center text-white font-black shadow-lg shadow-primary/20 ring-2 ring-white/10">
+                    <div className="w-10 h-10 bg-black rounded-xl flex items-center justify-center text-white font-black shadow-lg shadow-black/20 ring-2 ring-white/10">
                         {user?.username?.[0]?.toUpperCase()}
                     </div>
                   </div>
@@ -83,7 +83,7 @@ export default function Navbar() {
                   </Link>
                   <Link 
                     to="/register" 
-                    className="bg-foreground hover:bg-primary text-white px-7 py-3 rounded-2xl text-sm font-black shadow-xl shadow-primary/10 transition-smooth hover:-translate-y-1"
+                    className="bg-foreground hover:bg-primary text-background px-7 py-3 rounded-2xl text-sm font-black shadow-xl shadow-primary/10 transition-smooth hover:-translate-y-1"
                   >
                     Get Started Free
                   </Link>
@@ -117,7 +117,7 @@ export default function Navbar() {
               {isAuthenticated ? (
                 <>
                   <div className="flex items-center gap-4 px-4 py-6 bg-muted/50 rounded-[2rem] mb-6 shadow-inner ring-1 ring-white/5">
-                    <div className="w-12 h-12 bg-gradient-to-br from-primary to-primary-dark rounded-2xl flex items-center justify-center text-white font-black shadow-lg shadow-primary/20">
+                    <div className="w-12 h-12 bg-black rounded-2xl flex items-center justify-center text-white font-black shadow-lg shadow-black/20">
                       {user?.username?.[0]?.toUpperCase()}
                     </div>
                     <div>
diff --git a/frontend/src/components/QuestionCard.tsx b/frontend/src/components/QuestionCard.tsx
index d0e4674..e52499a 100644
--- a/frontend/src/components/QuestionCard.tsx
+++ b/frontend/src/components/QuestionCard.tsx
@@ -10,23 +10,23 @@ export default function QuestionCard({ question, context, index }: { question: s
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ delay: index * 0.05 }}
-      className="group bg-white border border-slate-100 rounded-2xl overflow-hidden hover:border-indigo-200 hover:shadow-md transition-all cursor-pointer shadow-sm"
+      className="group bg-card border border-border rounded-2xl overflow-hidden hover:border-primary/20 hover:shadow-md transition-all cursor-pointer shadow-sm"
       onClick={() => setIsOpen(!isOpen)}
     >
       <div className="p-4 flex items-start justify-between gap-4">
         <div className="flex gap-4">
-          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-slate-50 border border-slate-200 text-[10px] font-bold flex items-center justify-center text-slate-400 group-hover:text-indigo-600 group-hover:border-indigo-100 transition-colors">
+          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-muted border border-border text-[10px] font-bold flex items-center justify-center text-muted-foreground group-hover:text-primary group-hover:border-primary/10 transition-colors">
             {index + 1}
           </span>
-          <p className="font-bold text-slate-800 text-sm leading-relaxed tracking-tight group-hover:text-slate-900 transition-colors">
+          <p className="font-bold text-foreground/90 text-sm leading-relaxed tracking-tight group-hover:text-foreground transition-colors">
             {question}
           </p>
         </div>
         <div className="flex-shrink-0 mt-1">
           {isOpen ? (
-            <ChevronUp className="w-4 h-4 text-slate-400 group-hover:text-indigo-500 transition-colors" />
+            <ChevronUp className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" />
           ) : (
-            <ChevronDown className="w-4 h-4 text-slate-400 group-hover:text-indigo-500 transition-colors" />
+            <ChevronDown className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" />
           )}
         </div>
       </div>
@@ -41,13 +41,13 @@ export default function QuestionCard({ question, context, index }: { question: s
             className="overflow-hidden"
           >
             <div className="px-12 pb-4 pt-1">
-              <div className="p-3 rounded-xl bg-slate-50 border border-slate-100 flex gap-3 shadow-sm">
-                <div className="bg-indigo-50 p-1.5 rounded-lg flex-shrink-0 h-fit mt-0.5">
-                  <Info className="w-3.5 h-3.5 text-indigo-600" />
+              <div className="p-3 rounded-xl bg-muted/50 border border-border flex gap-3 shadow-sm">
+                <div className="bg-primary/5 p-1.5 rounded-lg flex-shrink-0 h-fit mt-0.5">
+                  <Info className="w-3.5 h-3.5 text-primary" />
                 </div>
                 <div>
-                  <p className="text-[10px] font-bold text-indigo-900 uppercase tracking-wider mb-1">Coach Context</p>
-                  <p className="text-sm text-slate-600 font-medium leading-relaxed italic">
+                  <p className="text-[10px] font-bold text-primary uppercase tracking-wider mb-1">Coach Context</p>
+                  <p className="text-sm text-muted-foreground font-medium leading-relaxed italic">
                     {context}
                   </p>
                 </div>
diff --git a/frontend/src/components/ResumeForm.tsx b/frontend/src/components/ResumeForm.tsx
index 8edaf2e..0f1f717 100644
--- a/frontend/src/components/ResumeForm.tsx
+++ b/frontend/src/components/ResumeForm.tsx
@@ -226,7 +226,7 @@ export default function ResumeForm() {
                   <button
                     type="submit"
                     disabled={isPending}
-                    className="w-full group bg-foreground hover:bg-primary disabled:opacity-50 text-white font-black py-6 rounded-[2rem] transition-smooth shadow-2xl shadow-primary/20 flex items-center justify-center gap-4 overflow-hidden relative active:scale-[0.98]"
+                    className="w-full group bg-foreground hover:bg-primary disabled:opacity-50 text-background font-black py-6 rounded-[2rem] transition-smooth flex items-center justify-center gap-4 overflow-hidden relative active:scale-[0.98]"
                   >
                     <AnimatePresence mode="wait">
                       {isPending ? (
@@ -290,7 +290,7 @@ export default function ResumeForm() {
                           initial={{ opacity: 0, y: 20 }}
                           animate={{ opacity: 1, y: 0 }}
                           transition={{ delay: 0.5 }}
-                          className="mt-12 p-10 bg-gradient-to-br from-primary to-primary-dark rounded-[3rem] text-white shadow-2xl relative overflow-hidden group"
+                          className="mt-12 p-10 bg-gradient-to-br from-primary to-primary-dark rounded-[3rem] text-primary-foreground shadow-2xl relative overflow-hidden group"
                         >
                           <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:scale-110 transition-transform duration-500">
                               <Mic className="w-40 h-40 -rotate-12" />
@@ -301,13 +301,13 @@ export default function ResumeForm() {
                               <Sparkles className="w-3 h-3" /> New: Conversational AI
                             </span>
                             <h3 className="text-3xl font-black tracking-tighter mb-4">Ready for the real deal?</h3>
-                            <p className="text-white/80 font-medium mb-8 max-w-xl text-lg leading-relaxed">
+                            <p className="opacity-80 font-medium mb-8 max-w-xl text-lg leading-relaxed">
                               Don't just read the questions. Practice them with our **AI Mock Interviewer**. 
                               Powered by ElevenLabs, you'll get real-time feedback on your voice, tone, and confidence.
                             </p>
                             <button 
                               onClick={() => navigate('/mock-interview')}
-                              className="bg-white text-primary px-8 py-4 rounded-2xl font-black text-lg hover:bg-opacity-90 transform active:scale-95 transition-all flex items-center gap-3 shadow-xl"
+                              className="bg-primary-foreground text-primary px-8 py-4 rounded-2xl font-black text-lg hover:bg-opacity-90 transform active:scale-95 transition-all flex items-center gap-3 shadow-xl"
                             >
                               Start Voice Interview <ArrowRight className="w-5 h-5" />
                             </button>
@@ -327,14 +327,14 @@ export default function ResumeForm() {
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ delay: 0.2 }}
-            className="bg-primary rounded-[3rem] p-10 text-white shadow-2xl shadow-primary/20 relative overflow-hidden"
+            className="bg-muted/50 rounded-[3rem] p-10 border border-border/50 shadow-sm relative overflow-hidden group hover:shadow-xl transition-smooth"
           >
-            <div className="absolute top-0 right-0 p-8 opacity-10">
-                <ShieldCheck className="w-32 h-32 rotate-12" />
+            <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:scale-110 transition-transform">
+                <ShieldCheck className="w-32 h-32 rotate-12 text-primary" />
             </div>
             
-            <h3 className="text-2xl font-black mb-8 flex items-center gap-3">
-              <Info className="w-6 h-6" /> Best Practices
+            <h3 className="text-2xl font-black mb-8 flex items-center gap-3 text-foreground">
+              <Info className="w-6 h-6 text-primary" /> Best Practices
             </h3>
             
             <ul className="space-y-6">
@@ -344,12 +344,12 @@ export default function ResumeForm() {
                 { title: "Target Focus", text: "High-quality job descriptions lead to 10x better matching." }
               ].map((tip, i) => (
                 <li key={i} className="flex gap-4">
-                  <div className="w-7 h-7 rounded-full bg-white/20 flex items-center justify-center text-xs font-black shrink-0 mt-1">
+                  <div className="w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center text-xs font-black shrink-0 mt-1 text-primary">
                     {i + 1}
                   </div>
                   <div>
-                    <p className="font-black uppercase tracking-wider text-[10px] opacity-70 mb-1">{tip.title}</p>
-                    <p className="text-sm font-medium leading-relaxed opacity-90">{tip.text}</p>
+                    <p className="font-black uppercase tracking-wider text-[10px] text-muted-foreground mb-1">{tip.title}</p>
+                    <p className="text-sm font-bold leading-relaxed text-foreground/80">{tip.text}</p>
                   </div>
                 </li>
               ))}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2a5aa1a..aa78420 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,41 +1,54 @@
 @import "tailwindcss";
 
 @theme {
-  --color-primary: var(--color-indigo-600);
-  --color-primary-dark: var(--color-indigo-700);
-  --color-primary-light: var(--color-indigo-400);
+  --color-primary: var(--primary);
+  --color-primary-dark: var(--primary-dark);
+  --color-primary-light: var(--primary-light);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-accent-dot: var(--accent-dot);
   
-  --color-success: var(--color-emerald-500);
-  --color-warning: var(--color-amber-500);
-  --color-danger: var(--color-rose-500);
+  --color-success: #10B981;
+  --color-warning: #F59E0B;
+  --color-danger: #EF4444;
 
-  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
 }
 
 :root {
   font-family: var(--font-sans);
   line-height: 1.5;
   font-weight: 400;
+
+  --primary: #18181B;
+  --primary-dark: #09090B;
+  --primary-light: #27272A;
+  --primary-foreground: #FFFFFF;
   
-  /* Modern Neutral Palette */
-  --background: #fdfdfe;
-  --foreground: #020617;
-  --muted: #f1f5f9;
-  --muted-foreground: #64748b;
-  --border: #e2e8f0;
-  --card: #ffffff;
-  --card-foreground: #020617;
+  --background: #FFFFFF;
+  --foreground: #18181B;
+  --muted: #F4F4F5;
+  --muted-foreground: #71717A;
+  --accent-dot: #71717A;
+  --border: #E4E4E7;
+  --card: #FFFFFF;
+  --card-foreground: #18181B;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #020617;
-    --foreground: #f8fafc;
-    --muted: #1e293b;
-    --muted-foreground: #94a3b8;
-    --border: #1e293b;
-    --card: #0f172a;
-    --card-foreground: #f8fafc;
+    --primary: #F4F4F5;
+    --primary-dark: #FAFAFA;
+    --primary-light: #D4D4D8;
+    --primary-foreground: #09090B;
+
+    --background: #09090B;
+    --foreground: #FAFAFA;
+    --muted: #18181B;
+    --muted-foreground: #D4D4D8;
+    --accent-dot: #52525B;
+    --border: #27272A;
+    --card: #18181B;
+    --card-foreground: #FAFAFA;
   }
 }
 
@@ -52,7 +65,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Glassmorphism utilities */
 .glass {
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(10px);
@@ -60,11 +72,10 @@ body {
 }
 
 .dark .glass {
-  background: rgba(15, 23, 42, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(9, 9, 11, 0.85);
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-/* Smooth transitions */
 .transition-smooth {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -75,7 +86,6 @@ button:focus-visible {
   outline-offset: 2px;
 }
 
-/* Custom Scrollbar */
 ::-webkit-scrollbar {
   width: 10px;
 }
@@ -94,8 +104,7 @@ button:focus-visible {
   background: #cbd5e1;
 }
 
-/* Modern Text Selection */
 ::selection {
   background-color: var(--color-primary);
-  color: white;
+  color: var(--primary-foreground);
 }