diff --git a/src/components/ai/job-selector.tsx b/src/components/ai/job-selector.tsx
index 30936d0..e5a876e 100644
--- a/src/components/ai/job-selector.tsx
+++ b/src/components/ai/job-selector.tsx
@@ -39,32 +39,32 @@ export function JobSelector({ onSelect }: JobSelectorProps) {
       <button
         type="button"
         onClick={() => setOpen(!open)}
-        className="w-full flex items-center gap-2.5 bg-[#1a1d2e] border border-[#ffffff0f] hover:border-primary/30 rounded-xl px-4 py-3 text-sm text-[#9ca3af] hover:text-[#e5e7eb] transition-all duration-200"
+        className="w-full flex items-center gap-2.5 bg-card/50 border border-border hover:border-primary/20 rounded-xl px-4 py-3 text-sm text-muted-foreground hover:text-foreground transition-all duration-200"
       >
         <Briefcase className="h-4 w-4 text-primary flex-none" />
         <span className="flex-1 text-left truncate">
           {selected ? selected.job_title : loading ? "Loading jobs..." : "Select a job category"}
         </span>
-        {loading ? <Loader2 className="h-3.5 w-3.5 animate-spin text-primary" /> : <ChevronDown className={`h-3.5 w-3.5 text-[#4b5563] transition-transform duration-200 ${open ? "rotate-180" : ""}`} />}
+        {loading ? <Loader2 className="h-3.5 w-3.5 animate-spin text-primary" /> : <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground/60 transition-transform duration-200 ${open ? "rotate-180" : ""}`} />}
       </button>
 
       {open && (
         <>
           <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
-          <div className="absolute top-full left-0 right-0 mt-1.5 z-20 bg-[#1a1d2e] border border-[#ffffff0f] rounded-xl shadow-xl shadow-black/40 max-h-60 overflow-y-auto">
+          <div className="absolute top-full left-0 right-0 mt-1.5 z-20 bg-card border border-border rounded-xl shadow-xl max-h-60 overflow-y-auto">
             {jobs.map((job, i) => (
               <button
                 key={i}
                 type="button"
                 onClick={() => handleSelect(job)}
-                className="w-full text-left px-4 py-3 text-sm text-[#9ca3af] hover:bg-[#1f2437] hover:text-[#e5e7eb] transition-all duration-150 border-b border-[#ffffff08] last:border-0 border-l-2 border-l-transparent hover:border-l-primary/40"
+                className="w-full text-left px-4 py-3 text-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-all duration-150 border-b border-border/20 last:border-0 border-l-2 border-l-transparent hover:border-l-primary/40"
               >
                 <div className="font-medium">{job.job_title}</div>
-                <div className="text-xs text-[#4b5563] mt-0.5">{job.industry} &mdash; {job.description}</div>
+                <div className="text-xs text-muted-foreground/60 mt-0.5">{job.industry} &mdash; {job.description}</div>
               </button>
             ))}
             {jobs.length === 0 && !loading && (
-              <div className="px-4 py-4 text-xs text-[#4b5563] text-center">No job categories loaded</div>
+              <div className="px-4 py-4 text-xs text-muted-foreground/60 text-center">No job categories loaded</div>
             )}
           </div>
         </>