diff --git a/src/vue-poc/features/collection/files.vue b/src/vue-poc/features/collection/files.vue
index 01799b9..4ed170e 100644
--- a/src/vue-poc/features/collection/files.vue
+++ b/src/vue-poc/features/collection/files.vue
@@ -4,7 +4,7 @@
  
 <v-card>
 
-<v-toolbar light>
+<v-toolbar >
     <v-btn icon :to="{query: { url: '/' }}">
      <v-icon >{{icon}}</v-icon>
      </v-btn>  
@@ -15,17 +15,22 @@
 				    </v-breadcrumbs-item>
 		    </v-breadcrumbs>
     </v-toolbar-title>
-  <v-toolbar-items>
-   <v-btn @click="search"><v-icon>search</v-icon></v-btn>
-   <v-btn @click="search"><v-icon>search</v-icon></v-btn>
-</v-toolbar-items>
+ 
     <v-spacer></v-spacer>
+
+    <v-toolbar-items v-if="!selected">
      <v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search"
    hide-details single-line  @keyup.enter="setfilter"></v-text-field>
-   
-     <v-btn icon @click="alert('todo')">     
-    <v-icon>view_module</v-icon>
+   <v-btn icon v-for="b in buttons" :key="b.icon" @click="action(b)">
+        <v-icon v-text="b.icon"></v-icon>
     </v-btn>
+</v-toolbar-items>
+
+    <v-toolbar-items v-if="selected">
+   <v-btn icon v-for="b in selopts" :key="b.icon" @click="action(b)">
+        <v-icon v-text="b.icon"></v-icon>
+    </v-btn>
+</v-toolbar-items>
  </v-toolbar>
  
   
@@ -46,7 +51,7 @@
 	          <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
 	        </v-list-tile-content>
 	        <v-list-tile-action>
-	          <v-btn icon ripple @click.stop="info(item)">
+	          <v-btn icon @click.stop="info(item)">
 	            <v-icon class="grey--text text--lighten-1">info</v-icon>
 	          </v-btn>
 	        </v-list-tile-action>
@@ -96,7 +101,7 @@
 <script>{
   
   props:["protocol"],
-  data:  function(){
+  data(){
     return { 
             url: "", 
             folders: [],
@@ -104,7 +109,22 @@
             q: "",
             busy: false,
             showInfo: false,
-            selected: null
+            selected: null,
+			buttons: [ 
+			    {method: this.todo, icon: "view_quilt"},
+            {method: this.add, icon: "add"},
+			    {method: this.todo, icon: "refresh"},
+			    {method: this.todo, icon: "sort"},
+			    {method: this.todo, icon: "select_all"}     
+],
+selopts: [
+			    {method: this.todo, icon: "delete"},
+			    {method: this.todo, icon: "content_copy"},
+			    {method: this.todo, icon: "content_cut"},
+			    {method: this.todo, icon: "text_format"},
+			    {method: this.todo, icon: "info"},
+			    {method: this.todo, icon: "share"}
+]
     }
   },
   methods:{
@@ -130,7 +150,13 @@
         });
       
     },
-  
+  action(b){
+      alert(b.icon)
+      b.method()
+  },
+    add(){
+      alert("add")
+    },
     setfilter(){
       console.log("TODO",this.q)
       this.$router.push({  query: {url:this.url,q:this.q }})
@@ -147,8 +173,8 @@
          this.$router.push({ name: 'jobShow', params: {job:job }})
       })
     },
