Index: trip-planner-front/src/app/_services/city.service.ts
===================================================================
--- trip-planner-front/src/app/_services/city.service.ts	(revision 6a3a178323fd905112b5392bd9d3cb83b66ef2d3)
+++ trip-planner-front/src/app/_services/city.service.ts	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -7,5 +7,4 @@
     providedIn:'root'
 })
-
 export class CityService{
     constructor(private httpClient: HttpClient){
Index: trip-planner-front/src/app/_services/places.service.ts
===================================================================
--- trip-planner-front/src/app/_services/places.service.ts	(revision fa375fed9635035b3c62cf759f42938afa14271b)
+++ trip-planner-front/src/app/_services/places.service.ts	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -0,0 +1,17 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { CityService } from "./city.service";
+import { CountryService } from "./country.service";
+import { forkJoin  } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+
+export class PlaceService{
+
+    constructor(private httpClient : HttpClient, private cityService: CityService, private countryService : CountryService){}
+    
+    
+}
Index: trip-planner-front/src/app/app.component.html
===================================================================
--- trip-planner-front/src/app/app.component.html	(revision 6a3a178323fd905112b5392bd9d3cb83b66ef2d3)
+++ trip-planner-front/src/app/app.component.html	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -1,3 +1,3 @@
 
-  <app-planner>
-  </app-planner>
+  <app-locations-form>
+  </app-locations-form>
Index: trip-planner-front/src/app/app.module.ts
===================================================================
--- trip-planner-front/src/app/app.module.ts	(revision 6a3a178323fd905112b5392bd9d3cb83b66ef2d3)
+++ trip-planner-front/src/app/app.module.ts	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -2,6 +2,6 @@
 import { AppComponent } from './app.component';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {HttpClient, HttpClientModule} from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -22,4 +22,8 @@
 import { MatButtonModule } from '@angular/material/button';
 import {MatGridListModule} from '@angular/material/grid-list';
+import { CreateInitialPlannerComponent } from './create-initial-planner/create-initial-planner.component';
+import { LocationsFormComponent } from './locations-form/locations-form.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
 
 @NgModule({
@@ -27,5 +31,7 @@
     AppComponent,
     PlannerComponent,
-    LocationComponent
+    LocationComponent,
+    CreateInitialPlannerComponent,
+    LocationsFormComponent
   ],
   imports: [
@@ -44,11 +50,19 @@
     MatCardModule,
     MatButtonModule,
-    MatGridListModule
+    MatGridListModule,
+    MatFormFieldModule,
+    MatAutocompleteModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+    MatSelectModule
+    
   ],
   providers: [
     CategoryService,
     PlannerService
+    
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  schemas: [NO_ERRORS_SCHEMA]
   
 })
Index: trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html
===================================================================
--- trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html	(revision fa375fed9635035b3c62cf759f42938afa14271b)
+++ trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>Hi </h1>
+<div mat-dialog-content>
+  <p>Trip name</p>
+  <mat-form-field appearance="fill">
+    <input matInput required >
+  </mat-form-field>
+  <p>Trip description</p>
+  <mat-form-field appearance="fill">
+    <textarea matInput ></textarea>
+  </mat-form-field>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onCancelClick()">Cancel</button>
+  <button mat-button cdkFocusInitial>Save</button>
+</div>
Index: trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts
===================================================================
--- trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts	(revision fa375fed9635035b3c62cf759f42938afa14271b)
+++ trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -0,0 +1,21 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-create-initial-planner',
+  templateUrl: './create-initial-planner.component.html',
+  styleUrls: ['./create-initial-planner.component.css']
+})
+export class CreateInitialPlannerComponent implements OnInit {
+
+  constructor(
+    public dialogRef: MatDialogRef<CreateInitialPlannerComponent>) {}
+
+  ngOnInit(): void {
+  }
+
+  onCancelClick(): void {
+    this.dialogRef.close();
+  }
+
+}
Index: trip-planner-front/src/app/location/location.component.html
===================================================================
--- trip-planner-front/src/app/location/location.component.html	(revision 6a3a178323fd905112b5392bd9d3cb83b66ef2d3)
+++ trip-planner-front/src/app/location/location.component.html	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -5,12 +5,4 @@
   <hr>
 
-  <div *ngFor="let city of cities">
-    {{city.name}}
-  </div>
-  <div *ngFor="let country of countries">
-    {{country.name}}
-  </div>
-
-  <hr>
   <div *ngFor="let companion of companions">
     {{companion.type}}
Index: trip-planner-front/src/app/location/location.component.ts
===================================================================
--- trip-planner-front/src/app/location/location.component.ts	(revision 6a3a178323fd905112b5392bd9d3cb83b66ef2d3)
+++ trip-planner-front/src/app/location/location.component.ts	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -17,12 +17,7 @@
 
   categories: Category[];
-  cities: City[];
-  countries:Country[];
   companions: Companion[];
-  constructor(private categoryService: CategoryService, private cityService : CityService,
-            private countryService : CountryService, private companionService : CompanionService) {
+  constructor(private categoryService: CategoryService, private companionService : CompanionService) {
     this.categories = [];
-    this.cities=[];
-    this.countries = [];
     this.companions = [];
    }
@@ -35,15 +30,4 @@
       }
     );
-    this.cityService.getAllCities().subscribe(
-      data => {
-        this.cities = data;
-
-      }
-    );
-    this.countryService.getAllCountries().subscribe(
-      data => {
-        this.countries = data;
-      }
-    );
 
     this.companionService.getAllCompanions().subscribe(
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();
+ }
+
+}
Index: trip-planner-front/src/app/planner/planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/planner.component.html	(revision 6a3a178323fd905112b5392bd9d3cb83b66ef2d3)
+++ trip-planner-front/src/app/planner/planner.component.html	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -1,2 +1,5 @@
+
+<button mat-raised-button (click)="openDialog()">Create initial planner</button>
+
 <mat-grid-list cols="4" rowHeight="250px">
   <mat-grid-tile *ngFor="let planner of planners" >
Index: trip-planner-front/src/app/planner/planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/planner.component.ts	(revision 6a3a178323fd905112b5392bd9d3cb83b66ef2d3)
+++ trip-planner-front/src/app/planner/planner.component.ts	(revision fa375fed9635035b3c62cf759f42938afa14271b)
@@ -2,4 +2,7 @@
 import { Planner } from '../_models/planner';
 import { PlannerService } from '../_services/planner.service';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import { CreateInitialPlannerComponent } from '../create-initial-planner/create-initial-planner.component';
+
 
 @Component({
@@ -11,8 +14,15 @@
 
   planners: Planner[];
-  constructor(private plannerService: PlannerService) { 
+  constructor(private plannerService: PlannerService, public dialog: MatDialog) { 
     this.planners = [];
+  };
+ 
+  openDialog(): void {
+    const dialogRef = this.dialog.open(CreateInitialPlannerComponent, {
+      width: '250px',
+      data: {}
+    });
   }
-
+  
   ngOnInit(): void {
     this.plannerService.getAllPlanners().subscribe(
@@ -22,4 +32,4 @@
     );
   }
-
+  
 }
