diff --git a/packages/client/src/api/api.ts b/packages/client/src/api/api.ts
index b944f7bd7c..564f401164 100644
--- a/packages/client/src/api/api.ts
+++ b/packages/client/src/api/api.ts
@@ -1,10 +1,6 @@
 import { createAPIClient } from "@budibase/frontend-core"
 import { authStore } from "../stores/auth"
-import {
-  notificationStore,
-  devToolsEnabled,
-  devToolsStore,
-} from "../stores/index"
+import { notificationStore, devToolsEnabled, devToolsStore } from "../stores"
 import { get } from "svelte/store"
 
 export const API = createAPIClient({
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 144b5a8dec..b1ee03e84a 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -6,7 +6,7 @@
   import { Constants, CookieUtils } from "@budibase/frontend-core"
   import { getThemeClassNames } from "@budibase/shared-core"
   import Component from "./Component.svelte"
-  import SDK from "sdk"
+  import SDK from "@/sdk"
   import {
     featuresStore,
     createContextStore,
@@ -22,26 +22,26 @@
     environmentStore,
     sidePanelStore,
     modalStore,
-  } from "stores"
-  import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
-  import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
-  import PeekScreenDisplay from "components/overlay/PeekScreenDisplay.svelte"
-  import UserBindingsProvider from "components/context/UserBindingsProvider.svelte"
-  import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte"
-  import StateBindingsProvider from "components/context/StateBindingsProvider.svelte"
-  import RowSelectionProvider from "components/context/RowSelectionProvider.svelte"
-  import QueryParamsProvider from "components/context/QueryParamsProvider.svelte"
-  import SettingsBar from "components/preview/SettingsBar.svelte"
-  import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
-  import HoverIndicator from "components/preview/HoverIndicator.svelte"
+  } from "@/stores"
+  import NotificationDisplay from "./overlay/NotificationDisplay.svelte"
+  import ConfirmationDisplay from "./overlay/ConfirmationDisplay.svelte"
+  import PeekScreenDisplay from "./overlay/PeekScreenDisplay.svelte"
+  import UserBindingsProvider from "./context/UserBindingsProvider.svelte"
+  import DeviceBindingsProvider from "./context/DeviceBindingsProvider.svelte"
+  import StateBindingsProvider from "./context/StateBindingsProvider.svelte"
+  import RowSelectionProvider from "./context/RowSelectionProvider.svelte"
+  import QueryParamsProvider from "./context/QueryParamsProvider.svelte"
+  import SettingsBar from "./preview/SettingsBar.svelte"
+  import SelectionIndicator from "./preview/SelectionIndicator.svelte"
+  import HoverIndicator from "./preview/HoverIndicator.svelte"
   import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
-  import DNDHandler from "components/preview/DNDHandler.svelte"
-  import GridDNDHandler from "components/preview/GridDNDHandler.svelte"
-  import KeyboardManager from "components/preview/KeyboardManager.svelte"
-  import DevToolsHeader from "components/devtools/DevToolsHeader.svelte"
-  import DevTools from "components/devtools/DevTools.svelte"
-  import FreeFooter from "components/FreeFooter.svelte"
-  import MaintenanceScreen from "components/MaintenanceScreen.svelte"
+  import DNDHandler from "./preview/DNDHandler.svelte"
+  import GridDNDHandler from "./preview/GridDNDHandler.svelte"
+  import KeyboardManager from "./preview/KeyboardManager.svelte"
+  import DevToolsHeader from "./devtools/DevToolsHeader.svelte"
+  import DevTools from "./devtools/DevTools.svelte"
+  import FreeFooter from "./FreeFooter.svelte"
+  import MaintenanceScreen from "./MaintenanceScreen.svelte"
   import SnippetsProvider from "./context/SnippetsProvider.svelte"
   import EmbedProvider from "./context/EmbedProvider.svelte"
   import DNDSelectionIndicators from "./preview/DNDSelectionIndicators.svelte"
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 67f8fdc63c..469df5e2d8 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -20,7 +20,7 @@
     appStore,
     dndComponentPath,
     dndIsDragging,
-  } from "stores"
+  } from "@/stores"
   import { Helpers } from "@budibase/bbui"
   import { getActiveConditions, reduceConditionActions } from "utils/conditions"
   import EmptyPlaceholder from "components/app/EmptyPlaceholder.svelte"
