diff --git a/packages/bbui/src/Form/Core/Signature.svelte b/packages/bbui/src/Form/Core/Signature.svelte
index f667333a1d..ab2c2bc186 100644
--- a/packages/bbui/src/Form/Core/Signature.svelte
+++ b/packages/bbui/src/Form/Core/Signature.svelte
@@ -10,7 +10,7 @@
   export let width = 400
   export let height = 220
   export let saveIcon = false
-  export let isDark
+  export let darkMode
 
   export function toDataUrl() {
     // PNG to preserve transparency
@@ -146,7 +146,7 @@
   })
 </script>
 
-<div class="signature" class:light={!isDark} class:image-error={urlFailed}>
+<div class="signature" class:light={!darkMode} class:image-error={urlFailed}>
   {#if !disabled}
     <div class="overlay">
       {#if updated && saveIcon}
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index ecad889031..61ceaeb00a 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -27,7 +27,7 @@
   export let secondaryButtonText = undefined
   export let secondaryAction = undefined
   export let secondaryButtonWarning = false
-  export let enableGrid = true
+  export let custom = false
 
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
@@ -64,13 +64,13 @@
   class:spectrum-Dialog--medium={size === "M"}
   class:spectrum-Dialog--large={size === "L"}
   class:spectrum-Dialog--extraLarge={size === "XL"}
-  class:no-grid={!enableGrid}
+  class:no-grid={custom}
   style="position: relative;"
   role="dialog"
   tabindex="-1"
   aria-modal="true"
 >
-  <div class="modal-core" class:spectrum-Dialog-grid={enableGrid}>
+  <div class="modal-core" class:spectrum-Dialog-grid={!custom}>
     {#if title || $$slots.header}
       <h1
         class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
diff --git a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
index c6059670b5..f234ce077e 100644
--- a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
@@ -39,7 +39,7 @@
   $: relationshipsEnabled = relationshipSupport(tableDatasource)
 
   $: currentTheme = $themeStore?.theme
-  $: isDark = !currentTheme.includes("light")
+  $: darkMode = !currentTheme.includes("light")
 
   const relationshipSupport = datasource => {
     const integration = $integrations[datasource?.source]
@@ -59,7 +59,7 @@
 <div class="wrapper">
   <Grid
     {API}
-    {isDark}
+    {darkMode}
     datasource={gridDatasource}
     canAddRows={!isUsersTable}
     canDeleteRows={!isUsersTable}
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 557b354ad6..df7fce0374 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -23,7 +23,6 @@
     appStore,
     dndComponentPath,
     dndIsDragging,
-    themeStore,
   } from "stores"
   import { Helpers } from "@budibase/bbui"
   import { getActiveConditions, reduceConditionActions } from "utils/conditions"
@@ -193,7 +192,9 @@
   let pad = false
   $: pad = pad || (interactive && hasChildren && inDndPath)
   $: $dndIsDragging, (pad = false)
-  $: isDark = !$themeStore.theme?.includes("light")
+
+  $: currentTheme = $context?.device?.theme
+  $: darkMode = !currentTheme?.includes("light")
 
   // Update component context
   $: store.set({
@@ -224,7 +225,7 @@
     parent: id,
     ancestors: [...($component?.ancestors ?? []), instance._component],
     path: [...($component?.path ?? []), id],
-    isDark,
+    darkMode,
   })
 
   const initialise = (instance, force = false) => {
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index e2b34806d4..20677ef49a 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -35,7 +35,8 @@
 
   let grid
 
-  $: isDark = $component.isDark
+  $: currentTheme = $context?.device?.theme
+  $: darkMode = !currentTheme?.includes("light")
   $: columnWhitelist = parsedColumns
     ?.filter(col => col.active)
     ?.map(col => col.field)
@@ -115,7 +116,7 @@
     <Grid
       bind:this={grid}
       datasource={table}
-      {isDark}
+      {darkMode}
       {API}
       {stripeRows}
       {initialFilter}
diff --git a/packages/client/src/components/app/forms/SignatureField.svelte b/packages/client/src/components/app/forms/SignatureField.svelte
index 3115fd58b3..3a12fc3525 100644
--- a/packages/client/src/components/app/forms/SignatureField.svelte
+++ b/packages/client/src/components/app/forms/SignatureField.svelte
@@ -75,14 +75,14 @@
   }
 
   $: currentTheme = $context?.device?.theme
-  $: isDark = !currentTheme?.includes("light")
+  $: darkMode = !currentTheme?.includes("light")
 </script>
 
 <SignatureModal
   onConfirm={saveSignature}
   title={fieldSchema?.name}
   value={fieldState?.value}
-  {isDark}
+  {darkMode}
   bind:this={modal}
 />
 
@@ -113,7 +113,7 @@
     {:else}
       <div class="signature-field">
         <CoreSignature
-          {isDark}
+          {darkMode}
           disabled={$builderStore.inBuilder || disabled}
           editable={false}
           value={fieldState?.value}
diff --git a/packages/frontend-core/src/components/SignatureModal.svelte b/packages/frontend-core/src/components/SignatureModal.svelte
index e610320305..7d1a2db1d3 100644
--- a/packages/frontend-core/src/components/SignatureModal.svelte
+++ b/packages/frontend-core/src/components/SignatureModal.svelte
@@ -4,7 +4,7 @@
   export let onConfirm = () => {}
   export let value
   export let title
-  export let isDark
+  export let darkMode
 
   export const show = () => {
     modal.show()
@@ -19,7 +19,7 @@
     showConfirmButton
     showCancelButton={false}
     showCloseIcon={false}
-    enableGrid={false}
+    custom
     showDivider={false}
     onConfirm={() => {
       onConfirm(canvas)
@@ -29,7 +29,7 @@
       <Body>{title}</Body>
     </div>
     <div class="signature-wrap modal">
-      <CoreSignature {isDark} {value} saveIcon={false} bind:this={canvas} />
+      <CoreSignature {darkMode} {value} saveIcon={false} bind:this={canvas} />
     </div>
   </ModalContent>
 </Modal>
diff --git a/packages/frontend-core/src/components/grid/cells/SignatureCell.svelte b/packages/frontend-core/src/components/grid/cells/SignatureCell.svelte
index bfa1e0c952..325d9cc631 100644
--- a/packages/frontend-core/src/components/grid/cells/SignatureCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/SignatureCell.svelte
@@ -31,7 +31,7 @@
   }
 
   const onKeyDown = () => {
-    return isOpen
+    return false
   }
 
   const open = () => {
@@ -81,7 +81,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="signature-cell"
-  class:light={!($props?.isDark || undefined)}
+  class:light={!$props?.darkMode}
   class:editable
   on:click={editable ? open : null}
 >
@@ -95,7 +95,7 @@
   onConfirm={saveSignature}
   title={schema?.name}
   {value}
-  isDark={$props.isDark}
+  darkMode={$props.darkMode}
   bind:this={modal}
 />
 
@@ -104,7 +104,7 @@
     {#if signature?.key}
       <div class="signature-wrap">
         <CoreSignature
-          isDark={$props.isDark}
+          darkMode={$props.darkMode}
           editable={false}
           {value}
           on:change={saveSignature}
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index b8b450d5d8..f510c25a0f 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -49,7 +49,7 @@
   export let notifySuccess = null
   export let notifyError = null
   export let buttons = null
-  export let isDark
+  export let darkMode
 
   // Unique identifier for DOM nodes inside this instance
   const rand = Math.random()
@@ -102,7 +102,7 @@
     notifySuccess,
     notifyError,
     buttons,
-    isDark,
+    darkMode,
   })
 
   // Set context for children to consume