diff --git a/package-lock.json b/package-lock.json
index 6af40da21a92005f7b5f89f18624f7d2507026a0..c4e477ddbcbe7d07b685900dbf3f59d4ba36549c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
       "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
       "requires": {
-        "mime-types": "2.1.21",
+        "mime-types": "~2.1.18",
         "negotiator": "0.6.1"
       }
     },
@@ -32,15 +32,15 @@
       "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
       "requires": {
         "bytes": "3.0.0",
-        "content-type": "1.0.4",
+        "content-type": "~1.0.4",
         "debug": "2.6.9",
-        "depd": "1.1.2",
-        "http-errors": "1.6.3",
+        "depd": "~1.1.2",
+        "http-errors": "~1.6.3",
         "iconv-lite": "0.4.23",
-        "on-finished": "2.3.0",
+        "on-finished": "~2.3.0",
         "qs": "6.5.2",
         "raw-body": "2.3.3",
-        "type-is": "1.6.16"
+        "type-is": "~1.6.16"
       }
     },
     "bytes": {
@@ -125,36 +125,36 @@
       "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
       "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
       "requires": {
-        "accepts": "1.3.5",
+        "accepts": "~1.3.5",
         "array-flatten": "1.1.1",
         "body-parser": "1.18.3",
         "content-disposition": "0.5.2",
-        "content-type": "1.0.4",
+        "content-type": "~1.0.4",
         "cookie": "0.3.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
-        "depd": "1.1.2",
-        "encodeurl": "1.0.2",
-        "escape-html": "1.0.3",
-        "etag": "1.8.1",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
         "finalhandler": "1.1.1",
         "fresh": "0.5.2",
         "merge-descriptors": "1.0.1",
-        "methods": "1.1.2",
-        "on-finished": "2.3.0",
-        "parseurl": "1.3.2",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.2",
         "path-to-regexp": "0.1.7",
-        "proxy-addr": "2.0.4",
+        "proxy-addr": "~2.0.4",
         "qs": "6.5.2",
-        "range-parser": "1.2.0",
+        "range-parser": "~1.2.0",
         "safe-buffer": "5.1.2",
         "send": "0.16.2",
         "serve-static": "1.13.2",
         "setprototypeof": "1.1.0",
-        "statuses": "1.4.0",
-        "type-is": "1.6.16",
+        "statuses": "~1.4.0",
+        "type-is": "~1.6.16",
         "utils-merge": "1.0.1",
-        "vary": "1.1.2"
+        "vary": "~1.1.2"
       }
     },
     "finalhandler": {
@@ -163,12 +163,12 @@
       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
       "requires": {
         "debug": "2.6.9",
-        "encodeurl": "1.0.2",
-        "escape-html": "1.0.3",
-        "on-finished": "2.3.0",
-        "parseurl": "1.3.2",
-        "statuses": "1.4.0",
-        "unpipe": "1.0.0"
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.2",
+        "statuses": "~1.4.0",
+        "unpipe": "~1.0.0"
       }
     },
     "forwarded": {
@@ -186,10 +186,10 @@
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
       "requires": {
-        "depd": "1.1.2",
+        "depd": "~1.1.2",
         "inherits": "2.0.3",
         "setprototypeof": "1.1.0",
-        "statuses": "1.4.0"
+        "statuses": ">= 1.4.0 < 2"
       }
     },
     "iconv-lite": {
@@ -197,7 +197,7 @@
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
       "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
       "requires": {
-        "safer-buffer": "2.1.2"
+        "safer-buffer": ">= 2.1.2 < 3"
       }
     },
     "inherits": {
@@ -240,7 +240,7 @@
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.21.tgz",
       "integrity": "sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==",
       "requires": {
-        "mime-db": "1.37.0"
+        "mime-db": "~1.37.0"
       }
     },
     "morgan": {
@@ -248,11 +248,11 @@
       "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.1.tgz",
       "integrity": "sha512-HQStPIV4y3afTiCYVxirakhlCfGkI161c76kKFca7Fk1JusM//Qeo1ej2XaMniiNeaZklMVrh3vTtIzpzwbpmA==",
       "requires": {
-        "basic-auth": "2.0.1",
+        "basic-auth": "~2.0.0",
         "debug": "2.6.9",
-        "depd": "1.1.2",
-        "on-finished": "2.3.0",
-        "on-headers": "1.0.1"
+        "depd": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "on-headers": "~1.0.1"
       }
     },
     "ms": {
@@ -293,7 +293,7 @@
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
       "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==",
       "requires": {
-        "forwarded": "0.1.2",
+        "forwarded": "~0.1.2",
         "ipaddr.js": "1.8.0"
       }
     },