diff --git a/packages/client/src/components/CustomThemeWrapper.svelte b/packages/client/src/components/CustomThemeWrapper.svelte
index f15cd29ed8..61f3b577a8 100644
--- a/packages/client/src/components/CustomThemeWrapper.svelte
+++ b/packages/client/src/components/CustomThemeWrapper.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { themeStore } from "stores"
+  import { themeStore } from "@/stores"
   import { setContext } from "svelte"
   import { Context } from "@budibase/bbui"
 
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index d19585dcec..5e75edfeb8 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -1,7 +1,7 @@
 <script>
   import { setContext, getContext, onMount } from "svelte"
   import Router, { querystring } from "svelte-spa-router"
-  import { routeStore, stateStore } from "stores"
+  import { routeStore, stateStore } from "@/stores"
   import Screen from "./Screen.svelte"
   import { get } from "svelte/store"
 
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index bf91a3a6df..591afc567d 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { screenStore, routeStore, builderStore } from "stores"
+  import { screenStore, routeStore, builderStore } from "@/stores"
   import { get } from "svelte/store"
   import Component from "./Component.svelte"
   import Provider from "./context/Provider.svelte"
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 1f4792ea8a..0d172964ed 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -3,7 +3,7 @@
   // because it functions similarly to one
   import { getContext, onMount } from "svelte"
   import { get, derived, readable } from "svelte/store"
-  import { featuresStore } from "stores"
+  import { featuresStore } from "@/stores"
   import { Grid } from "@budibase/frontend-core"
   import { processStringSync } from "@budibase/string-templates"
 
diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index 6cecf57a2c..b0760783f4 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -2,7 +2,7 @@
   import BlockComponent from "components/BlockComponent.svelte"
   import { Helpers } from "@budibase/bbui"
   import { getContext, setContext } from "svelte"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
   import { get, writable } from "svelte/store"
diff --git a/packages/client/src/components/context/DeviceBindingsProvider.svelte b/packages/client/src/components/context/DeviceBindingsProvider.svelte
index 2bd21d02e7..064704b263 100644
--- a/packages/client/src/components/context/DeviceBindingsProvider.svelte
+++ b/packages/client/src/components/context/DeviceBindingsProvider.svelte
@@ -1,7 +1,7 @@
 <script>
   import Provider from "./Provider.svelte"
   import { onMount, onDestroy } from "svelte"
-  import { themeStore } from "stores"
+  import { themeStore } from "@/stores"
 
   let width = window.innerWidth
   let height = window.innerHeight
diff --git a/packages/client/src/components/context/Provider.svelte b/packages/client/src/components/context/Provider.svelte
index fe4463821e..9856f6f090 100644
--- a/packages/client/src/components/context/Provider.svelte
+++ b/packages/client/src/components/context/Provider.svelte
@@ -1,6 +1,6 @@
 <script>
   import { getContext, setContext, onDestroy } from "svelte"
-  import { dataSourceStore, createContextStore } from "stores"
+  import { dataSourceStore, createContextStore } from "@/stores"
   import { ActionTypes } from "constants"
   import { generate } from "shortid"
 
diff --git a/packages/client/src/components/context/QueryParamsProvider.svelte b/packages/client/src/components/context/QueryParamsProvider.svelte
index 7f111a7043..e972dd9167 100644
--- a/packages/client/src/components/context/QueryParamsProvider.svelte
+++ b/packages/client/src/components/context/QueryParamsProvider.svelte
@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { routeStore } from "stores"
+  import { routeStore } from "@/stores"
 </script>
 
 <Provider key="query" data={$routeStore.queryParams}>
diff --git a/packages/client/src/components/context/RowSelectionProvider.svelte b/packages/client/src/components/context/RowSelectionProvider.svelte
index 2c87a5fa00..da731e6f05 100644
--- a/packages/client/src/components/context/RowSelectionProvider.svelte
+++ b/packages/client/src/components/context/RowSelectionProvider.svelte
@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { rowSelectionStore } from "stores"
+  import { rowSelectionStore } from "@/stores"
 </script>
 
 <Provider key="rowSelection" data={$rowSelectionStore}>
