diff --git a/src/components/DebugWidget.vue b/src/components/DebugWidget.vue
index e65ca73..303ff67 100644
--- a/src/components/DebugWidget.vue
+++ b/src/components/DebugWidget.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { Widget } from '../types'
-
 const model = defineModel({
   required: true,
   default: {
@@ -11,32 +9,47 @@ const model = defineModel({
   }
 })
 
-defineProps<{
-  layout: Widget[]
-}>()
+function onDraggableChange() {
+  model.value.draggable = !model.value.draggable
+}
+
+function onResizableChange() {
+  model.value.resizable = !model.value.resizable
+}
+
+function onResponsiveChange() {
+  model.value.responsive = !model.value.responsive
+}
 </script>
-  
+
 <template>
-  <div class="flex flex-col h-full p-2 bg-pink-95 rounded-xl overflow-scroll text-xs">
-    Displayed as [x, y, w, h]:
-    <div class="mt-1 columns-4">
-      <div v-for="(item, index) in layout" :key="index">
-        <strong>{{ index }}</strong
-        >: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
-      </div>
-    </div>
-    <div class="mt-1">
-      Debug options:
-      <input v-model="model.draggable" type="checkbox" /> Draggable
-      <input v-model="model.resizable" type="checkbox" /> Resizable
-      <input v-model="model.responsive" type="checkbox" /> Responsive
-      <button :onclick="model.onCustomizeClick" class="text-blue-500">👉 Customize</button>
-    </div>
-    <p class="mt-1">
-      Help make The Grid great @
-      <a class="underline text-blue-500" :href="'https://github.com/nastita/vue-cool-grid-stuff'"
-        >vue-cool-grid-stuff</a
-      >
-    </p>
+  <div class="flex flex-col justify-center h-full p-2 bg-pink-95 rounded-xl space-y-2">
+    <lukso-checkbox
+      type="text"
+      size="x-small"
+      :checked="model.draggable.valueOf()"
+      @click="onDraggableChange()"
+    >
+      Draggable
+    </lukso-checkbox>
+    <lukso-checkbox
+      type="text"
+      size="x-small"
+      :checked="model.resizable.valueOf()"
+      @click="onResizableChange()"
+    >
+      Resizable
+    </lukso-checkbox>
+    <lukso-checkbox
+      type="text"
+      size="x-small"
+      :checked="model.responsive.valueOf()"
+      @click="onResponsiveChange()"
+    >
+      Responsive
+    </lukso-checkbox>
+    <lukso-button size="small" type="text" :onclick="model.onCustomizeClick" class="text-blue-500"
+      >👉 Customize
+    </lukso-button>
   </div>
 </template>
diff --git a/src/layout.ts b/src/layout.ts
index 8a0152d..03d24ea 100644
--- a/src/layout.ts
+++ b/src/layout.ts
@@ -2,161 +2,173 @@ import { WidgetSize, WidgetType, type Widget } from './types';
 
 export const THE_GRID_LAYOUT: Widget[] = [
   {
-    x: 0,
-    y: 0,
-    w: WidgetSize.SMALL,
-    h: 6,
-    i: '1',
-    type: WidgetType.TITLE,
-    properties: {
-      title: 'The Grid',
-      bgColor: 'bg-purple-58',
-    }
+    "x": 0,
+    "y": 0,
+    "w":  WidgetSize.SMALL,
+    "h": 6,
+    "i": "1",
+    "type": WidgetType.TITLE,
+    "properties": {
+      "title": "The Grid 🍱",
+      "bgColor": "bg-purple-58"
+    },
+    "moved": false
   },
   {
-    x: 1,
-    y: 0,
-    w: WidgetSize.LARGE,
-    h: 6,
-    i: '2',
-    type: WidgetType.DEBUG,
-    properties: {}
+    "x": 3,
+    "y": 0,
+    "w":  WidgetSize.SMALL,
+    "h": 6,
+    "i": "2",
+    "type": WidgetType.DEBUG,
+    "properties": {},
+    "moved": false
   },
   {
-    x: 0,
-    y: 17,
-    w: WidgetSize.MEDIUM,
-    h: 6,
-    i: '3',
-    type: WidgetType.IMAGE,
-    properties: {
-      title: 'pic',
-      src: 'https://www.udiscovermusic.com/wp-content/uploads/2021/09/Red-Hot-Chili-Peppers-GettyImages-535925590-2.jpg'
-    }
+    "x": 1,
+    "y": 0,
+    "w":  WidgetSize.MEDIUM,
+    "h": 6,
+    "i": "3",
+    "type": WidgetType.IMAGE,
+    "properties": {
+      "title": "pic",
+      "src": "https://www.udiscovermusic.com/wp-content/uploads/2021/09/Red-Hot-Chili-Peppers-GettyImages-535925590-2.jpg"
+    },
+    "moved": false
   },
   {
-    x: 2,
-    y: 17,
-    w: WidgetSize.MEDIUM,
-    h: 9,
-    i: '4',
-    type: WidgetType.IFRAME,
-    properties: {
-      src: 'https://www.youtube.com/embed/E1FNkf3MLKY?si=2fWw28HI1xtv8_wA',
-      title: 'YouTube video player',
-      allow:
-        'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
-      referrerpolicy: 'strict-origin-when-cross-origin'
-    }
+    "x": 2,
+    "y": 14,
+    "w":  WidgetSize.MEDIUM,
+    "h": 9,
+    "i": "4",
+    "type": WidgetType.IFRAME,
+    "properties": {
+      "src": "https://www.youtube.com/embed/E1FNkf3MLKY?si=2fWw28HI1xtv8_wA",
+      "title": "YouTube video player",
+      "allow": "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+      "referrerpolicy": "strict-origin-when-cross-origin"
+    },
+    "moved": false
   },
   {
-    x: 2,
-    y: 48,
-    w: WidgetSize.MEDIUM,
-    h: 16,
-    i: '5',
-    type: WidgetType.IFRAME,
-    properties: {
-      src: 'https://open.spotify.com/embed/playlist/37i9dQZF1DZ06evO0nT692?utm_source=generator',
-      title: 'Spotify playlist',
-      allow: 'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture'
-    }
+    "x": 2,
+    "y": 45,
+    "w":  WidgetSize.MEDIUM,
+    "h": 16,
+    "i": "5",
+    "type": WidgetType.IFRAME,
+    "properties": {
+      "src": "https://open.spotify.com/embed/playlist/37i9dQZF1DZ06evO0nT692?utm_source=generator",
+      "title": "Spotify playlist",
+      "allow": "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+    },
+    "moved": false
   },
   {
-    x: 0,
-    y: 45,
-    w: WidgetSize.MEDIUM,
-    h: 19,
-    i: '6',
-    type: WidgetType.INSTAGRAM_POST,
-    properties: {
-      src: 'https://www.instagram.com/reel/C4DnYdFLS9x'
-    }
+    "x": 0,
+    "y": 36,
+    "w":  WidgetSize.MEDIUM,
+    "h": 19,
+    "i": "6",
+    "type": WidgetType.INSTAGRAM_POST,
+    "properties": {
+      "src": "https://www.instagram.com/reel/C4DnYdFLS9x"
+    },
+    "moved": false
   },
   {
-    x: 0,
-    y: 23,
-    w: WidgetSize.MEDIUM,
-    h: 22,
-    i: '7',
-    type: WidgetType.X_POST,
-    properties: {
-      width: '100%',
-      height: '100%',
-      src: 'https://twitframe.com/show?url=https://twitter.com/ChiliPeppers/status/1821250605752656005',
-      title: 'Twitter post',
-      frameborder: '0'
-    }
+    "x": 0,
+    "y": 14,
+    "w":  WidgetSize.MEDIUM,
+    "h": 22,
+    "i": "7",
+    "type": WidgetType.X_POST,
+    "properties": {
+      "width": "100%",
+      "height": "100%",
+      "src": "https://twitframe.com/show?url=https://twitter.com/ChiliPeppers/status/1821250605752656005",
+      "title": "Twitter post",
+      "frameborder": "0"
+    },
+    "moved": false
   },
   {
-    x: 0,
-    y: 6,
-    w: WidgetSize.FULL,
-    h: 8,
-    i: '8',
-    type: WidgetType.IMAGE,
-    properties: {
-      src: 'https://iconic.collectionzz.com/cdn/shop/collections/RHCP-COLLECTION-1920X500.png?v=1704679934&width=2048'
-    }
+    "x": 0,
+    "y": 6,
+    "w":  WidgetSize.FULL,
+    "h": 8,
+    "i": "8",
+    "type": WidgetType.IMAGE,
+    "properties": {
+      "src": "https://iconic.collectionzz.com/cdn/shop/collections/RHCP-COLLECTION-1920X500.png?v=1704679934&width=2048"
+    },
+    "moved": false
   },
   {
-    x: 2,
-    y: 26,
-    w: WidgetSize.MEDIUM,
-    h: 22,
-    i: '9',
-    type: WidgetType.X_TIMELINE,
-    properties: {
-      src: 'https://twitter.com/ChiliPeppers'
-    }
+    "x": 2,
+    "y": 23,
+    "w":  WidgetSize.MEDIUM,
+    "h": 22,
+    "i": "9",
+    "type": WidgetType.X_TIMELINE,
+    "properties": {
+      "src": "https://twitter.com/ChiliPeppers"
+    },
+    "moved": false
   },
   {
-    x: 0,
-    y: 67,
-    w: WidgetSize.MEDIUM,
-    h: 16,
-    i: '10',
-    type: WidgetType.IFRAME,
-    properties: {
-      src: 'https://warpcast.com/vitalik.eth',
-      title: 'Vitalik.eth',
-      allow: 'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture'
-    }
+    "x": 0,
+    "y": 55,
+    "w":  WidgetSize.MEDIUM,
+    "h": 16,
+    "i": "10",
+    "type": WidgetType.IFRAME,
+    "properties": {
+      "src": "https://warpcast.com/vitalik.eth",
+      "title": "Vitalik.eth",
+      "allow": "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+    },
+    "moved": false
   },
   {
-    x: 2,
-    y: 67,
-    w: WidgetSize.MEDIUM,
-    h: 8,
-    i: '11',
-    type: WidgetType.TEXT,
-    properties: {
-      title: 'Nasta',
-      text: 'This is my dog Nastita. Best dog ever!',
-      bgColor: 'bg-sea-salt-67',
-    }
+    "x": 2,
+    "y": 61,
+    "w":  WidgetSize.MEDIUM,
+    "h": 8,
+    "i": "11",
+    "type": WidgetType.TEXT,
+    "properties": {
+      "title": "Nasta",
+      "text": "This is my dog Nastita. Best dog ever!",
+      "bgColor": "bg-sea-salt-67"
+    },
+    "moved": false
   },
   {
-    x: 2,
-    y: 75,
-    w: WidgetSize.SMALL,
-    h: 8,
-    i: '12',
-    type: WidgetType.IMAGE,
-    properties: {
-      src: 'https://avatars.githubusercontent.com/u/3680995?v=4'
-    }
+    "x": 2,
+    "y": 69,
+    "w":  WidgetSize.SMALL,
+    "h": 8,
+    "i": "12",
+    "type": WidgetType.IMAGE,
+    "properties": {
+      "src": "https://avatars.githubusercontent.com/u/3680995?v=4"
+    },
+    "moved": false
   },
   {
-    x: 3,
-    y: 75,
-    w: WidgetSize.SMALL,
-    h: 8,
-    i: '13',
-    type: WidgetType.TITLE,
-    properties: {
-      title: 'By Ed with ♥️ ',
-      bgColor: 'bg-lukso-80',
-    }
+    "x": 3,
+    "y": 69,
+    "w":  WidgetSize.SMALL,
+    "h": 8,
+    "i": "13",
+    "type": WidgetType.TITLE,
+    "properties": {
+      "title": "By Ed with ♥️ ",
+      "bgColor": "bg-lukso-80"
+    },
+    "moved": false
   }
 ];
diff --git a/src/views/TheGrid.vue b/src/views/TheGrid.vue
index 4438e91..d4a2524 100644
--- a/src/views/TheGrid.vue
+++ b/src/views/TheGrid.vue
@@ -24,7 +24,7 @@ const gridOptions = reactive({
   responsive: true,
   onCustomizeClick: () => {
     showCustomizeModal.value = true
-    customLayout.value = JSON.stringify(layout.value, null, 2)
+    layoutStringified.value = JSON.stringify(layout.value, null, 2)
   }
 })
 
@@ -38,12 +38,12 @@ const cols: Breakpoints = {
 
 const layout = ref(storedCustomLayout.value)
 const showCustomizeModal = ref(false)
-const customLayout = ref('')
+const layoutStringified = ref('')
 
 // UGLY HACK => Need to deep dive into the grid-layout-plus source code
 // to figure out why the layouts overlap.
 // Or just calculate 2 col layouts manually based on the 4 col layout.
-function breakpointChanged(_newBreakpoint: Breakpoint, _newLayout: Layout): void {
+function triggerLayoutRefresh(): void {
   gridOptions.draggable = !gridOptions.draggable
   gridOptions.draggable = !gridOptions.draggable
 }
@@ -103,9 +103,12 @@ function resetLayout(): void {
   storedCustomLayout.value = THE_GRID_LAYOUT
 }
 
+function breakpointChanged(_newBreakpoint: Breakpoint, _newLayout: Layout): void {
+  triggerLayoutRefresh()
+}
+
 onMounted(() => {
-  gridOptions.draggable = !gridOptions.draggable
-  gridOptions.draggable = !gridOptions.draggable
+  triggerLayoutRefresh()
 })
 </script>
 
@@ -159,11 +162,7 @@ onMounted(() => {
               :text="item.properties.text"
               :bg-color="item.properties.bgColor"
             />
-            <DebugWidget
-              v-if="item.type === WidgetType.DEBUG"
-              v-model="gridOptions"
-              :layout="layout"
-            />
+            <DebugWidget v-if="item.type === WidgetType.DEBUG" v-model="gridOptions" />
             <ImageWidget v-if="item.type === WidgetType.IMAGE" :src="item.properties.src" />
             <iframe
               v-if="item.type === WidgetType.IFRAME"
@@ -185,22 +184,42 @@ onMounted(() => {
     <div>
       <lukso-modal
         :is-open="showCustomizeModal ? true : undefined"
-        size="medium"
+        size="full"
         @on-backdrop-click="showCustomizeModal = false"
       >
-        <div class="flex flex-col m-4 align-middle justify-center">
-          <div>Edit in IDE. Ensure JSON is valid. Read the code to understand the structure.</div>
-          <div>Experiment. Go wild. YOLO. 😂👌</div>
+        <div class="flex flex-col m-4 space-y-2 text-sm">
+          <div>
+            Current items info as i: [x, y, w, h]:
+            <div class="columns-4">
+              <div v-for="item in layout" :key="item.i">
+                <strong>{{ item.i }}</strong
+                >: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
+              </div>
+            </div>
+          </div>
+          <p>
+            Edit in IDE. Ensure JSON is valid. Read the code to understand the structure. Go wild.
+            YOLO SWAGGINS. 😂👌
+          </p>
           <textarea
-            v-model="customLayout"
+            v-model="layoutStringified"
             class="w-full h-96 border-solid border-2 border-black"
+            wrap="off"
           ></textarea>
-          <span class="space-x-1">
-            <lukso-button @click="validateAndSaveLayout(customLayout)" size="small">
+          <span class="space-x-2">
+            <lukso-button @click="validateAndSaveLayout(layoutStringified)" size="small">
               Apply
             </lukso-button>
             <lukso-button @click="resetLayout()" size="small"> Reset </lukso-button>
           </span>
+          <p>
+            Help make The Grid great @
+            <a
+              class="underline text-blue-500"
+              :href="'https://github.com/nastita/vue-cool-grid-stuff'"
+              >vue-cool-grid-stuff</a
+            >
+          </p>
         </div>
       </lukso-modal>
     </div>