diff --git a/package.json b/package.json
index 485b188..4da6908 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "magico-pagebuilder",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "private": true,
   "scripts": {
     "dev": "vite",
diff --git a/src/components/MagicoModal.vue b/src/components/MagicoModal.vue
index 637c1d0..120c635 100644
--- a/src/components/MagicoModal.vue
+++ b/src/components/MagicoModal.vue
@@ -20,15 +20,16 @@ import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
 
 export default {
   props: ['modelValue', 'title', 'class_other'],
+  emits: ['change','update:modelValue'],
   setup(props, { emit }) {
     const id = 'modal' + Math.round(Math.random() * 100000)
     const modal = ref(null)
 
     const triggerModal = (value, emitEvent = true) => {
       if (value == true) {
-        modal.value.show()
+        modal.modelValue.show()
       } else {
-        modal.value.hide()
+        modal.modelValue.hide()
         if (emitEvent) {
           emit('hide')
         }
@@ -38,7 +39,7 @@ export default {
 
     onMounted(() => {
       document.body.append(document.getElementById(id))
-      modal.value = new Modal(document.getElementById(id))
+      modal.modelValue = new Modal(document.getElementById(id))
       document.getElementById(id).addEventListener('hidden.bs.modal', function () {
         triggerModal(false)
       })
@@ -46,7 +47,7 @@ export default {
     })
 
     onBeforeUnmount(() => {
-      modal.value.hide()
+      modal.modelValue.hide()
       setTimeout(function () {
         document.getElementById(id).remove()
       }, 500)
diff --git a/src/components/MagicoPagebuilder.vue b/src/components/MagicoPagebuilder.vue
index 390e84f..d6bf9aa 100644
--- a/src/components/MagicoPagebuilder.vue
+++ b/src/components/MagicoPagebuilder.vue
@@ -90,7 +90,7 @@
       </draggable>
 
       <b-modal
-        v-model.value="modalSave"
+        v-model="modalSave"
         title="Zapisz szablon do schowka"
         v-on:onClose="modalSave = false"
       >
@@ -109,7 +109,7 @@
       </b-modal>
 
       <b-modal
-        v-model.value="modalLoad"
+        v-model="modalLoad"
         title="Wczytaj szablon ze schowka"
         v-on:onClose="modalLoad = false"
       >
@@ -122,7 +122,7 @@
         </div>
       </b-modal>
 
-      <b-modal v-model.value="modalCopy" v-on:onClose="modalCopy = false">
+      <b-modal v-model="modalCopy" v-on:onClose="modalCopy = false">
         <PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad>
         <div>
           <button class="btn btn-primary mr-1" :disabled="!pageType.id" @click.prevent="changeBody">
@@ -133,7 +133,7 @@
 
       <b-modal
         class_other="modal-xl"
-        v-model.value="modalAddSection"
+        v-model="modalAddSection"
         title=" Dodaj sekcję"
         v-on:onClose="modalAddSection = false"
         hide-footer
@@ -169,7 +169,7 @@ import PagebuilderTemplateLoad from './PagebuilderTemplateLoad.vue'
 
 export default {
   name: 'MagicoPagebuilder',
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue','change'],
   components: {
     'b-modal': MagicoModal,
     PagebuilderSection,
diff --git a/src/components/PagebuilderContent.vue b/src/components/PagebuilderContent.vue
index e520c7e..908c6fb 100644
--- a/src/components/PagebuilderContent.vue
+++ b/src/components/PagebuilderContent.vue
@@ -2,7 +2,7 @@
   <div style="min-height: 100px" class="pagebuilder-column" :class="value.name">
     <h6 v-if="value.user_label">{{ value.user_label }}</h6>
     <b-modal
-      v-model.value="modalAddBox"
+      v-model="modalAddBox"
       class_other="modal-xl"
       v-on:onClose="modalAddBox = false"
       title="Dodaj widżet"
@@ -37,6 +37,7 @@
     <draggable
       :options="{ handle: '.box-move' }"
       v-model="value.items"
+      itemKey="name"
       @start="drag = true"
       @end="
         drag = false;
@@ -100,6 +101,7 @@ import DropdownSectionSection from './DropdownSectionSection.vue'
 
 export default {
   data: function () {
+    
     return {
       opcja: '',
       modalAddBox: false,
@@ -110,7 +112,7 @@ export default {
     }
   },
   props: { value: Object, keyIndex: String },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue','change'],
   components: {
     draggable,
     'b-modal': MagicoModal,
diff --git a/src/components/PagebuilderSection.vue b/src/components/PagebuilderSection.vue
index 06a491d..13b015c 100644
--- a/src/components/PagebuilderSection.vue
+++ b/src/components/PagebuilderSection.vue
@@ -108,7 +108,7 @@ import MagicoModal from './MagicoModal.vue'
 import PagebuilderContent from './PagebuilderContent.vue'
 export default {
   props: { value: Object, keyIndex:String },
-  emits: ['update:modelValue', 'copy', 'deleteSection'],
+  emits: ['update:modelValue', 'copy', 'deleteSection','change'],
   components: {
     'b-modal': MagicoModal,
     PagebuilderContent
diff --git a/src/components/PagebuilderTemplateLoad.vue b/src/components/PagebuilderTemplateLoad.vue
index d8b3dde..cb76179 100644
--- a/src/components/PagebuilderTemplateLoad.vue
+++ b/src/components/PagebuilderTemplateLoad.vue
@@ -13,6 +13,8 @@ export default {
     mounted() {
         this.getPost();
     },
+    emits: ['update:modelValue','change'],
+
     data: function () {
         return {
             items: [],
diff --git a/src/components/PagebuilderTemplateSave.vue b/src/components/PagebuilderTemplateSave.vue
index 4d405d0..9d8b38a 100644
--- a/src/components/PagebuilderTemplateSave.vue
+++ b/src/components/PagebuilderTemplateSave.vue
@@ -72,6 +72,7 @@ export default {
       id: 0,
     };
   },
+  emits: ['update:modelValue','change'],
   methods: {
     change() {
       this.$emit("update:modelValue", {
diff --git a/src/components/plugin/SectionText.vue b/src/components/plugin/SectionText.vue
index d2611cc..e2f9fc7 100644
--- a/src/components/plugin/SectionText.vue
+++ b/src/components/plugin/SectionText.vue
@@ -37,19 +37,19 @@
             <div class="form-group">
                 <label class="w-100 col-form-label">Wyrównanie</label>
                 <div class="">
-                    <button v-tooltip title="Wyrównanie do lewej" @click="align = 'left'" class="btn btn-icon-sm "
+                    <button vx-tooltip title="Wyrównanie do lewej" @click="align = 'left'" class="btn btn-icon-sm "
                         :class="align == 'left' ? 'btn-primary' : 'btn-outline-primary'">
                         <span class="material-icons-outlined">format_align_left</span>
                     </button>
-                    <button v-tooltip title="Wyrównanie do środka" @click="align = 'center'" class="btn btn-icon-sm "
+                    <button vx-tooltip title="Wyrównanie do środka" @click="align = 'center'" class="btn btn-icon-sm "
                         :class="align == 'center' ? 'btn-primary' : 'btn-outline-primary'">
                         <span class="material-icons-outlined">format_align_center</span>
                     </button>
-                    <button v-tooltip title="Wyrównanie do prawej" @click="align = 'right'" class="btn btn-icon-sm "
+                    <button vx-tooltip title="Wyrównanie do prawej" @click="align = 'right'" class="btn btn-icon-sm "
                         :class="align == 'right' ? 'btn-primary' : 'btn-outline-primary'">
                         <span class="material-icons-outlined">format_align_right</span>
                     </button>
-                    <button v-tooltip title="Justowanie" @click="align = 'justify'" class="btn btn-icon-sm "
+                    <button vx-tooltip title="Justowanie" @click="align = 'justify'" class="btn btn-icon-sm "
                         :class="align == 'justify' ? 'btn-primary' : 'btn-outline-primary'">
                         <span class="material-icons-outlined">format_align_justify</span>
                     </button>