diff --git a/webapp/src/app/core/components/header/header.component.html b/webapp/src/app/core/components/header/header.component.html
index ed4a3234f060029999446db9c9ca05c7844bfc2f..3f38b1a43d3efcda622ead7fe1c3f6062b6d440b 100644
--- a/webapp/src/app/core/components/header/header.component.html
+++ b/webapp/src/app/core/components/header/header.component.html
@@ -3,8 +3,8 @@
       <a class="navbar-item" routerLink="/accueil">
         <img class="logo-smart-data-grand-lyon" src="./assets/img/logo-smart-data-grand-lyon.png">
       </a>
-    <div class="navbar-item">
-      <img class="logo-smart-data-grand-lyon" src="./assets/img/logo-grand-lyon.png">
+    <div class="navbar-item is-hidden-touch">
+      <img class="logo-smart-data-grand-lyon" width="112" height="28" src="./assets/img/logo-grand-lyon.png">
     </div>
     <div role="button" class="navbar-burger" aria-label="menu" (click)="burgerActive = !burgerActive">
         <span aria-hidden="true"></span>
diff --git a/webapp/src/app/core/components/header/header.component.scss b/webapp/src/app/core/components/header/header.component.scss
index 5c6ea7d8785308229d2f2ee2da52f71483e28e02..bf45465d44bf6f056d8f0f29c04b79371101b9b7 100644
--- a/webapp/src/app/core/components/header/header.component.scss
+++ b/webapp/src/app/core/components/header/header.component.scss
@@ -10,10 +10,10 @@
 .navbar {
   flex-wrap: wrap;
 }
