diff --git a/src/App.tsx b/src/App.tsx
index 52b65c8..836ab45 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,11 +17,13 @@ import SettingsView from './components/SettingsView';
 import { MOCK_MEDIA, DETAIL_MEDIA } from './data';
 import { Media, Staff, MediaCategory, UserSettings } from './types';
 import { fetchAllMedia, fetchMediaById, fetchCastById, convertApiCastToStaff, fetchSettings, updateSettings } from './api';
+import { ThemeProvider, useTheme } from './contexts/ThemeContext';
 
 function AppContent() {
   const navigate = useNavigate();
   const location = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
+  const { setTheme } = useTheme();
   const [activeCategory, setActiveCategory] = useState<MediaCategory>(
     (searchParams.get('category') as MediaCategory) || 'Anime'
   );
@@ -43,6 +45,8 @@ function AppContent() {
         if (loadedSettings) {
           setSettings(loadedSettings);
           setEnabledCategories(loadedSettings.enabledCategories);
+          // Sync theme with theme context
+          setTheme(loadedSettings.theme);
         }
       } catch (error) {
         console.error('Failed to load settings from API:', error);
@@ -50,7 +54,7 @@ function AppContent() {
     };
     
     loadSettingsFromApi();
-  }, []);
+  }, [setTheme]);
 
   const reloadSettings = async () => {
     try {
@@ -58,6 +62,8 @@ function AppContent() {
       if (loadedSettings) {
         setSettings(loadedSettings);
         setEnabledCategories(loadedSettings.enabledCategories);
+        // Sync theme with theme context
+        setTheme(loadedSettings.theme);
       }
     } catch (error) {
       console.error('Failed to reload settings from API:', error);
@@ -270,7 +276,7 @@ function AppContent() {
   };
 
   return (
-    <div className="min-h-screen bg-white font-sans selection:bg-[#6d28d9]/20 selection:text-[#6d28d9]">
+    <div className="min-h-screen bg-background font-sans selection:bg-[#6d28d9]/20 selection:text-[#6d28d9]">
       <Header
         onSearch={handleSearch}
         activeCategory={activeCategory}
@@ -315,6 +321,7 @@ function AppContent() {
             <Route path="/add" element={
               <AddMediaView
                 activeCategory={activeCategory}
+                enabledCategories={enabledCategories}
                 onAddComplete={handleAddMedia}
               />
             } />
@@ -329,18 +336,18 @@ function AppContent() {
       </main>
 
       {/* Footer */}
-      <footer className="py-12 px-6 border-t border-zinc-100 bg-zinc-50">
+      <footer className="py-12 px-6 border-t border-border bg-muted/50">
         <div className="max-w-[1600px] mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
-          <div className="flex items-center gap-2 text-xl font-black text-zinc-400">
-            <div className="w-5 h-5 bg-zinc-300 rounded-full" />
+          <div className="flex items-center gap-2 text-xl font-black text-muted-foreground">
+            <div className="w-5 h-5 bg-muted rounded-full" />
             kyoo
           </div>
-          <div className="flex items-center gap-8 text-sm font-bold text-zinc-400">
+          <div className="flex items-center gap-8 text-sm font-bold text-muted-foreground">
             <a href="#" className="hover:text-[#6d28d9] transition-colors">Terms</a>
             <a href="#" className="hover:text-[#6d28d9] transition-colors">Privacy</a>
             <a href="#" className="hover:text-[#6d28d9] transition-colors">Contact</a>
           </div>
-          <p className="text-xs font-medium text-zinc-400">
+          <p className="text-xs font-medium text-muted-foreground">
             © 2026 Kyoo Media Discovery. All rights reserved.
           </p>
         </div>
@@ -428,7 +435,9 @@ function CastDetailRoute({ selectedPerson, setSelectedPerson }: any) {
 export default function App() {
   return (
     <BrowserRouter>
-      <AppContent />
+      <ThemeProvider>
+        <AppContent />
+      </ThemeProvider>
     </BrowserRouter>
   );
 }
diff --git a/src/components/AddMediaView.tsx b/src/components/AddMediaView.tsx
index 97aee5c..c85ad2d 100644
--- a/src/components/AddMediaView.tsx
+++ b/src/components/AddMediaView.tsx
@@ -10,10 +10,11 @@ import { cn } from '@/lib/utils';
 
 interface AddMediaViewProps {
   activeCategory: MediaCategory;
+  enabledCategories: MediaCategory[];
   onAddComplete: () => void;
 }
 
-export default function AddMediaView({ activeCategory, onAddComplete }: AddMediaViewProps) {
+export default function AddMediaView({ activeCategory, enabledCategories, onAddComplete }: AddMediaViewProps) {
   const navigate = useNavigate();
   const [newMedia, setNewMedia] = useState({
     title: '',
@@ -151,62 +152,62 @@ export default function AddMediaView({ activeCategory, onAddComplete }: AddMedia
       <Button 
         variant="ghost" 
         onClick={() => navigate('/')}
-        className="mb-6 gap-2 text-zinc-600 hover:text-zinc-900"
+        className="mb-6 gap-2 text-muted-foreground hover:text-foreground"
       >
         <ArrowLeft size={20} />
         Back to Browse
       </Button>
 
-      <div className="bg-white rounded-3xl shadow-xl p-8">
-        <h1 className="text-3xl font-black text-zinc-900 mb-2">Add New Media</h1>
-        <p className="text-zinc-500 font-medium mb-8">
+      <div className="bg-card rounded-3xl shadow-xl p-8 border border-border">
+        <h1 className="text-3xl font-black text-foreground mb-2">Add New Media</h1>
+        <p className="text-muted-foreground font-medium mb-8">
           Add a new item to your {activeCategory} library.
         </p>
 
         {submitStatus === 'success' && (
-          <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl">
-            <p className="text-green-800 font-bold">✓ Successfully added to library!</p>
+          <div className="mb-6 p-4 bg-green-500/10 border border-green-500/30 rounded-xl">
+            <p className="text-green-500 font-bold">✓ Successfully added to library!</p>
           </div>
         )}
 
         {submitStatus === 'error' && (
-          <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl">
-            <p className="text-red-800 font-bold">✗ Error: {errorMessage}</p>
+          <div className="mb-6 p-4 bg-red-500/10 border border-red-500/30 rounded-xl">
+            <p className="text-red-500 font-bold">✗ Error: {errorMessage}</p>
           </div>
         )}
 
         <form onSubmit={handleAddSubmit} className="space-y-6">
           <div className="grid gap-2">
-            <Label htmlFor="title" className="text-sm font-black text-zinc-700">Title</Label>
+            <Label htmlFor="title" className="text-sm font-black text-foreground">Title</Label>
             <Input 
               id="title" 
               value={newMedia.title}
               onChange={e => setNewMedia(prev => ({ ...prev, title: e.target.value }))}
               placeholder="e.g. Mob Psycho 100" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
               required
             />
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div className="grid gap-2">
-              <Label htmlFor="year" className="text-sm font-black text-zinc-700">Year</Label>
+              <Label htmlFor="year" className="text-sm font-black text-foreground">Year</Label>
               <Input 
                 id="year" 
                 value={newMedia.year}
                 onChange={e => setNewMedia(prev => ({ ...prev, year: e.target.value }))}
                 placeholder="2024" 
-                className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+                className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
               />
             </div>
             <div className="grid gap-2">
-              <Label htmlFor="category" className="text-sm font-black text-zinc-700">Category</Label>
+              <Label htmlFor="category" className="text-sm font-black text-foreground">Category</Label>
               <select 
                 id="category"
                 value={newMedia.category}
                 onChange={e => setNewMedia(prev => ({ ...prev, category: e.target.value as MediaCategory }))}
-                className="bg-zinc-50 border border-zinc-100 rounded-xl h-11 px-3 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+                className="bg-background border-border rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
               >
-                {['Anime', 'Movies', 'TV Series', 'Music', 'Books', 'Consoles', 'Games', 'Adult'].map(cat => (
+                {enabledCategories.map(cat => (
                   <option key={cat} value={cat}>{cat}</option>
                 ))}
               </select>
@@ -214,12 +215,12 @@ export default function AddMediaView({ activeCategory, onAddComplete }: AddMedia
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div className="grid gap-2">
-              <Label htmlFor="type" className="text-sm font-black text-zinc-700">Type</Label>
+              <Label htmlFor="type" className="text-sm font-black text-foreground">Type</Label>
               <select 
                 id="type"
                 value={newMedia.type}
                 onChange={e => setNewMedia(prev => ({ ...prev, type: e.target.value }))}
-                className="bg-zinc-50 border border-zinc-100 rounded-xl h-11 px-3 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+                className="bg-background border-border rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
               >
                 {newMedia.category === 'Music' ? (
                   <>
@@ -253,12 +254,12 @@ export default function AddMediaView({ activeCategory, onAddComplete }: AddMedia
               </select>
             </div>
             <div className="grid gap-2">
-              <Label htmlFor="status" className="text-sm font-black text-zinc-700">Status</Label>
+              <Label htmlFor="status" className="text-sm font-black text-foreground">Status</Label>
               <select 
                 id="status"
                 value={newMedia.status}
                 onChange={e => setNewMedia(prev => ({ ...prev, status: e.target.value }))}
-                className="bg-zinc-50 border border-zinc-100 rounded-xl h-11 px-3 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+                className="bg-background border-border rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
               >
                 <option value="Released">Released</option>
                 <option value="Ongoing">Ongoing</option>
@@ -274,12 +275,12 @@ export default function AddMediaView({ activeCategory, onAddComplete }: AddMedia
             </div>
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="aspectRatio" className="text-sm font-black text-zinc-700">Aspect Ratio (Format)</Label>
+            <Label htmlFor="aspectRatio" className="text-sm font-black text-foreground">Aspect Ratio (Format)</Label>
             <select 
               id="aspectRatio"
               value={newMedia.aspectRatio}
               onChange={e => setNewMedia(prev => ({ ...prev, aspectRatio: e.target.value as '2/3' | '16/9' | '1/1' }))}
-              className="bg-zinc-50 border border-zinc-100 rounded-xl h-11 px-3 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+              className="bg-background border-border rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
             >
               <option value="2/3">2:3 (Standard Poster)</option>
               <option value="16/9">16:9 (Wide Thumbnail)</option>
@@ -287,38 +288,38 @@ export default function AddMediaView({ activeCategory, onAddComplete }: AddMedia
             </select>
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="poster" className="text-sm font-black text-zinc-700">Poster URL</Label>
+            <Label htmlFor="poster" className="text-sm font-black text-foreground">Poster URL</Label>
             <Input 
               id="poster" 
               value={newMedia.poster}
               onChange={e => setNewMedia(prev => ({ ...prev, poster: e.target.value }))}
               placeholder="https://example.com/poster.jpg" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
               required
             />
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="banner" className="text-sm font-black text-zinc-700">Banner URL (Optional)</Label>
+            <Label htmlFor="banner" className="text-sm font-black text-foreground">Banner URL (Optional)</Label>
             <Input 
               id="banner" 
               value={newMedia.banner}
               onChange={e => setNewMedia(prev => ({ ...prev, banner: e.target.value }))}
               placeholder="https://example.com/banner.jpg" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
             />
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="description" className="text-sm font-black text-zinc-700">Description (Optional)</Label>
+            <Label htmlFor="description" className="text-sm font-black text-foreground">Description (Optional)</Label>
             <textarea 
               id="description"
               value={newMedia.description}
               onChange={e => setNewMedia(prev => ({ ...prev, description: e.target.value }))}
               placeholder="Brief description..."
-              className="bg-zinc-50 border-zinc-100 rounded-xl p-3 h-20 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none resize-none"
+              className="bg-muted border-border rounded-xl p-3 h-20 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none resize-none"
             />
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="rating" className="text-sm font-black text-zinc-700">Rating (Optional)</Label>
+            <Label htmlFor="rating" className="text-sm font-black text-foreground">Rating (Optional)</Label>
             <Input 
               id="rating" 
               type="number"
@@ -328,84 +329,84 @@ export default function AddMediaView({ activeCategory, onAddComplete }: AddMedia
               value={newMedia.rating}
               onChange={e => setNewMedia(prev => ({ ...prev, rating: e.target.value }))}
               placeholder="8.5" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
             />
           </div>
           {(newMedia.category === 'Anime' || newMedia.category === 'Movies' || newMedia.category === 'TV Series' || newMedia.category === 'Adult') && (
             <>
               <div className="grid grid-cols-2 gap-4">
                 <div className="grid gap-2">
-                  <Label htmlFor="runtime" className="text-sm font-black text-zinc-700">Runtime (min)</Label>
+                  <Label htmlFor="runtime" className="text-sm font-black text-foreground">Runtime (min)</Label>
                   <Input 
                     id="runtime" 
                     type="number"
                     value={newMedia.runtime}
                     onChange={e => setNewMedia(prev => ({ ...prev, runtime: e.target.value }))}
                     placeholder="120" 
-                    className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+                    className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
                   />
                 </div>
                 <div className="grid gap-2">
-                  <Label htmlFor="releaseDate" className="text-sm font-black text-zinc-700">Release Date</Label>
+                  <Label htmlFor="releaseDate" className="text-sm font-black text-foreground">Release Date</Label>
                   <Input 
                     id="releaseDate" 
                     type="date"
                     value={newMedia.releaseDate}
                     onChange={e => setNewMedia(prev => ({ ...prev, releaseDate: e.target.value }))}
-                    className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+                    className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
                   />
                 </div>
               </div>
               <div className="grid gap-2">
-                <Label htmlFor="director" className="text-sm font-black text-zinc-700">Director</Label>
+                <Label htmlFor="director" className="text-sm font-black text-foreground">Director</Label>
                 <Input 
                   id="director" 
                   value={newMedia.director}
                   onChange={e => setNewMedia(prev => ({ ...prev, director: e.target.value }))}
                   placeholder="Director name" 
-                  className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+                  className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
                 />
               </div>
               <div className="grid gap-2">
-                <Label htmlFor="writer" className="text-sm font-black text-zinc-700">Writer</Label>
+                <Label htmlFor="writer" className="text-sm font-black text-foreground">Writer</Label>
                 <Input 
                   id="writer" 
                   value={newMedia.writer}
                   onChange={e => setNewMedia(prev => ({ ...prev, writer: e.target.value }))}
                   placeholder="Writer name" 
-                  className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+                  className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
                 />
               </div>
             </>
           )}
           <div className="grid gap-2">
-            <Label htmlFor="genres" className="text-sm font-black text-zinc-700">Genres (comma-separated)</Label>
+            <Label htmlFor="genres" className="text-sm font-black text-foreground">Genres (comma-separated)</Label>
             <Input 
               id="genres" 
               value={newMedia.genres}
               onChange={e => setNewMedia(prev => ({ ...prev, genres: e.target.value }))}
               placeholder="Action, Drama, Sci-Fi" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
             />
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="tags" className="text-sm font-black text-zinc-700">Tags (comma-separated)</Label>
+            <Label htmlFor="tags" className="text-sm font-black text-foreground">Tags (comma-separated)</Label>
             <Input 
               id="tags" 
               value={newMedia.tags}
               onChange={e => setNewMedia(prev => ({ ...prev, tags: e.target.value }))}
               placeholder="Classic, Best-selling" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
             />
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="studios" className="text-sm font-black text-zinc-700">Studios (comma-separated)</Label>
+            <Label htmlFor="studios" className="text-sm font-black text-foreground">Studios (comma-separated)</Label>
             <Input 
               id="studios" 
               value={newMedia.studios}
               onChange={e => setNewMedia(prev => ({ ...prev, studios: e.target.value }))}
               placeholder="Studio A, Studio B" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
             />
           </div>
           <Button 
diff --git a/src/components/BrowseView.tsx b/src/components/BrowseView.tsx
index 78d1d11..f3afab6 100644
--- a/src/components/BrowseView.tsx
+++ b/src/components/BrowseView.tsx
@@ -92,7 +92,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
           {/* Genre Filter */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedGenre ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+              <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedGenre ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground")}>
                 <Star size={16} />
                 {selectedGenre || 'Genres'}
               </button>
@@ -108,7 +108,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
           {/* Studio Filter */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedStudio ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+              <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedStudio ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground")}>
                 Studios
               </button>
             </DropdownMenuTrigger>
@@ -124,7 +124,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
           {activeCategory === 'Games' && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedPlatform ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedPlatform ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground")}>
                   <Monitor size={16} />
                   {selectedPlatform || 'Platforms'}
                 </button>
@@ -142,7 +142,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
           {activeCategory === 'Games' && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedDeveloper ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedDeveloper ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground")}>
                   <Users size={16} />
                   {selectedDeveloper || 'Developers'}
                 </button>
@@ -160,7 +160,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
           {activeCategory === 'Games' && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedCategory ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedCategory ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground")}>
                   <FolderTree size={16} />
                   {selectedCategory || 'Categories'}
                 </button>
@@ -178,7 +178,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
             <Button 
               variant="link" 
               size="sm" 
-              className="text-zinc-400 font-bold"
+              className="text-muted-foreground font-bold"
               onClick={() => {
                 setSelectedGenre(null);
                 setSelectedStudio(null);
@@ -195,7 +195,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
         <div className="flex items-center gap-4">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button type="button" className="group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 text-zinc-600 font-bold gap-2">
+              <button type="button" className="group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 text-muted-foreground font-bold gap-2">
                 <ArrowUpDown size={16} />
                 {sortBy === 'default' ? 'Sort' : sortBy === 'title-asc' ? 'Title (A-Z)' : 'Title (Z-A)'}
               </button>
@@ -207,13 +207,13 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
             </DropdownMenuContent>
           </DropdownMenu>
           
-          <div className="flex items-center bg-zinc-100 rounded-md p-1">
+          <div className="flex items-center bg-muted rounded-md p-1">
             <Button 
               variant="ghost" 
               size="icon" 
               className={cn(
                 "h-8 w-8 transition-all",
-                viewMode === 'grid' ? "bg-white shadow-sm text-[#6d28d9]" : "text-zinc-400"
+                viewMode === 'grid' ? "bg-background shadow-sm text-[#6d28d9]" : "text-muted-foreground"
               )}
               onClick={() => setViewMode('grid')}
             >
@@ -224,7 +224,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
               size="icon" 
               className={cn(
                 "h-8 w-8 transition-all",
-                viewMode === 'list' ? "bg-white shadow-sm text-[#6d28d9]" : "text-zinc-400"
+                viewMode === 'list' ? "bg-background shadow-sm text-[#6d28d9]" : "text-muted-foreground"
               )}
               onClick={() => setViewMode('list')}
             >
@@ -236,8 +236,8 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
 
       {/* Content */}
       {mediaList.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-20 text-zinc-400">
-          <div className="w-16 h-16 bg-zinc-100 rounded-full flex items-center justify-center mb-4">
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
             <Search size={32} />
           </div>
           <p className="text-lg font-bold">No results found</p>
@@ -271,16 +271,16 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
 
       {/* Pagination Controls */}
       {mediaList.length > 0 && (
-        <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-6 border-t border-zinc-100 pt-8">
+        <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-6 border-t border-border pt-8">
           <div className="flex items-center gap-4">
-            <span className="text-sm text-zinc-500 font-medium">Items per page:</span>
+            <span className="text-sm text-muted-foreground font-medium">Items per page:</span>
             <select 
               value={itemsPerPage}
               onChange={(e) => {
                 setItemsPerPage(Number(e.target.value));
                 setCurrentPage(1);
               }}
-              className="bg-zinc-100 border-none rounded-md px-2 py-1 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+              className="bg-muted border-none rounded-md px-2 py-1 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
             >
               {[12, 20, 36, 48, 60].map(size => (
                 <option key={size} value={size}>{size}</option>
@@ -294,7 +294,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
               size="sm" 
               onClick={handlePrevPage}
               disabled={currentPage === 1}
-              className="gap-2 font-bold border-zinc-200"
+              className="gap-2 font-bold border-border"
             >
               <ChevronLeft size={16} />
               Previous
@@ -302,8 +302,8 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
             
             <div className="flex items-center gap-2">
               <span className="text-sm font-black text-[#6d28d9]">{currentPage}</span>
-              <span className="text-sm text-zinc-400 font-medium">of</span>
-              <span className="text-sm font-bold text-zinc-700">{totalPages || 1}</span>
+              <span className="text-sm text-muted-foreground font-medium">of</span>
+              <span className="text-sm font-bold text-foreground">{totalPages || 1}</span>
             </div>
 
             <Button 
@@ -311,7 +311,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
               size="sm" 
               onClick={handleNextPage}
               disabled={currentPage === totalPages || totalPages === 0}
-              className="gap-2 font-bold border-zinc-200"
+              className="gap-2 font-bold border-border"
             >
               Next
               <ChevronRight size={16} />
diff --git a/src/components/CastDetailView.tsx b/src/components/CastDetailView.tsx
index 534ffca..22fb726 100644
--- a/src/components/CastDetailView.tsx
+++ b/src/components/CastDetailView.tsx
@@ -17,7 +17,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
     navigate(`/media/${mediaId}`);
   };
   return (
-    <div className="min-h-screen bg-white pb-20">
+    <div className="min-h-screen bg-background pb-20">
       {/* Hero Section */}
       <div className="relative h-[40vh] md:h-[50vh] overflow-hidden bg-zinc-900">
         <img 
@@ -26,14 +26,14 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
           className="w-full h-full object-cover opacity-40 blur-xl scale-110"
           referrerPolicy="no-referrer"
         />
-        <div className="absolute inset-0 bg-gradient-to-t from-white via-transparent to-transparent" />
+        <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent" />
         
         <div className="absolute inset-0 flex items-end px-6 pb-12">
           <div className="max-w-[1200px] mx-auto w-full flex flex-col md:flex-row items-center md:items-end gap-8">
             <motion.div 
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              className="w-48 h-48 md:w-64 md:h-64 rounded-2xl overflow-hidden border-4 border-white shadow-2xl shrink-0"
+              className="w-48 h-48 md:w-64 md:h-64 rounded-2xl overflow-hidden border-4 border-background shadow-2xl shrink-0"
             >
               <img 
                 src={person.photo} 
@@ -49,7 +49,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                 animate={{ opacity: 1, x: 0 }}
                 transition={{ delay: 0.1 }}
               >
-                <h1 className="text-4xl md:text-6xl font-black text-zinc-900 mb-4 drop-shadow-sm">
+                <h1 className="text-4xl md:text-6xl font-black text-foreground mb-4 drop-shadow-sm">
                   {person.name}
                 </h1>
                 <div className="flex flex-wrap justify-center md:justify-start gap-3">
@@ -78,90 +78,90 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
       <div className="max-w-[1200px] mx-auto px-6 mt-12 grid grid-cols-1 lg:grid-cols-3 gap-12">
         {/* Sidebar Info */}
         <div className="space-y-8">
-          <div className="bg-zinc-50 rounded-3xl p-8 space-y-6">
-            <h3 className="text-xl font-black text-zinc-900">Personal Info</h3>
+          <div className="bg-muted/50 rounded-3xl p-8 space-y-6 border border-border">
+            <h3 className="text-xl font-black text-foreground">Personal Info</h3>
             
             <div className="space-y-4">
               <div className="flex items-start gap-4">
-                <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                   <Calendar size={20} />
                 </div>
                 <div>
-                  <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Birth Date</p>
-                  <p className="font-bold text-zinc-700">{person.birthDate || 'Unknown'}</p>
+                  <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Birth Date</p>
+                  <p className="font-bold text-foreground">{person.birthDate || 'Unknown'}</p>
                 </div>
               </div>
 
               <div className="flex items-start gap-4">
-                <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                   <MapPin size={20} />
                 </div>
                 <div>
-                  <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Birth Place</p>
-                  <p className="font-bold text-zinc-700">{person.birthPlace || 'Unknown'}</p>
+                  <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Birth Place</p>
+                  <p className="font-bold text-foreground">{person.birthPlace || 'Unknown'}</p>
                 </div>
               </div>
 
               <div className="flex items-start gap-4">
-                <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                   <Briefcase size={20} />
                 </div>
                 <div>
-                  <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Known For</p>
-                  <p className="font-bold text-zinc-700">{person.role}</p>
+                  <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Known For</p>
+                  <p className="font-bold text-foreground">{person.role}</p>
                 </div>
               </div>
 
               {(person.ethnicity || person.adult_specifics?.ethnicity) && (
                 <div className="flex items-start gap-4">
-                  <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                  <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                     <User size={20} />
                   </div>
                   <div>
-                    <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Ethnicity</p>
-                    <p className="font-bold text-zinc-700">{person.adult_specifics?.ethnicity || person.ethnicity}</p>
+                    <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Ethnicity</p>
+                    <p className="font-bold text-foreground">{person.adult_specifics?.ethnicity || person.ethnicity}</p>
                   </div>
                 </div>
               )}
             </div>
           </div>
 
-            <div className="bg-zinc-50 rounded-3xl p-8 space-y-6">
-              <h3 className="text-xl font-black text-zinc-900">Measurements</h3>
+            <div className="bg-muted/50 rounded-3xl p-8 space-y-6 border border-border">
+              <h3 className="text-xl font-black text-foreground">Measurements</h3>
 
               <div className="space-y-4">
                 
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Ruler size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Height</p>
-                      <p className="font-bold text-zinc-700">{person.adult_specifics?.height || person.height} cm</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Height</p>
+                      <p className="font-bold text-foreground">{person.adult_specifics?.height || person.height} cm</p>
                     </div>
                   </div>
                 
 
                 {(person.weight || person.adult_specifics?.weight) && (
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Ruler size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Weight</p>
-                      <p className="font-bold text-zinc-700">{person.adult_specifics?.weight || person.weight} kg</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Weight</p>
+                      <p className="font-bold text-foreground">{person.adult_specifics?.weight || person.weight} kg</p>
                     </div>
                   </div>
                 )}
 
                 {(person.adult_specifics?.measurements || person.bust_size || person.cup_size || person.waist_size || person.hip_size) && (
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Ruler size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Measurements</p>
-                      <p className="font-bold text-zinc-700">
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Measurements</p>
+                      <p className="font-bold text-foreground">
                         {person.adult_specifics?.measurements || (
                           <>
                             {person.bust_size && `${person.bust_size}`}
@@ -179,48 +179,48 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
 
                 {(person.hair_color || person.adult_specifics?.hair_color) && (
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Palette size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Hair Color</p>
-                      <p className="font-bold text-zinc-700">{person.adult_specifics?.hair_color || person.hair_color}</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Hair Color</p>
+                      <p className="font-bold text-foreground">{person.adult_specifics?.hair_color || person.hair_color}</p>
                     </div>
                   </div>
                 )}
 
                 {(person.eye_color || person.adult_specifics?.eye_color) && (
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Eye size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Eye Color</p>
-                      <p className="font-bold text-zinc-700">{person.adult_specifics?.eye_color || person.eye_color}</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Eye Color</p>
+                      <p className="font-bold text-foreground">{person.adult_specifics?.eye_color || person.eye_color}</p>
                     </div>
                   </div>
                 )}
 
                 {person.adult_specifics?.tattoos && (
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Palette size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Tattoos</p>
-                      <p className="font-bold text-zinc-700">{person.adult_specifics.tattoos}</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Tattoos</p>
+                      <p className="font-bold text-foreground">{person.adult_specifics.tattoos}</p>
                     </div>
                   </div>
                 )}
 
                 {person.adult_specifics?.piercings && (
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Palette size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Piercings</p>
-                      <p className="font-bold text-zinc-700">{person.adult_specifics.piercings}</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Piercings</p>
+                      <p className="font-bold text-foreground">{person.adult_specifics.piercings}</p>
                     </div>
                   </div>
                 )}
@@ -232,10 +232,10 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
         <div className="lg:col-span-2 space-y-12">
           {person.bio && (
             <section>
-              <h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
+              <h2 className="text-2xl font-black text-foreground mb-6 flex items-center gap-3">
                 Biography
               </h2>
-              <p className="text-zinc-600 leading-relaxed text-lg">
+              <p className="text-foreground leading-relaxed text-lg">
                 {person.bio}
               </p>
             </section>
@@ -243,7 +243,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
 
           {person.filmography && person.filmography.length > 0 && (
             <section>
-              <h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
+              <h2 className="text-2xl font-black text-foreground mb-6 flex items-center gap-3">
                 <User className="text-[#6d28d9]" />
                 Characters
               </h2>
@@ -251,9 +251,9 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                 {person.filmography.map(item => (
                   <div 
                     key={`${item.id}-char`}
-                    className="flex items-center gap-4 p-4 rounded-2xl bg-zinc-50 border border-zinc-100"
+                    className="flex items-center gap-4 p-4 rounded-2xl bg-muted/50 border border-border"
                   >
-                    <div className="w-20 h-20 rounded-xl overflow-hidden shrink-0 shadow-sm border-2 border-white">
+                    <div className="w-20 h-20 rounded-xl overflow-hidden shrink-0 shadow-sm border-2 border-background">
                       <img 
                         src={item.poster || person.photo} 
                         alt={item.title} 
@@ -262,8 +262,8 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                       />
                     </div>
                     <div className="min-w-0 flex-1">
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Character</p>
-                      <h4 className="font-black text-zinc-900 truncate">{item.characterName || item.role}</h4>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest mb-1">Character</p>
+                      <h4 className="font-black text-foreground truncate">{item.characterName || item.role}</h4>
                       <button 
                         onClick={() => handleMediaClick(item.id.toString())}
                         className="text-xs font-bold text-[#6d28d9] hover:underline mt-1 text-left"
@@ -279,7 +279,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
 
           {person.filmography && person.filmography.length > 0 && (
             <section>
-              <h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
+              <h2 className="text-2xl font-black text-foreground mb-6 flex items-center gap-3">
                 <Film className="text-[#6d28d9]" />
                 Filmography
               </h2>
@@ -288,7 +288,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                   <div 
                     key={item.id}
                     onClick={() => handleMediaClick(item.id.toString())}
-                    className="group flex items-center gap-4 p-4 rounded-2xl bg-white border border-zinc-100 hover:border-[#6d28d9]/30 hover:shadow-lg transition-all cursor-pointer"
+                    className="group flex items-center gap-4 p-4 rounded-2xl bg-card border border-border hover:border-[#6d28d9]/30 hover:shadow-lg transition-all cursor-pointer"
                   >
                     <div className="w-16 h-20 rounded-lg overflow-hidden shrink-0 shadow-sm">
                       <img 
@@ -299,14 +299,14 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                       />
                     </div>
                     <div className="min-w-0">
-                      <h4 className="font-black text-zinc-900 truncate group-hover:text-[#6d28d9] transition-colors">
+                      <h4 className="font-black text-foreground truncate group-hover:text-[#6d28d9] transition-colors">
                         {item.title}
                       </h4>
-                      <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider mb-1">
+                      <p className="text-xs font-bold text-muted-foreground uppercase tracking-wider mb-1">
                         {item.year || 'Unknown'}
                       </p>
                       <div className="flex items-center gap-2">
-                        <Badge variant="outline" className="text-[10px] font-bold py-0 h-5 border-zinc-200">
+                        <Badge variant="outline" className="text-[10px] font-bold py-0 h-5 border-border">
                           {item.role}
                         </Badge>
                       </div>
diff --git a/src/components/CastView.tsx b/src/components/CastView.tsx
index 1662de6..7acded7 100644
--- a/src/components/CastView.tsx
+++ b/src/components/CastView.tsx
@@ -177,24 +177,24 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
     <div className="pt-24 pb-12 px-6 max-w-[1200px] mx-auto">
       <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
         <div>
-          <h1 className="text-4xl font-black text-zinc-900 mb-2">Cast & Staff</h1>
-          <p className="text-zinc-500 font-medium">Discover the people behind your favorite media</p>
+          <h1 className="text-4xl font-black text-foreground mb-2">Cast & Staff</h1>
+          <p className="text-muted-foreground font-medium">Discover the people behind your favorite media</p>
         </div>
 
         <div className="flex items-center gap-4">
           <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={18} />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={18} />
             <Input 
               placeholder="Search cast..." 
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-10 w-full md:w-[300px] bg-zinc-100 border-none rounded-full h-11"
+              className="pl-10 w-full md:w-[300px] bg-muted border-none rounded-full h-11"
             />
           </div>
           <Button 
             variant={showFilters ? 'default' : 'outline'}
             size="icon" 
-            className={`rounded-full h-11 w-11 ${showFilters ? 'bg-[#6d28d9] text-white border-[#6d28d9]' : 'border-zinc-200'}`}
+            className={`rounded-full h-11 w-11 ${showFilters ? 'bg-[#6d28d9] text-white border-[#6d28d9]' : 'border-border'}`}
             onClick={() => setShowFilters(!showFilters)}
           >
             <Filter size={20} />
@@ -202,7 +202,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
           <Button 
             variant="outline" 
             size="icon" 
-            className="rounded-full h-11 w-11 border-zinc-200"
+            className="rounded-full h-11 w-11 border-border"
             onClick={() => setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc')}
           >
             <ArrowUpDown size={20} />
@@ -211,7 +211,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
             <Button 
               variant="ghost" 
               size="icon" 
-              className="rounded-full h-11 w-11 text-zinc-400 hover:text-zinc-900"
+              className="rounded-full h-11 w-11 text-muted-foreground hover:text-foreground"
               onClick={handleResetFilters}
               title="Reset filters"
             >
@@ -226,15 +226,15 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
           initial={{ opacity: 0, height: 0 }}
           animate={{ opacity: 1, height: 'auto' }}
           exit={{ opacity: 0, height: 0 }}
-          className="bg-zinc-50 rounded-2xl p-6 mb-6"
+          className="bg-muted/50 rounded-2xl p-6 mb-6 border border-border"
         >
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div>
-              <label className="text-sm font-bold text-zinc-700 mb-2 block">Sort By</label>
+              <label className="text-sm font-bold text-foreground mb-2 block">Sort By</label>
               <select 
                 value={sortBy}
                 onChange={(e) => setSortBy(e.target.value as any)}
-                className="w-full bg-white border-zinc-200 rounded-lg px-3 py-2 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+                className="w-full bg-background border-border rounded-lg px-3 py-2 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
               >
                 <option value="name">Name</option>
                 <option value="role">Role</option>
@@ -243,11 +243,11 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
               </select>
             </div>
             <div>
-              <label className="text-sm font-bold text-zinc-700 mb-2 block">Occupation</label>
+              <label className="text-sm font-bold text-foreground mb-2 block">Occupation</label>
               <select 
                 value={filterOccupation}
                 onChange={(e) => setFilterOccupation(e.target.value)}
-                className="w-full bg-white border-zinc-200 rounded-lg px-3 py-2 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+                className="w-full bg-background border-border rounded-lg px-3 py-2 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
               >
                 <option value="">All Occupations</option>
                 {uniqueOccupations.map(occ => (
@@ -256,11 +256,11 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
               </select>
             </div>
             <div>
-              <label className="text-sm font-bold text-zinc-700 mb-2 block">Media Type</label>
+              <label className="text-sm font-bold text-foreground mb-2 block">Media Type</label>
               <select 
                 value={filterMediaType}
                 onChange={(e) => setFilterMediaType(e.target.value)}
-                className="w-full bg-white border-zinc-200 rounded-lg px-3 py-2 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+                className="w-full bg-background border-border rounded-lg px-3 py-2 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
               >
                 <option value="">All Media Types</option>
                 {uniqueMediaTypes.map(type => (
@@ -273,7 +273,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
             {searchQuery && (
               <Badge variant="secondary" className="gap-1">
                 Search: {searchQuery}
-                <button onClick={() => setSearchQuery('')} className="hover:text-zinc-900">
+                <button onClick={() => setSearchQuery('')} className="hover:text-foreground">
                   <X size={12} />
                 </button>
               </Badge>
@@ -281,7 +281,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
             {filterOccupation && (
               <Badge variant="secondary" className="gap-1">
                 Occupation: {filterOccupation}
-                <button onClick={() => setFilterOccupation('')} className="hover:text-zinc-900">
+                <button onClick={() => setFilterOccupation('')} className="hover:text-foreground">
                   <X size={12} />
                 </button>
               </Badge>
@@ -289,7 +289,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
             {filterMediaType && (
               <Badge variant="secondary" className="gap-1">
                 Media Type: {filterMediaType}
-                <button onClick={() => setFilterMediaType('')} className="hover:text-zinc-900">
+                <button onClick={() => setFilterMediaType('')} className="hover:text-foreground">
                   <X size={12} />
                 </button>
               </Badge>
@@ -297,7 +297,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
             {(sortBy !== 'name' || sortOrder !== 'asc') && (
               <Badge variant="secondary" className="gap-1">
                 Sort: {sortBy} ({sortOrder})
-                <button onClick={() => { setSortBy('name'); setSortOrder('asc'); }} className="hover:text-zinc-900">
+                <button onClick={() => { setSortBy('name'); setSortOrder('asc'); }} className="hover:text-foreground">
                   <X size={12} />
                 </button>
               </Badge>
@@ -307,12 +307,12 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
       )}
 
       {loading ? (
-        <div className="flex flex-col items-center justify-center py-20 text-zinc-400">
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#6d28d9] mb-4" />
           <p className="text-lg font-bold">Loading cast...</p>
         </div>
       ) : filteredStaff.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-20 text-zinc-400">
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
           <User size={48} className="mb-4 opacity-20" />
           <p className="text-lg font-bold">No cast members found</p>
         </div>
@@ -326,11 +326,11 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                 initial={{ opacity: 0, scale: 0.9 }}
                 animate={{ opacity: 1, scale: 1 }}
                 exit={{ opacity: 0, scale: 0.9 }}
-                className="group bg-white rounded-2xl p-4 shadow-sm border border-zinc-100 hover:shadow-xl hover:border-[#6d28d9]/20 transition-all duration-300 cursor-pointer"
+                className="group bg-card rounded-2xl p-4 shadow-sm border border-border hover:shadow-xl hover:border-[#6d28d9]/20 transition-all duration-300 cursor-pointer"
                 onClick={() => onPersonClick(person)}
               >
                 <div className="flex items-center gap-4 mb-4">
-                  <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-zinc-100 group-hover:border-[#6d28d9] transition-colors">
+                  <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-border group-hover:border-[#6d28d9] transition-colors">
                     <img 
                       src={person.photo} 
                       alt={person.name} 
@@ -339,18 +339,18 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                     />
                   </div>
                   <div className="min-w-0">
-                    <h3 className="font-black text-zinc-900 truncate group-hover:text-[#6d28d9] transition-colors">
+                    <h3 className="font-black text-foreground truncate group-hover:text-[#6d28d9] transition-colors">
                       {person.name}
                     </h3>
-                    <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">
+                    <p className="text-xs font-bold text-muted-foreground uppercase tracking-wider">
                       {person.role}
                     </p>
                   </div>
                 </div>
 
                 {person.filmography && person.filmography.length > 0 && (
-                  <div className="bg-zinc-50 rounded-xl p-3 flex items-center gap-3">
-                    <div className="w-10 h-12 rounded-lg overflow-hidden shrink-0 bg-white">
+                  <div className="bg-muted/50 rounded-xl p-3 flex items-center gap-3">
+                    <div className="w-10 h-12 rounded-lg overflow-hidden shrink-0 bg-background">
                       <img 
                         src={person.filmography[0].poster || person.photo} 
                         alt={person.filmography[0].title} 
@@ -359,8 +359,8 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                       />
                     </div>
                     <div className="min-w-0">
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest leading-none mb-1">Latest Role</p>
-                      <p className="text-xs font-bold text-zinc-700 truncate">{person.filmography[0].title}</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest leading-none mb-1">Latest Role</p>
+                      <p className="text-xs font-bold text-foreground truncate">{person.filmography[0].title}</p>
                       <p className="text-[10px] text-[#6d28d9] font-bold truncate mt-1">{person.filmography[0].role}</p>
                     </div>
                   </div>
@@ -373,15 +373,15 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
 
       {/* Pagination Controls */}
       {filteredStaff.length > 0 && (
-        <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-6 border-t border-zinc-100 pt-8">
+        <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-6 border-t border-border pt-8">
           <div className="flex items-center gap-4">
-            <span className="text-sm text-zinc-500 font-medium">Items per page:</span>
+            <span className="text-sm text-muted-foreground font-medium">Items per page:</span>
             <select 
               value={itemsPerPage}
               onChange={(e) => {
                 setItemsPerPage(Number(e.target.value));
               }}
-              className="bg-zinc-100 border-none rounded-md px-2 py-1 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+              className="bg-muted border-none rounded-md px-2 py-1 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
             >
               {[12, 20, 36, 48, 60].map(size => (
                 <option key={size} value={size}>{size}</option>
@@ -395,7 +395,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
               size="sm" 
               onClick={handlePrevPage}
               disabled={currentPage === 1}
-              className="gap-2 font-bold border-zinc-200"
+              className="gap-2 font-bold border-border"
             >
               <ChevronLeft size={16} />
               Previous
@@ -403,8 +403,8 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
             
             <div className="flex items-center gap-2">
               <span className="text-sm font-black text-[#6d28d9]">{currentPage}</span>
-              <span className="text-sm text-zinc-400 font-medium">of</span>
-              <span className="text-sm font-bold text-zinc-700">{totalPages || 1}</span>
+              <span className="text-sm text-muted-foreground font-medium">of</span>
+              <span className="text-sm font-bold text-foreground">{totalPages || 1}</span>
             </div>
 
             <Button 
@@ -412,7 +412,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
               size="sm" 
               onClick={handleNextPage}
               disabled={currentPage === totalPages || totalPages === 0}
-              className="gap-2 font-bold border-zinc-200"
+              className="gap-2 font-bold border-border"
             >
               Next
               <ChevronRight size={16} />
diff --git a/src/components/DetailView.tsx b/src/components/DetailView.tsx
index 633c066..30636b5 100644
--- a/src/components/DetailView.tsx
+++ b/src/components/DetailView.tsx
@@ -24,7 +24,7 @@ interface DetailViewProps {
 export default function DetailView({ media, onPersonClick }: DetailViewProps) {
   const navigate = useNavigate();
   return (
-    <div className="min-h-screen bg-zinc-50">
+    <div className="min-h-screen bg-background">
       {/* Banner */}
       <div className="relative h-[400px] w-full overflow-hidden">
         <img 
@@ -33,7 +33,7 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
           className="w-full h-full object-cover"
           referrerPolicy="no-referrer"
         />
-        <div className="absolute inset-0 bg-gradient-to-t from-zinc-50 via-zinc-50/40 to-transparent" />
+        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent" />
         
         <button 
           onClick={() => navigate(-1)}
@@ -50,7 +50,7 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
           <div className="w-full md:w-[300px] shrink-0">
             <motion.div 
               layoutId={`media-${media.id}`}
-              className={`rounded-xl overflow-hidden shadow-2xl bg-zinc-800 ${
+              className={`rounded-xl overflow-hidden shadow-2xl bg-card ${
                 media.aspectRatio === '16/9' ? 'aspect-video' : 
                 media.aspectRatio === '1/1' ? 'aspect-square' : 
                 'aspect-[2/3]'
@@ -69,22 +69,22 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
           <div className="flex-1 pt-32 md:pt-40">
             <div className="flex flex-wrap items-end justify-between gap-4 mb-6">
               <div>
-                <h1 className="text-4xl font-black text-zinc-900 mb-2">
-                  {media.title} <span className="text-zinc-400 font-medium">({media.year})</span>
+                <h1 className="text-4xl font-black text-foreground mb-2">
+                  {media.title} <span className="text-muted-foreground font-medium">({media.year})</span>
                 </h1>
                 <div className="flex items-center gap-4">
                   <div className="flex items-center gap-2">
                     <Button size="icon" className="rounded-full bg-[#6d28d9] hover:bg-[#5b21b6]">
                       <Play size={20} fill="currentColor" />
                     </Button>
-                    <Button size="icon" variant="outline" className="rounded-full border-zinc-300">
+                    <Button size="icon" variant="outline" className="rounded-full border-border">
                       <Bookmark size={20} />
                     </Button>
-                    <Button size="icon" variant="outline" className="rounded-full border-zinc-300">
+                    <Button size="icon" variant="outline" className="rounded-full border-border">
                       <MoreHorizontal size={20} />
                     </Button>
                   </div>
-                  <div className="flex items-center gap-1 text-zinc-600 font-bold">
+                  <div className="flex items-center gap-1 text-foreground font-bold">
                     <Star size={18} className="text-yellow-500" fill="currentColor" />
                     {media.rating} / 10
                   </div>
@@ -95,7 +95,7 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
                 <h3 className="text-xs font-black text-[#6d28d9] uppercase tracking-wider mb-2">Genres</h3>
                 <div className="flex flex-col items-end gap-1">
                   {media.genres?.map(genre => (
-                    <span key={genre} className="text-sm font-bold text-zinc-600 hover:text-[#6d28d9] cursor-pointer transition-colors">
+                    <span key={genre} className="text-sm font-bold text-foreground hover:text-[#6d28d9] cursor-pointer transition-colors">
                       • {genre}
                     </span>
                   ))}
@@ -103,7 +103,7 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
               </div>
             </div>
 
-            <p className="text-zinc-600 leading-relaxed mb-8 max-w-3xl">
+            <p className="text-foreground leading-relaxed mb-8 max-w-3xl">
               {media.description}
             </p>
 
@@ -118,16 +118,16 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
 
             <div className="space-y-4">
               {media.studios && media.studios.length > 0 && (
-                <p className="text-xs font-bold text-zinc-500">
-                  <span className="text-zinc-400 uppercase tracking-widest mr-2">Studios:</span>
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Studios:</span>
                   {media.studios.join(', ')}
                 </p>
               )}
               {media.developers && media.developers.length > 0 && (
                 <div className="flex items-center gap-2 flex-wrap">
-                  <span className="text-xs font-bold text-zinc-400 uppercase tracking-widest">Developers:</span>
+                  <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Developers:</span>
                   {media.developers.map(dev => (
-                    <Badge key={dev} variant="secondary" className="bg-zinc-100 text-zinc-700 hover:bg-zinc-200 border-none px-3 py-1 font-bold text-[10px]">
+                    <Badge key={dev} variant="secondary" className="bg-muted text-foreground hover:bg-muted/80 border-none px-3 py-1 font-bold text-[10px]">
                       {dev}
                     </Badge>
                   ))}
@@ -135,9 +135,9 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
               )}
               {media.platforms && media.platforms.length > 0 && (
                 <div className="flex items-center gap-2 flex-wrap">
-                  <span className="text-xs font-bold text-zinc-400 uppercase tracking-widest">Platforms:</span>
+                  <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Platforms:</span>
                   {media.platforms.map(platform => (
-                    <Badge key={platform} variant="secondary" className="bg-zinc-100 text-zinc-700 hover:bg-zinc-200 border-none px-3 py-1 font-bold text-[10px]">
+                    <Badge key={platform} variant="secondary" className="bg-muted text-foreground hover:bg-muted/80 border-none px-3 py-1 font-bold text-[10px]">
                       {platform}
                     </Badge>
                   ))}
@@ -145,46 +145,46 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
               )}
               {media.categories && media.categories.length > 0 && (
                 <div className="flex items-center gap-2 flex-wrap">
-                  <span className="text-xs font-bold text-zinc-400 uppercase tracking-widest">Categories:</span>
+                  <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Categories:</span>
                   {media.categories.map(category => (
-                    <Badge key={category} variant="secondary" className="bg-zinc-100 text-zinc-700 hover:bg-zinc-200 border-none px-3 py-1 font-bold text-[10px]">
+                    <Badge key={category} variant="secondary" className="bg-muted text-foreground hover:bg-muted/80 border-none px-3 py-1 font-bold text-[10px]">
                       {category}
                     </Badge>
                   ))}
                 </div>
               )}
               {media.completionStatus && (
-                <p className="text-xs font-bold text-zinc-500">
-                  <span className="text-zinc-400 uppercase tracking-widest mr-2">Completion:</span>
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Completion:</span>
                   {media.completionStatus}
                 </p>
               )}
               {media.source && (
-                <p className="text-xs font-bold text-zinc-500">
-                  <span className="text-zinc-400 uppercase tracking-widest mr-2">Source:</span>
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Source:</span>
                   {media.source}
                 </p>
               )}
               {media.playCount !== undefined && media.playCount !== null && (
-                <p className="text-xs font-bold text-zinc-500">
-                  <span className="text-zinc-400 uppercase tracking-widest mr-2">Play Count:</span>
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Play Count:</span>
                   {media.playCount}
                 </p>
               )}
               {media.playtime !== undefined && media.playtime !== null && media.playtime > 0 && (
-                <p className="text-xs font-bold text-zinc-500">
-                  <span className="text-zinc-400 uppercase tracking-widest mr-2">Playtime:</span>
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Playtime:</span>
                   {media.playtime}h
                 </p>
               )}
               {media.lastActivity && (
-                <p className="text-xs font-bold text-zinc-500">
-                  <span className="text-zinc-400 uppercase tracking-widest mr-2">Last Activity:</span>
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Last Activity:</span>
                   {media.lastActivity}
                 </p>
               )}
               <div className="flex items-center gap-4">
-                <span className="text-xs font-bold text-zinc-400 uppercase tracking-widest">Links:</span>
+                <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Links:</span>
                 <Button variant="link" className="p-0 h-auto text-[#6d28d9] font-bold text-xs">Tvdb</Button>
                 <Button variant="link" className="p-0 h-auto text-[#6d28d9] font-bold text-xs">AniDb</Button>
               </div>
@@ -196,12 +196,12 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
         {media.staff && media.staff.length > 0 && (
           <section className="mt-20">
             <div className="flex items-center justify-between mb-8">
-              <h2 className="text-2xl font-black text-zinc-900">Cast & Crew</h2>
+              <h2 className="text-2xl font-black text-foreground">Cast & Crew</h2>
               <div className="flex gap-2">
-                <Button variant="outline" size="icon" className="rounded-full border-zinc-200">
+                <Button variant="outline" size="icon" className="rounded-full border-border">
                   <ChevronLeft size={18} />
                 </Button>
-                <Button variant="outline" size="icon" className="rounded-full border-zinc-200">
+                <Button variant="outline" size="icon" className="rounded-full border-border">
                   <ChevronRight size={18} />
                 </Button>
               </div>
@@ -210,17 +210,17 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
               {media.staff.map(person => (
                 <div 
                   key={person.id} 
-                  className="flex items-center gap-4 bg-white p-3 rounded-xl shadow-sm border border-zinc-100 hover:shadow-md transition-shadow cursor-pointer group"
+                  className="flex items-center gap-4 bg-card p-3 rounded-xl shadow-sm border border-border hover:shadow-md transition-shadow cursor-pointer group"
                   onClick={() => onPersonClick(person)}
                 >
                   <div className="w-16 h-20 rounded-lg overflow-hidden shrink-0">
                     <img src={person.photo} alt={person.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform" referrerPolicy="no-referrer" />
                   </div>
                   <div className="flex-1 min-w-0">
-                    <h4 className="font-bold text-zinc-900 truncate group-hover:text-[#6d28d9] transition-colors">{person.name}</h4>
-                    <p className="text-xs text-zinc-500 truncate">{person.role}</p>
+                    <h4 className="font-bold text-foreground truncate group-hover:text-[#6d28d9] transition-colors">{person.name}</h4>
+                    <p className="text-xs text-muted-foreground truncate">{person.role}</p>
                   </div>
-                  <div className="w-16 h-20 rounded-lg overflow-hidden shrink-0 bg-zinc-50">
+                  <div className="w-16 h-20 rounded-lg overflow-hidden shrink-0 bg-muted">
                     <img src={person.characterImage} alt={person.characterName} className="w-full h-full object-contain" referrerPolicy="no-referrer" />
                   </div>
                 </div>
@@ -240,13 +240,13 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
               </div>
               <div className="flex items-center gap-2">
                 <div className="relative">
-                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
-                  <Input placeholder="Search" className="pl-10 w-[200px] bg-zinc-100 border-none rounded-full h-9 text-sm" />
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={16} />
+                  <Input placeholder="Search" className="pl-10 w-[200px] bg-muted border-none rounded-full h-9 text-sm" />
                 </div>
-                <Button variant="ghost" size="icon" className="text-zinc-400">
+                <Button variant="ghost" size="icon" className="text-muted-foreground">
                   <MoreHorizontal size={20} />
                 </Button>
-                <Button variant="ghost" size="icon" className="text-zinc-400">
+                <Button variant="ghost" size="icon" className="text-muted-foreground">
                   <ListFilter size={20} />
                 </Button>
               </div>
@@ -262,17 +262,17 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
                     </div>
                     <div className="flex-1 py-1">
                       <div className="flex items-center justify-between mb-2">
-                        <h3 className="font-black text-zinc-900 group-hover:text-[#6d28d9] transition-colors">
+                        <h3 className="font-black text-foreground group-hover:text-[#6d28d9] transition-colors">
                           S1:E{episode.number} • {episode.title}
                         </h3>
-                        <span className="text-xs font-bold text-zinc-400">{episode.date} • {episode.duration}</span>
+                        <span className="text-xs font-bold text-muted-foreground">{episode.date} • {episode.duration}</span>
                       </div>
-                      <p className="text-sm text-zinc-500 leading-relaxed line-clamp-3">
+                      <p className="text-sm text-muted-foreground leading-relaxed line-clamp-3">
                         {episode.description}
                       </p>
                     </div>
                   </div>
-                  <Separator className="mt-6 bg-zinc-200" />
+                  <Separator className="mt-6 bg-border" />
                 </div>
               ))}
             </div>
diff --git a/src/components/ImporterView.tsx b/src/components/ImporterView.tsx
index c753163..8be50f5 100644
--- a/src/components/ImporterView.tsx
+++ b/src/components/ImporterView.tsx
@@ -164,13 +164,13 @@ export default function ImporterView() {
             variant="ghost"
             size="icon"
             onClick={() => navigate('/')}
-            className="text-zinc-600 hover:text-[#6d28d9]"
+            className="text-muted-foreground hover:text-[#6d28d9]"
           >
             <ArrowLeft size={20} />
           </Button>
           <div>
-            <h1 className="text-2xl font-black text-zinc-900">Media Importers</h1>
-            <p className="text-sm text-zinc-500 font-medium">Import media from external platforms</p>
+            <h1 className="text-2xl font-black text-foreground">Media Importers</h1>
+            <p className="text-sm text-muted-foreground font-medium">Import media from external platforms</p>
           </div>
         </div>
       </div>
@@ -179,38 +179,38 @@ export default function ImporterView() {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
         {/* XBVR Importer Card */}
         {xbvrConfig.url && (
-          <div className="bg-white border border-zinc-200 rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                 <Film className="text-purple-600" size={24} />
               </div>
               <div>
-                <h3 className="font-bold text-zinc-900">XBVR</h3>
-                <p className="text-xs text-zinc-500 font-medium">Adult Video Manager</p>
+                <h3 className="font-bold text-foreground">XBVR</h3>
+                <p className="text-xs text-muted-foreground font-medium">Adult Video Manager</p>
               </div>
             </div>
             <Button
               variant="outline"
               size="icon"
-              className="h-8 w-8 border-zinc-200"
+              className="h-8 w-8 border-border"
               onClick={() => {}}
             >
               <Settings size={16} />
             </Button>
           </div>
-          <p className="text-sm text-zinc-600 mb-4">
+          <p className="text-sm text-muted-foreground mb-4">
             Import adult videos and actors from your XBVR database.
           </p>
           <div className="space-y-3">
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">XBVR URL</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">XBVR URL</label>
               <input
                 type="text"
                 value={xbvrConfig.url}
                 onChange={(e) => setXbvrConfig({ ...xbvrConfig, url: e.target.value })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="http://192.168.1.102:10001"
               />
             </div>
@@ -237,49 +237,49 @@ export default function ImporterView() {
 
         {/* StashAPP Importer Card */}
         {stashappConfig.url && (
-          <div className="bg-white border border-zinc-200 rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                 <Film className="text-blue-600" size={24} />
               </div>
               <div>
-                <h3 className="font-bold text-zinc-900">StashAPP</h3>
-                <p className="text-xs text-zinc-500 font-medium">Adult Content Manager</p>
+                <h3 className="font-bold text-foreground">StashAPP</h3>
+                <p className="text-xs text-muted-foreground font-medium">Adult Content Manager</p>
               </div>
             </div>
             <Button
               variant="outline"
               size="icon"
-              className="h-8 w-8 border-zinc-200"
+              className="h-8 w-8 border-border"
               onClick={() => {}}
             >
               <Settings size={16} />
             </Button>
           </div>
-          <p className="text-sm text-zinc-600 mb-4">
+          <p className="text-sm text-muted-foreground mb-4">
             Import adult videos and performers from your StashAPP database.
           </p>
           <div className="space-y-3">
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">StashAPP URL</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">StashAPP URL</label>
               <input
                 type="text"
                 value={stashappConfig.url}
                 onChange={(e) => setStashappConfig({ ...stashappConfig, url: e.target.value })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="http://192.168.1.102:10001"
               />
             </div>
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">API Key (optional)</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">API Key (optional)</label>
               <input
                 type="password"
                 value={stashappConfig.apiKey || ''}
                 onChange={(e) => setStashappConfig({ ...stashappConfig, apiKey: e.target.value })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="Enter API key if required"
               />
             </div>
@@ -306,38 +306,38 @@ export default function ImporterView() {
 
         {/* StashAPP Actor Updater Card */}
         {stashappConfig.url && (
-          <div className="bg-white border border-zinc-200 rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                 <Users className="text-green-600" size={24} />
               </div>
               <div>
-                <h3 className="font-bold text-zinc-900">StashAPP Actor Updater</h3>
-                <p className="text-xs text-zinc-500 font-medium">Update existing actors</p>
+                <h3 className="font-bold text-foreground">StashAPP Actor Updater</h3>
+                <p className="text-xs text-muted-foreground font-medium">Update existing actors</p>
               </div>
             </div>
             <Button
               variant="outline"
               size="icon"
-              className="h-8 w-8 border-zinc-200"
+              className="h-8 w-8 border-border"
               onClick={() => {}}
             >
               <Settings size={16} />
             </Button>
           </div>
-          <p className="text-sm text-zinc-600 mb-4">
+          <p className="text-sm text-muted-foreground mb-4">
             Update existing actors with fresh data from StashAPP and create missing ones.
           </p>
           <div className="space-y-3">
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">API Key (optional)</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">API Key (optional)</label>
               <input
                 type="password"
                 value={stashappConfig.apiKey || ''}
                 onChange={(e) => setStashappConfig({ ...stashappConfig, apiKey: e.target.value })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="Enter API key if required"
               />
             </div>
@@ -364,60 +364,60 @@ export default function ImporterView() {
 
         {/* Playnite Importer Card */}
         {playniteConfig.ip && playniteConfig.apiToken && (
-          <div className="bg-white border border-zinc-200 rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                 <Film className="text-orange-600" size={24} />
               </div>
               <div>
-                <h3 className="font-bold text-zinc-900">Playnite</h3>
-                <p className="text-xs text-zinc-500 font-medium">Game Library Manager</p>
+                <h3 className="font-bold text-foreground">Playnite</h3>
+                <p className="text-xs text-muted-foreground font-medium">Game Library Manager</p>
               </div>
             </div>
             <Button
               variant="outline"
               size="icon"
-              className="h-8 w-8 border-zinc-200"
+              className="h-8 w-8 border-border"
               onClick={() => {}}
             >
               <Settings size={16} />
             </Button>
           </div>
-          <p className="text-sm text-zinc-600 mb-4">
+          <p className="text-sm text-muted-foreground mb-4">
             Import games from your Playnite library via Bridge API.
           </p>
           <div className="space-y-3">
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">IP Address</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">IP Address</label>
               <input
                 type="text"
                 value={playniteConfig.ip}
                 onChange={(e) => setPlayniteConfig({ ...playniteConfig, ip: e.target.value })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="localhost"
               />
             </div>
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">Port</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">Port</label>
               <input
                 type="number"
                 value={playniteConfig.port || 19821}
                 onChange={(e) => setPlayniteConfig({ ...playniteConfig, port: parseInt(e.target.value) || 19821 })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="19821"
               />
             </div>
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">API Token</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">API Token</label>
               <input
                 type="password"
                 value={playniteConfig.apiToken}
                 onChange={(e) => setPlayniteConfig({ ...playniteConfig, apiToken: e.target.value })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="pb_your_token_here"
               />
             </div>
@@ -445,7 +445,7 @@ export default function ImporterView() {
 
       {/* Progress Section */}
       {progress.stage !== 'idle' && (
-        <div className="bg-white border border-zinc-200 rounded-xl p-6">
+        <div className="bg-card border border-border rounded-xl p-6">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
               {progress.stage === 'complete' ? (
@@ -458,12 +458,12 @@ export default function ImporterView() {
                 </div>
               ) : (
                 <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
-                  <Loader2 className="text-purple-600 animate-spin" size={20} />
+                  <Loader2 className="text-muted-foreground animate-spin" size={20} />
                 </div>
               )}
               <div>
-                <h3 className="font-bold text-zinc-900">{progress.message}</h3>
-                <p className="text-xs text-zinc-500 font-medium">
+                <h3 className="font-bold text-foreground">{progress.message}</h3>
+                <p className="text-xs text-muted-foreground font-medium">
                   {progress.stage === 'fetching' && 'Connecting to external service...'}
                   {progress.stage === 'importing' && `Processing items... ${getProgressPercentage()}%`}
                   {progress.stage === 'complete' && 'Import finished'}
@@ -476,7 +476,7 @@ export default function ImporterView() {
                 variant="outline"
                 size="sm"
                 onClick={resetImport}
-                className="gap-2 font-bold border-zinc-200"
+                className="gap-2 font-bold border-border"
               >
                 <RefreshCw size={16} />
                 Reset
@@ -487,7 +487,7 @@ export default function ImporterView() {
           {/* Progress Bar */}
           {progress.stage === 'fetching' || progress.stage === 'importing' ? (
             <div className="mb-6">
-              <div className="h-2 bg-zinc-100 rounded-full overflow-hidden">
+              <div className="h-2 bg-muted rounded-full overflow-hidden">
                 <div
                   className={cn(
                     "h-full transition-all duration-300 ease-out",
@@ -496,7 +496,7 @@ export default function ImporterView() {
                   style={{ width: `${getProgressPercentage()}%` }}
                 />
               </div>
-              <div className="flex justify-between mt-2 text-xs text-zinc-500 font-medium">
+              <div className="flex justify-between mt-2 text-xs text-muted-foreground font-medium">
                 <span>{progress.current} / {progress.total} items</span>
                 <span>{getProgressPercentage()}%</span>
               </div>
@@ -505,26 +505,26 @@ export default function ImporterView() {
 
           {/* Stats */}
           <div className="grid grid-cols-3 gap-4 mb-6">
-            <div className="bg-zinc-50 rounded-lg p-4">
+            <div className="bg-muted rounded-lg p-4">
               <div className="flex items-center gap-2 mb-2">
-                <Film size={16} className="text-zinc-400" />
-                <span className="text-xs font-bold text-zinc-500">{(progress as any).gamesImported !== undefined ? 'Games' : 'Videos'}</span>
+                <Film size={16} className="text-muted-foreground" />
+                <span className="text-xs font-bold text-muted-foreground">{(progress as any).gamesImported !== undefined ? 'Games' : 'Videos'}</span>
               </div>
-              <p className="text-2xl font-black text-zinc-900">{(progress as any).gamesImported !== undefined ? (progress as any).gamesImported : progress.videosImported}</p>
+              <p className="text-2xl font-black text-foreground">{(progress as any).gamesImported !== undefined ? (progress as any).gamesImported : progress.videosImported}</p>
             </div>
-            <div className="bg-zinc-50 rounded-lg p-4">
+            <div className="bg-muted rounded-lg p-4">
               <div className="flex items-center gap-2 mb-2">
-                <Users size={16} className="text-zinc-400" />
-                <span className="text-xs font-bold text-zinc-500">Actors</span>
+                <Users size={16} className="text-muted-foreground" />
+                <span className="text-xs font-bold text-muted-foreground">Actors</span>
               </div>
-              <p className="text-2xl font-black text-zinc-900">{progress.actorsImported}</p>
+              <p className="text-2xl font-black text-foreground">{progress.actorsImported}</p>
             </div>
-            <div className="bg-zinc-50 rounded-lg p-4">
+            <div className="bg-muted rounded-lg p-4">
               <div className="flex items-center gap-2 mb-2">
-                <AlertCircle size={16} className="text-zinc-400" />
-                <span className="text-xs font-bold text-zinc-500">Errors</span>
+                <AlertCircle size={16} className="text-muted-foreground" />
+                <span className="text-xs font-bold text-muted-foreground">Errors</span>
               </div>
-              <p className="text-2xl font-black text-zinc-900">{progress.errors.length}</p>
+              <p className="text-2xl font-black text-foreground">{progress.errors.length}</p>
             </div>
           </div>
 
diff --git a/src/components/MediaCard.tsx b/src/components/MediaCard.tsx
index 02db5be..8e807d7 100644
--- a/src/components/MediaCard.tsx
+++ b/src/components/MediaCard.tsx
@@ -52,7 +52,7 @@ export default function MediaCard({ media, onClick }: MediaCardProps) {
       transition={{ duration: 0.2 }}
     >
       <div className={cn(
-        "relative rounded-lg overflow-hidden shadow-lg bg-zinc-800 transition-all duration-300",
+        "relative rounded-lg overflow-hidden shadow-lg bg-card transition-all duration-300",
         aspectRatioClass
       )}>
         <img 
@@ -70,10 +70,10 @@ export default function MediaCard({ media, onClick }: MediaCardProps) {
         <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300" />
       </div>
       <div className="mt-3 space-y-1">
-        <h3 className="text-sm font-bold text-zinc-900 line-clamp-1 group-hover:text-[#6d28d9] transition-colors">
+        <h3 className="text-sm font-bold text-foreground line-clamp-1 group-hover:text-[#6d28d9] transition-colors">
           {media.title}
         </h3>
-        <p className="text-xs font-medium text-zinc-500">
+        <p className="text-xs font-medium text-muted-foreground">
           {media.year}
         </p>
       </div>
diff --git a/src/components/MediaListItem.tsx b/src/components/MediaListItem.tsx
index 7a0b1d7..7e4d9ce 100644
--- a/src/components/MediaListItem.tsx
+++ b/src/components/MediaListItem.tsx
@@ -44,11 +44,11 @@ export default function MediaListItem({ media, onClick }: MediaListItemProps) {
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -10 }}
-      className="group flex items-center gap-6 p-4 rounded-xl hover:bg-zinc-50 transition-colors cursor-pointer border border-transparent hover:border-zinc-200"
+      className="group flex items-center gap-6 p-4 rounded-xl hover:bg-muted/50 transition-colors cursor-pointer border border-transparent hover:border-border"
       onClick={() => onClick(media)}
     >
       <div className={cn(
-        "relative rounded-lg overflow-hidden shrink-0 shadow-md bg-zinc-800 transition-all duration-300",
+        "relative rounded-lg overflow-hidden shrink-0 shadow-md bg-card transition-all duration-300",
         aspectRatioClass
       )}>
         <img 
@@ -67,32 +67,32 @@ export default function MediaListItem({ media, onClick }: MediaListItemProps) {
 
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-3 mb-1">
-          <h3 className="text-lg font-black text-zinc-900 truncate group-hover:text-[#6d28d9] transition-colors">
+          <h3 className="text-lg font-black text-foreground truncate group-hover:text-[#6d28d9] transition-colors">
             {media.title}
           </h3>
-          <span className="text-sm font-bold text-zinc-400">({media.year})</span>
+          <span className="text-sm font-bold text-muted-foreground">({media.year})</span>
         </div>
         
         <div className="flex items-center gap-4 mb-3">
-          <div className="flex items-center gap-1 text-xs font-bold text-zinc-500">
+          <div className="flex items-center gap-1 text-xs font-bold text-muted-foreground">
             <Star size={14} className="text-yellow-500" fill="currentColor" />
             {media.rating || 'N/A'}
           </div>
-          <div className="text-xs font-bold text-zinc-400 uppercase tracking-wider">
+          <div className="text-xs font-bold text-muted-foreground uppercase tracking-wider">
             {media.genres?.slice(0, 3).join(' • ') || 'Anime'}
           </div>
         </div>
 
-        <p className="text-sm text-zinc-500 line-clamp-2 max-w-2xl">
+        <p className="text-sm text-muted-foreground line-clamp-2 max-w-2xl">
           {media.description || "No description available for this title."}
         </p>
       </div>
 
       <div className="hidden md:flex items-center gap-2">
-        <Button size="icon" variant="ghost" className="rounded-full text-zinc-400 hover:text-[#6d28d9] hover:bg-[#6d28d9]/10">
+        <Button size="icon" variant="ghost" className="rounded-full text-muted-foreground hover:text-[#6d28d9] hover:bg-[#6d28d9]/10">
           <Play size={18} fill="currentColor" />
         </Button>
-        <Button size="icon" variant="ghost" className="rounded-full text-zinc-400 hover:text-[#6d28d9] hover:bg-[#6d28d9]/10">
+        <Button size="icon" variant="ghost" className="rounded-full text-muted-foreground hover:text-[#6d28d9] hover:bg-[#6d28d9]/10">
           <Bookmark size={18} />
         </Button>
       </div>
diff --git a/src/components/SettingsView.tsx b/src/components/SettingsView.tsx
index 906ca56..119a508 100644
--- a/src/components/SettingsView.tsx
+++ b/src/components/SettingsView.tsx
@@ -5,6 +5,7 @@ import { Label } from '@/components/ui/label';
 import { Film, Music, Book, Tv, Gamepad2, ShieldAlert, LayoutGrid, List, Globe, Monitor, Sun, Moon, Save, ArrowLeft } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { fetchSettings, updateSettings } from '@/api';
+import { useTheme } from '@/contexts/ThemeContext';
 
 const CATEGORY_ICONS: Record<MediaCategory, React.ReactNode> = {
   Anime: <Tv size={18} />,
@@ -31,6 +32,7 @@ interface SettingsViewProps {
 }
 
 export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
+  const { setTheme } = useTheme();
   const [settings, setSettings] = useState<UserSettings>({
     enabledCategories: ['Anime', 'Movies', 'TV Series', 'Music', 'Books', 'Consoles', 'Games', 'Adult'],
     itemsPerPage: 20,
@@ -69,6 +71,8 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
       if (savedSettings) {
         setSettings(savedSettings);
         setSaveStatus('success');
+        // Sync theme with theme context
+        setTheme(savedSettings.theme);
         onSettingsSaved?.();
       } else {
         setSaveStatus('error');
@@ -93,26 +97,26 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
-        <div className="text-zinc-400 font-medium">Loading settings...</div>
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-muted-foreground font-medium">Loading settings...</div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-white pt-20">
+    <div className="min-h-screen bg-background pt-20">
       {/* Content */}
       <div className="max-w-[1600px] mx-auto px-6 py-12">
         <div className="flex items-center justify-between mb-8">
           <div>
             <Link
               to="/"
-              className="inline-flex items-center gap-2 text-sm font-bold text-zinc-400 hover:text-[#6d28d9] transition-colors mb-2"
+              className="inline-flex items-center gap-2 text-sm font-bold text-muted-foreground hover:text-[#6d28d9] transition-colors mb-2"
             >
               <ArrowLeft size={16} />
               Back to home
             </Link>
-            <h1 className="text-3xl font-black text-zinc-900">Settings</h1>
+            <h1 className="text-3xl font-black text-foreground">Settings</h1>
           </div>
           <button
             onClick={handleSave}
@@ -144,23 +148,23 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
         <div className="grid gap-8">
           {/* Library Settings */}
           <section>
-            <h2 className="text-xl font-black text-zinc-900 mb-6">Library Settings</h2>
-            <div className="bg-zinc-50 rounded-2xl p-6 border border-zinc-100">
-              <p className="text-sm font-medium text-zinc-500 mb-4">
+            <h2 className="text-xl font-black text-foreground mb-6">Library Settings</h2>
+            <div className="bg-muted/50 rounded-2xl p-6 border border-border">
+              <p className="text-sm font-medium text-muted-foreground mb-4">
                 Toggle which media areas you want to see in your library.
               </p>
               <div className="grid gap-4">
                 {(['Anime', 'Movies', 'Music', 'Books', 'Consoles', 'Games', 'Adult'] as MediaCategory[]).map((category) => (
-                  <div key={category} className="flex items-center justify-between p-4 rounded-xl bg-white border border-zinc-100 transition-all hover:border-[#6d28d9]/20">
+                  <div key={category} className="flex items-center justify-between p-4 rounded-xl bg-background border border-border transition-all hover:border-[#6d28d9]/20">
                     <div className="flex items-center gap-4">
-                      <div className="w-10 h-10 rounded-lg bg-zinc-50 flex items-center justify-center text-[#6d28d9]">
+                      <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-[#6d28d9]">
                         {CATEGORY_ICONS[category]}
                       </div>
                       <div>
-                        <Label htmlFor={category} className="text-sm font-black text-zinc-900 cursor-pointer">
+                        <Label htmlFor={category} className="text-sm font-black text-foreground cursor-pointer">
                           {category}
                         </Label>
-                        <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">
+                        <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
                           {settings.enabledCategories.includes(category) ? 'Enabled' : 'Disabled'}
                         </p>
                       </div>
@@ -178,11 +182,11 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
 
           {/* Display Settings */}
           <section>
-            <h2 className="text-xl font-black text-zinc-900 mb-6">Display Settings</h2>
-            <div className="bg-zinc-50 rounded-2xl p-6 border border-zinc-100 space-y-6">
+            <h2 className="text-xl font-black text-foreground mb-6">Display Settings</h2>
+            <div className="bg-muted/50 rounded-2xl p-6 border border-border space-y-6">
               {/* Items per page */}
               <div>
-                <Label className="text-sm font-black text-zinc-900 mb-2 block">Items per page</Label>
+                <Label className="text-sm font-black text-foreground mb-2 block">Items per page</Label>
                 <div className="flex gap-2 flex-wrap">
                   {ITEMS_PER_PAGE_OPTIONS.map((option) => (
                     <button
@@ -191,7 +195,7 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
                       className={`px-4 py-2 rounded-lg text-sm font-bold transition-all ${
                         settings.itemsPerPage === option
                           ? 'bg-[#6d28d9] text-white'
-                          : 'bg-white text-zinc-600 hover:bg-zinc-100 border border-zinc-200'
+                          : 'bg-background text-foreground hover:bg-muted border border-border'
                       }`}
                     >
                       {option}
@@ -202,14 +206,14 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
 
               {/* Default view */}
               <div>
-                <Label className="text-sm font-black text-zinc-900 mb-2 block">Default view</Label>
+                <Label className="text-sm font-black text-foreground mb-2 block">Default view</Label>
                 <div className="flex gap-2">
                   <button
                     onClick={() => setSettings(prev => ({ ...prev, defaultView: 'grid' }))}
                     className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-bold transition-all ${
                       settings.defaultView === 'grid'
                         ? 'bg-[#6d28d9] text-white'
-                        : 'bg-white text-zinc-600 hover:bg-zinc-100 border border-zinc-200'
+                        : 'bg-background text-foreground hover:bg-muted border border-border'
                     }`}
                   >
                     <LayoutGrid size={18} />
@@ -220,7 +224,7 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
                     className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-bold transition-all ${
                       settings.defaultView === 'list'
                         ? 'bg-[#6d28d9] text-white'
-                        : 'bg-white text-zinc-600 hover:bg-zinc-100 border border-zinc-200'
+                        : 'bg-background text-foreground hover:bg-muted border border-border'
                     }`}
                   >
                     <List size={18} />
@@ -231,7 +235,7 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
 
               {/* Theme */}
               <div>
-                <Label className="text-sm font-black text-zinc-900 mb-2 block">Theme</Label>
+                <Label className="text-sm font-black text-foreground mb-2 block">Theme</Label>
                 <div className="flex gap-2">
                   {(['light', 'dark', 'system'] as const).map((theme) => (
                     <button
@@ -240,7 +244,7 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
                       className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-bold transition-all ${
                         settings.theme === theme
                           ? 'bg-[#6d28d9] text-white'
-                          : 'bg-white text-zinc-600 hover:bg-zinc-100 border border-zinc-200'
+                          : 'bg-background text-foreground hover:bg-muted border border-border'
                       }`}
                     >
                       {theme === 'light' && <Sun size={18} />}
@@ -256,15 +260,15 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
 
           {/* Content Settings */}
           <section>
-            <h2 className="text-xl font-black text-zinc-900 mb-6">Content Settings</h2>
-            <div className="bg-zinc-50 rounded-2xl p-6 border border-zinc-100 space-y-4">
+            <h2 className="text-xl font-black text-foreground mb-6">Content Settings</h2>
+            <div className="bg-muted/50 rounded-2xl p-6 border border-border space-y-4">
               {/* Show adult content */}
-              <div className="flex items-center justify-between p-4 rounded-xl bg-white border border-zinc-100">
+              <div className="flex items-center justify-between p-4 rounded-xl bg-background border border-border">
                 <div>
-                  <Label htmlFor="showAdult" className="text-sm font-black text-zinc-900 cursor-pointer">
+                  <Label htmlFor="showAdult" className="text-sm font-black text-foreground cursor-pointer">
                     Show adult content
                   </Label>
-                  <p className="text-xs font-medium text-zinc-500 mt-1">
+                  <p className="text-xs font-medium text-muted-foreground mt-1">
                     Display adult media in your library
                   </p>
                 </div>
@@ -276,12 +280,12 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
               </div>
 
               {/* Auto-play trailers */}
-              <div className="flex items-center justify-between p-4 rounded-xl bg-white border border-zinc-100">
+              <div className="flex items-center justify-between p-4 rounded-xl bg-background border border-border">
                 <div>
-                  <Label htmlFor="autoPlay" className="text-sm font-black text-zinc-900 cursor-pointer">
+                  <Label htmlFor="autoPlay" className="text-sm font-black text-foreground cursor-pointer">
                     Auto-play trailers
                   </Label>
-                  <p className="text-xs font-medium text-zinc-500 mt-1">
+                  <p className="text-xs font-medium text-muted-foreground mt-1">
                     Automatically play trailers when viewing media
                   </p>
                 </div>
@@ -296,11 +300,11 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
 
           {/* Language Settings */}
           <section>
-            <h2 className="text-xl font-black text-zinc-900 mb-6">Language</h2>
-            <div className="bg-zinc-50 rounded-2xl p-6 border border-zinc-100">
+            <h2 className="text-xl font-black text-foreground mb-6">Language</h2>
+            <div className="bg-muted/50 rounded-2xl p-6 border border-border">
               <div className="flex items-center gap-2 mb-4">
                 <Globe size={18} className="text-[#6d28d9]" />
-                <Label className="text-sm font-black text-zinc-900">Interface language</Label>
+                <Label className="text-sm font-black text-foreground">Interface language</Label>
               </div>
               <div className="flex gap-2 flex-wrap">
                 {LANGUAGE_OPTIONS.map((option) => (
@@ -310,7 +314,7 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
                     className={`px-4 py-2 rounded-lg text-sm font-bold transition-all ${
                       settings.language === option.value
                         ? 'bg-[#6d28d9] text-white'
-                        : 'bg-white text-zinc-600 hover:bg-zinc-100 border border-zinc-200'
+                        : 'bg-background text-foreground hover:bg-muted border border-border'
                     }`}
                   >
                     {option.label}
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
new file mode 100644
index 0000000..ed48324
--- /dev/null
+++ b/src/contexts/ThemeContext.tsx
@@ -0,0 +1,74 @@
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  effectiveTheme: 'light' | 'dark';
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    const stored = localStorage.getItem('theme') as Theme;
+    return stored || 'system';
+  });
+  const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>('light');
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    
+    const applyTheme = () => {
+      let resolved: 'light' | 'dark';
+      
+      if (theme === 'system') {
+        resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      } else {
+        resolved = theme;
+      }
+      
+      setEffectiveTheme(resolved);
+      
+      if (resolved === 'dark') {
+        root.classList.add('dark');
+      } else {
+        root.classList.remove('dark');
+      }
+    };
+
+    applyTheme();
+
+    // Listen for system theme changes when in system mode
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => {
+      if (theme === 'system') {
+        applyTheme();
+      }
+    };
+    
+    mediaQuery.addEventListener('change', handleChange);
+    
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme]);
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+    localStorage.setItem('theme', newTheme);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, effectiveTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}