diff --git a/testnewang03-backs-b/authsec_springboot/backend/src/main/java/com/realnet/Builders/Services/BuilderService.java b/testnewang03-backs-b/authsec_springboot/backend/src/main/java/com/realnet/Builders/Services/BuilderService.java
index 55b4bad..88b43c0 100644
--- a/testnewang03-backs-b/authsec_springboot/backend/src/main/java/com/realnet/Builders/Services/BuilderService.java
+++ b/testnewang03-backs-b/authsec_springboot/backend/src/main/java/com/realnet/Builders/Services/BuilderService.java
@@ -72,6 +72,9 @@ public class BuilderService {
 addCustomMenu( "Forma","Forma",  "Transcations"); 
 
 
+addCustomMenu( "Forma","Forma",  "Transcations"); 
+
+
 
 		System.out.println("dashboard and menu inserted...");
 
diff --git a/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Forma/Forma.component.html b/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Forma/Forma.component.html
index e677982..cae4a76 100644
--- a/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Forma/Forma.component.html
+++ b/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Forma/Forma.component.html
@@ -17,11 +17,12 @@
   </div>
 </section>
 
+
 <div class="ug-toolbar">
   <div class="ug-toolbar__left">
     <div class="ug-search">
       <clr-icon shape="search"></clr-icon>
-      <input class="ug-search__input" type="text" [placeholder]="Search" [(ngModel)]="filterText" />
+      <input class="ug-search__input" type="text" placeholder="SEARCH" [(ngModel)]="filterText" />
     </div>
   </div>
   <div class="ug-toolbar__right">
@@ -34,8 +35,7 @@
       </button>
     </div>
   </div>
-</div>
-
+</div> 
 <clr-datagrid class="ug-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
   <clr-dg-placeholder>
     <ng-template #loadingSpinner>
@@ -99,7 +99,7 @@
         <clr-icon shape="edit"></clr-icon>
         EDIT
       </button> -->
-      <button class="ug-action-item" (click)="goToEdit(user)">
+      <button class="ug-action-item" (click)="onEdit(user)">
         <clr-icon shape="edit"></clr-icon>
         EDIT
       </button>
@@ -133,7 +133,7 @@
  </div>
     <div class="ug-card-item__footer">
       
-      <button class="ug-btn ug-btn-sm ug-btn-outline" (click)="goToEdit(user)">
+      <button class="ug-btn ug-btn-sm ug-btn-outline" (click)="onEdit(user)">
         <clr-icon shape="edit"></clr-icon> Edit
       </button>
       <button class="ug-btn ug-btn-sm ug-btn-error" (click)="onDelete(user)">
@@ -153,6 +153,8 @@
   <h3 class="modal-title">Add Forma</h3>
   <div class="modal-body">
     <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+<div class="form-row">
+            <div class="form-col">
 <div class="ug-form-group">
         <label for="name" class="ug-form-label">Name<span class="required-field">*</span></label>
         <input type="text" id="name" class="ug-form-input" formControlName="name">
@@ -160,11 +162,23 @@
           <div *ngIf="submitted && entryForm.controls.name.errors.required">*This field is Required</div>
         </div>
       </div>
+</div>
+            </div>
 
-<div class="clr-col-sm-12">             
- <label>  Description</label>             
- <textarea cols="10" rows="2" formControlName="description" placeholder="Textarea">  </textarea>
-	            </div>
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="description" class="ug-form-label">Description</label>
+              <textarea 
+                id="description" 
+                class="ug-form-input" 
+                formControlName="description" 
+                placeholder="Enter text" 
+                rows="3"></textarea>
+            </div>
+</div>
+            </div>
 
 
       <div class="modal-footer">
@@ -180,23 +194,33 @@
   <div class="modal-body" *ngIf="rowSelected.id">
     
 
-<div class="ug-form-group">
-      <label for="name" class="ug-form-label">Name<span class="required-field">*</span></label>
-      <input type="text" id="name" class="ug-form-input" [(ngModel)]="rowSelected.name" name="name">
-    </div>
 
-<div class="clr-col-sm-12">               
-<label> Description</label>
-	              <textarea cols="10" rows="2"[(ngModel)]="rowSelected.description" name="description " placeholder="Textarea">  </textarea>
-	           </div> 
+
+<div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="name" class="ug-form-label">Name<span class="required-field">*</span></label>
+                <input type="text" id="name" class="ug-form-input" [(ngModel)]="rowSelected.name" name="name"
+                  placeholder="Enter Name">
+              </div>
+            </div>
+          </div>
+
+
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="description" class="ug-form-label">Description</label>
+                <textarea id="description" class="ug-form-input" [(ngModel)]="rowSelected.description"
+                  name="description" placeholder="Enter text" rows="3"></textarea>
+              </div>
+            </div>
+           
 
 
     <div class="modal-footer">
       <button type="button" class="ug-btn ug-btn-outline" (click)="modalEdit = false">Cancel</button>
       <button type="submit" (click)="onUpdate(rowSelected.id)" class="ug-btn ug-btn-primary">Update</button>
     </div>
-  </div>
-</clr-modal>
 
 <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
   <div class="modal-body" *ngIf="rowSelected.id">
diff --git a/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Forma/Forma.component.scss b/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Forma/Forma.component.scss
index dd4a588..a35f132 100644
--- a/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Forma/Forma.component.scss
+++ b/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Forma/Forma.component.scss
@@ -3,7 +3,7 @@
 
 // Import design tokens
 @import '../../../../../../styles/design-tokens';
-// Forma Styles
+// Newbasicp1 Styles
 .ug-hero {
   display: flex;
   justify-content: space-between;
@@ -207,6 +207,77 @@
   }
 }
 
