Merge pull request #34 from ciphera-net/staging

[PULSE-59] Design consistency audit fixes

CHANGELOG.md

@@ -6,6 +6,66 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.10.0-alpha] - 2026-02-21
+
+### Changed
+
+- **Design consistency (PULSE-59).** Pulse now feels more cohesive across all pages — headings, buttons, and layout are consistent.
+- **Headings.** Marketing and integration pages use the same heading sizes for a clearer visual hierarchy.
+- **Buttons.** Settings pages and the verification modal use consistent button styles. The Enterprise "Contact us" button on pricing now matches the rest.
+- **Settings layout.** Profile settings, Organization Settings, and Site Settings now span the full width of the page, matching the dashboard.
+- **Charts and maps.** Analytics charts, funnel views, and the uptime map now use Pulse's brand colors correctly in both light and dark mode.
+- **Integration guides.** Code examples in the integration and installation guides look cleaner and work better in dark mode.
+- **Dark mode.** Text and backgrounds across settings, pricing, and funnels are easier to read when you switch themes.
+- **Cards and panels.** All cards use consistent padding for a more even layout.
+- **Integration pages.** Integration setup guides have more comfortable spacing at the top.
+- **Org slug.** The organization URL prefix correctly shows `pulse.ciphera.net/` instead of the wrong domain.
+
+## [0.9.0-alpha] - 2026-02-21
+
+### Added
+
+- **Data retention settings (PULSE-58).** Site owners can choose how long raw event data is kept (1 month to 3 years depending on plan). Events older than the retention period are automatically deleted every 24 hours. Aggregated daily stats are preserved so historical charts remain intact.
+- **Data Retention section in Site Settings.** Under Data & Privacy, a dropdown lets you set retention; options are capped by your plan (free: up to 6 months, solo: 1 year, team: 2 years, business: 3 years).
+- **Privacy snippet includes retention.** The generated privacy policy text now mentions when raw data is automatically deleted.
+
+## [0.8.0-alpha] - 2026-02-20
+
+### Added
+
+- **Renewal date and amount.** The dashboard and billing tab now show when your subscription renews and how much you'll be charged.
+- **Invoice preview when changing plans.** Before you switch plans, you can see exactly what your next invoice will be (including prorations).
+- **Pay now for open invoices.** Unpaid invoices show a clear "Pay now" button so you can settle them quickly.
+- **Enterprise contact.** The pricing page Enterprise plan now links to email us directly instead of checkout.
+- **Past due alert.** If your payment fails, a red banner appears with a link to update your payment method.
+- **Pageview usage bar.** Your billing card shows a color-coded bar so you can see at a glance how close you are to your limit (green, then amber, then red).
+
+### Changed
+
+- **Change plan flow.** Cleaner plan selector with Solo, Team, and Business options. Shows which plan you're on and a preview of your next invoice. If the preview can't be calculated, you'll see a friendly message instead of a blank screen.
+- **Billing tab layout.** Improved spacing, clearer headings, and better focus when using keyboard navigation.
+- **Pricing page layout.** Updated spacing and typography. Slider and billing toggle are more accessible.
+- **Billing Portal return.** After updating your payment method in Stripe's portal, you're taken back to the billing tab instead of the general settings page.
+
+### Fixed
+
+- **Theme toggle crash.** Fixed a crash that could occur when switching between light and dark mode on the pricing page and then opening organization settings.
+
+## [0.7.0-alpha] - 2026-02-17
+
+### Changed
+
+- **ciphera-ui consolidation.** Migrated shared components and utilities to @ciphera-net/ui (v0.0.57): SwissFlagIcon, CodeBlock, Spinner, format utilities (formatNumber, formatDuration, formatDate, getDateRange, formatUpdatedAgo, formatRelativeTime), and auth error utilities (getAuthErrorMessage, authMessageFromStatus, authMessageFromErrorType). Removed 6 local duplicate files (LoadingOverlay, SwissFlagIcon, CodeBlock, authErrors.ts, format.ts).
+- **Form card border radius.** Login, signup, invite accept, verify, reset-password, forgot-password, and organization create cards now use rounded-2xl to match design system.
+- **Hardcoded brand colors.** Uptime page chart uses CSS variable var(--color-brand-orange) instead of #FD5E0F.
+- **Selection styling.** Removed redundant selection:bg-brand-orange/20 from page wrappers; relies on ciphera-ui base styles.
+- **Inline spinners.** Dashboard widgets (TopReferrers, Locations, TechSpecs, Campaigns, ContentStats), notifications page, and OrganizationSettings now use Spinner from ciphera-ui.
+- **Footer layout.** Authenticated footer container aligned to max-w-6xl (matches site dashboard and page-container-app).
+
+### Removed
+
+- **Dead components.** LoadingOverlay.tsx (unused; all usage already from ciphera-ui).
+
 ## [0.6.0-alpha] - 2026-02-13
 
 ### Added
@@ -67,7 +127,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ---
 
