Index: trip-planner-front/src/app/planner/edit-planner/edit-planner.component.css
===================================================================
--- trip-planner-front/src/app/planner/edit-planner/edit-planner.component.css	(revision 571e0df9a7a5e798c9941a85842f785177bedbbd)
+++ 	(revision )
@@ -1,3 +1,0 @@
-mat-form-field{
-    width:300px;
-}
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 571e0df9a7a5e798c9941a85842f785177bedbbd)
+++ 	(revision )
@@ -1,52 +1,0 @@
-<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()">
-    <div class="form-gorup">
-        <p>Planner name</p>
-        <mat-form-field appearance="fill">
-            <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>
-        </mat-form-field>
-    </div>
-    <div class="container mb-4">
-        <div class="row">
-            <div class="col-12">
-                <div class="table-responsive">
-                    <table class="table table-striped">
-                        <thead>
-                            <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>
-                                <td>
-                                    <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" (click)="onClickRemoveLocation(planner, location)"></button>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-    </div>
-    <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>
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 571e0df9a7a5e798c9941a85842f785177bedbbd)
+++ 	(revision )
@@ -1,99 +1,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import { PlannerDto } from 'src/app/_models/dto/plannerDto';
-import { PlannerLocationDto } from 'src/app/_models/dto/plannerLocationDto';
-import { Location } from 'src/app/_models/location';
-import { Planner } from 'src/app/_models/planner';
-import { LocationService } from 'src/app/_services/location.service';
-import { PlannerService } from 'src/app/_services/planner.service';
-
-@Component({
-  selector: 'app-edit-planner',
-  templateUrl: './edit-planner.component.html',
-  styleUrls: ['./edit-planner.component.css']
-})
-export class EditPlannerComponent implements OnInit {
-
-  planner: Planner;
-  planners: Planner[];
-  form: FormGroup;
-  plannerDto: PlannerDto;
-  id: number;
-  locations: Location[];
-  plannerLocationDto: PlannerLocationDto;
-
-  constructor(private router: Router, private route: ActivatedRoute, private fb: FormBuilder, private plannerService: PlannerService,
-    private locationService: LocationService) {
-    this.planner = new Planner();
-    this.planners = [];
-    this.form = fb.group({
-      title: fb.control('initial value', Validators.required)
-    });
-    this.plannerDto = new PlannerDto();
-    this.id = 1;
-    this.locations = [];
-    this.plannerLocationDto = new PlannerLocationDto();
-  }
-
-  ngOnInit(): void {
-    this.id = this.route.snapshot.params['id'];
-
-    this.form = this.fb.group({
-      name: [''],
-      description: [''],
-      locationList: []
-    });
-
-    this.plannerService.getPlannerById(this.id)
-      .pipe()
-      .subscribe(x => this.form.patchValue(x));
-
-    this.locationService.getLocationsForPlanner(this.id).subscribe(
-      data => {
-        this.locations = data;
-      }
-    );
-  }
-
-  onSubmit() {
-    this.updatePlanner();
-
-  }
-
-  onClickAddLocation() {
-    this.router.navigate(['form']);
-  }
-
-  updatePlanner() {
-    this.plannerService.updatePlanner(this.id, this.form.value)
-      .pipe()
-      .subscribe({
-        next: () => {
-          this.router.navigate(['planners']);
-        },
-        error: error => {
-          console.log("error");
-        }
-      });
-  }
-
-  onClickBack() {
-    this.router.navigate(['planners']);
-  }
-
-  onClickRemoveLocation(planner: Planner, location: Location) {
-    planner.id = this.id;
-
-    this.plannerLocationDto.plannerId = planner.id;
-    this.plannerLocationDto.locationId = location.id;
-    console.log(this.plannerLocationDto.plannerId);
-    console.log(this.plannerLocationDto.locationId);
-    this.plannerService.deleteLocationFromPlanner(this.plannerLocationDto).subscribe(
-      data => {
-        console.log("deleted")
-      }
-    );
-    window.location.reload();
-  }
-}
Index: trip-planner-front/src/app/planner/planner.component.css
===================================================================
--- trip-planner-front/src/app/planner/planner.component.css	(revision 571e0df9a7a5e798c9941a85842f785177bedbbd)
+++ trip-planner-front/src/app/planner/planner.component.css	(revision 6a3a178323fd905112b5392bd9d3cb83b66ef2d3)
@@ -1,9 +1,3 @@
-mat-card  {   
-  width: 280px;   
-  height: 160px; 
-
-}
-.example-card button {
-  box-shadow:none !important;
-  cursor:pointer;
-}
+.example-card {
+    
+  }
Index: trip-planner-front/src/app/planner/planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/planner.component.html	(revision 571e0df9a7a5e798c9941a85842f785177bedbbd)
+++ trip-planner-front/src/app/planner/planner.component.html	(revision 6a3a178323fd905112b5392bd9d3cb83b66ef2d3)
@@ -1,38 +1,19 @@
-<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>
-
-
-<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>
-
-<button pButton pRipple type="button" label="Add location" class="p-button-help " (click)="onClickAddLocation()"></button>
-
-<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'}" (click)="onDeletePlanner(planner.id)"></button>
-        </ng-template>
-      </p-card>
-    </td>
-  </ng-template>
-</p-table>
+<mat-grid-list cols="4" rowHeight="250px">
+  <mat-grid-tile *ngFor="let planner of planners" >
+      <mat-card class="example-card" >
+        <mat-card-title>{{planner.name}}</mat-card-title>
+        <mat-card-content>
+          {{planner.description}}
+        </mat-card-content>
+        <mat-card-actions>
+          <button mat-raised-button color="primary">
+            <mat-icon>edit</mat-icon> Edit
+          </button>
+          
+          <button mat-raised-button color="accent">
+            <mat-icon>remove_red_eye</mat-icon>Details
+          </button>
+        </mat-card-actions>
+      </mat-card>
+  </mat-grid-tile>
+</mat-grid-list>
Index: trip-planner-front/src/app/planner/planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/planner.component.ts	(revision 571e0df9a7a5e798c9941a85842f785177bedbbd)
+++ trip-planner-front/src/app/planner/planner.component.ts	(revision 6a3a178323fd905112b5392bd9d3cb83b66ef2d3)
@@ -2,40 +2,18 @@
 import { Planner } from '../_models/planner';
 import { PlannerService } from '../_services/planner.service';
