From ea6a722364de4629e8c1db9a9cddf33e8ee96c0d Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Mon, 11 Aug 2025 16:26:51 +0200
Subject: [PATCH] Fix email template compatibility and enhance user dashboard

- Convert all email templates to table-based layouts for compatibility with Outlook, Gmail, Apple Mail, etc.
- Use only inline CSS and email-safe properties
- Fix welcome.hbs, verification.hbs, password-reset.hbs, dues-reminder.hbs, test.hbs templates
- Enhanced user dashboard with complete member information (Member ID, registration date, dues status, etc.)
- Added proper loading states and error handling for member data
- Improved member profile page with comprehensive information display
- Fixed missing wiring information in user and profile screens as requested
---
 pages/dashboard/user.vue            |  90 ++++-
 server/templates/dues-reminder.hbs  | 423 ++++++++++++----------
 server/templates/password-reset.hbs | 286 +++++++--------
 server/templates/test.hbs           | 543 +++++++++++++++++-----------
 server/templates/verification.hbs   | 281 +++++++-------
 server/templates/welcome.hbs        | 505 +++++++++++++++-----------
 6 files changed, 1189 insertions(+), 939 deletions(-)

diff --git a/pages/dashboard/user.vue b/pages/dashboard/user.vue
index bca9d00..c9e4827 100644
--- a/pages/dashboard/user.vue
+++ b/pages/dashboard/user.vue
@@ -102,17 +102,69 @@
             Member Information
           </v-card-title>
           <v-card-text class="pa-4">
-            <v-list>
+            <v-skeleton-loader v-if="pending" type="list-item-three-line"></v-skeleton-loader>
+            <div v-else-if="error" class="text-error text-center pa-4">
+              <v-icon size="48" class="mb-2">mdi-alert-circle</v-icon>
+              <div>Failed to load member information</div>
+            </div>
+            <v-list v-else>
+              <v-list-item>
+                <v-list-item-content>
+                  <v-list-item-title>Member ID</v-list-item-title>
+                  <v-list-item-subtitle>
+                    <v-chip color="primary" size="small" variant="outlined">
+                      {{ memberInfo?.memberId || 'Not assigned' }}
+                    </v-chip>
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
               <v-list-item>
                 <v-list-item-content>
                   <v-list-item-title>Name</v-list-item-title>
-                  <v-list-item-subtitle>{{ user?.name || 'Not provided' }}</v-list-item-subtitle>
+                  <v-list-item-subtitle>{{ memberInfo?.fullName || 'Not provided' }}</v-list-item-subtitle>
                 </v-list-item-content>
               </v-list-item>
               <v-list-item>
                 <v-list-item-content>
                   <v-list-item-title>Email</v-list-item-title>
-                  <v-list-item-subtitle>{{ user?.email || 'Not provided' }}</v-list-item-subtitle>
+                  <v-list-item-subtitle>{{ memberInfo?.email || 'Not provided' }}</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-content>
+                  <v-list-item-title>Phone</v-list-item-title>
+                  <v-list-item-subtitle>{{ memberInfo?.phone || 'Not provided' }}</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-content>
+                  <v-list-item-title>Nationality</v-list-item-title>
+                  <v-list-item-subtitle>{{ memberInfo?.nationality || 'Not provided' }}</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-content>
+                  <v-list-item-title>Member Since</v-list-item-title>
+                  <v-list-item-subtitle>{{ memberInfo?.memberSince || 'Not provided' }}</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-content>
+                  <v-list-item-title>Dues Status</v-list-item-title>
+                  <v-list-item-subtitle>
+                    <v-chip 
+                      :color="memberInfo?.duesStatus === 'Paid' ? 'success' : 'warning'" 
+                      size="small"
+                    >
+                      {{ memberInfo?.duesStatus || 'Unknown' }}
+                    </v-chip>
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-content>
+                  <v-list-item-title>Last Payment</v-list-item-title>
+                  <v-list-item-subtitle>{{ memberInfo?.lastPayment || 'No payment recorded' }}</v-list-item-subtitle>
                 </v-list-item-content>
               </v-list-item>
               <v-list-item>
@@ -156,6 +208,8 @@
 </template>
 
 <script setup lang="ts">