diff --git a/packages/client/src/components/context/SnippetsProvider.svelte b/packages/client/src/components/context/SnippetsProvider.svelte
index 53fa1e8b7f..104147ecf7 100644
--- a/packages/client/src/components/context/SnippetsProvider.svelte
+++ b/packages/client/src/components/context/SnippetsProvider.svelte
@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { snippets } from "stores"
+  import { snippets } from "@/stores"
 </script>
 
 <Provider key="snippets" data={$snippets}>
diff --git a/packages/client/src/components/context/StateBindingsProvider.svelte b/packages/client/src/components/context/StateBindingsProvider.svelte
index a1166594a8..4ef99228c1 100644
--- a/packages/client/src/components/context/StateBindingsProvider.svelte
+++ b/packages/client/src/components/context/StateBindingsProvider.svelte
@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { stateStore } from "stores"
+  import { stateStore } from "@/stores"
 </script>
 
 <Provider key="state" data={$stateStore}>
diff --git a/packages/client/src/components/context/UserBindingsProvider.svelte b/packages/client/src/components/context/UserBindingsProvider.svelte
index 98769cf76a..4cfb804998 100644
--- a/packages/client/src/components/context/UserBindingsProvider.svelte
+++ b/packages/client/src/components/context/UserBindingsProvider.svelte
@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { authStore, currentRole } from "stores"
+  import { authStore, currentRole } from "@/stores"
   import { ActionTypes } from "constants"
   import { Constants } from "@budibase/frontend-core"
 
diff --git a/packages/client/src/components/devtools/DevTools.svelte b/packages/client/src/components/devtools/DevTools.svelte
index bc7625bd57..47e257f6c6 100644
--- a/packages/client/src/components/devtools/DevTools.svelte
+++ b/packages/client/src/components/devtools/DevTools.svelte
@@ -3,7 +3,7 @@
   import { Layout, Heading, Tabs, Tab, Icon } from "@budibase/bbui"
   import DevToolsStatsTab from "./DevToolsStatsTab.svelte"
   import DevToolsComponentTab from "./DevToolsComponentTab.svelte"
-  import { devToolsStore } from "stores"
+  import { devToolsStore } from "@/stores"
 
   const context = getContext("context")
 </script>
diff --git a/packages/client/src/components/devtools/DevToolsComponentContextTab.svelte b/packages/client/src/components/devtools/DevToolsComponentContextTab.svelte
index 3b4c426851..6e020c06f4 100644
--- a/packages/client/src/components/devtools/DevToolsComponentContextTab.svelte
+++ b/packages/client/src/components/devtools/DevToolsComponentContextTab.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Layout, Select, Body } from "@budibase/bbui"
-  import { componentStore } from "stores/index.js"
+  import { componentStore } from "stores/index.ts"
   import DevToolsStat from "./DevToolsStat.svelte"
 
   const ReadableBindingMap = {
diff --git a/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte b/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte
index 809f64ab48..33f6006b7f 100644
--- a/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte
+++ b/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte
@@ -2,7 +2,7 @@
   import { Layout, Toggle } from "@budibase/bbui"
   import { getSettingsDefinition } from "@budibase/frontend-core"
   import DevToolsStat from "./DevToolsStat.svelte"
-  import { componentStore } from "stores/index.js"
+  import { componentStore } from "stores/index.ts"
 
   let showEnrichedSettings = true
 
diff --git a/packages/client/src/components/devtools/DevToolsComponentTab.svelte b/packages/client/src/components/devtools/DevToolsComponentTab.svelte
index a553a78720..6fa12a996b 100644
--- a/packages/client/src/components/devtools/DevToolsComponentTab.svelte
+++ b/packages/client/src/components/devtools/DevToolsComponentTab.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Body, Layout, Heading, Button, Tabs, Tab } from "@budibase/bbui"
-  import { builderStore, devToolsStore, componentStore } from "stores"
+  import { builderStore, devToolsStore, componentStore } from "@/stores"
   import DevToolsStat from "./DevToolsStat.svelte"
   import DevToolsComponentSettingsTab from "./DevToolsComponentSettingsTab.svelte"
   import DevToolsComponentContextTab from "./DevToolsComponentContextTab.svelte"
diff --git a/packages/client/src/components/devtools/DevToolsHeader.svelte b/packages/client/src/components/devtools/DevToolsHeader.svelte
index eca085a88a..dcb884dd28 100644
--- a/packages/client/src/components/devtools/DevToolsHeader.svelte
+++ b/packages/client/src/components/devtools/DevToolsHeader.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Heading, Select, ActionButton } from "@budibase/bbui"
-  import { devToolsStore, appStore } from "../../stores"
+  import { devToolsStore, appStore } from "stores"
   import { getContext, onMount } from "svelte"
   import { API } from "api"
 
