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
new file mode 100644
index 0000000..6a1a35e
--- /dev/null
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html
@@ -0,0 +1,22 @@
+<!-- wireframe-renderer.component.html -->
+
+<div class="p-4 border border-dashed m-2 bg-white">
+    <h2 class="text-xl font-bold">{{ title }}</h2>
+  
+    <div *ngFor="let key of getKeys(node)">
+      <div *ngIf="key !== 'Children'" class="pl-4">
+        <p class="font-medium">{{ key }}</p>
+        <div class="border p-2 m-2 bg-gray-50">{{ node[key] || 'Empty block' }}</div>
+      </div>
+    </div>
+  
+    <!-- Recursively render children -->
+    <div class="pl-6 mt-4" *ngIf="node.Children">
+      <app-wireframe-renderer
+        *ngFor="let childKey of getKeys(node.Children)"
+        [title]="childKey"
+        [node]="node.Children[childKey]">
+      </app-wireframe-renderer>
+    </div>
+  </div>
+  
\ No newline at end of file
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
new file mode 100644
index 0000000..afb8f2c
--- /dev/null
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss
@@ -0,0 +1,10 @@
+.wireframe-container {
+    font-family: Arial, sans-serif;
+    background: #f8f8f8;
+    padding: 1rem;
+  }
+  
+  .border-dashed {
+    border-style: dashed;
+  }
+  
\ No newline at end of file
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
new file mode 100644
index 0000000..cd7cb55
--- /dev/null
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts
@@ -0,0 +1,18 @@
+// wireframe-renderer.component.ts
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'app-wireframe-renderer',
+    templateUrl: './wireframe-renderer.component.html',
+    styleUrls: ['./wireframe-renderer.component.scss']
+})
+export class WireframeRendererComponent {
+    @Input() node: any;
+    @Input() title: string = '';
+
+    // wireframe-renderer.component.ts (add this helper method)
+    getKeys(obj: any): string[] {
+        return Object.keys(obj || {});
+    }
+
+}
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.html b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.html
index 61dfe44..974eae4 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.html
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.html
@@ -14,7 +14,8 @@
 </div> -->
 
 
-<!-- 🔽 New textarea for creating JSON -->
+<!-- tree-visualizer.component.html -->
+<!-- 
 <div class="controls">
   <textarea [(ngModel)]="rawInputText" placeholder="Write your structure here"></textarea>
   <button (click)="generateJson()">Submit</button>
@@ -25,6 +26,51 @@
   <button (click)="convertJson()">Convert</button>
 </div>
 
-<div class="tree-container" *ngIf="treeData">
-  <app-tree-node [node]="treeData"></app-tree-node>
-</div>
\ No newline at end of file
+<mat-tab-group *ngIf="treeData">
+  <mat-tab label="Sitemap">
+    <div class="tree-container">
+      <app-tree-node [node]="treeData"></app-tree-node>
+    </div>
+  </mat-tab>
+
+  <mat-tab label="Wireframe">
+    <div class="wireframe-container mt-6">
+      <h1 class="text-2xl font-bold">Wireframe Preview</h1>
+      <app-wireframe-renderer
+        [title]="treeData.title"
+        [node]="treeData.data">
+      </app-wireframe-renderer>
+    </div>
+  </mat-tab>
+</mat-tab-group> -->
+<!-- Floating textarea + button -->
+<div style="position: fixed; top: 20px; left: 20px; width: 300px; background: white; border: 1px solid #ccc; padding: 15px; border-radius: 8px; z-index: 999;">
+  <textarea [(ngModel)]="rawInputText" rows="5" style="width: 100%; padding: 5px;" placeholder="Write your prompt here"></textarea>
+  <button (click)="openPopup()" style="margin-top: 10px; width: 100%; padding: 8px; background: #007bff; color: white; border: none; border-radius: 4px;">Generate JSON</button>
+</div>
+
+<!-- Tabs -->
+<div style="margin-top: 200px; padding: 20px;">
+  <div style="display: flex; border-bottom: 2px solid #ccc;">
+    <button [ngClass]="{'active-tab': activeTab === 'sitemap'}" (click)="activeTab = 'sitemap'" class="tab-button">Sitemap</button>
+    <button [ngClass]="{'active-tab': activeTab === 'wireframe'}" (click)="activeTab = 'wireframe'" class="tab-button">Wireframe</button>
+  </div>
+
+  <div *ngIf="activeTab === 'sitemap'" style="margin-top: 20px;">
+    <app-tree-node *ngIf="treeData" [node]="treeData"></app-tree-node>
+  </div>
+
+  <div *ngIf="activeTab === 'wireframe'" style="margin-top: 20px;">
+    <app-wireframe-renderer *ngIf="treeData" [title]="treeData.title" [node]="treeData.data"></app-wireframe-renderer>
+  </div>
+</div>
+
+<!-- Simple Popup -->
+<div *ngIf="showPopup" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000;">
+  <div style="background: white; padding: 20px; width: 500px; border-radius: 8px; position: relative;">
+    <button (click)="showPopup = false" style="position: absolute; top: 10px; right: 10px; border: none; background: none; font-size: 20px;">×</button>
+    <h2 style="margin-bottom: 10px;">Generate JSON</h2>
+    <textarea [(ngModel)]="rawInputText" rows="6" style="width: 100%; padding: 8px;"></textarea>
+    <button (click)="generateJson()" style="margin-top: 10px; padding: 8px 16px; background: green; color: white; border: none; border-radius: 4px;">Generate</button>
+  </div>
+</div>
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.scss b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.scss
index 693071c..a0cf891 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.scss
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.scss
@@ -27,3 +27,61 @@
 .controls button:hover {
   background-color: #1565c0;
 }
+
+.toolbar {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 1rem;
+  background-color: #f7f7f7;
+}
+
+textarea {
+  width: 300px;
+  height: 120px;
+  font-family: monospace;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #3f51b5;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color: #303f9f;
+}
+
+mat-tab-group {
+  margin: 1rem;
+}
+
+.tab-content {
+  padding: 1rem;
+  background-color: #fafafa;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  min-height: 400px;
+}
+
+.tab-button {
+  padding: 10px 20px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  font-weight: bold;
+}
+
+.active-tab {
+  border-bottom: 2px solid #007bff;
+  color: #007bff;
+}
+
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 83d4cea..6249a5e 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
@@ -2,12 +2,16 @@ import { Component } from '@angular/core';
 import { treeVisualizerService } from './tree-visualizer.service';
 
 
+
 @Component({
   selector: 'app-tree-visualizer',
   templateUrl: './tree-visualizer.component.html',
   styleUrls: ['./tree-visualizer.component.scss']
 })
 export class TreeVisualizerComponent {
+
+  activeTab: 'sitemap' | 'wireframe' = 'sitemap';
+  showPopup: boolean = false;
   inputJson: string = '';
   treeData: any = null;
   rawInputText: string = `make a website , where we can login , sign up.
@@ -16,6 +20,13 @@ after click this icard inside we upload excel of student data, icard template, a
 
   constructor(private treeService: treeVisualizerService) { }
 
+
+
+  openPopup() {
+    this.showPopup = true;
+  }
+
+
   convertJson() {
     try {
       const parsed = JSON.parse(this.inputJson);