Index: Farmatiko/ClientApp/package-lock.json
===================================================================
--- Farmatiko/ClientApp/package-lock.json	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/package-lock.json	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -2637,4 +2637,13 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "angular-rename": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/angular-rename/-/angular-rename-1.0.7.tgz",
+      "integrity": "sha512-exQd1ASkjHENW+b3dfF90Vsik4GQdiaGxhUKx8/EHPcWOeGDDSCHslWxcehYgQb7YfOe47Z4f22PBIIvldesxg==",
+      "requires": {
+        "fs": "0.0.1-security",
+        "path": "^0.12.7"
+      }
+    },
     "ansi-colors": {
       "version": "3.2.4",
@@ -4101,4 +4110,9 @@
         }
       }
+    },
+    "countup.js": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.0.6.tgz",
+      "integrity": "sha512-pcOaDNjW8dz3V5hCZTIwQpRDGm6tdxz0BRbcKEgCAr+j6jbJcdDdnumr4DpCSjhih7s1m/cWYZNC5MuFeSflFA=="
     },
     "coverage-istanbul-loader": {
@@ -5556,4 +5570,9 @@
       }
     },
+    "fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ="
+    },
     "fs-extra": {
       "version": "7.0.1",
@@ -8042,4 +8061,13 @@
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
       "dev": true
+    },
+    "ngx-countup": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/ngx-countup/-/ngx-countup-7.3.1.tgz",
+      "integrity": "sha512-+nw3Axg/5R/09hjG1uOyOItdIxAxv8V1GNz0oR8MlB27tB5sH9aknCUPJiEfdPAGSCfMfG7nsURlz4WAoIDrhA==",
+      "requires": {
+        "countup.js": "^2.0.5",
+        "tslib": "^1.9.0"
+      }
     },
     "nice-try": {
@@ -8977,4 +9005,28 @@
       "dev": true
     },
