diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.component.html b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.component.html
index d98104d..5db1195 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.component.html
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.component.html
@@ -16,7 +16,7 @@
         <clr-icon shape="plus"></clr-icon>ADD
       </button>
 
-     
+
 
     </div>
   </div>
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts
index f9713f8..2f58aba 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts
@@ -76,11 +76,23 @@ export class SiteTreeservice {
     return this.apiRequest.post(`sureops/deploy?projId=` + projId, data);
   }
 
-  createHtmlfile(siteNmae: String, data: any): Observable<any> {
+  // createHtmlfile(siteNmae: String, data: any): Observable<any> {
 
-    const _http = this.baseURL + "/createFile?siteBuilderName=" + siteNmae;
+  //   const _http = this.baseURL + "/createFile?siteBuilderName=" + siteNmae;
+  //   return this.apiRequest.post(_http, data);
+  // }
+  createHtmlfile(siteId: number, siteName: string, data: any): Observable<any> {
+    const formattedSiteName = this.formatSiteName(siteName);
+    const _http = `${this.baseURL}/createFile?siteId=${siteId}&siteBuilderName=${formattedSiteName}`;
     return this.apiRequest.post(_http, data);
   }
+    private formatSiteName(name: string): string {
+  return name
+    .replace(/([a-z])([A-Z])/g, '$1_$2') // Convert camelCase to snake_case
+    .replace(/\s+/g, '_') // Replace spaces with underscores
+    .toLowerCase();
+}
+
 
   createFiles(data: any, projId: number): Observable<any> {
     return this.apiRequest.post(`sureops/createFile?projId=` + projId, data);
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi 4.zip b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi 4.zip
new file mode 100644
index 0000000..206ef56
Binary files /dev/null and b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi 4.zip differ
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts
index 4867b0c..b1b8e21 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts
@@ -1777,282 +1777,282 @@ body {
 
 /* Master Reset & Base Styles */
 html, body {
-    margin: 0 !important;
-    padding: 0 !important;
-    width: 100% !important;
-    min-height: 100% !important;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-    font-size: 16px !important;
-    line-height: 1.6 !important;
-    color: #333 !important;
-    background-color: #fff !important;
-    box-sizing: border-box !important;
-    overflow-x: hidden !important;
-    text-align: left !important; /* Override center alignment */
+    margin: 0 ;
+    padding: 0 ;
+    width: 100% ;
+    min-height: 100% ;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
+    font-size: 16px ;
+    line-height: 1.6 ;
+    color: #333 ;
+    background-color: #fff ;
+    box-sizing: border-box ;
+    overflow-x: hidden ;
+    text-align: left ; /* Override center alignment */
 }
 
 *, *::before, *::after {
-    box-sizing: border-box !important;
+    box-sizing: border-box ;
 }
 
 /* Common Container */
-.container {
-    max-width: 1200px !important;
-    width: 100% !important;
-    margin: 0 auto !important;
-    padding: 0 20px !important;
-}
+// .container {
+//     max-width: 1200px ;
+//     width: 100% ;
+//     margin: 0 auto ;
+//     padding: 0 20px ;
+// }
 
-/* Section Styling for Consistent Flow */
-section {
-    padding: 80px 0 !important;
-    position: relative !important;
-    width: 100% !important;
-    background-color: #fff !important;
-}
+// /* Section Styling for Consistent Flow */
+// section {
+//     padding: 80px 0 ;
+//     position: relative ;
+//     width: 100% ;
+//     background-color: #fff ;
+// }
 
-section:nth-child(even) {
-    background-color: #f9f9f9 !important;
-}
+// section:nth-child(even) {
+//     background-color: #f9f9f9 ;
+// }
 
 /* Typography Hierarchy */
-h1, h2, h3, h4, h5, h6 {
-    margin-top: 0 !important;
-    margin-bottom: 0.5em !important;
-    line-height: 1.3 !important;
-    font-weight: 700 !important;
-    color: #111 !important;
-}
+// h1, h2, h3, h4, h5, h6 {
+//     margin-top: 0 ;
+//     margin-bottom: 0.5em ;
+//     line-height: 1.3 ;
+//     font-weight: 700 ;
+//     color: #111 ;
+// }
 
-h1 {
-    font-size: 2.5rem !important;
-}
+// h1 {
+//     font-size: 2.5rem ;
+// }
 
-h2 {
-    font-size: 2rem !important;
-}
+// h2 {
+//     font-size: 2rem ;
+// }
 
-h3 {
-    font-size: 1.75rem !important;
-}
+// h3 {
+//     font-size: 1.75rem ;
+// }
 
-h4 {
-    font-size: 1.5rem !important;
-}
+// h4 {
+//     font-size: 1.5rem ;
+// }
 
-h5 {
-    font-size: 1.25rem !important;
-}
+// h5 {
+//     font-size: 1.25rem ;
+// }
 
-h6 {
-    font-size: 1rem !important;
-}
+// h6 {
+//     font-size: 1rem ;
+// }
 
-p {
-    margin-top: 0 !important;
-    margin-bottom: 1rem !important;
-    color: #555 !important;
-}
+// p {
+//     margin-top: 0 ;
+//     margin-bottom: 1rem ;
+//     color: #555 ;
+// }
 
 /* Link Styling */
-a {
-    color: #0066cc !important;
-    text-decoration: none !important;
-    transition: all 0.3s ease !important;
-}
+// a {
+//     color: #0066cc ;
+//     text-decoration: none ;
+//     transition: all 0.3s ease ;
+// }
 
-a:hover {
-    color: #004499 !important;
-    text-decoration: underline !important;
-}
+// a:hover {
+//     color: #004499 ;
+//     text-decoration: underline ;
+// }
 
 /* Button System */
 .hero-1-btn, .hero-2-btn, .grid-11-btn, .grid-12-btn,
 .split-8-btn, .split-10-btn, .text-1-btn, .text-2-btn, 
 .cta-3-btn, .faq-4-footer-btn, .faq-5-contact-btn, 
 .faq-6-view-more-btn, .visa-order-btn, .nav-1-btn {
-    display: inline-block !important;
-    padding: 12px 24px !important;
-    font-size: 16px !important;
-    font-weight: 600 !important;
-    text-align: center !important;
-    border-radius: 6px !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    border: 2px solid transparent !important;
-    letter-spacing: 0.5px !important;
-    text-decoration: none !important;
+    display: inline-block ;
+    padding: 12px 24px ;
+    font-size: 16px ;
+    font-weight: 600 ;
+    text-align: center ;
+    border-radius: 6px ;
+    cursor: pointer ;
+    transition: all 0.3s ease ;
+    border: 2px solid transparent ;
+    letter-spacing: 0.5px ;
+    text-decoration: none ;
 }
 
-.btn-primary, .hero-1-solid, .hero-2-solid, .text-1-solid, .text-2-solid, .cta-3-solid, .nav-1-solid {
-    background-color: #0066cc !important;
-    color: #fff !important;
-    border-color: #0066cc !important;
+.hero-1-solid, .hero-2-solid, .text-1-solid, .text-2-solid, .cta-3-solid, .nav-1-solid {
+    background-color: #0066cc ;
+    color: #fff ;
+    border-color: #0066cc ;
 }
 
-.btn-primary:hover, .hero-1-solid:hover, .hero-2-solid:hover, .text-1-solid:hover, .text-2-solid:hover, .cta-3-solid:hover, .nav-1-solid:hover {
-    background-color: #004499 !important;
-    border-color: #004499 !important;
+ .hero-1-solid:hover, .hero-2-solid:hover, .text-1-solid:hover, .text-2-solid:hover, .cta-3-solid:hover, .nav-1-solid:hover {
+    background-color: #004499 ;
+    border-color: #004499 ;
 }
 
-.btn-outline, .hero-1-outline, .hero-2-outline, .text-1-outline, .text-2-outline, .cta-3-outline, .nav-1-outline {
-    background-color: transparent !important;
-    color: #0066cc !important;
-    border-color: #0066cc !important;
+ .hero-1-outline, .hero-2-outline, .text-1-outline, .text-2-outline, .cta-3-outline, .nav-1-outline {
+    background-color: transparent ;
+    color: #0066cc ;
+    border-color: #0066cc ;
 }
 
-.btn-outline:hover, .hero-1-outline:hover, .hero-2-outline:hover, .text-1-outline:hover, .text-2-outline:hover, .cta-3-outline:hover, .nav-1-outline:hover {
-    background-color: #0066cc !important;
-    color: #fff !important;
+ .hero-1-outline:hover, .hero-2-outline:hover, .text-1-outline:hover, .text-2-outline:hover, .cta-3-outline:hover, .nav-1-outline:hover {
+    background-color: #0066cc ;
+    color: #fff ;
 }
 
 
 /* Form Elements */
 input, textarea, select {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-    font-size: 16px !important;
-    padding: 12px !important;
-    border: 1px solid #ccc !important;
-    border-radius: 6px !important;
-    width: 100% !important;
-    transition: border-color 0.3s ease !important;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
+    font-size: 16px ;
+    padding: 12px ;
+    border: 1px solid #ccc ;
+    border-radius: 6px ;
+    width: 100% ;
+    transition: border-color 0.3s ease ;
 }
 
 input:focus, textarea:focus, select:focus {
-    outline: none !important;
-    border-color: #0066cc !important;
-    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
+    outline: none ;
+    border-color: #0066cc ;
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) ;
 }
 
 /* Navigation Override */
 .nav-1-navbar {
-    background-color: #fff !important;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
-    position: sticky !important;
-    top: 0 !important;
-    z-index: 1000 !important;
+    background-color: #fff ;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) ;
+    position: sticky ;
+    top: 0 ;
+    z-index: 1000 ;
 }
 
 /* Blog Section Fixes */
 .tn1-blog-section, .blog-2-section {
-    background-color: inherit !important;
-    padding: 80px 20px !important;
+    background-color: inherit ;
+    padding: 80px 20px ;
 }
 
 .tn1-blog-card, .blog-2-card {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
-    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
-    overflow: hidden !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) ;
+    transition: transform 0.3s ease, box-shadow 0.3s ease ;
+    overflow: hidden ;
 }
 
 .tn1-blog-card:hover, .blog-2-card:hover {
-    transform: translateY(-5px) !important;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
+    transform: translateY(-5px) ;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) ;
 }
 
 /* FAQ Sections */
 .faq-4-section, .faq-5-section, .faq-6-block, .faq-7-container {
-    background-color: inherit !important;
+    background-color: inherit ;
 }
 
 .faq-4-question, .faq-5-question, .faq-6-question, .faq-7-question {
-    background-color: #f1f1f1 !important;
-    transition: background-color 0.3s ease !important;
+    background-color: #f1f1f1 ;
+    transition: background-color 0.3s ease ;
 }
 
 .faq-4-question:hover, .faq-5-question:hover, .faq-6-question:hover, .faq-7-question:hover {
-    background-color: #e7e7e7 !important;
+    background-color: #e7e7e7 ;
 }
 
 /* Footer Override */
 .footer-1-section, .footer-2-section {
-    background-color: #f8f8f8 !important;
-    border-top: 1px solid #eee !important;
+    background-color: #f8f8f8 ;
+    border-top: 1px solid #eee ;
 }
 
 /* Contact Section */
 .contact-1-section {
-    background-color: #fff !important;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
+    background-color: #fff ;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) ;
 }
 
 .contact-1-submit-btn {
-    background-color: #0066cc !important;
-    color: #fff !important;
+    background-color: #0066cc ;
+    color: #fff ;
 }
 
 .contact-1-submit-btn:hover {
-    background-color: #004499 !important;
+    background-color: #004499 ;
 }
 
 /* Hero Section Enhancements */
 .hero-1-two-column, .hero-2-centered-hero, .hero-9-section {
-    background-color: inherit !important;
+    background-color: inherit ;
 }
 
 .hero-1-placeholder, .hero-2-placeholder, .hero-9-placeholder {
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
-    overflow: hidden !important;
-    position: relative !important;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) ;
+    overflow: hidden ;
+    position: relative ;
 }
 
 /* Split Sections */
 .split-8-section, .split-10-section {
-    background-color: inherit !important;
+    background-color: inherit ;
 }
 
 .split-8-placeholder, .split-10-placeholder {
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) ;
 }
 
 /* Testimonial Styling */
 testimonial {
-    display: block !important;
-    max-width: 800px !important;
-    margin: 40px auto !important;
-    padding: 35px !important;
-    background-color: #fff !important;
-    border-radius: 10px !important;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
-    font-style: italic !important;
-    color: #444 !important;
-    position: relative !important;
-    line-height: 1.8 !important;
-    font-size: 1.1rem !important;
-    border-left: 5px solid #0066cc !important;
+    display: block ;
+    max-width: 800px ;
+    margin: 40px auto ;
+    padding: 35px ;
+    background-color: #fff ;
+    border-radius: 10px ;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) ;
+    font-style: italic ;
+    color: #444 ;
+    position: relative ;
+    line-height: 1.8 ;
+    font-size: 1.1rem ;
+    border-left: 5px solid #0066cc ;
 }
 
 testimonial::before {
-    content: '"' !important;
-    font-size: 5rem !important;
-    color: #0066cc !important;
-    position: absolute !important;
-    left: 15px !important;
-    top: -10px !important;
-    opacity: 0.2 !important;
-    font-family: Georgia, serif !important;
+    content: '"' ;
+    font-size: 5rem ;
+    color: #0066cc ;
+    position: absolute ;
+    left: 15px ;
+    top: -10px ;
+    opacity: 0.2 ;
+    font-family: Georgia, serif ;
 }
 
 
 /* Animations and Transitions */
 .fade-in {
-    animation: fadeIn 1s ease-in-out !important;
+    animation: fadeIn 1s ease-in-out ;
 }
 
 @keyframes fadeIn {
     from {
-        opacity: 0 !important;
-        transform: translateY(20px) !important;
+        opacity: 0 ;
+        transform: translateY(20px) ;
     }
     to {
-        opacity: 1 !important;
-        transform: translateY(0) !important;
+        opacity: 1 ;
+        transform: translateY(0) ;
     }
 }
 
 /* Ensure smooth scrolling */
 html {
-    scroll-behavior: smooth !important;
+    scroll-behavior: smooth ;
 }
 `;
 
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css2.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css2.ts
index 004e726..a272c66 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css2.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css2.ts
@@ -4251,7 +4251,7 @@ button.light {
   }
   
   /* Header Styles */
-  .pricing-header, .header, .title, .hero-heading {
+  .pricing-header, .title, .hero-heading {
     text-align: center !important;
     margin-bottom: 20px !important;
   }
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html
index ec042e1..907f157 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html
@@ -448,82 +448,501 @@
   </div>
 </div>
 
-
-      <!-- Full Page Display -->
-      <div *ngIf="!isLoading " 
-           class="page-display" 
-           [style.transform]="getPageTransform()">
-
-<!-- Update your section template -->
-<div class="connected-sections" 
-     cdkDropList 
-     [cdkDropListData]="getCurrentPageSections()"
-     [cdkDropListConnectedTo]="allConnectedLists"
-     (cdkDropListDropped)="onSectionDrop($event)">
-     
-  <div *ngFor="let sectionKey of getCurrentPageSections()" 
-       cdkDrag
-       [cdkDragData]="sectionKey"
-       class="section-wrapper"
-       #dragItem>
-       
-    <!-- Drag Handle -->
-    <div class="drag-handle" cdkDragHandle>
-      <i class="fas fa-grip-vertical"></i>
-          <div style="height: 16px !important;"></div>
+<!-- Updated single page container with minimal header and full height -->
+<!-- Replace your current "all-pages-grid-container" section with this -->
+<div *ngIf="!isLoading" class="single-page-container" [style.transform]="getPageTransform()">
+  
+  <!-- Page Actions Bar (Outside the grid) -->
+  <div class="page-actions-bar">
+    <div class="page-info">
+      <h2 class="current-page-title">{{ getCurrentPageName() }}</h2>
+      <span class="page-counter">Page {{ currentPageIndex + 1 }} of {{ pageRenderOrder.length }}</span>
     </div>
-
-
-
-    <!-- Section Content -->
-    <div class="section-content"
-         [innerHTML]="getSectionHtml(getCurrentPageName(), sectionKey)"
-         [attr.contenteditable]="isCurrentSectionEditing(sectionKey)"
-         (blur)="handleDirectContentEdit($event, getCurrentPageName(), sectionKey)">
-    </div>
-
-    <!-- Section Overlay -->
-    <div class="section-overlay" *ngIf="!isCurrentSectionEditing(sectionKey)">
-      <div class="section-label">{{sectionKey}}</div>
+    
+    <div class="page-actions">
+      <button class="action-btn-modern copy-btn" (click)="copyPageToClipboard(getCurrentPageName())" title="Copy Page HTML">
+        <i class="fas fa-copy"></i>
+        <span>Copy HTML</span>
+      </button>
+      
+      <button class="action-btn-modern download-btn" (click)="downloadHtml(getCurrentPageName())" title="Download Page">
+        <i class="fas fa-download"></i>
+        <span>Download</span>
+      </button>
     </div>
   </div>
 
+  <!-- Single Page Display -->
+  <div class="single-page-wrapper">
+    <div *ngIf="pageRenderOrder.length > 0" 
+         class="current-page-card">
+      
+      <!-- Page Content -->
+      <div class="page-content-area">
+        <!-- Sections for current page -->
+        <div class="connected-sections" 
+             cdkDropList 
+             [cdkDropListData]="getPageSections(getCurrentPageName())"
+             [cdkDropListConnectedTo]="allConnectedLists"
+             (cdkDropListDropped)="onSectionDrop($event, getCurrentPageName())">
+             
+          <div *ngFor="let sectionKey of getPageSections(getCurrentPageName())" 
+               cdkDrag
+               [cdkDragData]="sectionKey"
+               class="section-container"
+               [class.editing]="isCurrentSectionEditing(sectionKey)">
+               
             <!-- Drag Handle -->
-            <!-- <div class="drag-handle" cdkDragHandle style="display: none;">
-              <i class="fa fa-grip-lines"></i>
+            <div class="drag-handle" cdkDragHandle>
+              <i class="fas fa-grip-vertical"></i>
             </div>
-          </div> -->
+
+            <!-- Section Content -->
+            <div class="section-content"
+                 [innerHTML]="getSectionHtml(getCurrentPageName(), sectionKey)"
+                 [attr.contenteditable]="isCurrentSectionEditing(sectionKey)"
+                 (blur)="handleDirectContentEdit($event, getCurrentPageName(), sectionKey)">
+            </div>
+
+            <!-- Section Overlay -->
+            <div class="section-overlay" *ngIf="!isCurrentSectionEditing(sectionKey)">
+              <div class="section-label">{{sectionKey}}</div>
+            </div>
+          </div>
 
           <!-- Empty State for Sections -->
-          <div *ngIf="getCurrentPageSections().length === 0" class="empty-sections" 
-               style="padding: 100px; text-align: center; color: #6c757d;">
-            <div class="empty-state">
-              <i class="fas fa-puzzle-piece" style="font-size: 48px; margin-bottom: 20px; opacity: 0.5;"></i>
-              <h3>No Sections Yet</h3>
-              <p>Add your first section to start building this page.</p>
-              <button class="action-btn primary" (click)="addNewSectionToCurrentPage()">
-                <i class="fas fa-plus"></i>
-                Add First Section
-              </button>
+          <div *ngIf="getPageSections(getCurrentPageName()).length === 0" class="empty-sections">
+            <div class="empty-state-modern">
+              <i class="fas fa-plus-circle"></i>
+              <h3>No sections yet</h3>
+              <p>Add sections from the sidebar to get started</p>
             </div>
           </div>
         </div>
       </div>
+    </div>
+  </div>
 
-      <!-- Empty State for Pages -->
-      <div *ngIf="!isLoading && pageRenderOrder.length === 0" class="empty-pages" 
-           style="display: flex; align-items: center; justify-content: center; height: 100vh;">
-        <div class="empty-state" style="text-align: center; color: #6c757d;">
-          <i class="fas fa-file-plus" style="font-size: 64px; margin-bottom: 30px; opacity: 0.5;"></i>
-          <h2>No Pages Yet</h2>
-          <p style="font-size: 16px; margin-bottom: 30px;">Create your first page to get started with wireframing.</p>
-          <button class="action-btn primary" (click)="createFirstPage()">
-            <i class="fas fa-plus"></i>
-            Create First Page
-          </button>
-        </div>
+  <!-- Enhanced Page Navigation -->
+  <div *ngIf="pageRenderOrder.length > 0" class="page-navigation-enhanced">
+    <button class="nav-btn-modern" 
+            (click)="previousPage()" 
+            [disabled]="currentPageIndex <= 0"
+            title="Previous Page">
+      <i class="fas fa-chevron-left"></i>
+      <span class="nav-text">Previous</span>
+    </button>
+
+    <div class="page-indicator-enhanced">
+      <div class="page-dots">
+        <span *ngFor="let page of pageRenderOrder; let i = index" 
+              class="page-dot" 
+              [class.active]="i === currentPageIndex"
+              (click)="setCurrentPage(i)"
+              [title]="page">
+        </span>
+      </div>
+      <div class="page-info-text">
+        <span class="current-page-name">{{ getCurrentPageName() }}</span>
       </div>
     </div>
+
+    <button class="nav-btn-modern" 
+            (click)="nextPage()" 
+            [disabled]="currentPageIndex >= pageRenderOrder.length - 1"
+            title="Next Page">
+      <span class="nav-text">Next</span>
+      <i class="fas fa-chevron-right"></i>
+    </button>
+  </div>
+
+  <!-- Empty State for No Pages -->
+  <div *ngIf="pageRenderOrder.length === 0" class="empty-pages-modern">
+    <div class="empty-state-modern">
+      <i class="fas fa-file-plus"></i>
+      <h2>No Pages Created Yet</h2>
+      <p>Create your first page to start building your wireframe</p>
+      <button class="action-btn-modern primary-btn" (click)="createFirstPage()">
+        <i class="fas fa-plus"></i>
+        <span>Create First Page</span>
+      </button>
+    </div>
+  </div>
+</div>
+
+
+
+<style>
+/* Single Page Container */
+.single-page-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  gap: 20px;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+}
+
+/* Page Actions Bar */
+.page-actions-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: white;
+  padding: 16px 24px;
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e9ecef;
+}
+
+.page-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.current-page-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: #212529;
+  background: linear-gradient(135deg, #007bff, #0056b3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.page-counter {
+  font-size: 14px;
+  color: #6c757d;
+  font-weight: 500;
+}
+
+.page-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.action-btn-modern {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 18px;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+}
+
+.copy-btn {
+  background: linear-gradient(135deg, #17a2b8, #138496);
+  color: white;
+}
+
+.copy-btn:hover {
+  background: linear-gradient(135deg, #138496, #117a8b);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
+}
+
+.download-btn {
+  background: linear-gradient(135deg, #28a745, #218838);
+  color: white;
+}
+
+.download-btn:hover {
+  background: linear-gradient(135deg, #218838, #1e7e34);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
+}
+
+/* Single Page Wrapper */
+.single-page-wrapper {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.current-page-card {
+  width: 100%;
+  max-width: 1200px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  border: 1px solid #e9ecef;
+}
+
+.page-content-area {
+  padding: 24px;
+  min-height: 600px;
+  max-height: calc(100vh - 250px);
+  overflow-y: auto;
+}
+
+/* Section Containers */
+.section-container {
+  position: relative;
+  margin-bottom: 20px;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  background: white;
+  border: 2px solid #f8f9fa;
+}
+
+.section-container:hover {
+  border-color: #007bff;
+  box-shadow: 0 4px 20px rgba(0, 123, 255, 0.15);
+  transform: translateY(-2px);
+}
+
+.drag-handle {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: rgba(0, 123, 255, 0.1);
+  color: #007bff;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: grab;
+  z-index: 10;
+  transition: all 0.2s ease;
+}
+
+.drag-handle:hover {
+  background: rgba(0, 123, 255, 0.2);
+  transform: scale(1.1);
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}
+
+.section-content {
+  padding: 20px;
+  min-height: 100px;
+  border-radius: 12px;
+}
+
+.section-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(0, 123, 255, 0.05), rgba(0, 123, 255, 0.1));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  border-radius: 12px;
+}
+
+.section-container:hover .section-overlay {
+  opacity: 1;
+}
+
+.section-label {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  background: linear-gradient(135deg, #007bff, #0056b3);
+  color: white;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+/* Enhanced Page Navigation */
+.page-navigation-enhanced {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: white;
+  padding: 16px 24px;
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e9ecef;
+}
+
+.nav-btn-modern {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 18px;
+  background: linear-gradient(135deg, #6c757d, #545b62);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.nav-btn-modern:hover:not(:disabled) {
+  background: linear-gradient(135deg, #545b62, #495057);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
+}
+
+.nav-btn-modern:disabled {
+  background: #e9ecef;
+  color: #adb5bd;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.page-indicator-enhanced {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.page-dots {
+  display: flex;
+  gap: 8px;
+}
+
+.page-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #dee2e6;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.page-dot:hover {
+  background: #adb5bd;
+  transform: scale(1.2);
+}
+
+.page-dot.active {
+  background: linear-gradient(135deg, #007bff, #0056b3);
+  transform: scale(1.3);
+}
+
+.page-info-text {
+  text-align: center;
+}
+
+.current-page-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #495057;
+}
+
+/* Empty States */
+.empty-sections, .empty-pages-modern {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.empty-state-modern {
+  text-align: center;
+  padding: 40px;
+  color: #6c757d;
+}
+
+.empty-state-modern i {
+  font-size: 64px;
+  margin-bottom: 20px;
+  opacity: 0.6;
+  color: #dee2e6;
+}
+
+.empty-state-modern h2, .empty-state-modern h3 {
+  margin: 16px 0 8px 0;
+  color: #495057;
+  font-weight: 700;
+}
+
+.empty-state-modern p {
+  margin-bottom: 24px;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.primary-btn {
+  background: linear-gradient(135deg, #007bff, #0056b3) !important;
+  color: white !important;
+}
+
+.primary-btn:hover {
+  background: linear-gradient(135deg, #0056b3, #004085) !important;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .single-page-container {
+    padding: 12px;
+    gap: 12px;
+  }
+  
+  .page-actions-bar {
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+  }
+  
+  .page-actions {
+    justify-content: center;
+  }
+  
+  .action-btn-modern span,
+  .nav-text {
+    display: none;
+  }
+  
+  .page-navigation-enhanced {
+    padding: 12px 16px;
+  }
+  
+  .current-page-title {
+    font-size: 20px;
+  }
+  
+  .page-content-area {
+    padding: 16px;
+    max-height: calc(100vh - 300px);
+  }
+}
+
+@media (max-width: 480px) {
+  .page-dots {
+    gap: 6px;
+  }
+  
+  .page-dot {
+    width: 10px;
+    height: 10px;
+  }
+  
+  .section-container {
+    margin-bottom: 16px;
+    border-radius: 8px;
+  }
+  
+  .section-content {
+    padding: 16px;
+  }
+}
+</style>
+    
     <div class="page-actions">
   <button class="action-btn primary" (click)="copyPageToClipboard()">
     <i class="fas fa-copy"></i>
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss
index 299bf06..e9bd15f 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss
@@ -544,12 +544,12 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(255, 255, 255, 0.95);
+  background: rgba(255, 255, 255, 0.9);
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
-  backdrop-filter: blur(5px);
+
   
   .loading-container {
     text-align: center;
@@ -560,11 +560,11 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
     box-shadow: 0 10px 30px rgba(0,0,0,0.1);
     
     .loading-text {
-      font-size: 1.2rem;
-      color: #333;
-      margin: 1rem 0 0.5rem;
-      font-weight: 500;
-    }
+  text-align: center;
+  margin-top: 10px;
+  color: #333;
+  font-weight: 500;
+}
     
     .loading-subtext {
       color: #666;
@@ -573,17 +573,18 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
     }
     
     .progress-bar {
-      width: 100%;
-      height: 8px;
-      background: #f0f0f0;
-      border-radius: 4px;
-      overflow: hidden;
+  width: 300px;
+  height: 20px;
+  background: #f0f0f0;
+  border-radius: 10px;
+  overflow: hidden;
+
       
       .progress-fill {
-        height: 100%;
-        background: #2196F3;
-        transition: width 0.3s ease;
-      }
+  height: 100%;
+  background: #2196F3;
+  transition: width 0.3s ease;
+}
     }
     
     mat-spinner {
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts
index 980dc16..f26625c 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts
@@ -9,6 +9,8 @@ import * as sha256 from 'crypto-js/sha256';
 import SHA256 from 'crypto-js/sha256';
 import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { trigger, transition, style, animate, state } from '@angular/animations';
+import * as e from 'express';
+import { json } from 'stream/consumers';
 
 @Component({
     selector: 'app-wireframe-renderer',
@@ -49,103 +51,8 @@ import { trigger, transition, style, animate, state } from '@angular/animations'
 })
 
 export class WireframeRendererComponent implements OnInit {
-    @Input() node: any;
-    @Input() title: string = '';
-    commonCss: string = COMMON_CSS;
-    jsonInput = '';
-    initialPrompt = '';
-    id: number;
-    allPagePrompts: Record<string, Record<string, string>> = {};
-    initialGeneratedPrompts: Record<string, Record<string, string>> = {};
-    promptHashCache: Record<string, string> = {};
-    pageSections: Record<string, { FullPage: SafeHtml }> = {};
-    sectionHtmls: Record<string, Record<string, SafeHtml>> = {};
-    isLoading: boolean = true;
-    sitename = '';
 
-    sidebarCollapsed: boolean = false;
-
-// Add toggle method
-
-
-deployedUrl: string | null = null;
-    // Added properties for grid and drag functionality
-    hoveredPage: string | null = null;
-    hoveredSection: string | null = null;
-    scale: number = 1;
-    panX: number = 0;
-    panY: number = 0;
-    isPanning: boolean = false;
-    lastX: number = 0;
-    lastY: number = 0;
-    isDragging = false;
-startPanPosition = { x: 0, y: 0 };
-    // Edit mode properties
-    editMode: boolean = false;
-    editingSection: { page: string, section: string } | null = null;
-    editingSectionHtml: SafeHtml | null = null;
-    
-    // New section modal properties
-    showNewSectionModal: boolean = false;
-    newSectionPage: string = '';
-    newSectionName: string = '';
-    newSectionType: string = '';
-    newSectionDescription: string = '';
-    newSectionAfter: string | null = null;
-
- 
-
-    sidebarOpen = false;
-    // Add this property to fix template errors
-
-  // Page and section management
-  pageRenderOrder: string[] = [];
-  
-  // need help with all the errors 
-  
-  // Style controls
-  liveStyles = {
-    fontSize: '',
-    fontWeight: '',
-    textAlign: '',
-    color: '#000000',
-    background: '#ffffff'
-  };
-
-  // Data arrays
-  fontSizes = ['12px', '14px', '16px', '18px', '20px', '24px', '28px'];
-  fontWeights = ['normal', 'bold', 'lighter'];
-  
-  sectionTypes = [
-    { value: 'header', label: 'Header' },
-    { value: 'hero', label: 'Hero' },
-    { value: 'features', label: 'Features' },
-    { value: 'gallery', label: 'Gallery' },
-    { value: 'pricing', label: 'Pricing' },
-    { value: 'testimonials', label: 'Testimonials' },
-    { value: 'contact', label: 'Contact' },
-    { value: 'footer', label: 'Footer' }
-  ];
-
-  // Mock data - replace with your actual data structures
-  navbarLinks: { [key: string]: any[] } = {};
-  availablePages: { href: string, label: string }[] = [];
-  selectedPageForNavbar: string = '';
-
- zoomLevel = 1;
-  currentPageIndex = 0;
-  sectionOrderMap: { [key: string]: string[] } = {};
-
-  // Add these new properties
-  draggedSection: string | null = null;
-  lastDeletedSection: { page: string; section: string; content: SafeHtml } | null = null;
-  gridColumns = 12;
-  gridGap = 16;
-
-    searchTerm: string = '';
-
-  // Section arrays
-  globalSections = [
+    globalSections = [
     {
       type: 'Navbar',
       description: 'Main navigation bar for the website',
@@ -238,6 +145,107 @@ startPanPosition = { x: 0, y: 0 };
     }
   ];
 
+    
+  // Style controls
+  liveStyles = {
+    fontSize: '',
+    fontWeight: '',
+    textAlign: '',
+    color: '#000000',
+    background: '#ffffff'
+  };
+
+  // Data arrays
+  fontSizes = ['12px', '14px', '16px', '18px', '20px', '24px', '28px'];
+  fontWeights = ['normal', 'bold', 'lighter'];
+  
+  sectionTypes = [
+    { value: 'header', label: 'Header' },
+    { value: 'hero', label: 'Hero' },
+    { value: 'features', label: 'Features' },
+    { value: 'gallery', label: 'Gallery' },
+    { value: 'pricing', label: 'Pricing' },
+    { value: 'testimonials', label: 'Testimonials' },
+    { value: 'contact', label: 'Contact' },
+    { value: 'footer', label: 'Footer' }
+  ];
+
+    @Input() node: any;
+    @Input() title: string = '';
+    commonCss: string = COMMON_CSS;
+    jsonInput = '';
+    initialPrompt = '';
+    id: number;
+    allPagePrompts: Record<string, Record<string, string>> = {};
+    initialGeneratedPrompts: Record<string, Record<string, string>> = {};
+    promptHashCache: Record<string, string> = {};
+    pageSections: Record<string, { FullPage: SafeHtml }> = {};
+    sectionHtmls: Record<string, Record<string, SafeHtml>> = {};
+    isLoading: boolean = true;
+    sitename = '';
+
+    sidebarCollapsed: boolean = false;
+
+newlyGeneratedPages: string[] = [];
+
+// Add toggle method
+
+
+deployedUrl: string | null = null;
+    // Added properties for grid and drag functionality
+    hoveredPage: string | null = null;
+    hoveredSection: string | null = null;
+    scale: number = 1;
+    panX: number = 0;
+    panY: number = 0;
+    isPanning: boolean = false;
+    lastX: number = 0;
+    lastY: number = 0;
+    isDragging = false;
+startPanPosition = { x: 0, y: 0 };
+    // Edit mode properties
+    editMode: boolean = false;
+    editingSection: { page: string, section: string } | null = null;
+    editingSectionHtml: SafeHtml | null = null;
+    
+    // New section modal properties
+    showNewSectionModal: boolean = false;
+    newSectionPage: string = '';
+    newSectionName: string = '';
+    newSectionType: string = '';
+    newSectionDescription: string = '';
+    newSectionAfter: string | null = null;
+
+ 
+
+    sidebarOpen = false;
+    // Add this property to fix template errors
+
+  // Page and section management
+  pageRenderOrder: string[] = [];
+  
+  // need help with all the errors 
+
+
+  // Mock data - replace with your actual data structures
+  navbarLinks: { [key: string]: any[] } = {};
+  availablePages: { href: string, label: string }[] = [];
+  selectedPageForNavbar: string = '';
+
+ zoomLevel = 1;
+  currentPageIndex = 0;
+  sectionOrderMap: { [key: string]: string[] } = {};
+
+  // Add these new properties
+  draggedSection: string | null = null;
+  lastDeletedSection: { page: string; section: string; content: SafeHtml } | null = null;
+  gridColumns = 12;
+  gridGap = 16;
+
+    searchTerm: string = '';
+
+  // Section arrays
+
   // Navbar editor properties
   showNavbarEditorModal: boolean = false;
   currentNavbarLinks: any[] = [];
@@ -247,6 +255,7 @@ startPanPosition = { x: 0, y: 0 };
   newCustomSectionName: string = '';
   newCustomSectionDesc: string = '';
   newCustomSectionIcon: string = 'fas fa-puzzle-piece';
+  
 
 
     constructor(
@@ -260,16 +269,82 @@ startPanPosition = { x: 0, y: 0 };
 //    sectionOrderMap: Record<string, string[]> = {};
 
 // Initialize in ngOnInit()
-ngOnInit(): void {
+siteId: number = 0; // Add this property to store siteId
+async ngOnInit(): Promise<void> {
+  try {
+    this.id = this.route.snapshot.params['id'];
+    console.log('id is: ', this.id);
+    this.siteId = this.id;
     
-  this.sectionOrderMap = {}; 
-        this.id = this.route.snapshot.params['id'];
-        console.log('id is: ', this.id);
-        this.fetchTreeById(this.id);
-        const style = document.createElement('style');
+    // First fetch the tree to get expected pages
+    await this.fetchTreeById(this.id);
+    
+    const style = document.createElement('style');
     style.textContent = COMMON_CSS;
     document.head.appendChild(style);
+  } catch (err) {
+    console.error('Initial load error:', err);
+  }
+}
+
+/**
+ * Updated checkAllExistingFilesEnhanced method
+ */
+private async checkAllExistingFilesEnhanced(siteName: string, expectedPages: string[]): Promise<{
+  existingFiles: Record<string, string>,
+  extractedContent: Record<string, { css: string, bodyHtml: string, title: string }>
+}> {
+  const existingFiles: Record<string, string> = {};
+  const extractedContent: Record<string, { css: string, bodyHtml: string, title: string }> = {};
+  const formattedSite = this.formatSiteName(siteName);
+  
+  console.log(`🔍 Enhanced checking for existing files in: ${formattedSite}`);
+  
+  // Process each expected page
+  const checkPromises = expectedPages.map(async (pageName) => {
+    const sanitizedPageName = this.sanitizeFilename(pageName);
+    
+    try {
+      const rawHtml = await this.tryReadHtmlFromServer(formattedSite, sanitizedPageName);
+      
+      if (rawHtml && rawHtml.trim() !== '') {
+        console.log(`📄 Processing raw HTML for ${pageName}:`, rawHtml.substring(0, 200) + '...');
+        
+        // Parse the HTML response and extract content
+        const parsed = this.parseHtmlResponse(rawHtml);
+        
+        if (parsed) {
+          // Store the complete HTML for rendering - use the original HTML if it's already complete
+          let completeHtml = rawHtml;
+          
+          // Only create new HTML structure if the original doesn't have proper HTML tags
+          if (!rawHtml.includes('<!DOCTYPE') || !rawHtml.includes('<html')) {
+            completeHtml = this.createCompleteHtml(pageName, parsed.css, parsed.bodyHtml);
+          }
+          
+          existingFiles[pageName] = completeHtml;
+          extractedContent[pageName] = parsed;
+          
+          console.log(`✅ Found and parsed existing file: ${sanitizedPageName}`);
+        } else {
+          console.log(`⚠️ Failed to parse existing file: ${sanitizedPageName}`);
+        }
+      } else {
+        console.log(`❌ File not found or empty: ${sanitizedPageName}`);
+      }
+    } catch (error) {
+      console.error(`❌ Error checking file ${sanitizedPageName}:`, error);
     }
+  });
+  
+  // Wait for all checks to complete
+  await Promise.all(checkPromises);
+  
+  console.log(`📊 Found ${Object.keys(existingFiles).length} existing files with extracted content`);
+  return { existingFiles, extractedContent };
+}
+
+
 
  ngAfterViewInit() {
   this.allConnectedLists = this.dropLists.toArray();
@@ -650,24 +725,48 @@ loadProgress: number = 0;
 private loadingInterval: any;
 
 // Updated loading methods
+/**
+ * Enhanced loading management with progress tracking
+ */
+private updateLoadingProgress(progress: number, message: string): void {
+  this.loadProgress = Math.min(Math.max(progress, 0), 100);
+  this.loadingMessage = message;
+  this.cdr.detectChanges();
+  
+  console.log(`📊 Loading Progress: ${progress}% - ${message}`);
+}
+
+// Add these properties to your component
+loadingMessage: string = '';
+
+// Update the showLoading method
 showLoading(message?: string): void {
   this.isLoading = true;
   this.loadProgress = 0;
+  this.loadingMessage = message || 'Loading...';
   
-  this.loadingInterval = setInterval(() => {
-    if (this.loadProgress < 90) {
-      this.loadProgress += 10;
-      this.cdr.detectChanges();
-    }
-  }, 500);
+  // Clear any existing interval
+  if (this.loadingInterval) {
+    clearInterval(this.loadingInterval);
+  }
+  
+  this.cdr.detectChanges();
 }
 
+// Update the hideLoading method
 hideLoading(): void {
   this.isLoading = false;
   this.loadProgress = 100;
+  this.loadingMessage = 'Complete!';
+  
+  // Clean up
   setTimeout(() => {
-    clearInterval(this.loadingInterval);
+    if (this.loadingInterval) {
+      clearInterval(this.loadingInterval);
+      this.loadingInterval = null;
+    }
     this.loadProgress = 0;
+    this.loadingMessage = '';
     this.cdr.detectChanges();
   }, 300);
 }
@@ -747,37 +846,482 @@ hideLoading(): void {
     }
 
     // Step 1: Get data from tree by ID
-    fetchTreeById(id: number) {
-         this.showLoading('Loading website structure...');
-        this.siteTreeService.getById(id).subscribe({
-            next: (res) => {
-                console.log('📥 Fetched from getById:', res);
-                
-                if (res && res.model) {
-                    try {
-                        this.initialPrompt = res.prompt;
-                        
-                        const maybeParsed = typeof res.model === 'string' ? JSON.parse(res.model) : res.model;
-                        this.jsonInput = JSON.stringify(maybeParsed, null, 2);
-                        this.sitename = res.name;
-                        this.deployedUrl = res.deployedUrl;
-                        console.log("Deployed Url "+res.deployedUrl);
-                        this.generatePromptsForAllSections(this.jsonInput);
-                    } catch (err) {
-                        console.error('❌ Error parsing model JSON:', err);
-                        alert('Model data is not valid JSON format');
-                    }
-                } else {
-                    console.warn('⚠️ Model key not found or empty, keeping inputJson as is.');
-                }
-            },
-            error: (err) => {
-                console.error('❌ Error in getById:', err);
-            }
-           
+fetchTreeById(id: number) {
+  this.showLoading('Loading website structure...');
+  this.siteTreeService.getById(id).subscribe({
+    next: async (res) => {
+      console.log('📥 Fetched from getById:', res);
+      
+      if (res && res.model) {
+        try {
+          this.id = id;
+          this.siteId = res.siteId || id; // Store siteId for API calls
+          this.initialPrompt = res.prompt;
+          
+          const maybeParsed = typeof res.model === 'string' ? JSON.parse(res.model) : res.model;
+          this.jsonInput = JSON.stringify(maybeParsed, null, 2);
+          this.sitename = res.name;
+          this.deployedUrl = res.deployedUrl;
 
-        });
+          this.dividePagesToExistingOrNew(this.jsonInput, this.sitename);
+          this.updateLoadingProgress(20, 'Model data loaded successfully');
+          await this.generateMissingPagesWithAI(this.missingPages, this.jsonInput);
+
+          // Start the enhanced processing flow
+          // await this.processAllPagesWithExistingCheck(this.jsonInput);
+        } catch (err) {
+          console.error('❌ Error parsing model JSON:', err);
+          this.toastr.error('Model data is not valid JSON format');
+          this.hideLoading();
+        }
+      } else {
+        console.warn('⚠️ Model key not found or empty');
+        this.hideLoading();
+      }
+    },
+    error: (err) => {
+      console.error('❌ Error in getById:', err);
+      this.toastr.error('Failed to load website data');
+      this.hideLoading();
     }
+  });
+}
+
+ /* Step 2: Process all pages with existing file checking
+ */
+async processAllPagesWithExistingCheck(treeJsonString: string) {
+  try {
+    const parsedTree = JSON.parse(treeJsonString);
+    const allExpectedPages = Object.keys(parsedTree);
+    
+    this.updateLoadingProgress(10, `Checking ${allExpectedPages.length} existing pages...`);
+    
+    // Check for existing files
+    const existingPagesData = await this.checkAllExistingPages(allExpectedPages);
+    
+    this.updateLoadingProgress(40, 'Processing page structure...');
+    
+    // Process the tree structure and generate prompts
+    await this.generatePromptsForAllPages(parsedTree, existingPagesData);
+    
+    this.updateLoadingProgress(70, 'Generating missing pages...');
+    
+    // Generate HTML for missing pages
+    await this.generateHtmlForMissingPages();
+    
+    this.updateLoadingProgress(90, 'Saving new pages...');
+    
+    // Save newly generated pages
+    await this.saveNewlyGeneratedPages();
+    
+    this.updateLoadingProgress(100, 'Complete!');
+    setTimeout(() => this.hideLoading(), 500);
+    
+  } catch (e) {
+    console.error('❌ Invalid JSON format', e);
+    this.toastr.error('Invalid JSON format');
+    this.hideLoading();
+  }
+}
+
+/**
+ * Step 3: Check all existing pages
+ */
+private async checkAllExistingPages(expectedPages: string[]): Promise<Map<string, {css: string, bodyHtml: string, title: string}>> {
+  const existingPagesData = new Map<string, {css: string, bodyHtml: string, title: string}>();
+  
+  const checkPromises = expectedPages.map(async (pageName) => {
+    try {
+      const response = await this.checkSinglePage(pageName);
+      if (response) {
+        const parsedData = this.parseHtmlResponse(response);
+        if (parsedData) {
+          existingPagesData.set(pageName, parsedData);
+          console.log(`✅ Found existing page: ${pageName}`);
+        }
+      }
+    } catch (error) {
+      console.log(`❌ Page not found: ${pageName}`);
+    }
+  });
+  
+  await Promise.all(checkPromises);
+  
+  console.log(`📊 Found ${existingPagesData.size} existing pages out of ${expectedPages.length}`);
+  return existingPagesData;
+}
+
+
+ /* Check single page existence
+ */
+private async checkSinglePage(pageName: string): Promise<string | null> {
+  const sanitizedPageName = this.sanitizeFilename(pageName);
+  
+  return new Promise((resolve) => {
+    this.siteTreeService.readPages(this.sitename, sanitizedPageName).subscribe({
+      next: (response) => {
+        if (response && response.trim() !== '' && !response.includes('❌ File not found')) {
+          resolve(response);
+        } else {
+          resolve(null);
+        }
+      },
+      error: (err) => {
+        console.log(`Page ${pageName} not found:`, err);
+        resolve(null);
+      }
+    });
+  });
+}
+
+/**
+ * Step 4: Generate prompts for all pages and load existing ones
+ */
+private async generatePromptsForAllPages(treeJson: any, existingPagesData: Map<string, any>) {
+  this.newlyGeneratedPages = []; // Reset the tracking array
+  
+  for (const [pageName, sections] of Object.entries(treeJson)) {
+    if (!this.pageRenderOrder.includes(pageName)) {
+      this.pageRenderOrder.push(pageName);
+    }
+    
+    this.sectionOrderMap[pageName] = this.sectionOrderMap[pageName] || [];
+    
+    // Check if page exists
+    if (existingPagesData.has(pageName)) {
+      // Load existing page
+      const pageData = existingPagesData.get(pageName);
+      const completeHtml = this.createCompleteHtml(pageName, pageData.css, pageData.bodyHtml);
+      
+      this.pageSections[pageName] = {
+        FullPage: this.sanitizer.bypassSecurityTrustHtml(completeHtml)
+      };
+      
+      // Initialize section HTML storage for existing pages
+      this.sectionHtmls[pageName] = {};
+      this.allPagePrompts[pageName] = {};
+      
+      console.log(`✅ Loaded existing page: ${pageName}`);
+    } else {
+      // Generate prompts for missing page
+      await this.generatePromptsForMissingPage(pageName, sections);
+      this.newlyGeneratedPages.push(pageName);
+      console.log(`📝 Will generate new page: ${pageName}`);
+    }
+  }
+}
+
+
+
+/**
+ * Generate prompts for a single missing page
+ */
+private async generatePromptsForMissingPage(pageName: string, sections: any) {
+  const sectionPrompts: Record<string, string> = {};
+  
+  // Process nested children first
+  if (sections['Children']) {
+    // Handle nested structure if needed
+    await this.processPages(sections['Children'], false);
+  }
+  
+  // Generate prompts for each section
+  for (const [sectionName, sectionDescription] of Object.entries(sections)) {
+    if (sectionName === 'Children') continue;
+    
+    this.sectionOrderMap[pageName].push(sectionName);
+    const prompt = await this.generatePromptFromSection(sectionName, sectionDescription as string);
+    sectionPrompts[sectionName] = prompt;
+  }
+  
+  this.allPagePrompts[pageName] = sectionPrompts;
+  this.initialGeneratedPrompts[pageName] = { ...sectionPrompts };
+}
+
+
+/* Step 5: Generate HTML for missing pages only
+ */
+private async generateHtmlForMissingPages() {
+  if (this.newlyGeneratedPages.length === 0) {
+    console.log('✅ No new pages to generate');
+    return;
+  }
+  
+  const htmlGenerationTasks: Promise<void>[] = [];
+  
+  for (const pageName of this.newlyGeneratedPages) {
+    const sectionMap = this.allPagePrompts[pageName];
+    if (sectionMap) {
+      htmlGenerationTasks.push(this.processPageSections(pageName, sectionMap));
+    }
+  }
+  
+  await Promise.all(htmlGenerationTasks);
+  console.log(`✅ Generated HTML for ${this.newlyGeneratedPages.length} new pages`);
+}
+
+
+/**
+ * Step 6: Save only newly generated pages
+ */
+private async saveNewlyGeneratedPages(): Promise<void> {
+  if (this.newlyGeneratedPages.length === 0) {
+    console.log('✅ No new pages to save');
+    return;
+  }
+
+  const fileMap: Record<string, string> = {};
+
+  // Prepare only newly generated pages for saving
+  for (const pageName of this.newlyGeneratedPages) {
+    const pageSection = this.pageSections[pageName];
+    if (pageSection && pageSection.FullPage) {
+      let html = pageSection.FullPage.toString();
+      
+      // Clean up any SafeValue content if present
+      if (html.includes('SafeValue must use [property]=binding:')) {
+        const parsed = this.parseHtmlResponse(html);
+        if (parsed) {
+          html = this.createCompleteHtml(pageName, parsed.css, parsed.bodyHtml);
+        }
+      }
+      
+      const sanitizedPageName = this.sanitizeFilename(pageName);
+      fileMap[sanitizedPageName] = html;
+      
+      console.log(`📝 Prepared ${pageName} for saving`);
+    }
+  }
+
+  if (Object.keys(fileMap).length > 0) {
+    try {
+      await new Promise((resolve, reject) => {
+        this.siteTreeService.createHtmlfile(this.siteId, this.sitename, fileMap).subscribe({
+          next: (res) => {
+            console.log(`✅ Saved ${Object.keys(fileMap).length} new HTML files`);
+            this.toastr.success(`Saved ${Object.keys(fileMap).length} new HTML files`);
+            
+            // Clear the newly generated pages list after successful save
+            this.newlyGeneratedPages = [];
+            resolve(res);
+          },
+          error: (err) => {
+            console.error('❌ Error saving HTML files:', err);
+            this.toastr.error('Failed to save HTML files');
+            reject(err);
+          }
+        });
+      });
+    } catch (error) {
+      console.error('❌ Save operation failed:', error);
+    }
+  }
+}
+
+/**
+ * Enhanced HTML response parser
+ */
+private parseHtmlResponse(rawResponse: string): { css: string, bodyHtml: string, title: string } | null {
+  try {
+    console.log('🔍 Processing existing page HTML...');
+    
+    if (!rawResponse || rawResponse.trim() === '') {
+      console.warn('⚠️ Empty response received');
+      return null;
+    }
+
+    let htmlContent = rawResponse.trim();
+    
+    // Handle SafeValue wrapper if present
+    if (htmlContent.includes('SafeValue must use [property]=binding:')) {
+      console.log('🔧 Extracting from SafeValue wrapper...');
+      
+      // Extract HTML content from SafeValue
+      const htmlMatches = htmlContent.match(/<html[\s\S]*?<\/html>/i) || 
+                         htmlContent.match(/<body[\s\S]*?<\/body>/i);
+      
+      if (htmlMatches && htmlMatches[0]) {
+        htmlContent = htmlMatches[0];
+        console.log('✅ Extracted HTML content');
+      }
+    }
+
+    // Clean up any wrapper text but keep the HTML intact
+    const htmlStartIndex = htmlContent.indexOf('<');
+    if (htmlStartIndex > 0) {
+      htmlContent = htmlContent.substring(htmlStartIndex);
+    }
+
+    // Now parse the HTML to extract components
+    return this.extractHtmlComponents(htmlContent);
+
+  } catch (error) {
+    console.error('❌ Error processing HTML:', error);
+    return null;
+  }
+}
+
+private extractHtmlComponents(htmlContent: string): { css: string, bodyHtml: string, title: string } | null {
+  try {
+    // Use DOMParser to parse the HTML
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(htmlContent, 'text/html');
+    
+    // Check if parsing was successful
+    if (doc.querySelector('parsererror')) {
+      console.warn('⚠️ HTML parsing failed, trying alternative method');
+      return this.extractHtmlComponentsManually(htmlContent);
+    }
+
+    // Extract CSS from style tags
+    const styles = doc.querySelectorAll('style');
+    let css = '';
+    styles.forEach(style => {
+      css += (style.textContent || '') + '\n';
+    });
+
+    // Extract title
+    const titleElement = doc.querySelector('title');
+    const title = titleElement ? titleElement.textContent || 'Untitled Page' : 'Untitled Page';
+
+    // Extract body content
+    const body = doc.querySelector('body');
+    let bodyHtml = '';
+    
+    if (body) {
+      bodyHtml = body.innerHTML;
+    } else {
+      // If no body tag, use everything after head or the whole content
+      const head = doc.querySelector('head');
+      if (head) {
+        // Remove head content and get the rest
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = htmlContent;
+        const headElement = tempDiv.querySelector('head');
+        if (headElement) {
+          headElement.remove();
+        }
+        bodyHtml = tempDiv.innerHTML.replace(/<\/?html[^>]*>/gi, '').replace(/<\/?body[^>]*>/gi, '').trim();
+      } else {
+        bodyHtml = htmlContent.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '').replace(/<title[^>]*>[\s\S]*?<\/title>/gi, '').trim();
+      }
+    }
+
+    console.log(`✅ Extracted components - CSS: ${css.length} chars, Body: ${bodyHtml.length} chars, Title: ${title}`);
+    
+    return {
+      css: css.trim(),
+      bodyHtml: bodyHtml.trim(),
+      title: title.trim()
+    };
+
+  } catch (error) {
+    console.error('❌ Error extracting HTML components:', error);
+    return this.extractHtmlComponentsManually(htmlContent);
+  }
+}
+/**
+ * Manual extraction as fallback method
+ */
+private extractHtmlComponentsManually(htmlContent: string): { css: string, bodyHtml: string, title: string } | null {
+  try {
+    console.log('🔧 Using manual extraction method...');
+
+    // Extract CSS from style tags
+    const cssMatches = htmlContent.match(/<style[^>]*>([\s\S]*?)<\/style>/gi);
+    let css = '';
+    if (cssMatches) {
+      cssMatches.forEach(match => {
+        const cssContent = match.replace(/<\/?style[^>]*>/gi, '');
+        css += cssContent + '\n';
+      });
+    }
+
+    // Extract title
+    const titleMatch = htmlContent.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
+    const title = titleMatch ? titleMatch[1].trim() : 'Untitled Page';
+
+    // Extract body content
+    let bodyHtml = '';
+    const bodyMatch = htmlContent.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+    
+    if (bodyMatch) {
+      bodyHtml = bodyMatch[1];
+    } else {
+      // If no body tags, clean up and use the content
+      bodyHtml = htmlContent
+        .replace(/<!DOCTYPE[^>]*>/gi, '')
+        .replace(/<\/?html[^>]*>/gi, '')
+        .replace(/<head[^>]*>[\s\S]*?<\/head>/gi, '')
+        .replace(/<\/?body[^>]*>/gi, '')
+        .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
+        .replace(/<title[^>]*>[\s\S]*?<\/title>/gi, '')
+        .trim();
+    }
+
+    if (!bodyHtml) {
+      console.warn('⚠️ No body content found');
+      return null;
+    }
+
+    console.log(`✅ Manual extraction complete - CSS: ${css.length} chars, Body: ${bodyHtml.length} chars`);
+    
+    return {
+      css: css.trim(),
+      bodyHtml: bodyHtml.trim(),
+      title: title
+    };
+
+  } catch (error) {
+    console.error('❌ Manual extraction failed:', error);
+    return null;
+  }
+}
+
+
+// Helper method for fragment extraction
+private extractFromFragment(fragment: HTMLElement, originalHtml: string): { css: string, bodyHtml: string, title: string } {
+  const styles = fragment.querySelectorAll('style');
+  let css = '';
+  styles.forEach(style => {
+    css += (style.textContent || '') + '\n';
+  });
+
+  return {
+    css: css.trim(),
+    bodyHtml: fragment.innerHTML || originalHtml,
+    title: 'Parsed Fragment'
+  };
+}
+
+// Emergency parsing method
+private emergencyParse(rawContent: string): { css: string, bodyHtml: string, title: string } | null {
+  // Try to extract any content that looks like HTML
+  const cssMatch = rawContent.match(/<style[^>]*>([\s\S]*?)<\/style>/gi);
+  const css = cssMatch ? cssMatch.join('\n') : '';
+  
+  const titleMatch = rawContent.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
+  const title = titleMatch ? titleMatch[1] : 'Emergency Parse';
+  
+  // Remove style and title tags, use rest as body
+  let bodyHtml = rawContent
+    .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
+    .replace(/<title[^>]*>[\s\S]*?<\/title>/gi, '')
+    .replace(/<!DOCTYPE[^>]*>/gi, '')
+    .replace(/<html[^>]*>/gi, '')
+    .replace(/<\/html>/gi, '')
+    .replace(/<head[^>]*>[\s\S]*?<\/head>/gi, '')
+    .replace(/<body[^>]*>/gi, '')
+    .replace(/<\/body>/gi, '')
+    .trim();
+
+  if (!bodyHtml) {
+    return null;
+  }
+
+  return { css: css.trim(), bodyHtml, title: title.trim() };
+}
+
 
     // Step 2: Generate prompts for all sections
     async generatePromptsForAllSections(treeJsonString: string) {
@@ -798,55 +1342,247 @@ hideLoading(): void {
 
     // 🔄 Maintain strict page and section render order
     missingHtmlPages: string[] = [];
-
-   async processPages(treeJson: any, forceRegenerate = false) {
-    console.log('Processing pages...');
-    this.missingHtmlPages = [];
+/**
+ * Enhanced page processing with proper loading management
+ */
+async processPages(treeJson: any, forceRegenerate = false) {
+  console.log('🚀 Starting enhanced page processing...');
+  this.showLoading('Analyzing existing pages...');
+  
+  this.missingHtmlPages = [];
+  const allExpectedPages = Object.keys(treeJson);
+  this.updateLoadingProgress(10, `Checking ${allExpectedPages.length} pages...`);
+  
+  // Enhanced existing file checking
+  if (!forceRegenerate) {
+    const { existingFiles, extractedContent } = await this.checkAllExistingFilesEnhanced(this.sitename, allExpectedPages);
     
-    for (const [pageName, sections] of Object.entries(treeJson)) {
-        this.pageRenderOrder.push(pageName);
+    if (Object.keys(existingFiles).length > 0) {
+      console.log(`🎉 Found ${Object.keys(existingFiles).length} existing files. Loading them...`);
+      this.updateLoadingProgress(30, 'Loading existing pages...');
+      
+      // Load existing files
+      for (const [pageName, html] of Object.entries(existingFiles)) {
+        if (!this.pageRenderOrder.includes(pageName)) {
+          this.pageRenderOrder.push(pageName);
+        }
+        
+        this.pageSections[pageName] = {
+          FullPage: this.sanitizer.bypassSecurityTrustHtml(html)
+        };
+        
+        // Initialize section order map
         this.sectionOrderMap[pageName] = this.sectionOrderMap[pageName] || [];
-
-        // Check for existing HTML first
-        if (!forceRegenerate) {
-            const existingHtml = await this.tryReadHtmlFromServer(this.sitename, pageName);
-            if (existingHtml) {
-                console.log(`Using existing HTML for ${pageName}`);
-                this.pageSections[pageName] = {
-                    FullPage: this.sanitizer.bypassSecurityTrustHtml(existingHtml)
-                };
-                continue; // Skip generation for existing pages
-            }
+        
+        // Store extracted content for potential editing
+        if (extractedContent[pageName]) {
+          // You can store this for future section editing if needed
+          // this.extractedPageContent[pageName] = extractedContent[pageName];
         }
-
-        this.missingHtmlPages.push(pageName);
-        const sectionPrompts: Record<string, string> = {};
-
-        // Process nested children first
-        if (sections['Children']) {
-            await this.processPages(sections['Children'], forceRegenerate);
-        }
-
-        // Generate only for missing sections
-        for (const [sectionName, sectionDescription] of Object.entries(sections)) {
-            if (sectionName === 'Children') continue;
-
-            this.sectionOrderMap[pageName].push(sectionName);
-            const prompt = await this.generatePromptFromSection(sectionName, sectionDescription);
-            sectionPrompts[sectionName] = prompt;
-        }
-
-        this.allPagePrompts[pageName] = sectionPrompts;
-        this.initialGeneratedPrompts[pageName] = { ...sectionPrompts };
-    }
-
-    // Only generate HTML for missing pages
-    if (this.missingHtmlPages.length > 0) {
-        await this.processAllPagesLiveUpdate();
-
+      }
+      
+      this.updateLoadingProgress(50, 'Identifying missing pages...');
+      
+      // Identify missing pages
+      const missingPages = allExpectedPages.filter(page => !existingFiles[page]);
+      
+      if (missingPages.length === 0) {
+        console.log('✅ All pages found! No generation needed.');
+        this.updateLoadingProgress(100, 'All pages loaded successfully!');
+        setTimeout(() => this.hideLoading(), 500);
+        return;
+      } else {
+        console.log(`📝 Processing ${missingPages.length} missing pages:`, missingPages);
+        this.updateLoadingProgress(60, `Generating ${missingPages.length} missing pages...`);
+        await this.processMissingPagesEnhanced(treeJson, missingPages);
+        return;
+      }
     }
+  }
+  
+  // If no existing files found or forceRegenerate is true
+  console.log('📝 No existing files found. Processing all pages...');
+  this.updateLoadingProgress(20, 'Generating all pages...');
+  await this.processAllPagesEnhanced(treeJson);
 }
 
+/**
+ * Enhanced processing for missing pages only
+ */
+private async processMissingPagesEnhanced(treeJson: any, missingPages: string[]) {
+  const totalPages = missingPages.length;
+  let processedPages = 0;
+  
+  for (const pageName of missingPages) {
+    if (!treeJson[pageName]) continue;
+    
+    this.updateLoadingProgress(
+      60 + (processedPages / totalPages) * 30, 
+      `Generating page: ${pageName}...`
+    );
+    
+    const sections = treeJson[pageName];
+    
+    if (!this.pageRenderOrder.includes(pageName)) {
+      this.pageRenderOrder.push(pageName);
+    }
+    
+    this.sectionOrderMap[pageName] = this.sectionOrderMap[pageName] || [];
+    this.missingHtmlPages.push(pageName);
+    
+    const sectionPrompts: Record<string, string> = {};
+    
+    // Process nested children first
+    if (sections['Children']) {
+      await this.processPages(sections['Children'], false);
+    }
+    
+    // Generate prompts for missing sections
+    for (const [sectionName, sectionDescription] of Object.entries(sections)) {
+      if (sectionName === 'Children') continue;
+      
+      this.sectionOrderMap[pageName].push(sectionName);
+      const prompt = await this.generatePromptFromSection(sectionName, sectionDescription as string);
+      sectionPrompts[sectionName] = prompt;
+    }
+    
+    this.allPagePrompts[pageName] = sectionPrompts;
+    this.initialGeneratedPrompts[pageName] = { ...sectionPrompts };
+    
+    processedPages++;
+  }
+  
+  if (this.missingHtmlPages.length > 0) {
+    this.updateLoadingProgress(90, 'Finalizing generated pages...');
+    await this.processAllPagesLiveUpdateEnhanced();
+  } else {
+    this.updateLoadingProgress(100, 'Processing complete!');
+    setTimeout(() => this.hideLoading(), 500);
+  }
+}
+
+/**
+ * Enhanced processing for all pages
+ */
+private async processAllPagesEnhanced(treeJson: any) {
+  const allPages = Object.keys(treeJson);
+  const totalPages = allPages.length;
+  let processedPages = 0;
+  
+  for (const [pageName, sections] of Object.entries(treeJson)) {
+    this.updateLoadingProgress(
+      20 + (processedPages / totalPages) * 50, 
+      `Processing page: ${pageName}...`
+    );
+    
+    if (!this.pageRenderOrder.includes(pageName)) {
+      this.pageRenderOrder.push(pageName);
+    }
+    
+    this.sectionOrderMap[pageName] = this.sectionOrderMap[pageName] || [];
+    this.missingHtmlPages.push(pageName);
+    
+    const sectionPrompts: Record<string, string> = {};
+    
+    // Process nested children first
+    if (sections['Children']) {
+      await this.processPages(sections['Children'], false);
+    }
+    
+    // Generate prompts for all sections
+    for (const [sectionName, sectionDescription] of Object.entries(sections)) {
+      if (sectionName === 'Children') continue;
+      
+      this.sectionOrderMap[pageName].push(sectionName);
+      const prompt = await this.generatePromptFromSection(sectionName, sectionDescription);
+      sectionPrompts[sectionName] = prompt;
+    }
+    
+    this.allPagePrompts[pageName] = sectionPrompts;
+    this.initialGeneratedPrompts[pageName] = { ...sectionPrompts };
+    
+    processedPages++;
+  }
+  
+  if (this.missingHtmlPages.length > 0) {
+    this.updateLoadingProgress(70, 'Generating HTML content...');
+    await this.processAllPagesLiveUpdateEnhanced();
+  } else {
+    this.updateLoadingProgress(100, 'Processing complete!');
+    setTimeout(() => this.hideLoading(), 500);
+  }
+}
+
+/**
+ * Enhanced live update processing with proper file saving
+ */
+async processAllPagesLiveUpdateEnhanced() {
+  const htmlGenerationTasks: Promise<void>[] = [];
+  const totalTasks = this.pageRenderOrder.length;
+  let completedTasks = 0;
+
+  // Process pages in order
+  for (const pageName of this.pageRenderOrder) {
+    const sectionMap = this.allPagePrompts[pageName];
+    if (!sectionMap) {
+      console.warn(`⚠️ No section map found for page: ${pageName}`);
+      continue;
+    }
+    
+    const task = this.processPageSectionsEnhanced(pageName, sectionMap).then(() => {
+      completedTasks++;
+      this.updateLoadingProgress(
+        70 + (completedTasks / totalTasks) * 20, 
+        `Generated ${completedTasks}/${totalTasks} pages...`
+      );
+    });
+    
+    htmlGenerationTasks.push(task);
+  }
+
+  await Promise.all(htmlGenerationTasks);
+
+  // Save only newly generated pages
+  this.updateLoadingProgress(95, 'Saving generated pages...');
+  await this.saveNewlyGeneratedPages();
+  
+  this.updateLoadingProgress(100, 'All pages loaded successfully!');
+  setTimeout(() => this.hideLoading(), 500);
+}
+
+/**
+ * Enhanced page section processing with proper HTML wrapping
+ */
+async processPageSectionsEnhanced(pageName: string, sectionMap: Record<string, string>) {
+  if (!sectionMap || typeof sectionMap !== 'object') {
+    console.warn(`⚠️ Skipping ${pageName} because sectionMap is invalid:`, sectionMap);
+    return;
+  }
+
+  const sectionHtmls: string[] = [];
+  this.sectionHtmls[pageName] = {};
+
+  const htmlTasks = Object.entries(sectionMap).map(async ([sectionName, jsonPrompt]) => {
+    const html = await this.generateJson({ sectionType: sectionName, jsonStructure: jsonPrompt });
+    sectionHtmls.push(html);
+    
+    // Store individual section HTML
+    this.sectionHtmls[pageName][sectionName] = html;
+  });
+
+  await Promise.all(htmlTasks);
+
+  // Create complete HTML structure for the page
+  const completeHtml = this.createCompleteHtml(pageName, COMMON_CSS, sectionHtmls.join('\n'));
+  
+  const safeHtml = this.sanitizer.bypassSecurityTrustHtml(completeHtml);
+  this.pageSections[pageName] = { FullPage: safeHtml };
+}
+
+
+
+
+
 
 
 
@@ -905,37 +1641,6 @@ HTML Only. No CSS.
                         const baseJsonString = JSON.stringify(baseJson, null, 2);
 
 
-
-                        // const enhancedPrompt = `
-                        // 🎯 Enhance the content of this section using the following context.
-                        
-                        // 🧠 Instructions:
-                        // - You are given an existing JSON structure for a UI section.
-                        // - Your job is to update ONLY the content-related fields like "text", "title", "label", "description", and "placeholder".
-                        // - You must NOT change the structure, hierarchy, tags, keys, class names, or styling values.
-                        // - You must NOT add or remove any keys or elements.
-                        // - You must return ONLY the updated JSON structure in valid format.
-                        
-                        // 📄 Page Prompt:
-                        // "${this.initialPrompt}"
-                        
-                        // 📦 Section Name:
-                        // "${sectionName}"
-                        
-                        // 📘 Section Description:
-                        // "${sectionDescription}"
-                        
-                        // 📌 Existing JSON (modify this only):
-                        // ${baseJsonString}
-                        
-                        // 🚫 Do NOT include:
-                        // - Any explanation, commentary, or markdown
-                        // - Any prefix like "Here is the updated JSON"
-                        // - Any new elements that were not already present
-                        
-                        // ✅ Output Requirement:
-                        // Only return the updated JSON structure — nothing else.`;
-
                         const enhancedPrompt = `
                         ${baseJsonString}
 
@@ -1001,22 +1706,19 @@ HTML Only. No CSS.
         await Promise.all(htmlGenerationTasks);
 
         // ✅ Now save the newly generated pages only
-        const fileMap: Record<string, string> = {};
+       const fileMap: Record<string, string> = {};
+        const formattedSiteName = this.formatSiteName(this.sitename);
+
         for (const pageName of this.missingHtmlPages) {
-            const pageData = this.pageSections[pageName];
-            const html = pageData?.FullPage?.toString() || '';
-            if (html) {
-                fileMap[pageName] = html;
-            } else {
-                console.warn(`⚠️ No FullPage HTML found for: ${pageName}`);
-            }
-        
-            // const html = this.pageSections[pageName].FullPage?.toString() || '';
-            // fileMap[pageName] = html;
+        const html = this.pageSections[pageName]?.FullPage?.toString() || '';
+        if (html) {
+            const sanitizedPageName = this.sanitizeFilename(pageName);
+            fileMap[sanitizedPageName] = html;
+        }
         }
 
         if (Object.keys(fileMap).length > 0) {
-            this.siteTreeService.createHtmlfile(this.sitename, fileMap).subscribe({
+        this.siteTreeService.createHtmlfile(this.siteId, formattedSiteName, fileMap).subscribe({
             next: (res) => {
                 this.toastr.success(`Saved ${Object.keys(fileMap).length} new HTML files`);
                               
@@ -1103,65 +1805,124 @@ previousPage(): void {
         this.pageSections[pageName] = { FullPage: safeHtml };
     }
 
-//     async processPageSections(pageName: string, sectionMap: Record<string, string>) {
-//   // Initialize section order map
-//   this.sectionOrderMap[pageName] = this.sectionOrderMap[pageName] || [];
-  
-//   // Clear existing sections
-//   this.sectionHtmls[pageName] = {};
+    // Add these methods to your WireframeRendererComponent class
 
-//   const htmlTasks = Object.entries(sectionMap).map(async ([sectionName, jsonPrompt]) => {
-//     const html = await this.generateJson({ sectionType: sectionName, jsonStructure: jsonPrompt });
+
+
+/**
+ * Create complete HTML structure with CSS and body content
+ */
+private createCompleteHtml(pageName: string, css: string, bodyHtml: string): string {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${pageName}</title>
+    <style>
+${css}
+
+/* Additional common styles */
+${COMMON_CSS}
+
+html, body {
+    margin: 0 !important;
+    padding: 0 !important;
+    min-height: 100% !important;
+    width: 100% !important;
+    font-family: 'Segoe UI', sans-serif !important;
+}
+    </style>
+</head>
+<body>
+${bodyHtml}
+</body>
+</html>`;
+}
+
+private async loadExistingPageForRendering(pageName: string, rawHtml: string): Promise<void> {
+  try {
+    console.log(`🔄 Loading existing page for rendering: ${pageName}`);
     
-//     // Store with proper ordering
-//     this.sectionOrderMap[pageName].push(sectionName);
-//     this.sectionHtmls[pageName][sectionName] = this.sanitizer.bypassSecurityTrustHtml(html);
-//   });
+    // Parse the existing HTML
+    const parsed = this.parseHtmlResponse(rawHtml);
+    
+    if (parsed) {
+      // Create properly structured HTML for rendering
+      const completeHtml = this.createCompleteHtml(pageName, parsed.css, parsed.bodyHtml);
+      
+      // Store for rendering with proper sanitization
+      this.pageSections[pageName] = {
+        FullPage: this.sanitizer.bypassSecurityTrustHtml(completeHtml)
+      };
+      
+      // Initialize section storage
+      this.sectionHtmls[pageName] = {};
+      this.allPagePrompts[pageName] = {};
+      
+      // Add to render order if not present
+      if (!this.pageRenderOrder.includes(pageName)) {
+        this.pageRenderOrder.push(pageName);
+      }
+      
+      // Initialize section order map
+      this.sectionOrderMap[pageName] = this.sectionOrderMap[pageName] || [];
+      
+      console.log(`✅ Successfully loaded existing page: ${pageName}`);
+    } else {
+      console.error(`❌ Failed to parse existing page: ${pageName}`);
+    }
+  } catch (error) {
+    console.error(`❌ Error loading existing page ${pageName}:`, error);
+  }
+}
+/**
+ * Updated createHtmlFiles method with proper error handling
+ */
 
