diff --git a/.gitignore b/.gitignore
index 5ef6a52..6de9991 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+.cursor/
+ai-notes/
+docs/
+specs/
 # dependencies
 /node_modules
 /.pnp
diff --git a/app/blog/deepseek-sparse-attention/page.tsx b/app/blog/deepseek-sparse-attention/page.tsx
index eaf9f49..bdb289b 100644
--- a/app/blog/deepseek-sparse-attention/page.tsx
+++ b/app/blog/deepseek-sparse-attention/page.tsx
@@ -129,40 +129,29 @@ export default function DeepSeekProject() {
 
   return (
     <>
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-        {/* Background effects */}
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-blue-600/20"></div>
-        <div className="absolute inset-0 opacity-30">
-          <div className="absolute inset-0 bg-gradient-to-br from-transparent via-blue-500/5 to-transparent"></div>
-        </div>
-
-        {/* Animated background particles */}
-        <div className="absolute inset-0 overflow-hidden">
-          <div className="absolute top-1/6 left-1/6 w-3 h-3 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full opacity-60 animate-pulse"></div>
-          <div className="absolute top-1/4 right-1/5 w-2 h-2 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full opacity-50 animate-pulse delay-300"></div>
-          <div className="absolute top-1/3 left-1/8 w-4 h-4 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full opacity-40 animate-pulse delay-700"></div>
-          <div className="absolute bottom-1/4 right-1/6 w-2.5 h-2.5 bg-gradient-to-r from-cyan-400 to-blue-400 rounded-full opacity-55 animate-pulse delay-1000"></div>
-        </div>
+      {/* Hero Section - Reduced */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-background via-card/50 to-background border-b border-border/30">
+        {/* Simplified background - single subtle gradient */}
+        <div className="absolute inset-0 bg-gradient-to-r from-gradient-accent-1/5 via-gradient-accent-2/5 to-gradient-accent-3/5"></div>
 
-        <div className="relative container mx-auto px-6 pt-32 pb-12">
-          <div className="text-center max-w-4xl mx-auto">
+        <div className="relative container mx-auto px-6 pt-24 pb-6">
+          <div className="text-left max-w-4xl mx-auto">
             <div className="relative">
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium mb-8 leading-tight">
-                <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
+              <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold mb-3 leading-tight">
+                <span className="text-foreground">
                   {heroData?.title || 'DeepSeek\'s Attention Revolution'}
                 </span>
               </h1>
-              <div className="text-lg md:text-xl text-slate-400 mb-8">
+              <div className="text-base md:text-lg text-muted-foreground mb-4">
                 {heroData?.subtitle || '⚡ From O(L²) to O(Lk) - The Lightning Indexer Breakthrough'}
               </div>
 
               {/* Tags */}
               {heroData?.tags && heroData.tags.length > 0 && (
-                <div className="flex items-center justify-center gap-3 text-sm text-slate-400 mb-8">
+                <div className="flex items-center gap-3 text-sm text-muted-foreground mb-4">
                   {heroData.tags.map((tag, index) => (
                     <span key={index} className="flex items-center gap-2">
-                      {index > 0 && <span className="text-slate-600">•</span>}
+                      {index > 0 && <span className="text-muted-foreground/40">•</span>}
                       <span className="flex items-center gap-2">
                         {tag.includes('⏱️') && (
                           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -180,13 +169,6 @@ export default function DeepSeekProject() {
                   ))}
                 </div>
               )}
-
-              {/* Glow effect for the title */}
-              <div className="absolute inset-0 text-4xl md:text-5xl lg:text-6xl font-medium leading-tight blur-sm">
-                <span className="bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-cyan-400/20 bg-clip-text text-transparent">
-                  {heroData?.title || 'DeepSeek\'s Attention Revolution'}
-                </span>
-              </div>
             </div>
           </div>
         </div>
diff --git a/app/blog/diffusion-transformer-representation-autoencoder/page.tsx b/app/blog/diffusion-transformer-representation-autoencoder/page.tsx
index 624d9a4..4a0bf69 100644
--- a/app/blog/diffusion-transformer-representation-autoencoder/page.tsx
+++ b/app/blog/diffusion-transformer-representation-autoencoder/page.tsx
@@ -129,40 +129,29 @@ export default function DiffusionTransformerRAEProject() {
 
   return (
     <>
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-        {/* Background effects */}
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-blue-600/20"></div>
-        <div className="absolute inset-0 opacity-30">
-          <div className="absolute inset-0 bg-gradient-to-br from-transparent via-blue-500/5 to-transparent"></div>
-        </div>
-
-        {/* Animated background particles */}
-        <div className="absolute inset-0 overflow-hidden">
-          <div className="absolute top-1/6 left-1/6 w-3 h-3 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full opacity-60 animate-pulse"></div>
-          <div className="absolute top-1/4 right-1/5 w-2 h-2 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full opacity-50 animate-pulse delay-300"></div>
-          <div className="absolute top-1/3 left-1/8 w-4 h-4 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full opacity-40 animate-pulse delay-700"></div>
-          <div className="absolute bottom-1/4 right-1/6 w-2.5 h-2.5 bg-gradient-to-r from-cyan-400 to-blue-400 rounded-full opacity-55 animate-pulse delay-1000"></div>
-        </div>
+      {/* Hero Section - Reduced */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-background via-card/50 to-background border-b border-border/30">
+        {/* Simplified background - single subtle gradient */}
+        <div className="absolute inset-0 bg-gradient-to-r from-gradient-accent-1/5 via-gradient-accent-2/5 to-gradient-accent-3/5"></div>
 
-        <div className="relative container mx-auto px-6 pt-32 pb-12">
-          <div className="text-center max-w-4xl mx-auto">
+        <div className="relative container mx-auto px-6 pt-24 pb-6">
+          <div className="text-left max-w-4xl mx-auto">
             <div className="relative">
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium mb-8 leading-tight">
-                <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
+              <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold mb-3 leading-tight">
+                <span className="text-foreground">
                   {heroData?.title || '47x Faster Image & Video Generation Training'}
                 </span>
               </h1>
-              <div className="text-lg md:text-xl text-slate-400 mb-8">
+              <div className="text-base md:text-lg text-muted-foreground mb-4">
                 {heroData?.subtitle || 'Diffusion Transformers with Representation Autoencoders'}
               </div>
 
               {/* Tags */}
               {heroData?.tags && heroData.tags.length > 0 && (
-                <div className="flex items-center justify-center gap-3 text-sm text-slate-400 mb-8">
+                <div className="flex items-center gap-3 text-sm text-muted-foreground mb-4">
                   {heroData.tags.map((tag, index) => (
                     <span key={index} className="flex items-center gap-2">
-                      {index > 0 && <span className="text-slate-600">•</span>}
+                      {index > 0 && <span className="text-muted-foreground/40">•</span>}
                       <span className="flex items-center gap-2">
                         {tag.includes('⏱️') && (
                           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -182,7 +171,7 @@ export default function DiffusionTransformerRAEProject() {
               )}
 
               {/* Links to Paper and GitHub */}
-              <div className="relative z-10 flex flex-wrap items-center justify-center gap-4 mb-8">
+              <div className="relative z-10 flex flex-wrap items-center gap-4 mb-4">
                 <a
                   href="https://arxiv.org/pdf/2510.11690"
                   target="_blank"
@@ -213,12 +202,6 @@ export default function DiffusionTransformerRAEProject() {
                 </a>
               </div>
 
-              {/* Glow effect for the title */}
-              <div className="absolute inset-0 text-4xl md:text-5xl lg:text-6xl font-medium leading-tight blur-sm pointer-events-none">
-                <span className="bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-cyan-400/20 bg-clip-text text-transparent">
-                  {heroData?.title || '47x Faster Image & Video Generation Training'}
-                </span>
-              </div>
             </div>
           </div>
         </div>
diff --git a/app/blog/lejepa/page.tsx b/app/blog/lejepa/page.tsx
index 6301719..cd2c9e9 100644
--- a/app/blog/lejepa/page.tsx
+++ b/app/blog/lejepa/page.tsx
@@ -129,40 +129,29 @@ export default function LeJEPAProject() {
 
     return (
         <>
-            {/* Hero Section */}
-            <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-                {/* Background effects */}
-                <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-blue-600/20"></div>
-                <div className="absolute inset-0 opacity-30">
-                    <div className="absolute inset-0 bg-gradient-to-br from-transparent via-blue-500/5 to-transparent"></div>
-                </div>
-
-                {/* Animated background particles */}
-                <div className="absolute inset-0 overflow-hidden">
-                    <div className="absolute top-1/6 left-1/6 w-3 h-3 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full opacity-60 animate-pulse"></div>
-                    <div className="absolute top-1/4 right-1/5 w-2 h-2 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full opacity-50 animate-pulse delay-300"></div>
-                    <div className="absolute top-1/3 left-1/8 w-4 h-4 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full opacity-40 animate-pulse delay-700"></div>
-                    <div className="absolute bottom-1/4 right-1/6 w-2.5 h-2.5 bg-gradient-to-r from-cyan-400 to-blue-400 rounded-full opacity-55 animate-pulse delay-1000"></div>
-                </div>
+            {/* Hero Section - Reduced */}
+            <section className="relative overflow-hidden bg-gradient-to-br from-background via-card/50 to-background border-b border-border/30">
+                {/* Simplified background - single subtle gradient */}
+                <div className="absolute inset-0 bg-gradient-to-r from-gradient-accent-1/5 via-gradient-accent-2/5 to-gradient-accent-3/5"></div>
 
-                <div className="relative container mx-auto px-6 pt-32 pb-12">
-                    <div className="text-center max-w-4xl mx-auto">
+                <div className="relative container mx-auto px-6 pt-24 pb-6">
+                    <div className="text-left max-w-4xl mx-auto">
                         <div className="relative">
-                            <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium mb-8 leading-tight">
-                                <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
+                            <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold mb-3 leading-tight">
+                                <span className="text-foreground">
                                     {heroData?.title || 'LeJEPA: Provable and Scalable'}
                                 </span>
                             </h1>
-                            <div className="text-lg md:text-xl text-slate-400 mb-8">
+                            <div className="text-base md:text-lg text-muted-foreground mb-4">
                                 {heroData?.subtitle || 'Self-Supervised Learning Without the Heuristics'}
                             </div>
 
                             {/* Tags */}
                             {heroData?.tags && heroData.tags.length > 0 && (
-                                <div className="flex items-center justify-center gap-3 text-sm text-slate-400 mb-8">
+                                <div className="flex items-center gap-3 text-sm text-muted-foreground mb-4">
                                     {heroData.tags.map((tag, index) => (
                                         <span key={index} className="flex items-center gap-2">
-                                            {index > 0 && <span className="text-slate-600">•</span>}
+                                            {index > 0 && <span className="text-muted-foreground/40">•</span>}
                                             <span className="flex items-center gap-2">
                                                 {/* Simple icon logic based on keywords */}
                                                 {(tag.includes('Theory') || tag.includes('Stats')) && (
@@ -181,13 +170,6 @@ export default function LeJEPAProject() {
                                     ))}
                                 </div>
                             )}
-
-                            {/* Glow effect for the title */}
-                            <div className="absolute inset-0 text-4xl md:text-5xl lg:text-6xl font-medium leading-tight blur-sm">
-                                <span className="bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-cyan-400/20 bg-clip-text text-transparent">
-                                    {heroData?.title || 'LeJEPA: Provable and Scalable'}
-                                </span>
-                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/app/blog/path-to-open-superintelligence/page.tsx b/app/blog/path-to-open-superintelligence/page.tsx
index e9952c8..178b959 100644
--- a/app/blog/path-to-open-superintelligence/page.tsx
+++ b/app/blog/path-to-open-superintelligence/page.tsx
@@ -129,40 +129,29 @@ export default function RoadmapToOpenSuperintelligence() {
 
   return (
     <>
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-        {/* Background effects */}
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-cyan-600/20"></div>
-        <div className="absolute inset-0 opacity-30">
-          <div className="absolute inset-0 bg-gradient-to-br from-transparent via-blue-500/5 to-transparent"></div>
-        </div>
-
-        {/* Animated background particles */}
-        <div className="absolute inset-0 overflow-hidden">
-          <div className="absolute top-1/6 left-1/6 w-3 h-3 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full opacity-60 animate-pulse"></div>
-          <div className="absolute top-1/4 right-1/5 w-2 h-2 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full opacity-50 animate-pulse delay-300"></div>
-          <div className="absolute top-1/3 left-1/8 w-4 h-4 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full opacity-40 animate-pulse delay-700"></div>
-          <div className="absolute bottom-1/4 right-1/6 w-2.5 h-2.5 bg-gradient-to-r from-cyan-400 to-blue-400 rounded-full opacity-55 animate-pulse delay-1000"></div>
-        </div>
+      {/* Hero Section - Reduced */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-background via-card/50 to-background border-b border-border/30">
+        {/* Simplified background - single subtle gradient */}
+        <div className="absolute inset-0 bg-gradient-to-r from-gradient-accent-1/5 via-gradient-accent-2/5 to-gradient-accent-3/5"></div>
 
-        <div className="relative container mx-auto px-6 pt-32 pb-12">
-          <div className="text-center max-w-4xl mx-auto">
+        <div className="relative container mx-auto px-6 pt-24 pb-6">
+          <div className="text-left max-w-4xl mx-auto">
             <div className="relative">
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium mb-8 leading-tight">
-                <span className="bg-gradient-to-r from-amber-300 via-orange-400 to-rose-400 bg-clip-text text-transparent">
+              <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold mb-3 leading-tight">
+                <span className="text-foreground">
                   {heroData?.title || 'Path To Open Superintelligence'}
                 </span>
               </h1>
-              <div className="text-lg md:text-xl text-slate-400 mb-8">
+              <div className="text-base md:text-lg text-muted-foreground mb-4">
                 {heroData?.subtitle || 'A Strategic Path Forward for Building AGI Through Open Collaboration'}
               </div>
 
               {/* Tags */}
               {heroData?.tags && heroData.tags.length > 0 && (
-                <div className="flex items-center justify-center gap-3 text-sm text-slate-400 mb-8 flex-wrap">
+                <div className="flex items-center gap-3 text-sm text-muted-foreground mb-4 flex-wrap">
                   {heroData.tags.map((tag, index) => (
                     <span key={index} className="flex items-center gap-2">
-                      {index > 0 && <span className="text-slate-600">•</span>}
+                      {index > 0 && <span className="text-muted-foreground/40">•</span>}
                       <span className="flex items-center gap-2">
                         {tag.includes('🚀') && (
                           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -185,13 +174,6 @@ export default function RoadmapToOpenSuperintelligence() {
                   ))}
                 </div>
               )}
-
-              {/* Glow effect for the title */}
-              <div className="absolute inset-0 text-4xl md:text-5xl lg:text-6xl font-medium leading-tight blur-sm">
-                <span className="bg-gradient-to-r from-amber-300/20 via-orange-400/20 to-rose-400/20 bg-clip-text text-transparent">
-                  {heroData?.title || 'Path To Open Superintelligence'}
-                </span>
-              </div>
             </div>
           </div>
         </div>
diff --git a/app/blog/pretrain-llm-with-nvfp4/page.tsx b/app/blog/pretrain-llm-with-nvfp4/page.tsx
index 9cb9e65..5237f40 100644
--- a/app/blog/pretrain-llm-with-nvfp4/page.tsx
+++ b/app/blog/pretrain-llm-with-nvfp4/page.tsx
@@ -129,40 +129,29 @@ export default function NVFP4Project() {
 
   return (
     <>
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-        {/* Background effects */}
-        <div className="absolute inset-0 bg-gradient-to-r from-green-600/20 via-emerald-600/20 to-teal-600/20"></div>
-        <div className="absolute inset-0 opacity-30">
-          <div className="absolute inset-0 bg-gradient-to-br from-transparent via-green-500/5 to-transparent"></div>
-        </div>
-
-        {/* Animated background particles */}
-        <div className="absolute inset-0 overflow-hidden">
-          <div className="absolute top-1/6 left-1/6 w-3 h-3 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full opacity-60 animate-pulse"></div>
-          <div className="absolute top-1/4 right-1/5 w-2 h-2 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full opacity-50 animate-pulse delay-300"></div>
-          <div className="absolute top-1/3 left-1/8 w-4 h-4 bg-gradient-to-r from-teal-400 to-green-400 rounded-full opacity-40 animate-pulse delay-700"></div>
-          <div className="absolute bottom-1/4 right-1/6 w-2.5 h-2.5 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full opacity-55 animate-pulse delay-1000"></div>
-        </div>
+      {/* Hero Section - Reduced */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-background via-card/50 to-background border-b border-border/30">
+        {/* Simplified background - single subtle gradient */}
+        <div className="absolute inset-0 bg-gradient-to-r from-gradient-accent-1/5 via-gradient-accent-2/5 to-gradient-accent-3/5"></div>
 
-        <div className="relative container mx-auto px-6 pt-32 pb-12">
-          <div className="text-center max-w-4xl mx-auto">
+        <div className="relative container mx-auto px-6 pt-24 pb-6">
+          <div className="text-left max-w-4xl mx-auto">
             <div className="relative">
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium mb-8 leading-tight">
-                <span className="bg-gradient-to-r from-green-400 via-emerald-400 to-teal-400 bg-clip-text text-transparent">
+              <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold mb-3 leading-tight">
+                <span className="text-foreground">
                   {heroData?.title || "NVIDIA's 4-Bit Revolution"}
                 </span>
               </h1>
-              <div className="text-lg md:text-xl text-slate-400 mb-8">
+              <div className="text-base md:text-lg text-muted-foreground mb-4">
                 {heroData?.subtitle || "⚡ NVFP4: 2-3x Faster Training, 50% Less Memory"}
               </div>
 
               {/* Tags */}
               {heroData?.tags && heroData.tags.length > 0 && (
-                <div className="flex items-center justify-center gap-3 text-sm text-slate-400 mb-8">
+                <div className="flex items-center gap-3 text-sm text-muted-foreground mb-4">
                   {heroData.tags.map((tag, index) => (
                     <span key={index} className="flex items-center gap-2">
-                      {index > 0 && <span className="text-slate-600">•</span>}
+                      {index > 0 && <span className="text-muted-foreground/40">•</span>}
                       <span className="flex items-center gap-2">
                         {tag.includes('⏱️') && (
                           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -180,13 +169,6 @@ export default function NVFP4Project() {
                   ))}
                 </div>
               )}
-
-              {/* Glow effect for the title */}
-              <div className="absolute inset-0 text-4xl md:text-5xl lg:text-6xl font-medium leading-tight blur-sm">
-                <span className="bg-gradient-to-r from-green-400/20 via-emerald-400/20 to-teal-400/20 bg-clip-text text-transparent">
-                  {heroData?.title || "NVIDIA's 4-Bit Revolution"}
-                </span>
-              </div>
             </div>
           </div>
         </div>
diff --git a/app/blog/qerl-quantization-reinforcement-learning/page.tsx b/app/blog/qerl-quantization-reinforcement-learning/page.tsx
index a3507c9..c5a71ed 100644
--- a/app/blog/qerl-quantization-reinforcement-learning/page.tsx
+++ b/app/blog/qerl-quantization-reinforcement-learning/page.tsx
@@ -131,40 +131,29 @@ export default function QeRLProject() {
 
   return (
     <>
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-        {/* Background effects */}
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-blue-600/20"></div>
-        <div className="absolute inset-0 opacity-30">
-          <div className="absolute inset-0 bg-gradient-to-br from-transparent via-blue-500/5 to-transparent"></div>
-        </div>
-
-        {/* Animated background particles */}
-        <div className="absolute inset-0 overflow-hidden">
-          <div className="absolute top-1/6 left-1/6 w-3 h-3 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full opacity-60 animate-pulse"></div>
-          <div className="absolute top-1/4 right-1/5 w-2 h-2 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full opacity-50 animate-pulse delay-300"></div>
-          <div className="absolute top-1/3 left-1/8 w-4 h-4 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full opacity-40 animate-pulse delay-700"></div>
-          <div className="absolute bottom-1/4 right-1/6 w-2.5 h-2.5 bg-gradient-to-r from-cyan-400 to-blue-400 rounded-full opacity-55 animate-pulse delay-1000"></div>
-        </div>
+      {/* Hero Section - Reduced */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-background via-card/50 to-background border-b border-border/30">
+        {/* Simplified background - single subtle gradient */}
+        <div className="absolute inset-0 bg-gradient-to-r from-gradient-accent-1/5 via-gradient-accent-2/5 to-gradient-accent-3/5"></div>
 
-        <div className="relative container mx-auto px-6 pt-32 pb-12">
-          <div className="text-center max-w-4xl mx-auto">
+        <div className="relative container mx-auto px-6 pt-24 pb-6">
+          <div className="text-left max-w-4xl mx-auto">
             <div className="relative">
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium mb-8 leading-tight">
-                <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
+              <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold mb-3 leading-tight">
+                <span className="text-foreground">
                   {heroData?.title || 'Train 32B LLM Reasoning On 1 GPU - H100 80GB - QeRL'}
                 </span>
               </h1>
-              <div className="text-lg md:text-xl text-slate-400 mb-8">
+              <div className="text-base md:text-lg text-muted-foreground mb-4">
                 {heroData?.subtitle || 'LLM Reinforcement Learning With 4Bit Quantization'}
               </div>
 
               {/* Tags */}
               {heroData?.tags && heroData.tags.length > 0 && (
-                <div className="flex items-center justify-center gap-3 text-sm text-slate-400 mb-8">
+                <div className="flex items-center gap-3 text-sm text-muted-foreground mb-4">
                   {heroData.tags.map((tag, index) => (
                     <span key={index} className="flex items-center gap-2">
-                      {index > 0 && <span className="text-slate-600">•</span>}
+                      {index > 0 && <span className="text-muted-foreground/40">•</span>}
                       <span className="flex items-center gap-2">
                         {tag.includes('⏱️') && (
                           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -184,7 +173,7 @@ export default function QeRLProject() {
               )}
 
               {/* Links to Paper and GitHub */}
-              <div className="relative z-10 flex flex-wrap items-center justify-center gap-4 mb-8">
+              <div className="relative z-10 flex flex-wrap items-center gap-4 mb-4">
                 <a
                   href="https://arxiv.org/pdf/2510.11696"
                   target="_blank"
@@ -215,12 +204,6 @@ export default function QeRLProject() {
                 </a>
               </div>
 
-              {/* Glow effect for the title */}
-              <div className="absolute inset-0 text-4xl md:text-5xl lg:text-6xl font-medium leading-tight blur-sm pointer-events-none">
-                <span className="bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-cyan-400/20 bg-clip-text text-transparent">
-                  {heroData?.title || 'Train 32B LLM Reasoning On 1 GPU - H100 80GB - QeRL'}
-                </span>
-              </div>
             </div>
           </div>
         </div>
diff --git a/app/blog/the-most-difficult-project-in-human-history/page.tsx b/app/blog/the-most-difficult-project-in-human-history/page.tsx
index 195db67..6b6987f 100644
--- a/app/blog/the-most-difficult-project-in-human-history/page.tsx
+++ b/app/blog/the-most-difficult-project-in-human-history/page.tsx
@@ -129,40 +129,29 @@ export default function MostDifficultProject() {
 
   return (
     <>
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-        {/* Background effects */}
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-blue-600/20"></div>
-        <div className="absolute inset-0 opacity-30">
-          <div className="absolute inset-0 bg-gradient-to-br from-transparent via-blue-500/5 to-transparent"></div>
-        </div>
-
-        {/* Animated background particles */}
-        <div className="absolute inset-0 overflow-hidden">
-          <div className="absolute top-1/6 left-1/6 w-3 h-3 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full opacity-60 animate-pulse"></div>
-          <div className="absolute top-1/4 right-1/5 w-2 h-2 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full opacity-50 animate-pulse delay-300"></div>
-          <div className="absolute top-1/3 left-1/8 w-4 h-4 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full opacity-40 animate-pulse delay-700"></div>
-          <div className="absolute bottom-1/4 right-1/6 w-2.5 h-2.5 bg-gradient-to-r from-cyan-400 to-blue-400 rounded-full opacity-55 animate-pulse delay-1000"></div>
-        </div>
+      {/* Hero Section - Reduced */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-background via-card/50 to-background border-b border-border/30">
+        {/* Simplified background - single subtle gradient */}
+        <div className="absolute inset-0 bg-gradient-to-r from-gradient-accent-1/5 via-gradient-accent-2/5 to-gradient-accent-3/5"></div>
 
-        <div className="relative container mx-auto px-6 pt-32 pb-12">
-          <div className="text-center max-w-4xl mx-auto">
+        <div className="relative container mx-auto px-6 pt-24 pb-6">
+          <div className="text-left max-w-4xl mx-auto">
             <div className="relative">
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium mb-8 leading-tight">
-                <span className="bg-gradient-to-r from-amber-300 via-orange-400 to-rose-400 bg-clip-text text-transparent">
+              <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold mb-3 leading-tight">
+                <span className="text-foreground">
                   {heroData?.title || 'The Most Difficult Project in Human History'}
                 </span>
               </h1>
-              <div className="text-lg md:text-xl text-slate-400 mb-8">
+              <div className="text-base md:text-lg text-muted-foreground mb-4">
                 {heroData?.subtitle || ''}
               </div>
 
               {/* Tags */}
               {heroData?.tags && heroData.tags.length > 0 && (
-                <div className="flex items-center justify-center gap-3 text-sm text-slate-400 mb-8">
+                <div className="flex items-center gap-3 text-sm text-muted-foreground mb-4">
                   {heroData.tags.map((tag, index) => (
                     <span key={index} className="flex items-center gap-2">
-                      {index > 0 && <span className="text-slate-600">•</span>}
+                      {index > 0 && <span className="text-muted-foreground/40">•</span>}
                       <span className="flex items-center gap-2">
                         {tag.includes('🎯') && (
                           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -180,13 +169,6 @@ export default function MostDifficultProject() {
                   ))}
                 </div>
               )}
-
-              {/* Glow effect for the title */}
-              <div className="absolute inset-0 text-4xl md:text-5xl lg:text-6xl font-medium leading-tight blur-sm">
-                <span className="bg-gradient-to-r from-amber-300/20 via-orange-400/20 to-rose-400/20 bg-clip-text text-transparent">
-                  {heroData?.title || 'The Most Difficult Project in Human History'}
-                </span>
-              </div>
             </div>
           </div>
         </div>
diff --git a/app/blog/tiny-recursive-model/page.tsx b/app/blog/tiny-recursive-model/page.tsx
index ab592ed..d01ac66 100644
--- a/app/blog/tiny-recursive-model/page.tsx
+++ b/app/blog/tiny-recursive-model/page.tsx
@@ -129,40 +129,29 @@ export default function TinyRecursiveModelProject() {
 
   return (
     <>
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-        {/* Background effects */}
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-blue-600/20"></div>
-        <div className="absolute inset-0 opacity-30">
-          <div className="absolute inset-0 bg-gradient-to-br from-transparent via-blue-500/5 to-transparent"></div>
-        </div>
-
-        {/* Animated background particles */}
-        <div className="absolute inset-0 overflow-hidden">
-          <div className="absolute top-1/6 left-1/6 w-3 h-3 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full opacity-60 animate-pulse"></div>
-          <div className="absolute top-1/4 right-1/5 w-2 h-2 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full opacity-50 animate-pulse delay-300"></div>
-          <div className="absolute top-1/3 left-1/8 w-4 h-4 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full opacity-40 animate-pulse delay-700"></div>
-          <div className="absolute bottom-1/4 right-1/6 w-2.5 h-2.5 bg-gradient-to-r from-cyan-400 to-blue-400 rounded-full opacity-55 animate-pulse delay-1000"></div>
-        </div>
+      {/* Hero Section - Reduced */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-background via-card/50 to-background border-b border-border/30">
+        {/* Simplified background - single subtle gradient */}
+        <div className="absolute inset-0 bg-gradient-to-r from-gradient-accent-1/5 via-gradient-accent-2/5 to-gradient-accent-3/5"></div>
 
-        <div className="relative container mx-auto px-6 pt-32 pb-12">
-          <div className="text-center max-w-4xl mx-auto">
+        <div className="relative container mx-auto px-6 pt-24 pb-6">
+          <div className="text-left max-w-4xl mx-auto">
             <div className="relative">
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium mb-8 leading-tight">
-                <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
+              <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold mb-3 leading-tight">
+                <span className="text-foreground">
                   {heroData?.title || 'Tiny Recursive Model'}
                 </span>
               </h1>
-              <div className="text-lg md:text-xl text-slate-400 mb-8">
+              <div className="text-base md:text-lg text-muted-foreground mb-4">
                 {heroData?.subtitle || 'Exploring recursive architectures for efficient AI models'}
               </div>
 
               {/* Tags */}
               {heroData?.tags && heroData.tags.length > 0 && (
-                <div className="flex items-center justify-center gap-3 text-sm text-slate-400 mb-8">
+                <div className="flex items-center gap-3 text-sm text-muted-foreground mb-4">
                   {heroData.tags.map((tag, index) => (
                     <span key={index} className="flex items-center gap-2">
-                      {index > 0 && <span className="text-slate-600">•</span>}
+                      {index > 0 && <span className="text-muted-foreground/40">•</span>}
                       <span className="flex items-center gap-2">
                         {tag.includes('⏱️') && (
                           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -182,7 +171,7 @@ export default function TinyRecursiveModelProject() {
               )}
 
               {/* Links to Paper and GitHub */}
-              <div className="relative z-10 flex flex-wrap items-center justify-center gap-4 mb-8">
+              <div className="relative z-10 flex flex-wrap items-center gap-4 mb-4">
                 <a
                   href="https://arxiv.org/pdf/2510.04871v1"
                   target="_blank"
@@ -213,12 +202,6 @@ export default function TinyRecursiveModelProject() {
                 </a>
               </div>
 
-              {/* Glow effect for the title */}
-              <div className="absolute inset-0 text-4xl md:text-5xl lg:text-6xl font-medium leading-tight blur-sm pointer-events-none">
-                <span className="bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-cyan-400/20 bg-clip-text text-transparent">
-                  {heroData?.title || 'Tiny Recursive Model'}
-                </span>
-              </div>
             </div>
           </div>
         </div>
diff --git a/app/globals.css b/app/globals.css
index 0e28869..6e3f195 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,22 +6,22 @@ body {
   font-family: system-ui, sans-serif;
 }
 
-/* Custom scrollbar for dark theme */
+/* Custom scrollbar */
 ::-webkit-scrollbar {
   width: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #1e293b;
+  background: hsl(var(--scrollbar-track));
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #475569;
+  background: hsl(var(--scrollbar-thumb));
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #64748b;
+  background: hsl(var(--scrollbar-thumb-hover));
 }
 
 /* Smooth transitions for all interactive elements */
@@ -78,57 +78,89 @@ body {
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    /* Base theme colors - dark theme as default */
+    --background: 222 47% 11%;
+    --foreground: 210 40% 98%;
+    --card: 222 47% 11%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222 47% 11%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222 47% 11%;
+    --secondary: 217 32% 17%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217 32% 17%;
+    --muted-foreground: 215 20% 65%;
+    --accent: 217 32% 17%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217 32% 17%;
+    --input: 217 32% 17%;
+    --ring: 217 91% 60%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    /* Scrollbar colors */
+    --scrollbar-track: 222 47% 11%;
+    --scrollbar-thumb: 217 32% 28%;
+    --scrollbar-thumb-hover: 215 20% 50%;
+    /* Math styling colors */
+    --math-primary: 213 94% 68%;
+    --math-secondary: 270 91% 65%;
+    --math-accent: 160 84% 39%;
+    --math-text: 45 93% 47%;
+    --math-relation: 330 81% 60%;
+    --math-bracket: 215 16% 47%;
+    /* Syntax highlighting colors */
+    --syntax-bg: 222 47% 11%;
+    --syntax-text: 213 27% 84%;
+    --syntax-keyword: 270 91% 65%;
+    --syntax-string: 160 84% 39%;
+    --syntax-comment: 215 16% 47%;
+    --syntax-number: 45 93% 47%;
+    --syntax-function: 213 94% 68%;
+    --syntax-variable: 330 81% 60%;
+    /* Gradient colors */
+    --gradient-start: 222 47% 11%;
+    --gradient-mid: 222 47% 17%;
+    --gradient-end: 222 47% 11%;
+    --gradient-accent-1: 217 91% 60%;
+    --gradient-accent-2: 270 91% 65%;
+    --gradient-accent-3: 187 85% 53%;
+    /* Project-specific colors */
+    --indigo-900: 251 84% 27%;
+    --indigo-600: 239 84% 67%;
+    --indigo-500: 239 84% 67%;
+    --indigo-400: 239 84% 77%;
+    --indigo-300: 239 84% 85%;
+    --green-900: 142 76% 16%;
+    --green-600: 142 71% 45%;
+    --green-500: 142 71% 45%;
+    --green-400: 142 71% 55%;
+    --green-300: 142 71% 75%;
+    --emerald-900: 160 84% 16%;
+    --emerald-600: 160 84% 39%;
+    --emerald-500: 160 84% 39%;
+    --emerald-400: 160 84% 54%;
+    --emerald-300: 160 84% 71%;
+    --amber-600: 38 92% 50%;
+    --amber-500: 38 92% 50%;
+    --amber-400: 38 92% 60%;
+    --amber-300: 38 92% 75%;
+    --orange-600: 25 95% 53%;
+    --orange-500: 25 95% 53%;
+    --orange-400: 25 95% 63%;
+    --violet-900: 262 83% 33%;
+    --violet-600: 262 83% 58%;
+    --violet-500: 262 83% 58%;
+    --violet-400: 262 83% 73%;
+    --pink-600: 330 81% 60%;
+    --pink-500: 330 81% 60%;
+    --pink-400: 330 81% 70%;
   }
 }
 
@@ -249,14 +281,14 @@ body {
 
 .chatbot-markdown .hljs-comment,
 .chatbot-markdown .hljs-quote {
-  color: #6a737d;
+  color: hsl(var(--syntax-comment));
   font-style: italic;
 }
 
 .chatbot-markdown .hljs-keyword,
 .chatbot-markdown .hljs-selector-tag,
 .chatbot-markdown .hljs-subst {
-  color: #d73a49;
+  color: hsl(var(--syntax-keyword));
   font-weight: bold;
 }
 
@@ -265,59 +297,59 @@ body {
 .chatbot-markdown .hljs-variable,
 .chatbot-markdown .hljs-template-variable,
 .chatbot-markdown .hljs-tag .hljs-attr {
-  color: #005cc5;
+  color: hsl(var(--syntax-function));
 }
 
 .chatbot-markdown .hljs-string,
 .chatbot-markdown .hljs-doctag {
-  color: #032f62;
+  color: hsl(var(--syntax-string));
 }
 
 .chatbot-markdown .hljs-title,
 .chatbot-markdown .hljs-section,
 .chatbot-markdown .hljs-selector-id {
-  color: #6f42c1;
+  color: hsl(var(--syntax-keyword));
   font-weight: bold;
 }
 
 .chatbot-markdown .hljs-type,
 .chatbot-markdown .hljs-class .hljs-title {
-  color: #d73a49;
+  color: hsl(var(--syntax-variable));
   font-weight: bold;
 }
 
 .chatbot-markdown .hljs-tag,
 .chatbot-markdown .hljs-name,
 .chatbot-markdown .hljs-attribute {
-  color: #22863a;
+  color: hsl(var(--syntax-string));
   font-weight: normal;
 }
 
 .chatbot-markdown .hljs-regexp,
 .chatbot-markdown .hljs-link {
-  color: #032f62;
+  color: hsl(var(--syntax-string));
 }
 
 .chatbot-markdown .hljs-symbol,
 .chatbot-markdown .hljs-bullet {
-  color: #e36209;
+  color: hsl(var(--syntax-number));
 }
 
 .chatbot-markdown .hljs-built_in,
 .chatbot-markdown .hljs-builtin-name {
-  color: #005cc5;
+  color: hsl(var(--syntax-function));
 }
 
 .chatbot-markdown .hljs-meta {
-  color: #6a737d;
+  color: hsl(var(--syntax-comment));
 }
 
 .chatbot-markdown .hljs-deletion {
-  background: #ffeef0;
+  background: hsl(var(--destructive) / 0.1);
 }
 
 .chatbot-markdown .hljs-addition {
-  background: #f0fff4;
+  background: hsl(var(--math-accent) / 0.1);
 }
 
 .chatbot-markdown .hljs-emphasis {
diff --git a/app/layout.tsx b/app/layout.tsx
index 9ee9fff..354f933 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +4,8 @@ import "./globals.css";
 import "highlight.js/styles/github-dark.css";
 import { Navigation } from "@/components/navigation";
 import { Footer } from "@/components/footer";
+import { PaletteProvider } from "@/components/palette-provider";
+import { PaletteSwitcher } from "@/components/palette-switcher";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -26,16 +28,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en">
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <div className="min-h-screen text-white flex flex-col">
+        <PaletteProvider />
+        <div className="min-h-screen bg-background text-foreground flex flex-col">
           <Navigation />
           <main className="flex-1">
             {children}
           </main>
           <Footer />
+          <PaletteSwitcher />
         </div>
       </body>
     </html>
diff --git a/app/learn/page.tsx b/app/learn/page.tsx
index 13fe725..dd8f637 100644
--- a/app/learn/page.tsx
+++ b/app/learn/page.tsx
@@ -4,19 +4,19 @@ import Link from "next/link";
 
 export default function LearnPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
+    <div className="min-h-screen bg-gradient-to-br from-gradient-start via-gradient-mid to-gradient-end">
       {/* Hero Section */}
       <section className="relative overflow-hidden py-20">
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 via-purple-600/10 to-blue-600/10"></div>
+        <div className="absolute inset-0 bg-gradient-to-r from-gradient-accent-1/10 via-gradient-accent-2/10 to-gradient-accent-1/10"></div>
 
         <div className="relative container mx-auto px-6">
           <div className="max-w-4xl mx-auto text-center">
             <h1 className="text-5xl md:text-6xl font-bold mb-6">
-              <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
+              <span className="bg-gradient-to-r from-gradient-accent-1 via-gradient-accent-2 to-gradient-accent-3 bg-clip-text text-transparent">
                 Learn Everything You Need To Be An AI Researcher
               </span>
             </h1>
-            <p className="text-xl text-slate-300 mb-8">
+            <p className="text-xl text-muted-foreground mb-8">
               Master the fundamentals and publish your own papers
             </p>
             <div className="max-w-3xl mx-auto bg-amber-500/10 border border-amber-500/30 rounded-xl p-6 mb-8">
@@ -34,18 +34,18 @@ export default function LearnPage() {
           <div className="max-w-6xl mx-auto space-y-12">
 
             {/* Math Module */}
-            <div className="bg-gradient-to-br from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/50 rounded-2xl p-8">
+            <div className="bg-gradient-to-br from-card/50 to-background/50 backdrop-blur-sm border border-border/50 rounded-2xl p-8">
               <div className="flex items-center gap-4 mb-6">
-                <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="w-12 h-12 bg-gradient-to-r from-gradient-accent-1 to-gradient-accent-3 rounded-lg flex items-center justify-center">
+                  <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                   </svg>
                 </div>
                 <div>
-                  <h2 className="text-3xl font-bold text-white">
+                  <h2 className="text-3xl font-bold text-foreground">
                     Mathematics Fundamentals
                   </h2>
-                  <p className="text-slate-400">
+                  <p className="text-muted-foreground">
                     Essential math concepts for AI
                   </p>
                 </div>
@@ -54,85 +54,85 @@ export default function LearnPage() {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Link
                   href="/learn/math/functions"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-cyan-500/50 hover:shadow-xl hover:shadow-cyan-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-gradient-accent-3/50 hover:shadow-xl hover:shadow-gradient-accent-3/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-cyan-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-3 transition-colors">
                       <span className="mr-2">1.</span>Functions
                     </h3>
-                    <svg className="w-5 h-5 text-cyan-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-gradient-accent-3 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Linear, quadratic, and activation functions
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/math/derivatives"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-blue-500/50 hover:shadow-xl hover:shadow-blue-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-gradient-accent-1/50 hover:shadow-xl hover:shadow-gradient-accent-1/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-blue-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-blue-400 transition-colors">
                       <span className="mr-2">2.</span>Derivatives
                     </h3>
-                    <svg className="w-5 h-5 text-blue-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-gradient-accent-1 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Understanding rates of change and gradients
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/math/vectors"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-violet-500/50 hover:shadow-xl hover:shadow-violet-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-violet-500/50 hover:shadow-xl hover:shadow-violet-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-violet-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-violet-400 transition-colors">
                       <span className="mr-2">3.</span>Vectors
                     </h3>
                     <svg className="w-5 h-5 text-violet-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Understanding magnitude, direction, and vector operations
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/math/matrices"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-teal-500/50 hover:shadow-xl hover:shadow-teal-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-teal-500/50 hover:shadow-xl hover:shadow-teal-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-teal-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-teal-400 transition-colors">
                       <span className="mr-2">4.</span>Matrices
                     </h3>
                     <svg className="w-5 h-5 text-teal-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Matrix operations and transformations
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/math/gradients"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-orange-500/50 hover:shadow-xl hover:shadow-orange-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-orange-500/50 hover:shadow-xl hover:shadow-orange-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-orange-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-orange-400 transition-colors">
                       <span className="mr-2">5.</span>Gradients
                     </h3>
                     <svg className="w-5 h-5 text-orange-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Partial derivatives and gradient descent
                   </p>
                 </Link>
@@ -143,15 +143,15 @@ export default function LearnPage() {
             <div className="bg-gradient-to-br from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/50 rounded-2xl p-8">
               <div className="flex items-center gap-4 mb-6">
                 <div className="w-12 h-12 bg-gradient-to-r from-green-500 to-emerald-500 rounded-lg flex items-center justify-center">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                   </svg>
                 </div>
                 <div>
-                  <h2 className="text-3xl font-bold text-white">
+                  <h2 className="text-3xl font-bold text-foreground">
                     PyTorch Fundamentals
                   </h2>
-                  <p className="text-slate-400">
+                  <p className="text-muted-foreground">
                     Working with tensors and PyTorch basics
                   </p>
                 </div>
@@ -160,136 +160,136 @@ export default function LearnPage() {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Link
                   href="/learn/tensors/creating-tensors"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-green-500/50 hover:shadow-xl hover:shadow-green-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-green-500/50 hover:shadow-xl hover:shadow-green-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-green-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-green-400 transition-colors">
                       <span className="mr-2">1.</span>Creating Tensors
                     </h3>
                     <svg className="w-5 h-5 text-green-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Building blocks of deep learning
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/tensors/tensor-addition"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-lime-500/50 hover:shadow-xl hover:shadow-lime-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-lime-500/50 hover:shadow-xl hover:shadow-lime-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-lime-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-lime-400 transition-colors">
                       <span className="mr-2">2.</span>Tensor Addition
                     </h3>
                     <svg className="w-5 h-5 text-lime-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Element-wise operations on tensors
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/tensors/matrix-multiplication"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-emerald-500/50 hover:shadow-xl hover:shadow-emerald-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-emerald-500/50 hover:shadow-xl hover:shadow-emerald-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-emerald-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-emerald-400 transition-colors">
                       <span className="mr-2">3.</span>Matrix Multiplication
                     </h3>
                     <svg className="w-5 h-5 text-emerald-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     The core operation in neural networks
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/tensors/transposing-tensors"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-teal-500/50 hover:shadow-xl hover:shadow-teal-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-teal-500/50 hover:shadow-xl hover:shadow-teal-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-teal-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-teal-400 transition-colors">
                       <span className="mr-2">4.</span>Transposing Tensors
                     </h3>
                     <svg className="w-5 h-5 text-teal-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Flipping dimensions and axes
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/tensors/reshaping-tensors"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-cyan-500/50 hover:shadow-xl hover:shadow-cyan-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-gradient-accent-3/50 hover:shadow-xl hover:shadow-gradient-accent-3/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-cyan-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-cyan-400 transition-colors">
                       <span className="mr-2">5.</span>Reshaping Tensors
                     </h3>
-                    <svg className="w-5 h-5 text-cyan-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-gradient-accent-3 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Changing tensor dimensions
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/tensors/indexing-and-slicing"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-sky-500/50 hover:shadow-xl hover:shadow-sky-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-sky-500/50 hover:shadow-xl hover:shadow-sky-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-sky-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-sky-400 transition-colors">
                       <span className="mr-2">6.</span>Indexing and Slicing
                     </h3>
                     <svg className="w-5 h-5 text-sky-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Accessing and extracting tensor elements
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/tensors/concatenating-tensors"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-indigo-500/50 hover:shadow-xl hover:shadow-indigo-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-indigo-500/50 hover:shadow-xl hover:shadow-indigo-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-indigo-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-indigo-400 transition-colors">
                       <span className="mr-2">7.</span>Concatenating Tensors
                     </h3>
                     <svg className="w-5 h-5 text-indigo-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Combining multiple tensors
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/tensors/creating-special-tensors"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-violet-500/50 hover:shadow-xl hover:shadow-violet-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-violet-500/50 hover:shadow-xl hover:shadow-violet-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-violet-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-violet-400 transition-colors">
                       <span className="mr-2">8.</span>Creating Special Tensors
                     </h3>
                     <svg className="w-5 h-5 text-violet-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Zeros, ones, identity matrices and more
                   </p>
                 </Link>
@@ -300,15 +300,15 @@ export default function LearnPage() {
             <div className="bg-gradient-to-br from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/50 rounded-2xl p-8">
               <div className="flex items-center gap-4 mb-6">
                 <div className="w-12 h-12 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                   </svg>
                 </div>
                 <div>
-                  <h2 className="text-3xl font-bold text-white">
+                  <h2 className="text-3xl font-bold text-foreground">
                     Neuron From Scratch
                   </h2>
-                  <p className="text-slate-400">
+                  <p className="text-muted-foreground">
                     Understanding the fundamental unit of neural networks
                   </p>
                 </div>
@@ -317,119 +317,119 @@ export default function LearnPage() {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Link
                   href="/learn/neuron-from-scratch/what-is-a-neuron"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-yellow-500/50 hover:shadow-xl hover:shadow-yellow-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-yellow-500/50 hover:shadow-xl hover:shadow-yellow-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-yellow-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-yellow-400 transition-colors">
                       <span className="mr-2">1.</span>What is a Neuron
                     </h3>
                     <svg className="w-5 h-5 text-yellow-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     The basic building block of neural networks
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/neuron-from-scratch/the-linear-step"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-amber-500/50 hover:shadow-xl hover:shadow-amber-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-amber-500/50 hover:shadow-xl hover:shadow-amber-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-amber-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-amber-400 transition-colors">
                       <span className="mr-2">2.</span>The Linear Step
                     </h3>
                     <svg className="w-5 h-5 text-amber-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Weighted sums and bias in neurons
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/neuron-from-scratch/the-activation-function"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-orange-500/50 hover:shadow-xl hover:shadow-orange-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-orange-500/50 hover:shadow-xl hover:shadow-orange-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-orange-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-orange-400 transition-colors">
                       <span className="mr-2">3.</span>The Activation Function
                     </h3>
                     <svg className="w-5 h-5 text-orange-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Introducing non-linearity to neurons
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/neuron-from-scratch/building-a-neuron-in-python"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-red-500/50 hover:shadow-xl hover:shadow-red-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-red-500/50 hover:shadow-xl hover:shadow-red-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-red-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-red-400 transition-colors">
                       <span className="mr-2">4.</span>Building a Neuron in Python
                     </h3>
                     <svg className="w-5 h-5 text-red-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Implementing a single neuron from scratch
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/neuron-from-scratch/making-a-prediction"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-pink-500/50 hover:shadow-xl hover:shadow-pink-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-pink-500/50 hover:shadow-xl hover:shadow-pink-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-pink-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-pink-400 transition-colors">
                       <span className="mr-2">5.</span>Making a Prediction
                     </h3>
                     <svg className="w-5 h-5 text-pink-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     How a neuron processes input to output
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/neuron-from-scratch/the-concept-of-loss"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-rose-500/50 hover:shadow-xl hover:shadow-rose-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-rose-500/50 hover:shadow-xl hover:shadow-rose-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-rose-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-rose-400 transition-colors">
                       <span className="mr-2">6.</span>The Concept of Loss
                     </h3>
                     <svg className="w-5 h-5 text-rose-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Measuring prediction error
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/neuron-from-scratch/the-concept-of-learning"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-fuchsia-500/50 hover:shadow-xl hover:shadow-fuchsia-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-fuchsia-500/50 hover:shadow-xl hover:shadow-fuchsia-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-fuchsia-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-fuchsia-400 transition-colors">
                       <span className="mr-2">7.</span>The Concept of Learning
                     </h3>
                     <svg className="w-5 h-5 text-fuchsia-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     How neurons adjust their parameters
                   </p>
                 </Link>
@@ -440,15 +440,15 @@ export default function LearnPage() {
             <div className="bg-gradient-to-br from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/50 rounded-2xl p-8">
               <div className="flex items-center gap-4 mb-6">
                 <div className="w-12 h-12 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-lg flex items-center justify-center">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                   </svg>
                 </div>
                 <div>
-                  <h2 className="text-3xl font-bold text-white">
+                  <h2 className="text-3xl font-bold text-foreground">
                     Activation Functions
                   </h2>
-                  <p className="text-slate-400">
+                  <p className="text-muted-foreground">
                     Understanding different activation functions
                   </p>
                 </div>
@@ -457,102 +457,102 @@ export default function LearnPage() {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Link
                   href="/learn/activation-functions/relu"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-indigo-500/50 hover:shadow-xl hover:shadow-indigo-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-indigo-500/50 hover:shadow-xl hover:shadow-indigo-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-indigo-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-indigo-400 transition-colors">
                       <span className="mr-2">1.</span>ReLU
                     </h3>
                     <svg className="w-5 h-5 text-indigo-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Rectified Linear Unit - The most popular activation function
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/activation-functions/sigmoid"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-purple-500/50 hover:shadow-xl hover:shadow-purple-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-gradient-accent-2/50 hover:shadow-xl hover:shadow-gradient-accent-2/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-purple-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-purple-400 transition-colors">
                       <span className="mr-2">2.</span>Sigmoid
                     </h3>
-                    <svg className="w-5 h-5 text-purple-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-gradient-accent-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     The classic S-shaped activation function
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/activation-functions/tanh"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-violet-500/50 hover:shadow-xl hover:shadow-violet-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-violet-500/50 hover:shadow-xl hover:shadow-violet-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-violet-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-violet-400 transition-colors">
                       <span className="mr-2">3.</span>Tanh
                     </h3>
                     <svg className="w-5 h-5 text-violet-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Hyperbolic tangent - Zero-centered activation
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/activation-functions/silu"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-blue-500/50 hover:shadow-xl hover:shadow-blue-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-gradient-accent-1/50 hover:shadow-xl hover:shadow-gradient-accent-1/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-blue-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-blue-400 transition-colors">
                       <span className="mr-2">4.</span>SiLU
                     </h3>
-                    <svg className="w-5 h-5 text-blue-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-gradient-accent-1 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Sigmoid Linear Unit - The Swish activation
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/activation-functions/swiglu"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-cyan-500/50 hover:shadow-xl hover:shadow-cyan-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-gradient-accent-3/50 hover:shadow-xl hover:shadow-gradient-accent-3/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-cyan-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-cyan-400 transition-colors">
                       <span className="mr-2">5.</span>SwiGLU
                     </h3>
-                    <svg className="w-5 h-5 text-cyan-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-gradient-accent-3 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Swish-Gated Linear Unit - Advanced activation
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/activation-functions/softmax"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-teal-500/50 hover:shadow-xl hover:shadow-teal-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-teal-500/50 hover:shadow-xl hover:shadow-teal-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-teal-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-teal-400 transition-colors">
                       <span className="mr-2">6.</span>Softmax
                     </h3>
                     <svg className="w-5 h-5 text-teal-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Multi-class classification activation function
                   </p>
                 </Link>
@@ -563,15 +563,15 @@ export default function LearnPage() {
             <div className="bg-gradient-to-br from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/50 rounded-2xl p-8">
               <div className="flex items-center gap-4 mb-6">
                 <div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                   </svg>
                 </div>
                 <div>
-                  <h2 className="text-3xl font-bold text-white">
+                  <h2 className="text-3xl font-bold text-foreground">
                     Neural Networks from Scratch
                   </h2>
-                  <p className="text-slate-400">
+                  <p className="text-muted-foreground">
                     Build neural networks from the ground up
                   </p>
                 </div>
@@ -580,119 +580,119 @@ export default function LearnPage() {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Link
                   href="/learn/neural-networks/architecture-of-a-network"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-purple-500/50 hover:shadow-xl hover:shadow-purple-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-gradient-accent-2/50 hover:shadow-xl hover:shadow-gradient-accent-2/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-purple-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-purple-400 transition-colors">
                       <span className="mr-2">1.</span>Architecture of a Network
                     </h3>
-                    <svg className="w-5 h-5 text-purple-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-gradient-accent-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Understanding neural network structure and design
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/neural-networks/building-a-layer"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-pink-500/50 hover:shadow-xl hover:shadow-pink-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-pink-500/50 hover:shadow-xl hover:shadow-pink-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-pink-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-pink-400 transition-colors">
                       <span className="mr-2">2.</span>Building a Layer
                     </h3>
                     <svg className="w-5 h-5 text-pink-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Constructing individual network layers
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/neural-networks/implementing-a-network"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-indigo-500/50 hover:shadow-xl hover:shadow-indigo-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-indigo-500/50 hover:shadow-xl hover:shadow-indigo-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-indigo-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-indigo-400 transition-colors">
                       <span className="mr-2">3.</span>Implementing a Network
                     </h3>
                     <svg className="w-5 h-5 text-indigo-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Putting together a complete neural network
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/neural-networks/the-chain-rule"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-rose-500/50 hover:shadow-xl hover:shadow-rose-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-rose-500/50 hover:shadow-xl hover:shadow-rose-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-rose-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-rose-400 transition-colors">
                       <span className="mr-2">4.</span>The Chain Rule
                     </h3>
                     <svg className="w-5 h-5 text-rose-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Mathematical foundation of backpropagation
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/neural-networks/calculating-gradients"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-blue-500/50 hover:shadow-xl hover:shadow-blue-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-gradient-accent-1/50 hover:shadow-xl hover:shadow-gradient-accent-1/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-blue-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-blue-400 transition-colors">
                       <span className="mr-2">5.</span>Calculating Gradients
                     </h3>
-                    <svg className="w-5 h-5 text-blue-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-gradient-accent-1 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Computing derivatives for network training
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/neural-networks/backpropagation-in-action"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-cyan-500/50 hover:shadow-xl hover:shadow-cyan-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-gradient-accent-3/50 hover:shadow-xl hover:shadow-gradient-accent-3/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-cyan-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-cyan-400 transition-colors">
                       <span className="mr-2">6.</span>Backpropagation in Action
                     </h3>
-                    <svg className="w-5 h-5 text-cyan-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-gradient-accent-3 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Understanding the backpropagation algorithm
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/neural-networks/implementing-backpropagation"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-teal-500/50 hover:shadow-xl hover:shadow-teal-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-teal-500/50 hover:shadow-xl hover:shadow-teal-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-teal-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-teal-400 transition-colors">
                       <span className="mr-2">7.</span>Implementing Backpropagation
                     </h3>
                     <svg className="w-5 h-5 text-teal-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Coding the backpropagation algorithm from scratch
                   </p>
                 </Link>
@@ -703,16 +703,16 @@ export default function LearnPage() {
             <div className="bg-gradient-to-br from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/50 rounded-2xl p-8">
               <div className="flex items-center gap-4 mb-6">
                 <div className="w-12 h-12 bg-gradient-to-r from-red-500 to-pink-500 rounded-lg flex items-center justify-center">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                   </svg>
                 </div>
                 <div>
-                  <h2 className="text-3xl font-bold text-white">
+                  <h2 className="text-3xl font-bold text-foreground">
                     Attention Mechanism
                   </h2>
-                  <p className="text-slate-400">
+                  <p className="text-muted-foreground">
                     Understanding attention and self-attention
                   </p>
                 </div>
@@ -721,102 +721,102 @@ export default function LearnPage() {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Link
                   href="/learn/attention-mechanism/what-is-attention"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-red-500/50 hover:shadow-xl hover:shadow-red-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-red-500/50 hover:shadow-xl hover:shadow-red-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-red-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-red-400 transition-colors">
                       <span className="mr-2">1.</span>What is Attention
                     </h3>
                     <svg className="w-5 h-5 text-red-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Understanding the attention mechanism
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/attention-mechanism/self-attention-from-scratch"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-pink-500/50 hover:shadow-xl hover:shadow-pink-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-pink-500/50 hover:shadow-xl hover:shadow-pink-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-pink-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-pink-400 transition-colors">
                       <span className="mr-2">2.</span>Self Attention from Scratch
                     </h3>
                     <svg className="w-5 h-5 text-pink-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Building self-attention from the ground up
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/attention-mechanism/calculating-attention-scores"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-rose-500/50 hover:shadow-xl hover:shadow-rose-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-rose-500/50 hover:shadow-xl hover:shadow-rose-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-rose-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-rose-400 transition-colors">
                       <span className="mr-2">3.</span>Calculating Attention Scores
                     </h3>
                     <svg className="w-5 h-5 text-rose-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Computing query-key-value similarities
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/attention-mechanism/applying-attention-weights"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-fuchsia-500/50 hover:shadow-xl hover:shadow-fuchsia-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-fuchsia-500/50 hover:shadow-xl hover:shadow-fuchsia-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-fuchsia-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-fuchsia-400 transition-colors">
                       <span className="mr-2">4.</span>Applying Attention Weights
                     </h3>
                     <svg className="w-5 h-5 text-fuchsia-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Using attention scores to weight values
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/attention-mechanism/multi-head-attention"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-purple-500/50 hover:shadow-xl hover:shadow-purple-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-gradient-accent-2/50 hover:shadow-xl hover:shadow-gradient-accent-2/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-purple-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-purple-400 transition-colors">
                       <span className="mr-2">5.</span>Multi Head Attention
                     </h3>
-                    <svg className="w-5 h-5 text-purple-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-gradient-accent-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Parallel attention mechanisms
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/attention-mechanism/attention-in-code"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-violet-500/50 hover:shadow-xl hover:shadow-violet-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-violet-500/50 hover:shadow-xl hover:shadow-violet-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-violet-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-violet-400 transition-colors">
                       <span className="mr-2">6.</span>Attention in Code
                     </h3>
                     <svg className="w-5 h-5 text-violet-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Implementing attention mechanisms in Python
                   </p>
                 </Link>
@@ -827,15 +827,15 @@ export default function LearnPage() {
             <div className="bg-gradient-to-br from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/50 rounded-2xl p-8">
               <div className="flex items-center gap-4 mb-6">
                 <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-lg flex items-center justify-center">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                   </svg>
                 </div>
                 <div>
-                  <h2 className="text-3xl font-bold text-white">
+                  <h2 className="text-3xl font-bold text-foreground">
                     Transformer Feedforward
                   </h2>
-                  <p className="text-slate-400">
+                  <p className="text-muted-foreground">
                     Feedforward networks and Mixture of Experts
                   </p>
                 </div>
@@ -844,136 +844,136 @@ export default function LearnPage() {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Link
                   href="/learn/transformer-feedforward/the-feedforward-layer"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-blue-500/50 hover:shadow-xl hover:shadow-blue-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-gradient-accent-1/50 hover:shadow-xl hover:shadow-gradient-accent-1/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-blue-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-blue-400 transition-colors">
                       <span className="mr-2">1.</span>The Feedforward Layer
                     </h3>
-                    <svg className="w-5 h-5 text-blue-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-gradient-accent-1 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Understanding transformer feedforward networks
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/transformer-feedforward/what-is-mixture-of-experts"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-indigo-500/50 hover:shadow-xl hover:shadow-indigo-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-indigo-500/50 hover:shadow-xl hover:shadow-indigo-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-indigo-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-indigo-400 transition-colors">
                       <span className="mr-2">2.</span>What is Mixture of Experts
                     </h3>
                     <svg className="w-5 h-5 text-indigo-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Introduction to MoE architecture
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/transformer-feedforward/the-expert"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-cyan-500/50 hover:shadow-xl hover:shadow-cyan-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-gradient-accent-3/50 hover:shadow-xl hover:shadow-gradient-accent-3/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-cyan-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-cyan-400 transition-colors">
                       <span className="mr-2">3.</span>The Expert
                     </h3>
-                    <svg className="w-5 h-5 text-cyan-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-gradient-accent-3 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Understanding individual expert networks
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/transformer-feedforward/the-gate"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-teal-500/50 hover:shadow-xl hover:shadow-teal-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-teal-500/50 hover:shadow-xl hover:shadow-teal-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-teal-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-teal-400 transition-colors">
                       <span className="mr-2">4.</span>The Gate
                     </h3>
                     <svg className="w-5 h-5 text-teal-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Routing and gating mechanisms in MoE
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/transformer-feedforward/combining-experts"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-sky-500/50 hover:shadow-xl hover:shadow-sky-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-sky-500/50 hover:shadow-xl hover:shadow-sky-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-sky-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-sky-400 transition-colors">
                       <span className="mr-2">5.</span>Combining Experts
                     </h3>
                     <svg className="w-5 h-5 text-sky-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Merging multiple expert outputs
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/transformer-feedforward/moe-in-a-transformer"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-emerald-500/50 hover:shadow-xl hover:shadow-emerald-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-emerald-500/50 hover:shadow-xl hover:shadow-emerald-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-emerald-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-emerald-400 transition-colors">
                       <span className="mr-2">6.</span>MoE in a Transformer
                     </h3>
                     <svg className="w-5 h-5 text-emerald-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Integrating mixture of experts in transformers
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/transformer-feedforward/moe-in-code"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-green-500/50 hover:shadow-xl hover:shadow-green-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-green-500/50 hover:shadow-xl hover:shadow-green-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-green-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-green-400 transition-colors">
                       <span className="mr-2">7.</span>MoE in Code
                     </h3>
                     <svg className="w-5 h-5 text-green-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Implementing mixture of experts in Python
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/transformer-feedforward/the-deepseek-mlp"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-lime-500/50 hover:shadow-xl hover:shadow-lime-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-lime-500/50 hover:shadow-xl hover:shadow-lime-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-lime-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-lime-400 transition-colors">
                       <span className="mr-2">8.</span>The DeepSeek MLP
                     </h3>
                     <svg className="w-5 h-5 text-lime-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     DeepSeek&apos;s advanced MLP architecture
                   </p>
                 </Link>
@@ -984,15 +984,15 @@ export default function LearnPage() {
             <div className="bg-gradient-to-br from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/50 rounded-2xl p-8">
               <div className="flex items-center gap-4 mb-6">
                 <div className="w-12 h-12 bg-gradient-to-r from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                   </svg>
                 </div>
                 <div>
-                  <h2 className="text-3xl font-bold text-white">
+                  <h2 className="text-3xl font-bold text-foreground">
                     Building a Transformer
                   </h2>
-                  <p className="text-slate-400">
+                  <p className="text-muted-foreground">
                     Complete transformer implementation from scratch
                   </p>
                 </div>
@@ -1001,102 +1001,102 @@ export default function LearnPage() {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Link
                   href="/learn/building-a-transformer/transformer-architecture"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-orange-500/50 hover:shadow-xl hover:shadow-orange-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-orange-500/50 hover:shadow-xl hover:shadow-orange-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-orange-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-orange-400 transition-colors">
                       <span className="mr-2">1.</span>Transformer Architecture
                     </h3>
                     <svg className="w-5 h-5 text-orange-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Understanding the complete transformer structure
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/building-a-transformer/rope-positional-encoding"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-amber-500/50 hover:shadow-xl hover:shadow-amber-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-amber-500/50 hover:shadow-xl hover:shadow-amber-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-amber-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-amber-400 transition-colors">
                       <span className="mr-2">2.</span>RoPE Positional Encoding
                     </h3>
                     <svg className="w-5 h-5 text-amber-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Rotary position embeddings for transformers
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/building-a-transformer/building-a-transformer-block"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-yellow-500/50 hover:shadow-xl hover:shadow-yellow-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-yellow-500/50 hover:shadow-xl hover:shadow-yellow-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-yellow-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-yellow-400 transition-colors">
                       <span className="mr-2">3.</span>Building a Transformer Block
                     </h3>
                     <svg className="w-5 h-5 text-yellow-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Constructing individual transformer layers
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/building-a-transformer/the-final-linear-layer"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-red-500/50 hover:shadow-xl hover:shadow-red-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-red-500/50 hover:shadow-xl hover:shadow-red-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-red-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-red-400 transition-colors">
                       <span className="mr-2">4.</span>The Final Linear Layer
                     </h3>
                     <svg className="w-5 h-5 text-red-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Output projection and prediction head
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/building-a-transformer/full-transformer-in-code"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-pink-500/50 hover:shadow-xl hover:shadow-pink-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-pink-500/50 hover:shadow-xl hover:shadow-pink-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-pink-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-pink-400 transition-colors">
                       <span className="mr-2">5.</span>Full Transformer in Code
                     </h3>
                     <svg className="w-5 h-5 text-pink-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Complete transformer implementation
                   </p>
                 </Link>
 
                 <Link
                   href="/learn/building-a-transformer/training-a-transformer"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-rose-500/50 hover:shadow-xl hover:shadow-rose-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-rose-500/50 hover:shadow-xl hover:shadow-rose-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-rose-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-rose-400 transition-colors">
                       <span className="mr-2">6.</span>Training a Transformer
                     </h3>
                     <svg className="w-5 h-5 text-rose-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Training process and optimization
                   </p>
                 </Link>
@@ -1107,15 +1107,15 @@ export default function LearnPage() {
             <div className="bg-gradient-to-br from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/50 rounded-2xl p-8">
               <div className="flex items-center gap-4 mb-6">
                 <div className="w-12 h-12 bg-gradient-to-r from-emerald-500 to-teal-500 rounded-lg flex items-center justify-center">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                   </svg>
                 </div>
                 <div>
-                  <h2 className="text-3xl font-bold text-white">
+                  <h2 className="text-3xl font-bold text-foreground">
                     Large Language Models
                   </h2>
-                  <p className="text-slate-400">
+                  <p className="text-muted-foreground">
                     Understanding LLM training and optimization
                   </p>
                 </div>
@@ -1124,17 +1124,17 @@ export default function LearnPage() {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Link
                   href="/learn/large-language-models/batch-size-vs-sequence-length"
-                  className="group bg-slate-800/50 border border-slate-600/50 rounded-xl p-6 hover:border-emerald-500/50 hover:shadow-xl hover:shadow-emerald-500/10 transition-all duration-300"
+                  className="group bg-card/50 border border-border/50 rounded-xl p-6 hover:border-emerald-500/50 hover:shadow-xl hover:shadow-emerald-500/10 transition-all duration-300"
                 >
                   <div className="flex items-start justify-between mb-3">
-                    <h3 className="text-xl font-semibold text-white group-hover:text-emerald-400 transition-colors">
+                    <h3 className="text-xl font-semibold text-foreground group-hover:text-gradient-accent-emerald-400 transition-colors">
                       <span className="mr-2">1.</span>Batch Size vs Sequence Length
                     </h3>
                     <svg className="w-5 h-5 text-emerald-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
                   </div>
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-muted-foreground text-sm">
                     Understanding the trade-offs between batch size and sequence length
                   </p>
                 </Link>
diff --git a/app/page.tsx b/app/page.tsx
index 47ab88f..8456a79 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,24 +1,52 @@
 'use client';
 
 import Link from "next/link";
+import { useEffect, useState } from "react";
+import VaporwaveGrid from "@/components/vaporwave-grid";
 
 export default function Home() {
+  const [isLightTheme, setIsLightTheme] = useState(false);
+
+  useEffect(() => {
+    const checkTheme = () => {
+      const bgColor = getComputedStyle(document.documentElement)
+        .getPropertyValue('--background')
+        .trim();
+      
+      if (bgColor) {
+        // Parse HSL: "H S% L%"
+        const parts = bgColor.split(/\s+/);
+        const lightness = parseFloat(parts[2]?.replace('%', '') || '0');
+        setIsLightTheme(lightness > 50);
+      }
+    };
+
+    checkTheme();
+    // Check on palette changes
+    const observer = new MutationObserver(checkTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  // Theme-aware shadow styles
+  const titleShadow = isLightTheme
+    ? 'drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.2))'
+    : 'drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.1))';
+  
+  const subtitleShadow = isLightTheme
+    ? '0 1px 3px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.2)'
+    : '0 2px 8px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.1)';
+
   return (
     <>
       {/* Hero Section */}
-      <section className="relative overflow-hidden min-h-screen flex flex-col pt-20">
-        {/* Animated mesh gradient background */}
-        <div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"></div>
-
-        {/* Animated gradient mesh overlay */}
-        <div className="absolute inset-0 opacity-40">
-          <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/30 rounded-full blur-3xl animate-pulse"></div>
-          <div className="absolute top-1/3 right-1/4 w-96 h-96 bg-purple-500/30 rounded-full blur-3xl animate-pulse delay-700"></div>
-          <div className="absolute bottom-1/4 left-1/3 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
-        </div>
-
-        {/* Grid pattern overlay */}
-        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,.02)_1px,transparent_1px)] bg-[size:72px_72px]"></div>
+      <section className="relative overflow-hidden min-h-screen flex flex-col">
+        {/* Vaporwave Grid Animation */}
+        <VaporwaveGrid />
 
         {/* Floating geometric shapes - Removed for cleaner look */}
         {/* <div className="absolute inset-0 overflow-hidden pointer-events-none">
@@ -28,56 +56,38 @@ export default function Home() {
           <div className="absolute bottom-20 right-1/3 w-14 h-14 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-lg rotate-6 animate-float-delayed"></div>
         </div> */}
 
-        <div className="relative container mx-auto px-6 py-20 flex-grow flex items-center">
+        <div className="relative z-10 container mx-auto px-6 mt-[49vh] pb-20">
           <div className="text-center max-w-6xl mx-auto">
             {/* Main Heading with modern gradient */}
-            <div className="relative mb-8">
-              <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 tracking-tight">
-                <span className="inline-block bg-gradient-to-b from-white via-white to-slate-400 bg-clip-text text-transparent">
+            <div className="relative mb-4 pb-3 overflow-visible">
+              <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.4] pb-4"
+                  style={{
+                    filter: titleShadow
+                  }}>
+                <span className="inline-block bg-gradient-to-b from-foreground via-foreground to-muted-foreground bg-clip-text text-transparent" 
+                      style={{ 
+                        paddingBottom: '0.52rem'
+                      }}>
                   Open Superintelligence Lab
                 </span>
               </h1>
             </div>
 
-            {/* Subtitle with typing effect styling */}
-            <p className="text-lg md:text-xl lg:text-2xl text-slate-300 mb-8 font-medium">
+            {/* Subtitle with embossed text shadow for readability */}
+            <p className="text-lg md:text-xl lg:text-2xl text-muted-foreground mb-16 md:mb-8 font-medium"
+               style={{
+                 textShadow: subtitleShadow
+               }}>
               Do AI research with top tier AI researchers
             </p>
 
-            {/* Description */}
-            {/* <p className="text-base md:text-lg text-slate-400 mb-12 max-w-2xl mx-auto leading-relaxed">
-              Building AGI through open collaboration. Join researchers, engineers, and visionaries advancing AI research and development.
-            </p> */}
-
-            {/* Feature Tags */}
-            {/* <div className="flex flex-wrap justify-center gap-3 mb-12">
-              {[
-                { icon: '🌐', text: 'Open Source', color: 'blue' },
-                { icon: '🧠', text: 'LLM Research', color: 'purple' },
-                { icon: '⚡', text: 'Innovation', color: 'cyan' },
-                { icon: '🤝', text: 'Collaboration', color: 'pink' },
-              ].map((tag, i) => (
-                <div
-                  key={i}
-                  className={`group relative px-4 py-2 bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-full hover:border-${tag.color}-500/50 transition-all duration-300 hover:scale-105`}
-                >
-                  <div className="flex items-center gap-2">
-                    <span className="text-lg">{tag.icon}</span>
-                    <span className="text-sm font-medium text-slate-300 group-hover:text-white">
-                      {tag.text}
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div> */}
-
-            {/* CTA Buttons */}
-            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            {/* CTA Buttons - properly centered with gap between them */}
+            <div className="flex flex-col sm:flex-row justify-center items-center mb-16" style={{ gap: '1rem', transform: 'translateX(-12.5px)' }}>
               <button
                 onClick={() => document.getElementById('research-projects')?.scrollIntoView({ behavior: 'smooth' })}
-                className="group relative px-8 py-4 bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-600 text-white font-semibold rounded-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-purple-500/25"
+                className="group relative px-8 py-4 bg-gradient-to-r from-gradient-accent-1 via-gradient-accent-2 to-gradient-accent-3 text-primary-foreground font-semibold rounded-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-gradient-accent-2/25"
               >
-                <div className="absolute inset-0 bg-gradient-to-r from-cyan-600 via-blue-600 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <div className="absolute inset-0 bg-gradient-to-r from-gradient-accent-3 via-gradient-accent-1 to-gradient-accent-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                 <span className="relative flex items-center gap-2">
                   Explore Research
                   <svg className="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -88,7 +98,7 @@ export default function Home() {
 
               <Link
                 href="/about"
-                className="group px-8 py-4 bg-slate-800/50 backdrop-blur-sm border-2 border-slate-600/50 text-slate-300 font-semibold rounded-xl hover:border-blue-500/50 hover:bg-slate-800/80 hover:text-white transition-all duration-300"
+                className="group px-8 py-4 bg-secondary/40 backdrop-blur-sm border-2 border-ring/60 text-foreground/90 font-semibold rounded-xl hover:border-gradient-accent-2/80 hover:bg-secondary/60 hover:text-foreground transition-all duration-300"
               >
                 <span className="flex items-center gap-2">
                   Learn More
@@ -99,9 +109,9 @@ export default function Home() {
               </Link>
             </div>
 
-            {/* Scroll indicator */}
-            <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
-              <svg className="w-6 h-6 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            {/* Scroll indicator - below buttons */}
+            <div className="flex justify-center animate-bounce mt-[20vh] md:mt-[24vh]">
+              <svg className="w-6 h-6 text-foreground/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
               </svg>
             </div>
@@ -110,17 +120,17 @@ export default function Home() {
       </section>
 
       {/* Main Projects Section */}
-      <main id="research-projects" className="relative bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-24">
-        {/* Background effects */}
-        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,.01)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,.01)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
+      <main id="research-projects" className="relative bg-gradient-to-b from-gradient-start via-gradient-mid to-gradient-end py-24">
+        {/* Background effects - theme aware */}
+        <div className="absolute inset-0 bg-[linear-gradient(hsl(var(--foreground)/0.01)_1px,transparent_1px),linear-gradient(90deg,hsl(var(--foreground)/0.01)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
 
         <div className="relative container mx-auto px-6">
           {/* Section Header */}
           <div className="text-center mb-16">
-            <h2 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
+            <h2 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-gradient-accent-1 via-gradient-accent-2 to-gradient-accent-3 bg-clip-text text-transparent">
               Research Projects
             </h2>
-            <p className="text-lg text-slate-400 max-w-2xl mx-auto">
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
               Explore our cutting-edge AI research initiatives pushing the boundaries of what&apos;s possible
             </p>
           </div>
@@ -130,7 +140,7 @@ export default function Home() {
             {/* Path to Open Superintelligence - Featured */}
             <Link
               href="/blog/path-to-open-superintelligence"
-              className="group relative lg:col-span-2 bg-gradient-to-br from-slate-800/40 to-slate-900/40 backdrop-blur-xl border border-slate-700/50 rounded-2xl p-8 hover:border-amber-500/50 transition-all duration-500 overflow-hidden"
+              className="group relative lg:col-span-2 bg-gradient-to-br from-card/40 to-background/40 backdrop-blur-xl border border-border/50 rounded-2xl p-8 hover:border-accent/50 transition-all duration-500 overflow-hidden"
             >
               {/* Animated gradient border glow */}
               <div className="absolute inset-0 bg-gradient-to-r from-amber-500/0 via-orange-500/0 to-rose-500/0 group-hover:from-amber-500/10 group-hover:via-orange-500/10 group-hover:to-rose-500/10 rounded-2xl transition-all duration-500"></div>
@@ -143,7 +153,7 @@ export default function Home() {
                   <span className="px-3 py-1 bg-amber-500/20 text-amber-400 text-xs font-semibold rounded-full border border-amber-500/30">
                     Strategic Vision
                   </span>
-                  <span className="px-3 py-1 bg-slate-700/50 text-slate-300 text-xs font-medium rounded-full">
+                  <span className="px-3 py-1 bg-muted/50 text-muted-foreground text-xs font-medium rounded-full">
                     Featured
                   </span>
                 </div>
@@ -152,12 +162,12 @@ export default function Home() {
                   Path To Open Superintelligence
                 </h3>
 
-                <p className="text-slate-400 text-base mb-6 leading-relaxed">
+                <p className="text-muted-foreground text-base mb-6 leading-relaxed">
                   A strategic roadmap for building AGI through open collaboration, addressing key challenges and defining our path forward to create transformative AI systems that benefit all of humanity.
                 </p>
 
                 <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2 text-sm text-slate-500">
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                     <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
@@ -176,7 +186,7 @@ export default function Home() {
             {/* DeepSeek Sparse Attention Project */}
             <Link
               href="/blog/deepseek-sparse-attention"
-              className="group relative bg-gradient-to-br from-slate-800/40 to-slate-900/40 backdrop-blur-xl border border-slate-700/50 rounded-2xl p-7 hover:border-blue-500/50 transition-all duration-500 overflow-hidden"
+              className="group relative bg-gradient-to-br from-card/40 to-background/40 backdrop-blur-xl border border-border/50 rounded-2xl p-7 hover:border-gradient-accent-1/50 transition-all duration-500 overflow-hidden"
             >
               <div className="absolute -inset-px bg-gradient-to-r from-blue-500 to-cyan-500 rounded-2xl opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-500"></div>
 
@@ -191,12 +201,12 @@ export default function Home() {
                   DeepSeek Sparse Attention - DeepSeek-V3.2-Exp
                 </h4>
 
-                <p className="text-slate-400 text-sm mb-5 leading-relaxed">
+                <p className="text-muted-foreground text-sm mb-5 leading-relaxed">
                   Advanced research on DeepSeek&apos;s innovative sparse attention mechanisms for efficient long-context processing and memory optimization
                 </p>
 
                 <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2 text-xs text-slate-500">
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                     <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                     </svg>
@@ -212,7 +222,7 @@ export default function Home() {
             {/* Tiny Recursive Model Project */}
             <Link
               href="/blog/tiny-recursive-model"
-              className="group relative bg-gradient-to-br from-slate-800/40 to-slate-900/40 backdrop-blur-xl border border-slate-700/50 rounded-2xl p-7 hover:border-purple-500/50 transition-all duration-500 overflow-hidden"
+              className="group relative bg-gradient-to-br from-card/40 to-background/40 backdrop-blur-xl border border-border/50 rounded-2xl p-7 hover:border-gradient-accent-2/50 transition-all duration-500 overflow-hidden"
             >
               <div className="absolute -inset-px bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-500"></div>
 
@@ -227,12 +237,12 @@ export default function Home() {
                   Tiny Recursive Model
                 </h4>
 
-                <p className="text-slate-400 text-sm mb-5 leading-relaxed">
+                <p className="text-muted-foreground text-sm mb-5 leading-relaxed">
                   How a 7M parameter model beats 100x bigger models at Sudoku, Mazes, and ARC-AGI using recursive reasoning with a 2-layer transformer
                 </p>
 
                 <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2 text-xs text-slate-500">
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                     <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                     </svg>
@@ -248,7 +258,7 @@ export default function Home() {
             {/* Pretrain LLM with NVFP4 Project */}
             <Link
               href="/blog/pretrain-llm-with-nvfp4"
-              className="group relative bg-gradient-to-br from-slate-800/40 to-slate-900/40 backdrop-blur-xl border border-slate-700/50 rounded-2xl p-7 hover:border-green-500/50 transition-all duration-500 overflow-hidden"
+              className="group relative bg-gradient-to-br from-card/40 to-background/40 backdrop-blur-xl border border-border/50 rounded-2xl p-7 hover:border-accent/50 transition-all duration-500 overflow-hidden"
             >
               <div className="absolute -inset-px bg-gradient-to-r from-green-500 to-emerald-500 rounded-2xl opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-500"></div>
 
@@ -263,12 +273,12 @@ export default function Home() {
                   Pretrain LLM with NVFP4
                 </h4>
 
-                <p className="text-slate-400 text-sm mb-5 leading-relaxed">
+                <p className="text-muted-foreground text-sm mb-5 leading-relaxed">
                   NVIDIA&apos;s breakthrough 4-bit training methodology achieving 2-3x speedup and 50% memory reduction without sacrificing model quality
                 </p>
 
                 <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2 text-xs text-slate-500">
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                     <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                     </svg>
@@ -284,7 +294,7 @@ export default function Home() {
             {/* Diffusion Transformer RAE Project */}
             <Link
               href="/blog/diffusion-transformer-representation-autoencoder"
-              className="group relative bg-gradient-to-br from-slate-800/40 to-slate-900/40 backdrop-blur-xl border border-slate-700/50 rounded-2xl p-7 hover:border-cyan-500/50 transition-all duration-500 overflow-hidden"
+              className="group relative bg-gradient-to-br from-card/40 to-background/40 backdrop-blur-xl border border-border/50 rounded-2xl p-7 hover:border-gradient-accent-3/50 transition-all duration-500 overflow-hidden"
             >
               <div className="absolute -inset-px bg-gradient-to-r from-cyan-500 to-blue-500 rounded-2xl opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-500"></div>
 
@@ -299,12 +309,12 @@ export default function Home() {
                   47x Faster Image Generation Training
                 </h4>
 
-                <p className="text-slate-400 text-sm mb-5 leading-relaxed">
+                <p className="text-muted-foreground text-sm mb-5 leading-relaxed">
                   Diffusion Transformers with Representation Autoencoders achieve state-of-the-art FID 1.13 on ImageNet while training 47x faster (80 vs 1400 epochs)
                 </p>
 
                 <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2 text-xs text-slate-500">
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                     <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                     </svg>
@@ -320,7 +330,7 @@ export default function Home() {
             {/* QeRL Project */}
             <Link
               href="/blog/qerl-quantization-reinforcement-learning"
-              className="group relative bg-gradient-to-br from-slate-800/40 to-slate-900/40 backdrop-blur-xl border border-slate-700/50 rounded-2xl p-7 hover:border-orange-500/50 transition-all duration-500 overflow-hidden"
+              className="group relative bg-gradient-to-br from-card/40 to-background/40 backdrop-blur-xl border border-border/50 rounded-2xl p-7 hover:border-accent/50 transition-all duration-500 overflow-hidden"
             >
               <div className="absolute -inset-px bg-gradient-to-r from-orange-500 to-rose-500 rounded-2xl opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-500"></div>
 
@@ -335,12 +345,12 @@ export default function Home() {
                   QeRL: Beyond Efficiency
                 </h4>
 
-                <p className="text-slate-400 text-sm mb-5 leading-relaxed">
+                <p className="text-muted-foreground text-sm mb-5 leading-relaxed">
                   Quantization-enhanced Reinforcement Learning for LLMs achieves 1.5x speedup and enables RL training of 32B models on a single H100 80GB GPU
                 </p>
 
                 <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2 text-xs text-slate-500">
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                     <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                     </svg>
diff --git a/components/course-navigation.tsx b/components/course-navigation.tsx
index 0b737a6..3425a0b 100644
--- a/components/course-navigation.tsx
+++ b/components/course-navigation.tsx
@@ -40,10 +40,10 @@ export function CourseNavigation() {
   const NavigationContent = () => (
     <>
       <div className="mb-6">
-        <h3 className="text-lg font-bold text-white mb-2">
+        <h3 className="text-lg font-bold text-foreground mb-2">
           Course Contents
         </h3>
-        <p className="text-xs text-slate-400">
+        <p className="text-xs text-muted-foreground">
           Navigate through the lessons
         </p>
       </div>
@@ -52,10 +52,10 @@ export function CourseNavigation() {
         {modules.map((module, moduleIndex) => (
           <div key={moduleIndex}>
             <div className="flex items-center gap-2 mb-3">
-              <div className="text-blue-400">
+              <div className="text-gradient-accent-1">
                 {module.icon}
               </div>
-              <h4 className="text-sm font-semibold text-slate-300">
+              <h4 className="text-sm font-semibold text-muted-foreground">
                 {module.title}
               </h4>
             </div>
@@ -73,8 +73,8 @@ export function CourseNavigation() {
                       className={`
                         block px-3 py-2 rounded-lg text-sm transition-all duration-200
                         ${isActive
-                          ? 'bg-blue-600/20 text-blue-400 font-medium border-l-2 border-blue-400'
-                          : 'text-slate-400 hover:text-slate-200 hover:bg-white/5'
+                          ? 'bg-gradient-accent-1/20 text-gradient-accent-1 font-medium border-l-2 border-gradient-accent-1'
+                          : 'text-muted-foreground hover:text-foreground hover:bg-card/50'
                         }
                       `}
                     >
@@ -89,10 +89,10 @@ export function CourseNavigation() {
         ))}
       </nav>
 
-      <div className="mt-8 pt-6 border-t border-slate-700">
+      <div className="mt-8 pt-6 border-t border-border">
         <Link
           href="/learn"
-          className="flex items-center gap-2 text-sm text-slate-400 hover:text-blue-400 transition-colors"
+          className="flex items-center gap-2 text-sm text-muted-foreground hover:text-gradient-accent-1 transition-colors"
         >
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
@@ -108,10 +108,10 @@ export function CourseNavigation() {
       {/* Mobile Toggle Button */}
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="lg:hidden fixed top-20 left-4 z-50 bg-slate-800 border border-slate-700 p-3 rounded-lg shadow-lg hover:bg-slate-700 transition-colors"
+        className="lg:hidden fixed top-20 left-4 z-50 bg-card border border-border p-3 rounded-lg shadow-lg hover:bg-secondary transition-colors"
         aria-label="Toggle course navigation"
       >
-        <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
         </svg>
       </button>
@@ -127,14 +127,14 @@ export function CourseNavigation() {
       {/* Mobile Sidebar */}
       <aside
         className={`
-          lg:hidden fixed top-0 left-0 bottom-0 w-80 bg-slate-900 border-r border-slate-700 z-50 transform transition-transform duration-300 ease-in-out overflow-y-auto
+          lg:hidden fixed top-0 left-0 bottom-0 w-80 bg-card border-r border-border z-50 transform transition-transform duration-300 ease-in-out overflow-y-auto
           ${isOpen ? 'translate-x-0' : '-translate-x-full'}
         `}
       >
         <div className="p-6">
           <button
             onClick={() => setIsOpen(false)}
-            className="absolute top-4 right-4 text-slate-400 hover:text-white"
+            className="absolute top-4 right-4 text-muted-foreground hover:text-foreground"
           >
             <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -145,7 +145,7 @@ export function CourseNavigation() {
       </aside>
 
       {/* Desktop Sidebar */}
-      <aside className="hidden lg:block fixed left-0 top-0 bottom-0 w-80 bg-slate-900/50 backdrop-blur-sm border-r border-slate-700 overflow-y-auto pt-20">
+      <aside className="hidden lg:block fixed left-0 top-0 bottom-0 w-80 bg-card/50 backdrop-blur-sm border-r border-border overflow-y-auto pt-20">
         <div className="p-6">
           <NavigationContent />
         </div>
diff --git a/components/footer.tsx b/components/footer.tsx
index 4779e7b..29c8807 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,55 +1,53 @@
 'use client';
 
 import Link from "next/link";
+import { OSLLogo } from "./osl-logo";
 
 export function Footer() {
   return (
-    <footer className="relative bg-gradient-to-b from-slate-900/80 to-slate-950/95 border-t border-white/5 backdrop-blur-xl">
+    <footer className="relative bg-gradient-to-b from-card/80 to-background/95 border-t border-border/10 backdrop-blur-xl">
       {/* Gradient overlay */}
-      <div className="absolute inset-0 bg-gradient-to-r from-blue-600/5 via-purple-600/5 to-cyan-600/5"></div>
+      <div className="absolute inset-0 bg-gradient-to-r from-gradient-accent-1/5 via-gradient-accent-2/5 to-gradient-accent-3/5"></div>
 
       <div className="relative container mx-auto px-6 py-12">
         {/* Main Footer Content */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-8">
           {/* Brand Section */}
           <div className="space-y-4">
-            <Link href="/" className="group inline-flex items-center gap-3">
-              <div className="relative">
-                <div className="absolute -inset-0.5 bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-600 rounded-2xl opacity-50 group-hover:opacity-75 blur transition-all duration-300"></div>
-                <div className="relative w-10 h-10 bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl flex items-center justify-center shadow-xl">
-                  <span className="text-xl filter drop-shadow-lg">🔮</span>
-                </div>
+            <div className="flex items-center gap-3">
+              <div className="flex items-center justify-center">
+                <OSLLogo />
               </div>
               <div className="flex flex-col">
-                <span className="text-sm font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
+                <span className="text-sm font-bold bg-gradient-to-r from-gradient-accent-1 via-gradient-accent-2 to-gradient-accent-3 bg-clip-text text-transparent">
                   Open Superintelligence
                 </span>
-                <span className="text-xs text-slate-500">Building the Future</span>
+                <span className="text-xs text-muted-foreground">Building the Future</span>
               </div>
-            </Link>
-            <p className="text-sm text-slate-400 leading-relaxed">
+            </div>
+            <p className="text-sm text-muted-foreground leading-relaxed">
               Advancing AI research and development through open collaboration.
             </p>
           </div>
 
           {/* Quick Links */}
           <div className="space-y-4">
-            <h3 className="text-sm font-semibold text-white uppercase tracking-wider">Quick Links</h3>
+            <h3 className="text-sm font-semibold text-foreground uppercase tracking-wider">Quick Links</h3>
             <nav className="flex flex-col gap-3">
-              <Link href="/" className="group flex items-center gap-2 text-sm text-slate-400 hover:text-blue-400 transition-colors">
-                <span className="w-1 h-1 bg-slate-600 group-hover:bg-blue-400 rounded-full transition-colors"></span>
+              <Link href="/" className="group flex items-center gap-2 text-sm text-muted-foreground hover:text-gradient-accent-1 transition-colors">
+                <span className="w-1 h-1 bg-muted group-hover:bg-gradient-accent-1 rounded-full transition-colors"></span>
                 Home
               </Link>
-              <Link href="/about" className="group flex items-center gap-2 text-sm text-slate-400 hover:text-blue-400 transition-colors">
-                <span className="w-1 h-1 bg-slate-600 group-hover:bg-blue-400 rounded-full transition-colors"></span>
+              <Link href="/about" className="group flex items-center gap-2 text-sm text-muted-foreground hover:text-gradient-accent-1 transition-colors">
+                <span className="w-1 h-1 bg-muted group-hover:bg-gradient-accent-1 rounded-full transition-colors"></span>
                 About
               </Link>
-              <Link href="/research" className="group flex items-center gap-2 text-sm text-slate-400 hover:text-blue-400 transition-colors">
-                <span className="w-1 h-1 bg-slate-600 group-hover:bg-blue-400 rounded-full transition-colors"></span>
+              <Link href="/research" className="group flex items-center gap-2 text-sm text-muted-foreground hover:text-gradient-accent-1 transition-colors">
+                <span className="w-1 h-1 bg-muted group-hover:bg-gradient-accent-1 rounded-full transition-colors"></span>
                 Research
               </Link>
-              <Link href="/learn" className="group flex items-center gap-2 text-sm text-slate-400 hover:text-blue-400 transition-colors">
-                <span className="w-1 h-1 bg-slate-600 group-hover:bg-blue-400 rounded-full transition-colors"></span>
+              <Link href="/learn" className="group flex items-center gap-2 text-sm text-muted-foreground hover:text-gradient-accent-1 transition-colors">
+                <span className="w-1 h-1 bg-muted group-hover:bg-gradient-accent-1 rounded-full transition-colors"></span>
                 Learn
               </Link>
             </nav>
@@ -57,15 +55,15 @@ export function Footer() {
 
           {/* Community & Social */}
           <div className="space-y-4">
-            <h3 className="text-sm font-semibold text-white uppercase tracking-wider">Connect</h3>
+            <h3 className="text-sm font-semibold text-foreground uppercase tracking-wider">Connect</h3>
             <div className="flex flex-col gap-3">
               <a
                 href="https://discord.com/invite/6AbXGpKTwN"
-                className="group flex items-center gap-3 text-sm text-slate-400 hover:text-blue-400 transition-all duration-300"
+                className="group flex items-center gap-3 text-sm text-muted-foreground hover:text-gradient-accent-1 transition-all duration-300"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div className="p-2 bg-slate-800/50 group-hover:bg-blue-600/20 rounded-lg transition-all duration-300">
+                <div className="p-2 bg-muted/50 group-hover:bg-gradient-accent-1/20 rounded-lg transition-all duration-300">
                   <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                     <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
                   </svg>
@@ -75,11 +73,11 @@ export function Footer() {
 
               <a
                 href="https://www.youtube.com/channel/UC7XJj9pv_11a11FUxCMz15g"
-                className="group flex items-center gap-3 text-sm text-slate-400 hover:text-red-500 transition-all duration-300"
+                className="group flex items-center gap-3 text-sm text-muted-foreground hover:text-destructive transition-all duration-300"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div className="p-2 bg-slate-800/50 group-hover:bg-red-600/20 rounded-lg transition-all duration-300">
+                <div className="p-2 bg-muted/50 group-hover:bg-destructive/20 rounded-lg transition-all duration-300">
                   <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                     <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                   </svg>
@@ -89,11 +87,11 @@ export function Footer() {
 
               <a
                 href="https://github.com/open-superintelligence-lab"
-                className="group flex items-center gap-3 text-sm text-slate-400 hover:text-purple-400 transition-all duration-300"
+                className="group flex items-center gap-3 text-sm text-muted-foreground hover:text-gradient-accent-2 transition-all duration-300"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div className="p-2 bg-slate-800/50 group-hover:bg-purple-600/20 rounded-lg transition-all duration-300">
+                <div className="p-2 bg-muted/50 group-hover:bg-gradient-accent-2/20 rounded-lg transition-all duration-300">
                   <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                     <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                   </svg>
@@ -105,13 +103,13 @@ export function Footer() {
         </div>
 
         {/* Bottom Bar */}
-        <div className="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4">
-          <p className="text-sm text-slate-500">
-            © 2025 <span className="text-slate-400 font-medium">Open Superintelligence Lab</span>. All rights reserved.
+        <div className="pt-8 border-t border-border/10 flex flex-col md:flex-row justify-between items-center gap-4">
+          <p className="text-sm text-muted-foreground">
+            © 2025 <span className="text-foreground font-medium">Open Superintelligence Lab</span>. All rights reserved.
           </p>
-          <div className="flex items-center gap-3 text-sm text-slate-500">
+          <div className="flex items-center gap-3 text-sm text-muted-foreground">
             <span className="flex items-center gap-2">
-              <svg className="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-4 h-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
               </svg>
diff --git a/components/lesson-page.tsx b/components/lesson-page.tsx
index 8510fcc..e3e981e 100644
--- a/components/lesson-page.tsx
+++ b/components/lesson-page.tsx
@@ -119,10 +119,10 @@ export function LessonPage({ contentPath, prevLink, nextLink, youtubeVideoId }:
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 flex items-center justify-center">
+      <div className="min-h-screen bg-gradient-to-br from-gradient-start via-gradient-mid to-gradient-end flex items-center justify-center">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-400 mx-auto mb-4"></div>
-          <p className="text-slate-400">Loading lesson...</p>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gradient-accent-1 mx-auto mb-4"></div>
+          <p className="text-muted-foreground">Loading lesson...</p>
         </div>
       </div>
     );
@@ -136,15 +136,15 @@ export function LessonPage({ contentPath, prevLink, nextLink, youtubeVideoId }:
       {/* Main Content with Sidebar Offset */}
       <div className="lg:ml-80">
         {/* Hero Section */}
-        <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-          <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 via-purple-600/10 to-blue-600/10"></div>
+        <section className="relative overflow-hidden bg-gradient-to-br from-gradient-start via-gradient-mid to-gradient-end">
+          <div className="absolute inset-0 bg-gradient-to-r from-gradient-accent-1/10 via-gradient-accent-2/10 to-gradient-accent-1/10"></div>
 
           <div className="relative container mx-auto px-6 pt-24 pb-12">
             <div className="max-w-4xl mx-auto">
               {/* Back to Course */}
               <Link
                 href="/learn"
-                className="inline-flex items-center gap-2 text-blue-400 hover:text-blue-300 mb-8 transition-colors"
+                className="inline-flex items-center gap-2 text-gradient-accent-1 hover:text-gradient-accent-2 mb-8 transition-colors"
               >
                 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
@@ -154,20 +154,20 @@ export function LessonPage({ contentPath, prevLink, nextLink, youtubeVideoId }:
 
               <div className="relative">
                 <h1 className="text-4xl md:text-5xl font-bold mb-4 leading-tight">
-                  <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
+                  <span className="bg-gradient-to-r from-gradient-accent-1 via-gradient-accent-2 to-gradient-accent-3 bg-clip-text text-transparent">
                     {heroData?.title || 'Lesson'}
                   </span>
                 </h1>
-                <p className="text-xl text-slate-400 mb-6">
+                <p className="text-xl text-muted-foreground mb-6">
                   {heroData?.subtitle || ''}
                 </p>
 
                 {/* Tags */}
                 {heroData?.tags && heroData.tags.length > 0 && (
-                  <div className="flex items-center gap-3 text-sm text-slate-400">
+                  <div className="flex items-center gap-3 text-sm text-muted-foreground">
                     {heroData.tags.map((tag, index) => (
                       <span key={index} className="flex items-center gap-2">
-                        {index > 0 && <span className="text-slate-600">•</span>}
+                        {index > 0 && <span className="text-muted">•</span>}
                         <span>{tag}</span>
                       </span>
                     ))}
@@ -179,10 +179,10 @@ export function LessonPage({ contentPath, prevLink, nextLink, youtubeVideoId }:
         </section>
 
         {/* Main Content */}
-        <main className="bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 min-h-screen">
+        <main className="bg-gradient-to-br from-gradient-start via-gradient-mid to-gradient-end min-h-screen">
           <div className="container mx-auto px-4 sm:px-6 lg:px-8 pt-8 pb-16">
             <article className="max-w-4xl mx-auto">
-              <div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl shadow-2xl p-8 sm:p-12">
+              <div className="bg-card/50 backdrop-blur-xl border border-border/50 rounded-3xl shadow-2xl p-8 sm:p-12">
                 {youtubeVideoId && (
                   <div className="mb-8">
                     <div className="relative" style={{ paddingTop: '56.25%' }}>
diff --git a/components/markdown-renderer.tsx b/components/markdown-renderer.tsx
index 30b95ab..04ef4bd 100644
--- a/components/markdown-renderer.tsx
+++ b/components/markdown-renderer.tsx
@@ -23,28 +23,28 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
         components={{
           // Custom heading styles
           h1: ({ children }) => (
-            <h1 className="text-4xl font-bold mb-8 mt-12 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent leading-tight">
+            <h1 className="text-4xl font-bold mb-8 mt-12 bg-gradient-to-r from-gradient-accent-1 to-gradient-accent-2 bg-clip-text text-transparent leading-tight">
               {children}
             </h1>
           ),
           h2: ({ children }) => (
-            <h2 className="text-3xl font-semibold mb-6 mt-10 text-gray-100 leading-tight">
+            <h2 className="text-3xl font-semibold mb-6 mt-10 text-foreground leading-tight">
               {children}
             </h2>
           ),
           h3: ({ children }) => (
-            <h3 className="text-2xl font-semibold mb-4 mt-8 text-gray-200 leading-tight">
+            <h3 className="text-2xl font-semibold mb-4 mt-8 text-foreground leading-tight">
               {children}
             </h3>
           ),
           h4: ({ children }) => (
-            <h4 className="text-xl font-semibold mb-3 mt-6 text-gray-300 leading-tight">
+            <h4 className="text-xl font-semibold mb-3 mt-6 text-muted-foreground leading-tight">
               {children}
             </h4>
           ),
           // Custom paragraph styles
           p: ({ children }) => (
-            <p className="text-gray-300 leading-relaxed mb-10 text-lg">
+            <p className="text-muted-foreground leading-relaxed mb-10 text-lg">
               {children}
             </p>
           ),
@@ -52,7 +52,7 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
           a: ({ href, children }) => (
             <a
               href={href}
-              className="text-blue-400 hover:text-blue-300 underline transition-colors"
+              className="text-gradient-accent-1 hover:text-gradient-accent-2 underline transition-colors"
               target={href?.startsWith('http') ? '_blank' : undefined}
               rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
             >
@@ -61,17 +61,17 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
           ),
           // Custom list styles
           ul: ({ children }) => (
-            <ul className="list-disc list-outside mb-10 space-y-4 text-gray-300 text-lg pl-6">
+            <ul className="list-disc list-outside mb-10 space-y-4 text-muted-foreground text-lg pl-6">
               {children}
             </ul>
           ),
           ol: ({ children }) => (
-            <ol className="list-decimal list-outside mb-10 space-y-4 text-gray-300 text-lg pl-6">
+            <ol className="list-decimal list-outside mb-10 space-y-4 text-muted-foreground text-lg pl-6">
               {children}
             </ol>
           ),
           li: ({ children }) => (
-            <li className="text-gray-300 leading-relaxed">
+            <li className="text-muted-foreground leading-relaxed">
               {children}
             </li>
           ),
@@ -80,7 +80,7 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
             const inline = !className;
             return inline ? (
               <code
-                className="bg-slate-800 text-orange-400 px-2 py-1 rounded text-sm font-mono"
+                className="bg-card text-orange-500 px-2 py-1 rounded text-sm font-mono"
                 {...props}
               >
                 {children}
@@ -92,15 +92,15 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
             );
           },
           pre: ({ children }) => (
-            <pre className="bg-slate-900 border border-gray-700 rounded-lg p-6 overflow-x-auto mb-10 text-sm font-mono leading-relaxed text-gray-200">
-              <code className="text-gray-200">
+            <pre className="bg-card border border-border rounded-lg p-6 overflow-x-auto mb-10 text-sm font-mono leading-relaxed text-foreground">
+              <code className="text-foreground">
                 {children}
               </code>
             </pre>
           ),
           // Custom blockquote styles
           blockquote: ({ children }) => (
-            <blockquote className="border-l-4 border-blue-500 pl-6 italic text-gray-400 my-10 bg-slate-800/30 py-4 rounded-r-lg">
+            <blockquote className="border-l-4 border-gradient-accent-1 pl-6 italic text-muted-foreground my-10 bg-card/30 py-4 rounded-r-lg">
               {children}
             </blockquote>
           ),
diff --git a/components/navigation.tsx b/components/navigation.tsx
index 9beaab1..eecc153 100644
--- a/components/navigation.tsx
+++ b/components/navigation.tsx
@@ -1,92 +1,188 @@
 'use client';
 
 import Link from "next/link";
+import { useState, useEffect, useRef } from "react";
+import { OSLLogo } from "./osl-logo";
 
 interface NavigationProps {
   currentPath?: string;
 }
 
 export function Navigation({ }: NavigationProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        menuRef.current &&
+        buttonRef.current &&
+        !menuRef.current.contains(event.target as Node) &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setIsMenuOpen(false);
+      }
+    };
+
+    if (isMenuOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isMenuOpen]);
+
+  // Close menu on escape key
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsMenuOpen(false);
+      }
+    };
+
+    if (isMenuOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isMenuOpen]);
+
   return (
     <header className="fixed top-0 left-0 right-0 z-50">
       {/* Glassmorphism Navigation Bar */}
-      <div className="border-b border-white/10 bg-slate-900/80 backdrop-blur-xl">
-        <div className="container mx-auto px-6 py-4">
-          <nav className="flex justify-between items-center">
-            {/* Logo */}
-            <Link href="/" className="group flex items-center gap-3 hover:scale-105 transition-all duration-300">
-              <div className="relative">
-                {/* Animated gradient border */}
-                <div className="absolute -inset-0.5 bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-600 rounded-2xl opacity-75 group-hover:opacity-100 blur group-hover:blur-md transition-all duration-300 animate-pulse"></div>
-
-                {/* Logo container */}
-                <div className="relative w-11 h-11 bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl flex items-center justify-center shadow-2xl">
-                  <span className="text-2xl filter drop-shadow-lg">🔮</span>
-                </div>
-              </div>
-
-              {/* Brand Name */}
-              <div className="hidden md:flex flex-col">
-                <span className="text-sm font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
-                  Open Superintelligence
-                </span>
-                <span className="text-xs text-slate-400">Building the Future</span>
-              </div>
-            </Link>
-
-            {/* Navigation Links */}
-            <div className="flex gap-1 items-center">
-              <Link
-                href="/"
-                className="group relative px-4 py-2 text-sm font-medium text-slate-300 hover:text-white transition-all duration-300"
-              >
-                <span className="relative z-10">Home</span>
-                <div className="absolute inset-0 bg-gradient-to-r from-blue-600/0 via-purple-600/0 to-cyan-600/0 group-hover:from-blue-600/10 group-hover:via-purple-600/10 group-hover:to-cyan-600/10 rounded-lg transition-all duration-300"></div>
-              </Link>
+      <div className="border-b border-border/50 bg-card/98 backdrop-blur-xl">
+        <div className="container mx-auto px-6 py-2">
+          <nav className="grid grid-cols-3 items-center">
+            {/* Left spacer to center the logo */}
+            <div></div>
 
-              <Link
-                href="/learn"
-                className="group relative px-4 py-2 text-sm font-medium text-slate-300 hover:text-white transition-all duration-300"
-              >
-                <span className="relative z-10">Learn</span>
-                <div className="absolute inset-0 bg-gradient-to-r from-blue-600/0 via-purple-600/0 to-cyan-600/0 group-hover:from-blue-600/10 group-hover:via-purple-600/10 group-hover:to-cyan-600/10 rounded-lg transition-all duration-300"></div>
-              </Link>
-
-              {/* Social Links with Icons */}
-              <a
-                href="https://discord.com/invite/6AbXGpKTwN"
-                className="group relative px-4 py-2 text-sm font-medium text-slate-300 hover:text-blue-400 transition-all duration-300"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <span className="relative z-10 flex items-center gap-2">
-                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
-                  </svg>
-                  <span className="hidden sm:inline">Discord</span>
-                </span>
-                <div className="absolute inset-0 bg-blue-600/0 group-hover:bg-blue-600/10 rounded-lg transition-all duration-300"></div>
-              </a>
-
-              <a
-                href="https://www.youtube.com/channel/UC7XJj9pv_11a11FUxCMz15g"
-                className="group relative px-4 py-2 text-sm font-medium text-slate-300 hover:text-red-500 transition-all duration-300"
-                target="_blank"
-                rel="noopener noreferrer"
+            {/* Logo - Centered */}
+            <div className="flex justify-center">
+              <OSLLogo />
+            </div>
+
+            {/* Hamburger Menu Button - Right aligned */}
+            <div className="flex justify-end relative">
+              <button
+                ref={buttonRef}
+                onClick={() => setIsMenuOpen(!isMenuOpen)}
+                className="relative p-2 text-foreground/80 hover:text-foreground transition-colors rounded-lg hover:bg-muted/50"
+                aria-label="Toggle navigation menu"
+                aria-expanded={isMenuOpen}
               >
-                <span className="relative z-10 flex items-center gap-2">
-                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
-                  </svg>
-                  <span className="hidden sm:inline">YouTube</span>
-                </span>
-                <div className="absolute inset-0 bg-red-600/0 group-hover:bg-red-600/10 rounded-lg transition-all duration-300"></div>
-              </a>
+                <svg
+                  className="w-6 h-6"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  strokeWidth={2}
+                >
+                  {isMenuOpen ? (
+                    // X icon when open
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  ) : (
+                    // Hamburger icon when closed
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M4 6h16M4 12h16M4 18h16"
+                    />
+                  )}
+                </svg>
+              </button>
+
+              {/* Dropdown Menu */}
+              {isMenuOpen && (
+                <>
+                  {/* Overlay */}
+                  <div
+                    className="fixed inset-0 z-40"
+                    onClick={() => setIsMenuOpen(false)}
+                  />
+                  {/* Menu */}
+                  <div
+                    ref={menuRef}
+                    className="absolute right-0 top-full mt-8 w-56 bg-card/98 backdrop-blur-xl border border-border/50 rounded-lg shadow-xl overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className="p-2">
+                      {/* Home */}
+                      <Link
+                        href="/"
+                        onClick={() => setIsMenuOpen(false)}
+                        className="group relative flex items-center gap-3 px-4 py-3 text-sm font-medium text-foreground/80 hover:text-foreground rounded-md transition-all duration-200 hover:bg-gradient-to-r hover:from-gradient-accent-1/10 hover:via-gradient-accent-2/10 hover:to-gradient-accent-3/10"
+                      >
+                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                        </svg>
+                        <span>Home</span>
+                      </Link>
+
+                      {/* Learn */}
+                      <Link
+                        href="/learn"
+                        onClick={() => setIsMenuOpen(false)}
+                        className="group relative flex items-center gap-3 px-4 py-3 text-sm font-medium text-foreground/80 hover:text-foreground rounded-md transition-all duration-200 hover:bg-gradient-to-r hover:from-gradient-accent-1/10 hover:via-gradient-accent-2/10 hover:to-gradient-accent-3/10"
+                      >
+                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                        </svg>
+                        <span>Learn</span>
+                      </Link>
+
+                      {/* Divider */}
+                      <div className="my-2 border-t border-border/50"></div>
+
+                      {/* Discord */}
+                      <a
+                        href="https://discord.com/invite/6AbXGpKTwN"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={() => setIsMenuOpen(false)}
+                        className="group relative flex items-center gap-3 px-4 py-3 text-sm font-medium text-foreground/80 hover:text-foreground rounded-md transition-all duration-200 hover:bg-gradient-to-r hover:from-gradient-accent-1/10 hover:via-gradient-accent-2/10 hover:to-gradient-accent-3/10"
+                      >
+                        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                          <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
+                        </svg>
+                        <span>Discord</span>
+                        <svg className="w-4 h-4 ml-auto opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                        </svg>
+                      </a>
+
+                      {/* YouTube */}
+                      <a
+                        href="https://www.youtube.com/channel/UC7XJj9pv_11a11FUxCMz15g"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={() => setIsMenuOpen(false)}
+                        className="group relative flex items-center gap-3 px-4 py-3 text-sm font-medium text-foreground/80 hover:text-foreground rounded-md transition-all duration-200 hover:bg-destructive/10"
+                      >
+                        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                          <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+                        </svg>
+                        <span>YouTube</span>
+                        <svg className="w-4 h-4 ml-auto opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                        </svg>
+                      </a>
+                    </div>
+                  </div>
+                </>
+              )}
             </div>
           </nav>
         </div>
       </div>
     </header>
   );
-}
-
+}
\ No newline at end of file
diff --git a/components/osl-logo.tsx b/components/osl-logo.tsx
new file mode 100644
index 0000000..2d21277
--- /dev/null
+++ b/components/osl-logo.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function OSLLogo() {
+  const [isHovering, setIsHovering] = useState(false);
+
+  return (
+    <Link 
+      href="/" 
+      className="group relative flex items-center justify-center py-1 px-6 transition-all duration-500"
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+    >
+      {/* Dynamic Background Glow */}
+      <div className={`absolute inset-0 bg-gradient-to-r from-gradient-accent-1/20 via-gradient-accent-2/20 to-gradient-accent-3/20 blur-2xl transition-opacity duration-1000 rounded-full ${isHovering ? 'opacity-100' : 'opacity-0'}`} />
+      
+      {/* The OSL Monogram */}
+      <div className="relative flex items-center">
+        <span 
+          className="text-5xl md:text-6xl font-black italic tracking-tighter transition-all duration-700 ease-out transform group-hover:scale-105"
+          style={{
+            background: 'linear-gradient(135deg, hsl(var(--gradient-accent-1)) 0%, hsl(var(--gradient-accent-2)) 50%, hsl(var(--gradient-accent-3)) 100%)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            filter: isHovering 
+              ? 'drop-shadow(0 0 25px hsl(var(--gradient-accent-2) / 0.6)) drop-shadow(0 0 2px hsl(var(--foreground) / 0.2))' 
+              : 'drop-shadow(0 0 15px hsl(var(--gradient-accent-2) / 0.3))',
+            textShadow: isHovering ? '0 0 1px rgba(255,255,255,0.3)' : 'none'
+          }}
+        >
+          OSL
+        </span>
+        
+        {/* Sleek animated accent line */}
+        <div 
+          className={`absolute -bottom-2 left-1/2 -translate-x-1/2 h-[3px] bg-gradient-to-r from-transparent via-gradient-accent-2 to-transparent transition-all duration-700 ease-in-out rounded-full ${isHovering ? 'w-full opacity-100' : 'w-0 opacity-0'}`} 
+        />
+      </div>
+    </Link>
+  );
+}
diff --git a/components/palette-provider.tsx b/components/palette-provider.tsx
new file mode 100644
index 0000000..31f1a63
--- /dev/null
+++ b/components/palette-provider.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { useEffect } from 'react';
+import { applyPalette } from '@/lib/palettes/loader';
+
+const STORAGE_KEY = 'palette-preference';
+
+export function PaletteProvider() {
+  useEffect(() => {
+    // Check for saved preference first, otherwise use default
+    const saved = localStorage.getItem(STORAGE_KEY);
+    const paletteName = saved || 'default';
+    applyPalette(paletteName).catch(console.error);
+  }, []);
+
+  return null;
+}
diff --git a/components/palette-switcher.tsx b/components/palette-switcher.tsx
new file mode 100644
index 0000000..6b46db0
--- /dev/null
+++ b/components/palette-switcher.tsx
@@ -0,0 +1,121 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { applyPalette } from '@/lib/palettes/loader';
+
+const AVAILABLE_PALETTES = [
+  { name: 'default', label: 'Default (Dark)' },
+  { name: 'ink-wash', label: 'Ink Wash (Light)' },
+  { name: 'vaporwave', label: 'Vaporwave (Vibrant)' },
+  { name: 'slatewave', label: 'Slatewave (Original)' },
+  { name: 'emerald-odyssey', label: 'Emerald Odyssey' },
+  { name: 'harvest-moon', label: 'Harvest Moon' },
+  { name: 'deep-ocean', label: 'Deep Ocean (Dark)' },
+  { name: 'amber-glow', label: 'Amber Glow (Dark)' },
+  { name: 'terminal-green', label: 'Terminal Green (Dark)' },
+];
+
+const STORAGE_KEY = 'palette-preference';
+
+export function PaletteSwitcher() {
+  const [currentPalette, setCurrentPalette] = useState<string>('default');
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    // Load saved preference or use default
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved && AVAILABLE_PALETTES.some(p => p.name === saved)) {
+      setCurrentPalette(saved);
+      applyPalette(saved).catch(console.error);
+    }
+  }, []);
+
+  const handlePaletteChange = async (paletteName: string) => {
+    try {
+      await applyPalette(paletteName);
+      setCurrentPalette(paletteName);
+      localStorage.setItem(STORAGE_KEY, paletteName);
+      setIsOpen(false);
+    } catch (error) {
+      console.error('Failed to apply palette:', error);
+    }
+  };
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50">
+      <div className="relative">
+        {/* Dropdown Menu */}
+        {isOpen && (
+          <>
+            <div
+              className="fixed inset-0 z-40"
+              onClick={() => setIsOpen(false)}
+            />
+            <div 
+              className="absolute bottom-full right-0 mb-2 w-60 bg-card border border-border rounded-lg shadow-xl overflow-hidden z-50 max-h-[500px] overflow-y-auto"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="p-2">
+                {AVAILABLE_PALETTES.map((palette) => (
+                  <button
+                    key={palette.name}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handlePaletteChange(palette.name);
+                    }}
+                    className={`w-full text-left px-3 py-2 text-sm rounded-md transition-colors ${
+                      currentPalette === palette.name
+                        ? 'bg-accent text-accent-foreground'
+                        : 'text-foreground hover:bg-muted'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <span>{palette.label}</span>
+                      {currentPalette === palette.name && (
+                        <svg
+                          className="w-4 h-4"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M5 13l4 4L19 7"
+                          />
+                        </svg>
+                      )}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Toggle Button */}
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="group relative w-12 h-12 bg-gradient-to-r from-gradient-accent-1 via-gradient-accent-2 to-gradient-accent-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-110 flex items-center justify-center"
+          aria-label="Switch color palette"
+          title="Switch color palette"
+        >
+          <svg
+            className="w-6 h-6 text-primary-foreground"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/vaporwave-grid.tsx b/components/vaporwave-grid.tsx
new file mode 100644
index 0000000..e2bbf66
--- /dev/null
+++ b/components/vaporwave-grid.tsx
@@ -0,0 +1,391 @@
+'use client';
+
+import React, { useRef, useEffect } from "react";
+
+export default function VaporwaveGrid() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d")!;
+    if (!ctx) return;
+
+    let time = 0;
+    let rafId = 0;
+    let waveStartTime = -Infinity;
+    let waveTimerId = 0;
+    let resizeObserver: ResizeObserver | null = null;
+
+    // Function to get color from CSS variable
+    const getCSSColor = (varName: string, fallback: string) => {
+      if (typeof window === 'undefined') return fallback;
+      const root = getComputedStyle(document.documentElement);
+      const hslValue = root.getPropertyValue(varName).trim();
+      if (!hslValue) return fallback;
+      
+      // Convert HSL "H S% L%" to hex
+      const parts = hslValue.split(/\s+/);
+      const h = parseFloat(parts[0]) / 360;
+      const s = parseFloat(parts[1]) / 100;
+      const l = parseFloat(parts[2]) / 100;
+      
+      let r: number, g: number, b: number;
+      if (s === 0) {
+        r = g = b = l;
+      } else {
+        const hue2rgb = (p: number, q: number, t: number) => {
+          if (t < 0) t += 1;
+          if (t > 1) t -= 1;
+          if (t < 1/6) return p + (q - p) * 6 * t;
+          if (t < 1/2) return q;
+          if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+          return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1/3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1/3);
+      }
+      
+      const toHex = (n: number) => Math.round(n * 255).toString(16).padStart(2, '0');
+      return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    };
+
+    // Get colors from palette (cache them, update every 2 seconds)
+    const colorCache = {
+      SKY_TOP: "#A9DCFF",
+      SKY_MID: "#CFC5FF",
+      SKY_BOT: "#C0AAFF",
+      GRID_COLOR: "255,255,255",
+      SUN_COLOR: "255,196,138"
+    };
+    
+    let lastColorUpdate = 0;
+    const updateColors = () => {
+      colorCache.SKY_TOP = getCSSColor('--gradient-start', '#A9DCFF');
+      colorCache.SKY_MID = getCSSColor('--gradient-mid', '#CFC5FF');
+      colorCache.SKY_BOT = getCSSColor('--gradient-end', '#C0AAFF');
+      
+          // Get foreground color for grid
+          const fgHsl = getComputedStyle(document.documentElement).getPropertyValue('--foreground').trim();
+      if (fgHsl) {
+        const parts = fgHsl.split(/\s+/);
+        const h = parseInt(parts[0]) / 360;
+        const s = parseInt(parts[1]) / 100;
+        const l = parseInt(parts[2]) / 100;
+        
+        let r: number, g: number, b: number;
+        if (s === 0) {
+          r = g = b = l;
+        } else {
+          const hue2rgb = (p: number, q: number, t: number) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1/6) return p + (q - p) * 6 * t;
+            if (t < 1/2) return q;
+            if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+            return p;
+          };
+          const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+          const p = 2 * l - q;
+          r = hue2rgb(p, q, h + 1/3);
+          g = hue2rgb(p, q, h);
+          b = hue2rgb(p, q, h - 1/3);
+        }
+        colorCache.GRID_COLOR = `${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)}`;
+      }
+      
+      // Get accent color for sun
+      const accentHsl = getComputedStyle(document.documentElement).getPropertyValue('--gradient-accent-2').trim();
+      if (accentHsl) {
+        const parts = accentHsl.split(/\s+/);
+        const h = parseInt(parts[0]) / 360;
+        const s = parseInt(parts[1]) / 100;
+        const l = parseInt(parts[2]) / 100;
+        
+        let r: number, g: number, b: number;
+        if (s === 0) {
+          r = g = b = l;
+        } else {
+          const hue2rgb = (p: number, q: number, t: number) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1/6) return p + (q - p) * 6 * t;
+            if (t < 1/2) return q;
+            if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+            return p;
+          };
+          const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+          const p = 2 * l - q;
+          r = hue2rgb(p, q, h + 1/3);
+          g = hue2rgb(p, q, h);
+          b = hue2rgb(p, q, h - 1/3);
+        }
+        colorCache.SUN_COLOR = `${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)}`;
+      }
+    };
+
+    // ----- Layout & palette -----
+    const HORIZON_RATIO = 0.55;
+
+    // Grid
+    const NUM_H_LINES = 18;
+    const NUM_V_LINES = 12;
+    const V_MARGIN = 0.18;
+    const EASE_POWER = 2.15;
+    const BASE_ALPHA_BOTTOM = 0.22;
+    const BASE_ALPHA_HORIZON = 0.01;
+
+    // Shimmer
+    const WAVE_DURATION = 5;
+    const WAVE_INTERVAL_MS = 9000;
+    const WAVE_BAND_WIDTH_T = 0.12;
+    const WAVE_AMPLITUDE = 10;
+    const WAVE_FREQ = 0.018;
+    const WAVE_TIME_FREQ = 2.6;
+
+    const SUN_RADIUS = 78;
+    const SUN_POS = { xPct: 0.80, yPct: 0.24 };
+
+    // ----- setup -----
+    const measure = () => {
+      const parent = canvas.parentElement;
+      const rect = parent ? parent.getBoundingClientRect() : canvas.getBoundingClientRect();
+      const dpr = window.devicePixelRatio || 1;
+      const w = Math.max(1, Math.floor(rect.width));
+      const h = Math.max(1, Math.floor(rect.height));
+      canvas.width = Math.floor(w * dpr);
+      canvas.height = Math.floor(h * dpr);
+      canvas.style.width = `${w}px`;
+      canvas.style.height = `${h}px`;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    };
+
+    const triggerWave = () => {
+      waveStartTime = time;
+      waveTimerId = window.setTimeout(triggerWave, WAVE_INTERVAL_MS);
+    };
+
+    function drawSky(w: number, canvasHeight: number) {
+      const g = ctx.createLinearGradient(0, 0, 0, canvasHeight);
+      g.addColorStop(0, colorCache.SKY_TOP);
+      g.addColorStop(0.55, colorCache.SKY_MID);
+      g.addColorStop(1, colorCache.SKY_BOT);
+      ctx.fillStyle = g;
+      ctx.fillRect(0, 0, w, canvasHeight);
+    }
+
+    function drawSunTopToBottom(cx: number, cy: number, r: number) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(cx, cy, r, 0, Math.PI * 2);
+      ctx.clip();
+      const lg = ctx.createLinearGradient(cx, cy - r, cx, cy + r);
+      lg.addColorStop(0, `rgba(${colorCache.SUN_COLOR},0.95)`);
+      lg.addColorStop(1, `rgba(${colorCache.SUN_COLOR},0)`);
+      ctx.fillStyle = lg;
+      ctx.fillRect(cx - r, cy - r, r * 2, r * 2);
+      ctx.restore();
+
+      const halo = ctx.createRadialGradient(cx, cy, r * 0.7, cx, cy, r * 1.6);
+      halo.addColorStop(0, `rgba(${colorCache.SUN_COLOR},0.22)`);
+      halo.addColorStop(1, `rgba(${colorCache.SUN_COLOR},0)`);
+      ctx.fillStyle = halo;
+      ctx.beginPath();
+      ctx.arc(cx, cy, r * 1.6, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    function drawSunrise(horizon: number, w: number, h: number) {
+      // Main gradient - extended and more gradual
+      let g = ctx.createLinearGradient(0, horizon - 180, 0, horizon + 220);
+      g.addColorStop(0.00, `rgba(${colorCache.SUN_COLOR}, 0.00)`);
+      g.addColorStop(0.20, `rgba(${colorCache.SUN_COLOR}, 0.28)`);
+      g.addColorStop(0.35, `rgba(${colorCache.SUN_COLOR}, 0.45)`);
+      g.addColorStop(0.50, `rgba(${colorCache.SUN_COLOR}, 0.55)`);
+      g.addColorStop(0.65, `rgba(${colorCache.SUN_COLOR}, 0.45)`);
+      g.addColorStop(0.80, `rgba(${colorCache.SUN_COLOR}, 0.28)`);
+      g.addColorStop(1.00, `rgba(${colorCache.SUN_COLOR}, 0.00)`);
+      ctx.fillStyle = g;
+      ctx.fillRect(0, horizon - 180, w, 400);
+
+      ctx.save();
+      ctx.globalCompositeOperation = "lighter";
+      // Secondary gradient - more extended
+      g = ctx.createLinearGradient(0, horizon - 120, 0, horizon + 140);
+      g.addColorStop(0.00, `rgba(${colorCache.SUN_COLOR}, 0.00)`);
+      g.addColorStop(0.35, `rgba(${colorCache.SUN_COLOR}, 0.12)`);
+      g.addColorStop(0.50, `rgba(${colorCache.SUN_COLOR}, 0.16)`);
+      g.addColorStop(0.65, `rgba(${colorCache.SUN_COLOR}, 0.12)`);
+      g.addColorStop(1.00, `rgba(${colorCache.SUN_COLOR}, 0.00)`);
+      ctx.fillStyle = g;
+      ctx.fillRect(0, horizon - 120, w, 260);
+      ctx.restore();
+
+      // Horizon line glow
+      g = ctx.createLinearGradient(0, horizon - 8, 0, horizon + 8);
+      g.addColorStop(0, `rgba(${colorCache.GRID_COLOR},0.00)`);
+      g.addColorStop(0.5, `rgba(${colorCache.GRID_COLOR},0.10)`);
+      g.addColorStop(1, `rgba(${colorCache.GRID_COLOR},0.00)`);
+      ctx.fillStyle = g;
+      ctx.fillRect(0, horizon - 8, w, 16);
+
+      // Top fade - more extended
+      g = ctx.createLinearGradient(0, horizon - 240, 0, horizon);
+      g.addColorStop(0, `rgba(${colorCache.SUN_COLOR}, 0.00)`);
+      g.addColorStop(0.6, `rgba(${colorCache.SUN_COLOR}, 0.06)`);
+      g.addColorStop(1, `rgba(${colorCache.SUN_COLOR}, 0.10)`);
+      ctx.fillStyle = g;
+      ctx.fillRect(0, horizon - 240, w, 240);
+
+      // Bottom fade - more extended
+      g = ctx.createLinearGradient(0, horizon, 0, horizon + 100);
+      g.addColorStop(0, `rgba(${colorCache.SUN_COLOR}, 0.18)`);
+      g.addColorStop(0.5, `rgba(${colorCache.SUN_COLOR}, 0.08)`);
+      g.addColorStop(1, `rgba(${colorCache.SUN_COLOR}, 0.00)`);
+      ctx.fillStyle = g;
+      ctx.fillRect(0, horizon, w, 100);
+    }
+
+    const draw = () => {
+      try {
+        if (!canvas || !ctx || canvas.width === 0 || canvas.height === 0) {
+          rafId = requestAnimationFrame(draw);
+          return;
+        }
+        
+        // Update colors every 2 seconds
+        const now = Date.now();
+        if (now - lastColorUpdate > 2000) {
+          try {
+            updateColors();
+            lastColorUpdate = now;
+          } catch (err) {
+            console.error('Color update failed:', err);
+          }
+        }
+
+        time += 1 / 60;
+        const dpr = window.devicePixelRatio || 1;
+        const w = canvas.width / dpr;
+        const h = canvas.height / dpr;
+        
+        if (w === 0 || h === 0) {
+          rafId = requestAnimationFrame(draw);
+          return;
+        }
+        
+        const horizon = h * HORIZON_RATIO;
+
+        // 1) Sky
+        drawSky(w, h);
+
+        // 2) Sun + smooth blob
+        drawSunTopToBottom(w * SUN_POS.xPct, h * SUN_POS.yPct, SUN_RADIUS);
+
+        // 3) Warm sunrise (colored)
+        drawSunrise(horizon, w, h);
+
+      // 4) Grid with shimmer
+      const tSince = time - waveStartTime;
+      const active = tSince >= 0 && tSince < WAVE_DURATION;
+      const waveFrontT = active ? 1 - tSince / WAVE_DURATION : -1;
+
+      // horizontals
+      for (let i = 0; i < NUM_H_LINES; i++) {
+        const t = i / (NUM_H_LINES - 1);
+        const eased = Math.pow(t, EASE_POWER);
+        const baseY = horizon + eased * (h - horizon);
+        const alpha = BASE_ALPHA_HORIZON + (BASE_ALPHA_BOTTOM - BASE_ALPHA_HORIZON) * t;
+
+        ctx.strokeStyle = `rgba(${colorCache.GRID_COLOR},${alpha})`;
+        ctx.beginPath();
+        const step = 5;
+        for (let x = 0; x <= w; x += step) {
+          let y = baseY;
+          if (active) {
+            const dist = Math.abs(t - waveFrontT);
+            const influence = Math.max(0, 1 - dist / WAVE_BAND_WIDTH_T);
+            if (influence > 0) {
+              const depthScale = t;
+              const local = Math.sin(x * WAVE_FREQ + time * WAVE_TIME_FREQ);
+              y += local * WAVE_AMPLITUDE * influence * depthScale;
+            }
+          }
+          if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+        }
+        ctx.stroke();
+      }
+
+      // verticals
+      for (let i = 0; i <= NUM_V_LINES; i++) {
+        const p = i / NUM_V_LINES;
+        const xTop = w * (V_MARGIN + p * (1 - 2 * V_MARGIN));
+        const vanishingX = w / 2;
+        const xBottom = vanishingX + (xTop - vanishingX) * 3.2;
+
+        const alpha = BASE_ALPHA_HORIZON + (BASE_ALPHA_BOTTOM - BASE_ALPHA_HORIZON) * 0.75;
+        ctx.strokeStyle = `rgba(${colorCache.GRID_COLOR},${alpha})`;
+        ctx.beginPath();
+        ctx.moveTo(xTop, horizon);
+        ctx.lineTo(xBottom, h);
+        ctx.stroke();
+      }
+
+        rafId = requestAnimationFrame(draw);
+      } catch (err) {
+        console.error('Draw error:', err);
+        rafId = requestAnimationFrame(draw); // Keep animating even if there's an error
+      }
+    };
+
+    // Set up listeners
+    const onWindowResize = () => measure();
+    window.addEventListener("resize", onWindowResize);
+
+    // Use ResizeObserver to react to container size changes
+    if (typeof ResizeObserver !== "undefined") {
+      const parent = canvas.parentElement || canvas;
+      resizeObserver = new ResizeObserver(() => {
+        measure();
+      });
+      resizeObserver.observe(parent);
+    }
+
+    // Initial setup
+    updateColors();
+    lastColorUpdate = Date.now();
+    
+    // Wait for browser layout before measuring
+    requestAnimationFrame(() => {
+      measure();
+      
+      // Draw initial frame
+      if (canvas.width > 0 && canvas.height > 0) {
+        const dpr = window.devicePixelRatio || 1;
+        const w = canvas.width / dpr;
+        const h = canvas.height / dpr;
+        drawSky(w, h);
+      }
+      
+      // Start animation loop
+      draw();
+    });
+    
+    waveTimerId = window.setTimeout(() => {
+      waveStartTime = time;
+      triggerWave();
+    }, 800);
+
+    return () => {
+      window.removeEventListener("resize", onWindowResize);
+      if (resizeObserver) resizeObserver.disconnect();
+      cancelAnimationFrame(rafId);
+      clearTimeout(waveTimerId);
+    };
+  }, []);
+
+  return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full pointer-events-none z-0" style={{ display: 'block' }} />;
+}
diff --git a/lib/palettes/loader.ts b/lib/palettes/loader.ts
new file mode 100644
index 0000000..9a6c21a
--- /dev/null
+++ b/lib/palettes/loader.ts
@@ -0,0 +1,90 @@
+'use client';
+
+import { generateCssVars, type Palette } from './utils';
+
+/**
+ * Get the palette name from environment variable or default to 'default'
+ */
+export function getPaletteName(): string {
+  // For client-side, we can't access process.env directly in browser
+  // We'll use a data attribute or script tag approach
+  if (typeof window !== 'undefined') {
+    // Try to get from a script tag or meta tag
+    const paletteScript = document.getElementById('palette-config');
+    if (paletteScript && paletteScript.textContent) {
+      try {
+        const config = JSON.parse(paletteScript.textContent);
+        return config.palette || 'default';
+      } catch (e) {
+        console.warn('Failed to parse palette config', e);
+      }
+    }
+  }
+  
+  // Server-side or fallback - use NEXT_PUBLIC_ prefix for client access
+  if (typeof process !== 'undefined' && process.env) {
+    return process.env.NEXT_PUBLIC_PALETTE || process.env.PALETTE || 'default';
+  }
+  return 'default';
+}
+
+/**
+ * Load palette from JSON file at runtime
+ */
+export async function loadPaletteClient(name: string): Promise<Palette> {
+  try {
+    const response = await fetch(`/palettes/${name}.json`);
+    if (!response.ok) {
+      throw new Error(`Failed to load palette: ${name}`);
+    }
+    return await response.json();
+  } catch (error) {
+    console.warn(`Failed to load palette "${name}", falling back to default`, error);
+    // Try to load default
+    try {
+      const response = await fetch('/palettes/default.json');
+      return await response.json();
+    } catch (defaultError) {
+      console.error('Failed to load default palette', defaultError);
+      // Return minimal fallback
+      return {
+        background: '#FFFFFF',
+        foreground: '#000000',
+      };
+    }
+  }
+}
+
+/**
+ * Inject CSS variables into the document root
+ */
+export function injectCssVars(cssVars: Record<string, string>) {
+  if (typeof document === 'undefined') return;
+  
+  const root = document.documentElement;
+  
+  for (const [key, value] of Object.entries(cssVars)) {
+    root.style.setProperty(key, value);
+  }
+}
+
+/**
+ * Apply palette by loading it and injecting CSS variables
+ */
+export async function applyPalette(paletteName?: string) {
+  const name = paletteName || getPaletteName();
+  const palette = await loadPaletteClient(name);
+  const cssVars = generateCssVars(palette);
+  injectCssVars(cssVars);
+  return { name, palette, cssVars };
+}
+
+/**
+ * Initialize palette on page load
+ */
+export function initPalette() {
+  if (typeof window === 'undefined') return;
+  
+  // Apply palette immediately
+  applyPalette().catch(console.error);
+}
diff --git a/lib/palettes/utils.ts b/lib/palettes/utils.ts
new file mode 100644
index 0000000..0a8d39d
--- /dev/null
+++ b/lib/palettes/utils.ts
@@ -0,0 +1,69 @@
+export interface Palette {
+  [key: string]: string;
+}
+
+/**
+ * Convert hex color to HSL format (without hsl() wrapper)
+ * Returns format: "H S% L%" (e.g., "240 10% 3.9%")
+ */
+export function hexToHsl(hex: string): string {
+  // Remove # if present
+  const cleanHex = hex.replace('#', '');
+  
+  // Parse hex values
+  const r = parseInt(cleanHex.substring(0, 2), 16) / 255;
+  const g = parseInt(cleanHex.substring(2, 4), 16) / 255;
+  const b = parseInt(cleanHex.substring(4, 6), 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+
+  h = Math.round(h * 360);
+  s = Math.round(s * 1000) / 10;
+  const lightness = Math.round(l * 1000) / 10;
+
+  return `${h} ${s}% ${lightness}%`;
+}
+
+/**
+ * Generate CSS variable object from palette
+ * Converts hex colors to HSL format for CSS variables
+ */
+export function generateCssVars(palette: Palette): Record<string, string> {
+  const cssVars: Record<string, string> = {};
+  
+  for (const [key, value] of Object.entries(palette)) {
+    // Convert CSS variable names (kebab-case to --var-name)
+    const cssVarName = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+    
+    // Handle alpha values and other non-hex values (like radius)
+    if (key.includes('alpha') || key === 'radius' || !value.startsWith('#')) {
+      cssVars[cssVarName] = value;
+    } else {
+      cssVars[cssVarName] = hexToHsl(value);
+    }
+  }
+  
+  return cssVars;
+}
+
diff --git a/lib/themes.ts b/lib/themes.ts
new file mode 100644
index 0000000..6d011f5
--- /dev/null
+++ b/lib/themes.ts
@@ -0,0 +1,169 @@
+export interface Theme {
+    name: string
+    label: string
+    cssVars: {
+        light: Record<string, string>
+        dark: Record<string, string>
+    }
+}
+
+export const themes: Theme[] = [
+    {
+        name: "zinc",
+        label: "Zinc",
+        cssVars: {
+            light: {
+                "--background": "0 0% 100%",
+                "--foreground": "240 10% 3.9%",
+                "--card": "0 0% 100%",
+                "--card-foreground": "240 10% 3.9%",
+                "--popover": "0 0% 100%",
+                "--popover-foreground": "240 10% 3.9%",
+                "--primary": "240 5.9% 10%",
+                "--primary-foreground": "0 0% 98%",
+                "--secondary": "240 4.8% 95.9%",
+                "--secondary-foreground": "240 5.9% 10%",
+                "--muted": "240 4.8% 95.9%",
+                "--muted-foreground": "240 3.8% 46.1%",
+                "--accent": "240 4.8% 95.9%",
+                "--accent-foreground": "240 5.9% 10%",
+                "--destructive": "0 84.2% 60.2%",
+                "--destructive-foreground": "0 0% 98%",
+                "--border": "240 5.9% 90%",
+                "--input": "240 5.9% 90%",
+                "--ring": "240 10% 3.9%",
+                "--radius": "0.5rem",
+            },
+            dark: {
+                "--background": "240 10% 3.9%",
+                "--foreground": "0 0% 98%",
+                "--card": "240 10% 3.9%",
+                "--card-foreground": "0 0% 98%",
+                "--popover": "240 10% 3.9%",
+                "--popover-foreground": "0 0% 98%",
+                "--primary": "0 0% 98%",
+                "--primary-foreground": "240 5.9% 10%",
+                "--secondary": "240 3.7% 15.9%",
+                "--secondary-foreground": "0 0% 98%",
+                "--muted": "240 3.7% 15.9%",
+                "--muted-foreground": "240 5% 64.9%",
+                "--accent": "240 3.7% 15.9%",
+                "--accent-foreground": "0 0% 98%",
+                "--destructive": "0 62.8% 30.6%",
+                "--destructive-foreground": "0 0% 98%",
+                "--border": "240 3.7% 15.9%",
+                "--input": "240 3.7% 15.9%",
+                "--ring": "240 4.9% 83.9%",
+            },
+        },
+    },
+    {
+        name: "ocean",
+        label: "Ocean",
+        cssVars: {
+            light: {
+                "--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": "221.2 83.2% 53.3%",
+                "--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%",
+                "--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": "221.2 83.2% 53.3%",
+                "--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": "217.2 91.2% 59.8%",
+                "--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": "224.3 76.3% 48%",
+            },
+        },
+    },
+    {
+        name: "midnight",
+        label: "Midnight",
+        cssVars: {
+            light: {
+                "--background": "0 0% 100%",
+                "--foreground": "224 71.4% 4.1%",
+                "--card": "0 0% 100%",
+                "--card-foreground": "224 71.4% 4.1%",
+                "--popover": "0 0% 100%",
+                "--popover-foreground": "224 71.4% 4.1%",
+                "--primary": "262.1 83.3% 57.8%",
+                "--primary-foreground": "210 20% 98%",
+                "--secondary": "220 14.3% 95.9%",
+                "--secondary-foreground": "220.9 39.3% 11%",
+                "--muted": "220 14.3% 95.9%",
+                "--muted-foreground": "220 8.9% 46.1%",
+                "--accent": "220 14.3% 95.9%",
+                "--accent-foreground": "220.9 39.3% 11%",
+                "--destructive": "0 84.2% 60.2%",
+                "--destructive-foreground": "210 20% 98%",
+                "--border": "220 13% 91%",
+                "--input": "220 13% 91%",
+                "--ring": "262.1 83.3% 57.8%",
+                "--radius": "0.5rem",
+            },
+            dark: {
+                "--background": "224 71.4% 4.1%",
+                "--foreground": "210 20% 98%",
+                "--card": "224 71.4% 4.1%",
+                "--card-foreground": "210 20% 98%",
+                "--popover": "224 71.4% 4.1%",
+                "--popover-foreground": "210 20% 98%",
+                "--primary": "263.4 70% 50.4%",
+                "--primary-foreground": "210 20% 98%",
+                "--secondary": "215 27.9% 16.9%",
+                "--secondary-foreground": "210 20% 98%",
+                "--muted": "215 27.9% 16.9%",
+                "--muted-foreground": "217.9 10.6% 64.9%",
+                "--accent": "215 27.9% 16.9%",
+                "--accent-foreground": "210 20% 98%",
+                "--destructive": "0 62.8% 30.6%",
+                "--destructive-foreground": "210 20% 98%",
+                "--border": "215 27.9% 16.9%",
+                "--input": "215 27.9% 16.9%",
+                "--ring": "263.4 70% 50.4%",
+            },
+        },
+    },
+]
+
+export function applyTheme(themeName: string, isDark: boolean = true) {
+    const theme = themes.find((t) => t.name === themeName) || themes[0]
+    const vars = isDark ? theme.cssVars.dark : theme.cssVars.light
+
+    const root = document.documentElement
+
+    Object.entries(vars).forEach(([key, value]) => {
+        root.style.setProperty(key, value)
+    })
+}
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 0000000..03aaa4b
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
diff --git a/next.config.ts b/next.config.ts
index a6ba7ec..0117cbb 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,15 +1,19 @@
 import type { NextConfig } from "next";
 
+const isProd = process.env.NODE_ENV === 'production';
+
 const nextConfig: NextConfig = {
-  // Static export configuration for production builds
-  output: 'export',
-  trailingSlash: true,
+  // Static export configuration for production builds only
+  ...(isProd && {
+    output: 'export',
+    trailingSlash: true,
+    distDir: 'out',
+  }),
   images: {
     unoptimized: true
   },
   // Custom domain configuration (opensuperintelligencelab.com)
   // No basePath needed for custom domain
-  distDir: 'out',
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 6dc3229..ea89502 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "open-superintelligence-lab-github-io",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-slot": "^1.2.4",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "highlight.js": "^11.11.1",
         "lucide-react": "^0.544.0",
         "next": "15.5.3",
@@ -18,6 +21,7 @@
         "rehype-katex": "^7.0.1",
         "remark-gfm": "^4.0.1",
         "remark-math": "^6.0.0",
+        "tailwind-merge": "^3.4.0",
         "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
@@ -892,6 +896,39 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -2142,11 +2179,32 @@
         "node": ">= 6"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -6884,6 +6942,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
diff --git a/package.json b/package.json
index b08ac6b..2be3772 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,9 @@
     "serve:out": "npx serve out"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "highlight.js": "^11.11.1",
     "lucide-react": "^0.544.0",
     "next": "15.5.3",
@@ -22,6 +25,7 @@
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
+    "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
diff --git a/public/palettes/amber-glow.json b/public/palettes/amber-glow.json
new file mode 100644
index 0000000..4a78d4c
--- /dev/null
+++ b/public/palettes/amber-glow.json
@@ -0,0 +1,79 @@
+{
+  "background": "#0F0A06",
+  "foreground": "#FFFFFF",
+  "card": "#2A1F18",
+  "card-foreground": "#FCD34D",
+  "popover": "#2A1F18",
+  "popover-foreground": "#FCD34D",
+  "primary": "#FBBF24",
+  "primary-foreground": "#0F0A06",
+  "secondary": "#3A2A1F",
+  "secondary-foreground": "#FCD34D",
+  "muted": "#3A2A1F",
+  "muted-foreground": "#FBBF24",
+  "accent": "#D97706",
+  "accent-foreground": "#FCD34D",
+  "destructive": "#EF4444",
+  "destructive-foreground": "#FCD34D",
+  "border": "#D97706",
+  "input": "#3A2A1F",
+  "ring": "#F59E0B",
+  "chart-1": "#F59E0B",
+  "chart-2": "#FBBF24",
+  "chart-3": "#D97706",
+  "chart-4": "#F59E0B",
+  "chart-5": "#FBBF24",
+  "radius": "0.5rem",
+  "scrollbar-track": "#2A1F18",
+  "scrollbar-thumb": "#D97706",
+  "scrollbar-thumb-hover": "#F59E0B",
+  "math-primary": "#FBBF24",
+  "math-secondary": "#F59E0B",
+  "math-accent": "#FCD34D",
+  "math-text": "#FBBF24",
+  "math-relation": "#F59E0B",
+  "math-bracket": "#FBBF24",
+  "syntax-bg": "#2A1F18",
+  "syntax-text": "#FCD34D",
+  "syntax-keyword": "#F59E0B",
+  "syntax-string": "#FCD34D",
+  "syntax-comment": "#D97706",
+  "syntax-number": "#F59E0B",
+  "syntax-function": "#FCD34D",
+  "syntax-variable": "#F59E0B",
+  "gradient-start": "#1C1410",
+  "gradient-mid": "#2A1F18",
+  "gradient-end": "#FB923C",
+  "gradient-accent-1": "#D97706",
+  "gradient-accent-2": "#FBBF24",
+  "gradient-accent-3": "#FBBF24",
+  "indigo-900": "#312E81",
+  "indigo-600": "#4F46E5",
+  "indigo-500": "#6366F1",
+  "indigo-400": "#818CF8",
+  "indigo-300": "#A5B4FC",
+  "green-900": "#14532D",
+  "green-600": "#16A34A",
+  "green-500": "#22C55E",
+  "green-400": "#4ADE80",
+  "green-300": "#86EFAC",
+  "emerald-900": "#064E3B",
+  "emerald-600": "#059669",
+  "emerald-500": "#10B981",
+  "emerald-400": "#34D399",
+  "emerald-300": "#6EE7B7",
+  "amber-600": "#D97706",
+  "amber-500": "#F59E0B",
+  "amber-400": "#FBBF24",
+  "amber-300": "#FCD34D",
+  "orange-600": "#EA580C",
+  "orange-500": "#F97316",
+  "orange-400": "#FB923C",
+  "violet-900": "#4C1D95",
+  "violet-600": "#7C3AED",
+  "violet-500": "#8B5CF6",
+  "violet-400": "#A78BFA",
+  "pink-600": "#DB2777",
+  "pink-500": "#EC4899",
+  "pink-400": "#F472B6"
+}
diff --git a/public/palettes/deep-ocean.json b/public/palettes/deep-ocean.json
new file mode 100644
index 0000000..83227ba
--- /dev/null
+++ b/public/palettes/deep-ocean.json
@@ -0,0 +1,79 @@
+{
+  "background": "#050814",
+  "foreground": "#FFFFFF",
+  "card": "#1E1B4B",
+  "card-foreground": "#A5B4FC",
+  "popover": "#1E1B4B",
+  "popover-foreground": "#A5B4FC",
+  "primary": "#818CF8",
+  "primary-foreground": "#050814",
+  "secondary": "#312E81",
+  "secondary-foreground": "#A5B4FC",
+  "muted": "#312E81",
+  "muted-foreground": "#818CF8",
+  "accent": "#6366F1",
+  "accent-foreground": "#A5B4FC",
+  "destructive": "#EF4444",
+  "destructive-foreground": "#A5B4FC",
+  "border": "#4338CA",
+  "input": "#312E81",
+  "ring": "#6366F1",
+  "chart-1": "#6366F1",
+  "chart-2": "#818CF8",
+  "chart-3": "#A5B4FC",
+  "chart-4": "#6366F1",
+  "chart-5": "#818CF8",
+  "radius": "0.5rem",
+  "scrollbar-track": "#1E1B4B",
+  "scrollbar-thumb": "#4338CA",
+  "scrollbar-thumb-hover": "#6366F1",
+  "math-primary": "#818CF8",
+  "math-secondary": "#6366F1",
+  "math-accent": "#A5B4FC",
+  "math-text": "#818CF8",
+  "math-relation": "#6366F1",
+  "math-bracket": "#818CF8",
+  "syntax-bg": "#1E1B4B",
+  "syntax-text": "#A5B4FC",
+  "syntax-keyword": "#818CF8",
+  "syntax-string": "#A5B4FC",
+  "syntax-comment": "#4338CA",
+  "syntax-number": "#818CF8",
+  "syntax-function": "#A5B4FC",
+  "syntax-variable": "#818CF8",
+  "gradient-start": "#0A0E27",
+  "gradient-mid": "#1E1B4B",
+  "gradient-end": "#EC4899",
+  "gradient-accent-1": "#818CF8",
+  "gradient-accent-2": "#F59E0B",
+  "gradient-accent-3": "#C7D2FE",
+  "indigo-900": "#312E81",
+  "indigo-600": "#4F46E5",
+  "indigo-500": "#6366F1",
+  "indigo-400": "#818CF8",
+  "indigo-300": "#A5B4FC",
+  "green-900": "#14532D",
+  "green-600": "#16A34A",
+  "green-500": "#22C55E",
+  "green-400": "#4ADE80",
+  "green-300": "#86EFAC",
+  "emerald-900": "#064E3B",
+  "emerald-600": "#059669",
+  "emerald-500": "#10B981",
+  "emerald-400": "#34D399",
+  "emerald-300": "#6EE7B7",
+  "amber-600": "#D97706",
+  "amber-500": "#F59E0B",
+  "amber-400": "#FBBF24",
+  "amber-300": "#FCD34D",
+  "orange-600": "#EA580C",
+  "orange-500": "#F97316",
+  "orange-400": "#FB923C",
+  "violet-900": "#4C1D95",
+  "violet-600": "#7C3AED",
+  "violet-500": "#8B5CF6",
+  "violet-400": "#A78BFA",
+  "pink-600": "#DB2777",
+  "pink-500": "#EC4899",
+  "pink-400": "#F472B6"
+}
diff --git a/public/palettes/default.json b/public/palettes/default.json
new file mode 100644
index 0000000..750b2e4
--- /dev/null
+++ b/public/palettes/default.json
@@ -0,0 +1,79 @@
+{
+  "background": "#0F172A",
+  "foreground": "#FFFFFF",
+  "card": "#1E293B",
+  "card-foreground": "#F8FAFC",
+  "popover": "#1E293B",
+  "popover-foreground": "#F8FAFC",
+  "primary": "#F8FAFC",
+  "primary-foreground": "#0F172A",
+  "secondary": "#1E293B",
+  "secondary-foreground": "#F8FAFC",
+  "muted": "#334155",
+  "muted-foreground": "#94A3B8",
+  "accent": "#334155",
+  "accent-foreground": "#F8FAFC",
+  "destructive": "#EF4444",
+  "destructive-foreground": "#F8FAFC",
+  "border": "#334155",
+  "input": "#334155",
+  "ring": "#6366F1",
+  "chart-1": "#F97316",
+  "chart-2": "#22C55E",
+  "chart-3": "#1E293B",
+  "chart-4": "#EAB308",
+  "chart-5": "#EC4899",
+  "radius": "0.5rem",
+  "scrollbar-track": "#1E293B",
+  "scrollbar-thumb": "#475569",
+  "scrollbar-thumb-hover": "#64748B",
+  "math-primary": "#60A5FA",
+  "math-secondary": "#C084FC",
+  "math-accent": "#34D399",
+  "math-text": "#FBBF24",
+  "math-relation": "#F472B6",
+  "math-bracket": "#94A3B8",
+  "syntax-bg": "#1E293B",
+  "syntax-text": "#E2E8F0",
+  "syntax-keyword": "#C084FC",
+  "syntax-string": "#34D399",
+  "syntax-comment": "#64748B",
+  "syntax-number": "#FBBF24",
+  "syntax-function": "#60A5FA",
+  "syntax-variable": "#F472B6",
+  "gradient-start": "#020617",
+  "gradient-mid": "#0F172A",
+  "gradient-end": "#EC4899",
+  "gradient-accent-1": "#3B82F6",
+  "gradient-accent-2": "#F59E0B",
+  "gradient-accent-3": "#06B6D4",
+  "indigo-900": "#312E81",
+  "indigo-600": "#4F46E5",
+  "indigo-500": "#6366F1",
+  "indigo-400": "#818CF8",
+  "indigo-300": "#A5B4FC",
+  "green-900": "#14532D",
+  "green-600": "#16A34A",
+  "green-500": "#22C55E",
+  "green-400": "#4ADE80",
+  "green-300": "#86EFAC",
+  "emerald-900": "#064E3B",
+  "emerald-600": "#059669",
+  "emerald-500": "#10B981",
+  "emerald-400": "#34D399",
+  "emerald-300": "#6EE7B7",
+  "amber-600": "#D97706",
+  "amber-500": "#F59E0B",
+  "amber-400": "#FBBF24",
+  "amber-300": "#FCD34D",
+  "orange-600": "#EA580C",
+  "orange-500": "#F97316",
+  "orange-400": "#FB923C",
+  "violet-900": "#4C1D95",
+  "violet-600": "#7C3AED",
+  "violet-500": "#8B5CF6",
+  "violet-400": "#A78BFA",
+  "pink-600": "#DB2777",
+  "pink-500": "#EC4899",
+  "pink-400": "#F472B6"
+}
\ No newline at end of file
diff --git a/public/palettes/emerald-odyssey.json b/public/palettes/emerald-odyssey.json
new file mode 100644
index 0000000..c65e015
--- /dev/null
+++ b/public/palettes/emerald-odyssey.json
@@ -0,0 +1,79 @@
+{
+  "background": "#051F18",
+  "foreground": "#FFFFFF",
+  "card": "#00674F",
+  "card-foreground": "#9FFFE6",
+  "popover": "#00674F",
+  "popover-foreground": "#73E6CB",
+  "primary": "#39FFC7",
+  "primary-foreground": "#051F18",
+  "secondary": "#00674F",
+  "secondary-foreground": "#9FFFE6",
+  "muted": "#00674F",
+  "muted-foreground": "#73E6CB",
+  "accent": "#39FFC7",
+  "accent-foreground": "#051F18",
+  "destructive": "#EF4444",
+  "destructive-foreground": "#73E6CB",
+  "border": "#3EBB9E",
+  "input": "#00674F",
+  "ring": "#3EBB9E",
+  "chart-1": "#3EBB9E",
+  "chart-2": "#73E6CB",
+  "chart-3": "#00674F",
+  "chart-4": "#3EBB9E",
+  "chart-5": "#73E6CB",
+  "radius": "0.5rem",
+  "scrollbar-track": "#00674F",
+  "scrollbar-thumb": "#3EBB9E",
+  "scrollbar-thumb-hover": "#73E6CB",
+  "math-primary": "#73E6CB",
+  "math-secondary": "#3EBB9E",
+  "math-accent": "#00674F",
+  "math-text": "#73E6CB",
+  "math-relation": "#3EBB9E",
+  "math-bracket": "#73E6CB",
+  "syntax-bg": "#00674F",
+  "syntax-text": "#73E6CB",
+  "syntax-keyword": "#3EBB9E",
+  "syntax-string": "#73E6CB",
+  "syntax-comment": "#00674F",
+  "syntax-number": "#3EBB9E",
+  "syntax-function": "#73E6CB",
+  "syntax-variable": "#3EBB9E",
+  "gradient-start": "#0A3C30",
+  "gradient-mid": "#00674F",
+  "gradient-end": "#BE5103",
+  "gradient-accent-1": "#39FFC7",
+  "gradient-accent-2": "#FFCE1B",
+  "gradient-accent-3": "#3EBB9E",
+  "indigo-900": "#00674F",
+  "indigo-600": "#3EBB9E",
+  "indigo-500": "#3EBB9E",
+  "indigo-400": "#73E6CB",
+  "indigo-300": "#73E6CB",
+  "green-900": "#0A3C30",
+  "green-600": "#00674F",
+  "green-500": "#3EBB9E",
+  "green-400": "#3EBB9E",
+  "green-300": "#73E6CB",
+  "emerald-900": "#0A3C30",
+  "emerald-600": "#00674F",
+  "emerald-500": "#3EBB9E",
+  "emerald-400": "#73E6CB",
+  "emerald-300": "#73E6CB",
+  "amber-600": "#FFCE1B",
+  "amber-500": "#FFCE1B",
+  "amber-400": "#FFCE1B",
+  "amber-300": "#FFCE1B",
+  "orange-600": "#BE5103",
+  "orange-500": "#BE5103",
+  "orange-400": "#BE5103",
+  "violet-900": "#00674F",
+  "violet-600": "#3EBB9E",
+  "violet-500": "#3EBB9E",
+  "violet-400": "#73E6CB",
+  "pink-600": "#EF4444",
+  "pink-500": "#EF4444",
+  "pink-400": "#EF4444"
+}
diff --git a/public/palettes/harvest-moon.json b/public/palettes/harvest-moon.json
new file mode 100644
index 0000000..4171d03
--- /dev/null
+++ b/public/palettes/harvest-moon.json
@@ -0,0 +1,79 @@
+{
+  "background": "#0D0604",
+  "foreground": "#FFFFFF",
+  "card": "#2A1A15",
+  "card-foreground": "#FFCE1B",
+  "popover": "#2A1A15",
+  "popover-foreground": "#FFCE1B",
+  "primary": "#FFE66D",
+  "primary-foreground": "#0D0604",
+  "secondary": "#800020",
+  "secondary-foreground": "#FFCE1B",
+  "muted": "#A52A2A",
+  "muted-foreground": "#FFCE1B",
+  "accent": "#BE5103",
+  "accent-foreground": "#FFCE1B",
+  "destructive": "#EF4444",
+  "destructive-foreground": "#FFCE1B",
+  "border": "#BE5103",
+  "input": "#A52A2A",
+  "ring": "#FFCE1B",
+  "chart-1": "#FFCE1B",
+  "chart-2": "#BE5103",
+  "chart-3": "#A52A2A",
+  "chart-4": "#800020",
+  "chart-5": "#FFCE1B",
+  "radius": "0.5rem",
+  "scrollbar-track": "#2A1A15",
+  "scrollbar-thumb": "#A52A2A",
+  "scrollbar-thumb-hover": "#BE5103",
+  "math-primary": "#FFCE1B",
+  "math-secondary": "#BE5103",
+  "math-accent": "#A52A2A",
+  "math-text": "#FFCE1B",
+  "math-relation": "#BE5103",
+  "math-bracket": "#800020",
+  "syntax-bg": "#2A1A15",
+  "syntax-text": "#FFCE1B",
+  "syntax-keyword": "#BE5103",
+  "syntax-string": "#FFCE1B",
+  "syntax-comment": "#800020",
+  "syntax-number": "#BE5103",
+  "syntax-function": "#FFCE1B",
+  "syntax-variable": "#BE5103",
+  "gradient-start": "#1A0F0A",
+  "gradient-mid": "#2A1A15",
+  "gradient-end": "#FF9900",
+  "gradient-accent-1": "#800020",
+  "gradient-accent-2": "#FFCE1B",
+  "gradient-accent-3": "#BE5103",
+  "indigo-900": "#800020",
+  "indigo-600": "#A52A2A",
+  "indigo-500": "#BE5103",
+  "indigo-400": "#BE5103",
+  "indigo-300": "#FFCE1B",
+  "green-900": "#1A0F0A",
+  "green-600": "#BE5103",
+  "green-500": "#BE5103",
+  "green-400": "#FFCE1B",
+  "green-300": "#FFCE1B",
+  "emerald-900": "#1A0F0A",
+  "emerald-600": "#BE5103",
+  "emerald-500": "#BE5103",
+  "emerald-400": "#FFCE1B",
+  "emerald-300": "#FFCE1B",
+  "amber-600": "#FFCE1B",
+  "amber-500": "#FFCE1B",
+  "amber-400": "#FFCE1B",
+  "amber-300": "#FFCE1B",
+  "orange-600": "#BE5103",
+  "orange-500": "#BE5103",
+  "orange-400": "#FFCE1B",
+  "violet-900": "#800020",
+  "violet-600": "#A52A2A",
+  "violet-500": "#BE5103",
+  "violet-400": "#FFCE1B",
+  "pink-600": "#EF4444",
+  "pink-500": "#EF4444",
+  "pink-400": "#EF4444"
+}
diff --git a/public/palettes/ink-wash.json b/public/palettes/ink-wash.json
new file mode 100644
index 0000000..376da64
--- /dev/null
+++ b/public/palettes/ink-wash.json
@@ -0,0 +1,79 @@
+{
+  "background": "#FFFFE3",
+  "foreground": "#2A2A2A",
+  "card": "#F5F5DC",
+  "card-foreground": "#2A2A2A",
+  "popover": "#F5F5DC",
+  "popover-foreground": "#2A2A2A",
+  "primary": "#2A2A2A",
+  "primary-foreground": "#FFFFE3",
+  "secondary": "#E8E8D8",
+  "secondary-foreground": "#2A2A2A",
+  "muted": "#D8D8C8",
+  "muted-foreground": "#5A6A7A",
+  "accent": "#5A6A7A",
+  "accent-foreground": "#FFFFE3",
+  "destructive": "#C84A4A",
+  "destructive-foreground": "#FFFFE3",
+  "border": "#C8C8B8",
+  "input": "#E8E8D8",
+  "ring": "#5A6A7A",
+  "chart-1": "#6D8196",
+  "chart-2": "#8B9AA8",
+  "chart-3": "#4A5A6A",
+  "chart-4": "#A8B8C8",
+  "chart-5": "#5A6A7A",
+  "radius": "0.5rem",
+  "scrollbar-track": "#E8E8D8",
+  "scrollbar-thumb": "#A8A898",
+  "scrollbar-thumb-hover": "#5A6A7A",
+  "math-primary": "#5A6A7A",
+  "math-secondary": "#4A5A6A",
+  "math-accent": "#6D8196",
+  "math-text": "#3A4A5A",
+  "math-relation": "#5A6A7A",
+  "math-bracket": "#8A8A7A",
+  "syntax-bg": "#F5F5DC",
+  "syntax-text": "#2A2A2A",
+  "syntax-keyword": "#4A5A6A",
+  "syntax-string": "#5A6A7A",
+  "syntax-comment": "#9A9A8A",
+  "syntax-number": "#6D8196",
+  "syntax-function": "#5A6A7A",
+  "syntax-variable": "#4A5A6A",
+  "gradient-start": "#FFFFE3",
+  "gradient-mid": "#F5F5DC",
+  "gradient-end": "#D8D8C8",
+  "gradient-accent-1": "#4A5568",
+  "gradient-accent-2": "#5A6A7A",
+  "gradient-accent-3": "#6D8196",
+  "indigo-900": "#4A5568",
+  "indigo-600": "#6D8196",
+  "indigo-500": "#7A8A9A",
+  "indigo-400": "#8B9AA8",
+  "indigo-300": "#9CABB8",
+  "green-900": "#4A5A6A",
+  "green-600": "#5A6A7A",
+  "green-500": "#6A7A8A",
+  "green-400": "#7A8A9A",
+  "green-300": "#8A9AAA",
+  "emerald-900": "#4A5568",
+  "emerald-600": "#5A6A7A",
+  "emerald-500": "#6A7A8A",
+  "emerald-400": "#7A8A9A",
+  "emerald-300": "#8A9AAA",
+  "amber-600": "#8A7A6A",
+  "amber-500": "#9A8A7A",
+  "amber-400": "#AA9A8A",
+  "amber-300": "#BAAA9A",
+  "orange-600": "#9A7A6A",
+  "orange-500": "#AA8A7A",
+  "orange-400": "#BA9A8A",
+  "violet-900": "#5A5A6A",
+  "violet-600": "#6A6A7A",
+  "violet-500": "#7A7A8A",
+  "violet-400": "#8A8A9A",
+  "pink-600": "#9A6A7A",
+  "pink-500": "#AA7A8A",
+  "pink-400": "#BA8A9A"
+}
diff --git a/public/palettes/slatewave.json b/public/palettes/slatewave.json
new file mode 100644
index 0000000..a7eb50b
--- /dev/null
+++ b/public/palettes/slatewave.json
@@ -0,0 +1,79 @@
+{
+  "background": "#0A0A1A",
+  "foreground": "#FFFFFF",
+  "card": "#1A1A2E",
+  "card-foreground": "#CFC5FF",
+  "popover": "#1A1A2E",
+  "popover-foreground": "#CFC5FF",
+  "primary": "#CAB8FF",
+  "primary-foreground": "#0A0A1A",
+  "secondary": "#1E1E3E",
+  "secondary-foreground": "#A9F4DA",
+  "muted": "#252540",
+  "muted-foreground": "#CFC5FF",
+  "accent": "#FFC99B",
+  "accent-foreground": "#0A0A1A",
+  "destructive": "#FF6B9D",
+  "destructive-foreground": "#0A0A1A",
+  "border": "#C0AAFF",
+  "input": "#1E1E3E",
+  "ring": "#CAB8FF",
+  "chart-1": "#FFC99B",
+  "chart-2": "#A9F4DA",
+  "chart-3": "#CFC5FF",
+  "chart-4": "#C0AAFF",
+  "chart-5": "#FFA8D8",
+  "radius": "0.5rem",
+  "scrollbar-track": "#1A1A2E",
+  "scrollbar-thumb": "#C0AAFF",
+  "scrollbar-thumb-hover": "#CAB8FF",
+  "math-primary": "#A9F4DA",
+  "math-secondary": "#CFC5FF",
+  "math-accent": "#FFC99B",
+  "math-text": "#CAB8FF",
+  "math-relation": "#A9DCFF",
+  "math-bracket": "#CFC5FF",
+  "syntax-bg": "#1A1A2E",
+  "syntax-text": "#A9DCFF",
+  "syntax-keyword": "#CAB8FF",
+  "syntax-string": "#A9F4DA",
+  "syntax-comment": "#5A5A7A",
+  "syntax-number": "#FFC99B",
+  "syntax-function": "#CFC5FF",
+  "syntax-variable": "#FFA8D8",
+  "gradient-start": "#0A0A1A",
+  "gradient-mid": "#1A1A2E",
+  "gradient-end": "#FFA8D8",
+  "gradient-accent-1": "#A9DCFF",
+  "gradient-accent-2": "#FFC99B",
+  "gradient-accent-3": "#A9F4DA",
+  "indigo-900": "#1E1E3E",
+  "indigo-600": "#C0AAFF",
+  "indigo-500": "#CAB8FF",
+  "indigo-400": "#CFC5FF",
+  "indigo-300": "#A9DCFF",
+  "green-900": "#1A2E1A",
+  "green-600": "#A9F4DA",
+  "green-500": "#A9F4DA",
+  "green-400": "#A9F4DA",
+  "green-300": "#D4FFE8",
+  "emerald-900": "#1A2E1A",
+  "emerald-600": "#A9F4DA",
+  "emerald-500": "#A9F4DA",
+  "emerald-400": "#A9F4DA",
+  "emerald-300": "#D4FFE8",
+  "amber-600": "#FFC99B",
+  "amber-500": "#FFC99B",
+  "amber-400": "#FFC99B",
+  "amber-300": "#FFD9B8",
+  "orange-600": "#FFC99B",
+  "orange-500": "#FFC99B",
+  "orange-400": "#FFD9B8",
+  "violet-900": "#1E1E3E",
+  "violet-600": "#C0AAFF",
+  "violet-500": "#CAB8FF",
+  "violet-400": "#CFC5FF",
+  "pink-600": "#FFA8D8",
+  "pink-500": "#FFA8D8",
+  "pink-400": "#FFC0E8"
+}
diff --git a/public/palettes/terminal-green.json b/public/palettes/terminal-green.json
new file mode 100644
index 0000000..c93b18d
--- /dev/null
+++ b/public/palettes/terminal-green.json
@@ -0,0 +1,79 @@
+{
+  "background": "#0D1B0A",
+  "foreground": "#FFFFFF",
+  "card": "#1A2E14",
+  "card-foreground": "#39FF14",
+  "popover": "#1A2E14",
+  "popover-foreground": "#39FF14",
+  "primary": "#00FF41",
+  "primary-foreground": "#0D1B0A",
+  "secondary": "#1A2E14",
+  "secondary-foreground": "#39FF14",
+  "muted": "#1A2E14",
+  "muted-foreground": "#00FF41",
+  "accent": "#39FF14",
+  "accent-foreground": "#0D1B0A",
+  "destructive": "#EF4444",
+  "destructive-foreground": "#39FF14",
+  "border": "#00FF41",
+  "input": "#1A2E14",
+  "ring": "#39FF14",
+  "chart-1": "#39FF14",
+  "chart-2": "#00FF41",
+  "chart-3": "#1A2E14",
+  "chart-4": "#39FF14",
+  "chart-5": "#00FF41",
+  "radius": "0.5rem",
+  "scrollbar-track": "#1A2E14",
+  "scrollbar-thumb": "#00FF41",
+  "scrollbar-thumb-hover": "#39FF14",
+  "math-primary": "#39FF14",
+  "math-secondary": "#00FF41",
+  "math-accent": "#00FF41",
+  "math-text": "#39FF14",
+  "math-relation": "#00FF41",
+  "math-bracket": "#00FF41",
+  "syntax-bg": "#1A2E14",
+  "syntax-text": "#39FF14",
+  "syntax-keyword": "#00FF41",
+  "syntax-string": "#39FF14",
+  "syntax-comment": "#00FF41",
+  "syntax-number": "#39FF14",
+  "syntax-function": "#00FF41",
+  "syntax-variable": "#39FF14",
+  "gradient-start": "#0D1B0A",
+  "gradient-mid": "#1A2E14",
+  "gradient-end": "#FF9900",
+  "gradient-accent-1": "#00FF41",
+  "gradient-accent-2": "#FFCE1B",
+  "gradient-accent-3": "#00FF41",
+  "indigo-900": "#312E81",
+  "indigo-600": "#4F46E5",
+  "indigo-500": "#6366F1",
+  "indigo-400": "#818CF8",
+  "indigo-300": "#A5B4FC",
+  "green-900": "#0D1B0A",
+  "green-600": "#00FF41",
+  "green-500": "#39FF14",
+  "green-400": "#39FF14",
+  "green-300": "#39FF14",
+  "emerald-900": "#0D1B0A",
+  "emerald-600": "#00FF41",
+  "emerald-500": "#39FF14",
+  "emerald-400": "#39FF14",
+  "emerald-300": "#39FF14",
+  "amber-600": "#FFCE1B",
+  "amber-500": "#FFCE1B",
+  "amber-400": "#FFCE1B",
+  "amber-300": "#FFCE1B",
+  "orange-600": "#FF9800",
+  "orange-500": "#FF9800",
+  "orange-400": "#FF9800",
+  "violet-900": "#4C1D95",
+  "violet-600": "#7C3AED",
+  "violet-500": "#8B5CF6",
+  "violet-400": "#A78BFA",
+  "pink-600": "#DB2777",
+  "pink-500": "#EC4899",
+  "pink-400": "#F472B6"
+}
diff --git a/public/palettes/vaporwave.json b/public/palettes/vaporwave.json
new file mode 100644
index 0000000..462dfcc
--- /dev/null
+++ b/public/palettes/vaporwave.json
@@ -0,0 +1,79 @@
+{
+  "background": "#050510",
+  "foreground": "#FFFFFF",
+  "card": "#0A0C37",
+  "card-foreground": "#FFFFFF",
+  "popover": "#0A0C37",
+  "popover-foreground": "#FFFFFF",
+  "primary": "#FF61C6",
+  "primary-foreground": "#050510",
+  "secondary": "#375971",
+  "secondary-foreground": "#5CECFF",
+  "muted": "#1A1D5A",
+  "muted-foreground": "#5CECFF",
+  "accent": "#5CECFF",
+  "accent-foreground": "#050510",
+  "destructive": "#FF9900",
+  "destructive-foreground": "#050510",
+  "border": "#375971",
+  "input": "#0A0C37",
+  "ring": "#FF61C6",
+  "chart-1": "#FF61C6",
+  "chart-2": "#5CECFF",
+  "chart-3": "#F4FF61",
+  "chart-4": "#FF9900",
+  "chart-5": "#375971",
+  "radius": "0.5rem",
+  "scrollbar-track": "#050510",
+  "scrollbar-thumb": "#FF61C6",
+  "scrollbar-thumb-hover": "#5CECFF",
+  "math-primary": "#5CECFF",
+  "math-secondary": "#FF61C6",
+  "math-accent": "#F4FF61",
+  "math-text": "#FFFFFF",
+  "math-relation": "#FF9900",
+  "math-bracket": "#FF61C6",
+  "syntax-bg": "#050510",
+  "syntax-text": "#FFFFFF",
+  "syntax-keyword": "#FF61C6",
+  "syntax-string": "#F4FF61",
+  "syntax-comment": "#375971",
+  "syntax-number": "#FF9900",
+  "syntax-function": "#5CECFF",
+  "syntax-variable": "#FF61C6",
+  "gradient-start": "#050510",
+  "gradient-mid": "#0A0C37",
+  "gradient-end": "#FF61C6",
+  "gradient-accent-1": "#FF61C6",
+  "gradient-accent-2": "#F4FF61",
+  "gradient-accent-3": "#FF9900",
+  "indigo-900": "#050510",
+  "indigo-600": "#5CECFF",
+  "indigo-500": "#5CECFF",
+  "indigo-400": "#5CECFF",
+  "indigo-300": "#5CECFF",
+  "green-900": "#050510",
+  "green-600": "#F4FF61",
+  "green-500": "#F4FF61",
+  "green-400": "#F4FF61",
+  "green-300": "#F4FF61",
+  "emerald-900": "#050510",
+  "emerald-600": "#F4FF61",
+  "emerald-500": "#F4FF61",
+  "emerald-400": "#F4FF61",
+  "emerald-300": "#F4FF61",
+  "amber-600": "#FF9900",
+  "amber-500": "#FF9900",
+  "amber-400": "#FF9900",
+  "amber-300": "#FF9900",
+  "orange-600": "#FF9900",
+  "orange-500": "#FF9900",
+  "orange-400": "#FF9900",
+  "violet-900": "#050510",
+  "violet-600": "#FF61C6",
+  "violet-500": "#FF61C6",
+  "violet-400": "#FF61C6",
+  "pink-600": "#FF61C6",
+  "pink-500": "#FF61C6",
+  "pink-400": "#FF61C6"
+}
diff --git a/styles/math-styles.css b/styles/math-styles.css
index bc96ad0..f52c587 100644
--- a/styles/math-styles.css
+++ b/styles/math-styles.css
@@ -1,16 +1,16 @@
 /* Custom styling for LaTeX math formulas */
 .katex {
-  color: #60a5fa !important; /* Blue color for inline math */
-  background: rgba(96, 165, 250, 0.05);
+  color: hsl(var(--math-primary)) !important;
+  background: hsl(var(--math-primary) / 0.05);
   padding: 3px 3px;
   border-radius: 3px;
-  border: 1px solid rgba(96, 165, 250, 0.2);
+  border: 1px solid hsl(var(--math-primary) / 0.2);
   font-weight: 500;
 }
 
 .katex-display {
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
-  border: 1px solid rgba(139, 92, 246, 0.3);
+  background: linear-gradient(135deg, hsl(var(--math-secondary) / 0.1), hsl(var(--math-primary) / 0.1));
+  border: 1px solid hsl(var(--math-secondary) / 0.3);
   border-radius: 12px;
   padding: 20px;
   margin: 24px 0;
@@ -22,107 +22,107 @@
   background: transparent;
   border: none;
   padding: 0;
-  color: #c084fc !important; /* Purple color for display math */
+  color: hsl(var(--math-secondary)) !important;
   font-size: 1.1em;
 }
 
 /* Style specific math elements */
 .katex .mord {
-  color: #34d399 !important; /* Green for variables and letters */
+  color: hsl(var(--math-accent)) !important;
 }
 
 .katex .mbin {
-  color: #fbbf24 !important; /* Yellow for binary operators like +, -, ⋅ */
+  color: hsl(var(--math-text)) !important;
 }
 
 .katex .mrel {
-  color: #f472b6 !important; /* Pink for relations like =, ∈, ≤ */
+  color: hsl(var(--math-relation)) !important;
 }
 
 .katex .mopen, .katex .mclose {
-  color: #94a3b8 !important; /* Gray for brackets and parentheses */
+  color: hsl(var(--math-bracket)) !important;
 }
 
 .katex .mfrac {
-  color: #fb7185 !important; /* Rose for fractions */
+  color: hsl(var(--math-secondary)) !important;
 }
 
 .katex .msqrt {
-  color: #a7f3d0 !important; /* Light green for square roots */
+  color: hsl(var(--math-accent)) !important;
 }
 
 .katex .msubsup {
-  color: #a78bfa !important; /* Purple for superscripts and subscripts */
+  color: hsl(var(--math-secondary)) !important;
 }
 
 .katex .mtext {
-  color: #60a5fa !important; /* Blue for text functions like \text{ReLU} */
+  color: hsl(var(--math-primary)) !important;
 }
 
 /* Hover effects */
 .katex:hover {
-  background: rgba(96, 165, 250, 0.15);
-  border-color: rgba(96, 165, 250, 0.4);
+  background: hsl(var(--math-primary) / 0.15);
+  border-color: hsl(var(--math-primary) / 0.4);
   transition: all 0.2s ease;
 }
 
 .katex-display:hover {
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
-  border-color: rgba(139, 92, 246, 0.5);
+  background: linear-gradient(135deg, hsl(var(--math-secondary) / 0.15), hsl(var(--math-primary) / 0.15));
+  border-color: hsl(var(--math-secondary) / 0.5);
   transition: all 0.2s ease;
 }
 
 /* Custom syntax highlighting for code blocks */
 .hljs {
-  background: #1e293b !important; /* slate-800 */
-  color: #e2e8f0 !important; /* slate-200 */
+  background: hsl(var(--syntax-bg)) !important;
+  color: hsl(var(--syntax-text)) !important;
 }
 
 .hljs-keyword {
-  color: #c084fc !important; /* purple-300 */
+  color: hsl(var(--syntax-keyword)) !important;
 }
 
 .hljs-string {
-  color: #34d399 !important; /* emerald-400 */
+  color: hsl(var(--syntax-string)) !important;
 }
 
 .hljs-comment {
-  color: #64748b !important; /* slate-500 */
+  color: hsl(var(--syntax-comment)) !important;
   font-style: italic;
 }
 
 .hljs-number {
-  color: #fbbf24 !important; /* amber-400 */
+  color: hsl(var(--syntax-number)) !important;
 }
 
 .hljs-function {
-  color: #60a5fa !important; /* blue-400 */
+  color: hsl(var(--syntax-function)) !important;
 }
 
 .hljs-variable {
-  color: #f472b6 !important; /* pink-400 */
+  color: hsl(var(--syntax-variable)) !important;
 }
 
 .hljs-type {
-  color: #fb7185 !important; /* rose-400 */
+  color: hsl(var(--syntax-variable)) !important;
 }
 
 .hljs-built_in {
-  color: #a78bfa !important; /* violet-400 */
+  color: hsl(var(--syntax-keyword)) !important;
 }
 
 .hljs-title {
-  color: #60a5fa !important; /* blue-400 */
+  color: hsl(var(--syntax-function)) !important;
 }
 
 .hljs-params {
-  color: #e2e8f0 !important; /* slate-200 */
+  color: hsl(var(--syntax-text)) !important;
 }
 
 .hljs-attr {
-  color: #34d399 !important; /* emerald-400 */
+  color: hsl(var(--syntax-string)) !important;
 }
 
 .hljs-value {
-  color: #fbbf24 !important; /* amber-400 */
+  color: hsl(var(--syntax-number)) !important;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 0eedd6f..9caeef3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    darkMode: ['class'],
     content: [
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
@@ -53,14 +52,126 @@ module.exports = {
   			border: 'hsl(var(--border))',
   			input: 'hsl(var(--input))',
   			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		},
+			chart: {
+				'1': 'hsl(var(--chart-1))',
+				'2': 'hsl(var(--chart-2))',
+				'3': 'hsl(var(--chart-3))',
+				'4': 'hsl(var(--chart-4))',
+				'5': 'hsl(var(--chart-5))'
+			},
+			gradient: {
+				start: 'hsl(var(--gradient-start))',
+				mid: 'hsl(var(--gradient-mid))',
+				end: 'hsl(var(--gradient-end))',
+				accent: {
+					'1': 'hsl(var(--gradient-accent-1))',
+					'2': 'hsl(var(--gradient-accent-2))',
+					'3': 'hsl(var(--gradient-accent-3))'
+				}
+			},
+			math: {
+				primary: 'hsl(var(--math-primary))',
+				secondary: 'hsl(var(--math-secondary))',
+				accent: 'hsl(var(--math-accent))',
+				text: 'hsl(var(--math-text))',
+				relation: 'hsl(var(--math-relation))',
+				bracket: 'hsl(var(--math-bracket))'
+			},
+			syntax: {
+				bg: 'hsl(var(--syntax-bg))',
+				text: 'hsl(var(--syntax-text))',
+				keyword: 'hsl(var(--syntax-keyword))',
+				string: 'hsl(var(--syntax-string))',
+				comment: 'hsl(var(--syntax-comment))',
+				number: 'hsl(var(--syntax-number))',
+				function: 'hsl(var(--syntax-function))',
+				variable: 'hsl(var(--syntax-variable))'
+			},
+			scrollbar: {
+				track: 'hsl(var(--scrollbar-track))',
+				thumb: 'hsl(var(--scrollbar-thumb))',
+				'humb-hover': 'hsl(var(--scrollbar-thumb-hover))'
+			},
+			// Override default Tailwind colors to use palette variables
+			slate: {
+				950: 'hsl(var(--background))',
+				900: 'hsl(var(--background))',
+				800: 'hsl(var(--card))',
+				700: 'hsl(var(--secondary))',
+				600: 'hsl(var(--border))',
+				500: 'hsl(var(--muted))',
+				400: 'hsl(var(--muted-foreground))',
+				300: 'hsl(var(--muted-foreground))',
+			},
+			gray: {
+				100: 'hsl(var(--foreground))',
+				200: 'hsl(var(--foreground))',
+				300: 'hsl(var(--muted-foreground))',
+				400: 'hsl(var(--muted-foreground))',
+				700: 'hsl(var(--border))',
+				800: 'hsl(var(--card))',
+				900: 'hsl(var(--background))',
+			},
+			blue: {
+				600: 'hsl(var(--gradient-accent-1))',
+				500: 'hsl(var(--gradient-accent-1))',
+				400: 'hsl(var(--gradient-accent-1))',
+			},
+			purple: {
+				600: 'hsl(var(--gradient-accent-2))',
+				500: 'hsl(var(--gradient-accent-2))',
+				400: 'hsl(var(--gradient-accent-2))',
+			},
+			cyan: {
+				600: 'hsl(var(--gradient-accent-3))',
+				500: 'hsl(var(--gradient-accent-3))',
+				400: 'hsl(var(--gradient-accent-3))',
+			},
+			indigo: {
+				900: 'hsl(var(--indigo-900))',
+				600: 'hsl(var(--indigo-600))',
+				500: 'hsl(var(--indigo-500))',
+				400: 'hsl(var(--indigo-400))',
+				300: 'hsl(var(--indigo-300))',
+			},
+			green: {
+				900: 'hsl(var(--green-900))',
+				600: 'hsl(var(--green-600))',
+				500: 'hsl(var(--green-500))',
+				400: 'hsl(var(--green-400))',
+				300: 'hsl(var(--green-300))',
+			},
+			emerald: {
+				900: 'hsl(var(--emerald-900))',
+				600: 'hsl(var(--emerald-600))',
+				500: 'hsl(var(--emerald-500))',
+				400: 'hsl(var(--emerald-400))',
+				300: 'hsl(var(--emerald-300))',
+			},
+			amber: {
+				600: 'hsl(var(--amber-600))',
+				500: 'hsl(var(--amber-500))',
+				400: 'hsl(var(--amber-400))',
+				300: 'hsl(var(--amber-300))',
+			},
+			orange: {
+				600: 'hsl(var(--orange-600))',
+				500: 'hsl(var(--orange-500))',
+				400: 'hsl(var(--orange-400))',
+			},
+			violet: {
+				900: 'hsl(var(--violet-900))',
+				600: 'hsl(var(--violet-600))',
+				500: 'hsl(var(--violet-500))',
+				400: 'hsl(var(--violet-400))',
+			},
+			pink: {
+				600: 'hsl(var(--pink-600))',
+				500: 'hsl(var(--pink-500))',
+				400: 'hsl(var(--pink-400))',
+			},
+			white: 'hsl(var(--foreground))'
+		},
   		borderRadius: {
   			lg: 'var(--radius)',
   			md: 'calc(var(--radius) - 2px)',