diff --git a/apps/web/src/components/BulkModeBanner.tsx b/apps/web/src/components/BulkModeBanner.tsx
index 12749b638..adedb0f3e 100644
--- a/apps/web/src/components/BulkModeBanner.tsx
+++ b/apps/web/src/components/BulkModeBanner.tsx
@@ -70,7 +70,7 @@ export function BulkModeBanner({
       aria-live="polite"
       aria-atomic="true"
       className={cn(
-        'w-full bg-kodo-steel/10 border-b border-border/30 text-kodo-steel',
+        'w-full bg-muted/10 border-b border-border/30 text-kodo-steel',
         'px-4 py-4 flex items-center justify-between gap-4',
         'transition-all duration-[var(--duration-normal)]',
         className,
diff --git a/apps/web/src/components/OfflineQueueManager.tsx b/apps/web/src/components/OfflineQueueManager.tsx
index 7a8a09fd9..0f4cadf9c 100644
--- a/apps/web/src/components/OfflineQueueManager.tsx
+++ b/apps/web/src/components/OfflineQueueManager.tsx
@@ -43,11 +43,11 @@ function getPriorityColor(priority: QueuedRequest['priority']): string {
     case 'high':
       return 'bg-kodo-red/20 text-kodo-red border-kodo-red/30';
     case 'normal':
-      return 'bg-kodo-steel/20 text-kodo-steel border-border/30';
+      return 'bg-muted/20 text-kodo-steel border-border/30';
     case 'low':
-      return 'bg-kodo-steel/30 text-kodo-secondary border-border/50';
+      return 'bg-muted/30 text-kodo-secondary border-border/50';
     default:
-      return 'bg-kodo-steel/30 text-kodo-secondary border-border/50';
+      return 'bg-muted/30 text-kodo-secondary border-border/50';
   }
 }
 
@@ -213,7 +213,7 @@ export function OfflineQueueManager({
 
         {/* Info Message */}
         {queue.length > 0 && (
-          <div className="p-4 bg-kodo-steel/10 border border-border/20 rounded-lg text-xs text-kodo-secondary">
+          <div className="p-4 bg-muted/10 border border-border/20 rounded-lg text-xs text-kodo-secondary">
             <p>
               Queued requests will be automatically processed when you're back
               online. You can remove individual requests or clear the entire
diff --git a/apps/web/src/components/Onboarding.tsx b/apps/web/src/components/Onboarding.tsx
index 236601e14..c49e8fe6b 100644
--- a/apps/web/src/components/Onboarding.tsx
+++ b/apps/web/src/components/Onboarding.tsx
@@ -119,7 +119,7 @@ export function Onboarding({
                     ? 'bg-kodo-cyan w-8'
                     : index < currentStep
                       ? 'bg-kodo-cyan/50'
-                      : 'bg-kodo-steel',
+                      : 'bg-muted',
                 )}
               />
             ))}
diff --git a/apps/web/src/components/admin/modals/BanUserModal.tsx b/apps/web/src/components/admin/modals/BanUserModal.tsx
index 25d7d7b7a..19874ce31 100644
--- a/apps/web/src/components/admin/modals/BanUserModal.tsx
+++ b/apps/web/src/components/admin/modals/BanUserModal.tsx
@@ -89,7 +89,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
               </span>
               <div
                 onClick={() => setIsPermanent(!isPermanent)}
-                className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${isPermanent ? 'bg-kodo-red' : 'bg-kodo-steel'}`}
+                className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${isPermanent ? 'bg-kodo-red' : 'bg-muted'}`}
               >
                 <div
                   className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${isPermanent ? 'left-6' : 'left-1'}`}
diff --git a/apps/web/src/components/analytics/TrackAnalyticsView.tsx b/apps/web/src/components/analytics/TrackAnalyticsView.tsx
index dceb3e47a..a76240d64 100644
--- a/apps/web/src/components/analytics/TrackAnalyticsView.tsx
+++ b/apps/web/src/components/analytics/TrackAnalyticsView.tsx
@@ -106,7 +106,7 @@ export const TrackAnalyticsView: React.FC<TrackAnalyticsViewProps> = ({
               return (
                 <div
                   key={i}
-                  className="flex-1 bg-kodo-steel/20 hover:bg-kodo-steel/50 transition-colors rounded-t relative group"
+                  className="flex-1 bg-muted/20 hover:bg-muted/50 transition-colors rounded-t relative group"
                   style={{ height: `${h}%` }}
                 >
                   <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 pointer-events-none">
@@ -128,7 +128,7 @@ export const TrackAnalyticsView: React.FC<TrackAnalyticsViewProps> = ({
               {trackData.geo.map((g) => (
                 <div key={g.country} className="flex items-center gap-4">
                   <div className="w-16 text-sm text-muted-foreground">{g.country}</div>
-                  <div className="flex-1 h-2 bg-kodo-steel rounded-full overflow-hidden">
+                  <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
                     <div
                       className="h-full bg-kodo-magenta"
                       style={{ width: `${g.percent}%` }}
diff --git a/apps/web/src/components/dashboard/TrackList.tsx b/apps/web/src/components/dashboard/TrackList.tsx
index 788f19231..03ba3f476 100644
--- a/apps/web/src/components/dashboard/TrackList.tsx
+++ b/apps/web/src/components/dashboard/TrackList.tsx
@@ -143,7 +143,7 @@ export const TrackList: React.FC = () => {
                 alt={track.title}
               />
               {isCurrent && (
-                <div className="absolute inset-0 bg-kodo-steel/20 ring-1 ring-inset ring-kodo-steel"></div>
+                <div className="absolute inset-0 bg-muted/20 ring-1 ring-inset ring-kodo-steel"></div>
               )}
             </div>
 
diff --git a/apps/web/src/components/education/MyCoursesView.tsx b/apps/web/src/components/education/MyCoursesView.tsx
index 8337deb64..223974872 100644
--- a/apps/web/src/components/education/MyCoursesView.tsx
+++ b/apps/web/src/components/education/MyCoursesView.tsx
@@ -90,7 +90,7 @@ export const MyCoursesView: React.FC<MyCoursesViewProps> = ({ onContinue }) => {
             <h2 className="text-2xl font-bold text-white mb-2">
               {lastActiveCourse.title}
             </h2>
-            <div className="w-full bg-kodo-steel h-2 rounded-full mb-4 max-w-md mx-auto md:mx-0">
+            <div className="w-full bg-muted h-2 rounded-full mb-4 max-w-md mx-auto md:mx-0">
               <div
                 className="bg-kodo-cyan h-full rounded-full"
                 style={{ width: `${lastActiveCourse.progress}%` }}
diff --git a/apps/web/src/components/education/modals/QuizModal.tsx b/apps/web/src/components/education/modals/QuizModal.tsx
index 168f728f2..1c3ac12f2 100644
--- a/apps/web/src/components/education/modals/QuizModal.tsx
+++ b/apps/web/src/components/education/modals/QuizModal.tsx
@@ -116,7 +116,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
         </div>
 
         {/* Progress */}
-        <div className="h-1 bg-kodo-steel w-full">
+        <div className="h-1 bg-muted w-full">
           <div
             className="h-full bg-kodo-cyan transition-all duration-[var(--duration-normal)]"
             style={{
diff --git a/apps/web/src/components/feedback/Alert.tsx b/apps/web/src/components/feedback/Alert.tsx
index 14b8a596c..af1c5a0d7 100644
--- a/apps/web/src/components/feedback/Alert.tsx
+++ b/apps/web/src/components/feedback/Alert.tsx
@@ -19,7 +19,7 @@ const ALERT_ICONS = {
 };
 
 const ALERT_STYLES = {
-  info: 'bg-kodo-steel/10 border-border/30 text-kodo-text-main dark:bg-kodo-steel/20 dark:border-border/40 dark:text-kodo-steel',
+  info: 'bg-muted/10 border-border/30 text-kodo-text-main dark:bg-muted/20 dark:border-border/40 dark:text-kodo-steel',
   success:
     'bg-kodo-lime/10 border-kodo-lime/30 text-kodo-text-main dark:bg-kodo-lime/20 dark:border-kodo-lime/40 dark:text-kodo-lime',
   warning:
diff --git a/apps/web/src/components/forms/PasswordStrengthIndicator.tsx b/apps/web/src/components/forms/PasswordStrengthIndicator.tsx
index 90e91d65a..25c0e30ed 100644
--- a/apps/web/src/components/forms/PasswordStrengthIndicator.tsx
+++ b/apps/web/src/components/forms/PasswordStrengthIndicator.tsx
@@ -57,14 +57,14 @@ export function PasswordStrengthIndicator({
   const currentStrengthLabel =
     strengthLabels[strength.score - 1] || 'Very Weak';
   const currentStrengthColor =
-    strengthColors[strength.score - 1] || 'bg-kodo-steel';
+    strengthColors[strength.score - 1] || 'bg-muted';
   const currentTextColor =
     strengthTextColors[strength.score - 1] || 'text-muted-foreground';
 
   return (
     <div className="space-y-2">
       <div className="flex items-center gap-2">
-        <div className="flex-1 bg-kodo-steel/30 dark:bg-kodo-steel rounded-full h-2 overflow-hidden">
+        <div className="flex-1 bg-muted/30 dark:bg-muted rounded-full h-2 overflow-hidden">
           <div
             className={cn(
               'h-2 rounded-full transition-all duration-[var(--duration-normal)]',
diff --git a/apps/web/src/components/gamification/AchievementCard.tsx b/apps/web/src/components/gamification/AchievementCard.tsx
index 2e876cb9f..4af18ab26 100644
--- a/apps/web/src/components/gamification/AchievementCard.tsx
+++ b/apps/web/src/components/gamification/AchievementCard.tsx
@@ -56,7 +56,7 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
           {/* Progress */}
           <div className="w-full bg-kodo-graphite h-1.5 rounded-full overflow-hidden">
             <div
-              className={`h-full transition-all duration-[var(--duration-slow)] ${isUnlocked ? 'bg-kodo-gold' : 'bg-kodo-steel'}`}
+              className={`h-full transition-all duration-[var(--duration-slow)] ${isUnlocked ? 'bg-kodo-gold' : 'bg-muted'}`}
               style={{ width: `${percentage}%` }}
             ></div>
           </div>
diff --git a/apps/web/src/components/inventory/EquipmentCard.tsx b/apps/web/src/components/inventory/EquipmentCard.tsx
index d93917455..767b3a131 100644
--- a/apps/web/src/components/inventory/EquipmentCard.tsx
+++ b/apps/web/src/components/inventory/EquipmentCard.tsx
@@ -16,7 +16,7 @@ export const EquipmentCard: React.FC<EquipmentCardProps> = ({
   const statusColor = {
     Active: 'text-kodo-lime bg-kodo-lime/10',
     Maintenance: 'text-kodo-orange bg-kodo-orange/10',
-    Sold: 'text-muted-foreground bg-kodo-steel/10',
+    Sold: 'text-muted-foreground bg-muted/10',
     Wishlist: 'text-kodo-magenta bg-kodo-magenta/10',
   };
 
diff --git a/apps/web/src/components/library/WatermarkSettingsModal.tsx b/apps/web/src/components/library/WatermarkSettingsModal.tsx
index 25395a70e..8ee00628d 100644
--- a/apps/web/src/components/library/WatermarkSettingsModal.tsx
+++ b/apps/web/src/components/library/WatermarkSettingsModal.tsx
@@ -53,7 +53,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
               </span>
               <div
                 onClick={() => setEnabled(!enabled)}
-                className={`w-10 h-5 rounded-full relative transition-colors ${enabled ? 'bg-kodo-magenta' : 'bg-kodo-steel'}`}
+                className={`w-10 h-5 rounded-full relative transition-colors ${enabled ? 'bg-kodo-magenta' : 'bg-muted'}`}
               >
                 <div
                   className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${enabled ? 'left-6' : 'left-1'}`}
@@ -81,7 +81,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
                     >
                       {/* Icon representation usually better, but text works for demo */}
                       <div
-                        className={`w-2 h-2 rounded-full mx-auto ${position === i ? 'bg-white' : 'bg-kodo-steel'}`}
+                        className={`w-2 h-2 rounded-full mx-auto ${position === i ? 'bg-white' : 'bg-muted'}`}
                       ></div>
                     </button>
                   ))}
