diff --git a/src/Eventform.ce.vue b/src/Eventform.ce.vue
index 7bd8291..a6af89b 100644
--- a/src/Eventform.ce.vue
+++ b/src/Eventform.ce.vue
@@ -21,14 +21,14 @@
                             <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="#" @click.prevent.stop="$emit('editSection', index)" class="bg-primary rounded-full flex w-5 h-5 items-center justify-center text-font ml-2">
+                                <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>
                             </div>
                         </a>
                     </template>
                     <div v-if="editable" class="hidden md:flex items-center h-full absolute right-0 mr-6">
-                        <a href="#" @click.prevent.stop="$emit('addSection')" class="bg-primary rounded-full flex w-5 h-5 items-center justify-center text-font">
+                        <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"
@@ -80,13 +80,18 @@
                             <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="grid grid-cols-2 gap-4 mt-6 items-start">
-                                    <div class="flex justify-stretch" :class="{'hover:ring-edit hover:ring-4': editable}" v-for="(field, findex) in section.fields" :key="findex">
+                                    <div v-for="(field, findex) in section.fields" :key="findex" class="flex justify-stretch relative group" :class="{'hover:ring-edit hover:ring-4': editable}">
                                         <component :is="resolveComponentName(field)" v-model="payload[field.key]" :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>
+                                        </div>
                                     </div>
                                 </div>
 
                                 <div v-if="editable" class="flex justify-center mt-6 relative">
-                                    <a href="#" class="bg-primary rounded-full flex w-8 h-8 items-center justify-center text-font">
+                                    <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"