diff --git a/packages/client/src/components/devtools/DevToolsStat.svelte b/packages/client/src/components/devtools/DevToolsStat.svelte
index 62dbe6959c..605c67b750 100644
--- a/packages/client/src/components/devtools/DevToolsStat.svelte
+++ b/packages/client/src/components/devtools/DevToolsStat.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Helpers } from "@budibase/bbui"
-  import { notificationStore } from "stores"
+  import { notificationStore } from "@/stores"
 
   export let label
   export let value
diff --git a/packages/client/src/components/devtools/DevToolsStatsTab.svelte b/packages/client/src/components/devtools/DevToolsStatsTab.svelte
index bc0b1a562b..2036226863 100644
--- a/packages/client/src/components/devtools/DevToolsStatsTab.svelte
+++ b/packages/client/src/components/devtools/DevToolsStatsTab.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Layout } from "@budibase/bbui"
-  import { authStore, appStore, screenStore, componentStore } from "stores"
+  import { authStore, appStore, screenStore, componentStore } from "@/stores"
   import DevToolsStat from "./DevToolsStat.svelte"
 </script>
 
diff --git a/packages/client/src/components/overlay/ConfirmationDisplay.svelte b/packages/client/src/components/overlay/ConfirmationDisplay.svelte
index b96af502df..823c1c1ab2 100644
--- a/packages/client/src/components/overlay/ConfirmationDisplay.svelte
+++ b/packages/client/src/components/overlay/ConfirmationDisplay.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { confirmationStore } from "stores"
+  import { confirmationStore } from "@/stores"
   import { Modal, ModalContent } from "@budibase/bbui"
 </script>
 
diff --git a/packages/client/src/components/overlay/NotificationDisplay.svelte b/packages/client/src/components/overlay/NotificationDisplay.svelte
index 46b3a2a6a1..28f4b33433 100644
--- a/packages/client/src/components/overlay/NotificationDisplay.svelte
+++ b/packages/client/src/components/overlay/NotificationDisplay.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { notificationStore } from "stores"
+  import { notificationStore } from "@/stores"
   import { Notification } from "@budibase/bbui"
   import { fly } from "svelte/transition"
 </script>
diff --git a/packages/client/src/components/overlay/PeekScreenDisplay.svelte b/packages/client/src/components/overlay/PeekScreenDisplay.svelte
index 6e0fa81b43..17a92797d5 100644
--- a/packages/client/src/components/overlay/PeekScreenDisplay.svelte
+++ b/packages/client/src/components/overlay/PeekScreenDisplay.svelte
@@ -5,7 +5,7 @@
     notificationStore,
     routeStore,
     stateStore,
-  } from "stores"
+  } from "@/stores"
   import { Modal, ModalContent, ActionButton } from "@budibase/bbui"
   import { onDestroy } from "svelte"
 
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 82db06a623..263be016fc 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -10,7 +10,7 @@
     dndSource,
     dndIsDragging,
     isGridScreen,
-  } from "stores"
+  } from "@/stores"
   import { Utils } from "@budibase/frontend-core"
   import { findComponentById } from "@/utils/components.js"
   import { isGridEvent } from "@/utils/grid"
@@ -266,7 +266,7 @@
         source.type,
         drop.parent,
         drop.index,
-        $dndStore.meta.newComponentProps
+        $dndStore.source?.props
       )
       dropping = false
       stopDragging()
diff --git a/packages/client/src/components/preview/DNDSelectionIndicators.svelte b/packages/client/src/components/preview/DNDSelectionIndicators.svelte
index cb81e83a6b..42f2e464cc 100644
--- a/packages/client/src/components/preview/DNDSelectionIndicators.svelte
+++ b/packages/client/src/components/preview/DNDSelectionIndicators.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { isGridScreen, dndParent, dndSource, dndIsDragging } from "@/stores"
+  import { isGridScreen, dndParent, dndSource, dndIsDragging } from "stores"
   import { DNDPlaceholderID } from "@/constants"
   import IndicatorSet from "./IndicatorSet.svelte"
 </script>
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 58ba92ab07..e2414e9d78 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -7,7 +7,7 @@
     dndStore,
     dndSource,
     isGridScreen,