@@ -99,7 +99,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
                   max="100"
                   value={opacity}
                   onChange={(e) => setOpacity(Number(e.target.value))}
-                  className="w-full h-1 bg-kodo-steel rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-magenta [&::-webkit-slider-thumb]:rounded-full"
+                  className="w-full h-1 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-magenta [&::-webkit-slider-thumb]:rounded-full"
                 />
               </div>
             </div>
diff --git a/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx b/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
index 2436de2c9..ac4430cfd 100644
--- a/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
@@ -100,7 +100,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
             className="w-full justify-start border border-dashed border-border mb-4 hover:border-border/50 hover:text-white group"
             onClick={() => addToast('New Playlist Flow')}
           >
-            <div className="w-8 h-8 bg-kodo-steel rounded flex items-center justify-center mr-3 group-hover:bg-white/5">
+            <div className="w-8 h-8 bg-muted rounded flex items-center justify-center mr-3 group-hover:bg-white/5">
               <Plus className="w-4 h-4" />
             </div>
             <span className="text-sm font-bold">New Playlist</span>
diff --git a/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx b/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
index 6f4a64f90..65b76f538 100644
--- a/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
@@ -86,7 +86,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
                   </div>
                 </div>
                 <div
-                  className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-kodo-steel'}`}
+                  className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-muted'}`}
                 >
                   <div
                     className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${isPublic ? 'left-4.5' : 'left-0.5'}`}
@@ -110,7 +110,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
                   </div>
                 </div>
                 <div
-                  className={`w-8 h-4 rounded-full relative transition-colors ${isCollaborative ? 'bg-kodo-lime' : 'bg-kodo-steel'}`}
+                  className={`w-8 h-4 rounded-full relative transition-colors ${isCollaborative ? 'bg-kodo-lime' : 'bg-muted'}`}
                 >
                   <div
                     className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${isCollaborative ? 'left-4.5' : 'left-0.5'}`}
