diff --git a/README.md b/README.md
index 285d049..c34b991 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ Alternatively, if you want to include the package directly in your website HTML
 
 ```html
 <script type='module'  integrity='sha384-9M4o9H23Ax5ZTzsMRLgdlFBYk2hy+ub6XDiZhHWJjfebQ+MZ9iZw+GNep9ac0uFV' crossorigin="anonymous">
-     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.0.0';
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.0.1';
 
      ContentstackLivePreview.init({
         stackDetails: {
diff --git a/package-lock.json b/package-lock.json
index b44e598..0e1d0ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@contentstack/live-preview-utils",
-            "version": "3.0.0",
+            "version": "3.0.1",
             "license": "MIT",
             "dependencies": {
                 "@preact/compat": "^17.1.2",
diff --git a/package.json b/package.json
index baa8088..b841385 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "description": "Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting  live changes to the preview pane.",
     "type": "module",
     "types": "dist/legacy/index.d.ts",
diff --git a/src/livePreview/editButton/editButton.style.ts b/src/livePreview/editButton/editButton.style.ts
index f9e0e45..6855f15 100644
--- a/src/livePreview/editButton/editButton.style.ts
+++ b/src/livePreview/editButton/editButton.style.ts
@@ -4,7 +4,6 @@ export function cslpTagStyles() {
     return {
         "cslp-edit-mode": css`
             outline: 1px dashed #6c5ce7 !important;
-            position: relative !important;
         `,
         "cslp-tooltip": css`
             padding: 0;
diff --git a/src/visualBuilder/components/FieldToolbar.tsx b/src/visualBuilder/components/FieldToolbar.tsx
index 1c91694..b2794a5 100644
--- a/src/visualBuilder/components/FieldToolbar.tsx
+++ b/src/visualBuilder/components/FieldToolbar.tsx
@@ -46,6 +46,7 @@ const TOOLTIP_TOP_EDGE_BUFFER = 96;
 
 interface MultipleFieldToolbarProps {
     eventDetails: VisualBuilderCslpEventDetails;
+    hideOverlay: () => void;
 };
 
 function handleReplaceAsset(fieldMetadata: CslpData) {
@@ -309,6 +310,14 @@ function FieldToolbarComponent(
         fetchFieldSchema();
     }, [fieldMetadata]);
 
