diff --git a/index.html b/index.html
index f4a00b6..64e6609 100644
--- a/index.html
+++ b/index.html
@@ -1,22 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite + Vue</title>
-    </head>
-    <body style="padding: 50px">
-        <event-form
-            style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
-            value='{"sections":[{"name":"ff","intro":"ff","fields":[{"name":"sdsdsd","type":"CheckboxField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":false,"required":true,"description":"sds","key":"sdsdsd"},{"name":"Bezirk","type":"GroupField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":"","required":true,"parent_field":null,"parent_group":120,"key":"bezirk"},{"name":"Stamm","type":"GroupField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":"","required":true,"parent_field":"bezirk","parent_group":null,"key":"stamm"}]}]}'
-            base-url="http://localhost:8000"
-            editable
-        ></event-form>
-        <event-overview
-            style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
-            url-pattern="/anmeldung/{slug}"
-            base-url="http://localhost:8000"
-        ></event-overview>
-        <script type="module" src="src/main.js"></script>
-    </body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body style="padding: 50px">
+    <event-form
+      style="
+        --primary: hsl(181, 75%, 26%);
+        --secondary: hsl(181, 75%, 35%);
+        --font: hsl(181, 84%, 78%);
+        --circle: hsl(181, 86%, 16%);
+      "
+      value='{"sections":[{"name":"ff","intro":"ff","fields":[{"name":"sdsdsd","type":"CheckboxField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":false,"required":true,"description":"sds","key":"sdsdsd"},{"name":"Bezirk","type":"GroupField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":"","required":true,"parent_field":null,"parent_group":120,"key":"bezirk"},{"name":"Stamm","type":"GroupField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":"","required":true,"parent_field":"bezirk","parent_group":null,"key":"stamm"}]}]}'
+      url="http://localhost:8000"
+      editable
+    ></event-form>
+    <event-overview
+      style="
+        --primary: hsl(181, 75%, 26%);
+        --secondary: hsl(181, 75%, 35%);
+        --font: hsl(181, 84%, 78%);
+        --circle: hsl(181, 86%, 16%);
+      "
+      url-pattern="/anmeldung/{slug}"
+      url="http://localhost:8000/api/form"
+    ></event-overview>
+    <script type="module" src="src/main.js"></script>
+  </body>
 </html>
diff --git a/src/Eventform.ce.vue b/src/Eventform.ce.vue
index 49c945f..14d675a 100644
--- a/src/Eventform.ce.vue
+++ b/src/Eventform.ce.vue
@@ -4,75 +4,77 @@
             <div class="bg-white @container rounded-lg shadow-lg" x-show="finished === false">
                 <div class="sticky top-0 z-10 hidden @sm:flex overflow-hidden rounded-t-lg h-12 @md:h-16">
                     <template v-for="(section, index) in v.sections">
-                        <a
-                            href="#"
+                        <a href="#"
                             class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-full transition duration-300 relative"
-                            :class="{'bg-primary': index <= active, 'bg-secondary': index > active}"
-                            @click.prevent="active = index"
-                        >
-                            <svg
-                                preserveAspectRatio="none"
+                            :class="{
+                                'bg-primary': index <= active,
+                                'bg-secondary': index > active,
+                            }" @click.prevent="active = index">
+                            <svg preserveAspectRatio="none"
                                 class="h-full w-3 absolute left-0 text-primary transition duration-300"
-                                viewBox="0 0 100 100"
-                                :class="{'opacity-100': index !== 0 && index - 1 <= active, 'opacity-0': !(index !== 0 && index - 1 <= active)}"
-                            >
+                                viewBox="0 0 100 100" :class="{
+                                    'opacity-100': index !== 0 && index - 1 <= active,
+                                    'opacity-0': !(index !== 0 && index - 1 <= active),
+                                }">
                                 <path d="M0,0 100,50 0,100" fill="currentColor"></path>
                             </svg>
-                            <span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300" v-html="index + 1"></span>
+                            <span
+                                class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300"
+                                v-html="index + 1"></span>
                             <span class="text-sm text-font ml-2" v-html="section.name"></span>
                             <div v-if="editable" class="hidden @md:flex items-center h-full">