diff --git a/apps/web/src/components/library/playlists/EditPlaylistModal.tsx b/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
index 76ba7a915..e9db55e66 100644
--- a/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
@@ -126,7 +126,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
                   </div>
                 </div>
                 <div
-                  className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-kodo-steel'}`}
+                  className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-muted'}`}
                 >
                   <div
                     className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${isPublic ? 'left-4.5' : 'left-0.5'}`}
diff --git a/apps/web/src/components/library/playlists/PlaylistDetailView.tsx b/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
index 8c8741888..74c3618ab 100644
--- a/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
+++ b/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
@@ -124,14 +124,14 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
 
           <div className="flex items-center gap-4 text-sm text-kodo-text-main font-medium mb-6">
             <div className="flex items-center gap-2">
-              <div className="w-6 h-6 rounded-full bg-kodo-steel"></div>
+              <div className="w-6 h-6 rounded-full bg-muted"></div>
               <span className="text-white hover:underline cursor-pointer">
                 {playlist.creator}
               </span>
             </div>
-            <span className="w-1 h-1 bg-kodo-steel rounded-full"></span>
+            <span className="w-1 h-1 bg-muted rounded-full"></span>
             <span>{playlist.likes} likes</span>
-            <span className="w-1 h-1 bg-kodo-steel rounded-full"></span>
+            <span className="w-1 h-1 bg-muted rounded-full"></span>
             <span>
               {tracks.length} songs, {playlist.duration}
             </span>
diff --git a/apps/web/src/components/library/playlists/QueueView.tsx b/apps/web/src/components/library/playlists/QueueView.tsx
index 1a4b73f00..3150ab594 100644
--- a/apps/web/src/components/library/playlists/QueueView.tsx
+++ b/apps/web/src/components/library/playlists/QueueView.tsx
@@ -146,7 +146,7 @@ export const QueueView: React.FC = () => {
               Autoplay
             </span>
             <div
-              className={`w-8 h-4 rounded-full relative transition-colors ${autoplay ? 'bg-kodo-lime' : 'bg-kodo-steel'}`}
+              className={`w-8 h-4 rounded-full relative transition-colors ${autoplay ? 'bg-kodo-lime' : 'bg-muted'}`}
             >
               <div
                 className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${autoplay ? 'left-4.5' : 'left-0.5'}`}