+    "path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
+      "requires": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        },
+        "util": {
+          "version": "0.10.4",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+          "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        }
+      }
+    },
     "path-browserify": {
       "version": "0.0.1",
@@ -9262,6 +9314,5 @@
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
Index: Farmatiko/ClientApp/package.json
===================================================================
--- Farmatiko/ClientApp/package.json	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/package.json	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -25,4 +25,5 @@
     "@angular/router": "10.0.4",
     "@nguniversal/module-map-ngfactory-loader": "8.1.1",
+    "angular-rename": "^1.0.7",
     "aspnet-prerendering": "^3.0.1",
     "big-integer": "^1.6.48",
@@ -30,4 +31,5 @@
     "core-js": "^3.3.3",
     "jquery": "3.4.1",
+    "ngx-countup": "^7.3.1",
     "oidc-client": "^1.9.1",
     "popper.js": "^1.16.0",
Index: Farmatiko/ClientApp/src/app/admin/admin.component.html
===================================================================
--- Farmatiko/ClientApp/src/app/admin/admin.component.html	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/admin/admin.component.html	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -18,5 +18,5 @@
     </nav>
 </header>
-<mat-tab-group>
+<mat-tab-group mat-stretch-tabs>
       <mat-tab label="Claiming requests"> 
         <div class="wrapper">
Index: Farmatiko/ClientApp/src/app/counter/counter.component.css
===================================================================
--- Farmatiko/ClientApp/src/app/counter/counter.component.css	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/counter/counter.component.css	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -1,13 +1,29 @@
 .wrapper {
-  display: flex;
-  justify-content: space-around;
-  padding-top: 50px;
+    display: flex;
+    flex-direction: column;
+    max-height: 500px;
+    min-width: 300px;
 }
-
-nav {
-  float: right;
+  
+.mat-table {
+    overflow: auto;
+    max-height: 500px;
+}
+  
+.header {
+    min-height: 64px;
+    padding: 8px 24px 0;
+}
+  
+.mat-form-field {
+    font-size: 14px;
+    width: 100%;
 }
 
 table {
-  margin-top: 25px;
+  width: 100%;
 }
+
+h2 {
+    padding: 1em 0;
+}
Index: Farmatiko/ClientApp/src/app/counter/counter.component.html
===================================================================
--- Farmatiko/ClientApp/src/app/counter/counter.component.html	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/counter/counter.component.html	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -1,99 +1,95 @@
+
 <app-nav-menu></app-nav-menu>
 
-<div class="wrapper">
-    <div>
+<mat-tab-group mat-stretch-tabs>
+  <mat-tab class="tab" label="Здравствени установи"> 
+  <div class="wrapper">
+    <div class="header">
     <h2>Здравствени установи</h2>
-    <input type="text" class="form-control" name="lek" placeholder="Пронајди лек">
-    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="facilities">
-        <thead>
-            <tr>
-            <th>Име</th>
-            <th>Општина</th>
-            <th>Адреса</th>
-            <th>Тип на установа</th>
-            <th>Е-пошта</th>
-            <th>Телефон</th>
-            </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let facility of facilities">
-            <td>{{ facility.Name }}</td>
-            <!--
-  <td>{{ facility.Municipality }}</td>
-  <td>{{ facility.Address }}</td>
-  <td>{{ facility.Type }}</td>
-  <td>{{ facility.Email }}</td>
-  <td>{{ facility.Phone }}</td>-->
-            <td>facility.Municipality</td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td>
-             
-            </td>
+  <mat-form-field>
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди установа">
+  </mat-form-field>
+    </div>
+    <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
+      <ng-container matColumnDef="Име">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
+        <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="Општина">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
+        <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
+      </ng-container>
+    
+      <ng-container matColumnDef="Адреса">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
+        <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
+      </ng-container>
+      
+      <ng-container matColumnDef="Тип">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
+        <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="Е-пошта">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
+        <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
+      </ng-container>
+    
+      <ng-container matColumnDef="Телефон">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
+        <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
+      </ng-container>
 
-          </tr>
-        </tbody>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <nav aria-label="Page navigation example">
-        <ul class="pagination">
-          <li class="page-item">
-            <a class="page-link" href="#" aria-label="Previous">
-              <span aria-hidden="true">&laquo;</span>
-              <span class="sr-only">Previous</span>
-            </a>
-          </li>
-          <li class="page-item"><a class="page-link" href="#">1</a></li>
-          <li class="page-item"><a class="page-link" href="#">2</a></li>
-          <li class="page-item"><a class="page-link" href="#">3</a></li>
-          <li class="page-item">
-            <a class="page-link" href="#" aria-label="Next">
-              <span aria-hidden="true">&raquo;</span>
-              <span class="sr-only">Next</span>
-            </a>
-          </li>
-        </ul>
-      </nav>
+    <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
+  </div>
+  </mat-tab>
+  <mat-tab class="tab" label="Здравствени работници"> 
+  <div class="wrapper">
+    <div class="header">
+    <h2>Здравствени работници</h2>
+    <mat-form-field>
+      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди работник">
+    </mat-form-field>
     </div>
-    <div>
-    <h2>Здравствени работници</h2>
-    <input type="text" class="form-control" name="apteka" placeholder="Пронајди аптека">
-    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
-        <thead>
-        <tr>
-            <th>Placeholder1</th>
-            <th>Placeholder2</th>
-            <th>Placeholder3</th>
-            <th>Placeholder4</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="">
-            <td>data1</td>
-            <td>data2</td>
-            <td>data3</td>
-            <td>data4</td>
-        </tr>
-        </tbody>
-    </table>
-    <nav aria-label="Page navigation example">
-        <ul class="pagination">
-          <li class="page-item">
-            <a class="page-link" href="#" aria-label="Previous">
-              <span aria-hidden="true">&laquo;</span>
-              <span class="sr-only">Previous</span>
-            </a>
-          </li>
-          <li class="page-item"><a class="page-link" href="#">1</a></li>
-          <li class="page-item"><a class="page-link" href="#">2</a></li>
-          <li class="page-item"><a class="page-link" href="#">3</a></li>
-          <li class="page-item">
-            <a class="page-link" href="#" aria-label="Next">
-              <span aria-hidden="true">&raquo;</span>
-              <span class="sr-only">Next</span>
-            </a>
-          </li>
-        </ul>
-      </nav>
+      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
+        <ng-container matColumnDef="Име">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="Општина">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
+        </ng-container>
+      
+        <ng-container matColumnDef="Адреса">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
+        </ng-container>
+        
+        <ng-container matColumnDef="Тип">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="Е-пошта">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
+        </ng-container>
+      
+        <ng-container matColumnDef="Телефон">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
+        </ng-container>
+  
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
     </div>
-</div>
+    </mat-tab>
+  </mat-tab-group>
Index: Farmatiko/ClientApp/src/app/counter/counter.component.ts
===================================================================
--- Farmatiko/ClientApp/src/app/counter/counter.component.ts	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/counter/counter.component.ts	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -1,5 +1,9 @@
-import { Component, Inject } from '@angular/core';
+import { Component, OnInit, ViewChild, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { HealthFacilities } from '../models/HealthFacilities';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+
 @Component({
   selector: 'app-counter-component',
@@ -7,6 +11,11 @@
   styleUrls: ['./counter.component.css']
 })
-export class CounterComponent {
+export class CounterComponent implements OnInit {
   public facilities: HealthFacilities[];
+  displayedColumns = ['Име','Општина','Адреса', 'Тип', 'Е-пошта', 'Телефон'];
+  dataSource = new MatTableDataSource<HealthFacilities>();
+
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
 
   constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
@@ -14,14 +23,19 @@
       this.facilities = result;
       console.log(this.facilities);
+      this.dataSource = new MatTableDataSource<HealthFacilities>(this.facilities);
     }, error => console.error(error));
   }
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim();
+    filterValue = filterValue.toLowerCase();
+    this.dataSource.filter = filterValue;
+  }
 }
