diff --git a/app.js b/app.js
index 7d8bd50..1f1d36d 100644
--- a/app.js
+++ b/app.js
@@ -4,9 +4,9 @@ logger = require('morgan'),
 cookieParser = require('cookie-parser'),
 bodyParser = require('body-parser'),
 app = express(),
-//jsonStore = reqlib('/lib/jsonStore.js'),
+jsonStore = reqlib('/lib/jsonStore.js'),
 cors = require('cors'),
-//store = reqlib('config/store.js'),
+store = reqlib('config/store.js'),
 debug = reqlib('/lib/debug')('App'),
 utils = reqlib('/lib/utils.js');
 
@@ -29,17 +29,19 @@ app.use(cors());
 
 //get settings
 app.get('/api/settings', function(req, res) {
-  var clients = [];
-  res.json({success:true, clients: clients});
+  res.json({success:true, clients: jsonStore.get(store.clients), values: jsonStore.get(store.values)});
+});
+
+//get clients
+app.get('/api/clients', function(req, res) {
+  res.json({success:true, clients: jsonStore.get(store.clients)});
 });
 
 //update settings
-app.post('/api/settings', function(req, res) {
-  jsonStore.put(store.settings, req.body)
+app.post('/api/clients', function(req, res) {
+  jsonStore.put(store.clients, req.body.clients)
   .then(data => {
     res.json({success: true, message: "Configuration updated successfully"});
-    gw.close();
-    startGateway();
   }).catch(err => {
     debug(err);
     res.json({success: false, message: err.message})
diff --git a/bin/www b/bin/www
index 14b7662..9f75111 100644
--- a/bin/www
+++ b/bin/www
@@ -4,88 +4,99 @@
  * Module dependencies.
  */
 
-var app = require('../app');
-var reqlib = require('app-root-path').require;
-var debug = reqlib('/lib/debug')('App');
-var http = require('http');
-
-/**
- * Get port from environment and store in Express.
- */
-
-var port = normalizePort(process.env.PORT || '8100');
-app.set('port', port);
-
-/**
- * Create HTTP server.
- */
-
-var server = http.createServer(app);
-
-/**
- * Listen on provided port, on all network interfaces.
- */
-
-server.listen(port);
-server.on('error', onError);
-server.on('listening', onListening);
-
-/**
- * Normalize a port into a number, string, or false.
- */
-
-function normalizePort(val) {
-  var port = parseInt(val, 10);
-
-  if (isNaN(port)) {
-    // named pipe
-    return val;
-  }
-
-  if (port >= 0) {
-    // port number
-    return port;
-  }
-
-  return false;
-}
-
-/**
- * Event listener for HTTP server "error" event.
- */
-
-function onError(error) {
-  if (error.syscall !== 'listen') {
-    throw error;
-  }
-
-  var bind = typeof port === 'string'
-    ? 'Pipe ' + port
-    : 'Port ' + port;
-
-  // handle specific listen errors with friendly messages
-  switch (error.code) {
-    case 'EACCES':
-      console.error(bind + ' requires elevated privileges');
-      process.exit(1);
-      break;
-    case 'EADDRINUSE':
-      console.error(bind + ' is already in use');
-      process.exit(1);
-      break;
-    default:
-      throw error;
-  }
-}
-
-/**
- * Event listener for HTTP server "listening" event.
- */
-
-function onListening() {
-  var addr = server.address();
-  var bind = typeof addr === 'string'
-    ? 'pipe ' + addr
-    : 'port ' + addr.port;
-  debug('Listening on ' + bind);
-}
+var app = require('../app')
+var reqlib = require('app-root-path').require
+var store = reqlib('/config/store.js')
+var debug = reqlib('/lib/debug')('App')
+var conf = reqlib('/config/app.js')
+var jsonStore = reqlib('/lib/jsonStore.js')
+var http = require('http')
+
+// jsonstore is a singleton instance that handles the json configuration files
+// used in the application. Init it before anything else than start app.
+// if jsonstore fails exit the application
+jsonStore.init(store)
+  .then((data) => {
+
+    /**
+     * Normalize a port into a number, string, or false.
+     */
+
+    function normalizePort(val) {
+      var port = parseInt(val, 10);
+
+      if (isNaN(port)) {
+        // named pipe
+        return val;
+      }
+
+      if (port >= 0) {
+        // port number
+        return port;
+      }
+
+      return false;
+    }
+
+    /**
+     * Event listener for HTTP server "error" event.
+     */
+
+    function onError(error) {
+      if (error.syscall !== 'listen') {
+        throw error;
+      }
+
+      var bind = typeof port === 'string' ?
+        'Pipe ' + port :
+        'Port ' + port;
+
+      // handle specific listen errors with friendly messages
+      switch (error.code) {
+        case 'EACCES':
+          console.error(bind + ' requires elevated privileges');
+          process.exit(1);
+          break;
+        case 'EADDRINUSE':
+          console.error(bind + ' is already in use');
+          process.exit(1);
+          break;
+        default:
+          throw error;
+      }
+    }
+
+    /**
+     * Event listener for HTTP server "listening" event.
+     */
+
+    function onListening() {
+      var addr = server.address();
+      var bind = typeof addr === 'string' ?
+        'pipe ' + addr :
+        'port ' + addr.port;
+      debug('Listening on ' + bind);
+    }
+
+    /**
+     * Get port from environment and store in Express.
+     */
+    var port = normalizePort(process.env.PORT || conf.port);
+    app.set('port', port);
+
+    /**
+     * Create HTTP server.
+     */
+
+    var server = http.createServer(app);
+
+    /**
+     * Listen on provided port, on all network interfaces.
+     */
+
+    server.listen(port);
+    server.on('error', onError);
+    server.on('listening', onListening);
+
+  })
+  .catch(err => debug(err))
diff --git a/config/app.js b/config/app.js
new file mode 100644
index 0000000..93e19ba
--- /dev/null
+++ b/config/app.js
@@ -0,0 +1,5 @@
+// config/app.js
+module.exports = {
+	'storeDir': 'store',
+	'port': 8100
+};
diff --git a/config/store.js b/config/store.js
new file mode 100644
index 0000000..adb496c
--- /dev/null
+++ b/config/store.js
@@ -0,0 +1,5 @@
+// config/store.js
+module.exports = {
+	'clients' : {file: 'clients.json', default: []} ,
+	'values' : {file: 'values.json', default: []} ,
+};
diff --git a/lib/jsonStore.js b/lib/jsonStore.js
new file mode 100644
index 0000000..5c91e77
--- /dev/null
+++ b/lib/jsonStore.js
@@ -0,0 +1,67 @@
+'use strict'
+
+// eslint-disable-next-line one-var
+var jsonfile = require('jsonfile'),
+  reqlib = require('app-root-path').require,
+  storeDir = reqlib('config/app.js').storeDir,
+  Promise = require('bluebird'),
+  debug = reqlib('/lib/debug')('Store'),
+  utils = reqlib('lib/utils.js')
+
+debug.color = 3
+
+function getFile (config) {
+  return new Promise((resolve, reject) => {
+    jsonfile.readFile(utils.joinPath(utils.getPath(true), storeDir, config.file), function (err, data) {
+      if (err && err.code !== 'ENOENT') {
+        reject(err)
+      } else {
+        if (err && err.code === 'ENOENT') { debug(config.file, 'not found') }
+
+        resolve({file: config.file, data: data || config.default})
+      }
+    })
+  })
+}
+
+/**
+Constructor
+**/
+function StorageHelper () {
+  this.store = {}
+}
+
+StorageHelper.prototype.init = function (config) {
+  return new Promise((resolve, reject) => {
+    storage_helper.config = config
+    Promise.map(Object.keys(config), function (model) {
+      return getFile(config[model])
+    }).then(results => {
+      for (var i = 0; i < results.length; i++) {
+        storage_helper.store[results[i].file] = results[i].data
+      }
+      resolve(storage_helper.store)
+    })
+      .catch(err => reject(err))
+  })
+}
+
+StorageHelper.prototype.get = function (model) {
+  if (storage_helper.store[model.file]) { return storage_helper.store[model.file] } else { throw Error('Requested file not present in store: ' + model.file) }
+}
+
+StorageHelper.prototype.put = function (model, data) {
+  return new Promise((resolve, reject) => {
+    jsonfile.writeFile(utils.joinPath(utils.getPath(true), storeDir, model.file), data, function (err) {
+      if (err) {
+        reject(err)
+      } else {
+        storage_helper.store[model.file] = data
+        resolve(storage_helper.store[model.file])
+      }
+    })
+  })
+}
+
+// eslint-disable-next-line camelcase
+var storage_helper = module.exports = exports = new StorageHelper()
diff --git a/package-lock.json b/package-lock.json
index 7dca24c..7fc97e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4143,8 +4143,7 @@
     "graceful-fs": {
       "version": "4.1.15",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
-      "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
-      "dev": true
+      "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
     },
     "growly": {
       "version": "1.3.0",
@@ -4885,6 +4884,15 @@
       "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
       "dev": true
     },
+    "jsonfile": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
+      "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
+      "requires": {
+        "graceful-fs": "4.1.15",
+        "universalify": "0.1.2"
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -9678,6 +9686,11 @@
         "imurmurhash": "0.1.4"
       }
     },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
diff --git a/package.json b/package.json
index d5537af..31226ca 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "ejs": "~2.5.7",
     "express": "~4.16.0",
     "http-errors": "~1.6.2",
+    "jsonfile": "^5.0.0",
     "morgan": "~1.9.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
diff --git a/src/App.vue b/src/App.vue
index 1a50890..0b630f8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app dark>
 
     <v-navigation-drawer
     clipped-left
@@ -73,6 +73,8 @@
 
 <script>
 
+import ConfigApis from "@/apis/ConfigApis";
+
 export default {
   name: 'app',
   methods: {
@@ -152,11 +154,30 @@ export default {
       ],
       drawer: false,
       topbar: [],
-      title: 'Configuration',
+      title: 'MQTT Clients',
       mini: true,
       snackbar: false,
       snackbarText: ""
     }
+  },
+  mounted() {
+    var self = this;
+
+    ConfigApis.getSettings()
+      .then(data => {
+        if (!data.success) {
+          self.showSnackbar(
+            "Error while retriving settings, check console"
+          );
+          console.log(response);
+        } else {
+          self.$store.dispatch("init", data);
+        }
+      })
+      .catch(e => {
+        self.showSnackbar("Error while retriving settings, check console");
+        console.log(e);
+      });
   },
 	watch: {
   	'$route': function(value) {
diff --git a/src/apis/ConfigApis.js b/src/apis/ConfigApis.js
index 24be53c..c127a06 100644
--- a/src/apis/ConfigApis.js
+++ b/src/apis/ConfigApis.js
@@ -3,26 +3,28 @@ import axios from 'axios'
 import { loadProgressBar } from 'axios-progress-bar'
 
 if (process.env.NODE_ENV === 'development') {
-  axios.defaults.socketUrl = location.protocol + '//' + location.hostname + ':' + process.env.PORT
   axios.defaults.baseURL = axios.defaults.socketUrl + '/api'
 } else {
-  var port = parseInt(window.location.port) || (window.location.protocol === 'https:' ? 443 : 80)
-  axios.defaults.socketUrl = location.protocol + '//' + location.hostname + ':' + port
   axios.defaults.baseURL = '/api'
 }
 
 loadProgressBar()
 
 export default{
-  getSocketIP () { return axios.defaults.socketUrl },
-  getConfig () {
+  getSettings () {
     return axios.get('/settings')
       .then(response => {
         return response.data
       })
   },
-  updateConfig (data) {
-    return axios.post('/settings', data)
+  getClients () {
+    return axios.get('/clients')
+      .then(response => {
+        return response.data
+      })
+  },
+  updateClients (data) {
+    return axios.post('/clients', data)
       .then(response => {
         return response.data
       })
diff --git a/src/components/MqttClients.vue b/src/components/MqttClients.vue
index 2bf3137..e0332d5 100644
--- a/src/components/MqttClients.vue
+++ b/src/components/MqttClients.vue
@@ -1,50 +1,81 @@
 /* eslint-disable */
 
 <template>
-  <v-container fluid grid-list-md>
+  <v-container fluid>
     <v-card>
       <v-card-text>
-        
-        <v-btn color="blue darken-1" flat @click="dialogValue = true">New Value</v-btn>
-
         <v-data-table
           :headers="headers"
-          :items="gateway.values"
+          :items="clients"
           :rows-per-page-items="[10, 20, {'text':'All','value':-1}]"
           class="elevation-1"
         >
           <template slot="items" slot-scope="props">
-            <td>{{ deviceName(props.item.device) }}</td>
-            <td>{{ props.item.value.label + ' (' + props.item.value.value_id + ')' }}</td>
-            <td class="text-xs">{{ props.item.topic }}</td>
-            <td class="text-xs">{{ props.item.postOperation || 'No operation' }}</td>
-            <td
-              class="text-xs"
-            >{{ props.item.enablePoll ? ("Intensity " + props.item.pollIntensity) : 'No' }}</td>
-            <td class="text-xs">{{ props.item.verifyChanges ? "Verified" : 'Not Verified' }}</td>
+            <td>{{ props.item.name }}</td>
+            <td>{{ props.item.host }}</td>
+            <td>{{ props.item.port }}</td>
+            <td>{{ props.item.reconnectPeriod }}</td>
+            <td>{{ props.item.auth ? 'Required' : 'Not Required' }}</td>
+            <td>{{ props.item.clean ? 'Yes' : 'No' }}</td>
             <td class="justify-center layout px-0">
-              <v-icon small class="mr-2" color="green" @click="editItem(props.item)">edit</v-icon>
-              <v-icon small color="red" @click="deleteItem(props.item)">delete</v-icon>
+              <v-btn icon class="mx-0" @click="editItem(props.item)">
+                <v-icon color="teal">edit</v-icon>
+              </v-btn>
+              <v-btn icon class="mx-0" @click="deleteItem(props.item)">
+                <v-icon color="pink">delete</v-icon>
+              </v-btn>
+              <v-btn icon class="mx-0" @click="cloneItem(props.item)">
+                <v-icon>content_copy</v-icon>
+              </v-btn>
             </td>
           </template>
         </v-data-table>
       </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="purple darken-1" flat @click="importSettings">
-          Import
-          <v-icon right dark>file_upload</v-icon>
-        </v-btn>
-        <v-btn color="green darken-1" flat @click="exportSettings">
-          Export
-          <v-icon right dark>file_download</v-icon>
-        </v-btn>
-        <v-btn color="blue darken-1" flat type="submit" form="form_settings">
-          Save
-          <v-icon right dark>save</v-icon>
-        </v-btn>
-      </v-card-actions>
     </v-card>
+
+    <!--FAB-->
+    <v-speed-dial light fab fixed bottom right v-model="fab">
+      <template v-slot:activator>
+        <v-btn slot="activator" color="blue darken-2" dark fab hover v-model="fab">
+          <v-icon>add</v-icon>
+          <v-icon>close</v-icon>
+        </v-btn>
+      </template>
+
+      <v-btn fab dark small color="green" @click.stop="dialogValue = true">
+        <v-icon>add_box</v-icon>
+      </v-btn>
+
+      <!-- <v-btn
+        v-if="selected && selected.length > 0"
+        fab
+        dark
+        small
+        color="red"
+        @click.stop="deleteSelected()"
+      >
+        <v-icon>delete</v-icon>
+      </v-btn>
+
+      <v-btn
+        v-if="selected && selected.length > 0"
+        fab
+        dark
+        small
+        color="yellow"
+        @click.stop="cloneSelected()"
+      >
+        <v-icon>content_copy</v-icon>
+      </v-btn>-->
+    </v-speed-dial>
+
+    <DialogClient
+      @save="saveValue"
+      @close="closeDialog"
+      v-model="dialogValue"
+      :title="dialogTitle"
+      :editedValue="editedValue"
+    />
   </v-container>
 </template>
 
@@ -52,50 +83,72 @@
 import { mapGetters } from "vuex";
 import ConfigApis from "@/apis/ConfigApis";
 
+import DialogClient from '@/components/dialogs/Mqtt_Client'
+
 export default {
   name: "Settings",
-  computed: {},
+  components:{
+    DialogClient
+  },
+  computed: {
+    dialogTitle () {
+      return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
+    },
+    ...mapGetters(["clients"])
+  },
+  watch: {
+    dialogValue (val) {
+      val || this.closeDialog()
+    }
+  },
   data() {
     return {
-      rules: {
-        required: value => {
-          var valid = false;
-
-          if (value instanceof Array) valid = value.length > 0;
-          else valid = !!value || value === 0;
-
-          return valid || "This field is required.";
-        },
-        validName: value => {
-          return (
-            !/[!@#$%^&*)(+=:,;"'\\|?{}£°§<>[\]/.\s]/g.test(value) ||
-            'Name is not valid, only "a-z" "A-Z" "0-9" chars and "_" are allowed'
-          );
-        }
-      }
+      dialogValue: false,
+      editedValue: {},
+      editedIndex: -1,
+      defaultValue: {},
+      headers: [
+        { text: "Name", value: "name" },
+        { text: "Host", value: "host" },
+        { text: "Port", value: "port" },
+        { text: "Reconnect (ms)", value: "reconnectPeriod" },
+        { text: "Auth", value: "auth" },
+        { text: "Clean", value: "clean" },
+        { text: "Actions", sortable: false }
+      ],
+      fab: false,
     };
   },
   methods: {
     showSnackbar(text) {
       this.$emit("showSnackbar", text);
     },
-    importSettings() {
-      var self = this;
-      this.$emit("import", "json", function(err, settings) {
-        if (settings.zwave && settings.mqtt && settings.gateway) {
-          self.$store.dispatch("import", settings);
-          self.showSnackbar("Configuration imported successfully");
-        } else {
-          self.showSnackbar("Imported settings not valid");
-        }
-      });
+    editItem (item) {
+      this.editedIndex = this.clients.indexOf(item)
+      this.editedValue = Object.assign({}, item)
+      this.dialogValue = true
+    },
+    deleteItem (item) {
+      const index = this.clients.indexOf(item)
+      confirm('Are you sure you want to delete this item?') && this.clients.splice(index, 1)
+    },
+    cloneItem (item) {
+      this.clients.push(Object.assign({}, item))
     },
-    exportSettings() {
-      var settings = this.getSettingsJSON();
-      this.$emit("export", settings, "settings");
+    closeDialog () {
+      this.dialogValue = false
+      setTimeout(() => {
+        this.editedValue = Object.assign({}, this.defaultItem)
+        this.editedIndex = -1
+      }, 300)
     },
-    getSettingsJSON() {
-      return this.settings;
+    saveValue () {
+      if (this.editedIndex > -1) {
+        Object.assign(this.clients[this.editedIndex], this.editedValue)
+      } else {
+        this.clients.push(this.editedValue)
+      }
+      this.closeDialog()
     },
     update() {
       if (this.$refs.form_settings.validate()) {
@@ -111,25 +164,6 @@ export default {
         this.showSnackbar("Your configuration contains errors, fix it");
       }
     }
-  },
-  mounted() {
-    // var self = this;
-    // this.$store.dispatch("init", data);
-    // ConfigApis.getConfig()
-    //   .then(data => {
-    //     if (!data.success) {
-    //       self.showSnackbar(
-    //         "Error while retriving configuration, check console"
-    //       );
-    //       console.log(response);
-    //     } else {
-    //       self.$store.dispatch("init", data);
-    //     }
-    //   })
-    //   .catch(e => {
-    //     self.showSnackbar("Error while retriving configuration, check console");
-    //     console.log(e);
-    //   });
   }
 };
 </script>
diff --git a/src/components/dialogs/DialogGatewayValue.vue b/src/components/dialogs/DialogGatewayValue.vue
deleted file mode 100644
index 458bee3..0000000
--- a/src/components/dialogs/DialogGatewayValue.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <v-dialog v-model="value" max-width="500px" persistent>
-    <v-card>
-      <v-card-title>
-        <span class="headline">{{ title }}</span>
-      </v-card-title>
-
-      <v-card-text>
-        <v-container grid-list-md>
-          <v-form v-model="valid" ref="form" lazy-validation>
-            <v-layout wrap>
-              <v-flex xs12>
-                <v-select
-                v-model="editedValue.device"
-                label="Device"
-                required
-                :rules="[required]"
-                item-text="name"
-                :items="devices"
-                ></v-select>
-              </v-flex>
-              <v-flex xs12>
-                <v-select
-                v-model="editedValue.value"
-                label="Value"
-                required
-                return-object
-                :rules="[required]"
-                item-text="label"
-                item-value="value_id"
-                :items="deviceValues"
-                ></v-select>
-              </v-flex>
-              <v-flex xs12>
-                <v-text-field
-                v-model.trim="editedValue.topic"
-                label="Topic"
-                :rules="[requiredTopic]"
-                required
-                >
-              </v-text-field>
-            </v-flex>
-            <v-flex xs12>
-              <v-text-field
-              v-model="editedValue.postOperation"
-              label="Post operation"
-              hint="Example: '/10' '*100' '+20'"
-              required
-              >
-            </v-text-field>
-          </v-flex>
-          <v-flex xs6>
-            <v-switch
-            label="Poll"
-            hint="Enable poll of this value"
-            persistent-hint
-            v-model="editedValue.enablePoll"
-            ></v-switch>
-          </v-flex>
-        <v-flex v-if="editedValue.enablePoll" xs6>
-            <v-text-field
-            v-model.number="editedValue.pollIntensity"
-            label="Poll intensity"
-            :rules="[requiredIntensity]"
-            required
-            type="number"
-            >
-          </v-text-field>
-        </v-flex>
-
-        <v-flex xs6>
-            <v-switch
-            label="Verify changes"
-            hint="Verify changes of this value"
-            persistent-hint
-            v-model="editedValue.verifyChanges"
-            ></v-switch>
-        </v-flex>
-
-      </v-layout>
-    </v-form>
-  </v-container>
-</v-card-text>
-
-<v-card-actions>
-  <v-spacer></v-spacer>
-  <v-btn color="blue darken-1" flat @click="$emit('close')">Cancel</v-btn>
-  <v-btn color="blue darken-1" flat @click="$refs.form.validate() && $emit('save')">Save</v-btn>
-</v-card-actions>
-</v-card>
-</v-dialog>
-</template>
-
-<script>
-
-export default {
-  props: {
-    value: Boolean,
-    gw_type: Number,
-    title: String,
-    editedValue: Object,
-    devices: Array
-  },
-  watch: {
-    value(val){
-      this.$refs.form.resetValidation();
-    }
-  },
-  computed:{
-    deviceValues(){
-      var device = this.devices.find(d => d.value == this.editedValue.device);
-      return device ? device.values : [];
-    },
-    requiredIntensity(){
-      return (!this.editedValue.enablePoll || (this.editedValue.enablePoll && this.editedValue.pollIntensity > 0)) || 'Min value is 1'
-    },
-    requiredTopic(){
-      return (this.gw_type != 2 || !!this.editedValue.topic) || "Topic required";
-    }
-  },
-  data() {
-    return {
-      valid: true,
-      required: v => !!v || 'This field is required',
-    }
-  }
-}
-</script>
diff --git a/src/components/dialogs/Mqtt_Client.vue b/src/components/dialogs/Mqtt_Client.vue
new file mode 100644
index 0000000..99de456
--- /dev/null
+++ b/src/components/dialogs/Mqtt_Client.vue
@@ -0,0 +1,151 @@
+<template>
+  <v-dialog v-model="value" max-width="500px" persistent>
+    <v-card>
+      <v-card-title>
+        <span class="headline">{{ title }}</span>
+      </v-card-title>
+
+      <v-card-text>
+        <v-container grid-list-md>
+          <v-form v-model="valid" ref="form" lazy-validation>
+            <v-layout wrap>
+              <v-flex xs12>
+                <v-text-field
+                  v-model="editedValue.name"
+                  label="Name"
+                  :rules="[rules.required]"
+                  hint="A friendly name to describe this client"
+                  required
+                ></v-text-field>
+              </v-flex>
+              <v-flex xs12 sm6 md4>
+                <v-text-field
+                  v-model="editedValue.host"
+                  label="Host url"
+                  :rules="[rules.required]"
+                  hint="The host url"
+                  required
+                ></v-text-field>
+              </v-flex>
+              <v-flex xs12 sm6 md4>
+                <v-text-field
+                  v-model.number="editedValue.port"
+                  label="Port"
+                  :rules="[rules.required]"
+                  hint="Host Port"
+                  required
+                  type="number"
+                ></v-text-field>
+              </v-flex>
+              <v-flex xs12 sm6 md4>
+                <v-text-field
+                  v-model.number="editedValue.reconnectPeriod"
+                  label="Reconnect period (ms)"
+                  hint="Reconnection period"
+                  :rules="[rules.required]"
+                  required
+                  type="number"
+                ></v-text-field>
+              </v-flex>
+              <v-flex xs6>
+                <v-switch
+                  hint="Enable this to use in memory store instead of persistent store for QoS > 0 packets"
+                  persistent-hint
+                  label="In memory store"
+                  v-model="editedValue.memoryStore"
+                ></v-switch>
+              </v-flex>
+              <v-flex xs6>
+                <v-switch
+                  hint="If true the client does not have a persistent session and all information are lost when the client disconnects for any reason"
+                  persistent-hint
+                  label="Clean"
+                  v-model="editedValue.clean"
+                ></v-switch>
+              </v-flex>
+              <v-flex xs12>
+                <v-switch
+                  hint="Does this client require auth?"
+                  persistent-hint
+                  label="Auth"
+                  v-model="editedValue.auth"
+                ></v-switch>
+              </v-flex>
+              <v-flex v-if="editedValue.auth" xs12 sm6>
+                <v-text-field
+                  v-model="editedValue.username"
+                  label="Username"
+                  :rules="[requiredUser]"
+                  required
+                ></v-text-field>
+              </v-flex>
+              <v-flex v-if="editedValue.auth" xs12 sm6>
+                <v-text-field
+                  v-model="editedValue.password"
+                  label="Password"
+                  :rules="[requiredPassword]"
+                  required
+                  :append-icon="e1 ? 'visibility' : 'visibility_off'"
+                  @click:append="() => (e1 = !e1)"
+                  :type="e1 ? 'password' : 'text'"
+                ></v-text-field>
+              </v-flex>
+            </v-layout>
+          </v-form>
+        </v-container>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" flat @click="$emit('close')">Cancel</v-btn>
+        <v-btn color="blue darken-1" flat @click="$refs.form.validate() && $emit('save')">Save</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    title: String,
+    editedValue: Object,
+  },
+  watch: {
+    value(val) {
+      this.$refs.form.resetValidation();
+    }
+  },
+  computed: {
+    requiredUser(){
+      return (this.editedValue.auth && !!this.editedValue.username) || 'This field is required.'
+    },
+    requiredPassword(){
+      return (this.editedValue.auth && !!this.editedValue.password) || 'This field is required.'
+    },
+  },
+  data() {
+    return {
+      valid: true,
+      required: v => !!v || "This field is required",
+      e1: false,
+      rules: {
+        required: value => {
+          var valid = false;
+
+          if (value instanceof Array) valid = value.length > 0;
+          else valid = !!value || value === 0;
+
+          return valid || "This field is required.";
+        },
+        validName: value => {
+          return (
+            !/[!@#$%^&*)(+=:,;"'\\|?{}£°§<>[\]/.\s]/g.test(value) ||
+            'Name is not valid, only "a-z" "A-Z" "0-9" chars and "_" are allowed'
+          );
+        }
+      }
+    };
+  }
+};
+</script>
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 9da52ba..97d75a1 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -1,26 +1,24 @@
 export const state = {
-  settings: {}
+  clients: [],
+  values: []
 }
 
 export const getters = {
-  settings: state => state.settings
+  clients: state => state.clients,
+  values: values => state.values
 }
 
 export const actions = {
   init (store, data) {
     if(data){
-      store.commit('initSettings', data.settings);
+      store.commit('initSettings', data);
     }
-  },
-  import (store, settings) {
-    store.commit('initSettings', settings);
   }
 }
 
 export const mutations = {
-  initSettings(state, conf){
-    if(conf){
-      state.settings = conf.settings || {};
-    }
+  initSettings(state, data){
+      state.clients = data.clients || [];
+      state.values = data.values || [];
   }
 }