Index: trip-planner-front/src/app/_services/location.service.ts
===================================================================
--- trip-planner-front/src/app/_services/location.service.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/_services/location.service.ts	(revision 76712b2bf7daeb245c9ca388ce322e0b98098d99)
@@ -61,3 +61,7 @@
     }
     
+    getAllLocationsSearch(place : string) : Observable<Location[]>{
+        let url="http://localhost:8080/api/all"; 
+        return this.httpClient.get<Location[]>(url + "?place=" + place);
+    }
 }
Index: trip-planner-front/src/app/_services/region.service.ts
===================================================================
--- trip-planner-front/src/app/_services/region.service.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/_services/region.service.ts	(revision 76712b2bf7daeb245c9ca388ce322e0b98098d99)
@@ -15,3 +15,8 @@
         return this.httpClient.get<Region[]>(url);
     }
+
+    getAllCitiesAndRegions() :Observable<string[]>{
+        let url = "http://localhost:8080/api/places";
+        return this.httpClient.get<string[]>(url);
+    }
 }
Index: trip-planner-front/src/app/app-routing.module.ts
===================================================================
--- trip-planner-front/src/app/app-routing.module.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/app-routing.module.ts	(revision 76712b2bf7daeb245c9ca388ce322e0b98098d99)
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ExploreResultComponent } from './explore/explore-result/explore-result.component';
 import { ExploreComponent } from './explore/explore.component';
 import { HomepageComponent } from './homepage/homepage.component';
@@ -18,5 +19,6 @@
   {path: '', component:LoginComponent},
   {path: 'location', component: LocationDetailsComponent},
-  {path: 'explore', component: ExploreComponent}
+  {path: 'explore', component: ExploreComponent},
+  {path: 'results', component: ExploreResultComponent}
 ];
 
Index: trip-planner-front/src/app/explore/explore-result/explore-result.component.css
===================================================================
--- trip-planner-front/src/app/explore/explore-result/explore-result.component.css	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/explore/explore-result/explore-result.component.css	(revision 76712b2bf7daeb245c9ca388ce322e0b98098d99)
@@ -0,0 +1,3 @@
+.container {
+    background-color: #F9F2E8;
+}
Index: trip-planner-front/src/app/explore/explore-result/explore-result.component.html
===================================================================
--- trip-planner-front/src/app/explore/explore-result/explore-result.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/explore/explore-result/explore-result.component.html	(revision 76712b2bf7daeb245c9ca388ce322e0b98098d99)
@@ -14,5 +14,20 @@
   </header>
 
-  <main role="main" style="background-color: #F9F2E8;">
+  <main role="main">
+    <h1 style="color: #F77D62; display: inline; ">Explore </h1>
+    <h1 style=" display: inline;">{{place}}</h1>
+    <div class="lightbox" *ngFor="let l of allLocation">
+      <div class="row">
+        <div class="col-lg-6">
+          <img src="data:image/png;base64,{{l.photo}}"
+          class="w-100 mb-2 mb-md-4 shadow-1-strong rounded"/>
+      </div>
+      </div>
+    </div>
+    <div class="container">
+      <li *ngFor="let location of allLocation">
+        <ol>{{location.name}}</ol>
+      </li>
+    </div>
   </main>
   <br>
