diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index 4a947b8..de47b40 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -121,149 +121,167 @@ export default function PricingSection() {
 
   return (
     <section className="py-24 px-4 max-w-7xl mx-auto">
-      <div className="text-center mb-16">
-        <h2 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white mb-6">
-          Traffic based plans that match your growth
+      <div className="text-center mb-12">
+        <h2 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white mb-6 tracking-tight">
+          Transparent Pricing
         </h2>
         <p className="text-xl text-neutral-600 dark:text-neutral-400">
-          Sign up for 30-day free trial. No credit card required.
+          Scale with your traffic. No hidden fees.
         </p>
       </div>
 
-      {/* Controls Container */}
-      <div className="max-w-3xl mx-auto mb-20 bg-neutral-100 dark:bg-neutral-800/50 rounded-2xl p-8 border border-neutral-200 dark:border-neutral-800">
+      {/* Unified Container */}
+      <div className="max-w-7xl mx-auto border border-neutral-200 dark:border-neutral-800 rounded-3xl bg-white/50 dark:bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20">
         
-        {/* Slider */}
-        <div className="mb-12">
-          <div className="flex justify-between text-sm font-medium text-neutral-500 mb-4">
-            <span>10k</span>
-            <span className="text-brand-orange font-bold text-lg">
-              Up to {currentTraffic.label} monthly pageviews
-            </span>
-            <span>10M+</span>
-          </div>
-          <input
-            type="range"
-            min="0"
-            max={TRAFFIC_TIERS.length - 1}
-            step="1"
-            value={sliderIndex}
-            onChange={(e) => setSliderIndex(parseInt(e.target.value))}
-            className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange"
-          />
-        </div>
-
-        {/* Toggle */}
-        <div className="flex justify-center items-center gap-4">
-          <span className={!isYearly ? 'text-neutral-900 dark:text-white font-medium' : 'text-neutral-500'}>Monthly</span>
-          <button
-            onClick={() => setIsYearly(!isYearly)}
-            className="relative w-14 h-8 bg-neutral-200 dark:bg-neutral-700 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
-          >
-            <div
-              className={`absolute top-1 left-1 w-6 h-6 bg-white rounded-full shadow-sm transition-transform duration-200 ${
-                isYearly ? 'translate-x-6 bg-brand-orange' : 'translate-x-0'
-              }`}
+        {/* Top Toolbar */}
+        <div className="p-8 border-b border-neutral-200 dark:border-neutral-800 flex flex-col md:flex-row items-center justify-between gap-8 bg-neutral-50/50 dark:bg-neutral-900/50">
+          <div className="w-full md:w-2/3">
+            <div className="flex justify-between text-sm font-medium text-neutral-500 mb-4">
+              <span>10k</span>
+              <span className="text-brand-orange font-bold text-lg">
+                Up to {currentTraffic.label} monthly pageviews
+              </span>
+              <span>10M+</span>
+            </div>
+            <input
+              type="range"
+              min="0"
+              max={TRAFFIC_TIERS.length - 1}
+              step="1"
+              value={sliderIndex}
+              onChange={(e) => setSliderIndex(parseInt(e.target.value))}
+              className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange"
             />
-          </button>
-          <span className={isYearly ? 'text-neutral-900 dark:text-white font-medium' : 'text-neutral-500'}>
-            Yearly <span className="text-xs text-brand-orange bg-brand-orange/10 px-2 py-0.5 rounded-full ml-1">1 month free</span>
-          </span>
+          </div>
+
+          <div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex shrink-0">
+            <button
+              onClick={() => setIsYearly(false)}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
+                !isYearly 
+                  ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm' 
+                  : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
+              }`}
+            >
+              Monthly
+            </button>
+            <button
+              onClick={() => setIsYearly(true)}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-all flex items-center gap-2 ${
+                isYearly 
+                  ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm' 
+                  : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
+              }`}
+            >
+              Yearly
+              <span className="text-[10px] bg-brand-orange/10 text-brand-orange px-1.5 py-0.5 rounded-full font-bold uppercase tracking-wide">
+                1 month free
+              </span>
+            </button>
+          </div>
         </div>
-      </div>
 
