diff --git a/app/templates/admin/code-quality-dashboard.html b/app/templates/admin/code-quality-dashboard.html
index c68f6e01..4df64d59 100644
--- a/app/templates/admin/code-quality-dashboard.html
+++ b/app/templates/admin/code-quality-dashboard.html
@@ -1,5 +1,7 @@
 {# app/templates/admin/code-quality-dashboard.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state, alert_dynamic %}
+{% from 'shared/macros/headers.html' import page_header_flex, refresh_button, action_button %}
 
 {% block title %}Code Quality Dashboard{% endblock %}
 
@@ -10,60 +12,16 @@
 {% endblock %}
 
 {% block content %}
-<!-- Page Header with Actions -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Code Quality Dashboard
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            Architecture validation and technical debt tracking
-        </p>
-    </div>
-    <div class="flex space-x-3">
-        <button
-            @click="refresh()"
-            :disabled="loading"
-            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-            <span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
-            <span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
-            <span>Refresh</span>
-        </button>
-        <button
-            @click="runScan()"
-            :disabled="scanning"
-            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-            <span x-show="!scanning" x-html="$icon('search', 'w-4 h-4 mr-2')"></span>
-            <span x-show="scanning" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
-            <span x-text="scanning ? 'Scanning...' : 'Run Scan'"></span>
-        </button>
-    </div>
-</div>
+{% call page_header_flex(title='Code Quality Dashboard', subtitle='Architecture validation and technical debt tracking') %}
+    {{ refresh_button(variant='secondary') }}
+    {{ action_button('Run Scan', 'Scanning...', 'scanning', 'runScan()', icon='search') }}
+{% endcall %}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading dashboard...</p>
-</div>
+{{ loading_state('Loading dashboard...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading dashboard</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading dashboard') }}
 
-<!-- Success Message -->
-<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
-    <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold" x-text="successMessage"></p>
-    </div>
-</div>
+{{ alert_dynamic(type='success', message_var='successMessage', show_condition='successMessage') }}
 
 <!-- Dashboard Content -->
 <div x-show="!loading && !error">
diff --git a/app/templates/admin/code-quality-violation-detail.html b/app/templates/admin/code-quality-violation-detail.html
index de38f46a..7457be0e 100644
--- a/app/templates/admin/code-quality-violation-detail.html
+++ b/app/templates/admin/code-quality-violation-detail.html
@@ -1,5 +1,7 @@
 {# app/templates/admin/code-quality-violation-detail.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
 
 {% block title %}Violation Detail{% endblock %}
 
@@ -159,37 +161,11 @@ function codeQualityViolationDetail(violationId) {
 {% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Violation Details
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            Review and manage architecture violation
-        </p>
-    </div>
-    <a href="/admin/code-quality/violations"
-       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
-        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-        Back to Violations
-    </a>
-</div>
+{{ page_header('Violation Details', subtitle='Review and manage architecture violation', back_url='/admin/code-quality/violations', back_label='Back to Violations') }}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading violation details...</p>
-</div>
+{{ loading_state('Loading violation details...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading violation</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading violation') }}
 
 <!-- Content -->
 <div x-show="!loading && violation" class="grid gap-6 mb-8">
@@ -259,6 +235,7 @@ function codeQualityViolationDetail(violationId) {
         <div class="mb-6" x-show="violation.status === 'open' || violation.status === 'assigned'">
             <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Assign to User</label>
             <div class="flex gap-2">
+                {# noqa: FE-008 - User ID is typed directly, not incremented #}
                 <input x-model="assignUserId"
                        type="number"
                        placeholder="User ID"
diff --git a/app/templates/admin/code-quality-violations.html b/app/templates/admin/code-quality-violations.html
index 08850c9b..fb33361e 100644
--- a/app/templates/admin/code-quality-violations.html
+++ b/app/templates/admin/code-quality-violations.html
@@ -1,6 +1,9 @@
 {# app/templates/admin/code-quality-violations.html #}
 {% extends "admin/base.html" %}
 {% from 'shared/macros/pagination.html' import pagination %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
 
 {% block title %}Violations List{% endblock %}
 
@@ -11,37 +14,11 @@
 {% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Architecture Violations
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            Review and manage code quality violations
-        </p>
-    </div>
-    <a href="/admin/code-quality"
-       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
-        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-        Back to Dashboard
-    </a>
-</div>
+{{ page_header('Architecture Violations', subtitle='Review and manage code quality violations', back_url='/admin/code-quality', back_label='Back to Dashboard') }}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading violations...</p>
-</div>
+{{ loading_state('Loading violations...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading violations</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading violations') }}
 
 <!-- Content -->
 <div x-show="!loading">
@@ -106,20 +83,8 @@
     </div>
 
     <!-- Violations Table -->
-    <div class="w-full overflow-hidden rounded-lg shadow-xs">
-        <div class="w-full overflow-x-auto">
-            <table class="w-full whitespace-no-wrap">
-                <thead>
-                    <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
-                        <th class="px-4 py-3">Rule</th>
-                        <th class="px-4 py-3">Severity</th>
-                        <th class="px-4 py-3">File</th>
-                        <th class="px-4 py-3">Line</th>
-                        <th class="px-4 py-3">Message</th>
-                        <th class="px-4 py-3">Status</th>
-                        <th class="px-4 py-3">Actions</th>
-                    </tr>
-                </thead>
+    {% call table_wrapper() %}
+                {{ table_header(['Rule', 'Severity', 'File', 'Line', 'Message', 'Status', 'Actions']) }}
                 <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                     <template x-if="violations.length === 0">
                         <tr>
@@ -191,9 +156,7 @@
                         </tr>
                     </template>
                 </tbody>
-            </table>
-        </div>
-    </div>
+    {% endcall %}
 
     {{ pagination() }}
 </div>
diff --git a/app/templates/admin/companies.html b/app/templates/admin/companies.html
index 87664ac9..5e2a9ba3 100644
--- a/app/templates/admin/companies.html
+++ b/app/templates/admin/companies.html
@@ -1,40 +1,20 @@
 {# app/templates/admin/companies.html #}
 {% extends "admin/base.html" %}
 {% from 'shared/macros/pagination.html' import pagination %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
 
 {% block title %}Companies{% endblock %}
 
 {% block alpine_data %}adminCompanies(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-        Company Management
-    </h2>
-    <a
-        href="/admin/companies/create"
-        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
-    >
-        <span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
-        Create Company
-    </a>
-</div>
+{{ page_header('Company Management', action_label='Create Company', action_url='/admin/companies/create') }}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading companies...</p>
-</div>
+{{ loading_state('Loading companies...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading companies</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading companies') }}
 
 <!-- Stats Cards -->
 <div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -156,19 +136,9 @@
 </div>
 
 <!-- Companies Table -->
-<div x-show="!loading" class="w-full overflow-hidden rounded-lg shadow-xs">
-    <div class="w-full overflow-x-auto">
-        <table class="w-full whitespace-no-wrap">
-            <thead>
-                <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
-                    <th class="px-4 py-3">Company</th>
-                    <th class="px-4 py-3">Owner</th>
-                    <th class="px-4 py-3">Vendors</th>
-                    <th class="px-4 py-3">Status</th>
-                    <th class="px-4 py-3">Created</th>
-                    <th class="px-4 py-3">Actions</th>
-                </tr>
-            </thead>
+<div x-show="!loading">
+    {% call table_wrapper() %}
+            {{ table_header(['Company', 'Owner', 'Vendors', 'Status', 'Created', 'Actions']) }}
             <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                 <!-- Empty State -->
                 <template x-if="paginatedCompanies.length === 0">
@@ -268,8 +238,7 @@
                     </tr>
                 </template>
             </tbody>
-        </table>
-    </div>
+    {% endcall %}
 
     {{ pagination() }}
 </div>
diff --git a/app/templates/admin/company-create.html b/app/templates/admin/company-create.html
index 3b1b034f..9a5bcbd9 100644
--- a/app/templates/admin/company-create.html
+++ b/app/templates/admin/company-create.html
@@ -1,31 +1,14 @@
 {# app/templates/admin/company-create.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import error_state %}
 
 {% block title %}Create Company{% endblock %}
 
 {% block alpine_data %}adminCompanyCreate(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Create New Company
-        </h2>
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-            Create a company account with an owner user
-        </p>
-    </div>
-    <a
-        href="/admin/companies"
-        class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-500 focus:outline-none focus:shadow-outline-gray"
-    >
-        <span class="flex items-center">
-            <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-            Back to Companies
-        </span>
-    </a>
-</div>
+{{ page_header('Create New Company', subtitle='Create a company account with an owner user', back_url='/admin/companies', back_label='Back to Companies') }}
 
 <!-- Success Message -->
 <div x-show="successMessage" x-cloak class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
@@ -48,16 +31,7 @@
     </div>
 </div>
 
-<!-- Error Message -->
-<div x-show="errorMessage" x-cloak class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
-    <div class="flex items-start">
-        <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-        <div>
-            <p class="font-semibold">Error Creating Company</p>
-            <p class="text-sm mt-1" x-text="errorMessage"></p>
-        </div>
-    </div>
-</div>
+{{ error_state('Error Creating Company', error_var='errorMessage', show_condition='errorMessage') }}
 
 <!-- Create Company Form -->
 <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
diff --git a/app/templates/admin/company-detail.html b/app/templates/admin/company-detail.html
index d6d97c36..ebdd5fd4 100644
--- a/app/templates/admin/company-detail.html
+++ b/app/templates/admin/company-detail.html
@@ -1,44 +1,22 @@
 {# app/templates/admin/company-detail.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/headers.html' import detail_page_header %}
 
 {% block title %}Company Details{% endblock %}
 
 {% block alpine_data %}adminCompanyDetail(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="company?.name || 'Company Details'">
-            Company Details
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="company">
-            ID: <span x-text="companyId"></span>
-            <span class="text-gray-400 mx-2">|</span>
-            <span x-text="company?.vendor_count || 0"></span> vendor(s)
-        </p>
-    </div>
-    <a href="/admin/companies"
-       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
-        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-        Back
-    </a>
-</div>
+{% call detail_page_header("company?.name || 'Company Details'", '/admin/companies', subtitle_show='company') %}
+    ID: <span x-text="companyId"></span>
+    <span class="text-gray-400 mx-2">|</span>
+    <span x-text="company?.vendor_count || 0"></span> vendor(s)
+{% endcall %}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading company details...</p>
-</div>
+{{ loading_state('Loading company details...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading company</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading company') }}
 
 <!-- Company Details -->
 <div x-show="!loading && company">
diff --git a/app/templates/admin/company-edit.html b/app/templates/admin/company-edit.html
index 5ebd1d6e..9cbc668b 100644
--- a/app/templates/admin/company-edit.html
+++ b/app/templates/admin/company-edit.html
@@ -1,33 +1,19 @@
 {# app/templates/admin/company-edit.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state %}
+{% from 'shared/macros/inputs.html' import search_autocomplete, selected_item_display %}
+{% from 'shared/macros/headers.html' import edit_page_header %}
 
 {% block title %}Edit Company{% endblock %}
 
 {% block alpine_data %}adminCompanyEdit(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Edit Company
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="company">
-            <span x-text="company?.name"></span>
-        </p>
-    </div>
-    <a href="/admin/companies"
-       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
-        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-        Back to Companies
-    </a>
-</div>
+{% call edit_page_header('Edit Company', '/admin/companies', subtitle_show='company', back_label='Back to Companies') %}
+    <span x-text="company?.name"></span>
+{% endcall %}
 
-<!-- Loading State -->
-<div x-show="loadingCompany" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading company...</p>
-</div>
+{{ loading_state('Loading company...', show_condition='loadingCompany') }}
 
 <!-- Edit Form -->
 <div x-show="!loadingCompany && company">
@@ -322,6 +308,7 @@
         </p>
     </div>
 
+    {# noqa: FE-004 - Complex form modal with dynamic user search and transfer functionality #}
     <!-- Transfer Ownership Modal -->
     <div
         x-show="showTransferOwnershipModal"
@@ -364,60 +351,26 @@
                         <span class="text-gray-700 dark:text-gray-400">
                             New Owner <span class="text-red-600">*</span>
                         </span>
-                        <div class="relative">
-                            <input
-                                type="text"
-                                x-model="userSearchQuery"
-                                @input="searchUsers()"
-                                @focus="showUserDropdown = true"
-                                :disabled="transferring"
-                                placeholder="Search by name or email..."
-                                class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
-                            >
-                            <!-- Search Results Dropdown -->
-                            <div
-                                x-show="showUserDropdown && userSearchResults.length > 0"
-                                x-cloak
-                                @click.away="showUserDropdown = false"
-                                class="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-48 overflow-y-auto"
-                            >
-                                <template x-for="user in userSearchResults" :key="user.id">
-                                    <button
-                                        type="button"
-                                        @click="selectUser(user)"
-                                        class="w-full px-4 py-2 text-left text-sm hover:bg-purple-50 dark:hover:bg-gray-600 focus:outline-none"
-                                        :class="{ 'bg-purple-50 dark:bg-gray-600': transferData.new_owner_user_id === user.id }"
-                                    >
-                                        <div class="font-medium text-gray-700 dark:text-gray-200" x-text="user.username"></div>
-                                        <div class="text-xs text-gray-500 dark:text-gray-400" x-text="user.email"></div>
-                                    </button>
-                                </template>
-                            </div>
-                            <!-- No Results -->
-                            <div
-                                x-show="showUserDropdown && userSearchQuery.length >= 2 && userSearchResults.length === 0 && !searchingUsers"
-                                class="absolute z-10 w-full mt-1 px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg text-sm text-gray-500 dark:text-gray-400"
-                            >
-                                No users found
-                            </div>
-                            <!-- Loading -->
-                            <div
-                                x-show="searchingUsers"
-                                class="absolute z-10 w-full mt-1 px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg text-sm text-gray-500 dark:text-gray-400"
-                            >
-                                <span x-html="$icon('spinner', 'w-4 h-4 inline mr-2')"></span>
-                                Searching...
-                            </div>
-                        </div>
-                        <!-- Selected User Display -->
-                        <div x-show="selectedUser" class="mt-2 p-2 bg-purple-50 dark:bg-purple-900 rounded-lg text-sm">
-                            <span class="text-purple-700 dark:text-purple-300">
-                                Selected: <strong x-text="selectedUser?.username"></strong> (<span x-text="selectedUser?.email"></span>)
-                            </span>
-                            <button type="button" @click="clearSelectedUser()" class="ml-2 text-purple-600 hover:text-purple-800 dark:text-purple-400">
-                                <span x-html="$icon('x', 'w-4 h-4 inline')"></span>
-                            </button>
-                        </div>
+                        {{ search_autocomplete(
+                            search_var='userSearchQuery',
+                            results_var='userSearchResults',
+                            show_dropdown_var='showUserDropdown',
+                            loading_var='searchingUsers',
+                            disabled_var='transferring',
+                            search_action='searchUsers()',
+                            select_action='selectUser(item)',
+                            selected_check='transferData.new_owner_user_id === item.id',
+                            display_field='username',
+                            secondary_field='email',
+                            placeholder='Search by name or email...',
+                            no_results_text='No users found'
+                        ) }}
+                        {{ selected_item_display(
+                            selected_var='selectedUser',
+                            display_field='username',
+                            secondary_field='email',
+                            clear_action='clearSelectedUser()'
+                        ) }}
                         <span class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                             Current owner: <span x-text="company?.owner_username || 'User ID ' + company?.owner_user_id"></span>
                         </span>
diff --git a/app/templates/admin/content-page-edit.html b/app/templates/admin/content-page-edit.html
index c8ee8e1b..7c193cee 100644
--- a/app/templates/admin/content-page-edit.html
+++ b/app/templates/admin/content-page-edit.html
@@ -1,34 +1,29 @@
 {# app/templates/admin/content-page-edit.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state, alert_dynamic %}
+{% from 'shared/macros/headers.html' import page_header_flex, back_button, action_button %}
+{% from 'shared/macros/inputs.html' import number_stepper %}
 
 {% block title %}{% if page_id %}Edit{% else %}Create{% endif %} Content Page{% endblock %}
 
 {% block alpine_data %}contentPageEditor({{ page_id if page_id else 'null' }}){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
+{# Dynamic title/subtitle and save button text based on create vs edit mode #}
 <div class="flex items-center justify-between my-6">
     <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            <span x-text="pageId ? 'Edit Content Page' : 'Create Content Page'"></span>
-        </h2>
+        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="pageId ? 'Edit Content Page' : 'Create Content Page'"></h2>
         <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
             <span x-show="!pageId">Create a new platform default or vendor-specific page</span>
             <span x-show="pageId">Modify an existing content page</span>
         </p>
     </div>
-    <div class="flex gap-2">
-        <a
-            href="/admin/content-pages"
-            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:border-gray-400 dark:hover:border-gray-500 focus:outline-none focus:shadow-outline-purple"
-        >
-            <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-            Back to List
-        </a>
+    <div class="flex items-center space-x-3">
+        {{ back_button('/admin/content-pages', 'Back to List') }}
         <button
             @click="savePage()"
             :disabled="saving"
-            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
+            class="flex items-center px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 border rounded-lg focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed text-white bg-purple-600 border-transparent hover:bg-purple-700 focus:shadow-outline-purple"
         >
             <span x-show="!saving" x-html="$icon('check', 'w-4 h-4 mr-2')"></span>
             <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
@@ -37,28 +32,11 @@
     </div>
 </div>
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading page...</p>
-</div>
+{{ loading_state('Loading page...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error', show_condition='error && !loading') }}
 
-<!-- Success Message -->
-<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
-    <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold" x-text="successMessage"></p>
-    </div>
-</div>
+{{ alert_dynamic(type='success', message_var='successMessage', show_condition='successMessage') }}
 
 <!-- Main Form -->
 <div x-show="!loading" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
@@ -217,12 +195,7 @@
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                         Display Order
                     </label>
-                    <input
-                        type="number"
-                        x-model.number="form.display_order"
-                        min="0"
-                        class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
-                    >
+                    {{ number_stepper(model='form.display_order', min=0, max=100, step=1, label='Display Order') }}
                     <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Lower = first</p>
                 </div>
 
diff --git a/app/templates/admin/content-pages.html b/app/templates/admin/content-pages.html
index 500611de..97bdfb18 100644
--- a/app/templates/admin/content-pages.html
+++ b/app/templates/admin/content-pages.html
@@ -1,75 +1,29 @@
 {# app/templates/admin/content-pages.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tabs.html' import tabs_inline, tab_button %}
 
 {% block title %}Content Pages{% endblock %}
 
 {% block alpine_data %}contentPagesManager(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Content Pages
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            Manage platform defaults and vendor-specific content pages
-        </p>
-    </div>
-    <a
-        href="/admin/content-pages/create"
-        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
-    >
-        <span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
-        Create Page
-    </a>
-</div>
+{{ page_header('Content Pages', subtitle='Manage platform defaults and vendor-specific content pages', action_label='Create Page', action_url='/admin/content-pages/create') }}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading pages...</p>
-</div>
+{{ loading_state('Loading pages...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading pages</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading pages') }}
 
 <!-- Tabs and Filters -->
 <div x-show="!loading" class="mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
     <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <!-- Tabs -->
-        <div class="flex space-x-2 border-b border-gray-200 dark:border-gray-700">
-            <button
-                @click="activeTab = 'all'"
-                class="px-4 py-2 text-sm font-medium transition-colors"
-                :class="activeTab === 'all' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'"
-            >
-                All Pages
-                <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700" x-text="allPages.length"></span>
-            </button>
-            <button
-                @click="activeTab = 'platform'"
-                class="px-4 py-2 text-sm font-medium transition-colors"
-                :class="activeTab === 'platform' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'"
-            >
-                Platform Defaults
-                <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700" x-text="platformPages.length"></span>
-            </button>
-            <button
-                @click="activeTab = 'vendor'"
-                class="px-4 py-2 text-sm font-medium transition-colors"
-                :class="activeTab === 'vendor' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'"
-            >
-                Vendor Overrides
-                <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700" x-text="vendorPages.length"></span>
-            </button>
-        </div>
+        {% call tabs_inline() %}
+            {{ tab_button('all', 'All Pages', count_var='allPages.length') }}
+            {{ tab_button('platform', 'Platform Defaults', count_var='platformPages.length') }}
+            {{ tab_button('vendor', 'Vendor Overrides', count_var='vendorPages.length') }}
+        {% endcall %}
 
         <!-- Search -->
         <div class="relative">
diff --git a/app/templates/admin/customers.html b/app/templates/admin/customers.html
index 6f27bcc8..3eff32ab 100644
--- a/app/templates/admin/customers.html
+++ b/app/templates/admin/customers.html
@@ -1,22 +1,13 @@
 {# app/templates/admin/customers.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
 
 {% block title %}Customers{% endblock %}
 
 {% block alpine_data %}adminCustomers(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Customers
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            Manage platform customers
-        </p>
-    </div>
-</div>
+{{ page_header('Customers', subtitle='Manage platform customers') }}
 
 <!-- Empty State -->
 <div class="px-4 py-12 bg-white rounded-lg shadow-md dark:bg-gray-800">
diff --git a/app/templates/admin/dashboard.html b/app/templates/admin/dashboard.html
index f29865f9..d1f0236f 100644
--- a/app/templates/admin/dashboard.html
+++ b/app/templates/admin/dashboard.html
@@ -1,41 +1,19 @@
 {# app/templates/admin/dashboard.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
 
 {% block title %}Dashboard{% endblock %}
 
 {% block alpine_data %}adminDashboard(){% endblock %}
 
 {% block content %}
-<!-- Page Header with Refresh Button -->
-<div class="flex items-center justify-between my-6">
-    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-        Dashboard
-    </h2>
-    <button
-        @click="refresh()"
-        :disabled="loading"
-        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
-    >
-        <span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
-        <span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
-        <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
-    </button>
-</div>
+{{ page_header('Dashboard', action_label='Refresh', action_onclick='refresh()', action_icon='refresh') }}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading dashboard...</p>
-</div>
+{{ loading_state('Loading dashboard...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading dashboard</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading dashboard') }}
 
 <!-- Stats Cards -->
 <div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -101,17 +79,9 @@
 </div>
 
 <!-- Recent Vendors Table -->
-<div x-show="!loading" class="w-full overflow-hidden rounded-lg shadow-xs">
-    <div class="w-full overflow-x-auto">
-        <table class="w-full whitespace-no-wrap">
-            <thead>
-                <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
-                    <th class="px-4 py-3">Vendor</th>
-                    <th class="px-4 py-3">Status</th>
-                    <th class="px-4 py-3">Created</th>
-                    <th class="px-4 py-3">Actions</th>
-                </tr>
-            </thead>
+<div x-show="!loading">
+    {% call table_wrapper() %}
+            {{ table_header(['Vendor', 'Status', 'Created', 'Actions']) }}
             <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                 <template x-if="recentVendors.length === 0">
                     <tr>
@@ -162,8 +132,7 @@
                     </tr>
                 </template>
             </tbody>
-        </table>
-    </div>
+    {% endcall %}
 </div>
 {% endblock %}
 
diff --git a/app/templates/admin/icons.html b/app/templates/admin/icons.html
index 975cae70..ff39d15b 100644
--- a/app/templates/admin/icons.html
+++ b/app/templates/admin/icons.html
@@ -1,5 +1,6 @@
 {# app/templates/admin/icons.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
 
 {% block title %}Icons Browser{% endblock %}
 
@@ -7,17 +8,7 @@
 {% block alpine_data %}adminIcons(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-        Icons Browser
-    </h2>
-    <a href="/admin/dashboard"
-       class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700">
-        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-        Back to Dashboard
-    </a>
-</div>
+{{ page_header('Icons Browser', back_url='/admin/dashboard', back_label='Back to Dashboard') }}
 
 <!-- Introduction Card -->
 <div class="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg shadow-lg p-6 mb-8">
diff --git a/app/templates/admin/imports.html b/app/templates/admin/imports.html
index 691f20d6..3aba4b82 100644
--- a/app/templates/admin/imports.html
+++ b/app/templates/admin/imports.html
@@ -1,6 +1,10 @@
 {# app/templates/admin/imports.html #}
 {% extends "admin/base.html" %}
 {% from 'shared/macros/pagination.html' import pagination %}
+{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
+{% from 'shared/macros/alerts.html' import error_state %}
+{% from 'shared/macros/modals.html' import job_details_modal %}
+{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
 
 {% block title %}Import Jobs - Platform Monitoring{% endblock %}
 
@@ -11,26 +15,9 @@
 {% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Platform Import Jobs
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            System-wide monitoring of all marketplace import jobs
-        </p>
-    </div>
-    <button
-        @click="refreshJobs()"
-        :disabled="loading"
-        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
-    >
-        <span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
-        <span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
-        <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
-    </button>
-</div>
+{% call page_header_flex(title='Platform Import Jobs', subtitle='System-wide monitoring of all marketplace import jobs') %}
+    {{ refresh_button(onclick='refreshJobs()') }}
+{% endcall %}
 
 <!-- Stats Cards -->
 <div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -95,14 +82,7 @@
     </div>
 </div>
 
-<!-- Error Message -->
-<div x-show="error" x-transition class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error', show_condition='error') }}
 
 <!-- Filters -->
 <div class="mb-4 bg-white rounded-lg shadow-xs dark:bg-gray-800 p-4">
@@ -201,22 +181,9 @@
         </div>
 
         <!-- Jobs Table -->
-        <div x-show="!loading && jobs.length > 0" class="w-full overflow-hidden rounded-lg shadow-xs">
-            <div class="w-full overflow-x-auto">
-                <table class="w-full whitespace-no-wrap">
-                    <thead>
-                        <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
-                            <th class="px-4 py-3">Job ID</th>
-                            <th class="px-4 py-3">Vendor</th>
-                            <th class="px-4 py-3">Marketplace</th>
-                            <th class="px-4 py-3">Status</th>
-                            <th class="px-4 py-3">Progress</th>
-                            <th class="px-4 py-3">Started</th>
-                            <th class="px-4 py-3">Duration</th>
-                            <th class="px-4 py-3">Created By</th>
-                            <th class="px-4 py-3">Actions</th>
-                        </tr>
-                    </thead>
+        <div x-show="!loading && jobs.length > 0">
+            {% call table_wrapper() %}
+                    {{ table_header(['Job ID', 'Vendor', 'Marketplace', 'Status', 'Progress', 'Started', 'Duration', 'Created By', 'Actions']) }}
                     <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                         <template x-for="job in jobs" :key="job.id">
                             <tr class="text-gray-700 dark:text-gray-400">
@@ -286,123 +253,11 @@
                             </tr>
                         </template>
                     </tbody>
-                </table>
-            </div>
-        </div>
+        {% endcall %}
 
         {{ pagination(show_condition="!loading && pagination.total > 0") }}
     </div>
 </div>
 
-<!-- Job Details Modal (same as marketplace version) -->
-<div x-show="showJobModal"
-     x-cloak
-     @click.away="closeJobModal()"
-     class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
-     x-transition:enter="transition ease-out duration-150"
-     x-transition:enter-start="opacity-0"
-     x-transition:enter-end="opacity-100"
-     x-transition:leave="transition ease-in duration-150"
-     x-transition:leave-start="opacity-100"
-     x-transition:leave-end="opacity-0">
-    <div @click.away="closeJobModal()"
-         class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-2xl"
-         x-transition:enter="transition ease-out duration-150"
-         x-transition:enter-start="opacity-0 transform translate-y-1/2"
-         x-transition:enter-end="opacity-100"
-         x-transition:leave="transition ease-in duration-150"
-         x-transition:leave-start="opacity-100"
-         x-transition:leave-end="opacity-0 transform translate-y-1/2">
-        <!-- Modal Header -->
-        <div class="flex items-center justify-between mb-4">
-            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
-                Import Job Details
-            </h3>
-            <button @click="closeJobModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
-                <span x-html="$icon('close', 'w-5 h-5')"></span>
-            </button>
-        </div>
-
-        <!-- Modal Content -->
-        <div x-show="selectedJob" class="space-y-4">
-            <div class="grid grid-cols-2 gap-4">
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Job ID</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.id"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Vendor</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="getVendorName(selectedJob?.vendor_id)"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Marketplace</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.marketplace"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Status</p>
-                    <span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs"
-                          :class="{
-                              'text-green-700 bg-green-100': selectedJob?.status === 'completed',
-                              'text-blue-700 bg-blue-100': selectedJob?.status === 'processing',
-                              'text-yellow-700 bg-yellow-100': selectedJob?.status === 'pending',
-                              'text-red-700 bg-red-100': selectedJob?.status === 'failed',
-                              'text-orange-700 bg-orange-100': selectedJob?.status === 'completed_with_errors'
-                          }"
-                          x-text="selectedJob?.status.replace('_', ' ').toUpperCase()">
-                    </span>
-                </div>
-                <div class="col-span-2">
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Source URL</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100 break-all" x-text="selectedJob?.source_url"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Imported</p>
-                    <p class="text-sm text-green-600 dark:text-green-400" x-text="selectedJob?.imported_count"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Updated</p>
-                    <p class="text-sm text-blue-600 dark:text-blue-400" x-text="selectedJob?.updated_count"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Errors</p>
-                    <p class="text-sm text-red-600 dark:text-red-400" x-text="selectedJob?.error_count"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Processed</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.total_processed"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Started At</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.started_at ? formatDate(selectedJob.started_at) : 'Not started'"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Completed At</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.completed_at ? formatDate(selectedJob.completed_at) : 'Not completed'"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Created By</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.created_by_name || 'System'"></p>
-                </div>
-            </div>
-
-            <!-- Error Details -->
-            <div x-show="selectedJob?.error_details?.length > 0" class="mt-4">
-                <p class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Error Details</p>
-                <div class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg max-h-48 overflow-y-auto">
-                    <pre class="text-xs text-red-700 dark:text-red-300 whitespace-pre-wrap" x-text="JSON.stringify(selectedJob?.error_details, null, 2)"></pre>
-                </div>
-            </div>
-        </div>
-
-        <!-- Modal Footer -->
-        <div class="flex justify-end mt-6">
-            <button
-                @click="closeJobModal()"
-                class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-700 hover:border-gray-500 focus:outline-none"
-            >
-                Close
-            </button>
-        </div>
-    </div>
-</div>
+{{ job_details_modal(show_created_by=true) }}
 {% endblock %}
diff --git a/app/templates/admin/logs.html b/app/templates/admin/logs.html
index 43d1208c..96d90e67 100644
--- a/app/templates/admin/logs.html
+++ b/app/templates/admin/logs.html
@@ -1,47 +1,20 @@
 {# app/templates/admin/logs.html #}
 {% extends "admin/base.html" %}
 {% from 'shared/macros/pagination.html' import pagination %}
+{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
+{% from 'shared/macros/headers.html' import page_header_refresh %}
+{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}
 
 {% block title %}Application Logs{% endblock %}
 
 {% block alpine_data %}adminLogs(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-        Application Logs
-    </h2>
-    <div class="flex items-center space-x-3">
-        <button
-            @click="refresh()"
-            :disabled="loading"
-            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-            <span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
-            <span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
-            <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
-        </button>
-    </div>
-</div>
+{{ page_header_refresh('Application Logs') }}
 
-<!-- Success Message -->
-<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
-    <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Success</p>
-        <p class="text-sm" x-text="successMessage"></p>
-    </div>
-</div>
+{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
 
-<!-- Error Message -->
-<div x-show="error" x-transition class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error', show_condition='error') }}
 
 <!-- Statistics Cards -->
 <div x-show="stats" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -91,28 +64,10 @@
 </div>
 
 <!-- Log Source Tabs -->
-<div class="mb-6">
-    <div class="border-b border-gray-200 dark:border-gray-700">
-        <nav class="-mb-px flex space-x-8">
-            <button
-                @click="logSource = 'database'; loadLogs()"
-                :class="logSource === 'database' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
-                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
-            >
-                <span x-html="$icon('database', 'inline w-5 h-5 mr-2')"></span>
-                Database Logs
-            </button>
-            <button
-                @click="logSource = 'file'; loadFileLogs()"
-                :class="logSource === 'file' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
-                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
-            >
-                <span x-html="$icon('document', 'inline w-5 h-5 mr-2')"></span>
-                File Logs
-            </button>
-        </nav>
-    </div>
-</div>
+{% call tabs_nav() %}
+    {{ tab_button('database', 'Database Logs', tab_var='logSource', icon='database', onclick="logSource = 'database'; loadLogs()") }}
+    {{ tab_button('file', 'File Logs', tab_var='logSource', icon='document', onclick="logSource = 'file'; loadFileLogs()") }}
+{% endcall %}
 
 <!-- Database Logs Section -->
 <div x-show="logSource === 'database'" x-transition>
@@ -299,6 +254,7 @@
     </div>
 </div>
 
+{# noqa: FE-004 - Log detail modal with dynamic show variable and custom content layout #}
 <!-- Log Detail Modal -->
 <div x-show="selectedLog" x-transition class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50" @click.self="selectedLog = null">
     <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
diff --git a/app/templates/admin/marketplace.html b/app/templates/admin/marketplace.html
index e41d1043..d36ffc67 100644
--- a/app/templates/admin/marketplace.html
+++ b/app/templates/admin/marketplace.html
@@ -1,49 +1,24 @@
 {# app/templates/admin/marketplace.html #}
 {% extends "admin/base.html" %}
 {% from 'shared/macros/pagination.html' import pagination %}
+{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
+{% from 'shared/macros/modals.html' import job_details_modal %}
+{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
+{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
+{% from 'shared/macros/inputs.html' import number_stepper %}
 
 {% block title %}Marketplace Import{% endblock %}
 
 {% block alpine_data %}adminMarketplace(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Marketplace Import
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            Import products from Letzshop marketplace for any vendor (self-service)
-        </p>
-    </div>
-    <button
-        @click="refreshJobs()"
-        :disabled="loading"
-        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
-    >
-        <span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
-        <span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
-        <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
-    </button>
-</div>
+{% call page_header_flex(title='Marketplace Import', subtitle='Import products from Letzshop marketplace for any vendor (self-service)') %}
+    {{ refresh_button(onclick='refreshJobs()') }}
+{% endcall %}
 
-<!-- Success Message -->
-<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
-    <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold" x-text="successMessage"></p>
-    </div>
-</div>
+{{ alert_dynamic(type='success', message_var='successMessage', show_condition='successMessage') }}
 
-<!-- Error Message -->
-<div x-show="error" x-transition class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error', show_condition='error') }}
 
 <!-- Import Form Card -->
 <div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
@@ -129,14 +104,7 @@
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                         Batch Size
                     </label>
-                    <input
-                        x-model.number="importForm.batch_size"
-                        type="number"
-                        min="100"
-                        max="5000"
-                        step="100"
-                        class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
-                    />
+                    {{ number_stepper(model='importForm.batch_size', min=100, max=5000, step=100, label='Batch Size') }}
                     <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                         Number of products to process per batch (100-5000)
                     </p>
@@ -286,21 +254,9 @@
         </div>
 
         <!-- Jobs Table -->
-        <div x-show="!loading && jobs.length > 0" class="w-full overflow-hidden rounded-lg shadow-xs">
-            <div class="w-full overflow-x-auto">
-                <table class="w-full whitespace-no-wrap">
-                    <thead>
-                        <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
-                            <th class="px-4 py-3">Job ID</th>
-                            <th class="px-4 py-3">Vendor</th>
-                            <th class="px-4 py-3">Marketplace</th>
-                            <th class="px-4 py-3">Status</th>
-                            <th class="px-4 py-3">Progress</th>
-                            <th class="px-4 py-3">Started</th>
-                            <th class="px-4 py-3">Duration</th>
-                            <th class="px-4 py-3">Actions</th>
-                        </tr>
-                    </thead>
+        <div x-show="!loading && jobs.length > 0">
+            {% call table_wrapper() %}
+                    {{ table_header(['Job ID', 'Vendor', 'Marketplace', 'Status', 'Progress', 'Started', 'Duration', 'Actions']) }}
                     <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                         <template x-for="job in jobs" :key="job.id">
                             <tr class="text-gray-700 dark:text-gray-400">
@@ -367,121 +323,13 @@
                             </tr>
                         </template>
                     </tbody>
-                </table>
-            </div>
-        </div>
+        {% endcall %}
 
         {{ pagination(show_condition="!loading && pagination.total > 0") }}
     </div>
 </div>
 
-<!-- Job Details Modal (same as vendor version) -->
-<div x-show="showJobModal"
-     x-cloak
-     @click.away="closeJobModal()"
-     class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
-     x-transition:enter="transition ease-out duration-150"
-     x-transition:enter-start="opacity-0"
-     x-transition:enter-end="opacity-100"
-     x-transition:leave="transition ease-in duration-150"
-     x-transition:leave-start="opacity-100"
-     x-transition:leave-end="opacity-0">
-    <div @click.away="closeJobModal()"
-         class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-2xl"
-         x-transition:enter="transition ease-out duration-150"
-         x-transition:enter-start="opacity-0 transform translate-y-1/2"
-         x-transition:enter-end="opacity-100"
-         x-transition:leave="transition ease-in duration-150"
-         x-transition:leave-start="opacity-100"
-         x-transition:leave-end="opacity-0 transform translate-y-1/2">
-        <!-- Modal Header -->
-        <div class="flex items-center justify-between mb-4">
-            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
-                Import Job Details
-            </h3>
-            <button @click="closeJobModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
-                <span x-html="$icon('close', 'w-5 h-5')"></span>
-            </button>
-        </div>
-
-        <!-- Modal Content -->
-        <div x-show="selectedJob" class="space-y-4">
-            <div class="grid grid-cols-2 gap-4">
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Job ID</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.id"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Vendor</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="getVendorName(selectedJob?.vendor_id)"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Marketplace</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.marketplace"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Status</p>
-                    <span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs"
-                          :class="{
-                              'text-green-700 bg-green-100': selectedJob?.status === 'completed',
-                              'text-blue-700 bg-blue-100': selectedJob?.status === 'processing',
-                              'text-yellow-700 bg-yellow-100': selectedJob?.status === 'pending',
-                              'text-red-700 bg-red-100': selectedJob?.status === 'failed',
-                              'text-orange-700 bg-orange-100': selectedJob?.status === 'completed_with_errors'
-                          }"
-                          x-text="selectedJob?.status.replace('_', ' ').toUpperCase()">
-                    </span>
-                </div>
-                <div class="col-span-2">
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Source URL</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100 truncate" x-text="selectedJob?.source_url" :title="selectedJob?.source_url"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Imported</p>
-                    <p class="text-sm text-green-600 dark:text-green-400" x-text="selectedJob?.imported_count"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Updated</p>
-                    <p class="text-sm text-blue-600 dark:text-blue-400" x-text="selectedJob?.updated_count"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Errors</p>
-                    <p class="text-sm text-red-600 dark:text-red-400" x-text="selectedJob?.error_count"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Processed</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.total_processed"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Started At</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.started_at ? formatDate(selectedJob.started_at) : 'Not started'"></p>
-                </div>
-                <div>
-                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Completed At</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.completed_at ? formatDate(selectedJob.completed_at) : 'Not completed'"></p>
-                </div>
-            </div>
-
-            <!-- Error Details -->
-            <div x-show="selectedJob?.error_details?.length > 0" class="mt-4">
-                <p class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Error Details</p>
-                <div class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg max-h-48 overflow-y-auto">
-                    <pre class="text-xs text-red-700 dark:text-red-300 whitespace-pre-wrap" x-text="JSON.stringify(selectedJob?.error_details, null, 2)"></pre>
-                </div>
-            </div>
-        </div>
-
-        <!-- Modal Footer -->
-        <div class="flex justify-end mt-6">
-            <button
-                @click="closeJobModal()"
-                class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-700 hover:border-gray-500 focus:outline-none"
-            >
-                Close
-            </button>
-        </div>
-    </div>
-</div>
+{{ job_details_modal() }}
 {% endblock %}
 
 {% block extra_scripts %}
diff --git a/app/templates/admin/platform-homepage.html b/app/templates/admin/platform-homepage.html
index 84ed0c1a..e4a2bdef 100644
--- a/app/templates/admin/platform-homepage.html
+++ b/app/templates/admin/platform-homepage.html
@@ -1,64 +1,36 @@
 {# app/templates/admin/platform-homepage.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state, alert_dynamic %}
+{% from 'shared/macros/headers.html' import page_header_flex, action_button %}
 
 {% block title %}Platform Homepage Manager{% endblock %}
 
 {% block alpine_data %}platformHomepageManager(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
+{# Note: Subtitle has inline HTML link, so using page_header_flex with custom structure #}
 <div class="flex items-center justify-between my-6">
     <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Platform Homepage
-        </h2>
+        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">Platform Homepage</h2>
         <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
             Manage your platform's main landing page at <a href="/" target="_blank" class="text-purple-600 hover:underline">localhost:8000</a>
         </p>
     </div>
-    <div class="flex gap-2">
-        <a
-            href="/"
-            target="_blank"
-            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:border-gray-400 dark:hover:border-gray-500 focus:outline-none focus:shadow-outline-purple"
-        >
+    <div class="flex items-center space-x-3">
+        <a href="/" target="_blank"
+           class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
             <span x-html="$icon('eye', 'w-4 h-4 mr-2')"></span>
             Preview
         </a>
-        <button
-            @click="savePage()"
-            :disabled="saving"
-            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-            <span x-show="!saving" x-html="$icon('check', 'w-4 h-4 mr-2')"></span>
-            <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
-            <span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
-        </button>
+        {{ action_button('Save Changes', 'Saving...', 'saving', 'savePage()') }}
     </div>
 </div>
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading homepage...</p>
-</div>
+{{ loading_state('Loading homepage...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading homepage</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading homepage') }}
 
-<!-- Success Message -->
-<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
-    <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold" x-text="successMessage"></p>
-    </div>
-</div>
+{{ alert_dynamic(type='success', message_var='successMessage', show_condition='successMessage') }}
 
 <!-- Main Form -->
 <div x-show="!loading && page" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
diff --git a/app/templates/admin/settings.html b/app/templates/admin/settings.html
index c5f37256..d6e1890e 100644
--- a/app/templates/admin/settings.html
+++ b/app/templates/admin/settings.html
@@ -1,76 +1,27 @@
 {# app/templates/admin/settings.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
+{% from 'shared/macros/headers.html' import page_header_refresh %}
+{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}
+{% from 'shared/macros/inputs.html' import number_stepper %}
 
 {% block title %}Platform Settings{% endblock %}
 
 {% block alpine_data %}adminSettings(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-        Platform Settings
-    </h2>
-    <button
-        @click="refresh()"
-        :disabled="loading"
-        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
-    >
-        <span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
-        <span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
-        <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
-    </button>
-</div>
+{{ page_header_refresh('Platform Settings') }}
 
-<!-- Success Message -->
-<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
-    <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Success</p>
-        <p class="text-sm" x-text="successMessage"></p>
-    </div>
-</div>
+{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
 
-<!-- Error Message -->
-<div x-show="error" x-transition class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error', show_condition='error') }}
 
 <!-- Settings Categories Tabs -->
-<div class="mb-6">
-    <div class="border-b border-gray-200 dark:border-gray-700">
-        <nav class="-mb-px flex space-x-8">
-            <button
-                @click="activeTab = 'logging'"
-                :class="activeTab === 'logging' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
-                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
-            >
-                <span x-html="$icon('document-text', 'inline w-5 h-5 mr-2')"></span>
-                Logging
-            </button>
-            <button
-                @click="activeTab = 'system'"
-                :class="activeTab === 'system' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
-                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
-            >
-                <span x-html="$icon('cog', 'inline w-5 h-5 mr-2')"></span>
-                System
-            </button>
-            <button
-                @click="activeTab = 'security'"
-                :class="activeTab === 'security' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
-                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
-            >
-                <span x-html="$icon('shield-check', 'inline w-5 h-5 mr-2')"></span>
-                Security
-            </button>
-        </nav>
-    </div>
-</div>
+{% call tabs_nav() %}
+    {{ tab_button('logging', 'Logging', icon='document-text') }}
+    {{ tab_button('system', 'System', icon='cog') }}
+    {{ tab_button('security', 'Security', icon='shield-check') }}
+{% endcall %}
 
 <!-- Logging Settings Tab -->
 <div x-show="activeTab === 'logging'" x-transition>
@@ -108,13 +59,7 @@
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                     Max File Size (MB)
                 </label>
-                <input
-                    type="number"
-                    x-model.number="logSettings.log_file_max_size_mb"
-                    min="1"
-                    max="1000"
-                    class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
-                />
+                {{ number_stepper(model='logSettings.log_file_max_size_mb', min=1, max=1000, step=10, label='Max File Size') }}
                 <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                     Log file will rotate when it reaches this size.
                 </p>
@@ -124,13 +69,7 @@
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                     Backup File Count
                 </label>
-                <input
-                    type="number"
-                    x-model.number="logSettings.log_file_backup_count"
-                    min="0"
-                    max="50"
-                    class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
-                />
+                {{ number_stepper(model='logSettings.log_file_backup_count', min=0, max=50, step=1, label='Backup File Count') }}
                 <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                     Number of rotated backup files to keep.
                 </p>
@@ -142,13 +81,7 @@
             <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                 Database Log Retention (Days)
             </label>
-            <input
-                type="number"
-                x-model.number="logSettings.db_log_retention_days"
-                min="1"
-                max="365"
-                class="block w-full md:w-1/2 px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
-            />
+            {{ number_stepper(model='logSettings.db_log_retention_days', min=1, max=365, step=7, label='Retention Days') }}
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                 Logs older than this will be automatically deleted from database.
             </p>
diff --git a/app/templates/admin/test-auth-flow.html b/app/templates/admin/test-auth-flow.html
index d3ef2c6f..4d049f26 100644
--- a/app/templates/admin/test-auth-flow.html
+++ b/app/templates/admin/test-auth-flow.html
@@ -1,21 +1,12 @@
 {# app/templates/admin/test-auth-flow.html #}
 {% extends 'admin/base.html' %}
+{% from 'shared/macros/headers.html' import page_header %}
 
 {% block title %}Auth Flow Testing{% endblock %}
 
 {% block content %}
 <div x-data="authFlowTest()" x-init="init()">
-    {# Page Header #}
-    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
-        <div>
-            <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-                Auth Flow Testing
-            </h2>
-            <p class="text-gray-600 dark:text-gray-400 mt-1">
-                Comprehensive testing for Jinja2 migration auth loop fix
-            </p>
-        </div>
-    </div>
+    {{ page_header('Auth Flow Testing', subtitle='Comprehensive testing for Jinja2 migration auth loop fix') }}
 
     {# Log Level Control #}
     <div class="px-4 py-3 mb-6 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg shadow-md border-l-4 border-yellow-500">
diff --git a/app/templates/admin/test-vendors-users-migration.html b/app/templates/admin/test-vendors-users-migration.html
index d69d43e4..905feb39 100644
--- a/app/templates/admin/test-vendors-users-migration.html
+++ b/app/templates/admin/test-vendors-users-migration.html
@@ -1,21 +1,12 @@
 {# app/templates/admin/test-vendors-users-migration.html #}
 {% extends 'admin/base.html' %}
+{% from 'shared/macros/headers.html' import page_header %}
 
 {% block title %}Vendors & Users Migration Testing{% endblock %}
 
 {% block content %}
 <div x-data="migrationTest()" x-init="init()">
-    {# Page Header #}
-    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
-        <div>
-            <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-                Vendors & Users Migration Testing
-            </h2>
-            <p class="text-gray-600 dark:text-gray-400 mt-1">
-                Comprehensive test suite for verifying the Jinja2 migration
-            </p>
-        </div>
-    </div>
+    {{ page_header('Vendors & Users Migration Testing', subtitle='Comprehensive test suite for verifying the Jinja2 migration') }}
 
     {# Status Cards #}
     <div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
diff --git a/app/templates/admin/testing-hub.html b/app/templates/admin/testing-hub.html
index 5526863b..cb6cd3d2 100644
--- a/app/templates/admin/testing-hub.html
+++ b/app/templates/admin/testing-hub.html
@@ -1,5 +1,6 @@
 {# app/templates/admin/testing-hub.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
 
 {% block title %}Testing Hub{% endblock %}
 
@@ -7,17 +8,7 @@
 {% block alpine_data %}adminTestingHub(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-        Testing Hub
-    </h2>
-    <a href="/admin/dashboard"
-       class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700">
-        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-        Back to Dashboard
-    </a>
-</div>
+{{ page_header('Testing Hub', back_url='/admin/dashboard', back_label='Back to Dashboard') }}
 
 <!-- Introduction Card -->
 <div class="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg shadow-lg p-6 mb-8">
diff --git a/app/templates/admin/user-create.html b/app/templates/admin/user-create.html
index ddcfa36f..409e41e2 100644
--- a/app/templates/admin/user-create.html
+++ b/app/templates/admin/user-create.html
@@ -1,27 +1,13 @@
 {# app/templates/admin/user-create.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
 
 {% block title %}Create User{% endblock %}
 
 {% block alpine_data %}adminUserCreate(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Create New User
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            Add a new user to the platform
-        </p>
-    </div>
-    <a href="/admin/users"
-       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
-        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-        Back to Users
-    </a>
-</div>
+{{ page_header('Create New User', subtitle='Add a new user to the platform', back_url='/admin/users', back_label='Back to Users') }}
 
 <!-- Create Form -->
 <form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
diff --git a/app/templates/admin/user-detail.html b/app/templates/admin/user-detail.html
index 12586132..cd08f985 100644
--- a/app/templates/admin/user-detail.html
+++ b/app/templates/admin/user-detail.html
@@ -1,44 +1,22 @@
 {# app/templates/admin/user-detail.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/headers.html' import detail_page_header %}
 
 {% block title %}User Details{% endblock %}
 
 {% block alpine_data %}adminUserDetail(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="user?.full_name || user?.username || 'User Details'">
-            User Details
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="user">
-            @<span x-text="user?.username"></span>
-            <span class="text-gray-400 mx-2">|</span>
-            <span x-text="user?.email"></span>
-        </p>
-    </div>
-    <a href="/admin/users"
-       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
-        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-        Back
-    </a>
-</div>
+{% call detail_page_header("user?.full_name || user?.username || 'User Details'", '/admin/users', subtitle_show='user') %}
+    @<span x-text="user?.username"></span>
+    <span class="text-gray-400 mx-2">|</span>
+    <span x-text="user?.email"></span>
+{% endcall %}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading user details...</p>
-</div>
+{{ loading_state('Loading user details...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading user</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading user') }}
 
 <!-- User Details -->
 <div x-show="!loading && user">
diff --git a/app/templates/admin/user-edit.html b/app/templates/admin/user-edit.html
index 03c79ad8..01878d9e 100644
--- a/app/templates/admin/user-edit.html
+++ b/app/templates/admin/user-edit.html
@@ -1,33 +1,18 @@
 {# app/templates/admin/user-edit.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state %}
+{% from 'shared/macros/headers.html' import edit_page_header %}
 
 {% block title %}Edit User{% endblock %}
 
 {% block alpine_data %}adminUserEdit(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Edit User
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="user">
-            @<span x-text="user?.username"></span>
-        </p>
-    </div>
-    <a href="/admin/users"
-       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
-        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-        Back to Users
-    </a>
-</div>
+{% call edit_page_header('Edit User', '/admin/users', subtitle_show='user', back_label='Back to Users') %}
+    @<span x-text="user?.username"></span>
+{% endcall %}
 
-<!-- Loading State -->
-<div x-show="loadingUser" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading user...</p>
-</div>
+{{ loading_state('Loading user...', show_condition='loadingUser') }}
 
 <!-- Edit Form -->
 <div x-show="!loadingUser && user">
diff --git a/app/templates/admin/users.html b/app/templates/admin/users.html
index 0725de27..948fc6e3 100644
--- a/app/templates/admin/users.html
+++ b/app/templates/admin/users.html
@@ -1,40 +1,20 @@
 {# app/templates/admin/users.html #}
 {% extends "admin/base.html" %}
 {% from 'shared/macros/pagination.html' import pagination %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
 
 {% block title %}Users{% endblock %}
 
 {% block alpine_data %}adminUsers(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-        User Management
-    </h2>
-    <a
-        href="/admin/users/create"
-        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
-    >
-        <span x-html="$icon('user-plus', 'w-4 h-4 mr-2')"></span>
-        Create User
-    </a>
-</div>
+{{ page_header('User Management', action_label='Create User', action_url='/admin/users/create', action_icon='user-plus') }}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading users...</p>
-</div>
+{{ loading_state('Loading users...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading users</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading users') }}
 
 <!-- Stats Cards -->
 <div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -156,20 +136,9 @@
 </div>
 
 <!-- Users Table -->
-<div x-show="!loading" class="w-full overflow-hidden rounded-lg shadow-xs">
-    <div class="w-full overflow-x-auto">
-        <table class="w-full whitespace-no-wrap">
-            <thead>
-                <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
-                    <th class="px-4 py-3">User</th>
-                    <th class="px-4 py-3">Email</th>
-                    <th class="px-4 py-3">Role</th>
-                    <th class="px-4 py-3">Status</th>
-                    <th class="px-4 py-3">Registered</th>
-                    <th class="px-4 py-3">Last Login</th>
-                    <th class="px-4 py-3">Actions</th>
-                </tr>
-            </thead>
+<div x-show="!loading">
+    {% call table_wrapper() %}
+            {{ table_header(['User', 'Email', 'Role', 'Status', 'Registered', 'Last Login', 'Actions']) }}
             <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                 <!-- Empty State -->
                 <template x-if="users.length === 0">
@@ -264,8 +233,7 @@
                     </tr>
                 </template>
             </tbody>
-        </table>
-    </div>
+    {% endcall %}
 
     {{ pagination() }}
 </div>
diff --git a/app/templates/admin/vendor-create.html b/app/templates/admin/vendor-create.html
index f21eabbc..726a081b 100644
--- a/app/templates/admin/vendor-create.html
+++ b/app/templates/admin/vendor-create.html
@@ -1,32 +1,16 @@
 {# app/templates/admin/vendor-create.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import error_state %}
 
 {% block title %}Create Vendor{% endblock %}
 
 {% block alpine_data %}adminVendorCreate(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Create New Vendor
-        </h2>
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-            Create a vendor (storefront/brand) under an existing company
-        </p>
-    </div>
-    <a
-        href="/admin/vendors"
-        class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-500 focus:outline-none focus:shadow-outline-gray"
-    >
-        <span class="flex items-center">
-            <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-            Back to Vendors
-        </span>
-    </a>
-</div>
+{{ page_header('Create New Vendor', subtitle='Create a vendor (storefront/brand) under an existing company', back_url='/admin/vendors', back_label='Back to Vendors') }}
 
+{# noqa: FE-003 - Custom success message with nested template #}
 <!-- Success Message -->
 <div x-show="successMessage" x-cloak class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
     <div class="flex items-start">
@@ -48,16 +32,7 @@
     </div>
 </div>
 
-<!-- Error Message -->
-<div x-show="errorMessage" x-cloak class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
-    <div class="flex items-start">
-        <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-        <div>
-            <p class="font-semibold">Error Creating Vendor</p>
-            <p class="text-sm mt-1" x-text="errorMessage"></p>
-        </div>
-    </div>
-</div>
+{{ error_state('Error Creating Vendor', error_var='errorMessage', show_condition='errorMessage') }}
 
 <!-- Loading Companies -->
 <div x-show="loadingCompanies" class="mb-6 p-4 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg">
diff --git a/app/templates/admin/vendor-detail.html b/app/templates/admin/vendor-detail.html
index 0e8e68d7..81be0d47 100644
--- a/app/templates/admin/vendor-detail.html
+++ b/app/templates/admin/vendor-detail.html
@@ -1,44 +1,22 @@
 {# app/templates/admin/vendor-detail.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/headers.html' import detail_page_header %}
 
 {% block title %}Vendor Details{% endblock %}
 
 {% block alpine_data %}adminVendorDetail(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="vendor?.name || 'Vendor Details'">
-            Vendor Details
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="vendor">
-            <span x-text="vendorCode"></span>
-            <span class="text-gray-400 mx-2">•</span>
-            <span x-text="vendor?.subdomain"></span>
-        </p>
-    </div>
-    <a href="/admin/vendors"
-       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
-        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-        Back
-    </a>
-</div>
+{% call detail_page_header("vendor?.name || 'Vendor Details'", '/admin/vendors', subtitle_show='vendor') %}
+    <span x-text="vendorCode"></span>
+    <span class="text-gray-400 mx-2">•</span>
+    <span x-text="vendor?.subdomain"></span>
+{% endcall %}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading vendor details...</p>
-</div>
+{{ loading_state('Loading vendor details...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading vendor</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading vendor') }}
 
 <!-- Vendor Details -->
 <div x-show="!loading && vendor">
diff --git a/app/templates/admin/vendor-edit.html b/app/templates/admin/vendor-edit.html
index 0fb6abff..94aae3dd 100644
--- a/app/templates/admin/vendor-edit.html
+++ b/app/templates/admin/vendor-edit.html
@@ -1,35 +1,20 @@
 {# app/templates/admin/vendor-edit.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state %}
+{% from 'shared/macros/headers.html' import edit_page_header %}
 
 {% block title %}Edit Vendor{% endblock %}
 
 {% block alpine_data %}adminVendorEdit(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Edit Vendor
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="vendor">
-            <span x-text="vendor?.name"></span>
-            <span class="text-gray-400">•</span>
-            <span x-text="vendor?.vendor_code"></span>
-        </p>
-    </div>
-    <a href="/admin/vendors"
-       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
-        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-        Back to Vendors
-    </a>
-</div>
+{% call edit_page_header('Edit Vendor', '/admin/vendors', subtitle_show='vendor', back_label='Back to Vendors') %}
+    <span x-text="vendor?.name"></span>
+    <span class="text-gray-400">•</span>
+    <span x-text="vendor?.vendor_code"></span>
+{% endcall %}
 
-<!-- Loading State -->
-<div x-show="loadingVendor" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading vendor...</p>
-</div>
+{{ loading_state('Loading vendor...', show_condition='loadingVendor') }}
 
 <!-- Edit Form -->
 <div x-show="!loadingVendor && vendor">
diff --git a/app/templates/admin/vendor-theme.html b/app/templates/admin/vendor-theme.html
index 7b16c105..a90a2e51 100644
--- a/app/templates/admin/vendor-theme.html
+++ b/app/templates/admin/vendor-theme.html
@@ -1,5 +1,7 @@
 {# app/templates/admin/vendor-theme.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/headers.html' import page_header_flex %}
 
 {% block title %}Theme Editor - {{ vendor_code }}{% endblock %}
 
@@ -7,35 +9,17 @@
 {% block alpine_data %}adminVendorTheme(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Theme Editor
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            Customize appearance for <span x-text="vendor?.name || '...'"></span>
-        </p>
-    </div>
-    <div class="flex space-x-2">
-        <a :href="`/admin/vendors/${vendorCode}`"
-           class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg hover:border-gray-400 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
-            <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
-            Back to Vendor
-        </a>
-    </div>
-</div>
+{% call page_header_flex(title='Theme Editor', subtitle_var="'Customize appearance for ' + (vendor?.name || '...')") %}
+    <a :href="`/admin/vendors/${vendorCode}`"
+       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
+        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
+        Back to Vendor
+    </a>
+{% endcall %}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600 animate-spin')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading theme...</p>
-</div>
+{{ loading_state('Loading theme...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
-    <p x-text="error"></p>
-</div>
+{{ error_state('Error', show_condition='error && !loading') }}
 
 <!-- Main Content -->
 <div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-3">
diff --git a/app/templates/admin/vendor-themes.html b/app/templates/admin/vendor-themes.html
index 4f8736e3..6fdd4a84 100644
--- a/app/templates/admin/vendor-themes.html
+++ b/app/templates/admin/vendor-themes.html
@@ -1,22 +1,14 @@
 {# app/templates/admin/vendor-themes.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
 
 {% block title %}Vendor Themes{% endblock %}
 
 {% block alpine_data %}adminVendorThemes(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <div>
-        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            Vendor Themes
-        </h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            Customize vendor theme colors and branding
-        </p>
-    </div>
-</div>
+{{ page_header('Vendor Themes', subtitle='Customize vendor theme colors and branding') }}
 
 <!-- Vendor Selection -->
 <div class="px-4 py-6 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
@@ -44,20 +36,9 @@
     </div>
 </div>
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading vendors...</p>
-</div>
+{{ loading_state('Loading vendors...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading vendors</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading vendors') }}
 
 <!-- Vendors List -->
 <div x-show="!loading && vendors.length > 0">
diff --git a/app/templates/admin/vendors.html b/app/templates/admin/vendors.html
index 8aa564d3..46f5a32b 100644
--- a/app/templates/admin/vendors.html
+++ b/app/templates/admin/vendors.html
@@ -1,40 +1,20 @@
 {# app/templates/admin/vendors.html #}
 {% extends "admin/base.html" %}
 {% from 'shared/macros/pagination.html' import pagination %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
 
 {% block title %}Vendors{% endblock %}
 
 {% block alpine_data %}adminVendors(){% endblock %}
 
 {% block content %}
-<!-- Page Header -->
-<div class="flex items-center justify-between my-6">
-    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-        Vendor Management
-    </h2>
-    <a
-        href="/admin/vendors/create"
-        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
-    >
-        <span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
-        Create Vendor
-    </a>
-</div>
+{{ page_header('Vendor Management', action_label='Create Vendor', action_url='/admin/vendors/create') }}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading vendors...</p>
-</div>
+{{ loading_state('Loading vendors...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading vendors</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading vendors') }}
 
 <!-- Stats Cards -->
 <div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -156,18 +136,9 @@
 </div>
 
 <!-- Vendors Table with Pagination -->
-<div x-show="!loading" class="w-full overflow-hidden rounded-lg shadow-xs">
-    <div class="w-full overflow-x-auto">
-        <table class="w-full whitespace-no-wrap">
-            <thead>
-                <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
-                    <th class="px-4 py-3">Vendor</th>
-                    <th class="px-4 py-3">Subdomain</th>
-                    <th class="px-4 py-3">Status</th>
-                    <th class="px-4 py-3">Created</th>
-                    <th class="px-4 py-3">Actions</th>
-                </tr>
-            </thead>
+<div x-show="!loading">
+    {% call table_wrapper() %}
+            {{ table_header(['Vendor', 'Subdomain', 'Status', 'Created', 'Actions']) }}
             <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                 <!-- Empty State -->
                 <template x-if="paginatedVendors.length === 0">
@@ -250,8 +221,7 @@
                     </tr>
                 </template>
             </tbody>
-        </table>
-    </div>
+    {% endcall %}
 
     {{ pagination() }}
 </div>
diff --git a/app/templates/vendor/marketplace.html b/app/templates/vendor/marketplace.html
index 405d1576..b68d6022 100644
--- a/app/templates/vendor/marketplace.html
+++ b/app/templates/vendor/marketplace.html
@@ -1,5 +1,6 @@
 {# app/templates/vendor/marketplace.html #}
 {% extends "vendor/base.html" %}
+{% from 'shared/macros/inputs.html' import number_stepper %}
 
 {% block title %}Marketplace Import{% endblock %}
 
@@ -110,14 +111,7 @@
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                         Batch Size
                     </label>
-                    <input
-                        x-model.number="importForm.batch_size"
-                        type="number"
-                        min="100"
-                        max="5000"
-                        step="100"
-                        class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
-                    />
+                    {{ number_stepper(model='importForm.batch_size', min=100, max=5000, step=100, label='Batch Size') }}
                     <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                         Number of products to process per batch (100-5000)
                     </p>