diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index 9338fa428d..4c4689031f 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -24,6 +24,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "latest",
+    "@lottiefiles/dotlottie-react": "^0.13.0",
     "@manaflair/redux-batch": "^1.0.0",
     "@rjsf/antd": "^5.21.2",
     "@rjsf/core": "^5.21.2",
diff --git a/client/packages/lowcoder/src/api/iconFlowApi.ts b/client/packages/lowcoder/src/api/iconFlowApi.ts
new file mode 100644
index 0000000000..ba6e6bea0f
--- /dev/null
+++ b/client/packages/lowcoder/src/api/iconFlowApi.ts
@@ -0,0 +1,163 @@
+import Api from "api/api";
+import axios, { AxiosInstance, AxiosPromise, AxiosRequestConfig } from "axios";
+import { calculateFlowCode }  from "./apiUtils";
+
+export interface SearchParams {
+  query: string;
+  asset: string;
+  per_page: number;
+  page: 1;
+  sort: string;
+  formats?: string;
+  price?: string;
+}
+
+export type ResponseType = {
+  response: any;
+};
+
+const lcHeaders = {
+  "Lowcoder-Token": calculateFlowCode(),
+  "Content-Type": "application/json"
+};
+
+let axiosIns: AxiosInstance | null = null;
+
+const getAxiosInstance = (clientSecret?: string) => {
+  if (axiosIns && !clientSecret) {
+    return axiosIns;
+  }
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+
+  const apiRequestConfig: AxiosRequestConfig = {
+    baseURL: "https://api-service.lowcoder.cloud/api/flow",
+    headers,
+  };
+
+  axiosIns = axios.create(apiRequestConfig);
+  return axiosIns;
+}
+
+class IconFlowApi extends Api {
+
+  static async secureRequest(body: any, timeout: number = 6000): Promise<any> {
+    let response;
+    const axiosInstance = getAxiosInstance();
+
+    // Create a cancel token and set timeout for cancellation
+    const source = axios.CancelToken.source();
+    const timeoutId = setTimeout(() => {
+      source.cancel("Request timed out.");
+    }, timeout);
+
+    // Request configuration with cancel token
+    const requestConfig: AxiosRequestConfig = {
+      method: "POST",
+      withCredentials: true,
+      data: body,
+      cancelToken: source.token, // Add cancel token
+    };
+
+    try {
+      response = await axiosInstance.request(requestConfig);
+    } catch (error) {
+      if (axios.isCancel(error)) {
+        // Retry once after timeout cancellation
+        try {
+          // Reset the cancel token and retry
+          const retrySource = axios.CancelToken.source();
+          const retryTimeoutId = setTimeout(() => {
+            retrySource.cancel("Retry request timed out.");
+          }, 20000);
+
+          response = await axiosInstance.request({
+            ...requestConfig,
+            cancelToken: retrySource.token,
+          });
+
+          clearTimeout(retryTimeoutId);
+        } catch (retryError) {
+          console.warn("Error at Secure Flow Request. Retry failed:", retryError);
+          throw retryError;
+        }
+      } else {
+        console.warn("Error at Secure Flow Request:", error);
+        throw error;
+      }
+    } finally {
+      clearTimeout(timeoutId); // Clear the initial timeout
+    }
+
+    return response;
+  }
+
+}
+
+export const searchAssets = async (searchParameters : SearchParams) => {
+  const apiBody = {
+    path: "webhook/scout/search-asset",
+    data: searchParameters,
+    method: "post",
+    headers: lcHeaders
+  };
+  try {
+    const result = await IconFlowApi.secureRequest(apiBody);
+    return result?.data?.response?.items?.total > 0 ? result.data.response.items as any : null;
+  } catch (error) {
+    console.error("Error searching Design Assets:", error);
+    throw error;
+  }
+};
+
+export const getAssetLinks = async (uuid: string, params: Record<string, string>) => {
+  const apiBody = {
+    path: "webhook/scout/get-asset-links",
+    data: {"uuid" : uuid, "params" : params},
+    method: "post",
+    headers: lcHeaders
+  };
+  try {
+    const result = await IconFlowApi.secureRequest(apiBody);
+
+    return result?.data?.response?.download?.url.length > 0 ? result.data.response.download as any : null;
+  } catch (error) {
+    console.error("Error searching Design Assets:", error);
+    throw error;
+  }
+};
+
+
+/*
+
+static async search(params: SearchParams): Promise<any> {
+    let response;
+    try {
+      response = await getAxiosInstance().request({
+        url: '/v3/search',
+        method: "GET",
+        withCredentials: false,
+        params: {
+          ...params,
+        },
+      });
+    } catch (error) {
+      console.error(error);
+    }
+    return response?.data.response.items;
+  }
+
+  static async download(uuid: string, params: Record<string, string>): Promise<any> {
+    const response = await getAxiosInstance(clientSecret).request({
+      url: `/v3/items/${uuid}/api-download?format=${params.format}`,
+      method: "POST",
+      withCredentials: false,
+    });
+    return response?.data.response.download;
+  }
+
+*/ 
+
+export default IconFlowApi;
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/api/iconscoutApi.ts b/client/packages/lowcoder/src/api/iconscoutApi.ts
new file mode 100644
index 0000000000..0ad5bf2569
--- /dev/null
+++ b/client/packages/lowcoder/src/api/iconscoutApi.ts
@@ -0,0 +1,15 @@
+import Api from "api/api";
+import axios from "axios";
+
+export type ResponseType = {
+  response: any;
+};
+
+class IconScoutApi extends Api {
+  static async downloadAsset(url: string): Promise<any> {
+    const response = await axios.get(url, {responseType: 'blob'})
+    return response?.data;
+  }
+}
+
+export default IconScoutApi;
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/api/subscriptionApi.ts b/client/packages/lowcoder/src/api/subscriptionApi.ts
index 6bfcdb2599..7e19c8f19d 100644
--- a/client/packages/lowcoder/src/api/subscriptionApi.ts
+++ b/client/packages/lowcoder/src/api/subscriptionApi.ts
@@ -1,11 +1,6 @@
 import Api from "api/api";
 import axios, { AxiosInstance, AxiosRequestConfig, CancelToken } from "axios";
-import { useDispatch, useSelector } from "react-redux";
-import { useEffect, useState} from "react";
 import { calculateFlowCode }  from "./apiUtils";
