diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index 5a6863cdb..3bfd41bfd 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -1,3 +1,4 @@
+const { Agent } = require('https')
 const path = require('path')
 
 const axios = require('axios')
@@ -736,7 +737,7 @@ module.exports = function (RED) {
             // any widgets we hard-code into our front end (e.g ui-notification for connection alerts) will start with ui-
             // Node-RED built nodes will be a random UUID
             if (!wNode && !id.startsWith('ui-')) {
-                console.log('widget does not exist any more')
+                console.log('widget does not exist in the runtime', id) // TODO: Handle this better for edit-time added nodes (e.g. ui-spacer)
                 return // widget does not exist any more (e.g. deleted from NR and deployed BUT the ui page was not refreshed)
             }
             async function handler () {
@@ -903,9 +904,9 @@ module.exports = function (RED) {
                     type: widgetConfig.type,
                     props: widgetConfig,
                     layout: {
-                        width: widgetConfig.width || 3,
-                        height: widgetConfig.height || 1,
-                        order: widgetConfig.order || 0
+                        width: widgetConfig.width || 3, // default width of 3: this must match up with defaults in wysiwyg editing
+                        height: widgetConfig.height || 1, // default height of 1: this must match up with defaults in wysiwyg editing
+                        order: widgetConfig.order || 0 // default order of 0: this must match up with defaults in wysiwyg editing
                     },
                     state: statestore.getAll(widgetConfig.id),
                     hooks: widgetEvents,
@@ -1144,7 +1145,26 @@ module.exports = function (RED) {
         const host = RED.settings.uiHost
         const port = RED.settings.uiPort
         const httpAdminRoot = RED.settings.httpAdminRoot
-        const url = 'http://' + (`${host}:${port}/${httpAdminRoot}flows`).replace('//', '/')
+        let scheme = 'http://'
+        let httpsAgent
+        if (RED.settings.https) {
+            let https = RED.settings.https
+            try {
+                if (typeof https === 'function') {
+                    // since https() could return a promise / be async, we need to await it
+                    // if however the function is actually sync, JS will auto wrap it in a promise and await it
+                    https = await https()
+                }
+                httpsAgent = new Agent({
+                    rejectUnauthorized: false,
+                    ...(https || {})
+                })
+                scheme = 'https://'
+            } catch (error) {
+                return res.status(500).json({ error: 'Error processing https settings' })
+            }
+        }
+        const url = scheme + (`${host}:${port}/${httpAdminRoot}flows`).replace('//', '/')
         console.log('url', url)
         // get request body
         const dashboardId = req.params.dashboardId
@@ -1152,11 +1172,16 @@ module.exports = function (RED) {
         const changes = req.body.changes || {}
         const editKey = req.body.key
         const groups = changes.groups || []
+        const allWidgets = (changes.widgets || [])
+        const updatedWidgets = allWidgets.filter(w => !w.__DB2_ADD_WIDGET && !w.__DB2_REMOVE_WIDGET)
+        const addedWidgets = allWidgets.filter(w => !!w.__DB2_ADD_WIDGET).map(w => { delete w.__DB2_ADD_WIDGET; return w })
+        const removedWidgets = allWidgets.filter(w => !!w.__DB2_REMOVE_WIDGET).map(w => { delete w.__DB2_REMOVE_WIDGET; return w })
+
         console.log(changes, editKey, dashboardId)
         const baseNode = RED.nodes.getNode(dashboardId)
 
         // validity checks
-        if (groups.length === 0) {
+        if (groups.length === 0 && allWidgets.length === 0) {
             // this could be a 200 but since the group data might be missing due to
             // a bug or regression, we'll return a 400 and let the user know
             // there were no changes provided.
@@ -1180,6 +1205,32 @@ module.exports = function (RED) {
             }
         }
 
+        for (const widget of updatedWidgets) {
+            const existingWidget = baseNode.ui.widgets.get(widget.id)
+            if (!existingWidget) {
+                return res.status(400).json({ error: 'Widget not found' })
+            }
+        }
+
+        for (const added of addedWidgets) {
+            // for now, only ui-spacer is supported
+            if (added.type !== 'ui-spacer') {
+                return res.status(400).json({ error: 'Cannot add this kind of widget' })
+            }
+
+            // check if the widget is being added to a valid group
+            const group = baseNode.ui.groups.get(added.group)
+            if (!group) {
+                return res.status(400).json({ error: 'Invalid group id' })
+            }
+        }
+        for (const removed of removedWidgets) {
+            // for now, only ui-spacer is supported
+            if (removed.type !== 'ui-spacer') {
+                return res.status(400).json({ error: 'Cannot remove this kind of widget' })
+            }
+        }
+
         // Prepare headers for the requests
         const getHeaders = {
             'Node-RED-API-Version': 'v2',
@@ -1213,14 +1264,20 @@ module.exports = function (RED) {
             }
             return false
         }
-        let rev = null
-        return axios.request({
-            method: 'GET',
-            headers: getHeaders,
-            url
-        }).then(response => {
-            const flows = response.data?.flows || []
-            rev = response.data?.rev
+        try {
+            const getResponse = await axios.request({
+                method: 'GET',
+                headers: getHeaders,
+                httpsAgent,
+                url
+            })
+
+            if (getResponse.status !== 200) {
+                return res.status(getResponse.status).json({ error: getResponse?.data?.message || 'An error occurred getting flows', code: 'GET_FAILED' })
+            }
+
+            const flows = getResponse.data?.flows || []
+            const rev = getResponse.data?.rev
             const changeResult = []
             for (const modified of groups) {
                 const current = flows.find(n => n.id === modified.id)
@@ -1235,28 +1292,81 @@ module.exports = function (RED) {
                 changeResult.push(applyIfDifferent(current, modified, 'width'))
                 changeResult.push(applyIfDifferent(current, modified, 'order'))
             }
+            // scan through the widgets and apply changes (if any)
+            for (const modified of updatedWidgets) {
+                const current = flows.find(n => n.id === modified.id)
+                if (!current) {
+                    // widget not found in current flows! integrity of data suspect! Has flows changed on the server?
+                    return res.status(400).json({ error: 'Widget not found', code: 'WIDGET_NOT_FOUND' })
+                }
+                if (modified.group !== current.group) {
+                    // integrity of data suspect! Has flow changed on the server?
+                    // Currently we dont support moving widgets between groups
+                    return res.status(400).json({ error: 'Invalid group id', code: 'INVALID_GROUP_ID' })
+                }
+                changeResult.push(applyIfDifferent(current, modified, 'order'))
+                changeResult.push(applyIfDifferent(current, modified, 'width'))
+                changeResult.push(applyIfDifferent(current, modified, 'height'))
+            }
+
+            // scan through the added widgets
+            for (const added of addedWidgets) {
+                const current = flows.find(n => n.id === added.id)
+                if (current) {
+                    // widget already exists in current flows! integrity of data suspect! Has flows changed on the server?
+                    return res.status(400).json({ error: 'Widget already exists', code: 'WIDGET_ALREADY_EXISTS' })
+                }
+                // sanitize the added widget (NOTE: only ui-spacer is supported for now & these are the only properties we care about)
+                const newWidget = {
+                    id: added.id,
+                    type: added.type,
+                    group: added.group,
+                    name: added.name || '',
+                    order: added.order ?? 0,
+                    width: added.width ?? 1,
+                    height: added.height ?? 1,
+                    className: added.className || ''
+                }
+                flows.push(newWidget)
+                changeResult.push(true)
+            }
+            for (const removed of removedWidgets) {
+                const current = flows.find(n => n.id === removed.id)
+                if (!current) {
+                    // widget not found in current flows! integrity of data suspect! Has flows changed on the server?
+                    return res.status(400).json({ error: 'Widget not found', code: 'WIDGET_NOT_FOUND' })
+                }
+                const index = flows.indexOf(current)
+                if (index > -1) {
+                    flows.splice(index, 1)
+                    changeResult.push(true)
+                }
+            }
             if (changeResult.length === 0 || !changeResult.includes(true)) {
-                return res.status(200).json({ message: 'No changes were' })
+                return res.status(201).json({ message: 'No changes were found', code: 'NO_CHANGES' })
             }
-            return flows
-        }).then(flows => {
-            // update the flows with the new group order
-            return axios.request({
+
+            const postResponse = await axios.request({
                 method: 'POST',
                 headers: postHeaders,
+                httpsAgent,
                 url,
                 data: {
                     flows,
                     rev
                 }
             })
-        }).then(response => {
-            return res.status(200).json(response.data)
-        }).catch(error => {
+
+            if (postResponse.status !== 200) {
+                return res.status(postResponse.status).json({ error: postResponse?.data?.message || 'An error occurred deploying flows', code: 'POST_FAILED' })
+            }
+
+            return res.status(postResponse.status).json(postResponse.data)
+        } catch (error) {
             console.error(error)
             const status = error.response?.status || 500
-            return res.status(status).json({ error: error.message })
-        })
+            return res.status(status).json({ error: error.message || 'An error occurred' })
+        }
     })
 
     // PATCH: /dashboard/api/v1/:dashboardId/edit/:pageId - start editing a page
diff --git a/ui/src/EditTracking.js b/ui/src/EditTracking.js
index d3114b82a..fc6ecb08d 100644
--- a/ui/src/EditTracking.js
+++ b/ui/src/EditTracking.js
@@ -6,8 +6,7 @@ const state = reactive({
     editPage: '',
     editMode: false,
     editorPath: '', // the custom httpAdminRoot path for the NR editor
-    isTrackingEdits: false,
-    originalGroups: []
+    isTrackingEdits: false
 })
 
 // Methods
@@ -27,28 +26,19 @@ function initialise (editKey, editPage, editorPath) {
 /**
  * Start tracking edits
  */
-function startEditTracking (groups) {
+function startEditTracking () {
     state.isTrackingEdits = true
-    updateEditTracking(groups)
 }
 
 /**
  * Stop tracking edits, clear editKey/editPage & exit edit mode
  */
-function exitEditMode () {
+function endEditMode () {
     state.editKey = ''
     state.editPage = ''
     state.editMode = false
     state.isTrackingEdits = false
     state.initialised = false
-    state.originalGroups = []
-}
-
-/**
- * Update the original groups with the current groups
- */
-function updateEditTracking (groups) {
-    state.originalGroups = JSON.parse(JSON.stringify(groups))
 }
 
 // RO computed props
@@ -56,7 +46,6 @@ const editKey = computed(() => state.editKey)
 const editPage = computed(() => state.editPage)
 const editMode = computed(() => !!state.editKey && !!state.editPage)
 const editorPath = computed(() => state.editorPath)
-const originalGroups = computed(() => state.originalGroups)
 const isTrackingEdits = computed(() => state.isTrackingEdits)
 
-export { editKey, editMode, editPage, editorPath, originalGroups, isTrackingEdits, initialise, exitEditMode, startEditTracking, updateEditTracking }
+export { editKey, editMode, editPage, editorPath, isTrackingEdits, initialise, startEditTracking, endEditMode }
diff --git a/ui/src/api/node-red.js b/ui/src/api/node-red.js
index 5f4b19f0e..9cacfccce 100644
--- a/ui/src/api/node-red.js
+++ b/ui/src/api/node-red.js
@@ -50,10 +50,11 @@ export default {
      * @param {string} options.page - The page id
      * @param {string} options.key - The edit key for verification
      * @param {Array<Object>} options.groups - The updated group objects to apply
+     * @param {Array<Object>} options.widgets - The updated widget objects to apply
      * @returns the axios request
      */
-    deployChanges: async function deployChangesViaHttpAdminEndpoint ({ dashboard, page, groups, key, editorPath }) {
-        const changes = { groups }
+    deployChanges: async function deployChangesViaHttpAdminEndpoint ({ dashboard, page, groups, widgets, key, editorPath }) {
+        const changes = { groups, widgets }
         return axios.request({
             method: 'PATCH',
             url: getDashboardApiUrl(editorPath || '', dashboard, 'flows'),
diff --git a/ui/src/layouts/Flex.vue b/ui/src/layouts/Flex.vue
index 2d4b4e954..6ab5476ae 100644
--- a/ui/src/layouts/Flex.vue
+++ b/ui/src/layouts/Flex.vue
@@ -10,10 +10,10 @@
                 :class="getGroupClass(g)"
                 :style="{'width': ((rowHeight * 2 * g.width) + 'px')}"
                 :draggable="editMode"
-                @dragstart="onDragStart($event, $index)"
-                @dragover="onDragOver($event, $index, g)"
-                @dragend="onDragEnd($event, $index, g)"
-                @dragleave="onDragLeave($event, $index, g)"
+                @dragstart="onGroupDragStart($event, $index, g)"
+                @dragover="onGroupDragOver($event, $index, g)"
+                @dragend="onGroupDragEnd($event, $index, g)"
+                @dragleave="onGroupDragLeave($event, $index, g)"
                 @drop.prevent
                 @dragenter.prevent
             >
@@ -22,7 +22,7 @@
                         {{ g.name }}
                     </template>
                     <template #text>
-                        <widget-group :group="g" :index="$index" :widgets="widgetsByGroup(g.id)" :resizable="editMode" @resize="onGroupResize" />
+                        <widget-group :group="g" :index="$index" :widgets="groupWidgets(g.id)" :resizable="editMode" :group-dragging="groupDragging.active" @resize="onGroupResize" @widget-added="updateEditStateObjects" @widget-removed="updateEditStateObjects" @refresh-state-from-store="updateEditStateObjects" />
                     </template>
                 </v-card>
             </div>
@@ -98,6 +98,12 @@ export default {
         pageWidgets: function () {
             return this.widgetsByPage(this.$route.meta.id)
         },
+        groupWidgets () {
+            if (this.editMode) { // mixin property
+                return (groupId) => this.pageGroupWidgets[groupId]
+            }
+            return (groupId) => this.widgetsByGroup(groupId)
+        },
         page: function () {
             return this.pages[this.$route.meta.id]
         },
@@ -109,8 +115,9 @@ export default {
         }
     },
     mounted () {
+        console.log('flex layout mounted')
         if (this.editMode) { // mixin property
-            this.pageGroups = this.getPageGroups()
+            this.updateEditStateObjects()
             this.initializeEditTracking() // Mixin method
         }
     },
@@ -130,6 +137,21 @@ export default {
                 })
             return groups
         },
+        getGroupWidgets (groupId) {
+            // get widgets for this group (sorted by layout.order)
+            const widgets = this.widgetsByGroup(groupId)
+                // only show the widgets that haven't had their "visible" property set to false
+                .filter((g) => {
+                    if ('visible' in g) {
+                        return g.visible && g.groupType !== 'dialog'
+                    }
+                    return true
+                })
+                .sort((a, b) => {
+                    return a?.layout?.order - b?.layout?.order
+                })
+            return widgets
+        },
         getWidgetClass (widget) {
             const classes = []
             // ensure each widget has a class for its type
@@ -154,7 +176,7 @@ export default {
                 classes.push(properties.class)
             }
             // dragging interaction classes
-            const dragDropClass = this.getDragDropClass(group) // Mixin method
+            const dragDropClass = this.getGroupDragDropClass(group) // Mixin method
             if (dragDropClass) {
                 classes.push(dragDropClass)
             }
@@ -179,7 +201,8 @@ export default {
             this.deployChanges({
                 dashboard: this.page.ui,
                 page: this.page.id,
-                groups: this.pageGroups
+                groups: this.pageGroups,
+                widgets: this.pageGroupWidgets
             }).then(() => {
                 this.acceptChanges() // Mixin method
             }).catch((error) => {
@@ -197,7 +220,7 @@ export default {
         },
         discardEdits () {
             this.revertEdits() // Mixin method
-            this.pageGroups = this.getPageGroups()
+            this.updateEditStateObjects()
         },
         async leaveEditMode () {
             let leave = true
@@ -218,6 +241,22 @@ export default {
                 this.discardEdits()
             }
             this.exitEditMode() // Mixin method
+        },
+        onGroupResize (opts) {
+            // ensure opts.width is a number and is greater than 0
+            if (typeof opts.width !== 'number' || opts.width < 1) {
+                return
+            }
+            this.pageGroups[opts.index].width = opts.width
+        },
+        updateEditStateObjects () {
+            console.log('updateEditStateObjects')
+            this.pageGroups = this.getPageGroups()
+            const pageGroupWidgets = {}
+            for (const group of this.pageGroups) {
+                pageGroupWidgets[group.id] = this.getGroupWidgets(group.id)
+            }
+            this.pageGroupWidgets = pageGroupWidgets
         }
     }
 }
diff --git a/ui/src/layouts/Grid.vue b/ui/src/layouts/Grid.vue
index e6afc56ad..3b81e5f29 100644
--- a/ui/src/layouts/Grid.vue
+++ b/ui/src/layouts/Grid.vue
@@ -10,10 +10,10 @@
                 :class="getGroupClass(g)"
                 :style="`grid-column-end: span min(${ g.width }, var(--layout-columns)`"
                 :draggable="editMode"
-                @dragstart="onDragStart($event, $index)"
-                @dragover="onDragOver($event, $index, g)"
-                @dragend="onDragEnd($event, $index, g)"
-                @dragleave="onDragLeave($event, $index, g)"
+                @dragstart="onGroupDragStart($event, $index, g)"
+                @dragover="onGroupDragOver($event, $index, g)"
+                @dragend="onGroupDragEnd($event, $index, g)"
+                @dragleave="onGroupDragLeave($event, $index, g)"
                 @drop.prevent
                 @dragenter.prevent
             >
@@ -22,7 +22,7 @@
                         {{ g.name }}
                     </template>
                     <template #text>
-                        <widget-group :group="g" :index="$index" :widgets="widgetsByGroup(g.id)" :resizable="editMode" @resize="onGroupResize" />
+                        <widget-group :group="g" :index="$index" :widgets="groupWidgets(g.id)" :resizable="editMode" :group-dragging="groupDragging.active" @resize="onGroupResize" @widget-added="updateEditStateObjects" @widget-removed="updateEditStateObjects" @refresh-state-from-store="updateEditStateObjects" />
                     </template>
                 </v-card>
             </div>
@@ -106,11 +106,18 @@ export default {
                 return this.pageGroups
             }
             return this.getPageGroups()
+        },
+        groupWidgets () {
+            if (this.editMode) { // mixin property
+                return (groupId) => this.pageGroupWidgets[groupId]
+            }
+            return (groupId) => this.widgetsByGroup(groupId)
         }
     },
     mounted () {
+        console.log('grid layout mounted')
         if (this.editMode) { // mixin property
-            this.pageGroups = this.getPageGroups()
+            this.updateEditStateObjects()
             this.initializeEditTracking() // Mixin method
         }
     },
@@ -142,6 +149,21 @@ export default {
             }
             return classes.join(' ')
         },
+        getGroupWidgets (groupId) {
+            // get widgets for this group (sorted by layout.order)
+            const widgets = this.widgetsByGroup(groupId)
+                // only show the widgets that haven't had their "visible" property set to false
+                .filter((g) => {
+                    if ('visible' in g) {
+                        return g.visible && g.groupType !== 'dialog'
+                    }
+                    return true
+                })
+                .sort((a, b) => {
+                    return a?.layout?.order - b?.layout?.order
+                })
+            return widgets
+        },
         getGroupClass (group) {
             const classes = []
             // add any class set in the group's properties
@@ -154,7 +176,7 @@ export default {
                 classes.push(properties.class)
             }
             // dragging interaction classes
-            const dragDropClass = this.getDragDropClass(group) // Mixin method
+            const dragDropClass = this.getGroupDragDropClass(group) // Mixin method
             if (dragDropClass) {
                 classes.push(dragDropClass)
             }
@@ -179,7 +201,8 @@ export default {
             this.deployChanges({
                 dashboard: this.page.ui,
                 page: this.page.id,
-                groups: this.pageGroups
+                groups: this.pageGroups,
+                widgets: this.pageGroupWidgets
             }).then(() => {
                 this.acceptChanges() // Mixin method
             }).catch((error) => {
@@ -197,7 +220,7 @@ export default {
         },
         discardEdits () {
             this.revertEdits() // Mixin method
-            this.pageGroups = this.getPageGroups()
+            this.updateEditStateObjects()
         },
         async leaveEditMode () {
             let leave = true
@@ -218,6 +241,22 @@ export default {
                 this.discardEdits()
             }
             this.exitEditMode() // Mixin method
+        },
+        onGroupResize (opts) {
+            // ensure opts.width is a number and is greater than 0
+            if (typeof opts.width !== 'number' || opts.width < 1) {
+                return
+            }
+            this.pageGroups[opts.index].width = opts.width
+        },
+        updateEditStateObjects () {
+            console.log('Updating edit state objects')
+            this.pageGroups = this.getPageGroups()
+            const pageGroupWidgets = {}
+            for (const group of this.pageGroups) {
+                pageGroupWidgets[group.id] = this.getGroupWidgets(group.id)
+            }
+            this.pageGroupWidgets = pageGroupWidgets
         }
     }
 }
diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index f9e147813..af0a7fa10 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -1,29 +1,72 @@
 <template>
     <div class="nrdb-layout-group--grid" :style="`grid-template-columns: repeat(min(${ columns }, var(--layout-columns)), 1fr); grid-template-rows: repeat(${group.height}, minmax(var(--widget-row-height), auto)); `">
         <div
-            v-for="w in widgets"
+            v-if="resizable" ref="group-resize-view" class="nrdb-resizable" :class="{'resizing': groupResizing.active}"
+            :style="{ 'width': groupResizing.current.width ? `${groupResizing.current.width}px` : null, 'z-index': 99 }"
+        >
+            <div
+                draggable="true"
+                class="nrdb-resizable--handle nrdb-resizable--right"
+                @dragstart="onHandleDragStart($event, index, 'group', group, 'top', 'right')"
+                @drag="onHandleDrag($event, index, 'group', group, 'top', 'right')"
+                @dragover="onHandleOver($event, index, 'group', group, 'top', 'right')"
+                @dragend="onHandleDragEnd($event, index, 'group', group, 'top', 'right')"
+                @dragenter.prevent
+            />
+            <!-- Add Spacer button -->
+            <div class="nrdb-resizable--toolbar">
+                <v-btn v-tooltip:bottom="'Add Spacer'" icon="mdi-card-plus-outline" size="small" variant="text" class="nrdb-resizable--toolbar-button" @click="addSpacer" />
+            </div>
+        </div>
+        <div
+            v-for="(w, $index) in widgets"
             :id="'nrdb-ui-widget-' + w.id"
             :key="w.id"
+            :draggable="resizable"
             class="nrdb-ui-widget"
             :class="getWidgetClass(w)"
-            style="display: grid"
-            :style="`grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(${w.props.height}, minmax(var(--widget-row-height), auto)); grid-row-end: span ${w.props.height}; grid-column-end: span min(${ getWidgetWidth(w.props.width) }, var(--layout-columns))`"
+            :style="[{display: 'grid', 'grid-template-columns': 'minmax(0, 1fr)'}, widgetStyles(w)]"
+            @dragstart="!resizable ? null : onWidgetDragStart($event, $index, w)"
+            @dragover="!resizable ? null : onWidgetDragOver($event, $index, w)"
+            @dragend="!resizable ? null : onWidgetDragEnd($event, $index, w)"
+            @dragleave="!resizable ? null : onWidgetDragLeave($event, $index, w)"
+            @drop.prevent
+            @dragenter.prevent
         >
+            <!-- <div style="font-size: small; background-color: aquamarine;">w.props.height: {{ w.props.height }}</div> -->
             <component :is="w.component" :id="w.id" :props="w.props" :state="w.state" :style="`grid-row-end: span ${w.props.height}`" />
-        </div>
-        <div
-            v-if="resizable" ref="resize-view" class="nrdb-resizable" :class="{'resizing': resizing.active}"
-            :style="{'width': resizing.current.width ? `${resizing.current.width}px` : null }"
-        >
             <div
-                draggable="true"
-                class="nrdb-resizable--handle nrdb-resizable--right"
-                @dragstart="onHandleDragStart($event, 'top', 'right')"
-                @drag="onHandleDrag($event, 'top', 'right')"
-                @dragover="onHandleOver($event, 'top', 'right')"
-                @dragend="onHandleDragEnd($event, 'top', 'right')"
-                @dragenter.prevent
-            />
+                v-if="resizable && !groupDragging" ref="widget-resize-view"
+                class="nrdb-resizable nrdb-resizable-widget"
+                :class="widgetResizing.widgetId === w.id || widgetDragging.widgetId === w.id ? getWidgetEditingClass(w) : null"
+                style="z-index: 100; min-width: 28px; min-height: 28px;"
+                :style="widgetResizing.widgetId === w.id ? getWidgetEditingStyle(w) : null"
+            >
+                <!-- Delete Spacer button -->
+                <div v-if="w.type === 'ui-spacer'" class="nrdb-resizable--toolbar">
+                    <v-btn v-tooltip:bottom="'Delete Spacer'" icon="mdi-card-minus-outline" size="small" variant="text" class="nrdb-resizable--toolbar-button" @click="removeWidget(w)" />
+                </div>
+                <div
+                    draggable="true"
+                    class="nrdb-resizable--handle nrdb-resizable--right"
+                    @dragstart="onHandleDragStart($event, index, 'widget', w, 'ew')"
+                    @drag="onHandleDrag($event, index, 'widget', w, 'ew')"
+                    @dragover="onHandleOver($event, index, 'widget', w, 'ew')"
+                    @dragend="onHandleDragEnd($event, index, 'widget', w, 'ew')"
+                    @dragenter.prevent
+                    @dblclick="w.props.width = ''; w.layout.width = '3'"
+                />
+                <div
+                    draggable="true"
+                    class="nrdb-resizable--handle nrdb-resizable--bottom"
+                    @dragstart="onHandleDragStart($event, index, 'widget', w, 'ns')"
+                    @drag="onHandleDrag($event, index, 'widget', w, 'ns')"
+                    @dragover="onHandleOver($event, index, 'widget', w, 'ns')"
+                    @dragend="onHandleDragEnd($event, index, 'widget', w, 'ns')"
+                    @dragenter.prevent
+                    @dblclick="w.props.height = ''; w.layout.height = '1'"
+                />
+            </div>
         </div>
         <img ref="blank-img" style="position: absolute;" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="">
     </div>
@@ -31,6 +74,11 @@
 
 <script>
 import WYSIWYG from './wysiwyg/index.js'
+
+function hasNumberProperty (obj, prop) {
+    return Object.prototype.hasOwnProperty.call(obj, prop) && !isNaN(+obj[prop])
+}
+
 export default {
     name: 'WidgetGroup',
     mixins: [WYSIWYG],
@@ -50,12 +98,32 @@ export default {
         resizable: {
             type: Boolean,
             default: false
+        },
+        groupDragging: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['resize', 'widget-added', 'widget-removed', 'refresh-state-from-store'],
+    data () {
+        return {
+            localWidgets: null
         }
     },
-    emits: ['resize'],
     computed: {
         columns () {
-            return this.resizing.current.columns > 0 ? this.resizing.current.columns : +this.group.width
+            return this.groupResizing.current.columns > 0 ? this.groupResizing.current.columns : +this.group.width
+        },
+        widgetStyles () {
+            return (widget) => {
+                const styles = {}
+                const height = widget.props.height || widget.layout.height
+                const width = widget.props.width || widget.layout.width
+                styles['grid-row-end'] = `span ${height}`
+                styles['grid-template-rows'] = `repeat(${height}, minmax(var(--widget-row-height), auto))`
+                styles['grid-column-end'] = `span min(${this.getWidgetWidth(+width)}, var(--layout-columns))`
+                return styles
+            }
         }
     },
     methods: {
@@ -71,12 +139,60 @@ export default {
             }
             return classes.join(' ')
         },
+        getWidgetEditingClass (widget) {
+            const classes = []
+            // dragging interaction classes
+            const dragClass = this.resizable ? this.getWidgetDragDropClass(widget) : null // Mixin method
+            if (dragClass) {
+                classes.push(dragClass)
+            }
+            const resizeClass = this.getWidgetResizingClass(widget) // Mixin method
+            if (resizeClass) {
+                classes.push(resizeClass)
+            }
+            return classes.join(' ')
+        },
+        getWidgetEditingStyle (widget) {
+            if (!this.widgetResizing.active || this.resizeType !== 'widget') {
+                return null
+            }
+            const style = { }
+            if (this.resizeMode === 'ew' && hasNumberProperty(this.widgetResizing.current, 'width')) {
+                style.width = `${this.widgetResizing.current.width}px`
+            }
+            if (this.resizeMode === 'ns' && hasNumberProperty(this.widgetResizing.current, 'height')) {
+                style.height = `${this.widgetResizing.current.height}px`
+            }
+            return style
+        },
         getWidgetWidth (width) {
-            if (width) {
+            const w = +width // convert to number if it's a string
+            if (!isNaN(w) && w > 0) {
                 return Math.min(width, this.columns)
-            } else {
-                return this.columns
             }
+            return this.columns
+        },
+        addSpacer () {
+            this.$store.dispatch('wysiwyg/addSpacer', {
+                group: this.group.id,
+                name: 'spacer',
+                order: this.widgets.length + 1 || 0,
+                height: 1, // consider taking height and width of last widget or last spacer in group?
+                width: 1
+            }).then((newWidget) => {
+                console.log('New Widget:', newWidget)
+                this.$emit('widget-added', { widget: newWidget, group: this.group })
+            }).catch((error) => {
+                console.error('Error adding spacer:', error)
+            })
+        },
+        removeWidget (widget) {
+            this.$store.dispatch('wysiwyg/removeWidget', { id: widget.id }).then(() => {
+                console.log('Widget removed')
+                this.$emit('widget-removed', { widget })
+            }).catch((error) => {
+                console.error('Error deleting widget:', error)
+            })
         }
     }
 }
diff --git a/ui/src/layouts/wysiwyg/draggable.js b/ui/src/layouts/wysiwyg/draggableGroup.js
similarity index 63%
rename from ui/src/layouts/wysiwyg/draggable.js
rename to ui/src/layouts/wysiwyg/draggableGroup.js
index 136542528..2eb9be23b 100644
--- a/ui/src/layouts/wysiwyg/draggable.js
+++ b/ui/src/layouts/wysiwyg/draggableGroup.js
@@ -2,10 +2,11 @@ export default {
     data () {
         return {
             pageGroups: [],
-            dragging: {
+            groupDragging: {
                 active: false,
                 index: -1,
-                dropIndex: -1
+                dropIndex: -1,
+                id: null
             }
         }
     },
@@ -16,10 +17,12 @@ export default {
          * @param {DragEvent} event - The drag event
          * @param {Number} index - The index of the group
          */
-        onDragStart (event, index) {
-            this.dragging.active = true
-            this.dragging.index = index
-            this.dragging.dropIndex = index
+        onGroupDragStart (event, index, item) {
+            console.log('onGroupDragStart', index)
+            this.groupDragging.active = true
+            this.groupDragging.id = item.id
+            this.groupDragging.index = index
+            this.groupDragging.dropIndex = index
             event.dataTransfer.effectAllowed = 'move'
             event.dataTransfer.dropEffect = 'move'
             event.stopPropagation()
@@ -30,22 +33,22 @@ export default {
          * @param {DragEvent} event - The drag event
          * @param {Number} index - The index of the group
          */
-        onDragOver (event, index, group) {
+        onGroupDragOver (event, index, item) {
             event.preventDefault()
-            if (this.dragging.active === false) { return }
+            if (this.groupDragging.active === false) { return }
             event.dataTransfer.dropEffect = 'move'
             // update drop index
-            if (index !== this.dragging.index) {
-                this.dragging.dropIndex = index
+            if (index !== this.groupDragging.index) {
+                this.groupDragging.dropIndex = index
             }
             // ensure the mouse is over a different group
-            if (this.dragging.index === index || this.dragging.index < 0) {
+            if (this.groupDragging.index === index || this.groupDragging.index < 0) {
                 return
             }
 
             // ensure the mouse is within the bounds of the source group size
             // to avoid flip-flop when the target group is larger than the source group
-            const sourceGroup = this.pageGroups[this.dragging.index]
+            const sourceGroup = this.pageGroups[this.groupDragging.index]
             const sourceId = `nrdb-ui-group-${sourceGroup.id}`
             const sourceEl = document.getElementById(sourceId)
             const sourceBounds = sourceEl.getBoundingClientRect()
@@ -61,17 +64,18 @@ export default {
                 return
             }
 
-            if (this.dragging.index >= 0) {
-                this.moveGroup(this.dragging.index, index)
+            if (this.groupDragging.index >= 0) {
+                this.moveGroup(this.groupDragging.index, index)
             }
         },
-        onDragLeave (event, index, group) {
-            this.dragging.dropIndex = -1
+        onGroupDragLeave (event, index, item) {
+            this.groupDragging.dropIndex = -1
         },
-        onDragEnd (event, index, group) {
-            this.dragging.active = false
-            this.dragging.index = -1
-            this.dragging.dropIndex = -1
+        onGroupDragEnd (event, index, item) {
+            this.groupDragging.active = false
+            this.groupDragging.id = null
+            this.groupDragging.index = -1
+            this.groupDragging.dropIndex = -1
         },
         moveGroup (fromIndex, toIndex) {
             const movedItem = this.pageGroups.splice(fromIndex, 1)[0]
@@ -80,19 +84,20 @@ export default {
             this.pageGroups.forEach((group, index) => {
                 group.order = index + 1
             })
-            this.dragging.index = toIndex
+            this.groupDragging.index = toIndex
         },
-        getDragDropClass (group) {
-            if (this.isDragging(group)) {
+        getGroupDragDropClass (group) {
+            if (this.isDraggingGroup(group)) {
                 return 'drag-start'
             }
             return ''
         },
-        isDragging (group) {
-            if (!this.dragging.active) {
+        isDraggingGroup (group) {
+            // TODO: simplify by checking item id instead
+            if (!this.groupDragging.active) {
                 return false
             }
-            const dragging = this.pageGroups[this.dragging.index]
+            const dragging = this.pageGroups[this.groupDragging.index]
             if (dragging?.id === group?.id) {
                 return true
             }
diff --git a/ui/src/layouts/wysiwyg/draggableWidget.js b/ui/src/layouts/wysiwyg/draggableWidget.js
new file mode 100644
index 000000000..d3fe462ae
--- /dev/null
+++ b/ui/src/layouts/wysiwyg/draggableWidget.js
@@ -0,0 +1,113 @@
+export default {
+    data () {
+        return {
+            widgetDragging: {
+                active: false,
+                widgetId: null,
+                index: -1,
+                dropIndex: -1
+            }
+        }
+    },
+    methods: {
+        // Drag and Drop placement methods
+        /**
+         * Event handler for dragstart event
+         * @param {DragEvent} event - The drag event
+         * @param {Number} index - The index of the group
+         */
+        onWidgetDragStart (event, index, item) {
+            this.widgetDragging.active = true
+            this.widgetDragging.widgetId = item.id
+            this.widgetDragging.index = index
+            this.widgetDragging.dropIndex = index
+            event.dataTransfer.effectAllowed = 'move'
+            event.dataTransfer.dropEffect = 'move'
+            event.stopPropagation()
+            return false
+        },
+        /**
+         * Event handler for dragover event
+         * @param {DragEvent} event - The drag event
+         * @param {Number} index - The index of the group
+         */
+        onWidgetDragOver (event, index, item) {
+            event.preventDefault()
+            if (this.widgetDragging.active === false) { return }
+            event.dataTransfer.dropEffect = 'move'
+            // update drop index
+            if (index !== this.widgetDragging.index) {
+                this.widgetDragging.dropIndex = index
+            }
+            // ensure the mouse is over a different widget
+            if (this.widgetDragging.index === index || this.widgetDragging.index < 0) {
+                return
+            }
+
+            // ensure the mouse is within the bounds of the source group size
+            // to avoid flip-flop when the target group is larger than the source group
+            const source = this.widgets[this.widgetDragging.index]
+            const sourceId = `nrdb-ui-widget-${source.id}`
+            const sourceEl = document.getElementById(sourceId)
+            const sourceBounds = sourceEl.getBoundingClientRect()
+            const target = this.widgets[index]
+            const targetId = `nrdb-ui-widget-${target.id}`
+            const targetEl = document.getElementById(targetId)
+            const targetBounds = targetEl.getBoundingClientRect()
+            const hitBoundX1 = targetBounds.left
+            const hitBoundX2 = targetBounds.left + sourceBounds.width
+            const hitBoundY1 = targetBounds.top
+            const hitBoundY2 = targetBounds.top + sourceBounds.height
+            if (event.clientX < hitBoundX1 || event.clientX > hitBoundX2 || event.clientY < hitBoundY1 || event.clientY > hitBoundY2) {
+                return
+            }
+
+            if (this.widgetDragging.index >= 0) {
+                this.moveWidget(this.widgetDragging.index, index)
+            }
+        },
+        onWidgetDragLeave (event, index, item) {
+            this.widgetDragging.dropIndex = -1
+        },
+        onWidgetDragEnd (event, index, item) {
+            this.widgetDragging.active = false
+            this.widgetDragging.widgetId = null
+            this.widgetDragging.index = -1
+            this.widgetDragging.dropIndex = -1
+        },
+        moveWidget (fromIndex, toIndex) {
+            const movedItem = this.widgets.splice(fromIndex, 1)[0]
+            this.widgets.splice(toIndex, 0, movedItem)
+            // update .order property of widgets
+            this.widgets.forEach((widget, index) => {
+                widget.props.order = index + 1
+                widget.layout.order = index + 1
+            })
+            this.widgetDragging.index = toIndex
+        },
+        getWidgetDragDropClass (item) {
+            if (this.isDraggingWidget(item)) {
+                return 'drag-start'
+            }
+            return ''
+        },
+        getWidgetResizingClass (item) {
+            if (this.isResizingWidget(item)) {
+                return 'resizing'
+            }
+            return ''
+        },
+        isDraggingWidget (widget) {
+            if (!this.widgetDragging.active) {
+                return false
+            }
+            return this.widgetDragging.widgetId === widget.id
+        },
+        isResizingWidget (widget) {
+            if (!this.widgetResizing.active) {
+                return false
+            }
+            return this.widgetResizing.widgetId === widget.id
+        }
+    }
+}
diff --git a/ui/src/layouts/wysiwyg/index.js b/ui/src/layouts/wysiwyg/index.js
index ace1421f3..1791791d9 100644
--- a/ui/src/layouts/wysiwyg/index.js
+++ b/ui/src/layouts/wysiwyg/index.js
@@ -1,22 +1,28 @@
-import { editKey, editMode, editPage, editorPath, exitEditMode, isTrackingEdits, originalGroups, startEditTracking, updateEditTracking } from '../../EditTracking.js'
+import { mapGetters } from 'vuex'
+
+import { editKey, editMode, editPage, editorPath, isTrackingEdits } from '../../EditTracking.js'
 import NodeRedApi from '../../api/node-red'
 
-import DraggableMixin from './draggable.js'
+import DraggableGroupMixin from './draggableGroup.js'
+import DraggableWidgetMixin from './draggableWidget.js'
 import ResizableMixin from './resizable.js'
 
 export default {
-    mixins: [DraggableMixin, ResizableMixin],
+    mixins: [DraggableGroupMixin, DraggableWidgetMixin, ResizableMixin],
     data () {
         return {
-            pageGroups: []
+            pageGroups: [],
+            pageGroupWidgets: []
         }
     },
+    emits: ['refresh-state-from-store'],
     computed: {
+        ...mapGetters('wysiwyg', ['isDirty', 'originalGroups', 'originalWidgets']),
         dirty () {
             if (!this.editMode || !isTrackingEdits.value) {
                 return false
             }
-            return JSON.stringify(this.pageGroups) !== JSON.stringify(originalGroups.value)
+            return this.isDirty(this.page.id, this.pageGroups, this.pageGroupWidgets)
         },
         editMode: function () {
             return editMode.value && editPage.value === this.$route.meta.id
@@ -25,11 +31,11 @@ export default {
     methods: {
         initializeEditTracking () {
             if (this.editMode && !isTrackingEdits.value) {
-                startEditTracking(this.pageGroups)
+                this.$store.dispatch('wysiwyg/beginEditTracking', { groups: this.pageGroups, widgets: this.pageGroupWidgets })
             }
         },
         acceptChanges () {
-            updateEditTracking(this.pageGroups)
+            this.$store.dispatch('wysiwyg/updateEditTracking', { groups: this.pageGroups, widgets: this.pageGroupWidgets })
         },
         exitEditMode () {
             const url = new URL(window.location.href)
@@ -38,27 +44,107 @@ export default {
             delete query['edit-key']
             this.$router.replace({ query })
             window.history.replaceState({}, document.title, url)
-            exitEditMode() // EditTracking method
+            this.$store.dispatch('wysiwyg/endEditTracking')
         },
         revertEdits () {
-            const originals = originalGroups.value || []
-            // scan through each group and revert changes
-            const propertiesOfInterest = ['width', 'height', 'order']
-            originals.forEach((originalGroup, index) => {
+            console.log('revertEdits')
+            this.$store.dispatch('wysiwyg/revertEdits').then(() => {
+                console.log('reverted edits')
+                this.$emit('refresh-state-from-store')
+            }).catch((error) => {
+                console.error('Error reverting edits', error)
+            })
+        },
+        async deployChanges ({ dashboard, page, groups, widgets }) {
+            console.log('deployChanges', dashboard, page, groups, widgets)
+            const normalisedWidgetsAll = new Map()
+            const normaliseWidget = widget => {
+                return {
+                    id: widget.id,
+                    type: widget.type,
+                    ...widget.props
+                }
+            }
+
+            // first normalise the widgets ready for Node-RED
+            const widgetGroups = Object.keys(widgets)
+            for (const groupId of widgetGroups) {
+                const groupWidgets = widgets[groupId]
+                if (!groupWidgets?.length) { continue }
+                const normalised = groupWidgets.map(normaliseWidget)
+                for (const widget of normalised) {
+                    if (!widget.id || !widget.type) {
+                        return Promise.reject(new Error('Widget is missing id or type'))
+                    }
+                    normalisedWidgetsAll.set(widget.id, widget)
+                }
+            }
+
+            // determine which widgets have been added and removed
+            const originalGroupsLookup = this.originalGroups || {}
+            const currentPageGroups = []
+            for (const key in originalGroupsLookup) {
+                const originalGroup = originalGroupsLookup[key]
+                if (!originalGroup || originalGroup.page !== page) {
+                    continue // skip groups that are not on this page
+                }
                 const pageGroup = this.pageGroups?.find(group => group.id === originalGroup.id)
                 if (!pageGroup) {
                     console.warn('Group not found in pageGroups - as we do not currently support adding/removing groups, this should not happen!')
-                    return
+                    throw new Error('Group not found in pageGroups')
                 }
-                propertiesOfInterest.forEach(property => {
-                    if (originalGroup[property] !== pageGroup[property]) {
-                        pageGroup[property] = originalGroup[property]
+                currentPageGroups.push(pageGroup)
+            }
+
+            // look for added / removed widgets.
+            const originalWidgetsLookup = this.originalWidgets || {}
+            // If a widget is in the original list but not in the current list, it has been removed
+            for (const key in originalWidgetsLookup) {
+                const originalWidget = originalWidgetsLookup[key]
+                const widget = normalisedWidgetsAll.get(originalWidget.id)
+                if (!currentPageGroups.find(group => group.id === originalWidget?.props?.group)) {
+                    continue // skip widgets that are not in a group we are tracking
+                }
+                if (!widget) {
+                    if (originalWidget.type !== 'ui-spacer') {
+                        throw new Error('Only spacers can be removed')
+                    }
+                    const removeWidget = {
+                        __DB2_REMOVE_WIDGET: true,
+                        id: originalWidget.id,
+                        type: originalWidget.type,
+                        ...originalWidget.props
                     }
-                })
+                    normalisedWidgetsAll.set(removeWidget.id, removeWidget)
+                }
+            }
+
+            // If a widget is in normalisedWidgets but not in the original list, it has been added
+            const normalisedWidgets = Array.from(normalisedWidgetsAll.values()).filter(widget => currentPageGroups.find(group => group.id === widget.group)) || []
+            for (const widget of normalisedWidgets) {
+                // sanity check - all widgets must belong to a group and that group must be on the page
+                if (!widget.group || !currentPageGroups.find(group => group.id === widget.group)) {
+                    throw new Error('Widget does not belong to a group on this page')
+                }
+                const origWidget = originalWidgetsLookup[widget.id]
+                if (!origWidget) {
+                    widget.__DB2_ADD_WIDGET = true
+                }
+            }
+
+            if (!normalisedWidgets.length || !currentPageGroups.length) {
+                console.warn('No changes to deploy - it should not be possible to get here!')
+                return Promise.resolve()
+            }
+
+            return NodeRedApi.deployChanges({
+                dashboard,
+                page,
+                groups: currentPageGroups,
+                widgets: normalisedWidgets,
+                key: editKey.value,
+                editorPath: editorPath.value
             })
-        },
-        deployChanges ({ dashboard, page, groups }) {
-            return NodeRedApi.deployChanges({ dashboard, page, groups, key: editKey.value, editorPath: editorPath.value })
         }
     }
 }
diff --git a/ui/src/layouts/wysiwyg/resizable.js b/ui/src/layouts/wysiwyg/resizable.js
index 896414897..c2e40f4cd 100644
--- a/ui/src/layouts/wysiwyg/resizable.js
+++ b/ui/src/layouts/wysiwyg/resizable.js
@@ -1,9 +1,47 @@
+function getNumeric (numberLike) {
+    if (typeof numberLike === 'number') {
+        return numberLike
+    } else if (typeof numberLike === 'string') {
+        if (numberLike === '') {
+            return 0
+        }
+        const num = parseFloat(numberLike)
+        return isNaN(num) ? 0 : num
+    }
+    return 0
+}
 export default {
+    emits: ['resize'],
     data () {
+        const EMPTY_IMAGE = new Image()
+        EMPTY_IMAGE.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
         return {
             pageGroups: [],
-            resizing: {
+            resizeType: null,
+            resizeMode: false,
+            widgetResizing: {
+                active: false,
+                widgetId: null,
+                parentEl: null,
+                widgetEl: null,
+                init: {
+                    x: 0,
+                    y: 0,
+                    columns: 0,
+                    rows: 0,
+                    width: 0,
+                    height: 0
+                },
+                current: {
+                    columns: null,
+                    rows: null,
+                    width: null,
+                    height: null
+                }
+            },
+            groupResizing: {
                 active: false,
+                parent: null,
                 init: {
                     x: 0,
                     y: 0,
@@ -17,11 +55,12 @@ export default {
                     rows: null,
                     width: null
                 }
-            }
+            },
+            EMPTY_IMAGE
         }
     },
     watch: {
-        'resizing.active' (active) {
+        'groupResizing.active' (active) {
             // add class 'resize-active' to parent group v-card
             // that class is solely to raise the z-index of the group while resizing
             // the associated resize-active CSS is in `common.css`
@@ -29,72 +68,171 @@ export default {
         }
     },
     methods: {
-        onHandleDragStart (/** @type {DragEvent} */ event, vertical, horizontal) {
-            this.resizing.parent = this.$el.parentElement.closest('.nrdb-ui-group > .v-card')
-            this.resizing.init.columns = +this.group.width || 1
-            this.resizing.init.rows = +this.group.height || 1
-            this.resizing.init.width = this.$refs['resize-view'].clientWidth
-            this.resizing.init.x = event.x
-            this.resizing.active = true
-            const EMPTY_IMAGE = this.$refs['blank-img'] // don't show image preview
-            event.dataTransfer.setDragImage(EMPTY_IMAGE, 0, 0)
+        onHandleDragStart (/** @type {DragEvent} */ event, index, type, item, mode) {
+            this.resizeType = type
+            this.resizeMode = mode // 'ew' or 'ns'
+
+            if (type === 'group') {
+                this.groupResizing.parent = this.$el.parentElement.closest('.nrdb-ui-group > .v-card')
+                this.groupResizing.init.columns = +this.group.width || 1
+                this.groupResizing.init.rows = +this.group.height || 1
+                this.groupResizing.init.width = this.$refs['group-resize-view'].clientWidth
+                this.groupResizing.init.x = event.x
+                this.groupResizing.active = true
+            } else if (type === 'widget') {
+                const itemCols = getNumeric(item.props.width) || getNumeric(item.layout.width) || 3 // 3 is the default set in ui_base registration
+                const itemRows = getNumeric(item.props.height) || getNumeric(item.layout.height) || 1 // 1 is the default set in ui_base registration
+                this.widgetResizing.widgetId = item.id
+                this.widgetResizing.parentEl = event.target.closest('.nrdb-resizable-widget')
+                this.widgetResizing.widgetEl = event.target.closest('.nrdb-ui-widget')
+                this.widgetResizing.init.columns = itemCols
+                this.widgetResizing.init.rows = itemRows
+                this.widgetResizing.init.width = this.widgetResizing.parentEl.clientWidth
+                this.widgetResizing.init.height = this.widgetResizing.parentEl.clientHeight
+                this.widgetResizing.init.x = event.x
+                this.widgetResizing.init.y = event.y
+                this.widgetResizing.active = true
+            } else {
+                return
+            }
+            event.dataTransfer.setDragImage(this.EMPTY_IMAGE, 0, 0)
             event.dataTransfer.effectAllowed = 'move'
             event.dataTransfer.dropEffect = 'move'
             event.stopPropagation()
             return false
         },
-        onHandleOver (/** @type {DragEvent} */ event, vertical, horizontal) {
+        onHandleOver (/** @type {DragEvent} */ event, index, type, item, mode) {
             event.preventDefault() // required to allow dropEffect
-            if (this.resizing.active === false) { return }
+            if (this.resizeType !== type) { return }
+            if (type === 'group') {
+                if (this.groupResizing.active === false) { return }
+            } else if (type === 'widget') {
+                if (this.widgetResizing.active === false) { return }
+            }
             event.dataTransfer.dropEffect = 'move'
         },
-        onHandleDrag (/** @type {DragEvent} */ event, vertical, horizontal) {
+        onHandleDrag (/** @type {DragEvent} */ event, index, type, item, mode) {
             event.preventDefault() // required to allow drop and show dropEffect
-            if (this.resizing.active === false) { return }
+            if (type === 'group') {
+                this.groupHandleDragHandler(event, index, type, item, mode)
+            } else if (type === 'widget') {
+                this.widgetHandleDragHandler(event, index, type, item, mode)
+            }
+        },
+        groupHandleDragHandler (event, index, type, item, mode) {
+            if (this.groupResizing.active === false) { return }
             event.dataTransfer.dropEffect = 'move'
             if (event.x > 0 && event.y > 0) {
-                const dx = event.x - this.resizing.init.x
-                this.resizing.current.width = this.resizing.init.width + dx
-                const stepX = this.resizing.parent.clientWidth / +this.group.width
-                const dw = Math.round(this.resizing.current.width / stepX) - this.resizing.init.columns
-                const newColumns = Math.max(this.resizing.init.columns + dw, 1)
+                const dx = event.x - this.groupResizing.init.x
+                this.groupResizing.current.width = this.groupResizing.init.width + dx
+                const stepX = this.groupResizing.parent.clientWidth / +this.group.width
+                const dw = Math.round(this.groupResizing.current.width / stepX) - this.groupResizing.init.columns
+                const newColumns = Math.max(this.groupResizing.init.columns + dw, 1)
 
                 let allowIncrease = false
                 let allowDecrease = false
                 const stepSnapAt = stepX * 0.85
-                if (this.resizing.current.width > this.resizing.parent.clientWidth) {
-                    const diff = this.resizing.current.width - this.resizing.parent.clientWidth
+                if (this.groupResizing.current.width > this.groupResizing.parent.clientWidth) {
+                    const diff = this.groupResizing.current.width - this.groupResizing.parent.clientWidth
                     allowIncrease = diff > stepSnapAt
-                } else if (this.resizing.current.width < this.resizing.parent.clientWidth) {
-                    const diff = this.resizing.parent.clientWidth - this.resizing.current.width
+                } else if (this.groupResizing.current.width < this.groupResizing.parent.clientWidth) {
+                    const diff = this.groupResizing.parent.clientWidth - this.groupResizing.current.width
                     allowDecrease = diff > stepSnapAt
                 }
                 if (allowIncrease && newColumns > +this.group.width) {
-                    this.resizing.current.columns = newColumns
+                    this.groupResizing.current.columns = newColumns
                     this.$emit('resize', { index: this.index, width: newColumns })
                 } else if (allowDecrease && newColumns < +this.group.width) {
-                    this.resizing.current.columns = newColumns
+                    this.groupResizing.current.columns = newColumns
                     this.$emit('resize', { index: this.index, width: newColumns })
                 }
             }
         },
-        onHandleDragEnd (/** @type {DragEvent} */ event) {
-            if (this.resizing.active === false) { return }
+        widgetHandleDragHandler (event, index, type, item, mode) {
+            if (this.widgetResizing.active === false) { return }
+            event.dataTransfer.dropEffect = 'move'
+            if (event.x > 0 && mode === 'ew') {
+                const itemCols = getNumeric(item.props.width) || getNumeric(item.layout.width) || 3 // 3 is the default set in ui_base registration
+                const dx = event.x - this.widgetResizing.init.x
+                this.widgetResizing.current.width = this.widgetResizing.init.width + dx
+                const stepX = this.widgetResizing.widgetEl.clientWidth / (itemCols || 1)
+                const dw = Math.round(this.widgetResizing.current.width / stepX) - this.widgetResizing.init.columns
+                const newColumns = Math.max(this.widgetResizing.init.columns + dw, 1)
+
+                let allowIncrease = false
+                let allowDecrease = false
+                const stepSnapAt = stepX * 0.85
+                if (this.widgetResizing.current.width > this.widgetResizing.widgetEl.clientWidth) {
+                    const diff = this.widgetResizing.current.width - this.widgetResizing.widgetEl.clientWidth
+                    allowIncrease = diff > stepSnapAt
+                } else if (this.widgetResizing.current.width < this.widgetResizing.widgetEl.clientWidth) {
+                    const diff = this.widgetResizing.widgetEl.clientWidth - this.widgetResizing.current.width
+                    allowDecrease = diff > stepSnapAt
+                }
+
+                if (allowIncrease && newColumns > itemCols && newColumns <= this.group.width) {
+                    this.widgetResizing.current.columns = newColumns
+                    console.log('widgetResizing width', { index: this.index, width: newColumns })
+                    item.layout.width = newColumns
+                    item.props.width = newColumns
+                } else if (allowDecrease && newColumns < itemCols && newColumns > 0) {
+                    this.widgetResizing.current.columns = newColumns
+                    console.log('widgetResizing width', { index: this.index, width: newColumns })
+                    item.layout.width = newColumns
+                    item.props.width = newColumns
+                }
+            }
+            if (event.y > 0 && mode === 'ns') {
+                const itemRows = getNumeric(item.props.height) || getNumeric(item.layout.height) || 1 // 1 is the default set in ui_base registration
+                const dy = event.y - this.widgetResizing.init.y
+                this.widgetResizing.current.height = this.widgetResizing.init.height + dy
+                const stepY = this.widgetResizing.widgetEl.clientHeight / (itemRows || 1)
+                const dh = Math.round(this.widgetResizing.current.height / stepY) - this.widgetResizing.init.rows
+                const newRows = Math.max(this.widgetResizing.init.rows + dh, 1)
+
+                let allowIncrease = false
+                let allowDecrease = false
+                const stepSnapAt = stepY * 0.85
+                if (this.widgetResizing.current.height > this.widgetResizing.widgetEl.clientHeight) {
+                    const diff = this.widgetResizing.current.height - this.widgetResizing.widgetEl.clientHeight
+                    allowIncrease = diff > stepSnapAt
+                } else if (this.widgetResizing.current.height < this.widgetResizing.widgetEl.clientHeight) {
+                    const diff = this.widgetResizing.widgetEl.clientHeight - this.widgetResizing.current.height
+                    allowDecrease = diff > stepSnapAt
+                }
+
+                if (allowIncrease && newRows > itemRows /* && newRows <= this.group.height */) {
+                    this.widgetResizing.current.rows = newRows
+                    console.log('widgetResizing height', { index: this.index, height: newRows })
+                    item.layout.height = newRows
+                    item.props.height = newRows
+                } else if (allowDecrease && newRows < itemRows && newRows > 0) {
+                    this.widgetResizing.current.rows = newRows
+                    console.log('widgetResizing height', { index: this.index, height: newRows })
+                    item.layout.height = newRows
+                    item.props.height = newRows
+                }
+            }
+        },
+        onHandleDragEnd (/** @type {DragEvent} */ event, index, type, item, mode) {
+            if (this.groupResizing.active === false && this.widgetResizing.active === false) { return }
             this.resetDragState()
         },
         resetDragState () {
-            this.resizing.active = false
-            this.resizing.parent = null
-            this.resizing.current.width = null
-            this.resizing.current.columns = null
-            this.resizing.current.rows = null
-        },
-        onGroupResize (opts) {
-            // ensure opts.width is a number and is greater than 0
-            if (typeof opts.width !== 'number' || opts.width < 1) {
-                return
-            }
-            this.pageGroups[opts.index].width = opts.width
+            this.groupResizing.active = false
+            this.groupResizing.parent = null
+            this.groupResizing.current.width = null
+            this.groupResizing.current.columns = null
+            this.groupResizing.current.rows = null
+
+            this.widgetResizing.active = false
+            this.widgetResizing.widgetId = null
+            this.widgetResizing.parentEl = null
+            this.widgetResizing.widgetEl = null
+            this.widgetResizing.current.width = null
+            this.widgetResizing.current.height = null
+            this.widgetResizing.current.columns = null
+            this.widgetResizing.current.rows = null
         }
     }
 }
diff --git a/ui/src/layouts/wysiwyg/resizable.scss b/ui/src/layouts/wysiwyg/resizable.scss
index a5c365956..c3f071140 100644
--- a/ui/src/layouts/wysiwyg/resizable.scss
+++ b/ui/src/layouts/wysiwyg/resizable.scss
@@ -4,61 +4,108 @@
     height: 100%;
     top: 0;
     left: 0;
-    --handler-size: 12px;
+    --handle-size: 8px;
+    --handle-opacity: 0.25; // initially mostly transparent - updated in hover
+    --handle-accent: transparent; // initially no accent color - updated in hover
+    /* transitions to match vuetify cards/buttons etc */ 
+    transition-property: box-shadow, transform, opacity, border;
+    transition-duration: 0.15s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    border-color: 0px dashed transparent;
+    border: 1px dashed #bcbcbc;
     cursor: grab;
     &.resizing {
+        z-index: 1000 !important;
         background-color: #ff00001f;
         border: 1px dashed red;
     }
+    &:hover, &:active {
+        border: 1px dashed red;
+        --handle-opacity: 1;
+        --handle-accent: red;
+    }
 }
 .nrdb-resizable--handle {
     position: absolute;
-    width: var(--handler-size);
-    height: var(--handler-size);
     background-color: white;
     border: 1px solid black;
-    border-radius: 6px;
-    cursor: ew-resize;
-    &:active {
-        cursor: ew-resize !important;
+    border-radius: 3px;
+    /* transitions to match vuetify cards/buttons etc */ 
+    transition-property: box-shadow, transform, opacity, border-color, background-color;
+    transition-duration: 0.15s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    &:hover, &:active {
+        --handle-opacity: 1;
+        --handle-accent: red;
+        background-color: #eee;
+        border-color: var(--handle-accent);
     }
 }
-.nrdb-resizable--top-right {
-    top: calc(-1 * var(--handler-size) / 2);
-    right: calc(-1 * var(--handler-size) / 2);
-}
 
 .nrdb-resizable--right {
-    height: calc(2 * var(--handler-size));
+    height: calc(3 * var(--handle-size));
+    width: var(--handle-size);
     top: 50%;
-    margin-top: calc(-1 * var(--handler-size));
-    right: calc(-1 * var(--handler-size) / 2);
+    margin-top: calc(-1.5 * var(--handle-size));
+    right: calc(-1 * var(--handle-size) / 2);
     display: flex;
     justify-content: center;
     align-items: center;
-    &:hover {
-        cursor: ew-resize;
-        background-color: #eee;
-    }
-    &:active {
-        cursor: ew-resize !important;
-    }
+    cursor: ew-resize !important;
+}
+
+.nrdb-resizable--bottom {
+    height: var(--handle-size);
+    width: calc(3 * var(--handle-size));
+    left: 50%;
+    margin-left: calc(-1.5 * var(--handle-size));
+    bottom: calc(-1 * var(--handle-size) / 2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: ns-resize !important;
 }
 
 .nrdb-resizable--right:after {
     content: '';
-    height: calc(0.75 * var(--handler-size));
+    height: calc(0.75 * var(--handle-size));
     width: 1px;
     display: inline-block;
-    background-color: red;
+    background-color: var(--handle-accent);
 }
 
-.nrdb-resizable--bottom-left {
-    bottom: calc(-1 * var(--handler-size) / 2);
-    left: calc(-1 * var(--handler-size) / 2);
+.nrdb-resizable--bottom:after {
+    content: '';
+    height: 1px;
+    width: calc(0.75 * var(--handle-size));
+    display: inline-block;
+    background-color: var(--handle-accent);
 }
 
-.nrdb-resizable--top-left {
-    top: calc(-1 * var(--handler-size) / 2);
-    left: calc(-1 * var(--handler-size) / 2);
+.nrdb-resizable {
+    --toolbar-opacity: 0;
+    &:hover {
+        --toolbar-opacity: 1;
+    }
+    .nrdb-resizable--toolbar {
+        position: absolute;
+        top: 8px;
+        right: 12px;
+        z-index: 101;
+        opacity: var(--toolbar-opacity, 0);
+        &:hover {
+            --toolbar-opacity: 1;
+        }
+        > .nrdb-resizable--toolbar-button {
+            width: 20px; // override theme sizing
+            height: 20px;
+            min-height: 20px;
+            min-width: 20px;
+            cursor: pointer;
+            &:hover {
+                --toolbar-opacity: 1;
+            }
+        }
+    }
 }
+
diff --git a/ui/src/store/index.mjs b/ui/src/store/index.mjs
index f08bf4c7a..3564dc4ec 100644
--- a/ui/src/store/index.mjs
+++ b/ui/src/store/index.mjs
@@ -4,12 +4,14 @@ import { createStore } from 'vuex'
 import ui from './ui.mjs'
 import data from './data.mjs'
 import setup from './setup.mjs'
+import wysiwyg from './wysiwyg.mjs'
 
 export default createStore({
     modules: {
         ui,
         data,
-        setup
+        setup,
+        wysiwyg
     },
     plugins: []
 })
diff --git a/ui/src/store/ui.mjs b/ui/src/store/ui.mjs
index 79823e624..8a41f8b41 100644
--- a/ui/src/store/ui.mjs
+++ b/ui/src/store/ui.mjs
@@ -1,9 +1,40 @@
+/**
+ * @typedef {Object} Group
+ * @property {string} id - the group ID
+ * @property {'ui-group'} type
+ * @property {string} page - owner page ID
+ * @property {*} [*] - Other group properties
+ */
+/**
+ * @typedef {Object} Widget
+ * @property {string} id - the widget ID
+ * @property {string} type - the widget type e.g. ui-button, ui-text, ui-template
+ * @property {Object} props - the widget properties (typically the node properties)
+ * @property {Object} layout - the widget layout properties
+ * @property {Number | String} layout.order - order of the widget in the group
+ * @property {Number | String} layout.width - width of the widget in the group
+ * @property {Number | String} layout.height - height of the widget in the group
+ * @property {Object} state
+ * @property {Object} component
+ */
+/**
+ * @typedef {Object.<string, Widget>} Widgets - Widget ID to Widget lookup as per ui store state format
+ */
+/**
+ * @typedef {Array<Group>} PageGroups - Array of Group on the current given page
+ */
+/**
+ * @typedef {Object.<string, Array<Widget>} PageGroupsWidgets - Look up of Group ID to Array of Widgets for the current page
+ */
+
 // initial state
 const state = () => ({
     dashboards: null,
     pages: null,
-    groups: null,
     themes: null,
+    /** @type {Widgets} */
+    groups: null,
+    /** @type {Widgets} */
     widgets: null
 })
 
@@ -112,7 +143,6 @@ const getters = {
 
             // 4. Flatten the grouped data back into a single array
             const sorted = sortedGroups.flatMap((e) => e[1])
-            // sortData2(widgetsInGroup).map(e=>{ return {widgetorder: e.layout.order, ...{ ...(e.props.subflow ||{})}}})
             return sorted
         }
     },
diff --git a/ui/src/store/wysiwyg.mjs b/ui/src/store/wysiwyg.mjs
new file mode 100644
index 000000000..70d014510
--- /dev/null
+++ b/ui/src/store/wysiwyg.mjs
@@ -0,0 +1,324 @@
+import { markRaw } from 'vue'
+
+import { endEditMode, startEditTracking } from '../EditTracking.js'
+import UISpacer from '../widgets/ui-spacer/UISpacer.vue'
+
+// initial state
+const state = () => ({
+    originalGroups: null,
+    originalWidgets: null,
+    shadowWidgets: null // this is used to store widgets that have been removed during an edit session
+})
+
+// getters
+const getters = {
+    // edit time tracking:
+    originalGroups (state) {
+        return state.originalGroups
+    },
+    originalWidgets (state) {
+        return state.originalWidgets
+    },
+    isDirty: (state, getters, rootState) => (pageId, groups = null, widgets = null) => {
+        // when groups are passed in, they are an array of groups, convert to a key-value object
+        if (groups) {
+            groups = flattenPageGroups(groups)
+        }
+        // when widgets are passed in, they are in a nested object {groupId:{ id: widget1, id: widget2 } structure
+        // so we need to flatten them to a key-value object
+        if (widgets) {
+            widgets = flattenPageWidgets(widgets)
+        }
+
+        const originalWidgets = state.originalWidgets || {}
+        const currentWidgets = widgets || rootState.ui.widgets || {}
+        const originalGroups = state.originalGroups || {}
+        const currentGroups = groups || rootState.ui.groups || {}
+
+        let originalGroupsCount = 0
+        let currentGroupsCount = 0
+        let originalWidgetsCount = 0
+        let currentWidgetsCount = 0
+
+        // first filter to only items of interest (those matching the currentGroupId)
+        const originalPageGroups = new Map()
+        const originalPageGroupsWidgets = new Map()
+        const currentPageGroups = new Map()
+        const currentPageGroupsWidgets = new Map()
+        for (const key in originalGroups) {
+            if (originalGroups[key].page === pageId) {
+                originalPageGroups.set(originalGroups[key].id, originalGroups[key])
+                originalGroupsCount++
+            }
+        }
+        for (const key in currentGroups) {
+            if (currentGroups[key].page === pageId) {
+                currentPageGroups.set(currentGroups[key].id, currentGroups[key])
+                currentGroupsCount++
+            }
+        }
+        for (const key in originalWidgets) {
+            if (originalPageGroups.has(originalWidgets[key]?.props?.group)) {
+                originalPageGroupsWidgets.set(originalWidgets[key].id, originalWidgets[key])
+                originalWidgetsCount++
+            }
+        }
+        for (const key in currentWidgets) {
+            if (originalPageGroups.has(currentWidgets[key]?.props?.group)) {
+                currentPageGroupsWidgets.set(currentWidgets[key].id, currentWidgets[key])
+                currentWidgetsCount++
+            }
+        }
+
+        // fast test: if the number of groups or widgets has changed, we are dirty
+        if (originalGroupsCount !== currentGroupsCount) {
+            return true
+        }
+        if (originalWidgetsCount !== currentWidgetsCount) {
+            return true
+        }
+
+        // scan test: compare each group and widget
+        const groupPropertiesToCheck = [
+            (original, current) => +original.width === +current.width,
+            (original, current) => +original.height === +current.height,
+            (original, current) => +original.order === +current.order
+        ]
+        for (let idx = 0; idx < originalGroupsCount.length; idx++) {
+            const originalGroup = originalGroupsCount[idx]
+            const group = currentGroups[originalGroup.id]
+            if (!group) {
+                return true
+            }
+            for (const check of groupPropertiesToCheck) {
+                if (!check(originalGroup, group)) {
+                    return true
+                }
+            }
+        }
+
+        const widgetPropertiesToCheck = [
+            (original, current) => +original.layout?.width === +current.layout?.width,
+            (original, current) => +original.layout?.height === +current.layout?.height,
+            (original, current) => +original.layout?.order === +current.layout?.order,
+            (original, current) => +original.props?.width === +current.props?.width,
+            (original, current) => +original.props?.height === +current.props?.height,
+            (original, current) => +original.props?.order === +current.props?.order
+        ]
+        const pageGroupsWidgetsArray = Array.from(originalPageGroupsWidgets.values())
+        for (let idx = 0; idx < originalWidgetsCount; idx++) {
+            const originalWidget = pageGroupsWidgetsArray[idx]
+            const widget = currentWidgets[originalWidget.id]
+            if (!widget) {
+                return true // not found must be dirty
+            }
+            for (const check of widgetPropertiesToCheck) {
+                if (!check(originalWidget, widget)) {
+                    return true
+                }
+            }
+        }
+        return false
+    }
+}
+
+const mutations = {
+    originalGroups (state, groups) {
+        state.originalGroups = groups
+    },
+    originalWidgets (state, widgets) {
+        state.originalWidgets = widgets
+    },
+    // addWidget (state, widget) {
+    //     state.widgets[widget.id] = widget
+    // },
+    // removeWidget (state, widgetId) {
+    //     state.shadowWidgets[widgetId] = state.widgets[widgetId]
+    //     delete state.widgets[widgetId]
+    // },
+    shadowWidgets (state, widgets) {
+        state.shadowWidgets = widgets
+    }
+}
+const actions = {
+    addSpacer ({ rootState, state, commit }, { group, name, order, height, width }) {
+        console.log('addSpacer', group, name, order, height, width)
+        if (!group) {
+            throw new Error('group is required')
+        }
+        // ensure group exists in state.groups
+        if (!rootState.ui.groups[group]) {
+            throw new Error('group does not exist')
+        }
+
+        const widget = {
+            id: newId(),
+            type: 'ui-spacer',
+            name: 'spacer',
+            component: markRaw(UISpacer),
+            props: {
+                group,
+                name: name || 'spacer',
+                tooltip: '',
+                order: order ?? 0,
+                width: width ?? 1,
+                height: height ?? 1,
+                className: '',
+                _users: [],
+                enabled: true,
+                visible: true
+            },
+            layout: {
+                order: order ?? 0,
+                width: width ?? 1,
+                height: height ?? 1
+            },
+            state: { enabled: true, visible: true, class: '' }
+        }
+        rootState.ui.widgets[widget.id] = widget
+        commit('ui/widgets', rootState.ui.widgets, { root: true })
+        return widget
+    },
+    removeWidget ({ rootState, state, commit }, payload) {
+        state.shadowWidgets[payload.id] = rootState.ui.widgets[payload.id]
+        delete rootState.ui.widgets[payload.id]
+        commit('ui/widgets', rootState.ui.widgets, { root: true })
+    },
+    /**
+     * @param {import('vuex').ActionContext} context
+     * @param {Object} payload
+     * @param {import('./ui.mjs').Groups} payload.groups
+     * @param {import('./ui.mjs').Widgets} payload.widgets
+     */
+    beginEditTracking ({ dispatch, state }, { groups, widgets }) {
+        console.log('beginEditTracking')
+        startEditTracking() // EditTracking method
+        dispatch('updateEditTracking', { groups, widgets })
+        state.shadowWidgets = {}
+    },
+    /**
+     * @param {import('vuex').ActionContext} context
+     * @param {Object} payload
+     * @param {Array<import('./ui.mjs').Groups>} payload.groups
+     * @param {import('./ui.mjs').GroupsWidgets} payload.widgets
+     */
+    updateEditTracking ({ commit }, { groups, widgets }) {
+        console.log('updateEditTracking')
+        commit('originalGroups', JSON.parse(JSON.stringify(flattenPageGroups(groups))))
+        const slimCopy = {}
+        /** @type {import('./ui.mjs').Widgets} */
+        const src = flattenPageWidgets(widgets)
+        for (const key in src) {
+            const w = src[key]
+            slimCopy[key] = {
+                id: w.id,
+                type: w.type,
+                props: { ...w.props },
+                layout: { ...w.layout }
+            }
+        }
+        commit('originalWidgets', slimCopy)
+    },
+    revertEdits ({ rootState, state, commit }) {
+        console.log('revertEdits')
+        const uiWidgets = rootState.ui.widgets
+        const uiGroups = rootState.ui.groups
+        const groupPropertiesOfInterest = ['width', 'height', 'order']
+        for (const key in uiGroups) {
+            const existingGroup = uiGroups[key]
+            const originalGroup = state.originalGroups[key]
+            if (!originalGroup) {
+                // group was added, remove it
+                delete uiGroups[key]
+            }
+            if (originalGroup) {
+                for (const prop of groupPropertiesOfInterest) {
+                    existingGroup[prop] = originalGroup[prop]
+                }
+            }
+        }
+
+        /** @type {Widgets} */
+        const originalWidgets = state.originalWidgets
+        const widgetLayoutPropertiesOfInterest = ['width', 'height', 'order']
+        const widgetPropsPropertiesOfInterest = ['width', 'height', 'order']
+        for (const key in originalWidgets) {
+            const originalWidget = originalWidgets[key]
+            if (!uiWidgets[key] && originalWidget) {
+                // widget was removed, bring it back
+                uiWidgets[key] = state.shadowWidgets[key]
+            }
+            if (uiWidgets[key] && !originalWidget) {
+                // widget was added, remove it
+                delete uiWidgets[key]
+            }
+            if (uiWidgets[key] && originalWidget) {
+                for (const prop of widgetPropsPropertiesOfInterest) {
+                    uiWidgets[key].props[prop] = originalWidget.props[prop]
+                }
+                for (const prop of widgetLayoutPropertiesOfInterest) {
+                    uiWidgets[key].layout[prop] = originalWidget.layout[prop]
+                }
+            }
+        }
+        // now scan for widgets that were added to uiWidgets and do not exist in originalWidgets
+        for (const key in uiWidgets) {
+            if (!originalWidgets[key]) {
+                delete uiWidgets[key]
+            }
+        }
+        commit('shadowWidgets', {}) // reset the shadow widgets since we have reverted the changes
+        commit('ui/widgets', uiWidgets, { root: true })
+        commit('ui/groups', uiGroups, { root: true })
+    },
+    endEditTracking ({ commit }) {
+        console.log('endEditTracking')
+        endEditMode() // EditTracking method
+        commit('originalGroups', null)
+        commit('originalWidgets', null)
+        commit('shadowWidgets', null)
+    }
+}
+
+function newId () {
+    return Date.now().toString(16).slice(2, 10) + Math.random().toString(16).slice(2, 10)
+}
+
+/**
+ * Flattens the PageGroups array to a flat lookup object
+ * @param {import('./ui.mjs').PageGroups} groups
+ * @returns {Object.<string, Group>}
+ */
+function flattenPageGroups (groups) {
+    const flat = {}
+    for (const key in groups) {
+        const g = groups[key]
+        flat[g.id] = g
+    }
+    return flat
+}
+
+/**
+ * Flattens the PageGroupsWidgets object to a flat lookup object
+ * @param {import('./ui.mjs').PageGroupsWidgets} groupWidgets
+ * @returns {Object.<string, Widget>} - Widget ID to Widget lookup
+ */
+function flattenPageWidgets (groupWidgets) {
+    const flat = {}
+    for (const groupId in groupWidgets) {
+        const widgets = groupWidgets[groupId]
+        for (let idx = 0; idx < widgets.length; idx++) {
+            const w = widgets[idx]
+            flat[w.id] = w
+        }
+    }
+    return flat
+}
+
+export default {
+    namespaced: true,
+    actions,
+    state,
+    getters,
+    mutations
+}
diff --git a/ui/src/stylesheets/common.css b/ui/src/stylesheets/common.css
index c2a719a4a..eea80c9c2 100644
--- a/ui/src/stylesheets/common.css
+++ b/ui/src/stylesheets/common.css
@@ -491,12 +491,22 @@ NB! supresses the gridarea for messages, but those are not in use*/
 .nrdb-ui-group.dragging {
     border-style: dashed;
 }
+.nrdb-ui-widget.dragging {
+    border-style: dashed;
+}
 
 .nrdb-ui-group.drag-start {
     opacity: 0.8;
     outline: 2px dashed black;
 }
 
+.nrdb-resizable-widget.drag-start,
+.nrdb-ui-widget.drag-start {
+    opacity: 0.8;
+    outline: 2px dashed black;
+}
+
+
 .nrdb-ui-page > .nrdb-ui-group[draggable="true"] > .v-card.resize-active {
      /*
         ensure card is on top while being actively resized
diff --git a/ui/src/widgets/ui-spacer/UISpacer.vue b/ui/src/widgets/ui-spacer/UISpacer.vue
index 53903c480..fae29098d 100644
--- a/ui/src/widgets/ui-spacer/UISpacer.vue
+++ b/ui/src/widgets/ui-spacer/UISpacer.vue
@@ -33,10 +33,12 @@ export default {
 .nrdb-edit-mode .nrdb-spacer:before {
     content: v-bind(placeholderText);
     font-style: italic;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    display: grid;           /* Switch from flex to grid for wrapped text center aligned support */
+    place-items: center;     /* Centers content both horizontally and vertically */
     height: 100%;
     color: #0049ff75;
+    white-space: normal;     /* Allows wrapping */
+    text-align: center;      /* Ensures wrapped text is centered */
+    font-size: 0.8em
 }
 </style>