Index: trip-planner-front/src/app/app.module.ts
===================================================================
--- trip-planner-front/src/app/app.module.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/app.module.ts	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -3,6 +3,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {HttpClient, HttpClientModule} from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CategoryService } from './_services/cateogry.service';
@@ -11,30 +11,38 @@
 import { MatIconModule } from '@angular/material/icon';
 import { MatSelectModule } from '@angular/material/select';
-import {MatInputModule} from '@angular/material/input';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatTabsModule} from '@angular/material/tabs';
-import {MatDialogModule} from '@angular/material/dialog';
-import {MatBadgeModule} from '@angular/material/badge';
-import {MatDividerModule} from '@angular/material/divider';
-import {MatCardModule} from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatCardModule } from '@angular/material/card';
 import { PlannerService } from './_services/planner.service';
 import { MatButtonModule } from '@angular/material/button';
-import {MatGridListModule} from '@angular/material/grid-list';
+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';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component';
 import { DetailPlannerComponent } from './planner/detail-planner/detail-planner.component';
 import { AddLocationToPlannerPanelComponent } from './location/add-location-to-planner-panel/add-location-to-planner-panel.component';
 import { HomepageComponent } from './homepage/homepage.component';
-import {AccordionModule} from 'primeng/accordion';     //accordion and accordion tab
-import {MenuItem} from 'primeng/api'; 
-import {CarouselModule} from 'primeng/carousel';
-import {ButtonModule} from 'primeng/button';
-import {ToastModule} from 'primeng/toast';
-import {TabViewModule} from 'primeng/tabview';
+import { AccordionModule } from 'primeng/accordion';     //accordion and accordion tab
+import { CarouselModule } from 'primeng/carousel';
+import { ButtonModule } from 'primeng/button';
+import { ToastModule } from 'primeng/toast';
+import { TabViewModule } from 'primeng/tabview';
 import { LocationDetailsComponent } from './location/location-details/location-details.component';
-import {GalleriaModule} from 'primeng/galleria';
+import { GalleriaModule } from 'primeng/galleria';
+import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
+import { MessageService, SharedModule, ConfirmationService } from 'primeng/api';
+import { TableModule } from 'primeng/table';
+import { MessagesModule } from 'primeng/messages';
+import { MessageModule } from 'primeng/message';
+import { InputTextModule } from 'primeng/inputtext';
+import { RippleModule } from 'primeng/ripple';
+import {PaginatorModule} from 'primeng/paginator';
+import {CardModule} from 'primeng/card';
 
 @NgModule({
@@ -50,5 +58,5 @@
     HomepageComponent,
     LocationDetailsComponent
-    ],
+  ],
   imports: [
     BrowserModule,
@@ -77,14 +85,39 @@
     ToastModule,
     TabViewModule,
-    GalleriaModule
+    GalleriaModule,
+    DynamicDialogModule,
+    MatIconModule,
+    SharedModule,
+    MatDialogModule,
+    TableModule,
+    MessagesModule,
+    MessageModule,
+    InputTextModule,
+    RippleModule,
+    FormsModule,
+    PaginatorModule,
+    CardModule
   ],
+
+
   providers: [
     CategoryService,
-    PlannerService
-    
+    PlannerService,
+    {
+      provide: MatDialogRef,
+      useValue: {}
+    },
+    DialogService,
+    MessageService,
+    ConfirmationService
+
+  ],
+  
+  entryComponents: [
+    AddLocationToPlannerPanelComponent
   ],
   bootstrap: [AppComponent],
-  schemas: [NO_ERRORS_SCHEMA]
-  
+  schemas: [NO_ERRORS_SCHEMA],
+
 })
 export class AppModule { }
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 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -1,19 +1,17 @@
 <form (ngSubmit)="onFormSubmitPlanner(f)" #f="ngForm">
-  <h1 mat-dialog-title>Hi </h1>
   <div mat-dialog-content>
     <p>Planner name</p>
     <mat-form-field appearance="fill">
-      <input matInput required   type="text" [(ngModel)]="planner.name" name="name" placeholder="Planner name">
+      <input matInput required type="text" [(ngModel)]="planner.name" name="name" 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" placeholder="Planner description"></textarea>
+      <textarea matInput required name="description" [(ngModel)]="planner.description" type="text"
+        placeholder="Planner description"></textarea>
     </mat-form-field>
   </div>
   <div mat-dialog-actions>
-    
-    <button mat-button type="submit" [disabled]="!f.form.valid" >Save</button>
+    <button pButton pRipple type="button" label="Save" [disabled]="!f.form.valid"
+      class="p-button-outlined p-button-rounded p-button-help"></button>
   </div>
 </form>
