diff --git a/src/app/component/detail/detail.component.html b/src/app/component/detail/detail.component.html
index 564ccaa..d0cefde 100644
--- a/src/app/component/detail/detail.component.html
+++ b/src/app/component/detail/detail.component.html
@@ -1,18 +1,19 @@
 <div class="absolute top-0 h-screen w-screen">
   <div id="map" class="absolute h-screen w-screen">
-    <iframe *ngIf="distance"
+    <iframe *ngIf="embed"
             class=" w-full h-full shadow-2xl pointer-events-auto"
             height="300" frameborder=""
             style=""
             referrerpolicy="no-referrer-when-downgrade"
             [src]='embed | safe' allowfullscreen></iframe>
+    <img *ngIf="!embed" [src]="waypointInfo?.img ? waypointInfo.img : '/assets/testDetail/img.png'" alt="" class="my-auto w-screen opacity-5">
   </div>
-    <div class="card bg-white sm:w-fit md:w-3/4 lg:w-1/4  m-4 p-4 z-10 absolute bottom-0 bg-gray-100 bg-opacity-65 backdrop-filter backdrop-blur-lg border-2 border-gray-300 shadow-4xl rounded-sm overflow-y-auto pointer-events-auto">
+    <div *ngIf="embed && !this.myModal.checked" class="card bg-white sm:w-fit md:w-3/4 lg:w-1/4  m-4 p-2 z-10 absolute bottom-0 bg-gray-100 bg-opacity-65 backdrop-filter backdrop-blur-lg border-2 border-gray-300 shadow-4xl rounded-sm overflow-y-auto pointer-events-auto">
       <figure><img [src]="waypointInfo?.img ? waypointInfo.img : '/assets/testDetail/img.png'"
                    [alt]="waypointInfo?.locationName ? waypointInfo.locationName : ''"/></figure>
       <div class="card-body">
         <div class="flex justify-between items-center">
-          <h1 class="card-title font-extrabold">{{ waypointInfo?.locationName ? waypointInfo.locationName : 'Error 404' }}</h1>
+          <h1 class="card-title font-extrabold">{{ waypointInfo?.name ? waypointInfo.name : 'Error 404' }}</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">
@@ -55,7 +56,7 @@
   <div class="modal modal-bottom sm:modal-middle" *ngIf="img">
     <div class="modal-box">
       <h3 class="font-bold text-lg">Congratulations you have
-        discovred {{ waypointInfo?.locationName ? waypointInfo.locationName : '' }}!</h3>
+        discovred {{ waypointInfo?.name ? waypointInfo.name : '' }}!</h3>
       <img class="xl:max-w-md max-h-screen py-4 m-auto" [src]="img" *ngIf="img">
       <div class="modal-action">
         <button for="my-modal-6" class="btn bg-white hover:bg-blue-400" (click)="downloadImage()">
diff --git a/src/app/component/detail/detail.component.ts b/src/app/component/detail/detail.component.ts
index a72c46b..941bb41 100755
--- a/src/app/component/detail/detail.component.ts
+++ b/src/app/component/detail/detail.component.ts
@@ -11,12 +11,15 @@ import {ReadTranslateJsonService} from "../../service/language/readTranslateJson
 import {CookieService} from "ngx-cookie-service";
 import {UserService} from "../../service/http/user.service";
 import {UserEntity} from "../../interface/UserEntity";
+import { trigger, state, transition, animate } from '@angular/animations';
+
 
 @Component({
   selector: 'app-detail',
   templateUrl: './detail.component.html',
   styleUrls: ['./detail.component.css']
 })
+
 export class DetailComponent implements OnInit {
   @ViewChild('myModal', {static: true}) myModal!: ElementRef<HTMLInputElement>;
   private location: string | undefined;
@@ -39,6 +42,8 @@ export class DetailComponent implements OnInit {
 
   iframeLoded: boolean = false;
 
+  intervalID: any;
+
   constructor(private route: ActivatedRoute, private positionService: positionService, private waypointService: WaypointService, private waypointVisitedService: WaypointVisitedService, private readTranslationJsonService: ReadTranslateJsonService,
   private userService: UserService, private cookieService: CookieService, private router: Router) {
 
@@ -82,7 +87,7 @@ export class DetailComponent implements OnInit {
 
   async checkDistanceTimer() {
     //set interval
-    let intervalID = setInterval(() => {
+     this.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.waypointInfo?.lat},${this.waypointInfo?.lon}`;
       this.myModal.nativeElement.checked = false;
@@ -143,23 +148,51 @@ export class DetailComponent implements OnInit {
           canvas.height = image.height;
 
           ctx.drawImage(image, 0, 0);
-          const svgImage = new Image();
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
-          svgImage.crossOrigin = 'anonymous';
-          svgImage.src = svgUrl;
+          let isAllWhite = true;
+          for (let i = 0; i < imageData.data.length; i += 4) {
+            if (imageData.data[i] !== 255 || imageData.data[i + 1] !== 255 || imageData.data[i + 2] !== 255) {
+              isAllWhite = false;
+              break;
+            }
+          }
 
-          svgImage.onload = () => {
-            const x = image.width - (image.width * 0.2 + 5);
-            const y = image.height - (image.width * 0.2 + 5);
-            ctx.drawImage(svgImage, x, y, image.width * 0.2, image.width * 0.2);
+          if (isAllWhite) {
+            const svgImage = new Image();
+            svgImage.crossOrigin = 'anonymous';
+            svgImage.src = svgUrl;
 
-            const outputImageUrl = canvas.toDataURL('image/png');
-            resolve(outputImageUrl);
-          };
+            svgImage.onload = () => {
+              canvas.width = svgImage.width;
+              canvas.height = svgImage.height;
 
-          svgImage.onerror = () => {
-            reject('Error loading SVG');
-          };
+              ctx.drawImage(svgImage, 0, 0);
+              const outputImageUrl = canvas.toDataURL('image/png');
+              resolve(outputImageUrl);
+            };
+
+            svgImage.onerror = () => {
+              reject('Error loading SVG');
+            };
+          } else {
+            const svgImage = new Image();
+            svgImage.crossOrigin = 'anonymous';
+            svgImage.src = svgUrl;
+
+            svgImage.onload = () => {
+              const x = image.width - (image.width * 0.2 + 5);
+              const y = image.height - (image.width * 0.2 + 5);
+              ctx.drawImage(svgImage, x, y, image.width * 0.2, image.width * 0.2);
+
+              const outputImageUrl = canvas.toDataURL('image/png');
+              resolve(outputImageUrl);
+            };
+
+            svgImage.onerror = () => {
+              reject('Error loading SVG');
+            };
+          }
         };
 
         image.onerror = () => {
@@ -175,6 +208,8 @@ export class DetailComponent implements OnInit {
 
 
 
+
+
   async generateQR() {
     console.log("generating QR code");
     //console.log(this.URLParams.value);
@@ -203,8 +238,10 @@ export class DetailComponent implements OnInit {
   }
 
   public closeModal(): void {
+    clearInterval(this.intervalID);
     this.myModal.nativeElement.checked = false;
     this.router.navigate(['/location/', this.URLParams.location]);
   }
 
+
 }