diff --git a/client/packages/lowcoder-sdk-webpack-bundle/index.jsx b/client/packages/lowcoder-sdk-webpack-bundle/index.jsx
index a6294e6c07..ceaef9c99e 100644
--- a/client/packages/lowcoder-sdk-webpack-bundle/index.jsx
+++ b/client/packages/lowcoder-sdk-webpack-bundle/index.jsx
@@ -37,6 +37,18 @@ for (
             [i]?.querySelector(".locoder-backend-url")?.value ||
           "https://api-service.lowcoder.cloud"
         }
+        webUrl={
+          document
+            .querySelectorAll(".lowcoder-module-container")
+            [i]?.querySelector(".locoder-frontend-url")?.value ||
+          "https://app.lowcoder.cloud"
+        }
+        orgId={
+          document
+            .querySelectorAll(".lowcoder-module-container")
+            [i]?.querySelector(".locoder-org-id")?.value ||
+          undefined
+        }
       />
     );
   }
diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
index 3b90c29938..2a95d0000f 100644
--- a/client/packages/lowcoder/src/app.tsx
+++ b/client/packages/lowcoder/src/app.tsx
@@ -216,8 +216,6 @@ export function bootstrap() {
   initApp();
   loadComps();
 
-  const uiLanguage = localStorage.getItem('lowcoder_uiLanguage');
-
   const container = document.getElementById("root");
   const root = createRoot(container!);
   root.render(
diff --git a/client/packages/lowcoder/src/appView/AppViewInstance.tsx b/client/packages/lowcoder/src/appView/AppViewInstance.tsx
index 937fb3e631..90942c9463 100644
--- a/client/packages/lowcoder/src/appView/AppViewInstance.tsx
+++ b/client/packages/lowcoder/src/appView/AppViewInstance.tsx
@@ -12,6 +12,8 @@ import { AUTH_LOGIN_URL } from "constants/routesURL";
 import { AuthSearchParams } from "constants/authConstants";
 import { saveAuthSearchParams } from "pages/userAuth/authUtils";
 import { Suspense, lazy } from "react";
+import Flex from "antd/es/flex";
+import { TacoButton } from "components/button";
 
 const AppView = lazy(
   () => import('./AppView')
@@ -33,8 +35,11 @@ export interface AppViewInstanceOptions<I = any> {
   baseUrl?: string;
   webUrl?: string;
   moduleInputs?: I;
+  orgId?: string;
 }
 
+let isAuthButtonClicked = false;
+
 export class AppViewInstance<I = any, O = any> {
   private comp: RootComp | null = null;
   private prevOutputs: any = null;
@@ -44,12 +49,16 @@ export class AppViewInstance<I = any, O = any> {
     baseUrl: "https://api-service.lowcoder.cloud",
     webUrl: "https://app.lowcoder.cloud",
   };
+  private authorizedUser: boolean = true;
 
   constructor(private appId: string, private node: Element, private root: Root, options: AppViewInstanceOptions = {}) {
     Object.assign(this.options, options);
     if (this.options.baseUrl) {
       sdkConfig.baseURL = this.options.baseUrl;
     }
+    if (this.options.webUrl) {
+      sdkConfig.webUrl = this.options.webUrl;
+    }
 
     this.dataPromise = this.loadData();
     this.render();
@@ -81,7 +90,15 @@ export class AppViewInstance<I = any, O = any> {
               [AuthSearchParams.redirectUrl]: encodeURIComponent(window.location.href),
               [AuthSearchParams.loginType]: null,
             })
-            window.location.href = `${webUrl}${AUTH_LOGIN_URL}`;
+
+            this.authorizedUser = false;
+            return {
+              data: {
+                orgCommonSettings: undefined,
+                applicationDSL: {},
+                moduleDSL: {},
+              }
+            };
           }
         });
 
@@ -142,19 +159,50 @@ export class AppViewInstance<I = any, O = any> {
 
   private async render() {
     const data = await this.dataPromise;
+    const loginUrl = this.options.orgId
+      ? `${this.options.webUrl}/org/${this.options.orgId}/auth/login`
+      : `${this.options.webUrl}${AUTH_LOGIN_URL}`;
+
     this.root.render(
-      <StyleSheetManager target={this.node as HTMLElement}>
-        <Suspense fallback={null}>
-          <AppView
-            appId={this.appId}
-            dsl={data.appDsl}
-            moduleDsl={data.moduleDslMap}
-            moduleInputs={this.options.moduleInputs}
-            onCompChange={(comp) => this.handleCompChange(comp)}
-            onModuleEventTriggered={(eventName) => this.emit("moduleEventTriggered", [eventName])}
-          />
-        </Suspense>
-      </StyleSheetManager>
+      this.authorizedUser ? (
+        <StyleSheetManager target={this.node as HTMLElement}>
+          <Suspense fallback={null}>
+            <AppView
+              appId={this.appId}
+              dsl={data.appDsl}
+              moduleDsl={data.moduleDslMap}
+              moduleInputs={this.options.moduleInputs}
+              onCompChange={(comp) => this.handleCompChange(comp)}
+              onModuleEventTriggered={(eventName) => this.emit("moduleEventTriggered", [eventName])}
+            />
+          </Suspense>
+        </StyleSheetManager>
+      ) : (
+        <Flex vertical={true} align="center" justify="center">
+          <h4>This resource needs authentication.</h4>
+          {!isAuthButtonClicked ? (
+            <TacoButton
+              buttonType="primary"
+              onClick={() => {
+                isAuthButtonClicked = true;
+                window.open(loginUrl, '_blank');
+                this.render();
+              }}
+            >
+              Login
+            </TacoButton>
+          ) : (
+            <TacoButton
+              buttonType="primary"
+              onClick={() => {
+                window.location.reload();
+              }}
+            >
+              Refresh
+            </TacoButton>
+          )}
+        </Flex>
+      )
     );
   }
 
diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx
index 04a5d16a03..ddead0e52d 100644
--- a/client/packages/lowcoder/src/comps/comps/avatar.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx
@@ -31,7 +31,7 @@ import { DropdownOptionControl } from "../controls/optionsControl";
 import { ReactElement, useContext } from "react";
 import { CompNameContext, EditorContext } from "../editorState";
 
-const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer: boolean, $style: AvatarStyleType }>`
+const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
   background: ${(props) => props.$style.background};
   color: ${(props) => props.$style.fill};
   cursor: ${(props) => props.$cursorPointer ? 'pointer' : ''};
@@ -101,7 +101,7 @@ const childrenMap = {
 const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
   const { shape, title, src, iconSize } = props;
   const comp = useContext(EditorContext).getUICompByName(useContext(CompNameContext));
-  const eventsCount = comp ? Object.keys(comp?.children.comp.children.onEvent.children).length : 0;
+  // const eventsCount = comp ? Object.keys(comp?.children.comp.children.onEvent.children).length : 0;
   const hasIcon = props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
   const items = props.options
     .filter((option) => !option.hidden)
@@ -142,7 +142,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
             shape={shape}
             $style={props.style}
             src={src.value}
-            $cursorPointer={eventsCount > 0}
+            // $cursorPointer={eventsCount > 0}
             onClick={() => props.onEvent("click")}
           >
             {title.value}
diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
index 9a2256e600..d3b2b5602c 100644
--- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
@@ -18,7 +18,7 @@ import { ColorControl } from "../controls/colorControl";
 import { optionsControl } from "../controls/optionsControl";
 import { BoolControl } from "../controls/boolControl";
 import { dropdownControl } from "../controls/dropdownControl";
-import { JSONObject } from "@lowcoder-ee/index.sdk";
+import { JSONObject } from "util/jsonTypes";
 
 const MacaroneList = [
   '#fde68a',
diff --git a/client/packages/lowcoder/src/comps/comps/badgeComp/badgeConstants.tsx b/client/packages/lowcoder/src/comps/comps/badgeComp/badgeConstants.tsx
index 3a26d46d46..e7033ed72d 100644
--- a/client/packages/lowcoder/src/comps/comps/badgeComp/badgeConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/badgeComp/badgeConstants.tsx
@@ -8,7 +8,7 @@ import { numberExposingStateControl } from "@lowcoder-ee/comps/controls/codeStat
 import { withDefault } from "comps/generators";
 import { RecordConstructorToComp } from "lowcoder-core";
 import { trans } from "i18n";
-import { dropdownControl } from "@lowcoder-ee/index.sdk";
+import { dropdownControl } from "comps/controls/dropdownControl";
 
 const badgeSizeOptions = [
   {
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
index e647d2a0aa..23b86b231c 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
@@ -9,12 +9,13 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generat
 import { Section, sectionNames } from "lowcoder-design";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import { StringControl } from "comps/controls/codeControl";
+import { StringControl, NumberControl } from "comps/controls/codeControl";
 import { FloatButton } from 'antd';
-import { withDefault } from "../../generators";
+import { withDefault, MultiCompBuilder, valueComp } from "../../generators";
 import { IconControl } from "comps/controls/iconControl";
 import styled from "styled-components";
-import { ButtonEventHandlerControl, MultiCompBuilder, NumberControl, manualOptionsControl, valueComp } from "@lowcoder-ee/index.sdk";
+import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
+import { manualOptionsControl } from "comps/controls/optionsControl";
 
 const Wrapper = styled.div<{ $style: FloatButtonStyleType }>`
     width: 0px;
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
index 4afe306664..0239042f46 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -7,16 +7,22 @@ import {
 } from "../triContainerComp/triContainerCompBuilder";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import { BoolCodeControl } from "comps/controls/codeControl";
-import { BoolControl } from "@lowcoder-ee/comps/controls/boolControl";
+import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import { BoolControl } from "comps/controls/boolControl";
 import { useContext, useEffect, useRef, useState } from "react";
 import { EditorContext } from "comps/editorState";
-import { ButtonEventHandlerControl, IconControl, MultiCompBuilder, CardStyleType, StringControl, clickEvent, dropdownControl, eventHandlerControl, heightCalculator, optionsControl, refreshEvent, styleControl, widthCalculator, withDefault, CardStyle, CardEventHandlerControl } from "@lowcoder-ee/index.sdk";
 import { Card } from "antd";
 import styled from "styled-components";
+import { CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
+import { MultiCompBuilder, withDefault } from "comps/generators";
+import { IconControl } from "comps/controls/iconControl";
+import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl";
+import { optionsControl } from "comps/controls/optionsControl";
+import { dropdownControl } from "comps/controls/dropdownControl";
+import { styleControl } from "comps/controls/styleControl";
 const { Meta } = Card;
 
-const Warpper = styled.div<{ $style: CardStyleType | undefined, showMate: boolean, cardType: string }>`
+const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string }>`
   height: 100%;
   width: 100%;
   .ant-card-small >.ant-card-head {
@@ -31,7 +37,7 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, showMate: boolea
     border-inline-end: 1px solid ${props => props.$style?.border};
   }
   .ant-card-small >.ant-card-body {
-    padding: ${props => props.cardType == 'custom' ? '0px' : '10px'};
+    padding: ${props => props.$cardType == 'custom' ? '0px' : '10px'};
   }
   .ant-card .ant-card-head {
     background-color: ${props => props.$style?.background};
@@ -44,7 +50,7 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, showMate: boolea
     background-color: ${props => props.$style?.background};
   }
   .ant-card .ant-card-body {
-    padding: ${props => props.cardType == 'custom' ? '0px' : '10px'};
+    padding: ${props => props.$cardType == 'custom' ? '0px' : '10px'};
   }
   .ant-card {
     display: flex;
@@ -53,8 +59,8 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, showMate: boolea
     background-color: ${props => props.$style?.background};
   }
   .ant-card-body {
-    display: ${props => props.showMate ? '' : 'none'};
-    height: ${props => props.cardType == 'custom' ? '100%' : 'auto'};
+    display: ${props => props.$showMate ? '' : 'none'};
+    height: ${props => props.$cardType == 'custom' ? '100%' : 'auto'};
   }
 `;
 
@@ -163,8 +169,8 @@ export const ContainerBaseComp = (function () {
         <Warpper
           ref={conRef}
           $style={props.style}
-          showMate={props.showMeta || props.cardType == 'custom'}
-          cardType={props.cardType}
+          $showMate={props.showMeta || props.cardType == 'custom'}
+          $cardType={props.cardType}
           onMouseEnter={() => props.onEvent('focus')}
           onMouseLeave={() => props.onEvent('blur')}
           onClick={() => props.onEvent('click')}
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
index 941609f22d..f7ccaf662d 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
@@ -4,15 +4,18 @@ import { styleControl } from "comps/controls/styleControl";
 import { ColorPickerStyle, ColorPickerStyleType } from "comps/controls/styleControlConstants";
 import { NameConfig } from "comps/generators/withExposing";
 import styled, { css } from "styled-components";
-import { UICompBuilder } from "../../generators";
+import { UICompBuilder, withDefault } from "../../generators";
 import { FormDataPropertyView } from "../formComp/formDataConstants";
 import { textInputChildren } from "../textInputComp/textInputConstants";
 import { disabledPropertyView, hiddenPropertyView, } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { ColorPicker } from 'antd';
-import { ArrayOrJSONObjectControl, changeEvent, dropdownControl, eventHandlerControl, jsonObjectExposingStateControl, stringExposingStateControl, withDefault } from "@lowcoder-ee/index.sdk";
 import { presets } from "./colorPickerConstants";
 import _ from "lodash"
+import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
+import { jsonObjectExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
+import { dropdownControl } from "comps/controls/dropdownControl";
+import { ArrayOrJSONObjectControl } from "comps/controls/codeControl";
 
 export function getStyle(style: ColorPickerStyleType) {
   return css`
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
index 7cd6af37ea..194e09d96c 100644
--- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
@@ -9,9 +9,8 @@ import { gridItemCompToGridItems, InnerGrid } from "../containerComp/containerVi
 import { LayoutViewProps } from "./pageLayoutCompBuilder";
 import { ConfigProvider, Layout } from 'antd';
 import { contrastBackground, contrastText } from "comps/controls/styleControlConstants";
-
-import { LowcoderAppView } from "@lowcoder-ee/index.sdk";
 import { useRef, useState } from "react";
+import { LowcoderAppView } from "appView/LowcoderAppView";
 
 const { Header, Content, Footer, Sider } = Layout;
 
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index 3ae61995f8..20ca160f76 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -55,10 +55,9 @@ import { RefControl } from "comps/controls/refControl";
 import { BaseSelectRef } from "rc-select";
 import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, focusMethod } from "comps/utils/methodUtils";
-
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { styleControl } from "@lowcoder-ee/index.sdk";
+import { styleControl } from "comps/controls/styleControl";
 
 export const getStyle = (
   style:
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx
index b65c74eb41..ce726fed96 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx
@@ -20,6 +20,7 @@ const Wrapper = styled.div`
 `;
 
 const IconWrapper = styled.div<{ $style: CheckboxStyleType; $ifChecked: boolean }>`
+  pointer-events: none;
   height: 22px;
   svg {
     width: 14px;
@@ -87,7 +88,10 @@ export const BooleanComp = (function () {
       const CheckBoxComp = () => {
         const style = useStyle(CheckboxStyle);
         return (
-          <IconWrapper $style={style} $ifChecked={value}>
+          <IconWrapper
+            $style={style}
+            $ifChecked={value}
+          >
             {value ? (
               <TableCheckedIcon />
             ) : props.falseValues === "x" ? (
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index b08525eafa..a1726dfc3a 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -28,14 +28,13 @@ import {
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import { BoolCodeControl } from "comps/controls/codeControl";
+import { BoolCodeControl, NumberControl } from "comps/controls/codeControl";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { EditorContext } from "comps/editorState";
 import { checkIsMobile } from "util/commonUtils";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { BoolControl } from "comps/controls/boolControl";
 import { PositionControl } from "comps/controls/dropdownControl";
-import { NumberControl, StringControl } from "@lowcoder-ee/index.sdk";
 
 const EVENT_OPTIONS = [
   {
diff --git a/client/packages/lowcoder/src/comps/comps/timerComp.tsx b/client/packages/lowcoder/src/comps/comps/timerComp.tsx
index 264ca82551..cf515b20a3 100644
--- a/client/packages/lowcoder/src/comps/comps/timerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timerComp.tsx
@@ -13,7 +13,8 @@ import { useContext, useState, useEffect, useMemo } from "react";
 import { stateComp } from "../generators";
 import { EditorContext } from "comps/editorState";
 import { dropdownControl } from "../controls/dropdownControl";
-import { BoolControl, stringExposingStateControl } from "@lowcoder-ee/index.sdk";
+import { stringExposingStateControl } from "comps/controls/codeStateControl";
+import { BoolControl } from "comps/controls/boolControl";
 
 const Container = styled.div<{ $style: timerStyleType | undefined }>`
   align-items: center;
diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
index dbdab33664..3efc336ac1 100644
--- a/client/packages/lowcoder/src/comps/index.tsx
+++ b/client/packages/lowcoder/src/comps/index.tsx
@@ -1,66 +1,6 @@
 // import "comps/comps/layout/navLayout";
 // import "comps/comps/layout/mobileTabLayout";
 import cnchar from "cnchar";
-
-import { ModalComp } from "comps/hooks/modalComp";
-import { ButtonComp } from "./comps/buttonComp/buttonComp";
-import { DropdownComp } from "./comps/buttonComp/dropdownComp";
-import { LinkComp } from "./comps/buttonComp/linkComp";
-import {
-  ContainerComp,
-  defaultContainerData,
-} from "./comps/containerComp/containerComp";
-import { defaultCollapsibleContainerData } from "./comps/containerComp/collapsibleContainerComp";
-import { ContainerComp as FloatTextContainerComp } from "./comps/containerComp/textContainerComp";
-import {
-  PageLayoutComp,
-  defaultPageLayoutData,
-} from "./comps/containerComp/pageLayoutComp";
-import { CustomComp } from "./comps/customComp/customComp";
-import { DatePickerComp, DateRangeComp } from "./comps/dateComp/dateComp";
-import { DividerComp } from "./comps/dividerComp";
-import { FileComp } from "./comps/fileComp/fileComp";
-import { FileViewerComp } from "./comps/fileViewerComp";
-import { ImageComp } from "./comps/imageComp";
-import { JsonSchemaFormComp } from "./comps/jsonSchemaFormComp/jsonSchemaFormComp";
-import { NumberInputComp } from "./comps/numberInputComp/numberInputComp";
-import { RangeSliderComp } from "./comps/numberInputComp/rangeSliderComp";
-import { SliderComp } from "./comps/numberInputComp/sliderComp";
-import { ProgressCircleComp } from "./comps/progressCircleComp";
-import { ProgressComp } from "./comps/progressComp";
-import { RatingComp } from "./comps/ratingComp";
-import { RichTextEditorComp } from "./comps/richTextEditorComp";
-import { CascaderWithDefault } from "./comps/selectInputComp/cascaderComp";
-import { CheckboxComp } from "./comps/selectInputComp/checkboxComp";
-import { MultiSelectComp } from "./comps/selectInputComp/multiSelectComp";
-import { RadioComp } from "./comps/selectInputComp/radioComp";
-import { SegmentedControlComp } from "./comps/selectInputComp/segmentedControl";
-import { StepComp } from "./comps/selectInputComp/stepControl";
-import { SelectComp } from "./comps/selectInputComp/selectComp";
-import { SwitchComp } from "./comps/switchComp";
-import { defaultTableData } from "./comps/tableComp/mockTableComp";
-import { TabbedContainerComp } from "./comps/tabs";
-import { TextComp } from "./comps/textComp";
-import { InputComp } from "./comps/textInputComp/inputComp";
-import { PasswordComp } from "./comps/textInputComp/passwordComp";
-import { TextAreaComp } from "./comps/textInputComp/textAreaComp";
-import { TimePickerComp, TimeRangeComp } from "./comps/dateComp/timeComp";
-import { defaultFormData, FormComp } from "./comps/formComp/formComp";
-import { IFrameComp } from "./comps/iframeComp";
-import {
-  defaultGridData,
-  defaultListViewData,
-  GridComp,
-  ListViewComp,
-} from "./comps/listViewComp";
-import { ModuleComp } from "./comps/moduleComp/moduleComp";
-import { NavComp } from "./comps/navComp/navComp";
-import { TableComp } from "./comps/tableComp";
-import { QRCodeComp } from "./comps/qrCodeComp";
-import { JsonExplorerComp } from "./comps/jsonComp/jsonExplorerComp";
-import { JsonEditorComp } from "./comps/jsonComp/jsonEditorComp";
-import { TreeComp } from "./comps/treeComp/treeComp";
-import { TreeSelectComp } from "./comps/treeComp/treeSelectComp";
 import { trans } from "i18n";
 import { remoteComp } from "./comps/remoteComp/remoteComp";
 import {
@@ -68,32 +8,7 @@ import {
   type UICompManifest,
   type UICompType,
 } from "./uiCompRegistry";
-import { AudioComp } from "./comps/mediaComp/audioComp";
-import { VideoComp } from "./comps/mediaComp/videoComp";
-import { DrawerComp } from "./hooks/drawerComp";
-import { CarouselComp } from "./comps/carouselComp";
-import { ToggleButtonComp } from "./comps/buttonComp/toggleButtonComp";
-
 import { RemoteCompInfo } from "types/remoteComp";
-import { ScannerComp } from "./comps/buttonComp/scannerComp";
-import { SignatureComp } from "./comps/signatureComp";
-import { TimeLineComp } from "./comps/timelineComp/timelineComp";
-import { TourComp } from "./comps/tourComp/tourComp";
-import { CommentComp } from "./comps/commentComp/commentComp";
-import { MentionComp } from "./comps/textInputComp/mentionComp";
-import { AutoCompleteComp } from "./comps/autoCompleteComp/autoCompleteComp";
-import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp";
-import { ResponsiveLayoutComp } from "./comps/responsiveLayout";
-import { IconComp } from "./comps/iconComp";
-
-import { ColorPickerComp } from "./comps/mediaComp/colorPickerComp"; // icon needed
-import { AvatarComp } from "./comps/avatar"; // icon needed
-import { AvatarGroupComp } from "./comps/avatarGroup"; // icon needed
-import { FloatButtonComp } from "./comps/buttonComp/floatButtonComp"; // icon needed
-import { transferComp } from "./comps/transferComp"; // icon needed
-import { CardComp } from "./comps/containerComp/cardComp"; // icon needed
-import { TimerComp } from "./comps/timerComp"; // icon needed
-
 
 import {
   AudioCompIcon,
@@ -298,7 +213,9 @@ export var uiCompMap: Registry = {
     categories: ["layout"],
     icon: PageLayoutCompIcon,
     keywords: trans("uiComp.pageLayoutCompKeywords"),
-    comp: PageLayoutComp,
+    lazyLoad: true,
+    compName: 'PageLayoutComp',
+    compPath: 'comps/containerComp/pageLayoutComp',
     withoutLoading: true,
     layoutInfo: {
       w: 12,
@@ -306,7 +223,8 @@ export var uiCompMap: Registry = {
       // static: true,
       delayCollision: true,
     },
-    defaultDataFn: defaultPageLayoutData,
+    defaultDataFnName: "defaultPageLayoutData",
+    defaultDataFnPath: "comps/tableComp/mockTableComp",
   },
   floatTextContainer: {
     name: trans("uiComp.floatTextContainerCompName"),
@@ -315,7 +233,7 @@ export var uiCompMap: Registry = {
     categories: ["layout"],
     icon: FloatingTextCompIcon,
     keywords: trans("uiComp.floatTextContainerCompKeywords"),
-    comp: FloatTextContainerComp,
+    lazyLoad: true,
     compName: "ContainerComp",
     compPath: "comps/containerComp/textContainerComp",
     withoutLoading: true,
@@ -325,7 +243,6 @@ export var uiCompMap: Registry = {
       // static: true,
       delayCollision: true,
     },
-    defaultDataFn: defaultContainerData,
     defaultDataFnName: "defaultContainerData",
     defaultDataFnPath: "comps/containerComp/containerComp",
   },
@@ -336,7 +253,9 @@ export var uiCompMap: Registry = {
     description: trans("uiComp.cardCompDesc"),
     categories: ["layout"],
     keywords: trans("uiComp.cardCompKeywords"),
-    comp: CardComp,
+    lazyLoad: true,
+    compName: "CardComp",
+    compPath: "comps/containerComp/cardComp",
     layoutInfo: {
       h: 44,
       w: 6,
@@ -542,7 +461,9 @@ export var uiCompMap: Registry = {
     categories: ["layout"],
     icon: IconCompIcon,
     keywords: trans("uiComp.floatButtonCompKeywords"),
-    comp: FloatButtonComp,
+    lazyLoad: true,
+    compName: "FloatButtonComp",
+    compPath: "comps/buttonComp/floatButtonComp",
     layoutInfo: {
       w: 1,
       h: 1,
@@ -573,7 +494,9 @@ export var uiCompMap: Registry = {
     description: trans("uiComp.timerCompDesc"),
     categories: ["scheduling", "projectmanagement"],
     keywords: trans("uiComp.timerCompKeywords"),
-    comp: TimerComp,
+    lazyLoad: true,
+    compName: "TimerComp",
+    compPath: "comps/timerComp",
     layoutInfo: {
       h: 14,
       w: 6,
@@ -589,7 +512,6 @@ export var uiCompMap: Registry = {
     categories: ["collaboration"],
     icon: VideoScreenshareCompIcon,
     keywords: trans("meeting.meetingCompKeywords"),
-    // comp: VideoSharingStreamComp,
     comp: remoteComp({ ...builtInRemoteComps, compName: "meetingStream" }),
     withoutLoading: true,
     layoutInfo: {
@@ -604,7 +526,6 @@ export var uiCompMap: Registry = {
     categories: ["collaboration"],
     icon: VideoCameraStreamCompIcon,
     keywords: trans("meeting.meetingCompKeywords"),
-    // comp: VideoMeetingStreamComp,
     comp: remoteComp({ ...builtInRemoteComps, compName: "meetingStream" }),
     withoutLoading: true,
     layoutInfo: {
@@ -620,7 +541,6 @@ export var uiCompMap: Registry = {
     categories: ["collaboration"],
     icon: VideoMeetingRoomCompIcon,
     keywords: trans("meeting.meetingCompKeywords"),
-    // comp: VideoMeetingControllerComp,
     withoutLoading: true,
   },
 
@@ -632,7 +552,9 @@ export var uiCompMap: Registry = {
     categories: ["collaboration"],
     icon: IconCompIcon,
     keywords: trans("uiComp.avatarCompKeywords"),
-    comp: AvatarComp,
+    lazyLoad: true,
+    compName: "AvatarComp",
+    compPath: "comps/avatar",
     layoutInfo: {
       w: 3,
       h: 6,
@@ -646,7 +568,9 @@ export var uiCompMap: Registry = {
     description: trans("uiComp.avatarGroupCompDesc"),
     categories: ["collaboration"],
     keywords: trans("uiComp.avatarGroupCompKeywords"),
-    comp: AvatarGroupComp,
+    lazyLoad: true,
+    compName: "AvatarGroupComp",
+    compPath: "comps/avatarGroup",
     withoutLoading: true,
     layoutInfo: {
       w: 6,
@@ -1192,7 +1116,9 @@ export var uiCompMap: Registry = {
     categories: ["multimedia"],
     icon: IconCompIcon,
     keywords: trans("uiComp.iconCompKeywords"),
-    comp: IconComp,
+    lazyLoad: true,
+    compName: "IconComp",
+    compPath: "comps/iconComp",
     layoutInfo: {
       w: 2,
       h: 10,
@@ -1220,7 +1146,9 @@ export var uiCompMap: Registry = {
     categories: ["multimedia"],
     icon: IconCompIcon,
     keywords: trans("uiComp.colorPickerCompKeywords"),
-    comp: ColorPickerComp,
+    lazyLoad: true,
+    compName: "ColorPickerComp",
+    compPath: "comps/mediaComp/colorPickerComp",
   },
 
   // item Handling
@@ -1292,7 +1220,9 @@ export var uiCompMap: Registry = {
     categories: ["multimedia", "itemHandling"],
     icon: TourCompIcon,
     keywords: trans("uiComp.tourCompKeywords"),
-    comp: TourComp,
+    lazyLoad: true,
+    compName: "TourComp",
+    compPath: "comps/tourComp/tourComp",
     layoutInfo: {
       w: 1,
       h: 1,
@@ -1350,7 +1280,9 @@ export var uiCompMap: Registry = {
     description: trans("uiComp.transferDesc"),
     categories: ["itemHandling", "documents"],
     keywords: trans("uiComp.transferKeywords"),
-    comp: transferComp,
+    lazyLoad: true,
+    compName: 'transferComp',
+    compPath: 'comps/transferComp',
     layoutInfo: {
       h: 50,
       w: 12,
diff --git a/client/packages/lowcoder/src/constants/sdkConfig.ts b/client/packages/lowcoder/src/constants/sdkConfig.ts
index fbba691a93..63223427f4 100644
--- a/client/packages/lowcoder/src/constants/sdkConfig.ts
+++ b/client/packages/lowcoder/src/constants/sdkConfig.ts
@@ -1,7 +1,9 @@
 interface SDKConfig {
   baseURL: string;
+  webUrl: string;
 }
 
 export const sdkConfig: SDKConfig = {
   baseURL: "",
+  webUrl: "",
 };