diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
index 618f23e..ecdbbe3 100644
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
@@ -28,6 +28,14 @@ input {
 
 }
 
+.inputElements{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  gap: 20px;
+}
+
 .bg-image {
   background-image: url('src/assets/img/mountains.png');
   background-size: cover;
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 05f3d1d..ad6a405 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,13 +1,35 @@
 <div [ngClass]="{'background-color': backgroundColor}">
-  <div class="canvas nuvola">
-    <canvas #myCanvas width="100vw" class="canvas"></canvas>
+
+  <div class="alert alert-warning shadow-lg" *ngIf="allert">
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+      <span>Enter a location!!</span>
+    </div>
   </div>
+
+
+  <!-- <div class="canvas nuvola">
+    <canvas #myCanvas width="100vw" class="canvas"></canvas>
+  </div> -->
   <div class="bg-image">
     <div class="search">
-      <input #myInput type="text" [(ngModel)]="luogoSelezionato" (keyup)="cercaLuogo(myInput.value)"
-             (keydown)="selezionaSuggerimento($event)" placeholder="Type here"
-             class="input input-bordered input-primary w-full max-w-xs">
 
+      <div class="inputElements">
+        <input #myInput type="text" [(ngModel)]="luogoSelezionato" (keyup)="cercaLuogo(myInput.value)"
+               (keydown)="selezionaSuggerimento($event)" placeholder="Type here"
+               class="input input-bordered input-primary w-full max-w-xs">
+
+        <button
+          class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
+          (click)="onSearch()">
+          Search
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              d="M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"></path>
+          </svg>
+        </button>
+
+      </div>
       <ng-container *ngIf="locationsPopup | async as locations;">
         <ul *ngIf="locations.length > 0" class="menu bg-base-200 !w-fit p-2 rounded-box" id="list">
 
@@ -15,7 +37,7 @@
             <span>Places</span>
           </li>
 
-          <li *ngFor="let luogo of locations" (click)="luogoSelezionato=luogo.location; cercaLuogo(luogo.location)" >
+          <li *ngFor="let luogo of locations" (click)="luogoSelezionato=luogo.location; cercaLuogo(luogo.location)">
             {{luogo.location}}
           </li>
 
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index b1ab091..c8d3e5a 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -3,6 +3,7 @@ import {distinctUntilChanged, fromEvent, Observable, Subject, Subscription} from
 import {ReadjsonService} from "../service/readjson.service";
 import {Locations} from "../interface/data";
 import * as QRCode from 'qrcode';
+import {Router} from "@angular/router";
 
 interface Luogo {
   location: string;
@@ -21,13 +22,11 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
 
   public locationsPopup: Subject<Locations[]> = new Subject<Locations[]>()
 
-  subs: Subscription[] = []
-
-
+  subs: Subscription[] = [];
   backgroundColor: string | undefined;
   qrCodeImage: string | undefined;
   locations: Locations[] = [];
-
+  allert: boolean = false;
   locationsFiltrati: Locations[] = [];
   luogoSelezionato: string = '';
   suggerimentoAttivo: boolean = false;
@@ -40,7 +39,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   img: any;
 
 
-  constructor(private readjsonService: ReadjsonService) {
+  constructor(private readjsonService: ReadjsonService, private router: Router) {
   }
 
   ngOnInit(): void {
@@ -50,8 +49,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
         console.log(data[i])
       }
     });
-
-
+    this.allert = false;
     console.log("home init");
     this.subs.push(this.readjsonService.getLocation("Lugano").subscribe(val => console.log(val)))
     const text = 'https://aramisgrata.ch'; // sostituisci con la tua stringa
@@ -172,9 +170,24 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     return null;
   }
 
+  onSearch(): void {
+    if (this.luogoSelezionato === '') {
+      this.allert=true;
+      setTimeout(() => {
+        this.allert=false;
+      }, 8000);
+      return;
+    }else{
+      const nomeLocation = encodeURIComponent(this.luogoSelezionato);
+      this.router.navigate(['/location', nomeLocation]);
+    }
+  }
+
   protected readonly Event = Event;
 }
 
+
+
 function stringDifference(str1: string, str2: string): string {
   let diff = '';
   for (let i = 0; i < str2.length; i++) {
diff --git a/src/app/list/list.component.html b/src/app/list/list.component.html
index 084bacd..c2dfc07 100644
--- a/src/app/list/list.component.html
+++ b/src/app/list/list.component.html
@@ -10,8 +10,7 @@
     <h3>
       {{waypoinst.name}}
     </h3>
-
-
+    <h4>Distance: }</h4>
   </div>
 
 </div>