+    useEffect(() => {
+        visualBuilderPostMessage?.on(VisualBuilderPostMessageEvents.DELETE_INSTANCE, (args: { data: { path: string } }) => {
+            if(args.data?.path === fieldMetadata.instance.fieldPathWithIndex){
+                props.hideOverlay()
+            }
+        })
+    }, [])
+
     const multipleFieldToolbarButtonClasses = classNames(
         "visual-builder__button visual-builder__button--secondary",
         visualBuilderStyles()["visual-builder__button"],
diff --git a/src/visualBuilder/components/pseudoEditableField.tsx b/src/visualBuilder/components/pseudoEditableField.tsx
index 3a895aa..302b27b 100644
--- a/src/visualBuilder/components/pseudoEditableField.tsx
+++ b/src/visualBuilder/components/pseudoEditableField.tsx
@@ -1,8 +1,7 @@
 import classNames from "classnames";
-import getCamelCaseStyles from "../utils/getCamelCaseStyles";
-import getStyleOfAnElement from "../utils/getStyleOfAnElement";
 import React from "preact/compat";
 import { visualBuilderStyles } from "../visualBuilder.style";
+import { getPsuedoEditableElementStyles } from "../utils/getPsuedoEditableStylesElement";
 
 interface PseudoEditableFieldProps {
     editableElement: HTMLElement;
@@ -12,27 +11,14 @@ interface PseudoEditableFieldProps {
 function PseudoEditableFieldComponent(
     props: PseudoEditableFieldProps
 ): JSX.Element {
-    const styles = getCamelCaseStyles(
-        getStyleOfAnElement(props.editableElement)
-    );
-    // Get the offsetTop and offsetLeft of the editable element and set the position of the pseudo editable element
-    // The pseudo editable element is positioned absolutely at the same location as the editable element
-    const rect = props.editableElement.getBoundingClientRect();
-
-    styles.position = "absolute";
-    styles.top = `${rect.top + window.scrollY}px`;
-    styles.left = `${rect.left + window.scrollX}px`;
-    // setting height to auto so that the element can grow based on the content
-    // and the resize observer can detect the change in height
-    styles.height = "auto";
-    styles.whiteSpace = "pre-line"
-    styles.textTransform = "none"
+    const styles = getPsuedoEditableElementStyles(props.editableElement, true);
 
     return (
         <div
-            className={
-                classNames("visual-builder__pseudo-editable-element", visualBuilderStyles()["visual-builder__pseudo-editable-element"])
-            }
+            className={classNames(
+                "visual-builder__pseudo-editable-element",
+                visualBuilderStyles()["visual-builder__pseudo-editable-element"]
+            )}
             data-testid="visual-builder__pseudo-editable-element"
             style={styles}
         >
diff --git a/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts b/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts
index d8c3fe3..bd8f529 100644
--- a/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts
+++ b/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts
@@ -11,6 +11,11 @@ interface VariantFieldsEvent {
         };
     };
 }
+interface RemoveVariantFieldsEvent {
+    data: {
+        onlyHighlighted?: boolean;
+    };
+}
 
 interface AudienceEvent {
     data: {
@@ -51,18 +56,29 @@ function addVariantFieldClass(
     });
 }
 
-function removeVariantFieldClass(): void {
-    const variantAndBaseFieldElements = document.querySelectorAll(
-        ".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field"
-    );
-    variantAndBaseFieldElements.forEach((element) => {
-        element.classList.remove(
-            "visual-builder__disabled-variant-field",
-            "visual-builder__variant-field",
-            visualBuilderStyles()["visual-builder__variant-field"],
-            "visual-builder__base-field"
+function removeVariantFieldClass(onlyHighlighted: boolean = false): void {
+    if (onlyHighlighted) {
+        const variantElements = document.querySelectorAll(
+            `.${visualBuilderStyles()["visual-builder__variant-field"]}`
         );
-    });
+        variantElements.forEach((element) => {
+            element.classList.remove(
+                visualBuilderStyles()["visual-builder__variant-field"]
+            );
+        });
+    } else {
+        const variantAndBaseFieldElements = document.querySelectorAll(
+            ".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field"
+        );
+        variantAndBaseFieldElements.forEach((element) => {
+            element.classList.remove(
+                "visual-builder__disabled-variant-field",
+                "visual-builder__variant-field",
+                visualBuilderStyles()["visual-builder__variant-field"],
+                "visual-builder__base-field"
+            );
+        });
+    }
 }
 
 function setAudienceMode(mode: boolean): void {
@@ -106,8 +122,8 @@ export function useVariantFieldsPostMessageEvent(): void {
     );
     visualBuilderPostMessage?.on(
         VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,
-        () => {
-            removeVariantFieldClass();
+        (event: RemoveVariantFieldsEvent) => {
+            removeVariantFieldClass(event?.data?.onlyHighlighted);
         }
     );
 }
diff --git a/src/visualBuilder/generators/generateToolbar.tsx b/src/visualBuilder/generators/generateToolbar.tsx
index 25b75ac..862a758 100644
--- a/src/visualBuilder/generators/generateToolbar.tsx
+++ b/src/visualBuilder/generators/generateToolbar.tsx
@@ -15,15 +15,17 @@ import FieldLabelWrapperComponent from "../components/fieldLabelWrapper";
 
 export function appendFocusedToolbar(
     eventDetails: VisualBuilderCslpEventDetails,
-    focusedToolbarElement: HTMLDivElement
+    focusedToolbarElement: HTMLDivElement,
+    hideOverlay: () => void
 ): void {
     appendFieldPathDropdown(eventDetails, focusedToolbarElement);
-    appendFieldToolbar(eventDetails, focusedToolbarElement);
+    appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);
 }
 
 export function appendFieldToolbar(
     eventDetails: VisualBuilderCslpEventDetails,
-    focusedToolbarElement: HTMLDivElement
+    focusedToolbarElement: HTMLDivElement,
+    hideOverlay: () => void
 ): void {
     if (
         focusedToolbarElement.querySelector(
@@ -35,6 +37,7 @@ export function appendFieldToolbar(
     render(
         <FieldToolbarComponent
             eventDetails={eventDetails}
+            hideOverlay={hideOverlay}
         />,
         wrapper
     );
diff --git a/src/visualBuilder/index.ts b/src/visualBuilder/index.ts
index d422384..48c5da5 100644
--- a/src/visualBuilder/index.ts
+++ b/src/visualBuilder/index.ts
@@ -179,7 +179,8 @@ export class VisualBuilder {
                 updateFocussedStateOnMutation(
                     this.overlayWrapper,
                     this.focusedToolbar,
-                    this.visualBuilderContainer
+                    this.visualBuilderContainer,
+                    this.resizeObserver
                 );
                 const emptyBlockParents = Array.from(
                     document.querySelectorAll(
diff --git a/src/visualBuilder/listeners/mouseClick.ts b/src/visualBuilder/listeners/mouseClick.ts
index a596d8b..9e1b81b 100644
--- a/src/visualBuilder/listeners/mouseClick.ts
+++ b/src/visualBuilder/listeners/mouseClick.ts
@@ -35,7 +35,7 @@ type AddFocusOverlayParams = Pick<
 type AddFocusedToolbarParams = Pick<
     EventListenerHandlerParams,
     "eventDetails" | "focusedToolbar"
->;
+> & { hideOverlay: () => void };
 
 function addOverlay(params: AddFocusOverlayParams) {
     if (!params.overlayWrapper || !params.editableElement) return;
@@ -53,7 +53,7 @@ export function addFocusedToolbar(params: AddFocusedToolbarParams): void {
 
     if (!editableElement || !params.focusedToolbar) return;
 
-    appendFocusedToolbar(params.eventDetails, params.focusedToolbar);
+    appendFocusedToolbar(params.eventDetails, params.focusedToolbar, params.hideOverlay);
 }
 
 async function handleBuilderInteraction(
@@ -143,6 +143,14 @@ async function handleBuilderInteraction(
     addFocusedToolbar({
         eventDetails: eventDetails,
         focusedToolbar: params.focusedToolbar,
+        hideOverlay: () => {
+            hideOverlay({
+                visualBuilderContainer: params.visualBuilderContainer,
+                visualBuilderOverlayWrapper: params.overlayWrapper,
+                focusedToolbar: params.focusedToolbar,
+                resizeObserver: params.resizeObserver,
+            });
+        }
     });
 
     const { content_type_uid, fieldPath, cslpValue } = fieldMetadata;
diff --git a/src/visualBuilder/utils/getPsuedoEditableStylesElement.ts b/src/visualBuilder/utils/getPsuedoEditableStylesElement.ts
new file mode 100644
index 0000000..e2369d6
--- /dev/null
+++ b/src/visualBuilder/utils/getPsuedoEditableStylesElement.ts
@@ -0,0 +1,26 @@
+import getCamelCaseStyles from "./getCamelCaseStyles";
+import getStyleOfAnElement from "./getStyleOfAnElement";
+
+export function getPsuedoEditableElementStyles(
+    psuedoEditableElement: HTMLElement,
+    camelCase?: boolean
+): { [key: string]: string } {
+    let styles = getStyleOfAnElement(psuedoEditableElement);
+    if (camelCase) {
+        styles = getCamelCaseStyles(styles);
+    }
+    // Get the offsetTop and offsetLeft of the editable element and set the position of the pseudo editable element
+    // The pseudo editable element is positioned absolutely at the same location as the editable element
+    const rect = psuedoEditableElement.getBoundingClientRect();
+
+    styles.position = "absolute";
+    styles.top = `${rect.top + window.scrollY}px`;
+    styles.left = `${rect.left + window.scrollX}px`;
+    // setting height to auto so that the element can grow based on the content
+    // and the resize observer can detect the change in height
+    styles.height = "auto";
+    styles.whiteSpace = "pre-line";
+    styles.textTransform = "none";
+
+    return styles;
+}
diff --git a/src/visualBuilder/utils/getStyleOfAnElement.ts b/src/visualBuilder/utils/getStyleOfAnElement.ts
index ae55576..d70a78b 100644
--- a/src/visualBuilder/utils/getStyleOfAnElement.ts
+++ b/src/visualBuilder/utils/getStyleOfAnElement.ts
@@ -17,6 +17,8 @@ export default function getStyleOfAnElement(element: HTMLElement): {
         "right",
         "bottom",
         "text-overflow",
+        // allows seeing the text from CMS field as-is
+        "text-transform",
         "margin",
         "margin-block-end",
         "margin-block-start",
diff --git a/src/visualBuilder/utils/handleIndividualFields.ts b/src/visualBuilder/utils/handleIndividualFields.ts
index 5853c47..b7195a8 100644
--- a/src/visualBuilder/utils/handleIndividualFields.ts
+++ b/src/visualBuilder/utils/handleIndividualFields.ts
@@ -200,8 +200,8 @@ export async function handleIndividualFields(
                         editableElement: actualEditableField,
                         visualBuilderContainer,
                         overlayWrapper,
-                        resizeObserver,
                         focusedToolbar,
+                        resizeObserver,
                     });
                 }, 200);
                 actualEditableField.addEventListener(
diff --git a/src/visualBuilder/utils/updateFocussedState.ts b/src/visualBuilder/utils/updateFocussedState.ts
index 1d6ecaa..d9454df 100644
--- a/src/visualBuilder/utils/updateFocussedState.ts
+++ b/src/visualBuilder/utils/updateFocussedState.ts
@@ -1,10 +1,19 @@
 import { VisualBuilder } from "..";
 import { extractDetailsFromCslp } from "../../cslp";
 import { getAddInstanceButtons } from "../generators/generateAddInstanceButtons";
-import { addFocusOverlay } from "../generators/generateOverlay";
+import {
+    addFocusOverlay,
+    hideFocusOverlay,
+} from "../generators/generateOverlay";
 import { hideHoverOutline } from "../listeners/mouseHover";
-import { LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX, RIGHT_EDGE_BUFFER, TOOLBAR_EDGE_BUFFER, TOP_EDGE_BUFFER } from "./constants";
+import {
+    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,
+    RIGHT_EDGE_BUFFER,
+    TOOLBAR_EDGE_BUFFER,
+    TOP_EDGE_BUFFER,
+} from "./constants";
 import getChildrenDirection from "./getChildrenDirection";
+import { getPsuedoEditableElementStyles } from "./getPsuedoEditableStylesElement";
 import getStyleOfAnElement from "./getStyleOfAnElement";
 
 interface ToolbarPositionParams {
@@ -14,29 +23,38 @@ interface ToolbarPositionParams {
 /**
  * Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.
  * By doing this, can avoid the re-rendering of the focus field toolbar.
-*/
+ */
 function positionToolbar({
     focusedToolbar,
     selectedElementDimension,
 }: ToolbarPositionParams): void {
     if (focusedToolbar) {
-        const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;
-        const distanceFromTop = selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;
+        const targetElementRightEdgeOffset =
+            window.scrollX + window.innerWidth - selectedElementDimension.left;
+        const distanceFromTop =
+            selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;
 
         // Adjust top position based on the available space
-        const adjustedDistanceFromTop = 
+        const adjustedDistanceFromTop =
             selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER
-                ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER
+                ? distanceFromTop +
+                  selectedElementDimension.height +
+                  TOP_EDGE_BUFFER
                 : distanceFromTop;
 
-        const distanceFromLeft = selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;
-        const adjustedDistanceFromLeft = Math.max(distanceFromLeft, TOOLBAR_EDGE_BUFFER);
+        const distanceFromLeft =
+            selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;
+        const adjustedDistanceFromLeft = Math.max(
+            distanceFromLeft,
+            TOOLBAR_EDGE_BUFFER
+        );
 
         // Handle right-edge overflow
         if (
             targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&
             (focusedToolbar.style.justifyContent !== "flex-end" ||
-                focusedToolbar.style.left !== `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)
+                focusedToolbar.style.left !==
+                    `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)
         ) {
             focusedToolbar.style.justifyContent = "flex-end";
             focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;
@@ -73,9 +91,9 @@ export function updateFocussedState({
     visualBuilderContainer: HTMLDivElement | null;
     overlayWrapper: HTMLDivElement | null;
     focusedToolbar: HTMLDivElement | null;
-    resizeObserver: ResizeObserver;
+    resizeObserver: ResizeObserver | null;
 }): void {
-    const previousSelectedEditableDOM =
+    let previousSelectedEditableDOM =
         VisualBuilder.VisualBuilderGlobalState.value
             .previousSelectedEditableDOM;
     if (
@@ -86,6 +104,28 @@ export function updateFocussedState({
     ) {
         return;
     }
+
+    const previousSelectedElementCslp =
+        previousSelectedEditableDOM?.getAttribute("data-cslp");
+    const newPreviousSelectedElement = document.querySelector(
+        `[data-cslp="${previousSelectedElementCslp}"]`
+    );
+    if (!newPreviousSelectedElement && resizeObserver) {
+        hideFocusOverlay({
+            visualBuilderOverlayWrapper: overlayWrapper,
+            focusedToolbar,
+            visualBuilderContainer,
+            resizeObserver,
+            noTrigger: true,
+        });
+        return;
+    }
+    if (newPreviousSelectedElement !== previousSelectedEditableDOM) {
+        previousSelectedEditableDOM = newPreviousSelectedElement as HTMLElement;
+        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =
+            previousSelectedEditableDOM;
+    }
+
     hideHoverOutline(visualBuilderContainer);
     addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);
 
@@ -94,7 +134,7 @@ export function updateFocussedState({
         ".visual-builder__pseudo-editable-element"
     ) as HTMLElement;
     if (psuedoEditableElement) {
-        const styles = getStyleOfAnElement(editableElement);
+        const styles = getPsuedoEditableElementStyles(editableElement);
         const styleString = Object.entries(styles).reduce(
             (acc, [key, value]) => {
                 return `${acc}${key}:${value};`;
@@ -102,10 +142,10 @@ export function updateFocussedState({
             ""
         );
         psuedoEditableElement.style.cssText = styleString;
+        // since we are copying styles from the editableEl
+        // it will now have a visibility of hidden, which we added
+        // when creating the pseudo editable element, so make the psuedo visible
         psuedoEditableElement.style.visibility = "visible";
-        psuedoEditableElement.style.position = "absolute";
-        psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;
-        psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;
     }
 
     const cslp = editableElement?.getAttribute("data-cslp") || "";
@@ -113,10 +153,11 @@ export function updateFocussedState({
 
     const targetElementDimension = editableElement.getBoundingClientRect();
     if (targetElementDimension.width && targetElementDimension.height) {
-        const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+        const selectedElement =
+            VisualBuilder.VisualBuilderGlobalState.value
+                .previousSelectedEditableDOM;
 
-        if(!selectedElement)
-            return;
+        if (!selectedElement) return;
         // position the focused tool bar
         positionToolbar({
             focusedToolbar: focusedToolbar,
@@ -177,14 +218,35 @@ export function updateFocussedStateOnMutation(
     focusOverlayWrapper: HTMLDivElement | null,
     focusedToolbar: HTMLDivElement | null,
     visualBuilderContainer: HTMLDivElement | null,
+    resizeObserver: ResizeObserver | null
 ) {
-    
     if (!focusOverlayWrapper) return;
 
-    const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+    let selectedElement =
+        VisualBuilder.VisualBuilderGlobalState.value
+            .previousSelectedEditableDOM;
+    if (!selectedElement) return;
 
-    if(!selectedElement)
+    const selectedElementCslp = selectedElement?.getAttribute("data-cslp");
+    const newSelectedElement = document.querySelector(
+        `[data-cslp="${selectedElementCslp}"]`
+    );
+    if (!newSelectedElement && resizeObserver) {
+        hideFocusOverlay({
+            visualBuilderOverlayWrapper: focusOverlayWrapper,
+            focusedToolbar,
+            visualBuilderContainer,
+            resizeObserver,
+            noTrigger: true,
+        });
         return;
+    }
+
+    if (newSelectedElement !== selectedElement) {
+        selectedElement = newSelectedElement as HTMLElement;
+        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =
+            selectedElement;
+    }
 
     const selectedElementDimension = selectedElement.getBoundingClientRect();
 
@@ -197,7 +259,7 @@ export function updateFocussedStateOnMutation(
 
     if (focusOutline) {
         const focusOutlineDimension = focusOutline.getBoundingClientRect();
-        if(!isSameRect(selectedElementDimension, focusOutlineDimension)){
+        if (!isSameRect(selectedElementDimension, focusOutlineDimension)) {
             focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;
             focusOutline.style.left = `${selectedElementDimension.left}px`;
             focusOutline.style.width = `${selectedElementDimension.width}px`;
@@ -212,29 +274,37 @@ export function updateFocussedStateOnMutation(
     const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(
         ".visual-builder__overlay--top"
     );
-    const focusedOverlayBottom = focusOverlayWrapper.querySelector<HTMLDivElement>(
-        ".visual-builder__overlay--bottom"
-    );
-    const focusedOverlayLeft = focusOverlayWrapper.querySelector<HTMLDivElement>(
-        ".visual-builder__overlay--left"
-    );
-    const focusedOverlayRight = focusOverlayWrapper.querySelector<HTMLDivElement>(
-        ".visual-builder__overlay--right"
-    );
+    const focusedOverlayBottom =
+        focusOverlayWrapper.querySelector<HTMLDivElement>(
+            ".visual-builder__overlay--bottom"
+        );
+    const focusedOverlayLeft =
+        focusOverlayWrapper.querySelector<HTMLDivElement>(
+            ".visual-builder__overlay--left"
+        );
+    const focusedOverlayRight =
+        focusOverlayWrapper.querySelector<HTMLDivElement>(
+            ".visual-builder__overlay--right"
+        );
 
     const distanceFromTop = selectedElementDimension.top + window.scrollY;
 
     if (focusedOverlayTop) {
         const dimension = focusedOverlayTop.getBoundingClientRect();
-        if(dimension.height !== distanceFromTop) {
+        if (dimension.height !== distanceFromTop) {
             focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;
         }
     }
 
     if (focusedOverlayBottom) {
         const dimension = focusedOverlayBottom.getBoundingClientRect();
-        if(dimension.top !== selectedElementDimension.bottom ||
-            dimension.height !== window.document.body.scrollHeight - selectedElementDimension.bottom - window.scrollY) {
+        if (
+            dimension.top !== selectedElementDimension.bottom ||
+            dimension.height !==
+                window.document.body.scrollHeight -
+                    selectedElementDimension.bottom -
+                    window.scrollY
+        ) {
             focusedOverlayBottom.style.top = `${
                 selectedElementDimension.bottom + window.scrollY
             }px`;
@@ -248,9 +318,11 @@ export function updateFocussedStateOnMutation(
 
     if (focusedOverlayLeft) {
         const dimension = focusedOverlayLeft.getBoundingClientRect();
-        if(dimension.top + window.scrollY !== distanceFromTop ||
+        if (
+            dimension.top + window.scrollY !== distanceFromTop ||
             dimension.height !== selectedElementDimension.height ||
-            dimension.width !== selectedElementDimension.left) {
+            dimension.width !== selectedElementDimension.left
+        ) {
             focusedOverlayLeft.style.top = `${distanceFromTop}px`;
             focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;
             focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;
@@ -259,16 +331,21 @@ export function updateFocussedStateOnMutation(
 
     if (focusedOverlayRight) {
         const dimension = focusedOverlayRight.getBoundingClientRect();
-        if(dimension.left !== selectedElementDimension.right ||
+        if (
+            dimension.left !== selectedElementDimension.right ||
             dimension.top + window.scrollY !== distanceFromTop ||
             dimension.height !== selectedElementDimension.height ||
-            dimension.width !== document.documentElement.clientWidth - selectedElementDimension.right) {
-                focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;
-                focusedOverlayRight.style.top = `${distanceFromTop}px`;
-                focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;
-                focusedOverlayRight.style.width = `${
-                    document.documentElement.clientWidth - selectedElementDimension.right
-                }px`;
+            dimension.width !==
+                document.documentElement.clientWidth -
+                    selectedElementDimension.right
+        ) {
+            focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;
+            focusedOverlayRight.style.top = `${distanceFromTop}px`;
+            focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;
+            focusedOverlayRight.style.width = `${
+                document.documentElement.clientWidth -
+                selectedElementDimension.right
+            }px`;
         }
     }
 
@@ -277,13 +354,16 @@ export function updateFocussedStateOnMutation(
      */
 
     if (focusedToolbar) {
-        const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;
+        const targetElementRightEdgeOffset =
+            window.scrollX + window.innerWidth - selectedElementDimension.left;
         const distanceFromTop =
             selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;
         // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).
         const adjustedDistanceFromTop =
             selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER
-                ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER
+                ? distanceFromTop +
+                  selectedElementDimension.height +
+                  TOP_EDGE_BUFFER
                 : distanceFromTop;
 
         const distanceFromLeft =
@@ -293,25 +373,30 @@ export function updateFocussedStateOnMutation(
             TOOLBAR_EDGE_BUFFER
         );
 
-        if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&
-            ( focusedToolbar.style.justifyContent !== "flex-end" ||
-            focusedToolbar.style.left !== `${
-                selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX
-            }px` )
+        if (
+            targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&
+            (focusedToolbar.style.justifyContent !== "flex-end" ||
+                focusedToolbar.style.left !==
+                    `${
+                        selectedElementDimension.right +
+                        LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX
+                    }px`)
         ) {
             // Overflow / Cutoff on right edge
             focusedToolbar.style.justifyContent = "flex-end";
             focusedToolbar.style.left = `${
-                selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX
+                selectedElementDimension.right +
+                LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX
             }px`;
-        } else if (focusedToolbar.style.justifyContent !== "flex-start" ||
+        } else if (
+            focusedToolbar.style.justifyContent !== "flex-start" ||
             focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`
         ) {
             focusedToolbar.style.justifyContent = "flex-start"; // default
             focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;
         }
 
-        if(focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`){
+        if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {
             focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;
         }
     }
@@ -325,27 +410,23 @@ export function updateFocussedStateOnMutation(
             ".visual-builder__pseudo-editable-element"
         ) as HTMLElement;
         const editableElement = selectedElement as HTMLElement;
-        const styles = getStyleOfAnElement(editableElement);
+        const styles = getPsuedoEditableElementStyles(editableElement);
         const styleString = Object.entries(styles).reduce(
             (acc, [key, value]) => {
                 return `${acc}${key}:${value};`;
             },
             ""
         );
-        if (psuedoEditableElement &&
-            (
-                psuedoEditableElement.style.cssText !== styleString ||
-                psuedoEditableElement.style.visibility !== "visible" ||
-                psuedoEditableElement.style.position !== "absolute" ||
-                psuedoEditableElement.style.top !== `${editableElement.offsetTop}px` ||
-                psuedoEditableElement.style.left !== `${editableElement.offsetLeft}px`
-            )
+        if (
+            psuedoEditableElement &&
+            (psuedoEditableElement.style.cssText !== styleString ||
+                psuedoEditableElement.style.visibility !== "visible")
         ) {
             psuedoEditableElement.style.cssText = styleString;
+            // since we are copying styles from the editableEl
+            // it will now have a visibility of hidden, which we added
+            // when creating the pseudo editable element, so make the psuedo visible
             psuedoEditableElement.style.visibility = "visible";
-            psuedoEditableElement.style.position = "absolute";
-            psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;
-            psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;
         }
     }
 }
@@ -357,4 +438,4 @@ function isSameRect(rect1: DOMRect, rect2: DOMRect) {
         rect1.width === rect2.width &&
         rect1.height === rect2.height
     );
-}
\ No newline at end of file
+}