diff --git a/docengine/app/services/document_service.py b/docengine/app/services/document_service.py
index 4f2e36d..60f1998 100644
--- a/docengine/app/services/document_service.py
+++ b/docengine/app/services/document_service.py
@@ -54,10 +54,12 @@ class DocumentProcessingService:
 
             # Step 2: Analyze layout
             layout_results = self.layout_service.analyze_document_layout(document)
-            document.document_metadata = document.document_metadata or {}
-            document.document_metadata["layout"] = layout_results
+            metadata = document.document_metadata or {}
+            metadata["layout"] = layout_results
+            document.document_metadata = metadata
 
             # Step 3: Generate template
+            self.db.refresh(document)
             template = self.template_service.generate_template(document)
 
             # Step 4: Update document status
diff --git a/frontend/src/app/templates/templates.component.html b/frontend/src/app/templates/templates.component.html
index da5b998..c9f96b4 100644
--- a/frontend/src/app/templates/templates.component.html
+++ b/frontend/src/app/templates/templates.component.html
@@ -13,29 +13,34 @@
           </div>
         </div>
         
-        <div class="preview-area"
-             id="document-layout-list"
-             cdkDropList
-             [cdkDropListData]="layoutNodes"
-             [cdkDropListConnectedTo]="getConnectedDropLists()"
-             (cdkDropListDropped)="drop($event)">
-             
+        <div class="preview-area p-4" style="overflow-y: auto;">
           <div *ngIf="layoutNodes.length === 0" class="empty-state">
             <i class="pi pi-file-pdf text-4xl mb-3"></i>
             <p>Upload a document to view its extracted layout structure.</p>
           </div>
 
-          <div class="document-canvas" [style.aspect-ratio]="pageWidth + ' / ' + pageHeight">
-            <div *ngFor="let node of layoutNodes" 
-                 cdkDrag 
-                 class="layout-node" 
-                 [ngClass]="node.block_type.toLowerCase()"
-                 [style.left.%]="(node.x_coordinate / node.page_width) * 100"
-                 [style.top.%]="(node.y_coordinate / node.page_height) * 100"
-                 [style.width.%]="(node.width / node.page_width) * 100"
-                 [style.height.%]="(node.height / node.page_height) * 100">
-              <div class="node-type" *ngIf="node.height > 20">{{ node.block_type }}</div>
-              <div class="node-text">{{ node.text_value }}</div>
+          <div *ngFor="let page of pages; let i = index" class="document-page-container mb-5">
+            <div class="page-header text-sm font-semibold text-gray-500 mb-2">Page {{ page.page_number }}</div>
+            
+            <div class="document-canvas" 
+                 [id]="'document-layout-list-' + i"
+                 cdkDropList
+                 [cdkDropListData]="page.nodes"
+                 [cdkDropListConnectedTo]="getConnectedDropLists()"
+                 (cdkDropListDropped)="drop($event)"
+                 [style.aspect-ratio]="page.width + ' / ' + page.height">
+                 
+              <div *ngFor="let node of page.nodes" 
+                   cdkDrag 
+                   class="layout-node" 
+                   [ngClass]="node.block_type.toLowerCase()"
+                   [style.left.%]="(node.x_coordinate / node.page_width) * 100"
+                   [style.top.%]="(node.y_coordinate / node.page_height) * 100"
+                   [style.width.%]="(node.width / node.page_width) * 100"
+                   [style.height.%]="(node.height / node.page_height) * 100">
+                <div class="node-type" *ngIf="node.height > 20">{{ node.block_type }}</div>
+                <div class="node-text">{{ node.text_value }}</div>
+              </div>
             </div>
           </div>
         </div>
@@ -73,7 +78,7 @@
                    [id]="'field-' + field.pk_template_field_id"
                    cdkDropList
                    [cdkDropListData]="mappings[field.pk_template_field_id]"
-                   [cdkDropListConnectedTo]="['document-layout-list']"
+                   [cdkDropListConnectedTo]="getCanvasDropLists()"
                    (cdkDropListDropped)="drop($event, field.pk_template_field_id)">
                 
                 <div class="placeholder" *ngIf="mappings[field.pk_template_field_id].length === 0">
diff --git a/frontend/src/app/templates/templates.component.ts b/frontend/src/app/templates/templates.component.ts
index 2aa054e..919dd15 100644
--- a/frontend/src/app/templates/templates.component.ts
+++ b/frontend/src/app/templates/templates.component.ts
@@ -36,6 +36,7 @@ export class TemplatesComponent implements OnInit {
   // Document State
   documentId: string | null = null;
   layoutNodes: DocumentLayout[] = [];
+  pages: { page_number: number, nodes: DocumentLayout[], width: number, height: number }[] = [];
   pageWidth: number = 800;
   pageHeight: number = 1100;
   
@@ -90,9 +91,26 @@ export class TemplatesComponent implements OnInit {
           return;
         }
         this.layoutNodes = layouts;
-        if (layouts.length > 0) {
-          this.pageWidth = layouts[0].page_width;
-          this.pageHeight = layouts[0].page_height;
+        
+        const pageMap = new Map<number, { page_number: number, nodes: DocumentLayout[], width: number, height: number }>();
+        
+        layouts.forEach(node => {
+          if (!pageMap.has(node.page_no)) {
+            pageMap.set(node.page_no, {
+              page_number: node.page_no,
+              nodes: [],
+              width: node.page_width,
+              height: node.page_height
+            });
+          }
+          pageMap.get(node.page_no)!.nodes.push(node);
+        });
+        
+        this.pages = Array.from(pageMap.values()).sort((a, b) => a.page_number - b.page_number);
+        
+        if (this.pages.length > 0) {
+          this.pageWidth = this.pages[0].width;
+          this.pageHeight = this.pages[0].height;
         }
         // Trigger auto-recognition
         this.autoRecognize();
@@ -165,4 +183,8 @@ export class TemplatesComponent implements OnInit {
     // Return all field ID strings as drop lists
     return this.templateFields.map(f => 'field-' + f.pk_template_field_id);
   }
+
+  getCanvasDropLists() {
+    return this.pages.map((_, i) => 'document-layout-list-' + i);
+  }
 }