diff --git a/.talismanrc b/.talismanrc
index 1d5f45cc..4c0c62a7 100644
--- a/.talismanrc
+++ b/.talismanrc
@@ -12,4 +12,6 @@ fileignoreconfig:
       checksum: d0ef271ee5381d9feab06bda6e7e89bd0a882fee87495627bd811c1f0a5459c7
     - filename: package-lock.json
       checksum: fd06363871d0ee16ebfb5d9d0cc479e0922a615bb76584b80bb6933ee6c3e237
+    - filename: CHANGELOG.md
+      checksum: 8522880c11ce1518b18b8760a0f5a9cdcdd2d330575f50ba6ab403b7f8f7e74f
 version: "1.0"
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4dfda309..df88c9b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,21 +1,66 @@
 # Changelog
 
+## [v4.0.0](https://github.com/contentstack/live-preview-sdk/compare/v4.1.0...v4.0.0)
+
+> 20 August 2025
+
+### New Features
+
+- feat(VB-132 | VE-7062): disable editing when workflow stage rules restrict the same  (Faraaz Biyabani - [#494](https://github.com/contentstack/live-preview-sdk/pull/494))
+- feat: live preview: added outside iframe code (Mridul Sharma - [#477](https://github.com/contentstack/live-preview-sdk/pull/477))
+- feat: live preview: added outside iframe code (Mridul Sharma - [#468](https://github.com/contentstack/live-preview-sdk/pull/468))
+
+### General Changes
+
+- Live preview outside iframe (Mridul Sharma - [#492](https://github.com/contentstack/live-preview-sdk/pull/492))
+
+### New Features
+
+- feat: disable editing when workflow stage rules restrict the same (Faraaz Biyabani - [7aeeb63](https://github.com/contentstack/live-preview-sdk/commit/7aeeb6381300b19f2d459ae030275c89a9f4d21f))
+
+### Fixes
+
+- fix: resolve new tab bugs (Mridul Sharma - [b50c43e](https://github.com/contentstack/live-preview-sdk/commit/b50c43ed14ef31de86a67bc57e346aa25c5d9679))
+- fix: removed unused imports and increased the version (Mridul Sharma - [42ee5c1](https://github.com/contentstack/live-preview-sdk/commit/42ee5c1a2ef62af43ac82274e6f1809ee0be37c3))
+- fix:added offset (Karan Gandhi - [55adf72](https://github.com/contentstack/live-preview-sdk/commit/55adf7291d307134d31fe2b09168fd84622426d9))
+- fix: handle empty stage name correctly (Faraaz Biyabani - [472e2e6](https://github.com/contentstack/live-preview-sdk/commit/472e2e67687cf680b2276788e896d9c04f60a44f))
+- fix: test case fix (Karan Gandhi - [57eb755](https://github.com/contentstack/live-preview-sdk/commit/57eb7552c19fbf731cdd18ee387acd4aba5acac8))
+
+### Chores And Housekeeping
+
+- chore: replace ifs with switch (Faraaz Biyabani - [5e216ea](https://github.com/contentstack/live-preview-sdk/commit/5e216ea01311dceee09405e1265190267745afc0))
+- chore: updated version (Mridul Sharma - [ede97b9](https://github.com/contentstack/live-preview-sdk/commit/ede97b983727e69c5d44d8d9879d18592a47548a))
+- chore: update tooltip message (Faraaz Biyabani - [c23798e](https://github.com/contentstack/live-preview-sdk/commit/c23798e0467c0a6318047ee2e4fdfeef4f74a5fd))
+- chore: remove sequential from unit tests (Faraaz Biyabani - [07f3c96](https://github.com/contentstack/live-preview-sdk/commit/07f3c964950db86a2537988d53ad1b78af3f1860))
+
+### Changes to Test Assests
+
+- test: added new test cases for livePreviewEventManager and postMessageEvent (Mridul Sharma - [dffe855](https://github.com/contentstack/live-preview-sdk/commit/dffe8551a7de5912db6b8caf9a4d0f12b5bb384f))
+- test: add cases for isFieldDisabled (Faraaz Biyabani - [10c763d](https://github.com/contentstack/live-preview-sdk/commit/10c763d51b539596e859ed7c1de4de5698715ccb))
+- test: fix tests (Faraaz Biyabani - [790875a](https://github.com/contentstack/live-preview-sdk/commit/790875aef18c045f070de48f630bccdbf4cae5a9))
+- test: update message (Faraaz Biyabani - [729ac76](https://github.com/contentstack/live-preview-sdk/commit/729ac763e04f82d0f848d9550bcc05458e36ba55))
+
+### General Changes
+
+- Merge pull request #493 from contentstack/VE-7071-apply-outline-offset-highlight-for-variant-fields-on-canvas (Karan Gandhi - [92d2bcc](https://github.com/contentstack/live-preview-sdk/commit/92d2bccc73082c80ca6f6ea8097a0cf1c1b4834b))
+
 ## [v3.4.0](https://github.com/contentstack/live-preview-sdk/compare/v3.3.0...v3.4.0)
 
-> 6 August 2025
+> 7 August 2025
 
 ### Fixes
 
-- fix: multiple reloads in timeline (Mridul Sharma - [#484](https://github.com/contentstack/live-preview-sdk/pull/484))
-- fix: removed edit icon when the click is on the container (#478) (Sahil Chalke - [#485](https://github.com/contentstack/live-preview-sdk/pull/485))
+- fix: multiple reloads in timeline (Faraaz Biyabani - [#484](https://github.com/contentstack/live-preview-sdk/pull/484))
+- fix: removed edit icon when the click is on the container (#478) (Faraaz Biyabani - [#485](https://github.com/contentstack/live-preview-sdk/pull/485))
+- fix: removed edit icon when the click is on the container (Sahil Chalke - [#478](https://github.com/contentstack/live-preview-sdk/pull/478))
 - Fix: Issue with hover toolbar click-ability (Ayush Dubey - [#467](https://github.com/contentstack/live-preview-sdk/pull/467))
 - fix: modified the way we were handling fieldlocation data fetch (Sahil Chalke - [#462](https://github.com/contentstack/live-preview-sdk/pull/462))
 
 ### General Changes
 
-- VE-6918  (Aditya Pachauri - [#487](https://github.com/contentstack/live-preview-sdk/pull/487))
-- Hover Toolbar Click-ability Missed Commit (Ayush Dubey - [#482](https://github.com/contentstack/live-preview-sdk/pull/482))
-- Ve 5474 clean (Sahil Chalke - [#481](https://github.com/contentstack/live-preview-sdk/pull/481))
+- VE-6918  (Faraaz Biyabani - [#487](https://github.com/contentstack/live-preview-sdk/pull/487))
+- Hover Toolbar Click-ability Missed Commit (Faraaz Biyabani - [#482](https://github.com/contentstack/live-preview-sdk/pull/482))
+- Ve 5474 clean (Faraaz Biyabani - [#481](https://github.com/contentstack/live-preview-sdk/pull/481))
 
 ### Fixes
 
@@ -35,6 +80,7 @@
 - chore: fieldlocation fetch completed (SahilCs15 - [bab5a47](https://github.com/contentstack/live-preview-sdk/commit/bab5a47953979af9cc5acc4fc05cbe6623caeb55))
 - chore(VE-6918/error-text): unit test file added (Aditya Pachauri - [ed1c0bb](https://github.com/contentstack/live-preview-sdk/commit/ed1c0bb03bc21a92f61c63e8db6120b6b35cb17e))
 - chore(VE-6918/error-text): warning message improved (Aditya Pachauri - [8122192](https://github.com/contentstack/live-preview-sdk/commit/8122192f46a29579da04ea7e7c6e0fb102a9043a))
+- chore: skip tests (Faraaz Biyabani - [d470fcb](https://github.com/contentstack/live-preview-sdk/commit/d470fcb1962f26c48a7e4b71492a76b258d15cd6))
 - chore(VE-6918/error-text): component name changed to title case (Aditya Pachauri - [dc3901f](https://github.com/contentstack/live-preview-sdk/commit/dc3901fafe5560b8a58f57303f934e21bbb73d98))
 - chore: test fix from merge operation (Mridul Sharma - [e335877](https://github.com/contentstack/live-preview-sdk/commit/e335877c8f7d120f5f0549463f6ad1a1c81c9176))
 
@@ -44,6 +90,7 @@
 
 ### General Changes
 
+- Merge pull request #488 from contentstack/stage_v3 (Karan Gandhi - [3bcf72d](https://github.com/contentstack/live-preview-sdk/commit/3bcf72dfc58525cf9c13add4302d44c0265a5401))
 - redner the app on dom (SahilCs15 - [bd5095a](https://github.com/contentstack/live-preview-sdk/commit/bd5095a556930aeef55afc9de7f64d26f5e268d6))
 
 ## [v3.3.0](https://github.com/contentstack/live-preview-sdk/compare/v3.2.5...v3.3.0)
@@ -172,7 +219,6 @@
 
 - v3.2.2 (Hitesh Shetty - [#435](https://github.com/contentstack/live-preview-sdk/pull/435))
 - Stage v3.2.2 (Hitesh Shetty - [#433](https://github.com/contentstack/live-preview-sdk/pull/433))
-- v3.2.1 (Faraaz Biyabani - [#430](https://github.com/contentstack/live-preview-sdk/pull/430))
 
 ### Fixes
 
@@ -202,7 +248,6 @@
 ### General Changes
 
 - secrets-scan.yml (Aravind Kumar - [f9c5068](https://github.com/contentstack/live-preview-sdk/commit/f9c5068f3996d39aa73dcabac788950903513e32))
-- policy-scan.yml (Aravind Kumar - [7ae545b](https://github.com/contentstack/live-preview-sdk/commit/7ae545b3167869dc01874c8a75ffaff118d0d00a))
 - talismanrc file updated (Aravind Kumar - [8a70888](https://github.com/contentstack/live-preview-sdk/commit/8a70888d24083ff4f5f9c2878d3b94661dabbd08))
 - Updated codeowners (Aravind Kumar - [86bc538](https://github.com/contentstack/live-preview-sdk/commit/86bc538fc3f1bb42f2d86cf39ae8568be94880dd))
 - issues-jira.yml (Aravind Kumar - [84a292c](https://github.com/contentstack/live-preview-sdk/commit/84a292cc28491bdab4ea9ab819594de320a99e8e))
@@ -210,7 +255,7 @@
 
 ## [v3.2.1](https://github.com/contentstack/live-preview-sdk/compare/v3.2.0...v3.2.1)
 
-> 23 April 2025
+> 24 April 2025
 
 ### Fixes
 
@@ -222,6 +267,7 @@
 
 ### General Changes
 
+- v3.2.1 (Faraaz Biyabani - [#430](https://github.com/contentstack/live-preview-sdk/pull/430))
 - Stage-v3.2.1 (Faraaz Biyabani - [#428](https://github.com/contentstack/live-preview-sdk/pull/428))
 
 ### Fixes
@@ -247,6 +293,7 @@
 - Delete jira.yml (Aravind Kumar - [80a496c](https://github.com/contentstack/live-preview-sdk/commit/80a496c805ce52542221f9bafa11116211f24f73))
 - issues-jira.yml (Aravind Kumar - [a429983](https://github.com/contentstack/live-preview-sdk/commit/a4299833949c80c274abd8af8ae81062fd78556f))
 - policy-scan.yml (Aravind Kumar - [a4b69a0](https://github.com/contentstack/live-preview-sdk/commit/a4b69a07a50b0d8145122bf99b330c3b22d91e8f))
+- policy-scan.yml (Aravind Kumar - [7ae545b](https://github.com/contentstack/live-preview-sdk/commit/7ae545b3167869dc01874c8a75ffaff118d0d00a))
 - Delete sast-scan.yml (Aravind Kumar - [c0bffef](https://github.com/contentstack/live-preview-sdk/commit/c0bffefd3a100a96117b080bd5cd7d2f6302deea))
 - Updated codeowners (Aravind Kumar - [b759727](https://github.com/contentstack/live-preview-sdk/commit/b759727225ca20ee5e4b5addb8783a87eb8bc385))
 - codeql-analysis.yml (Aravind Kumar - [d90af9f](https://github.com/contentstack/live-preview-sdk/commit/d90af9f61ed6fca7f4fdfac6ad6993006ed771ea))
diff --git a/README.md b/README.md
index dddde365..406833c8 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-b6G+ggU20rGxqCqsgaS6zludFgj5N11xsuXhMEIARMuQY2PtyDS04TU0H5goP+32' crossorigin="anonymous">
-     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.4.0';
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.0.0';
 
      ContentstackLivePreview.init({
         stackDetails: {
diff --git a/package-lock.json b/package-lock.json
index 382564b3..00bf519c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.4.0",
+    "version": "4.0.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@contentstack/live-preview-utils",
-            "version": "3.4.0",
+            "version": "4.0.0",
             "license": "MIT",
             "dependencies": {
                 "@floating-ui/dom": "^1.7.2",
diff --git a/package.json b/package.json
index e1618b57..a110819c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.4.0",
+    "version": "4.0.0",
     "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/common/inIframe.ts b/src/common/inIframe.ts
index 7c13b33c..988ca413 100644
--- a/src/common/inIframe.ts
+++ b/src/common/inIframe.ts
@@ -1,3 +1,5 @@
+import { hasWindow } from "../utils";
+
 export function inIframe(): boolean {
     try {
         return window.self !== window.top;
@@ -5,3 +7,14 @@ export function inIframe(): boolean {
         return true;
     }
 }
+
+export function isOpeningInNewTab(): boolean {
+    try {
+        if(hasWindow()) {
+            return !!window.opener;
+        }
+        return false;
+    } catch (e) {
+        return false;
+    }
+}
diff --git a/src/livePreview/editButton/editButton.ts b/src/livePreview/editButton/editButton.ts
index e86fcbb3..df88fc7d 100644
--- a/src/livePreview/editButton/editButton.ts
+++ b/src/livePreview/editButton/editButton.ts
@@ -1,5 +1,5 @@
 import { effect } from "@preact/signals";
-import { inIframe } from "../../common/inIframe";
+import { inIframe, isOpeningInNewTab } from "../../common/inIframe";
 import Config from "../../configManager/configManager";
 import { addCslpOutline, extractDetailsFromCslp } from "../../cslp";
 import { cslpTagStyles } from "./editButton.style";
@@ -448,7 +448,7 @@ export class LivePreviewEditButton {
                 fieldPathWithIndex,
             } = extractDetailsFromCslp(cslpTag);
 
-            if (inIframe()) {
+            if (inIframe() || isOpeningInNewTab()) {
                 livePreviewPostMessage?.send("scroll", {
                     field: fieldPathWithIndex,
                     content_type_uid,
diff --git a/src/livePreview/eventManager/__test__/livePreviewEventManager.test.ts b/src/livePreview/eventManager/__test__/livePreviewEventManager.test.ts
new file mode 100644
index 00000000..0af95d76
--- /dev/null
+++ b/src/livePreview/eventManager/__test__/livePreviewEventManager.test.ts
@@ -0,0 +1,252 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { vi } from "vitest";
+import { EventManager } from "@contentstack/advanced-post-message";
+import { LIVE_PREVIEW_CHANNEL_ID } from "../livePreviewEventManager.constant";
+
+// Mock dependencies
+vi.mock("@contentstack/advanced-post-message", () => ({
+    EventManager: vi.fn(),
+}));
+
+vi.mock("../../../common/inIframe", () => ({
+    isOpeningInNewTab: vi.fn(),
+}));
+
+// Import after mocking
+import { isOpeningInNewTab } from "../../../common/inIframe";
+
+describe("livePreviewEventManager", () => {
+    let mockEventManager: any;
+    let originalWindow: any;
+
+    beforeEach(() => {
+        // Reset all mocks
+        vi.clearAllMocks();
+        
+        // Create mock EventManager
+        mockEventManager = {
+            on: vi.fn(),
+            send: vi.fn(),
+        };
+        (EventManager as any).mockImplementation(() => mockEventManager);
+        
+        // Store original window
+        originalWindow = global.window;
+        
+        // Reset isOpeningInNewTab mock
+        (isOpeningInNewTab as any).mockReturnValue(false);
+    });
+
+    afterEach(() => {
+        // Restore original window
+        global.window = originalWindow;
+        
+        // Clear module cache to reset the module state
+        vi.resetModules();
+    });
+
+    describe("when window is undefined", () => {
+        beforeEach(() => {
+            // Mock window as undefined
+            Object.defineProperty(global, "window", {
+                value: undefined,
+                writable: true,
+            });
+        });
+
+        it("should not initialize EventManager when window is undefined", async () => {
+            // Re-import the module to trigger initialization
+            const module = await import("../livePreviewEventManager");
+            
+            expect(EventManager).not.toHaveBeenCalled();
+            expect(module.default).toBeUndefined();
+        });
+    });
+
+    describe("when window is defined", () => {
+        let mockWindow: any;
+
+        beforeEach(() => {
+            // Create mock window object
+            mockWindow = {
+                parent: { postMessage: vi.fn() },
+                opener: { postMessage: vi.fn() },
+            };
+
+            Object.defineProperty(global, "window", {
+                value: mockWindow,
+                writable: true,
+            });
+        });
+
+        it("should initialize EventManager with window.parent as target when not in new tab", async () => {
+            (isOpeningInNewTab as any).mockReturnValue(false);
+
+            // Re-import the module to trigger initialization
+            const module = await import("../livePreviewEventManager");
+
+            expect(EventManager).toHaveBeenCalledWith(LIVE_PREVIEW_CHANNEL_ID, {
+                target: mockWindow.parent,
+                debug: false,
+                suppressErrors: true,
+            });
+            expect(module.default).toBe(mockEventManager);
+        });
+
+        it("should initialize EventManager with window.opener as target when in new tab", async () => {
+            (isOpeningInNewTab as any).mockReturnValue(true);
+
+            // Re-import the module to trigger initialization
+            const module = await import("../livePreviewEventManager");
+
+            expect(EventManager).toHaveBeenCalledWith(LIVE_PREVIEW_CHANNEL_ID, {
+                target: mockWindow.opener,
+                debug: false,
+                suppressErrors: true,
+            });
+            expect(module.default).toBe(mockEventManager);
+        });
+
+        it("should call isOpeningInNewTab to determine the target", async () => {
+            // Re-import the module to trigger initialization
+            await import("../livePreviewEventManager");
+
+            expect(isOpeningInNewTab).toHaveBeenCalled();
+        });
+
+        it("should use correct channel ID", async () => {
+            // Re-import the module to trigger initialization
+            await import("../livePreviewEventManager");
+
+            expect(EventManager).toHaveBeenCalledWith(
+                LIVE_PREVIEW_CHANNEL_ID,
+                expect.any(Object)
+            );
+        });
+
+        it("should set correct default event options", async () => {
+            (isOpeningInNewTab as any).mockReturnValue(false);
+
+            // Re-import the module to trigger initialization
+            await import("../livePreviewEventManager");
+
+            expect(EventManager).toHaveBeenCalledWith(
+                expect.any(String),
+                expect.objectContaining({
+                    debug: false,
+                    suppressErrors: true,
+                })
+            );
+        });
+
+        describe("target selection logic", () => {
+            it("should prioritize window.opener when isOpeningInNewTab returns true", async () => {
+                (isOpeningInNewTab as any).mockReturnValue(true);
+
+                // Re-import the module to trigger initialization
+                await import("../livePreviewEventManager");
+
+                const callArgs = (EventManager as any).mock.calls[0];
+                expect(callArgs[1].target).toBe(mockWindow.opener);
+                expect(callArgs[1].target).not.toBe(mockWindow.parent);
+            });
+
+            it("should use window.parent when isOpeningInNewTab returns false", async () => {
+                (isOpeningInNewTab as any).mockReturnValue(false);
+
+                // Re-import the module to trigger initialization
+                await import("../livePreviewEventManager");
+
+                const callArgs = (EventManager as any).mock.calls[0];
+                expect(callArgs[1].target).toBe(mockWindow.parent);
+                expect(callArgs[1].target).not.toBe(mockWindow.opener);
+            });
+
+            it("should throw error when isOpeningInNewTab throws an error", async () => {
+                (isOpeningInNewTab as any).mockImplementation(() => {
+                    throw new Error("isOpeningInNewTab error");
+                });
+
+                // Should throw because isOpeningInNewTab error is not caught in the implementation
+                await expect(async () => {
+                    await import("../livePreviewEventManager");
+                }).rejects.toThrow("isOpeningInNewTab error");
+            });
+        });
+
+        describe("edge cases", () => {
+            it("should handle missing window.parent gracefully", async () => {
+                mockWindow.parent = undefined;
+                (isOpeningInNewTab as any).mockReturnValue(false);
+
+                // Re-import the module to trigger initialization
+                const module = await import("../livePreviewEventManager");
+
+                expect(EventManager).toHaveBeenCalledWith(LIVE_PREVIEW_CHANNEL_ID, {
+                    target: undefined,
+                    debug: false,
+                    suppressErrors: true,
+                });
+                expect(module.default).toBe(mockEventManager);
+            });
+
+            it("should handle missing window.opener gracefully", async () => {
+                mockWindow.opener = undefined;
+                (isOpeningInNewTab as any).mockReturnValue(true);
+
+                // Re-import the module to trigger initialization
+                const module = await import("../livePreviewEventManager");
+
+                expect(EventManager).toHaveBeenCalledWith(LIVE_PREVIEW_CHANNEL_ID, {
+                    target: undefined,
+                    debug: false,
+                    suppressErrors: true,
+                });
+                expect(module.default).toBe(mockEventManager);
+            });
+
+            it("should handle when EventManager constructor throws", async () => {
+                (EventManager as any).mockImplementation(() => {
+                    throw new Error("EventManager constructor error");
+                });
+
+                // Should not crash the module initialization
+                expect(async () => {
+                    await import("../livePreviewEventManager");
+                }).not.toThrow();
+            });
+        });
+    });
+
+    describe("module export", () => {
+        it("should export the EventManager instance when window is available", async () => {
+            const mockWindow = {
+                parent: { postMessage: vi.fn() },
+                opener: { postMessage: vi.fn() },
+            };
+
+            Object.defineProperty(global, "window", {
+                value: mockWindow,
+                writable: true,
+            });
+
+            const module = await import("../livePreviewEventManager");
+            
+            expect(module.default).toBe(mockEventManager);
+        });
+
+        it("should export undefined when window is not available", async () => {
+            Object.defineProperty(global, "window", {
+                value: undefined,
+                writable: true,
+            });
+
+            const module = await import("../livePreviewEventManager");
+            
+            expect(module.default).toBeUndefined();
+        });
+    });
+});
\ No newline at end of file
diff --git a/src/livePreview/eventManager/__test__/postMessageEvent.hooks.test.ts b/src/livePreview/eventManager/__test__/postMessageEvent.hooks.test.ts
new file mode 100644
index 00000000..c7be3b50
--- /dev/null
+++ b/src/livePreview/eventManager/__test__/postMessageEvent.hooks.test.ts
@@ -0,0 +1,418 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { vi } from "vitest";
+import Config, { setConfigFromParams } from "../../../configManager/configManager";
+import { PublicLogger } from "../../../logger/logger";
+import livePreviewPostMessage from "../livePreviewEventManager";
+import { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from "../livePreviewEventManager.constant";
+import {
+    OnChangeLivePreviewPostMessageEventData,
+    OnChangeLivePreviewPostMessageEventTypes,
+    HistoryLivePreviewPostMessageEventData,
+} from "../types/livePreviewPostMessageEvent.type";
+import {
+    useOnEntryUpdatePostMessageEvent,
+    useHistoryPostMessageEvent,
+} from "../postMessageEvent.hooks";
+import { isOpeningInNewTab } from "../../../common/inIframe";
+
+// Mock dependencies
+vi.mock("../../../configManager/configManager", () => ({
+    default: {
+        get: vi.fn(),
+    },
+    setConfigFromParams: vi.fn(),
+}));
+
+vi.mock("../../../logger/logger", () => ({
+    PublicLogger: {
+        error: vi.fn(),
+    },
+}));
+
+vi.mock("../livePreviewEventManager", () => ({
+    default: {
+        on: vi.fn(),
+    },
+}));
+
+vi.mock("../../../common/inIframe", () => ({
+    isOpeningInNewTab: vi.fn(),
+}));
+
+describe("postMessageEvent.hooks", () => {
+    let mockWindow: any;
+    let mockConfig: any;
+    let mockOnChange: any;
+
+    beforeEach(() => {
+        // Reset all mocks
+        vi.clearAllMocks();
+
+        // Mock window object
+        mockWindow = {
+            location: {
+                href: "https://example.com",
+                reload: vi.fn(),
+            },
+            history: {
+                pushState: vi.fn(),
+                forward: vi.fn(),
+                back: vi.fn(),
+                go: vi.fn(),
+            },
+        };
+
+        // Make location.href writable
+        Object.defineProperty(mockWindow.location, 'href', {
+            writable: true,
+            value: "https://example.com"
+        });
+        
+        // Mock onChange function
+        mockOnChange = vi.fn();
+
+        // Setup global window mock
+        Object.defineProperty(global, "window", {
+            value: mockWindow,
+            writable: true,
+        });
+
+        // Setup default config mock
+        mockConfig = {
+            ssr: false,
+            onChange: mockOnChange,
+        };
+
+        (Config.get as unknown as { mockReturnValue: (val: any) => void }).mockReturnValue(mockConfig);
+        (livePreviewPostMessage?.on as unknown as { mockImplementation: (fn: any) => void })?.mockImplementation(
+            (event: string, callback: (...args: any[]) => void) => {
+                // Store the callback for manual triggering in tests
+                mockWindow._eventCallbacks = mockWindow._eventCallbacks || {};
+                mockWindow._eventCallbacks[event] = callback;
+            }
+        );
+
+        // Mock isOpeningInNewTab to return true by default
+        (isOpeningInNewTab as any).mockReturnValue(true);
+    });
+
+    afterEach(() => {
+        vi.resetAllMocks();
+    });
+
+    describe("useOnEntryUpdatePostMessageEvent", () => {
+        beforeEach(() => {
+            useOnEntryUpdatePostMessageEvent();
+        });
+
+        it("should register event listener for ON_CHANGE events", () => {
+            expect(livePreviewPostMessage?.on).toHaveBeenCalledWith(
+                LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,
+                expect.any(Function)
+            );
+        });
+
+        describe("CSR (Client-Side Rendering) scenarios", () => {
+            beforeEach(() => {
+                mockConfig.ssr = false;
+                (Config.get as any).mockReturnValue(mockConfig);
+            });
+
+            it("should call onChange when ssr is false and no event_type", () => {
+                const eventData: OnChangeLivePreviewPostMessageEventData = {
+                    hash: "test-hash",
+                };
+
+                const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE];
+                callback({ data: eventData });
+
+                expect(setConfigFromParams).toHaveBeenCalledWith({
+                    live_preview: "test-hash",
+                });
+                expect(mockOnChange).toHaveBeenCalled();
+            });
+
+            it("should not call onChange when event_type is present", () => {
+                const eventData: OnChangeLivePreviewPostMessageEventData = {
+                    hash: "test-hash",
+                    _metadata: {
+                        event_type: OnChangeLivePreviewPostMessageEventTypes.HASH_CHANGE,
+                    },
+                };
+
+                const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE];
+                callback({ data: eventData });
+
+                expect(setConfigFromParams).toHaveBeenCalledWith({
+                    live_preview: "test-hash",
+                });
+                expect(mockOnChange).not.toHaveBeenCalled();
+            });
+        });
+
+        describe("SSR (Server-Side Rendering) scenarios", () => {
+            beforeEach(() => {
+                mockConfig.ssr = true;
+                (Config.get as any).mockReturnValue(mockConfig);
+            });
+
+            it("should reload window when ssr is true and no event_type", () => {
+                // Set URL to include live_preview parameter so reload path is taken
+                mockWindow.location.href = "https://example.com?live_preview=old-hash";
+
+                const eventData: OnChangeLivePreviewPostMessageEventData = {
+                    hash: "test-hash",
+                };
+
+                const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE];
+                callback({ data: eventData });
+
+                expect(setConfigFromParams).toHaveBeenCalledWith({
+                    live_preview: "test-hash",
+                });
+                expect(mockWindow.location.reload).toHaveBeenCalled();
+                expect(mockOnChange).not.toHaveBeenCalled();
+            });
+
+            it("should not reload window when event_type is present", () => {
+                const eventData: OnChangeLivePreviewPostMessageEventData = {
+                    hash: "test-hash",
+                    _metadata: {
+                        event_type: OnChangeLivePreviewPostMessageEventTypes.URL_CHANGE,
+                    },
+                };
+
+                const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE];
+                callback({ data: eventData });
+
+                expect(setConfigFromParams).toHaveBeenCalledWith({
+                    live_preview: "test-hash",
+                });
+                expect(mockWindow.location.reload).not.toHaveBeenCalled();
+                expect(mockOnChange).not.toHaveBeenCalled();
+            });
+        });
+
+        describe("HASH_CHANGE event type", () => {
+            beforeEach(() => {
+                // Reset config for these tests to non-SSR
+                mockConfig.ssr = false;
+                (Config.get as any).mockReturnValue(mockConfig);
+            });
+
+            it("should update URL with new hash in query params", () => {
+                const eventData: OnChangeLivePreviewPostMessageEventData = {
+                    hash: "new-hash-value",
+                    _metadata: {
+                        event_type: OnChangeLivePreviewPostMessageEventTypes.HASH_CHANGE,
+                    },
+                };
+
+                const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE];
+                callback({ data: eventData });
+
+                expect(setConfigFromParams).toHaveBeenCalledWith({
+                    live_preview: "new-hash-value",
+                });
+                expect(mockWindow.history.pushState).toHaveBeenCalledWith(
+                    {},
+                    "",
+                    "https://example.com/?live_preview=new-hash-value"
+                );
+            });
+
+            it("should update existing live_preview param in URL", () => {
+                mockWindow.location.href = "https://example.com/?existing=param&live_preview=old-hash";
+                
+                const eventData: OnChangeLivePreviewPostMessageEventData = {
+                    hash: "updated-hash",
+                    _metadata: {
+                        event_type: OnChangeLivePreviewPostMessageEventTypes.HASH_CHANGE,
+                    },
+                };
+
+                const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE];
+                callback({ data: eventData });
+
+                expect(setConfigFromParams).toHaveBeenCalledWith({
+                    live_preview: "updated-hash",
+                });
+                expect(mockWindow.history.pushState).toHaveBeenCalledWith(
+                    {},
+                    "",
+                    "https://example.com/?existing=param&live_preview=updated-hash"
+                );
+            });
+        });
+
+        describe("URL_CHANGE event type", () => {
+            beforeEach(() => {
+                // Reset config for these tests to non-SSR
+                mockConfig.ssr = false;
+                (Config.get as any).mockReturnValue(mockConfig);
+            });
+
+            it("should navigate to new URL when url is provided", () => {
+                const eventData: OnChangeLivePreviewPostMessageEventData = {
+                    hash: "test-hash",
+                    url: "https://newdomain.com/new-page",
+                    _metadata: {
+                        event_type: OnChangeLivePreviewPostMessageEventTypes.URL_CHANGE,
+                    },
+                };
+
+                const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE];
+                callback({ data: eventData });
+
+                expect(setConfigFromParams).toHaveBeenCalledWith({
+                    live_preview: "test-hash",
+                });
+                expect(mockWindow.location.href).toBe("https://newdomain.com/new-page");
+            });
+
+            it("should not navigate when URL_CHANGE event type is present but url is not provided", () => {
+                const originalHref = mockWindow.location.href;
+                const eventData: OnChangeLivePreviewPostMessageEventData = {
+                    hash: "test-hash",
+                    _metadata: {
+                        event_type: OnChangeLivePreviewPostMessageEventTypes.URL_CHANGE,
+                    },
+                };
+
+                const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE];
+                callback({ data: eventData });
+
+                expect(setConfigFromParams).toHaveBeenCalledWith({
+                    live_preview: "test-hash",
+                });
+                expect(mockWindow.location.href).toBe(originalHref);
+            });
+        });
+
+        describe("Error handling", () => {
+            it("should log error and return when window is not defined", () => {
+                // Mock isOpeningInNewTab to return true so we enter the if block
+                (isOpeningInNewTab as any).mockReturnValue(true);
+                
+                // Mock window as undefined
+                Object.defineProperty(global, "window", {
+                    value: undefined,
+                    writable: true,
+                });
+
+                const eventData: OnChangeLivePreviewPostMessageEventData = {
+                    hash: "test-hash",
+                };
+
+                const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE];
+                callback({ data: eventData });
+
+                expect(PublicLogger.error).toHaveBeenCalledWith("window is not defined");
+
+                // Restore window for other tests
+                Object.defineProperty(global, "window", {
+                    value: mockWindow,
+                    writable: true,
+                });
+            });
+
+            it("should handle errors in try-catch block", () => {
+                // Mock Config.get to throw an error
+                (Config.get as any).mockImplementation(() => {
+                    throw new Error("Config error");
+                });
+
+                const eventData: OnChangeLivePreviewPostMessageEventData = {
+                    hash: "test-hash",
+                };
+
+                const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE];
+                callback({ data: eventData });
+
+                expect(PublicLogger.error).toHaveBeenCalledWith(
+                    "Error handling live preview update:",
+                    expect.any(Error)
+                );
+            });
+
+            it("should handle errors when setConfigFromParams throws", () => {
+                (setConfigFromParams as any).mockImplementation(() => {
+                    throw new Error("setConfigFromParams error");
+                });
+
+                const eventData: OnChangeLivePreviewPostMessageEventData = {
+                    hash: "test-hash",
+                };
+
+                const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE];
+                callback({ data: eventData });
+
+                expect(PublicLogger.error).toHaveBeenCalledWith(
+                    "Error handling live preview update:",
+                    expect.any(Error)
+                );
+            });
+        });
+    });
+
+    describe("useHistoryPostMessageEvent", () => {
+        beforeEach(() => {
+            useHistoryPostMessageEvent();
+        });
+
+        it("should register event listener for HISTORY events", () => {
+            expect(livePreviewPostMessage?.on).toHaveBeenCalledWith(
+                LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY,
+                expect.any(Function)
+            );
+        });
+
+        it("should handle forward navigation", () => {
+            const eventData: HistoryLivePreviewPostMessageEventData = {
+                type: "forward",
+            };
+
+            const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY];
+            callback({ data: eventData });
+
+            expect(mockWindow.history.forward).toHaveBeenCalled();
+        });
+
+        it("should handle backward navigation", () => {
+            const eventData: HistoryLivePreviewPostMessageEventData = {
+                type: "backward",
+            };
+
+            const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY];
+            callback({ data: eventData });
+
+            expect(mockWindow.history.back).toHaveBeenCalled();
+        });
+
+        it("should handle reload navigation", () => {
+            const eventData: HistoryLivePreviewPostMessageEventData = {
+                type: "reload",
+            };
+
+            const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY];
+            callback({ data: eventData });
+
+            expect(mockWindow.history.go).toHaveBeenCalled();
+        });
+
+        it("should throw error for unknown event type", () => {
+            const eventData = {
+                type: "unknown" as any,
+            };
+
+            const callback = mockWindow._eventCallbacks[LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY];
+
+            expect(() => {
+                callback({ data: eventData });
+            }).toThrow("Unhandled event: unknown");
+        });
+    });
+});
\ No newline at end of file
diff --git a/src/livePreview/eventManager/livePreviewEventManager.ts b/src/livePreview/eventManager/livePreviewEventManager.ts
index fbd5693a..cb9676db 100644
--- a/src/livePreview/eventManager/livePreviewEventManager.ts
+++ b/src/livePreview/eventManager/livePreviewEventManager.ts
@@ -1,14 +1,21 @@
 import { EventManager } from "@contentstack/advanced-post-message";
 import { LIVE_PREVIEW_CHANNEL_ID } from "./livePreviewEventManager.constant";
+import { isOpeningInNewTab } from "../../common/inIframe";
 
 let livePreviewPostMessage: EventManager | undefined;
 
 if (typeof window !== "undefined") {
-    livePreviewPostMessage = new EventManager(LIVE_PREVIEW_CHANNEL_ID, {
+    const eventOptions = {
         target: window.parent,
         debug: false,
-        suppressErrors: true,
-    });
+        suppressErrors: true
+    };
+
+    if (isOpeningInNewTab()) {
+        eventOptions.target = window.opener;
+    }
+
+    livePreviewPostMessage = new EventManager(LIVE_PREVIEW_CHANNEL_ID, eventOptions);
 }
 
 export default livePreviewPostMessage;
diff --git a/src/livePreview/eventManager/postMessageEvent.hooks.ts b/src/livePreview/eventManager/postMessageEvent.hooks.ts
index 75988942..a0e3b9f9 100644
--- a/src/livePreview/eventManager/postMessageEvent.hooks.ts
+++ b/src/livePreview/eventManager/postMessageEvent.hooks.ts
@@ -1,4 +1,6 @@
+import { isOpeningInNewTab } from "../../common/inIframe";
 import Config, { setConfigFromParams } from "../../configManager/configManager";
+import { PublicLogger } from "../../logger/logger";
 import { ILivePreviewWindowType } from "../../types/types";
 import { addParamsToUrl, isOpeningInTimeline } from "../../utils";
 import livePreviewPostMessage from "./livePreviewEventManager";
@@ -7,6 +9,7 @@ import {
     HistoryLivePreviewPostMessageEventData,
     LivePreviewInitEventResponse,
     OnChangeLivePreviewPostMessageEventData,
+    OnChangeLivePreviewPostMessageEventTypes,
 } from "./types/livePreviewPostMessageEvent.type";
 
 /**
@@ -46,12 +49,54 @@ export function useOnEntryUpdatePostMessageEvent(): void {
     livePreviewPostMessage?.on<OnChangeLivePreviewPostMessageEventData>(
         LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,
         (event) => {
-            setConfigFromParams({
-                live_preview: event.data.hash,
-            });
-            const { ssr, onChange } = Config.get();
-            if (!ssr) {
-                onChange();
+            try {
+                const { ssr, onChange } = Config.get();
+                const event_type = event.data._metadata?.event_type;
+                setConfigFromParams({
+                    live_preview: event.data.hash,
+                });
+
+                // This section will run when there is a change in the entry and the website is CSR
+                if (!ssr && !event_type) {
+                    onChange();
+                } 
+
+                if(isOpeningInNewTab()) {
+                    if(!window) {
+                        PublicLogger.error("window is not defined");
+                        return;
+                    };
+                    
+                    // This section will run when there is a change in the entry and the website is SSR
+                    if(ssr && !event_type) {
+                        if(window.location.href.includes("live_preview")) {
+                            window.location.reload();
+                        } else {
+                            const url = new URL(window.location.href);
+                            url.searchParams.set("live_preview", event.data.hash);
+                            url.searchParams.set("content_type_uid", Config.get().stackDetails.contentTypeUid || "");
+                            url.searchParams.set("entry_uid", Config.get().stackDetails.entryUid || "");
+                            window.location.href = url.toString();
+                        }
+                    }
+    
+                    // This section will run when the hash changes and the website is SSR or CSR
+                    if(event_type === OnChangeLivePreviewPostMessageEventTypes.HASH_CHANGE){
+                        const newUrl = new URL(window.location.href);
+                        newUrl.searchParams.set("live_preview", event.data.hash);
+                        window.history.pushState({}, "", newUrl.toString());
+                    }
+    
+                    // This section will run when the URL of the page changes
+                    if(event_type === OnChangeLivePreviewPostMessageEventTypes.URL_CHANGE && event.data.url){
+                        window.location.href = event.data.url;
+                    }
+                }
+
+                
+            } catch (error) {
+                PublicLogger.error("Error handling live preview update:", error);
+                return;
             }
         }
     );
@@ -95,7 +140,7 @@ export function sendInitializeLivePreviewPostMessageEvent(): void {
                 //     "init message did not contain contentTypeUid or entryUid."
                 // );
             }
-            if (Config.get().ssr || isOpeningInTimeline()) {
+            if (Config.get().ssr || isOpeningInTimeline() || isOpeningInNewTab()) {
                 addParamsToUrl();
             }
             Config.set("windowType", windowType);
diff --git a/src/livePreview/eventManager/types/livePreviewPostMessageEvent.type.ts b/src/livePreview/eventManager/types/livePreviewPostMessageEvent.type.ts
index d27bd232..1707184c 100644
--- a/src/livePreview/eventManager/types/livePreviewPostMessageEvent.type.ts
+++ b/src/livePreview/eventManager/types/livePreviewPostMessageEvent.type.ts
@@ -1,11 +1,22 @@
 import { ILivePreviewWindowType } from "../../../types/types";
 
+export const OnChangeLivePreviewPostMessageEventTypes = {
+    HASH_CHANGE: "hash_change",
+    URL_CHANGE: "url_change"
+} as const;
+
 export interface HistoryLivePreviewPostMessageEventData {
     type: "forward" | "backward" | "reload";
 }
 
 export interface OnChangeLivePreviewPostMessageEventData {
     hash: string;
+    entry_uid?: string;
+    content_type_uid?: string;
+    url?: string;
+    _metadata?: {
+        event_type: typeof OnChangeLivePreviewPostMessageEventTypes[keyof typeof OnChangeLivePreviewPostMessageEventTypes];
+    }
 }
 
 export interface LivePreviewInitEventResponse {
diff --git a/src/visualBuilder/__test__/click/fields/multi-line.test.tsx b/src/visualBuilder/__test__/click/fields/multi-line.test.tsx
index 5892dcd7..346eda0b 100644
--- a/src/visualBuilder/__test__/click/fields/multi-line.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/multi-line.test.tsx
@@ -11,6 +11,8 @@ import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage
 import { VisualBuilder } from "../../../index";
 import { triggerAndWaitForClickAction } from "../../../../__test__/utils";
 
+const EXAMPLE_STAGE_NAME = "Example Stage";
+
 vi.mock("../../../components/FieldToolbar", () => {
     return {
         default: () => {
@@ -94,23 +96,28 @@ describe("When an element is clicked in visual builder mode", () => {
         beforeAll(async () => {
             (visualBuilderPostMessage?.send as Mock).mockImplementation(
                 (eventName: string, args) => {
-                    if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DATA
-                    ) {
-                        return Promise.resolve({
-                            fieldData: "Hello world",
-                        });
-                    } else if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES
-                    ) {
-                        return Promise.resolve({
-                            "all_fields.bltapikey.en-us.single_line":
-                                "Single Line",
-                        });
+                    switch (eventName) {
+                        case VisualBuilderPostMessageEvents.GET_FIELD_DATA:
+                            return Promise.resolve({
+                                fieldData: "Hello world",
+                            });
+                        case VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES:
+                            return Promise.resolve({
+                                "all_fields.bltapikey.en-us.single_line":
+                                    "Single Line",
+                            });
+                        case VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS:
+                            return Promise.resolve({
+                                stage: { name: EXAMPLE_STAGE_NAME },
+                                permissions: {
+                                    entry: {
+                                        update: true,
+                                    },
+                                },
+                            });
+                        default:
+                            return Promise.resolve({});
                     }
-                    return Promise.resolve({});
                 }
             );
 
@@ -185,20 +192,33 @@ describe("When an element is clicked in visual builder mode", () => {
         beforeAll(async () => {
             (visualBuilderPostMessage?.send as Mock).mockImplementation(
                 (eventName: string, args) => {
-                    if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DATA
-                    ) {
-                        const values: Record<string, any> = {
-                            multi_line_textbox_multiple_: ["Hello", "world"],
-                            "multi_line_textbox_multiple_.0": "Hello",
-                            "multi_line_textbox_multiple_.1": "world",
-                        };
-                        return Promise.resolve({
-                            fieldData: values[args.entryPath],
-                        });
+                    switch (eventName) {
+                        case VisualBuilderPostMessageEvents.GET_FIELD_DATA: {
+                            const values: Record<string, any> = {
+                                multi_line_textbox_multiple_: [
+                                    "Hello",
+                                    "world",
+                                ],
+                                "multi_line_textbox_multiple_.0": "Hello",
+                                "multi_line_textbox_multiple_.1": "world",
+                            };
+                            return Promise.resolve({
+                                fieldData: values[args.entryPath],
+                            });
+                        }
+                        case VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS: {
+                            return Promise.resolve({
+                                stage: { name: EXAMPLE_STAGE_NAME },
+                                permissions: {
+                                    entry: {
+                                        update: true,
+                                    },
+                                },
+                            });
+                        }
+                        default:
+                            return Promise.resolve({});
                     }
-                    return Promise.resolve({});
                 }
             );
 
diff --git a/src/visualBuilder/__test__/click/fields/number.test.tsx b/src/visualBuilder/__test__/click/fields/number.test.tsx
index 66669c22..9190d8eb 100644
--- a/src/visualBuilder/__test__/click/fields/number.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/number.test.tsx
@@ -11,6 +11,8 @@ import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage
 import { VisualBuilder } from "../../../index";
 import { triggerAndWaitForClickAction } from "../../../../__test__/utils";
 
+const EXAMPLE_STAGE_NAME = "Example Stage";
+
 const VALUES = {
     number: "10.5",
 };
@@ -112,6 +114,18 @@ describe("When an element is clicked in visual builder mode", () => {
                         return Promise.resolve({
                             "all_fields.bltapikey.en-us.number": "Number",
                         });
+                    } else if (
+                        eventName ===
+                        VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS
+                    ) {
+                        return Promise.resolve({
+                            stage: { name: EXAMPLE_STAGE_NAME },
+                            permissions: {
+                                entry: {
+                                    update: true,
+                                },
+                            },
+                        });
                     }
                     return Promise.resolve({});
                 }
@@ -196,6 +210,18 @@ describe("When an element is clicked in visual builder mode", () => {
                         return Promise.resolve({
                             fieldData: values[args.entryPath],
                         });
+                    } else if (
+                        eventName ===
+                        VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS
+                    ) {
+                        return Promise.resolve({
+                            stage: { name: EXAMPLE_STAGE_NAME },
+                            permissions: {
+                                entry: {
+                                    update: true,
+                                },
+                            },
+                        });
                     }
                     return Promise.resolve({});
                 }
diff --git a/src/visualBuilder/__test__/click/fields/single-line.test.tsx b/src/visualBuilder/__test__/click/fields/single-line.test.tsx
index a85720ea..55a5899c 100644
--- a/src/visualBuilder/__test__/click/fields/single-line.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/single-line.test.tsx
@@ -10,7 +10,8 @@ import { Mock, vi } from "vitest";
 import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types";
 import { VisualBuilder } from "../../../index";
 import { triggerAndWaitForClickAction } from "../../../../__test__/utils";
-import { act } from "preact/test-utils";
+
+const EXAMPLE_STAGE_NAME = "Example Stage";
 
 const VALUES = {
     singleLine: "Single line",
@@ -99,23 +100,28 @@ describe("When an element is clicked in visual builder mode", () => {
         beforeAll(async () => {
             (visualBuilderPostMessage?.send as Mock).mockImplementation(
                 (eventName: string) => {
-                    if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DATA
-                    ) {
-                        return Promise.resolve({
-                            fieldData: VALUES.singleLine,
-                        });
-                    } else if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES
-                    ) {
-                        return Promise.resolve({
-                            "all_fields.bltapikey.en-us.single_line":
-                                "Single Line",
-                        });
+                    switch (eventName) {
+                        case VisualBuilderPostMessageEvents.GET_FIELD_DATA:
+                            return Promise.resolve({
+                                fieldData: VALUES.singleLine,
+                            });
+                        case VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES:
+                            return Promise.resolve({
+                                "all_fields.bltapikey.en-us.single_line":
+                                    "Single Line",
+                            });
+                        case VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS:
+                            return Promise.resolve({
+                                stage: { name: EXAMPLE_STAGE_NAME },
+                                permissions: {
+                                    entry: {
+                                        update: true,
+                                    },
+                                },
+                            });
+                        default:
+                            return Promise.resolve({});
                     }
-                    return Promise.resolve({});
                 }
             );
 
@@ -205,20 +211,32 @@ describe("When an element is clicked in visual builder mode", () => {
         beforeAll(async () => {
             (visualBuilderPostMessage?.send as Mock).mockImplementation(
                 (eventName: string, args) => {
-                    if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DATA
-                    ) {
-                        const values: Record<string, any> = {
-                            single_line_textbox_multiple_: ["Hello", "world"],
-                            "single_line_textbox_multiple_.0": "Hello",
-                            "single_line_textbox_multiple_.1": "world",
-                        };
-                        return Promise.resolve({
-                            fieldData: values[args.entryPath],
-                        });
+                    switch (eventName) {
+                        case VisualBuilderPostMessageEvents.GET_FIELD_DATA: {
+                            const values: Record<string, any> = {
+                                single_line_textbox_multiple_: [
+                                    "Hello",
+                                    "world",
+                                ],
+                                "single_line_textbox_multiple_.0": "Hello",
+                                "single_line_textbox_multiple_.1": "world",
+                            };
+                            return Promise.resolve({
+                                fieldData: values[args.entryPath],
+                            });
+                        }
+                        case VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS:
+                            return Promise.resolve({
+                                stage: { name: EXAMPLE_STAGE_NAME },
+                                permissions: {
+                                    entry: {
+                                        update: true,
+                                    },
+                                },
+                            });
+                        default:
+                            return Promise.resolve({});
                     }
-                    return Promise.resolve({});
                 }
             );
 
diff --git a/src/visualBuilder/components/FieldToolbar.tsx b/src/visualBuilder/components/FieldToolbar.tsx
index 9009ae4e..f10a19fd 100644
--- a/src/visualBuilder/components/FieldToolbar.tsx
+++ b/src/visualBuilder/components/FieldToolbar.tsx
@@ -4,7 +4,6 @@ import getChildrenDirection from "../utils/getChildrenDirection";
 import {
     ALLOWED_MODAL_EDITABLE_FIELD,
     ALLOWED_REPLACE_FIELDS,
-    DEFAULT_MULTIPLE_FIELDS,
 } from "../utils/constants";
 import { getFieldType } from "../utils/getFieldType";
 import {
@@ -20,7 +19,6 @@ import {
     MoveLeftIcon,
     MoveRightIcon,
     ReplaceAssetIcon,
-    MoreIcon,
 } from "./icons";
 import { fieldIcons } from "./icons/fields";
 import classNames from "classnames";
@@ -42,10 +40,9 @@ import {
 } from "./FieldRevert/FieldRevertComponent";
 import { LoadingIcon } from "./icons/loading";
 import { EntryPermissions } from "../utils/getEntryPermissions";
-import { EmptyAppIcon } from "./icons/EmptyAppIcon";
 import { FieldLocationAppList } from "./FieldLocationAppList";
 import { FieldLocationIcon } from "./FieldLocationIcon";
-
+import { WorkflowStageDetails } from "../utils/getWorkflowStageDetails";
 
 export type FieldDetails = Pick<
     VisualBuilderCslpEventDetails,
@@ -58,7 +55,8 @@ interface MultipleFieldToolbarProps {
     eventDetails: VisualBuilderCslpEventDetails;
     hideOverlay: () => void;
     isVariant?: boolean;
-    entryPermissions?: EntryPermissions;
+    entryPermissions?: EntryPermissions | undefined;
+    entryWorkflowStageDetails?: WorkflowStageDetails | undefined;
 }
 
 function handleReplaceAsset(fieldMetadata: CslpData) {
@@ -118,6 +116,7 @@ function FieldToolbarComponent(
         eventDetails,
         isVariant: isVariantOrParentOfVariant,
         entryPermissions,
+        entryWorkflowStageDetails,
     } = props;
     const { fieldMetadata, editableElement: targetElement } = eventDetails;
     const [isFormLoading, setIsFormLoading] = useState(false);
@@ -158,12 +157,12 @@ function FieldToolbarComponent(
                 editableElement: targetElement,
                 fieldMetadata,
             },
-            entryPermissions
+            entryPermissions,
+            entryWorkflowStageDetails
         );
         disableFieldActions = isDisabled;
 
         fieldType = getFieldType(fieldSchema);
-     
 
         Icon = fieldIcons[fieldType];
 
@@ -394,8 +393,6 @@ function FieldToolbarComponent(
         };
     }, []);
 
-
-
     useEffect(() => {
         const fetchFieldLocationData = async () => {
             try {
diff --git a/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx b/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx
index 2f637bd4..3a65abc5 100644
--- a/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx
+++ b/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx
@@ -6,7 +6,6 @@ import { singleLineFieldSchema } from "../../../__test__/data/fields";
 import { asyncRender } from "../../../__test__/utils";
 import { isFieldDisabled } from "../../utils/isFieldDisabled";
 import { FieldSchemaMap } from "../../utils/fieldSchemaMap";
-import { getEntryPermissionsCached } from "../../utils/getEntryPermissionsCached";
 import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage";
 import React from "preact/compat";
 
@@ -81,21 +80,33 @@ vi.mock("../../utils/isFieldDisabled", () => ({
 
 vi.mock("../../../cslp", () => ({
     extractDetailsFromCslp: vi.fn().mockImplementation((path) => {
-        return { 
-            content_type_uid: "mockContentTypeUid", 
+        return {
+            content_type_uid: "mockContentTypeUid",
             fieldPath: path,
-            cslpValue: path 
+            cslpValue: path,
         };
     }),
 }));
 
-vi.mock("../../utils/getEntryPermissionsCached", () => ({
-    getEntryPermissionsCached: vi.fn().mockResolvedValue({
-        create: true,
-        read: true,
-        update: true,
-        delete: true,
-        publish: true,
+vi.mock("../../utils/fetchEntryPermissionsAndStageDetails", () => ({
+    fetchEntryPermissionsAndStageDetails: async () => ({
+        acl: {
+            update: {
+                create: true,
+                read: true,
+                update: true,
+                delete: true,
+                publish: true,
+            },
+        },
+        workflowStage: {
+            stage: undefined,
+            permissions: {
+                entry: {
+                    update: true,
+                },
+            },
+        },
     }),
 }));
 
@@ -132,7 +143,6 @@ describe("FieldLabelWrapperComponent", () => {
     beforeEach(() => {
         vi.mocked(isFieldDisabled).mockReturnValue({
             isDisabled: false,
-            // @ts-expect-error - reason is an unexported literal
             reason: "",
         });
 
@@ -237,7 +247,6 @@ describe("FieldLabelWrapperComponent", () => {
     test("renders with correct class when field is disabled", async () => {
         vi.mocked(isFieldDisabled).mockReturnValue({
             isDisabled: true,
-            // @ts-expect-error - reason is an unexported literal
             reason: "You have only read access to this field",
         });
         const { findByTestId } = await asyncRender(
@@ -262,20 +271,10 @@ describe("FieldLabelWrapperComponent", () => {
 
     test("calls isFieldDisabled with correct arguments", async () => {
         const mockFieldSchema = { ...singleLineFieldSchema };
-        const mockEntryPermissions = {
-            create: true,
-            read: true,
-            update: false,
-            delete: true,
-            publish: true,
-        };
 
         vi.mocked(FieldSchemaMap.getFieldSchema).mockResolvedValue(
             mockFieldSchema
         );
-        vi.mocked(getEntryPermissionsCached).mockResolvedValue(
-            mockEntryPermissions
-        );
 
         await asyncRender(
             <FieldLabelWrapperComponent
@@ -298,7 +297,23 @@ describe("FieldLabelWrapperComponent", () => {
         expect(isFieldDisabled).toHaveBeenCalledWith(
             mockFieldSchema,
             mockEventDetails,
-            mockEntryPermissions
+            {
+                update: {
+                    create: true,
+                    read: true,
+                    update: true,
+                    delete: true,
+                    publish: true,
+                },
+            },
+            {
+                stage: undefined,
+                permissions: {
+                    entry: {
+                        update: true,
+                    },
+                },
+            }
         );
     });
 
@@ -351,7 +366,6 @@ describe("FieldLabelWrapperComponent", () => {
         expect(fieldLabelWrapper).toHaveAttribute("data-hovered-cslp", mockFieldMetadata.cslpValue);
     });
 
-
     test("does not render ContentTypeIcon when loading", async () => {
         // Mock the display names to never resolve to simulate loading state
         vi.mocked(visualBuilderPostMessage!.send).mockImplementation(() => {
diff --git a/src/visualBuilder/components/fieldLabelWrapper.tsx b/src/visualBuilder/components/fieldLabelWrapper.tsx
index 99c4003b..9ac2c22b 100644
--- a/src/visualBuilder/components/fieldLabelWrapper.tsx
+++ b/src/visualBuilder/components/fieldLabelWrapper.tsx
@@ -14,9 +14,9 @@ import { visualBuilderStyles } from "../visualBuilder.style";
 import { CslpError } from "./CslpError";
 import { hasPostMessageError } from "../utils/errorHandling";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
-import { getEntryPermissionsCached } from "../utils/getEntryPermissionsCached";
 import { ContentTypeIcon } from "./icons";
 import { ToolbarTooltip } from "./Tooltip";
+import { fetchEntryPermissionsAndStageDetails } from "../utils/fetchEntryPermissionsAndStageDetails";
 
 interface ReferenceParentMap {
     [entryUid: string]: {
@@ -55,7 +55,6 @@ async function getReferenceParentMap() {
         console.warn("[getFieldLabelWrapper] Error getting reference parent map", e);
         return {};
     }
-    
 }
 
 interface FieldLabelWrapperProps {
@@ -157,15 +156,18 @@ function FieldLabelWrapperComponent(
                 return;
             }
 
-            const entryPermissions = await getEntryPermissionsCached({
-                entryUid: props.fieldMetadata.entry_uid,
-                contentTypeUid: props.fieldMetadata.content_type_uid,
-                locale: props.fieldMetadata.locale,
-            });
+            const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+                await fetchEntryPermissionsAndStageDetails({
+                    entryUid: props.fieldMetadata.entry_uid,
+                    contentTypeUid: props.fieldMetadata.content_type_uid,
+                    locale: props.fieldMetadata.locale,
+                    variantUid: props.fieldMetadata.variant,
+                });
             const { isDisabled: fieldDisabled, reason } = isFieldDisabled(
                 fieldSchema,
                 eventDetails,
-                entryPermissions
+                entryAcl,
+                entryWorkflowStageDetails
             );
 
             const currentFieldDisplayName =
diff --git a/src/visualBuilder/eventManager/__test__/useVariantsPostMessageEvent.spec.ts b/src/visualBuilder/eventManager/__test__/useVariantsPostMessageEvent.spec.ts
index 2b9d7af9..eae0fc12 100644
--- a/src/visualBuilder/eventManager/__test__/useVariantsPostMessageEvent.spec.ts
+++ b/src/visualBuilder/eventManager/__test__/useVariantsPostMessageEvent.spec.ts
@@ -58,7 +58,7 @@ vi.mock("../../../visualBuilder", () => {
 });
 
 // Create a more realistic mock of the CSS modules
-const cssClassMock = "go655717959"; // Match the actual generated class name
+const cssClassMock = "go109692693"; // Match the actual generated class name
 
 vi.mock("../../../visualBuilder.style", () => {
     return {
diff --git a/src/visualBuilder/generators/__test__/generateToolbar.test.ts b/src/visualBuilder/generators/__test__/generateToolbar.test.ts
index 13cbdd0e..1d8c9591 100644
--- a/src/visualBuilder/generators/__test__/generateToolbar.test.ts
+++ b/src/visualBuilder/generators/__test__/generateToolbar.test.ts
@@ -7,7 +7,6 @@ import { appendFieldPathDropdown } from "../generateToolbar";
 import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage";
 import { VisualBuilderPostMessageEvents } from "../../utils/types/postMessage.types";
 import { singleLineFieldSchema } from "../../../__test__/data/fields";
-import { sleep } from "../../../__test__/utils";
 
 const MOCK_CSLP = "all_fields.bltapikey.en-us.single_line";
 
@@ -17,6 +16,28 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
     disconnect: vi.fn(),
 }));
 
+vi.mock("../../utils/fetchEntryPermissionsAndStageDetails", () => ({
+    fetchEntryPermissionsAndStageDetails: async () => ({
+        acl: {
+            update: {
+                create: true,
+                read: true,
+                update: true,
+                delete: true,
+                publish: true,
+            },
+        },
+        workflowStage: {
+            stage: undefined,
+            permissions: {
+                entry: {
+                    update: true,
+                },
+            },
+        },
+    }),
+}));
+
 describe("appendFieldPathDropdown", () => {
     let singleLineField: HTMLParagraphElement;
     let focusedToolbar: HTMLDivElement;
diff --git a/src/visualBuilder/generators/__test__/generateToolbar.test.tsx b/src/visualBuilder/generators/__test__/generateToolbar.test.tsx
index 614c7706..e4d1574e 100644
--- a/src/visualBuilder/generators/__test__/generateToolbar.test.tsx
+++ b/src/visualBuilder/generators/__test__/generateToolbar.test.tsx
@@ -1,9 +1,10 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { appendFocusedToolbar, appendFieldToolbar, appendFieldPathDropdown } from "../generateToolbar";
+import {
+    appendFieldToolbar,
+    appendFieldPathDropdown,
+} from "../generateToolbar";
 import { VisualBuilderCslpEventDetails } from "../../types/visualBuilder.types";
 import { render } from "preact";
-import FieldToolbarComponent from "../../components/FieldToolbar";
-import FieldLabelWrapperComponent from "../../components/fieldLabelWrapper";
 import { LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX } from "../../utils/constants";
 import React from "preact/compat";
 
@@ -21,6 +22,28 @@ vi.mock("../../components/fieldLabelWrapper", () => ({
     default: vi.fn().mockImplementation(() => <div>Test</div>),
 }));
 
+vi.mock("../../utils/fetchEntryPermissionsAndStageDetails", () => ({
+    fetchEntryPermissionsAndStageDetails: async () => ({
+        acl: {
+            update: {
+                create: true,
+                read: true,
+                update: true,
+                delete: true,
+                publish: true,
+            },
+        },
+        workflowStage: {
+            stage: undefined,
+            permissions: {
+                entry: {
+                    update: true,
+                },
+            },
+        },
+    }),
+}));
+
 describe("generateToolbar", () => {
     const eventDetails: VisualBuilderCslpEventDetails = {
         editableElement: document.createElement("div"),
diff --git a/src/visualBuilder/generators/generateToolbar.tsx b/src/visualBuilder/generators/generateToolbar.tsx
index b15aa768..d1ca133d 100644
--- a/src/visualBuilder/generators/generateToolbar.tsx
+++ b/src/visualBuilder/generators/generateToolbar.tsx
@@ -10,9 +10,9 @@ import {
 import FieldToolbarComponent from "../components/FieldToolbar";
 import { render } from "preact";
 import FieldLabelWrapperComponent from "../components/fieldLabelWrapper";
-import { getEntryPermissionsCached } from "../utils/getEntryPermissionsCached";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage";
+import { fetchEntryPermissionsAndStageDetails } from "../utils/fetchEntryPermissionsAndStageDetails";
 
 export function appendFocusedToolbar(
     eventDetails: VisualBuilderCslpEventDetails,
@@ -51,11 +51,13 @@ export async function appendFieldToolbar(
         ) && !isHover
     )
         return;
-    const entryPermissions = await getEntryPermissionsCached({
-        entryUid: eventDetails.fieldMetadata.entry_uid,
-        contentTypeUid: eventDetails.fieldMetadata.content_type_uid,
-        locale: eventDetails.fieldMetadata.locale,
-    });
+    const { acl: entryPermissions, workflowStage: entryWorkflowStageDetails } =
+        await fetchEntryPermissionsAndStageDetails({
+            entryUid: eventDetails.fieldMetadata.entry_uid,
+            contentTypeUid: eventDetails.fieldMetadata.content_type_uid,
+            locale: eventDetails.fieldMetadata.locale,
+            variantUid: eventDetails.fieldMetadata.variant,
+        });
     const wrapper = document.createDocumentFragment();
     render(
         <FieldToolbarComponent
@@ -63,6 +65,7 @@ export async function appendFieldToolbar(
             hideOverlay={hideOverlay}
             isVariant={isVariant}
             entryPermissions={entryPermissions}
+            entryWorkflowStageDetails={entryWorkflowStageDetails}
         />,
         wrapper
     );
diff --git a/src/visualBuilder/listeners/mouseClick.ts b/src/visualBuilder/listeners/mouseClick.ts
index d81a1ab7..d65ed0b3 100644
--- a/src/visualBuilder/listeners/mouseClick.ts
+++ b/src/visualBuilder/listeners/mouseClick.ts
@@ -30,7 +30,8 @@ import { isCollabThread } from "../generators/generateThread";
 import { toggleCollabPopup } from "../generators/generateThread";
 import { fixSvgXPath } from "../utils/collabUtils";
 import { v4 as uuidV4 } from "uuid";
-import { getEntryPermissionsCached } from "../utils/getEntryPermissionsCached";
+import { CslpData } from "../../cslp/types/cslp.types";
+import { fetchEntryPermissionsAndStageDetails } from "../utils/fetchEntryPermissionsAndStageDetails";
 
 export type HandleBuilderInteractionParams = Omit<
     EventListenerHandlerParams,
@@ -45,7 +46,11 @@ type AddFocusOverlayParams = Pick<
 type AddFocusedToolbarParams = Pick<
     EventListenerHandlerParams,
     "eventDetails" | "focusedToolbar"
-> & { hideOverlay: () => void; isVariant: boolean, options?: { isHover?: boolean } };
+> & {
+    hideOverlay: () => void;
+    isVariant: boolean;
+    options?: { isHover?: boolean };
+};
 
 function addOverlay(params: AddFocusOverlayParams) {
     if (!params.overlayWrapper || !params.editableElement) return;
@@ -295,35 +300,35 @@ function addOverlayAndToolbar(
 async function handleFieldSchemaAndIndividualFields(
     params: HandleBuilderInteractionParams,
     eventDetails: any,
-    fieldMetadata: any,
+    fieldMetadata: CslpData,
     editableElement: Element,
     previousSelectedElement: Element | null
 ) {
-    const { content_type_uid, entry_uid, fieldPath, locale } = fieldMetadata;
+    const {
+        content_type_uid,
+        entry_uid,
+        fieldPath,
+        locale,
+        variant: variantUid,
+    } = fieldMetadata;
     const fieldSchema = await FieldSchemaMap.getFieldSchema(
         content_type_uid,
         fieldPath
     );
-    let entryAcl;
-    try {
-        entryAcl = await getEntryPermissionsCached({
+    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+        await fetchEntryPermissionsAndStageDetails({
             entryUid: entry_uid,
             contentTypeUid: content_type_uid,
             locale,
+            variantUid,
         });
-    } catch (error) {
-        console.error(
-            "[Visual Builder] Error retrieving entry permissions:",
-            error
-        );
-        return;
-    }
 
     if (fieldSchema) {
         const { isDisabled } = isFieldDisabled(
             fieldSchema,
             eventDetails,
-            entryAcl
+            entryAcl,
+            entryWorkflowStageDetails
         );
         if (isDisabled) {
             addOverlay({
diff --git a/src/visualBuilder/listeners/mouseHover.ts b/src/visualBuilder/listeners/mouseHover.ts
index 38adc4d8..fee58c28 100644
--- a/src/visualBuilder/listeners/mouseHover.ts
+++ b/src/visualBuilder/listeners/mouseHover.ts
@@ -13,14 +13,11 @@ import { visualBuilderStyles } from "../visualBuilder.style";
 import { VB_EmptyBlockParentClass } from "../..";
 import Config from "../../configManager/configManager";
 import { isCollabThread } from "../generators/generateThread";
-import { getEntryPermissionsCached } from "../utils/getEntryPermissionsCached";
-import { EntryPermissions } from "../utils/getEntryPermissions";
-import visualBuilderPostMessage from "../utils/visualBuilderPostMessage";
-import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
 import { HandleBuilderInteractionParams } from "./mouseClick";
-import { appendFieldPathDropdown, removeFieldToolbar } from "../generators/generateToolbar";
+import { appendFieldPathDropdown } from "../generators/generateToolbar";
 import { VisualBuilderCslpEventDetails } from "../types/visualBuilder.types";
 import { CslpData } from "../../cslp/types/cslp.types";
+import { fetchEntryPermissionsAndStageDetails } from "../utils/fetchEntryPermissionsAndStageDetails";
 
 const config = Config.get();
 export interface HandleMouseHoverParams
@@ -71,46 +68,43 @@ function handleCursorPosition(
     }
 }
 
-function addOutline(params?: AddOutlineParams): void {
-    if(!params) {
+async function addOutline(params?: AddOutlineParams): Promise<void> {
+    if (!params) {
         return;
     }
-    const { editableElement, eventDetails, content_type_uid, fieldPath, fieldMetadata, fieldDisabled } = params;
+    const {
+        editableElement,
+        eventDetails,
+        content_type_uid,
+        fieldPath,
+        fieldMetadata,
+        fieldDisabled,
+    } = params;
     if (!editableElement) return;
     addHoverOutline(editableElement as HTMLElement, fieldDisabled);
-    FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(
-        (fieldSchema) => {
-            let entryAcl: EntryPermissions | undefined;
-            if (!fieldSchema) return;
-            getEntryPermissionsCached({
-                entryUid: fieldMetadata.entry_uid,
-                contentTypeUid: fieldMetadata.content_type_uid,
-                locale: fieldMetadata.locale,
-            })
-            .then((data) => {
-                entryAcl = data;
-            })
-            .catch((error) => {
-                console.error(
-                    "[Visual Builder] Error retrieving entry permissions:",
-                    error
-                );
-            })
-            .finally(() => {
-                const { isDisabled: fieldDisabled } =
-                    isFieldDisabled(
-                        fieldSchema,
-                        eventDetails,
-                        entryAcl
-                    );
-                addHoverOutline(editableElement, fieldDisabled);
-            });
-        }
+    const fieldSchema = await FieldSchemaMap.getFieldSchema(
+        content_type_uid,
+        fieldPath
     );
+    if (!fieldSchema) return;
+    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+        await fetchEntryPermissionsAndStageDetails({
+            entryUid: fieldMetadata.entry_uid,
+            contentTypeUid: fieldMetadata.content_type_uid,
+            locale: fieldMetadata.locale,
+            variantUid: fieldMetadata.variant,
+        });
+    const { isDisabled } = isFieldDisabled(
+        fieldSchema,
+        eventDetails,
+        entryAcl,
+        entryWorkflowStageDetails
+    );
+    addHoverOutline(editableElement, fieldDisabled || isDisabled);
 }
 
 const debouncedAddOutline = debounce(addOutline, 50, { trailing: true });
-const showOutline = (params?: AddOutlineParams): void => debouncedAddOutline(params);
+const showOutline = (params?: AddOutlineParams): Promise<void> | undefined => debouncedAddOutline(params);
 
 function hideDefaultCursor(): void {
     if (
@@ -223,7 +217,7 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
             hideCustomCursor(params.customCursor);
             return;
         }
-        if(
+        if (
             eventTarget &&
             (isFieldPathDropdown(eventTarget) || isFieldPathParent(eventTarget))
         ) {
@@ -291,10 +285,7 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
             handleCursorPosition(params.event, params.customCursor);
             showCustomCursor(params.customCursor);
             return;
-        } else if (
-            config?.collab.enable &&
-            !config?.collab.isFeedbackMode
-        ) {
+        } else if (config?.collab.enable && !config?.collab.isFeedbackMode) {
             hideCustomCursor(params.customCursor);
             return;
         }
@@ -318,48 +309,11 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
             });
         }
 
-        /**
-         * We called it seperately inside the code block to ensure that
-         * the code will not wait for the promise to resolve.
-         * If we get a cache miss, we will send a message to the iframe
-         * without blocking the code.
-         */
-        FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(
-            (fieldSchema) => {
-                if (!fieldSchema) return;
-
-                let entryAcl: EntryPermissions | undefined;
-                getEntryPermissionsCached({
-                    entryUid: fieldMetadata.entry_uid,
-                    contentTypeUid: fieldMetadata.content_type_uid,
-                    locale: fieldMetadata.locale,
-                })
-                    .then((data) => {
-                        entryAcl = data;
-                    })
-                    .catch((error) => {
-                        console.error(
-                            "[Visual Builder] Error retrieving entry permissions:",
-                            error
-                        );
-                    })
-                    .finally(() => {
-                        if (!params.customCursor) return;
-                        const { isDisabled: fieldDisabled } =
-                            isFieldDisabled(
-                                fieldSchema,
-                                eventDetails,
-                                entryAcl
-                            );
-                        const fieldType = getFieldType(fieldSchema);
-                        generateCustomCursor({
-                            fieldType,
-                            customCursor: params.customCursor,
-                            fieldDisabled,
-                        });
-                    });
-            }
-        );
+        // we can generate the cursor asynchronously
+        generateCursor({
+            eventDetails,
+            customCursor: params.customCursor,
+        });
 
         handleCursorPosition(params.event, params.customCursor);
         showCustomCursor(params.customCursor);
@@ -402,6 +356,45 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
         editableElement;
 }, 10);
 
-const handleMouseHover = async (params: HandleMouseHoverParams): Promise<void> => await throttledMouseHover(params);
+async function generateCursor({
+    eventDetails,
+    customCursor,
+}: {
+    eventDetails: VisualBuilderCslpEventDetails;
+    customCursor: HTMLDivElement | null;
+}) {
+    if (!customCursor) return;
+    const { fieldMetadata } = eventDetails;
+    const fieldSchema = await FieldSchemaMap.getFieldSchema(
+        fieldMetadata.content_type_uid,
+        fieldMetadata.fieldPath
+    );
+    if (!fieldSchema) {
+        return;
+    }
+    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+        await fetchEntryPermissionsAndStageDetails({
+            entryUid: fieldMetadata.entry_uid,
+            contentTypeUid: fieldMetadata.content_type_uid,
+            locale: fieldMetadata.locale,
+            variantUid: fieldMetadata.variant,
+        });
+    const { isDisabled: fieldDisabled } = isFieldDisabled(
+        fieldSchema,
+        eventDetails,
+        entryAcl,
+        entryWorkflowStageDetails
+    );
+    const fieldType = getFieldType(fieldSchema);
+    generateCustomCursor({
+        fieldType,
+        customCursor,
+        fieldDisabled,
+    });
+}
+
+const handleMouseHover = async (
+    params: HandleMouseHoverParams
+): Promise<void> => await throttledMouseHover(params);
 
 export default handleMouseHover;
diff --git a/src/visualBuilder/utils/__test__/handleIndividualFields.test.ts b/src/visualBuilder/utils/__test__/handleIndividualFields.test.ts
index 0fc5ff25..85d364da 100644
--- a/src/visualBuilder/utils/__test__/handleIndividualFields.test.ts
+++ b/src/visualBuilder/utils/__test__/handleIndividualFields.test.ts
@@ -9,7 +9,7 @@ import { handleAddButtonsForMultiple, removeAddInstanceButtons } from "../multip
 import { VisualBuilderPostMessageEvents } from "../types/postMessage.types";
 import visualBuilderPostMessage from "../visualBuilderPostMessage";
 import { VisualBuilder } from "../..";
-import { act, screen } from "@testing-library/preact";
+import { act } from "@testing-library/preact";
 import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../constants";
 import { FieldDataType } from "../types/index.types";
 
@@ -31,6 +31,7 @@ describe("handleIndividualFields", () => {
 
     beforeEach(() => {
         eventDetails = {
+            // @ts-expect-error mocking only required properties
             fieldMetadata: {
                 content_type_uid: "contentTypeUid",
                 entry_uid: "entryUid",
@@ -79,6 +80,16 @@ describe("handleIndividualFields", () => {
             update: true,
             delete: true,
             publish: true,
+          },
+          {
+            permissions: {
+                entry: {
+                    update: true,
+                },
+            },
+            stage: {
+                name: "Unknown"
+            }
           }
         );
         expect(eventDetails.editableElement.getAttribute(VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY)).toBe(fieldType);
diff --git a/src/visualBuilder/utils/__test__/isFieldDisabled.test.ts b/src/visualBuilder/utils/__test__/isFieldDisabled.test.ts
index 4b373c21..50efeb68 100644
--- a/src/visualBuilder/utils/__test__/isFieldDisabled.test.ts
+++ b/src/visualBuilder/utils/__test__/isFieldDisabled.test.ts
@@ -1,151 +1,183 @@
-import { describe, it, expect } from 'vitest';
-import { isFieldDisabled } from '../isFieldDisabled';
-import { ISchemaFieldMap } from '../types/index.types';
-import { FieldDetails } from '../../components/FieldToolbar';
-import Config from '../../../configManager/configManager';
-import { VisualBuilder } from '../..';
-
-describe('isFieldDisabled', () => {
-    it('should return disabled state due to read-only role', () => {
+import { describe, it, expect } from "vitest";
+import { isFieldDisabled } from "../isFieldDisabled";
+import { ISchemaFieldMap } from "../types/index.types";
+import { FieldDetails } from "../../components/FieldToolbar";
+import Config from "../../../configManager/configManager";
+import { VisualBuilder } from "../..";
+import { EntryPermissions } from "../getEntryPermissions";
+
+describe("isFieldDisabled", () => {
+    it("should return disabled state due to read-only role", () => {
+        // @ts-expect-error mocking only required properties
         const fieldSchemaMap: ISchemaFieldMap = {
             field_metadata: {
                 updateRestrict: true,
             },
         };
         const eventFieldDetails: FieldDetails = {
-            editableElement: document.createElement('div'),
+            editableElement: document.createElement("div"),
+            // @ts-expect-error mocking only required properties
             fieldMetadata: {
-                locale: 'en-us',
+                locale: "en-us",
             },
         };
 
         const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
         expect(result.isDisabled).toBe(true);
-        expect(result.reason).toBe('You have only read access to this field');
+        expect(result.reason).toBe("You have only read access to this field");
     });
 
-    it('should return disabled state due to non-localizable fields', () => {
+    it("should return disabled state due to non-localizable fields", () => {
         Config.get = () => ({
+            // @ts-expect-error mocking only required properties
             stackDetails: {
-                masterLocale: 'en-us',
+                masterLocale: "en-us",
             },
         });
 
+        // @ts-expect-error mocking only required properties
         const fieldSchemaMap: ISchemaFieldMap = {
             non_localizable: true,
         };
         const eventFieldDetails: FieldDetails = {
-            editableElement: document.createElement('div'),
+            editableElement: document.createElement("div"),
+            // @ts-expect-error mocking only required properties
             fieldMetadata: {
-                locale: 'fr-fr',
+                locale: "fr-fr",
             },
         };
 
         const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
         expect(result.isDisabled).toBe(true);
-        expect(result.reason).toBe('Editing this field is restricted in localized entries');
+        expect(result.reason).toBe(
+            "Editing this field is restricted in localized entries"
+        );
     });
 
-    it('should return disabled state due to unlinked variant', () => {
+    it("should return disabled state due to unlinked variant", () => {
+        // @ts-expect-error mocking only required properties
         const fieldSchemaMap: ISchemaFieldMap = {
             field_metadata: {
                 isUnlinkedVariant: true,
             },
         };
         const eventFieldDetails: FieldDetails = {
-            editableElement: document.createElement('div'),
+            editableElement: document.createElement("div"),
+            // @ts-expect-error mocking only required properties
             fieldMetadata: {
-                locale: 'en-us',
+                locale: "en-us",
             },
         };
 
         const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
         expect(result.isDisabled).toBe(true);
-        expect(result.reason).toBe('This field is not editable as it is not linked to the selected variant');
+        expect(result.reason).toBe(
+            "This field is not editable as it is not linked to the selected variant"
+        );
     });
 
-    it('should return disabled state due to unlocalized variant', () => {
+    it("should return disabled state due to unlocalized variant", () => {
         VisualBuilder.VisualBuilderGlobalState = {
+            // @ts-expect-error mocking only required properties
             value: {
-                locale: 'en-us',
-                variant: true,
+                locale: "en-us",
+                variant: "default",
             },
         };
 
+        // @ts-expect-error mocking only required properties
         const fieldSchemaMap: ISchemaFieldMap = {};
         const eventFieldDetails: FieldDetails = {
-            editableElement: document.createElement('div'),
+            editableElement: document.createElement("div"),
+            // @ts-expect-error mocking only required properties
             fieldMetadata: {
-                locale: 'fr-fr',
+                locale: "fr-fr",
             },
         };
 
         const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
         expect(result.isDisabled).toBe(true);
-        expect(result.reason).toBe('This field is not editable as it is not localized');
+        expect(result.reason).toBe(
+            "This field is not editable as it is not localized"
+        );
     });
 
-    it('should return disabled state due to audience mode', () => {
+    it("should return disabled state due to audience mode", () => {
         VisualBuilder.VisualBuilderGlobalState = {
+            // @ts-expect-error mocking only required properties
             value: {
                 audienceMode: true,
             },
         };
 
+        // @ts-expect-error mocking only required properties
         const fieldSchemaMap: ISchemaFieldMap = {};
         const eventFieldDetails: FieldDetails = {
-            editableElement: document.createElement('div'),
+            editableElement: document.createElement("div"),
+            // @ts-expect-error mocking only required properties
             fieldMetadata: {
-                locale: 'en-us',
+                locale: "en-us",
             },
         };
 
         const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
         expect(result.isDisabled).toBe(true);
-        expect(result.reason).toBe('Open an Experience from Audience widget to start editing');
+        expect(result.reason).toBe(
+            "Open an Experience from Audience widget to start editing"
+        );
     });
 
-    it('should return disabled state due to disabled variant', () => {
+    it("should return disabled state due to disabled variant", () => {
         VisualBuilder.VisualBuilderGlobalState = {
+            // @ts-expect-error mocking only required properties
             value: {
                 audienceMode: true,
             },
         };
 
+        // @ts-expect-error mocking only required properties
         const fieldSchemaMap: ISchemaFieldMap = {};
         const eventFieldDetails: FieldDetails = {
-            editableElement: document.createElement('div'),
+            editableElement: document.createElement("div"),
+            // @ts-expect-error mocking only required properties
             fieldMetadata: {
-                locale: 'en-us',
+                locale: "en-us",
             },
         };
-        eventFieldDetails.editableElement.classList.add('visual-builder__disabled-variant-field');
+        eventFieldDetails.editableElement.classList.add(
+            "visual-builder__disabled-variant-field"
+        );
 
         const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
         expect(result.isDisabled).toBe(true);
-        expect(result.reason).toBe('This field is not editable as it doesn\'t match the selected variant');
+        expect(result.reason).toBe(
+            "This field is not editable as it doesn't match the selected variant"
+        );
         VisualBuilder.VisualBuilderGlobalState = {
+            // @ts-expect-error mocking only required properties
             value: {
                 audienceMode: false,
             },
         };
     });
 
-    it('should return enabled state when no restrictions apply', () => {
+    it("should return enabled state when no restrictions apply", () => {
+        // @ts-expect-error mocking only required properties
         const fieldSchemaMap: ISchemaFieldMap = {};
         const eventFieldDetails: FieldDetails = {
-            editableElement: document.createElement('div'),
+            editableElement: document.createElement("div"),
+            // @ts-expect-error mocking only required properties
             fieldMetadata: {
-                locale: 'en-us',
+                locale: "en-us",
             },
         };
 
         const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
         expect(result.isDisabled).toBe(false);
-        expect(result.reason).toBe('');
+        expect(result.reason).toBe("");
     });
-    
-    it('should return disabled state due to read-only role', () => {
+
+    it("should return disabled state due to read-only role", () => {
         const fieldSchemaMap: ISchemaFieldMap = {
             data_type: "block",
             display_name: "Test Block",
@@ -228,4 +260,275 @@ describe('isFieldDisabled', () => {
         );
     });
 
+    describe("workflow stage restrictions", () => {
+        it("should return disabled state due to workflow stage permission restriction", () => {
+            // @ts-expect-error mocking only required properties
+            const fieldSchemaMap: ISchemaFieldMap = {};
+            const eventFieldDetails: FieldDetails = {
+                editableElement: document.createElement("div"),
+                // @ts-expect-error mocking only required properties
+                fieldMetadata: {
+                    locale: "en-us",
+                },
+            };
+            const entryPermissions: EntryPermissions = {
+                update: true,
+                create: true,
+                read: true,
+                delete: true,
+                publish: true,
+            };
+            const workflowStageDetails = {
+                stage: {
+                    name: "Review Stage",
+                },
+                permissions: {
+                    entry: {
+                        update: false,
+                    },
+                },
+            };
+
+            const result = isFieldDisabled(
+                fieldSchemaMap,
+                eventFieldDetails,
+                entryPermissions,
+                workflowStageDetails
+            );
+            expect(result.isDisabled).toBe(true);
+            expect(result.reason).toBe(
+                "You do not have Edit access to this entry on the 'Review Stage' workflow stage"
+            );
+        });
+
+        it("should return disabled state due to both entry permissions and workflow stage restrictions", () => {
+            // @ts-expect-error mocking only required properties
+            const fieldSchemaMap: ISchemaFieldMap = {};
+            const eventFieldDetails: FieldDetails = {
+                editableElement: document.createElement("div"),
+                // @ts-expect-error mocking only required properties
+                fieldMetadata: {
+                    locale: "en-us",
+                },
+            };
+            const entryPermissions: EntryPermissions = {
+                update: false,
+                create: true,
+                read: true,
+                delete: true,
+                publish: true,
+            };
+            const workflowStageDetails = {
+                stage: {
+                    name: "Final Review",
+                },
+                permissions: {
+                    entry: {
+                        update: false,
+                    },
+                },
+            };
+
+            const result = isFieldDisabled(
+                fieldSchemaMap,
+                eventFieldDetails,
+                entryPermissions,
+                workflowStageDetails
+            );
+            expect(result.isDisabled).toBe(true);
+            expect(result.reason).toBe(
+                "Editing is restricted for your role or by the rules for the 'Final Review' stage. Contact your admin for edit access."
+            );
+        });
+
+        it("should return enabled state when workflow stage allows editing", () => {
+            // @ts-expect-error mocking only required properties
+            const fieldSchemaMap: ISchemaFieldMap = {};
+            const eventFieldDetails: FieldDetails = {
+                editableElement: document.createElement("div"),
+                // @ts-expect-error mocking only required properties
+                fieldMetadata: {
+                    locale: "en-us",
+                },
+            };
+            const entryPermissions: EntryPermissions = {
+                update: true,
+                create: true,
+                read: true,
+                delete: true,
+                publish: true,
+            };
+            const workflowStageDetails = {
+                stage: {
+                    name: "Draft",
+                },
+                permissions: {
+                    entry: {
+                        update: true,
+                    },
+                },
+            };
+
+            const result = isFieldDisabled(
+                fieldSchemaMap,
+                eventFieldDetails,
+                entryPermissions,
+                workflowStageDetails
+            );
+            expect(result.isDisabled).toBe(false);
+            expect(result.reason).toBe("");
+        });
+
+        it("should handle workflow stage details with undefined stage name", () => {
+            // @ts-expect-error mocking only required properties
+            const fieldSchemaMap: ISchemaFieldMap = {};
+            const eventFieldDetails: FieldDetails = {
+                editableElement: document.createElement("div"),
+                // @ts-expect-error mocking only required properties
+                fieldMetadata: {
+                    locale: "en-us",
+                },
+            };
+            const entryPermissions: EntryPermissions = {
+                update: true,
+                create: true,
+                read: true,
+                delete: true,
+                publish: true,
+            };
+            const workflowStageDetails = {
+                stage: undefined,
+                permissions: {
+                    entry: {
+                        update: false,
+                    },
+                },
+            };
+
+            const result = isFieldDisabled(
+                fieldSchemaMap,
+                eventFieldDetails,
+                entryPermissions,
+                workflowStageDetails
+            );
+            expect(result.isDisabled).toBe(true);
+            expect(result.reason).toBe(
+                "You do not have Edit access to this entry on the 'Unknown' workflow stage"
+            );
+        });
+
+        it("should handle workflow stage details with missing stage name", () => {
+            // @ts-expect-error mocking only required properties
+            const fieldSchemaMap: ISchemaFieldMap = {};
+            const eventFieldDetails: FieldDetails = {
+                editableElement: document.createElement("div"),
+                // @ts-expect-error mocking only required properties
+                fieldMetadata: {
+                    locale: "en-us",
+                },
+            };
+            const entryPermissions: EntryPermissions = {
+                update: false,
+                create: true,
+                read: true,
+                delete: true,
+                publish: true,
+            };
+            const workflowStageDetails = {
+                stage: {
+                    name: undefined,
+                },
+                permissions: {
+                    entry: {
+                        update: false,
+                    },
+                },
+            };
+
+            const result = isFieldDisabled(
+                fieldSchemaMap,
+                eventFieldDetails,
+                entryPermissions,
+                // @ts-expect-error testing missing name property
+                workflowStageDetails
+            );
+            expect(result.isDisabled).toBe(true);
+            expect(result.reason).toBe(
+                "Editing is restricted for your role or by the rules for the 'Unknown' stage. Contact your admin for edit access."
+            );
+        });
+
+        it("should prioritize workflow stage restriction over other restrictions", () => {
+            // @ts-expect-error mocking only required properties
+            const fieldSchemaMap: ISchemaFieldMap = {
+                field_metadata: {
+                    updateRestrict: true,
+                },
+            };
+            const eventFieldDetails: FieldDetails = {
+                editableElement: document.createElement("div"),
+                // @ts-expect-error mocking only required properties
+                fieldMetadata: {
+                    locale: "en-us",
+                },
+            };
+            const entryPermissions: EntryPermissions = {
+                update: true,
+                create: true,
+                read: true,
+                delete: true,
+                publish: true,
+            };
+            const workflowStageDetails = {
+                stage: {
+                    name: "Protected Stage",
+                },
+                permissions: {
+                    entry: {
+                        update: false,
+                    },
+                },
+            };
+
+            const result = isFieldDisabled(
+                fieldSchemaMap,
+                eventFieldDetails,
+                entryPermissions,
+                workflowStageDetails
+            );
+            expect(result.isDisabled).toBe(true);
+            // Should return read-only role message first based on getDisableReason logic
+            expect(result.reason).toBe(
+                "You have only read access to this field"
+            );
+        });
+
+        it("should return enabled state when no workflow stage details provided", () => {
+            // @ts-expect-error mocking only required properties
+            const fieldSchemaMap: ISchemaFieldMap = {};
+            const eventFieldDetails: FieldDetails = {
+                editableElement: document.createElement("div"),
+                // @ts-expect-error mocking only required properties
+                fieldMetadata: {
+                    locale: "en-us",
+                },
+            };
+            const entryPermissions: EntryPermissions = {
+                update: true,
+                create: true,
+                read: true,
+                delete: true,
+                publish: true,
+            };
+
+            const result = isFieldDisabled(
+                fieldSchemaMap,
+                eventFieldDetails,
+                entryPermissions,
+                undefined
+            );
+            expect(result.isDisabled).toBe(false);
+            expect(result.reason).toBe("");
+        });
+    });
 });
diff --git a/src/visualBuilder/utils/__test__/updateFocussedState.test.ts b/src/visualBuilder/utils/__test__/updateFocussedState.test.ts
index 27c825bd..f427eaf0 100644
--- a/src/visualBuilder/utils/__test__/updateFocussedState.test.ts
+++ b/src/visualBuilder/utils/__test__/updateFocussedState.test.ts
@@ -1,22 +1,33 @@
 import { describe, it, expect, vi } from "vitest";
-import { updateFocussedState, updateFocussedStateOnMutation } from "../updateFocussedState";
+import {
+    updateFocussedState,
+    updateFocussedStateOnMutation,
+} from "../updateFocussedState";
 import { VisualBuilder } from "../..";
-import { addFocusOverlay, hideFocusOverlay } from "../../generators/generateOverlay";
+import {
+    addFocusOverlay,
+    hideFocusOverlay,
+} from "../../generators/generateOverlay";
 import { mockGetBoundingClientRect } from "../../../__test__/utils";
 import { act } from "@testing-library/preact";
 import { singleLineFieldSchema } from "../../../__test__/data/fields";
 import { getEntryPermissionsCached } from "../getEntryPermissionsCached";
+import { getWorkflowStageDetails } from "../getWorkflowStageDetails";
 import { isFieldDisabled } from "../isFieldDisabled";
 
 vi.mock("../../generators/generateOverlay", () => ({
     addFocusOverlay: vi.fn(),
-    hideFocusOverlay: vi.fn()
+    hideFocusOverlay: vi.fn(),
 }));
 
 vi.mock("../getEntryPermissionsCached", () => ({
     getEntryPermissionsCached: vi.fn(),
 }));
 
+vi.mock("../getWorkflowStageDetails", () => ({
+    getWorkflowStageDetails: vi.fn(),
+}));
+
 vi.mock("../../utils/isFieldDisabled", () => ({
     isFieldDisabled: vi.fn().mockReturnValue({ isDisabled: false }),
 }));
@@ -37,17 +48,19 @@ describe("updateFocussedState", () => {
     beforeEach(() => {
         let previousSelectedEditableDOM: HTMLElement;
         previousSelectedEditableDOM = document.createElement("div");
-        previousSelectedEditableDOM.setAttribute("data-cslp", "content_type_uid.entry_uid.locale.field_path");
+        previousSelectedEditableDOM.setAttribute(
+            "data-cslp",
+            "content_type_uid.entry_uid.locale.field_path"
+        );
         document.body.appendChild(previousSelectedEditableDOM);
-        VisualBuilder.VisualBuilderGlobalState.value
-                    .previousSelectedEditableDOM = previousSelectedEditableDOM;
-    })
+        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =
+            previousSelectedEditableDOM;
+    });
     afterEach(() => {
         document.body.innerHTML = "";
-        VisualBuilder.VisualBuilderGlobalState.value
-                    .previousSelectedEditableDOM = null;
-        
-    })
+        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =
+            null;
+    });
     it("should return early if required elements are not provided", async () => {
         const result = await updateFocussedState({
             editableElement: null,
@@ -60,12 +73,16 @@ describe("updateFocussedState", () => {
     });
 
     it("should hide focus overlay if newPreviousSelectedElement is not found", () => {
-        const resizeObserverMock = { disconnect: vi.fn() } as unknown as ResizeObserver;
+        const resizeObserverMock = {
+            disconnect: vi.fn(),
+        } as unknown as ResizeObserver;
         const overlayWrapperMock = document.createElement("div");
         const focusedToolbarMock = document.createElement("div");
         const visualBuilderContainerMock = document.createElement("div");
 
-        const spyQuerySelector = vi.spyOn(document, "querySelector").mockReturnValue(null);
+        const spyQuerySelector = vi
+            .spyOn(document, "querySelector")
+            .mockReturnValue(null);
         document.querySelector = vi.fn().mockReturnValue(null);
 
         updateFocussedState({
@@ -78,45 +95,58 @@ describe("updateFocussedState", () => {
 
         expect(hideFocusOverlay).toHaveBeenCalled();
         spyQuerySelector.mockRestore();
-
     });
 
     it("should update pseudo editable element styles", async () => {
         const editableElementMock = document.createElement("div");
-        editableElementMock.setAttribute("data-cslp", "content_type_uid.entry_uid.locale.field_path");
+        editableElementMock.setAttribute(
+            "data-cslp",
+            "content_type_uid.entry_uid.locale.field_path"
+        );
         const visualBuilderContainerMock = document.createElement("div");
         const overlayWrapperMock = document.createElement("div");
         const focusedToolbarMock = document.createElement("div");
-        const resizeObserverMock = { disconnect: vi.fn() } as unknown as ResizeObserver;
+        const resizeObserverMock = {
+            disconnect: vi.fn(),
+        } as unknown as ResizeObserver;
 
         const pseudoEditableElementMock = document.createElement("div");
-        pseudoEditableElementMock.classList.add("visual-builder__pseudo-editable-element");
+        pseudoEditableElementMock.classList.add(
+            "visual-builder__pseudo-editable-element"
+        );
         visualBuilderContainerMock.appendChild(pseudoEditableElementMock);
-        
+
         await act(async () => {
-          await updateFocussedState({
-              editableElement: editableElementMock,
-              visualBuilderContainer: visualBuilderContainerMock,
-              overlayWrapper: overlayWrapperMock,
-              focusedToolbar: focusedToolbarMock,
-              resizeObserver: resizeObserverMock,
-          });
-        })
+            await updateFocussedState({
+                editableElement: editableElementMock,
+                visualBuilderContainer: visualBuilderContainerMock,
+                overlayWrapper: overlayWrapperMock,
+                focusedToolbar: focusedToolbarMock,
+                resizeObserver: resizeObserverMock,
+            });
+        });
 
         expect(pseudoEditableElementMock.style.visibility).toBe("visible");
     });
 
     it("should update position of toolbar", async () => {
         const editableElementMock = document.createElement("div");
-        mockGetBoundingClientRect(editableElementMock)
-        editableElementMock.setAttribute("data-cslp", "content_type_uid.entry_uid.locale.field_path");
+        mockGetBoundingClientRect(editableElementMock);
+        editableElementMock.setAttribute(
+            "data-cslp",
+            "content_type_uid.entry_uid.locale.field_path"
+        );
         const visualBuilderContainerMock = document.createElement("div");
         const overlayWrapperMock = document.createElement("div");
         const focusedToolbarMock = document.createElement("div");
-        const resizeObserverMock = { disconnect: vi.fn() } as unknown as ResizeObserver;
+        const resizeObserverMock = {
+            disconnect: vi.fn(),
+        } as unknown as ResizeObserver;
 
         const pseudoEditableElementMock = document.createElement("div");
-        pseudoEditableElementMock.classList.add("visual-builder__pseudo-editable-element");
+        pseudoEditableElementMock.classList.add(
+            "visual-builder__pseudo-editable-element"
+        );
         visualBuilderContainerMock.appendChild(pseudoEditableElementMock);
 
         document.querySelector = vi.fn().mockReturnValue(editableElementMock);
@@ -154,10 +184,23 @@ describe("updateFocussedState", () => {
             publish: true,
         };
 
+        const mockWorkflowStageDetails = {
+            permissions: {
+                entry: {
+                    update: true,
+                },
+            },
+            stage: undefined,
+        };
+
         vi.mocked(getEntryPermissionsCached).mockResolvedValue(
             mockEntryPermissions
         );
 
+        vi.mocked(getWorkflowStageDetails).mockResolvedValue(
+            mockWorkflowStageDetails
+        );
+
         await act(async () => {
             await updateFocussedState({
                 editableElement: editableElementMock,
@@ -180,7 +223,8 @@ describe("updateFocussedState", () => {
                 editableElement: editableElementMock,
                 fieldMetadata: expect.any(Object),
             },
-            mockEntryPermissions
+            mockEntryPermissions,
+            mockWorkflowStageDetails
         );
 
         expect(addFocusOverlay).toHaveBeenCalledWith(
@@ -195,24 +239,28 @@ describe("updateFocussedStateOnMutation", () => {
     beforeEach(() => {
         let previousSelectedEditableDOM: HTMLElement;
         previousSelectedEditableDOM = document.createElement("div");
-        previousSelectedEditableDOM.setAttribute("data-cslp", "content_type_uid.entry_uid.locale.field_path");
+        previousSelectedEditableDOM.setAttribute(
+            "data-cslp",
+            "content_type_uid.entry_uid.locale.field_path"
+        );
         document.body.appendChild(previousSelectedEditableDOM);
-        VisualBuilder.VisualBuilderGlobalState.value
-                    .previousSelectedEditableDOM = previousSelectedEditableDOM;
-    })
+        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =
+            previousSelectedEditableDOM;
+    });
     afterEach(() => {
         document.body.innerHTML = "";
-        VisualBuilder.VisualBuilderGlobalState.value
-                    .previousSelectedEditableDOM = null;
-        
-    })
+        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =
+            null;
+    });
     it("should return early if focusOverlayWrapper is not provided", () => {
         const result = updateFocussedStateOnMutation(null, null, null, null);
         expect(result).toBeUndefined();
     });
 
     it("should hide focus overlay if newSelectedElement is not found", () => {
-        const resizeObserverMock = { disconnect: vi.fn() } as unknown as ResizeObserver;
+        const resizeObserverMock = {
+            disconnect: vi.fn(),
+        } as unknown as ResizeObserver;
         const focusOverlayWrapperMock = document.createElement("div");
         const focusedToolbarMock = document.createElement("div");
         const visualBuilderContainerMock = document.createElement("div");
@@ -257,4 +305,4 @@ describe("updateFocussedStateOnMutation", () => {
         expect(focusOutlineMock.style.width).toBe("100px");
         expect(focusOutlineMock.style.height).toBe("100px");
     });
-});
\ No newline at end of file
+});
diff --git a/src/visualBuilder/utils/fetchEntryPermissionsAndStageDetails.ts b/src/visualBuilder/utils/fetchEntryPermissionsAndStageDetails.ts
new file mode 100644
index 00000000..f9ed2b24
--- /dev/null
+++ b/src/visualBuilder/utils/fetchEntryPermissionsAndStageDetails.ts
@@ -0,0 +1,50 @@
+import { getEntryPermissionsCached } from "./getEntryPermissionsCached";
+import { getWorkflowStageDetails } from "./getWorkflowStageDetails";
+
+export async function fetchEntryPermissionsAndStageDetails({
+    entryUid,
+    contentTypeUid,
+    locale,
+    variantUid,
+}: {
+    entryUid: string;
+    contentTypeUid: string;
+    locale: string;
+    variantUid?: string | undefined;
+}) {
+    const entryAclPromise = getEntryPermissionsCached({
+        entryUid,
+        contentTypeUid,
+        locale,
+    });
+    const entryWorkflowStageDetailsPromise = getWorkflowStageDetails({
+        entryUid,
+        contentTypeUid,
+        locale,
+        variantUid,
+    });
+    const results = await Promise.allSettled([
+        entryAclPromise,
+        entryWorkflowStageDetailsPromise,
+    ]);
+    if (results[0].status === "rejected") {
+        console.debug(
+            "[Visual Builder] Error retrieving entry permissions",
+            results[0].reason
+        );
+    }
+    if (results[1].status === "rejected") {
+        console.debug(
+            "[Visual Builder] Error retrieving entry stage details",
+            results[1].reason
+        );
+    }
+    const acl =
+        results[0].status === "fulfilled" ? results[0].value : undefined;
+    const workflowStage =
+        results[1].status === "fulfilled" ? results[1].value : undefined;
+    return {
+        acl,
+        workflowStage,
+    };
+}
diff --git a/src/visualBuilder/utils/getEntryPermissions.ts b/src/visualBuilder/utils/getEntryPermissions.ts
index 1a61c33e..15860531 100644
--- a/src/visualBuilder/utils/getEntryPermissions.ts
+++ b/src/visualBuilder/utils/getEntryPermissions.ts
@@ -1,3 +1,4 @@
+import { VisualBuilderPostMessageEvents } from "./types/postMessage.types";
 import visualBuilderPostMessage from "./visualBuilderPostMessage";
 
 export interface EntryPermissions {
@@ -20,7 +21,7 @@ export async function getEntryPermissions({
     try {
         const permissions =
             await visualBuilderPostMessage?.send<EntryPermissions>(
-                "get-permissions",
+                VisualBuilderPostMessageEvents.GET_PERMISSIONS,
                 {
                     type: "entry",
                     entryUid,
diff --git a/src/visualBuilder/utils/getWorkflowStageDetails.ts b/src/visualBuilder/utils/getWorkflowStageDetails.ts
new file mode 100644
index 00000000..98b63ac9
--- /dev/null
+++ b/src/visualBuilder/utils/getWorkflowStageDetails.ts
@@ -0,0 +1,59 @@
+import { VisualBuilderPostMessageEvents } from "./types/postMessage.types";
+import visualBuilderPostMessage from "./visualBuilderPostMessage";
+
+export async function getWorkflowStageDetails({
+    entryUid,
+    contentTypeUid,
+    locale,
+    variantUid,
+}: {
+    entryUid: string;
+    contentTypeUid: string;
+    locale: string;
+    variantUid?: string | undefined;
+}): Promise<WorkflowStageDetails> {
+    try {
+        const result =
+            await visualBuilderPostMessage?.send<WorkflowStageDetails>(
+                VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS,
+                {
+                    entryUid,
+                    contentTypeUid,
+                    locale,
+                    variantUid,
+                }
+            );
+        if (result) {
+            return result;
+        }
+    } catch (e) {
+        console.debug(
+            "[Visual Builder] Error fetching workflow stage details",
+            e
+        );
+    }
+    // allow editing when things go wrong,
+    return {
+        stage: {
+            name: "Unknown",
+        },
+        permissions: {
+            entry: {
+                update: true,
+            },
+        },
+    };
+}
+
+export interface WorkflowStageDetails {
+    stage:
+        | {
+              name: string;
+          }
+        | undefined;
+    permissions: {
+        entry: {
+            update: boolean;
+        };
+    };
+}
diff --git a/src/visualBuilder/utils/handleIndividualFields.ts b/src/visualBuilder/utils/handleIndividualFields.ts
index 63be0e51..30f4bd5c 100644
--- a/src/visualBuilder/utils/handleIndividualFields.ts
+++ b/src/visualBuilder/utils/handleIndividualFields.ts
@@ -14,8 +14,8 @@ import { isFieldMultiple } from "./isFieldMultiple";
 import { handleInlineEditableField } from "./handleInlineEditableField";
 import { VisualBuilderEditContext } from "./types/index.types";
 import { pasteAsPlainText } from "./pasteAsPlainText";
-import { getEntryPermissionsCached } from "./getEntryPermissionsCached";
 import { removeFieldToolbar } from "../generators/generateToolbar";
+import { fetchEntryPermissionsAndStageDetails } from "./fetchEntryPermissionsAndStageDetails";
 
 /**
  * It handles all the fields based on their data type and its "multiple" property.
@@ -47,15 +47,17 @@ export async function handleIndividualFields(
 
     const fieldType = getFieldType(fieldSchema);
 
-    const entryAcl = await getEntryPermissionsCached({
-        entryUid: entry_uid,
-        contentTypeUid: content_type_uid,
-        locale,
-    });
+    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+        await fetchEntryPermissionsAndStageDetails({
+            entryUid: entry_uid,
+            contentTypeUid: content_type_uid,
+            locale,
+        });
     const { isDisabled: disabled } = isFieldDisabled(
         fieldSchema,
         eventDetails,
-        entryAcl
+        entryAcl,
+        entryWorkflowStageDetails
     );
 
     editableElement.setAttribute(
diff --git a/src/visualBuilder/utils/isFieldDisabled.ts b/src/visualBuilder/utils/isFieldDisabled.ts
index 7ad202b0..8d6c7118 100644
--- a/src/visualBuilder/utils/isFieldDisabled.ts
+++ b/src/visualBuilder/utils/isFieldDisabled.ts
@@ -1,30 +1,40 @@
-import { VisualBuilderCslpEventDetails } from "../types/visualBuilder.types";
 import Config from "../../configManager/configManager";
 import { ISchemaFieldMap } from "./types/index.types";
 import { VisualBuilder } from "..";
 import { FieldDetails } from "../components/FieldToolbar";
 import { EntryPermissions } from "./getEntryPermissions";
+import { WorkflowStageDetails } from "./getWorkflowStageDetails";
 
-enum DisableReason {
-    ReadOnly = "You have only read access to this field",
-    LocalizedEntry = "Editing this field is restricted in localized entries",
-    UnlinkedVariant = "This field is not editable as it is not linked to the selected variant",
-    AudienceMode = "Open an Experience from Audience widget to start editing",
-    DisabledVariant = "This field is not editable as it doesn't match the selected variant",
-    UnlocalizedVariant = "This field is not editable as it is not localized",
-    None = "",
-    EntryUpdateRestricted = "You do not have permission to edit this entry",
-}
+const DisableReason = {
+    ReadOnly: "You have only read access to this field",
+    LocalizedEntry: "Editing this field is restricted in localized entries",
+    UnlinkedVariant:
+        "This field is not editable as it is not linked to the selected variant",
+    AudienceMode: "Open an Experience from Audience widget to start editing",
+    DisabledVariant:
+        "This field is not editable as it doesn't match the selected variant",
+    UnlocalizedVariant: "This field is not editable as it is not localized",
+    None: "",
+    EntryUpdateRestricted: "You do not have permission to edit this entry",
+    WorkflowStagePermission: ({ stageName }: { stageName: string }) =>
+        `You do not have Edit access to this entry on the '${stageName}' workflow stage`,
+    EntryUpdateRestrictedRoleAndWorkflowStage: ({
+        stageName,
+    }: {
+        stageName: string;
+    }) =>
+        `Editing is restricted for your role or by the rules for the '${stageName}' stage. Contact your admin for edit access.`,
+} as const;
 
 interface FieldDisableState {
     isDisabled: boolean;
-    reason: DisableReason;
+    reason: string;
 }
 
-const getDisableReason = (flags: Record<string, boolean>): DisableReason => {
-    if (flags.updateRestrictDueToEntryUpdateRestriction) {
-        return DisableReason.EntryUpdateRestricted;
-    }
+const getDisableReason = (
+    flags: Record<string, boolean>,
+    params?: Record<string, any>
+) => {
     if (flags.updateRestrictDueToRole) return DisableReason.ReadOnly;
     if (flags.updateRestrictDueToNonLocalizableFields)
         return DisableReason.LocalizedEntry;
@@ -36,13 +46,30 @@ const getDisableReason = (flags: Record<string, boolean>): DisableReason => {
         return DisableReason.AudienceMode;
     if (flags.updateRestrictDueToDisabledVariant)
         return DisableReason.DisabledVariant;
+    if (
+        flags.updateRestrictDueToEntryUpdateRestriction &&
+        flags.updateRestrictDueToWorkflowStagePermission
+    ) {
+        return DisableReason.EntryUpdateRestrictedRoleAndWorkflowStage({
+            stageName: params?.stageName ? params.stageName : "Unknown",
+        });
+    }
+    if (flags.updateRestrictDueToEntryUpdateRestriction) {
+        return DisableReason.EntryUpdateRestricted;
+    }
+    if (flags.updateRestrictDueToWorkflowStagePermission) {
+        return DisableReason.WorkflowStagePermission({
+            stageName: params?.stageName ? params.stageName : "Unknown",
+        });
+    }
     return DisableReason.None;
 };
 
 export const isFieldDisabled = (
     fieldSchemaMap: ISchemaFieldMap,
     eventFieldDetails: FieldDetails,
-    entryPermissions?: EntryPermissions
+    entryPermissions?: EntryPermissions,
+    entryWorkflowStageDetails?: WorkflowStageDetails
 ): FieldDisableState => {
     const { editableElement, fieldMetadata } = eventFieldDetails;
     const masterLocale = Config.get().stackDetails.masterLocale || "en-us";
@@ -71,6 +98,13 @@ export const isFieldDisabled = (
         flags.updateRestrictDueToEntryUpdateRestriction = true;
     }
 
+    if (
+        entryWorkflowStageDetails &&
+        !entryWorkflowStageDetails.permissions.entry.update
+    ) {
+        flags.updateRestrictDueToWorkflowStagePermission = true;
+    }
+
     if (
         VisualBuilder.VisualBuilderGlobalState.value.audienceMode &&
         !editableElement.classList.contains("visual-builder__variant-field") &&
@@ -88,7 +122,9 @@ export const isFieldDisabled = (
     }
 
     const isDisabled = Object.values(flags).some(Boolean);
-    const reason = getDisableReason(flags);
+    const reason = getDisableReason(flags, {
+        stageName: entryWorkflowStageDetails?.stage?.name,
+    });
 
     return { isDisabled, reason };
 };
diff --git a/src/visualBuilder/utils/types/postMessage.types.ts b/src/visualBuilder/utils/types/postMessage.types.ts
index ec960e3e..f14c63f0 100644
--- a/src/visualBuilder/utils/types/postMessage.types.ts
+++ b/src/visualBuilder/utils/types/postMessage.types.ts
@@ -28,6 +28,8 @@ export enum VisualBuilderPostMessageEvents {
     COLLAB_MISSING_THREADS = "collab-missing-threads",
     FIELD_LOCATION_DATA = "field-location-data",
     FIELD_LOCATION_SELECTED_APP = "field-location-selected-app",
+    GET_PERMISSIONS = "get-permissions",
+    GET_WORKFLOW_STAGE_DETAILS = "get-workflow-stage-details",
 
     // FROM visual builder
     GET_ALL_ENTRIES_IN_CURRENT_PAGE = "get-entries-in-current-page",
diff --git a/src/visualBuilder/utils/updateFocussedState.ts b/src/visualBuilder/utils/updateFocussedState.ts
index a2093f3f..a5799fab 100644
--- a/src/visualBuilder/utils/updateFocussedState.ts
+++ b/src/visualBuilder/utils/updateFocussedState.ts
@@ -6,7 +6,6 @@ import {
     hideFocusOverlay,
 } from "../generators/generateOverlay";
 import { hideHoverOutline } from "../listeners/mouseHover";
-import { getEntryPermissionsCached } from "./getEntryPermissionsCached";
 import {
     LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,
     RIGHT_EDGE_BUFFER,
@@ -17,6 +16,7 @@ import { FieldSchemaMap } from "./fieldSchemaMap";
 import getChildrenDirection from "./getChildrenDirection";
 import { getPsuedoEditableElementStyles } from "./getPsuedoEditableStylesElement";
 import { isFieldDisabled } from "./isFieldDisabled";
+import { fetchEntryPermissionsAndStageDetails } from "./fetchEntryPermissionsAndStageDetails";
 
 interface ToolbarPositionParams {
     focusedToolbar: HTMLElement | null;
@@ -146,15 +146,18 @@ export async function updateFocussedState({
         fieldMetadata.content_type_uid,
         fieldMetadata.fieldPath
     );
-    const entryAcl = await getEntryPermissionsCached({
-        entryUid: fieldMetadata.entry_uid,
-        contentTypeUid: fieldMetadata.content_type_uid,
-        locale: fieldMetadata.locale,
-    });
+    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+        await fetchEntryPermissionsAndStageDetails({
+            entryUid: fieldMetadata.entry_uid,
+            contentTypeUid: fieldMetadata.content_type_uid,
+            locale: fieldMetadata.locale,
+            variantUid: fieldMetadata.variant,
+        });
     const { isDisabled } = isFieldDisabled(
         fieldSchema,
         { editableElement, fieldMetadata },
-        entryAcl
+        entryAcl,
+        entryWorkflowStageDetails
     );
     addFocusOverlay(previousSelectedEditableDOM, overlayWrapper, isDisabled);
 
diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts
index 19603c87..a1592a90 100644
--- a/src/visualBuilder/visualBuilder.style.ts
+++ b/src/visualBuilder/visualBuilder.style.ts
@@ -450,7 +450,7 @@ export function visualBuilderStyles() {
             .visual-builder__field-icon {
                 svg {
                     margin-right: 0px;
-                }            
+                }
             }
         `,
         "visual-builder__focused-toolbar__button-group": css`
@@ -620,6 +620,7 @@ export function visualBuilderStyles() {
         `,
         "visual-builder__variant-field": css`
             outline: 2px solid #bd59fa;
+            outline-offset: -2px;
         `,
         "visual-builder__pseudo-editable-element": css`
             z-index: 99999 !important;
@@ -758,7 +759,6 @@ export function visualBuilderStyles() {
             align-items: center;
             justify-content: center;
             margin-left: 0.25rem;
-            
         `,
         "visual-builder__field-location-icons-container__divider": css`
             height: 32px !important;
@@ -777,7 +777,7 @@ export function visualBuilderStyles() {
             background: #fff;
             border: 1px solid #e0e0e0;
             border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
             z-index: 1000;
             min-width: 230px;
             max-height: 250px;