diff --git a/src/app.css b/src/app.css
index f19b75c..feddb18 100644
--- a/src/app.css
+++ b/src/app.css
@@ -173,6 +173,7 @@ body {
   text-decoration: none;
 }
 .btn-primary:hover { background: #0f2a4e; box-shadow: 0 4px 12px rgba(10,29,55,0.25); }
+.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
 
 /* Secondary button */
 .btn-secondary {
diff --git a/src/routes/admin/applications.tsx b/src/routes/admin/applications.tsx
index 313fd85..af65bd9 100644
--- a/src/routes/admin/applications.tsx
+++ b/src/routes/admin/applications.tsx
@@ -150,7 +150,7 @@ export default function ApplicationsPage() {
                     <div class="mt-4 flex gap-2 flex-wrap">
                       <Show when={app.status === 'SUBMITTED' || app.status === 'SHORTLISTED'}>
                         <button
-                          class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors"
+                          class="btn-primary"
                           disabled={busyId() === app.id}
                           onClick={() => updateStatus(app.id, 'ACCEPTED')}
                         >
diff --git a/src/routes/admin/approval.tsx b/src/routes/admin/approval.tsx
index 508afed..bb6d5c9 100644
--- a/src/routes/admin/approval.tsx
+++ b/src/routes/admin/approval.tsx
@@ -975,7 +975,7 @@ export default function ApprovalPage() {
 
         <div class="mb-6 flex items-start justify-between gap-4" style="margin-bottom:16px">
           <div />
-          <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" onClick={() => setShowAddRule((v) => !v)}>
+          <button class="btn-primary" onClick={() => setShowAddRule((v) => !v)}>
             {showAddRule() ? 'Cancel' : '+ Add Rule'}
           </button>
         </div>
@@ -1010,7 +1010,7 @@ export default function ApprovalPage() {
               </div>
             </div>
             <div class="actions" style="margin-top:14px">
-              <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" disabled={submittingRule()} onClick={handleAddRule}>
+              <button class="btn-primary" disabled={submittingRule()} onClick={handleAddRule}>
                 {submittingRule() ? 'Saving...' : 'Save Rule'}
               </button>
               <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" onClick={() => setShowAddRule(false)}>Cancel</button>
diff --git a/src/routes/admin/company.tsx b/src/routes/admin/company.tsx
index 1f7eb42..3f8a8c1 100644
--- a/src/routes/admin/company.tsx
+++ b/src/routes/admin/company.tsx
@@ -80,7 +80,7 @@ export default function CompanyPage() {
               <h1 class="text-xl font-semibold text-gray-900">Company Management</h1>
               <p class="text-sm text-gray-500 mt-0.5">Manage all company accounts on the platform.</p>
             </div>
-            <A class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" href="/admin/company/create">Create Company</A>
+            <A class="btn-primary" href="/admin/company/create">Create Company</A>
           </div>
         </div>
 
diff --git a/src/routes/admin/company/[id].tsx b/src/routes/admin/company/[id].tsx
index d525cbf..dd0e4ed 100644
--- a/src/routes/admin/company/[id].tsx
+++ b/src/routes/admin/company/[id].tsx
@@ -107,7 +107,7 @@ export default function CompanyDetailPage() {
             {isVerified() ? 'Verified - Can Post Jobs' : 'Not Verified'}
           </span>
           <A class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/company">Back to Companies</A>
-          <A class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" href="/admin/approval">Open Approval Management</A>
+          <A class="btn-primary" href="/admin/approval">Open Approval Management</A>
         </div>
       </div>
       <div class="p-6 flex-1">
diff --git a/src/routes/admin/company/create.tsx b/src/routes/admin/company/create.tsx
index 6fa954d..088979e 100644
--- a/src/routes/admin/company/create.tsx
+++ b/src/routes/admin/company/create.tsx
@@ -111,7 +111,7 @@ export default function CreateCompanyPage() {
             </div>
             <div class="mt-6 flex justify-end gap-3 border-t border-gray-100 pt-5">
               <A class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/company">Cancel</A>
-              <button class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60" type="submit" disabled={saving()}>
+              <button class="btn-primary" type="submit" disabled={saving()}>
                 {saving() ? 'Creating…' : 'Create Company'}
               </button>
             </div>
diff --git a/src/routes/admin/coupon.tsx b/src/routes/admin/coupon.tsx
index 0ba539a..b0efc00 100644
--- a/src/routes/admin/coupon.tsx
+++ b/src/routes/admin/coupon.tsx
@@ -320,7 +320,7 @@ export default function CouponPage() {
                   </div>
                 </div>
                 <div class="actions">
-                  <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" type="submit" disabled={saving()}>
+                  <button class="btn-primary" type="submit" disabled={saving()}>
                     {saving() ? 'Saving...' : (form().id ? 'Update Coupon' : 'Save Coupon')}
                   </button>
                   <Show when={form().id}>
diff --git a/src/routes/admin/credit.tsx b/src/routes/admin/credit.tsx
index 59fb55f..9220046 100644
--- a/src/routes/admin/credit.tsx
+++ b/src/routes/admin/credit.tsx
@@ -174,7 +174,7 @@ export default function CreditPage() {
                     style="flex:1"
                   />
                   <button
-                    class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors"
+                    class="btn-primary"
                     onClick={handleSearch}
                     disabled={searchLoading()}
                   >
@@ -317,7 +317,7 @@ export default function CreditPage() {
                   />
                 </div>
                 <div>
-                  <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" type="submit" disabled={adjLoading()}>
+                  <button class="btn-primary" type="submit" disabled={adjLoading()}>
                     {adjLoading() ? 'Adjusting...' : 'Apply Adjustment'}
                   </button>
                 </div>
@@ -357,7 +357,7 @@ export default function CreditPage() {
                     </div>
                   </div>
                   <div>
-                    <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" type="submit" disabled={reconLoading()}>
+                    <button class="btn-primary" type="submit" disabled={reconLoading()}>
                       {reconLoading() ? 'Running...' : 'Run Reconciliation'}
                     </button>
                   </div>
diff --git a/src/routes/admin/department.tsx b/src/routes/admin/department.tsx
index 04c6d90..a91af77 100644
--- a/src/routes/admin/department.tsx
+++ b/src/routes/admin/department.tsx
@@ -220,7 +220,7 @@ export default function DepartmentPage() {
           <Show when={view() === 'list'}>
             <button
               onClick={() => { setView('create'); setCreateError(''); setCreateName(''); setCreateDesc(''); }}
-              class="flex items-center gap-2 rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[#0f2a4e] shadow-sm"
+              class="btn-primary"
             >
               <Plus size={16} />
               Add Department
@@ -262,7 +262,7 @@ export default function DepartmentPage() {
                   <button type="button" onClick={() => setView('list')} class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                     Cancel
                   </button>
-                  <button type="submit" disabled={creating()} class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60">
+                  <button type="submit" disabled={creating()} class="btn-primary">
                     {creating() ? 'Saving…' : 'Save'}
                   </button>
                 </div>
@@ -375,7 +375,7 @@ export default function DepartmentPage() {
                                   <div class="mt-3 flex gap-2">
                                     <button type="button" onClick={cancelEdit} class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">Cancel</button>
                                     <button type="button" disabled={saving()} onClick={() => handleUpdate(item.id)}
-                                      class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60">
+                                      class="btn-primary disabled:opacity-60">
                                       {saving() ? 'Saving…' : 'Save'}
                                     </button>
                                   </div>
diff --git a/src/routes/admin/designation.tsx b/src/routes/admin/designation.tsx
index 4742f19..8f31d75 100644
--- a/src/routes/admin/designation.tsx
+++ b/src/routes/admin/designation.tsx
@@ -237,7 +237,7 @@ export default function DesignationPage() {
             Cancel
           </button>
           <button type="submit" disabled={formLoading() || depts().length === 0}
-            class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60">
+            class="btn-primary">
             {formLoading() ? (view() === 'create' ? 'Creating…' : 'Updating…') : (view() === 'create' ? 'Create Designation' : 'Update Designation')}
           </button>
         </div>
diff --git a/src/routes/admin/discount.tsx b/src/routes/admin/discount.tsx
index 93db228..ee68827 100644
--- a/src/routes/admin/discount.tsx
+++ b/src/routes/admin/discount.tsx
@@ -324,7 +324,7 @@ export default function DiscountPage() {
                   </div>
                 </div>
                 <div class="actions">
-                  <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" type="submit" disabled={saving()}>
+                  <button class="btn-primary" type="submit" disabled={saving()}>
                     {saving() ? 'Saving...' : (form().id ? 'Update Discount' : 'Save Discount')}
                   </button>
                   <Show when={form().id}>
diff --git a/src/routes/admin/employees.tsx b/src/routes/admin/employees.tsx
index a6fb795..d54179b 100644
--- a/src/routes/admin/employees.tsx
+++ b/src/routes/admin/employees.tsx
@@ -191,7 +191,7 @@ export default function EmployeesPage() {
                     Cancel
                   </button>
                   <button type="submit" disabled={creating()}
-                    class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60">
+                    class="btn-primary">
                     {creating() ? 'Creating…' : 'Create Internal User'}
                   </button>
                 </div>
diff --git a/src/routes/admin/employees/[id]/edit.tsx b/src/routes/admin/employees/[id]/edit.tsx
index 1ff1454..c05bb7d 100644
--- a/src/routes/admin/employees/[id]/edit.tsx
+++ b/src/routes/admin/employees/[id]/edit.tsx
@@ -135,7 +135,7 @@ export default function EditEmployeePage() {
               </div>
               <div class="mt-6 flex justify-end gap-3 border-t border-gray-100 pt-5">
                 <A class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/employees">Cancel</A>
-                <button class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60" type="submit" disabled={saving()}>
+                <button class="btn-primary" type="submit" disabled={saving()}>
                   {saving() ? 'Saving…' : 'Save Changes'}
                 </button>
               </div>
diff --git a/src/routes/admin/external-dashboard-management/index.tsx b/src/routes/admin/external-dashboard-management/index.tsx
index a56f438..1c13c78 100644
--- a/src/routes/admin/external-dashboard-management/index.tsx
+++ b/src/routes/admin/external-dashboard-management/index.tsx
@@ -127,7 +127,7 @@ function renderModuleContent(module: Module | null) {
         <textarea rows={4} placeholder="Describe the request" style="width:100%;border:1px solid #cbd5e1;border-radius:12px;padding:10px 12px;font-size:13px;outline:none" />
       </div>
       <div style="display:flex;justify-content:flex-end;margin-top:12px">
-        <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" type="button">Submit</button>
+        <button class="btn-primary" type="button">Submit</button>
       </div>
     </div>
   );
@@ -478,7 +478,7 @@ export default function ExternalDashboardManagementPage() {
             <h2 class="text-lg font-semibold text-gray-900">External Dashboard List</h2>
             <p class="mt-1 text-sm text-gray-500">Choose one external role dashboard to open in the builder, or create a new one.</p>
           </div>
-          <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" onClick={createDashboard} disabled={creating()}>
+          <button class="btn-primary" onClick={createDashboard} disabled={creating()}>
             {creating() ? 'Creating...' : 'Create External Dashboard'}
           </button>
         </div>
@@ -534,7 +534,7 @@ export default function ExternalDashboardManagementPage() {
           </div>
           <div class="builder-header-actions">
             <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" onClick={() => setSelectedId('')}>Back to List</button>
-            <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" onClick={saveSelected} disabled={saving()}>
+            <button class="btn-primary" onClick={saveSelected} disabled={saving()}>
               {saving() ? 'Saving...' : 'Save Dashboard'}
             </button>
           </div>
diff --git a/src/routes/admin/help/support-bridge.tsx b/src/routes/admin/help/support-bridge.tsx
index 1a8126b..05bcd40 100644
--- a/src/routes/admin/help/support-bridge.tsx
+++ b/src/routes/admin/help/support-bridge.tsx
@@ -12,7 +12,7 @@ export default function HelpSupportBridgePage() {
         <div class="p-6">
           <div class="table-card p-5 flex items-center gap-4">
             <p class="text-sm text-slate-600 flex-1">Use the Support Management module to handle all support tickets and help requests.</p>
-            <A class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" href="/admin/support">Open Support Management</A>
+            <A class="btn-primary" href="/admin/support">Open Support Management</A>
           </div>
         </div>
       </div>
diff --git a/src/routes/admin/internal-dashboard-management/index.tsx b/src/routes/admin/internal-dashboard-management/index.tsx
index 32cc08b..c5b7bdf 100644
--- a/src/routes/admin/internal-dashboard-management/index.tsx
+++ b/src/routes/admin/internal-dashboard-management/index.tsx
@@ -436,7 +436,7 @@ export default function InternalDashboardManagementPage() {
             <h2 class="text-lg font-semibold text-gray-900">Internal Dashboard List</h2>
             <p class="mt-1 text-sm text-gray-500">Choose one internal dashboard to open in the builder, or create a new dashboard for an internal role.</p>
           </div>
-          <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" onClick={createDashboard} disabled={creating()}>
+          <button class="btn-primary" onClick={createDashboard} disabled={creating()}>
             {creating() ? 'Creating...' : 'Create Internal Dashboard'}
           </button>
         </div>
@@ -492,7 +492,7 @@ export default function InternalDashboardManagementPage() {
           </div>
           <div class="builder-header-actions">
             <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" onClick={() => setSelectedId('')}>Back to List</button>
-            <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" onClick={saveSelected} disabled={saving()}>
+            <button class="btn-primary" onClick={saveSelected} disabled={saving()}>
               {saving() ? 'Saving...' : 'Save Dashboard'}
             </button>
           </div>
diff --git a/src/routes/admin/kb.tsx b/src/routes/admin/kb.tsx
index 0f7f5aa..27abdb2 100644
--- a/src/routes/admin/kb.tsx
+++ b/src/routes/admin/kb.tsx
@@ -252,7 +252,7 @@ export default function KbPage(props: KbPageProps = {}) {
           <Show when={tab() === 'categories'}>
             <div class="mb-6 flex items-start justify-between gap-4" style="margin-bottom:16px">
               <div />
-              <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" onClick={() => setShowCatForm(!showCatForm())}>
+              <button class="btn-primary" onClick={() => setShowCatForm(!showCatForm())}>
                 {showCatForm() ? 'Cancel' : 'Add Category'}
               </button>
             </div>
@@ -301,7 +301,7 @@ export default function KbPage(props: KbPageProps = {}) {
                     />
                   </div>
                   <div>
-                    <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" type="submit" disabled={catSaving()}>
+                    <button class="btn-primary" type="submit" disabled={catSaving()}>
                       {catSaving() ? 'Saving...' : 'Create Category'}
                     </button>
                   </div>
@@ -377,7 +377,7 @@ export default function KbPage(props: KbPageProps = {}) {
                                       />
                                     </div>
                                     <div style="display:flex;gap:8px">
-                                      <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" disabled={editCatSaving()} onClick={() => saveEditCat(cat.id)}>
+                                      <button class="btn-primary" disabled={editCatSaving()} onClick={() => saveEditCat(cat.id)}>
                                         {editCatSaving() ? 'Saving...' : 'Save'}
                                       </button>
                                       <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" onClick={cancelEditCat}>Cancel</button>
@@ -537,7 +537,7 @@ export default function KbPage(props: KbPageProps = {}) {
                   </select>
                 </div>
                 <div>
-                  <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" type="submit" disabled={artSaving()}>
+                  <button class="btn-primary" type="submit" disabled={artSaving()}>
                     {artSaving() ? 'Creating...' : 'Create Article'}
                   </button>
                 </div>
diff --git a/src/routes/admin/kb/articles/[id].tsx b/src/routes/admin/kb/articles/[id].tsx
index 082cae6..8d39ef9 100644
--- a/src/routes/admin/kb/articles/[id].tsx
+++ b/src/routes/admin/kb/articles/[id].tsx
@@ -41,7 +41,7 @@ export default function KbArticleDetailPage() {
         </div>
         <div class="flex items-center gap-2">
           <A class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/kb/articles">Back to Articles</A>
-          <A class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" href={`/admin/kb/articles/${params.id}/edit`}>Edit Article</A>
+          <A class="btn-primary" href={`/admin/kb/articles/${params.id}/edit`}>Edit Article</A>
         </div>
       </div>
 
diff --git a/src/routes/admin/kb/articles/[id]/edit.tsx b/src/routes/admin/kb/articles/[id]/edit.tsx
index a3d923c..fe949e4 100644
--- a/src/routes/admin/kb/articles/[id]/edit.tsx
+++ b/src/routes/admin/kb/articles/[id]/edit.tsx
@@ -131,7 +131,7 @@ export default function KbArticleEditPage() {
           </Show>
 
           <div class="mt-6 flex justify-end border-t border-gray-100 pt-5">
-            <button class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60" type="submit" disabled={saving()}>
+            <button class="btn-primary" type="submit" disabled={saving()}>
               {saving() ? 'Saving…' : 'Save Article'}
             </button>
           </div>
diff --git a/src/routes/admin/modules.tsx b/src/routes/admin/modules.tsx
index 3daf948..1ef84db 100644
--- a/src/routes/admin/modules.tsx
+++ b/src/routes/admin/modules.tsx
@@ -116,7 +116,7 @@ export default function ModulesPage() {
             <p class="text-sm text-gray-500 mt-0.5">Manage internal module definitions and activation state.</p>
           </div>
           <button
-            class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors shadow-sm"
+            class="btn-primary"
             onClick={() => openModal()}
           >
             Add Module
@@ -247,7 +247,7 @@ export default function ModulesPage() {
                 </button>
                 <button
                   type="submit"
-                  class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60"
+                  class="btn-primary"
                   disabled={submitting()}
                 >
                   {editing() ? 'Save Changes' : 'Create'}
diff --git a/src/routes/admin/onboarding-schemas/index.tsx b/src/routes/admin/onboarding-schemas/index.tsx
index aa98ce9..974a5ca 100644
--- a/src/routes/admin/onboarding-schemas/index.tsx
+++ b/src/routes/admin/onboarding-schemas/index.tsx
@@ -101,7 +101,7 @@ export default function OnboardingSchemasPage() {
             <h1 class="text-xl font-semibold text-gray-900">Onboarding Management</h1>
             <p class="text-sm text-gray-500 mt-0.5">Manage onboarding flows, role assignments, and previewable step groups for external users.</p>
           </div>
-          <A class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors shadow-sm" href="/admin/onboarding-schemas/new">Create Onboarding Flow</A>
+          <A class="btn-primary" href="/admin/onboarding-schemas/new">Create Onboarding Flow</A>
         </div>
 
         <OnboardingManagementTabs />
diff --git a/src/routes/admin/pricing.tsx b/src/routes/admin/pricing.tsx
index 79fc920..b8315e5 100644
--- a/src/routes/admin/pricing.tsx
+++ b/src/routes/admin/pricing.tsx
@@ -220,7 +220,7 @@ export default function PricingPage() {
                                 <div class="flex items-center justify-end gap-1">
                                   <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" onClick={() => startEdit(pkg)}>Edit</button>
                                   <button
-                                    class={pkg.is_active ? 'inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors' : 'inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors'}
+                                    class={pkg.is_active ? 'inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors' : 'btn-primary'}
                                     disabled={togglingId() === pkg.id}
                                     onClick={() => toggleActive(pkg)}
                                   >
@@ -264,7 +264,7 @@ export default function PricingPage() {
                                       />
                                     </div>
                                     <div style="display:flex;gap:8px">
-                                      <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" disabled={editSaving()} onClick={() => saveEdit(pkg.id)}>
+                                      <button class="btn-primary" disabled={editSaving()} onClick={() => saveEdit(pkg.id)}>
                                         {editSaving() ? 'Saving...' : 'Save'}
                                       </button>
                                       <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" onClick={cancelEdit}>Cancel</button>
@@ -349,7 +349,7 @@ export default function PricingPage() {
                   />
                 </div>
                 <div>
-                  <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" type="submit" disabled={cSaving()}>
+                  <button class="btn-primary" type="submit" disabled={cSaving()}>
                     {cSaving() ? 'Creating...' : 'Create Package'}
                   </button>
                 </div>
diff --git a/src/routes/admin/report.tsx b/src/routes/admin/report.tsx
index cc6c309..d6faa8d 100644
--- a/src/routes/admin/report.tsx
+++ b/src/routes/admin/report.tsx
@@ -76,7 +76,7 @@ export default function ReportPage() {
                   style="padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px"
                 />
               </div>
-              <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" type="submit" disabled={loading()}>
+              <button class="btn-primary" type="submit" disabled={loading()}>
                 {loading() ? 'Loading...' : 'Load Report'}
               </button>
             </form>
diff --git a/src/routes/admin/responses.tsx b/src/routes/admin/responses.tsx
index 99912cb..147682c 100644
--- a/src/routes/admin/responses.tsx
+++ b/src/routes/admin/responses.tsx
@@ -143,7 +143,7 @@ export default function ResponsesPage() {
                     </Show>
                     <Show when={row.status === 'SUBMITTED' || row.status === 'SHORTLISTED'}>
                       <button
-                        class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors"
+                        class="btn-primary"
                         disabled={busyId() === row.id}
                         onClick={() => transition(row.id, 'ACCEPTED')}
                       >
diff --git a/src/routes/admin/review.tsx b/src/routes/admin/review.tsx
index 81a5919..f4ffc69 100644
--- a/src/routes/admin/review.tsx
+++ b/src/routes/admin/review.tsx
@@ -219,7 +219,7 @@ export default function ReviewPage() {
                                   </Show>
                                   <Show when={!isPublished}>
                                     <button
-                                      class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors"
+                                      class="btn-primary"
                                       disabled={toggling() === item.id}
                                       onClick={() => handleUpdateStatus(item, 'PUBLISHED')}
                                     >
@@ -310,7 +310,7 @@ export default function ReviewPage() {
                   />
                 </div>
                 <div class="actions">
-                  <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" type="submit" disabled={saving()}>
+                  <button class="btn-primary" type="submit" disabled={saving()}>
                     {saving() ? 'Saving...' : 'Save Review'}
                   </button>
                 </div>
diff --git a/src/routes/admin/roles/[id]/edit.tsx b/src/routes/admin/roles/[id]/edit.tsx
index 591b365..811e9e2 100644
--- a/src/routes/admin/roles/[id]/edit.tsx
+++ b/src/routes/admin/roles/[id]/edit.tsx
@@ -230,7 +230,7 @@ export default function EditInternalRolePage() {
         {/* Save */}
         <div class="flex justify-end mt-2">
           <button
-            class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60"
+            class="btn-primary"
             onClick={handleSave}
             disabled={saving() || !roleName().trim()}
           >
diff --git a/src/routes/admin/roles/[id]/index.tsx b/src/routes/admin/roles/[id]/index.tsx
index dd3fe0c..3c908f2 100644
--- a/src/routes/admin/roles/[id]/index.tsx
+++ b/src/routes/admin/roles/[id]/index.tsx
@@ -52,7 +52,7 @@ export default function RoleDetailPage() {
         <div class="flex items-center gap-2">
           <A class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/roles">Back to List</A>
           <Show when={data()?.role}>
-            <A class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" href={`/admin/roles/${params.id}/edit`}>Edit Role</A>
+            <A class="btn-primary" href={`/admin/roles/${params.id}/edit`}>Edit Role</A>
           </Show>
         </div>
       </div>
diff --git a/src/routes/admin/roles/create.tsx b/src/routes/admin/roles/create.tsx
index 2645a63..6144c3f 100644
--- a/src/routes/admin/roles/create.tsx
+++ b/src/routes/admin/roles/create.tsx
@@ -210,7 +210,7 @@ export default function CreateInternalRolePage() {
           <div class="flex justify-end gap-3 mt-2">
             <A class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/roles">Cancel</A>
             <button
-              class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60"
+              class="btn-primary"
               onClick={handleSave}
               disabled={saving() || !roleName().trim()}
             >
diff --git a/src/routes/admin/roles/index.tsx b/src/routes/admin/roles/index.tsx
index 1da353b..de565b7 100644
--- a/src/routes/admin/roles/index.tsx
+++ b/src/routes/admin/roles/index.tsx
@@ -60,7 +60,7 @@ export default function InternalRolesPage() {
           </div>
           <A
             href="/admin/roles/create"
-            class="flex items-center gap-2 rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[#0f2a4e] shadow-sm"
+            class="btn-primary"
           >
             Create Internal Role
           </A>
diff --git a/src/routes/admin/roles/templates.tsx b/src/routes/admin/roles/templates.tsx
index 389b4af..d19fb9e 100644
--- a/src/routes/admin/roles/templates.tsx
+++ b/src/routes/admin/roles/templates.tsx
@@ -43,7 +43,7 @@ export default function RoleTemplatesPage() {
               <h1 class="text-xl font-semibold text-gray-900">Role Templates</h1>
               <p class="text-sm text-gray-500 mt-0.5">Starter role presets for faster internal role creation and cloning.</p>
             </div>
-            <A class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" href="/admin/roles/create">Create Internal Role</A>
+            <A class="btn-primary" href="/admin/roles/create">Create Internal Role</A>
           </div>
         </div>
 
diff --git a/src/routes/admin/support.tsx b/src/routes/admin/support.tsx
index 909fb9c..51758df 100644
--- a/src/routes/admin/support.tsx
+++ b/src/routes/admin/support.tsx
@@ -362,7 +362,7 @@ export default function SupportPage() {
                   </div>
                 </div>
                 <div>
-                  <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" type="submit" disabled={createLoading()}>
+                  <button class="btn-primary" type="submit" disabled={createLoading()}>
                     {createLoading() ? 'Creating...' : 'Create Support Case'}
                   </button>
                 </div>
diff --git a/src/routes/admin/tax.tsx b/src/routes/admin/tax.tsx
index 22a7868..871f2a9 100644
--- a/src/routes/admin/tax.tsx
+++ b/src/routes/admin/tax.tsx
@@ -70,7 +70,7 @@ export default function TaxPage() {
             <h1 class="text-xl font-semibold text-gray-900">Tax Management</h1>
             <p class="text-sm text-gray-500 mt-0.5">Configure tax rates for platform transactions.</p>
           </div>
-          <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" onClick={() => setShowForm(!showForm())}>
+          <button class="btn-primary" onClick={() => setShowForm(!showForm())}>
             {showForm() ? 'Cancel' : 'Add Tax'}
           </button>
         </div>
@@ -116,7 +116,7 @@ export default function TaxPage() {
                   />
                 </div>
                 <div>
-                  <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" type="submit" disabled={saving()}>
+                  <button class="btn-primary" type="submit" disabled={saving()}>
                     {saving() ? 'Saving...' : 'Save Tax'}
                   </button>
                 </div>
diff --git a/src/routes/admin/users.tsx b/src/routes/admin/users.tsx
index d20581c..8f8919c 100644
--- a/src/routes/admin/users.tsx
+++ b/src/routes/admin/users.tsx
@@ -268,7 +268,7 @@ export default function UsersPage() {
                     <p><strong>Created:</strong> {(selectedUser()!.created_at || selectedUser()!.createdAt) ? new Date((selectedUser()!.created_at || selectedUser()!.createdAt)!).toLocaleString() : '—'}</p>
                     <p><strong>Role ID:</strong> {selectedUser()!.roleId || '—'}</p>
                     <div class="actions">
-                      <A class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" href={`/admin/users/${selectedUser()!.id}/edit`}>Edit User</A>
+                      <A class="btn-primary" href={`/admin/users/${selectedUser()!.id}/edit`}>Edit User</A>
                       <button class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors" type="button">Deactivate</button>
                     </div>
                   </div>
diff --git a/src/routes/admin/users/[id]/edit.tsx b/src/routes/admin/users/[id]/edit.tsx
index 1c1bc48..5d0e033 100644
--- a/src/routes/admin/users/[id]/edit.tsx
+++ b/src/routes/admin/users/[id]/edit.tsx
@@ -173,7 +173,7 @@ export default function EditUserPage() {
 
           <div class="mt-6 flex justify-end gap-3 border-t border-gray-100 pt-5">
             <button class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" type="button" onClick={() => navigate('/admin/users')}>Cancel</button>
-            <button class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60" type="button" onClick={save} disabled={submitting()}>
+            <button class="btn-primary" type="button" onClick={save} disabled={submitting()}>
               {submitting() ? 'Saving…' : 'Save Changes'}
             </button>
           </div>
diff --git a/src/routes/admin/users/details/[id].tsx b/src/routes/admin/users/details/[id].tsx
index c51f0f6..baaaba4 100644
--- a/src/routes/admin/users/details/[id].tsx
+++ b/src/routes/admin/users/details/[id].tsx
@@ -169,7 +169,7 @@ export default function UserDetailPage() {
         </div>
         <div class="flex items-center gap-2">
           <A class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/users">Back to Users</A>
-          <A class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" href={`/admin/users/${params.id}/edit`}>Edit User</A>
+          <A class="btn-primary" href={`/admin/users/${params.id}/edit`}>Edit User</A>
         </div>
       </div>
       <div class="p-6 flex-1">
diff --git a/src/routes/admin/verification-status/[id].tsx b/src/routes/admin/verification-status/[id].tsx
index 35058ae..81801d2 100644
--- a/src/routes/admin/verification-status/[id].tsx
+++ b/src/routes/admin/verification-status/[id].tsx
@@ -48,7 +48,7 @@ export default function VerificationStatusDetailPage() {
         </div>
         <div class="flex items-center gap-2">
           <A class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/verification-status">Back to Status List</A>
-          <A class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" href={`/admin/approval/${params.id}`}>Open Approval Detail</A>
+          <A class="btn-primary" href={`/admin/approval/${params.id}`}>Open Approval Detail</A>
         </div>
       </div>
       <div class="p-6 flex-1">
diff --git a/src/routes/admin/verification.tsx b/src/routes/admin/verification.tsx
index 63906f6..4c4aa79 100644
--- a/src/routes/admin/verification.tsx
+++ b/src/routes/admin/verification.tsx
@@ -17,7 +17,7 @@ export default function VerificationManagementPage() {
               Use Approval Management to review companies, customers, candidates, and professional submissions.
             </p>
             <div class="actions">
-              <A class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" href="/admin/approval">Open Approval Management</A>
+              <A class="btn-primary" href="/admin/approval">Open Approval Management</A>
             </div>
           </div>
         </div>
diff --git a/src/routes/admin/verification/[id].tsx b/src/routes/admin/verification/[id].tsx
index d973dc5..69214cf 100644
--- a/src/routes/admin/verification/[id].tsx
+++ b/src/routes/admin/verification/[id].tsx
@@ -45,7 +45,7 @@ export default function VerificationDetailPage() {
         </div>
         <div class="flex items-center gap-2">
           <A class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/verification">Back to Verification</A>
-          <A class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" href={`/admin/approval/${params.id}`}>Open Approval Detail</A>
+          <A class="btn-primary" href={`/admin/approval/${params.id}`}>Open Approval Detail</A>
         </div>
       </div>
       <div class="p-6 flex-1">
@@ -72,7 +72,7 @@ export default function VerificationDetailPage() {
               This route mirrors the Next.js verification detail entry point and delegates action workflow to Approval Management.
             </p>
             <div class="actions">
-              <A class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" href={`/admin/approval/${params.id}`}>Review & Take Action</A>
+              <A class="btn-primary" href={`/admin/approval/${params.id}`}>Review & Take Action</A>
             </div>
           </section>
         </div>