-/*interface healthFacilities {
-  Name: string;
-  Municipality: string;
-  Address: string;
-  Type: string;
-  Email: string;
-  Phone: string;
-}*/
-
Index: Farmatiko/ClientApp/src/app/dashboard/dashboard.component.css
===================================================================
--- Farmatiko/ClientApp/src/app/dashboard/dashboard.component.css	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/dashboard/dashboard.component.css	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -4,13 +4,29 @@
 .wrapper {
     display: flex;
-    justify-content: space-around;
-    padding-top: 50px;
+    flex-direction: column;
+    max-height: 500px;
+    min-width: 300px;
 }
   
-.wrapper nav {
-    float: right;
+.mat-table {
+    overflow: auto;
+    max-height: 500px;
 }
   
+.header {
+    min-height: 64px;
+    padding: 8px 24px 0;
+}
+  
+.mat-form-field {
+    font-size: 14px;
+    width: 100%;
+}
+
 table {
-    margin-top: 25px;
+  width: 100%;
 }
+
+h2 {
+    padding: 1em 0;
+}
Index: Farmatiko/ClientApp/src/app/dashboard/dashboard.component.html
===================================================================
--- Farmatiko/ClientApp/src/app/dashboard/dashboard.component.html	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/dashboard/dashboard.component.html	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -2,5 +2,5 @@
     <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
       <div class="container">
-        <a class="navbar-brand" [routerLink]="['/']"><img src="../../assets/logo.png"></a>
+        <a class="navbar-brand" [routerLink]="['/dashboard']"><img src="../../assets/logo.png"></a>
         <button class="navbar-toggler"
                 type="button"
@@ -15,95 +15,20 @@
           </ul>
         </div>
+        
+        <button mat-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
+        <mat-menu #menu="matMenu">
+          <button mat-menu-item (click)="openDialog()"><mat-icon>person_add</mat-icon>View homepage</button>
+          <button mat-menu-item (click)="test()"><mat-icon> directions</mat-icon>Go to homepage</button>
+        </mat-menu>
       </div>
     </nav>
 </header>
-<main>
-    <div class="wrapper">
-    <div>
-      <h2>Мои аптеки</h2>
-      <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
-        <thead>
-          <tr>
-            <th>Placeholder1</th>
-            <th>Placeholder2</th>
-            <th>Placeholder3</th>
-            <th>Placeholder4</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="">
-            <td>data1</td>
-            <td>data2</td>
-            <td>data3</td>
-            <td>data4</td>
-          </tr>
-        </tbody>
-      </table>
-      <nav aria-label="Page navigation example">
-        <ul class="pagination">
-          <li class="page-item">
-            <a class="page-link" href="#" aria-label="Previous">
-              <span aria-hidden="true">&laquo;</span>
-              <span class="sr-only">Previous</span>
-            </a>
-          </li>
-          <li class="page-item"><a class="page-link" href="#">1</a></li>
-          <li class="page-item"><a class="page-link" href="#">2</a></li>
-          <li class="page-item"><a class="page-link" href="#">3</a></li>
-          <li class="page-item">
-            <a class="page-link" href="#" aria-label="Next">
-              <span aria-hidden="true">&raquo;</span>
-              <span class="sr-only">Next</span>
-            </a>
-          </li>
-        </ul>
-      </nav>
+
+<mat-tab-group mat-stretch-tabs>
+  <mat-tab class="tab" label="Мои аптеки"> 
+  <div class="wrapper">
+    <div class="header">
+    <h2>Мои аптеки</h2>
     </div>
-    <div>
-      <h2>Сите аптеки</h2>
-      <input type="text" class="form-control" name="apteka" placeholder="Пронајди аптека">
-      <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
-        <thead>
-          <tr>
-            <th>Placeholder1</th>
-            <th>Placeholder2</th>
-            <th>Placeholder3</th>
-            <th>Placeholder4</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="">
-            <td>data1</td>
-            <td>data2</td>
-            <td>data3</td>
-            <td>data4</td>
-          </tr>
-        </tbody>
-      </table>
-      <nav aria-label="Page navigation example">
-        <ul class="pagination">
-          <li class="page-item">
-            <a class="page-link" href="#" aria-label="Previous">
-              <span aria-hidden="true">&laquo;</span>
-              <span class="sr-only">Previous</span>
-            </a>
-          </li>
-          <li class="page-item"><a class="page-link" href="#">1</a></li>
-          <li class="page-item"><a class="page-link" href="#">2</a></li>
-          <li class="page-item"><a class="page-link" href="#">3</a></li>
-          <li class="page-item">
-            <a class="page-link" href="#" aria-label="Next">
-              <span aria-hidden="true">&raquo;</span>
-              <span class="sr-only">Next</span>
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-
-  <div>
-    <h2>Достапни лекови</h2>
-    <input type="text" class="form-control" name="apteka" placeholder="Пронајди лек">
     <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
       <thead>
@@ -116,5 +41,5 @@
       </thead>
       <tbody>
-        <tr *ngFor="">
+        <tr *ngFor="let facility of facilities">
           <td>data1</td>
           <td>data2</td>
@@ -124,23 +49,94 @@
       </tbody>
     </table>
-    <nav aria-label="Page navigation example">
-      <ul class="pagination">
-        <li class="page-item">
-          <a class="page-link" href="#" aria-label="Previous">
-            <span aria-hidden="true">&laquo;</span>
-            <span class="sr-only">Previous</span>
-          </a>
-        </li>
-        <li class="page-item"><a class="page-link" href="#">1</a></li>
-        <li class="page-item"><a class="page-link" href="#">2</a></li>
-        <li class="page-item"><a class="page-link" href="#">3</a></li>
-        <li class="page-item">
-          <a class="page-link" href="#" aria-label="Next">
-            <span aria-hidden="true">&raquo;</span>
-            <span class="sr-only">Next</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
   </div>
-</main>
+  </mat-tab>
+  <mat-tab class="tab" label="Сите аптеки"> 
+  <div class="wrapper">
+    <div class="header">
+    <h2>Сите аптеки</h2>
+    <mat-form-field>
+      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди аптека">
+    </mat-form-field>
+    </div>
+      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
+        <ng-container matColumnDef="Име">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="Општина">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
+        </ng-container>
+      
+        <ng-container matColumnDef="Адреса">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
+        </ng-container>
+        
+        <ng-container matColumnDef="Тип">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="Е-пошта">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
+        </ng-container>
+      
+        <ng-container matColumnDef="Телефон">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
+        </ng-container>
+  
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
+    </div>
+    </mat-tab>
+  </mat-tab-group>
+
+<div class="wrapper">
+    <div class="header">
+    <h2>Достапни лекови</h2>
+    <mat-form-field>
+      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди лек">
+    </mat-form-field>
+    </div>
+      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
+        <ng-container matColumnDef="Име">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="Општина">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
+        </ng-container>
+      
+        <ng-container matColumnDef="Адреса">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
+        </ng-container>
+        
+        <ng-container matColumnDef="Тип">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="Е-пошта">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
+        </ng-container>
+      
+        <ng-container matColumnDef="Телефон">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
+        </ng-container>
+  
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
+</div>
Index: Farmatiko/ClientApp/src/app/dashboard/dashboard.component.ts
===================================================================
--- Farmatiko/ClientApp/src/app/dashboard/dashboard.component.ts	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/dashboard/dashboard.component.ts	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -1,7 +1,13 @@
-import { Component, OnInit, Input, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, Inject, Output, EventEmitter } from '@angular/core';
 import { Pharmacy } from '../models/Pharmacy';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
+import { HealthFacilities } from '../models/HealthFacilities';
+import { HttpClient } from '@angular/common/http';;
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material/snack-bar';
+import { Router, RouterModule } from '@angular/router';
+import { HomeComponent } from '../home/home.component';
 
 @Component({
@@ -11,7 +17,53 @@
 })
 export class DashboardComponent implements OnInit {
+  public facilities: HealthFacilities[];
+  displayedColumns = ['Име','Општина','Адреса', 'Тип', 'Е-пошта', 'Телефон'];
+  dataSource = new MatTableDataSource<HealthFacilities>();
 
-  constructor() { }
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
 
-  ngOnInit(): void { }
+  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string, private dialog: MatDialog, private _snackBar: MatSnackBar, private router: Router) {
+    http.get<HealthFacilities[]>(baseUrl + 'HealthFacilities/Get?').subscribe(result => {
+      this.facilities = result;
+      console.log(this.facilities);
+      this.dataSource = new MatTableDataSource<HealthFacilities>(this.facilities);
+    }, error => console.error(error));
+  }
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim();
+    filterValue = filterValue.toLowerCase();
+    this.dataSource.filter = filterValue;
+  }
+  test(): void {
+    console.log('Snackbar works!');
+    this.openSnackBar("Are you sure?", "Yes").onAction().subscribe(() => {
+      this.router.navigate(['/']);
+    });
+  }
+
+  openDialog():void {
+    let dialogRef = this.dialog.open(HomeComponent, {
+      width: '70%'
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      if(result) {
+        this.openSnackBar("Success", "OK");
+      }
+    });
+  }
+
+  openSnackBar(message: string, action: string) : MatSnackBarRef<SimpleSnackBar> {
+    return this._snackBar.open(message, action, {
+      duration: 10000,
+    });
+  }
 }
