diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index b89715a76..874bc7929 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -26,10 +26,8 @@ function RemoteFunctions(config = {}) {
         __description: "Use this to keep shared state for Live Preview Edit instead of window.*"
     };
 
-    let _localHighlight;
     let _hoverHighlight;
     let _clickHighlight;
-    let _setup = false;
     let _hoverLockTimer = null;
 
     // this will store the element that was clicked previously (before the new click)
@@ -185,16 +183,6 @@ function RemoteFunctions(config = {}) {
     // the below code comment is replaced by added scripts for extensibility
     // DONT_STRIP_MINIFY:REPLACE_WITH_ADDED_REMOTE_CONSTANT_SCRIPTS
 
-    // determine whether an event should be processed for Live Development
-    function _validEvent(event) {
-        if (window.navigator.platform.substr(0, 3) === "Mac") {
-            // Mac
-            return event.metaKey;
-        }
-        // Windows
-        return event.ctrlKey;
-    }
-
     // helper function to check if an element is inside the HEAD tag
     // we need this because we don't wanna trigger the element highlights on head tag and its children,
     // except for <style> tags which should be allowed
@@ -575,26 +563,6 @@ function RemoteFunctions(config = {}) {
         }
     };
 
-    function onMouseOver(event) {
-        if (_validEvent(event)) {
-            const element = event.target;
-            if(LivePreviewView.isElementInspectable(element) && element.nodeType === Node.ELEMENT_NODE ) {
-                _localHighlight.add(element, true);
-            }
-        }
-    }
-
-    function onMouseOut(event) {
-        if (_validEvent(event)) {
-            _localHighlight.clear();
-        }
-    }
-
-    function onMouseMove(event) {
-        onMouseOver(event);
-        window.document.removeEventListener("mousemove", onMouseMove);
-    }
-
     // helper function to get the current elements highlight mode
     // this is as per user settings (either click or hover)
     function getHighlightMode() {
@@ -727,14 +695,6 @@ function RemoteFunctions(config = {}) {
         const outlineColor = element.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR) ? "#4285F4" : "#3C3F41";
         element.style.outline = `1px solid ${outlineColor}`;
 
-        // Only apply background tint for editable elements (not for dynamic/read-only)
-        if (element.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR)) {
-            if (element._originalBackgroundColor === undefined) {
-                element._originalBackgroundColor = element.style.backgroundColor;
-            }
-            element.style.backgroundColor = "rgba(0, 162, 255, 0.2)";
-        }
-
         if (!_clickHighlight) {
             _clickHighlight = new Highlight("#cfc");
         }
@@ -804,32 +764,12 @@ function RemoteFunctions(config = {}) {
             });
         }
 
