diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index ae3a4b25..69e81233 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -28,17 +28,7 @@
         :key="index"/>
     </el-select>
     <el-select
-      v-if="Array.isArray(setting.type) && (
-      (setting.type.includes('list') && setting.type.includes('module')) || (setting.type.includes('module') && setting.type.includes('atom')))"
-      :value="data[setting.key]"
-      multiple
-      filterable
-      allow-create
-      @change="updateSetting($event, settingsGroup.key, setting.key)">
-      <el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
-    </el-select>
-    <el-select
-      v-if="Array.isArray(setting.type) && setting.type.includes('list') && setting.type.includes('string')"
+      v-if="renderMultipleSelect(setting.type)"
       :value="data[setting.key]"
       multiple
       filterable
@@ -201,6 +191,14 @@ export default {
       const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}
       this.updateSetting(updatedValue, tab, inputName)
     },
+    renderMultipleSelect(type) {
+      return Array.isArray(type) && (
+        (type.includes('list') && type.includes('string')) ||
+        (type.includes('list') && type.includes('atom')) ||
+        (type.includes('list') && type.includes('module')) ||
+        (type.includes('module') && type.includes('atom'))
+      )
+    },
     toggleAtomTuple(value, tab, input) {
       console.log(value)
     },
diff --git a/src/views/settings/components/Logger.vue b/src/views/settings/components/Logger.vue
index a58c286c..b6790679 100644
--- a/src/views/settings/components/Logger.vue
+++ b/src/views/settings/components/Logger.vue
@@ -1,169 +1,20 @@
 <template>
