diff --git a/app/page.tsx b/app/page.tsx
index 9e8b8a9..5ff6ab6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -200,10 +200,10 @@ export default function HomePage() {
 
             {/* * --- 4. CTAs --- */}
             <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-20">
-              <Button onClick={() => initiateOAuthFlow()} className="btn-primary px-8 py-4 text-lg shadow-lg shadow-brand-orange/20">
+              <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-8 py-4 text-lg shadow-lg shadow-brand-orange/20">
                 Get Started
               </Button>
-              <Button variant="secondary" onClick={() => initiateSignupFlow()} className="btn-secondary px-8 py-4 text-lg backdrop-blur-sm">
+              <Button onClick={() => initiateSignupFlow()} variant="secondary" className="px-8 py-4 text-lg">
                 Create Account
               </Button>
             </div>
@@ -237,7 +237,7 @@ export default function HomePage() {
           {/* * NEW: CTA BOTTOM */}
           <div className="text-center mb-20">
             <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-6">Ready to switch?</h2>
-            <Button onClick={() => initiateOAuthFlow()} className="btn-primary px-8 py-4 text-lg shadow-lg shadow-brand-orange/20">
+            <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-8 py-4 text-lg shadow-lg shadow-brand-orange/20">
               Start your free trial
             </Button>
             <p className="mt-4 text-sm text-neutral-500">No credit card required • Cancel anytime</p>
@@ -265,12 +265,18 @@ export default function HomePage() {
             <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)
             </span>
-            <Link href="/pricing" className="btn-primary text-sm bg-brand-orange hover:bg-brand-orange/90 border-transparent text-white shadow-lg shadow-brand-orange/20">
-              Upgrade
+            <Link href="/pricing">
+              <Button variant="primary" className="text-sm">
+                Upgrade
+              </Button>
             </Link>
           </div>
         ) : (
-          <Link href="/sites/new" className="btn-primary text-sm">Add New Site</Link>
+          <Link href="/sites/new">
+            <Button variant="primary" className="text-sm">
+              Add New Site
+            </Button>
+          </Link>
         )}
       </div>
 
diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index 5eba5a9..b773a6c 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -331,11 +331,8 @@ export default function PricingSection() {
                 <Button 
                   onClick={() => handleSubscribe(plan.id)}
                   disabled={loadingPlan === plan.id || !!loadingPlan || !priceDetails}
-                  className={`w-full mb-8 ${
-                    isTeam 
-                      ? 'bg-brand-orange hover:bg-brand-orange/90 text-white shadow-lg shadow-brand-orange/20' 
-                      : 'bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 hover:bg-neutral-800 dark:hover:bg-neutral-100'
-                  }`}
+                  variant={isTeam ? 'primary' : 'secondary'}
+                  className="w-full mb-8"
                 >
                   {loadingPlan === plan.id ? 'Loading...' : !priceDetails ? 'Contact us' : 'Start free trial'}
                 </Button>
diff --git a/components/sites/SiteList.tsx b/components/sites/SiteList.tsx
index b548a26..986832d 100644
--- a/components/sites/SiteList.tsx
+++ b/components/sites/SiteList.tsx
@@ -2,7 +2,7 @@
 
 import Link from 'next/link'
 import { Site } from '@/lib/api/sites'
-import { BarChartIcon, SettingsIcon, BookOpenIcon, ExternalLinkIcon } from '@ciphera-net/ui'
+import { BarChartIcon, SettingsIcon, BookOpenIcon, ExternalLinkIcon, Button } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 
 interface SiteListProps {
@@ -94,10 +94,12 @@ export default function SiteList({ sites, loading, onDelete }: SiteListProps) {
           <div className="mt-auto flex gap-2">
             <Link
               href={`/sites/${site.id}`}
-              className="btn-primary flex-1 justify-center text-center text-sm inline-flex items-center gap-2"
+              className="flex-1"
             >
-              <BarChartIcon className="w-4 h-4" />
-              View Dashboard
+              <Button variant="primary" className="w-full justify-center text-sm">
+                <BarChartIcon className="w-4 h-4" />
+                View Dashboard
+              </Button>
             </Link>
             {(user?.role === 'owner' || user?.role === 'admin') && (
               <button
diff --git a/styles/globals.css b/styles/globals.css
index ec07353..77ac61f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -20,6 +20,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;