diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 60c9c33..8bf3a2b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,7 +5,9 @@ import { User } from './user.component';
   selector: 'app-root',
   template: `
     <section (mouseover)="onMouseOver()">
-      <app-user></app-user>
+
+      <app-user name="Simran"></app-user>
+
 
       @if (isServerRunning) {
       <p>Yes, the server is running</p>
@@ -20,6 +22,10 @@ import { User } from './user.component';
 
       <p>{{ message }}</p>
     </section>
+
+
+    <div [contentEditable]="isEditable">This text can be edited</div>
+
   `,
   imports: [User],
   standalone: true,
diff --git a/src/app/user.component.ts b/src/app/user.component.ts
index e838c35..7efbc6e 100644
--- a/src/app/user.component.ts
+++ b/src/app/user.component.ts
@@ -1,7 +1,12 @@
-import { Component } from '@angular/core';
+
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'app-user',
-  template: `Username: youngTech`,
+  template: `<p>The user's name is {{ name() }}</p>`,
+  standalone: true,
 })
-export class User {}
+export class User {
+  name = input<string>(); //  Input property for the user's name
+}
+