diff --git a/scripts/seed.ts b/scripts/seed.ts
index 5acdab7..6a684c7 100644
--- a/scripts/seed.ts
+++ b/scripts/seed.ts
@@ -1,3 +1,4 @@
+
 import Database from 'better-sqlite3';
 
 const db = new Database('local.db');
@@ -41,25 +42,60 @@ function seed() {
   const templateStmt = db.prepare('SELECT * FROM email_templates WHERE id = ?');
   const defaultTemplate = templateStmt.get(1);
 
+  const defaultSubject = "Your EstimateFlow Project Estimate is Ready!";
+  const defaultBody = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your Project Estimate</title>
+</head>
+<body style="font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; color: #333;">
+    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width: 600px; margin: auto; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+        <tr>
+            <td style="padding: 20px; text-align: center; background-color: #4A90E2; color: #ffffff; border-top-left-radius: 8px; border-top-right-radius: 8px;">
+                <h1 style="margin: 0; font-size: 24px;">EstimateFlow</h1>
+            </td>
+        </tr>
+        <tr>
+            <td style="padding: 30px 20px;">
+                <h2 style="font-size: 20px; color: #333;">Hello, [User Name],</h2>
+                <p style="font-size: 16px; line-height: 1.6;">
+                    Thank you for using EstimateFlow. We've prepared a rough estimate for your project based on your selections.
+                </p>
+                
+                [EstimateDetails]
+
+                <p style="font-size: 16px; line-height: 1.6; margin-top: 20px;">
+                    Please note that this is a preliminary estimate. For a more detailed quote and to discuss your project further, please don't hesitate to contact us.
+                </p>
+                <div style="text-align: center; margin-top: 30px;">
+                    <a href="#" style="background-color: #4A90E2; color: #ffffff; padding: 12px 25px; text-decoration: none; border-radius: 5px; font-size: 16px;">Contact Us</a>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td style="padding: 20px; text-align: center; font-size: 12px; color: #777; border-top: 1px solid #eaeaea;">
+                <p>Best regards,<br>The EstimateFlow Team</p>
+                <p>&copy; ${new Date().getFullYear()} EstimateFlow. All rights reserved.</p>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>`;
+
   if (!defaultTemplate) {
     const insertTemplate = db.prepare(
       "INSERT INTO email_templates (id, subject, body) VALUES (?, ?, ?)"
     );
-    const defaultSubject = "Your Project Estimate is Ready!";
-    const defaultBody = `Hello, [User Name],
-
-Thank you for using EstimateFlow. We've prepared a rough estimate for your project based on your selections.
-
-[EstimateDetails]
-
-Please note that this is a preliminary estimate. For a more detailed quote and to discuss your project further, please don't hesitate to contact us.
-
-Best regards,
-The EstimateFlow Team`;
     insertTemplate.run(1, defaultSubject, defaultBody);
     console.log('Default email template created.');
   } else {
-    console.log('Default email template already exists.');
+    // If you want to update the template on every seed, you can use an UPDATE query here
+    const updateTemplate = db.prepare("UPDATE email_templates SET subject = ?, body = ? WHERE id = ?");
+    updateTemplate.run(defaultSubject, defaultBody, 1);
+    console.log('Default email template updated.');
   }
 
 
diff --git a/src/app/admin/settings/email-templates/page.tsx b/src/app/admin/settings/email-templates/page.tsx
index 002e6e3..d245024 100644
--- a/src/app/admin/settings/email-templates/page.tsx
+++ b/src/app/admin/settings/email-templates/page.tsx
@@ -9,6 +9,7 @@ import { getEmailTemplate, updateEmailTemplate } from '@/lib/actions/email';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
 
 type EmailTemplate = {
   subject: string;
@@ -16,26 +17,29 @@ type EmailTemplate = {
 };
 
 function EmailPreview({ template }: { template: EmailTemplate }) {
-  const previewBody = template.body.replace(
-    '[EstimateDetails]',
-    `<div class="my-6 space-y-4 rounded-lg border bg-background p-4">
-        <div>
-            <h3 class="font-semibold">Custom Development Estimate</h3>
-            <p class="text-2xl font-bold">[Custom Hours]+ hours</p>
-        </div>
-        <div>
-            <h3 class="font-semibold">Ready-Made Tools Estimate</h3>
-            <p class="text-2xl font-bold">[Ready-Made Hours]+ hours</p>
-        </div>
-    </div>`
-  ).replace('[User Name]', 'Valued Customer').replace(/\n/g, '<br />');
+  const estimateDetailsHtml = `
+  <div style="margin: 20px 0; border: 1px solid #eaeaea; border-radius: 5px; background-color: #fafafa;">
+    <div style="padding: 15px; border-bottom: 1px solid #eaeaea;">
+        <h3 style="margin: 0; font-size: 16px; color: #333;">Custom Development Estimate</h3>
+        <p style="margin: 5px 0 0; font-size: 24px; font-weight: bold; color: #4A90E2;">[Custom Hours]+ hours</p>
+    </div>
+    <div style="padding: 15px;">
+        <h3 style="margin: 0; font-size: 16px; color: #333;">Ready-Made Tools Estimate</h3>
+        <p style="margin: 5px 0 0; font-size: 24px; font-weight: bold; color: #4A90E2;">[Ready-Made Hours]+ hours</p>
+    </div>
+  </div>`;
+
+  const previewBody = template.body
+    .replace('[EstimateDetails]', estimateDetailsHtml)
+    .replace('[User Name]', 'Valued Customer');
 
   return (
     <div className="w-full rounded-lg border bg-muted p-6">
-      <div className="font-sans text-sm text-foreground">
-        <h2 className="text-xl font-bold">{template.subject}</h2>
-        <div className="mt-4" dangerouslySetInnerHTML={{ __html: previewBody }} />
-      </div>
+        <iframe
+            srcDoc={previewBody}
+            className="w-full h-[600px] border-none"
+            title="Email Preview"
+        />
     </div>
   );
 }
@@ -56,7 +60,12 @@ export default function EmailTemplatesPage() {
           setTemplate(fetchedTemplate);
           setOriginalTemplate(fetchedTemplate);
         } else {
-           throw new Error('Could not find email template.');
+           toast({
+             variant: 'destructive',
+             title: 'Template Not Found',
+             description: 'No email template found in the database. You can create one by saving a new template.',
+           });
+           setIsEditing(true); // Default to editing if no template exists
         }
       } catch (error: any) {
         toast({
@@ -117,7 +126,7 @@ export default function EmailTemplatesPage() {
               <Button variant="outline" onClick={() => setIsEditing(true)}>Edit Template</Button>
             ) : (
                 <div className="flex gap-2">
-                    <Button variant="outline" onClick={handleCancel}>Cancel</Button>
+                    {originalTemplate.subject && <Button variant="outline" onClick={handleCancel}>Cancel</Button>}
                     <Button onClick={handleSave}>Save Changes</Button>
                 </div>
             )}
@@ -125,7 +134,10 @@ export default function EmailTemplatesPage() {
         </CardHeader>
         <CardContent>
           {isLoading ? (
-            <p>Loading template...</p>
+            <div className="space-y-4">
+              <Skeleton className="h-8 w-1/3" />
+              <Skeleton className="h-[600px] w-full" />
+            </div>
           ) : isEditing ? (
             <div className="space-y-4">
               <div className="space-y-2">
@@ -142,10 +154,10 @@ export default function EmailTemplatesPage() {
                   id="body"
                   value={template.body}
                   onChange={(e) => setTemplate({ ...template, body: e.target.value })}
-                  className="h-64 font-mono"
+                  className="h-96 font-mono"
                 />
                  <p className="text-xs text-muted-foreground">
-                  Use placeholders like [User Name] and [EstimateDetails]. They will be replaced with actual values.
+                  Use placeholders like [User Name] and [EstimateDetails]. They will be replaced with actual values. HTML is supported.
                 </p>
               </div>
             </div>
diff --git a/src/lib/actions/email.ts b/src/lib/actions/email.ts
index 0162cc1..2b7fc64 100644
--- a/src/lib/actions/email.ts
+++ b/src/lib/actions/email.ts
@@ -30,7 +30,7 @@ export async function getEmailTemplate(): Promise<{ subject: string; body: strin
 }
 
 /**
- * Updates the email template in the database.
+ * Updates or creates the email template in the database.
  */
 export async function updateEmailTemplate(data: { subject: string; body: string }): Promise<{ success: boolean; message: string }> {
   const validation = emailTemplateSchema.safeParse(data);
@@ -42,12 +42,17 @@ export async function updateEmailTemplate(data: { subject: string; body: string
   const { subject, body } = validation.data;
 
   try {
-    const stmt = db.prepare('UPDATE email_templates SET subject = ?, body = ? WHERE id = ?');
-    // We assume we're updating the template with id = 1
-    const info = stmt.run(subject, body, 1);
-    
-    if (info.changes === 0) {
-      return { success: false, message: 'Could not find the template to update. No changes were made.' };
+    const checkStmt = db.prepare('SELECT id FROM email_templates WHERE id = 1');
+    const existing = checkStmt.get();
+
+    if (existing) {
+        // Update existing template
+        const stmt = db.prepare('UPDATE email_templates SET subject = ?, body = ? WHERE id = ?');
+        stmt.run(subject, body, 1);
+    } else {
+        // Insert new template
+        const stmt = db.prepare('INSERT INTO email_templates (id, subject, body) VALUES (?, ?, ?)');
+        stmt.run(1, subject, body);
     }
 
     revalidatePath('/admin/settings/email-templates');