+import type { Member } from '~/utils/types';
+
 definePageMeta({
   layout: 'dashboard',
   middleware: 'auth'
@@ -163,6 +217,31 @@ definePageMeta({
 
 const { firstName, user, userTier } = useAuth();
 
+// Fetch complete member data
+const { data: memberData, pending, error } = await useFetch<{ success: boolean; member: Member }>('/api/auth/session', {
+  server: false
+});
+
+const member = computed(() => memberData.value?.member);
+
+// Format member information for display
+const memberInfo = computed(() => {
+  if (!member.value) return null;
+  
+  return {
+    memberId: member.value.member_id || 'Not assigned',
+    fullName: member.value.FullName || `${member.value.first_name || ''} ${member.value.last_name || ''}`.trim(),
+    email: member.value.email || 'Not provided',
+    phone: member.value.FormattedPhone || member.value.phone || 'Not provided',
+    nationality: member.value.nationality || 'Not provided',
+    memberSince: member.value.member_since ? new Date(member.value.member_since).toLocaleDateString() : 'Not provided',
+    duesStatus: member.value.current_year_dues_paid === 'true' ? 'Paid' : 'Outstanding',
+    membershipStatus: member.value.membership_status || 'Active',
+    lastPayment: member.value.membership_date_paid ? new Date(member.value.membership_date_paid).toLocaleDateString() : 'No payment recorded',
+    dueDate: member.value.payment_due_date ? new Date(member.value.payment_due_date).toLocaleDateString() : 'N/A'
+  };
+});
+
 // Navigation methods (placeholder implementations)
 const navigateToProfile = () => {
   navigateTo('/dashboard/profile');
@@ -186,8 +265,9 @@ I need assistance with:
 
 [Please describe your issue]
 
-Member: ${user.value?.name || 'Not provided'}
-Email: ${user.value?.email || 'Not provided'}
+Member ID: ${memberInfo.value?.memberId || 'Not provided'}
+Name: ${memberInfo.value?.fullName || 'Not provided'}
+Email: ${memberInfo.value?.email || 'Not provided'}
 
 Thank you!`);
   
diff --git a/server/templates/dues-reminder.hbs b/server/templates/dues-reminder.hbs
index d4080e7..9e56ea6 100644
--- a/server/templates/dues-reminder.hbs
+++ b/server/templates/dues-reminder.hbs
@@ -1,190 +1,249 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Membership Dues Reminder - MonacoUSA</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            line-height: 1.6;
-            color: #333;
-            max-width: 600px;
-            margin: 0 auto;
-            padding: 20px;
-            background-color: #f4f4f4;
-        }
-        
-        .email-container {
-            background: white;
-            padding: 30px;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        }
-        
-        .header {
-            text-align: center;
-            margin-bottom: 30px;
-            padding-bottom: 20px;
-            border-bottom: 2px solid #a31515;
-        }
-        
-        .logo {
-            width: 100px;
-            height: 100px;
-            margin-bottom: 20px;
-        }
-        
-        .title {
-            color: #a31515;
-            font-size: 28px;
-            font-weight: bold;
-            margin: 0;
-        }
-        
-        .subtitle {
-            color: #666;
-            font-size: 16px;
-            margin: 10px 0 0 0;
-        }
-        
-        .content {
-            margin-bottom: 30px;
-        }
-        
-        .greeting {
-            font-size: 20px;
-            color: #a31515;
-            margin-bottom: 20px;
-        }
-        
-        .dues-info {
-            background: rgba(163, 21, 21, 0.05);
-            padding: 20px;
-            border-radius: 8px;
-            border: 1px solid rgba(163, 21, 21, 0.1);
-            margin: 20px 0;
-        }
-        
-        .dues-info h3 {
-            color: #a31515;
-            margin: 0 0 15px 0;
-        }
-        
-        .amount {
-            font-size: 24px;
-            font-weight: bold;
-            color: #a31515;
-            text-align: center;
-            margin: 15px 0;
-        }
-        
-        .payment-details {
-            background: #f8f9fa;
-            padding: 20px;
-            border-radius: 8px;
-            border-left: 4px solid #a31515;
-            margin: 20px 0;
-        }
-        
-        .payment-details h3 {
-            color: #a31515;
-            margin: 0 0 15px 0;
-        }
-        
-        .footer {
-            text-align: center;
-            margin-top: 30px;
-            padding-top: 20px;
-            border-top: 1px solid #eee;
-            color: #666;
-            font-size: 14px;
-        }
-        
-        .link {
-            color: #a31515;
-            text-decoration: none;
-        }
-        
-        .link:hover {
-            text-decoration: underline;
-        }
-        
-        @media (max-width: 600px) {
-            body {
-                padding: 10px;
-            }
-            
-            .email-container {
-                padding: 20px;
-            }
-            
-            .title {
-                font-size: 24px;
-            }
-        }
-    </style>
 </head>
-<body>
-    <div class="email-container">
-        <div class="header">
-            <img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
-            <h1 class="title">Membership Dues Reminder</h1>
-            <p class="subtitle">Monaco - United States Association</p>
-        </div>
-        
-        <div class="content">
-            <div class="greeting">
-                Dear {{firstName}} {{lastName}},
-            </div>
-            
-            <p>This is a friendly reminder that your annual membership dues for the MonacoUSA Association are due.</p>
-            
-            <div class="dues-info">
-                <h3>💳 Payment Due</h3>
-                <div class="amount">€{{amount}}</div>
-                <p><strong>Due Date:</strong> {{dueDate}}</p>
-            </div>
-            
-            {{#if iban}}
-            <div class="payment-details">
-                <h3>🏦 Payment Instructions</h3>
-                <p><strong>Bank Transfer Details:</strong></p>
-                <ul>
-                    <li><strong>IBAN:</strong> {{iban}}</li>
-                    {{#if accountHolder}}<li><strong>Account Holder:</strong> {{accountHolder}}</li>{{/if}}
-                    <li><strong>Amount:</strong> €{{amount}}</li>
-                    <li><strong>Reference:</strong> Membership Dues - {{firstName}} {{lastName}}</li>
-                </ul>
-                
-                <p><em>Please include your name in the payment reference to ensure proper crediting.</em></p>
-            </div>
-            {{/if}}
-            
-            <h3>🌟 Why Your Membership Matters</h3>
-            <p>Your membership helps us:</p>
-            <ul>
-                <li>Connect Monaco and the United States communities</li>
-                <li>Organize cultural events and networking opportunities</li>
-                <li>Support charitable causes in both regions</li>
-                <li>Maintain our digital platform and services</li>
-            </ul>
-            
-            <p>If you have already made your payment, please disregard this reminder. It may take a few days for payments to be processed.</p>
-            
-            <p>If you have any questions about your membership or payment, please don't hesitate to contact us.</p>
-        </div>
-        
-        <div class="footer">
-            <p><strong>MonacoUSA Association</strong><br>
-            Connecting Monaco and the United States</p>
-            
-            <p>
-                <a href="https://portal.monacousa.org" class="link">Portal</a> |
-                <a href="mailto:info@monacousa.org" class="link">Contact Us</a> |
-                <a href="https://monacousa.org" class="link">Website</a>
-            </p>
-        </div>
-    </div>
+<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
+    <!-- Main Container -->
+    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
+        <tr>
+            <td align="center">
+                <!-- Email Container -->
+                <table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
+                    
+                    <!-- Header with Monaco Red Background -->
+                    <tr>
+                        <td style="background-color: #a31515; padding: 30px; text-align: center;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                <tr>
+                                    <td align="center">
+                                        <img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
+                                        <h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">Membership Dues Reminder</h1>
+                                        <p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Monaco - United States Association</p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    
+                    <!-- Main Content -->
+                    <tr>
+                        <td style="padding: 40px 30px;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                
+                                <!-- Greeting -->
+                                <tr>
+                                    <td style="padding-bottom: 20px;">
+                                        <h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{firstName}} {{lastName}},</h2>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Main Message -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
+                                            This is a friendly reminder that your annual membership dues for the MonacoUSA Association are due.
+                                        </p>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Payment Due Box -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px;">
+                                            <tr>
+                                                <td style="padding: 25px; text-align: center;">
+                                                    <h3 style="color: #856404; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">💳 Payment Due</h3>
+                                                    <div style="font-size: 32px; font-weight: bold; color: #a31515; margin: 10px 0;">€{{amount}}</div>
+                                                    <p style="color: #333333; font-size: 16px; font-weight: bold; margin: 10px 0 0 0;">Due Date: {{dueDate}}</p>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Payment Instructions -->
+                                {{#if iban}}
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                            <tr>
+                                                <td style="background-color: #e3f2fd; border-left: 4px solid #2196f3; padding: 20px; border-radius: 4px;">
+                                                    <h3 style="color: #1976d2; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">🏦 Payment Instructions</h3>
+                                                    <p style="color: #333333; font-size: 16px; font-weight: bold; margin: 0 0 15px 0;">Bank Transfer Details:</p>
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
+                                                                <strong style="color: #333333;">IBAN:</strong>
+                                                            </td>
+                                                            <td style="padding: 5px 0;">
+                                                                <span style="color: #333333; font-family: monospace;">{{iban}}</span>
+                                                            </td>
+                                                        </tr>
+                                                        {{#if accountHolder}}
+                                                        <tr>
+                                                            <td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
+                                                                <strong style="color: #333333;">Account Holder:</strong>
+                                                            </td>
+                                                            <td style="padding: 5px 0;">
+                                                                <span style="color: #333333;">{{accountHolder}}</span>
+                                                            </td>
+                                                        </tr>
+                                                        {{/if}}
+                                                        <tr>
+                                                            <td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
+                                                                <strong style="color: #333333;">Amount:</strong>
+                                                            </td>
+                                                            <td style="padding: 5px 0;">
+                                                                <span style="color: #333333;">€{{amount}}</span>
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
+                                                                <strong style="color: #333333;">Reference:</strong>
+                                                            </td>
+                                                            <td style="padding: 5px 0;">
+                                                                <span style="color: #333333;">Membership Dues - {{firstName}} {{lastName}}</span>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                    <p style="color: #666666; font-size: 14px; font-style: italic; margin: 15px 0 0 0;">
+                                                        Please include your name in the payment reference to ensure proper crediting.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                {{/if}}
+                                
+                                <!-- Why Your Membership Matters -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">🌟 Why Your Membership Matters</h3>
+                                        <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 10px 0;">Your membership helps us:</p>
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="20" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #a31515; font-weight: bold;">•</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    Connect Monaco and the United States communities
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="20" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #a31515; font-weight: bold;">•</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    Organize cultural events and networking opportunities
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="20" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #a31515; font-weight: bold;">•</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    Support charitable causes in both regions
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="20" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #a31515; font-weight: bold;">•</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    Maintain our digital platform and services
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Payment Notice -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">
+                                            If you have already made your payment, please disregard this reminder. It may take a few days for payments to be processed.
+                                        </p>
+                                        <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
+                                            If you have any questions about your membership or payment, please don't hesitate to contact us.
+                                        </p>
+                                    </td>
+                                </tr>
+                                
+                            </table>
+                        </td>
+                    </tr>
+                    
+                    <!-- Footer -->
+                    <tr>
+                        <td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                <tr>
+                                    <td>
+                                        <h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
+                                        <p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
+                                        
+                                        <!-- Links -->
+                                        <table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
+                                            <tr>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
+                                                </td>
+                                                <td style="padding: 0 10px; color: #cccccc;">|</td>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
+                                                </td>
+                                                <td style="padding: 0 10px; color: #cccccc;">|</td>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    
+                </table>
+            </td>
+        </tr>
+    </table>
 </body>
 </html>
diff --git a/server/templates/password-reset.hbs b/server/templates/password-reset.hbs
index c15164f..24e9ce0 100644
--- a/server/templates/password-reset.hbs
+++ b/server/templates/password-reset.hbs
@@ -1,167 +1,135 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Password Reset - MonacoUSA</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            line-height: 1.6;
-            color: #333;
-            margin: 0;
-            padding: 20px;
-            background-image: url('{{baseUrl}}/monaco_high_res.jpg');
-            background-size: cover;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-attachment: fixed;
-            min-height: 100vh;
-        }
-        
-        .email-container {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            padding: 40px;
-            border-radius: 12px;
-            box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15);
-            max-width: 600px;
-            margin: 20px auto;
-            border: 1px solid rgba(163, 21, 21, 0.1);
-        }
-        
-        .header {
-            text-align: center;
-            margin-bottom: 30px;
-            padding-bottom: 20px;
-            border-bottom: 2px solid #a31515;
-        }
-        
-        .logo {
-            width: 100px;
-            height: 100px;
-            margin-bottom: 20px;
-        }
-        
-        .title {
-            color: #a31515;
-            font-size: 28px;
-            font-weight: bold;
-            margin: 0;
-        }
-        
-        .subtitle {
-            color: #666;
-            font-size: 16px;
-            margin: 10px 0 0 0;
-        }
-        
-        .content {
-            margin-bottom: 30px;
-        }
-        
-        .greeting {
-            font-size: 20px;
-            color: #a31515;
-            margin-bottom: 20px;
-        }
-        
-        .reset-button {
-            display: inline-block;
-            padding: 15px 30px;
-            background: linear-gradient(135deg, #a31515 0%, #c41e1e 100%);
-            color: white;
-            text-decoration: none;
-            border-radius: 8px;
-            font-weight: bold;
-            font-size: 16px;
-            text-align: center;
-            margin: 20px 0;
-            transition: all 0.3s ease;
-        }
-        
-        .reset-button:hover {
-            background: linear-gradient(135deg, #8b1212 0%, #a31515 100%);
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(163, 21, 21, 0.3);
-        }
-        
-        .footer {
-            text-align: center;
-            margin-top: 30px;
-            padding-top: 20px;
-            border-top: 1px solid #eee;
-            color: #666;
-            font-size: 14px;
-        }
-        
-        .link {
-            color: #a31515;
-            text-decoration: none;
-        }
-        
-        .link:hover {
-            text-decoration: underline;
-        }
-        
-        @media (max-width: 600px) {
-            body {
-                padding: 10px;
-            }
-            
-            .email-container {
-                padding: 20px;
-            }
-            
-            .title {
-                font-size: 24px;
-            }
-            
-            .reset-button {
-                display: block;
-                text-align: center;
-            }
-        }
-    </style>
 </head>
-<body>
-    <div class="email-container">
-        <div class="header">
-            <img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
-            <h1 class="title">Password Reset</h1>
-            <p class="subtitle">Monaco - United States Association</p>
-        </div>
-        
-        <div class="content">
-            <div class="greeting">
-                Dear {{firstName}},
-            </div>
-            
-            <p>We received a request to reset your password for your MonacoUSA Portal account.</p>
-            
-            <div style="text-align: center;">
-                <a href="{{resetLink}}" class="reset-button">
-                    🔒 Reset Your Password
-                </a>
-            </div>
-            
-            <p><em>This password reset link will expire in 1 hour for security purposes.</em></p>
-            
-            <p>If you didn't request this password reset, please ignore this email. Your password will remain unchanged.</p>
-            
-            <p>For security reasons, this link can only be used once.</p>
-        </div>
-        
-        <div class="footer">
-            <p><strong>MonacoUSA Association</strong><br>
-            Connecting Monaco and the United States</p>
-            
-            <p>
-                <a href="https://portal.monacousa.org" class="link">Portal</a> |
-                <a href="mailto:info@monacousa.org" class="link">Contact Us</a> |
-                <a href="https://monacousa.org" class="link">Website</a>
-            </p>
-        </div>
-    </div>
+<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
+    <!-- Main Container -->
+    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
+        <tr>
+            <td align="center">
+                <!-- Email Container -->
+                <table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
+                    
+                    <!-- Header with Monaco Red Background -->
+                    <tr>
+                        <td style="background-color: #a31515; padding: 30px; text-align: center;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                <tr>
+                                    <td align="center">
+                                        <img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
+                                        <h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">Password Reset</h1>
+                                        <p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Monaco - United States Association</p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    
+                    <!-- Main Content -->
+                    <tr>
+                        <td style="padding: 40px 30px;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                
+                                <!-- Greeting -->
+                                <tr>
+                                    <td style="padding-bottom: 20px;">
+                                        <h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{firstName}},</h2>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Main Message -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
+                                            We received a request to reset your password for your MonacoUSA Portal account.
+                                        </p>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Reset Button -->
+                                <tr>
+                                    <td style="padding-bottom: 30px; text-align: center;">
+                                        <table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
+                                            <tr>
+                                                <td style="background-color: #a31515; padding: 15px 30px; border-radius: 6px;">
+                                                    <a href="{{resetLink}}" style="color: #ffffff; text-decoration: none; font-weight: bold; font-size: 16px; display: block;">
+                                                        🔒 Reset Your Password
+                                                    </a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Important Info -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                            <tr>
+                                                <td style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; border-radius: 4px;">
+                                                    <p style="color: #856404; font-size: 14px; font-style: italic; margin: 0 0 10px 0;">
+                                                        <strong>Important:</strong> This password reset link will expire in 1 hour for security purposes.
+                                                    </p>
+                                                    <p style="color: #856404; font-size: 14px; margin: 0;">
+                                                        For security reasons, this link can only be used once.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Security Notice -->
+                                <tr>
+                                    <td style="padding-bottom: 20px;">
+                                        <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
+                                            If you didn't request this password reset, please ignore this email. Your password will remain unchanged.
+                                        </p>
+                                    </td>
+                                </tr>
+                                
+                            </table>
+                        </td>
+                    </tr>
+                    
+                    <!-- Footer -->
+                    <tr>
+                        <td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                <tr>
+                                    <td>
+                                        <h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
+                                        <p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
+                                        
+                                        <!-- Links -->
+                                        <table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
+                                            <tr>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
+                                                </td>
+                                                <td style="padding: 0 10px; color: #cccccc;">|</td>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
+                                                </td>
+                                                <td style="padding: 0 10px; color: #cccccc;">|</td>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    
+                </table>
+            </td>
+        </tr>
+    </table>
 </body>
 </html>
diff --git a/server/templates/test.hbs b/server/templates/test.hbs
index 97278bc..0a44e67 100644
--- a/server/templates/test.hbs
+++ b/server/templates/test.hbs
@@ -1,224 +1,335 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>SMTP Test Email</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            line-height: 1.6;
-            color: #333;
-            margin: 0;
-            padding: 20px;
-            background-image: url('{{baseUrl}}/monaco_high_res.jpg');
-            background-size: cover;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-attachment: fixed;
-            min-height: 100vh;
-        }
-        
-        .email-container {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            padding: 40px;
-            border-radius: 12px;
-            box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15);
-            max-width: 600px;
-            margin: 20px auto;
-            border: 1px solid rgba(163, 21, 21, 0.1);
-        }
-        
-        .header {
-            text-align: center;
-            margin-bottom: 30px;
-            padding-bottom: 20px;
-            border-bottom: 2px solid #a31515;
-        }
-        
-        .logo {
-            width: 100px;
-            height: 100px;
-            margin-bottom: 20px;
-        }
-        
-        .title {
-            color: #a31515;
-            font-size: 28px;
-            font-weight: bold;
-            margin: 0;
-        }
-        
-        .subtitle {
-            color: #666;
-            font-size: 16px;
-            margin: 10px 0 0 0;
-        }
-        
-        .success-badge {
-            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
-            color: white;
-            padding: 10px 20px;
-            border-radius: 25px;
-            display: inline-block;
-            font-weight: bold;
-            margin: 20px 0;
-        }
-        
-        .test-details {
-            background: #f8f9fa;
-            padding: 20px;
-            border-radius: 8px;
-            border-left: 4px solid #a31515;
-            margin: 20px 0;
-        }
-        
-        .test-details h3 {
-            color: #a31515;
-            margin: 0 0 15px 0;
-        }
-        
-        .detail-row {
-            display: flex;
-            margin-bottom: 8px;
-            padding: 5px 0;
-            border-bottom: 1px solid #eee;
-        }
-        
-        .detail-label {
-            font-weight: bold;
-            min-width: 120px;
-            color: #666;
-        }
-        
-        .detail-value {
-            color: #333;
-            font-family: 'Courier New', monospace;
-            flex: 1;
-        }
-        
-        .footer {
-            text-align: center;
-            margin-top: 30px;
-            padding-top: 20px;
-            border-top: 1px solid #eee;
-            color: #666;
-            font-size: 14px;
-        }
-        
-        .link {
-            color: #a31515;
-            text-decoration: none;
-        }
-        
-        .link:hover {
-            text-decoration: underline;
-        }
-        
-        @media (max-width: 600px) {
-            body {
-                padding: 10px;
-            }
-            
-            .email-container {
-                padding: 20px;
-            }
-            
-            .title {
-                font-size: 24px;
-            }
-            
-            .detail-row {
-                flex-direction: column;
-            }
-            
-            .detail-label {
-                min-width: auto;
-                margin-bottom: 5px;
-            }
-        }
-    </style>
 </head>
-<body>
-    <div class="email-container">
-        <div class="header">
-            <img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
-            <h1 class="title">SMTP Test Email</h1>
-            <p class="subtitle">Email Configuration Test</p>
-        </div>
-        
-        <div style="text-align: center;">
-            <div class="success-badge">
-                ✅ SMTP Configuration Working!
-            </div>
-        </div>
-        
-        <p>Congratulations! This test email confirms that your SMTP email configuration is working correctly. The MonacoUSA Portal email system is now ready to send emails.</p>
-        
-        <div class="test-details">
-            <h3>📊 Test Configuration Details</h3>
-            
-            <div class="detail-row">
-                <div class="detail-label">Test Time:</div>
-                <div class="detail-value">{{testTime}}</div>
-            </div>
-            
-            <div class="detail-row">
-                <div class="detail-label">SMTP Host:</div>
-                <div class="detail-value">{{smtpHost}}</div>
-            </div>
-            
-            <div class="detail-row">
-                <div class="detail-label">From Address:</div>
-                <div class="detail-value">{{fromAddress}}</div>
-            </div>
-            
-            <div class="detail-row">
-                <div class="detail-label">Email Type:</div>
-                <div class="detail-value">SMTP Configuration Test</div>
-            </div>
-        </div>
-        
-        <h3>🎯 What This Means</h3>
-        <ul>
-            <li><strong>✅ Connection Established:</strong> Successfully connected to your SMTP server</li>
-            <li><strong>✅ Authentication Passed:</strong> SMTP credentials are correct and working</li>
-            <li><strong>✅ Email Delivery:</strong> Emails can be sent from the portal</li>
-            <li><strong>✅ Template System:</strong> Email templates are loading and rendering correctly</li>
-        </ul>
-        
-        <h3>📧 Available Email Types</h3>
-        <p>Your portal can now send the following types of emails:</p>
-        <ul>
-            <li><strong>Welcome Emails:</strong> New member registration confirmations</li>
-            <li><strong>Email Verification:</strong> Account activation links</li>
-            <li><strong>Password Reset:</strong> Secure password reset instructions</li>
-            <li><strong>Dues Reminders:</strong> Membership payment notifications</li>
-            <li><strong>General Notifications:</strong> Administrative communications</li>
-        </ul>
-        
-        <div style="background: rgba(40, 167, 69, 0.1); padding: 15px; border-radius: 8px; margin: 20px 0; border-left: 4px solid #28a745;">
-            <p style="margin: 0; color: #155724;">
-                <strong>✨ Success!</strong> Your email system is fully configured and operational. 
-                All automated emails from the MonacoUSA Portal will now be delivered successfully.
-            </p>
-        </div>
-        
-        <div class="footer">
-            <p><strong>MonacoUSA Portal</strong><br>
-            Email System Configuration Test</p>
-            
-            <p>
-                <a href="https://portal.monacousa.org" class="link">Portal</a> |
-                <a href="mailto:admin@monacousa.org" class="link">Admin Support</a>
-            </p>
-            
-            <p style="margin-top: 20px; font-size: 12px; color: #999;">
-                This is an automated test email to verify SMTP configuration.<br>
-                Generated by MonacoUSA Portal Email System
-            </p>
-        </div>
-    </div>
+<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
+    <!-- Main Container -->
+    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
+        <tr>
+            <td align="center">
+                <!-- Email Container -->
+                <table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
+                    
+                    <!-- Header with Monaco Red Background -->
+                    <tr>
+                        <td style="background-color: #a31515; padding: 30px; text-align: center;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                <tr>
+                                    <td align="center">
+                                        <img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
+                                        <h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">SMTP Test Email</h1>
+                                        <p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Email Configuration Test</p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    
+                    <!-- Main Content -->
+                    <tr>
+                        <td style="padding: 40px 30px;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                
+                                <!-- Success Badge -->
+                                <tr>
+                                    <td style="padding-bottom: 30px; text-align: center;">
+                                        <table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
+                                            <tr>
+                                                <td style="background-color: #28a745; color: #ffffff; padding: 10px 20px; border-radius: 20px; font-weight: bold;">
+                                                    ✅ SMTP Configuration Working!
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Main Message -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
+                                            Congratulations! This test email confirms that your SMTP email configuration is working correctly. 
+                                            The MonacoUSA Portal email system is now ready to send emails.
+                                        </p>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Test Configuration Details -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                            <tr>
+                                                <td style="background-color: #f8f9fa; border-left: 4px solid #a31515; padding: 20px; border-radius: 4px;">
+                                                    <h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">📊 Test Configuration Details</h3>
+                                                    
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
+                                                                <strong style="color: #333333;">Test Time:</strong>
+                                                            </td>
+                                                            <td style="padding: 5px 0; color: #333333; font-family: monospace;">
+                                                                {{testTime}}
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
+                                                                <strong style="color: #333333;">SMTP Host:</strong>
+                                                            </td>
+                                                            <td style="padding: 5px 0; color: #333333; font-family: monospace;">
+                                                                {{smtpHost}}
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
+                                                                <strong style="color: #333333;">From Address:</strong>
+                                                            </td>
+                                                            <td style="padding: 5px 0; color: #333333; font-family: monospace;">
+                                                                {{fromAddress}}
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
+                                                                <strong style="color: #333333;">Email Type:</strong>
+                                                            </td>
+                                                            <td style="padding: 5px 0; color: #333333;">
+                                                                SMTP Configuration Test
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- What This Means -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">🎯 What This Means</h3>
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="30" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #28a745; font-weight: bold; font-size: 16px;">✅</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>Connection Established:</strong> Successfully connected to your SMTP server
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="30" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #28a745; font-weight: bold; font-size: 16px;">✅</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>Authentication Passed:</strong> SMTP credentials are correct and working
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="30" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #28a745; font-weight: bold; font-size: 16px;">✅</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>Email Delivery:</strong> Emails can be sent from the portal
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="30" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #28a745; font-weight: bold; font-size: 16px;">✅</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>Template System:</strong> Email templates are loading and rendering correctly
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Available Email Types -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">📧 Available Email Types</h3>
+                                        <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">Your portal can now send the following types of emails:</p>
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="20" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #a31515; font-weight: bold;">•</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>Welcome Emails:</strong> New member registration confirmations
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="20" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #a31515; font-weight: bold;">•</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>Email Verification:</strong> Account activation links
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="20" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #a31515; font-weight: bold;">•</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>Password Reset:</strong> Secure password reset instructions
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="20" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #a31515; font-weight: bold;">•</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>Dues Reminders:</strong> Membership payment notifications
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="20" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="color: #a31515; font-weight: bold;">•</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>General Notifications:</strong> Administrative communications
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Success Message -->
+                                <tr>
+                                    <td style="padding-bottom: 20px;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                            <tr>
+                                                <td style="background-color: rgba(40, 167, 69, 0.1); border-left: 4px solid #28a745; padding: 15px; border-radius: 4px;">
+                                                    <p style="color: #155724; font-size: 16px; font-weight: bold; margin: 0;">
+                                                        ✨ Success! Your email system is fully configured and operational. 
+                                                        All automated emails from the MonacoUSA Portal will now be delivered successfully.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                            </table>
+                        </td>
+                    </tr>
+                    
+                    <!-- Footer -->
+                    <tr>
+                        <td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                <tr>
+                                    <td>
+                                        <h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Portal</h4>
+                                        <p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Email System Configuration Test</p>
+                                        
+                                        <!-- Links -->
+                                        <table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
+                                            <tr>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
+                                                </td>
+                                                <td style="padding: 0 10px; color: #cccccc;">|</td>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="mailto:admin@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Admin Support</a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                        
+                                        <!-- Email Info -->
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 20px;">
+                                            <tr>
+                                                <td style="padding-top: 15px; border-top: 1px solid #dddddd;">
+                                                    <p style="color: #999999; font-size: 12px; margin: 0;">
+                                                        This is an automated test email to verify SMTP configuration.<br>
+                                                        Generated by MonacoUSA Portal Email System
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    
+                </table>
+            </td>
+        </tr>
+    </table>
 </body>
 </html>
diff --git a/server/templates/verification.hbs b/server/templates/verification.hbs
index 7666ec9..100839f 100644
--- a/server/templates/verification.hbs
+++ b/server/templates/verification.hbs
@@ -1,165 +1,132 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Verify Your Email - MonacoUSA</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            line-height: 1.6;
-            color: #333;
-            margin: 0;
-            padding: 20px;
-            background-image: url('{{baseUrl}}/monaco_high_res.jpg');
-            background-size: cover;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-attachment: fixed;
-            min-height: 100vh;
-        }
-        
-        .email-container {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            padding: 40px;
-            border-radius: 12px;
-            box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15);
-            max-width: 600px;
-            margin: 20px auto;
-            border: 1px solid rgba(163, 21, 21, 0.1);
-        }
-        
-        .header {
-            text-align: center;
-            margin-bottom: 30px;
-            padding-bottom: 20px;
-            border-bottom: 2px solid #a31515;
-        }
-        
-        .logo {
-            width: 100px;
-            height: 100px;
-            margin-bottom: 20px;
-        }
-        
-        .title {
-            color: #a31515;
-            font-size: 28px;
-            font-weight: bold;
-            margin: 0;
-        }
-        
-        .subtitle {
-            color: #666;
-            font-size: 16px;
-            margin: 10px 0 0 0;
-        }
-        
-        .content {
-            margin-bottom: 30px;
-        }
-        
-        .greeting {
-            font-size: 20px;
-            color: #a31515;
-            margin-bottom: 20px;
-        }
-        
-        .verify-button {
-            display: inline-block;
-            padding: 15px 30px;
-            background: linear-gradient(135deg, #a31515 0%, #c41e1e 100%);
-            color: white;
-            text-decoration: none;
-            border-radius: 8px;
-            font-weight: bold;
-            font-size: 16px;
-            text-align: center;
-            margin: 20px 0;
-            transition: all 0.3s ease;
-        }
-        
-        .verify-button:hover {
-            background: linear-gradient(135deg, #8b1212 0%, #a31515 100%);
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(163, 21, 21, 0.3);
-        }
-        
-        .footer {
-            text-align: center;
-            margin-top: 30px;
-            padding-top: 20px;
-            border-top: 1px solid #eee;
-            color: #666;
-            font-size: 14px;
-        }
-        
-        .link {
-            color: #a31515;
-            text-decoration: none;
-        }
-        
-        .link:hover {
-            text-decoration: underline;
-        }
-        
-        @media (max-width: 600px) {
-            body {
-                padding: 10px;
-            }
-            
-            .email-container {
-                padding: 20px;
-            }
-            
-            .title {
-                font-size: 24px;
-            }
-            
-            .verify-button {
-                display: block;
-                text-align: center;
-            }
-        }
-    </style>
 </head>
-<body>
-    <div class="email-container">
-        <div class="header">
-            <img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
-            <h1 class="title">Email Verification</h1>
-            <p class="subtitle">Monaco - United States Association</p>
-        </div>
-        
-        <div class="content">
-            <div class="greeting">
-                Dear {{firstName}},
-            </div>
-            
-            <p>Please verify your email address to complete your MonacoUSA account setup.</p>
-            
-            <div style="text-align: center;">
-                <a href="{{verificationLink}}" class="verify-button">
-                    ✉️ Verify Email Address
-                </a>
-            </div>
-            
-            <p><em>This verification link will expire in 24 hours for security purposes.</em></p>
-            
-            <p>If you didn't request this verification, please ignore this email.</p>
-        </div>
-        
-        <div class="footer">
-            <p><strong>MonacoUSA Association</strong><br>
-            Connecting Monaco and the United States</p>
-            
-            <p>
-                <a href="https://portal.monacousa.org" class="link">Portal</a> |
-                <a href="mailto:info@monacousa.org" class="link">Contact Us</a> |
-                <a href="https://monacousa.org" class="link">Website</a>
-            </p>
-        </div>
-    </div>
+<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
+    <!-- Main Container -->
+    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
+        <tr>
+            <td align="center">
+                <!-- Email Container -->
+                <table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
+                    
+                    <!-- Header with Monaco Red Background -->
+                    <tr>
+                        <td style="background-color: #a31515; padding: 30px; text-align: center;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                <tr>
+                                    <td align="center">
+                                        <img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
+                                        <h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">Email Verification</h1>
+                                        <p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Monaco - United States Association</p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    
+                    <!-- Main Content -->
+                    <tr>
+                        <td style="padding: 40px 30px;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                
+                                <!-- Greeting -->
+                                <tr>
+                                    <td style="padding-bottom: 20px;">
+                                        <h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{firstName}},</h2>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Main Message -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
+                                            Please verify your email address to complete your MonacoUSA account setup.
+                                        </p>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Verification Button -->
+                                <tr>
+                                    <td style="padding-bottom: 30px; text-align: center;">
+                                        <table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
+                                            <tr>
+                                                <td style="background-color: #a31515; padding: 15px 30px; border-radius: 6px;">
+                                                    <a href="{{verificationLink}}" style="color: #ffffff; text-decoration: none; font-weight: bold; font-size: 16px; display: block;">
+                                                        ✉️ Verify Email Address
+                                                    </a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Important Info -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                            <tr>
+                                                <td style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; border-radius: 4px;">
+                                                    <p style="color: #856404; font-size: 14px; font-style: italic; margin: 0;">
+                                                        <strong>Important:</strong> This verification link will expire in 24 hours for security purposes.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Security Notice -->
+                                <tr>
+                                    <td style="padding-bottom: 20px;">
+                                        <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
+                                            If you didn't request this verification, please ignore this email.
+                                        </p>
+                                    </td>
+                                </tr>
+                                
+                            </table>
+                        </td>
+                    </tr>
+                    
+                    <!-- Footer -->
+                    <tr>
+                        <td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                <tr>
+                                    <td>
+                                        <h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
+                                        <p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
+                                        
+                                        <!-- Links -->
+                                        <table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
+                                            <tr>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
+                                                </td>
+                                                <td style="padding: 0 10px; color: #cccccc;">|</td>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
+                                                </td>
+                                                <td style="padding: 0 10px; color: #cccccc;">|</td>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    
+                </table>
+            </td>
+        </tr>
+    </table>
 </body>
 </html>
diff --git a/server/templates/welcome.hbs b/server/templates/welcome.hbs
index c15c05e..735a0fc 100644
--- a/server/templates/welcome.hbs
+++ b/server/templates/welcome.hbs
@@ -1,228 +1,293 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Welcome to MonacoUSA</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            line-height: 1.6;
-            color: #333;
-            margin: 0;
-            padding: 20px;
-            background: linear-gradient(135deg, #a31515 0%, #8b1212 50%, #a31515 100%);
-            background-image: url('{{baseUrl}}/monaco_high_res.jpg');
-            background-size: cover;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-attachment: fixed;
-            min-height: 100vh;
-        }
-        
-        .email-container {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            padding: 40px;
-            border-radius: 12px;
-            box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15);
-            max-width: 600px;
-            margin: 20px auto;
-            border: 1px solid rgba(163, 21, 21, 0.1);
-        }
-        
-        .header {
-            text-align: center;
-            margin-bottom: 30px;
-            padding-bottom: 20px;
-            border-bottom: 2px solid #a31515;
-        }
-        
-        .logo {
-            width: 100px;
-            height: 100px;
-            margin-bottom: 20px;
-        }
-        
-        .title {
-            color: #a31515;
-            font-size: 28px;
-            font-weight: bold;
-            margin: 0;
-        }
-        
-        .subtitle {
-            color: #666;
-            font-size: 16px;
-            margin: 10px 0 0 0;
-        }
-        
-        .content {
-            margin-bottom: 30px;
-        }
-        
-        .greeting {
-            font-size: 20px;
-            color: #a31515;
-            margin-bottom: 20px;
-        }
-        
-        .member-info {
-            background: #f8f9fa;
-            padding: 20px;
-            border-radius: 8px;
-            border-left: 4px solid #a31515;
-            margin: 20px 0;
-        }
-        
-        .member-info h3 {
-            color: #a31515;
-            margin: 0 0 10px 0;
-        }
-        
-        .verify-button {
-            display: inline-block;
-            padding: 15px 30px;
-            background: linear-gradient(135deg, #a31515 0%, #c41e1e 100%);
-            color: white;
-            text-decoration: none;
-            border-radius: 8px;
-            font-weight: bold;
-            font-size: 16px;
-            text-align: center;
-            margin: 20px 0;
-            transition: all 0.3s ease;
-        }
-        
-        .verify-button:hover {
-            background: linear-gradient(135deg, #8b1212 0%, #a31515 100%);
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(163, 21, 21, 0.3);
-        }
-        
-        .payment-info {
-            background: rgba(163, 21, 21, 0.05);
-            padding: 20px;
-            border-radius: 8px;
-            border: 1px solid rgba(163, 21, 21, 0.1);
-            margin: 20px 0;
-        }
-        
-        .payment-info h3 {
-            color: #a31515;
-            margin: 0 0 15px 0;
-        }
-        
-        .footer {
-            text-align: center;
-            margin-top: 30px;
-            padding-top: 20px;
-            border-top: 1px solid #eee;
-            color: #666;
-            font-size: 14px;
-        }
-        
-        .link {
-            color: #a31515;
-            text-decoration: none;
-        }
-        
-        .link:hover {
-            text-decoration: underline;
-        }
-        
-        @media (max-width: 600px) {
-            body {
-                padding: 10px;
-            }
-            
-            .email-container {
-                padding: 20px;
-            }
-            
-            .title {
-                font-size: 24px;
-            }
-            
-            .verify-button {
-                display: block;
-                text-align: center;
-            }
-        }
-    </style>
 </head>
-<body>
-    <div class="email-container">
-        <div class="header">
-            <img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
-            <h1 class="title">Welcome to MonacoUSA</h1>
-            <p class="subtitle">Monaco - United States Association</p>
-        </div>
-        
-        <div class="content">
-            <div class="greeting">
-                Dear {{firstName}} {{lastName}},
-            </div>
-            
-            <p>Thank you for registering to become a member of the <strong>MonacoUSA Association</strong>! We're excited to welcome you to our community that bridges Monaco and the United States.</p>
-            
-            <div class="member-info">
-                <h3>🎉 Registration Successful</h3>
-                <p><strong>Member ID:</strong> {{memberId}}</p>
-                <p><strong>Registration Date:</strong> {{registrationDate}}</p>
-                <p>Your membership application has been received and is being processed.</p>
-            </div>
-            
-            <h3>📧 Next Step: Verify Your Email</h3>
-            <p>To complete your registration and activate your account, please verify your email address by clicking the button below:</p>
-            
-            <div style="text-align: center;">
-                <a href="{{verificationLink}}" class="verify-button">
-                    ✉️ Verify Email Address
-                </a>
-            </div>
-            
-            <p><em>This verification link will expire in 24 hours for security purposes.</em></p>
-            
-            <div class="payment-info">
-                <h3>💳 Membership Dues Payment</h3>
-                <p>Once your email is verified, you'll be able to log in to the portal. To activate your membership, please transfer your annual membership dues:</p>
-                
-                <ul>
-                    <li><strong>Amount:</strong> €150/year</li>
-                    <li><strong>Payment method:</strong> Bank transfer (details in your portal)</li>
-                    <li><strong>Status:</strong> Your account will be activated once payment is verified</li>
-                </ul>
-                
-                <p><em>You can find complete payment instructions in your member portal after verification.</em></p>
-            </div>
-            
-            <h3>🌟 What's Next?</h3>
-            <ol>
-                <li><strong>Verify your email</strong> using the button above</li>
-                <li><strong>Log in to your portal</strong> at <a href="https://portal.monacousa.org" class="link">portal.monacousa.org</a></li>
-                <li><strong>Complete your payment</strong> to activate your membership</li>
-                <li><strong>Enjoy member benefits</strong> and connect with our community</li>
-            </ol>
-            
-            <p>If you have any questions, please don't hesitate to contact us. We're here to help!</p>
-        </div>
-        
-        <div class="footer">
-            <p><strong>MonacoUSA Association</strong><br>
-            Connecting Monaco and the United States</p>
-            
-            <p>
-                <a href="https://portal.monacousa.org" class="link">Portal</a> |
-                <a href="mailto:info@monacousa.org" class="link">Contact Us</a> |
-                <a href="https://monacousa.org" class="link">Website</a>
-            </p>
-            
-            <p style="margin-top: 20px; font-size: 12px; color: #999;">
-                This email was sent to {{email}} regarding your MonacoUSA membership registration.<br>
-                If you did not register for this account, please ignore this email.
-            </p>
-        </div>
-    </div>
+<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
+    <!-- Main Container -->
+    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
+        <tr>
+            <td align="center">
+                <!-- Email Container -->
+                <table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
+                    
+                    <!-- Header with Monaco Red Background -->
+                    <tr>
+                        <td style="background-color: #a31515; padding: 30px; text-align: center;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                <tr>
+                                    <td align="center">
+                                        <img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
+                                        <h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">Welcome to MonacoUSA</h1>
+                                        <p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Monaco - United States Association</p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    
+                    <!-- Main Content -->
+                    <tr>
+                        <td style="padding: 40px 30px;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                
+                                <!-- Greeting -->
+                                <tr>
+                                    <td style="padding-bottom: 20px;">
+                                        <h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{firstName}} {{lastName}},</h2>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Welcome Message -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
+                                            Thank you for registering to become a member of the <strong>MonacoUSA Association</strong>! 
+                                            We're excited to welcome you to our community that bridges Monaco and the United States.
+                                        </p>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Registration Success Box -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px;">
+                                            <tr>
+                                                <td style="padding: 25px;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td style="text-align: center; padding-bottom: 15px;">
+                                                                <span style="background-color: #28a745; color: #ffffff; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 14px;">🎉 Registration Successful</span>
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td>
+                                                                <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                                    <tr>
+                                                                        <td width="50%" style="vertical-align: top; padding-right: 10px;">
+                                                                            <p style="margin: 0 0 8px 0; color: #333333; font-weight: bold;">Member ID:</p>
+                                                                            <p style="margin: 0; color: #a31515; font-weight: bold; font-size: 18px;">{{memberId}}</p>
+                                                                        </td>
+                                                                        <td width="50%" style="vertical-align: top; padding-left: 10px;">
+                                                                            <p style="margin: 0 0 8px 0; color: #333333; font-weight: bold;">Registration Date:</p>
+                                                                            <p style="margin: 0; color: #333333; font-size: 16px;">{{registrationDate}}</p>
+                                                                        </td>
+                                                                    </tr>
+                                                                </table>
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td style="padding-top: 15px;">
+                                                                <p style="margin: 0; color: #666666; font-size: 14px;">
+                                                                    Your membership application has been received and is being processed.
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Next Step: Verify Email -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                            <tr>
+                                                <td style="background-color: #e3f2fd; border-left: 4px solid #2196f3; padding: 20px; border-radius: 4px;">
+                                                    <h3 style="color: #1976d2; font-size: 18px; font-weight: bold; margin: 0 0 10px 0;">📧 Next Step: Verify Your Email</h3>
+                                                    <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">
+                                                        To complete your registration and activate your account, please verify your email address by clicking the button below:
+                                                    </p>
+                                                    <table cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td style="text-align: center; padding: 15px 0;">
+                                                                <a href="{{verificationLink}}" style="background-color: #a31515; color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 6px; font-weight: bold; font-size: 16px; display: inline-block;">
+                                                                    ✉️ Verify Email Address
+                                                                </a>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                    <p style="color: #666666; font-size: 14px; font-style: italic; margin: 15px 0 0 0;">
+                                                        This verification link will expire in 24 hours for security purposes.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Membership Dues Payment -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                            <tr>
+                                                <td style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; border-radius: 4px;">
+                                                    <h3 style="color: #856404; font-size: 18px; font-weight: bold; margin: 0 0 10px 0;">💳 Membership Dues Payment</h3>
+                                                    <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">
+                                                        Once your email is verified, you'll be able to log in to the portal. To activate your membership, please transfer your annual membership dues:
+                                                    </p>
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="33%" style="vertical-align: top; padding-right: 10px;">
+                                                                <p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Amount:</p>
+                                                                <p style="margin: 0; color: #333333;">€150/year</p>
+                                                            </td>
+                                                            <td width="33%" style="vertical-align: top; padding: 0 5px;">
+                                                                <p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Payment method:</p>
+                                                                <p style="margin: 0; color: #333333;">Bank transfer (details in your portal)</p>
+                                                            </td>
+                                                            <td width="33%" style="vertical-align: top; padding-left: 10px;">
+                                                                <p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Status:</p>
+                                                                <p style="margin: 0; color: #333333;">Your account will be activated once payment is verified</p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                    <p style="color: #666666; font-size: 14px; font-style: italic; margin: 15px 0 0 0;">
+                                                        You can find complete payment instructions in your member portal after verification.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- What's Next -->
+                                <tr>
+                                    <td style="padding-bottom: 30px;">
+                                        <h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">⭐ What's Next?</h3>
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                            <tr>
+                                                <td style="padding: 5px 0; border-bottom: 1px solid #eeeeee;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="30" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="background-color: #a31515; color: #ffffff; border-radius: 50%; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; font-weight: bold; font-size: 14px;">1</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>Verify your email</strong> using the button above
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0; border-bottom: 1px solid #eeeeee;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="30" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="background-color: #a31515; color: #ffffff; border-radius: 50%; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; font-weight: bold; font-size: 14px;">2</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>Log in to your portal</strong> at portal.monacousa.org
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0; border-bottom: 1px solid #eeeeee;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="30" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="background-color: #a31515; color: #ffffff; border-radius: 50%; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; font-weight: bold; font-size: 14px;">3</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>Complete your payment</strong> to activate your membership
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding: 5px 0;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                                        <tr>
+                                                            <td width="30" style="vertical-align: top; padding-right: 10px;">
+                                                                <span style="background-color: #a31515; color: #ffffff; border-radius: 50%; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; font-weight: bold; font-size: 14px;">4</span>
+                                                            </td>
+                                                            <td>
+                                                                <p style="margin: 0; color: #333333; font-size: 16px;">
+                                                                    <strong>Enjoy member benefits</strong> and connect with our community
+                                                                </p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Help Message -->
+                                <tr>
+                                    <td style="padding-bottom: 20px;">
+                                        <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
+                                            If you have any questions, please don't hesitate to contact us. We're here to help!
+                                        </p>
+                                    </td>
+                                </tr>
+                                
+                            </table>
+                        </td>
+                    </tr>
+                    
+                    <!-- Footer -->
+                    <tr>
+                        <td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                <tr>
+                                    <td>
+                                        <h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
+                                        <p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
+                                        
+                                        <!-- Links -->
+                                        <table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
+                                            <tr>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
+                                                </td>
+                                                <td style="padding: 0 10px; color: #cccccc;">|</td>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
+                                                </td>
+                                                <td style="padding: 0 10px; color: #cccccc;">|</td>
+                                                <td style="padding: 0 10px;">
+                                                    <a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                        
+                                        <!-- Email Info -->
+                                        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 20px;">
+                                            <tr>
+                                                <td style="padding-top: 15px; border-top: 1px solid #dddddd;">
+                                                    <p style="color: #999999; font-size: 12px; margin: 0;">
+                                                        This email was sent to <strong>{{email}}</strong> regarding your MonacoUSA membership registration.<br>
+                                                        If you did not register for this account, please ignore this email.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    
+                </table>
+            </td>
+        </tr>
+    </table>
 </body>
 </html>