diff --git a/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx b/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
index 2bdc43869..96c210b79 100644
--- a/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
@@ -68,7 +68,7 @@ export const SaveQueueAsPlaylistModal: React.FC<
               </div>
             </div>
             <div
-              className={`w-10 h-5 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-kodo-steel'}`}
+              className={`w-10 h-5 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-muted'}`}
             >
               <div
                 className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${isPublic ? 'left-6' : 'left-1'}`}
diff --git a/apps/web/src/components/modals/CreatorModal.tsx b/apps/web/src/components/modals/CreatorModal.tsx
index 608f1d670..148e28ce0 100644
--- a/apps/web/src/components/modals/CreatorModal.tsx
+++ b/apps/web/src/components/modals/CreatorModal.tsx
@@ -72,7 +72,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
         <div className="p-8 flex-1 overflow-y-auto">
           {/* Progress Stepper */}
           <div className="flex justify-between max-w-lg mx-auto mb-10 relative">
-            <div className="absolute top-1/2 left-0 w-full h-1 bg-kodo-steel -z-10"></div>
+            <div className="absolute top-1/2 left-0 w-full h-1 bg-muted -z-10"></div>
             {[1, 2, 3].map((i) => (
               <div
                 key={i}
@@ -110,7 +110,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
                     Visibility
                   </label>
                   <div className="grid grid-cols-3 gap-2">
-                    <Button variant="outline" className="p-4 flex flex-col items-center justify-center gap-2 text-kodo-steel bg-kodo-steel/10 border-border">
+                    <Button variant="outline" className="p-4 flex flex-col items-center justify-center gap-2 text-kodo-steel bg-muted/10 border-border">
                       <Tag className="w-5 h-5" />{' '}
                       <span className="text-xs font-bold">Public</span>
                     </Button>
diff --git a/apps/web/src/components/pwa/PWAInstallBanner.tsx b/apps/web/src/components/pwa/PWAInstallBanner.tsx
index 21439f6d5..af702e58d 100644
--- a/apps/web/src/components/pwa/PWAInstallBanner.tsx
+++ b/apps/web/src/components/pwa/PWAInstallBanner.tsx
@@ -28,7 +28,7 @@ export function PWAInstallBanner() {
       <div className="flex flex-col gap-4 relative z-10">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2.5">
-            <div className="w-8 h-8 rounded-lg bg-kodo-steel/10 flex items-center justify-center border border-border/30 animate-pulse-glow">
+            <div className="w-8 h-8 rounded-lg bg-muted/10 flex items-center justify-center border border-border/30 animate-pulse-glow">
               <Smartphone className="h-4 w-4 text-kodo-steel" />
             </div>
             <div>
@@ -65,7 +65,7 @@ export function PWAInstallBanner() {
           </Button>
         </div>
 
-        <div className="absolute -bottom-8 -right-8 w-16 h-16 bg-kodo-steel/10 blur-2xl rounded-full" />
+        <div className="absolute -bottom-8 -right-8 w-16 h-16 bg-muted/10 blur-2xl rounded-full" />
       </div>
     </div>
   );
diff --git a/apps/web/src/components/seller/SellerDashboardView.tsx b/apps/web/src/components/seller/SellerDashboardView.tsx
index dddf32bc4..c5337e95a 100644
--- a/apps/web/src/components/seller/SellerDashboardView.tsx
+++ b/apps/web/src/components/seller/SellerDashboardView.tsx
@@ -210,7 +210,7 @@ export const SellerDashboardView: React.FC<SellerDashboardProps> = ({
           <Card variant="default" className="h-full">
             <h3 className="font-bold text-white mb-6">Recent Sales</h3>
             <div className="space-y-4 relative">
-              <div className="absolute left-2.5 top-2 bottom-2 w-px bg-kodo-steel"></div>
+              <div className="absolute left-2.5 top-2 bottom-2 w-px bg-muted"></div>
               {sales.map((sale) => (
                 <div key={sale.id} className="relative pl-8">
                   <div className="absolute left-0 top-1.5 w-5 h-5 bg-kodo-graphite border border-kodo-lime rounded-full flex items-center justify-center">
diff --git a/apps/web/src/components/settings/account/ChangeEmailModal.tsx b/apps/web/src/components/settings/account/ChangeEmailModal.tsx
index af817eb0d..09a92ee76 100644
--- a/apps/web/src/components/settings/account/ChangeEmailModal.tsx
+++ b/apps/web/src/components/settings/account/ChangeEmailModal.tsx
@@ -77,7 +77,7 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
             </div>
           ) : (
             <div className="text-center py-4">
-              <div className="w-16 h-16 bg-kodo-steel/20 rounded-full flex items-center justify-center mx-auto mb-4 text-kodo-steel">
+              <div className="w-16 h-16 bg-muted/20 rounded-full flex items-center justify-center mx-auto mb-4 text-kodo-steel">
                 <Mail className="w-8 h-8" />
               </div>
               <h4 className="text-lg font-bold text-white mb-2">
diff --git a/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx b/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
index f773a6515..9a56d99e0 100644
--- a/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
+++ b/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
@@ -174,7 +174,7 @@ export const AppearanceSettingsView: React.FC = () => {
                 max="20"
                 value={fontSize}
                 onChange={(e) => setFontSize(Number(e.target.value))}
-                className="w-full h-2 bg-kodo-steel rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-gold [&::-webkit-slider-thumb]:rounded-full"
+                className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-gold [&::-webkit-slider-thumb]:rounded-full"
               />
               <div
                 className="mt-4 p-4 bg-kodo-ink rounded border border-border text-kodo-text-main"
diff --git a/apps/web/src/components/settings/backups/BackupsView.tsx b/apps/web/src/components/settings/backups/BackupsView.tsx
index a2422c565..a5ebda483 100644
--- a/apps/web/src/components/settings/backups/BackupsView.tsx
+++ b/apps/web/src/components/settings/backups/BackupsView.tsx
@@ -163,7 +163,7 @@ export const BackupsView: React.FC = () => {
                 </div>
                 <div
                   onClick={() => setAutoBackup(!autoBackup)}
-                  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${autoBackup ? 'bg-kodo-cyan' : 'bg-kodo-steel'}`}
+                  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${autoBackup ? 'bg-kodo-cyan' : 'bg-muted'}`}
                 >
                   <div
                     className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${autoBackup ? 'left-6' : 'left-1'}`}
