diff --git a/src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx b/src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx
index 1def721381..05a4a50563 100644
--- a/src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx
+++ b/src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx
@@ -2,6 +2,16 @@ import React from 'react';
 import { event } from '@site/src/utils/gtags.client';
 import { GA_EVENTS, GA_CATEGORIES } from '@site/src/constants/ga-events';
 
+const CATEGORY_COLORS: Record<string, string> = {
+  Defi: '#10b981',
+  Tutorials: '#3b82f6',
+  Cadence: '#a855f7',
+  EVM: '#f97316',
+  Tools: '#64748b',
+  Networks: '#06b6d4',
+  Ecosystem: '#ec4899',
+};
+
 const CATEGORIES = [
   {
     title: 'Defi',
@@ -117,38 +127,52 @@ const BrowseByCategory: React.FC = () => {
 
   return (
     <section className="container mx-auto py-12">
-      <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-8">Browse by category</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8">Browse by category</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
         {CATEGORIES.map((cat) => {
           const firstLink = cat.links[0];
           const remainingLinks = cat.links.slice(1);
           
+          const color = CATEGORY_COLORS[cat.title] || '#64748b';
+          
           return (
-            <div key={cat.title} className="bg-white dark:bg-gray-900 rounded-lg shadow p-6 flex flex-col">
-              <a
-                href={firstLink.href}
-                target={firstLink.href.startsWith('http') ? '_blank' : undefined}
-                rel={firstLink.href.startsWith('http') ? 'noopener noreferrer' : undefined}
-                onClick={() => handleLinkClick(firstLink.label, firstLink.href, cat.title)}
-                className="text-xl font-semibold text-primary-green-600 dark:text-primary-green-400 mb-4 hover:text-primary-green-700 dark:hover:text-primary-green-300 transition-colors underline"
-              >
-                {cat.title}
-              </a>
-              <ul className="space-y-2">
-                {remainingLinks.map((link) => (
-                  <li key={link.label}>
-                    <a
-                      href={link.href}
-                      target={link.href.startsWith('http') ? '_blank' : undefined}
-                      rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined}
-                      onClick={() => handleLinkClick(link.label, link.href, cat.title)}
-                      className="text-base text-gray-800 dark:text-gray-100 hover:text-primary-green-500 dark:hover:text-primary-green-300 transition-colors"
-                    >
-                      {link.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
+            <div
+              key={cat.title}
+              className="rounded-xl bg-white dark:bg-gray-900 shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden"
+            >
+              {/* Color bar at top */}
+              <div style={{ height: '4px', backgroundColor: color }} />
+              
+              <div className="flex flex-col p-5">
+                {/* Category Header */}
+                <a
+                  href={firstLink.href}
+                  target={firstLink.href.startsWith('http') ? '_blank' : undefined}
+                  rel={firstLink.href.startsWith('http') ? 'noopener noreferrer' : undefined}
+                  onClick={() => handleLinkClick(firstLink.label, firstLink.href, cat.title)}
+                  className="text-base font-bold text-gray-900 dark:text-white mb-4 hover:text-[#00EF8B] transition-colors no-underline group flex items-center gap-1"
+                >
+                  {cat.title}
+                  <span className="opacity-0 group-hover:opacity-100 transition-opacity">→</span>
+                </a>
+                
+                {/* Links */}
+                <ul className="space-y-2 flex-1">
+                  {remainingLinks.map((link) => (
+                    <li key={link.label}>
+                      <a
+                        href={link.href}
+                        target={link.href.startsWith('http') ? '_blank' : undefined}
+                        rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined}
+                        onClick={() => handleLinkClick(link.label, link.href, cat.title)}
+                        className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+                      >
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
             </div>
           );
         })}
diff --git a/src/ui/design-system/src/lib/Pages/HomePage/FeatureSection.tsx b/src/ui/design-system/src/lib/Pages/HomePage/FeatureSection.tsx
index d75c18bc2d..787558e216 100644
--- a/src/ui/design-system/src/lib/Pages/HomePage/FeatureSection.tsx
+++ b/src/ui/design-system/src/lib/Pages/HomePage/FeatureSection.tsx
@@ -31,11 +31,10 @@ interface FeatureSectionProps {
 }
 
 const FeatureSection: React.FC<FeatureSectionProps> = ({ sections }) => {
-  // Flatten all cards from all sections into a single array
   const allCards = sections.flatMap(section => section.cards);
   
   return (
-    <section className="container mx-auto pt-1 pb-6">
+    <section className="container mx-auto pb-12">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
         {allCards.map((card, cardIdx) => (
           <Tooltip key={cardIdx} description={card.description}>
@@ -43,7 +42,7 @@ const FeatureSection: React.FC<FeatureSectionProps> = ({ sections }) => {
               href={card.href}
               target={card.target}
               rel={card.target === '_blank' ? 'noopener noreferrer' : undefined}
-              className="group flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 shadow-lg hover:shadow-md transition-all duration-200 cursor-pointer no-underline hover:no-underline h-full min-h-[80px]"
+              className="group flex items-center gap-4 p-4 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 hover:border-[#00EF8B] dark:hover:border-[#00EF8B] transition-colors duration-200 cursor-pointer no-underline hover:no-underline"
               onClick={(e) => {
                 event({
                   action: GA_EVENTS.ACTION_CARD_CLICK,
@@ -53,13 +52,13 @@ const FeatureSection: React.FC<FeatureSectionProps> = ({ sections }) => {
                 });
               }}
             >
-              <span className="flex items-center justify-center w-8 h-8 rounded-md bg-green-100 dark:bg-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-800 transition-colors shrink-0">
-                {card.icon && <Icon name={card.icon} className="w-5 h-5 flex-none text-green-600 dark:text-green-400" />}
+              <span className="flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800 shrink-0">
+                {card.icon && <Icon name={card.icon} className="w-5 h-5 text-gray-700 dark:text-gray-300" />}
               </span>
-              <div className="flex-1">
-                <span className="font-medium text-gray-900 dark:text-gray-100 group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors">{card.heading}</span>
-              </div>
-              <span className="text-gray-400 group-hover:text-green-500 transition-colors">
+              
+              <span className="flex-1 font-medium text-gray-900 dark:text-white">{card.heading}</span>
+              
+              <span className="text-gray-400 group-hover:text-[#00EF8B] transition-colors duration-200">
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                 </svg>
diff --git a/src/ui/design-system/src/lib/Pages/HomePage/GrowSection.tsx b/src/ui/design-system/src/lib/Pages/HomePage/GrowSection.tsx
index 4890b56f66..3ee7c352cb 100644
--- a/src/ui/design-system/src/lib/Pages/HomePage/GrowSection.tsx
+++ b/src/ui/design-system/src/lib/Pages/HomePage/GrowSection.tsx
@@ -8,39 +8,41 @@ const GrowSection: React.FC = () => {
   const cards = growGridData.sections[0].cards;
 
   return (
-    <section className="py-8">
+    <section className="pb-12">
       <div className="container mx-auto">
-        <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-6 py-10 border border-purple-100 dark:border-purple-900">
-          <div className="flex items-baseline mb-8">
-            <span className="flex items-center justify-center w-10 h-10 rounded-md bg-[#C084FC] mr-3">
-              <Icon name={growGridData.icon} className="w-6 h-6 text-black" />
-            </span>
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Builder toolkit to start, grow, and win</h2>
-          </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-            {cards.map((card, idx) => (
-              <a
-                key={idx}
-                href={card.href}
-                {...(typeof (card as any).target === 'string' ? { target: (card as any).target, rel: (card as any).target === '_blank' ? 'noopener noreferrer' : undefined } : {})}
-                className="flex flex-col items-start bg-purple-50 dark:bg-purple-950 rounded-xl p-6 shadow hover:shadow-lg transition group h-full border border-purple-100 dark:border-purple-800 hover:border-purple-400 dark:hover:border-purple-400 hover:underline hover:decoration-purple-500 dark:hover:decoration-white"
-                onClick={(e) => {
-                  event({
-                    action: GA_EVENTS.ACTION_CARD_CLICK,
-                    category: GA_CATEGORIES.ACTION_CARD,
-                    label: card.heading,
-                    location: true,
-                  });
-                }}
-              >
-                <span className="flex items-center justify-center w-10 h-10 rounded-md bg-purple-100 dark:bg-purple-800 mb-4">
-                  {card.icon && <Icon name={card.icon} className="w-6 h-6 text-purple-700 dark:text-purple-200" />}
-                </span>
-                <h3 className="text-lg font-semibold text-purple-900 dark:text-purple-100 mb-2 group-hover:text-purple-600 dark:group-hover:text-purple-300">{card.heading}</h3>
-                <p className="text-sm text-purple-800 dark:text-purple-300">{card.description}</p>
-              </a>
-            ))}
-          </div>
+        <div className="flex items-center gap-3 mb-6">
+          <span className="flex items-center justify-center w-9 h-9 rounded-lg bg-[#A855F7]">
+            <Icon name={growGridData.icon} className="w-5 h-5 text-white" />
+          </span>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white m-0">Builder toolkit to start, grow, and win</h2>
+        </div>
+        
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {cards.map((card, idx) => (
+            <a
+              key={idx}
+              href={card.href}
+              {...(typeof (card as any).target === 'string' ? { target: (card as any).target, rel: (card as any).target === '_blank' ? 'noopener noreferrer' : undefined } : {})}
+              className="group flex flex-col p-5 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 hover:border-[#A855F7] dark:hover:border-[#A855F7] transition-all duration-200 no-underline hover:no-underline hover:-translate-y-1 hover:shadow-md"
+              onClick={(e) => {
+                event({
+                  action: GA_EVENTS.ACTION_CARD_CLICK,
+                  category: GA_CATEGORIES.ACTION_CARD,
+                  label: card.heading,
+                  location: true,
+                });
+              }}
+            >
+              <span className="flex items-center justify-center w-10 h-10 rounded-lg bg-[#A855F7]/10 mb-4">
+                {card.icon && <Icon name={card.icon} className="w-5 h-5 text-[#A855F7]" />}
+              </span>
+              <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-1">
+                {card.heading}
+                <span className="opacity-0 group-hover:opacity-100 transition-opacity">→</span>
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">{card.description}</p>
+            </a>
+          ))}
         </div>
       </div>
     </section>
diff --git a/src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx b/src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx
index 65dbccff58..6363759660 100644
--- a/src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx
+++ b/src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx
@@ -4,29 +4,26 @@ import { event } from '@site/src/utils/gtags.client';
 import { GA_EVENTS, GA_CATEGORIES, GA_ACTIONS } from '@site/src/constants/ga-events';
 
 const HeroSection: React.FC = () => {
-  // const { colorMode } = useColorMode();
-  // const calendarSrc = colorMode === 'dark'
-  //   ? 'https://lu.ma/embed/calendar/cal-DBqbEn6mwZR13qQ/events?lt=dark'
-  //   : 'https://lu.ma/embed/calendar/cal-DBqbEn6mwZR13qQ/events';
   return (
-    <section className="container mx-auto pt-16 pb-6">
-      <div className="flex flex-col lg:flex-row items-center justify-between">
-        {/* Left: Hero Content */}
-        <div className="flex-1 max-w-2xl text-left">
-          <h1 className="text-3xl md:text-4xl font-bold mb-3 text-gray-900 dark:text-white">
+    <section className="container mx-auto pt-20 pb-16">
+      <div className="flex flex-col items-center text-center">
+        <div className="max-w-3xl">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight tracking-tight text-gray-900 dark:text-white">
             Turn decentralized finance into personal finance.
           </h1>
-          <p className="text-base md:text-lg text-gray-700 dark:text-gray-200 mb-4 max-w-xl">
-            <strong>Flow</strong> is the leading consumer layer-one network,
+          
+          <p className="text-lg md:text-xl text-gray-600 dark:text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
+            <strong className="text-gray-900 dark:text-white font-semibold">Flow</strong> is the leading consumer layer-one network,
             trusted by 1 million monthly active users. Chosen by top global brands
             like NBA, Disney, PayPal, NFL, and Ticketmaster,
             it is the foundation for the next generation of consumer finance:{" "}
-            <strong>global, always-on, and in real-time.</strong>
+            <strong className="text-gray-900 dark:text-white font-semibold">global, always-on, and in real-time.</strong>
           </p>
-          <div className="flex flex-col sm:flex-row gap-3 mb-4">
+          
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
             <a
               href="/blockchain-development-tutorials/forte"
-              className="px-6 py-2 rounded-lg bg-primary-purple text-white hover:text-white focus:text-white no-underline hover:no-underline font-bold text-base shadow-lg border border-gray-200 dark:border-gray-700 hover:opacity-90 focus:ring-2 focus:ring-primary-purple transition-colors text-center"
+              className="px-7 py-3 rounded-full bg-[#00EF8B] hover:bg-[#00D67D] text-black no-underline hover:no-underline font-semibold text-base transition-colors duration-200 text-center"
               onClick={() => {
                 event({
                   action: GA_EVENTS.ACTION_CARD_CLICK,
@@ -38,6 +35,7 @@ const HeroSection: React.FC = () => {
             >
               Automate DeFi
             </a>
+            
             <button
               type="button"
               onClick={() => {
@@ -49,30 +47,12 @@ const HeroSection: React.FC = () => {
                 });
                 window.location.href = '/blockchain-development-tutorials/cadence/getting-started';
               }}
-              className="px-6 py-2 rounded-lg bg-transparent text-black dark:text-white underline font-bold text-base border-none shadow-none focus:outline-none focus:underline hover:underline hover:text-green-600 dark:hover:text-green-400 transition-colors text-center cursor-pointer"
-              style={{ background: 'transparent' }}
+              className="px-7 py-3 rounded-full bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-semibold text-base border-none hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors duration-200 text-center cursor-pointer"
             >
               Quickstart
             </button>
           </div>
         </div>
-        {/* Right: Calendar card (visible on lg and up) */}
-        {/* <div className="flex-1 hidden lg:flex justify-end items-center pl-8">
-          <div className="bg-white dark:bg-gray-900 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 p-4 w-[560px] max-w-full flex flex-col items-center">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Upcoming Events</h3>
-            <iframe
-              src={calendarSrc}
-              width="520"
-              height="260"
-              frameBorder="0"
-              style={{ border: '1px solid #bfcbda88', borderRadius: 8 }}
-              allowFullScreen
-              aria-hidden="false"
-              tabIndex={0}
-              title="Flow Events Calendar"
-            />
-          </div>
-        </div> */}
       </div>
     </section>
   );
diff --git a/src/ui/design-system/src/lib/Pages/HomePage/QuickStartShowcase.tsx b/src/ui/design-system/src/lib/Pages/HomePage/QuickStartShowcase.tsx
index 8cdafccb6b..6f6a0e30f6 100644
--- a/src/ui/design-system/src/lib/Pages/HomePage/QuickStartShowcase.tsx
+++ b/src/ui/design-system/src/lib/Pages/HomePage/QuickStartShowcase.tsx
@@ -376,7 +376,7 @@ function QuickStartShowcaseContent() {
 
   const currentScript = SCRIPTS[selected];
   const currentInputs = inputValues[selected] || {};
-  const { user } = useFlowCurrentUser();
+  const { user, authenticate } = useFlowCurrentUser();
 
   // Create flow client for the current script's network
   const flowClientForScript = useMemo(() => {
@@ -434,6 +434,7 @@ function QuickStartShowcaseContent() {
   });
 
   const [showTxDialog, setShowTxDialog] = useState(false);
+  const [lastShownTxId, setLastShownTxId] = useState<string | null>(null);
 
   const handleExecuteTransaction = async () => {
     // If not logged in, authentication will be handled by Connect component
@@ -463,12 +464,13 @@ function QuickStartShowcaseContent() {
     });
   };
 
-  // Show dialog when transaction ID is available
+  // Show dialog only when we get a NEW transaction ID
   useEffect(() => {
-    if (txId && currentScript.type === 'transaction') {
+    if (txId && txId !== lastShownTxId && currentScript.type === 'transaction') {
       setShowTxDialog(true);
+      setLastShownTxId(txId);
     }
-  }, [txId, currentScript]);
+  }, [txId, currentScript, lastShownTxId]);
 
   const handleTabClick = (idx: number, item: string) => {
     setSelected(idx);
@@ -508,31 +510,31 @@ function QuickStartShowcaseContent() {
 
   return (
     <section 
-      className="container mx-auto pt-1 pb-8 hidden lg:block"
+      className="container mx-auto pb-12 hidden lg:block"
     >
-      <div className="flex items-center justify-between mb-4">
-        <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
           Try Cadence live
         </h2>
       </div>
       <div 
-        className="grid grid-cols-1 lg:grid-cols-3 gap-0 items-stretch bg-white dark:bg-gray-900 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden"
+        className="grid grid-cols-1 lg:grid-cols-3 gap-0 items-stretch bg-white dark:bg-[#0d1117] rounded-2xl border-2 border-gray-200 dark:border-gray-700 overflow-hidden shadow-lg dark:shadow-2xl dark:shadow-black/50"
       >
         {/* Left: Selector */}
-        <div className="flex flex-col w-full items-center justify-center bg-gray-50 dark:bg-gray-800/50 border-r border-gray-200 dark:border-gray-700">
-          <div className="w-full p-4 flex flex-col gap-3 h-[500px] justify-center overflow-y-auto" style={{ maxWidth: 320 }}>
+        <div className="flex flex-col w-full items-center justify-center bg-gray-100 dark:bg-[#161b22] border-r-2 border-gray-200 dark:border-gray-700">
+          <div className="w-full p-4 flex flex-col gap-1 h-[500px] justify-center overflow-y-auto" style={{ maxWidth: 320 }}>
             {ITEMS.map((item, idx) => (
               <button
                 key={item}
                 type="button"
                 onClick={() => handleTabClick(idx, item)}
                 className={clsx(
-                  "w-full text-left px-4 py-3 transition font-medium text-base cursor-pointer hover:bg-white/50 dark:hover:bg-gray-900/50 rounded-lg",
+                  "w-full text-left px-4 py-3 transition text-sm cursor-pointer rounded-lg border-none",
                   selected === idx
-                    ? "bg-white dark:bg-gray-900 rounded-xl shadow-sm text-green-600 dark:text-green-400 font-bold"
-                    : "text-gray-900 dark:text-gray-100 bg-transparent"
+                    ? "bg-white dark:bg-[#00EF8B]/10 text-gray-900 dark:text-[#00EF8B] font-medium shadow-sm dark:shadow-none border-l-2 border-l-[#00EF8B]"
+                    : "text-gray-600 dark:text-gray-400 bg-transparent hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-white"
                 )}
-                style={{ outline: 'none', border: 'none' }}
+                style={{ outline: 'none' }}
               >
                 {item}
               </button>
@@ -543,10 +545,10 @@ function QuickStartShowcaseContent() {
         {/* Right: Code + Results (spans 2 columns) */}
         <div className="lg:col-span-2 flex flex-col w-full h-[500px]">
           {/* Code Display */}
-          <div className="flex-1 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 overflow-hidden">
+          <div className="flex-1 bg-gray-50 dark:bg-[#0d1117] overflow-hidden">
             <div className="h-full flex flex-col">
               {/* Code Header */}
-              <div className="px-4 py-2 bg-gray-100 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between gap-2 flex-wrap">
+              <div className="px-4 py-2 bg-white dark:bg-[#161b22] border-b-2 border-gray-200 dark:border-gray-700 flex items-center justify-between gap-2 flex-wrap">
                 <div className="flex items-center gap-2">
                   <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
                     {currentScript.type === 'transaction' ? 'Cadence Transaction' : 'Cadence Script'}
@@ -572,7 +574,7 @@ function QuickStartShowcaseContent() {
                         onChange={(e) => handleInputChange(key, e.target.value)}
                         placeholder={currentScript.defaultArgs[key] || ''}
                         className={clsx(
-                          "text-xs px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono",
+                          "text-xs px-2 py-1.5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-[#00EF8B] font-mono",
                           key === 'amount' ? 'w-16' : 'w-[140px]'
                         )}
                       />
@@ -585,7 +587,7 @@ function QuickStartShowcaseContent() {
                           await refetch();
                         }}
                         disabled={isLoading}
-                        className="text-xs px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-full shadow-md font-medium border-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap transition-colors"
+                        className="text-xs px-4 py-1.5 bg-[#00EF8B] hover:bg-[#00D67D] text-black rounded-md font-medium border-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap transition-colors"
                       >
                         {isLoading ? 'Running...' : 'Run Script'}
                       </button>
@@ -595,16 +597,16 @@ function QuickStartShowcaseContent() {
                         <button
                           onClick={handleExecuteTransaction}
                           disabled={txPending}
-                          className="text-xs px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-full shadow-md font-medium border-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap transition-colors"
+                          className="text-xs px-4 py-1.5 bg-[#00EF8B] hover:bg-[#00D67D] text-black rounded-md font-medium border-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap transition-colors"
                         >
                           {txPending ? 'Executing...' : 'Execute'}
                         </button>
                       ) : (
                         <button
                           onClick={async () => {
-                            await fcl.authenticate();
+                            await authenticate();
                           }}
-                          className="text-xs px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-full shadow-md font-medium border-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap transition-colors"
+                          className="text-xs px-4 py-1.5 bg-[#00EF8B] hover:bg-[#00D67D] text-black rounded-md font-medium border-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap transition-colors"
                         >
                           Sign In
                         </button>
@@ -613,7 +615,7 @@ function QuickStartShowcaseContent() {
                     {(currentScript as any).editLink && (
                       <button
                         onClick={() => window.open((currentScript as any).editLink, '_blank', 'noopener,noreferrer')}
-                        className="text-xs px-4 py-2 bg-transparent hover:bg-purple-50 dark:hover:bg-purple-900/20 text-purple-600 dark:text-purple-400 rounded-full border border-purple-500 dark:border-purple-400 font-medium whitespace-nowrap transition-colors cursor-pointer"
+                        className="text-xs px-4 py-1.5 bg-gray-800 dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white rounded-md font-medium whitespace-nowrap transition-colors cursor-pointer border-none"
                       >
                         Edit
                       </button>
@@ -623,7 +625,7 @@ function QuickStartShowcaseContent() {
               </div>
               
               {/* Code Content */}
-              <div className="flex-1 overflow-auto p-4">
+              <div className="flex-1 overflow-auto p-4 bg-[#fafbfc] dark:bg-[#0d1117]">
                 {isBrowser ? (
                   <Highlight
                     Prism={Prism}
@@ -632,7 +634,7 @@ function QuickStartShowcaseContent() {
                     language="cadence"
                   >
                     {({ className, style, tokens, getLineProps, getTokenProps }) => (
-                      <pre className={clsx(className, "text-xs font-mono")} style={style}>
+                      <pre className={clsx(className, "text-xs font-mono")} style={{ ...style, background: 'transparent' }}>
                         {tokens.map((line, i) => (
                           <div key={i} {...getLineProps({ line })}>
                             {line.map((token, key) => (
@@ -653,19 +655,89 @@ function QuickStartShowcaseContent() {
           </div>
 
           {/* Results Display */}
-          <div className="h-48 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+          <div className={clsx(
+            "h-48 border-t-2 border-gray-200 dark:border-gray-700",
+            // Success state (has result)
+            (formattedResult || (currentScript.type === 'transaction' && txId && !txError)) 
+              ? "bg-[#f0fdf4] dark:bg-[#00EF8B]/5"
+              // Error state
+              : ((currentScript.type === 'transaction' && txError) || (currentScript.type === 'script' && error))
+                ? "bg-red-50 dark:bg-red-900/10"
+                // Loading state
+                : (isLoading || txPending)
+                  ? "bg-blue-50 dark:bg-blue-900/10"
+                  // Default/idle state
+                  : "bg-gray-50 dark:bg-gray-800/30"
+          )}>
             <div className="h-full flex flex-col">
               {/* Results Header */}
-              <div className="px-4 py-2 bg-gray-100 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700">
-                <span className="text-xs font-medium text-gray-600 dark:text-gray-400">Result</span>
+              <div className={clsx(
+                "px-4 py-2 border-b flex items-center gap-2",
+                // Success state
+                (formattedResult || (currentScript.type === 'transaction' && txId && !txError))
+                  ? "bg-[#dcfce7] dark:bg-[#00EF8B]/10 border-[#bbf7d0] dark:border-[#00EF8B]/20"
+                  // Error state
+                  : ((currentScript.type === 'transaction' && txError) || (currentScript.type === 'script' && error))
+                    ? "bg-red-100 dark:bg-red-900/20 border-red-200 dark:border-red-800"
+                    // Loading state
+                    : (isLoading || txPending)
+                      ? "bg-blue-100 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800"
+                      // Default/idle state
+                      : "bg-gray-100 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700"
+              )}>
+                {/* Dynamic icon based on state */}
+                {(formattedResult || (currentScript.type === 'transaction' && txId && !txError)) ? (
+                  // Success checkmark
+                  <svg className="w-4 h-4 text-green-600 dark:text-[#00EF8B]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                ) : ((currentScript.type === 'transaction' && txError) || (currentScript.type === 'script' && error)) ? (
+                  // Error icon
+                  <svg className="w-4 h-4 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                ) : (isLoading || txPending) ? (
+                  // Loading spinner
+                  <svg className="w-4 h-4 text-blue-600 dark:text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                ) : (
+                  // Default terminal/console icon
+                  <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <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>
+                )}
+                <span className={clsx(
+                  "text-xs font-semibold",
+                  (formattedResult || (currentScript.type === 'transaction' && txId && !txError))
+                    ? "text-green-700 dark:text-[#00EF8B]"
+                    : ((currentScript.type === 'transaction' && txError) || (currentScript.type === 'script' && error))
+                      ? "text-red-700 dark:text-red-400"
+                      : (isLoading || txPending)
+                        ? "text-blue-700 dark:text-blue-400"
+                        : "text-gray-600 dark:text-gray-400"
+                )}>
+                  {(formattedResult || (currentScript.type === 'transaction' && txId && !txError))
+                    ? "Result"
+                    : ((currentScript.type === 'transaction' && txError) || (currentScript.type === 'script' && error))
+                      ? "Error"
+                      : (isLoading || txPending)
+                        ? "Running..."
+                        : "Output"
+                  }
+                </span>
               </div>
               
               {/* Results Content */}
-              <div className="flex-1 overflow-auto p-4">
+              <div className="flex-1 overflow-auto p-4 bg-white/50 dark:bg-transparent">
                 {(currentScript.type === 'transaction' && txError) || (currentScript.type === 'script' && error) ? (
-                  <div className="text-sm text-red-600 dark:text-red-400">
-                    <p className="font-semibold mb-1">
-                      {currentScript.type === 'transaction' ? 'Transaction Error:' : 'Error:'}
+                  <div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded-lg p-3 border border-red-200 dark:border-red-800">
+                    <p className="font-semibold mb-1 flex items-center gap-2">
+                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                      {currentScript.type === 'transaction' ? 'Transaction Error' : 'Error'}
                     </p>
                     <p className="font-mono text-xs whitespace-pre-wrap break-words">
                       {(() => {
@@ -682,8 +754,8 @@ function QuickStartShowcaseContent() {
                       const errAny = err as any;
                       return err?.stack || errAny?.cause?.message || (errAny?.cause && String(errAny.cause)) ? (
                         <details className="mt-2">
-                          <summary className="text-xs cursor-pointer text-red-500 dark:text-red-400">Show details</summary>
-                          <pre className="text-xs mt-1 p-2 bg-red-50 dark:bg-red-900/20 rounded overflow-auto whitespace-pre-wrap break-words">
+                          <summary className="text-xs cursor-pointer text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300">Show details</summary>
+                          <pre className="text-xs mt-1 p-2 bg-red-100 dark:bg-red-900/30 rounded overflow-auto whitespace-pre-wrap break-words">
                             {err?.stack || errAny?.cause?.message || (errAny?.cause && String(errAny.cause)) || JSON.stringify(err, null, 2)}
                           </pre>
                         </details>
@@ -693,8 +765,8 @@ function QuickStartShowcaseContent() {
                 ) : isLoading || txPending ? (
                   <div className="flex items-center justify-center h-full">
                     <div className="text-center">
-                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-3"></div>
-                      <p className="text-sm text-gray-500 dark:text-gray-400">
+                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#00EF8B] mx-auto mb-3"></div>
+                      <p className="text-sm text-gray-600 dark:text-gray-300">
                         {currentScript.type === 'transaction' ? 'Executing transaction...' : 'Executing script...'}
                       </p>
                     </div>
@@ -702,24 +774,29 @@ function QuickStartShowcaseContent() {
                 ) : currentScript.type === 'transaction' ? (
                   <div className="text-sm">
                     {!user?.loggedIn ? (
-                      <p className="text-gray-500 dark:text-gray-400">Connect your wallet to execute this transaction</p>
+                      <div className="flex items-center gap-3 text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800/50 rounded-lg p-3">
+                        <svg className="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                        </svg>
+                        <span>Connect your wallet to execute this transaction</span>
+                      </div>
                     ) : txId ? (
                       <div className="space-y-2">
-                        <div>
-                          <span className="text-gray-600 dark:text-gray-400">Transaction ID: </span>
-                          <span className="font-mono text-gray-800 dark:text-gray-200 break-all">{txId}</span>
+                        <div className="flex items-center gap-2">
+                          <span className="text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">TX ID</span>
+                          <span className="font-mono text-xs text-gray-800 dark:text-gray-200 break-all bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">{txId}</span>
                         </div>
                         {transactionStatus && (
                           <>
-                            <div>
-                              <span className="text-gray-600 dark:text-gray-400">Status: </span>
+                            <div className="flex items-center gap-2">
+                              <span className="text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">Status</span>
                               <span className={clsx(
-                                "font-mono",
-                                transactionStatus.status === 4 ? "text-green-600 dark:text-green-400" :
-                                transactionStatus.status === 5 ? "text-red-600 dark:text-red-400" :
-                                transactionStatus.status === 3 ? "text-green-600 dark:text-green-400" :
-                                transactionStatus.status === 2 ? "text-blue-600 dark:text-blue-400" :
-                                "text-yellow-600 dark:text-yellow-400"
+                                "font-mono text-xs px-2 py-1 rounded-full",
+                                transactionStatus.status === 4 ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400" :
+                                transactionStatus.status === 5 ? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" :
+                                transactionStatus.status === 3 ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400" :
+                                transactionStatus.status === 2 ? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400" :
+                                "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400"
                               )}>
                                 {transactionStatus.status === 4 ? "Sealed" :
                                  transactionStatus.status === 5 ? "Expired" :
@@ -729,23 +806,23 @@ function QuickStartShowcaseContent() {
                               </span>
                             </div>
                             {(transactionStatus.status === 2 || transactionStatus.status === 3 || transactionStatus.status === 4 || transactionStatus.status === 5) && transactionStatus.statusCode !== undefined && (
-                              <div>
-                                <span className="text-gray-600 dark:text-gray-400">Execution: </span>
+                              <div className="flex items-center gap-2">
+                                <span className="text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">Execution</span>
                                 <span className={clsx(
-                                  "font-mono",
-                                  transactionStatus.statusCode === 0 ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"
+                                  "font-mono text-xs px-2 py-1 rounded-full",
+                                  transactionStatus.statusCode === 0 ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400" : "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400"
                                 )}>
                                   {transactionStatus.statusCode === 0 ? "Success" : "Failed"}
                                 </span>
                               </div>
                             )}
                             {(transactionStatus.status === 2 || transactionStatus.status === 3 || transactionStatus.status === 4 || transactionStatus.status === 5) && transactionStatus.events && transactionStatus.events.length > 0 && (
-                              <div className="space-y-2">
-                                <div className="text-gray-600 dark:text-gray-400">Events ({transactionStatus.events.length}):</div>
+                              <div className="space-y-2 mt-2">
+                                <div className="text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">Events ({transactionStatus.events.length})</div>
                                 <div className="font-mono text-xs space-y-1 max-h-32 overflow-auto">
                                   {transactionStatus.events.map((event: any, idx: number) => (
-                                    <div key={idx} className="p-2 bg-gray-50 dark:bg-gray-800 rounded">
-                                      <div className="text-gray-800 dark:text-gray-200 break-all">{event.type}</div>
+                                    <div key={idx} className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded border border-blue-100 dark:border-blue-800">
+                                      <div className="text-blue-800 dark:text-blue-300 break-all">{event.type}</div>
                                       {event.payload && (
                                         <div className="text-gray-600 dark:text-gray-400 mt-1 whitespace-pre-wrap break-words">
                                           {typeof event.payload === 'string' ? event.payload : JSON.stringify(event.payload, null, 2)}
@@ -757,42 +834,47 @@ function QuickStartShowcaseContent() {
                               </div>
                             )}
                             {transactionStatus.errorMessage && (
-                              <div className="text-red-600 dark:text-red-400">
-                                <p className="font-semibold mb-1">Error:</p>
+                              <div className="text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded-lg p-2 border border-red-200 dark:border-red-800 mt-2">
+                                <p className="font-semibold mb-1 text-xs">Error:</p>
                                 <p className="font-mono text-xs whitespace-pre-wrap break-words">{transactionStatus.errorMessage}</p>
                               </div>
                             )}
                           </>
                         )}
                         {txStatusError && (
-                          <div className="text-red-600 dark:text-red-400 text-xs">
+                          <div className="text-red-600 dark:text-red-400 text-xs bg-red-50 dark:bg-red-900/20 rounded p-2">
                             Error fetching transaction status: {txStatusError.message}
                           </div>
                         )}
                       </div>
                     ) : (
-                      <p className="text-gray-500 dark:text-gray-400">Click "Execute Transaction" to run this transaction</p>
+                      <div className="flex items-center gap-3 text-gray-600 dark:text-gray-300">
+                        <svg className="w-5 h-5 text-[#00EF8B]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                        </svg>
+                        <span>Click "Execute" to run this transaction</span>
+                      </div>
                     )}
                   </div>
                 ) : formattedResult ? (
                   <div className="text-sm">
                     {formattedResult.type === 'text' && (
-                      <p className="font-mono text-gray-800 dark:text-gray-200">{formattedResult.value}</p>
+                      <p className="font-mono text-gray-800 dark:text-[#00EF8B] bg-gray-100 dark:bg-[#00EF8B]/10 px-3 py-2 rounded-lg inline-block">{formattedResult.value}</p>
                     )}
                     {formattedResult.type === 'storage' && (
-                      <div className="space-y-2">
-                        <div className="flex justify-between items-center">
-                          <span className="text-gray-600 dark:text-gray-400">Used:</span>
-                          <span className="font-mono font-semibold">
+                      <div className="space-y-3 max-w-xs">
+                        <div className="flex justify-between items-center bg-gray-100 dark:bg-gray-800/50 px-3 py-2 rounded-lg">
+                          <span className="text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">Used</span>
+                          <span className="font-mono font-semibold text-gray-800 dark:text-gray-200">
                             {(typeof formattedResult.value.usedMB === 'number' 
                               ? formattedResult.value.usedMB 
                               : parseFloat(formattedResult.value.usedMB) || 0
                             ).toFixed(2)} MB
                           </span>
                         </div>
-                        <div className="flex justify-between items-center">
-                          <span className="text-gray-600 dark:text-gray-400">Capacity:</span>
-                          <span className="font-mono font-semibold">
+                        <div className="flex justify-between items-center bg-gray-100 dark:bg-gray-800/50 px-3 py-2 rounded-lg">
+                          <span className="text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">Capacity</span>
+                          <span className="font-mono font-semibold text-gray-800 dark:text-gray-200">
                             {(typeof formattedResult.value.capacityMB === 'number' 
                               ? formattedResult.value.capacityMB 
                               : parseFloat(formattedResult.value.capacityMB) || 0
@@ -803,18 +885,18 @@ function QuickStartShowcaseContent() {
                     )}
                     {formattedResult.type === 'nft' && (
                       <div className="space-y-2">
-                        <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">NFT Collections by Address:</p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mb-2 uppercase tracking-wide">NFT Collections by Address</p>
                         <div className="font-mono text-xs max-h-32 overflow-auto">
                           {Object.keys(formattedResult.value).length === 0 ? (
                             <p className="text-gray-500 dark:text-gray-400">No NFTs found</p>
                           ) : (
                             Object.entries(formattedResult.value).map(([address, nfts]: [string, any]) => (
-                              <div key={address} className="mb-3 p-2 bg-gray-50 dark:bg-gray-800 rounded">
+                              <div key={address} className="mb-3 p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-100 dark:border-blue-800">
                                 <p className="text-blue-600 dark:text-blue-400 font-semibold mb-1">{address}</p>
                                 {nfts && typeof nfts === 'object' && Object.keys(nfts).length > 0 ? (
                                   <div className="space-y-1">
                                     {Object.entries(nfts).map(([id, display]: [string, any]) => (
-                                      <div key={id} className="text-xs pl-2 border-l-2 border-gray-300 dark:border-gray-600">
+                                      <div key={id} className="text-xs pl-2 border-l-2 border-blue-300 dark:border-blue-600">
                                         <span className="text-gray-600 dark:text-gray-400">ID: {id}</span>
                                         {display && typeof display === 'object' && display.name && (
                                           <span className="ml-2 text-gray-800 dark:text-gray-200">
@@ -835,13 +917,32 @@ function QuickStartShowcaseContent() {
                     )}
                   </div>
                 ) : (
-                  <p className="text-sm text-gray-500 dark:text-gray-400">Click "Run Script" to see result.</p>
+                  <div className="flex items-center gap-3 text-gray-600 dark:text-gray-300">
+                    <svg className="w-5 h-5 text-[#00EF8B]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <span>Click "Run Script" to see result</span>
+                  </div>
                 )}
               </div>
             </div>
           </div>
         </div>
       </div>
+
+      {/* Made with React SDK attribution */}
+      <div className="mt-4 text-center">
+        <span className="text-sm text-gray-500 dark:text-gray-400">
+          Made with{' '}
+          <a
+            href="/build/tools/react-sdk"
+            className="text-[#00EF8B] hover:text-[#00D67D] font-medium no-underline hover:underline"
+          >
+            React SDK
+          </a>
+        </span>
+      </div>
       
       {/* Transaction Dialog */}
       <TransactionDialog
diff --git a/src/ui/design-system/src/lib/Pages/HomePage/ToolsSection.tsx b/src/ui/design-system/src/lib/Pages/HomePage/ToolsSection.tsx
index a693a110a1..78a96d19f8 100644
--- a/src/ui/design-system/src/lib/Pages/HomePage/ToolsSection.tsx
+++ b/src/ui/design-system/src/lib/Pages/HomePage/ToolsSection.tsx
@@ -8,39 +8,41 @@ const ToolsSection: React.FC = () => {
   const cards = toolsGridData.sections[0].cards;
 
   return (
-    <section className="py-8">
+    <section className="pb-12">
       <div className="container mx-auto">
-        <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-6 py-10 border border-green-100 dark:border-green-900">
-          <div className="flex items-baseline mb-8">
-            <span className="flex items-center justify-center w-10 h-10 rounded-md bg-green-500 mr-3">
-              <Icon name={toolsGridData.icon} className="w-6 h-6 text-white" />
-            </span>
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Tools</h2>
-          </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-            {cards.map((card, idx) => (
-              <a
-                key={idx}
-                href={card.href}
-                {...(typeof (card as any).target === 'string' ? { target: (card as any).target, rel: (card as any).target === '_blank' ? 'noopener noreferrer' : undefined } : {})}
-                className="flex flex-col items-start bg-green-50 dark:bg-green-950 rounded-xl p-6 shadow hover:shadow-lg transition group h-full border border-green-100 dark:border-green-800 hover:border-green-400 dark:hover:border-green-400 hover:underline hover:decoration-green-500 dark:hover:decoration-white"
-                onClick={(e) => {
-                  event({
-                    action: GA_EVENTS.ACTION_CARD_CLICK,
-                    category: GA_CATEGORIES.ACTION_CARD,
-                    label: card.heading,
-                    location: true,
-                  });
-                }}
-              >
-                <span className="flex items-center justify-center w-10 h-10 rounded-md bg-green-100 dark:bg-green-800 mb-4">
-                  {card.icon && <Icon name={card.icon} className="w-6 h-6 text-green-700 dark:text-green-200" />}
-                </span>
-                <h3 className="text-lg font-semibold text-green-900 dark:text-green-100 mb-2 group-hover:text-green-600 dark:group-hover:text-green-300">{card.heading}</h3>
-                <p className="text-sm text-green-800 dark:text-green-300">{card.description}</p>
-              </a>
-            ))}
-          </div>
+        <div className="flex items-center gap-3 mb-6">
+          <span className="flex items-center justify-center w-9 h-9 rounded-lg bg-[#00EF8B]">
+            <Icon name={toolsGridData.icon} className="w-5 h-5 text-black" />
+          </span>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white m-0">Tools</h2>
+        </div>
+        
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {cards.map((card, idx) => (
+            <a
+              key={idx}
+              href={card.href}
+              {...(typeof (card as any).target === 'string' ? { target: (card as any).target, rel: (card as any).target === '_blank' ? 'noopener noreferrer' : undefined } : {})}
+              className="group flex flex-col p-5 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 hover:border-[#00EF8B] dark:hover:border-[#00EF8B] transition-all duration-200 no-underline hover:no-underline hover:-translate-y-1 hover:shadow-md"
+              onClick={(e) => {
+                event({
+                  action: GA_EVENTS.ACTION_CARD_CLICK,
+                  category: GA_CATEGORIES.ACTION_CARD,
+                  label: card.heading,
+                  location: true,
+                });
+              }}
+            >
+              <span className="flex items-center justify-center w-10 h-10 rounded-lg bg-[#00EF8B]/10 mb-4">
+                {card.icon && <Icon name={card.icon} className="w-5 h-5 text-[#00EF8B]" />}
+              </span>
+              <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-1">
+                {card.heading}
+                <span className="opacity-0 group-hover:opacity-100 transition-opacity">→</span>
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">{card.description}</p>
+            </a>
+          ))}
         </div>
       </div>
     </section>
diff --git a/src/ui/design-system/src/lib/Pages/HomePage/WhyFlowSection.tsx b/src/ui/design-system/src/lib/Pages/HomePage/WhyFlowSection.tsx
index 8c5e52e406..47d8252968 100644
--- a/src/ui/design-system/src/lib/Pages/HomePage/WhyFlowSection.tsx
+++ b/src/ui/design-system/src/lib/Pages/HomePage/WhyFlowSection.tsx
@@ -4,10 +4,10 @@ import { GA_EVENTS, GA_CATEGORIES, GA_ACTIONS } from '@site/src/constants/ga-eve
 
 const WhyFlowSection: React.FC = () => {
   return (
-    <section className="container mx-auto pt-8 pb-16">
+    <section className="container mx-auto pb-12">
       <a
         href="/build/flow"
-        className="block bg-white dark:bg-gray-900 rounded-2xl shadow-lg hover:shadow-md p-8 pt-6 pb-3 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 cursor-pointer no-underline hover:no-underline"
+        className="group block bg-gradient-to-r from-gray-900 to-gray-800 dark:from-gray-800 dark:to-gray-900 rounded-2xl p-8 border border-gray-800 dark:border-gray-700 hover:border-[#00EF8B]/50 transition-colors duration-200 cursor-pointer no-underline hover:no-underline"
         onClick={() => {
           event({
             action: GA_EVENTS.ACTION_CARD_CLICK,
@@ -17,28 +17,25 @@ const WhyFlowSection: React.FC = () => {
           });
         }}
       >
-        <div className="flex flex-col gap-2">
-          {/* Heading */}
-          <div className="flex items-start">
-            <div className="w-1 h-8 bg-[#00E099] mr-3 flex-shrink-0"></div>
-            <h2 className="text-lg font-semibold text-gray-900 dark:text-white leading-tight mt-0.5" style={{ fontSize: '20px', fontWeight: 600 }}>
-              Why Flow?
-            </h2>
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
+          <div className="flex-1">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-1.5 h-6 bg-[#00EF8B] rounded-full"></div>
+              <h2 className="text-xl font-semibold text-white leading-none m-0">
+                Why Flow?
+              </h2>
+            </div>
+            
+            <p className="text-base text-gray-300 leading-relaxed max-w-2xl">
+              With <strong className="text-white">600% YoY TVL growth</strong> to $100M+ and the <strong className="text-white">safest risk-adjusted yields</strong> for consumers in DeFi, Flow is uniquely positioned to power the future of Consumer DeFi.
+            </p>
           </div>
           
-          {/* Body Text and CTA Link */}
-          <div className="flex flex-row items-start justify-between gap-8">
-            <p className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed flex-1 max-w-3xl">
-              With <strong>600% YoY TVL growth</strong> to $100M+ and the <strong>safest risk-adjusted yields</strong> for consumers in DeFi, Flow is uniquely positioned to power the future of Consumer DeFi.
-            </p>
-            
-            {/* Right: CTA Link */}
-            <div className="inline-flex items-center text-gray-900 dark:text-white font-semibold text-lg hover:text-green-600 dark:hover:text-green-400 transition-colors leading-tight flex-shrink-0">
-              Learn more
-              <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-              </svg>
-            </div>
+          <div className="flex items-center text-[#00EF8B] font-medium group-hover:gap-3 gap-2 transition-all duration-200 shrink-0">
+            Learn more
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
           </div>
         </div>
       </a>