@@ -334,18 +334,18 @@
       "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
       "requires": {
         "debug": "2.6.9",
-        "depd": "1.1.2",
-        "destroy": "1.0.4",
-        "encodeurl": "1.0.2",
-        "escape-html": "1.0.3",
-        "etag": "1.8.1",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
         "fresh": "0.5.2",
-        "http-errors": "1.6.3",
+        "http-errors": "~1.6.2",
         "mime": "1.4.1",
         "ms": "2.0.0",
-        "on-finished": "2.3.0",
-        "range-parser": "1.2.0",
-        "statuses": "1.4.0"
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.0",
+        "statuses": "~1.4.0"
       }
     },
     "serve-static": {
@@ -353,9 +353,9 @@
       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
       "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
       "requires": {
-        "encodeurl": "1.0.2",
-        "escape-html": "1.0.3",
-        "parseurl": "1.3.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.2",
         "send": "0.16.2"
       }
     },
@@ -375,7 +375,7 @@
       "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
       "requires": {
         "media-typer": "0.3.0",
-        "mime-types": "2.1.21"
+        "mime-types": "~2.1.18"
       }
     },
     "unpipe": {
diff --git a/routes/index.js b/routes/index.js
index fd47a4a8d2c18a4dc080ee3121086f15b329bb28..63ea5409c0d750248d883724213ba5c70f7c303d 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -7,7 +7,7 @@ router.get('/', function(req, res, next) {
 });
 
 router.get('/files', function(req, res, next) {
-  res.json({model:'my files'})
+  res.json({model: [ { 'filename': 'test.jpg'} ,  {'filename': 'test2.jpg' } ] })
 });
 
 module.exports = router;
diff --git a/views/index.ejs b/views/index.ejs
index d7a39adbb5dfefb2a4105d1f86712ae8f3b89e88..7367fd1cffed3644592ea67dcd194f933df013cc 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -3,20 +3,46 @@
 <head>
   <title><%= title %></title>
   <link rel='stylesheet' href='/stylesheets/style.css' />
+  <script src="https://unpkg.com/vue"></script>
 </head>
 <body>
   <h1><%= title %></h1>
   <p>Welcome to <%= title %></p>
   <div id="files"></div>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+
+  <!-- Vue app element -->
+  <div id="app">
+     <table id="filelist" border="1">
+       <tr v-for="file in files">
+         <td>{{ file.name }}</td>
+         <td><input v-model="file.description" type="text" size="45"/>describe = {{ file.description }}</td>
+       </tr>
+     </table>
+  </div>
+  <!-- end Vue app element -->
+
+
   <script>
+
+
+
+
   var files = [];
   document.addEventListener("DOMContentLoaded", function(event) {
     axios.get('/files')
     .then(function (response) {
       // handle success
       console.log(response);
-      document.getElementById("files").innerHTML = response['data'].model;
+      console.log(response['data'].model);
+      new Vue({
+        el: "#app",
+        data: {
+          files: response['data'].model
+        }
+      });
+
+      //document.getElementById("files").innerHTML = response['data'].model;
     })
     .catch(function (error) {
       // handle error