app/faq/page.tsx

@@ -131,7 +131,7 @@ export default function FAQPage() {
           </p>
           <a
             href="mailto:support@ciphera.net"
-            className="btn-secondary inline-flex"
+            className="inline-flex items-center justify-center gap-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-white px-5 py-2.5 rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-800 shadow-sm hover:shadow-md dark:shadow-none transition-all duration-200"
           >
             Contact us
           </a>

app/not-found.tsx

@@ -28,12 +28,12 @@ export default function NotFound() {
 
         <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
           <Link href="/">
-            <Button className="btn-primary px-8 py-3 shadow-lg shadow-brand-orange/20">
+            <Button variant="primary" className="px-8 py-3 shadow-lg shadow-brand-orange/20">
               Go back home
             </Button>
           </Link>
           <Link href="/faq">
-            <Button variant="secondary" className="btn-secondary px-8 py-3 backdrop-blur-sm">
+            <Button variant="secondary" className="px-8 py-3">
               View FAQ
             </Button>
           </Link>

app/share/[id]/page.tsx

@@ -5,7 +5,7 @@ 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 { LoadingOverlay } from '@ciphera-net/ui'
+import { LoadingOverlay, Button } from '@ciphera-net/ui'
 import Chart from '@/components/dashboard/Chart'
 import TopPages from '@/components/dashboard/ContentStats'
 import TopReferrers from '@/components/dashboard/TopReferrers'
@@ -225,12 +225,13 @@ export default function PublicDashboardPage() {
                     apiUrl={process.env.NEXT_PUBLIC_CAPTCHA_API_URL}
                 />
             </div>
-            <button
+            <Button
               type="submit"
-              className="w-full btn-primary"
+              variant="primary"
+              className="w-full"
             >
               Access Dashboard
-            </button>
+            </Button>
           </form>
         </div>
       </div>

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

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { ApiError } from '@/lib/api/client'
 import { getFunnel, getFunnelStats, deleteFunnel, type Funnel, type FunnelStats } from '@/lib/api/funnels'
-import { toast, LoadingOverlay, Select, DatePicker, ChevronLeftIcon, ArrowRightIcon, TrashIcon, useTheme } from '@ciphera-net/ui'
+import { toast, LoadingOverlay, Select, DatePicker, ChevronLeftIcon, ArrowRightIcon, TrashIcon, useTheme, Button } from '@ciphera-net/ui'
 import Link from 'next/link'
 import {
   BarChart,
@@ -107,8 +107,10 @@ export default function FunnelReportPage() {
     return (
       <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">Access denied</p>
-        <Link href={`/sites/${siteId}/funnels`} className="btn-primary mt-4 inline-block">
+        <Link href={`/sites/${siteId}/funnels`}>
+          <Button variant="primary" className="mt-4">
             Back to Funnels
+          </Button>
         </Link>
       </div>
     )
@@ -118,9 +120,9 @@ export default function FunnelReportPage() {
     return (
       <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 mb-4">Unable to load funnel</p>
-        <button type="button" onClick={() => loadData()} className="btn-primary">
+        <Button type="button" onClick={() => loadData()} variant="primary">
           Try again
-        </button>
+        </Button>
       </div>
     )
   }

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

@@ -215,16 +215,15 @@ export default function CreateFunnelPage() {
         </div>
 
         <div className="flex justify-end gap-4">
-          <Link
+          <Link href={`/sites/${siteId}/funnels`}>
-            href={`/sites/${siteId}/funnels`}
+            <Button variant="secondary">
-            className="btn-secondary"
-          >
               Cancel
+            </Button>
           </Link>
           <Button
             type="submit"
             disabled={saving}
-            className="btn-primary"
+            variant="primary"
           >
             {saving ? 'Creating...' : 'Create Funnel'}
           </Button>

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

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { listFunnels, deleteFunnel, type Funnel } from '@/lib/api/funnels'
-import { toast, LoadingOverlay, PlusIcon, ArrowRightIcon, ChevronLeftIcon, TrashIcon } from '@ciphera-net/ui'
+import { toast, LoadingOverlay, PlusIcon, ArrowRightIcon, ChevronLeftIcon, TrashIcon, Button } from '@ciphera-net/ui'
 import Link from 'next/link'
 
 export default function FunnelsPage() {
@@ -66,12 +66,11 @@ export default function FunnelsPage() {
             </p>
           </div>
           <div className="ml-auto">
-            <Link
+            <Link href={`/sites/${siteId}/funnels/new`}>
-              href={`/sites/${siteId}/funnels/new`}
+              <Button variant="primary" className="inline-flex items-center gap-2">
-              className="btn-primary inline-flex items-center gap-2"
-            >
                 <PlusIcon className="w-4 h-4" />
                 <span>Create Funnel</span>
+              </Button>
             </Link>
           </div>
         </div>
@@ -87,12 +86,11 @@ export default function FunnelsPage() {
             <p className="text-neutral-600 dark:text-neutral-400 mb-6 max-w-md mx-auto">
               Create a funnel to track how users move through your site and where they drop off.
             </p>
-            <Link
+            <Link href={`/sites/${siteId}/funnels/new`}>
-              href={`/sites/${siteId}/funnels/new`}
+              <Button variant="primary" className="inline-flex items-center gap-2">
-              className="btn-primary inline-flex items-center gap-2"
-            >
                 <PlusIcon className="w-4 h-4" />
                 <span>Create Funnel</span>
+              </Button>
             </Link>
           </div>
         ) : (

app/sites/[id]/page.tsx

@@ -8,7 +8,7 @@ import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, get
 import { formatNumber, formatDuration, getDateRange } from '@/lib/utils/format'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@/lib/utils/authErrors'
-import { LoadingOverlay } 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'
 import ContentStats from '@/components/dashboard/ContentStats'
@@ -297,19 +297,21 @@ export default function SiteDashboardPage() {
                 { value: 'custom', label: 'Custom' },
               ]}
             />
-            <button
+            <Button
               onClick={() => router.push(`/sites/${siteId}/funnels`)}
-              className="btn-secondary text-sm"
+              variant="secondary"
+              className="text-sm"
             >
               Funnels
-            </button>
+            </Button>
             {canEdit && (
-            <button
+            <Button
               onClick={() => router.push(`/sites/${siteId}/settings`)}
-              className="btn-secondary text-sm"
+              variant="secondary"
+              className="text-sm"
             >
               Settings
-            </button>
+            </Button>
             )}
           </div>
         </div>