diff --git a/front-end/index.html b/front-end/index.html
index a9ef3cd..65c4f4e 100644
--- a/front-end/index.html
+++ b/front-end/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>front-end</title>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
   </head>
   <body>
     <div id="app"></div>
diff --git a/front-end/src/components/CommandList.vue b/front-end/src/components/CommandList.vue
index 2e4309c..9192ebe 100644
--- a/front-end/src/components/CommandList.vue
+++ b/front-end/src/components/CommandList.vue
@@ -1,14 +1,46 @@
 <template>
   <div class="commands">
     <h2 class="text-center">Commands</h2>
+    <ul>
+      <li  v-for="(command, index) in commands" class="">
+          <a href="#" :title="command.help"> {{ command.command }} </a>
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
-  export default {
+import store from '../store'
+
+export default {
+  created () {
+    this.getCommands()
+  },
+  data () {
+    return {
+      commands: {},
+    }
+  },
+  methods: {
+    getCommands() {
+      this.$http.get('http://127.0.0.1:5000/rspet/api/v1.1/help?state=' + this.hostState)
+      .then((response) => {
+        this.commands = response.body.commands
+      })
+      .catch((response) => {
+        console.log(response);
+      });
+    }
+  },
+  computed: {
+    hostState () {
+      return store.state.hostState;
+    }
+  },
+  watch: {
+    hostState: function() {
+      this.getCommands()
+    }
   }
+}
 </script>
-
-<style>
-
-</style>
diff --git a/front-end/src/components/HostsList.vue b/front-end/src/components/HostsList.vue
index 462d40b..9849701 100644
--- a/front-end/src/components/HostsList.vue
+++ b/front-end/src/components/HostsList.vue
@@ -2,36 +2,51 @@
   <div class="hosts">
     <h2 class='text-center'>Hosts</h2>
     <ul>
-      <li v-for="host in hosts">
-        <label><input type="checkbox" /> {{ host.hostname }} - {{ host.ip }} - {{ host.port }}</label>
+      <li v-for="(host, index) in hosts">
+        <label><input type="checkbox" name="host" :value="host.id" v-model="selectedHosts" /> {{ host.hostname }} - {{ host.ip }} - {{ host.port }}</label>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
-  export default {
-    created () {
-      this.getHosts()
-    },
-    data () {
-      return {
-        hosts: {}
+import store from '../store'
+
+export default {
+  created () {
+    this.getHosts()
+  },
+  data () {
+    return {
+      hosts: {},
+      selectedHosts: []
+    }
+  },
+  methods: {
+    getHosts() {
+      this.$http.get('http://localhost:5000/rspet/api/v1.0/hosts')
+      .then((response) => {
+        this.hosts = response.body.hosts;
+      })
+      .catch((response) => {
+        console.log(response);
+      });
+    }
+  },
+  watch: {
+    selectedHosts: function(hosts) {
+      if (hosts.length === 0) {
+        store.commit('setHostState', "basic");
       }
-    },
-    methods: {
-      getHosts () {
-        this.$http.get('http://localhost:5000/rspet/api/v1.0/hosts')
-        .then((response) => {
-          this.hosts = response.body.hosts
-          console.log(this.hosts)
-        })
-        .catch((response) => {
-          console.log(response);
-        });
+      else if (hosts.length === 1) {
+          store.commit('setHostState', "connected");
+      } else {
+        store.commit('setHostState', "multiple");
       }
+      store.commit('setCurrentHosts', hosts);
     }
   }
+}
 </script>
 
 <style>
diff --git a/front-end/src/components/SingleHost.vue b/front-end/src/components/SingleHost.vue
index 36b9991..89f5867 100644
--- a/front-end/src/components/SingleHost.vue
+++ b/front-end/src/components/SingleHost.vue
@@ -25,7 +25,6 @@
         this.$http.get('http://localhost:5000/rspet/api/v1.0/hosts')
         .then((response) => {
           this.hosts = response.body.hosts
-          console.log(this.hosts)
         })
         .catch((response) => {
           console.log(response);
diff --git a/front-end/src/main.js b/front-end/src/main.js
index 0f660de..7b428b6 100644
--- a/front-end/src/main.js
+++ b/front-end/src/main.js
@@ -9,15 +9,6 @@ import VueResource from 'vue-resource';
 
 Vue.use(VueResource);
 Vue.use(Vuex);
-// Vue.use(VueRouter);
-
-// const routes = [
-//   { path: '/', component: HostsList }
-// ];
-//
-// const router = new VueRouter({
-//   routes // short for routes: routes
-// });
 
 new Vue({
   el: '#app',
diff --git a/front-end/src/store.js b/front-end/src/store.js
new file mode 100644
index 0000000..806dd73
--- /dev/null
+++ b/front-end/src/store.js
@@ -0,0 +1,21 @@
+import Vuex from 'vuex'
+import Vue from 'vue'
+
+Vue.use(Vuex)
+
+var store = new Vuex.Store({
+  state: {
+    currentHosts: '',
+    hostState: 'basic'
+  },
+  mutations: {
+    setCurrentHosts (state, hosts) {
+      state.currentHosts = hosts
+    },
+    setHostState (state, hostState) {
+      state.hostState = hostState
+    }
+  }
+})
+
+export default store
