diff --git a/src/app/component/detail/detail.component.html b/src/app/component/detail/detail.component.html
index 8e66e4d..f6c0e69 100644
--- a/src/app/component/detail/detail.component.html
+++ b/src/app/component/detail/detail.component.html
@@ -1,10 +1,10 @@
 <div>
   <div class="flex flex-col md:flex-row  gap-0 m-5 h-full">
     <div class="card w-full h-full bg-base-100 shadow-2xl">
-      <figure><img src="assets/testDetail/igm.png" [alt]="test.name"/></figure>
+      <figure><img [src]="waypointInfo.img" [alt]="waypointInfo?.locationName"/></figure>
       <div class="card-body">
         <div class="flex justify-between items-center">
-          <h1 class="card-title font-extrabold">{{ test.name }}</h1>
+          <h1 class="card-title font-extrabold">{{ waypointInfo?.locationName }}</h1>
           <div class="font-extrabold text-end text-blue-500 flex items-center">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="19.9219" height="19.9316" *ngIf="!distance" class="mx-1">
@@ -23,11 +23,11 @@
             {{distance === undefined ? '' : distance}} Km
           </div>
         </div>
-        <p>{{ test.description }}</p>
+        <p>{{ waypointInfo.description }}</p>
       </div>
     </div>
     <div class="md:relative w-full flex items-center justify-center md:justify-start">
-      <iframe *ngIf="distance" class="md:absolute sm:w-full md:h-3/4 md:w-3/4 rounded-b-lg md:rounded-r-lg shadow-2xl border-2 items-center" height="300" frameborder=""
+      <iframe *ngIf="distance" class="md:absolute sm:w-full md:h-3/4 md:w-full md:rounded-r-2xl shadow-2xl border-2 items-center" height="300" frameborder=""
               style=""
               referrerpolicy="no-referrer-when-downgrade"
               [src]='embed | safe' allowfullscreen></iframe>
diff --git a/src/app/component/detail/detail.component.ts b/src/app/component/detail/detail.component.ts
index ee8d078..c0da104 100755
--- a/src/app/component/detail/detail.component.ts
+++ b/src/app/component/detail/detail.component.ts
@@ -23,6 +23,8 @@ export class DetailComponent implements OnInit {
     description: "Lorem ipsum"
   }
 
+  waypointInfo: any;
+
   embed: any;
 
   cord: any;
@@ -48,6 +50,8 @@ export class DetailComponent implements OnInit {
 
     this.waypointService.getWaypoint(this.URLParams.location, this.URLParams.id).subscribe(waypoint => {
       console.log("waypoint", waypoint)
+      this.waypointInfo = waypoint;
+      console.log("waypointInfo", this.waypointInfo.locationName)
     });
 
     //this.URLParams = this.route.snapshot.url.slice(-2).map(segment => segment.path);
@@ -61,7 +65,7 @@ export class DetailComponent implements OnInit {
     //set interval
     let intervalID = setInterval(() => {
       this.cord = this.positionService.getLocationWithoutPromise();
-      this.embed = `https://www.google.com/maps/embed/v1/directions?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&origin=${this.cord.lat},${this.cord.lon}&destination=${this.test.lat},${this.test.lng}`;
+      this.embed = `https://www.google.com/maps/embed/v1/directions?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&origin=${this.cord.lat},${this.cord.lon}&destination=${this.waypointInfo.lat},${this.waypointInfo.lon}`;
       this.myModal.nativeElement.checked = false;
       if (this.cord?.lat && this.cord?.lon) {
         this.distance = this.positionService.getDistanceBetweenCoordinates(this.cord?.lat, this.cord?.lon, this.test.lat, this.test.lng);
@@ -158,40 +162,9 @@ export class DetailComponent implements OnInit {
 
   public downloadImage(): void {
     const link = document.createElement('a');
-    link.download = this.test.name;
+    link.download = this.waypointInfo.locationName;
     link.href = this.img;
     link.click();
   }
 
-
-  /*async addQRCodeToImage(url: string, imagePath: string, outputPath: string): Promise<void> {
-    // Generate QR code
-    const qrCode = await qrcode.toBuffer(url);
-
-    // Load input image using Sharp
-    const image = sharp(imagePath);
-
-    // Get input image dimensions
-    const { width, height } = await image.metadata();
-
-    // Resize QR code to 25% of input image height
-    const qrCodeHeight = Math.round(height * 0.25);
-    const qrCodeBuffer = await sharp(qrCode)
-      .resize(qrCodeHeight, qrCodeHeight)
-      .toBuffer();
-
-    // Composite QR code onto input image at bottom-right corner
-    await image.composite([
-      {
-        input: qrCodeBuffer,
-        gravity: 'southeast',
-        top: height - qrCodeHeight,
-        left: width - qrCodeHeight,
-      },
-    ]);
-
-    // Save output image to file
-    await image.toFile(outputPath);
-  }*/
-
 }