Index: Farmatiko/ClientApp/src/app/fetch-data/fetch-data.component.ts
===================================================================
--- Farmatiko/ClientApp/src/app/fetch-data/fetch-data.component.ts	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/fetch-data/fetch-data.component.ts	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -12,4 +12,5 @@
     http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result => {
       this.forecasts = result;
+      console.log(this.forecasts);
     }, error => console.error(error));
   }
Index: Farmatiko/ClientApp/src/app/home/home.component.css
===================================================================
--- Farmatiko/ClientApp/src/app/home/home.component.css	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/home/home.component.css	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -1,13 +1,29 @@
 .wrapper {
   display: flex;
-  justify-content: space-around;
-  padding-top: 50px;
+  flex-direction: column;
+  max-height: 500px;
+  min-width: 300px;
 }
 
-nav {
-  float: right;
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
+
+.header {
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
 }
 
 table {
-  margin-top: 25px;
+width: 100%;
 }
+
+h2 {
+  padding: 1em 0;
+}
Index: Farmatiko/ClientApp/src/app/home/home.component.html
===================================================================
--- Farmatiko/ClientApp/src/app/home/home.component.html	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/home/home.component.html	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -1,86 +1,94 @@
 <app-nav-menu></app-nav-menu>
 
-<div class="wrapper">
-  <div>
+<mat-tab-group mat-stretch-tabs>
+  <mat-tab class="tab" label="Лекови"> 
+  <div class="wrapper">
+    <div class="header">
     <h2>Лекови</h2>
-    <input type="text" class="form-control" name="lek" placeholder="Пронајди лек">
-    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
-      <thead>
-        <tr>
-          <th>Placeholder1</th>
-          <th>Placeholder2</th>
-          <th>Placeholder3</th>
-          <th>Placeholder4</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="">
-          <td>data1</td>
-          <td>data2</td>
-          <td>data3</td>
-          <td>data4</td>
-        </tr>
-      </tbody>
+  <mat-form-field>
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди лек">
+  </mat-form-field>
+    </div>
+    <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
+      <ng-container matColumnDef="Име">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
+        <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="Општина">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
+        <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
+      </ng-container>
+    
+      <ng-container matColumnDef="Адреса">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
+        <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
+      </ng-container>
+      
+      <ng-container matColumnDef="Тип">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
+        <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="Е-пошта">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
+        <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
+      </ng-container>
+    
+      <ng-container matColumnDef="Телефон">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
+        <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
+      </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <nav aria-label="Page navigation example">
-      <ul class="pagination">
-        <li class="page-item">
-          <a class="page-link" href="#" aria-label="Previous">
-            <span aria-hidden="true">&laquo;</span>
-            <span class="sr-only">Previous</span>
-          </a>
-        </li>
-        <li class="page-item"><a class="page-link" href="#">1</a></li>
-        <li class="page-item"><a class="page-link" href="#">2</a></li>
-        <li class="page-item"><a class="page-link" href="#">3</a></li>
-        <li class="page-item">
-          <a class="page-link" href="#" aria-label="Next">
-            <span aria-hidden="true">&raquo;</span>
-            <span class="sr-only">Next</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
+    <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
   </div>
-  <div>
+  </mat-tab>
+  <mat-tab class="tab" label="Аптеки"> 
+  <div class="wrapper">
+    <div class="header">
     <h2>Аптеки</h2>
-    <input type="text" class="form-control" name="apteka" placeholder="Пронајди аптека">
-    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
-      <thead>
-        <tr>
-          <th>Placeholder1</th>
-          <th>Placeholder2</th>
-          <th>Placeholder3</th>
-          <th>Placeholder4</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="">
-          <td>data1</td>
-          <td>data2</td>
-          <td>data3</td>
-          <td>data4</td>
-        </tr>
-      </tbody>
-    </table>
-    <nav aria-label="Page navigation example">
-      <ul class="pagination">
-        <li class="page-item">
-          <a class="page-link" href="#" aria-label="Previous">
-            <span aria-hidden="true">&laquo;</span>
-            <span class="sr-only">Previous</span>
-          </a>
-        </li>
-        <li class="page-item"><a class="page-link" href="#">1</a></li>
-        <li class="page-item"><a class="page-link" href="#">2</a></li>
-        <li class="page-item"><a class="page-link" href="#">3</a></li>
-        <li class="page-item">
-          <a class="page-link" href="#" aria-label="Next">
-            <span aria-hidden="true">&raquo;</span>
-            <span class="sr-only">Next</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
+    <mat-form-field>
+      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди аптека">
+    </mat-form-field>
+    </div>
+      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
+        <ng-container matColumnDef="Име">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="Општина">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
+        </ng-container>
+      
+        <ng-container matColumnDef="Адреса">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
+        </ng-container>
+        
+        <ng-container matColumnDef="Тип">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="Е-пошта">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
+        </ng-container>
+      
+        <ng-container matColumnDef="Телефон">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
+          <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
+        </ng-container>
+  
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
+    </div>
+    </mat-tab>
+  </mat-tab-group>
Index: Farmatiko/ClientApp/src/app/home/home.component.ts
===================================================================
--- Farmatiko/ClientApp/src/app/home/home.component.ts	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/home/home.component.ts	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -1,3 +1,9 @@
-import { Component, OnInit, Input, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { HealthFacilities } from '../models/HealthFacilities';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+
 
 @Component({
@@ -6,4 +12,31 @@
   styleUrls: ['./home.component.css']
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
+  public facilities: HealthFacilities[];
+  displayedColumns = ['Име','Општина','Адреса', 'Тип', 'Е-пошта', 'Телефон'];
+  dataSource = new MatTableDataSource<HealthFacilities>();
+
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
+    http.get<HealthFacilities[]>(baseUrl + 'HealthFacilities/Get?').subscribe(result => {
+      this.facilities = result;
+      console.log(this.facilities);
+      this.dataSource = new MatTableDataSource<HealthFacilities>(this.facilities);
+    }, error => console.error(error));
+  }
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim();
+    filterValue = filterValue.toLowerCase();
+    this.dataSource.filter = filterValue;
+  }
 }
Index: Farmatiko/ClientApp/src/app/korona/korona.component.css
===================================================================
--- Farmatiko/ClientApp/src/app/korona/korona.component.css	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/korona/korona.component.css	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -27,2 +27,6 @@
   color: #4ad1e5;
 }