-import { fetchGroupsAction, fetchOrgUsersAction } from "redux/reduxActions/orgActions";
-import { getOrgUsers } from "redux/selectors/orgSelectors";
-import { AppState } from "@lowcoder-ee/redux/reducers";
 import type {
   LowcoderNewCustomer,
   LowcoderSearchCustomer,
diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
index 05dbeaab25..1ace7b0225 100644
--- a/client/packages/lowcoder/src/app.tsx
+++ b/client/packages/lowcoder/src/app.tsx
@@ -60,6 +60,7 @@ import GlobalInstances from 'components/GlobalInstances';
 import { fetchHomeData, fetchServerSettingsAction } from "./redux/reduxActions/applicationActions";
 import { getNpmPackageMeta } from "./comps/utils/remote";
 import { packageMetaReadyAction, setLowcoderCompsLoading } from "./redux/reduxActions/npmPluginActions";
+import { SimpleSubscriptionContextProvider } from "./util/context/SimpleSubscriptionContext";
 
 const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
 const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -310,33 +311,35 @@ class AppIndex extends React.Component<AppIndexProps, any> {
                 component={LazyPublicAppEditor}
               />
 
-              <LazyRoute
-                fallback="layout"
-                path={APP_EDITOR_URL}
-                component={LazyAppEditor}
-              />
-              <LazyRoute
-                fallback="layout"
-                path={[
-                  USER_PROFILE_URL,
-                  NEWS_URL,
-                  ORG_HOME_URL,
-                  ALL_APPLICATIONS_URL,
-                  DATASOURCE_CREATE_URL,
-                  DATASOURCE_EDIT_URL,
-                  DATASOURCE_URL,
-                  SUPPORT_URL,
-                  QUERY_LIBRARY_URL,
-                  FOLDERS_URL,
-                  FOLDER_URL,
-                  TRASH_URL,
-                  SETTING_URL,
-                  MARKETPLACE_URL,
-                  ADMIN_APP_URL
-                ]}
-                // component={ApplicationListPage}
-                component={LazyApplicationHome}
-              />
+              <SimpleSubscriptionContextProvider>
+                <LazyRoute
+                  fallback="layout"
+                  path={APP_EDITOR_URL}
+                  component={LazyAppEditor}
+                />
+                <LazyRoute
+                  fallback="layout"
+                  path={[
+                    USER_PROFILE_URL,
+                    NEWS_URL,
+                    ORG_HOME_URL,
+                    ALL_APPLICATIONS_URL,
+                    DATASOURCE_CREATE_URL,
+                    DATASOURCE_EDIT_URL,
+                    DATASOURCE_URL,
+                    SUPPORT_URL,
+                    QUERY_LIBRARY_URL,
+                    FOLDERS_URL,
+                    FOLDER_URL,
+                    TRASH_URL,
+                    SETTING_URL,
+                    MARKETPLACE_URL,
+                    ADMIN_APP_URL
+                  ]}
+                  // component={ApplicationListPage}
+                  component={LazyApplicationHome}
+                />
+              </SimpleSubscriptionContextProvider>
               <LazyRoute exact path={ADMIN_AUTH_URL} component={LazyUserAuthComp} />
               <LazyRoute path={USER_AUTH_URL} component={LazyUserAuthComp} />
               <LazyRoute
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
index f93b0eb2a3..9a8eb17907 100644
--- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -30,6 +30,8 @@ import {
 } from "../controls/eventHandlerControl";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
+import { dropdownControl } from "../controls/dropdownControl";
 
 const Container = styled.div<{
   $style: IconStyleType | undefined;
@@ -61,10 +63,17 @@ const Container = styled.div<{
 
 const EventOptions = [clickEvent] as const;
 
+const ModeOptions = [
+  { label: "Standard", value: "standard" },
+  { label: "Asset Library", value: "asset-library" },
+] as const;
+
 const childrenMap = {
   style: styleControl(IconStyle,'style'),
   animationStyle: styleControl(AnimationStyle,'animationStyle'),
+  sourceMode: dropdownControl(ModeOptions, "standard"),
   icon: withDefault(IconControl, "/icon:antd/homefilled"),
+  iconScoutAsset: IconscoutControl(AssetType.ICON),
   autoHeight: withDefault(AutoHeightControl, "auto"),
   iconSize: withDefault(NumberControl, 20),
   onEvent: eventHandlerControl(EventOptions),
@@ -103,7 +112,10 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
           }}
           onClick={() => props.onEvent("click")}
         >
-          {props.icon}
+          { props.sourceMode === 'standard'
+            ? props.icon
+            : <img src={props.iconScoutAsset.value} />
+          }
         </Container>
       )}
     >
@@ -117,11 +129,17 @@ let IconBasicComp = (function () {
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
-          {children.icon.propertyView({
+          { children.sourceMode.propertyView({
+            label: "",
+            radioButton: true
+          })}
+          {children.sourceMode.getView() === 'standard' && children.icon.propertyView({
             label: trans("iconComp.icon"),
             IconType: "All",
           })}
-          
+          {children.sourceMode.getView() === 'asset-library' && children.iconScoutAsset.propertyView({
+            label: trans("button.icon"),
+          })}
         </Section> 
 
         {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index d78a21d201..1806399e26 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -12,7 +12,7 @@ import {
   withExposingConfigs,
 } from "../generators/withExposing";
 import { RecordConstructorToView } from "lowcoder-core";
-import { useEffect, useRef, useState } from "react";
+import { ReactElement, useEffect, useRef, useState } from "react";
 import _ from "lodash";
 import ReactResizeDetector from "react-resize-detector";
 import { styleControl } from "comps/controls/styleControl";
@@ -35,6 +35,8 @@ import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { StringControl } from "../controls/codeControl";
 import { PositionControl } from "comps/controls/dropdownControl";
+import { dropdownControl } from "../controls/dropdownControl";
+import { AssetType, IconscoutControl } from "../controls/iconscoutControl";
 
 const Container = styled.div<{ 
   $style: ImageStyleType | undefined, 
@@ -111,6 +113,10 @@ const getStyle = (style: ImageStyleType) => {
 };
 
 const EventOptions = [clickEvent] as const;
+const ModeOptions = [
+  { label: "URL", value: "standard" },
+  { label: "Asset Library", value: "asset-library" },
+] as const;
 
 const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
   const imgRef = useRef<HTMLDivElement>(null);
@@ -194,7 +200,11 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
             }
           >
             <AntImage
-              src={props.src.value}
+              src={
+                props.sourceMode === 'asset-library'
+                ? props.iconScoutAsset?.value
+                : props.src.value
+              }
               referrerPolicy="same-origin"
               draggable={false}
               preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
@@ -210,7 +220,9 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 const childrenMap = {
+  sourceMode: dropdownControl(ModeOptions, "standard"),
   src: withDefault(StringStateControl, "https://temp.im/350x400"),
+  iconScoutAsset: IconscoutControl(AssetType.ILLUSTRATION),
   onEvent: eventHandlerControl(EventOptions),
   style: styleControl(ImageStyle , 'style'),
   animationStyle: styleControl(AnimationStyle , 'animationStyle'),
@@ -234,7 +246,14 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
     return (
       <>
         <Section name={sectionNames.basic}>
-          {children.src.propertyView({
+          { children.sourceMode.propertyView({
+            label: "",
+            radioButton: true
+          })}
+          {children.sourceMode.getView() === 'standard' && children.src.propertyView({
+            label: trans("image.src"),
+          })}
+          {children.sourceMode.getView() === 'asset-library' && children.iconScoutAsset.propertyView({
             label: trans("image.src"),
           })}
         </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
index c3f93b6e1c..4cb3881beb 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -2,6 +2,7 @@ import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps
 import {
   ArrayOrJSONObjectControl,
   NumberControl,
+  StringControl,
 } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { BoolControl } from "comps/controls/boolControl";
@@ -9,8 +10,8 @@ import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, LottieStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import { Section, sectionNames } from "lowcoder-design";
-import { useContext, lazy, useEffect } from "react";  
-import { UICompBuilder, withDefault } from "../../generators";
+import { useContext, lazy, useEffect, useState } from "react";  
+import { stateComp, UICompBuilder, withDefault } from "../../generators";
 import {
   NameConfig,
   NameConfigHidden,
@@ -18,10 +19,22 @@ import {
 } from "../../generators/withExposing";
 import { defaultLottie } from "./jsonConstants";
 import { EditorContext } from "comps/editorState";
+import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
+import { DotLottie } from "@lottiefiles/dotlottie-react";
+import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl";
+import { useResizeDetector } from "react-resize-detector";
+import { eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl";
+import { withMethodExposing } from "@lowcoder-ee/comps/generators/withMethodExposing";
+import { changeChildAction } from "lowcoder-core";
 
-const Player = lazy(
-  () => import('@lottiefiles/react-lottie-player')
-    .then(module => ({default: module.Player}))
+// const Player = lazy(
+//   () => import('@lottiefiles/react-lottie-player')
+//     .then(module => ({default: module.Player}))
+// );
+
+const DotLottiePlayer = lazy(
+  () => import('@lottiefiles/dotlottie-react')
+    .then(module => ({default: module.DotLottieReact}))
 );
 
 /**
@@ -34,7 +47,11 @@ const animationStartOptions = [
   },
   {
     label: trans("jsonLottie.onHover"),
-    value: "on hover",
+    value: "hover",
+  },
+  {
+    label: trans("jsonLottie.onTrigger"),
+    value: "trigger",
   },
 ] as const;
 
@@ -84,12 +101,48 @@ const speedOptions = [
   },
 ] as const;
 
+const alignOptions = [
+  { label: "None", value: "none" },
+  { label: "Fill", value: "fill" },
+  { label: "Cover", value: "cover" },
+  { label: "Contain", value: "contain" },
+  { label: "Fit Width", value: "fit-width" },
+  { label: "Fit Height", value: "fit-height" },
+] as const;
+
+const fitOptions = [
+  { label: "Top Left", value: "0,0" },
+  { label: "Top Center", value: "0.5,0" },
+  { label: "Top Right", value: "1,0" },
+  { label: "Center Left", value: "0,0.5" },
+  { label: "Center", value: "0.5,0.5" },
+  { label: "Center Right", value: "1,0.5" },
+  { label: "Bottom Left", value: "0,1" },
+  { label: "Bottom Center", value: "0.5,1" },
+  { label: "Bottom Right", value: "1,1" },
+] as const;
+
+const ModeOptions = [
+  { label: "Lottie JSON", value: "standard" },
+  { label: "Asset Library", value: "asset-library" }
+] as const;
+
+const EventOptions = [
+  { label: trans("jsonLottie.load"), value: "load", description: trans("jsonLottie.load") },
+  { label: trans("jsonLottie.play"), value: "play", description: trans("jsonLottie.play") },
+  { label: trans("jsonLottie.pause"), value: "pause", description: trans("jsonLottie.pause") },
+  { label: trans("jsonLottie.stop"), value: "stop", description: trans("jsonLottie.stop") },
+  { label: trans("jsonLottie.complete"), value: "complete", description: trans("jsonLottie.complete") },
+] as const;;
+
 let JsonLottieTmpComp = (function () {
   const childrenMap = {
+    sourceMode: dropdownControl(ModeOptions, "standard"),
     value: withDefault(
       ArrayOrJSONObjectControl,
       JSON.stringify(defaultLottie, null, 2)
     ),
+    iconScoutAsset: IconscoutControl(AssetType.LOTTIE),
     speed: dropdownControl(speedOptions, "1"),
     width: withDefault(NumberControl, 100),
     height: withDefault(NumberControl, 100),
@@ -98,11 +151,83 @@ let JsonLottieTmpComp = (function () {
     animationStart: dropdownControl(animationStartOptions, "auto"),
     loop: dropdownControl(loopOptions, "single"),
     keepLastFrame: BoolControl.DEFAULT_TRUE,
+    autoHeight: withDefault(AutoHeightControl, "auto"),
+    aspectRatio: withDefault(StringControl, "1/1"),
+    fit: dropdownControl(alignOptions, "contain"),
+    align: dropdownControl(fitOptions, "0.5,0.5"),
+    onEvent: eventHandlerControl(EventOptions),
+    dotLottieRef: stateComp<any | null>(null),
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const [dotLottie, setDotLottie] = useState<DotLottie | null>(null);
+
+    const setLayoutAndResize = () => {
+      const align = props.align.split(',');
+      dotLottie?.setLayout({fit: props.fit, align: [Number(align[0]), Number(align[1])]})
+      dotLottie?.resize();
+    }
+
+    const { ref: wrapperRef } = useResizeDetector({
+      onResize: () => {
+        if (dotLottie) {
+          setLayoutAndResize();
+        }
+      }
+    });
+
+    useEffect(() => {
+      const onComplete = () => {
+        props.keepLastFrame && dotLottie?.setFrame(100);
+        props.onEvent('complete');
+      }
+
+      const onLoad = () => {
+        setLayoutAndResize();
+        props.onEvent('load');
+      }
+
+      const onPlay = () => {
+        props.onEvent('play');
+      }
+
+      const onPause = () => {
+        props.onEvent('pause');
+      }
+
+      const onStop = () => {
+        props.onEvent('stop');
+      }
+
+      if (dotLottie) {
+        dotLottie.addEventListener('complete', onComplete);
+        dotLottie.addEventListener('load', onLoad);
+        dotLottie.addEventListener('play', onPlay);
+        dotLottie.addEventListener('pause', onPause);
+        dotLottie.addEventListener('stop', onStop);
+      }
+  
+      return () => {
+        if (dotLottie) {
+          dotLottie.removeEventListener('complete', onComplete);
+          dotLottie.removeEventListener('load', onLoad);
+          dotLottie.removeEventListener('play', onPlay);
+          dotLottie.removeEventListener('pause', onPause);
+          dotLottie.removeEventListener('stop', onStop);
+        }
+      };
+    }, [dotLottie, props.keepLastFrame]);
+
+    useEffect(() => {
+      if (dotLottie) {
+        setLayoutAndResize();
+      }
+    }, [dotLottie, props.fit, props.align, props.autoHeight]);
+
     return (
       <div
+        ref={wrapperRef}
         style={{
+          height: '100%',
           padding: `${props.container.margin}`,
           animation: props.animationStyle.animation,
           animationDelay: props.animationStyle.animationDelay,
@@ -120,22 +245,26 @@ let JsonLottieTmpComp = (function () {
             rotate: props.container.rotation,
           }}
         >
-          <Player
+          <DotLottiePlayer
             key={
               [props.speed, props.animationStart, props.loop, props.value, props.keepLastFrame] as any
             }
-            keepLastFrame={props.keepLastFrame}
-            autoplay={props.animationStart === "auto" && true}
-            hover={props.animationStart === "on hover" && true}
+            dotLottieRefCallback={(lottieRef) => {
+              setDotLottie(lottieRef);
+              dispatch(
+                changeChildAction("dotLottieRef", lottieRef as any, false)
+              )
+            }}
+            autoplay={props.animationStart === "auto"}
             loop={props.loop === "single" ? false : true}
             speed={Number(props.speed)}
-            src={props.value}
+            data={props.sourceMode === 'standard' ? props.value as Record<string, undefined> : undefined}
+            src={props.sourceMode === 'asset-library' ? props.iconScoutAsset?.value : undefined}
             style={{
-              height: "100%",
-              width: "100%",
-              maxWidth: "100%",
-              maxHeight: "100%",
+              aspectRatio: props.aspectRatio,
             }}
+            onMouseEnter={() => props.animationStart === "hover" && dotLottie?.play()}
+            onMouseLeave={() => props.animationStart === "hover" && dotLottie?.pause()}
           />
         </div>
       </div>
@@ -145,23 +274,42 @@ let JsonLottieTmpComp = (function () {
       return (
         <>
           <Section name={sectionNames.basic}>
-            {children.value.propertyView({
+            { children.sourceMode.propertyView({
+              label: "",
+              radioButton: true
+            })}
+            {children.sourceMode.getView() === 'standard' && children.value.propertyView({
               label: trans("jsonLottie.lottieJson"),
             })}
+            {children.sourceMode.getView() === 'asset-library' && children.iconScoutAsset.propertyView({
+              label: "Lottie Source",
+            })}
           </Section>
 
           {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
             <><Section name={sectionNames.interaction}>
+                {children.onEvent.getPropertyView()}
                 {children.speed.propertyView({ label: trans("jsonLottie.speed")})}
                 {children.loop.propertyView({ label: trans("jsonLottie.loop")})}
                 {children.animationStart.propertyView({ label: trans("jsonLottie.animationStart")})}
-                 {children.keepLastFrame.propertyView({ label: trans("jsonLottie.keepLastFrame")})}
                 {hiddenPropertyView(children)}
+                {children.keepLastFrame.propertyView({ label: trans("jsonLottie.keepLastFrame")})}
                 {showDataLoadingIndicatorsPropertyView(children)}
               </Section>
             </>
           )}
 
+          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <Section name={sectionNames.layout}>
+              {children.autoHeight.getPropertyView()}
+              {children.aspectRatio.propertyView({
+                label: trans("style.aspectRatio"),
+              })}
+              {children.align.propertyView({ label: trans("jsonLottie.align")})}
+              {children.fit.propertyView({ label: trans("jsonLottie.fit")})}
+            </Section>
+          )}
+
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.style}>
@@ -179,9 +327,43 @@ let JsonLottieTmpComp = (function () {
 })();
 JsonLottieTmpComp = class extends JsonLottieTmpComp {
   override autoHeight(): boolean {
-    return false;
+    return this.children.autoHeight.getView();
   }
 };
+
+JsonLottieTmpComp = withMethodExposing(JsonLottieTmpComp, [
+  {
+    method: {
+      name: "play",
+      description: trans("jsonLottie.play"),
+      params: [],
+    },
+    execute: (comp) => {
+      (comp.children.dotLottieRef.value as unknown as DotLottie)?.play();
+    },
+  },
+  {
+    method: {
+      name: "pause",
+      description: trans("jsonLottie.pause"),
+      params: [],
+    },
+    execute: (comp) => {
+      (comp.children.dotLottieRef.value as unknown as DotLottie)?.pause();
+    },
+  },
+  {
+    method: {
+      name: "stop",
+      description: trans("jsonLottie.stop"),
+      params: [],
+    },
+    execute: (comp) => {
+      (comp.children.dotLottieRef.value as unknown as DotLottie)?.stop();
+    },
+  },
+]);
+
 export const JsonLottieComp = withExposingConfigs(JsonLottieTmpComp, [
   new NameConfig("value", trans("jsonLottie.valueDesc")),
   NameConfigHidden,
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index 28e318618c..0e31deb507 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -39,6 +39,7 @@ import { useEffect, useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 
 import { useContext } from "react";
+import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
 
 const Container = styled.div<{ $style: any }>`
   height: 100%;
@@ -74,9 +75,15 @@ const IconWrapper = styled.div<{ $style: any }>`
   ${(props) => props.$style && getStyleIcon(props.$style)}
 `;
 
+const IconScoutWrapper = styled.div<{ $style: any }>`
+  display: flex;
+
+  ${(props) => props.$style && getStyleIcon(props.$style)}
+`;
+
 function getStyleIcon(style: any) {
   return css`
-    svg {
+    svg, img {
       width: ${style.size} !important;
       height: ${style.size} !important;
     }
@@ -163,6 +170,11 @@ const typeOptions = [
   },
 ] as const;
 
+const ModeOptions = [
+  { label: "Standard", value: "standard" },
+  { label: "Asset Library", value: "asset-library" },
+] as const;
+
 function isDefault(type?: string) {
   return !type;
 }
@@ -183,7 +195,9 @@ const childrenMap = {
   disabled: BoolCodeControl,
   loading: BoolCodeControl,
   form: SelectFormControl,
+  sourceMode: dropdownControl(ModeOptions, "standard"),
   prefixIcon: IconControl,
+  iconScoutAsset: IconscoutControl(AssetType.ICON),
   style: ButtonStyleControl,
   viewRef: RefControl<HTMLElement>,
   restrictPaddingOnRotation:withDefault(StringControl, 'controlButton')
@@ -270,14 +284,20 @@ let ButtonTmpComp = (function () {
                         : submitForm(editorState, props.form)
                     }
                   >
-                    {props.prefixIcon && (
+                    {props.sourceMode === 'standard' && props.prefixIcon && (
                       <IconWrapper
                         $style={{ ...props.style, size: props.iconSize }}
                       >
                         {props.prefixIcon}
                       </IconWrapper>
                     )}
-                    
+                    {props.sourceMode === 'asset-library' && props.iconScoutAsset && (
+                      <IconScoutWrapper
+                        $style={{ ...props.style, size: props.iconSize }}
+                      >
+                        <img src={props.iconScoutAsset.value} />
+                      </IconScoutWrapper>
+                    )}
                   </Button100>
                 </div>
               </Container>
@@ -291,7 +311,14 @@ let ButtonTmpComp = (function () {
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
-          {children.prefixIcon.propertyView({
+          { children.sourceMode.propertyView({
+            label: "",
+            radioButton: true
+          })}
+          {children.sourceMode.getView() === 'standard' && children.prefixIcon.propertyView({
+            label: trans("button.icon"),
+          })}
+          {children.sourceMode.getView() === 'asset-library' &&children.iconScoutAsset.propertyView({
             label: trans("button.icon"),
           })}
         </Section>
@@ -314,13 +341,13 @@ let ButtonTmpComp = (function () {
               {children.iconSize.propertyView({
                 label: trans("button.iconSize"),
               })}
-            </Section>
-            <Section name={sectionNames.style}>
-              {children.style.getPropertyView()}
               {children.aspectRatio.propertyView({
                 label: trans("style.aspectRatio"),
               })}
             </Section>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/controls/iconscoutControl.tsx b/client/packages/lowcoder/src/comps/controls/iconscoutControl.tsx
new file mode 100644
index 0000000000..9f43bda672
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/controls/iconscoutControl.tsx
@@ -0,0 +1,505 @@
+import { trans } from "i18n";
+import {
+  SimpleComp,
+} from "lowcoder-core";
+import {
+  BlockGrayLabel,
+  ControlPropertyViewWrapper,
+  CustomModal,
+  DeleteInputIcon,
+  TacoButton,
+  TacoInput,
+  useIcon,
+  wrapperToControlItem,
+} from "lowcoder-design";
+import { ReactNode, useCallback, useMemo, useRef, useState } from "react";
+import styled from "styled-components";
+import Popover from "antd/es/popover";
+import { CloseIcon, SearchIcon } from "icons";
+import Draggable from "react-draggable";
+import IconScoutApi from "@lowcoder-ee/api/iconscoutApi";
+import { searchAssets, getAssetLinks, SearchParams } from "@lowcoder-ee/api/iconFlowApi";
+import List, { ListRowProps } from "react-virtualized/dist/es/List";
+import { debounce } from "lodash";
+import Spin from "antd/es/spin";
+import { ControlParams } from "./controlParams";
+import { getBase64 } from "@lowcoder-ee/util/fileUtils";
+import Flex from "antd/es/flex";
+import Typography from "antd/es/typography";
+import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
+import Badge from "antd/es/badge";
+import { CrownFilled } from "@ant-design/icons";
+import { SUBSCRIPTION_SETTING } from "@lowcoder-ee/constants/routesURL";
+import { useSimpleSubscriptionContext } from "@lowcoder-ee/util/context/SimpleSubscriptionContext";
+import { SubscriptionProductsEnum } from "@lowcoder-ee/constants/subscriptionConstants";
+
+const ButtonWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+const ButtonIconWrapper = styled.div`
+  display: flex;
+  width: 18px;
+`;
+
+const StyledDeleteInputIcon = styled(DeleteInputIcon)`
+  margin-left: auto;
+  cursor: pointer;
+
+  &:hover circle {
+    fill: #8b8fa3;
+  }
+`;
+
+const StyledImage = styled.img`
+  height: 100%;
+  width: 100%;
+  color: currentColor;
+`;
+
+const Wrapper = styled.div`
+  > div:nth-of-type(1) {
+    margin-bottom: 4px;
+  }
+`;
+const PopupContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 580px;
+  min-height: 480px;
+  background: #ffffff;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  box-sizing: border-box;
+`;
+
+const TitleDiv = styled.div`
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  justify-content: space-between;
+  user-select: none;
+`;
+const TitleText = styled.span`
+  font-size: 16px;
+  color: #222222;
+  line-height: 16px;
+`;
+const StyledCloseIcon = styled(CloseIcon)`
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  color: #8b8fa3;
+
+  &:hover g line {
+    stroke: #222222;
+  }
+`;
+
+const SearchDiv = styled.div`
+  position: relative;
+  margin: 0px 16px;
+  padding-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+`;
+const StyledSearchIcon = styled(SearchIcon)`
+  position: absolute;
+  top: 6px;
+  left: 12px;
+`;
+const IconListWrapper = styled.div`
+  padding-left: 10px;
+  padding-right: 4px;
+`;
+const IconList = styled(List)`
+  scrollbar-gutter: stable;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-clip: content-box;
+    border-radius: 9999px;
+    background-color: rgba(139, 143, 163, 0.2);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(139, 143, 163, 0.36);
+  }
+`;
+
+const IconRow = styled.div`
+  padding: 6px;
+  display: flex;
+  align-items: flex-start; /* Align items to the start to allow different heights */
+  justify-content: space-between;
+
+  &:last-child {
+    gap: 8px;
+    justify-content: flex-start;
+  }
+
+  .ant-badge {
+    height: 100%;
+  }
+`;
+
+const IconItemContainer = styled.div`
+  width: 60px;
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+  justify-content: flex-start; 
+  cursor: pointer;
+  font-size: 28px;
+  border-radius: 4px;
+  background: #fafafa;
+
+  &:hover {
+    box-shadow: 0 8px 24px #1a29470a,0 2px 8px #1a294714;
+  }
+
+  &:focus {
+    border: 1px solid #315efb;
+    box-shadow: 0 0 0 2px #d6e4ff;
+  }
+`;
+
+const IconWrapper = styled.div<{$isPremium?: boolean}>`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${props => props.$isPremium && 'opacity: 0.25' };
+`;
+
+const StyledPreviewIcon = styled.img`
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+`;
+
+const StyledPreviewLotte = styled.video`
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+`
+
+export enum AssetType {
+  ICON = "icon",
+  ILLUSTRATION = "illustration",
+  // '3D' = "3d",
+  LOTTIE = "lottie",
+}
+
+export type IconScoutAsset = {
+  uuid: string;
+  value: string;
+  preview: string;
+}
+
+const IconScoutSearchParams: SearchParams = {
+  query: '',
+  asset: 'icon',
+  per_page: 25,
+  page: 1,
+  sort: 'relevant',
+};
+
+const columnNum = 8;
+
+export const IconPicker = (props: {
+  assetType: string;
+  uuid: string;
+  value: string;
+  preview: string;
+  onChange: (key: string, value: string, preview: string) => void;
+  label?: ReactNode;
+  IconType?: "OnlyAntd" | "All" | "default" | undefined;
+}) => {
+  const [ visible, setVisible ] = useState(false)
+  const [ loading, setLoading ] = useState(false)
+  const [ downloading, setDownloading ] = useState(false)
+  const [ searchText, setSearchText ] = useState<string>('')
+  const [ searchResults, setSearchResults ] = useState<Array<any>>([]);
+  const { subscriptions } = useSimpleSubscriptionContext();
+
+  const mediaPackSubscription = subscriptions.find(
+    sub => sub.product === SubscriptionProductsEnum.MEDIAPACKAGE && sub.status === 'active'
+  );
+
+  const onChangeRef = useRef(props.onChange);
+  onChangeRef.current = props.onChange;
+
+  const onChangeIcon = useCallback(
+    (key: string, value: string, url: string) => {
+      onChangeRef.current(key, value, url);
+      setVisible(false);
+    }, []
+  );
+
+  const fetchResults = async (query: string) => {
+    setLoading(true);
+    const freeResult = await searchAssets({
+      ...IconScoutSearchParams,
+      asset: props.assetType,
+      price: 'free',
+      query,
+    });
+    const premiumResult = await searchAssets({
+      ...IconScoutSearchParams,
+      asset: props.assetType,
+      price: 'premium',
+      query,
+    });
+    setLoading(false);
+
+    console.log("freeResult", freeResult, "premiumResult", premiumResult)
+
+    setSearchResults([...freeResult.data, ...premiumResult.data]);
+  };
+
+  const downloadAsset = async (
+    uuid: string,
+    downloadUrl: string,
+    callback: (assetUrl: string) => void,
+  ) => {
+    try {
+      if (uuid && downloadUrl) {
+        const json = await IconScoutApi.downloadAsset(downloadUrl);
+        getBase64(json, (url: string) => {
+          callback(url);
+        });
+      }
+    } catch(error) {
+      console.error(error);
+      setDownloading(false);
+    }
+  }
+
+  const fetchDownloadUrl = async (uuid: string, preview: string) => {
+    try {
+      setDownloading(true);
+      const result = await getAssetLinks(uuid, {
+        format: props.assetType === AssetType.LOTTIE ? 'lottie' : 'svg',
+      });
+
+      downloadAsset(uuid, result.download_url, (assetUrl: string) => {
+        setDownloading(false);
+        onChangeIcon(uuid, assetUrl, preview);
+      });
+    } catch (error) {
+      console.error(error);
+      setDownloading(false);
+    }
+  }
+
+  const handleChange = (e: { target: { value: any; }; }) => {
+    const query = e.target.value;
+    setSearchText(query); // Update search text immediately
+  
+    if (query.length > 2) {
+      debouncedFetchResults(query); // Trigger search only for >2 characters
+    } else {
+      setSearchResults([]); // Clear results if input is too short
+    }
+  };
+
+  const debouncedFetchResults = useMemo(() => debounce(fetchResults, 700), []);
+
+  const rowRenderer = useCallback(
+    (p: ListRowProps) => (
+      <IconRow key={p.key} style={p.style}>
+        {searchResults
+          .slice(p.index * columnNum, (p.index + 1) * columnNum)
+          .map((icon) => (
+            <IconItemContainer
+              key={icon.uuid}
+              tabIndex={0}
+              onClick={() => {
+                // check if premium content then show subscription popup
+                // TODO: if user has subscription then skip this if block
+                if (!mediaPackSubscription) {
+                  CustomModal.confirm({
+                    title: trans("iconScout.buySubscriptionTitle"),
+                    content: trans("iconScout.buySubscriptionContent"),
+                    onConfirm: () =>{
+                      window.open(SUBSCRIPTION_SETTING, "_blank");
+                    },
+                    confirmBtnType: "primary",
+                    okText: trans("iconScout.buySubscriptionButton"),
+                  })
+                  return;
+                }
+
+                fetchDownloadUrl(
+                  icon.uuid,
+                  props.assetType === AssetType.ICON ? icon.urls.png_64 : icon.urls.thumb,
+                );
+              }}
+            >
+              <Badge
+                count={icon.price !== 0 ? <CrownFilled style={{color: "#e7b549"}} /> : undefined}
+                size='small'
+              >
+                <IconWrapper $isPremium={icon.price !== 0}>
+                  {props.assetType === AssetType.ICON && (
+                    <StyledPreviewIcon src={icon.urls.png_64} />
+                  )}
+                  {props.assetType === AssetType.ILLUSTRATION && (
+                    <StyledPreviewIcon src={icon.urls.thumb} />
+                  )}
+                  {props.assetType === AssetType.LOTTIE && (
+                    <StyledPreviewLotte src={icon.urls.thumb} autoPlay />
+                  )}
+                </IconWrapper>
+              </Badge>
+            </IconItemContainer>
+          ))}
+      </IconRow>
+    ),[searchResults]
+  );
+
+  const popupTitle = useMemo(() => {
+    if (props.assetType === AssetType.ILLUSTRATION) return trans("iconScout.searchImage");
+    if (props.assetType === AssetType.LOTTIE) return trans("iconScout.searchAnimation");
+    return trans("iconScout.searchIcon");
+  }, [props.assetType]);
+
+  return (
+    <Popover
+      trigger={'click'}
+      placement="left"
+      open={visible}
+      onOpenChange={setVisible}
+      styles={{
+        body: {
+          border: "none",
+          boxShadow: "none",
+          background: "transparent",
+        }
+      }}
+      destroyTooltipOnHide
+      content={
+        <Draggable handle=".dragHandle">
+          <PopupContainer>
+            <TitleDiv className="dragHandle">
+              <TitleText>{popupTitle}</TitleText>
+              <StyledCloseIcon onClick={() => setVisible(false)} />
+            </TitleDiv>
+            <SearchDiv>
+              <TacoInput
+                style={{ width: "100%", paddingLeft: "40px" }}
+                onChange={handleChange}
+                placeholder={popupTitle}
+              />
+              <StyledSearchIcon />
+            </SearchDiv>
+            {loading && (
+              <Flex align="center" justify="center" style={{flex: 1}}>
+                <Spin indicator={<LoadingOutlined style={{ fontSize: 25 }} spin />} />
+              </Flex>
+            )}
+            <Spin spinning={downloading} indicator={<LoadingOutlined style={{ fontSize: 25 }} />} >
+              {!loading && Boolean(searchText) && !Boolean(searchResults?.length) && (
+                <Flex align="center" justify="center" style={{flex: 1}}>
+                  <Typography.Text type="secondary">
+                    {trans("iconScout.noResults")}
+                  </Typography.Text>
+                </Flex>
+              )}
+              {!loading && Boolean(searchText) && Boolean(searchResults?.length) && (
+                <IconListWrapper>
+                  <IconList
+                    width={550}
+                    height={400}
+                    rowHeight={80}
+                    rowCount={Math.ceil(searchResults.length / columnNum)}
+                    rowRenderer={rowRenderer}
+                    />
+                </IconListWrapper>
+              )}
+            </Spin>
+          </PopupContainer>
+        </Draggable>
+      }
+    >
+      <TacoButton style={{ width: "100%" }}>
+        {props.preview ? (
+          <ButtonWrapper>
+            <ButtonIconWrapper>
+              {props.assetType === AssetType.LOTTIE && (
+                <video style={{'width': '100%'}} src={props.preview} autoPlay />
+              )}
+              {props.assetType !== AssetType.LOTTIE && (
+                <IconControlView value={props.value} uuid={props.uuid}/>
+              )}
+            </ButtonIconWrapper>
+            <StyledDeleteInputIcon
+              onClick={(e) => {
+                props.onChange("", "", "");
+                e.stopPropagation();
+              }}
+            />
+          </ButtonWrapper>
+        ) : (
+          <BlockGrayLabel label={trans("iconControl.selectIcon")} />
+        )}
+      </TacoButton>
+    </Popover>
+  );
+};
+
+export function IconControlView(props: { value: string, uuid: string }) {
+  const { value } = props;
+  const icon = useIcon(value);
+
+  if (icon) {
+    return icon.getView();
+  }
+  return <StyledImage src={value} alt="" />;
+}
+
+export function IconscoutControl(
+  assetType: string = AssetType.ICON,
+) {
+  return class IconscoutControl extends SimpleComp<IconScoutAsset> {
+    readonly IGNORABLE_DEFAULT_VALUE = false;
+    protected getDefaultValue(): IconScoutAsset {
+      return {
+        uuid: '',
+        value: '',
+        preview: '',
+      };
+    }
+
+    override getPropertyView(): ReactNode {
+      throw new Error("Method not implemented.");
+    }
+
+    propertyView(params: ControlParams & { type?: "switch" | "checkbox" }) {
+      return wrapperToControlItem(
+        <ControlPropertyViewWrapper {...params}>
+          <IconPicker
+            assetType={assetType}
+            uuid={this.value.uuid}
+            value={this.value.value}
+            preview={this.value.preview}
+            onChange={(uuid, value, preview) => {
+              this.dispatchChangeValueAction({uuid, value, preview})
+            }}
+            label={params.label}
+            IconType={params.IconType}
+          />
+        </ControlPropertyViewWrapper>
+      );
+    }
+  }
+}
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 825761bc3c..db8085af97 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -3783,9 +3783,17 @@ export const en = {
     "loop": "Loop",
     "auto": "Auto",
     "onHover": "On Hover",
+    "onTrigger": "On Trigger",
     "singlePlay": "Single Play",
     "endlessLoop": "Endless Loop",
-    "keepLastFrame": "Keep Last Frame displayed"
+    "keepLastFrame": "Keep Last Frame displayed",
+    "fit": "Fit",
+    "align": "Align",
+    "load": "On Load",
+    "play": "On Play",
+    "pause": "On Pause",
+    "stop": "On Stop",
+    "complete": "On Complete",
   },
   "timeLine": {
     "titleColor": "Title Color",
@@ -4090,6 +4098,15 @@ export const en = {
     discord: "https://discord.com/invite/qMG9uTmAx2",
   },
 
+  iconScout: {
+    "searchImage": "Search Image",
+    "searchAnimation": "Search Animation",
+    "searchIcon": "Search Icon",
+    "noResults": "No results found.",
+    "buySubscriptionTitle": "Unlock Premium Assets",
+    "buySubscriptionContent": "This asset is exclusive to Media Package Subscribers. Subscribe to Media Package and download high-quality assets without limits!",
+    "buySubscriptionButton": "Subscribe Now",
+  }
 };
 
 // const jsonString = JSON.stringify(en, null, 2);
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
index 71c13d039e..5856a131d1 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -69,7 +69,6 @@ import { SubscriptionProductsEnum } from '@lowcoder-ee/constants/subscriptionCon
 import AppEditor from "../editor/AppEditor";
 import { fetchDeploymentIdAction } from "@lowcoder-ee/redux/reduxActions/configActions";
 import { getDeploymentId } from "@lowcoder-ee/redux/selectors/configSelectors";
-import { SimpleSubscriptionContextProvider } from '@lowcoder-ee/util/context/SimpleSubscriptionContext';
 import {LoadingBarHideTrigger} from "@lowcoder-ee/util/hideLoading";
 
 const TabLabel = styled.div`
@@ -154,171 +153,169 @@ export default function ApplicationHome() {
   return (
     <DivStyled>
       <LoadingBarHideTrigger />
-      <SimpleSubscriptionContextProvider>
-        <Layout
-          sections={[
-            {
-              items: [
-                {
-                  text: <TabLabel>{trans("home.profile")}</TabLabel>,
-                  routePath: USER_PROFILE_URL,
-                  routeComp: UserProfileView,
-                  icon: ({ selected, ...otherProps }) => selected ? <UserIcon {...otherProps} width={"24px"}/> : <UserIcon {...otherProps} width={"24px"}/>,
-                  mobileVisible: true,
-                },
-                {
-                  text: <TabLabel>{trans("home.news")}</TabLabel>,
-                  routePath: NEWS_URL,
-                  routeComp: NewsView,
-                  icon: ({ selected, ...otherProps }) => selected ? <NewsIcon {...otherProps} width={"24px"}/> : <NewsIcon {...otherProps} width={"24px"}/>,
-                  visible: ({ user }) => user.orgDev,
-                  style: { color: "red" },
-                  mobileVisible: false,
-                },
-                {
-                  text: <TabLabel>{trans("home.orgHome")}</TabLabel>,
-                  routePath: ORG_HOME_URL,
-                  routePathExact: false,
-                  routeComp: OrgView,
-                  icon: ({ selected, ...otherProps }) => selected ? <WorkspacesIcon {...otherProps} width={"24px"}/> : <WorkspacesIcon {...otherProps} width={"24px"}/>,
-                  visible: ({ user }) => !user.orgDev,
-                  mobileVisible: true,
-                },
-                {
-                  text: <TabLabel>{trans("home.marketplace")}</TabLabel>,
-                  routePath: MARKETPLACE_URL,
-                  routePathExact: false,
-                  routeComp: MarketplaceView,
-                  icon: ({ selected, ...otherProps }) => selected ? <MarketplaceIcon {...otherProps} width={"24px"}/> : <MarketplaceIcon {...otherProps} width={"24px"}/>,
-                  mobileVisible: false,
-                },
-              ]
-            },
+      <Layout
+        sections={[
+          {
+            items: [
+              {
+                text: <TabLabel>{trans("home.profile")}</TabLabel>,
+                routePath: USER_PROFILE_URL,
+                routeComp: UserProfileView,
+                icon: ({ selected, ...otherProps }) => selected ? <UserIcon {...otherProps} width={"24px"}/> : <UserIcon {...otherProps} width={"24px"}/>,
+                mobileVisible: true,
+              },
+              {
+                text: <TabLabel>{trans("home.news")}</TabLabel>,
+                routePath: NEWS_URL,
+                routeComp: NewsView,
+                icon: ({ selected, ...otherProps }) => selected ? <NewsIcon {...otherProps} width={"24px"}/> : <NewsIcon {...otherProps} width={"24px"}/>,
+                visible: ({ user }) => user.orgDev,
+                style: { color: "red" },
+                mobileVisible: false,
+              },
+              {
+                text: <TabLabel>{trans("home.orgHome")}</TabLabel>,
+                routePath: ORG_HOME_URL,
+                routePathExact: false,
+                routeComp: OrgView,
+                icon: ({ selected, ...otherProps }) => selected ? <WorkspacesIcon {...otherProps} width={"24px"}/> : <WorkspacesIcon {...otherProps} width={"24px"}/>,
+                visible: ({ user }) => !user.orgDev,
+                mobileVisible: true,
+              },
+              {
+                text: <TabLabel>{trans("home.marketplace")}</TabLabel>,
+                routePath: MARKETPLACE_URL,
+                routePathExact: false,
+                routeComp: MarketplaceView,
+                icon: ({ selected, ...otherProps }) => selected ? <MarketplaceIcon {...otherProps} width={"24px"}/> : <MarketplaceIcon {...otherProps} width={"24px"}/>,
+                mobileVisible: false,
+              },
+            ]
+          },
 
-            {
-              items: [
-                // {
-                //   text: <MoreFoldersWrapper>{trans("home.allFolders")}</MoreFoldersWrapper>,
-                //   routePath: FOLDERS_URL,
-                //   routeComp: RootFolderListView,
-                //   icon: ({ selected, ...otherProps }) => selected ? <FolderIcon {...otherProps} width={"24px"}/> : <FolderIcon {...otherProps} width={"24px"}/>,
-                // },
-                {
-                  text: <TabLabel>{trans("home.allApplications")}</TabLabel>,
-                  routePath: ALL_APPLICATIONS_URL,
-                  routeComp: HomeView,
-                  icon: ({ selected, ...otherProps }) => selected ? <AppsIcon {...otherProps} width={"24px"}/> : <AppsIcon {...otherProps} width={"24px"}/>,
-                  mobileVisible: true,
-                },
-              ],
-            },
-    
-            {
-              items: [
-                
-                {
-                  text: <TabLabel>{trans("home.queryLibrary")}</TabLabel>,
-                  routePath: QUERY_LIBRARY_URL,
-                  routeComp: QueryLibraryEditor,
-                  icon: ({ selected, ...otherProps }) => selected ? <HomeQueryLibraryIcon {...otherProps} width={"24px"}/> : <HomeQueryLibraryIcon {...otherProps} width={"24px"}/>,
-                  visible: ({ user }) => user.orgDev,
-                  mobileVisible: false,
-                },
-                {
-                  text: <TabLabel>{trans("home.datasource")}</TabLabel>,
-                  routePath: DATASOURCE_URL,
-                  routePathExact: false,
-                  routeComp: DatasourceHome,
-                  icon: ({ selected, ...otherProps }) => selected ? <HomeDataSourceIcon {...otherProps} width={"24px"}/> : <HomeDataSourceIcon {...otherProps} width={"24px"}/>,
-                  visible: ({ user }) => user.orgDev,
-                  onSelected: (_, currentPath) => currentPath.split("/")[1] === "datasource",
-                  mobileVisible: false,
-                },
-              ],
-            },
-            isEE() ? {
-              items: [
-                {
-                  text: <TabLabel>{trans("settings.AppUsage")}</TabLabel>,
-                  routePath: "/ee/6600ae8724a23f365ba2ed4c/admin",
-                  routePathExact: false,
-                  routeComp: AppEditor,
-                  icon: ({ selected, ...otherProps }) => selected ? ( <EnterpriseIcon {...otherProps} width={"24px"}/> ) : ( <EnterpriseIcon {...otherProps} width={"24px"}/> ),
-                  visible: ({ user }) => user.orgDev,
-                  mobileVisible: false,
-                },
-              ],
-            } : { items: [] },
+          {
+            items: [
+              // {
+              //   text: <MoreFoldersWrapper>{trans("home.allFolders")}</MoreFoldersWrapper>,
+              //   routePath: FOLDERS_URL,
+              //   routeComp: RootFolderListView,
+              //   icon: ({ selected, ...otherProps }) => selected ? <FolderIcon {...otherProps} width={"24px"}/> : <FolderIcon {...otherProps} width={"24px"}/>,
+              // },
+              {
+                text: <TabLabel>{trans("home.allApplications")}</TabLabel>,
+                routePath: ALL_APPLICATIONS_URL,
+                routeComp: HomeView,
+                icon: ({ selected, ...otherProps }) => selected ? <AppsIcon {...otherProps} width={"24px"}/> : <AppsIcon {...otherProps} width={"24px"}/>,
+                mobileVisible: true,
+              },
+            ],
+          },
+  
+          {
+            items: [
+              
+              {
+                text: <TabLabel>{trans("home.queryLibrary")}</TabLabel>,
+                routePath: QUERY_LIBRARY_URL,
+                routeComp: QueryLibraryEditor,
+                icon: ({ selected, ...otherProps }) => selected ? <HomeQueryLibraryIcon {...otherProps} width={"24px"}/> : <HomeQueryLibraryIcon {...otherProps} width={"24px"}/>,
+                visible: ({ user }) => user.orgDev,
+                mobileVisible: false,
+              },
+              {
+                text: <TabLabel>{trans("home.datasource")}</TabLabel>,
+                routePath: DATASOURCE_URL,
+                routePathExact: false,
+                routeComp: DatasourceHome,
+                icon: ({ selected, ...otherProps }) => selected ? <HomeDataSourceIcon {...otherProps} width={"24px"}/> : <HomeDataSourceIcon {...otherProps} width={"24px"}/>,
+                visible: ({ user }) => user.orgDev,
+                onSelected: (_, currentPath) => currentPath.split("/")[1] === "datasource",
+                mobileVisible: false,
+              },
+            ],
+          },
+          isEE() ? {
+            items: [
+              {
+                text: <TabLabel>{trans("settings.AppUsage")}</TabLabel>,
+                routePath: "/ee/6600ae8724a23f365ba2ed4c/admin",
+                routePathExact: false,
+                routeComp: AppEditor,
+                icon: ({ selected, ...otherProps }) => selected ? ( <EnterpriseIcon {...otherProps} width={"24px"}/> ) : ( <EnterpriseIcon {...otherProps} width={"24px"}/> ),
+                visible: ({ user }) => user.orgDev,
+                mobileVisible: false,
+              },
+            ],
+          } : { items: [] },
 
-            !supportSubscription && user.orgDev ? {
-              items: [
-                {
-                  text: <TabLabel>{trans("home.support")}</TabLabel>,
-                  routePath: SUBSCRIPTION_SETTING,
-                  routeComp: Subscription,
-                  routePathExact: false,
-                  icon: ({ selected, ...otherProps }) => selected ? <SupportIcon {...otherProps} width={"24px"}/> : <SupportIcon {...otherProps} width={"24px"}/>,
-                  mobileVisible: true,
-                },
-              ],
-            } : { items: [] },
+          !supportSubscription && user.orgDev ? {
+            items: [
+              {
+                text: <TabLabel>{trans("home.support")}</TabLabel>,
+                routePath: SUBSCRIPTION_SETTING,
+                routeComp: Subscription,
+                routePathExact: false,
+                icon: ({ selected, ...otherProps }) => selected ? <SupportIcon {...otherProps} width={"24px"}/> : <SupportIcon {...otherProps} width={"24px"}/>,
+                mobileVisible: true,
+              },
+            ],
+          } : { items: [] },
 
-            supportSubscription && user.orgDev ? {
-              items: [
-                {
-                  text: <TabLabel>{trans("home.support")}</TabLabel>,
-                  routePath: SUPPORT_URL,
-                  routeComp: Support,
-                  routePathExact: false,
-                  icon: ({ selected, ...otherProps }) => selected ? <SupportIcon {...otherProps} width={"24px"}/> : <SupportIcon {...otherProps} width={"24px"}/>,
-                  mobileVisible: true,
-                },
-              ],
-            } : { items: [] },
+          supportSubscription && user.orgDev ? {
+            items: [
+              {
+                text: <TabLabel>{trans("home.support")}</TabLabel>,
+                routePath: SUPPORT_URL,
+                routeComp: Support,
+                routePathExact: false,
+                icon: ({ selected, ...otherProps }) => selected ? <SupportIcon {...otherProps} width={"24px"}/> : <SupportIcon {...otherProps} width={"24px"}/>,
+                mobileVisible: true,
+              },
+            ],
+          } : { items: [] },
 
-            {
-              items: [
-                {
-                  text: <TabLabel>{trans("settings.title")}</TabLabel>,
-                  routePath: SETTING_URL,
-                  routePathExact: false,
-                  routeComp: Setting,
-                  icon: ({ selected, ...otherProps }) => selected ? <HomeSettingIcon {...otherProps} width={"24px"}/> : <HomeSettingIcon {...otherProps} width={"24px"}/>,
-                  visible: ({ user }) => user.orgDev,
-                  onSelected: (_, currentPath) => currentPath.split("/")[1] === "setting",
-                  mobileVisible: false,
-                }
-              ]
-            },
+          {
+            items: [
+              {
+                text: <TabLabel>{trans("settings.title")}</TabLabel>,
+                routePath: SETTING_URL,
+                routePathExact: false,
+                routeComp: Setting,
+                icon: ({ selected, ...otherProps }) => selected ? <HomeSettingIcon {...otherProps} width={"24px"}/> : <HomeSettingIcon {...otherProps} width={"24px"}/>,
+                visible: ({ user }) => user.orgDev,
+                onSelected: (_, currentPath) => currentPath.split("/")[1] === "setting",
+                mobileVisible: false,
+              }
+            ]
+          },
 
-            {
-              items: [
-                {
-                  text: <TabLabel>{trans("home.trash")}</TabLabel>,
-                  routePath: TRASH_URL,
-                  routeComp: TrashView,
-                  icon: ({ selected, ...otherProps }) => selected ? <RecyclerIcon {...otherProps} width={"24px"}/> : <RecyclerIcon {...otherProps} width={"24px"}/>,
-                  visible: ({ user }) => user.orgDev,
-                  mobileVisible: false,
-                },
-              ],
-            },
+          {
+            items: [
+              {
+                text: <TabLabel>{trans("home.trash")}</TabLabel>,
+                routePath: TRASH_URL,
+                routeComp: TrashView,
+                icon: ({ selected, ...otherProps }) => selected ? <RecyclerIcon {...otherProps} width={"24px"}/> : <RecyclerIcon {...otherProps} width={"24px"}/>,
+                visible: ({ user }) => user.orgDev,
+                mobileVisible: false,
+              },
+            ],
+          },
 
-            // this we need to show the Folders view in the Admin Area
-            {
-              items: [
-                {
-                  text: "",
-                  routePath: FOLDER_URL,
-                  routeComp: FolderView,
-                  visible: () => false,
-                }
-              ]
-            }
+          // this we need to show the Folders view in the Admin Area
+          {
+            items: [
+              {
+                text: "",
+                routePath: FOLDER_URL,
+                routeComp: FolderView,
+                visible: () => false,
+              }
+            ]
+          }
 
-          ]}
-        />
-      </SimpleSubscriptionContextProvider>
+        ]}
+      />
     </DivStyled>
   );
 }
diff --git a/client/yarn.lock b/client/yarn.lock
index 7fae135fa1..b819a27167 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -3113,6 +3113,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lottiefiles/dotlottie-react@npm:^0.13.0":
+  version: 0.13.0
+  resolution: "@lottiefiles/dotlottie-react@npm:0.13.0"
+  dependencies:
+    "@lottiefiles/dotlottie-web": 0.40.1
+  peerDependencies:
+    react: ^17 || ^18 || ^19
+  checksum: bafe6ded727aab991ff03f6ff5a2fd1a41b1f429b36175f34140017fc684e0a8ef7f7b713d189bd49948c4b728fe1d05c7d8c20a0bea0d8c1ae1ed87614fe843
+  languageName: node
+  linkType: hard
+
+"@lottiefiles/dotlottie-web@npm:0.40.1":
+  version: 0.40.1
+  resolution: "@lottiefiles/dotlottie-web@npm:0.40.1"
+  checksum: a79e60c33845311cb055ea661abb2f4211063e149788aea724afbed05a09ae569d50b4c0e5825d13eb5fc62a33c3dc74f2f3900fdb1e99f8594feddc72d2cc27
+  languageName: node
+  linkType: hard
+
 "@lottiefiles/react-lottie-player@npm:^3.5.3":
   version: 3.5.3
   resolution: "@lottiefiles/react-lottie-player@npm:3.5.3"
@@ -14232,6 +14250,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     "@fortawesome/free-regular-svg-icons": ^6.5.1
     "@fortawesome/free-solid-svg-icons": ^6.5.1
     "@fortawesome/react-fontawesome": latest
+    "@lottiefiles/dotlottie-react": ^0.13.0
     "@manaflair/redux-batch": ^1.0.0
     "@rjsf/antd": ^5.21.2
     "@rjsf/core": ^5.21.2

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1547.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1547.diff" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1547.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1547.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>