diff --git a/src/visualBuilder/components/FieldLocationAppList.tsx b/src/visualBuilder/components/FieldLocationAppList.tsx
new file mode 100644
index 00000000..c9630717
--- /dev/null
+++ b/src/visualBuilder/components/FieldLocationAppList.tsx
@@ -0,0 +1,209 @@
+import React, { useState, useEffect, useMemo } from "preact/compat";
+import { EmptyAppIcon } from "./icons/EmptyAppIcon";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage";
+import { visualBuilderStyles } from "../visualBuilder.style";
+import classNames from "classnames";
+import { CslpData } from "../../utils/cslpdata";
+
+interface App {
+    app_installation_uid: string;
+    app_uid: string;
+    contentTypeUid: string;
+    entryUid: string;
+    fieldDataType: string;
+    fieldDisplayName: string;
+    fieldPath: string;
+    icon?: string;
+    locale: string;
+    manifest: {
+        uid: string;
+        name: string;
+        description: string;
+        icon: string;
+        visibility: string;
+    };
+    title: string;
+    uid: string;
+}
+
+interface FieldLocationAppListProps {
+    apps: App[];
+    position: "left" | "right";
+    toolbarRef: React.RefObject<HTMLDivElement>;
+    domEditStack:CslpData[]
+    setDisplayAllApps: (displayAllApps: boolean) => void;
+    displayAllApps: boolean;
+}
+
+const normalize = (text: string) =>
+    text
+        .toLowerCase()
+        .replace(/[^a-z0-9 ]/gi, "")
+        .trim();
+
+export const FieldLocationAppList = ({
+    apps,
+    position,
+    toolbarRef,
+    domEditStack,
+    setDisplayAllApps,
+}: FieldLocationAppListProps) => {
+    const remainingApps = apps.filter((app, index) => index !== 0);
+    const [search, setSearch] = useState("");
+
+    const filteredApps = useMemo(() => {
+        if (!search.trim()) return remainingApps;
+
+        const normalizedSearch = normalize(search);
+        return remainingApps.filter((app) => {
+            return (
+                normalize(app.title).includes(normalizedSearch) 
+            );
+        });
+    }, [search, remainingApps]);
+
+    const handleAppClick = (app: App) => {
+        visualBuilderPostMessage?.send(
+            VisualBuilderPostMessageEvents.FIELD_LOCATION_SELECTED_APP,
+            {
+                app: app,
+                position: toolbarRef.current?.getBoundingClientRect(),
+                DomEditStack:domEditStack
+            }
+        );
+        setDisplayAllApps(false);
+    };
+
+    return (
+        <div
+            className={classNames(
+                visualBuilderStyles()[
+                    "visual-builder__field-location-app-list"
+                ],
+                {
+                    [visualBuilderStyles()[
+                        "visual-builder__field-location-app-list--left"
+                    ]]: position === "left",
+                    [visualBuilderStyles()[
+                        "visual-builder__field-location-app-list--right"
+                    ]]: position === "right",
+                }
+            )}
+        >
+            <div
+                className={
+                    visualBuilderStyles()[
+                        "visual-builder__field-location-app-list__search-container"
+                    ]
+                }
+            >
+                <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 14 14"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    className={classNames(
+                        "Search__search-icon Icon--mini",
+                        visualBuilderStyles()[
+                            "visual-builder__field-location-app-list__search-icon"
+                        ]
+                    )}
+                >
+                    <path
+                        d="M12.438 12.438L9.624 9.624M6.25 10.75a4.5 4.5 0 100-9 4.5 4.5 0 000 9z"
+                        stroke="#A9B6CB"
+                        strokeWidth="2"
+                        strokeMiterlimit="10"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    ></path>
+                </svg>
+                <input
+                    type="text"
+                    value={search}
+                    onInput={(e) =>
+                        setSearch((e.target as HTMLInputElement).value)
+                    }
+                    placeholder="Search for Apps"
+                    className={
+                        visualBuilderStyles()[
+                            "visual-builder__field-location-app-list__search-input"
+                        ]
+                    }
+                />
+            </div>
+
+            <div
+                className={
+                    visualBuilderStyles()[
+                        "visual-builder__field-location-app-list__content"
+                    ]
+                }
+            >
+                {filteredApps.length === 0 && (
+                    <div
+                        className={
+                            visualBuilderStyles()[
+                                "visual-builder__field-location-app-list__no-results"
+                            ]
+                        }
+                    >
+                        <span
+                            className={
+                                visualBuilderStyles()[
+                                    "visual-builder__field-location-app-list__no-results-text"
+                                ]
+                            }
+                        >
+                            No matching results found!
+                        </span>
+                    </div>
+                )}
+                {filteredApps.map((app) => (
+                    <div
+                        key={app.uid}
+                        className={
+                            visualBuilderStyles()[
+                                "visual-builder__field-location-app-list__item"
+                            ]
+                        }
+                        onClick={() => handleAppClick(app)}
+                    >
+                        <div
+                            className={
+                                visualBuilderStyles()[
+                                    "visual-builder__field-location-app-list__item-icon-container"
+                                ]
+                            }
+                        >
+                            {app.icon ? (
+                                <img
+                                    src={app.icon}
+                                    alt={app.title}
+                                    className={
+                                        visualBuilderStyles()[
+                                            "visual-builder__field-location-app-list__item-icon"
+                                        ]
+                                    }
+                                />
+                            ) : (
+                                <EmptyAppIcon id={app.app_installation_uid} />
+                            )}
+                        </div>
+                        <span
+                            className={
+                                visualBuilderStyles()[
+                                    "visual-builder__field-location-app-list__item-title"
+                                ]
+                            }
+                        >
+                            {app.title}
+                        </span>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
diff --git a/src/visualBuilder/components/FieldLocationIcon.tsx b/src/visualBuilder/components/FieldLocationIcon.tsx
new file mode 100644
index 00000000..a9396de9
--- /dev/null
+++ b/src/visualBuilder/components/FieldLocationIcon.tsx
@@ -0,0 +1,95 @@
+import classNames from "classnames";
+import { visualBuilderStyles } from "../visualBuilder.style";
+import { EmptyAppIcon } from "./icons/EmptyAppIcon";
+import { MoreIcon } from "./icons";
+import React, { useRef } from "preact/compat";
+import { LoadingIcon } from "./icons/loading";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage";
+import { CslpData } from "../../utils/cslpdata";
+
+export const FieldLocationIcon = ({
+    fieldLocationData,
+    multipleFieldToolbarButtonClasses,
+    handleMoreIconClick,
+    moreButtonRef,
+    toolbarRef,
+    domEditStack
+}: {
+    fieldLocationData: any;
+    multipleFieldToolbarButtonClasses: any;
+    handleMoreIconClick: () => void;
+    moreButtonRef: any;
+    toolbarRef: any;
+    domEditStack:CslpData[]
+}) => {
+
+
+
+    if (!fieldLocationData?.apps || fieldLocationData?.apps?.length === 0) {
+        return null;
+    }
+
+    const handleAppClick = (app: any) => {
+        if(!toolbarRef.current) return
+        visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FIELD_LOCATION_SELECTED_APP, {
+            app,
+            position: toolbarRef.current?.getBoundingClientRect(),
+            DomEditStack:domEditStack
+        });
+    };
+
+    return (
+        <div
+            ref={toolbarRef}
+            className={classNames(
+                visualBuilderStyles()[
+                    "visual-builder__field-location-icons-container"
+                ]
+            )}
+        >
+            <hr
+                className={visualBuilderStyles()["visual-builder__field-location-icons-container__divider"]}
+            />
+            <button
+                key={`${fieldLocationData.apps[0].uid}`}
+                title={fieldLocationData.apps[0].title}
+                className={multipleFieldToolbarButtonClasses}
+                data-tooltip={fieldLocationData.apps[0].title}
+                onClick={(e) => {
+                   e.preventDefault();
+                   e.stopPropagation();
+                   handleAppClick(fieldLocationData.apps[0]);
+                }}
+                data-testid="field-location-icon"
+            >
+                {fieldLocationData.apps[0].icon ? (
+                    <img
+                        src={fieldLocationData.apps[0].icon}
+                        alt={fieldLocationData.apps[0].title}
+                        className={visualBuilderStyles()["visual-builder__field-location-icons-container__app-icon"]}
+                    />
+                ) : (
+                    <EmptyAppIcon
+                        id={fieldLocationData.apps[0].app_installation_uid}
+                    />
+                )}
+            </button>
+
+           
+           {
+            fieldLocationData.apps.length > 1 && (
+                <button
+                    ref={moreButtonRef}
+                    className={multipleFieldToolbarButtonClasses}
+                    data-tooltip={"More"}
+                    onClick={handleMoreIconClick}
+                    data-testid="field-location-more-button"
+                >
+                    <MoreIcon />
+                </button>
+            )
+           }
+        </div>
+    );
+};
diff --git a/src/visualBuilder/components/FieldToolbar.tsx b/src/visualBuilder/components/FieldToolbar.tsx
index c2ab9088..9009ae4e 100644
--- a/src/visualBuilder/components/FieldToolbar.tsx
+++ b/src/visualBuilder/components/FieldToolbar.tsx
@@ -1,4 +1,5 @@
 import { CslpData } from "../../cslp/types/cslp.types";
+import { CslpData as CslpDataUtil } from "../../utils/cslpdata";
 import getChildrenDirection from "../utils/getChildrenDirection";
 import {
     ALLOWED_MODAL_EDITABLE_FIELD,
@@ -19,12 +20,13 @@ import {
     MoveLeftIcon,
     MoveRightIcon,
     ReplaceAssetIcon,
+    MoreIcon,
 } from "./icons";
 import { fieldIcons } from "./icons/fields";
 import classNames from "classnames";
 import { visualBuilderStyles } from "../visualBuilder.style";
 import CommentIcon from "./CommentIcon";
-import React, { useEffect, useState } from "preact/compat";
+import React, { useEffect, useState, useRef } from "preact/compat";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap";
 import { isFieldDisabled } from "../utils/isFieldDisabled";
 import { IReferenceContentTypeSchema } from "../../cms/types/contentTypeSchema.types";
@@ -40,6 +42,10 @@ 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";
+
 
 export type FieldDetails = Pick<
     VisualBuilderCslpEventDetails,
@@ -115,6 +121,13 @@ function FieldToolbarComponent(
     } = props;
     const { fieldMetadata, editableElement: targetElement } = eventDetails;
     const [isFormLoading, setIsFormLoading] = useState(false);
+    const [fieldLocationData, setFieldLocationData] = useState<any>(null);
+    const [displayAllApps, setDisplayAllApps] = useState(false);
+    const moreButtonRef = useRef<HTMLButtonElement>(null);
+    const toolbarRef = useRef<HTMLDivElement>(null);
+    const [appListPosition, setAppListPosition] = useState<"left" | "right">(
+        "right"
+    );
 
     const parentPath =
         fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||
@@ -135,6 +148,7 @@ function FieldToolbarComponent(
     let Icon = null;
     let fieldType = null;
     let isWholeMultipleField = false;
+    const APP_LIST_MIN_WIDTH = 230;
 
     let disableFieldActions = false;
     if (fieldSchema) {
@@ -149,7 +163,7 @@ function FieldToolbarComponent(
         disableFieldActions = isDisabled;
 
         fieldType = getFieldType(fieldSchema);
-        isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);
+     
 
         Icon = fieldIcons[fieldType];
 
@@ -171,20 +185,45 @@ function FieldToolbarComponent(
                 fieldMetadata.instance.fieldPathWithIndex ||
                 fieldMetadata.multipleFieldMetadata?.index === -1);
 
+        isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType) && !isWholeMultipleField;
+
         isReplaceAllowed =
             ALLOWED_REPLACE_FIELDS.includes(fieldType) && !isWholeMultipleField;
         // if (
         //     DEFAULT_MULTIPLE_FIELDS.includes(fieldType) &&
         //     isWholeMultipleField &&
-        //     !isVariant
+        //      !isVariant
         // ) {
         //     return null;
         // }
     }
 
+    const domEditStack=getDOMEditStack(eventDetails.editableElement) as CslpDataUtil[]
+
+
     const invertTooltipPosition =
         targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;
 
+    const handleMoreIconClick = () => {
+        if (toolbarRef.current) {
+            const rect = toolbarRef.current.getBoundingClientRect();
+            const spaceRight = window.innerWidth - rect.right;
+            const spaceLeft = rect.left;
+            let position = "";
+
+            if (spaceRight < APP_LIST_MIN_WIDTH) {
+                position = "left";
+            } else if (spaceRight > APP_LIST_MIN_WIDTH) {
+                position = "right";
+            } else {
+                position = spaceRight > spaceLeft ? "right" : "left";
+            }
+            setAppListPosition(position as "left" | "right");
+        }
+
+        setDisplayAllApps(!displayAllApps);
+    };
+
     const editButton = Icon ? (
         <button
             data-testid="visual-builder__focused-toolbar__multiple-field-toolbar__edit-button"
@@ -315,6 +354,7 @@ function FieldToolbarComponent(
     );
 
     // TODO sibling count is incorrect for this purpose
+
     const totalElementCount = targetElement?.parentNode?.childElementCount ?? 1;
     const indexOfElement = fieldMetadata?.multipleFieldMetadata?.index;
 
@@ -348,11 +388,30 @@ function FieldToolbarComponent(
                 }
             }
         );
+
         return () => {
             event?.unregister();
         };
     }, []);
 
