diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/vpspack/Visa_application/VisaOrderWorkflow/editstepper.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/vpspack/Visa_application/VisaOrderWorkflow/editstepper.component.ts
index f630fda..e269bdc 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/vpspack/Visa_application/VisaOrderWorkflow/editstepper.component.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/vpspack/Visa_application/VisaOrderWorkflow/editstepper.component.ts
@@ -52,6 +52,7 @@ export class EditstepperComponent implements OnInit {
 
 
   public entryForm: FormGroup;
+  
   submitted = false;
   rowSelected: any = {};
   modalcomplete = false;
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder _gemini varuant_6.zip b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder _gemini varuant_6.zip
new file mode 100644
index 0000000..fb5cb24
Binary files /dev/null and b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder _gemini varuant_6.zip differ
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi gemini_4.zip b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi gemini_4.zip
new file mode 100644
index 0000000..5f518ec
Binary files /dev/null and b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi gemini_4.zip differ
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 8c31890..ec042e1 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
@@ -135,203 +135,282 @@
 <div class="wireframe-controls-sidebar" 
      [class.collapsed]="sidebarCollapsed"
      [class.mobile-open]="sidebarOpen"
-     [class.visible]="sidebarOpen || !isMobile"> 
+     [class.visible]="sidebarOpen || !isMobile">
      
-    <!-- Sidebar Header -->
-    <div class="sidebar-header">
-       <div (click)="toggleSidebar()">
-        <i class="fas" [ngClass]="sidebarCollapsed ? 'fa-chevron-left' : 'fa-chevron-right'"></i>
+  <!-- Loading Overlay -->
+  <!-- <div *ngIf="isLoading" class="loading-overlay">
+    <mat-spinner diameter="40"></mat-spinner>
+    <div class="loading-text">Generating Pages...</div>
+  </div> -->
 
+  <!-- Updated Close Button -->
+  <div class="sidebar-header">
+    <button 
+      (click)="toggleSidebar()" 
+      class="close-btn"
+      style="
+      background: none;
+      border: none;
+      color: #060606;
+      cursor: pointer;
+      padding: 8px;
+      border-radius: 50%;
+      transition: all 0.2s ease-in-out;
+      font-size: 16px;
+      "
+    >
+      <i class="fas" [ngClass]="sidebarCollapsed ? 'fa-chevron-left' : 'fa-chevron-right'"></i>
+    </button>
+    <h2>Wireframe Controls</h2>
+  </div>
+
+  <!-- Main Actions Section -->
+  <div class="sidebar-content">
+    
+  <div class="control-section search-section fade-in-up" [@fadeIn]>
+  <h3>
+    <i class="fas fa-search" style="margin-right: 6px; color: #17a2b8;"></i>
+    Search Sections
+  </h3>
+  
+  <div class="search-container">
+    <input 
+      type="text" 
+      class="search-input" 
+      [(ngModel)]="searchTerm" 
+      (input)="onSearchChange()"
+      placeholder="Search sections..."
+    >  </div>
+</div>
+
+
+
+
+  
+
+    <!-- Global Sections -->
+ <div class="control-section fade-in-left" [@fadeIn]>
+  <h3>
+    <i class="fas fa-globe" style="margin-right: 6px; color: #6f42c1;"></i>
+    Global Sections
+  </h3>
+  
+  <div class="wf-section-list" *ngIf="getFilteredSections(globalSections).length">
+        <div class="wf-section-item" 
+             *ngFor="let section of getFilteredSections(globalSections)"
+             (click)="addSectionFromTemplate(section)">
+          <div class="section-icon">
+            <i [class]="section.icon"></i>
+          </div>
+          <div class="section-info">
+            <div class="section-name">{{ section.type }}</div>
+            <div class="section-desc">{{ section.description }}</div>
+          </div>
+        </div>
+      </div>
     </div>
 
-       
-      <h2>
-        
-        <i class="fas fa-cogs" style="margin-right: 8px; font-size: 18px;"></i>
-         
-        Wireframe Controls
-      </h2>
-      
+    <!-- Standard Sections -->
+<div class="control-section fade-in-left" [@fadeIn]>
+  <h3>
+    <i class="fas fa-th-large" style="margin-right: 6px; color: #fd7e14;"></i>
+    Standard Sections
+  </h3>
+  
+  <div class="wf-section-list" *ngIf="getFilteredSections(standardSections).length">
+        <div class="wf-section-item" 
+             *ngFor="let section of getFilteredSections(standardSections)"
+             (click)="addSectionFromTemplate(section)">
+          <div class="section-icon">
+            <i [class]="section.icon"></i>
+          </div>
+          <div class="section-info">
+            <div class="section-name">{{ section.type }}</div>
+            <div class="section-desc">{{ section.description }}</div>
+          </div>
+        </div>
+      </div>
     </div>
-   
-
-    <!-- Main Actions Section -->
-    <div class="sidebar-content">
-      <div class="control-section fade-in-up" [@fadeIn]>
-        <h3>
-          <i class="fas fa-play-circle" style="margin-right: 6px; color: #28a745;"></i>
-          Generate Wireframe
-        </h3>
-        
-        <button class="action-btn primary" (click)="buildWireframe(37688)" [@buttonHover]>
-          <i class="fas fa-hammer"></i>
-          Build Wireframe
-        </button>
-
-        <button class="action-btn primary" (click)="regenerateAllModifiedSections()">
-          <i class="fas fa-sync-alt"></i>
-          Regenerate Modified
-        </button>
-
-        <button class="action-btn secondary" (click)="createHtmlFiles()">
-          <i class="fas fa-save"></i>
-          Save All HTML Files
-        </button>
-
-        <button class="action-btn secondary" (click)="recreateWireframe()">
-          <i class="fas fa-redo"></i>
-          Recreate Wireframe
-        </button>
-
-        <button class="action-btn secondary">
-<i class="fa-solid fa-link"></i>
-  {{ deployedUrl ? 'DEPLOYED URL: ' + deployedUrl : 'NO URL YET' }}
-</button>
 
+    <!-- Custom Sections -->
+<div class="control-section fade-in-left" [@fadeIn]>
+  <h3>
+    <i class="fas fa-puzzle-piece" style="margin-right: 6px; color: #e83e8c;"></i>
+    Custom Sections
+  </h3>
+  
+  <div class="wf-section-list" *ngIf="getFilteredSections(customSections).length">
+        <div class="wf-section-item" 
+             *ngFor="let section of getFilteredSections(customSections)"
+             (click)="addSectionFromTemplate(section)">
+          <div class="section-icon">
+            <i [class]="section.icon"></i>
+          </div>
+          <div class="section-info">
+            <div class="section-name">{{ section.type }}</div>
+            <div class="section-desc">{{ section.description }}</div>
+          </div>
+          <button class="delete-custom-btn" (click)="deleteCustomSection($event, section)">
+            <i class="fas fa-trash"></i>
+          </button>
+        </div>
       </div>
 
-      <!-- Navbar Controls Section -->
-      <div class="control-section fade-in-left" [@fadeIn]>
-        <h3>
-          <i class="fas fa-bars" style="margin-right: 6px; color: #17a2b8;"></i>
-          Navbar Editor
-        </h3>
-        
+      <!-- Add Custom Section -->
+      <div class="add-custom-section">
+        <button class="action-btn secondary full-width" (click)="showAddCustomSectionModal()">
+          <i class="fas fa-plus"></i>
+          Add Custom Section
+        </button>
+      </div>
+    </div>
+
+
+    <!-- Additional Features Section -->
+    <div class="control-section fade-in-up" [@fadeIn]>
+      <h3>
+        <i class="fas fa-tools" style="margin-right: 6px; color: #20c997;"></i>
+        Additional Features
+      </h3>
+      
+      <button class="action-btn primary" (click)="createHtmlFiles()">
+        <i class="fas fa-save"></i>
+        Save All HTML Files
+      </button>
+
+      <button class="action-btn secondary" (click)="recreateWireframe()">
+        <i class="fas fa-redo"></i>
+        Regenerate Wireframe
+      </button>
+
+      <button class="action-btn primary" (click)="showNavbarEditor()">
+        <i class="fas fa-bars"></i>
+        Navbar Editor
+      </button>
+
+            <button class="action-btn secondary" (click)="buildWireframe(37688)" [@buttonHover]>
+        <i class="fas fa-hammer"></i>
+        Build Wireframe
+      </button>
+
+      <button class="action-btn primary" (click)="regenerateAllModifiedSections()">
+        <i class="fas fa-sync-alt"></i>
+        Regenerate Modified
+      </button>
+
+      <button class="action-btn secondary">
+        <i class="fas fa-external-link-alt"></i>
+        {{ deployedUrl ? 'DEPLOYED URL: ' + deployedUrl : 'NO URL YET' }}
+      </button>
+
+    </div>
+
+    <!-- Commented out sections as requested -->
+    <!--
+    <div class="control-section bounce-in" [@fadeIn]>
+      <h3>
+        <i class="fas fa-palette" style="margin-right: 6px; color: #fd7e14;"></i>
+        Style Controls
+      </h3>
+      
+      <div class="style-grid">
         <div class="form-group">
-          <label for="navbarSelect">Select Navbar Page:</label>
-          <select id="navbarSelect" class="form-control" [(ngModel)]="selectedNavbarPage" 
-                  (change)="selectedNavbarPage && selectNavbar(selectedNavbarPage)"
-                  [@focusBorder]>
-            <option value="">Choose a page...</option>
-            <option *ngFor="let page of pageRenderOrder" [value]="page">
-              <i class="fas fa-file-alt"></i> {{ page }}
-            </option>
+          <label>Font Size:</label>
+          <select class="form-control" [(ngModel)]="liveStyles.fontSize">
+            <option value="">Default</option>
+            <option *ngFor="let size of fontSizes" [value]="size">{{ size }}</option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label>Font Weight:</label>
+          <select class="form-control" [(ngModel)]="liveStyles.fontWeight">
+            <option value="">Default</option>
+            <option *ngFor="let weight of fontWeights" [value]="weight">{{ weight }}</option>
           </select>
         </div>
       </div>
 
-      <!-- Style Controls Section -->
-      <div class="control-section bounce-in" [@fadeIn]>
-        <h3>
-          <i class="fas fa-palette" style="margin-right: 6px; color: #fd7e14;"></i>
-          Style Controls
-        </h3>
+      <div class="color-controls">
+        <div class="color-input-group">
+          <span class="color-label">
+            <i class="fas fa-font" style="margin-right: 4px;"></i>
+            Text Color
+          </span>
+          <input type="color" [(ngModel)]="liveStyles.color" class="color-picker" />
+        </div>
         
-        <div class="style-grid">
-          <div class="form-group">
-            <label>Font Size:</label>
-            <select class="form-control" [(ngModel)]="liveStyles.fontSize">
-              <option value="">Default</option>
-              <option *ngFor="let size of fontSizes" [value]="size">{{ size }}</option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <label>Font Weight:</label>
-            <select class="form-control" [(ngModel)]="liveStyles.fontWeight">
-              <option value="">Default</option>
-              <option *ngFor="let weight of fontWeights" [value]="weight">{{ weight }}</option>
-            </select>
-          </div>
+        <div class="color-input-group">
+          <span class="color-label">
+            <i class="fas fa-fill-drip" style="margin-right: 4px;"></i>
+            Background
+          </span>
+          <input type="color" [(ngModel)]="liveStyles.background" class="color-picker" />
         </div>
-
-        <div class="style-grid">
-          <div class="form-group">
-            <label>Text Align:</label>
-            <select class="form-control" [(ngModel)]="liveStyles.textAlign">
-              <option value="">Default</option>
-              <option value="left">Left</option>
-              <option value="center">Center</option>
-              <option value="right">Right</option>
-              <option value="justify">Justify</option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <button class="action-btn secondary small" (click)="verifyCssInSections()">
-              <i class="fas fa-search"></i>
-              Verify CSS
-            </button>
-          </div>
-        </div>
-
-        <div class="color-controls">
-          <div class="color-input-group">
-            <span class="color-label">
-              <i class="fas fa-font" style="margin-right: 4px;"></i>
-              Text Color
-            </span>
-            <input type="color" [(ngModel)]="liveStyles.color" class="color-picker" />
-          </div>
-          
-          <div class="color-input-group">
-            <span class="color-label">
-              <i class="fas fa-fill-drip" style="margin-right: 4px;"></i>
-              Background
-            </span>
-            <input type="color" [(ngModel)]="liveStyles.background" class="color-picker" />
-          </div>
-        </div>
-
-        <button class="action-btn primary full-width" (click)="applyStyleToSelection()">
-          <i class="fas fa-paint-brush"></i>
-          Apply Style to Selection
-        </button>
       </div>
 
-      <!-- Page Management Section -->
-      <div class="control-section fade-in-up" [@fadeIn]>
-        <h3>
-          <i class="fas fa-file-alt" style="margin-right: 6px; color: #dc3545;"></i>
-          Page Management
-        </h3>
-        
-        <button class="action-btn secondary" (click)="addNewPage()">
-          <i class="fas fa-plus"></i>
-          Add New Page
-        </button>
-
-        <button class="action-btn secondary" (click)="duplicateCurrentPage()">
-          <i class="fas fa-copy"></i>
-          Duplicate Current Page
-        </button>
-
-        <button class="action-btn secondary" (click)="deleteCurrentPage()" 
-                [disabled]="pageRenderOrder.length <= 1">
-          <i class="fas fa-trash"></i>
-          Delete Current Page
-        </button>
-      </div>
-
-      <!-- Additional Tools Section -->
-      <div class="control-section fade-in-up" [@fadeIn]>
-        <h3>
-          <i class="fas fa-tools" style="margin-right: 6px; color: #6f42c1;"></i>
-          Additional Tools
-        </h3>
-        
-        <button class="action-btn secondary" (click)="exportProject()">
-          <i class="fas fa-download"></i>
-          Export Project
-        </button>
-
-        <button class="action-btn secondary" (click)="importProject()">
-          <i class="fas fa-upload"></i>
-          Import Project
-        </button>
-
-        <button class="action-btn secondary" (click)="previewMode()">
-          <i class="fas fa-eye"></i>
-          Preview Mode
-        </button>
-
-        <button class="action-btn secondary" (click)="addNewSectionToCurrentPage()">
-          <i class="fas fa-plus-square"></i>
-          Add Section
-        </button>
-      </div>
+      <button class="action-btn primary full-width" (click)="applyStyleToSelection()">
+        <i class="fas fa-paint-brush"></i>
+        Apply Style to Selection
+      </button>
     </div>
+    -->
+
+    <!--
+    <div class="control-section fade-in-up" [@fadeIn]>
+      <h3>
+        <i class="fas fa-file-alt" style="margin-right: 6px; color: #dc3545;"></i>
+        Page Management
+      </h3>
+      
+      <button class="action-btn secondary" (click)="addNewPage()">
+        <i class="fas fa-plus"></i>
+        Add New Page
+      </button>
+
+      <button class="action-btn secondary" (click)="duplicateCurrentPage()">
+        <i class="fas fa-copy"></i>
+        Duplicate Current Page
+      </button>
+
+      <button class="action-btn secondary" (click)="deleteCurrentPage()" 
+              [disabled]="pageRenderOrder.length <= 1">
+        <i class="fas fa-trash"></i>
+        Delete Current Page
+      </button>
+    </div>
+    -->
+
+    <!--
+    <div class="control-section fade-in-up" [@fadeIn]>
+      <h3>
+        <i class="fas fa-tools" style="margin-right: 6px; color: #6f42c1;"></i>
+        Additional Tools
+      </h3>
+      
+      <button class="action-btn secondary" (click)="exportProject()">
+        <i class="fas fa-download"></i>
+        Export Project
+      </button>
+
+      <button class="action-btn secondary" (click)="importProject()">
+        <i class="fas fa-upload"></i>
+        Import Project
+      </button>
+
+      <button class="action-btn secondary" (click)="previewMode()">
+        <i class="fas fa-eye"></i>
+        Preview Mode
+      </button>
+
+      <button class="action-btn secondary" (click)="addNewSectionToCurrentPage()">
+        <i class="fas fa-plus-square"></i>
+        Add Section
+      </button>
+    </div>
+    -->
   </div>
+</div>
 
   <!-- Main Canvas Area -->
 <div class="canvas-main-area" [class.sidebar-collapsed]="sidebarCollapsed">
@@ -357,61 +436,63 @@
          (wheel)="onWheel($event)">
 
       <!-- Loading Overlay -->
-      <div *ngIf="isLoading" class="loading-overlay">
-        <div class="spinner"></div>
-        <div class="loading-text">Loading wireframe...</div>
-      </div>
+      <!-- Updated Loading Overlay -->
+<div *ngIf="isLoading" class="loading-overlay" [@fadeIn]>
+  <div class="loading-container">
+    <mat-spinner diameter="50" color="accent"></mat-spinner>
+    <div class="loading-text">Building Interface...</div>
+    <div class="loading-subtext">Please wait while we prepare your components</div>
+    <div class="progress-bar">
+      <div class="progress-fill" [style.width.%]="loadProgress"></div>
+    </div>
+  </div>
+</div>
+
 
       <!-- Full Page Display -->
-      <div *ngIf="!isLoading && getCurrentPage()" 
+      <div *ngIf="!isLoading " 
            class="page-display" 
            [style.transform]="getPageTransform()">
 
-        <!-- Connected Sections Container -->
-        <div class="connected-sections" 
-             cdkDropList 
-             cdkDropListOrientation="vertical"
-             [cdkDropListData]="getCurrentPageSections()" 
-             (cdkDropListDropped)="onSectionDrop($event, getCurrentPageName())">
+<!-- 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>
+    </div>
 
-          <!-- Individual Connected Sections -->
-          <!-- Change this in your *ngFor -->
-          <!-- Update the section wrapper div -->
-<div *ngFor="let sectionKey of getCurrentPageSections(); let i = index" 
-     class="section-wrapper"
-     [class.editing]="isCurrentSectionEditing(sectionKey)"
-     cdkDrag
-     [cdkDragData]="sectionKey"
-     (mouseenter)="hoveredSection = sectionKey"
-     (mouseleave)="hoveredSection = null"
-     (dblclick)="toggleSectionEditing(getCurrentPageName(), sectionKey, $event)">
 
-            <!-- Section Content (Full Width, No Gaps) -->
-            <div class="section-content"
-                 [innerHTML]="getSectionHtml(getCurrentPageName(), sectionKey)"
-                 [attr.contenteditable]="isCurrentSectionEditing(sectionKey)"
-                 (blur)="handleDirectContentEdit($event, getCurrentPageName(), sectionKey)">
-            </div>
 
-            <!-- Section Overlay for Hover/Edit State -->
-            <div class="section-overlay" 
-                 [class.visible]="hoveredSection === sectionKey || isCurrentSectionEditing(sectionKey)">
-              <div class="section-label">
-                <i class="fas fa-puzzle-piece" style="margin-right: 4px;"></i>
-                {{ sectionKey }}
-                <button *ngIf="isCurrentSectionEditing(sectionKey)" 
-                        class="btn btn-sm btn-success ms-2"
-                        (click)="saveSectionEdit(getCurrentPageName(), sectionKey)">
-                  <i class="fas fa-check"></i>
-                </button>
-              </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>
 
             <!-- Drag Handle -->
-            <div class="drag-handle" cdkDragHandle style="display: none;">
+            <!-- <div class="drag-handle" cdkDragHandle style="display: none;">
               <i class="fa fa-grip-lines"></i>
             </div>
-          </div>
+          </div> -->
 
           <!-- Empty State for Sections -->
           <div *ngIf="getCurrentPageSections().length === 0" class="empty-sections" 
@@ -493,124 +574,146 @@
   </button>
 
   <!-- Navbar Editor Modal -->
-  <div class="modal-overlay" *ngIf="selectedNavbarPage" [@fadeIn] (click)="closeNavbarModal()">
-    <div class="modal-content" (click)="$event.stopPropagation()" [@slideIn]>
-      
-      <div class="modal-header">
-        <h3>
-          <i class="fas fa-edit" style="margin-right: 8px; color: #17a2b8;"></i>
-          Edit Navbar Links - {{ selectedNavbarPage }}
-        </h3>
-        <button class="close-btn" (click)="closeNavbarModal()">
-          <i class="fas fa-times"></i>
-        </button>
+
+<!-- Updated Navbar Editor Modal -->
+<div class="modal-overlay" *ngIf="showNavbarEditorModal" [@fadeIn] (click)="closeNavbarEditorModal()">
+  <div class="modal-content navbar-editor-modal" (click)="$event.stopPropagation()" [@slideIn]>
+    
+    <div class="modal-header">
+      <h3>
+        <i class="fas fa-bars" style="margin-right: 8px; color: #17a2b8;"></i>
+        Navbar Editor
+      </h3>
+      <button class="close-btn" (click)="closeNavbarEditorModal()">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+
+    <div class="modal-body">
+      <!-- Page Selection -->
+      <div class="form-group">
+        <label for="navbarPageSelect">Select Page:</label>
+        <select id="navbarPageSelect" class="form-control" [(ngModel)]="selectedNavbarPage" 
+                (change)="onNavbarPageChange()"
+                [@focusBorder]>
+          <option value="">Choose a page...</option>
+          <option *ngFor="let page of pageRenderOrder" [value]="page">
+            <i class="fas fa-file-alt"></i> {{ page }}
+          </option>
+        </select>
       </div>
 
-      <div class="modal-body">
-        <div class="navbar-link-item" *ngFor="let link of navbarLinks[selectedNavbarPage]; let i = index" [@fadeIn]
-             style="display: flex; gap: 10px; align-items: center; margin-bottom: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px;">
-          <div class="form-group" style="flex: 1; margin-bottom: 0;">
-            <input type="text" [(ngModel)]="link.label" placeholder="Link Label" class="form-control">
+      <!-- Navbar Links -->
+      <div *ngIf="selectedNavbarPage" class="navbar-links-section">
+        <h4>Navbar Links</h4>
+        <div class="navbar-link-item" *ngFor="let link of currentNavbarLinks; let i = index" [@fadeIn]>
+          <div class="link-inputs">
+            <div class="form-group">
+              <label>Link Text:</label>
+              <input type="text" [(ngModel)]="link.label" placeholder="Link Label" class="form-control">
+            </div>
+            <div class="form-group">
+              <label>Link URL:</label>
+              <select [(ngModel)]="link.href" class="form-control">
+                <option value="">Select page...</option>
+                <option *ngFor="let page of availablePages" [value]="page.href">{{ page.label }}</option>
+                <option value="custom">Custom URL...</option>
+              </select>
+              <input *ngIf="link.href === 'custom'" type="text" [(ngModel)]="link.customUrl" 
+                     placeholder="Enter custom URL" class="form-control mt-2">
+            </div>
+            <button class="remove-btn" (click)="removeNavbarLink(i)" title="Remove Link">
+              <i class="fas fa-trash"></i>
+            </button>
           </div>
-          <div class="form-group" style="flex: 1; margin-bottom: 0;">
-            <select [(ngModel)]="link.href" class="form-control">
-              <option value="">Select page...</option>
-              <option *ngFor="let page of availablePages" [value]="page.href">{{ page.label }}</option>
-            </select>
-          </div>
-          <button class="remove-btn" (click)="removeLink(selectedNavbarPage, i)" title="Remove Link"
-                  style="background: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer;">
-            <i class="fas fa-trash"></i>
-          </button>
         </div>
 
-        <button class="action-btn secondary full-width add-link-btn" (click)="addLink(selectedNavbarPage)">
+        <button class="action-btn secondary full-width" (click)="addNavbarLink()">
           <i class="fas fa-plus"></i>
           Add New Link
         </button>
       </div>
+    </div>
 
-      <div class="modal-footer">
-        <button class="action-btn secondary" (click)="closeNavbarModal()">
-          <i class="fas fa-times" style="margin-right: 5px;"></i>
-          Cancel
-        </button>
-        <button class="action-btn primary" (click)="applyNavbarChanges(selectedNavbarPage)">
-          <i class="fas fa-check" style="margin-right: 5px;"></i>
-          Save Changes
-        </button>
-      </div>
+    <div class="modal-footer">
+      <button class="action-btn secondary" (click)="closeNavbarEditorModal()">
+        <i class="fas fa-times" style="margin-right: 5px;"></i>
+        Cancel
+      </button>
+      <button class="action-btn primary" (click)="saveNavbarChanges()">
+        <i class="fas fa-check" style="margin-right: 5px;"></i>
+        Save Changes
+      </button>
     </div>
   </div>
+</div>
 
-  <!-- Modal for Adding New Section -->
-  <div class="modal-overlay" *ngIf="showNewSectionModal" [@fadeIn] (click)="closeNewSectionModal()">
-    <div class="modal-content" (click)="$event.stopPropagation()" [@slideIn]>
-      
-      <div class="modal-header">
-        <h3>
-          <i class="fas fa-plus-circle" style="margin-right: 8px; color: #28a745;"></i>
-          Add New Section to {{ newSectionPage }}
-        </h3>
-        <button class="close-btn" (click)="closeNewSectionModal()">
-          <i class="fas fa-times"></i>
-        </button>
+<!-- Add Custom Section Modal -->
+<div class="modal-overlay" *ngIf="showAddCustomModal" [@fadeIn] (click)="closeAddCustomModal()">
+  <div class="modal-content" (click)="$event.stopPropagation()" [@slideIn]>
+    
+    <div class="modal-header">
+      <h3>
+        <i class="fas fa-plus-circle" style="margin-right: 8px; color: #28a745;"></i>
+        Add Custom Section
+      </h3>
+      <button class="close-btn" (click)="closeAddCustomModal()">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+
+    <div class="modal-body">
+      <div class="form-group">
+        <label for="customSectionName">
+          <i class="fas fa-tag" style="margin-right: 4px;"></i>
+          Section Name:
+        </label>
+        <input id="customSectionName" 
+               type="text" 
+               [(ngModel)]="newCustomSectionName" 
+               placeholder="Enter section name (e.g., Custom Header, Special CTA)" 
+               class="form-control">
       </div>
 
-      <div class="modal-body">
-        <div class="form-group">
-          <label for="sectionName">
-            <i class="fas fa-tag" style="margin-right: 4px;"></i>
-            Section Name:
-          </label>
-          <input id="sectionName" 
-                 type="text" 
-                 [(ngModel)]="newSectionName" 
-                 placeholder="Enter section name (e.g., Hero, About, Contact)" 
-                 class="form-control">
-        </div>
-
-        <div class="form-group">
-          <label for="sectionType">
-            <i class="fas fa-layer-group" style="margin-right: 4px;"></i>
-            Section Type:
-          </label>
-          <select id="sectionType" [(ngModel)]="newSectionType" class="form-control">
-            <option value="">Select a type...</option>
-            <option *ngFor="let type of sectionTypes" [value]="type.value">
-              {{ type.label }}
-            </option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label for="sectionDescription">
-            <i class="fas fa-align-left" style="margin-right: 4px;"></i>
-            Section Description:
-          </label>
-          <textarea id="sectionDescription" 
-                    [(ngModel)]="newSectionDescription" 
-                    rows="4" 
-                    placeholder="Describe the content and purpose of this section..." 
-                    class="form-control"></textarea>
-        </div>
+      <div class="form-group">
+        <label for="customSectionDesc">
+          <i class="fas fa-align-left" style="margin-right: 4px;"></i>
+          Section Description:
+        </label>
+        <textarea id="customSectionDesc" 
+                  [(ngModel)]="newCustomSectionDesc" 
+                  rows="4" 
+                  placeholder="Describe the content and purpose of this custom section..." 
+                  class="form-control"></textarea>
       </div>
 
-      <div class="modal-footer">
-        <button class="action-btn secondary" (click)="closeNewSectionModal()">
-          <i class="fas fa-times" style="margin-right: 5px;"></i>
-          Cancel
-        </button>
-        <button class="action-btn primary" 
-                [disabled]="!newSectionName || !newSectionType" 
-                (click)="confirmAddSection()">
-          <i class="fas fa-plus" style="margin-right: 5px;"></i>
-          Add Section
-        </button>
+      <div class="form-group">
+        <label for="customSectionIcon">
+          <i class="fas fa-icons" style="margin-right: 4px;"></i>
+          Icon Class:
+        </label>
+        <input id="customSectionIcon" 
+               type="text" 
+               [(ngModel)]="newCustomSectionIcon" 
+               placeholder="e.g., fas fa-star, fas fa-rocket" 
+               class="form-control">
       </div>
     </div>
-  </div>
 
+    <div class="modal-footer">
+      <button class="action-btn secondary" (click)="closeAddCustomModal()">
+        <i class="fas fa-times" style="margin-right: 5px;"></i>
+        Cancel
+      </button>
+      <button class="action-btn primary" 
+              [disabled]="!newCustomSectionName || !newCustomSectionDesc" 
+              (click)="confirmAddCustomSection()">
+        <i class="fas fa-plus" style="margin-right: 5px;"></i>
+        Add Custom Section
+      </button>
+    </div>
+  </div>
+</div>
   <!-- Modal for Adding New Page -->
   <div class="modal-overlay" *ngIf="showNewPageModal" [@fadeIn] (click)="closeNewPageModal()">
     <div class="modal-content" (click)="$event.stopPropagation()" [@slideIn]>
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 c3bffec..299bf06 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
@@ -149,6 +149,8 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
       top: 0 ;
       z-index: 10 ;
       backdrop-filter: blur(10px) ;
+      display: flex ;
+      flex-direction: row;
 
       h2 {
         margin: 0 ;
@@ -374,6 +376,129 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
             }
           }
         }
