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
+    });
+  }
 }