+
+.pads {
+  padding: 1em 0;
+}
Index: Farmatiko/ClientApp/src/app/korona/korona.component.html
===================================================================
--- Farmatiko/ClientApp/src/app/korona/korona.component.html	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/korona/korona.component.html	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -12,10 +12,10 @@
 
   </div>
-  <div class="row text-center">
+  <div class="row text-center pads">
     <div class="col">
       <div class="counter">
         <i class="fa fa-code fa-2x">0</i>
         <h2 class="timer count-title count-number" data-to="100" data-speed="1500"></h2>
-        <p class="count-text ">Placeholder1</p>
+        <p class="count-text ">Вкупно случаи во земјата</p>
       </div>
     </div>
@@ -24,5 +24,5 @@
         <i class="fa fa-coffee fa-2x">0</i>
         <h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2>
-        <p class="count-text ">Placeholder2</p>
+        <p class="count-text ">Активни случаи во земјата</p>
       </div>
     </div>
@@ -31,5 +31,5 @@
         <i class="fa fa-lightbulb-o fa-2x">0</i>
         <h2 class="timer count-title count-number" data-to="11900" data-speed="1500"></h2>
-        <p class="count-text ">Placeholder3</p>
+        <p class="count-text ">Смртни случаи во земјата</p>
       </div>
     </div>