+        .wf-section-list {
+  max-height: 300px !important;
+  overflow-y: auto !important;
+  margin: 12px 0 !important;
+  border: 1px solid #e9ecef !important;
+  border-radius: 8px !important;
+  padding: 8px !important;
+  background: #ffffff !important;
+  
+  .wf-section-item {
+    display: flex !important;
+    align-items: center !important;
+    padding: 12px !important;
+    margin-bottom: 8px !important;
+    border: 1px solid #e9ecef !important;
+    border-radius: 8px !important;
+    cursor: pointer !important;
+    transition: all 0.2s ease !important;
+    position: relative !important;
+    background: #f8f9fa !important;
+    
+    &:hover {
+      border-color: #007bff !important;
+      background-color: #ffffff !important;
+      transform: translateY(-2px) !important;
+      box-shadow: 0 3px 6px rgba(0,0,0,0.1) !important;
+    }
+    
+    .section-icon {
+      width: 40px !important;
+      height: 40px !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      background: #ffffff !important;
+      border-radius: 6px !important;
+      margin-right: 12px !important;
+      border: 1px solid #dee2e6 !important;
+      
+      i {
+        font-size: 18px !important;
+        color: #007bff !important;
+      }
+    }
+    
+    .section-info {
+      flex: 1 !important;
+      
+      .section-name {
+        font-weight: 600 !important;
+        font-size: 14px !important;
+        color: #2c3e50 !important;
+        margin-bottom: 4px !important;
+      }
+      
+      .section-desc {
+        font-size: 12px !important;
+        color: #7f8c8d !important;
+        line-height: 1.4 !important;
+      }
+    }
+    
+    .delete-custom-btn {
+      position: absolute !important;
+      top: 50% !important;
+      right: 12px !important;
+      transform: translateY(-50%) !important;
+      width: 28px !important;
+      height: 28px !important;
+      border: none !important;
+      background: #dc3545 !important;
+      color: white !important;
+      border-radius: 50% !important;
+      display: none !important;
+      align-items: center !important;
+      justify-content: center !important;
+      cursor: pointer !important;
+      transition: background 0.2s ease !important;
+      
+      &:hover {
+        background: #c82333 !important;
+      }
+    }
+    
+    &:hover .delete-custom-btn {
+      display: flex !important;
+    }
+  }
+}
+
+        // Custom Section for adding new sections
+        .add-custom-section {
+          display: flex ;
+          align-items: center ;
+          gap: 12px ;
+          margin-top: 20px ;
+          padding: 12px ;
+          background: rgba(255, 255, 255, 0.9) ;
+          border-radius: 8px ;
+          box-shadow: $shadow-light ;
+          transition: $transition-smooth ;
+
+          &:hover {
+            transform: translateY(-2px) ;
+            box-shadow: $shadow-medium ;
+          }
+
+          .add-icon {
+            font-size: 24px ;
+            color: $primary-black ;
+            cursor: pointer ;
+
+            &:hover {
+              color: $secondary-black ;
+            }
+          }
+
+          .add-text {
+            font-size: 14px ;
+            color: $text-gray ;
+            font-weight: 600 ;
+          }
+        }
       }
     }
   }
