diff --git a/frontend/src/components/API.js b/frontend/src/components/API.js
index 63d5710f..d7ea415a 100644
--- a/frontend/src/components/API.js
+++ b/frontend/src/components/API.js
@@ -12,6 +12,10 @@ class Api {
     return axios.get('/api').then(response => (response.data))
   }
 
+  async core_save (obj) {
+    return axios.post('/api', obj).then(response => (response.data))
+  }
+
   async services () {
     return axios.get('/api/services').then(response => (response.data))
   }
@@ -20,6 +24,10 @@ class Api {
     return axios.get('/api/services/'+id).then(response => (response.data))
   }
 
+  async service_hits (id, start, end, group) {
+    return axios.get('/api/services/'+id+'/data?start=' + start + '&end=' + end + '&group=' + group).then(response => (response.data))
+  }
+
   async service_delete (id) {
     return axios.delete('/api/services/'+id).then(response => (response.data))
   }
diff --git a/frontend/src/components/Service/ServiceBlock.vue b/frontend/src/components/Service/ServiceBlock.vue
index 875ea6e5..ebe84de7 100644
--- a/frontend/src/components/Service/ServiceBlock.vue
+++ b/frontend/src/components/Service/ServiceBlock.vue
@@ -27,7 +27,7 @@
             </div>
 
             <div class="chart-container">
-                <div id="service_1"></div>
+                <ServiceChart service="service"/>
             </div>
 
             <div class="row lower_canvas full-col-12 text-white">
@@ -44,8 +44,11 @@
 </template>
 
 <script>
