diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b536f19..05a5da48 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,13 +1,108 @@
 # Changelog
 
+## [v4.0.2](https://github.com/contentstack/live-preview-sdk/compare/v4.0.1...v4.0.2)
+
+> 16 September 2025
+
+### New Features
+
+- feat(VE-7062-dev): disable editing based on workflow stage rules (Faraaz Biyabani - [#489](https://github.com/contentstack/live-preview-sdk/pull/489))
+
+### Fixes
+
+- fix: remove integrity attribute from script tag and update copyright year in `main.mustache` (Hitesh Shetty - [#499](https://github.com/contentstack/live-preview-sdk/pull/499))
+- fix: multiple reloads in timeline (Mridul Sharma - [#479](https://github.com/contentstack/live-preview-sdk/pull/479))
+- 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))
+- Fix: HoverToolbar to not render when focussed (Ayush Dubey - [#461](https://github.com/contentstack/live-preview-sdk/pull/461))
+
+### General Changes
+
+- Develop v4 (Kirtesh Suthar - [#506](https://github.com/contentstack/live-preview-sdk/pull/506))
+- 18th sept 2025 release (Kirtesh Suthar - [#505](https://github.com/contentstack/live-preview-sdk/pull/505))
+- Live preview new tab ssr issue (Mridul Sharma - [#502](https://github.com/contentstack/live-preview-sdk/pull/502))
+- VB-248 fixed the cursor moving to the start with a explicitly adding pseudo element on second time a field is visited (Sahil Chalke - [#497](https://github.com/contentstack/live-preview-sdk/pull/497))
+- VE-6918 : warning message improved  (Aditya Pachauri - [#475](https://github.com/contentstack/live-preview-sdk/pull/475))
+- HoverToolbar: Requested Changes (Ayush Dubey - [#464](https://github.com/contentstack/live-preview-sdk/pull/464))
+- Ve 5474 field modifier support for canvas in visual builder (Sahil Chalke - [#460](https://github.com/contentstack/live-preview-sdk/pull/460))
+- [Feature] HoverToolbar (Ayush Dubey - [#455](https://github.com/contentstack/live-preview-sdk/pull/455))
+- Disable scroll when field modifer is active (Sahil Chalke - [#458](https://github.com/contentstack/live-preview-sdk/pull/458))
+- [HoverToolbar]: Handling postMessage for ReferenceParentMap and rendering changes (Ayush Dubey - [#453](https://github.com/contentstack/live-preview-sdk/pull/453))
+- [Feat: HoverToolbar] Component and rendering logic changes (Ayush Dubey - [#450](https://github.com/contentstack/live-preview-sdk/pull/450))
+- Field modifiers in canvas (Sairaj - [#449](https://github.com/contentstack/live-preview-sdk/pull/449))
+
+### New Features
+
+- feat: hovertoolbar component and rendering (csAyushDubey - [000168e](https://github.com/contentstack/live-preview-sdk/commit/000168ed0a2757d48912e96917950b4915cce8ab))
+- feat: fieldLabelWrapper changes (csAyushDubey - [42c1576](https://github.com/contentstack/live-preview-sdk/commit/42c15760efe4faf271e78911be5db8f76be8c700))
+
+### Fixes
+
+- fix: tests (csAyushDubey - [71f24d8](https://github.com/contentstack/live-preview-sdk/commit/71f24d82b67ad1682dd9240fddc84adbede15211))
+- fix: fixed the required changes (SahilCs15 - [435a028](https://github.com/contentstack/live-preview-sdk/commit/435a02894c456c015107a10ee0367f8f5a348ecf))
+- fix: resolved the issues (SahilCs15 - [a0ff5b0](https://github.com/contentstack/live-preview-sdk/commit/a0ff5b0d32c8b62f86e81bd5130f6cce04aa914f))
+- fix: undo unneccsary changes (SahilCs15 - [bf2cc68](https://github.com/contentstack/live-preview-sdk/commit/bf2cc68b83f3bb4889c3ecc497b6e77d785ee001))
+- fix: new tab ssr params issue fix (Mridul Sharma - [b78db51](https://github.com/contentstack/live-preview-sdk/commit/b78db513ce62e657c7ca9b4c343b6742a47e293e))
+- fix: missed rendering case (csAyushDubey - [8478bbc](https://github.com/contentstack/live-preview-sdk/commit/8478bbc2b1216d78fbbb1a831ee47dbb62e1f413))
+- fix: removed not requied changes (SahilCs15 - [37dccb8](https://github.com/contentstack/live-preview-sdk/commit/37dccb8265ce92ac6f63832220828ac7ec41428b))
+- fix: disable scroll when field modifer is active (SahilCs15 - [1cae0c3](https://github.com/contentstack/live-preview-sdk/commit/1cae0c38962d8b4cef541931125d5e4c2d987fa5))
+- fix: no hovertoolbar when focussed (csAyushDubey - [a80d08d](https://github.com/contentstack/live-preview-sdk/commit/a80d08d26de47e9eb357b0fc2da5888f3f72ddb4))
+- fix: remove integrity attribute from script tag and update copyright year in main.mustache (hiteshshetty-dev - [51fec5b](https://github.com/contentstack/live-preview-sdk/commit/51fec5bbe8ad125552f404bf4844a94aa58960e2))
+- fix: changed order in tooltip and customcursor hiding (csAyushDubey - [cc71759](https://github.com/contentstack/live-preview-sdk/commit/cc71759fe7479f46d4cdc6dc76e433cd67b1336a))
+- fix: addresed the requested cahnges (SahilCs15 - [12be298](https://github.com/contentstack/live-preview-sdk/commit/12be2984477ce3dfd249a81de33f1777c6cf59eb))
+- fix:removed uncessary changes (SahilCs15 - [14ba432](https://github.com/contentstack/live-preview-sdk/commit/14ba43239ccc486767ea282729bb3ec7f6f824f0))
+- fix: field parent clickability (csAyushDubey - [ac4fdb3](https://github.com/contentstack/live-preview-sdk/commit/ac4fdb383bc2c27c8e157446e663cbdbcf0879bd))
+- fix: fixed conficts (SahilCs15 - [c8e3a35](https://github.com/contentstack/live-preview-sdk/commit/c8e3a350cdc1f59a3422b05265d9d9ade5e5ac79))
+- fix: tooltip arrow change (csAyushDubey - [bab4171](https://github.com/contentstack/live-preview-sdk/commit/bab41716a7dfbe4bcb3b74f310cb314c2faa16b4))
+
+### Chores And Housekeeping
+
+- chore: rendered the fieldmodifier apps added an event listner to send the selected app (SahilCs15 - [26a70f4](https://github.com/contentstack/live-preview-sdk/commit/26a70f48ac9e62af5b7f9d69bc10eefa0f103255))
+- chore: added test cases for the field location data (SahilCs15 - [c394b1f](https://github.com/contentstack/live-preview-sdk/commit/c394b1f74fca020f9cc9eef3a8ca24cc51882507))
+- chore: fieldlocation fetch completed (SahilCs15 - [2c4e0ee](https://github.com/contentstack/live-preview-sdk/commit/2c4e0ee8896cf71c22edbadcaa750d75f4642de3))
+- chore: added test cases for testing the pseudo element (SahilCs15 - [41de9c3](https://github.com/contentstack/live-preview-sdk/commit/41de9c3fc50f33dd83d53767d216c4dfd0c43e88))
+- chore(VE-6918/error-text): unit test file added (Aditya Pachauri - [7ecfb19](https://github.com/contentstack/live-preview-sdk/commit/7ecfb19309e55bba554ad71cf8b66bd95c575a1e))
+- chore(VE-6918/error-text): warning message improved (Aditya Pachauri - [6b83664](https://github.com/contentstack/live-preview-sdk/commit/6b83664d5393bd5ebaf0c57667c0086f328d50d2))
+- chore: remove ssri and @types/ssri from installed packages (hiteshshetty-dev - [2305f45](https://github.com/contentstack/live-preview-sdk/commit/2305f45ffb102555d1a56145b0e715c2cda72ba9))
+- chore: cleanup commit (csAyushDubey - [51204af](https://github.com/contentstack/live-preview-sdk/commit/51204af486426ade2095bdc84b8cf46c375ebb2c))
+- chore: increased test timeout for CI (csAyushDubey - [8830f3c](https://github.com/contentstack/live-preview-sdk/commit/8830f3c3fa5bec5253b3b57f85e866d331089198))
+- chore: increased timeout further (csAyushDubey - [da638dd](https://github.com/contentstack/live-preview-sdk/commit/da638dd326270a094cc456289b6c533bca1f43ba))
+- chore(VE-6918/error-text): component name changed to title case (Aditya Pachauri - [ec3ccab](https://github.com/contentstack/live-preview-sdk/commit/ec3ccab4ef0d8d456d650f4dd6896d119bb9c32b))
+- chore: removed unused console log (Mridul Sharma - [e65d15c](https://github.com/contentstack/live-preview-sdk/commit/e65d15c51445e58b46e8d37a2a375fe2cf2f739a))
+- chore: added test cases and updated .talismanrc (SahilCs15 - [07ffb6e](https://github.com/contentstack/live-preview-sdk/commit/07ffb6ea358ff1232c958b7e2cd05b25b46f430f))
+- chore: talismanrc update (csAyushDubey - [d9a0d09](https://github.com/contentstack/live-preview-sdk/commit/d9a0d09bd157ffcf8675c05efc5afd6add854c56))
+- chore: added retry to vitest (csAyushDubey - [abfd640](https://github.com/contentstack/live-preview-sdk/commit/abfd64004407350d1e65af16fcf11f564edcfa52))
+- chore: incresed hook timeout for CI (csAyushDubey - [eb2d72f](https://github.com/contentstack/live-preview-sdk/commit/eb2d72f7665f65ef9c46b4d3a6f36c1bd045cef9))
+
+### Changes to Test Assests
+
+- test: fieldlabelwrapper (csAyushDubey - [bc21aae](https://github.com/contentstack/live-preview-sdk/commit/bc21aae35120e03d9b555676974442b955c046cd))
+- test: updated new tab test for ssr reload (Mridul Sharma - [f3c6abc](https://github.com/contentstack/live-preview-sdk/commit/f3c6abcffa822e224f6bd6a95bb6d7f99e12e3e0))
+
+### General Changes
+
+- redner the app on dom (SahilCs15 - [88a81a4](https://github.com/contentstack/live-preview-sdk/commit/88a81a4d82cb02b1e54977aa5d9fa684a6a773a2))
+- Delete secrets-scan.yml (Aravind Kumar - [52f91a4](https://github.com/contentstack/live-preview-sdk/commit/52f91a4c851d9b0e618ce0bb8c96863fba85065c))
+- Updated codeowners (Aravind Kumar - [1b89e20](https://github.com/contentstack/live-preview-sdk/commit/1b89e20fab643f51abe0b5edd4dec357622fce92))
+
 ## [v4.0.1](https://github.com/contentstack/live-preview-sdk/compare/v4.0.0...v4.0.1)
 
-> 22 August 2025
+> 25 August 2025
+
+### General Changes
+
+- V4.0.1 (Zuhair Ahmed - [#496](https://github.com/contentstack/live-preview-sdk/pull/496))
 
 ### Fixes
 
 - fix(preview): add util function to allow operations in preview share (Zuhair Ahmed - [fb70cdf](https://github.com/contentstack/live-preview-sdk/commit/fb70cdf8f238a0f54bbf85cacd84a09688d54b9e))
 
+### Chores And Housekeeping
+
+- chore(talisman): update .talismanrc (Zuhair Ahmed - [e044f1b](https://github.com/contentstack/live-preview-sdk/commit/e044f1b304c2de666471f47d4a5a3235945b6f6c))
+- chore(readme): update readme (Zuhair Ahmed - [2e6d835](https://github.com/contentstack/live-preview-sdk/commit/2e6d835b4d99ca628835e00a6cb1ff1a2197c039))
+
 ## [v4.0.0](https://github.com/contentstack/live-preview-sdk/compare/v3.4.0...v4.0.0)
 
 > 22 August 2025
@@ -520,9 +615,11 @@
 ### General Changes
 
 - sync main for upcoming release (Hitesh Shetty - [#338](https://github.com/contentstack/live-preview-sdk/pull/338))
+- 3.1.0 (Kirtesh Suthar - [#323](https://github.com/contentstack/live-preview-sdk/pull/323))
 
 ### Fixes
 
+- fix: live preview doc (Kirtesh Suthar - [f81fdf5](https://github.com/contentstack/live-preview-sdk/commit/f81fdf55fd2ab2ce4cac3bf974b0a31566c24001))
 - fix: live preview doc (Kirtesh Suthar - [8fcdcc5](https://github.com/contentstack/live-preview-sdk/commit/8fcdcc5127ea722bd9c01f74b1168d9f579e5f30))
 
 ### Chores And Housekeeping
@@ -544,7 +641,7 @@
 
 ## [v3.1.0](https://github.com/contentstack/live-preview-sdk/compare/v3.0.2...v3.1.0)
 
-> 16 January 2025
+> 10 January 2025
 
 ### New Features
 
@@ -561,7 +658,6 @@
 
 ### General Changes
 
-- 3.1.0 (Kirtesh Suthar - [#323](https://github.com/contentstack/live-preview-sdk/pull/323))
 - Feat/auto changelog (Kirtesh Suthar - [#321](https://github.com/contentstack/live-preview-sdk/pull/321))
 
 ### New Features
@@ -572,7 +668,6 @@
 ### Fixes
 
 - fix: issue with variant revert dropdown in canvas and show variant icon for multiple fields (Srinadh Reddy - [8718c48](https://github.com/contentstack/live-preview-sdk/commit/8718c4832f30606437da1fd18513006f21e0fd34))
-- fix: live preview doc (Kirtesh Suthar - [f81fdf5](https://github.com/contentstack/live-preview-sdk/commit/f81fdf55fd2ab2ce4cac3bf974b0a31566c24001))
 
 ### Chores And Housekeeping
 
diff --git a/README.md b/README.md
index 639a89c1..a07970e9 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' crossorigin="anonymous">
-     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.0.1';
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.0.2';
 
      ContentstackLivePreview.init({
         stackDetails: {
diff --git a/package-lock.json b/package-lock.json
index 18739991..d427cb24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "4.0.1",
+    "version": "4.0.2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@contentstack/live-preview-utils",
-            "version": "4.0.1",
+            "version": "4.0.2",
             "license": "MIT",
             "dependencies": {
                 "@floating-ui/dom": "^1.7.2",
diff --git a/package.json b/package.json
index 3e7ac120..973c2687 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "4.0.1",
+    "version": "4.0.2",
     "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/visualBuilder/components/VariantIndicator.tsx b/src/visualBuilder/components/VariantIndicator.tsx
new file mode 100644
index 00000000..f60620ce
--- /dev/null
+++ b/src/visualBuilder/components/VariantIndicator.tsx
@@ -0,0 +1,12 @@
+import React from "preact/compat";
+import { VariantIcon } from "./icons/variant";
+import { visualBuilderStyles } from "../visualBuilder.style";
+
+export function VariantIndicator(): JSX.Element {
+    return (
+        <div className={visualBuilderStyles()["visual-builder__variant-indicator"]}>
+            <VariantIcon size="18px" />
+        </div>
+    );
+
+}
\ No newline at end of file
diff --git a/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx b/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx
index 3a65abc5..f4ab4738 100644
--- a/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx
+++ b/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx
@@ -118,7 +118,13 @@ vi.mock("../generators/generateCustomCursor", () => ({
 }));
 
 vi.mock("../visualBuilder.style", () => ({
-    visualBuilderStyles: vi.fn().mockReturnValue({}),
+    visualBuilderStyles: vi.fn().mockReturnValue({
+        "visual-builder__focused-toolbar--variant": "visual-builder__focused-toolbar--variant"
+    }),
+}));
+
+vi.mock("../VariantIndicator", () => ({
+    VariantIndicator: () => <div data-testid="variant-indicator">Variant</div>
 }));
 
 vi.mock("../../utils/errorHandling", () => ({
@@ -387,4 +393,78 @@ describe("FieldLabelWrapperComponent", () => {
         const contentTypeIcon = container.querySelector(".visual-builder__content-type-icon");
         expect(contentTypeIcon).not.toBeInTheDocument();
     });
+
+    test("renders VariantIndicator when field has variant", async () => {
+        const variantFieldMetadata = {
+            ...mockFieldMetadata,
+            variant: "variant-uid-123"
+        };
+
+        const { findByTestId } = await asyncRender(
+            <FieldLabelWrapperComponent
+                fieldMetadata={variantFieldMetadata}
+                eventDetails={mockEventDetails}
+                parentPaths={[]}
+                getParentEditableElement={mockGetParentEditable}
+            />
+        );
+
+        const variantIndicator = await findByTestId("variant-indicator");
+        expect(variantIndicator).toBeInTheDocument();
+    });
+
+    test("does not render VariantIndicator when field has no variant", async () => {
+        const { container } = await asyncRender(
+            <FieldLabelWrapperComponent
+                fieldMetadata={mockFieldMetadata}
+                eventDetails={mockEventDetails}
+                parentPaths={[]}
+                getParentEditableElement={mockGetParentEditable}
+            />
+        );
+
+        await waitFor(() => {
+            const variantIndicator = container.querySelector("[data-testid='variant-indicator']");
+            expect(variantIndicator).not.toBeInTheDocument();
+        });
+    });
+
+    test("applies variant CSS classes when field has variant", async () => {
+        const variantFieldMetadata = {
+            ...mockFieldMetadata,
+            variant: "variant-uid-123"
+        };
+
+        const { findByTestId } = await asyncRender(
+            <FieldLabelWrapperComponent
+                fieldMetadata={variantFieldMetadata}
+                eventDetails={mockEventDetails}
+                parentPaths={[]}
+                getParentEditableElement={mockGetParentEditable}
+            />
+        );
+
+        const fieldLabelWrapper = await findByTestId("visual-builder__focused-toolbar__field-label-wrapper");
+        
+        await waitFor(() => {
+            expect(fieldLabelWrapper).toHaveClass("visual-builder__focused-toolbar--variant");
+        });
+    });
+
+    test("does not apply variant CSS classes when field has no variant", async () => {
+        const { findByTestId } = await asyncRender(
+            <FieldLabelWrapperComponent
+                fieldMetadata={mockFieldMetadata}
+                eventDetails={mockEventDetails}
+                parentPaths={[]}
+                getParentEditableElement={mockGetParentEditable}
+            />
+        );
+
+        const fieldLabelWrapper = await findByTestId("visual-builder__focused-toolbar__field-label-wrapper");
+        
+        await waitFor(() => {
+            expect(fieldLabelWrapper).not.toHaveClass("visual-builder__focused-toolbar--variant");
+        });
+    });
 });
diff --git a/src/visualBuilder/components/fieldLabelWrapper.tsx b/src/visualBuilder/components/fieldLabelWrapper.tsx
index 9ac2c22b..2ef77e6e 100644
--- a/src/visualBuilder/components/fieldLabelWrapper.tsx
+++ b/src/visualBuilder/components/fieldLabelWrapper.tsx
@@ -17,6 +17,7 @@ import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types
 import { ContentTypeIcon } from "./icons";
 import { ToolbarTooltip } from "./Tooltip";
 import { fetchEntryPermissionsAndStageDetails } from "../utils/fetchEntryPermissionsAndStageDetails";
+import { VariantIndicator } from "./VariantIndicator";
 
 interface ReferenceParentMap {
     [entryUid: string]: {
@@ -246,6 +247,7 @@ function FieldLabelWrapperComponent(
                 ]
             )}
         >
+            {currentField.isVariant ? <VariantIndicator /> : null}
             <ToolbarTooltip data={{contentTypeName: currentField.parentContentTypeName, referenceFieldName: currentField.referenceFieldName}} disabled={!currentField.isReference || isDropdownOpen}>
                 <div
                     className={classNames(
@@ -266,6 +268,15 @@ function FieldLabelWrapperComponent(
                             "field-label-dropdown-open": isDropdownOpen,
                             [visualBuilderStyles()["field-label-dropdown-open"]]:
                                 isDropdownOpen,
+                        },
+                        {
+                            "visual-builder__focused-toolbar--variant":
+                                currentField.isVariant,
+                        },
+                        {
+                            [visualBuilderStyles()[
+                                "visual-builder__focused-toolbar--variant"
+                            ]]: currentField.isVariant,
                         }
                     )}
                     onClick={() => setIsDropdownOpen((prev) => !prev)}
diff --git a/src/visualBuilder/components/icons/variant.tsx b/src/visualBuilder/components/icons/variant.tsx
index b18d40c3..51f2608e 100644
--- a/src/visualBuilder/components/icons/variant.tsx
+++ b/src/visualBuilder/components/icons/variant.tsx
@@ -1,13 +1,19 @@
 import React from "preact/compat";
 
-export function VariantIcon(): JSX.Element {
-    return (
+export function VariantIcon(props: {
+    size?: string;
+}): JSX.Element {
+    return ( 
         <svg
             width="12"
             height="12"
             viewBox="0 0 12 12"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
+            style={{
+                width: props.size,
+                height: props.size,
+            }}
         >
             <path
                 fill-rule="evenodd"
@@ -15,6 +21,6 @@ export function VariantIcon(): JSX.Element {
                 d="M4.41131 0.157165C4.34585 0.0589769 4.23565 0 4.11765 0C3.99964 0 3.88944 0.0589769 3.82398 0.157165L0.0592764 5.80422C-0.0197588 5.92278 -0.0197588 6.07722 0.0592764 6.19578L3.82398 11.8428C3.88944 11.941 3.99964 12 4.11765 12C4.23565 12 4.34585 11.941 4.41131 11.8428L6 9.4598L7.58869 11.8428C7.65415 11.941 7.76435 12 7.88235 12C8.00036 12 8.11056 11.941 8.17602 11.8428L11.9407 6.19578C12.0198 6.07722 12.0198 5.92278 11.9407 5.80422L8.17602 0.157165C8.11056 0.0589769 8.00036 0 7.88235 0C7.76435 0 7.65415 0.0589769 7.58869 0.157165L6 2.5402L4.41131 0.157165ZM5.57582 3.17647L4.11765 0.989215L0.777124 6L4.11765 11.0108L5.57582 8.82353L3.82398 6.19578C3.74495 6.07722 3.74495 5.92278 3.82398 5.80422L5.57582 3.17647ZM6 8.18726L4.54183 6L6 3.81274L7.45817 6L6 8.18726ZM6.42418 8.82353L8.17602 6.19578C8.25505 6.07722 8.25505 5.92278 8.17602 5.80422L6.42418 3.17647L7.88235 0.989215L11.2229 6L7.88235 11.0108L6.42418 8.82353Z"
                 fill="currentColor"
             />
-        </svg>
+        </svg>  
     );
 }
diff --git a/src/visualBuilder/generators/__test__/generateToolbar.test.ts b/src/visualBuilder/generators/__test__/generateToolbar.test.ts
index 1d8c9591..d9ccc137 100644
--- a/src/visualBuilder/generators/__test__/generateToolbar.test.ts
+++ b/src/visualBuilder/generators/__test__/generateToolbar.test.ts
@@ -161,7 +161,7 @@ describe("appendFieldPathDropdown", () => {
         fireEvent.click(focusedToolbar);
 
         expect(fieldLabelWrapper?.classList.toString()).toBe(
-            "visual-builder__focused-toolbar__field-label-wrapper go3399023040"
+            "visual-builder__focused-toolbar__field-label-wrapper go3061601331"
         );
     });
 });
diff --git a/src/visualBuilder/generators/generateHoverOutline.tsx b/src/visualBuilder/generators/generateHoverOutline.tsx
index 8af20613..ef284062 100644
--- a/src/visualBuilder/generators/generateHoverOutline.tsx
+++ b/src/visualBuilder/generators/generateHoverOutline.tsx
@@ -8,7 +8,8 @@ import { visualBuilderStyles } from "../visualBuilder.style";
  */
 export function addHoverOutline(
     targetElement: Element,
-    disabled?: boolean
+    disabled?: boolean,
+    isVariant?: boolean
 ): void {
     const targetElementDimension = targetElement.getBoundingClientRect();
 
@@ -29,6 +30,15 @@ export function addHoverOutline(
             hoverOutline.classList.remove(
                 visualBuilderStyles()["visual-builder__hover-outline--disabled"]
             );
+            if (isVariant) {
+                hoverOutline.classList.add(
+                    visualBuilderStyles()["visual-builder__hover-outline--variant"]
+                );
+            } else {
+                hoverOutline.classList.remove(
+                    visualBuilderStyles()["visual-builder__hover-outline--variant"]
+                );
+            }
         }
 
         hoverOutline.style.top = `${
diff --git a/src/visualBuilder/listeners/mouseHover.ts b/src/visualBuilder/listeners/mouseHover.ts
index fee58c28..b2fee891 100644
--- a/src/visualBuilder/listeners/mouseHover.ts
+++ b/src/visualBuilder/listeners/mouseHover.ts
@@ -81,7 +81,8 @@ async function addOutline(params?: AddOutlineParams): Promise<void> {
         fieldDisabled,
     } = params;
     if (!editableElement) return;
-    addHoverOutline(editableElement as HTMLElement, fieldDisabled);
+    const isVariant = !!fieldMetadata.variant;
+    addHoverOutline(editableElement as HTMLElement, fieldDisabled, isVariant);
     const fieldSchema = await FieldSchemaMap.getFieldSchema(
         content_type_uid,
         fieldPath
@@ -100,7 +101,7 @@ async function addOutline(params?: AddOutlineParams): Promise<void> {
         entryAcl,
         entryWorkflowStageDetails
     );
-    addHoverOutline(editableElement, fieldDisabled || isDisabled);
+    addHoverOutline(editableElement, fieldDisabled || isDisabled, isVariant);
 }
 
 const debouncedAddOutline = debounce(addOutline, 50, { trailing: true });
@@ -333,15 +334,16 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
         const isFocussed= VisualBuilder.VisualBuilderGlobalState.value.isFocussed;
         if(!isFocussed) {
             showHoverToolbar({
-            event: params.event,
-            overlayWrapper: params.overlayWrapper,
-            visualBuilderContainer: params.visualBuilderContainer,
-            previousSelectedEditableDOM:
-                VisualBuilder.VisualBuilderGlobalState.value
-                    .previousSelectedEditableDOM,
-                focusedToolbar: params.focusedToolbar,
-                resizeObserver: params.resizeObserver,
-            });
+                event: params.event,
+                overlayWrapper: params.overlayWrapper,
+                visualBuilderContainer: params.visualBuilderContainer,
+                previousSelectedEditableDOM:
+                    VisualBuilder.VisualBuilderGlobalState.value
+                        .previousSelectedEditableDOM,
+                    focusedToolbar: params.focusedToolbar,
+                    resizeObserver: params.resizeObserver,
+                }
+            );
         }
     }
 
diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts
index a1592a90..9d8f87ab 100644
--- a/src/visualBuilder/visualBuilder.style.ts
+++ b/src/visualBuilder/visualBuilder.style.ts
@@ -291,6 +291,21 @@ export function visualBuilderStyles() {
         "visual-builder__cursor-icon--loader": css`
             animation: visual-builder__spinner 1s linear infinite;
         `,
+        "visual-builder__variant-indicator": css`
+            height: calc(100% - 1px);
+            aspect-ratio: 1;
+            background: white;
+            border-radius: 2px;
+            border-width: 2px;
+            border-style: solid;
+            align-content: center;
+            text-align: center;
+            border-color: #BD59FA;
+
+            svg {
+                color: #BD59FA;
+            }
+        `,
         "visual-builder__focused-toolbar": css`
             position: absolute;
             transform: translateY(-100%);
@@ -347,10 +362,11 @@ export function visualBuilderStyles() {
             display: flex;
             flex-direction: column-reverse;
             position: relative;
+            margin-right: 0.5rem;
         `,
         "visual-builder__focused-toolbar__field-label-container": css`
             display: flex;
-            column-gap: 0.5rem;
+            height: 1.75rem;
             align-items: center;
         `,
         "visual-builder__button": css`
@@ -514,6 +530,12 @@ export function visualBuilderStyles() {
                 background: #909090;
             }
         `,
+        "visual-builder__focused-toolbar--variant": css`
+            .visual-builder__focused-toolbar__field-label-wrapper__current-field {
+                background: #BD59FA;
+            }
+
+        `,
         "visual-builder__cursor-disabled": css`
             .visual-builder__cursor-icon {
                 background: #909090;
@@ -612,6 +634,9 @@ export function visualBuilderStyles() {
         "visual-builder__hover-outline--disabled": css`
             outline: 2px dashed #909090;
         `,
+        "visual-builder__hover-outline--variant": css`
+            outline: 2px dashed #BD59FA;
+        `,
         "visual-builder__default-cursor--disabled": css`
             cursor: none;
         `,