diff --git a/pages/event/embedEvent.vue b/pages/event/embedEvent.vue
index 72429d1f..51511fda 100644
--- a/pages/event/embedEvent.vue
+++ b/pages/event/embedEvent.vue
@@ -2,20 +2,19 @@
 v-card
   v-card-title(v-text="$t('common.embed_title')")
   v-card-text
-    v-row
-      v-col.col-12
-        v-alert.mb-1.mt-1(type='info' show-icon) {{$t('common.embed_help')}}
-        v-text-field(v-model='code')
-          v-btn(slot='prepend' text color='primary'
+        v-alert.mb-3.mt-1(type='info' show-icon) {{$t('common.embed_help')}}
+        v-alert.pa-5.my-4.blue-grey.darken-4.text-body-1.lime--text.text--lighten-3 {{code.script}}<br/>{{code.el}}<br/><br/>
+          v-btn.float-end(text  color='primary'
             v-clipboard:copy='code'
             v-clipboard:success='copyLink') {{$t("common.copy")}}
             v-icon.ml-1 mdi-content-copy
-
-      v-col.mt-2(v-html='code')
+        p.mx-auto
+          .mx-auto
+            gancio-event(:id='event.id' :baseurl='settings.baseurl')
   v-card-actions
     v-spacer
-    v-btn(color='warning' @click="$emit('close')") {{$t("common.cancel")}}
-    v-btn(v-clipboard:copy='code' v-clipboard:success='copyLink' color="primary") {{$t("common.copy")}}
+    v-btn(text color='warning' @click="$emit('close')") {{$t("common.cancel")}}
+    v-btn(text v-clipboard:copy='code' v-clipboard:success='copyLink' color="primary") {{$t("common.copy")}}
 </template>
 <script>
 import { mapState } from 'vuex'
@@ -28,10 +27,9 @@ export default {
   computed: {
     ...mapState(['settings']),
     code () {
-      const style = "style='border: 0; width: 100%; height: 215px;'"
-      const src = `${this.settings.baseurl}/embed/${this.event.slug || this.event.id}`
-      const code = `<iframe ${style} src="${src}"></iframe>`
-      return code
+      const script = `<script src='${this.settings.baseurl}/gancio-events.es.js'/>`
+      const el = `<gancio-event id='${this.event.id}' baseurl='${this.settings.baseurl}'></gancio-event>`
+      return { script, el }
     }
   },
   methods: {
diff --git a/pages/export.vue b/pages/export.vue
index 5bd15ec0..0fd86a8a 100644
--- a/pages/export.vue
+++ b/pages/export.vue
@@ -56,10 +56,7 @@
                   v-text-field(v-model='list.title' :label='$t("common.title")')
                   v-text-field(v-model='list.maxEvents' type='number' min='1' :label='$t("common.max_events")')
                 v-col.float-right(:span='12')
-                  List(
-                    :title='list.title'
-                    :maxEvents='Number(list.maxEvents)'
-                    :events='events')
+                  gancio-events(:baseurl='settings.baseurl' :maxlength='list.maxEvents &&  Number(list.maxEvents)' :title='list.title')
               v-text-field.mb-1(type='textarea' v-model='listScript' readonly )
                 v-btn(slot='prepend' text
                   color='primary' v-clipboard:copy='listScript' v-clipboard:success='copyLink.bind(this,"list")') {{$t('common.copy')}}
@@ -99,7 +96,7 @@ export default {
     return {
       type: 'rss',
       notification: { email: '' },
-      list: { title: 'Gancio', maxEvents: 3 },
+      list: { title: 'Gancio', maxEvents: 1 },
       filters: { tags: [], places: [], show_recurrent: false },
       events: []
     }
@@ -111,14 +108,10 @@ export default {
   },
   computed: {
     ...mapState(['settings']),
-    domain () {
-      const URL = url.parse(this.settings.baseurl)
-      return URL.hostname
-    },
     listScript () {
       const params = []
       if (this.list.title) {
-        params.push(`title=${this.list.title}`)
+        params.push(`title="${this.list.title}"`)
       }
 
       if (this.filters.places.length) {
@@ -130,9 +123,13 @@ export default {
       }
 
       if (this.filters.show_recurrent) {
-        params.push('show_recurrent=true')
+        params.push('show_recurrent')
       }
-      return `<iframe style='border: 0px; width: 100%;' src="${this.settings.baseurl}/embed/list?${params.join('&')}"></iframe>`
+
+      if (this.list.maxEvents) {
+        params.push('maxlength=' + this.list.maxEvents)
+      }
+      return `<script src="${this.settings.baseurl}/gancio-events.es.js'><gancio-events ${params.join(' ')}></gancio-events>`
     },
     link () {
       const typeMap = ['rss', 'ics', 'list']