diff --git a/src/userService.ts b/src/userService.ts
index 14c9181..7181ba8 100644
--- a/src/userService.ts
+++ b/src/userService.ts
@@ -2,9 +2,9 @@ import {IUserService} from "./iuserService";
 export class UserService implements IUserService {
     public getUsers(): Array<any> {
         let users: Array<any> = [
-            { id: 1, firstName: "Tu", lastName: "Tran", userName: "tutran" },
-            { id: 2, firstName: "Tu 1", lastName: "Tran", userName: "tutran2" },
-            { id: 3, firstName: "Tu 2", lastName: "Tran", userName: "tutran3" }
+            { id: 1, firstName: "Tu", lastName: "Tran", userName: "tutran", color:"red" },
+            { id: 2, firstName: "Tu 1", lastName: "Tran", userName: "tutran2" , color:"blue"},
+            { id: 3, firstName: "Tu 2", lastName: "Tran", userName: "tutran3" , color:"green"}
         ];
         return users;
     }
diff --git a/src/users.html b/src/users.html
index 3b51fd9..4fe31c1 100644
--- a/src/users.html
+++ b/src/users.html
@@ -12,13 +12,28 @@
 		<tbody>
 			<tr *ngFor="let user of users">
 				<th scope="row">{{user.id}}</th>
-				<td>{{user.firstName}}</td>
+				<td [innerText]="user.firstName"></td>
 				<td>{{user.lastName}}</td>
 				<td>{{user.userName}}</td>
 				<td>
 					<a title=""><i class="fa fa-edit"></i></a>
+					<a title="" (click)="onPreviewClicked(user)"><i class="fa fa-eye-slash"></i></a>
 				</td>
 			</tr>
 		</tbody>
 	</table>
+	<div *ngIf="currentSelected">
+		<h3>Summary of {{currentSelected.firstName}}</h3>
+		<form class="form-horizontal form-label-left">
+			<div class="form-group">
+				<label>First Name</label>
+				<input class="form-control" [(ngModel)]="currentSelected.firstName" name="first" />
+			</div>
+			<div class="form-group">
+				<label>Last Name</label>
+				<input class="form-control" [(ngModel)]="currentSelected.lastName" name="last" />
+			</div>
+		</form>
+	</div>
+
 </div>
\ No newline at end of file
diff --git a/src/users.ts b/src/users.ts
index 5fc67b5..cfcc420 100644
--- a/src/users.ts
+++ b/src/users.ts
@@ -3,11 +3,16 @@ import { Router } from "@angular/router";
 import { UserService } from "./userService";
 @Component({
     selector: "users",
-    templateUrl: "src/users.html"
+    templateUrl: "src/users.html",
+    styles: ['table th{font-size: 20px;}']
 })
 export class Users {
     private users: Array<any> = [];
+    public currentSelected: any = null;
     constructor(userService: UserService) {
         this.users = userService.getUsers();
     }
+    public onPreviewClicked(user: any) {
+        this.currentSelected = user;
+    }
 }
\ No newline at end of file