-.navbar-item img {
-  max-height: 3rem;
-  margin: 0.5rem;
-}
+// .navbar-item img {
+//   max-height: 3rem;
+//   margin: 0.5rem;
+// }
 .navbar-brand {
   justify-content: space-between;
   background-color: #F3F5F7;
diff --git a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html
index b9025dad39f3e79391c84e83f10cbe25c10b5b28..842f6a85c16a224c37dc61a4cb46a4f7d6b331c3 100644
--- a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html
+++ b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html
@@ -1,6 +1,6 @@
 <div class="columns">
   <div class="column is-3 has-text-danger" i18n="@@global.resultsFound">
-    {{ metadata_total }} results found
+    {{ paginator.length }} results found
   </div>
   <div class="column is-9">
     <app-suggestion></app-suggestion>
@@ -9,105 +9,104 @@
 <div class="columns">
   <div class="column is-3">
     <div class="sort-container">
-        <app-sort></app-sort>
+      <app-sort></app-sort>
     </div>
     <div>
-    <app-filter-list></app-filter-list>
+      <app-filter-list></app-filter-list>
     </div>
   </div>
   <div class="column is-9">
-    <div class="columns" *ngFor="let dataset of datasetList">
-      <div class="column is-12">
-        <div class="card">
-          <div class="columns">
-            <div class="column is-9">
-              <header class="header">
-                <p class="card-header-title is-size-4">
-                  <a [routerLink]="[dataset.dataset_id]">{{ dataset.metadata.title }}</a>
-                </p>
+    <div *ngFor="let dataset of datasetList" class="card">
+      <div class="columns">
+        <div class="column is-9">
+          <header class="header">
+            <p class="card-header-title is-size-4">
+              <a [routerLink]="[dataset.dataset_id]">{{ dataset.metadata.title }}</a>
+            </p>
 
-                <p> 
-                  <span>Occurences trouvées: {{ dataset.metadata.total_documents}}</span>
-                  <br>
-                  <strong class="category has-text-warning is-size-6" *ngFor="let topic of dataset.metadata.topic_category">
-                    {{ topic }}
-                  </strong>
-                </p>
-              </header>
-              <div class="card-content">
-                <div class="content">
-                  <p class="block-with-text"
-                  [innerHTML]="dataset.highlights.highlightedAbstract != null ? dataset.highlights.highlightedAbstract : dataset.metadata.abstract"></p>
-                  <p class="protocol-list">
-                    <strong class="is-size-7">
-                      FORMATS:
-                    </strong>
-                    <span>{{ dataset.metadata.uri ? formatProtocols(dataset.metadata.uri) : '-' }}</span>
-                  </p>
-                  <p>
-                    <u i18n="@@global.keywords">Keywords :</u> {{ dataset.metadata.keyword ? dataset.metadata.keyword.join(', ') : '-'}}</p>
-                </div>
-              </div>
-            </div>
-            <div class="column is-3">
-                <div class="content">
-                <p *ngIf="dataset.metadata.contact && dataset.metadata.contact.length > 0">
-                  <span class="icon">
-                    <i class="material-icons">perm_identity</i>
-                  </span>
-                  {{ dataset.metadata.contact ? dataset.metadata.contact[0].organization : '-' }}
-                </p>
-                <p>
-                  <span class="icon">
-                    <i class="material-icons">copyright</i>
-                  </span>
-                  {{ dataset.metadata.use_limitation ? dataset.metadata.use_limitation[0] : '-' }}
-                </p>
-                <p>
-                  <span class="icon">
-                    <i class="material-icons">update</i>
-                  </span>
-                  {{ dataset.metadata.date_publication | date: 'dd MMMM yyyy' }}
-                </p>
-                <p>
-                  <span class="icon">
-                    <i class="material-icons">autorenew</i>
-                  </span>
-                  -
-                </p>
-                <p>
-                  <span class="icon">
-                    <i class="material-icons">visibility</i>
-                  </span>
-                  -
-                </p>
-              </div>
+            <p>
+              <span>Occurences trouvées: {{ dataset.metadata.total_documents}}</span>
+              <br>
+              <strong class="category has-text-warning is-size-6" *ngFor="let topic of dataset.metadata.topic_category">
+                {{ topic }}
+              </strong>
+            </p>
+          </header>
+          <div class="card-content">
+            <div class="content">
+              <p class="block-with-text" [innerHTML]="dataset.highlights.highlightedAbstract != null ? dataset.highlights.highlightedAbstract : dataset.metadata.abstract"></p>
+              <p class="protocol-list">
+                <strong class="is-size-7">
+                  FORMATS:
+                </strong>
+                <span>{{ dataset.metadata.uri ? formatProtocols(dataset.metadata.uri) : '-' }}</span>
+              </p>
+              <p>
+                <u i18n="@@global.keywords">Keywords :</u> {{ dataset.metadata.keyword ? dataset.metadata.keyword.join(', ') : '-'}}</p>
             </div>
           </div>
-          <div class="columns" *ngIf="dataset.highlights.metadata.length > 0 || dataset.highlights.data.length > 0"
-              style="padding-left: 1.5em; ">
-            <div class="column">
-                <div class="content">
-                <ng-container *ngIf="dataset.highlights.metadata.length > 0">
-                  <strong i18n>
-                    {dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in metadata
-                  </strong>
-                  <span class="item-found" *ngFor="let e of dataset.highlights.metadata" [innerHTML]="formatFoundItem(e)"></span>
-                </ng-container>
-                <ng-container *ngIf="dataset.highlights.data.length > 0">
-                  <strong i18n>
-                    {dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in data
-                  </strong>
-                  <span class="item-found" *ngFor="let e of dataset.highlights.data" [innerHTML]="formatFoundItem(e)"></span>
-                </ng-container>
-              </div>
-            </div>
+        </div>
+        <div class="column is-3">
+          <div class="content">
+            <p *ngIf="dataset.metadata.contact && dataset.metadata.contact.length > 0">
+              <span class="icon">
+                <i class="material-icons">perm_identity</i>
+              </span>
+              {{ dataset.metadata.contact ? dataset.metadata.contact[0].organization : '-' }}
+            </p>
+            <p>
+              <span class="icon">
+                <i class="material-icons">copyright</i>
+              </span>
+              {{ dataset.metadata.use_limitation ? dataset.metadata.use_limitation[0] : '-' }}
+            </p>
+            <p>
+              <span class="icon">
+                <i class="material-icons">update</i>
+              </span>
+              {{ dataset.metadata.date_publication | date: 'dd MMMM yyyy' }}
+            </p>
+            <p>
+              <span class="icon">
+                <i class="material-icons">autorenew</i>
+              </span>
+              -
+            </p>
+            <p>
+              <span class="icon">
+                <i class="material-icons">visibility</i>
+              </span>
+              -
+            </p>
           </div>
         </div>
       </div>
+      <div class="columns" *ngIf="dataset.highlights.metadata.length > 0 || dataset.highlights.data.length > 0" style="padding-left: 1.5em; ">
+        <div class="column">
+          <div class="content">
+            <ng-container *ngIf="dataset.highlights.metadata.length > 0">
+              <strong i18n>
+                {dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in metadata
+              </strong>
+              <span class="item-found" *ngFor="let e of dataset.highlights.metadata" [innerHTML]="formatFoundItem(e)"></span>
+            </ng-container>
+            <ng-container *ngIf="dataset.highlights.data.length > 0">
+              <strong i18n>
+                {dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in data
+              </strong>
+              <span class="item-found" *ngFor="let e of dataset.highlights.data" [innerHTML]="formatFoundItem(e)"></span>
+            </ng-container>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <app-paginator *ngIf="paginator.length > 0" [length]="paginator.length" [pageSize]="paginator.pageSize" [pageSizeOptions]="paginator.pageSizeOptions"
+          [pageIndex]="paginator.pageIndex" [pagesToShow]="5" [loading]="loading" [showFirstLastButtons]="true" (page)="changePagination($event)"
+          (pageSizeChanged)="changePageSize($event)">
+        </app-paginator>
+      </div>
     </div>
-    <mat-paginator color="primary" #paginator [length]="metadata_total" [pageSize]="paginator.pageSize" [pageIndex]="paginator.pageIndex"
-      [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="true" (page)="changePagination($event)">
-    </mat-paginator>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts
index 1bb61bcb461be154b24e46cb872a86f5778af361..204c1f4e6268078ef3e081449ad9dd64dbff88a8 100644
--- a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts
+++ b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts
@@ -4,6 +4,12 @@ import { Dataset, IMetadataUri } from '../../models';
 import { Subscription } from 'rxjs/Subscription';
 import { MatPaginator } from '@angular/material';
 
+interface PaginatorOptions {
+  pageIndex: number;
+  length: number;
+  pageSize: number;
+  pageSizeOptions: number[];
+}
 
 @Component({
   selector: 'app-metadata-list',
@@ -11,30 +17,31 @@ import { MatPaginator } from '@angular/material';
   styleUrls: ['./metadata-list.component.scss']
 })
 export class MetadataListComponent implements OnInit, OnDestroy {
-  @ViewChild('paginator') paginator: MatPaginator;
+  // @ViewChild('paginator') paginator: MatPaginator;
 
   datasetList: Dataset[];
   searchChangeSub: Subscription;
-  pageSizeOptions: number[];
-  metadata_total: number;
-  showProgressBar: boolean;
+  showProgressBar = false;
+  loading = false;
+  paginator: PaginatorOptions = {
+    pageIndex: 0,
+    length: 0,
+    pageSize: 5,
+    pageSizeOptions: [3, 5, 10]
+  };
 
   constructor(
     private metadataService: MetadataService
-  ) {
-    this.metadata_total = 0;
-    this.pageSizeOptions = [3, 5, 10];
-    this.showProgressBar = false;
-  }
+  ) { }
 
   ngOnInit() {
-    this.paginator.pageIndex = this.metadataService.pageIndex;
+    this.loading = true;
+    this.paginator.pageIndex = this.metadataService.pageIndex + 1;
     this.paginator.pageSize = this.metadataService.pageSize;
     this.search();
     this.searchChangeSub = this.metadataService.searchChange$.subscribe(
       (value) => {
         this.showProgressBar = true;
-        this.paginator.pageIndex = 0;
         this.search();
       }
     );
@@ -45,21 +52,28 @@ export class MetadataListComponent implements OnInit, OnDestroy {
   }
 
   search() {
+    this.loading = true;
     this.metadataService.getDatasetList().subscribe(
       (res) => {
         this.datasetList = res;
         this.paginator.pageSize = this.metadataService.pageSize;
-        this.paginator.pageIndex = this.metadataService.pageIndex;
-        this.metadata_total = this.metadataService.resultsCount;
+        this.paginator.pageIndex = this.metadataService.pageIndex + 1;
+        this.paginator.length = this.metadataService.resultsCount;
         this.showProgressBar = false;
+        this.loading = false;
       }, (err) => {
+        this.loading = false;
       }
     );
   }
 
   // When pagination is changed by user, we update metadata with new pagination options
-  changePagination(event) {
-    this.metadataService.paginationChanged(this.paginator.pageSize, event.pageIndex);
+  changePagination(pageIndex) {
+    this.metadataService.paginationChanged(this.paginator.pageSize, pageIndex - 1 );
+  }
+
+  changePageSize(pageSize) {
+    this.metadataService.paginationChanged(pageSize, this.paginator.pageIndex - 1 );
   }
 
   formatFoundItem(e) {
diff --git a/webapp/src/app/geosource/geosource.module.ts b/webapp/src/app/geosource/geosource.module.ts
index 981da9f4d01ccf8204b96460c48c1238ce61083a..ed6d5a99b1a4ab4ad53e9297e239d0df4a3fd4ae 100644
--- a/webapp/src/app/geosource/geosource.module.ts
+++ b/webapp/src/app/geosource/geosource.module.ts
@@ -5,13 +5,15 @@ import { GeosourceRoutingModule } from './geosource-routing.module';
 import { GeosourceComponents } from './components';
 import { GeosourceServices } from './services';
 import { AppMaterialModule } from '../app.material.module';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
   imports: [
     CommonModule,
     GeosourceRoutingModule,
     AppMaterialModule,
-    FormsModule
+    FormsModule,
+    SharedModule
   ],
   declarations: [...GeosourceComponents],
   providers: [
diff --git a/webapp/src/app/geosource/models/elasticsearch-options.model.ts b/webapp/src/app/geosource/models/elasticsearch-options.model.ts
index a8902ef2791ed12edddb2d5a6ed0fd871267ad1f..52eb42f78908afad83363e5ab4f175163b5a70cd 100644
--- a/webapp/src/app/geosource/models/elasticsearch-options.model.ts
+++ b/webapp/src/app/geosource/models/elasticsearch-options.model.ts
@@ -16,7 +16,7 @@ export class ElasticsearchOptions {
   '_filters': Array<IFilter>;
 
   constructor(data?) {
-    this._pageSize = (data && data.pageSize != null) ? data.pageSize : 5;
+    this._pageSize = (data && data.pageSize != null) ? data.pageSize : 3;
     this._pageIndex = (data && data.pageIndex != null) ? data.pageIndex : 0;
     this._searchString = (data && data.searchString != null) ? data.searchString : '';
     this._sortOptions = (data && data.sortOptions != null) ? data.sortOptions : {
diff --git a/webapp/src/app/geosource/services/elasticsearch.service.ts b/webapp/src/app/geosource/services/elasticsearch.service.ts
index 1966e52b7e0045bf6060efe69f1f8ba54650693a..8a6e060c374b848b2d15ad2d703a1059cb3330cb 100644
--- a/webapp/src/app/geosource/services/elasticsearch.service.ts
+++ b/webapp/src/app/geosource/services/elasticsearch.service.ts
@@ -99,6 +99,7 @@ export class ElasticsearchService {
   }
 
   constructElasticsearchRequest(options: ElasticsearchOptions) {
+    console.log(options)
 
     const from = options.pageSize * options.pageIndex;
     const escapedString = options.searchString.replace(/([<>*()?])/g, '\\$1');
diff --git a/webapp/src/app/shared/components/paginator/paginator.component.html b/webapp/src/app/shared/components/paginator/paginator.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..b00e087d91d27b39e745146ed6e948985e6b99d9
--- /dev/null
+++ b/webapp/src/app/shared/components/paginator/paginator.component.html
@@ -0,0 +1,80 @@
+<div class="columns">
+  <div class="column is-narrow">
+    <!-- Dropdown list of pageSize number -->
+    <div class="dropdown" [ngClass]="{'is-active': pageSizeDropdownToggle}" (click)="pageSizeDropdownToggle=!pageSizeDropdownToggle">
+      <div class="dropdown-trigger">
+        <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu">
+          <span>{{ pageSize }}</span>
+          <span class="icon is-small">
+            <i class="fas fa-angle-down" aria-hidden="true"></i>
+          </span>
+        </button>
+      </div>
+      <div class="dropdown-menu" id="dropdown-menu" role="menu">
+        <div class="dropdown-content">
+          <a class="dropdown-item" [ngClass]="{'is-active': nb === pageSize}" *ngFor="let nb of pageSizeOptions" (click)="changePageSize(nb)">
+            {{ nb }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="column">
+    <div class="pagination is-centered is-small" role="navigation" aria-label="pagination" *ngIf="length > 0">
+      <!-- First button -->
+      <a class="pagination-previous button" *ngIf="pageIndex === 1 || loading; else activeFirstPageLink" disabled>
+        <i class="fas fa-angle-double-left"></i>
+      </a>
+      <ng-template #activeFirstPageLink>
+        <a class="pagination-previous button" (click)="onPage(1)">
+          <i class="fas fa-angle-double-left"></i>
+        </a>
+      </ng-template>
+
+      <!-- Previous button -->
+      <a class="pagination-previous button" *ngIf="pageIndex === 1 || loading; else activePreviousLink" disabled>
+        <i class="fas fa-angle-left"></i>
+      </a>
+      <ng-template #activePreviousLink>
+        <a class="pagination-previous button" (click)="onPrev()">
+          <i class="fas fa-angle-left"></i>
+        </a>
+      </ng-template>
+
+      <!-- List of pages number -->
+      <ul class="pagination-list">
+        <ng-container *ngFor="let pageNum of getPages(); let i = index">
+          <li *ngIf="displayEllipsis(i)">
+            <span class="pagination-ellipsis">&hellip;</span>
+          </li>
+          <li>
+            <a *ngIf="!loading; else pageNumberDisabled" (click)="onPage(pageNum)" class="pagination-link button" [ngClass]="{'is-current': pageNum === pageIndex}">{{ pageNum }}</a>
+            <ng-template #pageNumberDisabled>
+              <a class="pagination-link button" [ngClass]="{'is-current': pageNum === pageIndex}" disabled>{{ pageNum }}</a>
+            </ng-template>
+          </li>
+        </ng-container>
+      </ul>
+
+      <!-- Next button -->
+      <a class="pagination-next button" *ngIf="lastPage() || loading; else activeNextLink" disabled>
+        <i class="fas fa-angle-right"></i>
+      </a>
+      <ng-template #activeNextLink>
+        <a class="pagination-next button" (click)="onNext()">
+          <i class="fas fa-angle-right"></i>
+        </a>
+      </ng-template>
+
+      <!-- Last button -->
+      <a class="pagination-next button" *ngIf="lastPage() || loading; else activeLastPageLink" disabled>
+        <i class="fas fa-angle-double-right"></i>
+      </a>
+      <ng-template #activeLastPageLink>
+        <a class="pagination-next button" (click)="onPage(totalPages())">
+          <i class="fas fa-angle-double-right"></i>
+        </a>
+      </ng-template>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/webapp/src/app/shared/components/paginator/paginator.component.scss b/webapp/src/app/shared/components/paginator/paginator.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0f7429047d94d3c68b915ff4a4c96fdbc4536ef1
--- /dev/null
+++ b/webapp/src/app/shared/components/paginator/paginator.component.scss
@@ -0,0 +1,3 @@
+.dropdown-menu {
+  min-width: unset;
+}
\ No newline at end of file
diff --git a/webapp/src/app/shared/components/paginator/paginator.component.spec.ts b/webapp/src/app/shared/components/paginator/paginator.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cabc63d031cba30eeb59b8c7a22a16563eea0ca0
--- /dev/null
+++ b/webapp/src/app/shared/components/paginator/paginator.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaginatorComponent } from './paginator.component';
+
+describe('PaginatorComponent', () => {
+  let component: PaginatorComponent;
+  let fixture: ComponentFixture<PaginatorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PaginatorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PaginatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/webapp/src/app/shared/components/paginator/paginator.component.ts b/webapp/src/app/shared/components/paginator/paginator.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b9b6a1f5e7c67f4b4f772132cdc2b21f9b89cb0
--- /dev/null
+++ b/webapp/src/app/shared/components/paginator/paginator.component.ts
@@ -0,0 +1,128 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-paginator',
+  templateUrl: './paginator.component.html',
+  styleUrls: ['./paginator.component.scss']
+})
+export class PaginatorComponent implements OnInit {
+
+  @Input() pageIndex: number; // the current page
+  @Input() length: number; // how many total items there are in all pages
+  @Input() pageSize: number; // how many items we want to show per page
+  @Input() pageSizeOptions: number[]; // possible values forpageSize
+  @Input() pagesToShow: number; // how many pages between next/prev
+  @Input() showFirstLastButtons: boolean; // show next/prev bbttons
+  @Input() loading: boolean; // check if content is being loaded
+
+  @Output() page = new EventEmitter<number>();
+  @Output() pageSizeChanged = new EventEmitter<number>();
+
+  pageSizeDropdownToggle = false;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  onPrev() {
+    if (this.pageIndex - 1 > 0) {
+      this.page.emit(this.pageIndex - 1);
+    }
+  }
+
+  onNext() {
+    if (this.pageIndex + 1 <= this.totalPages()) {
+      this.page.emit(this.pageIndex + 1);
+    }
+  }
+
+  onPage(n: number): void {
+    this.page.emit(n);
+  }
+
+  totalPages(): number {
+    return Math.ceil(this.length / this.pageSize) || 0;
+  }
+
+  lastPage(): boolean {
+    return this.pageSize * this.pageIndex >= this.length;
+  }
+
+  changePageSize(size: number) {
+    this.pageSize = size;
+    this.pageSizeChanged.emit(this.pageSize);
+  }
+
+  getPages(): number[] {
+    const totalP = Math.ceil(this.length / this.pageSize); // Total number of page
+    const p = this.pageIndex || 1; // Current page index
+    const pagesToShow = this.pagesToShow || 5; // Total number of pages to be displayed in the paginator
+    const pages: number[] = []; // Page number to be displayed
+    pages.push(p); // Push the current page index
+    let times = pagesToShow - 1; // Number of page to be added to the displayed page
+    if (p !== 1) {
+      times--; // If current page is different from the first page remove one (first page automatically added to the array at the end of the function)
+    }
+    if (p !== totalP) {
+      times--; // If current page is different from the last page remove one (last page automatically added to the array at the end of the function)
+    }
+    for (let i = 0; i < times; i++) {
+      let added = 0; // Count the number of page added in this loop
+      // Take the min number in the array and add (n-1) to the array if n > 1
+      if (pages.length < pagesToShow) {
+        if (Math.min.apply(null, pages) > 1) {
+          if (Math.min.apply(null, pages) - 1 > 1) {
+            pages.push(Math.min.apply(null, pages) - 1);
+            added++;
+          }
+        }
+      }
+      // Take the max number in the array and add (n+1) to the array if n > total number of pages
+      if (pages.length < pagesToShow) {
+        if (Math.max.apply(null, pages) < totalP) {
+          if (Math.max.apply(null, pages) + 1 < totalP) {
+            pages.push(Math.max.apply(null, pages) + 1);
+            added++;
+          }
+        }
+      }
+      // If more than one page has been added then increase i by one more
+      if (added === 2) {
+        i++;
+      }
+    }
+    // Adding first page if not already in the array
+    if (pages.indexOf(1) === -1) {
+      pages.push(1);
+    }
+    // Adding last page if not already in the array
+    if (pages.indexOf(totalP) === -1) {
+      pages.push(totalP);
+    }
+    // Reordering the array
+    pages.sort((a, b) => a - b);
+    return pages;
+  }
+
+  // Return true if ellipsis has to be displayed
+  displayEllipsis(i: number) {
+    const pages = this.getPages();
+    let result = false;
+    // If second page (index start at 0)
+    if (i === 1) {
+      // If the two consecutive number are not separated by one need to add the elipsis
+      if (pages[0] + 1 !== pages[1]) {
+        result = true;
+      }
+    }
+    // If last page
+    if (i > 1 && i === pages.length - 1) {
+      if (pages[i] - 1 !== pages[i - 1]) {
+        result = true;
+      }
+    }
+
+    return result;
+  }
+}
diff --git a/webapp/src/app/shared/shared.module.ts b/webapp/src/app/shared/shared.module.ts
index ac8873c23f0c3e23679ad5e268ec5e70e2aadb45..806f8703f55f63f422a91040a1a495a0d67a04fe 100644
--- a/webapp/src/app/shared/shared.module.ts
+++ b/webapp/src/app/shared/shared.module.ts
@@ -1,16 +1,20 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { EscapeHtmlPipe } from './pipes/keep-html.pipe';
+import { PaginatorComponent } from './components/paginator/paginator.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
     CommonModule
   ],
   declarations: [
-    EscapeHtmlPipe
+    EscapeHtmlPipe,
+    PaginatorComponent
   ],
   exports: [
-    EscapeHtmlPipe
+    EscapeHtmlPipe,
+    PaginatorComponent
   ]
 })
 export class SharedModule { }
diff --git a/webapp/src/scss/mystyles.scss b/webapp/src/scss/mystyles.scss
index b42b1cdf621cfe80a4f8dd2318365a968e4a4390..8ff0e92b28d321a47eec772dc51035e225a6e957 100644
--- a/webapp/src/scss/mystyles.scss
+++ b/webapp/src/scss/mystyles.scss
@@ -29,6 +29,9 @@ $primary: $main;
 // Use the new serif family
 $family-primary: $family-sans-serif;
 
+$pagination-current-background-color: $yellow;
+$pagination-current-border-color: $yellow;
+
 // 6. Import the rest of Bulma
 @import "sass/utilities/_all";
 @import "sass/base/_all";