diff --git a/src/App.tsx b/src/App.tsx
index 8867031..385dbc8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -420,7 +420,7 @@ function AppContent() {
   }, [location.pathname, searchParams]);
 
   return (
-    <div className="min-h-screen bg-[#0a0c10] font-sans selection:bg-[#e8466c]/20 selection:text-[#e8466c] flex">
+    <div className="min-h-screen bg-background font-sans selection:bg-[#e8466c]/20 selection:text-[#e8466c] flex">
       <SidebarProvider defaultOpen={true}>
         <AppSidebar
           enabledCategories={enabledCategories}
@@ -432,7 +432,7 @@ function AppContent() {
         
       <main className="flex-1 flex flex-col relative">
         {/* Header with Search and Add Media */}
-        <header className="sticky top-0 z-30 bg-[#0a0c10]/80 backdrop-blur-xl border-b border-white/5 px-6 py-4">
+        <header className="sticky top-0 z-30 bg-background/80 backdrop-blur-xl border-b border-border px-6 py-4">
           <div className="flex items-center justify-between gap-4 max-w-[1920px] mx-auto">
             {/* Search Bar */}
             <div className="flex-1 max-w-xl">
@@ -443,25 +443,25 @@ function AppContent() {
                   placeholder="Search library..."
                   value={searchQuery}
                   onChange={(e) => handleSearch(e.target.value)}
-                  className="w-full pl-10 pr-4 py-2 bg-[#1a1d26] border-white/10 rounded-lg text-white placeholder:text-gray-500 focus:border-[#e8466c]/50 focus:ring-[#e8466c]/20"
+                  className="w-full pl-10 pr-4 py-2 bg-muted/30 border-border rounded-lg text-foreground placeholder:text-muted-foreground focus:border-[#e8466c]/50 focus:ring-[#e8466c]/20"
                 />
               </div>
             </div>
 
             {/* View Toggle and Add Button */}
             <div className="flex items-center gap-3">
-              <div className="flex items-center bg-[#1a1d26] rounded-lg p-1 border border-white/10">
+              <div className="flex items-center bg-muted/30 rounded-lg p-1 border border-border">
                 <Button 
                   variant="ghost" 
                   size="icon"
-                  className="h-8 w-8 rounded bg-white/10 text-white"
+                  className="h-8 w-8 rounded bg-accent text-accent-foreground"
                 >
                   <LayoutGrid className="w-4 h-4" />
                 </Button>
                 <Button 
                   variant="ghost" 
                   size="icon"
-                  className="h-8 w-8 rounded text-gray-400 hover:text-white hover:bg-white/5"
+                  className="h-8 w-8 rounded text-muted-foreground hover:text-foreground hover:bg-accent"
                 >
                   <List className="w-4 h-4" />
                 </Button>
@@ -478,85 +478,87 @@ function AppContent() {
           </div>
         </header>
 
-        <LayoutGroup>
-          <Routes>
-            <Route path="/" element={
-              <DashboardView 
-                mediaList={apiMedia.length > 0 ? apiMedia : [...MOCK_MEDIA, ...customMedia, DETAIL_MEDIA].filter(m => enabledCategories.includes(m.category))} 
-                onMediaClick={handleMediaClick}
-                loading={mediaLoading}
-              />
-            } />
-            <Route path="/browse" element={
-              <BrowseView 
-                mediaList={searchQuery.trim() ? searchResultsMedia : allMedia} 
-                onMediaClick={handleMediaClick} 
-                activeCategory={activeCategory}
-                itemsPerPage={settings?.itemsPerPage}
-                gridItemSize={settings?.gridItemSize}
-                onGridItemSizeChange={handleGridItemSizeChange}
-                loading={mediaLoading}
-                searchResultsCast={searchQuery.trim() ? searchResultsCast : []}
-                onCastClick={handlePersonClick}
-                searchQuery={searchQuery}
-              />
-            } />
-            <Route path="/:category" element={
-              <CategoryBrowseRoute
-                mediaList={filteredMedia}
-                onMediaClick={handleMediaClick}
-                itemsPerPage={settings?.itemsPerPage}
-                gridItemSize={settings?.gridItemSize}
-                onGridItemSizeChange={handleGridItemSizeChange}
-                loading={mediaLoading}
-              />
-            } />
-            <Route path="/media/:id" element={
-              <MediaDetailRoute 
-                allMedia={allMedia}
-                onPersonClick={handlePersonClick}
-              />
-            } />
-            <Route path="/cast" element={
-              <CastView 
-                onPersonClick={handlePersonClick}
-                enabledCategories={enabledCategories}
-                itemsPerPage={settings?.itemsPerPage}
-              />
-            } />
-            <Route path="/cast/:id" element={
-              <CastDetailRoute />
-            } />
-            <Route path="/add" element={
-              <AddMediaView
-                activeCategory={activeCategory}
-                enabledCategories={enabledCategories}
-                onAddComplete={handleAddMedia}
-              />
-            } />
-            <Route path="/import" element={
-              <ImporterView />
-            } />
-            <Route path="/settings" element={
-              <SettingsView onSettingsSaved={reloadSettings} />
-            } />
-          </Routes>
-        </LayoutGroup>
+        <div className="flex-1">
+          <LayoutGroup>
+            <Routes>
+              <Route path="/" element={
+                <DashboardView 
+                  mediaList={apiMedia.length > 0 ? apiMedia : [...MOCK_MEDIA, ...customMedia, DETAIL_MEDIA].filter(m => enabledCategories.includes(m.category))} 
+                  onMediaClick={handleMediaClick}
+                  loading={mediaLoading}
+                />
+              } />
+              <Route path="/browse" element={
+                <BrowseView 
+                  mediaList={searchQuery.trim() ? searchResultsMedia : allMedia} 
+                  onMediaClick={handleMediaClick} 
+                  activeCategory={activeCategory}
+                  itemsPerPage={settings?.itemsPerPage}
+                  gridItemSize={settings?.gridItemSize}
+                  onGridItemSizeChange={handleGridItemSizeChange}
+                  loading={mediaLoading}
+                  searchResultsCast={searchQuery.trim() ? searchResultsCast : []}
+                  onCastClick={handlePersonClick}
+                  searchQuery={searchQuery}
+                />
+              } />
+              <Route path="/:category" element={
+                <CategoryBrowseRoute
+                  mediaList={filteredMedia}
+                  onMediaClick={handleMediaClick}
+                  itemsPerPage={settings?.itemsPerPage}
+                  gridItemSize={settings?.gridItemSize}
+                  onGridItemSizeChange={handleGridItemSizeChange}
+                  loading={mediaLoading}
+                />
+              } />
+              <Route path="/media/:id" element={
+                <MediaDetailRoute 
+                  allMedia={allMedia}
+                  onPersonClick={handlePersonClick}
+                />
+              } />
+              <Route path="/cast" element={
+                <CastView 
+                  onPersonClick={handlePersonClick}
+                  enabledCategories={enabledCategories}
+                  itemsPerPage={settings?.itemsPerPage}
+                />
+              } />
+              <Route path="/cast/:id" element={
+                <CastDetailRoute />
+              } />
+              <Route path="/add" element={
+                <AddMediaView
+                  activeCategory={activeCategory}
+                  enabledCategories={enabledCategories}
+                  onAddComplete={handleAddMedia}
+                />
+              } />
+              <Route path="/import" element={
+                <ImporterView />
+              } />
+              <Route path="/settings" element={
+                <SettingsView onSettingsSaved={reloadSettings} />
+              } />
+            </Routes>
+          </LayoutGroup>
+        </div>
 
         {/* Footer */}
-        <footer className="fixed bottom-0 left-64 right-0 py-4 px-6 border-t border-white/5 bg-[#0a0c10] z-40">
+        <footer className="mt-auto py-3 px-6 border-t border-border bg-background">
           <div className="max-w-[1920px] mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
-            <div className="flex items-center gap-2 text-sm font-medium text-gray-500">
+            <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
               <span>{mediaCounts.all} total</span>
-              <span className="text-gray-700">•</span>
+              <span className="text-border-foreground">•</span>
               <span className="text-blue-400">{mediaCounts.movies} Movies</span>
               <span className="text-green-400">{mediaCounts.series} Series</span>
               <span className="text-purple-400">{mediaCounts.games} Games</span>
               <span className="text-red-400">{mediaCounts.adult} Adult</span>
-              <span className="text-gray-700">•</span>
+              <span className="text-border-foreground">•</span>
               <span className="text-[#e8466c]">{mediaCounts.favorites} Favorites</span>
             </div>
-            <p className="text-xs text-gray-600">
+            <p className="text-xs text-muted-foreground">
               © 2026 MediaVault v1.0.0
             </p>
           </div>
diff --git a/src/components/AddMediaView.tsx b/src/components/AddMediaView.tsx
index 9be471e..2d15417 100644
--- a/src/components/AddMediaView.tsx
+++ b/src/components/AddMediaView.tsx
@@ -207,7 +207,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
 
       <div className="bg-card/50 backdrop-blur-sm rounded-3xl shadow-xl p-8 border border-border/50 max-w-[1600px] mx-auto">
         <div className="flex items-center gap-4 mb-8">
-          <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#6d28d9] to-[#8b5cf6] flex items-center justify-center shadow-lg shadow-[#6d28d9]/30">
+          <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#e8466c] to-[#f47298] flex items-center justify-center shadow-lg shadow-[#e8466c]/30">
             {getCategoryIcon(activeCategory)}
           </div>
           <div>
@@ -234,7 +234,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
           {/* Basic Info Card */}
           <div className="bg-muted/30 backdrop-blur-sm rounded-2xl p-6 border border-border/50">
             <div className="flex items-center gap-3 mb-4">
-              <div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#6d28d9] shadow-sm">
+              <div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#e8466c] shadow-sm">
                 <FileText size={16} />
               </div>
               <h3 className="text-lg font-black text-foreground">Basic Information</h3>
@@ -247,7 +247,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                   value={newMedia.title}
                   onChange={e => setNewMedia(prev => ({ ...prev, title: e.target.value }))}
                   placeholder="e.g. Mob Psycho 100" 
-                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                   required
                 />
               </div>
@@ -259,7 +259,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                     value={newMedia.year}
                     onChange={e => setNewMedia(prev => ({ ...prev, year: e.target.value }))}
                     placeholder="2024" 
-                    className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                    className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                   />
                 </div>
                 <div className="grid gap-2">
@@ -268,7 +268,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                     id="category"
                     value={newMedia.category}
                     onChange={e => setNewMedia(prev => ({ ...prev, category: e.target.value as MediaCategory }))}
-                    className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9]/50 outline-none"
+                    className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#e8466c]/50 outline-none"
                   >
                     {enabledCategories.map(cat => (
                       <option key={cat} value={cat}>{cat}</option>
@@ -283,7 +283,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                     id="type"
                     value={newMedia.type}
                     onChange={e => setNewMedia(prev => ({ ...prev, type: e.target.value }))}
-                    className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9]/50 outline-none"
+                    className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#e8466c]/50 outline-none"
                   >
                     {newMedia.category === 'Music' ? (
                   <>
@@ -322,7 +322,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                     id="status"
                     value={newMedia.status}
                     onChange={e => setNewMedia(prev => ({ ...prev, status: e.target.value }))}
-                    className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9]/50 outline-none"
+                    className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#e8466c]/50 outline-none"
                   >
                     <option value="Released">Released</option>
                     <option value="Ongoing">Ongoing</option>
@@ -343,7 +343,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
           {/* Media Info Card */}
           <div className="bg-muted/30 backdrop-blur-sm rounded-2xl p-6 border border-border/50">
             <div className="flex items-center gap-3 mb-4">
-              <div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#6d28d9] shadow-sm">
+              <div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#e8466c] shadow-sm">
                 <Globe size={16} />
               </div>
               <h3 className="text-lg font-black text-foreground">Media Information</h3>
@@ -356,7 +356,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                   value={newMedia.poster}
                   onChange={e => setNewMedia(prev => ({ ...prev, poster: e.target.value }))}
                   placeholder="https://example.com/poster.jpg" 
-                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                   required
                 />
               </div>
@@ -367,7 +367,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                   value={newMedia.banner}
                   onChange={e => setNewMedia(prev => ({ ...prev, banner: e.target.value }))}
                   placeholder="https://example.com/banner.jpg" 
-                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                 />
               </div>
               <div className="grid grid-cols-2 gap-4">
@@ -377,7 +377,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                     id="aspectRatio"
                     value={newMedia.aspectRatio}
                     onChange={e => setNewMedia(prev => ({ ...prev, aspectRatio: e.target.value as '2/3' | '16/9' | '1/1' }))}
-                    className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9]/50 outline-none"
+                    className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#e8466c]/50 outline-none"
                   >
                     <option value="2/3">2:3 (Poster)</option>
                     <option value="16/9">16:9 (Banner)</option>
@@ -395,7 +395,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                     value={newMedia.rating}
                     onChange={e => setNewMedia(prev => ({ ...prev, rating: e.target.value }))}
                     placeholder="8.5" 
-                    className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                    className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                   />
                 </div>
               </div>
@@ -407,7 +407,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                   onChange={e => setNewMedia(prev => ({ ...prev, description: e.target.value }))}
                   placeholder="Enter a description..."
                   rows={4}
-                  className="bg-background border-border/50 rounded-xl p-3 text-sm focus:ring-2 focus:ring-[#6d28d9]/50 outline-none resize-none"
+                  className="bg-background border-border/50 rounded-xl p-3 text-sm focus:ring-2 focus:ring-[#e8466c]/50 outline-none resize-none"
                 />
               </div>
             </div>
@@ -416,7 +416,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
           {(newMedia.category === 'Anime' || newMedia.category === 'Movies' || newMedia.category === 'TV Series' || newMedia.category === 'Adult') && (
             <div className="bg-muted/30 backdrop-blur-sm rounded-2xl p-6 border border-border/50">
               <div className="flex items-center gap-3 mb-4">
-                <div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#6d28d9] shadow-sm">
+                <div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#e8466c] shadow-sm">
                   <Clock size={16} />
                 </div>
                 <h3 className="text-lg font-black text-foreground">Production Details</h3>
@@ -430,7 +430,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                     value={newMedia.runtime}
                     onChange={e => setNewMedia(prev => ({ ...prev, runtime: e.target.value }))}
                     placeholder="120" 
-                    className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                    className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                   />
                 </div>
                 <div className="grid gap-2">
@@ -440,7 +440,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                     type="date"
                     value={newMedia.releaseDate}
                     onChange={e => setNewMedia(prev => ({ ...prev, releaseDate: e.target.value }))}
-                    className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                    className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                   />
                 </div>
                 <div className="grid gap-2">
@@ -450,7 +450,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                     value={newMedia.director}
                     onChange={e => setNewMedia(prev => ({ ...prev, director: e.target.value }))}
                     placeholder="Director name" 
-                    className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                    className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                   />
                 </div>
                 <div className="grid gap-2">
@@ -460,7 +460,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                     value={newMedia.writer}
                     onChange={e => setNewMedia(prev => ({ ...prev, writer: e.target.value }))}
                     placeholder="Writer name" 
-                    className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                    className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                   />
                 </div>
               </div>
@@ -469,7 +469,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
           {/* Classification Card */}
           <div className="bg-muted/30 backdrop-blur-sm rounded-2xl p-6 border border-border/50">
             <div className="flex items-center gap-3 mb-4">
-              <div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#6d28d9] shadow-sm">
+              <div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#e8466c] shadow-sm">
                 <Tag size={16} />
               </div>
               <h3 className="text-lg font-black text-foreground">Classification</h3>
@@ -482,7 +482,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                   value={newMedia.genres}
                   onChange={e => setNewMedia(prev => ({ ...prev, genres: e.target.value }))}
                   placeholder="Action, Drama, Sci-Fi" 
-                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                 />
               </div>
               <div className="grid gap-2">
@@ -492,7 +492,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                   value={newMedia.tags}
                   onChange={e => setNewMedia(prev => ({ ...prev, tags: e.target.value }))}
                   placeholder="Classic, Best-selling" 
-                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                 />
               </div>
               <div className="grid gap-2">
@@ -502,7 +502,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                   value={newMedia.studios}
                   onChange={e => setNewMedia(prev => ({ ...prev, studios: e.target.value }))}
                   placeholder="Studio A, Studio B" 
-                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                 />
               </div>
               <div className="grid gap-2">
@@ -512,7 +512,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                   value={newMedia.source}
                   onChange={e => setNewMedia(prev => ({ ...prev, source: e.target.value }))}
                   placeholder="e.g. username, xbvr, stashapp" 
-                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
+                  className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
                 />
               </div>
             </div>
@@ -522,7 +522,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
           {(newMedia.category === 'Anime' || newMedia.category === 'Movies' || newMedia.category === 'TV Series' || newMedia.category === 'Adult') && (
             <div className="bg-muted/30 backdrop-blur-sm rounded-2xl p-6 border border-border/50 lg:col-span-2">
               <div className="flex items-center gap-3 mb-4">
-                <div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#6d28d9] shadow-sm">
+                <div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#e8466c] shadow-sm">
                   <Users size={16} />
                 </div>
                 <h3 className="text-lg font-black text-foreground">Cast & Crew</h3>
@@ -574,7 +574,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                     <Input 
                       id="staffName" 
                       placeholder="Actor name"
-                      className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#6d28d9]/50"
+                      className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#e8466c]/50"
                       onKeyDown={(e) => {
                         if (e.key === 'Enter') {
                           e.preventDefault();
@@ -593,7 +593,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                       <Input 
                         id="staffRole"
                         placeholder="e.g. Actor, Director"
-                        className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#6d28d9]/50"
+                        className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#e8466c]/50"
                         onKeyDown={(e) => {
                           if (e.key === 'Enter') {
                             e.preventDefault();
@@ -611,7 +611,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                       <Input 
                         id="staffCharacter"
                         placeholder="Character name"
-                        className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#6d28d9]/50"
+                        className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#e8466c]/50"
                       />
                     </div>
                   </div>
@@ -620,14 +620,14 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
                     <Input 
                       id="staffPhoto"
                       placeholder="https://example.com/photo.jpg"
-                      className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#6d28d9]/50"
+                      className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#e8466c]/50"
                     />
                   </div>
                   <Button
                     type="button"
                     onClick={addStaffMember}
                     variant="outline"
-                    className="w-full border-border/50 text-sm font-bold hover:border-[#6d28d9]/50 hover:bg-[#6d28d9]/10 rounded-xl transition-all duration-300"
+                    className="w-full border-border/50 text-sm font-bold hover:border-[#e8466c]/50 hover:bg-[#e8466c]/10 rounded-xl transition-all duration-300"
                   >
                     + Add Cast Member
                   </Button>
@@ -640,7 +640,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
             <Button 
               type="submit" 
               disabled={isSubmitting}
-              className="w-full bg-gradient-to-br from-[#6d28d9] to-[#8b5cf6] hover:from-[#5b21b6] hover:to-[#7c3aed] text-white font-black h-12 rounded-xl shadow-lg shadow-[#6d28d9]/30 transition-all duration-300 hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
+              className="w-full bg-gradient-to-br from-[#e8466c] to-[#f47298] hover:from-[#d13d60] hover:to-[#c5304e] text-white font-black h-12 rounded-xl shadow-lg shadow-[#e8466c]/30 transition-all duration-300 hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
             >
               {isSubmitting ? 'SAVING...' : 'SAVE TO LIBRARY'}
             </Button>
diff --git a/src/components/CastDetailView.tsx b/src/components/CastDetailView.tsx
index a95458f..0f97bdf 100644
--- a/src/components/CastDetailView.tsx
+++ b/src/components/CastDetailView.tsx
@@ -96,12 +96,12 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                 </h1>
                 <div className="flex flex-wrap justify-center md:justify-start gap-2">
                   {person.occupations?.map(occ => (
-                    <Badge key={occ} variant="secondary" className="bg-[#6d28d9]/10 text-[#6d28d9] border-[#6d28d9]/20 font-medium px-3 py-1 text-xs">
+                    <Badge key={occ} variant="secondary" className="bg-[#e8466c]/10 text-[#e8466c] border-[#e8466c]/20 font-medium px-3 py-1 text-xs">
                       {occ}
                     </Badge>
                   ))}
                   {person.filmography && person.filmography.length > 0 && (
-                    <Badge variant="outline" className="border-[#6d28d9]/30 text-[#6d28d9] font-medium px-3 py-1 text-xs">
+                    <Badge variant="outline" className="border-[#e8466c]/30 text-[#e8466c] font-medium px-3 py-1 text-xs">
                       <Star className="w-3 h-3 mr-1" />
                       {person.filmography.length}
                     </Badge>
@@ -130,8 +130,8 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
           <Card className="border-border/60 overflow-hidden">
             <CardHeader className="py-3 px-4 border-b border-border/40">
               <CardTitle className="text-xs font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-2">
-                <div className="w-5 h-5 rounded bg-[#6d28d9]/10 flex items-center justify-center">
-                  <User size={12} className="text-[#6d28d9]" />
+                <div className="w-5 h-5 rounded bg-[#e8466c]/10 flex items-center justify-center">
+                  <User size={12} className="text-[#e8466c]" />
                 </div>
                 Personal Info
               </CardTitle>
@@ -140,7 +140,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
               {/* Birth Date */}
               <div className="flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors">
                 <div className="flex items-center gap-2.5">
-                  <div className="w-7 h-7 rounded-md bg-[#6d28d9]/10 flex items-center justify-center text-[#6d28d9]">
+                  <div className="w-7 h-7 rounded-md bg-[#e8466c]/10 flex items-center justify-center text-[#e8466c]">
                     <Calendar size={14} />
                   </div>
                   <span className="text-xs text-muted-foreground">Born</span>
@@ -152,7 +152,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
               {/* Birth Place */}
               <div className="flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors">
                 <div className="flex items-center gap-2.5">
-                  <div className="w-7 h-7 rounded-md bg-[#6d28d9]/10 flex items-center justify-center text-[#6d28d9]">
+                  <div className="w-7 h-7 rounded-md bg-[#e8466c]/10 flex items-center justify-center text-[#e8466c]">
                     <MapPin size={14} />
                   </div>
                   <span className="text-xs text-muted-foreground">Origin</span>
@@ -166,12 +166,12 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
               {/* Known For */}
               <div className="flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors">
                 <div className="flex items-center gap-2.5">
-                  <div className="w-7 h-7 rounded-md bg-[#6d28d9]/10 flex items-center justify-center text-[#6d28d9]">
+                  <div className="w-7 h-7 rounded-md bg-[#e8466c]/10 flex items-center justify-center text-[#e8466c]">
                     <Briefcase size={14} />
                   </div>
                   <span className="text-xs text-muted-foreground">Role</span>
                 </div>
-                <Badge variant="secondary" className="text-xs font-normal bg-[#6d28d9]/10 text-[#6d28d9] border-none">
+                <Badge variant="secondary" className="text-xs font-normal bg-[#e8466c]/10 text-[#e8466c] border-none">
                   {person.role}
                 </Badge>
               </div>
@@ -182,7 +182,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                   <Separator />
                   <div className="flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors">
                     <div className="flex items-center gap-2.5">
-                      <div className="w-7 h-7 rounded-md bg-[#6d28d9]/10 flex items-center justify-center text-[#6d28d9]">
+                      <div className="w-7 h-7 rounded-md bg-[#e8466c]/10 flex items-center justify-center text-[#e8466c]">
                         <User size={14} />
                       </div>
                       <span className="text-xs text-muted-foreground">Ethnicity</span>
@@ -202,8 +202,8 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
             <Card className="border-border/60 overflow-hidden">
               <CardHeader className="py-3 px-4 border-b border-border/40">
                 <CardTitle className="text-xs font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-2">
-                  <div className="w-5 h-5 rounded bg-[#6d28d9]/10 flex items-center justify-center">
-                    <Ruler size={12} className="text-[#6d28d9]" />
+                  <div className="w-5 h-5 rounded bg-[#e8466c]/10 flex items-center justify-center">
+                    <Ruler size={12} className="text-[#e8466c]" />
                   </div>
                   Measurements
                 </CardTitle>
@@ -262,7 +262,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                   {(person.hair_color || person.adult_specifics?.hair_color) && (
                     <div className="px-4 py-3 hover:bg-muted/30 transition-colors">
                       <div className="flex items-center gap-2 mb-1">
-                        <Palette size={12} className="text-[#6d28d9]" />
+                        <Palette size={12} className="text-[#e8466c]" />
                         <span className="text-[10px] text-muted-foreground uppercase tracking-wide">Hair</span>
                       </div>
                       <p className="text-sm font-medium truncate">
@@ -273,7 +273,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                   {(person.eye_color || person.adult_specifics?.eye_color) && (
                     <div className="px-4 py-3 hover:bg-muted/30 transition-colors">
                       <div className="flex items-center gap-2 mb-1">
-                        <Eye size={12} className="text-[#6d28d9]" />
+                        <Eye size={12} className="text-[#e8466c]" />
                         <span className="text-[10px] text-muted-foreground uppercase tracking-wide">Eyes</span>
                       </div>
                       <p className="text-sm font-medium truncate">
@@ -360,7 +360,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                           transition={{ delay: index * 0.03 }}
                         >
                           <Card
-                            className="hover:border-[#6d28d9]/30 hover:shadow-md transition-all duration-200 cursor-pointer group border-border/60"
+                            className="hover:border-[#e8466c]/30 hover:shadow-md transition-all duration-200 cursor-pointer group border-border/60"
                             onClick={() => handleMediaClick(item.id.toString())}
                           >
                             <CardContent className="p-3 flex items-center gap-3">
@@ -374,10 +374,10 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                               </div>
                               <div className="min-w-0 flex-1">
                                 <p className="text-[10px] text-muted-foreground uppercase tracking-wide">Character</p>
-                                <h4 className="font-semibold text-foreground truncate text-sm group-hover:text-[#6d28d9] transition-colors">
+                                <h4 className="font-semibold text-foreground truncate text-sm group-hover:text-[#e8466c] transition-colors">
                                   {item.characterName || item.role}
                                 </h4>
-                                <p className="text-xs text-[#6d28d9] truncate">{item.title}</p>
+                                <p className="text-xs text-[#e8466c] truncate">{item.title}</p>
                               </div>
                             </CardContent>
                           </Card>
@@ -429,7 +429,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                                 {option.label}
                               </span>
                               {sortBy === option.value && (
-                                sortOrder === 'asc' ? <ArrowUpAZ size={14} className="text-[#6d28d9]" /> : <ArrowDownAZ size={14} className="text-[#6d28d9]" />
+                                sortOrder === 'asc' ? <ArrowUpAZ size={14} className="text-[#e8466c]" /> : <ArrowDownAZ size={14} className="text-[#e8466c]" />
                               )}
                             </DropdownMenuItem>
                           ))}
@@ -450,7 +450,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                         >
                           <Card
                             onClick={() => handleMediaClick(item.id.toString())}
-                            className="group cursor-pointer hover:border-[#6d28d9]/30 hover:shadow-md transition-all duration-200 border-border/60"
+                            className="group cursor-pointer hover:border-[#e8466c]/30 hover:shadow-md transition-all duration-200 border-border/60"
                           >
                             <CardContent className="p-3 flex items-center gap-3">
                               <div className="w-12 h-16 rounded-none overflow-hidden shrink-0 bg-muted border border-border/40">
@@ -462,7 +462,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                                 />
                               </div>
                               <div className="min-w-0 flex-1">
-                                <h4 className="font-semibold text-foreground truncate text-sm group-hover:text-[#6d28d9] transition-colors">
+                                <h4 className="font-semibold text-foreground truncate text-sm group-hover:text-[#e8466c] transition-colors">
                                   {item.title}
                                 </h4>
                                 <p className="text-xs text-muted-foreground mb-1">
diff --git a/src/components/CastView.tsx b/src/components/CastView.tsx
index 03a3311..41aa8f2 100644
--- a/src/components/CastView.tsx
+++ b/src/components/CastView.tsx
@@ -305,7 +305,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                 placeholder="Search cast..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-9 h-9 bg-muted/50 border-none rounded-lg text-sm focus-visible:ring-[#6d28d9]/30"
+                className="pl-9 h-9 bg-muted/50 border-none rounded-lg text-sm focus-visible:ring-[#e8466c]/30"
               />
             </div>
 
@@ -346,7 +346,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                   className={cn(
                     "h-8 px-3 rounded-lg border text-xs font-medium transition-colors",
                     (sortBy !== 'roleCount' || sortOrder !== 'desc')
-                      ? "border-[#6d28d9]/30 bg-[#6d28d9]/10 text-[#6d28d9] hover:bg-[#6d28d9]/20"
+                      ? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
                       : "border-border/60 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"
                   )}
                 >
@@ -378,7 +378,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                       {option.label}
                     </span>
                     {sortBy === option.value && (
-                      sortOrder === 'asc' ? <ArrowUpAZ size={14} className="text-[#6d28d9]" /> : <ArrowDownAZ size={14} className="text-[#6d28d9]" />
+                      sortOrder === 'asc' ? <ArrowUpAZ size={14} className="text-[#e8466c]" /> : <ArrowDownAZ size={14} className="text-[#e8466c]" />
                     )}
                   </DropdownMenuItem>
                 ))}
@@ -395,7 +395,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                     className={cn(
                       "h-8 px-3 rounded-lg border text-xs font-medium transition-colors",
                       filterOccupation && filterOccupation !== 'all'
-                        ? "border-[#6d28d9]/30 bg-[#6d28d9]/10 text-[#6d28d9] hover:bg-[#6d28d9]/20"
+                        ? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
                         : "border-border/60 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"
                     )}
                   >
@@ -430,7 +430,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                     className={cn(
                       "h-8 px-3 rounded-lg border text-xs font-medium transition-colors",
                       filterMediaType && filterMediaType !== 'all'
-                        ? "border-[#6d28d9]/30 bg-[#6d28d9]/10 text-[#6d28d9] hover:bg-[#6d28d9]/20"
+                        ? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
                         : "border-border/60 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"
                     )}
                   >
@@ -475,7 +475,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
               {searchQuery && (
                 <Badge
                   variant="secondary"
-                  className="h-6 px-2 text-xs bg-[#6d28d9]/10 text-[#6d28d9] border-[#6d28d9]/20 hover:bg-[#6d28d9]/20 cursor-pointer"
+                  className="h-6 px-2 text-xs bg-[#e8466c]/10 text-[#e8466c] border-[#e8466c]/20 hover:bg-[#e8466c]/20 cursor-pointer"
                   onClick={() => setSearchQuery('')}
                 >
                   Search: {searchQuery}
@@ -485,7 +485,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
               {filterOccupation && filterOccupation !== 'all' && (
                 <Badge
                   variant="secondary"
-                  className="h-6 px-2 text-xs bg-[#6d28d9]/10 text-[#6d28d9] border-[#6d28d9]/20 hover:bg-[#6d28d9]/20 cursor-pointer"
+                  className="h-6 px-2 text-xs bg-[#e8466c]/10 text-[#e8466c] border-[#e8466c]/20 hover:bg-[#e8466c]/20 cursor-pointer"
                   onClick={() => setFilterOccupation('all')}
                 >
                   {filterOccupation}
@@ -495,7 +495,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
               {filterMediaType && filterMediaType !== 'all' && (
                 <Badge
                   variant="secondary"
-                  className="h-6 px-2 text-xs bg-[#6d28d9]/10 text-[#6d28d9] border-[#6d28d9]/20 hover:bg-[#6d28d9]/20 cursor-pointer"
+                  className="h-6 px-2 text-xs bg-[#e8466c]/10 text-[#e8466c] border-[#e8466c]/20 hover:bg-[#e8466c]/20 cursor-pointer"
                   onClick={() => setFilterMediaType('all')}
                 >
                   {filterMediaType}
@@ -545,20 +545,20 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                   transition={{ duration: 0.2 }}
                 >
                   <Card
-                    className="group cursor-pointer overflow-hidden hover:shadow-xl hover:border-[#6d28d9]/30 transition-all duration-300 border-border/60"
+                    className="group cursor-pointer overflow-hidden hover:shadow-xl hover:border-[#e8466c]/30 transition-all duration-300 border-border/60"
                     onClick={() => onPersonClick(person)}
                   >
                     {/* Card Header with Avatar and Info */}
                     <div className="p-3">
                       <div className="flex items-start gap-3">
-                        <Avatar className="h-12 w-12 rounded-lg border-2 border-border/50 group-hover:border-[#6d28d9] transition-colors duration-300 shadow-sm">
+                        <Avatar className="h-12 w-12 rounded-lg border-2 border-border/50 group-hover:border-[#e8466c] transition-colors duration-300 shadow-sm">
                           <AvatarImage src={person.photo} alt={person.name} referrerPolicy="no-referrer" className="object-cover" />
                           <AvatarFallback className="rounded-lg bg-muted">
                             <User className="h-5 w-5 text-muted-foreground" />
                           </AvatarFallback>
                         </Avatar>
                         <div className="min-w-0 flex-1">
-                          <h3 className="font-semibold text-foreground truncate group-hover:text-[#6d28d9] transition-colors duration-300 text-sm leading-tight">
+                          <h3 className="font-semibold text-foreground truncate group-hover:text-[#e8466c] transition-colors duration-300 text-sm leading-tight">
                             {person.name}
                           </h3>
                           <p className="text-[11px] text-muted-foreground mt-0.5 truncate">
@@ -592,7 +592,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                     {/* Latest Role Section */}
                     {person.filmography && person.filmography.length > 0 && (
                       <div className="px-3 pb-3">
-                        <div className="bg-muted/50 rounded-lg p-2 flex items-center gap-2 border border-border/40 group-hover:border-[#6d28d9]/20 transition-colors">
+                        <div className="bg-muted/50 rounded-lg p-2 flex items-center gap-2 border border-border/40 group-hover:border-[#e8466c]/20 transition-colors">
                           <div className="w-8 h-11 rounded overflow-hidden shrink-0 bg-background border border-border/40">
                             <img
                               src={person.filmography[0].poster || person.photo}
@@ -604,7 +604,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                           <div className="min-w-0 flex-1">
                             <p className="text-[10px] text-muted-foreground uppercase tracking-wide leading-none">Latest</p>
                             <p className="text-[11px] font-medium text-foreground truncate">{person.filmography[0].title}</p>
-                            <p className="text-[10px] text-[#6d28d9] truncate">{person.filmography[0].role}</p>
+                            <p className="text-[10px] text-[#e8466c] truncate">{person.filmography[0].role}</p>
                           </div>
                         </div>
                       </div>
@@ -621,7 +621,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
               <TableRow className="hover:bg-transparent border-border/60 bg-muted/30">
                 <TableHead className="w-14 rounded-tl-lg"></TableHead>
                 <TableHead
-                  className="cursor-pointer hover:text-[#6d28d9] transition-colors"
+                  className="cursor-pointer hover:text-[#e8466c] transition-colors"
                   onClick={() => handleSort('name')}
                 >
                   <div className="flex items-center gap-1">
@@ -630,7 +630,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                   </div>
                 </TableHead>
                 <TableHead
-                  className="cursor-pointer hover:text-[#6d28d9] transition-colors"
+                  className="cursor-pointer hover:text-[#e8466c] transition-colors"
                   onClick={() => handleSort('role')}
                 >
                   <div className="flex items-center gap-1">
@@ -640,7 +640,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                 </TableHead>
                 <TableHead className="hidden md:table-cell">Latest Work</TableHead>
                 <TableHead
-                  className="hidden sm:table-cell cursor-pointer hover:text-[#6d28d9] transition-colors text-right"
+                  className="hidden sm:table-cell cursor-pointer hover:text-[#e8466c] transition-colors text-right"
                   onClick={() => handleSort('roleCount')}
                 >
                   <div className="flex items-center justify-end gap-1">
@@ -678,7 +678,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                     </TableCell>
                     <TableCell className="font-medium">
                       <div className="flex flex-col">
-                        <span className="group-hover:text-[#6d28d9] transition-colors">{person.name}</span>
+                        <span className="group-hover:text-[#e8466c] transition-colors">{person.name}</span>
                         {person.birthDate && (
                           <span className="text-xs text-muted-foreground">
                             {new Date(person.birthDate).toLocaleDateString()}
diff --git a/src/components/DashboardView.tsx b/src/components/DashboardView.tsx
index 74eb4f2..0c7f14a 100644
--- a/src/components/DashboardView.tsx
+++ b/src/components/DashboardView.tsx
@@ -133,11 +133,11 @@ export default function DashboardView({ mediaList, onMediaClick, loading = false
           <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#e8466c] to-[#f47298] flex items-center justify-center">
             <Sparkles className="w-4 h-4 text-white" />
           </div>
-          <h1 className="text-2xl font-bold text-white">
+          <h1 className="text-2xl font-bold text-foreground">
             Welcome to MediaVault
           </h1>
         </div>
-        <p className="text-gray-400 text-sm ml-11">Your media library at a glance</p>
+        <p className="text-muted-foreground text-sm ml-11">Your media library at a glance</p>
       </motion.div>
 
       {/* Stats Cards */}
@@ -156,12 +156,12 @@ export default function DashboardView({ mediaList, onMediaClick, loading = false
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.1 + index * 0.05 }}
               onClick={() => navigate(card.path)}
-              className={`relative overflow-hidden rounded-xl p-5 bg-gradient-to-br ${card.color} border border-white/5 hover:border-white/10 transition-all duration-300 cursor-pointer group`}
+              className={`relative overflow-hidden rounded-xl p-5 bg-gradient-to-br ${card.color} border border-border/50 hover:border-border/80 transition-all duration-300 cursor-pointer group`}
             >
               <div className="flex items-start justify-between">
                 <div>
-                  <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">{card.label}</p>
-                  <p className="text-3xl font-bold text-white">{card.count}</p>
+                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1">{card.label}</p>
+                  <p className="text-3xl font-bold text-foreground">{card.count}</p>
                 </div>
                 <div className={`w-10 h-10 rounded-lg ${card.iconBg} flex items-center justify-center`}>
                   <Icon className="w-5 h-5 text-white" />
@@ -191,10 +191,10 @@ export default function DashboardView({ mediaList, onMediaClick, loading = false
                 </div>
                 <div>
                   <p className="text-xs font-semibold text-[#e8466c] uppercase tracking-wider">FAVORITES</p>
-                  <p className="text-2xl font-bold text-white">{favoritesMedia.length} <span className="text-sm font-normal text-gray-400">items in your favorites</span></p>
+                  <p className="text-2xl font-bold text-foreground">{favoritesMedia.length} <span className="text-sm font-normal text-muted-foreground">items in your favorites</span></p>
                 </div>
               </div>
-              <div className="flex items-center gap-2 text-gray-400 group-hover:text-white transition-colors">
+              <div className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
                 <span className="text-sm font-medium">View Favorites</span>
                 <ChevronRight className="w-5 h-5" />
               </div>
@@ -214,11 +214,11 @@ export default function DashboardView({ mediaList, onMediaClick, loading = false
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
               <Clock className="w-5 h-5 text-[#e8466c]" />
-              <h2 className="text-sm font-bold text-white uppercase tracking-wider">Recently Added</h2>
+              <h2 className="text-sm font-bold text-foreground uppercase tracking-wider">Recently Added</h2>
             </div>
             <button 
               onClick={() => navigate('/browse?sort=recent')}
-              className="flex items-center gap-1 text-sm text-gray-400 hover:text-white transition-colors"
+              className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
             >
               View All <ChevronRight className="w-4 h-4" />
             </button>
@@ -240,11 +240,11 @@ export default function DashboardView({ mediaList, onMediaClick, loading = false
 
       {/* Empty State */}
       {mediaList.length === 0 && (
-        <div className="flex flex-col items-center justify-center py-32 text-gray-400">
-          <div className="w-20 h-20 bg-white/5 rounded-2xl flex items-center justify-center mb-6 border border-white/10">
+        <div className="flex flex-col items-center justify-center py-32 text-muted-foreground">
+          <div className="w-20 h-20 bg-muted rounded-2xl flex items-center justify-center mb-6 border border-border">
             <Database className="w-10 h-10" />
           </div>
-          <p className="text-xl font-bold text-white">No media found</p>
+          <p className="text-xl font-bold text-foreground">No media found</p>
           <p className="text-sm">Start by adding media to your collection</p>
         </div>
       )}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 00667ef..41ab4fb 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -72,7 +72,7 @@ export default function Header({
           ? "bg-transparent"
           : transparent && scrolled
             ? "backdrop-blur-xl bg-background/70 border-b border-border/30"
-            : "backdrop-blur-xl bg-gradient-to-r from-[#6d28d9]/90 via-[#8b5cf6]/90 to-[#6d28d9]/90 border-b border-white/10"
+            : "backdrop-blur-xl bg-gradient-to-r from-[#e8466c]/90 via-[#f47298]/90 to-[#e8466c]/90 border-b border-white/10"
       )}
     >
       <div className="flex items-center gap-8">
@@ -87,7 +87,7 @@ export default function Header({
             "w-8 h-8 rounded-xl flex items-center justify-center shadow-lg transition-all duration-300",
             (transparent && !scrolled) || !transparent 
               ? "bg-white/20 backdrop-blur-sm border border-white/30" 
-              : "bg-gradient-to-br from-[#6d28d9] to-[#8b5cf6] shadow-[#6d28d9]/30"
+              : "bg-gradient-to-br from-[#e8466c] to-[#f47298] shadow-[#e8466c]/30"
           )}>
             <div className={cn(
               "w-4 h-4 rounded-full",
@@ -121,7 +121,7 @@ export default function Header({
                     ? "text-white bg-white/10" 
                     : "text-white/70 hover:text-white hover:bg-white/5"
                   : isActive 
-                    ? "text-foreground bg-[#6d28d9]/10" 
+                    ? "text-foreground bg-[#e8466c]/10" 
                     : "text-muted-foreground hover:text-foreground hover:bg-muted"
               )}
             >
@@ -138,7 +138,7 @@ export default function Header({
               "text-sm font-bold transition-all duration-300 uppercase tracking-wider px-4 py-2 rounded-lg",
               (transparent && !scrolled) || !transparent
                 ? isActive ? "text-white bg-white/10" : "text-white/70 hover:text-white hover:bg-white/5"
-                : isActive ? "text-foreground bg-[#6d28d9]/10" : "text-muted-foreground hover:text-foreground hover:bg-muted"
+                : isActive ? "text-foreground bg-[#e8466c]/10" : "text-muted-foreground hover:text-foreground hover:bg-muted"
             )}
           >
             CAST
@@ -215,7 +215,7 @@ export default function Header({
           "w-9 h-9 rounded-xl overflow-hidden border-2 transition-all duration-300 hover:scale-110 hover:shadow-lg",
           (transparent && !scrolled) || !transparent 
             ? "border-white/30 hover:border-white/50" 
-            : "border-border hover:border-[#6d28d9]/50"
+            : "border-border hover:border-[#e8466c]/50"
         )}>
           <img
             src="https://picsum.photos/seed/user/100/100"
@@ -237,7 +237,7 @@ export default function Header({
                 onClick={() => setIsMobileMenuOpen(false)}
                 className={({ isActive }) => cn(
                   "text-sm font-bold transition-colors uppercase tracking-wider py-2 px-4 rounded-lg",
-                  isActive ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground hover:text-foreground hover:bg-muted"
+                  isActive ? "text-[#e8466c] bg-[#e8466c]/10" : "text-muted-foreground hover:text-foreground hover:bg-muted"
                 )}
               >
                 {cat}
@@ -249,7 +249,7 @@ export default function Header({
               onClick={() => setIsMobileMenuOpen(false)}
               className={({ isActive }) => cn(
                 "text-sm font-bold transition-colors uppercase tracking-wider py-2 px-4 rounded-lg",
-                isActive ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground hover:text-foreground hover:bg-muted"
+                isActive ? "text-[#e8466c] bg-[#e8466c]/10" : "text-muted-foreground hover:text-foreground hover:bg-muted"
               )}
             >
               CAST
diff --git a/src/components/ImporterView.tsx b/src/components/ImporterView.tsx
index 0a5d23a..f14e155 100644
--- a/src/components/ImporterView.tsx
+++ b/src/components/ImporterView.tsx
@@ -418,7 +418,7 @@ export default function ImporterView() {
             <Button
               onClick={handleXBVRImport}
               disabled={progress.stage !== 'idle' || !xbvrConfig.url}
-              className="w-full bg-[#6d28d9] hover:bg-[#5b21b6] text-white font-bold"
+              className="w-full bg-[#6d28d9] hover:bg-[#d13d60] text-white font-bold"
             >
               {progress.stage === 'fetching' || progress.stage === 'importing' ? (
                 <>
@@ -1010,7 +1010,7 @@ export default function ImporterView() {
                 <div
                   className={cn(
                     "h-full transition-all duration-300 ease-out",
-                    progress.stage === 'error' ? "bg-gradient-to-r from-red-500 to-red-600" : "bg-gradient-to-r from-[#6d28d9] to-[#8b5cf6]"
+                    progress.stage === 'error' ? "bg-gradient-to-r from-red-500 to-red-600" : "bg-gradient-to-r from-[#6d28d9] to-[#f47298]"
                   )}
                   style={{ width: `${getProgressPercentage()}%` }}
                 />
diff --git a/src/components/LibrarySettings.tsx b/src/components/LibrarySettings.tsx
index b1834e6..b0c4a2c 100644
--- a/src/components/LibrarySettings.tsx
+++ b/src/components/LibrarySettings.tsx
@@ -48,9 +48,9 @@ export default function LibrarySettings({ enabledCategories, onToggleCategory }:
         </DialogHeader>
         <div className="grid gap-6 py-6">
           {categories.map((category) => (
-            <div key={category} className="flex items-center justify-between p-4 rounded-2xl bg-muted/30 border border-border/50 transition-all hover:border-[#6d28d9]/30 hover:bg-muted/50">
+            <div key={category} className="flex items-center justify-between p-4 rounded-2xl bg-muted/30 border border-border/50 transition-all hover:border-[#e8466c]/30 hover:bg-muted/50">
               <div className="flex items-center gap-4">
-                <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border/30">
+                <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#e8466c] shadow-sm border border-border/30">
                   {CATEGORY_ICONS[category]}
                 </div>
                 <div>
diff --git a/src/components/MediaListItem.tsx b/src/components/MediaListItem.tsx
index cd6a983..67ea3e0 100644
--- a/src/components/MediaListItem.tsx
+++ b/src/components/MediaListItem.tsx
@@ -13,14 +13,14 @@ interface MediaListItemProps {
 }
 
 const categoryConfig: Record<MediaCategory, { label: string; color: string; bgColor: string; icon: any }> = {
-  'Anime': { label: 'ANIME', color: 'text-purple-300', bgColor: 'bg-purple-500/30', icon: null },
-  'Movies': { label: 'MOVIE', color: 'text-blue-300', bgColor: 'bg-blue-500/30', icon: Film },
-  'TV Series': { label: 'SERIES', color: 'text-green-300', bgColor: 'bg-green-500/30', icon: Tv },
-  'Music': { label: 'MUSIC', color: 'text-pink-300', bgColor: 'bg-pink-500/30', icon: null },
-  'Books': { label: 'BOOK', color: 'text-yellow-300', bgColor: 'bg-yellow-500/30', icon: null },
-  'Games': { label: 'GAME', color: 'text-indigo-300', bgColor: 'bg-indigo-500/30', icon: Gamepad2 },
-  'Consoles': { label: 'CONSOLE', color: 'text-orange-300', bgColor: 'bg-orange-500/30', icon: null },
-  'Adult': { label: 'ADULT', color: 'text-rose-300', bgColor: 'bg-rose-500/30', icon: Eye },
+  'Anime': { label: 'ANIME', color: 'text-purple-400', bgColor: 'bg-purple-500/20', icon: null },
+  'Movies': { label: 'MOVIE', color: 'text-blue-400', bgColor: 'bg-blue-500/20', icon: Film },
+  'TV Series': { label: 'SERIES', color: 'text-green-400', bgColor: 'bg-green-500/20', icon: Tv },
+  'Music': { label: 'MUSIC', color: 'text-pink-400', bgColor: 'bg-pink-500/20', icon: null },
+  'Books': { label: 'BOOK', color: 'text-yellow-400', bgColor: 'bg-yellow-500/20', icon: null },
+  'Games': { label: 'GAME', color: 'text-indigo-400', bgColor: 'bg-indigo-500/20', icon: Gamepad2 },
+  'Consoles': { label: 'CONSOLE', color: 'text-orange-400', bgColor: 'bg-orange-500/20', icon: null },
+  'Adult': { label: 'ADULT', color: 'text-rose-400', bgColor: 'bg-rose-500/20', icon: Eye },
 };
 
 export default function MediaListItem({ media, onClick, isFavorite = false, onFavoriteToggle }: MediaListItemProps) {
@@ -38,13 +38,13 @@ export default function MediaListItem({ media, onClick, isFavorite = false, onFa
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      className="group flex items-center px-4 py-2 hover:bg-white/[0.02] transition-colors cursor-pointer border-b border-white/[0.02] last:border-b-0"
+      className="group flex items-center px-4 py-2 hover:bg-muted/30 transition-colors cursor-pointer border-b border-border/30 last:border-b-0"
       onClick={() => onClick(media)}
     >
       {/* TITLE Column: Poster + Title + Rating (like screenshot 2) */}
       <div className="flex-1 min-w-0 flex items-center gap-3 mr-4">
         {/* Poster Thumbnail */}
-        <div className="relative w-10 h-14 rounded overflow-hidden shrink-0 bg-[#1a1d26]">
+        <div className="relative w-10 h-14 rounded overflow-hidden shrink-0 bg-muted">
           <img 
             src={media.poster} 
             alt={media.title}
@@ -55,7 +55,7 @@ export default function MediaListItem({ media, onClick, isFavorite = false, onFa
         
         {/* Title + Rating stacked */}
         <div className="min-w-0">
-          <h3 className="text-sm font-medium text-gray-200 truncate group-hover:text-[#e8466c] transition-colors">
+          <h3 className="text-sm font-medium text-foreground truncate group-hover:text-[#e8466c] transition-colors">
             {media.title}
           </h3>
           <div className="flex items-center gap-1 mt-0.5">
@@ -81,19 +81,19 @@ export default function MediaListItem({ media, onClick, isFavorite = false, onFa
 
       {/* GENRE Column */}
       <div className="w-[140px] shrink-0 mr-4">
-        <span className="text-sm text-gray-500 truncate block">
+        <span className="text-sm text-muted-foreground truncate block">
           {media.genres?.slice(0, 2).join(', ') || '-'}
         </span>
       </div>
 
       {/* YEAR Column */}
       <div className="w-[60px] shrink-0 text-center mr-4">
-        <span className="text-sm text-gray-400">{media.year}</span>
+        <span className="text-sm text-muted-foreground/80">{media.year}</span>
       </div>
 
       {/* PLAYS Column */}
       <div className="w-[50px] shrink-0 text-right mr-4">
-        <span className="text-sm text-gray-400">{media.playCount || 0}</span>
+        <span className="text-sm text-muted-foreground/80">{media.playCount || 0}</span>
       </div>
 
       {/* FAVORITE Column (Heart) */}
@@ -104,7 +104,7 @@ export default function MediaListItem({ media, onClick, isFavorite = false, onFa
             "p-1 rounded transition-colors",
             isFavorite 
               ? "text-[#e8466c]" 
-              : "text-gray-600 hover:text-gray-500"
+              : "text-muted-foreground/40 hover:text-muted-foreground/60"
           )}
         >
           <Heart size={14} className={cn(isFavorite && "fill-current")} />
diff --git a/src/components/MediaTable.tsx b/src/components/MediaTable.tsx
index 2a176b2..c1a82a6 100644
--- a/src/components/MediaTable.tsx
+++ b/src/components/MediaTable.tsx
@@ -41,14 +41,14 @@ const categoryConfig: Record<MediaCategory, {
   bgColor: string; 
   icon: React.ElementType | null;
 }> = {
-  'Anime': { label: 'ANIME', color: 'text-purple-300', bgColor: 'bg-purple-500/30', icon: null },
-  'Movies': { label: 'MOVIE', color: 'text-blue-300', bgColor: 'bg-blue-500/30', icon: Film },
-  'TV Series': { label: 'SERIES', color: 'text-green-300', bgColor: 'bg-green-500/30', icon: Tv },
-  'Music': { label: 'MUSIC', color: 'text-pink-300', bgColor: 'bg-pink-500/30', icon: Music },
-  'Books': { label: 'BOOK', color: 'text-yellow-300', bgColor: 'bg-yellow-500/30', icon: BookOpen },
-  'Games': { label: 'GAME', color: 'text-indigo-300', bgColor: 'bg-indigo-500/30', icon: Gamepad2 },
-  'Consoles': { label: 'CONSOLE', color: 'text-orange-300', bgColor: 'bg-orange-500/30', icon: Monitor },
-  'Adult': { label: 'ADULT', color: 'text-rose-300', bgColor: 'bg-rose-500/30', icon: Eye },
+  'Anime': { label: 'ANIME', color: 'text-purple-400', bgColor: 'bg-purple-500/20', icon: null },
+  'Movies': { label: 'MOVIE', color: 'text-blue-400', bgColor: 'bg-blue-500/20', icon: Film },
+  'TV Series': { label: 'SERIES', color: 'text-green-400', bgColor: 'bg-green-500/20', icon: Tv },
+  'Music': { label: 'MUSIC', color: 'text-pink-400', bgColor: 'bg-pink-500/20', icon: Music },
+  'Books': { label: 'BOOK', color: 'text-yellow-400', bgColor: 'bg-yellow-500/20', icon: BookOpen },
+  'Games': { label: 'GAME', color: 'text-indigo-400', bgColor: 'bg-indigo-500/20', icon: Gamepad2 },
+  'Consoles': { label: 'CONSOLE', color: 'text-orange-400', bgColor: 'bg-orange-500/20', icon: Monitor },
+  'Adult': { label: 'ADULT', color: 'text-rose-400', bgColor: 'bg-rose-500/20', icon: Eye },
 };
 
 export default function MediaTable({ 
@@ -104,7 +104,7 @@ export default function MediaTable({
 
   const SortIcon = ({ field }: { field: SortField }) => {
     if (sortField !== field) {
-      return <ArrowUpDown size={14} className="text-gray-600 ml-1 opacity-0 group-hover:opacity-100 transition-opacity" />;
+      return <ArrowUpDown size={14} className="text-muted-foreground/40 ml-1 opacity-0 group-hover:opacity-100 transition-opacity" />;
     }
     return sortDirection === 'asc' 
       ? <ArrowUp size={14} className="text-[#e8466c] ml-1" />
@@ -119,9 +119,9 @@ export default function MediaTable({
   return (
     <Table className="w-full">
       <TableHeader>
-        <TableRow className="border-b border-white/[0.03] hover:bg-transparent">
+        <TableRow className="border-b border-border/20 hover:bg-transparent">
           <TableHead
-            className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[45%]"
+            className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[45%]"
             onClick={() => handleSort('title')}
           >
             <div className="flex items-center">
@@ -129,7 +129,7 @@ export default function MediaTable({
             </div>
           </TableHead>
           <TableHead
-            className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[80px]"
+            className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[80px]"
             onClick={() => handleSort('category')}
           >
             <div className="flex items-center">
@@ -137,7 +137,7 @@ export default function MediaTable({
             </div>
           </TableHead>
           <TableHead
-            className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[18%]"
+            className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[18%]"
             onClick={() => handleSort('genre')}
           >
             <div className="flex items-center">
@@ -145,7 +145,7 @@ export default function MediaTable({
             </div>
           </TableHead>
           <TableHead
-            className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[70px] text-center"
+            className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[70px] text-center"
             onClick={() => handleSort('rating')}
           >
             <div className="flex items-center justify-center">
@@ -153,7 +153,7 @@ export default function MediaTable({
             </div>
           </TableHead>
           <TableHead
-            className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[60px] text-center"
+            className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[60px] text-center"
             onClick={() => handleSort('year')}
           >
             <div className="flex items-center justify-center">
@@ -161,7 +161,7 @@ export default function MediaTable({
             </div>
           </TableHead>
           <TableHead
-            className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[60px] text-right"
+            className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[60px] text-right"
             onClick={() => handleSort('plays')}
           >
             <div className="flex items-center justify-end">
@@ -180,13 +180,13 @@ export default function MediaTable({
           return (
             <TableRow
               key={media.id}
-              className="border-b border-white/[0.02] hover:bg-white/[0.02] transition-colors cursor-pointer group"
+              className="border-b border-border/20 hover:bg-muted/30 transition-colors cursor-pointer group"
               onClick={() => onMediaClick(media)}
             >
               {/* Title Cell with Poster */}
               <TableCell className="py-2">
                 <div className="flex items-center gap-3">
-                  <div className="relative w-10 h-14 rounded overflow-hidden shrink-0 bg-[#1a1d26]">
+                  <div className="relative w-10 h-14 rounded overflow-hidden shrink-0 bg-muted">
                     <img
                       src={media.poster}
                       alt={media.title}
@@ -195,7 +195,7 @@ export default function MediaTable({
                     />
                   </div>
                   <div className="min-w-0">
-                    <div className="text-sm font-medium text-gray-200 truncate group-hover:text-[#e8466c] transition-colors">
+                    <div className="text-sm font-medium text-foreground truncate group-hover:text-[#e8466c] transition-colors">
                       {media.title}
                     </div>
                   </div>
@@ -216,7 +216,7 @@ export default function MediaTable({
 
               {/* Genre */}
               <TableCell>
-                <span className="text-sm text-gray-500 truncate block">
+                <span className="text-sm text-muted-foreground truncate block">
                   {media.genres?.join(', ') || '-'}
                 </span>
               </TableCell>
@@ -225,7 +225,7 @@ export default function MediaTable({
               <TableCell className="text-center">
                 <div className="flex items-center justify-center gap-1">
                   <Star size={12} className="text-[#e8466c] fill-[#e8466c]" />
-                  <span className="text-sm font-medium text-gray-300">
+                  <span className="text-sm font-medium text-foreground/80">
                     {media.rating?.toFixed(1) || '-'}
                   </span>
                 </div>
@@ -233,12 +233,12 @@ export default function MediaTable({
 
               {/* Year */}
               <TableCell className="text-center">
-                <span className="text-sm text-gray-400">{media.year}</span>
+                <span className="text-sm text-muted-foreground/80">{media.year}</span>
               </TableCell>
 
               {/* Plays */}
               <TableCell className="text-right">
-                <span className="text-sm text-gray-400">{media.playCount || 0}</span>
+                <span className="text-sm text-muted-foreground/80">{media.playCount || 0}</span>
               </TableCell>
 
               {/* Favorite */}
@@ -249,7 +249,7 @@ export default function MediaTable({
                     "p-1 rounded transition-colors",
                     isFavorite
                       ? "text-[#e8466c]"
-                      : "text-gray-600 hover:text-gray-500"
+                      : "text-muted-foreground/40 hover:text-muted-foreground/60"
                   )}
                 >
                   <Heart size={14} className={cn(isFavorite && "fill-current")} />
diff --git a/src/components/SettingsView.tsx b/src/components/SettingsView.tsx
index 60bade9..4b2a054 100644
--- a/src/components/SettingsView.tsx
+++ b/src/components/SettingsView.tsx
@@ -559,14 +559,14 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
                         <div className="flex gap-2">
                           <input
                             type="color"
-                            value={customColors[key as keyof CustomColors] || '#6d28d9'}
+                            value={customColors[key as keyof CustomColors] || '#e8466c'}
                             onChange={(e) => handleColorChange(key as keyof CustomColors, e.target.value)}
                             className="w-10 h-10 rounded-lg cursor-pointer border-0 p-0"
                           />
                           <Input
                             value={customColors[key as keyof CustomColors] || ''}
                             onChange={(e) => handleColorChange(key as keyof CustomColors, e.target.value)}
-                            placeholder="#6d28d9"
+                            placeholder="#e8466c"
                             className="flex-1 text-xs"
                           />
                         </div>
diff --git a/src/components/filters/MediaFilters.tsx b/src/components/filters/MediaFilters.tsx
index d5e7989..e23c6cd 100644
--- a/src/components/filters/MediaFilters.tsx
+++ b/src/components/filters/MediaFilters.tsx
@@ -123,14 +123,14 @@ export default function MediaFilters({
             "h-9 px-3 rounded-xl border text-sm font-medium transition-colors inline-flex items-center justify-center",
             selectedGenre
               ? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
-              : "border-white/10 bg-transparent text-gray-400 hover:text-white hover:bg-white/5"
+              : "border-border bg-transparent text-muted-foreground hover:text-foreground hover:bg-accent"
           )}
         >
           <Star size={14} className="mr-2" />
           {selectedGenre || 'Genres'}
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" className="w-48 max-h-[300px] overflow-y-auto">
-          <DropdownMenuItem disabled className="text-xs font-semibold text-gray-500 uppercase">
+          <DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground uppercase">
             Filter by Genre
           </DropdownMenuItem>
           <DropdownMenuSeparator />
@@ -153,14 +153,14 @@ export default function MediaFilters({
               "h-9 px-3 rounded-xl border text-sm font-medium transition-colors inline-flex items-center justify-center",
               selectedStudio
                 ? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
-                : "border-white/10 bg-transparent text-gray-400 hover:text-white hover:bg-white/5"
+                : "border-border bg-transparent text-muted-foreground hover:text-foreground hover:bg-accent"
             )}
           >
             <Building2 size={14} className="mr-2" />
             {selectedStudio || 'Studios'}
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="w-48 max-h-[300px] overflow-y-auto">
-            <DropdownMenuItem disabled className="text-xs font-semibold text-gray-500 uppercase">
+            <DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground uppercase">
               Filter by Studio
             </DropdownMenuItem>
             <DropdownMenuSeparator />
@@ -184,14 +184,14 @@ export default function MediaFilters({
               "h-9 px-3 rounded-xl border text-sm font-medium transition-colors inline-flex items-center justify-center",
               selectedPlatform
                 ? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
-                : "border-white/10 bg-transparent text-gray-400 hover:text-white hover:bg-white/5"
+                : "border-border bg-transparent text-muted-foreground hover:text-foreground hover:bg-accent"
             )}
           >
             <Monitor size={14} className="mr-2" />
             {selectedPlatform || 'Platforms'}
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="w-48 max-h-[300px] overflow-y-auto">
-            <DropdownMenuItem disabled className="text-xs font-semibold text-gray-500 uppercase">
+            <DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground uppercase">
               Filter by Platform
             </DropdownMenuItem>
             <DropdownMenuSeparator />
@@ -215,14 +215,14 @@ export default function MediaFilters({
               "h-9 px-3 rounded-xl border text-sm font-medium transition-colors inline-flex items-center justify-center",
               selectedDeveloper
                 ? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
-                : "border-white/10 bg-transparent text-gray-400 hover:text-white hover:bg-white/5"
+                : "border-border bg-transparent text-muted-foreground hover:text-foreground hover:bg-accent"
             )}
           >
             <Users size={14} className="mr-2" />
             {selectedDeveloper || 'Developers'}
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="w-48 max-h-[300px] overflow-y-auto">
-            <DropdownMenuItem disabled className="text-xs font-semibold text-gray-500 uppercase">
+            <DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground uppercase">
               Filter by Developer
             </DropdownMenuItem>
             <DropdownMenuSeparator />
@@ -246,14 +246,14 @@ export default function MediaFilters({
               "h-9 px-3 rounded-xl border text-sm font-medium transition-colors inline-flex items-center justify-center",
               selectedCategory
                 ? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
-                : "border-white/10 bg-transparent text-gray-400 hover:text-white hover:bg-white/5"
+                : "border-border bg-transparent text-muted-foreground hover:text-foreground hover:bg-accent"
             )}
           >
             <FolderTree size={14} className="mr-2" />
             {selectedCategory || 'Series'}
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="w-48 max-h-[300px] overflow-y-auto">
-            <DropdownMenuItem disabled className="text-xs font-semibold text-gray-500 uppercase">
+            <DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground uppercase">
               Filter by Series
             </DropdownMenuItem>
             <DropdownMenuSeparator />
@@ -277,14 +277,14 @@ export default function MediaFilters({
               "h-9 px-3 rounded-xl border text-sm font-medium transition-colors inline-flex items-center justify-center",
               selectedSource
                 ? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
-                : "border-white/10 bg-transparent text-gray-400 hover:text-white hover:bg-white/5"
+                : "border-border bg-transparent text-muted-foreground hover:text-foreground hover:bg-accent"
             )}
           >
             <Database size={14} className="mr-2" />
             {selectedSource || 'Source'}
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="w-48 max-h-[300px] overflow-y-auto">
-            <DropdownMenuItem disabled className="text-xs font-semibold text-gray-500 uppercase">
+            <DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground uppercase">
               Filter by Source
             </DropdownMenuItem>
             <DropdownMenuSeparator />
@@ -304,7 +304,7 @@ export default function MediaFilters({
       {hasActiveFilters && (
         <button
           onClick={onClearAll}
-          className="h-9 px-3 inline-flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors"
+          className="h-9 px-3 inline-flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
         >
           <X size={14} className="mr-2" />
           Clear
diff --git a/src/components/sidebar/AppSidebar.tsx b/src/components/sidebar/AppSidebar.tsx
index c21f056..d083a68 100644
--- a/src/components/sidebar/AppSidebar.tsx
+++ b/src/components/sidebar/AppSidebar.tsx
@@ -143,20 +143,20 @@ export default function AppSidebar({
   });
 
   return (
-    <Sidebar className="border-r border-white/5 bg-[#0d0f14]">
+    <Sidebar>
       <SidebarHeader className="p-4">
         <NavLink to="/" className="flex items-center gap-3">
           <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#e8466c] to-[#f47298] flex items-center justify-center shadow-lg shadow-[#e8466c]/20">
             <Database className="w-4 h-4 text-white" />
           </div>
-          <span className="text-lg font-bold text-white tracking-tight">{pageTitle}</span>
+          <span className="text-lg font-bold text-sidebar-foreground tracking-tight">{pageTitle}</span>
         </NavLink>
       </SidebarHeader>
 
       <SidebarContent className="px-2">
         {/* Main Navigation */}
         <SidebarGroup>
-          <SidebarGroupLabel className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
+          <SidebarGroupLabel>
             Navigation
           </SidebarGroupLabel>
           <SidebarGroupContent>
@@ -167,10 +167,9 @@ export default function AppSidebar({
                     asChild
                     isActive={item.isActive}
                     className={cn(
-                      'transition-colors w-full',
                       item.isActive
                         ? 'bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20'
-                        : 'text-gray-400 hover:bg-white/5 hover:text-white'
+                        : ''
                     )}
                   >
                     <NavLink to={item.to} className="flex items-center gap-2 w-full">
@@ -186,7 +185,7 @@ export default function AppSidebar({
 
         {/* Media Type Filters */}
         <SidebarGroup>
-          <SidebarGroupLabel className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
+          <SidebarGroupLabel>
             Media Type
           </SidebarGroupLabel>
           <SidebarGroupContent>
@@ -199,10 +198,9 @@ export default function AppSidebar({
                       onClick={() => handleFilterClick(filter.category)}
                       isActive={isFilterActive}
                       className={cn(
-                        'transition-colors w-full justify-start gap-2',
                         isFilterActive
                           ? 'bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20'
-                          : 'text-gray-400 hover:bg-white/5 hover:text-white'
+                          : ''
                       )}
                     >
                       <filter.icon
@@ -217,7 +215,7 @@ export default function AppSidebar({
                           'ml-auto text-xs font-medium px-2 py-0.5 rounded-full shrink-0',
                           isFilterActive
                             ? 'bg-[#e8466c]/20 text-[#e8466c]'
-                            : 'bg-white/10 text-gray-500'
+                            : 'bg-sidebar-accent text-sidebar-foreground/60'
                         )}
                       >
                         {filter.count}
@@ -232,7 +230,7 @@ export default function AppSidebar({
 
         {/* Quick Filters */}
         <SidebarGroup>
-          <SidebarGroupLabel className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
+          <SidebarGroupLabel>
             Quick Filters
           </SidebarGroupLabel>
           <SidebarGroupContent>
@@ -240,7 +238,6 @@ export default function AppSidebar({
               <SidebarMenuItem>
                 <SidebarMenuButton
                   onClick={() => handleQuickFilter('most-played')}
-                  className="text-gray-400 hover:bg-white/5 hover:text-white w-full justify-start gap-2"
                 >
                   <Flame className="w-4 h-4 text-orange-400 shrink-0" />
                   <span className="truncate">Most Played</span>
@@ -249,7 +246,6 @@ export default function AppSidebar({
               <SidebarMenuItem>
                 <SidebarMenuButton
                   onClick={() => handleQuickFilter('recently-added')}
-                  className="text-gray-400 hover:bg-white/5 hover:text-white w-full justify-start gap-2"
                 >
                   <Clock className="w-4 h-4 text-cyan-400 shrink-0" />
                   <span className="truncate">Recently Added</span>
@@ -260,13 +256,13 @@ export default function AppSidebar({
         </SidebarGroup>
       </SidebarContent>
 
-      <SidebarFooter className="p-2">
+      <SidebarFooter className="p-2 space-y-1">
         {/* Theme Toggle */}
         <Button
           variant="ghost"
           size="sm"
           onClick={toggleTheme}
-          className="w-full justify-start gap-2 text-gray-400 hover:text-white hover:bg-white/5"
+          className="w-full justify-start gap-2 text-sidebar-foreground/60 hover:text-sidebar-foreground hover:bg-sidebar-accent"
         >
           {theme === 'dark' ? (
             <>
@@ -275,7 +271,7 @@ export default function AppSidebar({
             </>
           ) : (
             <>
-              <Moon className="w-4 h-4 text-indigo-400" />
+              <Moon className="w-4 h-4 text-sidebar-foreground/60" />
               <span>Dark Mode</span>
             </>
           )}
@@ -283,7 +279,7 @@ export default function AppSidebar({
 
         {/* User Profile */}
         {user ? (
-          <div className="flex items-center gap-3 px-2 py-2 rounded-lg bg-white/5 mt-2">
+          <div className="flex items-center gap-3 px-2 py-2 rounded-lg bg-sidebar-accent">
             <Avatar className="w-8 h-8">
               <AvatarImage src={user.avatar} alt={user.name} />
               <AvatarFallback className="bg-[#e8466c]/20 text-[#e8466c] text-xs">
@@ -295,20 +291,20 @@ export default function AppSidebar({
               </AvatarFallback>
             </Avatar>
             <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-white truncate">{user.name}</p>
-              <p className="text-xs text-gray-500 truncate">{user.email}</p>
+              <p className="text-sm font-medium text-sidebar-foreground truncate">{user.name}</p>
+              <p className="text-xs text-sidebar-foreground/50 truncate">{user.email}</p>
             </div>
           </div>
         ) : (
-          <div className="flex items-center gap-3 px-2 py-2 rounded-lg bg-white/5 mt-2">
+          <div className="flex items-center gap-3 px-2 py-2 rounded-lg bg-sidebar-accent">
             <Avatar className="w-8 h-8">
               <AvatarFallback className="bg-[#e8466c]/20 text-[#e8466c]">
                 <User className="w-4 h-4" />
               </AvatarFallback>
             </Avatar>
             <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-white">Guest</p>
-              <p className="text-xs text-gray-500">Not logged in</p>
+              <p className="text-sm font-medium text-sidebar-foreground">Guest</p>
+              <p className="text-xs text-sidebar-foreground/50">Not logged in</p>
             </div>
           </div>
         )}
@@ -318,7 +314,7 @@ export default function AppSidebar({
           variant="ghost"
           size="sm"
           onClick={handleLogout}
-          className="w-full justify-start gap-2 text-gray-400 hover:text-red-400 hover:bg-red-500/10 mt-2"
+          className="w-full justify-start gap-2 text-sidebar-foreground/60 hover:text-red-400 hover:bg-red-500/10"
         >
           <LogOut className="w-4 h-4" />
           <span>Logout</span>
diff --git a/src/components/ui/loading.tsx b/src/components/ui/loading.tsx
index 34d87fd..ca9e3db 100644
--- a/src/components/ui/loading.tsx
+++ b/src/components/ui/loading.tsx
@@ -7,7 +7,7 @@ interface LoadingProps {
 export default function Loading({ message = 'Loading...' }: LoadingProps) {
   return (
     <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
-      <Loader2 className="animate-spin h-12 w-12 text-[#6d28d9] mb-4" />
+      <Loader2 className="animate-spin h-12 w-12 text-[#e8466c] mb-4" />
       <p className="text-lg font-bold">{message}</p>
     </div>
   );
diff --git a/src/index.css b/src/index.css
index 43c63b6..8c3c9e3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -99,7 +99,7 @@
     --mv-accent-light: #f47298;
     
     /* Custom gradient colors */
-    --gradient-purple: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%);
+    --gradient-purple: linear-gradient(135deg, #e8466c 0%, #f47298 50%, #f9a8c9 100%);
     --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%);
     --gradient-green: linear-gradient(135deg, #22c55e 0%, #4ade80 50%, #86efac 100%);
     --gradient-yellow: linear-gradient(135deg, #eab308 0%, #facc15 50%, #fde047 100%);
@@ -107,56 +107,56 @@
 }
 
 .dark {
-    --background: oklch(0.12 0.01 264);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.18 0.02 264);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.18 0.02 264);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0.01 264);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.25 0.01 264);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0.01 264);
-    --accent-foreground: oklch(0.985 0 0);
+    --background: oklch(0.145 0.005 35);
+    --foreground: oklch(0.82 0.008 35);
+    --card: oklch(0.17 0.005 35);
+    --card-foreground: oklch(0.82 0.008 35);
+    --popover: oklch(0.17 0.005 35);
+    --popover-foreground: oklch(0.82 0.008 35);
+    --primary: oklch(0.82 0.008 35);
+    --primary-foreground: oklch(0.145 0.005 35);
+    --secondary: oklch(0.21 0.005 35);
+    --secondary-foreground: oklch(0.82 0.008 35);
+    --muted: oklch(0.19 0.005 35);
+    --muted-foreground: oklch(0.55 0.01 35);
+    --accent: oklch(0.21 0.005 35);
+    --accent-foreground: oklch(0.82 0.008 35);
     --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(0.985 0 0 / 15%);
-    --input: oklch(0.985 0 0 / 20%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --sidebar: oklch(0.18 0.02 264);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(0.985 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --border: oklch(0.82 0.008 35 / 10%);
+    --input: oklch(0.82 0.008 35 / 15%);
+    --ring: oklch(0.55 0 0);
+    --chart-1: oklch(0.7 0.08 35);
+    --chart-2: oklch(0.55 0.04 35);
+    --chart-3: oklch(0.4 0.02 35);
+    --chart-4: oklch(0.3 0.015 35);
+    --chart-5: oklch(0.2 0.01 35);
+    --sidebar: oklch(0.125 0.005 35);
+    --sidebar-foreground: oklch(0.82 0.008 35);
+    --sidebar-primary: oklch(0.55 0.22 0);
+    --sidebar-primary-foreground: oklch(1 0 0);
+    --sidebar-accent: oklch(0.19 0.005 35);
+    --sidebar-accent-foreground: oklch(0.82 0.008 35);
+    --sidebar-border: oklch(0.82 0.008 35 / 8%);
+    --sidebar-ring: oklch(0.55 0 0);
     
     /* MediaVault accent color - pink/coral */
     --mv-accent: #e8466c;
     --mv-accent-hover: #d13d60;
     --mv-accent-light: #f47298;
     
-    /* Custom gradient colors for dark mode - more vibrant */
-    --gradient-purple: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%);
-    --gradient-blue: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
-    --gradient-green: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #4ade80 100%);
-    --gradient-yellow: linear-gradient(135deg, #ca8a04 0%, #eab308 50%, #facc15 100%);
+    /* Custom gradient colors for dark mode - softer on eyes */
+    --gradient-purple: linear-gradient(135deg, #e8466c 0%, #f47298 50%, #f9a8c9 100%);
+    --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%);
+    --gradient-green: linear-gradient(135deg, #22c55e 0%, #4ade80 50%, #86efac 100%);
+    --gradient-yellow: linear-gradient(135deg, #eab308 0%, #facc15 50%, #fde047 100%);
     --gradient-pink: linear-gradient(135deg, #e8466c 0%, #f47298 50%, #f9a8c9 100%);
-    --gradient-orange: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #fb923c 100%);
-    --gradient-cyan: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #22d3ee 100%);
+    --gradient-orange: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
+    --gradient-cyan: linear-gradient(135deg, #06b6d4 0%, #22d3ee 50%, #67e8f9 100%);
     
     /* Background gradients for dark mode */
-    --bg-gradient-subtle: radial-gradient(circle at top right, rgba(232, 70, 108, 0.08) 0%, transparent 50%),
-                              radial-gradient(circle at bottom left, rgba(232, 70, 108, 0.05) 0%, transparent 50%);
-    --bg-gradient-mesh: linear-gradient(135deg, rgba(232, 70, 108, 0.03) 0%, rgba(244, 114, 152, 0.03) 50%, rgba(249, 168, 201, 0.03) 100%);
+    --bg-gradient-subtle: radial-gradient(circle at top right, rgba(232, 70, 108, 0.06) 0%, transparent 50%),
+                              radial-gradient(circle at bottom left, rgba(232, 70, 108, 0.04) 0%, transparent 50%);
+    --bg-gradient-mesh: linear-gradient(135deg, rgba(232, 70, 108, 0.02) 0%, rgba(244, 114, 152, 0.02) 50%, rgba(249, 168, 201, 0.02) 100%);
 }
 
 @layer base {
@@ -164,7 +164,7 @@
     @apply border-border outline-ring/50;
     }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground transition-[background-color,border-color] duration-200;
     }
   html {
     @apply font-sans;