Apply header component to all pages

templates/contacts/form.html

@@ -3,15 +3,22 @@
 {% block content %}
 <div class="container mx-auto px-4 py-8">
     <div class="max-w-2xl mx-auto">
-        <div class="flex justify-between items-center mb-6">
-            {% if title %}
-                <h1 class="text-2xl font-bold text-gray-800 mb-6">{{ title }}</h1>
-            {% else %}
-                <h1 class="text-2xl font-bold text-gray-800 mb-6">User Form</h1>
-            {% endif %}
+        <div class="d-flex justify-content-between align-items-center mb-6">
+            <div>
+                <h3 class="mb-0">
+                    <i class="fas fa-user me-2" style="color:#16767b;"></i>
+                    {% if title %}
+                        {{ title }}
+                    {% else %}
+                        User Form
+                    {% endif %}
+                </h3>
+                <p class="text-muted mb-0 mt-2 small">Add or edit contact information</p>
+            </div>
             <a href="{{ url_for('contacts.contacts_list') }}" 
-               class="text-gray-600 hover:text-gray-900">
-                ← Back to Contacts
+               class="btn btn-sm btn-outline-secondary">
+                <i class="fas fa-arrow-left me-1"></i>
+                Back to Contacts
             </a>
         </div>