@@ -412,6 +537,62 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
   }
 }
 
+/* Enhanced Loading Styles */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.95);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(5px);
+  
+  .loading-container {
+    text-align: center;
+    max-width: 400px;
+    padding: 2rem;
+    background: white;
+    border-radius: 12px;
+    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;
+    }
+    
+    .loading-subtext {
+      color: #666;
+      font-size: 0.9rem;
+      margin-bottom: 1.5rem;
+    }
+    
+    .progress-bar {
+      width: 100%;
+      height: 8px;
+      background: #f0f0f0;
+      border-radius: 4px;
+      overflow: hidden;
+      
+      .progress-fill {
+        height: 100%;
+        background: #2196F3;
+        transition: width 0.3s ease;
+      }
+    }
+    
+    mat-spinner {
+      margin: 0 auto;
+    }
+  }
+}
+
+
   // Main Canvas Area
   .canvas-main-area {
     position: relative ;
@@ -537,6 +718,110 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
     }
   }
 }
+.search-section {
+  .search-container {
+    position: relative;
+    margin-bottom: 15px;
+    
+    .search-input {
+      width: 100%;
+      padding: 12px 40px 12px 15px;
+      border: 2px solid #e9ecef;
+      border-radius: 25px;
+      font-size: 14px;
+      transition: all 0.3s ease;
+      background: #f8f9fa;
+      
+      &:focus {
+        outline: none;
+        border-color: #007bff;
+        background: white;
+        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+      }
+      
+      &::placeholder {
+        color: #6c757d;
+        font-style: italic;
+      }
+    }
+    
+    .search-icon {
+      position: absolute;
+      right: 15px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #6c757d;
+      pointer-events: none;
+    }
+  }
+}
+
+
+
+
+
+.navbar-editor-modal {
+  max-width: 600px;
+  max-height: 80vh;
+  overflow-y: auto;
+  
+  .navbar-links-section {
+    margin-top: 20px;
+    
+    h4 {
+      margin-bottom: 15px;
+      color: #333;
+      border-bottom: 1px solid #e9ecef;
+      padding-bottom: 5px;
+    }
+    
+    .navbar-link-item {
+      background: #f8f9fa;
+      border-radius: 8px;
+      padding: 15px;
+      margin-bottom: 15px;
+      position: relative;
+      
+      .link-inputs {
+        display: grid;
+        grid-template-columns: 1fr 1fr auto;
+        gap: 15px;
+        align-items: end;
+        
+        .form-group {
+          margin-bottom: 0;
+          
+          label {
+            font-size: 12px;
+            font-weight: 600;
+            color: #666;
+            margin-bottom: 5px;
+          }
+        }
+        
+        .remove-btn {
+          background: #dc3545;
+          color: white;
+          border: none;
+          padding: 8px 12px;
+          border-radius: 6px;
+          cursor: pointer;
+          height: fit-content;
+          
+          &:hover {
+            background: #c82333;
+          }
+        }
+      }
+    }
+  }
+}
+
+.add-custom-section {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px dashed #dee2e6;
+}
 
 .page-actions {
   position: fixed;
@@ -1035,4 +1320,140 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
   i {
     font-size: 12px;
   }
-}
\ No newline at end of file
+}
+
+
+/* Add these styles */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255,255,255,0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.hide-scroll {
+    overflow: hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.section-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100px;
+}
+
+.page-list {
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+
+.page-list {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 8px;
+  margin: 12px 0;
+
+  &-item {
+    padding: 12px;
+    margin: 6px 0;
+    background: #f8f9fa;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: transform 0.2s ease;
+
+    .handle {
+      cursor: move;
+      margin-right: 8px;
+      color: #6c757d;
+    }
+
+    &:hover {
+      background: #e9ecef;
+    }
+
+    &.cdk-drag-preview {
+      background: white;
+      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+    }
+
+    &.cdk-drag-placeholder {
+      opacity: 0.4;
+    }
+
+    &.cdk-drag-animating {
+      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+}
+
+.cdk-drop-list-dragging .page-list-item:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+
+/* Add to your styles */
+.connected-sections {
+  min-height: 100px;
+  position: relative;
+}
+/* Add these styles */
+.drag-handle {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 30px;
+  background: rgba(224, 221, 221, 0.05);
+  cursor: grab;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: rgba(0,0,0,0.08);
+  }
+
+  .fa-grip-vertical {
+    opacity: 0.5;
+    transition: opacity 0.2s ease;
+  }
+}
+
+.cdk-drag-preview {
+  cursor: grabbing !important;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+  opacity: 0.8;
+  
+  .drag-handle {
+    cursor: grabbing !important;
+  }
+}
+
+.cdk-drag-placeholder {
+  opacity: 0.3;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.connected-sections.cdk-drop-list-dragging .section-wrapper:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
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 e9ae076..980dc16 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
@@ -1,5 +1,5 @@
 
-import { Component, Input, OnInit, SecurityContext, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnInit, SecurityContext, ChangeDetectorRef, ViewChildren, QueryList } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { SiteTreeservice } from '../SiteBuilderGrid/SiteTree.service';
@@ -7,15 +7,13 @@ import { COMMON_CSS } from './common-css';
 import { ToastrService } from 'ngx-toastr';
 import * as sha256 from 'crypto-js/sha256';
 import SHA256 from 'crypto-js/sha256';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 
 @Component({
     selector: 'app-wireframe-renderer',
     templateUrl: './wireframe-renderer.component.html',
     styleUrls: ['./wireframe-renderer.component.scss'],
-    encapsulation: ViewEncapsulation.Emulated,  // This is default; optional to write
-
     animations: [
     trigger('fadeIn', [
       transition(':enter', [
@@ -132,6 +130,7 @@ startPanPosition = { x: 0, y: 0 };
   // Mock data - replace with your actual data structures
   navbarLinks: { [key: string]: any[] } = {};
   availablePages: { href: string, label: string }[] = [];
+  selectedPageForNavbar: string = '';
 
  zoomLevel = 1;
   currentPageIndex = 0;
@@ -143,6 +142,113 @@ startPanPosition = { x: 0, y: 0 };
   gridColumns = 12;
   gridGap = 16;
 
+    searchTerm: string = '';
+
+  // Section arrays
+  globalSections = [
+    {
+      type: 'Navbar',
+      description: 'Main navigation bar for the website',
+      icon: 'fas fa-bars',
+      template: 'navbar'
+    },
+    {
+      type: 'Footer',
+      description: 'Website footer with links and information',
+      icon: 'fas fa-shoe-prints',
+      template: 'footer'
+    }
+  ];
+
+  standardSections = [
+    {
+      type: 'Hero Header',
+      description: 'Large banner section with call-to-action',
+      icon: 'fas fa-flag',
+      template: 'hero'
+    },
+    {
+      type: 'CTA',
+      description: 'Call-to-action section to drive conversions',
+      icon: 'fas fa-bullhorn',
+      template: 'cta'
+    },
+    {
+      type: 'Features',
+      description: 'Showcase product or service features',
+      icon: 'fas fa-star',
+      template: 'features'
+    },
+    {
+      type: 'Pricing',
+      description: 'Pricing tables and subscription plans',
+      icon: 'fas fa-dollar-sign',
+      template: 'pricing'
+    },
+    {
+      type: 'Testimonials',
+      description: 'Customer reviews and testimonials',
+      icon: 'fas fa-quote-left',
+      template: 'testimonials'
+    },
+    {
+      type: 'Gallery',
+      description: 'Image gallery or portfolio showcase',
+      icon: 'fas fa-images',
+      template: 'gallery'
+    },
+    {
+      type: 'Contact',
+      description: 'Contact form and information',
+      icon: 'fas fa-envelope',
+      template: 'contact'
+    },
+    {
+      type: 'About',
+      description: 'About us or company information section',
+      icon: 'fas fa-info-circle',
+      template: 'about'
+    },
+    {
+      type: 'Services',
+      description: 'Services or offerings section',
+      icon: 'fas fa-cogs',
+      template: 'services'
+    },
+    {
+      type: 'Team',
+      description: 'Meet the team section',
+      icon: 'fas fa-users',
+      template: 'team'
+    }
+  ];
+
+  customSections = [
+    {
+      type: 'Custom 1',
+      description: 'Custom section template 1',
+      icon: 'fas fa-puzzle-piece',
+      template: 'custom1'
+    },
+    {
+      type: 'Custom 2',
+      description: 'Custom section template 2',
+      icon: 'fas fa-cube',
+      template: 'custom2'
+    }
+  ];
+
+  // Navbar editor properties
+  showNavbarEditorModal: boolean = false;
+  currentNavbarLinks: any[] = [];
+
+  // Add custom section modal properties
+  showAddCustomModal: boolean = false;
+  newCustomSectionName: string = '';
+  newCustomSectionDesc: string = '';
+  newCustomSectionIcon: string = 'fas fa-puzzle-piece';
+
+
     constructor(
         private siteTreeService: SiteTreeservice,
         private route: ActivatedRoute,
@@ -165,13 +271,25 @@ ngOnInit(): void {
     document.head.appendChild(style);
     }
 
-    ngAfterViewInit(): void {
-        // Apply CSS after a short delay to ensure DOM is fully rendered
-        setTimeout(() => {
-        this.ensureCommonCssForAllSections();
-        this.verifyCssInSections();
-        }, 500);
-    }
+ ngAfterViewInit() {
+  this.allConnectedLists = this.dropLists.toArray();
+  
+  // Handle cursor changes during drag
+  this.dragItems.forEach(drag => {
+    drag.started.subscribe(() => {
+      document.body.style.cursor = 'grabbing';
+    });
+    
+    drag.ended.subscribe(() => {
+      document.body.style.cursor = '';
+    });
+  });
+}
+allConnectedLists: CdkDropList[] = [];
+
+@ViewChildren(CdkDropList) dropLists!: QueryList<CdkDropList>;
+@ViewChildren(CdkDrag) dragItems!: QueryList<CdkDrag>;
+
 
     // Helper method to get object keys
     objectKeys(obj: any): string[] {
@@ -240,6 +358,377 @@ ngOnInit(): void {
         return html;
     }
 
+     // Search functionality
+  onSearchChange(): void {
+    // The filtering is handled in getFilteredSections method
+    this.cdr.detectChanges();
+  }
+
+  getFilteredSections(sections: any[]): any[] {
+    if (!this.searchTerm || this.searchTerm.trim() === '') {
+      return sections;
+    }
+    
+    const term = this.searchTerm.toLowerCase().trim();
+    return sections.filter(section => 
+      section.type.toLowerCase().includes(term) ||
+      section.description.toLowerCase().includes(term)
+    );
+  }
+
+  // Add section from template
+  addSectionFromTemplate(template: any): void {
+    const currentPage = this.getCurrentPageName();
+    if (!currentPage) {
+      this.toastr.error('No page selected. Please create a page first.');
+      return;
+    }
+
+    // Create section based on template
+    const sectionKey = `${template.template}Section_${Date.now()}`;
+    
+    // Add to page prompts
+    if (!this.allPagePrompts[currentPage]) {
+      this.allPagePrompts[currentPage] = {};
+    }
+
+    const sectionJson = this.createSectionJson(template);
+    this.allPagePrompts[currentPage][sectionKey] = JSON.stringify(sectionJson);
+
+    // Generate HTML for the section
+    this.generateSectionHtml(currentPage, sectionKey, sectionJson);
+    
+    this.toastr.success(`Added ${template.type} section to ${currentPage}`);
+  }
+
+  private createSectionJson(template: any): any {
+    const baseJson = {
+      type: template.template,
+      title: template.type,
+      description: template.description,
+      content: this.getDefaultContent(template.template),
+      styles: {
+        background: "#ffffff",
+        padding: "20px"
+      }
+    };
+
+    return baseJson;
+  }
+
+  private getDefaultContent(templateType: string): any {
+    const contentMap = {
+      'navbar': {
+        brand: 'Your Brand',
+        links: [
+          { text: 'Home', url: '#home' },
+          { text: 'About', url: '#about' },
+          { text: 'Services', url: '#services' },
+          { text: 'Contact', url: '#contact' }
+        ]
+      },
+      'footer': {
+        copyright: '© 2025 Your Company. All rights reserved.',
+        links: [
+          { text: 'Privacy Policy', url: '#privacy' },
+          { text: 'Terms of Service', url: '#terms' }
+        ]
+      },
+      'hero': {
+        title: 'Welcome to Our Amazing Service',
+        subtitle: 'Transform your business with our innovative solutions',
+        buttonText: 'Get Started',
+        buttonUrl: '#contact'
+      },
+      'cta': {
+        title: 'Ready to Get Started?',
+        description: 'Join thousands of satisfied customers today',
+        buttonText: 'Start Now',
+        buttonUrl: '#signup'
+      },
+      'features': {
+        title: 'Our Features',
+        items: [
+          { title: 'Feature 1', description: 'Amazing feature description' },
+          { title: 'Feature 2', description: 'Another great feature' },
+          { title: 'Feature 3', description: 'Yet another feature' }
+        ]
+      },
+      'pricing': {
+        title: 'Choose Your Plan',
+        plans: [
+          { name: 'Basic', price: '$9/month', features: ['Feature 1', 'Feature 2'] },
+          { name: 'Pro', price: '$19/month', features: ['All Basic', 'Feature 3', 'Feature 4'] }
+        ]
+      }
+    };
+
+    return contentMap[templateType] || { text: 'Default content' };
+  }
+
+  private async generateSectionHtml(pageName: string, sectionKey: string, sectionJson: any): Promise<void> {
+    try {
+      const html = await this.generateJson({ 
+        jsonStructure: sectionJson, 
+        sectionType: sectionKey 
+      });
+      
+      if (!this.sectionHtmls[pageName]) {
+        this.sectionHtmls[pageName] = {};
+      }
+      
+      this.sectionHtmls[pageName][sectionKey] = this.sanitizer.bypassSecurityTrustHtml(html);
+      this.updateFullPageHtml(pageName);
+      
+    } catch (error) {
+      console.error('Error generating section HTML:', error);
+      this.toastr.error('Failed to generate section HTML');
+    }
+  }
+
+  // Navbar Editor Methods
+  showNavbarEditor(): void {
+    this.showNavbarEditorModal = true;
+    this.selectedNavbarPage = '';
+    this.currentNavbarLinks = [];
+  }
+
+  closeNavbarEditorModal(): void {
+    this.showNavbarEditorModal = false;
+    this.selectedNavbarPage = '';
+    this.currentNavbarLinks = [];
+  }
+
+  onNavbarPageChange(): void {
+    if (this.selectedNavbarPage) {
+      this.loadNavbarLinks();
+    }
+  }
+
+ // Updated Navbar Editor Methods
+async loadNavbarLinks(): Promise<void> {
+  if (!this.selectedNavbarPage) return;
+
+  // Clear existing links
+  this.currentNavbarLinks = [];
+
+  // Get the current page's HTML
+  const pageHtml = this.pageSections[this.selectedNavbarPage]?.FullPage?.toString();
+  if (!pageHtml) return;
+
+  // Parse HTML to extract existing links
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(pageHtml, 'text/html');
+  const navLinks = doc.querySelectorAll('nav a, ul.nav-links a, .navbar a');
+
+  // Convert NodeList to array of link objects
+  this.currentNavbarLinks = Array.from(navLinks).map(link => {
+    const href = link.getAttribute('href') || '';
+    const isCustom = !this.availablePages.some(page => page.href === href);
+    
+    return {
+      label: link.textContent?.trim() || 'New Link',
+      href: isCustom ? 'custom' : href,
+      customUrl: isCustom ? href : ''
+    };
+  });
+
+  // Initialize if empty
+  if (this.currentNavbarLinks.length === 0) {
+    this.currentNavbarLinks.push({ 
+      label: 'Home', 
+      href: 'index.html', 
+      customUrl: '' 
+    });
+  }
+
+  // Update available pages
+  this.availablePages = this.pageRenderOrder.map(page => ({
+    label: page,
+    href: `${page.toLowerCase().replace(/\s+/g, '-')}.html`
+  }));
+}
+
+  addNavbarLink(): void {
+    this.currentNavbarLinks.push({ 
+      label: 'New Link', 
+      href: '',
+      customUrl: ''
+    });
+  }
+
+  removeNavbarLink(index: number): void {
+    this.currentNavbarLinks.splice(index, 1);
+  }
+
+async saveNavbarChanges(): Promise<void> {
+  if (!this.selectedNavbarPage) {
+    this.toastr.error('No page selected');
+    return;
+  }
+
+  // Process custom URLs
+  this.currentNavbarLinks.forEach(link => {
+    if (link.href === 'custom' && link.customUrl) {
+      link.href = link.customUrl;
+    }
+  });
+
+  // Store the links
+  this.navbarLinks[this.selectedNavbarPage] = [...this.currentNavbarLinks];
+
+  // Update the actual navbar in the page HTML
+  await this.updateNavbarInPage();
+  
+  this.toastr.success('Navbar updated successfully');
+  this.closeNavbarEditorModal();
+}
+
+ private async updateNavbarInPage(): Promise<void> {
+  const pageName = this.selectedNavbarPage;
+  let pageHtml = this.pageSections[pageName]?.FullPage?.toString();
+  if (!pageHtml) return;
+
+  // Parse existing HTML
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(pageHtml, 'text/html');
+  
+  // Find or create nav element
+  let nav = doc.querySelector('nav') || doc.createElement('nav');
+  nav.innerHTML = ''; // Clear existing links
+
+  // Create new navbar structure
+  const ul = doc.createElement('ul');
+  ul.className = 'nav-links';
+  
+  this.currentNavbarLinks.forEach(link => {
+    const li = doc.createElement('li');
+    const a = doc.createElement('a');
+    a.href = link.href;
+    a.textContent = link.label;
+    li.appendChild(a);
+    ul.appendChild(li);
+  });
+
+  nav.appendChild(ul);
+  
+  // Replace or add the nav element
+  const existingNav = doc.querySelector('nav');
+  if (existingNav) {
+    existingNav.replaceWith(nav);
+  } else {
+    doc.body.insertBefore(nav, doc.body.firstChild);
+  }
+
+  // Update the page HTML
+  const newHtml = doc.documentElement.outerHTML;
+  this.pageSections[pageName].FullPage = this.sanitizer.bypassSecurityTrustHtml(newHtml);
+  
+  // Update section HTML cache
+  await this.generateSectionHtml(pageName, 'navbar', this.createNavbarJson());
+}
+
+private createNavbarJson(): any {
+  return {
+    type: 'navbar',
+    title: 'Navigation Bar',
+    description: 'Main website navigation',
+    content: {
+      links: this.currentNavbarLinks.map(link => ({
+        text: link.label,
+        url: link.href
+      }))
+    },
+    styles: {
+      background: "#ffffff",
+      padding: "1rem"
+    }
+  };
+}
+
+loadProgress: number = 0;
+private loadingInterval: any;
+
+// Updated loading methods
+showLoading(message?: string): void {
+  this.isLoading = true;
+  this.loadProgress = 0;
+  
+  this.loadingInterval = setInterval(() => {
+    if (this.loadProgress < 90) {
+      this.loadProgress += 10;
+      this.cdr.detectChanges();
+    }
+  }, 500);
+}
+
+hideLoading(): void {
+  this.isLoading = false;
+  this.loadProgress = 100;
+  setTimeout(() => {
+    clearInterval(this.loadingInterval);
+    this.loadProgress = 0;
+    this.cdr.detectChanges();
+  }, 300);
+}
+
+  // Custom Section Methods
+  showAddCustomSectionModal(): void {
+    this.showAddCustomModal = true;
+    this.newCustomSectionName = '';
+    this.newCustomSectionDesc = '';
+    this.newCustomSectionIcon = 'fas fa-puzzle-piece';
+  }
+
+  closeAddCustomModal(): void {
+    this.showAddCustomModal = false;
+  }
+
+  confirmAddCustomSection(): void {
+    if (!this.newCustomSectionName.trim() || !this.newCustomSectionDesc.trim()) {
+      this.toastr.error('Please fill in all required fields');
+      return;
+    }
+
+    const newCustomSection = {
+      type: this.newCustomSectionName.trim(),
+      description: this.newCustomSectionDesc.trim(),
+      icon: this.newCustomSectionIcon || 'fas fa-puzzle-piece',
+      template: `custom_${this.newCustomSectionName.toLowerCase().replace(/\s+/g, '_')}`
+    };
+
+    this.customSections.push(newCustomSection);
+    this.toastr.success(`Added custom section: ${newCustomSection.type}`);
+    this.closeAddCustomModal();
+  }
+
+  deleteCustomSection(event: Event, section: any): void {
+    event.stopPropagation();
+    
+    if (confirm(`Are you sure you want to delete the "${section.type}" custom section?`)) {
+      const index = this.customSections.findIndex(s => s.type === section.type);
+      if (index > -1) {
+        this.customSections.splice(index, 1);
+        this.toastr.success(`Deleted custom section: ${section.type}`);
+      }
+    }
+  }
+
+  // Additional Features
+  showDeployedUrl(): void {
+    if (this.deployedUrl) {
+      window.open(this.deployedUrl, '_blank');
+    } else {
+      this.toastr.info('No deployed URL available yet. Please build the wireframe first.');
+    }
+  }
+
+  // Override the existing selectNavbar method to use the new modal
+  selectNavbar(pageName: string): void {
+    this.selectedNavbarPage = pageName;
+    this.showNavbarEditor();
+  }
+
     isSectionEditable(page: string, section: string): boolean {
         return this.editingSection?.page === page && 
             this.editingSection?.section === section;
@@ -259,6 +748,7 @@ ngOnInit(): 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);
@@ -273,9 +763,7 @@ ngOnInit(): void {
                         this.deployedUrl = res.deployedUrl;
                         console.log("Deployed Url "+res.deployedUrl);
                         this.generatePromptsForAllSections(this.jsonInput);
-                        this.isLoading = false;
                     } catch (err) {
-                    this.isLoading = false;
                         console.error('❌ Error parsing model JSON:', err);
                         alert('Model data is not valid JSON format');
                     }
@@ -286,6 +774,8 @@ ngOnInit(): void {
             error: (err) => {
                 console.error('❌ Error in getById:', err);
             }
+           
+
         });
     }
 
@@ -309,63 +799,57 @@ ngOnInit(): void {
     // 🔄 Maintain strict page and section render order
     missingHtmlPages: string[] = [];
 
-    async processPages(treeJson: any,forceRegenerate = false) {
-        console.log('tree is : ', treeJson);
+   async processPages(treeJson: any, forceRegenerate = false) {
+    console.log('Processing pages...');
+    this.missingHtmlPages = [];
+    
+    for (const [pageName, sections] of Object.entries(treeJson)) {
+        this.pageRenderOrder.push(pageName);
+        this.sectionOrderMap[pageName] = this.sectionOrderMap[pageName] || [];
 
-        for (const [pageName, sections] of Object.entries(treeJson)) {
-            this.pageRenderOrder.push(pageName);  // ✅ Track the order of pages
-    this.sectionOrderMap[pageName] = this.sectionOrderMap[pageName] || [];
-
-            console.log('process page is  : ',pageName)
-
-            // if (!forceRegenerate) {
-            // const existingHtml = await this.tryReadHtmlFromServer(this.sitename, pageName);
-            // console.log('existing html gpot   : ',existingHtml)
-
-            // if (existingHtml) {
-            //     // Page already exists as static HTML
-            //     this.pageSections[pageName] = {
-            //         FullPage: this.sanitizer.bypassSecurityTrustHtml(existingHtml)
-            //     };
-            //     console.log('existing html got from : ',pageName)
-            //     break; // skip further generation
-            //     }
-            // }
-            
-            this.missingHtmlPages.push(pageName); // Track for saving later
-
-            const sectionPrompts: Record<string, string> = {};
-
-            // Handle nested children first (recursive)
-            if (sections['Children']) {
-                console.log(' child is : ', sections['Children']);
-                await this.processPages(sections['Children']);
+        // 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
             }
-
-            // Loop through sections in declared order
-            for (const [sectionName, sectionDescription] of Object.entries(sections)) {
-                if (sectionName === 'Children') continue; // skip Children key
-
-                // ✅ Track section order
-                this.sectionOrderMap[pageName].push(sectionName);
-
-                console.log('✅ Generating prompt for :', pageName, '| Section:', sectionName, '| Description:', sectionDescription);
-
-                const prompt = await this.generatePromptFromSection(sectionName, sectionDescription);
-                sectionPrompts[sectionName] = prompt;
-            }
-
-            // 🧠 Store prompts
-            this.allPagePrompts[pageName] = sectionPrompts;
-            this.initialGeneratedPrompts[pageName] = JSON.parse(JSON.stringify(sectionPrompts)); // Deep clone
         }
 
-        console.log('✅ FINAL PROMPT MAP:', this.allPagePrompts);
+        this.missingHtmlPages.push(pageName);
+        const sectionPrompts: Record<string, string> = {};
 
-        await this.processAllPagesLiveUpdate();
-    
+        // 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();
+
+    }
+}
+
+
+
+
     
     jsonsuffixprompt = `Make sure the layout is clean, semantic, and responsive. Use only HTML (no CSS or JS).
                     🚫 Do NOT include:
@@ -397,7 +881,7 @@ HTML Only. No CSS.
 ✅ Use placeholders for image/icon blocks where appropriate (e.g., <div style="width:100px;height:30px;background:#ccc;"></div>)`;
 
     // Generate prompt from section
-    async generatePromptFromSection(
+   async generatePromptFromSection(
         sectionName: string,
         sectionDescription: string,
         headerId: number = 35,
@@ -497,7 +981,6 @@ HTML Only. No CSS.
             });
         });
     }
-
     // Process all pages live update
     async processAllPagesLiveUpdate() {
         const htmlGenerationTasks: Promise<void>[] = [];
@@ -536,13 +1019,20 @@ HTML Only. No CSS.
             this.siteTreeService.createHtmlfile(this.sitename, fileMap).subscribe({
             next: (res) => {
                 this.toastr.success(`Saved ${Object.keys(fileMap).length} new HTML files`);
+                              
+                this.hideLoading();
             },
             error: (err) => {
                 this.toastr.error('Failed to save HTML files');
                 console.error('❌ Error saving html:', err);
+              
+                this.hideLoading();
             }
+            
             });
         }
+      
+     
     }
     nextPage(): void {
   if (this.currentPageIndex < this.pageRenderOrder.length - 1) {
@@ -635,7 +1125,43 @@ previousPage(): void {
 // }
 
     // 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.');
+    //         }
+    //     });
+    // }
 async generateJson(data: { jsonStructure: any, sectionType: string }): Promise<string> {
     return new Promise((resolve) => {
         try {
@@ -702,44 +1228,6 @@ async generateJson(data: { jsonStructure: any, sectionType: string }): Promise<s
 }
 
 
-    // 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.');
-    //         }
-    //     });
-    // }
-
     // Copy HTML to clipboard
     copyToClipboard(pageName: string) {
         const fullHtml = this.pageSections[pageName].FullPage.toString();
@@ -909,24 +1397,25 @@ async recreateWireframe() {
 }
 
 private async tryReadHtmlFromServer(siteName: string, pageName: string): Promise<string | null> {
-return new Promise((resolve) => {
-    this.siteTreeService.readPages(siteName, pageName).subscribe({
-    next: (res) => {
-        if (res) {
-            // console.log('got html in api ',res)
-        resolve(res); // assuming HTML string is returned
-        } else {
-            console.warn('⚠️ Got null/empty HTML for', pageName);
-
-        resolve(null);
-        }
-    },
-    
-    error: (err) => {
-        console.error('❌ Error fetching HTML for', pageName, '→', err);
-        resolve(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);
+            }
+        });
+    });
 }
 
 
@@ -1038,8 +1527,8 @@ return new Promise((resolve) => {
         }
     }
 
-    // Call LLM
-   async callAi(data, attempt = 1): Promise<string> {
+    // Call ai
+    async callAi(data, attempt = 1): Promise<string> {
     return new Promise((resolve) => {
         console.log(`📡 Call LLM - Attempt ${attempt}`);
 
@@ -1074,8 +1563,6 @@ return new Promise((resolve) => {
     });
 }
 
-
-
     // Style properties
     activeEditTarget: string | null = null;
     // liveStyles = {
@@ -1269,8 +1756,10 @@ return new Promise((resolve) => {
             ${html}
             </div>
         `;
+       this.hideLoading();
         return this.sanitizer.bypassSecurityTrustHtml(safeHtml);
         }
+        this.showLoading();
         return this.sanitizer.bypassSecurityTrustHtml('<div>Section loading...</div>');
     }
     
@@ -1306,41 +1795,73 @@ return new Promise((resolve) => {
     }
     
     // Handle page drop
-    onPageDrop(event: CdkDragDrop<string[]>) {
-        const pages = this.objectKeys(this.pageSections);
-        moveItemInArray(pages, event.previousIndex, event.currentIndex);
-        
-        // Rebuild pageSections object in new order
-        const newPageSections: Record<string, { FullPage: SafeHtml }> = {};
-        pages.forEach(page => {
-            newPageSections[page] = this.pageSections[page];
-        });
-        
-        this.pageSections = newPageSections;
-        this.toastr.success('Page order updated');
-    }
-
+   // In component class
+onPageDrop(event: CdkDragDrop<string[]>) {
+  if (event.previousContainer === event.container) {
+    // Reorder pages array
+    moveItemInArray(this.pageRenderOrder, event.previousIndex, event.currentIndex);
     
+    // Update section order map to maintain relationships
+    const newOrder = [...this.pageRenderOrder];
+    this.pageRenderOrder = [];
+    setTimeout(() => this.pageRenderOrder = newOrder);
     
-    // Handle section drop
-    onSectionDrop(event: CdkDragDrop<string[]>, pageName: string) {
-    const currentOrder = this.sectionOrderMap[pageName] || [];
-    moveItemInArray(currentOrder, event.previousIndex, event.currentIndex);
-    this.sectionOrderMap[pageName] = [...currentOrder];
+    // Force update section mappings
+    this.sectionOrderMap = {...this.sectionOrderMap};
     this.cdr.detectChanges();
   }
+}
 
+
+    
+    
+// Modified drop handler
+onSectionDrop(event: CdkDragDrop<string[]>) {
+  if (event.previousContainer === event.container) {
+    moveItemInArray(
+      event.container.data,
+      event.previousIndex,
+      event.currentIndex
+    );
+  } else {
+    transferArrayItem(
+      event.previousContainer.data,
+      event.container.data,
+      event.previousIndex,
+      event.currentIndex
+    );
+  }
+  
+  // Update section order map
+  const pageName = this.getCurrentPageName();
+  this.sectionOrderMap[pageName] = [...event.container.data];
+  this.cdr.detectChanges();
+}
+
+
+
+
+
+
+getAllSectionLists(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('.connected-sections')) as HTMLElement[];
+}
   
     
     
     // Zoom control methods
-      zoomIn() {
-    this.zoomLevel = Math.min(2, this.zoomLevel + 0.1);
-  }
+ 
+ zoomIn() {
+        this.scale = Math.min(this.scale + 0.1, 2);
+        this.zoomLevel = this.scale;
+        this.cdr.detectChanges();
+    }
 
-  zoomOut() {
-    this.zoomLevel = Math.max(0.5, this.zoomLevel - 0.1);
-  }
+    zoomOut() {
+        this.scale = Math.max(this.scale - 0.1, 0.3);
+        this.zoomLevel = this.scale;
+        this.cdr.detectChanges();
+    }
 
 
 
@@ -1349,18 +1870,6 @@ return new Promise((resolve) => {
     // availablePages: { label: string, href: string }[] = [];
 
     // Select Navbar Section
-    selectNavbar(pageName: string) {
-        const html = this.pageSections[pageName]['FullPage']?.toString() || '';
-
-        if (html.includes('class="nav-1') || html.includes('navbar')) {
-
-            console.log('navbar here ..')
-            this.selectedNavbarPage = pageName;
-            this.extractNavbarLinks(pageName, html);
-        } else {
-            alert('No Navbar found on this page.');
-        }
-    }
 
     // Extract links from navbar HTML
     extractNavbarLinks(pageName: string, html: string) {
@@ -1386,14 +1895,14 @@ return new Promise((resolve) => {
     }
 
     // Add new link
-    addLink(pageName: string) {
-        this.navbarLinks[pageName].push({ label: '', href: '#' });
-    }
+    // addLink(pageName: string) {
+    //     this.navbarLinks[pageName].push({ label: '', href: '#' });
+    // }
 
-    // Remove a link
-    removeLink(pageName: string, index: number) {
-        this.navbarLinks[pageName].splice(index, 1);
-    }
+    // // Remove a link
+    // removeLink(pageName: string, index: number) {
+    //     this.navbarLinks[pageName].splice(index, 1);
+    // }
 
       toggleSidebar() {
     this.sidebarCollapsed = !this.sidebarCollapsed;
@@ -1471,34 +1980,35 @@ return new Promise((resolve) => {
     }
 
     // Apply Changes to navbar
-    applyNavbarChanges(pageName: string): void {
-        const links = this.navbarLinks[pageName] || [];
-        const originalHtml = this.pageSections[pageName].FullPage.toString();
+    // applyNavbarChanges(pageName: string): void {
+    //     const links = this.navbarLinks[pageName] || [];
+    //     const originalHtml = this.pageSections[pageName].FullPage.toString();
         
-        // Create parser with sanitization
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(originalHtml, 'text/html');
+    //     // Create parser with sanitization
+    //     const parser = new DOMParser();
+    //     const doc = parser.parseFromString(originalHtml, 'text/html');
         
-        // Update all nav menus
-        const navMenus = doc.querySelectorAll('ul.nav-1, nav ul');
-        navMenus.forEach(ul => {
-        ul.innerHTML = '';
-        links.forEach(link => {
-            const li = doc.createElement('li');
-            const a = doc.createElement('a');
-            a.setAttribute('href', this.sanitizer.sanitize(SecurityContext.URL, link.href) || '#');
-            a.textContent = this.sanitizer.sanitize(SecurityContext.HTML, link.label) || 'Link';
-            li.appendChild(a);
-            ul.appendChild(li);
-        });
-        });
+    //     // Update all nav menus
+    //     const navMenus = doc.querySelectorAll('ul.nav-1, nav ul');
+    //     navMenus.forEach(ul => {
+    //     ul.innerHTML = '';
+    //     links.forEach(link => {
+    //         const li = doc.createElement('li');
+    //         const a = doc.createElement('a');
+    //         a.setAttribute('href', this.sanitizer.sanitize(SecurityContext.URL, link.href) || '#');
+    //         a.textContent = this.sanitizer.sanitize(SecurityContext.HTML, link.label) || 'Link';
+    //         li.appendChild(a);
+    //         ul.appendChild(li);
+    //     });
+    //     });
     
-        // Serialize and sanitize
-        const updatedHtml = doc.documentElement.innerHTML;
-        this.pageSections[pageName].FullPage = this.sanitizer.bypassSecurityTrustHtml(updatedHtml);
-        this.toastr.success('Navbar updated successfully');
-    }
-      resetZoom() {
+    //     // Serialize and sanitize
+    //     const updatedHtml = doc.documentElement.innerHTML;
+    //     this.pageSections[pageName].FullPage = this.sanitizer.bypassSecurityTrustHtml(updatedHtml);
+    //     this.toastr.success('Navbar updated successfully');
+    // }
+
+    resetZoom() {
     this.zoomLevel = 1;
   }
     
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts
index f125a1e..aa35a5e 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts
@@ -160,58 +160,58 @@ export class TreeVisualizerComponent {
     // Call the actual generateJson method
 
     const prompt = `
-You are a JSON structure generator for website UI and sitemap hierarchy.
+    You are a JSON structure generator for website UI and sitemap hierarchy.
 
-Your task is to generate a strictly hierarchical JSON tree that represents the full page flow of a website. The root of the tree must always be the "Home" page. Other pages (like Login, Sign Up, Dashboard, etc.) must be nested logically using a "Children" key — never flatten the structure.
+    Your task is to generate a strictly hierarchical JSON tree that represents the full page flow of a website. The root of the tree must always be the "Home" page. Other pages (like Login, Sign Up, Dashboard, etc.) must be nested logically using a "Children" key — never flatten the structure.
 
-Each page must contain:
+    Each page must contain:
 
-- 4 to 5 meaningful UI sections (e.g., "Header Section", "Form Section", "Feature Section", etc.)
-- A "Navbar" and a "Footer" section (always included on every page)
-- A short, clear description for each section (to support frontend development)
+    - 4 to 5 meaningful UI sections (e.g., "Header Section", "Form Section", "Feature Section", etc.)
+    - A "Navbar" and a "Footer" section (always included on every page)
+    - A short, clear description for each section (to support frontend development)
 
-Constraints:
-- Total number of pages (including nested children) must be between ${this.selectedPageRange}
-- Do NOT create unnecessary or generic pages (e.g., no "Blog", "FAQ", etc.) unless explicitly present in the user flow
-- Pages that appear after user actions (e.g., clicking a card or after login) must be nested under the relevant parent using a "Children" key
-- DO NOT include any standalone section like "FAQ" or "Blog" as top-level pages unless mentioned
+    Constraints:
+    - Total number of pages (including nested children) must be between ${this.selectedPageRange}
+    - Do NOT create unnecessary or generic pages (e.g., no "Blog", "FAQ", etc.) unless explicitly present in the user flow
+    - Pages that appear after user actions (e.g., clicking a card or after login) must be nested under the relevant parent using a "Children" key
+    - DO NOT include any standalone section like "FAQ" or "Blog" as top-level pages unless mentioned
 
-📘 Website Context:
-${this.rawInputText}
+    📘 Website Context:
+    ${this.rawInputText}
 
 
 
---- Reference Format (DO NOT COPY; for structure only) ---
-{
-  "Home": {
-    "Navbar": "...",
-    "Header Section": "...",
-    "Feature Section": "...",
-    "Footer": "...",
-    "Children": {
-      "About": {
+    --- Reference Format (DO NOT COPY; for structure only) ---
+    {
+      "Home": {
         "Navbar": "...",
         "Header Section": "...",
+        "Feature Section": "...",
+        "Footer": "...",
+        "Children": {
+          "About": {
+            "Navbar": "...",
+            "Header Section": "...",
+            "Footer": "..."
+          }
+        }
+      },
+      "Services": {
+        "Navbar": "...",
+        "Content Section": "...",
         "Footer": "..."
       }
     }
-  },
-  "Services": {
-    "Navbar": "...",
-    "Content Section": "...",
-    "Footer": "..."
-  }
-}
----
+    ---
 
-🚫 DO NOT:
-- Include any explanation, notes, comments, or formatting (like \`\`\` or \`json\`)
-- Do NOT return escaped or markdown-formatted JSON
-- Do NOT wrap the output inside code blocks
-- Do NOT return anything except plain raw JSON
+    🚫 DO NOT:
+    - Include any explanation, notes, comments, or formatting (like \`\`\` or \`json\`)
+    - Do NOT return escaped or markdown-formatted JSON
+    - Do NOT wrap the output inside code blocks
+    - Do NOT return anything except plain raw JSON
 
-📤 Output ONLY the final JSON structure — nothing more.
-`;
+    📤 Output ONLY the final JSON structure — nothing more.
+    `;
 
     const payload = {
       // query: this.rawInputText + '  \n ' + suffix,