diff --git a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html
index 3a23017..f8b54f7 100644
--- a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html
+++ b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html
@@ -181,70 +181,17 @@
         </div>
 
         <div class="row">
-          <div class="col-lg-3 col-md-6 col-12">
+          <div class="col-lg-3 col-md-6 col-12" *ngFor="let item of cameras">
             <div class="card" style="background-color: #252525 !important">
               <div class="card-content">
-                <label style="color: #ffffff;">Pengadilan Agama Padang Cam 1</label>
+                <label style="color: #ffffff">{{ item.name }}</label>
                 <img
                   class="card-img-top img-fluid"
                   src="../../../../../assets/images/cctv.jpg"
                   alt="Image 1"
-                  (click)="
-                    onClick(
-                      'https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=034163533934088379392939'
-                    )
-                  "
-                />
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-md-6 col-12">
-            <div class="card" style="background-color: #252525 !important">
-              <div class="card-content">
-                <label style="color: #ffffff;">Pengadilan Agama Padang Cam 2</label>
-                <img
-                  class="card-img-top img-fluid"
-                  src="../../../../../assets/images/cctv.jpg"
-                  alt="Image 2"
-                  (click)="
-                    onClick(
-                      'https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=671014455048381705129283'
-                    )
-                  "
-                />
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-md-6 col-12">
-            <div class="card" style="background-color: #252525 !important">
-              <div class="card-content">
-                <label style="color: #ffffff;">Pengadilan Agama Purwakarta Cam 1</label>
-                <img
-                  class="card-img-top img-fluid"
-                  src="../../../../../assets/images/cctv.jpg"
-                  alt="Image 2"
-                  (click)="
-                    onClick(
-                      'https://bdg2.cctvbadilag.my.id:5443/400854PAPURWAKARTA/play.html?name=194533247298993755522217'
-                    )
-                  "
-                />
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-md-6 col-12">
-            <div class="card" style="background-color: #252525 !important">
-              <div class="card-content">
-                <label style="color: #ffffff;">Pengadilan Agama Purwakarta Cam 2</label>
-                <img
-                  class="card-img-top img-fluid"
-                  src="../../../../../assets/images/cctv.jpg"
-                  alt="Image 2"
-                  (click)="
-                    onClick(
-                      'https://bdg2.cctvbadilag.my.id:5443/400854PAPURWAKARTA/play.html?name=113658520181242556385273'
-                    )
-                  "
+                  (click)="onClick(item.videoUrl)"
+                  (mouseenter)="onMouseEnter(item)"
+                  (mouseleave)="onMouseLeave()"
                 />
               </div>
             </div>
diff --git a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts
index 02bf86c..435307e 100644
--- a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts
+++ b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts
@@ -11,7 +11,7 @@ import videojs from "video.js";
 })
 export class SurveillanceComponent {
   @ViewChild('videoIframe', { static: false }) videoIframe: ElementRef;
-
+  
   filteredRows: any[];
   searchTerm: string = "";
   buildingSelected: any;
@@ -23,8 +23,30 @@ export class SurveillanceComponent {
   storedData: any;
   spinnerFilterActive = false;
   switchState: boolean;
-
   public breadcrumb: any;
+showIframe = false;
+  cameras = [
+    {
+      id: 1,
+      name: 'Pengadilan Agama Padang Cam 1',
+      videoUrl: 'https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=034163533934088379392939'
+    },
+    {
+      id: 2,
+      name: 'Pengadilan Agama Padang Cam 2',
+      videoUrl: 'https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=671014455048381705129283'
+    },
+    {
+      id: 3,
+      name: 'Pengadilan Agama Purwakarta Cam 1',
+      videoUrl: 'https://bdg2.cctvbadilag.my.id:5443/400854PAPURWAKARTA/play.html?name=194533247298993755522217'
+    },
+    {
+      id: 4,
+      name: 'Pengadilan Agama Purwakarta Cam 2',
+      videoUrl: 'https://bdg2.cctvbadilag.my.id:5443/400854PAPURWAKARTA/play.html?name=113658520181242556385273'
+    }
+  ];
 
   constructor(
     private router: Router,
@@ -34,15 +56,15 @@ export class SurveillanceComponent {
 
   ngOnInit() {
     this.breadcrumb = {
-      mainlabel: "Device",
+      mainlabel: "Surveillance",
       links: [
         {
           name: "Home",
           isLink: false,
-          link: "/dashboard/sales",
+          link: "",
         },
         {
-          name: "Device",
+          name: "Surveillance",
           isLink: false,
         },
       ],
@@ -110,4 +132,21 @@ export class SurveillanceComponent {
     const iframe = this.videoIframe.nativeElement;
     iframe.src = videoUrl;
   }
+
+  
+
+  onMouseEnter(camera: any) {
+    console.log('enter');
+    const iframe = this.videoIframe.nativeElement;
+    iframe.src = camera.videoUrl;
+  
+    this.showIframe = true;
+  }
+
+  onMouseLeave() {
+    console.log('leave');
+    const iframe = this.videoIframe.nativeElement;
+    iframe.src = '';
+    this.showIframe = false;
+  }
 }