+
+
+    useEffect(() => {
+        const fetchFieldLocationData = async () => {
+            try {
+                const event = await visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FIELD_LOCATION_DATA, {
+                    domEditStack: getDOMEditStack(eventDetails.editableElement)
+                });
+               
+                setFieldLocationData(event)
+            } catch (error) {
+                console.error('Error fetching field location data:', error);
+            }
+        };
+
+        fetchFieldLocationData();
+    }, [eventDetails.editableElement]);
+
     const multipleFieldToolbarButtonClasses = classNames(
         "visual-builder__button visual-builder__button--secondary",
         visualBuilderStyles()["visual-builder__button"],
@@ -514,9 +573,30 @@ function FieldToolbarComponent(
                                 ) : null}
                             </>
                         )}
+
+                        <FieldLocationIcon
+                            fieldLocationData={fieldLocationData}
+                            multipleFieldToolbarButtonClasses={
+                                multipleFieldToolbarButtonClasses
+                            }
+                            handleMoreIconClick={handleMoreIconClick}
+                            moreButtonRef={moreButtonRef}
+                            toolbarRef={toolbarRef}
+                            domEditStack={domEditStack}
+                        />
                     </>
                 </div>
             </div>
+            {displayAllApps && (
+                <FieldLocationAppList
+                    toolbarRef={toolbarRef}
+                    apps={fieldLocationData?.apps || ([] as any[])}
+                    position={appListPosition}
+                    domEditStack={domEditStack}
+                    setDisplayAllApps={setDisplayAllApps}
+                    displayAllApps={displayAllApps}
+                />
+            )}
         </div>
     );
 }
