diff --git a/.npmrc b/.npmrc
index 8477dbe..83aab43 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,3 @@
 @ciphera-net:registry=https://npm.pkg.github.com
 //npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
+legacy-peer-deps=true
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1a68ccb..5a0cc3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Improved
 
+- **Redesigned Search card on the dashboard.** The Search section of the dashboard has been completely refreshed to match the rest of Pulse. Search queries now show proportional bars so you can visually compare which queries get the most impressions. Hovering a row reveals the impression share percentage. Position badges are now color-coded — green for page 1 rankings, orange for page 2, and red for queries buried beyond page 5. You can switch between your top search queries and top pages using tabs, and expand the full list in a searchable popup without leaving the dashboard.
 - **Smaller, faster tracking script.** The tracking script is now about 20% smaller. Logic like page path cleaning, referrer filtering, error page detection, and input validation has been moved from your browser to the Pulse server. This means the script loads faster on every page, and Pulse can improve these features without needing you to update anything.
 - **Automatic 404 page detection.** Pulse now detects error pages (404 / "Page Not Found") automatically on the server by reading your page title — no extra setup needed. Previously this ran in the browser and couldn't be improved without updating the script. Now Pulse can recognize more error page patterns over time, including pages in other languages, without any changes on your end.
 - **Smarter bot filtering.** Pulse now catches more types of automated traffic that were slipping through — like headless browsers with default screen sizes, bot farms that rotate through different locations, and bots that fire duplicate events within milliseconds. Bot detection checks have also been moved from the tracking script to the server, making the script smaller and faster for real visitors.
diff --git a/app/about/page.tsx b/app/about/page.tsx
index f37e4af..6ffa4bd 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -15,23 +15,23 @@ function ComparisonTable({ title, competitors }: { title: string, competitors: {
 
   return (
     <div className="mb-16">
-      <h2 className="text-2xl font-bold mb-6 text-neutral-900 dark:text-white">{title}</h2>
-      <div className="overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
+      <h2 className="text-2xl font-bold mb-6 text-white">{title}</h2>
+      <div className="overflow-hidden rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm">
         <table className="w-full text-left border-collapse">
           <thead>
-            <tr className="border-b border-neutral-200 dark:border-neutral-800">
+            <tr className="border-b border-neutral-800">
               <th className="p-4 sm:p-6 text-sm font-medium text-neutral-500">Feature</th>
               {competitors.map((comp) => (
-                <th key={comp.name} className={`p-4 sm:p-6 text-sm font-bold ${comp.isPulse ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'}`}>
+                <th key={comp.name} className={`p-4 sm:p-6 text-sm font-bold ${comp.isPulse ? 'text-brand-orange' : 'text-white'}`}>
                   {comp.name}
                 </th>
               ))}
             </tr>
           </thead>
-          <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
+          <tbody className="divide-y divide-neutral-800">
             {allFeatures.map((feature) => (
-              <tr key={feature} className="hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 transition-colors">
-                <td className="p-4 sm:p-6 text-neutral-900 dark:text-white font-medium text-sm sm:text-base">{feature}</td>
+              <tr key={feature} className="hover:bg-neutral-800/50 transition-colors">
+                <td className="p-4 sm:p-6 text-white font-medium text-sm sm:text-base">{feature}</td>
                 {competitors.map((comp) => {
                   const val = comp.features[feature]
                   return (
@@ -41,7 +41,7 @@ function ComparisonTable({ title, competitors }: { title: string, competitors: {
                       ) : val === false ? (
                         <XIcon className="w-5 h-5 text-red-500" />
                       ) : (
-                        <span className={comp.isPulse ? 'text-green-500 font-medium' : 'text-neutral-600 dark:text-neutral-400'}>{val}</span>
+                        <span className={comp.isPulse ? 'text-green-500 font-medium' : 'text-neutral-400'}>{val}</span>
                       )}
                     </td>
                   )
@@ -60,10 +60,9 @@ export default function AboutPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -75,10 +74,10 @@ export default function AboutPage() {
           transition={{ duration: 0.5 }}
           className="text-center mb-16"
         >
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
             Why Pulse?
           </h1>
-          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed">
             We built Pulse because we were tired of complex, invasive analytics tools.
             Here is how we stack up against the giants.
           </p>
@@ -88,9 +87,9 @@ export default function AboutPage() {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5, delay: 0.1 }}
-          className="prose prose-neutral dark:prose-invert max-w-none mb-16"
+          className="prose prose-invert max-w-none mb-16"
         >
-          <p className="text-lg text-neutral-600 dark:text-neutral-400">
+          <p className="text-lg text-neutral-400">
             Most analytics tools are overkill. They track everything, slow down your site, and require annoying cookie banners. 
             Pulse is different. We focus on the metrics that actually matter—visitors, pageviews, and sources—while respecting user privacy.
           </p>
@@ -163,10 +162,10 @@ export default function AboutPage() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5 }}
-          className="mt-8 p-6 bg-neutral-100 dark:bg-neutral-800/50 rounded-xl border border-neutral-200 dark:border-neutral-800"
+          className="mt-8 p-6 bg-neutral-800/50 rounded-xl border border-neutral-800"
         >
-          <h3 className="text-xl font-bold mb-2 text-neutral-900 dark:text-white">What about Plausible?</h3>
-          <p className="text-neutral-600 dark:text-neutral-400 text-sm">
+          <h3 className="text-xl font-bold mb-2 text-white">What about Plausible?</h3>
+          <p className="text-neutral-400 text-sm">
             We love Plausible! They paved the way for privacy-friendly analytics. 
             Pulse offers a similar philosophy but with a focus on even deeper integration with the Ciphera ecosystem 
             and more flexible pricing for developers.
diff --git a/app/faq/page.tsx b/app/faq/page.tsx
index f1bcdca..8917312 100644
--- a/app/faq/page.tsx
+++ b/app/faq/page.tsx
@@ -1,37 +1,18 @@
 'use client'
 
 import { motion } from 'framer-motion'
-import { useState } from 'react'
-import { ChevronDownIcon } from '@ciphera-net/ui'
-
-const faqs = [
-  {
-    question: "Is Pulse GDPR compliant?",
-    answer: "Yes, Pulse is GDPR compliant by design. We don't use cookies, don't collect personal data, and process all data anonymously."
-  },
-  {
-    question: "Do I need a cookie consent banner?",
-    answer: "No, you don't need a cookie consent banner. Pulse doesn't use cookies, so it's exempt from cookie consent requirements under GDPR."
-  },
-  {
-    question: "How does Pulse track visitors?",
-    answer: "We use a lightweight JavaScript snippet that sends anonymous pageview events. No cookies, no cross-session identifiers (we use sessionStorage only to group events within a single visit), and no cross-site tracking."
-  },
-  {
-    question: "What data does Pulse collect?",
-    answer: "We collect anonymous pageview data including page path, referrer, device type, browser, and country (derived from IP at request time; the IP itself is not stored). No personal information is collected."
-  },
-  {
-    question: "How accurate is the data?",
-    answer: "Our data is highly accurate. We exclude bot traffic and data center visits. Since we don't use cookies, we count unique sessions rather than unique users."
-  },
-  {
-    question: "Can I export my data?",
-    answer: "Yes, you can access all your analytics data through the dashboard. We're working on export functionality for bulk data downloads."
-  }
-]
+import PulseFAQ from '@/components/marketing/PulseFAQ'
 
 // * JSON-LD FAQ Schema for rich snippets
+const faqs = [
+  { question: "Is Pulse GDPR compliant?", answer: "Yes, Pulse is GDPR compliant by design. We don't use cookies, don't collect personal data, and process all data anonymously." },
+  { question: "Do I need a cookie consent banner?", answer: "No, you don't need a cookie consent banner. Pulse doesn't use cookies, so it's exempt from cookie consent requirements under GDPR." },
+  { question: "How does Pulse track visitors?", answer: "We use a lightweight JavaScript snippet that sends anonymous pageview events. No cookies, no cross-session identifiers (we use sessionStorage only to group events within a single visit), and no cross-site tracking." },
+  { question: "What data does Pulse collect?", answer: "We collect anonymous pageview data including page path, referrer, device type, browser, and country (derived from IP at request time; the IP itself is not stored). No personal information is collected." },
+  { question: "How accurate is the data?", answer: "Our data is highly accurate. We exclude bot traffic and data center visits. Since we don't use cookies, we count unique sessions rather than unique users." },
+  { question: "Can I export my data?", answer: "Yes, you can access all your analytics data through the dashboard. We're working on export functionality for bulk data downloads." },
+]
+
 const faqSchema = {
   '@context': 'https://schema.org',
   '@type': 'FAQPage',
@@ -45,47 +26,6 @@ const faqSchema = {
   })),
 }
 
-function FAQItem({ faq, index }: { faq: typeof faqs[0]; index: number }) {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true }}
-      transition={{ duration: 0.5, delay: index * 0.05 }}
-      className="border-b border-neutral-200 dark:border-neutral-800"
-    >
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="w-full py-6 flex items-center justify-between text-left hover:text-brand-orange transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
-      >
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white pr-4">
-          {faq.question}
-        </h3>
-        <ChevronDownIcon
-          className={`w-5 h-5 text-neutral-500 shrink-0 transition-transform duration-300 ${
-            isOpen ? 'rotate-180' : ''
-          }`}
-        />
-      </button>
-      {isOpen && (
-        <motion.div
-          initial={{ opacity: 0, height: 0 }}
-          animate={{ opacity: 1, height: 'auto' }}
-          exit={{ opacity: 0, height: 0 }}
-          transition={{ duration: 0.3 }}
-          className="pb-6"
-        >
-          <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
-            {faq.answer}
-          </p>
-        </motion.div>
-      )}
-    </motion.div>
-  )
-}
-
 export default function FAQPage() {
   return (
     <>
@@ -94,29 +34,9 @@ export default function FAQPage() {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
       />
-      
-      <div className="container mx-auto px-4 py-16 max-w-4xl">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5 }}
-          className="text-center mb-16"
-        >
-          <span className="badge-primary mb-4 inline-flex">FAQ</span>
-          <h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white mb-4">
-            Frequently asked questions
-          </h1>
-          <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
-            Learn more about how Pulse respects your privacy and handles your data.
-          </p>
-        </motion.div>
 
-        <div className="max-w-3xl mx-auto">
-          {faqs.map((faq, index) => (
-            <FAQItem key={faq.question} faq={faq} index={index} />
-          ))}
-        </div>
+      <div className="pt-8 pb-16">
+        <PulseFAQ />
 
         {/* * CTA */}
         <motion.div
@@ -126,12 +46,12 @@ export default function FAQPage() {
           transition={{ duration: 0.5, delay: 0.3 }}
           className="text-center mt-12"
         >
-          <p className="text-neutral-600 dark:text-neutral-400 mb-4">
+          <p className="text-neutral-400 mb-4">
             Still have questions?
           </p>
           <a
             href="mailto:support@ciphera.net"
-            className="inline-flex items-center justify-center gap-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-white px-5 py-2.5 rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-800 shadow-sm hover:shadow-md dark:shadow-none transition-all duration-200"
+            className="inline-flex items-center justify-center gap-2 bg-neutral-900 border border-neutral-800 text-white px-5 py-2.5 rounded-xl font-medium hover:bg-neutral-800 transition-all duration-200"
           >
             Contact us
           </a>
diff --git a/app/features/page.tsx b/app/features/page.tsx
index 8431d58..39fd2db 100644
--- a/app/features/page.tsx
+++ b/app/features/page.tsx
@@ -109,10 +109,9 @@ export default function FeaturesPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -129,11 +128,11 @@ export default function FeaturesPage() {
             <span className="w-1.5 h-1.5 rounded-full bg-brand-orange animate-pulse" />
             Product Tour
           </span>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
             Everything you need. <br />
             <span className="gradient-text">Nothing you don&apos;t.</span>
           </h1>
-          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed">
             Pulse gives you meaningful analytics without the complexity, the cookies, or the privacy trade-offs.
           </p>
         </motion.div>
@@ -152,10 +151,10 @@ export default function FeaturesPage() {
               <div className="w-12 h-12 rounded-xl bg-brand-orange/10 flex items-center justify-center mb-6 text-brand-orange group-hover:scale-110 transition-transform duration-300">
                 <feature.icon className="w-6 h-6" />
               </div>
-              <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">
+              <h3 className="text-xl font-bold text-white mb-3">
                 {feature.title}
               </h3>
-              <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
+              <p className="text-neutral-400 leading-relaxed">
                 {feature.description}
               </p>
             </motion.div>
@@ -171,10 +170,10 @@ export default function FeaturesPage() {
           className="mb-28"
         >
           <div className="text-center mb-14">
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+            <h2 className="text-2xl font-bold text-white mb-4">
               Powerful analytics, <span className="gradient-text">simplified</span>
             </h2>
-            <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
+            <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
               Everything from real-time dashboards to conversion funnels — without the bloat.
             </p>
           </div>
@@ -193,10 +192,10 @@ export default function FeaturesPage() {
                   {cap.icon}
                 </div>
                 <div>
-                  <h3 className="font-bold text-neutral-900 dark:text-white mb-1">
+                  <h3 className="font-bold text-white mb-1">
                     {cap.title}
                   </h3>
-                  <p className="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+                  <p className="text-sm text-neutral-400 leading-relaxed">
                     {cap.description}
                   </p>
                 </div>
@@ -211,14 +210,14 @@ export default function FeaturesPage() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5 }}
-          className="mb-28 p-10 md:p-14 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl"
+          className="mb-28 p-10 md:p-14 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-2xl"
         >
           <div className="grid md:grid-cols-2 gap-10 items-center">
             <div>
-              <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+              <h2 className="text-2xl font-bold text-white mb-4">
                 Content that <span className="gradient-text">performs</span>
               </h2>
-              <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-6">
+              <p className="text-neutral-400 leading-relaxed mb-6">
                 See which pages drive the most traffic, where visitors enter your site, and where they leave. Use data to double down on what works.
               </p>
               <ul className="space-y-3">
@@ -229,7 +228,7 @@ export default function FeaturesPage() {
                   'Referral sources — where traffic comes from',
                   'Browser, OS & device breakdowns',
                 ].map((item) => (
-                  <li key={item} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                  <li key={item} className="flex items-start gap-3 text-sm text-neutral-400">
                     <svg className="w-5 h-5 text-brand-orange shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                       <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                     </svg>
@@ -251,17 +250,17 @@ export default function FeaturesPage() {
                   whileInView={{ opacity: 1, x: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.4, delay: i * 0.1 }}
-                  className="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-xl"
+                  className="p-4 bg-neutral-800/50 rounded-xl"
                 >
                   <div className="flex items-center justify-between mb-2">
-                    <span className="text-sm font-medium text-neutral-900 dark:text-white truncate mr-4">
+                    <span className="text-sm font-medium text-white truncate mr-4">
                       {page.label}
                     </span>
-                    <span className="text-sm text-neutral-500 dark:text-neutral-400 shrink-0">
+                    <span className="text-sm text-neutral-400 shrink-0">
                       {page.views} views
                     </span>
                   </div>
-                  <div className="h-1.5 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
+                  <div className="h-1.5 bg-neutral-700 rounded-full overflow-hidden">
                     <motion.div
                       initial={{ width: 0 }}
                       whileInView={{ width: `${page.pct}%` }}
@@ -285,10 +284,10 @@ export default function FeaturesPage() {
           className="mb-28"
         >
           <div className="text-center mb-12">
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+            <h2 className="text-2xl font-bold text-white mb-4">
               Built for trust
             </h2>
-            <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
+            <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
               Open source, Swiss hosted, and designed to keep your visitors&apos; data where it belongs.
             </p>
           </div>
@@ -307,8 +306,8 @@ export default function FeaturesPage() {
                   <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                 </svg>
                 <div>
-                  <span className="font-semibold text-neutral-900 dark:text-white text-sm">{signal.label}</span>
-                  <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{signal.detail}</p>
+                  <span className="font-semibold text-white text-sm">{signal.label}</span>
+                  <p className="text-xs text-neutral-400 mt-0.5">{signal.detail}</p>
                 </div>
               </motion.div>
             ))}
@@ -341,10 +340,10 @@ export default function FeaturesPage() {
           className="mb-28"
         >
           <div className="text-center mb-14">
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+            <h2 className="text-2xl font-bold text-white mb-4">
               Up and running in <span className="gradient-text">3 minutes</span>
             </h2>
-            <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
+            <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
               No SDKs to install, no build steps, no configuration files.
             </p>
           </div>
@@ -367,15 +366,15 @@ export default function FeaturesPage() {
                   {s.step}
                 </div>
                 <div>
-                  <h3 className="font-bold text-neutral-900 dark:text-white text-sm">
+                  <h3 className="font-bold text-white text-sm">
                     {s.title}
                   </h3>
-                  <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                  <p className="text-xs text-neutral-400">
                     {s.desc}
                   </p>
                 </div>
                 {i < 2 && (
-                  <ArrowRightIcon className="w-5 h-5 text-neutral-300 dark:text-neutral-600 shrink-0 hidden md:block" />
+                  <ArrowRightIcon className="w-5 h-5 text-neutral-600 shrink-0 hidden md:block" />
                 )}
               </motion.div>
             ))}
@@ -390,10 +389,10 @@ export default function FeaturesPage() {
           transition={{ duration: 0.5 }}
           className="text-center mb-20"
         >
-          <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+          <h2 className="text-2xl font-bold text-white mb-4">
             Ready to see it in action?
           </h2>
-          <p className="text-neutral-600 dark:text-neutral-400 mb-8 max-w-lg mx-auto">
+          <p className="text-neutral-400 mb-8 max-w-lg mx-auto">
             Start for free. No credit card required. Cancel anytime.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
diff --git a/app/installation/page.tsx b/app/installation/page.tsx
index a4c1d3c..a086b61 100644
--- a/app/installation/page.tsx
+++ b/app/installation/page.tsx
@@ -8,32 +8,30 @@ export default function InstallationPage() {
       
       {/* * --- 1. ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        {/* * Top-left Orange Glow */}
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
         {/* * Bottom-right Neutral Glow */}
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         {/* * Grid Pattern with Radial Mask */}
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
 
       <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
         <div className="text-center mb-12">
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
             Installation
           </h1>
-          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed">
             Get up and running with Pulse in seconds.
           </p>
         </div>
 
         <div className="w-full text-center">
-          <h2 className="text-2xl font-bold mb-8 text-neutral-900 dark:text-white">Add the snippet</h2>
+          <h2 className="text-2xl font-bold mb-8 text-white">Add the snippet</h2>
           <p className="text-neutral-500 mb-8">Just add this snippet to your &lt;head&gt; tag in your layout or index file.</p>
           
-          <div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
+          <div className="max-w-2xl mx-auto bg-neutral-900/80 rounded-xl overflow-hidden shadow-2xl text-left border border-white/[0.08]">
             <div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
               <div className="flex gap-2">
                 <div className="w-3 h-3 rounded-full bg-red-500/20" />
@@ -55,15 +53,22 @@ export default function InstallationPage() {
                 <span className="text-blue-400">&gt;&lt;/script&gt;</span>
               </code>
             </div>
+            <div className="flex items-center gap-4 px-6 py-3 border-t border-neutral-800 text-xs text-neutral-500">
+              <span>1.6 KB gzipped</span>
+              <span className="flex items-center gap-1.5">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-500" />
+                Non-blocking, async
+              </span>
+            </div>
           </div>
         </div>
 
         <div className="w-full mt-16 text-center">
-          <h2 className="text-2xl font-bold mb-4 text-neutral-900 dark:text-white">Custom events (goals)</h2>
+          <h2 className="text-2xl font-bold mb-4 text-white">Custom events (goals)</h2>
           <p className="text-neutral-500 mb-6 max-w-xl mx-auto">
-            Track custom events (e.g. signup, purchase) with <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-sm font-mono">pulse.track(&apos;event_name&apos;)</code>. Use letters, numbers, and underscores only. Define goals in your site Settings → Goals & Events to see counts in the dashboard.
+            Track custom events (e.g. signup, purchase) with <code className="px-1.5 py-0.5 rounded bg-neutral-700 text-sm font-mono">pulse.track(&apos;event_name&apos;)</code>. Use letters, numbers, and underscores only. Define goals in your site Settings → Goals & Events to see counts in the dashboard.
           </p>
-          <div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
+          <div className="max-w-2xl mx-auto bg-neutral-900/80 rounded-xl overflow-hidden shadow-2xl text-left border border-white/[0.08]">
             <div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
               <div className="flex gap-2">
                 <div className="w-3 h-3 rounded-full bg-red-500/20" />
diff --git a/app/integrations/nextjs/page.tsx b/app/integrations/nextjs/page.tsx
index 2a26425..96ced7e 100644
--- a/app/integrations/nextjs/page.tsx
+++ b/app/integrations/nextjs/page.tsx
@@ -8,10 +8,9 @@ export default function NextJsIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -26,22 +25,22 @@ export default function NextJsIntegrationPage() {
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
-            <svg viewBox="0 0 128 128" className="w-10 h-10 dark:invert">
+          <div className="p-3 bg-neutral-800 rounded-xl">
+            <svg viewBox="0 0 128 128" className="w-10 h-10 invert">
               <path d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm27.6 93.9c-.8.9-2.2 1-3.1.2L42.8 52.8V88c0 1.3-1.1 2.3-2.3 2.3h-7.4c-1.3 0-2.3-1.1-2.3-2.3V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1 0 1.9.6 2.2 1.5l48.6 44.8V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1.3 0 2.3 1.1 2.3 2.3v48c0 1.3-1.1 2.3-2.3 2.3h-6.8c-.9 0-1.7-.5-2.1-1.3z" />
             </svg>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
             Next.js Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
+        <div className="prose prose-invert max-w-none">
+          <p className="lead text-xl text-neutral-400">
             The best way to add Pulse to your Next.js application is using the built-in <code>next/script</code> component.
           </p>
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
 
           <h3>Using App Router (Recommended)</h3>
           <p>
diff --git a/app/integrations/page.tsx b/app/integrations/page.tsx
index a1fdb17..8582f22 100644
--- a/app/integrations/page.tsx
+++ b/app/integrations/page.tsx
@@ -93,10 +93,9 @@ export default function IntegrationsPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -110,14 +109,14 @@ export default function IntegrationsPage() {
         >
           {/* * --- Title with count badge --- */}
           <div className="flex items-center justify-center gap-3 mb-6">
-            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
               Integrations
             </h1>
             <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-brand-orange/10 text-brand-orange border border-brand-orange/20">
               {integrations.length}+
             </span>
           </div>
-          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed mb-8">
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed mb-8">
             Connect Pulse with {integrations.length}+ frameworks and platforms in minutes.
           </p>
 
@@ -144,12 +143,12 @@ export default function IntegrationsPage() {
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Search integrations..."
-              className="w-full pl-12 pr-16 py-3 bg-white/70 dark:bg-neutral-900/70 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-900 dark:text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange/50 transition-all"
+              className="w-full pl-12 pr-16 py-3 bg-neutral-900/70 backdrop-blur-sm border border-white/[0.08] rounded-xl text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange/50 transition-all"
             />
             {query ? (
               <button
                 onClick={() => setQuery('')}
-                className="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
+                className="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-400 hover:text-neutral-600 hover:text-neutral-300 transition-colors"
                 aria-label="Clear search"
               >
                 <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
@@ -158,7 +157,7 @@ export default function IntegrationsPage() {
               </button>
             ) : (
               <div className="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
-                <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono font-medium bg-neutral-200/80 dark:bg-neutral-700/80 text-neutral-500 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600">
+                <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono font-medium bg-neutral-700/80 text-neutral-400 border border-neutral-600">
                   /
                 </kbd>
               </div>
@@ -170,7 +169,7 @@ export default function IntegrationsPage() {
             <motion.p
               initial={{ opacity: 0, y: -5 }}
               animate={{ opacity: 1, y: 0 }}
-              className="text-sm text-neutral-500 dark:text-neutral-400 mt-3"
+              className="text-sm text-neutral-400 mt-3"
             >
               {totalResults} {totalResults === 1 ? 'integration' : 'integrations'} found
               {query && <> for &ldquo;{query}&rdquo;</>}
@@ -190,7 +189,7 @@ export default function IntegrationsPage() {
             className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
               activeCategory === 'all'
                 ? 'bg-brand-orange text-white shadow-sm'
-                : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
             }`}
           >
             All
@@ -202,7 +201,7 @@ export default function IntegrationsPage() {
               className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
                 activeCategory === cat
                   ? 'bg-brand-orange text-white shadow-sm'
-                  : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                  : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
               }`}
             >
               {categoryLabels[cat]}
@@ -227,7 +226,7 @@ export default function IntegrationsPage() {
                     whileInView={{ opacity: 1, y: 0 }}
                     viewport={{ once: true }}
                     transition={{ duration: 0.4 }}
-                    className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase flex items-center gap-2"
+                    className="text-lg font-semibold text-neutral-400 mb-6 tracking-wide uppercase flex items-center gap-2"
                   >
                     <svg className="w-5 h-5 text-brand-orange" fill="currentColor" viewBox="0 0 20 20">
                       <path d="M10 1l2.39 4.84 5.34.78-3.87 3.77.91 5.33L10 13.27l-4.77 2.5.91-5.33L2.27 6.67l5.34-.78L10 1z" />
@@ -246,12 +245,12 @@ export default function IntegrationsPage() {
                       >
                         <Link
                           href={`/integrations/${integration!.id}`}
-                          className="group flex items-center gap-3 p-4 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg h-full"
+                          className="group flex items-center gap-3 p-4 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-xl hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg h-full"
                         >
-                          <div className="p-2 bg-neutral-100 dark:bg-neutral-800 rounded-lg shrink-0 group-hover:scale-110 transition-transform duration-300 [&_svg]:w-6 [&_svg]:h-6">
+                          <div className="p-2 bg-neutral-800 rounded-lg shrink-0 group-hover:scale-110 transition-transform duration-300 [&_svg]:w-6 [&_svg]:h-6">
                             {integration!.icon}
                           </div>
-                          <span className="font-semibold text-neutral-900 dark:text-white text-sm">
+                          <span className="font-semibold text-white text-sm">
                             {integration!.name}
                           </span>
                         </Link>
@@ -269,7 +268,7 @@ export default function IntegrationsPage() {
                     whileInView={{ opacity: 1, y: 0 }}
                     viewport={{ once: true }}
                     transition={{ duration: 0.4 }}
-                    className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase"
+                    className="text-lg font-semibold text-neutral-400 mb-6 tracking-wide uppercase"
                   >
                     {group.label}
                   </motion.h2>
@@ -285,19 +284,19 @@ export default function IntegrationsPage() {
                       >
                         <Link
                           href={`/integrations/${integration.id}`}
-                          className="group relative p-6 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
+                          className="group relative p-6 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-2xl hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
                         >
                           <div className="flex items-start justify-between mb-6">
-                            <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
+                            <div className="p-3 bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
                               {integration.icon}
                             </div>
                             <ArrowRightIcon className="w-5 h-5 text-neutral-400 group-hover:text-brand-orange transition-colors" />
                           </div>
 
-                          <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">
+                          <h3 className="text-xl font-bold text-white mb-3">
                             {integration.name}
                           </h3>
-                          <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
+                          <p className="text-neutral-400 leading-relaxed mb-4">
                             {integration.description}
                           </p>
                           <span className="text-sm font-medium text-brand-orange opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">
@@ -318,20 +317,20 @@ export default function IntegrationsPage() {
               animate={{ opacity: 1, scale: 1 }}
               exit={{ opacity: 0, scale: 0.95 }}
               transition={{ duration: 0.3 }}
-              className="max-w-md mx-auto mt-8 p-10 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
+              className="max-w-md mx-auto mt-8 p-10 border border-dashed border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
             >
-              <div className="p-4 bg-neutral-100 dark:bg-neutral-800 rounded-full mb-4">
+              <div className="p-4 bg-neutral-800 rounded-full mb-4">
                 <svg className="w-8 h-8 text-neutral-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                 </svg>
               </div>
-              <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
+              <h3 className="text-xl font-bold text-white mb-2">
                 Missing something?
               </h3>
-              <p className="text-neutral-600 dark:text-neutral-400 text-sm mb-1">
+              <p className="text-neutral-400 text-sm mb-1">
                 No integrations found for &ldquo;{query}&rdquo;.
               </p>
-              <p className="text-neutral-600 dark:text-neutral-400 text-sm mb-5">
+              <p className="text-neutral-400 text-sm mb-5">
                 Let us know which integration you&apos;d like to see next.
               </p>
               <a
@@ -351,12 +350,12 @@ export default function IntegrationsPage() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5 }}
-            className="max-w-md mx-auto mt-12 p-6 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
+            className="max-w-md mx-auto mt-12 p-6 border border-dashed border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
           >
-            <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
+            <h3 className="text-xl font-bold text-white mb-2">
               Missing something?
             </h3>
-            <p className="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
+            <p className="text-neutral-400 text-sm mb-4">
               Let us know which integration you&apos;d like to see next.
             </p>
             <a
diff --git a/app/integrations/react/page.tsx b/app/integrations/react/page.tsx
index 9c29053..a783174 100644
--- a/app/integrations/react/page.tsx
+++ b/app/integrations/react/page.tsx
@@ -8,10 +8,9 @@ export default function ReactIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -26,23 +25,23 @@ export default function ReactIntegrationPage() {
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <div className="p-3 bg-neutral-800 rounded-xl">
             <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#61DAFB] fill-current">
               <path d="M64 10.6c18.4 0 34.6 5.8 44.6 14.8 6.4 5.8 10.2 12.8 10.2 20.6 0 21.6-28.6 41.2-64 41.2-1.6 0-3.2-.1-4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11 11.2-5.6 20.2-13 26.2-21.4-6.4-5.8-15.4-10-25.6-12.2-10.2-2.2-21.4-3.4-33-3.4-1.6 0-3.2.1-4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-33.4 62c-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-15.2-16.6c-6.4-5.8-10.2-12.8-10.2-20.6 0-21.6 28.6-41.2 64-41.2 1.6 0 3.2.1 4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8z" />
               <circle cx="64" cy="64" r="10.6" />
             </svg>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
             React Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
+        <div className="prose prose-invert max-w-none">
+          <p className="lead text-xl text-neutral-400">
             For standard React SPAs (Create React App, Vite, etc.), you can simply add the script tag to your <code>index.html</code>.
           </p>
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
 
           <h3>Method 1: index.html (Recommended)</h3>
           <p>
diff --git a/app/integrations/vue/page.tsx b/app/integrations/vue/page.tsx
index 81434c5..013f6b9 100644
--- a/app/integrations/vue/page.tsx
+++ b/app/integrations/vue/page.tsx
@@ -8,10 +8,9 @@ export default function VueIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -26,23 +25,23 @@ export default function VueIntegrationPage() {
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <div className="p-3 bg-neutral-800 rounded-xl">
             <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#4FC08D] fill-current">
               <path d="M82.8 24.6h27.8L64 103.4 17.4 24.6h27.8L64 59.4l18.8-34.8z" />
               <path d="M64 24.6H39L64 67.4l25-42.8H64z" fill="#35495E" />
             </svg>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
             Vue.js Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
+        <div className="prose prose-invert max-w-none">
+          <p className="lead text-xl text-neutral-400">
             Integrating Pulse with Vue.js is straightforward. You can add the script to your <code>index.html</code> file.
           </p>
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
 
           <h3>Method 1: index.html (Recommended)</h3>
           <p>
diff --git a/app/integrations/wordpress/page.tsx b/app/integrations/wordpress/page.tsx
index bd80d9f..98f9f6f 100644
--- a/app/integrations/wordpress/page.tsx
+++ b/app/integrations/wordpress/page.tsx
@@ -8,10 +8,9 @@ export default function WordPressIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -26,22 +25,22 @@ export default function WordPressIntegrationPage() {
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <div className="p-3 bg-neutral-800 rounded-xl">
             <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#21759B] fill-current">
               <path d="M116.6 64c0-19.2-10.4-36-26-45.2l28.6 78.4c-1 3.2-2.2 6.2-3.6 9.2-11.4 12.4-27.8 20.2-46 20.2-6.2 0-12.2-.8-17.8-2.4l26.2-76.4c1.2.2 2.4.4 3.6.4 5.4 0 13.8-.8 13.8-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-6 .4l19 56.6 5.4-18c2.4-7.4 4.2-12.8 4.2-17.4 0-6-2.2-10.2-7.6-12.6-2.8-1.2-2.2-5.4 1.4-5.4h4.4zM64 121.2c-15.8 0-30.2-6.4-40.8-16.8L46.6 36.8c-2.8-.2-5.8-.4-5.8-.4-2.8-.2-2.4-4.4.4-4.2 0 0 8.4.8 13.6.8 5.4 0 13.6-.8 13.6-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-5.8.4l18.2 54.4 10.6-31.8L64 121.2zM11.4 64c0 17 8.2 32.2 20.8 41.8L18.8 66.8c-.8-3.4-1.2-6.6-1.2-9.2 0-6.8 2.6-13 6.2-17.8C15.6 47.4 11.4 55.2 11.4 64zM64 6.8c16.2 0 30.8 6.8 41.4 17.6-1.4-.2-2.8-.2-4.2-.2-7.8 0-14.2 1.4-14.2 1.4-2.8.6-2.2 4.8.6 4.2 0 0 5-1 10.6-1 2.2 0 4.6.2 6.6.4L88.2 53 71.4 6.8h-7.4z" />
             </svg>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
             WordPress Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
+        <div className="prose prose-invert max-w-none">
+          <p className="lead text-xl text-neutral-400">
             You can add Pulse to your WordPress site without installing any heavy plugins, or by using a simple code snippet plugin.
           </p>
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
 
           <h3>Method 1: Using a Plugin (Easiest)</h3>
           <ol>
diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 5ac3317..4e644a0 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -3,6 +3,7 @@
 import { OfflineBanner } from '@/components/OfflineBanner'
 import { Footer } from '@/components/Footer'
 import { Header, type CipheraApp } from '@ciphera-net/ui'
+import { Header as MarketingHeader } from '@/components/marketing/Header'
 import NotificationCenter from '@/components/notifications/NotificationCenter'
 import { useAuth } from '@/lib/auth/context'
 import { useOnlineStatus } from '@/lib/hooks/useOnlineStatus'
@@ -144,31 +145,11 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
     )
   }
 
-  // Public/marketing: floating header + footer
+  // Public/marketing: sticky header + footer
   return (
     <div className="flex flex-col min-h-screen">
-      <Header
-        auth={auth}
-        LinkComponent={Link}
-        logoSrc="/pulse_icon_no_margins.png"
-        appName="Pulse"
-        variant="floating"
-        showFaq={false}
-        showSecurity={false}
-        showPricing={true}
-        topOffset={showOfflineBar ? '2.5rem' : undefined}
-        apps={CIPHERA_APPS}
-        currentAppId="pulse"
-        customNavItems={
-          <Link
-            href="/features"
-            className="px-4 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 transition-all duration-200"
-          >
-            Features
-          </Link>
-        }
-      />
-      <main className="flex-1 pb-8 pt-24">
+      <MarketingHeader />
+      <main className="flex-1 pb-8">
         {children}
       </main>
       <Footer
diff --git a/app/layout.tsx b/app/layout.tsx
index 13c4f7b..632089c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import { ThemeProviders, Toaster } from '@ciphera-net/ui'
+import { ThemeProvider, Toaster } from '@ciphera-net/ui'
 import { AuthProvider } from '@/lib/auth/context'
 import SWRProvider from '@/components/SWRProvider'
 import type { Metadata, Viewport } from 'next'
@@ -45,15 +45,15 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" className={plusJakartaSans.variable} suppressHydrationWarning>
-      <body className="antialiased min-h-screen flex flex-col bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-50">
+    <html lang="en" className={`${plusJakartaSans.variable} dark`} suppressHydrationWarning>
+      <body className="antialiased min-h-screen flex flex-col bg-neutral-950 text-neutral-100">
         <SWRProvider>
-          <ThemeProviders>
+          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
             <AuthProvider>
               <LayoutContent>{children}</LayoutContent>
               <Toaster />
             </AuthProvider>
-          </ThemeProviders>
+          </ThemeProvider>
         </SWRProvider>
       </body>
     </html>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index dc993ee..924cc99 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -6,23 +6,21 @@ export default function NotFound() {
     <div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        {/* * Center Orange Glow */}
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
         {/* * Grid Pattern with Radial Mask */}
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
 
       <div className="text-center px-4 z-10">
-        <h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-neutral-900 to-neutral-500 dark:from-white dark:to-neutral-500 mb-4">
+        <h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-neutral-500 mb-4">
           404
         </h1>
-        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">
+        <h2 className="text-2xl font-bold text-white mb-6">
           Page not found
         </h2>
-        <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-md mx-auto mb-10 leading-relaxed">
+        <p className="text-lg text-neutral-400 max-w-md mx-auto mb-10 leading-relaxed">
           Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.
         </p>
 
diff --git a/app/page.tsx b/app/page.tsx
index b4ac71d..851f089 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
-import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth'
+import { initiateOAuthFlow } from '@/lib/api/oauth'
 import { listSites, listDeletedSites, restoreSite, type Site } from '@/lib/api/sites'
 import { getStats } from '@/lib/api/stats'
 import type { Stats } from '@/lib/api/stats'
@@ -13,102 +13,18 @@ import { LoadingOverlay } from '@ciphera-net/ui'
 import SiteList from '@/components/sites/SiteList'
 import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
 import { Button } from '@ciphera-net/ui'
-import Image from 'next/image'
-import { BarChartIcon, LockIcon, ZapIcon, CheckCircleIcon, XIcon, GlobeIcon } from '@ciphera-net/ui'
+import { XIcon, GlobeIcon } from '@ciphera-net/ui'
+import { Cookie, ShieldCheck, Code, Lightning, ArrowRight, GithubLogo } from '@phosphor-icons/react'
+import DashboardDemo from '@/components/marketing/DashboardDemo'
+import FeatureSections from '@/components/marketing/FeatureSections'
+import ComparisonCards from '@/components/marketing/ComparisonCards'
+import CTASection from '@/components/marketing/CTASection'
+import PulseFAQ from '@/components/marketing/PulseFAQ'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { getSitesLimitForPlan } from '@/lib/plans'
 import { formatDate } from '@/lib/utils/formatDate'
 
-function DashboardPreview() {
-  return (
-    <div className="relative w-full max-w-7xl mx-auto mt-20 mb-32">
-      <div className="absolute inset-0 bg-brand-orange/20 blur-[100px] -z-10 rounded-full opacity-50" />
-
-      <motion.div
-        initial={{ opacity: 0, y: 40 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.7, delay: 0.4 }}
-        className="relative rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 shadow-2xl overflow-hidden"
-      >
-        {/* * Browser chrome */}
-        <div className="h-8 bg-neutral-100 dark:bg-neutral-800/80 border-b border-neutral-200 dark:border-white/5 flex items-center px-4 gap-2">
-          <div className="w-3 h-3 rounded-full bg-red-400/60" />
-          <div className="w-3 h-3 rounded-full bg-yellow-400/60" />
-          <div className="w-3 h-3 rounded-full bg-green-400/60" />
-          <div className="ml-4 flex-1 max-w-xs h-5 rounded bg-neutral-200 dark:bg-neutral-700/50" />
-        </div>
-
-        {/* * Screenshot with bottom fade */}
-        <div className="relative max-h-[900px] overflow-hidden">
-          <Image
-            src="/dashboard-preview-v2.png"
-            alt="Pulse analytics dashboard showing visitor stats, charts, top pages, referrers, locations, and technology breakdown"
-            width={1920}
-            height={3000}
-            className="w-full h-auto object-cover object-top"
-            priority
-          />
-          <div className="absolute inset-0 pointer-events-none bg-gradient-to-b from-transparent from-60% to-white dark:to-neutral-950" />
-        </div>
-      </motion.div>
-    </div>
-  )
-}
-
-
-function ComparisonSection() {
-  return (
-    <div className="w-full max-w-4xl mx-auto mb-32">
-      <div className="text-center mb-12">
-        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">Why choose Pulse?</h2>
-        <p className="text-neutral-500">The lightweight, privacy-friendly alternative.</p>
-      </div>
-
-      <div className="overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
-        <table className="w-full text-left border-collapse">
-          <thead>
-            <tr className="border-b border-neutral-200 dark:border-neutral-800">
-              <th className="p-6 text-sm font-medium text-neutral-500">Feature</th>
-              <th className="p-6 text-sm font-bold text-brand-orange">Pulse</th>
-              <th className="p-6 text-sm font-medium text-neutral-500">Google Analytics</th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
-            {[
-              { feature: "Cookie Banner Required", pulse: false, ga: true },
-              { feature: "GDPR Compliant", pulse: true, ga: "Complex" },
-              { feature: "Script Size", pulse: "< 1 KB", ga: "45 KB+" },
-              { feature: "Data Ownership", pulse: "Yours", ga: "Google's" },
-            ].map((row) => (
-              <tr key={row.feature} className="hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 transition-colors">
-                <td className="p-6 text-neutral-900 dark:text-white font-medium">{row.feature}</td>
-                <td className="p-6">
-                  {row.pulse === true ? (
-                    <CheckCircleIcon className="w-5 h-5 text-green-500" />
-                  ) : row.pulse === false ? (
-                    <span className="text-green-500 font-medium">No</span>
-                  ) : (
-                    <span className="text-green-500 font-medium">{row.pulse}</span>
-                  )}
-                </td>
-                <td className="p-6 text-neutral-500">
-                   {row.ga === true ? (
-                    <span className="text-red-500 font-medium">Yes</span>
-                  ) : (
-                    <span>{row.ga}</span>
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  )
-}
-
-
 type SiteStatsMap = Record<string, { stats: Stats }>
 
 export default function HomePage() {
@@ -234,130 +150,81 @@ export default function HomePage() {
 
   if (!user) {
     return (
-      <div className="relative min-h-screen flex flex-col overflow-hidden">
-        
-        {/* * --- 1. ATMOSPHERE (Background) --- */}
-        <div className="absolute inset-0 -z-10 pointer-events-none">
-          {/* * Top-left Orange Glow */}
-          <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
-          {/* * Bottom-right Neutral Glow */}
-          <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
-          {/* * Grid Pattern with Radial Mask */}
-          <div 
-            className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
-            style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
-          />
-        </div>
-
-        <div className="flex-grow w-full max-w-6xl mx-auto px-4 pt-20 pb-10 z-10">
-          
-          {/* * --- 2. BADGE --- */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5 }}
-            className="inline-flex justify-center mb-8 w-full"
-          >
-            <span className="badge-primary">
-              <span className="w-1.5 h-1.5 rounded-full bg-brand-orange animate-pulse" />
-              Privacy-First Analytics
-            </span>
-          </motion.div>
-
-          {/* * --- 3. HEADLINE --- */}
-          <div className="text-center mb-20">
+      <>
+        {/* HERO — compact headline + live demo */}
+        <div className="pt-20 pb-10 lg:pt-28 lg:pb-16">
+          <div className="w-full max-w-6xl mx-auto px-6 text-center mb-16">
             <motion.h1
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.1 }}
-              className="text-5xl md:text-7xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6"
+              transition={{ duration: 0.5 }}
+              className="text-4xl sm:text-5xl md:text-6xl font-bold text-white leading-[1.1] mb-6"
             >
-              Simple analytics for <br />
+              Analytics without the{' '}
               <span className="relative inline-block">
-                <span className="gradient-text">privacy-conscious</span>
-                {/* * SVG Underline from Main Site */}
+                <span className="gradient-text">surveillance.</span>
                 <svg className="absolute -bottom-2 left-0 w-full h-3 text-brand-orange/30" viewBox="0 0 200 12" preserveAspectRatio="none">
                   <path d="M0 9C50 3 150 3 200 9" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
                 </svg>
               </span>
-              {' '}apps.
             </motion.h1>
 
             <motion.p
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.2 }}
-              className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto mb-10 leading-relaxed"
+              transition={{ duration: 0.5, delay: 0.1 }}
+              className="text-xl text-neutral-300 mb-8 leading-relaxed max-w-2xl mx-auto"
             >
-              Respect your users' privacy while getting the insights you need. 
+              Respect your users&apos; privacy while getting the insights you need.
               No cookies, no IP tracking, fully GDPR compliant.
             </motion.p>
 
-            {/* * --- 4. CTAs --- */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+              className="flex flex-row gap-3 flex-wrap justify-center mb-8"
+            >
+              <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-6 py-3 shadow-lg shadow-brand-orange/20 gap-2">
+                Try Pulse Free <ArrowRight weight="bold" className="w-4 h-4" />
+              </Button>
+              <Button onClick={() => window.open('https://github.com/ciphera-net/pulse', '_blank')} variant="secondary" className="px-6 py-3 border border-white/10 gap-2">
+                <GithubLogo weight="bold" className="w-4 h-4" /> View on GitHub
+              </Button>
+            </motion.div>
+
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.3 }}
-              className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-20"
+              className="flex flex-wrap gap-x-6 gap-y-3 text-sm text-neutral-400 justify-center"
             >
-              <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-8 py-4 text-lg shadow-lg shadow-brand-orange/20">
-                Get Started
-              </Button>
-              <Button onClick={() => initiateSignupFlow()} variant="secondary" className="px-8 py-4 text-lg">
-                Create Account
-              </Button>
+              <span className="flex items-center gap-2"><Cookie weight="bold" className="w-4 h-4" /> Cookie-free</span>
+              <span className="text-neutral-700">|</span>
+              <span className="flex items-center gap-2"><Code weight="bold" className="w-4 h-4" /> Open source client</span>
+              <span className="text-neutral-700">|</span>
+              <span className="flex items-center gap-2"><ShieldCheck weight="bold" className="w-4 h-4" /> GDPR compliant</span>
+              <span className="text-neutral-700">|</span>
+              <span className="flex items-center gap-2"><Lightning weight="bold" className="w-4 h-4" /> Under 2KB</span>
             </motion.div>
           </div>
 
-          {/* * NEW: DASHBOARD PREVIEW */}
-          <DashboardPreview />
-
-          {/* * --- 5. GLASS CARDS --- */}
-          <div className="grid md:grid-cols-3 gap-6 text-left mb-32">
-            {[
-              { icon: LockIcon, title: "Privacy First", desc: "We don't track personal data. No IP addresses, no fingerprints, no cookies." },
-              { icon: BarChartIcon, title: "Simple Insights", desc: "Get the metrics that matter without the clutter. Page views, visitors, and sources." },
-              { icon: ZapIcon, title: "Lightweight", desc: "Our script is less than 1kb. It won't slow down your site or affect your SEO." }
-            ].map((feature, i) => (
-              <motion.div
-                key={feature.title}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: i * 0.1 }}
-                className="card-glass p-6 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 group"
-              >
-                <div className="w-12 h-12 rounded-xl bg-brand-orange/10 flex items-center justify-center mb-6 text-brand-orange group-hover:scale-110 transition-transform duration-300">
-                  <feature.icon className="w-6 h-6" />
-                </div>
-                <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">{feature.title}</h3>
-                <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
-                  {feature.desc}
-                </p>
-              </motion.div>
-            ))}
-          </div>
-
-          {/* * NEW: COMPARISON SECTION */}
-          <ComparisonSection />
-
-          {/* * NEW: CTA BOTTOM */}
+          {/* Live Dashboard Demo */}
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
-            className="text-center mb-20"
+            initial={{ opacity: 0, y: 40 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, delay: 0.4 }}
+            className="w-full max-w-7xl mx-auto px-6"
           >
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">Ready to switch?</h2>
-            <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-8 py-4 text-lg shadow-lg shadow-brand-orange/20">
-              Start your free trial
-            </Button>
-            <p className="mt-4 text-sm text-neutral-500">No credit card required • Cancel anytime</p>
+            <DashboardDemo />
           </motion.div>
-
         </div>
-      </div>
+
+        <FeatureSections />
+        <ComparisonCards />
+        <PulseFAQ />
+        <CTASection />
+      </>
     )
   }
 
@@ -369,8 +236,8 @@ export default function HomePage() {
   return (
     <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
       {showFinishSetupBanner && (
-        <div className="mb-6 flex items-center justify-between gap-4 rounded-2xl border border-brand-orange/30 bg-brand-orange/5 px-4 py-3 dark:bg-brand-orange/10">
-          <p className="text-sm text-neutral-700 dark:text-neutral-300">
+        <div className="mb-6 flex items-center justify-between gap-4 rounded-2xl border border-brand-orange/30 bg-brand-orange/10 px-4 py-3">
+          <p className="text-sm text-neutral-300">
             Finish setting up your workspace and add your first site.
           </p>
           <div className="flex items-center gap-2 flex-shrink-0">
@@ -385,7 +252,7 @@ export default function HomePage() {
                 if (typeof window !== 'undefined') localStorage.setItem('pulse_welcome_completed', 'true')
                 setShowFinishSetupBanner(false)
               }}
-              className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400 p-1 rounded"
+              className="text-neutral-500 hover:text-neutral-400 p-1 rounded"
               aria-label="Dismiss"
             >
               <XIcon className="h-4 w-4" />
@@ -396,8 +263,8 @@ export default function HomePage() {
 
       <div className="mb-8 flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Your Sites</h1>
-          <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">Manage your analytics sites and view insights.</p>
+          <h1 className="text-2xl font-bold text-white">Your Sites</h1>
+          <p className="mt-1 text-sm text-neutral-400">Manage your analytics sites and view insights.</p>
         </div>
         {(() => {
           const siteLimit = getSitesLimitForPlan(subscription?.plan_id)
@@ -405,7 +272,7 @@ export default function HomePage() {
           return atLimit ? (
           <div>
             <div className="flex items-center gap-3">
-              <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-3 py-1.5 rounded-lg border border-neutral-200 dark:border-neutral-700">
+              <span className="text-sm font-medium text-neutral-400 bg-neutral-800 px-3 py-1.5 rounded-lg border border-neutral-700">
                 Limit reached ({sites.length}/{siteLimit})
               </span>
               <Link href="/pricing">
@@ -415,7 +282,7 @@ export default function HomePage() {
               </Link>
             </div>
             {deletedSites.length > 0 && (
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
+              <p className="text-sm text-neutral-400 mt-2">
                 You have a site pending deletion. Restore it or permanently delete it to free the slot.
               </p>
             )}
@@ -432,26 +299,26 @@ export default function HomePage() {
 
       {/* * Global Overview - min-h ensures no layout shift when Plan & usage loads */}
       <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">Total Sites</p>
-          <p className="text-2xl font-bold text-neutral-900 dark:text-white">{sites.length}</p>
+        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-neutral-900 p-4">
+          <p className="text-sm text-neutral-400">Total Sites</p>
+          <p className="text-2xl font-bold text-white">{sites.length}</p>
         </div>
-        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">Total Visitors (24h)</p>
-          <p className="text-2xl font-bold text-neutral-900 dark:text-white">
+        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-neutral-900 p-4">
+          <p className="text-sm text-neutral-400">Total Visitors (24h)</p>
+          <p className="text-2xl font-bold text-white">
             {sites.length === 0 || Object.keys(siteStats).length < sites.length
               ? '--'
               : Object.values(siteStats).reduce((sum, { stats }) => sum + (stats?.visitors ?? 0), 0).toLocaleString()}
           </p>
         </div>
-        <div className="flex min-h-[160px] flex-col rounded-2xl border border-neutral-200 bg-brand-orange/10 p-4 dark:border-neutral-800">
+        <div className="flex min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-brand-orange/10 p-4">
           <p className="text-sm text-brand-orange">Plan & usage</p>
           {subscriptionLoading ? (
             <div className="animate-pulse space-y-2">
-              <div className="h-6 w-24 rounded bg-brand-orange/25 dark:bg-brand-orange/20" />
-              <div className="h-4 w-full rounded bg-brand-orange/25 dark:bg-brand-orange/20" />
-              <div className="h-4 w-3/4 rounded bg-brand-orange/25 dark:bg-brand-orange/20" />
-              <div className="h-4 w-20 rounded bg-brand-orange/25 dark:bg-brand-orange/20 pt-2" />
+              <div className="h-6 w-24 rounded bg-brand-orange/20" />
+              <div className="h-4 w-full rounded bg-brand-orange/20" />
+              <div className="h-4 w-3/4 rounded bg-brand-orange/20" />
+              <div className="h-4 w-20 rounded bg-brand-orange/20 pt-2" />
             </div>
           ) : subscription ? (
             <>
@@ -468,7 +335,7 @@ export default function HomePage() {
                 })()}
               </p>
               {(typeof subscription.sites_count === 'number' || (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number') || (subscription.next_invoice_amount_due != null && subscription.next_invoice_currency && !subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing'))) && (
-                <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
+                <p className="text-sm text-neutral-400 mt-1">
                   {typeof subscription.sites_count === 'number' && (
                     <span>Sites: {(() => {
                       const limit = getSitesLimitForPlan(subscription.plan_id)
@@ -516,12 +383,12 @@ export default function HomePage() {
       </div>
 
       {!sitesLoading && sites.length === 0 && (
-        <div className="mb-8 rounded-2xl border-2 border-dashed border-brand-orange/30 bg-brand-orange/5 p-6 text-center dark:bg-brand-orange/10">
+        <div className="mb-8 rounded-2xl border-2 border-dashed border-brand-orange/30 bg-brand-orange/10 p-6 text-center">
           <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/20 text-brand-orange mb-4">
             <GlobeIcon className="h-7 w-7" />
           </div>
-          <h2 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">Add your first site</h2>
-          <p className="text-neutral-600 dark:text-neutral-400 mb-6 max-w-md mx-auto">
+          <h2 className="text-xl font-bold text-white mb-2">Add your first site</h2>
+          <p className="text-neutral-400 mb-6 max-w-md mx-auto">
             Connect a domain to start collecting privacy-friendly analytics. You can add more sites later from the dashboard.
           </p>
           <Link href="/sites/new">
@@ -557,31 +424,31 @@ export default function HomePage() {
 
       {deletedSites.length > 0 && (
         <div className="mt-8">
-          <h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-4">Scheduled for Deletion</h3>
+          <h3 className="text-sm font-medium text-neutral-400 mb-4">Scheduled for Deletion</h3>
           <div className="space-y-3">
             {deletedSites.map((site) => {
               const purgeAt = site.deleted_at ? new Date(new Date(site.deleted_at).getTime() + 7 * 24 * 60 * 60 * 1000) : null
               const daysLeft = purgeAt ? Math.max(0, Math.ceil((purgeAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24))) : 0
 
               return (
-                <div key={site.id} className="flex items-center justify-between p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 opacity-60">
+                <div key={site.id} className="flex items-center justify-between p-4 rounded-xl border border-neutral-800 bg-neutral-900/50 opacity-60">
                   <div>
-                    <span className="font-medium text-neutral-700 dark:text-neutral-300">{site.name}</span>
+                    <span className="font-medium text-neutral-300">{site.name}</span>
                     <span className="ml-2 text-sm text-neutral-400">{site.domain}</span>
-                    <span className="ml-3 inline-flex items-center rounded-full bg-red-50 px-2 py-0.5 text-xs font-medium text-red-600 dark:bg-red-900/20 dark:text-red-400">
+                    <span className="ml-3 inline-flex items-center rounded-full bg-red-900/20 px-2 py-0.5 text-xs font-medium text-red-400">
                       Deleting in {daysLeft} day{daysLeft !== 1 ? 's' : ''}
                     </span>
                   </div>
                   <div className="flex gap-2">
                     <button
                       onClick={() => handleRestore(site.id)}
-                      className="px-3 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300 border border-neutral-300 dark:border-neutral-700 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+                      className="px-3 py-1.5 text-xs font-medium text-neutral-300 border border-neutral-700 rounded-lg hover:bg-neutral-800 transition-colors"
                     >
                       Restore
                     </button>
                     <button
                       onClick={() => handlePermanentDelete(site.id)}
-                      className="px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 border border-red-200 dark:border-red-900 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                      className="px-3 py-1.5 text-xs font-medium text-red-400 border border-red-900 rounded-lg hover:bg-red-900/20 transition-colors"
                     >
                       Delete Now
                     </button>
diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index f31aa18..5ff3cbe 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -19,8 +19,8 @@ export default function PricingPage() {
       <Suspense fallback={
         <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-16">
           <div className="text-center mb-12">
-            <div className="h-10 w-64 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mx-auto mb-4" />
-            <div className="h-5 w-96 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mx-auto" />
+            <div className="h-10 w-64 animate-pulse rounded bg-neutral-800 mx-auto mb-4" />
+            <div className="h-5 w-96 animate-pulse rounded bg-neutral-800 mx-auto" />
           </div>
           <PricingCardsSkeleton />
         </div>
diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index 125e030..780c17f 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import Image from 'next/image'
 import { useParams, useSearchParams, useRouter } from 'next/navigation'
-import { getPublicDashboard, getPublicStats, getPublicDailyStats, getPublicRealtime, type DashboardData, type Stats, type DailyStat } from '@/lib/api/stats'
+import { getPublicDashboard, getPublicStats, getPublicDailyStats, getPublicRealtime, authenticatePublicDashboard, type DashboardData, type Stats, type DailyStat } from '@/lib/api/stats'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { ApiError } from '@/lib/api/client'
@@ -40,7 +40,9 @@ export default function PublicDashboardPage() {
   const [data, setData] = useState<DashboardData | null>(null)
   const [password, setPassword] = useState(passwordParam || '')
   const [isPasswordProtected, setIsPasswordProtected] = useState(false)
-  
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [authLoading, setAuthLoading] = useState(false)
+
   // Captcha State
   const [captchaId, setCaptchaId] = useState('')
   const [captchaSolution, setCaptchaSolution] = useState('')
@@ -91,81 +93,42 @@ export default function PublicDashboardPage() {
 
   const loadRealtime = useCallback(async () => {
     try {
-      const auth = {
-        password,
-        captcha: {
-          captcha_id: captchaId,
-          captcha_solution: captchaSolution,
-          captcha_token: captchaToken
-        }
-      }
-      const realtimeData = await getPublicRealtime(siteId, auth)
+      const realtimeData = await getPublicRealtime(siteId)
       if (data) {
-        setData({
-          ...data,
-          realtime_visitors: realtimeData.visitors
-        })
+        setData({ ...data, realtime_visitors: realtimeData.visitors })
       }
-    } catch (error) {
+    } catch {
       // Silently fail for realtime updates
     }
-  }, [siteId, password, captchaId, captchaSolution, captchaToken, data])
+  }, [siteId, data])
 
   const loadDashboard = useCallback(async (silent = false) => {
     try {
       if (!silent) setLoading(true)
-      
+
       const interval = dateRange.start === dateRange.end ? todayInterval : multiDayInterval
-      const auth = {
-        password,
-        captcha: {
-            captcha_id: captchaId,
-            captcha_solution: captchaSolution,
-            captcha_token: captchaToken
-        }
-      }
 
       const [dashboardData, prevStatsData, prevDailyStatsData] = await Promise.all([
-        getPublicDashboard(
-            siteId,
-            dateRange.start,
-            dateRange.end,
-            10,
-            interval,
-            password,
-            auth.captcha
-        ),
+        getPublicDashboard(siteId, dateRange.start, dateRange.end, 10, interval),
         (async () => {
             const prevRange = getPreviousDateRange(dateRange.start, dateRange.end)
-            return getPublicStats(siteId, prevRange.start, prevRange.end, auth)
+            return getPublicStats(siteId, prevRange.start, prevRange.end)
         })(),
         (async () => {
             const prevRange = getPreviousDateRange(dateRange.start, dateRange.end)
-            return getPublicDailyStats(siteId, prevRange.start, prevRange.end, interval, auth)
+            return getPublicDailyStats(siteId, prevRange.start, prevRange.end, interval)
         })()
       ])
-      
+
       setData(dashboardData)
       setPrevStats(prevStatsData)
       setPrevDailyStats(prevDailyStatsData)
       setLastUpdatedAt(Date.now())
-
       setIsPasswordProtected(false)
-      // Reset captcha
-      setCaptchaId('')
-      setCaptchaSolution('')
-      setCaptchaToken('')
     } catch (error: unknown) {
       const apiErr = error instanceof ApiError ? error : null
       if (apiErr?.status === 401 && (apiErr.data as Record<string, unknown>)?.is_protected) {
         setIsPasswordProtected(true)
-        if (password) {
-          toast.error('Invalid password or captcha')
-          // Reset captcha on failure
-          setCaptchaId('')
-          setCaptchaSolution('')
-          setCaptchaToken('')
-        }
       } else if (apiErr?.status === 404) {
         toast.error('Site not found')
       } else if (!silent) {
@@ -174,7 +137,7 @@ export default function PublicDashboardPage() {
     } finally {
       if (!silent) setLoading(false)
     }
-  }, [siteId, dateRange, todayInterval, multiDayInterval, password, captchaId, captchaSolution, captchaToken])
+  }, [siteId, dateRange, todayInterval, multiDayInterval])
 
   // * Auto-refresh interval: chart, KPIs, and realtime count update every 30 seconds
   useEffect(() => {
@@ -185,15 +148,36 @@ export default function PublicDashboardPage() {
       }, 30000)
       return () => clearInterval(interval)
     }
-  }, [data, isPasswordProtected, dateRange, todayInterval, multiDayInterval, password, loadDashboard, loadRealtime])
+  }, [data, isPasswordProtected, dateRange, todayInterval, multiDayInterval, loadDashboard, loadRealtime])
 
   useEffect(() => {
     loadDashboard()
   }, [siteId, dateRange, todayInterval, multiDayInterval, loadDashboard])
 
-  const handlePasswordSubmit = (e: React.FormEvent) => {
+  const handlePasswordSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    loadDashboard()
+    setAuthLoading(true)
+    try {
+      await authenticatePublicDashboard(siteId, password, captchaToken, captchaId, captchaSolution)
+      // Cookie is now set — load dashboard (cookie sent automatically)
+      setIsAuthenticated(true)
+      await loadDashboard()
+    } catch (error: unknown) {
+      const apiErr = error instanceof ApiError ? error : null
+      if (apiErr?.status === 401) {
+        const errData = apiErr.data as Record<string, unknown> | undefined
+        const errMsg = errData?.error as string | undefined
+        toast.error(errMsg || 'Invalid password or captcha')
+      } else {
+        toast.error('Authentication failed')
+      }
+      // Reset captcha on failure
+      setCaptchaId('')
+      setCaptchaSolution('')
+      setCaptchaToken('')
+    } finally {
+      setAuthLoading(false)
+    }
   }
 
   const showSkeleton = useMinimumLoading(loading && !data && !isPasswordProtected)
diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 9fd7a5c..d8fe3c8 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -216,16 +216,19 @@ export default function FunnelReportPage() {
         </div>
 
         {/* Chart */}
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm p-6 mb-8">
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-6">
+        <div className="bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden shadow-sm p-6 mb-8">
+          <h3 className="text-lg font-semibold text-white mb-6">
             Funnel Visualization
           </h3>
           <FunnelChart
             data={chartData}
-            orientation="vertical"
+            orientation="horizontal"
             color="var(--chart-1)"
             layers={3}
-            className="mx-auto max-w-md"
+            labelLayout="grouped"
+            labelAlign="center"
+            labelOrientation="vertical"
+            style={{ aspectRatio: '4 / 1' }}
           />
         </div>
 
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index f3d5f85..6e1520f 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -4,11 +4,12 @@ import { useEffect, useState, useRef } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { updateSite, resetSiteData, type Site, type GeoDataLevel } from '@/lib/api/sites'
 import { createGoal, updateGoal, deleteGoal, type Goal } from '@/lib/api/goals'
-import { createReportSchedule, updateReportSchedule, deleteReportSchedule, testReportSchedule, type ReportSchedule, type CreateReportScheduleRequest, type EmailConfig, type WebhookConfig } from '@/lib/api/report-schedules'
+import { createReportSchedule, updateReportSchedule, deleteReportSchedule, testReportSchedule, listAlertSchedules, type ReportSchedule, type CreateReportScheduleRequest, type EmailConfig, type WebhookConfig } from '@/lib/api/report-schedules'
+import { botFilterSessions, botUnfilterSessions } from '@/lib/api/bot-filter'
 import { getGSCAuthURL, disconnectGSC } from '@/lib/api/gsc'
 import { getBunnyPullZones, connectBunny, disconnectBunny } from '@/lib/api/bunny'
 import type { BunnyPullZone } from '@/lib/api/bunny'
-import { toast } from '@ciphera-net/ui'
+import { toast, getDateRange } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatDateTime } from '@/lib/utils/formatDate'
 import { SettingsFormSkeleton, GoalsListSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
@@ -20,7 +21,7 @@ import { Select, Modal, Button } from '@ciphera-net/ui'
 import { APP_URL } from '@/lib/api/client'
 import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
 import { useUnsavedChanges } from '@/lib/hooks/useUnsavedChanges'
-import { useSite, useGoals, useReportSchedules, useSubscription, useGSCStatus, useBunnyStatus } from '@/lib/swr/dashboard'
+import { useSite, useGoals, useReportSchedules, useAlertSchedules, useSubscription, useGSCStatus, useBunnyStatus, useSessions, useBotFilterStats } from '@/lib/swr/dashboard'
 import { getRetentionOptionsForPlan, formatRetentionMonths } from '@/lib/plans'
 import { motion, AnimatePresence } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
@@ -31,7 +32,33 @@ import {
   AlertTriangleIcon,
   ZapIcon,
 } from '@ciphera-net/ui'
-import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play, Plugs, ShieldCheck } from '@phosphor-icons/react'
+import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play, Plugs, ShieldCheck, Bug, BellSimple } from '@phosphor-icons/react'
+import { SiDiscord } from '@icons-pack/react-simple-icons'
+
+function SlackIcon({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" style={{ fill: 'none' }}>
+      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" style={{ fill: '#E01E5A' }}/>
+      <path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" style={{ fill: '#36C5F0' }}/>
+      <path d="M18.958 8.834a2.528 2.528 0 0 1 2.52-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.166 0a2.528 2.528 0 0 1 2.521 2.522v6.312z" style={{ fill: '#2EB67D' }}/>
+      <path d="M15.166 18.958a2.528 2.528 0 0 1 2.521 2.52A2.528 2.528 0 0 1 15.166 24a2.528 2.528 0 0 1-2.521-2.522v-2.52h2.521zm0-1.271a2.528 2.528 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.312A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.521h-6.312z" style={{ fill: '#ECB22E' }}/>
+    </svg>
+  )
+}
+
+const CHANNEL_ICONS: Record<string, React.ReactNode> = {
+  email: <Envelope className="w-4 h-4" />,
+  slack: <SlackIcon size={16} />,
+  discord: <SiDiscord size={16} color="#5865F2" />,
+  webhook: <WebhooksLogo className="w-4 h-4" />,
+}
+
+const CHANNEL_ICONS_LG: Record<string, React.ReactNode> = {
+  email: <Envelope className="w-5 h-5 text-neutral-400" />,
+  slack: <SlackIcon size={18} />,
+  discord: <SiDiscord size={18} color="#5865F2" />,
+  webhook: <WebhooksLogo className="w-5 h-5 text-neutral-400" />,
+}
 
 const TIMEZONES = [
   'UTC',
@@ -61,7 +88,7 @@ export default function SiteSettingsPage() {
   const { data: site, isLoading: siteLoading, mutate: mutateSite } = useSite(siteId)
   const [saving, setSaving] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'goals' | 'reports' | 'integrations'>('general')
+  const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'bot' | 'goals' | 'notifications' | 'integrations'>('general')
   const searchParams = useSearchParams()
 
   const [formData, setFormData] = useState({
@@ -97,6 +124,8 @@ export default function SiteSettingsPage() {
 
   // Report schedules
   const { data: reportSchedules = [], isLoading: reportLoading, mutate: mutateReportSchedules } = useReportSchedules(siteId)
+  // Alert schedules (uptime alerts)
+  const { data: alertSchedules = [], isLoading: alertLoading, mutate: mutateAlertSchedules } = useAlertSchedules(siteId)
   const { data: gscStatus, mutate: mutateGSCStatus } = useGSCStatus(siteId)
   const [gscConnecting, setGscConnecting] = useState(false)
   const [gscDisconnecting, setGscDisconnecting] = useState(false)
@@ -122,6 +151,49 @@ export default function SiteSettingsPage() {
     sendDay: 1,
   })
 
+  // Alert channel state
+  const [alertModalOpen, setAlertModalOpen] = useState(false)
+  const [editingAlert, setEditingAlert] = useState<ReportSchedule | null>(null)
+  const [alertSaving, setAlertSaving] = useState(false)
+  const [alertTesting, setAlertTesting] = useState<string | null>(null)
+  const [alertForm, setAlertForm] = useState({
+    channel: 'email' as string,
+    recipients: '',
+    webhookUrl: '',
+  })
+
+  // Bot & Spam tab state
+  const [botDateRange, setBotDateRange] = useState(() => getDateRange(7))
+  const [suspiciousOnly, setSuspiciousOnly] = useState(true)
+  const [selectedSessions, setSelectedSessions] = useState<Set<string>>(new Set())
+  const [botView, setBotView] = useState<'review' | 'blocked'>('review')
+  const { data: sessions, mutate: mutateSessions } = useSessions(siteId, botDateRange.start, botDateRange.end, botView === 'review' ? suspiciousOnly : false)
+  const { data: botStats, mutate: mutateBotStats } = useBotFilterStats(siteId)
+
+  const handleBotFilter = async (sessionIds: string[]) => {
+    try {
+      await botFilterSessions(siteId, sessionIds)
+      toast.success(`${sessionIds.length} session(s) flagged as bot`)
+      setSelectedSessions(new Set())
+      mutateSessions()
+      mutateBotStats()
+    } catch {
+      toast.error('Failed to flag sessions')
+    }
+  }
+
+  const handleBotUnfilter = async (sessionIds: string[]) => {
+    try {
+      await botUnfilterSessions(siteId, sessionIds)
+      toast.success(`${sessionIds.length} session(s) unblocked`)
+      setSelectedSessions(new Set())
+      mutateSessions()
+      mutateBotStats()
+    } catch {
+      toast.error('Failed to unblock sessions')
+    }
+  }
+
   useEffect(() => {
     if (!site) return
     setFormData({
@@ -278,6 +350,103 @@ export default function SiteSettingsPage() {
     }
   }
 
+  // Alert channel handlers
+  const resetAlertForm = () => {
+    setAlertForm({
+      channel: 'email',
+      recipients: '',
+      webhookUrl: '',
+    })
+  }
+
+  const openEditAlert = (schedule: ReportSchedule) => {
+    setEditingAlert(schedule)
+    const isEmail = schedule.channel === 'email'
+    setAlertForm({
+      channel: schedule.channel,
+      recipients: isEmail ? (schedule.channel_config as EmailConfig).recipients.join(', ') : '',
+      webhookUrl: !isEmail ? (schedule.channel_config as WebhookConfig).url : '',
+    })
+    setAlertModalOpen(true)
+  }
+
+  const handleAlertSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    let channelConfig: EmailConfig | WebhookConfig
+    if (alertForm.channel === 'email') {
+      const recipients = alertForm.recipients.split(',').map(r => r.trim()).filter(r => r.length > 0)
+      if (recipients.length === 0) {
+        toast.error('At least one recipient email is required')
+        return
+      }
+      channelConfig = { recipients }
+    } else {
+      if (!alertForm.webhookUrl.trim()) {
+        toast.error('Webhook URL is required')
+        return
+      }
+      channelConfig = { url: alertForm.webhookUrl.trim() }
+    }
+
+    const payload: CreateReportScheduleRequest = {
+      channel: alertForm.channel,
+      channel_config: channelConfig,
+      frequency: 'daily',
+      purpose: 'alert',
+    }
+
+    setAlertSaving(true)
+    try {
+      if (editingAlert) {
+        await updateReportSchedule(siteId, editingAlert.id, { ...payload, purpose: 'alert' })
+        toast.success('Alert channel updated')
+      } else {
+        await createReportSchedule(siteId, payload)
+        toast.success('Alert channel created')
+      }
+      setAlertModalOpen(false)
+      mutateAlertSchedules()
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to save alert channel')
+    } finally {
+      setAlertSaving(false)
+    }
+  }
+
+  const handleAlertDelete = async (schedule: ReportSchedule) => {
+    if (!confirm('Delete this alert channel?')) return
+    try {
+      await deleteReportSchedule(siteId, schedule.id)
+      toast.success('Alert channel deleted')
+      mutateAlertSchedules()
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to delete alert channel')
+    }
+  }
+
+  const handleAlertToggle = async (schedule: ReportSchedule) => {
+    try {
+      await updateReportSchedule(siteId, schedule.id, { enabled: !schedule.enabled })
+      toast.success(schedule.enabled ? 'Alert paused' : 'Alert enabled')
+      mutateAlertSchedules()
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to update alert channel')
+    }
+  }
+
+  const handleAlertTest = async (schedule: ReportSchedule) => {
+    setAlertTesting(schedule.id)
+    try {
+      await testReportSchedule(siteId, schedule.id)
+      toast.success('Test alert sent successfully')
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to send test alert')
+    } finally {
+      setAlertTesting(null)
+    }
+  }
+
   const getChannelLabel = (channel: string) => {
     switch (channel) {
       case 'email': return 'Email'
@@ -615,6 +784,19 @@ export default function SiteSettingsPage() {
             <ShieldCheck className="w-5 h-5" />
             Data & Privacy
           </button>
+          <button
+            onClick={() => setActiveTab('bot')}
+            role="tab"
+            aria-selected={activeTab === 'bot'}
+            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
+              activeTab === 'bot'
+                ? 'bg-brand-orange/10 text-brand-orange'
+                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
+            }`}
+          >
+            <Bug className="w-5 h-5" />
+            Bot & Spam
+          </button>
           <button
             onClick={() => setActiveTab('goals')}
             role="tab"
@@ -629,17 +811,17 @@ export default function SiteSettingsPage() {
             Goals & Events
           </button>
           <button
-            onClick={() => setActiveTab('reports')}
+            onClick={() => setActiveTab('notifications')}
             role="tab"
-            aria-selected={activeTab === 'reports'}
+            aria-selected={activeTab === 'notifications'}
             className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'reports'
+              activeTab === 'notifications'
                 ? 'bg-brand-orange/10 text-brand-orange'
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
             }`}
           >
-            <PaperPlaneTilt className="w-5 h-5" />
-            Reports
+            <BellSimple className="w-5 h-5" />
+            Notifications
           </button>
           <button
             onClick={() => setActiveTab('integrations')}
@@ -737,9 +919,15 @@ export default function SiteSettingsPage() {
                       Add this script to your website to start tracking visitors. Choose your framework for setup instructions.
                     </p>
                     <ScriptSetupBlock
-                      site={{ domain: site.domain, name: site.name }}
+                      site={{ domain: site.domain, name: site.name, script_features: site.script_features }}
                       showFrameworkPicker
                       className="mb-4"
+                      onFeaturesChange={async (features) => {
+                        try {
+                          await updateSite(siteId, { name: site.name, script_features: features })
+                          mutateSite()
+                        } catch { /* silent — not critical */ }
+                      }}
                     />
 
                     <div className="flex items-center gap-4 mt-4">
@@ -875,22 +1063,30 @@ export default function SiteSettingsPage() {
                           </div>
 
                           <div>
-                            <div className="flex items-center justify-between mb-4">
-                              <div>
-                                <h3 className="text-sm font-medium text-neutral-900 dark:text-white">Password Protection</h3>
-                                <p className="text-xs text-neutral-500 mt-1">Restrict access to this dashboard.</p>
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center gap-3">
+                                <div>
+                                  <h3 className="text-sm font-medium text-white">Password Protection</h3>
+                                  <p className="text-xs text-neutral-500 mt-0.5">Restrict access to this dashboard.</p>
+                                </div>
+                                {isPasswordEnabled && site?.has_password && !formData.password && (
+                                  <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900/30 text-green-400 border border-green-500/20">
+                                    <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
+                                    Password set
+                                  </span>
+                                )}
                               </div>
                               <label className="relative inline-flex items-center cursor-pointer">
-                                <input 
-                                  type="checkbox" 
-                                  checked={isPasswordEnabled} 
+                                <input
+                                  type="checkbox"
+                                  checked={isPasswordEnabled}
                                   onChange={(e) => {
                                     setIsPasswordEnabled(e.target.checked);
-                                    if (!e.target.checked) setFormData({...formData, password: ''}); 
+                                    if (!e.target.checked) setFormData({...formData, password: ''});
                                   }}
                                   className="sr-only peer"
                                 />
-                                <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
+                                <div className="w-11 h-6 bg-neutral-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-orange"></div>
                               </label>
                             </div>
 
@@ -902,15 +1098,36 @@ export default function SiteSettingsPage() {
                                   exit={{ opacity: 0, height: 0 }}
                                   className="overflow-hidden"
                                 >
-                                  <PasswordInput
-                                    id="password"
-                                    value={formData.password}
-                                    onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-                                    placeholder={site.has_password ? "Change password (leave empty to keep current)" : "Set a password"}
-                                  />
-                                  <p className="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
-                                    Visitors will need to enter this password to view the dashboard.
-                                  </p>
+                                  <div className="mt-4 space-y-3">
+                                    <PasswordInput
+                                      id="password"
+                                      value={formData.password}
+                                      onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                                      placeholder="Enter new password"
+                                    />
+                                    {site?.has_password && (
+                                      <p className="text-xs text-neutral-500">
+                                        Current password will remain unchanged unless you enter a new one.
+                                      </p>
+                                    )}
+                                    {site?.has_password && (
+                                      <button
+                                        type="button"
+                                        onClick={() => {
+                                          setIsPasswordEnabled(false)
+                                          setFormData({ ...formData, password: '' })
+                                        }}
+                                        className="text-xs font-medium text-red-400 hover:text-red-300 transition-colors"
+                                      >
+                                        Remove password protection
+                                      </button>
+                                    )}
+                                    {!site?.has_password && (
+                                      <p className="text-xs text-neutral-500">
+                                        Visitors will need to enter this password to view the dashboard.
+                                      </p>
+                                    )}
+                                  </div>
                                 </motion.div>
                               )}
                             </AnimatePresence>
@@ -1052,28 +1269,9 @@ export default function SiteSettingsPage() {
                     </div>
                   </div>
 
-                  {/* Bot and noise filtering */}
+                  {/* Filtering */}
                   <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
                     <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Filtering</h3>
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-neutral-900 dark:text-white">Filter bots and referrer spam</h4>
-                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
-                            Exclude known crawlers, scrapers, and referrer spam domains from your stats
-                          </p>
-                        </div>
-                        <label className="relative inline-flex items-center cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.filter_bots}
-                            onChange={(e) => setFormData({ ...formData, filter_bots: e.target.checked })}
-                            className="sr-only peer"
-                          />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                        </label>
-                      </div>
-                    </div>
                     <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
                       <div className="flex items-center justify-between">
                         <div>
@@ -1224,6 +1422,165 @@ export default function SiteSettingsPage() {
               </div>
             )}
 
+            {activeTab === 'bot' && (
+              <div className="flex-1 space-y-6">
+                <div>
+                  <h2 className="text-xl font-bold text-white mb-1">Bot & Spam</h2>
+                  <p className="text-neutral-400 text-sm">Manage automated and manual bot filtering.</p>
+                </div>
+
+                {/* Automated Filtering Section */}
+                <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-5">
+                  <h3 className="font-semibold text-white mb-3">Automated Filtering</h3>
+                  <div className="flex items-center justify-between py-3">
+                    <div>
+                      <p className="font-medium text-white">Filter bots and referrer spam</p>
+                      <p className="text-sm text-neutral-400 mt-0.5">Automatically block known bots, crawlers, and spam referrers</p>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={formData.filter_bots}
+                        onChange={(e) => setFormData({ ...formData, filter_bots: e.target.checked })}
+                        className="sr-only peer"
+                      />
+                      <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
+                    </label>
+                  </div>
+                  {botStats && (
+                    <div className="mt-3 pt-3 border-t border-neutral-800 flex gap-6 text-sm">
+                      <div>
+                        <span className="text-neutral-400">Auto-blocked this month:</span>
+                        <span className="ml-2 font-medium text-white">{botStats.auto_blocked_this_month.toLocaleString()}</span>
+                      </div>
+                      <div>
+                        <span className="text-neutral-400">Manually flagged:</span>
+                        <span className="ml-2 font-medium text-white">{botStats.filtered_sessions} sessions ({botStats.filtered_events} events)</span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Session Review Section */}
+                <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-5">
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="font-semibold text-white">Session Review</h3>
+                    <div className="flex items-center gap-3">
+                      {/* Review / Blocked toggle */}
+                      <div className="flex items-center rounded-lg border border-neutral-700 overflow-hidden text-sm">
+                        <button
+                          onClick={() => { setBotView('review'); setSelectedSessions(new Set()) }}
+                          className={`px-3 py-1.5 transition-colors ${botView === 'review' ? 'bg-neutral-800 text-white' : 'text-neutral-400 hover:text-white'}`}
+                        >
+                          Review
+                        </button>
+                        <button
+                          onClick={() => { setBotView('blocked'); setSelectedSessions(new Set()) }}
+                          className={`px-3 py-1.5 transition-colors ${botView === 'blocked' ? 'bg-neutral-800 text-white' : 'text-neutral-400 hover:text-white'}`}
+                        >
+                          Blocked
+                        </button>
+                      </div>
+                      {botView === 'review' && (
+                        <label className="flex items-center gap-2 text-sm text-neutral-400 cursor-pointer">
+                          <input
+                            type="checkbox"
+                            checked={suspiciousOnly}
+                            onChange={(e) => setSuspiciousOnly(e.target.checked)}
+                            className="w-4 h-4 cursor-pointer"
+                            style={{ accentColor: '#FD5E0F' }}
+                          />
+                          Suspicious only
+                        </label>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Bulk actions */}
+                  {selectedSessions.size > 0 && (
+                    <div className="mb-3 flex items-center gap-3 p-2 bg-brand-orange/10 border border-brand-orange/20 rounded-lg">
+                      <span className="text-sm text-brand-orange font-medium">{selectedSessions.size} selected</span>
+                      {botView === 'review' ? (
+                        <button onClick={() => handleBotFilter(Array.from(selectedSessions))} className="text-sm font-medium text-red-400 hover:text-red-300">
+                          Flag as bot
+                        </button>
+                      ) : (
+                        <button onClick={() => handleBotUnfilter(Array.from(selectedSessions))} className="text-sm font-medium text-green-400 hover:text-green-300">
+                          Unblock
+                        </button>
+                      )}
+                      <button onClick={() => setSelectedSessions(new Set())} className="text-sm text-neutral-400 hover:text-white ml-auto">
+                        Clear
+                      </button>
+                    </div>
+                  )}
+
+                  {/* Session cards */}
+                  <div className="space-y-2">
+                    {(sessions?.sessions || [])
+                      .filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered)
+                      .map((session) => (
+                      <div key={session.session_id} className="flex items-center gap-3 p-3 rounded-xl border border-neutral-800 hover:border-neutral-700 transition-colors">
+                        <input
+                          type="checkbox"
+                          checked={selectedSessions.has(session.session_id)}
+                          onChange={(e) => {
+                            const next = new Set(selectedSessions)
+                            if (e.target.checked) next.add(session.session_id)
+                            else next.delete(session.session_id)
+                            setSelectedSessions(next)
+                          }}
+                          className="w-4 h-4 shrink-0 cursor-pointer"
+                          style={{ accentColor: '#FD5E0F' }}
+                        />
+
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2 mb-1">
+                            <span className="text-sm font-medium text-white truncate">{session.first_page}</span>
+                            <span className={`shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
+                              session.suspicion_score >= 5 ? 'bg-red-900/30 text-red-400' :
+                              session.suspicion_score >= 3 ? 'bg-yellow-900/30 text-yellow-400' :
+                              'bg-neutral-800 text-neutral-400'
+                            }`}>
+                              {session.suspicion_score >= 5 ? 'High risk' : session.suspicion_score >= 3 ? 'Suspicious' : 'Low risk'}
+                            </span>
+                          </div>
+                          <div className="flex items-center gap-3 text-xs text-neutral-500">
+                            <span>{session.pageviews} page{session.pageviews !== 1 ? 's' : ''}</span>
+                            <span>{session.duration != null ? `${Math.round(session.duration)}s` : 'No duration'}</span>
+                            <span>{[session.city, session.country].filter(Boolean).join(', ') || 'Unknown location'}</span>
+                            <span>{session.browser || 'Unknown browser'}</span>
+                            <span>{session.referrer || 'Direct'}</span>
+                          </div>
+                        </div>
+
+                        {botView === 'review' ? (
+                          <button
+                            onClick={() => handleBotFilter([session.session_id])}
+                            className="shrink-0 px-3 py-1.5 text-xs font-medium text-red-400 hover:text-white hover:bg-red-500/20 rounded-lg border border-red-500/20 transition-colors"
+                          >
+                            Flag as bot
+                          </button>
+                        ) : (
+                          <button
+                            onClick={() => handleBotUnfilter([session.session_id])}
+                            className="shrink-0 px-3 py-1.5 text-xs font-medium text-green-400 hover:text-white hover:bg-green-500/20 rounded-lg border border-green-500/20 transition-colors"
+                          >
+                            Unblock
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                    {(sessions?.sessions || []).filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered).length === 0 && (
+                      <div className="py-12 text-center text-neutral-500 text-sm">
+                        {botView === 'blocked' ? 'No blocked sessions' : 'No suspicious sessions found'}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+
             {activeTab === 'goals' && (
               <div className="space-y-6">
                 <div>
@@ -1283,132 +1640,257 @@ export default function SiteSettingsPage() {
               </div>
             )}
 
-            {activeTab === 'reports' && (
-              <div className="space-y-6">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Scheduled Reports</h2>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Automatically deliver analytics reports via email or webhooks.</p>
+            {activeTab === 'notifications' && (
+              <div className="space-y-8">
+                <div>
+                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Notifications</h2>
+                  <p className="text-sm text-neutral-500 dark:text-neutral-400">Configure how you receive reports and alerts.</p>
+                </div>
+
+                {/* Reports subsection */}
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-base font-medium text-neutral-900 dark:text-white">Reports</h3>
+                      <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">Automatically deliver analytics reports via email or webhooks.</p>
+                    </div>
+                    {canEdit && (
+                      <Button onClick={() => { setEditingSchedule(null); resetReportForm(); setReportModalOpen(true) }}>
+                        Add Report
+                      </Button>
+                    )}
                   </div>
-                  {canEdit && (
-                    <Button onClick={() => { setEditingSchedule(null); resetReportForm(); setReportModalOpen(true) }}>
-                      Add Report
-                    </Button>
+
+                  {reportLoading ? (
+                    <div className="space-y-2">
+                      {Array.from({ length: 3 }).map((_, i) => (
+                        <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
+                      ))}
+                    </div>
+                  ) : reportSchedules.length === 0 ? (
+                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                      No scheduled reports yet. Add a report to automatically receive analytics summaries.
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {reportSchedules.map((schedule) => (
+                        <div
+                          key={schedule.id}
+                          className={`rounded-xl border p-4 transition-colors ${
+                            schedule.enabled
+                              ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
+                              : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
+                          }`}
+                        >
+                          <div className="flex items-start justify-between gap-4">
+                            <div className="flex items-start gap-3 min-w-0">
+                              <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
+                                {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
+                              </div>
+                              <div className="min-w-0">
+                                <div className="flex items-center gap-2 flex-wrap">
+                                  <span className="font-medium text-neutral-900 dark:text-white">
+                                    {getChannelLabel(schedule.channel)}
+                                  </span>
+                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-orange/10 text-brand-orange">
+                                    {getFrequencyLabel(schedule.frequency)}
+                                  </span>
+                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
+                                    {getReportTypeLabel(schedule.report_type)}
+                                  </span>
+                                </div>
+                                <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
+                                  {schedule.channel === 'email'
+                                    ? (schedule.channel_config as EmailConfig).recipients.join(', ')
+                                    : (schedule.channel_config as WebhookConfig).url}
+                                </p>
+                                <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
+                                  {getScheduleDescription(schedule)}
+                                </p>
+                                <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
+                                  <span>
+                                    Last sent: {schedule.last_sent_at
+                                      ? formatDateTime(new Date(schedule.last_sent_at))
+                                      : 'Never'}
+                                  </span>
+                                </div>
+                                {schedule.last_error && (
+                                  <p className="text-xs text-red-500 dark:text-red-400 mt-1">
+                                    Error: {schedule.last_error}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+
+                            {canEdit && (
+                              <div className="flex items-center gap-2 flex-shrink-0">
+                                <button
+                                  type="button"
+                                  onClick={() => handleReportTest(schedule)}
+                                  disabled={reportTesting === schedule.id}
+                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
+                                  title="Send test report"
+                                >
+                                  {reportTesting === schedule.id ? (
+                                    <SpinnerGap className="w-4 h-4 animate-spin" />
+                                  ) : (
+                                    <Play className="w-4 h-4" />
+                                  )}
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={() => openEditSchedule(schedule)}
+                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+                                  title="Edit schedule"
+                                >
+                                  <PencilSimple className="w-4 h-4" />
+                                </button>
+                                <label className="relative inline-flex items-center cursor-pointer">
+                                  <input
+                                    type="checkbox"
+                                    checked={schedule.enabled}
+                                    onChange={() => handleReportToggle(schedule)}
+                                    className="sr-only peer"
+                                  />
+                                  <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
+                                </label>
+                                <button
+                                  type="button"
+                                  onClick={() => handleReportDelete(schedule)}
+                                  className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                                  title="Delete schedule"
+                                >
+                                  <Trash className="w-4 h-4" />
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
                   )}
                 </div>
 
-                {reportLoading ? (
-                  <div className="space-y-2">
-                    {Array.from({ length: 3 }).map((_, i) => (
-                      <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
-                    ))}
-                  </div>
-                ) : reportSchedules.length === 0 ? (
-                  <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
-                    No scheduled reports yet. Add a report to automatically receive analytics summaries.
-                  </div>
-                ) : (
-                  <div className="space-y-3">
-                    {reportSchedules.map((schedule) => (
-                      <div
-                        key={schedule.id}
-                        className={`rounded-xl border p-4 transition-colors ${
-                          schedule.enabled
-                            ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
-                            : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
-                        }`}
-                      >
-                        <div className="flex items-start justify-between gap-4">
-                          <div className="flex items-start gap-3 min-w-0">
-                            <div className="p-2 bg-neutral-100 dark:bg-neutral-800 rounded-lg mt-0.5">
-                              {schedule.channel === 'email' ? (
-                                <Envelope className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
-                              ) : (
-                                <WebhooksLogo className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
-                              )}
-                            </div>
-                            <div className="min-w-0">
-                              <div className="flex items-center gap-2 flex-wrap">
-                                <span className="font-medium text-neutral-900 dark:text-white">
-                                  {getChannelLabel(schedule.channel)}
-                                </span>
-                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-orange/10 text-brand-orange">
-                                  {getFrequencyLabel(schedule.frequency)}
-                                </span>
-                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
-                                  {getReportTypeLabel(schedule.report_type)}
-                                </span>
-                              </div>
-                              <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
-                                {schedule.channel === 'email'
-                                  ? (schedule.channel_config as EmailConfig).recipients.join(', ')
-                                  : (schedule.channel_config as WebhookConfig).url}
-                              </p>
-                              <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
-                                {getScheduleDescription(schedule)}
-                              </p>
-                              <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
-                                <span>
-                                  Last sent: {schedule.last_sent_at
-                                    ? formatDateTime(new Date(schedule.last_sent_at))
-                                    : 'Never'}
-                                </span>
-                              </div>
-                              {schedule.last_error && (
-                                <p className="text-xs text-red-500 dark:text-red-400 mt-1">
-                                  Error: {schedule.last_error}
-                                </p>
-                              )}
-                            </div>
-                          </div>
+                {/* Divider */}
+                <div className="border-t border-neutral-200 dark:border-neutral-800" />
 
-                          {canEdit && (
-                            <div className="flex items-center gap-2 flex-shrink-0">
-                              <button
-                                type="button"
-                                onClick={() => handleReportTest(schedule)}
-                                disabled={reportTesting === schedule.id}
-                                className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
-                                title="Send test report"
-                              >
-                                {reportTesting === schedule.id ? (
-                                  <SpinnerGap className="w-4 h-4 animate-spin" />
-                                ) : (
-                                  <Play className="w-4 h-4" />
-                                )}
-                              </button>
-                              <button
-                                type="button"
-                                onClick={() => openEditSchedule(schedule)}
-                                className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                title="Edit schedule"
-                              >
-                                <PencilSimple className="w-4 h-4" />
-                              </button>
-                              <label className="relative inline-flex items-center cursor-pointer">
-                                <input
-                                  type="checkbox"
-                                  checked={schedule.enabled}
-                                  onChange={() => handleReportToggle(schedule)}
-                                  className="sr-only peer"
-                                />
-                                <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                              </label>
-                              <button
-                                type="button"
-                                onClick={() => handleReportDelete(schedule)}
-                                className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
-                                title="Delete schedule"
-                              >
-                                <Trash className="w-4 h-4" />
-                              </button>
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    ))}
+                {/* Alerts subsection */}
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-base font-medium text-neutral-900 dark:text-white">Alerts</h3>
+                      <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">Get notified when your site goes down or recovers.</p>
+                    </div>
+                    {canEdit && (
+                      <Button onClick={() => { setEditingAlert(null); resetAlertForm(); setAlertModalOpen(true) }}>
+                        Add Alert Channel
+                      </Button>
+                    )}
                   </div>
-                )}
+
+                  {alertLoading ? (
+                    <div className="space-y-2">
+                      {Array.from({ length: 2 }).map((_, i) => (
+                        <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
+                      ))}
+                    </div>
+                  ) : alertSchedules.length === 0 ? (
+                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                      No alert channels configured. Add a channel to receive uptime alerts when your site goes down or recovers.
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {alertSchedules.map((schedule) => (
+                        <div
+                          key={schedule.id}
+                          className={`rounded-xl border p-4 transition-colors ${
+                            schedule.enabled
+                              ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
+                              : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
+                          }`}
+                        >
+                          <div className="flex items-start justify-between gap-4">
+                            <div className="flex items-start gap-3 min-w-0">
+                              <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
+                                {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
+                              </div>
+                              <div className="min-w-0">
+                                <div className="flex items-center gap-2 flex-wrap">
+                                  <span className="font-medium text-neutral-900 dark:text-white">
+                                    {getChannelLabel(schedule.channel)}
+                                  </span>
+                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-500">
+                                    Uptime Alert
+                                  </span>
+                                </div>
+                                <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
+                                  {schedule.channel === 'email'
+                                    ? (schedule.channel_config as EmailConfig).recipients.join(', ')
+                                    : (schedule.channel_config as WebhookConfig).url}
+                                </p>
+                                <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
+                                  <span>
+                                    Last sent: {schedule.last_sent_at
+                                      ? formatDateTime(new Date(schedule.last_sent_at))
+                                      : 'Never'}
+                                  </span>
+                                </div>
+                                {schedule.last_error && (
+                                  <p className="text-xs text-red-500 dark:text-red-400 mt-1">
+                                    Error: {schedule.last_error}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+
+                            {canEdit && (
+                              <div className="flex items-center gap-2 flex-shrink-0">
+                                <button
+                                  type="button"
+                                  onClick={() => handleAlertTest(schedule)}
+                                  disabled={alertTesting === schedule.id}
+                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
+                                  title="Send test alert"
+                                >
+                                  {alertTesting === schedule.id ? (
+                                    <SpinnerGap className="w-4 h-4 animate-spin" />
+                                  ) : (
+                                    <Play className="w-4 h-4" />
+                                  )}
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={() => openEditAlert(schedule)}
+                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+                                  title="Edit alert channel"
+                                >
+                                  <PencilSimple className="w-4 h-4" />
+                                </button>
+                                <label className="relative inline-flex items-center cursor-pointer">
+                                  <input
+                                    type="checkbox"
+                                    checked={schedule.enabled}
+                                    onChange={() => handleAlertToggle(schedule)}
+                                    className="sr-only peer"
+                                  />
+                                  <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
+                                </label>
+                                <button
+                                  type="button"
+                                  onClick={() => handleAlertDelete(schedule)}
+                                  className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                                  title="Delete alert channel"
+                                >
+                                  <Trash className="w-4 h-4" />
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
               </div>
             )}
 
@@ -1883,7 +2365,7 @@ export default function SiteSettingsPage() {
                       : 'border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800'
                   }`}
                 >
-                  {ch === 'email' ? <Envelope className="w-4 h-4" /> : <WebhooksLogo className="w-4 h-4" />}
+                  {CHANNEL_ICONS[ch]}
                   {getChannelLabel(ch)}
                 </button>
               ))}
@@ -2022,6 +2504,79 @@ export default function SiteSettingsPage() {
         </form>
       </Modal>
 
+      <Modal
+        isOpen={alertModalOpen}
+        onClose={() => setAlertModalOpen(false)}
+        title={editingAlert ? 'Edit alert channel' : 'Add alert channel'}
+      >
+        <form onSubmit={handleAlertSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Channel</label>
+            <div className="grid grid-cols-2 gap-2">
+              {(['email', 'slack', 'discord', 'webhook'] as const).map((ch) => (
+                <button
+                  key={ch}
+                  type="button"
+                  onClick={() => setAlertForm({ ...alertForm, channel: ch })}
+                  className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
+                    alertForm.channel === ch
+                      ? 'border-brand-orange bg-brand-orange/10 text-brand-orange'
+                      : 'border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800'
+                  }`}
+                >
+                  {CHANNEL_ICONS[ch]}
+                  {getChannelLabel(ch)}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {alertForm.channel === 'email' ? (
+            <div>
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Recipients</label>
+              <input
+                type="text"
+                value={alertForm.recipients}
+                onChange={(e) => setAlertForm({ ...alertForm, recipients: e.target.value })}
+                placeholder="email1@example.com, email2@example.com"
+                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
+                required
+              />
+              <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">Comma-separated email addresses.</p>
+            </div>
+          ) : (
+            <div>
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
+                {alertForm.channel === 'slack' ? 'Slack Webhook URL' : alertForm.channel === 'discord' ? 'Discord Webhook URL' : 'Webhook URL'}
+              </label>
+              <input
+                type="url"
+                value={alertForm.webhookUrl}
+                onChange={(e) => setAlertForm({ ...alertForm, webhookUrl: e.target.value })}
+                placeholder="https://hooks.example.com/..."
+                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
+                required
+              />
+            </div>
+          )}
+
+          <div className="p-3 rounded-lg bg-neutral-50 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
+            <p className="text-xs text-neutral-500 dark:text-neutral-400">
+              Alerts are sent automatically when your site goes down or recovers. No schedule configuration needed.
+            </p>
+          </div>
+
+          <div className="flex justify-end gap-2 pt-2">
+            <Button type="button" variant="secondary" onClick={() => setAlertModalOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" variant="primary" disabled={alertSaving}>
+              {alertSaving ? 'Saving...' : editingAlert ? 'Update' : 'Create'}
+            </Button>
+          </div>
+        </form>
+      </Modal>
+
       <VerificationModal
         isOpen={showVerificationModal}
         onClose={() => setShowVerificationModal(false)}
diff --git a/app/sites/[id]/uptime/page.tsx b/app/sites/[id]/uptime/page.tsx
index 497f95b..67dda0b 100644
--- a/app/sites/[id]/uptime/page.tsx
+++ b/app/sites/[id]/uptime/page.tsx
@@ -1,25 +1,19 @@
 'use client'
 
 import { useAuth } from '@/lib/auth/context'
-import { useEffect, useState, useRef } from 'react'
-import { useParams, useRouter } from 'next/navigation'
-import { motion, AnimatePresence } from 'framer-motion'
+import { useEffect, useState } from 'react'
+import { useParams } from 'next/navigation'
 import { useSite, useUptimeStatus } from '@/lib/swr/dashboard'
+import { updateSite, type Site } from '@/lib/api/sites'
 import {
-  createUptimeMonitor,
-  updateUptimeMonitor,
-  deleteUptimeMonitor,
   getMonitorChecks,
   type UptimeStatusResponse,
   type MonitorStatus,
   type UptimeCheck,
   type UptimeDailyStat,
-  type CreateMonitorRequest,
 } from '@/lib/api/uptime'
 import { toast } from '@ciphera-net/ui'
-import { useTheme } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@ciphera-net/ui'
-import { Button, Modal } from '@ciphera-net/ui'
+import { Button } from '@ciphera-net/ui'
 import { UptimeSkeleton, ChecksSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import { formatDateFull, formatTime, formatDateTimeShort } from '@/lib/utils/formatDate'
 import {
@@ -335,300 +329,65 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
   )
 }
 
-// * Component: Monitor card (matches the reference image design)
-function MonitorCard({
-  monitorStatus,
-  expanded,
-  onToggle,
-  onEdit,
-  onDelete,
-  canEdit,
-  siteId,
-}: {
-  monitorStatus: MonitorStatus
-  expanded: boolean
-  onToggle: () => void
-  onEdit: () => void
-  onDelete: () => void
-  canEdit: boolean
-  siteId: string
-}) {
-  const { monitor, daily_stats, overall_uptime } = monitorStatus
-  const [checks, setChecks] = useState<UptimeCheck[]>([])
-  const [loadingChecks, setLoadingChecks] = useState(false)
-
-  useEffect(() => {
-    if (expanded && checks.length === 0) {
-      const fetchChecks = async () => {
-        setLoadingChecks(true)
-        try {
-          const data = await getMonitorChecks(siteId, monitor.id, 50)
-          setChecks(data)
-        } catch {
-          // * Silent fail for check details
-        } finally {
-          setLoadingChecks(false)
-        }
-      }
-      fetchChecks()
-    }
-  }, [expanded, siteId, monitor.id, checks.length])
-
-  return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden">
-      {/* Header */}
-      <button
-        onClick={onToggle}
-        className="w-full p-5 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors"
-      >
-        <div className="flex items-center gap-3">
-          {/* Status indicator */}
-          <div className={`w-3 h-3 rounded-full ${getStatusDotColor(monitor.last_status)} shrink-0`} />
-          <span className="font-semibold text-neutral-900 dark:text-white">
-            {monitor.name}
-          </span>
-          <span className="text-sm text-neutral-500 dark:text-neutral-400 hidden sm:inline">
-            {monitor.url}
-          </span>
-        </div>
-        <div className="flex items-center gap-4">
-          {monitor.last_response_time_ms !== null && (
-            <span className="text-sm text-neutral-500 dark:text-neutral-400 hidden sm:inline">
-              {formatMs(monitor.last_response_time_ms)}
-            </span>
-          )}
-          <span className="text-sm font-semibold text-neutral-900 dark:text-white">
-            {formatUptime(overall_uptime)} uptime
-          </span>
-          <svg
-            className={`w-4 h-4 text-neutral-400 transition-transform ${expanded ? 'rotate-180' : ''}`}
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-          </svg>
-        </div>
-      </button>
-
-      {/* Status bar */}
-      <div className="px-5 pb-4">
-        <UptimeStatusBar dailyStats={daily_stats} />
-        <div className="flex justify-between mt-1.5 text-xs text-neutral-400 dark:text-neutral-500">
-          <span>90 days ago</span>
-          <span>Today</span>
-        </div>
-      </div>
-
-      {/* Expanded details */}
-      <AnimatePresence>
-        {expanded && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.2 }}
-            className="overflow-hidden"
-          >
-            <div className="px-5 pb-5 border-t border-neutral-200 dark:border-neutral-800 pt-4">
-              {/* Monitor details grid */}
-              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-5">
-                <div>
-                  <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
-                    Status
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div className={`w-2 h-2 rounded-full ${getStatusDotColor(monitor.last_status)}`} />
-                    <span className="text-sm font-medium text-neutral-900 dark:text-white">
-                      {getStatusLabel(monitor.last_status)}
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
-                    Response Time
-                  </div>
-                  <span className="text-sm font-medium text-neutral-900 dark:text-white">
-                    {formatMs(monitor.last_response_time_ms)}
-                  </span>
-                </div>
-                <div>
-                  <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
-                    Check Interval
-                  </div>
-                  <span className="text-sm font-medium text-neutral-900 dark:text-white">
-                    {monitor.check_interval_seconds >= 60
-                      ? `${Math.floor(monitor.check_interval_seconds / 60)}m`
-                      : `${monitor.check_interval_seconds}s`}
-                  </span>
-                </div>
-                <div>
-                  <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
-                    Last Checked
-                  </div>
-                  <span className="text-sm font-medium text-neutral-900 dark:text-white">
-                    {formatTimeAgo(monitor.last_checked_at)}
-                  </span>
-                </div>
-              </div>
-
-              {/* Response time chart */}
-              {loadingChecks ? (
-                <ChecksSkeleton />
-              ) : checks.length > 0 ? (
-                <>
-                  <ResponseTimeChart checks={checks} />
-
-                  {/* Recent checks */}
-                  <div className="mt-5">
-                    <h4 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
-                      Recent Checks
-                    </h4>
-                    <div className="space-y-1.5 max-h-48 overflow-y-auto">
-                      {checks.slice(0, 20).map((check) => (
-                        <div
-                          key={check.id}
-                          className="flex items-center justify-between py-1.5 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800 text-sm"
-                        >
-                          <div className="flex items-center gap-2">
-                            <div className={`w-2 h-2 rounded-full ${getStatusDotColor(check.status)}`} />
-                            <span className="text-neutral-600 dark:text-neutral-300 text-xs">
-                              {formatDateTimeShort(new Date(check.checked_at))}
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-3">
-                            {check.status_code && (
-                              <span className="text-xs text-neutral-500 dark:text-neutral-400">
-                                {check.status_code}
-                              </span>
-                            )}
-                            <span className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
-                              {formatMs(check.response_time_ms)}
-                            </span>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </>
-              ) : null}
-
-              {/* Actions */}
-              {canEdit && (
-                <div className="flex gap-2 mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800">
-                  <Button
-                    onClick={(e: React.MouseEvent) => { e.stopPropagation(); onEdit() }}
-                    variant="secondary"
-                    className="text-sm"
-                  >
-                    Edit
-                  </Button>
-                  <Button
-                    onClick={(e: React.MouseEvent) => { e.stopPropagation(); onDelete() }}
-                    variant="secondary"
-                    className="text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
-                  >
-                    Delete
-                  </Button>
-                </div>
-              )}
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  )
-}
-
 // * Main uptime page
 export default function UptimePage() {
   const { user } = useAuth()
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
   const params = useParams()
-  const router = useRouter()
   const siteId = params.id as string
 
-  const { data: site } = useSite(siteId)
+  const { data: site, mutate: mutateSite } = useSite(siteId)
   const { data: uptimeData, isLoading, mutate: mutateUptime } = useUptimeStatus(siteId)
-  const [expandedMonitor, setExpandedMonitor] = useState<string | null>(null)
-  const [showAddModal, setShowAddModal] = useState(false)
-  const [showEditModal, setShowEditModal] = useState(false)
-  const [editingMonitor, setEditingMonitor] = useState<MonitorStatus | null>(null)
-  const [formData, setFormData] = useState<CreateMonitorRequest>({
-    name: '',
-    url: '',
-    check_interval_seconds: 300,
-    expected_status_code: 200,
-    timeout_seconds: 30,
-  })
-  const [saving, setSaving] = useState(false)
+  const [toggling, setToggling] = useState(false)
+  const [checks, setChecks] = useState<UptimeCheck[]>([])
+  const [loadingChecks, setLoadingChecks] = useState(false)
 
-  const handleAddMonitor = async () => {
-    if (!formData.name || !formData.url) {
-      toast.error('Name and URL are required')
+  // * Single monitor from the auto-managed uptime system
+  const monitor = uptimeData?.monitors?.[0] ?? null
+  const overallUptime = uptimeData?.overall_uptime ?? 100
+  const overallStatus = uptimeData?.status ?? 'operational'
+
+  // * Fetch recent checks when we have a monitor
+  useEffect(() => {
+    if (!monitor) {
+      setChecks([])
       return
     }
-    setSaving(true)
-    try {
-      await createUptimeMonitor(siteId, formData)
-      toast.success('Monitor created successfully')
-      setShowAddModal(false)
-      setFormData({ name: '', url: '', check_interval_seconds: 300, expected_status_code: 200, timeout_seconds: 30 })
-      mutateUptime()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to create monitor')
-    } finally {
-      setSaving(false)
+    const fetchChecks = async () => {
+      setLoadingChecks(true)
+      try {
+        const data = await getMonitorChecks(siteId, monitor.monitor.id, 20)
+        setChecks(data)
+      } catch {
+        // * Silent fail for check details
+      } finally {
+        setLoadingChecks(false)
+      }
     }
-  }
+    fetchChecks()
+  }, [siteId, monitor?.monitor.id])
 
-  const handleEditMonitor = async () => {
-    if (!editingMonitor || !formData.name || !formData.url) return
-    setSaving(true)
+  const handleToggleUptime = async (enabled: boolean) => {
+    if (!site) return
+    setToggling(true)
     try {
-      await updateUptimeMonitor(siteId, editingMonitor.monitor.id, {
-        name: formData.name,
-        url: formData.url,
-        check_interval_seconds: formData.check_interval_seconds,
-        expected_status_code: formData.expected_status_code,
-        timeout_seconds: formData.timeout_seconds,
-        enabled: editingMonitor.monitor.enabled,
+      await updateSite(site.id, {
+        name: site.name,
+        timezone: site.timezone,
+        is_public: site.is_public,
+        excluded_paths: site.excluded_paths,
+        uptime_enabled: enabled,
       })
-      toast.success('Monitor updated successfully')
-      setShowEditModal(false)
-      setEditingMonitor(null)
+      mutateSite()
       mutateUptime()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to update monitor')
+      toast.success(enabled ? 'Uptime monitoring enabled' : 'Uptime monitoring disabled')
+    } catch {
+      toast.error('Failed to update uptime monitoring')
     } finally {
-      setSaving(false)
+      setToggling(false)
     }
   }
 
-  const handleDeleteMonitor = async (monitorId: string) => {
-    if (!window.confirm('Are you sure you want to delete this monitor? All historical data will be lost.')) return
-    try {
-      await deleteUptimeMonitor(siteId, monitorId)
-      toast.success('Monitor deleted')
-      mutateUptime()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to delete monitor')
-    }
-  }
-
-  const openEditModal = (ms: MonitorStatus) => {
-    setEditingMonitor(ms)
-    setFormData({
-      name: ms.monitor.name,
-      url: ms.monitor.url,
-      check_interval_seconds: ms.monitor.check_interval_seconds,
-      expected_status_code: ms.monitor.expected_status_code,
-      timeout_seconds: ms.monitor.timeout_seconds,
-    })
-    setShowEditModal(true)
-  }
-
   useEffect(() => {
     if (site?.domain) document.title = `Uptime · ${site.domain} | Pulse`
   }, [site?.domain])
@@ -639,10 +398,49 @@ export default function UptimePage() {
   if (showSkeleton) return <UptimeSkeleton />
   if (!site) return <div className="p-8 text-neutral-500">Site not found</div>
 
-  const monitors = Array.isArray(uptimeData?.monitors) ? uptimeData.monitors : []
-  const overallUptime = uptimeData?.overall_uptime ?? 100
-  const overallStatus = uptimeData?.status ?? 'operational'
+  const uptimeEnabled = site.uptime_enabled
 
+  // * Disabled state — show empty state with enable toggle
+  if (!uptimeEnabled) {
+    return (
+      <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+            Uptime
+          </h1>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+            Monitor your site&apos;s availability and response time
+          </p>
+        </div>
+
+        {/* Empty state */}
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center">
+          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+            <svg className="w-8 h-8 text-neutral-500 dark:text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <h3 className="font-semibold text-neutral-900 dark:text-white mb-2">
+            Uptime monitoring is disabled
+          </h3>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6 max-w-md mx-auto">
+            Enable uptime monitoring to track your site&apos;s availability and response time around the clock.
+          </p>
+          {canEdit && (
+            <Button
+              onClick={() => handleToggleUptime(true)}
+              disabled={toggling}
+            >
+              {toggling ? 'Enabling...' : 'Enable Uptime Monitoring'}
+            </Button>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // * Enabled state — show uptime dashboard
   return (
     <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
@@ -652,327 +450,148 @@ export default function UptimePage() {
             Uptime
           </h1>
           <p className="text-sm text-neutral-500 dark:text-neutral-400">
-            Monitor your endpoints and track availability over time
+            Monitor your site&apos;s availability and response time
           </p>
         </div>
         {canEdit && (
           <Button
-            onClick={() => {
-              setFormData({ name: '', url: '', check_interval_seconds: 300, expected_status_code: 200, timeout_seconds: 30 })
-              setShowAddModal(true)
-            }}
+            variant="secondary"
+            onClick={() => handleToggleUptime(false)}
+            disabled={toggling}
+            className="text-sm"
           >
-            Add Monitor
+            {toggling ? 'Disabling...' : 'Disable Monitoring'}
           </Button>
         )}
       </div>
 
       {/* Overall status card */}
-      {monitors.length > 0 && (
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className={`w-3.5 h-3.5 rounded-full ${getStatusDotColor(overallStatus)}`} />
-              <div>
-                <span className="font-semibold text-neutral-900 dark:text-white text-lg">
-                  {site.name}
-                </span>
-                <span className={`text-sm font-medium ml-3 ${getOverallStatusTextColor(overallStatus)}`}>
-                  {getOverallStatusText(overallStatus)}
-                </span>
-              </div>
-            </div>
-            <div className="text-right">
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">
-                {formatUptime(overallUptime)} uptime
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className={`w-3.5 h-3.5 rounded-full ${getStatusDotColor(overallStatus)}`} />
+            <div>
+              <span className="font-semibold text-neutral-900 dark:text-white text-lg">
+                {site.name}
+              </span>
+              <span className={`text-sm font-medium ml-3 ${getOverallStatusTextColor(overallStatus)}`}>
+                {getOverallStatusText(overallStatus)}
               </span>
-              <div className="text-xs text-neutral-500 dark:text-neutral-400">
-                {monitors.length} {monitors.length === 1 ? 'component' : 'components'}
-              </div>
             </div>
           </div>
-        </div>
-      )}
-
-      {/* Monitor list */}
-      {monitors.length > 0 ? (
-        <div className="space-y-4">
-          {monitors.map((ms) => (
-            <MonitorCard
-              key={ms.monitor.id}
-              monitorStatus={ms}
-              expanded={expandedMonitor === ms.monitor.id}
-              onToggle={() => setExpandedMonitor(
-                expandedMonitor === ms.monitor.id ? null : ms.monitor.id
-              )}
-              onEdit={() => openEditModal(ms)}
-              onDelete={() => handleDeleteMonitor(ms.monitor.id)}
-              canEdit={canEdit}
-              siteId={siteId}
-            />
-          ))}
-        </div>
-      ) : (
-        /* Empty state */
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center">
-          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-            <svg className="w-8 h-8 text-neutral-500 dark:text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </div>
-          <h3 className="font-semibold text-neutral-900 dark:text-white mb-2">
-            No monitors yet
-          </h3>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6 max-w-md mx-auto">
-            Add a monitor to start tracking the uptime and response time of your endpoints. You can monitor APIs, websites, and any HTTP endpoint.
-          </p>
-          {canEdit && (
-            <Button
-              onClick={() => {
-                setFormData({ name: '', url: '', check_interval_seconds: 300, expected_status_code: 200, timeout_seconds: 30 })
-                setShowAddModal(true)
-              }}
-            >
-              Add Your First Monitor
-            </Button>
-          )}
-        </div>
-      )}
-
-      {/* Add Monitor Modal */}
-      <Modal isOpen={showAddModal} onClose={() => setShowAddModal(false)} title="Add Monitor">
-        <MonitorForm
-          formData={formData}
-          setFormData={setFormData}
-          onSubmit={handleAddMonitor}
-          onCancel={() => setShowAddModal(false)}
-          saving={saving}
-          submitLabel="Create Monitor"
-          siteDomain={site.domain}
-        />
-      </Modal>
-
-      {/* Edit Monitor Modal */}
-      <Modal isOpen={showEditModal} onClose={() => setShowEditModal(false)} title="Edit Monitor">
-        <MonitorForm
-          formData={formData}
-          setFormData={setFormData}
-          onSubmit={handleEditMonitor}
-          onCancel={() => setShowEditModal(false)}
-          saving={saving}
-          submitLabel="Save Changes"
-          siteDomain={site.domain}
-        />
-      </Modal>
-    </div>
-  )
-}
-
-// * Monitor creation/edit form
-function MonitorForm({
-  formData,
-  setFormData,
-  onSubmit,
-  onCancel,
-  saving,
-  submitLabel,
-  siteDomain,
-}: {
-  formData: CreateMonitorRequest
-  setFormData: (data: CreateMonitorRequest) => void
-  onSubmit: () => void
-  onCancel: () => void
-  saving: boolean
-  submitLabel: string
-  siteDomain: string
-}) {
-  // * Derive protocol from formData.url so edit modal shows the monitor's actual scheme (no desync)
-  const protocol: 'https://' | 'http://' = formData.url.startsWith('http://') ? 'http://' : 'https://'
-  const [showProtocolDropdown, setShowProtocolDropdown] = useState(false)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-
-  // * Extract the path portion from the full URL
-  const getPath = (): string => {
-    const url = formData.url
-    if (!url) return ''
-    try {
-      const parsed = new URL(url)
-      const pathAndRest = parsed.pathname + parsed.search + parsed.hash
-      return pathAndRest === '/' ? '' : pathAndRest
-    } catch {
-      // ? If not a valid full URL, try stripping the protocol prefix
-      if (url.startsWith('https://')) return url.slice(8 + siteDomain.length)
-      if (url.startsWith('http://')) return url.slice(7 + siteDomain.length)
-      return url
-    }
-  }
-
-  const handlePathChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const path = e.target.value
-    const safePath = path.startsWith('/') || path === '' ? path : `/${path}`
-    setFormData({ ...formData, url: `${protocol}${siteDomain}${safePath}` })
-  }
-
-  const handleProtocolChange = (proto: 'https://' | 'http://') => {
-    setShowProtocolDropdown(false)
-    const path = getPath()
-    setFormData({ ...formData, url: `${proto}${siteDomain}${path}` })
-  }
-
-  // * Initialize URL if empty
-  useEffect(() => {
-    if (!formData.url) {
-      setFormData({ ...formData, url: `${protocol}${siteDomain}` })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  // * Close dropdown on outside click
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-        setShowProtocolDropdown(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [])
-
-  return (
-    <div className="space-y-4">
-      {/* Name */}
-      <div>
-        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-          Name
-        </label>
-        <input
-          type="text"
-          value={formData.name}
-          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-          placeholder="e.g. API, Website, CDN"
-          autoFocus
-          maxLength={100}
-          className="w-full px-3 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:border-transparent text-sm"
-        />
-        {formData.name.length > 80 && (
-          <span className={`text-xs tabular-nums mt-1 ${formData.name.length > 90 ? 'text-amber-500' : 'text-neutral-400'}`}>{formData.name.length}/100</span>
-        )}
-      </div>
-
-      {/* URL with protocol dropdown + domain prefix */}
-      <div>
-        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-          URL
-        </label>
-        <div className="flex rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 focus-within:ring-2 focus-within:ring-brand-orange focus-within:border-transparent overflow-hidden">
-          {/* Protocol dropdown */}
-          <div ref={dropdownRef} className="relative">
-            <button
-              type="button"
-              onClick={() => setShowProtocolDropdown(!showProtocolDropdown)}
-              className="h-full px-3 flex items-center gap-1 bg-neutral-100 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300 text-sm border-r border-neutral-300 dark:border-neutral-600 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors select-none whitespace-nowrap"
-            >
-              {protocol}
-              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-              </svg>
-            </button>
-            {showProtocolDropdown && (
-              <div className="absolute top-full left-0 mt-1 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg transition-shadow duration-300 z-10 min-w-[100px]">
-                <button
-                  type="button"
-                  onClick={() => handleProtocolChange('https://')}
-                  className={`w-full text-left px-3 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors rounded-t-lg ${protocol === 'https://' ? 'text-brand-orange font-medium' : 'text-neutral-700 dark:text-neutral-300'}`}
-                >
-                  https://
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handleProtocolChange('http://')}
-                  className={`w-full text-left px-3 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors rounded-b-lg ${protocol === 'http://' ? 'text-brand-orange font-medium' : 'text-neutral-700 dark:text-neutral-300'}`}
-                >
-                  http://
-                </button>
+          <div className="text-right">
+            <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+              {formatUptime(overallUptime)} uptime
+            </span>
+            {monitor && (
+              <div className="text-xs text-neutral-500 dark:text-neutral-400">
+                Last checked {formatTimeAgo(monitor.monitor.last_checked_at)}
               </div>
             )}
           </div>
-          {/* Domain prefix */}
-          <span className="flex items-center px-1.5 text-sm text-neutral-500 dark:text-neutral-400 select-none whitespace-nowrap bg-neutral-100 dark:bg-neutral-700 border-r border-neutral-300 dark:border-neutral-600">
-            {siteDomain}
-          </span>
-          {/* Path input */}
-          <input
-            type="text"
-            value={getPath()}
-            onChange={handlePathChange}
-            placeholder="/api/health"
-            className="flex-1 min-w-0 px-3 py-2 bg-transparent text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none text-sm"
-          />
         </div>
-        <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
-          Add a specific path (e.g. /api/health) or leave empty for the root domain
-        </p>
       </div>
 
-      {/* Check interval */}
-      <div>
-        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-          Check Interval
-        </label>
-        <select
-          value={formData.check_interval_seconds}
-          onChange={(e) => setFormData({ ...formData, check_interval_seconds: parseInt(e.target.value) })}
-          className="w-full px-3 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange focus:border-transparent text-sm"
-        >
-          <option value={60}>Every 1 minute</option>
-          <option value={120}>Every 2 minutes</option>
-          <option value={300}>Every 5 minutes</option>
-          <option value={600}>Every 10 minutes</option>
-          <option value={900}>Every 15 minutes</option>
-          <option value={1800}>Every 30 minutes</option>
-          <option value={3600}>Every 1 hour</option>
-        </select>
-      </div>
+      {/* 90-day uptime bar */}
+      {monitor && (
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
+          <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
+            90-Day Availability
+          </h3>
+          <UptimeStatusBar dailyStats={monitor.daily_stats} />
+          <div className="flex justify-between mt-1.5 text-xs text-neutral-400 dark:text-neutral-500">
+            <span>90 days ago</span>
+            <span>Today</span>
+          </div>
+        </div>
+      )}
 
-      {/* Expected status code */}
-      <div>
-        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-          Expected Status Code
-        </label>
-        <input
-          type="number"
-          value={formData.expected_status_code}
-          onChange={(e) => setFormData({ ...formData, expected_status_code: parseInt(e.target.value) || 200 })}
-          min={100}
-          max={599}
-          className="w-full px-3 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange focus:border-transparent text-sm [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-        />
-      </div>
+      {/* Response time chart + Recent checks */}
+      {monitor && (
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5">
+          {/* Monitor details grid */}
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-5">
+            <div>
+              <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
+                Status
+              </div>
+              <div className="flex items-center gap-2">
+                <div className={`w-2 h-2 rounded-full ${getStatusDotColor(monitor.monitor.last_status)}`} />
+                <span className="text-sm font-medium text-neutral-900 dark:text-white">
+                  {getStatusLabel(monitor.monitor.last_status)}
+                </span>
+              </div>
+            </div>
+            <div>
+              <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
+                Response Time
+              </div>
+              <span className="text-sm font-medium text-neutral-900 dark:text-white">
+                {formatMs(monitor.monitor.last_response_time_ms)}
+              </span>
+            </div>
+            <div>
+              <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
+                Check Interval
+              </div>
+              <span className="text-sm font-medium text-neutral-900 dark:text-white">
+                {monitor.monitor.check_interval_seconds >= 60
+                  ? `${Math.floor(monitor.monitor.check_interval_seconds / 60)}m`
+                  : `${monitor.monitor.check_interval_seconds}s`}
+              </span>
+            </div>
+            <div>
+              <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
+                Overall Uptime
+              </div>
+              <span className="text-sm font-medium text-neutral-900 dark:text-white">
+                {formatUptime(monitor.overall_uptime)}
+              </span>
+            </div>
+          </div>
 
-      {/* Timeout */}
-      <div>
-        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-          Timeout (seconds)
-        </label>
-        <input
-          type="number"
-          value={formData.timeout_seconds}
-          onChange={(e) => setFormData({ ...formData, timeout_seconds: parseInt(e.target.value) || 30 })}
-          min={5}
-          max={60}
-          className="w-full px-3 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange focus:border-transparent text-sm [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-        />
-      </div>
+          {/* Response time chart */}
+          {loadingChecks ? (
+            <ChecksSkeleton />
+          ) : checks.length > 0 ? (
+            <>
+              <ResponseTimeChart checks={checks} />
 
-      {/* Actions */}
-      <div className="flex justify-end gap-2 pt-2">
-        <Button variant="secondary" onClick={onCancel}>
-          Cancel
-        </Button>
-        <Button onClick={onSubmit} disabled={saving || !formData.name || !formData.url}>
-          {saving ? 'Saving...' : submitLabel}
-        </Button>
-      </div>
+              {/* Recent checks */}
+              <div className="mt-5">
+                <h4 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
+                  Recent Checks
+                </h4>
+                <div className="space-y-1.5 max-h-48 overflow-y-auto">
+                  {checks.slice(0, 20).map((check) => (
+                    <div
+                      key={check.id}
+                      className="flex items-center justify-between py-1.5 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800 text-sm"
+                    >
+                      <div className="flex items-center gap-2">
+                        <div className={`w-2 h-2 rounded-full ${getStatusDotColor(check.status)}`} />
+                        <span className="text-neutral-600 dark:text-neutral-300 text-xs">
+                          {formatDateTimeShort(new Date(check.checked_at))}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-3">
+                        {check.status_code && (
+                          <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                            {check.status_code}
+                          </span>
+                        )}
+                        <span className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
+                          {formatMs(check.response_time_ms)}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </>
+          ) : null}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/components/IntegrationGuide.tsx b/components/IntegrationGuide.tsx
index fb53861..390ce92 100644
--- a/components/IntegrationGuide.tsx
+++ b/components/IntegrationGuide.tsx
@@ -39,10 +39,9 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -57,18 +56,18 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <div className="p-3 bg-neutral-800 rounded-xl">
             {headerIcon}
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold text-white">
             {integration.name} Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
+        <div className="prose prose-invert max-w-none">
           {children}
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
           <h3>Optional: Frustration Tracking</h3>
           <p>
             Detect rage clicks and dead clicks by adding the frustration tracking
@@ -83,8 +82,8 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
 
         {/* * --- Related Integrations --- */}
         {relatedIntegrations.length > 0 && (
-          <div className="mt-16 pt-10 border-t border-neutral-200 dark:border-neutral-800">
-            <h2 className="text-xl font-bold text-neutral-900 dark:text-white mb-6">
+          <div className="mt-16 pt-10 border-t border-neutral-800">
+            <h2 className="text-xl font-bold text-white mb-6">
               Related Integrations
             </h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -92,16 +91,16 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
                 <Link
                   key={related.id}
                   href={`/integrations/${related.id}`}
-                  className="group flex items-center gap-4 p-4 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300"
+                  className="group flex items-center gap-4 p-4 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-xl hover:border-brand-orange/50 transition-all duration-300"
                 >
-                  <div className="p-2 bg-neutral-100 dark:bg-neutral-800 rounded-lg shrink-0 [&_svg]:w-6 [&_svg]:h-6">
+                  <div className="p-2 bg-neutral-800 rounded-lg shrink-0 [&_svg]:w-6 [&_svg]:h-6">
                     {related.icon}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <span className="font-semibold text-neutral-900 dark:text-white block">
+                    <span className="font-semibold text-white block">
                       {related.name}
                     </span>
-                    <span className="text-sm text-neutral-500 dark:text-neutral-400 truncate block">
+                    <span className="text-sm text-neutral-400 truncate block">
                       {related.description}
                     </span>
                   </div>
diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index 8205816..51f5ef8 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -219,10 +219,10 @@ export default function PricingSection() {
         transition={{ duration: 0.5 }}
         className="text-center mb-12"
       >
-        <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">
+        <h2 className="text-3xl font-bold text-white mb-4">
           Transparent Pricing
         </h2>
-        <p className="text-lg text-neutral-600 dark:text-neutral-400">
+        <p className="text-lg text-neutral-400">
           Scale with your traffic. No hidden fees.
         </p>
       </motion.div>
@@ -232,13 +232,13 @@ export default function PricingSection() {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5, delay: 0.1 }}
-        className="max-w-6xl mx-auto border border-neutral-200 dark:border-neutral-800 rounded-2xl bg-white/50 dark:bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20"
+        className="max-w-6xl mx-auto border border-neutral-800 rounded-2xl bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20"
       >
         
         {/* Top Toolbar */}
-        <div className="p-6 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="p-6 border-b border-neutral-800 flex flex-col md:flex-row items-center justify-between gap-8 bg-neutral-900/50">
           <div className="w-full md:w-2/3">
-            <div className="flex justify-between text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-4">
+            <div className="flex justify-between text-sm font-medium text-neutral-400 mb-4">
               <span>10k</span>
               <span className="text-brand-orange font-bold text-lg">
                 Up to {currentTraffic.label} monthly pageviews
@@ -254,23 +254,23 @@ export default function PricingSection() {
               onChange={(e) => setSliderIndex(parseInt(e.target.value))}
               aria-label="Monthly pageview limit"
               aria-valuetext={`${currentTraffic.label} pageviews per month`}
-              className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
+              className="w-full h-2 bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-brand-orange focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
             />
           </div>
 
           <div className="flex flex-col items-end gap-2 shrink-0">
-            <span className="text-xs text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wide">
+            <span className="text-xs text-neutral-400 font-medium uppercase tracking-wide">
               Get 1 month free with yearly
             </span>
-            <div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex" role="radiogroup" aria-label="Billing interval">
+            <div className="bg-neutral-800 p-1 rounded-lg flex" role="radiogroup" aria-label="Billing interval">
               <button
                 onClick={() => setIsYearly(false)}
                 role="radio"
                 aria-checked={!isYearly}
                 className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${
                   !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'
+                    ? 'bg-neutral-700 text-white shadow-sm'
+                    : 'text-neutral-500 hover:text-white'
                 }`}
               >
                 Monthly
@@ -281,8 +281,8 @@ export default function PricingSection() {
                 aria-checked={isYearly}
                 className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${
                   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'
+                    ? 'bg-neutral-700 text-white shadow-sm'
+                    : 'text-neutral-500 hover:text-white'
                 }`}
               >
                 Yearly
@@ -292,15 +292,15 @@ export default function PricingSection() {
         </div>
 
         {/* Pricing Grid */}
-        <div className="grid md:grid-cols-5 divide-y md:divide-y-0 md:divide-x divide-neutral-200 dark:divide-neutral-800">
+        <div className="grid md:grid-cols-5 divide-y md:divide-y-0 md:divide-x divide-neutral-800">
           {/* Free Plan */}
-          <div className="p-6 flex flex-col relative transition-colors hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50">
+          <div className="p-6 flex flex-col relative transition-colors hover:bg-neutral-800/50">
             <div className="mb-8">
-              <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">Free</h3>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 min-h-[40px] mb-4">For trying Pulse on a personal project</p>
+              <h3 className="text-lg font-bold text-white mb-2">Free</h3>
+              <p className="text-sm text-neutral-400 min-h-[40px] mb-4">For trying Pulse on a personal project</p>
               <div className="flex items-baseline gap-1">
-                <span className="text-4xl font-bold text-neutral-900 dark:text-white">€0</span>
-                <span className="text-neutral-500 dark:text-neutral-400 font-medium">/forever</span>
+                <span className="text-4xl font-bold text-white">€0</span>
+                <span className="text-neutral-400 font-medium">/forever</span>
               </div>
             </div>
 
@@ -320,7 +320,7 @@ export default function PricingSection() {
 
             <ul className="space-y-4 flex-grow">
               {['1 site', '5k monthly pageviews', '6 months data retention', '100% Data ownership'].map((feature) => (
-                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-400">
                   <CheckCircleIcon className="w-5 h-5 shrink-0 text-neutral-400" />
                   <span>{feature}</span>
                 </li>
@@ -333,7 +333,7 @@ export default function PricingSection() {
             const isTeam = plan.id === 'team'
 
             return (
-              <div key={plan.id} className={`p-6 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50'}`}>
+              <div key={plan.id} className={`p-6 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-800/50'}`}>
                 {isTeam && (
                   <>
                     <div className="absolute top-0 left-0 w-full h-1 bg-brand-orange" />
@@ -344,17 +344,17 @@ export default function PricingSection() {
                 )}
                 
                 <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 dark:text-neutral-400 min-h-[40px] mb-4">{plan.description}</p>
+                  <h3 className="text-lg font-bold text-white mb-2">{plan.name}</h3>
+                  <p className="text-sm text-neutral-400 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">
+                          <span className="text-4xl font-bold text-white">
                             €{priceDetails.yearlyTotal}
                           </span>
-                          <span className="text-neutral-500 dark:text-neutral-400 font-medium">/year</span>
+                          <span className="text-neutral-400 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">
@@ -367,14 +367,14 @@ export default function PricingSection() {
                       </div>
                     ) : (
                       <div className="flex items-baseline gap-1">
-                        <span className="text-4xl font-bold text-neutral-900 dark:text-white">
+                        <span className="text-4xl font-bold text-white">
                           €{priceDetails.baseMonthly}
                         </span>
-                        <span className="text-neutral-500 dark:text-neutral-400 font-medium">/mo</span>
+                        <span className="text-neutral-400 font-medium">/mo</span>
                       </div>
                     )
                   ) : (
-                    <div className="text-4xl font-bold text-neutral-900 dark:text-white">
+                    <div className="text-4xl font-bold text-white">
                       Custom
                     </div>
                   )}
@@ -391,7 +391,7 @@ export default function PricingSection() {
 
                 <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">
+                    <li key={feature} className="flex items-start gap-3 text-sm text-neutral-400">
                       <CheckCircleIcon className={`w-5 h-5 shrink-0 ${isTeam ? 'text-brand-orange' : 'text-neutral-400'}`} />
                       <span>{feature}</span>
                     </li>
@@ -402,11 +402,11 @@ export default function PricingSection() {
           })}
 
           {/* Enterprise Section */}
-          <div className="p-6 bg-neutral-50/50 dark:bg-neutral-900/50 flex flex-col">
+          <div className="p-6 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 dark:text-neutral-400 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">
+              <h3 className="text-lg font-bold text-white mb-2">Enterprise</h3>
+              <p className="text-sm text-neutral-400 min-h-[40px] mb-4">For high volume sites and custom needs</p>
+              <div className="text-4xl font-bold text-white">
                 Custom
               </div>
             </div>
@@ -428,7 +428,7 @@ export default function PricingSection() {
                 '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">
+                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-400">
                   <CheckCircleIcon className="w-5 h-5 text-neutral-400 shrink-0" />
                   <span>{feature}</span>
                 </li>
diff --git a/components/dashboard/AddFilterDropdown.tsx b/components/dashboard/AddFilterDropdown.tsx
index 2ad4066..74c835c 100644
--- a/components/dashboard/AddFilterDropdown.tsx
+++ b/components/dashboard/AddFilterDropdown.tsx
@@ -111,7 +111,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
         className={`inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer ${
           isOpen
             ? 'bg-brand-orange/10 text-brand-orange border border-brand-orange/30'
-            : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white border border-transparent'
+            : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700 hover:text-white border border-transparent'
         }`}
       >
         <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -121,7 +121,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
       </button>
 
       {isOpen && (
-        <div className="absolute top-full left-0 mt-1.5 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[280px]">
+        <div className="absolute top-full left-0 mt-1.5 z-50 bg-neutral-900 border border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[280px]">
           {!selectedDim ? (
             /* Step 1: Dimension list */
             <div className="py-1">
@@ -129,9 +129,9 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
                 <button
                   key={dim}
                   onClick={() => setSelectedDim(dim)}
-                  className="w-full flex items-center justify-between px-4 py-2.5 text-sm text-left hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors cursor-pointer"
+                  className="w-full flex items-center justify-between px-4 py-2.5 text-sm text-left hover:bg-neutral-800 transition-colors cursor-pointer"
                 >
-                  <span className="text-neutral-900 dark:text-white font-medium">{DIMENSION_LABELS[dim]}</span>
+                  <span className="text-white font-medium">{DIMENSION_LABELS[dim]}</span>
                   <svg className="w-3.5 h-3.5 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                   </svg>
@@ -145,13 +145,13 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
               <div className="flex items-center gap-2 px-3 pt-3 pb-2">
                 <button
                   onClick={() => { setSelectedDim(null); setSearch(''); setOperator('is'); setFetchedSuggestions([]) }}
-                  className="p-1 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors cursor-pointer rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800"
+                  className="p-1 text-neutral-400 hover:text-neutral-300 transition-colors cursor-pointer rounded-md hover:bg-neutral-800"
                 >
                   <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
                   </svg>
                 </button>
-                <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+                <span className="text-sm font-semibold text-white">
                   {DIMENSION_LABELS[selectedDim]}
                 </span>
               </div>
@@ -165,7 +165,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
                     className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors cursor-pointer ${
                       operator === op
                         ? 'bg-brand-orange text-white'
-                        : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                        : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
                     }`}
                   >
                     {OPERATOR_LABELS[op]}
@@ -189,24 +189,24 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
                     }
                   }}
                   placeholder={`Search ${DIMENSION_LABELS[selectedDim]?.toLowerCase()}...`}
-                  className="w-full px-3 py-2 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange transition-colors"
+                  className="w-full px-3 py-2 text-sm bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange transition-colors"
                 />
               </div>
 
               {/* Values list */}
               {isFetching ? (
                 <div className="px-4 py-6 text-center">
-                  <div className="inline-block w-4 h-4 border-2 border-neutral-300 dark:border-neutral-600 border-t-brand-orange rounded-full animate-spin" />
+                  <div className="inline-block w-4 h-4 border-2 border-neutral-600 border-t-brand-orange rounded-full animate-spin" />
                 </div>
               ) : filtered.length > 0 ? (
-                <div className="max-h-52 overflow-y-auto border-t border-neutral-100 dark:border-neutral-800">
+                <div className="max-h-52 overflow-y-auto border-t border-neutral-800">
                   {filtered.map(s => (
                     <button
                       key={s.value}
                       onClick={() => handleSelectValue(s.value)}
-                      className="w-full flex items-center justify-between px-4 py-2 text-sm text-left hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors cursor-pointer"
+                      className="w-full flex items-center justify-between px-4 py-2 text-sm text-left hover:bg-neutral-800 transition-colors cursor-pointer"
                     >
-                      <span className="truncate text-neutral-900 dark:text-white">{s.label}</span>
+                      <span className="truncate text-white">{s.label}</span>
                       {s.count !== undefined && (
                         <span className="text-xs text-neutral-400 dark:text-neutral-500 ml-2 tabular-nums flex-shrink-0">
                           {s.count.toLocaleString()}
@@ -216,7 +216,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
                   ))}
                 </div>
               ) : search.trim() ? (
-                <div className="px-3 py-3 border-t border-neutral-100 dark:border-neutral-800">
+                <div className="px-3 py-3 border-t border-neutral-800">
                   <button
                     onClick={handleSubmitCustom}
                     className="w-full px-3 py-2 text-sm font-medium bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors cursor-pointer"
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 1c7ed31..f92b9b0 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -124,17 +124,17 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
 
   return (
     <>
-      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+      <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <Megaphone className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            <h3 className="text-lg font-semibold text-white">
               Campaigns
             </h3>
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
                 aria-label="View all campaigns"
               >
                 <FrameCornersIcon className="w-4 h-4" weight="bold" />
@@ -161,13 +161,13 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                   <div
                     key={`${item.source}|${item.medium}|${item.campaign}`}
                     onClick={() => onFilter?.({ dimension: 'utm_source', operator: 'is', values: [item.source] })}
-                    className={`relative flex items-center justify-between py-1.5 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
+                    className={`relative flex items-center justify-between py-1.5 group hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
                       className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
-                    <div className="relative flex-1 text-neutral-900 dark:text-white flex items-center gap-3 min-w-0">
+                    <div className="relative flex-1 text-white flex items-center gap-3 min-w-0">
                       {renderSourceIcon(item.source)}
                       <div className="min-w-0">
                         <div className="truncate font-medium text-sm" title={item.source}>
@@ -184,7 +184,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                       <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                         {totalVisitors > 0 ? `${Math.round((item.visitors / totalVisitors) * 100)}%` : ''}
                       </span>
-                      <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                      <span className="text-sm font-semibold text-neutral-400">
                         {formatNumber(item.visitors)}
                       </span>
                     </div>
@@ -197,13 +197,13 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-              <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                <Megaphone className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+              <div className="rounded-full bg-neutral-800 p-4">
+                <Megaphone className="w-8 h-8 text-neutral-400" />
               </div>
-              <h4 className="font-semibold text-neutral-900 dark:text-white">
+              <h4 className="font-semibold text-white">
                 Track your marketing campaigns
               </h4>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+              <p className="text-sm text-neutral-400 max-w-xs">
                 Add UTM parameters to your links to see campaign performance here.
               </p>
               <button
@@ -230,7 +230,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
             value={modalSearch}
             onChange={(e) => setModalSearch(e.target.value)}
             placeholder="Search campaigns..."
-            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
           />
         </div>
         <div className="max-h-[80vh]">
@@ -262,12 +262,12 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                     <div
                       key={`${item.source}|${item.medium}|${item.campaign}`}
                       onClick={() => { if (onFilter) { onFilter({ dimension: 'utm_source', operator: 'is', values: [item.source] }); setIsModalOpen(false) } }}
-                      className={`flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
+                      className={`flex items-center justify-between py-2 group hover:bg-neutral-800 rounded-lg px-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                     >
                       <div className="flex-1 flex items-center gap-3 min-w-0">
                         {renderSourceIcon(item.source)}
                         <div className="min-w-0">
-                          <div className="text-neutral-900 dark:text-white font-medium truncate text-sm" title={item.source}>
+                          <div className="text-white font-medium truncate text-sm" title={item.source}>
                             {getReferrerDisplayName(item.source)}
                           </div>
                           <div className="flex items-center gap-1.5 text-[11px] text-neutral-400 dark:text-neutral-500">
@@ -281,7 +281,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                         <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {modalTotal > 0 ? `${Math.round((item.visitors / modalTotal) * 100)}%` : ''}
                         </span>
-                        <span className="font-semibold text-neutral-900 dark:text-white">
+                        <span className="font-semibold text-white">
                           {formatNumber(item.visitors)}
                         </span>
                         <span className="text-neutral-400 dark:text-neutral-500 w-16 text-right">
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 7fc7bc8..4b47fc0 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -2,8 +2,7 @@
 
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { useTheme } from '@ciphera-net/ui'
-import { Area, CartesianGrid, ComposedChart, Line, XAxis, YAxis, ReferenceLine } from 'recharts'
-import { ChartContainer, ChartTooltip, type ChartConfig } from '@/components/ui/line-charts-6'
+import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip, type TooltipRow } from '@/components/ui/area-chart'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { formatNumber, formatDuration, formatUpdatedAgo, DatePicker } from '@ciphera-net/ui'
 import { Select, DownloadIcon, PlusIcon, XIcon } from '@ciphera-net/ui'
@@ -103,40 +102,11 @@ const METRIC_CONFIGS: {
   { key: 'avg_duration', label: 'Visit Duration', format: (v) => formatDuration(v) },
 ]
 
-const chartConfig = {
-  visitors: { label: 'Unique Visitors', color: '#FD5E0F' },
-  pageviews: { label: 'Total Pageviews', color: '#FD5E0F' },
-  bounce_rate: { label: 'Bounce Rate', color: '#FD5E0F' },
-  avg_duration: { label: 'Visit Duration', color: '#FD5E0F' },
-} satisfies ChartConfig
-
-// ─── Custom Tooltip ─────────────────────────────────────────────────
-
-interface TooltipProps {
-  active?: boolean
-  payload?: Array<{ dataKey: string; value: number; color: string }>
-  label?: string
-  metric: MetricType
-}
-
-function CustomTooltip({ active, payload, metric }: TooltipProps) {
-  if (active && payload && payload.length) {
-    const entry = payload[0]
-    const config = METRIC_CONFIGS.find((m) => m.key === metric)
-
-    if (config) {
-      return (
-        <div className="rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 p-3 shadow-sm shadow-black/5 min-w-[120px]">
-          <div className="flex items-center gap-2 text-sm">
-            <div className="size-1.5 rounded-full" style={{ backgroundColor: entry.color }}></div>
-            <span className="text-neutral-500 dark:text-neutral-400">{config.label}:</span>
-            <span className="font-semibold text-neutral-900 dark:text-white">{config.format(entry.value)}</span>
-          </div>
-        </div>
-      )
-    }
-  }
-  return null
+const CHART_COLORS: Record<MetricType, string> = {
+  visitors: '#FD5E0F',
+  pageviews: '#FD5E0F',
+  bounce_rate: '#FD5E0F',
+  avg_duration: '#FD5E0F',
 }
 
 // ─── Chart Component ─────────────────────────────────────────────────
@@ -227,6 +197,7 @@ export default function Chart({
 
     return {
       date: formattedDate,
+      dateObj: new Date(item.date),
       originalDate: item.date,
       pageviews: item.pageviews,
       visitors: item.visitors,
@@ -450,103 +421,60 @@ export default function Chart({
             </div>
           ) : (
             <div className="w-full" onContextMenu={handleChartContextMenu}>
-              <ChartContainer
-                config={chartConfig}
-                className="h-96 w-full overflow-visible [&_.recharts-curve.recharts-tooltip-cursor]:stroke-[initial]"
+              <VisxAreaChart
+                data={chartData as Record<string, unknown>[]}
+                xDataKey="dateObj"
+                aspectRatio="2.5 / 1"
+                margin={{ top: 20, right: 20, bottom: 40, left: 50 }}
               >
-                <ComposedChart
-                  data={chartData}
-                  margin={{ top: 20, right: 20, left: 5, bottom: 20 }}
-                  style={{ overflow: 'visible' }}
-                >
-                  <defs>
-                    <linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="0%" stopColor={chartConfig[metric]?.color} stopOpacity={0.15} />
-                      <stop offset="100%" stopColor={chartConfig[metric]?.color} stopOpacity={0.01} />
-                    </linearGradient>
-                    <filter id="lineShadow" x="-100%" y="-100%" width="300%" height="300%">
-                      <feDropShadow
-                        dx="4"
-                        dy="6"
-                        stdDeviation="25"
-                        floodColor={`${chartConfig[metric]?.color}60`}
-                      />
-                    </filter>
-                    <filter id="dotShadow" x="-50%" y="-50%" width="200%" height="200%">
-                      <feDropShadow dx="2" dy="2" stdDeviation="3" floodColor="rgba(0,0,0,0.5)" />
-                    </filter>
-                  </defs>
-
-                  <CartesianGrid
-                    horizontal={true}
-                    vertical={false}
-                    stroke="var(--chart-grid)"
-                    strokeOpacity={0.7}
-                  />
-
-                  <XAxis
-                    dataKey="date"
-                    axisLine={false}
-                    tickLine={false}
-                    tick={{ fontSize: 11, fill: 'var(--chart-axis)' }}
-                    tickMargin={10}
-                    minTickGap={32}
-                  />
-
-                  <YAxis
-                    axisLine={false}
-                    tickLine={false}
-                    tick={{ fontSize: 11, fill: 'var(--chart-axis)' }}
-                    tickMargin={10}
-                    tickCount={6}
-                    tickFormatter={(value) => {
-                      const config = METRIC_CONFIGS.find((m) => m.key === metric)
-                      return config ? config.format(value) : value.toString()
-                    }}
-                  />
-
-                  <ChartTooltip content={<CustomTooltip metric={metric} />} cursor={{ strokeDasharray: '3 3', stroke: '#9ca3af' }} />
-
-
-                  {/* Annotation reference lines */}
-                  {visibleAnnotationMarkers.map((marker) => {
-                    const primaryCategory = marker.annotations[0].category
-                    const color = ANNOTATION_COLORS[primaryCategory] || ANNOTATION_COLORS.other
+                <VisxGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
+                <VisxArea
+                  dataKey={metric}
+                  fill={CHART_COLORS[metric]}
+                  fillOpacity={0.15}
+                  stroke={CHART_COLORS[metric]}
+                  strokeWidth={2}
+                  gradientToOpacity={0}
+                />
+                <VisxXAxis
+                  numTicks={6}
+                  formatLabel={interval === 'minute' || interval === 'hour'
+                    ? (d) => `${String(d.getUTCHours()).padStart(2, '0')}:${String(d.getUTCMinutes()).padStart(2, '0')}`
+                    : (d) => d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })
+                  }
+                />
+                <VisxYAxis
+                  numTicks={6}
+                  formatValue={(v) => {
+                    const config = METRIC_CONFIGS.find((m) => m.key === metric)
+                    return config ? config.format(v) : v.toString()
+                  }}
+                />
+                <VisxChartTooltip
+                  content={({ point }) => {
+                    const dateObj = point.dateObj instanceof Date ? point.dateObj : new Date(point.dateObj as string || Date.now())
+                    const config = METRIC_CONFIGS.find((m) => m.key === metric)
+                    const value = point[metric] as number
+                    const title = interval === 'minute' || interval === 'hour'
+                      ? `${String(dateObj.getUTCHours()).padStart(2, '0')}:${String(dateObj.getUTCMinutes()).padStart(2, '0')}`
+                      : dateObj.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' })
                     return (
-                      <ReferenceLine
-                        key={`ann-${marker.x}`}
-                        x={marker.x}
-                        stroke={color}
-                        strokeDasharray="4 4"
-                        strokeWidth={1.5}
-                        strokeOpacity={0.6}
-                      />
+                      <div className="px-3 py-2.5">
+                        <div className="mb-2 font-medium text-neutral-400 text-xs">{title}</div>
+                        <div className="flex items-center justify-between gap-4">
+                          <div className="flex items-center gap-2">
+                            <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: CHART_COLORS[metric] }} />
+                            <span className="text-neutral-400 text-sm">{config?.label || metric}</span>
+                          </div>
+                          <span className="font-medium text-white text-sm tabular-nums">
+                            {config ? config.format(value) : value}
+                          </span>
+                        </div>
+                      </div>
                     )
-                  })}
-
-                  <Area
-                    type="bump"
-                    dataKey={metric}
-                    fill="url(#areaFill)"
-                    stroke="none"
-                  />
-                  <Line
-                    type="bump"
-                    dataKey={metric}
-                    stroke={chartConfig[metric]?.color}
-                    strokeWidth={2}
-                    filter="url(#lineShadow)"
-                    dot={false}
-                    activeDot={{
-                      r: 6,
-                      fill: chartConfig[metric]?.color,
-                      stroke: 'white',
-                      strokeWidth: 2,
-                      filter: 'url(#dotShadow)',
-                    }}
-                  />
-                </ComposedChart>
-              </ChartContainer>
+                  }}
+                />
+              </VisxAreaChart>
             </div>
           )}
         </CardContent>
diff --git a/components/dashboard/ContentHeader.tsx b/components/dashboard/ContentHeader.tsx
index 7f67b84..417fc13 100644
--- a/components/dashboard/ContentHeader.tsx
+++ b/components/dashboard/ContentHeader.tsx
@@ -8,10 +8,10 @@ export default function ContentHeader({
   onMobileMenuOpen: () => void
 }) {
   return (
-    <div className="shrink-0 flex items-center border-b border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl px-4 py-3.5 md:hidden">
+    <div className="shrink-0 flex items-center border-b border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl px-4 py-3.5 md:hidden">
       <button
         onClick={onMobileMenuOpen}
-        className="p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
+        className="p-2 -ml-2 text-neutral-400 hover:text-white"
         aria-label="Open navigation"
       >
         <MenuIcon className="w-5 h-5" />
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index f828889..9ee164d 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -99,17 +99,17 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
 
   return (
     <>
-      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+      <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-2">
             <Files className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            <h3 className="text-lg font-semibold text-white">
               Pages
             </h3>
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
                 aria-label="View all pages"
               >
                 <FrameCornersIcon className="w-4 h-4" weight="bold" />
@@ -125,8 +125,8 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                 aria-selected={activeTab === tab}
                 className={`relative px-2.5 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
                   activeTab === tab
-                    ? 'text-neutral-900 dark:text-white'
-                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+                    ? 'text-white'
+                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-300'
                 }`}
               >
                 {getTabLabel(tab)}
@@ -145,7 +145,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
         <div className="space-y-2 flex-1 min-h-[270px]">
           {!collectPagePaths ? (
             <div className="h-full flex flex-col items-center justify-center text-center px-4">
-              <p className="text-neutral-500 dark:text-neutral-400 text-sm">Page path tracking is disabled in site settings</p>
+              <p className="text-neutral-400 text-sm">Page path tracking is disabled in site settings</p>
             </div>
           ) : hasData ? (
             <>
@@ -156,13 +156,13 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                   <div
                     key={page.path}
                     onClick={() => onFilter?.({ dimension: 'page', operator: 'is', values: [page.path] })}
-                    className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
+                    className={`relative flex items-center justify-between h-9 group hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
                       className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
-                    <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center">
+                    <div className="relative flex-1 truncate text-white flex items-center">
                       <span className="truncate">{page.path}</span>
                       <a
                         href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`}
@@ -178,7 +178,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                       <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                         {totalPageviews > 0 ? `${Math.round((page.pageviews / totalPageviews) * 100)}%` : ''}
                       </span>
-                      <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                      <span className="text-sm font-semibold text-neutral-400">
                         {formatNumber(page.pageviews)}
                       </span>
                     </div>
@@ -191,13 +191,13 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-              <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                <LayoutDashboardIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+              <div className="rounded-full bg-neutral-800 p-4">
+                <LayoutDashboardIcon className="w-8 h-8 text-neutral-400" />
               </div>
-              <h4 className="font-semibold text-neutral-900 dark:text-white">
+              <h4 className="font-semibold text-white">
                 No page data yet
               </h4>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+              <p className="text-sm text-neutral-400 max-w-xs">
                 Your most visited pages will appear here as traffic arrives.
               </p>
               <Link
@@ -224,7 +224,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
             value={modalSearch}
             onChange={(e) => setModalSearch(e.target.value)}
             placeholder="Search pages..."
-            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
           />
         </div>
         <div className="max-h-[80vh]">
@@ -246,16 +246,16 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                     <div
                       key={page.path}
                       onClick={() => { if (canFilter) { onFilter({ dimension: 'page', operator: 'is', values: [page.path] }); setIsModalOpen(false) } }}
-                      className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
+                      className={`flex items-center justify-between h-9 group hover:bg-neutral-800 rounded-lg px-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                     >
-                      <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center">
+                      <div className="flex-1 truncate text-white flex items-center">
                         <span className="truncate">{page.path}</span>
                       </div>
                       <div className="flex items-center gap-2 ml-4">
                         <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {modalTotal > 0 ? `${Math.round((page.pageviews / modalTotal) * 100)}%` : ''}
                         </span>
-                        <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        <span className="text-sm font-semibold text-neutral-400">
                           {formatNumber(page.pageviews)}
                         </span>
                       </div>
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 909b42b..23bd12a 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -11,7 +11,7 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   // so page content never occupies the sidebar zone
   loading: () => (
     <div
-      className="hidden md:block shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl"
+      className="hidden md:block shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl"
       style={{ width: 64 }}
     />
   ),
diff --git a/components/dashboard/DottedMap.tsx b/components/dashboard/DottedMap.tsx
index 2c7055b..5e3532d 100644
--- a/components/dashboard/DottedMap.tsx
+++ b/components/dashboard/DottedMap.tsx
@@ -150,7 +150,7 @@ export default function DottedMap({ data, className, formatValue = formatNumber
 
       {tooltip && (
         <div
-          className="fixed z-50 px-2.5 py-1.5 text-xs font-medium text-white bg-neutral-900 dark:bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg pointer-events-none -translate-x-1/2 -translate-y-full -mt-2"
+          className="fixed z-50 px-2.5 py-1.5 text-xs font-medium text-white bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg pointer-events-none -translate-x-1/2 -translate-y-full -mt-2"
           style={{ left: tooltip.x, top: tooltip.y }}
         >
           <span>{getCountryName(tooltip.country)}</span>
diff --git a/components/dashboard/EventProperties.tsx b/components/dashboard/EventProperties.tsx
index 4adc359..3d8033e 100644
--- a/components/dashboard/EventProperties.tsx
+++ b/components/dashboard/EventProperties.tsx
@@ -36,14 +36,14 @@ export default function EventProperties({ siteId, eventName, dateRange, onClose
   const maxCount = values.length > 0 ? values[0].count : 1
 
   return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+    <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
       <div className="flex items-center justify-between mb-4">
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+        <h3 className="text-lg font-semibold text-white">
           Properties: <span className="text-brand-orange">{eventName.replace(/_/g, ' ')}</span>
         </h3>
         <button
           onClick={onClose}
-          className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors cursor-pointer"
+          className="text-neutral-400 hover:text-neutral-300 transition-colors cursor-pointer"
         >
           <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -54,11 +54,11 @@ export default function EventProperties({ siteId, eventName, dateRange, onClose
       {loading ? (
         <div className="animate-pulse space-y-3">
           {[1, 2, 3].map(i => (
-            <div key={i} className="h-8 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+            <div key={i} className="h-8 bg-neutral-800 rounded-lg" />
           ))}
         </div>
       ) : keys.length === 0 ? (
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 py-4 text-center">
+        <p className="text-sm text-neutral-400 py-4 text-center">
           No properties recorded for this event yet.
         </p>
       ) : (
@@ -71,7 +71,7 @@ export default function EventProperties({ siteId, eventName, dateRange, onClose
                 className={`px-3 py-1 text-xs font-medium rounded-full transition-colors cursor-pointer ${
                   selectedKey === k.key
                     ? 'bg-brand-orange text-white'
-                    : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                    : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
                 }`}
               >
                 {k.key}
@@ -84,14 +84,14 @@ export default function EventProperties({ siteId, eventName, dateRange, onClose
               <div key={v.value} className="flex items-center gap-3">
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center justify-between mb-1">
-                    <span className="text-sm font-medium text-neutral-900 dark:text-white truncate">
+                    <span className="text-sm font-medium text-white truncate">
                       {v.value}
                     </span>
                     <span className="text-xs font-semibold text-brand-orange tabular-nums ml-2">
                       {formatNumber(v.count)}
                     </span>
                   </div>
-                  <div className="w-full h-1.5 bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden">
+                  <div className="w-full h-1.5 bg-neutral-800 rounded-full overflow-hidden">
                     <div
                       className="h-full bg-brand-orange/60 rounded-full transition-all"
                       style={{ width: `${(v.count / maxCount) * 100}%` }}
diff --git a/components/dashboard/GoalStats.tsx b/components/dashboard/GoalStats.tsx
index 2299642..c1f36e0 100644
--- a/components/dashboard/GoalStats.tsx
+++ b/components/dashboard/GoalStats.tsx
@@ -20,11 +20,11 @@ export default function GoalStats({ goalCounts, onSelectEvent }: GoalStatsProps)
   const emptySlots = Math.max(0, 6 - list.length)
 
   return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+    <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-2">
           <Target className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+          <h3 className="text-lg font-semibold text-white">
             Goals & Events
           </h3>
         </div>
@@ -36,10 +36,10 @@ export default function GoalStats({ goalCounts, onSelectEvent }: GoalStatsProps)
             <div
               key={row.event_name}
               onClick={() => onSelectEvent?.(row.event_name)}
-              className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${onSelectEvent ? ' cursor-pointer' : ''}`}
+              className={`flex items-center justify-between h-9 group hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${onSelectEvent ? ' cursor-pointer' : ''}`}
             >
               <div className="flex items-center flex-1 min-w-0">
-                <span className="text-sm font-medium text-neutral-900 dark:text-white truncate">
+                <span className="text-sm font-medium text-white truncate">
                   {row.display_name ?? row.event_name.replace(/_/g, ' ')}
                 </span>
               </div>
@@ -47,7 +47,7 @@ export default function GoalStats({ goalCounts, onSelectEvent }: GoalStatsProps)
                 <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                   {total > 0 ? `${Math.round((row.count / total) * 100)}%` : ''}
                 </span>
-                <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 tabular-nums">
+                <span className="text-sm font-semibold text-neutral-400 tabular-nums">
                   {formatNumber(row.count)}
                 </span>
               </div>
@@ -59,14 +59,14 @@ export default function GoalStats({ goalCounts, onSelectEvent }: GoalStatsProps)
         </div>
       ) : (
         <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
-          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-            <BookOpenIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+          <div className="rounded-full bg-neutral-800 p-4">
+            <BookOpenIcon className="w-8 h-8 text-neutral-400" />
           </div>
-          <h4 className="font-semibold text-neutral-900 dark:text-white">
+          <h4 className="font-semibold text-white">
             Need help tracking goals?
           </h4>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
-            Add <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-xs font-mono">pulse.track(&apos;event_name&apos;)</code> where actions happen on your site, then see counts here. Check our guide for step-by-step instructions.
+          <p className="text-sm text-neutral-400 max-w-md">
+            Add <code className="px-1.5 py-0.5 rounded bg-neutral-700 text-xs font-mono">pulse.track(&apos;event_name&apos;)</code> where actions happen on your site, then see counts here. Check our guide for step-by-step instructions.
           </p>
           <Link
             href="/installation"
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index 88f8d76..c1e10d3 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -90,13 +90,13 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
       case 'T1':
         return <ShieldCheck className="w-5 h-5 text-purple-600 dark:text-purple-400" />
       case 'A1':
-        return <Detective className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
+        return <Detective className="w-5 h-5 text-neutral-400" />
       case 'A2':
         return <Broadcast className="w-5 h-5 text-blue-500 dark:text-blue-400" />
       case 'O1':
       case 'EU':
       case 'AP':
-        return <GlobeIcon className="w-5 h-5 text-neutral-500 dark:text-neutral-400" />
+        return <GlobeIcon className="w-5 h-5 text-neutral-400" />
     }
 
     const FlagComponent = (Flags as Record<string, React.ComponentType<{ className?: string }>>)[countryCode]
@@ -216,17 +216,17 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
 
   return (
     <>
-      <div ref={containerRef} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+      <div ref={containerRef} className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-2">
             <MapPin className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            <h3 className="text-lg font-semibold text-white">
               Locations
             </h3>
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
                 aria-label="View all locations"
               >
                 <FrameCornersIcon className="w-4 h-4" weight="bold" />
@@ -242,8 +242,8 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                 aria-selected={activeTab === tab}
                 className={`relative px-2.5 py-1 text-xs font-medium transition-colors capitalize focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
                   activeTab === tab
-                    ? 'text-neutral-900 dark:text-white'
-                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+                    ? 'text-white'
+                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-300'
                 }`}
               >
                 {tab}
@@ -262,20 +262,20 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
         <div className="space-y-2 flex-1 min-h-[270px]">
           {isTabDisabled() ? (
             <div className="h-full flex flex-col items-center justify-center text-center px-4">
-              <p className="text-neutral-500 dark:text-neutral-400 text-sm">{getDisabledMessage()}</p>
+              <p className="text-neutral-400 text-sm">{getDisabledMessage()}</p>
             </div>
           ) : isVisualTab ? (
             hasData ? (
               inView ? <DottedMap data={filterUnknown(countries) as { country: string; pageviews: number }[]} /> : null
             ) : (
               <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-                <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                  <GlobeIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+                <div className="rounded-full bg-neutral-800 p-4">
+                  <GlobeIcon className="w-8 h-8 text-neutral-400" />
                 </div>
-                <h4 className="font-semibold text-neutral-900 dark:text-white">
+                <h4 className="font-semibold text-white">
                   No location data yet
                 </h4>
-                <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+                <p className="text-sm text-neutral-400 max-w-xs">
                   Visitor locations will appear here based on anonymous geographic data.
                 </p>
                 <Link
@@ -300,13 +300,13 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                     <div
                       key={`${item.country ?? ''}-${item.region ?? ''}-${item.city ?? ''}`}
                       onClick={() => canFilter && onFilter({ dimension: dim, operator: 'is', values: [filterValue!] })}
-                      className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
+                      className={`relative flex items-center justify-between h-9 group hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                     >
                       <div
                         className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                         style={{ width: `${barWidth}%` }}
                       />
-                      <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                      <div className="relative flex-1 truncate text-white flex items-center gap-3">
                         <span className="shrink-0">{getFlagComponent(item.country ?? '')}</span>
                         <span className="truncate">
                           {activeTab === 'countries' ? getCountryName(item.country ?? '') :
@@ -318,7 +318,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                         <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {totalPageviews > 0 ? `${Math.round((item.pageviews / totalPageviews) * 100)}%` : ''}
                         </span>
-                        <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        <span className="text-sm font-semibold text-neutral-400">
                           {formatNumber(item.pageviews)}
                         </span>
                       </div>
@@ -331,13 +331,13 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-              <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                <GlobeIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+              <div className="rounded-full bg-neutral-800 p-4">
+                <GlobeIcon className="w-8 h-8 text-neutral-400" />
               </div>
-              <h4 className="font-semibold text-neutral-900 dark:text-white">
+              <h4 className="font-semibold text-white">
                 No location data yet
               </h4>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+              <p className="text-sm text-neutral-400 max-w-xs">
                 Visitor locations will appear here based on anonymous geographic data.
               </p>
             </div>
@@ -358,7 +358,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
             value={modalSearch}
             onChange={(e) => setModalSearch(e.target.value)}
             placeholder="Search locations..."
-            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
           />
         </div>
         <div className="max-h-[80vh]">
@@ -387,9 +387,9 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                     <div
                       key={`${item.country ?? ''}-${item.region ?? ''}-${item.city ?? ''}`}
                       onClick={() => { if (canFilter) { onFilter({ dimension: dim, operator: 'is', values: [filterValue!] }); setIsModalOpen(false) } }}
-                      className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
+                      className={`flex items-center justify-between h-9 group hover:bg-neutral-800 rounded-lg px-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                     >
-                      <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                      <div className="flex-1 truncate text-white flex items-center gap-3">
                         <span className="shrink-0">{getFlagComponent(item.country ?? '')}</span>
                         <span className="truncate">
                           {activeTab === 'countries' ? getCountryName(item.country ?? '') :
@@ -401,7 +401,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                         <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {modalTotal > 0 ? `${Math.round((item.pageviews / modalTotal) * 100)}%` : ''}
                         </span>
-                        <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        <span className="text-sm font-semibold text-neutral-400">
                           {formatNumber(item.pageviews)}
                         </span>
                       </div>
diff --git a/components/dashboard/PeakHours.tsx b/components/dashboard/PeakHours.tsx
index e275ffb..733865b 100644
--- a/components/dashboard/PeakHours.tsx
+++ b/components/dashboard/PeakHours.tsx
@@ -131,14 +131,14 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
   }
 
   return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+    <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
       <div className="flex items-center justify-between mb-1">
         <div className="flex items-center gap-2">
           <Clock className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Peak Hours</h3>
+          <h3 className="text-lg font-semibold text-white">Peak Hours</h3>
         </div>
       </div>
-      <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-5">
+      <p className="text-sm text-neutral-400 mb-5">
         When your visitors are most active
       </p>
 
@@ -146,8 +146,8 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
         <div className="flex-1 min-h-[270px] flex flex-col justify-center gap-1.5">
           {Array.from({ length: 7 }).map((_, i) => (
             <div key={i} className="flex items-center gap-1">
-              <div className="w-7 h-3 rounded bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
-              <div className="flex-1 h-5 rounded bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
+              <div className="w-7 h-3 rounded bg-neutral-800 animate-pulse" />
+              <div className="flex-1 h-5 rounded bg-neutral-800 animate-pulse" />
             </div>
           ))}
         </div>
@@ -174,7 +174,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
                         key={`${animKey}-${dayIdx}-${bucket}`}
                         className={[
                           'aspect-square w-full rounded-[4px] border cursor-default transition-transform duration-100',
-                          'border-neutral-200 dark:border-neutral-800',
+                          'border-neutral-800',
                           isActive ? 'animate-cell-highlight' : '',
                           isHoveredCell ? 'scale-110 z-10 relative' : '',
                           isBestCell && !isHoveredCell ? 'ring-1 ring-brand-orange/40' : '',
@@ -201,14 +201,14 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
                 {Object.entries(BUCKET_LABELS).map(([b, label]) => (
                   <span
                     key={b}
-                    className="absolute text-[10px] text-neutral-400 dark:text-neutral-600 -translate-x-1/2"
+                    className="absolute text-[10px] text-neutral-600 -translate-x-1/2"
                     style={{ left: `${(Number(b) / BUCKETS) * 100}%` }}
                   >
                     {label}
                   </span>
                 ))}
                 <span
-                  className="absolute text-[10px] text-neutral-400 dark:text-neutral-600 -translate-x-full"
+                  className="absolute text-[10px] text-neutral-600 -translate-x-full"
                   style={{ left: '100%' }}
                 >
                   24:00
@@ -222,7 +222,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
               {HIGHLIGHT_COLORS.map((color, i) => (
                 <div
                   key={i}
-                  className="w-[10px] h-[10px] rounded-[2px] border border-neutral-200 dark:border-neutral-800"
+                  className="w-[10px] h-[10px] rounded-[2px] border border-neutral-800"
                   style={{ backgroundColor: color }}
                 />
               ))}
@@ -245,7 +245,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
                     transform: 'translate(-50%, -100%)',
                   }}
                 >
-                  <div className="bg-neutral-900 dark:bg-neutral-800 border border-neutral-700 text-white text-xs px-3 py-2 rounded-lg shadow-xl whitespace-nowrap">
+                  <div className="bg-neutral-800 border border-neutral-700 text-white text-xs px-3 py-2 rounded-lg shadow-xl whitespace-nowrap">
                     <div className="font-semibold mb-1">
                       {DAYS[hovered.day]} {formatBucket(hovered.bucket)}
                     </div>
@@ -269,7 +269,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
               initial={{ opacity: 0, y: 4 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.4, delay: 0.6 }}
-              className="mt-4 text-xs text-neutral-500 dark:text-neutral-400 text-center"
+              className="mt-4 text-xs text-neutral-400 text-center"
             >
               Your busiest time is{' '}
               <span className="text-brand-orange font-medium">
@@ -279,9 +279,15 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
           )}
         </>
       ) : (
-        <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center gap-3">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
-            No data available for this period
+        <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
+          <div className="rounded-full bg-neutral-800 p-4">
+            <Clock className="w-8 h-8 text-neutral-400" />
+          </div>
+          <h4 className="font-semibold text-white">
+            No peak hours yet
+          </h4>
+          <p className="text-sm text-neutral-400 max-w-xs">
+            Once your site receives traffic, this heatmap will show when your visitors are most active.
           </p>
         </div>
       )}
diff --git a/components/dashboard/RealtimeVisitors.tsx b/components/dashboard/RealtimeVisitors.tsx
index b43356b..d62d054 100644
--- a/components/dashboard/RealtimeVisitors.tsx
+++ b/components/dashboard/RealtimeVisitors.tsx
@@ -9,15 +9,15 @@ interface RealtimeVisitorsProps {
 export default function RealtimeVisitors({ count }: RealtimeVisitorsProps) {
   return (
     <div
-      className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6"
+      className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6"
     >
       <div className="flex items-center justify-between mb-2">
-        <div className="text-sm text-neutral-600 dark:text-neutral-400">
+        <div className="text-sm text-neutral-400">
           Real-time Visitors
         </div>
         <div className="h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
       </div>
-      <div className="text-3xl font-bold text-neutral-900 dark:text-white">
+      <div className="text-3xl font-bold text-white">
         <AnimatedNumber value={count} format={(v) => v.toLocaleString()} />
       </div>
     </div>
diff --git a/components/dashboard/ScrollDepth.tsx b/components/dashboard/ScrollDepth.tsx
index e66b993..4dde3dd 100644
--- a/components/dashboard/ScrollDepth.tsx
+++ b/components/dashboard/ScrollDepth.tsx
@@ -28,13 +28,13 @@ export default function ScrollDepth({ goalCounts, totalPageviews }: ScrollDepthP
   }))
 
   return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+    <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
       <div className="flex items-center justify-between mb-1">
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+        <h3 className="text-lg font-semibold text-white">
           Scroll Depth
         </h3>
       </div>
-      <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
+      <p className="text-sm text-neutral-400 mb-4">
         % of visitors who scrolled this far
       </p>
 
@@ -73,13 +73,13 @@ export default function ScrollDepth({ goalCounts, totalPageviews }: ScrollDepthP
         </div>
       ) : (
         <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
-          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-            <BarChartIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+          <div className="rounded-full bg-neutral-800 p-4">
+            <BarChartIcon className="w-8 h-8 text-neutral-400" />
           </div>
-          <h4 className="font-semibold text-neutral-900 dark:text-white">
+          <h4 className="font-semibold text-white">
             No scroll data yet
           </h4>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
+          <p className="text-sm text-neutral-400 max-w-md">
             Scroll depth tracking is automatic — data will appear here once visitors start scrolling on your pages.
           </p>
         </div>
diff --git a/components/dashboard/SearchPerformance.tsx b/components/dashboard/SearchPerformance.tsx
index 0938a6d..d322e8a 100644
--- a/components/dashboard/SearchPerformance.tsx
+++ b/components/dashboard/SearchPerformance.tsx
@@ -1,14 +1,26 @@
 'use client'
 
-import Link from 'next/link'
-import { MagnifyingGlass, CaretUp, CaretDown } from '@phosphor-icons/react'
-import { useGSCStatus, useGSCOverview, useGSCTopQueries } from '@/lib/swr/dashboard'
+import { useState, useEffect } from 'react'
+import { motion } from 'framer-motion'
+import { logger } from '@/lib/utils/logger'
+import { formatNumber, Modal } from '@ciphera-net/ui'
+import { MagnifyingGlass, CaretUp, CaretDown, FrameCornersIcon } from '@phosphor-icons/react'
+import { useGSCStatus, useGSCOverview, useGSCTopQueries, useGSCTopPages } from '@/lib/swr/dashboard'
+import { getGSCTopQueries, getGSCTopPages } from '@/lib/api/gsc'
+import type { GSCDataRow } from '@/lib/api/gsc'
+import { useTabListKeyboard } from '@/lib/hooks/useTabListKeyboard'
+import { ListSkeleton } from '@/components/skeletons'
+import VirtualList from './VirtualList'
 
 interface SearchPerformanceProps {
   siteId: string
   dateRange: { start: string; end: string }
 }
 
+type Tab = 'queries' | 'pages'
+
+const LIMIT = 7
+
 function ChangeArrow({ current, previous, invert = false }: { current: number; previous: number; invert?: boolean }) {
   if (!previous || previous === 0) return null
   const improved = invert ? current < previous : current > previous
@@ -21,109 +33,263 @@ function ChangeArrow({ current, previous, invert = false }: { current: number; p
   )
 }
 
+function getPositionBadgeClasses(position: number): string {
+  if (position <= 10) return 'text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 dark:bg-emerald-500/20'
+  if (position <= 20) return 'text-brand-orange dark:text-brand-orange bg-brand-orange/10 dark:bg-brand-orange/20'
+  if (position <= 50) return 'text-neutral-400 dark:text-neutral-500 bg-neutral-800'
+  return 'text-red-500 dark:text-red-400 bg-red-500/10 dark:bg-red-500/20'
+}
+
 export default function SearchPerformance({ siteId, dateRange }: SearchPerformanceProps) {
+  const [activeTab, setActiveTab] = useState<Tab>('queries')
+  const handleTabKeyDown = useTabListKeyboard()
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalSearch, setModalSearch] = useState('')
+  const [fullData, setFullData] = useState<GSCDataRow[]>([])
+  const [isLoadingFull, setIsLoadingFull] = useState(false)
+
   const { data: gscStatus } = useGSCStatus(siteId)
   const { data: overview, isLoading: overviewLoading } = useGSCOverview(siteId, dateRange.start, dateRange.end)
-  const { data: queriesData, isLoading: queriesLoading } = useGSCTopQueries(siteId, dateRange.start, dateRange.end, 5, 0)
+  const { data: queriesData, isLoading: queriesLoading } = useGSCTopQueries(siteId, dateRange.start, dateRange.end, LIMIT, 0)
+  const { data: pagesData, isLoading: pagesLoading } = useGSCTopPages(siteId, dateRange.start, dateRange.end, LIMIT, 0)
 
-  // Don't render if GSC is not connected or no data
+  // Fetch full data when modal opens (matches ContentStats/TopReferrers pattern)
+  useEffect(() => {
+    if (isModalOpen) {
+      const fetchData = async () => {
+        setIsLoadingFull(true)
+        try {
+          if (activeTab === 'queries') {
+            const data = await getGSCTopQueries(siteId, dateRange.start, dateRange.end, 100, 0)
+            setFullData(data.queries ?? [])
+          } else {
+            const data = await getGSCTopPages(siteId, dateRange.start, dateRange.end, 100, 0)
+            setFullData(data.pages ?? [])
+          }
+        } catch (e) {
+          logger.error(e)
+        } finally {
+          setIsLoadingFull(false)
+        }
+      }
+      fetchData()
+    } else {
+      setFullData([])
+    }
+  }, [isModalOpen, activeTab, siteId, dateRange])
+
+  // Don't render if GSC is not connected
   if (!gscStatus?.connected) return null
 
-  const isLoading = overviewLoading || queriesLoading
+  const isLoading = overviewLoading || queriesLoading || pagesLoading
   const queries = queriesData?.queries ?? []
+  const pages = pagesData?.pages ?? []
   const hasData = overview && (overview.total_clicks > 0 || overview.total_impressions > 0)
 
   // Hide panel entirely if loaded but no data
   if (!isLoading && !hasData) return null
 
-  return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-2">
-          <MagnifyingGlass className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-            Search
-          </h3>
-        </div>
-        <Link
-          href={`/sites/${siteId}/search`}
-          className="text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
-        >
-          View all &rarr;
-        </Link>
-      </div>
+  const data = activeTab === 'queries' ? queries : pages
+  const totalImpressions = data.reduce((sum, d) => sum + d.impressions, 0)
+  const displayedData = data.slice(0, LIMIT)
+  const emptySlots = Math.max(0, LIMIT - displayedData.length)
+  const showViewAll = data.length >= LIMIT
 
-      {isLoading ? (
-        /* Loading skeleton */
-        <div className="flex-1 space-y-4">
-          <div className="flex items-center gap-6">
-            <div className="h-4 w-20 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
-            <div className="h-4 w-24 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
-            <div className="h-4 w-20 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
+  const getLabel = (row: GSCDataRow) => activeTab === 'queries' ? row.query : row.page
+  const getTabLabel = (tab: Tab) => tab === 'queries' ? 'Queries' : 'Pages'
+
+  return (
+    <>
+      <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <MagnifyingGlass className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
+            <h3 className="text-lg font-semibold text-white">Search</h3>
+            {showViewAll && (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                aria-label="View all search data"
+              >
+                <FrameCornersIcon className="w-4 h-4" weight="bold" />
+              </button>
+            )}
           </div>
-          <div className="space-y-2 mt-4">
-            {Array.from({ length: 5 }).map((_, i) => (
-              <div key={i} className="h-9 bg-neutral-100 dark:bg-neutral-800 rounded-lg animate-pulse" />
+          <div className="flex gap-1 overflow-x-auto scrollbar-hide" role="tablist" aria-label="Search data tabs" onKeyDown={handleTabKeyDown}>
+            {(['queries', 'pages'] as Tab[]).map((tab) => (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                role="tab"
+                aria-selected={activeTab === tab}
+                className={`relative px-2.5 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
+                  activeTab === tab
+                    ? 'text-white'
+                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-300'
+                }`}
+              >
+                {getTabLabel(tab)}
+                {activeTab === tab && (
+                  <motion.div
+                    layoutId="searchTab"
+                    className="absolute inset-x-0 -bottom-px h-0.5 bg-brand-orange"
+                    transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+                  />
+                )}
+              </button>
             ))}
           </div>
         </div>
-      ) : (
-        <>
-          {/* Inline stats row */}
-          <div className="flex items-center gap-5 mb-4">
-            <div className="flex items-center gap-1.5">
-              <span className="text-xs text-neutral-500 dark:text-neutral-400">Clicks</span>
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">
-                {(overview?.total_clicks ?? 0).toLocaleString()}
-              </span>
-              <ChangeArrow current={overview?.total_clicks ?? 0} previous={overview?.prev_clicks ?? 0} />
-            </div>
-            <div className="flex items-center gap-1.5">
-              <span className="text-xs text-neutral-500 dark:text-neutral-400">Impressions</span>
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">
-                {(overview?.total_impressions ?? 0).toLocaleString()}
-              </span>
-              <ChangeArrow current={overview?.total_impressions ?? 0} previous={overview?.prev_impressions ?? 0} />
-            </div>
-            <div className="flex items-center gap-1.5">
-              <span className="text-xs text-neutral-500 dark:text-neutral-400">Avg Position</span>
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">
-                {(overview?.avg_position ?? 0).toFixed(1)}
-              </span>
-              <ChangeArrow current={overview?.avg_position ?? 0} previous={overview?.prev_avg_position ?? 0} invert />
-            </div>
-          </div>
 
-          {/* Top 5 queries list */}
-          <div className="space-y-1 flex-1">
-            {queries.length > 0 ? (
-              queries.map((q) => (
-                <div
-                  key={q.query}
-                  className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors"
-                >
-                  <span className="text-sm text-neutral-900 dark:text-white truncate flex-1 min-w-0" title={q.query}>
-                    {q.query}
-                  </span>
-                  <div className="flex items-center gap-3 ml-4 shrink-0">
-                    <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
-                      {q.clicks.toLocaleString()}
-                    </span>
-                    <span className="text-xs text-neutral-400 dark:text-neutral-500 bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-medium">
-                      {q.position.toFixed(1)}
-                    </span>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="flex-1 flex items-center justify-center py-6">
-                <p className="text-sm text-neutral-400 dark:text-neutral-500">No search data yet</p>
-              </div>
-            )}
+        {isLoading ? (
+          <div className="flex-1 space-y-4">
+            <div className="flex items-center gap-6">
+              <div className="h-4 w-20 bg-neutral-800 rounded animate-pulse" />
+              <div className="h-4 w-24 bg-neutral-800 rounded animate-pulse" />
+              <div className="h-4 w-20 bg-neutral-800 rounded animate-pulse" />
+            </div>
+            <div className="space-y-2 mt-4">
+              <ListSkeleton rows={LIMIT} />
+            </div>
           </div>
-        </>
-      )}
-    </div>
+        ) : (
+          <>
+            {/* Inline stats row */}
+            <div className="flex items-center gap-5 mb-4">
+              <div className="flex items-center gap-1.5">
+                <span className="text-xs text-neutral-400">Clicks</span>
+                <span className="text-sm font-semibold text-white">
+                  {formatNumber(overview?.total_clicks ?? 0)}
+                </span>
+                <ChangeArrow current={overview?.total_clicks ?? 0} previous={overview?.prev_clicks ?? 0} />
+              </div>
+              <div className="flex items-center gap-1.5">
+                <span className="text-xs text-neutral-400">Impressions</span>
+                <span className="text-sm font-semibold text-white">
+                  {formatNumber(overview?.total_impressions ?? 0)}
+                </span>
+                <ChangeArrow current={overview?.total_impressions ?? 0} previous={overview?.prev_impressions ?? 0} />
+              </div>
+              <div className="flex items-center gap-1.5">
+                <span className="text-xs text-neutral-400">Avg Position</span>
+                <span className="text-sm font-semibold text-white">
+                  {(overview?.avg_position ?? 0).toFixed(1)}
+                </span>
+                <ChangeArrow current={overview?.avg_position ?? 0} previous={overview?.prev_avg_position ?? 0} invert />
+              </div>
+            </div>
+
+            {/* Data list */}
+            <div className="space-y-2 flex-1 min-h-[270px]">
+              {displayedData.length > 0 ? (
+                <>
+                  {displayedData.map((row) => {
+                    const maxImpressions = displayedData[0]?.impressions ?? 0
+                    const barWidth = maxImpressions > 0 ? (row.impressions / maxImpressions) * 75 : 0
+                    const label = getLabel(row)
+                    return (
+                      <div
+                        key={label}
+                        className="relative flex items-center justify-between h-9 group hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors"
+                      >
+                        <div
+                          className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
+                          style={{ width: `${barWidth}%` }}
+                        />
+                        <span className="relative text-sm text-white truncate flex-1 min-w-0" title={label}>
+                          {label}
+                        </span>
+                        <div className="relative flex items-center gap-3 ml-4 shrink-0">
+                          <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                            {totalImpressions > 0 ? `${Math.round((row.impressions / totalImpressions) * 100)}%` : ''}
+                          </span>
+                          <span className="text-sm font-semibold text-neutral-400">
+                            {formatNumber(row.clicks)}
+                          </span>
+                          <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${getPositionBadgeClasses(row.position)}`}>
+                            {row.position.toFixed(1)}
+                          </span>
+                        </div>
+                      </div>
+                    )
+                  })}
+                  {Array.from({ length: emptySlots }).map((_, i) => (
+                    <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
+                  ))}
+                </>
+              ) : (
+                <div className="flex-1 flex items-center justify-center py-6">
+                  <p className="text-sm text-neutral-400 dark:text-neutral-500">No search data yet</p>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Expand modal */}
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => { setIsModalOpen(false); setModalSearch('') }}
+        title={`Search ${getTabLabel(activeTab)}`}
+        className="max-w-2xl"
+      >
+        <div>
+          <input
+            type="text"
+            value={modalSearch}
+            onChange={(e) => setModalSearch(e.target.value)}
+            placeholder={`Search ${activeTab}...`}
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+          />
+        </div>
+        <div className="max-h-[80vh]">
+          {isLoadingFull ? (
+            <div className="py-4">
+              <ListSkeleton rows={10} />
+            </div>
+          ) : (() => {
+            const source = fullData.length > 0 ? fullData : data
+            const modalData = source.filter(row => {
+              if (!modalSearch) return true
+              return getLabel(row).toLowerCase().includes(modalSearch.toLowerCase())
+            })
+            const modalTotal = modalData.reduce((sum, r) => sum + r.impressions, 0)
+            return (
+              <VirtualList
+                items={modalData}
+                estimateSize={36}
+                className="max-h-[80vh] overflow-y-auto pr-2"
+                renderItem={(row) => {
+                  const label = getLabel(row)
+                  return (
+                    <div
+                      key={label}
+                      className="flex items-center justify-between h-9 group hover:bg-neutral-800 rounded-lg px-2 transition-colors"
+                    >
+                      <span className="flex-1 truncate text-sm text-white" title={label}>
+                        {label}
+                      </span>
+                      <div className="flex items-center gap-3 ml-4">
+                        <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                          {modalTotal > 0 ? `${Math.round((row.impressions / modalTotal) * 100)}%` : ''}
+                        </span>
+                        <span className="text-sm font-semibold text-neutral-400">
+                          {formatNumber(row.clicks)}
+                        </span>
+                        <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${getPositionBadgeClasses(row.position)}`}>
+                          {row.position.toFixed(1)}
+                        </span>
+                      </div>
+                    </div>
+                  )
+                }}
+              />
+            )
+          })()}
+        </div>
+      </Modal>
+    </>
   )
 }
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 7a2a271..042ac0a 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -162,12 +162,12 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
             setOpen(!open)
           }
         }}
-        className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
+        className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-200 hover:bg-neutral-800 overflow-hidden"
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 flex items-center justify-center shrink-0 overflow-hidden">
           {faviconUrl && !faviconFailed ? (
             <>
-              {!faviconLoaded && <span className="w-5 h-5 rounded animate-pulse bg-neutral-100 dark:bg-neutral-800" />}
+              {!faviconLoaded && <span className="w-5 h-5 rounded animate-pulse bg-neutral-800" />}
               <img
                 src={faviconUrl}
                 alt=""
@@ -187,14 +187,14 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
       </button>
 
       {open && (
-        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden">
+        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-neutral-900 border border-neutral-700 rounded-xl shadow-xl overflow-hidden">
           <div className="p-2">
             <input
               type="text"
               placeholder="Search sites..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              className="w-full px-3 py-1.5 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-neutral-900 dark:text-white placeholder:text-neutral-400"
+              className="w-full px-3 py-1.5 text-sm bg-neutral-800 border border-neutral-700 rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-white placeholder:text-neutral-400"
               autoFocus
             />
           </div>
@@ -206,7 +206,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
                 className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm text-left ${
                   site.id === siteId
                     ? 'bg-brand-orange/10 text-brand-orange font-medium'
-                    : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800'
+                    : 'text-neutral-300 hover:bg-neutral-800'
                 }`}
               >
                 <img
@@ -222,8 +222,8 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
             ))}
             {filtered.length === 0 && <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>}
           </div>
-          <div className="border-t border-neutral-200 dark:border-neutral-700 p-2">
-            <Link href="/sites/new" onClick={() => setOpen(false)} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg">
+          <div className="border-t border-neutral-700 p-2">
+            <Link href="/sites/new" onClick={() => setOpen(false)} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-800 rounded-lg">
               <PlusIcon className="w-4 h-4" />
               Add new site
             </Link>
@@ -256,7 +256,7 @@ function NavLink({
       className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden ${
         active
           ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
+          : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
       }`}
     >
       <span className="w-7 h-7 flex items-center justify-center shrink-0">
@@ -357,7 +357,7 @@ export default function Sidebar({
           <span className="w-9 h-9 flex items-center justify-center shrink-0">
             <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-9 h-9 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
           </span>
-          <span className={`text-xl font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
+          <span className={`text-xl font-bold text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
             Pulse
           </span>
         </Link>
@@ -387,7 +387,7 @@ export default function Sidebar({
         </nav>
 
         {/* Bottom — utility items */}
-        <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0">
+        <div className="border-t border-neutral-800/60 px-2 py-3 shrink-0">
           {/* Notifications, Profile — same layout as nav items */}
           <div className="space-y-0.5 mb-1">
             <span title={c ? 'Notifications' : undefined}>
@@ -418,7 +418,7 @@ export default function Sidebar({
             {!isMobile && (
               <button
                 onClick={toggle}
-                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full overflow-hidden"
+                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 w-full overflow-hidden"
                 title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
               >
                 <span className="w-7 h-7 flex items-center justify-center shrink-0">
@@ -437,7 +437,7 @@ export default function Sidebar({
     <>
       {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
       <aside
-        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative z-10"
+        className="hidden md:flex flex-col shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative z-10"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
       >
         {sidebarContent(false)}
@@ -447,10 +447,10 @@ export default function Sidebar({
       {mobileOpen && (
         <>
           <div className="fixed inset-0 z-40 bg-black/30 md:hidden" onClick={onMobileClose} />
-          <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 shadow-xl md:hidden animate-in slide-in-from-left duration-200">
-            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">Navigation</span>
-              <button onClick={onMobileClose} className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300">
+          <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-neutral-900 border-r border-neutral-800 shadow-xl md:hidden animate-in slide-in-from-left duration-200">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-800">
+              <span className="text-sm font-semibold text-white">Navigation</span>
+              <button onClick={onMobileClose} className="p-1.5 text-neutral-400 hover:text-neutral-300">
                 <XIcon className="w-5 h-5" />
               </button>
             </div>
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index 6139ec9..f9f63ac 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -131,17 +131,17 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
 
   return (
     <>
-      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+      <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-2">
             <DeviceMobile className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            <h3 className="text-lg font-semibold text-white">
               Technology
             </h3>
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
                 aria-label="View all technology"
               >
                 <FrameCornersIcon className="w-4 h-4" weight="bold" />
@@ -157,8 +157,8 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                 aria-selected={activeTab === tab}
                 className={`relative px-2.5 py-1 text-xs font-medium transition-colors capitalize focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
                   activeTab === tab
-                    ? 'text-neutral-900 dark:text-white'
-                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+                    ? 'text-white'
+                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-300'
                 }`}
               >
                 {tab}
@@ -177,7 +177,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
         <div className="space-y-2 flex-1 min-h-[270px]">
           {isTabDisabled() ? (
             <div className="h-full flex flex-col items-center justify-center text-center px-4">
-              <p className="text-neutral-500 dark:text-neutral-400 text-sm">{getDisabledMessage()}</p>
+              <p className="text-neutral-400 text-sm">{getDisabledMessage()}</p>
             </div>
           ) : hasData ? (
             <>
@@ -190,13 +190,13 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                   <div
                     key={item.name}
                     onClick={() => canFilter && onFilter({ dimension: dim, operator: 'is', values: [item.name] })}
-                    className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
+                    className={`relative flex items-center justify-between h-9 group hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
                       className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
-                    <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                    <div className="relative flex-1 truncate text-white flex items-center gap-3">
                       {item.icon && <span className="text-lg">{item.icon}</span>}
                       <span className="truncate">{capitalize(item.name)}</span>
                     </div>
@@ -204,7 +204,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                       <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                         {totalPageviews > 0 ? `${Math.round((item.pageviews / totalPageviews) * 100)}%` : ''}
                       </span>
-                      <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                      <span className="text-sm font-semibold text-neutral-400">
                         {formatNumber(item.pageviews)}
                       </span>
                     </div>
@@ -217,13 +217,13 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-              <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                <GridIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+              <div className="rounded-full bg-neutral-800 p-4">
+                <GridIcon className="w-8 h-8 text-neutral-400" />
               </div>
-              <h4 className="font-semibold text-neutral-900 dark:text-white">
+              <h4 className="font-semibold text-white">
                 No technology data yet
               </h4>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+              <p className="text-sm text-neutral-400 max-w-xs">
                 Browser, OS, and device information will appear as visitors arrive.
               </p>
               <Link
@@ -250,7 +250,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
             value={modalSearch}
             onChange={(e) => setModalSearch(e.target.value)}
             placeholder="Search technology..."
-            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
           />
         </div>
         <div className="max-h-[80vh]">
@@ -273,9 +273,9 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                     <div
                       key={item.name}
                       onClick={() => { if (canFilter) { onFilter({ dimension: dim, operator: 'is', values: [item.name] }); setIsModalOpen(false) } }}
-                      className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
+                      className={`flex items-center justify-between h-9 group hover:bg-neutral-800 rounded-lg px-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                     >
-                      <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                      <div className="flex-1 truncate text-white flex items-center gap-3">
                         {item.icon && <span className="text-lg">{item.icon}</span>}
                         <span className="truncate">{capitalize(item.name)}</span>
                       </div>
@@ -283,7 +283,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                         <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {modalTotal > 0 ? `${Math.round((item.pageviews / modalTotal) * 100)}%` : ''}
                         </span>
-                        <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        <span className="text-sm font-semibold text-neutral-400">
                           {formatNumber(item.pageviews)}
                         </span>
                       </div>
diff --git a/components/marketing/CTASection.tsx b/components/marketing/CTASection.tsx
new file mode 100644
index 0000000..1cc3d3f
--- /dev/null
+++ b/components/marketing/CTASection.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { ArrowRight } from '@phosphor-icons/react'
+import { Button } from '@ciphera-net/ui'
+import { initiateOAuthFlow } from '@/lib/api/oauth'
+import Link from 'next/link'
+
+export default function CTASection() {
+  return (
+    <section className="py-20 lg:py-32">
+      <div className="container mx-auto px-6">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="relative overflow-hidden rounded-xl border border-white/[0.06] bg-neutral-900/80 px-6 py-20 sm:px-10 sm:py-24 max-w-6xl mx-auto"
+        >
+          {/* Atmosphere inside card */}
+          <div className="absolute inset-0 -z-10 pointer-events-none">
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-brand-orange/5 rounded-full blur-[150px]" />
+          </div>
+
+          <div className="relative z-10 text-center max-w-2xl mx-auto">
+            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+              Start tracking with privacy.
+            </h2>
+            <p className="text-lg text-neutral-300 mb-10">
+              Join thousands of developers who respect their users&apos; privacy while getting the insights they need.
+            </p>
+            <div className="flex flex-row gap-3 justify-center flex-wrap">
+              <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-6 py-3 shadow-lg shadow-brand-orange/20 gap-2">
+                Try Pulse Free <ArrowRight weight="bold" className="w-4 h-4" />
+              </Button>
+              <Link href="/pricing">
+                <Button variant="secondary" className="px-6 py-3">
+                  View Pricing
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
diff --git a/components/marketing/ComparisonCards.tsx b/components/marketing/ComparisonCards.tsx
new file mode 100644
index 0000000..e0ef960
--- /dev/null
+++ b/components/marketing/ComparisonCards.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import { Check, X } from '@phosphor-icons/react'
+
+const pulseFeatures = [
+  { label: 'No cookies required', has: true },
+  { label: 'GDPR compliant by default', has: true },
+  { label: 'No consent banner needed', has: true },
+  { label: 'Open source client', has: true },
+  { label: 'Script under 2KB', has: true },
+  { label: 'Swiss infrastructure', has: true },
+  { label: 'No cross-site tracking', has: true },
+  { label: 'Free tier available', has: true },
+  { label: 'Real-time dashboard', has: true },
+]
+
+const gaFeatures = [
+  { label: 'Requires cookies', has: false },
+  { label: 'GDPR requires configuration', has: false },
+  { label: 'Consent banner required', has: false },
+  { label: 'Closed source', has: false },
+  { label: 'Script over 45KB', has: false },
+  { label: 'US infrastructure', has: false },
+  { label: 'Cross-site tracking', has: false },
+  { label: 'Free tier available', has: true },
+  { label: 'Real-time dashboard', has: true },
+]
+
+export default function ComparisonCards() {
+  return (
+    <section className="py-20 lg:py-32 border-t border-white/[0.04]">
+      <div className="container mx-auto px-6">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight mb-4">
+            How Pulse compares.
+          </h2>
+          <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
+            Privacy-first analytics doesn&apos;t mean less insight. See how Pulse stacks up.
+          </p>
+        </motion.div>
+
+        <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
+          {/* Pulse — highlighted */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+            className="rounded-xl border border-brand-orange/20 bg-neutral-900/80 p-8 relative overflow-hidden"
+          >
+            <div className="absolute top-0 left-0 right-0 h-[3px] bg-brand-orange" />
+            <div className="flex items-center gap-3 mb-6">
+              <Image src="/pulse_icon_no_margins.png" alt="Pulse" width={40} height={40} className="rounded-lg" unoptimized />
+              <div>
+                <h3 className="text-xl font-bold text-white">Pulse</h3>
+                <p className="text-xs text-brand-orange">Privacy-first analytics</p>
+              </div>
+            </div>
+            <ul className="space-y-4">
+              {pulseFeatures.map((f) => (
+                <li key={f.label} className="flex items-center gap-3">
+                  <Check weight="bold" className="w-5 h-5 text-brand-orange shrink-0" />
+                  <span className="text-neutral-300 text-sm">{f.label}</span>
+                </li>
+              ))}
+            </ul>
+          </motion.div>
+
+          {/* Google Analytics — muted */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="rounded-xl border border-white/[0.08] bg-neutral-900/80 p-8"
+          >
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 rounded-lg bg-neutral-800 flex items-center justify-center text-lg">
+                📊
+              </div>
+              <div>
+                <h3 className="text-xl font-bold text-white">Google Analytics</h3>
+                <p className="text-xs text-neutral-500">Traditional tracking</p>
+              </div>
+            </div>
+            <ul className="space-y-4">
+              {gaFeatures.map((f) => (
+                <li key={f.label} className="flex items-center gap-3">
+                  {f.has ? (
+                    <Check weight="bold" className="w-5 h-5 text-green-500 shrink-0" />
+                  ) : (
+                    <X weight="bold" className="w-5 h-5 text-red-500 shrink-0" />
+                  )}
+                  <span className="text-neutral-400 text-sm">{f.label}</span>
+                </li>
+              ))}
+            </ul>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/components/marketing/DashboardDemo.tsx b/components/marketing/DashboardDemo.tsx
new file mode 100644
index 0000000..7be2c9c
--- /dev/null
+++ b/components/marketing/DashboardDemo.tsx
@@ -0,0 +1,273 @@
+'use client'
+
+import Chart from '@/components/dashboard/Chart'
+import ContentStats from '@/components/dashboard/ContentStats'
+import TopReferrers from '@/components/dashboard/TopReferrers'
+import Locations from '@/components/dashboard/Locations'
+import TechSpecs from '@/components/dashboard/TechSpecs'
+import { useState } from 'react'
+
+// ─── Fake Data ───────────────────────────────────────────────────────
+
+const FAKE_STATS = { pageviews: 8432, visitors: 2847, bounce_rate: 42, avg_duration: 154 }
+const FAKE_PREV_STATS = { pageviews: 7821, visitors: 2543, bounce_rate: 45, avg_duration: 134 }
+
+const FAKE_DAILY_STATS = [
+  { date: '2026-03-21 00:00:00', pageviews: 42, visitors: 26, bounce_rate: 46, avg_duration: 118 },
+  { date: '2026-03-21 01:00:00', pageviews: 38, visitors: 24, bounce_rate: 47, avg_duration: 115 },
+  { date: '2026-03-21 02:00:00', pageviews: 35, visitors: 22, bounce_rate: 47, avg_duration: 112 },
+  { date: '2026-03-21 03:00:00', pageviews: 34, visitors: 21, bounce_rate: 48, avg_duration: 110 },
+  { date: '2026-03-21 04:00:00', pageviews: 36, visitors: 23, bounce_rate: 47, avg_duration: 112 },
+  { date: '2026-03-21 05:00:00', pageviews: 45, visitors: 29, bounce_rate: 46, avg_duration: 116 },
+  { date: '2026-03-21 06:00:00', pageviews: 62, visitors: 40, bounce_rate: 45, avg_duration: 122 },
+  { date: '2026-03-21 07:00:00', pageviews: 95, visitors: 62, bounce_rate: 43, avg_duration: 132 },
+  { date: '2026-03-21 08:00:00', pageviews: 148, visitors: 98, bounce_rate: 41, avg_duration: 145 },
+  { date: '2026-03-21 09:00:00', pageviews: 215, visitors: 145, bounce_rate: 39, avg_duration: 155 },
+  { date: '2026-03-21 10:00:00', pageviews: 285, visitors: 192, bounce_rate: 38, avg_duration: 162 },
+  { date: '2026-03-21 11:00:00', pageviews: 338, visitors: 228, bounce_rate: 37, avg_duration: 168 },
+  { date: '2026-03-21 12:00:00', pageviews: 355, visitors: 240, bounce_rate: 38, avg_duration: 165 },
+  { date: '2026-03-21 13:00:00', pageviews: 372, visitors: 252, bounce_rate: 37, avg_duration: 170 },
+  { date: '2026-03-21 14:00:00', pageviews: 390, visitors: 265, bounce_rate: 36, avg_duration: 175 },
+  { date: '2026-03-21 15:00:00', pageviews: 385, visitors: 260, bounce_rate: 36, avg_duration: 173 },
+  { date: '2026-03-21 16:00:00', pageviews: 362, visitors: 245, bounce_rate: 37, avg_duration: 168 },
+  { date: '2026-03-21 17:00:00', pageviews: 325, visitors: 218, bounce_rate: 38, avg_duration: 162 },
+  { date: '2026-03-21 18:00:00', pageviews: 282, visitors: 190, bounce_rate: 40, avg_duration: 155 },
+  { date: '2026-03-21 19:00:00', pageviews: 238, visitors: 160, bounce_rate: 41, avg_duration: 148 },
+  { date: '2026-03-21 20:00:00', pageviews: 195, visitors: 132, bounce_rate: 42, avg_duration: 140 },
+  { date: '2026-03-21 21:00:00', pageviews: 155, visitors: 105, bounce_rate: 43, avg_duration: 132 },
+  { date: '2026-03-21 22:00:00', pageviews: 112, visitors: 75, bounce_rate: 44, avg_duration: 125 },
+  { date: '2026-03-21 23:00:00', pageviews: 72, visitors: 46, bounce_rate: 45, avg_duration: 120 },
+]
+
+const FAKE_TOP_PAGES = [
+  { path: '/', pageviews: 2341, visits: 1892 },
+  { path: '/products/pulse', pageviews: 1567, visits: 1234 },
+  { path: '/products/drop', pageviews: 987, visits: 812 },
+  { path: '/pricing', pageviews: 876, visits: 723 },
+  { path: '/blog/privacy-first-analytics', pageviews: 654, visits: 543 },
+  { path: '/about', pageviews: 432, visits: 367 },
+  { path: '/docs/getting-started', pageviews: 389, visits: 312 },
+  { path: '/blog/end-to-end-encryption', pageviews: 345, visits: 289 },
+  { path: '/contact', pageviews: 287, visits: 234 },
+  { path: '/careers', pageviews: 198, visits: 167 },
+]
+
+const FAKE_ENTRY_PAGES = [
+  { path: '/', pageviews: 1987, visits: 1654 },
+  { path: '/products/pulse', pageviews: 1123, visits: 987 },
+  { path: '/blog/privacy-first-analytics', pageviews: 567, visits: 489 },
+  { path: '/products/drop', pageviews: 534, visits: 456 },
+  { path: '/pricing', pageviews: 423, visits: 378 },
+  { path: '/docs/getting-started', pageviews: 312, visits: 267 },
+  { path: '/about', pageviews: 234, visits: 198 },
+  { path: '/blog/end-to-end-encryption', pageviews: 198, visits: 167 },
+  { path: '/careers', pageviews: 145, visits: 123 },
+  { path: '/contact', pageviews: 112, visits: 98 },
+]
+
+const FAKE_EXIT_PAGES = [
+  { path: '/pricing', pageviews: 1456, visits: 1234 },
+  { path: '/', pageviews: 1234, visits: 1087 },
+  { path: '/contact', pageviews: 876, visits: 756 },
+  { path: '/products/drop', pageviews: 654, visits: 543 },
+  { path: '/products/pulse', pageviews: 567, visits: 478 },
+  { path: '/docs/getting-started', pageviews: 432, visits: 367 },
+  { path: '/about', pageviews: 345, visits: 289 },
+  { path: '/blog/privacy-first-analytics', pageviews: 298, visits: 245 },
+  { path: '/careers', pageviews: 234, visits: 198 },
+  { path: '/blog/end-to-end-encryption', pageviews: 178, visits: 145 },
+]
+
+const FAKE_REFERRERS = [
+  { referrer: 'google.com', pageviews: 3421 },
+  { referrer: '(direct)', pageviews: 2100 },
+  { referrer: 'twitter.com', pageviews: 876 },
+  { referrer: 'github.com', pageviews: 654 },
+  { referrer: 'reddit.com', pageviews: 432 },
+  { referrer: 'producthunt.com', pageviews: 312 },
+  { referrer: 'news.ycombinator.com', pageviews: 267 },
+  { referrer: 'linkedin.com', pageviews: 198 },
+  { referrer: 'duckduckgo.com', pageviews: 112 },
+  { referrer: 'dev.to', pageviews: 78 },
+]
+
+const FAKE_COUNTRIES = [
+  { country: 'CH', pageviews: 2534 },
+  { country: 'DE', pageviews: 1856 },
+  { country: 'US', pageviews: 1234 },
+  { country: 'FR', pageviews: 876 },
+  { country: 'GB', pageviews: 654 },
+  { country: 'NL', pageviews: 432 },
+  { country: 'AT', pageviews: 312 },
+  { country: 'SE', pageviews: 198 },
+  { country: 'JP', pageviews: 156 },
+  { country: 'CA', pageviews: 134 },
+]
+
+const FAKE_CITIES = [
+  { city: 'Zurich', country: 'CH', pageviews: 1234 },
+  { city: 'Geneva', country: 'CH', pageviews: 678 },
+  { city: 'Berlin', country: 'DE', pageviews: 567 },
+  { city: 'Munich', country: 'DE', pageviews: 432 },
+  { city: 'San Francisco', country: 'US', pageviews: 345 },
+  { city: 'Paris', country: 'FR', pageviews: 312 },
+  { city: 'London', country: 'GB', pageviews: 289 },
+  { city: 'Amsterdam', country: 'NL', pageviews: 234 },
+  { city: 'Vienna', country: 'AT', pageviews: 198 },
+  { city: 'New York', country: 'US', pageviews: 178 },
+]
+
+const FAKE_REGIONS = [
+  { region: 'Zurich', country: 'CH', pageviews: 1567 },
+  { region: 'Geneva', country: 'CH', pageviews: 734 },
+  { region: 'Bavaria', country: 'DE', pageviews: 523 },
+  { region: 'Berlin', country: 'DE', pageviews: 489 },
+  { region: 'California', country: 'US', pageviews: 456 },
+  { region: 'Ile-de-France', country: 'FR', pageviews: 345 },
+  { region: 'England', country: 'GB', pageviews: 312 },
+  { region: 'North Holland', country: 'NL', pageviews: 267 },
+  { region: 'Bern', country: 'CH', pageviews: 234 },
+  { region: 'New York', country: 'US', pageviews: 198 },
+]
+
+const FAKE_BROWSERS = [
+  { browser: 'Chrome', pageviews: 5234 },
+  { browser: 'Firefox', pageviews: 1518 },
+  { browser: 'Safari', pageviews: 987 },
+  { browser: 'Edge', pageviews: 456 },
+  { browser: 'Brave', pageviews: 178 },
+  { browser: 'Arc', pageviews: 59 },
+]
+
+const FAKE_OS = [
+  { os: 'macOS', pageviews: 3421 },
+  { os: 'Windows', pageviews: 2567 },
+  { os: 'Linux', pageviews: 1234 },
+  { os: 'iOS', pageviews: 756 },
+  { os: 'Android', pageviews: 454 },
+]
+
+const FAKE_DEVICES = [
+  { device: 'Desktop', pageviews: 5876 },
+  { device: 'Mobile', pageviews: 1987 },
+  { device: 'Tablet', pageviews: 569 },
+]
+
+const FAKE_SCREEN_RESOLUTIONS = [
+  { screen_resolution: '1920x1080', pageviews: 2345 },
+  { screen_resolution: '1440x900', pageviews: 1567 },
+  { screen_resolution: '2560x1440', pageviews: 1234 },
+  { screen_resolution: '1366x768', pageviews: 876 },
+  { screen_resolution: '3840x2160', pageviews: 654 },
+  { screen_resolution: '1536x864', pageviews: 432 },
+  { screen_resolution: '390x844', pageviews: 312 },
+  { screen_resolution: '393x873', pageviews: 234 },
+]
+
+// ─── Component ───────────────────────────────────────────────────────
+
+export default function DashboardDemo() {
+  const [todayInterval, setTodayInterval] = useState<'minute' | 'hour'>('hour')
+  const [multiDayInterval, setMultiDayInterval] = useState<'hour' | 'day'>('day')
+  const today = new Date().toISOString().split('T')[0]
+  const dateRange = { start: today, end: today }
+
+  const noop = () => {}
+
+  return (
+    <div className="relative">
+      {/* Orange glow behind */}
+      <div className="absolute -inset-8 bg-brand-orange/8 rounded-[2.5rem] blur-3xl" />
+
+      {/* Outer frame with showcase bg */}
+      <div className="relative rounded-3xl border border-white/[0.08] overflow-hidden p-5 sm:p-8 lg:p-10">
+        <img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
+        <div className="absolute inset-0 bg-black/40" />
+
+        {/* Inner dashboard — solid background */}
+        <div className="relative rounded-2xl bg-neutral-950/80 backdrop-blur-sm p-4 sm:p-6">
+          {/* Dashboard header */}
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center gap-4">
+              <div>
+                <h2 className="text-xl font-bold text-white">Ciphera</h2>
+                <p className="text-sm text-neutral-400">ciphera.net</p>
+              </div>
+              <div className="flex items-center gap-2 px-3 py-1 bg-green-500/10 rounded-full border border-green-500/20">
+                <span className="relative flex h-2 w-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+                </span>
+                <span className="text-sm font-medium text-green-400">12 current visitors</span>
+              </div>
+            </div>
+            <div className="px-4 py-2 rounded-lg bg-neutral-900/80 border border-white/[0.08] text-sm text-neutral-300">
+              Today
+            </div>
+          </div>
+
+          {/* Chart with stats */}
+          <div className="mb-6">
+            <Chart
+              data={FAKE_DAILY_STATS}
+              stats={FAKE_STATS}
+              prevStats={FAKE_PREV_STATS}
+              interval={todayInterval}
+              dateRange={dateRange}
+              period="today"
+              todayInterval={todayInterval}
+              setTodayInterval={setTodayInterval}
+              multiDayInterval={multiDayInterval}
+              setMultiDayInterval={setMultiDayInterval}
+            />
+          </div>
+
+          {/* 2-col grid: Pages + Referrers */}
+          <div className="grid gap-6 lg:grid-cols-2 mb-6 [&>*]:min-w-0">
+            <ContentStats
+              topPages={FAKE_TOP_PAGES}
+              entryPages={FAKE_ENTRY_PAGES}
+              exitPages={FAKE_EXIT_PAGES}
+              domain="ciphera.net"
+              collectPagePaths={true}
+              siteId="demo"
+              dateRange={dateRange}
+              onFilter={noop}
+            />
+            <TopReferrers
+              referrers={FAKE_REFERRERS}
+              collectReferrers={true}
+              siteId="demo"
+              dateRange={dateRange}
+              onFilter={noop}
+            />
+          </div>
+
+          {/* 2-col grid: Locations + Tech */}
+          <div className="grid gap-6 lg:grid-cols-2 [&>*]:min-w-0">
+            <Locations
+              countries={FAKE_COUNTRIES}
+              cities={FAKE_CITIES}
+              regions={FAKE_REGIONS}
+              geoDataLevel="full"
+              siteId="demo"
+              dateRange={dateRange}
+              onFilter={noop}
+            />
+            <TechSpecs
+              browsers={FAKE_BROWSERS}
+              os={FAKE_OS}
+              devices={FAKE_DEVICES}
+              screenResolutions={FAKE_SCREEN_RESOLUTIONS}
+              collectDeviceInfo={true}
+              collectScreenResolution={true}
+              siteId="demo"
+              dateRange={dateRange}
+              onFilter={noop}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/marketing/FAQ.tsx b/components/marketing/FAQ.tsx
new file mode 100644
index 0000000..8707531
--- /dev/null
+++ b/components/marketing/FAQ.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import React, { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Plus } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+interface FAQProps extends React.HTMLAttributes<HTMLElement> {
+  title?: string;
+  subtitle?: string;
+  categories: Record<string, string>;
+  faqData: Record<string, FAQItem[]>;
+}
+
+export const FAQ = ({
+  title = "FAQs",
+  subtitle = "Frequently Asked Questions",
+  categories,
+  faqData,
+  className,
+  ...props
+}: FAQProps) => {
+  const categoryKeys = Object.keys(categories);
+  const [selectedCategory, setSelectedCategory] = useState(categoryKeys[0]);
+
+  return (
+    <section
+      className={cn(
+        "relative overflow-hidden bg-background px-4 py-12 text-foreground",
+        className
+      )}
+      {...props}
+    >
+      <FAQHeader title={title} subtitle={subtitle} />
+      <FAQTabs
+        categories={categories}
+        selected={selectedCategory}
+        setSelected={setSelectedCategory}
+      />
+      <FAQList
+        faqData={faqData}
+        selected={selectedCategory}
+      />
+    </section>
+  );
+};
+
+const FAQHeader = ({ title, subtitle }: { title: string; subtitle: string }) => (
+  <div className="relative z-10 flex flex-col items-center justify-center">
+    <span className="mb-8 bg-gradient-to-r from-primary to-primary/60 bg-clip-text font-medium text-transparent">
+      {subtitle}
+    </span>
+    <h2 className="mb-8 text-5xl font-bold">{title}</h2>
+  </div>
+);
+
+const FAQTabs = ({ categories, selected, setSelected }: { categories: Record<string, string>; selected: string; setSelected: (key: string) => void }) => (
+  <div className="relative z-10 flex flex-wrap items-center justify-center gap-4">
+    {Object.entries(categories).map(([key, label]) => (
+      <button
+        key={key}
+        onClick={() => setSelected(key)}
+        className={cn(
+          "relative overflow-hidden whitespace-nowrap rounded-md border px-3 py-1.5 text-sm font-medium transition-colors duration-500",
+          selected === key
+            ? "border-primary text-background"
+            : "border-border bg-transparent text-muted-foreground hover:text-foreground"
+        )}
+      >
+        <span className="relative z-10">{label}</span>
+        <AnimatePresence>
+          {selected === key && (
+            <motion.span
+              initial={{ y: "100%" }}
+              animate={{ y: "0%" }}
+              exit={{ y: "100%" }}
+              transition={{ duration: 0.5, ease: "backIn" }}
+              className="absolute inset-0 z-0 bg-gradient-to-r from-primary to-primary/80"
+            />
+          )}
+        </AnimatePresence>
+      </button>
+    ))}
+  </div>
+);
+
+const FAQList = ({ faqData, selected }: { faqData: Record<string, FAQItem[]>; selected: string }) => (
+  <div className="mx-auto mt-12 max-w-3xl">
+    <AnimatePresence mode="wait">
+      {Object.entries(faqData).map(([category, questions]) => {
+        if (selected === category) {
+          return (
+            <motion.div
+              key={category}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 20 }}
+              transition={{ duration: 0.5, ease: "backIn" }}
+              className="space-y-4"
+            >
+              {questions.map((faq, index) => (
+                <FAQItemComponent key={index} {...faq} />
+              ))}
+            </motion.div>
+          );
+        }
+        return null;
+      })}
+    </AnimatePresence>
+  </div>
+);
+
+const FAQItemComponent = ({ question, answer }: FAQItem) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <motion.div
+      animate={isOpen ? "open" : "closed"}
+      className={cn(
+        "rounded-xl border transition-colors",
+        isOpen ? "bg-muted/50" : "bg-card"
+      )}
+    >
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full items-center justify-between gap-4 p-4 text-left"
+      >
+        <span
+          className={cn(
+            "text-lg font-medium transition-colors",
+            isOpen ? "text-foreground" : "text-muted-foreground"
+          )}
+        >
+          {question}
+        </span>
+        <motion.span
+          variants={{
+            open: { rotate: "45deg" },
+            closed: { rotate: "0deg" },
+          }}
+          transition={{ duration: 0.2 }}
+        >
+          <Plus
+            className={cn(
+              "h-5 w-5 transition-colors",
+              isOpen ? "text-foreground" : "text-muted-foreground"
+            )}
+          />
+        </motion.span>
+      </button>
+      <motion.div
+        initial={false}
+        animate={{
+          height: isOpen ? "auto" : "0px",
+          marginBottom: isOpen ? "16px" : "0px"
+        }}
+        transition={{ duration: 0.3, ease: "easeInOut" }}
+        className="overflow-hidden px-4"
+      >
+        <p className="text-muted-foreground">{answer}</p>
+      </motion.div>
+    </motion.div>
+  );
+};
diff --git a/components/marketing/FeatureSections.tsx b/components/marketing/FeatureSections.tsx
new file mode 100644
index 0000000..2891228
--- /dev/null
+++ b/components/marketing/FeatureSections.tsx
@@ -0,0 +1,210 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Check } from '@phosphor-icons/react'
+import { PulseMockup } from './mockups/pulse-mockup'
+import { PulseFeaturesCarousel } from './mockups/pulse-features-carousel'
+import { FunnelMockup } from './mockups/funnel-mockup'
+import { EmailReportMockup } from './mockups/email-report-mockup'
+
+// Section wrapper component for reuse
+function FeatureSection({
+  id,
+  heading,
+  description,
+  features,
+  mockup,
+  reverse = false,
+  showBg = true,
+}: {
+  id: string
+  heading: string
+  description: string
+  features: string[]
+  mockup: React.ReactNode
+  reverse?: boolean
+  showBg?: boolean
+}) {
+  return (
+    <section id={id} className="container mx-auto px-6 scroll-mt-28">
+      <div className={`grid lg:grid-cols-2 gap-12 lg:gap-20 items-center`}>
+        {/* Text */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className={reverse ? 'lg:order-last' : ''}
+        >
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight mb-6">
+            {heading}
+          </h2>
+          <p className="text-lg text-neutral-400 leading-relaxed mb-6">
+            {description}
+          </p>
+          <ul className="space-y-3 mb-8">
+            {features.map((item) => (
+              <li key={item} className="flex gap-3 text-neutral-300">
+                <Check weight="bold" className="w-5 h-5 text-brand-orange mt-0.5 shrink-0" />
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </motion.div>
+
+        {/* Mockup container */}
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6, delay: 0.1 }}
+          className={`relative ${reverse ? 'lg:order-first' : ''}`}
+        >
+          {showBg && <div className="absolute -inset-8 bg-brand-orange/8 rounded-[2.5rem] blur-3xl" />}
+          <div className={`relative rounded-3xl overflow-hidden border border-white/[0.08] ${showBg ? '' : 'bg-neutral-900/80'}`}>
+            {showBg && (
+              <>
+                <img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
+                <div className="absolute inset-0 bg-black/30" />
+              </>
+            )}
+            <div className="relative">
+              {mockup}
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
+
+export default function FeatureSections() {
+  return (
+    <div className="py-20 lg:py-32 space-y-28">
+      {/* Section 1: Dashboard — text left, mockup right */}
+      <FeatureSection
+        id="dashboard"
+        heading="Your traffic, at a glance."
+        description="Get a clear, real-time overview of your website's performance without the clutter of traditional analytics tools."
+        features={[
+          'Live visitor count with real-time updates',
+          'Hourly, daily, weekly, and monthly trends',
+          'Referrer sources and UTM campaign tracking',
+          'Country-level geographic breakdown',
+        ]}
+        mockup={
+          <div className="p-6 sm:p-10">
+            <PulseMockup />
+          </div>
+        }
+      />
+
+      {/* Section 2: Visitors — mockup left, text right */}
+      <FeatureSection
+        id="visitors"
+        heading="Everything you need to know about your visitors."
+        description="Understand where your traffic comes from, what content resonates, and how visitors interact with your site — all without compromising their privacy."
+        features={[
+          'Top pages ranked by views and unique visitors',
+          'Referrer breakdown with source attribution',
+          'Browser, OS, and device analytics',
+          'Peak hours heatmap for optimal publishing',
+        ]}
+        reverse
+        mockup={
+          <div className="p-6 sm:p-10 min-h-[500px] flex items-center">
+            <div className="w-full">
+              <PulseFeaturesCarousel />
+            </div>
+          </div>
+        }
+      />
+
+      {/* Section 3: Funnels — text left, mockup right */}
+      <FeatureSection
+        id="funnels"
+        heading="See where visitors drop off."
+        description="Build custom conversion funnels to understand your user journey. Identify bottlenecks and optimize your conversion flow."
+        features={[
+          'Multi-step funnels with conversion rates',
+          'Drop-off analysis between each step',
+          'Conversion trends over time',
+          'Breakdown by device, country, or referrer',
+          'Configurable conversion window (up to 90 days)',
+        ]}
+        mockup={
+          <div className="p-6 sm:p-10">
+            <FunnelMockup />
+          </div>
+        }
+      />
+
+      {/* Section 4: Reports — mockup left, text right */}
+      <FeatureSection
+        id="reports"
+        heading="Reports delivered to your inbox."
+        description="Get automated summaries of your site's performance without logging into a dashboard. Stay informed effortlessly."
+        features={[
+          'Daily, weekly, or monthly email summaries',
+          'Key metrics with period-over-period comparison',
+          'Top pages, referrers, and country breakdown',
+          'Webhook delivery for custom integrations',
+          'Multiple recipients per report',
+        ]}
+        reverse
+        mockup={
+          <div className="p-6 sm:p-10">
+            <EmailReportMockup />
+          </div>
+        }
+      />
+
+      {/* Section 5: Script — text left, code block right (no showcase bg) */}
+      <FeatureSection
+        id="script"
+        showBg={false}
+        heading="One script tag. That's it."
+        description="No npm packages, no build steps, no configuration files. Add a single line to your HTML and start collecting privacy-respecting analytics instantly."
+        features={[
+          'Under 2KB gzipped — 20x smaller than Google Analytics',
+          'Async loading with defer — never blocks rendering',
+          'Works with any framework or static site',
+        ]}
+        mockup={
+          <div className="p-0">
+            {/* Code block with browser chrome */}
+            <div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
+              <div className="flex gap-2">
+                <div className="w-3 h-3 rounded-full bg-red-500/20" />
+                <div className="w-3 h-3 rounded-full bg-yellow-500/20" />
+                <div className="w-3 h-3 rounded-full bg-green-500/20" />
+              </div>
+              <span className="ml-4 text-xs text-neutral-400 font-mono">index.html</span>
+            </div>
+            <pre className="p-6 overflow-x-auto">
+              <code className="font-mono text-sm text-neutral-300">
+                <span className="text-neutral-500">{'<!-- Add before </head> -->'}</span>{'\n'}
+                <span className="text-blue-400">{'<'}</span>
+                <span className="text-blue-400">script</span>{'\n'}
+                {'  '}<span className="text-sky-300">defer</span>{'\n'}
+                {'  '}<span className="text-sky-300">data-domain</span>=<span className="text-orange-300">&quot;yoursite.com&quot;</span>{'\n'}
+                {'  '}<span className="text-sky-300">src</span>=<span className="text-orange-300">&quot;https://pulse.ciphera.net/js/script.js&quot;</span>{'\n'}
+                <span className="text-blue-400">{'>'}</span>
+                <span className="text-blue-400">{'</'}</span>
+                <span className="text-blue-400">script</span>
+                <span className="text-blue-400">{'>'}</span>
+              </code>
+            </pre>
+            <div className="flex items-center gap-4 px-6 py-3 border-t border-neutral-800 text-xs text-neutral-500">
+              <span>1.6 KB gzipped</span>
+              <span className="flex items-center gap-1.5">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-500" />
+                Non-blocking, async
+              </span>
+            </div>
+          </div>
+        }
+      />
+    </div>
+  )
+}
diff --git a/components/marketing/Header.tsx b/components/marketing/Header.tsx
new file mode 100644
index 0000000..80e45f3
--- /dev/null
+++ b/components/marketing/Header.tsx
@@ -0,0 +1,309 @@
+'use client';
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Button } from '@/components/ui/button-website';
+import { cn } from '@/lib/utils';
+import { MenuToggleIcon } from '@/components/ui/menu-toggle-icon';
+import { createPortal } from 'react-dom';
+import {
+    NavigationMenu,
+    NavigationMenuContent,
+    NavigationMenuItem,
+    NavigationMenuLink,
+    NavigationMenuList,
+    NavigationMenuTrigger,
+} from '@/components/ui/navigation-menu';
+import { LucideIcon } from 'lucide-react';
+import {
+    BarChart3,
+    Eye,
+    Funnel,
+    Send,
+    FileText,
+    Puzzle,
+    HelpCircle,
+} from 'lucide-react';
+
+type LinkItem = {
+    title: string;
+    href: string;
+    icon?: LucideIcon;
+    description?: string;
+};
+
+const featureLinks: LinkItem[] = [
+    {
+        title: 'Dashboard',
+        href: '/features#dashboard',
+        icon: BarChart3,
+        description: 'Real-time traffic overview',
+    },
+    {
+        title: 'Visitor Insights',
+        href: '/features#visitors',
+        icon: Eye,
+        description: 'Browser, device & geo data',
+    },
+    {
+        title: 'Conversion Funnels',
+        href: '/features#funnels',
+        icon: Funnel,
+        description: 'Multi-step drop-off analysis',
+    },
+    {
+        title: 'Email Reports',
+        href: '/features#reports',
+        icon: Send,
+        description: 'Scheduled inbox summaries',
+    },
+];
+
+const resourceLinks: LinkItem[] = [
+    {
+        title: 'Installation',
+        href: '/installation',
+        icon: FileText,
+        description: 'Setup guides & code snippets',
+    },
+    {
+        title: 'Integrations',
+        href: '/integrations',
+        icon: Puzzle,
+        description: '75+ framework guides',
+    },
+    {
+        title: 'FAQ',
+        href: '/faq',
+        icon: HelpCircle,
+        description: 'Common questions answered',
+    },
+];
+
+export function Header() {
+    const [open, setOpen] = React.useState(false);
+    const scrolled = useScroll(10);
+
+    React.useEffect(() => {
+        if (open) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [open]);
+
+    return (
+        <header
+            className={cn('sticky top-0 z-50 w-full border-b border-transparent', {
+                'border-white/[0.06]': scrolled,
+            })}
+        >
+            <div className={cn("absolute inset-0 -z-10 transition-opacity duration-300", scrolled ? "opacity-100 backdrop-blur-xl bg-neutral-950/60 supports-[backdrop-filter]:bg-neutral-950/50" : "opacity-0")} />
+            <nav className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-6 my-3">
+                <div className="flex items-center gap-5">
+                    <Link href="/" className="hover:bg-accent rounded-md p-2 flex items-center gap-2">
+                        <Image
+                            src="/pulse_icon_no_margins.png"
+                            alt="Pulse"
+                            width={36}
+                            height={36}
+                            priority
+                            className="object-contain w-8 h-8"
+                            unoptimized
+                        />
+                        <span className="text-xl font-bold text-foreground tracking-tight">
+                            Pulse
+                        </span>
+                    </Link>
+                    <NavigationMenu className="hidden md:flex">
+                        <NavigationMenuList>
+                            {/* Features dropdown */}
+                            <NavigationMenuItem>
+                                <NavigationMenuTrigger className="bg-transparent">Features</NavigationMenuTrigger>
+                                <NavigationMenuContent className="bg-transparent p-1 pr-1.5">
+                                    <ul className="grid w-[32rem] grid-cols-2 gap-2 rounded-md border border-white/[0.06] bg-white/[0.04] p-2">
+                                        {featureLinks.map((item, i) => (
+                                            <li key={i}>
+                                                <ListItem title={item.title} href={item.href} icon={item.icon} description={item.description} />
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </NavigationMenuContent>
+                            </NavigationMenuItem>
+
+                            {/* Resources dropdown */}
+                            <NavigationMenuItem>
+                                <NavigationMenuTrigger className="bg-transparent">Resources</NavigationMenuTrigger>
+                                <NavigationMenuContent className="bg-transparent p-1 pr-1.5 pb-1.5">
+                                    <div className="grid w-[32rem] grid-cols-2 gap-2">
+                                        <ul className="space-y-2 rounded-md border border-white/[0.06] bg-white/[0.04] p-2">
+                                            {resourceLinks.map((item, i) => (
+                                                <li key={i}>
+                                                    <ListItem {...item} />
+                                                </li>
+                                            ))}
+                                        </ul>
+                                        <div className="flex flex-col justify-center gap-3 p-4">
+                                            <p className="text-sm font-medium text-foreground">Need help?</p>
+                                            <p className="text-xs text-muted-foreground leading-relaxed">
+                                                Questions about setup, integrations, or billing — we typically respond within 24-48 hours.
+                                            </p>
+                                            <a href="mailto:support@ciphera.net" className="text-sm font-medium text-brand-orange hover:underline">
+                                                support@ciphera.net &rarr;
+                                            </a>
+                                        </div>
+                                    </div>
+                                </NavigationMenuContent>
+                            </NavigationMenuItem>
+
+                            {/* Pricing standalone link */}
+                            <NavigationMenuItem>
+                                <NavigationMenuLink asChild>
+                                    <Link href="/pricing" className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none">
+                                        Pricing
+                                    </Link>
+                                </NavigationMenuLink>
+                            </NavigationMenuItem>
+                        </NavigationMenuList>
+                    </NavigationMenu>
+                </div>
+                <div className="hidden items-center gap-2 md:flex">
+                    <Button variant="outline" asChild>
+                        <a href="https://pulse.ciphera.net">Sign In</a>
+                    </Button>
+                    <Button asChild>
+                        <a href="https://pulse.ciphera.net">Get Started</a>
+                    </Button>
+                </div>
+                <div className="flex items-center gap-2 md:hidden">
+                    <Button
+                        size="icon"
+                        variant="outline"
+                        onClick={() => setOpen(!open)}
+                        aria-expanded={open}
+                        aria-controls="mobile-menu"
+                        aria-label="Toggle menu"
+                    >
+                        <MenuToggleIcon open={open} className="size-5" duration={300} />
+                    </Button>
+                </div>
+            </nav>
+            <MobileMenu open={open} className="flex flex-col justify-between gap-2 overflow-y-auto">
+                <NavigationMenu className="max-w-full">
+                    <div className="flex w-full flex-col gap-y-2">
+                        <span className="text-sm">Features</span>
+                        {featureLinks.map((link) => (
+                            <ListItem key={link.title} title={link.title} href={link.href} icon={link.icon} description={link.description} />
+                        ))}
+                        <span className="text-sm">Resources</span>
+                        {resourceLinks.map((link) => (
+                            <ListItem key={link.title} {...link} />
+                        ))}
+                        <Link
+                            href="/pricing"
+                            className="flex flex-row gap-x-2 rounded-sm p-2 transition-colors hover:bg-white/[0.06]"
+                        >
+                            <div className="flex aspect-square size-12 items-center justify-center rounded-md border border-white/[0.08] bg-white/[0.05] shadow-sm p-2">
+                                <BarChart3 className="text-foreground size-5" />
+                            </div>
+                            <div className="flex flex-col items-start justify-center">
+                                <span className="text-sm font-medium">Pricing</span>
+                                <span className="text-muted-foreground text-xs">Plans & billing</span>
+                            </div>
+                        </Link>
+                    </div>
+                </NavigationMenu>
+                <div className="flex flex-col gap-2">
+                    <Button variant="outline" className="w-full bg-transparent" asChild>
+                        <a href="https://pulse.ciphera.net">
+                            Sign In
+                        </a>
+                    </Button>
+                    <Button className="w-full" asChild>
+                        <a href="https://pulse.ciphera.net">
+                            Get Started
+                        </a>
+                    </Button>
+                </div>
+            </MobileMenu>
+        </header>
+    );
+}
+
+type MobileMenuProps = React.ComponentProps<'div'> & {
+    open: boolean;
+};
+
+function MobileMenu({ open, children, className, ...props }: MobileMenuProps) {
+    if (!open || typeof window === 'undefined') return null;
+
+    return createPortal(
+        <div
+            id="mobile-menu"
+            className={cn(
+                'bg-background/95 supports-[backdrop-filter]:bg-background/50 backdrop-blur-lg',
+                'fixed top-16 right-0 bottom-0 left-0 z-40 flex flex-col overflow-hidden border-y md:hidden',
+            )}
+        >
+            <div
+                data-slot={open ? 'open' : 'closed'}
+                className={cn(
+                    'data-[slot=open]:animate-in data-[slot=open]:zoom-in-95 ease-out',
+                    'size-full p-4',
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        </div>,
+        document.body,
+    );
+}
+
+function ListItem({
+    title,
+    description,
+    icon: Icon,
+    className,
+    href,
+    ...props
+}: React.ComponentProps<typeof NavigationMenuLink> & LinkItem) {
+    return (
+        <NavigationMenuLink className={cn('w-full flex flex-row gap-x-2 data-[active=true]:focus:bg-white/[0.06] data-[active=true]:hover:bg-white/[0.06] data-[active=true]:text-accent-foreground hover:bg-white/[0.06] hover:text-accent-foreground focus:bg-white/[0.06] focus:text-accent-foreground rounded-sm p-2 transition-colors', className)} {...props} asChild>
+            <Link href={href || '#'}>
+                <div className="flex aspect-square size-12 items-center justify-center rounded-md border border-white/[0.08] bg-white/[0.05] shadow-sm p-2">
+                    {Icon ? (
+                        <Icon className="text-foreground size-5" />
+                    ) : null}
+                </div>
+                <div className="flex flex-col items-start justify-center">
+                    <span className="text-sm font-medium">{title}</span>
+                    <span className="text-muted-foreground text-xs">{description}</span>
+                </div>
+            </Link>
+        </NavigationMenuLink>
+    );
+}
+
+function useScroll(threshold: number) {
+    const [scrolled, setScrolled] = React.useState(false);
+
+    const onScroll = React.useCallback(() => {
+        setScrolled(window.scrollY > threshold);
+    }, [threshold]);
+
+    React.useEffect(() => {
+        window.addEventListener('scroll', onScroll);
+        return () => window.removeEventListener('scroll', onScroll);
+    }, [onScroll]);
+
+    React.useEffect(() => {
+        onScroll();
+    }, [onScroll]);
+
+    return scrolled;
+}
diff --git a/components/marketing/PulseFAQ.tsx b/components/marketing/PulseFAQ.tsx
new file mode 100644
index 0000000..1433178
--- /dev/null
+++ b/components/marketing/PulseFAQ.tsx
@@ -0,0 +1,112 @@
+'use client'
+
+import { FAQ } from '@/components/marketing/FAQ'
+
+const categories: Record<string, string> = {
+  general: "General",
+  setup: "Setup",
+  privacy: "Privacy & Compliance",
+  technical: "Technical",
+}
+
+const faqData: Record<string, { question: string; answer: string }[]> = {
+  general: [
+    {
+      question: "What is Pulse?",
+      answer: "Pulse is a privacy-first website analytics platform by Ciphera. It tracks pageviews, unique visitors, referrers, and geographic data without using cookies, fingerprinting, or collecting any personal data. It's a privacy-respecting alternative to Google Analytics.",
+    },
+    {
+      question: "Is Pulse free?",
+      answer: "Yes, Pulse is free for personal websites. We plan to offer a paid Pro tier for teams and high-traffic sites in the future, but the free tier will always be available.",
+    },
+    {
+      question: "Can I migrate from Google Analytics?",
+      answer: "Pulse is not a drop-in replacement for Google Analytics — it's fundamentally different by design. It doesn't track individual users or sessions, so historical GA data can't be imported. However, you can run both side by side during a transition period.",
+    },
+    {
+      question: "Is Pulse open source?",
+      answer: "The Pulse client — dashboard and tracking script — are open source and available on GitHub. You can inspect every line of code that runs on your site and verify our privacy claims.",
+    },
+    {
+      question: "How is Pulse different from Plausible or Fathom?",
+      answer: "Pulse shares the privacy-first philosophy with Plausible and Fathom, but it's built on Swiss infrastructure with Swiss data protection laws. The client — dashboard and tracking script — are open source, and Pulse is part of the Ciphera ecosystem, giving you a unified privacy-first stack.",
+    },
+  ],
+  setup: [
+    {
+      question: "How do I install Pulse?",
+      answer: "Add a single script tag to your site's <head> section. That's it. No npm packages, no build steps, no configuration files. The script is under 2KB gzipped and loads asynchronously.",
+    },
+    {
+      question: "Does Pulse work with my framework?",
+      answer: "Yes. Pulse works with any website or framework: plain HTML, React, Next.js, Vue, Nuxt, Svelte, WordPress, Shopify, and more. If it renders HTML, Pulse works with it.",
+    },
+    {
+      question: "How do I verify Pulse is working?",
+      answer: "After adding the script tag, visit your site and check the Pulse dashboard. You should see your visit appear in real-time within seconds. The dashboard shows a live visitor count and updates every few seconds.",
+    },
+    {
+      question: "Can I track multiple websites?",
+      answer: "Yes. Each website gets its own dashboard. You can add as many sites as you need from the Pulse dashboard by adding the script tag with a different data-domain attribute.",
+    },
+    {
+      question: "Does Pulse slow down my website?",
+      answer: "No. The Pulse script is under 2KB gzipped — about 20x smaller than Google Analytics. It loads asynchronously with the defer attribute, meaning it never blocks page rendering or affects your Core Web Vitals scores.",
+    },
+  ],
+  privacy: [
+    {
+      question: "Do I need a cookie consent banner for Pulse?",
+      answer: "No. Because Pulse doesn't use cookies, fingerprinting, or any form of persistent identifier, it's exempt from ePrivacy cookie consent requirements. You can use Pulse without any consent banner.",
+    },
+    {
+      question: "Is Pulse GDPR compliant?",
+      answer: "Yes, by architecture — not by configuration. Pulse doesn't collect any personal data as defined by GDPR Article 4. There are no data subjects in the dataset, so DSAR requests don't apply. No DPA is required.",
+    },
+    {
+      question: "What happens to IP addresses?",
+      answer: "IP addresses are used only at the network edge for country-level geolocation. They are immediately discarded after the geo lookup — never stored, never logged, never written to disk. We can't retrieve them even if asked.",
+    },
+    {
+      question: "Where is my analytics data stored?",
+      answer: "All data is processed and stored on Swiss infrastructure, protected by the Swiss Federal Act on Data Protection (FADP). Data never leaves Swiss jurisdiction.",
+    },
+    {
+      question: "Can Pulse identify individual users?",
+      answer: "No. Pulse is architecturally incapable of identifying individual users. Each pageview is treated as an independent, anonymous event. There are no user IDs, session IDs, or any form of persistent tracking.",
+    },
+  ],
+  technical: [
+    {
+      question: "How does Pulse count unique visitors without cookies?",
+      answer: "Pulse uses a privacy-safe hashing method that generates a daily rotating identifier from non-personal data points. This allows approximate unique visitor counts without tracking individuals across sessions or days.",
+    },
+    {
+      question: "Does Pulse have an API?",
+      answer: "Yes. Pulse provides a REST API for programmatic access to your analytics data. You can use it to build custom dashboards, integrate with other tools, or export your data.",
+    },
+    {
+      question: "What metrics does Pulse track?",
+      answer: "Pulse tracks pageviews, unique visitors, bounce rate, visit duration, referrer sources, UTM parameters, device type, browser, operating system, and country-level geolocation.",
+    },
+    {
+      question: "Can I export my data?",
+      answer: "Yes. The dashboard includes an export feature that lets you download your analytics data. You can also use the API for automated exports.",
+    },
+    {
+      question: "Does Pulse support custom events?",
+      answer: "Custom event tracking is on our roadmap. Currently, Pulse focuses on pageview analytics. We plan to add lightweight custom event support that maintains our zero-personal-data architecture.",
+    },
+  ],
+}
+
+export default function PulseFAQ() {
+  return (
+    <FAQ
+      title="Frequently Asked Questions"
+      subtitle="Everything you need to know about Pulse"
+      categories={categories}
+      faqData={faqData}
+    />
+  )
+}
diff --git a/components/marketing/mockups/email-report-mockup.tsx b/components/marketing/mockups/email-report-mockup.tsx
new file mode 100644
index 0000000..74fe7bc
--- /dev/null
+++ b/components/marketing/mockups/email-report-mockup.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+export function EmailReportMockup() {
+  return (
+    <div className="relative w-full max-w-[460px] mx-auto">
+      <div className="rounded-xl border border-white/[0.08] bg-neutral-900/90 shadow-2xl overflow-hidden">
+        {/* Pulse logo header */}
+        <div className="px-6 pt-5 pb-3">
+          <div className="flex items-center gap-2.5 mb-3">
+            <svg className="w-5 h-5 text-neutral-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}><path strokeLinecap="round" strokeLinejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2" /></svg>
+            <span className="text-base font-bold text-white">Pulse</span>
+          </div>
+          <div className="h-[3px] bg-brand-orange rounded-full" />
+        </div>
+
+        {/* Report content */}
+        <div className="px-6 pb-5">
+          <div className="rounded-xl bg-neutral-800/50 border border-neutral-700/40 p-5">
+            <h3 className="text-lg font-bold text-white mb-0.5">ciphera.net</h3>
+            <p className="text-xs text-neutral-500 mb-3">Daily summary report &middot; 19 Mar 2026</p>
+
+            <p className="text-sm text-brand-orange font-semibold mb-4">Traffic down 6% compared to yesterday</p>
+
+            {/* Stats grid */}
+            <div className="grid grid-cols-4 gap-2 mb-5">
+              {[
+                { label: 'PAGEVIEWS', value: '323', change: '2%', down: true },
+                { label: 'VISITORS', value: '207', change: '6%', down: true },
+                { label: 'BOUNCE', value: '97%', change: '0%', down: false },
+                { label: 'DURATION', value: '3m 18s', change: '7%', down: false },
+              ].map((stat) => (
+                <div key={stat.label} className="rounded-lg bg-neutral-900/80 border border-neutral-700/30 px-1.5 py-2.5 text-center">
+                  <p className="text-[7px] text-neutral-500 uppercase tracking-wider mb-1">{stat.label}</p>
+                  <p className="text-sm font-bold text-white leading-none mb-1">{stat.value}</p>
+                  <p className={`text-[8px] font-semibold ${stat.down ? 'text-red-400' : 'text-green-400'}`}>
+                    {stat.down ? '\u25BC' : '\u25B2'} {stat.change}
+                  </p>
+                </div>
+              ))}
+            </div>
+
+            {/* Divider */}
+            <div className="border-t border-neutral-700/40 mb-3" />
+
+            {/* Top Pages */}
+            <h4 className="text-[10px] text-brand-orange font-bold uppercase tracking-wider mb-2">Top Pages</h4>
+            <div className="flex items-center justify-between text-[8px] text-neutral-500 uppercase tracking-wider mb-1.5 px-0.5">
+              <span>Page</span>
+              <span>Views</span>
+            </div>
+
+            <div className="space-y-0.5">
+              {[
+                { page: '/', views: 100 },
+                { page: '/products/drop', views: 96 },
+                { page: '/pricing', views: 42 },
+              ].map((row) => (
+                <div key={row.page}>
+                  <div className="flex items-center gap-3">
+                    <div className="relative flex-1 h-[20px]">
+                      <div
+                        className="absolute inset-y-0 left-0 rounded-md bg-brand-orange/20"
+                        style={{ width: `${(row.views / 100) * 75}%` }}
+                      />
+                    </div>
+                    <span className="text-xs text-neutral-400 tabular-nums w-7 text-right shrink-0">{row.views}</span>
+                  </div>
+                  <span className="text-[11px] text-neutral-300 ml-0.5">{row.page}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Schedule indicator */}
+          <div className="flex items-center justify-between mt-3 px-1 text-[10px] text-neutral-500">
+            <span>Delivered every day at 09:00</span>
+            <span className="flex items-center gap-1">
+              <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
+              Sent
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/marketing/mockups/funnel-chart.tsx b/components/marketing/mockups/funnel-chart.tsx
new file mode 100644
index 0000000..a234ad2
--- /dev/null
+++ b/components/marketing/mockups/funnel-chart.tsx
@@ -0,0 +1,935 @@
+"use client";
+
+import { motion, useSpring, useTransform } from "motion/react";
+import {
+  type CSSProperties,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// ─── Utils ───────────────────────────────────────────────────────────────────
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// ─── PatternLines ────────────────────────────────────────────────────────────
+
+export interface PatternLinesProps {
+  id: string;
+  width?: number;
+  height?: number;
+  stroke?: string;
+  strokeWidth?: number;
+  orientation?: ("diagonal" | "horizontal" | "vertical")[];
+  background?: string;
+}
+
+export function PatternLines({
+  id,
+  width = 6,
+  height = 6,
+  stroke = "var(--chart-line-primary)",
+  strokeWidth = 1,
+  orientation = ["diagonal"],
+  background,
+}: PatternLinesProps) {
+  const paths: string[] = [];
+
+  for (const o of orientation) {
+    if (o === "diagonal") {
+      paths.push(`M0,${height}l${width},${-height}`);
+      paths.push(`M${-width / 4},${height / 4}l${width / 2},${-height / 2}`);
+      paths.push(
+        `M${(3 * width) / 4},${height + height / 4}l${width / 2},${-height / 2}`
+      );
+    } else if (o === "horizontal") {
+      paths.push(`M0,${height / 2}l${width},0`);
+    } else if (o === "vertical") {
+      paths.push(`M${width / 2},0l0,${height}`);
+    }
+  }
+
+  return (
+    <pattern
+      id={id}
+      width={width}
+      height={height}
+      patternUnits="userSpaceOnUse"
+    >
+      {background && (
+        <rect width={width} height={height} fill={background} />
+      )}
+      <path
+        d={paths.join(" ")}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="square"
+      />
+    </pattern>
+  );
+}
+
+PatternLines.displayName = "PatternLines";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export interface FunnelGradientStop {
+  offset: string | number;
+  color: string;
+}
+
+export interface FunnelStage {
+  label: string;
+  value: number;
+  displayValue?: string;
+  color?: string;
+  gradient?: FunnelGradientStop[];
+}
+
+export interface FunnelChartProps {
+  data: FunnelStage[];
+  orientation?: "horizontal" | "vertical";
+  color?: string;
+  layers?: number;
+  className?: string;
+  style?: CSSProperties;
+  showPercentage?: boolean;
+  showValues?: boolean;
+  showLabels?: boolean;
+  hoveredIndex?: number | null;
+  onHoverChange?: (index: number | null) => void;
+  formatPercentage?: (pct: number) => string;
+  formatValue?: (value: number) => string;
+  staggerDelay?: number;
+  gap?: number;
+  renderPattern?: (id: string, color: string) => ReactNode;
+  edges?: "curved" | "straight";
+  labelLayout?: "spread" | "grouped";
+  labelOrientation?: "vertical" | "horizontal";
+  labelAlign?: "center" | "start" | "end";
+  grid?:
+    | boolean
+    | {
+        bands?: boolean;
+        bandColor?: string;
+        lines?: boolean;
+        lineColor?: string;
+        lineOpacity?: number;
+        lineWidth?: number;
+      };
+}
+
+// ─── Defaults ────────────────────────────────────────────────────────────────
+
+const fmtPct = (p: number) => `${Math.round(p)}%`;
+const fmtVal = (v: number) => v.toLocaleString("en-US");
+
+const springConfig = { stiffness: 120, damping: 20, mass: 1 };
+const hoverSpring = { stiffness: 300, damping: 24 };
+
+// ─── SVG Helpers ─────────────────────────────────────────────────────────────
+
+function hSegmentPath(
+  normStart: number,
+  normEnd: number,
+  segW: number,
+  H: number,
+  layerScale: number,
+  straight = false
+) {
+  const my = H / 2;
+  const h0 = normStart * H * 0.44 * layerScale;
+  const h1 = normEnd * H * 0.44 * layerScale;
+
+  if (straight) {
+    return `M 0 ${my - h0} L ${segW} ${my - h1} L ${segW} ${my + h1} L 0 ${my + h0} Z`;
+  }
+
+  const cx = segW * 0.55;
+  const top = `M 0 ${my - h0} C ${cx} ${my - h0}, ${segW - cx} ${my - h1}, ${segW} ${my - h1}`;
+  const bot = `L ${segW} ${my + h1} C ${segW - cx} ${my + h1}, ${cx} ${my + h0}, 0 ${my + h0}`;
+  return `${top} ${bot} Z`;
+}
+
+function vSegmentPath(
+  normStart: number,
+  normEnd: number,
+  segH: number,
+  W: number,
+  layerScale: number,
+  straight = false
+) {
+  const mx = W / 2;
+  const w0 = normStart * W * 0.44 * layerScale;
+  const w1 = normEnd * W * 0.44 * layerScale;
+
+  if (straight) {
+    return `M ${mx - w0} 0 L ${mx - w1} ${segH} L ${mx + w1} ${segH} L ${mx + w0} 0 Z`;
+  }
+
+  const cy = segH * 0.55;
+  const left = `M ${mx - w0} 0 C ${mx - w0} ${cy}, ${mx - w1} ${segH - cy}, ${mx - w1} ${segH}`;
+  const right = `L ${mx + w1} ${segH} C ${mx + w1} ${segH - cy}, ${mx + w0} ${cy}, ${mx + w0} 0`;
+  return `${left} ${right} Z`;
+}
+
+// ─── Animated Ring ───────────────────────────────────────────────────────────
+
+function HRing({
+  d,
+  color,
+  fill,
+  opacity,
+  hovered,
+  ringIndex,
+  totalRings,
+}: {
+  d: string;
+  color: string;
+  fill?: string;
+  opacity: number;
+  hovered: boolean;
+  ringIndex: number;
+  totalRings: number;
+}) {
+  const extraScale = 1 + (ringIndex / Math.max(totalRings - 1, 1)) * 0.12;
+  const ringSpring = {
+    stiffness: 300 - ringIndex * 60,
+    damping: 24 - ringIndex * 3,
+  };
+  const scaleY = useSpring(1, ringSpring);
+
+  useEffect(() => {
+    scaleY.set(hovered ? extraScale : 1);
+  }, [hovered, scaleY, extraScale]);
+
+  return (
+    <motion.path
+      d={d}
+      fill={fill ?? color}
+      opacity={opacity}
+      style={{ scaleY, transformOrigin: "center center" }}
+    />
+  );
+}
+
+function VRing({
+  d,
+  color,
+  fill,
+  opacity,
+  hovered,
+  ringIndex,
+  totalRings,
+}: {
+  d: string;
+  color: string;
+  fill?: string;
+  opacity: number;
+  hovered: boolean;
+  ringIndex: number;
+  totalRings: number;
+}) {
+  const extraScale = 1 + (ringIndex / Math.max(totalRings - 1, 1)) * 0.12;
+  const ringSpring = {
+    stiffness: 300 - ringIndex * 60,
+    damping: 24 - ringIndex * 3,
+  };
+  const scaleX = useSpring(1, ringSpring);
+
+  useEffect(() => {
+    scaleX.set(hovered ? extraScale : 1);
+  }, [hovered, scaleX, extraScale]);
+
+  return (
+    <motion.path
+      d={d}
+      fill={fill ?? color}
+      opacity={opacity}
+      style={{ scaleX, transformOrigin: "center center" }}
+    />
+  );
+}
+
+// ─── Animated Segments ───────────────────────────────────────────────────────
+
+function HSegment({
+  index,
+  normStart,
+  normEnd,
+  segW,
+  fullH,
+  color,
+  layers,
+  staggerDelay,
+  hovered,
+  dimmed,
+  renderPattern,
+  straight,
+  gradientStops,
+}: {
+  index: number;
+  normStart: number;
+  normEnd: number;
+  segW: number;
+  fullH: number;
+  color: string;
+  layers: number;
+  staggerDelay: number;
+  hovered: boolean;
+  dimmed: boolean;
+  renderPattern?: (id: string, color: string) => ReactNode;
+  straight: boolean;
+  gradientStops?: FunnelGradientStop[];
+}) {
+  const patternId = `funnel-h-pattern-${index}`;
+  const gradientId = `funnel-h-grad-${index}`;
+  const growProgress = useSpring(0, springConfig);
+  const entranceScaleX = useTransform(growProgress, [0, 1], [0, 1]);
+  const entranceScaleY = useTransform(growProgress, [0, 1], [0, 1]);
+  const dimOpacity = useSpring(1, hoverSpring);
+
+  useEffect(() => {
+    dimOpacity.set(dimmed ? 0.4 : 1);
+  }, [dimmed, dimOpacity]);
+
+  useEffect(() => {
+    const timeout = setTimeout(
+      () => growProgress.set(1),
+      index * staggerDelay * 1000
+    );
+    return () => clearTimeout(timeout);
+  }, [growProgress, index, staggerDelay]);
+
+  const rings = Array.from({ length: layers }, (_, l) => {
+    const scale = 1 - (l / layers) * 0.35;
+    const opacity = 0.18 + (l / (layers - 1 || 1)) * 0.65;
+    return {
+      d: hSegmentPath(normStart, normEnd, segW, fullH, scale, straight),
+      opacity,
+    };
+  });
+
+  return (
+    <motion.div
+      className="pointer-events-none relative shrink-0 overflow-visible"
+      style={{
+        width: segW,
+        height: fullH,
+        zIndex: hovered ? 10 : 1,
+        opacity: dimOpacity,
+      }}
+    >
+      <motion.div
+        className="absolute inset-0 overflow-visible"
+        style={{
+          scaleX: entranceScaleX,
+          scaleY: entranceScaleY,
+          transformOrigin: "left center",
+        }}
+      >
+        <svg
+          aria-hidden="true"
+          className="absolute inset-0 h-full w-full overflow-visible"
+          preserveAspectRatio="none"
+          role="presentation"
+          viewBox={`0 0 ${segW} ${fullH}`}
+        >
+          <defs>
+            {gradientStops && (
+              <linearGradient id={gradientId} x1="0" x2="1" y1="0" y2="0">
+                {gradientStops.map((stop) => (
+                  <stop
+                    key={`${stop.offset}-${stop.color}`}
+                    offset={
+                      typeof stop.offset === "number"
+                        ? `${stop.offset * 100}%`
+                        : stop.offset
+                    }
+                    stopColor={stop.color}
+                  />
+                ))}
+              </linearGradient>
+            )}
+            {renderPattern?.(patternId, color)}
+          </defs>
+          {rings.map((r, i) => {
+            const isInnermost = i === rings.length - 1;
+            let ringFill: string | undefined;
+            if (isInnermost && renderPattern) {
+              ringFill = `url(#${patternId})`;
+            } else if (isInnermost && gradientStops) {
+              ringFill = `url(#${gradientId})`;
+            }
+            return (
+              <HRing
+                color={color}
+                d={r.d}
+                fill={ringFill}
+                hovered={hovered}
+                key={`h-ring-${r.opacity.toFixed(2)}`}
+                opacity={r.opacity}
+                ringIndex={i}
+                totalRings={layers}
+              />
+            );
+          })}
+        </svg>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+function VSegment({
+  index,
+  normStart,
+  normEnd,
+  segH,
+  fullW,
+  color,
+  layers,
+  staggerDelay,
+  hovered,
+  dimmed,
+  renderPattern,
+  straight,
+  gradientStops,
+}: {
+  index: number;
+  normStart: number;
+  normEnd: number;
+  segH: number;
+  fullW: number;
+  color: string;
+  layers: number;
+  staggerDelay: number;
+  hovered: boolean;
+  dimmed: boolean;
+  renderPattern?: (id: string, color: string) => ReactNode;
+  straight: boolean;
+  gradientStops?: FunnelGradientStop[];
+}) {
+  const patternId = `funnel-v-pattern-${index}`;
+  const gradientId = `funnel-v-grad-${index}`;
+  const growProgress = useSpring(0, springConfig);
+  const entranceScaleY = useTransform(growProgress, [0, 1], [0, 1]);
+  const entranceScaleX = useTransform(growProgress, [0, 1], [0, 1]);
+  const dimOpacity = useSpring(1, hoverSpring);
+
+  useEffect(() => {
+    dimOpacity.set(dimmed ? 0.4 : 1);
+  }, [dimmed, dimOpacity]);
+
+  useEffect(() => {
+    const timeout = setTimeout(
+      () => growProgress.set(1),
+      index * staggerDelay * 1000
+    );
+    return () => clearTimeout(timeout);
+  }, [growProgress, index, staggerDelay]);
+
+  const rings = Array.from({ length: layers }, (_, l) => {
+    const scale = 1 - (l / layers) * 0.35;
+    const opacity = 0.18 + (l / (layers - 1 || 1)) * 0.65;
+    return {
+      d: vSegmentPath(normStart, normEnd, segH, fullW, scale, straight),
+      opacity,
+    };
+  });
+
+  return (
+    <motion.div
+      className="pointer-events-none relative shrink-0 overflow-visible"
+      style={{
+        width: fullW,
+        height: segH,
+        zIndex: hovered ? 10 : 1,
+        opacity: dimOpacity,
+      }}
+    >
+      <motion.div
+        className="absolute inset-0 overflow-visible"
+        style={{
+          scaleY: entranceScaleY,
+          scaleX: entranceScaleX,
+          transformOrigin: "center top",
+        }}
+      >
+        <svg
+          aria-hidden="true"
+          className="absolute inset-0 h-full w-full overflow-visible"
+          preserveAspectRatio="none"
+          role="presentation"
+          viewBox={`0 0 ${fullW} ${segH}`}
+        >
+          <defs>
+            {gradientStops && (
+              <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
+                {gradientStops.map((stop) => (
+                  <stop
+                    key={`${stop.offset}-${stop.color}`}
+                    offset={
+                      typeof stop.offset === "number"
+                        ? `${stop.offset * 100}%`
+                        : stop.offset
+                    }
+                    stopColor={stop.color}
+                  />
+                ))}
+              </linearGradient>
+            )}
+            {renderPattern?.(patternId, color)}
+          </defs>
+          {rings.map((r, i) => {
+            const isInnermost = i === rings.length - 1;
+            let ringFill: string | undefined;
+            if (isInnermost && renderPattern) {
+              ringFill = `url(#${patternId})`;
+            } else if (isInnermost && gradientStops) {
+              ringFill = `url(#${gradientId})`;
+            }
+            return (
+              <VRing
+                color={color}
+                d={r.d}
+                fill={ringFill}
+                hovered={hovered}
+                key={`v-ring-${r.opacity.toFixed(2)}`}
+                opacity={r.opacity}
+                ringIndex={i}
+                totalRings={layers}
+              />
+            );
+          })}
+        </svg>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+// ─── Label Overlay ───────────────────────────────────────────────────────────
+
+function SegmentLabel({
+  stage,
+  pct,
+  isHorizontal,
+  showValues,
+  showPercentage,
+  showLabels,
+  formatPercentage,
+  formatValue,
+  index,
+  staggerDelay,
+  layout = "spread",
+  orientation,
+  align = "center",
+}: {
+  stage: FunnelStage;
+  pct: number;
+  isHorizontal: boolean;
+  showValues: boolean;
+  showPercentage: boolean;
+  showLabels: boolean;
+  formatPercentage: (p: number) => string;
+  formatValue: (v: number) => string;
+  index: number;
+  staggerDelay: number;
+  layout?: "spread" | "grouped";
+  orientation?: "vertical" | "horizontal";
+  align?: "center" | "start" | "end";
+}) {
+  const display = stage.displayValue ?? formatValue(stage.value);
+
+  const valueEl = showValues && (
+    <span className="whitespace-nowrap font-semibold text-foreground text-sm">
+      {display}
+    </span>
+  );
+  const pctEl = showPercentage && (
+    <span className="rounded-full bg-foreground px-3 py-1 font-bold text-background text-xs shadow-sm">
+      {formatPercentage(pct)}
+    </span>
+  );
+  const labelEl = showLabels && (
+    <span className="whitespace-nowrap font-medium text-muted-foreground text-xs">
+      {stage.label}
+    </span>
+  );
+
+  if (layout === "spread") {
+    return (
+      <motion.div
+        animate={{ opacity: 1 }}
+        className={cn(
+          "absolute inset-0 flex",
+          isHorizontal ? "flex-col items-center" : "flex-row items-center"
+        )}
+        initial={{ opacity: 0 }}
+        transition={{
+          delay: index * staggerDelay + 0.25,
+          duration: 0.35,
+          ease: "easeOut",
+        }}
+      >
+        {isHorizontal ? (
+          <>
+            <div className="flex h-[16%] items-end justify-center pb-1">
+              {valueEl}
+            </div>
+            <div className="flex flex-1 items-center justify-center">
+              {pctEl}
+            </div>
+            <div className="flex h-[16%] items-start justify-center pt-1">
+              {labelEl}
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="flex w-[22%] items-center justify-end pr-2">
+              {valueEl}
+            </div>
+            <div className="flex flex-1 items-center justify-center">
+              {pctEl}
+            </div>
+            <div className="flex w-[22%] items-center justify-start pl-2">
+              {labelEl}
+            </div>
+          </>
+        )}
+      </motion.div>
+    );
+  }
+
+  // Grouped layout
+  const resolvedOrientation =
+    orientation ?? (isHorizontal ? "vertical" : "horizontal");
+  const isVerticalStack = resolvedOrientation === "vertical";
+
+  const justifyMap = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+  } as const;
+  const itemsMap = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+  } as const;
+
+  return (
+    <motion.div
+      animate={{ opacity: 1 }}
+      className={cn(
+        "absolute inset-0 flex",
+        isHorizontal
+          ? cn("flex-col items-center", justifyMap[align])
+          : cn("flex-row items-center", justifyMap[align])
+      )}
+      initial={{ opacity: 0 }}
+      style={{
+        padding: isHorizontal ? "8% 0" : "0 8%",
+      }}
+      transition={{
+        delay: index * staggerDelay + 0.25,
+        duration: 0.35,
+        ease: "easeOut",
+      }}
+    >
+      <div
+        className={cn(
+          "flex gap-1.5",
+          isVerticalStack
+            ? cn("flex-col", itemsMap[isHorizontal ? "center" : align])
+            : cn("flex-row", itemsMap.center)
+        )}
+      >
+        {valueEl}
+        {pctEl}
+        {labelEl}
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── FunnelChart ─────────────────────────────────────────────────────────────
+
+export function FunnelChart({
+  data,
+  orientation = "horizontal",
+  color = "var(--chart-1)",
+  layers = 3,
+  className,
+  style,
+  showPercentage = true,
+  showValues = true,
+  showLabels = true,
+  hoveredIndex: hoveredIndexProp,
+  onHoverChange,
+  formatPercentage = fmtPct,
+  formatValue = fmtVal,
+  staggerDelay = 0.12,
+  gap = 4,
+  renderPattern,
+  edges = "curved",
+  labelLayout = "spread",
+  labelOrientation,
+  labelAlign = "center",
+  grid: gridProp = false,
+}: FunnelChartProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [sz, setSz] = useState({ w: 0, h: 0 });
+  const [internalHoveredIndex, setInternalHoveredIndex] = useState<
+    number | null
+  >(null);
+
+  const isControlled = hoveredIndexProp !== undefined;
+  const hoveredIndex = isControlled ? hoveredIndexProp : internalHoveredIndex;
+  const setHoveredIndex = useCallback(
+    (index: number | null) => {
+      if (isControlled) {
+        onHoverChange?.(index);
+      } else {
+        setInternalHoveredIndex(index);
+      }
+    },
+    [isControlled, onHoverChange]
+  );
+
+  const measure = useCallback(() => {
+    if (!ref.current) return;
+    const { width: w, height: h } = ref.current.getBoundingClientRect();
+    if (w > 0 && h > 0) setSz({ w, h });
+  }, []);
+
+  useEffect(() => {
+    measure();
+    const ro = new ResizeObserver(measure);
+    if (ref.current) ro.observe(ref.current);
+    return () => ro.disconnect();
+  }, [measure]);
+
+  if (!data.length) return null;
+
+  const first = data[0];
+  if (!first) return null;
+
+  const max = first.value;
+  const n = data.length;
+  const norms = data.map((d) => d.value / max);
+  const horiz = orientation === "horizontal";
+  const { w: W, h: H } = sz;
+
+  const totalGap = gap * (n - 1);
+  const segW = (W - (horiz ? totalGap : 0)) / n;
+  const segH = (H - (horiz ? 0 : totalGap)) / n;
+
+  // Grid config
+  const gridEnabled = gridProp !== false;
+  const gridCfg = typeof gridProp === "object" ? gridProp : {};
+  const showBands = gridEnabled && (gridCfg.bands ?? true);
+  const bandColor = gridCfg.bandColor ?? "var(--color-muted)";
+  const showGridLines = gridEnabled && (gridCfg.lines ?? true);
+  const gridLineColor = gridCfg.lineColor ?? "var(--chart-grid)";
+  const gridLineOpacity = gridCfg.lineOpacity ?? 1;
+  const gridLineWidth = gridCfg.lineWidth ?? 1;
+
+  return (
+    <div
+      className={cn("relative w-full select-none overflow-visible", className)}
+      ref={ref}
+      style={{
+        aspectRatio: horiz ? "2.2 / 1" : "1 / 1.8",
+        ...style,
+      }}
+    >
+      {W > 0 && H > 0 && (
+        <>
+          {/* Grid background bands */}
+          {gridEnabled && (
+            <svg
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 h-full w-full"
+              preserveAspectRatio="none"
+              role="presentation"
+              viewBox={`0 0 ${W} ${H}`}
+            >
+              {showBands &&
+                data.map((stage, i) => {
+                  if (i % 2 !== 0) return null;
+                  if (horiz) {
+                    const x = (segW + gap) * i;
+                    return (
+                      <rect
+                        fill={bandColor}
+                        height={H}
+                        key={`band-${stage.label}`}
+                        width={segW}
+                        x={x}
+                        y={0}
+                      />
+                    );
+                  }
+                  const y = (segH + gap) * i;
+                  return (
+                    <rect
+                      fill={bandColor}
+                      height={segH}
+                      key={`band-${stage.label}`}
+                      width={W}
+                      x={0}
+                      y={y}
+                    />
+                  );
+                })}
+            </svg>
+          )}
+
+          {/* Segments */}
+          <div
+            className={cn(
+              "absolute inset-0 flex overflow-visible",
+              horiz ? "flex-row" : "flex-col"
+            )}
+            style={{ gap }}
+          >
+            {data.map((stage, i) => {
+              const normStart = norms[i] ?? 0;
+              const normEnd = norms[Math.min(i + 1, n - 1)] ?? 0;
+              const firstStop = stage.gradient?.[0];
+              const segColor = firstStop
+                ? firstStop.color
+                : (stage.color ?? color);
+
+              return horiz ? (
+                <HSegment
+                  color={segColor}
+                  dimmed={hoveredIndex !== null && hoveredIndex !== i}
+                  fullH={H}
+                  gradientStops={stage.gradient}
+                  hovered={hoveredIndex === i}
+                  index={i}
+                  key={stage.label}
+                  layers={layers}
+                  normEnd={normEnd}
+                  normStart={normStart}
+                  renderPattern={renderPattern}
+                  segW={segW}
+                  staggerDelay={staggerDelay}
+                  straight={edges === "straight"}
+                />
+              ) : (
+                <VSegment
+                  color={segColor}
+                  dimmed={hoveredIndex !== null && hoveredIndex !== i}
+                  fullW={W}
+                  gradientStops={stage.gradient}
+                  hovered={hoveredIndex === i}
+                  index={i}
+                  key={stage.label}
+                  layers={layers}
+                  normEnd={normEnd}
+                  normStart={normStart}
+                  renderPattern={renderPattern}
+                  segH={segH}
+                  staggerDelay={staggerDelay}
+                  straight={edges === "straight"}
+                />
+              );
+            })}
+          </div>
+
+          {/* Grid lines */}
+          {gridEnabled && showGridLines && (
+            <svg
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 h-full w-full"
+              preserveAspectRatio="none"
+              role="presentation"
+              viewBox={`0 0 ${W} ${H}`}
+            >
+              {Array.from({ length: n - 1 }, (_, i) => {
+                const idx = i + 1;
+                if (horiz) {
+                  const x = segW * idx + gap * i + gap / 2;
+                  return (
+                    <line
+                      key={`grid-${idx}`}
+                      stroke={gridLineColor}
+                      strokeOpacity={gridLineOpacity}
+                      strokeWidth={gridLineWidth}
+                      x1={x}
+                      x2={x}
+                      y1={0}
+                      y2={H}
+                    />
+                  );
+                }
+                const y = segH * idx + gap * i + gap / 2;
+                return (
+                  <line
+                    key={`grid-${idx}`}
+                    stroke={gridLineColor}
+                    strokeOpacity={gridLineOpacity}
+                    strokeWidth={gridLineWidth}
+                    x1={0}
+                    x2={W}
+                    y1={y}
+                    y2={y}
+                  />
+                );
+              })}
+            </svg>
+          )}
+
+          {/* Label overlays — hover triggers */}
+          {data.map((stage, i) => {
+            const pct = (stage.value / max) * 100;
+            const posStyle: CSSProperties = horiz
+              ? { left: (segW + gap) * i, width: segW, top: 0, height: H }
+              : { top: (segH + gap) * i, height: segH, left: 0, width: W };
+            const isDimmed = hoveredIndex !== null && hoveredIndex !== i;
+
+            return (
+              <motion.div
+                animate={{ opacity: isDimmed ? 0.4 : 1 }}
+                className="absolute cursor-pointer"
+                key={`lbl-${stage.label}`}
+                onMouseEnter={() => setHoveredIndex(i)}
+                onMouseLeave={() => setHoveredIndex(null)}
+                style={{ ...posStyle, zIndex: 20 }}
+                transition={{ type: "spring", stiffness: 300, damping: 24 }}
+              >
+                <SegmentLabel
+                  align={labelAlign}
+                  formatPercentage={formatPercentage}
+                  formatValue={formatValue}
+                  index={i}
+                  isHorizontal={horiz}
+                  layout={labelLayout}
+                  orientation={labelOrientation}
+                  pct={pct}
+                  showLabels={showLabels}
+                  showPercentage={showPercentage}
+                  showValues={showValues}
+                  stage={stage}
+                  staggerDelay={staggerDelay}
+                />
+              </motion.div>
+            );
+          })}
+        </>
+      )}
+    </div>
+  );
+}
+
+FunnelChart.displayName = "FunnelChart";
+
+export default FunnelChart;
diff --git a/components/marketing/mockups/funnel-mockup.tsx b/components/marketing/mockups/funnel-mockup.tsx
new file mode 100644
index 0000000..169449e
--- /dev/null
+++ b/components/marketing/mockups/funnel-mockup.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { FunnelChart } from './funnel-chart'
+
+const funnelData = [
+  { label: 'Homepage', value: 1240 },
+  { label: 'Pricing', value: 438 },
+  { label: 'Signup', value: 87 },
+]
+
+export function FunnelMockup() {
+  return (
+    <div className="relative w-full max-w-[600px] mx-auto">
+      <div className="rounded-xl border border-white/[0.08] bg-neutral-900/80 px-10 py-6 shadow-2xl">
+        <h3 className="text-sm font-medium text-white mb-4">Funnel Visualization</h3>
+        <FunnelChart
+          data={funnelData}
+          orientation="vertical"
+          color="var(--chart-1, #FD5E0F)"
+          layers={3}
+          className="mx-auto"
+        />
+        <div className="flex items-center justify-between mt-4 pt-3 border-t border-neutral-800 text-[10px] text-neutral-500">
+          <span>Overall conversion: 7%</span>
+          <span>7-day window</span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/marketing/mockups/modular-script-mockup.tsx b/components/marketing/mockups/modular-script-mockup.tsx
new file mode 100644
index 0000000..4c8425a
--- /dev/null
+++ b/components/marketing/mockups/modular-script-mockup.tsx
@@ -0,0 +1,119 @@
+'use client'
+
+function Toggle({ on = true }: { on?: boolean }) {
+  return (
+    <div
+      className={`relative w-9 h-5 rounded-full shrink-0 transition-colors ${
+        on ? 'bg-brand-orange' : 'bg-neutral-700'
+      }`}
+    >
+      <div
+        className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${
+          on ? 'translate-x-[18px]' : 'translate-x-0.5'
+        }`}
+      />
+    </div>
+  )
+}
+
+export function ModularScriptMockup() {
+  return (
+    <div className="relative w-full max-w-[460px] mx-auto">
+      <div className="rounded-xl border border-white/[0.08] bg-neutral-900/90 shadow-2xl overflow-hidden px-6 py-5 space-y-5">
+        {/* Features heading */}
+        <h4 className="text-sm font-bold text-white">Features</h4>
+
+        {/* Feature toggles — 2 column grid */}
+        <div className="grid grid-cols-2 gap-2.5">
+          {[
+            { name: 'Scroll depth', desc: 'Track 25 / 50 / 75 / 100%', on: true },
+            { name: '404 detection', desc: 'Auto-detect error pages', on: true },
+            { name: 'Outbound links', desc: 'Track external link clicks', on: true },
+            { name: 'File downloads', desc: 'Track PDF, ZIP, and more', on: true },
+          ].map((feature) => (
+            <div
+              key={feature.name}
+              className="rounded-lg border border-neutral-800 bg-neutral-800/40 px-3.5 py-3 flex items-center justify-between gap-2"
+            >
+              <div className="min-w-0">
+                <p className="text-xs font-semibold text-white leading-tight">{feature.name}</p>
+                <p className="text-[10px] text-neutral-500 leading-tight mt-0.5 truncate">{feature.desc}</p>
+              </div>
+              <Toggle on={feature.on} />
+            </div>
+          ))}
+        </div>
+
+        {/* Frustration tracking — full width, disabled */}
+        <div className="rounded-lg border border-dashed border-neutral-700 bg-neutral-800/20 px-3.5 py-3 flex items-center justify-between gap-2">
+          <div>
+            <p className="text-xs font-semibold text-white leading-tight">Frustration tracking</p>
+            <p className="text-[10px] text-neutral-500 leading-tight mt-0.5">Rage clicks &amp; dead clicks &middot; Loads separate add-on script</p>
+          </div>
+          <Toggle on={false} />
+        </div>
+
+        {/* Visitor identity */}
+        <div>
+          <h4 className="text-sm font-bold text-white mb-1">Visitor identity</h4>
+          <p className="text-[10px] text-neutral-500 mb-3 leading-relaxed">
+            How returning visitors are recognized. Stricter settings increase privacy but may raise unique visitor counts.
+          </p>
+          <div className="flex items-center gap-3">
+            <div>
+              <p className="text-[10px] text-neutral-400 mb-1">Recognition</p>
+              <div className="flex items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-800/60 px-3 py-1.5 text-xs text-white">
+                Across all tabs
+                <svg className="w-3 h-3 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+              </div>
+            </div>
+            <div>
+              <p className="text-[10px] text-neutral-400 mb-1">Reset after</p>
+              <div className="flex items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-800/60 px-3 py-1.5 text-xs text-white">
+                24 hours
+                <svg className="w-3 h-3 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Setup guide */}
+        <div>
+          <div className="flex items-center justify-between mb-2.5">
+            <h4 className="text-sm font-bold text-white">Setup guide</h4>
+            <span className="text-[10px] text-neutral-500">All integrations &rarr;</span>
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            {[
+              { name: 'Next.js', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 fill-current invert"><path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" /></svg> },
+              { name: 'React', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" style={{ fill: '#61DAFB' }}><path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.31 0-.592.068-.846.182a1.993 1.993 0 0 0-.909.916C4.78 3.522 5.1 5.18 6.138 7.11 4.257 8.17 3 9.733 3 11.1c0 2.176 2.714 3.757 6.528 4.025-.172.583-.264 1.197-.264 1.833 0 3.235 2.33 5.862 5.204 5.862.876 0 1.699-.249 2.404-.68l-.766-1.289a3.268 3.268 0 0 1-1.638.44c-1.834 0-3.318-1.786-3.318-3.99 0-.42.05-.828.143-1.218 3.61-.179 6.373-1.664 6.573-3.842.685 1.56 1.057 3.024 1.057 4.168 0 .756-.165 1.344-.5 1.708l1.195 1.164c.694-.74 1.048-1.732 1.048-2.872 0-1.504-.536-3.346-1.487-5.294C20.836 8.794 22 7.482 22 5.862c0-2.393-2.272-4.548-5.122-4.548zM7.632 3.19c.395-.193.893-.29 1.478-.29.873 0 1.928.402 3.083 1.136-1.072 1.096-2.06 2.37-2.907 3.765a21.872 21.872 0 0 0-2.36.488c-.888-1.585-1.253-2.978-1.087-3.84a.91.91 0 0 1 .282-.517c.14-.132.308-.204.511-.204v-.538zm12.736 2.672c0 1.076-.897 2.142-2.347 3.007a22.076 22.076 0 0 0-2.377-3.3c1.225-.857 2.333-1.36 3.228-1.36.268 0 .502.047.706.135.288.124.504.337.605.612.076.207.185.525.185.906zM12 15.9c-2.14 0-4.028-.362-5.49-.943a9.09 9.09 0 0 1-.53-.235C4.949 14.068 4.2 13.27 4.2 12.3c0-1.14 1.268-2.498 3.3-3.39.287.81.626 1.647 1.015 2.494a21.27 21.27 0 0 0 1.534 2.682 20.258 20.258 0 0 0 3.902.057 21.27 21.27 0 0 0 1.535-2.682c.388-.847.727-1.684 1.015-2.494 2.032.892 3.3 2.25 3.3 3.39 0 .97-.75 1.769-1.78 2.422a9.09 9.09 0 0 1-.53.235c-1.462.581-3.35.943-5.49.943z" /></svg> },
+              { name: 'Vue.js', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" style={{ fill: '#4FC08D' }}><path d="M24,1.61H14.06L12,5.16,9.94,1.61H0L12,22.39ZM12,14.08,5.16,2.23H9.59L12,6.41l2.41-4.18h4.43Z" /></svg> },
+              { name: 'Angular', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 fill-current invert"><path d="M16.712 17.711H7.288l-1.204 2.916L12 24l5.916-3.373-1.204-2.916ZM14.692 0l7.832 16.855.814-12.856L14.692 0ZM9.308 0 .662 3.999l.814 12.856L9.308 0Zm-.405 13.93h6.198L12 6.396 8.903 13.93Z" /></svg> },
+              { name: 'Svelte', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" style={{ fill: '#FF3E00' }}><path d="M20.68 3.17a7.3 7.3 0 0 0-9.8-2.1L6.17 4.38A5.81 5.81 0 0 0 3.5 8.29a6 6 0 0 0 .62 3.77 5.7 5.7 0 0 0-.86 2.13 6.14 6.14 0 0 0 1.06 4.64 7.3 7.3 0 0 0 9.8 2.1l4.71-3.31a5.81 5.81 0 0 0 2.67-3.91 6 6 0 0 0-.62-3.77 5.7 5.7 0 0 0 .86-2.13 6.14 6.14 0 0 0-1.06-4.64z" /></svg> },
+              { name: 'Nuxt', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" style={{ fill: '#00DC82' }}><path d="M13.464 20.48H2.182a1.49 1.49 0 0 1-1.288-.746 1.49 1.49 0 0 1 0-1.49L7.537 6.584a1.49 1.49 0 0 1 2.576 0l1.635 2.835.002.004 3.005 5.21a.4.4 0 0 1-.345.597H8.862a.4.4 0 0 0-.346.598l2.158 3.749a.4.4 0 0 0 .693 0l5.78-10.028a.4.4 0 0 1 .693 0l6.287 10.903a.4.4 0 0 1-.347.598h-3.49" /></svg> },
+              { name: 'Remix', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 fill-current invert"><path d="M21.511 18.508c.216 2.773.216 4.073.216 5.492H15.31c0-.309.006-.592.011-.878.018-.892.036-1.821-.109-3.698-.19-2.747-1.374-3.358-3.55-3.358H1.574v-5h10.396c2.748 0 4.122-.835 4.122-3.049 0-1.946-1.374-3.125-4.122-3.125H1.573V0h11.541c6.221 0 9.313 2.938 9.313 7.632 0 3.511-2.176 5.8-5.114 6.182 2.48.497 3.93 1.909 4.198 4.694ZM1.573 24v-3.727h6.784c1.133 0 1.379.84 1.379 1.342V24Z" /></svg> },
+              { name: 'Astro', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" style={{ fill: '#BC52EE' }}><path d="M8.358 20.162c-1.186-1.07-1.532-3.316-1.038-4.944.71 1.12 1.74 1.846 2.9 2.13 1.79.438 3.638.423 5.39-.152.198-.065.384-.156.6-.246-.032.846-.241 1.62-.72 2.313-.717 1.04-1.722 1.627-2.945 1.795-1.414.194-2.697-.126-3.886-1.048-.107-.088-.2-.191-.3-.29v.442Z" /></svg> },
+            ].map((fw) => (
+              <span
+                key={fw.name}
+                className="flex items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-800/60 px-2.5 py-1.5 text-[10px] text-neutral-300"
+              >
+                {fw.icon}
+                {fw.name}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        {/* Verified status */}
+        <div className="flex items-center gap-2 pt-1">
+          <span className="flex items-center gap-1.5 rounded-lg border border-green-500/20 bg-green-500/5 px-2.5 py-1 text-[10px] text-green-400 font-medium">
+            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg>
+            Verified
+          </span>
+          <span className="text-[10px] text-neutral-500">Your site is sending data correctly.</span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/marketing/mockups/pulse-features-carousel.tsx b/components/marketing/mockups/pulse-features-carousel.tsx
new file mode 100644
index 0000000..be2def2
--- /dev/null
+++ b/components/marketing/mockups/pulse-features-carousel.tsx
@@ -0,0 +1,544 @@
+'use client'
+
+import { useState, useEffect, useCallback, useMemo, type CSSProperties } from 'react'
+import { createMap } from 'svg-dotted-map'
+import {
+  Files,
+  ArrowSquareOut,
+  MapPin,
+  Monitor,
+  Clock,
+  Globe,
+  GoogleLogo,
+  XLogo,
+  GithubLogo,
+  YoutubeLogo,
+  RedditLogo,
+  Link,
+} from '@phosphor-icons/react'
+
+// ─── Dotted Map Setup (module-level, computed once) ──────────────────────────
+
+const MAP_WIDTH = 150
+const MAP_HEIGHT = 68
+const DOT_RADIUS = 0.25
+
+const { points: MAP_POINTS, addMarkers } = createMap({
+  width: MAP_WIDTH,
+  height: MAP_HEIGHT,
+  mapSamples: 8000,
+})
+
+const _stagger = (() => {
+  const sorted = [...MAP_POINTS].sort((a, b) => a.y - b.y || a.x - b.x)
+  const rowMap = new Map<number, number>()
+  let step = 0
+  let prevY = Number.NaN
+  let prevXInRow = Number.NaN
+
+  for (const p of sorted) {
+    if (p.y !== prevY) {
+      prevY = p.y
+      prevXInRow = Number.NaN
+      if (!rowMap.has(p.y)) rowMap.set(p.y, rowMap.size)
+    }
+    if (!Number.isNaN(prevXInRow)) {
+      const delta = p.x - prevXInRow
+      if (delta > 0) step = step === 0 ? delta : Math.min(step, delta)
+    }
+    prevXInRow = p.x
+  }
+
+  return { xStep: step || 1, yToRowIndex: rowMap }
+})()
+
+const BASE_DOTS_PATH = (() => {
+  const r = DOT_RADIUS
+  const d = r * 2
+  const parts: string[] = []
+  for (const point of MAP_POINTS) {
+    const rowIndex = _stagger.yToRowIndex.get(point.y) ?? 0
+    const offsetX = rowIndex % 2 === 1 ? _stagger.xStep / 2 : 0
+    const cx = point.x + offsetX
+    const cy = point.y
+    parts.push(`M${cx - r},${cy}a${r},${r} 0 1,0 ${d},0a${r},${r} 0 1,0 ${-d},0`)
+  }
+  return parts.join('')
+})()
+
+// Country centroids for marker placement (subset)
+const COUNTRY_CENTROIDS: Record<string, { lat: number; lng: number }> = {
+  CH: { lat: 46.8, lng: 8.2 },
+  DE: { lat: 51.2, lng: 10.4 },
+  US: { lat: 37.1, lng: -95.7 },
+  GB: { lat: 55.4, lng: -3.4 },
+  FR: { lat: 46.2, lng: 2.2 },
+  IN: { lat: 20.6, lng: 78.9 },
+  JP: { lat: 36.2, lng: 138.3 },
+  AU: { lat: -25.3, lng: 133.8 },
+  BR: { lat: -14.2, lng: -51.9 },
+  CA: { lat: 56.1, lng: -106.3 },
+}
+
+// ─── Bar Row (shared by Pages, Referrers, Technology) ────────────────────────
+
+function BarRow({
+  label,
+  value,
+  maxValue,
+  icon,
+}: {
+  label: string
+  value: number
+  maxValue: number
+  icon?: React.ReactNode
+}) {
+  const pct = (value / maxValue) * 100
+  return (
+    <div className="flex items-center gap-3">
+      <div className="relative flex-1 h-[30px] flex items-center">
+        <div
+          className="absolute inset-y-0 left-0 rounded-md bg-brand-orange/25"
+          style={{ width: `${pct}%` }}
+        />
+        <div className="relative z-10 flex items-center gap-2 pl-2.5">
+          {icon && <span className="w-4 h-4 flex items-center justify-center shrink-0">{icon}</span>}
+          <span className="text-xs text-white font-medium truncate">{label}</span>
+        </div>
+      </div>
+      <span className="text-xs text-neutral-400 tabular-nums w-8 text-right shrink-0">{value}</span>
+    </div>
+  )
+}
+
+// ─── Card 1: Pages ───────────────────────────────────────────────────────────
+
+function PagesCard() {
+  const data = [
+    { label: '/', value: 142 },
+    { label: '/products/drop', value: 68 },
+    { label: '/pricing', value: 31 },
+    { label: '/blog', value: 24 },
+    { label: '/about', value: 12 },
+    { label: '/products/pulse', value: 9 },
+  ]
+  const max = data[0].value
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Files className="w-4 h-4 text-neutral-400" weight="bold" />
+          <h4 className="text-sm font-bold text-white">Pages</h4>
+        </div>
+        <div className="flex items-center gap-3 text-[10px]">
+          <span className="text-white border-b border-brand-orange pb-0.5">Top Pages</span>
+          <span className="text-neutral-500">Entry</span>
+          <span className="text-neutral-500">Exit</span>
+        </div>
+      </div>
+      <div className="space-y-1.5">
+        {data.map((d) => (
+          <BarRow key={d.label} label={d.label} value={d.value} maxValue={max} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ─── Card 2: Referrers ───────────────────────────────────────────────────────
+
+function getReferrerIcon(name: string, favicon?: string) {
+  // Use Google Favicon API for sites with domains (like real Pulse)
+  if (favicon) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img src={favicon} alt="" width={16} height={16} className="w-4 h-4 rounded object-contain" />
+    )
+  }
+  const lower = name.toLowerCase()
+  if (lower === 'direct') return <Globe className="w-4 h-4 text-neutral-400" />
+  if (lower.includes('google')) return <GoogleLogo className="w-4 h-4 text-blue-500" />
+  if (lower.includes('twitter') || lower.includes('x')) return <XLogo className="w-4 h-4 text-neutral-200" />
+  if (lower.includes('github')) return <GithubLogo className="w-4 h-4 text-neutral-200" />
+  if (lower.includes('youtube')) return <YoutubeLogo className="w-4 h-4 text-red-500" />
+  if (lower.includes('reddit')) return <RedditLogo className="w-4 h-4 text-orange-500" />
+  if (lower.includes('hacker') || lower.includes('hn')) return <Link className="w-4 h-4 text-orange-400" />
+  return <Globe className="w-4 h-4 text-neutral-400" />
+}
+
+const FAVICON_URL = 'https://www.google.com/s2/favicons'
+
+function ReferrersCard() {
+  const data = [
+    { label: 'Direct', value: 186 },
+    { label: 'Google', value: 94, domain: 'google.com' },
+    { label: 'Twitter / X', value: 47 },
+    { label: 'GitHub', value: 32, domain: 'github.com' },
+    { label: 'Hacker News', value: 18, domain: 'news.ycombinator.com' },
+    { label: 'Reddit', value: 11, domain: 'reddit.com' },
+  ]
+  const max = data[0].value
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <ArrowSquareOut className="w-4 h-4 text-neutral-400" weight="bold" />
+        <h4 className="text-sm font-bold text-white">Referrers</h4>
+      </div>
+      <div className="space-y-1.5">
+        {data.map((d) => (
+          <BarRow
+            key={d.label}
+            label={d.label}
+            value={d.value}
+            maxValue={max}
+            icon={getReferrerIcon(
+              d.label,
+              'domain' in d ? `${FAVICON_URL}?domain=${d.domain}&sz=32` : undefined
+            )}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ─── Card 3: Locations (Real Dotted Map) ─────────────────────────────────────
+
+function LocationsCard() {
+  const mockData = [
+    { country: 'CH', pageviews: 320 },
+    { country: 'US', pageviews: 186 },
+    { country: 'DE', pageviews: 142 },
+    { country: 'GB', pageviews: 78 },
+    { country: 'FR', pageviews: 54 },
+    { country: 'IN', pageviews: 38 },
+    { country: 'JP', pageviews: 22 },
+    { country: 'AU', pageviews: 16 },
+    { country: 'BR', pageviews: 12 },
+    { country: 'CA', pageviews: 28 },
+  ]
+
+  const markerData = useMemo(() => {
+    const max = Math.max(...mockData.map((d) => d.pageviews))
+    return mockData
+      .filter((d) => COUNTRY_CENTROIDS[d.country])
+      .map((d) => ({
+        lat: COUNTRY_CENTROIDS[d.country].lat,
+        lng: COUNTRY_CENTROIDS[d.country].lng,
+        size: 0.4 + (d.pageviews / max) * 0.8,
+      }))
+  }, [])
+
+  const processedMarkers = useMemo(() => addMarkers(markerData), [markerData])
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <MapPin className="w-4 h-4 text-neutral-400" weight="bold" />
+          <h4 className="text-sm font-bold text-white">Locations</h4>
+        </div>
+        <div className="flex items-center gap-3 text-[10px]">
+          <span className="text-white border-b border-brand-orange pb-0.5">Map</span>
+          <span className="text-neutral-500">Countries</span>
+          <span className="text-neutral-500">Regions</span>
+          <span className="text-neutral-500">Cities</span>
+        </div>
+      </div>
+      <div className="relative w-full aspect-[2.2/1] flex items-center justify-center">
+        <svg
+          viewBox={`0 0 ${MAP_WIDTH} ${MAP_HEIGHT}`}
+          className="text-neutral-500 w-full h-full"
+        >
+          <defs>
+            <filter id="mockup-marker-glow" x="-50%" y="-50%" width="200%" height="200%">
+              <feGaussianBlur in="SourceGraphic" stdDeviation="0.8" result="blur" />
+              <feColorMatrix
+                in="blur"
+                type="matrix"
+                values="1 0 0 0 0  0 0.4 0 0 0  0 0 0 0 0  0 0 0 0.6 0"
+              />
+              <feMerge>
+                <feMergeNode />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+          <path d={BASE_DOTS_PATH} fill="currentColor" />
+          {processedMarkers.map((marker, index) => {
+            const rowIndex = _stagger.yToRowIndex.get(marker.y) ?? 0
+            const offsetX = rowIndex % 2 === 1 ? _stagger.xStep / 2 : 0
+            const cx = marker.x + offsetX
+            const cy = marker.y
+            return (
+              <circle
+                key={`marker-${index}`}
+                cx={cx}
+                cy={cy}
+                r={marker.size ?? DOT_RADIUS}
+                fill="#FD5E0F"
+                filter="url(#mockup-marker-glow)"
+              />
+            )
+          })}
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+// ─── Card 4: Technology ──────────────────────────────────────────────────────
+
+const BROWSER_ICONS: Record<string, string> = {
+  Chrome: '/icons/browsers/chrome.svg',
+  Safari: '/icons/browsers/safari.svg',
+  Firefox: '/icons/browsers/firefox.svg',
+  Edge: '/icons/browsers/edge.svg',
+  Arc: '/icons/browsers/arc.png',
+  Opera: '/icons/browsers/opera.svg',
+}
+
+function TechnologyCard() {
+  const data = [
+    { label: 'Chrome', value: 412 },
+    { label: 'Safari', value: 189 },
+    { label: 'Firefox', value: 76 },
+    { label: 'Edge', value: 34 },
+    { label: 'Arc', value: 18 },
+    { label: 'Opera', value: 7 },
+  ]
+  const max = data[0].value
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Monitor className="w-4 h-4 text-neutral-400" weight="bold" />
+          <h4 className="text-sm font-bold text-white">Technology</h4>
+        </div>
+        <div className="flex items-center gap-3 text-[10px]">
+          <span className="text-white border-b border-brand-orange pb-0.5">Browsers</span>
+          <span className="text-neutral-500">OS</span>
+          <span className="text-neutral-500">Devices</span>
+          <span className="text-neutral-500">Screens</span>
+        </div>
+      </div>
+      <div className="space-y-1.5">
+        {data.map((d) => (
+          <BarRow
+            key={d.label}
+            label={d.label}
+            value={d.value}
+            maxValue={max}
+            icon={
+              BROWSER_ICONS[d.label] ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={BROWSER_ICONS[d.label]} alt={d.label} width={16} height={16} className="w-4 h-4" />
+              ) : undefined
+            }
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ─── Card 5: Peak Hours (Exact Pulse Heatmap) ────────────────────────────────
+
+const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+const BUCKETS = 12
+const BUCKET_LABELS: Record<number, string> = { 0: '00:00', 3: '06:00', 6: '12:00', 9: '18:00' }
+
+const HIGHLIGHT_COLORS = [
+  'transparent',
+  'rgba(253,94,15,0.15)',
+  'rgba(253,94,15,0.35)',
+  'rgba(253,94,15,0.60)',
+  'rgba(253,94,15,0.82)',
+  '#FD5E0F',
+]
+
+// Pre-computed mock heatmap grid[day][bucket] with raw values
+const MOCK_GRID = [
+  [0, 0, 12, 28, 32, 45, 52, 48, 35, 24, 8, 0],   // Mon
+  [0, 0, 8, 22, 38, 50, 58, 46, 40, 28, 12, 4],    // Tue
+  [0, 0, 6, 18, 26, 42, 48, 56, 38, 22, 10, 0],    // Wed
+  [0, 4, 10, 24, 42, 62, 86, 68, 44, 26, 12, 6],   // Thu
+  [0, 6, 16, 34, 44, 58, 64, 48, 42, 28, 14, 0],   // Fri
+  [4, 6, 8, 18, 22, 24, 26, 22, 32, 36, 20, 8],    // Sat
+  [6, 4, 6, 10, 16, 20, 22, 14, 18, 24, 16, 8],    // Sun
+]
+
+function getHighlightColor(value: number, max: number): string {
+  if (value === 0) return HIGHLIGHT_COLORS[0]
+  if (value === max) return HIGHLIGHT_COLORS[5]
+  const ratio = value / max
+  if (ratio <= 0.25) return HIGHLIGHT_COLORS[1]
+  if (ratio <= 0.50) return HIGHLIGHT_COLORS[2]
+  if (ratio <= 0.75) return HIGHLIGHT_COLORS[3]
+  return HIGHLIGHT_COLORS[4]
+}
+
+function PeakHoursCard() {
+  const max = Math.max(...MOCK_GRID.flat())
+
+  // Find best time
+  let bestDay = 0
+  let bestBucket = 0
+  let bestVal = 0
+  for (let d = 0; d < 7; d++) {
+    for (let b = 0; b < BUCKETS; b++) {
+      if (MOCK_GRID[d][b] > bestVal) {
+        bestVal = MOCK_GRID[d][b]
+        bestDay = d
+        bestBucket = b
+      }
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between mb-1">
+        <div className="flex items-center gap-2">
+          <Clock className="w-4 h-4 text-neutral-400" weight="bold" />
+          <h4 className="text-sm font-bold text-white">Peak Hours</h4>
+        </div>
+      </div>
+      <p className="text-[10px] text-neutral-500 mb-2">When your visitors are most active</p>
+
+      <div className="flex flex-col gap-[5px]">
+        {MOCK_GRID.map((buckets, dayIdx) => (
+          <div key={dayIdx} className="flex items-center gap-1.5">
+            <span className="text-[11px] text-neutral-500 w-7 shrink-0 text-right leading-none">
+              {DAYS[dayIdx]}
+            </span>
+            <div
+              className="flex-1"
+              style={{
+                display: 'grid',
+                gridTemplateColumns: `repeat(${BUCKETS}, 1fr)`,
+                gap: '5px',
+              }}
+            >
+              {buckets.map((value, bucket) => {
+                const isBestCell = bestDay === dayIdx && bestBucket === bucket
+                return (
+                  <div
+                    key={bucket}
+                    className={`aspect-square w-full rounded-[4px] border border-neutral-800 ${
+                      isBestCell ? 'ring-1 ring-brand-orange/40' : ''
+                    }`}
+                    style={{
+                      backgroundColor: getHighlightColor(value, max),
+                    } as CSSProperties}
+                  />
+                )
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Hour axis labels */}
+      <div className="flex items-center gap-1.5">
+        <span className="w-7 shrink-0" />
+        <div className="flex-1 relative h-3">
+          {Object.entries(BUCKET_LABELS).map(([b, label]) => (
+            <span
+              key={b}
+              className="absolute text-[10px] text-neutral-600 -translate-x-1/2"
+              style={{ left: `${(Number(b) / BUCKETS) * 100}%` }}
+            >
+              {label}
+            </span>
+          ))}
+          <span
+            className="absolute text-[10px] text-neutral-600 -translate-x-full"
+            style={{ left: '100%' }}
+          >
+            24:00
+          </span>
+        </div>
+      </div>
+
+      {/* Intensity legend */}
+      <div className="flex items-center justify-end gap-1.5 mt-1">
+        <span className="text-[10px] text-neutral-500">Less</span>
+        {HIGHLIGHT_COLORS.map((color, i) => (
+          <div
+            key={i}
+            className="w-[10px] h-[10px] rounded-[2px] border border-neutral-800"
+            style={{ backgroundColor: color }}
+          />
+        ))}
+        <span className="text-[10px] text-neutral-500">More</span>
+      </div>
+
+      <p className="text-[10px] text-neutral-400 text-center mt-1">
+        Your busiest time is{' '}
+        <span className="text-brand-orange font-medium">
+          {['Mondays', 'Tuesdays', 'Wednesdays', 'Thursdays', 'Fridays', 'Saturdays', 'Sundays'][bestDay]} at {String(bestBucket * 2).padStart(2, '0')}:00
+        </span>
+      </p>
+    </div>
+  )
+}
+
+// ─── Carousel ────────────────────────────────────────────────────────────────
+
+const cards = [
+  { id: 'pages', Component: PagesCard, title: 'Top Pages' },
+  { id: 'referrers', Component: ReferrersCard, title: 'Referrers' },
+  { id: 'locations', Component: LocationsCard, title: 'Locations' },
+  { id: 'technology', Component: TechnologyCard, title: 'Technology' },
+  { id: 'peak-hours', Component: PeakHoursCard, title: 'Peak Hours' },
+]
+
+export function PulseFeaturesCarousel() {
+  const [active, setActive] = useState(0)
+  const [paused, setPaused] = useState(false)
+
+  const next = useCallback(() => {
+    setActive((prev) => (prev + 1) % cards.length)
+  }, [])
+
+  useEffect(() => {
+    if (paused) return
+    const interval = setInterval(next, 4000)
+    return () => clearInterval(interval)
+  }, [paused, next])
+
+  const ActiveComponent = cards[active].Component
+
+  return (
+    <div
+      className="relative w-full max-w-[520px] mx-auto"
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+    >
+      <div className="rounded-xl border border-white/[0.08] bg-neutral-900/80 px-6 py-5 shadow-2xl">
+        <div className="min-h-[280px]">
+          <ActiveComponent />
+        </div>
+      </div>
+
+      {/* Dot indicators */}
+      <div className="flex items-center justify-center gap-2.5 mt-4">
+        {cards.map((card, i) => (
+          <button
+            key={card.id}
+            onClick={() => setActive(i)}
+            className={`h-2 rounded-full transition-all duration-300 ${
+              i === active
+                ? 'w-7 bg-brand-orange'
+                : 'w-2 bg-neutral-600 hover:bg-neutral-500'
+            }`}
+            aria-label={`Show ${card.title}`}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/components/marketing/mockups/pulse-mockup.tsx b/components/marketing/mockups/pulse-mockup.tsx
new file mode 100644
index 0000000..fc834b4
--- /dev/null
+++ b/components/marketing/mockups/pulse-mockup.tsx
@@ -0,0 +1,197 @@
+'use client'
+
+export function PulseMockup() {
+  return (
+    <div className="relative w-full max-w-[440px] mx-auto">
+      <div className="rounded-xl border border-white/[0.08] bg-neutral-900/80 px-5 py-4 shadow-2xl space-y-3">
+        {/* Header row */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div>
+              <h3 className="text-sm font-bold text-white">Ciphera</h3>
+              <p className="text-[9px] text-neutral-500">ciphera.net</p>
+            </div>
+            <div className="flex items-center gap-1.5 bg-green-500/10 border border-green-500/20 rounded-full px-2.5 py-0.5">
+              <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
+              <span className="text-[9px] text-green-400 font-medium">4 current visitors</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <button className="flex items-center gap-1.5 rounded-lg bg-brand-orange px-2.5 py-1 text-[10px] font-medium text-white cursor-default">
+              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              </svg>
+              Export
+            </button>
+            <div className="flex items-center gap-1 rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1 text-[10px] text-neutral-300 cursor-default">
+              Today
+              <svg className="w-2.5 h-2.5 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        {/* Filter button */}
+        <div>
+          <button className="flex items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-800/50 px-2.5 py-1 text-[10px] text-neutral-400 cursor-default">
+            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+            </svg>
+            Filter
+          </button>
+        </div>
+
+        {/* Stats row */}
+        <div className="grid grid-cols-4 gap-2">
+          {/* Unique Visitors — selected/highlighted */}
+          <div className="rounded-lg border border-neutral-700 bg-neutral-800/60 p-2.5 relative">
+            <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-brand-orange rounded-b-lg" />
+            <p className="text-[7px] text-brand-orange font-semibold uppercase tracking-wider">Unique Visitors</p>
+            <div className="flex items-baseline gap-1.5 mt-1">
+              <p className="text-base font-bold text-white leading-none">247</p>
+              <span className="text-[8px] text-red-500 font-medium flex items-center gap-0.5">
+                <svg className="w-2 h-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 14l-7 7m0 0l-7-7" />
+                </svg>
+                12%
+              </span>
+            </div>
+            <p className="text-[8px] text-neutral-500 mt-0.5">vs yesterday</p>
+          </div>
+
+          {/* Total Pageviews */}
+          <div className="rounded-lg border border-neutral-800 bg-neutral-900 p-2.5">
+            <p className="text-[7px] text-neutral-500 font-semibold uppercase tracking-wider">Total Pageviews</p>
+            <div className="flex items-baseline gap-1.5 mt-1">
+              <p className="text-base font-bold text-white leading-none">512</p>
+              <span className="text-[8px] text-red-500 font-medium flex items-center gap-0.5">
+                <svg className="w-2 h-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 14l-7 7m0 0l-7-7" />
+                </svg>
+                23%
+              </span>
+            </div>
+            <p className="text-[8px] text-neutral-500 mt-0.5">vs yesterday</p>
+          </div>
+
+          {/* Bounce Rate */}
+          <div className="rounded-lg border border-neutral-800 bg-neutral-900 p-2.5">
+            <p className="text-[7px] text-neutral-500 font-semibold uppercase tracking-wider">Bounce Rate</p>
+            <div className="flex items-baseline gap-1.5 mt-1">
+              <p className="text-base font-bold text-white leading-none">68%</p>
+              <span className="text-[8px] text-green-500 font-medium flex items-center gap-0.5">
+                <svg className="w-2 h-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 10l7-7m0 0l7 7" />
+                </svg>
+                8%
+              </span>
+            </div>
+            <p className="text-[8px] text-neutral-500 mt-0.5">vs yesterday</p>
+          </div>
+
+          {/* Visit Duration */}
+          <div className="rounded-lg border border-neutral-800 bg-neutral-900 p-2.5">
+            <p className="text-[7px] text-neutral-500 font-semibold uppercase tracking-wider">Visit Duration</p>
+            <div className="flex items-baseline gap-1.5 mt-1">
+              <p className="text-base font-bold text-white leading-none">3m 18s</p>
+              <span className="text-[8px] text-red-500 font-medium flex items-center gap-0.5">
+                <svg className="w-2 h-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 14l-7 7m0 0l-7-7" />
+                </svg>
+                15%
+              </span>
+            </div>
+            <p className="text-[8px] text-neutral-500 mt-0.5">vs yesterday</p>
+          </div>
+        </div>
+
+        {/* Chart area */}
+        <div className="rounded-lg border border-neutral-800 bg-neutral-900 p-3">
+          {/* Chart header */}
+          <div className="flex items-center justify-between mb-3">
+            <span className="text-[10px] text-neutral-300 font-medium">Unique Visitors</span>
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1 rounded-md border border-neutral-700 bg-neutral-800 px-2 py-0.5 text-[9px] text-neutral-300 cursor-default">
+                1 hour
+                <svg className="w-2 h-2 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <div className="w-3 h-3 rounded border border-neutral-700 bg-transparent" />
+                <span className="text-[9px] text-neutral-500">Compare</span>
+                <svg className="w-3 h-3 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                </svg>
+                <svg className="w-3 h-3 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          {/* SVG Chart — step-style like the real dashboard */}
+          <div className="relative h-[120px] w-full">
+            {/* Y-axis labels */}
+            <div className="absolute left-0 top-0 bottom-4 flex flex-col justify-between text-[7px] text-neutral-600 w-5">
+              <span>8</span>
+              <span>6</span>
+              <span>4</span>
+              <span>2</span>
+              <span>0</span>
+            </div>
+
+            {/* Chart */}
+            <svg className="absolute left-6 right-0 top-0 bottom-4" viewBox="0 0 400 100" preserveAspectRatio="none">
+              {/* Grid lines */}
+              <line x1="0" y1="0" x2="400" y2="0" stroke="rgba(255,255,255,0.04)" />
+              <line x1="0" y1="25" x2="400" y2="25" stroke="rgba(255,255,255,0.04)" />
+              <line x1="0" y1="50" x2="400" y2="50" stroke="rgba(255,255,255,0.04)" />
+              <line x1="0" y1="75" x2="400" y2="75" stroke="rgba(255,255,255,0.04)" />
+              <line x1="0" y1="100" x2="400" y2="100" stroke="rgba(255,255,255,0.04)" />
+
+              {/* Area fill — step-style chart */}
+              <path
+                d="M0,62 L45,62 L45,62 L90,62 L90,100 L135,100 L135,100 L160,100 L160,62 L180,62 L180,50 L225,50 L225,25 L270,25 L270,25 L290,25 L290,50 L310,50 L310,62 L340,62 L340,62 L370,62 L370,55 L400,55 L400,100 L0,100 Z"
+                fill="url(#pulseMockupGradient)"
+              />
+
+              {/* Line — step-style */}
+              <path
+                d="M0,62 L45,62 L45,62 L90,62 L90,100 L135,100 L135,100 L160,100 L160,62 L180,62 L180,50 L225,50 L225,25 L270,25 L270,25 L290,25 L290,50 L310,50 L310,62 L340,62 L340,62 L370,62 L370,55 L400,55"
+                fill="none"
+                stroke="#FD5E0F"
+                strokeWidth="2"
+              />
+
+              <defs>
+                <linearGradient id="pulseMockupGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="#FD5E0F" stopOpacity="0.25" />
+                  <stop offset="100%" stopColor="#FD5E0F" stopOpacity="0.02" />
+                </linearGradient>
+              </defs>
+            </svg>
+          </div>
+
+          {/* X-axis labels */}
+          <div className="flex justify-between pl-6 text-[7px] text-neutral-600 mt-0.5">
+            <span>01:00</span>
+            <span>04:00</span>
+            <span>07:00</span>
+            <span>10:00</span>
+            <span>13:00</span>
+            <span>16:00</span>
+            <span>19:00</span>
+          </div>
+        </div>
+
+        {/* Live indicator */}
+        <div className="flex items-center justify-end gap-1.5">
+          <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+          <span className="text-[9px] text-neutral-500">Live · 27 seconds ago</span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/sites/ScriptSetupBlock.tsx b/components/sites/ScriptSetupBlock.tsx
index 339fbfb..6648d27 100644
--- a/components/sites/ScriptSetupBlock.tsx
+++ b/components/sites/ScriptSetupBlock.tsx
@@ -37,6 +37,7 @@ type FeatureKey = (typeof FEATURES)[number]['key'] | 'frustration'
 export interface ScriptSetupBlockSite {
   domain: string
   name?: string
+  script_features?: Record<string, unknown>
 }
 
 interface ScriptSetupBlockProps {
@@ -44,27 +45,39 @@ interface ScriptSetupBlockProps {
   site: ScriptSetupBlockSite
   /** Called when user copies the script (e.g. for analytics). */
   onScriptCopy?: () => void
+  /** Called when features change so the parent can save to backend. */
+  onFeaturesChange?: (features: Record<string, unknown>) => void
   /** Show framework picker. Default true. */
   showFrameworkPicker?: boolean
   /** Optional class for the root wrapper. */
   className?: string
 }
 
+const DEFAULT_FEATURES: Record<FeatureKey, boolean> = {
+  scroll: true,
+  '404': true,
+  outbound: true,
+  downloads: true,
+  frustration: false,
+}
+
 export default function ScriptSetupBlock({
   site,
   onScriptCopy,
+  onFeaturesChange,
   showFrameworkPicker = true,
   className = '',
 }: ScriptSetupBlockProps) {
+  const sf = site.script_features || {}
   const [features, setFeatures] = useState<Record<FeatureKey, boolean>>({
-    scroll: true,
-    '404': true,
-    outbound: true,
-    downloads: true,
-    frustration: false,
+    scroll: sf.scroll != null ? Boolean(sf.scroll) : DEFAULT_FEATURES.scroll,
+    '404': sf['404'] != null ? Boolean(sf['404']) : DEFAULT_FEATURES['404'],
+    outbound: sf.outbound != null ? Boolean(sf.outbound) : DEFAULT_FEATURES.outbound,
+    downloads: sf.downloads != null ? Boolean(sf.downloads) : DEFAULT_FEATURES.downloads,
+    frustration: sf.frustration != null ? Boolean(sf.frustration) : DEFAULT_FEATURES.frustration,
   })
-  const [storage, setStorage] = useState('local')
-  const [ttl, setTtl] = useState('24')
+  const [storage, setStorage] = useState(typeof sf.storage === 'string' ? sf.storage : 'local')
+  const [ttl, setTtl] = useState(typeof sf.ttl === 'string' ? sf.ttl : '24')
   const [framework, setFramework] = useState('')
   const [copied, setCopied] = useState(false)
 
@@ -97,7 +110,11 @@ export default function ScriptSetupBlock({
   }, [scriptSnippet, onScriptCopy])
 
   const toggleFeature = (key: FeatureKey) => {
-    setFeatures((prev) => ({ ...prev, [key]: !prev[key] }))
+    setFeatures((prev) => {
+      const next = { ...prev, [key]: !prev[key] }
+      onFeaturesChange?.({ ...next, storage, ttl })
+      return next
+    })
   }
 
   const selectedIntegration = framework ? getIntegration(framework) : null
@@ -201,7 +218,7 @@ export default function ScriptSetupBlock({
             <Select
               variant="input"
               value={storage}
-              onChange={setStorage}
+              onChange={(v: string) => { setStorage(v); onFeaturesChange?.({ ...features, storage: v, ttl }) }}
               options={STORAGE_OPTIONS}
             />
           </div>
@@ -213,7 +230,7 @@ export default function ScriptSetupBlock({
               <Select
                 variant="input"
                 value={ttl}
-                onChange={setTtl}
+                onChange={(v: string) => { setTtl(v); onFeaturesChange?.({ ...features, storage, ttl: v }) }}
                 options={TTL_OPTIONS}
               />
             </div>
diff --git a/components/ui/area-chart.tsx b/components/ui/area-chart.tsx
new file mode 100644
index 0000000..7fe4fd2
--- /dev/null
+++ b/components/ui/area-chart.tsx
@@ -0,0 +1,2293 @@
+"use client";
+
+import { localPoint } from "@visx/event";
+import { curveMonotoneX } from "@visx/curve";
+import { GridColumns, GridRows } from "@visx/grid";
+import { ParentSize } from "@visx/responsive";
+import { scaleLinear, scaleTime, type scaleBand } from "@visx/scale";
+import { AreaClosed, LinePath } from "@visx/shape";
+import { bisector } from "d3-array";
+import {
+  AnimatePresence,
+  motion,
+  useMotionTemplate,
+  useSpring,
+} from "motion/react";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
+  type SetStateAction,
+} from "react";
+import useMeasure from "react-use-measure";
+import { createPortal } from "react-dom";
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// ─── Utils ───────────────────────────────────────────────────────────────────
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// ─── Chart Context ───────────────────────────────────────────────────────────
+
+// biome-ignore lint/suspicious/noExplicitAny: d3 curve factory type
+type CurveFactory = any;
+
+type ScaleLinearType<Output, _Input = number> = ReturnType<
+  typeof scaleLinear<Output>
+>;
+type ScaleTimeType<Output, _Input = Date | number> = ReturnType<
+  typeof scaleTime<Output>
+>;
+type ScaleBandType<Domain extends { toString(): string }> = ReturnType<
+  typeof scaleBand<Domain>
+>;
+
+export const chartCssVars = {
+  background: "var(--chart-background)",
+  foreground: "var(--chart-foreground)",
+  foregroundMuted: "var(--chart-foreground-muted)",
+  label: "var(--chart-label)",
+  linePrimary: "var(--chart-line-primary)",
+  lineSecondary: "var(--chart-line-secondary)",
+  crosshair: "var(--chart-crosshair)",
+  grid: "var(--chart-grid)",
+  indicatorColor: "var(--chart-indicator-color)",
+  indicatorSecondaryColor: "var(--chart-indicator-secondary-color)",
+  markerBackground: "var(--chart-marker-background)",
+  markerBorder: "var(--chart-marker-border)",
+  markerForeground: "var(--chart-marker-foreground)",
+  badgeBackground: "var(--chart-marker-badge-background)",
+  badgeForeground: "var(--chart-marker-badge-foreground)",
+  segmentBackground: "var(--chart-segment-background)",
+  segmentLine: "var(--chart-segment-line)",
+};
+
+export interface Margin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface TooltipData {
+  point: Record<string, unknown>;
+  index: number;
+  x: number;
+  yPositions: Record<string, number>;
+  xPositions?: Record<string, number>;
+}
+
+export interface LineConfig {
+  dataKey: string;
+  stroke: string;
+  strokeWidth: number;
+}
+
+export interface ChartSelection {
+  startX: number;
+  endX: number;
+  startIndex: number;
+  endIndex: number;
+  active: boolean;
+}
+
+export interface ChartContextValue {
+  data: Record<string, unknown>[];
+  xScale: ScaleTimeType<number, number>;
+  yScale: ScaleLinearType<number, number>;
+  width: number;
+  height: number;
+  innerWidth: number;
+  innerHeight: number;
+  margin: Margin;
+  columnWidth: number;
+  tooltipData: TooltipData | null;
+  setTooltipData: Dispatch<SetStateAction<TooltipData | null>>;
+  containerRef: RefObject<HTMLDivElement | null>;
+  lines: LineConfig[];
+  isLoaded: boolean;
+  animationDuration: number;
+  xAccessor: (d: Record<string, unknown>) => Date;
+  dateLabels: string[];
+  selection?: ChartSelection | null;
+  clearSelection?: () => void;
+  barScale?: ScaleBandType<string>;
+  bandWidth?: number;
+  hoveredBarIndex?: number | null;
+  setHoveredBarIndex?: (index: number | null) => void;
+  barXAccessor?: (d: Record<string, unknown>) => string;
+  orientation?: "vertical" | "horizontal";
+  stacked?: boolean;
+  stackOffsets?: Map<number, Map<string, number>>;
+}
+
+const ChartContext = createContext<ChartContextValue | null>(null);
+
+function ChartProvider({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value: ChartContextValue;
+}) {
+  return (
+    <ChartContext.Provider value={value}>{children}</ChartContext.Provider>
+  );
+}
+
+function useChart(): ChartContextValue {
+  const context = useContext(ChartContext);
+  if (!context) {
+    throw new Error(
+      "useChart must be used within a ChartProvider. " +
+        "Make sure your component is wrapped in <AreaChart>."
+    );
+  }
+  return context;
+}
+
+// ─── useChartInteraction ─────────────────────────────────────────────────────
+
+type ScaleTime = ReturnType<typeof scaleTime<number>>;
+type ScaleLinear = ReturnType<typeof scaleLinear<number>>;
+
+interface UseChartInteractionParams {
+  xScale: ScaleTime;
+  yScale: ScaleLinear;
+  data: Record<string, unknown>[];
+  lines: LineConfig[];
+  margin: Margin;
+  xAccessor: (d: Record<string, unknown>) => Date;
+  bisectDate: (
+    data: Record<string, unknown>[],
+    date: Date,
+    lo: number
+  ) => number;
+  canInteract: boolean;
+}
+
+interface ChartInteractionResult {
+  tooltipData: TooltipData | null;
+  setTooltipData: Dispatch<SetStateAction<TooltipData | null>>;
+  selection: ChartSelection | null;
+  clearSelection: () => void;
+  interactionHandlers: {
+    onMouseMove?: (event: React.MouseEvent<SVGGElement>) => void;
+    onMouseLeave?: () => void;
+    onMouseDown?: (event: React.MouseEvent<SVGGElement>) => void;
+    onMouseUp?: () => void;
+    onTouchStart?: (event: React.TouchEvent<SVGGElement>) => void;
+    onTouchMove?: (event: React.TouchEvent<SVGGElement>) => void;
+    onTouchEnd?: () => void;
+  };
+  interactionStyle: React.CSSProperties;
+}
+
+function useChartInteraction({
+  xScale,
+  yScale,
+  data,
+  lines,
+  margin,
+  xAccessor,
+  bisectDate,
+  canInteract,
+}: UseChartInteractionParams): ChartInteractionResult {
+  const [tooltipData, setTooltipData] = useState<TooltipData | null>(null);
+  const [selection, setSelection] = useState<ChartSelection | null>(null);
+
+  const isDraggingRef = useRef(false);
+  const dragStartXRef = useRef<number>(0);
+
+  const resolveTooltipFromX = useCallback(
+    (pixelX: number): TooltipData | null => {
+      const x0 = xScale.invert(pixelX);
+      const index = bisectDate(data, x0, 1);
+      const d0 = data[index - 1];
+      const d1 = data[index];
+
+      if (!d0) {
+        return null;
+      }
+
+      let d = d0;
+      let finalIndex = index - 1;
+      if (d1) {
+        const d0Time = xAccessor(d0).getTime();
+        const d1Time = xAccessor(d1).getTime();
+        if (x0.getTime() - d0Time > d1Time - x0.getTime()) {
+          d = d1;
+          finalIndex = index;
+        }
+      }
+
+      const yPositions: Record<string, number> = {};
+      for (const line of lines) {
+        const value = d[line.dataKey];
+        if (typeof value === "number") {
+          yPositions[line.dataKey] = yScale(value) ?? 0;
+        }
+      }
+
+      return {
+        point: d,
+        index: finalIndex,
+        x: xScale(xAccessor(d)) ?? 0,
+        yPositions,
+      };
+    },
+    [xScale, yScale, data, lines, xAccessor, bisectDate]
+  );
+
+  const resolveIndexFromX = useCallback(
+    (pixelX: number): number => {
+      const x0 = xScale.invert(pixelX);
+      const index = bisectDate(data, x0, 1);
+      const d0 = data[index - 1];
+      const d1 = data[index];
+      if (!d0) {
+        return 0;
+      }
+      if (d1) {
+        const d0Time = xAccessor(d0).getTime();
+        const d1Time = xAccessor(d1).getTime();
+        if (x0.getTime() - d0Time > d1Time - x0.getTime()) {
+          return index;
+        }
+      }
+      return index - 1;
+    },
+    [xScale, data, xAccessor, bisectDate]
+  );
+
+  const getChartX = useCallback(
+    (
+      event: React.MouseEvent<SVGGElement> | React.TouchEvent<SVGGElement>,
+      touchIndex = 0
+    ): number | null => {
+      let point: { x: number; y: number } | null = null;
+
+      if ("touches" in event) {
+        const touch = event.touches[touchIndex];
+        if (!touch) {
+          return null;
+        }
+        const svg = event.currentTarget.ownerSVGElement;
+        if (!svg) {
+          return null;
+        }
+        point = localPoint(svg, touch as unknown as MouseEvent);
+      } else {
+        point = localPoint(event);
+      }
+
+      if (!point) {
+        return null;
+      }
+      return point.x - margin.left;
+    },
+    [margin.left]
+  );
+
+  const handleMouseMove = useCallback(
+    (event: React.MouseEvent<SVGGElement>) => {
+      const chartX = getChartX(event);
+      if (chartX === null) {
+        return;
+      }
+
+      if (isDraggingRef.current) {
+        const startX = Math.min(dragStartXRef.current, chartX);
+        const endX = Math.max(dragStartXRef.current, chartX);
+        setSelection({
+          startX,
+          endX,
+          startIndex: resolveIndexFromX(startX),
+          endIndex: resolveIndexFromX(endX),
+          active: true,
+        });
+        return;
+      }
+
+      const tooltip = resolveTooltipFromX(chartX);
+      if (tooltip) {
+        setTooltipData(tooltip);
+      }
+    },
+    [getChartX, resolveTooltipFromX, resolveIndexFromX]
+  );
+
+  const handleMouseLeave = useCallback(() => {
+    setTooltipData(null);
+    if (isDraggingRef.current) {
+      isDraggingRef.current = false;
+    }
+    setSelection(null);
+  }, []);
+
+  const handleMouseDown = useCallback(
+    (event: React.MouseEvent<SVGGElement>) => {
+      const chartX = getChartX(event);
+      if (chartX === null) {
+        return;
+      }
+      isDraggingRef.current = true;
+      dragStartXRef.current = chartX;
+      setTooltipData(null);
+      setSelection(null);
+    },
+    [getChartX]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    if (isDraggingRef.current) {
+      isDraggingRef.current = false;
+    }
+    setSelection(null);
+  }, []);
+
+  const handleTouchStart = useCallback(
+    (event: React.TouchEvent<SVGGElement>) => {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+        const chartX = getChartX(event, 0);
+        if (chartX === null) {
+          return;
+        }
+        const tooltip = resolveTooltipFromX(chartX);
+        if (tooltip) {
+          setTooltipData(tooltip);
+        }
+      } else if (event.touches.length === 2) {
+        event.preventDefault();
+        setTooltipData(null);
+        const x0 = getChartX(event, 0);
+        const x1 = getChartX(event, 1);
+        if (x0 === null || x1 === null) {
+          return;
+        }
+        const startX = Math.min(x0, x1);
+        const endX = Math.max(x0, x1);
+        setSelection({
+          startX,
+          endX,
+          startIndex: resolveIndexFromX(startX),
+          endIndex: resolveIndexFromX(endX),
+          active: true,
+        });
+      }
+    },
+    [getChartX, resolveTooltipFromX, resolveIndexFromX]
+  );
+
+  const handleTouchMove = useCallback(
+    (event: React.TouchEvent<SVGGElement>) => {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+        const chartX = getChartX(event, 0);
+        if (chartX === null) {
+          return;
+        }
+        const tooltip = resolveTooltipFromX(chartX);
+        if (tooltip) {
+          setTooltipData(tooltip);
+        }
+      } else if (event.touches.length === 2) {
+        event.preventDefault();
+        const x0 = getChartX(event, 0);
+        const x1 = getChartX(event, 1);
+        if (x0 === null || x1 === null) {
+          return;
+        }
+        const startX = Math.min(x0, x1);
+        const endX = Math.max(x0, x1);
+        setSelection({
+          startX,
+          endX,
+          startIndex: resolveIndexFromX(startX),
+          endIndex: resolveIndexFromX(endX),
+          active: true,
+        });
+      }
+    },
+    [getChartX, resolveTooltipFromX, resolveIndexFromX]
+  );
+
+  const handleTouchEnd = useCallback(() => {
+    setTooltipData(null);
+    setSelection(null);
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelection(null);
+  }, []);
+
+  const interactionHandlers = canInteract
+    ? {
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+      }
+    : {};
+
+  const interactionStyle: React.CSSProperties = {
+    cursor: canInteract ? "crosshair" : "default",
+    touchAction: "none",
+  };
+
+  return {
+    tooltipData,
+    setTooltipData,
+    selection,
+    clearSelection,
+    interactionHandlers,
+    interactionStyle,
+  };
+}
+
+// ─── Tooltip Components ──────────────────────────────────────────────────────
+
+// DateTicker
+
+const TICKER_ITEM_HEIGHT = 24;
+
+interface DateTickerProps {
+  currentIndex: number;
+  labels: string[];
+  visible: boolean;
+}
+
+function DateTicker({ currentIndex, labels, visible }: DateTickerProps) {
+  const parsedLabels = useMemo(() => {
+    return labels.map((label) => {
+      const parts = label.split(" ");
+      const month = parts[0] || "";
+      const day = parts[1] || "";
+      return { month, day, full: label };
+    });
+  }, [labels]);
+
+  const monthIndices = useMemo(() => {
+    const uniqueMonths: string[] = [];
+    const indices: number[] = [];
+
+    parsedLabels.forEach((label, index) => {
+      if (uniqueMonths.length === 0 || uniqueMonths.at(-1) !== label.month) {
+        uniqueMonths.push(label.month);
+        indices.push(index);
+      }
+    });
+
+    return { uniqueMonths, indices };
+  }, [parsedLabels]);
+
+  const currentMonthIndex = useMemo(() => {
+    if (currentIndex < 0 || currentIndex >= parsedLabels.length) {
+      return 0;
+    }
+    const currentMonth = parsedLabels[currentIndex]?.month;
+    return monthIndices.uniqueMonths.indexOf(currentMonth || "");
+  }, [currentIndex, parsedLabels, monthIndices]);
+
+  const prevMonthIndexRef = useRef(-1);
+
+  const dayY = useSpring(0, { stiffness: 400, damping: 35 });
+  const monthY = useSpring(0, { stiffness: 400, damping: 35 });
+
+  useEffect(() => {
+    dayY.set(-currentIndex * TICKER_ITEM_HEIGHT);
+  }, [currentIndex, dayY]);
+
+  useEffect(() => {
+    if (currentMonthIndex >= 0) {
+      const isFirstRender = prevMonthIndexRef.current === -1;
+      const monthChanged = prevMonthIndexRef.current !== currentMonthIndex;
+
+      if (isFirstRender || monthChanged) {
+        monthY.set(-currentMonthIndex * TICKER_ITEM_HEIGHT);
+        prevMonthIndexRef.current = currentMonthIndex;
+      }
+    }
+  }, [currentMonthIndex, monthY]);
+
+  if (!visible || labels.length === 0) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      className="overflow-hidden rounded-full bg-zinc-100 px-4 py-1 text-zinc-900"
+      layout
+      transition={{
+        layout: { type: "spring", stiffness: 400, damping: 35 },
+      }}
+    >
+      <div className="relative h-6 overflow-hidden">
+        <div className="flex items-center justify-center gap-1">
+          <div className="relative h-6 overflow-hidden">
+            <motion.div className="flex flex-col" style={{ y: monthY }}>
+              {monthIndices.uniqueMonths.map((month) => (
+                <div
+                  className="flex h-6 shrink-0 items-center justify-center"
+                  key={month}
+                >
+                  <span className="whitespace-nowrap font-medium text-sm">
+                    {month}
+                  </span>
+                </div>
+              ))}
+            </motion.div>
+          </div>
+          <div className="relative h-6 overflow-hidden">
+            <motion.div className="flex flex-col" style={{ y: dayY }}>
+              {parsedLabels.map((label, index) => (
+                <div
+                  className="flex h-6 shrink-0 items-center justify-center"
+                  key={`${label.day}-${index}`}
+                >
+                  <span className="whitespace-nowrap font-medium text-sm">
+                    {label.day}
+                  </span>
+                </div>
+              ))}
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+DateTicker.displayName = "DateTicker";
+
+// TooltipDot
+
+interface TooltipDotProps {
+  x: number;
+  y: number;
+  visible: boolean;
+  color: string;
+  size?: number;
+  strokeColor?: string;
+  strokeWidth?: number;
+}
+
+function TooltipDot({
+  x,
+  y,
+  visible,
+  color,
+  size = 5,
+  strokeColor = chartCssVars.background,
+  strokeWidth = 2,
+}: TooltipDotProps) {
+  const crosshairSpringConfig = { stiffness: 300, damping: 30 };
+  const animatedX = useSpring(x, crosshairSpringConfig);
+  const animatedY = useSpring(y, crosshairSpringConfig);
+
+  useEffect(() => {
+    animatedX.set(x);
+    animatedY.set(y);
+  }, [x, y, animatedX, animatedY]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <motion.circle
+      cx={animatedX}
+      cy={animatedY}
+      fill={color}
+      r={size}
+      stroke={strokeColor}
+      strokeWidth={strokeWidth}
+    />
+  );
+}
+
+TooltipDot.displayName = "TooltipDot";
+
+// TooltipIndicator
+
+type IndicatorWidth = number | "line" | "thin" | "medium" | "thick";
+
+interface TooltipIndicatorProps {
+  x: number;
+  height: number;
+  visible: boolean;
+  width?: IndicatorWidth;
+  span?: number;
+  columnWidth?: number;
+  colorEdge?: string;
+  colorMid?: string;
+  fadeEdges?: boolean;
+  gradientId?: string;
+}
+
+function resolveWidth(width: IndicatorWidth): number {
+  if (typeof width === "number") {
+    return width;
+  }
+  switch (width) {
+    case "line":
+      return 1;
+    case "thin":
+      return 2;
+    case "medium":
+      return 4;
+    case "thick":
+      return 8;
+    default:
+      return 1;
+  }
+}
+
+function TooltipIndicator({
+  x,
+  height,
+  visible,
+  width = "line",
+  span,
+  columnWidth,
+  colorEdge = chartCssVars.crosshair,
+  colorMid = chartCssVars.crosshair,
+  fadeEdges = true,
+  gradientId = "tooltip-indicator-gradient",
+}: TooltipIndicatorProps) {
+  const pixelWidth =
+    span !== undefined && columnWidth !== undefined
+      ? span * columnWidth
+      : resolveWidth(width);
+
+  const crosshairSpringConfig = { stiffness: 300, damping: 30 };
+  const animatedX = useSpring(x - pixelWidth / 2, crosshairSpringConfig);
+
+  useEffect(() => {
+    animatedX.set(x - pixelWidth / 2);
+  }, [x, animatedX, pixelWidth]);
+
+  if (!visible) {
+    return null;
+  }
+
+  const edgeOpacity = fadeEdges ? 0 : 1;
+
+  return (
+    <g>
+      <defs>
+        <linearGradient id={gradientId} x1="0%" x2="0%" y1="0%" y2="100%">
+          <stop
+            offset="0%"
+            style={{ stopColor: colorEdge, stopOpacity: edgeOpacity }}
+          />
+          <stop offset="10%" style={{ stopColor: colorEdge, stopOpacity: 1 }} />
+          <stop offset="50%" style={{ stopColor: colorMid, stopOpacity: 1 }} />
+          <stop offset="90%" style={{ stopColor: colorEdge, stopOpacity: 1 }} />
+          <stop
+            offset="100%"
+            style={{ stopColor: colorEdge, stopOpacity: edgeOpacity }}
+          />
+        </linearGradient>
+      </defs>
+      <motion.rect
+        fill={`url(#${gradientId})`}
+        height={height}
+        width={pixelWidth}
+        x={animatedX}
+        y={0}
+      />
+    </g>
+  );
+}
+
+TooltipIndicator.displayName = "TooltipIndicator";
+
+// TooltipContent
+
+export interface TooltipRow {
+  color: string;
+  label: string;
+  value: string | number;
+}
+
+interface TooltipContentProps {
+  title?: string;
+  rows: TooltipRow[];
+  children?: ReactNode;
+}
+
+function TooltipContent({ title, rows, children }: TooltipContentProps) {
+  const [measureRef, bounds] = useMeasure({ debounce: 0, scroll: false });
+  const [committedHeight, setCommittedHeight] = useState<number | null>(null);
+  const committedChildrenStateRef = useRef<boolean | null>(null);
+  const frameRef = useRef<number | null>(null);
+
+  const hasChildren = !!children;
+  const markerKey = hasChildren ? "has-marker" : "no-marker";
+
+  const isWaitingForSettlement =
+    committedChildrenStateRef.current !== null &&
+    committedChildrenStateRef.current !== hasChildren;
+
+  useEffect(() => {
+    if (bounds.height <= 0) {
+      return;
+    }
+
+    if (frameRef.current) {
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    }
+
+    if (isWaitingForSettlement) {
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = requestAnimationFrame(() => {
+          setCommittedHeight(bounds.height);
+          committedChildrenStateRef.current = hasChildren;
+        });
+      });
+    } else {
+      setCommittedHeight(bounds.height);
+      committedChildrenStateRef.current = hasChildren;
+    }
+
+    return () => {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, [bounds.height, hasChildren, isWaitingForSettlement]);
+
+  const shouldAnimate = committedHeight !== null;
+
+  return (
+    <motion.div
+      animate={
+        committedHeight !== null ? { height: committedHeight } : undefined
+      }
+      className="overflow-hidden"
+      initial={false}
+      transition={
+        shouldAnimate
+          ? {
+              type: "spring",
+              stiffness: 500,
+              damping: 35,
+              mass: 0.8,
+            }
+          : { duration: 0 }
+      }
+    >
+      <div className="px-3 py-2.5" ref={measureRef}>
+        {title && (
+          <div className="mb-2 font-medium text-neutral-400 text-xs">
+            {title}
+          </div>
+        )}
+        <div className="space-y-1.5">
+          {rows.map((row) => (
+            <div
+              className="flex items-center justify-between gap-4"
+              key={`${row.label}-${row.color}`}
+            >
+              <div className="flex items-center gap-2">
+                <span
+                  className="h-2.5 w-2.5 shrink-0 rounded-full"
+                  style={{ backgroundColor: row.color }}
+                />
+                <span className="text-neutral-400 text-sm">
+                  {row.label}
+                </span>
+              </div>
+              <span className="font-medium text-white text-sm tabular-nums">
+                {typeof row.value === "number"
+                  ? row.value.toLocaleString()
+                  : row.value}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        <AnimatePresence mode="wait">
+          {children && (
+            <motion.div
+              animate={{ opacity: 1, filter: "blur(0px)" }}
+              className="mt-2"
+              exit={{ opacity: 0, filter: "blur(4px)" }}
+              initial={{ opacity: 0, filter: "blur(4px)" }}
+              key={markerKey}
+              transition={{ duration: 0.2, ease: "easeOut" }}
+            >
+              {children}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </motion.div>
+  );
+}
+
+TooltipContent.displayName = "TooltipContent";
+
+// TooltipBox
+
+interface TooltipBoxProps {
+  x: number;
+  y: number;
+  visible: boolean;
+  containerRef: RefObject<HTMLDivElement | null>;
+  containerWidth: number;
+  containerHeight: number;
+  offset?: number;
+  className?: string;
+  children: ReactNode;
+  left?: number | ReturnType<typeof useSpring>;
+  top?: number | ReturnType<typeof useSpring>;
+  flipped?: boolean;
+}
+
+function TooltipBox({
+  x,
+  y,
+  visible,
+  containerRef,
+  containerWidth,
+  containerHeight,
+  offset = 16,
+  className = "",
+  children,
+  left: leftOverride,
+  top: topOverride,
+  flipped: flippedOverride,
+}: TooltipBoxProps) {
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [tooltipWidth, setTooltipWidth] = useState(180);
+  const [tooltipHeight, setTooltipHeight] = useState(80);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (tooltipRef.current) {
+      const w = tooltipRef.current.offsetWidth;
+      const h = tooltipRef.current.offsetHeight;
+      if (w > 0 && w !== tooltipWidth) {
+        setTooltipWidth(w);
+      }
+      if (h > 0 && h !== tooltipHeight) {
+        setTooltipHeight(h);
+      }
+    }
+  }, [tooltipWidth, tooltipHeight]);
+
+  const shouldFlipX = x + tooltipWidth + offset > containerWidth;
+  const targetX = shouldFlipX ? x - offset - tooltipWidth : x + offset;
+
+  const targetY = Math.max(
+    offset,
+    Math.min(y - tooltipHeight / 2, containerHeight - tooltipHeight - offset)
+  );
+
+  const prevFlipRef = useRef(shouldFlipX);
+  const [flipKey, setFlipKey] = useState(0);
+
+  useEffect(() => {
+    if (prevFlipRef.current !== shouldFlipX) {
+      setFlipKey((k) => k + 1);
+      prevFlipRef.current = shouldFlipX;
+    }
+  }, [shouldFlipX]);
+
+  const springConfig = { stiffness: 100, damping: 20 };
+  const animatedLeft = useSpring(targetX, springConfig);
+  const animatedTop = useSpring(targetY, springConfig);
+
+  useEffect(() => {
+    animatedLeft.set(targetX);
+  }, [targetX, animatedLeft]);
+
+  useEffect(() => {
+    animatedTop.set(targetY);
+  }, [targetY, animatedTop]);
+
+  const finalLeft = leftOverride ?? animatedLeft;
+  const finalTop = topOverride ?? animatedTop;
+  const isFlipped = flippedOverride ?? shouldFlipX;
+  const transformOrigin = isFlipped ? "right top" : "left top";
+
+  const container = containerRef.current;
+  if (!(mounted && container)) {
+    return null;
+  }
+
+
+  if (!visible) {
+    return null;
+  }
+
+  return createPortal(
+    <motion.div
+      animate={{ opacity: 1 }}
+      className={cn("pointer-events-none absolute z-50", className)}
+      exit={{ opacity: 0 }}
+      initial={{ opacity: 0 }}
+      ref={tooltipRef}
+      style={{ left: finalLeft, top: finalTop }}
+      transition={{ duration: 0.1 }}
+    >
+      <motion.div
+        animate={{ scale: 1, opacity: 1, x: 0 }}
+        className="min-w-[140px] overflow-hidden rounded-lg bg-neutral-800/90 text-white shadow-lg backdrop-blur-md"
+        initial={{ scale: 0.85, opacity: 0, x: isFlipped ? 20 : -20 }}
+        key={flipKey}
+        style={{ transformOrigin }}
+        transition={{ type: "spring", stiffness: 300, damping: 25 }}
+      >
+        {children}
+      </motion.div>
+    </motion.div>,
+    container
+  );
+}
+
+TooltipBox.displayName = "TooltipBox";
+
+// ChartTooltip
+
+export interface ChartTooltipProps {
+  showDatePill?: boolean;
+  showCrosshair?: boolean;
+  showDots?: boolean;
+  content?: (props: {
+    point: Record<string, unknown>;
+    index: number;
+  }) => ReactNode;
+  rows?: (point: Record<string, unknown>) => TooltipRow[];
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ChartTooltip({
+  showDatePill = true,
+  showCrosshair = true,
+  showDots = true,
+  content,
+  rows: rowsRenderer,
+  children,
+  className = "",
+}: ChartTooltipProps) {
+  const {
+    tooltipData,
+    width,
+    height,
+    innerHeight,
+    margin,
+    columnWidth,
+    lines,
+    xAccessor,
+    dateLabels,
+    containerRef,
+    orientation,
+    barXAccessor,
+  } = useChart();
+
+  const isHorizontal = orientation === "horizontal";
+
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const visible = tooltipData !== null;
+  const x = tooltipData?.x ?? 0;
+  const xWithMargin = x + margin.left;
+
+  const firstLineDataKey = lines[0]?.dataKey;
+  const firstLineY = firstLineDataKey
+    ? (tooltipData?.yPositions[firstLineDataKey] ?? 0)
+    : 0;
+  const yWithMargin = firstLineY + margin.top;
+
+  const crosshairSpringConfig = { stiffness: 300, damping: 30 };
+  const animatedX = useSpring(xWithMargin, crosshairSpringConfig);
+
+  useEffect(() => {
+    animatedX.set(xWithMargin);
+  }, [xWithMargin, animatedX]);
+
+  const tooltipRows = useMemo(() => {
+    if (!tooltipData) {
+      return [];
+    }
+
+    if (rowsRenderer) {
+      return rowsRenderer(tooltipData.point);
+    }
+
+    return lines.map((line) => ({
+      color: line.stroke,
+      label: line.dataKey,
+      value: (tooltipData.point[line.dataKey] as number) ?? 0,
+    }));
+  }, [tooltipData, lines, rowsRenderer]);
+
+  const title = useMemo(() => {
+    if (!tooltipData) {
+      return undefined;
+    }
+    if (barXAccessor) {
+      return barXAccessor(tooltipData.point);
+    }
+    return xAccessor(tooltipData.point).toLocaleDateString("en-GB", {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+    });
+  }, [tooltipData, barXAccessor, xAccessor]);
+
+  const container = containerRef.current;
+  if (!(mounted && container)) {
+    return null;
+  }
+
+
+  const tooltipContent = (
+    <>
+      {showCrosshair && (
+        <svg
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0"
+          height="100%"
+          width="100%"
+        >
+          <g transform={`translate(${margin.left},${margin.top})`}>
+            <TooltipIndicator
+              colorEdge={chartCssVars.crosshair}
+              colorMid={chartCssVars.crosshair}
+              columnWidth={columnWidth}
+              fadeEdges
+              height={innerHeight}
+              visible={visible}
+              width="line"
+              x={x}
+            />
+          </g>
+        </svg>
+      )}
+
+      {showDots && visible && !isHorizontal && (
+        <svg
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0"
+          height="100%"
+          width="100%"
+        >
+          <g transform={`translate(${margin.left},${margin.top})`}>
+            {lines.map((line) => (
+              <TooltipDot
+                color={line.stroke}
+                key={line.dataKey}
+                strokeColor={chartCssVars.background}
+                visible={visible}
+                x={tooltipData?.xPositions?.[line.dataKey] ?? x}
+                y={tooltipData?.yPositions[line.dataKey] ?? 0}
+              />
+            ))}
+          </g>
+        </svg>
+      )}
+
+      <TooltipBox
+        className={className}
+        containerHeight={height}
+        containerRef={containerRef}
+        containerWidth={width}
+        top={isHorizontal ? undefined : margin.top}
+        visible={visible}
+        x={xWithMargin}
+        y={isHorizontal ? yWithMargin : margin.top}
+      >
+        {content ? (
+          content({
+            point: tooltipData?.point ?? {},
+            index: tooltipData?.index ?? 0,
+          })
+        ) : (
+          <TooltipContent rows={tooltipRows} title={title}>
+            {children}
+          </TooltipContent>
+        )}
+      </TooltipBox>
+
+      {showDatePill && dateLabels.length > 0 && visible && !isHorizontal && (
+        <motion.div
+          className="pointer-events-none absolute z-50"
+          style={{
+            left: animatedX,
+            transform: "translateX(-50%)",
+            bottom: 4,
+          }}
+        >
+          <DateTicker
+            currentIndex={tooltipData?.index ?? 0}
+            labels={dateLabels}
+            visible={visible}
+          />
+        </motion.div>
+      )}
+    </>
+  );
+
+  return createPortal(tooltipContent, container);
+}
+
+ChartTooltip.displayName = "ChartTooltip";
+
+// ─── Grid ────────────────────────────────────────────────────────────────────
+
+export interface GridProps {
+  horizontal?: boolean;
+  vertical?: boolean;
+  numTicksRows?: number;
+  numTicksColumns?: number;
+  rowTickValues?: number[];
+  stroke?: string;
+  strokeOpacity?: number;
+  strokeWidth?: number;
+  strokeDasharray?: string;
+  fadeHorizontal?: boolean;
+  fadeVertical?: boolean;
+}
+
+export function Grid({
+  horizontal = true,
+  vertical = false,
+  numTicksRows = 5,
+  numTicksColumns = 10,
+  rowTickValues,
+  stroke = chartCssVars.grid,
+  strokeOpacity = 1,
+  strokeWidth = 1,
+  strokeDasharray = "4,4",
+  fadeHorizontal = true,
+  fadeVertical = false,
+}: GridProps) {
+  const { xScale, yScale, innerWidth, innerHeight, orientation, barScale } =
+    useChart();
+
+  const isHorizontalBarChart = orientation === "horizontal" && barScale;
+  const columnScale = isHorizontalBarChart ? yScale : xScale;
+  const uniqueId = useId();
+
+  const hMaskId = `grid-rows-fade-${uniqueId}`;
+  const hGradientId = `${hMaskId}-gradient`;
+  const vMaskId = `grid-cols-fade-${uniqueId}`;
+  const vGradientId = `${vMaskId}-gradient`;
+
+  return (
+    <g className="chart-grid">
+      {horizontal && fadeHorizontal && (
+        <defs>
+          <linearGradient id={hGradientId} x1="0%" x2="100%" y1="0%" y2="0%">
+            <stop offset="0%" style={{ stopColor: "white", stopOpacity: 0 }} />
+            <stop offset="10%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop offset="90%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop
+              offset="100%"
+              style={{ stopColor: "white", stopOpacity: 0 }}
+            />
+          </linearGradient>
+          <mask id={hMaskId}>
+            <rect
+              fill={`url(#${hGradientId})`}
+              height={innerHeight}
+              width={innerWidth}
+              x="0"
+              y="0"
+            />
+          </mask>
+        </defs>
+      )}
+
+      {vertical && fadeVertical && (
+        <defs>
+          <linearGradient id={vGradientId} x1="0%" x2="0%" y1="0%" y2="100%">
+            <stop offset="0%" style={{ stopColor: "white", stopOpacity: 0 }} />
+            <stop offset="10%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop offset="90%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop
+              offset="100%"
+              style={{ stopColor: "white", stopOpacity: 0 }}
+            />
+          </linearGradient>
+          <mask id={vMaskId}>
+            <rect
+              fill={`url(#${vGradientId})`}
+              height={innerHeight}
+              width={innerWidth}
+              x="0"
+              y="0"
+            />
+          </mask>
+        </defs>
+      )}
+
+      {horizontal && (
+        <g mask={fadeHorizontal ? `url(#${hMaskId})` : undefined}>
+          <GridRows
+            numTicks={rowTickValues ? undefined : numTicksRows}
+            scale={yScale}
+            stroke={stroke}
+            strokeDasharray={strokeDasharray}
+            strokeOpacity={strokeOpacity}
+            strokeWidth={strokeWidth}
+            tickValues={rowTickValues}
+            width={innerWidth}
+          />
+        </g>
+      )}
+      {vertical && columnScale && typeof columnScale === "function" && (
+        <g mask={fadeVertical ? `url(#${vMaskId})` : undefined}>
+          <GridColumns
+            height={innerHeight}
+            numTicks={numTicksColumns}
+            scale={columnScale}
+            stroke={stroke}
+            strokeDasharray={strokeDasharray}
+            strokeOpacity={strokeOpacity}
+            strokeWidth={strokeWidth}
+          />
+        </g>
+      )}
+    </g>
+  );
+}
+
+Grid.displayName = "Grid";
+
+// ─── XAxis ───────────────────────────────────────────────────────────────────
+
+export interface XAxisProps {
+  numTicks?: number;
+  tickerHalfWidth?: number;
+  formatLabel?: (date: Date) => string;
+}
+
+interface XAxisLabelProps {
+  label: string;
+  x: number;
+  crosshairX: number | null;
+  isHovering: boolean;
+  tickerHalfWidth: number;
+}
+
+function XAxisLabel({
+  label,
+  x,
+  crosshairX,
+  isHovering,
+  tickerHalfWidth,
+}: XAxisLabelProps) {
+  const fadeBuffer = 20;
+  const fadeRadius = tickerHalfWidth + fadeBuffer;
+
+  let opacity = 1;
+  if (isHovering && crosshairX !== null) {
+    const distance = Math.abs(x - crosshairX);
+    if (distance < tickerHalfWidth) {
+      opacity = 0;
+    } else if (distance < fadeRadius) {
+      opacity = (distance - tickerHalfWidth) / fadeBuffer;
+    }
+  }
+
+  return (
+    <div
+      className="absolute"
+      style={{
+        left: x,
+        bottom: 12,
+        width: 0,
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      <motion.span
+        animate={{ opacity }}
+        className="whitespace-nowrap text-neutral-500 text-xs"
+        initial={{ opacity: 1 }}
+        transition={{ duration: 0.4, ease: "easeInOut" }}
+      >
+        {label}
+      </motion.span>
+    </div>
+  );
+}
+
+export function XAxis({ numTicks = 5, tickerHalfWidth = 50, formatLabel }: XAxisProps) {
+  const { xScale, margin, tooltipData, containerRef } = useChart();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const labelsToShow = useMemo(() => {
+    const domain = xScale.domain();
+    const startDate = domain[0];
+    const endDate = domain[1];
+
+    if (!(startDate && endDate)) {
+      return [];
+    }
+
+    const startTime = startDate.getTime();
+    const endTime = endDate.getTime();
+    const timeRange = endTime - startTime;
+
+    const tickCount = Math.max(2, numTicks);
+    const dates: Date[] = [];
+
+    for (let i = 0; i < tickCount; i++) {
+      const t = i / (tickCount - 1);
+      const time = startTime + t * timeRange;
+      dates.push(new Date(time));
+    }
+
+    const defaultFormat = (d: Date) => d.toLocaleDateString("en-GB", { month: "short", day: "numeric" });
+    const fmt = formatLabel ?? defaultFormat;
+
+    return dates.map((date) => ({
+      date,
+      x: (xScale(date) ?? 0) + margin.left,
+      label: fmt(date),
+    }));
+  }, [xScale, margin.left, numTicks, formatLabel]);
+
+  const isHovering = tooltipData !== null;
+  const crosshairX = tooltipData ? tooltipData.x + margin.left : null;
+
+  const container = containerRef.current;
+  if (!(mounted && container)) {
+    return null;
+  }
+
+
+  return createPortal(
+    <div className="pointer-events-none absolute inset-0">
+      {labelsToShow.map((item) => (
+        <XAxisLabel
+          crosshairX={crosshairX}
+          isHovering={isHovering}
+          key={`${item.label}-${item.x}`}
+          label={item.label}
+          tickerHalfWidth={tickerHalfWidth}
+          x={item.x}
+        />
+      ))}
+    </div>,
+    container
+  );
+}
+
+XAxis.displayName = "XAxis";
+
+// ─── YAxis ───────────────────────────────────────────────────────────────────
+
+export interface YAxisProps {
+  numTicks?: number;
+  formatValue?: (value: number) => string;
+}
+
+export function YAxis({
+  numTicks = 5,
+  formatValue,
+}: YAxisProps) {
+  const { yScale, margin, containerRef } = useChart();
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    setContainer(containerRef.current);
+  }, [containerRef]);
+
+  const ticks = useMemo(() => {
+    const domain = yScale.domain() as [number, number];
+    const min = domain[0];
+    const max = domain[1];
+    const step = (max - min) / (numTicks - 1);
+
+    return Array.from({ length: numTicks }, (_, i) => {
+      const value = min + step * i;
+      return {
+        value,
+        y: (yScale(value) ?? 0) + margin.top,
+        label: formatValue
+          ? formatValue(value)
+          : value >= 1000
+            ? `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}k`
+            : value.toLocaleString(),
+      };
+    });
+  }, [yScale, margin.top, numTicks, formatValue]);
+
+  if (!container) {
+    return null;
+  }
+
+  return createPortal(
+    <div className="pointer-events-none absolute inset-0">
+      {ticks.map((tick) => (
+        <div
+          key={tick.value}
+          className="absolute"
+          style={{
+            left: 0,
+            top: tick.y,
+            width: margin.left - 8,
+            display: "flex",
+            justifyContent: "flex-end",
+            transform: "translateY(-50%)",
+          }}
+        >
+          <span className="whitespace-nowrap text-neutral-500 text-xs tabular-nums">
+            {tick.label}
+          </span>
+        </div>
+      ))}
+    </div>,
+    container
+  );
+}
+
+YAxis.displayName = "YAxis";
+
+// ─── Area ────────────────────────────────────────────────────────────────────
+
+export interface AreaProps {
+  dataKey: string;
+  fill?: string;
+  fillOpacity?: number;
+  stroke?: string;
+  strokeWidth?: number;
+  curve?: CurveFactory;
+  animate?: boolean;
+  showLine?: boolean;
+  showHighlight?: boolean;
+  gradientToOpacity?: number;
+  fadeEdges?: boolean;
+}
+
+export function Area({
+  dataKey,
+  fill = chartCssVars.linePrimary,
+  fillOpacity = 0.4,
+  stroke,
+  strokeWidth = 2,
+  curve = curveMonotoneX,
+  animate = true,
+  showLine = true,
+  showHighlight = true,
+  gradientToOpacity = 0,
+  fadeEdges = false,
+}: AreaProps) {
+  const {
+    data,
+    xScale,
+    yScale,
+    innerHeight,
+    innerWidth,
+    tooltipData,
+    selection,
+    isLoaded,
+    animationDuration,
+    xAccessor,
+  } = useChart();
+
+  const pathRef = useRef<SVGPathElement>(null);
+  const [pathLength, setPathLength] = useState(0);
+  const [clipWidth, setClipWidth] = useState(0);
+
+  const uniqueId = useId();
+  const gradientId = useMemo(
+    () => `area-gradient-${dataKey}-${Math.random().toString(36).slice(2, 9)}`,
+    [dataKey]
+  );
+  const strokeGradientId = useMemo(
+    () =>
+      `area-stroke-gradient-${dataKey}-${Math.random().toString(36).slice(2, 9)}`,
+    [dataKey]
+  );
+  const edgeMaskId = `area-edge-mask-${dataKey}-${uniqueId}`;
+  const edgeGradientId = `${edgeMaskId}-gradient`;
+
+  const resolvedStroke = stroke || fill;
+
+  useEffect(() => {
+    if (pathRef.current && animate) {
+      const len = pathRef.current.getTotalLength();
+      if (len > 0) {
+        setPathLength(len);
+        if (!isLoaded) {
+          requestAnimationFrame(() => {
+            setClipWidth(innerWidth);
+          });
+        }
+      }
+    }
+  }, [animate, innerWidth, isLoaded]);
+
+  const findLengthAtX = useCallback(
+    (targetX: number): number => {
+      const path = pathRef.current;
+      if (!path || pathLength === 0) {
+        return 0;
+      }
+      let low = 0;
+      let high = pathLength;
+      const tolerance = 0.5;
+
+      while (high - low > tolerance) {
+        const mid = (low + high) / 2;
+        const point = path.getPointAtLength(mid);
+        if (point.x < targetX) {
+          low = mid;
+        } else {
+          high = mid;
+        }
+      }
+      return (low + high) / 2;
+    },
+    [pathLength]
+  );
+
+  const segmentBounds = useMemo(() => {
+    if (!pathRef.current || pathLength === 0) {
+      return { startLength: 0, segmentLength: 0, isActive: false };
+    }
+
+    if (selection?.active) {
+      const startLength = findLengthAtX(selection.startX);
+      const endLength = findLengthAtX(selection.endX);
+      return {
+        startLength,
+        segmentLength: endLength - startLength,
+        isActive: true,
+      };
+    }
+
+    if (!tooltipData) {
+      return { startLength: 0, segmentLength: 0, isActive: false };
+    }
+
+    const idx = tooltipData.index;
+    const startIdx = Math.max(0, idx - 1);
+    const endIdx = Math.min(data.length - 1, idx + 1);
+
+    const startPoint = data[startIdx];
+    const endPoint = data[endIdx];
+    if (!(startPoint && endPoint)) {
+      return { startLength: 0, segmentLength: 0, isActive: false };
+    }
+
+    const startX = xScale(xAccessor(startPoint)) ?? 0;
+    const endX = xScale(xAccessor(endPoint)) ?? 0;
+
+    const startLength = findLengthAtX(startX);
+    const endLength = findLengthAtX(endX);
+
+    return {
+      startLength,
+      segmentLength: endLength - startLength,
+      isActive: true,
+    };
+  }, [
+    tooltipData,
+    selection,
+    data,
+    xScale,
+    pathLength,
+    xAccessor,
+    findLengthAtX,
+  ]);
+
+  const springConfig = { stiffness: 180, damping: 28 };
+  const offsetSpring = useSpring(0, springConfig);
+  const segmentLengthSpring = useSpring(0, springConfig);
+
+  const animatedDasharray = useMotionTemplate`${segmentLengthSpring} ${pathLength}`;
+
+  useEffect(() => {
+    offsetSpring.set(-segmentBounds.startLength);
+    segmentLengthSpring.set(segmentBounds.segmentLength);
+  }, [
+    segmentBounds.startLength,
+    segmentBounds.segmentLength,
+    offsetSpring,
+    segmentLengthSpring,
+  ]);
+
+  const getY = useCallback(
+    (d: Record<string, unknown>) => {
+      const value = d[dataKey];
+      return typeof value === "number" ? (yScale(value) ?? 0) : 0;
+    },
+    [dataKey, yScale]
+  );
+
+  const isHovering = tooltipData !== null || selection?.active === true;
+  const easing = "cubic-bezier(0.85, 0, 0.15, 1)";
+
+  return (
+    <>
+      <defs>
+        <linearGradient id={gradientId} x1="0%" x2="0%" y1="0%" y2="100%">
+          <stop
+            offset="0%"
+            style={{ stopColor: fill, stopOpacity: fillOpacity }}
+          />
+          <stop
+            offset="100%"
+            style={{ stopColor: fill, stopOpacity: gradientToOpacity }}
+          />
+        </linearGradient>
+
+        <linearGradient id={strokeGradientId} x1="0%" x2="100%" y1="0%" y2="0%">
+          <stop
+            offset="0%"
+            style={{ stopColor: resolvedStroke, stopOpacity: 0 }}
+          />
+          <stop
+            offset="15%"
+            style={{ stopColor: resolvedStroke, stopOpacity: 1 }}
+          />
+          <stop
+            offset="85%"
+            style={{ stopColor: resolvedStroke, stopOpacity: 1 }}
+          />
+          <stop
+            offset="100%"
+            style={{ stopColor: resolvedStroke, stopOpacity: 0 }}
+          />
+        </linearGradient>
+
+        {fadeEdges && (
+          <>
+            <linearGradient
+              id={edgeGradientId}
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0%"
+                style={{ stopColor: "white", stopOpacity: 0 }}
+              />
+              <stop
+                offset="20%"
+                style={{ stopColor: "white", stopOpacity: 1 }}
+              />
+              <stop
+                offset="80%"
+                style={{ stopColor: "white", stopOpacity: 1 }}
+              />
+              <stop
+                offset="100%"
+                style={{ stopColor: "white", stopOpacity: 0 }}
+              />
+            </linearGradient>
+            <mask id={edgeMaskId}>
+              <rect
+                fill={`url(#${edgeGradientId})`}
+                height={innerHeight}
+                width={innerWidth}
+                x="0"
+                y="0"
+              />
+            </mask>
+          </>
+        )}
+      </defs>
+
+      {animate && (
+        <defs>
+          <clipPath id={`grow-clip-area-${dataKey}`}>
+            <rect
+              height={innerHeight + 20}
+              style={{
+                transition:
+                  !isLoaded && clipWidth > 0
+                    ? `width ${animationDuration}ms ${easing}`
+                    : "none",
+              }}
+              width={isLoaded ? innerWidth : clipWidth}
+              x={0}
+              y={0}
+            />
+          </clipPath>
+        </defs>
+      )}
+
+      <g clipPath={animate ? `url(#grow-clip-area-${dataKey})` : undefined}>
+        <motion.g
+          animate={{ opacity: isHovering && showHighlight ? 0.6 : 1 }}
+          initial={{ opacity: 1 }}
+          transition={{ duration: 0.4, ease: "easeInOut" }}
+        >
+          <g mask={fadeEdges ? `url(#${edgeMaskId})` : undefined}>
+            <AreaClosed
+              curve={curve}
+              data={data}
+              fill={`url(#${gradientId})`}
+              x={(d) => xScale(xAccessor(d)) ?? 0}
+              y={getY}
+              yScale={yScale}
+            />
+          </g>
+
+          {showLine && (
+            <LinePath
+              curve={curve}
+              data={data}
+              innerRef={pathRef}
+              stroke={`url(#${strokeGradientId})`}
+              strokeLinecap="round"
+              strokeWidth={strokeWidth}
+              x={(d) => xScale(xAccessor(d)) ?? 0}
+              y={getY}
+            />
+          )}
+        </motion.g>
+      </g>
+
+      {showHighlight &&
+        showLine &&
+        isHovering &&
+        isLoaded &&
+        pathRef.current && (
+          <motion.path
+            animate={{ opacity: 1 }}
+            d={pathRef.current.getAttribute("d") || ""}
+            exit={{ opacity: 0 }}
+            fill="none"
+            initial={{ opacity: 0 }}
+            stroke={resolvedStroke}
+            strokeLinecap="round"
+            strokeWidth={strokeWidth}
+            style={{
+              strokeDasharray: animatedDasharray,
+              strokeDashoffset: offsetSpring,
+            }}
+            transition={{ duration: 0.4, ease: "easeInOut" }}
+          />
+        )}
+    </>
+  );
+}
+
+Area.displayName = "Area";
+
+// ─── Segment Components ──────────────────────────────────────────────────────
+
+export function SegmentBackground() {
+  const { selection, innerHeight } = useChart();
+
+  if (!selection?.active) {
+    return null;
+  }
+
+  const x = Math.min(selection.startX, selection.endX);
+  const width = Math.abs(selection.endX - selection.startX);
+
+  return (
+    <motion.rect
+      animate={{ opacity: 0.15 }}
+      fill={chartCssVars.linePrimary}
+      height={innerHeight}
+      initial={{ opacity: 0 }}
+      rx={4}
+      transition={{ duration: 0.2 }}
+      width={width}
+      x={x}
+      y={0}
+    />
+  );
+}
+
+SegmentBackground.displayName = "SegmentBackground";
+
+export function SegmentLineFrom() {
+  const { selection, innerHeight } = useChart();
+
+  if (!selection?.active) {
+    return null;
+  }
+
+  const x = Math.min(selection.startX, selection.endX);
+
+  return (
+    <motion.line
+      animate={{ opacity: 1 }}
+      initial={{ opacity: 0 }}
+      stroke={chartCssVars.linePrimary}
+      strokeDasharray="4,3"
+      strokeWidth={1.5}
+      transition={{ duration: 0.2 }}
+      x1={x}
+      x2={x}
+      y1={0}
+      y2={innerHeight}
+    />
+  );
+}
+
+SegmentLineFrom.displayName = "SegmentLineFrom";
+
+export function SegmentLineTo() {
+  const { selection, innerHeight } = useChart();
+
+  if (!selection?.active) {
+    return null;
+  }
+
+  const x = Math.max(selection.startX, selection.endX);
+
+  return (
+    <motion.line
+      animate={{ opacity: 1 }}
+      initial={{ opacity: 0 }}
+      stroke={chartCssVars.linePrimary}
+      strokeDasharray="4,3"
+      strokeWidth={1.5}
+      transition={{ duration: 0.2 }}
+      x1={x}
+      x2={x}
+      y1={0}
+      y2={innerHeight}
+    />
+  );
+}
+
+SegmentLineTo.displayName = "SegmentLineTo";
+
+// ─── Pattern Components ──────────────────────────────────────────────────────
+
+export interface PatternLinesProps {
+  id: string;
+  width?: number;
+  height?: number;
+  stroke?: string;
+  strokeWidth?: number;
+  orientation?: ("diagonal" | "horizontal" | "vertical")[];
+}
+
+export function PatternLines({
+  id,
+  width = 6,
+  height = 6,
+  stroke = "var(--chart-line-primary)",
+  strokeWidth = 1,
+  orientation = ["diagonal"],
+}: PatternLinesProps) {
+  const paths: string[] = [];
+
+  for (const o of orientation) {
+    if (o === "diagonal") {
+      paths.push(`M0,${height}l${width},${-height}`);
+      paths.push(`M${-width / 4},${height / 4}l${width / 2},${-height / 2}`);
+      paths.push(`M${(3 * width) / 4},${height + height / 4}l${width / 2},${-height / 2}`);
+    } else if (o === "horizontal") {
+      paths.push(`M0,${height / 2}l${width},0`);
+    } else if (o === "vertical") {
+      paths.push(`M${width / 2},0l0,${height}`);
+    }
+  }
+
+  return (
+    <defs>
+      <pattern
+        id={id}
+        width={width}
+        height={height}
+        patternUnits="userSpaceOnUse"
+      >
+        <path
+          d={paths.join(" ")}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          strokeLinecap="square"
+        />
+      </pattern>
+    </defs>
+  );
+}
+
+PatternLines.displayName = "PatternLines";
+
+export interface PatternAreaProps {
+  dataKey: string;
+  fill?: string;
+  curve?: CurveFactory;
+}
+
+export function PatternArea({
+  dataKey,
+  fill = "url(#area-pattern)",
+  curve = curveMonotoneX,
+}: PatternAreaProps) {
+  const { data, xScale, yScale, xAccessor } = useChart();
+
+  const getY = useCallback(
+    (d: Record<string, unknown>) => {
+      const value = d[dataKey];
+      return typeof value === "number" ? (yScale(value) ?? 0) : 0;
+    },
+    [dataKey, yScale]
+  );
+
+  return (
+    <AreaClosed
+      curve={curve}
+      data={data}
+      fill={fill}
+      x={(d) => xScale(xAccessor(d)) ?? 0}
+      y={getY}
+      yScale={yScale}
+    />
+  );
+}
+
+PatternArea.displayName = "PatternArea";
+
+// ─── AreaChart ───────────────────────────────────────────────────────────────
+
+function isPostOverlayComponent(child: ReactElement): boolean {
+  const childType = child.type as {
+    displayName?: string;
+    name?: string;
+    __isChartMarkers?: boolean;
+  };
+
+  if (childType.__isChartMarkers) {
+    return true;
+  }
+
+  const componentName =
+    typeof child.type === "function"
+      ? childType.displayName || childType.name || ""
+      : "";
+
+  return componentName === "ChartMarkers" || componentName === "MarkerGroup";
+}
+
+function extractAreaConfigs(children: ReactNode): LineConfig[] {
+  const configs: LineConfig[] = [];
+
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+
+    const childType = child.type as {
+      displayName?: string;
+      name?: string;
+    };
+    const componentName =
+      typeof child.type === "function"
+        ? childType.displayName || childType.name || ""
+        : "";
+
+    const props = child.props as AreaProps | undefined;
+    const isAreaComponent =
+      componentName === "Area" ||
+      child.type === Area ||
+      (props && typeof props.dataKey === "string" && props.dataKey.length > 0);
+
+    if (isAreaComponent && props?.dataKey) {
+      configs.push({
+        dataKey: props.dataKey,
+        stroke: props.stroke || props.fill || "var(--chart-line-primary)",
+        strokeWidth: props.strokeWidth || 2,
+      });
+    }
+  });
+
+  return configs;
+}
+
+export interface AreaChartProps {
+  data: Record<string, unknown>[];
+  xDataKey?: string;
+  margin?: Partial<Margin>;
+  animationDuration?: number;
+  aspectRatio?: string;
+  className?: string;
+  children: ReactNode;
+}
+
+const DEFAULT_MARGIN: Margin = { top: 40, right: 40, bottom: 40, left: 40 };
+
+interface ChartInnerProps {
+  width: number;
+  height: number;
+  data: Record<string, unknown>[];
+  xDataKey: string;
+  margin: Margin;
+  animationDuration: number;
+  children: ReactNode;
+  containerRef: RefObject<HTMLDivElement | null>;
+}
+
+function ChartInner({
+  width,
+  height,
+  data,
+  xDataKey,
+  margin,
+  animationDuration,
+  children,
+  containerRef,
+}: ChartInnerProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const lines = useMemo(() => extractAreaConfigs(children), [children]);
+
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+
+  const xAccessor = useCallback(
+    (d: Record<string, unknown>): Date => {
+      const value = d[xDataKey];
+      return value instanceof Date ? value : new Date(value as string | number);
+    },
+    [xDataKey]
+  );
+
+  const bisectDate = useMemo(
+    () => bisector<Record<string, unknown>, Date>((d) => xAccessor(d)).left,
+    [xAccessor]
+  );
+
+  const xScale = useMemo(() => {
+    const dates = data.map((d) => xAccessor(d));
+    const minTime = Math.min(...dates.map((d) => d.getTime()));
+    const maxTime = Math.max(...dates.map((d) => d.getTime()));
+
+    return scaleTime({
+      range: [0, innerWidth],
+      domain: [minTime, maxTime],
+    });
+  }, [innerWidth, data, xAccessor]);
+
+  const columnWidth = useMemo(() => {
+    if (data.length < 2) {
+      return 0;
+    }
+    return innerWidth / (data.length - 1);
+  }, [innerWidth, data.length]);
+
+  const yScale = useMemo(() => {
+    let maxValue = 0;
+    for (const line of lines) {
+      for (const d of data) {
+        const value = d[line.dataKey];
+        if (typeof value === "number" && value > maxValue) {
+          maxValue = value;
+        }
+      }
+    }
+
+    if (maxValue === 0) {
+      maxValue = 100;
+    }
+
+    return scaleLinear({
+      range: [innerHeight, 0],
+      domain: [0, maxValue * 1.1],
+      nice: true,
+    });
+  }, [innerHeight, data, lines]);
+
+  const dateLabels = useMemo(
+    () =>
+      data.map((d) =>
+        xAccessor(d).toLocaleDateString("en-GB", {
+          month: "short",
+          day: "numeric",
+        })
+      ),
+    [data, xAccessor]
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoaded(true);
+    }, animationDuration);
+    return () => clearTimeout(timer);
+  }, [animationDuration]);
+
+  const canInteract = isLoaded;
+
+  const {
+    tooltipData,
+    setTooltipData,
+    selection,
+    clearSelection,
+    interactionHandlers,
+    interactionStyle,
+  } = useChartInteraction({
+    xScale,
+    yScale,
+    data,
+    lines,
+    margin,
+    xAccessor,
+    bisectDate,
+    canInteract,
+  });
+
+  if (width < 10 || height < 10) {
+    return null;
+  }
+
+  const preOverlayChildren: ReactElement[] = [];
+  const postOverlayChildren: ReactElement[] = [];
+
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+
+    if (isPostOverlayComponent(child)) {
+      postOverlayChildren.push(child);
+    } else {
+      preOverlayChildren.push(child);
+    }
+  });
+
+  const contextValue = {
+    data,
+    xScale,
+    yScale,
+    width,
+    height,
+    innerWidth,
+    innerHeight,
+    margin,
+    columnWidth,
+    tooltipData,
+    setTooltipData,
+    containerRef,
+    lines,
+    isLoaded,
+    animationDuration,
+    xAccessor,
+    dateLabels,
+    selection,
+    clearSelection,
+  };
+
+  return (
+    <ChartProvider value={contextValue}>
+      <svg aria-hidden="true" height={height} width={width}>
+        <defs>
+          <clipPath id="chart-area-grow-clip">
+            <rect
+              height={innerHeight + 20}
+              style={{
+                transition: isLoaded
+                  ? "none"
+                  : `width ${animationDuration}ms cubic-bezier(0.85, 0, 0.15, 1)`,
+              }}
+              width={isLoaded ? innerWidth : 0}
+              x={0}
+              y={0}
+            />
+          </clipPath>
+        </defs>
+
+        <rect fill="transparent" height={height} width={width} x={0} y={0} />
+
+        <g
+          {...interactionHandlers}
+          style={interactionStyle}
+          transform={`translate(${margin.left},${margin.top})`}
+        >
+          <rect
+            fill="transparent"
+            height={innerHeight}
+            width={innerWidth}
+            x={0}
+            y={0}
+          />
+
+          {preOverlayChildren}
+          {postOverlayChildren}
+        </g>
+      </svg>
+    </ChartProvider>
+  );
+}
+
+export function AreaChart({
+  data,
+  xDataKey = "date",
+  margin: marginProp,
+  animationDuration = 1100,
+  aspectRatio = "2 / 1",
+  className = "",
+  children,
+}: AreaChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const margin = { ...DEFAULT_MARGIN, ...marginProp };
+
+  return (
+    <div
+      className={cn("relative w-full", className)}
+      ref={containerRef}
+      style={{ aspectRatio, touchAction: "none" }}
+    >
+      <ParentSize debounceTime={10}>
+        {({ width, height }) => (
+          <ChartInner
+            animationDuration={animationDuration}
+            containerRef={containerRef}
+            data={data}
+            height={height}
+            margin={margin}
+            width={width}
+            xDataKey={xDataKey}
+          >
+            {children}
+          </ChartInner>
+        )}
+      </ParentSize>
+    </div>
+  );
+}
+
+export default AreaChart;
diff --git a/components/ui/bar-chart.tsx b/components/ui/bar-chart.tsx
new file mode 100644
index 0000000..160952c
--- /dev/null
+++ b/components/ui/bar-chart.tsx
@@ -0,0 +1,911 @@
+"use client";
+
+import { localPoint } from "@visx/event";
+import { LinearGradient as VisxLinearGradient } from "@visx/gradient";
+import { GridColumns, GridRows } from "@visx/grid";
+import { ParentSize } from "@visx/responsive";
+import { scaleBand, scaleLinear } from "@visx/scale";
+import {
+  AnimatePresence,
+  motion,
+  useSpring,
+} from "motion/react";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
+  type SetStateAction,
+} from "react";
+import useMeasure from "react-use-measure";
+import { createPortal } from "react-dom";
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// ─── Utils ───────────────────────────────────────────────────────────────────
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// ─── CSS Vars ────────────────────────────────────────────────────────────────
+
+export const chartCssVars = {
+  background: "var(--chart-background)",
+  foreground: "var(--chart-foreground)",
+  foregroundMuted: "var(--chart-foreground-muted)",
+  label: "var(--chart-label)",
+  linePrimary: "var(--chart-line-primary)",
+  lineSecondary: "var(--chart-line-secondary)",
+  crosshair: "var(--chart-crosshair)",
+  grid: "var(--chart-grid)",
+};
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export interface Margin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface TooltipData {
+  point: Record<string, unknown>;
+  index: number;
+  x: number;
+  yPositions: Record<string, number>;
+  xPositions?: Record<string, number>;
+}
+
+export interface TooltipRow {
+  color: string;
+  label: string;
+  value: string | number;
+}
+
+export interface LineConfig {
+  dataKey: string;
+  stroke: string;
+  strokeWidth: number;
+}
+
+// ─── Bar Chart Context ───────────────────────────────────────────────────────
+
+type ScaleLinearType<Output> = ReturnType<typeof scaleLinear<Output>>;
+type ScaleBandType<Domain extends { toString(): string }> = ReturnType<
+  typeof scaleBand<Domain>
+>;
+
+export interface BarChartContextValue {
+  data: Record<string, unknown>[];
+  xScale: ScaleBandType<string>;
+  yScale: ScaleLinearType<number>;
+  width: number;
+  height: number;
+  innerWidth: number;
+  innerHeight: number;
+  margin: Margin;
+  bandWidth: number;
+  tooltipData: TooltipData | null;
+  setTooltipData: Dispatch<SetStateAction<TooltipData | null>>;
+  containerRef: RefObject<HTMLDivElement | null>;
+  bars: BarConfig[];
+  isLoaded: boolean;
+  animationDuration: number;
+  xDataKey: string;
+  hoveredBarIndex: number | null;
+  setHoveredBarIndex: (index: number | null) => void;
+  orientation: "vertical" | "horizontal";
+  stacked: boolean;
+  stackGap: number;
+  stackOffsets: Map<number, Map<string, number>>;
+  barGap: number;
+  barWidth?: number;
+}
+
+interface BarConfig {
+  dataKey: string;
+  fill: string;
+  stroke?: string;
+}
+
+const BarChartContext = createContext<BarChartContextValue | null>(null);
+
+function BarChartProvider({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value: BarChartContextValue;
+}) {
+  return (
+    <BarChartContext.Provider value={value}>
+      {children}
+    </BarChartContext.Provider>
+  );
+}
+
+export function useChart(): BarChartContextValue {
+  const context = useContext(BarChartContext);
+  if (!context) {
+    throw new Error(
+      "useChart must be used within a BarChartProvider. " +
+        "Make sure your component is wrapped in <BarChart>."
+    );
+  }
+  return context;
+}
+
+// ─── Tooltip Components ──────────────────────────────────────────────────────
+
+interface TooltipDotProps {
+  x: number;
+  y: number;
+  visible: boolean;
+  color: string;
+  size?: number;
+  strokeColor?: string;
+  strokeWidth?: number;
+}
+
+function TooltipDot({
+  x,
+  y,
+  visible,
+  color,
+  size = 5,
+  strokeColor = chartCssVars.background,
+  strokeWidth = 2,
+}: TooltipDotProps) {
+  const springConfig = { stiffness: 300, damping: 30 };
+  const animatedX = useSpring(x, springConfig);
+  const animatedY = useSpring(y, springConfig);
+
+  useEffect(() => {
+    animatedX.set(x);
+    animatedY.set(y);
+  }, [x, y, animatedX, animatedY]);
+
+  if (!visible) return null;
+
+  return (
+    <motion.circle
+      cx={animatedX}
+      cy={animatedY}
+      fill={color}
+      r={size}
+      stroke={strokeColor}
+      strokeWidth={strokeWidth}
+    />
+  );
+}
+
+TooltipDot.displayName = "TooltipDot";
+
+interface TooltipIndicatorProps {
+  x: number;
+  height: number;
+  visible: boolean;
+  width?: number;
+  colorEdge?: string;
+  colorMid?: string;
+  fadeEdges?: boolean;
+  gradientId?: string;
+}
+
+function TooltipIndicator({
+  x,
+  height,
+  visible,
+  width = 1,
+  colorEdge = chartCssVars.crosshair,
+  colorMid = chartCssVars.crosshair,
+  fadeEdges = true,
+  gradientId = "bar-tooltip-indicator-gradient",
+}: TooltipIndicatorProps) {
+  const springConfig = { stiffness: 300, damping: 30 };
+  const animatedX = useSpring(x - width / 2, springConfig);
+
+  useEffect(() => {
+    animatedX.set(x - width / 2);
+  }, [x, animatedX, width]);
+
+  if (!visible) return null;
+
+  const edgeOpacity = fadeEdges ? 0 : 1;
+
+  return (
+    <g>
+      <defs>
+        <linearGradient id={gradientId} x1="0%" x2="0%" y1="0%" y2="100%">
+          <stop offset="0%" style={{ stopColor: colorEdge, stopOpacity: edgeOpacity }} />
+          <stop offset="10%" style={{ stopColor: colorEdge, stopOpacity: 1 }} />
+          <stop offset="50%" style={{ stopColor: colorMid, stopOpacity: 1 }} />
+          <stop offset="90%" style={{ stopColor: colorEdge, stopOpacity: 1 }} />
+          <stop offset="100%" style={{ stopColor: colorEdge, stopOpacity: edgeOpacity }} />
+        </linearGradient>
+      </defs>
+      <motion.rect fill={`url(#${gradientId})`} height={height} width={width} x={animatedX} y={0} />
+    </g>
+  );
+}
+
+TooltipIndicator.displayName = "TooltipIndicator";
+
+interface TooltipContentProps {
+  title?: string;
+  rows: TooltipRow[];
+  children?: ReactNode;
+}
+
+function TooltipContent({ title, rows, children }: TooltipContentProps) {
+  const [measureRef, bounds] = useMeasure({ debounce: 0, scroll: false });
+  const [committedHeight, setCommittedHeight] = useState<number | null>(null);
+  const committedChildrenStateRef = useRef<boolean | null>(null);
+  const frameRef = useRef<number | null>(null);
+
+  const hasChildren = !!children;
+  const markerKey = hasChildren ? "has-marker" : "no-marker";
+  const isWaitingForSettlement = committedChildrenStateRef.current !== null && committedChildrenStateRef.current !== hasChildren;
+
+  useEffect(() => {
+    if (bounds.height <= 0) return;
+    if (frameRef.current) { cancelAnimationFrame(frameRef.current); frameRef.current = null; }
+    if (isWaitingForSettlement) {
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = requestAnimationFrame(() => {
+          setCommittedHeight(bounds.height);
+          committedChildrenStateRef.current = hasChildren;
+        });
+      });
+    } else {
+      setCommittedHeight(bounds.height);
+      committedChildrenStateRef.current = hasChildren;
+    }
+    return () => { if (frameRef.current) cancelAnimationFrame(frameRef.current); };
+  }, [bounds.height, hasChildren, isWaitingForSettlement]);
+
+  const shouldAnimate = committedHeight !== null;
+
+  return (
+    <motion.div
+      animate={committedHeight !== null ? { height: committedHeight } : undefined}
+      className="overflow-hidden"
+      initial={false}
+      transition={shouldAnimate ? { type: "spring", stiffness: 500, damping: 35, mass: 0.8 } : { duration: 0 }}
+    >
+      <div className="px-3 py-2.5" ref={measureRef}>
+        {title && <div className="mb-2 font-medium text-neutral-400 text-xs">{title}</div>}
+        <div className="space-y-1.5">
+          {rows.map((row) => (
+            <div className="flex items-center justify-between gap-4" key={`${row.label}-${row.color}`}>
+              <div className="flex items-center gap-2">
+                <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: row.color }} />
+                <span className="text-neutral-400 text-sm">{row.label}</span>
+              </div>
+              <span className="font-medium text-white text-sm tabular-nums">
+                {typeof row.value === "number" ? row.value.toLocaleString() : row.value}
+              </span>
+            </div>
+          ))}
+        </div>
+        <AnimatePresence mode="wait">
+          {children && (
+            <motion.div animate={{ opacity: 1, filter: "blur(0px)" }} className="mt-2" exit={{ opacity: 0, filter: "blur(4px)" }} initial={{ opacity: 0, filter: "blur(4px)" }} key={markerKey} transition={{ duration: 0.2, ease: "easeOut" }}>
+              {children}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </motion.div>
+  );
+}
+
+TooltipContent.displayName = "TooltipContent";
+
+interface TooltipBoxProps {
+  x: number;
+  y: number;
+  visible: boolean;
+  containerRef: RefObject<HTMLDivElement | null>;
+  containerWidth: number;
+  containerHeight: number;
+  offset?: number;
+  className?: string;
+  children: ReactNode;
+  top?: number | ReturnType<typeof useSpring>;
+}
+
+function TooltipBox({
+  x, y, visible, containerRef, containerWidth, containerHeight, offset = 16, className = "", children, top: topOverride,
+}: TooltipBoxProps) {
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [tooltipWidth, setTooltipWidth] = useState(180);
+  const [tooltipHeight, setTooltipHeight] = useState(80);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true); }, []);
+
+  useLayoutEffect(() => {
+    if (tooltipRef.current) {
+      const w = tooltipRef.current.offsetWidth;
+      const h = tooltipRef.current.offsetHeight;
+      if (w > 0 && w !== tooltipWidth) setTooltipWidth(w);
+      if (h > 0 && h !== tooltipHeight) setTooltipHeight(h);
+    }
+  }, [tooltipWidth, tooltipHeight]);
+
+  const shouldFlipX = x + tooltipWidth + offset > containerWidth;
+  const targetX = shouldFlipX ? x - offset - tooltipWidth : x + offset;
+  const targetY = Math.max(offset, Math.min(y - tooltipHeight / 2, containerHeight - tooltipHeight - offset));
+
+  const prevFlipRef = useRef(shouldFlipX);
+  const [flipKey, setFlipKey] = useState(0);
+
+  useEffect(() => {
+    if (prevFlipRef.current !== shouldFlipX) { setFlipKey((k) => k + 1); prevFlipRef.current = shouldFlipX; }
+  }, [shouldFlipX]);
+
+  const springConfig = { stiffness: 100, damping: 20 };
+  const animatedLeft = useSpring(targetX, springConfig);
+  const animatedTop = useSpring(targetY, springConfig);
+
+  useEffect(() => { animatedLeft.set(targetX); }, [targetX, animatedLeft]);
+  useEffect(() => { animatedTop.set(targetY); }, [targetY, animatedTop]);
+
+  const finalTop = topOverride ?? animatedTop;
+  const transformOrigin = shouldFlipX ? "right top" : "left top";
+
+  const container = containerRef.current;
+  if (!(mounted && container)) return null;
+  if (!visible) return null;
+
+  return createPortal(
+    <motion.div animate={{ opacity: 1 }} className={cn("pointer-events-none absolute z-50", className)} exit={{ opacity: 0 }} initial={{ opacity: 0 }} ref={tooltipRef} style={{ left: animatedLeft, top: finalTop }} transition={{ duration: 0.1 }}>
+      <motion.div animate={{ scale: 1, opacity: 1, x: 0 }} className="min-w-[140px] overflow-hidden rounded-lg bg-neutral-800/90 text-white shadow-lg backdrop-blur-md" initial={{ scale: 0.85, opacity: 0, x: shouldFlipX ? 20 : -20 }} key={flipKey} style={{ transformOrigin }} transition={{ type: "spring", stiffness: 300, damping: 25 }}>
+        {children}
+      </motion.div>
+    </motion.div>,
+    container
+  );
+}
+
+TooltipBox.displayName = "TooltipBox";
+
+// ─── ChartTooltip ────────────────────────────────────────────────────────────
+
+export interface ChartTooltipProps {
+  showCrosshair?: boolean;
+  showDots?: boolean;
+  content?: (props: { point: Record<string, unknown>; index: number }) => ReactNode;
+  rows?: (point: Record<string, unknown>) => TooltipRow[];
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ChartTooltip({ showCrosshair = true, showDots = true, content, rows: rowsRenderer, children, className = "" }: ChartTooltipProps) {
+  const { tooltipData, width, height, innerHeight, margin, bars, xDataKey, containerRef, orientation, yScale } = useChart();
+  const isHorizontal = orientation === "horizontal";
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => { setMounted(true); }, []);
+
+  const visible = tooltipData !== null;
+  const x = tooltipData?.x ?? 0;
+  const xWithMargin = x + margin.left;
+  const firstBarDataKey = bars[0]?.dataKey;
+  const firstBarY = firstBarDataKey ? (tooltipData?.yPositions[firstBarDataKey] ?? 0) : 0;
+  const yWithMargin = firstBarY + margin.top;
+
+  const springConfig = { stiffness: 300, damping: 30 };
+  const animatedX = useSpring(xWithMargin, springConfig);
+  useEffect(() => { animatedX.set(xWithMargin); }, [xWithMargin, animatedX]);
+
+  const tooltipRows = useMemo(() => {
+    if (!tooltipData) return [];
+    if (rowsRenderer) return rowsRenderer(tooltipData.point);
+    return bars.map((bar) => ({ color: bar.stroke || bar.fill, label: bar.dataKey, value: (tooltipData.point[bar.dataKey] as number) ?? 0 }));
+  }, [tooltipData, bars, rowsRenderer]);
+
+  const title = useMemo(() => {
+    if (!tooltipData) return undefined;
+    return String(tooltipData.point[xDataKey] ?? "");
+  }, [tooltipData, xDataKey]);
+
+  const container = containerRef.current;
+  if (!(mounted && container)) return null;
+
+  const tooltipContent = (
+    <>
+      {showCrosshair && !isHorizontal && (
+        <svg aria-hidden="true" className="pointer-events-none absolute inset-0" height="100%" width="100%">
+          <g transform={`translate(${margin.left},${margin.top})`}>
+            <TooltipIndicator height={innerHeight} visible={visible} width={1} x={x} />
+          </g>
+        </svg>
+      )}
+      {showDots && visible && !isHorizontal && (
+        <svg aria-hidden="true" className="pointer-events-none absolute inset-0" height="100%" width="100%">
+          <g transform={`translate(${margin.left},${margin.top})`}>
+            {bars.map((bar) => (
+              <TooltipDot color={bar.stroke || bar.fill} key={bar.dataKey} strokeColor={chartCssVars.background} visible={visible} x={tooltipData?.xPositions?.[bar.dataKey] ?? x} y={tooltipData?.yPositions[bar.dataKey] ?? 0} />
+            ))}
+          </g>
+        </svg>
+      )}
+      <TooltipBox className={className} containerHeight={height} containerRef={containerRef} containerWidth={width} top={isHorizontal ? undefined : margin.top} visible={visible} x={xWithMargin} y={isHorizontal ? yWithMargin : margin.top}>
+        {content ? content({ point: tooltipData?.point ?? {}, index: tooltipData?.index ?? 0 }) : (
+          <TooltipContent rows={tooltipRows} title={title}>{children}</TooltipContent>
+        )}
+      </TooltipBox>
+    </>
+  );
+
+  return createPortal(tooltipContent, container);
+}
+
+ChartTooltip.displayName = "ChartTooltip";
+
+// ─── Grid ────────────────────────────────────────────────────────────────────
+
+export interface GridProps {
+  horizontal?: boolean;
+  vertical?: boolean;
+  numTicksRows?: number;
+  numTicksColumns?: number;
+  rowTickValues?: number[];
+  stroke?: string;
+  strokeOpacity?: number;
+  strokeWidth?: number;
+  strokeDasharray?: string;
+  fadeHorizontal?: boolean;
+  fadeVertical?: boolean;
+}
+
+export function Grid({
+  horizontal = true, vertical = false, numTicksRows = 5, numTicksColumns = 10, rowTickValues,
+  stroke = chartCssVars.grid, strokeOpacity = 1, strokeWidth = 1, strokeDasharray = "4,4",
+  fadeHorizontal = true, fadeVertical = false,
+}: GridProps) {
+  const { xScale, yScale, innerWidth, innerHeight, orientation } = useChart();
+  const isHorizontalBar = orientation === "horizontal";
+  const columnScale = isHorizontalBar ? yScale : xScale;
+  const uniqueId = useId();
+  const hMaskId = `grid-rows-fade-${uniqueId}`;
+  const hGradientId = `${hMaskId}-gradient`;
+  const vMaskId = `grid-cols-fade-${uniqueId}`;
+  const vGradientId = `${vMaskId}-gradient`;
+
+  return (
+    <g className="chart-grid">
+      {horizontal && fadeHorizontal && (
+        <defs>
+          <linearGradient id={hGradientId} x1="0%" x2="100%" y1="0%" y2="0%">
+            <stop offset="0%" style={{ stopColor: "white", stopOpacity: 0 }} />
+            <stop offset="10%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop offset="90%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop offset="100%" style={{ stopColor: "white", stopOpacity: 0 }} />
+          </linearGradient>
+          <mask id={hMaskId}><rect fill={`url(#${hGradientId})`} height={innerHeight} width={innerWidth} x="0" y="0" /></mask>
+        </defs>
+      )}
+      {vertical && fadeVertical && (
+        <defs>
+          <linearGradient id={vGradientId} x1="0%" x2="0%" y1="0%" y2="100%">
+            <stop offset="0%" style={{ stopColor: "white", stopOpacity: 0 }} />
+            <stop offset="10%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop offset="90%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop offset="100%" style={{ stopColor: "white", stopOpacity: 0 }} />
+          </linearGradient>
+          <mask id={vMaskId}><rect fill={`url(#${vGradientId})`} height={innerHeight} width={innerWidth} x="0" y="0" /></mask>
+        </defs>
+      )}
+      {horizontal && (
+        <g mask={fadeHorizontal ? `url(#${hMaskId})` : undefined}>
+          <GridRows numTicks={rowTickValues ? undefined : numTicksRows} scale={yScale} stroke={stroke} strokeDasharray={strokeDasharray} strokeOpacity={strokeOpacity} strokeWidth={strokeWidth} tickValues={rowTickValues} width={innerWidth} />
+        </g>
+      )}
+      {vertical && columnScale && typeof columnScale === "function" && (
+        <g mask={fadeVertical ? `url(#${vMaskId})` : undefined}>
+          <GridColumns height={innerHeight} numTicks={numTicksColumns} scale={columnScale} stroke={stroke} strokeDasharray={strokeDasharray} strokeOpacity={strokeOpacity} strokeWidth={strokeWidth} />
+        </g>
+      )}
+    </g>
+  );
+}
+
+Grid.displayName = "Grid";
+
+// ─── BarXAxis ────────────────────────────────────────────────────────────────
+
+export interface BarXAxisProps {
+  tickerHalfWidth?: number;
+  showAllLabels?: boolean;
+  maxLabels?: number;
+}
+
+export function BarXAxis({ tickerHalfWidth = 50, showAllLabels = false, maxLabels = 12 }: BarXAxisProps) {
+  const { xScale, margin, tooltipData, containerRef, bandWidth } = useChart();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => { setMounted(true); }, []);
+
+  const labelsToShow = useMemo(() => {
+    const domain = xScale.domain();
+    if (domain.length === 0) return [];
+    let labels = domain.map((label) => ({ label, x: (xScale(label) ?? 0) + bandWidth / 2 + margin.left }));
+    if (!showAllLabels && labels.length > maxLabels) {
+      const step = Math.ceil(labels.length / maxLabels);
+      labels = labels.filter((_, i) => i % step === 0);
+    }
+    return labels;
+  }, [xScale, margin.left, bandWidth, showAllLabels, maxLabels]);
+
+  const isHovering = tooltipData !== null;
+  const crosshairX = tooltipData ? tooltipData.x + margin.left : null;
+
+  const container = containerRef.current;
+  if (!(mounted && container)) return null;
+
+  return createPortal(
+    <div className="pointer-events-none absolute inset-0">
+      {labelsToShow.map((item) => {
+        let opacity = 1;
+        if (isHovering && crosshairX !== null) {
+          const fadeBuffer = 20;
+          const fadeRadius = tickerHalfWidth + fadeBuffer;
+          const distance = Math.abs(item.x - crosshairX);
+          if (distance < tickerHalfWidth) opacity = 0;
+          else if (distance < fadeRadius) opacity = (distance - tickerHalfWidth) / fadeBuffer;
+        }
+        return (
+          <div className="absolute" key={item.label} style={{ left: item.x, bottom: 12, width: 0, display: "flex", justifyContent: "center" }}>
+            <motion.span animate={{ opacity }} className="whitespace-nowrap text-neutral-500 text-xs" initial={{ opacity: 1 }} transition={{ duration: 0.4, ease: "easeInOut" }}>
+              {item.label}
+            </motion.span>
+          </div>
+        );
+      })}
+    </div>,
+    container
+  );
+}
+
+BarXAxis.displayName = "BarXAxis";
+
+// ─── BarValueAxis (numeric Y-axis for vertical bar charts) ───────────────
+
+export interface BarValueAxisProps {
+  numTicks?: number;
+  formatValue?: (value: number) => string;
+}
+
+export function BarValueAxis({ numTicks = 5, formatValue }: BarValueAxisProps) {
+  const { yScale, margin, containerRef } = useChart();
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => { setContainer(containerRef.current); }, [containerRef]);
+
+  const ticks = useMemo(() => {
+    const domain = yScale.domain() as [number, number];
+    const min = domain[0];
+    const max = domain[1];
+    const step = (max - min) / (numTicks - 1);
+    return Array.from({ length: numTicks }, (_, i) => {
+      const value = min + step * i;
+      return {
+        value,
+        y: (yScale(value) ?? 0) + margin.top,
+        label: formatValue ? formatValue(value) : value >= 1000 ? `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}k` : Math.round(value).toLocaleString(),
+      };
+    });
+  }, [yScale, margin.top, numTicks, formatValue]);
+
+  if (!container) return null;
+
+  return createPortal(
+    <div className="pointer-events-none absolute inset-0">
+      {ticks.map((tick) => (
+        <div key={tick.value} className="absolute" style={{ left: 0, top: tick.y, width: margin.left - 8, display: "flex", justifyContent: "flex-end", transform: "translateY(-50%)" }}>
+          <span className="whitespace-nowrap text-neutral-500 text-xs tabular-nums">{tick.label}</span>
+        </div>
+      ))}
+    </div>,
+    container
+  );
+}
+
+BarValueAxis.displayName = "BarValueAxis";
+
+// ─── Bar ─────────────────────────────────────────────────────────────────────
+
+export interface BarProps {
+  dataKey: string;
+  fill?: string;
+  stroke?: string;
+  lineCap?: "round" | "butt" | number;
+  animate?: boolean;
+  animationType?: "grow" | "fade";
+  fadedOpacity?: number;
+  staggerDelay?: number;
+  stackGap?: number;
+}
+
+function resolveRadius(lineCap: "round" | "butt" | number, barWidth: number): number {
+  if (lineCap === "butt") return 0;
+  if (lineCap === "round") return barWidth / 2;
+  return lineCap;
+}
+
+export function Bar({
+  dataKey, fill = chartCssVars.linePrimary, stroke, lineCap = "round", animate = true,
+  animationType = "grow", fadedOpacity = 0.3, staggerDelay, stackGap = 0,
+}: BarProps) {
+  const {
+    data, xScale, yScale, innerHeight, innerWidth, bandWidth, hoveredBarIndex, isLoaded, animationDuration,
+    xDataKey, orientation, stacked, stackOffsets, bars, barWidth: fixedBarWidth,
+  } = useChart();
+
+  const isHorizontal = orientation === "horizontal";
+  const barIndex = bars.findIndex((b) => b.dataKey === dataKey);
+  const barCount = bars.length;
+  const singleBarWidth = stacked ? bandWidth : bandWidth / barCount;
+  const actualBarWidth = fixedBarWidth ?? singleBarWidth;
+  const radius = resolveRadius(lineCap, actualBarWidth);
+  const autoStagger = staggerDelay ?? Math.min(0.06, 0.8 / data.length);
+
+  return (
+    <>
+      {data.map((d, i) => {
+        const category = String(d[xDataKey] ?? "");
+        const value = typeof d[dataKey] === "number" ? (d[dataKey] as number) : 0;
+        const bandStart = xScale(category) ?? 0;
+        const stackOffset = stacked ? stackOffsets.get(i)?.get(dataKey) ?? 0 : 0;
+
+        let barX: number, barY: number, barW: number, barH: number;
+
+        if (isHorizontal) {
+          const barLength = innerWidth - (yScale(value) ?? innerWidth);
+          barY = bandStart + (stacked ? 0 : barIndex * singleBarWidth);
+          barH = actualBarWidth;
+          barW = barLength;
+          barX = stacked ? stackOffset : 0;
+          if (stacked && stackGap > 0 && barIndex > 0) { barX += stackGap; barW = Math.max(0, barW - stackGap); }
+        } else {
+          const scaledY = yScale(value) ?? innerHeight;
+          barX = bandStart + (stacked ? 0 : barIndex * singleBarWidth);
+          barW = actualBarWidth;
+          barH = innerHeight - scaledY;
+          barY = stacked ? scaledY - stackOffset : scaledY;
+          if (stacked && stackGap > 0 && barIndex > 0) { barY += stackGap; barH = Math.max(0, barH - stackGap); }
+        }
+
+        if (barW <= 0 || barH <= 0) return null;
+
+        const isHovered = hoveredBarIndex === i;
+        const someoneHovered = hoveredBarIndex !== null;
+        const barOpacity = someoneHovered ? (isHovered ? 1 : fadedOpacity) : 1;
+        const delay = i * autoStagger;
+        const r = Math.min(radius, barW / 2, barH / 2);
+
+        let path: string;
+        if (isHorizontal) {
+          path = `M${barX},${barY} L${barX + barW - r},${barY} Q${barX + barW},${barY} ${barX + barW},${barY + r} L${barX + barW},${barY + barH - r} Q${barX + barW},${barY + barH} ${barX + barW - r},${barY + barH} L${barX},${barY + barH}Z`;
+        } else {
+          path = `M${barX},${barY + barH} L${barX},${barY + r} Q${barX},${barY} ${barX + r},${barY} L${barX + barW - r},${barY} Q${barX + barW},${barY} ${barX + barW},${barY + r} L${barX + barW},${barY + barH}Z`;
+        }
+
+        const originX = isHorizontal ? barX : barX + barW / 2;
+        const originY = isHorizontal ? barY + barH / 2 : innerHeight;
+        const shouldAnimateEntry = animate && !isLoaded;
+
+        const growInitial = isHorizontal ? { scaleX: 0, opacity: 0 } : { scaleY: 0, opacity: 0 };
+        const growAnimate = isHorizontal ? { scaleX: 1, opacity: barOpacity } : { scaleY: 1, opacity: barOpacity };
+        const growTransition = {
+          [isHorizontal ? "scaleX" : "scaleY"]: { duration: animationDuration / 1000, ease: [0.85, 0, 0.15, 1] as [number, number, number, number], delay },
+          opacity: { duration: 0.3, ease: "easeInOut" as const },
+        };
+
+        return (
+          <motion.path
+            key={`${category}-${dataKey}`}
+            d={path}
+            fill={fill}
+            style={{ transformOrigin: `${originX}px ${originY}px` }}
+            initial={shouldAnimateEntry && animationType === "grow" ? growInitial : shouldAnimateEntry && animationType === "fade" ? { opacity: 0, filter: "blur(4px)" } : { opacity: barOpacity }}
+            animate={shouldAnimateEntry && animationType === "grow" ? growAnimate : shouldAnimateEntry && animationType === "fade" ? { opacity: barOpacity, filter: "blur(0px)" } : { opacity: barOpacity }}
+            transition={shouldAnimateEntry && animationType === "grow" ? growTransition : shouldAnimateEntry && animationType === "fade" ? { duration: 0.5, delay, ease: "easeOut" } : { opacity: { duration: 0.3, ease: "easeInOut" } }}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+Bar.displayName = "Bar";
+
+// ─── Re-exports ──────────────────────────────────────────────────────────────
+
+export { VisxLinearGradient as LinearGradient };
+
+// ─── BarChart ────────────────────────────────────────────────────────────────
+
+function extractBarConfigs(children: ReactNode): BarConfig[] {
+  const configs: BarConfig[] = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const childType = child.type as { displayName?: string; name?: string };
+    const componentName = typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+    const props = child.props as BarProps | undefined;
+    const isBarComponent = componentName === "Bar" || child.type === Bar || (props && typeof props.dataKey === "string" && props.dataKey.length > 0);
+    if (isBarComponent && props?.dataKey) {
+      configs.push({ dataKey: props.dataKey, fill: props.fill || "var(--chart-line-primary)", stroke: props.stroke });
+    }
+  });
+  return configs;
+}
+
+export interface BarChartProps {
+  data: Record<string, unknown>[];
+  xDataKey?: string;
+  margin?: Partial<Margin>;
+  animationDuration?: number;
+  aspectRatio?: string;
+  barGap?: number;
+  barWidth?: number;
+  orientation?: "vertical" | "horizontal";
+  stacked?: boolean;
+  stackGap?: number;
+  className?: string;
+  children: ReactNode;
+}
+
+const DEFAULT_MARGIN: Margin = { top: 40, right: 40, bottom: 40, left: 40 };
+
+interface BarChartInnerProps {
+  width: number;
+  height: number;
+  data: Record<string, unknown>[];
+  xDataKey: string;
+  margin: Margin;
+  animationDuration: number;
+  barGap: number;
+  barWidth?: number;
+  orientation: "vertical" | "horizontal";
+  stacked: boolean;
+  stackGap: number;
+  children: ReactNode;
+  containerRef: RefObject<HTMLDivElement | null>;
+}
+
+function BarChartInner({
+  width, height, data, xDataKey, margin, animationDuration, barGap, barWidth, orientation, stacked, stackGap, children, containerRef,
+}: BarChartInnerProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hoveredBarIndex, setHoveredBarIndex] = useState<number | null>(null);
+  const bars = useMemo(() => extractBarConfigs(children), [children]);
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  const isHorizontal = orientation === "horizontal";
+
+  const xScale = useMemo(() => {
+    const domain = data.map((d) => String(d[xDataKey] ?? ""));
+    return scaleBand<string>({ range: isHorizontal ? [0, innerHeight] : [0, innerWidth], domain, padding: barGap });
+  }, [data, xDataKey, innerWidth, innerHeight, barGap, isHorizontal]);
+
+  const bandWidth = xScale.bandwidth();
+
+  const yScale = useMemo(() => {
+    let maxValue = 0;
+    if (stacked) {
+      for (const d of data) { let sum = 0; for (const bar of bars) { const v = d[bar.dataKey]; if (typeof v === "number") sum += v; } if (sum > maxValue) maxValue = sum; }
+    } else {
+      for (const bar of bars) { for (const d of data) { const v = d[bar.dataKey]; if (typeof v === "number" && v > maxValue) maxValue = v; } }
+    }
+    if (maxValue === 0) maxValue = 100;
+    return scaleLinear<number>({ range: isHorizontal ? [innerWidth, 0] : [innerHeight, 0], domain: [0, maxValue * 1.1], nice: true });
+  }, [data, bars, innerWidth, innerHeight, stacked, isHorizontal]);
+
+  const stackOffsets = useMemo(() => {
+    if (!stacked) return new Map<number, Map<string, number>>();
+    const offsets = new Map<number, Map<string, number>>();
+    for (let i = 0; i < data.length; i++) {
+      const d = data[i]!;
+      let cumulative = 0;
+      const barOffsets = new Map<string, number>();
+      for (const bar of bars) {
+        barOffsets.set(bar.dataKey, cumulative);
+        const v = d[bar.dataKey];
+        if (typeof v === "number") { cumulative += isHorizontal ? innerWidth - (yScale(v) ?? innerWidth) : innerHeight - (yScale(v) ?? innerHeight); }
+      }
+      offsets.set(i, barOffsets);
+    }
+    return offsets;
+  }, [data, bars, stacked, yScale, innerHeight, innerWidth, isHorizontal]);
+
+  const [tooltipData, setTooltipData] = useState<TooltipData | null>(null);
+
+  useEffect(() => { const timer = setTimeout(() => setIsLoaded(true), animationDuration); return () => clearTimeout(timer); }, [animationDuration]);
+
+  const handleMouseMove = useCallback((event: React.MouseEvent<SVGGElement>) => {
+    const point = localPoint(event);
+    if (!point) return;
+    const chartX = point.x - margin.left;
+    const chartY = point.y - margin.top;
+    const domain = xScale.domain();
+    let foundIndex = -1;
+    for (let i = 0; i < domain.length; i++) {
+      const cat = domain[i]!;
+      const bandStart = xScale(cat) ?? 0;
+      const bandEnd = bandStart + bandWidth;
+      if (isHorizontal ? (chartY >= bandStart && chartY <= bandEnd) : (chartX >= bandStart && chartX <= bandEnd)) { foundIndex = i; break; }
+    }
+    if (foundIndex >= 0) {
+      setHoveredBarIndex(foundIndex);
+      const d = data[foundIndex]!;
+      const yPositions: Record<string, number> = {};
+      const xPositions: Record<string, number> = {};
+      for (const bar of bars) {
+        const v = d[bar.dataKey];
+        if (typeof v === "number") {
+          if (isHorizontal) { xPositions[bar.dataKey] = innerWidth - (yScale(v) ?? innerWidth); yPositions[bar.dataKey] = (xScale(domain[foundIndex]!) ?? 0) + bandWidth / 2; }
+          else { yPositions[bar.dataKey] = yScale(v) ?? 0; xPositions[bar.dataKey] = (xScale(domain[foundIndex]!) ?? 0) + bandWidth / 2; }
+        }
+      }
+      const tooltipX = isHorizontal ? innerWidth - (yScale(Number(d[bars[0]?.dataKey ?? ""] ?? 0)) ?? 0) : (xScale(domain[foundIndex]!) ?? 0) + bandWidth / 2;
+      setTooltipData({ point: d, index: foundIndex, x: tooltipX, yPositions, xPositions });
+    } else { setHoveredBarIndex(null); setTooltipData(null); }
+  }, [xScale, yScale, data, bars, margin, bandWidth, isHorizontal, innerWidth]);
+
+  const handleMouseLeave = useCallback(() => { setHoveredBarIndex(null); setTooltipData(null); }, []);
+
+  if (width < 10 || height < 10) return null;
+
+  const contextValue: BarChartContextValue = {
+    data, xScale, yScale, width, height, innerWidth, innerHeight, margin, bandWidth, tooltipData, setTooltipData, containerRef, bars, isLoaded, animationDuration, xDataKey, hoveredBarIndex, setHoveredBarIndex, orientation, stacked, stackGap, stackOffsets, barGap, barWidth,
+  };
+
+  return (
+    <BarChartProvider value={contextValue}>
+      <svg aria-hidden="true" height={height} width={width}>
+        <rect fill="transparent" height={height} width={width} x={0} y={0} />
+        <g onMouseMove={isLoaded ? handleMouseMove : undefined} onMouseLeave={isLoaded ? handleMouseLeave : undefined} style={{ cursor: isLoaded ? "crosshair" : "default", touchAction: "none" }} transform={`translate(${margin.left},${margin.top})`}>
+          <rect fill="transparent" height={innerHeight} width={innerWidth} x={0} y={0} />
+          {children}
+        </g>
+      </svg>
+    </BarChartProvider>
+  );
+}
+
+export function BarChart({
+  data, xDataKey = "name", margin: marginProp, animationDuration = 1100, aspectRatio = "2 / 1",
+  barGap = 0.2, barWidth, orientation = "vertical", stacked = false, stackGap = 0, className = "", children,
+}: BarChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const margin = { ...DEFAULT_MARGIN, ...marginProp };
+
+  return (
+    <div className={cn("relative w-full", className)} ref={containerRef} style={{ aspectRatio, touchAction: "none" }}>
+      <ParentSize debounceTime={10}>
+        {({ width, height }) => (
+          <BarChartInner animationDuration={animationDuration} barGap={barGap} barWidth={barWidth} containerRef={containerRef} data={data} height={height} margin={margin} orientation={orientation} stacked={stacked} stackGap={stackGap} width={width} xDataKey={xDataKey}>
+            {children}
+          </BarChartInner>
+        )}
+      </ParentSize>
+    </div>
+  );
+}
+
+export default BarChart;
diff --git a/components/ui/button-website.tsx b/components/ui/button-website.tsx
new file mode 100644
index 0000000..ac472bb
--- /dev/null
+++ b/components/ui/button-website.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index fe06801..35989e9 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -26,7 +26,7 @@ const useCardContext = () => {
 const cardVariants = cva('flex flex-col items-stretch text-card-foreground rounded-xl', {
   variants: {
     variant: {
-      default: 'bg-card border border-border shadow-xs black/5',
+      default: 'bg-neutral-900/80 border border-white/[0.08] backdrop-blur-sm',
       accent: 'bg-muted shadow-xs p-1',
     },
   },
diff --git a/components/ui/funnel-chart.tsx b/components/ui/funnel-chart.tsx
index 78359da..7e926ac 100644
--- a/components/ui/funnel-chart.tsx
+++ b/components/ui/funnel-chart.tsx
@@ -145,8 +145,8 @@ function hSegmentPath(
   straight = false
 ) {
   const my = H / 2;
-  const h0 = normStart * H * 0.44 * layerScale;
-  const h1 = normEnd * H * 0.44 * layerScale;
+  const h0 = normStart * H * 0.3 * layerScale;
+  const h1 = normEnd * H * 0.3 * layerScale;
 
   if (straight) {
     return `M 0 ${my - h0} L ${segW} ${my - h1} L ${segW} ${my + h1} L 0 ${my + h0} Z`;
diff --git a/components/ui/menu-toggle-icon.tsx b/components/ui/menu-toggle-icon.tsx
new file mode 100644
index 0000000..945603b
--- /dev/null
+++ b/components/ui/menu-toggle-icon.tsx
@@ -0,0 +1,54 @@
+'use client';
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+type MenuToggleProps = React.ComponentProps<'svg'> & {
+    open: boolean;
+    duration?: number;
+};
+
+export function MenuToggleIcon({
+    open,
+    className,
+    fill = 'none',
+    stroke = 'currentColor',
+    strokeWidth = 2.5,
+    strokeLinecap = 'round',
+    strokeLinejoin = 'round',
+    duration = 500,
+    ...props
+}: MenuToggleProps) {
+    return (
+        <svg
+            strokeWidth={strokeWidth}
+            fill={fill}
+            stroke={stroke}
+            viewBox="0 0 32 32"
+            strokeLinecap={strokeLinecap}
+            strokeLinejoin={strokeLinejoin}
+            className={cn(
+                'transition-transform ease-in-out',
+                open && '-rotate-45',
+                className,
+            )}
+            style={{
+                transitionDuration: `${duration}ms`,
+            }}
+            {...props}
+        >
+            <path
+                className={cn(
+                    'transition-all ease-in-out',
+                    open
+                        ? '[stroke-dasharray:20_300] [stroke-dashoffset:-32.42px]'
+                        : '[stroke-dasharray:12_63]',
+                )}
+                style={{
+                    transitionDuration: `${duration}ms`,
+                }}
+                d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"
+            />
+            <path d="M7 16 27 16" />
+        </svg>
+    );
+}
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..dc3d1c8
--- /dev/null
+++ b/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+import * as React from "react"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDownIcon
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-white/[0.08] bg-neutral-900/65 text-popover-foreground shadow-xl backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:duration-150 data-[state=closed]:duration-100 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/lib/api/bot-filter.ts b/lib/api/bot-filter.ts
new file mode 100644
index 0000000..3361fdb
--- /dev/null
+++ b/lib/api/bot-filter.ts
@@ -0,0 +1,56 @@
+import apiRequest from './client'
+
+export interface SessionSummary {
+  session_id: string
+  pageviews: number
+  duration: number | null
+  first_page: string
+  referrer: string | null
+  country: string | null
+  city: string | null
+  region: string | null
+  browser: string | null
+  os: string | null
+  screen_resolution: string | null
+  first_seen: string
+  bot_filtered: boolean
+  suspicion_score: number
+}
+
+export interface BotFilterStats {
+  filtered_sessions: number
+  filtered_events: number
+  auto_blocked_this_month: number
+}
+
+function buildQuery(opts: { startDate?: string; endDate?: string; suspicious?: boolean; limit?: number }): string {
+  const params = new URLSearchParams()
+  if (opts.startDate) params.append('start_date', opts.startDate)
+  if (opts.endDate) params.append('end_date', opts.endDate)
+  if (opts.suspicious) params.append('suspicious', 'true')
+  if (opts.limit != null) params.append('limit', opts.limit.toString())
+  const q = params.toString()
+  return q ? `?${q}` : ''
+}
+
+export function listSessions(siteId: string, startDate: string, endDate: string, suspiciousOnly?: boolean, limit?: number): Promise<{ sessions: SessionSummary[] }> {
+  return apiRequest<{ sessions: SessionSummary[] }>(`/sites/${siteId}/sessions${buildQuery({ startDate, endDate, suspicious: suspiciousOnly, limit })}`)
+}
+
+export function botFilterSessions(siteId: string, sessionIds: string[]): Promise<{ updated: number }> {
+  return apiRequest<{ updated: number }>(`/sites/${siteId}/bot-filter`, {
+    method: 'POST',
+    body: JSON.stringify({ session_ids: sessionIds }),
+  })
+}
+
+export function botUnfilterSessions(siteId: string, sessionIds: string[]): Promise<{ updated: number }> {
+  return apiRequest<{ updated: number }>(`/sites/${siteId}/bot-filter`, {
+    method: 'DELETE',
+    body: JSON.stringify({ session_ids: sessionIds }),
+  })
+}
+
+export function getBotFilterStats(siteId: string): Promise<BotFilterStats> {
+  return apiRequest<BotFilterStats>(`/sites/${siteId}/bot-filter/stats`)
+}
diff --git a/lib/api/client.ts b/lib/api/client.ts
index 4d348e5..3919cb4 100644
--- a/lib/api/client.ts
+++ b/lib/api/client.ts
@@ -238,8 +238,9 @@ async function apiRequest<T>(
     if (response.status === 401) {
       // * Attempt Token Refresh if 401
       if (typeof window !== 'undefined') {
-        // * Prevent infinite loop: Don't refresh if the failed request WAS a refresh request (unlikely via apiRequest but safe to check)
-        if (!endpoint.includes('/auth/refresh')) {
+        // * Skip token refresh for public endpoints (they use password auth, not session tokens)
+        // * and for refresh requests themselves (prevent infinite loop)
+        if (!endpoint.includes('/auth/refresh') && !endpoint.includes('/public/')) {
           if (isRefreshing) {
             // * If refresh is already in progress, wait for it to complete (or fail)
             return new Promise<T>((resolve, reject) => {
diff --git a/lib/api/report-schedules.ts b/lib/api/report-schedules.ts
index 685b06f..cc0cfdb 100644
--- a/lib/api/report-schedules.ts
+++ b/lib/api/report-schedules.ts
@@ -10,6 +10,7 @@ export interface ReportSchedule {
   timezone: string
   enabled: boolean
   report_type: 'summary' | 'pages' | 'sources' | 'goals'
+  purpose: 'report' | 'alert'
   send_hour: number
   send_day: number | null
   next_send_at: string | null
@@ -33,6 +34,7 @@ export interface CreateReportScheduleRequest {
   frequency: string
   timezone?: string
   report_type?: string
+  purpose?: 'report' | 'alert'
   send_hour?: number
   send_day?: number
 }
@@ -43,6 +45,7 @@ export interface UpdateReportScheduleRequest {
   frequency?: string
   timezone?: string
   report_type?: string
+  purpose?: 'report' | 'alert'
   enabled?: boolean
   send_hour?: number
   send_day?: number
@@ -73,6 +76,11 @@ export async function deleteReportSchedule(siteId: string, scheduleId: string):
   })
 }
 
+export async function listAlertSchedules(siteId: string): Promise<ReportSchedule[]> {
+  const res = await apiRequest<{ report_schedules: ReportSchedule[] }>(`/sites/${siteId}/report-schedules?purpose=alert`)
+  return res?.report_schedules ?? []
+}
+
 export async function testReportSchedule(siteId: string, scheduleId: string): Promise<void> {
   await apiRequest(`/sites/${siteId}/report-schedules/${scheduleId}/test`, {
     method: 'POST',
diff --git a/lib/api/sites.ts b/lib/api/sites.ts
index 7093b57..55992f9 100644
--- a/lib/api/sites.ts
+++ b/lib/api/sites.ts
@@ -23,6 +23,10 @@ export interface Site {
   hide_unknown_locations?: boolean
   // Data retention (months); 0 = keep forever
   data_retention_months?: number
+  // Script feature toggles
+  script_features?: Record<string, unknown>
+  // Uptime monitoring toggle
+  uptime_enabled: boolean
   is_verified?: boolean
   created_at: string
   updated_at: string
@@ -49,6 +53,10 @@ export interface UpdateSiteRequest {
   collect_screen_resolution?: boolean
   // Bot and noise filtering
   filter_bots?: boolean
+  // Script feature toggles
+  script_features?: Record<string, unknown>
+  // Uptime monitoring toggle
+  uptime_enabled?: boolean
   // Hide unknown locations from stats
   hide_unknown_locations?: boolean
   // Data retention (months); 0 = keep forever
diff --git a/lib/api/stats.ts b/lib/api/stats.ts
index a26fa04..9897d6c 100644
--- a/lib/api/stats.ts
+++ b/lib/api/stats.ts
@@ -117,6 +117,21 @@ export interface FrustrationByPage {
   unique_elements: number
 }
 
+// ─── Public Auth ─────────────────────────────────────────────────────
+
+export function authenticatePublicDashboard(siteId: string, password: string, captchaToken?: string, captchaId?: string, captchaSolution?: string): Promise<{ status: string }> {
+  return apiRequest<{ status: string }>(`/public/sites/${siteId}/auth`, {
+    method: 'POST',
+    body: JSON.stringify({
+      password,
+      captcha_token: captchaToken || '',
+      captcha_id: captchaId || '',
+      captcha_solution: captchaSolution || '',
+    }),
+    credentials: 'include',
+  })
+}
+
 // ─── Helpers ────────────────────────────────────────────────────────
 
 function appendAuthParams(params: URLSearchParams, auth?: AuthParams) {
diff --git a/lib/api/uptime.ts b/lib/api/uptime.ts
index 5f4ec6f..f53e69d 100644
--- a/lib/api/uptime.ts
+++ b/lib/api/uptime.ts
@@ -54,23 +54,6 @@ export interface UptimeStatusResponse {
   total_monitors: number
 }
 
-export interface CreateMonitorRequest {
-  name: string
-  url: string
-  check_interval_seconds?: number
-  expected_status_code?: number
-  timeout_seconds?: number
-}
-
-export interface UpdateMonitorRequest {
-  name: string
-  url: string
-  check_interval_seconds?: number
-  expected_status_code?: number
-  timeout_seconds?: number
-  enabled?: boolean
-}
-
 /**
  * Fetches the uptime status overview for all monitors of a site
  */
@@ -82,43 +65,6 @@ export async function getUptimeStatus(siteId: string, startDate?: string, endDat
   return apiRequest<UptimeStatusResponse>(`/sites/${siteId}/uptime/status${query ? `?${query}` : ''}`)
 }
 
-/**
- * Lists all uptime monitors for a site
- */
-export async function listUptimeMonitors(siteId: string): Promise<UptimeMonitor[]> {
-  const res = await apiRequest<{ monitors: UptimeMonitor[] }>(`/sites/${siteId}/uptime/monitors`)
-  return res?.monitors ?? []
-}
-
-/**
- * Creates a new uptime monitor
- */
-export async function createUptimeMonitor(siteId: string, data: CreateMonitorRequest): Promise<UptimeMonitor> {
-  return apiRequest<UptimeMonitor>(`/sites/${siteId}/uptime/monitors`, {
-    method: 'POST',
-    body: JSON.stringify(data),
-  })
-}
-
-/**
- * Updates an existing uptime monitor
- */
-export async function updateUptimeMonitor(siteId: string, monitorId: string, data: UpdateMonitorRequest): Promise<UptimeMonitor> {
-  return apiRequest<UptimeMonitor>(`/sites/${siteId}/uptime/monitors/${monitorId}`, {
-    method: 'PUT',
-    body: JSON.stringify(data),
-  })
-}
-
-/**
- * Deletes an uptime monitor
- */
-export async function deleteUptimeMonitor(siteId: string, monitorId: string): Promise<void> {
-  await apiRequest(`/sites/${siteId}/uptime/monitors/${monitorId}`, {
-    method: 'DELETE',
-  })
-}
-
 /**
  * Fetches recent checks for a specific monitor
  */
diff --git a/lib/swr/dashboard.ts b/lib/swr/dashboard.ts
index 8b15a85..1962e67 100644
--- a/lib/swr/dashboard.ts
+++ b/lib/swr/dashboard.ts
@@ -32,7 +32,8 @@ import type { Site } from '@/lib/api/sites'
 import { listFunnels, type Funnel } from '@/lib/api/funnels'
 import { getUptimeStatus, type UptimeStatusResponse } from '@/lib/api/uptime'
 import { listGoals, type Goal } from '@/lib/api/goals'
-import { listReportSchedules, type ReportSchedule } from '@/lib/api/report-schedules'
+import { listReportSchedules, listAlertSchedules, type ReportSchedule } from '@/lib/api/report-schedules'
+import { listSessions, getBotFilterStats, type SessionSummary, type BotFilterStats } from '@/lib/api/bot-filter'
 import { getGSCStatus, getGSCOverview, getGSCTopQueries, getGSCTopPages, getGSCDailyTotals, getGSCNewQueries } from '@/lib/api/gsc'
 import type { GSCStatus, GSCOverview, GSCQueryResponse, GSCPageResponse, GSCDailyTotal, GSCNewQueries } from '@/lib/api/gsc'
 import { getBunnyStatus, getBunnyOverview, getBunnyDailyStats, getBunnyTopCountries } from '@/lib/api/bunny'
@@ -80,6 +81,7 @@ const fetchers = {
   uptimeStatus: (siteId: string) => getUptimeStatus(siteId),
   goals: (siteId: string) => listGoals(siteId),
   reportSchedules: (siteId: string) => listReportSchedules(siteId),
+  alertSchedules: (siteId: string) => listAlertSchedules(siteId),
   gscStatus: (siteId: string) => getGSCStatus(siteId),
   gscOverview: (siteId: string, start: string, end: string) => getGSCOverview(siteId, start, end),
   gscTopQueries: (siteId: string, start: string, end: string, limit: number, offset: number) => getGSCTopQueries(siteId, start, end, limit, offset),
@@ -410,6 +412,19 @@ export function useReportSchedules(siteId: string) {
   )
 }
 
+// * Hook for alert schedules (uptime alerts)
+export function useAlertSchedules(siteId: string) {
+  return useSWR<ReportSchedule[]>(
+    siteId ? ['alertSchedules', siteId] : null,
+    () => fetchers.alertSchedules(siteId),
+    {
+      ...dashboardSWRConfig,
+      refreshInterval: 60 * 1000,
+      dedupingInterval: 10 * 1000,
+    }
+  )
+}
+
 // * Hook for GSC connection status
 export function useGSCStatus(siteId: string) {
   return useSWR<GSCStatus>(
@@ -517,5 +532,23 @@ export function useSubscription() {
   )
 }
 
+// * Hook for session list (bot review)
+export function useSessions(siteId: string, startDate: string, endDate: string, suspiciousOnly: boolean) {
+  return useSWR<{ sessions: SessionSummary[] }>(
+    siteId && startDate && endDate ? ['sessions', siteId, startDate, endDate, suspiciousOnly] : null,
+    () => listSessions(siteId, startDate, endDate, suspiciousOnly),
+    { ...dashboardSWRConfig, refreshInterval: 0, dedupingInterval: 10 * 1000 }
+  )
+}
+
+// * Hook for bot filter stats
+export function useBotFilterStats(siteId: string) {
+  return useSWR<BotFilterStats>(
+    siteId ? ['botFilterStats', siteId] : null,
+    () => getBotFilterStats(siteId),
+    { ...dashboardSWRConfig, refreshInterval: 60 * 1000, dedupingInterval: 10 * 1000 }
+  )
+}
+
 // * Re-export for convenience
 export { fetchers }
diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index 14aee6e..e1c7d4f 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -5,22 +5,42 @@ import {
   DeviceMobile,
   DeviceTablet,
   Desktop,
-  GoogleLogo,
-  FacebookLogo,
-  XLogo,
-  LinkedinLogo,
-  InstagramLogo,
-  GithubLogo,
-  YoutubeLogo,
-  RedditLogo,
-  Robot,
   Link,
-  WhatsappLogo,
-  TelegramLogo,
-  SnapchatLogo,
-  PinterestLogo,
-  ThreadsLogo,
 } from '@phosphor-icons/react'
+import {
+  SiGoogle,
+  SiFacebook,
+  SiInstagram,
+  SiGithub,
+  SiYoutube,
+  SiReddit,
+  SiWhatsapp,
+  SiTelegram,
+  SiSnapchat,
+  SiPinterest,
+  SiThreads,
+  SiDuckduckgo,
+  SiBrave,
+  SiPerplexity,
+  SiAnthropic,
+  SiGooglegemini,
+  SiGithubcopilot,
+  SiDiscord,
+} from '@icons-pack/react-simple-icons'
+
+// Inline SVG icons for brands not in @icons-pack/react-simple-icons
+function XIcon({ size = 16, color = '#fff' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
+}
+function LinkedInIcon({ size = 16, color = '#0A66C2' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+}
+function OpenAIIcon({ size = 16, color = '#fff' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg>
+}
+function BingIcon({ size = 16, color = '#258FFA' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M5.71 0v18.39l4.44 2.46 8.14-4.69v-4.71l-8.14-2.84V4.09L5.71 0zm4.44 11.19l4.39 1.53v2.78l-4.39 2.53v-6.84z"/></svg>
+}
 
 /**
  * Google's public favicon service base URL.
@@ -97,33 +117,39 @@ export function getDeviceIcon(deviceName: string) {
   return <Question className="text-neutral-400" />
 }
 
+const SI = { size: 16 } as const
+
 export function getReferrerIcon(referrerName: string) {
   if (!referrerName) return <Globe className="text-neutral-400" />
   const lower = referrerName.toLowerCase()
-  if (lower.includes('google')) return <GoogleLogo className="text-blue-500" />
-  if (lower.includes('facebook')) return <FacebookLogo className="text-blue-600" />
-  if (lower.includes('twitter') || lower.includes('t.co') || lower.includes('x.com')) return <XLogo className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('linkedin')) return <LinkedinLogo className="text-blue-700" />
-  if (lower.includes('instagram')) return <InstagramLogo className="text-pink-600" />
-  if (lower.includes('github')) return <GithubLogo className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('youtube')) return <YoutubeLogo className="text-red-600" />
-  if (lower.includes('reddit')) return <RedditLogo className="text-orange-600" />
-  if (lower.includes('whatsapp')) return <WhatsappLogo className="text-green-500" />
-  if (lower.includes('telegram')) return <TelegramLogo className="text-blue-500" />
-  if (lower.includes('snapchat')) return <SnapchatLogo className="text-yellow-400" />
-  if (lower.includes('pinterest')) return <PinterestLogo className="text-red-600" />
-  if (lower.includes('threads')) return <ThreadsLogo className="text-neutral-800 dark:text-neutral-200" />
-  // AI assistants and search tools
-  if (lower.includes('chatgpt') || lower.includes('openai')) return <Robot className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('perplexity')) return <Robot className="text-teal-600" />
-  if (lower.includes('claude') || lower.includes('anthropic')) return <Robot className="text-orange-500" />
-  if (lower.includes('gemini')) return <Robot className="text-blue-500" />
-  if (lower.includes('copilot')) return <Robot className="text-blue-500" />
-  if (lower.includes('deepseek')) return <Robot className="text-blue-600" />
-  if (lower.includes('grok') || lower.includes('x.ai')) return <XLogo className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('phind')) return <Robot className="text-purple-600" />
-  if (lower.includes('you.com')) return <Robot className="text-indigo-600" />
-  // Shared Link (unattributed deep-page traffic)
+  // Social / platforms
+  if (lower.includes('google') && !lower.includes('gemini')) return <SiGoogle size={SI.size} color="#4285F4" />
+  if (lower.includes('facebook')) return <SiFacebook size={SI.size} color="#0866FF" />
+  if (lower.includes('twitter') || lower.includes('t.co') || lower.includes('x.com')) return <XIcon />
+  if (lower.includes('linkedin')) return <LinkedInIcon />
+  if (lower.includes('instagram')) return <SiInstagram size={SI.size} color="#E4405F" />
+  if (lower.includes('github')) return <SiGithub size={SI.size} color="#fff" />
+  if (lower.includes('youtube')) return <SiYoutube size={SI.size} color="#FF0000" />
+  if (lower.includes('reddit')) return <SiReddit size={SI.size} color="#FF4500" />
+  if (lower.includes('whatsapp')) return <SiWhatsapp size={SI.size} color="#25D366" />
+  if (lower.includes('telegram')) return <SiTelegram size={SI.size} color="#26A5E4" />
+  if (lower.includes('snapchat')) return <SiSnapchat size={SI.size} color="#FFFC00" />
+  if (lower.includes('pinterest')) return <SiPinterest size={SI.size} color="#BD081C" />
+  if (lower.includes('threads')) return <SiThreads size={SI.size} color="#fff" />
+  if (lower.includes('discord')) return <SiDiscord size={SI.size} color="#5865F2" />
+  // Search engines
+  if (lower.includes('bing')) return <BingIcon />
+  if (lower.includes('duckduckgo')) return <SiDuckduckgo size={SI.size} color="#DE5833" />
+  if (lower.includes('brave')) return <SiBrave size={SI.size} color="#FB542B" />
+  // AI assistants
+  if (lower.includes('chatgpt') || lower.includes('openai')) return <OpenAIIcon />
+  if (lower.includes('perplexity')) return <SiPerplexity size={SI.size} color="#1FB8CD" />
+  if (lower.includes('claude') || lower.includes('anthropic')) return <SiAnthropic size={SI.size} color="#D97757" />
+  if (lower.includes('gemini')) return <SiGooglegemini size={SI.size} color="#8E75B2" />
+  if (lower.includes('copilot')) return <SiGithubcopilot size={SI.size} color="#fff" />
+  if (lower.includes('deepseek')) return <OpenAIIcon color="#4D6BFE" />
+  if (lower.includes('grok') || lower.includes('x.ai')) return <XIcon />
+  // Shared Link
   if (lower === 'shared link') return <Link className="text-neutral-500" />
 
   return <Globe className="text-neutral-400" />
@@ -147,6 +173,8 @@ const REFERRER_DISPLAY_OVERRIDES: Record<string, string> = {
   youtube: 'YouTube',
   reddit: 'Reddit',
   github: 'GitHub',
+  bing: 'Bing',
+  brave: 'Brave',
   duckduckgo: 'DuckDuckGo',
   whatsapp: 'WhatsApp',
   telegram: 'Telegram',
@@ -246,12 +274,44 @@ export function mergeReferrersByDisplayName(
     .sort((a, b) => b.pageviews - a.pageviews)
 }
 
-/** Domains that always use the custom X icon instead of favicon (avoids legacy bird). */
-const REFERRER_USE_X_ICON = new Set(['t.co', 'x.com', 'twitter.com', 'www.twitter.com'])
+/**
+ * Domains/labels where the Phosphor icon is better than Google's favicon service.
+ * For these, getReferrerFavicon returns null so the caller falls back to getReferrerIcon.
+ */
+const REFERRER_PREFER_ICON = new Set([
+  // Social / platforms
+  't.co', 'x.com', 'twitter.com', 'www.twitter.com',
+  'google.com', 'www.google.com',
+  'facebook.com', 'www.facebook.com', 'm.facebook.com', 'l.facebook.com',
+  'instagram.com', 'www.instagram.com', 'l.instagram.com',
+  'linkedin.com', 'www.linkedin.com',
+  'github.com', 'www.github.com',
+  'youtube.com', 'www.youtube.com', 'm.youtube.com',
+  'reddit.com', 'www.reddit.com', 'old.reddit.com',
+  'whatsapp.com', 'www.whatsapp.com', 'web.whatsapp.com',
+  'telegram.org', 'web.telegram.org', 't.me',
+  'snapchat.com', 'www.snapchat.com',
+  'pinterest.com', 'www.pinterest.com',
+  'threads.net', 'www.threads.net',
+  // Search engines
+  'bing.com', 'www.bing.com',
+  'duckduckgo.com', 'www.duckduckgo.com',
+  'search.brave.com', 'brave.com',
+  // AI assistants
+  'chatgpt.com', 'chat.openai.com', 'openai.com',
+  'perplexity.ai', 'www.perplexity.ai',
+  'claude.ai', 'www.claude.ai', 'anthropic.com',
+  'gemini.google.com',
+  'copilot.microsoft.com',
+  'deepseek.com', 'chat.deepseek.com',
+  'grok.x.ai', 'x.ai',
+  'phind.com', 'www.phind.com',
+  'you.com', 'www.you.com',
+])
 
 /**
  * Returns a favicon URL for the referrer's domain, or null for non-URL referrers
- * (e.g. "Direct", "Unknown") so callers can show an icon fallback instead.
+ * (e.g. "Direct", "Unknown") or known services where the Phosphor icon is better.
  */
 export function getReferrerFavicon(referrer: string): string | null {
   if (!referrer || typeof referrer !== 'string') return null
@@ -261,8 +321,13 @@ export function getReferrerFavicon(referrer: string): string | null {
   if (!normalized.includes('.')) return null
   try {
     const url = new URL(referrer.startsWith('http') ? referrer : `https://${referrer}`)
-    if (REFERRER_USE_X_ICON.has(url.hostname.toLowerCase())) return null
-    return `${FAVICON_SERVICE_URL}?domain=${url.hostname}&sz=32`
+    const hostname = url.hostname.toLowerCase()
+    // Use Phosphor icon for known services — Google favicons are unreliable for these
+    if (REFERRER_PREFER_ICON.has(hostname)) return null
+    // Also check if the label matches a known referrer (catches subdomains like search.google.com)
+    const label = getReferrerLabel(hostname)
+    if (REFERRER_DISPLAY_OVERRIDES[label]) return null
+    return `${FAVICON_SERVICE_URL}?domain=${hostname}&sz=32`
   } catch {
     return null
   }
diff --git a/package-lock.json b/package-lock.json
index 587ffc0..d128ea3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,31 +8,45 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.2.15",
+        "@ciphera-net/ui": "^0.3.1",
         "@ducanh2912/next-pwa": "^10.2.9",
+        "@icons-pack/react-simple-icons": "^13.13.0",
         "@phosphor-icons/react": "^2.1.10",
+        "@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/react-navigation-menu": "^1.2.14",
+        "@radix-ui/react-slot": "^1.2.4",
         "@simplewebauthn/browser": "^13.2.2",
         "@stripe/react-stripe-js": "^5.6.0",
         "@stripe/stripe-js": "^8.7.0",
         "@tanstack/react-virtual": "^3.13.21",
         "@types/d3": "^7.4.3",
+        "@visx/curve": "^3.12.0",
+        "@visx/event": "^3.12.0",
+        "@visx/gradient": "^3.12.0",
+        "@visx/grid": "^3.12.0",
+        "@visx/responsive": "^3.12.0",
+        "@visx/scale": "^3.12.0",
+        "@visx/shape": "^3.12.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cobe": "^0.6.5",
         "country-flag-icons": "^1.6.4",
         "d3": "^7.9.0",
+        "d3-array": "^3.2.4",
         "d3-scale": "^4.0.2",
         "framer-motion": "^12.23.26",
         "html-to-image": "^1.11.13",
         "iso-3166-2": "^1.0.0",
         "jspdf": "^4.0.0",
         "jspdf-autotable": "^5.0.7",
+        "lucide-react": "^0.577.0",
         "motion": "^12.35.2",
         "next": "^16.1.1",
         "radix-ui": "^1.4.3",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
         "react-markdown": "^10.1.0",
+        "react-use-measure": "^2.1.7",
         "recharts": "^2.15.0",
         "sonner": "^2.0.7",
         "svg-dotted-map": "^2.0.1",
@@ -42,8 +56,10 @@
       },
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.19",
+        "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
+        "@types/d3-array": "^3.2.2",
         "@types/d3-scale": "^4.0.9",
         "@types/node": "^20.14.12",
         "@types/react": "^19.2.14",
@@ -172,7 +188,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1670,9 +1685,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.2.15",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.15/ec35ffe3be80cb5deca6a05bd2d36d636333a4a9",
-      "integrity": "sha512-Y2snU21OFbcarVq6QbSkW/pbL3BL9SePf8dBzC36zUvDp5TuhIU7E/21ydVGxGH6Ye6wKw2G1Qsv3xsnsumyPA==",
+      "version": "0.3.1",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.1/5696ea330397dfdedfb12cff5dc20ed073ede0d2",
+      "integrity": "sha512-NJgpcKERXbsMLABAdUsLq1V76O3lDFikAlf8xL4yfk19Jsg11llGEqtiW5CxmuyHWJXUiZjfT0M4sbwui0FAdA==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
@@ -1784,7 +1799,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       },
@@ -1825,7 +1839,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       }
@@ -2575,6 +2588,19 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@icons-pack/react-simple-icons": {
+      "version": "13.13.0",
+      "resolved": "https://registry.npmjs.org/@icons-pack/react-simple-icons/-/react-simple-icons-13.13.0.tgz",
+      "integrity": "sha512-B5HhQMIpcSH4z8IZ8HFhD59CboHceKYMpPC9kAwGyKntvPdyJJv26DLu4Z1wAjcCLyrJhf11tMhiQGom9Rxb9g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=24",
+        "pnpm": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.13 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
@@ -3435,6 +3461,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "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/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -3594,6 +3638,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "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/@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",
@@ -3688,6 +3750,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "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/@radix-ui/react-direction": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
@@ -3858,6 +3938,15 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
+      "integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
@@ -3939,6 +4028,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "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/@radix-ui/react-menubar": {
       "version": "1.1.16",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz",
@@ -4108,6 +4215,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "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/@radix-ui/react-popper": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
@@ -4211,6 +4336,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "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/@radix-ui/react-progress": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
@@ -4372,6 +4515,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "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/@radix-ui/react-separator": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
@@ -4429,9 +4590,9 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
-      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "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"
@@ -4656,6 +4817,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "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/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -5380,7 +5559,6 @@
       "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.7.0.tgz",
       "integrity": "sha512-tNUerSstwNC1KuHgX4CASGO0Md3CB26IJzSXmVlSuFvhsBP4ZaEPpY4jxWOn9tfdDscuVT4Kqb8cZ2o9nLCgRQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12.16"
       }
@@ -5553,9 +5731,8 @@
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
       "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.20.7",
         "@babel/types": "^7.20.7",
@@ -5568,7 +5745,7 @@
       "version": "7.27.0",
       "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
       "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.0.0"
@@ -5578,7 +5755,7 @@
       "version": "7.4.4",
       "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
       "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.1.0",
@@ -5589,7 +5766,7 @@
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
       "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.28.2"
@@ -5875,26 +6052,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/eslint": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
-      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -5929,6 +6086,7 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json5": {
@@ -5938,6 +6096,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.24",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz",
+      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -5957,6 +6121,7 @@
       "version": "20.19.33",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.33.tgz",
       "integrity": "sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -5980,7 +6145,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -5989,9 +6153,8 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -6059,7 +6222,6 @@
       "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.56.0",
         "@typescript-eslint/types": "8.56.0",
@@ -6572,6 +6734,311 @@
         "win32"
       ]
     },
+    "node_modules/@visx/curve": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/curve/-/curve-3.12.0.tgz",
+      "integrity": "sha512-Ng1mefXIzoIoAivw7dJ+ZZYYUbfuwXgZCgQynShr6ZIVw7P4q4HeQfJP3W24ON+1uCSrzoycHSXRelhR9SBPcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-shape": "^1.3.1",
+        "d3-shape": "^1.0.6"
+      }
+    },
+    "node_modules/@visx/curve/node_modules/@types/d3-path": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
+      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/curve/node_modules/@types/d3-shape": {
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
+      "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "^1"
+      }
+    },
+    "node_modules/@visx/curve/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@visx/curve/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/@visx/event": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/event/-/event-3.12.0.tgz",
+      "integrity": "sha512-9Lvw6qJ0Fi+y1vsC1WspfdIKCxHTb7oy59Uql1uBdPGT8zChP0vuxW0jQNQRDbKgoefj4pCXAFi8+MF1mEtVTw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/point": "3.12.0"
+      }
+    },
+    "node_modules/@visx/gradient": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/gradient/-/gradient-3.12.0.tgz",
+      "integrity": "sha512-QRatjjdUEPbcp4pqRca1JlChpAnmmIAO3r3ZscLK7D1xEIANlIjzjl3uNgrmseYmBAYyPCcJH8Zru07R97ovOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "prop-types": "^15.5.7"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/grid": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.12.0.tgz",
+      "integrity": "sha512-L4ex2ooSYhwNIxJ3XFIKRhoSvEGjPc2Y3YCrtNB4TV5Ofdj4q0UMOsxfrH23Pr8HSHuQhb6VGMgYoK0LuWqDmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/curve": "3.12.0",
+        "@visx/group": "3.12.0",
+        "@visx/point": "3.12.0",
+        "@visx/scale": "3.12.0",
+        "@visx/shape": "3.12.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/group": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/group/-/group-3.12.0.tgz",
+      "integrity": "sha512-Dye8iS1alVXPv7nj/7M37gJe6sSKqJLH7x6sEWAsRQ9clI0kFvjbKcKgF+U3aAVQr0NCohheFV+DtR8trfK/Ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/point": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/point/-/point-3.12.0.tgz",
+      "integrity": "sha512-I6UrHoJAEVbx3RORQNupgTiX5EzjuZpiwLPxn8L2mI5nfERotPKi1Yus12Cq2WtXqEBR/WgqTnoImlqOXBykcA==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/responsive": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/responsive/-/responsive-3.12.0.tgz",
+      "integrity": "sha512-GV1BTYwAGlk/K5c9vH8lS2syPnTuIqEacI7L6LRPbsuaLscXMNi+i9fZyzo0BWvAdtRV8v6Urzglo++lvAXT1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/scale": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-3.12.0.tgz",
+      "integrity": "sha512-+ubijrZ2AwWCsNey0HGLJ0YKNeC/XImEFsr9rM+Uef1CM3PNM43NDdNTrdBejSlzRq0lcfQPWYMYQFSlkLcPOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@visx/vendor": "3.12.0"
+      }
+    },
+    "node_modules/@visx/shape": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-3.12.0.tgz",
+      "integrity": "sha512-/1l0lrpX9tPic6SJEalryBKWjP/ilDRnQA+BGJTI1tj7i23mJ/J0t4nJHyA1GrL4QA/bM/qTJ35eyz5dEhJc4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "^1.0.8",
+        "@types/d3-shape": "^1.3.1",
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "@visx/curve": "3.12.0",
+        "@visx/group": "3.12.0",
+        "@visx/scale": "3.12.0",
+        "classnames": "^2.3.1",
+        "d3-path": "^1.0.5",
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/shape/node_modules/@types/d3-path": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
+      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/shape/node_modules/@types/d3-shape": {
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
+      "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "^1"
+      }
+    },
+    "node_modules/@visx/shape/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@visx/shape/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/@visx/vendor": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/vendor/-/vendor-3.12.0.tgz",
+      "integrity": "sha512-SVO+G0xtnL9dsNpGDcjCgoiCnlB3iLSM9KLz1sLbSrV7RaVXwY3/BTm2X9OWN1jH2a9M+eHt6DJ6sE6CXm4cUg==",
+      "license": "MIT and ISC",
+      "dependencies": {
+        "@types/d3-array": "3.0.3",
+        "@types/d3-color": "3.1.0",
+        "@types/d3-delaunay": "6.0.1",
+        "@types/d3-format": "3.0.1",
+        "@types/d3-geo": "3.1.0",
+        "@types/d3-interpolate": "3.0.1",
+        "@types/d3-scale": "4.0.2",
+        "@types/d3-time": "3.0.0",
+        "@types/d3-time-format": "2.1.0",
+        "d3-array": "3.2.1",
+        "d3-color": "3.1.0",
+        "d3-delaunay": "6.0.2",
+        "d3-format": "3.1.0",
+        "d3-geo": "3.1.0",
+        "d3-interpolate": "3.0.1",
+        "d3-scale": "4.0.2",
+        "d3-time": "3.1.0",
+        "d3-time-format": "4.1.0",
+        "internmap": "2.0.3"
+      }
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-array": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.3.tgz",
+      "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-delaunay": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz",
+      "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-format": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
+      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-time-format": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.0.tgz",
+      "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/vendor/node_modules/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@visx/vendor/node_modules/d3-delaunay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.2.tgz",
+      "integrity": "sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@visx/vendor/node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@visx/vendor/node_modules/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.4.tgz",
@@ -6734,170 +7201,11 @@
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@webassemblyjs/ast": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
-      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.13.2",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
-      }
-    },
-    "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
-      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
-      "license": "MIT"
-    },
-    "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
-      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
-      "license": "MIT"
-    },
-    "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
-      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
-      "license": "MIT"
-    },
-    "node_modules/@webassemblyjs/helper-numbers": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
-      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
-        "@webassemblyjs/helper-api-error": "1.13.2",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
-      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
-      "license": "MIT"
-    },
-    "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
-      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/wasm-gen": "1.14.1"
-      }
-    },
-    "node_modules/@webassemblyjs/ieee754": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
-      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
-      "license": "MIT",
-      "dependencies": {
-        "@xtuc/ieee754": "^1.2.0"
-      }
-    },
-    "node_modules/@webassemblyjs/leb128": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
-      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@webassemblyjs/utf8": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
-      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
-      "license": "MIT"
-    },
-    "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
-      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/helper-wasm-section": "1.14.1",
-        "@webassemblyjs/wasm-gen": "1.14.1",
-        "@webassemblyjs/wasm-opt": "1.14.1",
-        "@webassemblyjs/wasm-parser": "1.14.1",
-        "@webassemblyjs/wast-printer": "1.14.1"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
-      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/ieee754": "1.13.2",
-        "@webassemblyjs/leb128": "1.13.2",
-        "@webassemblyjs/utf8": "1.13.2"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
-      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/wasm-gen": "1.14.1",
-        "@webassemblyjs/wasm-parser": "1.14.1"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
-      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-api-error": "1.13.2",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/ieee754": "1.13.2",
-        "@webassemblyjs/leb128": "1.13.2",
-        "@webassemblyjs/utf8": "1.13.2"
-      }
-    },
-    "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
-      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "license": "Apache-2.0"
-    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6905,18 +7213,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-import-phases": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
-      "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "peerDependencies": {
-        "acorn": "^8.14.0"
-      }
-    },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -6963,45 +7259,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/ajv-formats": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.18.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
-      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT"
-    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -7503,7 +7760,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -7759,15 +8015,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/chrome-trace-event": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
-      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -7780,6 +8027,12 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -8343,7 +8596,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -8774,19 +9026,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.19.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
-      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.3.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -8914,12 +9153,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/es-module-lexer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
-      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
-      "license": "MIT"
-    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -9047,7 +9280,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -9233,7 +9465,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -9464,6 +9695,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
@@ -9476,6 +9708,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -9512,15 +9745,6 @@
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "license": "MIT"
     },
-    "node_modules/events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.x"
-      }
-    },
     "node_modules/expect-type": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
@@ -10000,12 +10224,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "license": "BSD-2-Clause"
-    },
     "node_modules/globals": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -10069,6 +10287,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -10940,42 +11159,12 @@
         "node": ">=10"
       }
     },
-    "node_modules/jest-worker": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
-      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^8.0.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/jest-worker/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
     "node_modules/jiti": {
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -11097,12 +11286,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "license": "MIT"
-    },
     "node_modules/json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -11161,7 +11344,6 @@
       "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.1.0.tgz",
       "integrity": "sha512-xd1d/XRkwqnsq6FP3zH1Q+Ejqn2ULIJeDZ+FTKpaabVpZREjsJKRJwuokTNgdqOU+fl55KgbvgZ1pRTSWCP2kQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "fast-png": "^6.2.0",
@@ -11272,19 +11454,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/loader-runner": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
-      "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.11.5"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -11357,6 +11526,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.577.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.577.0.tgz",
+      "integrity": "sha512-4LjoFv2eEPwYDPg/CUdBJQSDfPyzXCRrVW1X7jrx/trgxnxkHFjnVZINbzvzxjN70dxychOfg+FTYwBiS3pQ5A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -11545,12 +11723,6 @@
       "dev": true,
       "license": "CC0-1.0"
     },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "license": "MIT"
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -12015,27 +12187,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -12168,18 +12319,11 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "license": "MIT"
-    },
     "node_modules/next": {
       "version": "16.1.6",
       "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
       "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@next/env": "16.1.6",
         "@swc/helpers": "0.5.15",
@@ -12696,7 +12840,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -13038,6 +13181,24 @@
         }
       }
     },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "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/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -13062,7 +13223,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13072,7 +13232,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -13223,6 +13382,21 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -13513,7 +13687,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -13650,60 +13823,6 @@
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
-    "node_modules/schema-utils": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
-      "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/json-schema": "^7.0.9",
-        "ajv": "^8.9.0",
-        "ajv-formats": "^2.1.1",
-        "ajv-keywords": "^5.1.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/schema-utils/node_modules/ajv": {
-      "version": "8.18.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
-      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/schema-utils/node_modules/ajv-keywords": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3"
-      },
-      "peerDependencies": {
-        "ajv": "^8.8.2"
-      }
-    },
-    "node_modules/schema-utils/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT"
-    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -14379,7 +14498,6 @@
       "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -14426,19 +14544,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/tapable": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
-      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
     "node_modules/temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -14484,40 +14589,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/terser-webpack-plugin": {
-      "version": "5.3.16",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.16.tgz",
-      "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "jest-worker": "^27.4.5",
-        "schema-utils": "^4.3.0",
-        "serialize-javascript": "^6.0.2",
-        "terser": "^5.31.1"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.1.0"
-      },
-      "peerDependenciesMeta": {
-        "@swc/core": {
-          "optional": true
-        },
-        "esbuild": {
-          "optional": true
-        },
-        "uglify-js": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/terser/node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -14621,7 +14692,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -14870,7 +14940,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -14935,6 +15004,7 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
@@ -15295,7 +15365,6 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -15389,7 +15458,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -15563,104 +15631,12 @@
         "node": ">=18"
       }
     },
-    "node_modules/watchpack": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
-      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
-      "license": "MIT",
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
       "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
       "license": "BSD-2-Clause"
     },
-    "node_modules/webpack": {
-      "version": "5.105.2",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.2.tgz",
-      "integrity": "sha512-dRXm0a2qcHPUBEzVk8uph0xWSjV/xZxenQQbLwnwP7caQCYpqG1qddwlyEkIDkYn0K8tvmcrZ+bOrzoQ3HxCDw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/eslint-scope": "^3.7.7",
-        "@types/estree": "^1.0.8",
-        "@types/json-schema": "^7.0.15",
-        "@webassemblyjs/ast": "^1.14.1",
-        "@webassemblyjs/wasm-edit": "^1.14.1",
-        "@webassemblyjs/wasm-parser": "^1.14.1",
-        "acorn": "^8.15.0",
-        "acorn-import-phases": "^1.0.3",
-        "browserslist": "^4.28.1",
-        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.19.0",
-        "es-module-lexer": "^2.0.0",
-        "eslint-scope": "5.1.1",
-        "events": "^3.2.0",
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.11",
-        "json-parse-even-better-errors": "^2.3.1",
-        "loader-runner": "^4.3.1",
-        "mime-types": "^2.1.27",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^4.3.3",
-        "tapable": "^2.3.0",
-        "terser-webpack-plugin": "^5.3.16",
-        "watchpack": "^2.5.1",
-        "webpack-sources": "^3.3.3"
-      },
-      "bin": {
-        "webpack": "bin/webpack.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependenciesMeta": {
-        "webpack-cli": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/webpack-sources": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.4.tgz",
-      "integrity": "sha512-7tP1PdV4vF+lYPnkMR0jMY5/la2ub5Fc/8VQrrU+lXkiM6C4TjVfGw7iKfyhnTQOsD+6Q/iKw0eFciziRgD58Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/webpack/node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/webpack/node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/whatwg-mimetype": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
@@ -15917,7 +15893,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
       "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -16103,7 +16078,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
       "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -16271,7 +16245,6 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index c13b8aa..56c41a5 100644
--- a/package.json
+++ b/package.json
@@ -12,31 +12,45 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.2.15",
+    "@ciphera-net/ui": "^0.3.1",
     "@ducanh2912/next-pwa": "^10.2.9",
+    "@icons-pack/react-simple-icons": "^13.13.0",
     "@phosphor-icons/react": "^2.1.10",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-slot": "^1.2.4",
     "@simplewebauthn/browser": "^13.2.2",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
     "@tanstack/react-virtual": "^3.13.21",
     "@types/d3": "^7.4.3",
+    "@visx/curve": "^3.12.0",
+    "@visx/event": "^3.12.0",
+    "@visx/gradient": "^3.12.0",
+    "@visx/grid": "^3.12.0",
+    "@visx/responsive": "^3.12.0",
+    "@visx/scale": "^3.12.0",
+    "@visx/shape": "^3.12.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cobe": "^0.6.5",
     "country-flag-icons": "^1.6.4",
     "d3": "^7.9.0",
+    "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "framer-motion": "^12.23.26",
     "html-to-image": "^1.11.13",
     "iso-3166-2": "^1.0.0",
     "jspdf": "^4.0.0",
     "jspdf-autotable": "^5.0.7",
+    "lucide-react": "^0.577.0",
     "motion": "^12.35.2",
     "next": "^16.1.1",
     "radix-ui": "^1.4.3",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-markdown": "^10.1.0",
+    "react-use-measure": "^2.1.7",
     "recharts": "^2.15.0",
     "sonner": "^2.0.7",
     "svg-dotted-map": "^2.0.1",
@@ -52,8 +66,10 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
     "@types/node": "^20.14.12",
     "@types/react": "^19.2.14",
diff --git a/public/pulse-showcase-bg.png b/public/pulse-showcase-bg.png
new file mode 100644
index 0000000..4c82724
Binary files /dev/null and b/public/pulse-showcase-bg.png differ
diff --git a/styles/globals.css b/styles/globals.css
index a37e520..1937543 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -10,29 +10,6 @@
     --color-error: #EF4444;
 
     /* * Chart colors */
-    --chart-1: #FD5E0F;
-    --chart-2: #3b82f6;
-    --chart-3: #22c55e;
-    --chart-4: #a855f7;
-    --chart-5: #f59e0b;
-    --chart-grid: #f5f5f5;
-    --chart-axis: #a3a3a3;
-
-    /* * shadcn-compatible semantic tokens (for 21st.dev components) */
-    --background: 255 255 255;
-    --foreground: 23 23 23;
-    --card: 255 255 255;
-    --card-foreground: 23 23 23;
-    --popover: 255 255 255;
-    --popover-foreground: 23 23 23;
-    --primary: 253 94 15;
-    --primary-foreground: 255 255 255;
-    --secondary: 245 245 245;
-    --secondary-foreground: 23 23 23;
-    --destructive-foreground: 255 255 255;
-  }
-
-  .dark {
     --chart-1: #FD5E0F;
     --chart-2: #60a5fa;
     --chart-3: #4ade80;
@@ -41,7 +18,19 @@
     --chart-grid: #262626;
     --chart-axis: #737373;
 
-    /* * shadcn-compatible dark mode overrides */
+    /* * visx area chart tokens (dark-only) */
+    --chart-background: #0a0a0a;
+    --chart-foreground: #404040;
+    --chart-foreground-muted: #a3a3a3;
+    --chart-line-primary: #FD5E0F;
+    --chart-line-secondary: #737373;
+    --chart-crosshair: #404040;
+    --chart-label: #a3a3a3;
+    --chart-marker-background: #262626;
+    --chart-marker-border: #404040;
+    --chart-marker-foreground: #fafafa;
+
+    /* * shadcn-compatible semantic tokens (dark-only) */
     --background: 10 10 10;
     --foreground: 250 250 250;
     --card: 23 23 23;
@@ -52,15 +41,13 @@
     --primary-foreground: 255 255 255;
     --secondary: 38 38 38;
     --secondary-foreground: 250 250 250;
+    --accent: 38 38 38;
+    --accent-foreground: 250 250 250;
     --destructive-foreground: 255 255 255;
   }
-  
+
   body {
-    @apply bg-ciphera-gradient bg-fixed;
-  }
-  
-  .dark body {
-    @apply bg-ciphera-gradient-dark;
+    @apply bg-neutral-950 text-neutral-100 antialiased;
   }
 }