-      {/* Pricing Cards Grid */}
-      <div className="grid md:grid-cols-4 gap-6">
-        {PLANS.map((plan) => {
-          const priceDetails = getPriceDetails(plan.id)
+        {/* Pricing Grid */}
+        <div className="grid md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-neutral-200 dark:divide-neutral-800">
+          {PLANS.map((plan) => {
+            const priceDetails = getPriceDetails(plan.id)
+            const isTeam = plan.id === 'team'
 
-          return (
-            <div key={plan.id} className="card-glass p-8 flex flex-col relative overflow-hidden">
-              <div className="mb-8">
-                <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">{plan.name}</h3>
+            return (
+              <div key={plan.id} className={`p-8 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50'}`}>
+                {isTeam && (
+                  <div className="absolute top-0 left-0 w-full h-1 bg-brand-orange" />
+                )}
                 
-                {priceDetails ? (
-                  isYearly ? (
-                    // YEARLY VIEW
-                    <div>
-                      {/* 1. Big Price = Yearly Total */}
+                <div className="mb-8">
+                  <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">{plan.name}</h3>
+                  <p className="text-sm text-neutral-500 min-h-[40px] mb-4">{plan.description}</p>
+                  
+                  {priceDetails ? (
+                    isYearly ? (
+                      <div>
+                        <div className="flex items-baseline gap-1">
+                          <span className="text-4xl font-bold text-neutral-900 dark:text-white">
+                            €{priceDetails.yearlyTotal}
+                          </span>
+                          <span className="text-neutral-500 font-medium">/year</span>
+                        </div>
+                        <div className="flex items-center gap-2 mt-2 text-sm font-medium">
+                          <span className="text-neutral-400 line-through decoration-neutral-400">
+                            €{priceDetails.baseMonthly}/mo
+                          </span>
+                          <span className="text-brand-orange">
+                            €{priceDetails.effectiveMonthly}/mo
+                          </span>
+                        </div>
+                      </div>
+                    ) : (
                       <div className="flex items-baseline gap-1">
                         <span className="text-4xl font-bold text-neutral-900 dark:text-white">
-                          €{priceDetails.yearlyTotal}
+                          €{priceDetails.baseMonthly}
                         </span>
-                        <span className="text-neutral-500">/year</span>
+                        <span className="text-neutral-500 font-medium">/mo</span>
                       </div>
-                      
-                      {/* 2. Subtext = Monthly Breakdown Comparison */}
-                      <div className="flex items-center gap-2 mt-2 text-sm font-medium">
-                        <span className="text-neutral-400 line-through decoration-neutral-400">
-                          €{priceDetails.baseMonthly}/mo
-                        </span>
-                        <span className="text-brand-orange">
-                          €{priceDetails.effectiveMonthly}/mo
-                        </span>
-                      </div>
-                    </div>
+                    )
                   ) : (
-                    // MONTHLY VIEW
-                    <div className="flex items-baseline gap-1">
-                      <span className="text-4xl font-bold text-neutral-900 dark:text-white">
-                        €{priceDetails.baseMonthly}
-                      </span>
-                      <span className="text-neutral-500">/mo</span>
+                    <div className="text-4xl font-bold text-neutral-900 dark:text-white">
+                      Custom
                     </div>
-                  )
-                ) : (
-                  // CUSTOM VIEW
-                  <div className="text-4xl font-bold text-neutral-900 dark:text-white">
-                    Custom
-                  </div>
-                )}
+                  )}
+                </div>
+
+                <Button 
+                  className={`w-full mb-8 ${
+                    isTeam 
+                      ? 'bg-brand-orange hover:bg-brand-orange/90 text-white shadow-lg shadow-brand-orange/20' 
+                      : 'bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 hover:bg-neutral-800 dark:hover:bg-neutral-100'
+                  }`}
+                >
+                  Start free trial
+                </Button>
+
+                <ul className="space-y-4 flex-grow">
+                  {plan.features.map((feature) => (
+                    <li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                      <CheckCircleIcon className={`w-5 h-5 shrink-0 ${isTeam ? 'text-brand-orange' : 'text-neutral-400'}`} />
+                      <span>{feature}</span>
+                    </li>
+                  ))}
+                </ul>
               </div>
+            )
+          })}
 
-              <Button className="w-full mb-8 bg-brand-orange hover:bg-brand-orange/90 text-white">
-                Start free trial
-              </Button>
-
-              <ul className="space-y-4 flex-grow">
-                {plan.features.map((feature) => (
-                  <li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
-                    <CheckCircleIcon className="w-5 h-5 text-brand-orange shrink-0" />
-                    <span>{feature}</span>
-                  </li>
-                ))}
-              </ul>
+          {/* Enterprise Section */}
+          <div className="p-8 bg-neutral-50/50 dark:bg-neutral-900/50 flex flex-col">
+            <div className="mb-8">
+              <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">Enterprise</h3>
+              <p className="text-sm text-neutral-500 min-h-[40px] mb-4">For high volume sites and custom needs</p>
+              <div className="text-4xl font-bold text-neutral-900 dark:text-white">
+                Custom
+              </div>
             </div>
-          )
-        })}
 
-        {/* Enterprise Card (Dark Style) */}
-        <div className="p-8 rounded-2xl bg-neutral-900 text-white border border-neutral-800 flex flex-col shadow-2xl">
-          <div className="mb-8">
-            <h3 className="text-lg font-medium text-white mb-2">Enterprise</h3>
-            <div className="text-4xl font-bold text-white">Custom</div>
-            <p className="text-neutral-400 mt-2 text-sm">For high volume sites</p>
+            <Button variant="outline" className="w-full mb-8 border-neutral-200 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800">
+              Contact us
+            </Button>
+
+            <ul className="space-y-4">
+              {[
+                'Everything in Business',
+                '10+ sites',
+                'Unlimited team members',
+                'SLA & Priority Support',
+                'Managed Proxy',
+                'Raw data export'
+              ].map((feature) => (
+                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                  <CheckCircleIcon className="w-5 h-5 text-neutral-400 shrink-0" />
+                  <span>{feature}</span>
+                </li>
+              ))}
+            </ul>
           </div>
-
-          <Button variant="secondary" className="w-full mb-8 bg-white text-neutral-900 hover:bg-neutral-100">
-            Contact us
-          </Button>
-
-          <ul className="space-y-4">
-            {[
-              'Everything in Business',
-              '10+ sites',
-              'Unlimited team members',
-              'SLA & Priority Support',
-              'Managed Proxy',
-              'Raw data export'
-            ].map((feature) => (
-              <li key={feature} className="flex items-start gap-3 text-sm text-neutral-300">
-                <CheckCircleIcon className="w-5 h-5 text-white shrink-0" />
-                <span>{feature}</span>
-              </li>
-            ))}
-          </ul>
         </div>
       </div>
     </section>