@@ -38,7 +38,30 @@
         <i class="fa fa-bug fa-2x">0</i>
         <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
-        <p class="count-text ">Placeholder4</p>
+        <p class="count-text ">Нови случаи во земјата</p>
       </div>
     </div>
   </div>
+  <div class="row text-center pads">
+    <div class="col">
+      <div class="counter">
+        <i class="fa fa-bug fa-2x">0</i>
+        <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
+        <p class="count-text ">Вкупно случаи глобално</p>
+      </div>
+    </div>
+    <div class="col">
+      <div class="counter">
+        <i class="fa fa-bug fa-2x">0</i>
+        <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
+        <p class="count-text ">Активни случаи глобално</p>
+      </div>
+    </div>
+    <div class="col">
+      <div class="counter">
+        <i class="fa fa-bug fa-2x">0</i>
+        <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
+        <p class="count-text ">Смртни случаи глобално</p>
+      </div>
+    </div>
+    </div>
 </div>
Index: Farmatiko/ClientApp/src/app/login/login.component.css
===================================================================
--- Farmatiko/ClientApp/src/app/login/login.component.css	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/login/login.component.css	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -29,4 +29,6 @@
     display: flex;
     justify-content: center;
+    text-align: center;
+    align-items: center;
 }
 
Index: Farmatiko/ClientApp/src/app/models/HealthFacilities.ts
===================================================================
--- Farmatiko/ClientApp/src/app/models/HealthFacilities.ts	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/models/HealthFacilities.ts	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -1,8 +1,11 @@
 export class HealthFacilities {
-  Name: string;
-  Municipality: string;
-  Address: string;
-  Type: string;
-  Email: string;
-  Phone: string;
+  address: string;
+  createdOn: string;
+  deletedOn: string;
+  email: string;
+  id: number;
+  municipality: string;
+  name: string;
+  phone: string;
+  type: string;
 }
Index: Farmatiko/ClientApp/src/app/models/Pandemic.ts
===================================================================
--- Farmatiko/ClientApp/src/app/models/Pandemic.ts	(revision d2e69be8d63167e8e231babb28ed50703975a234)
+++ Farmatiko/ClientApp/src/app/models/Pandemic.ts	(revision ef1219aba40504a9fc62968af4fd3c7d2f7f2dfb)
@@ -1,10 +1,10 @@
 export class Pandemic {
   Name: string;
-  TotalMK: BigInteger;
-  ActiveMK: BigInteger;
-  DeathsMK: BigInteger;
-  NewMK: BigInteger;
-  TotalGlobal: BigInteger;
-  DeathsGlobal: BigInteger;
-  ActiveGlobal: BigInteger;
+  TotalMK: number;
+  ActiveMK: number;
+  DeathsMK: number;
+  NewMK: number;
+  TotalGlobal: number;
+  DeathsGlobal: number;
+  ActiveGlobal: number;
 }
