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 b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,25 @@
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+
+  <title></title>
+</head>
+
+<body>
+
+  <header>
+  </header>
+
+  <main role="main" style="background-color: #F9F2E8;">
+  </main>
+  <br>
+
+  <footer class="bg-dark text-center text-white">
+
+  </footer>
+</body>
+
+</html>
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 b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-explore-result',
+  templateUrl: './explore-result.component.html',
+  styleUrls: ['./explore-result.component.css']
+})
+export class ExploreResultComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
Index: trip-planner-front/src/app/explore/explore.component.css
===================================================================
--- trip-planner-front/src/app/explore/explore.component.css	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/explore/explore.component.css	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,3 @@
+#button{
+    margin-left: 20px;
+}
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 b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,31 @@
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Explore</title>
+</head>
+
+<body>
+  <header>
+    <nav class="navbar navbar-expand-sm">
+      <strong class="navbar-brand">Trivia Trip</strong>
+      <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">
+        </li>
+      </ul>
+    </nav>
+  </header>
+</body>
+
+</html>
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 b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { City } from '../_models/city';
+import { CityService } from '../_services/city.service';
+
+
+@Component({
+  selector: 'app-explore',
+  templateUrl: './explore.component.html',
+  styleUrls: ['./explore.component.css']
+})
+export class ExploreComponent implements OnInit {
+
+  cities: City[];
+  filteredCountries: any[];
+  text: string;
+  loading = [false, false, false, false];
+
+  constructor(private cityService: CityService) {
+    this.cities = [];
+    this.filteredCountries = [];
+    this.text = '';
+  }
+
+  ngOnInit(): void {
+    this.cityService.getAllCities().subscribe(
+      cities => {
+        this.cities = cities;
+      }
+    );
+  }
+
+  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;
+  }
+
+  load(index) {
+    this.loading[index] = true;
+    setTimeout(() => this.loading[index] = false, 1000);
+  }
+}
