Index: trip-planner-front/src/app/_models/location.ts
===================================================================
--- trip-planner-front/src/app/_models/location.ts	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/_models/location.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -8,4 +8,5 @@
     priority: string;
     duration: number;
+    trivia: string;
     photo: any[];
 
@@ -17,4 +18,5 @@
         this.priority = 'Location priority';
         this.duration = 1;
+        this.trivia = '';
         this.photo = [];
     }
Index: trip-planner-front/src/app/_services/planner.service.ts
===================================================================
--- trip-planner-front/src/app/_services/planner.service.ts	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/_services/planner.service.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -11,36 +11,39 @@
 
     httpHeaders: HttpHeaders = new HttpHeaders({
-        'Authorization': ''+sessionStorage.getItem("token"),
+        'Authorization': '' + sessionStorage.getItem("token"),
         'Accept': 'application/json',
         'Content-Type': 'application/json'
-      });
-      
+    });
 
-    constructor(private httpClient: HttpClient){
+
+    constructor(private httpClient: HttpClient) {
     }
 
-   
-    getAllPlanners():Observable<Planner[]>{
+
+    getAllPlanners(): Observable<Planner[]> {
         let url = "http://localhost:8080/api/planners/user";
         console.log("SERVID: " + sessionStorage.getItem("token"));
-        console.log(this.httpHeaders.get('Authorization'))  ;
-        return this.httpClient.get<Planner[]>(url, {headers: this.httpHeaders});     
+        console.log(this.httpHeaders.get('Authorization'));
+        return this.httpClient.get<Planner[]>(url, { headers: this.httpHeaders });
     }
 
-    postInitialPlanner(planner: Planner): Observable<Planner>{     
+    postInitialPlanner(plannerDto: PlannerDto): Observable<Planner> {
         let url = "http://localhost:8080/api/planner/new";
-        return this.httpClient.post<Planner>(url, planner);
+        return this.httpClient.post<Planner>(url, plannerDto);
     }
 
-    updatePlanner(id: number, plannerDto : PlannerDto):Observable<Planner>{    
-    let url = "http://localhost:8080/api/edit/planner/" + id;
-    return this.httpClient.put<Planner>(url, plannerDto, {headers: this.httpHeaders});
+    updatePlanner(id: number, plannerDto: PlannerDto): Observable<Planner> {
+        let url = "http://localhost:8080/api/edit/planner/" + id;
+        return this.httpClient.put<Planner>(url, plannerDto, { headers: this.httpHeaders });
     }
 
-    getPlannerById(id:number):Observable<Planner>{
+    getPlannerById(id: number): Observable<Planner> {
         let url = "http://localhost:8080/api/planner/" + id;
         return this.httpClient.get<Planner>(url);
     }
 
-
+    deletePlannerById(id: number): Observable<Planner> {
+        let url = "http://localhost:8080/api/delete/" + id;
+        return this.httpClient.delete<Planner>(url, { headers: this.httpHeaders });
+    }
 }
Index: trip-planner-front/src/app/_services/user.service.ts
===================================================================
--- trip-planner-front/src/app/_services/user.service.ts	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/_services/user.service.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -8,46 +8,44 @@
 
 @Injectable({
-    providedIn: 'root'
+  providedIn: 'root'
 })
-export class UserService{
+export class UserService {
 
-     headers = new HttpHeaders({
-        'Content-Type': 'application/json',
-        'Access-Control-Allow-Headers': 'Content-Type',
+  headers = new HttpHeaders({
+    'Content-Type': 'application/json',
+    'Access-Control-Allow-Headers': 'Content-Type',
 
-      });
-    
-    constructor(private httpClient: HttpClient){
+  });
 
-    }
+  constructor(private httpClient: HttpClient) {
 
-    registerUser(user : UserDto) : Observable<User>{
-        let url = "http://localhost:8080/api/users/register";
-        var reqHeader = new HttpHeaders({'No-Auth' : 'True'});
-        return this.httpClient.post<User>(url, user, { headers: reqHeader });
-    }
-    
-    authenticateUser(loginResult : LoginRequest) {
-        let url = "http://localhost:8080/api/users/login";
-        var reqHeader = new HttpHeaders({'Content-Type': 'application/json'});
-        return this.httpClient.post<any>(url, loginResult)
-        .pipe(
-            map(userData => {
-                sessionStorage.setItem("username", loginResult.username);
-                let tokenStr =  userData.token;
-                sessionStorage.setItem("token", tokenStr);
-                return userData;
-            })
-        );
-    }
-  
-      isUserLoggedIn() {
-        let user = sessionStorage.getItem("username");
-        let token = sessionStorage.getItem("token");
-        console.log(user);
-        console.log(token);
-        console.log(!(user === null));
-        return !(user === null);
-      }
-    
+  }
+
+  registerUser(user: UserDto): Observable<User> {
+    let url = "http://localhost:8080/api/users/register";
+    return this.httpClient.post<User>(url, user, { headers: this.headers });
+  }
+
+  authenticateUser(loginResult: LoginRequest) {
+    let url = "http://localhost:8080/api/users/login";
+    return this.httpClient.post<any>(url, loginResult)
+      .pipe(
+        map(userData => {
+          sessionStorage.setItem("username", loginResult.username);
+          let tokenStr = userData.token;
+          sessionStorage.setItem("token", tokenStr);
+          return userData;
+        })
+      );
+  }
+
+  isUserLoggedIn() {
+    let user = sessionStorage.getItem("username");
+    let token = sessionStorage.getItem("token");
+    console.log(user);
+    console.log(token);
+    console.log(!(user === null));
+    return !(user === null);
+  }
+
 }
Index: trip-planner-front/src/app/app.module.ts
===================================================================
--- trip-planner-front/src/app/app.module.ts	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/app.module.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -43,10 +43,11 @@
 import { InputTextModule } from 'primeng/inputtext';
 import { RippleModule } from 'primeng/ripple';
-import {PaginatorModule} from 'primeng/paginator';
-import {CardModule} from 'primeng/card';
+import { PaginatorModule } from 'primeng/paginator';
+import { CardModule } from 'primeng/card';
 import { RegisterComponent } from './homepage/register/register.component';
 import { LoginComponent } from './homepage/login/login.component';
 import { AuthGuard } from './auth/auth.guard';
 import { AuthInterceptor } from './auth/auth.interceptor';
+
 
 @NgModule({
@@ -111,7 +112,7 @@
     PlannerService,
     {
-      provide: MatDialogRef, 
-      useValue: {}, 
-    
+      provide: MatDialogRef,
+      useValue: {},
+
     },
     {
@@ -125,5 +126,5 @@
     AuthGuard
   ],
-  
+
   entryComponents: [
     AddLocationToPlannerPanelComponent
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 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -2,14 +2,17 @@
     <p>Planner name</p>
     <mat-form-field appearance="fill">
-      <input matInput required type="text" [(ngModel)]="planner.name" name="name" placeholder="Planner name">
+      <input matInput  type="text" [(ngModel)]="plannerDto.name" name="plannerName" placeholder="Planner name">
+     
     </mat-form-field>
     <p>Planner description</p>
     <mat-form-field appearance="fill">
-      <textarea matInput required name="description" [(ngModel)]="planner.description" type="text"
+      <textarea matInput  name="description" [(ngModel)]="plannerDto.description" type="text"
         placeholder="Planner description"></textarea>
     </mat-form-field>
   </div>
   <div mat-dialog-actions>
-    <button pButton pRipple type="submit" label="Save" 
-      class="p-button-outlined p-button-rounded p-button-help" (click)="onFormSubmitPlanner(planner)"></button>
+    <button pButton pRipple type="button" label="Save" 
+      class="p-button-outlined p-button-rounded p-button-help" (click)="onFormSubmitPlanner(plannerDto)"></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 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -1,2 +1,3 @@
+import { PlatformModule } from '@angular/cdk/platform';
 import { Component, OnInit } from '@angular/core';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
@@ -11,16 +12,16 @@
 export class CreateInitialPlannerComponent implements OnInit {
 
-  planner: Planner;
+  plannerDto: PlannerDto;
 
   constructor( private ref: DynamicDialogRef) {
-                this.planner = new Planner;
+                this.plannerDto = new PlannerDto();
               }
 
   ngOnInit(): void {
-    this.planner = new Planner();
+    this.plannerDto = new Planner();
   }
 
-  onFormSubmitPlanner(planner){
-    this.ref.close(planner);
+  onFormSubmitPlanner(plannerDto){
+    this.ref.close(plannerDto);
     window.location.reload();
   }
Index: trip-planner-front/src/app/homepage/homepage.component.html
===================================================================
--- trip-planner-front/src/app/homepage/homepage.component.html	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/homepage/homepage.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -13,5 +13,4 @@
   <header>
     <nav class="navbar navbar-expand-sm bg-light">
-      <img src={{myLogo}} />
       <strong class="navbar-brand">Trivia Trip</strong>
 
@@ -30,6 +29,6 @@
     <img src={{imageURI}} />
     <h4></h4>
-<!--
-  <div class="content-section implementation carousel-demo" style="padding-top: 2em;">
+
+    <div class="content-section implementation carousel-demo" style="padding-top: 2em;">
       <div class="card">
         <p-carousel [value]="locations" [numVisible]="3" [numScroll]="3" [circular]="false"
@@ -91,8 +90,7 @@
       </div>
     </div>
--->
-  
+
   </main>
-<br>
+  <br>
 
   <footer class="bg-dark text-center text-white">
@@ -102,35 +100,23 @@
       <section class="mb-4">
         <!-- Facebook -->
-        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
-          ><i class="fab fa-facebook-f"></i
-        ></a>
-  
+        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-facebook-f"></i></a>
+
         <!-- Twitter -->
-        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
-          ><i class="fab fa-twitter"></i
-        ></a>
-  
+        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-twitter"></i></a>
+
         <!-- Google -->
-        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
-          ><i class="fab fa-google"></i
-        ></a>
-  
+        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-google"></i></a>
+
         <!-- Instagram -->
-        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
-          ><i class="fab fa-instagram"></i
-        ></a>
-  
+        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-instagram"></i></a>
+
         <!-- Linkedin -->
-        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
-          ><i class="fab fa-linkedin-in"></i
-        ></a>
-  
+        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-linkedin-in"></i></a>
+
         <!-- Github -->
-        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
-          ><i class="fab fa-github"></i
-        ></a>
+        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-github"></i></a>
       </section>
       <!-- Section: Social media -->
-  
+
       <!-- Section: Form -->
       <section class="">
@@ -145,5 +131,5 @@
             </div>
             <!--Grid column-->
-  
+
             <!--Grid column-->
             <div class="col-md-5 col-12">
@@ -155,5 +141,5 @@
             </div>
             <!--Grid column-->
-  
+
             <!--Grid column-->
             <div class="col-auto">
@@ -169,5 +155,5 @@
       </section>
       <!-- Section: Form -->
-  
+
       <!-- Section: Text -->
       <section class="mb-4">
@@ -179,5 +165,5 @@
       </section>
       <!-- Section: Text -->
-  
+
       <!-- Section: Links -->
       <section class="">
@@ -187,68 +173,68 @@
           <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
             <h5 class="text-uppercase">Links</h5>
-  
-            <ul class="list-unstyled mb-0">
-              <li>
-                <a href="#!" class="text-white">Link 1</a>
-              </li>
-              <li>
-                <a href="#!" class="text-white">Link 2</a>
-              </li>
-              <li>
-                <a href="#!" class="text-white">Link 3</a>
-              </li>
-              <li>
-                <a href="#!" class="text-white">Link 4</a>
-              </li>
-            </ul>
-          </div>
-          <!--Grid column-->
-  
-          <!--Grid column-->
-          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
-            <h5 class="text-uppercase">Links</h5>
-  
-            <ul class="list-unstyled mb-0">
-              <li>
-                <a href="#!" class="text-white">Link 1</a>
-              </li>
-              <li>
-                <a href="#!" class="text-white">Link 2</a>
-              </li>
-              <li>
-                <a href="#!" class="text-white">Link 3</a>
-              </li>
-              <li>
-                <a href="#!" class="text-white">Link 4</a>
-              </li>
-            </ul>
-          </div>
-          <!--Grid column-->
-  
-          <!--Grid column-->
-          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
-            <h5 class="text-uppercase">Links</h5>
-  
-            <ul class="list-unstyled mb-0">
-              <li>
-                <a href="#!" class="text-white">Link 1</a>
-              </li>
-              <li>
-                <a href="#!" class="text-white">Link 2</a>
-              </li>
-              <li>
-                <a href="#!" class="text-white">Link 3</a>
-              </li>
-              <li>
-                <a href="#!" class="text-white">Link 4</a>
-              </li>
-            </ul>
-          </div>
-          <!--Grid column-->
-  
-          <!--Grid column-->
-          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
-            <h5 class="text-uppercase">Links</h5>
-  
+
+            <ul class="list-unstyled mb-0">
+              <li>
+                <a href="#!" class="text-white">Link 1</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 2</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 3</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 4</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+
+          <!--Grid column-->
+          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+            <h5 class="text-uppercase">Links</h5>
+
+            <ul class="list-unstyled mb-0">
+              <li>
+                <a href="#!" class="text-white">Link 1</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 2</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 3</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 4</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+
+          <!--Grid column-->
+          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+            <h5 class="text-uppercase">Links</h5>
+
+            <ul class="list-unstyled mb-0">
+              <li>
+                <a href="#!" class="text-white">Link 1</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 2</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 3</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 4</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+
+          <!--Grid column-->
+          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+            <h5 class="text-uppercase">Links</h5>
+
             <ul class="list-unstyled mb-0">
               <li>
@@ -273,5 +259,5 @@
     </div>
     <!-- Grid container -->
-  
+
     <!-- Copyright -->
     <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
Index: trip-planner-front/src/app/homepage/homepage.component.ts
===================================================================
--- trip-planner-front/src/app/homepage/homepage.component.ts	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/homepage/homepage.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -1,2 +1,3 @@
+import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
@@ -50,5 +51,4 @@
 
    ngOnInit(): void {
-/*
       this.locationService.getWeekendGetaways().subscribe(
          data => {
@@ -61,5 +61,5 @@
          }
       );
-      */
+
    }
 
@@ -73,14 +73,18 @@
 
       this.ref.onClose.subscribe((user: UserDto) => {
-         this.userService.registerUser(user).subscribe(
-            data  => {
-               console.log(data);
-              
-            }
-         );
-      });
+         if (user) {
+            this.userService.registerUser(user).subscribe(
+               data => {
+                  console.log(data);
+               }
+            );
+         }
+      },
+         err => {
+
+         });
    }
 
-   
+
    onClickLogIn() {
       this.ref = this.dialogService.open(LoginComponent, {
@@ -90,14 +94,22 @@
          baseZIndex: 10000
       });
-      this.ref.onClose.subscribe((loginRequest : LoginRequest) => {
-         this.userService.authenticateUser(loginRequest).subscribe(
-            (data : any)  => {
-               console.log(data);
-               if(this.userService.isUserLoggedIn()){
-                  this.router.navigate(['planners']);
+      this.ref.onClose.subscribe((loginRequest: LoginRequest) => {
+         if (loginRequest) {
+            this.userService.authenticateUser(loginRequest).subscribe(
+               (data: any) => {
+                  console.log(data);
+                  if (this.userService.isUserLoggedIn()) {
+                     this.router.navigate(['planners']);
+                  }
                }
-            }
-         );
+            );
+         }
       });
    }
+
+   ngOnDestroy() {
+      if (this.ref) {
+         this.ref.close();
+      }
+   }
 }
Index: trip-planner-front/src/app/homepage/register/register.component.html
===================================================================
--- trip-planner-front/src/app/homepage/register/register.component.html	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/homepage/register/register.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -1,36 +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">
 
-    <div class="p-grid p-fluid">
-        <div class="p-col-12 p-md-4">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
-                <input type="text" pInputText placeholder="Full name" [(ngModel)]="user.fullName" name="fullName"
-            >         
-            </div>
+<div class="p-grid p-fluid">
+    <div class="p-col-12 p-md-4">
+        <div class="p-inputgroup">
+            <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
+            <input type="text" pInputText placeholder="Full name" [(ngModel)]="user.fullName" name="fullName"
+                class="form-control">
+
         </div>
-    
-        <div class="p-col-12 p-md-4">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
-                <input type="text" pInputText placeholder="Email address (Username)" [(ngModel)]="user.username" name="username"
-              >         
-            </div>
+    </div>
+
+    <div class="p-col-12 p-md-4">
+        <div class="p-inputgroup">
+            <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
+            <input type="text" pInputText placeholder="Email address (Username)" [(ngModel)]="user.username"
+                name="username">
         </div>
-        <div class="p-col-12 p-md-4">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
-                <input type="password" pInputText placeholder="Password" [(ngModel)]="user.password" name="password"
-                >         
-            </div>
+    </div>
+
+    <div class="p-col-12 p-md-4">
+        <div class="p-inputgroup">
+            <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
+            <input type="password" pInputText placeholder="Password" [(ngModel)]="user.password" name="password">
         </div>
-        <div class="p-col-12 p-md-4">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
-                <input type="password" pInputText placeholder="Repeat password" [(ngModel)]="user.confirmPassword" name="confirmPassword"
-                >         
-            </div>
+    </div>
+
+    <div class="p-col-12 p-md-4">
+        <div class="p-inputgroup">
+            <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
+            <input type="password" pInputText placeholder="Repeat password" [(ngModel)]="user.confirmPassword"
+                name="confirmPassword">
         </div>
-    
-        <div class="p-col-12 p-md-4">
-            <button pButton pRipple label="Submit" class="p-button-secondary" type="submit" (click)="onFormSubmitSignUp(user)"></button>
-        </div>
-    </div>  
+    </div>
+
+    <div class="p-col-12 p-md-4">
+        <button pButton pRipple label="Submit" class="p-button-secondary" type="button"
+            (click)="onFormSubmitSignUp(user)"></button>
+    </div>
+</div>
+
+
Index: trip-planner-front/src/app/homepage/register/register.component.ts
===================================================================
--- trip-planner-front/src/app/homepage/register/register.component.ts	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/homepage/register/register.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -1,3 +1,4 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
 import { UserDto } from 'src/app/_models/dto/userDto';
@@ -10,16 +11,28 @@
 export class RegisterComponent implements OnInit {
 
-  user : UserDto;
+  user: UserDto;
+  myForm: FormGroup;
 
-  constructor(private ref: DynamicDialogRef) {
+  constructor(private ref: DynamicDialogRef, private fb: FormBuilder) {
     this.user = new UserDto();
-   }
+    this.myForm = fb.group({
+      title: fb.control('initial value', Validators.required)
+    });
+  }
 
   ngOnInit(): void {
+    this.myForm = this.fb.group({
+      fullName: this.fb.control('', Validators.required),
+      username: this.fb.control('', Validators.required),
+      password: this.fb.control('', Validators.required),
+      confirmPassword: this.fb.control('', Validators.required)
+    });
   }
-  
-  onFormSubmitSignUp(user){
+
+  onFormSubmitSignUp(user) {
     this.ref.close(user);
     //window.location.reload();
+
   }
+
 }
Index: trip-planner-front/src/app/location/location.component.ts
===================================================================
--- trip-planner-front/src/app/location/location.component.ts	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/location/location.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -93,4 +93,5 @@
 
     this.ref.onClose.subscribe((planner: Planner) => {
+      if(planner){
       this.plannerLocationDto.locationId = location.id;
       this.plannerLocationDto.plannerId = planner.id;
@@ -124,5 +125,7 @@
         }
       );
+      }
     });
+  
   }
 
Index: trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -1,18 +1,20 @@
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
 <h3>Here you can edit your planner</h3>
 
-<form [formGroup] = "form" (ngSubmit)="onSubmit()">
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
     <div class="form-gorup">
         <p>Planner name</p>
         <mat-form-field appearance="fill">
-          <input matInput required type="text" formControlName="name"  placeholder="Planner name">
+            <input matInput required type="text" formControlName="name" placeholder="Planner name">
         </mat-form-field>
         <p>Planner description</p>
         <mat-form-field appearance="fill">
-          <textarea matInput required formControlName="description"  type="text" placeholder="Planner description"></textarea>
+            <textarea matInput required formControlName="description" type="text"
+                placeholder="Planner description"></textarea>
         </mat-form-field>
     </div>
-    <div class="container mb-4" >
+    <div class="container mb-4">
         <div class="row">
             <div class="col-12">
@@ -20,20 +22,23 @@
                     <table class="table table-striped">
                         <thead>
-                        <tr>
-                            <th scope="col">Location name</th>
-                        </tr>
+                            <tr>
+                                <th scope="col">Location name</th>
+                            </tr>
                         </thead>
                         <tbody>
-                        <tr>                           
-                            <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()">
-                                 Add locations
-                                 </button>
-                            </td>
-                        </tr>
-                        <tr *ngFor ="let location of locations">
-                            <td>
-                                {{location.name}}
-                            </td>
-                        </tr>
+                            <tr>
+                                <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()">
+                                        Add locations
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr *ngFor="let location of locations">
+                                <td>
+                                    {{location.name}}
+                                </td>
+                                <td>
+                                    <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></button>
+                                </td>
+                            </tr>
                         </tbody>
                     </table>
@@ -44,3 +49,4 @@
     <button pButton pRipplelabel label="Save" class="p-button-help"></button>
 </form>
-<button pButton pRipple label="Back" class="p-button-info" (click)="onClickBack()" [style]="{'margin-left': '.11em'}"></button>
+<button pButton pRipple label="Back" class="p-button-info" (click)="onClickBack()"
+    [style]="{'margin-left': '.11em'}"></button>
Index: trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -24,5 +24,5 @@
 
   constructor(private router: Router, private route: ActivatedRoute, private fb: FormBuilder, private plannerService: PlannerService,
-    private locationService : LocationService) {
+    private locationService: LocationService) {
     this.planner = new Planner();
     this.planners = [];
@@ -50,9 +50,9 @@
     this.locationService.getLocationsForPlanner(this.id).subscribe(
       data => {
-          this.locations = data;
+        this.locations = data;
       }
     );
-    }
- 
+  }
+
   onSubmit() {
     this.updatePlanner();
@@ -77,6 +77,10 @@
   }
 
-  onClickBack(){
+  onClickBack() {
     this.router.navigate(['planners']);
   }
+
+  onClickRemoveLocation(id : number){
+    
+  }
 }
Index: trip-planner-front/src/app/planner/planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/planner.component.html	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/planner/planner.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -1,24 +1,37 @@
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
 <p-toast></p-toast>
-<button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></button>
+
+
+<nav class="navbar navbar-light bg-light justify-content-between">
+  <button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></button>
+  <form class="form-inline">
+    <span>Hello, {{userDisplayName}}</span>
+    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" (click)="onClickLogout()">Log out</button>
+  </form>
+</nav>
+
+
 <br>
 <br>
 <p-table [value]="planners" [paginator]="true" [rows]="3" [responsive]="true">
-  
+
   <ng-template pTemplate="body" let-planner>
-      <td >
-        <p-card header="{{planner.name}}" subheader="Card Subheader" [style]="{width: '360px'}" styleClass="p-card-shadow">
-          <ng-template pTemplate="header">
-          </ng-template>
-          <p>{{planner.description}}</p>
-          <ng-template pTemplate="footer">
-              <button pButton pRipple type="button" label="Edit" class="p-button-outlined p-button-rounded p-button-help" (click)="onClickEditPlannerGet(planner.id)"></button>
-              <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" label="Delete" [style]="{'margin-left': '.5em'}"></button>
-            </ng-template>
-        </p-card>
-      </td>
+    <td>
+      <p-card header="{{planner.name}}" subheader="Card Subheader" [style]="{width: '360px'}"
+        styleClass="p-card-shadow">
+        <ng-template pTemplate="header">
+        </ng-template>
+        <p>{{planner.description}}</p>
+        <ng-template pTemplate="footer">
+          <button pButton pRipple type="button" label="Edit" class="p-button-outlined p-button-rounded p-button-help"
+            (click)="onClickEditPlannerGet(planner.id)"></button>
+          <button pButton pRipple type="button" icon="pi pi-times"
+            class="p-button-rounded p-button-danger p-button-outlined" label="Delete"
+            [style]="{'margin-left': '.5em'}" (click)="onDeletePlanner(planner.id)"></button>
+        </ng-template>
+      </p-card>
+    </td>
   </ng-template>
 </p-table>
-
-
Index: trip-planner-front/src/app/planner/planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/planner.component.ts	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/planner/planner.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -8,5 +8,4 @@
 import { MessageService, PrimeNGConfig } from 'primeng/api';
 import { UserDto } from '../_models/dto/userDto';
-import { UserService } from '../_services/user.service';
 
 
@@ -23,8 +22,9 @@
   ref: DynamicDialogRef;
   user: UserDto;
+  userDisplayName = '';
+  status = '';
 
   constructor(private plannerService: PlannerService, private router: Router,
-    private dialogService: DialogService, private primengConfig: PrimeNGConfig, private messageService: MessageService,
-    private userService : UserService) {
+    private dialogService: DialogService, private primengConfig: PrimeNGConfig, private messageService: MessageService) {
     this.planners = [];
     this.plannerDto = new PlannerDto();
@@ -36,11 +36,11 @@
 
     this.primengConfig.ripple = true;
-
+    let name1: string = sessionStorage.getItem("username") as string;
+    this.userDisplayName = name1;
     this.plannerService.getAllPlanners().subscribe(
       data => {
         this.planners = data;
-        localStorage.getItem("token");
       }
-    ); 
+    );
   }
 
@@ -61,16 +61,41 @@
       baseZIndex: 10000
     });
-    this.ref.onClose.subscribe((planner: Planner) => {
-      console.log("NOVOKREIRANIOT NAME NA PLANNER: " + planner.name);
-      this.plannerService.postInitialPlanner(planner).subscribe(
-        data=>{
-          console.log(data);
-        },
-        error => console.log('oops', error)
-     );
-      this.messageService.add({ severity: 'success', summary: 'The planner: ' + planner.name + ' has been created.' });
+    this.ref.onClose.subscribe((plannerDto: PlannerDto) => {
+      if (plannerDto) {
+        console.log("NOVOKREIRANIOT NAME NA PLANNER: " + plannerDto.name);
+        this.plannerService.postInitialPlanner(plannerDto).subscribe(
+          data => {
+            console.log(data);
+          },
+          error => console.log('oops', error)
+        );
+        this.messageService.add({ severity: 'success', summary: 'The planner: ' + plannerDto.name + ' has been created.' });
+      }
+      
     });
-    
+
   }
 
+  ngOnDestroy() {
+    if (this.ref) {
+      this.ref.close();
+    }
+  }
+
+  onClickLogout() {
+    sessionStorage.removeItem("token");
+    console.log("SESSION HAS ENDED, THE USER IS LOGGED OUT" + sessionStorage.getItem("token"));
+    this.router.navigate(['']);
+  }
+
+  onDeletePlanner(id: number) {
+    console.log("DELETE KOCHE: " + id);
+    this.plannerService.deletePlannerById(id).subscribe(
+      (data) => {
+        console.log(data);
+      },
+      (error) => console.log('error', error)
+    );
+    window.location.reload();
+  }
 }
