diff --git a/demo-shell-ng2/bower.json b/demo-shell-ng2/bower.json
index 44f9159f36..bb71d6c17f 100644
--- a/demo-shell-ng2/bower.json
+++ b/demo-shell-ng2/bower.json
@@ -28,6 +28,9 @@
     "paper-badge": "~1.1.1",
     "iron-ajax": "~1.2.0",
     "paper-icon-button": "~1.0.7",
-    "paper-toolbar": "~1.1.4"
+    "paper-toolbar": "~1.1.4",
+    "iron-signals": "~1.0.3",
+    "paper-item": "~1.1.4",
+    "paper-dropdown-menu": "~1.1.3"
   }
 }
diff --git a/demo-shell-ng2/webcomponents/alfresco-file-list/README.md b/demo-shell-ng2/webcomponents/alfresco-file-list/README.md
index 01dd00e413..cdef03c87e 100644
--- a/demo-shell-ng2/webcomponents/alfresco-file-list/README.md
+++ b/demo-shell-ng2/webcomponents/alfresco-file-list/README.md
@@ -1,6 +1,6 @@
 # &lt;alfresco-file-list&gt;
 
-> Alfresco files and Folders viewver list
+> Alfresco files and Folders viewver list 
 
 ## Demo
 
diff --git a/demo-shell-ng2/webcomponents/alfresco-file-list/bower.json b/demo-shell-ng2/webcomponents/alfresco-file-list/bower.json
index f1967b809d..10dc9e7fb5 100644
--- a/demo-shell-ng2/webcomponents/alfresco-file-list/bower.json
+++ b/demo-shell-ng2/webcomponents/alfresco-file-list/bower.json
@@ -24,9 +24,6 @@
     "iron-icons": "PolymerElements/iron-icons#^1.1.3",
     "app-layout": "PolymerLabs/app-layout#^0.0.14",
     "paper-menu": "PolymerElements/paper-menu#^1.2.2",
-    "paper-item": "PolymerElements/paper-item#^1.1.4",
-    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.1.3",
-    "paper-listbox": "PolymerElements/paper-listbox#^1.1.2",
-    "paper-tabs": "PolymerElements/paper-tabs#^1.5.0"
+    "paper-item": "PolymerElements/paper-item#^1.1.4"
   }
 }
diff --git a/demo-shell-ng2/webcomponents/alfresco-file-list/index-demo.html b/demo-shell-ng2/webcomponents/alfresco-file-list/index-demo.html
new file mode 100644
index 0000000000..0df04e8322
--- /dev/null
+++ b/demo-shell-ng2/webcomponents/alfresco-file-list/index-demo.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>&lt;alfresco-file-list&gt;</title>
+
+    <!-- Importing Web Component's Polyfill -->
+    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
+
+    <!-- Importing Custom Elements -->
+    <link rel="import" href="src/alfresco-file-list.html">
+</head>
+<body>
+<div style="height: 900px">
+    <!-- Using Custom Elements -->
+    <alfresco-file-list></alfresco-file-list>
+</div>
+</body>
+</html>
diff --git a/demo-shell-ng2/webcomponents/alfresco-file-list/src/alfresco-file-list.html b/demo-shell-ng2/webcomponents/alfresco-file-list/src/alfresco-file-list.html
index c4d53ccef7..8523187374 100644
--- a/demo-shell-ng2/webcomponents/alfresco-file-list/src/alfresco-file-list.html
+++ b/demo-shell-ng2/webcomponents/alfresco-file-list/src/alfresco-file-list.html
@@ -7,6 +7,9 @@
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="../../../bower_components/paper-badge/paper-badge.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../../../bower_components/iron-signals/iron-signals.html">
 
 <style>
     .pad {
@@ -52,11 +55,14 @@
         top: calc(50% - 8px);
     }
 
