Index: trip-planner-front/src/app/locations-form/locations-form.component.css
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.css	(revision fa375fed9635035b3c62cf759f42938afa14271b)
+++ trip-planner-front/src/app/locations-form/locations-form.component.css	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -0,0 +1,19 @@
+.example-form {
+  min-width: 150px;
+  max-width: 380px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}
+
+mat-icon {
+  height: 20px;
+  width: 20px;
+  font-size: 20px;
+  margin-right: 5px;
+}
+button{
+  float: right;
+}
Index: trip-planner-front/src/app/locations-form/locations-form.component.html
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.html	(revision fa375fed9635035b3c62cf759f42938afa14271b)
+++ trip-planner-front/src/app/locations-form/locations-form.component.html	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -0,0 +1,43 @@
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+
+<form class="example-form">
+  <label><h5>Please select a place</h5></label>
+  <mat-form-field class="example-full-width" appearance="fill">
+    <mat-label>Please select a place</mat-label>
+    <input type="text"
+           placeholder="Pick one"
+           aria-label="Place"
+           matInput
+           [formControl]="myControl"
+           [matAutocomplete]="auto">
+    <mat-autocomplete autoActiveFirstOption  #auto="matAutocomplete">
+      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
+        {{option.name}}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+
+  <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 [disabled]="disableSelect.value">
+      <mat-option value="option1" *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. Dys"  type="number">
+  </mat-form-field>
+
+   <h5>What are your priorities to visit?</h5> 
+  <mat-chip-list  selectable multiple>
+    <mat-chip #c="matChip" color="accent" selected *ngFor="let category of categories" 
+    (click)="toggleSelection(c)">
+  <mat-icon *ngIf="c.selected">check</mat-icon>
+  {{category.name}}
+  </mat-chip>
+  </mat-chip-list>
+  <button mat-raised-button color="primary">Create my planner</button>
+</form>
Index: trip-planner-front/src/app/locations-form/locations-form.component.ts
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.ts	(revision fa375fed9635035b3c62cf759f42938afa14271b)
+++ trip-planner-front/src/app/locations-form/locations-form.component.ts	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -0,0 +1,77 @@
+import { Component, Injectable, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import {map, startWith, switchMap} from 'rxjs/operators';
+import {forkJoin, Observable} from 'rxjs';
+import { CityService } from '../_services/city.service';
+import { City } from '../_models/city';
+import { Country } from '../_models/country';
+import { CountryService } from '../_services/country.service';
+import { Companion } from '../_models/companion';
+import { CompanionService } from '../_services/companion.service';
+import { Category } from '../_models/category';
+import { CategoryService } from '../_services/cateogry.service';
+import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
+import { MatChip } from '@angular/material/chips';
+
+@Component({
+  selector: 'app-locations-form',
+  templateUrl: './locations-form.component.html',
+  styleUrls: ['./locations-form.component.css']
+})
+export class LocationsFormComponent implements OnInit {
+
+  myControl = new FormControl();
+  cities: City[];
+  countries: Country[];
+  companions: Companion[];
+  categories: Category[];
+  filteredOptions: Observable<City[]>;
+  disableSelect = new FormControl(false);
+
+  constructor(private cityService : CityService, private countryService : CountryService,
+              private companionService : CompanionService, private categoryService : CategoryService){
+    this.filteredOptions = new Observable<City[]>();
+    this.cities = [];
+    this.countries = [];
+    this.companions = [];
+    this.categories = [];
+  }
+  
+  ngOnInit() :void {
+    this.filteredOptions = this.myControl.valueChanges
+    .pipe(
+      startWith(''),
+      switchMap(val => {
+        return this.filter(val || '')
+      })       
+    );
+
+    this.categoryService.getAllCategories().subscribe(
+      data => {
+        this.categories = data;
+      }
+    );
+
+    this.companionService.getAllCompanions().subscribe(
+      data => {
+        this.companions = data;
+      }
+    )
+  }
+  
+  filter(val: string): Observable<City[]> {
+  // call the service which makes the http-request
+    return this.cityService.getAllCities()
+    .pipe(
+    map(response => response.filter(option => { 
+      return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
+    }))
+  )
+  
+ }  
+
+ toggleSelection(chip: MatChip){
+   chip.toggleSelected();
+ }
+
+}
