diff --git a/components/TemplateEditor.tsx b/components/TemplateEditor.tsx
index 9ab42aa..46f68ad 100644
--- a/components/TemplateEditor.tsx
+++ b/components/TemplateEditor.tsx
@@ -161,7 +161,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
   return (
     <div className="flex flex-col h-screen bg-slate-50">
       {/* Top Bar */}
-      <header className="bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between sticky top-0 z-20">
+      <header className="bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between sticky top-0 z-20 shrink-0">
         <div className="flex items-center gap-4">
           <button onClick={onBack} className="p-2 hover:bg-slate-100 rounded-full text-slate-500">
             <ArrowLeft size={20} />
@@ -288,8 +288,8 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
         </div>
 
         {/* Right: Live Preview */}
-        <div className="w-1/2 bg-slate-100 flex flex-col">
-          <div className="p-3 bg-white border-b border-slate-200 flex justify-between items-center shadow-sm z-10">
+        <div className="w-1/2 bg-slate-100 flex flex-col overflow-hidden">
+          <div className="p-3 bg-white border-b border-slate-200 flex justify-between items-center shadow-sm z-10 shrink-0">
             <span className="font-semibold text-slate-600 flex items-center gap-2">
               <Eye size={18} /> Live Preview
             </span>
@@ -297,8 +297,10 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
               Renders as standard HTML
             </div>
           </div>
-          <div className="flex-1 p-8 overflow-y-auto custom-scrollbar flex justify-center">
-            <div className="w-full max-w-2xl bg-white shadow-xl rounded-lg overflow-hidden min-h-[600px] flex flex-col">
+          {/* Scrollable container: flex-1 ensures it takes available space, overflow-y-auto enables scrolling */}
+          <div className="flex-1 p-8 overflow-y-auto custom-scrollbar">
+            {/* mx-auto centers the card without using flexbox on the parent which can cause scroll issues */}
+            <div className="w-full max-w-2xl bg-white shadow-xl rounded-lg overflow-hidden min-h-[600px] flex flex-col mx-auto">
                {/* Simulate Subject Line in Preview */}
                <div className="bg-slate-50 border-b border-slate-100 p-4">
                   <span className="text-xs font-bold text-slate-400 uppercase">Subject:</span>