diff --git a/index.html b/index.html
index 993d0947..0e3131f0 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 
 <head>
   <meta charset="UTF-8" />
@@ -23,8 +23,7 @@
   <meta name="author" content="Team Wheels" />
   <meta name="copyrighted-site-verification" content="7d293d30ff247a9a" />
   <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" data-rh="true" />
-  <meta name="theme-color" content="#9333ea" media="(prefers-color-scheme: light)" />
-  <meta name="theme-color" content="#0b0b12" media="(prefers-color-scheme: dark)" />
+  <meta name="theme-color" content="#0A0C0F" />
   <link rel="canonical" href="https://renderdragon.org" data-rh="true" />
 
   <meta property="og:title" content="Renderdragon - Minecraft YouTube Tools & Assets" data-rh="true" />
@@ -58,7 +57,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="preload" href="/fonts/minecraftia.woff2" as="font" type="font/woff2" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Chakra+Petch:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
   <script type="application/ld+json">
     {
       "@context": "https://schema.org",
diff --git a/package.json b/package.json
index ca4f1dfc..9aa6310b 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@fontsource/geist-mono": "^5.2.7",
     "@fontsource/geist-sans": "^5.2.5",
     "@fontsource/jetbrains-mono": "^5.2.8",
+    "@fontsource/montserrat": "^5.3.0",
     "@google/genai": "^0.13.0",
     "@hcaptcha/react-hcaptcha": "^1.17.4",
     "@headlessui/react": "^2.2.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index db3d7775..a4aba120 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@fontsource/jetbrains-mono':
         specifier: ^5.2.8
         version: 5.2.8
+      '@fontsource/montserrat':
+        specifier: ^5.3.0
+        version: 5.3.0
       '@google/genai':
         specifier: ^0.13.0
         version: 0.13.0
@@ -882,6 +885,9 @@ packages:
   '@fontsource/jetbrains-mono@5.2.8':
     resolution: {integrity: sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==}
 
+  '@fontsource/montserrat@5.3.0':
+    resolution: {integrity: sha512-iQPDtZOnmM5ih4JBGaMSXisRap0ixb9bAUw2hDtY7EjVfaqiiNlKtVuJl9XclxUwtwMMHNcWXfQR6zI9x05+Tg==}
+
   '@google/genai@0.13.0':
     resolution: {integrity: sha512-eaEncWt875H7046T04mOpxpHJUM+jLIljEf+5QctRyOeChylE/nhpwm1bZWTRWoOu/t46R9r+PmgsJFhTpE7tQ==}
     engines: {node: '>=18.0.0'}
@@ -5433,6 +5439,8 @@ snapshots:
 
   '@fontsource/jetbrains-mono@5.2.8': {}
 
+  '@fontsource/montserrat@5.3.0': {}
+
   '@google/genai@0.13.0':
     dependencies:
       google-auth-library: 9.15.1
diff --git a/src/App.tsx b/src/App.tsx
index b8bdfbe8..10c2241b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -85,7 +85,7 @@ const CreatorPackPage = lazy(() => import("@/pages/CreatorPackPage"));
 
 const LoadingFallback = ({ message = "Loading..." }: { message?: string }) => (
   <div className="flex flex-col items-center justify-center min-h-screen gap-4">
-    <IconLoader2 className="w-12 h-12 animate-spin text-cow-purple" />
+    <IconLoader2 className="w-12 h-12 animate-spin text-primary" />
     <p className="text-white/80">{message}</p>
   </div>
 );
@@ -162,19 +162,6 @@ const HomeRedirect = () => {
 const App = () => {
   const [queryClient] = useState(() => new QueryClient());
 
-  // Global Theme Initialization
-  const [theme] = useState(() => {
-    return localStorage.getItem('theme') as 'light' | 'dark' ||
-      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-  });
-
-  useEffect(() => {
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  }, [theme]);
   return (
     <ErrorBoundary>
       <QueryClientProvider client={queryClient}>
diff --git a/src/components/AdBlockDetector.tsx b/src/components/AdBlockDetector.tsx
index c763e4c0..c4a189c4 100644
--- a/src/components/AdBlockDetector.tsx
+++ b/src/components/AdBlockDetector.tsx
@@ -56,7 +56,7 @@ export function AdBlockDetector() {
         <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
             <AlertDialogContent>
                 <AlertDialogHeader>
-                    <AlertDialogTitle className="font-minecraftia text-2xl">AdBlocker Detected</AlertDialogTitle>
+                    <AlertDialogTitle className="text-2xl">AdBlocker Detected</AlertDialogTitle>
                     <AlertDialogDescription className="space-y-2">
                         <p>
                             It looks like you are using an adblocker.
diff --git a/src/components/AudioPlayer.tsx b/src/components/AudioPlayer.tsx
index 3135a2e2..d8d12c00 100644
--- a/src/components/AudioPlayer.tsx
+++ b/src/components/AudioPlayer.tsx
@@ -9,6 +9,8 @@ import {
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
+const AUDIO_PLAY_EVENT = 'rd:audio-play';
+
 interface AudioPlayerProps {
   src: string;
   className?: string;
@@ -27,6 +29,23 @@ const AudioPlayer = ({ src, className, isInView = true, allowPlayBeforeReady = f
 
   const containerRef = useRef<HTMLDivElement>(null);
   const wavesurfer = useRef<import('wavesurfer.js').default | null>(null);
+  const instanceId = useRef<string>(
+    typeof crypto !== 'undefined' && 'randomUUID' in crypto
+      ? crypto.randomUUID()
+      : `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+  );
+
+  // Only one audio preview may play at a time: when a player starts, the others
+  // pause themselves.
+  useEffect(() => {
+    const handleOtherPlay = (event: Event) => {
+      if ((event as CustomEvent).detail === instanceId.current) return;
+      const ws = wavesurfer.current;
+      if (ws && ws.isPlaying()) ws.pause();
+    };
+    window.addEventListener(AUDIO_PLAY_EVENT, handleOtherPlay);
+    return () => window.removeEventListener(AUDIO_PLAY_EVENT, handleOtherPlay);
+  }, []);
 
   useEffect(() => {
     if (!containerRef.current) return;
@@ -41,11 +60,11 @@ const AudioPlayer = ({ src, className, isInView = true, allowPlayBeforeReady = f
       container: containerRef.current,
       waveColor: 'rgba(139, 92, 246, 0.2)', // Soft cow-purple
       progressColor: '#8b5cf6', // Solid cow-purple
-      cursorColor: '#8b5cf6',
+      cursorColor: '#c4b5fd',
       cursorWidth: 2,
       barWidth: 2,
       barRadius: 4,
-      height: 60,
+      height: 48,
       barGap: 3,
       normalize: true,
       hideScrollbar: true,
@@ -78,7 +97,11 @@ const AudioPlayer = ({ src, className, isInView = true, allowPlayBeforeReady = f
       setCurrentTime(ws.getCurrentTime());
       });
 
-      ws.on('play', () => isMounted && setIsPlaying(true));
+      ws.on('play', () => {
+        if (!isMounted) return;
+        setIsPlaying(true);
+        window.dispatchEvent(new CustomEvent(AUDIO_PLAY_EVENT, { detail: instanceId.current }));
+      });
       ws.on('pause', () => isMounted && setIsPlaying(false));
       ws.on('finish', () => isMounted && setIsPlaying(false));
     }).catch((error: unknown) => {
@@ -130,27 +153,27 @@ const AudioPlayer = ({ src, className, isInView = true, allowPlayBeforeReady = f
 
   return (
     <div className={cn(
-      "w-full rounded-xl bg-card border-2 border-primary/10 p-5 shadow-lg group/player transition-all duration-300 hover:border-primary/30",
+      "w-full rounded-xl bg-card border border-border p-5 shadow-lg group/player transition-all duration-300 hover:border-primary/30",
       className
     )}>
-      <div className="flex flex-col space-y-4">
+      <div className="flex flex-col space-y-3">
         {/* Waveform Container */}
-        <div className="relative h-[60px] w-full bg-muted/20 rounded-lg overflow-hidden flex items-center justify-center">
+        <div className="relative h-12 w-full bg-muted rounded-lg overflow-hidden flex items-center justify-center">
           {isLoading && !allowPlayBeforeReady && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center bg-card/60 backdrop-blur-[1px]">
-              <IconLoader2 className="h-6 w-6 animate-spin text-cow-purple" />
-              <span className="ml-2 text-xs font-jetbrains-mono tracking-wider text-muted-foreground">LOADING WAVEFORM...</span>
+            <div className="absolute inset-0 z-10 flex items-center justify-center bg-muted">
+              <IconLoader2 className="h-6 w-6 animate-spin text-primary" />
+              <span className="ml-2 text-xs tracking-wider text-muted-foreground">LOADING WAVEFORM...</span>
             </div>
           )}
           {isLoading && allowPlayBeforeReady && (
             <div className="absolute top-1 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1.5">
-              <IconLoader2 className="h-3 w-3 animate-spin text-cow-purple" />
-              <span className="text-[10px] font-jetbrains-mono tracking-wider text-muted-foreground">Loading waveform...</span>
+              <IconLoader2 className="h-3 w-3 animate-spin text-primary" />
+              <span className="text-[10px] tracking-wider text-muted-foreground">Loading waveform...</span>
             </div>
           )}
           <div ref={containerRef} className="w-full" />
           {loadError && (
-            <div className="absolute inset-0 flex items-center justify-center gap-2 bg-card/90 text-sm text-muted-foreground">
+            <div className="absolute inset-0 flex items-center justify-center gap-2 bg-muted text-sm text-muted-foreground">
               <span>Audio preview unavailable.</span>
               <Button variant="outline" size="sm" onClick={() => setRetryKey((key) => key + 1)}>Retry</Button>
             </div>
@@ -158,48 +181,46 @@ const AudioPlayer = ({ src, className, isInView = true, allowPlayBeforeReady = f
         </div>
 
         {/* Controls and Info */}
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-2">
+        <div className="flex flex-col items-center gap-2">
+          <div className="flex items-center justify-center gap-3">
             <Button
               variant="ghost"
               size="icon"
-              className="h-8 w-8 text-muted-foreground hover:text-primary transition-colors"
+              className="h-7 w-7 text-muted-foreground hover:text-primary transition-colors"
               onClick={skipBackward}
               disabled={!isReady && !allowPlayBeforeReady}
             >
-              <IconPlayerSkipBack size={18} fill="currentColor" className="opacity-70" />
+              <IconPlayerSkipBack size={16} fill="currentColor" className="opacity-70" />
             </Button>
 
             <Button
               size="icon"
-              className="h-12 w-12 rounded-full bg-cow-purple hover:bg-cow-purple-dark text-white shadow-md hover:scale-105 transition-all duration-200"
+              className="h-11 w-11 chamfer bg-primary hover:bg-primary/90 text-primary-foreground shadow-md hover:scale-105 transition-all duration-200"
               onClick={togglePlay}
               disabled={!isReady && !allowPlayBeforeReady}
             >
               {isPlaying ? (
-                <IconPlayerPause size={24} fill="currentColor" />
+                <IconPlayerPause size={22} fill="currentColor" />
               ) : (
-                <IconPlayerPlay size={24} fill="currentColor" className="ml-1" />
+                <IconPlayerPlay size={22} fill="currentColor" className="translate-x-[1px]" />
               )}
             </Button>
 
             <Button
               variant="ghost"
               size="icon"
-              className="h-8 w-8 text-muted-foreground hover:text-primary transition-colors"
+              className="h-7 w-7 text-muted-foreground hover:text-primary transition-colors"
               onClick={skipForward}
               disabled={!isReady && !allowPlayBeforeReady}
             >
-              <IconPlayerSkipForward size={18} fill="currentColor" className="opacity-70" />
+              <IconPlayerSkipForward size={16} fill="currentColor" className="opacity-70" />
             </Button>
           </div>
 
-          <div className="flex flex-col items-center flex-grow">
-            <div className="flex items-center gap-1.5 font-geist-mono text-[13px] font-medium tracking-tight text-muted-foreground">
-              <span className="text-foreground">{formatTime(currentTime)}</span>
-              <span className="opacity-30">/</span>
-              <span>{formatTime(duration)}</span>
-            </div>
+          <div className="flex items-center gap-1.5 font-geist-mono text-xs font-medium tracking-tight text-muted-foreground">
+            <span className="text-foreground">{formatTime(currentTime)}</span>
+            <span className="opacity-30">/</span>
+            <span>{formatTime(duration)}</span>
           </div>
         </div>
       </div>
diff --git a/src/components/DonateButton.tsx b/src/components/DonateButton.tsx
index 0cf6ba03..9c5e219b 100644
--- a/src/components/DonateButton.tsx
+++ b/src/components/DonateButton.tsx
@@ -40,8 +40,12 @@ const DonateButton = () => {
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       initial={false}
-      animate={{ opacity: isNearBottom ? 0 : 1 }}
-      transition={{ duration: 0.3, ease: "easeOut" }}
+      animate={
+        isNearBottom
+          ? { opacity: 0, scale: 0.5, y: 16 }
+          : { opacity: 1, scale: 1, y: 0 }
+      }
+      transition={{ type: "spring", stiffness: 420, damping: 28 }}
       style={{ pointerEvents: isNearBottom ? "none" : "auto" }}
       aria-hidden={isNearBottom}
     >
@@ -49,7 +53,7 @@ const DonateButton = () => {
         href="https://www.buymeacoffee.com/renderdragon"
         target="_blank"
         rel="noopener noreferrer"
-        className="flex items-center bg-cow-purple rounded-full h-12 shadow-lg border-2 border-black/20 overflow-hidden cursor-pointer"
+        className="flex items-center bg-primary chamfer h-12 shadow-lg border-2 border-black/20 overflow-hidden cursor-pointer"
         initial={false}
         animate={{
           width: isHovered ? "200px" : "64px",
@@ -79,7 +83,7 @@ const DonateButton = () => {
               className="flex items-center pr-6 whitespace-nowrap"
             >
               <div className="h-5 w-[1px] bg-white/20 mr-4" />
-              <span className="text-white text-sm font-bold uppercase tracking-[0.2em] font-jetbrains-mono">
+              <span className="text-white text-sm font-bold uppercase tracking-[0.2em] ">
                 Donate 🍕
               </span>
             </motion.div>
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 08766e07..01a76d4b 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -29,7 +29,7 @@ class ErrorBoundary extends Component<Props, State> {
           <h1 className="text-2xl font-bold mb-4">Something went wrong.</h1>
           <p className="mb-4">We're sorry for the inconvenience. Please try refreshing the page.</p>
           <button
-            className="bg-cow-purple text-white px-4 py-2 rounded hover:bg-cow-purple-dark"
+            className="bg-primary text-white px-4 py-2 rounded hover:bg-primary/90"
             onClick={() => this.setState({ hasError: false })}
           >
             Try again
diff --git a/src/components/FeaturedResources.tsx b/src/components/FeaturedResources.tsx
index 413f6d80..1fe1ca44 100644
--- a/src/components/FeaturedResources.tsx
+++ b/src/components/FeaturedResources.tsx
@@ -79,7 +79,7 @@ const FeaturedResources = () => {
   };
 
   return (
-    <section className="py-20 md:py-28 bg-background border-y-4 border-cow-purple cow-grid-bg">
+    <section className="py-20 md:py-28 bg-background border-y border-border">
       <div className="container mx-auto px-4">
         <motion.div
           className="text-center mb-14 md:mb-16 max-w-3xl mx-auto"
@@ -88,12 +88,10 @@ const FeaturedResources = () => {
           viewport={{ once: true }}
           transition={{ duration: 0.5 }}
         >
-          <h2
-            className="font-minecraftia text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 text-foreground leading-tight"
-          >
-            Featured <span className="text-cow-purple">Resources</span>
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-4 text-foreground">
+            Featured <span className="text-primary">Resources</span>
           </h2>
-          <p className="font-jetbrains-mono text-xl md:text-2xl text-foreground/70 leading-tight">
+          <p className="text-lg md:text-xl text-muted-foreground">
             A taste of what's inside. Browse the full library anytime.
           </p>
         </motion.div>
@@ -134,9 +132,9 @@ const FeaturedResources = () => {
         >
           <Link
             to="/resources"
-            className="pixel-btn-secondary inline-flex items-center space-x-2 group text-base md:text-lg"
+            className="group inline-flex items-center gap-2 chamfer border border-border px-5 py-2.5 text-base font-medium text-foreground transition-colors hover:bg-accent"
           >
-            <span>View All Resources</span>
+            <span>View all resources</span>
             <IconArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
           </Link>
         </motion.div>
diff --git a/src/components/FinalCTA.tsx b/src/components/FinalCTA.tsx
index 3d67b782..32589f17 100644
--- a/src/components/FinalCTA.tsx
+++ b/src/components/FinalCTA.tsx
@@ -15,21 +15,21 @@ const FinalCTA = () => {
         transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
         className="relative container mx-auto px-4"
       >
-        <div className="max-w-4xl mx-auto bg-cow-dark border-2 border-cow-purple pixel-corners p-10 md:p-16 text-center">
-          <h2 className="font-minecraftia text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 text-foreground leading-tight">
+        <div className="max-w-4xl mx-auto bg-background border-2 border-primary  p-10 md:p-16 text-center">
+          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 text-foreground leading-tight">
             Your next video
             <br />
-            <span className="text-cow-purple">starts here.</span>
+            <span className="text-primary">starts here.</span>
           </h2>
 
-          <p className="font-jetbrains-mono text-xl md:text-2xl text-foreground/80 mb-10 max-w-2xl mx-auto leading-tight">
+          <p className="text-xl md:text-2xl text-foreground/80 mb-10 max-w-2xl mx-auto leading-tight">
             Browse the hub, run a tool, or hang out with the community. No strings, no waitlist, no watermarks.
           </p>
 
           <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
             <Link
               to="/resources"
-              className="pixel-btn-primary group flex items-center gap-2 text-base md:text-lg"
+              className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 group flex items-center gap-2 text-base md:text-lg"
             >
               <span>Browse Resources</span>
               <IconArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
@@ -38,7 +38,7 @@ const FinalCTA = () => {
               href="https://discord.renderdragon.org"
               target="_blank"
               rel="noopener noreferrer"
-              className="pixel-btn-secondary group flex items-center gap-2 text-base md:text-lg"
+              className="inline-flex items-center justify-center chamfer border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent group flex items-center gap-2 text-base md:text-lg"
             >
               <IconBrandDiscord className="w-5 h-5" />
               <span>Join Discord</span>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index aef0d6b4..4be86632 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -60,7 +60,7 @@ const Footer = () => {
   };
 
   return (
-    <footer className="bg-cow-dark text-white overflow-x-hidden">
+    <footer className="border-t border-border bg-background text-foreground overflow-x-hidden">
       <div className="container mx-auto px-4 py-12">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           <div className="col-span-1 md:col-span-2">
@@ -74,7 +74,7 @@ const Footer = () => {
               <span className="font-minecraftia leading-none">RenderDragon</span>
             </Link>
 
-            <p className="text-white/70 mb-6 max-w-md">
+            <p className="text-muted-foreground mb-6 max-w-md">
               The ultimate hub for creators. Find free resources for your next project, including music, sound effects, images, and more.
             </p>
 
@@ -83,7 +83,7 @@ const Footer = () => {
                 href="https://discord.renderdragon.org"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 bg-white/10 hover:bg-white/20 pixel-corners transition-colors"
+                className="p-2 rounded-lg bg-accent hover:bg-accent transition-colors"
                 aria-label="Discord"
               >
                 <img className="w-6 h-6" src="/assets/discord_icon.png" alt="Discord" loading="lazy" />
@@ -93,7 +93,7 @@ const Footer = () => {
                 href="https://x.com/_renderdragon"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 bg-white/10 hover:bg-white/20 pixel-corners transition-colors"
+                className="p-2 rounded-lg bg-accent hover:bg-accent transition-colors"
                 aria-label="Twitter"
               >
                 <img className="w-6 h-6" src="/assets/twitter_icon.png" alt="Twitter" loading="lazy" />
@@ -103,7 +103,7 @@ const Footer = () => {
                 href="https://www.youtube.com/channel/UCOheNYpPEHcS2ljttRmllxg"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 bg-white/10 hover:bg-white/20 pixel-corners transition-colors"
+                className="p-2 rounded-lg bg-accent hover:bg-accent transition-colors"
                 aria-label="YouTube"
               >
                 <img className="w-6 h-6" src="/assets/youtube_icon.png" alt="YouTube" loading="lazy" />
@@ -113,45 +113,45 @@ const Footer = () => {
           </div>
 
           <div>
-            <h3 className="text-lg font-jetbrains-mono mb-4">Legal</h3>
+            <h3 className="text-sm font-semibold text-foreground mb-4">Legal</h3>
             <ul className="space-y-2">
               <li>
-                <Link to="/tos" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/tos" className="text-muted-foreground hover:text-foreground transition-colors">
                   Terms of Service
                 </Link>
               </li>
               <li>
-                <Link to="/privacy" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/privacy" className="text-muted-foreground hover:text-foreground transition-colors">
                   Privacy Policy
                 </Link>
               </li>
             </ul>
 
-            <h3 className="text-lg font-jetbrains-mono mb-4 mt-6">Navigate</h3>
+            <h3 className="text-sm font-semibold text-foreground mb-4 mt-6">Navigate</h3>
             <ul className="space-y-2">
               <li>
-                <Link to="/" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/" className="text-muted-foreground hover:text-foreground transition-colors">
                   Home
                 </Link>
               </li>
               <li>
-                <Link to="/blogs" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/blogs" className="text-muted-foreground hover:text-foreground transition-colors">
                   Blogs
                 </Link>
               </li>
               <li>
-                <Link to="/resources" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/resources" className="text-muted-foreground hover:text-foreground transition-colors">
                   Resources Hub
                 </Link>
               </li>
 
               <li>
-                <Link to="/utilities" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/utilities" className="text-muted-foreground hover:text-foreground transition-colors">
                   Utilities
                 </Link>
               </li>
               <li>
-                <Link to="/contact" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/contact" className="text-muted-foreground hover:text-foreground transition-colors">
                   Contact
                 </Link>
               </li>
@@ -159,35 +159,35 @@ const Footer = () => {
           </div>
 
           <div>
-            <h3 className="text-lg font-jetbrains-mono mb-4">Tools</h3>
+            <h3 className="text-sm font-semibold text-foreground mb-4">Tools</h3>
             <ul className="space-y-2">
               <li>
-                <Link to="/background-generator" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/background-generator" className="text-muted-foreground hover:text-foreground transition-colors">
                   Background Generator
                 </Link>
               </li>
               <li>
-                <Link to="/player-renderer" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/player-renderer" className="text-muted-foreground hover:text-foreground transition-colors">
                   Player Renderer
                 </Link>
               </li>
               <li>
-                <Link to="/renderbot" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/renderbot" className="text-muted-foreground hover:text-foreground transition-colors">
                   Renderbot
                 </Link>
               </li>
               <li>
-                <Link to="/text-generator" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/text-generator" className="text-muted-foreground hover:text-foreground transition-colors">
                   Text Generator
                 </Link>
               </li>
               <li>
-                <Link to="/generators" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/generators" className="text-muted-foreground hover:text-foreground transition-colors">
                   Content Generators
                 </Link>
               </li>
               <li>
-                <Link to="/youtube-downloader" className="text-white/70 hover:text-white transition-colors">
+                <Link to="/youtube-downloader" className="text-muted-foreground hover:text-foreground transition-colors">
                   Youtube Tools
                 </Link>
               </li>
@@ -195,41 +195,41 @@ const Footer = () => {
           </div>
         </div>
 
-        <div className="pt-8 mt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center">
+        <div className="pt-8 mt-8 border-t border-border flex flex-col md:flex-row justify-between items-center">
           <div className="flex items-center space-x-4 mb-4 md:mb-0">
-            <Link to="/faq" className="text-white/70 hover:text-white transition-colors text-sm relative">
+            <Link to="/faq" className="text-muted-foreground hover:text-foreground transition-colors text-sm relative">
               FAQ
             </Link>
 
-            <Link to="/tos" className="text-white/70 hover:text-white transition-colors text-sm">
+            <Link to="/tos" className="text-muted-foreground hover:text-foreground transition-colors text-sm">
               Terms
             </Link>
 
-            <Link to="/privacy" className="text-white/70 hover:text-white transition-colors text-sm">
+            <Link to="/privacy" className="text-muted-foreground hover:text-foreground transition-colors text-sm">
               Privacy
             </Link>
 
-            <Link to="/renderbot" className="text-white/70 hover:text-white transition-colors text-sm">
+            <Link to="/renderbot" className="text-muted-foreground hover:text-foreground transition-colors text-sm">
               Renderbot
             </Link>
 
             <HyperpingBadge status="online" />
 
-            <div className="text-white/70 text-sm">
+            <div className="text-muted-foreground text-sm">
               <span className="mr-4">Not associated with Mojang, AB.</span>
-              <a href="https://www.flaticon.com/free-icons/pixel" title="pixel icons" className="hover:text-white transition-colors">Pixel icons created by Freepik - Flaticon</a>
+              <a href="https://www.flaticon.com/free-icons/pixel" title="pixel icons" className="hover:text-foreground transition-colors">Pixel icons created by Freepik - Flaticon</a>
             </div>
           </div>
 
           <div className="flex items-center space-x-4">
-            <p className="text-white/70 text-sm">
+            <p className="text-muted-foreground text-sm">
               &copy; {currentYear} RenderDragon. All rights reserved.
             </p>
 
             <button
               ref={cartButtonRef}
               onClick={handleCartClick}
-              className="ml-4 p-2 bg-white/10 hover:bg-white/20 rounded-md transition-all duration-1000"
+              className="ml-4 p-2 rounded-lg bg-accent hover:bg-accent transition-all duration-1000"
               disabled={cartClicked}
             >
               <IconShoppingCart className="h-5 w-5" />
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 2ee401ba..4b90c7b4 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -27,7 +27,7 @@ const Hero = () => {
 
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-background px-6 py-20 md:py-28">
-      <div className="absolute inset-0 pointer-events-none cow-grid-bg opacity-50" />
+      <div className="absolute inset-0 pointer-events-none cow-grid-bg opacity-60" />
 
       <motion.div
         className="relative z-10 max-w-2xl mx-auto text-center flex flex-col items-center"
@@ -37,14 +37,14 @@ const Hero = () => {
       >
         <motion.div variants={fadeUp} className="flex items-center gap-4 mb-6">
           <Logo size="xl" />
-          <h1 className="font-minecraftia text-2xl sm:text-4xl md:text-5xl lg:text-6xl text-foreground leading-tight">
-            Render<span className="text-cow-purple">Dragon</span>
+          <h1 className="font-minecraftia font-normal text-2xl sm:text-4xl md:text-5xl lg:text-6xl text-foreground leading-tight">
+            Render<span className="text-primary">Dragon</span>
           </h1>
         </motion.div>
 
         <motion.p
           variants={fadeUp}
-          className="font-jetbrains-mono text-lg md:text-xl text-foreground/80 max-w-xl mb-8 leading-relaxed"
+          className="text-lg md:text-xl text-muted-foreground max-w-xl mb-8 leading-relaxed"
         >
           Free music, SFX, fonts, presets, and editing tools — all in one place.
           Built for Minecraft YouTubers who'd rather film than file-cabinet.
@@ -52,18 +52,18 @@ const Hero = () => {
 
         <motion.div
           variants={fadeUp}
-          className="flex flex-col sm:flex-row gap-4"
+          className="flex flex-col sm:flex-row gap-3"
         >
           <Link
             to="/resources"
-            className="pixel-btn-primary group flex items-center gap-2 text-base md:text-lg"
+            className="group inline-flex items-center justify-center gap-2 chamfer bg-primary px-5 py-3 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/90"
           >
             <span>Browse Resources</span>
             <IconArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
           </Link>
           <Link
             to={randomTool}
-            className="pixel-btn-secondary group flex items-center gap-2 text-base md:text-lg"
+            className="group inline-flex items-center justify-center gap-2 chamfer border border-border px-5 py-3 text-base font-medium text-foreground transition-colors hover:bg-accent"
           >
             <IconBolt className="w-5 h-5" />
             <span>Try a Tool</span>
diff --git a/src/components/LooneyCheckDialog.tsx b/src/components/LooneyCheckDialog.tsx
index 1db671fc..d3efbc96 100644
--- a/src/components/LooneyCheckDialog.tsx
+++ b/src/components/LooneyCheckDialog.tsx
@@ -17,17 +17,17 @@ const LooneyCheckDialog = ({ resource, onClose }: LooneyCheckDialogProps) => {
   const [existingJob, setExistingJob] = useState<LooneyHistoryRecord | null>(null);
   const [limitReached, setLimitReached] = useState(false);
   return <><Dialog open={!!resource} onOpenChange={(open) => { if (!open) { setLimitReached(false); onClose(); } }}>
-    <DialogContent className="max-h-[92vh] overflow-y-auto custom-scrollbar sm:max-w-4xl pixel-corners border-2 border-cow-purple">
+    <DialogContent className="max-h-[92vh] overflow-y-auto custom-scrollbar sm:max-w-4xl  border-2 border-primary">
       <DialogHeader>
-        <DialogTitle className="flex items-center gap-2 font-jetbrains-mono text-xl">
-          <IconShieldCheck className="h-5 w-5 text-cow-purple" /> Check for copyright
+        <DialogTitle className="flex items-center gap-2 text-xl">
+          <IconShieldCheck className="h-5 w-5 text-primary" /> Check for copyright
         </DialogTitle>
         <DialogDescription>
           Looney will identify the track and research licensing signals before returning its findings.
         </DialogDescription>
       </DialogHeader>
       <LooneyCheckForm initialResource={resource} autoStart onResult={(_, __, ___, jobId) => { onClose(); if (jobId) navigate(`/gappa/check/${encodeURIComponent(jobId)}`); }} onExistingJob={setExistingJob} onLimitReached={() => setLimitReached(true)} onCheckStart={() => setLimitReached(false)} />
-       {limitReached && <p className="pixel-corners border border-amber-500/40 bg-amber-500/5 p-3 text-sm text-amber-700 dark:text-amber-300">Two checks are already running. Wait for one to finish before starting another.</p>}
+       {limitReached && <p className=" border border-amber-500/40 bg-amber-500/5 p-3 text-sm text-amber-700 dark:text-amber-300">Two checks are already running. Wait for one to finish before starting another.</p>}
     </DialogContent>
   </Dialog><LooneyRunningCheckDialog record={existingJob} onClose={() => setExistingJob(null)} /></>;
 };
diff --git a/src/components/LooneyCheckForm.tsx b/src/components/LooneyCheckForm.tsx
index 5f6fde59..7211e89d 100644
--- a/src/components/LooneyCheckForm.tsx
+++ b/src/components/LooneyCheckForm.tsx
@@ -206,11 +206,11 @@ const LooneyCheckForm = ({ initialResource, autoStart = false, onJobChange, onRe
   return (
     <form onSubmit={handleSubmit} className="space-y-5">
       {!autoStart && (
-         <div className="pixel-corners grid grid-cols-2 gap-2 border border-border bg-muted/30 p-1">
-            <button type="button" onClick={() => setSourceTab('file')} className={cn('pixel-corners flex items-center justify-center gap-1 whitespace-nowrap px-2 py-2 text-xs transition-colors sm:gap-2 sm:px-3 sm:text-sm', sourceTab === 'file' ? 'bg-cow-purple text-white' : 'text-muted-foreground hover:text-foreground')}>
+         <div className=" grid grid-cols-2 gap-2 border border-border bg-muted p-1">
+            <button type="button" onClick={() => setSourceTab('file')} className={cn(' flex items-center justify-center gap-1 whitespace-nowrap px-2 py-2 text-xs transition-colors sm:gap-2 sm:px-3 sm:text-sm', sourceTab === 'file' ? 'bg-primary text-white' : 'text-muted-foreground hover:text-foreground')}>
              <IconFileMusic className="h-4 w-4 shrink-0" /> Audio file
            </button>
-            <button type="button" onClick={() => setSourceTab('spotify')} className={cn('pixel-corners flex items-center justify-center gap-1 whitespace-nowrap px-2 py-2 text-xs transition-colors sm:gap-2 sm:px-3 sm:text-sm', sourceTab === 'spotify' ? 'bg-cow-purple text-white' : 'text-muted-foreground hover:text-foreground')}>
+            <button type="button" onClick={() => setSourceTab('spotify')} className={cn(' flex items-center justify-center gap-1 whitespace-nowrap px-2 py-2 text-xs transition-colors sm:gap-2 sm:px-3 sm:text-sm', sourceTab === 'spotify' ? 'bg-primary text-white' : 'text-muted-foreground hover:text-foreground')}>
              <IconLink className="h-4 w-4 shrink-0" /> Spotify URL
            </button>
         </div>
@@ -231,39 +231,39 @@ const LooneyCheckForm = ({ initialResource, autoStart = false, onJobChange, onRe
             aria-label="Choose an audio file to check"
             onDragOver={(event) => event.preventDefault()}
             onDrop={handleDrop}
-            className="pixel-corners cursor-pointer border-2 border-dashed border-cow-purple/50 bg-cow-purple/5 p-8 text-center transition-colors hover:border-cow-purple hover:bg-cow-purple/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cow-purple"
+            className=" cursor-pointer border-2 border-dashed border-primary/50 bg-primary/5 p-8 text-center transition-colors hover:border-primary hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
           >
-            <IconUpload className="mx-auto h-8 w-8 text-cow-purple" />
-            <p className="mt-3 font-jetbrains-mono text-sm font-semibold">{file ? file.name : 'Drop an audio file here or browse'}</p>
+            <IconUpload className="mx-auto h-8 w-8 text-primary" />
+            <p className="mt-3 text-sm font-semibold">{file ? file.name : 'Drop an audio file here or browse'}</p>
             <p className="mt-1 text-xs text-muted-foreground">MP3, WAV, M4A, FLAC, OGG, AAC, or OPUS up to 50 MB</p>
           </div>
         </>
       ) : !autoStart ? (
         <div className="space-y-2">
           <label htmlFor="looney-spotify-url" className="text-sm font-medium">Spotify track URL</label>
-          <Input id="looney-spotify-url" value={spotifyUrl} onChange={(event) => setSpotifyUrl(event.target.value)} placeholder="https://open.spotify.com/track/..." className="pixel-corners" />
+          <Input id="looney-spotify-url" value={spotifyUrl} onChange={(event) => setSpotifyUrl(event.target.value)} placeholder="https://open.spotify.com/track/..." className="" />
           <p className="text-xs text-muted-foreground">Use a public Spotify track link. The audio is processed by the Looney API.</p>
         </div>
       ) : null}
 
       {error && (
-        <Alert variant="destructive" className="pixel-corners">
+        <Alert variant="destructive" className="">
           <IconAlertCircle className="h-4 w-4" />
-          <AlertTitle className="font-minecraftia">Check could not start</AlertTitle>
+          <AlertTitle className="">Check could not start</AlertTitle>
           <AlertDescription>{error}</AlertDescription>
         </Alert>
       )}
 
       {!autoStart && (
-        <Button type="submit" disabled={isLoading} className="pixel-btn-primary w-full">
+        <Button type="submit" disabled={isLoading} className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 w-full">
           {isLoading ? <><IconLoader2 className="mr-2 h-4 w-4 animate-spin" /> {progressMessage || 'Researching track...'}</> : <><IconFileMusic className="mr-2 h-4 w-4" /> Check for copyright</>}
         </Button>
       )}
 
       {autoStart && isLoading && (
-         <div className="pixel-corners border border-cow-purple/40 bg-cow-purple/5 p-8 text-center">
-          <IconLoader2 className="mx-auto h-10 w-10 animate-spin text-cow-purple" />
-          <p className="mt-4 font-minecraftia text-sm font-semibold">{progressMessage || 'Looney is researching this track...'}</p>
+         <div className=" border border-primary/40 bg-primary/5 p-8 text-center">
+          <IconLoader2 className="mx-auto h-10 w-10 animate-spin text-primary" />
+          <p className="mt-4 text-sm font-semibold">{progressMessage || 'Looney is researching this track...'}</p>
           {initialResource && <p className="mt-2 truncate text-xs text-muted-foreground">{initialResource.title}</p>}
           <p className="mt-2 text-xs text-muted-foreground">This can take a few minutes while sources are checked.</p>
         </div>
diff --git a/src/components/LooneyHistorySection.tsx b/src/components/LooneyHistorySection.tsx
index cf012e83..ec78da78 100644
--- a/src/components/LooneyHistorySection.tsx
+++ b/src/components/LooneyHistorySection.tsx
@@ -76,14 +76,14 @@ const LooneyHistorySection = ({ activeJobId, onSelectRecord }: LooneyHistorySect
   const historyRecords = records.filter((record) => !isRunning(record));
 
   return (
-    <section className="pixel-corners mx-auto mt-8 w-full max-w-6xl min-w-0 overflow-hidden border-2 border-foreground/10 bg-card p-5 shadow-sm sm:p-7">
+    <section className=" mx-auto mt-8 w-full max-w-6xl min-w-0 overflow-hidden border-2 border-foreground/10 bg-card p-5 shadow-sm sm:p-7">
       <div className="flex flex-wrap items-start justify-between gap-3">
          <div className="flex items-center gap-3">
-          <div className="pixel-corners flex h-10 w-10 shrink-0 items-center justify-center bg-cow-purple/15 text-cow-purple">
+          <div className=" flex h-10 w-10 shrink-0 items-center justify-center bg-primary/15 text-primary">
             <IconHistory className="h-6 w-6" />
           </div>
           <div>
-            <h2 className="font-minecraftia text-lg">Check history</h2>
+            <h2 className="text-lg">Check history</h2>
             <p className="mt-1 text-sm text-muted-foreground">Jobs continue on the server while this tab is closed.</p>
           </div>
         </div>
@@ -96,16 +96,16 @@ const LooneyHistorySection = ({ activeJobId, onSelectRecord }: LooneyHistorySect
 
       <div className="mt-6 grid min-w-0 gap-5 md:grid-cols-2">
         <div className="min-w-0">
-           <h3 className="mb-3 flex items-center gap-2 font-minecraftia text-sm"><IconActivity className="inline-flex h-4 w-4 shrink-0 text-cow-purple" /> Running checks</h3>
+           <h3 className="mb-3 flex items-center gap-2 text-sm"><IconActivity className="inline-flex h-4 w-4 shrink-0 text-primary" /> Running checks</h3>
           {runningRecords.length === 0 ? (
-            <p className="pixel-corners border border-border/70 bg-muted/20 p-4 text-sm text-muted-foreground">No checks are currently running.</p>
+            <p className=" border border-border/70 bg-muted p-4 text-sm text-muted-foreground">No checks are currently running.</p>
           ) : (
             <div className="space-y-2">
               {runningRecords.map((record) => (
-                <div key={record.jobId} className="pixel-corners border border-cow-purple/30 bg-cow-purple/5 p-3">
+                <div key={record.jobId} className=" border border-primary/30 bg-primary/5 p-3">
                   <div className="flex min-w-0 items-center justify-between gap-3">
                     <span className="min-w-0 break-words text-sm font-medium">{record.sourceLabel}</span>
-                    <span className="shrink-0 text-xs uppercase tracking-wide text-cow-purple">{record.status}</span>
+                    <span className="shrink-0 text-xs uppercase tracking-wide text-primary">{record.status}</span>
                   </div>
                   <p className="mt-1 text-xs text-muted-foreground">{record.progress || `Started ${formatDate(record.createdAt)}`}</p>
                 </div>
@@ -115,9 +115,9 @@ const LooneyHistorySection = ({ activeJobId, onSelectRecord }: LooneyHistorySect
         </div>
 
         <div className="min-w-0">
-           <h3 className="mb-3 flex items-center gap-2 font-minecraftia text-sm"><IconClock className="inline-flex h-4 w-4 shrink-0 text-cow-purple" /> Previous checks</h3>
+           <h3 className="mb-3 flex items-center gap-2 text-sm"><IconClock className="inline-flex h-4 w-4 shrink-0 text-primary" /> Previous checks</h3>
           {historyRecords.length === 0 ? (
-            <p className="pixel-corners border border-border/70 bg-muted/20 p-4 text-sm text-muted-foreground">Your completed checks will appear here.</p>
+            <p className=" border border-border/70 bg-muted p-4 text-sm text-muted-foreground">Your completed checks will appear here.</p>
           ) : (
             <div className="space-y-2">
               {historyRecords.map((record) => (
@@ -126,7 +126,7 @@ const LooneyHistorySection = ({ activeJobId, onSelectRecord }: LooneyHistorySect
                   type="button"
                   onClick={() => { if (!record.result) return; onSelectRecord?.(record); }}
                   disabled={!record.result}
-                  className="pixel-corners w-full border border-border/70 bg-muted/20 p-3 text-left transition-colors hover:border-cow-purple/50 disabled:cursor-default disabled:hover:border-border/70"
+                  className=" w-full border border-border/70 bg-muted p-3 text-left transition-colors hover:border-primary/50 disabled:cursor-default disabled:hover:border-border/70"
                 >
                   <div className="flex items-center justify-between gap-3">
                     <span className="min-w-0 break-words text-sm font-medium">{record.sourceLabel}</span>
diff --git a/src/components/LooneyResultDisplay.tsx b/src/components/LooneyResultDisplay.tsx
index 133660ec..f7a58551 100644
--- a/src/components/LooneyResultDisplay.tsx
+++ b/src/components/LooneyResultDisplay.tsx
@@ -16,13 +16,13 @@ const hasContent = (value: LooneyValue | undefined) => {
 const SourceLink = ({ value, spotify = false, label }: { value: string; spotify?: boolean; label?: string }) => {
   let iconUrl = '';
   try { iconUrl = `${new URL(value).origin}/favicon.ico`; } catch { /* fallback icon below */ }
-  return <a href={value} target="_blank" rel="noreferrer" title={value} className={`pixel-corners inline-flex max-w-full items-center gap-2 border px-3 py-2 text-sm font-semibold text-white ${spotify ? 'border-[#1ed760] bg-[#1ed760] hover:border-[#1fbd57] hover:bg-[#1fbd57]' : 'border-cow-purple/60 bg-cow-purple hover:border-cow-purple-dark hover:bg-cow-purple-dark'}`}><span className="pixel-corners relative flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden bg-white/90 text-cow-purple"><IconExternalLink className="h-3 w-3" />{iconUrl && <img src={iconUrl} alt="" className="absolute inset-0 h-4 w-4 bg-white object-contain" onError={(event) => { event.currentTarget.style.display = 'none'; }} />}</span><span className="min-w-0 truncate">{spotify ? 'Open in Spotify' : label || hostLabel(value)}</span>{spotify ? <IconBrandSpotify className="h-4 w-4 shrink-0" /> : <IconExternalLink className="h-4 w-4 shrink-0" />}</a>;
+  return <a href={value} target="_blank" rel="noreferrer" title={value} className={` inline-flex max-w-full items-center gap-2 border px-3 py-2 text-sm font-semibold text-white ${spotify ? 'border-[#1ed760] bg-[#1ed760] hover:border-[#1fbd57] hover:bg-[#1fbd57]' : 'border-primary/60 bg-primary hover:border-primary-dark hover:bg-primary/90'}`}><span className=" relative flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden bg-white/90 text-primary"><IconExternalLink className="h-3 w-3" />{iconUrl && <img src={iconUrl} alt="" className="absolute inset-0 h-4 w-4 bg-white object-contain" onError={(event) => { event.currentTarget.style.display = 'none'; }} />}</span><span className="min-w-0 truncate">{spotify ? 'Open in Spotify' : label || hostLabel(value)}</span>{spotify ? <IconBrandSpotify className="h-4 w-4 shrink-0" /> : <IconExternalLink className="h-4 w-4 shrink-0" />}</a>;
 };
 
 const ResultValue = ({ value, linkLabel }: { value: LooneyValue; linkLabel?: string }) => {
   const text = primitive(value);
   if (text !== null) return isUrl(text) ? <SourceLink value={text} label={linkLabel} spotify={/open\.spotify\.com/i.test(text)} /> : <span className="break-words whitespace-pre-wrap">{text}</span>;
-  if (Array.isArray(value)) return <div className="min-w-0 space-y-2">{value.map((item, index) => <div key={index} className="pixel-corners min-w-0 break-words border border-border/60 bg-muted/30 p-3"><ResultValue value={item} /></div>)}</div>;
+  if (Array.isArray(value)) return <div className="min-w-0 space-y-2">{value.map((item, index) => <div key={index} className=" min-w-0 break-words border border-border/60 bg-muted p-3"><ResultValue value={item} /></div>)}</div>;
   const objectLabel = Object.entries(value || {}).find(([key, item]) => sourceLabelKeys.includes(key.toLowerCase()) && primitive(item) !== null)?.[1];
   const objectLinkLabel = objectLabel === undefined ? undefined : primitive(objectLabel) || undefined;
   return <div className="min-w-0 space-y-2">{Object.entries(value || {}).map(([key, item]) => <div key={key} className="min-w-0 flex flex-col gap-1 sm:flex-row sm:gap-3"><span className="shrink-0 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{labelize(key)}</span><span className="min-w-0 break-words"><ResultValue value={item} linkLabel={objectLinkLabel} /></span></div>)}</div>;
@@ -30,7 +30,7 @@ const ResultValue = ({ value, linkLabel }: { value: LooneyValue; linkLabel?: str
 
 const ResultSection = ({ title, value, warning = false }: { title: string; value?: LooneyValue; warning?: boolean }) => {
   if (!hasContent(value)) return null;
-  return <section className={`pixel-corners min-w-0 border p-4 ${warning ? 'border-amber-500/40 bg-amber-500/5' : 'border-border bg-background/70'}`}><h3 className={`mb-3 font-minecraftia text-xs font-semibold uppercase tracking-wide ${warning ? 'text-amber-700 dark:text-amber-300' : 'text-cow-purple'}`}>{title}</h3><div className="min-w-0 break-words text-sm leading-6 text-foreground/85"><ResultValue value={value} /></div></section>;
+  return <section className={` min-w-0 border p-4 ${warning ? 'border-amber-500/40 bg-amber-500/5' : 'border-border bg-background'}`}><h3 className={`mb-3 text-xs font-semibold uppercase tracking-wide ${warning ? 'text-amber-700 dark:text-amber-300' : 'text-primary'}`}>{title}</h3><div className="min-w-0 break-words text-sm leading-6 text-foreground/85"><ResultValue value={value} /></div></section>;
 };
 
 const TrackDetails = ({ track }: { track?: { [key: string]: LooneyValue } }) => {
@@ -39,7 +39,7 @@ const TrackDetails = ({ track }: { track?: { [key: string]: LooneyValue } }) =>
   if (!entries.length) return null;
   const trackLabel = entries.find(([key]) => sourceLabelKeys.includes(key.toLowerCase()))?.[1];
   const trackLinkLabel = trackLabel === undefined ? undefined : primitive(trackLabel) || undefined;
-  return <div className="grid min-w-0 gap-3 sm:grid-cols-2">{entries.map(([key, value]) => { const raw = primitive(value) || ''; const parsedDate = key.toLowerCase().includes('date') ? new Date(raw) : null; const display = key.toLowerCase().includes('duration') && Number.isFinite(Number(raw)) ? `${Math.floor(Number(raw) / 60000)} min ${Math.round((Number(raw) % 60000) / 1000)} sec` : parsedDate && !Number.isNaN(parsedDate.getTime()) ? parsedDate.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) : raw; return <div key={key} className="pixel-corners min-w-0 border border-border/70 bg-muted/20 p-3"><p className="text-xs uppercase tracking-wide text-muted-foreground">{labelize(key)}</p><div className="mt-1 break-words font-medium">{isUrl(raw) ? <SourceLink value={raw} label={trackLinkLabel} spotify={/open\.spotify\.com/i.test(raw)} /> : display}</div></div>; })}</div>;
+  return <div className="grid min-w-0 gap-3 sm:grid-cols-2">{entries.map(([key, value]) => { const raw = primitive(value) || ''; const parsedDate = key.toLowerCase().includes('date') ? new Date(raw) : null; const display = key.toLowerCase().includes('duration') && Number.isFinite(Number(raw)) ? `${Math.floor(Number(raw) / 60000)} min ${Math.round((Number(raw) % 60000) / 1000)} sec` : parsedDate && !Number.isNaN(parsedDate.getTime()) ? parsedDate.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) : raw; return <div key={key} className=" min-w-0 border border-border/70 bg-muted p-3"><p className="text-xs uppercase tracking-wide text-muted-foreground">{labelize(key)}</p><div className="mt-1 break-words font-medium">{isUrl(raw) ? <SourceLink value={raw} label={trackLinkLabel} spotify={/open\.spotify\.com/i.test(raw)} /> : display}</div></div>; })}</div>;
 };
 
 interface LooneyResultDisplayProps { result: LooneyResult; sourceType?: 'file' | 'spotify'; sourceLabel?: string; onClose?: () => void; }
@@ -48,9 +48,9 @@ const LooneyResultDisplay = ({ result, sourceType = 'file', sourceLabel, onClose
   const status = result.research?.status || 'complete';
   const title = sourceType === 'file' && sourceLabel ? sourceLabel : result.request?.track?.title || result.request?.track?.name || 'Track analysis';
   const spotify = sourceType === 'spotify';
-  return <article className="pixel-corners min-w-0 overflow-hidden border-2 border-cow-purple/40 bg-card shadow-sm">
-     <div className="border-b border-border bg-muted/25 p-5 sm:p-7"><div className="flex min-w-0 flex-wrap items-start justify-between gap-4"><div className="min-w-0"><div className="flex flex-wrap items-center gap-3">{status === 'complete' ? <IconCircleCheck className="h-6 w-6 text-green-500" /> : status === 'partial' ? <IconAlertTriangle className="h-6 w-6 text-yellow-500" /> : <IconShieldCheck className="h-6 w-6 text-cow-purple" />}<span className="font-jetbrains-mono text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">{labelize(status)} check</span><span className="pixel-corners border border-border px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">{spotify ? 'Spotify link' : 'Audio file'}</span></div><h2 className="mt-4 break-words font-minecraftia text-xl leading-relaxed sm:text-2xl">{String(title)}</h2>{sourceLabel && sourceLabel !== title && (spotify && isUrl(sourceLabel) ? <div className="mt-3"><SourceLink value={sourceLabel} spotify /></div> : <p className="mt-2 break-all text-xs text-muted-foreground">{sourceLabel}</p>)}</div>{onClose && <button type="button" onClick={onClose} className="shrink-0 text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground">Close result</button>}</div>{result.research?.summary && <p className="mt-4 max-w-3xl break-words text-sm leading-6 text-muted-foreground">{result.research.summary}</p>}</div>
-    <div className={`grid min-w-0 gap-0 ${spotify ? 'lg:grid-cols-[1.15fr_0.85fr]' : 'lg:grid-cols-[0.85fr_1.15fr]'}`}><div className="min-w-0 space-y-4 p-5 sm:p-7"><div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-cow-purple">{spotify ? <IconShieldCheck className="h-4 w-4" /> : <IconFileMusic className="h-4 w-4" />}{spotify ? 'Assessment' : 'File check result'}</div><ResultSection title="Usage assessment" value={result.research?.usage_assessment} /><ResultSection title="Rights and licensing findings" value={result.research?.matches} /><ResultSection title="Warnings and caveats" value={result.research?.warnings} warning /></div><div className="min-w-0 space-y-4 border-t border-border bg-muted/15 p-5 sm:border-l-0 sm:p-7 lg:border-l lg:border-t-0"><div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-cow-purple">{spotify ? <IconLink className="h-4 w-4" /> : <IconFileMusic className="h-4 w-4" />}{spotify ? 'Track details' : 'File details'}</div><TrackDetails track={result.request?.track} /><ResultSection title="Sources" value={result.research?.sources} /><ResultSection title="Official licensing contacts" value={result.research?.official_licensing_contacts} /></div></div>
+  return <article className=" min-w-0 overflow-hidden border-2 border-primary/40 bg-card shadow-sm">
+     <div className="border-b border-border bg-muted p-5 sm:p-7"><div className="flex min-w-0 flex-wrap items-start justify-between gap-4"><div className="min-w-0"><div className="flex flex-wrap items-center gap-3">{status === 'complete' ? <IconCircleCheck className="h-6 w-6 text-green-500" /> : status === 'partial' ? <IconAlertTriangle className="h-6 w-6 text-yellow-500" /> : <IconShieldCheck className="h-6 w-6 text-primary" />}<span className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">{labelize(status)} check</span><span className=" border border-border px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">{spotify ? 'Spotify link' : 'Audio file'}</span></div><h2 className="mt-4 break-words text-xl leading-relaxed sm:text-2xl">{String(title)}</h2>{sourceLabel && sourceLabel !== title && (spotify && isUrl(sourceLabel) ? <div className="mt-3"><SourceLink value={sourceLabel} spotify /></div> : <p className="mt-2 break-all text-xs text-muted-foreground">{sourceLabel}</p>)}</div>{onClose && <button type="button" onClick={onClose} className="shrink-0 text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground">Close result</button>}</div>{result.research?.summary && <p className="mt-4 max-w-3xl break-words text-sm leading-6 text-muted-foreground">{result.research.summary}</p>}</div>
+    <div className={`grid min-w-0 gap-0 ${spotify ? 'lg:grid-cols-[1.15fr_0.85fr]' : 'lg:grid-cols-[0.85fr_1.15fr]'}`}><div className="min-w-0 space-y-4 p-5 sm:p-7"><div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary">{spotify ? <IconShieldCheck className="h-4 w-4" /> : <IconFileMusic className="h-4 w-4" />}{spotify ? 'Assessment' : 'File check result'}</div><ResultSection title="Usage assessment" value={result.research?.usage_assessment} /><ResultSection title="Rights and licensing findings" value={result.research?.matches} /><ResultSection title="Warnings and caveats" value={result.research?.warnings} warning /></div><div className="min-w-0 space-y-4 border-t border-border bg-muted p-5 sm:border-l-0 sm:p-7 lg:border-l lg:border-t-0"><div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary">{spotify ? <IconLink className="h-4 w-4" /> : <IconFileMusic className="h-4 w-4" />}{spotify ? 'Track details' : 'File details'}</div><TrackDetails track={result.request?.track} /><ResultSection title="Sources" value={result.research?.sources} /><ResultSection title="Official licensing contacts" value={result.research?.official_licensing_contacts} /></div></div>
   </article>;
 };
 
diff --git a/src/components/LooneyRunningCheckDialog.tsx b/src/components/LooneyRunningCheckDialog.tsx
index 0ba1b460..3a0d52c8 100644
--- a/src/components/LooneyRunningCheckDialog.tsx
+++ b/src/components/LooneyRunningCheckDialog.tsx
@@ -9,12 +9,12 @@ interface LooneyRunningCheckDialogProps {
 }
 
 const LooneyRunningCheckDialog = ({ record, onClose }: LooneyRunningCheckDialogProps) => <Dialog open={!!record} onOpenChange={(open) => !open && onClose()}>
-  <DialogContent className="w-[calc(100%-2rem)] max-w-md pixel-corners border-2 border-cow-purple">
+  <DialogContent className="w-[calc(100%-2rem)] max-w-md  border-2 border-primary">
     <DialogHeader>
-      <DialogTitle className="flex items-center gap-3 font-minecraftia text-base leading-relaxed"><IconActivity className="h-5 w-5 text-cow-purple" /> Check already running</DialogTitle>
+      <DialogTitle className="flex items-center gap-3 text-base leading-relaxed"><IconActivity className="h-5 w-5 text-primary" /> Check already running</DialogTitle>
       <DialogDescription className="break-words pt-2">This source already has an active Looney check. Starting another one would duplicate the work.</DialogDescription>
     </DialogHeader>
-    {record && <div className="min-w-0 space-y-4"><div className="pixel-corners border border-cow-purple/30 bg-cow-purple/5 p-4"><p className="break-words font-semibold">{record.sourceLabel}</p><p className="mt-2 break-words text-sm text-muted-foreground">{record.progress || 'Looney is researching this source.'}</p></div><Link to={`/gappa/check/${encodeURIComponent(record.jobId)}`} onClick={onClose} className="pixel-corners inline-flex w-full items-center justify-center gap-2 bg-cow-purple px-4 py-3 text-sm font-semibold text-white hover:bg-cow-purple-dark">Open running check <IconArrowUpRight className="h-4 w-4" /></Link></div>}
+    {record && <div className="min-w-0 space-y-4"><div className=" border border-primary/30 bg-primary/5 p-4"><p className="break-words font-semibold">{record.sourceLabel}</p><p className="mt-2 break-words text-sm text-muted-foreground">{record.progress || 'Looney is researching this source.'}</p></div><Link to={`/gappa/check/${encodeURIComponent(record.jobId)}`} onClick={onClose} className=" inline-flex w-full items-center justify-center gap-2 bg-primary px-4 py-3 text-sm font-semibold text-white hover:bg-primary/90">Open running check <IconArrowUpRight className="h-4 w-4" /></Link></div>}
   </DialogContent>
 </Dialog>;
 
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f5944f77..94a1fd0d 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-import { IconChevronDown, IconMenu2, IconX, IconSun, IconMoon, IconSkull, IconExternalLink } from '@tabler/icons-react';
-import { ThemeToggle } from './ThemeToggle';
+import { IconChevronDown, IconMenu2, IconExternalLink } from '@tabler/icons-react';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -17,10 +16,8 @@ import {
 } from "@/components/ui/collapsible";
 import { useIsMobile } from '@/hooks/use-mobile';
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; // Keep for now in case it's a dependency of drawer
-import { Toggle } from "@/components/ui/toggle";
-import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
+import { Drawer, DrawerContent, DrawerTrigger, DrawerTitle, DrawerDescription } from "@/components/ui/drawer";
 import Logo from './Logo';
-import PixelSvgIcon from './PixelSvgIcon';
 import AuthDialog from './auth/AuthDialog'; // Added for auth
 import UserMenu from './auth/UserMenu'; // Added for auth
 import { useAuth } from '@/hooks/useAuth'; // Added for auth
@@ -69,7 +66,7 @@ const mainLinks: (NavLink | NavDropdown)[] = [
 // Small badge for marking new/updated links
 function TagBadge({ label }: { label: string }) {
   return (
-    <span className="inline-flex items-center px-1.5 py-0.5 rounded bg-cow-purple text-white text-[10px] leading-none uppercase tracking-wide">
+    <span className="inline-flex items-center px-1.5 py-0.5 rounded bg-primary text-white text-[10px] leading-none uppercase tracking-wide">
       {label}
     </span>
   );
@@ -82,10 +79,6 @@ const Navbar = () => {
   const [scrollProgress, setScrollProgress] = useState(0);
   const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
   const [openMobileCollapsible, setOpenMobileCollapsible] = useState<string | null>(null);
-  const [theme, setTheme] = useState<'light' | 'dark'>(() => {
-    return localStorage.getItem('theme') as 'light' | 'dark' ||
-      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-  });
   const isMobile = useIsMobile();
   const [authDialogOpen, setAuthDialogOpen] = useState(false); // Added for auth
   const { user, loading, signOut } = useAuth(); // Added for auth
@@ -116,25 +109,6 @@ const Navbar = () => {
     setIsDrawerOpen(false);
   }, [location.pathname]);
 
-  const toggleTheme = () => {
-    const newTheme = theme === 'dark' ? 'light' : 'dark';
-    setTheme(newTheme);
-    localStorage.setItem('theme', newTheme);
-    if (newTheme === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  };
-
-  useEffect(() => {
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  }, [theme]);
-
   const displayName = profile?.username || user?.user_metadata?.full_name || user?.email?.split('@')[0] || 'User';
   const safeAvatarUrl = profile?.avatar_url || user?.user_metadata?.avatar_url;
 
@@ -206,9 +180,9 @@ const Navbar = () => {
               <Logo size={isMobile ? "sm" : "md"} />
             </div>
             {!isMobile && (
-              <span className="hidden md:inline font-minecraftia leading-none">Render<span className="text-cow-purple">Dragon</span></span>
+              <span className="hidden md:inline font-minecraftia leading-none">Render<span className="text-primary">Dragon</span></span>
             )}
-            {isMobile && <span className="font-minecraftia">R<span className="text-cow-purple">D</span></span>}
+            {isMobile && <span className="font-minecraftia">R<span className="text-primary">D</span></span>}
           </Link>
 
           <nav className="hidden md:flex items-center space-x-6">
@@ -250,7 +224,7 @@ const Navbar = () => {
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       align="end"
-                      className="w-56 bg-popover border border-border z-50 pixel-corners"
+                      className="w-56 bg-popover border border-border z-50 "
                       onMouseLeave={() => setActiveDropdown(null)}
                     >
                       <DropdownMenuGroup>
@@ -261,7 +235,7 @@ const Navbar = () => {
                                 href={subLink.path}
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                className={`flex items-center gap-1 px-2 py-2 cursor-pointer font-sans text-sm pixel-corners`}
+                                className={`flex items-center gap-1 px-2 py-2 cursor-pointer font-sans text-sm `}
                                 onClick={() => setActiveDropdown(null)}
                               >
                                 <span>{subLink.name}</span>
@@ -273,7 +247,7 @@ const Navbar = () => {
                             ) : (
                               <Link
                                 to={subLink.path}
-                                className={`flex items-center gap-1 px-2 py-2 cursor-pointer font-sans text-sm pixel-corners ${isLinkActive(subLink.path) ? 'text-primary bg-accent/50' : ''}`}
+                                className={`flex items-center gap-1 px-2 py-2 cursor-pointer font-sans text-sm  ${isLinkActive(subLink.path) ? 'text-primary bg-accent' : ''}`}
                                 onClick={() => setActiveDropdown(null)}
                               >
                                 {/* sub link name */}
@@ -303,14 +277,12 @@ const Navbar = () => {
               ) : (
                 <Button
                   onClick={() => setAuthDialogOpen(true)}
-                  className="pixel-btn-primary"
+                  className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
                 >
                   Sign In
                 </Button>
               )}
             </div>
-            {/* Desktop Theme Toggle */}
-            <ThemeToggle className="hidden md:block" />
 
             {/* Mobile Menu Trigger */}
             <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
@@ -325,6 +297,8 @@ const Navbar = () => {
                 </Button>
               </DrawerTrigger>
               <DrawerContent className="h-[90vh] rounded-t-xl bg-background border-t border-border">
+                <DrawerTitle className="sr-only">Navigation menu</DrawerTitle>
+                <DrawerDescription className="sr-only">Browse RenderDragon pages and tools</DrawerDescription>
                 <div className="px-4 py-6 max-h-[calc(100%-60px)] overflow-auto">
                   <div className="flex items-center justify-between mb-6">
                     <Link
@@ -335,7 +309,7 @@ const Navbar = () => {
                       <div className="w-8 h-8 flex items-center justify-center font-bold text-xs">
                         <Logo size="sm" />
                       </div>
-                      <span className="font-sans">Render<span className="text-cow-purple">dragon</span></span>
+                      <span className="font-sans">Render<span className="text-primary">dragon</span></span>
                     </Link>
                   </div>
 
@@ -416,7 +390,7 @@ const Navbar = () => {
                             {safeAvatarUrl && (
                               <AvatarImage src={safeAvatarUrl} alt="User avatar" referrerPolicy="no-referrer" />
                             )}
-                            <AvatarFallback className="bg-cow-purple text-white text-xs">
+                            <AvatarFallback className="bg-primary text-white text-xs">
                               {getInitials(displayName)}
                             </AvatarFallback>
                           </Avatar>
@@ -428,7 +402,7 @@ const Navbar = () => {
                         <Button
                           onClick={() => { handleShowFavorites(); setIsDrawerOpen(false); }}
                           variant="outline"
-                          className="w-full pixel-corners font-sans"
+                          className="w-full  font-sans"
                         >
                           My Favorites
                         </Button>
@@ -438,7 +412,7 @@ const Navbar = () => {
                             setIsDrawerOpen(false);
                           }}
                           variant="outline"
-                          className="w-full pixel-corners font-sans"
+                          className="w-full  font-sans"
                         >
                           Sign Out
                         </Button>
@@ -449,46 +423,17 @@ const Navbar = () => {
                           setAuthDialogOpen(true);
                           setIsDrawerOpen(false); // Close drawer when opening auth dialog
                         }}
-                        className="w-full pixel-btn-primary font-sans"
+                        className="w-full inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 font-sans"
                       >
                         Sign In
                       </Button>
                     )}
                   </div>
                 </div>
-
-                <div className="absolute bottom-0 left-0 right-0 p-4 flex justify-center border-t border-border bg-background">
-                  <Toggle
-                    pressed={theme === 'dark'}
-                    onPressedChange={toggleTheme}
-                    className="w-full flex items-center justify-center gap-2 py-2 font-sans"
-                  >
-                    {theme === 'dark' ? (
-                      <>
-                        <PixelSvgIcon name="moon" className="h-5 w-5" />
-                        <span>Dark Mode</span>
-                      </>
-                    ) : (
-                      <>
-                        <PixelSvgIcon name="sun" className="h-5 w-5" />
-                        <span>Light Mode</span>
-                      </>
-                    )}
-                  </Toggle>
-                </div>
               </DrawerContent>
             </Drawer>
           </div>
         </div>
-
-        {scrolled && (
-          <div className="absolute bottom-0 left-0 w-full h-[2px] bg-background/20 z-20">
-            <div
-              className="h-full bg-cow-purple transition-all duration-300 animate-pulse-neon"
-              style={{ width: `${scrollProgress * 100}%` }}
-            ></div>
-          </div>
-        )}
       </header>
 
       <AuthDialog
diff --git a/src/components/Partnership.tsx b/src/components/Partnership.tsx
index 8323c970..f5134a55 100644
--- a/src/components/Partnership.tsx
+++ b/src/components/Partnership.tsx
@@ -40,7 +40,7 @@ const partners = [
 const Partnership = () => {
   return (
     <section className="relative py-20 md:py-28 bg-background overflow-hidden">
-      <div className="absolute inset-0 pointer-events-none cow-grid-bg opacity-50" />
+      <div className="absolute inset-0 pointer-events-none cow-grid-bg opacity-60" />
 
       <div className="relative container mx-auto px-4">
         <motion.div
@@ -50,12 +50,10 @@ const Partnership = () => {
           transition={{ duration: 0.6 }}
           className="text-center mb-14 md:mb-16 max-w-3xl mx-auto"
         >
-          <h2
-            className="font-minecraftia text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 text-foreground leading-tight"
-          >
-            Our <span className="text-cow-purple">Partners</span>
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-4 text-foreground">
+            Our <span className="text-primary">Partners</span>
           </h2>
-          <p className="font-jetbrains-mono text-xl md:text-2xl text-foreground/70 leading-tight">
+          <p className="text-lg md:text-xl text-muted-foreground">
             Communities we work with to make RenderDragon better for everyone.
           </p>
         </motion.div>
@@ -75,11 +73,11 @@ const Partnership = () => {
                 href={partner.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="block h-full pixel-card bg-card border-2 border-border hover:border-cow-purple p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-cow-purple/20"
+                className="block h-full rounded-xl border border-border bg-card p-6 transition-all duration-300 hover:-translate-y-1 hover:border-primary/60"
               >
                 <div className="flex flex-col items-center text-center h-full">
                   <div className="relative mb-5">
-                    <div className="w-24 h-24 border-2 border-cow-purple pixel-corners overflow-hidden group-hover:scale-105 transition-transform">
+                    <div className="w-24 h-24 rounded-xl border border-border overflow-hidden group-hover:scale-105 transition-transform">
                       <img
                         src={partner.logo}
                         alt={`${partner.name} logo`}
@@ -87,14 +85,14 @@ const Partnership = () => {
                         loading="lazy"
                       />
                     </div>
-                    <div className="absolute -bottom-1 -right-1 bg-cow-purple p-1.5 border-2 border-card pixel-corners">
-                      <IconArrowRight className="w-3.5 h-3.5 text-white" />
+                    <div className="absolute -bottom-1 -right-1 chamfer bg-primary p-1.5 text-primary-foreground">
+                      <IconArrowRight className="w-3.5 h-3.5" />
                     </div>
                   </div>
-                  <h3 className="font-minecraftia text-2xl text-foreground uppercase tracking-wider mb-2">
+                  <h3 className="text-xl font-medium text-foreground mb-2">
                     {partner.name}
                   </h3>
-                  <p className="font-jetbrains-mono text-base text-foreground/70 leading-snug flex-grow">
+                  <p className="text-sm text-muted-foreground leading-relaxed flex-grow">
                     {partner.description}
                   </p>
                 </div>
@@ -112,9 +110,9 @@ const Partnership = () => {
         >
           <a
             href="/contact"
-            className="pixel-btn-secondary inline-block text-base md:text-lg"
+            className="inline-flex items-center chamfer border border-border px-5 py-2.5 text-base font-medium text-foreground transition-colors hover:bg-accent"
           >
-            Become a Partner
+            Become a partner
           </a>
         </motion.div>
       </div>
@@ -122,4 +120,4 @@ const Partnership = () => {
   );
 };
 
-export default React.memo(Partnership); 
\ No newline at end of file
+export default React.memo(Partnership);
diff --git a/src/components/PixelSvgIcon.tsx b/src/components/PixelSvgIcon.tsx
index fdc76803..58c620fd 100644
--- a/src/components/PixelSvgIcon.tsx
+++ b/src/components/PixelSvgIcon.tsx
@@ -96,6 +96,12 @@ l195 0 0 203 c0 145 3 206 12 215 18 18 1251 17 1267 -1z m-3801 -2730 l2
       <path d="M4 4h16v2H4V4zm0 2h2v10H4V6zm14 0h2v10h-2V6zM8 8h2v2H8V8zm6 0h2v2h-2V8zM6 18h12v2H6v-2zm8-6h2v2h-2v-2zm-6 0h2v2H8v-2z"/>
     </svg>
   ),
+  sound: (
+    <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 2H3v20h18V2H4zm15 2v16H5V4h14zm-6 2h-2v2h2V6zm-5 4h8v6h-2v-4h-4v4H8v-6zm8 6H8v2h8v-2z" fill="currentColor"/></svg>
+  ),
+  icons: (
+    <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 3H2v18h20V3H4zm16 2v14H4V5h16zm-6 4h-2v2h-2v2H8v2H6v2h2v-2h2v-2h2v-2h2v2h2v2h2v-2h-2v-2h-2V9zM8 7H6v2h2V7z" fill="currentColor"/></svg>
+  ),
 };
 
 const PixelSvgIcon: React.FC<PixelSvgIconProps> = ({ name, className }) => {
diff --git a/src/components/PopularTools.tsx b/src/components/PopularTools.tsx
index c1ce23c3..a7030619 100644
--- a/src/components/PopularTools.tsx
+++ b/src/components/PopularTools.tsx
@@ -54,7 +54,7 @@ const itemVariants = {
 const PopularTools = () => {
   return (
     <section className="relative py-20 md:py-28 bg-background">
-      <div className="absolute inset-0 pointer-events-none cow-grid-bg opacity-20" />
+      <div className="absolute inset-0 pointer-events-none cow-grid-bg opacity-60" />
 
       <div className="relative container mx-auto px-4">
         <motion.div
@@ -64,12 +64,10 @@ const PopularTools = () => {
           viewport={{ once: true }}
           transition={{ duration: 0.5 }}
         >
-          <h2
-            className="font-minecraftia text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 text-foreground leading-tight"
-          >
-            Creator <span className="text-cow-purple">Tools</span>
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-4 text-foreground">
+            Creator <span className="text-primary">Tools</span>
           </h2>
-          <p className="font-jetbrains-mono text-xl md:text-2xl text-foreground/70 leading-tight">
+          <p className="text-lg md:text-xl text-muted-foreground">
             Built for the boring parts so you can focus on the fun.
           </p>
         </motion.div>
@@ -83,27 +81,40 @@ const PopularTools = () => {
         >
           {tools.map((tool) => (
             <motion.div key={tool.id} variants={itemVariants}>
-                <Link
-                  to={tool.path}
-                   className={`group relative block h-full pixel-card bg-card hover:bg-cow-purple/5 border-2 border-border hover:border-cow-purple p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-cow-purple/20 ${tool.backgroundImage ? 'overflow-hidden' : ''}`}
-                 >
-                   {tool.backgroundImage && <>
-                     <img src={tool.backgroundImage} alt="" aria-hidden="true" width={800} height={450} loading="lazy" decoding="async" className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
-                     <div aria-hidden="true" className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_35%,rgba(0,0,0,0.55)_100%)] opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
-                   </>}
-                  <div className="flex items-start justify-between mb-5">
-                   <div className="relative z-10 w-12 h-12 bg-cow-purple/15 border-2 border-cow-purple pixel-corners flex items-center justify-center group-hover:scale-110 group-hover:-rotate-6 transition-transform duration-300">
-                     <tool.icon className={`h-6 w-6 text-cow-purple transition-opacity duration-150 ${tool.hoverIcon || tool.hoverImage ? 'group-hover:opacity-0' : ''}`} stroke={2.5} />
-                    {'hoverIcon' in tool && tool.hoverIcon && <tool.hoverIcon className="absolute h-6 w-6 text-red-500 opacity-0 transition-opacity duration-150 group-hover:opacity-100" stroke={2.5} />}
-                    {'hoverImage' in tool && tool.hoverImage && <img src={tool.hoverImage} alt="" loading="lazy" decoding="async" className="absolute h-7 w-7 rounded-sm object-cover opacity-0 transition-opacity duration-150 group-hover:opacity-100" />}
+              <Link
+                to={tool.path}
+                className={`group relative block h-full rounded-xl border border-border bg-card p-6 transition-all duration-300 hover:-translate-y-1 hover:border-primary/60 ${tool.backgroundImage ? 'overflow-hidden' : ''}`}
+              >
+                {tool.backgroundImage && (
+                  <div
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-x-0 top-0 h-24 overflow-hidden rounded-t-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+                  >
+                    <img
+                      src={tool.backgroundImage}
+                      alt=""
+                      width={800}
+                      height={450}
+                      loading="lazy"
+                      decoding="async"
+                      className="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-b from-transparent via-card/30 to-card" />
                   </div>
-                   <IconArrowRight className="relative z-10 w-5 h-5 text-cow-purple opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all" />
+                )}
+                <div className="flex items-start justify-between mb-5">
+                  <div className={`relative z-10 w-12 h-12 rounded-xl bg-primary/10 border border-border flex items-center justify-center transition-all duration-300 group-hover:scale-105 ${tool.backgroundImage ? 'group-hover:bg-card group-hover:backdrop-blur-sm' : ''}`}>
+                    <tool.icon className={`h-6 w-6 text-primary transition-opacity duration-150 ${tool.hoverIcon || tool.hoverImage ? 'group-hover:opacity-0' : ''}`} stroke={2} />
+                    {'hoverIcon' in tool && tool.hoverIcon && <tool.hoverIcon className="absolute h-6 w-6 text-red-500 opacity-0 transition-opacity duration-150 group-hover:opacity-100" stroke={2} />}
+                    {'hoverImage' in tool && tool.hoverImage && <img src={tool.hoverImage} alt="" loading="lazy" decoding="async" className="absolute h-7 w-7 rounded-md object-cover opacity-0 transition-opacity duration-150 group-hover:opacity-100" />}
+                  </div>
+                  <IconArrowRight className="relative z-10 w-5 h-5 text-primary opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all" />
                 </div>
 
-                 <h3 className="relative z-10 font-jetbrains-mono text-xl md:text-2xl text-foreground mb-2 tracking-wide uppercase">
+                <h3 className="relative z-10 text-lg md:text-xl font-medium text-foreground mb-2">
                   {tool.title}
                 </h3>
-                 <p className="relative z-10 font-jetbrains-mono text-base text-foreground/70 leading-snug">
+                <p className="relative z-10 text-sm md:text-base text-muted-foreground leading-relaxed">
                   {tool.description}
                 </p>
               </Link>
diff --git a/src/components/Testimonials.tsx b/src/components/Testimonials.tsx
index 6285986f..3fff3007 100644
--- a/src/components/Testimonials.tsx
+++ b/src/components/Testimonials.tsx
@@ -74,9 +74,9 @@ const Testimonials = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5 }}
-            className="font-minecraftia text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 text-foreground leading-tight"
+            className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-4 text-foreground"
           >
-            What <span className="text-cow-purple">Creators</span> Say
+            What <span className="text-primary">Creators</span> Say
           </motion.h2>
 
           <motion.p
@@ -84,7 +84,7 @@ const Testimonials = () => {
             whileInView={{ opacity: 1 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5, delay: 0.2 }}
-            className="font-jetbrains-mono text-xl md:text-2xl text-foreground/70 leading-tight"
+            className="text-lg md:text-xl text-muted-foreground"
           >
             Don't take our word for it — hear it from the people making the content.
           </motion.p>
@@ -101,12 +101,12 @@ const Testimonials = () => {
             <motion.div
               key={testimonial.id}
               variants={item}
-              className="pixel-card bg-card border-2 border-border p-6 relative"
+              className="rounded-xl border border-border bg-card p-6 relative"
             >
-              <IconQuote className="absolute top-4 right-4 text-cow-purple/15 w-12 h-12" />
+              <IconQuote className="absolute top-4 right-4 text-primary/15 w-12 h-12" />
 
-              <div className="flex items-center gap-4 mb-5 pb-5 border-b-2 border-dashed border-border relative">
-                <div className="w-14 h-14 overflow-hidden border-2 border-cow-purple pixel-corners">
+              <div className="flex items-center gap-4 mb-5 pb-5 border-b border-dashed border-border relative">
+                <div className="w-14 h-14 rounded-xl overflow-hidden border border-border">
                   <img
                     src={testimonial.avatar}
                     alt={testimonial.name}
@@ -118,17 +118,17 @@ const Testimonials = () => {
                   />
                 </div>
                 <div>
-                  <h3 className="font-jetbrains-mono text-xl text-foreground uppercase tracking-wider">
+                  <h3 className="text-lg font-medium text-foreground">
                     {testimonial.name}
                   </h3>
-                  <p className="font-jetbrains-mono text-sm text-cow-purple">
+                  <p className="text-sm text-primary">
                     {testimonial.role}
                   </p>
                 </div>
               </div>
 
               <blockquote>
-                <p className="font-jetbrains-mono text-lg md:text-xl text-foreground/85 leading-snug">
+                <p className="text-base md:text-lg text-foreground/90 leading-relaxed">
                   "{testimonial.content}"
                 </p>
               </blockquote>
@@ -140,4 +140,4 @@ const Testimonials = () => {
   );
 };
 
-export default React.memo(Testimonials);
\ No newline at end of file
+export default React.memo(Testimonials);
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
deleted file mode 100644
index bdb55cde..00000000
--- a/src/components/ThemeToggle.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import PixelSvgIcon from './PixelSvgIcon';
-
-export function ThemeToggle({ className }: { className?: string }) {
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const storedTheme = localStorage.getItem('theme');
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const resolvedTheme = (storedTheme && ['light', 'dark'].includes(storedTheme))
-      ? (storedTheme as 'light' | 'dark')
-      : (prefersDark ? 'dark' : 'light');
-    setTheme(resolvedTheme);
-    document.documentElement.classList.toggle('dark', resolvedTheme === 'dark');
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
-
-  const toggleTheme = () => {
-    const newTheme = theme === 'light' ? 'dark' : 'light';
-    setTheme(newTheme);
-    localStorage.setItem('theme', newTheme);
-    document.documentElement.classList.toggle('dark', newTheme === 'dark');
-  };
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={toggleTheme}
-      className={cn(
-        'relative overflow-hidden transition-colors rounded-full w-10 h-10',
-        className
-      )}
-      aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
-      style={{ transform: 'none' }}
-    >
-      <span className="absolute inset-0 flex items-center justify-center">
-        <span className="flex items-center justify-center w-full h-full transition-all duration-300 absolute top-0 left-0" style={{ zIndex: theme === 'light' ? 2 : 1, opacity: theme === 'light' ? 1 : 0, transform: theme === 'light' ? 'scale(1) rotate(0deg)' : 'scale(0) rotate(-90deg)' }}>
-          <PixelSvgIcon name="sun" className="h-5 w-5" />
-        </span>
-        <span className="flex items-center justify-center w-full h-full transition-all duration-300 absolute top-0 left-0" style={{ zIndex: theme === 'dark' ? 2 : 1, opacity: theme === 'dark' ? 1 : 0, transform: theme === 'dark' ? 'scale(1) rotate(0deg)' : 'scale(0) rotate(90deg)' }}>
-          <PixelSvgIcon name="moon" className="h-5 w-5" />
-        </span>
-      </span>
-      <span className="sr-only">Toggle theme</span>
-    </Button>
-  );
-}
-
-export default ThemeToggle;
diff --git a/src/components/TrustBar.tsx b/src/components/TrustBar.tsx
index 6f4cf31a..db4f314f 100644
--- a/src/components/TrustBar.tsx
+++ b/src/components/TrustBar.tsx
@@ -9,8 +9,8 @@ const items = [
 
 const TrustBar = () => {
   return (
-    <section className="relative bg-cow-dark border-y-4 border-cow-purple">
-      <div className="absolute inset-0 pointer-events-none cow-grid-bg opacity-40" />
+    <section className="relative border-y border-border bg-background">
+      <div className="absolute inset-0 pointer-events-none cow-grid-bg opacity-60" />
       <div className="relative container mx-auto px-4 sm:px-6 py-6 md:py-7">
         <div className="grid grid-cols-3 gap-4 sm:gap-6 md:gap-8">
           {items.map((item) => (
@@ -18,14 +18,14 @@ const TrustBar = () => {
               key={item.label}
               className="flex items-center justify-center gap-3"
             >
-              <div className="flex-shrink-0 w-11 h-11 bg-cow-purple/20 border-2 border-cow-purple pixel-corners flex items-center justify-center">
-                <item.icon className="w-5 h-5 text-cow-purple" stroke={2.5} />
+              <div className="flex-shrink-0 w-11 h-11 rounded-xl bg-primary/10 border border-border flex items-center justify-center">
+                <item.icon className="w-5 h-5 text-primary" stroke={2} />
               </div>
               <div className="text-left min-w-0">
-                <div className="font-jetbrains-mono text-base sm:text-lg md:text-xl text-foreground uppercase tracking-wide leading-none truncate">
+                <div className="text-base sm:text-lg font-medium text-foreground leading-none truncate">
                   {item.label}
                 </div>
-                <div className="font-jetbrains-mono text-xs sm:text-sm text-foreground/60 leading-none mt-1 truncate">
+                <div className="text-xs sm:text-sm text-muted-foreground leading-none mt-1 truncate">
                   {item.sub}
                 </div>
               </div>
diff --git a/src/components/ValueProps.tsx b/src/components/ValueProps.tsx
index 25dfa34d..ab25a6c4 100644
--- a/src/components/ValueProps.tsx
+++ b/src/components/ValueProps.tsx
@@ -25,7 +25,7 @@ const cards = [
     tagIcons: [IconMusic, IconWaveSine, IconPhoto, IconTypography],
     link: "/resources",
     cta: "Browse resources",
-    accent: "from-cow-purple/10 to-cow-purple/5",
+    accent: "from-primary/10 to-primary/5",
   },
   {
     icon: IconWand,
@@ -57,13 +57,13 @@ const ValueProps = () => {
       <div className="relative container mx-auto px-4">
         <div className="text-center mb-14 md:mb-20 max-w-3xl mx-auto">
           <h2
-            className="font-minecraftia text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 text-foreground leading-tight"
+            className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 text-foreground leading-tight"
           >
             Everything you need.
             <br />
-            <span className="text-cow-purple">Nothing you don't.</span>
+            <span className="text-primary">Nothing you don't.</span>
           </h2>
-          <p className="font-jetbrains-mono text-xl md:text-2xl text-foreground/70 leading-tight">
+          <p className="text-xl md:text-2xl text-foreground/70 leading-tight">
             Three pillars. One hub. Built so you can stop searching and start shipping.
           </p>
         </div>
@@ -79,21 +79,21 @@ const ValueProps = () => {
             <motion.div key={card.title} variants={item}>
               <Link
                 to={card.link}
-                className="group block h-full pixel-card bg-card hover:bg-card/80 border-2 border-border hover:border-cow-purple p-7 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-cow-purple/20 relative overflow-hidden"
+                className="group block h-full rounded-xl border border-border bg-card p-4 bg-card hover:bg-card border-2 border-border hover:border-primary p-7 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-primary/20 relative overflow-hidden"
               >
                 <div className={`absolute inset-0 bg-gradient-to-br ${card.accent} opacity-0 group-hover:opacity-100 transition-opacity`} />
 
                 <div className="relative">
                   <div className="flex items-start mb-5">
-                    <div className="w-14 h-14 bg-cow-purple/15 border-2 border-cow-purple pixel-corners flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
-                      <card.icon className="w-7 h-7 text-cow-purple" stroke={2} />
+                    <div className="w-14 h-14 bg-primary/15 border-2 border-primary  flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                      <card.icon className="w-7 h-7 text-primary" stroke={2} />
                     </div>
                   </div>
 
-                  <h3 className="font-jetbrains-mono text-2xl md:text-3xl text-foreground mb-3 tracking-wide uppercase">
+                  <h3 className="text-2xl md:text-3xl text-foreground mb-3 tracking-wide uppercase">
                     {card.title}
                   </h3>
-                  <p className="font-jetbrains-mono text-base md:text-lg text-foreground/70 mb-6 leading-snug">
+                  <p className="text-base md:text-lg text-foreground/70 mb-6 leading-snug">
                     {card.description}
                   </p>
 
@@ -103,7 +103,7 @@ const ValueProps = () => {
                       return (
                         <span
                           key={tag}
-                          className="inline-flex items-center gap-1.5 font-jetbrains-mono text-sm text-foreground/80 bg-background border-2 border-border pixel-corners px-2.5 py-1"
+                          className="inline-flex items-center gap-1.5 text-sm text-foreground/80 bg-background border-2 border-border  px-2.5 py-1"
                         >
                           <Icon className="w-3.5 h-3.5" />
                           {tag}
@@ -112,7 +112,7 @@ const ValueProps = () => {
                     })}
                   </div>
 
-                  <div className="flex items-center gap-2 font-jetbrains-mono text-lg text-cow-purple uppercase tracking-wider group-hover:gap-3 transition-all pt-2 border-t-2 border-dashed border-border">
+                  <div className="flex items-center gap-2 text-lg text-primary uppercase tracking-wider group-hover:gap-3 transition-all pt-2 border-t-2 border-dashed border-border">
                     {card.cta}
                     <IconArrowRight className="w-5 h-5" />
                   </div>
diff --git a/src/components/WhySection.tsx b/src/components/WhySection.tsx
index e5f7d1d3..529b36f9 100644
--- a/src/components/WhySection.tsx
+++ b/src/components/WhySection.tsx
@@ -2,22 +2,20 @@ import React from "react"
 import { motion } from 'framer-motion'
 
 const stats = [
-  { value: "5000+", label: "Free Resources", sub: "music, SFX, fonts, presets, more" },
-  { value: "12+", label: "Creator Tools", sub: "generators, checkers, renderers" },
+  { value: "5000+", label: "Free resources", sub: "music, SFX, fonts, presets, more" },
+  { value: "12+", label: "Creator tools", sub: "generators, checkers, renderers" },
   { value: "0", label: "Ads. Paywalls.", sub: "just open and use" },
 ]
 
 const WhySection = () => {
   return (
-    <section className="py-20 md:py-28 bg-background border-y-4 border-cow-purple cow-grid-bg">
+    <section className="py-20 md:py-28 bg-background border-y border-border">
       <div className="container mx-auto px-4">
         <div className="text-center mb-14 md:mb-20 max-w-3xl mx-auto">
-          <h2
-            className="font-minecraftia text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 text-foreground leading-tight"
-          >
-            Why <span className="text-cow-purple">RenderDragon</span>?
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-4 text-foreground">
+            Why <span className="text-primary">RenderDragon</span>?
           </h2>
-          <p className="font-jetbrains-mono text-xl md:text-2xl text-foreground/70 leading-tight">
+          <p className="text-lg md:text-xl text-muted-foreground">
             Every other "free resource" site makes you sign up, watch an ad, or sit through a download timer. We don't.
           </p>
         </div>
@@ -30,15 +28,15 @@ const WhySection = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, amount: 0.3 }}
               transition={{ duration: 0.5, delay: i * 0.08, ease: [0.16, 1, 0.3, 1] }}
-              className="relative bg-background border-2 border-cow-purple/40 pixel-corners p-7 md:p-8"
+              className="relative rounded-xl border border-border bg-card p-7 md:p-8"
             >
-              <div className="font-minecraftia text-4xl md:text-5xl text-cow-purple mb-3 leading-none">
+              <div className="text-4xl md:text-5xl font-bold text-primary mb-3 leading-none tracking-tight">
                 {stat.value}
               </div>
-              <div className="font-jetbrains-mono text-lg md:text-xl text-foreground uppercase tracking-wider mb-1">
+              <div className="text-lg md:text-xl font-medium text-foreground mb-1">
                 {stat.label}
               </div>
-              <div className="font-jetbrains-mono text-base text-foreground/60 leading-tight">
+              <div className="text-sm text-muted-foreground">
                 {stat.sub}
               </div>
             </motion.div>
diff --git a/src/components/admin/AdminBlogsManager.tsx b/src/components/admin/AdminBlogsManager.tsx
index 324b8974..176a634d 100644
--- a/src/components/admin/AdminBlogsManager.tsx
+++ b/src/components/admin/AdminBlogsManager.tsx
@@ -59,17 +59,17 @@ export default function AdminBlogsManager() {
         <div className="space-y-6">
             <div className="flex justify-between items-center">
                 <div>
-                    <h2 className="text-2xl font-jetbrains-mono mb-2">Blog Posts</h2>
+                    <h2 className="text-2xl mb-2">Blog Posts</h2>
                     <p className="text-muted-foreground text-sm">Manage your blog content.</p>
                 </div>
-                <Button asChild className="bg-cow-purple hover:bg-cow-purple/90 pixel-corners">
+                <Button asChild className="bg-primary hover:bg-primary/90 ">
                     <Link to="/admin/blogs/new">
                         <IconPlus className="mr-2 h-4 w-4" /> New Post
                     </Link>
                 </Button>
             </div>
 
-            <Card className="pixel-corners bg-card/50">
+            <Card className=" bg-card">
                 <CardContent className="p-0">
                     {loading ? (
                         <div className="p-8 flex justify-center"><IconLoader2 className="animate-spin" /></div>
@@ -87,9 +87,9 @@ export default function AdminBlogsManager() {
                             </TableHeader>
                             <TableBody>
                                 {blogs.map(blog => (
-                                    <TableRow key={blog.id} className="border-border/50 group hover:bg-muted/50">
+                                    <TableRow key={blog.id} className="border-border/50 group hover:bg-muted">
                                         <TableCell className="font-medium">
-                                            <Link to={`/admin/blogs/${blog.id}`} className="hover:underline hover:text-cow-purple">
+                                            <Link to={`/admin/blogs/${blog.id}`} className="hover:underline hover:text-primary">
                                                 {blog.title}
                                             </Link>
                                             <div className="text-xs text-muted-foreground font-mono">{blog.slug}</div>
diff --git a/src/components/admin/AdminCreatorPacksManager.tsx b/src/components/admin/AdminCreatorPacksManager.tsx
index 1c089b46..55856f6f 100644
--- a/src/components/admin/AdminCreatorPacksManager.tsx
+++ b/src/components/admin/AdminCreatorPacksManager.tsx
@@ -65,34 +65,34 @@ const AdminCreatorPacksManager = () => {
 
     if (isLoading) {
         return <div className="animate-pulse space-y-4">
-            <div className="h-20 bg-muted/20 rounded-xl" />
-            <div className="h-20 bg-muted/20 rounded-xl" />
+            <div className="h-20 bg-muted rounded-xl" />
+            <div className="h-20 bg-muted rounded-xl" />
         </div>;
     }
 
     return (
-        <section className="mt-12 bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 relative overflow-hidden">
-            <div className="absolute top-0 right-0 w-64 h-64 bg-cow-purple/5 rounded-full blur-3xl -z-10 transform translate-x-1/2 -translate-y-1/2" />
+        <section className="mt-12 bg-card backdrop-blur-sm border border-border/50 rounded-xl p-6 relative overflow-hidden">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl -z-10 transform translate-x-1/2 -translate-y-1/2" />
 
             <div className="flex items-center justify-between mb-6">
                 <div className="flex items-center gap-3">
-                    <IconPackage className="h-6 w-6 text-cow-purple" />
-                    <h2 className="text-2xl font-jetbrains-mono">Pending Creator Packs</h2>
+                    <IconPackage className="h-6 w-6 text-primary" />
+                    <h2 className="text-2xl ">Pending Creator Packs</h2>
                 </div>
-                <div className="bg-muted px-3 py-1 rounded-full text-sm font-medium">
+                <div className="bg-muted px-3 py-1 chamfer text-sm font-medium">
                     {pendingPacks.length} Pending
                 </div>
             </div>
 
             {pendingPacks.length === 0 ? (
-                <div className="text-center py-12 text-muted-foreground bg-muted/10 rounded-lg border border-dashed border-border/50">
+                <div className="text-center py-12 text-muted-foreground bg-muted rounded-lg border border-dashed border-border/50">
                     <IconPackage className="mx-auto h-8 w-8 mb-2 opacity-50" />
                     <p>No creator packs are pending review.</p>
                 </div>
             ) : (
                 <div className="space-y-4">
                     {pendingPacks.map(pack => (
-                        <div key={pack.id} className="flex flex-col md:flex-row md:items-center justify-between p-4 bg-background border border-border/50 rounded-lg hover:border-cow-purple/30 transition-colors">
+                        <div key={pack.id} className="flex flex-col md:flex-row md:items-center justify-between p-4 bg-background border border-border/50 rounded-lg hover:border-primary/30 transition-colors">
                             <div className="flex-1 min-w-0 mb-4 md:mb-0">
                                 <div className="flex items-center gap-2 mb-1">
                                     <h3 className="font-medium text-lg truncate">{pack.title}</h3>
@@ -106,7 +106,7 @@ const AdminCreatorPacksManager = () => {
                                 <div className="flex items-center gap-4 text-xs text-muted-foreground">
                                     <span>Submitted {formatDistanceToNow(new Date(pack.created_at), { addSuffix: true })}</span>
                                     {pack.external_link && (
-                                        <a href={pack.external_link} target="_blank" rel="noopener noreferrer" className="flex items-center hover:text-cow-purple transition-colors">
+                                        <a href={pack.external_link} target="_blank" rel="noopener noreferrer" className="flex items-center hover:text-primary transition-colors">
                                             <IconExternalLink className="w-3 h-3 mr-1" />
                                             View Source
                                         </a>
@@ -140,9 +140,9 @@ const AdminCreatorPacksManager = () => {
             )}
 
             <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-                <DialogContent className="pixel-corners">
+                <DialogContent className="">
                     <DialogHeader>
-                        <DialogTitle className="font-jetbrains-mono text-2xl">Reject Creator Pack</DialogTitle>
+                        <DialogTitle className="text-2xl">Reject Creator Pack</DialogTitle>
                         <DialogDescription>
                             Please provide a reason for rejecting this pack. The creator will see this message and can resubmit after making changes.
                         </DialogDescription>
@@ -153,19 +153,19 @@ const AdminCreatorPacksManager = () => {
                             placeholder="e.g., The external link is invalid, or the cover image violates our guidelines..."
                             value={rejectionReason}
                             onChange={(e) => setRejectionReason(e.target.value)}
-                            className="pixel-input min-h-[100px]"
+                            className="rounded-lg border border-input bg-background px-3 py-2 min-h-[100px]"
                         />
                     </div>
 
                     <DialogFooter>
-                        <Button variant="outline" onClick={() => setIsDialogOpen(false)} className="pixel-corners">
+                        <Button variant="outline" onClick={() => setIsDialogOpen(false)} className="">
                             Cancel
                         </Button>
                         <Button
                             variant="destructive"
                             onClick={handleReject}
                             disabled={!rejectionReason.trim()}
-                            className="pixel-corners"
+                            className=""
                         >
                             Confirm Rejection
                         </Button>
diff --git a/src/components/admin/AdminResourcesManager.tsx b/src/components/admin/AdminResourcesManager.tsx
index 5df663cc..0695aea7 100644
--- a/src/components/admin/AdminResourcesManager.tsx
+++ b/src/components/admin/AdminResourcesManager.tsx
@@ -129,14 +129,14 @@ const AdminResourcesManager = () => {
     <div className="space-y-6">
       {/* Migration Section */}
       <div className="mb-8">
-        <h3 className="text-lg font-jetbrains-mono mb-4">Data Migration</h3>
+        <h3 className="text-lg mb-4">Data Migration</h3>
         <ResourceMigration />
       </div>
 
       {/* Header */}
       <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
         <div>
-          <h2 className="text-2xl font-jetbrains-mono mb-2">Resources Manager</h2>
+          <h2 className="text-2xl mb-2">Resources Manager</h2>
           <p className="text-muted-foreground">
             Manage all resources in your database. Total: {resources.length} resources
           </p>
@@ -146,7 +146,7 @@ const AdminResourcesManager = () => {
             setEditingResource(undefined);
             setDialogOpen(true);
           }}
-          className="pixel-btn-primary"
+          className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
         >
           <IconPlus className="h-4 w-4 mr-2" />
           Add Resource
@@ -156,9 +156,9 @@ const AdminResourcesManager = () => {
       {/* Stats Cards */}
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
         {getResourceStats().map(({ category, count }) => (
-          <Card key={category} className="pixel-corners">
+          <Card key={category} className="">
             <CardContent className="p-4 text-center">
-              <p className="text-2xl font-bold text-cow-purple">{count}</p>
+              <p className="text-2xl font-bold text-primary">{count}</p>
               <p className="text-sm text-muted-foreground capitalize">{category}</p>
             </CardContent>
           </Card>
@@ -190,11 +190,11 @@ const AdminResourcesManager = () => {
       {/* Resources Grid */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {filteredResources.map((resource) => (
-          <Card key={resource.id} className="pixel-corners overflow-hidden">
+          <Card key={resource.id} className=" overflow-hidden">
             <CardHeader className="pb-3">
               <div className="flex items-start justify-between">
                 <div className="flex-1">
-                  <CardTitle className="text-lg font-jetbrains-mono mb-1">{resource.title}</CardTitle>
+                  <CardTitle className="text-lg mb-1">{resource.title}</CardTitle>
                   <div className="flex items-center gap-2 mb-2">
                     <Badge variant="secondary" className="text-xs">
                       {resource.category}
diff --git a/src/components/admin/BlogEditor.tsx b/src/components/admin/BlogEditor.tsx
index 925f5a63..a23fb874 100644
--- a/src/components/admin/BlogEditor.tsx
+++ b/src/components/admin/BlogEditor.tsx
@@ -118,13 +118,13 @@ export default function BlogEditor() {
             <div className="flex items-center justify-between">
                 <div className="flex items-center gap-4">
                     <Link to="/admin" className="text-muted-foreground hover:text-foreground"><IconArrowLeft /></Link>
-                    <h2 className="text-2xl font-jetbrains-mono">{id ? "Edit Blog" : "New Blog"}</h2>
+                    <h2 className="text-2xl ">{id ? "Edit Blog" : "New Blog"}</h2>
                 </div>
                 <div className="flex gap-2">
                     <Button variant="outline" onClick={() => setPreview(!preview)}>
                         <IconEye className="mr-2 h-4 w-4" /> {preview ? "Edit" : "Preview"}
                     </Button>
-                    <Button onClick={handleSave} disabled={saving} className="bg-cow-purple hover:bg-cow-purple/90">
+                    <Button onClick={handleSave} disabled={saving} className="bg-primary hover:bg-primary/90">
                         {saving ? <IconLoader2 className="mr-2 h-4 w-4 animate-spin" /> : <IconDeviceFloppy className="mr-2 h-4 w-4" />}
                         Save
                     </Button>
diff --git a/src/components/auth/AuthDialog.tsx b/src/components/auth/AuthDialog.tsx
index 1ab186ed..cdc8e8d3 100644
--- a/src/components/auth/AuthDialog.tsx
+++ b/src/components/auth/AuthDialog.tsx
@@ -118,9 +118,9 @@ const AuthDialog = ({ open, onOpenChange }: AuthDialogProps) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="pixel-corners max-w-md border-2 border-cow-purple">
+      <DialogContent className=" max-w-md border-2 border-primary">
         <DialogHeader>
-          <DialogTitle className="font-minecraftia text-center text-2xl">
+          <DialogTitle className="text-center text-2xl">
             {isLogin ? 'Sign In' : 'Create Account'}
           </DialogTitle>
         </DialogHeader>
@@ -143,7 +143,7 @@ const AuthDialog = ({ open, onOpenChange }: AuthDialogProps) => {
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="pixel-corners pl-10"
+                className=" pl-10"
                 placeholder="Enter your email"
                 required
               />
@@ -169,7 +169,7 @@ const AuthDialog = ({ open, onOpenChange }: AuthDialogProps) => {
                     type="text"
                     value={displayName}
                     onChange={(e) => setDisplayName(e.target.value)}
-                    className="pixel-corners pl-10"
+                    className=" pl-10"
                     placeholder="How others will see you"
                     required={!isLogin}
                   />
@@ -189,7 +189,7 @@ const AuthDialog = ({ open, onOpenChange }: AuthDialogProps) => {
                 type={showPassword ? 'text' : 'password'}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="pixel-corners pl-10 pr-10"
+                className=" pl-10 pr-10"
                 placeholder="Enter your password"
                 required
               />
@@ -224,7 +224,7 @@ const AuthDialog = ({ open, onOpenChange }: AuthDialogProps) => {
             >
               <Button
                 type="submit"
-                className="pixel-btn-primary w-full"
+                className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 w-full"
                 disabled={!isFormValid()}
               >
                 {loading ? (
@@ -255,7 +255,7 @@ const AuthDialog = ({ open, onOpenChange }: AuthDialogProps) => {
               type="button"
               variant="link"
               onClick={toggleMode}
-              className="text-sm text-cow-purple hover:text-cow-purple/80"
+              className="text-sm text-primary hover:text-primary/80"
             >
               Don't have an account? Sign up
             </Button>
@@ -264,7 +264,7 @@ const AuthDialog = ({ open, onOpenChange }: AuthDialogProps) => {
               type="button"
               variant="link"
               onClick={toggleMode}
-              className="text-sm text-cow-purple hover:text-cow-purple/80"
+              className="text-sm text-primary hover:text-primary/80"
             >
               Already have an account? Sign in
             </Button>
diff --git a/src/components/auth/OAuthProviders.tsx b/src/components/auth/OAuthProviders.tsx
index 8aa5cbb5..856aa5f5 100644
--- a/src/components/auth/OAuthProviders.tsx
+++ b/src/components/auth/OAuthProviders.tsx
@@ -23,7 +23,7 @@ export const OAuthProviders = () => {
             <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-4">
                 <Button
                     variant="outline"
-                    className="pixel-btn-secondary w-full"
+                    className="inline-flex items-center justify-center chamfer border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent w-full"
                     onClick={async () => {
                         setLoading(true);
                         const { error } = await signInWithGoogle();
@@ -43,7 +43,7 @@ export const OAuthProviders = () => {
                 </Button>
                 <Button
                     variant="outline"
-                    className="pixel-btn-secondary w-full"
+                    className="inline-flex items-center justify-center chamfer border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent w-full"
                     onClick={async () => {
                         setLoading(true);
                         const { error } = await signInWithGitHub();
@@ -63,7 +63,7 @@ export const OAuthProviders = () => {
                 </Button>
                 <Button
                     variant="outline"
-                    className="pixel-btn-secondary w-full"
+                    className="inline-flex items-center justify-center chamfer border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent w-full"
                     onClick={async () => {
                         setLoading(true);
                         const { error } = await signInWithDiscord();
diff --git a/src/components/auth/UserMenu.tsx b/src/components/auth/UserMenu.tsx
index a0f890e3..f67ba620 100644
--- a/src/components/auth/UserMenu.tsx
+++ b/src/components/auth/UserMenu.tsx
@@ -76,14 +76,14 @@ const UserMenu = ({ onShowFavorites }: UserMenuProps) => {
           >
             <Avatar className="h-8 w-8">
               {safeAvatarUrl && <AvatarImage src={safeAvatarUrl} alt="User avatar" referrerPolicy="no-referrer" />}
-              <AvatarFallback className="bg-cow-purple text-white text-xs">
+              <AvatarFallback className="bg-primary text-white text-xs">
                 {getInitials(displayName)}
               </AvatarFallback>
             </Avatar>
           </motion.div>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56 pixel-corners" align="end" forceMount>
+      <DropdownMenuContent className="w-56 " align="end" forceMount>
         <DropdownMenuLabel className="font-normal">
           <div className="flex flex-col space-y-1">
             <p className="text-sm font-medium leading-none">Account</p>
diff --git a/src/components/generators/MinecraftNametagGenerator.tsx b/src/components/generators/MinecraftNametagGenerator.tsx
index 7e96324a..55bf9115 100644
--- a/src/components/generators/MinecraftNametagGenerator.tsx
+++ b/src/components/generators/MinecraftNametagGenerator.tsx
@@ -52,12 +52,12 @@ const MinecraftNametagGenerator = () => {
               onChange={(e) => setPlayerName(e.target.value)}
               placeholder="Enter player name"
               maxLength={16}
-              className="pixel-corners"
+              className=""
             />
           </div>
           <div>
             <Label htmlFor="nametag-font">Font</Label>
-            <select id="nametag-font" value={fontChoice} onChange={(event) => setFontChoice(event.target.value as keyof typeof fontConfig)} className="pixel-input mt-2 w-full">
+            <select id="nametag-font" value={fontChoice} onChange={(event) => setFontChoice(event.target.value as keyof typeof fontConfig)} className="rounded-lg border border-input bg-background px-3 py-2 mt-2 w-full">
               {Object.entries(fontConfig).map(([value, config]) => <option key={value} value={value}>{config.label}</option>)}
             </select>
           </div>
@@ -65,11 +65,11 @@ const MinecraftNametagGenerator = () => {
       </div>
 
       <div className="space-y-4">
-        <h2 className="text-xl font-jetbrains-mono">Rendered Nametag</h2>
+        <h2 className="text-xl ">Rendered Nametag</h2>
         <div className="flex flex-col items-center gap-4">
           <Card 
             ref={nametagContainerRef}
-            className="px-4 py-2 pixel-corners bg-black/40 flex items-center justify-center min-w-[60px] h-12 border-0"
+            className="px-4 py-2  bg-black/40 flex items-center justify-center min-w-[60px] h-12 border-0"
           >
             <div className="flex items-center justify-center h-full">
               {playerName ? (
@@ -98,7 +98,7 @@ const MinecraftNametagGenerator = () => {
           <div className="flex gap-4 w-full">
             <Button 
               onClick={exportAsPNG} 
-              className="flex-1 pixel-btn-primary"
+              className="flex-1 inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
               disabled={!playerName}
             >
               Export as PNG
diff --git a/src/components/generators/TweetGenerator.tsx b/src/components/generators/TweetGenerator.tsx
index 6fcb45b5..92e24905 100644
--- a/src/components/generators/TweetGenerator.tsx
+++ b/src/components/generators/TweetGenerator.tsx
@@ -48,7 +48,7 @@ const TweetGenerator = () => {
               value={profilePicUrl}
               onChange={(e) => setProfilePicUrl(e.target.value)}
               placeholder="e.g., https://via.placeholder.com/48"
-              className="pixel-corners"
+              className=""
             />
           </div>
 
@@ -60,7 +60,7 @@ const TweetGenerator = () => {
               onChange={(e) => setUserName(e.target.value)}
               maxLength={50}
               placeholder="e.g., Elon Musk"
-              className="pixel-corners"
+              className=""
             />
           </div>
 
@@ -72,7 +72,7 @@ const TweetGenerator = () => {
               onChange={(e) => setUserHandle(e.target.value)}
               maxLength={15}
               placeholder="e.g., elonmusk"
-              className="pixel-corners"
+              className=""
             />
           </div>
 
@@ -84,7 +84,7 @@ const TweetGenerator = () => {
               onChange={(e) => setTweetText(e.target.value)}
               maxLength={280}
               placeholder="What's happening?"
-              className="pixel-corners"
+              className=""
               rows={3}
             />
           </div>
@@ -96,7 +96,7 @@ const TweetGenerator = () => {
               value={timestamp}
               onChange={(e) => setTimestamp(e.target.value)}
               placeholder="e.g., 3m ago"
-              className="pixel-corners"
+              className=""
             />
           </div>
 
@@ -107,7 +107,7 @@ const TweetGenerator = () => {
               value={viewsCount}
               onChange={(e) => setViewsCount(e.target.value)}
               placeholder="e.g., 1.5M Views"
-              className="pixel-corners"
+              className=""
             />
           </div>
 
@@ -123,7 +123,7 @@ const TweetGenerator = () => {
       </div>
 
       <div className="space-y-4">
-        <h2 className="text-xl font-jetbrains-mono">Twitter Preview</h2>
+        <h2 className="text-xl ">Twitter Preview</h2>
         <div
           ref={tweetPreviewRef}
           className="w-full max-w-xl"
@@ -171,10 +171,10 @@ const TweetGenerator = () => {
           </div>
         </div>
         <div className="flex gap-4 mt-4">
-          <Button onClick={() => setIsDarkMode(!isDarkMode)} className="flex-1 pixel-btn-primary">
+          <Button onClick={() => setIsDarkMode(!isDarkMode)} className="flex-1 inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
             Toggle Theme
           </Button>
-          <Button onClick={exportAsPNG} className="flex-1 pixel-btn-primary">
+          <Button onClick={exportAsPNG} className="flex-1 inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
             Export as PNG
           </Button>
         </div>
diff --git a/src/components/generators/YouTubeCommentGenerator.tsx b/src/components/generators/YouTubeCommentGenerator.tsx
index f0398748..d4f2a6dd 100644
--- a/src/components/generators/YouTubeCommentGenerator.tsx
+++ b/src/components/generators/YouTubeCommentGenerator.tsx
@@ -52,7 +52,7 @@ const YouTubeCommentGenerator = () => {
               value={avatarUrl}
               onChange={(e) => setAvatarUrl(e.target.value)}
               placeholder="Enter avatar URL"
-              className="pixel-corners"
+              className=""
             />
           </div>
 
@@ -63,7 +63,7 @@ const YouTubeCommentGenerator = () => {
               value={userName}
               onChange={(e) => setUserName(e.target.value)}
               placeholder="Enter user name"
-              className="pixel-corners"
+              className=""
             />
           </div>
 
@@ -74,7 +74,7 @@ const YouTubeCommentGenerator = () => {
               value={commentText}
               onChange={(e) => setCommentText(e.target.value)}
               placeholder="Enter comment"
-              className="pixel-corners"
+              className=""
             />
           </div>
 
@@ -85,7 +85,7 @@ const YouTubeCommentGenerator = () => {
               value={timeStamp}
               onChange={(e) => setTimeStamp(e.target.value)}
               placeholder="e.g., 2 hours ago"
-              className="pixel-corners"
+              className=""
             />
           </div>
 
@@ -99,10 +99,10 @@ const YouTubeCommentGenerator = () => {
           </div>
 
           <div className="flex gap-4">
-            <Button onClick={() => setIsDarkMode(!isDarkMode)} className="flex-1 pixel-btn-primary">
+            <Button onClick={() => setIsDarkMode(!isDarkMode)} className="flex-1 inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
               Toggle Theme
             </Button>
-            <Button onClick={exportAsPNG} className="flex-1 pixel-btn-primary">
+            <Button onClick={exportAsPNG} className="flex-1 inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
               Export as PNG
             </Button>
           </div>
@@ -110,7 +110,7 @@ const YouTubeCommentGenerator = () => {
       </div>
 
       <div className="space-y-4">
-        <h2 className="text-xl font-jetbrains-mono">YouTube Comment Preview</h2>
+        <h2 className="text-xl ">YouTube Comment Preview</h2>
         <div
           ref={commentCardRef}
           className="w-full max-w-xl"
@@ -165,10 +165,10 @@ const YouTubeCommentGenerator = () => {
           </div>
         </div>
         <div className="flex gap-4 mt-4">
-          <Button onClick={() => setIsDarkMode(!isDarkMode)} className="flex-1 pixel-btn-primary">
+          <Button onClick={() => setIsDarkMode(!isDarkMode)} className="flex-1 inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
             Toggle Theme
           </Button>
-          <Button onClick={exportAsPNG} className="flex-1 pixel-btn-primary">
+          <Button onClick={exportAsPNG} className="flex-1 inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
             Export as PNG
           </Button>
         </div>
diff --git a/src/components/profile/ImageUpload.tsx b/src/components/profile/ImageUpload.tsx
index d608169a..38064bc2 100644
--- a/src/components/profile/ImageUpload.tsx
+++ b/src/components/profile/ImageUpload.tsx
@@ -94,7 +94,7 @@ export const ImageUpload: React.FC<ImageUploadProps> = ({
                 variant="outline"
                 onClick={() => fileInputRef.current?.click()}
                 disabled={uploading}
-                className="pixel-corners"
+                className=""
             >
                 {uploading ? (
                     <IconLoader className="w-4 h-4 mr-2 animate-spin" />
diff --git a/src/components/profile/ProfileEditor.tsx b/src/components/profile/ProfileEditor.tsx
index c68bd587..46d1dfa1 100644
--- a/src/components/profile/ProfileEditor.tsx
+++ b/src/components/profile/ProfileEditor.tsx
@@ -78,7 +78,7 @@ const SortableLinkItem: React.FC<SortableLinkItemProps> = ({ link, updateLink, r
         <div
             ref={setNodeRef}
             style={style}
-            className="flex flex-col gap-3 p-4 border rounded-lg bg-card/50"
+            className="flex flex-col gap-3 p-4 border rounded-lg bg-card"
         >
             <div className="flex items-center gap-2">
                 <button
@@ -343,8 +343,8 @@ const ProfileEditor: React.FC = () => {
         <div className="flex flex-col md:flex-row gap-6 h-[calc(100vh-100px)]">
             {/* Editor Column */}
             <div className="flex-1 overflow-y-auto pr-1 space-y-6">
-                <div className="flex items-center justify-between sticky top-0 bg-background/95 backdrop-blur z-20 py-4 border-b rounded-t-lg mb-4">
-                    <h1 className="text-2xl font-jetbrains-mono px-2">Edit Profile</h1>
+                <div className="flex items-center justify-between sticky top-0 bg-background backdrop-blur z-20 py-4 border-b rounded-t-lg mb-4">
+                    <h1 className="text-2xl px-2">Edit Profile</h1>
                     <div className="flex gap-2 px-2">
                         <Button variant="ghost" size="icon" onClick={discardDraft} title="Discard Draft">
                             <IconRefresh className="w-4 h-4" />
@@ -353,11 +353,11 @@ const ProfileEditor: React.FC = () => {
                             <IconEye className="w-4 h-4 mr-1" /> Preview
                         </Button>
                         {showShare && (
-                            <Button variant="outline" size="sm" onClick={handleShare} className="pixel-btn-secondary">
+                            <Button variant="outline" size="sm" onClick={handleShare} className="inline-flex items-center justify-center chamfer border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent">
                                 <IconShare className="w-4 h-4 mr-2" /> Share
                             </Button>
                         )}
-                        <Button onClick={saveProfile} disabled={saving} className="pixel-btn-primary">
+                        <Button onClick={saveProfile} disabled={saving} className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
                             <IconDeviceFloppy className="w-4 h-4 mr-2" />
                             {saving ? 'Publishing...' : 'Publish'}
                         </Button>
@@ -653,10 +653,10 @@ const ProfileEditor: React.FC = () => {
 
             {/* Preview Column */}
             <div className={`
-        flex-1 bg-background/95 backdrop-blur border rounded-xl overflow-hidden shadow-2xl pixel-corners
+        flex-1 bg-background backdrop-blur border rounded-xl overflow-hidden shadow-2xl 
         ${previewMode ? 'fixed inset-0 z-50 md:static md:block' : 'hidden md:block'}
       `}>
-                <div className="bg-muted/80 backdrop-blur px-4 py-2 border-b flex justify-between items-center text-xs text-muted-foreground">
+                <div className="bg-muted backdrop-blur px-4 py-2 border-b flex justify-between items-center text-xs text-muted-foreground">
                     <span>Live Preview</span>
                     {previewMode && <Button size="sm" variant="ghost" onClick={() => setPreviewMode(false)}><IconX className="w-4 h-4" /></Button>}
                 </div>
diff --git a/src/components/profile/SvglPicker.tsx b/src/components/profile/SvglPicker.tsx
index 9dd5b5d0..583352f8 100644
--- a/src/components/profile/SvglPicker.tsx
+++ b/src/components/profile/SvglPicker.tsx
@@ -169,7 +169,7 @@ export function SvglPicker({ value, onChange }: SvglPickerProps) {
                                             className="justify-between"
                                         >
                                             <div className="flex items-center gap-3">
-                                                <div className="w-8 h-8 flex items-center justify-center bg-muted/50 rounded p-1">
+                                                <div className="w-8 h-8 flex items-center justify-center bg-muted rounded p-1">
                                                     <img
                                                         src={icon.fullUrl}
                                                         alt={icon.title}
diff --git a/src/components/resources/CreatorPackCard.tsx b/src/components/resources/CreatorPackCard.tsx
index 9e686b0a..3f267eaa 100644
--- a/src/components/resources/CreatorPackCard.tsx
+++ b/src/components/resources/CreatorPackCard.tsx
@@ -15,14 +15,14 @@ const CreatorPackCard = ({ pack }: CreatorPackCardProps) => {
     return (
         <Link to={`/creator-packs/${pack.slug}`}>
             <motion.div
-                className="pixel-card group cursor-pointer hover:border-primary transition-all duration-300 h-full flex flex-col overflow-hidden"
+                className="group h-full cursor-pointer overflow-hidden rounded-xl border border-border bg-card transition-all duration-300 hover:-translate-y-1 hover:border-primary/60 flex flex-col"
                 whileHover={{ y: -5 }}
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.2 }}
             >
                 {/* Cover Image */}
-                <div className="relative aspect-video bg-muted/20 rounded-md overflow-hidden mb-3">
+                <div className="relative aspect-video bg-muted rounded-md overflow-hidden mb-3">
                     {pack.cover_image_url ? (
                         <img
                             src={pack.cover_image_url}
@@ -51,7 +51,7 @@ const CreatorPackCard = ({ pack }: CreatorPackCardProps) => {
                 {pack.tags && pack.tags.length > 0 && (
                     <div className="flex flex-wrap gap-1 mb-3">
                         {pack.tags.slice(0, 3).map((tag) => (
-                            <span key={tag} className="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20">
+                            <span key={tag} className="text-xs px-2 py-0.5 chamfer bg-primary/10 text-primary border border-primary/20">
                                 {tag}
                             </span>
                         ))}
diff --git a/src/components/resources/CreatorPacksTab.tsx b/src/components/resources/CreatorPacksTab.tsx
index 94357416..30544bba 100644
--- a/src/components/resources/CreatorPacksTab.tsx
+++ b/src/components/resources/CreatorPacksTab.tsx
@@ -41,12 +41,12 @@ const CreatorPacksTab = () => {
                 {user && (
                     <div className="flex items-center gap-2">
                         <Link to="/creator-packs/manage">
-                            <Button variant="outline" className="pixel-corners font-geist">
+                            <Button variant="outline" className=" font-geist">
                                 Manage My Packs
                             </Button>
                         </Link>
                         <Link to="/creator-packs/new">
-                            <Button className="pixel-corners bg-cow-purple hover:bg-cow-purple/90 font-geist">
+                            <Button className=" bg-primary hover:bg-primary/90 font-geist">
                                 <IconPlus size={16} className="mr-2" />
                                 Upload Pack
                             </Button>
@@ -59,9 +59,9 @@ const CreatorPacksTab = () => {
             <div className="flex flex-wrap gap-2 mb-6">
                 <button
                     onClick={() => setSelectedTag(null)}
-                    className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors border ${selectedTag === null
+                    className={`px-3 py-1.5 chamfer text-sm font-medium transition-colors border ${selectedTag === null
                         ? 'bg-primary text-primary-foreground border-primary'
-                        : 'bg-muted/50 text-muted-foreground border-border hover:bg-muted font-geist'
+                        : 'bg-muted text-muted-foreground border-border hover:bg-muted font-geist'
                         }`}
                 >
                     All
@@ -70,9 +70,9 @@ const CreatorPacksTab = () => {
                     <button
                         key={tag}
                         onClick={() => setSelectedTag(tag)}
-                        className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors border ${selectedTag === tag
+                        className={`px-3 py-1.5 chamfer text-sm font-medium transition-colors border ${selectedTag === tag
                             ? 'bg-primary text-primary-foreground border-primary'
-                            : 'bg-muted/50 text-muted-foreground border-border hover:bg-muted font-geist'
+                            : 'bg-muted text-muted-foreground border-border hover:bg-muted font-geist'
                             }`}
                     >
                         {tag}
@@ -85,7 +85,7 @@ const CreatorPacksTab = () => {
                 <motion.div
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
-                    className="text-center py-20 bg-muted/5 rounded-xl border border-border/50 flex flex-col items-center justify-center p-6"
+                    className="text-center py-20 bg-muted rounded-xl border border-border/50 flex flex-col items-center justify-center p-6"
                 >
                     <IconPackage className="h-12 w-12 text-muted-foreground mb-4 opacity-50" />
                     <h3 className="text-xl font-geist mb-2 font-medium">No creator packs found</h3>
@@ -96,7 +96,7 @@ const CreatorPacksTab = () => {
                     </p>
                     {user && !selectedTag && (
                         <Link to="/creator-packs/new">
-                            <Button className="pixel-corners bg-cow-purple hover:bg-cow-purple/90">
+                            <Button className=" bg-primary hover:bg-primary/90">
                                 <IconPlus size={16} className="mr-2" />
                                 Upload Pack
                             </Button>
diff --git a/src/components/resources/DiscordPopup.tsx b/src/components/resources/DiscordPopup.tsx
index 43ae182a..2f7a4620 100644
--- a/src/components/resources/DiscordPopup.tsx
+++ b/src/components/resources/DiscordPopup.tsx
@@ -14,14 +14,14 @@ const DiscordPopup = ({ isOpen, onClose, onNeverShowAgain }: DiscordPopupProps)
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="pixel-corners bg-background border-primary text-white">
+      <DialogContent className="bg-background border-border">
         <motion.div
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
           transition={{ duration: 0.3 }}
         >
           <DialogHeader>
-            <DialogTitle className="font-minecraftia text-2xl text-primary">Join our Discord</DialogTitle>
+            <DialogTitle className="text-2xl text-primary">Join our Discord</DialogTitle>
             <DialogDescription className="text-muted-foreground">
               Join our Discord server to get the latest updates, share your creations, and connect with other creators.
             </DialogDescription>
@@ -32,11 +32,11 @@ const DiscordPopup = ({ isOpen, onClose, onNeverShowAgain }: DiscordPopupProps)
           <DialogFooter className="gap-2 sm:justify-center">
             <Button 
               onClick={() => window.open('https://discord.renderdragon.org', '_blank', 'noopener,noreferrer')}
-              className="pixel-corners bg-cow-purple hover:bg-cow-purple-dark"
+              className=" bg-primary hover:bg-primary/90"
             >
               Join Now
             </Button>
-            <Button onClick={onNeverShowAgain} variant="outline" className="pixel-corners">
+            <Button onClick={onNeverShowAgain} variant="outline" className="">
               Never Show Again
             </Button>
           </DialogFooter>
diff --git a/src/components/resources/DownloadWarningDialog.tsx b/src/components/resources/DownloadWarningDialog.tsx
index f51837dd..6a6691fb 100644
--- a/src/components/resources/DownloadWarningDialog.tsx
+++ b/src/components/resources/DownloadWarningDialog.tsx
@@ -32,7 +32,7 @@ const DownloadWarningDialog: React.FC<DownloadWarningDialogProps> = ({ isOpen, o
         <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
             <DialogContent className="sm:max-w-md">
                 <DialogHeader>
-                    <DialogTitle className="flex items-center gap-2 text-destructive font-minecraftia text-xl">
+                    <DialogTitle className="flex items-center gap-2 text-destructive text-xl">
                         <IconAlertTriangle className="h-5 w-5" />
                         External Link Warning
                     </DialogTitle>
@@ -49,18 +49,18 @@ const DownloadWarningDialog: React.FC<DownloadWarningDialogProps> = ({ isOpen, o
                     </DialogDescription>
                 </DialogHeader>
                 <DialogFooter className="flex-col sm:flex-row gap-2 mt-4">
-                    <Button variant="outline" onClick={onClose} className="pixel-corners w-full sm:w-auto">
+                    <Button variant="outline" onClick={onClose} className=" w-full sm:w-auto">
                         Cancel
                     </Button>
                     {isValid ? (
                         <a href={downloadUrl} target="_blank" rel="noopener noreferrer" className="w-full sm:w-auto" onClick={onClose}>
-                            <Button className="pixel-corners bg-cow-purple hover:bg-cow-purple/90 w-full sm:w-auto">
+                            <Button className=" bg-primary hover:bg-primary/90 w-full sm:w-auto">
                                 <IconExternalLink className="mr-2 h-4 w-4" />
                                 Continue to Download
                             </Button>
                         </a>
                     ) : (
-                        <Button disabled className="pixel-corners bg-cow-purple hover:bg-cow-purple/90 w-full sm:w-auto">
+                        <Button disabled className=" bg-primary hover:bg-primary/90 w-full sm:w-auto">
                             <IconExternalLink className="mr-2 h-4 w-4" />
                             Invalid URL
                         </Button>
diff --git a/src/components/resources/FavoritesSidebar.tsx b/src/components/resources/FavoritesSidebar.tsx
index 3e98e026..c4abec58 100644
--- a/src/components/resources/FavoritesSidebar.tsx
+++ b/src/components/resources/FavoritesSidebar.tsx
@@ -69,7 +69,7 @@ const FolderItem = ({
                 ref={setNodeRef}
                 className={cn(
                     "flex items-center justify-between group py-1.5 px-2 rounded-md cursor-pointer transition-colors mb-0.5",
-                    isSelected ? "bg-primary/20 text-primary" : "hover:bg-muted/50",
+                    isSelected ? "bg-primary/20 text-primary" : "hover:bg-muted",
                     isOver && "bg-primary/30 ring-2 ring-primary ring-inset",
                     level > 0 && "ml-4 border-l border-border pl-2"
                 )}
@@ -81,7 +81,7 @@ const FolderItem = ({
                             e.stopPropagation();
                             setIsOpen(!isOpen);
                         }}
-                        className={cn("p-0.5 rounded-sm hover:bg-muted/80 opacity-0 transition-opacity", hasChildren && "opacity-100")}
+                        className={cn("p-0.5 rounded-sm hover:bg-muted opacity-0 transition-opacity", hasChildren && "opacity-100")}
                         disabled={!hasChildren}
                     >
                         {isOpen ? <IconFolderOpen size={16} /> : <IconFolder size={16} />}
@@ -190,10 +190,10 @@ const FavoritesSidebar = ({
     }, [folders, rootFolders, searchQuery]);
 
     return (
-        <div className="flex flex-col h-full bg-card/50 border border-border/50 rounded-xl overflow-hidden pixel-corners backdrop-blur-sm">
-            <div className="p-4 border-b border-border/50 bg-muted/20">
+        <div className="flex flex-col h-full bg-card border border-border/50 rounded-xl overflow-hidden  backdrop-blur-sm">
+            <div className="p-4 border-b border-border/50 bg-muted">
                 <div className="flex items-center justify-between mb-4">
-                    <h3 className="font-jetbrains-mono text-xl font-medium">My Folders</h3>
+                    <h3 className="text-xl font-medium">My Folders</h3>
                     <Button size="icon" variant="ghost" onClick={onCreateFolder} className="h-8 w-8 hover:bg-primary/20 hover:text-primary transition-colors">
                         <IconPlus size={18} />
                     </Button>
@@ -205,7 +205,7 @@ const FavoritesSidebar = ({
                         placeholder="Search folders..."
                         value={searchQuery}
                         onChange={(e) => onSearchChange(e.target.value)}
-                        className="pl-9 h-9 bg-background/50 border-border/50 focus-visible:ring-primary/50 pixel-corners"
+                        className="pl-9 h-9 bg-background border-border/50 focus-visible:ring-primary/50 "
                     />
                 </div>
             </div>
@@ -227,7 +227,7 @@ const FavoritesSidebar = ({
                             ref={setRootNodeRef}
                             className={cn(
                                 "flex items-center gap-2 px-2 py-2 rounded-md cursor-pointer mb-2 transition-colors",
-                                selectedFolderId === null ? "bg-primary/20 text-primary font-medium" : "hover:bg-muted/50 text-muted-foreground",
+                                selectedFolderId === null ? "bg-primary/20 text-primary font-medium" : "hover:bg-muted text-muted-foreground",
                                 isOverRoot && "bg-primary/30 ring-2 ring-primary ring-inset"
                             )}
                             onClick={() => onSelectFolder(null)}
diff --git a/src/components/resources/FavoritesTab.tsx b/src/components/resources/FavoritesTab.tsx
index e63d7354..7eab0acd 100644
--- a/src/components/resources/FavoritesTab.tsx
+++ b/src/components/resources/FavoritesTab.tsx
@@ -295,7 +295,7 @@ const FavoritesTab = ({ onSelectResource }: FavoritesTabProps) => {
   if (isLoading) {
     return (
       <div className="flex flex-col md:flex-row gap-6">
-        <div className="w-full md:w-64 flex-shrink-0 animate-pulse bg-muted/20 h-96 rounded-xl" />
+        <div className="w-full md:w-64 flex-shrink-0 animate-pulse bg-muted h-96 rounded-xl" />
         <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
           {Array.from({ length: 6 }).map((_, idx) => (
             <ResourceCardSkeleton key={`fav-skel-${idx}`} />
@@ -332,11 +332,11 @@ const FavoritesTab = ({ onSelectResource }: FavoritesTabProps) => {
 
           <div className="flex-1 min-w-0 z-0">
             {zipProgress && (
-              <div className="flex items-center gap-3 mb-4 p-3 rounded-lg border border-border bg-muted/10">
+              <div className="flex items-center gap-3 mb-4 p-3 rounded-lg border border-border bg-muted">
                 <div className="flex-1">
                   <Progress
                     value={(zipProgress.completed / zipProgress.total) * 100}
-                    className="h-2 pixel-corners"
+                    className="h-2 "
                   />
                   <p className="text-xs mt-1 text-muted-foreground">
                     Downloading {zipProgress.completed}/{zipProgress.total} files...
@@ -346,7 +346,7 @@ const FavoritesTab = ({ onSelectResource }: FavoritesTabProps) => {
                   size="sm"
                   variant="outline"
                   onClick={handleCancelZip}
-                  className="pixel-corners shrink-0"
+                  className=" shrink-0"
                 >
                   Cancel
                 </Button>
@@ -356,10 +356,10 @@ const FavoritesTab = ({ onSelectResource }: FavoritesTabProps) => {
               <motion.div
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
-                className="text-center py-20 bg-muted/5 rounded-xl border border-border/50"
+                className="text-center py-20 bg-muted rounded-xl border border-border/50"
               >
                 <IconHeart className="mx-auto h-12 w-12 text-muted-foreground mb-4 opacity-50" />
-                <h3 className="text-xl font-jetbrains-mono mb-2 font-medium">No resources found</h3>
+                <h3 className="text-xl mb-2 font-medium">No resources found</h3>
                 <p className="text-muted-foreground">
                   {selectedFolderId
                     ? "This folder is currently empty. Drop some resources here!"
diff --git a/src/components/resources/FolderDialog.tsx b/src/components/resources/FolderDialog.tsx
index 03ca8c5e..ad583831 100644
--- a/src/components/resources/FolderDialog.tsx
+++ b/src/components/resources/FolderDialog.tsx
@@ -68,7 +68,7 @@ const FolderDialog = ({ isOpen, onClose, onSave, initialData, mode }: FolderDial
         <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle className="font-minecraftia text-2xl">{mode === 'create' ? 'Create New Folder' : 'Edit Folder'}</DialogTitle>
+                    <DialogTitle className="text-2xl">{mode === 'create' ? 'Create New Folder' : 'Edit Folder'}</DialogTitle>
                 </DialogHeader>
                 <form onSubmit={handleSubmit} className="space-y-6 pt-4">
                     <div className="space-y-2">
@@ -78,7 +78,7 @@ const FolderDialog = ({ isOpen, onClose, onSave, initialData, mode }: FolderDial
                             placeholder="e.g. My Awesome Assets"
                             value={name}
                             onChange={(e) => setName(e.target.value)}
-                            className="pixel-corners"
+                            className=""
                             autoFocus
                         />
                     </div>
@@ -91,7 +91,7 @@ const FolderDialog = ({ isOpen, onClose, onSave, initialData, mode }: FolderDial
                                 onClick={() => setColor(null)}
                                 className={cn(
                                     "w-6 h-6 rounded-full flex items-center justify-center border-2",
-                                    color === null ? "border-primary" : "border-transparent bg-muted/20"
+                                    color === null ? "border-primary" : "border-transparent bg-muted"
                                 )}
                                 title="Default"
                             >
@@ -114,10 +114,10 @@ const FolderDialog = ({ isOpen, onClose, onSave, initialData, mode }: FolderDial
                     </div>
 
                     <DialogFooter>
-                        <Button type="button" variant="outline" onClick={onClose} className="pixel-corners">
+                        <Button type="button" variant="outline" onClick={onClose} className="">
                             Cancel
                         </Button>
-                        <Button type="submit" disabled={!name.trim() || isSaving} className="pixel-corners">
+                        <Button type="submit" disabled={!name.trim() || isSaving} className="">
                             {isSaving ? 'Saving...' : mode === 'create' ? 'Create' : 'Save Changes'}
                         </Button>
                     </DialogFooter>
diff --git a/src/components/resources/FolderPickerPopover.tsx b/src/components/resources/FolderPickerPopover.tsx
index edaf3c5c..140af8bf 100644
--- a/src/components/resources/FolderPickerPopover.tsx
+++ b/src/components/resources/FolderPickerPopover.tsx
@@ -143,7 +143,7 @@ const FolderPickerPopover = ({
                         {/* No folder / unsorted option */}
                         <button
                             onClick={() => handleFolderClick(null)}
-                            className="w-full flex items-center gap-2 px-2.5 py-2 rounded-lg text-sm text-left hover:bg-muted/50 transition-colors"
+                            className="w-full flex items-center gap-2 px-2.5 py-2 rounded-lg text-sm text-left hover:bg-muted transition-colors"
                         >
                             <IconFolder size={15} className="text-muted-foreground flex-shrink-0" />
                             <span className="truncate text-muted-foreground">No folder</span>
@@ -163,7 +163,7 @@ const FolderPickerPopover = ({
                                         "w-full flex items-center gap-2 px-2.5 py-2 rounded-lg text-sm text-left transition-colors",
                                         isFull
                                             ? "opacity-50 cursor-not-allowed"
-                                            : "hover:bg-muted/50 cursor-pointer"
+                                            : "hover:bg-muted cursor-pointer"
                                     )}
                                 >
                                     <div
diff --git a/src/components/resources/McIconsBrowser.tsx b/src/components/resources/McIconsBrowser.tsx
index f2650154..2b58e9cc 100644
--- a/src/components/resources/McIconsBrowser.tsx
+++ b/src/components/resources/McIconsBrowser.tsx
@@ -3,8 +3,9 @@ import type { MouseEvent } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { ScrollArea } from '@/components/ui/scroll-area';
+
 import { IconChevronRight, IconChevronDown, IconFolder, IconFolderOpen, IconSearch, IconPhoto, IconX } from '@tabler/icons-react';
+import PixelSvgIcon from '@/components/PixelSvgIcon';
 
 interface McIconsBrowserProps {
   subcategories: string[];
@@ -107,8 +108,8 @@ const CategoryItem = ({
           flex items-center gap-1 py-1.5 px-2 rounded-md cursor-pointer
           transition-colors duration-150 group
           ${isSelected 
-            ? 'bg-cow-purple/20 text-cow-purple' 
-            : 'hover:bg-accent/50'
+            ? 'bg-primary/20 text-primary' 
+            : 'hover:bg-accent'
           }
         `}
         style={{ paddingLeft }}
@@ -143,7 +144,7 @@ const CategoryItem = ({
         <span className="text-sm truncate flex-grow">{formatCategoryName(node.name)}</span>
         
         {node.count !== undefined && (
-          <span className="text-xs text-muted-foreground bg-secondary/50 px-1.5 py-0.5 rounded">
+          <span className="text-xs text-primary bg-primary/10 px-1.5 py-0.5 rounded">
             {node.count}
           </span>
         )}
@@ -292,12 +293,12 @@ const McIconsBrowser = ({
   }, [subcategories, resourceCount]);
   
   return (
-    <div className="h-full flex flex-col bg-card/50 border border-border rounded-lg pixel-corners overflow-hidden">
+    <div className="h-full flex flex-col bg-card border border-border rounded-lg  overflow-hidden">
       <div className="p-3 border-b border-border">
-        <h3 className="text-sm font-jetbrains-mono text-muted-foreground mb-2 flex items-center gap-2">
-          <IconPhoto className="h-4 w-4 text-cow-purple" />
+        <div className="text-sm text-muted-foreground mb-2 flex items-center gap-2">
+          <PixelSvgIcon name="icons" className="h-4 w-4 text-primary" />
           MC Icons Browser
-        </h3>
+        </div>
         
         <div className="relative mb-2">
           <IconSearch className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -305,7 +306,7 @@ const McIconsBrowser = ({
             placeholder="Search categories..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-8 h-8 text-sm pixel-input"
+            className="pl-8 h-8 text-sm "
           />
           {searchQuery && (
             <Button
@@ -340,7 +341,7 @@ const McIconsBrowser = ({
       </div>
       
       {selectedSubcategory && (
-        <div className="px-3 py-2 bg-cow-purple/10 border-b border-border flex items-center justify-between">
+        <div className="px-3 py-2 bg-primary/10 border-b border-border flex items-center justify-between">
           <span className="text-xs text-muted-foreground truncate flex-1">
             Selected: {formatCategoryName(selectedSubcategory.split('/').pop() || '')}
           </span>
@@ -355,24 +356,24 @@ const McIconsBrowser = ({
         </div>
       )}
       
-      <ScrollArea className="flex-1">
+      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
         <div className="p-2">
           <motion.div
             className={`
               flex items-center gap-1 py-1.5 px-2 rounded-md cursor-pointer mb-1
               transition-colors duration-150
               ${!selectedSubcategory 
-                ? 'bg-cow-purple/20 text-cow-purple' 
-                : 'hover:bg-accent/50'
+                ? 'bg-primary/20 text-primary' 
+                : 'hover:bg-accent'
               }
             `}
             onClick={() => handleSelect(null)}
             whileHover={{ x: 2 }}
           >
             <div className="w-3.5" />
-            <IconFolderOpen className="h-4 w-4 text-cow-purple" />
+            <IconFolderOpen className="h-4 w-4 text-primary" />
             <span className="text-sm font-medium">All Icons</span>
-            <span className="text-xs text-muted-foreground bg-secondary/50 px-1.5 py-0.5 rounded ml-auto">
+            <span className="text-xs text-primary bg-primary/10 px-1.5 py-0.5 rounded ml-auto">
               {subcategories.length} categories
             </span>
           </motion.div>
@@ -395,7 +396,7 @@ const McIconsBrowser = ({
             </div>
           )}
         </div>
-      </ScrollArea>
+      </div>
     </div>
   );
 };
diff --git a/src/components/resources/McSoundsBrowser.tsx b/src/components/resources/McSoundsBrowser.tsx
index 42c29659..d6366bae 100644
--- a/src/components/resources/McSoundsBrowser.tsx
+++ b/src/components/resources/McSoundsBrowser.tsx
@@ -3,8 +3,9 @@ import type { MouseEvent } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { ScrollArea } from '@/components/ui/scroll-area';
+
 import { IconChevronRight, IconChevronDown, IconFolder, IconFolderOpen, IconSearch, IconVolume, IconX } from '@tabler/icons-react';
+import PixelSvgIcon from '@/components/PixelSvgIcon';
 
 interface McSoundsBrowserProps {
   subcategories: string[];
@@ -107,8 +108,8 @@ const CategoryItem = ({
           flex items-center gap-1 py-1.5 px-2 rounded-md cursor-pointer
           transition-colors duration-150 group
           ${isSelected 
-            ? 'bg-cow-purple/20 text-cow-purple' 
-            : 'hover:bg-accent/50'
+            ? 'bg-primary/20 text-primary' 
+            : 'hover:bg-accent'
           }
         `}
         style={{ paddingLeft }}
@@ -143,7 +144,7 @@ const CategoryItem = ({
         <span className="text-sm truncate flex-grow">{formatCategoryName(node.name)}</span>
         
         {node.count !== undefined && (
-          <span className="text-xs text-muted-foreground bg-secondary/50 px-1.5 py-0.5 rounded">
+          <span className="text-xs text-primary bg-primary/10 px-1.5 py-0.5 rounded">
             {node.count}
           </span>
         )}
@@ -292,12 +293,12 @@ const McSoundsBrowser = ({
   }, [subcategories, resourceCount]);
   
   return (
-    <div className="h-full flex flex-col bg-card/50 border border-border rounded-lg pixel-corners overflow-hidden">
+    <div className="h-full flex flex-col bg-card border border-border rounded-lg  overflow-hidden">
       <div className="p-3 border-b border-border">
-        <h3 className="text-sm font-jetbrains-mono text-muted-foreground mb-2 flex items-center gap-2">
-          <IconVolume className="h-4 w-4 text-cow-purple" />
+        <div className="text-sm text-muted-foreground mb-2 flex items-center gap-2">
+          <PixelSvgIcon name="sound" className="h-4 w-4 text-primary" />
           MC Sounds Browser
-        </h3>
+        </div>
         
         <div className="relative mb-2">
           <IconSearch className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -305,7 +306,7 @@ const McSoundsBrowser = ({
             placeholder="Search categories..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-8 h-8 text-sm pixel-input"
+            className="pl-8 h-8 text-sm "
           />
           {searchQuery && (
             <Button
@@ -340,7 +341,7 @@ const McSoundsBrowser = ({
       </div>
       
       {selectedSubcategory && (
-        <div className="px-3 py-2 bg-cow-purple/10 border-b border-border flex items-center justify-between">
+        <div className="px-3 py-2 bg-primary/10 border-b border-border flex items-center justify-between">
           <span className="text-xs text-muted-foreground truncate flex-1">
             Selected: {formatCategoryName(selectedSubcategory.split('/').pop() || '')}
           </span>
@@ -355,24 +356,24 @@ const McSoundsBrowser = ({
         </div>
       )}
       
-      <ScrollArea className="flex-1">
+      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
         <div className="p-2">
           <motion.div
             className={`
               flex items-center gap-1 py-1.5 px-2 rounded-md cursor-pointer mb-1
               transition-colors duration-150
               ${!selectedSubcategory 
-                ? 'bg-cow-purple/20 text-cow-purple' 
-                : 'hover:bg-accent/50'
+                ? 'bg-primary/20 text-primary' 
+                : 'hover:bg-accent'
               }
             `}
             onClick={() => handleSelect(null)}
             whileHover={{ x: 2 }}
           >
             <div className="w-3.5" />
-            <IconFolderOpen className="h-4 w-4 text-cow-purple" />
+            <IconFolderOpen className="h-4 w-4 text-primary" />
             <span className="text-sm font-medium">All Sounds</span>
-            <span className="text-xs text-muted-foreground bg-secondary/50 px-1.5 py-0.5 rounded ml-auto">
+            <span className="text-xs text-primary bg-primary/10 px-1.5 py-0.5 rounded ml-auto">
               {subcategories.length} categories
             </span>
           </motion.div>
@@ -395,7 +396,7 @@ const McSoundsBrowser = ({
             </div>
           )}
         </div>
-      </ScrollArea>
+      </div>
     </div>
   );
 };
diff --git a/src/components/resources/MinecraftChangelogPopup.tsx b/src/components/resources/MinecraftChangelogPopup.tsx
index 59065d21..4f6f76b2 100644
--- a/src/components/resources/MinecraftChangelogPopup.tsx
+++ b/src/components/resources/MinecraftChangelogPopup.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import {
   Dialog,
   DialogContent,
+  DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { IconX, IconBrandSpotify, IconApi, IconMusic, IconAlbum, IconVinyl } from '@tabler/icons-react';
@@ -26,9 +27,10 @@ const MinecraftChangelogPopup = () => {
 
   return (
     <Dialog open={open} onOpenChange={(o) => { if (!o) dismiss(); }}>
-      <DialogContent className="sm:max-w-lg pixel-corners bg-gradient-to-b from-card/95 to-card/70 border-cow-purple/20 max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-lg  bg-gradient-to-b from-card/95 to-card/70 border-primary/20 max-h-[90vh] overflow-y-auto">
+        <DialogTitle className="sr-only">Minecraft Creator Playlist integration</DialogTitle>
         <div className="space-y-5">
-          <h1 className="text-2xl font-minecraftia font-bold text-center leading-tight">
+          <h1 className="text-2xl font-bold text-center leading-tight">
             Minecraft Creator Playlist Integration
           </h1>
 
@@ -45,20 +47,20 @@ const MinecraftChangelogPopup = () => {
 
             <div>
               <h4 className="text-xs font-semibold text-foreground/90 uppercase tracking-wider mb-2 flex items-center gap-1.5">
-                <IconVinyl className="h-3.5 w-3.5 text-cow-purple" />
+                <IconVinyl className="h-3.5 w-3.5 text-primary" />
                 What's new
               </h4>
               <ul className="space-y-1.5">
                 <li className="flex items-start gap-2">
-                  <IconMusic className="h-4 w-4 text-cow-purple mt-0.5 flex-shrink-0" />
+                  <IconMusic className="h-4 w-4 text-primary mt-0.5 flex-shrink-0" />
                   <span><strong className="text-foreground/80">725 tracks</strong> from the Creator-Safe Playlist, playable in-browser</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <IconAlbum className="h-4 w-4 text-cow-purple mt-0.5 flex-shrink-0" />
+                  <IconAlbum className="h-4 w-4 text-primary mt-0.5 flex-shrink-0" />
                   <span><strong className="text-foreground/80">70 album covers</strong> with album-based filtering and search</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <IconApi className="h-4 w-4 text-cow-purple mt-0.5 flex-shrink-0" />
+                  <IconApi className="h-4 w-4 text-primary mt-0.5 flex-shrink-0" />
                   <span>Powered by the <strong className="text-foreground/80">Minecraft Creator-Safe Playlist API</strong></span>
                 </li>
               </ul>
@@ -90,7 +92,7 @@ const MinecraftChangelogPopup = () => {
 
           <Button
             onClick={dismiss}
-            className="w-full pixel-corners bg-cow-purple hover:bg-cow-purple/80"
+            className="w-full  bg-primary hover:bg-primary/90"
           >
             Got it!
           </Button>
diff --git a/src/components/resources/MinecraftMusicFilter.tsx b/src/components/resources/MinecraftMusicFilter.tsx
index 4d006fa1..99305df9 100644
--- a/src/components/resources/MinecraftMusicFilter.tsx
+++ b/src/components/resources/MinecraftMusicFilter.tsx
@@ -21,13 +21,13 @@ const AlbumThumb = ({ album, selected }: { album: string; selected: boolean }) =
   const [errored, setErrored] = useState(false);
   if (errored) {
     return (
-      <div className={`w-10 h-10 rounded-md flex-shrink-0 overflow-hidden flex items-center justify-center ${selected ? 'ring-2 ring-cow-purple/40' : ''} bg-muted/30`}>
+      <div className={`w-10 h-10 rounded-md flex-shrink-0 overflow-hidden flex items-center justify-center ${selected ? 'ring-2 ring-primary/40' : ''} bg-muted`}>
         <IconMusic className="h-5 w-5 text-muted-foreground/60" />
       </div>
     );
   }
   return (
-    <div className={`w-10 h-10 rounded-md flex-shrink-0 overflow-hidden ${selected ? 'ring-2 ring-cow-purple/40' : ''}`}>
+    <div className={`w-10 h-10 rounded-md flex-shrink-0 overflow-hidden ${selected ? 'ring-2 ring-primary/40' : ''}`}>
       <img
         src={src}
         alt=""
@@ -63,10 +63,10 @@ const MinecraftMusicFilter = ({ albums, albumCounts, selectedAlbum, onAlbumChang
   if (albums.length === 0) return null;
 
   return (
-    <div className="h-full flex flex-col bg-gradient-to-b from-card/80 to-card/30 border border-border rounded-lg pixel-corners overflow-hidden shadow-lg shadow-cow-purple/5">
-      <div className="p-3 border-b border-border/60 bg-gradient-to-r from-cow-purple/5 to-transparent">
-        <h3 className="text-sm font-jetbrains-mono text-muted-foreground mb-2 flex items-center gap-2">
-          <IconVinyl className="h-4 w-4 text-cow-purple" />
+    <div className="h-full flex flex-col bg-gradient-to-b from-card/80 to-card/30 border border-border rounded-lg  overflow-hidden shadow-lg shadow-primary/5">
+      <div className="p-3 border-b border-border/60 bg-gradient-to-r from-primary/5 to-transparent">
+        <h3 className="text-sm text-muted-foreground mb-2 flex items-center gap-2">
+          <IconVinyl className="h-4 w-4 text-primary" />
           <span className="text-foreground/80 font-semibold">Albums</span>
           <span className="text-[10px] text-muted-foreground/60 font-normal ml-auto">{albums.length} albums</span>
         </h3>
@@ -77,7 +77,7 @@ const MinecraftMusicFilter = ({ albums, albumCounts, selectedAlbum, onAlbumChang
             placeholder="Search albums..."
             value={albumSearch}
             onChange={(e) => setAlbumSearch(e.target.value)}
-            className="pl-8 h-8 text-sm pixel-input bg-background/50 border-border/40 focus:border-cow-purple/40"
+            className="pl-8 h-8 text-sm  bg-background border-border/40 focus:border-primary/40"
           />
           {albumSearch && (
             <Button
@@ -95,21 +95,21 @@ const MinecraftMusicFilter = ({ albums, albumCounts, selectedAlbum, onAlbumChang
           <motion.div
             initial={{ opacity: 0, y: -4 }}
             animate={{ opacity: 1, y: 0 }}
-            className="flex items-center gap-2 bg-cow-purple/10 px-2.5 py-1.5 rounded-md border border-cow-purple/20"
+            className="flex items-center gap-2 bg-primary/10 px-2.5 py-1.5 rounded-md border border-primary/20"
           >
             <AlbumThumb album={selectedAlbum} selected />
             <div className="flex-1 min-w-0">
-              <p className="text-xs text-cow-purple truncate font-medium" title={selectedAlbum}>
+              <p className="text-xs text-primary truncate font-medium" title={selectedAlbum}>
                 {selectedAlbum}
               </p>
-              <p className="text-[10px] text-cow-purple/60">
+              <p className="text-[10px] text-primary/60">
                 {albumCounts[selectedAlbum]} {albumCounts[selectedAlbum] === 1 ? 'track' : 'tracks'}
               </p>
             </div>
             <Button
               variant="ghost"
               size="sm"
-              className="h-6 text-[10px] text-cow-purple hover:text-cow-purple/80 hover:bg-cow-purple/10 flex-shrink-0 px-2"
+              className="h-6 text-[10px] text-primary hover:text-primary/80 hover:bg-primary/10 flex-shrink-0 px-2"
               onClick={() => onAlbumChange(null)}
             >
               Clear
@@ -125,8 +125,8 @@ const MinecraftMusicFilter = ({ albums, albumCounts, selectedAlbum, onAlbumChang
               flex items-center gap-3 py-2.5 px-3 rounded-md cursor-pointer mb-1
               transition-all duration-150 group
               ${!selectedAlbum
-                ? 'bg-cow-purple/15 text-cow-purple border border-cow-purple/20'
-                : 'hover:bg-accent/50 border border-transparent'
+                ? 'bg-primary/15 text-primary border border-primary/20'
+                : 'hover:bg-accent border border-transparent'
               }
             `}
             onClick={() => onAlbumChange(null)}
@@ -134,17 +134,17 @@ const MinecraftMusicFilter = ({ albums, albumCounts, selectedAlbum, onAlbumChang
           >
             <div className={`
               flex items-center justify-center w-10 h-10 rounded-md flex-shrink-0
-              ${!selectedAlbum ? 'bg-cow-purple/20' : 'bg-muted/30 group-hover:bg-muted/50'}
+              ${!selectedAlbum ? 'bg-primary/20' : 'bg-muted group-hover:bg-muted'}
               transition-colors duration-150
             `}>
               <IconDisc className="h-5 w-5" />
             </div>
             <div className="flex-1 min-w-0">
-              <p className={`text-sm font-medium truncate ${!selectedAlbum ? 'text-cow-purple' : 'text-foreground/80'}`}>
+              <p className={`text-sm font-medium truncate ${!selectedAlbum ? 'text-primary' : 'text-foreground/80'}`}>
                 All Albums
               </p>
             </div>
-            <span className="text-[11px] text-muted-foreground/50 bg-background/50 px-2 py-0.5 rounded ml-auto font-mono flex-shrink-0">
+            <span className="text-[11px] text-muted-foreground/50 bg-background px-2 py-0.5 rounded ml-auto font-mono flex-shrink-0">
               {totalTracks}
             </span>
           </motion.div>
@@ -162,26 +162,26 @@ const MinecraftMusicFilter = ({ albums, albumCounts, selectedAlbum, onAlbumChang
                   flex items-center gap-3 py-2.5 px-3 rounded-md cursor-pointer mb-1
                   transition-all duration-150 group
                   ${selectedAlbum === album
-                    ? 'bg-cow-purple/15 text-cow-purple border border-cow-purple/20'
-                    : 'hover:bg-accent/40 border border-transparent'
+                    ? 'bg-primary/15 text-primary border border-primary/20'
+                    : 'hover:bg-accent border border-transparent'
                   }
                 `}
                 onClick={() => onAlbumChange(album)}
               >
                 <AlbumThumb album={album} selected={selectedAlbum === album} />
                 <div className="flex-1 min-w-0">
-                  <p className={`text-sm truncate ${selectedAlbum === album ? 'font-medium text-cow-purple' : 'text-foreground/80'}`} title={album}>
+                  <p className={`text-sm truncate ${selectedAlbum === album ? 'font-medium text-primary' : 'text-foreground/80'}`} title={album}>
                     {album}
                   </p>
-                  <p className={`text-[10px] truncate ${selectedAlbum === album ? 'text-cow-purple/60' : 'text-muted-foreground/50'}`}>
+                  <p className={`text-[10px] truncate ${selectedAlbum === album ? 'text-primary/60' : 'text-muted-foreground/50'}`}>
                     {albumCounts[album]} {albumCounts[album] === 1 ? 'track' : 'tracks'}
                   </p>
                 </div>
                 <span className={`
                   text-[11px] font-mono flex-shrink-0
                   ${selectedAlbum === album
-                    ? 'bg-cow-purple/20 text-cow-purple'
-                    : 'bg-background/40 text-muted-foreground/50'
+                    ? 'bg-primary/20 text-primary'
+                    : 'bg-background text-muted-foreground/50'
                   }
                   px-2 py-0.5 rounded
                 `}>
diff --git a/src/components/resources/MusicLinkDialog.tsx b/src/components/resources/MusicLinkDialog.tsx
index 260b6980..8d2ee3d4 100644
--- a/src/components/resources/MusicLinkDialog.tsx
+++ b/src/components/resources/MusicLinkDialog.tsx
@@ -38,10 +38,10 @@ const MusicLinkDialog = ({ resource, link, onClose }: MusicLinkDialogProps) => {
 
   return (
     <Dialog open={!!resource} onOpenChange={(open) => { if (!open) onClose(); }}>
-      <DialogContent className="pixel-corners border-2 border-cow-purple sm:max-w-xl">
+      <DialogContent className=" border border-border sm:max-w-xl">
         <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 font-jetbrains-mono text-xl">
-            <IconLink className="h-5 w-5 text-cow-purple" /> Music link
+          <DialogTitle className="flex items-center gap-2 text-xl">
+            <IconLink className="h-5 w-5 text-primary" /> Music link
           </DialogTitle>
           <DialogDescription>
             Share this link with others or use RenderBot to check copyright.
@@ -53,7 +53,7 @@ const MusicLinkDialog = ({ resource, link, onClose }: MusicLinkDialogProps) => {
             <Input
               readOnly
               value={link}
-              className="pixel-corners font-mono text-xs"
+              className=" font-mono text-xs"
               onFocus={(event) => event.currentTarget.select()}
               aria-label="Generated music link"
             />
@@ -61,7 +61,7 @@ const MusicLinkDialog = ({ resource, link, onClose }: MusicLinkDialogProps) => {
               type="button"
               variant="outline"
               size="icon"
-              className="pixel-corners shrink-0"
+              className=" shrink-0"
               onClick={copyLink}
               aria-label="Copy music link"
             >
@@ -69,7 +69,7 @@ const MusicLinkDialog = ({ resource, link, onClose }: MusicLinkDialogProps) => {
             </Button>
           </div>
 
-          <Button type="button" className="pixel-btn-primary w-full" onClick={openLink}>
+          <Button type="button" className="w-full" onClick={openLink}>
             <IconExternalLink className="mr-2 h-4 w-4" /> Open link
           </Button>
         </div>
diff --git a/src/components/resources/MusicMoodFilter.tsx b/src/components/resources/MusicMoodFilter.tsx
index 647af1e6..167c7ad0 100644
--- a/src/components/resources/MusicMoodFilter.tsx
+++ b/src/components/resources/MusicMoodFilter.tsx
@@ -44,10 +44,10 @@ const MusicMoodFilter = ({ selectedMoods, onMoodChange, moodsData }: MusicMoodFi
   if (allMoods.length === 0) return null;
 
   return (
-    <div className="h-full flex flex-col bg-card/50 border border-border rounded-lg pixel-corners overflow-hidden">
+    <div className="h-full flex flex-col bg-card border border-border rounded-lg  overflow-hidden">
       <div className="p-3 border-b border-border">
-        <h3 className="text-sm font-jetbrains-mono text-muted-foreground mb-2 flex items-center gap-2">
-          <IconMoodHappy className="h-4 w-4 text-cow-purple" />
+        <h3 className="text-sm text-muted-foreground mb-2 flex items-center gap-2">
+          <IconMoodHappy className="h-4 w-4 text-primary" />
           Mood Filter
         </h3>
         
@@ -57,7 +57,7 @@ const MusicMoodFilter = ({ selectedMoods, onMoodChange, moodsData }: MusicMoodFi
             placeholder="Search moods..."
             value={moodSearch}
             onChange={(e) => setMoodSearch(e.target.value)}
-            className="pl-8 h-8 text-sm pixel-input"
+            className="pl-8 h-8 text-sm "
           />
           {moodSearch && (
             <Button
@@ -72,14 +72,14 @@ const MusicMoodFilter = ({ selectedMoods, onMoodChange, moodsData }: MusicMoodFi
         </div>
         
         {selectedMoods.length > 0 && (
-          <div className="flex items-center justify-between bg-cow-purple/10 px-2 py-1.5 rounded border border-cow-purple/20">
-            <span className="text-xs text-cow-purple">
+          <div className="flex items-center justify-between bg-primary/10 px-2 py-1.5 rounded border border-primary/20">
+            <span className="text-xs text-primary">
               {selectedMoods.length} selected
             </span>
             <Button
               variant="ghost"
               size="sm"
-              className="h-5 text-xs text-cow-purple hover:text-cow-purple"
+              className="h-5 text-xs text-primary hover:text-primary"
               onClick={clearMoods}
             >
               Clear
@@ -97,8 +97,8 @@ const MusicMoodFilter = ({ selectedMoods, onMoodChange, moodsData }: MusicMoodFi
                 flex items-center gap-2 py-1.5 px-2 rounded-md cursor-pointer mb-1
                 transition-colors duration-150
                 ${selectedMoods.includes(mood) 
-                  ? 'bg-cow-purple/20 text-cow-purple' 
-                  : 'hover:bg-accent/50'
+                  ? 'bg-primary/20 text-primary' 
+                  : 'hover:bg-accent'
                 }
               `}
               onClick={() => toggleMood(mood)}
diff --git a/src/components/resources/MusicPacksTab.tsx b/src/components/resources/MusicPacksTab.tsx
index 49efb451..f94210e2 100644
--- a/src/components/resources/MusicPacksTab.tsx
+++ b/src/components/resources/MusicPacksTab.tsx
@@ -2,8 +2,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { IconChevronDown, IconChevronRight, IconExternalLink, IconFolder, IconFolderOpen, IconMusic, IconPlayerPlayFilled, IconSearch, IconX } from '@tabler/icons-react';
+import PixelSvgIcon from '@/components/PixelSvgIcon';
+import { IconBrandYoutube, IconChevronDown, IconChevronRight, IconExternalLink, IconFolder, IconFolderOpen, IconMusic, IconPlayerPlayFilled, IconSearch, IconX } from '@tabler/icons-react';
 
 interface MusicLinksMessage {
   links?: string[];
@@ -89,6 +89,71 @@ const getEmbedInfo = (link: string) => {
   };
 };
 
+// YouTube titles via oEmbed (through noembed for CORS). Cached per video id so
+// repeated views don't refetch.
+const youtubeTitleCache = new Map<string, string | null>();
+const youtubeTitlePending = new Map<string, Promise<string | null>>();
+
+const fetchYoutubeTitle = (videoId: string): Promise<string | null> => {
+  if (youtubeTitleCache.has(videoId)) return Promise.resolve(youtubeTitleCache.get(videoId) ?? null);
+  const pending = youtubeTitlePending.get(videoId);
+  if (pending) return pending;
+
+  const request = (async () => {
+    try {
+      const res = await fetch(
+        `https://noembed.com/embed?url=${encodeURIComponent(`https://www.youtube.com/watch?v=${videoId}`)}`,
+      );
+      if (!res.ok) throw new Error(String(res.status));
+      const data: { title?: unknown } = await res.json();
+      const title = typeof data?.title === 'string' && data.title ? data.title : null;
+      youtubeTitleCache.set(videoId, title);
+      return title;
+    } catch {
+      youtubeTitleCache.set(videoId, null);
+      return null;
+    } finally {
+      youtubeTitlePending.delete(videoId);
+    }
+  })();
+
+  youtubeTitlePending.set(videoId, request);
+  return request;
+};
+
+const YoutubeLinkLabel = ({ item }: { item: MusicLinkItem }) => {
+  const videoId = extractYoutubeVideoId(item.link);
+  const [title, setTitle] = useState<string | null>(
+    videoId ? youtubeTitleCache.get(videoId) ?? null : null,
+  );
+
+  useEffect(() => {
+    if (!videoId) return;
+    let active = true;
+    fetchYoutubeTitle(videoId).then((resolved) => {
+      if (active) setTitle(resolved);
+    });
+    return () => {
+      active = false;
+    };
+  }, [videoId]);
+
+  const label = title ?? (videoId ? 'YouTube video' : item.link);
+
+  return (
+    <a
+      href={item.link}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex min-w-0 items-center gap-2 text-sm text-foreground transition-colors hover:text-primary"
+      title={item.link}
+    >
+      <IconBrandYoutube className="h-4 w-4 flex-shrink-0 text-red-500" />
+      <span className="truncate">{label}</span>
+    </a>
+  );
+};
+
 const MusicPacksTab = () => {
   const [musicLinksData, setMusicLinksData] = useState<MusicLinksData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -270,10 +335,10 @@ const MusicPacksTab = () => {
   if (isLoading) {
     return (
       <div className="grid grid-cols-1 md:grid-cols-[320px_1fr] gap-6">
-        <div className="h-[70vh] rounded-lg border border-border bg-card/40 animate-pulse" />
+        <div className="h-[70vh] rounded-lg border border-border bg-card animate-pulse" />
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           {Array.from({ length: 8 }).map((_, idx) => (
-            <div key={`music-links-skeleton-${idx}`} className="aspect-video rounded-lg border border-border bg-card/40 animate-pulse" />
+            <div key={`music-links-skeleton-${idx}`} className="aspect-video rounded-lg border border-border bg-card animate-pulse" />
           ))}
         </div>
       </div>
@@ -284,19 +349,19 @@ const MusicPacksTab = () => {
     <div className="flex gap-6 max-w-7xl mx-auto">
       <div className="w-full md:w-80 flex-shrink-0">
         <div className="sticky top-28 h-[calc(100vh-8rem)]">
-          <div className="h-full flex flex-col bg-card/50 border border-border rounded-lg pixel-corners overflow-hidden">
+          <div className="h-full flex flex-col bg-card border border-border rounded-lg  overflow-hidden">
             <div className="p-3 border-b border-border">
-              <h3 className="text-sm font-jetbrains-mono text-muted-foreground mb-2 flex items-center gap-2">
-                <IconMusic className="h-4 w-4 text-cow-purple" />
+              <div className="text-sm text-muted-foreground mb-2 flex items-center gap-2">
+                <PixelSvgIcon name="music" className="h-4 w-4 text-primary" />
                 Music Packs Browser
-              </h3>
+              </div>
               <div className="relative">
                 <IconSearch className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                   placeholder="Search cato or sub cat..."
-                  className="h-8 pl-8 pr-8 text-sm pixel-input"
+                  className="h-8 pl-8 pr-8 text-sm "
                 />
                 {searchQuery && (
                   <Button
@@ -311,7 +376,7 @@ const MusicPacksTab = () => {
               </div>
             </div>
 
-            <ScrollArea className="flex-1">
+            <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
               <div className="p-2">
                 <motion.button
                   onClick={() => {
@@ -319,11 +384,11 @@ const MusicPacksTab = () => {
                     setSelectedChannel(null);
                   }}
                   whileHover={{ x: 2 }}
-                  className={`w-full text-left flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${!selectedCategory && !selectedChannel ? 'bg-cow-purple/20 text-cow-purple' : 'hover:bg-accent/50'}`}
+                  className={`w-full text-left flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${!selectedCategory && !selectedChannel ? 'bg-primary/20 text-primary' : 'hover:bg-accent'}`}
                 >
-                  <IconFolderOpen className="h-4 w-4 text-cow-purple" />
+                  <IconFolderOpen className="h-4 w-4 text-primary" />
                   <span className="text-sm font-medium">All Music Links</span>
-                  <span className="text-xs text-muted-foreground bg-secondary/50 px-1.5 py-0.5 rounded ml-auto">
+                  <span className="text-xs text-primary bg-primary/10 px-1.5 py-0.5 rounded ml-auto">
                     {allLinks.length}
                   </span>
                 </motion.button>
@@ -336,12 +401,12 @@ const MusicPacksTab = () => {
                     <div key={category.name} className="mt-1">
                       <button
                         onClick={() => toggleCategory(category.name)}
-                        className="w-full text-left flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-accent/50 transition-colors"
+                        className="w-full text-left flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-accent transition-colors"
                       >
                         {isExpanded ? <IconChevronDown className="h-3.5 w-3.5 text-muted-foreground" /> : <IconChevronRight className="h-3.5 w-3.5 text-muted-foreground" />}
                         {isExpanded ? <IconFolderOpen className="h-4 w-4 text-yellow-500" /> : <IconFolder className="h-4 w-4 text-yellow-500/80" />}
                         <span className="text-sm truncate">{normalizeLabel(category.name)}</span>
-                        <span className="text-xs text-muted-foreground bg-secondary/50 px-1.5 py-0.5 rounded ml-auto">
+                        <span className="text-xs text-primary bg-primary/10 px-1.5 py-0.5 rounded ml-auto">
                           {categoryCounts[category.name] || 0}
                         </span>
                       </button>
@@ -356,7 +421,7 @@ const MusicPacksTab = () => {
                           >
                             <button
                               onClick={() => handleSelectCategory(category.name)}
-                              className={`w-full text-left ml-6 mr-2 mt-1 flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${isCategorySelected ? 'bg-cow-purple/20 text-cow-purple' : 'hover:bg-accent/50'}`}
+                              className={`w-[calc(100%-1.5rem)] text-left ml-6 mt-1 flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${isCategorySelected ? 'bg-primary/20 text-primary' : 'hover:bg-accent'}`}
                             >
                               <IconFolder className="h-4 w-4 text-yellow-500/80" />
                               <span className="text-sm truncate">All in {normalizeLabel(category.name)}</span>
@@ -370,11 +435,11 @@ const MusicPacksTab = () => {
                                 <button
                                   key={`${category.name}-${channel.name}`}
                                   onClick={() => handleSelectChannel(category.name, channel.name)}
-                                  className={`w-full text-left ml-6 mr-2 mt-1 flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${isChannelSelected ? 'bg-cow-purple/20 text-cow-purple' : 'hover:bg-accent/50'}`}
+                                  className={`w-[calc(100%-1.5rem)] text-left ml-6 mt-1 flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${isChannelSelected ? 'bg-primary/20 text-primary' : 'hover:bg-accent'}`}
                                 >
                                   <IconFolder className="h-4 w-4 text-yellow-500/80" />
                                   <span className="text-sm truncate">{normalizeLabel(channel.name)}</span>
-                                  <span className="text-xs text-muted-foreground bg-secondary/50 px-1.5 py-0.5 rounded ml-auto">
+                                  <span className="text-xs text-primary bg-primary/10 px-1.5 py-0.5 rounded ml-auto">
                                     {channelCounts[countKey] || 0}
                                   </span>
                                 </button>
@@ -387,7 +452,7 @@ const MusicPacksTab = () => {
                   );
                 })}
               </div>
-            </ScrollArea>
+            </div>
           </div>
         </div>
       </div>
@@ -412,7 +477,7 @@ const MusicPacksTab = () => {
         </div>
 
         {displayedLinks.length === 0 ? (
-          <div className="rounded-lg border border-border bg-card/40 p-8 text-center text-muted-foreground">
+          <div className="rounded-lg border border-border bg-card p-8 text-center text-muted-foreground">
             No links found for this selection.
           </div>
         ) : (
@@ -426,9 +491,9 @@ const MusicPacksTab = () => {
                   key={item.id}
                   initial={{ opacity: 0, y: 8 }}
                   animate={{ opacity: 1, y: 0 }}
-                  className="group block rounded-lg border border-border bg-card/50 p-3 hover:border-cow-purple/50 transition-colors pixel-corners"
+                  className="group block rounded-lg border border-border bg-card p-3 hover:border-primary/50 transition-colors "
                 >
-                  <div className="aspect-video rounded-md overflow-hidden border border-border/70 bg-muted/30 mb-3">
+                  <div className="aspect-video rounded-md overflow-hidden border border-border/70 bg-muted mb-3">
                     {embedInfo.isYoutube && embedInfo.embedUrl && isEmbedActive ? (
                       <iframe
                         src={embedInfo.embedUrl}
@@ -451,7 +516,7 @@ const MusicPacksTab = () => {
                           loading="lazy"
                         />
                         <div className="absolute inset-0 bg-black/20 group-hover/thumb:bg-black/35 transition-colors flex items-center justify-center">
-                          <span className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-cow-purple/90 text-white">
+                          <span className="inline-flex items-center justify-center h-12 w-12 chamfer bg-primary/90 text-primary-foreground">
                             <IconPlayerPlayFilled className="h-6 w-6 ml-0.5" />
                           </span>
                         </div>
@@ -464,16 +529,9 @@ const MusicPacksTab = () => {
                   </div>
 
                   <div className="flex items-start justify-between gap-3">
-                    <a
-                      href={item.link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-sm text-muted-foreground break-all line-clamp-2 hover:text-cow-purple transition-colors"
-                    >
-                      {item.link}
-                    </a>
+                    <YoutubeLinkLabel item={item} />
                     <a href={item.link} target="_blank" rel="noopener noreferrer" className="mt-0.5 flex-shrink-0">
-                      <IconExternalLink className="h-4 w-4 text-cow-purple" />
+                      <IconExternalLink className="h-4 w-4 text-primary" />
                     </a>
                   </div>
 
diff --git a/src/components/resources/ResourceAnnouncementBanner.tsx b/src/components/resources/ResourceAnnouncementBanner.tsx
index 8845d63e..854930ed 100644
--- a/src/components/resources/ResourceAnnouncementBanner.tsx
+++ b/src/components/resources/ResourceAnnouncementBanner.tsx
@@ -13,12 +13,12 @@ export default function ResourceAnnouncementBanner({ onExplore }: { onExplore: (
     try { localStorage.setItem(DISMISSED_KEY, "true"); } catch { /* Best-effort persistence. */ }
     setVisible(false);
   };
-  return <aside className="mx-auto mb-6 flex max-w-5xl items-center gap-3 rounded-xl border border-cow-purple/30 bg-cow-purple/10 px-4 py-3 text-sm">
+  return <aside className="mx-auto mb-6 flex max-w-5xl items-center gap-3 rounded-xl border border-primary/30 bg-primary/10 px-4 py-3 text-sm">
     <div className="min-w-0 flex-1">
       <p className="font-semibold text-foreground">New: Minecraft Creator-Safe Playlist</p>
       <p className="truncate text-muted-foreground">Browse 725 creator-friendly tracks and the latest shader tools.</p>
     </div>
-    <button type="button" className="inline-flex shrink-0 items-center gap-1 font-medium text-cow-purple" onClick={onExplore}>Explore <IconArrowRight className="h-4 w-4" /></button>
-    <button type="button" aria-label="Dismiss announcement" onClick={dismiss} className="shrink-0 rounded-md p-1 text-muted-foreground hover:bg-background/50 hover:text-foreground"><IconX className="h-4 w-4" /></button>
+    <button type="button" className="inline-flex shrink-0 items-center gap-1 font-medium text-primary" onClick={onExplore}>Explore <IconArrowRight className="h-4 w-4" /></button>
+    <button type="button" aria-label="Dismiss announcement" onClick={dismiss} className="shrink-0 rounded-md p-1 text-muted-foreground hover:bg-background hover:text-foreground"><IconX className="h-4 w-4" /></button>
   </aside>;
 }
diff --git a/src/components/resources/ResourceCard.tsx b/src/components/resources/ResourceCard.tsx
index 1192a153..73103575 100644
--- a/src/components/resources/ResourceCard.tsx
+++ b/src/components/resources/ResourceCard.tsx
@@ -7,12 +7,11 @@ import {
   IconHeart,
   IconSunglasses,
 } from "@tabler/icons-react";
-import { Resource } from "@/types/resources";
+import { Resource, getResourceUrl } from "@/types/resources";
 import { cn } from "@/lib/utils";
 import { useUserFavorites } from "@/hooks/useUserFavorites";
 import AudioPlayer from "@/components/AudioPlayer";
 import HoverVideo from "@/components/HoverVideo";
-import { getCategoryIcon, getCategoryColor } from "@/utils/resourceCategories";
 import { RESOURCES_REPO_RAW_BASE } from "@/lib/resourcesRepo";
 
 interface ResourceCardProps {
@@ -31,6 +30,12 @@ const getPreviewUrl = (resource: Resource) => {
   return `${basePath}/${resource.category}/${titleLowered}${creditPart}.${resource.filetype}`;
 };
 
+// Track which font families we've actually loaded. `document.fonts.check()`
+// can't be used for this: it returns true for any family (even a bogus one),
+// which previously made the preview skip loading and fall back to a default.
+const loadedFontNames = new Set<string>();
+const pendingFontLoads = new Map<string, Promise<void>>();
+
 const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) => {
   const [isImageLoaded, setIsImageLoaded] = useState(false);
 
@@ -40,7 +45,9 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
   }, [resource.id]);
 
   const { toggleFavorite, isFavorited } = useUserFavorites();
-  const isFavorite = isFavorited(String(resource.id));
+  // Key by resource URL to match the Favorites tab, sidebar and DB column.
+  const resourceUrl = getResourceUrl(resource);
+  const isFavorite = isFavorited(resourceUrl);
 
   const [isInView, setIsInView] = useState(false);
   const [isPreviewReady, setIsPreviewReady] = useState(false);
@@ -96,25 +103,27 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
     const fontName = resource.title;
 
     const maybeLoadFont = () => {
-      if (document.fonts.check(`12px "${fontName}"`)) {
+      if (loadedFontNames.has(fontName)) {
         if (active) setIsFontLoaded(true);
         return;
       }
-      let fontFace: FontFace;
-      try {
-        const safeFontName = fontName.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
-        const safeFontUrl = encodeURI(fontUrl).replace(/"/g, '%22');
-        fontFace = new FontFace(safeFontName, `url("${safeFontUrl}")`);
-      } catch (error) {
-        if (active) console.error(`Invalid font descriptor for "${fontName}":`, error);
-        return;
+
+      let pending = pendingFontLoads.get(fontName);
+      if (!pending) {
+        pending = (async () => {
+          const safeFontName = fontName.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+          const safeFontUrl = fontUrl.replace(/ /g, '%20').replace(/"/g, '%22');
+          const fontFace = new FontFace(safeFontName, `url("${safeFontUrl}")`);
+          const loadedFont = await fontFace.load();
+          document.fonts.add(loadedFont);
+          loadedFontNames.add(fontName);
+        })().finally(() => pendingFontLoads.delete(fontName));
+        pendingFontLoads.set(fontName, pending);
       }
-      fontFace.load().then((loadedFont) => {
-        document.fonts.add(loadedFont);
-        if (active) setIsFontLoaded(true);
-      }).catch((error) => {
-        if (active) console.error(`Failed to load font "${fontName}":`, error);
-      });
+
+      pending
+        .then(() => { if (active) setIsFontLoaded(true); })
+        .catch((error) => { if (active) console.error(`Failed to load font "${fontName}":`, error); });
     };
 
     if (isInView) {
@@ -133,7 +142,7 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
   const handleFavoriteClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
-    toggleFavorite(String(resource.id));
+    toggleFavorite(resourceUrl);
   };
 
   const handleCopyrightClick = (e: React.MouseEvent) => {
@@ -151,7 +160,7 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
         return (
           <div
             onClick={handlePreviewClick}
-            className="relative aspect-video bg-muted/20 rounded-md overflow-hidden mb-3 cursor-default"
+            className="relative aspect-video bg-muted rounded-lg overflow-hidden mb-3 cursor-default"
           >
             <img
               src={previewUrl}
@@ -164,7 +173,7 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
               loading="lazy"
             />
             {!isImageLoaded && (
-              <div className="absolute inset-0 flex items-center justify-center bg-muted/10">
+              <div className="absolute inset-0 flex items-center justify-center bg-muted">
                 <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
               </div>
             )}
@@ -174,7 +183,7 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
         return (
           <div
             onClick={handlePreviewClick}
-            className="relative aspect-[4/1] bg-muted/20 rounded-md overflow-hidden mb-3 cursor-default"
+            className="relative aspect-[4/1] bg-muted rounded-lg overflow-hidden mb-3 cursor-default"
           >
             {isFontLoaded ? (
               <div
@@ -185,7 +194,7 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
               </div>
             ) : (
               <div className="absolute inset-0 flex items-center justify-center">
-                <div className="w-5 h-5 border-2 border-cow-purple border-t-transparent rounded-full animate-spin" />
+                <div className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
               </div>
             )}
           </div>
@@ -196,7 +205,7 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
         return (
           <div
             onClick={handlePreviewClick}
-            className="relative aspect-video bg-muted/5 rounded-md overflow-hidden mb-3 cursor-default flex items-center justify-center"
+            className="relative aspect-video bg-muted rounded-lg overflow-hidden mb-3 cursor-default flex items-center justify-center"
           >
             <AudioPlayer
               src={previewUrl}
@@ -212,7 +221,7 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
                 onFocus={() => setIsLinkHovered(true)}
                 onBlur={() => setIsLinkHovered(false)}
                 aria-label={`Copy a RenderBot copyright-check link for ${resource.title}`}
-                className="absolute right-2 top-2 z-10 inline-flex h-9 items-center overflow-hidden rounded-md border border-cow-purple/60 bg-cow-purple/95 text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cow-purple"
+                className="absolute right-2 top-2 z-10 inline-flex h-9 items-center overflow-hidden rounded-md border border-primary/60 bg-primary text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                 initial={false}
                 animate={{ width: isLinkHovered ? 152 : 36 }}
                 transition={{ type: "spring", stiffness: 400, damping: 30 }}
@@ -241,7 +250,7 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
         return (
           <div
             onClick={handlePreviewClick}
-            className="relative aspect-video bg-muted/5 rounded-md overflow-hidden mb-3 cursor-default flex items-center justify-center"
+            className="relative aspect-video bg-muted rounded-lg overflow-hidden mb-3 cursor-default flex items-center justify-center"
           >
             <AudioPlayer
               src={previewUrl}
@@ -254,9 +263,9 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
         return (
           <div
             onClick={handlePreviewClick}
-            className="relative aspect-video bg-muted/20 rounded-md overflow-hidden mb-3 cursor-default"
+            className="relative aspect-video bg-muted rounded-lg overflow-hidden mb-3 cursor-default"
           >
-            <div className="absolute inset-0 flex items-center justify-center bg-muted/10">
+            <div className="absolute inset-0 flex items-center justify-center bg-muted">
               <IconVideo className="h-8 w-8 text-muted-foreground/30" />
             </div>
             {isInView && isPreviewReady && (
@@ -281,31 +290,26 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
       ref={cardRef}
       onClick={() => onClick(resource)}
       className={cn(
-        "pixel-card group cursor-pointer hover:border-primary transition-all duration-300 h-full",
+        "group h-full cursor-pointer rounded-xl border border-border bg-card p-4 transition-all duration-300 hover:-translate-y-1 hover:border-primary/60",
         isFavorite && "border-red-500/50",
       )}
-      whileHover={{ y: -5 }}
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.2 }}
     >
       {renderPreview()}
 
-      <div className="flex justify-between items-start mb-3">
-        <motion.div
-          className={`inline-flex items-center px-2 py-1 rounded-md text-xs ${getCategoryColor(resource.category)}`}
-          whileHover={{ scale: 1.05 }}
-        >
-          {getCategoryIcon(resource.category)}
-          <span className="ml-1 capitalize">
+      <div className="flex justify-between items-start mb-3 gap-2">
+        <div className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+          <span className="capitalize">
             {resource.category === "minecraft-icons"
               ? "Mcicons"
               : resource.category}
           </span>
           {resource.subcategory && (
-            <span className="ml-1">({resource.subcategory})</span>
+            <span className="text-muted-foreground/70"> · {resource.subcategory.replace(/\//g, " / ")}</span>
           )}
-        </motion.div>
+        </div>
 
         <motion.button
           onClick={handleFavoriteClick}
@@ -313,7 +317,7 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
             "p-1 rounded-full transition-colors",
             isFavorite
               ? "text-red-500 hover:text-red-600"
-              : "text-gray-400 hover:text-red-500",
+              : "text-muted-foreground hover:text-red-500",
           )}
           whileHover={{ scale: 1.1 }}
           whileTap={{ scale: 0.9 }}
@@ -333,13 +337,9 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
         </motion.button>
       </div>
 
-      <motion.h3
-        className="text-lg font-geist-mono mb-2 group-hover:text-primary transition-colors"
-        whileHover={{ x: 5 }}
-        transition={{ duration: 0.2 }}
-      >
+      <h3 className="text-base font-medium mb-2 group-hover:text-primary transition-colors">
         {resource.title}
-      </motion.h3>
+      </h3>
 
       <div className="flex items-center justify-between">
         {resource.credit ? (
diff --git a/src/components/resources/ResourceCardSkeleton.tsx b/src/components/resources/ResourceCardSkeleton.tsx
index dca57f44..a9f52005 100644
--- a/src/components/resources/ResourceCardSkeleton.tsx
+++ b/src/components/resources/ResourceCardSkeleton.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 const ResourceCardSkeleton = () => {
   return (
-    <div className="pixel-card p-4 space-y-4">
+    <div className="rounded-xl border border-border bg-card p-4 space-y-4">
       <Skeleton className="aspect-video w-full rounded-md" />
       <div className="space-y-2">
         <Skeleton className="h-5 w-3/4" />
diff --git a/src/components/resources/ResourceDetailDialog.tsx b/src/components/resources/ResourceDetailDialog.tsx
index 8d800ad9..3da6a73f 100644
--- a/src/components/resources/ResourceDetailDialog.tsx
+++ b/src/components/resources/ResourceDetailDialog.tsx
@@ -8,10 +8,8 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
 import { Progress } from '@/components/ui/progress';
 import ResourcePreview from './ResourcePreview';
-import { getCategoryIcon, getCategoryColor } from '@/utils/resourceCategories';
 import { DownloadProgress } from '@/lib/download';
 import { RESOURCES_REPO_RAW_BASE, RESOURCES_REPO_BLOB_BASE } from '@/lib/resourcesRepo';
 import { IconDownload, IconCopy, IconCheck, IconBrandGithub, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
@@ -150,30 +148,26 @@ const ResourceDetailDialog = ({
 
   return (
     <Dialog open={!!resource} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="sm:max-w-2xl pixel-corners border-2 border-cow-purple max-h-[90vh] overflow-y-auto custom-scrollbar">
+      <DialogContent className="sm:max-w-2xl  border border-border max-h-[90vh] overflow-y-auto custom-scrollbar">
         <DialogHeader>
-          <DialogTitle className="text-2xl font-minecraftia">
+          <DialogTitle className="text-2xl font-bold">
             {resource.title}
           </DialogTitle>
-          <DialogDescription asChild className="flex items-center gap-2">
-            <div className="flex items-center gap-2">
-              <Badge
-                variant="outline"
-                className={getCategoryColor(resource.category || '')}
-              >
-                {getCategoryIcon(resource.category || '')}
-                <span className="ml-1 capitalize">{resource.category}</span>
-                {resource.subcategory && (
-                  <span className="ml-1">({resource.subcategory})</span>
-                )}
-              </Badge>
+          <DialogDescription asChild>
+            <div className="min-w-0 truncate text-sm text-muted-foreground">
+              <span className="capitalize">
+                {resource.category === 'minecraft-icons' ? 'Mcicons' : resource.category}
+              </span>
+              {resource.subcategory && (
+                <span className="text-muted-foreground/70"> · {resource.subcategory.replace(/\//g, ' / ')}</span>
+              )}
             </div>
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-5 py-2">
           <div className="border border-border rounded-md p-4">
-            <h4 className="font-jetbrains-mono text-lg mb-1">Attribution</h4>
+            <h4 className="text-lg mb-1">Attribution</h4>
 
             {resource.credit ? (
               <div className="space-y-2">
@@ -191,7 +185,7 @@ const ResourceDetailDialog = ({
                     variant="outline"
                     size="sm"
                     onClick={copyCredit}
-                    className="ml-2 h-8 flex items-center gap-1 pixel-corners"
+                    className="ml-2 h-8 flex items-center gap-1 "
                   >
                     {copied ? (
                       <>
@@ -236,7 +230,7 @@ const ResourceDetailDialog = ({
 
             <Button
               onClick={handleDownloadClick}
-              className="pixel-btn-primary flex items-center justify-center gap-2"
+              className="flex items-center justify-center gap-2"
               disabled={isDownloading}
             >
               <IconDownload className="h-5 w-5" />
@@ -265,7 +259,7 @@ const ResourceDetailDialog = ({
                     ? Math.min(100, (downloadProgress.loaded / downloadProgress.total) * 100)
                     : 100
                 }
-                className="h-2 pixel-corners"
+                className="h-2 "
               />
               <p className="text-xs text-muted-foreground text-center">
                 {downloadProgress.total
diff --git a/src/components/resources/ResourceFilters.tsx b/src/components/resources/ResourceFilters.tsx
index e8eebdf4..33d36d0e 100644
--- a/src/components/resources/ResourceFilters.tsx
+++ b/src/components/resources/ResourceFilters.tsx
@@ -9,7 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Sheet, SheetContent, SheetTrigger, SheetTitle } from '@/components/ui/sheet';
 
 type ResourceFiltersProps = {
   searchQuery: string;
@@ -53,7 +53,7 @@ const ResourceFilters = ({
             onClick={(e) => {
               e.stopPropagation();
             }}
-            className="pixel-input w-full pr-10"
+            className="w-full pr-10"
           />
 
           {searchQuery && (
@@ -110,28 +110,29 @@ const MobileFilters = ({
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button size="icon" className="pixel-corners">
+        <Button size="icon" className="">
           <IconFilter className="h-4 w-4" />
           <span className="sr-only">Filter</span>
         </Button>
       </SheetTrigger>
-      <SheetContent side="bottom" className="h-[80vh] pixel-corners">
+      <SheetContent side="bottom" className="h-[80vh] ">
+        <SheetTitle className="sr-only">Filter resources</SheetTitle>
         <div className="h-full py-4 space-y-4">
-          <h3 className="text-lg font-jetbrains-mono mb-2">
+          <h3 className="text-lg mb-2">
             Filter by Category
           </h3>
           <div className="flex flex-col gap-2">
             <Button
               variant={selectedCategory === null ? 'default' : 'outline'}
               onClick={() => onCategoryChange(null)}
-              className="justify-start pixel-corners"
+              className="justify-start "
             >
               All
             </Button>
             <Button
               variant={selectedCategory === 'music' ? 'default' : 'outline'}
               onClick={() => onCategoryChange('music')}
-              className="justify-start pixel-corners"
+              className="justify-start "
             >
               <IconMusic className="h-4 w-4 mr-2" />
               Music
@@ -139,7 +140,7 @@ const MobileFilters = ({
             <Button
               variant={selectedCategory === 'sfx' ? 'default' : 'outline'}
               onClick={() => onCategoryChange('sfx')}
-              className="justify-start pixel-corners"
+              className="justify-start "
             >
               <IconFileMusic className="h-4 w-4 mr-2" />
               SFX
@@ -147,7 +148,7 @@ const MobileFilters = ({
             <Button
               variant={selectedCategory === 'images' ? 'default' : 'outline'}
               onClick={() => onCategoryChange('images')}
-              className="justify-start pixel-corners"
+              className="justify-start "
             >
               <IconPhoto className="h-4 w-4 mr-2" />
               Images
@@ -155,7 +156,7 @@ const MobileFilters = ({
             <Button
               variant={selectedCategory === 'animations' ? 'default' : 'outline'}
               onClick={() => onCategoryChange('animations')}
-              className="justify-start pixel-corners"
+              className="justify-start "
             >
               <IconVideo className="h-4 w-4 mr-2" />
               Animations
@@ -163,7 +164,7 @@ const MobileFilters = ({
             <Button
               variant={selectedCategory === 'fonts' ? 'default' : 'outline'}
               onClick={() => onCategoryChange('fonts')}
-              className="justify-start pixel-corners"
+              className="justify-start "
             >
               <IconFileText className="h-4 w-4 mr-2" />
               Fonts
@@ -171,7 +172,7 @@ const MobileFilters = ({
             <Button
               variant={selectedCategory === 'presets' ? 'default' : 'outline'}
               onClick={() => onCategoryChange('presets')}
-              className="justify-start pixel-corners"
+              className="justify-start "
             >
               <IconFileText className="h-4 w-4 mr-2" />
               Presets
@@ -179,7 +180,7 @@ const MobileFilters = ({
             <Button
               variant={selectedCategory === 'mcsounds' ? 'default' : 'outline'}
               onClick={() => onCategoryChange('mcsounds')}
-              className="justify-start pixel-corners"
+              className="justify-start "
             >
               <IconVolume className="h-4 w-4 mr-2" />
               Minecraft Sounds
@@ -187,7 +188,7 @@ const MobileFilters = ({
             <Button
               variant={selectedCategory === 'minecraft-icons' ? 'default' : 'outline'}
               onClick={() => onCategoryChange('minecraft-icons')}
-              className="justify-start pixel-corners"
+              className="justify-start "
             >
               <IconLayoutGrid className="h-4 w-4 mr-2" />
               Minecraft Icons
@@ -236,7 +237,7 @@ const MobileFilters = ({
           value={selectedSubcategory || "all"}
           onValueChange={(value) => onSubcategoryChange(value === "all" ? null : value)}
         >
-          <SelectTrigger className="h-10 w-[200px] pixel-corners">
+          <SelectTrigger className="h-10 w-[200px] ">
             <SelectValue placeholder="Select sound type" />
           </SelectTrigger>
           <SelectContent className="max-h-[300px]">
@@ -292,7 +293,7 @@ const DesktopFilters = ({
         variant={selectedCategory === null ? 'default' : 'outline'}
         size="sm"
         onClick={() => onCategoryChange(null)}
-        className="h-10 pixel-corners"
+        className="h-10 "
       >
         All
       </Button>
@@ -300,7 +301,7 @@ const DesktopFilters = ({
         variant={selectedCategory === 'music' ? 'default' : 'outline'}
         size="sm"
         onClick={() => onCategoryChange('music')}
-        className="h-10 pixel-corners"
+        className="h-10 "
       >
         Music
       </Button>
@@ -308,7 +309,7 @@ const DesktopFilters = ({
         variant={selectedCategory === 'sfx' ? 'default' : 'outline'}
         size="sm"
         onClick={() => onCategoryChange('sfx')}
-        className="h-10 pixel-corners"
+        className="h-10 "
       >
         SFX
       </Button>
@@ -316,7 +317,7 @@ const DesktopFilters = ({
         variant={selectedCategory === 'images' ? 'default' : 'outline'}
         size="sm"
         onClick={() => onCategoryChange('images')}
-        className="h-10 pixel-corners"
+        className="h-10 "
       >
         Images
       </Button>
@@ -324,7 +325,7 @@ const DesktopFilters = ({
         variant={selectedCategory === 'animations' ? 'default' : 'outline'}
         size="sm"
         onClick={() => onCategoryChange('animations')}
-        className="h-10 pixel-corners"
+        className="h-10 "
       >
         Animations
       </Button>
@@ -332,7 +333,7 @@ const DesktopFilters = ({
         variant={selectedCategory === 'fonts' ? 'default' : 'outline'}
         size="sm"
         onClick={() => onCategoryChange('fonts')}
-        className="h-10 pixel-corners"
+        className="h-10 "
       >
         Fonts
       </Button>
@@ -340,7 +341,7 @@ const DesktopFilters = ({
         variant={selectedCategory === 'presets' ? 'default' : 'outline'}
         size="sm"
         onClick={() => onCategoryChange('presets')}
-        className="h-10 pixel-corners"
+        className="h-10 "
       >
         Presets
       </Button>
@@ -348,7 +349,7 @@ const DesktopFilters = ({
         variant={selectedCategory === 'mcsounds' ? 'default' : 'outline'}
         size="sm"
         onClick={() => onCategoryChange('mcsounds')}
-        className="h-10 pixel-corners"
+        className="h-10 "
       >
         Minecraft Sounds
       </Button>
@@ -356,7 +357,7 @@ const DesktopFilters = ({
         variant={selectedCategory === 'minecraft-icons' ? 'default' : 'outline'}
         size="sm"
         onClick={() => onCategoryChange('minecraft-icons')}
-        className="h-10 pixel-corners"
+        className="h-10 "
       >
         Minecraft Icons
       </Button>
@@ -368,7 +369,7 @@ const DesktopFilters = ({
           value={selectedSubcategory || "all"}
           onValueChange={(value) => onSubcategoryChange(value === "all" ? null : value)}
         >
-          <SelectTrigger className="h-10 w-[180px] pixel-corners">
+          <SelectTrigger className="h-10 w-[180px] ">
             <SelectValue placeholder="Select preset type" />
           </SelectTrigger>
           <SelectContent>
@@ -384,7 +385,7 @@ const DesktopFilters = ({
           value={selectedSubcategory || "all"}
           onValueChange={(value) => onSubcategoryChange(value === "all" ? null : value)}
         >
-          <SelectTrigger className="h-10 w-[200px] pixel-corners">
+          <SelectTrigger className="h-10 w-[200px] ">
             <SelectValue placeholder="Select icon type" />
           </SelectTrigger>
           <SelectContent className="max-h-[300px]">
diff --git a/src/components/resources/ResourcePreview.tsx b/src/components/resources/ResourcePreview.tsx
index c3feccec..fe8f049a 100644
--- a/src/components/resources/ResourcePreview.tsx
+++ b/src/components/resources/ResourcePreview.tsx
@@ -68,7 +68,7 @@ const ResourcePreview = ({ resource }: ResourcePreviewProps) => {
 
   if (resource.category === 'images' || resource.category === 'minecraft-icons') {
     return (
-      <div className="rounded-md overflow-hidden bg-muted/20 border border-border">
+      <div className="rounded-md overflow-hidden bg-muted border border-border">
         <img
           src={resource.image_url || downloadURL}
           alt={resource.title}
@@ -103,7 +103,7 @@ const ResourcePreview = ({ resource }: ResourcePreviewProps) => {
   if (resource.category === 'presets') {
     if (hasError) {
       return (
-        <div className="p-4 text-center rounded-md bg-muted/20 border border-border">
+        <div className="p-4 text-center rounded-md bg-muted border border-border">
           <p>Sorry, there's no preview for this preset.</p>
           <p className="text-sm text-muted-foreground mt-2">
             You can help out creating previews for presets by joining our Discord!
@@ -113,7 +113,7 @@ const ResourcePreview = ({ resource }: ResourcePreviewProps) => {
               href="https://discord.renderdragon.org"
               target="_blank"
               rel="noopener"
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center gap-2"
+              className="px-4 py-2 bg-primary text-primary-foreground chamfer font-medium hover:bg-primary/90 transition-colors flex items-center gap-2"
             >
               <img className='w-5 h-5' src="/assets/discord_icon.png" alt="Discord"></img>
               Join our Discord
diff --git a/src/components/resources/ResourcesList.tsx b/src/components/resources/ResourcesList.tsx
index efd2d35e..4f4e5e02 100644
--- a/src/components/resources/ResourcesList.tsx
+++ b/src/components/resources/ResourcesList.tsx
@@ -121,13 +121,13 @@ const ResourcesList = ({
           <Button
             onClick={onClearFilters}
             variant="outline"
-            className="pixel-corners"
+            className=""
           >
             <IconX className="mr-2 h-4 w-4" />
             Clear Filters
           </Button>
           <Button
-            className="pixel-corners bg-cow-purple hover:bg-cow-purple/80"
+            className=" bg-primary hover:bg-primary/90"
             onClick={() =>
               window.open("https://discord.renderdragon.org", "_blank", "noopener,noreferrer")
             }
@@ -140,7 +140,7 @@ const ResourcesList = ({
             Contribute Resources
           </Button>
           <Button
-            className="pixel-corners bg-cow-purple hover:bg-cow-purple/80"
+            className=" bg-primary hover:bg-primary/90"
             onClick={() =>
               window.open(
                 "https://creatoronwheels.netlify.app/resources",
diff --git a/src/components/resources/SortSelector.tsx b/src/components/resources/SortSelector.tsx
index 79ea6708..92518c6f 100644
--- a/src/components/resources/SortSelector.tsx
+++ b/src/components/resources/SortSelector.tsx
@@ -15,7 +15,7 @@ interface SortSelectorProps {
 const SortSelector: React.FC<SortSelectorProps> = ({ sortOrder, onSortOrderChange }) => {
   return (
     <Select value={sortOrder} onValueChange={onSortOrderChange}>
-      <SelectTrigger className="h-10 w-full md:w-[180px] pixel-corners">
+      <SelectTrigger className="h-10 w-full md:w-[180px]">
         <SelectValue placeholder="Sort By" />
       </SelectTrigger>
       <SelectContent>
diff --git a/src/components/skeletons/AccountPageSkeleton.tsx b/src/components/skeletons/AccountPageSkeleton.tsx
index 9e29a65c..501f2746 100644
--- a/src/components/skeletons/AccountPageSkeleton.tsx
+++ b/src/components/skeletons/AccountPageSkeleton.tsx
@@ -9,7 +9,7 @@ const AccountPageSkeleton = () => (
       <Skeleton className="h-10 w-64" />
     </div>
 
-    <Card className="pixel-corners border-2 border-cow-purple/20">
+    <Card className=" border-2 border-primary/20">
       <CardHeader className="pb-4">
         <div className="flex items-center gap-3">
           <Skeleton className="h-16 w-16 rounded-full" />
diff --git a/src/components/skeletons/AdminResourcesManagerSkeleton.tsx b/src/components/skeletons/AdminResourcesManagerSkeleton.tsx
index 6bcfb147..29509066 100644
--- a/src/components/skeletons/AdminResourcesManagerSkeleton.tsx
+++ b/src/components/skeletons/AdminResourcesManagerSkeleton.tsx
@@ -16,7 +16,7 @@ const AdminResourcesManagerSkeleton = () => {
       {/* Stats Cards */}
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
         {Array.from({ length: 6 }).map((_, index) => (
-          <Card key={index} className="pixel-corners">
+          <Card key={index} className="">
             <CardContent className="p-4 flex flex-col items-center justify-center">
               <Skeleton className="h-7 w-12 mb-2" />
               <Skeleton className="h-4 w-20" />
@@ -34,7 +34,7 @@ const AdminResourcesManagerSkeleton = () => {
       {/* Resources Grid */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {Array.from({ length: 6 }).map((_, index) => (
-          <Card key={index} className="pixel-corners overflow-hidden">
+          <Card key={index} className=" overflow-hidden">
             <CardContent className="p-4">
               <div className="flex items-start justify-between mb-3">
                 <div className="flex-1">
diff --git a/src/components/skeletons/GuideCardSkeleton.tsx b/src/components/skeletons/GuideCardSkeleton.tsx
index e11ca4b5..7fc800d4 100644
--- a/src/components/skeletons/GuideCardSkeleton.tsx
+++ b/src/components/skeletons/GuideCardSkeleton.tsx
@@ -1,7 +1,7 @@
 import { Skeleton } from "@/components/ui/skeleton";
 
 const GuideCardSkeleton = () => (
-  <div className="pixel-corners border border-border p-4 space-y-3">
+  <div className=" border border-border p-4 space-y-3">
     <div className="flex justify-between items-start mb-2">
       <div className="flex gap-2">
         <Skeleton className="h-6 w-20 rounded-md" />
diff --git a/src/components/skeletons/PlayerRenderSkeleton.tsx b/src/components/skeletons/PlayerRenderSkeleton.tsx
index b3ef0a4b..ab0a23ef 100644
--- a/src/components/skeletons/PlayerRenderSkeleton.tsx
+++ b/src/components/skeletons/PlayerRenderSkeleton.tsx
@@ -1,7 +1,7 @@
 import { Skeleton } from "@/components/ui/skeleton";
 
 const PlayerRenderSkeleton = () => (
-  <div className="pixel-card flex flex-col">
+  <div className="rounded-xl border border-border bg-card p-4 flex flex-col">
     <Skeleton className="h-6 w-1/2 mx-auto mb-2" />
     <div className="aspect-square relative">
       <Skeleton className="w-full h-full" />
diff --git a/src/components/skeletons/ServerCardSkeleton.tsx b/src/components/skeletons/ServerCardSkeleton.tsx
index 4449881e..472a7c0d 100644
--- a/src/components/skeletons/ServerCardSkeleton.tsx
+++ b/src/components/skeletons/ServerCardSkeleton.tsx
@@ -1,7 +1,7 @@
 import { Skeleton } from "@/components/ui/skeleton";
 
 const ServerCardSkeleton = () => (
-  <div className="pixel-card overflow-hidden p-6 flex flex-col h-full space-y-4">
+  <div className="rounded-xl border border-border bg-card p-4 overflow-hidden p-6 flex flex-col h-full space-y-4">
     <div className="flex items-center gap-4">
       <Skeleton className="w-16 h-16 rounded-full" />
       <div className="flex-1 space-y-2">
diff --git a/src/components/skeletons/VideoCardSkeleton.tsx b/src/components/skeletons/VideoCardSkeleton.tsx
index 36845bae..e33f44f6 100644
--- a/src/components/skeletons/VideoCardSkeleton.tsx
+++ b/src/components/skeletons/VideoCardSkeleton.tsx
@@ -1,7 +1,7 @@
 import { Skeleton } from "@/components/ui/skeleton";
 
 const VideoCardSkeleton = () => (
-  <div className="min-w-[300px] max-w-[300px] pixel-card space-y-3">
+  <div className="min-w-[300px] max-w-[300px] rounded-xl border border-border bg-card p-4 space-y-3">
     <Skeleton className="w-full h-[168px] rounded-md" />
     <Skeleton className="h-5 w-3/4" />
     <Skeleton className="h-4 w-1/2" />
diff --git a/src/components/skeletons/VideoInfoSkeleton.tsx b/src/components/skeletons/VideoInfoSkeleton.tsx
index 08c6b13b..6c8da3fe 100644
--- a/src/components/skeletons/VideoInfoSkeleton.tsx
+++ b/src/components/skeletons/VideoInfoSkeleton.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 const VideoInfoSkeleton = () => {
   return (
-    <div className="pixel-card mt-8">
+    <div className="rounded-xl border border-border bg-card p-4 mt-8">
       <div className="flex flex-col md:flex-row gap-6">
         <Skeleton className="w-full md:w-1/3 h-48 md:h-auto rounded-lg" />
         <div className="w-full md:w-2/3 space-y-4">
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 4bd79370..42a24ee0 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] chamfer",
         className
       )}
       {...props}
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 41fa7e05..20eede85 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full chamfer border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     variants: {
       variant: {
diff --git a/src/components/ui/button-variants.ts b/src/components/ui/button-variants.ts
index 3a2def8c..409a92c2 100644
--- a/src/components/ui/button-variants.ts
+++ b/src/components/ui/button-variants.ts
@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority"
 
 export const buttonVariants = cva(
-    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    "chamfer inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
     {
         variants: {
             variant: {
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index 6b46fce5..fb732b06 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -32,9 +32,9 @@ function Calendar({
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
         head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+          "text-muted-foreground chamfer w-9 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
@@ -44,7 +44,7 @@ function Calendar({
           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
         day_today: "bg-accent text-accent-foreground",
         day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent aria-selected:text-muted-foreground aria-selected:opacity-30",
         day_disabled: "text-muted-foreground opacity-50",
         day_range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index afa13ecf..8b440a17 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "chamfer border bg-card text-card-foreground",
       className
     )}
     {...props}
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index 88cd9742..ce4c3854 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -177,7 +177,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          "grid min-w-[8rem] items-start gap-1.5 chamfer border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
           className
         )}
       >
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 7149d716..cd13c098 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -14,7 +14,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      "flex h-full w-full flex-col overflow-hidden chamfer bg-popover text-popover-foreground",
       className
     )}
     {...props}
@@ -48,7 +48,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full chamfer bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
index 1b8c6591..9b61c231 100644
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -51,7 +51,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden chamfer border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -223,7 +223,7 @@ const ContextMenuSubContent = React.forwardRef<
     <ContextMenuPrimitive.SubContent
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden chamfer border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 02d356d0..cc701075 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       aria-describedby={undefined}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] chamfer",
         className
       )}
       {...props}
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 7b426ae4..ca4c1947 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -53,7 +53,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden chamfer border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -72,7 +72,7 @@ const DropdownMenuContent = React.forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "z-50 min-w-[8rem] overflow-hidden chamfer border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           className
         )}
         {...props}
diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx
index 863ff014..6d0da8b6 100644
--- a/src/components/ui/hover-card.tsx
+++ b/src/components/ui/hover-card.tsx
@@ -16,7 +16,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 w-64 chamfer border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 68551b92..4a96d346 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full chamfer border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index 0b9a430a..8170cd23 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -21,7 +21,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+      "flex h-10 items-center space-x-1 chamfer border bg-background p-1",
       className
     )}
     {...props}
@@ -72,7 +72,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden chamfer border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -95,7 +95,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "z-50 min-w-[12rem] overflow-hidden chamfer border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           className
         )}
         {...props}
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
index ad368c30..1640bffb 100644
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -84,7 +84,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden chamfer border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
         className
       )}
       ref={ref}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index bbba7e0e..019da184 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -17,7 +17,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 chamfer border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index 105fb650..c0f517f1 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -10,7 +10,7 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      "relative h-4 w-full overflow-hidden chamfer bg-secondary",
       className
     )}
     {...props}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 84b66e7d..cb3ae7c0 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between chamfer border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -70,30 +70,12 @@ const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(({ className, children, position = "popper", ...props }, ref) => {
-  // Add effect to prevent layout shift when opening select dropdown
-  React.useEffect(() => {
-    const html = document.documentElement;
-    const scrollbarWidth = window.innerWidth - html.clientWidth;
-    
-    if (scrollbarWidth > 0) {
-      const originalPaddingRight = getComputedStyle(html).getPropertyValue('padding-right');
-      
-      html.style.paddingRight = `${scrollbarWidth}px`;
-      html.style.overflow = 'hidden';
-      
-      return () => {
-        html.style.paddingRight = originalPaddingRight;
-        html.style.overflow = '';
-      };
-    }
-  }, []);
-
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
         ref={ref}
         className={cn(
-          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden chamfer border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 4e342350..49a2004a 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -227,7 +227,7 @@ const Sidebar = React.forwardRef<
         >
           <div
             data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:chamfer group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
           >
             {children}
           </div>
@@ -302,7 +302,7 @@ const SidebarInset = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex min-h-svh flex-1 flex-col bg-background",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:chamfer md:peer-data-[variant=inset]:shadow",
         className
       )}
       {...props}
@@ -418,7 +418,7 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "duration-200 flex h-8 shrink-0 items-center chamfer px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       )}
@@ -439,7 +439,7 @@ const SidebarGroupAction = React.forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center chamfer p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "group-data-[collapsible=icon]:hidden",
@@ -491,7 +491,7 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = "SidebarMenuItem"
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden chamfer p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -585,7 +585,7 @@ const SidebarMenuAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center chamfer p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
@@ -610,7 +610,7 @@ const SidebarMenuBadge = React.forwardRef<
     ref={ref}
     data-sidebar="menu-badge"
     className={cn(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "absolute right-1 flex h-5 min-w-5 items-center justify-center chamfer px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
       "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
@@ -638,12 +638,12 @@ const SidebarMenuSkeleton = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="menu-skeleton"
-      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      className={cn("chamfer h-8 flex gap-2 px-2 items-center", className)}
       {...props}
     >
       {showIcon && (
         <Skeleton
-          className="size-4 rounded-md"
+          className="size-4 chamfer"
           data-sidebar="menu-skeleton-icon"
         />
       )}
@@ -701,7 +701,7 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden chamfer px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
index 01b8b6d4..ff5dc69a 100644
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn("animate-pulse chamfer bg-muted", className)}
       {...props}
     />
   )
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index e161daec..0a553534 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -15,7 +15,7 @@ const Slider = React.forwardRef<
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden chamfer bg-secondary">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
     <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 1128edfc..41c699ce 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,14 +1,11 @@
-import { useTheme } from "next-themes"
 import { Toaster as Sonner } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme="dark"
       className="toaster group"
       toastOptions={{
         classNames: {
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 7f3502f8..8eeca656 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-t bg-muted font-medium [&>tr]:last:border-b-0",
       className
     )}
     {...props}
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-colors hover:bg-muted data-[state=selected]:bg-muted",
       className
     )}
     {...props}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index f57fffdb..285eb490 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "inline-flex h-10 items-center justify-center chamfer bg-muted p-1 text-muted-foreground",
       className
     )}
     {...props}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 12c91369..a748dbd4 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full chamfer border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index da50925f..b5d28ac8 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden chamfer border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
@@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center chamfer border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
       className
     )}
     {...props}
@@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-2 top-2 chamfer p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className
     )}
     toast-close=""
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index e121f0ae..b6643fe8 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden chamfer border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
diff --git a/src/global.css b/src/global.css
deleted file mode 100644
index 26ddfd53..00000000
--- a/src/global.css
+++ /dev/null
@@ -1,370 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 222.2 84% 4.9%;
-
-        --card: 0 0% 100%;
-        --card-foreground: 222.2 84% 4.9%;
-
-        --popover: 0 0% 100%;
-        --popover-foreground: 222.2 84% 4.9%;
-
-        --primary: 222.2 47.4% 11.2%;
-        --primary-foreground: 210 40% 98%;
-
-        --secondary: 210 40% 96.1%;
-        --secondary-foreground: 222.2 47.4% 11.2%;
-
-        --muted: 210 40% 96.1%;
-        --muted-foreground: 215.4 16.3% 46.9%;
-
-        --accent: 210 40% 96.1%;
-        --accent-foreground: 222.2 47.4% 11.2%;
-
-        --accent: 210 40% 96.1%;
-        --accent-foreground: 222.2 47.4% 11.2%;
-
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 210 40% 98%;
-
-        --border: 214.3 31.8% 91.4%;
-        --input: 214.3 31.8% 91.4%;
-        --ring: 222.2 84% 4.9%;
-
-        --radius: 0.5rem;
-    }
-
-    .dark {
-        --background: 222.2 84% 4.9%;
-        --foreground: 210 40% 98%;
-
-        --card: 222.2 84% 4.9%;
-        --card-foreground: 210 40% 98%;
-
-        --popover: 222.2 84% 4.9%;
-        --popover-foreground: 210 40% 98%;
-
-        --primary: 210 40% 98%;
-        --primary-foreground: 222.2 47.4% 11.2%;
-
-        --secondary: 217.2 32.6% 17.5%;
-        --secondary-foreground: 210 40% 98%;
-
-        --muted: 217.2 32.6% 17.5%;
-        --muted-foreground: 215 20.2% 65.1%;
-
-        --accent: 217.2 32.6% 17.5%;
-        --accent-foreground: 210 40% 98%;
-
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 210 40% 98%;
-
-        --border: 217.2 32.6% 17.5%;
-        --input: 217.2 32.6% 17.5%;
-        --ring: 212.7 26.8% 83.9%;
-    }
-}
-
-@layer base {
-    * {
-        @apply border-border;
-    }
-    body {
-        @apply bg-background text-foreground;
-    }
-}
-
-/* Custom scrollbar styling */
-html {
-    scroll-behavior: smooth;
-}
-
-/* Enhanced custom scrollbar with cow-purple theme */
-.custom-scrollbar::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-    background: hsl(var(--muted) / 0.1);
-    border-radius: 4px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-    background: hsl(var(--cow-purple, #9b87f5));
-    border-radius: 4px;
-    border: 1px solid hsl(var(--cow-purple, #9b87f5) / 0.2);
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--cow-purple-dark, #7e69ab));
-    border-color: hsl(var(--cow-purple-dark, #7e69ab) / 0.3);
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:active {
-    background: hsl(var(--cow-purple-dark, #6b5a97));
-    border-color: hsl(var(--cow-purple-dark, #6b5a97) / 0.4);
-}
-
-/* Custom scrollbar corner */
-.custom-scrollbar::-webkit-scrollbar-corner {
-    background: hsl(var(--muted) / 0.05);
-}
-
-/* Horizontal scrollbar specific styling */
-.custom-scrollbar::-webkit-scrollbar-horizontal {
-    height: 8px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-horizontal:track {
-    background: hsl(var(--muted) / 0.1);
-    border-radius: 4px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-horizontal:thumb {
-    background: hsl(var(--cow-purple, #9b87f5));
-    border-radius: 4px;
-    border: 1px solid hsl(var(--cow-purple, #9b87f5) / 0.2);
-}
-
-/* Global scrollbar styling for all elements */
-html,
-body {
-    scrollbar-width: thin;
-    scrollbar-color: hsl(var(--cow-purple, #9b87f5)) hsl(var(--muted) / 0.1);
-    overflow-x: hidden;
-    height: 100%;
-}
-
-/* Body scrollbar styling */
-body::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-body::-webkit-scrollbar-track {
-    background: hsl(var(--muted) / 0.1);
-    border-radius: 4px;
-}
-
-body::-webkit-scrollbar-thumb {
-    background: hsl(var(--cow-purple, #9b87f5));
-    border-radius: 4px;
-    border: 1px solid hsl(var(--cow-purple, #9b87f5) / 0.2);
-}
-
-body::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--cow-purple-dark, #7e69ab));
-    border-color: hsl(var(--cow-purple-dark, #7e69ab) / 0.3);
-}
-
-body::-webkit-scrollbar-thumb:active {
-    background: hsl(var(--cow-purple-dark, #6b5a97));
-    border-color: hsl(var(--cow-purple-dark, #6b5a97) / 0.4);
-}
-
-body::-webkit-scrollbar-corner {
-    background: hsl(var(--muted) / 0.05);
-}
-
-/* Textarea scrollbar styling */
-textarea::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-textarea::-webkit-scrollbar-track {
-    background: hsl(var(--muted) / 0.1);
-    border-radius: 4px;
-}
-
-textarea::-webkit-scrollbar-thumb {
-    background: hsl(var(--cow-purple, #9b87f5));
-    border-radius: 4px;
-    border: 1px solid hsl(var(--cow-purple, #9b87f5) / 0.2);
-}
-
-textarea::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--cow-purple-dark, #7e69ab));
-    border-color: hsl(var(--cow-purple-dark, #7e69ab) / 0.3);
-}
-
-textarea::-webkit-scrollbar-thumb:active {
-    background: hsl(var(--cow-purple-dark, #6b5a97));
-    border-color: hsl(var(--cow-purple-dark, #6b5a97) / 0.4);
-}
-
-/* Select dropdown scrollbar styling */
-select::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-select::-webkit-scrollbar-track {
-    background: hsl(var(--muted) / 0.1);
-    border-radius: 4px;
-}
-
-select::-webkit-scrollbar-thumb {
-    background: hsl(var(--cow-purple, #9b87f5));
-    border-radius: 4px;
-    border: 1px solid hsl(var(--cow-purple, #9b87f5) / 0.2);
-}
-
-select::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--cow-purple-dark, #7e69ab));
-    border-color: hsl(var(--cow-purple-dark, #7e69ab) / 0.3);
-}
-
-/* Modal/dialog scrollbar styling */
-.modal-content::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-.modal-content::-webkit-scrollbar-track {
-    background: hsl(var(--muted) / 0.1);
-    border-radius: 4px;
-}
-
-.modal-content::-webkit-scrollbar-thumb {
-    background: hsl(var(--cow-purple, #9b87f5));
-    border-radius: 4px;
-    border: 1px solid hsl(var(--cow-purple, #9b87f5) / 0.2);
-}
-
-.modal-content::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--cow-purple-dark, #7e69ab));
-    border-color: hsl(var(--cow-purple-dark, #7e69ab) / 0.3);
-}
-
-/* Utility classes for scrollbar control */
-.scrollbar-thin {
-    scrollbar-width: thin;
-    scrollbar-color: hsl(var(--cow-purple, #9b87f5)) hsl(var(--muted) / 0.1);
-}
-
-.scrollbar-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-}
-
-.scrollbar-hide::-webkit-scrollbar {
-    display: none;
-}
-
-/* Smooth scrolling for all elements */
-.smooth-scroll {
-    scroll-behavior: smooth;
-}
-
-/* Hide scrollbar but keep functionality */
-.hide-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-}
-
-.hide-scrollbar::-webkit-scrollbar {
-    display: none;
-}
-
-/* Custom scrollbar for specific containers */
-.enhanced-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: hsl(var(--cow-purple, #9b87f5)) hsl(var(--muted) / 0.1);
-}
-
-.enhanced-scrollbar::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-.enhanced-scrollbar::-webkit-scrollbar-track {
-    background: hsl(var(--muted) / 0.1);
-    border-radius: 4px;
-}
-
-.enhanced-scrollbar::-webkit-scrollbar-thumb {
-    background: hsl(var(--cow-purple, #9b87f5));
-    border-radius: 4px;
-    border: 1px solid hsl(var(--cow-purple, #9b87f5) / 0.2);
-    transition: all 0.2s ease;
-}
-
-.enhanced-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--cow-purple-dark, #7e69ab));
-    border-color: hsl(var(--cow-purple-dark, #7e69ab) / 0.3);
-    transform: scale(1.1);
-}
-
-.enhanced-scrollbar::-webkit-scrollbar-thumb:active {
-    background: hsl(var(--cow-purple-dark, #6b5a97));
-    border-color: hsl(var(--cow-purple-dark, #6b5a97) / 0.4);
-    transform: scale(0.95);
-}
-
-/* Dark mode scrollbar adjustments */
-.dark .custom-scrollbar::-webkit-scrollbar-track {
-    background: hsl(var(--muted) / 0.2);
-}
-
-.dark .custom-scrollbar::-webkit-scrollbar-thumb {
-    background: hsl(var(--cow-purple, #9b87f5));
-    border: 1px solid hsl(var(--cow-purple, #9b87f5) / 0.3);
-}
-
-.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--cow-purple-light, #b8a8ff));
-    border-color: hsl(var(--cow-purple-light, #b8a8ff) / 0.4);
-}
-
-/* Horizontal scrollbar specific enhancements */
-.horizontal-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: hsl(var(--cow-purple, #9b87f5)) hsl(var(--muted) / 0.1);
-}
-
-.horizontal-scrollbar::-webkit-scrollbar-horizontal {
-    height: 10px;
-}
-
-.horizontal-scrollbar::-webkit-scrollbar-track {
-    background: hsl(var(--muted) / 0.1);
-    border-radius: 5px;
-}
-
-.horizontal-scrollbar::-webkit-scrollbar-thumb {
-    background: hsl(var(--cow-purple, #9b87f5));
-    border-radius: 5px;
-    border: 1px solid hsl(var(--cow-purple, #9b87f5) / 0.2);
-    min-height: 20px;
-}
-
-.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--cow-purple-dark, #7e69ab));
-    border-color: hsl(var(--cow-purple-dark, #7e69ab) / 0.3);
-}
-
-/* Animation for scrollbar thumb */
-@keyframes scrollbarPulse {
-    0%,
-    100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.7;
-    }
-}
-
-.enhanced-scrollbar::-webkit-scrollbar-thumb {
-    animation: scrollbarPulse 2s ease-in-out infinite;
-}
-
-/* Remove animation on hover for better UX */
-.enhanced-scrollbar::-webkit-scrollbar-thumb:hover {
-    animation: none;
-}
diff --git a/src/index.css b/src/index.css
index bda0fcf9..6715d3b3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Pixel fonts are retained for brand accents and generator output only. */
 @font-face {
   font-family: Minecraftia;
   src: url('/fonts/minecraftia.woff2') format('woff2');
@@ -21,104 +22,59 @@
 }
 
 @layer base {
+  /*
+   * Single dark-only palette. The app no longer ships a light theme, so the
+   * tokens live at :root and there is intentionally no `.dark` override.
+   * Base surfaces are cool near-black, ink is near-white, and the one brand
+   * colour is the RenderDragon purple used sparingly for emphasis and actions.
+   */
   :root {
-    --background: 230 20% 98%;
-    --foreground: 228 19% 15%;
+    --background: 222 18% 5%;
+    --foreground: 220 14% 96%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 228 19% 15%;
+    --card: 222 16% 8%;
+    --card-foreground: 220 14% 96%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 228 19% 15%;
+    --popover: 222 16% 8%;
+    --popover-foreground: 220 14% 96%;
 
-    --primary: 259 70% 75%;
-    --primary-foreground: 0 0% 100%;
+    /* Brand: #9B87F5. Paired with a dark foreground for accessible contrast. */
+    --primary: 251 85% 75%;
+    --primary-foreground: 222 18% 5%;
 
-    --secondary: 228 6% 90%;
-    --secondary-foreground: 228 19% 15%;
+    /* White, for high-emphasis secondary actions. */
+    --secondary: 220 14% 96%;
+    --secondary-foreground: 222 18% 5%;
 
-    --muted: 228 6% 90%;
-    --muted-foreground: 228 10% 50%;
+    --muted: 222 14% 13%;
+    --muted-foreground: 218 11% 62%;
 
-    --accent: 228 6% 90%;
-    --accent-foreground: 228 19% 15%;
+    --accent: 222 14% 15%;
+    --accent-foreground: 220 14% 96%;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: 0 72% 56%;
+    --destructive-foreground: 0 0% 100%;
 
-    --border: 228 16% 84%;
-    --input: 228 16% 84%;
-    --ring: 259 70% 75%;
+    --border: 220 12% 16%;
+    --input: 220 12% 16%;
+    --ring: 251 85% 75%;
 
-    --radius: 0.5rem;
+    --radius: 0.625rem;
 
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-background: 222 18% 4%;
+    --sidebar-foreground: 220 14% 96%;
+    --sidebar-primary: 251 85% 75%;
+    --sidebar-primary-foreground: 222 18% 5%;
+    --sidebar-accent: 222 14% 15%;
+    --sidebar-accent-foreground: 220 14% 96%;
+    --sidebar-border: 220 12% 16%;
+    --sidebar-ring: 251 85% 75%;
 
-    --cow-purple: 259, 70%, 75%;
-    --cow-purple-dark: 259, 70%, 65%;
-    --cow-dark: 228, 19%, 15%;
-
-    --chart-1: 259 70% 75%;
-    --chart-2: 199 76% 49%;
-    --chart-3: 280 65% 60%;
-    --chart-4: 173 80% 40%;
-    --chart-5: 38 92% 50%;
-  }
-
-  .dark {
-    --background: 228 19% 15%;
-    --foreground: 228 6% 90%;
-
-    --card: 228 19% 15%;
-    --card-foreground: 228 6% 90%;
-
-    --popover: 228 19% 15%;
-    --popover-foreground: 228 6% 90%;
-
-    --primary: 259 70% 75%;
-    --primary-foreground: 0 0% 100%;
-
-    --secondary: 228 10% 22%;
-    --secondary-foreground: 228 6% 90%;
-
-    --muted: 228 10% 22%;
-    --muted-foreground: 228 6% 65%;
-
-    --accent: 228 10% 22%;
-    --accent-foreground: 228 6% 90%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 228 10% 22%;
-    --input: 228 10% 22%;
-    --ring: 259 70% 75%;
-
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-
-    --cow-purple: 259, 70%, 75%;
-    --cow-purple-dark: 259, 70%, 65%;
-    --cow-dark: 228, 19%, 15%;
-
-    --chart-1: 259 70% 75%;
-    --chart-2: 199 76% 49%;
-    --chart-3: 280 65% 60%;
-    --chart-4: 173 80% 40%;
-    --chart-5: 38 92% 50%;
+    --chart-1: 251 85% 75%;
+    --chart-2: 199 76% 55%;
+    --chart-3: 265 70% 66%;
+    --chart-4: 162 60% 46%;
+    --chart-5: 40 92% 55%;
   }
 }
 
@@ -127,8 +83,13 @@
     @apply border-border;
   }
 
+  html {
+    color-scheme: dark;
+    scroll-behavior: smooth;
+  }
+
   body {
-    @apply bg-background text-foreground font-chakra;
+    @apply bg-background text-foreground font-sans antialiased;
   }
 
   h1,
@@ -137,66 +98,20 @@
   h4,
   h5,
   h6 {
-    @apply font-pixel;
-  }
-
-  .pixel-corners {
-    clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
-        100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
-        4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
+    @apply font-heading font-bold tracking-tight;
   }
 
   .pixelated {
     image-rendering: pixelated;
   }
-
-
-
 }
 
 @layer components {
-  .pixel-btn {
-    @apply relative px-6 py-2 text-lg uppercase tracking-wider border-2 bg-opacity-90 pixel-corners transition-all duration-300;
-  }
-
-  .pixel-btn-primary {
-    @apply pixel-btn bg-cow-purple hover:bg-cow-purple-dark text-white font-medium px-4 py-2 rounded-md transition-colors pixel-corners;
-  }
-
-  .pixel-btn-secondary {
-    @apply pixel-btn border-cow-purple text-cow-purple hover:bg-cow-purple hover:text-white;
-  }
-
-  .pixel-card {
-    @apply bg-card border-2 border-primary/50 pixel-corners p-4 shadow-lg transition-all duration-300 hover:shadow-xl;
-  }
-
-  .pixel-input {
-    @apply bg-input border-2 border-primary/50 pixel-corners p-2 focus:outline-none focus:ring-2 focus:ring-primary;
-  }
-
-  .neon-border {
-    @apply border-2 animate-pulse-neon;
-  }
-
   .cow-grid-bg {
-    background-image: linear-gradient(rgba(155, 135, 245, 0.1) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(155, 135, 245, 0.1) 1px, transparent 1px);
-    background-size: 20px 20px;
-  }
-
-  .parallax-hero {
-    @apply relative overflow-hidden;
+    background-image: linear-gradient(hsl(var(--foreground) / 0.035) 1px, transparent 1px),
+      linear-gradient(90deg, hsl(var(--foreground) / 0.035) 1px, transparent 1px);
+    background-size: 32px 32px;
   }
-
-  .parallax-layer {
-    @apply absolute w-full h-full top-0 left-0;
-    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
-  }
-}
-
-.font-pixel {
-  font-family: 'Press Start 2P', cursive;
 }
 
 .font-minecraftia {
@@ -211,76 +126,103 @@
   font-family: 'Minecraft Five Bold', monospace;
 }
 
-.tool-planks-hover {
-  background-color: #8b5a35;
-  background-image: linear-gradient(90deg, rgba(48, 25, 12, 0.22) 1px, transparent 1px), linear-gradient(rgba(255, 210, 150, 0.16) 1px, transparent 1px);
-  background-size: 144px 100%, 100% 34px;
+.font-geist {
+  font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }
 
-.font-jetbrains-mono {
-  font-family: 'JetBrains Mono', monospace;
+/* ---------------------------------------------------------------------------
+ * Scrollbars (merged from the former global.css)
+ * ------------------------------------------------------------------------- */
+html,
+body {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--primary)) hsl(var(--muted) / 0.2);
+  overflow-x: clip;
 }
 
-.font-chakra {
-  font-family: 'Chakra Petch', sans-serif;
+.custom-scrollbar::-webkit-scrollbar,
+.enhanced-scrollbar::-webkit-scrollbar,
+.horizontal-scrollbar::-webkit-scrollbar,
+body::-webkit-scrollbar,
+textarea::-webkit-scrollbar,
+select::-webkit-scrollbar,
+.modal-content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
 }
 
-.font-geist {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+.custom-scrollbar::-webkit-scrollbar-track,
+.enhanced-scrollbar::-webkit-scrollbar-track,
+.horizontal-scrollbar::-webkit-scrollbar-track,
+body::-webkit-scrollbar-track,
+textarea::-webkit-scrollbar-track,
+select::-webkit-scrollbar-track,
+.modal-content::-webkit-scrollbar-track {
+  background: hsl(var(--muted) / 0.2);
+  border-radius: 4px;
 }
 
-.bg-cow-purple {
-  background-color: hsl(var(--cow-purple));
+.custom-scrollbar::-webkit-scrollbar-thumb,
+.enhanced-scrollbar::-webkit-scrollbar-thumb,
+.horizontal-scrollbar::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb,
+textarea::-webkit-scrollbar-thumb,
+select::-webkit-scrollbar-thumb,
+.modal-content::-webkit-scrollbar-thumb {
+  background: hsl(var(--primary) / 0.7);
+  border-radius: 4px;
+  border: 1px solid hsl(var(--primary) / 0.2);
 }
 
-.bg-cow-purple-dark {
-  background-color: hsl(var(--cow-purple-dark));
+.custom-scrollbar::-webkit-scrollbar-thumb:hover,
+.enhanced-scrollbar::-webkit-scrollbar-thumb:hover,
+.horizontal-scrollbar::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover,
+textarea::-webkit-scrollbar-thumb:hover,
+select::-webkit-scrollbar-thumb:hover,
+.modal-content::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--primary));
 }
 
-.bg-cow-dark {
-  background-color: hsl(var(--cow-dark));
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--primary)) hsl(var(--muted) / 0.2);
 }
 
-.text-cow-purple {
-  color: hsl(var(--primary));
+.scrollbar-hide,
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
-/* Define hover variants */
-.hover\:bg-cow-purple:hover {
-  background-color: hsl(var(--cow-purple));
+.scrollbar-hide::-webkit-scrollbar,
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
 }
 
-.hover\:bg-cow-purple-dark:hover {
-  background-color: hsl(var(--cow-purple-dark));
+.smooth-scroll {
+  scroll-behavior: smooth;
 }
 
-.hover\:text-cow-purple:hover {
-  color: hsl(var(--primary));
+.enhanced-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--primary)) hsl(var(--muted) / 0.2);
 }
 
-/* Additional CSS to ensure light/dark mode visibility */
-@media (prefers-color-scheme: light) {
-  .text-foreground {
-    color: hsl(var(--foreground));
-  }
-
-  .text-foreground\/80 {
-    color: hsl(var(--foreground) / 0.8);
-  }
-
-  .text-foreground\/70 {
-    color: hsl(var(--foreground) / 0.7);
-  }
+.horizontal-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--primary)) hsl(var(--muted) / 0.2);
 }
 
-/* Video.js Pixel Theme */
+/* Video.js player theme */
 .video-js.vjs-custom-skin {
-  border: 2px solid hsl(var(--primary) / 0.5) !important;
-  border-radius: 0 !important;
+  border: 1px solid hsl(var(--border)) !important;
+  border-radius: var(--radius) !important;
 }
 
 .video-js .vjs-big-play-button {
-  background-color: hsl(var(--cow-purple)) !important;
+  background-color: hsl(var(--primary)) !important;
+  color: hsl(var(--primary-foreground)) !important;
   border: none !important;
   line-height: 1.5em !important;
   height: 1.5em !important;
@@ -289,18 +231,47 @@
   top: 50% !important;
   margin-left: -0.75em !important;
   margin-top: -0.75em !important;
-  border-radius: 0 !important;
+  border-radius: 9999px !important;
 }
 
 .video-js .vjs-control-bar {
-  background-color: hsl(var(--cow-dark) / 0.9) !important;
+  background-color: hsl(var(--background) / 0.9) !important;
 }
 
 .video-js .vjs-play-progress,
 .video-js .vjs-volume-level {
-  background-color: hsl(var(--cow-purple)) !important;
+  background-color: hsl(var(--primary)) !important;
 }
 
 .video-js .vjs-load-progress {
   background: hsl(var(--primary) / 0.2) !important;
 }
+
+/* ---------------------------------------------------------------------------
+ * "Render panel" corner language — a 45° chamfer on the top-left and
+ * bottom-right corners, used on panels, buttons and inputs. `chamfer` and the
+ * panel radius utilities all resolve to the same shape; circles (avatars,
+ * spinners) use rounded-full and are intentionally untouched.
+ * ------------------------------------------------------------------------- */
+:root {
+  --chamfer: 10px;
+}
+
+.chamfer,
+.chamfer-sm,
+.rounded-xl,
+.rounded-2xl {
+  border-radius: 0 !important;
+  clip-path: polygon(
+    var(--chamfer) 0,
+    100% 0,
+    100% calc(100% - var(--chamfer)),
+    calc(100% - var(--chamfer)) 100%,
+    0 100%,
+    0 var(--chamfer)
+  );
+}
+
+.chamfer-sm {
+  --chamfer: 6px;
+}
diff --git a/src/main.tsx b/src/main.tsx
index 215cf446..e6e1003b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
-import './global.css';
 import '@fontsource/geist-sans';
 import '@fontsource/geist-mono';
-import '@fontsource/jetbrains-mono';
+import '@fontsource/montserrat/600.css';
+import '@fontsource/montserrat/700.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
diff --git a/src/pages/Account.tsx b/src/pages/Account.tsx
index 6d85d872..3bf90217 100644
--- a/src/pages/Account.tsx
+++ b/src/pages/Account.tsx
@@ -132,23 +132,23 @@ const Account = () => {
             className="max-w-2xl mx-auto"
           >
             <div className="flex items-center gap-3 mb-8">
-              <IconUser className="h-8 w-8 text-cow-purple" />
-              <h1 className="text-4xl md:text-5xl font-minecraftia">
-                My <span className="text-cow-purple">Account</span>
+              <IconUser className="h-8 w-8 text-primary" />
+              <h1 className="text-4xl md:text-5xl ">
+                My <span className="text-primary">Account</span>
               </h1>
             </div>
 
-            <Card className="pixel-corners border-2 border-cow-purple/20">
+            <Card className=" border-2 border-primary/20">
               <CardHeader className="pb-4">
                 <CardTitle className="flex items-center gap-3">
                   <Avatar className="h-16 w-16">
                     {safeAvatarSrc ? <AvatarImage src={safeAvatarSrc} referrerPolicy="no-referrer" /> : null}
-                    <AvatarFallback className="bg-cow-purple text-white font-bold text-lg">
+                    <AvatarFallback className="bg-primary text-white font-bold text-lg">
                       {getInitials(displayName || user.email || 'U')}
                     </AvatarFallback>
                   </Avatar>
                   <div>
-                    <h2 className="text-2xl font-jetbrains-mono">{displayName || 'User'}</h2>
+                    <h2 className="text-2xl ">{displayName || 'User'}</h2>
                     <div className="flex items-center gap-2 text-sm text-muted-foreground">
                       <IconMail className="h-4 w-4" />
                       {user.email}
@@ -162,7 +162,7 @@ const Account = () => {
               <CardContent className="pt-6">
                 <form onSubmit={handleUpdateProfile} className="space-y-6">
                   <div className="space-y-4">
-                    <h3 className="text-lg font-jetbrains-mono text-cow-purple">Profile Information</h3>
+                    <h3 className="text-lg text-primary">Profile Information</h3>
 
                     <div className="space-y-2">
                       <Label htmlFor="displayName">Display Name</Label>
@@ -171,7 +171,7 @@ const Account = () => {
                         value={displayName}
                         onChange={(e) => setDisplayName(e.target.value)}
                         placeholder="How others will see you"
-                        className="pixel-corners"
+                        className=""
                       />
                     </div>
 
@@ -183,7 +183,7 @@ const Account = () => {
                           value={firstName}
                           onChange={(e) => setFirstName(e.target.value)}
                           placeholder="Your first name"
-                          className="pixel-corners"
+                          className=""
                         />
                       </div>
 
@@ -194,7 +194,7 @@ const Account = () => {
                           value={lastName}
                           onChange={(e) => setLastName(e.target.value)}
                           placeholder="Your last name"
-                          className="pixel-corners"
+                          className=""
                         />
                       </div>
                     </div>
@@ -203,7 +203,7 @@ const Account = () => {
                   <Separator />
 
                   <div className="space-y-4">
-                    <h3 className="text-lg font-jetbrains-mono text-cow-purple">Account Details</h3>
+                    <h3 className="text-lg text-primary">Account Details</h3>
 
                     <div className="space-y-3 text-sm">
                       <div className="flex items-center gap-2">
@@ -225,7 +225,7 @@ const Account = () => {
                   <Separator />
 
                   <div className="space-y-4">
-                    <h3 className="text-lg font-jetbrains-mono text-cow-purple">Preferences</h3>
+                    <h3 className="text-lg text-primary">Preferences</h3>
 
 
                   </div>
@@ -234,7 +234,7 @@ const Account = () => {
                     <Button
                       type="submit"
                       disabled={isUpdating}
-                      className="pixel-btn-primary"
+                      className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
                     >
                       {isUpdating ? 'Updating...' : 'Update Profile'}
                     </Button>
@@ -243,7 +243,7 @@ const Account = () => {
                       type="button"
                       variant="outline"
                       onClick={handleSignOut}
-                      className="pixel-corners border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700"
+                      className=" border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700"
                     >
                       <IconLogout className="h-4 w-4 mr-2" />
                       Sign Out
diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx
index 9af6355f..e7309ab3 100644
--- a/src/pages/Admin.tsx
+++ b/src/pages/Admin.tsx
@@ -53,9 +53,9 @@ const Admin = () => {
             className="max-w-7xl mx-auto"
           >
             <div className="flex items-center gap-3 mb-8">
-              <IconShield className="h-8 w-8 text-cow-purple" />
-              <h1 className="text-4xl md:text-5xl font-minecraftia">
-                Admin <span className="text-cow-purple">Panel</span>
+              <IconShield className="h-8 w-8 text-primary" />
+              <h1 className="text-4xl md:text-5xl ">
+                Admin <span className="text-primary">Panel</span>
               </h1>
             </div>
 
diff --git a/src/pages/AiTitleHelper.tsx b/src/pages/AiTitleHelper.tsx
index ac114002..fb8effb5 100644
--- a/src/pages/AiTitleHelper.tsx
+++ b/src/pages/AiTitleHelper.tsx
@@ -90,61 +90,61 @@ const AiTitleHelper = () => {
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="max-w-6xl mx-auto px-4">
           <div className="text-center mb-8">
-            <h1 className="text-4xl md:text-5xl font-minecraftia">AI Title Helper</h1>
-            <p className="text-neutral-300 mt-2 font-jetbrains-mono">Generate multiple short, SEO-friendly YouTube titles. Only the titles are shown below.</p>
+            <h1 className="text-4xl md:text-5xl ">AI Title Helper</h1>
+            <p className="text-neutral-300 mt-2 ">Generate multiple short, SEO-friendly YouTube titles. Only the titles are shown below.</p>
           </div>
 
-          <form onSubmit={onSubmit} className="bg-background border border-border pixel-corners p-4 md:p-6 shadow-xl">
+          <form onSubmit={onSubmit} className="bg-background border border-border  p-4 md:p-6 shadow-xl">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div className="md:col-span-2">
-                <Label className="text-neutral-300 mb-2 inline-block font-jetbrains-mono">Description<span className="text-red-500">*</span></Label>
+                <Label className="text-neutral-300 mb-2 inline-block ">Description<span className="text-red-500">*</span></Label>
                 <Textarea
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
                   placeholder="Describe your video idea and value proposition..."
-                  className="font-jetbrains-mono h-28 resize-y pixel-corners bg-neutral-900 border border-neutral-700 focus:border-cow-purple focus:ring-cow-purple/30"
+                  className="h-28 resize-y  bg-neutral-900 border border-neutral-700 focus:border-primary focus:ring-primary/30"
                 />
               </div>
 
               <div>
-                <Label className="text-neutral-300 mb-2 inline-block font-jetbrains-mono">Keywords (comma-separated)</Label>
+                <Label className="text-neutral-300 mb-2 inline-block ">Keywords (comma-separated)</Label>
                 <Input
                   type="text"
                   value={keywords}
                   onChange={(e) => setKeywords(e.target.value)}
                   placeholder="e.g. AI, coding, tutorials"
-                  className="font-jetbrains-mono pixel-corners bg-neutral-900 border border-neutral-700 focus:border-cow-purple focus:ring-cow-purple/30"
+                  className=" bg-neutral-900 border border-neutral-700 focus:border-primary focus:ring-primary/30"
                 />
               </div>
 
               <div>
-                <Label className="text-neutral-300 mb-2 inline-block font-jetbrains-mono">Niche</Label>
+                <Label className="text-neutral-300 mb-2 inline-block ">Niche</Label>
                 <Input
                   type="text"
                   value={niche}
                   onChange={(e) => setNiche(e.target.value)}
                   placeholder="e.g. programming, fitness"
-                  className="font-jetbrains-mono pixel-corners bg-neutral-900 border border-neutral-700 focus:border-cow-purple focus:ring-cow-purple/30"
+                  className=" bg-neutral-900 border border-neutral-700 focus:border-primary focus:ring-primary/30"
                 />
               </div>
 
               <div>
-                <Label className="text-neutral-300 mb-2 inline-block font-jetbrains-mono">Language</Label>
+                <Label className="text-neutral-300 mb-2 inline-block ">Language</Label>
                 <Input
                   type="text"
                   value={language}
                   onChange={(e) => setLanguage(e.target.value)}
                   placeholder="e.g. English"
-                  className="font-jetbrains-mono pixel-corners bg-neutral-900 border border-neutral-700 focus:border-cow-purple focus:ring-cow-purple/30"
+                  className=" bg-neutral-900 border border-neutral-700 focus:border-primary focus:ring-primary/30"
                 />
               </div>
             </div>
 
-            <div className="mt-4 flex items-center gap-3 font-jetbrains-mono">
+            <div className="mt-4 flex items-center gap-3 ">
               <Button
                 type="submit"
                 disabled={loading}
-                className="pixel-btn-primary"
+                className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
               >
                 {loading ? 'Generating…' : 'Generate Titles'}
               </Button>
@@ -155,21 +155,21 @@ const AiTitleHelper = () => {
           {titles.length > 0 && (
             <section className="mt-10">
               <div className="flex items-center gap-3 mb-4">
-                <h2 className="text-2xl font-jetbrains-mono">Titles</h2>
+                <h2 className="text-2xl ">Titles</h2>
                 <span className="text-xs text-neutral-400">{titles.length} suggestions</span>
               </div>
               <div className="flex flex-wrap items-start gap-2">
                 {titles.map((t, i) => (
                   <div key={i} className="flex items-center">
-                    <Card className="pixel-corners border border-neutral-800 bg-card text-card-foreground shadow">
+                    <Card className=" border border-neutral-800 bg-card text-card-foreground shadow">
                       <CardContent className="py-2 px-3">
                         <div className="flex items-center gap-2">
-                          <span className="whitespace-pre-line font-minecraftia flex-1">{t}</span>
+                          <span className="whitespace-pre-line flex-1">{t}</span>
                           <Button
                             type="button"
                             size="sm"
                             variant="outline"
-                            className="pixel-corners"
+                            className=""
                             onClick={async () => {
                               try {
                                 await navigator.clipboard.writeText(t);
diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index 66eba5a7..de65ef14 100644
--- a/src/pages/Analytics.tsx
+++ b/src/pages/Analytics.tsx
@@ -72,7 +72,7 @@ const StatCard = ({
         <Icon className={cn("size-5", accent)} />
       </CardHeader>
       <CardContent>
-        <div className="font-jetbrains-mono text-3xl font-semibold">
+        <div className="text-3xl font-semibold">
           <CountUp value={value} />
         </div>
       </CardContent>
@@ -149,9 +149,9 @@ const Analytics = () => {
           >
             <div className="mb-8 flex flex-wrap items-center justify-between gap-4">
               <div className="flex items-center gap-3">
-                <IconChartAreaLine className="size-8 text-cow-purple" />
-                <h1 className="font-minecraftia text-4xl md:text-5xl">
-                  Traffic <span className="text-cow-purple">Analytics</span>
+                <IconChartAreaLine className="size-8 text-primary" />
+                <h1 className="text-4xl md:text-5xl">
+                  Traffic <span className="text-primary">Analytics</span>
                 </h1>
               </div>
 
@@ -305,7 +305,7 @@ const Analytics = () => {
                         <TableBody>
                           {[...chartData].reverse().map((point) => (
                             <TableRow key={point.day}>
-                              <TableCell className="font-jetbrains-mono">{point.day}</TableCell>
+                              <TableCell className="">{point.day}</TableCell>
                               <TableCell className="text-right">{point.newUsers}</TableCell>
                               <TableCell className="text-right">{point.returningUsers}</TableCell>
                               <TableCell className="text-right">{point.visits}</TableCell>
diff --git a/src/pages/BackgroundGenerator.tsx b/src/pages/BackgroundGenerator.tsx
index aa5c1443..e004a64b 100644
--- a/src/pages/BackgroundGenerator.tsx
+++ b/src/pages/BackgroundGenerator.tsx
@@ -638,8 +638,8 @@ const BackgroundGenerator = () => {
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">
           <div className="max-w-7xl mx-auto">
-            <h1 className="text-4xl md:text-5xl font-minecraftia mb-8 text-center">
-              <span className="text-cow-purple">Background</span> Generator
+            <h1 className="text-4xl md:text-5xl mb-8 text-center">
+              <span className="text-primary">Background</span> Generator
             </h1>
 
              <p className="text-center text-muted-foreground mb-8 max-w-xl mx-auto">
@@ -658,12 +658,12 @@ const BackgroundGenerator = () => {
                 }}
                className="mb-8"
              >
-               <TabsList className="mx-auto grid h-14 w-full max-w-md grid-cols-2 pixel-corners bg-black/20 p-1">
-                 <TabsTrigger value="image" className="gap-2 pixel-corners text-sm">
+               <TabsList className="mx-auto grid h-14 w-full max-w-md grid-cols-2  bg-black/20 p-1">
+                 <TabsTrigger value="image" className="gap-2  text-sm">
                    <IconPhoto className="h-4 w-4" />
                    Image
                  </TabsTrigger>
-                  <TabsTrigger value="video" className="gap-2 pixel-corners text-sm">
+                  <TabsTrigger value="video" className="gap-2  text-sm">
                     <IconPlayerPlay className="h-4 w-4" />
                     Video (WebM)
                  </TabsTrigger>
@@ -672,14 +672,14 @@ const BackgroundGenerator = () => {
 
               <div className="grid grid-cols-1 items-start gap-8 md:grid-cols-3">
                 <div
-                  className="pixel-card relative flex flex-col space-y-6 border-l-4 border-l-cow-purple/70 shadow-2xl shadow-cow-purple/10 md:sticky md:top-24 md:col-span-1 md:h-[var(--preview-card-height)] md:max-h-[calc(100vh-7rem)] md:overflow-y-auto md:overscroll-contain md:custom-scrollbar"
+                  className="rounded-xl border border-border bg-card p-4 relative flex flex-col space-y-6 border-l-2 border-l-primary/60 shadow-2xl shadow-primary/10 md:sticky md:top-24 md:col-span-1 md:h-[var(--preview-card-height)] md:max-h-[calc(100vh-7rem)] md:overflow-y-auto md:overscroll-contain md:custom-scrollbar"
                   style={previewCardHeight ? ({ "--preview-card-height": `${previewCardHeight}px` } as React.CSSProperties) : undefined}
                 >
                 <div className="space-y-4">
                   <div className="space-y-2">
                     <label className="text-sm font-medium">Select images</label>
                     <Tabs defaultValue="library" className="w-full">
-                      <TabsList className="grid w-full grid-cols-2 pixel-corners h-9 mb-2">
+                      <TabsList className="grid w-full grid-cols-2  h-9 mb-2">
                         <TabsTrigger value="library" className="text-xs">Library</TabsTrigger>
                         <TabsTrigger value="upload" className="text-xs">Upload</TabsTrigger>
                       </TabsList>
@@ -693,7 +693,7 @@ const BackgroundGenerator = () => {
                             onChange={(event) => setTextureSearch(event.target.value)}
                             placeholder="Search textures..."
                             aria-label="Search textures"
-                            className="h-8 pl-8 pr-8 text-xs pixel-corners"
+                            className="h-8 pl-8 pr-8 text-xs "
                           />
                           {textureSearch && (
                             <button
@@ -710,7 +710,7 @@ const BackgroundGenerator = () => {
                           <ScrollArea className="h-48 p-2">
                             {isLoadingTextures ? (
                               <div className="flex flex-col items-center justify-center h-full space-y-2 py-8">
-                                <IconRefresh className="h-5 w-5 animate-spin text-cow-purple" />
+                                <IconRefresh className="h-5 w-5 animate-spin text-primary" />
                                 <span className="text-xs text-muted-foreground">Loading icons...</span>
                               </div>
                             ) : (
@@ -727,8 +727,8 @@ const BackgroundGenerator = () => {
                                        source: "library",
                                      })}
                                      className={`relative aspect-square border-2 rounded-sm overflow-hidden p-1 transition-all ${selectedImages.some((image) => image.id === `library-${texture.id}`)
-                                       ? "border-cow-purple bg-cow-purple/20"
-                                       : "border-transparent hover:border-cow-purple/50 bg-white/5"
+                                       ? "border-primary bg-primary/20"
+                                       : "border-transparent hover:border-primary/50 bg-white/5"
                                        }`}
                                      title={texture.title}
                                    >
@@ -739,7 +739,7 @@ const BackgroundGenerator = () => {
                                        className="w-full h-full object-contain pixelated"
                                      />
                                      {selectedImages.some((image) => image.id === `library-${texture.id}`) && (
-                                       <span className="absolute right-1 top-1 flex h-4 w-4 items-center justify-center rounded-full bg-cow-purple text-[10px] font-bold text-white">✓</span>
+                                       <span className="absolute right-1 top-1 flex h-4 w-4 items-center justify-center chamfer bg-primary text-[10px] font-bold text-white">✓</span>
                                      )}
                                    </button>
                                  ))}
@@ -756,7 +756,7 @@ const BackgroundGenerator = () => {
                                   variant="outline"
                                   size="sm"
                                   onClick={() => setVisibleTexturesCount(prev => prev + 40)}
-                                  className="text-xs pixel-corners h-8"
+                                  className="text-xs  h-8"
                                 >
                                   Load More ({filteredTextures.length - visibleTexturesCount} remaining)
                                 </Button>
@@ -781,7 +781,7 @@ const BackgroundGenerator = () => {
                               onClick={() => {
                                 fileInputRef.current?.click();
                               }}
-                              className="pixel-btn-primary flex-grow flex items-center justify-center space-x-2"
+                              className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 flex-grow flex items-center justify-center space-x-2"
                             >
                               <IconUpload className="h-5 w-5" />
                               <span>Add Images</span>
@@ -791,7 +791,7 @@ const BackgroundGenerator = () => {
                                 variant="outline"
                                 size="icon"
                                 onClick={clearAllUploads}
-                                className="pixel-corners"
+                                className=""
                                 title="Remove uploaded images"
                               >
                                 <IconTrash className="h-5 w-5" />
@@ -801,7 +801,7 @@ const BackgroundGenerator = () => {
                           {uploadedImages.length > 0 && (
                             <div className="grid grid-cols-4 gap-2">
                               {uploadedImages.map((image) => (
-                                <div key={image.id} className={`group relative aspect-square overflow-hidden rounded-sm border-2 bg-black/10 ${selectedImages.some((selected) => selected.id === image.id) ? "border-cow-purple" : "border-transparent"}`}>
+                                <div key={image.id} className={`group relative aspect-square overflow-hidden rounded-sm border-2 bg-black/10 ${selectedImages.some((selected) => selected.id === image.id) ? "border-primary" : "border-transparent"}`}>
                                   <button type="button" aria-pressed={selectedImages.some((selected) => selected.id === image.id)} onClick={() => toggleImageSelection(image)} className="h-full w-full p-1" title={`${selectedImages.some((selected) => selected.id === image.id) ? "Deselect" : "Select"} ${image.title}`}>
                                     <img src={image.url} alt={image.title} className="h-full w-full object-contain" />
                                   </button>
@@ -849,14 +849,14 @@ const BackgroundGenerator = () => {
                             invalidateGeneration();
                             setRandomSeed((seed) => seed + 1);
                           }}
-                          className="h-7 gap-1.5 px-2 text-xs pixel-corners"
+                          className="h-7 gap-1.5 px-2 text-xs "
                         >
                           <IconRefresh className="h-3.5 w-3.5" />
                           Randomize
                         </Button>
                       </div>
                       <Select value={patternType} onValueChange={(value: PatternType) => setPatternType(value)}>
-                        <SelectTrigger className="pixel-corners">
+                        <SelectTrigger className="">
                           <SelectValue placeholder="Choose a pattern" />
                         </SelectTrigger>
                         <SelectContent>
@@ -872,7 +872,7 @@ const BackgroundGenerator = () => {
                      <div className="space-y-2 rounded-sm border border-primary/20 bg-black/10 p-3">
                        <div className="flex items-center justify-between gap-3">
                          <div className="flex items-center gap-2">
-                           <IconRotateClockwise className="h-4 w-4 text-cow-purple" />
+                           <IconRotateClockwise className="h-4 w-4 text-primary" />
                            <label className="text-sm font-medium">Texture rotation</label>
                          </div>
                          <span className="text-xs text-muted-foreground">{rotation[0]}°</span>
@@ -884,7 +884,7 @@ const BackgroundGenerator = () => {
                          max={360}
                          step={1}
                          aria-label="Texture rotation"
-                         className="pixel-corners"
+                         className=""
                        />
                        <div className="flex justify-between text-[10px] text-muted-foreground">
                          <span>0°</span>
@@ -896,7 +896,7 @@ const BackgroundGenerator = () => {
                      </div>
 
                       {outputMode === "video" && (
-                       <div className="space-y-4 rounded-sm border border-cow-purple/30 bg-cow-purple/10 p-3">
+                       <div className="space-y-4 rounded-sm border border-primary/30 bg-primary/10 p-3">
                          <div>
                            <p className="text-sm font-semibold">Animation controls</p>
                            <p className="mt-1 text-xs text-muted-foreground">Create a repeating right-to-left WebM loop for the selected duration.</p>
@@ -907,7 +907,7 @@ const BackgroundGenerator = () => {
                              <label className="text-sm font-medium">Duration</label>
                              <span className="text-xs text-muted-foreground">{animationDuration[0]}s</span>
                            </div>
-                            <Slider value={animationDuration} onValueChange={setAnimationDuration} min={2} max={12} step={1} aria-label="Animation duration" className="pixel-corners" />
+                            <Slider value={animationDuration} onValueChange={setAnimationDuration} min={2} max={12} step={1} aria-label="Animation duration" className="" />
                          </div>
 
                          <div className="space-y-2">
@@ -915,7 +915,7 @@ const BackgroundGenerator = () => {
                              <label className="text-sm font-medium">Frame rate</label>
                              <span className="text-xs text-muted-foreground">{animationFps[0]} FPS</span>
                            </div>
-                            <Slider value={animationFps} onValueChange={setAnimationFps} min={6} max={30} step={1} aria-label="Animation frame rate" className="pixel-corners" />
+                            <Slider value={animationFps} onValueChange={setAnimationFps} min={6} max={30} step={1} aria-label="Animation frame rate" className="" />
                          </div>
 
                          <div className="space-y-2">
@@ -923,7 +923,7 @@ const BackgroundGenerator = () => {
                              <label className="text-sm font-medium">Movement distance</label>
                              <span className="text-xs text-muted-foreground">{animationDistance[0]}px</span>
                            </div>
-                            <Slider value={animationDistance} onValueChange={setAnimationDistance} min={40} max={400} step={10} aria-label="Animation movement distance" className="pixel-corners" />
+                            <Slider value={animationDistance} onValueChange={setAnimationDistance} min={40} max={400} step={10} aria-label="Animation movement distance" className="" />
                            <p className="text-xs text-muted-foreground">Textures move smoothly from right to left, then repeat.</p>
                          </div>
                        </div>
@@ -956,7 +956,7 @@ const BackgroundGenerator = () => {
                           type="text"
                           value={color}
                           onChange={(e) => setColor(e.target.value)}
-                          className="pixel-corners flex-grow"
+                          className=" flex-grow"
                           disabled={isTransparent}
                         />
                       </div>
@@ -976,7 +976,7 @@ const BackgroundGenerator = () => {
                       min={0}
                       max={50}
                       step={1}
-                      className="pixel-corners"
+                      className=""
                     />
                   </div>
 
@@ -993,7 +993,7 @@ const BackgroundGenerator = () => {
                       min={10}
                       max={100}
                       step={1}
-                      className="pixel-corners"
+                      className=""
                     />
                   </div>
 
@@ -1010,14 +1010,14 @@ const BackgroundGenerator = () => {
                       min={10}
                       max={300}
                       step={5}
-                      className="pixel-corners"
+                      className=""
                     />
                   </div>
 
                   <div className="space-y-2">
                     <label className="text-sm font-medium">Size</label>
                     <Select value={size} onValueChange={setSize}>
-                      <SelectTrigger className="pixel-corners">
+                      <SelectTrigger className="">
                         <SelectValue placeholder="Select size" />
                       </SelectTrigger>
                       <SelectContent>
@@ -1055,9 +1055,9 @@ const BackgroundGenerator = () => {
                 </div>
               </div>
 
-                <div ref={previewCardRef} className="pixel-card flex h-fit flex-col self-start md:col-span-2">
+                <div ref={previewCardRef} className="rounded-xl border border-border bg-card p-4 flex h-fit flex-col self-start md:col-span-2">
                 <div className="mb-4 text-center">
-                  <h3 className="text-lg font-jetbrains-mono">Preview</h3>
+                  <h3 className="text-lg ">Preview</h3>
                 </div>
 
                  <div
@@ -1115,7 +1115,7 @@ const BackgroundGenerator = () => {
                            <span>{Math.round(recordingProgress)}%</span>
                          </div>
                          <div className="h-2 overflow-hidden rounded-full bg-black/20">
-                           <div className="h-full bg-cow-purple transition-[width]" style={{ width: `${recordingProgress}%` }} />
+                           <div className="h-full bg-primary transition-[width]" style={{ width: `${recordingProgress}%` }} />
                          </div>
                        </div>
                      )}
@@ -1123,13 +1123,13 @@ const BackgroundGenerator = () => {
                        <Button
                          onClick={handleCreateVideo}
                          disabled={!selectedImages.length || isRecording}
-                         className="pixel-btn-primary flex flex-1 items-center justify-center gap-2"
+                         className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 flex flex-1 items-center justify-center gap-2"
                        >
                          <IconPlayerPlay className="h-5 w-5" />
                          {isRecording ? "Rendering..." : "Create Animated Video"}
                        </Button>
                        {videoUrl && (
-                         <Button onClick={handleVideoDownload} variant="outline" className="flex items-center justify-center gap-2 pixel-corners">
+                         <Button onClick={handleVideoDownload} variant="outline" className="flex items-center justify-center gap-2 ">
                            <IconDownload className="h-5 w-5" />
                            Download WebM
                          </Button>
@@ -1139,7 +1139,7 @@ const BackgroundGenerator = () => {
                  ) : generatedImage && (
                    <Button
                      onClick={handleDownload}
-                     className="mt-4 pixel-btn-primary flex items-center justify-center space-x-2"
+                     className="mt-4 inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 flex items-center justify-center space-x-2"
                   >
                     <IconDownload className="h-5 w-5" />
                     <span>Download Background</span>
@@ -1149,35 +1149,35 @@ const BackgroundGenerator = () => {
             </div>
 
             <div className="mt-12 max-w-2xl mx-auto">
-              <h2 className="text-2xl font-minecraftia mb-4 text-center">
+              <h2 className="text-2xl mb-4 text-center">
                 How to Use
               </h2>
               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center">
-                <div className="pixel-card p-6">
-                  <div className="h-12 w-12 bg-cow-purple/20 rounded-full flex items-center justify-center mx-auto mb-3">
-                    <span className="font-jetbrains-mono text-xl">1</span>
+                <div className="rounded-xl border border-border bg-card p-4 p-6">
+                  <div className="h-12 w-12 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-3">
+                    <span className="text-xl">1</span>
                   </div>
-                  <h3 className="font-jetbrains-mono mb-2">Upload</h3>
+                  <h3 className="mb-2">Upload</h3>
                   <p className="text-sm text-muted-foreground">
                     Upload images and adjust settings
                   </p>
                 </div>
 
-                <div className="pixel-card p-6">
-                  <div className="h-12 w-12 bg-cow-purple/20 rounded-full flex items-center justify-center mx-auto mb-3">
-                    <span className="font-jetbrains-mono text-xl">2</span>
+                <div className="rounded-xl border border-border bg-card p-4 p-6">
+                  <div className="h-12 w-12 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-3">
+                    <span className="text-xl">2</span>
                   </div>
-                  <h3 className="font-jetbrains-mono mb-2">Adjust</h3>
+                  <h3 className="mb-2">Adjust</h3>
                   <p className="text-sm text-muted-foreground">
                     Customize spacing, opacity, and color in real-time
                   </p>
                 </div>
 
-                <div className="pixel-card p-6">
-                  <div className="h-12 w-12 bg-cow-purple/20 rounded-full flex items-center justify-center mx-auto mb-3">
-                    <span className="font-jetbrains-mono text-xl">3</span>
+                <div className="rounded-xl border border-border bg-card p-4 p-6">
+                  <div className="h-12 w-12 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-3">
+                    <span className="text-xl">3</span>
                   </div>
-                  <h3 className="font-jetbrains-mono mb-2">Download</h3>
+                  <h3 className="mb-2">Download</h3>
                   <p className="text-sm text-muted-foreground">
                     Download your background and use it in your content
                   </p>
diff --git a/src/pages/BlogView.tsx b/src/pages/BlogView.tsx
index 856e87cf..d3b4d9c3 100644
--- a/src/pages/BlogView.tsx
+++ b/src/pages/BlogView.tsx
@@ -76,7 +76,7 @@ export default function BlogView() {
         return (
             <div className="min-h-screen flex flex-col">
                 <main className="flex-grow flex items-center justify-center">
-                    <IconLoader2 className="h-8 w-8 animate-spin text-cow-purple" />
+                    <IconLoader2 className="h-8 w-8 animate-spin text-primary" />
                 </main>
                 <Footer />
             </div>
@@ -88,9 +88,9 @@ export default function BlogView() {
             <div className="min-h-screen flex flex-col">
                 <main className="flex-grow pt-24 pb-16 cow-grid-bg">
                     <div className="container mx-auto px-4 text-center">
-                        <h1 className="text-2xl font-minecraftia text-red-400">Error</h1>
+                        <h1 className="text-2xl text-red-400">Error</h1>
                         <p className="text-muted-foreground">{error || "Blog post not found"}</p>
-                        <Link to="/blogs" className="text-cow-purple hover:underline mt-4 inline-block">Back to Blogs</Link>
+                        <Link to="/blogs" className="text-primary hover:underline mt-4 inline-block">Back to Blogs</Link>
                     </div>
                 </main>
                 <Footer />
@@ -137,9 +137,9 @@ export default function BlogView() {
                         Back to Blogs
                     </Link>
 
-                    <article className="bg-background/80 backdrop-blur border border-border/50 pixel-corners p-6 md:p-10">
+                    <article className="bg-background backdrop-blur border border-border/50  p-6 md:p-10">
                         <header className="mb-8 border-b border-border/50 pb-8">
-                            <h1 className="text-4xl md:text-5xl font-jetbrains-mono font-bold mb-6 text-foreground tracking-tight">{blog.title}</h1>
+                            <h1 className="text-4xl md:text-5xl font-bold mb-6 text-foreground tracking-tight">{blog.title}</h1>
                             <div className="flex flex-wrap items-center gap-6 text-sm text-muted-foreground font-geist-mono">
                                 <div className="flex items-center gap-2">
                                     <Avatar className="h-8 w-8">
@@ -158,14 +158,14 @@ export default function BlogView() {
                          <div className="prose prose-invert max-w-none font-geist leading-relaxed
                  [&>p]:my-3 [&>p]:leading-7 [&>p:first-child]:mt-0
                  [&>h1]:hidden
-                 [&>h2]:mt-8 [&>h2]:mb-3 [&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:font-jetbrains-mono
-                 [&>h3]:mt-6 [&>h3]:mb-2 [&>h3]:text-xl [&>h3]:font-medium [&>h3]:font-jetbrains-mono
+                 [&>h2]:mt-8 [&>h2]:mb-3 [&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:
+                 [&>h3]:mt-6 [&>h3]:mb-2 [&>h3]:text-xl [&>h3]:font-medium [&>h3]:
                 [&>ul]:my-6 [&>ol]:my-6 [&_li]:mb-2
-                [&_a]:text-cow-purple [&_a]:underline hover:[&_a]:text-cow-purple/80
-                [&_pre]:bg-muted/50 [&_pre]:p-4 [&_pre]:rounded-md [&_pre]:pixel-corners
-                [&_code]:font-geist-mono [&_code]:bg-muted/50 [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded
-                [&_blockquote]:border-l-4 [&_blockquote]:border-cow-purple [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground
-                [&_img]:rounded-none [&_img]:pixel-corners [&_img]:border [&_img]:border-white/10
+                [&_a]:text-primary [&_a]:underline hover:[&_a]:text-primary/80
+                [&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded-md [&_pre]:
+                [&_code]:font-geist-mono [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded
+                [&_blockquote]:border-l-4 [&_blockquote]:border-primary [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground
+                [&_img]:rounded-none [&_img]: [&_img]:border [&_img]:border-white/10
                 "
                         >
                             <ReactMarkdown>{blog.content}</ReactMarkdown>
diff --git a/src/pages/Blogs.tsx b/src/pages/Blogs.tsx
index 5c654bec..61a35bc6 100644
--- a/src/pages/Blogs.tsx
+++ b/src/pages/Blogs.tsx
@@ -105,14 +105,14 @@ export default function Blogs() {
             <main className="flex-grow pt-24 pb-16 cow-grid-bg">
                 <div className="container mx-auto px-4">
                     <div className="flex items-center gap-3 mb-8">
-<h1 className="text-4xl md:text-5xl font-minecraftia">
-                             Latest <span className="text-cow-purple">Blogs</span>
+<h1 className="text-4xl md:text-5xl ">
+                             Latest <span className="text-primary">Blogs</span>
                         </h1>
                     </div>
 
                     {loading ? (
                         <div className="flex items-center justify-center py-20">
-                            <IconLoader2 className="h-8 w-8 animate-spin text-cow-purple" />
+                            <IconLoader2 className="h-8 w-8 animate-spin text-primary" />
                         </div>
                     ) : blogs.length === 0 ? (
                         <div className="text-center text-muted-foreground py-20">
@@ -126,9 +126,9 @@ export default function Blogs() {
 
                                 return (
                                     <Link key={blog.id} to={`/blogs/${blog.slug}`} className="block group h-full">
-                                        <Card className="h-full pixel-corners bg-card/60 backdrop-blur border-border/50 hover:border-cow-purple/50 transition-colors">
+                                        <Card className="h-full  bg-card backdrop-blur border-border/50 hover:border-primary/50 transition-colors">
                                             <CardHeader>
-                                                <CardTitle className="font-minecraftia text-xl leading-snug group-hover:text-cow-purple transition-colors">
+                                                <CardTitle className="text-xl leading-snug group-hover:text-primary transition-colors">
                                                     {blog.title}
                                                 </CardTitle>
                                                 <div className="flex items-center gap-2 mt-2">
@@ -142,7 +142,7 @@ export default function Blogs() {
                                                 </div>
                                             </CardHeader>
                                             <CardContent>
-                                                <p className="text-sm text-muted-foreground line-clamp-3 font-jetbrains-mono">
+                                                <p className="text-sm text-muted-foreground line-clamp-3 ">
                                                     {removeMarkdown(blog.content || "").slice(0, 150)}...
                                                 </p>
                                             </CardContent>
diff --git a/src/pages/Changelogs.tsx b/src/pages/Changelogs.tsx
index 77078cd9..e0721406 100644
--- a/src/pages/Changelogs.tsx
+++ b/src/pages/Changelogs.tsx
@@ -49,8 +49,8 @@ export default function Changelogs() {
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto">
-            <h1 className="text-4xl md:text-5xl font-minecraftia mb-6 text-center">
-              <span className="text-cow-purple">Project</span> Changelogs
+            <h1 className="text-4xl md:text-5xl mb-6 text-center">
+              <span className="text-primary">Project</span> Changelogs
             </h1>
             <p className="text-center text-muted-foreground mb-10 max-w-2xl mx-auto leading-relaxed" style={{ wordSpacing: '0.05em' }}>
               Keep up with new features, improvements, and fixes as we ship them.
@@ -58,7 +58,7 @@ export default function Changelogs() {
 
             {loading ? (
               <div className="flex items-center gap-3 text-muted-foreground">
-                <span className="inline-block w-5 h-5 rounded-full border-2 border-cow-purple border-t-transparent animate-spin" />
+                <span className="inline-block w-5 h-5 rounded-full border-2 border-primary border-t-transparent animate-spin" />
                 <span>Loading changelog...</span>
               </div>
             ) : error ? (
diff --git a/src/pages/Community.tsx b/src/pages/Community.tsx
index ef6f16e3..78f64f73 100644
--- a/src/pages/Community.tsx
+++ b/src/pages/Community.tsx
@@ -360,17 +360,17 @@ const Community = () => {
         <div className="container mx-auto px-4">
           <div className="max-w-5xl mx-auto">
             <Tabs defaultValue="videos" className="w-full">
-              <TabsList className="grid w-full grid-cols-2 mb-12 bg-background/80 backdrop-blur-sm border border-border p-1 rounded-lg">
+              <TabsList className="grid w-full grid-cols-2 mb-12 bg-background backdrop-blur-sm border border-border p-1 rounded-lg">
                 <TabsTrigger
                   value="videos"
-                  className="text-lg font-jetbrains-mono data-[state=active]:bg-cow-purple data-[state=active]:text-white transition-all"
+                  className="text-lg data-[state=active]:bg-primary data-[state=active]:text-white transition-all"
                 >
                   <IconPlayerPlay className="w-5 h-5 mr-2" />
                   Tutorials
                 </TabsTrigger>
                 <TabsTrigger
                   value="servers"
-                  className="text-lg font-jetbrains-mono data-[state=active]:bg-cow-purple data-[state=active]:text-white transition-all"
+                  className="text-lg data-[state=active]:bg-primary data-[state=active]:text-white transition-all"
                 >
                   <IconUsers className="w-5 h-5 mr-2" />
                   Servers
@@ -383,13 +383,13 @@ const Community = () => {
                     {[1, 2, 3].map((i) => (
                       <div
                         key={i}
-                        className="pixel-corners border border-border rounded-lg overflow-hidden bg-card/50 backdrop-blur-sm"
+                        className=" border border-border rounded-lg overflow-hidden bg-card backdrop-blur-sm"
                       >
                         <div className="bg-card p-6">
                           <Skeleton className="h-10 w-1/3 mb-3" />
                           <Skeleton className="h-5 w-2/3" />
                         </div>
-                        <div className="p-6 bg-background/60">
+                        <div className="p-6 bg-background">
                           <div className="flex overflow-x-auto pb-4 space-x-4 custom-scrollbar">
                             {[...Array(4)].map((_, j) => (
                               <VideoCardSkeleton key={j} />
@@ -404,14 +404,14 @@ const Community = () => {
                     {videoCategories.map((category) => (
                       <div
                         key={category.id}
-                        className="border border-border rounded-lg overflow-hidden bg-card/50 backdrop-blur-sm"
+                        className="border border-border rounded-lg overflow-hidden bg-card backdrop-blur-sm"
                       >
                         <Collapsible
                           open={openCategories.includes(category.id)}
                           onOpenChange={() => toggleCategory(category.id)}
                         >
                           <CollapsibleTrigger asChild>
-                            <div className="bg-card p-4 flex justify-between items-center cursor-pointer hover:bg-accent/30 transition-colors">
+                            <div className="bg-card p-4 flex justify-between items-center cursor-pointer hover:bg-accent transition-colors">
                               <div className="flex-1">
                                 <div className="flex items-center gap-3">
                                    <h2 className="font-geist text-2xl">
@@ -419,7 +419,7 @@ const Community = () => {
                                   </h2>
                                   <Badge
                                     variant="secondary"
-                                    className="bg-cow-purple/10 text-cow-purple"
+                                    className="bg-primary/10 text-primary"
                                   >
                                     {category.videos.length} videos
                                   </Badge>
@@ -437,12 +437,12 @@ const Community = () => {
                             </div>
                           </CollapsibleTrigger>
                           <CollapsibleContent>
-                            <div className="p-4 bg-background/60">
+                            <div className="p-4 bg-background">
                               <div className="flex overflow-x-auto pb-4 space-x-4 custom-scrollbar">
                                 {category.videos.map((video) => (
                                   <div
                                     key={video.id}
-                                    className="min-w-[280px] max-w-[280px] bg-card border border-border rounded-lg overflow-hidden cursor-pointer hover:border-cow-purple transition-all group"
+                                    className="min-w-[280px] max-w-[280px] bg-card border border-border rounded-lg overflow-hidden cursor-pointer hover:border-primary transition-all group"
                                     onClick={() => setSelectedVideo(video)}
                                   >
                                     <div className="relative">
@@ -504,7 +504,7 @@ const Community = () => {
                       {servers.map((server) => (
                         <div
                           key={server.id}
-                          className="bg-card border border-border rounded-lg overflow-hidden p-6 flex flex-col h-full hover:shadow-lg hover:shadow-cow-purple/10 transition-all"
+                          className="bg-card border border-border rounded-lg overflow-hidden p-6 flex flex-col h-full hover:shadow-lg hover:shadow-primary/10 transition-all"
                         >
                           <div className="flex items-center gap-4 mb-4">
                             {server.image && (
@@ -512,14 +512,14 @@ const Community = () => {
                                 <img
                                   src={server.image}
                                   alt={server.name}
-                                  className="w-16 h-16 rounded-xl object-cover ring-2 ring-border group-hover:ring-cow-purple/30 transition-all"
+                                  className="w-16 h-16 rounded-xl object-cover ring-2 ring-border group-hover:ring-primary/30 transition-all"
                                   loading="lazy"
                                 />
                               </div>
                             )}
 
                             <div className="flex flex-col">
-                              <h3 className="text-xl font-jetbrains-mono">
+                              <h3 className="text-xl ">
                                 {server.name}
                               </h3>
                               <div className="flex items-center gap-2 mt-1">
@@ -551,7 +551,7 @@ const Community = () => {
 
                           <Button
                             onClick={() => handleJoinServer(server)}
-                            className="w-full pixel-btn-primary flex items-center justify-center"
+                            className="w-full inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 flex items-center justify-center"
                           >
                             Join Server
                             <JoinServerIcon />
@@ -575,15 +575,15 @@ const Community = () => {
         open={!!selectedVideo}
         onOpenChange={(open) => !open && setSelectedVideo(null)}
       >
-        <DialogContent className="sm:max-w-5xl pixel-corners overflow-hidden max-h-[90vh] custom-scrollbar bg-background/95 backdrop-blur-sm">
+        <DialogContent className="sm:max-w-5xl  overflow-hidden max-h-[90vh] custom-scrollbar bg-background backdrop-blur-sm">
           <DialogHeader className="pb-4 border-b border-border/50">
-            <DialogTitle className="text-2xl font-jetbrains-mono text-cow-purple">
+            <DialogTitle className="text-2xl text-primary">
               {selectedVideo?.title}
             </DialogTitle>
             <DialogDescription className="flex items-center gap-3 text-base">
               <Badge
                 variant="secondary"
-                className="bg-cow-purple/10 text-cow-purple"
+                className="bg-primary/10 text-primary"
               >
                 {selectedVideo?.creator}
               </Badge>
@@ -609,7 +609,7 @@ const Community = () => {
             </div>
 
             <Button
-              className="w-full pixel-btn-primary py-3 text-base"
+              className="w-full inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 py-3 text-base"
               onClick={() => window.open(selectedVideo?.url, "_blank", "noopener,noreferrer")}
             >
               Watch on YouTube
diff --git a/src/pages/Construction.tsx b/src/pages/Construction.tsx
index 38588833..e6c6cf05 100644
--- a/src/pages/Construction.tsx
+++ b/src/pages/Construction.tsx
@@ -293,8 +293,8 @@ const Community = () => {
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">
           <div className="max-w-5xl mx-auto">
-            <h1 className="text-4xl md:text-5xl font-jetbrains-mono mb-8 text-center">
-              <span className="text-cow-purple">Creator</span> Community
+            <h1 className="text-4xl md:text-5xl mb-8 text-center">
+              <span className="text-primary">Creator</span> Community
             </h1>
 
             <p className="text-center text-muted-foreground mb-12 max-w-xl mx-auto">
@@ -304,20 +304,20 @@ const Community = () => {
 
             <Tabs defaultValue="videos" className="w-full">
               <TabsList className="grid w-full grid-cols-2 mb-8">
-                <TabsTrigger value="videos" className="text-lg font-jetbrains-mono">YouTube Tutorials</TabsTrigger>
-                <TabsTrigger value="servers" className="text-lg font-jetbrains-mono">Discord Servers</TabsTrigger>
+                <TabsTrigger value="videos" className="text-lg ">YouTube Tutorials</TabsTrigger>
+                <TabsTrigger value="servers" className="text-lg ">Discord Servers</TabsTrigger>
               </TabsList>
 
               <TabsContent value="videos">
                 {isLoading ? (
                   <div className="space-y-8">
                     {[1, 2, 3].map(i => (
-                      <div key={i} className="pixel-corners border border-border rounded-md overflow-hidden">
+                      <div key={i} className=" border border-border rounded-md overflow-hidden">
                         <div className="bg-card p-4">
                           <Skeleton className="h-8 w-1/2 mb-2" />
                           <Skeleton className="h-4 w-3/4" />
                         </div>
-                        <div className="p-4 bg-background/80">
+                        <div className="p-4 bg-background">
                           <div className="flex overflow-x-auto pb-4 space-x-4 custom-scrollbar">
                             {[...Array(4)].map((_, j) => <VideoCardSkeleton key={j} />)}
                           </div>
@@ -332,12 +332,12 @@ const Community = () => {
                         key={category.id}
                         open={openCategories.includes(category.id)}
                         onOpenChange={() => toggleCategory(category.id)}
-                        className="border border-border rounded-md pixel-corners overflow-hidden"
+                        className="border border-border rounded-md  overflow-hidden"
                       >
                         <CollapsibleTrigger asChild>
-                          <div className="bg-card p-4 flex justify-between items-center cursor-pointer hover:bg-accent/50 transition-colors">
+                          <div className="bg-card p-4 flex justify-between items-center cursor-pointer hover:bg-accent transition-colors">
                             <div>
-                              <h2 className="text-2xl font-jetbrains-mono">{category.name}</h2>
+                              <h2 className="text-2xl ">{category.name}</h2>
                               <p className="text-muted-foreground text-sm mt-1">
                                 {category.description}
                               </p>
@@ -347,13 +347,13 @@ const Community = () => {
                           </div>
                         </CollapsibleTrigger>
                         <CollapsibleContent>
-                          <div className="p-4 bg-background/80">
+                          <div className="p-4 bg-background">
                             <div className="relative">
                               <div className="flex overflow-x-auto pb-4 space-x-4 custom-scrollbar">
                                 {category.videos.map(video => (
                                   <div
                                     key={video.id}
-                                    className="min-w-[300px] max-w-[300px] pixel-card cursor-pointer hover:border-primary transition-all group"
+                                    className="min-w-[300px] max-w-[300px] rounded-xl border border-border bg-card p-4 cursor-pointer hover:border-primary transition-all group"
                                     onClick={() => setSelectedVideo(video)}
                                   >
                                     <div className="relative rounded-md overflow-hidden mb-3">
@@ -407,7 +407,7 @@ const Community = () => {
                     {servers.map(server => (
                       <div
                         key={server.id}
-                        className="pixel-card overflow-hidden p-6 flex flex-col h-full"
+                        className="rounded-xl border border-border bg-card p-4 overflow-hidden p-6 flex flex-col h-full"
                       >
                         <div className="flex items-center gap-4 mb-4">
                           {server.image && (
@@ -422,7 +422,7 @@ const Community = () => {
                           )}
 
                           <div className="flex flex-col">
-                            <h3 className="text-xl font-jetbrains-mono">
+                            <h3 className="text-xl ">
                               {server.name}
                             </h3>
                             <div className="flex items-center gap-2 mt-1">
@@ -452,7 +452,7 @@ const Community = () => {
                         <div className="mt-4">
                           <Button
                             onClick={() => handleJoinServer(server)}
-                            className="w-full pixel-btn-primary flex items-center justify-center"
+                            className="w-full inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 flex items-center justify-center"
                           >
                             Join Server
                             <JoinServerIcon />
@@ -473,9 +473,9 @@ const Community = () => {
 
       {/* Video Dialog */}
       <Dialog open={!!selectedVideo} onOpenChange={(open) => !open && setSelectedVideo(null)}>
-        <DialogContent className="sm:max-w-4xl pixel-corners overflow-y-auto max-h-[90vh] custom-scrollbar">
+        <DialogContent className="sm:max-w-4xl  overflow-y-auto max-h-[90vh] custom-scrollbar">
           <DialogHeader>
-            <DialogTitle className="text-2xl font-jetbrains-mono">{selectedVideo?.title}</DialogTitle>
+            <DialogTitle className="text-2xl ">{selectedVideo?.title}</DialogTitle>
             <DialogDescription className="flex items-center gap-2">
               <Badge variant="secondary">
                 {selectedVideo?.creator}
@@ -501,7 +501,7 @@ const Community = () => {
             </div>
 
             <Button
-              className="w-full pixel-btn-primary"
+              className="w-full inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
               onClick={() => window.open(selectedVideo?.url, '_blank', 'noopener,noreferrer')}
             >
               Watch on YouTube
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 6ba3b851..538e24f2 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -1,5 +1,5 @@
-import { useState, useEffect } from "react";
-import { IconCopy, IconMail, IconCheck, IconBrandGithub, IconGlobe, IconExternalLink } from '@tabler/icons-react';
+import { useState } from "react";
+import { IconCopy, IconMail, IconCheck } from '@tabler/icons-react';
 import Footer from "@/components/Footer";
 import { Button } from "@/components/ui/button";
 import { toast } from "sonner";
@@ -97,9 +97,20 @@ const teamMembers: TeamMember[] = [
   },
 ];
 
+const socialLink = (href: string, label: string, iconSrc: string) => (
+  <a
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="rounded-lg border border-border bg-accent p-2 transition-colors hover:border-primary/60"
+    aria-label={label}
+  >
+    <img className="h-4 w-4" src={iconSrc} alt="" loading="lazy" />
+  </a>
+);
+
 const Contact = () => {
   const [copied, setCopied] = useState(false);
-  const [activeCard, setActiveCard] = useState<number | null>(null);
   const email = "contact@renderdragon.org";
 
   const copyToClipboard = () => {
@@ -140,27 +151,32 @@ const Contact = () => {
 
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">
-          <div className="max-w-3xl mx-auto">
-<h1 className="text-4xl md:text-5xl font-minecraftia mb-8 text-center">
-               <span className="text-cow-purple">Contact</span> Us
-            </h1>
+          <div className="max-w-5xl mx-auto">
+            <header className="text-center mb-12">
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-3">
+                Contact us
+              </h1>
+              <p className="text-lg text-muted-foreground max-w-xl mx-auto">
+                Questions, feedback, or just want to say hello? We'd love to hear from you.
+              </p>
+            </header>
 
-            <div className="bg-card pixel-corners border-2 border-primary/50 p-8 mb-12">
-              <div className="mb-8">
-                 <h2 className="text-2xl font-geist mb-4">Get In Touch</h2>
-                <p className="text-muted-foreground mb-6">
-                  Have questions, feedback, or just want to say hello? We'd love
-                  to hear from you!
+            <div className="grid gap-6 md:grid-cols-3 mb-16">
+              <div className="md:col-span-2 rounded-xl border border-border bg-card p-6">
+                <h2 className="text-lg font-semibold mb-1">Email us</h2>
+                <p className="text-sm text-muted-foreground mb-4">
+                  We're all volunteers, but we usually reply within 48 hours.
                 </p>
-
-                <div className="flex items-center space-x-4">
-                  <IconMail className="h-5 w-5 text-primary" />
-                  <span className="font-medium">{email}</span>
+                <div className="flex flex-wrap items-center gap-3">
+                  <span className="inline-flex items-center gap-2 text-sm">
+                    <IconMail className="h-4 w-4 text-primary" />
+                    {email}
+                  </span>
                   <Button
                     variant="outline"
                     size="sm"
                     onClick={copyToClipboard}
-                    className="flex items-center space-x-1 h-8 text-xs pixel-corners"
+                    className="gap-1.5"
                   >
                     {copied ? (
                       <>
@@ -177,52 +193,32 @@ const Contact = () => {
                 </div>
               </div>
 
-              <div className="mb-8">
-                <h2 className="text-2xl font-jetbrains-mono mb-4">Join Our Community</h2>
-                <p className="text-muted-foreground mb-4">
-                  Connect with other creators and our team on Discord.
+              <div className="rounded-xl border border-border bg-card p-6 flex flex-col">
+                <h2 className="text-lg font-semibold mb-1">Join the community</h2>
+                <p className="text-sm text-muted-foreground mb-4">
+                  Connect with creators and the team on Discord.
                 </p>
-
                 <a
                   href="https://discord.renderdragon.org"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="pixel-btn-primary inline-flex items-center space-x-2"
+                  className="mt-auto inline-flex items-center justify-center gap-2 chamfer bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
                 >
-                  <span>join discord</span>
-                  <img
-                    className="w-4 h-4"
-                    src="/assets/discord_icon.png"
-                    alt="Discord"
-                  />
+                  <span>Join Discord</span>
+                  <img className="h-4 w-4" src="/assets/discord_icon.png" alt="" loading="lazy" />
                 </a>
               </div>
-
-              <div>
-                 <h2 className="text-2xl font-geist mb-4">Support Hours</h2>
-                <p className="text-muted-foreground">
-                  Well, we do what we can! We're all volunteers, not benefiting
-                  from the project, but if you join our Discord, we'll really
-                  try to get you an answer within 48 hours.
-                </p>
-              </div>
             </div>
 
-            <div>
-<h2 className="text-2xl font-minecraftia mb-6 text-center">
-                 Meet The Team
-              </h2>
-
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                {teamMembers.map((member, index) => (
+            <section>
+              <h2 className="text-2xl font-semibold tracking-tight mb-6">Meet the team</h2>
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
+                {teamMembers.map((member) => (
                   <div
-                    key={index}
-                    className={`bg-card border border-border hover:border-cow-purple transition-all duration-300 pixel-corners p-4 flex flex-col items-center text-center
-                      ${activeCard === index ? "scale-105 shadow-lg shadow-cow-purple/20" : ""}`}
-                    onMouseEnter={() => setActiveCard(index)}
-                    onMouseLeave={() => setActiveCard(null)}
+                    key={member.name}
+                    className="flex flex-col items-center rounded-xl border border-border bg-card p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:border-primary/60"
                   >
-                    <div className="w-24 h-24 rounded-full overflow-hidden mb-4 pixel-corners border-2 border-cow-purple">
+                    <div className="w-20 h-20 rounded-full overflow-hidden border border-border mb-4">
                       <img
                         src={member.avatar}
                         alt={member.name}
@@ -233,68 +229,20 @@ const Contact = () => {
                         decoding="async"
                       />
                     </div>
-                     <h3 className="text-lg font-geist font-medium">{member.name}</h3>
-                    <p className="text-sm text-cow-purple font-semibold mb-2">
-                      {member.role}
-                    </p>
+                    <h3 className="font-medium">{member.name}</h3>
+                    <p className="text-xs text-muted-foreground mb-4">{member.role}</p>
 
-                    {/* socials */}
                     {member.socials && (
-                      <div className="flex space-x-3 mt-auto">
-                        {member.socials.github && (
-                          <a
-                            href={member.socials.github}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="bg-secondary hover:bg-primary hover:text-primary-foreground p-2 rounded-md transition-colors"
-                            aria-label={`${member.name}'s GitHub`}
-                          >
-                            <img
-                              className="w-4 h-4"
-                              src="/assets/github_icon.png"
-                              alt="GitHub"
-                              loading="lazy"
-                            />
-                          </a>
-                        )}
-                        {member.socials.website && (
-                          <a
-                            href={member.socials.website}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="bg-secondary hover:bg-primary hover:text-primary-foreground p-2 rounded-md transition-colors"
-                            aria-label={`${member.name}'s Website`}
-                          >
-                            <img
-                              className="w-4 h-4"
-                              src="/assets/domain_icon.png"
-                              alt="Website"
-                              loading="lazy"
-                            />
-                          </a>
-                        )}
-                        {member.socials.discord && (
-                          <a
-                            href={member.socials.discord}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="bg-secondary hover:bg-primary hover:text-primary-foreground p-2 rounded-md transition-colors"
-                            aria-label={`${member.name}'s Discord`}
-                          >
-                            <img
-                              className="w-4 h-4"
-                              src="/assets/discord_icon.png"
-                              alt="Discord"
-                              loading="lazy"
-                            />
-                          </a>
-                        )}
+                      <div className="mt-auto flex gap-2">
+                        {member.socials.github && socialLink(member.socials.github, `${member.name}'s GitHub`, "/assets/github_icon.png")}
+                        {member.socials.website && socialLink(member.socials.website, `${member.name}'s Website`, "/assets/domain_icon.png")}
+                        {member.socials.discord && socialLink(member.socials.discord, `${member.name}'s Discord`, "/assets/discord_icon.png")}
                       </div>
                     )}
                   </div>
                 ))}
               </div>
-            </div>
+            </section>
           </div>
         </div>
       </main>
diff --git a/src/pages/CreateCreatorPackPage.tsx b/src/pages/CreateCreatorPackPage.tsx
index 15ce4fd7..58fdaf29 100644
--- a/src/pages/CreateCreatorPackPage.tsx
+++ b/src/pages/CreateCreatorPackPage.tsx
@@ -123,7 +123,7 @@ const CreateCreatorPackPage = () => {
                                     placeholder="My Awesome Creator Pack"
                                     value={title}
                                     onChange={(e) => setTitle(e.target.value)}
-                                    className="pixel-corners"
+                                    className=""
                                     required
                                 />
                             </div>
@@ -136,7 +136,7 @@ const CreateCreatorPackPage = () => {
                                     placeholder="A brief tagline for the card preview"
                                     value={smallDescription}
                                     onChange={(e) => setSmallDescription(e.target.value)}
-                                    className="pixel-corners"
+                                    className=""
                                     maxLength={200}
                                 />
                             </div>
@@ -149,7 +149,7 @@ const CreateCreatorPackPage = () => {
                                     placeholder="https://drive.google.com/..."
                                     value={externalLink}
                                     onChange={(e) => setExternalLink(e.target.value)}
-                                    className="pixel-corners"
+                                    className=""
                                     type="url"
                                     required
                                 />
@@ -164,9 +164,9 @@ const CreateCreatorPackPage = () => {
                                             key={tag}
                                             type="button"
                                             onClick={() => toggleTag(tag)}
-                                            className={`px-3 py-1 rounded-full text-sm font-medium transition-colors border ${selectedTags.includes(tag)
-                                                ? 'bg-cow-purple text-white border-cow-purple'
-                                                : 'bg-muted/50 text-muted-foreground border-border hover:bg-muted'
+                                            className={`px-3 py-1 chamfer text-sm font-medium transition-colors border ${selectedTags.includes(tag)
+                                                ? 'bg-primary text-white border-primary'
+                                                : 'bg-muted text-muted-foreground border-border hover:bg-muted'
                                                 }`}
                                         >
                                             {tag}
@@ -182,7 +182,7 @@ const CreateCreatorPackPage = () => {
                                     {coverPreview && (
                                         <img src={coverPreview} alt="Cover preview" className="w-32 h-20 object-cover rounded-md border border-border/50" />
                                     )}
-                                    <label className="flex items-center gap-2 px-4 py-3 rounded-md border border-dashed border-border/60 cursor-pointer hover:bg-muted/30 transition-colors text-sm">
+                                    <label className="flex items-center gap-2 px-4 py-3 rounded-md border border-dashed border-border/60 cursor-pointer hover:bg-muted transition-colors text-sm">
                                         <IconUpload size={18} className="text-muted-foreground" />
                                         <span>{coverFile ? coverFile.name : 'Choose cover image'}</span>
                                         <input type="file" accept="image/*" onChange={handleCoverChange} className="hidden" />
@@ -199,7 +199,7 @@ const CreateCreatorPackPage = () => {
                                     </Button>
                                 </div>
                                 {showPreview ? (
-                                    <div className="border border-border/50 p-4 rounded-md bg-muted/10 min-h-[300px]">
+                                    <div className="border border-border/50 p-4 rounded-md bg-muted min-h-[300px]">
                                         <div className="max-w-none font-geist text-sm text-foreground/90 leading-relaxed">
                                             <ReactMarkdown
                                                 remarkPlugins={[remarkGfm]}
@@ -209,7 +209,7 @@ const CreateCreatorPackPage = () => {
                                                     h3: ({ children }) => <h3 className="text-lg font-semibold mt-4 mb-2 font-geist">{children}</h3>,
                                                     p: ({ children }) => <p className="mb-3">{children}</p>,
                                                     ul: ({ children }) => <ul className="list-disc pl-5 mb-3 space-y-1">{children}</ul>,
-                                                    code: ({ children }) => <code className="bg-muted/30 px-1.5 py-0.5 rounded text-xs font-mono">{children}</code>,
+                                                    code: ({ children }) => <code className="bg-muted px-1.5 py-0.5 rounded text-xs font-mono">{children}</code>,
                                                 }}
                                             >
                                                 {description || '*Nothing to preview yet.*'}
@@ -222,7 +222,7 @@ const CreateCreatorPackPage = () => {
                                         value={description}
                                         onChange={(e) => setDescription(e.target.value)}
                                         placeholder={"# My Pack\n\nDescribe your creator pack with full **markdown** support!\n\n- Item 1\n- Item 2"}
-                                        className="font-mono min-h-[300px] pixel-corners"
+                                        className="font-mono min-h-[300px] "
                                     />
                                 )}
                             </div>
@@ -232,14 +232,14 @@ const CreateCreatorPackPage = () => {
                                     type="button"
                                     variant="outline"
                                     onClick={() => navigate('/resources?tab=creator-packs')}
-                                    className="pixel-corners"
+                                    className=""
                                 >
                                     Cancel
                                 </Button>
                                 <Button
                                     type="submit"
                                     disabled={isSubmitting || !title.trim() || !externalLink.trim()}
-                                    className="pixel-corners bg-cow-purple hover:bg-cow-purple/90 min-w-[140px]"
+                                    className=" bg-primary hover:bg-primary/90 min-w-[140px]"
                                 >
                                     {isSubmitting ? (
                                         <><IconLoader2 className="mr-2 h-4 w-4 animate-spin" /> Publishing...</>
diff --git a/src/pages/CreatorPackPage.tsx b/src/pages/CreatorPackPage.tsx
index b353b82b..02cfea7c 100644
--- a/src/pages/CreatorPackPage.tsx
+++ b/src/pages/CreatorPackPage.tsx
@@ -54,7 +54,7 @@ const CreatorPackPage = () => {
         return (
             <div className="min-h-screen flex flex-col">
                 <div className="flex-grow flex items-center justify-center">
-                    <IconLoader2 className="w-10 h-10 animate-spin text-cow-purple" />
+                    <IconLoader2 className="w-10 h-10 animate-spin text-primary" />
                 </div>
                 <Footer />
             </div>
@@ -67,7 +67,7 @@ const CreatorPackPage = () => {
                 <div className="flex-grow flex flex-col items-center justify-center gap-4">
                     <h1 className="text-3xl font-geist">Pack Not Found</h1>
                     <Link to="/resources?tab=creator-packs">
-                        <Button variant="outline" className="pixel-corners">
+                        <Button variant="outline" className="">
                             <IconArrowLeft className="mr-2 h-4 w-4" /> Back to Creator Packs
                         </Button>
                     </Link>
@@ -125,7 +125,7 @@ const CreatorPackPage = () => {
                                 {pack.tags && pack.tags.length > 0 && (
                                     <div className="flex flex-wrap gap-2">
                                         {pack.tags.map(tag => (
-                                            <span key={tag} className="text-sm px-3 py-1 rounded-full bg-primary/10 text-primary border border-primary/20">
+                                            <span key={tag} className="text-sm px-3 py-1 chamfer bg-primary/10 text-primary border border-primary/20">
                                                 {tag}
                                             </span>
                                         ))}
@@ -136,7 +136,7 @@ const CreatorPackPage = () => {
                             <div className="flex gap-2 flex-shrink-0">
                                 <Button
                                     onClick={() => setIsWarningOpen(true)}
-                                    className="pixel-corners bg-cow-purple hover:bg-cow-purple/90"
+                                    className=" bg-primary hover:bg-primary/90"
                                 >
                                     <IconExternalLink className="mr-2 h-4 w-4" /> Download
                                 </Button>
@@ -146,7 +146,7 @@ const CreatorPackPage = () => {
                                         size="icon"
                                         onClick={handleDelete}
                                         disabled={isDeleting}
-                                        className="pixel-corners"
+                                        className=""
                                     >
                                         {isDeleting ? <IconLoader2 className="h-4 w-4 animate-spin" /> : <IconTrash className="h-4 w-4" />}
                                     </Button>
@@ -191,7 +191,7 @@ const CreatorPackPage = () => {
                                     ol: ({ children }) => <ol className="list-decimal pl-6 mb-4 space-y-1">{children}</ol>,
                                     a: ({ children, href }) => <a href={href} target="_blank" rel="noopener noreferrer" className="text-primary underline hover:text-primary/80">{children}</a>,
                                     blockquote: ({ children }) => <blockquote className="border-l-4 border-primary/50 pl-4 italic text-muted-foreground my-4">{children}</blockquote>,
-                                    code: ({ children }) => <code className="bg-muted/30 px-1.5 py-0.5 rounded text-sm font-mono">{children}</code>,
+                                    code: ({ children }) => <code className="bg-muted px-1.5 py-0.5 rounded text-sm font-mono">{children}</code>,
                                     img: ({ src, alt }) => <img src={src} alt={alt} className="rounded-lg max-w-full my-4" />,
                                     hr: () => <hr className="border-border/50 my-6" />,
                                 }}
@@ -205,7 +205,7 @@ const CreatorPackPage = () => {
                             <Button
                                 size="lg"
                                 onClick={() => setIsWarningOpen(true)}
-                                className="pixel-corners bg-cow-purple hover:bg-cow-purple/90"
+                                className=" bg-primary hover:bg-primary/90"
                             >
                                 <IconExternalLink className="mr-2 h-5 w-5" /> Download Creator Pack
                             </Button>
diff --git a/src/pages/EditCreatorPackPage.tsx b/src/pages/EditCreatorPackPage.tsx
index 461372d5..6252939c 100644
--- a/src/pages/EditCreatorPackPage.tsx
+++ b/src/pages/EditCreatorPackPage.tsx
@@ -129,7 +129,7 @@ const EditCreatorPackPage = () => {
         return (
             <div className="min-h-screen flex flex-col">
                 <div className="flex-grow flex items-center justify-center">
-                    <IconLoader2 className="w-10 h-10 animate-spin text-cow-purple" />
+                    <IconLoader2 className="w-10 h-10 animate-spin text-primary" />
                 </div>
                 <Footer />
             </div>
@@ -197,7 +197,7 @@ const EditCreatorPackPage = () => {
                                     placeholder="My Awesome Creator Pack"
                                     value={title}
                                     onChange={(e) => setTitle(e.target.value)}
-                                    className="pixel-corners"
+                                    className=""
                                     required
                                 />
                             </div>
@@ -210,7 +210,7 @@ const EditCreatorPackPage = () => {
                                     placeholder="A brief tagline for the card preview"
                                     value={smallDescription}
                                     onChange={(e) => setSmallDescription(e.target.value)}
-                                    className="pixel-corners"
+                                    className=""
                                     maxLength={200}
                                 />
                             </div>
@@ -223,7 +223,7 @@ const EditCreatorPackPage = () => {
                                     placeholder="https://drive.google.com/..."
                                     value={externalLink}
                                     onChange={(e) => setExternalLink(e.target.value)}
-                                    className="pixel-corners"
+                                    className=""
                                     type="url"
                                     required
                                 />
@@ -238,9 +238,9 @@ const EditCreatorPackPage = () => {
                                             key={tag}
                                             type="button"
                                             onClick={() => toggleTag(tag)}
-                                            className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors border ${selectedTags.includes(tag)
-                                                ? 'bg-cow-purple text-white border-cow-purple'
-                                                : 'bg-muted/50 text-muted-foreground border-border hover:bg-muted font-geist'
+                                            className={`px-3 py-1.5 chamfer text-sm font-medium transition-colors border ${selectedTags.includes(tag)
+                                                ? 'bg-primary text-white border-primary'
+                                                : 'bg-muted text-muted-foreground border-border hover:bg-muted font-geist'
                                                 }`}
                                         >
                                             {tag}
@@ -259,7 +259,7 @@ const EditCreatorPackPage = () => {
                                         <img src={existingCoverUrl} alt="Current cover" className="w-32 h-20 object-cover rounded-md border border-border/50" />
                                     ) : null}
 
-                                    <label className="flex items-center gap-2 px-4 py-3 rounded-md border border-dashed border-border/60 cursor-pointer hover:bg-muted/30 transition-colors text-sm w-fit">
+                                    <label className="flex items-center gap-2 px-4 py-3 rounded-md border border-dashed border-border/60 cursor-pointer hover:bg-muted transition-colors text-sm w-fit">
                                         <IconUpload size={18} className="text-muted-foreground" />
                                         <span>{coverFile ? coverFile.name : 'Change cover image'}</span>
                                         <input type="file" accept="image/*" onChange={handleCoverChange} className="hidden" />
@@ -276,7 +276,7 @@ const EditCreatorPackPage = () => {
                                     </Button>
                                 </div>
                                 {showPreview ? (
-                                    <div className="border border-border/50 p-4 rounded-md bg-muted/10 min-h-[300px]">
+                                    <div className="border border-border/50 p-4 rounded-md bg-muted min-h-[300px]">
                                         <div className="max-w-none font-geist text-sm text-foreground/90 leading-relaxed">
                                             <ReactMarkdown
                                                 remarkPlugins={[remarkGfm]}
@@ -286,7 +286,7 @@ const EditCreatorPackPage = () => {
                                                     h3: ({ children }) => <h3 className="text-lg font-semibold mt-4 mb-2 font-geist">{children}</h3>,
                                                     p: ({ children }) => <p className="mb-3">{children}</p>,
                                                     ul: ({ children }) => <ul className="list-disc pl-5 mb-3 space-y-1">{children}</ul>,
-                                                    code: ({ children }) => <code className="bg-muted/30 px-1.5 py-0.5 rounded text-xs font-mono">{children}</code>,
+                                                    code: ({ children }) => <code className="bg-muted px-1.5 py-0.5 rounded text-xs font-mono">{children}</code>,
                                                 }}
                                             >
                                                 {description || '*Nothing to preview yet.*'}
@@ -299,7 +299,7 @@ const EditCreatorPackPage = () => {
                                         value={description}
                                         onChange={(e) => setDescription(e.target.value)}
                                         placeholder={"# My Pack\n\nDescribe your creator pack with full **markdown** support!\n\n- Item 1\n- Item 2"}
-                                        className="font-mono min-h-[300px] pixel-corners"
+                                        className="font-mono min-h-[300px] "
                                     />
                                 )}
                             </div>
@@ -309,14 +309,14 @@ const EditCreatorPackPage = () => {
                                     type="button"
                                     variant="outline"
                                     onClick={() => navigate('/creator-packs/manage')}
-                                    className="pixel-corners"
+                                    className=""
                                 >
                                     Cancel
                                 </Button>
                                 <Button
                                     type="submit"
                                     disabled={isSubmitting || !title.trim() || !externalLink.trim()}
-                                    className="pixel-corners bg-cow-purple hover:bg-cow-purple/90 min-w-[140px]"
+                                    className=" bg-primary hover:bg-primary/90 min-w-[140px]"
                                 >
                                     {isSubmitting ? (
                                         <><IconLoader2 className="mr-2 h-4 w-4 animate-spin" /> Saving...</>
diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx
index bac090fa..8dcfd2ac 100644
--- a/src/pages/FAQ.tsx
+++ b/src/pages/FAQ.tsx
@@ -66,15 +66,15 @@ const FAQ = () => {
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">
           <div className="max-w-3xl mx-auto">
-            <h1 className="text-4xl md:text-5xl font-minecraftia mb-8 text-center">
-              Frequently Asked <span className="text-cow-purple">Questions</span>
+            <h1 className="text-4xl md:text-5xl mb-8 text-center">
+              Frequently Asked <span className="text-primary">Questions</span>
             </h1>
 
-            <div className="pixel-card space-y-6">
+            <div className="rounded-xl border border-border bg-card p-4 space-y-6">
               <div className="space-y-8 text-muted-foreground">
                 {FAQ_GROUPS.map((group, groupIndex) => (
                   <div key={group.title}>
-                    <h2 className={`text-2xl ${groupIndex === 0 ? 'font-minecraftia' : 'font-jetbrains-mono'} text-foreground mb-4`}>
+                    <h2 className={`text-2xl ${groupIndex === 0 ? '' : ''} text-foreground mb-4`}>
                       {group.title}
                     </h2>
 
diff --git a/src/pages/Generators.tsx b/src/pages/Generators.tsx
index be5f06e9..a53c51de 100644
--- a/src/pages/Generators.tsx
+++ b/src/pages/Generators.tsx
@@ -27,8 +27,8 @@ const Generators = () => {
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto">
-            <h1 className="text-4xl md:text-5xl font-minecraftia mb-8 text-center">
-              Content <span className="text-cow-purple">Generators</span>
+            <h1 className="text-4xl md:text-5xl mb-8 text-center">
+              Content <span className="text-primary">Generators</span>
             </h1>
 
             <p className="text-center text-muted-foreground mb-8 max-w-xl mx-auto">
diff --git a/src/pages/GuideView.tsx b/src/pages/GuideView.tsx
index 148090cf..73eb0cd9 100644
--- a/src/pages/GuideView.tsx
+++ b/src/pages/GuideView.tsx
@@ -180,10 +180,10 @@ export default function GuideView() {
 
             <aside className="lg:col-span-4 xl:col-span-3">
               <div className="lg:sticky lg:top-24">
-                <div className="pixel-corners border border-border p-4 bg-background/60 backdrop-blur">
+                <div className=" border border-border p-4 bg-background backdrop-blur">
                   <div className="flex items-center gap-2 mb-3">
-                    <IconList className="h-4 w-4 text-cow-purple" />
-                    <h3 className="font-jetbrains-mono text-xl">Sections</h3>
+                    <IconList className="h-4 w-4 text-primary" />
+                    <h3 className="text-xl">Sections</h3>
                   </div>
                   {headings.length === 0 ? (
                     <p className="text-sm text-muted-foreground">
diff --git a/src/pages/Guides.tsx b/src/pages/Guides.tsx
index 7908538b..163363bb 100644
--- a/src/pages/Guides.tsx
+++ b/src/pages/Guides.tsx
@@ -147,8 +147,8 @@ const GuidesPage = () => {
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">
           <div className="max-w-5xl mx-auto">
-<h1 className="text-4xl md:text-5xl font-minecraftia mb-8 text-center">
-               <span className="text-cow-purple">Minecraft</span> Guides
+<h1 className="text-4xl md:text-5xl mb-8 text-center">
+               <span className="text-primary">Minecraft</span> Guides
             </h1>
 
             <p
@@ -170,7 +170,7 @@ const GuidesPage = () => {
                 {guides.map((guide) => (
                   <Card
                     key={guide.id}
-                    className="pixel-corners border border-border hover:border-primary transition-all cursor-pointer"
+                    className=" border border-border hover:border-primary transition-all cursor-pointer"
                     onClick={() => handleOpenGuide(guide)}
                   >
                     <CardHeader>
@@ -186,7 +186,7 @@ const GuidesPage = () => {
                           </span>
                         </div>
                       </div>
-                      <CardTitle className="font-minecraftia text-xl">
+                      <CardTitle className="text-xl">
                         {guide.title}
                       </CardTitle>
                       <CardDescription
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index cc084e06..c5e72529 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -58,7 +58,7 @@ const Index = () => {
           <Testimonials />
         </motion.div>
 
-        <div className="border-y-4 border-cow-purple" />
+        <div className="border-t border-border" />
 
         <motion.div {...fadeInUp}>
           <Partnership />
diff --git a/src/pages/LooneyResultPage.tsx b/src/pages/LooneyResultPage.tsx
index ba01f9f9..0dbfa3a0 100644
--- a/src/pages/LooneyResultPage.tsx
+++ b/src/pages/LooneyResultPage.tsx
@@ -126,12 +126,12 @@ const LooneyResultPage = () => {
     <main className="flex-grow cow-grid-bg bg-background px-4 pb-20 pt-28">
       <div className="container mx-auto max-w-6xl">
         <Link to="/gappa" className="inline-flex items-center gap-2 text-sm font-semibold text-muted-foreground hover:text-foreground"><IconArrowLeft className="h-4 w-4" /> Back to checks</Link>
-        <div className="mx-auto mt-10 max-w-3xl text-center"><h1 className="font-minecraftia text-3xl leading-relaxed md:text-5xl">Check result</h1><p className="mt-4 text-base text-muted-foreground">A saved Looney research report, ready to review before publishing.</p></div>
-        {loading ? <div className="pixel-corners mx-auto mt-10 max-w-lg border-2 border-cow-purple/40 bg-cow-purple/5 p-6 text-center"><IconLoader2 className="mx-auto h-8 w-8 animate-spin text-cow-purple" /><p className="mt-4 text-sm text-muted-foreground">Loading this Looney check...</p></div>
+        <div className="mx-auto mt-10 max-w-3xl text-center"><h1 className="text-3xl leading-relaxed md:text-5xl">Check result</h1><p className="mt-4 text-base text-muted-foreground">A saved Looney research report, ready to review before publishing.</p></div>
+        {loading ? <div className=" mx-auto mt-10 max-w-lg border-2 border-primary/40 bg-primary/5 p-6 text-center"><IconLoader2 className="mx-auto h-8 w-8 animate-spin text-primary" /><p className="mt-4 text-sm text-muted-foreground">Loading this Looney check...</p></div>
           : record?.result ? <div className="mx-auto mt-10 max-w-5xl"><LooneyResultDisplay result={record.result} sourceType={record.sourceType} sourceLabel={record.sourceLabel} onClose={() => navigate('/gappa')} /></div>
-            : running ? <div className="pixel-corners mx-auto mt-10 max-w-lg border-2 border-cow-purple/40 bg-cow-purple/5 p-6 text-center"><IconAlertTriangle className="mx-auto h-8 w-8 text-cow-purple" /><h2 className="mt-4 font-minecraftia text-base">Check in progress</h2><p className="mt-3 break-words text-sm text-muted-foreground">{record.progress || 'Looney is researching this source.'}</p></div>
-              : notFound ? <div className="pixel-corners mx-auto mt-10 max-w-lg border-2 border-amber-500/40 bg-amber-500/5 p-6 text-center"><IconAlertTriangle className="mx-auto h-8 w-8 text-amber-500" /><h2 className="mt-4 font-minecraftia text-base">Check not found</h2><p className="mt-3 break-words text-sm text-muted-foreground">This Looney job is no longer available.</p><Link to="/gappa" className="mt-5 inline-block font-semibold text-cow-purple">Return to checks</Link></div>
-                : <div className="pixel-corners mx-auto mt-10 max-w-lg border-2 border-amber-500/40 bg-amber-500/5 p-6 text-center"><IconAlertTriangle className="mx-auto h-8 w-8 text-amber-500" /><h2 className="mt-4 font-minecraftia text-base">Check failed</h2><p className="mt-3 break-words text-sm text-muted-foreground">{record?.error || 'Looney could not complete this check.'}</p><Link to="/gappa" className="mt-5 inline-block font-semibold text-cow-purple">Return to checks</Link></div>}
+            : running ? <div className=" mx-auto mt-10 max-w-lg border-2 border-primary/40 bg-primary/5 p-6 text-center"><IconAlertTriangle className="mx-auto h-8 w-8 text-primary" /><h2 className="mt-4 text-base">Check in progress</h2><p className="mt-3 break-words text-sm text-muted-foreground">{record.progress || 'Looney is researching this source.'}</p></div>
+              : notFound ? <div className=" mx-auto mt-10 max-w-lg border-2 border-amber-500/40 bg-amber-500/5 p-6 text-center"><IconAlertTriangle className="mx-auto h-8 w-8 text-amber-500" /><h2 className="mt-4 text-base">Check not found</h2><p className="mt-3 break-words text-sm text-muted-foreground">This Looney job is no longer available.</p><Link to="/gappa" className="mt-5 inline-block font-semibold text-primary">Return to checks</Link></div>
+                : <div className=" mx-auto mt-10 max-w-lg border-2 border-amber-500/40 bg-amber-500/5 p-6 text-center"><IconAlertTriangle className="mx-auto h-8 w-8 text-amber-500" /><h2 className="mt-4 text-base">Check failed</h2><p className="mt-3 break-words text-sm text-muted-foreground">{record?.error || 'Looney could not complete this check.'}</p><Link to="/gappa" className="mt-5 inline-block font-semibold text-primary">Return to checks</Link></div>}
       </div>
     </main>
     <Footer />
diff --git a/src/pages/ManageCreatorPacksPage.tsx b/src/pages/ManageCreatorPacksPage.tsx
index fd5d5ab6..7a107bcb 100644
--- a/src/pages/ManageCreatorPacksPage.tsx
+++ b/src/pages/ManageCreatorPacksPage.tsx
@@ -67,7 +67,7 @@ const ManageCreatorPacksPage = () => {
                             <p className="text-muted-foreground mt-1">View, edit, or delete creator packs you have published.</p>
                         </div>
                         <Link to="/creator-packs/new">
-                            <Button className="pixel-corners bg-cow-purple hover:bg-cow-purple/90 font-geist">
+                            <Button className=" bg-primary hover:bg-primary/90 font-geist">
                                 Upload New Pack
                             </Button>
                         </Link>
@@ -75,7 +75,7 @@ const ManageCreatorPacksPage = () => {
 
                     {isLoading ? (
                         <div className="flex justify-center p-12">
-                            <IconLoader2 className="w-8 h-8 animate-spin text-cow-purple" />
+                            <IconLoader2 className="w-8 h-8 animate-spin text-primary" />
                         </div>
                     ) : userPacks.length === 0 ? (
                         <div className="text-center py-16 bg-card border border-border/50 rounded-xl shadow-sm">
@@ -83,7 +83,7 @@ const ManageCreatorPacksPage = () => {
                             <h3 className="text-xl font-geist font-medium mb-2">No packs published yet</h3>
                             <p className="text-muted-foreground mb-6">You haven't uploaded any creator packs.</p>
                             <Link to="/creator-packs/new">
-                                <Button className="pixel-corners bg-cow-purple hover:bg-cow-purple/90">
+                                <Button className=" bg-primary hover:bg-primary/90">
                                     Create Your First Pack
                                 </Button>
                             </Link>
@@ -101,7 +101,7 @@ const ManageCreatorPacksPage = () => {
                                         className="bg-card border border-border/50 rounded-xl p-4 sm:p-5 flex flex-col sm:flex-row gap-5 items-start sm:items-center shadow-sm hover:border-primary/50 transition-colors"
                                     >
                                         {/* Thumbnail */}
-                                        <div className="w-full sm:w-48 aspect-video bg-muted/20 rounded-md overflow-hidden flex-shrink-0">
+                                        <div className="w-full sm:w-48 aspect-video bg-muted rounded-md overflow-hidden flex-shrink-0">
                                             {pack.cover_image_url ? (
                                                 <img
                                                     src={pack.cover_image_url}
@@ -149,7 +149,7 @@ const ManageCreatorPacksPage = () => {
                                             {pack.tags && pack.tags.length > 0 && (
                                                 <div className="flex flex-wrap gap-1 mb-4">
                                                     {pack.tags.slice(0, 4).map(tag => (
-                                                        <span key={tag} className="text-[10px] px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20">
+                                                        <span key={tag} className="text-[10px] px-2 py-0.5 chamfer bg-primary/10 text-primary border border-primary/20">
                                                             {tag}
                                                         </span>
                                                     ))}
@@ -165,13 +165,13 @@ const ManageCreatorPacksPage = () => {
                                         {/* Actions */}
                                         <div className="flex flex-row sm:flex-col gap-2 w-full sm:w-auto mt-2 sm:mt-0 pt-4 sm:pt-0 border-t sm:border-t-0 border-border/50">
                                             <Link to={`/creator-packs/${pack.slug}/edit`} className="w-full">
-                                                <Button variant="outline" size="sm" className="w-full h-8 pixel-corners font-geist text-xs">
+                                                <Button variant="outline" size="sm" className="w-full h-8  font-geist text-xs">
                                                     <IconEdit size={14} className="mr-1.5" /> Edit
                                                 </Button>
                                             </Link>
 
                                             <a href={pack.external_link} target="_blank" rel="noopener noreferrer" className="w-full">
-                                                <Button variant="secondary" size="sm" className="w-full h-8 pixel-corners font-geist text-xs">
+                                                <Button variant="secondary" size="sm" className="w-full h-8  font-geist text-xs">
                                                     <IconExternalLink size={14} className="mr-1.5" /> Link
                                                 </Button>
                                             </a>
@@ -179,7 +179,7 @@ const ManageCreatorPacksPage = () => {
                                             <Button
                                                 variant="destructive"
                                                 size="sm"
-                                                className="w-full h-8 pixel-corners font-geist text-xs"
+                                                className="w-full h-8  font-geist text-xs"
                                                 onClick={() => handleDelete(pack.id)}
                                                 disabled={deletingId === pack.id}
                                             >
diff --git a/src/pages/MusicCopyright.tsx b/src/pages/MusicCopyright.tsx
index 3ee1978b..90f0665e 100644
--- a/src/pages/MusicCopyright.tsx
+++ b/src/pages/MusicCopyright.tsx
@@ -32,17 +32,17 @@ const MusicCopyright = () => {
     />
     <main className="flex-grow cow-grid-bg bg-background px-4 pb-20 pt-28">
       <div className="container mx-auto max-w-6xl">
-         <div className="mx-auto max-w-3xl text-center"><h1 className="font-minecraftia text-2xl font-bold leading-relaxed sm:text-3xl md:text-5xl"><span className="text-cow-purple">Looney</span> Checks</h1><p className="mx-auto mt-5 max-w-2xl text-base leading-7 text-muted-foreground md:text-lg">Research music licensing signals before you publish. Check a Spotify track, catalog music, or an audio file you upload yourself.</p></div>
+         <div className="mx-auto max-w-3xl text-center"><h1 className="text-2xl font-bold leading-relaxed sm:text-3xl md:text-5xl"><span className="text-primary">Looney</span> Checks</h1><p className="mx-auto mt-5 max-w-2xl text-base leading-7 text-muted-foreground md:text-lg">Research music licensing signals before you publish. Check a Spotify track, catalog music, or an audio file you upload yourself.</p></div>
 
         <div className="mt-10 grid gap-6 lg:grid-cols-[1.25fr_0.75fr]">
-          <section className="pixel-corners min-w-0 overflow-hidden border-2 border-foreground/10 bg-card shadow-sm">
+          <section className=" min-w-0 overflow-hidden border-2 border-foreground/10 bg-card shadow-sm">
              <div className="border-b border-border p-5 sm:p-7"><div className="flex items-center gap-3"><img src="/assets/looney-icon.png" alt="" aria-hidden="true" className="h-10 w-10 shrink-0 object-contain" /><div><h2 className="font-geist text-base font-semibold leading-relaxed">Start a check</h2><p className="mt-1 text-sm text-muted-foreground">Choose the source you want Looney to inspect.</p></div></div></div>
             <div className="p-5 sm:p-7"><LooneyCheckForm onJobChange={setActiveJobId} onResult={(_, __, ___, jobId) => jobId && navigate(`/gappa/check/${encodeURIComponent(jobId)}`)} onExistingJob={setExistingJob} onLimitReached={() => setLimitMessage(true)} onCheckStart={() => setLimitMessage(false)} /></div>
           </section>
-            <aside className="pixel-corners min-w-0 border-2 border-foreground/10 bg-card p-5 shadow-sm sm:p-7"><p className="font-jetbrains-mono text-xs font-semibold uppercase tracking-[0.18em] text-cow-purple">Workflow</p><h2 className="mt-3 font-minecraftia text-base leading-relaxed">Three clean steps</h2><ol className="mt-7 space-y-6 text-sm text-muted-foreground"><li className="flex gap-4"><span className="font-jetbrains-mono text-cow-purple">01</span><span><strong className="text-foreground">Choose a source.</strong><br />Use a Spotify URL, site music file, or your own upload.</span></li><li className="flex gap-4"><span className="font-jetbrains-mono text-cow-purple">02</span><span><strong className="text-foreground">Let Looney research.</strong><br />The check gathers identification and licensing signals.</span></li><li className="flex gap-4"><span className="font-jetbrains-mono text-cow-purple">03</span><span><strong className="text-foreground">Read before publishing.</strong><br />Caveats stay visible beside the result, not hidden below it.</span></li></ol><div className="mt-8 flex items-center gap-3 border-t border-border pt-5 text-xs leading-5 text-muted-foreground"><IconFileMusic className="h-4 w-4 shrink-0 text-cow-purple" />Results are guidance, not a replacement for permission from the rights holder.</div></aside>
+            <aside className=" min-w-0 border-2 border-foreground/10 bg-card p-5 shadow-sm sm:p-7"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Workflow</p><h2 className="mt-3 text-base leading-relaxed">Three clean steps</h2><ol className="mt-7 space-y-6 text-sm text-muted-foreground"><li className="flex gap-4"><span className="text-primary">01</span><span><strong className="text-foreground">Choose a source.</strong><br />Use a Spotify URL, site music file, or your own upload.</span></li><li className="flex gap-4"><span className="text-primary">02</span><span><strong className="text-foreground">Let Looney research.</strong><br />The check gathers identification and licensing signals.</span></li><li className="flex gap-4"><span className="text-primary">03</span><span><strong className="text-foreground">Read before publishing.</strong><br />Caveats stay visible beside the result, not hidden below it.</span></li></ol><div className="mt-8 flex items-center gap-3 border-t border-border pt-5 text-xs leading-5 text-muted-foreground"><IconFileMusic className="h-4 w-4 shrink-0 text-primary" />Results are guidance, not a replacement for permission from the rights holder.</div></aside>
         </div>
         <LooneyHistorySection activeJobId={activeJobId} onSelectRecord={showRecord} />
-         {limitMessage && <div className="pixel-corners mx-auto mt-4 max-w-2xl border border-amber-500/40 bg-amber-500/5 p-4 text-center text-sm text-amber-700 dark:text-amber-300">Two checks are already running. Wait for one to finish before starting another.</div>}
+         {limitMessage && <div className=" mx-auto mt-4 max-w-2xl border border-amber-500/40 bg-amber-500/5 p-4 text-center text-sm text-amber-700 dark:text-amber-300">Two checks are already running. Wait for one to finish before starting another.</div>}
       </div>
     </main>
     <Footer />
diff --git a/src/pages/NativeApplication.tsx b/src/pages/NativeApplication.tsx
index 6aa21a6e..96126ab5 100644
--- a/src/pages/NativeApplication.tsx
+++ b/src/pages/NativeApplication.tsx
@@ -72,8 +72,8 @@ const NativeApplication = () => {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
           >
-            <h1 className="text-4xl md:text-5xl font-jetbrains-mono mb-4">
-              <span className="text-cow-purple">Native</span> Application
+            <h1 className="text-4xl md:text-5xl mb-4">
+              <span className="text-primary">Native</span> Application
             </h1>
             <p className="text-muted-foreground max-w-2xl mx-auto">
               A powerful desktop application for seamless asset management and integration with your favorite design tools
@@ -87,8 +87,8 @@ const NativeApplication = () => {
               transition={{ duration: 0.5, delay: 0.2 }}
               className="mb-12"
             >
-              <Card className="overflow-hidden pixel-corners border-2 border-primary/20">
-                <div className="aspect-video bg-gradient-to-br from-cow-purple/10 to-cow-purple/5 flex items-center justify-center">
+              <Card className="overflow-hidden  border-2 border-primary/20">
+                <div className="aspect-video bg-gradient-to-br from-primary/10 to-primary/5 flex items-center justify-center">
                   <img 
                     src="/ss.png" 
                     alt="Renderdragon Native Application" 
@@ -98,13 +98,13 @@ const NativeApplication = () => {
                 <CardContent className="p-6">
                   <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
                     <div>
-                      <h3 className="font-jetbrains-mono text-xl mb-1">Renderdragon Native</h3>
+                      <h3 className="text-xl mb-1">Renderdragon Native</h3>
                       <p className="text-sm text-muted-foreground">Available for Windows, macOS, and Linux</p>
                     </div>
                     <div className="flex gap-3">
                       <Button
                         onClick={() => window.open('https://github.com/Renderdragonorg/Renderdragon-native/releases', '_blank')}
-                        className="pixel-btn-primary flex items-center gap-2"
+                        className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 flex items-center gap-2"
                       >
                         <IconDownload className="h-4 w-4" />
                         Download
@@ -112,7 +112,7 @@ const NativeApplication = () => {
                       <Button
                         variant="outline"
                         onClick={() => window.open('https://github.com/Renderdragonorg/Renderdragon-native', '_blank')}
-                        className="pixel-corners flex items-center gap-2"
+                        className=" flex items-center gap-2"
                       >
                         <IconBrandGithub className="h-4 w-4" />
                         GitHub
@@ -130,8 +130,8 @@ const NativeApplication = () => {
               transition={{ duration: 0.5, delay: 0.3 }}
               className="mb-8"
             >
-              <h2 className="text-2xl font-jetbrains-mono text-center mb-8">
-                Key <span className="text-cow-purple">Features</span>
+              <h2 className="text-2xl text-center mb-8">
+                Key <span className="text-primary">Features</span>
               </h2>
             </motion.div>
 
@@ -147,14 +147,14 @@ const NativeApplication = () => {
                   variants={itemVariants}
                   whileHover={{ y: -5, transition: { duration: 0.2 } }}
                 >
-                  <Card className="h-full pixel-corners border-2 border-primary/20 hover:border-primary/40 transition-colors">
+                  <Card className="h-full  border-2 border-primary/20 hover:border-primary/40 transition-colors">
                     <CardContent className="p-6">
                       <div className="flex items-start gap-4">
-                        <div className="p-3 rounded-lg bg-cow-purple/10 text-cow-purple">
+                        <div className="p-3 rounded-lg bg-primary/10 text-primary">
                           <feature.icon className="h-6 w-6" />
                         </div>
                         <div>
-                          <h3 className="font-jetbrains-mono text-xl mb-2">{feature.title}</h3>
+                          <h3 className="text-xl mb-2">{feature.title}</h3>
                           <p className="text-muted-foreground text-sm">{feature.description}</p>
                         </div>
                       </div>
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index 410c949f..27d214e8 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -48,7 +48,7 @@ const NotFound = () => {
 
         <main className="font-geist flex-grow pt-32 pb-20 cow-grid-bg flex items-center justify-center relative overflow-hidden">
         <motion.div
-          className="absolute w-8 h-8 bg-cow-purple/20 rounded-sm"
+          className="absolute w-8 h-8 bg-primary/20 rounded-sm"
           animate={{
             x: ["-10vw", "110vw"],
             y: ["-10vh", "110vh"],
@@ -97,7 +97,7 @@ const NotFound = () => {
           animate="visible"
         >
           <motion.div
-            className="text-cow-purple mb-4 relative"
+            className="text-primary mb-4 relative"
             variants={itemVariants}
           >
              <motion.div
@@ -157,7 +157,7 @@ const NotFound = () => {
             <motion.div whileHover={blockHover} whileTap={{ scale: 0.95 }}>
               <Link
                 to="/"
-                className="pixel-btn-primary inline-flex items-center gap-2 px-6 py-3 text-sm transition-all"
+                className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 inline-flex items-center gap-2 px-6 py-3 text-sm transition-all"
               >
                 <IconHome className="h-5 w-5" />
                 <span>Return to Home</span>
@@ -167,7 +167,7 @@ const NotFound = () => {
             <motion.div whileHover={blockHover} whileTap={{ scale: 0.95 }}>
               <Link
                 to="/resources"
-                className="pixel-btn-secondary inline-flex items-center gap-2 px-6 py-3 text-sm transition-all"
+                className="inline-flex items-center justify-center chamfer border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent inline-flex items-center gap-2 px-6 py-3 text-sm transition-all"
               >
                 <IconCompass className="h-5 w-5" />
                 <span>Explore Resources</span>
@@ -176,7 +176,7 @@ const NotFound = () => {
           </motion.div>
 
           <motion.div
-            className="mt-6 pixel-card border-dashed border-cow-purple/30 bg-background/50 px-6 py-4 relative"
+            className="mt-6 rounded-xl border border-border bg-card p-4 border-dashed border-primary/30 bg-background px-6 py-4 relative"
             variants={itemVariants}
             whileHover={{
               boxShadow: "0 0 15px rgba(147, 51, 234, 0.3)",
@@ -184,7 +184,7 @@ const NotFound = () => {
             }}
           >
             <motion.div
-              className="absolute -top-3 -left-3 w-6 h-6 bg-cow-purple/20 rounded-sm"
+              className="absolute -top-3 -left-3 w-6 h-6 bg-primary/20 rounded-sm"
               animate={{ rotate: [0, 360] }}
               transition={{
                 duration: 8,
@@ -193,7 +193,7 @@ const NotFound = () => {
               }}
             />
             <motion.div
-              className="absolute -bottom-3 -right-3 w-6 h-6 bg-cow-purple/20 rounded-sm"
+              className="absolute -bottom-3 -right-3 w-6 h-6 bg-primary/20 rounded-sm"
               animate={{ rotate: [360, 0] }}
               transition={{
                 duration: 8,
diff --git a/src/pages/PlayerRenderer.tsx b/src/pages/PlayerRenderer.tsx
index d78349c1..57380ddb 100644
--- a/src/pages/PlayerRenderer.tsx
+++ b/src/pages/PlayerRenderer.tsx
@@ -167,8 +167,8 @@ const PlayerRenderer = () => {
               transition={{ duration: 0.5 }}
               className="text-center mb-8"
             >
-              <h1 className="text-4xl md:text-5xl font-minecraftia mb-4">
-                Player <span className="text-cow-purple">Renderer</span>
+              <h1 className="text-4xl md:text-5xl mb-4">
+                Player <span className="text-primary">Renderer</span>
               </h1>
               <p className="text-muted-foreground max-w-2xl mx-auto">
                 Generate and download Minecraft player renders using different rendering services
@@ -179,7 +179,7 @@ const PlayerRenderer = () => {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.1 }}
-              className="pixel-card mb-8"
+              className="rounded-xl border border-border bg-card p-4 mb-8"
             >
               <form onSubmit={handleSubmit} className="flex gap-4">
                 <Input
@@ -187,13 +187,13 @@ const PlayerRenderer = () => {
                   placeholder="Enter Minecraft username"
                   value={username}
                   onChange={(e) => setUsername(e.target.value)}
-                  className="pixel-corners"
+                  className=""
                   disabled={isFetching}
                 />
                 <Button
                   type="submit"
                   variant="default"
-                  className="pixel-corners"
+                  className=""
                   disabled={!username || isFetching}
                 >
                   {isFetching ? (
@@ -205,7 +205,7 @@ const PlayerRenderer = () => {
                 <Button
                   type="button"
                   variant="outline"
-                  className="pixel-corners"
+                  className=""
                   onClick={() => {
                     setUsername('');
                     setPlayerData(null);
@@ -236,7 +236,7 @@ const PlayerRenderer = () => {
                 initial={{ opacity: 0, scale: 0.8 }}
                 animate={{ opacity: 1, scale: 1 }}
                 transition={{ duration: 0.5, type: "spring", stiffness: 100 }}
-                className="bg-pink-600 text-white px-4 py-3 rounded-md mb-8 text-center font-bold text-xl pixel-corners" // Added pixel-corners class
+                className="bg-pink-600 text-white px-4 py-3 rounded-md mb-8 text-center font-bold text-xl " // Added  class
               >
                 {technobladeMessage}
               </motion.div>
@@ -254,8 +254,8 @@ const PlayerRenderer = () => {
               >
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                   {/* Mineatar Renders */}
-                  <div className="pixel-card flex flex-col">
-                    <h1 className='text-center font-minecraftia'>Body</h1>
+                  <div className="rounded-xl border border-border bg-card p-4 flex flex-col">
+                    <h1 className='text-center '>Body</h1>
                     <div className="aspect-square relative">
                       <img
                         src={renderUrls.mineatar.full(playerData.id)}
@@ -283,8 +283,8 @@ const PlayerRenderer = () => {
                     </div>
                   </div>
 
-                  <div className="pixel-card flex flex-col">
-                    <h1 className='text-center font-minecraftia'>Head</h1>
+                  <div className="rounded-xl border border-border bg-card p-4 flex flex-col">
+                    <h1 className='text-center '>Head</h1>
                     <div className="aspect-square relative">
                       <img
                         src={renderUrls.nmsr.face(playerData.id)}
@@ -313,8 +313,8 @@ const PlayerRenderer = () => {
                   </div>
 
                   {/* VZGE Render */}
-                  <div className="pixel-card flex flex-col">
-                    <h1 className='text-center font-minecraftia'>Bust (isometric)</h1>
+                  <div className="rounded-xl border border-border bg-card p-4 flex flex-col">
+                    <h1 className='text-center '>Bust (isometric)</h1>
                     <div className="aspect-square relative">
                       <img
                         src={renderUrls.nmsr.bust(playerData.id)}
@@ -343,8 +343,8 @@ const PlayerRenderer = () => {
                   </div>
 
                   {/* NMSR Renders */}
-                  <div className="pixel-card flex flex-col">
-                    <h2 className='text-center font-minecraftia'>Full Render (isometric)</h2>
+                  <div className="rounded-xl border border-border bg-card p-4 flex flex-col">
+                    <h2 className='text-center '>Full Render (isometric)</h2>
                     <div className="aspect-square relative">
                       <img
                         src={renderUrls.nmsr.fullbody(playerData.id)}
diff --git a/src/pages/Privacy.tsx b/src/pages/Privacy.tsx
index e8062f1a..0b533eb0 100644
--- a/src/pages/Privacy.tsx
+++ b/src/pages/Privacy.tsx
@@ -23,13 +23,13 @@ const Privacy = () => {
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">
           <div className="max-w-3xl mx-auto">
-            <h1 className="text-4xl md:text-5xl font-minecraftia mb-8 text-center">
-              Privacy <span className="text-cow-purple">Policy</span>
+            <h1 className="text-4xl md:text-5xl mb-8 text-center">
+              Privacy <span className="text-primary">Policy</span>
             </h1>
 
-            <div className="pixel-card space-y-6">
+            <div className="rounded-xl border border-border bg-card p-4 space-y-6">
               <div className="space-y-4 text-muted-foreground">
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">1. Information We Collect</h2>
+                <h2 className="text-2xl text-foreground">1. Information We Collect</h2>
                 <p>
                   Renderdragon is committed to protecting your privacy. We do not collect personal information
                   such as names, emails, or phone numbers. The only data we collect is limited to standard web server logs, which may include:
@@ -42,14 +42,14 @@ const Privacy = () => {
                   <li>Time and date of access</li>
                 </ul>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">2. How We Use Information</h2>
+                <h2 className="text-2xl text-foreground">2. How We Use Information</h2>
                 <p>
                   The information we collect is used exclusively to monitor site performance, detect technical issues,
                   and understand general usage trends to improve the website experience.
                   We do not share, sell, rent, or trade your data with third parties, unless legally required.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">3. Cookies</h2>
+                <h2 className="text-2xl text-foreground">3. Cookies</h2>
                 <p>
                   Renderdragon uses cookies for essential site functionality and user experience (e.g., remembering light/dark mode).
                   We also set one first-party cookie that stores a random, anonymous visitor ID. It is used only to tell new visitors
@@ -58,48 +58,48 @@ const Privacy = () => {
                   You can disable cookies in your browser settings, but some features may not work correctly.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">4. Analytics</h2>
+                <h2 className="text-2xl text-foreground">4. Analytics</h2>
                 <p>
                   Website traffic statistics are collected by our own analytics service running on a self-hosted Cloudflare Worker.
                   It records page paths, referrers, and the country a request came from, along with the anonymous visitor ID
                   described above. We do not store your IP address, and no data is shared with third-party analytics providers.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">5. External Links</h2>
+                <h2 className="text-2xl text-foreground">5. External Links</h2>
                 <p>
                   Our website may link to third-party sites or tools (e.g., YouTube, Spotify, Discord).
                   We are not responsible for the content or privacy practices of those external websites.
                   Please read their privacy policies before engaging with their services.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">6. Data Security</h2>
+                <h2 className="text-2xl text-foreground">6. Data Security</h2>
                 <p>
                   We take reasonable steps to secure all data collected through encrypted connections (HTTPS)
                   and limited-access server environments. However, no online system is completely immune to risks,
                   so we recommend not sharing sensitive personal information on any part of our platform.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">7. Children's Privacy</h2>
+                <h2 className="text-2xl text-foreground">7. Children's Privacy</h2>
                 <p>
                   Renderdragon is not intended for children under the age of 13.
                   We do not knowingly collect or store data from children. If you believe that a child under 13 has provided us with personal data,
                   please contact us immediately and we will take appropriate action.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">8. Your Data Rights</h2>
+                <h2 className="text-2xl text-foreground">8. Your Data Rights</h2>
                 <p>
                   You have the right to request access to any data we may hold about you (if any),
                   or to request deletion of that data. Since we don't collect user accounts or personal identifiers,
                   such requests are rarely needed, but we're happy to help. Just contact us via the Contact page or Discord.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">9. Changes to This Policy</h2>
+                <h2 className="text-2xl text-foreground">9. Changes to This Policy</h2>
                 <p>
                   We may update this Privacy Policy to reflect changes to our practices or for legal reasons.
                   Any updates will be posted here, and the "Last updated" date will be changed accordingly.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">10. Contact Information</h2>
+                <h2 className="text-2xl text-foreground">10. Contact Information</h2>
                 <p>
                   If you have any questions, feedback, or concerns about your privacy on Renderdragon,
                   please reach out to us through the Contact page or join our Discord server.
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index 1324ea0e..6048f490 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -96,7 +96,7 @@ const ProfilePage: React.FC = () => {
   if (loading) {
     return (
       <div className="min-h-screen bg-background flex items-center justify-center">
-        <IconLoader2 className="h-8 w-8 animate-spin text-cow-purple" />
+        <IconLoader2 className="h-8 w-8 animate-spin text-primary" />
       </div>
     );
   }
diff --git a/src/pages/Renderbot.tsx b/src/pages/Renderbot.tsx
index d657813e..de0ebe0a 100644
--- a/src/pages/Renderbot.tsx
+++ b/src/pages/Renderbot.tsx
@@ -23,13 +23,13 @@ const Renderbot = () => (
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5 }}
         >
-          <div className="bg-card pixel-corners border-2 border-cow-purple/50 p-8 text-center">
-            <div className="inline-flex items-center gap-2 rounded-md border border-cow-purple/40 bg-cow-purple/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-cow-purple mb-5">
+          <div className="bg-card  border-2 border-primary/50 p-8 text-center">
+            <div className="inline-flex items-center gap-2 rounded-md border border-primary/40 bg-primary/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-primary mb-5">
               <IconBrandDiscord className="h-4 w-4" />
               Official RenderDragon Discord
             </div>
-            <h2 className="text-2xl md:text-3xl font-minecraftia mb-4">
-              Renderbot lives in our <span className="text-cow-purple">Discord</span>
+            <h2 className="text-2xl md:text-3xl mb-4">
+              Renderbot lives in our <span className="text-primary">Discord</span>
             </h2>
             <p className="text-muted-foreground mb-7">
               You have to join the official RenderDragon Discord server to use Renderbot.
@@ -40,7 +40,7 @@ const Renderbot = () => (
               href={DISCORD_URL}
               target="_blank"
               rel="noopener noreferrer"
-              className="pixel-btn-primary inline-flex items-center space-x-2"
+              className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 inline-flex items-center space-x-2"
             >
               <span>join the discord</span>
               <img className="w-4 h-4" src="/assets/discord_icon.png" alt="" aria-hidden="true" />
diff --git a/src/pages/ResourcesHub.tsx b/src/pages/ResourcesHub.tsx
index 9e30bbcf..36fd1240 100644
--- a/src/pages/ResourcesHub.tsx
+++ b/src/pages/ResourcesHub.tsx
@@ -9,6 +9,7 @@ import { Resource, getResourceUrl } from '@/types/resources';
 import { MusicMood } from '@/types/music';
 import { DownloadProgress } from '@/lib/download';
 import { buildMusicLink } from '@/utils/musicLink';
+import { fetchFromAssetsApi } from '@/lib/assetsApi';
 import ResourceFilters from '@/components/resources/ResourceFilters';
 import SortSelector from '@/components/resources/SortSelector';
 import ResourcesList from '@/components/resources/ResourcesList';
@@ -22,8 +23,8 @@ import McSoundsBrowser from '@/components/resources/McSoundsBrowser';
 import McIconsBrowser from '@/components/resources/McIconsBrowser';
 import AuthDialog from '@/components/auth/AuthDialog';
 import { Button } from '@/components/ui/button';
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
-import { IconArrowUp, IconHeart, IconSearch, IconPackage, IconMusic, IconMoodHappy, IconFilter, IconPlayerPlay, IconAlbum } from '@tabler/icons-react';
+import { Sheet, SheetContent, SheetTrigger, SheetTitle } from '@/components/ui/sheet';
+import { IconHeart, IconSearch, IconPackage, IconMusic, IconMoodHappy, IconFilter, IconPlayerPlay, IconAlbum } from '@tabler/icons-react';
 import { Helmet } from "react-helmet-async";
 
 
@@ -32,12 +33,11 @@ const ResourceDetailDialog = lazy(() => import('@/components/resources/ResourceD
 
 const LoadingSpinner = () => (
   <div className="flex justify-center items-center p-8">
-    <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-cow-purple"></div>
+    <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
   </div>
 );
 
 const ResourcesHub = () => {
-  const [showScrollTop, setShowScrollTop] = useState(false);
   const [authDialogOpen, setAuthDialogOpen] = useState(false);
   const [activeTab, setActiveTab] = useState<'resources' | 'favorites' | 'creator-packs' | 'music-packs'>('resources');
   const [selectedMoods, setSelectedMoods] = useState<string[]>([]);
@@ -89,7 +89,7 @@ const ResourcesHub = () => {
 
   useEffect(() => {
     if (isMusicView && musicMoodsData.length === 0) {
-      fetch('/data/music_moods.json')
+      fetchFromAssetsApi('/music_moods')
         .then(res => res.json())
         .then(data => setMusicMoodsData(data))
         .catch(err => console.error('Failed to load music moods:', err));
@@ -132,20 +132,13 @@ const ResourcesHub = () => {
   }, [resources, isMcIconsView]);
 
   useEffect(() => {
-    const handleScroll = () => {
-      const scrolled = window.pageYOffset > 400;
-      setShowScrollTop(scrolled);
-    };
-
     const handleShowFavorites = () => {
       setActiveTab('favorites');
     };
 
-    window.addEventListener('scroll', handleScroll);
     window.addEventListener('showFavorites', handleShowFavorites);
 
     return () => {
-      window.removeEventListener('scroll', handleScroll);
       window.removeEventListener('showFavorites', handleShowFavorites);
     };
   }, []);
@@ -203,13 +196,6 @@ const ResourcesHub = () => {
     window.history.replaceState({}, '', `${cleanUrl.pathname}${cleanUrl.search}${cleanUrl.hash}`);
   }, [resources, isLoading, setSelectedResource, handleCategoryChange]);
 
-  const scrollToTop = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    });
-  };
-
   const handleSearchWrapped = (e: React.ChangeEvent<HTMLInputElement>) => {
     handleSearch(e);
     if (isMinecraftMusicView) {
@@ -270,19 +256,13 @@ const ResourcesHub = () => {
         inputRef={inputRef}
       />
 
-      {(selectedCategory === 'minecraft-icons' || selectedCategory === 'mcsounds') && (
-        <p className="text-xs text-center text-muted-foreground mb-6 -mt-4 opacity-50 hover:opacity-100 transition-opacity">
-          Powered by Hamburger API
-        </p>
-      )}
-
       {isMusicView && (
         <div className="flex items-center justify-center gap-2 mb-6">
           <Button
             variant={musicView === 'community' ? 'default' : 'outline'}
             size="sm"
             onClick={() => setMusicView('community')}
-            className="pixel-corners"
+            className=""
           >
             <IconMusic className="h-4 w-4 mr-2" />
             Community Music
@@ -291,7 +271,7 @@ const ResourcesHub = () => {
             variant={musicView === 'minecraft' ? 'default' : 'outline'}
             size="sm"
             onClick={() => setMusicView('minecraft')}
-            className="pixel-corners"
+            className=""
           >
             <IconPlayerPlay className="h-4 w-4 mr-2" />
             Minecraft Music
@@ -299,30 +279,25 @@ const ResourcesHub = () => {
         </div>
       )}
 
-      {isMinecraftMusicView && (
-        <p className="text-xs text-center text-muted-foreground mb-6 -mt-2 opacity-50 hover:opacity-100 transition-opacity">
-          Powered by Minecraft Creator-Safe Playlist API
-        </p>
-      )}
-
       {isMinecraftMusicView && isMobile && (
         <div className="mb-4">
           <Sheet open={mobileMoodFilterOpen} onOpenChange={setMobileMoodFilterOpen}>
             <SheetTrigger asChild>
-              <Button variant="outline" size="sm" className="w-full pixel-corners">
+              <Button variant="outline" size="sm" className="w-full ">
                 <IconAlbum className="h-4 w-4 mr-2" />
                 Filter by Album
                 {minecraftMusic.selectedAlbum && (
-                  <span className="ml-2 bg-cow-purple text-white text-xs px-1.5 py-0.5 rounded truncate max-w-[100px]">
+                  <span className="ml-2 bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded truncate max-w-[100px]">
                     {minecraftMusic.selectedAlbum}
                   </span>
                 )}
               </Button>
             </SheetTrigger>
-            <SheetContent side="bottom" className="h-[70vh] pixel-corners">
+            <SheetContent side="bottom" className="h-[70vh] ">
+              <SheetTitle className="sr-only">Filter Minecraft music</SheetTitle>
               <div className="h-full py-2">
-                <h3 className="text-lg font-jetbrains-mono mb-4 flex items-center gap-2">
-                  <IconAlbum className="h-5 w-5 text-cow-purple" />
+                <h3 className="text-lg mb-4 flex items-center gap-2">
+                  <IconAlbum className="h-5 w-5 text-primary" />
                   Filter by Album
                 </h3>
                 <MinecraftMusicFilter
@@ -346,20 +321,21 @@ const ResourcesHub = () => {
         <div className="mb-4">
           <Sheet open={mobileMoodFilterOpen} onOpenChange={setMobileMoodFilterOpen}>
             <SheetTrigger asChild>
-              <Button variant="outline" size="sm" className="w-full pixel-corners">
+              <Button variant="outline" size="sm" className="w-full ">
                 <IconFilter className="h-4 w-4 mr-2" />
                 Filter by Mood
                 {selectedMoods.length > 0 && (
-                  <span className="ml-2 bg-cow-purple text-white text-xs px-1.5 py-0.5 rounded">
+                  <span className="ml-2 bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded">
                     {selectedMoods.length}
                   </span>
                 )}
               </Button>
             </SheetTrigger>
-            <SheetContent side="bottom" className="h-[70vh] pixel-corners">
+            <SheetContent side="bottom" className="h-[70vh] ">
+              <SheetTitle className="sr-only">Filter music by mood</SheetTitle>
               <div className="h-full py-2">
-                <h3 className="text-lg font-jetbrains-mono mb-4 flex items-center gap-2">
-                  <IconMoodHappy className="h-5 w-5 text-cow-purple" />
+                <h3 className="text-lg mb-4 flex items-center gap-2">
+                  <IconMoodHappy className="h-5 w-5 text-primary" />
                   Filter by Mood
                 </h3>
                 <MusicMoodFilter
@@ -429,8 +405,8 @@ const ResourcesHub = () => {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
           >
-            <h1 className="text-4xl md:text-5xl font-minecraftia font-bold mb-2 text-center">Resources Hub</h1>
-            <p className="text-lg text-muted-foreground text-center max-w-2xl mx-auto font-jetbrains-mono">Discover and download a wide range of resources to enhance your RenderDragon experience.</p>
+            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-3 text-center">Resources Hub</h1>
+            <p className="text-lg text-muted-foreground text-center max-w-2xl mx-auto ">Discover and download a wide range of resources to enhance your RenderDragon experience.</p>
           </motion.div>
 
           <motion.div
@@ -444,7 +420,7 @@ const ResourcesHub = () => {
                 variant={activeTab === 'resources' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setActiveTab('resources')}
-                className="pixel-corners"
+                className=""
               >
                 <IconSearch className="h-4 w-4 mr-2" />
                 Resources
@@ -454,12 +430,12 @@ const ResourcesHub = () => {
                   variant={activeTab === 'favorites' ? 'default' : 'outline'}
                   size="sm"
                   onClick={() => setActiveTab('favorites')}
-                  className="pixel-corners"
+                  className=""
                 >
                   <IconHeart className="h-4 w-4 mr-2" />
                   Favorites
                 </Button>
-                <span className="absolute -top-2 -right-3 bg-cow-purple text-white text-[10px] px-1.5 py-0.5 rounded leading-none uppercase tracking-wide border border-background shadow-sm z-10 pointer-events-none">
+                <span className="absolute -top-2 -right-3 bg-primary text-primary-foreground text-[10px] px-1.5 py-0.5 rounded leading-none uppercase tracking-wide border border-background shadow-sm z-10 pointer-events-none">
                   NEW
                 </span>
               </div>
@@ -468,12 +444,12 @@ const ResourcesHub = () => {
                   variant={activeTab === 'creator-packs' ? 'default' : 'outline'}
                   size="sm"
                   onClick={() => setActiveTab('creator-packs')}
-                  className="pixel-corners"
+                  className=""
                 >
                   <IconPackage className="h-4 w-4 mr-2" />
                   Creator Packs
                 </Button>
-                <span className="absolute -top-2 -right-3 bg-cow-purple text-white text-[10px] px-1.5 py-0.5 rounded leading-none uppercase tracking-wide border border-background shadow-sm z-10 pointer-events-none">
+                <span className="absolute -top-2 -right-3 bg-primary text-primary-foreground text-[10px] px-1.5 py-0.5 rounded leading-none uppercase tracking-wide border border-background shadow-sm z-10 pointer-events-none">
                   NEW
                 </span>
               </div>
@@ -482,12 +458,12 @@ const ResourcesHub = () => {
                   variant={activeTab === 'music-packs' ? 'default' : 'outline'}
                   size="sm"
                   onClick={() => setActiveTab('music-packs')}
-                  className="pixel-corners"
+                  className=""
                 >
                   <IconMusic className="h-4 w-4 mr-2" />
                   Music Packs
                 </Button>
-                <span className="absolute -top-2 -right-3 bg-cow-purple text-white text-[10px] px-1.5 py-0.5 rounded leading-none uppercase tracking-wide border border-background shadow-sm z-10 pointer-events-none">
+                <span className="absolute -top-2 -right-3 bg-primary text-primary-foreground text-[10px] px-1.5 py-0.5 rounded leading-none uppercase tracking-wide border border-background shadow-sm z-10 pointer-events-none">
                   NEW
                 </span>
               </div>
@@ -500,7 +476,7 @@ const ResourcesHub = () => {
                   animate={{ opacity: 1, x: 0 }}
                   exit={{ opacity: 0, x: -20 }}
                   transition={{ duration: 0.3 }}
-                  className="max-w-7xl mx-auto"
+                  className="w-full"
                 >
                   <FavoritesTab onSelectResource={setSelectedResource} />
                 </motion.div>
@@ -533,7 +509,7 @@ const ResourcesHub = () => {
                   transition={{ duration: 0.3 }}
                 >
                   {(isMcSoundsView || isMcIconsView || isMusicView) && !isMobile ? (
-                    <div className="flex gap-6 max-w-7xl mx-auto">
+                    <div className="flex gap-6 w-full">
                       {isMusicView && !isMinecraftMusicView && (
                         <div className="w-64 flex-shrink-0">
                           <div className="sticky top-28 h-[calc(100vh-8rem)]">
@@ -620,29 +596,6 @@ const ResourcesHub = () => {
         link={musicLink?.link ?? ''}
         onClose={() => setMusicLink(null)}
       />
-
-
-
-
-      <AnimatePresence>
-        {showScrollTop && (
-          <motion.div
-            initial={{ opacity: 0, scale: 0 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0 }}
-            transition={{ duration: 0.2 }}
-          >
-            <Button
-              onClick={scrollToTop}
-              className="fixed bottom-8 right-8 z-[9999] h-12 w-12 rounded-full shadow-lg bg-cow-purple hover:bg-cow-purple-dark transition-all duration-300 opacity-90 hover:opacity-100 text-white border-2 border-white/10"
-              size="icon"
-              aria-label="Scroll to top"
-            >
-              <IconArrowUp className="h-5 w-5" />
-            </Button>
-          </motion.div>
-        )}
-      </AnimatePresence>
     </div>
   );
 };
diff --git a/src/pages/Showcase.tsx b/src/pages/Showcase.tsx
index 749da290..9f0a490d 100644
--- a/src/pages/Showcase.tsx
+++ b/src/pages/Showcase.tsx
@@ -66,7 +66,7 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
     }
     if (isAudio) {
       return (
-        <div className="w-full p-4 bg-muted/10">
+        <div className="w-full p-4 bg-muted">
           <AudioPlayer src={url} className="w-full shadow-none border-none bg-transparent" />
         </div>
       );
@@ -74,7 +74,7 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
     if (isFont) {
       const fontName = `font-${a.id}`;
       return (
-        <div className="w-full h-full flex flex-col items-center justify-center bg-muted/20 p-6 aspect-video relative overflow-hidden group/font">
+        <div className="w-full h-full flex flex-col items-center justify-center bg-muted p-6 aspect-video relative overflow-hidden group/font">
           <style>{`
             @font-face {
               font-family: '${fontName}';
@@ -97,9 +97,9 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
       return (
         <div className="w-full h-full flex flex-col items-center justify-center bg-[#1e1e1e] p-6 aspect-video relative group/json">
           <div className="absolute top-3 right-3 opacity-20 group-hover/json:opacity-40 transition-opacity">
-            <IconCode size={40} className="text-cow-purple" />
+            <IconCode size={40} className="text-primary" />
           </div>
-          <div className="font-mono text-xs text-cow-purple/80 w-full overflow-hidden opacity-60 group-hover:opacity-100 transition-opacity">
+          <div className="font-mono text-xs text-primary/80 w-full overflow-hidden opacity-60 group-hover:opacity-100 transition-opacity">
             <div className="mb-1">{"{"}</div>
             <div className="pl-4">"type": "asset",</div>
             <div className="pl-4">"format": "json",</div>
@@ -114,7 +114,7 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
     }
 
     return (
-      <div className="w-full h-full flex flex-col items-center justify-center bg-muted/20 p-6 aspect-video">
+      <div className="w-full h-full flex flex-col items-center justify-center bg-muted p-6 aspect-video">
         <IconFileText className="h-12 w-12 text-white/20 mb-4" />
         <div className="text-[10px] text-white/40 uppercase tracking-widest font-mono">
           Document File
@@ -124,7 +124,7 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
   };
 
   return (
-    <Card className="pixel-card bg-card/40 backdrop-blur-sm border-white/10 w-full flex flex-col h-full overflow-hidden hover:border-cow-purple/50 transition-all duration-300 group hover:shadow-2xl hover:shadow-cow-purple/10">
+    <Card className="rounded-xl border border-border bg-card p-4 bg-card backdrop-blur-sm border-white/10 w-full flex flex-col h-full overflow-hidden hover:border-primary/50 transition-all duration-300 group hover:shadow-2xl hover:shadow-primary/10">
       <div className="flex-grow flex flex-col">
         {/* Asset Preview at top */}
         <div className="w-full">
@@ -148,7 +148,7 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
                 }}
                 className={cn(
                   "overflow-hidden transition-all duration-200 w-full",
-                  isAudio ? "h-auto" : "aspect-video cursor-zoom-in group-hover:bg-background/40"
+                  isAudio ? "h-auto" : "aspect-video cursor-zoom-in group-hover:bg-background"
                 )}
               >
                 {renderAssetPreview(a)}
@@ -164,10 +164,10 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
                 <Link to={profileUrl} className="flex items-center gap-2 hover:opacity-90 transition-opacity min-w-0">
                   <Avatar className="h-7 w-7 ring-1 ring-white/10">
                     {avatar ? <AvatarImage src={avatar} alt={name} /> : null}
-                    <AvatarFallback className="bg-cow-purple/20 text-cow-purple text-[10px]">{name?.slice(0, 2)?.toUpperCase()}</AvatarFallback>
+                    <AvatarFallback className="bg-primary/20 text-primary text-[10px]">{name?.slice(0, 2)?.toUpperCase()}</AvatarFallback>
                   </Avatar>
                   <div className="min-w-0">
-                    <div className="text-sm font-jetbrains-mono truncate text-white/90 leading-none mb-1">{name}</div>
+                    <div className="text-sm truncate text-white/90 leading-none mb-1">{name}</div>
                     <div className="text-[9px] text-white/40 uppercase tracking-tighter">{formatDistanceToNow(new Date(item.created_at))} ago</div>
                   </div>
                 </Link>
@@ -175,10 +175,10 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
                 <>
                   <Avatar className="h-7 w-7 ring-1 ring-white/10">
                     {avatar ? <AvatarImage src={avatar} alt={name} /> : null}
-                    <AvatarFallback className="bg-cow-purple/20 text-cow-purple text-[10px]">{name?.slice(0, 2)?.toUpperCase()}</AvatarFallback>
+                    <AvatarFallback className="bg-primary/20 text-primary text-[10px]">{name?.slice(0, 2)?.toUpperCase()}</AvatarFallback>
                   </Avatar>
                   <div className="min-w-0">
-                    <div className="text-sm font-jetbrains-mono truncate text-white/90 leading-none mb-1">{name}</div>
+                    <div className="text-sm truncate text-white/90 leading-none mb-1">{name}</div>
                     <div className="text-[9px] text-white/40 uppercase tracking-tighter">{formatDistanceToNow(new Date(item.created_at))} ago</div>
                   </div>
                 </>
@@ -195,7 +195,7 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
       <Dialog open={previewOpen} onOpenChange={setPreviewOpen}>
         <DialogContent className="max-w-5xl bg-popover/95 border-white/10">
           <DialogHeader>
-            <DialogTitle className="font-minecraftia">Preview</DialogTitle>
+            <DialogTitle className="">Preview</DialogTitle>
           </DialogHeader>
           <div className="w-full max-h-[80vh] flex items-center justify-center">
             {(() => {
@@ -211,7 +211,7 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
               if (kind === "video") return <video src={url} controls autoPlay className="max-h-[80vh] w-auto h-auto object-contain" />;
               if (kind === "audio") return <audio src={url} controls className="w-full" />;
               return (
-                <a href={url} target="_blank" rel="noreferrer" className="underline text-cow-purple">Open file</a>
+                <a href={url} target="_blank" rel="noreferrer" className="underline text-primary">Open file</a>
               );
             })()}
           </div>
@@ -235,7 +235,7 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
               <div className="flex items-center gap-2">
                 <button
                   type="button"
-                  className="pixel-corners border border-white/10 bg-background/40 hover:bg-background/60 text-white text-sm px-3 py-1"
+                  className=" border border-white/10 bg-background hover:bg-background text-white text-sm px-3 py-1"
                   onClick={() => window.open(previewAsset.url, '_blank', 'noopener,noreferrer')}
                 >
                   Open
@@ -245,7 +245,7 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
                   download
                   target="_blank"
                   rel="noreferrer"
-                  className="pixel-btn-primary text-sm px-3 py-1"
+                  className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 text-sm px-3 py-1"
                 >
                   Download
                 </a>
@@ -381,7 +381,7 @@ const ShowcasePage: React.FC = () => {
           <meta name="description" content="Share your art with images and videos." />
         </Helmet>
         <div className="flex flex-col md:flex-row items-stretch md:items-center gap-3 mb-6">
-          <h1 className="text-3xl md:text-4xl font-minecraftia">Community <span className="text-cow-purple">Assets</span></h1>
+          <h1 className="text-3xl md:text-4xl ">Community <span className="text-primary">Assets</span></h1>
           <div className="flex-1" />
           <div className="flex items-center gap-2 w-full md:w-auto">
             <div className="relative w-full md:w-80">
@@ -390,13 +390,13 @@ const ShowcasePage: React.FC = () => {
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 placeholder="Search messages..."
-                className="pl-9 bg-background/60"
+                className="pl-9 bg-background"
               />
             </div>
-            <Button variant="secondary" onClick={() => { }} className="pixel-btn-secondary">Search</Button>
+            <Button variant="secondary" onClick={() => { }} className="inline-flex items-center justify-center chamfer border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent">Search</Button>
             <Dialog open={open} onOpenChange={setOpen}>
               <Button
-                className="pixel-btn-primary"
+                className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
                 onClick={() => {
                   if (!user) {
                     setAuthOpen(true);
@@ -409,7 +409,7 @@ const ShowcasePage: React.FC = () => {
               </Button>
               <DialogContent className="bg-popover/90 border-white/10">
                 <DialogHeader>
-                  <DialogTitle className="font-minecraftia">Create Showcase</DialogTitle>
+                  <DialogTitle className="">Create Showcase</DialogTitle>
                 </DialogHeader>
                 <div className="space-y-4">
                   <div className="space-y-2">
@@ -428,7 +428,7 @@ const ShowcasePage: React.FC = () => {
                     />
                     <Button
                       variant="outline"
-                      className="w-full pixel-corners border-dashed border-2 h-20 hover:bg-cow-purple/10 hover:border-cow-purple/50 transition-colors"
+                      className="w-full  border-dashed border-2 h-20 hover:bg-primary/10 hover:border-primary/50 transition-colors"
                       onClick={() => fileInputRef.current?.click()}
                     >
                       <div className="flex flex-col items-center gap-1">
@@ -439,7 +439,7 @@ const ShowcasePage: React.FC = () => {
 
                     {filePreview && (
                       <div className="mt-4">
-                        <div className="relative w-full aspect-video bg-background/40 pixel-corners border border-white/10 flex items-center justify-center overflow-hidden">
+                        <div className="relative w-full aspect-video bg-background  border border-white/10 flex items-center justify-center overflow-hidden">
                           {selectedFile?.type.startsWith('image/') ? (
                             <img src={filePreview} alt="preview" className="w-full h-full object-contain" />
                           ) : selectedFile?.type.startsWith('video/') ? (
@@ -459,7 +459,7 @@ const ShowcasePage: React.FC = () => {
                     <Button
                       onClick={onCreate}
                       disabled={submitting || !selectedFile}
-                      className="pixel-btn-primary"
+                      className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
                     >
                       {submitting ? (
                         <>
@@ -479,11 +479,11 @@ const ShowcasePage: React.FC = () => {
 
         {loading ? (
           <div className="flex items-center justify-center py-20">
-            <IconLoader2 className="h-6 w-6 animate-spin text-cow-purple" />
+            <IconLoader2 className="h-6 w-6 animate-spin text-primary" />
           </div>
         ) : items.length === 0 ? (
           <div className="flex flex-col items-center justify-center text-center text-white/70 min-h-[40vh] py-16">
-            <div className="text-2xl font-minecraftia mb-2">No showcases yet</div>
+            <div className="text-2xl mb-2">No showcases yet</div>
             <p className="max-w-md">Be the first to share your art! Click "Create Showcase" to upload an image, video, or audio file.</p>
           </div>
         ) : (
diff --git a/src/pages/TOS.tsx b/src/pages/TOS.tsx
index adc8da89..16ef4df4 100644
--- a/src/pages/TOS.tsx
+++ b/src/pages/TOS.tsx
@@ -22,26 +22,26 @@ const TOS = () => {
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">
           <div className="max-w-3xl mx-auto">
-            <h1 className="text-4xl md:text-5xl font-minecraftia mb-8 text-center">
-              Terms of <span className="text-cow-purple">Service</span>
+            <h1 className="text-4xl md:text-5xl mb-8 text-center">
+              Terms of <span className="text-primary">Service</span>
             </h1>
 
-            <div className="pixel-card space-y-6">
+            <div className="rounded-xl border border-border bg-card p-4 space-y-6">
               <div className="space-y-4 text-muted-foreground">
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">1. Acceptance of Terms</h2>
+                <h2 className="text-2xl text-foreground">1. Acceptance of Terms</h2>
                 <p>
                   By accessing and using Renderdragon ("the Website"), you accept and agree to be bound by these
                   Terms of Service. If you do not agree to these terms, please do not use the Website.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">2. Use of Resources</h2>
+                <h2 className="text-2xl text-foreground">2. Use of Resources</h2>
                 <p>
                   All resources provided on Renderdragon are available for free for both personal and commercial use,
                   unless otherwise stated on the specific resource. Some assets may require attribution to the original creator,
                   which will be clearly indicated on the resource page.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">3. Limitation of Liability</h2>
+                <h2 className="text-2xl text-foreground">3. Limitation of Liability</h2>
                 <p>
                   All resources and tools on Renderdragon are provided "as is" without any warranties, expressed or implied.
                   In no event shall Renderdragon be liable for any damages including, but not limited to,
@@ -49,7 +49,7 @@ const TOS = () => {
                   the Website, its resources, or its tools.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">4. Copyright and Intellectual Property</h2>
+                <h2 className="text-2xl text-foreground">4. Copyright and Intellectual Property</h2>
                 <p>
                   The content on Renderdragon, including but not limited to text, graphics, logos, and software, is either
                   the property of Renderdragon or used with permission from the respective creators.
@@ -58,7 +58,7 @@ const TOS = () => {
                   terms specified on individual resource pages.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">5. Copyright Issues</h2>
+                <h2 className="text-2xl text-foreground">5. Copyright Issues</h2>
                 <p>
                   Renderdragon is a free library of community-submitted and openly available resources for content creators.
                   While we strive to ensure that most assets are copyright-free or licensed for commercial use,
@@ -80,7 +80,7 @@ const TOS = () => {
                   to report it. We take such concerns seriously and will respond promptly.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">6. User Conduct</h2>
+                <h2 className="text-2xl text-foreground">6. User Conduct</h2>
                 <p>Users of Renderdragon agree not to:</p>
                 <ul className="list-disc pl-6 space-y-1">
                   <li>Use the Website for any unlawful or malicious purpose</li>
@@ -89,14 +89,14 @@ const TOS = () => {
                   <li>Falsely claim ownership or authorship of any resource found on the Website</li>
                 </ul>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">7. Changes to Terms</h2>
+                <h2 className="text-2xl text-foreground">7. Changes to Terms</h2>
                 <p>
                   Renderdragon reserves the right to modify or update these Terms of Service at any time without prior notice.
                   Changes will be effective immediately upon posting. Continued use of the Website after any changes
                   constitutes your acceptance of the revised terms.
                 </p>
 
-                <h2 className="text-2xl font-jetbrains-mono text-foreground">8. Contact Information</h2>
+                <h2 className="text-2xl text-foreground">8. Contact Information</h2>
                 <p>
                   If you have any questions about these Terms of Service, copyright concerns, or need assistance,
                   please reach out to us via the Contact page on <a href="https://renderdragon.org" className="underline">renderdragon.org</a>.
diff --git a/src/pages/TextGenerator.tsx b/src/pages/TextGenerator.tsx
index 3ac8418b..dd4b237d 100644
--- a/src/pages/TextGenerator.tsx
+++ b/src/pages/TextGenerator.tsx
@@ -124,13 +124,13 @@ const TextGenerator = () => {
       <main className="flex-grow pt-24 pb-16 cow-grid-bg custom-scrollbar">
         <div className="container mx-auto px-4">
           <div className="max-w-6xl mx-auto">
-            <h1 className="text-4xl md:text-5xl font-minecraftia mb-8 text-center">
-              <span className="text-cow-purple">Minecraft</span> Text Generator
+            <h1 className="text-4xl md:text-5xl mb-8 text-center">
+              <span className="text-primary">Minecraft</span> Text Generator
             </h1>
 
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
               {/* Preview Section */}
-              <div className="pixel-card p-6 bg-black/50 min-h-[400px] flex items-center ">
+              <div className="rounded-xl border border-border bg-card p-4 p-6 bg-black/50 min-h-[400px] flex items-center ">
                 <TextPreview settings={settings} canvasRef={canvasRef} />
               </div>
 
@@ -496,7 +496,7 @@ const TextGenerator = () => {
 
                 {/* Download Button */}
                 <Button
-                  className="w-full pixel-corners bg-cow-purple hover:bg-cow-purple/80"
+                  className="w-full  bg-primary hover:bg-primary/90"
                   onClick={handleDownload}
                 >
                   <IconDownload className="h-4 w-4 mr-2" />
diff --git a/src/pages/Utilities.tsx b/src/pages/Utilities.tsx
index 308b768d..423ba9dd 100644
--- a/src/pages/Utilities.tsx
+++ b/src/pages/Utilities.tsx
@@ -201,8 +201,8 @@ const Utils = () => {
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5 }}
         >
-           <h1 className="text-4xl md:text-5xl font-minecraftia mb-4">
-            Useful <span className="text-cow-purple">Utilities</span>
+           <h1 className="text-4xl md:text-5xl mb-4">
+            Useful <span className="text-primary">Utilities</span>
           </h1>
           <p className="text-muted-foreground max-w-2xl mx-auto">
             A curated collection of free and premium utilities to enhance your content creation workflow
@@ -215,7 +215,7 @@ const Utils = () => {
               <TabsTrigger
                 key={category}
                 value={category}
-                className="pixel-corners data-[state=active]:bg-cow-purple data-[state=active]:text-white flex items-center gap-2 h-12"
+                className=" data-[state=active]:bg-primary data-[state=active]:text-white flex items-center gap-2 h-12"
               >
                 {getCategoryIcon(category)}
                 <span className="capitalize">{category.replace('-', ' ')}</span>
@@ -247,10 +247,10 @@ const Utils = () => {
                         rel="noopener noreferrer"
                         className="block h-full"
                       >
-                        <Card className="h-full transition-all duration-300 hover:shadow-xl pixel-corners border-2 border-primary/20 hover:border-primary/40">
+                        <Card className="h-full transition-all duration-300 hover:shadow-xl  border-2 border-primary/20 hover:border-primary/40">
                           <CardHeader>
                             <CardTitle className="flex items-center justify-between">
-                              <span className="font-jetbrains-mono text-xl">{item.name}</span>
+                              <span className="text-xl">{item.name}</span>
                               {item.isFree && (
                                 <span className="bg-green-500/10 text-green-500 text-xs px-2 py-1 rounded-md">
                                   Free
diff --git a/src/pages/YouTubeDownloader.tsx b/src/pages/YouTubeDownloader.tsx
index 2ec281b8..73c3dd7b 100644
--- a/src/pages/YouTubeDownloader.tsx
+++ b/src/pages/YouTubeDownloader.tsx
@@ -275,8 +275,8 @@ const YouTubeDownloader: React.FC = () => {
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">
           <div className="max-w-3xl mx-auto">
-            <h1 className="text-4xl md:text-5xl font-minecraftia mb-8 text-center">
-              <span className="text-cow-purple">Youtube</span> Tools
+            <h1 className="text-4xl md:text-5xl mb-8 text-center">
+              <span className="text-primary">Youtube</span> Tools
             </h1>
 
             <p className="text-center text-muted-foreground mb-8 max-w-xl mx-auto">
@@ -284,24 +284,24 @@ const YouTubeDownloader: React.FC = () => {
               you have permission to use.
             </p>
 
-            <Alert className="mb-8 pixel-corners">
+            <Alert className="mb-8 ">
               <IconInfoCircle className="h-4 w-4" />
-              <AlertTitle className="font-minecraftia">Important Notice</AlertTitle>
+              <AlertTitle className="">Important Notice</AlertTitle>
               <AlertDescription>
                 This tool is for educational purposes only. You are responsible for ensuring you have the right to download
                 and use any content.
               </AlertDescription>
             </Alert>
 
-            <div className="pixel-card mb-8">
+            <div className="rounded-xl border border-border bg-card p-4 mb-8">
               <div className="flex flex-col md:flex-row gap-4">
                 <Input
                   placeholder="Paste YouTube URL or ID here"
                   value={youtubeUrl}
                   onChange={handleUrlChange}
-                  className={`pixel-corners flex-grow ${urlError ? 'border-red-500' : ''}`}
+                  className={` flex-grow ${urlError ? 'border-red-500' : ''}`}
                 />
-                <Button onClick={handleFetchInfo} disabled={isLoadingInfo} className="pixel-btn-primary flex items-center">
+                <Button onClick={handleFetchInfo} disabled={isLoadingInfo} className="inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 flex items-center">
                   {isLoadingInfo ? (
                     <>
                       <IconRefresh className="h-4 w-4 mr-2 animate-spin" /> <span>Processing...</span>
@@ -323,13 +323,13 @@ const YouTubeDownloader: React.FC = () => {
             {isLoadingInfo && <VideoInfoSkeleton />}
 
             {video && !isLoadingInfo && (
-              <div className="pixel-card space-y-6">
+              <div className="rounded-xl border border-border bg-card p-4 space-y-6">
                 <div className="flex flex-col md:flex-row gap-6">
                   <div className="w-full md:w-2/5">
                     <img src={getBestThumbnailUrl(video.thumbnails)} alt={video.title} className="rounded-md w-full h-auto" />
                   </div>
                   <div className="w-full md:w-3/5">
-                    <h2 className="text-xl font-jetbrains-mono mb-2">{video.title}</h2>
+                    <h2 className="text-xl mb-2">{video.title}</h2>
                     <div className="flex flex-wrap gap-3 mb-4">
                       <div className="bg-accent text-accent-foreground px-2 py-1 rounded-md text-xs flex items-center">
                         <span className="mr-1">Duration:</span> {humanizeDuration(video.duration)}
@@ -352,7 +352,7 @@ const YouTubeDownloader: React.FC = () => {
                       )}
                     </div>
 
-                    <Button onClick={handleDownloadThumbnail} disabled={isDownloadingThumb} className="w-full pixel-btn-primary flex items-center justify-center">
+                    <Button onClick={handleDownloadThumbnail} disabled={isDownloadingThumb} className="w-full inline-flex items-center justify-center chamfer bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 flex items-center justify-center">
                       {isDownloadingThumb ? (
                         <>
                           <IconRefresh className="h-5 w-5 mr-2 animate-spin" /> <span>Downloading...</span>
@@ -367,7 +367,7 @@ const YouTubeDownloader: React.FC = () => {
                 </div>
 
                 <div className="space-y-2">
-                  <h3 className="font-jetbrains-mono text-lg">Description</h3>
+                  <h3 className="text-lg">Description</h3>
                   <p className="text-sm text-muted-foreground whitespace-pre-line">
                     {(() => {
                       const desc = video.description || '';
@@ -378,7 +378,7 @@ const YouTubeDownloader: React.FC = () => {
                     })()}
                   </p>
                   {video.description && video.description.length > 0 && (
-                    <Button variant="secondary" className="pixel-corners" onClick={() => setShowFullDesc(v => !v)}>
+                    <Button variant="secondary" className="" onClick={() => setShowFullDesc(v => !v)}>
                       {showFullDesc ? 'Show less' : 'Show more'}
                     </Button>
                   )}
@@ -387,7 +387,7 @@ const YouTubeDownloader: React.FC = () => {
                 {/* Tags */}
                 {video.tags && video.tags.length > 0 && (
                   <div className="space-y-2">
-                    <h3 className="font-jetbrains-mono text-lg">Tags</h3>
+                    <h3 className="text-lg">Tags</h3>
                     <div className="flex flex-wrap gap-2">
                       {video.tags.slice(0, 20).map((t) => (
                         <span key={t} className="bg-accent text-accent-foreground px-2 py-1 rounded-md text-xs">{t}</span>
@@ -398,7 +398,7 @@ const YouTubeDownloader: React.FC = () => {
 
                 {/* Channel section */}
                 <div className="space-y-2">
-                  <h3 className="font-jetbrains-mono text-lg">Channel</h3>
+                  <h3 className="text-lg">Channel</h3>
                   <div className="flex items-start gap-3">
                     {video.channel?.thumbnails && (
                       <img
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5539aeae..8eaae7fc 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -20,11 +20,13 @@ export default {
 		},
 		extend: {
 			fontFamily: {
+				sans: ['Geist Sans', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+				mono: ['Geist Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'],
+				heading: ['Montserrat', 'Geist Sans', 'ui-sans-serif', 'system-ui', 'sans-serif'],
 				geist: ['Geist Sans', 'sans-serif'],
 				'geist-mono': ['Geist Mono', 'monospace'],
 			minecraftia: ['Minecraftia', 'monospace'],
 			minecraft: ['Minecraft', 'sans-serif'],
-			'jetbrains-mono': ['JetBrains Mono', 'monospace'],
 			},
 			colors: {
 				border: 'hsl(var(--border))',
@@ -60,15 +62,6 @@ export default {
 					DEFAULT: 'hsl(var(--card))',
 					foreground: 'hsl(var(--card-foreground))'
 				},
-				cow: {
-					dark: '#1A1F2C',
-					darker: '#121620',
-					purple: '#9b87f5',
-					'purple-dark': '#7E69AB',
-					blue: '#1EAEDB',
-					'neon-pink': '#FF00FF',
-					'neon-blue': '#00FFFF'
-				},
 				chart: {
 					'1': 'hsl(var(--chart-1))',
 					'2': 'hsl(var(--chart-2))',
@@ -93,14 +86,6 @@ export default {
 				sm: 'calc(var(--radius) - 4px)'
 			},
 			keyframes: {
-				'border-pulse': {
-					from: {
-						boxshadow: '0 0 0px rgba(255, 215, 0, 0.3)'
-					},
-					to: {
-						boxshadow: '0 0 20px -1px rgba(255, 215, 0, 0.4)'
-					}
-				},
 				'accordion-down': {
 					from: {
 						height: '0'
@@ -152,22 +137,6 @@ export default {
 					'50%': {
 						transform: 'translateY(-10px)'
 					}
-				},
-				'glow': {
-					'0%, 100%': {
-						filter: 'drop-shadow(0 0 2px rgba(155, 135, 245, 0.6))'
-					},
-					'50%': {
-						filter: 'drop-shadow(0 0 8px rgba(155, 135, 245, 0.9))'
-					}
-				},
-				'pulse-neon': {
-					'0%, 100%': {
-						boxShadow: '0 0 5px rgba(155, 135, 245, 0.7), 0 0 10px rgba(155, 135, 245, 0.5), inset 0 0 5px rgba(155, 135, 245, 0.2)'
-					},
-					'50%': {
-						boxShadow: '0 0 10px rgba(155, 135, 245, 0.9), 0 0 20px rgba(155, 135, 245, 0.7), inset 0 0 10px rgba(155, 135, 245, 0.5)'
-					}
 				}
 			},
 			animation: {
@@ -177,9 +146,7 @@ export default {
 				'fade-out': 'fade-out 0.5s ease-out',
 				'slide-in-right': 'slide-in-right 0.3s ease-out',
 				'slide-out-right': 'slide-out-right 0.3s ease-out',
-				'float': 'float 3s ease-in-out infinite',
-				'glow': 'glow 2s ease-in-out infinite',
-				'pulse-neon': 'pulse-neon 2s infinite'
+				'float': 'float 3s ease-in-out infinite'
 			}
 		}
 	},