diff --git a/src/components/applications/MasterPage.tsx b/src/components/applications/MasterPage.tsx
index 6511391..bce53d1 100644
--- a/src/components/applications/MasterPage.tsx
+++ b/src/components/applications/MasterPage.tsx
@@ -353,8 +353,9 @@ export const MasterPage: React.FC = () => {
     setPreviewLoading(true);
     try {
         const res = await masterService.previewEmailTemplate({ 
-            template: editingTemplate, 
-            testData: JSON.parse(testDataInput) 
+            subject: editingTemplate?.subject,
+            body: editingTemplate?.body,
+            data: JSON.parse(testDataInput) 
         }) as any;
         if (res.success) setPreviewContent(res.data);
     } catch (error) { toast.error('Preview failed'); }
@@ -516,8 +517,27 @@ export const MasterPage: React.FC = () => {
           </TabsContent>
 
           <TabsContent value="templates" className="animate-in fade-in duration-300">
-            <EmailTemplates onAddTemplate={() => setShowTemplateDialog(true)}
-              onEditTemplate={() => toast.info('Template Editor being updated')} onDeleteTemplate={() => toast.error('Delete Template restricted')} />
+            <EmailTemplates 
+              onAddTemplate={() => {
+                setEditingTemplate({ templateCode: '', subject: '', body: '', description: '', placeholders: [] });
+                setTestDataInput('{}');
+                setShowTemplateDialog(true);
+              }}
+              onEditTemplate={(template) => {
+                setEditingTemplate(template);
+                if (template.placeholders && Array.isArray(template.placeholders)) {
+                  const defaults = template.placeholders.reduce((acc: any, p: string) => {
+                    acc[p] = `[${p}]`;
+                    return acc;
+                  }, {});
+                  setTestDataInput(JSON.stringify(defaults, null, 2));
+                } else {
+                  setTestDataInput('{}');
+                }
+                setShowTemplateDialog(true);
+              }} 
+              onDeleteTemplate={() => toast.error('Delete Template restricted')} 
+            />
           </TabsContent>
 
           <TabsContent value="locations" className="animate-in fade-in duration-300">
diff --git a/src/components/applications/MasterPage/TemplateDialog.tsx b/src/components/applications/MasterPage/TemplateDialog.tsx
index fb7ff83..996c95e 100644
--- a/src/components/applications/MasterPage/TemplateDialog.tsx
+++ b/src/components/applications/MasterPage/TemplateDialog.tsx
@@ -5,7 +5,8 @@ import { Label } from '../../ui/label';
 import { Input } from '../../ui/input';
 import { Textarea } from '../../ui/textarea';
 import { Switch } from '../../ui/switch';
-import { Loader2, Play } from 'lucide-react';
+import { Loader2, Play, Info, Copy, CheckCircle2, Settings, Edit2 } from 'lucide-react';
+import { Badge } from '../../ui/badge';
 
 interface TemplateDialogProps {
   isOpen: boolean;
@@ -25,6 +26,26 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
   testDataInput, setTestDataInput, previewLoading, handlePreviewTemplate, 
   previewContent, handleSaveTemplate
 }) => {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const insertPlaceholder = (placeholder: string) => {
+    if (!textareaRef.current) return;
+    const { selectionStart, selectionEnd } = textareaRef.current;
+    const text = editingTemplate?.body || '';
+    const newText = text.substring(0, selectionStart) + `{{${placeholder}}}` + text.substring(selectionEnd);
+    setEditingTemplate({ ...editingTemplate!, body: newText });
+    
+    // Set focus back and move cursor
+    setTimeout(() => {
+      if (textareaRef.current) {
+        textareaRef.current.focus();
+        textareaRef.current.setSelectionRange(selectionStart + placeholder.length + 4, selectionStart + placeholder.length + 4);
+      }
+    }, 0);
+  };
+
+  const placeholders = editingTemplate?.placeholders || [];
+
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-7xl w-full max-h-[95vh] overflow-y-auto">
@@ -33,88 +54,194 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
           <DialogDescription>Configure automated email template with dynamic content</DialogDescription>
         </DialogHeader>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <div className="space-y-4">
-            <div>
-              <Label>Template Name</Label>
-              <Input
-                placeholder="e.g., Application Received"
-                className="mt-2 text-slate-900"
-                value={editingTemplate?.name || ''}
-                onChange={(e) => setEditingTemplate({ ...editingTemplate!, name: e.target.value })}
-              />
-            </div>
-            <div>
-              <Label>Template Code (Unique)</Label>
-              <Input
-                placeholder="e.g., APPLICATION_RECEIVED"
-                className="mt-2 text-slate-900"
-                value={editingTemplate?.templateCode || ''}
-                onChange={(e) => setEditingTemplate({ ...editingTemplate!, templateCode: e.target.value })}
-              />
-            </div>
-            <div>
-              <Label>Email Subject</Label>
-              <Input
-                placeholder="Subject line with {{variables}}"
-                className="mt-2 text-slate-900"
-                value={editingTemplate?.subject || ''}
-                onChange={(e) => setEditingTemplate({ ...editingTemplate!, subject: e.target.value })}
-              />
-            </div>
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+          {/* Left Column: Template Configuration */}
+          <div className="lg:col-span-4 space-y-6">
+            <div className="space-y-4">
+              <div className="bg-slate-50 p-4 rounded-lg border border-slate-200 space-y-4">
+                <h3 className="text-sm font-semibold text-slate-800 flex items-center gap-2">
+                  <Settings className="w-4 h-4 text-amber-600" />
+                  General Settings
+                </h3>
+                <div>
+                  <Label className="text-xs uppercase tracking-wider text-slate-500">Template Name</Label>
+                  <Input
+                    placeholder="e.g., Application Received"
+                    className="mt-1.5 bg-white"
+                    value={editingTemplate?.name || ''}
+                    onChange={(e) => setEditingTemplate({ ...editingTemplate!, name: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <Label className="text-xs uppercase tracking-wider text-slate-500">Trigger Code</Label>
+                  <Input
+                    placeholder="e.g., APPLICATION_RECEIVED"
+                    className="mt-1.5 bg-white font-mono text-xs"
+                    value={editingTemplate?.templateCode || ''}
+                    onChange={(e) => setEditingTemplate({ ...editingTemplate!, templateCode: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <Label className="text-xs uppercase tracking-wider text-slate-500">Description</Label>
+                  <Input
+                    placeholder="Brief purpose of this email"
+                    className="mt-1.5 bg-white"
+                    value={editingTemplate?.description || ''}
+                    onChange={(e) => setEditingTemplate({ ...editingTemplate!, description: e.target.value })}
+                  />
+                </div>
+                <div className="flex items-center justify-between pt-2 border-t mt-2">
+                  <div className="flex items-center space-x-2">
+                    <Switch
+                      id="active"
+                      checked={editingTemplate?.isActive ?? true}
+                      onCheckedChange={(checked) => setEditingTemplate({ ...editingTemplate!, isActive: checked })}
+                    />
+                    <Label htmlFor="active" className="text-sm cursor-pointer">Active</Label>
+                  </div>
+                  <Badge className={editingTemplate?.isActive ? "bg-green-100 text-green-700" : "bg-slate-100 text-slate-500"}>
+                    {editingTemplate?.isActive ? 'Template Enabled' : 'Template Disabled'}
+                  </Badge>
+                </div>
+              </div>
 
-            <div>
-              <Label>Email Body (Handlebars supported)</Label>
-              <Textarea
-                placeholder="Hello {{applicant_name}}, ..."
-                className="mt-2 font-mono text-sm text-slate-900"
-                rows={12}
-                value={editingTemplate?.body || ''}
-                onChange={(e) => setEditingTemplate({ ...editingTemplate!, body: e.target.value })}
-              />
-            </div>
-            <div className="flex items-center space-x-2">
-              <Switch
-                id="active"
-                checked={editingTemplate?.isActive ?? true}
-                onCheckedChange={(checked) => setEditingTemplate({ ...editingTemplate!, isActive: checked })}
-              />
-              <Label htmlFor="active">Active template</Label>
+              {/* Placeholders Library */}
+              <div className="bg-amber-50 p-4 rounded-lg border border-amber-100">
+                <h3 className="text-sm font-semibold text-amber-900 flex items-center gap-2 mb-3">
+                  <Info className="w-4 h-4" />
+                  Available Placeholders
+                </h3>
+                <p className="text-[10px] text-amber-700 mb-4 leading-relaxed">
+                  Click on a placeholder below to insert it at your current cursor position in the editor.
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {placeholders.length > 0 ? placeholders.map((p: string) => (
+                    <button
+                      key={p}
+                      onClick={() => insertPlaceholder(p)}
+                      className="px-2 py-1 bg-white border border-amber-200 rounded text-[11px] font-mono text-amber-800 hover:bg-amber-600 hover:text-white hover:border-amber-600 transition-all flex items-center gap-1 shadow-sm"
+                    >
+                      {`{{${p}}}`}
+                    </button>
+                  )) : (
+                    <div className="w-full py-4 text-center border-2 border-dashed border-amber-200 rounded-lg">
+                       <p className="text-[10px] text-amber-600">No placeholders defined for this trigger</p>
+                    </div>
+                  )}
+                </div>
+              </div>
             </div>
           </div>
 
-          <div className="space-y-4 lg:border-l lg:pl-6">
-            <h3 className="font-semibold text-slate-900">Preview & Test</h3>
-            <div>
-              <Label>Test Data (JSON)</Label>
-              <Textarea
-                placeholder='{"applicant_name": "John Doe"}'
-                className="mt-2 font-mono text-xs text-slate-900"
-                rows={6}
-                value={testDataInput}
-                onChange={(e) => setTestDataInput(e.target.value)}
-              />
+          {/* Middle Column: Editor */}
+          <div className="lg:col-span-4 space-y-4 flex flex-col h-full min-h-[600px]">
+            <div className="flex items-center justify-between">
+              <h3 className="font-semibold text-slate-900 flex items-center gap-2">
+                <Edit2 className="w-4 h-4 text-amber-600" />
+                Template Designer
+              </h3>
             </div>
-            <Button
-              variant="secondary"
-              className="w-full"
-              onClick={handlePreviewTemplate}
-              disabled={previewLoading}
-            >
-              {previewLoading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Play className="w-4 h-4 mr-2" />}
-              Generate Preview
-            </Button>
+            
+            <div className="flex-1 flex flex-col space-y-4">
+              <div>
+                <Label className="text-xs font-semibold">Subject Line</Label>
+                <Input
+                  placeholder="Subject line with {{variables}}"
+                  className="mt-1.5 text-slate-900 font-medium"
+                  value={editingTemplate?.subject || ''}
+                  onChange={(e) => setEditingTemplate({ ...editingTemplate!, subject: e.target.value })}
+                />
+              </div>
 
-            {previewContent && (
-              <div className="mt-4 border rounded-lg overflow-hidden flex flex-col max-h-[500px]">
-                <div className="bg-slate-100 p-2 border-b text-xs font-mono text-slate-500 shrink-0">
-                  Subject: {previewContent.subject}
-                </div>
-                <div className="p-4 bg-white prose prose-sm max-w-none overflow-auto flex-1">
-                  <div dangerouslySetInnerHTML={{ __html: previewContent.html }} />
+              <div className="flex-1 flex flex-col">
+                <Label className="text-xs font-semibold mb-1.5">Email Body (HTML/Handlebars)</Label>
+                <div className="relative flex-1">
+                  <Textarea
+                    ref={textareaRef}
+                    placeholder="Hello {{applicant_name}}, ..."
+                    className="h-full min-h-[450px] font-mono text-sm text-slate-900 bg-slate-900/5 focus:bg-white transition-colors p-4 resize-none"
+                    value={editingTemplate?.body || ''}
+                    onChange={(e) => setEditingTemplate({ ...editingTemplate!, body: e.target.value })}
+                  />
+                  <div className="absolute bottom-3 right-3 opacity-30 pointer-events-none text-[10px] font-mono">
+                    HTML Support Enabled
+                  </div>
                 </div>
               </div>
-            )}
+            </div>
+          </div>
+
+          {/* Right Column: Preview & Simulation */}
+          <div className="lg:col-span-4 space-y-6 lg:border-l lg:pl-8 flex flex-col h-full">
+            <div>
+              <h3 className="font-semibold text-slate-900 flex items-center gap-2 mb-4">
+                <Play className="w-4 h-4 text-green-600" />
+                Live Simulation
+              </h3>
+              
+              <div className="space-y-4">
+                <div>
+                  <div className="flex items-center justify-between mb-1.5">
+                    <Label className="text-xs font-semibold">Mock Test Data (JSON)</Label>
+                    <button 
+                      onClick={() => setTestDataInput('{"applicantName": "Rajesh Kumar", "location": "Mumbai South", "applicationId": "APP-2026-X12"}')}
+                      className="text-[10px] text-amber-600 hover:underline"
+                    >
+                      Reset to Sample
+                    </button>
+                  </div>
+                  <Textarea
+                    placeholder='{"applicant_name": "John Doe"}'
+                    className="font-mono text-[11px] text-slate-900 bg-slate-50"
+                    rows={6}
+                    value={testDataInput}
+                    onChange={(e) => setTestDataInput(e.target.value)}
+                  />
+                </div>
+                
+                <Button
+                  variant="default"
+                  className="w-full bg-green-600 hover:bg-green-700 shadow-md"
+                  onClick={handlePreviewTemplate}
+                  disabled={previewLoading}
+                >
+                  {previewLoading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Play className="w-4 h-4 mr-2" />}
+                  Generate Mock Preview
+                </Button>
+              </div>
+            </div>
+
+            <div className="flex-1 flex flex-col">
+              <Label className="text-xs font-semibold mb-2">Simulated Output</Label>
+              <div className="flex-1 border rounded-xl overflow-hidden flex flex-col bg-slate-50 shadow-inner">
+                {previewContent ? (
+                  <>
+                    <div className="bg-white p-3 border-b text-[11px] font-semibold text-slate-700 flex items-center justify-between">
+                      <div className="truncate shrink">
+                        <span className="text-slate-400 mr-2">Subject:</span> {previewContent.subject}
+                      </div>
+                      <Badge variant="outline" className="bg-green-50 text-green-600 text-[9px] whitespace-nowrap ml-2">
+                        <CheckCircle2 className="w-3 h-3 mr-1" /> Compiled
+                      </Badge>
+                    </div>
+                    <div className="p-6 bg-white overflow-auto flex-1 shadow-sm">
+                      <div className="max-w-none text-sm text-slate-800 email-preview-container" 
+                           dangerouslySetInnerHTML={{ __html: previewContent.html }} />
+                    </div>
+                  </>
+                ) : (
+                  <div className="flex-1 flex flex-col items-center justify-center p-8 text-center text-slate-400 space-y-3">
+                    <div className="w-16 h-16 rounded-full bg-slate-100 flex items-center justify-center">
+                      <Play className="w-8 h-8 opacity-20" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-slate-500">Ready for Preview</p>
+                      <p className="text-[11px]">Click "Generate Mock Preview" to see how your placeholders resolve with the test data.</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
         </div>