-  } from "stores"
+  } from "@/stores"
   import { Utils, memo } from "@budibase/frontend-core"
   import { DNDPlaceholderID, GridRowHeight } from "@/constants"
   import {
@@ -54,7 +54,7 @@
     // real component to render in the new position before updating the DND
     // store, preventing the green DND overlay from being out of position
     if ($dndSource?.isNew && styles) {
-      dndStore.actions.updateNewComponentProps({
+      dndStore.actions.updateSourceProps({
         _styles: {
           normal: styles,
         },
diff --git a/packages/client/src/components/preview/GridNewComponentDNDHandler.svelte b/packages/client/src/components/preview/GridNewComponentDNDHandler.svelte
index 8a3da6f419..4a444b59e9 100644
--- a/packages/client/src/components/preview/GridNewComponentDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridNewComponentDNDHandler.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onDestroy, getContext } from "svelte"
-  import { builderStore, componentStore, screenStore } from "stores"
+  import { builderStore, componentStore, screenStore } from "@/stores"
   import { Utils, memo } from "@budibase/frontend-core"
   import { GridRowHeight } from "constants"
   import { GridParams, getGridVar, Devices } from "utils/grid"
diff --git a/packages/client/src/components/preview/GridStylesButton.svelte b/packages/client/src/components/preview/GridStylesButton.svelte
index 430a0659ec..059971b0da 100644
--- a/packages/client/src/components/preview/GridStylesButton.svelte
+++ b/packages/client/src/components/preview/GridStylesButton.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
 
   export let style
   export let value
diff --git a/packages/client/src/components/preview/KeyboardManager.svelte b/packages/client/src/components/preview/KeyboardManager.svelte
index 1eedb0fde7..50ab496940 100644
--- a/packages/client/src/components/preview/KeyboardManager.svelte
+++ b/packages/client/src/components/preview/KeyboardManager.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import { get } from "svelte/store"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
 
   onMount(() => {
     if (get(builderStore).inBuilder) {
diff --git a/packages/client/src/components/preview/SelectionIndicator.svelte b/packages/client/src/components/preview/SelectionIndicator.svelte
index ac1c52c0fa..1f8c9c69a3 100644
--- a/packages/client/src/components/preview/SelectionIndicator.svelte
+++ b/packages/client/src/components/preview/SelectionIndicator.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { dndIsDragging, builderStore } from "@/stores"
+  import { dndIsDragging, builderStore } from "stores"
   import IndicatorSet from "./IndicatorSet.svelte"
 
   $: color = $builderStore.editMode
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 9dae1dcb22..575fff2c8b 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -4,7 +4,7 @@
   import GridStylesButton from "./GridStylesButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
-  import { builderStore, componentStore, dndIsDragging } from "stores"
+  import { builderStore, componentStore, dndIsDragging } from "@/stores"
   import { Utils, shouldDisplaySetting } from "@budibase/frontend-core"
   import { getGridVar, GridParams, Devices } from "utils/grid"
 
diff --git a/packages/client/src/components/preview/SettingsButton.svelte b/packages/client/src/components/preview/SettingsButton.svelte
index 16a4fe23d0..01e5964917 100644
--- a/packages/client/src/components/preview/SettingsButton.svelte
+++ b/packages/client/src/components/preview/SettingsButton.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
   import { createEventDispatcher } from "svelte"
 
   export let prop
diff --git a/packages/client/src/components/preview/SettingsColorPicker.svelte b/packages/client/src/components/preview/SettingsColorPicker.svelte
index aa4b3cb1d1..04b0d0cd93 100644
--- a/packages/client/src/components/preview/SettingsColorPicker.svelte
+++ b/packages/client/src/components/preview/SettingsColorPicker.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ColorPicker } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
 
   export let prop
   export let component
diff --git a/packages/client/src/components/preview/SettingsPicker.svelte b/packages/client/src/components/preview/SettingsPicker.svelte
index 6b354f8d65..f6d8e02123 100644
--- a/packages/client/src/components/preview/SettingsPicker.svelte
+++ b/packages/client/src/components/preview/SettingsPicker.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
 
   export let prop
   export let options
diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts
index 20f582106b..94709c9a86 100644
--- a/packages/client/src/index.ts
+++ b/packages/client/src/index.ts
@@ -10,7 +10,7 @@ import {
   eventStore,
   hoverStore,
   stateStore,
-} from "@/stores"
+} from "stores"
 import { get } from "svelte/store"
 import { initWebsocket } from "@/websocket"
 import { APIClient } from "@budibase/frontend-core"
@@ -163,12 +163,7 @@ const loadBudibase = async () => {
     } else if (type === "dragging-new-component") {
       const { dragging, component } = data
       if (dragging) {
-        const definition =
-          componentStore.actions.getComponentDefinition(component)
-        dndStore.actions.startDraggingNewComponent({
-          component,
-          definition,
-        })
+        dndStore.actions.startDraggingNewComponent(component)
       } else {
         dndStore.actions.reset()
       }
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index c641d339d5..59f6550897 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -18,7 +18,7 @@ import {
   appStore,
   stateStore,
   createContextStore,
-} from "stores"
+} from "@/stores"
 import { styleable } from "utils/styleable"
 import { linkable } from "utils/linkable"
 import { getAction } from "utils/getAction"
diff --git a/packages/client/src/stores/derived/dndComponentPath.js b/packages/client/src/stores/derived/dndComponentPath.js
index 58fb395dd6..3bcd1192fc 100644
--- a/packages/client/src/stores/derived/dndComponentPath.js
+++ b/packages/client/src/stores/derived/dndComponentPath.js
@@ -1,6 +1,6 @@
 import { derived } from "svelte/store"
 import { findComponentPathById } from "utils/components.js"
-import { dndParent } from "../dnd.js"
+import { dndParent } from "../dnd.ts"
 import { screenStore } from "../screens.js"
 
 export const dndComponentPath = derived(
diff --git a/packages/client/src/stores/dnd.js b/packages/client/src/stores/dnd.ts
similarity index 52%
rename from packages/client/src/stores/dnd.js
rename to packages/client/src/stores/dnd.ts
index f6b8fec48c..0a2be9304e 100644
--- a/packages/client/src/stores/dnd.js
+++ b/packages/client/src/stores/dnd.ts
@@ -1,54 +1,65 @@
 import { writable, get } from "svelte/store"
 import { derivedMemo } from "@budibase/frontend-core"
-import { screenStore, isGridScreen } from "@/stores"
+import { screenStore, isGridScreen, componentStore } from "stores/index"
 import { ScreenslotID } from "@/constants"
+import { ComponentDefinition } from "@budibase/types"
+
+interface DNDSource {
+  id?: string
+  parent?: string
+  index?: number
+  bounds: {
+    height: number
+    width: number
+  }
+  name: string
+  icon: string
+  type: string
+  isNew: boolean
+  props?: Record<string, any>
+}
+
+interface DNDTarget {
+  id: string
+  parent: string
+  empty: boolean
+  acceptsChildren: boolean
+  node?: Node
+}
+
+interface DNDDrop {
+  parent: string
+  index: number
+}
+
+interface DNDState {
+  source?: DNDSource
+  target?: DNDTarget
+  drop?: DNDDrop
+}
 
 const createDndStore = () => {
-  const initialState = {
-    // Info about the dragged component
-    source: null,
+  const store = writable<DNDState>({})
 
-    // Info about the target component being hovered over
-    target: null,
-
-    // Info about where the component would be dropped
-    drop: null,
-
-    // Metadata about the event
-    meta: {
-      newComponentProps: null,
-    },
-  }
-  const store = writable(initialState)
-
-  const startDraggingExistingComponent = ({
-    id,
-    parent,
-    bounds,
-    index,
-    name,
-    icon,
-  }) => {
+  const startDraggingExistingComponent = (source: Omit<DNDSource, "isNew">) => {
     store.set({
-      ...initialState,
-      source: { id, parent, bounds, index, name, icon, isNew: false },
+      source: {
+        ...source,
+        isNew: false,
+      },
     })
   }
 
-  const startDraggingNewComponent = ({ component, definition }) => {
-    if (!component) {
-      return
-    }
-
+  const startDraggingNewComponent = (type: string) => {
     // On grid screens, we already know exactly where to insert the component
-    let target, drop
-    const screen = get(screenStore)?.activeScreen
+    let target: DNDTarget | undefined = undefined
+    let drop: DNDDrop | undefined = undefined
     if (get(isGridScreen)) {
-      const id = screen?.props?._id
+      const screen = get(screenStore)?.activeScreen
+      const id = screen.props._id
       target = {
         id,
         parent: ScreenslotID,
-        node: null,
         empty: false,
         acceptsChildren: true,
       }
@@ -59,52 +70,55 @@ const createDndStore = () => {
     }
 
     // Get size of new component so we can show a properly sized placeholder
+    const definition: ComponentDefinition =
+      componentStore.actions.getComponentDefinition(type)
     const width = definition?.size?.width || 128
     const height = definition?.size?.height || 64
 
     store.set({
-      ...initialState,
       source: {
-        id: null,
-        parent: null,
         bounds: { height, width },
-        index: null,
-        type: component,
+        type,
         isNew: true,
-        name: `New ${definition.name}`,
-        icon: definition.icon,
+        name: `New ${definition?.name || "component"}`,
+        icon: definition?.icon || "Selection",
       },
       target,
       drop,
     })
   }
 
-  const updateTarget = ({ id, parent, node, empty, acceptsChildren }) => {
+  const updateTarget = (target: DNDTarget) => {
     store.update(state => {
-      state.target = { id, parent, node, empty, acceptsChildren }
+      state.target = target
       return state
     })
   }
 
-  const updateDrop = ({ parent, index }) => {
+  const updateDrop = (drop: DNDDrop) => {
     store.update(state => {
-      state.drop = { parent, index }
+      state.drop = drop
       return state
     })
   }
 
   const reset = () => {
-    store.set(initialState)
+    store.set({})
   }
 
-  const updateNewComponentProps = newComponentProps => {
-    store.update(state => ({
-      ...state,
-      meta: {
-        ...state.meta,
-        newComponentProps,
-      },
-    }))
+  const updateSourceProps = (props: Record<string, any>) => {
+    store.update(state => {
+      if (!state.source) {
+        return state
+      }
+      return {
+        ...state,
+        source: {
+          ...state.source,
+          props,
+        },
+      }
+    })
   }
 
   return {
@@ -115,7 +129,7 @@ const createDndStore = () => {
       updateTarget,
       updateDrop,
       reset,
-      updateNewComponentProps,
+      updateSourceProps,
     },
   }
 }
diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.ts
similarity index 100%
rename from packages/client/src/stores/index.js
rename to packages/client/src/stores/index.ts
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index df0dc0e365..4163f87e1a 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -3,7 +3,7 @@ import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
 import { orgStore } from "./org"
-import { dndIndex, dndParent, dndSource } from "./dnd.js"
+import { dndIndex, dndParent, dndSource } from "./dnd.ts"
 import { RoleUtils } from "@budibase/frontend-core"
 import { findComponentById, findComponentParent } from "../utils/components.js"
 import { Helpers } from "@budibase/bbui"
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 16dc3c97e7..9a26175dda 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -13,7 +13,7 @@ import {
   rowSelectionStore,
   sidePanelStore,
   modalStore,
-} from "stores"
+} from "@/stores"
 import { API } from "api"
 import { ActionTypes } from "constants"
 import { enrichDataBindings } from "./enrichDataBinding"
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 884420a1fd..136771ba5c 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -1,4 +1,4 @@
-import { builderStore } from "stores"
+import { builderStore } from "@/stores"
 
 /**
  * Helper to build a CSS string from a style object.
diff --git a/packages/client/src/websocket.js b/packages/client/src/websocket.js
index 8ca95fdc84..259c878a58 100644
--- a/packages/client/src/websocket.js
+++ b/packages/client/src/websocket.js
@@ -1,8 +1,4 @@
-import {
-  builderStore,
-  environmentStore,
-  notificationStore,
-} from "./stores/index.js"
+import { builderStore, environmentStore, notificationStore } from "stores"
 import { get } from "svelte/store"
 import { createWebsocket } from "@budibase/frontend-core"
 
diff --git a/packages/types/src/ui/components/index.ts b/packages/types/src/ui/components/index.ts
index 85c7b1af84..c80d08d5b9 100644
--- a/packages/types/src/ui/components/index.ts
+++ b/packages/types/src/ui/components/index.ts
@@ -23,6 +23,11 @@ export interface ComponentDefinition {
   legalDirectChildren: string[]
   requiredAncestors?: string[]
   illegalChildren: string[]
+  icon?: string
+  size?: {
+    width: number
+    height: number
+  }
 }
 
 export interface ComponentSetting {