diff --git a/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx b/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
index 9951cddfb..b1856f1c3 100644
--- a/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
+++ b/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
@@ -30,7 +30,7 @@ export const CloudIntegrationView: React.FC = () => {
         <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
           <div className="flex items-center gap-4">
             <div
-              className={`w-16 h-16 rounded-full flex items-center justify-center ${isConnected ? 'bg-kodo-cyan text-black' : 'bg-kodo-steel text-muted-foreground'}`}
+              className={`w-16 h-16 rounded-full flex items-center justify-center ${isConnected ? 'bg-kodo-cyan text-black' : 'bg-muted text-muted-foreground'}`}
             >
               <Cloud className="w-8 h-8" />
             </div>
@@ -118,7 +118,7 @@ export const CloudIntegrationView: React.FC = () => {
                 </div>
                 <div
                   onClick={() => setAutoSync(!autoSync)}
-                  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${autoSync ? 'bg-kodo-cyan' : 'bg-kodo-steel'}`}
+                  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${autoSync ? 'bg-kodo-cyan' : 'bg-muted'}`}
                 >
                   <div
                     className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${autoSync ? 'left-6' : 'left-1'}`}
diff --git a/apps/web/src/components/settings/data/DataExportView.tsx b/apps/web/src/components/settings/data/DataExportView.tsx
index 2cbe84ee9..f25a4a9dc 100644
--- a/apps/web/src/components/settings/data/DataExportView.tsx
+++ b/apps/web/src/components/settings/data/DataExportView.tsx
@@ -36,7 +36,7 @@ export const DataExportView: React.FC = () => {
 
       <Card variant="default">
         <div className="flex items-start gap-4 mb-6">
-          <div className="p-4 bg-kodo-steel/10 rounded-full text-kodo-steel">
+          <div className="p-4 bg-muted/10 rounded-full text-kodo-steel">
             <Shield className="w-6 h-6" />
           </div>
           <div>
diff --git a/apps/web/src/components/social/CreatePostModal.tsx b/apps/web/src/components/social/CreatePostModal.tsx
index ffbd769e5..746eef970 100644
--- a/apps/web/src/components/social/CreatePostModal.tsx
+++ b/apps/web/src/components/social/CreatePostModal.tsx
@@ -54,7 +54,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
 
         <div className="p-4 flex-1">
           <div className="flex gap-4">
-            <div className="w-10 h-10 rounded-full bg-kodo-steel overflow-hidden flex-shrink-0">
+            <div className="w-10 h-10 rounded-full bg-muted overflow-hidden flex-shrink-0">
               <img
                 src="https://picsum.photos/id/237/100/100"
                 className="w-full h-full object-cover"
diff --git a/apps/web/src/components/social/FeedView.tsx b/apps/web/src/components/social/FeedView.tsx
index 7de1daefe..d6687fe40 100644
--- a/apps/web/src/components/social/FeedView.tsx
+++ b/apps/web/src/components/social/FeedView.tsx
@@ -80,7 +80,7 @@ export const FeedView: React.FC = () => {
       {/* Create Post Widget */}
       <Card variant="default" className="border-t-4 border-t-kodo-cyan p-4">
         <div className="flex gap-4">
-          <div className="w-10 h-10 rounded-full bg-kodo-steel flex-shrink-0 overflow-hidden cursor-pointer">
+          <div className="w-10 h-10 rounded-full bg-muted flex-shrink-0 overflow-hidden cursor-pointer">
             <img
               src="https://picsum.photos/id/237/100/100"
               className="w-full h-full object-cover"
diff --git a/apps/web/src/components/social/PostCard.tsx b/apps/web/src/components/social/PostCard.tsx
index db7629285..7bb6273e7 100644
--- a/apps/web/src/components/social/PostCard.tsx
+++ b/apps/web/src/components/social/PostCard.tsx
@@ -79,7 +79,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
         {/* Post Header */}
         <div className="p-4 flex items-start justify-between">
           <div className="flex items-center gap-4">
-            <div className="w-10 h-10 rounded-full bg-kodo-steel overflow-hidden border border-border cursor-pointer">
+            <div className="w-10 h-10 rounded-full bg-muted overflow-hidden border border-border cursor-pointer">
               <img
                 src={post.author.avatar}
                 className="w-full h-full object-cover"
@@ -171,10 +171,10 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
             {post.pollOptions.map((opt, i) => (
               <div
                 key={i}
-                className="relative h-10 bg-kodo-slate rounded overflow-hidden cursor-pointer hover:bg-kodo-steel/50 transition-colors border border-border"
+                className="relative h-10 bg-kodo-slate rounded overflow-hidden cursor-pointer hover:bg-muted/50 transition-colors border border-border"
               >
                 <div
-                  className="absolute top-0 left-0 h-full bg-kodo-steel/20"
+                  className="absolute top-0 left-0 h-full bg-muted/20"
                   style={{ width: `${opt.votes}%` }}
                 ></div>
                 <div className="absolute inset-0 flex items-center justify-between px-4">
@@ -241,7 +241,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
               </Button>
             )}
             <div className="mt-4 flex gap-4">
-              <div className="w-8 h-8 rounded-full bg-kodo-steel overflow-hidden flex-shrink-0">
+              <div className="w-8 h-8 rounded-full bg-muted overflow-hidden flex-shrink-0">
                 <img
                   src="https://picsum.photos/id/100/100/100"
                   className="w-full h-full object-cover"
diff --git a/apps/web/src/components/social/SharePostModal.tsx b/apps/web/src/components/social/SharePostModal.tsx
index 22e4610f8..a7968a71c 100644
--- a/apps/web/src/components/social/SharePostModal.tsx
+++ b/apps/web/src/components/social/SharePostModal.tsx
@@ -118,7 +118,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
             className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
             onClick={() => setMode('quote')}
           >
-            <div className="w-10 h-10 rounded-full bg-kodo-steel/10 flex items-center justify-center text-kodo-steel group-hover:bg-white/5">
+            <div className="w-10 h-10 rounded-full bg-muted/10 flex items-center justify-center text-kodo-steel group-hover:bg-white/5">
               <MessageSquare className="w-5 h-5" />
             </div>
             <div className="text-left">
@@ -129,7 +129,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
             </div>
           </button>
 
-          <div className="h-px bg-kodo-steel/50 my-2 mx-4"></div>
+          <div className="h-px bg-muted/50 my-2 mx-4"></div>
 
           <button
             className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
diff --git a/apps/web/src/components/social/groups/CreateGroupModal.tsx b/apps/web/src/components/social/groups/CreateGroupModal.tsx
index 4e7a744e7..d36a38304 100644
--- a/apps/web/src/components/social/groups/CreateGroupModal.tsx
+++ b/apps/web/src/components/social/groups/CreateGroupModal.tsx
@@ -117,7 +117,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
                 </div>
               </div>
               <div
-                className={`w-10 h-5 rounded-full relative transition-colors ${isPrivate ? 'bg-kodo-cyan' : 'bg-kodo-steel'}`}
+                className={`w-10 h-5 rounded-full relative transition-colors ${isPrivate ? 'bg-kodo-cyan' : 'bg-muted'}`}
               >
                 <div
                   className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${isPrivate ? 'left-6' : 'left-1'}`}