-  <div>
-    <el-form ref="loggerBackends" :model="loggerBackends" :label-width="labelWidth">
-      <el-form-item label="Backends">
-        <el-select :value="loggerBackendsValue" multiple filterable allow-create @change="updateloggerBackends($event, 'backends', 'value')">
-          <el-option
-            v-for="(item, index) in loggerBackendsOptions"
-            :key="index"
-            :label="item.label"
-            :value="item.value"/>
-        </el-select>
-        <p class="expl"><span class="code">:console</span> is used to send logs to stdout, <span class="code">{ExSyslogger, :ex_syslogger}</span> to log to syslog, and <span class="code">Quack.Logger</span> to log to Slack</p>
-      </el-form-item>
+  <div v-if="!loading">
+    <el-form ref="loggerData" :model="loggerData" :label-width="labelWidth">
+      <setting :settings-group="logger" :data="loggerData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="consoleLogger" :model="consoleLogger" :label-width="labelWidth">
-      <el-form-item label="Console logger:"/>
-      <el-form-item label="Level">
-        <el-select :value="consoleLogger.level" clearable @change="updateSetting($event, 'console', 'level')">
-          <el-option value=":debug" label=":debug - for debug-related messages"/>
-          <el-option value=":info" label=":info - for information of any kind"/>
-          <el-option value=":warn" label=":warn - for warnings"/>
-          <el-option value=":error" label=":error - for errors"/>
-        </el-select>
-        <p class="expl">The level to be logged by this backend. Note that messages are filtered by the general
-        <span class="code">:level</span> configuration for the <span class="code">:logger</span> application first.</p>
-      </el-form-item>
-      <el-form-item label="Format">
-        <el-input :value="consoleLogger.format" @input="updateSetting($event, 'console', 'format')"/>
-        <p class="expl">The format message used to print logs. </p>
-      </el-form-item>
-      <el-form-item label="Metadata">
-        <el-select :value="consoleLogger.metadata || []" multiple filterable allow-create @change="updateSetting($event, 'console', 'metadata')">
-          <el-option value=":all"/>
-          <el-option value=":request_id"/>
-          <el-option value=":line"/>
-          <el-option value=":user_id"/>
-          <el-option value=":application"/>
-          <el-option value=":function"/>
-          <el-option value=":file"/>
-          <el-option value=":pid"/>
-          <el-option value=":crash_reason"/>
-          <el-option value=":initial_call"/>
-          <el-option value=":registered_name"/>
-          <el-option value=":none"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Device">
-        <el-input :value="consoleLogger.device" @input="updateSetting($event, 'console', 'device')"/>
-        <p class="expl">The device to log error messages to. Defaults to <span class="code">:user</span>
-          but can be changed to something else such as <span class="code">:standard_error</span></p>
-      </el-form-item>
-      <el-form-item label="Max buffer">
-        <el-input-number :value="consoleLogger.max_buffer" :step="1" :min="0" size="large" @change="updateSetting($event, 'console', 'max_buffer')"/>
-        <p class="expl">Maximum events to buffer while waiting for a confirmation from the IO device (default: 32). Once the buffer is full, the backend will block until a confirmation is received.</p>
-      </el-form-item>
-      <el-form-item label="Colors:"/>
-      <el-form-item label="Enabled">
-        <el-switch :value="consoleLogger.colors.enabled" @change="processNestedData($event, 'console', 'colors', 'enabled')"/>
-      </el-form-item>
-      <el-form-item label="Debug message">
-        <el-input :value="consoleLogger.colors.debug" @input="processNestedData($event, 'console', 'colors', 'debug')"/>
-        <p class="expl">Defaults to: <span class="code">:cyan</span></p>
-      </el-form-item>
-      <el-form-item label="Info message">
-        <el-input :value="consoleLogger.colors.info" @input="processNestedData($event, 'console', 'colors', 'info')"/>
-        <p class="expl">Defaults to: <span class="code">:normal</span></p>
-      </el-form-item>
-      <el-form-item label="Warn message">
-        <el-input :value="consoleLogger.colors.warn" @input="processNestedData($event, 'console', 'colors', 'warn')"/>
-        <p class="expl">Defaults to: <span class="code">:yellow</span></p>
-      </el-form-item>
-      <el-form-item label="Error message">
-        <el-input :value="consoleLogger.colors.error" @input="processNestedData($event, 'console', 'colors', 'error')"/>
-        <p class="expl">Defaults to: <span class="code">:red</span></p>
-      </el-form-item>
+    <el-form ref="consoleData" :model="consoleData" :label-width="labelWidth">
+      <setting :settings-group="console" :data="consoleData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="exsyslogger" :model="exsyslogger" :label-width="labelWidth">
-      <el-form-item label="ExSyslogger:"/>
-      <el-form-item label="Level">
-        <el-select :value="exsyslogger.level" clearable @change="updateSetting($event, 'ex_syslogger', 'level')">
-          <el-option value=":debug" label=":debug - for debug-related messages"/>
-          <el-option value=":info" label=":info - for information of any kind"/>
-          <el-option value=":warn" label=":warn - for warnings"/>
-          <el-option value=":error" label=":error - for errors"/>
-        </el-select>
-        <p class="expl">Logging level. It defaults to <span class="code">:info.</span></p>
-      </el-form-item>
-      <el-form-item label="Format">
-        <el-input :value="exsyslogger.format" @input="updateSetting($event, 'ex_syslogger', 'format')"/>
-        <p class="expl">The format message used to print logs.</p>
-      </el-form-item>
-      <el-form-item label="Formatter">
-        <el-input :value="exsyslogger.formatter" @input="updateSetting($event, 'ex_syslogger', 'formatter')"/>
-        <p class="expl">Formatter that will be used to format the log. It default to <span class="code">Logger.Formatter</span></p>
-      </el-form-item>
-      <el-form-item label="Metadata">
-        <el-select :value="exsyslogger.metadata || []" multiple filterable allow-create @change="updateSetting($event, 'ex_syslogger', 'metadata')">
-          <el-option value=":all"/>
-          <el-option value=":request_id"/>
-          <el-option value=":line"/>
-          <el-option value=":user_id"/>
-          <el-option value=":application"/>
-          <el-option value=":function"/>
-          <el-option value=":file"/>
-          <el-option value=":pid"/>
-          <el-option value=":crash_reason"/>
-          <el-option value=":initial_call"/>
-          <el-option value=":registered_name"/>
-          <el-option value=":none"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Ident">
-        <el-input :value="exsyslogger.ident" @input="updateSetting($event, 'ex_syslogger', 'ident')"/>
-        <p class="expl">A string that’s prepended to every message, and is typically set to the app name. It defaults to <span class="code">Elixir</span></p>
-      </el-form-item>
-      <el-form-item label="Facility">
-        <el-input :value="exsyslogger.facility" @input="updateSetting($event, 'ex_syslogger', 'facility')"/>
-        <p class="expl">Syslog facility to be used. It defaults to <span class="code">:local0</span></p>
-      </el-form-item>
-      <el-form-item label="Options">
-        <el-select :value="exsyslogger.option || []" multiple filterable allow-create @change="updateSetting($event, 'ex_syslogger', 'option')">
-          <el-option value=":pid"/>
-          <el-option value=":cons"/>
-          <el-option value=":odelay"/>
-          <el-option value=":ndelay"/>
-          <el-option value=":perror"/>
-        </el-select>
-        <p class="expl">Syslog option to be used. It defaults to <span class="code">:ndelay.</span></p>
-      </el-form-item>
+    <el-form ref="exsysloggerData" :model="exsysloggerData" :label-width="labelWidth">
+      <setting :settings-group="exsyslogger" :data="exsysloggerData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="webhookUrl" :model="webhookUrl" :label-width="labelWidth">
+    <el-form ref="quackData" :model="quackData" :label-width="labelWidth">
       <el-form-item label="Quack logger:"/>
