diff --git a/src/App.tsx b/src/App.tsx
index ffa3263..5cc0958 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,10 +28,13 @@ export default function App() {
     return initDataForTemplate(template?.variables ?? [])
   })
 
-  useEffect(() => {
-    if (!template) return
-    setData(initDataForTemplate(template.variables))
-  }, [templateId])
+  const handleTemplateChange = (nextId: string) => {
+    setTemplateId(nextId)
+
+    // Update variables immediately so the preview/exports switch reliably.
+    const nextTemplate = templates.find((t) => t.id === nextId)
+    if (nextTemplate) setData(initDataForTemplate(nextTemplate.variables))
+  }
 
   const subject = useMemo(() => {
     if (!template) return ''
@@ -116,12 +119,16 @@ export default function App() {
           </div>
         </header>
 
+        <div style={{ ...styles.card, padding: 12 }}>
+          <TemplatePicker templates={templates} value={templateId} onChange={handleTemplateChange} />
+        </div>
+
         <div style={styles.grid}>
           <aside style={styles.card}>
             <div style={{ display: 'grid', gap: 14 }}>
               <BrandEditor brand={brand} onChange={setBrand} />
-              <TemplatePicker templates={templates} value={templateId} onChange={setTemplateId} />
-              {template ? <VariablesForm template={template} data={data} onChange={setData} /> : null}
+              <TemplatePicker templates={templates} value={templateId} onChange={handleTemplateChange} />
+              {template ? <VariablesForm key={templateId} template={template} data={data} onChange={setData} /> : null}
 
               <div style={{ display: 'grid', gap: 8 }}>
                 <div style={{ ...styles.sectionTitle, fontSize: 14 }}>Status</div>
@@ -139,9 +146,9 @@ export default function App() {
           <main style={styles.card}>
             {template ? (
               <div style={{ display: 'grid', gap: 16 }}>
-                <EmailPreview html={html} loading={loading} />
+                <EmailPreview key={templateId} html={html} loading={loading} />
 
-                <ExportPanel subject={subject} html={html} text={text} loading={loading} />
+                <ExportPanel key={templateId} subject={subject} html={html} text={text} loading={loading} />
               </div>
             ) : (
               <div>No template selected.</div>