-                                <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editSection', index)">
+                                <a href="#"
+                                    class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
+                                    @click.prevent.stop="$emit('editSection', index)">
                                     <edit-icon class="w-3 h-3 fill-current"></edit-icon>
                                 </a>
-                                <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteSection', index)">
+                                <a href="#"
+                                    class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
+                                    @click.prevent.stop="$emit('deleteSection', index)">
                                     <delete-icon class="w-3 h-3 fill-current"></delete-icon>
                                 </a>
                             </div>
                         </a>
                     </template>
                     <div v-if="editable" class="hidden @md:flex items-center h-full absolute right-0 mr-6">
-                        <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font" @click.prevent.stop="$emit('addSection')">
-                            <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
+                        <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font"
+                            @click.prevent.stop="$emit('addSection')">
+                            <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt"
+                                xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
                                 <path
-                                    d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
-                                />
+                                    d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
                             </svg>
                         </a>
                     </div>
                 </div>
                 <div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg @sm:hidden bg-secondary">
-                    <a
-                        href="#"
+                    <a href="#"
                         class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
-                        :class="{'opacity-40': !backable}"
-                        @click.prevent="back"
-                    >
+                        :class="{ 'opacity-40': !backable }" @click.prevent="back">
                         <svg class="text-sm text-font fill-current rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
                             <path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
                         </svg>
                     </a>
                     <div class="overflow-hidden">
                         <carousel v-model="active">
-                            <slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden">
+                            <slide v-for="(section, index) in v.sections" :key="index"
+                                class="relative flex flex-no-wrap overflow-hidden">
                                 <div class="flex-none w-full">
-                                    <div
-                                        href="#"
+                                    <div href="#"
                                         class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-12 @md:h-16 transition duration-300 relative"
-                                        @click="active = index"
-                                    >
-                                        <span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font transition duration-300" v-html="index + 1"></span>
+                                        @click="active = index">
+                                        <span
+                                            class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font transition duration-300"
+                                            v-html="index + 1"></span>
                                         <span class="text-sm text-font" v-html="section.name"></span>
                                     </div>
                                 </div>
                             </slide>
                         </carousel>
                     </div>
-                    <a
-                        href="#"
+                    <a href="#"
                         class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
-                        :class="{'opacity-40': !nextable}"
-                        @click.prevent="next"
-                    >
+                        :class="{ 'opacity-40': !nextable }" @click.prevent="next">
                         <svg class="text-sm text-font fill-current -rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
                             <path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
                         </svg>
@@ -83,25 +85,30 @@
                     <carousel v-model="active">
                         <slide v-for="(section, index) in v.sections" :key="index">
                             <div class="w-full flex-none px-3 @xs:px-6">
-                                <div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro"></div>
+                                <div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro">
+                                </div>
                                 <div class="grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 gap-4 mt-6 items-start">
-                                    <div
-                                        v-for="(field, findex) in section.fields"
-                                        :key="findex"
-                                        class="flex justify-stretch relative group"
-                                        :class="{
+                                    <div v-for="(field, findex) in section.fields" :key="findex"
+                                        class="flex justify-stretch relative group" :class="{
                                             'hover:ring-edit hover:ring-4': editable,
                                             [colClasses.mobile[field.columns.mobile]]: true,
                                             [colClasses.tablet[field.columns.tablet]]: true,
                                             [colClasses.desktop[field.columns.desktop]]: true,
-                                        }"
-                                    >
-                                        <component :is="resolveComponentName(field)" v-model="payload[field.key]" :payload="payload" :field="field"></component>
-                                        <div v-if="editable" class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
-                                            <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editField', index, findex)">
+                                        }">
+                                        <component :is="resolveComponentName(field)" v-model="payload[field.key]"
+                                            :payload="payload" :field="field"></component>
+                                        <div v-if="editable"
+                                            class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
+                                            <a href="#"
+                                                class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
+                                                @click.prevent.stop="$emit('editField', index, findex)">
                                                 <edit-icon class="w-3 h-3 fill-current"></edit-icon>
                                             </a>
-                                            <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteField', index, findex)">
+                                            <a href="#"
+                                                class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
+                                                @click.prevent.stop="
+                                                    $emit('deleteField', index, findex)
+                                                ">
                                                 <delete-icon class="w-3 h-3 fill-current"></delete-icon>
                                             </a>
                                         </div>
