diff --git a/packages/analytics/analytics-utilities/src/dashboardSchema.ts b/packages/analytics/analytics-utilities/src/dashboardSchema.ts
index 89897cf0a4..1ae6c8c38b 100644
--- a/packages/analytics/analytics-utilities/src/dashboardSchema.ts
+++ b/packages/analytics/analytics-utilities/src/dashboardSchema.ts
@@ -496,6 +496,10 @@ export const tileConfigSchema = {
   properties: {
     definition: tileDefinitionSchema,
     layout: tileLayoutSchema,
+    id: {
+      type: 'string',
+      description: 'Unique identifier for the tile.  If not provided, one will be generated.',
+    },
   },
   required: ['definition', 'layout'],
   additionalProperties: false,
diff --git a/packages/analytics/dashboard-renderer/package.json b/packages/analytics/dashboard-renderer/package.json
index 0ec8952c8c..73d076d140 100644
--- a/packages/analytics/dashboard-renderer/package.json
+++ b/packages/analytics/dashboard-renderer/package.json
@@ -66,7 +66,7 @@
     "extends": "../../../package.json"
   },
   "distSizeChecker": {
-    "errorLimit": "512KB"
+    "errorLimit": "600KB"
   },
   "peerDependencies": {
     "@kong-ui-public/analytics-chart": "workspace:^",
diff --git a/packages/analytics/dashboard-renderer/sandbox/index.ts b/packages/analytics/dashboard-renderer/sandbox/index.ts
index 5698f2ef3c..11c25d0f20 100644
--- a/packages/analytics/dashboard-renderer/sandbox/index.ts
+++ b/packages/analytics/dashboard-renderer/sandbox/index.ts
@@ -20,6 +20,11 @@ const router = createRouter({
       name: 'home',
       component: () => import('./pages/RendererDemo.vue'),
     },
+    {
+      path: '/editable',
+      name: 'editable',
+      component: () => import('./pages/EditableDashboardDemo.vue'),
+    },
     {
       path: '/',
       name: 'dynamic',
@@ -39,6 +44,10 @@ const appLinks: SandboxNavigationItem[] = ([
     name: 'Static Dashboard',
     to: { name: 'home' },
   },
+  {
+    name: 'Editable Dashboard',
+    to: { name: 'editable' },
+  },
   {
     name: 'Dynamic Dashboard',
     to: { name: 'dynamic' },
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue
index 0ab1e67073..ffde761832 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue
@@ -171,6 +171,7 @@ const context: DashboardRendererContext = {
     type: 'relative',
     time_range: '24h',
   },
+  editable: true,
 }
 
 const handleUpdateTiles = (tiles: any) => {
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue
new file mode 100644
index 0000000000..4d8ddfed3c
--- /dev/null
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue
@@ -0,0 +1,245 @@
+<template>
+  <SandboxLayout
+    :links="appLinks"
+    title="Editable Dashboard"
+  >
+    <div class="sandbox-container">
+      <br>
+      <div style="display: flex; gap: 5px; margin: 5px;">
+        <KButton
+          appearance="primary"
+          size="small"
+          @click="refresh"
+        >
+          refresh
+        </KButton>
+        <KButton
+          size="small"
+          @click="addTile"
+        >
+          Add tile
+        </KButton>
+      </div>
+      <DashboardRenderer
+        ref="dashboardRendererRef"
+        :config="dashboardConfig"
+        :context="context"
+        @edit-tile="onEditTile"
+        @update-tiles="onUpdateTiles"
+      >
+        <template #slot-1>
+          <div class="slot-container">
+            <h3>Custom Slot</h3>
+            <p>This is a slotted tile</p>
+          </div>
+        </template>
+        <template #slot-2>
+          <div class="slot-container">
+            <h3>Custom Slot 2</h3>
+            <p>This is another slotted tile</p>
+          </div>
+        </template>
+      </DashboardRenderer>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import type { DashboardRendererContext, GridTile } from '../../src'
+import { DashboardRenderer } from '../../src'
+import { inject, ref } from 'vue'
+import type {
+  DashboardConfig,
+  DashboardTileType,
+  ExploreAggregations,
+  TileConfig,
+  TileDefinition,
+} from '@kong-ui-public/analytics-utilities'
+import type { SandboxNavigationItem } from '@kong-ui-public/sandbox-layout'
+import { SandboxLayout } from '@kong-ui-public/sandbox-layout'
+import '@kong-ui-public/sandbox-layout/dist/style.css'
+
+const appLinks: SandboxNavigationItem[] = inject('app-links', [])
+
+const context: DashboardRendererContext = {
+  filters: [],
+  refreshInterval: 0,
+  editable: true,
+}
+
+const dashboardConfig = ref <DashboardConfig>({
+  gridSize: {
+    cols: 6,
+    rows: 7,
+  },
+  tileHeight: 167,
+  tiles: [
+    {
+      id: crypto.randomUUID(),
+      definition: {
+        chart: {
+          type: 'horizontal_bar',
+          chartTitle: 'This is a really long title lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+          allowCsvExport: true,
+        },
+        query: {
+          datasource: 'advanced',
+          dimensions: ['route'],
+          metrics: ['request_count'],
+          time_range: {
+            type: 'relative',
+            time_range: '1h',
+          },
+        },
+      },
+      layout: {
+        position: {
+          col: 0,
+          row: 0,
+        },
+        size: {
+          cols: 3,
+          rows: 2,
+        },
+      },
+    } satisfies TileConfig,
+    {
+      id: crypto.randomUUID(),
+      definition: {
+        chart: {
+          type: 'timeseries_line',
+          chartTitle: 'Timeseries line chart of mock data',
+          threshold: {
+            'request_count': 3200,
+          } as Record<ExploreAggregations, number>,
+        },
+        query: {
+          datasource: 'basic',
+          dimensions: ['time'],
+          time_range: {
+            type: 'absolute',
+            start: '2024-01-01',
+            end: '2024-02-01',
+          },
+        },
+      },
+      layout: {
+        position: {
+          col: 3,
+          row: 0,
+        },
+        size: {
+          cols: 3,
+          rows: 2,
+        },
+      },
+    } satisfies TileConfig,
+    {
+      id: crypto.randomUUID(),
+      definition: {
+        chart: {
+          type: 'timeseries_bar',
+          chartTitle: 'Timeseries bar chart of mock data',
+          stacked: true,
+        },
+        query: {
+          datasource: 'basic',
+          dimensions: ['time'],
+        },
+      },
+      layout: {
+        position: {
+          col: 0,
+          row: 3,
+        },
+        size: {
+          cols: 3,
+          rows: 2,
+        },
+      },
+    } satisfies TileConfig,
+  ],
+})
+
+const onEditTile = (tile: GridTile<TileDefinition>) => {
+  console.log('@edit-tile', tile)
+
+  const chartTypeToggleMap = {
+    timeseries_line: 'timeseries_bar',
+    timeseries_bar: 'timeseries_line',
+    horizontal_bar: 'vertical_bar',
+    vertical_bar: 'horizontal_bar',
+    gauge: 'gauge',
+    golden_signals: 'golden_signals',
+    slottable: 'slottable',
+    top_n: 'top_n',
+  }
+
+  dashboardConfig.value.tiles = dashboardConfig.value.tiles.map(t => {
+
+    const newType = chartTypeToggleMap[t.definition.chart.type] || t.definition.chart.type
+
+    if (t.id === tile.id) {
+      return {
+        ...t,
+        definition: {
+          ...t.definition,
+          chart: {
+            ...t.definition.chart,
+            type: newType as DashboardTileType,
+            chartTitle: `This is a ${newType} chart`,
+          } as any,
+        },
+      }
+    }
+    return t
+  })
+}
+
+const dashboardRendererRef = ref<InstanceType<typeof DashboardRenderer> | null>(null)
+
+
+const refresh = () => {
+  dashboardRendererRef.value?.refresh()
+}
+let last = 0
+const addTile = () => {
+  last = (last + 1) % 2
+  dashboardConfig.value.tiles.push({
+    id: crypto.randomUUID(),
+    definition: {
+      chart: {
+        type: ['timeseries_line', 'timeseries_bar'][last] as any,
+        chartTitle: 'Timeseries line chart of mock data',
+        threshold: {
+          'request_count': 3200,
+        } as Record<ExploreAggregations, number>,
+      },
+      query: {
+        datasource: 'basic',
+        dimensions: ['time'],
+        time_range: {
+          type: 'absolute',
+          start: '2024-01-01',
+          end: '2024-02-01',
+        },
+      },
+    },
+    layout: {
+      position: {
+        col: 0,
+        row: 0,
+      },
+      size: {
+        cols: 3,
+        rows: 2,
+      },
+    },
+  })
+}
+
+const onUpdateTiles = (tiles: TileConfig[]) => {
+  console.log('@update-tiles', tiles)
+  dashboardConfig.value.tiles = tiles
+}
+</script>
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index 5607268dc6..58124da3ab 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -10,20 +10,20 @@
         :label="isToggled ? 'Custom styling' : 'Normal styling'"
       />
       <br>
-      <KButton
-        appearance="primary"
-        size="small"
-        @click="refresh"
-      >
-        refresh
-      </KButton>
+      <div style="display: flex; gap: 5px; margin: 5px;">
+        <KButton
+          appearance="primary"
+          size="small"
+          @click="refresh"
+        >
+          refresh
+        </KButton>
+      </div>
       <DashboardRenderer
         ref="dashboardRendererRef"
         :class="{ 'custom-styling': isToggled}"
         :config="dashboardConfig"
         :context="context"
-        draggable
-        @edit-tile="onEditTile"
       >
         <template #slot-1>
           <div class="slot-container">
@@ -43,14 +43,13 @@
 </template>
 
 <script setup lang="ts">
-import type { DashboardRendererContext, GridTile } from '../../src'
+import type { DashboardRendererContext } from '../../src'
 import { DashboardRenderer } from '../../src'
 import { inject, ref } from 'vue'
 import type {
   DashboardConfig,
   ExploreAggregations,
   TileConfig,
-  TileDefinition,
 } from '@kong-ui-public/analytics-utilities'
 import type { SandboxNavigationItem } from '@kong-ui-public/sandbox-layout'
 import { SandboxLayout } from '@kong-ui-public/sandbox-layout'
@@ -61,10 +60,9 @@ const appLinks: SandboxNavigationItem[] = inject('app-links', [])
 const context: DashboardRendererContext = {
   filters: [],
   refreshInterval: 0,
-  editable: true,
 }
 
-const dashboardConfig: DashboardConfig = {
+const dashboardConfig = ref <DashboardConfig>({
   gridSize: {
     cols: 6,
     rows: 7,
@@ -291,75 +289,11 @@ const dashboardConfig: DashboardConfig = {
         },
       },
     } satisfies TileConfig,
-    {
-      definition: {
-        chart: {
-          type: 'timeseries_line',
-          chartTitle: 'Timeseries line chart of mock data',
-          threshold: {
-            'request_count': 3200,
-          } as Record<ExploreAggregations, number>,
-        },
-        query: {
-          datasource: 'basic',
-          dimensions: ['time'],
-          time_range: {
-            type: 'absolute',
-            start: '2024-01-01',
-            end: '2024-02-01',
-          },
-        },
-      },
-      layout: {
-        position: {
-          col: 0,
-          row: 7,
-        },
-        size: {
-          cols: 3,
-          rows: 2,
-        },
-      },
-    } satisfies TileConfig,
-    {
-      definition: {
-        chart: {
-          type: 'timeseries_line',
-          chartTitle: 'Timeseries line chart of mock data',
-          threshold: {
-            'request_count': 3200,
-          } as Record<ExploreAggregations, number>,
-        },
-        query: {
-          datasource: 'basic',
-          dimensions: ['time'],
-          time_range: {
-            type: 'absolute',
-            start: '2024-01-01',
-            end: '2024-02-01',
-          },
-        },
-      },
-      layout: {
-        position: {
-          col: 0,
-          row: 9,
-        },
-        size: {
-          cols: 3,
-          rows: 2,
-        },
-      },
-    } satisfies TileConfig,
   ],
-}
+})
 
 const isToggled = ref(false)
 
-const onEditTile = (tile: GridTile<TileDefinition>) => {
-  console.log('@edit-tile', tile)
-}
-
 const dashboardRendererRef = ref<InstanceType<typeof DashboardRenderer> | null>(null)
 
 
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
index 8d55ca6443..1f33c2db16 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
@@ -603,6 +603,7 @@ describe('<DashboardRenderer />', () => {
         tileHeight: 167,
         tiles: [
           {
+            id: 0,
             definition: {
               chart: {
                 type: 'timeseries_line',
@@ -639,6 +640,7 @@ describe('<DashboardRenderer />', () => {
             },
           } as unknown as TileConfig, // TODO: MA-2987: Remove default datasource concept and associated tests.
           {
+            id: 1,
             definition: {
               chart: {
                 type: 'timeseries_line',
@@ -672,6 +674,7 @@ describe('<DashboardRenderer />', () => {
             },
           } as unknown as TileConfig, // TODO: MA-2987: Remove default datasource concept and associated tests.
           {
+            id: 2,
             definition: {
               chart: {
                 type: 'timeseries_line',
@@ -699,6 +702,7 @@ describe('<DashboardRenderer />', () => {
             },
           } as unknown as TileConfig, // TODO: MA-2987: Remove default datasource concept and associated tests.
           {
+            id: 3,
             definition: {
               chart: {
                 type: 'top_n',
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index 01962675ec..8c098576a0 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -7,8 +7,9 @@
       {{ i18n.t('renderer.noQueryBridge') }}
     </KAlert>
     <component
-      :is="draggable ? DraggableGridLayout : GridLayout"
+      :is="context.editable ? DraggableGridLayout : GridLayout"
       v-else
+      ref="gridLayoutRef"
       :grid-size="config.gridSize"
       :tile-height="config.tileHeight"
       :tiles="gridTiles"
@@ -31,6 +32,7 @@
           :refresh-counter="refreshCounter"
           :tile-id="tile.id"
           @edit-tile="onEditTile(tile)"
+          @remove-tile="onRemoveTile(tile)"
         />
       </template>
     </component>
@@ -42,9 +44,11 @@ import type { DashboardRendererContext, DashboardRendererContextInternal, GridTi
 import type { DashboardConfig, TileConfig, TileDefinition } from '@kong-ui-public/analytics-utilities'
 import DashboardTile from './DashboardTile.vue'
 import { computed, inject, ref } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 import composables from '../composables'
 import GridLayout from './layout/GridLayout.vue'
 import DraggableGridLayout from './layout/DraggableGridLayout.vue'
+import type { DraggableGridLayoutExpose } from './layout/DraggableGridLayout.vue'
 import type { AnalyticsBridge, TimeRangeV4 } from '@kong-ui-public/analytics-utilities'
 import {
   DEFAULT_TILE_HEIGHT,
@@ -55,13 +59,10 @@ import {
 import { useAnalyticsConfigStore } from '@kong-ui-public/analytics-config-store'
 import { KUI_SPACE_70 } from '@kong/design-tokens'
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
   context: DashboardRendererContext,
   config: DashboardConfig,
-  draggable?: boolean,
-}>(), {
-  draggable: false,
-})
+}>()
 
 const emit = defineEmits<{
   (e: 'edit-tile', tile: GridTile<TileDefinition>): void
@@ -70,6 +71,7 @@ const emit = defineEmits<{
 
 const { i18n } = composables.useI18n()
 const refreshCounter = ref(0)
+const gridLayoutRef = ref<ComponentPublicInstance<DraggableGridLayoutExpose> | null>(null)
 
 // Note: queryBridge is not directly used by the DashboardRenderer component.  It is required by many of the
 // subcomponents that get rendered in the dashboard, however.  Check for its existence here in order to catch
@@ -135,11 +137,19 @@ const gridTiles = computed(() => {
       }
     }
 
+    if (props.context.editable && !tile.id) {
+      console.warn(
+        'No id provided for tile. One will be generated automatically,',
+        'however tracking changes to this tile may not work as expected.',
+        tile,
+      )
+    }
+
     return {
       layout: tile.layout,
       meta: tileMeta,
       // Add a unique key to each tile internally.
-      id: i,
+      id: tile.id ?? crypto.randomUUID(),
     } as GridTile<TileDefinition>
   })
 })
@@ -176,6 +186,12 @@ const onEditTile = (tile: GridTile<TileDefinition>) => {
   emit('edit-tile', tile)
 }
 
+const onRemoveTile = (tile: GridTile<TileDefinition>) => {
+  if (gridLayoutRef.value) {
+    gridLayoutRef.value.removeWidget(tile.id)
+  }
+}
+
 const refreshTiles = () => {
   refreshCounter.value++
 }
@@ -183,6 +199,7 @@ const refreshTiles = () => {
 const handleUpdateTiles = (tiles: GridTile<TileDefinition>[]) => {
   const updatedTiles = tiles.map(tile => {
     return {
+      id: tile.id,
       layout: tile.layout,
       definition: tile.meta,
     } as TileConfig
@@ -201,7 +218,6 @@ defineExpose({ refresh: refreshTiles })
     border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
     height: 100%;
-    padding: 0 var(--kui-space-70, $kui-space-70) var(--kui-space-70, $kui-space-70) var(--kui-space-70, $kui-space-70);
   }
 }
 </style>
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index cee7560e0c..ccf12ab911 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="tile-boundary"
+    :class="{ 'editable': context.editable }"
     :data-testid="`tile-${tileId}`"
   >
     <div
@@ -67,6 +68,13 @@
                 {{ i18n.t('csvExport.exportAsCsv') }}
               </span>
             </KDropdownItem>
+            <KDropdownItem
+              v-if="context.editable"
+              :data-testid="`remove-tile-${tileId}`"
+              @click="removeTile"
+            >
+              {{ i18n.t('renderer.remove') }}
+            </KDropdownItem>
           </template>
         </KDropdown>
       </div>
@@ -133,6 +141,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (e: 'edit-tile', tile: TileDefinition): void
+  (e: 'remove-tile', tile: TileDefinition): void
 }>()
 
 const queryBridge: AnalyticsBridge | undefined = inject(INJECT_QUERY_PROVIDER)
@@ -231,6 +240,10 @@ const editTile = () => {
   emit('edit-tile', props.definition)
 }
 
+const removeTile = () => {
+  emit('remove-tile', props.definition)
+}
+
 const onChartData = (data: ExploreResultV4) => {
   chartData.value = data
 }
@@ -251,13 +264,17 @@ const exportCsv = () => {
   height: v-bind('`${height}px`');
   overflow: hidden;
 
+  &.editable:hover {
+    .tile-header {
+      background: $kui-color-background-neutral-weakest;
+    }
+  }
+
   .tile-header {
     align-items: center;
     display: flex;
     justify-content: space-between;
-    margin-bottom: var(--kui-space-30, $kui-space-30);
-    // So any "handlers" for the tile header includes the padding
-    padding-top: var(--kui-space-70, $kui-space-70);
+    padding: var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60) var(--kui-space-20, $kui-space-20) var(--kui-space-60, $kui-space-60);
     right: 0;
     width: 100%;
 
@@ -320,6 +337,7 @@ const exportCsv = () => {
 
   .tile-content {
     flex-grow: 1;
+    margin: var(--kui-space-20, $kui-space-20) var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60);
     overflow: hidden;
   }
 }
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index ace7b54fa7..6dc309c50e 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -4,11 +4,12 @@
     class="grid-stack"
   >
     <div
-      v-for="(tile, i) in tiles"
-      :key="'tile-' + i"
+      v-for="tile in tilesRef.values()"
+      :key="tile.id"
       class="grid-stack-item"
-      :data-index="i"
+      :data-id="`${tile.id}`"
       :gs-h="tile.layout.size.rows"
+      :gs-lazy-load="true"
       :gs-w="tile.layout.size.cols"
       :gs-x="tile.layout.position.col"
       :gs-y="tile.layout.position.row"
@@ -24,12 +25,17 @@
 </template>
 
 <script lang='ts' setup generic="T">
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
 import { GridStack } from 'gridstack'
+import type { GridItemHTMLElement, GridStackNode } from 'gridstack'
 import type { GridSize, GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
 import 'gridstack/dist/gridstack-extra.min.css'
 
+export type DraggableGridLayoutExpose = {
+  removeWidget: (id: number | string) => void
+}
+
 const props = withDefaults(defineProps<{
   tiles: GridTile<T>[],
   gridSize: GridSize,
@@ -42,33 +48,64 @@ const emit = defineEmits<{
 }>()
 
 const gridContainer = ref<HTMLDivElement | null>(null)
+
+const tilesRef = ref<Map<string, GridTile<any>>>(new Map(props.tiles.map(t => [`${t.id}`, t])))
+
 let grid: GridStack | null = null
 
+const makeSelector = (id: number | string) => {
+  return `[data-id="${id}"]`
+}
+
+const makeTilesFromGridItemHtmlElements = (items: GridItemHTMLElement[]) => {
+  return Array.from(tilesRef.value.values()).map((tile: GridTile<any>) => {
+    const item = items.find(item => {
+      return item.getAttribute('data-id') === `${tile.id}`
+    })
+    if (item) {
+      return {
+        ...tile,
+        layout: {
+          position: { col: Number(item.gridstackNode?.x), row: Number(item.gridstackNode?.y) },
+          size: { cols: Number(item.gridstackNode?.w), rows: Number(item.gridstackNode?.h) },
+        },
+      } satisfies GridTile<T>
+    }
+    return tile
+  })
+}
+
+const updateTiles = () => {
+  if (grid) {
+    const items = grid.getGridItems()
+    const updates = makeTilesFromGridItemHtmlElements(items)
+    updates.forEach((tile) => {
+      tilesRef.value.set(`${tile.id}`, tile)
+    })
+    emit('update-tiles', Array.from(tilesRef.value.values()))
+  }
+}
+
+const removeHandler = (_: Event, items: GridStackNode[]) => {
+  items.forEach(item => {
+    tilesRef.value.delete(`${item.el?.getAttribute('data-id')}`)
+  })
+  emit('update-tiles', Array.from(tilesRef.value.values()))
+}
+
 onMounted(() => {
   if (gridContainer.value) {
     grid = GridStack.init({
       column: props.gridSize.cols,
       cellHeight: props.tileHeight,
-      resizable: { handles: 'se' },
+      resizable: { handles: 'se, sw' },
       lazyLoad: true,
       handle: '.tile-header',
+
     }, gridContainer.value)
-    grid.on('change', (_, items) => {
-      const updatedTiles: GridTile<any>[] = props.tiles.map((tile, i) => {
-        const item = items.find(item => Number(item.el?.getAttribute('data-index')) === i)
-        if (item) {
-          return {
-            ...tile,
-            layout: {
-              position: { col: item.x, row: item.y },
-              size: { cols: item.w, rows: item.h },
-            },
-          } as GridTile<any>
-        }
-        return tile
-      })
-      emit('update-tiles', updatedTiles)
-    })
+    grid.on('change', updateTiles)
+    grid.on('added', updateTiles)
+    grid.on('removed', removeHandler)
   }
 })
 
@@ -78,25 +115,66 @@ onUnmounted(() => {
   }
 })
 
-watch(() => props.tiles, newTiles => {
+const removeWidget = (id: number | string) => {
   if (grid && gridContainer.value) {
-    newTiles.forEach((tile, i) => {
-      const el = gridContainer.value?.querySelector(`[data-index="${i}"]`)
-      if (el) {
-        grid?.update(el as HTMLElement, {
-          x: tile.layout.position.col,
-          y: tile.layout.position.row,
-          w: tile.layout.size.cols,
-          h: tile.layout.size.rows,
+    const el = gridContainer.value.querySelector(makeSelector(id)) as HTMLElement
+    if (el) {
+      grid.removeWidget(el)
+    }
+  }
+}
+
+watch(() => props.tiles.length, async (newLen, oldLen) => {
+  if (newLen > oldLen && grid) {
+    const tileToAdd = props.tiles.slice(oldLen)
+    for (const tile of tileToAdd) {
+      tilesRef.value.set(`${tile.id}`, tile)
+      await nextTick()
+      grid.makeWidget(makeSelector(tile.id), {
+        autoPosition: true,
+        w: tile.layout.size.cols,
+        h: tile.layout.size.rows,
+      })
+    }
+  }
+})
+
+// Gridstack widgets are driven by a copy of props.tiles.
+// If the meta of a tile changes, we need to update the copy to keep it in sync.
+watch(() => props.tiles, (newTiles, oldTiles) => {
+  if (newTiles.length === oldTiles.length) {
+    newTiles.forEach(tile => {
+      const current = tilesRef.value.get(`${tile.id}`)
+      if (current) {
+        tilesRef.value.set(`${tile.id}`, {
+          ...current,
+          meta: tile.meta,
         })
       }
     })
   }
 }, { deep: true })
+
+defineExpose({ removeWidget })
+
 </script>
 
 <style lang="scss" scoped>
 :deep(.tile-header) {
   cursor: move;
 }
+$rotate-values: (
+  'se': 0deg,
+  'sw': 90deg,
+);
+
+@each $direction, $rotate in $rotate-values {
+  :deep(.ui-resizable-#{$direction}) {
+    background-image: url('../../icons/arrows_more_down.svg');
+    cursor: se-resize;
+    margin: 5px;
+    transform: rotate($rotate);
+  }
+}
+
 </style>
diff --git a/packages/analytics/dashboard-renderer/src/icons/arrows_more_down.svg b/packages/analytics/dashboard-renderer/src/icons/arrows_more_down.svg
new file mode 100644
index 0000000000..68f24888d1
--- /dev/null
+++ b/packages/analytics/dashboard-renderer/src/icons/arrows_more_down.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4440_21061" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" transform="matrix(-1 0 0 1 24 0)" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4440_21061)">
+<path d="M19 21V10H17V19H8V21H19ZM14 16V5H12V14H3V16H14Z" fill="#3A3F51"/>
+</g>
+</svg>
diff --git a/packages/analytics/dashboard-renderer/src/locales/en.json b/packages/analytics/dashboard-renderer/src/locales/en.json
index 147e8e63a8..c3837ae13b 100644
--- a/packages/analytics/dashboard-renderer/src/locales/en.json
+++ b/packages/analytics/dashboard-renderer/src/locales/en.json
@@ -6,7 +6,8 @@
       "7d": "Last 7-Day Summary",
       "30d": "Last 30-Day Summary"
     },
-    "edit": "Edit"
+    "edit": "Edit",
+    "remove": "Remove"
   },
   "queryDataProvider": {
     "timeRangeExceeded":  "The time range for this report is outside of your organization's data retention period"