diff --git a/backend-server/src/index.ts b/backend-server/src/index.ts
index bc19c75..5687b66 100644
--- a/backend-server/src/index.ts
+++ b/backend-server/src/index.ts
@@ -81,12 +81,12 @@ app.get("/", (req,res)=>{
 })
 
 app.get("/api/backup", async (req,res)=>{
-    const allBackup = await BackupModel.find({ deleted: { $ne: true} }).sort({ projectName: 'asc' })
+    const allBackup = await BackupModel.find({}).sort({ projectName: 'asc' })
     res.send(allBackup)
 })
 
 app.get("/api/update", async (req,res)=>{
-    const allUpdate = await UpdateModel.find({}).sort({ Date: 'asc' })
+    const allUpdate = await UpdateModel.find({ deleted: { $ne: true} }).sort({ Date: 'asc' })
     res.status(200).send(allUpdate);
 })
 
@@ -114,13 +114,19 @@ app.post("/api/update/add", async (req,res)=>{
 app.post("/api/update/complete", async(req,res)=>{
      const id = req.body.id;
      const status = req.body.Status;
-    const update = await BackupModel.findOneAndUpdate({_id: id},{ Status: status })
+    const update = await UpdateModel.findOneAndUpdate({_id: id},{ Status: status })
     console.log(update)
     if (update) {
         res.send(update)
     }
 })
 
+app.post("/api/update/delete", async(req,res)=>{
+    const id = req.body.id; 
+    console.log(id)
+    const deleteTask = await UpdateModel.findOneAndUpdate({_id: id},{deleted: true}).then(()=>res.status(201).json({message: "Deleted Successfully"})).catch((err)=>res.status(500).send(err))
+})
+
 
 const PORT = 3000;
 app.listen(PORT,()=>{
diff --git a/src/app/components/pages/shift-update/shift-update.component.html b/src/app/components/pages/shift-update/shift-update.component.html
index c1e2fd2..6671335 100644
--- a/src/app/components/pages/shift-update/shift-update.component.html
+++ b/src/app/components/pages/shift-update/shift-update.component.html
@@ -2,6 +2,7 @@
     <page-title title="Shift Update"></page-title>
 <app-input-form [fields]="tableHeaderList" (formValues)="addUpdate($event)"
 (clicked)="onClick()"></app-input-form>
+<!-- <div class="" (click)="clickToAdd()">Click to add</div> -->
     <div class="table-container">
         <div class="table">
             <table>
@@ -19,7 +20,14 @@
                         <td>{{updateData.Reference | shorten:getRowNumber(i)}}</td>
                         <td>{{updateData.Handler}}</td>
                         <td>{{updateData.Status}}</td>
-                        <td class="actions"><button (click)="onComplete(updateData)" class="complete"><i class="bi bi-check-lg"></i></button><button (click)="onDelete()" class="delete"><i class="bi bi-x-lg"></i></button></td>
+                        <td class="actions">
+                            <button (click)="onComplete(updateData)" class="complete">
+                                <i class="bi bi-check-lg"></i>
+                            </button>
+                            <button (click)="onDelete(updateData)" class="delete">
+                                <i class="bi bi-x-lg"></i>
+                            </button>
+                        </td>
                     </tr>
                 </tbody>
             </table>
diff --git a/src/app/components/pages/shift-update/shift-update.component.ts b/src/app/components/pages/shift-update/shift-update.component.ts
index 42c1c6e..ee2600a 100644
--- a/src/app/components/pages/shift-update/shift-update.component.ts
+++ b/src/app/components/pages/shift-update/shift-update.component.ts
@@ -18,7 +18,7 @@ import { ShortenPipe } from '../../../shared/pipe/shorten.pipe';
 })
 export class ShiftUpdateComponent implements OnInit, OnDestroy {
   tableHeaderList = ['Date','Details','Remarks','Sales','Reference','Handler', 'Status']
-  updateDataList: Update[] = [];
+  updateDataList!: Update[];
   updateListSubscription!: Subscription;
 
 
@@ -27,7 +27,6 @@ export class ShiftUpdateComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
        this.updateListSubscription = this.updateService.allUpdate().subscribe((update)=>{
         this.updateDataList = update;
-        console.log(this.updateDataList.keys)
        });
   }
 
@@ -36,8 +35,12 @@ export class ShiftUpdateComponent implements OnInit, OnDestroy {
   }
 
   addUpdate(newUpdate:any){
-  this.updateService.addUpdate(newUpdate);
+  this.updateService.addUpdate(newUpdate).subscribe((res)=>{
+    console.log(res);
+    this.fetchUpdates()
+  })
   }
+
   onClick(){
     this.updateService.allUpdate().subscribe((update)=>{
       this.updateDataList = update;
@@ -58,7 +61,35 @@ onComplete(update: Update){
   this.updateService.updateStatus(update)
 }
 
-onDelete() {
-  //
+onDelete(data: any) {
+  console.log(data)
+  this.updateService.deleteUpdate(data).subscribe({
+    next: () => this.fetchUpdates(),
+    error: (err) => console.log(err)
+  })
+}
+
+// clickToAdd(){
+//   const test_update: Update = { 
+//     id: "",
+//     Date: '11-11-23',
+//     Details: 'Test-details',
+//     Remarks: 'Test-remarks',
+//     Sales_Concern: 'test-concernt',
+//     Reference: 'test-reference',
+//     Handler: 'test-handler',
+//     Status: 'test-status',
+//     deleted: false
+//   }
+//   this.updateService.addUpdate(test_update).subscribe((res)=>{
+//     console.log(res)
+//     this.fetchUpdates()
+//   })
+// }
+
+private fetchUpdates(): void {
+  this.updateService.allUpdate().subscribe((update) => {
+    this.updateDataList = update;
+  });
 }
 }
diff --git a/src/app/components/pages/shift-update/update.service.ts b/src/app/components/pages/shift-update/update.service.ts
index 6f8391e..a6b93f6 100644
--- a/src/app/components/pages/shift-update/update.service.ts
+++ b/src/app/components/pages/shift-update/update.service.ts
@@ -3,7 +3,7 @@ import { sample_update } from "./sample_update";
 import { Observable } from "rxjs";
 import { Update } from "../../../shared/model/update.model";
 import { HttpClient } from "@angular/common/http";
-import { UPDATE_ADD_URL, UPDATE_COMPLETE_URL, UPDATE_GET_URL } from "../../../shared/constants/backend";
+import { UPDATE_ADD_URL, UPDATE_COMPLETE_URL, UPDATE_DELETE_URL, UPDATE_GET_URL } from "../../../shared/constants/backend";
 
 @Injectable({
     providedIn: 'root'
@@ -19,15 +19,17 @@ export class UpdateService{
 
     addUpdate(newUpdate: Update) {
         newUpdate.deleted = false;
-        this.httpClient.post(UPDATE_ADD_URL,newUpdate).subscribe((log)=>{
-            console.log(log)
-        })
+        return this.httpClient.post(UPDATE_ADD_URL,newUpdate);
     }
 
     updateStatus(newUpdate: Update) {
-        this.httpClient.post(UPDATE_COMPLETE_URL,newUpdate).subscribe((res)=>{
-            console.log(res)
+        this.httpClient.post<Update>(UPDATE_COMPLETE_URL,newUpdate).subscribe((res)=>{
+            console.log(res);
         })
     }
+
+    deleteUpdate(deletedTask: Update) {
+        return this.httpClient.post<Update>(UPDATE_DELETE_URL,deletedTask)
+    }
 }
 
diff --git a/src/app/shared/components/input-form/input-form.component.scss b/src/app/shared/components/input-form/input-form.component.scss
index 5cded2f..6ee7132 100644
--- a/src/app/shared/components/input-form/input-form.component.scss
+++ b/src/app/shared/components/input-form/input-form.component.scss
@@ -6,6 +6,7 @@
 
 .form-container {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     margin-bottom: 2rem;
     .control {
@@ -19,6 +20,7 @@
             border: none;
             background-color: $bg-color;
             border-bottom: 1px solid $txt-color;
+            width: 20rem;
             &:focus{
                 outline: none;
             }
@@ -27,6 +29,7 @@
     }
     .btn{
         margin-left: 2rem;
+        margin-top: 2rem;
         button{
             background-color: $hover-color;
             height: 3rem;
@@ -54,7 +57,7 @@
 
 i {
     color:$title;
-    font-size: 5rem;
+    font-size: 3rem;
 }
 
 i:hover{
diff --git a/src/app/shared/components/input-form/input-form.component.ts b/src/app/shared/components/input-form/input-form.component.ts
index 7cee755..febe050 100644
--- a/src/app/shared/components/input-form/input-form.component.ts
+++ b/src/app/shared/components/input-form/input-form.component.ts
@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-input-form',
@@ -15,9 +16,13 @@ export class InputFormComponent {
   formData: {[key: string]: string} = {}
   @Input() isFormVisible: boolean = false;
   @Output() clicked: EventEmitter<void> = new EventEmitter<void>()
+  @Input() navPage!: string;
+
+  constructor(private router: Router){}
 
   onSubmit(formData: NgForm){
     this.formValues.emit(formData.value)
+    this.router.navigate(['/','update'])
   }
   toggleForm() {
     this.isFormVisible = !this.isFormVisible;
@@ -25,5 +30,8 @@ export class InputFormComponent {
 
   onClick(){
     this.clicked.emit()
+    this.isFormVisible = false;
   }
+
+  
 }
diff --git a/src/app/shared/constants/backend.ts b/src/app/shared/constants/backend.ts
index 033bf7b..f17e71f 100644
--- a/src/app/shared/constants/backend.ts
+++ b/src/app/shared/constants/backend.ts
@@ -3,4 +3,5 @@ const MAIN_URL = "http://localhost:3000/api"
 export const BACKUP_GET_URL = `${MAIN_URL}/backup`;
 export const UPDATE_GET_URL = `${MAIN_URL}/update`;
 export const UPDATE_ADD_URL = `${UPDATE_GET_URL}/add`;
-export const UPDATE_COMPLETE_URL = `${UPDATE_GET_URL}/complete`
\ No newline at end of file
+export const UPDATE_COMPLETE_URL = `${UPDATE_GET_URL}/complete`;
+export const UPDATE_DELETE_URL = `${UPDATE_GET_URL}/delete`;
\ No newline at end of file