diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css
index e69de29..1922e7f 100644
--- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css
+++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css
@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}
diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
index aa86f80..709df9b 100644
--- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
@@ -2,9 +2,22 @@
   list-of-dzs works!
 </p>
 
-<table>
+<!-- <table>
   <tr *ngFor="let dropZone of this.listOfDropZones; index as i;">
     <td>{{ dropZone.id }}</td>
     <td>{{ dropZone.name }}</td>
   </tr>
+</table> -->
+
+<table mat-table [dataSource]="listOfDropZones">
+  <ng-container matColumnDef="id">
+    <th mat-header-cell *matHeaderCellDef> ID </th>
+    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
 </table>
+<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
index e0d2fe5..dfe7739 100644
--- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
+++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit, Injectable } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+
 import { DropZoneResp } from '../../models/dropzone';
 import { ServiceApi } from '../../services/serviceApi';
 import { ServiceComm } from '../../services/serviceComm';