-[Unreleased]: https://github.com/ciphera-net/pulse/compare/v0.6.0-alpha...HEAD
+[Unreleased]: https://github.com/ciphera-net/pulse/compare/v0.10.0-alpha...HEAD
+[0.10.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.9.0-alpha...v0.10.0-alpha
+[0.9.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.8.0-alpha...v0.9.0-alpha
+[0.8.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.7.0-alpha...v0.8.0-alpha
+[0.7.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.6.0-alpha...v0.7.0-alpha
 [0.6.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.5.1-alpha...v0.6.0-alpha
 [0.5.1-alpha]: https://github.com/ciphera-net/pulse/compare/v0.5.0-alpha...v0.5.1-alpha
 [0.5.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.4.0-alpha...v0.5.0-alpha

app/about/page.tsx

@@ -57,7 +57,7 @@ function ComparisonTable({ title, competitors }: { title: string, competitors: {
 
 export default function AboutPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <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" />

app/auth/callback/page.tsx

@@ -5,7 +5,7 @@ import { useRouter, useSearchParams } from 'next/navigation'
 import { useAuth } from '@/lib/auth/context'
 import { AUTH_URL, default as apiRequest } from '@/lib/api/client'
 import { exchangeAuthCode, setSessionAction } from '@/app/actions/auth'
-import { authMessageFromErrorType, type AuthErrorType } from '@/lib/utils/authErrors'
+import { authMessageFromErrorType, type AuthErrorType } from '@ciphera-net/ui'
 import { LoadingOverlay } from '@ciphera-net/ui'
 
 function AuthCallbackContent() {

app/changelog/page.tsx

@@ -18,7 +18,7 @@ export default function ChangelogPage() {
 
   return (
     <div className="mx-auto max-w-3xl px-4 sm:px-6 py-8">
-      <h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
+      <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-2">
         Changelog
       </h1>
       <p className="text-neutral-600 dark:text-neutral-400 mb-8 text-sm">

app/features/page.tsx

@@ -106,7 +106,7 @@ const trustSignals = [
 
 export default function FeaturesPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <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" />
@@ -129,7 +129,7 @@ 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-6xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
             Everything you need. <br />
             <span className="gradient-text">Nothing you don&apos;t.</span>
           </h1>
@@ -147,7 +147,7 @@ export default function FeaturesPage() {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ duration: 0.5, delay: i * 0.1 }}
-              className="card-glass p-8 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 group"
+              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" />
@@ -171,7 +171,7 @@ export default function FeaturesPage() {
           className="mb-28"
         >
           <div className="text-center mb-14">
-            <h2 className="text-3xl md:text-4xl font-bold text-neutral-900 dark:text-white mb-4">
+            <h2 className="text-2xl font-bold text-neutral-900 dark: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">
@@ -215,7 +215,7 @@ export default function FeaturesPage() {
         >
           <div className="grid md:grid-cols-2 gap-10 items-center">
             <div>
-              <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">
+              <h2 className="text-2xl font-bold text-neutral-900 dark: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">
@@ -285,7 +285,7 @@ export default function FeaturesPage() {
           className="mb-28"
         >
           <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-neutral-900 dark:text-white mb-4">
+            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
               Built for trust
             </h2>
             <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
@@ -341,7 +341,7 @@ export default function FeaturesPage() {
           className="mb-28"
         >
           <div className="text-center mb-14">
-            <h2 className="text-3xl md:text-4xl font-bold text-neutral-900 dark:text-white mb-4">
+            <h2 className="text-2xl font-bold text-neutral-900 dark: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">
@@ -390,7 +390,7 @@ export default function FeaturesPage() {
           transition={{ duration: 0.5 }}
           className="text-center mb-20"
         >
-          <h2 className="text-3xl md:text-4xl font-bold text-neutral-900 dark:text-white mb-4">
+          <h2 className="text-2xl font-bold text-neutral-900 dark: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">

app/installation/page.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 
 export default function InstallationPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <div className="relative min-h-screen flex flex-col overflow-hidden">
       
       {/* * --- 1. ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
@@ -33,8 +33,8 @@ export default function InstallationPage() {
           <h2 className="text-2xl font-bold mb-8 text-neutral-900 dark: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-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
-            <div className="flex items-center px-4 py-3 bg-[#252526] border-b border-neutral-800">
+          <div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
+            <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" />
@@ -63,8 +63,8 @@ export default function InstallationPage() {
           <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.
           </p>
-          <div className="max-w-2xl mx-auto bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
-            <div className="flex items-center px-4 py-3 bg-[#252526] border-b border-neutral-800">
+          <div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
+            <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" />

app/integrations/nextjs/page.tsx

@@ -5,7 +5,7 @@ import { ArrowLeftIcon } from '@ciphera-net/ui'
 
 export default function NextJsIntegrationPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <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" />
@@ -16,7 +16,7 @@ export default function NextJsIntegrationPage() {
         />
       </div>
 
-      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-12 pb-10 z-10">
+      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
         <Link 
           href="/integrations" 
           className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
@@ -31,7 +31,7 @@ export default function NextJsIntegrationPage() {
               <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-3xl md:text-4xl font-bold text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
             Next.js Integration
           </h1>
         </div>
@@ -48,8 +48,8 @@ export default function NextJsIntegrationPage() {
             Add the script to your root layout file (usually <code>app/layout.tsx</code> or <code>app/layout.js</code>).
           </p>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">app/layout.tsx</span>
             </div>
             <div className="p-4 overflow-x-auto">
@@ -84,8 +84,8 @@ export default function RootLayout({
             If you are using the older Pages Router, add the script to your custom <code>_app.tsx</code> or <code>_document.tsx</code>.
           </p>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">pages/_app.tsx</span>
             </div>
             <div className="p-4 overflow-x-auto">

app/integrations/page.tsx

@@ -90,7 +90,7 @@ export default function IntegrationsPage() {
   }, [])
 
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <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" />
@@ -158,7 +158,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-[11px] 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-200/80 dark:bg-neutral-700/80 text-neutral-500 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600">
                   /
                 </kbd>
               </div>
@@ -285,7 +285,7 @@ export default function IntegrationsPage() {
                       >
                         <Link
                           href={`/integrations/${integration.id}`}
-                          className="group relative p-8 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:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
+                          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:outline-none focus:ring-2 focus:ring-brand-orange focus: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">
@@ -351,7 +351,7 @@ 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-8 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-300 dark: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">
               Missing something?

app/integrations/react/page.tsx

@@ -5,7 +5,7 @@ import { ArrowLeftIcon } from '@ciphera-net/ui'
 
 export default function ReactIntegrationPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <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" />
@@ -16,7 +16,7 @@ export default function ReactIntegrationPage() {
         />
       </div>
 
-      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-12 pb-10 z-10">
+      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
         <Link 
           href="/integrations" 
           className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
@@ -32,7 +32,7 @@ export default function ReactIntegrationPage() {
               <circle cx="64" cy="64" r="10.6" />
             </svg>
           </div>
-          <h1 className="text-3xl md:text-4xl font-bold text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
             React Integration
           </h1>
         </div>
@@ -49,8 +49,8 @@ export default function ReactIntegrationPage() {
             The simplest way is to add the script tag directly to the <code>&lt;head&gt;</code> of your <code>index.html</code> file.
           </p>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">public/index.html</span>
             </div>
             <div className="p-4 overflow-x-auto">
@@ -83,8 +83,8 @@ export default function ReactIntegrationPage() {
             If you need to load the script dynamically (e.g., only in production), you can use a <code>useEffect</code> hook in your main App component.
           </p>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">src/App.tsx</span>
             </div>
             <div className="p-4 overflow-x-auto">

app/integrations/vue/page.tsx

@@ -5,7 +5,7 @@ import { ArrowLeftIcon } from '@ciphera-net/ui'
 
 export default function VueIntegrationPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <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" />
@@ -16,7 +16,7 @@ export default function VueIntegrationPage() {
         />
       </div>
 
-      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-12 pb-10 z-10">
+      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
         <Link 
           href="/integrations" 
           className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
@@ -32,7 +32,7 @@ export default function VueIntegrationPage() {
               <path d="M64 24.6H39L64 67.4l25-42.8H64z" fill="#35495E" />
             </svg>
           </div>
-          <h1 className="text-3xl md:text-4xl font-bold text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
             Vue.js Integration
           </h1>
         </div>
@@ -49,8 +49,8 @@ export default function VueIntegrationPage() {
             Add the script tag to the <code>&lt;head&gt;</code> section of your <code>index.html</code> file. This works for both Vue 2 and Vue 3 projects created with Vue CLI or Vite.
           </p>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">index.html</span>
             </div>
             <div className="p-4 overflow-x-auto">
@@ -84,8 +84,8 @@ export default function VueIntegrationPage() {
             For Nuxt.js applications, you should add the script to your <code>nuxt.config.js</code> or <code>nuxt.config.ts</code> file.
           </p>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">nuxt.config.ts</span>
             </div>
             <div className="p-4 overflow-x-auto">

app/integrations/wordpress/page.tsx

@@ -5,7 +5,7 @@ import { ArrowLeftIcon } from '@ciphera-net/ui'
 
 export default function WordPressIntegrationPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <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" />
@@ -16,7 +16,7 @@ export default function WordPressIntegrationPage() {
         />
       </div>
 
-      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-12 pb-10 z-10">
+      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
         <Link 
           href="/integrations" 
           className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
@@ -31,7 +31,7 @@ export default function WordPressIntegrationPage() {
               <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-3xl md:text-4xl font-bold text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
             WordPress Integration
           </h1>
         </div>
@@ -50,8 +50,8 @@ export default function WordPressIntegrationPage() {
             <li>Paste the following code snippet:</li>
           </ol>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">Header Script</span>
             </div>
             <div className="p-4 overflow-x-auto">

app/not-found.tsx

@@ -3,7 +3,7 @@ import { Button } from '@ciphera-net/ui'
 
 export default function NotFound() {
   return (
-    <div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden selection:bg-brand-orange/20">
+    <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 */}

app/notifications/page.tsx

@@ -13,9 +13,9 @@ import {
   markAllNotificationsRead,
   type Notification,
 } from '@/lib/api/notifications'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatTimeAgo, getTypeIcon } from '@/lib/utils/notifications'
-import { Button, ArrowLeftIcon } from '@ciphera-net/ui'
+import { Button, ArrowLeftIcon, Spinner } from '@ciphera-net/ui'
 import { toast } from '@ciphera-net/ui'
 
 const PAGE_SIZE = 50
@@ -90,7 +90,7 @@ export default function NotificationsPage() {
 
   if (!user?.org_id) {
     return (
-      <div className="min-h-screen pt-24 pb-12 px-4 sm:px-6">
+      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
         <div className="max-w-2xl mx-auto text-center py-12">
           <p className="text-neutral-500">Switch to an organization to view notifications.</p>
           <Link href="/welcome" className="text-brand-orange hover:underline mt-4 inline-block">
@@ -102,7 +102,7 @@ export default function NotificationsPage() {
   }
 
   return (
-    <div className="min-h-screen pt-24 pb-12 px-4 sm:px-6">
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
       <div className="max-w-2xl mx-auto">
         <div className="flex items-center justify-between mb-6">
           <Link
@@ -129,14 +129,14 @@ export default function NotificationsPage() {
 
         {loading ? (
           <div className="flex justify-center py-12">
-            <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
+            <Spinner />
           </div>
         ) : error ? (
-          <div className="p-8 text-center text-red-500 bg-red-50 dark:bg-red-900/10 rounded-2xl border border-red-200 dark:border-red-800">
+          <div className="p-6 text-center text-red-500 bg-red-50 dark:bg-red-900/10 rounded-2xl border border-red-200 dark:border-red-800">
             {error}
           </div>
         ) : notifications.length === 0 ? (
-          <div className="p-8 text-center text-neutral-500 dark:text-neutral-400 rounded-2xl border border-neutral-200 dark:border-neutral-800">
+          <div className="p-6 text-center text-neutral-500 dark:text-neutral-400 rounded-2xl border border-neutral-200 dark:border-neutral-800">
             <p>No notifications yet</p>
             <p className="text-sm mt-2">
               Manage which notifications you receive in{' '}

app/onboarding/page.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { createOrganization } from '@/lib/api/organization'
 import { useAuth } from '@/lib/auth/context'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import { Button, Input } from '@ciphera-net/ui'
 

app/org-settings/page.tsx

@@ -8,8 +8,8 @@ export const metadata = {
 
 export default function OrgSettingsPage() {
   return (
-    <div className="min-h-screen pt-24 pb-12 px-4 sm:px-6">
-      <div className="max-w-4xl mx-auto">
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
+      <div>
         <Suspense fallback={<div className="p-8 text-center text-neutral-500">Loading...</div>}>
           <OrganizationSettings />
         </Suspense>

app/page.tsx

@@ -12,7 +12,8 @@ import SiteList from '@/components/sites/SiteList'
 import { Button } from '@ciphera-net/ui'
 import { BarChartIcon, LockIcon, ZapIcon, CheckCircleIcon, XIcon, GlobeIcon } from '@ciphera-net/ui'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
+import { getSitesLimitForPlan } from '@/lib/plans'
 
 function DashboardPreview() {
   return (
@@ -172,7 +173,7 @@ export default function HomePage() {
 
   if (!user) {
     return (
-      <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+      <div className="relative min-h-screen flex flex-col overflow-hidden">
         
         {/* * --- 1. ATMOSPHERE (Background) --- */}
         <div className="absolute inset-0 -z-10 pointer-events-none">
@@ -263,7 +264,7 @@ export default function HomePage() {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ duration: 0.5, delay: i * 0.1 }}
-                className="card-glass p-8 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 group"
+                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" />
@@ -337,10 +338,13 @@ export default function HomePage() {
           <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>
         </div>
-        {subscription?.plan_id === 'solo' && sites.length >= 1 ? (
+        {(() => {
+          const siteLimit = getSitesLimitForPlan(subscription?.plan_id)
+          const atLimit = siteLimit != null && sites.length >= siteLimit
+          return atLimit ? (
           <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">
-              Limit reached (1/1)
+              Limit reached ({sites.length}/{siteLimit})
             </span>
             <Link href="/pricing">
               <Button variant="primary" className="text-sm">
@@ -348,7 +352,8 @@ export default function HomePage() {
               </Button>
             </Link>
           </div>
-        ) : (
+        ) : null
+        })() ?? (
           <Link href="/sites/new">
             <Button variant="primary" className="text-sm">
               Add New Site
@@ -385,15 +390,34 @@ export default function HomePage() {
                   return `${label} Plan`
                 })()}
               </p>
-              {(typeof subscription.sites_count === 'number' || (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number')) && (
+              {(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">
                   {typeof subscription.sites_count === 'number' && (
-                    <span>Sites: {subscription.plan_id === 'solo' && subscription.sites_count > 0 ? `${subscription.sites_count}/1` : subscription.sites_count}</span>
+                    <span>Sites: {(() => {
+                      const limit = getSitesLimitForPlan(subscription.plan_id)
+                      return limit != null && typeof subscription.sites_count === 'number' ? `${subscription.sites_count}/${limit}` : subscription.sites_count
+                    })()}</span>
                   )}
-                  {typeof subscription.sites_count === 'number' && subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && ' · '}
+                  {typeof subscription.sites_count === 'number' && (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number') && ' · '}
                   {subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && (
                     <span>Pageviews: {subscription.pageview_usage.toLocaleString()}/{subscription.pageview_limit.toLocaleString()}</span>
                   )}
+                  {subscription.next_invoice_amount_due != null && subscription.next_invoice_currency && !subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing') && (
+                    <span className="block mt-1">
+                      Renews {(() => {
+                        const ts = subscription.next_invoice_period_end ?? subscription.current_period_end
+                        const d = ts ? new Date(typeof ts === 'number' ? ts * 1000 : ts) : null
+                        const dateStr = d && !Number.isNaN(d.getTime()) && d.getTime() !== 0
+                          ? d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+                          : null
+                        const amount = (subscription.next_invoice_amount_due / 100).toLocaleString('en-US', {
+                          style: 'currency',
+                          currency: subscription.next_invoice_currency.toUpperCase(),
+                        })
+                        return dateStr ? `${dateStr} for ${amount}` : amount
+                      })()}
+                    </span>
+                  )}
                 </p>
               )}
               <div className="mt-2 flex gap-2">
@@ -415,7 +439,7 @@ 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-8 text-center dark:bg-brand-orange/10">
+        <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="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>

app/settings/page.tsx

@@ -1,6 +1,4 @@
-import { Suspense } from 'react'
 import ProfileSettings from '@/components/settings/ProfileSettings'
-import CheckoutSuccessToast from '@/components/checkout/CheckoutSuccessToast'
 
 export const metadata = {
   title: 'Settings - Pulse',
@@ -9,10 +7,7 @@ export const metadata = {
 
 export default function SettingsPage() {
   return (
-    <div className="min-h-screen pt-12 pb-12 px-4 sm:px-6">
-      <Suspense fallback={null}>
-        <CheckoutSuccessToast />
-      </Suspense>
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
       <ProfileSettings />
     </div>
   )

app/share/[id]/page.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { useParams, useSearchParams, useRouter } from 'next/navigation'
 import { getPublicDashboard, getPublicStats, getPublicDailyStats, getPublicRealtime, getPublicPerformanceByPage, type DashboardData, type Stats, type DailyStat, type PerformanceByPageStat } from '@/lib/api/stats'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { LoadingOverlay, Button } from '@ciphera-net/ui'
 import Chart from '@/components/dashboard/Chart'
 import TopPages from '@/components/dashboard/ContentStats'
@@ -199,7 +199,7 @@ export default function PublicDashboardPage() {
   if (isPasswordProtected && !data) {
     return (
       <div className="min-h-screen flex items-center justify-center px-4">
-        <div className="max-w-md w-full bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-8 shadow-lg">
+        <div className="max-w-md w-full bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 shadow-lg transition-shadow duration-300">
           <div className="text-center mb-6">
              <div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mx-auto mb-4 text-brand-orange">
               <ZapIcon className="w-6 h-6" />

app/sites/[id]/funnels/[funnelId]/page.tsx

@@ -16,23 +16,23 @@ import {
   ResponsiveContainer,
   Cell
 } from 'recharts'
-import { getDateRange } from '@/lib/utils/format'
+import { getDateRange } from '@ciphera-net/ui'
 
 const CHART_COLORS_LIGHT = {
-  border: '#E5E5E5',
-  axis: '#A3A3A3',
+  border: 'var(--color-neutral-200)',
+  axis: 'var(--color-neutral-400)',
   tooltipBg: '#ffffff',
-  tooltipBorder: '#E5E5E5',
+  tooltipBorder: 'var(--color-neutral-200)',
 }
 
 const CHART_COLORS_DARK = {
-  border: '#404040',
-  axis: '#737373',
-  tooltipBg: '#262626',
-  tooltipBorder: '#404040',
+  border: 'var(--color-neutral-700)',
+  axis: 'var(--color-neutral-500)',
+  tooltipBg: 'var(--color-neutral-800)',
+  tooltipBorder: 'var(--color-neutral-700)',
 }
 
-const BRAND_ORANGE = '#FD5E0F'
+const BRAND_ORANGE = 'var(--color-brand-orange)'
 
 export default function FunnelReportPage() {
   const params = useParams()
@@ -225,7 +225,7 @@ export default function FunnelReportPage() {
                       const data = payload[0].payload;
                       return (
                         <div
-                          className="p-3 rounded-xl shadow-lg border"
+                          className="p-3 rounded-xl shadow-lg border transition-shadow duration-300"
                           style={{
                             backgroundColor: chartColors.tooltipBg,
                             borderColor: chartColors.tooltipBorder,
@@ -267,10 +267,10 @@ export default function FunnelReportPage() {
             <table className="w-full text-left text-sm">
               <thead className="bg-neutral-50 dark:bg-neutral-800/50 border-b border-neutral-200 dark:border-neutral-800">
                 <tr>
-                  <th className="px-6 py-4 font-medium text-neutral-500 uppercase tracking-wider">Step</th>
-                  <th className="px-6 py-4 font-medium text-neutral-500 uppercase tracking-wider text-right">Visitors</th>
-                  <th className="px-6 py-4 font-medium text-neutral-500 uppercase tracking-wider text-right">Drop-off</th>
-                  <th className="px-6 py-4 font-medium text-neutral-500 uppercase tracking-wider text-right">Conversion</th>
+                  <th className="px-6 py-4 font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Step</th>
+                  <th className="px-6 py-4 font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider text-right">Visitors</th>
+                  <th className="px-6 py-4 font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider text-right">Drop-off</th>
+                  <th className="px-6 py-4 font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider text-right">Conversion</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
@@ -283,7 +283,7 @@ export default function FunnelReportPage() {
                         </span>
                         <div>
                           <p className="font-medium text-neutral-900 dark:text-white">{step.step.name}</p>
-                          <p className="text-neutral-500 text-xs font-mono mt-0.5">{step.step.value}</p>
+                          <p className="text-neutral-500 dark:text-neutral-400 text-xs font-mono mt-0.5">{step.step.value}</p>
                         </div>
                       </div>
                     </td>

app/sites/[id]/page.tsx

@@ -6,9 +6,9 @@ import { useParams, useRouter } from 'next/navigation'
 import { motion } from 'framer-motion'
 import { getSite, type Site } from '@/lib/api/sites'
 import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries, getCities, getRegions, getBrowsers, getOS, getDevices, getScreenResolutions, getEntryPages, getExitPages, getDashboard, getCampaigns, getPerformanceByPage, type Stats, type DailyStat, type PerformanceByPageStat } from '@/lib/api/stats'
-import { formatNumber, formatDuration, getDateRange } from '@/lib/utils/format'
+import { formatNumber, formatDuration, getDateRange } from '@ciphera-net/ui'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { LoadingOverlay, Button } from '@ciphera-net/ui'
 import { Select, DatePicker, DownloadIcon } from '@ciphera-net/ui'
 import ExportModal from '@/components/dashboard/ExportModal'
@@ -221,7 +221,7 @@ export default function SiteDashboardPage() {
 
   if (!site) {
     return (
-      <div className="container mx-auto px-4 py-8">
+      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
         <p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
       </div>
     )

app/sites/[id]/realtime/page.tsx

@@ -5,7 +5,7 @@ import { useParams, useRouter } from 'next/navigation'
 import { getSite, type Site } from '@/lib/api/sites'
 import { getRealtimeVisitors, getSessionDetails, type Visitor, type SessionEvent } from '@/lib/api/realtime'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { LoadingOverlay, UserIcon } from '@ciphera-net/ui'
 import { motion, AnimatePresence } from 'framer-motion'
 

app/sites/[id]/settings/page.tsx

@@ -5,7 +5,7 @@ import { useParams, useRouter } from 'next/navigation'
 import { getSite, updateSite, resetSiteData, deleteSite, type Site, type GeoDataLevel } from '@/lib/api/sites'
 import { listGoals, createGoal, updateGoal, deleteGoal, type Goal } from '@/lib/api/goals'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import VerificationModal from '@/components/sites/VerificationModal'
 import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'
@@ -13,6 +13,8 @@ import { PasswordInput } from '@ciphera-net/ui'
 import { Select, Modal, Button } from '@ciphera-net/ui'
 import { APP_URL } from '@/lib/api/client'
 import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
+import { getSubscription, type SubscriptionDetails } from '@/lib/api/billing'
+import { getRetentionOptionsForPlan, formatRetentionMonths } from '@/lib/plans'
 import { motion, AnimatePresence } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
 import {
@@ -68,8 +70,12 @@ export default function SiteSettingsPage() {
     // Performance insights setting
     enable_performance_insights: false,
     // Bot and noise filtering
-    filter_bots: true
+    filter_bots: true,
+    // Data retention (6 = free-tier max; safe default)
+    data_retention_months: 6
   })
+  const [subscription, setSubscription] = useState<SubscriptionDetails | null>(null)
+  const [subscriptionLoadFailed, setSubscriptionLoadFailed] = useState(false)
   const [linkCopied, setLinkCopied] = useState(false)
   const [snippetCopied, setSnippetCopied] = useState(false)
   const [showVerificationModal, setShowVerificationModal] = useState(false)
@@ -83,6 +89,7 @@ export default function SiteSettingsPage() {
 
   useEffect(() => {
     loadSite()
+    loadSubscription()
   }, [siteId])
 
   useEffect(() => {
@@ -91,6 +98,30 @@ export default function SiteSettingsPage() {
     }
   }, [activeTab, siteId])
 
+  const loadSubscription = async () => {
+    try {
+      setSubscriptionLoadFailed(false)
+      const sub = await getSubscription()
+      setSubscription(sub)
+    } catch (e) {
+      setSubscriptionLoadFailed(true)
+      toast.error(getAuthErrorMessage(e as Error) || 'Could not load plan limits. Showing default options.')
+    }
+  }
+
+  // * Snap data_retention_months to nearest valid option when subscription loads
+  useEffect(() => {
+    if (!subscription) return
+    const opts = getRetentionOptionsForPlan(subscription.plan_id)
+    const values = opts.map(o => o.value)
+    const maxVal = Math.max(...values)
+    setFormData(prev => {
+      if (values.includes(prev.data_retention_months)) return prev
+      const bestFit = values.filter(v => v <= prev.data_retention_months).pop() ?? maxVal
+      return { ...prev, data_retention_months: Math.min(bestFit, maxVal) }
+    })
+  }, [subscription])
+
   const loadSite = async () => {
     try {
       setLoading(true)
@@ -111,7 +142,9 @@ export default function SiteSettingsPage() {
         // Performance insights setting (default to false)
         enable_performance_insights: data.enable_performance_insights ?? false,
         // Bot and noise filtering (default to true)
-        filter_bots: data.filter_bots ?? true
+        filter_bots: data.filter_bots ?? true,
+        // Data retention (default 6 = free-tier max; avoids flash-then-clamp for existing sites)
+        data_retention_months: data.data_retention_months ?? 6
       })
       if (data.has_password) {
         setIsPasswordEnabled(true)
@@ -226,7 +259,9 @@ export default function SiteSettingsPage() {
         // Performance insights setting
         enable_performance_insights: formData.enable_performance_insights,
         // Bot and noise filtering
-        filter_bots: formData.filter_bots
+        filter_bots: formData.filter_bots,
+        // Data retention
+        data_retention_months: formData.data_retention_months
       })
       toast.success('Site updated successfully')
       loadSite()
@@ -288,15 +323,15 @@ export default function SiteSettingsPage() {
 
   if (!site) {
     return (
-      <div className="container mx-auto px-4 py-8">
+      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
         <p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
       </div>
     )
   }
 
   return (
-    <div className="min-h-screen pt-12 pb-12 px-4 sm:px-6">
-      <div className="max-w-4xl mx-auto space-y-8">
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
+      <div className="space-y-8">
         <div>
           <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Site Settings</h1>
           <p className="mt-2 text-neutral-600 dark:text-neutral-400">
@@ -452,7 +487,7 @@ export default function SiteSettingsPage() {
                         <ZapIcon className="w-4 h-4" />
                         Verify Installation
                       </button>
-                      <p className="text-xs text-neutral-500 dark:text-neutral-500">
+                      <p className="text-xs text-neutral-500 dark:text-neutral-400">
                         Check if your site is sending data correctly.
                       </p>
                     </div>
@@ -460,21 +495,9 @@ export default function SiteSettingsPage() {
 
                     <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
                     {canEdit && (
-                      <button
-                        type="submit"
-                        disabled={saving}
-                        className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium 
-                        hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-                      >
-                        {saving ? (
-                          <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                        ) : (
-                          <>
-                            <CheckIcon className="w-4 h-4" />
-                            Save Changes
-                          </>
-                        )}
-                      </button>
+                      <Button type="submit" disabled={saving} isLoading={saving}>
+                        Save Changes
+                      </Button>
                     )}
                     </div>
                   </form>
@@ -526,7 +549,7 @@ export default function SiteSettingsPage() {
                     <p className="text-sm text-neutral-500 dark:text-neutral-400">Manage who can view your dashboard.</p>
                   </div>
 
-                  <div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
+                  <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 className="flex items-center gap-3">
                         <div className="p-2 bg-white dark:bg-neutral-800 rounded-lg text-neutral-400">
@@ -578,7 +601,7 @@ export default function SiteSettingsPage() {
                                 {linkCopied ? 'Copied!' : 'Copy Link'}
                               </button>
                             </div>
-                            <p className="mt-2 text-xs text-neutral-500">
+                            <p className="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
                               Share this link with others to view the dashboard.
                             </p>
                           </div>
@@ -617,7 +640,7 @@ export default function SiteSettingsPage() {
                                     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">
+                                  <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>
                                 </motion.div>
@@ -631,21 +654,9 @@ export default function SiteSettingsPage() {
 
                   <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
                     {canEdit && (
-                      <button
-                        type="submit"
-                        disabled={saving}
-                        className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium 
-                        hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-                      >
-                        {saving ? (
-                          <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                        ) : (
-                          <>
-                            <CheckIcon className="w-4 h-4" />
-                            Save Changes
-                          </>
-                        )}
-                      </button>
+                      <Button type="submit" disabled={saving} isLoading={saving}>
+                        Save Changes
+                      </Button>
                     )}
                   </div>
                 </form>
@@ -665,7 +676,7 @@ export default function SiteSettingsPage() {
                     <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Data Collection</h3>
 
                     {/* Page Paths Toggle */}
-                    <div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
+                    <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">Page Paths</h4>
@@ -686,7 +697,7 @@ export default function SiteSettingsPage() {
                     </div>
 
                     {/* Referrers Toggle */}
-                    <div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
+                    <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">Referrers</h4>
@@ -707,7 +718,7 @@ export default function SiteSettingsPage() {
                     </div>
 
                     {/* Device Info Toggle */}
-                    <div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
+                    <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">Device Info</h4>
@@ -728,7 +739,7 @@ export default function SiteSettingsPage() {
                     </div>
 
                     {/* Geographic Data Dropdown */}
-                    <div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
+                    <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">Geographic Data</h4>
@@ -752,7 +763,7 @@ export default function SiteSettingsPage() {
                     </div>
 
                     {/* Screen Resolution Toggle */}
-                    <div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
+                    <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">Screen Resolution</h4>
@@ -776,7 +787,7 @@ export default function SiteSettingsPage() {
                   {/* Bot and noise 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-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
+                    <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>
@@ -800,7 +811,7 @@ export default function SiteSettingsPage() {
                   {/* Performance Insights Toggle */}
                   <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">Performance Insights</h3>
-                    <div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
+                    <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">Performance Insights (Add-on)</h4>
@@ -821,6 +832,58 @@ export default function SiteSettingsPage() {
                     </div>
                   </div>
 
+                  {/* Data Retention */}
+                  <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">Data Retention</h3>
+                    {subscriptionLoadFailed && (
+                      <div className="p-3 rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 flex items-center justify-between gap-3">
+                        <p className="text-sm text-amber-800 dark:text-amber-200">
+                          Plan limits could not be loaded. Options shown may be limited.
+                        </p>
+                        <button
+                          type="button"
+                          onClick={loadSubscription}
+                          className="shrink-0 text-sm font-medium text-amber-800 dark:text-amber-200 hover:underline"
+                        >
+                          Retry
+                        </button>
+                      </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>
+                          <h4 className="font-medium text-neutral-900 dark:text-white">Keep raw event data for</h4>
+                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                            Events older than this are automatically deleted. Aggregated daily stats are kept permanently.
+                          </p>
+                        </div>
+                        <Select
+                          value={String(formData.data_retention_months)}
+                          onChange={(v) => setFormData({ ...formData, data_retention_months: Number(v) })}
+                          options={getRetentionOptionsForPlan(subscription?.plan_id).map(opt => ({
+                            value: String(opt.value),
+                            label: opt.label,
+                          }))}
+                          variant="input"
+                          align="right"
+                          className="min-w-[160px]"
+                        />
+                      </div>
+                      {subscription?.plan_id && subscription.plan_id !== 'free' && (
+                        <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-3">
+                          Your {subscription.plan_id} plan supports up to {formatRetentionMonths(
+                            getRetentionOptionsForPlan(subscription.plan_id).at(-1)?.value ?? 6
+                          )} of data retention.
+                        </p>
+                      )}
+                      {(!subscription?.plan_id || subscription.plan_id === 'free') && (
+                        <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-3">
+                          Free plan supports up to 6 months. <a href="/pricing" className="text-brand-orange hover:underline">Upgrade</a> for longer retention.
+                        </p>
+                      )}
+                    </div>
+                  </div>
+
                   {/* Excluded Paths */}
                   <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">Path Filtering</h3>
@@ -878,7 +941,7 @@ export default function SiteSettingsPage() {
                         {snippetCopied ? (
                           <CheckIcon className="w-4 h-4 text-green-600" />
                         ) : (
-                          <svg className="w-4 h-4 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <svg className="w-4 h-4 text-neutral-500 dark:text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <rect x="9" y="9" width="13" height="13" rx="2" ry="2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                             <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                           </svg>
@@ -889,21 +952,9 @@ export default function SiteSettingsPage() {
 
                   <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
                     {canEdit && (
-                      <button
-                        type="submit"
-                        disabled={saving}
-                        className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
-                        hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-                      >
-                        {saving ? (
-                          <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                        ) : (
-                          <>
-                            <CheckIcon className="w-4 h-4" />
-                            Save Changes
-                          </>
-                        )}
-                      </button>
+                      <Button type="submit" disabled={saving} isLoading={saving}>
+                        Save Changes
+                      </Button>
                     )}
                   </div>
                 </form>

app/sites/[id]/uptime/page.tsx

@@ -19,7 +19,7 @@ import {
 } from '@/lib/api/uptime'
 import { toast } from '@ciphera-net/ui'
 import { useTheme } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { LoadingOverlay, Button, Modal } from '@ciphera-net/ui'
 import {
   AreaChart,
@@ -34,20 +34,20 @@ import type { TooltipProps } from 'recharts'
 
 // * Chart theme colors (consistent with main Pulse chart)
 const CHART_COLORS_LIGHT = {
-  border: '#E5E5E5',
-  text: '#171717',
-  textMuted: '#737373',
-  axis: '#A3A3A3',
+  border: 'var(--color-neutral-200)',
+  text: 'var(--color-neutral-900)',
+  textMuted: 'var(--color-neutral-500)',
+  axis: 'var(--color-neutral-400)',
   tooltipBg: '#ffffff',
-  tooltipBorder: '#E5E5E5',
+  tooltipBorder: 'var(--color-neutral-200)',
 }
 const CHART_COLORS_DARK = {
-  border: '#404040',
-  text: '#fafafa',
-  textMuted: '#a3a3a3',
-  axis: '#737373',
-  tooltipBg: '#262626',
-  tooltipBorder: '#404040',
+  border: 'var(--color-neutral-700)',
+  text: 'var(--color-neutral-50)',
+  textMuted: 'var(--color-neutral-400)',
+  axis: 'var(--color-neutral-500)',
+  tooltipBg: 'var(--color-neutral-800)',
+  tooltipBorder: 'var(--color-neutral-700)',
 }
 
 // * Status color mapping
@@ -189,7 +189,7 @@ function StatusBarTooltip({
       className="fixed z-50 pointer-events-none"
       style={{ left: position.x, top: position.y - 10, transform: 'translate(-50%, -100%)' }}
     >
-      <div className="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-lg px-3 py-2.5 text-xs min-w-[160px]">
+      <div className="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-lg transition-shadow duration-300 px-3 py-2.5 text-xs min-w-40">
         <div className="font-semibold text-neutral-900 dark:text-white mb-1.5">{formattedDate}</div>
         {stat && stat.total_checks > 0 ? (
           <div className="space-y-1">
@@ -256,7 +256,7 @@ function UptimeStatusBar({
       className="relative"
       onMouseLeave={() => setHoveredDay(null)}
     >
-      <div className="flex items-center gap-[2px] w-full">
+      <div className="flex items-center gap-0.5 w-full">
         {dateRange.map((date) => {
           const stat = statsMap.get(date)
           const barColor = getDayBarColor(stat)
@@ -264,7 +264,7 @@ function UptimeStatusBar({
           return (
             <div
               key={date}
-              className={`flex-1 h-8 rounded-[2px] ${barColor} transition-all duration-150 hover:opacity-80 cursor-pointer min-w-[3px]`}
+              className={`flex-1 h-8 rounded-sm ${barColor} transition-all duration-150 hover:opacity-80 cursor-pointer min-w-[3px]`}
               onMouseEnter={(e) => handleMouseEnter(e, date, stat)}
               onMouseLeave={() => setHoveredDay(null)}
             />
@@ -305,7 +305,7 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
     if (!active || !payload?.length) return null
     return (
       <div
-        className="rounded-xl px-3 py-2 text-xs shadow-lg border"
+        className="rounded-xl px-3 py-2 text-xs shadow-lg border transition-shadow duration-300"
         style={{
           background: colors.tooltipBg,
           borderColor: colors.tooltipBorder,
@@ -313,7 +313,7 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
         }}
       >
         <div className="font-medium mb-0.5">{label}</div>
-        <div style={{ color: '#FD5E0F' }} className="font-semibold">
+        <div style={{ color: 'var(--color-brand-orange)' }} className="font-semibold">
           {payload[0].value}ms
         </div>
       </div>
@@ -330,8 +330,8 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
           <AreaChart data={data} margin={{ top: 5, right: 5, left: -20, bottom: 0 }}>
             <defs>
               <linearGradient id="responseTimeGradient" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor="#FD5E0F" stopOpacity={0.3} />
-                <stop offset="100%" stopColor="#FD5E0F" stopOpacity={0.02} />
+                <stop offset="0%" stopColor="var(--color-brand-orange)" stopOpacity={0.3} />
+                <stop offset="100%" stopColor="var(--color-brand-orange)" stopOpacity={0.02} />
               </linearGradient>
             </defs>
             <CartesianGrid
@@ -357,11 +357,11 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
             <Area
               type="monotone"
               dataKey="ms"
-              stroke="#FD5E0F"
+              stroke="var(--color-brand-orange)"
               strokeWidth={2}
               fill="url(#responseTimeGradient)"
               dot={false}
-              activeDot={{ r: 4, fill: '#FD5E0F', strokeWidth: 0 }}
+              activeDot={{ r: 4, fill: 'var(--color-brand-orange)', strokeWidth: 0 }}
             />
           </AreaChart>
         </ResponsiveContainer>
@@ -473,7 +473,7 @@ function MonitorCard({
                   <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-1.5">
+                  <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)}
@@ -955,7 +955,7 @@ function MonitorForm({
               </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 z-10 min-w-[100px]">
+              <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://')}

app/sites/new/page.tsx

@@ -5,9 +5,10 @@ import { useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { createSite, listSites, getSite, type Site } from '@/lib/api/sites'
 import { getSubscription } from '@/lib/api/billing'
+import { getSitesLimitForPlan } from '@/lib/plans'
 import { trackSiteCreatedFromDashboard, trackSiteCreatedScriptCopied } from '@/lib/welcomeAnalytics'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { Button, Input } from '@ciphera-net/ui'
 import { CheckCircleIcon } from '@ciphera-net/ui'
 import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'
@@ -57,9 +58,10 @@ export default function NewSitePage() {
           getSubscription()
         ])
 
-        if (subscription?.plan_id === 'solo' && sites.length >= 1) {
+        const siteLimit = subscription?.plan_id ? getSitesLimitForPlan(subscription.plan_id) : null
+        if (siteLimit != null && sites.length >= siteLimit) {
           setAtLimit(true)
-          toast.error('Solo plan limit reached (1 site). Please upgrade to add more sites.')
+          toast.error(`${subscription.plan_id} plan limit reached (${siteLimit} site${siteLimit === 1 ? '' : 's'}). Please upgrade to add more sites.`)
           router.replace('/')
         }
       } catch (error) {
@@ -104,8 +106,8 @@ export default function NewSitePage() {
   // * Step 2: Framework picker + script (same as /welcome after adding first site)
   if (createdSite) {
     return (
-      <div className="container mx-auto px-4 py-8 max-w-2xl">
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-8">
+      <div className="w-full max-w-2xl mx-auto px-4 sm:px-6 py-8">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
           <div className="text-center">
             <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 text-green-600 dark:text-green-400 mb-6">
               <CheckCircleIcon className="h-7 w-7" />
@@ -150,10 +152,10 @@ export default function NewSitePage() {
           </div>
 
           <div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
-            <Button variant="primary" onClick={goToDashboard} className="min-w-[160px]">
+            <Button variant="primary" onClick={goToDashboard} className="min-w-40">
               Back to dashboard
             </Button>
-            <Button variant="secondary" onClick={() => router.push(`/sites/${createdSite.id}`)} className="min-w-[160px]">
+            <Button variant="secondary" onClick={() => router.push(`/sites/${createdSite.id}`)} className="min-w-40">
               View {createdSite.name}
             </Button>
           </div>
@@ -170,7 +172,7 @@ export default function NewSitePage() {
 
   // * Step 1: Name & domain form
   return (
-    <div className="container mx-auto px-4 py-8 max-w-2xl">
+    <div className="w-full max-w-2xl mx-auto px-4 sm:px-6 py-8">
       <h1 className="text-2xl font-bold mb-8 text-neutral-900 dark:text-white">
         Create New Site
       </h1>

app/welcome/page.tsx

@@ -21,7 +21,7 @@ import { createSite, type Site } from '@/lib/api/sites'
 import { setSessionAction } from '@/app/actions/auth'
 import { useAuth } from '@/lib/auth/context'
 import apiRequest from '@/lib/api/client'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import {
   trackWelcomeStepView,
   trackWelcomeWorkspaceSelected,
@@ -332,13 +332,13 @@ function WelcomeContent() {
   }
 
   const cardClass =
-    'bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl shadow-sm p-8 max-w-lg mx-auto'
+    'bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl shadow-sm p-6 max-w-lg mx-auto'
 
   return (
     <div className="flex-1 flex flex-col items-center justify-center bg-neutral-50 dark:bg-neutral-950 px-4 py-12">
       <div className="w-full max-w-lg">
         <div
-          className="flex justify-center gap-1.5 mb-8"
+          className="flex justify-center gap-2 mb-8"
           role="progressbar"
           aria-valuenow={step}
           aria-valuemin={1}
@@ -475,7 +475,7 @@ function WelcomeContent() {
               <button
                 type="button"
                 onClick={() => setStep(1)}
-                className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
+                className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
                 aria-label="Back to welcome"
               >
                 <ArrowLeftIcon className="h-4 w-4" />
@@ -485,7 +485,7 @@ function WelcomeContent() {
                 <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/10 text-brand-orange mb-4">
                   <BarChartIcon className="h-7 w-7" />
                 </div>
-                <h1 className="text-xl font-bold text-neutral-900 dark:text-white">
+                <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
                   Name your organization
                 </h1>
                 <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
@@ -546,7 +546,7 @@ function WelcomeContent() {
               <button
                 type="button"
                 onClick={() => setStep(2)}
-                className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
+                className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
                 aria-label="Back to organization"
               >
                 <ArrowLeftIcon className="h-4 w-4" />
@@ -556,7 +556,7 @@ function WelcomeContent() {
                 <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 text-green-600 dark:text-green-400 mb-4">
                   <CheckCircleIcon className="h-7 w-7" />
                 </div>
-                <h1 className="text-xl font-bold text-neutral-900 dark:text-white">
+                <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
                   {showPendingCheckoutInStep3 ? 'Complete your plan' : "You're on the free plan"}
                 </h1>
                 <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
@@ -631,7 +631,7 @@ function WelcomeContent() {
               <button
                 type="button"
                 onClick={() => setStep(3)}
-                className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
+                className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
                 aria-label="Back to plan"
               >
                 <ArrowLeftIcon className="h-4 w-4" />
@@ -641,7 +641,7 @@ function WelcomeContent() {
                 <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/10 text-brand-orange mb-4">
                   <GlobeIcon className="h-7 w-7" />
                 </div>
-                <h1 className="text-xl font-bold text-neutral-900 dark:text-white">
+                <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
                   Add your first site
                 </h1>
                 <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
@@ -759,11 +759,11 @@ function WelcomeContent() {
               )}
 
               <div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
-                <Button variant="primary" onClick={goToDashboard} className="min-w-[160px]">
+                <Button variant="primary" onClick={goToDashboard} className="min-w-40">
                   Go to dashboard
                 </Button>
                 {createdSite && (
-                  <Button variant="secondary" onClick={goToSite} className="min-w-[160px]">
+                  <Button variant="secondary" onClick={goToSite} className="min-w-40">
                     View {createdSite.name}
                   </Button>
                 )}

components/CodeBlock.tsx

@@ -1,28 +0,0 @@
-/**
- * @file Reusable code block component for integration guide pages.
- *
- * Renders a VS-Code-style code block with a filename tab header.
- */
-
-interface CodeBlockProps {
-  /** Filename displayed in the tab header */
-  filename: string
-  /** The code string to render inside the block */
-  children: string
-}
-
-/**
- * Renders a dark-themed code snippet with a filename tab.
- */
-export function CodeBlock({ filename, children }: CodeBlockProps) {
-  return (
-    <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-      <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
-        <span className="text-xs text-neutral-400 font-mono">{filename}</span>
-      </div>
-      <div className="p-4 overflow-x-auto">
-        <pre className="text-sm font-mono text-neutral-300">{children}</pre>
-      </div>
-    </div>
-  )
-}

components/Footer.tsx

@@ -2,8 +2,7 @@
 
 import Link from 'next/link'
 import Image from 'next/image'
-import { GithubIcon, TwitterIcon } from '@ciphera-net/ui'
-import SwissFlagIcon from './SwissFlagIcon'
+import { GithubIcon, TwitterIcon, SwissFlagIcon } from '@ciphera-net/ui'
 
 interface FooterProps {
   LinkComponent?: any
@@ -47,7 +46,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
   if (isAuthenticated) {
     return (
       <footer className="w-full py-8 mt-auto border-t border-neutral-100 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex flex-col md:flex-row justify-between items-center gap-4">
             <div className="text-sm text-neutral-500 dark:text-neutral-400">
               © 2024-{year} Ciphera. All rights reserved.
@@ -96,7 +95,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
             <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
               Simple analytics for privacy-conscious apps.
             </p>
-            <div className="inline-flex items-center gap-2.5 text-sm text-neutral-600 dark:text-neutral-400 mb-4">
+            <div className="inline-flex items-center gap-3 text-sm text-neutral-600 dark:text-neutral-400 mb-4">
               <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-neutral-100 dark:bg-neutral-800 shrink-0 overflow-hidden ring-1 ring-neutral-200 dark:ring-neutral-700" aria-hidden>
                 <SwissFlagIcon className="w-5 h-5" />
               </span>

components/IntegrationGuide.tsx

@@ -36,7 +36,7 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
     .slice(0, 4)
 
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <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" />
@@ -47,7 +47,7 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
         />
       </div>
 
-      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-12 pb-10 z-10">
+      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
         <Link
           href="/integrations"
           className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"

components/LoadingOverlay.tsx

@@ -1,42 +0,0 @@
-'use client'
-
-import React, { useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
-
-interface LoadingOverlayProps {
-  logoSrc?: string
-  title?: string
-}
-
-export default function LoadingOverlay({ 
-  logoSrc = "/ciphera_icon_no_margins.png", 
-  title = "Pulse" 
-}: LoadingOverlayProps) {
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-    return () => setMounted(false)
-  }, [])
-
-  if (!mounted) return null
-
-  return createPortal(
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-white dark:bg-neutral-950 animate-in fade-in duration-200">
-      <div className="flex flex-col items-center gap-6">
-        <div className="flex items-center gap-3">
-          <img 
-            src={logoSrc} 
-            alt={typeof title === 'string' ? title : "Pulse"} 
-            className="h-12 w-auto object-contain"
-          />
-          <span className="text-3xl tracking-tight text-neutral-900 dark:text-white">
-            <span className="font-bold">Ciphera</span><span className="font-light">Pulse</span>
-          </span>
-        </div>
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-brand-orange dark:border-neutral-800 dark:border-t-brand-orange" />
-      </div>
-    </div>,
-    document.body
-  )
-}

components/OfflineBanner.tsx

@@ -6,7 +6,7 @@ export function OfflineBanner({ isOnline }: { isOnline: boolean }) {
   if (isOnline) return null;
 
   return (
-    <div className="fixed top-0 left-0 right-0 z-[100] rounded-b-xl bg-yellow-500/15 dark:bg-yellow-500/25 border-b border-yellow-500/30 dark:border-yellow-500/40 text-yellow-700 dark:text-yellow-300 px-4 sm:px-8 py-2.5 text-sm flex items-center justify-center gap-2 font-medium shadow-md">
+    <div className="fixed top-0 left-0 right-0 z-[100] rounded-b-xl bg-yellow-500/15 dark:bg-yellow-500/25 border-b border-yellow-500/30 dark:border-yellow-500/40 text-yellow-700 dark:text-yellow-300 px-4 sm:px-8 py-2.5 text-sm flex items-center justify-center gap-2 font-medium shadow-md transition-shadow duration-300">
       <FiWifiOff className="w-4 h-4 shrink-0" />
       <span>You are currently offline. Changes may not be saved.</span>
     </div>

components/PricingSection.tsx

@@ -219,10 +219,10 @@ export default function PricingSection() {
         transition={{ duration: 0.5 }}
         className="text-center mb-12"
       >
-        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">
+        <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">
           Transparent Pricing
         </h2>
-        <p className="text-xl text-neutral-600 dark:text-neutral-400">
+        <p className="text-lg text-neutral-600 dark: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-3xl 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-200 dark:border-neutral-800 rounded-2xl bg-white/50 dark:bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20"
       >
         
         {/* Top Toolbar */}
-        <div className="p-8 border-b border-neutral-200 dark:border-neutral-800 flex flex-col md:flex-row items-center justify-between gap-8 bg-neutral-50/50 dark:bg-neutral-900/50">
+        <div className="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="w-full md:w-2/3">
-            <div className="flex justify-between text-sm font-medium text-neutral-500 mb-4">
+            <div className="flex justify-between text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-4">
               <span>10k</span>
               <span className="text-brand-orange font-bold text-lg">
                 Up to {currentTraffic.label} monthly pageviews
@@ -252,18 +252,22 @@ export default function PricingSection() {
               step="1"
               value={sliderIndex}
               onChange={(e) => setSliderIndex(parseInt(e.target.value))}
-              className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange"
+              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"
             />
           </div>
 
           <div className="flex flex-col items-end gap-2 shrink-0">
-            <span className="text-[10px] text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wide">
+            <span className="text-xs text-neutral-500 dark: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">
+            <div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex" role="radiogroup" aria-label="Billing interval">
               <button
                 onClick={() => setIsYearly(false)}
-                className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                role="radio"
+                aria-checked={!isYearly}
+                className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all focus:outline-none focus:ring-2 focus: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'
@@ -273,7 +277,9 @@ export default function PricingSection() {
               </button>
               <button
                 onClick={() => setIsYearly(true)}
-                className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                role="radio"
+                aria-checked={isYearly}
+                className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all focus:outline-none focus:ring-2 focus: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'
@@ -292,7 +298,7 @@ export default function PricingSection() {
             const isTeam = plan.id === 'team'
 
             return (
-              <div key={plan.id} className={`p-8 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50'}`}>
+              <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'}`}>
                 {isTeam && (
                   <>
                     <div className="absolute top-0 left-0 w-full h-1 bg-brand-orange" />
@@ -304,7 +310,7 @@ 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 min-h-[40px] mb-4">{plan.description}</p>
+                  <p className="text-sm text-neutral-500 dark:text-neutral-400 min-h-[40px] mb-4">{plan.description}</p>
                   
                   {priceDetails ? (
                     isYearly ? (
@@ -313,7 +319,7 @@ export default function PricingSection() {
                           <span className="text-4xl font-bold text-neutral-900 dark:text-white">
                             €{priceDetails.yearlyTotal}
                           </span>
-                          <span className="text-neutral-500 font-medium">/year</span>
+                          <span className="text-neutral-500 dark: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">
@@ -329,7 +335,7 @@ export default function PricingSection() {
                         <span className="text-4xl font-bold text-neutral-900 dark:text-white">
                           €{priceDetails.baseMonthly}
                         </span>
-                        <span className="text-neutral-500 font-medium">/mo</span>
+                        <span className="text-neutral-500 dark:text-neutral-400 font-medium">/mo</span>
                       </div>
                     )
                   ) : (
@@ -361,16 +367,20 @@ export default function PricingSection() {
           })}
 
           {/* Enterprise Section */}
-          <div className="p-8 bg-neutral-50/50 dark:bg-neutral-900/50 flex flex-col">
+          <div className="p-6 bg-neutral-50/50 dark:bg-neutral-900/50 flex flex-col">
             <div className="mb-8">
               <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">Enterprise</h3>
-              <p className="text-sm text-neutral-500 min-h-[40px] mb-4">For high volume sites and custom needs</p>
+              <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">
                 Custom
               </div>
             </div>
 
-            <Button variant="secondary" className="w-full mb-8 border-neutral-200 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800">
+            <Button
+              variant="secondary"
+              className="w-full mb-8"
+              onClick={() => { window.location.href = 'mailto:business@ciphera.net?subject=Enterprise%20Plan%20Inquiry' }}
+            >
               Contact us
             </Button>
 

components/SwissFlagIcon.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import type { SVGProps } from 'react'
-
-// * Swiss flag icon – official proportions (cross 1/6 height). Uses real Swiss federal red.
-const SWISS_RED = '#E41E26' // * Official Swiss flag red (federal identity)
-
-export default function SwissFlagIcon(props: SVGProps<SVGSVGElement>) {
-  const { className, ...rest } = props
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      aria-hidden
-      className={`shrink-0 ${className ?? ''}`.trim()}
-      {...rest}
-    >
-      <rect width="24" height="24" rx="3" fill={SWISS_RED} />
-      <rect x="10" y="0" width="4" height="24" fill="#FFF" />
-      <rect x="0" y="10" width="24" height="4" fill="#FFF" />
-    </svg>
-  )
-}

components/checkout/CheckoutSuccessToast.tsx

@@ -1,26 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-import { useSearchParams } from 'next/navigation'
-import { toast } from '@ciphera-net/ui'
-
-/**
- * Shows a success toast when redirected from Stripe Checkout with success=true,
- * then clears the query params from the URL.
- */
-export default function CheckoutSuccessToast() {
-  const searchParams = useSearchParams()
-
-  useEffect(() => {
-    const success = searchParams.get('success')
-    if (success === 'true') {
-      toast.success('Thank you for subscribing! Your subscription is now active.')
-      const url = new URL(window.location.href)
-      url.searchParams.delete('success')
-      url.searchParams.delete('session_id')
-      window.history.replaceState({}, '', url.pathname + url.search)
-    }
-  }, [searchParams])
-
-  return null
-}

components/dashboard/Campaigns.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useEffect, useMemo } from 'react'
 import Link from 'next/link'
-import { formatNumber } from '@/lib/utils/format'
-import { Modal, ArrowRightIcon, Button } from '@ciphera-net/ui'
+import { formatNumber } from '@ciphera-net/ui'
+import { Modal, ArrowRightIcon, Button, Spinner } from '@ciphera-net/ui'
 import { ChevronDownIcon, DownloadIcon } from '@ciphera-net/ui'
 import { getCampaigns, CampaignStat } from '@/lib/api/stats'
 import { getReferrerFavicon, getReferrerIcon, getReferrerDisplayName } from '@/lib/utils/icons'
@@ -146,7 +146,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
     <button
       type="button"
       onClick={() => handleSort(colKey)}
-      className={`inline-flex items-center gap-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-inset rounded ${className}`}
+      className={`inline-flex items-center gap-1 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-inset rounded ${className}`}
       aria-label={`Sort by ${label}`}
     >
       {label}
@@ -170,7 +170,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
               <Button
                 variant="ghost"
                 onClick={handleExportCampaigns}
-                className="h-8 px-3 text-xs gap-1.5"
+                className="h-8 px-3 text-xs gap-2"
               >
                 <DownloadIcon className="w-3.5 h-3.5" />
                 Export
@@ -179,7 +179,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
             <Button
               variant="ghost"
               onClick={() => setIsBuilderOpen(true)}
-              className="h-8 px-3 text-xs gap-1.5"
+              className="h-8 px-3 text-xs gap-2"
             >
               <PlusIcon className="w-3.5 h-3.5" />
               Build URL
@@ -276,7 +276,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
             </p>
             <Link
               href="/installation"
-              className="inline-flex items-center gap-1.5 text-sm font-medium text-brand-orange hover:text-brand-orange/90 hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange/20 rounded"
+              className="inline-flex items-center gap-2 text-sm font-medium text-brand-orange hover:text-brand-orange/90 hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange/20 rounded"
             >
               Read documentation
               <ArrowRightIcon className="w-4 h-4" />
@@ -293,7 +293,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
             <div className="py-8 flex flex-col items-center gap-2">
-              <div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
+              <Spinner />
               <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
             </div>
           ) : (

components/dashboard/Chart.tsx

@@ -13,32 +13,32 @@ import {
   ReferenceLine,
 } from 'recharts'
 import type { TooltipProps } from 'recharts'
-import { formatNumber, formatDuration, formatUpdatedAgo } from '@/lib/utils/format'
+import { formatNumber, formatDuration, formatUpdatedAgo } from '@ciphera-net/ui'
 import { ArrowUpRightIcon, ArrowDownRightIcon, BarChartIcon, Select, Button, DownloadIcon } from '@ciphera-net/ui'
 import { Checkbox } from '@ciphera-net/ui'
 
 const COLORS = {
-  brand: '#FD5E0F',
-  success: '#10B981', // Emerald-500
-  danger: '#EF4444',  // Red-500
+  brand: 'var(--color-brand-orange)',
+  success: 'var(--color-success)',
+  danger: 'var(--color-error)',
 }
 
 const CHART_COLORS_LIGHT = {
-  border: '#E5E5E5',
-  text: '#171717',
-  textMuted: '#737373',
-  axis: '#A3A3A3',
+  border: 'var(--color-neutral-200)',
+  text: 'var(--color-neutral-900)',
+  textMuted: 'var(--color-neutral-500)',
+  axis: 'var(--color-neutral-400)',
   tooltipBg: '#ffffff',
-  tooltipBorder: '#E5E5E5',
+  tooltipBorder: 'var(--color-neutral-200)',
 }
 
 const CHART_COLORS_DARK = {
-  border: '#404040',
-  text: '#fafafa',
-  textMuted: '#a3a3a3',
-  axis: '#737373',
-  tooltipBg: '#262626',
-  tooltipBorder: '#404040',
+  border: 'var(--color-neutral-700)',
+  text: 'var(--color-neutral-50)',
+  textMuted: 'var(--color-neutral-400)',
+  axis: 'var(--color-neutral-500)',
+  tooltipBg: 'var(--color-neutral-800)',
+  tooltipBorder: 'var(--color-neutral-700)',
 }
 
 export interface DailyStat {
@@ -127,7 +127,7 @@ function ChartTooltip({
 
   return (
     <div
-      className="rounded-lg border px-4 py-3 shadow-lg"
+      className="rounded-lg border px-4 py-3 shadow-lg transition-shadow duration-300"
       style={{
         backgroundColor: colors.tooltipBg,
         borderColor: colors.tooltipBorder,
@@ -145,7 +145,7 @@ function ChartTooltip({
         </span>
       </div>
       {hasPrev && (
-        <div className="mt-1.5 flex items-center gap-1.5 text-xs" style={{ color: colors.textMuted }}>
+        <div className="mt-1.5 flex items-center gap-2 text-xs" style={{ color: colors.textMuted }}>
           <span>vs {formatValue(prev as number)} {prevPeriodLabel ? `(${prevPeriodLabel})` : 'prev'}</span>
           {delta !== null && (
             <span
@@ -282,7 +282,7 @@ export default function Chart({
       const { toPng } = await import('html-to-image')
       const dataUrl = await toPng(chartContainerRef.current, {
         cacheBust: true,
-        backgroundColor: resolvedTheme === 'dark' ? '#171717' : '#ffffff',
+        backgroundColor: resolvedTheme === 'dark' ? 'var(--color-neutral-900)' : '#ffffff',
       })
       const link = document.createElement('a')
       link.download = `chart-${dateRange.start}-${dateRange.end}.png`
@@ -416,7 +416,7 @@ export default function Chart({
       {/* * Subtle live/updated indicator in bottom-right corner */}
       {lastUpdatedAt != null && (
         <div
-          className="absolute bottom-3 right-6 flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400 pointer-events-none"
+          className="absolute bottom-3 right-6 flex items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400 pointer-events-none"
           title="Data refreshes every 30 seconds"
         >
           <span className="relative flex h-1.5 w-1.5">
@@ -540,7 +540,7 @@ export default function Chart({
             </div>
 
             {prevData?.length ? (
-              <div className="flex flex-col gap-0.5">
+              <div className="flex flex-col gap-1">
                 <Checkbox
                   checked={showComparison}
                   onCheckedChange={setShowComparison}
@@ -558,7 +558,7 @@ export default function Chart({
               variant="ghost"
               onClick={handleExportChart}
               disabled={!hasData}
-              className="gap-1.5 py-1.5 px-3 text-sm text-neutral-600 dark:text-neutral-400"
+              className="gap-2 py-1.5 px-3 text-sm text-neutral-600 dark:text-neutral-400"
             >
               <DownloadIcon className="w-4 h-4" />
               Export chart
@@ -570,7 +570,7 @@ export default function Chart({
         </div>
 
         {!hasData ? (
-          <div className="flex h-[320px] flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-neutral-200 dark:border-neutral-700 bg-neutral-50/50 dark:bg-neutral-800/30">
+          <div className="flex h-80 flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-neutral-200 dark:border-neutral-700 bg-neutral-50/50 dark:bg-neutral-800/30">
             <BarChartIcon className="h-12 w-12 text-neutral-300 dark:text-neutral-600" aria-hidden />
             <p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
               No data for this period
@@ -578,7 +578,7 @@ export default function Chart({
             <p className="text-xs text-neutral-400 dark:text-neutral-500">Try a different date range</p>
           </div>
         ) : !hasAnyNonZero ? (
-          <div className="flex h-[320px] flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-neutral-200 dark:border-neutral-700 bg-neutral-50/50 dark:bg-neutral-800/30">
+          <div className="flex h-80 flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-neutral-200 dark:border-neutral-700 bg-neutral-50/50 dark:bg-neutral-800/30">
             <BarChartIcon className="h-12 w-12 text-neutral-300 dark:text-neutral-600" aria-hidden />
             <p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
               No {metricLabel.toLowerCase()} data for this period
@@ -694,7 +694,7 @@ export default function Chart({
                   activeDot={{
                     r: 5,
                     strokeWidth: 2,
-                    fill: resolvedTheme === 'dark' ? '#262626' : '#ffffff',
+                    fill: resolvedTheme === 'dark' ? 'var(--color-neutral-800)' : '#ffffff',
                     stroke: activeMetric.color,
                   }}
                   isAnimationActive

components/dashboard/ContentStats.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import { TopPage, getTopPages, getEntryPages, getExitPages } from '@/lib/api/stats'
-import { Modal, ArrowUpRightIcon, LayoutDashboardIcon } from '@ciphera-net/ui'
+import { Modal, ArrowUpRightIcon, LayoutDashboardIcon, Spinner } from '@ciphera-net/ui'
 
 interface ContentStatsProps {
   topPages: TopPage[]
@@ -174,7 +174,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
             <div className="py-8 flex flex-col items-center gap-2">
-              <div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
+              <Spinner />
               <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
             </div>
           ) : (

components/dashboard/Countries.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import * as Flags from 'country-flag-icons/react/3x2'
 import WorldMap from './WorldMap'
 import { GlobeIcon } from '@ciphera-net/ui'

components/dashboard/ExportModal.tsx

@@ -6,7 +6,7 @@ import * as XLSX from 'xlsx'
 import jsPDF from 'jspdf'
 import autoTable from 'jspdf-autotable'
 import type { DailyStat } from './Chart'
-import { formatNumber, formatDuration } from '@/lib/utils/format'
+import { formatNumber, formatDuration } from '@ciphera-net/ui'
 import { getReferrerDisplayName, mergeReferrersByDisplayName } from '@/lib/utils/icons'
 import type { TopPage, TopReferrer, CampaignStat } from '@/lib/api/stats'
 

components/dashboard/GoalStats.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import Link from 'next/link'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import { BookOpenIcon, ArrowRightIcon } from '@ciphera-net/ui'
 import type { GoalCountStat } from '@/lib/api/stats'
 
@@ -52,7 +52,7 @@ export default function GoalStats({ goalCounts }: GoalStatsProps) {
           </p>
           <Link
             href="/installation"
-            className="inline-flex items-center gap-1.5 text-sm font-medium text-brand-orange hover:text-brand-orange/90 hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange/20 rounded"
+            className="inline-flex items-center gap-2 text-sm font-medium text-brand-orange hover:text-brand-orange/90 hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange/20 rounded"
           >
             Read documentation
             <ArrowRightIcon className="w-4 h-4" />

components/dashboard/Locations.tsx

@@ -1,12 +1,12 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import * as Flags from 'country-flag-icons/react/3x2'
 // @ts-ignore
 import iso3166 from 'iso-3166-2'
 import WorldMap from './WorldMap'
-import { Modal, GlobeIcon } from '@ciphera-net/ui'
+import { Modal, GlobeIcon, Spinner } from '@ciphera-net/ui'
 import { SiTorproject } from 'react-icons/si'
 import { FaUserSecret, FaSatellite } from 'react-icons/fa'
 import { getCountries, getCities, getRegions } from '@/lib/api/stats'
@@ -289,7 +289,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
             <div className="py-8 flex flex-col items-center gap-2">
-              <div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
+              <Spinner />
               <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
             </div>
           ) : (

components/dashboard/PerformanceStats.tsx

@@ -108,7 +108,7 @@ export default function PerformanceStats({ stats, performanceByPage, siteId, sta
   const summaryText = `LCP ${Math.round(stats.lcp)} ms · CLS ${Number(stats.cls.toFixed(3))} · INP ${Math.round(stats.inp)} ms`
 
   return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-4">
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
       {/* * One-line summary: Performance score + metric summary. Click to expand. */}
       <button
         type="button"

components/dashboard/TechSpecs.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import { getBrowserIcon, getOSIcon, getDeviceIcon } from '@/lib/utils/icons'
 import { MdMonitor } from 'react-icons/md'
-import { Modal, GridIcon } from '@ciphera-net/ui'
+import { Modal, GridIcon, Spinner } from '@ciphera-net/ui'
 import { getBrowsers, getOS, getDevices, getScreenResolutions } from '@/lib/api/stats'
 
 interface TechSpecsProps {
@@ -190,7 +190,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
             <div className="py-8 flex flex-col items-center gap-2">
-              <div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
+              <Spinner />
               <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
             </div>
           ) : (

components/dashboard/TopPages.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import { LayoutDashboardIcon } from '@ciphera-net/ui'
 
 interface TopPagesProps {

components/dashboard/TopReferrers.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import { getReferrerDisplayName, getReferrerFavicon, getReferrerIcon, mergeReferrersByDisplayName } from '@/lib/utils/icons'
-import { Modal, GlobeIcon } from '@ciphera-net/ui'
+import { Modal, GlobeIcon, Spinner } from '@ciphera-net/ui'
 import { getTopReferrers, TopReferrer } from '@/lib/api/stats'
 
 interface TopReferrersProps {
@@ -135,7 +135,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
             <div className="py-8 flex flex-col items-center gap-2">
-              <div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
+              <Spinner />
               <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
             </div>
           ) : (

components/dashboard/WorldMap.tsx

@@ -35,9 +35,9 @@ const WorldMap = ({ data }: WorldMapProps) => {
 
   // Plausible-like colors based on provided SVG snippet
   const isDark = resolvedTheme === 'dark'
-  const defaultFill = isDark ? "#262626" : "#f5f5f5" // neutral-800 / neutral-100
-  const defaultStroke = isDark ? "#171717" : "#ffffff" // neutral-900 / white
-  const brandOrange = "#FD5E0F"
+  const defaultFill = isDark ? "var(--color-neutral-800)" : "var(--color-neutral-100)"
+  const defaultStroke = isDark ? "var(--color-neutral-900)" : "#ffffff"
+  const brandOrange = "var(--color-brand-orange)"
   
   return (
     <div className="relative w-full">
@@ -97,7 +97,7 @@ const WorldMap = ({ data }: WorldMapProps) => {
       </ComposableMap>
       {tooltipContent && (
          <div 
-           className="fixed z-50 px-2 py-1 text-xs font-medium text-white bg-black/80 backdrop-blur-sm rounded shadow pointer-events-none transform -translate-x-1/2 -translate-y-full mt-[-10px]"
+           className="fixed z-50 px-2 py-1 text-xs font-medium text-white bg-black/80 backdrop-blur-sm rounded shadow pointer-events-none transform -translate-x-1/2 -translate-y-full -mt-2.5"
            style={{ left: tooltipContent.x, top: tooltipContent.y }}
          >
             {tooltipContent.content}

components/notifications/NotificationCenter.tsx

@@ -7,7 +7,7 @@
 import { useEffect, useState, useRef } from 'react'
 import Link from 'next/link'
 import { listNotifications, markNotificationRead, markAllNotificationsRead, type Notification } from '@/lib/api/notifications'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatTimeAgo, getTypeIcon } from '@/lib/utils/notifications'
 import { SettingsIcon } from '@ciphera-net/ui'
 
@@ -235,7 +235,7 @@ export default function NotificationCenter() {
             <Link
               href="/org-settings?tab=notifications"
               onClick={() => setOpen(false)}
-              className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
+              className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
             >
               <SettingsIcon className="w-4 h-4" />
               Manage settings

components/settings/OrganizationSettings.tsx

@@ -16,12 +16,12 @@ import {
   OrganizationInvitation,
   Organization
 } from '@/lib/api/organization'
-import { getSubscription, createPortalSession, getInvoices, cancelSubscription, changePlan, createCheckoutSession, SubscriptionDetails, Invoice } from '@/lib/api/billing'
-import { TRAFFIC_TIERS, PLAN_ID_SOLO, getTierIndexForLimit, getLimitForTierIndex } from '@/lib/plans'
+import { getSubscription, createPortalSession, getInvoices, cancelSubscription, resumeSubscription, changePlan, previewInvoice, createCheckoutSession, SubscriptionDetails, Invoice, PreviewInvoiceResult } from '@/lib/api/billing'
+import { TRAFFIC_TIERS, PLAN_ID_SOLO, PLAN_ID_TEAM, PLAN_ID_BUSINESS, getTierIndexForLimit, getLimitForTierIndex, getSitesLimitForPlan } from '@/lib/plans'
 import { getAuditLog, AuditLogEntry, GetAuditLogParams } from '@/lib/api/audit'
 import { getNotificationSettings, updateNotificationSettings } from '@/lib/api/notification-settings'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { motion, AnimatePresence } from 'framer-motion'
 import {
   AlertTriangleIcon,
@@ -35,6 +35,7 @@ import {
   DownloadIcon,
   ExternalLinkIcon,
   LayoutDashboardIcon,
+  Spinner,
 } from '@ciphera-net/ui'
 
 // * Bell icon for notifications tab
@@ -82,9 +83,13 @@ export default function OrganizationSettings() {
   const [isRedirectingToPortal, setIsRedirectingToPortal] = useState(false)
   const [cancelLoadingAction, setCancelLoadingAction] = useState<'period_end' | 'immediate' | null>(null)
   const [showCancelPrompt, setShowCancelPrompt] = useState(false)
+  const [isResuming, setIsResuming] = useState(false)
   const [showChangePlanModal, setShowChangePlanModal] = useState(false)
+  const [changePlanId, setChangePlanId] = useState<string>(PLAN_ID_SOLO)
   const [changePlanTierIndex, setChangePlanTierIndex] = useState(2)
   const [changePlanYearly, setChangePlanYearly] = useState(false)
+  const [invoicePreview, setInvoicePreview] = useState<PreviewInvoiceResult | null>(null)
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false)
   const [isChangingPlan, setIsChangingPlan] = useState(false)
   const [invoices, setInvoices] = useState<Invoice[]>([])
   const [isLoadingInvoices, setIsLoadingInvoices] = useState(false)
@@ -293,10 +298,29 @@ export default function OrganizationSettings() {
     }
   }, [activeTab, user?.role, handleTabChange])
 
+  const hasActiveSubscription = subscription?.subscription_status === 'active' || subscription?.subscription_status === 'trialing'
+
+  useEffect(() => {
+    if (!showChangePlanModal || !hasActiveSubscription) {
+      setInvoicePreview(null)
+      return
+    }
+    let cancelled = false
+    setIsLoadingPreview(true)
+    setInvoicePreview(null)
+    const interval = changePlanYearly ? 'year' : 'month'
+    const limit = getLimitForTierIndex(changePlanTierIndex)
+    previewInvoice({ plan_id: changePlanId, interval, limit })
+      .then((res) => { if (!cancelled) setInvoicePreview(res ?? null) })
+      .catch(() => { if (!cancelled) { setInvoicePreview(null) } })
+      .finally(() => { if (!cancelled) setIsLoadingPreview(false) })
+    return () => { cancelled = true }
+  }, [showChangePlanModal, hasActiveSubscription, changePlanId, changePlanTierIndex, changePlanYearly])
+
   // If no org ID, we are in personal organization context, so don't show org settings
   if (!currentOrgId) {
     return (
-        <div className="p-6 text-center text-neutral-500">
+        <div className="p-6 text-center text-neutral-500 dark:text-neutral-400">
             <p>You are in your personal context. Switch to an Organization to manage its settings.</p>
         </div>
     )
@@ -327,30 +351,48 @@ export default function OrganizationSettings() {
     }
   }
 
+  const handleResumeSubscription = async () => {
+    setIsResuming(true)
+    try {
+      await resumeSubscription()
+      toast.success('Subscription will continue. Cancellation has been undone.')
+      loadSubscription()
+    } catch (error: any) {
+      toast.error(getAuthErrorMessage(error) || error.message || 'Failed to resume subscription')
+    } finally {
+      setIsResuming(false)
+    }
+  }
+
   const openChangePlanModal = () => {
+    const currentPlan = subscription?.plan_id
+    if (currentPlan === PLAN_ID_TEAM || currentPlan === PLAN_ID_BUSINESS) {
+      setChangePlanId(currentPlan)
+    } else {
+      setChangePlanId(PLAN_ID_SOLO)
+    }
     if (subscription?.pageview_limit != null && subscription.pageview_limit > 0) {
       setChangePlanTierIndex(getTierIndexForLimit(subscription.pageview_limit))
     } else {
       setChangePlanTierIndex(2)
     }
     setChangePlanYearly(subscription?.billing_interval === 'year')
+    setInvoicePreview(null)
     setShowChangePlanModal(true)
   }
 
-  const hasActiveSubscription = subscription?.subscription_status === 'active' || subscription?.subscription_status === 'trialing'
-
   const handleChangePlanSubmit = async () => {
     const interval = changePlanYearly ? 'year' : 'month'
     const limit = getLimitForTierIndex(changePlanTierIndex)
     setIsChangingPlan(true)
     try {
       if (hasActiveSubscription) {
-        await changePlan({ plan_id: PLAN_ID_SOLO, interval, limit })
+        await changePlan({ plan_id: changePlanId, interval, limit })
         toast.success('Plan updated. Changes may take a moment to reflect.')
         setShowChangePlanModal(false)
         loadSubscription()
       } else {
-        const { url } = await createCheckoutSession({ plan_id: PLAN_ID_SOLO, interval, limit })
+        const { url } = await createCheckoutSession({ plan_id: changePlanId, interval, limit })
         if (url) window.location.href = url
         else throw new Error('No checkout URL')
       }
@@ -455,7 +497,7 @@ export default function OrganizationSettings() {
   // handleTabChange is defined above
 
   return (
-    <div className="max-w-4xl mx-auto space-y-8">
+    <div className="space-y-8">
       <div>
         <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Organization Settings</h1>
         <p className="mt-2 text-neutral-600 dark:text-neutral-400">
@@ -542,7 +584,7 @@ export default function OrganizationSettings() {
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.2 }}
-            className="w-full bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 md:p-8 shadow-sm"
+            className="w-full bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 shadow-sm"
           >
             {activeTab === 'general' && (
               <div className="space-y-12">
@@ -564,7 +606,7 @@ export default function OrganizationSettings() {
                         minLength={2}
                         maxLength={50}
                         disabled={!isEditing}
-                        className={`bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-500' : ''}`}
+                        className={`bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-500 dark:text-neutral-400' : ''}`}
                       />
                     </div>
                     
@@ -573,8 +615,8 @@ export default function OrganizationSettings() {
                         Organization Slug
                       </label>
                       <div className="flex rounded-xl shadow-sm">
-                        <span className="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 text-neutral-500 text-sm">
-                          drop.ciphera.net/
+                        <span className="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 text-neutral-500 dark:text-neutral-400 text-sm">
+                          pulse.ciphera.net/
                         </span>
                         <Input
                           type="text"
@@ -584,10 +626,10 @@ export default function OrganizationSettings() {
                           minLength={3}
                           maxLength={30}
                           disabled={!isEditing}
-                          className={`rounded-l-none bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-500' : ''}`}
+                          className={`rounded-l-none bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-500 dark:text-neutral-400' : ''}`}
                         />
                       </div>
-                      <p className="text-xs text-neutral-500">
+                      <p className="text-xs text-neutral-500 dark:text-neutral-400">
                         Changing the slug will change your organization's URL.
                       </p>
                     </div>
@@ -628,7 +670,7 @@ export default function OrganizationSettings() {
                     <p className="text-sm text-neutral-500 dark:text-neutral-400">Irreversible actions for this organization.</p>
                   </div>
 
-                  <div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl flex items-center justify-between">
+                  <div className="p-6 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl flex items-center justify-between">
                     <div>
                       <h3 className="font-medium text-red-900 dark:text-red-200">Delete Organization</h3>
                       <p className="text-sm text-red-700 dark:text-red-300 mt-1">Permanently delete this organization and all its data.</p>
@@ -695,14 +737,14 @@ export default function OrganizationSettings() {
 
                 {/* Members List */}
                 <div className="space-y-4">
-                  <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider">Active Members</h3>
+                  <h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Active Members</h3>
                   <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
                     {isLoadingMembers ? (
                       <div className="flex items-center justify-center py-8">
-                        <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
+                        <Spinner />
                       </div>
                     ) : members.length === 0 ? (
-                      <div className="p-8 text-center text-neutral-500">No members found.</div>
+                      <div className="p-8 text-center text-neutral-500 dark:text-neutral-400">No members found.</div>
                     ) : (
                       members.map((member) => (
                         <div key={member.user_id} className="p-4 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
@@ -714,7 +756,7 @@ export default function OrganizationSettings() {
                               <div className="text-sm font-medium text-neutral-900 dark:text-white">
                                 {member.user_email || 'Unknown User'}
                               </div>
-                              <div className="text-xs text-neutral-500">
+                              <div className="text-xs text-neutral-500 dark:text-neutral-400">
                                 Joined {new Date(member.joined_at).toLocaleDateString()}
                               </div>
                             </div>
@@ -739,7 +781,7 @@ export default function OrganizationSettings() {
                 {/* Pending Invitations */}
                 {invitations.length > 0 && (
                   <div className="space-y-4">
-                    <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider">Pending Invitations</h3>
+                    <h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Pending Invitations</h3>
                     <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
                       {invitations.map((invite) => (
                         <div key={invite.id} className="p-4 flex items-center justify-between">
@@ -751,7 +793,7 @@ export default function OrganizationSettings() {
                               <div className="text-sm font-medium text-neutral-900 dark:text-white">
                                 {invite.email}
                               </div>
-                              <div className="text-xs text-neutral-500">
+                              <div className="text-xs text-neutral-500 dark:text-neutral-400">
                                 Invited as <span className="capitalize font-medium">{invite.role}</span> • Expires {new Date(invite.expires_at).toLocaleDateString()}
                               </div>
                             </div>
@@ -780,11 +822,11 @@ export default function OrganizationSettings() {
 
                 {isLoadingSubscription ? (
                   <div className="flex items-center justify-center py-12">
-                    <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
+                    <Spinner />
                   </div>
                 ) : !subscription ? (
-                  <div className="p-8 text-center bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-200 dark:border-neutral-800">
-                    <p className="text-neutral-500">Could not load subscription details.</p>
+                  <div className="p-6 text-center bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-200 dark:border-neutral-800">
+                    <p className="text-neutral-500 dark:text-neutral-400">Could not load subscription details.</p>
                     <Button variant="ghost" onClick={loadSubscription} className="mt-4">Retry</Button>
                   </div>
                 ) : (
@@ -792,7 +834,7 @@ export default function OrganizationSettings() {
 
                     {/* Trial notice */}
                     {subscription.subscription_status === 'trialing' && (
-                      <div className="p-4 bg-yellow-50 dark:bg-yellow-900/10 border border-yellow-200 dark:border-yellow-800 rounded-2xl flex flex-col sm:flex-row sm:items-center gap-3">
+                      <div className="p-6 bg-yellow-50 dark:bg-yellow-900/10 border border-yellow-200 dark:border-yellow-800 rounded-2xl flex flex-col sm:flex-row sm:items-center gap-3">
                         <div className="flex-1">
                           <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                             Your free trial ends on{' '}
@@ -810,21 +852,55 @@ export default function OrganizationSettings() {
                       </div>
                     )}
 
+                    {/* Past due notice */}
+                    {subscription.subscription_status === 'past_due' && (
+                      <div className="p-6 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-800 rounded-2xl flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                        <div className="flex-1">
+                          <p className="text-sm font-medium text-red-800 dark:text-red-200">
+                            Payment past due
+                          </p>
+                          <p className="text-xs text-red-700 dark:text-red-300 mt-0.5">
+                            We couldn't charge your payment method. Please update your billing info to avoid service interruption.
+                          </p>
+                        </div>
+                        <Button
+                          variant="secondary"
+                          onClick={handleManageSubscription}
+                          disabled={isRedirectingToPortal}
+                          isLoading={isRedirectingToPortal}
+                          className="shrink-0"
+                        >
+                          Update payment method
+                        </Button>
+                      </div>
+                    )}
+
                     {/* Cancel-at-period-end notice */}
                     {subscription.cancel_at_period_end && (
-                      <div className="p-4 bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800 rounded-2xl">
-                        <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
-                          Your subscription will end on{' '}
-                          <span className="font-semibold">
-                            {(() => {
-                              const d = subscription.current_period_end ? new Date(subscription.current_period_end as string) : null
-                              return d && !Number.isNaN(d.getTime()) ? d.toLocaleDateString(undefined, { month: 'long', day: 'numeric', year: 'numeric' }) : '—'
-                            })()}
-                          </span>
-                        </p>
-                        <p className="text-xs text-amber-700 dark:text-amber-300 mt-1">
-                          You keep full access until then. Your data is retained for 30 days after. Use "Change plan" to resubscribe.
-                        </p>
+                      <div className="p-6 bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800 rounded-2xl flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                        <div>
+                          <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+                            Your subscription will end on{' '}
+                            <span className="font-semibold">
+                              {(() => {
+                                const d = subscription.current_period_end ? new Date(subscription.current_period_end as string) : null
+                                return d && !Number.isNaN(d.getTime()) ? d.toLocaleDateString(undefined, { month: 'long', day: 'numeric', year: 'numeric' }) : '—'
+                              })()}
+                            </span>
+                          </p>
+                          <p className="text-xs text-amber-700 dark:text-amber-300 mt-1">
+                            You keep full access until then. Your data is retained for 30 days after. Use "Change plan" to resubscribe.
+                          </p>
+                        </div>
+                        <Button
+                          variant="secondary"
+                          onClick={handleResumeSubscription}
+                          disabled={isResuming}
+                          isLoading={isResuming}
+                          className="shrink-0"
+                        >
+                          Keep my subscription
+                        </Button>
                       </div>
                     )}
 
@@ -841,9 +917,11 @@ export default function OrganizationSettings() {
                               ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
                               : subscription.subscription_status === 'trialing'
                               ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300'
+                              : subscription.subscription_status === 'past_due'
+                              ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
                               : 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
                           }`}>
-                            {subscription.subscription_status === 'trialing' ? 'Trial' : (subscription.subscription_status || 'Free')}
+                            {subscription.subscription_status === 'trialing' ? 'Trial' : subscription.subscription_status === 'past_due' ? 'Past Due' : (subscription.subscription_status || 'Free')}
                           </span>
                           {subscription.billing_interval && (
                             <span className="text-xs text-neutral-500 capitalize">
@@ -855,16 +933,33 @@ export default function OrganizationSettings() {
                           Change plan
                         </Button>
                       </div>
+                      {(subscription.business_name || (subscription.tax_ids && subscription.tax_ids.length > 0)) && (
+                        <div className="px-6 pb-2 -mt-2 space-y-1 text-sm text-neutral-500 dark:text-neutral-400">
+                          {subscription.business_name && (
+                            <div>Billing for: {subscription.business_name}</div>
+                          )}
+                          {subscription.tax_ids && subscription.tax_ids.length > 0 && (
+                            <div>
+                              Tax ID{subscription.tax_ids.length > 1 ? 's' : ''}:{' '}
+                              {subscription.tax_ids.map((t) => {
+                                const label = t.type === 'eu_vat' ? 'VAT' : t.type === 'us_ein' ? 'EIN' : t.type.replace(/_/g, ' ').toUpperCase()
+                                return `${label} ${t.value}${t.country ? ` (${t.country})` : ''}`
+                              }).join(', ')}
+                            </div>
+                          )}
+                        </div>
+                      )}
 
                       {/* Usage stats */}
-                      <div className="border-t border-neutral-200 dark:border-neutral-800 px-6 py-5 grid grid-cols-2 md:grid-cols-4 gap-y-4 gap-x-6">
+                      <div className="border-t border-neutral-200 dark:border-neutral-800 p-6 grid grid-cols-2 md:grid-cols-4 gap-y-4 gap-x-6">
                         <div>
                           <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Sites</div>
                           <div className="text-lg font-semibold text-neutral-900 dark:text-white">
                             {typeof subscription.sites_count === 'number'
-                              ? subscription.plan_id === 'solo'
-                                ? `${subscription.sites_count} / 1`
-                                : `${subscription.sites_count}`
+                              ? (() => {
+                                  const limit = getSitesLimitForPlan(subscription.plan_id)
+                                  return limit != null ? `${subscription.sites_count} / ${limit}` : `${subscription.sites_count}`
+                                })()
                               : '—'}
                           </div>
                         </div>
@@ -875,6 +970,22 @@ export default function OrganizationSettings() {
                               ? `${subscription.pageview_usage.toLocaleString()} / ${subscription.pageview_limit.toLocaleString()}`
                               : '—'}
                           </div>
+                          {subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && (
+                            <div className="mt-2 h-1.5 w-full rounded-full bg-neutral-200 dark:bg-neutral-700 overflow-hidden">
+                              <div
+                                className={`h-full rounded-full transition-all ${
+                                  subscription.pageview_usage / subscription.pageview_limit >= 1
+                                    ? 'bg-red-500'
+                                    : subscription.pageview_usage / subscription.pageview_limit >= 0.9
+                                    ? 'bg-red-400'
+                                    : subscription.pageview_usage / subscription.pageview_limit >= 0.8
+                                    ? 'bg-amber-400'
+                                    : 'bg-green-500'
+                                }`}
+                                style={{ width: `${Math.min(100, (subscription.pageview_usage / subscription.pageview_limit) * 100)}%` }}
+                              />
+                            </div>
+                          )}
                         </div>
                         <div>
                           <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">
@@ -882,8 +993,18 @@ export default function OrganizationSettings() {
                           </div>
                           <div className="text-lg font-semibold text-neutral-900 dark:text-white">
                             {(() => {
-                              const d = subscription.current_period_end ? new Date(subscription.current_period_end as string) : null
-                              return d && !Number.isNaN(d.getTime()) && d.getTime() !== 0 ? d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : '—'
+                              const ts = subscription.next_invoice_period_end ?? subscription.current_period_end
+                              const d = ts ? new Date(typeof ts === 'number' ? ts * 1000 : ts) : null
+                              const dateStr = d && !Number.isNaN(d.getTime()) && d.getTime() !== 0
+                                ? d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+                                : '—'
+                              const amount = subscription.next_invoice_amount_due != null && subscription.next_invoice_currency
+                                ? (subscription.next_invoice_amount_due / 100).toLocaleString('en-US', {
+                                    style: 'currency',
+                                    currency: subscription.next_invoice_currency.toUpperCase(),
+                                  })
+                                : null
+                              return amount && dateStr !== '—' ? `${dateStr} for ${amount}` : dateStr
                             })()}
                           </div>
                         </div>
@@ -903,7 +1024,7 @@ export default function OrganizationSettings() {
                           type="button"
                           onClick={handleManageSubscription}
                           disabled={isRedirectingToPortal}
-                          className="inline-flex items-center gap-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors disabled:opacity-50"
+                          className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
                         >
                           <ExternalLinkIcon className="w-4 h-4" />
                           Payment method & invoices
@@ -913,7 +1034,7 @@ export default function OrganizationSettings() {
                         <button
                           type="button"
                           onClick={() => setShowCancelPrompt(true)}
-                          className="inline-flex items-center gap-1.5 rounded-lg border border-neutral-200 dark:border-neutral-700 px-3.5 py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:border-red-300 hover:text-red-600 dark:hover:border-red-800 dark:hover:text-red-400 transition-colors"
+                          className="inline-flex items-center gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 px-3.5 py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:border-red-300 hover:text-red-600 dark:hover:border-red-800 dark:hover:text-red-400 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                         >
                           Cancel subscription
                         </button>
@@ -922,14 +1043,14 @@ export default function OrganizationSettings() {
 
                     {/* Invoice History */}
                     <div>
-                      <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider mb-3">Recent invoices</h3>
+                      <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-3">Recent invoices</h3>
                       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
                         {isLoadingInvoices ? (
                           <div className="flex items-center justify-center py-8">
-                            <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
+                            <Spinner />
                           </div>
                         ) : invoices.length === 0 ? (
-                          <div className="p-8 text-center text-neutral-500">No invoices found.</div>
+                          <div className="p-8 text-center text-neutral-500 dark:text-neutral-400">No invoices found.</div>
                         ) : (
                           <>
                             {invoices.map((invoice) => (
@@ -956,14 +1077,21 @@ export default function OrganizationSettings() {
                                   </span>
                                   {invoice.invoice_pdf && (
                                     <a href={invoice.invoice_pdf} target="_blank" rel="noopener noreferrer"
-                                       className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg transition-colors" title="Download PDF">
-                                      <DownloadIcon className="w-4 h-4" />
+                                       className="inline-flex items-center gap-2 px-2.5 py-1.5 text-xs font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange" title="Download PDF">
+                                      <DownloadIcon className="w-3.5 h-3.5" />
+                                      Download PDF
                                     </a>
                                   )}
                                   {invoice.hosted_invoice_url && (
                                     <a href={invoice.hosted_invoice_url} target="_blank" rel="noopener noreferrer"
-                                       className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg transition-colors" title="View invoice">
-                                      <ExternalLinkIcon className="w-4 h-4" />
+                                       className={`inline-flex items-center gap-2 px-2.5 py-1.5 text-xs font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${
+                                         invoice.status === 'open'
+                                           ? 'bg-brand-orange text-white hover:bg-brand-orange-hover'
+                                           : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
+                                       }`}
+                                       title={invoice.status === 'open' ? 'Pay now' : 'View invoice'}>
+                                      <ExternalLinkIcon className="w-3.5 h-3.5" />
+                                      {invoice.status === 'open' ? 'Pay now' : 'View invoice'}
                                     </a>
                                   )}
                                 </div>
@@ -990,11 +1118,11 @@ export default function OrganizationSettings() {
 
                 {isLoadingNotificationSettings ? (
                   <div className="flex items-center justify-center py-12">
-                    <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
+                    <Spinner />
                   </div>
                 ) : (
                   <div className="space-y-4">
-                    <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider">Notification categories</h3>
+                    <h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Notification categories</h3>
                     <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
                       {notificationCategories.map((cat) => (
                         <div
@@ -1117,7 +1245,7 @@ export default function OrganizationSettings() {
                 <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden">
                   {isLoadingAudit ? (
                     <div className="flex items-center justify-center py-12">
-                      <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
+                      <Spinner />
                     </div>
                   ) : (auditEntries ?? []).length === 0 ? (
                     <div className="p-8 text-center text-neutral-500">No audit events found.</div>
@@ -1157,7 +1285,7 @@ export default function OrganizationSettings() {
                   {/* Pagination */}
                   {auditTotal > auditPageSize && (
                     <div className="flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-800">
-                      <span className="text-sm text-neutral-500">
+                      <span className="text-sm text-neutral-500 dark:text-neutral-400">
                         {auditPage * auditPageSize + 1}–{Math.min((auditPage + 1) * auditPageSize, auditTotal)} of {auditTotal}
                       </span>
                       <div className="flex gap-2">
@@ -1337,8 +1465,9 @@ export default function OrganizationSettings() {
                 <button
                   type="button"
                   onClick={() => setShowChangePlanModal(false)}
-                  className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400"
+                  className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-lg p-1"
                   disabled={isChangingPlan}
+                  aria-label="Close dialog"
                 >
                   <XIcon className="w-5 h-5" />
                 </button>
@@ -1347,6 +1476,41 @@ export default function OrganizationSettings() {
                 Choose your pageview limit and billing interval. {hasActiveSubscription ? 'Your next invoice will reflect prorations.' : 'You’ll start a new subscription.'}
               </p>
               <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Plan</label>
+                  <div className="grid grid-cols-3 gap-2">
+                    {([
+                      { id: PLAN_ID_SOLO, name: 'Solo', sites: '1 site' },
+                      { id: PLAN_ID_TEAM, name: 'Team', sites: 'Up to 5 sites' },
+                      { id: PLAN_ID_BUSINESS, name: 'Business', sites: 'Up to 10 sites' },
+                    ] as const).map((plan) => {
+                      const isCurrentPlan = subscription?.plan_id === plan.id
+                      const isSelected = changePlanId === plan.id
+                      return (
+                        <button
+                          key={plan.id}
+                          type="button"
+                          onClick={() => setChangePlanId(plan.id)}
+                          className={`relative p-3 rounded-xl border text-left transition-all focus:outline-none focus:ring-2 focus:ring-brand-orange ${
+                            isSelected
+                              ? 'border-brand-orange bg-brand-orange/5 dark:bg-brand-orange/10'
+                              : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
+                          }`}
+                        >
+                          <span className={`block text-sm font-semibold ${isSelected ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'}`}>
+                            {plan.name}
+                          </span>
+                          <span className="block text-xs text-neutral-500 mt-0.5">{plan.sites}</span>
+                          {isCurrentPlan && (
+                            <span className="absolute -top-2 right-2 px-1.5 py-0.5 text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-full border border-neutral-200 dark:border-neutral-700">
+                              Current
+                            </span>
+                          )}
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
                 <div>
                   <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Pageviews per month</label>
                   <select
@@ -1367,20 +1531,44 @@ export default function OrganizationSettings() {
                     <button
                       type="button"
                       onClick={() => setChangePlanYearly(false)}
-                      className={`flex-1 py-2 text-sm font-medium rounded-md transition-colors ${!changePlanYearly ? 'bg-brand-orange text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
+                      className={`flex-1 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${!changePlanYearly ? 'bg-brand-orange text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
                     >
                       Monthly
                     </button>
                     <button
                       type="button"
                       onClick={() => setChangePlanYearly(true)}
-                      className={`flex-1 py-2 text-sm font-medium rounded-md transition-colors ${changePlanYearly ? 'bg-brand-orange text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
+                      className={`flex-1 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${changePlanYearly ? 'bg-brand-orange text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
                     >
                       Yearly
                     </button>
                   </div>
                 </div>
               </div>
+              {hasActiveSubscription && (
+                <div className="mt-4 p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
+                  {isLoadingPreview ? (
+                    <div className="flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
+                      <Spinner className="w-4 h-4" />
+                      Calculating next invoice…
+                    </div>
+                  ) : invoicePreview ? (
+                    <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                      Next invoice:{' '}
+                      {(invoicePreview.amount_due / 100).toLocaleString('en-US', {
+                        style: 'currency',
+                        currency: invoicePreview.currency.toUpperCase(),
+                      })}{' '}
+                      on {new Date(invoicePreview.period_end * 1000).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}{' '}
+                      <span className="text-neutral-500">(prorated)</span>
+                    </p>
+                  ) : (
+                    <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                      Unable to calculate preview. Your next invoice will reflect prorations.
+                    </p>
+                  )}
+                </div>
+              )}
               <div className="flex gap-2 mt-6">
                 <Button
                   onClick={handleChangePlanSubmit}

components/sites/VerificationModal.tsx

@@ -11,7 +11,7 @@ import {
 } from '@ciphera-net/ui'
 import { Site } from '@/lib/api/sites'
 import { getRealtime } from '@/lib/api/stats'
-import { toast } from '@ciphera-net/ui'
+import { toast, Button } from '@ciphera-net/ui'
 
 interface VerificationModalProps {
   isOpen: boolean
@@ -130,15 +130,12 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
                       </div>
                     </div>
 
-                    <button
-                      onClick={handleStartVerification}
-                      className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium hover:opacity-90 transition-opacity"
-                    >
+                    <Button onClick={handleStartVerification} className="w-full justify-center">
                       Open Website & Verify
-                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <svg className="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                       </svg>
-                    </button>
+                    </Button>
                   </div>
                 )}
 
@@ -172,12 +169,9 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
                         We are successfully receiving data from your website.
                       </p>
                     </div>
-                    <button
-                      onClick={onClose}
-                      className="w-full px-4 py-3 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium hover:opacity-90 transition-opacity"
-                    >
+                    <Button onClick={onClose} className="w-full justify-center">
                       Done
-                    </button>
+                    </Button>
                   </div>
                 )}
 
@@ -205,18 +199,12 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
                     </div>
 
                     <div className="flex gap-3">
-                      <button
-                        onClick={onClose}
-                        className="flex-1 px-4 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors"
-                      >
+                      <Button variant="secondary" onClick={onClose} className="flex-1 justify-center">
                         Close
-                      </button>
-                      <button
-                        onClick={handleStartVerification}
-                        className="flex-1 px-4 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium hover:opacity-90 transition-opacity"
-                      >
+                      </Button>
+                      <Button onClick={handleStartVerification} className="flex-1 justify-center">
                         Try Again
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 )}

docs/DESIGN_SYSTEM.md

@@ -21,10 +21,15 @@ This document defines the visual language and design patterns for Pulse Analytic
 --brand-orange: #FD5E0F;
 --brand-orange-hover: #E54E00; /* Darker for hover states */
 
+/* Injected by @ciphera-net/ui preset — use in SVG, Recharts, rgba() */
+--color-brand-orange: #FD5E0F;
+--color-brand-orange-rgb: 253, 94, 15; /* Used by .glow-orange utility; also for custom rgba(var(--color-brand-orange-rgb), 0.5) */
+
 /* Usage */
 - Primary CTAs, links, focus rings
 - Accent elements, badges
 - Never use for large backgrounds (too vibrant)
+- var(--color-brand-orange) for SVG/Recharts where Tailwind classes don't apply
 ```
 
 ### Neutral Scale
@@ -285,7 +290,7 @@ Glass card effect with backdrop blur (premium feel):
 Orange gradient for emphasized text:
 ```css
 .gradient-text {
-  @apply bg-gradient-to-r from-brand-orange to-[#E54E00] bg-clip-text text-transparent;
+  @apply bg-gradient-to-r from-brand-orange to-brand-orange-hover bg-clip-text text-transparent;
 }
 ```
 
@@ -812,9 +817,9 @@ Always test both light and dark modes:
 ### VS Code-Style Syntax Highlighting
 
 ```tsx
-<div className="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl border border-neutral-800">
+<div className="bg-neutral-900 rounded-xl overflow-hidden shadow-2xl border border-neutral-800">
   {/* Header bar */}
-  <div className="flex items-center px-4 py-3 bg-[#252526] border-b border-neutral-800">
+  <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" />
@@ -968,7 +973,6 @@ presets: [
 **Dashboard:** Chart, TopPages, TopReferrers, Locations, TechSpecs, Campaigns, Goals, Performance  
 **Settings:** OrganizationSettings, ProfileSettings  
 **Sites:** SiteList, VerificationModal  
-**Tools:** UtmBuilder  
 
 ---
 

lib/api/billing.ts

@@ -1,5 +1,11 @@
 import { API_URL } from './client'
 
+export interface TaxID {
+  type: string
+  value: string
+  country?: string
+}
+
 export interface SubscriptionDetails {
   plan_id: string
   subscription_status: string
@@ -13,6 +19,16 @@ export interface SubscriptionDetails {
   sites_count?: number
   /** Pageviews in current billing period (when pageview_limit > 0). Present when backend supports usage API. */
   pageview_usage?: number
+  /** Business name from Stripe Tax ID collection / business purchase flow (optional). */
+  business_name?: string
+  /** Tax IDs collected on the Stripe customer (VAT, EIN, etc.) for invoice verification. */
+  tax_ids?: TaxID[]
+  /** Next invoice amount in cents (for "Renews on X for €Y" display). */
+  next_invoice_amount_due?: number
+  /** Currency for next invoice (e.g. eur). */
+  next_invoice_currency?: string
+  /** Unix timestamp when next invoice period ends. */
+  next_invoice_period_end?: number
 }
 
 async function billingFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
@@ -64,12 +80,36 @@ export async function cancelSubscription(params?: CancelSubscriptionParams): Pro
   })
 }
 
+/** Clears cancel_at_period_end so the subscription continues past the current period. */
+export async function resumeSubscription(): Promise<{ ok: boolean }> {
+  return await billingFetch<{ ok: boolean }>('/api/billing/resume', {
+    method: 'POST',
+  })
+}
+
 export interface ChangePlanParams {
   plan_id: string
   interval: string
   limit: number
 }
 
+export interface PreviewInvoiceResult {
+  amount_due: number
+  currency: string
+  period_end: number
+}
+
+export async function previewInvoice(params: ChangePlanParams): Promise<PreviewInvoiceResult | null> {
+  const res = await billingFetch<PreviewInvoiceResult | Record<string, never>>('/api/billing/preview-invoice', {
+    method: 'POST',
+    body: JSON.stringify(params),
+  })
+  if (res && typeof res === 'object' && 'amount_due' in res && typeof (res as PreviewInvoiceResult).amount_due === 'number') {
+    return res as PreviewInvoiceResult
+  }
+  return null
+}
+
 export async function changePlan(params: ChangePlanParams): Promise<{ ok: boolean }> {
   return await billingFetch<{ ok: boolean }>('/api/billing/change-plan', {
     method: 'POST',

lib/api/client.ts

@@ -2,7 +2,7 @@
  * HTTP client wrapper for API calls
  */
 
-import { authMessageFromStatus, AUTH_ERROR_MESSAGES } from '@/lib/utils/authErrors'
+import { authMessageFromStatus, AUTH_ERROR_MESSAGES } from '@ciphera-net/ui'
 
 /** Request timeout in ms; network errors surface as user-facing "Network error, please try again." */
 const FETCH_TIMEOUT_MS = 30_000

lib/api/sites.ts

@@ -21,6 +21,8 @@ export interface Site {
   enable_performance_insights?: boolean
   // Bot and noise filtering
   filter_bots?: boolean
+  // Data retention (months); 0 = keep forever
+  data_retention_months?: number
   created_at: string
   updated_at: string
 }
@@ -47,6 +49,8 @@ export interface UpdateSiteRequest {
   enable_performance_insights?: boolean
   // Bot and noise filtering
   filter_bots?: boolean
+  // Data retention (months); 0 = keep forever
+  data_retention_months?: number
 }
 
 export async function listSites(): Promise<Site[]> {

lib/integration-guides.tsx

@@ -8,7 +8,7 @@
  */
 
 import { type ReactNode } from 'react'
-import { CodeBlock } from '@/components/CodeBlock'
+import { CodeBlock } from '@ciphera-net/ui'
 
 // * ─── Guide registry ─────────────────────────────────────────────────────────
 

lib/plans.ts

@@ -1,9 +1,22 @@
 /**
  * Shared plan and traffic tier definitions for pricing and billing (Change plan).
- * Backend supports plan_id "solo" and limit 10k–10M; month/year interval.
+ * Backend supports plan_id solo, team, business and limit 10k–10M; month/year interval.
  */
 
 export const PLAN_ID_SOLO = 'solo'
+export const PLAN_ID_TEAM = 'team'
+export const PLAN_ID_BUSINESS = 'business'
+
+/** Sites limit per plan. Returns null for free (no limit enforced in UI). */
+export function getSitesLimitForPlan(planId: string | null | undefined): number | null {
+  if (!planId || planId === 'free') return null
+  switch (planId) {
+    case 'solo': return 1
+    case 'team': return 5
+    case 'business': return 10
+    default: return null
+  }
+}
 
 /** Traffic tiers available for Solo plan (pageview limits). */
 export const TRAFFIC_TIERS = [
@@ -27,3 +40,42 @@ export function getLimitForTierIndex(index: number): number {
   if (index < 0 || index >= TRAFFIC_TIERS.length) return 100000
   return TRAFFIC_TIERS[index].value
 }
+
+/** Maximum data retention (months) allowed per plan. */
+export function getMaxRetentionMonthsForPlan(planId: string | null | undefined): number {
+  switch (planId) {
+    case 'business': return 36
+    case 'team': return 24
+    case 'solo': return 12
+    default: return 6
+  }
+}
+
+/** Selectable retention options (months) for the given plan. */
+export function getRetentionOptionsForPlan(planId: string | null | undefined): { label: string; value: number }[] {
+  const base = [
+    { label: '1 month', value: 1 },
+    { label: '3 months', value: 3 },
+    { label: '6 months', value: 6 },
+  ]
+  const solo = [...base, { label: '1 year', value: 12 }]
+  const team = [...solo, { label: '2 years', value: 24 }]
+  const business = [...team, { label: '3 years', value: 36 }]
+
+  switch (planId) {
+    case 'business': return business
+    case 'team': return team
+    case 'solo': return solo
+    default: return base
+  }
+}
+
+/** Human-readable label for a retention value in months. */
+export function formatRetentionMonths(months: number): string {
+  if (months === 0) return 'Forever'
+  if (months === 1) return '1 month'
+  if (months < 12) return `${months} months`
+  const years = months / 12
+  if (Number.isInteger(years)) return years === 1 ? '1 year' : `${years} years`
+  return `${months} months`
+}

lib/utils/authErrors.ts

@@ -1,63 +0,0 @@
-/**
- * Auth error message mapping for user-facing copy.
- * Maps status codes and error types to safe, actionable messages (no sensitive details).
- */
-
-export const AUTH_ERROR_MESSAGES = {
-  /** Shown when session/token is expired; prompts re-login. */
-  SESSION_EXPIRED: 'Session expired, please sign in again.',
-  /** Shown when credentials are invalid (e.g. wrong password, invalid token). */
-  INVALID_CREDENTIALS: 'Invalid credentials',
-  /** Shown on network failure or timeout; prompts retry. */
-  NETWORK: 'Network error, please try again.',
-  /** Generic fallback for server/unknown errors. */
-  GENERIC: 'Something went wrong, please try again.',
-} as const
-
-/**
- * Returns the user-facing message for a given HTTP status from an API/auth response.
- * Used when building ApiError messages and when mapping server-returned error types.
- */
-export function authMessageFromStatus(status: number): string {
-  if (status === 401) return AUTH_ERROR_MESSAGES.SESSION_EXPIRED
-  if (status === 403) return AUTH_ERROR_MESSAGES.INVALID_CREDENTIALS
-  if (status >= 500) return AUTH_ERROR_MESSAGES.GENERIC
-  return AUTH_ERROR_MESSAGES.GENERIC
-}
-
-/** Error type returned by auth server actions for mapping to user-facing copy. */
-export type AuthErrorType = 'network' | 'expired' | 'invalid' | 'server'
-
-/**
- * Maps server-action error type (e.g. from exchangeAuthCode) to user-facing message.
- * Used in auth callback so no sensitive details are shown.
- */
-export function authMessageFromErrorType(type: AuthErrorType): string {
-  switch (type) {
-    case 'expired':
-      return AUTH_ERROR_MESSAGES.SESSION_EXPIRED
-    case 'invalid':
-      return AUTH_ERROR_MESSAGES.INVALID_CREDENTIALS
-    case 'network':
-      return AUTH_ERROR_MESSAGES.NETWORK
-    case 'server':
-    default:
-      return AUTH_ERROR_MESSAGES.GENERIC
-  }
-}
-
-/**
- * Maps an error (e.g. ApiError, network/abort) to a safe user-facing message.
- * Use this when displaying API/auth errors in the UI so expired, invalid, and network
- * cases show the correct copy without exposing sensitive details.
- */
-export function getAuthErrorMessage(error: unknown): string {
-  if (!error) return AUTH_ERROR_MESSAGES.GENERIC
-  const err = error as { status?: number; name?: string; message?: string }
-  if (typeof err.status === 'number') return authMessageFromStatus(err.status)
-  if (err.name === 'AbortError') return AUTH_ERROR_MESSAGES.NETWORK
-  if (err instanceof Error && (err.name === 'TypeError' || /fetch|network|failed to fetch/i.test(err.message || ''))) {
-    return AUTH_ERROR_MESSAGES.NETWORK
-  }
-  return AUTH_ERROR_MESSAGES.GENERIC
-}

lib/utils/format.ts

@@ -1,70 +0,0 @@
-/**
- * Format numbers with commas
- */
-export function formatNumber(num: number): string {
-  return new Intl.NumberFormat('en-US').format(num)
-}
-
-/**
- * Format date to YYYY-MM-DD
- */
-export function formatDate(date: Date): string {
-  return date.toISOString().split('T')[0]
-}
-
-/**
- * Get date range for last N days
- */
-export function getDateRange(days: number): { start: string; end: string } {
-  const end = new Date()
-  const start = new Date()
-  start.setDate(start.getDate() - days)
-  return {
-    start: formatDate(start),
-    end: formatDate(end),
-  }
-}
-
-/**
- * Format "updated X ago" for polling indicators (e.g. "Just now", "12 seconds ago")
- */
-export function formatUpdatedAgo(timestamp: number): string {
-  const diff = Math.floor((Date.now() - timestamp) / 1000)
-  if (diff < 5) return 'Just now'
-  if (diff < 60) return `${diff} seconds ago`
-  if (diff < 120) return '1 minute ago'
-  const minutes = Math.floor(diff / 60)
-  return `${minutes} minutes ago`
-}
-
-/**
- * Format relative time (e.g., "2 hours ago")
- */
-export function formatRelativeTime(date: string | Date): string {
-  const d = typeof date === 'string' ? new Date(date) : date
-  const now = new Date()
-  const diff = now.getTime() - d.getTime()
-  const seconds = Math.floor(diff / 1000)
-  const minutes = Math.floor(seconds / 60)
-  const hours = Math.floor(minutes / 60)
-  const days = Math.floor(hours / 24)
-
-  if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`
-  if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`
-  if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
-  return 'Just now'
-}
-/**
- * Format duration in seconds to "1m 30s" or "30s"
- */
-export function formatDuration(seconds: number): string {
-  if (!seconds) return '0s'
-  
-  const m = Math.floor(seconds / 60)
-  const s = Math.floor(seconds % 60)
-  
-  if (m > 0) {
-    return `${m}m ${s}s`
-  }
-  return `${s}s`
-}

lib/utils/privacySnippet.ts

@@ -1,4 +1,5 @@
 import type { Site } from '@/lib/api/sites'
+import { formatRetentionMonths } from '@/lib/plans'
 
 const DOCS_URL =
   (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_APP_URL)
@@ -22,6 +23,7 @@ export function generatePrivacySnippet(site: Site): string {
   const screen = site.collect_screen_resolution ?? true
   const perf = site.enable_performance_insights ?? false
   const filterBots = site.filter_bots ?? true
+  const retentionMonths = site.data_retention_months ?? 6
 
   const parts: string[] = []
   if (paths) parts.push('which pages are viewed')
@@ -44,6 +46,9 @@ export function generatePrivacySnippet(site: Site): string {
   if (filterBots) {
     p2 += 'Known bots and referrer spam are excluded from our analytics. '
   }
+  if (retentionMonths > 0) {
+    p2 += `Raw event data is automatically deleted after ${formatRetentionMonths(retentionMonths)}. `
+  }
   p2 += `Data is processed in a privacy-preserving way and is not used to identify individuals. For more information, see Pulse's documentation: ${DOCS_URL}`
 
   return `${p1}\n\n${p2}`

next.config.ts

@@ -21,6 +21,18 @@ const nextConfig: NextConfig = {
       },
     ]
   },
+  async rewrites() {
+    return [
+      {
+        source: '/docs',
+        destination: 'https://ciphera-e9ed055e.mintlify.dev/docs',
+      },
+      {
+        source: '/docs/:path*',
+        destination: 'https://ciphera-e9ed055e.mintlify.dev/docs/:path*',
+      },
+    ]
+  },
 }
 
 export default withPWA(nextConfig)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-frontend",
-  "version": "0.6.0-alpha",
+  "version": "0.10.0-alpha",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -10,9 +10,11 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.50",
+    "@ciphera-net/ui": "^0.0.58",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@radix-ui/react-icons": "^1.3.0",
+    "@stripe/react-stripe-js": "^5.6.0",
+    "@stripe/stripe-js": "^8.7.0",
     "axios": "^1.13.2",
     "country-flag-icons": "^1.6.4",
     "d3-scale": "^4.0.2",

styles/globals.css

@@ -19,43 +19,8 @@
   }
 }
 
-@layer components {
-  /* * TODO: Move these shared utilities to @ciphera-net/ui to avoid duplication with website */
-  
-  /* * Glass Card Effect - Crucial for the "Premium" feel */
-  .card-glass {
-    @apply bg-white/80 dark:bg-neutral-900/80;
-    @apply backdrop-blur-xl;
-    @apply border border-neutral-200/50 dark:border-neutral-800/50;
-    @apply rounded-2xl;
-    @apply transition-all duration-300 ease-out;
-  }
-
-  /* * Gradient Text for Headlines */
-  .gradient-text {
-    @apply bg-gradient-to-r from-brand-orange to-[#E54E00] bg-clip-text text-transparent;
-  }
-
-  /* * The "Pulse" Badge */
-  .badge-primary {
-    @apply inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider;
-    @apply bg-brand-orange/10 text-brand-orange border border-brand-orange/20;
-  }
-}
-
 @layer utilities {
-  /* * The Background Grid */
-  .bg-grid-pattern {
-    background-image: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
-    background-size: 32px 32px;
-  }
-
-  /* * Glow Effects */
-  .glow-orange {
-    box-shadow: 0 0 40px -10px rgba(253, 94, 15, 0.5);
-  }
-
-  /* * 3D Transform Utilities */
+  /* * 3D Transform Utilities - Pulse-specific */
   .perspective-1000 {
     perspective: 1000px;
   }