diff --git a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
index d1f8f48..e5c73d6 100644
--- a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
@@ -34,6 +34,7 @@ export default function EditTemplate() {
   const [body, setBody] = useState('');
   const [variables, setVariables] = useState<{ [key: string]: string }>({});
   const [activeTab, setActiveTab] = useState('editor');
+  const [codeMode, setCodeMode] = useState(false);
 
   // Fetch template
   const { data: template, isLoading } = useQuery({
@@ -46,7 +47,8 @@ export default function EditTemplate() {
   });
 
   useEffect(() => {
-    if (template) {
+    if (template && template.subject !== undefined && template.body !== undefined) {
+      console.log('Setting template data:', template);
       setSubject(template.subject || '');
       setBody(template.body || '');
       setVariables(template.variables || {});
@@ -184,33 +186,34 @@ export default function EditTemplate() {
 
   return (
     <SettingsLayout
-      title={template?.event_label || __('Edit Template')}
-      description={`${template?.channel_label} - ${__('Customize the notification template. Use variables like {customer_name} to personalize messages.')}`}
-      onSave={handleSave}
-      saveLabel={__('Save Template')}
-      isLoading={isLoading}
-      action={
+      title={
         <div className="flex items-center gap-2">
           <Button
             variant="ghost"
             size="sm"
             onClick={() => navigate(-1)}
-            className="gap-2"
+            className="-ml-2 px-2"
           >
-            <ArrowLeft className="h-4 w-4" />
-            {__('Back')}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleReset}
-            className="gap-2"
-          >
-            <RotateCcw className="h-4 w-4" />
-            {__('Reset to Default')}
+            <ArrowLeft className="h-5 w-5" />
           </Button>
+          <span>{template?.event_label || __('Edit Template')}</span>
         </div>
       }
+      description={`${template?.channel_label || ''} - ${__('Customize the notification template. Use variables like {customer_name} to personalize messages.')}`}
+      onSave={handleSave}
+      saveLabel={__('Save Template')}
+      isLoading={isLoading}
+      action={
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleReset}
+          className="gap-2"
+        >
+          <RotateCcw className="h-4 w-4" />
+          {__('Reset to Default')}
+        </Button>
+      }
     >
       {/* Tabs - Sticky in header area */}
       <div className="-mt-6 mb-6 sticky top-0 z-10 bg-background pb-4">
@@ -250,15 +253,38 @@ export default function EditTemplate() {
 
             {/* Body */}
             <div className="space-y-2">
-              <Label htmlFor="body">{__('Message Body')}</Label>
-              <RichTextEditor
-                content={body}
-                onChange={setBody}
-                placeholder={__('Enter notification message')}
-                variables={variableKeys}
-              />
+              <div className="flex items-center justify-between">
+                <Label htmlFor="body">{__('Message Body')}</Label>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setCodeMode(!codeMode)}
+                  className="h-8 text-xs"
+                >
+                  {codeMode ? __('Visual Editor') : __('Code Mode')}
+                </Button>
+              </div>
+              
+              {codeMode ? (
+                <textarea
+                  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"
+                  placeholder={__('Enter HTML code...')}
+                />
+              ) : (
+                <RichTextEditor
+                  content={body}
+                  onChange={setBody}
+                  placeholder={__('Enter notification message')}
+                  variables={variableKeys}
+                />
+              )}
+              
               <p className="text-xs text-muted-foreground">
-                {__('Use the toolbar to format text and insert variables.')}
+                {codeMode 
+                  ? __('Edit raw HTML code. Switch to Visual Editor for WYSIWYG editing.')
+                  : __('Use the toolbar to format text and insert variables.')}
               </p>
             </div>
           </CardContent>
diff --git a/admin-spa/src/routes/Settings/components/SettingsLayout.tsx b/admin-spa/src/routes/Settings/components/SettingsLayout.tsx
index 66d75eb..57ab973 100644
--- a/admin-spa/src/routes/Settings/components/SettingsLayout.tsx
+++ b/admin-spa/src/routes/Settings/components/SettingsLayout.tsx
@@ -4,7 +4,7 @@ import { Loader2 } from 'lucide-react';
 import { usePageHeader } from '@/contexts/PageHeaderContext';
 
 interface SettingsLayoutProps {
-  title: string;
+  title: string | React.ReactNode;
   description?: string;
   children: React.ReactNode;
   onSave?: () => Promise<void>;
@@ -38,9 +38,12 @@ export function SettingsLayout({
   // Set page header ONLY when there's an action (Save button or custom action)
   // This saves vertical space on pages without actions
   useEffect(() => {
+    // Extract string title if it's a ReactNode
+    const titleString = typeof title === 'string' ? title : '';
+    
     if (onSave) {
       setPageHeader(
-        title,
+        titleString,
         <Button
           onClick={handleSave}
           disabled={isSaving || isLoading}
@@ -58,7 +61,7 @@ export function SettingsLayout({
       );
     } else if (action) {
       // If there's a custom action, use it
-      setPageHeader(title, action);
+      setPageHeader(titleString, action);
     } else {
       // No action = no header (save vertical space)
       clearPageHeader();