diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte
index c01bcaf36f..4612440a2c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte
@@ -16,7 +16,7 @@
     // Get root li element
     const el = document.getElementById(`component-${component?._id}`)
     // Get inner nav item content element
-    const child = el?.childNodes[0]?.childNodes[0]
+    const child = el?.children[0]?.children[0]
     if (!el) {
       return
     }
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index d30e97fc6b..a7f506a387 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -401,7 +401,7 @@
   }
 
   const scrollIntoView = () => {
-    const node = document.getElementsByClassName(id)?.[0]?.childNodes[0]
+    const node = document.getElementsByClassName(id)?.[0]?.children[0]
     if (!node) {
       return
     }
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 6c1922ecff..c37eb93afa 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -35,8 +35,8 @@
 
   const getDOMNodeForComponent = component => {
     const parent = component.closest(".component")
-    const children = Array.from(parent.childNodes)
-    return children?.find(node => node?.nodeType === 1)
+    const children = Array.from(parent.children)
+    return children[0]
   }
 
   // Callback when initially starting a drag on a draggable component
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index b9113f9532..bbd03aa974 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -71,8 +71,7 @@
     // Extract valid children
     // Sanity limit of 100 active indicators
     const children = Array.from(parents)
-      .map(parent => parent?.childNodes?.[0])
-      .filter(node => node?.nodeType === 1)
+      .map(parent => parent?.children?.[0])
       .slice(0, 100)
 
     // If there aren't any nodes then reset
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index bc227c87d9..5ea9b2339f 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -37,7 +37,7 @@
     }
     const id = $builderStore.selectedComponentId
     const parent = document.getElementsByClassName(id)?.[0]
-    const element = parent?.childNodes?.[0]
+    const element = parent?.children?.[0]
 
     // The settings bar is higher in the dom tree than the selection indicators
     // as we want to be able to render the settings bar wider than the screen,