diff --git a/app/client/src/layoutSystems/common/WidgetNamesCanvas/index.tsx b/app/client/src/layoutSystems/common/WidgetNamesCanvas/index.tsx
index 72bc313446..b7bb8b6383 100644
--- a/app/client/src/layoutSystems/common/WidgetNamesCanvas/index.tsx
+++ b/app/client/src/layoutSystems/common/WidgetNamesCanvas/index.tsx
@@ -43,10 +43,7 @@ import {
  * @prop canvasWidth width of canvas in pixels
  * @prop containerRef ref of PageViewWrapper component
  */
-const OverlayCanvasContainer = (props: {
-  canvasWidth: number;
-  containerRef: React.RefObject<HTMLDivElement | null>;
-}) => {
+const OverlayCanvasContainer = (props: { canvasWidth: number }) => {
   //widget name data of widgets
   const selectedWidgetNameData: WidgetNameData[] | undefined = useSelector(
     getSelectedWidgetNameData,
@@ -125,11 +122,7 @@ const OverlayCanvasContainer = (props: {
     const scrollParent: HTMLDivElement | null =
       getMainContainerAnvilCanvasDOMElement();
 
-    if (!props.containerRef?.current || !wrapperRef?.current || !scrollParent)
-      return;
-
-    const container: HTMLDivElement = props.containerRef
-      ?.current as HTMLDivElement;
+    if (!wrapperRef?.current || !scrollParent) return;
 
     const reset = resetCanvas.bind(this, widgetNamePositions, stageRef);
 
@@ -152,21 +145,16 @@ const OverlayCanvasContainer = (props: {
       widgetNamePositions,
     );
 
-    container.addEventListener("mousemove", mouseMoveHandler);
+    scrollParent.addEventListener("mousemove", mouseMoveHandler);
     scrollParent.addEventListener("scroll", scrollHandler);
     scrollParent.addEventListener("scrollend", scrollEndHandler);
 
     return () => {
-      container.removeEventListener("mousemove", mouseMoveHandler);
+      scrollParent.removeEventListener("mousemove", mouseMoveHandler);
       scrollParent.removeEventListener("scroll", scrollHandler);
       scrollParent.removeEventListener("scrollend", scrollEndHandler);
     };
-  }, [
-    props.containerRef?.current,
-    wrapperRef?.current,
-    widgetNamePositions.current,
-    canvasPositions.current,
-  ]);
+  }, [wrapperRef?.current, stageRef?.current]);
 
   // Reset the canvas if no widgets are focused or selected
   // Update the widget name positions if there are widgets focused or selected
diff --git a/app/client/src/layoutSystems/common/WidgetNamesCanvas/widgetNameRenderUtils.ts b/app/client/src/layoutSystems/common/WidgetNamesCanvas/widgetNameRenderUtils.ts
index 8df12964aa..074265206e 100644
--- a/app/client/src/layoutSystems/common/WidgetNamesCanvas/widgetNameRenderUtils.ts
+++ b/app/client/src/layoutSystems/common/WidgetNamesCanvas/widgetNameRenderUtils.ts
@@ -12,17 +12,10 @@ import { SelectionRequestType } from "sagas/WidgetSelectUtils";
 import { getWidgetNameComponent } from "./utils";
 import type { KonvaEventListener } from "konva/lib/Node";
 import type { Group } from "konva/lib/Group";
-import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
-import { getAnvilCanvasId } from "layoutSystems/anvil/canvas/utils";
+import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants";
 
 export function getMainContainerAnvilCanvasDOMElement() {
-  const mainContainerAnvilCanvasDOMId = getAnvilCanvasId(
-    MAIN_CONTAINER_WIDGET_ID,
-  );
-
-  return document.getElementById(
-    mainContainerAnvilCanvasDOMId,
-  ) as HTMLDivElement | null;
+  return document.getElementById(CANVAS_VIEWPORT) as HTMLDivElement | null;
 }
 
 /**
diff --git a/app/client/src/layoutSystems/common/utils/LayoutElementPositionsObserver/index.ts b/app/client/src/layoutSystems/common/utils/LayoutElementPositionsObserver/index.ts
index 3ddc807b0e..cca6a00f29 100644
--- a/app/client/src/layoutSystems/common/utils/LayoutElementPositionsObserver/index.ts
+++ b/app/client/src/layoutSystems/common/utils/LayoutElementPositionsObserver/index.ts
@@ -72,10 +72,12 @@ class LayoutElementPositionObserver {
   //Method to register widgets for resize observer changes
   public observeWidget(widgetId: string, ref: RefObject<HTMLDivElement>) {
     if (ref.current) {
-      const widgetDOMId = getAnvilWidgetDOMId(widgetId);
-      this.registeredWidgets[widgetDOMId] = { ref, id: widgetId };
-      this.resizeObserver.observe(ref.current);
-      this.mutationObserver.observe(ref.current, this.mutationOptions);
+      if (!this.registeredWidgets.hasOwnProperty(widgetId)) {
+        const widgetDOMId = getAnvilWidgetDOMId(widgetId);
+        this.registeredWidgets[widgetDOMId] = { ref, id: widgetId };
+        this.resizeObserver.observe(ref.current);
+        this.mutationObserver.observe(ref.current, this.mutationOptions);
+      }
     }
   }
 
@@ -97,16 +99,18 @@ class LayoutElementPositionObserver {
     ref: RefObject<HTMLDivElement>,
   ) {
     if (ref?.current) {
-      this.registeredLayouts[layoutId] = this.registeredLayouts[
-        getAnvilLayoutDOMId(canvasId, layoutId)
-      ] = {
-        ref,
-        canvasId,
-        layoutId,
-        isDropTarget,
-      };
-      this.resizeObserver.observe(ref.current);
-      this.mutationObserver.observe(ref.current, this.mutationOptions);
+      const layoutDOMId = getAnvilLayoutDOMId(canvasId, layoutId);
+      if (!this.registeredLayouts.hasOwnProperty(layoutDOMId)) {
+        this.registeredLayouts[layoutId] = this.registeredLayouts[layoutDOMId] =
+          {
+            ref,
+            canvasId,
+            layoutId,
+            isDropTarget,
+          };
+        this.resizeObserver.observe(ref.current);
+        this.mutationObserver.observe(ref.current, this.mutationOptions);
+      }
     }
   }
 
diff --git a/app/client/src/pages/Editor/WidgetsEditor/MainContainerWrapper.tsx b/app/client/src/pages/Editor/WidgetsEditor/MainContainerWrapper.tsx
index 1c6f7c2c4e..776d866fd0 100644
--- a/app/client/src/pages/Editor/WidgetsEditor/MainContainerWrapper.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditor/MainContainerWrapper.tsx
@@ -3,7 +3,6 @@ import React, { useEffect } from "react";
 import { useSelector } from "react-redux";
 
 import {
-  getCanvasWidth,
   getIsFetchingPage,
   getViewModePageList,
   showCanvasTopSectionSelector,
@@ -39,7 +38,6 @@ import {
 } from "../../../layoutSystems/common/useLayoutSystemFeatures";
 import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants";
 import { MainContainerResizer } from "layoutSystems/common/mainContainerResizer/MainContainerResizer";
-import OverlayCanvasContainer from "layoutSystems/common/WidgetNamesCanvas";
 
 interface MainCanvasWrapperProps {
   isPreviewMode: boolean;
@@ -47,7 +45,7 @@ interface MainCanvasWrapperProps {
   navigationHeight?: number;
   isAppSettingsPaneWithNavigationTabOpen?: boolean;
   currentPageId: string;
-  parentRef: React.RefObject<HTMLDivElement | null>;
+  canvasWidth: number;
 }
 
 const Wrapper = styled.section<{
@@ -125,7 +123,6 @@ function MainContainerWrapper(props: MainCanvasWrapperProps) {
   const { currentPageId, isPreviewMode, shouldShowSnapShotBanner } = props;
 
   const isFetchingPage = useSelector(getIsFetchingPage);
-  const canvasWidth = useSelector(getCanvasWidth);
   const widgetsStructure = useSelector(getCanvasWidgetsStructure, equal);
   const pages = useSelector(getViewModePageList);
   const theme = useSelector(getCurrentThemeDetails);
@@ -143,11 +140,9 @@ function MainContainerWrapper(props: MainCanvasWrapperProps) {
   const isWDSV2Enabled = useFeatureFlag("ab_wds_enabled");
 
   const checkLayoutSystemFeatures = useLayoutSystemFeatures();
-  const [enableMainContainerResizer, enableOverlayCanvas] =
-    checkLayoutSystemFeatures([
-      LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER,
-      LayoutSystemFeatures.ENABLE_CANVAS_OVERLAY_FOR_EDITOR_UI,
-    ]);
+  const [enableMainContainerResizer] = checkLayoutSystemFeatures([
+    LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER,
+  ]);
 
   useEffect(() => {
     return () => {
@@ -174,7 +169,7 @@ function MainContainerWrapper(props: MainCanvasWrapperProps) {
   if (!isPageInitializing && widgetsStructure) {
     node = (
       <Canvas
-        canvasWidth={canvasWidth}
+        canvasWidth={props.canvasWidth}
         enableMainCanvasResizer={enableMainContainerResizer}
         pageId={params.pageId}
         widgetsStructure={widgetsStructure}
@@ -254,12 +249,6 @@ function MainContainerWrapper(props: MainCanvasWrapperProps) {
           </div>
         )}
         {node}
-        {enableOverlayCanvas && (
-          <OverlayCanvasContainer
-            canvasWidth={canvasWidth}
-            containerRef={props.parentRef}
-          />
-        )}
       </Wrapper>
       <MainContainerResizer
         currentPageId={currentPageId}
diff --git a/app/client/src/pages/Editor/WidgetsEditor/index.tsx b/app/client/src/pages/Editor/WidgetsEditor/index.tsx
index bf6804f60b..525f39a7c8 100644
--- a/app/client/src/pages/Editor/WidgetsEditor/index.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditor/index.tsx
@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import Debugger from "components/editorComponents/Debugger";
 
 import {
+  getCanvasWidth,
   getCurrentPageId,
   getCurrentPageName,
   previewModeSelector,
@@ -48,6 +49,11 @@ import { getSnapshotUpdatedTime } from "selectors/autoLayoutSelectors";
 import { getReadableSnapShotDetails } from "layoutSystems/autolayout/utils/AutoLayoutUtils";
 import AnonymousDataPopup from "../FirstTimeUserOnboarding/AnonymousDataPopup";
 import { getIsAppSidebarEnabled } from "selectors/ideSelectors";
+import {
+  LayoutSystemFeatures,
+  useLayoutSystemFeatures,
+} from "layoutSystems/common/useLayoutSystemFeatures";
+import OverlayCanvasContainer from "layoutSystems/common/WidgetNamesCanvas";
 
 function WidgetsEditor() {
   const { deselectAll, focusWidget } = useWidgetSelection();
@@ -69,6 +75,8 @@ function WidgetsEditor() {
   const isAppSettingsPaneWithNavigationTabOpen = useSelector(
     getIsAppSettingsPaneWithNavigationTabOpen,
   );
+  const canvasWidth = useSelector(getCanvasWidth);
+
   const appMode = useSelector(getAppMode);
   const isPublished = appMode === APP_MODE.PUBLISHED;
   const selectedTheme = useSelector(getSelectedAppTheme);
@@ -83,7 +91,11 @@ function WidgetsEditor() {
   const shouldShowSnapShotBanner =
     !!readableSnapShotDetails && !isPreviewingNavigation;
 
-  const ref = useRef<HTMLDivElement>(null);
+  const checkLayoutSystemFeatures = useLayoutSystemFeatures();
+
+  const [enableOverlayCanvas] = checkLayoutSystemFeatures([
+    LayoutSystemFeatures.ENABLE_CANVAS_OVERLAY_FOR_EDITOR_UI,
+  ]);
 
   useEffect(() => {
     if (navigationPreviewRef?.current) {
@@ -224,7 +236,6 @@ function WidgetsEditor() {
               }
               isPreviewMode={isPreviewMode}
               isPublished={isPublished}
-              ref={ref}
               sidebarWidth={isPreviewingNavigation ? sidebarWidth : 0}
             >
               {shouldShowSnapShotBanner && (
@@ -233,15 +244,18 @@ function WidgetsEditor() {
                 </div>
               )}
               <MainContainerWrapper
+                canvasWidth={canvasWidth}
                 currentPageId={currentPageId}
                 isAppSettingsPaneWithNavigationTabOpen={
                   AppSettingsTabs.Navigation === appSettingsPaneContext?.type
                 }
                 isPreviewMode={isPreviewMode}
                 navigationHeight={navigationHeight}
-                parentRef={ref}
                 shouldShowSnapShotBanner={shouldShowSnapShotBanner}
               />
+              {enableOverlayCanvas && (
+                <OverlayCanvasContainer canvasWidth={canvasWidth} />
+              )}
             </PageViewWrapper>
 
             <CrudInfoModal />