-import { CreateInitialPlannerComponent } from '../create-initial-planner/create-initial-planner.component';
-import { Router } from '@angular/router';
-import { PlannerDto } from '../_models/dto/plannerDto';
-import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { MessageService, PrimeNGConfig } from 'primeng/api';
-import { UserDto } from '../_models/dto/userDto';
-
 
 @Component({
   selector: 'app-planner',
   templateUrl: './planner.component.html',
-  styleUrls: ['./planner.component.css'],
-  providers: [DialogService, MessageService]
+  styleUrls: ['./planner.component.css']
 })
 export class PlannerComponent implements OnInit {
 
   planners: Planner[];
-  plannerDto: PlannerDto;
-  ref: DynamicDialogRef;
-  user: UserDto;
-  userDisplayName = '';
-  status = '';
-
-  constructor(private plannerService: PlannerService, private router: Router,
-    private dialogService: DialogService, private primengConfig: PrimeNGConfig, private messageService: MessageService) {
+  constructor(private plannerService: PlannerService) { 
     this.planners = [];
-    this.plannerDto = new PlannerDto();
-    this.ref = new DynamicDialogRef;
-    this.user = new UserDto();
   }
 
   ngOnInit(): void {
-
-    this.primengConfig.ripple = true;
-    let name1: string = sessionStorage.getItem("username") as string;
-    this.userDisplayName = name1;
     this.plannerService.getAllPlanners().subscribe(
       data => {
@@ -45,61 +23,3 @@
   }
 
-  onClickEditPlannerGet(id: number) {
-    console.log(id);
-    this.plannerService.getPlannerById(id).subscribe(
-      data => {
-        this.router.navigate(['edit/planner/', id]);
-      }
-    );
-  }
-
-  show() {
-    this.ref = this.dialogService.open(CreateInitialPlannerComponent, {
-      header: 'Create initial planner',
-      width: '70%',
-      contentStyle: { "max-height": "500px", "overflow": "auto" },
-      baseZIndex: 10000
-    });
-    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();
-  }
-
-  onClickAddLocation(){
-    this.router.navigate(['add-location']);
-  }
 }
