diff --git a/package-lock.json b/package-lock.json
index 66df3cf..4f6e878 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
       "devDependencies": {
         "@babel/preset-typescript": "^7.14.5",
         "@types/express": "^4.17.12",
+        "@types/mongoose": "^5.11.97",
         "@types/node": "^15.12.2",
         "@types/socket.io-client": "^3.0.0",
         "@typescript-eslint/eslint-plugin": "^4.26.1",
@@ -515,6 +516,16 @@
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
       "dev": true
     },
+    "node_modules/@types/mongoose": {
+      "version": "5.11.97",
+      "resolved": "https://registry.npmjs.org/@types/mongoose/-/mongoose-5.11.97.tgz",
+      "integrity": "sha512-cqwOVYT3qXyLiGw7ueU2kX9noE8DPGRY6z8eUxudhXY8NZ7DMKYAxyZkLSevGfhCX3dO/AoX5/SO9lAzfjon0Q==",
+      "deprecated": "Mongoose publishes its own types, so you do not need to install this package.",
+      "dev": true,
+      "dependencies": {
+        "mongoose": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "15.14.9",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-15.14.9.tgz",
diff --git a/src/client/src/app/components/users-list/users-list.component.html b/src/client/src/app/components/users-list/users-list.component.html
index f012db9..966cf59 100644
--- a/src/client/src/app/components/users-list/users-list.component.html
+++ b/src/client/src/app/components/users-list/users-list.component.html
@@ -1,6 +1,14 @@
 <ul>
-    <li *ngFor='let user of (users$ | async)'>
-        name: {{user.name}}<br>
-        username: {{user.username}}
-    </li>
-</ul>
\ No newline at end of file
+  <li
+    [ngStyle]="{ color: checkUpdated(user._id) }"
+    *ngFor="let user of users$ | async"
+  >
+    name: {{ user.name }}<br />
+    username: {{ user.username }}
+    <button (click)="deleteUser(user._id)">Delete</button>
+    <button (click)="updateUser(user._id)">
+      updateUser
+      <select name="select" id=""></select>
+    </button>
+  </li>
+</ul>
diff --git a/src/client/src/app/components/users-list/users-list.component.ts b/src/client/src/app/components/users-list/users-list.component.ts
index 09cb436..924c662 100644
--- a/src/client/src/app/components/users-list/users-list.component.ts
+++ b/src/client/src/app/components/users-list/users-list.component.ts
@@ -16,9 +16,20 @@ export class UsersListComponent implements OnInit {
 
   ngOnInit(): void {
   }
+  deleteUser(id: any) {
+    this.userService.deleteUser(id).subscribe();
+  }
+
 
   getUsers() {
     return this.userService.getUsers()
   }
+  updateUser(id:any) {
+  this.userService.updateUser(id)
+  }
+  checkUpdated(id: any) {
+    return this.userService.updatedUserId == id ? "red" : 'black';
+    
+  }
 
 }
diff --git a/src/client/src/app/services/api.service.ts b/src/client/src/app/services/api.service.ts
index 38b353b..4929542 100644
--- a/src/client/src/app/services/api.service.ts
+++ b/src/client/src/app/services/api.service.ts
@@ -6,6 +6,7 @@ import { Postable } from '../models/postable';
   providedIn: 'root'
 })
 export class ApiService {
+  
   baseUrl:string = 'http://localhost:3501/';
   constructor(private http: HttpClient) 
   { }
@@ -16,4 +17,10 @@ export class ApiService {
   post<T>(resourceName: string, data: Postable) {
     return this.http.post<T>(this.baseUrl + resourceName, data);
   }
+  delete<T>(resourceName: string, id: string) {
+    return this.http.delete<T>(this.baseUrl + resourceName + "/" + id);
+  }
+  put<T>(resourceName: string, data: Postable) {
+    return this.http.put<T>(this.baseUrl + resourceName, data);
+  }
 }
diff --git a/src/client/src/app/services/user.service.ts b/src/client/src/app/services/user.service.ts
index e80374c..ea80607 100644
--- a/src/client/src/app/services/user.service.ts
+++ b/src/client/src/app/services/user.service.ts
@@ -7,12 +7,21 @@ import { User } from '../../../../shared/models/user.model';
   providedIn: 'root',
 })
 export class UserService {
+  updatedUserId = '';
   constructor(private api: ApiService) {}
 
   getUsers() {
     return this.api.get<{ data: User[] }>('users').pipe(map(res => res.data));
   }
   postUsers(user: User) {
-    return this.api.post<User>('create-user', user);
+    return this.updatedUserId ?
+      this.api.put<User>('update-user/' + this.updatedUserId, user) :
+      this.api.post<User>('create-user', user);
+  }
+  deleteUser(id: string) {
+    return this.api.delete("delete-user", id);
+  }
+  updateUser(id: string,) {
+    this.updatedUserId = this.updatedUserId === id ? '' : id;
   }
 }
diff --git a/src/server/server.ts b/src/server/server.ts
index 2d06e7b..cd20568 100644
--- a/src/server/server.ts
+++ b/src/server/server.ts
@@ -74,7 +74,24 @@ app.post('/create-post', function(req,res){
         res.json({errors: err});
     })
 });
+app.delete('/delete-user/:id', function (req, res) {
+  const _id = req.params.id;
+  UserModel.findByIdAndDelete(_id).then(data => {
+    res.json({
+      data
+    })
+  })
+})
+app.put('/update-user/:id', function (req, res) {
+  const _id = req.params.id;
+  UserModel.findByIdAndUpdate(_id).then(data => {
 
+    $set: {username:req.body.username,  req.body.email}
+    res.json({
+      data
+    })
+  })
+})
 
 app.listen(PORT, function(){
     console.log( `starting at localhost http://localhost:${PORT}`);