diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index cc0f424ac..28251fb6f 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -23,8 +23,8 @@ module.exports = {
     'generator-star-spacing': 'off',
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    indent: ['error', 2],
-    'space-before-function-paren': ['error', 'never']
+    indent: ['error', 4]
+    // 'space-before-function-paren': ['error', 'never']
   }
 }
 
diff --git a/frontend/build/vue-loader.conf.js b/frontend/build/vue-loader.conf.js
index 33ed58bc0..c3c09ab85 100644
--- a/frontend/build/vue-loader.conf.js
+++ b/frontend/build/vue-loader.conf.js
@@ -9,7 +9,8 @@ const sourceMapEnabled = isProduction
 module.exports = {
   loaders: utils.cssLoaders({
     sourceMap: sourceMapEnabled,
-    extract: isProduction
+    extract: isProduction,
+    scss: 'style!css!sass'
   }),
   cssSourceMap: sourceMapEnabled,
   cacheBusting: config.dev.cacheBusting,
diff --git a/frontend/build/webpack.base.conf.js b/frontend/build/webpack.base.conf.js
index ce5e72587..1d7ee0832 100644
--- a/frontend/build/webpack.base.conf.js
+++ b/frontend/build/webpack.base.conf.js
@@ -53,6 +53,10 @@ module.exports = {
         loader: 'vue-loader',
         options: vueLoaderConfig
       },
+      {
+        test: /\.s[a|c]ss$/,
+        loader: 'style!css!sass'
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
diff --git a/frontend/package.json b/frontend/package.json
index 4727e87d1..0955aa347 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,11 +14,12 @@
   },
   "dependencies": {
     "@mdi/font": "^2.2.43",
-    "buefy": "^0.6.5",
     "js-cookie": "^2.2.0",
+    "material-design-icons-iconfont": "^3.0.3",
     "vue": "^2.5.2",
     "vue-resource": "^1.5.0",
     "vue-router": "^3.0.1",
+    "vuetify": "^1.2.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
@@ -54,6 +55,7 @@
     "jest": "^22.0.4",
     "jest-serializer-vue": "^0.3.0",
     "node-notifier": "^5.1.2",
+    "node-sass": "^4.9.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
@@ -61,8 +63,10 @@
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
+    "sass-loader": "^7.0.3",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "style-loader": "^0.21.0",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-jest": "^1.0.2",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 02572d15f..ff609ba94 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,15 +1,31 @@
 <template>
-  <div id="app">
-    <navbar></navbar>
-    <router-view/>
-  </div>
+  <v-app>
+    <navbar ref="navbar"></navbar>
+    <v-toolbar
+        :clipped-left="$vuetify.breakpoint.lgAndUp"
+        color="blue darken-3"
+        dark
+        app
+    >
+      <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
+        <v-toolbar-side-icon @click.stop="$refs.navbar.drawer = !$refs.navbar.drawer">
+        </v-toolbar-side-icon>
+        <span class="hidden-sm-and-down">Modoboa</span>
+      </v-toolbar-title>
+    </v-toolbar>
+    <v-content>
+      <v-container fluid>
+        <router-view/>
+      </v-container>
+    </v-content>
+  </v-app>
 </template>
 
 <script>
 import Navbar from './components/navigation/Navbar'
+
 export default {
-  name: 'App',
-  components: { Navbar },
-  data() {}
+    name: 'App',
+    components: { Navbar }
 }
 </script>
diff --git a/frontend/src/api.js b/frontend/src/api.js
index e113a8109..173ddd351 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -6,15 +6,15 @@ Vue.use(VueResource)
 var domainResource = Vue.resource('/api/v1/domains{/pk}/')
 
 export const getDomains = () => {
-  return domainResource.get()
+    return domainResource.get()
 }
 
 export const createDomain = data => {
-  return domainResource.save(data)
+    return domainResource.save(data)
 }
 
 export const updateDomain = data => {
-  return domainResource.update({ pk: data.pk }, data)
+    return domainResource.update({ pk: data.pk }, data)
 }
 
 var customParametersActions = {
diff --git a/frontend/src/components/domains/DomainForm.vue b/frontend/src/components/domains/DomainForm.vue
index e8f63c380..1f3186751 100644
--- a/frontend/src/components/domains/DomainForm.vue
+++ b/frontend/src/components/domains/DomainForm.vue
@@ -1,114 +1,120 @@
 <template>
-  <div>
-    <h1 class="title">Add domain</h1>
-    <form>
-      <b-field label="Name" :type="formErrors && formErrors.name ? 'is-danger' : ''"
-               :message="formErrors && formErrors.name ? formErrors.name[0] : ''"
-               horizontal>
-        <b-input v-model="domain.name"></b-input>
-      </b-field>
-      <b-field label="Quota" :type="formErrors && formErrors.quota ? 'is-danger' : ''"
-               :message="formErrors && formErrors.quota ? formErrors.quota[0] : ''"
-               horizontal>
-        <b-input v-model="domain.quota"></b-input>
-        <p class="control">
-          <span class="button is-static">MB</span>
-        </p>
-      </b-field>
-      <b-field label="Default mailbox quota"
-               :type="formErrors && formErrors.default_mailbox_quota ? 'is-danger' : ''"
-               :message="formErrors && formErrors.default_mailbox_quota ? formErrors.default_mailbox_quota[0] : ''"
-               horizontal>
-        <b-input v-model="domain.default_mailbox_quota"></b-input>
-        <p class="control">
-          <span class="button is-static">MB</span>
-        </p>
-      </b-field>
-      <b-field label="Enabled" horizontal>
-        <b-checkbox v-model="domain.enabled"></b-checkbox>
-      </b-field>
-      <b-field label="Enable DNS checks" horizontal>
-        <b-checkbox v-model="domain.enable_dns_checks"></b-checkbox>
-      </b-field>
-      <b-field label="Enable DKIM signing" horizontal>
-        <b-checkbox v-model="domain.enable_dkim"></b-checkbox>
-      </b-field>
-      <b-field label="DKIM key selector" v-if="domain.enable_dkim" horizontal>
-        <b-checkbox v-model="domain.dkim_key_selector"></b-checkbox>
-      </b-field>
-      <b-field label="DKIM keu length" v-if="domain.enable_dkim" horizontal>
-        <b-checkbox v-model="domain.dkim_key_length"></b-checkbox>
-      </b-field>
-      <b-field grouped horizontal>
-        <p class="control">
-          <button class="button is-primary" @click="saveDomain">Save</button>
-        </p>
-        <p class="control">
-          <button class="button" @click="cancel">Cancel</button>
-        </p>
-      </b-field>
-    </form>
-  </div>
+  <v-layout>
+    <v-flex>
+      <v-card>
+        <v-card-title>
+          <h1 class="title" v-if="!domain.pk">Add domain</h1>
+          <h1 class="title" v-else>Edit domain</h1>
+        </v-card-title>
+        <v-card-text>
+          <v-text-field label="Name"
+                        v-model="domain.name"
+                        :error="formErrors['name'] !== undefined"
+                        :error-messages="formErrors['name']"
+          >
+          </v-text-field>
+          <v-text-field label="Quota"
+                        v-model="domain.quota"
+                        suffix="MB"
+                        :error="formErrors['quota'] !== undefined"
+                        :error-messages="formErrors['quota']"
+          >
+          </v-text-field>
+          <v-text-field label="Default mailbox quota"
+                        v-model="domain.default_mailbox_quota"
+                        suffix="MB"
+                        :error="formErrors['default_mailbox_quota']"
+                        :error-messages="formErrors['default_mailbox_quota']"
+          >
+          </v-text-field>
+          <v-checkbox label="Enabled"
+                      v-model="domain.enabled"
+          >
+          </v-checkbox>
+          <v-checkbox label="Enable DNS checks"
+                      v-model="domain.enable_dns_checks"
+          >
+          </v-checkbox>
+          <v-checkbox label="Enable DKIM signing"
+                      v-model="domain.enable_dkim"
+          >
+          </v-checkbox>
+          <v-text-field label="DKIM key selector"
+                        v-model="domain.dkim_key_selector"
+                        v-if="domain.enable_dkim"
+          >
+          </v-text-field>
+          <v-text-field label="DKIM key length"
+                        v-model="domain.dkim_key_length"
+                        v-if="domain.enable_dkim"
+          >
+          </v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="blue darken-1" flat @click="cancel">
+            Cancel
+          </v-btn>
+          <v-btn color="blue darken-1" flat @click="save">
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-flex>
+  </v-layout>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      formErrors: {},
-      domain: {}
-    }
-  },
-  mounted() {
-    var domainPk = this.$route.params.domainPk
-    if (domainPk) {
-      if (!this.$store.state.domainsLoaded) {
-        this.$store.dispatch('getDomains').then(response => {
-          this.loadDomain(domainPk)
-        })
-      } else {
-        this.loadDomain(domainPk)
-      }
-    }
-  },
-  methods: {
-    loadDomain(pk) {
-      this.domain = JSON.parse(
-        JSON.stringify(this.$store.getters.getDomainByPk(pk))
-      )
+    data () {
+        return {
+            formErrors: {},
+            domain: {}
+        }
     },
-    onSaveError(response) {
-      this.formErrors = response.data
+    mounted () {
+        var domainPk = this.$route.params.domainPk
+        if (domainPk) {
+            if (!this.$store.state.domainsLoaded) {
+                this.$store.dispatch('getDomains').then(response => {
+                    this.loadDomain(domainPk)
+                })
+            } else {
+                this.loadDomain(domainPk)
+            }
+        }
     },
-    saveDomain() {
-      var action
-      var msg
-      if (this.domain.pk) {
-        action = 'updateDomain'
-        msg = 'Domain updated.'
-      } else {
-        action = 'createDomain'
-        msg = 'Domain created.'
-      }
-      this.$store.dispatch(action, this.domain).then(response => {
-        this.$router.push({ name: 'DomainList' })
-        this.$toast.open({
-          message: msg,
-          type: 'is-success',
-          position: 'is-bottom'
-        })
-      }, this.onSaveError)
-    },
-    cancel() {
-      this.$router.push({ name: 'DomainList' })
+    methods: {
+        loadDomain (pk) {
+            this.domain = JSON.parse(
+                JSON.stringify(this.$store.getters.getDomainByPk(pk))
+            )
+        },
+        onSaveError (response) {
+            this.formErrors = response.data
+        },
+        save () {
+            var action
+            var msg
+            if (this.domain.pk) {
+                action = 'updateDomain'
+                msg = 'Domain updated.'
+            } else {
+                action = 'createDomain'
+                msg = 'Domain created.'
+            }
+            this.$store.dispatch(action, this.domain).then(response => {
+                this.$router.push({ name: 'DomainList' })
+                this.$toast.open({
+                    message: msg,
+                    type: 'is-success',
+                    position: 'is-bottom'
+                })
+            }, this.onSaveError)
+        },
+        cancel () {
+            this.$router.push({ name: 'DomainList' })
+        }
     }
-  }
 }
 </script>
-
-<style>
-form {
-  background: #ffffff;
-  padding: 20px;
-}
-</style>
diff --git a/frontend/src/components/domains/DomainList.vue b/frontend/src/components/domains/DomainList.vue
index ec43ed4b5..9666cfb89 100644
--- a/frontend/src/components/domains/DomainList.vue
+++ b/frontend/src/components/domains/DomainList.vue
@@ -1,89 +1,157 @@
 <template>
-  <div>
-    <div class="columns">
-      <div class="column">
-        <h1 class="title">Domains</h1>
-      </div>
-      <div class="column">
-        <router-link :to="{ name: 'DomainAdd' }" class="button is-primary">Add</router-link>
-        <b-dropdown>
-          <button class="button" slot="trigger">
-            <span>Actions</span>
-            <b-icon icon="menu-down"></b-icon>
-          </button>
-          <b-dropdown-item>Import</b-dropdown-item>
-          <b-dropdown-item>Export</b-dropdown-item>
-        </b-dropdown>
-      </div>
-      <div class="column">
-        <b-field>
-          <b-input placeholder="Search..." type="search" icon="magnify"></b-input>
-        </b-field>
-      </div>
-    </div>
-    <b-table :data="domains" paginated checkable>
-      <template slot-scope="props">
-        <b-table-column :sortable="false">
-          <router-link :to="{ name: 'DomainEdit', params: { domainPk: props.row.pk }}">
-            <b-icon icon="pencil"></b-icon>
-          </router-link>
-          <a href="#" title="Remove"  @click="confirmDelete(props.row)">
-            <b-icon icon="delete"></b-icon>
-          </a>
-        </b-table-column>
-        <b-table-column sortable field="name" label="Name">
-          {{ props.row.name }}
-        </b-table-column>
-        <b-table-column field="dns_status" label="DNS status">
-          <b-tag v-if="props.row.dns_status.checks === 'disabled'" rounded>Disabled</b-tag>
-          <b-tag v-if="props.row.dns_status.checks === 'pending'" type="is-info" rounded>Pending</b-tag>
-          <b-taglist v-if="props.row.dns_status.checks === 'active'">
-            <b-tag v-if="props.row.dns_status.mx" :type="getDNSTagType(props.row.dns_status.mx)" rounded>MX</b-tag>
-            <b-tag v-if="props.row.dns_status.dnsbl" :type="getDNSTagType(props.row.dns_status.dnsbl)" rounded>DNSBL</b-tag>
-          </b-taglist>
-        </b-table-column>
-        <b-table-column field="quota" label="Quota">
-          <progress class="progress is-primary"
-                    :value="props.row.allocated_quota_in_percent" max="100">
-            {{ props.row.allocated_quota_in_percent }}%
-          </progress>
-        </b-table-column>
-      </template>
-    </b-table>
-  </div>
+  <v-layout>
+    <v-flex>
+      <v-toolbar flat color="white">
+        <v-toolbar-title>Domains</v-toolbar-title>
+        <v-divider class="mx-2" inset vertical></v-divider>
+        <v-spacer></v-spacer>
+        <v-text-field
+            v-model="search"
+            append-icon="search"
+            label="Search"
+            single-line
+            hide-details
+        ></v-text-field>
+        <v-spacer></v-spacer>
+        <v-btn color="primary" :to="{ name: 'DomainAdd' }">
+          <v-icon>add</v-icon>
+        </v-btn>
+      </v-toolbar>
+      <v-data-table :headers="headers" :items="domains" :search="search" class="elevation-1">
+        <template slot="items" slot-scope="props">
+          <td>
+            <v-btn flat icon :to="{ name: 'DomainEdit', params: { domainPk: props.item.pk }}">
+              <v-icon>edit</v-icon>
+            </v-btn>
+            <v-btn flat icon title="Remove" @click="confirmDelete(props.item)">
+              <v-icon>delete</v-icon>
+            </v-btn>
+          </td>
+          <td>
+            <router-link :to="{ name: 'DomainDetail', params: { pk: props.item.pk } }">
+              {{ props.item.name }}
+            </router-link>
+          </td>
+          <td>
+            <v-chip v-if="props.item.dns_status.checks === 'disabled'"
+                    text-color="white" small>Disabled</v-chip>
+            <v-chip v-if="props.item.dns_status.checks === 'pending'"
+                    color="secondary" text-color="white" small>Pending</v-chip>
+            <span v-if="props.item.dns_status.checks === 'active'">
+              <v-chip v-if="props.item.dns_status.mx"
+                      :color="getDNSTagType(props.item.dns_status.mx)"
+                      text-color="white" small
+              >
+                MX
+              </v-chip>
+              <v-chip v-if="props.item.dns_status.dnsbl"
+                      :color="getDNSTagType(props.item.dns_status.dnsbl)"
+                      text-color="white" small
+              >
+                DNSBL
+              </v-chip>
+            </span>
+          </td>
+          <td>
+            <v-progress-linear v-model="props.item.allocated_quota_in_percent"></v-progress-linear>
+          </td>
+        </template>
+      </v-data-table>
+    </v-flex>
+  </v-layout>
+  <!-- <div>
+       <div class="columns">
+       <div class="column">
+       <h1 class="title">Domains</h1>
+       </div>
+       <div class="column">
+       <router-link :to="{ name: 'DomainAdd' }" class="button is-primary">Add</router-link>
+       <b-dropdown>
+       <button class="button" slot="trigger">
+       <span>Actions</span>
+       <b-icon icon="menu-down"></b-icon>
+       </button>
+       <b-dropdown-item>Import</b-dropdown-item>
+       <b-dropdown-item>Export</b-dropdown-item>
+       </b-dropdown>
+       </div>
+       <div class="column">
+       <b-field>
+       <b-input placeholder="Search..." type="search" icon="magnify"></b-input>
+       </b-field>
+       </div>
+       </div>
+       <b-table :data="domains" paginated checkable>
+       <template slot-scope="props">
+       <b-table-column :sortable="false">
+       <router-link :to="{ name: 'DomainEdit', params: { domainPk: props.row.pk }}">
+       <b-icon icon="pencil"></b-icon>
+       </router-link>
+       <a href="#" title="Remove"  @click="confirmDelete(props.row)">
+       <b-icon icon="delete"></b-icon>
+       </a>
+       </b-table-column>
+       <b-table-column sortable field="name" label="Name">
+       {{ props.row.name }}
+       </b-table-column>
+       <b-table-column field="dns_status" label="DNS status">
+       <b-tag v-if="props.row.dns_status.checks === 'disabled'" rounded>Disabled</b-tag>
+       <b-tag v-if="props.row.dns_status.checks === 'pending'" type="is-info" rounded>Pending</b-tag>
+       <b-taglist v-if="props.row.dns_status.checks === 'active'">
+       <b-tag v-if="props.row.dns_status.mx" :type="getDNSTagType(props.row.dns_status.mx)" rounded>MX</b-tag>
+       <b-tag v-if="props.row.dns_status.dnsbl" :type="getDNSTagType(props.row.dns_status.dnsbl)" rounded>DNSBL</b-tag>
+       </b-taglist>
+       </b-table-column>
+       <b-table-column field="quota" label="Quota">
+       <progress class="progress is-primary"
+       :value="props.row.allocated_quota_in_percent" max="100">
+       {{ props.row.allocated_quota_in_percent }}%
+       </progress>
+       </b-table-column>
+       </template>
+       </b-table>
+       </div> -->
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 
 export default {
-  computed: mapGetters(['domains']),
-  data() {
-    return {}
-  },
-  created() {
-    this.$store.dispatch('getDomains')
-  },
-  methods: {
-    confirmDelete(domain) {
-      this.$dialog.prompt({
-        message: `Delete domain ${domain.name}?`,
-        inputAttrs: {
-          type: 'checkbox',
-          placeholder: 'Keep mailboxes on filesystem'
-        },
-        onConfirm: value => this.$toast.open(`Your age is: ${value}`)
-      })
+    computed: mapGetters(['domains']),
+    data () {
+        return {
+            headers: [
+                { text: '', value: 'name' },
+                { text: 'Name', value: 'name' },
+                { text: 'DNS status', value: 'dns_status' },
+                { text: 'Quota', value: 'allocated_quota_in_percent' }
+            ],
+            search: ''
+        }
     },
-    getDNSTagType(value) {
-      if (value === 'unknown') {
-        return 'is-warning'
-      } else if (value === 'ok') {
-        return 'is-danger'
-      } else {
-        return 'is-success'
-      }
+    created () {
+        this.$store.dispatch('getDomains')
+    },
+    methods: {
+        confirmDelete (domain) {
+            this.$dialog.prompt({
+                message: `Delete domain ${domain.name}?`,
+                inputAttrs: {
+                    type: 'checkbox',
+                    placeholder: 'Keep mailboxes on filesystem'
+                },
+                onConfirm: value => this.$toast.open(`Your age is: ${value}`)
+            })
+        },
+        getDNSTagType (value) {
+            if (value === 'unknown') {
+                return 'orange'
+            } else if (value === 'ok') {
+                return 'red'
+            } else {
+                return 'green'
+            }
+        }
     }
-  }
 }
 </script>
diff --git a/frontend/src/components/navigation/Navbar.vue b/frontend/src/components/navigation/Navbar.vue
index 5ccf79e2e..b2b9ec57b 100644
--- a/frontend/src/components/navigation/Navbar.vue
+++ b/frontend/src/components/navigation/Navbar.vue
@@ -1,70 +1,101 @@
 <template>
-  <aside>
-    <svg xmlns="http://www.w3.org/2000/svg" width="43" height="52" viewBox="0 0 43 52" class="modo-logo">
-      <g fill="#FFF">
-        <path d="M21.9964108,21 L40,10.0508068 C36.1185185,3.7978167 29.3170048,0 22,0 C14.6829952,0 7.88148146,3.7978167 4,10.0508068 L21.9964108,21 Z" />
-        <path d="M21.4961468,25.9648072 L1.22178013,14 C-1.09566722,20.4385601 -0.0784112625,27.5770277 3.95066026,33.1495782 C7.97973179,38.7221288 14.5202355,42.0366892 21.4961468,42.0411831 L21.4961468,52 L37.2852914,35.2976413 C42.7029462,29.5713312 44.4301418,21.3781287 41.7705135,14.0213403 L21.4961468,25.9648072 Z" />
-      </g>
-    </svg>
-
-    <svg xmlns="http://www.w3.org/2000/svg" width="144" height="23" viewBox="0 0 144 23">
-      <g fill="#4067F3">
-        <path d="M36.4615385 23C31.618426 23 27.6923077 19.0869687 27.6923077 14.26 27.6923077 9.43303129 31.618426 5.52 36.4615385 5.52 41.3046509 5.52 45.2307692 9.43303129 45.2307692 14.26 45.2273536 19.0855579 41.3032354 22.9965957 36.4615385 23zM36.4615385 8.58764124C34.1590485 8.58514416 32.0818832 9.96558568 31.1990219 12.085002 30.3161605 14.2044183 30.8015567 16.6452127 32.4287774 18.268776 34.0559981 19.8923393 36.5044257 20.3787746 38.6318903 19.5011641 40.759355 18.6235536 42.146674 16.5548164 42.1466754 14.26 42.1466772 11.1296516 39.6023544 8.5910475 36.4615385 8.58764124zM75.2307692 23C70.3876568 23 66.4615385 19.0869687 66.4615385 14.26 66.4615385 9.43303129 70.3876568 5.52 75.2307692 5.52 80.0738817 5.52 84 9.43303129 84 14.26 83.9931779 19.0841495 80.071053 22.9932006 75.2307692 23zM75.2307692 8.58764124C72.9282793 8.58514416 70.851114 9.96558568 69.9682526 12.085002 69.0853913 14.2044183 69.5707875 16.6452127 71.1980082 18.268776 72.8252289 19.8923393 75.2736565 20.3787746 77.4011211 19.5011641 79.5285857 18.6235536 80.9159048 16.5548164 80.9159061 14.26 80.9125011 11.1310581 78.3701703 8.59444145 75.2307692 8.58764124zM114.916884 23C110.074579 22.9965917 106.151568 19.082052 106.153847 14.2558869 106.156127 9.42972191 110.082834 5.51886495 114.92514 5.52000025 119.767446 5.52113555 123.692306 9.43383334 123.692308 14.2599989 123.688889 19.0879665 119.760999 23.0000012 114.916884 23zM114.916884 8.58763945C112.614956 8.58763945 110.539691 9.96966546 109.658781 12.0892809 108.777871 14.2088964 109.264797 16.6486793 110.892506 18.2709628 112.520215 19.8932462 114.968157 20.3785492 117.094862 19.5005757 119.221566 18.6226023 120.608214 16.5542542 120.608214 14.2599989 120.608214 11.1272413 118.060119 8.58763945 114.916884 8.58763945zM55.8492514 23C51.0044283 23 47.0769231 18.8810197 47.0769231 13.8 47.0769231 8.7189803 51.0044283 4.6 55.8492514 4.6 56.8766002 4.5965405 57.8962614 4.78577094 58.8600929 5.15875706 59.4051364 5.33485793 59.8130608 5.81197803 59.9207598 6.39934362 60.0284588 6.98670921 59.8183572 7.58846885 59.3744629 7.96401239 58.9305687 8.33955594 58.3253202 8.42759892 57.8007228 8.19293785 55.4709655 7.29069588 52.8523972 8.07824875 51.332652 10.1382557 49.8129068 12.1982627 49.7434905 15.0542594 51.1611883 17.1927933 52.5788861 19.3313273 55.1557949 20.2577715 57.5263569 19.4811837 59.8969188 18.7045959 61.5128404 16.4045952 61.517811 13.8L61.517811 1.62429379C61.517811.727221098 62.2112265 0 63.0665978 0 63.9219692 0 64.6153846.727221098 64.6153846 1.62429379L64.6153846 13.8C64.6119731 18.877001 60.690239 22.9928354 55.8492514 23zM1.60193429 22.9999875C1.17655379 23.0016372.768099475 22.8401747.467307584 22.5514683.166515693 22.2627618-.00170568823 21.8707187.0000130419293 21.4624295L.0000130419293 11.3540664C-.00197082639 8.50221341 1.86380136 5.95694981 4.66108711 4.99548616 7.45837285 4.03402251 10.583378 4.86389073 12.4679784 7.06866384 14.3583384 4.88137793 17.47279 4.06353266 20.2599678 5.02251172 23.0471455 5.98149079 24.9109863 8.51220784 24.9230769 11.3540664L24.9230769 21.4006802C24.9230769 22.2532603 24.202992 22.9444131 23.3147223 22.9444131 22.4264525 22.9444131 21.7063676 22.2532603 21.7063676 21.4006802L21.7063676 11.3540664C21.4804587 9.48564675 19.8317477 8.07620561 17.8720501 8.07620561 15.9123524 8.07620561 14.2636415 9.48564675 14.0377326 11.3540664 14.0377326 12.2066465 13.3176476 12.8977993 12.4293779 12.8977993 11.5411081 12.8977993 10.8210232 12.2066465 10.8210232 11.3540664 11.0034574 9.93240119 10.3157373 8.53716424 9.05485875 7.77089671 7.7939802 7.00462918 6.18586463 7.00462918 4.92498608 7.77089671 3.66410753 8.53716424 2.97638739 9.93240119 3.1588216 11.3540664L3.1588216 21.4624295C3.15916444 22.2950016 2.46901563 22.9765819 1.60193429 22.9999875z" />
-        <path d="M12.9156923 22.9998804C11.9001681 22.9998804 11.0769231 22.2748918 11.0769231 21.3805731L11.0769231 10.8258106C11.0769231 9.9279002 11.9034743 9.2 12.9230769 9.2 13.9426795 9.2 14.7692308 9.9279002 14.7692308 10.8258106L14.7692308 21.406586C14.7633906 21.8343382 14.564818 22.2425241 14.2172043 22.5413315 13.8695906 22.8401388 13.4014162 23.0050861 12.9156923 22.9998804zM95.5446545 23C90.7019524 22.9964221 86.7760599 18.8805854 86.7692308 13.8L86.7692308 1.62429379C86.7692308.727221098 87.4624014 0 88.3174707 0 89.1725399 0 89.8657106.727221098 89.8657106 1.62429379L89.8657106 13.8C89.868798 16.4082726 91.4852597 18.7126023 93.8580458 19.4912311 96.2308319 20.2698598 98.8107647 19.3425752 100.229961 17.2010245 101.649157 15.0594737 101.579147 12.1993156 100.057048 10.1370089 98.5349498 8.07470227 95.9130515 7.28756489 93.5814863 8.19293785 92.7974423 8.44634809 91.9615409 8.01134264 91.679451 7.20311338 91.3973611 6.39488412 91.7678578 5.49643578 92.5224902 5.15875706 93.4879673 4.78514308 94.5094074 4.59590492 95.5384615 4.6 100.381574 4.6 104.307692 8.7189803 104.307692 13.8 104.307692 18.8810197 100.381574 23 95.5384615 23L95.5446545 23zM142.445556 22.9993388C141.593908 22.9993388 140.903511 22.3112896 140.903511 21.4625378L140.903511 14.2599403C140.901244 11.7851712 139.287553 9.59820438 136.917889 8.85839914 134.548226 8.11859391 131.970942 8.99714448 130.552311 11.0283119 129.133681 13.0594793 129.201983 15.7732422 130.721008 17.7309752 132.240032 19.6887083 134.858272 20.4373832 137.187739 19.5801109 137.708256 19.3810598 138.296049 19.4775172 138.725046 19.8323847 139.154043 20.1872523 139.35743 20.74526 139.256982 21.2917934 139.156534 21.8383268 138.767896 22.2882643 138.240541 22.4685562 134.644788 23.7780393 130.612248 22.6115365 128.278807 19.586901 125.945366 16.5622654 125.850397 12.3786386 128.044202 9.25193189 130.238007 6.12522521 134.213489 4.77817384 137.864984 5.92426076 141.516478 7.07034769 143.999946 10.4446561 143.999987 14.2599403L143.999987 21.4625378C144.001677 21.8727833 143.838048 22.2665335 143.545807 22.5554607 143.253565 22.8443878 142.857175 23.004305 142.445556 22.9993388z" />
-      </g>
-    </svg>
-    <hr>
-    <nav class="menu">
-      <ul class="menu-list">
-        <router-link v-for="(item, index) in menu" :key="index" tag="li" :to="{ name: item.route }">
-          <a>
-            <b-icon :icon="item.icon" size="is-large"></b-icon>
-            <br> {{ item.label }}</a>
-        </router-link>
-      </ul>
-    </nav>
-  </aside>
+  <v-navigation-drawer
+      :clipped="$vuetify.breakpoint.lgAndUp"
+      v-model="drawer"
+      app
+  >
+    <v-list dense>
+      <template v-for="item in items">
+        <v-layout
+            v-if="item.heading"
+            :key="item.heading"
+            row
+            align-center
+        >
+          <v-flex xs6>
+            <v-subheader v-if="item.heading">
+              {{ item.heading }}
+            </v-subheader>
+          </v-flex>
+          <v-flex xs6 class="text-xs-center">
+            <a href="#!" class="body-2 black--text">EDIT</a>
+          </v-flex>
+        </v-layout>
+        <v-list-group
+            v-else-if="item.children"
+            v-model="item.model"
+            :key="item.text"
+            :prepend-icon="item.model ? item.icon : item['icon-alt']"
+            append-icon=""
+        >
+          <v-list-tile slot="activator">
+            <v-list-tile-content>
+              <v-list-tile-title>
+                {{ item.text }}
+              </v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile
+              v-for="(child, i) in item.children"
+              :key="i"
+              :to="child.to"
+          >
+            <v-list-tile-action v-if="child.icon">
+              <v-icon>{{ child.icon }}</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>
+                {{ child.text }}
+              </v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list-group>
+        <v-list-tile v-else :key="item.text" :to="item.to">
+          <v-list-tile-action>
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title>
+              {{ item.text }}
+            </v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+      </template>
+    </v-list>
+  </v-navigation-drawer>
 </template>
 
-<style scoped>
-.modo-logo {
-  background-color: #4067f3;
-  border-radius: 50%;
-}
-</style>
-
 <script>
 export default {
-  data() {
-    return {
-      menu: [
-        {
-          route: '/',
-          icon: 'dashboard',
-          label: 'Dashboard'
-        },
-        {
-          route: 'DomainList',
-          icon: 'domain',
-          label: 'Domains'
-        },
-        {
-          route: 'DomainList',
-          icon: 'account',
-          label: 'Identities'
-        },
-        {
-          route: 'DomainList',
-          icon: 'database-search',
-          label: 'Logs'
-        },
-        {
-          route: 'ParametersEdit',
-          icon: 'tune',
-          label: 'Parameters'
+    data () {
+        return {
+            drawer: true,
+            items: [
+                {
+                    text: 'Dashboard',
+                    icon: 'dashboard'
+                },
+                {
+                    text: 'Domains',
+                    to: { name: 'DomainList' },
+                    icon: 'domain',
+                    model: true
+                },
+                {
+                    text: 'Identities',
+                    icon: 'account_box'
+                },
+                {
+                    icon: 'search',
+                    text: 'Logs'
+                },
+                {
+                    to: { name: 'ParametersEdit' },
+                    icon: 'settings',
+                    text: 'Parameters'
+                }
+            ]
         }
-      ]
     }
-  }
 }
 </script>
diff --git a/frontend/src/components/parameters/ParametersForm.vue b/frontend/src/components/parameters/ParametersForm.vue
index dd0d2f3e3..3ac4a4315 100644
--- a/frontend/src/components/parameters/ParametersForm.vue
+++ b/frontend/src/components/parameters/ParametersForm.vue
@@ -1,27 +1,38 @@
 <template>
-  <div>
-    <h1 class="title">Parameters</h1>
-    <form>
-      <h2 class="subtitle" v-for="(element, index) in structure"
-          v-if="element.type === 'section'" :key="index">
-        {{ element.label }}
-      </h2>
-      <b-field v-else :label="element.label" horizontal>
-        <b-input v-if="element.widget === 'CharField' || element.widget === 'IntegerField'"
-                 v-model="parameters[element.name]">
-        </b-input>
-        <b-checkbox v-else-if="element.widget === 'BooleanField'"
-                    v-model="parameters[element.name]"></b-checkbox>
-        <b-select v-else-if="element.widget === 'ChoiceField'"
-                  v-model="parameters[element.name]">
-          <option v-for="choice in Object.entries(element.choices)"
-                  :value="choice[0]" :key="choice[0]">
-            {{ choice[1] }}
-          </option>
-        </b-select>
-      </b-field>
-    </form>
-  </div>
+  <v-layout>
+    <v-flex>
+      <h1 class="title">Parameters</h1>
+      <v-expansion-panel>
+        <v-expansion-panel-content
+            v-for="(element, index) in structure"
+            :key="index"
+        >
+          <div slot="header">{{ element.label }}</div>
+          <v-card>
+            <v-card-text>
+              <v-text-field v-for="(param, index) in element.parameters"
+                            :label="param.label"
+                            :key="index"
+                            :hint="param.help_text"
+                            v-model="parameters[param.name]"
+                            v-if="param.widget === 'CharField' || param.widget === 'IntegerField'">
+              </v-text-field>
+              <v-checkbox :label="param.label"
+                          v-model="parameters[param.name]"
+                          v-else-if="param.widget === 'BooleanField'"
+              >
+              </v-checkbox>
+              <v-select :label="param.label"
+                        v-model="parameters[param.name]"
+                        :items="param.choices"
+                        v-else-if="param.widget === 'ChoiceField'">
+              </v-select>
+            </v-card-text>
+          </v-card>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-flex>
+  </v-layout>
 </template>
 
 <script>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 21e0c7a5b..d8feb9748 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,15 +1,18 @@
 import Vue from 'vue'
-import Buefy from 'buefy'
-import 'buefy/lib/buefy.css'
-import '@mdi/font/css/materialdesignicons.css'
-
+/* import Buefy from 'buefy'
+ * import 'buefy/lib/buefy.css'
+ * import '@mdi/font/css/materialdesignicons.css'
+ * */
+import Vuetify from 'vuetify'
 import Cookies from 'js-cookie'
-
+import 'vuetify/dist/vuetify.min.css'
+import 'material-design-icons-iconfont/dist/material-design-icons.css'
 import App from './App'
 import router from './router'
 import store from './store'
 
-Vue.use(Buefy)
+// Vue.use(Buefy)
+Vue.use(Vuetify)
 
 Vue.config.productionTip = false
 
@@ -19,9 +22,9 @@ Vue.http.headers.common['X-CSRFTOKEN'] = csrftoken
 
 /* eslint-disable no-new */
 new Vue({
-  el: '#app',
-  router,
-  store,
-  components: { App },
-  template: '<App/>'
+    el: '#app',
+    router,
+    store,
+    components: { App },
+    template: '<App/>'
 })
diff --git a/frontend/src/scss/main.scss b/frontend/src/scss/main.scss
index fdde96ee2..5970d61c8 100644
--- a/frontend/src/scss/main.scss
+++ b/frontend/src/scss/main.scss
@@ -1,16 +1,42 @@
 // Import Bulma's core
 @import "~bulma/sass/utilities/_all";
+
 // Set your colors
 $primary: #8c67ef;
 $primary-invert: findColorInvert($primary);
 $twitter: #4099FF;
 $twitter-invert: findColorInvert($twitter);
+
 // Setup $colors to use as bulma classes (e.g. 'is-twitter')
 $colors: ( "white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert), "twitter": ($twitter, $twitter-invert));
+
 // Links
 $link: $primary;
 $link-invert: $primary-invert;
 $link-focus-border: $primary;
+
 // Import Bulma and Buefy styles
 @import "~bulma";
-@import "~buefy/src/scss/buefy";
\ No newline at end of file
+@import "~buefy/src/scss/buefy";
+
+.is-sidebar-menu {
+  padding: 2.5rem;
+}
+
+.columns {
+  &.is-fullheight {
+    min-height: calc(100vh - ( #{$navbar-height} - .75rem ) );
+    max-height: calc(100vh - ( #{$navbar-height} - .75rem ) );
+    height: calc(100vh - ( #{$navbar-height} - .75rem ) );
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    .column {
+      overflow-y: auto;
+    } 
+  }
+}
+    
+.is-main-content {
+  padding-top: 20px;
+}
\ No newline at end of file
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 5ecc86518..9e0595c7a 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -6,10 +6,10 @@ import domains from './modules/domains'
 Vue.use(Vuex)
 
 const options = {
-  modules: {
-    domains
-  },
-  strict: process.env.NODE_ENV !== 'production'
+    modules: {
+        domains
+    },
+    strict: process.env.NODE_ENV !== 'production'
 }
 
 export default new Vuex.Store(options)
diff --git a/frontend/src/store/modules/domains.js b/frontend/src/store/modules/domains.js
index 30e504da5..b92d29322 100644
--- a/frontend/src/store/modules/domains.js
+++ b/frontend/src/store/modules/domains.js
@@ -8,63 +8,63 @@ const UPDATE_DOMAIN = 'UPDATE_DOMAIN'
 
 // initial state
 const state = {
-  domainsLoaded: false,
-  domains: []
+    domainsLoaded: false,
+    domains: []
 }
 
 // getters
 const getters = {
-  domains: state => state.domains,
-  getDomainByPk: state => pk => {
-    for (var domain of state.domains) {
-      if (domain.pk === parseInt(pk, 10)) {
-        return domain
-      }
+    domains: state => state.domains,
+    getDomainByPk: state => pk => {
+        for (var domain of state.domains) {
+            if (domain.pk === parseInt(pk, 10)) {
+                return domain
+            }
+        }
+        return null
     }
-    return null
-  }
 }
 
 // actions
 const actions = {
-  getDomains({ commit }) {
-    return api.getDomains().then(response => {
-      commit(SET_DOMAINS, { domains: response.data })
-    })
-  },
-  createDomain({ commit }, data) {
-    return api.createDomain(data).then(response => {
-      commit(ADD_DOMAIN, { domain: response.data })
-    })
-  },
-  updateDomain({ commit }, data) {
-    return api.updateDomain(data).then(response => {
-      commit(UPDATE_DOMAIN, { domain: response.data })
-    })
-  }
+    getDomains ({ commit }) {
+        return api.getDomains().then(response => {
+            commit(SET_DOMAINS, { domains: response.data })
+        })
+    },
+    createDomain ({ commit }, data) {
+        return api.createDomain(data).then(response => {
+            commit(ADD_DOMAIN, { domain: response.data })
+        })
+    },
+    updateDomain ({ commit }, data) {
+        return api.updateDomain(data).then(response => {
+            commit(UPDATE_DOMAIN, { domain: response.data })
+        })
+    }
 }
 
 // mutations
 const mutations = {
-  [SET_DOMAINS](state, { domains }) {
-    state.domainsLoaded = true
-    state.domains = domains
-  },
-  [ADD_DOMAIN](state, { domain }) {
-    state.domains.push(domain)
-  },
-  [UPDATE_DOMAIN](state, { domain }) {
-    state.domains.filter(function(item, pos) {
-      if (item.pk === domain.pk) {
-        Vue.set(state.domains, pos, domain)
-      }
-    })
-  }
+    [SET_DOMAINS] (state, { domains }) {
+        state.domainsLoaded = true
+        state.domains = domains
+    },
+    [ADD_DOMAIN] (state, { domain }) {
+        state.domains.push(domain)
+    },
+    [UPDATE_DOMAIN] (state, { domain }) {
+        state.domains.filter(function (item, pos) {
+            if (item.pk === domain.pk) {
+                Vue.set(state.domains, pos, domain)
+            }
+        })
+    }
 }
 
 export default {
-  state,
-  getters,
-  actions,
-  mutations
+    state,
+    getters,
+    actions,
+    mutations
 }
diff --git a/modoboa/admin/serializers.py b/modoboa/admin/serializers.py
index 47db4d216..bb98f6d4c 100644
--- a/modoboa/admin/serializers.py
+++ b/modoboa/admin/serializers.py
@@ -34,7 +34,8 @@ class DomainSerializer(serializers.ModelSerializer):
             "pk", "name", "quota", "default_mailbox_quota", "enabled", "type",
             "enable_dkim", "dkim_key_selector", "dkim_key_length",
             "dkim_public_key", "dkim_private_key_path",
-            "mailbox_count", "mbalias_count", "domainalias_count"
+            "mailbox_count", "mbalias_count", "domainalias_count",
+            "dns_status"
         )
         read_only_fields = (
             "pk", "dkim_public_key", "dns_status", "allocated_quota_in_percent"
diff --git a/modoboa/parameters/tools.py b/modoboa/parameters/tools.py
index 5b0ac2983..f3a672e1e 100644
--- a/modoboa/parameters/tools.py
+++ b/modoboa/parameters/tools.py
@@ -100,14 +100,13 @@ class Registry(object):
         result = []
         for app, fields in list(self._registry2[level].items()):
             for section, sconfig in list(fields["params"].items()):
-                result.append({
-                    "type": "section",
+                item = {
                     "label": sconfig["label"],
-                    "display": sconfig.get("display", "")
-                })
+                    "display": sconfig.get("display", ""),
+                    "parameters": []
+                }
                 for name, config in list(sconfig["params"].items()):
                     data = {
-                        "type": "field",
                         "name": "{}-{}".format(app, name),
                         "label": config["label"],
                         "help_text": config.get("help_text", ""),
@@ -115,8 +114,12 @@ class Registry(object):
                         "widget": config["field"].__class__.__name__,
                     }
                     if data["widget"] == "ChoiceField":
-                        data["choices"] = config["field"].choices
-                    result.append(data)
+                        data["choices"] = [
+                            {"text": value, "value": key}
+                            for key, value in config["field"].choices.items()
+                        ]
+                    item["parameters"].append(data)
+                result.append(item)
         return result
 
     def exists(self, level, app, parameter=None):