diff --git a/src/app/economics/page.tsx b/src/app/economics/page.tsx
index 0a0adfe..47bd997 100644
--- a/src/app/economics/page.tsx
+++ b/src/app/economics/page.tsx
@@ -214,7 +214,7 @@ export default function EconomicsPage() {
                   className="group relative overflow-hidden rounded-2xl border border-foreground/10 bg-black/30 p-8 backdrop-blur-sm hover:border-cyan-300/40 hover:bg-cyan-400/10 transition-all duration-500 cursor-pointer"
                 >
                   <Link href={page.href} className="block h-full">
-                    <div className="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-xl bg-gradient-to-br ${page.color} group-hover:scale-105 transition-transform duration-300">
+                    <div className={`mb-6 inline-flex h-16 w-16 items-center justify-center rounded-xl bg-gradient-to-br ${page.color} group-hover:scale-105 transition-transform duration-300`}>
                       <page.icon className="h-8 w-8 text-foreground" />
                     </div>
                     <h3 className="mb-3 text-xl font-semibold text-foreground group-hover:text-cyan-200 transition-colors duration-300">
diff --git a/src/components/economics/EconomicsHero.tsx b/src/components/economics/EconomicsHero.tsx
index 83259a0..6e923d4 100644
--- a/src/components/economics/EconomicsHero.tsx
+++ b/src/components/economics/EconomicsHero.tsx
@@ -19,13 +19,13 @@ export function EconomicsHero({
       className="relative overflow-hidden py-24 sm:py-32"
       style={{
         background:
-          "linear-gradient(to bottom right, #1e3a8a, #312e81, #581c87)",
+          "linear-gradient(135deg, #050914 0%, #0a1b2b 52%, #06313a 100%)",
       }}
     >
       {/* Animated Background */}
       <div className="absolute inset-0">
-        <div className="absolute -top-40 -right-40 w-80 h-80 bg-blue-500/20 rounded-full blur-3xl animate-pulse" />
-        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-500/20 rounded-full blur-3xl animate-pulse delay-1000" />
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-[#00bfff]/15 rounded-full blur-3xl animate-pulse" />
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[#00e5cc]/15 rounded-full blur-3xl animate-pulse delay-1000" />
       </div>
 
       <div className="relative mx-auto max-w-7xl px-6 lg:px-8">
@@ -39,10 +39,10 @@ export function EconomicsHero({
             initial={{ opacity: 0, scale: 0.9 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.5, delay: 0.2 }}
-            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-500/10 border border-blue-500/20 mb-6"
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#00e5cc]/10 border border-[#00e5cc]/25 mb-6"
           >
-            <Sparkles className="h-4 w-4 text-blue-400" />
-            <span className="text-sm font-medium text-blue-300">
+            <Sparkles className="h-4 w-4 text-[#00e5cc]" />
+            <span className="text-sm font-medium text-[#00e5cc]">
               DRP Economics
             </span>
           </motion.div>
@@ -51,12 +51,12 @@ export function EconomicsHero({
             {title}
           </h1>
 
-          <p className="text-xl sm:text-2xl text-blue-100 mb-8 max-w-3xl mx-auto">
+          <p className="text-xl sm:text-2xl text-slate-100 mb-8 max-w-3xl mx-auto">
             {subtitle}
           </p>
 
           {description && (
-            <p className="text-lg text-blue-200/80 max-w-2xl mx-auto">
+            <p className="text-lg text-slate-300 max-w-2xl mx-auto">
               {description}
             </p>
           )}
@@ -82,7 +82,7 @@ export function EconomicsHero({
                 className="flex flex-col items-center gap-2 p-4 rounded-xl bg-white/5 backdrop-blur-sm border border-foreground/10"
               >
                 <Icon className="h-8 w-8 text-blue-400" />
-                <span className="text-sm text-blue-200 text-center">
+                <span className="text-sm text-slate-300 text-center">
                   {label}
                 </span>
               </motion.div>
diff --git a/src/components/site/PremiumPage.tsx b/src/components/site/PremiumPage.tsx
index 2dfdcd4..91b0099 100644
--- a/src/components/site/PremiumPage.tsx
+++ b/src/components/site/PremiumPage.tsx
@@ -13,7 +13,7 @@ export function PremiumPage({ children }: { children: ReactNode }) {
     <div className="relative min-h-screen overflow-hidden bg-background text-foreground">
       <div className="fixed inset-0 pointer-events-none">
         <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] rounded-full bg-[#00bfff]/5 blur-[180px]" />
-        <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] rounded-full bg-[#a855f7]/5 blur-[180px]" />
+        <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] rounded-full bg-[#00e5cc]/5 blur-[180px]" />
       </div>
       <div className="relative z-10">{children}</div>
     </div>