diff --git a/src/components/layout/SidebarMenu.vue b/src/components/layout/SidebarMenu.vue
index f6014ac..681d4c5 100644
--- a/src/components/layout/SidebarMenu.vue
+++ b/src/components/layout/SidebarMenu.vue
@@ -38,11 +38,11 @@
         </span>
       </a>
       <ul class="treeview-menu">
-        <router-link tag="li" class="pageLink" to="/settings_personal"><a href="#"><i class="fa fa-user"></i> User Configs</a><</router-link>
+        <router-link tag="li" class="pageLink" to="/user_configs"><a href="#"><i class="fa fa-user"></i> User Configs</a><</router-link>
         <router-link tag="li" class="pageLink" to="/configurations"><a href="#"><i class="fa fa-cog"></i> Configurations</a><</router-link>
-        <router-link tag="li" class="pageLink" to="/settings_google"><a href="#"><i class="fa fa-google"></i> Google Settings</a><</router-link>
-        <router-link tag="li" class="pageLink" to="/iot"><a href="#"><i class="fa fa-connectdevelop"></i> MQTT / Home Assistant</a><</router-link>
-        <router-link tag="li" class="pageLink" to="/backup"><a href="#"><i class="fa fa-server"></i> Backup/Restore</a><</router-link>
+        <router-link tag="li" class="pageLink" to="/google_settings"><a href="#"><i class="fa fa-google"></i> Google Settings</a><</router-link>
+        <router-link tag="li" class="pageLink" to="/mqtt_homeassistant"><a href="#"><i class="fa fa-connectdevelop"></i> MQTT / Home Assistant</a><</router-link>
+        <router-link tag="li" class="pageLink" to="/backups"><a href="#"><i class="fa fa-server"></i> Backup/Restore</a><</router-link>
       </ul>
     </li>
 
