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 a5d5e63..2488a81 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
@@ -43,7 +43,7 @@ export class SiteTreeservice {
   }
 
   getDesignLibrary(operationType: string, fieldtype: string): Observable<any> {
-    const _http = "Design_lbrary/Design_lbrary/unique?" + "operationType=" + operationType + "&fieldType=" + fieldtype;
+    const _http = "Design_lbrary/Design_lbrary/random?" + "operationType=" + operationType + "&fieldType=" + fieldtype;
     return this.apiRequest.get(_http);
   }
 
@@ -60,7 +60,7 @@ export class SiteTreeservice {
     return this.apiRequest.get(`api/html/generate/html/id/` + id);
   }
 
-  createHtmlPages(data: any, projId: number): Observable<any> {
+  deployProj(data: any, projId: number): Observable<any> {
     return this.apiRequest.post(`sureops/deploy?projId=` + projId, data);
   }
 
@@ -70,6 +70,10 @@ export class SiteTreeservice {
     return this.apiRequest.post(_http, data);
   }
 
+  createFiles(data: any, projId: number): Observable<any> {
+    return this.apiRequest.post(`sureops/createFile?projId=` + projId, data);
+  }
+
   readPages(siteNmae: String, pageNmae: String): Observable<any> {
 
     const _http = this.baseURL + "/read?siteBuilderName=" + siteNmae + '&filename=' + pageNmae;
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 cb4c54a..08d4ba6 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
@@ -1686,6 +1686,67 @@ body {
   background-size: 40px;
 }
 
+.nav-1-wrapper {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+.nav-1-navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 40px;
+  border-bottom: 1px solid #eee;
+}
+
+.nav-1-logo {
+  font-family: cursive;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.nav-1-nav-links {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-1-nav-links li a {
+  text-decoration: none;
+  color: #111;
+  font-size: 14px;
+}
+
+.nav-1-dropdown i {
+  font-size: 10px;
+  margin-left: 5px;
+}
+
+.nav-1-nav-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.nav-1-btn {
+  padding: 6px 14px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 2px solid #111;
+}
+
+.nav-1-outline {
+  background-color: transparent;
+  color: #111;
+}
+
+.nav-1-solid {
+  background-color: #111;
+  color: #fff;
+}
+
 `;
 
 
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css.ts
index 06f2d32..d38b0a5 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css.ts
@@ -1685,6 +1685,66 @@ body {
   background-position: center;
   background-size: 40px;
 }
+.nav-1-wrapper {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+.nav-1-navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 40px;
+  border-bottom: 1px solid #eee;
+}
+
+.nav-1-logo {
+  font-family: cursive;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.nav-1-nav-links {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-1-nav-links li a {
+  text-decoration: none;
+  color: #111;
+  font-size: 14px;
+}
+
+.nav-1-dropdown i {
+  font-size: 10px;
+  margin-left: 5px;
+}
+
+.nav-1-nav-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.nav-1-btn {
+  padding: 6px 14px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 2px solid #111;
+}
+
+.nav-1-outline {
+  background-color: transparent;
+  color: #111;
+}
+
+.nav-1-solid {
+  background-color: #111;
+  color: #fff;
+}
 
 `;
 
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 1de4225..f771eae 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
@@ -125,7 +125,7 @@
       💾 Save All HTML Files
     </button>
 
-    <button (click)="uploadHtmlFiles(11096)" class="action-btn save-btn">
+    <button (click)="buildWireframe(37667)" class="action-btn save-btn">
 
       💾 build wireframe
     </button>
@@ -136,7 +136,7 @@
     <div class="navbar-controls">
       <select [(ngModel)]="selectedNavbarPage" (change)="selectedNavbarPage && selectNavbar(selectedNavbarPage)">
         <option value="">Select Navbar Page</option>
-        <option *ngFor="let page of objectKeys(pageSections)" [value]="page">{{ page }}</option>
+        <option *ngFor="let page of pageRenderOrder" [value]="page">{{ page }}</option>
       </select>
     </div>