-//   await Promise.all(htmlTasks);
+
+
+createHtmlFiles() {
+  const pageHtmlMap: Record<string, string> = {};
   
-//   // Update full page HTML with all sections
-//   this.updateFullPageHtml(pageName);
-// }
+  for (const [pageName, section] of Object.entries(this.pageSections)) {
+    let html = section.FullPage?.toString() || '';
+    
+    // Clean SafeValue if present and parse properly
+    if (html.includes('SafeValue must use [property]=binding:')) {
+      const parsed = this.parseHtmlResponse(html);
+      if (parsed) {
+        html = this.createCompleteHtml(pageName, parsed.css, parsed.bodyHtml);
+      }
+    }
+    
+    // Ensure we have valid HTML
+    if (!html.includes('<!DOCTYPE') && !html.includes('<html')) {
+      // If it's just body content, wrap it properly
+      html = this.createCompleteHtml(pageName, COMMON_CSS, html);
+    }
+    
+    const sanitizedPageName = this.sanitizeFilename(pageName);
+    pageHtmlMap[sanitizedPageName] = html;
+  }
 
-    // Generate JSON to HTML
-    // async generateJson(data: { jsonStructure: any, sectionType: string }): Promise<string> {
-    //     return new Promise((resolve) => {
-    //         try {
-    //             const parsedJson =
-    //                 typeof data.jsonStructure === 'string'
-    //                     ? JSON.parse(data.jsonStructure)
-    //                     : data.jsonStructure;
-
-    //             const payload = {
-    //                 sectionType: data.sectionType,
-    //                 jsonStructure: parsedJson
-    //             };
-
-    //             console.log('📤 Sending to HTML API:', parsedJson);
-
-    //             this.siteTreeService.generateHtml(parsedJson).subscribe({
-    //                 next: (res) => {
-    //                     console.log('✅ Response from HTML API:', res);
-    //                     if (res && res.msg) {
-    //                         console.log("CHECKING DEPLOYED URL ",res.deployedUrl)
-    //                         this.deployedUrl = res.deployedUrl;
-    //                         resolve(res.msg);
-    //                     } else {
-    //                         resolve('⚠️ No response received from HTML API.');
-    //                     }
-    //                 },
-    //                 error: (err) => {
-    //                     console.error('❌ HTML API Error:', err);
-    //                     resolve('⚠️ HTML API call failed.');
-    //                 }
-    //             });
-    //         } catch (err) {
-    //             console.error('❌ JSON parsing error before sending to API:', err);
-    //             resolve('⚠️ Invalid JSON structure.');
-    //         }
-    //     });
-    // }
+  console.log('📁 Saving all pages:', Object.keys(pageHtmlMap));
+  
+  this.siteTreeService.createHtmlfile(this.siteId, this.sitename, pageHtmlMap).subscribe({
+    next: (data) => {
+      console.log('✅ All files saved:', data);
+      this.toastr.success(`Saved ${Object.keys(pageHtmlMap).length} HTML files`);
+    },
+    error: (error) => {
+      console.error('❌ Error saving files:', error);
+      if (error.status >= 200 && error.status <= 299) {
+        this.toastr.success("Files created successfully");
+      } else {
+        this.toastr.error("Failed to create files");
+      }
+    }
+  });
+}
 async generateJson(data: { jsonStructure: any, sectionType: string }): Promise<string> {
     return new Promise((resolve) => {
         try {
@@ -1261,57 +2022,6 @@ downloadHtml(pageName: string) {
   link.click();
   window.URL.revokeObjectURL(url);
 }
-
-/*
-///// commited code //// download 
-// Download HTML
-    downloadHtml(pageName: string) {
-    const sectionOrder = this.sectionOrderMap[pageName] || Object.keys(this.sectionHtmls[pageName] || {});
-    let fullHtml = '';
-
-    for (const sectionName of sectionOrder) {
-        const html = this.sectionHtmls[pageName]?.[sectionName];
-        if (html) {
-            fullHtml += html + '\n\n';
-        }
-    }
-        // const fullHtml = Object.values(this.pageSections[pageName]).join('\n');
-
-        const finalHtml = `
-        <!DOCTYPE html>
-        <html lang="en">
-        <head>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <title>${pageName}</title>
-            <style>
-                ${COMMON_CSS}
-                
-                html, body {
-                    margin: 0 !important;
-                    padding: 0 !important;
-                    min-height: 100% !important;
-                    width: 100% !important;
-                    font-family: 'Segoe UI', sans-serif !important;
-                }
-            
-            </style>
-        </head>
-        <body>
-                ${fullHtml}
-        </body>
-        </html>`;
-        
-    // const fullHtml = Object.values(this.pageSections[pageName]).join('\n');
-    const blob = new Blob([finalHtml], { type: 'text/html' });
-    const url = window.URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `${pageName}.html`;
-    link.click();
-    window.URL.revokeObjectURL(url);
-    }
-*/ 
     // Upload HTML files
     buildWireframe(projId: number) {
         const pageHtmlMap: Record<string, string> = {};
@@ -1346,42 +2056,49 @@ downloadHtml(pageName: string) {
 
     
 
-    createHtmlFiles() {
-    const pageHtmlMap: Record<string, string> = {};
-    for (const [pageName, section] of Object.entries(this.pageSections)) {
-        const html = section.FullPage?.toString() || '';
-        pageHtmlMap[pageName] = html;
-    }
-
-    console.log('name nad pages ', this.sitename ,' and ',pageHtmlMap )
-    this.siteTreeService.createHtmlfile(this.sitename, pageHtmlMap).subscribe(
-        (data) => {
-            console.log('after create file ', data);
-            if (data || data.status >= 200 && data.status <= 299) {
-                this.toastr.success("File Created");
-            }
-            //   setTimeout(() => {
-            //       this.ngOnInit();
-            //   }, 500);
-
-        }, (error) => {
-            console.log(error);
-            if (error.status >= 200 && error.status <= 299) {
-                this.toastr.success("file Created");
-            }
-            if (error.status >= 400 && error.status <= 499) {
-                this.toastr.error("Not Created");
-            }
-            if (error.status >= 500 && error.status <= 599) {
-                this.toastr.error("Not Created");
-            }
-        });
-    //   setTimeout(() => {
-    //       this.ngOnInit();
-    //   }, 500);
 
+// Update your helper methods
+private formatSiteName(name: string): string {
+  return name
+    .replace(/([a-z])([A-Z])/g, '$1_$2') // Convert camelCase to snake_case
+    .replace(/\s+/g, '_') // Replace spaces with underscores
+    .toLowerCase();
 }
 
+private sanitizeFilename(filename: string): string {
+  return filename
+    .replace(/\s+/g, '_') // Replace spaces with underscores
+    .replace(/[^a-zA-Z0-9_]/g, '') // Remove special chars except underscores
+    .toLowerCase();
+}
+
+
+private async tryReadHtmlFromServer(siteName: string, pageName: string): Promise<string | null> {
+  const formattedSite = this.formatSiteName(siteName);
+  const sanitizedPage = this.sanitizeFilename(pageName);
+
+  return new Promise((resolve) => {
+    this.siteTreeService.readPages(formattedSite, sanitizedPage).subscribe({
+      next: (res) => {
+        if (res === '' || res == null || res.includes('❌ File not found')) {
+          resolve(null);
+        } else {
+          resolve(res);
+        }
+      },
+      error: (err) => {
+        if (err.status === 404) {
+          resolve(null);
+        } else {
+          console.error('Error in readPages:', err);
+          resolve(null);
+        }
+      }
+    });
+  });
+}
+
+
 async recreateWireframe() {
     this.toastr.info('⏳ Recreating all wireframes...');
 
@@ -1396,27 +2113,7 @@ async recreateWireframe() {
     this.toastr.success('✅ Recreated all wireframes and saved HTML files.');
 }
 
-private async tryReadHtmlFromServer(siteName: string, pageName: string): Promise<string | null> {
-    return new Promise((resolve) => {
-        this.siteTreeService.readPages(siteName, pageName).subscribe({
-            next: (res) => {
-                try {
-                    if (res === '' || res == null) {
-                        resolve(null);
-                    } else {
-                        resolve(res);
-                    }
-                } catch (err) {
-                    throw new Error('Error processing response: ' + err);
-                }
-            },
-            error: (err) => {
-                console.error('Error in readPages:', err);
-                resolve(null);
-            }
-        });
-    });
-}
+
 
 
     // Regenerate specific wireframe
@@ -1816,28 +2513,55 @@ onPageDrop(event: CdkDragDrop<string[]>) {
     
     
 // Modified drop handler
-onSectionDrop(event: CdkDragDrop<string[]>) {
+onSectionDrop(event: CdkDragDrop<string[]>, pageName?: string): void {
+  const targetPage = pageName || this.getCurrentPageName();
+  const sourceArray = this.getPageSections(targetPage);
+  
   if (event.previousContainer === event.container) {
-    moveItemInArray(
-      event.container.data,
-      event.previousIndex,
-      event.currentIndex
-    );
+    // Reordering within the same page
+    moveItemInArray(sourceArray, event.previousIndex, event.currentIndex);
   } else {
+    // Moving between pages - need to handle cross-page moves
+    const sourcePageSections = event.previousContainer.data;
+    const targetPageSections = event.container.data;
+    
     transferArrayItem(
-      event.previousContainer.data,
-      event.container.data,
+      sourcePageSections,
+      targetPageSections,
       event.previousIndex,
       event.currentIndex
     );
   }
   
-  // Update section order map
-  const pageName = this.getCurrentPageName();
-  this.sectionOrderMap[pageName] = [...event.container.data];
   this.cdr.detectChanges();
 }
 
+getPageSections(pageName: string): string[] {
+  if (this.sectionHtmls[pageName]) {
+    return Object.keys(this.sectionHtmls[pageName]);
+  }
+  return [];
+}
+
+// Set current page focus
+setCurrentPage(index: number): void {
+  this.currentPageIndex = index;
+  this.cdr.detectChanges();
+}
+
+// Copy specific page to clipboard
+copyPageToClipboard(pageName?: string): void {
+  const pageToSelect = pageName || this.getCurrentPageName();
+  const html = this.mapofPageAndHtmlBody[pageToSelect];
+  
+  if (html) {
+    navigator.clipboard.writeText(html).then(() => {
+      this.toastr.success(`${pageToSelect} copied to clipboard!`);
+    }).catch(() => {
+      this.toastr.error('Failed to copy to clipboard');
+    });
+  }
+}
 
 
 
@@ -2077,13 +2801,13 @@ endPan(): void {
     onSectionEdit(event: any) {
         // This is handled in saveSectionEdit
     }
-copyPageToClipboard(): void {
-  const currentPage = this.getCurrentPageName();
-  const html = this.pageSections[currentPage]?.FullPage?.toString() || '';
-  navigator.clipboard.writeText(html).then(() => {
-    this.toastr.success(`Copied ${currentPage} to clipboard`);
-  });
-}
+// copyPageToClipboard(): void {
+//   const currentPage = this.getCurrentPageName();
+//   const html = this.pageSections[currentPage]?.FullPage?.toString() || '';
+//   navigator.clipboard.writeText(html).then(() => {
+//     this.toastr.success(`Copied ${currentPage} to clipboard`);
+//   });
+// }
 
 downloadCurrentPage(): void {
   const currentPage = this.getCurrentPageName();
@@ -2481,6 +3205,302 @@ getCurrentPageName(): string {
         this.newSectionDescription = '';
     }
 
+
+    missingPages:string[] = [];
+    existingPages:string[] = [];
+
+   async dividePagesToExistingOrNew(jsonOutput: string, siteName: string) {
+  let parseJson = JSON.parse(jsonOutput);
+
+  // Extract pages in the exact order they appear in JSON
+  function extractPagesInOrder(obj: any): string[] {
+    let pages: string[] = [];
+    for (const [key, value] of Object.entries(obj)) {
+      pages.push(key);
+      if (value && typeof value === 'object' && value['Children']) {
+        pages = pages.concat(extractPagesInOrder(value['Children']));
+      }
+    }
+    return pages;
+  }
+
+  // Get pages in original JSON order
+  let orderedPages = extractPagesInOrder(parseJson);
+  console.log('Pages in JSON order:', orderedPages);
+
+  this.existingPages = [];
+  this.missingPages = [];
+
+  // Check existence while maintaining order
+  for (const page of orderedPages) {
+    const exists = await this.checkIfPageExists(siteName, page);
+    if (exists) {
+      this.existingPages.push(page);
+    } else {
+      this.missingPages.push(page);
+    }
+  }
+
+  console.log('Missing Pages:', this.missingPages);
+  console.log('Existing Pages:', this.existingPages);
+  
+  this.showLoading('Loading existing and missing pages...');
+  this.updateLoadingProgress(10, 'Fetching existing pages...');
+
+  await this.mapOfExistingPagesWithHtmlCss(this.existingPages);
+
+  this.updateLoadingProgress(50, 'Generating missing pages...');
+  await this.generateMissingPagesWithAI(this.missingPages, jsonOutput);
+
+  this.updateLoadingProgress(90, 'Finalizing UI...');
+  
+  // Clear and rebuild pageRenderOrder in JSON order
+  // Replace your current page ordering logic with:
+      this.pageRenderOrder = [];
+      for (const page of orderedPages) { // orderedPages maintains JSON order
+        if (this.mapofPageAndHtmlBody[page]) {
+          this.pageSections[page] = { FullPage: this.mapofPageAndHtmlBody[page] };
+          this.pageRenderOrder.push(page);
+        }
+      }
+
+  console.log('Final pageRenderOrder:', this.pageRenderOrder);
+
+  this.updateLoadingProgress(100, 'All pages loaded!');
+  setTimeout(() => this.hideLoading(), 500);
+  this.cdr.detectChanges();
+}
+
+createPageOrderFromJson(jsonInput: string): string[] {
+  try {
+    const parsedJson = JSON.parse(jsonInput);
+    const orderedPages: string[] = [];
+    
+    // Recursively traverse JSON to maintain order
+    function traverseInOrder(obj: any) {
+      Object.keys(obj).forEach(key => {
+        orderedPages.push(key);
+        if (obj[key] && obj[key]['Children']) {
+          traverseInOrder(obj[key]['Children']);
+        }
+      });
+    }
+    
+    traverseInOrder(parsedJson);
+    return orderedPages;
+  } catch (error) {
+    console.error('Error parsing JSON for page order:', error);
+    return [];
+  }
+}
+
+    async checkIfPageExists(siteName: string, pageName: string): Promise<boolean> {
+      return new Promise((resolve) => {
+        this.siteTreeService.readPages(siteName, pageName).subscribe({
+          next: (response) => {
+            // Adjust this check based on your API's actual response
+            if (response && (response.exists || (typeof response === 'string' && response.trim() !== '' && !response.includes('❌ File not found')))) {
+              console.log(`Page "${pageName}" exists in site "${siteName}"`);
+              resolve(true);
+            } else {
+              console.log(`Page "${pageName}" does not exist in site "${siteName}"`);
+              resolve(false);
+            }
+          },
+          error: (error) => {
+            console.error(`Error checking page "${pageName}" in site "${siteName}":`, error);
+            resolve(false);
+          }
+        });
+      });
+    }
+
+    mapofPageAndHtmlBody: Record<string, string> = {};
+
+
+async mapOfExistingPagesWithHtmlCss(existingPages: string[]): Promise<void> {
+  this.mapofPageAndHtmlBody = {};
+  
+  // Create promises for all page requests
+  const pagePromises = existingPages.map(page => {
+    return new Promise<void>((resolve, reject) => {
+      this.siteTreeService.readPages(this.sitename, page).subscribe({
+        next: (response) => {
+          if (typeof response === 'string') {
+            let htmlBody: string = response;
+            // Remove Angular SafeValue wrapper if present
+            const safeValueIndex = htmlBody.indexOf('<!DOCTYPE');
+            if (htmlBody.includes('SafeValue must use [property]=binding:') && safeValueIndex !== -1) {
+              htmlBody = htmlBody.substring(safeValueIndex);
+            }
+            
+            this.mapofPageAndHtmlBody[page] = htmlBody;
+            
+            // Calculate sectionHtmls for existing pages
+            this.calculateSectionHtmlsForExistingPage(page, htmlBody);
+            
+            console.log(`Page "${page}" HTML extracted successfully.`);
+            resolve();
+          } else {
+            reject(new Error(`Invalid response for page ${page}`));
+          }
+        },
+        error: (error) => {
+          console.error(`Error reading page "${page}":`, error);
+          reject(error);
+        }
+      });
+    });
+  });
+
+  // Wait for all pages to load
+  try {
+    await Promise.all(pagePromises);
+    console.log('All existing pages loaded:', this.mapofPageAndHtmlBody);
+  } catch (error) {
+    console.error('Error loading some pages:', error);
+  }
+}
+
+// New method to calculate sectionHtmls for existing pages
+calculateSectionHtmlsForExistingPage(pageName: string, htmlContent: string): void {
+  // Initialize if not exists
+  if (!this.sectionHtmls[pageName]) {
+    this.sectionHtmls[pageName] = {};
+  }
+  
+  // Parse HTML to extract sections (you might need to adjust this based on your HTML structure)
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(htmlContent, 'text/html');
+  
+  // Extract sections based on your HTML structure - adjust selectors as needed
+  const sections = doc.querySelectorAll('[data-section]');
+  sections.forEach(section => {
+    const sectionName = section.getAttribute('data-section');
+    if (sectionName) {
+      this.sectionHtmls[pageName][sectionName] = this.sanitizer.bypassSecurityTrustHtml(section.outerHTML);
+    }
+  });
+  
+  // If no sections found, create a default "FullPage" section
+  if (Object.keys(this.sectionHtmls[pageName]).length === 0) {
+    this.sectionHtmls[pageName]['FullPage'] = this.sanitizer.bypassSecurityTrustHtml(htmlContent);
+  }
+}
+    async generateMissingPagesWithAI(missingPages: string[], jsonInput: string): Promise<void> {
+  if (!missingPages.length) {
+    this.toastr.info('No missing pages to generate');
+    return;
+  }
+  if (!jsonInput) {
+    this.toastr.error('No JSON input found for site structure.');
+    return;
+  }
+
+  let parsedJson: any;
+  try {
+    parsedJson = typeof jsonInput === 'string' ? JSON.parse(jsonInput) : jsonInput;
+  } catch (err) {
+    this.toastr.error('Invalid JSON input.');
+    return;
+  }
+
+  // Helper to recursively get all page definitions (including nested Children)
+  function getPageDefinitions(obj: any): Record<string, any> {
+    let pages: Record<string, any> = {};
+    for (const [key, value] of Object.entries(obj)) {
+      pages[key] = value;
+      if (value && typeof value === 'object' && value['Children']) {
+        Object.assign(pages, getPageDefinitions(value['Children']));
+      }
+    }
+    return pages;
+  }
+
+  const allPagesDef = getPageDefinitions(parsedJson);
+  console.log('All Pages Definitions:', allPagesDef);
+
+  // Create all pages first, then save them
+  let pagesToSave = new Map<string, string>();
+
+  for (const pageName of missingPages) {
+    const pageDef = allPagesDef[pageName];
+    if (!pageDef) continue;
+
+    // Get all sections for this page (excluding Children)
+    const sectionEntries = Object.entries(pageDef).filter(([k]) => k !== 'Children');
+    const sectionHtmls: string[] = [];
+    this.sectionHtmls[pageName] = {};
+    this.allPagePrompts[pageName] = {};
+
+    
+
+    for (const [sectionName, sectionDescription] of sectionEntries) {
+      // Generate prompt for section, passing the full jsonInput as context
+      const prompt = await this.generatePromptFromSection(sectionName, sectionDescription as string);
+      this.allPagePrompts[pageName][sectionName] = prompt;
+
+      // Generate HTML for section
+      const html = await this.generateJson({ sectionType: sectionName, jsonStructure: prompt });
+      this.sectionHtmls[pageName][sectionName] = html;
+      sectionHtmls.push(html);
+    }
+
+    // Combine all section HTMLs and CSS for the page
+    const finalHtml = this.createCompleteHtml(pageName, COMMON_CSS, sectionHtmls.join('\n'));
+
+    this.pageSections[pageName] = { FullPage: finalHtml };
+    this.mapofPageAndHtmlBody[pageName] = finalHtml;
+    
+    // Add to the batch for saving
+    // pagesToSave.map(pageName: finalHtml.toString());
+
+    pagesToSave.set(pageName, finalHtml.toString());
+
+    console.log(pagesToSave)
+
+    this.siteTreeService.createHtmlfile(this.siteId, this.sitename, pagesToSave).subscribe({
+      next: (response) => {
+        console.log('All pages created successfully:', Array.from(pagesToSave.keys()));
+        this.toastr.success(`Generated and saved ${pagesToSave} pages successfully.`);
+      },
+      error: (error) => {
+        console.error('Error creating pages:', error);
+        this.toastr.error('Failed to save some generated pages.');
+      }
+    });
+
+  }
+
+  // Save all pages at once after they're all created
+  if (pagesToSave.size > 0) {
+    this.siteTreeService.createHtmlfile(this.siteId, this.sitename, pagesToSave).subscribe({
+      next: (response) => {
+        console.log('All pages created successfully:', Array.from(pagesToSave.keys()));
+        this.toastr.success(`Generated and saved ${pagesToSave.size} pages successfully.`);
+      },
+      error: (error) => {
+        console.error('Error creating pages:', error);
+        this.toastr.error('Failed to save some generated pages.');
+      }
+    });
+  }
+
+  console.log('Map of All Pages with HTML:', this.mapofPageAndHtmlBody);
+  this.toastr.success('Generated all missing pages with AI.');
+  this.cdr.detectChanges();
+}
+    
+
+    toggleViewMode(): void {
+  // Toggle between grid and single-page view
+  this.isGridView = !this.isGridView;
+}
+
+// Add this property to your component
+isGridView: boolean = false; // Set to true for grid, false for single page
+    
+
    
 }
 
@@ -2489,6 +3509,155 @@ getCurrentPageName(): string {
 
 
 
+                        // const enhancedPrompt = `
+                        // 🎯 Enhance the content of this section using the following context.
+                        
+                        // 🧠 Instructions:
+                        // - You are given an existing JSON structure for a UI section.
+                        // - Your job is to update ONLY the content-related fields like "text", "title", "label", "description", and "placeholder".
+                        // - You must NOT change the structure, hierarchy, tags, keys, class names, or styling values.
+                        // - You must NOT add or remove any keys or elements.
+                        // - You must return ONLY the updated JSON structure in valid format.
+                        
+                        // 📄 Page Prompt:
+                        // "${this.initialPrompt}"
+                        
+                        // 📦 Section Name:
+                        // "${sectionName}"
+                        
+                        // 📘 Section Description:
+                        // "${sectionDescription}"
+                        
+                        // 📌 Existing JSON (modify this only):
+                        // ${baseJsonString}
+                        
+                        // 🚫 Do NOT include:
+                        // - Any explanation, commentary, or markdown
+                        // - Any prefix like "Here is the updated JSON"
+                        // - Any new elements that were not already present
+                        
+                        // ✅ Output Requirement:
+                        // Only return the updated JSON structure — nothing else.`;
+
+                        
+//     async processPageSections(pageName: string, sectionMap: Record<string, string>) {
+//   // Initialize section order map
+//   this.sectionOrderMap[pageName] = this.sectionOrderMap[pageName] || [];
+  
+//   // Clear existing sections
+//   this.sectionHtmls[pageName] = {};
+
+//   const htmlTasks = Object.entries(sectionMap).map(async ([sectionName, jsonPrompt]) => {
+//     const html = await this.generateJson({ sectionType: sectionName, jsonStructure: jsonPrompt });
+    
+//     // Store with proper ordering
+//     this.sectionOrderMap[pageName].push(sectionName);
+//     this.sectionHtmls[pageName][sectionName] = this.sanitizer.bypassSecurityTrustHtml(html);
+//   });
+
+//   await Promise.all(htmlTasks);
+  
+//   // Update full page HTML with all sections
+//   this.updateFullPageHtml(pageName);
+// }
+
+    // Generate JSON to HTML
+    // async generateJson(data: { jsonStructure: any, sectionType: string }): Promise<string> {
+    //     return new Promise((resolve) => {
+    //         try {
+    //             const parsedJson =
+    //                 typeof data.jsonStructure === 'string'
+    //                     ? JSON.parse(data.jsonStructure)
+    //                     : data.jsonStructure;
+
+    //             const payload = {
+    //                 sectionType: data.sectionType,
+    //                 jsonStructure: parsedJson
+    //             };
+
+    //             console.log('📤 Sending to HTML API:', parsedJson);
+
+    //             this.siteTreeService.generateHtml(parsedJson).subscribe({
+    //                 next: (res) => {
+    //                     console.log('✅ Response from HTML API:', res);
+    //                     if (res && res.msg) {
+    //                         console.log("CHECKING DEPLOYED URL ",res.deployedUrl)
+    //                         this.deployedUrl = res.deployedUrl;
+    //                         resolve(res.msg);
+    //                     } else {
+    //                         resolve('⚠️ No response received from HTML API.');
+    //                     }
+    //                 },
+    //                 error: (err) => {
+    //                     console.error('❌ HTML API Error:', err);
+    //                     resolve('⚠️ HTML API call failed.');
+    //                 }
+    //             });
+    //         } catch (err) {
+    //             console.error('❌ JSON parsing error before sending to API:', err);
+    //             resolve('⚠️ Invalid JSON structure.');
+    //         }
+    //     });
+    // }
+
+    
+/*
+///// commited code //// download 
+// Download HTML
+    downloadHtml(pageName: string) {
+    const sectionOrder = this.sectionOrderMap[pageName] || Object.keys(this.sectionHtmls[pageName] || {});
+    let fullHtml = '';
+
+    for (const sectionName of sectionOrder) {
+        const html = this.sectionHtmls[pageName]?.[sectionName];
+        if (html) {
+            fullHtml += html + '\n\n';
+        }
+    }
+        // const fullHtml = Object.values(this.pageSections[pageName]).join('\n');
+
+        const finalHtml = `
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>${pageName}</title>
+            <style>
+                ${COMMON_CSS}
+                
+                html, body {
+                    margin: 0 !important;
+                    padding: 0 !important;
+                    min-height: 100% !important;
+                    width: 100% !important;
+                    font-family: 'Segoe UI', sans-serif !important;
+                }
+            
+            </style>
+        </head>
+        <body>
+                ${fullHtml}
+        </body>
+        </html>`;
+        
+    // const fullHtml = Object.values(this.pageSections[pageName]).join('\n');
+    const blob = new Blob([finalHtml], { type: 'text/html' });
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${pageName}.html`;
+    link.click();
+    window.URL.revokeObjectURL(url);
+    }
+*/ 
+
+
+
+
+
+
+
 // // wireframe-renderer.component.ts
 // import { Component, Input, OnInit } from '@angular/core';
 // import { DomSanitizer, SafeHtml } from '@angular/platform-browser';