diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 3932b04ce2..47a6b90ab3 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -13,7 +13,7 @@ import {
 } from "builderStore"
 import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
-import { DEFAULT_LAYOUTS, FrontendTypes } from "../../constants"
+import { FrontendTypes } from "../../constants"
 import getNewComponentName from "../getNewComponentName"
 import analytics from "analytics"
 import {
@@ -27,7 +27,7 @@ const INITIAL_FRONTEND_STATE = {
   apps: [],
   name: "",
   description: "",
-  layouts: DEFAULT_LAYOUTS,
+  layouts: [],
   screens: [],
   mainUi: {},
   unauthenticatedUi: {},
@@ -198,16 +198,17 @@ export const getFrontendStore = () => {
     preview: {
       saveSelected: async () => {
         const state = get(store)
+        const selectedAsset = get(currentAsset)
         if (state.currentFrontEndType !== FrontendTypes.LAYOUT) {
-          await store.actions.screens.save(currentAsset)
+          await store.actions.screens.save(selectedAsset)
         }
-        await store.actions.layouts.save(currentAsset)
+        await store.actions.layouts.save(selectedAsset)
       },
     },
     layouts: {
-      select: async layoutName => {
+      select: async layoutId => {
         store.update(state => {
-          const layout = store.actions.layouts.find(layoutName)
+          const layout = store.actions.layouts.find(layoutId)
 
           state.currentFrontEndType = FrontendTypes.LAYOUT
           state.currentView = "detail"
@@ -236,9 +237,10 @@ export const getFrontendStore = () => {
         await Promise.all(cssPromises)
       },
       save: async layout => {
-        const response = await api.post(`/api/layouts`, {
-          ...layout,
-        })
+        const layoutToSave = cloneDeep(layout)
+        delete layoutToSave._css
+
+        const response = await api.post(`/api/layouts`, layoutToSave)
 
         const json = await response.json()
 
@@ -246,7 +248,7 @@ export const getFrontendStore = () => {
 
         store.update(state => {
           const layoutToUpdate = state.layouts.find(
-            stateLayouts => stateLayouts._id === layout._id
+            stateLayout => stateLayout._id === layout._id
           )
           if (layoutToUpdate) {
             layoutToUpdate._rev = json.rev
@@ -254,17 +256,12 @@ export const getFrontendStore = () => {
           return state
         })
       },
-      find: layoutName => {
-        if (!layoutName) {
+      find: layoutId => {
+        if (!layoutId) {
           return get(mainLayout)
         }
         const storeContents = get(store)
-        // TODO: only use ID
-        return storeContents.layouts.find(
-          layout =>
-            layout.name.toLowerCase() === layoutName.toLowerCase() ||
-            layout._id === layoutName
-        )
+        return storeContents.layouts.find(layout => layout._id === layoutId)
       },
     },
     components: {
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index 75b27f71d3..7c26e236a6 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -51,7 +51,6 @@
     const screens = screenTemplates($store, [table])
       .filter(template => defaultScreens.includes(template.id))
       .map(template => template.create())
-    store.actions.layouts.select("main")
     for (let screen of screens) {
       // Record the table that created this screen so we can link it later
       screen.autoTableId = table._id
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
index 4478011a73..247f2f4284 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
@@ -21,21 +21,11 @@
 
         // Extract data from message
         const { selectedComponentId, layout, screen } = JSON.parse(event.data)
-        
-        // Update selected component style
-        if (selectedComponentStyle) {
-          document.head.removeChild(selectedComponentStyle)
-        }
-        selectedComponentStyle = document.createElement("style");
-        document.head.appendChild(selectedComponentStyle)
-        var selectedCss = '[data-bb-id="' + selectedComponentId + '"]'  + '{border:2px solid #0055ff !important;}'
-        selectedComponentStyle.appendChild(document.createTextNode(selectedCss))
 
         // Set some flags so the app knows we're in the builder
-        window["##BUDIBASE_IN_BUILDER##"] = true;
-        window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout;
-        window["##BUDIBASE_PREVIEW_SCREEN##"] = screen;
         window["##BUDIBASE_IN_BUILDER##"] = true
+        window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
+        window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
         window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
         window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
         
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index a6b8a63cbb..615b3d0852 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -28,7 +28,7 @@
   const selectComponent = component => {
     store.actions.components.select(component)
     const path = store.actions.components.findRoute(component)
-    $goto(`./:screen/${path}`)
+    // $goto(`./:screen/${path}`)
   }
 
   const moveUpComponent = () => {
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
index d36cdacc11..d858394d80 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
@@ -6,12 +6,12 @@
   import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
 
+  export let layout
   export let components = []
   export let currentComponent
   export let onSelect = () => {}
   export let level = 0
-
-  export let dragDropStore
+  export let dragDropStore 
 
   const isScreenslot = name => name === "##builtin/screenslot"
 
@@ -23,7 +23,11 @@
     const path = store.actions.components.findRoute(component)
 
     // Go to correct URL
-    $goto(`./screens/:screen/${path}`)
+    if (layout) {
+      $goto(`./layouts/${path}`)
+    } else {
+      $goto(`./screens/${path}`)
+    }
   }
 
   const dragstart = component => e => {
@@ -79,6 +83,7 @@
 
       {#if component._children}
         <svelte:self
+          {layout}
           components={component._children}
           {currentComponent}
           {onSelect}
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/EditScreenLayoutModal.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/EditScreenLayoutModal.svelte
new file mode 100644
index 0000000000..b54aebcd78
--- /dev/null
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/EditScreenLayoutModal.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { store, currentAsset } from "builderStore"
+  import { Select } from "@budibase/bbui"
+
+  export let layout
+</script>
+
+<div>
+  <Select bind:value={layout} extraThin secondary>
+    {#each $store.layouts as layout}
+      <option value={layout._id}>{layout.name}</option>
+    {/each}
+  </Select>
+</div>
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
index 4426007281..8f5872b317 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
@@ -4,11 +4,11 @@
   import { store } from "builderStore"
   import instantiateStore from "./dragDropStore"
 
-  import ComponentsTree from "./ComponentTree.svelte"
+  import ComponentTree from "./ComponentTree.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
 
-  const dragDropStore = instantiateStore()
+  const dragDropStore = instantiateStore();
 
   export let route
   export let path
@@ -39,13 +39,14 @@
       text={url === '/' ? 'Home' : url}
       withArrow={route.subpaths}
       on:click={() => changeScreen(screenId)}>
-      <ScreenDropdownMenu screen={screenId} />
+      <ScreenDropdownMenu {screenId} />
     </NavItem>
     {#if selectedScreen?._id === screenId}
-      <ComponentsTree
+      <ComponentTree
         components={selectedScreen.props._children}
         currentComponent={$store.currentComponentInfo}
-        {dragDropStore} />
+        {dragDropStore}
+      />
     {/if}
   {/each}
 {/each}
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
index f716b94351..d27bc2bdcd 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -3,20 +3,31 @@
   import { store, allScreens } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownMenu } from "@budibase/bbui"
+  import EditScreenLayoutModal from "./EditScreenLayoutModal.svelte"
+  import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
-  export let screen
+  export let screenId
 
   let confirmDeleteDialog
+  let editLayoutDialog
   let dropdown
   let anchor
 
+  $: screen = $allScreens.find(screen => screen._id === screenId)
+
   const deleteScreen = () => {
-    const screenToDelete = $allScreens.find(scr => scr._id === screen)
-    store.actions.screens.delete(screenToDelete)
+    store.actions.screens.delete(screen)
     store.actions.routing.fetch()
   }
+
+  async function saveScreen() {
+    try {
+      await store.actions.screens.save(screen)
+    } catch (err) {
+      notifier.danger("Error saving page.")
+    }
+  }
 </script>
 
 <div bind:this={anchor} on:click|stopPropagation>
@@ -29,6 +40,10 @@
         icon="ri-delete-bin-line"
         title="Delete"
         on:click={() => confirmDeleteDialog.show()} />
+      <DropdownItem
+        icon="ri-layout-line"
+        title="Set Layout"
+        on:click={() => editLayoutDialog.show()} />
     </DropdownContainer>
   </DropdownMenu>
 </div>
@@ -39,6 +54,12 @@
   okText="Delete Screen"
   onOk={deleteScreen} />
 
+<Modal bind:this={editLayoutDialog}>
+  <ModalContent onConfirm={saveScreen} title={'Set Layout For Screen'}>
+    <EditScreenLayoutModal bind:layout={screen.props.layoutId} />
+  </ModalContent>
+</Modal>
+
 <style>
   .icon i {
     font-size: 16px;
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js b/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
index 1aa180e938..e657b12bb9 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
@@ -48,7 +48,7 @@ export default function() {
           if (mousePosition > 0.4 && mousePosition < 0.8) {
             state.dropPosition = DropPosition.INSIDE
           }
-          return
+          return state
         }
 
         // bottom half
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index a6f1d6fea5..b7d0fd1f11 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -27,7 +27,8 @@
   const onComponentChosen = component => {
     store.actions.components.create(component._component, component.presetProps)
     const path = store.actions.components.findRoute($store.currentComponentInfo)
-    $goto(`./:screen/${path}`)
+    // $goto(`./:screen/${path}`)
+    // $goto(`./${path}`)
     close()
   }
 </script>
@@ -39,9 +40,13 @@
       class="category"
       on:click={() => onCategoryChosen(category, idx)}
       class:active={idx === selectedIndex}>
-      {#if category.icon}<i class={category.icon} />{/if}
+      {#if category.icon}
+        <i class={category.icon} />
+      {/if}
       <span>{category.name}</span>
-      {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
+      {#if category.isCategory}
+        <i class="ri-arrow-down-s-line arrow" />
+      {/if}
     </div>
   {/each}
 </div>
diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
index 1ecadebeb1..beae2d7e3f 100644
--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
@@ -1,5 +1,6 @@
 <script>
   import { store, allScreens } from "builderStore"
+  import { FrontendTypes } from "constants"
   import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "./ComponentSelectionList.svelte"
 
@@ -18,7 +19,7 @@
 </script>
 
 <div class="root">
-  {#if $store.currentFrontEndType === 'layout' || $allScreens.length}
+  {#if $store.currentFrontEndType === FrontendTypes.LAYOUT || $allScreens.length}
     <div class="switcher">
       <button
         class:selected={selected === COMPONENT_SELECTION_TAB}
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 543a4ed95a..c53694c1bc 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount } from "svelte"
+  import { goto } from "@sveltech/routify"
   import { store, currentAsset } from "builderStore"
   import { FrontendTypes } from "constants"
   import api from "builderStore/api"
@@ -12,17 +13,22 @@
   const tabs = [
     {
       title: "Screens",
-      key: "SCREENS",
+      key: "screens",
     },
     {
       title: "Layouts",
-      key: "LAYOUTS",
+      key: "layouts",
     },
   ]
 
   let modal
   let routes = {}
-  let tab = "SCREENS"
+  let tab = "screens"
+
+  function reroute({ detail }) {
+    if (!detail) return
+    $goto(`./${detail.heading.key}`)
+  }
 
   onMount(() => {
     store.actions.routing.fetch()
@@ -30,8 +36,8 @@
 </script>
 
 <div class="title">
-  <Switcher headings={tabs} bind:value={tab}>
-    {#if tab === 'SCREENS'}
+  <Switcher headings={tabs} bind:value={tab} on:change={reroute}>
+    {#if tab === 'screens'}
       <i
         on:click={modal.show}
         data-cy="new-screen"
@@ -46,8 +52,10 @@
       <Modal bind:this={modal}>
         <NewScreenModal />
       </Modal>
-    {:else if tab === 'LAYOUTS'}
-      <Layout />
+    {:else if tab === 'layouts'}
+      {#each $store.layouts as layout}
+        <Layout {layout} />
+      {/each}
     {/if}
   </Switcher>
 </div>
@@ -62,6 +70,7 @@
 <!-- </Modal> -->
 
 <!-- {/if} -->
+
 <style>
   .title {
     display: flex;
diff --git a/packages/builder/src/components/userInterface/Layout.svelte b/packages/builder/src/components/userInterface/Layout.svelte
index 45aa436489..d684a4f68c 100644
--- a/packages/builder/src/components/userInterface/Layout.svelte
+++ b/packages/builder/src/components/userInterface/Layout.svelte
@@ -2,25 +2,18 @@
   import { goto } from "@sveltech/routify"
   import { FrontendTypes } from "constants"
   import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
+  import initDragDropStore from "./ComponentNavigationTree/dragDropStore"
   import NavItem from "components/common/NavItem.svelte"
   import { last } from "lodash/fp"
   import { store, currentAsset } from "builderStore"
   import { writable } from "svelte/store"
 
-  export let layout = $currentAsset
+  export let layout
 
   let confirmDeleteDialog
   let componentToDelete = ""
 
-  const dragDropStore = writable({})
-
-  const lastPartOfName = c =>
-    c && last(c.name ? c.name.split("/") : c._component.split("/"))
-
-  $: _layout = {
-    component: $currentAsset,
-    title: lastPartOfName(layout),
-  }
+  const dragDropStore = initDragDropStore();
 
   const setCurrentScreenToLayout = () => {
     store.actions.selectAssetType(FrontendTypes.LAYOUT)
@@ -31,15 +24,16 @@
 <NavItem
   border={false}
   icon="ri-layout-3-line"
-  text="Master Screen"
+  text={layout.name}
   withArrow
-  selected={$store.currentComponentInfo?._id === _layout.component.props._id}
-  opened={$store.currentPreviewItem?.name === _layout.title}
+  selected={$store.currentComponentInfo?._id === layout.props._id}
+  opened={$currentAsset._id === layout._id}
   on:click={setCurrentScreenToLayout} />
 
-{#if $store.currentPreviewItem?.name === _layout.title && _layout.component.props._children}
+{#if $currentAsset._id === layout._id && layout.props._children}
   <ComponentTree
-    components={_layout.component.props._children}
+    layout={true}
+    components={layout.props._children}
     currentComponent={$store.currentComponentInfo}
     {dragDropStore} />
 {/if}
diff --git a/packages/builder/src/components/userInterface/LayoutsList.svelte b/packages/builder/src/components/userInterface/LayoutsList.svelte
index ce2e3fac2f..9ba562f81c 100644
--- a/packages/builder/src/components/userInterface/LayoutsList.svelte
+++ b/packages/builder/src/components/userInterface/LayoutsList.svelte
@@ -15,7 +15,7 @@
 
   if (!$store.currentAssetId) {
     // refactor so the right layout is chosen
-    store.actions.layouts.select($params.layout || "main")
+    store.actions.layouts.select($params.layout)
   }
 
   const changeLayout = id => {
diff --git a/packages/builder/src/constants/index.js b/packages/builder/src/constants/index.js
index 07f4238985..f640c4d068 100644
--- a/packages/builder/src/constants/index.js
+++ b/packages/builder/src/constants/index.js
@@ -11,18 +11,3 @@ export const FrontendTypes = {
 
 // fields on the user table that cannot be edited
 export const UNEDITABLE_USER_FIELDS = ["username", "password", "roleId"]
-
-export const DEFAULT_LAYOUTS = {
-  main: {
-    props: {
-      _component: "@budibase/standard-components/container",
-    },
-  },
-  unauthenticated: {
-    props: {
-      _component: "@budibase/standard-components/container",
-    },
-  },
-  componentLibraries: [],
-  stylesheets: [],
-}
diff --git a/packages/builder/src/pages/[application]/design/layouts/[layout]/_fallback.svelte b/packages/builder/src/pages/[application]/design/layouts/[layout]/_fallback.svelte
new file mode 100644
index 0000000000..7d853a5eef
--- /dev/null
+++ b/packages/builder/src/pages/[application]/design/layouts/[layout]/_fallback.svelte
@@ -0,0 +1,4 @@
+<script>
+  // import { goto } from "@sveltech/routify"
+  // $goto("../layout/main")
+</script>
diff --git a/packages/builder/src/pages/[application]/design/layouts/[layout]/index.svelte b/packages/builder/src/pages/[application]/design/layouts/[layout]/index.svelte
deleted file mode 100644
index 01f73fd195..0000000000
--- a/packages/builder/src/pages/[application]/design/layouts/[layout]/index.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<script>
-  import { goto } from "@sveltech/routify"
-  $goto("../layout")
-</script>
diff --git a/packages/builder/src/pages/[application]/design/layouts/index.svelte b/packages/builder/src/pages/[application]/design/layouts/index.svelte
new file mode 100644
index 0000000000..7513355b38
--- /dev/null
+++ b/packages/builder/src/pages/[application]/design/layouts/index.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { store } from "builderStore"
+  import { goto } from "@sveltech/routify"
+
+  // TODO: refactor
+  $goto(`../${$store.layouts[0]?._id}`)
+</script>
\ No newline at end of file
diff --git a/packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte
index ab45461b7e..7cd5a4b86d 100644
--- a/packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte
@@ -8,12 +8,6 @@
   const currentScreenId = decodeURI($params.screen)
   const validScreen = $allScreens.some(screen => screen._id === currentScreenId)
 
-  console.log({
-    validScreen,
-    currentScreenId,
-    componentIds,
-  })
-
   if (!validScreen) {
     // Go to main layout if URL set to invalid screen
     console.error("Invalid screen", $params.screen)
@@ -28,7 +22,7 @@
     if ($leftover) {
       console.log("leftover", $params.screen)
       // Get the correct screen children.
-      const screenChildren = allScreens.find(
+      const screenChildren = $allScreens.find(
         screen =>
           screen._id === $params.screen ||
           screen._id === decodeURIComponent($params.screen)
diff --git a/packages/builder/src/pages/[application]/design/screens/index.svelte b/packages/builder/src/pages/[application]/design/screens/index.svelte
index 9f068c1b81..7714f84110 100644
--- a/packages/builder/src/pages/[application]/design/screens/index.svelte
+++ b/packages/builder/src/pages/[application]/design/screens/index.svelte
@@ -1,4 +1,5 @@
 <script>
   import { goto } from "@sveltech/routify"
+  // TODO: redirect to the first screen
   $goto("../screen")
 </script>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 90428dbf34..56591133e5 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -20,11 +20,10 @@
   $: children = definition._children
   $: id = definition._id
   $: enrichedProps = enrichProps(definition, $dataContext, $bindingStore)
+  $: selected = id === $builderStore.selectedComponentId
 
   // Update component context
-  // ID is duplicated inside style so that the "styleable" helper can set
-  // an ID data tag for unique reference to components
-  $: componentStore.set({ id, styles: { ...definition._styles, id } })
+  $: componentStore.set({ id, styles: { ...definition._styles, selected } })
 
   // Gets the component constructor for the specified component
   const getComponentConstructor = component => {
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 95cb1f18a3..1953139714 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -1,8 +1,11 @@
 /**
  * Helper to build a CSS string from a style object
  */
-const buildStyleString = styles => {
+const buildStyleString = (styles, selected) => {
   let str = ""
+  if (selected) {
+    styles.border = "2px solid #0055ff !important"
+  }
   Object.entries(styles).forEach(([style, value]) => {
     if (style && value != null) {
       str += `${style}: ${value}; `
@@ -20,6 +23,7 @@ export const styleable = (node, styles = {}) => {
 
   // Creates event listeners and applies initial styles
   const setupStyles = newStyles => {
+    const selected = newStyles.selected
     const normalStyles = newStyles.normal || {}
     const hoverStyles = {
       ...normalStyles,
@@ -27,17 +31,16 @@ export const styleable = (node, styles = {}) => {
     }
 
     applyNormalStyles = () => {
-      node.style = buildStyleString(normalStyles)
+      node.style = buildStyleString(normalStyles, selected)
     }
 
     applyHoverStyles = () => {
-      node.style = buildStyleString(hoverStyles)
+      node.style = buildStyleString(hoverStyles, selected)
     }
 
     // Add listeners to toggle hover styles
     node.addEventListener("mouseover", applyHoverStyles)
     node.addEventListener("mouseout", applyNormalStyles)
-    node.setAttribute("data-bb-id", newStyles.id)
 
     // Apply initial normal styles
     applyNormalStyles()
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index d4c57acdb0..e90defb427 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -9,13 +9,6 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/helper-module-imports@^7.10.4":
-  version "7.12.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
-  integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==
-  dependencies:
-    "@babel/types" "^7.12.5"
-
 "@babel/helper-validator-identifier@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
@@ -30,67 +23,6 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/types@^7.12.5":
-  version "7.12.7"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.7.tgz#6039ff1e242640a29452c9ae572162ec9a8f5d13"
-  integrity sha512-MNyI92qZq6jrQkXvtIiykvl4WtoRrVV9MPn+ZfsoEENjiWcBQ3ZSHrkxnJWgWtLX3XXqX5hrSQ+X69wkmesXuQ==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.10.4"
-    lodash "^4.17.19"
-    to-fast-properties "^2.0.0"
-
-"@budibase/bbui@^1.50.1":
-  version "1.51.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.51.0.tgz#4690659d1456d6ee50d6d6d518e553a94cd08f78"
-  integrity sha512-yiiqcvroayHEfxA0VmUPPisUmRmWiGjv1MAOfl3gdnTbQuc0ruTAz2jWPYwEW8MFIOj34qDv8fcyDSobvNKzlQ==
-  dependencies:
-    quill "^1.3.7"
-    sirv-cli "^0.4.6"
-    svelte-flatpickr "^2.4.0"
-    svelte-portal "^1.0.0"
-
-"@budibase/standard-components@^0.3.8":
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/@budibase/standard-components/-/standard-components-0.3.8.tgz#1098431074e791a9387b786d1c26bf11ef3a96a3"
-  integrity sha512-Xs7Xth3Tpjr+/d8NikKHSipDoIoc2BTBW8vum1t2JpDtGgcX1lz0BxPvGxgPUHxBBilmDRHWjGXR490ntNETDg==
-  dependencies:
-    "@budibase/bbui" "^1.50.1"
-    "@budibase/svelte-ag-grid" "^0.0.13"
-    "@fortawesome/fontawesome-free" "^5.14.0"
-    "@svelteschool/svelte-forms" "^0.7.0"
-    apexcharts "^3.22.1"
-    fast-sort "^2.2.0"
-    flatpickr "^4.6.6"
-    lodash.debounce "^4.0.8"
-    quill "^1.3.7"
-    svelte-apexcharts "^1.0.2"
-    svelte-flatpickr "^3.1.0"
-
-"@budibase/svelte-ag-grid@^0.0.13":
-  version "0.0.13"
-  resolved "https://registry.yarnpkg.com/@budibase/svelte-ag-grid/-/svelte-ag-grid-0.0.13.tgz#cbb49e2c8770dd9de51bf222423d0dede3f39207"
-  integrity sha512-pLIUsbQ57gFQThu7/MwuPXPTI1AnDrEzw2IHeHvli4VKq7DYcXbkAFs6h8pDPvbFOC6LaiVjRCnsEpEQI1x7og==
-  dependencies:
-    ag-grid-community "^24.0.0"
-
-"@fortawesome/fontawesome-free@^5.14.0":
-  version "5.15.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz#ccfef6ddbe59f8fe8f694783e1d3eb88902dc5eb"
-  integrity sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==
-
-"@polka/url@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31"
-  integrity sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==
-
-"@rollup/plugin-babel@^5.2.1":
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.2.2.tgz#e5623a01dd8e37e004ba87f2de218c611727d9b2"
-  integrity sha512-MjmH7GvFT4TW8xFdIeFS3wqIX646y5tACdxkTO+khbHvS3ZcVJL6vkAHLw2wqPmkhwCfWHoNsp15VYNwW6JEJA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.10.4"
-    "@rollup/pluginutils" "^3.1.0"
-
 "@rollup/plugin-commonjs@^16.0.0":
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-16.0.0.tgz#169004d56cd0f0a1d0f35915d31a036b0efe281f"
@@ -125,11 +57,6 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@svelteschool/svelte-forms@^0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@svelteschool/svelte-forms/-/svelte-forms-0.7.0.tgz#4ecba15e9a9ab2b04fad3d892931a561118a4cea"
-  integrity sha512-TSt8ROqK6wq+Hav7EhZL1I0GtsZhg28aJuuDSviBzG/NG9pC0eprf8roWjl59DKHOVWIUTPTeY+T+lipb9gf8w==
-
 "@types/estree@*":
   version "0.0.45"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884"
@@ -199,11 +126,6 @@ acorn@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.0.tgz#e1ad486e6c54501634c6c397c5c121daa383607c"
   integrity sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==
 
-ag-grid-community@^24.0.0:
-  version "24.1.0"
-  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-24.1.0.tgz#1e3cab51211822e08d56f03a491b7c0deaa398e6"
-  integrity sha512-pWnWphuDcejZ8ahf6C734EpCx3XQ6dHEZWMWTlCdHNT0mZBLJ4YKCGACX+ttAEtSX2MGM3G13JncvuratUlYag==
-
 ajv@^6.12.3:
   version "6.12.4"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.4.tgz#0614facc4522127fa713445c6bfd3ebd376e2234"
@@ -221,19 +143,6 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-apexcharts@^3.19.2, apexcharts@^3.22.1:
-  version "3.22.2"
-  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.22.2.tgz#7656a54e4a69479e0737c05defcd542c8cc162c5"
-  integrity sha512-pR+cmApk7dhfYILBpe8RVb+FdLfVCt/RDWvAJO1F5feeSQ8lKDgFkRuVu9KOeEarHVXjUpnhLqHNMx7YaprK8A==
-  dependencies:
-    "@rollup/plugin-babel" "^5.2.1"
-    svg.draggable.js "^2.2.2"
-    svg.easing.js "^2.0.0"
-    svg.filter.js "^2.0.2"
-    svg.pathmorphing.js "^0.1.3"
-    svg.resize.js "^1.4.3"
-    svg.select.js "^3.0.1"
-
 array-filter@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
@@ -413,14 +322,6 @@ builtin-modules@^3.1.0:
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
   integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==
 
-call-bind@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.0.tgz#24127054bb3f9bdcb4b1fb82418186072f77b8ce"
-  integrity sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==
-  dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.0"
-
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -448,11 +349,6 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-clone@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
-  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
-
 clone@~0.1.9:
   version "0.1.19"
   resolved "https://registry.yarnpkg.com/clone/-/clone-0.1.19.tgz#613fb68639b26a494ac53253e15b1a6bd88ada85"
@@ -502,11 +398,6 @@ concat-stream@^1.4.4:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-console-clear@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
-  integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -609,18 +500,6 @@ decimal.js@^10.2.0:
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.0.tgz#39466113a9e036111d02f82489b5fd6b0b5ed231"
   integrity sha512-vDPw+rDgn3bZe1+F/pyEwb1oMG2XTlRVgAa6B4KccTEpYgF8w6eQllVbQcfIJnZyvzFtFpxnpGtx8dd7DJp/Rw==
 
-deep-equal@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
-  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
 deep-equal@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
@@ -838,11 +717,6 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-eventemitter3@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
-  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
-
 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
@@ -851,7 +725,7 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
-extend@^3.0.2, extend@~3.0.2:
+extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -871,11 +745,6 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-diff@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
-  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
-
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -886,16 +755,6 @@ fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
-fast-sort@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/fast-sort/-/fast-sort-2.2.0.tgz#20903763531fbcbb41c9df5ab1bf5f2cefc8476a"
-  integrity sha512-W7zqnn2zsYoQA87FKmYtgOsbJohOrh7XrtZrCVHN5XZKqTBTv5UG+rSS3+iWbg/nepRQUOu+wnas8BwtK8kiCg==
-
-flatpickr@^4.5.2, flatpickr@^4.6.6:
-  version "4.6.6"
-  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.6.tgz#34d2ad80adfa34254e62583a34264d472f1038d6"
-  integrity sha512-EZ48CJMttMg3maMhJoX+GvTuuEhX/RbA1YeuI19attP3pwBdbYy6+yqAEVm0o0hSBFYBiLbVxscLW6gJXq6H3A==
-
 foreach@^2.0.5, foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
@@ -946,20 +805,6 @@ fwd-stream@^1.0.4:
   dependencies:
     readable-stream "~1.0.26-4"
 
-get-intrinsic@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.1.tgz#94a9768fcbdd0595a1c9273aacf4c89d075631be"
-  integrity sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-
-get-port@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
-  integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
-
 getpass@^0.1.1:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
@@ -1173,7 +1018,7 @@ is-reference@^1.2.1:
   dependencies:
     "@types/estree" "*"
 
-is-regex@^1.0.4, is-regex@^1.0.5, is-regex@^1.1.0, is-regex@^1.1.1:
+is-regex@^1.0.5, is-regex@^1.1.0, is-regex@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
   integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
@@ -1339,11 +1184,6 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-kleur@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
-  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
-
 level-blobs@^0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/level-blobs/-/level-blobs-0.1.7.tgz#9ab9b97bb99f1edbf9f78a3433e21ed56386bdaf"
@@ -1442,16 +1282,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-local-access@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/local-access/-/local-access-1.1.0.tgz#e007c76ba2ca83d5877ba1a125fc8dfe23ba4798"
-  integrity sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==
-
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
-
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -1515,11 +1345,6 @@ mime-types@^2.1.12, mime-types@~2.1.19:
   dependencies:
     mime-db "1.44.0"
 
-mime@^2.3.1:
-  version "2.4.6"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
-  integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
-
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -1537,11 +1362,6 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-mri@^1.1.0:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
-  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
-
 mustache@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/mustache/-/mustache-4.0.1.tgz#d99beb031701ad433338e7ea65e0489416c854a2"
@@ -1562,14 +1382,6 @@ object-inspect@^1.7.0, object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
-object-is@^1.0.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
-  integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
-  dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-
 object-is@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
@@ -1631,11 +1443,6 @@ optionator@^0.8.1:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
-parchment@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
-  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
-
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -1757,27 +1564,6 @@ qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
-quill-delta@^3.6.2:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
-  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
-  dependencies:
-    deep-equal "^1.0.1"
-    extend "^3.0.2"
-    fast-diff "1.1.2"
-
-quill@^1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
-  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
-  dependencies:
-    clone "^2.1.1"
-    deep-equal "^1.0.1"
-    eventemitter3 "^2.0.3"
-    extend "^3.0.2"
-    parchment "^1.1.4"
-    quill-delta "^3.6.2"
-
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -1835,7 +1621,7 @@ readable-stream@~1.0.26, readable-stream@~1.0.26-4:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
+regexp.prototype.flags@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
   integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
@@ -1982,13 +1768,6 @@ rollup@^2.33.2:
   optionalDependencies:
     fsevents "~2.1.2"
 
-sade@^1.4.0:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/sade/-/sade-1.7.4.tgz#ea681e0c65d248d2095c90578c03ca0bb1b54691"
-  integrity sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==
-  dependencies:
-    mri "^1.1.0"
-
 safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -2037,27 +1816,6 @@ side-channel@^1.0.2:
     es-abstract "^1.18.0-next.0"
     object-inspect "^1.8.0"
 
-sirv-cli@^0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/sirv-cli/-/sirv-cli-0.4.6.tgz#c28ab20deb3b34637f5a60863dc350f055abca04"
-  integrity sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==
-  dependencies:
-    console-clear "^1.1.0"
-    get-port "^3.2.0"
-    kleur "^3.0.0"
-    local-access "^1.0.1"
-    sade "^1.4.0"
-    sirv "^0.4.6"
-    tinydate "^1.0.0"
-
-sirv@^0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/sirv/-/sirv-0.4.6.tgz#185e44eb93d24009dd183b7494285c5180b81f22"
-  integrity sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==
-  dependencies:
-    "@polka/url" "^0.5.0"
-    mime "^2.3.1"
-
 source-map-support@~0.5.10:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
@@ -2150,27 +1908,6 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
-svelte-apexcharts@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/svelte-apexcharts/-/svelte-apexcharts-1.0.2.tgz#4e000f8b8f7c901c05658c845457dfc8314d54c1"
-  integrity sha512-6qlx4rE+XsonZ0FZudfwqOQ34Pq+3wpxgAD75zgEmGoYhYBJcwmikTuTf3o8ZBsZue9U/pAwhNy3ed1Bkq1gmA==
-  dependencies:
-    apexcharts "^3.19.2"
-
-svelte-flatpickr@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-2.4.0.tgz#190871fc3305956c8c8fd3601cd036b8ac71ef49"
-  integrity sha512-UUC5Te+b0qi4POg7VDwfGh0m5W3Hf64OwkfOTj6FEe/dYZN4cBzpQ82EuuQl0CTbbBAsMkcjJcixV1d2V6EHCQ==
-  dependencies:
-    flatpickr "^4.5.2"
-
-svelte-flatpickr@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-3.1.0.tgz#ad83588430dbd55196a1a258b8ba27e7f9c1ee37"
-  integrity sha512-zKyV+ukeVuJ8CW0Ing3T19VSekc4bPkou/5Riutt1yATrLvSsanNqcgqi7Q5IePvIoOF9GJ5OtHvn1qK9Wx9BQ==
-  dependencies:
-    flatpickr "^4.5.2"
-
 svelte-jester@^1.0.6:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/svelte-jester/-/svelte-jester-1.1.5.tgz#05a2ac2e0639d13501f3bd43a355e5400d56ef23"
@@ -2178,11 +1915,6 @@ svelte-jester@^1.0.6:
   dependencies:
     cosmiconfig "^6.0.0"
 
-svelte-portal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
-  integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
-
 svelte-spa-router@^3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-3.0.5.tgz#097506578ac2371c9556b9789bd397d408968d92"
@@ -2195,61 +1927,6 @@ svelte@^3.30.0:
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.30.0.tgz#cbde341e96bf34f4ac73c8f14f8a014e03bfb7d6"
   integrity sha512-z+hdIACb9TROGvJBQWcItMtlr4s0DBUgJss6qWrtFkOoIInkG+iAMo/FJZQFyDBQZc+dul2+TzYSi/tpTT5/Ag==
 
-svg.draggable.js@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
-  integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
-  dependencies:
-    svg.js "^2.0.1"
-
-svg.easing.js@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
-  integrity sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=
-  dependencies:
-    svg.js ">=2.3.x"
-
-svg.filter.js@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
-  integrity sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=
-  dependencies:
-    svg.js "^2.2.5"
-
-svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
-  integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
-
-svg.pathmorphing.js@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
-  integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
-  dependencies:
-    svg.js "^2.4.0"
-
-svg.resize.js@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
-  integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
-  dependencies:
-    svg.js "^2.6.5"
-    svg.select.js "^2.1.2"
-
-svg.select.js@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
-  integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
-  dependencies:
-    svg.js "^2.2.5"
-
-svg.select.js@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
-  integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
-  dependencies:
-    svg.js "^2.6.5"
-
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -2264,16 +1941,6 @@ terser@^3.14.1:
     source-map "~0.6.1"
     source-map-support "~0.5.10"
 
-tinydate@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"
-  integrity sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==
-
-to-fast-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
-  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
-
 tough-cookie@^2.3.3, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static/index.js
index c5bd80098a..50b1253e92 100644
--- a/packages/server/src/api/controllers/static/index.js
+++ b/packages/server/src/api/controllers/static/index.js
@@ -190,15 +190,7 @@ exports.serveAttachment = async function(ctx) {
 
 exports.serveAppAsset = async function(ctx) {
   // default to homedir
-  const mainOrAuth =
-    ctx.auth.authenticated === AuthTypes.APP ? "main" : "unauthenticated"
-
-  const appPath = resolve(
-    budibaseAppsDir(),
-    ctx.user.appId,
-    "public",
-    mainOrAuth
-  )
+  const appPath = resolve(budibaseAppsDir(), ctx.user.appId, "public")
 
   await send(ctx, ctx.file, { root: ctx.devPath || appPath })
 }
diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index 7668d7c7eb..3bea85e404 100644
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@@ -48,9 +48,8 @@
 </svelte:head>
 
 <body id="app">
-  <script src={publicPath('clientFrontendDefinition.js')}>
-  </script>
   <script src={publicPath('budibase-client.js')}>
+
   </script>
   <script>
     loadBudibase()
diff --git a/packages/server/src/constants/layouts.js b/packages/server/src/constants/layouts.js
index 98e45b54ae..1a0768dc3f 100644
--- a/packages/server/src/constants/layouts.js
+++ b/packages/server/src/constants/layouts.js
@@ -35,12 +35,11 @@ const BASE_LAYOUTS = [
           className: "",
           onLoad: [],
           type: "div",
-          _appId: "inst_app_80b_f158d4057d2c4bedb0042d42fda8abaf",
           _instanceName: "Header",
           _children: [
             {
               _id: "49e0e519-9e5e-4127-885a-ee6a0a49e2c1",
-              _component: "@budibase/standard-components/Navigation",
+              _component: "@budibase/standard-components/navigation",
               _styles: {
                 normal: {
                   "max-width": "1400px",
@@ -65,7 +64,6 @@ const BASE_LAYOUTS = [
               borderWidth: "",
               borderColor: "",
               borderStyle: "",
-              _appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
               _instanceName: "Navigation",
               _children: [
                 {
@@ -94,7 +92,6 @@ const BASE_LAYOUTS = [
                   underline: false,
                   fontSize: "",
                   fontFamily: "initial",
-                  _appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
                   _instanceName: "Home Link",
                   _children: [],
                 },
diff --git a/packages/server/src/constants/screens.js b/packages/server/src/constants/screens.js
index 6d11351415..4e7c9ed121 100644
--- a/packages/server/src/constants/screens.js
+++ b/packages/server/src/constants/screens.js
@@ -35,7 +35,6 @@ exports.HOME_SCREEN = {
         _code: "",
         text: "Welcome to your Budibase App 👋",
         type: "h2",
-        _appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
         _instanceName: "Heading",
         _children: [],
       },
@@ -59,7 +58,6 @@ exports.HOME_SCREEN = {
         },
         _code: "",
         type: "div",
-        _appId: "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
         _instanceName: "Video Container",
         _children: [
           {
@@ -86,7 +84,6 @@ exports.HOME_SCREEN = {
             _code: "",
             embed:
               '<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
-            _appId: "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
             _instanceName: "Rick Astley Video",
             _children: [],
           },
@@ -106,20 +103,40 @@ exports.LOGIN_SCREEN = {
   description: "",
   url: "",
   props: {
-    _id: "781e497e-2e7c-11eb-adc1-0242ac120002",
-    _component: "@budibase/standard-components/login",
+    _id: "5beb4c7b-3c8b-49b2-b8b3-d447dc76dda7",
+    _component: "@budibase/standard-components/container",
     _styles: {
-      normal: {},
+      normal: {
+        flex: "1 1 auto",
+        display: "flex",
+        "flex-direction": "column",
+        "justify-content": "flex-start",
+        "align-items": "stretch",
+      },
       hover: {},
       active: {},
       selected: {},
     },
     _code: "",
-    className: "",
-    onLoad: [],
     type: "div",
-    _children: [],
-    _instanceName: "Login",
+    _children: [
+      {
+        _id: "781e497e-2e7c-11eb-adc1-0242ac120002",
+        _component: "@budibase/standard-components/login",
+        _styles: {
+          normal: {},
+          hover: {},
+          active: {},
+          selected: {},
+        },
+        _code: "",
+        className: "",
+        onLoad: [],
+        type: "div",
+        _children: [],
+        _instanceName: "Login",
+      },
+    ],
   },
   routing: {
     route: "/",
diff --git a/packages/standard-components/src/NewRow.svelte b/packages/standard-components/src/NewRow.svelte
index 8b9c57892d..68dcac0b11 100644
--- a/packages/standard-components/src/NewRow.svelte
+++ b/packages/standard-components/src/NewRow.svelte
@@ -1,11 +1,14 @@
 <script>
   import { getContext } from "svelte"
 
-  const { DataProvider } = getContext("sdk")
+  const { DataProvider, styleable } = getContext("sdk")
+  const component = getContext("component")
 
   export let table
 </script>
 
-<DataProvider row={{ tableId: table }}>
-  <slot />
-</DataProvider>
+<div use:styleable={$component.styles}>
+  <DataProvider row={{ tableId: table }}>
+    <slot />
+  </DataProvider>
+</div>
diff --git a/packages/standard-components/src/RowDetail.svelte b/packages/standard-components/src/RowDetail.svelte
index d260e414d9..7f01341665 100644
--- a/packages/standard-components/src/RowDetail.svelte
+++ b/packages/standard-components/src/RowDetail.svelte
@@ -1,7 +1,10 @@
 <script>
   import { onMount, getContext } from "svelte"
 
-  const { API, screenStore, routeStore, DataProvider } = getContext("sdk")
+  const { API, screenStore, routeStore, DataProvider, styleable } = getContext(
+    "sdk"
+  )
+  const component = getContext("component")
 
   export let table
 
@@ -35,7 +38,9 @@
 </script>
 
 {#if row}
-  <DataProvider {row}>
-    <slot />
-  </DataProvider>
+  <div use:styleable={$component.styles}>
+    <DataProvider {row}>
+      <slot />
+    </DataProvider>
+  </div>
 {/if}