-   search(){
-		alert("search")
+   todo(){
+		alert("todo")
      }
   },
   computed: {
diff --git a/src/vue-poc/features/home.vue b/src/vue-poc/features/home.vue
index 589520f..a753462 100644
--- a/src/vue-poc/features/home.vue
+++ b/src/vue-poc/features/home.vue
@@ -29,11 +29,12 @@
 </p>
 <ul>
 
-<li><router-link :to="{path:'files', query:{url:'/vue-poc/features/images/'}}">vue-poc image tasks</router-link></li>
+<li><router-link :to="{path:'files', query:{url:'/vue-poc/'}}">vue-poc files</router-link></li>
 <li><router-link :to="{path:'database', query:{url:'/vue-poc/'}}">vue-poc db</router-link></li>
 	<li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
 	<li><a href="/dba" target="new">DBA app</a></li>
 	<li><a href="/vue-poc/ui/database?url=%2Fvue-poc%2F" target="new">db</a></li>
+<li><router-link :to="{path:'files', query:{url:'/vue-poc/features/images/'}}">vue-poc image tasks</router-link></li>
 </ul>
 
 <v-btn floating="floating"> <v-icon>add</v-icon> 
diff --git a/src/vue-poc/features/tasks/model.build/model.vue b/src/vue-poc/features/tasks/model.build/model.vue
index 76e0ef4..fc3ab05 100644
--- a/src/vue-poc/features/tasks/model.build/model.vue
+++ b/src/vue-poc/features/tasks/model.build/model.vue
@@ -17,13 +17,13 @@
       <v-container fluid>
         <v-layout row wrap>
           
-          <v-flex xs6>
+          <v-flex xs12>
             <v-text-field    v-model="params.efolder"
               label="Folder containing model  definitions as xml"
             ></v-text-field>
           </v-flex>
         
-          <v-flex xs6>
+          <v-flex xs12>
             <v-text-field v-model="params.target"
               label="Path to xqm file to generate"  
             ></v-text-field>
diff --git a/src/vue-poc/features/tasks/tasks.vue b/src/vue-poc/features/tasks/tasks.vue
index ca89eb9..9ff378a 100644
--- a/src/vue-poc/features/tasks/tasks.vue
+++ b/src/vue-poc/features/tasks/tasks.vue
@@ -1,27 +1,32 @@
 <!DOCTYPE html>
 <template id="task">
  <v-container fluid>
-  <h3>Tasks</h3>
+  <h3>Available Tasks</h3>
   <ul>
-  <li>
-  <router-link to="tasks/model">model</router-link>
-  </li>
-  <li>
-  <router-link to="tasks/xqdoc">xqdoc</router-link>
-  </li>
-  <li>
-  <router-link to="tasks/vuecompile">vue compile</router-link>
+  <li  v-for="task in tasks" :key="task.to">
+  <router-link :to="task.to" v-text="task.text"></router-link>
   </li>
   </ul>
  </v-container>
 </template>
 
 <script>{
-  data:  function(){
+  data(){
     return {
-      message: 'Hello Vue.js!',
-      q:this.$route.query.q
+      tasks: [
+       {to: "tasks/model", text: "model"},
+       {to: "tasks/xqdoc", text: "xqdoc"},
+       {to: "tasks/vuecompile", text: "vue compile"}
+      ]
       }
-  }
+  },
+  methods:{
+    getTasks(){
+       alert("get tasks")
+    }
+   },
+  created(){
+    this.getTasks()
+   }
 }
 </script>
diff --git a/src/vue-poc/features/tasks/vue-compile/vuecompile.vue b/src/vue-poc/features/tasks/vue-compile/vuecompile.vue
index f0541e6..c006881 100644
--- a/src/vue-poc/features/tasks/vue-compile/vuecompile.vue
+++ b/src/vue-poc/features/tasks/vue-compile/vuecompile.vue
@@ -16,7 +16,7 @@
     <v-card-text>
       <v-container fluid>
         <v-layout row wrap>   
-          <v-flex xs6>
+          <v-flex xs12>
             <v-text-field    v-model="params.proj"
               label="vue project to compile"
             ></v-text-field>
diff --git a/src/vue-poc/features/tasks/xqdoc/xqdoc.vue b/src/vue-poc/features/tasks/xqdoc/xqdoc.vue
index abf1de1..a7f4300 100644
--- a/src/vue-poc/features/tasks/xqdoc/xqdoc.vue
+++ b/src/vue-poc/features/tasks/xqdoc/xqdoc.vue
@@ -17,13 +17,13 @@
       <v-container fluid>
         <v-layout row wrap>
           
-          <v-flex xs6>
+          <v-flex xs12>
             <v-text-field    v-model="params.efolder"
               label="Root Folder containing xq files"
             ></v-text-field>
           </v-flex>
         
-          <v-flex xs6>
+          <v-flex xs12>
             <v-text-field v-model="params.target"
               label="Path for xqdoc files"  
             ></v-text-field>
diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js
index 6a17c8a..6668c27 100644
--- a/src/vue-poc/static/app-gen.js
+++ b/src/vue-poc/static/app-gen.js
@@ -1,4 +1,4 @@
-// generated 2017-09-13T16:57:35.141+01:00
+// generated 2017-09-14T21:51:22.679+01:00
 
Vue.component('qd-fullscreen',{template:` 
 <a @click="toggle()" href="javascript:void(0);" title="Fullscreen toggle">
   <v-icon>{{ fullscreenIcon }}</v-icon>
@@ -626,11 +626,11 @@ Vue.filter('round', function(value, decimals) {
       <v-container fluid="">
         <v-layout row="" wrap="">
           
-          <v-flex xs6="">
+          <v-flex xs12="">
             <v-text-field v-model="params.efolder" label="Folder containing model  definitions as xml"></v-text-field>
           </v-flex>
         
-          <v-flex xs6="">
+          <v-flex xs12="">
             <v-text-field v-model="params.target" label="Path to xqm file to generate"></v-text-field>
           </v-flex>
            <v-flex xs12="">
@@ -698,11 +698,11 @@ Vue.filter('round', function(value, decimals) {
       <v-container fluid="">
         <v-layout row="" wrap="">
           
-          <v-flex xs6="">
+          <v-flex xs12="">
             <v-text-field v-model="params.efolder" label="Root Folder containing xq files"></v-text-field>
           </v-flex>
         
-          <v-flex xs6="">
+          <v-flex xs12="">
             <v-text-field v-model="params.target" label="Path for xqdoc files"></v-text-field>
           </v-flex>
         
@@ -781,7 +781,7 @@ Vue.filter('round', function(value, decimals) {
     <v-card-text>
       <v-container fluid="">
         <v-layout row="" wrap="">   
-          <v-flex xs6="">
+          <v-flex xs12="">
             <v-text-field v-model="params.proj" label="vue project to compile"></v-text-field>
           </v-flex>
         </v-layout>
@@ -835,27 +835,32 @@ Vue.filter('round', function(value, decimals) {
       );
       const Task=Vue.extend({template:` 
  <v-container fluid="">
-  <h3>Tasks</h3>
+  <h3>Available Tasks</h3>
   <ul>
-  <li>
-  <router-link to="tasks/model">model</router-link>
-  </li>
-  <li>
-  <router-link to="tasks/xqdoc">xqdoc</router-link>
-  </li>
-  <li>
-  <router-link to="tasks/vuecompile">vue compile</router-link>
+  <li v-for="task in tasks" :key="task.to">
+  <router-link :to="task.to" v-text="task.text"></router-link>
   </li>
   </ul>
  </v-container>
  `,
       
-  data:  function(){
+  data(){
     return {
-      message: 'Hello Vue.js!',
-      q:this.$route.query.q
+      tasks: [
+       {to: "tasks/model", text: "model"},
+       {to: "tasks/xqdoc", text: "xqdoc"},
+       {to: "tasks/vuecompile", text: "vue compile"}
+      ]
       }
-  }
+  },
+  methods:{
+    getTasks(){
+       alert("get tasks")
+    }
+   },
+  created(){
+    this.getTasks()
+   }
 }
 
       );
@@ -1479,6 +1484,59 @@ created(){
   }
 }
 
+      );
+      const Home=Vue.extend({template:` 
+
+<v-card hover="" raised=""> 
+<v-card-title class="pa-5 indigo">
+<div class="display-1 white--text text-xs-center">VUE-POC</div>
+<v-spacer></v-spacer>
+  <v-speed-dial v-model="fab" hover="" right="" direction="bottom" transition="slide-y-reverse-transition">
+      <v-btn slot="activator" class="blue darken-2" dark="" fab="" hover="" v-model="fab">
+        <v-icon>account_circle</v-icon>
+        <v-icon>close</v-icon>
+      </v-btn>
+      <v-btn fab="" dark="" small="" class="green">
+        <v-icon>edit</v-icon>
+      </v-btn>
+      <v-btn fab="" dark="" small="" class="indigo">
+        <v-icon>add</v-icon>
+      </v-btn>
+      <v-btn fab="" dark="" small="" class="red">
+        <v-icon>delete</v-icon>
+      </v-btn>
+    </v-speed-dial>
+ </v-card-title> 
+
+ <v-card-text>
+ 
+<p>
+	links
+</p>
+<ul>
+
+<li><router-link :to="{path:'files', query:{url:'/vue-poc/'}}">vue-poc files</router-link></li>
+<li><router-link :to="{path:'database', query:{url:'/vue-poc/'}}">vue-poc db</router-link></li>
+	<li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
+	<li><a href="/dba" target="new">DBA app</a></li>
+	<li><a href="/vue-poc/ui/database?url=%2Fvue-poc%2F" target="new">db</a></li>
+<li><router-link :to="{path:'files', query:{url:'/vue-poc/features/images/'}}">vue-poc image tasks</router-link></li>
+</ul>
+
+<v-btn floating="floating"> <v-icon>add</v-icon> 
+</v-btn> <qd-link href="/dba">REPLACED</qd-link> 
+  
+    </v-card-text> 
+</v-card> 
+	 `,
+      
+    data:  function(){
+      return { 
+              fab: false
+      }
+  }
+  }
+
       );
       const Tabs=Vue.extend({template:` 
   <v-tabs scroll-bars="">
@@ -2519,7 +2577,7 @@ created(){
  
 <v-card>
 
-<v-toolbar light="">
+<v-toolbar>
     <v-btn icon="" :to="{query: { url: '/' }}">
      <v-icon>{{icon}}</v-icon>
      </v-btn>  
@@ -2530,16 +2588,21 @@ created(){
 				    </v-breadcrumbs-item>
 		    </v-breadcrumbs>
     </v-toolbar-title>
-  <v-toolbar-items>
-   <v-btn @click="search"><v-icon>search</v-icon></v-btn>
-   <v-btn @click="search"><v-icon>search</v-icon></v-btn>
-</v-toolbar-items>
+ 
     <v-spacer></v-spacer>
+
+    <v-toolbar-items v-if="!selected">
      <v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.enter="setfilter"></v-text-field>
-   
-     <v-btn icon="" @click="alert('todo')">     
-    <v-icon>view_module</v-icon>
+   <v-btn icon="" v-for="b in buttons" :key="b.icon" @click="action(b)">
+        <v-icon v-text="b.icon"></v-icon>
     </v-btn>
+</v-toolbar-items>
+
+    <v-toolbar-items v-if="selected">
+   <v-btn icon="" v-for="b in selopts" :key="b.icon" @click="action(b)">
+        <v-icon v-text="b.icon"></v-icon>
+    </v-btn>
+</v-toolbar-items>
  </v-toolbar>
  
   
@@ -2560,7 +2623,7 @@ created(){
 	          <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
 	        </v-list-tile-content>
 	        <v-list-tile-action>
-	          <v-btn icon="" ripple="" @click.stop="info(item)">
+	          <v-btn icon="" @click.stop="info(item)">
 	            <v-icon class="grey--text text--lighten-1">info</v-icon>
 	          </v-btn>
 	        </v-list-tile-action>
@@ -2609,7 +2672,7 @@ created(){
       
   
   props:["protocol"],
-  data:  function(){
+  data(){
     return { 
             url: "", 
             folders: [],
@@ -2617,7 +2680,22 @@ created(){
             q: "",
             busy: false,
             showInfo: false,
-            selected: null
+            selected: null,
+			buttons: [ 
+			    {method: this.todo, icon: "view_quilt"},
+            {method: this.add, icon: "add"},
+			    {method: this.todo, icon: "refresh"},
+			    {method: this.todo, icon: "sort"},
+			    {method: this.todo, icon: "select_all"}     
+],
+selopts: [
+			    {method: this.todo, icon: "delete"},
+			    {method: this.todo, icon: "content_copy"},
+			    {method: this.todo, icon: "content_cut"},
+			    {method: this.todo, icon: "text_format"},
+			    {method: this.todo, icon: "info"},
+			    {method: this.todo, icon: "share"}
+]
     }
   },
   methods:{
@@ -2643,7 +2721,13 @@ created(){
         });
       
     },
-  
+  action(b){
+      alert(b.icon)
+      b.method()
+  },
+    add(){
+      alert("add")
+    },
     setfilter(){
       console.log("TODO",this.q)
       this.$router.push({  query: {url:this.url,q:this.q }})
@@ -2660,8 +2744,8 @@ created(){
          this.$router.push({ name: 'jobShow', params: {job:job }})
       })
     },
-   search(){
-		alert("search")
+   todo(){
+		alert("todo")
      }
   },
   computed: {
@@ -2737,58 +2821,6 @@ created(){
   }
 }
 
-      );
-      const Home=Vue.extend({template:` 
-
-<v-card hover="" raised=""> 
-<v-card-title class="pa-5 indigo">
-<div class="display-1 white--text text-xs-center">VUE-POC</div>
-<v-spacer></v-spacer>
-  <v-speed-dial v-model="fab" hover="" right="" direction="bottom" transition="slide-y-reverse-transition">
-      <v-btn slot="activator" class="blue darken-2" dark="" fab="" hover="" v-model="fab">
-        <v-icon>account_circle</v-icon>
-        <v-icon>close</v-icon>
-      </v-btn>
-      <v-btn fab="" dark="" small="" class="green">
-        <v-icon>edit</v-icon>
-      </v-btn>
-      <v-btn fab="" dark="" small="" class="indigo">
-        <v-icon>add</v-icon>
-      </v-btn>
-      <v-btn fab="" dark="" small="" class="red">
-        <v-icon>delete</v-icon>
-      </v-btn>
-    </v-speed-dial>
- </v-card-title> 
-
- <v-card-text>
- 
-<p>
-	links
-</p>
-<ul>
-
-<li><router-link :to="{path:'files', query:{url:'/vue-poc/features/images/'}}">vue-poc image tasks</router-link></li>
-<li><router-link :to="{path:'database', query:{url:'/vue-poc/'}}">vue-poc db</router-link></li>
-	<li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
-	<li><a href="/dba" target="new">DBA app</a></li>
-	<li><a href="/vue-poc/ui/database?url=%2Fvue-poc%2F" target="new">db</a></li>
-</ul>
-
-<v-btn floating="floating"> <v-icon>add</v-icon> 
-</v-btn> <qd-link href="/dba">REPLACED</qd-link> 
-  
-    </v-card-text> 
-</v-card> 
-	 `,
-      
-    data:  function(){
-      return { 
-              fab: false
-      }
-  }
-  }
-
       );
       const About=Vue.extend({template:` 
 <v-container>
diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html
index 622841f..bb50946 100644
--- a/src/vue-poc/static/app.html
+++ b/src/vue-poc/static/app.html
@@ -9,7 +9,7 @@
 <title>Vue Router Test</title>
 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
 <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
-<link href="https://unpkg.com/vuetify@0.15.6/dist/vuetify.min.css" rel="stylesheet" type="text/css">
+<link href="https://unpkg.com/vuetify@0.15.7/dist/vuetify.min.css" rel="stylesheet" type="text/css">
 <link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css"  rel="stylesheet" type="text/css">
 
 <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
@@ -35,7 +35,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
-<script src="https://unpkg.com/vuetify@0.15.6/dist/vuetify.min.js"></script>
+<script src="https://unpkg.com/vuetify@0.15.7/dist/vuetify.min.js"></script>
 <script src="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ace.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ext-language_tools.js"></script>