-    ul { list-style-type: none; overflow: hidden; width:800px; margin:10px}
-    ul li div.text{ float:left; width: 400px;text-align: left;height: 55px }
+    ul { list-style-type: none; overflow: hidden;  margin:10px}
+    ul li div.text{ float:left; text-align: left;height: 55px }
     ul li div.folder-container{ float:left; width: 70px;text-align: left ;height: 55px}
     ul li:hover { background: #eeeeee; height: 55px}
-
+    .file{
+        width: 52px;
+        height: 52px;
+    }
     .folder {
         height: 52px;
         box-sizing: border-box;
@@ -74,6 +80,14 @@
         font-family: sans-serif;
     }
 
+    .pull-right{
+        float: right;
+    }
+
+    .iron-list ul{
+        padding: 0px;
+    }
+
     paper-dropdown-menu.custom {
         overflow: visible;
         --paper-input-container-label: {
@@ -100,12 +114,19 @@
 <dom-module id="alfresco-file-list">
     <template>
         <!-- Main List for the items -->
-        <iron-list id="itemsList" items="{{data}}" selected-items="{{selectedItems}}" selection-enabled multi-selection>
+        <iron-list id="itemsList" items="{{data}}" selected-items="{{selectedItems}}" selection-enabled>
             <template>
                 <div>
                     <ul tabindex$="[[tabIndex]]" aria-label$="Select/Deselect [[item.name]]" class$="[[_computedClass(selected)]]">
                         <li>
-                            <div class="folder-container"><img class="folder" src="img/folder.svg"></div>
+                            <div class="folder-container" on-click="goToFolder">
+                                <template is="dom-if" if="{{item.isFolder}}">
+                                    <img class="folder" src="img/folder.svg">
+                                </template>
+                                <template is="dom-if" if="{{!item.isFolder}}">
+                                    <img class="file" src="{{thumbBaseUrl()}}{{item.contentUrl}}">
+                                </template>
+                            </div>
                             <div class="text">
                                 <div class="pad">
                                     <div class="primary">
@@ -120,7 +141,7 @@
                                 </div>
                             </div>
                             <div lass="dropdowm menu">
-                                <paper-dropdown-menu class="custom" label="Actions" no-label-float>
+                                <paper-dropdown-menu class="custom pull-right" label="Actions" no-label-float>
                                     <paper-listbox class="dropdown-content">
                                         <paper-item>Download as Zip</paper-item>
                                         <paper-item>View Details</paper-item>
@@ -140,26 +161,61 @@
     </template>
 
     <script>
-        Polymer({
-            is: "alfresco-file-list",
-            ready: function() {
-                this.url ="http://192.168.99.100:8080/alfresco/service/slingshot/doclib/doclist/all/site/swsdp/documentLibrary";
-                function error () {
-                    console.log("error");
+        HTMLImports.whenReady(function() {
+            Polymer({
+                is: "alfresco-file-list",
+
+                host: 'http://192.168.99.100:8080',
+
+                baseUrl: function(){
+                    return this.host + '/alfresco/service/slingshot/doclib/doclist/all/site/';
+                },
+
+                properties: {
+                    showSelection: {
+                        type: Boolean,
+                        value: true,
+                        observer: '_showSelectionChanged'
+                    }
+                },
+
+                goToFolder: function(event) {
+                    var slug= event.model.item.location.site + '/' + event.model.item.location.container + '/' + event.model.item.fileName
+                    console.log('click folder'+ this.baseUrl());
+                    this.fetchFolderFolder(slug);
+                },
+
+                ready: function() {
+                    var initialFolder = 'swsdp/documentLibrary';
+                    this.fetchFolderFolder(initialFolder);
+                    var self = this;
+                    if(document.querySelector("#alfresco-app")) {
+                        document.querySelector("#alfresco-app").uploadedSignal = function (e, detail, sender) {
+                            self.fetchFolderFolder(initialFolder);
+                        };
+                    }
+                },
+
+                fetchFolderFolder: function(slug) {
+                    function error () {
+                        console.log("error");
+                    }
+                    var xhr = new XMLHttpRequest();
+                    xhr.addEventListener("load", (XMLHttpRequestProgressEvent)=>{
+                        this.data =JSON.parse(XMLHttpRequestProgressEvent.currentTarget.response).items;
+                    });
+
+                    xhr.addEventListener("error", error);
+
+                    xhr.open("GET", (this.baseUrl() + slug));
+                    xhr.setRequestHeader("Authorization", 'Basic ' + btoa('admin:admin'));
+                    xhr.send();
+                },
+
+                thumbBaseUrl: function () {
+                    return this.host + '/share/proxy/alfresco/';
                 }
-                var xhr = new XMLHttpRequest();
-                xhr.addEventListener("load", (XMLHttpRequestProgressEvent)=>{
-                    this.data =JSON.parse(XMLHttpRequestProgressEvent.currentTarget.response).items;
-                });
-
-                xhr.addEventListener("error", error);
-
-                xhr.open("GET", this.url);
-                xhr.withCredentials = true;
-                xhr.setRequestHeader("Authorization", 'Basic ' + btoa('admin:admin'));
-                xhr.send();
-            }
-
+            });
         });
     </script>
 </dom-module>
diff --git a/demo-shell-ng2/webcomponents/file-upload/file-upload.html b/demo-shell-ng2/webcomponents/file-upload/file-upload.html
index 34915076f2..07a01d0394 100755
--- a/demo-shell-ng2/webcomponents/file-upload/file-upload.html
+++ b/demo-shell-ng2/webcomponents/file-upload/file-upload.html
@@ -17,13 +17,26 @@ Example:
 
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-progress/paper-progress.html">
-  <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../bower_components/iron-signals/iron-signals.html">
 
 <dom-module id="file-upload">
 
   <style type="text/css">
     :host {
-        display: inline-block;
+      width: 100%;
+      display: inline-block;
+    }
+
+    .file-upload-0 paper-button#button.file-upload{
+      float:left;
+    }
+
+    .file{
+      width: 100%;
+    }
+    .name{
+      width: 100%;
     }
 
     .enabled {
@@ -38,6 +51,7 @@ Example:
     }
 
     #UploadBorder{
+      width: 80%;
       vertical-align: middle;
       color: #555;
       padding: 20px;
@@ -53,6 +67,7 @@ Example:
     }
 
     paper-button#button {
+      font: 13px/1.231 Open Sans,arial,helvetica,clean,sans-serif;
       margin-bottom: 20px;
       @apply(--file-upload-button);
     }
@@ -99,7 +114,7 @@ Example:
 
     paper-button#button {
       margin-bottom: 20px;
-      background-color: aquamarine;
+      background-color: rgba(255, 152, 0, 0.75);
     }
   </style>
 
@@ -201,7 +216,7 @@ Example:
       */
       droptext: {
         type: String,
-        value: "Drop Files Here"
+        value: ""
       },
 
       /**
@@ -327,7 +342,9 @@ Example:
       if (this.droppable === 'true') {
         this._showDropText();
         this.setupDrop();
-      } else { this._hideDropText(); }
+      } else {
+        this._hideDropText();
+      }
     },
 
     /**
@@ -494,6 +511,9 @@ Example:
         if (xhr.status === 200) {
           self.fire("success", {xhr: xhr});
           self.set(prefix + ".complete", true);
+          if(document.querySelector("#alfresco-app")) {
+            document.querySelector('#alfresco-app').fire('iron-signal', {name: "uploaded", data: "uploaded!"});
+          }
         } else {
           self.set(prefix + ".error", true);
           self.set(prefix + ".complete", false);
@@ -505,5 +525,4 @@ Example:
       xhr.send(formData);
     }
   });
-
 </script>
