diff --git a/demo-shell-ng2/app/components/alfresco.service.ts b/demo-shell-ng2/app/components/alfresco.service.ts
index 42afd80a19..cb58c6e2e0 100644
--- a/demo-shell-ng2/app/components/alfresco.service.ts
+++ b/demo-shell-ng2/app/components/alfresco.service.ts
@@ -2,6 +2,7 @@ import {Injectable} from 'angular2/core';
 import {Http, Response, RequestOptions, Headers} from 'angular2/http';
 import {Observable} from 'rxjs/Observable';
 import {FolderEntity} from "./core/entities/folder.entity";
+import {DocumentEntity} from "./core/entities/document.entity";
 
 @Injectable()
 export class AlfrescoService {
@@ -23,6 +24,10 @@ export class AlfrescoService {
             .catch(this.handleError);
     }
 
+    getDocumentThumbnailUrl(document: DocumentEntity) {
+        return this._host + '/alfresco/service/api/node/' + document.nodeRef.replace('://', '/') + '/content/thumbnails/doclib?c=queue&ph=true&lastModified=1';
+    }
+
     private handleError (error: Response) {
         // in a real world app, we may send the error to some remote logging infrastructure
         // instead of just logging it to the console
diff --git a/demo-shell-ng2/app/components/document-list.component.ts b/demo-shell-ng2/app/components/document-list.component.ts
index 8dcb3617b0..c9fcc365fb 100644
--- a/demo-shell-ng2/app/components/document-list.component.ts
+++ b/demo-shell-ng2/app/components/document-list.component.ts
@@ -5,14 +5,32 @@ import {DocumentEntity} from "./core/entities/document.entity";
 
 @Component({
     selector: 'alfresco-document-list',
+    styles: [
+        `
+            :host .folder-icon {
+                float: left;
+                margin-right: 10px;
+            }
+            :host .file-icon {
+                width: 52px;
+                height: 52px;
+                float: left;
+                margin-right: 10px;
+            }
+        `
+    ],
     template: `
         <div *ngIf="folder" class="list-group">
             <a href="#" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)" class="list-group-item">
                 <i class="fa fa-level-up"></i> ...
             </a>
-            <a href="#" *ngFor="#document of folder.items" (click)="onItemClick(document, $event)" class="list-group-item">
-                <i *ngIf="document.isFolder" class="fa fa-folder-o"></i>
-                {{document.displayName}}
+            <a href="#" *ngFor="#document of folder.items" (click)="onItemClick(document, $event)" class="list-group-item clearfix">
+                <i *ngIf="document.isFolder" class="folder-icon fa fa-folder-o fa-4x"></i>
+                <img *ngIf="!document.isFolder" class="file-icon" src="{{getDocumentThumbnailUrl(document)}}">
+                <h4 class="list-group-item-heading">
+                    {{document.displayName}}
+                </h4>
+                <p class="list-group-item-text">{{document.description}}</p>
             </a>
         </div>
     `,
@@ -87,4 +105,8 @@ export class DocumentList implements OnInit {
         var relativePath = container + path + item.fileName;
         return item.location.site + '/' + relativePath;
     }
+    
+    getDocumentThumbnailUrl(document:  DocumentEntity) {
+        return this._alfrescoService.getDocumentThumbnailUrl(document);
+    }
 }