-        // call the selectElement as selectElement handles all the highlighting/boxes and all UI related stuff
-        selectElement(element);
-        brieflyDisableHoverListeners();
-    }
-
-    function onKeyUp(event) {
-        if (_setup && !_validEvent(event)) {
-            window.document.removeEventListener("keyup", onKeyUp);
-            window.document.removeEventListener("mouseover", onMouseOver);
-            window.document.removeEventListener("mouseout", onMouseOut);
-            window.document.removeEventListener("mousemove", onMouseMove);
-            _localHighlight.clear();
-            _localHighlight = undefined;
-            _setup = false;
-        }
-    }
-
-    function onKeyDown(event) {
-        if (!_setup && _validEvent(event)) {
-            window.document.addEventListener("keyup", onKeyUp);
-            window.document.addEventListener("mouseover", onMouseOver);
-            window.document.addEventListener("mouseout", onMouseOut);
-            window.document.addEventListener("mousemove", onMouseMove);
-            _localHighlight = new Highlight("#ecc", true);
-            _setup = true;
+        // we call the select element function only when the element is not editable (JS generated content)
+        // because for editable elements, highlightRule function already calls selectElement internally
+        if (!LivePreviewView.isElementEditable(element)) {
+            selectElement(element);
         }
+        brieflyDisableHoverListeners();
     }
 
     // remove active highlights
@@ -870,13 +810,10 @@ function RemoteFunctions(config = {}) {
         }
 
         // select the first valid highlighted element
-        var foundValidElement = false;
+        let foundValidElement = false;
         for (i = 0; i < nodes.length; i++) {
             if(LivePreviewView.isElementInspectable(nodes[i], true) && nodes[i].tagName !== "BR") {
-                // only call selectElement if it's a different element to avoid unnecessary box recreation
-                if (previouslyClickedElement !== nodes[i]) {
-                    selectElement(nodes[i]);
-                }
+                selectElement(nodes[i]);
                 foundValidElement = true;
                 break;
             }
@@ -1256,16 +1193,7 @@ function RemoteFunctions(config = {}) {
      * when config is changed we clear all the highlighting and stuff
      */
     function _handleConfigurationChange() {
-        if (_hoverHighlight) {
-            _hoverHighlight.clear();
-        }
-        cleanupPreviousElementState();
-        const allElements = window.document.querySelectorAll(`[${GLOBALS.DATA_BRACKETS_ID_ATTR}]`);
-        for (let i = 0; i < allElements.length; i++) {
-            if (allElements[i]._originalBackgroundColor !== undefined) {
-                clearElementBackground(allElements[i]);
-            }
-        }
+        hideHighlight();
         dismissUIAndCleanupState();
     }
 
@@ -1280,15 +1208,11 @@ function RemoteFunctions(config = {}) {
                 previouslyClickedElement.style.outline = "";
             }
             delete previouslyClickedElement._originalOutline;
+            previouslyClickedElement = null;
+        }
 
-            clearElementBackground(previouslyClickedElement);
-            if (_hoverHighlight) {
-                _hoverHighlight.clear();
-            }
-            if (_clickHighlight) {
-                _clickHighlight.clear();
-                _clickHighlight = null;
-            }
+        if (config.mode === 'edit') {
+            hideHighlight();
 
             // Notify handlers about cleanup
             getAllToolHandlers().forEach(handler => {
@@ -1296,8 +1220,6 @@ function RemoteFunctions(config = {}) {
                     handler.onElementCleanup();
                 }
             });
-
-            previouslyClickedElement = null;
         }
     }
 
@@ -1316,7 +1238,6 @@ function RemoteFunctions(config = {}) {
     function registerHandlers() {
         hideHighlight(); // clear previous highlighting
         disableHoverListeners(); // Always remove existing listeners first to avoid duplicates
-        window.document.removeEventListener("keydown", onKeyDown);
         getAllToolHandlers().forEach(handler => {
             if (handler.unregisterInteractionBlocker) {
                 handler.unregisterInteractionBlocker();
@@ -1332,7 +1253,6 @@ function RemoteFunctions(config = {}) {
 
             // register the event handlers
             enableHoverListeners();
-            window.document.addEventListener("keydown", onKeyDown);
 
             // this is to block all the interactions of the user created elements
             // so that lets say user created link doesn't redirect in edit mode
diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js
index 706c4111f..6d9ba333a 100644
--- a/src/LiveDevelopment/main.js
+++ b/src/LiveDevelopment/main.js
@@ -97,7 +97,8 @@ define(function main(require, exports, module) {
         elemHighlights: CONSTANTS.HIGHLIGHT_HOVER, // default value, this will get updated when the extension loads
         showRulerLines: false, // default value, this will get updated when the extension loads
         imageGalleryState: _getImageGalleryState(), // image gallery selected state
-        isPaidUser: false // will be updated when we fetch entitlements
+        isPaidUser: false, // will be updated when we fetch entitlements
+        hasLiveEditCapability: false // handled inside _liveEditCapabilityChanged function
     };
 
     // Status labels/styles are ordered: error, not connected, progress1, progress2, connected.
@@ -232,6 +233,12 @@ define(function main(require, exports, module) {
     function _liveEditCapabilityChanged(newCapability) {
         if(newCapability !== hasLiveEditCapability){
             hasLiveEditCapability = newCapability;
+
+            // update the config to include the live edit capability
+            const config = MultiBrowserLiveDev.getConfig();
+            config.hasLiveEditCapability = hasLiveEditCapability;
+            MultiBrowserLiveDev.updateConfig(config);
+
             if(!hasLiveEditCapability && getCurrentMode() === LIVE_EDIT_MODE){
                 // downgraded, so we need to disable live edit mode
                 setMode(LIVE_HIGHLIGHT_MODE);
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
index 4ff2a6b5f..ec9f7cef7 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
+++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
@@ -158,33 +158,26 @@
 }
 
 .live-preview-status-overlay {
-    width: calc(100% - 3px);
-    position: absolute;
-    top: 30px;
-    left: 3px;
-    z-index: 100;
-}
-
-.live-preview-status-overlay.full-width {
-    width: 100%;
-    left: 0;
+    display: flex;
+    flex-direction: row;
+    background-color: #666;
+    color: #ededed;
+    justify-content: center;
+    align-items: center;
+    padding: 0.35em;
+    position: relative;
 }
 
 .live-preview-overlay-message {
-    color: #ededed;
-    background-color: #666;
-    padding: 0.35em;
-    vertical-align: top;
     text-align: center;
+    flex: 1;
 }
 
 .live-preview-overlay-close {
-    position: absolute;
-    top: 7px;
-    right: 12px;
     font-size: 12px;
     cursor: pointer;
-    color: #ededed;
+    margin-left: 10px;
+    margin-right: 10px;
 }
 
 .live-preview-overlay-close:hover {
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js
index bcf03f6c1..5319ac2ee 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/main.js
+++ b/src/extensionsIntegrated/Phoenix-live-preview/main.js
@@ -156,7 +156,9 @@ define(function (require, exports, module) {
     let modeThatWasSelected = null;
 
     // live Preview overlay variables (overlays are shown when live preview is connecting or there's a syntax error)
-    let $overlayContainer = null; // the overlay container
+    let $statusOverlay = null; // reference to the static overlay element
+    let $statusOverlayMessage = null; // reference to the message span
+    let $statusOverlayClose = null; // reference to the close button
     let shouldShowSyncErrorOverlay = true; // once user closes the overlay we don't show them again
     let shouldShowConnectingOverlay = true;
     let connectingOverlayTimer = null; // this is needed as we show the connecting overlay after 3s
@@ -211,6 +213,13 @@ define(function (require, exports, module) {
             return;
         }
 
+        // we dont show the overlays for non HTML-type files
+        const currentDocument = DocumentManager.getCurrentDocument();
+        if (!currentDocument || !currentDocument.file) { return; }
+
+        const filePath = currentDocument.file.fullPath;
+        if (!utils.isHTMLFile(filePath)) { return; }
+
         // to not show the overlays if user has already closed it before
         if(status === MultiBrowserLiveDev.STATUS_CONNECTING && !shouldShowConnectingOverlay) { return; }
         if(status === MultiBrowserLiveDev.STATUS_SYNC_ERROR && !shouldShowSyncErrorOverlay) { return; }
@@ -224,47 +233,48 @@ define(function (require, exports, module) {
                     connectingOverlayTimer = null;
                     return;
                 }
-                _createAndShowOverlay(textMessage, status);
+                _showOverlay(textMessage, status);
                 connectingOverlayTimer = null;
             }, connectingOverlayTimeDuration);
             return;
         }
 
         // for sync error status, show immediately
-        _createAndShowOverlay(textMessage, status);
+        _showOverlay(textMessage, status);
     }
 
     /**
-     * this function is responsible to create & show the overlay.
+     * this function is init the overlay.
      * so overlay is shown when the live preview is connecting or live preview stopped because of some syntax error
-     * @param {String} textMessage - the text that is written inside the overlay
-     * @param {Number} status - 1 for connect, 4 for sync error but we match it using MultiBrowserLiveDev
      */
-    function _createAndShowOverlay(textMessage, status) {
+    function _initOverlay() {
         if (!$panel) { return; }
+        $statusOverlay = $panel.find(".live-preview-status-overlay");
+        $statusOverlayMessage = $statusOverlay.find(".live-preview-overlay-message");
+        $statusOverlayClose = $statusOverlay.find(".live-preview-overlay-close");
+
+        $statusOverlayClose.on("click", () => {
+            const currentStatue = $statusOverlay.data("status");
+            if(currentStatue === MultiBrowserLiveDev.STATUS_CONNECTING) {
+                shouldShowConnectingOverlay = false;
+            } else if(currentStatue === MultiBrowserLiveDev.STATUS_SYNC_ERROR) {
+                shouldShowSyncErrorOverlay = false;
+            }
+            _hideOverlay();
+        });
+    }
 
-        // create the overlay element
-        // styled inside the 'live-preview.css'
-        $overlayContainer = $("<div>").addClass("live-preview-status-overlay"); // the wrapper for overlay element
-        const $message = $("<div>").addClass("live-preview-overlay-message").text(textMessage);
-
-        // the close button at the right end of the overlay
-        const $close = $("<div>").addClass("live-preview-overlay-close")
-            .attr("title", Strings.LIVE_PREVIEW_HIDE_OVERLAY)
-            .on('click', () => {
-                if(status === MultiBrowserLiveDev.STATUS_CONNECTING) {
-                    shouldShowConnectingOverlay = false;
-                } else if(status === MultiBrowserLiveDev.STATUS_SYNC_ERROR) {
-                    shouldShowSyncErrorOverlay = false;
-                }
-                _hideOverlay();
-            });
-        const $closeIcon = $("<i>").addClass("fas fa-times");
+    /**
+     * Show the overlay with the given message and status
+     * @param {String} textMessage - the text that is written inside the overlay
+     * @param {Number} status - 1 for connect, 4 for sync error but we match it using MultiBrowserLiveDev
+     */
+    function _showOverlay(textMessage, status) {
+        if (!$statusOverlay) { return; }
 
-        $close.append($closeIcon);
-        $overlayContainer.append($message);
-        $overlayContainer.append($close);
-        $panel.append($overlayContainer);
+        $statusOverlayMessage.text(textMessage);
+        $statusOverlay.data("status", status);
+        $statusOverlay.removeClass("forced-hidden");
     }
 
     /**
@@ -272,9 +282,8 @@ define(function (require, exports, module) {
      */
     function _hideOverlay() {
         _clearConnectingOverlayTimer();
-        if ($overlayContainer) {
-            $overlayContainer.remove();
-            $overlayContainer = null;
+        if ($statusOverlay) {
+            $statusOverlay.addClass("forced-hidden");
         }
     }
 
@@ -288,27 +297,6 @@ define(function (require, exports, module) {
         }
     }
 
-    /**
-     * this function adds/remove the full-width class from the overlay container
-     * styled inside 'live-preview.css'
-     *
-     * we need this because
-     * normally when live preview has a good width (more than 305px) then a 3px divider is shown at the left end
-     * so in that case we give the overlay a width of (100% - 3px),
-     * but when the live preview width is reduced
-     * then that divider line gets cut off, so in that case we make the width 100% for this overlay
-     *
-     * without this handling, a white gap appears on the left side, which is distracting
-     */
-    function _setOverlayWidth() {
-        if(!$overlayContainer || !$panel || !$panel.length) { return; }
-        if($panel.width() <= 305) {
-            $overlayContainer.addClass("full-width");
-        } else {
-            $overlayContainer.removeClass("full-width");
-        }
-    }
-
     /**
      * update the mode button text in the live preview toolbar UI based on the current mode
      * @param {String} mode - The current mode ("preview", "highlight", or "edit")
@@ -807,9 +795,8 @@ define(function (require, exports, module) {
             Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "reloadBtn", "click");
         });
 
-        // Set up ResizeObserver for overlay width adjustments
-        // to understand why we're doing this read _setOverlayWidth function
-        new ResizeObserver(_setOverlayWidth).observe($panel[0]);
+        // init the status overlay
+        _initOverlay();
     }
 
     async function _loadPreview(force, isReload) {
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/panel.html b/src/extensionsIntegrated/Phoenix-live-preview/panel.html
index aa0b13ad7..aa2b43284 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/panel.html
+++ b/src/extensionsIntegrated/Phoenix-live-preview/panel.html
@@ -57,6 +57,10 @@
            style="margin-left: 10px;margin-right: 10px;cursor: pointer;"
            title="{{Strings.CLOSE}}"></i>
     </div>
+    <div class="live-preview-status-overlay forced-hidden">
+        <span class="live-preview-overlay-message"><!-- the msg will come here dynamically --></span>
+        <i class="fa fa-times live-preview-overlay-close" title="{{Strings.LIVE_PREVIEW_HIDE_OVERLAY}}"></i>
+    </div>
     <div class="frame-container">
         <div style="width: 3px;"></div>
         <iframe id="panel-live-preview-frame" title="Live Preview" style="border: none"