diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index 528445ea4e..d25ceb4e73 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -7,6 +7,7 @@
         <th *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-header">
             <span class="sr-only">Actions</span>
         </th>
+
         <!-- Columns -->
         <th *ngIf="multiselect">
             <md-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></md-checkbox>
@@ -28,104 +29,108 @@
     </tr>
     </thead>
     <tbody>
+    <ng-container *ngIf="!loading">
 
-    <tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
-        class="alfresco-datatable__row"
-        [class.alfresco-datatable__row--selected]="row.isSelected"
-        [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
-        [ngStyle]="rowStyle"
-        [ngClass]="rowStyleClass">
+        <tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
+            class="alfresco-datatable__row"
+            [class.alfresco-datatable__row--selected]="row.isSelected"
+            [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
+            [ngStyle]="rowStyle"
+            [ngClass]="rowStyleClass">
 
-        <!-- Actions (left) -->
-        <td *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-cell">
-            <button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon"
-                    [attr.data-automation-id]="actions_menu">
-                <i class="material-icons">more_vert</i>
-            </button>
-            <ul alfresco-mdl-menu class="mdl-menu--bottom-left"
-                [attr.for]="'action_menu_' + idx">
-                <li class="mdl-menu__item" [attr.disabled]="action.disabled"
-                    [attr.data-automation-id]="action.title"
-                    *ngFor="let action of getRowActions(row)"
-                    (click)="onExecuteRowAction(row, action)">
-                    {{action.title}}
-                </li>
-            </ul>
-        </td>
+            <!-- Actions (left) -->
+            <td *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-cell">
+                <button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon"
+                        [attr.data-automation-id]="actions_menu">
+                    <i class="material-icons">more_vert</i>
+                </button>
+                <ul alfresco-mdl-menu class="mdl-menu--bottom-left"
+                    [attr.for]="'action_menu_' + idx">
+                    <li class="mdl-menu__item" [attr.disabled]="action.disabled"
+                        [attr.data-automation-id]="action.title"
+                        *ngFor="let action of getRowActions(row)"
+                        (click)="onExecuteRowAction(row, action)">
+                        {{action.title}}
+                    </li>
+                </ul>
+            </td>
 
-        <td *ngIf="multiselect">
-            <md-checkbox [(ngModel)]="row.isSelected"></md-checkbox>
-        </td>
-        <td *ngFor="let col of data.getColumns()"
-            class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
-            (click)="onRowClick(row, $event)"
-            (dblclick)="onRowDblClick(row, $event)"
-            [context-menu]="getContextMenuActions(row, col)"
-            [context-menu-enabled]="contextMenu">
-            <div *ngIf="!col.template" class="cell-container">
-                <ng-container [ngSwitch]="col.type">
-                    <div *ngSwitchCase="'image'" class="cell-value">
-                        <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
-                        <img *ngIf="!isIconValue(row, col)"
-                             class="image-cell"
-                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
-                             src="{{ data.getValue(row, col) }}"
-                             (error)="onImageLoadingError($event)">
-                    </div>
-                    <div *ngSwitchCase="'icon'" class="cell-value">
-                        <img class="image-cell"
-                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
-                             src="{{ data.getValue(row, col) }}"
-                             (error)="onImageLoadingError($event)">
-                    </div>
-                    <div *ngSwitchCase="'date'" class="cell-value"
-                         [attr.data-automation-id]="'date_' + data.getValue(row, col)">
-                        <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
-                    </div>
-                    <div *ngSwitchCase="'text'" class="cell-value"
-                         [attr.data-automation-id]="'text_' + data.getValue(row, col)">
-                        <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
-                    </div>
+            <td *ngIf="multiselect">
+                <md-checkbox [(ngModel)]="row.isSelected"></md-checkbox>
+            </td>
+            <td *ngFor="let col of data.getColumns()"
+                class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
+                (click)="onRowClick(row, $event)"
+                (dblclick)="onRowDblClick(row, $event)"
+                [context-menu]="getContextMenuActions(row, col)"
+                [context-menu-enabled]="contextMenu">
+                <div *ngIf="!col.template" class="cell-container">
+                    <ng-container [ngSwitch]="col.type">
+                        <div *ngSwitchCase="'image'" class="cell-value">
+                            <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row,
+                                col)}}</i>
+                            <img *ngIf="!isIconValue(row, col)"
+                                 class="image-cell"
+                                 alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
+                                 src="{{ data.getValue(row, col) }}"
+                                 (error)="onImageLoadingError($event)">
+                        </div>
+                        <div *ngSwitchCase="'icon'" class="cell-value">
+                            <img class="image-cell"
+                                 alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
+                                 src="{{ data.getValue(row, col) }}"
+                                 (error)="onImageLoadingError($event)">
+                        </div>
+                        <div *ngSwitchCase="'date'" class="cell-value"
+                             [attr.data-automation-id]="'date_' + data.getValue(row, col)">
+                            <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
+                        </div>
+                        <div *ngSwitchCase="'text'" class="cell-value"
+                             [attr.data-automation-id]="'text_' + data.getValue(row, col)">
+                            <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
+                        </div>
                     <span *ngSwitchDefault class="cell-value">
                     <!-- empty cell for unknown column type -->
                     </span>