diff --git a/src/visualBuilder/components/__test__/FieldLocationAppList.test.tsx b/src/visualBuilder/components/__test__/FieldLocationAppList.test.tsx
new file mode 100644
index 00000000..59f76e8a
--- /dev/null
+++ b/src/visualBuilder/components/__test__/FieldLocationAppList.test.tsx
@@ -0,0 +1,233 @@
+import React from "preact/compat";
+import { render, fireEvent, screen } from "@testing-library/preact";
+import { FieldLocationAppList } from "../FieldLocationAppList";
+import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage";
+import { vi } from "vitest";
+
+vi.mock("../../utils/visualBuilderPostMessage", () => ({
+    default: {
+        send: vi.fn(),
+    },
+}));
+
+vi.mock("../../visualBuilder.style", () => ({
+    visualBuilderStyles: () => ({
+        "visual-builder__field-location-app-list": "visual-builder__field-location-app-list",
+        "visual-builder__field-location-app-list--left": "visual-builder__field-location-app-list--left",
+        "visual-builder__field-location-app-list--right": "visual-builder__field-location-app-list--right",
+        "visual-builder__field-location-app-list__search-container": "visual-builder__field-location-app-list__search-container",
+        "visual-builder__field-location-app-list__search-input": "visual-builder__field-location-app-list__search-input",
+        "visual-builder__field-location-app-list__search-icon": "visual-builder__field-location-app-list__search-icon",
+        "visual-builder__field-location-app-list__content": "visual-builder__field-location-app-list__content",
+        "visual-builder__field-location-app-list__no-results": "visual-builder__field-location-app-list__no-results",
+        "visual-builder__field-location-app-list__no-results-text": "visual-builder__field-location-app-list__no-results-text",
+        "visual-builder__field-location-app-list__item": "visual-builder__field-location-app-list__item",
+        "visual-builder__field-location-app-list__item-icon-container": "visual-builder__field-location-app-list__item-icon-container",
+        "visual-builder__field-location-app-list__item-icon": "visual-builder__field-location-app-list__item-icon",
+        "visual-builder__field-location-app-list__item-title": "visual-builder__field-location-app-list__item-title",
+    }),
+}));
+
+vi.mock("../icons/EmptyAppIcon", () => ({
+    EmptyAppIcon: ({ id }: { id: string }) => <div data-testid={`empty-app-icon-${id}`}>Empty Icon</div>,
+}));
+
+const mockApps = [
+    {
+        uid: "1",
+        title: "First App",
+        app_installation_uid: "install_1",
+        app_uid: "app_1",
+        contentTypeUid: "content_1",
+        entryUid: "entry_1",
+        fieldDataType: "text",
+        fieldDisplayName: "Title",
+        fieldPath: "title",
+        locale: "en-us",
+        manifest: {
+            uid: "manifest_1",
+            name: "First App",
+            description: "First app description",
+            icon: "icon1.png",
+            visibility: "public",
+        },
+    },
+    {
+        uid: "2",
+        title: "Second App",
+        app_installation_uid: "install_2",
+        app_uid: "app_2",
+        contentTypeUid: "content_2",
+        entryUid: "entry_2",
+        fieldDataType: "text",
+        fieldDisplayName: "Description",
+        fieldPath: "description",
+        locale: "en-us",
+        manifest: {
+            uid: "manifest_2",
+            name: "Second App",
+            description: "Second app description",
+            icon: "icon2.png",
+            visibility: "public",
+        },
+    },
+    {
+        uid: "3",
+        title: "Third App",
+        app_installation_uid: "install_3",
+        app_uid: "app_3",
+        contentTypeUid: "content_3",
+        entryUid: "entry_3",
+        fieldDataType: "text",
+        fieldDisplayName: "Content",
+        fieldPath: "content",
+        locale: "en-us",
+        manifest: {
+            uid: "manifest_3",
+            name: "Third App",
+            description: "Third app description",
+            icon: "icon3.png",
+            visibility: "public",
+        },
+    },
+];
+
+describe("FieldLocationAppList", () => {
+    const mockToolbarRef = {
+        current: {
+            getBoundingClientRect: () => ({ top: 0, left: 0, right: 100, bottom: 50, width: 100, height: 50, x: 0, y: 0 }),
+        } as HTMLDivElement,
+    };
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it("should render the app list with search input", () => {
+        render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
+
+        expect(screen.getByPlaceholderText("Search for Apps")).toBeInTheDocument();
+        expect(screen.getByText("Second App")).toBeInTheDocument();
+        expect(screen.getByText("Third App")).toBeInTheDocument();
+    });
+
+    it("should not render the first app (index 0)", () => {
+        render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
+
+        expect(screen.queryByText("First App")).not.toBeInTheDocument();
+        expect(screen.getByText("Second App")).toBeInTheDocument();
+        expect(screen.getByText("Third App")).toBeInTheDocument();
+    });
+
+    it("should filter apps when searching", () => {
+        render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
+
+        const searchInput = screen.getByPlaceholderText("Search for Apps");
+        fireEvent.input(searchInput, { target: { value: "Second" } });
+
+        expect(screen.getByText("Second App")).toBeInTheDocument();
+        expect(screen.queryByText("Third App")).not.toBeInTheDocument();
+    });
+
+    it("should show no results message when search has no matches", () => {
+        render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
+
+        const searchInput = screen.getByPlaceholderText("Search for Apps");
+        fireEvent.input(searchInput, { target: { value: "NonExistent" } });
+
+        expect(screen.getByText("No matching results found!")).toBeInTheDocument();
+        expect(screen.queryByText("Second App")).not.toBeInTheDocument();
+        expect(screen.queryByText("Third App")).not.toBeInTheDocument();
+    });
+
+    it("should send event when app is clicked", () => {
+        const mockSetDisplayAllApps = vi.fn();
+        render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={mockSetDisplayAllApps} displayAllApps={true} />);
+
+        const secondApp = screen.getByText("Second App");
+        fireEvent.click(secondApp);
+
+        expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith("field-location-selected-app", {
+            app: mockApps[1],
+            position: { top: 0, left: 0, right: 100, bottom: 50, width: 100, height: 50, x: 0, y: 0 },
+            DomEditStack: []
+        });
+    });
+
+    it("should close the app list when an app is selected", () => {
+        const mockSetDisplayAllApps = vi.fn();
+        render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={mockSetDisplayAllApps} displayAllApps={true} />);
+
+        const secondApp = screen.getByText("Second App");
+        fireEvent.click(secondApp);
+
+        expect(mockSetDisplayAllApps).toHaveBeenCalledWith(false);
+    });
+
+
+
+    it("should apply correct CSS classes for right position", () => {
+        const { container } = render(
+            <FieldLocationAppList
+                apps={mockApps}
+                position="right"
+                toolbarRef={mockToolbarRef}
+                domEditStack={[]}
+                setDisplayAllApps={() => {}}
+                displayAllApps={true}
+            />
+        );
+        const appList = container.firstChild as HTMLElement;
+        expect(appList).toHaveClass("visual-builder__field-location-app-list--right");
+    });
+
+    it("should apply correct CSS classes and left position style for left position", () => {
+        const { container } = render(
+            <FieldLocationAppList
+                apps={mockApps}
+                position="left"
+                toolbarRef={mockToolbarRef}
+                domEditStack={[]}
+                setDisplayAllApps={() => {}}
+                displayAllApps={true}
+            />
+        );
+        const appList = container.firstChild as HTMLElement;
+        expect(appList).toHaveClass("visual-builder__field-location-app-list--left");
+    });
+
+  
+    it("should handle single app (which gets filtered out)", () => {
+        const singleApp = [mockApps[0]];
+        render(<FieldLocationAppList apps={singleApp} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
+
+        expect(screen.getByText("No matching results found!")).toBeInTheDocument();
+        expect(screen.queryByText("First App")).not.toBeInTheDocument();
+    });
+
+    it("should handle case-insensitive search", () => {
+        render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
+
+        const searchInput = screen.getByPlaceholderText("Search for Apps");
+        fireEvent.input(searchInput, { target: { value: "second" } });
+
+        expect(screen.getByText("Second App")).toBeInTheDocument();
+        expect(screen.queryByText("Third App")).not.toBeInTheDocument();
+    });
+
+    it("should clear search results when search input is cleared", () => {
+        render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
+
+        const searchInput = screen.getByPlaceholderText("Search for Apps");
+
+        fireEvent.input(searchInput, { target: { value: "Second" } });
+        expect(screen.getByText("Second App")).toBeInTheDocument();
+        expect(screen.queryByText("Third App")).not.toBeInTheDocument();
+
+        fireEvent.input(searchInput, { target: { value: "" } });
+        expect(screen.getByText("Second App")).toBeInTheDocument();
+        expect(screen.getByText("Third App")).toBeInTheDocument();
+    });
+
+  
+});
diff --git a/src/visualBuilder/components/__test__/FieldLocationIcon.test.tsx b/src/visualBuilder/components/__test__/FieldLocationIcon.test.tsx
new file mode 100644
index 00000000..a2311068
--- /dev/null
+++ b/src/visualBuilder/components/__test__/FieldLocationIcon.test.tsx
@@ -0,0 +1,123 @@
+import React from "preact/compat";
+import { render, fireEvent } from "@testing-library/preact";
+import { FieldLocationIcon } from "../FieldLocationIcon";
+import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage";
+import { vi } from "vitest";
+import { asyncRender } from "../../../__test__/utils";
+
+
+
+describe("FieldLocationIcon", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it("should render fieldlocation icon when we have data in fieldLocationData", () => {
+        const { getByTestId } = render(
+            <FieldLocationIcon 
+                fieldLocationData={{ apps: [{ uid: "1", title: "Test App", app_installation_uid: "test" }] }} 
+                multipleFieldToolbarButtonClasses="test-class" 
+                handleMoreIconClick={() => {}} 
+                moreButtonRef={null} 
+                toolbarRef={null} 
+                
+            />
+        );
+        expect(getByTestId("field-location-icon")).toBeInTheDocument();
+    });
+
+    it("should not render fieldlocation icon when we don't have data in fieldLocationData", () => {
+        const { queryByTestId } = render(
+            <FieldLocationIcon 
+                fieldLocationData={{ apps: [] }} 
+                multipleFieldToolbarButtonClasses="test-class" 
+                handleMoreIconClick={() => {}} 
+                moreButtonRef={null} 
+                toolbarRef={null} 
+            />
+        );
+        expect(queryByTestId("field-location-icon")).not.toBeInTheDocument();
+    });
+
+    describe("Field Location Dropdown", () => {
+     
+       
+
+        test("FieldLocationIcon shows dropdown icon when multiple apps are available", async () => {
+            const mockFieldLocationData = {
+                apps: [
+                    {
+                        uid: "app1",
+                        title: "First App",
+                        icon: "icon1.png",
+                        app_installation_uid: "install1"
+                    },
+                    {
+                        uid: "app2", 
+                        title: "Second App",
+                        icon: "icon2.png",
+                        app_installation_uid: "install2"
+                    }
+                ]
+            };
+
+            const mockHandleMoreIconClick = vi.fn();
+            const mockButtonRef = { current: null };
+            const mockToolbarRef = { current: null };
+
+            const { container } = await asyncRender(
+                <FieldLocationIcon
+                    fieldLocationData={mockFieldLocationData}
+                    multipleFieldToolbarButtonClasses="mock-button-class"
+                    handleMoreIconClick={mockHandleMoreIconClick}
+                    moreButtonRef={mockButtonRef}
+                    toolbarRef={mockToolbarRef}
+                />
+            );
+
+            const appIcon = container.querySelector('[data-testid="field-location-icon"]');
+            expect(appIcon).toBeInTheDocument();
+
+            const moreButton = container.querySelector('[data-testid="field-location-more-button"]');
+            expect(moreButton).toBeInTheDocument();
+
+            fireEvent.click(moreButton!);
+            expect(mockHandleMoreIconClick).toHaveBeenCalledTimes(1);
+        });
+
+        test("FieldLocationIcon does not show dropdown icon when only one app is available", async () => {
+            const mockFieldLocationData = {
+                apps: [
+                    {
+                        uid: "app1",
+                        title: "First App",
+                        icon: "icon1.png",
+                        app_installation_uid: "install1"
+                    }
+                ]
+            };
+
+            const mockHandleMoreIconClick = vi.fn();
+            const mockButtonRef = { current: null };
+            const mockToolbarRef = { current: null };
+
+            const { container } = await asyncRender(
+                <FieldLocationIcon
+                    fieldLocationData={mockFieldLocationData}
+                    multipleFieldToolbarButtonClasses="mock-button-class"
+                    handleMoreIconClick={mockHandleMoreIconClick}
+                    moreButtonRef={mockButtonRef}
+                    toolbarRef={mockToolbarRef}
+                />
+            );
+
+            const appIcon = container.querySelector('[data-testid="field-location-icon"]');
+            expect(appIcon).toBeInTheDocument();
+
+            const moreButton = container.querySelector('[data-testid="field-location-more-button"]');
+            expect(moreButton).not.toBeInTheDocument();
+        });
+
+    });
+ 
+});
\ No newline at end of file
diff --git a/src/visualBuilder/components/__test__/emptyBlock.test.tsx b/src/visualBuilder/components/__test__/emptyBlock.test.tsx
new file mode 100644
index 00000000..d7d5b2c8
--- /dev/null
+++ b/src/visualBuilder/components/__test__/emptyBlock.test.tsx
@@ -0,0 +1,73 @@
+import React from "preact/compat";
+import { render, fireEvent, waitFor } from "@testing-library/preact";
+import { EmptyBlock } from "../emptyBlock";
+import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage";
+import { observeParentAndFocusNewInstance } from "../../utils/multipleElementAddButton";
+import { CslpData } from "../../../cslp/types/cslp.types";
+import { ISchemaFieldMap } from "../../utils/types/index.types";
+import { VisualBuilderPostMessageEvents } from "../../utils/types/postMessage.types";
+
+vi.mock("../../utils/visualBuilderPostMessage", () => ({
+    default: {
+        send: vi.fn(),
+    },
+}));
+
+vi.mock("../../utils/multipleElementAddButton", () => ({
+    observeParentAndFocusNewInstance: vi.fn(),
+}));
+
+describe("EmptyBlock", () => {
+    const mockDetails = {
+        fieldMetadata: {
+            cslpValue: "parent.cslp.value",
+        } as CslpData,
+        fieldSchema: {
+            display_name: "Test Block",
+        } as ISchemaFieldMap,
+    };
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    test("should render correctly", () => {
+        const { getByText, getByTestId } = render(
+            <EmptyBlock details={mockDetails} />
+        );
+
+        expect(
+            getByText(
+                (_, element) =>
+                    element?.textContent ===
+                    "This page doesn’t have any Test Block added. Click the button below to add one."
+            )
+        ).toBeTruthy();
+        expect(
+            getByTestId("visual-builder__empty-block-add-button")
+        ).toBeTruthy();
+        expect(getByText("Add Test Block")).toBeTruthy();
+    });
+
+    test("should call sendAddInstanceEvent on button click", async () => {
+        const { getByTestId } = render(<EmptyBlock details={mockDetails} />);
+        const addButton = getByTestId("visual-builder__empty-block-add-button");
+
+        fireEvent.click(addButton);
+
+        await waitFor(() => {
+            expect((visualBuilderPostMessage as any).send).toHaveBeenCalledWith(
+                VisualBuilderPostMessageEvents.ADD_INSTANCE,
+                {
+                    fieldMetadata: mockDetails.fieldMetadata,
+                    index: 0,
+                }
+            );
+        });
+
+        expect(observeParentAndFocusNewInstance).toHaveBeenCalledWith({
+            parentCslp: mockDetails.fieldMetadata.cslpValue,
+            index: 0,
+        });
+    });
+});
diff --git a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
index d31bf592..59e43282 100644
--- a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
+++ b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
@@ -12,6 +12,9 @@ import { asyncRender } from "../../../__test__/utils";
 import { VisualBuilderCslpEventDetails } from "../../types/visualBuilder.types";
 import { isFieldDisabled } from "../../utils/isFieldDisabled";
 import React from "preact/compat";
