Index: trip-planner-front/src/app/_models/region.ts
===================================================================
--- trip-planner-front/src/app/_models/region.ts	(revision eed0bf860deec9614c6d4891e655270e2bb3b8ab)
+++ trip-planner-front/src/app/_models/region.ts	(revision eed0bf860deec9614c6d4891e655270e2bb3b8ab)
@@ -0,0 +1,10 @@
+export class Region{
+
+    id:number;
+    name: string;
+
+    constructor(){
+        this.id = 1;
+        this.name = '';
+    }
+}
Index: trip-planner-front/src/app/_services/location.service.ts
===================================================================
--- trip-planner-front/src/app/_services/location.service.ts	(revision eed0bf860deec9614c6d4891e655270e2bb3b8ab)
+++ trip-planner-front/src/app/_services/location.service.ts	(revision eed0bf860deec9614c6d4891e655270e2bb3b8ab)
@@ -0,0 +1,15 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class LocationService{
+    constructor(private httpClient : HttpClient){}
+
+    getAllPlaces(locationId: number, companionId: number, lengthOfStay: number, categoryIds: string): Observable<Object[]>{
+        let url = "http://localhost:8080/api/trip/locations";
+        return this.httpClient.get<Location[]>(url + '?locationId=' + locationId + '&companionId=' + companionId + '&lengthOfStay=' + lengthOfStay + '&categoryIds='+ categoryIds);
+    }
+}
Index: trip-planner-front/src/app/_services/region.service.ts
===================================================================
--- trip-planner-front/src/app/_services/region.service.ts	(revision eed0bf860deec9614c6d4891e655270e2bb3b8ab)
+++ trip-planner-front/src/app/_services/region.service.ts	(revision eed0bf860deec9614c6d4891e655270e2bb3b8ab)
@@ -0,0 +1,17 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { Region } from "../_models/region";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class RegionService{
+    constructor(private httpClient: HttpClient){
+    }
+
+    getAllRegions():Observable<Region[]>{
+        let url = "http://localhost:8080/api/regions";
+        return this.httpClient.get<Region[]>(url);
+    }
+}
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 eed0bf860deec9614c6d4891e655270e2bb3b8ab)
@@ -1,6 +1,17 @@
 <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>
+<div class="example-form">
+
+  <div class="d-block">
+    <button class="btn" (click)="chooseCityOption()" >
+      City
+    </button>
+    <button class="btn" (click)="chooseRegionOption()">
+      Region
+    </button>
+  </div>
+  <br>
+  <br>
+  <!--
   <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Please select a place</mat-label>
@@ -17,10 +28,32 @@
     </mat-autocomplete>
   </mat-form-field>
+  -->
+
+
+  <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)]="locationId" placeholder="Select city">
+        <mat-option [value]="city.id" *ngFor="let city of cities" [value]="city.id"> {{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">
+        <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 [disabled]="disableSelect.value">
-      <mat-option value="option1" *ngFor="let companion of companions">{{companion.type}}</mat-option>
+    <mat-select [(ngModel)]="companionId" placeholder="Please select a companion">
+      <mat-option [value]="companion.id" *ngFor="let companion of companions">{{companion.type}}</mat-option>
     </mat-select>
   </mat-form-field>
@@ -29,15 +62,18 @@
   <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">
+    <input matInput placeholder="No. Days"  type="number" [(ngModel)]="lengthOfStay">
   </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>
+    <mat-chip #c="matChip" selected *ngFor="let category of categories" 
+    (click)="toggleSelection(c, category)" >
+  <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>
+  <button mat-raised-button color="primary" (click)="createMyPlanner()">Create my planner</button>
+
+
+</div>
+  
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 eed0bf860deec9614c6d4891e655270e2bb3b8ab)
@@ -13,4 +13,7 @@
 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 import { MatChip } from '@angular/material/chips';
+import { LocationService } from '../_services/location.service';
+import { Region } from '../_models/region';
+import { RegionService } from '../_services/region.service';
 
 @Component({
@@ -23,17 +26,32 @@
   myControl = new FormControl();
   cities: City[];
-  countries: Country[];
+  regions: Region[];
   companions: Companion[];
   categories: Category[];
   filteredOptions: Observable<City[]>;
   disableSelect = new FormControl(false);
+  chipsSeletion: number[];
+  categoryIds: string;
+  locationId: number;
+  regionId: number;
+  companionId: number;
+  lengthOfStay: number;
+  cityOption: boolean = false;
+  regionOption: boolean = false;
 
-  constructor(private cityService : CityService, private countryService : CountryService,
-              private companionService : CompanionService, private categoryService : CategoryService){
+  constructor(private cityService : CityService, private regionService: RegionService,
+              private companionService : CompanionService, private categoryService : CategoryService,
+              private locationService: LocationService){
     this.filteredOptions = new Observable<City[]>();
     this.cities = [];
-    this.countries = [];
+    this.regions = [];
     this.companions = [];
     this.categories = [];
+    this.chipsSeletion = [];
+    this.locationId = 0;
+    this.companionId = 0;
+    this.lengthOfStay = 1;
+    this.categoryIds = '';
+    this.regionId = 0;
   }
   
@@ -45,4 +63,16 @@
         return this.filter(val || '')
       })       
+    );
+
+    this.cityService.getAllCities().subscribe(
+      data => {
+        this.cities = data;
+      }
+    );
+
+    this.regionService.getAllRegions().subscribe(
+      data => {
+        this.regions = data;
+      }
     );
 
@@ -71,7 +101,36 @@
  }  
 
- toggleSelection(chip: MatChip){
-   chip.toggleSelected();
+ toggleSelection(chip: MatChip, category: Category){
+  chip.toggleSelected();
+  if(this.chipsSeletion.length > 0){
+    if(this.chipsSeletion.indexOf(category.id) <= -1){
+      this.chipsSeletion.push(category.id);
+    }else{
+      const index = this.chipsSeletion.indexOf(category.id);
+      this.chipsSeletion.splice(index, 1);
+    }
+  }else{
+    this.chipsSeletion.push(category.id);
+  }
+  console.log(this.chipsSeletion);
  }
 
+
+ createMyPlanner(){
+   this.categoryIds = this.chipsSeletion.join(',');
+   console.log(this.companionId);
+   this.locationService.getAllPlaces(this.locationId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
+     result => {
+       console.log(result);
+     }
+   );
+ }
+ chooseCityOption(){
+   this.cityOption = true;
+   this.regionOption = false;
+ }
+  chooseRegionOption() {
+    this.regionOption = true;
+    this.cityOption = false;
+  }
 }