@@ -109,11 +116,13 @@
                                 </div>
 
                                 <div v-if="editable" class="flex justify-center mt-6 relative">
-                                    <a href="#" class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font" @click.prevent="$emit('addField', index)">
-                                        <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
+                                    <a href="#"
+                                        class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font"
+                                        @click.prevent="$emit('addField', index)">
+                                        <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt"
+                                            xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
                                             <path
-                                                d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
-                                            />
+                                                d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
                                         </svg>
                                     </a>
                                 </div>
@@ -129,47 +138,55 @@
 </template>
 
 <script setup>
-import {computed, ref, watch} from 'vue';
-import {Carousel, Slide} from 'vue3-carousel';
-import Navigation from './components/Navigation.vue';
-import useNav from './composables/useNav.js';
-import FieldText from './components/fields/Text.vue';
-import FieldDate from './components/fields/Date.vue';
-import FieldTextarea from './components/fields/Textarea.vue';
-import FieldDropdown from './components/fields/Dropdown.vue';
-import FieldGroup from './components/fields/Group.vue';
-import FieldCheckboxes from './components/fields/Checkboxes.vue';
-import FieldCheckbox from './components/fields/Checkbox.vue';
-import FieldRadio from './components/fields/Radio.vue';
-import EditIcon from './components/icons/EditIcon.vue';
-import DeleteIcon from './components/icons/DeleteIcon.vue';
+import { computed, ref, watch } from "vue";
+import { Carousel, Slide } from "vue3-carousel";
+import Navigation from "./components/Navigation.vue";
+import useNav from "./composables/useNav.js";
+import FieldText from "./components/fields/Text.vue";
+import FieldDate from "./components/fields/Date.vue";
+import FieldTextarea from "./components/fields/Textarea.vue";
+import FieldDropdown from "./components/fields/Dropdown.vue";
+import FieldGroup from "./components/fields/Group.vue";
+import FieldCheckboxes from "./components/fields/Checkboxes.vue";
+import FieldCheckbox from "./components/fields/Checkbox.vue";
+import FieldRadio from "./components/fields/Radio.vue";
+import EditIcon from "./components/icons/EditIcon.vue";
+import DeleteIcon from "./components/icons/DeleteIcon.vue";
 
-const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'addField', 'editField', 'deleteField', 'active']);
+const emits = defineEmits([
+    "addSection",
+    "editSection",
+    "deleteSection",
+    "addField",
+    "editField",
+    "deleteField",
+    "active",
+]);
 
 const colClasses = {
     mobile: {
-        1: 'col-span-1',
-        2: 'col-span-2',
-        3: 'col-span-3',
-        4: 'col-span-4',
-        5: 'col-span-5',
-        6: 'col-span-6',
+        1: "col-span-1",
+        2: "col-span-2",
+        3: "col-span-3",
+        4: "col-span-4",
+        5: "col-span-5",
+        6: "col-span-6",
     },
     tablet: {
-        1: '@sm:col-span-1',
-        2: '@sm:col-span-2',
-        3: '@sm:col-span-3',
-        4: '@sm:col-span-4',
-        5: '@sm:col-span-5',
-        6: '@sm:col-span-6',
+        1: "@sm:col-span-1",
+        2: "@sm:col-span-2",
+        3: "@sm:col-span-3",
+        4: "@sm:col-span-4",
+        5: "@sm:col-span-5",
+        6: "@sm:col-span-6",
     },
     desktop: {
-        1: '@lg:col-span-1',
-        2: '@lg:col-span-2',
-        3: '@lg:col-span-3',
-        4: '@lg:col-span-4',
-        5: '@lg:col-span-5',
-        6: '@lg:col-span-6',
+        1: "@lg:col-span-1",
+        2: "@lg:col-span-2",
+        3: "@lg:col-span-3",
+        4: "@lg:col-span-4",
+        5: "@lg:col-span-5",
+        6: "@lg:col-span-6",
     },
 };
 
@@ -183,19 +200,17 @@ const props = defineProps({
     },
     value: {
         type: String,
-        default: () => '{}',
+        default: () => "{}",
     },
     baseUrl: {},
 });
 