diff --git a/src/components/views/Configurations.vue b/src/components/views/Settings_Backup.vue
similarity index 100%
rename from src/components/views/Configurations.vue
rename to src/components/views/Settings_Backup.vue
diff --git a/src/components/views/Settings.vue b/src/components/views/Settings_Configurations.vue
similarity index 100%
rename from src/components/views/Settings.vue
rename to src/components/views/Settings_Configurations.vue
diff --git a/src/components/views/Settings_Google.vue b/src/components/views/Settings_Google.vue
new file mode 100644
index 0000000..d8b33d3
--- /dev/null
+++ b/src/components/views/Settings_Google.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <h1 class="text-center">Settings</h1>
+    <section class="content">
+      <div class="row">
+        <div class="col-md-12">
+          <div class="box box-info">
+            <!-- Input Addons -->
+            <div class="box-header with-border">
+              <h3 class="box-title">Inputs</h3>
+            </div>
+
+            <div class="box-body">
+              <!-- calendar group -->
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-fw fa-calendar"></i>
+                </span>
+                <datepicker :readonly="true" format="MMM/D/YYYY" id="dateInput" width="100%"></datepicker>
+              </div>
+              <br />
+              <br />
+
+              <!-- with characthers -->
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-fw fa-at" aria-hidden="true"></i>
+                </span>
+                <input class="form-control" placeholder="Username" type="text">
+              </div>
+              <br />
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-fw fa-usd" aria-hidden="true"></i>
+                </span>
+                <input class="form-control" type="text">
+                <span class="input-group-addon">.00</span>
+              </div>
+              <br />
+
+              <!-- with icons from font awesome -->
+              <h4>With icons</h4>
+              <div class="input-group">
+                <span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
+                <input class="form-control" placeholder="Email" type="email">
+              </div>
+              <br />
+              <div class="input-group">
+                <input class="form-control" type="text">
+                <span class="input-group-addon"><i class="fa fa-fw fa-check"></i></span>
+              </div>
+              <br>
+
+              <!-- Success/Error heads up input -->
+              <h4>With border indicator</h4>
+              <div class="form-group has-success">
+                <label class="control-label" for="inputSuccess"><i class="fa fa-fw fa-check"></i> Input with success</label>
+                <input class="form-control" id="inputSuccess" placeholder="Enter ..." type="text">
+                <span class="help-block">Help block with success</span>
+              </div>
+              <br />
+              <div class="form-group has-error">
+                <label class="control-label" for="inputError"><i class="fa fa-fw fa-times-circle-o"></i> Input with error</label>
+                <input class="form-control" id="inputError" placeholder="Enter ..." type="text">
+                <span class="help-block">Help block with error</span>
+              </div>
+
+              <!-- select examples -->
+              <h4>Select Options</h4>
+              <div class="form-group">
+                <label>Select</label>
+                <select class="form-control">
+                  <option>option 1</option>
+                  <option>option 2</option>
+                  <option>option 3</option>
+                  <option>option 4</option>
+                  <option>option 5</option>
+                </select>
+              </div>
+              <br />
+              <div class="form-group">
+                <label>Select Multiple</label>
+                <select multiple="" class="form-control">
+                  <option>option 1</option>
+                  <option>option 2</option>
+                  <option>option 3</option>
+                  <option>option 4</option>
+                  <option>option 5</option>
+                </select>
+              </div>
+
+              <!-- /input-group -->
+            </div>
+            <!-- /.box-body -->
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+require('moment')
+import datepicker from 'vue-date-picker'
+
+export default {
+  name: 'Settings',
+  components: { datepicker },
+  computed: {
+    datetime () {
+      return new Date()
+    }
+  },
+  methods: {
+    clearInput (vueModel) {
+      vueModel = ''
+    }
+  }
+}
+</script>
+
+<style>
+.datetime-picker input {
+  height: 4em !important;
+}
+</style>
diff --git a/src/components/views/Settings_MQTT_HA.vue b/src/components/views/Settings_MQTT_HA.vue
new file mode 100644
index 0000000..d8b33d3
--- /dev/null
+++ b/src/components/views/Settings_MQTT_HA.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <h1 class="text-center">Settings</h1>
+    <section class="content">
+      <div class="row">
+        <div class="col-md-12">
+          <div class="box box-info">
+            <!-- Input Addons -->
+            <div class="box-header with-border">
+              <h3 class="box-title">Inputs</h3>
+            </div>
+
+            <div class="box-body">
+              <!-- calendar group -->
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-fw fa-calendar"></i>
+                </span>
+                <datepicker :readonly="true" format="MMM/D/YYYY" id="dateInput" width="100%"></datepicker>
+              </div>
+              <br />
+              <br />
+
+              <!-- with characthers -->
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-fw fa-at" aria-hidden="true"></i>
+                </span>
+                <input class="form-control" placeholder="Username" type="text">
+              </div>
+              <br />
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-fw fa-usd" aria-hidden="true"></i>
+                </span>
+                <input class="form-control" type="text">
+                <span class="input-group-addon">.00</span>
+              </div>
+              <br />
+
+              <!-- with icons from font awesome -->
+              <h4>With icons</h4>
+              <div class="input-group">
+                <span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
+                <input class="form-control" placeholder="Email" type="email">
+              </div>
+              <br />
+              <div class="input-group">
+                <input class="form-control" type="text">
+                <span class="input-group-addon"><i class="fa fa-fw fa-check"></i></span>
+              </div>
+              <br>
+
+              <!-- Success/Error heads up input -->
+              <h4>With border indicator</h4>
+              <div class="form-group has-success">
+                <label class="control-label" for="inputSuccess"><i class="fa fa-fw fa-check"></i> Input with success</label>
+                <input class="form-control" id="inputSuccess" placeholder="Enter ..." type="text">
+                <span class="help-block">Help block with success</span>
+              </div>
+              <br />
+              <div class="form-group has-error">
+                <label class="control-label" for="inputError"><i class="fa fa-fw fa-times-circle-o"></i> Input with error</label>
+                <input class="form-control" id="inputError" placeholder="Enter ..." type="text">
+                <span class="help-block">Help block with error</span>
+              </div>
+
+              <!-- select examples -->
+              <h4>Select Options</h4>
+              <div class="form-group">
+                <label>Select</label>
+                <select class="form-control">
+                  <option>option 1</option>
+                  <option>option 2</option>
+                  <option>option 3</option>
+                  <option>option 4</option>
+                  <option>option 5</option>
+                </select>
+              </div>
+              <br />
+              <div class="form-group">
+                <label>Select Multiple</label>
+                <select multiple="" class="form-control">
+                  <option>option 1</option>
+                  <option>option 2</option>
+                  <option>option 3</option>
+                  <option>option 4</option>
+                  <option>option 5</option>
+                </select>
+              </div>
+
+              <!-- /input-group -->
+            </div>
+            <!-- /.box-body -->
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+require('moment')
+import datepicker from 'vue-date-picker'
+
+export default {
+  name: 'Settings',
+  components: { datepicker },
+  computed: {
+    datetime () {
+      return new Date()
+    }
+  },
+  methods: {
+    clearInput (vueModel) {
+      vueModel = ''
+    }
+  }
+}
+</script>
+
+<style>
+.datetime-picker input {
+  height: 4em !important;
+}
+</style>
diff --git a/src/components/views/Settings_User.vue b/src/components/views/Settings_User.vue
new file mode 100644
index 0000000..d8b33d3
--- /dev/null
+++ b/src/components/views/Settings_User.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <h1 class="text-center">Settings</h1>
+    <section class="content">
+      <div class="row">
+        <div class="col-md-12">
+          <div class="box box-info">
+            <!-- Input Addons -->
+            <div class="box-header with-border">
+              <h3 class="box-title">Inputs</h3>
+            </div>
+
+            <div class="box-body">
+              <!-- calendar group -->
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-fw fa-calendar"></i>
+                </span>
+                <datepicker :readonly="true" format="MMM/D/YYYY" id="dateInput" width="100%"></datepicker>
+              </div>
+              <br />
+              <br />
+
+              <!-- with characthers -->
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-fw fa-at" aria-hidden="true"></i>
+                </span>
+                <input class="form-control" placeholder="Username" type="text">
+              </div>
+              <br />
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-fw fa-usd" aria-hidden="true"></i>
+                </span>
+                <input class="form-control" type="text">
+                <span class="input-group-addon">.00</span>
+              </div>
+              <br />
+
+              <!-- with icons from font awesome -->
+              <h4>With icons</h4>
+              <div class="input-group">
+                <span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
+                <input class="form-control" placeholder="Email" type="email">
+              </div>
+              <br />
+              <div class="input-group">
+                <input class="form-control" type="text">
+                <span class="input-group-addon"><i class="fa fa-fw fa-check"></i></span>
+              </div>
+              <br>
+
+              <!-- Success/Error heads up input -->
+              <h4>With border indicator</h4>
+              <div class="form-group has-success">
+                <label class="control-label" for="inputSuccess"><i class="fa fa-fw fa-check"></i> Input with success</label>
+                <input class="form-control" id="inputSuccess" placeholder="Enter ..." type="text">
+                <span class="help-block">Help block with success</span>
+              </div>
+              <br />
+              <div class="form-group has-error">
+                <label class="control-label" for="inputError"><i class="fa fa-fw fa-times-circle-o"></i> Input with error</label>
+                <input class="form-control" id="inputError" placeholder="Enter ..." type="text">
+                <span class="help-block">Help block with error</span>
+              </div>
+
+              <!-- select examples -->
+              <h4>Select Options</h4>
+              <div class="form-group">
+                <label>Select</label>
+                <select class="form-control">
+                  <option>option 1</option>
+                  <option>option 2</option>
+                  <option>option 3</option>
+                  <option>option 4</option>
+                  <option>option 5</option>
+                </select>
+              </div>
+              <br />
+              <div class="form-group">
+                <label>Select Multiple</label>
+                <select multiple="" class="form-control">
+                  <option>option 1</option>
+                  <option>option 2</option>
+                  <option>option 3</option>
+                  <option>option 4</option>
+                  <option>option 5</option>
+                </select>
+              </div>
+
+              <!-- /input-group -->
+            </div>
+            <!-- /.box-body -->
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+require('moment')
+import datepicker from 'vue-date-picker'
+
+export default {
+  name: 'Settings',
+  components: { datepicker },
+  computed: {
+    datetime () {
+      return new Date()
+    }
+  },
+  methods: {
+    clearInput (vueModel) {
+      vueModel = ''
+    }
+  }
+}
+</script>
+
+<style>
+.datetime-picker input {
+  height: 4em !important;
+}
+</style>
diff --git a/src/routes.js b/src/routes.js
index 8263222..48eb05d 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -6,7 +6,12 @@ import NotFoundView from './components/404.vue'
 // Sthope Views
 import CryptosView from './components/views/Cryptos.vue'
 import PersonalFinancesView from './components/views/PersonalFinances.vue'
