diff --git a/src/app/document/controllers/DocumentController.php b/src/app/document/controllers/DocumentController.php
index 4702306d9ddb21828a8ce86b4568461543b23850..795759306c2e7f3997d811bebf34b5d90d0c484b 100755
--- a/src/app/document/controllers/DocumentController.php
+++ b/src/app/document/controllers/DocumentController.php
@@ -33,18 +33,20 @@ class DocumentController
     public function get(Request $request, Response $response)
     {
         $data = $request->getQueryParams();
+        $data['limit'] = (int)$data['limit'];
+        $data['offset'] = (int)$data['offset'];
 
-        if (empty($data['offset']) || !is_numeric($data['offset'])) {
+        if (empty($data['offset']) || (int)$data['offset'] == 0) {
             $data['offset'] = 0;
         }
-        if (empty($data['limit']) || !is_numeric($data['limit'])) {
+        if (empty($data['limit']) || (int)$data['limit'] == 0) {
             $data['limit'] = 0;
         }
 
         $user = UserModel::getByLogin(['login' => $GLOBALS['login'], 'select' => ['id']]);
 
         $fullCount = 0;
-        $documents = DocumentModel::getByUserId(['select' => ['id', 'reference', 'subject', 'status', 'count(1) OVER()'], 'userId' => $user['id']]);
+        $documents = DocumentModel::getByUserId(['select' => ['id', 'reference', 'subject', 'status', 'count(1) OVER()'], 'userId' => $user['id'], 'limit' => $data['limit'], 'offset' => $data['offset']]);
         foreach ($documents as $key => $document) {
             $status = StatusModel::getById(['select' => ['label'], 'id' => $document['status']]);
             $documents[$key]['statusDisplay'] = $status['label'];
diff --git a/src/frontend/app/sidebar/sidebar.component.ts b/src/frontend/app/sidebar/sidebar.component.ts
index b04b0ee1ad53a341daad2571bdf266daf3229ada..c6ed098ffaaa0177bb23d732d49b135e5ef56355 100644
--- a/src/frontend/app/sidebar/sidebar.component.ts
+++ b/src/frontend/app/sidebar/sidebar.component.ts
@@ -4,6 +4,7 @@ import { HttpClient } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { ScrollEvent } from 'ngx-scroll-event';
 import { MatSidenav } from '@angular/material';
+import * as $ from 'jquery';
 
 interface AppState {
   sidebar: boolean;
@@ -18,48 +19,35 @@ export class SidebarComponent implements OnInit {
   documentsList: any[] = [];
   countDocumentsList = 0;
   loadingList = false;
+  offset = 0;
+  limit = 25;
 
   @ViewChild('listContent') listContent: ElementRef;
 
   constructor(public http: HttpClient, private sidenav: MatSidenav, private router: Router) { }
 
   handleScroll(event: ScrollEvent) {
-    if (event.isReachingBottom) {
-      // this.listContent.nativeElement.scrollTo(0, 0);
+    if (event.isReachingBottom && !this.loadingList && this.documentsList.length < this.countDocumentsList) {
+
       this.loadingList = true;
       this.listContent.nativeElement.style.overflowY = 'hidden';
       console.log(`the user is reaching the bottom`);
-      const currentCountList = this.documentsList.length;
-      for (let index = currentCountList + 1; index <= currentCountList + 20; index++) {
-        this.documentsList.push(
-          {
-            'id' : index,
-            'reference' : 'CAB/2018A/' + index,
-            'subject' : 'AJOUT Document ' + index,
-            'status' : 'A traiter',
-          }
-        );
-      }
-      setTimeout(() => {
+      this.offset = this.offset + this.limit;
+
+      this.http.get('../rest/documents?limit=' + this.limit + '&offset=' + this.offset)
+      .subscribe((data: any) => {
+        this.documentsList = this.documentsList.concat(data.documents);
         this.loadingList = false;
         this.listContent.nativeElement.style.overflowY = 'auto';
-      }, 3000);
-    }
-    /*if (event.isReachingTop) {
-      console.log(`the user is reaching the bottom`);
+      });
     }
-    if (event.isWindowEvent) {
-      console.log(`This event is fired on Window not on an element.`);
-    }*/
   }
 
   ngOnInit() {
-    this.http.get('../rest/documents')
+    this.http.get('../rest/documents?limit=' + this.limit + '&offset=' + this.offset)
       .subscribe((data: any) => {
         this.documentsList = data.documents;
-        // this.countDocumentsList = data.fullCount;
-        // TO DO REMOVE AFTER INIT IN BACK
-        this.countDocumentsList = this.documentsList.length;
+        this.countDocumentsList = data.fullCount;
       });
   }