Index: trip-planner-front/src/app/explore/explore-result/explore-result.component.ts
===================================================================
--- trip-planner-front/src/app/explore/explore-result/explore-result.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/explore/explore-result/explore-result.component.ts	(revision 76712b2bf7daeb245c9ca388ce322e0b98098d99)
@@ -1,3 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { LocationService } from 'src/app/_services/location.service';
 
 @Component({
@@ -8,7 +10,23 @@
 export class ExploreResultComponent implements OnInit {
 
-  constructor() { }
+  place: string;
+  allLocation: any[] = [];
+
+  constructor(private route: ActivatedRoute, private locationService : LocationService) {
+    this.place = '';
+  }
 
   ngOnInit(): void {
+    this.route.queryParams
+      .subscribe(params => {
+        this.place = params.place;
+      }
+    );
+
+      this.locationService.getAllLocationsSearch(this.place).subscribe(
+        data => {
+          this.allLocation = data;
+        }
+    )
   }
 
Index: trip-planner-front/src/app/explore/explore.component.html
===================================================================
--- trip-planner-front/src/app/explore/explore.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/explore/explore.component.html	(revision 76712b2bf7daeb245c9ca388ce322e0b98098d99)
@@ -14,17 +14,24 @@
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
-          <p-autoComplete [(ngModel)]="text" [suggestions]="filteredCountries" (completeMethod)="search($event)"
-            field="name" [minLength]="1">
-            <mat-option *ngFor="let cityName of cities" 
-            [value]="cityName.name">
-                {{cityName.name}}
-            </mat-option></p-autoComplete>
-          <p-button label="Search" icon="pi pi-search" [loading]="loading[0]" (click)="load(0)" id="button"></p-button>
-        </li>
-        <li class="nav-item">
+
+          <form class="example-form">
+            <mat-form-field class="example-full-width" appearance="fill">
+              <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto"
+                [(ngModel)]="selectedPlace">
+              <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
+                <mat-option *ngFor="let option of filteredOptions | async" [value]="option"
+                  (click)="onPlaceSelected(selectedPlace)">
+                  {{option}}
+                </mat-option>
+              </mat-autocomplete>
+            </mat-form-field>
+            <p-button label="Search" icon="pi pi-search" [loading]="loading[0]" (click)="load(0)" id="button">
+            </p-button>
+          </form>
         </li>
       </ul>
     </nav>
   </header>
+
 </body>
 
Index: trip-planner-front/src/app/explore/explore.component.ts
===================================================================
--- trip-planner-front/src/app/explore/explore.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/explore/explore.component.ts	(revision 76712b2bf7daeb245c9ca388ce322e0b98098d99)
@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { City } from '../_models/city';
-import { CityService } from '../_services/city.service';
+import { FormControl } from '@angular/forms';
+import { Router } from '@angular/router';
+import { Observable, Subscription } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { LocationService } from '../_services/location.service';
+import { RegionService } from '../_services/region.service';
 
 
@@ -11,33 +15,40 @@
 export class ExploreComponent implements OnInit {
 
-  cities: City[];
-  filteredCountries: any[];
   text: string;
   loading = [false, false, false, false];
+  regions: string[] = [];
+  filteredOptions: Observable<any[]> = new Observable<any[]>();
+  myControl = new FormControl();
+  cityName: string = '';
+  selectedPlace: string = '';
+  thirdSubscription: Subscription = new Subscription;
 
-  constructor(private cityService: CityService) {
-    this.cities = [];
-    this.filteredCountries = [];
+  constructor(private locationService: LocationService,
+    private regionService: RegionService, private router: Router) {
     this.text = '';
   }
 
   ngOnInit(): void {
-    this.cityService.getAllCities().subscribe(
-      cities => {
-        this.cities = cities;
+
+    this.regionService.getAllCitiesAndRegions().subscribe(
+      data => {
+        this.regions = data;
       }
+    );
+
+    this.filteredOptions = this.myControl.valueChanges.pipe(
+      startWith(''),
+      map(value => (typeof value === 'string' ? value : value.name)),
+      map(name => (name ? this._filter(name) : this.regions.slice())),
     );
   }
 
-  search(event) {
-    let filtered: any[] = [];
-    let query = event.query;
-    for (let i = 0; i < this.cities.length; i++) {
-      let city = this.cities[i];
-      if (city.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
-        filtered.push(city);
-      }
-    }
-    this.filteredCountries = filtered;
+  displayFn(city: string): string {
+    return city && city ? city : '';
+  }
+
+  private _filter(name: string): any[] {
+    const filterValue = name.toLowerCase();
+    return this.regions.filter(option => option.toLowerCase().includes(filterValue));
   }
 
@@ -45,4 +56,13 @@
     this.loading[index] = true;
     setTimeout(() => this.loading[index] = false, 1000);
+    this.locationService.getAllLocationsSearch(this.selectedPlace).subscribe(
+      data => {
+        this.router.navigate(['results'], { queryParams: { place: this.selectedPlace } });
+      }
+    );
+  }
+
+  onPlaceSelected(selectedPlace) {
+    console.log(this.selectedPlace); // get from view 
   }
 }
Index: trip-planner-front/src/app/locations-form/locations-form.component.html
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/locations-form/locations-form.component.html	(revision 76712b2bf7daeb245c9ca388ce322e0b98098d99)
@@ -3,70 +3,67 @@
 
 
-    <div class="example-form">
+<div class="example-form">
 
-      <div class="form-group">
-        <button class="btn" (click)="chooseCityOption()">
-          City
-        </button>
-        <button class="btn" (click)="chooseRegionOption()">
-          Region
-        </button>
-      </div>
-      <br>
-      <br>
-  
-      <div *ngIf="cityOption">
-        <label>
-          <h5>Please select a city</h5>
-        </label>
-        <mat-form-field appearance="fill" class="example-full-width">
-          <mat-label>Please select a city</mat-label>
-          <mat-select [(ngModel)]="cityId" placeholder="Select city" name="city" >
-            <mat-option [value]="city.id" *ngFor="let city of cities" > {{city.name}}</mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-  
-      <div *ngIf="regionOption">
-        <label>
-          <h5>Please select a region</h5>
-        </label>
-        <mat-form-field appearance="fill" class="example-full-width">
-          <mat-label>Please select a region</mat-label>
-          <mat-select [(ngModel)]="regionId" placeholder="Select region" name="region">
-            <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-  
-      <h5>Who are you travelling with? </h5>
-      <mat-form-field appearance="fill" class="example-full-width">
-        <mat-label>Please select a companion</mat-label>
-        <mat-select [(ngModel)]="companionId" placeholder="Please select a companion" name="company">
-          <mat-option [value]="companion.id" *ngFor="let companion of companions">{{companion.type}}</mat-option>
-        </mat-select>
-      </mat-form-field>
-  
-      <h5>How many days are you willing to stay ?</h5>
-      <mat-form-field class="example-full-width" appearance="fill">
-        <mat-label>Please select a number of days</mat-label>
-        <input matInput placeholder="No. Days" type="number" min="1" value="0" max="30" [constraintMaxNumberDays()]
-          [(ngModel)]="lengthOfStay" name="nomdays" [value] = "lengthOfStay">
-      </mat-form-field>
-  
-      <h5>What are your priorities to visit?</h5>
-      <mat-chip-list selectable multiple>
-        <mat-chip #c="matChip" selected *ngFor="let category of categories" (click)="toggleSelection(c, category)"
-          [ngClass]="{'yellow' : toggle}" name="chips">
-          <mat-icon *ngIf="!c.selected">check</mat-icon>
-          {{category.name}}
-        </mat-chip>
-      </mat-chip-list>
-      <br>
-      <button mat-raised-button color="primary" (click)="createMyPlanner()">Create my planner</button>
-  
-    </div>
+  <div class="form-group">
+    <button class="btn" (click)="chooseCityOption()">
+      City
+    </button>
+    <button class="btn" (click)="chooseRegionOption()">
+      Region
+    </button>
+  </div>
+  <br>
+  <br>
 
+  <div *ngIf="cityOption">
+    <label>
+      <h5>Please select a city</h5>
+    </label>
+    <mat-form-field appearance="fill" class="example-full-width">
+      <mat-label>Please select a city</mat-label>
+      <mat-select [(ngModel)]="cityId" placeholder="Select city" name="city">
+        <mat-option [value]="city.id" *ngFor="let city of cities"> {{city.name}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
 
-  
+  <div *ngIf="regionOption">
+    <label>
+      <h5>Please select a region</h5>
+    </label>
+    <mat-form-field appearance="fill" class="example-full-width">
+      <mat-label>Please select a region</mat-label>
+      <mat-select [(ngModel)]="regionId" placeholder="Select region" name="region">
+        <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <h5>Who are you travelling with? </h5>
+  <mat-form-field appearance="fill" class="example-full-width">
+    <mat-label>Please select a companion</mat-label>
+    <mat-select [(ngModel)]="companionId" placeholder="Please select a companion" name="company">
+      <mat-option [value]="companion.id" *ngFor="let companion of companions">{{companion.type}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <h5>How many days are you willing to stay ?</h5>
+  <mat-form-field class="example-full-width" appearance="fill">
+    <mat-label>Please select a number of days</mat-label>
+    <input matInput placeholder="No. Days" type="number" min="1" value="0" max="30" [constraintMaxNumberDays()]
+      [(ngModel)]="lengthOfStay" name="nomdays" [value]="lengthOfStay">
+  </mat-form-field>
+
+  <h5>What are your priorities to visit?</h5>
+  <mat-chip-list selectable multiple>
+    <mat-chip #c="matChip" selected *ngFor="let category of categories" (click)="toggleSelection(c, category)"
+      [ngClass]="{'yellow' : toggle}" name="chips">
+      <mat-icon *ngIf="!c.selected">check</mat-icon>
+      {{category.name}}
+    </mat-chip>
+  </mat-chip-list>
+  <br>
+  <button mat-raised-button color="primary" (click)="createMyPlanner()">Create my planner</button>
+
+</div>
