diff --git a/components/Event.vue b/components/Event.vue
index ab541480..33436cb4 100644
--- a/components/Event.vue
+++ b/components/Event.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
   v-card.h-event.event.mt-1
     nuxt-link(:to='`/event/${event.id}`')
-      v-img(:src="`/media/thumb/${event.image_path}`"
-        gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.7)"
+      v-img.align-end(:src="`/media/thumb/${event.image_path}`"
+        gradient="to bottom, rgba(255,255,255,.1), rgba(255,255,255,.9)"
         height="250" position="top top"
-        class="white--text align-end")
+        :class="settings['theme.is_dark']?'light--text':'dark--text'")
         v-card-title {{event.title}}
     //- v-list-item
       v-list-item-content
diff --git a/components/List.vue b/components/List.vue
index 5ab1dd49..4b533939 100644
--- a/components/List.vue
+++ b/components/List.vue
@@ -1,18 +1,13 @@
 <template lang='pug'>
 div#list
   p(v-if='title') {{title}}
-  v-timeline
+  v-timeline(dense)
     v-timeline-item(
       v-for='event in events'
-      :key='`${event.id}_${event.start_datetime}`'
-      :timestamp='event|when'
-      placement='top' icon='el-icon-arrow-down' size='large')
-
-      div.float-right
-        small @{{event.place.name}}
-
+      :key='`${event.id}_${event.start_datetime}`')
+      div {{event|when}}
       a(:href='`/event/${event.id}`' target='_blank') {{event.title}}
-      hr
+      small.float-right @{{event.place.name}}
 </template>
 <script>
 
diff --git a/components/admin/Moderation.vue b/components/admin/Moderation.vue
index 47235e0d..8773bece 100644
--- a/components/admin/Moderation.vue
+++ b/components/admin/Moderation.vue
@@ -42,7 +42,7 @@
 
     div
       //- el-divider {{$t('common.resources')}}
-      v-table(:data='paginatedResources' small :row-style='resourceStyle')
+      v-data-table(:data='resources')
         //- el-table-column(:label="$t('common.event')")
         //-   template(slot-scope='data')
         //-     span {{data.row.event}}