-export default {
+  import ServiceChart from "./ServiceChart";
+
+  export default {
   name: 'ServiceBlock',
+  components: {ServiceChart},
   props: {
     service: Object
   }
diff --git a/frontend/src/components/Service/ServiceChart.vue b/frontend/src/components/Service/ServiceChart.vue
new file mode 100644
index 00000000..104372a1
--- /dev/null
+++ b/frontend/src/components/Service/ServiceChart.vue
@@ -0,0 +1,60 @@
+<template>
+    <div>{{data}}</div>
+</template>
+
+<script>
+  import Api from "../../components/API"
+
+  export default {
+  name: 'ServiceChart',
+  props: {
+    service: {
+      type: Object,
+      required: true
+    }
+  },
+  async created() {
+    await this.chartHits()
+  },
+  methods: {
+    async chartHits() {
+      this.data = await Api.service_hits(this.props.service.id, 0, 99999999999, "minute")
+      this.series = [this.data]
+      this.ready = true
+    }
+  },
+  data () {
+    return {
+      ready: true,
+      data: null,
+      chartOptions: {
+        chart: {
+          id: 'vuechart-example',
+        },
+        xaxis: {
+          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
+        },
+      },
+      series: [{
+        name: 'Vue Chart',
+        data: [30, 40, 45, 50, 49, 60, 70, 81]
+      }]
+    }
+  },
+  mounted() {
+    const max = 90;
+    const min = 20;
+    const newData = this.series[0].data.map(() => {
+      return Math.floor(Math.random() * (max - min + 1)) + min
+    })
+    // In the same way, update the series option
+    this.series = [{
+      data: newData
+    }]
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>
diff --git a/frontend/src/forms/CoreSettings.vue b/frontend/src/forms/CoreSettings.vue
index 6b7ee7a3..b0c2006a 100644
--- a/frontend/src/forms/CoreSettings.vue
+++ b/frontend/src/forms/CoreSettings.vue
@@ -1,5 +1,5 @@
 <template>
-    <form @submit="saveSettings" method="POST">
+    <form @submit="saveSettings">
         <div class="form-group">
             <label>Project Name</label>
             <input v-model="core.name" type="text" class="form-control" placeholder="Great Uptime">
@@ -19,10 +19,10 @@
                 <label class="d-inline d-sm-none">Enable CDN</label>
                 <label class="d-none d-sm-block">Enable CDN</label>
                 <span class="switch">
-                                        <input v-model="core.using_cdn" type="checkbox" class="switch" v-bind:disabled="core.using_cdn">
-                                        <label class="mt-2 mt-sm-0"></label>
-                                    </span>
-                <input v-model="core.using_cdn" type="hidden" name="enable_cdn" id="switch-normal-value" value="false">
+                    <input @change="core.using_cdn = !core.using_cdn" type="checkbox" name="admin" class="switch" id="switch-normal">
+                    <label for="switch-normal"></label>
+                    <input type="hidden" name="admin" id="switch-normal-value">
+                  </span>
             </div>
         </div>
 
@@ -112,8 +112,11 @@
       }
     },
     methods: {
-        saveSettings () {
-
+        async saveSettings (e) {
+          e.preventDefault()
+          await Api.core_save(this.core)
+          const core = await Api.core()
+          this.$store.commit('setCore', core)
         },
         async renewApiKeys () {
             let r = confirm("Are you sure you want to reset the API keys?");
diff --git a/frontend/src/forms/InputSwitch.vue b/frontend/src/forms/InputSwitch.vue
new file mode 100644
index 00000000..dddb3554
--- /dev/null
+++ b/frontend/src/forms/InputSwitch.vue
@@ -0,0 +1,43 @@
+<template>
+    <span class="switch">
+        <input @change="toggle" type="checkbox" :name="name" class="switch" id="switch-normal" :value="value">
+        <label for="switch-normal">{{label}}</label>
+        <input type="hidden" :name="name" id="switch-normal-value" :value="value">
+      </span>
+</template>
+
+<script>
+
+export default {
+  name: 'InputSwitch',
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    toggle() {
+      this.$emit('input', {
+        value: !this.props.value
+      })
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>
diff --git a/frontend/src/forms/Notifier.vue b/frontend/src/forms/Notifier.vue
new file mode 100644
index 00000000..21aa57ef
--- /dev/null
+++ b/frontend/src/forms/Notifier.vue
@@ -0,0 +1,98 @@
+<template>
+    <form class="ajax_form command">
+        <h4 class="text-capitalize">{{notifier.title}}</h4>
+        <p class="small text-muted" v-html="notifier.description"></p>
+
+        <div v-for="(form, index) in notifier.form" v-bind:key="index" class="form-group">
+            <label class="text-capitalize">{{form.title}}</label>
+
+            <input v-if="form.type === 'text' || 'number' || 'password'" v-model="notifier[notifier.field]" :type="form.type" class="form-control" :placeholder="form.placeholder" >
+
+            <small class="form-text text-muted" v-html="form.small_text"></small>
+
+        </div>
+
+        <div class="row">
+            <div class="col-9 col-sm-6">
+                <div class="input-group mb-2">
+                    <div class="input-group-prepend">
+                        <div class="input-group-text">Limit</div>
+                    </div>
+                    <input type="number" class="form-control" name="limits" min="1" max="60" id="limits_per_hour_command" value="3" placeholder="7">
+                    <div class="input-group-append">
+                        <div class="input-group-text">Per Minute</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-3 col-sm-2 mt-1">
+                <span class="switch">
+                    <input @change="notifier.enabled = !notifier.enabled" type="checkbox" name="enabled-option" class="switch" v-bind:id="`switch-${notifier.method}`" >
+                    <label v-bind:for="`switch-${notifier.method}`"></label>
+                    <input type="hidden" name="enabled" v-bind:id="`switch-${notifier.method}`">
+                </span>
+            </div>
+
+            <div class="col-12 col-sm-4 mb-2 mb-sm-0 mt-2 mt-sm-0">
+                <button type="submit" class="btn btn-primary btn-block text-capitalize"><i class="fa fa-check-circle"></i> Save</button>
+            </div>
+
+            <div class="col-12 col-sm-12">
+                <button class="test_notifier btn btn-secondary btn-block text-capitalize col-12 float-right"><i class="fa fa-vial"></i> Test Notifier</button>
+            </div>
+
+            <div class="col-12 col-sm-12 mt-2">
+                <div class="alert alert-danger d-none" id="command-error" role="alert">
+                    <i class="fa fa-exclamation-triangle"></i> {{notifier.method}} has an error!
+                </div>
+
+                <div class="alert alert-success d-none" id="command-success" role="alert">
+                    <i class="fa fa-smile-beam"></i> The {{notifier.method}} notifier is working correctly!
+                </div>
+            </div>
+        </div>
+
+        <span class="d-block small text-center mt-3 mb-5">
+                                <span class="text-capitalize">{{notifier.title}}</span> Notifier created by <a :href="notifier.author_url" target="_blank">{{notifier.author}}</a>
+                            </span>
+
+        <div class="alert alert-danger d-none" id="alerter" role="alert"></div>
+    </form>
+</template>
+
+<script>
+  import Api from "../components/API";
+
+  export default {
+  name: 'Notifier',
+  props: {
+    notifier: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      notifier: {
+
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    async saveGroup(e) {
+      e.preventDefault();
+      const data = {name: this.group.name, public: this.group.public}
+      await Api.group_create(data)
+      const groups = await Api.groups()
+      this.$store.commit('setGroups', groups)
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>
diff --git a/frontend/src/forms/User.vue b/frontend/src/forms/User.vue
index f6f9492e..7058d1c2 100644
--- a/frontend/src/forms/User.vue
+++ b/frontend/src/forms/User.vue
@@ -6,11 +6,11 @@
                 <input v-model="user.username" type="text" class="form-control" placeholder="Username" required autocorrect="off" autocapitalize="none">
             </div>
             <div class="col-6 col-md-4">
-                          <span class="switch">
-                            <input type="checkbox" name="admin" class="switch" id="switch-normal">
-                            <label for="switch-normal">Administrator</label>
-                            <input v-model="user.admin" type="hidden" name="admin" id="switch-normal-value" value="false">
-                          </span>
+                  <span class="switch">
+                    <input @change="user.admin = !user.admin" type="checkbox" name="admin" class="switch" id="switch-normal">
+                    <label for="switch-normal">Administrator</label>
+                    <input type="hidden" name="admin" id="switch-normal-value">
+                  </span>
             </div>
         </div>
         <div class="form-group row">
@@ -41,9 +41,9 @@
 </template>
 
 <script>
-import Api from "../components/API";
+  import Api from "../components/API";
 
-export default {
+  export default {
   name: 'FormUser',
   props: {
 
@@ -62,9 +62,13 @@ export default {
   mounted() {
 
   },
-  methods: {
-    saveUser () {
+  computed() {
 
+  },
+  methods: {
+    saveUser (e) {
+      e.preventDefault();
+      alert(JSON.stringify(this.user))
     },
     async saveGroup(e) {
       e.preventDefault();
diff --git a/frontend/src/main.js b/frontend/src/main.js
index f1c6dbe3..f86dbf0e 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,15 +1,17 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import VueApexCharts from 'vue-apexcharts'
 
 import App from '@/App.vue'
 import store from '@/store'
 
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
-import { fas } from '@fortawesome/fontawesome-free-solid';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {library} from '@fortawesome/fontawesome-svg-core'
+import {fas} from '@fortawesome/fontawesome-free-solid';
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
+
 library.add(fas)
 
+Vue.component('apexchart', VueApexCharts)
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 
 
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 87169176..6faaae6e 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -137,65 +137,7 @@
 
                     <div v-for="(notifier, index) in $store.getters.notifiers" v-bind:key="index" class="tab-pane fade" v-bind:class="{active: liClass(`v-pills-${notifier.method.toLowerCase()}-tab`), show: liClass(`v-pills-${notifier.method.toLowerCase()}-tab`)}" v-bind:id="`v-pills-${notifier.method.toLowerCase()}-tab`" role="tabpanel" v-bind:aria-labelledby="`v-pills-${notifier.method.toLowerCase()}-tab`">
 
-                        <form class="ajax_form command">
-                            <h4 class="text-capitalize">{{notifier.title}}</h4>
-                            <p class="small text-muted" v-html="notifier.description"></p>
-
-                            <div v-for="(form, index) in notifier.form" v-bind:key="index" class="form-group">
-                                <label class="text-capitalize">{{form.title}}</label>
-
-                                <input v-if="form.type === 'text' || 'number' || 'password'" v-model="notifier[notifier.field]" :type="form.type" class="form-control" :placeholder="form.placeholder" >
-
-                                <small class="form-text text-muted" v-html="form.small_text"></small>
-
-                            </div>
-
-                            <div class="row">
-                                <div class="col-9 col-sm-6">
-                                    <div class="input-group mb-2">
-                                        <div class="input-group-prepend">
-                                            <div class="input-group-text">Limit</div>
-                                        </div>
-                                        <input type="number" class="form-control" name="limits" min="1" max="60" id="limits_per_hour_command" value="3" placeholder="7">
-                                        <div class="input-group-append">
-                                            <div class="input-group-text">Per Minute</div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div class="col-3 col-sm-2 mt-1">
-                                    <span class="switch">
-                                        <input type="checkbox" name="enabled-option" class="switch" id="switch-Command" >
-                                        <label v-bind:for="`switch-${notifier.method}`"></label>
-                                        <input type="hidden" name="enabled" v-bind:id="`switch-${notifier.method}`" value="false">
-                                    </span>
-                                </div>
-
-                                <div class="col-12 col-sm-4 mb-2 mb-sm-0 mt-2 mt-sm-0">
-                                    <button type="submit" class="btn btn-primary btn-block text-capitalize"><i class="fa fa-check-circle"></i> Save</button>
-                                </div>
-
-                                <div class="col-12 col-sm-12">
-                                    <button class="test_notifier btn btn-secondary btn-block text-capitalize col-12 float-right"><i class="fa fa-vial"></i> Test Notifier</button>
-                                </div>
-
-                                <div class="col-12 col-sm-12 mt-2">
-                                    <div class="alert alert-danger d-none" id="command-error" role="alert">
-                                        <i class="fa fa-exclamation-triangle"></i> {{notifier.method}} has an error!
-                                    </div>
-
-                                    <div class="alert alert-success d-none" id="command-success" role="alert">
-                                        <i class="fa fa-smile-beam"></i> The {{notifier.method}} notifier is working correctly!
-                                    </div>
-                                </div>
-                            </div>
-
-                            <span class="d-block small text-center mt-3 mb-5">
-                                <span class="text-capitalize">{{notifier.title}}</span> Notifier created by <a :href="notifier.author_url" target="_blank">{{notifier.author}}</a>
-                            </span>
-
-                            <div class="alert alert-danger d-none" id="alerter" role="alert"></div>
-                        </form>
+                        <Notifier :notifier="notifier"/>
                     </div>
 
 
@@ -336,10 +278,12 @@
 
 <script>
   import CoreSettings from '../forms/CoreSettings';
+  import Notifier from "../forms/Notifier";
 
   export default {
   name: 'Settings',
   components: {
+    Notifier,
       CoreSettings
 
   },