+import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage";
+import { FieldLocationIcon } from "../FieldLocationIcon";
+import { VisualBuilderPostMessageEvents } from "../../utils/types/postMessage.types";
 
 vi.mock("../../utils/instanceHandlers", () => ({
     handleMoveInstance: vi.fn(),
@@ -182,7 +185,7 @@ describe("FieldToolbarComponent", () => {
     test("display variant icon instead of dropdown", async () => {
         mockEventDetails.fieldMetadata.variant = "variant";
         const { findByTestId } = await asyncRender(
-            <FieldToolbarComponent eventDetails={mockEventDetails} />
+            <FieldToolbarComponent eventDetails={mockEventDetails} hideOverlay={vi.fn()} />
         );
 
         const variantIcon = await findByTestId(
diff --git a/src/visualBuilder/components/emptyBlock.tsx b/src/visualBuilder/components/emptyBlock.tsx
index 4de70fef..ad932e70 100644
--- a/src/visualBuilder/components/emptyBlock.tsx
+++ b/src/visualBuilder/components/emptyBlock.tsx
@@ -6,6 +6,7 @@ import { observeParentAndFocusNewInstance } from "../utils/multipleElementAddBut
 import { ISchemaFieldMap } from "../utils/types/index.types";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
 import React from "preact/compat";
+import { startCase, toLower } from "lodash-es";
 
 interface EmptyBlockProps {
     details: {
@@ -46,7 +47,18 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {
                     visualBuilderStyles()["visual-builder__empty-block-title"]
                 )}
             >
-                There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.
+                This page doesn’t have any{" "}
+                <span
+                    className={classNames(
+                        "visual-builder__empty-block-field-name",
+                        visualBuilderStyles()[
+                            "visual-builder__empty-block-field-name"
+                        ]
+                    )}
+                >
+                    {startCase(toLower(blockParentName))}
+                </span>{" "}
+                added. Click the button below to add one.
             </div>
             <button
                 className={classNames(
@@ -59,8 +71,17 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {
                 type="button"
                 data-testid="visual-builder__empty-block-add-button"
             >
-                <i className="fas fa-plus"></i> &nbsp;
-                {blockParentName}
+                <span
+                    className={classNames(
+                        "visual-builder__empty-block-plus-icon",
+                        visualBuilderStyles()[
+                            "visual-builder__empty-block-plus-icon"
+                        ]
+                    )}
+                >
+                    +
+                </span>
+                &nbsp; Add {blockParentName}
             </button>
         </div>
     );
diff --git a/src/visualBuilder/components/icons/EmptyAppIcon.tsx b/src/visualBuilder/components/icons/EmptyAppIcon.tsx
new file mode 100644
index 00000000..f0ba2d2b
--- /dev/null
+++ b/src/visualBuilder/components/icons/EmptyAppIcon.tsx
@@ -0,0 +1,40 @@
+export const EmptyAppIcon = ({
+    id = "",
+    ...props
+}: React.SVGProps<SVGSVGElement> & { id?: string }) => {
+    return (
+        <svg
+            width="35"
+            height="35"
+            viewBox="0 0 72 72"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            <circle cx="36" cy="36" r="36" fill={getColorFromString(id)} />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M32.0577 27.3091H25.7747C25.1627 27.3091 24.6667 27.8052 24.6667 28.4171V31.6933H25.4351C28.2423 31.6933 30.9099 33.6523 30.9099 36.8808C30.9099 40.0525 28.3048 42.1467 25.4351 42.1467H24.6667V47.2253C24.6667 47.8372 25.1627 48.3333 25.7747 48.3333H30.8533V47.5649C30.8533 44.6952 32.9475 42.0901 36.1192 42.0901C39.3477 42.0901 41.3067 44.7577 41.3067 47.5649V48.3333H44.5829C45.1948 48.3333 45.6909 47.8372 45.6909 47.2253V40.8782L47.9921 40.5598C49.9596 40.2875 51.3333 38.7771 51.3333 36.8808C51.3333 35.0149 49.9935 33.5515 47.9984 33.2804L45.6909 32.9668V28.4171C45.6909 27.8052 45.1948 27.3091 44.5829 27.3091H40.0974L39.7801 25.0065C39.5081 23.0327 38.0085 21.6667 36.1192 21.6667C34.1999 21.6667 32.6528 23.0659 32.3798 25.0128L32.0577 27.3091ZM38.64 51V47.5649C38.64 45.9382 37.5988 44.7567 36.1192 44.7567C34.6198 44.7567 33.52 45.9602 33.52 47.5649V51H25.7747C23.69 51 22 49.31 22 47.2253V39.48H25.4351C27.0398 39.48 28.2433 38.3802 28.2433 36.8808C28.2433 35.4012 27.0618 34.36 25.4351 34.36H22V28.4171C22 26.3324 23.69 24.6424 25.7747 24.6424H29.739C30.1842 21.4681 32.7819 19 36.1192 19C39.4662 19 41.9856 21.4774 42.4218 24.6424H44.5829C46.6676 24.6424 48.3576 26.3324 48.3576 28.4171V30.638C51.5153 31.0671 54 33.5263 54 36.8808C54 40.2256 51.5248 42.763 48.3576 43.2013V47.2253C48.3576 49.31 46.6676 51 44.5829 51H38.64Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+export const sumOfAscii = (str: string): number =>
+    [...str].reduce((a, b) => a + b.charCodeAt(0), 0);
+
+export const getColorFromString = (str: string = ""): string => {
+    const colorList: string[] = [
+        "#99D8CE",
+        "#6BC3FE",
+        "#5060C1",
+        "#835EC3",
+        "#B16DBD",
+        "#FF85BC",
+        "#FF7E83",
+        "#A2D959",
+        "#59BA5E",
+    ];
+    return colorList[sumOfAscii(str) % colorList.length];
+};
diff --git a/src/visualBuilder/components/icons/index.tsx b/src/visualBuilder/components/icons/index.tsx
index d209df86..e8be7c7d 100644
--- a/src/visualBuilder/components/icons/index.tsx
+++ b/src/visualBuilder/components/icons/index.tsx
@@ -311,6 +311,22 @@ export function WarningOctagonIcon(): JSX.Element {
     );
 }
 
+export function MoreIcon(): JSX.Element {
+    return (
+        <svg
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <circle cx="12" cy="6" r="2" fill="#475161" />
+            <circle cx="12" cy="12" r="2" fill="#475161" />
+            <circle cx="12" cy="18" r="2" fill="#475161" />
+        </svg>
+    );
+}
+
 export function ContentTypeIcon(): JSX.Element {
     return (
         <div
diff --git a/src/visualBuilder/generators/generateToolbar.tsx b/src/visualBuilder/generators/generateToolbar.tsx
index 725b2c98..b15aa768 100644
--- a/src/visualBuilder/generators/generateToolbar.tsx
+++ b/src/visualBuilder/generators/generateToolbar.tsx
@@ -178,6 +178,7 @@ export function removeFieldToolbar(toolbar: Element) {
     const toolbarEvents = [
         VisualBuilderPostMessageEvents.DELETE_INSTANCE,
         VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID,
+        VisualBuilderPostMessageEvents.FIELD_LOCATION_DATA
     ];
     toolbarEvents.forEach((event) => {
         //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.
diff --git a/src/visualBuilder/index.ts b/src/visualBuilder/index.ts
index 6b6d005a..117f505f 100644
--- a/src/visualBuilder/index.ts
+++ b/src/visualBuilder/index.ts
@@ -371,6 +371,22 @@ export class VisualBuilder {
                         VisualBuilderPostMessageEvents.SEND_VARIANT_AND_LOCALE
                     );
 
+                        visualBuilderPostMessage?.on<{
+                            scroll: boolean
+                        }>(
+                            VisualBuilderPostMessageEvents.TOGGLE_SCROLL,
+                            (event) => {
+                                if (!event.data.scroll) {
+                                    document.body.style.overflow = 'hidden'
+                                } else {
+                                    document.body.style.overflow = 'auto'
+                                }
+                            }
+                        );
+                    
+                    
+                    
+
                     useHideFocusOverlayPostMessageEvent({
                         overlayWrapper: this.overlayWrapper,
                         visualBuilderContainer: this.visualBuilderContainer,
diff --git a/src/visualBuilder/listeners/mouseHover.ts b/src/visualBuilder/listeners/mouseHover.ts
index e1cdc0e9..38adc4d8 100644
--- a/src/visualBuilder/listeners/mouseHover.ts
+++ b/src/visualBuilder/listeners/mouseHover.ts
@@ -200,6 +200,10 @@ function isFieldPathDropdown(target: HTMLElement): boolean {
     return target.classList.contains("visual-builder__focused-toolbar__field-label-wrapper") || target.classList.contains("visual-builder__focused-toolbar__field-label-wrapper__current-field");
 }
 
+function isFieldPathParent(target: HTMLElement): boolean {
+    return target.classList.contains("visual-builder__focused-toolbar__field-label-wrapper__parent-field");
+}
+
 const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
     const eventDetails = getCsDataOfElement(params.event);
     const eventTarget = params.event.target as HTMLElement | null;
@@ -221,7 +225,7 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
         }
         if(
             eventTarget &&
-            isFieldPathDropdown(eventTarget)
+            (isFieldPathDropdown(eventTarget) || isFieldPathParent(eventTarget))
         ) {
             params.customCursor && hideCustomCursor(params.customCursor);
             showOutline();
diff --git a/src/visualBuilder/utils/types/postMessage.types.ts b/src/visualBuilder/utils/types/postMessage.types.ts
index e24bd4a5..ec960e3e 100644
--- a/src/visualBuilder/utils/types/postMessage.types.ts
+++ b/src/visualBuilder/utils/types/postMessage.types.ts
@@ -26,6 +26,8 @@ export enum VisualBuilderPostMessageEvents {
     COLLAB_RESOLVE_THREAD = "collab-resolve-thread",
     COLLAB_DELETE_THREAD = "collab-delete-thread",
     COLLAB_MISSING_THREADS = "collab-missing-threads",
+    FIELD_LOCATION_DATA = "field-location-data",
+    FIELD_LOCATION_SELECTED_APP = "field-location-selected-app",
 
     // FROM visual builder
     GET_ALL_ENTRIES_IN_CURRENT_PAGE = "get-entries-in-current-page",
@@ -50,4 +52,5 @@ export enum VisualBuilderPostMessageEvents {
     COLLAB_THREADS_REMOVE = "collab-threads-remove",
     COLLAB_THREAD_REOPEN = "collab-thread-reopen",
     COLLAB_THREAD_HIGHLIGHT = "collab-thread-highlight",
-}
\ No newline at end of file
+    TOGGLE_SCROLL = "toggle-scroll",
+}
diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts
index dc4ea46a..19603c87 100644
--- a/src/visualBuilder/visualBuilder.style.ts
+++ b/src/visualBuilder/visualBuilder.style.ts
@@ -121,6 +121,13 @@ export function visualBuilderStyles() {
                 visibility: visible;
             }
         `,
+        "visual-builder__empty-block-plus-icon": css`
+            font-size: 22px;
+            font-weight: 300;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        `,
         "visual-builder__overlay--outline": css`
             position: absolute;
             outline: 4px solid #715cdd;
@@ -571,19 +578,24 @@ export function visualBuilderStyles() {
             line-height: 100%;
             color: #647696;
         `,
+        "visual-builder__empty-block-field-name": css`
+            font-weight: 700;
+        `,
         "visual-builder__empty-block-add-button": css`
             height: 32px;
             border-radius: 4px;
             background: #f9f8ff;
             border-color: #6c5ce7;
             border-width: 1px;
-            padding: 8px 16px 8px 16px;
+            padding: 0 16px;
             font-size: 0.9rem;
             font-family: Inter;
             font-weight: 600;
             color: #6c5ce7;
-            padding-block: 0px;
             letter-spacing: 0.01rem;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
         `,
         "visual-builder__hover-outline": css`
             position: absolute;
@@ -727,6 +739,7 @@ export function visualBuilderStyles() {
             display: flex;
             flex-direction: column-reverse;
             z-index: 2147483647 !important;
+            position: relative;
         `,
         "visual-builder__variant-button": css`
             display: flex;
@@ -739,6 +752,108 @@ export function visualBuilderStyles() {
                 fill: #475161;
             }
         `,
+        "visual-builder__field-location-icons-container": css`
+            display: flex;
+            gap: 0.25rem;
+            align-items: center;
+            justify-content: center;
+            margin-left: 0.25rem;
+            
+        `,
+        "visual-builder__field-location-icons-container__divider": css`
+            height: 32px !important;
+            width: 1px;
+            border-radius: 2px;
+            background-color: #8a8f99;
+        `,
+        "visual-builder__field-location-icons-container__app-icon": css`
+            width: 24px;
+            height: 24px;
+            object-fit: cover;
+        `,
+        "visual-builder__field-location-app-list": css`
+            position: absolute;
+            top: 0;
+            background: #fff;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+            z-index: 1000;
+            min-width: 230px;
+            max-height: 250px;
+            min-height: 250px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+        `,
+        "visual-builder__field-location-app-list--left": css`
+            right: 100%;
+            margin-right: 8px;
+        `,
+        "visual-builder__field-location-app-list--right": css`
+            left: 100%;
+            margin-left: 8px;
+        `,
+        "visual-builder__field-location-app-list__search-container": css`
+            display: flex;
+            align-items: center;
+            padding: 10px 16px 0px 16px;
+            border: none;
+            border-bottom: 1px solid #f0f0f0;
+        `,
+        "visual-builder__field-location-app-list__search-input": css`
+            width: 100%;
+            padding: 10px 12px;
+            font-size: 14px;
+            outline: none;
+            box-sizing: border-box;
+            border: none;
+        `,
+        "visual-builder__field-location-app-list__search-icon": css`
+            width: 14px;
+            height: 14px;
+        `,
+        "visual-builder__field-location-app-list__content": css`
+            flex: 1;
+            overflow-y: auto;
+        `,
+        "visual-builder__field-location-app-list__no-results": css`
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            width: 100%;
+            text-align: center;
+        `,
+        "visual-builder__field-location-app-list__no-results-text": css`
+            color: #373b40;
+            font-weight: 400;
+        `,
+        "visual-builder__field-location-app-list__item": css`
+            display: flex;
+            align-items: center;
+            padding: 10px 16px;
+            cursor: pointer;
+            font-size: 14px;
+        `,
+        "visual-builder__field-location-app-list__item-icon-container": css`
+            width: 24px;
+            height: 24px;
+            margin-right: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        `,
+        "visual-builder__field-location-app-list__item-icon": css`
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            object-fit: cover;
+        `,
+        "visual-builder__field-location-app-list__item-title": css`
+            color: #373b40;
+            font-weight: 400;
+        `,
     };
 }