-
-<button mat-button (click)="onCancelClick()">Cancel</button>
Index: trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.html
===================================================================
--- trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.html	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.html	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -1,15 +1,20 @@
-<form  >
-    <h1 mat-dialog-title>Please select a planner where u want your location to be saved</h1>
-   
-<table class="table" >
-  <tbody>
-    <tr *ngFor="let planner of planners">
-      <td>{{planner.name}}</td>
-      <td><button mat-raised-button color="primary" (click)="onFormSavePlanner(planner.id)">Save</button></td>
-    </tr>
-   
-  </tbody>
-</table>
-  </form>
-  
-  <button type="button"  mat-button (click)="onCancelClick()">Cancel</button>
+<p-table [value]="planners" [paginator]="true" [rows]="3" [responsive]="true">
+    <ng-template pTemplate="header">
+        <tr>
+            <th pSortableColumn="name">Name <p-sortIcon field="vin"></p-sortIcon>
+            </th>
+            <th style="width:4em"></th>
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-planner>
+        <tr>
+            <td>{{planner.name}}</td>
+
+            <td>
+                <button pButton pRipple type="button" icon="pi pi-heart"
+                    class="p-button-rounded p-button-help p-button-text" (click)="selectPlanner(planner)"></button>
+            </td>
+        </tr>
+    </ng-template>
+</p-table>
+
Index: trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.ts
===================================================================
--- trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.ts	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
-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';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+
+
 
 @Component({
@@ -16,56 +16,26 @@
 
   planners: Planner[];
-  location: Location;
-  plannerId: number;
-  locationId: number;
-  plannerLocationDto: PlannerLocationDto;
-  locationsInPlanner: Location[];
 
 
-  constructor(private dialogRef: MatDialogRef<AddLocationToPlannerPanelComponent>, private plannerService: PlannerService,
-    private locationService: LocationService, private route: ActivatedRoute) {
+
+  constructor(private plannerService: PlannerService,
+    private route: ActivatedRoute, private ref: DynamicDialogRef) {
     this.planners = [];
-    this.location = new Location;
-    this.plannerId = 1;
-    this.locationId = 1;
-    this.plannerLocationDto = new PlannerLocationDto();
-    this.locationsInPlanner = [];
   }
 
   ngOnInit(): void {
+
     this.plannerService.getAllPlanners().subscribe(
-      data => {
-        this.planners = data;
+      planner => {
+        this.planners = planner;
       }
     );
+  }
+
+  selectPlanner(planner: Planner) {
+    this.ref.close(planner);
+  }
 
 
-    this.route.queryParams
-      .subscribe(params => {
-        this.locationId = params.locationId;
-      }
-      );
-  }
-
-  onCancelClick(): void {
-    this.dialogRef.close();
-
-  }
-
-  onFormSavePlanner(plannerId: number) {
-    console.log("PLANNER ID: " + plannerId);
-    console.log("LOC ID "+ this.locationId);
-    this.plannerLocationDto.locationId = this.locationId;
-    this.plannerLocationDto.plannerId = plannerId;
-    /*
-    this.locationService.postLocationToPlanner(this.plannerLocationDto).subscribe(
-      data => {
-        console.log(data);
-      }
-    );
-    */
-
-   // window.location.reload();
-    }
 
 }
Index: trip-planner-front/src/app/location/location-details/location-details.component.html
===================================================================
--- trip-planner-front/src/app/location/location-details/location-details.component.html	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/location/location-details/location-details.component.html	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -7,14 +7,17 @@
     <div class="card">
         <h5>More photos</h5>
-        <p-galleria [value]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '640px'}" [numVisible]="5"
-            [circular]="true" [showItemNavigators]="true">
+        <p-galleria [value]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '640px'}"
+            [numVisible]="5" [circular]="true" [showItemNavigators]="true">
             <ng-template pTemplate="item" let-image>
-                <img src="data:image/png;base64,{{image.content}}" style="width: 100%; height: 350px; display: block;" />
+                <img src="data:image/png;base64,{{image.content}}"
+                    style="width: 100%; height: 350px; display: block;" />
             </ng-template>
             <ng-template pTemplate="thumbnail" let-image>
                 <div class="p-grid p-nogutter p-justify-center">
-                    <img src="data:image/png;base64,{{image.content}}" style="width: 50px; height:50px; display: block;" />
+                    <img src="data:image/png;base64,{{image.content}}"
+                        style=" height:50px; display: block;" />
                 </div>
             </ng-template>
         </p-galleria>
     </div>
