diff --git a/README.md b/README.md
index a07970e9..fe1bdfb2 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.2';
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.1.0';
 
      ContentstackLivePreview.init({
         stackDetails: {
diff --git a/package-lock.json b/package-lock.json
index d427cb24..9f627368 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "4.0.2",
+    "version": "4.1.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@contentstack/live-preview-utils",
-            "version": "4.0.2",
+            "version": "4.1.0",
             "license": "MIT",
             "dependencies": {
                 "@floating-ui/dom": "^1.7.2",
diff --git a/package.json b/package.json
index 973c2687..a4cb1cdf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "4.0.2",
+    "version": "4.1.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/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/utils/__test__/isFieldDisabled.test.ts b/src/visualBuilder/utils/__test__/isFieldDisabled.test.ts
index 50efeb68..6c154b2d 100644
--- a/src/visualBuilder/utils/__test__/isFieldDisabled.test.ts
+++ b/src/visualBuilder/utils/__test__/isFieldDisabled.test.ts
@@ -123,7 +123,7 @@ describe("isFieldDisabled", () => {
         const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
         expect(result.isDisabled).toBe(true);
         expect(result.reason).toBe(
-            "Open an Experience from Audience widget to start editing"
+            "To edit an experience, open the Audience widget and click the Edit icon."
         );
     });
 
diff --git a/src/visualBuilder/utils/isFieldDisabled.ts b/src/visualBuilder/utils/isFieldDisabled.ts
index 8d6c7118..05f42b8c 100644
--- a/src/visualBuilder/utils/isFieldDisabled.ts
+++ b/src/visualBuilder/utils/isFieldDisabled.ts
@@ -10,7 +10,7 @@ const DisableReason = {
     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",
+    AudienceMode: "To edit an experience, open the Audience widget and click the Edit icon.",
     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",
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;
         `,