diff --git a/assets/clipboard.js b/assets/clipboard.js
index 6b4f6f54..19b0a33e 100644
--- a/assets/clipboard.js
+++ b/assets/clipboard.js
@@ -12,7 +12,7 @@ export default {
         document.execCommand('copy')
         document.body.removeChild(el)
       }
-      this.$root.$message(msg)
+      this.$root.$message(msg, { color: 'success'})
     }
   }
 }
diff --git a/assets/editor.less b/assets/editor.less
deleted file mode 100644
index b7b8c975..00000000
--- a/assets/editor.less
+++ /dev/null
@@ -1,61 +0,0 @@
-
-.editor {
-  position: relative;
-  overflow-y: auto;
-  padding-top: 1.7em;
-  scrollbar-width: thin;
-
-  &.with-border {
-    border: 1px solid #ddd;
-    border-radius: 5px;
-  }
-
-  .content {
-    padding: 0px 5px 0px 5px;
-    flex: 1;
-    scrollbar-width: thin;
-    overflow-y: auto;
-  }
-
-  .menububble {
-    position: absolute;
-    display: flex;
-    overflow: hidden;
-    opacity: 0;
-    z-index: 1;
-    background: #dddddd;
-    transform: translateX(-50%);
-    border-radius: 3px;
-    padding: 0.07rem;
-    transition: opacity 0.2s, visibility 0.2s, left .2s, bottom .2s;
-    visibility: hidden;
-
-    &.is-active {
-      opacity: 1;
-      visibility: visible;
-    }
-    input {
-      padding: 0;
-      margin: 1px;
-      display: block;
-      border: 0;
-      color: #444;
-      font-size: .8em;
-      border-radius: 3px;
-      line-height: 100%;
-      transition: width .2s;
-      padding-left: 5px;
-      flex-grow: 1;
-    }
-
-    .fa-icon {
-      width: auto;
-      font-size: 10px;
-      height: 1.4em; /* or any other relative font sizes */
-      /* You would have to include the following two lines to make this work in Safari */
-      // max-width: 100%;
-      max-height: 100%;
-    }
-
-  }
-}
diff --git a/assets/event.less b/assets/event.less
deleted file mode 100644
index 2bf07805..00000000
--- a/assets/event.less
+++ /dev/null
@@ -1,56 +0,0 @@
-// .event {
-//   width: 320px;
-//   max-width: 450px;
-//   flex-grow: 1;
-//   margin: .2em;
-//   background-color: #202020;
-//   overflow: hidden;
-
-//   a:hover {
-//     text-decoration: none;
-//     .title {
-//       border-bottom: 1px solid #888;
-//       color: white;
-//     }
-//   }
-
-//   .title {
-//     margin-left: 1rem;
-//     margin-top: 1rem;
-//     margin-right: 1rem;
-//     border-bottom: 1px solid #333;
-//     transition: border-color .5s;
-//     font-size: 1.2em;
-//     max-height: 3em;
-//     overflow: hidden;
-//     color: white;
-//     font-weight: bold;
-//   }
-
-//   .card-footer {
-//     max-height: 4.5em;
-//     overflow: hidden;
-//     padding: .25rem 0.5rem;
-//     line-height: 1.8rem;
-//     min-height: 2.2rem;
-//   }
-
-//   .card-body {
-//     overflow: hidden;
-//   }
-
-//   .description {
-//     color: #999;
-//     font-size: 0.8em;
-//     overflow: hidden;
-//     max-height: 100%;
-//   }
-
-//   .el-image { width: 100% }
-//   img {
-//     width: 100%;
-//     max-height: 250px;
-//     object-fit: cover;
-//     object-position: top;
-//   }
-// }
diff --git a/assets/variables.scss b/assets/variables.scss
index 5f9e5b32..253c9e3d 100644
--- a/assets/variables.scss
+++ b/assets/variables.scss
@@ -5,138 +5,4 @@
 
 // If you need to extend Vuetify SASS lists
 // $material-light: ( cards: blue );
