diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6020623..7232e22 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
### Added
+- **BunnyCDN integration.** Connect your BunnyCDN account in Settings > Integrations to monitor your CDN performance right alongside your analytics. A new "CDN" tab on your dashboard shows total bandwidth served, request volume, cache hit rate, origin response time, and error counts — each with percentage changes compared to the previous period. Charts show bandwidth trends (total vs cached), daily request volume, and error breakdowns over time. A geographic breakdown shows which countries consume the most bandwidth. Pulse only stores your API key encrypted and only reads statistics — it never modifies anything in your BunnyCDN account. You can disconnect and fully remove all CDN data at any time.
+- **Smart pull zone matching.** When connecting BunnyCDN, Pulse automatically filters your pull zones to only show the ones that match your tracked site's domain — so you can't accidentally connect the wrong pull zone.
+
- **Google Search Console integration.** Connect your Google Search Console account in Settings > Integrations to see which search queries bring visitors to your site. A new "Search" tab on your dashboard shows total clicks, impressions, average CTR, and average ranking position — with percentage changes compared to the previous period. Browse your top search queries and top pages in sortable, paginated tables. Click any query to see which pages rank for it, or click any page to see which queries drive traffic to it. Pulse only requests read-only access to your Search Console data, encrypts your Google credentials, and lets you disconnect and fully remove all search data at any time.
- **Integrations tab in Settings.** A new "Integrations" section in your site settings is where you connect and manage external services. Google Search Console is the first integration available — more will follow.
- **Search performance on your dashboard.** When Google Search Console is connected, a new "Search" panel appears on your main dashboard alongside Campaigns — showing your total clicks, impressions, and average position at a glance, plus your top 5 search queries. Click "View all" to dive deeper.
diff --git a/app/sites/[id]/cdn/page.tsx b/app/sites/[id]/cdn/page.tsx
new file mode 100644
index 0000000..86caf90
--- /dev/null
+++ b/app/sites/[id]/cdn/page.tsx
@@ -0,0 +1,477 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams } from 'next/navigation'
+import Link from 'next/link'
+import { getDateRange, formatDate, Select } from '@ciphera-net/ui'
+import { ArrowSquareOut, CloudArrowUp } from '@phosphor-icons/react'
+import {
+ ResponsiveContainer,
+ AreaChart,
+ Area,
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+} from 'recharts'
+import { useDashboard, useBunnyStatus, useBunnyOverview, useBunnyDailyStats, useBunnyTopCountries } from '@/lib/swr/dashboard'
+import { SkeletonLine, StatCardSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
+
+// ─── Helpers ────────────────────────────────────────────────────
+
+function formatBytes(bytes: number): string {
+ if (bytes === 0) return '0 B'
+ const units = ['B', 'KB', 'MB', 'GB', 'TB']
+ const i = Math.floor(Math.log(bytes) / Math.log(1024))
+ const value = bytes / Math.pow(1024, i)
+ return value.toFixed(i === 0 ? 0 : 1) + ' ' + units[i]
+}
+
+function formatNumber(n: number): string {
+ if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+ if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K'
+ return n.toLocaleString()
+}
+
+function formatDateShort(date: string): string {
+ const d = new Date(date + 'T00:00:00')
+ return d.getDate() + ' ' + d.toLocaleString('en-US', { month: 'short' })
+}
+
+function changePercent(
+ current: number,
+ prev: number
+): { value: number; positive: boolean } | null {
+ if (prev === 0) return null
+ const pct = ((current - prev) / prev) * 100
+ return { value: pct, positive: pct >= 0 }
+}
+
+// ─── Page ───────────────────────────────────────────────────────
+
+export default function CDNPage() {
+ const params = useParams()
+ const siteId = params.id as string
+
+ // Date range
+ const [period, setPeriod] = useState('7')
+ const [dateRange, setDateRange] = useState(() => getDateRange(7))
+
+ // Data fetching
+ const { data: bunnyStatus } = useBunnyStatus(siteId)
+ const { data: dashboard } = useDashboard(siteId, dateRange.start, dateRange.end)
+ const { data: overview } = useBunnyOverview(siteId, dateRange.start, dateRange.end)
+ const { data: dailyStats } = useBunnyDailyStats(siteId, dateRange.start, dateRange.end)
+ const { data: topCountries } = useBunnyTopCountries(siteId, dateRange.start, dateRange.end)
+
+ const showSkeleton = useMinimumLoading(!bunnyStatus)
+ const fadeClass = useSkeletonFade(showSkeleton)
+
+ // Document title
+ useEffect(() => {
+ const domain = dashboard?.site?.domain
+ document.title = domain ? `CDN \u00b7 ${domain} | Pulse` : 'CDN | Pulse'
+ }, [dashboard?.site?.domain])
+
+ // ─── Loading skeleton ─────────────────────────────────────
+
+ if (showSkeleton) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ // ─── Not connected state ──────────────────────────────────
+
+ if (bunnyStatus && !bunnyStatus.connected) {
+ return (
+
+
+
+
+
+
+ Connect BunnyCDN
+
+
+ Monitor your CDN performance including bandwidth usage, cache hit rates, request volumes, and geographic distribution.
+