diff --git a/src/pages/agents/AgentBento.tsx b/src/pages/agents/AgentBento.tsx
index e254b3f..26980e5 100644
--- a/src/pages/agents/AgentBento.tsx
+++ b/src/pages/agents/AgentBento.tsx
@@ -119,8 +119,8 @@ export function AgentBento() {
                 className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] `}
               >
                 {card.animation ? (
-                  <div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center">
-                    <card.animation />
+                  <div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center justify-center">
+                    <div className="w-full h-full object-cover"><card.animation /></div>
                   </div>
                 ) : (
                   <div className="h-48 w-full flex items-center justify-center bg-transparent" />
diff --git a/src/pages/agents/AgentDesign.tsx b/src/pages/agents/AgentDesign.tsx
index 7bb3ec3..d672b44 100644
--- a/src/pages/agents/AgentDesign.tsx
+++ b/src/pages/agents/AgentDesign.tsx
@@ -36,10 +36,10 @@ export function AgentDesign() {
           {benefits.map((item) => (
             <div
               key={item.id}
-              className="flex flex-col items-center bg-white dark:bg-black/40 py-10 px-4 border border-gray-100 dark:border-gray-800 lg:border-t-0 lg:border-b-0"
+              className="flex flex-col items-center bg-white py-10 px-4 border border-gray-100 lg:border-t-0 lg:border-b-0"
             >
               <item.icon className="h-10 w-10 text-cyan-500 mb-4" />
-              <h3 className="text-base font-medium text-black dark:text-white max-w-xs">
+              <h3 className="text-base font-medium text-black max-w-xs">
                 {item.title}
               </h3>
             </div>
diff --git a/src/pages/cloud/CloudHeroNew.tsx b/src/pages/cloud/CloudHeroNew.tsx
index a06b5b2..38b61dd 100644
--- a/src/pages/cloud/CloudHeroNew.tsx
+++ b/src/pages/cloud/CloudHeroNew.tsx
@@ -18,7 +18,7 @@ export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedCli
             <H3 className="mt-4">
               Sovereign Edge Cloud Infrastructure
             </H3>
-            <p className="mt-6 text-lg">
+            <p className="mt-6 text-lg text-gray-600">
               Run compute, storage, and AI resources on infrastructure you control.
             </p>
             <p className="mt-4 text-lg text-gray-600">
diff --git a/src/pages/home/HomeDesign.tsx b/src/pages/home/HomeDesign.tsx
index a3232a7..e12980b 100644
--- a/src/pages/home/HomeDesign.tsx
+++ b/src/pages/home/HomeDesign.tsx
@@ -26,19 +26,19 @@ const benefits = [
 
 export function HomeDesign() {
   return (
-    <section className="w-full max-w-8xl mx-auto bg-white dark:bg-transparent">
+    <section className="w-full max-w-8xl mx-auto bg-white">
 
       {/* Top spacing line */}
-      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200 dark:border-gray-800" />
-      <div className="w-full border border-l border-r border-gray-200 dark:border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
+      <div className="w-full border border-l border-r border-gray-200" />
 
       {/* Content */}
-      <div className="mx-auto max-w-7xl border-gray-200 dark:border-gray-800">
+      <div className="mx-auto max-w-7xl border-gray-200">
         <dl className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-0">
           {benefits.map((item) => (
             <div
               key={item.id}
-              className="group flex items-start gap-2 bg-white/40 dark:bg-black/40 px-8 py-12 border border-gray-200 dark:border-gray-800 lg:border-t-0 lg:border-b-0"
+              className="group flex items-start gap-2 bg-white px-8 py-12 border border-gray-200 0 lg:border-t-0 lg:border-b-0"
             >
               {/* Image on the LEFT */}
               <img
@@ -49,10 +49,10 @@ export function HomeDesign() {
 
               {/* Text on the RIGHT */}
               <div className="text-left">
-                <h3 className="text-base  font-semibold tracking-wide text-gray-900 dark:text-white mb-2">
+                <h3 className="text-base  font-semibold tracking-wide text-gray-900 mb-2">
                   {item.title}
                 </h3>
-                <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed max-w-xs">
+                <p className="text-sm text-gray-600 leading-relaxed max-w-xs">
                   {item.description}
                 </p>
               </div>
diff --git a/src/pages/nodes/NodeHero.tsx b/src/pages/nodes/NodeHero.tsx
index 6310a51..8aa8401 100644
--- a/src/pages/nodes/NodeHero.tsx
+++ b/src/pages/nodes/NodeHero.tsx
@@ -18,7 +18,7 @@ export function NodeHero() {
             <H3 as="h1" className="mt-4">
               Host a Node. Power the Network.
             </H3>
-            <p className="mt-6 text-lg">
+            <p className="mt-6 text-lg text-gray-800">
               The Mycelium Network runs on nodes hosted by people and organizations around the world. Each node adds capacity, resilience, and sovereignty, expanding a global network for private, distributed compute and AI. 
             </p>
             <div className="mt-10 flex items-center gap-x-6">