diff --git a/admin-spa/src/components/EmailBuilder/BlockRenderer.tsx b/admin-spa/src/components/EmailBuilder/BlockRenderer.tsx
index cbd93e2..024afa0 100644
--- a/admin-spa/src/components/EmailBuilder/BlockRenderer.tsx
+++ b/admin-spa/src/components/EmailBuilder/BlockRenderer.tsx
@@ -26,18 +26,6 @@ export function BlockRenderer({
   
   const renderBlockContent = () => {
     switch (block.type) {
-      case 'header':
-        return (
-          <div className="text-center">
-            <h1 className="text-2xl font-bold text-gray-900" dangerouslySetInnerHTML={{ __html: block.content }} />
-          </div>
-        );
-      
-      case 'text':
-        return (
-          <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: block.content }} />
-        );
-      
       case 'card':
         const cardStyles: { [key: string]: React.CSSProperties } = {
           default: {
diff --git a/admin-spa/src/components/EmailBuilder/EmailBuilder.tsx b/admin-spa/src/components/EmailBuilder/EmailBuilder.tsx
index 4d248b8..bf8e6cc 100644
--- a/admin-spa/src/components/EmailBuilder/EmailBuilder.tsx
+++ b/admin-spa/src/components/EmailBuilder/EmailBuilder.tsx
@@ -30,12 +30,8 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
     const newBlock: EmailBlock = (() => {
       const id = `block-${Date.now()}`;
       switch (type) {
-        case 'header':
-          return { id, type, content: '<h1>Header Title</h1>' };
-        case 'text':
-          return { id, type, content: '<p>Your text content here...</p>' };
         case 'card':
-          return { id, type, cardType: 'default', content: '<h2>Card Title</h2><p>Card content...</p>' };
+          return { id, type, cardType: 'default', content: '<h2>Card Title</h2><p>Your content here...</p>' };
         case 'button':
           return { id, type, text: 'Click Here', link: '{order_url}', style: 'solid' };
         case 'divider':
@@ -69,9 +65,7 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
   const openEditDialog = (block: EmailBlock) => {
     setEditingBlockId(block.id);
     
-    if (block.type === 'header' || block.type === 'text') {
-      setEditingContent(block.content);
-    } else if (block.type === 'card') {
+    if (block.type === 'card') {
       setEditingContent(block.content);
       setEditingCardType(block.cardType);
     } else if (block.type === 'button') {
@@ -89,11 +83,7 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
     const newBlocks = blocks.map(block => {
       if (block.id !== editingBlockId) return block;
       
-      if (block.type === 'header') {
-        return { ...block, content: editingContent };
-      } else if (block.type === 'text') {
-        return { ...block, content: editingContent };
-      } else if (block.type === 'card') {
+      if (block.type === 'card') {
         return { ...block, content: editingContent, cardType: editingCardType };
       } else if (block.type === 'button') {
         return { ...block, text: editingButtonText, link: editingButtonLink, style: editingButtonStyle };
@@ -116,26 +106,6 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
         <span className="text-xs font-medium text-muted-foreground flex items-center">
           {__('Add Block:')}
         </span>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={() => addBlock('header')}
-          className="h-7 text-xs gap-1"
-        >
-          <Type className="h-3 w-3" />
-          {__('Header')}
-        </Button>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={() => addBlock('text')}
-          className="h-7 text-xs gap-1"
-        >
-          <Type className="h-3 w-3" />
-          {__('Text')}
-        </Button>
         <Button
           type="button"
           variant="outline"
@@ -209,8 +179,6 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
         <DialogContent className="sm:max-w-2xl">
           <DialogHeader>
             <DialogTitle>
-              {editingBlock?.type === 'header' && __('Edit Header')}
-              {editingBlock?.type === 'text' && __('Edit Text')}
               {editingBlock?.type === 'card' && __('Edit Card')}
               {editingBlock?.type === 'button' && __('Edit Button')}
             </DialogTitle>
@@ -220,21 +188,6 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
           </DialogHeader>
 
           <div className="space-y-4 py-4">
-            {(editingBlock?.type === 'header' || editingBlock?.type === 'text') && (
-              <div className="space-y-2">
-                <Label htmlFor="content">{__('Content')}</Label>
-                <RichTextEditor
-                  content={editingContent}
-                  onChange={setEditingContent}
-                  placeholder={__('Enter your content...')}
-                  variables={variables}
-                />
-                <p className="text-xs text-muted-foreground">
-                  {__('Use the toolbar to format text. HTML will be generated automatically.')}
-                </p>
-              </div>
-            )}
-
             {editingBlock?.type === 'card' && (
               <>
                 <div className="space-y-2">
@@ -300,30 +253,6 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
                 </div>
               </>
             )}
-
-            {/* Variable Helper */}
-            {variables.length > 0 && (
-              <div className="pt-2 border-t">
-                <Label className="text-xs text-muted-foreground">{__('Available Variables:')}</Label>
-                <div className="flex flex-wrap gap-1 mt-2">
-                  {variables.map(variable => (
-                    <code
-                      key={variable}
-                      className="text-xs bg-muted px-2 py-1 rounded cursor-pointer hover:bg-muted/80"
-                      onClick={() => {
-                        if (editingBlock?.type === 'button') {
-                          setEditingButtonLink(editingButtonLink + `{${variable}}`);
-                        } else {
-                          setEditingContent(editingContent + `{${variable}}`);
-                        }
-                      }}
-                    >
-                      {`{${variable}}`}
-                    </code>
-                  ))}
-                </div>
-              </div>
-            )}
           </div>
 
           <DialogFooter>
diff --git a/admin-spa/src/components/EmailBuilder/converter.ts b/admin-spa/src/components/EmailBuilder/converter.ts
index d4d12b9..c4389af 100644
--- a/admin-spa/src/components/EmailBuilder/converter.ts
+++ b/admin-spa/src/components/EmailBuilder/converter.ts
@@ -6,12 +6,6 @@ import { EmailBlock } from './types';
 export function blocksToHTML(blocks: EmailBlock[]): string {
   return blocks.map(block => {
     switch (block.type) {
-      case 'header':
-        return `[card]\n${block.content}\n[/card]`;
-      
-      case 'text':
-        return `[card]\n${block.content}\n[/card]`;
-      
       case 'card':
         if (block.cardType === 'default') {
           return `[card]\n${block.content}\n[/card]`;
@@ -20,13 +14,13 @@ export function blocksToHTML(blocks: EmailBlock[]): string {
       
       case 'button':
         const buttonClass = block.style === 'solid' ? 'button' : 'button-outline';
-        return `[card]\n<p style="text-align: center;"><a href="${block.link}" class="${buttonClass}">${block.text}</a></p>\n[/card]`;
+        return `<p style="text-align: center;"><a href="${block.link}" class="${buttonClass}">${block.text}</a></p>`;
       
       case 'divider':
-        return `[card]\n<hr style="border: none; border-top: 1px solid #ddd; margin: 20px 0;" />\n[/card]`;
+        return `<hr style="border: none; border-top: 1px solid #ddd; margin: 20px 0;" />`;
       
       case 'spacer':
-        return `[card]\n<div style="height: ${block.height}px;"></div>\n[/card]`;
+        return `<div style="height: ${block.height}px;"></div>`;
       
       default:
         return '';
@@ -39,19 +33,56 @@ export function blocksToHTML(blocks: EmailBlock[]): string {
  */
 export function htmlToBlocks(html: string): EmailBlock[] {
   const blocks: EmailBlock[] = [];
-  const cardRegex = /\[card([^\]]*)\](.*?)\[\/card\]/gs;
-  
-  let match;
   let blockId = 0;
   
+  // Split by [card] tags and other elements
+  const cardRegex = /\[card([^\]]*)\](.*?)\[\/card\]/gs;
+  const parts: string[] = [];
+  let lastIndex = 0;
+  let match;
+  
   while ((match = cardRegex.exec(html)) !== null) {
-    const attributes = match[1];
-    const content = match[2].trim();
+    // Add content before card
+    if (match.index > lastIndex) {
+      const beforeContent = html.substring(lastIndex, match.index).trim();
+      if (beforeContent) parts.push(beforeContent);
+    }
+    
+    // Add card
+    parts.push(match[0]);
+    lastIndex = match.index + match[0].length;
+  }
+  
+  // Add remaining content
+  if (lastIndex < html.length) {
+    const remaining = html.substring(lastIndex).trim();
+    if (remaining) parts.push(remaining);
+  }
+  
+  // Process each part
+  for (const part of parts) {
     const id = `block-${Date.now()}-${blockId++}`;
     
+    // Check if it's a card
+    const cardMatch = part.match(/\[card([^\]]*)\](.*?)\[\/card\]/s);
+    if (cardMatch) {
+      const attributes = cardMatch[1];
+      const content = cardMatch[2].trim();
+      const typeMatch = attributes.match(/type=["']([^"']+)["']/);
+      const cardType = (typeMatch ? typeMatch[1] : 'default') as any;
+      
+      blocks.push({
+        id,
+        type: 'card',
+        cardType,
+        content
+      });
+      continue;
+    }
+    
     // Check if it's a button
-    if (content.includes('class="button"') || content.includes('class="button-outline"')) {
-      const buttonMatch = content.match(/<a[^>]*href="([^"]*)"[^>]*class="(button[^"]*)"[^>]*>([^<]*)<\/a>/);
+    if (part.includes('class="button"') || part.includes('class="button-outline"')) {
+      const buttonMatch = part.match(/<a[^>]*href="([^"]*)"[^>]*class="(button[^"]*)"[^>]*>([^<]*)<\/a>/);
       if (buttonMatch) {
         blocks.push({
           id,
@@ -65,48 +96,17 @@ export function htmlToBlocks(html: string): EmailBlock[] {
     }
     
     // Check if it's a divider
-    if (content.includes('<hr')) {
+    if (part.includes('<hr')) {
       blocks.push({ id, type: 'divider' });
       continue;
     }
     
     // Check if it's a spacer
-    const spacerMatch = content.match(/height:\s*(\d+)px/);
-    if (spacerMatch && content.includes('<div')) {
+    const spacerMatch = part.match(/height:\s*(\d+)px/);
+    if (spacerMatch && part.includes('<div')) {
       blocks.push({ id, type: 'spacer', height: parseInt(spacerMatch[1]) });
       continue;
     }
-    
-    // Check card type
-    const typeMatch = attributes.match(/type=["']([^"']+)["']/);
-    const cardType = typeMatch ? typeMatch[1] : 'default';
-    
-    // Check if it's a header (h1)
-    if (content.match(/<h1[^>]*>/)) {
-      blocks.push({ id, type: 'header', content });
-      continue;
-    }
-    
-    // Check if it has card type or is just text
-    if (cardType !== 'default') {
-      blocks.push({
-        id,
-        type: 'card',
-        cardType: cardType as any,
-        content
-      });
-    } else if (content.match(/<h[2-6][^>]*>/)) {
-      // Has heading, treat as card
-      blocks.push({
-        id,
-        type: 'card',
-        cardType: 'default',
-        content
-      });
-    } else {
-      // Plain text
-      blocks.push({ id, type: 'text', content });
-    }
   }
   
   return blocks;
diff --git a/admin-spa/src/components/EmailBuilder/types.ts b/admin-spa/src/components/EmailBuilder/types.ts
index b4c2e8f..e777503 100644
--- a/admin-spa/src/components/EmailBuilder/types.ts
+++ b/admin-spa/src/components/EmailBuilder/types.ts
@@ -1,4 +1,4 @@
-export type BlockType = 'header' | 'text' | 'card' | 'button' | 'divider' | 'spacer';
+export type BlockType = 'card' | 'button' | 'divider' | 'spacer';
 
 export type CardType = 'default' | 'success' | 'info' | 'warning' | 'hero';
 
@@ -9,16 +9,6 @@ export interface BaseBlock {
   type: BlockType;
 }
 
-export interface HeaderBlock extends BaseBlock {
-  type: 'header';
-  content: string;
-}
-
-export interface TextBlock extends BaseBlock {
-  type: 'text';
-  content: string;
-}
-
 export interface CardBlock extends BaseBlock {
   type: 'card';
   cardType: CardType;
@@ -42,7 +32,7 @@ export interface SpacerBlock extends BaseBlock {
   height: number;
 }
 
-export type EmailBlock = HeaderBlock | TextBlock | CardBlock | ButtonBlock | DividerBlock | SpacerBlock;
+export type EmailBlock = CardBlock | ButtonBlock | DividerBlock | SpacerBlock;
 
 export interface EmailTemplate {
   blocks: EmailBlock[];
diff --git a/admin-spa/src/components/ui/code-editor.tsx b/admin-spa/src/components/ui/code-editor.tsx
new file mode 100644
index 0000000..bb54c07
--- /dev/null
+++ b/admin-spa/src/components/ui/code-editor.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect, useRef } from 'react';
+import { EditorView, basicSetup } from 'codemirror';
+import { html } from '@codemirror/lang-html';
+import { oneDark } from '@codemirror/theme-one-dark';
+
+interface CodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function CodeEditor({ value, onChange, placeholder }: CodeEditorProps) {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+
+    const view = new EditorView({
+      doc: value,
+      extensions: [
+        basicSetup,
+        html(),
+        oneDark,
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            onChange(update.state.doc.toString());
+          }
+        }),
+      ],
+      parent: editorRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+    };
+  }, []);
+
+  // Update editor when value prop changes
+  useEffect(() => {
+    if (viewRef.current && value !== viewRef.current.state.doc.toString()) {
+      viewRef.current.dispatch({
+        changes: {
+          from: 0,
+          to: viewRef.current.state.doc.length,
+          insert: value,
+        },
+      });
+    }
+  }, [value]);
+
+  return (
+    <div 
+      ref={editorRef} 
+      className="border rounded-md overflow-hidden min-h-[400px] font-mono text-sm"
+    />
+  );
+}
diff --git a/admin-spa/src/components/ui/rich-text-editor.tsx b/admin-spa/src/components/ui/rich-text-editor.tsx
index 1405178..e9a71c9 100644
--- a/admin-spa/src/components/ui/rich-text-editor.tsx
+++ b/admin-spa/src/components/ui/rich-text-editor.tsx
@@ -1,14 +1,20 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Placeholder from '@tiptap/extension-placeholder';
 import Link from '@tiptap/extension-link';
+import TextAlign from '@tiptap/extension-text-align';
+import Image from '@tiptap/extension-image';
 import {
   Bold,
   Italic,
   List,
   ListOrdered,
   Link as LinkIcon,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  ImageIcon,
   Undo,
   Redo,
 } from 'lucide-react';
@@ -42,6 +48,15 @@ export function RichTextEditor({
           class: 'text-primary underline',
         },
       }),
+      TextAlign.configure({
+        types: ['heading', 'paragraph'],
+      }),
+      Image.configure({
+        inline: true,
+        HTMLAttributes: {
+          class: 'max-w-full h-auto rounded',
+        },
+      }),
     ],
     content,
     onUpdate: ({ editor }) => {
@@ -85,6 +100,13 @@ export function RichTextEditor({
     }
   };
 
+  const addImage = () => {
+    const url = window.prompt(__('Enter image URL:'));
+    if (url) {
+      editor.chain().focus().setImage({ src: url }).run();
+    }
+  };
+
   return (
     <div className="border rounded-lg overflow-hidden">
       {/* Toolbar */}
@@ -137,6 +159,43 @@ export function RichTextEditor({
           <LinkIcon className="h-4 w-4" />
         </Button>
         <div className="w-px h-6 bg-border mx-1" />
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => editor.chain().focus().setTextAlign('left').run()}
+          className={editor.isActive({ textAlign: 'left' }) ? 'bg-accent' : ''}
+        >
+          <AlignLeft className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => editor.chain().focus().setTextAlign('center').run()}
+          className={editor.isActive({ textAlign: 'center' }) ? 'bg-accent' : ''}
+        >
+          <AlignCenter className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => editor.chain().focus().setTextAlign('right').run()}
+          className={editor.isActive({ textAlign: 'right' }) ? 'bg-accent' : ''}
+        >
+          <AlignRight className="h-4 w-4" />
+        </Button>
+        <div className="w-px h-6 bg-border mx-1" />
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={addImage}
+        >
+          <ImageIcon className="h-4 w-4" />
+        </Button>
+        <div className="w-px h-6 bg-border mx-1" />
         <Button
           type="button"
           variant="ghost"
@@ -174,7 +233,7 @@ export function RichTextEditor({
                 variant="outline"
                 size="sm"
                 onClick={() => insertVariable(variable)}
-                className="text-xs h-7"
+                className="!font-normal !text-xs !px-2"
               >
                 {`{${variable}}`}
               </Button>
diff --git a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
index 2c78777..ae3f69d 100644
--- a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
@@ -7,6 +7,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { EmailBuilder, EmailBlock, blocksToHTML, htmlToBlocks } from '@/components/EmailBuilder';
+import { CodeEditor } from '@/components/ui/code-editor';
 import { Label } from '@/components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ArrowLeft, Eye, Edit, RotateCcw } from 'lucide-react';
@@ -368,14 +369,13 @@ export default function EditTemplate() {
               
               {activeTab === 'editor' && codeMode ? (
                 <div className="space-y-2">
-                  <textarea
+                  <CodeEditor
                     value={body}
-                    onChange={(e) => setBody(e.target.value)}
-                    className="w-full min-h-[400px] p-4 font-mono text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+                    onChange={setBody}
                     placeholder={__('Enter HTML code with [card] tags...')}
                   />
                   <p className="text-xs text-muted-foreground">
-                    {__('Edit raw HTML code with [card] syntax. Switch to Visual Builder for drag-and-drop editing.')}
+                    {__('Edit raw HTML code with [card] syntax. Syntax highlighting and auto-completion enabled.')}
                   </p>
                 </div>
               ) : activeTab === 'editor' ? (