+// Form Container Styles
+.form-container {
+  padding: 20px 0;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -12px 16px -12px;
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    margin: 0 0 16px 0;
+  }
+}
+
+.form-col {
+  flex: 1;
+  padding: 0 12px;
+  min-width: 250px;
+  
+  @media (max-width: 768px) {
+    padding: 0;
+    min-width: 100%;
+    margin-bottom: 16px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Password Input Container
+.password-input-container {
+  position: relative;
+  
+  .password-input {
+    padding-right: 40px;
+  }
+  
+  .password-toggle {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--theme-text-secondary);
+    padding: 4px;
+    border-radius: 4px;
+    transition: all 200ms ease-out;
+    
+    &:hover {
+      color: var(--theme-text);
+      background: rgba(0, 0, 0, 0.05);
+    }
+    
+    clr-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+// Textarea Styles
+textarea.ug-form-input {
+  min-height: 100px;
+  resize: vertical;
+}
+
 .ug-search {
   position: relative;
   max-width: 400px;
@@ -673,6 +744,7 @@
     font-weight: 600;
     font-size: 20px;
     margin: 0;
+    font-family: var(--theme-font-secondary);
   }
   
   .close {
@@ -696,8 +768,51 @@
   background: var(--theme-background);
   border-radius: 0 0 16px 16px !important;
   border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
 }
 
+// Recaptcha Container Styles
+.recaptcha-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recaptcha-code {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--theme-background);
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  
+  b {
+    font-size: 18px;
+    letter-spacing: 2px;
+    font-family: 'Courier New', monospace;
+  }
+}
+
+// Toggle Styles
+.clr-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  label {
+    margin-bottom: 0;
+    font-weight: 500;
+    color: var(--theme-text);
+  }
+}
+
+// URL Field Styles
+.ug-form-input[type="url"] {
+  font-family: monospace;
+}
 // Responsive adjustments
 @media (max-width: 768px) {
   .ug-hero {
@@ -745,4 +860,11 @@
       justify-content: center;
     }
   }
-}
\ No newline at end of file
+.recaptcha-code {
+    flex-direction: column;
+    align-items: flex-start;
+    
+    .ug-btn {
+      align-self: flex-end;
+    }
+  }}
\ No newline at end of file
diff --git a/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Forma/Forma.component.ts b/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Forma/Forma.component.ts
index 44a4b85..f26f389 100644
--- a/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Forma/Forma.component.ts
+++ b/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Forma/Forma.component.ts
@@ -134,9 +134,9 @@ description : [null],
     const text = (this.filterText || '').toLowerCase();
     if (!text) { return items; }
     return items.filter(g => (
-(g?.name || '').toLowerCase().includes(text) ||
+((g?.name || '').toString()).toLowerCase().includes(text) ||
 
-(g?.description || '').toLowerCase().includes(text) 
+((g?.description || '').toString()).toLowerCase().includes(text) 
 
     ));
   }
diff --git a/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts b/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
index 4e4125b..b5e4861 100644
--- a/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
+++ b/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
@@ -1,3 +1,4 @@
+
 import { FormaComponent } from './BuilderComponents/basicp1/Forma/Forma.component';
 
 import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
@@ -280,6 +281,8 @@ const routes: Routes = [
 
 
       // buildercomponents
+
+
 {path:'Forma',component:FormaComponent},
 
 
diff --git a/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts b/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
index 2d1d9a1..1cd4a30 100644
--- a/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
+++ b/testnewang03-front-f/authsec_angularClarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
@@ -1,3 +1,4 @@
+
 import { FormaComponent } from './BuilderComponents/basicp1/Forma/Forma.component';
 
 
@@ -149,6 +150,8 @@ import { SharedModule } from '../../shared/shared.module';
 
 
     // buildercomponents
+
+
 FormaComponent,