diff --git a/web/src/pages/DesignSystem.tsx b/web/src/pages/DesignSystem.tsx
index c72bb66..dc082b4 100644
--- a/web/src/pages/DesignSystem.tsx
+++ b/web/src/pages/DesignSystem.tsx
@@ -349,9 +349,9 @@ export function DesignSystem() {
 function SectionTitle({ title }: { title: string }) {
     return (
         <div className="flex items-center gap-4 py-4">
-             <div className="h-0.5 bg-gradient-to-r from-transparent via-primary/50 to-transparent flex-1" />
+             <div className="h-0.5 bg-linear-to-r from-transparent via-primary/50 to-transparent flex-1" />
              <h2 className="text-xl font-bold text-foreground/80 uppercase tracking-widest">{title}</h2>
-             <div className="h-0.5 bg-gradient-to-r from-transparent via-primary/50 to-transparent flex-1" />
+             <div className="h-0.5 bg-linear-to-r from-transparent via-primary/50 to-transparent flex-1" />
         </div>
     );
 }
@@ -369,7 +369,7 @@ function ColorSwatch({ label, color, text = "text-foreground", border = false }:
     return (
         <div className="group space-y-2 cursor-pointer">
             <div className={`h-24 w-full rounded-xl ${color} ${border ? 'border border-border' : ''} flex items-end p-3 shadow-lg group-hover:scale-105 transition-transform duration-300 relative overflow-hidden`}>
-                <div className="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+                <div className="absolute inset-0 bg-linear-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                 <span className={`text-xs font-bold uppercase tracking-widest ${text} relative z-10`}>{label}</span>
             </div>
             <div className="flex justify-between text-xs text-muted-foreground px-1">