@@ -64,7 +64,6 @@
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'
-import { MessageBox } from 'element-ui'
 
 export default {
   name: 'Moderation',
diff --git a/components/admin/Theme.vue b/components/admin/Theme.vue
index 33b1330b..026be73d 100644
--- a/components/admin/Theme.vue
+++ b/components/admin/Theme.vue
@@ -45,9 +45,14 @@ export default {
     primary_color: {
       get () { return this.settings['theme.primary'] },
       set (value) {
-        // this.$vuetify.theme.themes.dark.primary = value.hex
-        this.$vuetify.theme.themes.light.primary = value.hex
-        this.setSetting({ key: 'theme.primary', value: value.hex })
+        if (!value) { return }
+        if (this.settings['theme.is_dark']) {
+          this.$vuetify.theme.themes.dark.primary = value
+        } else {
+          this.$vuetify.theme.themes.light.primary = value
+        }
+        // this.$vuetify.theme.themes.light.primary = value.hex
+        // this.setSetting({ key: 'theme.primary', value: value.hex })
       }
     }
   },
diff --git a/layouts/default.vue b/layouts/default.vue
index 69e94b1c..92239c3e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -17,9 +17,15 @@ import FollowMe from '../components/FollowMe'
 import Snackbar from '../components/Snackbar'
 import Footer from '../components/Footer'
 import Confirm from '../components/Confirm'
+import { mapState } from 'vuex'
 
 export default {
   name: 'Default',
   components: { Nav, FollowMe, Snackbar, Footer, Confirm },
+  computed: mapState(['settings']),
+  created () {
+    this.$vuetify.theme.dark = this.settings['theme.is_dark']
+    this.$vuetify.theme.themes.dark.primary = this.settings['theme.primary']
+  }
 }
 </script>
diff --git a/pages/add/_edit.vue b/pages/add/_edit.vue
index f95633fd..b63ebc10 100644
--- a/pages/add/_edit.vue
+++ b/pages/add/_edit.vue
@@ -1,9 +1,6 @@
 <template lang="pug">
   v-container
-    v-card
-      v-card-text
         h2.text-center {{edit?$t('common.edit_event'):$t('common.add_event')}}
-        p {{valid}}
         v-form(v-model='valid')
 
           //- NOT LOGGED EVENT
@@ -68,17 +65,17 @@
               //- el-option(:label="$t('event.each_month')" value='1m' key='1m')
 
             client-only
-              v-date-picker.mx-auto(
-                :mode='datePickerMode'
-                :attributes='attributes'
-                v-model='date'
-                :locale='$i18n.locale'
-                :from-page.sync='page'
-                is-dark
-                is-inline
-                is-expanded
-                :style="{width: '500px'}"
-                :min-date='event.type !== "recurrent" && new Date()')
+              .datePicker
+                v-date-picker(
+                  :mode='datePickerMode'
+                  :attributes='attributes'
+                  v-model='date'
+                  :locale='$i18n.locale'
+                  :from-page.sync='page'
+                  :is-dark="settings['theme.is_dark']"
+                  is-inline
+                  is-expanded
+                  :min-date='event.type !== "recurrent" && new Date()')
 
           div.text-center.mb-2(v-if='event.type === "recurrent"')
             span(v-if='event.recurrent.frequency !== "1m" && event.recurrent.frequency !== "2m"') {{whenPatterns}}
@@ -88,29 +85,57 @@
 
           v-row
             v-col
-              v-menu(v-model='fromDateMenu')
+              v-menu(v-model='fromDateMenu'
+                  :close-on-content-click="false"
+                  transition="slide-x-transition"
+                  ref='fromDateMenu'
+                  :return-value.sync="time.start"
+                  offset-y
+                  absolute
+                  top
+                  max-width="290px"
+                  min-width="290px")
                 template(v-slot:activator='{ on }')
                   v-text-field(
                     :label="$t('event.from')"
-                    v-on='on'
                     :value='time.start'
+                    v-on='on'
+                    clearable
                     readonly)
-                v-time-picker.mr-2(
+                v-time-picker(
+                  v-if='fromDateMenu'
                   :label="$t('event.from')"
+                  format="24hr"
                   ref='time_start'
-                  v-model="time.start")
+                  :allowed-minutes="[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]"
+                  v-model='time.start'
+                  @click:minute="$refs.fromDateMenu.save(time.start)")
 
             v-col
-              v-menu(v-model='dueDateMenu')
+              v-menu(v-model='dueDateMenu'
+                  :close-on-content-click="false"
+                  transition="slide-x-transition"
+                  ref='dueDateMenu'
+                  :return-value.sync="time.end"
+                  offset-y
+                  absolute
+                  top
+                  max-width="290px"
+                  min-width="290px")
                 template(v-slot:activator='{ on }')
                   v-text-field(
                     :label="$t('event.due')"
-                    v-on='on'
                     :value='time.end'
+                    v-on='on'
+                    clearable
                     readonly)
-                v-time-picker.mr-2(
+                v-time-picker(
+                  v-if='dueDateMenu'
                   :label="$t('event.due')"
-                  v-model="time.end")
+                  format="24hr"
+                  :allowed-minutes="[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]"
+                  v-model='time.end'
+                  @click:minute="$refs.dueDateMenu.save(time.end)")
 
           List(v-if='event.type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
 
@@ -348,17 +373,6 @@ export default {
     cleanFile () {
       this.event.image = {}
     },
-    uploadedFile (files) {
-      // const file = files[0]
-
-      // if (file.size / 1024 / 1024 > 4) {
-      //   Message({ type: 'warning', showClose: true, message: this.$tc('event.image_too_big') })
-      //   this.fileList = []
-      //   return false
-      // }
-      // this.fileList = [{ name: file.name, url: file.url }]
-      // this.event.image = file
-    },
     async done () {
       this.loading = true
       let start_datetime, end_datetime
@@ -442,6 +456,10 @@ export default {
 }
 </script>
 <style style='less'>
+.datePicker {
+  max-width: 500px !important;
+  margin: 0 auto;
+}
 /* #edit_page
   i {
     font-size: 1.3em;