-                </ng-container>
-            </div>
-            <div *ngIf="col.template" class="cell-container">
-                <ng-container
-                    [ngTemplateOutlet]="col.template"
-                    [ngOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
-                </ng-container>
-            </div>
-        </td>
+                    </ng-container>
+                </div>
+                <div *ngIf="col.template" class="cell-container">
+                    <ng-container
+                        [ngTemplateOutlet]="col.template"
+                        [ngOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
+                    </ng-container>
+                </div>
+            </td>
 
-        <!-- Actions (right) -->
-        <td *ngIf="actions && actionsPosition === 'right'" class="alfresco-datatable__actions-cell">
-            <button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon"
-                    [attr.data-automation-id]="actions_menu">
-                <i class="material-icons">more_vert</i>
-            </button>
-            <ul alfresco-mdl-menu class="mdl-menu--bottom-right"
-                [attr.for]="'action_menu_' + idx">
-                <li class="mdl-menu__item" [attr.disabled]="action.disabled || undefined"
-                    [attr.data-automation-id]="action.title"
-                    *ngFor="let action of getRowActions(row)"
-                    (click)="onExecuteRowAction(row, action)">
-                    {{action.title}}
-                </li>
-            </ul>
-        </td>
+            <!-- Actions (right) -->
+            <td *ngIf="actions && actionsPosition === 'right'" class="alfresco-datatable__actions-cell">
+                <button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon"
+                        [attr.data-automation-id]="actions_menu">
+                    <i class="material-icons">more_vert</i>
+                </button>
+                <ul alfresco-mdl-menu class="mdl-menu--bottom-right"
+                    [attr.for]="'action_menu_' + idx">
+                    <li class="mdl-menu__item" [attr.disabled]="action.disabled || undefined"
+                        [attr.data-automation-id]="action.title"
+                        *ngFor="let action of getRowActions(row)"
+                        (click)="onExecuteRowAction(row, action)">
+                        {{action.title}}
+                    </li>
+                </ul>
+            </td>
+
+        </tr>
+        <tr *ngIf="data.getRows().length === 0">
+            <td class="mdl-data-table__cell--non-numeric adf-no-content-container"
+                [attr.colspan]="1 + data.getColumns().length">
+                <ng-template *ngIf="noContentTemplate"
+                             ngFor [ngForOf]="[data]"
+                             [ngForTemplate]="noContentTemplate">
+                </ng-template>
+            </td>
+        </tr>
+    </ng-container>
 
-    </tr>
-    <tr *ngIf="data.getRows().length === 0 && !loading">
-        <td class="mdl-data-table__cell--non-numeric adf-no-content-container"
-            [attr.colspan]="1 + data.getColumns().length">
-            <ng-template *ngIf="noContentTemplate"
-                         ngFor [ngForOf]="[data]"
-                         [ngForTemplate]="noContentTemplate">
-            </ng-template>
-        </td>
-    </tr>
     <tr *ngIf="loading">
         <td class="mdl-data-table__cell--non-numeric adf-loading-content-container"
             [attr.colspan]="1 + data.getColumns().length">
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.css b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.css
index eb6a18cf6e..f2075a3d7d 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.css
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.css
@@ -46,3 +46,16 @@
 .adf-document-list-loading-margin {
     margin: auto;
 }
+
+.adf-document-list-loading-container {
+    min-height: 300px;
+    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
+    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
+    display: -webkit-flex; /* NEW - Chrome */
+    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
+    -webkit-box-flex-direction: row;
+    -moz-box-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    height: 100%;
+}
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
index 5f57b46f56..902ff9a0ff 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
@@ -25,23 +25,25 @@
     <div *ngIf="!isEmptyTemplateDefined()">
         <no-content-template>
             <ng-template>
-                <!--put your cutom template here-->
-                <md-progress-spinner
-                    class="adf-document-list-loading-margin"
-                    [color]="'primary'"
-                    [mode]="'indeterminate'">
-                </md-progress-spinner>
+                <div  id="adf-document-list-empty" class="document-list_empty_template">
+                    <div class="document-list__this-space-is-empty">This folder is empty</div>
+                    <div class="document-list__drag-drop">Drag and Drop</div>
+                    <div class="document-list__any-files-here-to-add">any files here to add</div>
+                    <img [src]="emptyFolderImageUrl" class="document-list__empty_doc_lib">
+                </div>
             </ng-template>
         </no-content-template>
     </div>
     <div>
         <loading-content-template>
             <ng-template>
-                <md-progress-spinner id="adf-document-list-loading"
-                    class="adf-document-list-loading-margin"
-                    [color]="'primary'"
-                    [mode]="'indeterminate'">
-                </md-progress-spinner>
+                <div class="adf-document-list-loading-container">
+                    <md-progress-spinner id="adf-document-list-loading"
+                                         class="adf-document-list-loading-margin"
+                                         [color]="'primary'"
+                                         [mode]="'indeterminate'">
+                    </md-progress-spinner>
+                </div>
             </ng-template>
         </loading-content-template>
     </div>
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
index a63328432d..99ece7e7af 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
@@ -167,6 +167,27 @@ describe('DocumentList', () => {
         });
     });
 
+    it('should empty template be present when no element are present', (done) => {
+        documentList.currentFolderId = '1d26e465-dea3-42f3-b415-faa8364b9692';
+        documentList.folderNode = new NodeMinimal();
+        documentList.folderNode.id = '1d26e465-dea3-42f3-b415-faa8364b9692';
+        documentList.reload();
+
+        fixture.detectChanges();
+
+        documentList.ready.subscribe(() => {
+            fixture.detectChanges();
+            expect(element.querySelector('#adf-document-list-empty')).toBeDefined();
+            done();
+        });
+
+        jasmine.Ajax.requests.at(0).respondWith({
+            status: 200,
+            contentType: 'application/json',
+            responseText: JSON.stringify(fakeNodeAnswerWithNOEntries)
+        });
+    });
+
     it('should not execute action without node provided', () => {
         let action = new ContentActionModel();
         action.handler = function () {