diff --git a/app.js b/app.js
index 62dff0d03aeddb3cfc3e10ded315193fcf00f4c4..d2e41262b595200bb1ef7142ee614d7a4d83a2fa 100644
--- a/app.js
+++ b/app.js
@@ -38,4 +38,6 @@ app.use(function(err, req, res, next) {
   res.render('error');
 });
 
+
+
 module.exports = app;
diff --git a/routes/index.js b/routes/index.js
index bf01d5fd421e9de27144b8f2eb69a03ce27a66d7..12a51a70398742f6b5fd4dbc2f9ae0575b4cd564 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -1,19 +1,37 @@
 var express = require('express');
 var router = express.Router();
+var app = express();  
 var shell = require("shelljs");
 
+
+var path = require("path");
+
 /* GET home page. */
+
+
+app.use(express.static('bin'))
+
 router.get('/', function(req, res, next) {
   res.render('index', { title: 'Describo' });
 });
 
+
 router.get('/files', function(req, res, next) {
   files = []
-  for (let f of shell.ls(".")) {
-    files.push({"filename": f})
-
+  dirs = []
+  
+  var dir_path = req.query.path;
+  var up_path = path.resolve(dir_path + "/..");
+  for (let f of shell.ls(dir_path)) {
+    console.log(f)
+    var absolutePath = path.resolve(path.join(dir_path, f));
+    if (shell.test('-d', absolutePath)) {
+      dirs.push({"absolute": absolutePath, "name": f})
+    } else {  
+    files.push({"filename": f, "name": f, "@id": absolutePath})
+    }
   }
-  res.json(files)
+  res.json({"files": files, "dirs" : dirs, "up": up_path})
 });
 
 module.exports = router;
diff --git a/views/index.ejs b/views/index.ejs
index e70d07d5a23a13a9e4f66ee6bbdfaf40fba531f3..a21420b8f6d995e78e63a2d4cb076585f1b1f57a 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -7,19 +7,51 @@
 </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.filename }}</td>
-         <td><input v-model="file.description" type="text" size="45"/>describe = {{ file.description }}</td>
-       </tr>
-     </table>
+    <div id="app">
+        <h1><a  v-bind:href="'?path=' + files.up">.. </a>(Get me outa here!)</h1>
+
+     <div id="filelist" border="1">
+       <div v-for="file in files.files">
+         <h1>{{ file.filename }}</h1>
+        
+         <table>
+            <tr>
+                <th>Name:</th>
+             <td><input v-model="file.name" type="text" size="45"/></td>
+            </tr>
+          <tr>
+            <th>Description:</th>
+         <td><input v-model="file.description" type="text" size="45"/></td>
+        </tr>
+        </table>
+        {{ file }}
+       </div>
+      </div>
+
+      <div id="filelist" border="1">
+          <ul v-for="dir in files.dirs">
+            <li><a v-bind:href="'?path=' + dir.absolute">{{ dir.name }}</a></li>
+          </ul>
+      </div>
+
+      <main>
+          <form @submit.prevent="submit">
+              <input type="text" v-model="name"> 
+               <button type="submit">
+                  Submit From Vue Property
+              </button>
+          </form>
+      </main>
+      
+      
+    
   </div>
+
+
   <!-- end Vue app element -->
 
 
@@ -28,9 +60,29 @@
 
 
 
+new Vue({
+   el : 'main',
+   data : {
+       name : ''
+   },
+   methods : {
+      submit(){
+          alert("HEre");
+          axios.post('/your-url', {name: this.name})
+          .then(res => {
+              // do something with res
+          })
+          .catch(err => {});
+      }
+   }
+});
+
+
   var files = [];
   document.addEventListener("DOMContentLoaded", function(event) {
-    axios.get('/files')
+    const urlParams = new URLSearchParams(window.location.search);
+     const path = urlParams.get('path');
+    axios.get('/files?path=' + path)
     .then(function (response) {
       // handle success
       console.log(response);
@@ -49,6 +101,7 @@
       console.log(error);
     })
     .then(function () {
+      console.log("done")
       // always executed
     });
   });