-      <el-form-item label="Webhook URL">
-        <el-input :value="webhookUrl.value" @input="updateSetting($event, 'webhook_url', 'value')"/>
-      </el-form-item>
-    </el-form>
-    <el-form ref="level" :model="level" :label-width="labelWidth">
-      <el-form-item label="Level">
-        <el-select :value="level.value" clearable @change="updateSetting($event, 'level', 'value')">
-          <el-option value=":debug" label=":debug - for debug-related messages"/>
-          <el-option value=":info" label=":info - for information of any kind"/>
-          <el-option value=":warn" label=":warn - for warnings"/>
-          <el-option value=":error" label=":error - for errors"/>
-        </el-select>
-        <p class="expl">Logging level. It defaults to <span class="code">:info.</span></p>
-      </el-form-item>
-    </el-form>
-    <el-form ref="meta" :model="meta" :label-width="labelWidth">
-      <el-form-item label="Metadata">
-        <el-select :value="meta.value || []" multiple filterable allow-create @change="updateSetting($event, 'meta', 'value')">
-          <el-option value=":all"/>
-          <el-option value=":module"/>
-          <el-option value=":function"/>
-          <el-option value=":file"/>
-          <el-option value=":application"/>
-          <el-option value=":line"/>
-          <el-option value=":pid"/>
-          <el-option value=":crash_reason"/>
-          <el-option value=":initial_call"/>
-          <el-option value=":registered_name"/>
-          <el-option value=":none"/>
-        </el-select>
-      </el-form-item>
+      <setting :settings-group="quack" :data="quackData"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
@@ -174,44 +25,57 @@
 <script>
 import { mapGetters } from 'vuex'
 import i18n from '@/lang'
-import { options } from './options'
+import Setting from './Setting'
 
 export default {
   name: 'Logger',
+  components: { Setting },
   computed: {
     ...mapGetters([
-      'consoleLogger',
-      'exsyslogger',
-      'level',
-      'loggerBackends',
-      'meta',
-      'webhookUrl'
+      'settings'
     ]),
-    loggerBackendsValue() {
-      return this.loggerBackends.value ? this.loggerBackends.value.map(el => JSON.stringify(el)) : []
+    console() {
+      return this.settings.description.find(setting => setting.key === ':console')
     },
-    loggerBackendsOptions() {
-      return options.loggerBackendsOptions
+    consoleData() {
+      return this.settings.settings[':logger'][':console']
     },
+    exsyslogger() {
+      return this.settings.description.find(setting => setting.key === ':ex_syslogger')
+    },
+    exsysloggerData() {
+      return this.settings.settings[':logger'][':ex_syslogger']
+    },
+    // loggerBackendsValue() {
+    //   return this.loggerBackends.value ? this.loggerBackends.value.map(el => JSON.stringify(el)) : []
+    // },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '210px'
+      return this.isMobile ? '100px' : '240px'
+    },
+    loading() {
+      return this.settings.loading
+    },
+    logger() {
+      return this.settings.description.find(setting => setting.group === ':logger')
+    },
+    loggerData() {
+      return this.settings.settings[':logger']
+    },
+    quack() {
+      return this.settings.description.find(setting => setting.group === ':quack')
+    },
+    quackData() {
+      return this.settings.settings[':quack']
     }
   },
   methods: {
-    processNestedData(value, tab, section, input) {
-      const updatedValue = { ...this.$store.state.settings.settings[tab][section], ...{ [input]: value }}
-      this.updateSetting(updatedValue, tab, section)
-    },
-    updateloggerBackends(value, tab, input) {
-      const parseValue = value.map(el => JSON.parse(el))
-      this.$store.dispatch('UpdateSettings', { tab, data: { [input]: parseValue }})
-    },
-    updateSetting(value, tab, input) {
-      this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
-    },
+    // updateloggerBackends(value, tab, input) {
+    //   const parseValue = value.map(el => JSON.parse(el))
+    //   this.$store.dispatch('UpdateSettings', { tab, data: { [input]: parseValue }})
+    // },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')