diff --git a/apps/web/src/pages/templates/[id].tsx b/apps/web/src/pages/templates/[id].tsx
index 1a23cd8..25b59a0 100644
--- a/apps/web/src/pages/templates/[id].tsx
+++ b/apps/web/src/pages/templates/[id].tsx
@@ -121,57 +121,35 @@ export default function TemplateEditorPage() {
   return (
     <DashboardLayout>
       <NextSeo title={template.name} />
-      <form onSubmit={handleSave} className={`max-w-5xl mx-auto space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
+      <div className={`space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
         {/* Header */}
-        <div className="space-y-4">
-          <div className="flex items-center gap-3 sm:gap-4">
-            <Button asChild variant="ghost" size="sm">
-              <Link href="/templates"><ArrowLeft className="h-4 w-4" /></Link>
-            </Button>
-            <div className="flex-1 min-w-0">
-              <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Edit Template</h1>
-              <p className="text-neutral-500 mt-1 text-sm sm:text-base">Make changes to your email template</p>
-            </div>
-          </div>
-          <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-            <div className="flex-1">
-              {!hasChanges && !isSubmitting && (
-                <span className="text-xs sm:text-sm text-neutral-500">All changes saved</span>
-              )}
-              {hasChanges && !isSubmitting && (
-                <span className="text-xs sm:text-sm text-amber-600">Unsaved changes</span>
-              )}
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                type="button"
-                variant="destructive"
-                onClick={() => setShowDeleteDialog(true)}
-                className="flex-1 sm:flex-none"
-              >
-                <Trash2 className="h-4 w-4" />
-                <span className="hidden sm:inline">Delete</span>
-              </Button>
-              <Button type="submit" disabled={!hasChanges || isSubmitting} className="flex-1 sm:flex-none">
-                <Save className="h-4 w-4" />
-                <span className="hidden sm:inline">{isSubmitting ? 'Saving...' : 'Save Changes'}</span>
-                <span className="sm:hidden">{isSubmitting ? 'Saving...' : 'Save'}</span>
-              </Button>
-            </div>
+        <div className="flex items-center gap-3 sm:gap-4">
+          <Button asChild variant="ghost" size="sm">
+            <Link href="/templates"><ArrowLeft className="h-4 w-4" /></Link>
+          </Button>
+          <div className="flex-1 min-w-0">
+            <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Edit Template</h1>
+            <p className="text-neutral-500 mt-1 text-sm sm:text-base">
+              {isSubmitting
+                ? 'Saving...'
+                : hasChanges
+                  ? <span className="text-amber-600">Unsaved changes</span>
+                  : 'All changes saved'}
+            </p>
           </div>
         </div>
 
-        {/* Template Editor */}
-        <div className="space-y-6">
-          {/* Template Settings */}
-          <Card>
+        <form onSubmit={handleSave} className="space-y-6">
+          {/* Row 1: Basic Info + Template Type */}
+          <div className="grid gap-6 md:grid-cols-2">
+            <Card>
               <CardHeader>
-                <CardTitle>Template Settings</CardTitle>
-                <CardDescription>Configure the basic settings for your template</CardDescription>
+                <CardTitle>Basic Information</CardTitle>
+                <CardDescription>Name and describe your template</CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="name">Template Name *</Label>
+                <div className="space-y-2">
+                  <Label htmlFor="name">Template Name <span className="text-red-500">*</span></Label>
                   <Input
                     id="name"
                     type="text"
@@ -182,7 +160,7 @@ export default function TemplateEditorPage() {
                   />
                 </div>
 
-                <div>
+                <div className="space-y-2">
                   <Label htmlFor="description">Description</Label>
                   <Input
                     id="description"
@@ -192,94 +170,124 @@ export default function TemplateEditorPage() {
                     placeholder="Sent to new subscribers"
                   />
                 </div>
-
-                <div>
-                  <Label>Type *</Label>
-                  <div className="flex flex-col gap-2 mt-2">
-                    {([
-                      {value: 'MARKETING', label: 'Marketing', description: 'Subscribed contacts, includes unsubscribe link'} ,
-                      {value: 'TRANSACTIONAL', label: 'Transactional', description: 'All contacts, no subscription check or footer'},
-                      {value: 'HEADLESS', label: 'Headless', description: 'Subscribed contacts, no Plunk footer'},
-                    ] as const).map(({value, label, description}) => (
-                      <button
-                        key={value}
-                        type="button"
-                        onClick={() => setEditedTemplate({...editedTemplate, type: value})}
-                        className={`flex items-center justify-between w-full min-h-[44px] px-4 py-3 rounded-lg border-2 text-left transition-colors ${
-                          editedTemplate.type === value
-                            ? 'border-neutral-900 bg-neutral-50'
-                            : 'border-neutral-200 hover:border-neutral-300'
-                        }`}
-                      >
-                        <span className="font-medium text-sm text-neutral-900 shrink-0">{label}</span>
-                        <span className="text-xs text-neutral-500 ml-4 text-right">{description}</span>
-                      </button>
-                    ))}
-                  </div>
-                  {editedTemplate.type === 'HEADLESS' && !detectUnsubscribeSignal(editedTemplate.body ?? '') && (
-                    <div className="mt-2 rounded-lg border border-amber-200 bg-amber-50 overflow-hidden">
-                      <div className="flex items-center gap-2 border-b border-amber-200 bg-amber-100/60 px-3 py-2">
-                        <TriangleAlert className="h-3.5 w-3.5 text-amber-600 shrink-0" />
-                        <p className="text-xs font-semibold text-amber-900">No unsubscribe link detected</p>
-                      </div>
-                      <div className="px-3 py-2.5 space-y-2">
-                        <p className="text-xs text-amber-800 leading-relaxed">
-                          You are responsible for providing recipients a way to opt out. Use the Plunk variables below to build your own footer.
-                        </p>
-                        <div className="flex flex-wrap gap-1.5">
-                          <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
-                            {'{{unsubscribeUrl}}'}
-                          </code>
-                          <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
-                            {'{{manageUrl}}'}
-                          </code>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-
-                <div>
-                  <Label htmlFor="subject">Subject Line *</Label>
-                  <Input
-                    id="subject"
-                    type="text"
-                    value={editedTemplate.subject || ''}
-                    onChange={e => setEditedTemplate({...editedTemplate, subject: e.target.value})}
-                    required
-                    placeholder="Welcome to our platform!"
-                  />
-                  <p className="text-xs text-neutral-500 mt-1">Use {'{{variableName}}'} for dynamic content</p>
-                </div>
-
-                <EmailSettings
-                  from={editedTemplate.from || ''}
-                  fromName={editedTemplate.fromName || ''}
-                  replyTo={editedTemplate.replyTo || ''}
-                  onFromChange={value => setEditedTemplate({...editedTemplate, from: value})}
-                  onFromNameChange={value => setEditedTemplate({...editedTemplate, fromName: value})}
-                  onReplyToChange={value => setEditedTemplate({...editedTemplate, replyTo: value})}
-                  fromNamePlaceholder={activeProject?.name || 'Your Company'}
-                  layout="vertical"
-                />
               </CardContent>
             </Card>
 
+            <Card>
+              <CardHeader>
+                <CardTitle>Template Type</CardTitle>
+                <CardDescription>Choose how this template should be treated</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-col gap-2">
+                  {([
+                    {value: 'MARKETING', label: 'Marketing', description: 'Subscribed contacts, includes unsubscribe link'},
+                    {value: 'TRANSACTIONAL', label: 'Transactional', description: 'All contacts, no subscription check or footer'},
+                    {value: 'HEADLESS', label: 'Headless', description: 'Subscribed contacts, no Plunk footer'},
+                  ] as const).map(({value, label, description}) => (
+                    <button
+                      key={value}
+                      type="button"
+                      onClick={() => setEditedTemplate({...editedTemplate, type: value})}
+                      className={`flex items-center justify-between w-full min-h-[44px] px-4 py-3 rounded-lg border-2 text-left transition-colors ${
+                        editedTemplate.type === value
+                          ? 'border-neutral-900 bg-neutral-50'
+                          : 'border-neutral-200 hover:border-neutral-300'
+                      }`}
+                    >
+                      <span className="font-medium text-sm text-neutral-900 shrink-0">{label}</span>
+                      <span className="text-xs text-neutral-500 ml-4 text-right">{description}</span>
+                    </button>
+                  ))}
+                </div>
+                {editedTemplate.type === 'HEADLESS' && !detectUnsubscribeSignal(editedTemplate.body ?? '') && (
+                  <div className="mt-3 rounded-lg border border-amber-200 bg-amber-50 overflow-hidden">
+                    <div className="flex items-center gap-2 border-b border-amber-200 bg-amber-100/60 px-3 py-2">
+                      <TriangleAlert className="h-3.5 w-3.5 text-amber-600 shrink-0" />
+                      <p className="text-xs font-semibold text-amber-900">No unsubscribe link detected</p>
+                    </div>
+                    <div className="px-3 py-2.5 space-y-2">
+                      <p className="text-xs text-amber-800 leading-relaxed">
+                        You are responsible for providing recipients a way to opt out. Use the Plunk variables below to build your own footer.
+                      </p>
+                      <div className="flex flex-wrap gap-1.5">
+                        <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
+                          {'{{unsubscribeUrl}}'}
+                        </code>
+                        <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
+                          {'{{manageUrl}}'}
+                        </code>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Email Settings */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Email Settings</CardTitle>
+              <CardDescription>Configure sender information and subject</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="subject">Subject Line <span className="text-red-500">*</span></Label>
+                <Input
+                  id="subject"
+                  type="text"
+                  value={editedTemplate.subject || ''}
+                  onChange={e => setEditedTemplate({...editedTemplate, subject: e.target.value})}
+                  required
+                  placeholder="Welcome to our platform!"
+                />
+                <p className="text-xs text-neutral-500">Use {'{{variableName}}'} for dynamic content</p>
+              </div>
+
+              <EmailSettings
+                from={editedTemplate.from || ''}
+                fromName={editedTemplate.fromName || ''}
+                replyTo={editedTemplate.replyTo || ''}
+                onFromChange={value => setEditedTemplate({...editedTemplate, from: value})}
+                onFromNameChange={value => setEditedTemplate({...editedTemplate, fromName: value})}
+                onReplyToChange={value => setEditedTemplate({...editedTemplate, replyTo: value})}
+                fromNamePlaceholder={activeProject?.name || 'Your Company'}
+              />
+            </CardContent>
+          </Card>
+
           {/* Email Body */}
           <Card className="overflow-visible">
-              <CardHeader>
-                <CardTitle>Email Body</CardTitle>
-                <CardDescription>Create your email using the visual editor or paste custom HTML</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <EmailEditor
-                  value={editedTemplate.body || ''}
-                  onChange={body => setEditedTemplate({...editedTemplate, body})}
-                />
-              </CardContent>
-            </Card>
-        </div>
-      </form>
+            <CardHeader>
+              <CardTitle>Email Body</CardTitle>
+              <CardDescription>Create your email using the visual editor or paste custom HTML</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <EmailEditor
+                value={editedTemplate.body || ''}
+                onChange={body => setEditedTemplate({...editedTemplate, body})}
+              />
+            </CardContent>
+          </Card>
+
+          {/* Actions */}
+          <div className="flex justify-between gap-3">
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => setShowDeleteDialog(true)}
+            >
+              <Trash2 className="h-4 w-4" />
+              Delete Template
+            </Button>
+            <Button type="submit" disabled={!hasChanges || isSubmitting}>
+              <Save className="h-4 w-4" />
+              {isSubmitting ? 'Saving...' : 'Save Changes'}
+            </Button>
+          </div>
+        </form>
+      </div>
 
       {/* Sticky Save Bar */}
       <StickySaveBar status={isSubmitting ? 'saving' : hasChanges ? 'dirty' : 'idle'} onSave={handleSave} />