diff --git a/package.json b/package.json
index 89df1f6f..5eafe7f6 100644
--- a/package.json
+++ b/package.json
@@ -122,7 +122,7 @@
     "js-yaml": "4.3.1",
     "tar": "7.5.21",
     "fast-uri": "3.1.5",
-    "postcss": "8.5.25"
+    "postcss": "8.5.26"
   },
   "engines": {
     "node": ">=22.22.0 <23.0.0"
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index e70ef82d..1cba8f61 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -30,8 +30,6 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@supertoolmake/shared-core": "*",
-    "@supertoolmake/string-templates": "*",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -75,6 +73,8 @@
     "@spectrum-css/typography": "3.0.1",
     "@spectrum-css/underlay": "2.0.9",
     "@spectrum-css/vars": "3.0.1",
+    "@supertoolmake/shared-core": "*",
+    "@supertoolmake/string-templates": "*",
     "date-fns": "4.1.0",
     "dayjs": "1.10.8",
     "easymde": "2.16.1",
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index d59d544e..bdd7d5de 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -57,7 +57,7 @@ const unobserve = () => {
 </script>
 
 <script>
-  import { generate } from "shortid"
+  import { nanoid } from "nanoid"
   import { createEventDispatcher, onDestroy, setContext } from "svelte"
   import Portal from "svelte-portal"
   import ActionButton from "../ActionButton/ActionButton.svelte"
@@ -73,7 +73,7 @@ const unobserve = () => {
   const spacing = 11
 
   let visible = false
-  let drawerId = generate()
+  let drawerId = nanoid(9)
 
   const handleCancel = () => {
     if (onCancel) {
diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 010fa2c8..bb460fb0 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -11,7 +11,7 @@ export type { ModalAPI }
   import Portal from "svelte-portal"
   import Context from "../context"
   import { ModalCancelFrom } from "../constants"
-  import { generate } from "shortid"
+  import { nanoid } from "nanoid"
 
   export let fixed: boolean = false
   export let inline: boolean = false
@@ -22,7 +22,7 @@ export type { ModalAPI }
 
   // Ensure any popovers inside this modal are rendered inside this modal
   // Unique ids are required to ensure nested modals are parented correctly
-  const uniqueId = generate()
+  const uniqueId = nanoid(9)
   setContext(Context.PopoverRoot, `.spectrum-Modal-${uniqueId}`)
 
   const dispatch = createEventDispatcher<{
diff --git a/packages/builder/package.json b/packages/builder/package.json
index d34d76a6..b76435ca 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -45,11 +45,6 @@
     ]
   },
   "dependencies": {
-    "@supertoolmake/bbui": "*",
-    "@supertoolmake/frontend-core": "*",
-    "@supertoolmake/shared-core": "*",
-    "@supertoolmake/string-templates": "*",
-    "@supertoolmake/types": "*",
     "@codemirror/autocomplete": "6.20.1",
     "@codemirror/commands": "6.10.3",
     "@codemirror/lang-html": "6.4.11",
@@ -62,6 +57,11 @@
     "@dagrejs/dagre": "1.1.4",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
+    "@supertoolmake/bbui": "*",
+    "@supertoolmake/frontend-core": "*",
+    "@supertoolmake/shared-core": "*",
+    "@supertoolmake/string-templates": "*",
+    "@supertoolmake/types": "*",
     "@xyflow/svelte": "0.1.39",
     "@zerodevx/svelte-json-view": "1.0.7",
     "codemirror": "5.65.16",
@@ -70,8 +70,8 @@
     "fast-json-patch": "^3.1.1",
     "lodash": "4.18.1",
     "marked": "15.0.8",
+    "nanoid": "6.0.1",
     "remixicon": "2.5.0",
-    "shortid": "2.2.17",
     "svelte-dnd-action": "0.9.64",
     "svelte-loading-spinners": "^0.3.6",
     "svelte-portal": "^2.2.1",
@@ -80,13 +80,12 @@
   "devDependencies": {
     "@babel/plugin-transform-runtime": "7.29.0",
     "@babel/preset-env": "7.29.5",
-    "@supertoolmake/client": "*",
     "@rollup/plugin-replace": "6.0.3",
     "@roxi/routify": "3.6.4",
+    "@supertoolmake/client": "*",
     "@sveltejs/vite-plugin-svelte": "7.1.2",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/svelte": "5.2.8",
-    "@types/shortid": "2.2.0",
     "identity-obj-proxy": "3.0.0",
     "resize-observer-polyfill": "1.5.1",
     "svelte-jester": "1.3.2",
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
index a2984b70..9909d3f7 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
@@ -9,7 +9,7 @@ import {
   Search,
 } from "@supertoolmake/bbui"
 import { cloneDeep } from "lodash/fp"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { tick } from "svelte"
 import { dndzone } from "svelte-dnd-action"
 import {
@@ -24,7 +24,7 @@ const EVENT_TYPE_KEY = "##eventHandlerType"
 const IF_TYPE = "IF / ELSE"
 const actionTypes = getAvailableActions()
 const flipDurationMs = 150
-const zoneType = generate()
+const zoneType = nanoid(9)
 
 const branchConfigs = [
   { key: "actions", label: "THEN" },
@@ -35,7 +35,7 @@ const createAction = (actionType) => {
   const newAction = {
     parameters: {},
     [EVENT_TYPE_KEY]: actionType.name,
-    id: generate(),
+    id: nanoid(9),
   }
   if (isIFBlock(newAction)) {
     newAction.parameters.actions = []
@@ -454,7 +454,7 @@ $: allBindings = getAllBindings(
 $: {
   if (actions) {
     actions.forEach((action) => {
-      if (!action.id) action.id = generate()
+      if (!action.id) action.id = nanoid(9)
     })
   }
 }
diff --git a/packages/builder/src/components/design/settings/controls/ButtonConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/ButtonConditionEditor.svelte
index cd31e818..6c7ae942 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConditionEditor.svelte
@@ -20,7 +20,7 @@ import type {
 } from "@supertoolmake/types"
 import { BasicOperator, FieldType } from "@supertoolmake/types"
 import { cloneDeep } from "lodash"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { createEventDispatcher } from "svelte"
 import { flip } from "svelte/animate"
 import { dndzone } from "svelte-dnd-action"
@@ -45,7 +45,7 @@ export let componentBindings: EnrichedBinding[] = []
 let drawer: Drawer
 const dispatch = createEventDispatcher()
 const flipDurationMs = 150
-const zoneType = generate()
+const zoneType = nanoid(9)
 const actionOptions = [
   {
     label: "Hide component",
@@ -107,7 +107,7 @@ const addCondition = () => {
   conditions = [
     ...conditions,
     {
-      id: generate(),
+      id: nanoid(9),
       action: "hide",
       operator: BasicOperator.EQUAL,
       valueType: "string",
@@ -122,7 +122,7 @@ const removeCondition = (id: string) => {
 
 const duplicateCondition = (id: string) => {
   const condition: ComponentCondition = conditions.find((link) => link.id === id)!
-  const duplicate = { ...condition, id: generate() }
+  const duplicate = { ...condition, id: nanoid(9) }
   conditions = [...conditions, duplicate]
 }
 
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
index 3ab886f6..28c1ce4e 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
@@ -9,7 +9,7 @@ import {
   Layout,
   Select,
 } from "@supertoolmake/bbui"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { flip } from "svelte/animate"
 import { dndzone } from "svelte-dnd-action"
 import CellEditor from "./CellEditor.svelte"
@@ -80,7 +80,7 @@ const reset = () => {
 $: unselectedColumns = getUnselectedColumns(options, columns)
 $: columns.forEach((column) => {
   if (!column.id) {
-    column.id = generate()
+    column.id = nanoid(9)
   }
 })
 </script>
diff --git a/packages/builder/src/components/design/settings/controls/DraggableList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList.svelte
index 98c7e421..a558f35e 100644
--- a/packages/builder/src/components/design/settings/controls/DraggableList.svelte
+++ b/packages/builder/src/components/design/settings/controls/DraggableList.svelte
@@ -1,6 +1,6 @@
 <script>
 import { Icon } from "@supertoolmake/bbui"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { createEventDispatcher, setContext } from "svelte"
 import { get, writable } from "svelte/store"
 import { dndzone } from "svelte-dnd-action"
@@ -13,7 +13,7 @@ export let listItemKey
 export let draggable = true
 export let focus = undefined
 
-let zoneType = generate()
+let zoneType = nanoid(9)
 
 let store = writable({
   selected: null,
@@ -33,7 +33,7 @@ const buildDraggable = (items) => {
   const seenIds = new Set()
   return items
     .map((item) => {
-      let id = listItemKey ? item[listItemKey] : generate()
+      let id = listItemKey ? item[listItemKey] : nanoid(9)
       return {
         id,
         item,
diff --git a/packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsDrawer.svelte b/packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsDrawer.svelte
index 90ef4691..274adfd0 100644
--- a/packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsDrawer.svelte
@@ -1,6 +1,6 @@
 <script>
 import { Body, Button, DrawerContent, Icon, Input, Label, Layout } from "@supertoolmake/bbui"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 
 export let options = []
 
@@ -12,7 +12,7 @@ const addOption = () => {
   options = [
     ...options,
     {
-      id: generate(),
+      id: nanoid(9),
       label: null,
       value: null,
     },
diff --git a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
index 60d73704..35886513 100644
--- a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
@@ -15,7 +15,7 @@ import {
 import { Constants, FilterUsers, QueryUtils } from "@supertoolmake/frontend-core"
 import { FieldType } from "@supertoolmake/types"
 import { cloneDeep } from "lodash"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { createEventDispatcher } from "svelte"
 import { flip } from "svelte/animate"
 import { dndzone } from "svelte-dnd-action"
@@ -81,7 +81,7 @@ const save = async () => {
 
 const addCondition = () => {
   const condition = {
-    id: generate(),
+    id: nanoid(9),
     target: targetOptions[0].value,
     metadataKey: conditionOptions[0].value,
     operator: operatorOptions[0]?.value,
@@ -92,7 +92,7 @@ const addCondition = () => {
 }
 
 const duplicateCondition = (condition) => {
-  const dupe = { ...condition, id: generate() }
+  const dupe = { ...condition, id: nanoid(9) }
   tempValue = [...tempValue, dupe]
 }
 
diff --git a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
index 694e6b5a..f419109c 100644
--- a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
@@ -15,7 +15,7 @@ import {
 import { DEFAULT_URL_VALIDATION_PROTOCOLS, URL_VALIDATION_PROTOCOLS } from "@supertoolmake/types"
 import type { Component, EnrichedBinding, UrlValidationProtocol } from "@supertoolmake/types"
 import { isJSBinding } from "@supertoolmake/string-templates"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { SvelteSet } from "svelte/reactivity"
 import { selectedScreen, selectedComponent } from "@/stores/builder"
 import { findClosestMatchingComponent } from "@/helpers/components"
@@ -241,7 +241,7 @@ const exists = (value: unknown): boolean => {
 }
 
 const addRule = (): void => {
-  const id = generate()
+  const id = nanoid(9)
   rules = [
     ...(rules || []),
     {
@@ -264,7 +264,7 @@ const duplicateRule = (id: string): void => {
   if (!existingRule) {
     return
   }
-  const newRule = { ...existingRule, id: generate() }
+  const newRule = { ...existingRule, id: nanoid(9) }
   rules = [...rules, newRule]
   expandedRules.add(newRule.id)
 }
diff --git a/packages/builder/src/pages/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
index 598132c1..6a5395c7 100644
--- a/packages/builder/src/pages/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/pages/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
@@ -2,7 +2,7 @@
 import { Button, Body, Icon, Toggle, DrawerContent, Layout, Select } from "@supertoolmake/bbui"
 import { flip } from "svelte/animate"
 import { dndzone } from "svelte-dnd-action"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 import ConditionValueControl from "@/components/common/ConditionValueControl.svelte"
 import { QueryUtils, Constants } from "@supertoolmake/frontend-core"
@@ -16,7 +16,7 @@ export let componentBindings = []
 export let actionOptions = null
 
 const flipDurationMs = 150
-const zoneType = generate()
+const zoneType = nanoid(9)
 const defaultActionOptions = [
   {
     label: "Hide component",
@@ -48,7 +48,7 @@ $: settingOptions = settings
   }))
 $: conditions.forEach((link) => {
   if (!link.id) {
-    link.id = generate()
+    link.id = nanoid(9)
   }
   if (link.valueType === "Binding") {
     link.valueType = "string"
@@ -84,7 +84,7 @@ const addCondition = () => {
     ...conditions,
     {
       valueType: "string",
-      id: generate(),
+      id: nanoid(9),
       action: "hide",
       operator: Constants.OperatorOptions.Equals.value,
     },
@@ -97,7 +97,7 @@ const removeCondition = (id) => {
 
 const duplicateCondition = (id) => {
   const condition = conditions.find((link) => link.id === id)
-  const duplicate = { ...condition, id: generate() }
+  const duplicate = { ...condition, id: nanoid(9) }
   conditions = [...conditions, duplicate]
 }
 
diff --git a/packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte b/packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
index 381c4b24..33e0919f 100644
--- a/packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
@@ -10,7 +10,7 @@ import {
   Toggle,
 } from "@supertoolmake/bbui"
 import { Constants, QueryUtils } from "@supertoolmake/frontend-core"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { flip } from "svelte/animate"
 import { dndzone } from "svelte-dnd-action"
 import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
@@ -25,7 +25,7 @@ export let componentBindings = []
 export let actionOptions = null
 
 const flipDurationMs = 150
-const zoneType = generate()
+const zoneType = nanoid(9)
 const defaultActionOptions = [
   {
     label: "Hide component",
@@ -79,7 +79,7 @@ const addCondition = () => {
     ...conditions,
     {
       valueType: "string",
-      id: generate(),
+      id: nanoid(9),
       action: "hide",
       operator: Constants.OperatorOptions.Equals.value,
     },
@@ -92,7 +92,7 @@ const removeCondition = (id) => {
 
 const duplicateCondition = (id) => {
   const condition = conditions.find((link) => link.id === id)
-  const duplicate = { ...condition, id: generate() }
+  const duplicate = { ...condition, id: nanoid(9) }
   conditions = [...conditions, duplicate]
 }
 
@@ -185,7 +185,7 @@ $: settingOptions = settings
   }))
 $: conditions.forEach((link) => {
   if (!link.id) {
-    link.id = generate()
+    link.id = nanoid(9)
   }
 })
 </script>
diff --git a/packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte b/packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte
index 47381eaf..aec9956b 100644
--- a/packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte
+++ b/packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte
@@ -1,6 +1,6 @@
 <script>
 import { Constants } from "@supertoolmake/frontend-core"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import DraggableList from "@/components/design/settings/controls/DraggableList.svelte"
 import { getSequentialName } from "@/helpers/duplicate"
 import { navigationStore } from "@/stores/builder"
@@ -11,7 +11,7 @@ export let bindings
 const enrichNavItems = (links) => {
   return (links || []).map((link) => ({
     ...link,
-    id: link.id || generate(),
+    id: link.id || nanoid(9),
   }))
 }
 
@@ -41,7 +41,7 @@ const addNavItem = async () => {
   await save([
     ...navItems,
     {
-      id: generate(),
+      id: nanoid(9),
       text: getSequentialName(navItems, "Nav Item ", {
         getName: (x) => x.text,
       }),
diff --git a/packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte b/packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte
index ac8cc18f..f3a771b2 100644
--- a/packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte
+++ b/packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte
@@ -8,7 +8,7 @@ import {
   Input,
   Layout,
 } from "@supertoolmake/bbui"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { flip } from "svelte/animate"
 import { dndzone } from "svelte-dnd-action"
 import DrawerBindableCombobox from "@/components/common/bindings/DrawerBindableCombobox.svelte"
@@ -46,7 +46,7 @@ $: buttonText = `${count || "No"} sub link${count === 1 ? "" : "s"}`
 $: drawerTitle = navItem.text ? `${navItem.text} sub links` : "Sub links"
 $: subLinks.forEach((subLink) => {
   if (!subLink.id) {
-    subLink.id = generate()
+    subLink.id = nanoid(9)
   }
 })
 $: urlOptions = screenStore.routes
diff --git a/packages/builder/src/templates/screenTemplating/table/modal.ts b/packages/builder/src/templates/screenTemplating/table/modal.ts
index b2a0c666..e3e3d431 100644
--- a/packages/builder/src/templates/screenTemplating/table/modal.ts
+++ b/packages/builder/src/templates/screenTemplating/table/modal.ts
@@ -1,7 +1,7 @@
 import { Utils } from "@supertoolmake/frontend-core"
 import { makePropSafe as safe } from "@supertoolmake/string-templates"
 import type { Screen as ScreenDoc, UIPermissions } from "@supertoolmake/types"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { capitalise } from "@/helpers"
 import type { SourceOption } from "@/routes/builder/workspace/[application]/design/_components/NewScreen/utils"
 import { Component } from "../../Component"
@@ -84,7 +84,7 @@ const modal = ({
   /*
     Edit Row
    */
-  const stateKey = `ID_${generate()}`
+  const stateKey = `ID_${nanoid(9)}`
   const detailsModal = new Component("@budibase/standard-components/modal")
     .instanceName("Edit row modal")
     .customProps({
diff --git a/packages/builder/src/templates/screenTemplating/table/sidePanel.ts b/packages/builder/src/templates/screenTemplating/table/sidePanel.ts
index 97a7ff4d..0908a82c 100644
--- a/packages/builder/src/templates/screenTemplating/table/sidePanel.ts
+++ b/packages/builder/src/templates/screenTemplating/table/sidePanel.ts
@@ -1,7 +1,7 @@
 import { Utils } from "@supertoolmake/frontend-core"
 import { makePropSafe as safe } from "@supertoolmake/string-templates"
 import type { Screen as ScreenDoc, UIPermissions } from "@supertoolmake/types"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { capitalise } from "@/helpers"
 import type { SourceOption } from "@/routes/builder/workspace/[application]/design/_components/NewScreen/utils"
 import { Component } from "../../Component"
@@ -82,7 +82,7 @@ const sidePanel = ({
   /*
     Edit Row
    */
-  const stateKey = `ID_${generate()}`
+  const stateKey = `ID_${nanoid(9)}`
   const detailsSidePanel = new Component("@budibase/standard-components/sidepanel").instanceName(
     "Edit row side panel"
   )
diff --git a/packages/client/package.json b/packages/client/package.json
index e86ef92e..ff451e1a 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -24,17 +24,17 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@spectrum-css/card": "3.0.3",
     "@supertoolmake/bbui": "*",
     "@supertoolmake/frontend-core": "*",
     "@supertoolmake/shared-core": "*",
     "@supertoolmake/string-templates": "*",
     "@supertoolmake/types": "*",
-    "@spectrum-css/card": "3.0.3",
     "apexcharts": "3.48.0",
     "dayjs": "1.10.8",
     "downloadjs": "1.4.7",
     "exifreader": "4.40.1",
-    "shortid": "2.2.17",
+    "nanoid": "6.0.1",
     "svelte-legacy": "npm:svelte@4.2.20",
     "svelte-spa-router": "4.0.1"
   },
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index aa160e4c..a7c67f9d 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -1,5 +1,5 @@
 <script>
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { getContext, onDestroy } from "svelte"
 import Component from "@/components/Component.svelte"
 import { builderStore } from "@/stores/builder"
@@ -18,7 +18,7 @@ export let id = undefined
 
 const component = getContext("component")
 const block = getContext("block")
-const rand = generate()
+const rand = nanoid(9)
 
 // Create a fake component instance so that we can use the core Component
 // to render this part of the block, taking advantage of binding enrichment
diff --git a/packages/client/src/components/app/blocks/RowExplorer.svelte b/packages/client/src/components/app/blocks/RowExplorer.svelte
index f64e1687..aca6e557 100644
--- a/packages/client/src/components/app/blocks/RowExplorer.svelte
+++ b/packages/client/src/components/app/blocks/RowExplorer.svelte
@@ -1,6 +1,6 @@
 <script>
 import { makePropSafe as safe } from "@supertoolmake/string-templates"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { getContext } from "svelte"
 import { get } from "svelte/store"
 import Block from "@/components/Block.svelte"
@@ -18,7 +18,7 @@ export let detailTitle
 export let noRowsMessage
 export let autoRefresh
 
-const stateKey = generate()
+const stateKey = nanoid(9)
 const context = getContext("context")
 const { generateGoldenSample } = getContext("sdk")
 
diff --git a/packages/client/src/components/app/deprecated/TableBlock.svelte b/packages/client/src/components/app/deprecated/TableBlock.svelte
index 4feb5b62..3a8a379c 100644
--- a/packages/client/src/components/app/deprecated/TableBlock.svelte
+++ b/packages/client/src/components/app/deprecated/TableBlock.svelte
@@ -1,7 +1,7 @@
 <script>
 import { Utils } from "@supertoolmake/frontend-core"
 import { makePropSafe as safe } from "@supertoolmake/string-templates"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { getContext } from "svelte"
 import { get } from "svelte/store"
 import Block from "@/components/Block.svelte"
@@ -38,7 +38,7 @@ export let autoRefresh
 const { fetchDatasourceSchema, API, generateGoldenSample } = getContext("sdk")
 const component = getContext("component")
 const context = getContext("context")
-const stateKey = `ID_${generate()}`
+const stateKey = `ID_${nanoid(9)}`
 
 let formId
 let dataProviderId
diff --git a/packages/client/src/components/context/Provider.svelte b/packages/client/src/components/context/Provider.svelte
index 1c18de72..ebae8f0d 100644
--- a/packages/client/src/components/context/Provider.svelte
+++ b/packages/client/src/components/context/Provider.svelte
@@ -1,5 +1,5 @@
 <script>
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { getContext, onDestroy, setContext } from "svelte"
 import { ActionTypes } from "@/constants"
 import { createContextStore, dataSourceStore } from "@/stores"
@@ -23,7 +23,7 @@ if (scope === ContextScopes.Local) {
 
 // Generate a permanent unique ID for this component and use it to register
 // any datasource actions
-const instanceId = generate()
+const instanceId = nanoid(9)
 
 // Keep previous state around so we can avoid updating unless necessary
 let lastDataKey
diff --git a/packages/frontend-core/package.json b/packages/frontend-core/package.json
index 26d69b01..be7f06ce 100644
--- a/packages/frontend-core/package.json
+++ b/packages/frontend-core/package.json
@@ -17,7 +17,6 @@
     "@supertoolmake/types": "*",
     "dayjs": "1.10.8",
     "lodash": "4.18.1",
-    "shortid": "2.2.17",
     "socket.io-client": "4.8.3"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 7ec39025..865f44ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5612,11 +5612,6 @@
     "@types/http-errors" "*"
     "@types/node" "*"
 
-"@types/shortid@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@types/shortid/-/shortid-2.2.0.tgz#905990fc4275f77e60ab0cd9f791b91a3d4bff04"
-  integrity sha512-jBG2FgBxcaSf0h662YloTGA32M8UtNbnTPekUr/eCmWXq0JWQXgNEQ/P5Gf05Cv66QZtE1Ttr83I1AJBPdzCBg==
-
 "@types/ssh2-streams@*":
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/@types/ssh2-streams/-/ssh2-streams-0.1.13.tgz#f8d34a22be50fb8dbafbb2bbc289add0d22daa51"
@@ -7949,9 +7944,9 @@ domhandler@^6.0.0:
     domelementtype "^3.0.0"
 
 dompurify@^3.1.6:
-  version "3.4.11"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.4.11.tgz#29c8ba496475f279ef4015784068452fb14a0680"
-  integrity sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==
+  version "3.4.13"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.4.13.tgz#fc28949d59f92d62e28a3a764bcbeee35897a1be"
+  integrity sha512-2vmYIoqjze2d+kakP8S/nS5shfsl587kzwEjcGlTdiksUVgFHnFCsLYDVj/JNqJVOQZGSYBTmuycv0PodwmnMQ==
   optionalDependencies:
     "@types/trusted-types" "^2.0.7"
 
@@ -11849,15 +11844,15 @@ nano@11.0.6:
   resolved "https://registry.yarnpkg.com/nano/-/nano-11.0.6.tgz#a5ce824032107209002dd4f2750bc7b0807a006b"
   integrity sha512-3yEfcEaBBhdmYXQRP6nztbuRQAcArdjrb2Vkrvx61+b5bzML34ztUy/b9zDXyhW4h4EESpZzf01A8JNRGo+Jlw==
 
-nanoid@^3.3.16:
-  version "3.3.16"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.16.tgz#a04d8ec4b1f10009d2d533947aefe4293737816c"
-  integrity sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==
+nanoid@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-6.0.1.tgz#a04a2304f05b620c600ae8464d94c325ceeebd35"
+  integrity sha512-3wVS3i51pE2pi1k5FFL/95BGfVS0kSsvDVuGXHOtxox/TywUmtgq+3qiTOTbs9J7KfHaXPiN171k/A6dBnaXFw==
 
-nanoid@^3.3.8:
-  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
-  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
+nanoid@^3.3.17:
+  version "3.3.18"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.18.tgz#f66a2de1199ffde0fcf21c8a5f13106b1c081913"
+  integrity sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==
 
 napi-build-utils@^2.0.0:
   version "2.0.0"
@@ -12937,12 +12932,12 @@ postcss-selector-parser@^7.0.0:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss@8.5.25, postcss@^8.3.11, postcss@^8.5.15:
-  version "8.5.25"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.25.tgz#5012a598eaaa897f21bbe8553be3cb7bd2bd78cb"
-  integrity sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==
+postcss@8.5.26, postcss@^8.3.11, postcss@^8.5.15:
+  version "8.5.26"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.26.tgz#6e75135780c7e10df3433bf2266c552d35c8c620"
+  integrity sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==
   dependencies:
-    nanoid "^3.3.16"
+    nanoid "^3.3.17"
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
@@ -13936,13 +13931,6 @@ shell-exec@1.0.2:
   resolved "https://registry.yarnpkg.com/shell-exec/-/shell-exec-1.0.2.tgz#2e9361b0fde1d73f476c4b6671fa17785f696756"
   integrity sha512-jyVd+kU2X+mWKMmGhx4fpWbPsjvD53k9ivqetutVW/BQ+WIZoDoP4d8vUMGezV6saZsiNoW2f9GIhg9Dondohg==
 
-shortid@2.2.17:
-  version "2.2.17"
-  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.17.tgz#ea87297a36b7edd10a57818fbac5be798e0994bb"
-  integrity sha512-GpbM3gLF1UUXZvQw6MCyulHkWbRseNO4cyBEZresZRorwl1+SLu1ZdqgVtuwqz8mB6RpwPkm541mYSqrKyJSaA==
-  dependencies:
-    nanoid "^3.3.8"
-
 side-channel-list@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"