diff --git a/apps/web/src/components/ui/ImageCropper.tsx b/apps/web/src/components/ui/ImageCropper.tsx
index 4ecc97473..4af821612 100644
--- a/apps/web/src/components/ui/ImageCropper.tsx
+++ b/apps/web/src/components/ui/ImageCropper.tsx
@@ -173,7 +173,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
               step={0.1}
               aria-labelledby="Zoom"
               onChange={(e) => setZoom(Number(e.target.value))}
-              className="flex-1 h-1 bg-kodo-steel rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-cyan [&::-webkit-slider-thumb]:rounded-full"
+              className="flex-1 h-1 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-cyan [&::-webkit-slider-thumb]:rounded-full"
             />
           </div>
 
@@ -188,7 +188,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
               step={1}
               aria-labelledby="Rotation"
               onChange={(e) => setRotation(Number(e.target.value))}
-              className="flex-1 h-1 bg-kodo-steel rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-cyan [&::-webkit-slider-thumb]:rounded-full"
+              className="flex-1 h-1 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-cyan [&::-webkit-slider-thumb]:rounded-full"
             />
           </div>
 
diff --git a/apps/web/src/components/ui/LoadingState.tsx b/apps/web/src/components/ui/LoadingState.tsx
index fe24d270f..c4cf76359 100644
--- a/apps/web/src/components/ui/LoadingState.tsx
+++ b/apps/web/src/components/ui/LoadingState.tsx
@@ -138,9 +138,9 @@ export function LoadingState({
       <div className={cn('animate-pulse space-y-4', className)}>
         {children || (
           <>
-            <div className="h-4 bg-kodo-slate dark:bg-kodo-steel rounded w-3/4"></div>
-            <div className="h-4 bg-kodo-slate dark:bg-kodo-steel rounded w-1/2"></div>
-            <div className="h-4 bg-kodo-slate dark:bg-kodo-steel rounded w-5/6"></div>
+            <div className="h-4 bg-kodo-slate dark:bg-muted rounded w-3/4"></div>
+            <div className="h-4 bg-kodo-slate dark:bg-muted rounded w-1/2"></div>
+            <div className="h-4 bg-kodo-slate dark:bg-muted rounded w-5/6"></div>
           </>
         )}
       </div>
diff --git a/apps/web/src/components/ui/alert.tsx b/apps/web/src/components/ui/alert.tsx
index 24c9d067e..6db39da6a 100644
--- a/apps/web/src/components/ui/alert.tsx
+++ b/apps/web/src/components/ui/alert.tsx
@@ -109,7 +109,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
     const actualVariant = variantMap[variant] || variant;
 
     const styles = {
-      info: 'bg-kodo-steel/10 border-border/30 text-kodo-steel',
+      info: 'bg-muted/10 border-border/30 text-kodo-steel',
       success: 'bg-kodo-lime/10 border-kodo-lime/30 text-kodo-lime',
       warning: 'bg-kodo-gold/10 border-kodo-gold/30 text-kodo-gold',
       error: 'bg-kodo-red/10 border-kodo-red/30 text-kodo-red',
diff --git a/apps/web/src/components/ui/avatar.tsx b/apps/web/src/components/ui/avatar.tsx
index 2d2ee8023..37182c234 100644
--- a/apps/web/src/components/ui/avatar.tsx
+++ b/apps/web/src/components/ui/avatar.tsx
@@ -114,7 +114,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
 
     const statusColors = {
       online: 'bg-kodo-lime',
-      offline: 'bg-kodo-steel',
+      offline: 'bg-muted',
       away: 'bg-kodo-gold',
       idle: 'bg-kodo-gold',
       busy: 'bg-kodo-red',
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index aa025fb45..eeee573b1 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -130,7 +130,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     const actualVariant = variantMap[variant] || variant;
 
     const styles: Record<string, string> = {
-      cyan: 'bg-kodo-steel/10 text-kodo-steel border-border/30',
+      cyan: 'bg-muted/10 text-kodo-steel border-border/30',
       magenta: 'bg-kodo-magenta/10 text-kodo-magenta border-kodo-magenta/30',
       lime: 'bg-kodo-lime/10 text-kodo-lime border-kodo-lime/30',
       gold: 'bg-kodo-gold/10 text-kodo-gold border-kodo-gold/30',
diff --git a/apps/web/src/components/ui/progress.tsx b/apps/web/src/components/ui/progress.tsx
index 4096faba4..0da5cafe4 100644
--- a/apps/web/src/components/ui/progress.tsx
+++ b/apps/web/src/components/ui/progress.tsx
@@ -157,7 +157,7 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
 
     return (
       <div className={cn('w-full', className)} ref={ref} {...props}>
-        <div className="h-2 bg-kodo-steel rounded-full overflow-hidden">
+        <div className="h-2 bg-muted rounded-full overflow-hidden">
           <div
             className={cn(
               'h-full transition-all duration-[var(--duration-normal)] shadow-slider-thumb',
diff --git a/apps/web/src/components/ui/table.tsx b/apps/web/src/components/ui/table.tsx
index 01aad7691..7e97d6350 100644
--- a/apps/web/src/components/ui/table.tsx
+++ b/apps/web/src/components/ui/table.tsx
@@ -120,7 +120,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      'border-t border-border bg-kodo-steel/30 font-medium [&>tr]:last:border-b-0',
+      'border-t border-border bg-muted/30 font-medium [&>tr]:last:border-b-0',
       className,
     )}
     {...props}
diff --git a/apps/web/src/features/chat/components/ChatInput.tsx b/apps/web/src/features/chat/components/ChatInput.tsx
index 6d73bfcb5..230ba4bf7 100644
--- a/apps/web/src/features/chat/components/ChatInput.tsx
+++ b/apps/web/src/features/chat/components/ChatInput.tsx
@@ -117,9 +117,9 @@ export const ChatInput: React.FC = () => {
 
       {/* Upload Overlay */}
       {isDragActive && (
-        <div className="absolute bottom-full left-0 right-0 h-48 z-50 bg-kodo-steel/10 backdrop-blur-md flex items-center justify-center border-t-2 border-border border-dashed rounded-t-2xl animate-fadeIn">
+        <div className="absolute bottom-full left-0 right-0 h-48 z-50 bg-muted/10 backdrop-blur-md flex items-center justify-center border-t-2 border-border border-dashed rounded-t-2xl animate-fadeIn">
           <div className="text-center">
-            <div className="w-12 h-12 rounded-full bg-kodo-steel/20 flex items-center justify-center mx-auto mb-2 animate-bounce">
+            <div className="w-12 h-12 rounded-full bg-muted/20 flex items-center justify-center mx-auto mb-2 animate-bounce">
               <Paperclip className="w-6 h-6 text-kodo-steel" />
             </div>
             <p className="text-kodo-steel font-mono uppercase tracking-widest text-sm">
diff --git a/apps/web/src/features/chat/components/ChatRoom.tsx b/apps/web/src/features/chat/components/ChatRoom.tsx
index 19253805a..039a11364 100644
--- a/apps/web/src/features/chat/components/ChatRoom.tsx
+++ b/apps/web/src/features/chat/components/ChatRoom.tsx
@@ -119,7 +119,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
         {/* Welcome Message for Empty Room */}
         {currentMessages.length === 0 && (
           <div className="flex flex-col items-center justify-center h-[50vh] text-center space-y-4 opacity-60">
-            <div className="w-12 h-12 rounded-xl bg-kodo-steel/10 flex items-center justify-center border border-border/20">
+            <div className="w-12 h-12 rounded-xl bg-muted/10 flex items-center justify-center border border-border/20">
               <MessageSquare className="w-6 h-6 text-kodo-steel" />
             </div>
             <div>
@@ -144,7 +144,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
               className={cn(
                 'transition-all duration-[var(--duration-slow)] animate-slideUp',
                 highlightedMessageId === msg.id &&
-                'bg-kodo-steel/10 rounded-xl -mx-4 px-4 py-2 ring-1 ring-kodo-steel/30',
+                'bg-muted/10 rounded-xl -mx-4 px-4 py-2 ring-1 ring-kodo-steel/30',
               )}
             >
               <ChatMessageComponent message={msg} />
diff --git a/apps/web/src/features/playlists/components/PlaylistCard.tsx b/apps/web/src/features/playlists/components/PlaylistCard.tsx
index 045e24856..aa2a7fa08 100644
--- a/apps/web/src/features/playlists/components/PlaylistCard.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistCard.tsx
@@ -124,7 +124,7 @@ export function PlaylistCard({
               </div>
             ) : (
               <div
-                className="bg-kodo-steel/80 text-white px-2 py-1 rounded-full text-xs flex items-center gap-1"
+                className="bg-muted/80 text-white px-2 py-1 rounded-full text-xs flex items-center gap-1"
                 aria-label="Playlist privée"
               >
                 <Lock className="w-3 h-3" aria-hidden="true" />
diff --git a/apps/web/src/features/playlists/components/PlaylistHeader.tsx b/apps/web/src/features/playlists/components/PlaylistHeader.tsx
index 224e45349..5cde71531 100644
--- a/apps/web/src/features/playlists/components/PlaylistHeader.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistHeader.tsx
@@ -61,7 +61,7 @@ export function PlaylistHeader({ playlist, className }: PlaylistHeaderProps) {
                 </div>
               ) : (
                 <div
-                  className="bg-kodo-steel/90 text-white px-4 py-1.5 rounded-full text-sm flex items-center gap-2"
+                  className="bg-muted/90 text-white px-4 py-1.5 rounded-full text-sm flex items-center gap-2"
                   aria-label="Playlist privée"
                 >
                   <Lock className="w-4 h-4" aria-hidden="true" />
diff --git a/apps/web/src/features/playlists/components/PlaylistTrackItem.tsx b/apps/web/src/features/playlists/components/PlaylistTrackItem.tsx
index 5576e8307..4e000a1ed 100644
--- a/apps/web/src/features/playlists/components/PlaylistTrackItem.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistTrackItem.tsx
@@ -64,7 +64,7 @@ export function PlaylistTrackItem({
       className={cn(
         'flex items-center gap-2 sm:gap-4 p-3 sm:p-4 rounded-lg',
         'hover:bg-kodo-void dark:hover:bg-kodo-graphite',
-        'active:bg-kodo-slate dark:active:bg-kodo-steel',
+        'active:bg-kodo-slate dark:active:bg-muted',
         'transition-colors duration-[var(--duration-fast)] touch-manipulation',
         onTrackClick && 'cursor-pointer',
         className,
@@ -92,7 +92,7 @@ export function PlaylistTrackItem({
           <button
             type="button"
             onClick={handlePlayClick}
-            className="p-1 rounded-full hover:bg-kodo-slate dark:hover:bg-kodo-steel active:bg-kodo-slate dark:active:bg-kodo-steel transition-colors duration-[var(--duration-fast)] touch-manipulation min-h-8 min-w-8 sm:min-h-0 sm:min-w-0"
+            className="p-1 rounded-full hover:bg-kodo-slate dark:hover:bg-muted active:bg-kodo-slate dark:active:bg-muted transition-colors duration-[var(--duration-fast)] touch-manipulation min-h-8 min-w-8 sm:min-h-0 sm:min-w-0"
             aria-label={
               isPlaying
                 ? `Mettre en pause ${track.title}`
@@ -119,7 +119,7 @@ export function PlaylistTrackItem({
             className="w-10 h-10 sm:w-12 sm:h-12 rounded-md object-cover"
           />
         ) : (
-          <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-md bg-kodo-slate dark:bg-kodo-steel flex items-center justify-center">
+          <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-md bg-kodo-slate dark:bg-muted flex items-center justify-center">
             <Music className="h-5 w-5 sm:h-6 sm:w-6 text-muted-foreground dark:text-muted-foreground" />
           </div>
         )}
diff --git a/apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx b/apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx
index 7e58ce9a6..3199f9a59 100644
--- a/apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx
+++ b/apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx
@@ -53,11 +53,11 @@ export function PlaylistListToolbar({
             onClick={() => onViewChange('list')}
             className={cn(
               'flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-all duration-[var(--duration-fast)]',
-              'hover:bg-kodo-slate dark:hover:bg-kodo-steel',
+              'hover:bg-kodo-slate dark:hover:bg-muted',
               'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
               'touch-manipulation',
               currentView === 'list'
-                ? 'bg-white dark:bg-kodo-steel text-kodo-cyan dark:text-kodo-cyan shadow-sm'
+                ? 'bg-white dark:bg-muted text-kodo-cyan dark:text-kodo-cyan shadow-sm'
                 : 'text-muted-foreground dark:text-muted-foreground',
             )}
             aria-label="Affichage en liste"
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
index f05e9b697..e16161679 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
@@ -73,20 +73,20 @@ export function FileToolbar({
         )}
       >
         <div className="flex flex-col sm:flex-row gap-4 w-full xl:w-auto">
-          <div className="h-10 w-full sm:w-64 rounded-lg bg-kodo-steel/50" />
+          <div className="h-10 w-full sm:w-64 rounded-lg bg-muted/50" />
           <div className="flex items-center gap-2">
-            <div className="h-4 w-4 rounded bg-kodo-steel/50 shrink-0" />
+            <div className="h-4 w-4 rounded bg-muted/50 shrink-0" />
             <div className="flex gap-2">
               {tagsToShow.map((_, i) => (
-                <div key={i} className="h-6 w-16 rounded bg-kodo-steel/50" />
+                <div key={i} className="h-6 w-16 rounded bg-muted/50" />
               ))}
             </div>
           </div>
         </div>
         <div className="flex gap-2 w-full xl:w-auto">
-          <div className="h-10 w-24 rounded-lg bg-kodo-steel/50" />
-          <div className="h-10 w-32 rounded-lg bg-kodo-steel/50" />
-          <div className="h-10 w-20 rounded-lg bg-kodo-steel/50" />
+          <div className="h-10 w-24 rounded-lg bg-muted/50" />
+          <div className="h-10 w-32 rounded-lg bg-muted/50" />
+          <div className="h-10 w-20 rounded-lg bg-muted/50" />
         </div>
       </div>
     );