diff --git a/package-lock.json b/package-lock.json
index ca42991b..08b5982c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1535,18 +1535,18 @@
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
-      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.7.tgz",
+      "integrity": "sha512-wmVfPG5o2xnKDU4jx/m4w5qva9FWHcnZ8BvzEe90D/RpwsJaTAVYPEPdQ8sbr/N8zZTAHlZUTQdqg8ZUbzHmng==",
       "dependencies": {
-        "@floating-ui/core": "^1.0.0",
-        "@floating-ui/utils": "^0.2.0"
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.4"
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
-      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.4.tgz",
+      "integrity": "sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA=="
     },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
@@ -19899,7 +19899,7 @@
       "version": "0.1.35",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.6.5",
+        "@floating-ui/dom": "^1.6.7",
         "@nlxai/multimodal": "^0.1.35",
         "@testing-library/dom": "^10.1.0",
         "preact": "^10.22.0",
diff --git a/packages/journey-manager/package.json b/packages/journey-manager/package.json
index b2ca236e..c485a762 100644
--- a/packages/journey-manager/package.json
+++ b/packages/journey-manager/package.json
@@ -39,7 +39,7 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.5",
+    "@floating-ui/dom": "^1.6.7",
     "@nlxai/multimodal": "^0.1.35",
     "@testing-library/dom": "^10.1.0",
     "preact": "^10.22.0",
diff --git a/packages/journey-manager/src/ui.tsx b/packages/journey-manager/src/ui.tsx
index a076ac3e..c6858997 100644
--- a/packages/journey-manager/src/ui.tsx
+++ b/packages/journey-manager/src/ui.tsx
@@ -1,7 +1,7 @@
-/* eslint-disable accessor-pairs */
-/* eslint-disable react/prop-types */
+/* eslint-disable accessor-pairs,  react/prop-types */
+
 import { type Client } from "@nlxai/multimodal";
-import { computePosition } from "@floating-ui/dom";
+import { autoUpdate, computePosition } from "@floating-ui/dom";
 import { render, type FunctionComponent } from "preact";
 import { useEffect, useState, useRef } from "preact/hooks";
 
@@ -133,7 +133,7 @@ button {
 @keyframes fadein {
   0% {
     opacity: 0%;
-  } 
+  }
   100% {
     opacity: 100%;
   }
@@ -142,7 +142,7 @@ button {
 @keyframes slideup {
   0% {
     transform: translateY(8px);
-  } 
+  }
   100% {
     transform: translateY(0px);
   }
@@ -220,7 +220,7 @@ button {
   font-size: 18px;
   font-weight: 500;
 }
- 
+
 .drawer-header p {
   font-size: 14px;
   color: #777;
@@ -384,18 +384,43 @@ const Highlight: FunctionComponent<{ element: HTMLElement }> = ({
 }) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
+
+  const ancestors: Element[] = ((element: HTMLElement) => {
+    const ancestors: Element[] = [];
+    while (element.parentNode instanceof HTMLElement) {
+      ancestors.push(element.parentNode);
+      element = element.parentNode;
+    }
+    return ancestors;
+  })(element);
+
   useEffect(() => {
     if (ref.current != null) {
-      computePosition(element, ref.current, {
-        placement: "top-end",
-      })
-        .then((pos) => {
-          setPos(pos);
+      const highlight = ref.current;
+      const moveHighlight = (): void => {
+        computePosition(element, highlight, {
+          placement: "top-end",
         })
-        .catch((err) => {
-          // eslint-disable-next-line no-console
-          console.warn(err);
-        });
+          .then((pos) => {
+            setPos(pos);
+          })
+          .catch((err) => {
+            // eslint-disable-next-line no-console
+            console.warn(err);
+          });
+      };
+
+      const cleanupAutoUpdate = autoUpdate(element, highlight, moveHighlight);
+      const resizeObserver = new ResizeObserver(moveHighlight);
+
+      ancestors.forEach((ancestor) => {
+        resizeObserver.observe(ancestor);
+      });
+
+      return () => {
+        resizeObserver.disconnect();
+        cleanupAutoUpdate();
+      };
     }
   }, [element]);
   return (
diff --git a/packages/website/src/components/Prototyping.tsx b/packages/website/src/components/Prototyping.tsx
index d02908d5..5e737ca7 100644
--- a/packages/website/src/components/Prototyping.tsx
+++ b/packages/website/src/components/Prototyping.tsx
@@ -115,7 +115,7 @@ const runJourneyManager = async (): Promise<unknown> => {
     ui: {
       title: "Call Control Center",
       subtitle: "Manage your call experience with us",
-      highlights: false,
+      highlights: true,
       theme: {
         fontFamily: "'Neue Haas Grotesk'",
       },