+
Index: trip-planner-front/src/app/location/location-details/location-details.component.ts
===================================================================
--- trip-planner-front/src/app/location/location-details/location-details.component.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/location/location-details/location-details.component.ts	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -1,3 +1,3 @@
-import { Component, OnInit , ViewEncapsulation} from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Images } from 'src/app/_models/images';
@@ -16,14 +16,14 @@
   locationDetails: Location;
   images: Images[];
-  responsiveOptions;
 
-  constructor(private route: ActivatedRoute, private router: Router, private locationService : LocationService,
-              private imagesService : ImagesService) {
+  constructor(private route: ActivatedRoute, private router: Router, private locationService: LocationService,
+    private imagesService: ImagesService) {
     this.locationId = 1;
     this.locationDetails = new Location();
     this.images = [];
+  }
 
-    this.responsiveOptions = [
-      {
+  responsiveOptions:any[] = [
+    {
         breakpoint: '1024px',
         numVisible: 5
@@ -37,27 +37,24 @@
         numVisible: 1
     }
-  ];
-   }
-
-
+];
   ngOnInit(): void {
     this.route.queryParams
-    .subscribe(params => {     
-      this.locationId = params.id; 
-    });
+      .subscribe(params => {
+        this.locationId = params.id;
+      });
 
     this.locationService.getLocation(this.locationId).subscribe(
       data => {
-          this.locationDetails = data;
+        this.locationDetails = data;
       }
     );
-    
+
     this.imagesService.getAllImagesForLocation(this.locationId).subscribe(
       image => {
-         this.images = image;
+        this.images = image;
       }
-   );
+    );
   }
 
-  
+
 }
Index: trip-planner-front/src/app/location/location.component.html
===================================================================
--- trip-planner-front/src/app/location/location.component.html	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/location/location.component.html	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -1,8 +1,8 @@
 <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>
 <h3>Here are all locations</h3>
-
-<table class="table" >
+<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning" label="Back to my Planners" (click)="onClickBackToMyPlanners()"></button>
+<table class="table">
   <thead>
     <tr>
@@ -17,7 +17,10 @@
       <td>{{location.id}}</td>
       <td>{{location.name}}</td>
-      <td><button mat-raised-button color="primary" (click)="openDialogSave(location.id)">Add to my planner</button></td>
-      <td><button mat-raised-button color="primary" (click)="onClickSeeDetails(location.id)">See details</button></td>
-    </tr>  
+      <td><button type="button" (click)="show(location)" pButton icon="pi pi-info-circle"
+          label="Add to my planner"></button></td>
+      <td><button type="button" color="primary" pButton icon="pi pi-info-circle"
+          (click)="onClickSeeDetails(location.id)" label="See details"></button></td>
+    </tr>
   </tbody>
 </table>
