diff --git a/src/EventForm.ce.vue b/src/EventForm.ce.vue
index 67e48f5..fbcb28d 100644
--- a/src/EventForm.ce.vue
+++ b/src/EventForm.ce.vue
@@ -90,16 +90,14 @@
                         <slide v-for="(section, index) in v.sections" :key="index">
                             <div v-if="active === index" 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="grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 gap-6 mt-6 items-start">
+                                <div class="mt-6" :class="containerClasses">
                                     <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,
+                                            ...colClassesForField(field),
                                         }"
                                     >
                                         <component :is="resolveComponentName(field)" v-model="payload[field.key]" :fields="allFields" :payload="payload" :field="field" class="grow"></component>
@@ -137,16 +135,16 @@
                     </div>
                     <div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
                         <!--
-                                <div class="absolute right-0 top-0 h-full flex items-center justify-end">
-                                    <div class="bg-primary w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]"></div>
-                                </div>
-                                    <div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
-                                        <img class="w-64 h-32 object-cover" src="" />
-                                    </div>
-                                    <div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
-                                        <img class="w-64 h-32 object-cover" src="" />
-                                    </div>
-                                    -->
+                                                        <div class="absolute right-0 top-0 h-full flex items-center justify-end">
+                                                            <div class="bg-primary w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]"></div>
+                                                        </div>
+                                                            <div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
+                                                                <img class="w-64 h-32 object-cover" src="" />
+                                                            </div>
+                                                            <div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
+                                                                <img class="w-64 h-32 object-cover" src="" />
+                                                            </div>
+                                                            -->
                     </div>
                     <div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0 pt-6 sm:pt-0">
                         <div class="font-bold text-xl">Vielen Dank für deine Anmeldung.</div>
@@ -168,41 +166,16 @@ import DeleteIcon from './components/icons/DeleteIcon.vue';
 import useToastify from './composables/useToastify.js';
 import useFields from './composables/useFields.js';
 import SettingIcon from './components/icons/SettingIcon.vue';
+import useColumns from './composables/useColumns.js';
 
 const {scroll} = useScroll();
 const {errorFromResponse} = useToastify();
+const {colClassesForField, containerClasses} = useColumns();
 const finished = ref(false);
 const eventForm = ref(null);
 
 const emits = defineEmits(['addSection', 'editSection', 'deleteSection', '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',
-    },
-    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',
-    },
-    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',
-    },
-};
-
 const props = defineProps({
     editable: {
         type: Boolean,
diff --git a/src/composables/useColumns.js b/src/composables/useColumns.js
new file mode 100644
index 0000000..f4553b9
--- /dev/null
+++ b/src/composables/useColumns.js
@@ -0,0 +1,46 @@
+import {ref} from 'vue';
+
+export default function useColumns() {
+    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',
+        },
+        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',
+        },
+        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',
+        },
+    };
+
+    const containerClasses = 'grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 gap-6 items-start';
+
+    function colClassesForField(field) {
+        return {
+            [colClasses.mobile[field.columns.mobile]]: true,
+            [colClasses.tablet[field.columns.tablet]]: true,
+            [colClasses.desktop[field.columns.desktop]]: true,
+        };
+    }
+
+    return {
+        colClasses,
+        colClassesForField,
+        containerClasses,
+    };
+}