-axios.defaults.baseURL = props.baseUrl;
-
 const active = ref(0);
 const payload = ref({});
 const loaded = ref(false);
 
 watch(active, function (newValue) {
-    emits('active', v.value.sections.length ? active.value : null);
+    emits("active", v.value.sections.length ? active.value : null);
 });
 
 const v = computed(() => {
@@ -210,12 +225,18 @@ const v = computed(() => {
     });
     payload.value = p;
     loaded.value = true;
-    active.value = Math.max(0, Math.min(active.value, values.sections.length - 1));
-    emits('active', values.sections.length ? active.value : null);
+    active.value = Math.max(
+        0,
+        Math.min(active.value, values.sections.length - 1)
+    );
+    emits("active", values.sections.length ? active.value : null);
     return values;
 });
 
-const {back, next, backable, nextable} = useNav(active, v.value.sections.length);
+const { back, next, backable, nextable } = useNav(
+    active,
+    v.value.sections.length
+);
 
 function resolveComponentName(field) {
     return {
diff --git a/src/Eventoverview.ce.vue b/src/Eventoverview.ce.vue
index 0c67e3a..656dcf1 100644
--- a/src/Eventoverview.ce.vue
+++ b/src/Eventoverview.ce.vue
@@ -2,6 +2,7 @@
     <div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]">
         <a v-for="(event, index) in events" :key="index" :href="props.urlPattern.replace('{slug}', event.slug)"
             class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group">
+            <img :src="event.image" />
             <div class="p-6 flex flex-col">
                 <h2 class="font-arvo flex-none text-primary-700 text-sm md:text-base" v-text="event.name"></h2>
                 <div class="flex items-baseline text-sm">
@@ -9,19 +10,20 @@
                     <span class="text-sm font-semibold text-gray-800 ml-2" v-text="event.dates"></span>
                 </div>
                 <div class="flex-grow c text-sm mt-3" v-text="event.excerpt"></div>
-                <div class="bg-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3">Zur
-                    Anmeldung</div>
+                <div class="bg-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3">
+                    Zur Anmeldung
+                </div>
             </div>
         </a>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import CalendarIcon from './components/icons/CalendarIcon.vue';
+import { ref } from "vue";
+import CalendarIcon from "./components/icons/CalendarIcon.vue";
 
 const props = defineProps({
-    baseUrl: {
+    url: {
         required: true,
         type: String,
     },
@@ -31,12 +33,10 @@ const props = defineProps({
     },
 });
 
-axios.defaults.baseURL = props.baseUrl;
-
 const events = ref([]);
 
 async function reloadEvents() {
-    const results = await axios.get('/api/form');
+    const results = await axios.get(props.url);
     events.value = results.data.data;
 }
 
diff --git a/src/main.js b/src/main.js
index 7d79b7c..96eea4a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,19 +1,23 @@
-import {defineCustomElement} from 'vue';
-import classes from './style.css?inline';
-import carousel from 'vue3-carousel/dist/carousel.css?inline';
-import carouselStyle from './carousel.css?inline';
-import Eventoverview from './Eventoverview.ce.vue';
-import Eventform from './Eventform.ce.vue';
+import { defineCustomElement } from "vue";
+import classes from "./style.css?inline";
+import carousel from "vue3-carousel/dist/carousel.css?inline";
+import carouselStyle from "./carousel.css?inline";
+import Eventoverview from "./Eventoverview.ce.vue";
+import Eventform from "./Eventform.ce.vue";
 
-import axios from 'axios';
+import axios from "axios";
 window.axios = axios;
 
 window.hasKeys = function (object, expected) {
-    return typeof object === 'object' && JSON.stringify(Object.keys(object).sort()) === JSON.stringify(expected.sort());
+  return (
+    typeof object === "object" &&
+    JSON.stringify(Object.keys(object).sort()) ===
+      JSON.stringify(expected.sort())
+  );
 };
 
 Eventform.styles = [classes, carousel, carouselStyle];
 Eventoverview.styles = [classes];
 
-customElements.define('event-form', defineCustomElement(Eventform));
-customElements.define('event-overview', defineCustomElement(Eventoverview));
+customElements.define("event-form", defineCustomElement(Eventform));
+customElements.define("event-overview", defineCustomElement(Eventoverview));