+
Index: trip-planner-front/src/app/location/location.component.ts
===================================================================
--- trip-planner-front/src/app/location/location.component.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/location/location.component.ts	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -1,17 +1,22 @@
-import { Component, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
+import { MessageService, PrimeNGConfig } from 'primeng/api';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { Planner } from '../_models/planner';
 import { LocationService } from '../_services/location.service';
 import { AddLocationToPlannerPanelComponent } from './add-location-to-planner-panel/add-location-to-planner-panel.component';
+import { Location } from '../_models/location';
+import { PlannerLocationDto } from '../_models/dto/plannerLocationDto';
+
 
 @Component({
   selector: 'app-location',
   templateUrl: './location.component.html',
-  styleUrls: ['./location.component.css']
+  styleUrls: ['./location.component.css'],
+  providers: [DialogService, MessageService]
 })
 export class LocationComponent implements OnInit {
 
-  form: FormGroup;
   categoryIds: string;
   cityId: number;
@@ -23,10 +28,11 @@
   regionId: number;
   locationId: number;
+  plannerLocationDto: PlannerLocationDto;
+  ref: DynamicDialogRef;
 
-  constructor(private fb: FormBuilder, private route: ActivatedRoute, private locationService: LocationService,
-    private router: Router, private dialog: MatDialog) {
-    this.form = fb.group({
-      title: fb.control('initial value', Validators.required)
-    });
+
+
+  constructor(private route: ActivatedRoute, private locationService: LocationService,
+    private router: Router, private dialogService: DialogService, private messageService: MessageService) {
     this.cityId = 1;
     this.companionId = 1;
@@ -36,4 +42,7 @@
     this.regionId = 1;
     this.locationId = 1;
+    this.ref = new DynamicDialogRef;
+    this.plannerLocationDto = new PlannerLocationDto();
+
   }
 
@@ -71,16 +80,41 @@
   }
 
-  openDialogSave(locationId){
-   // console.log(locationId);
-      const dialogRef = this.dialog.open(AddLocationToPlannerPanelComponent, {
-        width: '250px',
-        data: {}
-      });
-      this.router.navigate(['locations'], {queryParams: {regionId: this.regionId, companionId: this.companionId, lengthOfStay: this.lengthOfStay, categoryIds: this.categoryIds, locationId: locationId}});
-      
+  onClickSeeDetails(id: number) {
+    this.router.navigate(['location'], { queryParams: { id: id } });
   }
 
-  onClickSeeDetails(id: number){
-    this.router.navigate(['location'], {queryParams: {id: id}});
+  show(location: Location) {
+    this.ref = this.dialogService.open(AddLocationToPlannerPanelComponent, {
+      header: 'Choose a Planner',
+      width: '70%',
+      contentStyle: { "max-height": "500px", "overflow": "auto" },
+      baseZIndex: 10000
+    });
+
+    this.ref.onClose.subscribe((planner: Planner) => {
+
+      this.plannerLocationDto.locationId = location.id;
+      this.plannerLocationDto.plannerId = planner.id;
+      console.log("LOC ID: " + this.plannerLocationDto.locationId);
+      console.log("PLANNER ID: " + this.plannerLocationDto.plannerId);
+      this.locationService.postLocationToPlanner(this.plannerLocationDto).subscribe(
+        data => {
+          console.log(data);
+        }
+      );
+      if (planner) {
+        this.messageService.add({ severity: 'success', summary: 'Location ' + location.name +  ' has been added to planner: ' , detail: planner.name });
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.ref) {
+      this.ref.close();
+    }
+  }
+
+  onClickBackToMyPlanners(){
+    this.router.navigate(['planners']);
   }
 }
Index: trip-planner-front/src/app/locations-form/locations-form.component.ts
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/locations-form/locations-form.component.ts	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -1,3 +1,3 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl } from '@angular/forms';
 import { map, startWith, switchMap } from 'rxjs/operators';
@@ -13,6 +13,5 @@
 import { Region } from '../_models/region';
 import { RegionService } from '../_services/region.service';
-import { ActivatedRoute, Params, Router } from '@angular/router';
-import { Location } from '../_models/location';
+import { ActivatedRoute, Router } from '@angular/router';
 
 
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 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -42,8 +42,7 @@
         </div>
     </div>
-    <button mat-raised-button color="primary" >
-        <mat-icon>edit</mat-icon> Save
-      </button>
+    <button pButton pRipplelabel label="Save" class="p-button-help"></button>
+    <button pButton pRipple label="Back" class="p-button-info" (click)="onClickBack()" [style]="{'margin-left': '.5em'}"></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 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -77,3 +77,7 @@
   }
 
+  onClickBack(){
+    console.log("promena");
+    this.router.navigate(['planners']);
+  }
 }
Index: trip-planner-front/src/app/planner/planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/planner.component.html	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/planner/planner.component.html	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -1,22 +1,24 @@
 <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" >
-  <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 class="mt-auto">
-          <button mat-raised-button color="primary" (click)="onClickEditPlannerGet(planner.id)">
-            <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>
+<button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></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'}"></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 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/planner/planner.component.ts	(revision e29cc2ea91f8c99a4329f6d20188305dfd752279)
@@ -2,9 +2,10 @@
 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';
 import { Router } from '@angular/router';
 import { PlannerDto } from '../_models/dto/plannerDto';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { PrimeNGConfig } from 'primeng/api';
 
 
@@ -19,24 +20,21 @@
   plannerDto: PlannerDto;
   editForm: FormGroup;
+  ref: DynamicDialogRef;
 
 
-
-  constructor(private plannerService: PlannerService, private dialog: MatDialog, private router: Router,
-    private fb : FormBuilder) { 
+  constructor(private plannerService: PlannerService, private router: Router,
+    private fb: FormBuilder, private dialogService: DialogService, private primengConfig: PrimeNGConfig) {
     this.planners = [];
     this.plannerDto = new PlannerDto();
     this.editForm = fb.group({
       title: fb.control('initial value', Validators.required)
-  });
-  };
- 
-  openDialog(): void {
-    const dialogRef = this.dialog.open(CreateInitialPlannerComponent, {
-      width: '250px',
-      data: {}
     });
+    this.ref = new DynamicDialogRef;   
   }
-  
+
   ngOnInit(): void {
+
+    this.primengConfig.ripple = true;
+
     this.plannerService.getAllPlanners().subscribe(
       data => {
@@ -45,15 +43,21 @@
     );
   }
-  
-  onClickEditPlannerGet(id: number){
+
+  onClickEditPlannerGet(id: number) {
     console.log(id);
-        this.plannerService.getPlannerById(id).subscribe(
-            data => {          
-              this.router.navigate(['edit/planner/', 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
+    });
+  }
 }
