diff --git a/app/templates/admin/messages.html b/app/templates/admin/messages.html
index e4b36c4b..1b241082 100644
--- a/app/templates/admin/messages.html
+++ b/app/templates/admin/messages.html
@@ -1,16 +1,21 @@
 {# app/templates/admin/messages.html #}
 {% extends "admin/base.html" %}
-{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/headers.html' import page_header_flex %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/modals.html' import form_modal %}
 
 {% block title %}Messages{% endblock %}
 
 {% block alpine_data %}adminMessages({{ conversation_id or 'null' }}){% endblock %}
 
 {% block content %}
-{{ page_header('Messages', buttons=[
-    {'text': 'New Conversation', 'icon': 'plus', 'click': 'showComposeModal = true', 'primary': True}
-]) }}
+{% call page_header_flex(title='Messages') %}
+<button @click="showComposeModal = true"
+        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>
+    New Conversation
+</button>
+{% endcall %}
 
 {{ loading_state('Loading conversations...') }}
 
@@ -271,86 +276,59 @@
 </div>
 
 <!-- Compose Modal -->
-<div x-show="showComposeModal"
-     x-cloak
-     class="fixed inset-0 z-50 flex items-center justify-center"
-     @keydown.escape.window="showComposeModal = false">
-    <div class="absolute inset-0 bg-black bg-opacity-50" @click="showComposeModal = false"></div>
-    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-lg mx-4">
-        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">New Conversation</h3>
-            <button @click="showComposeModal = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
-                <span x-html="$icon('x-mark', 'w-5 h-5')"></span>
-            </button>
+{% call form_modal('composeModal', 'New Conversation', show_var='showComposeModal', submit_action='createConversation()', submit_text='Start Conversation', loading_var='creatingConversation', loading_text='Creating...') %}
+    <!-- Recipient Type -->
+    <div class="space-y-4">
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Send to</label>
+            <select
+                x-model="compose.recipientType"
+                @change="compose.recipientId = null; loadRecipients()"
+                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
+            >
+                <option value="">Select type...</option>
+                <option value="vendor">Vendor</option>
+                <option value="customer">Customer</option>
+            </select>
         </div>
 
-        <form @submit.prevent="createConversation()" class="p-6 space-y-4">
-            <!-- Recipient Type -->
-            <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Send to</label>
-                <select
-                    x-model="compose.recipientType"
-                    @change="compose.recipientId = null; loadRecipients()"
-                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
-                >
-                    <option value="">Select type...</option>
-                    <option value="vendor">Vendor</option>
-                    <option value="customer">Customer</option>
-                </select>
-            </div>
+        <!-- Recipient -->
+        <div x-show="compose.recipientType">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Recipient</label>
+            <select
+                x-model="compose.recipientId"
+                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
+            >
+                <option value="">Select recipient...</option>
+                <template x-for="r in recipients" :key="r.id">
+                    <option :value="r.id" x-text="r.name + (r.vendor_name ? ' (' + r.vendor_name + ')' : '') + ' - ' + (r.email || '')"></option>
+                </template>
+            </select>
+        </div>
 
-            <!-- Recipient -->
-            <div x-show="compose.recipientType">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Recipient</label>
-                <select
-                    x-model="compose.recipientId"
-                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
-                >
-                    <option value="">Select recipient...</option>
-                    <template x-for="r in recipients" :key="r.id">
-                        <option :value="r.id" x-text="r.name + (r.vendor_name ? ' (' + r.vendor_name + ')' : '') + ' - ' + (r.email || '')"></option>
-                    </template>
-                </select>
-            </div>
+        <!-- Subject -->
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label>
+            <input
+                type="text"
+                x-model="compose.subject"
+                placeholder="What is this about?"
+                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
+            >
+        </div>
 
-            <!-- Subject -->
-            <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label>
-                <input
-                    type="text"
-                    x-model="compose.subject"
-                    placeholder="What is this about?"
-                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
-                >
-            </div>
-
-            <!-- Message -->
-            <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
-                <textarea
-                    x-model="compose.message"
-                    rows="4"
-                    placeholder="Type your message..."
-                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300 resize-none"
-                ></textarea>
-            </div>
-
-            <!-- Actions -->
-            <div class="flex justify-end gap-3 pt-4">
-                <button type="button" @click="showComposeModal = false"
-                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
-                    Cancel
-                </button>
-                <button type="submit"
-                        :disabled="!compose.recipientId || !compose.subject.trim() || creatingConversation"
-                        class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50">
-                    <span x-show="!creatingConversation">Start Conversation</span>
-                    <span x-show="creatingConversation">Creating...</span>
-                </button>
-            </div>
-        </form>
+        <!-- Message -->
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
+            <textarea
+                x-model="compose.message"
+                rows="4"
+                placeholder="Type your message..."
+                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300 resize-none"
+            ></textarea>
+        </div>
     </div>
-</div>
+{% endcall %}
 {% endblock %}
 
 {% block page_scripts %}