Index: trip-planner-front/src/app/planner/detail-planner/detail-planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/detail-planner/detail-planner.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/detail-planner/detail-planner.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,1 @@
+<p>detail-planner works!</p>
Index: trip-planner-front/src/app/planner/detail-planner/detail-planner.component.spec.ts
===================================================================
--- trip-planner-front/src/app/planner/detail-planner/detail-planner.component.spec.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/detail-planner/detail-planner.component.spec.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailPlannerComponent } from './detail-planner.component';
+
+describe('DetailPlannerComponent', () => {
+  let component: DetailPlannerComponent;
+  let fixture: ComponentFixture<DetailPlannerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DetailPlannerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailPlannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: trip-planner-front/src/app/planner/detail-planner/detail-planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/detail-planner/detail-planner.component.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/detail-planner/detail-planner.component.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-detail-planner',
+  templateUrl: './detail-planner.component.html',
+  styleUrls: ['./detail-planner.component.css']
+})
+export class DetailPlannerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
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 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.css	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,3 @@
+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 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,45 @@
+<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>
+    <div class="form-gorup">
+        <p>Planner name</p>
+        <mat-form-field appearance="fill">
+          <input matInput required   type="text" name="name"  placeholder="Planner name">
+        </mat-form-field>
+        <p>Planner description</p>
+        <mat-form-field appearance="fill">
+          <textarea matInput required name="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>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <button mat-raised-button color="primary" (click)="onClickSavePlanner()">
+        <mat-icon>edit</mat-icon> Save
+      </button>
+</form>
+
+   
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 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Planner } from 'src/app/_models/planner';
+
+@Component({
+  selector: 'app-edit-planner',
+  templateUrl: './edit-planner.component.html',
+  styleUrls: ['./edit-planner.component.css']
+})
+export class EditPlannerComponent implements OnInit {
+
+  planner: Planner;
+
+
+  constructor(private router: Router) { 
+    this.planner = new Planner();
+  }
+
+  ngOnInit(): void {
+  }
+
+
+  onClickSavePlanner(){
+      this.router.navigate(['planners']);
+  }
+
+  onClickAddLocation(){
+    this.router.navigate(['form']);
+  }
+}
Index: trip-planner-front/src/app/planner/planner.component.css
===================================================================
--- trip-planner-front/src/app/planner/planner.component.css	(revision fa375fed9635035b3c62cf759f42938afa14271b)
+++ trip-planner-front/src/app/planner/planner.component.css	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -1,3 +1,9 @@
-.example-card {
-    
-  }
+mat-card  {   
+  width: 280px;   
+  height: 160px; 
+
+}
+.example-card button {
+  box-shadow:none !important;
+  cursor:pointer;
+}
Index: trip-planner-front/src/app/planner/planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/planner.component.html	(revision fa375fed9635035b3c62cf759f42938afa14271b)
+++ trip-planner-front/src/app/planner/planner.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -1,14 +1,15 @@
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
 <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" >
-      <mat-card class="example-card" >
+<mat-grid-list cols="4" >
+  <mat-grid-tile *ngFor="let planner of planners">
+      <mat-card class="d-flex flex-column">
         <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-card-actions class="mt-auto">
+          <button mat-raised-button color="primary" (click)="onClickEditPlanner(planner.id)">
             <mat-icon>edit</mat-icon> Edit
           </button>
Index: trip-planner-front/src/app/planner/planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/planner.component.ts	(revision fa375fed9635035b3c62cf759f42938afa14271b)
+++ trip-planner-front/src/app/planner/planner.component.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -4,4 +4,5 @@
 import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 import { CreateInitialPlannerComponent } from '../create-initial-planner/create-initial-planner.component';
+import { Router } from '@angular/router';
 
 
@@ -14,6 +15,9 @@
 
   planners: Planner[];
-  constructor(private plannerService: PlannerService, public dialog: MatDialog) { 
+  plannerId: number;
+
+  constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router) { 
     this.planners = [];
+    this.plannerId = 1;
   };
  
@@ -33,3 +37,10 @@
   }
   
+  onClickEditPlanner(id: number){
+    console.log(id);
+   
+         
+          this.router.navigate(['edit/planner/', this.plannerId])
+    
+  }
 }