-
-@import '~vuetify/src/styles/styles.sass';
-
-html, body {
-  scrollbar-width: thin;
-  overflow: auto !important;
-  scrollbar-color: #FF4511 #111;
-  font-family: sans-serif;
-}
-
-li {
-  margin-left: 10px;
-}
-
-.v-dialog .theme--dark.v-card {
-  background-color: #434343;
-}
-
-.v-application .p-description.text-body-1 {
-  letter-spacing: normal !important;
-}
-
-#home {
-  max-width: 1400px;
-  padding: 0px;
-  overflow: hidden;
-}
-
-#events {
-  margin: 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-#calh {
-  height: 292px;
-}
-
-.container {
-  max-width: 1400px;
-}
-
-.v-dialog {
-  width: 600px;
-  max-width: 800px;
-  &.v-dialog--fullscreen {
-    max-width: 100%;
-  }
-}
-
-.theme--dark.v-list {
-  background-color: #333;
-}
-
-.v-autocomplete__content.v-menu__content {
-  scrollbar-width: thin;
-  scrollbar-color: #FF4511 #111;
-}
-
-// EVENT
-.event {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  width: 330px;
-  max-width: 500px !important;
-  flex-grow: 1;
-  margin-top: .4em;
-  margin-right: .4em;
-  transition: all .5s;
-  overflow: hidden;
-
-  .title {
-    display: -webkit-box;
-    overflow: hidden;
-    margin: 0.5rem 1rem 0.5rem 1rem;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    font-size: 1.1em !important;
-    line-height: 1.2em !important;
-  }
-
-  .body {
-    flex: 1 1 auto;
-  }
-
-  .img {
-    width: 100%;
-    max-height: 250px;
-    min-height: 160px;
-    object-fit: cover;
-    object-position: top;
-    aspect-ratio: 1.7778;
-  }
-
-  .place {
-    max-width: 100%;
-    span {
-      display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  a {
-    text-decoration: none;
-  }
-}
-
-.vc-past {
-  opacity: 0.4;
-}
-
-#event {
-  max-width: 1200px;
-}
-
-.tags .v-chip .v-chip__content {
-  max-width: 120px;
-  white-space: nowrap;
-  overflow: hidden;
-  display: block;
-}
-
-
-.cursorPointer {
-  cursor: pointer;
-}
-
-pre {
-  white-space: break-spaces;
-  font-size: 13px;
-}
\ No newline at end of file
+@import '~vuetify/src/styles/styles.sass';
\ No newline at end of file
diff --git a/components/Event.vue b/components/Event.vue
index 57eee4a5..d84fff1a 100644
--- a/components/Event.vue
+++ b/components/Event.vue
@@ -6,9 +6,9 @@
       .title.p-name(itemprop="name") {{event.title}}
 
     v-card-text.body.pt-0.pb-0
-      time.dt-start.subtitle-1(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")' itemprop="startDate" :content="event.start_datetime|unixFormat('YYYY-MM-DDTHH:mm')")  <v-icon>mdi-calendar</v-icon> {{ event|when }}
+      time.dt-start.subtitle-1(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")' itemprop="startDate" :content="event.start_datetime|unixFormat('YYYY-MM-DDTHH:mm')")  <v-icon v-text='mdiCalendar'></v-icon> {{ event|when }}
       .d-none.dt-end(itemprop="endDate" :content="event.end_datetime|unixFormat('YYYY-MM-DDTHH:mm')") {{event.end_datetime|unixFormat('YYYY-MM-DD HH:mm')}}
-      a.place.d-block.p-location.pl-0(text color='primary' @click="$emit('placeclick', event.place.id)" itemprop="location" :content="event.place.name") <v-icon>mdi-map-marker</v-icon> {{event.place.name}}
+      a.place.d-block.p-location.pl-0(text color='primary' @click="$emit('placeclick', event.place.id)" itemprop="location" :content="event.place.name") <v-icon v-text='mdiMapMarker'></v-icon> {{event.place.name}}
       .d-none(itemprop='location.address') {{event.place.address}}
 
     v-card-actions.pt-0.actions.justify-space-between
@@ -16,41 +16,47 @@
         v-chip.ml-1.mt-1(v-for='tag in event.tags.slice(0,6)' small
           :key='tag' outlined color='primary' @click="$emit('tagclick', tag)") {{tag}}
 
-      v-menu(offset-y)
-        template(v-slot:activator="{on}")
-          v-btn.align-self-end(icon v-on='on' color='primary' alt='more')
-            v-icon(v-text='mdiDotsVertical')
-        v-list(dense)
-          v-list-item-group
-            v-list-item(@click='clipboard(`${settings.baseurl}/event/${event.slug || event.id}`)')
-              v-list-item-icon
-                v-icon(v-text='mdiContentCopy')
-              v-list-item-content
-                v-list-item-title {{$t('common.copy_link')}}
-            v-list-item(:href='`/api/event/${event.slug || event.id}.ics`')
-              v-list-item-icon
-                v-icon(v-text='mdiCalendarExport')
-              v-list-item-content
-                v-list-item-title {{$t('common.add_to_calendar')}}
-            v-list-item(v-if='is_mine' :to='`/add/${event.id}`')
-              v-list-item-icon
-                v-icon(v-text='mdiPencil')
-              v-list-item-content
-                v-list-item-title {{$t('common.edit')}}
-            v-list-item(v-if='is_mine' @click='remove(false)')
-              v-list-item-icon
-                v-icon(color='error' v-text='mdiDeleteForever')
-              v-list-item-content
-                v-list-item-title {{$t('common.remove')}}
+      client-only
+        v-menu(offset-y)
+          template(v-slot:activator="{on}")
+            v-btn.align-self-end(icon v-on='on' color='primary' alt='more')
+              v-icon(v-text='mdiDotsVertical')
+          v-list(dense)
+            v-list-item-group
+              v-list-item(@click='clipboard(`${settings.baseurl}/event/${event.slug || event.id}`)')
+                v-list-item-icon
+                  v-icon(v-text='mdiContentCopy')
+                v-list-item-content
+                  v-list-item-title {{$t('common.copy_link')}}
+              v-list-item(:href='`/api/event/${event.slug || event.id}.ics`')
+                v-list-item-icon
+                  v-icon(v-text='mdiCalendarExport')
+                v-list-item-content
+                  v-list-item-title {{$t('common.add_to_calendar')}}
+              v-list-item(v-if='is_mine' :to='`/add/${event.id}`')
+                v-list-item-icon
+                  v-icon(v-text='mdiPencil')
+                v-list-item-content
+                  v-list-item-title {{$t('common.edit')}}
+              v-list-item(v-if='is_mine' @click='remove(false)')
+                v-list-item-icon
+                  v-icon(color='error' v-text='mdiDeleteForever')
+                v-list-item-content
+                  v-list-item-title {{$t('common.remove')}}
+        template(#placeholder)
+          v-btn.align-self-end(icon color='primary' alt='more')
+            v-icon(v-text='mdiDotsVertical')                
 </template>
 <script>
 import { mapState } from 'vuex'
 import clipboard from '../assets/clipboard'
-import { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy, mdiCalendarExport, mdiDeleteForever } from '@mdi/js'
+import { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy,
+  mdiCalendarExport, mdiDeleteForever, mdiCalendar, mdiMapMarker } from '@mdi/js'
 
 export default {
   data () {
-    return { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy, mdiCalendarExport, mdiDeleteForever }
+    return { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy, mdiCalendarExport,
+      mdiDeleteForever, mdiMapMarker, mdiCalendar }
   },
   props: {
     event: { type: Object, default: () => ({}) },
diff --git a/components/Snackbar.vue b/components/Snackbar.vue
index a3e9c0e6..8c8217f6 100644
--- a/components/Snackbar.vue
+++ b/components/Snackbar.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { mdiAlert, mdiCloseCircle } from '@mdi/js'
+import { mdiAlert, mdiCloseCircle, mdiInformation } from '@mdi/js'
 
 export default {
   data () {
     return {
-      mdiAlert, mdiCloseCircle,
-      icon: mdiAlert,
+      mdiAlert, mdiAlert, mdiCloseCircle, mdiInformation,
+      icon: mdiInformation,
       color: 'secondary',
       bottom: true,
       top: false,
@@ -36,7 +36,7 @@ export default {
       this.active = true
       this.message = this.$t(message, opts)
       this.color = opts.color || 'secondary'
-      this.icon = opts.icon || mdiAlert
+      this.icon = opts.icon || (this.color === 'success' ? mdiInformation : mdiAlert)
     }
   }
 }
diff --git a/nuxt.config.js b/nuxt.config.js
index 769acc3f..936079c0 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,6 +1,7 @@
 const config = require('./server/config.js')
 const minifyTheme = require('minify-css-string').default
 
+const isDev = (process.env.NODE_ENV !== 'production')
 module.exports = {
   telemetry: false,
   modern: (process.env.NODE_ENV === 'production') && 'client',
@@ -12,9 +13,11 @@ module.exports = {
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' }
     ],
-    link: [{ rel: 'icon', type: 'image/png', href: '/logo.png' }]
+    link: [{ rel: 'icon', type: 'image/png', href: '/logo.png' }],
+    link: [{ rel: 'preload', type: 'image/png', href: '/logo.png', as: 'media' }],
+    script: [{ src: '/gancio-events.es.js', async: true, body: true }],
   },
-  dev: (process.env.NODE_ENV !== 'production'),
+  dev: isDev,
   server: config.server,
 
 
@@ -24,6 +27,8 @@ module.exports = {
     }
   },
 
+  css: ['./assets/style.less'],
+
   /*
    ** Customize the progress-bar component
    */
@@ -106,10 +111,7 @@ module.exports = {
         }
       }      
     },
-    defaultAssets: {
-      icons: false
-    }    
-  },
+    defaultAssets: false
   build: {
     corejs: 3,
     cache: true,
diff --git a/pages/Admin.vue b/pages/Admin.vue
index 50abc0cb..10db97dd 100644
--- a/pages/Admin.vue
+++ b/pages/Admin.vue
@@ -49,18 +49,19 @@
 </template>
 <script>
 import { mapState } from 'vuex'
-import Users from '../components/admin/Users'
-import Events from '../components/admin/Events'
-import Places from '../components/admin/Places'
-import Settings from '../components/admin/Settings'
-import Federation from '../components/admin/Federation'
-import Moderation from '../components/admin/Moderation'
-import Announcement from '../components/admin/Announcement'
-import Theme from '../components/admin/Theme'
 
 export default {
   name: 'Admin',
-  components: { Users, Events, Places, Settings, Federation, Moderation, Announcement, Theme },
+  components: { 
+    Users:  () => import(/* webpackChunkName: "admin" */'../components/admin/Users'),
+    Events: () => import(/* webpackChunkName: "admin" */'../components/admin/Events'),
+    Places: () => import(/* webpackChunkName: "admin" */'../components/admin/Places'),
+    Settings: () => import(/* webpackChunkName: "admin" */'../components/admin/Settings'),
+    Federation: () => import(/* webpackChunkName: "admin" */'../components/admin/Federation.vue'),
+    Moderation: () => import(/* webpackChunkName: "admin" */'../components/admin/Moderation.vue'),
+    Announcement: () => import(/* webpackChunkName: "admin" */'../components/admin/Announcement.vue'),
+    Theme: () => import(/* webpackChunkName: "admin" */'../components/admin/Theme.vue')
+  },
   middleware: ['auth'],
   async asyncData ({ $axios, params, store }) {
     try {
diff --git a/pages/Login.vue b/pages/Login.vue
index fe14ef51..ae48b294 100644
--- a/pages/Login.vue
+++ b/pages/Login.vue
@@ -1,7 +1,7 @@
 <template lang='pug'>
-  v-container
-    v-row.mt-5(align='center' justify='center')
-      v-col(cols='12' md="6" lg="5" xl="4")
+  v-container.pa-0.pa-md-3
+    v-row.mt-md-5.ma-0(align='center' justify='center')
+      v-col.pa-0.pa-md-3(cols='12' md="6" lg="5" xl="4")
         v-form(v-model='valid' ref='form' lazy-validation @submit.prevent='submit')
           v-card
             v-card-title {{$t('common.login')}}
@@ -57,7 +57,6 @@ export default {
   methods: {
     async forgot () {
       if (!this.email) {
-      //   this.$root.$message({ message: this.$t('login.insert_email'), color: 'error' })
         this.$refs.email.focus()
         return
       }
diff --git a/pages/Register.vue b/pages/Register.vue
index f5dc9dd3..8b5c01d4 100644
--- a/pages/Register.vue
+++ b/pages/Register.vue
@@ -1,7 +1,7 @@
 <template lang='pug'>
-v-container
-  v-row.mt-5(align='center' justify='center')
-    v-col(cols='12' md="6" lg="5" xl="4")
+v-container.pa-0.pa-md-3
+  v-row.mt-md-5.ma-0(align='center' justify='center')
+    v-col.pa-0.pa-md-3(cols='12' md="6" lg="5" xl="4")
 
       v-card
         v-card-title {{$t('common.register')}}
@@ -28,17 +28,19 @@ v-container
           v-btn(@click='register'
             :disabled='!valid || loading' :loading='loading'
             color='primary') {{$t('common.send')}}
-            v-icon mdi-chevron-right
+            v-icon(v-text='mdiChevronRight')
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import get from 'lodash/get'
+import { mdiChevronRight } from '@mdi/js'
 
 export default {
   name: 'Register',
   data () {
     return {
+      mdiChevronRight,
       loading: false,
       user: {},
       valid: true
diff --git a/pages/add/_edit.vue b/pages/add/_edit.vue
index 378e6d5c..7cadd27a 100644
--- a/pages/add/_edit.vue
+++ b/pages/add/_edit.vue
@@ -51,7 +51,7 @@
                 v-combobox(v-model='event.tags'
                   :prepend-icon="mdiTagMultiple"
                   chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
-                  :delimiters="[',', ' ']"
+                  :delimiters="[',', ';']"
                   :items="tags.map(t => t.tag)"
                   :label="$t('common.tags')")
 
@@ -69,7 +69,14 @@ import { mdiFileImport, mdiFormatTitle, mdiTagMultiple } from '@mdi/js'
 
 export default {
   name: 'NewEvent',
-  components: { List, Editor, ImportDialog, MediaInput, WhereInput, DateInput },
+  components: {
+    List: () => import(/* webpackChunkName: "add" */'@/components/List'),
+    Editor: () => import(/* webpackChunkName: "add" */'@/components/Editor'), 
+    ImportDialog: () => import(/* webpackChunkName: "add" */'./ImportDialog.vue'),
+    MediaInput: () => import(/* webpackChunkName: "add" */'./MediaInput.vue'),
+    WhereInput: () => import(/* webpackChunkName: "add" */'./WhereInput.vue'),
+    DateInput: () => import(/* webpackChunkName: "add" */'./DateInput.vue')
+  },
   validate ({ store }) {
     return (store.state.auth.loggedIn || store.state.settings.allow_anon_event)
   },
diff --git a/pages/event/_slug.vue b/pages/event/_slug.vue
index 56a039ab..cb88fc2b 100644
--- a/pages/event/_slug.vue
+++ b/pages/event/_slug.vue
@@ -132,7 +132,6 @@ v-container#event.pa-0.pa-sm-2
 </template>
 <script>
 import { mapState } from 'vuex'
-import EventAdmin from './eventAdmin'
 import get from 'lodash/get'
 import moment from 'dayjs'
 import clipboard from '../../assets/clipboard'
@@ -145,7 +144,10 @@ import { mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiClose,
 export default {
   name: 'Event',
   mixins: [clipboard],
-  components: { EventAdmin, EmbedEvent },
+  components: {
+    EventAdmin: () => import(/* webpackChunkName: "event" */'./eventAdmin'),
+    EmbedEvent: () => import(/* webpackChunkName: "event" */'./embedEvent'),
+  },
   async asyncData ({ $axios, params, error, store }) {
     try {
       const event = await $axios.$get(`/event/${params.slug}`)
@@ -184,7 +186,6 @@ export default {
 
     return {
       title: `${this.settings.title} - ${this.event.title}`,
-      script: [{ src: '/gancio-events.es.js', async: true, body: true }],
       meta: [
         // hid is used as unique identifier. Do not use `vmid` for it as it will not work
         {
diff --git a/pages/export.vue b/pages/export.vue
index 2cabfefe..f77e8753 100644
--- a/pages/export.vue
+++ b/pages/export.vue
@@ -120,7 +120,6 @@ export default {
   head () {
     return {
       title: `${this.settings.title} - ${this.$t('common.export')}`,
-      script: [{ src: '/gancio-events.es.js', async: true, body: true }],
     }
   },
   computed: {