-import ConfigurationsView from './components/views/Configurations.vue'
+// Sthope Settings Views
+import SettingsBackupView from './components/views/Settings_Backup.vue'
+import SettingsConfigurationsView from './components/views/Settings_Configurations.vue'
+import SettingsGoogleView from './components/views/Settings_Google.vue'
+import SettingsMQTTHAView from './components/views/Settings_MQTT_HA.vue'
+import SettingsUserView from './components/views/Settings_User.vue'
 
 // Routes
 const routes = [
@@ -32,9 +37,34 @@ const routes = [
         meta: {description: '', requiresAuth: false}
       }, {
         path: 'configurations',
-        component: ConfigurationsView,
+        component: SettingsBackupView,
         name: 'Configurations',
         meta: {description: '', requiresAuth: false}
+      }, {
+        path: 'configurations',
+        component: SettingsConfigurationsView,
+        name: 'Configurations',
+        meta: {description: '', requiresAuth: false}
+      }, {
+        path: 'google_settings',
+        component: SettingsGoogleView,
+        name: 'Google Settings',
+        meta: {description: '', requiresAuth: false}
+      }, {
+        path: 'mqtt_homeassistant',
+        component: SettingsMQTTHAView,
+        name: 'MQTT / HomeAssistant',
+        meta: {description: '', requiresAuth: false}
+      }, {
+        path: 'user_configs',
+        component: SettingsUserView,
+        name: 'User Configs',
+        meta: {description: '', requiresAuth: false}
+      }, {
+        path: 'backups',
+        component: SettingsUserView,
+        name: 'Backups',
+        meta: {description: '', requiresAuth: false}
       }
     ]
   }, {