diff --git a/src/app/content/hemat-app/monitoring/building/building.component.html b/src/app/content/hemat-app/monitoring/building/building.component.html
index 1c1ba8a..bec4695 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.html
+++ b/src/app/content/hemat-app/monitoring/building/building.component.html
@@ -112,6 +112,7 @@
                     class="btn btn-float btn-square btn-outline-secondary"
                     triggers="hover:click:hover"
                     ngbTooltip="Edit"
+                    (click)="editRow(data)"
                   >
                     <i class="feather ft-edit"></i>
                   </button>
@@ -120,6 +121,7 @@
                     class="gap_fl_btn btn btn-float btn-square btn-float-lg btn-outline-primary"
                     triggers="hover:click:hover"
                     ngbTooltip="Detail"
+                    (click)="viewRow(data)"
                   >
                     <i class="la la-building"></i>
                   </button>
diff --git a/src/app/content/hemat-app/monitoring/building/building.component.ts b/src/app/content/hemat-app/monitoring/building/building.component.ts
index 7832b72..63bcbad 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.ts
+++ b/src/app/content/hemat-app/monitoring/building/building.component.ts
@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 import { TableMonitoringService } from "../monitoring.service";
+import { Router } from "@angular/router";
 
 @Component({
   selector: "app-building",
@@ -16,7 +17,10 @@ export class BuildingComponent {
   searchTerm: string = "";
   colorChart: string = "";
 
-  constructor(private monitoringService: TableMonitoringService) {}
+  constructor(
+    private monitoringService: TableMonitoringService,
+    private router: Router
+  ) {}
 
   ngOnInit() {
     this.breadcrumb = {
@@ -78,4 +82,12 @@ export class BuildingComponent {
         value !== null && value.toString().toLowerCase().includes(searchTermLC)
     );
   }
+
+  viewRow(row) {
+    this.router.navigate(["/monitoring/view-new-building", row.build_name]);
+  }
+
+  editRow(row) {
+    this.router.navigate(["/monitoring/edit-new-building", row.build_name]);
+  }
 }
diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts
index 25a7017..35b9bb7 100644
--- a/src/app/content/hemat-app/monitoring/monitoring.module.ts
+++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts
@@ -62,6 +62,16 @@ import { DetailComponent } from './detail/detail.component';
         component: AddNewBuildingRoomComponent,
         data: { mode: 'build' }
       },
+      {
+        path: 'edit-new-building/:id',
+        component: AddNewBuildingRoomComponent,
+        data: { mode: 'build' }
+      },
+      {
+        path: 'view-new-building/:id',
+        component: DetailComponent,
+        data: { mode: 'build' }
+      },
     ])
   ]
 })