diff --git a/client/packages/lowcoder-design/src/icons/index.tsx b/client/packages/lowcoder-design/src/icons/index.tsx
index b033d52e92..75f0d8a687 100644
--- a/client/packages/lowcoder-design/src/icons/index.tsx
+++ b/client/packages/lowcoder-design/src/icons/index.tsx
@@ -1,5 +1,8 @@
 import React, { lazy, Suspense } from "react";
 
+export { ReactComponent as AIGenerate } from "./remix/ai-generate.svg";
+export { ReactComponent as AIGenerate2 } from "./remix/ai-generate-2.svg";
+export { ReactComponent as AIGenerateText } from "./remix/ai-generate-text.svg";
 export { ReactComponent as AppSnapshotIcon } from "./v1/app-snapshot.svg";
 export { ReactComponent as ArchiveIcon } from "./remix/archive-fill.svg";
 export { ReactComponent as HookCompDropIcon } from "./v1/hook-comp-drop.svg";
diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index e838c870d8..04a4c30535 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -6,7 +6,13 @@
   "main": "src/index.sdk.ts",
   "types": "src/index.sdk.ts",
   "dependencies": {
+    "@ai-sdk/openai": "^1.3.22",
     "@ant-design/icons": "^5.3.0",
+    "@assistant-ui/react": "^0.10.24",
+    "@assistant-ui/react-ai-sdk": "^0.10.14",
+    "@assistant-ui/react-markdown": "^0.10.5",
+    "@assistant-ui/styles": "^0.1.13",
+    "@bany/curl-to-json": "^1.2.8",
     "@codemirror/autocomplete": "^6.11.1",
     "@codemirror/commands": "^6.3.2",
     "@codemirror/lang-css": "^6.2.1",
@@ -27,6 +33,8 @@
     "@jsonforms/core": "^3.5.1",
     "@lottiefiles/dotlottie-react": "^0.13.0",
     "@manaflair/redux-batch": "^1.0.0",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@rjsf/antd": "^5.24.9",
     "@rjsf/core": "^5.24.9",
     "@rjsf/utils": "^5.24.9",
@@ -36,11 +44,13 @@
     "@types/react-signature-canvas": "^1.0.2",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-virtualized": "^9.21.21",
+    "ai": "^4.3.16",
     "alasql": "^4.6.6",
     "animate.css": "^4.1.1",
     "antd": "^5.25.2",
     "axios": "^1.7.7",
     "buffer": "^6.0.3",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.0.0",
     "cnchar": "^3.2.4",
     "coolshapes-react": "lowcoder-org/coolshapes-react",
@@ -60,6 +70,7 @@
     "loglevel": "^1.8.0",
     "lowcoder-core": "workspace:^",
     "lowcoder-design": "workspace:^",
+    "lucide-react": "^0.525.0",
     "mime": "^3.0.0",
     "moment": "^2.29.4",
     "numbro": "^2.3.6",
@@ -97,7 +108,7 @@
     "regenerator-runtime": "^0.13.9",
     "rehype-raw": "^6.1.1",
     "rehype-sanitize": "^5.0.1",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "simplebar-react": "^3.2.4",
     "sql-formatter": "^8.2.0",
diff --git a/client/packages/lowcoder/src/api/applicationApi.ts b/client/packages/lowcoder/src/api/applicationApi.ts
index 2411b50d80..8ed818b371 100644
--- a/client/packages/lowcoder/src/api/applicationApi.ts
+++ b/client/packages/lowcoder/src/api/applicationApi.ts
@@ -99,6 +99,7 @@ class ApplicationApi extends Api {
   static publicToMarketplaceURL = (applicationId: string) => `/applications/${applicationId}/public-to-marketplace`;
   static getMarketplaceAppURL = (applicationId: string) => `/applications/${applicationId}/view_marketplace`;
   static setAppEditingStateURL = (applicationId: string) => `/applications/editState/${applicationId}`;
+  static getAvailableGroupsMembersURL = (applicationId: string) => `/applications/${applicationId}/groups-members/available`;
   static serverSettingsURL = () => `/serverSettings`;
 
   static fetchHomeData(request: HomeDataPayload): AxiosPromise<HomeDataResponse> {
@@ -217,6 +218,10 @@ class ApplicationApi extends Api {
     });
   }
 
+  static getAvailableGroupsMembers(applicationId: string, search: string): AxiosPromise<any> {
+    return Api.get(ApplicationApi.getAvailableGroupsMembersURL(applicationId), {search})
+  }
+
   /**
    * set app as public
    */
diff --git a/client/packages/lowcoder/src/api/orgApi.ts b/client/packages/lowcoder/src/api/orgApi.ts
index 588a20df51..379234b32e 100644
--- a/client/packages/lowcoder/src/api/orgApi.ts
+++ b/client/packages/lowcoder/src/api/orgApi.ts
@@ -62,6 +62,7 @@ export class OrgApi extends Api {
   static updateOrgURL = (orgId: string) => `/organizations/${orgId}/update`;
   static fetchUsage = (orgId: string) => `/organizations/${orgId}/api-usage`;
   static fetchOrgsByEmailURL = (email: string) => `organizations/byuser/${email}`;
+  static fetchGroupPotentialMembersURL = (groupId: string) => `/groups/${groupId}/potential-members`;
 
   static createGroup(request: { name: string }): AxiosPromise<GenericApiResponse<OrgGroup>> {
     return Api.post(OrgApi.createGroupURL, request);
@@ -110,6 +111,10 @@ export class OrgApi extends Api {
     return Api.get(OrgApi.fetchGroupUsersURL(groupId));
   }
 
+  static fetchGroupPotentialMembers(searchName: string, groupId: string): AxiosPromise<OrgUsersResponse> {
+    return Api.get(OrgApi.fetchGroupPotentialMembersURL(groupId), {searchName})
+  }
+
   static fetchGroupUsersPagination(request: fetchGroupUserRequestType): AxiosPromise<GroupUsersPaginationResponse> {
     const {groupId, ...res} = request;
     return Api.get(OrgApi.fetchGroupUsersURL(groupId), {...res});
diff --git a/client/packages/lowcoder/src/api/userApi.ts b/client/packages/lowcoder/src/api/userApi.ts
index c80d4b19dd..5955071a84 100644
--- a/client/packages/lowcoder/src/api/userApi.ts
+++ b/client/packages/lowcoder/src/api/userApi.ts
@@ -1,6 +1,6 @@
 import Api from "api/api";
 import { AxiosPromise } from "axios";
-import { OrgAndRole } from "constants/orgConstants";
+import { Org, OrgAndRole } from "constants/orgConstants";
 import { BaseUserInfo, CurrentUser } from "constants/userConstants";
 import { MarkUserStatusPayload, UpdateUserPayload } from "redux/reduxActions/userActions";
 import { ApiResponse, GenericApiResponse } from "./apiResponses";
@@ -60,10 +60,25 @@ export interface FetchApiKeysResponse extends ApiResponse {
 
 export type GetCurrentUserResponse = GenericApiResponse<CurrentUser>;
 
+export interface GetMyOrgsResponse extends ApiResponse {
+  data: {
+    data: Array<{
+      orgId: string;
+      orgName: string;
+      createdAt?: number;
+      updatedAt?: number;
+    }>;
+    pageNum: number;
+    pageSize: number;
+    total: number;
+  };
+}
+
 class UserApi extends Api {
   static thirdPartyLoginURL = "/auth/tp/login";
   static thirdPartyBindURL = "/auth/tp/bind";
   static usersURL = "/users";
+  static myOrgsURL = "/users/myorg";
   static sendVerifyCodeURL = "/auth/otp/send";
   static logoutURL = "/auth/logout";
   static userURL = "/users/me";
@@ -127,6 +142,19 @@ class UserApi extends Api {
   static getCurrentUser(): AxiosPromise<GetCurrentUserResponse> {
     return Api.get(UserApi.currentUserURL);
   }
+  static getMyOrgs(
+    pageNum: number = 1, 
+    pageSize: number = 20, 
+    orgName?: string
+  ): AxiosPromise<GetMyOrgsResponse> {
+    const params = new URLSearchParams({
+      pageNum: pageNum.toString(),
+      pageSize: pageSize.toString(),
+      ...(orgName && { orgName })
+    });
+    
+    return Api.get(`${UserApi.myOrgsURL}?${params}`);
+  }
 
   static getRawCurrentUser(): AxiosPromise<GetCurrentUserResponse> {
     return Api.get(UserApi.rawCurrentUserURL);
diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
index 1fb49720d4..a4857882ee 100644
--- a/client/packages/lowcoder/src/app.tsx
+++ b/client/packages/lowcoder/src/app.tsx
@@ -60,7 +60,6 @@ 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 { fetchBrandingSetting } from "./redux/reduxActions/enterpriseActions";
 import { EnterpriseProvider } from "./util/context/EnterpriseContext";
 import { SimpleSubscriptionContextProvider } from "./util/context/SimpleSubscriptionContext";
 import { getBrandingSetting } from "./redux/selectors/enterpriseSelectors";
@@ -137,7 +136,6 @@ type AppIndexProps = {
   defaultHomePage: string | null | undefined;
   fetchHomeDataFinished: boolean;
   fetchConfig: (orgId?: string) => void;
-  fetchBrandingSetting: (orgId?: string) => void;
   fetchHomeData: (currentUserAnonymous?: boolean | undefined) => void;
   fetchLowcoderCompVersions: () => void;
   getCurrentUser: () => void;
@@ -167,7 +165,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
       if (!this.props.currentUserAnonymous) {
         this.props.fetchHomeData(this.props.currentUserAnonymous);
         this.props.fetchLowcoderCompVersions();
-        this.props.fetchBrandingSetting(this.props.currentOrgId);
       }
     }
   }
@@ -521,7 +518,6 @@ const mapDispatchToProps = (dispatch: any) => ({
   fetchHomeData: (currentUserAnonymous: boolean | undefined) => {
     dispatch(fetchHomeData({}));
   },
-  fetchBrandingSetting: (orgId?: string) => dispatch(fetchBrandingSetting({ orgId, fallbackToGlobal: true })),
   fetchLowcoderCompVersions: async () => {
     try {
       dispatch(setLowcoderCompsLoading(true));
diff --git a/client/packages/lowcoder/src/components/CurlImport.tsx b/client/packages/lowcoder/src/components/CurlImport.tsx
new file mode 100644
index 0000000000..a15d54bbf3
--- /dev/null
+++ b/client/packages/lowcoder/src/components/CurlImport.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import { Modal, Input, Button, message } from "antd";
+import { trans } from "i18n";
+import parseCurl from "@bany/curl-to-json";
+const { TextArea } = Input;
+interface CurlImportModalProps {
+  open: boolean;
+  onCancel: () => void;
+  onSuccess: (parsedData: any) => void;
+}
+
+export function CurlImportModal(props: CurlImportModalProps) {
+  const { open, onCancel, onSuccess } = props;
+  const [curlCommand, setCurlCommand] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleImport = async () => {
+    if (!curlCommand.trim()) {
+      message.error("Please enter a cURL command");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // Parse the cURL command using the correct import
+      const parsedData = parseCurl(curlCommand);
+
+      
+      
+      // Log the result for now as requested
+    //   console.log("Parsed cURL data:", parsedData);
+      
+      // Call success callback with parsed data
+      onSuccess(parsedData);
+      
+      // Reset form and close modal
+      setCurlCommand("");
+      onCancel();
+      
+      message.success("cURL command imported successfully!");
+    } catch (error: any) {
+      console.error("Error parsing cURL command:", error);
+      message.error(`Failed to parse cURL command: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setCurlCommand("");
+    onCancel();
+  };
+
+  return (
+    <Modal
+      title="Import from cURL"
+      open={open}
+      onCancel={handleCancel}
+      footer={[
+        <Button key="cancel" onClick={handleCancel}>
+          Cancel
+        </Button>,
+        <Button key="import" type="primary" loading={loading} onClick={handleImport}>
+          Import
+        </Button>,
+      ]}
+      width={600}
+    >
+      <div style={{ marginBottom: 16 }}>
+        <div style={{ marginBottom: 8, fontWeight: 500 }}>
+          Paste cURL Command Here
+        </div>
+        <div style={{ marginBottom: 12, color: "#666", fontSize: "12px" }}>
+          <div style={{ marginBottom: 4 }}>
+            <strong>Examples:</strong>
+          </div>
+          <div style={{ marginBottom: 2 }}>
+            GET: <code>curl -X GET https://jsonplaceholder.typicode.com/posts/1</code>
+          </div>
+          <div style={{ marginBottom: 2 }}>
+            POST: <code>curl -X POST https://jsonplaceholder.typicode.com/posts -H "Content-Type: application/json" -d '&#123;"title":"foo","body":"bar","userId":1&#125;'</code>
+          </div>
+          <div>
+            Users: <code>curl -X GET https://jsonplaceholder.typicode.com/users</code>
+          </div>
+        </div>
+        <TextArea
+          value={curlCommand}
+          onChange={(e) => setCurlCommand(e.target.value)}
+          placeholder="curl -X GET https://jsonplaceholder.typicode.com/posts/1"
+          rows={8}
+          style={{ fontFamily: "monospace" }}
+        />
+      </div>
+    </Modal>
+  );
+} 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx b/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx
index 82ea45beb9..6425d3afc6 100644
--- a/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx
+++ b/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx
@@ -3,16 +3,15 @@ import {
   CloseIcon,
   CommonTextLabel,
   CustomSelect,
+  Search,
   TacoButton,
 } from "lowcoder-design";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import styled from "styled-components";
+import { debounce } from "lodash";
 import ProfileImage from "pages/common/profileImage";
-import { useDispatch, useSelector } from "react-redux";
-import { fetchGroupsAction, fetchOrgUsersAction } from "redux/reduxActions/orgActions";
-import { getOrgGroups, getOrgUsers } from "redux/selectors/orgSelectors";
-import { OrgGroup, OrgUser } from "constants/orgConstants";
-import { ApplicationPermissionType, ApplicationRoleType } from "constants/applicationConstants";
+import { useSelector } from "react-redux";
+import { ApplicationPermissionType, ApplicationRoleType, GroupsMembersPermission } from "constants/applicationConstants";
 import {
   PermissionItemName,
   RoleSelectOption,
@@ -27,6 +26,8 @@ import { getUser } from "redux/selectors/usersSelectors";
 import { EmptyContent } from "pages/common/styledComponent";
 import { trans } from "i18n";
 import { PermissionItem } from "./PermissionList";
+import { currentApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
+import { fetchAvailableGroupsMembers } from "@lowcoder-ee/util/pagination/axios";
 
 const AddAppUserContent = styled.div`
   display: flex;
@@ -86,8 +87,7 @@ const PermissionSelectWrapper = styled.div`
   padding: 4px 8px;
   margin-top: 8px;
   background: #fdfdfd;
-  outline: 1px solid #d7d9e0;
-  border-radius: 4px;
+  outline: 1px dashed #d7d9e0;
 
   .ant-select {
     font-size: 13px;
@@ -95,11 +95,11 @@ const PermissionSelectWrapper = styled.div`
   }
 
   &:hover {
-    outline: 1px solid #8b8fa3;
+    outline: 1px dashed #8b8fa3;
   }
 
   &:focus-within {
-    outline: 1px solid #315efb;
+    outline: 1px dashed rgb(203, 212, 245);
     border-radius: 4px;
     box-shadow: 0 0 0 3px rgb(24 144 255 / 20%);
   }
@@ -199,48 +199,34 @@ type PermissionAddEntity = {
   key: string;
 };
 
-/**
- * compose users and groups's permissions, filter the data
- *
- * @param orgGroups groups
- * @param orgUsers users
- * @param currentUser currentUser
- * @param filterItems filterItems
- */
+function isGroup(data: GroupsMembersPermission) {
+  return data?.type === "Group"
+}
+
 function getPermissionOptionView(
-  orgGroups: OrgGroup[],
-  orgUsers: OrgUser[],
-  currentUser: User,
+  groupsMembers: GroupsMembersPermission[],
   filterItems: PermissionItem[]
 ): AddAppOptionView[] {
-  let permissionViews: AddAppOptionView[] = orgGroups.map((group) => {
+
+  let permissionsViews = groupsMembers?.map((user) => {
     return {
-      type: "GROUP",
-      id: group.groupId,
-      name: group.groupName,
-    };
-  });
-  permissionViews = permissionViews.concat(
-    orgUsers.map((user) => {
-      return {
-        type: "USER",
-        id: user.userId,
-        name: user.name,
-        avatarUrl: user.avatarUrl,
-      };
-    })
-  );
-  permissionViews = permissionViews.filter(
-    (v) =>
-      !filterItems.find((i) => i.id === v.id && i.type === v.type) &&
-      !(v.type === "USER" && v.id === currentUser.id)
+      type: user.type as ApplicationPermissionType,
+      id: isGroup(user) ? user.data.groupId : user.data.userId,
+      name: isGroup(user) ? user.data.groupName : user.data.name,
+      ...(isGroup(user) ? {} : { avatarUrl: user.data.avatarUrl })
+    }
+  })
+
+  permissionsViews = permissionsViews.filter((v) =>
+    !filterItems.find((i) => i.id === v.id && i.type === v.type)
   );
-  return permissionViews;
+
+  return permissionsViews.filter((v) => v.id && v.name) as AddAppOptionView[];
 }
 
 function PermissionSelectorOption(props: { optionView: AddAppOptionView }) {
   const { optionView } = props;
-  const groupIcon = optionView.type === "GROUP" && (
+  const groupIcon = optionView.type === "Group" && (
     <StyledGroupIcon $color={getInitialsAndColorCode(optionView.name)[1]} />
   );
   return (
@@ -258,7 +244,7 @@ function PermissionSelectorOption(props: { optionView: AddAppOptionView }) {
 
 function PermissionSelectorLabel(props: { view: AddAppOptionView }) {
   const { view } = props;
-  const groupIcon = view.type === "GROUP" && (
+  const groupIcon = view.type === "Group" && (
     <StyledGroupIcon $color={getInitialsAndColorCode(view.name)[1]} $side={9} />
   );
   return (
@@ -309,12 +295,52 @@ const PermissionSelector = (props: {
   filterItems: PermissionItem[];
   supportRoles: { label: string; value: PermissionRole }[];
 }) => {
-  const orgGroups = useSelector(getOrgGroups);
-  const orgUsers = useSelector(getOrgUsers);
   const { selectedItems, setSelectRole, setSelectedItems, user } = props;
-  const optionViews = getPermissionOptionView(orgGroups, orgUsers, user, props.filterItems);
   const [roleSelectVisible, setRoleSelectVisible] = useState(false);
   const selectRef = useRef<HTMLDivElement>(null);
+  const [optionViews, setOptionViews] = useState<AddAppOptionView[]>()
+  const [searchValue, setSearchValue] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const application = useSelector(currentApplication)
+
+  const debouncedUserSearch = useCallback(
+    debounce((searchTerm: string) => {
+      if (!application) return;
+      
+      setIsLoading(true);
+      fetchAvailableGroupsMembers(application.applicationId, searchTerm).then(res => {
+        if(res.success) {
+          setOptionViews(getPermissionOptionView(res.data, props.filterItems))
+        }
+        setIsLoading(false);
+      }).catch(() => {
+        setIsLoading(false);
+      });
+    }, 500),
+    [application, props.filterItems]
+  );
+
+  useEffect(() => {
+    debouncedUserSearch(searchValue);
+
+    return () => {
+      debouncedUserSearch.cancel();
+    };
+  }, [searchValue, debouncedUserSearch]);
+
+  useEffect(() => {
+    if (!application) return;
+    
+    setIsLoading(true);
+    fetchAvailableGroupsMembers(application.applicationId, "").then(res => {
+      if(res.success) {
+        setOptionViews(getPermissionOptionView(res.data, props.filterItems))
+      }
+      setIsLoading(false);
+    }).catch(() => {
+      setIsLoading(false);
+    });
+  }, [application, props.filterItems]);
 
   useEffect(() => {
     setRoleSelectVisible(selectedItems.length > 0);
@@ -325,12 +351,18 @@ const PermissionSelector = (props: {
 
   return (
     <>
+      <Search
+        placeholder={trans("home.addPermissionPlaceholder")}
+        value={searchValue}
+        onChange={(e) => setSearchValue(e.target.value)}
+      />
       <PermissionSelectWrapper>
         <AddPermissionsSelect
           open
           ref={selectRef}
-          placeholder={trans("home.addPermissionPlaceholder")}
+          placeholder={trans("home.selectedUsersAndGroups")}
           mode="multiple"
+          showSearch={false}
           getPopupContainer={() => document.getElementById("add-app-user-permission-dropdown")!}
           optionLabelProp="label"
           tagRender={PermissionTagRender}
@@ -350,7 +382,7 @@ const PermissionSelector = (props: {
             setSelectedItems(selectedItems.filter((item) => item.key !== option.key));
           }}
         >
-          {optionViews.map((view) => {
+          {optionViews?.map((view) => {
             return (
               <CustomSelect.Option
                 key={`${view.type}-${view.id}`}
@@ -395,16 +427,10 @@ export const Permission = (props: {
   addPermission: (userIds: string[], groupIds: string[], role: string) => void;
 }) => {
   const { onCancel } = props;
-  const dispatch = useDispatch();
   const user = useSelector(getUser);
   const [selectRole, setSelectRole] = useState<ApplicationRoleType>("viewer");
   const [selectedItems, setSelectedItems] = useState<PermissionAddEntity[]>([]);
 
-  useEffect(() => {
-    dispatch(fetchOrgUsersAction(user.currentOrgId));
-    dispatch(fetchGroupsAction(user.currentOrgId));
-  }, []);
-
   return (
     <AddAppUserContent>
       <CommonTextLabel style={{ marginTop: "16px" }}>
@@ -426,10 +452,10 @@ export const Permission = (props: {
           buttonType="primary"
           onClick={() => {
             const uids = selectedItems
-              .filter((item) => item.type === "USER")
+              .filter((item) => item.type === "User")
               .map((item) => item.id);
             const gids = selectedItems
-              .filter((item) => item.type === "GROUP")
+              .filter((item) => item.type === "Group")
               .map((item) => item.id);
             if (uids.length === 0 && gids.length === 0) {
               onCancel();
diff --git a/client/packages/lowcoder/src/components/ResCreatePanel.tsx b/client/packages/lowcoder/src/components/ResCreatePanel.tsx
index 9d60608aa8..04ed9fb79b 100644
--- a/client/packages/lowcoder/src/components/ResCreatePanel.tsx
+++ b/client/packages/lowcoder/src/components/ResCreatePanel.tsx
@@ -26,6 +26,7 @@ import { getUser } from "../redux/selectors/usersSelectors";
 import DataSourceIcon from "./DataSourceIcon";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
+import { CurlImportModal } from "./CurlImport";
 
 const Wrapper = styled.div<{ $placement: PageType }>`
   width: 100%;
@@ -230,6 +231,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
   const { onSelect, onClose, recentlyUsed, datasource, placement = "editor" } = props;
   const [isScrolling, setScrolling] = useState(false);
   const [visible, setVisible] = useState(false);
+  const [curlModalVisible, setCurlModalVisible] = useState(false);
 
   const isPublicApp = useSelector(isPublicApplication);
   const user = useSelector(getUser);
@@ -244,6 +246,14 @@ export function ResCreatePanel(props: ResCreateModalProps) {
     setScrolling(top > 0);
   }, 100);
 
+  const handleCurlImportSuccess = (parsedData: any) => {
+    onSelect(BottomResTypeEnum.Query, {
+      compType: "restApi", 
+      dataSourceId: QUICK_REST_API_ID,
+      curlData: parsedData
+    });
+  };
+
   return (
     <Wrapper $placement={placement}>
       <Title $shadow={isScrolling} $placement={placement}>
@@ -331,6 +341,10 @@ export function ResCreatePanel(props: ResCreateModalProps) {
                 <ResButton size={buttonSize} identifier={"streamApi"} onSelect={onSelect} />
                 <ResButton size={buttonSize} identifier={"alasql"} onSelect={onSelect} />
                 <ResButton size={buttonSize} identifier={"graphql"} onSelect={onSelect} />
+                <DataSourceButton size={buttonSize} onClick={() => setCurlModalVisible(true)}>
+                  <DataSourceIcon size="large" dataSourceType="restApi" />
+                  Import from cURL
+                </DataSourceButton>
               </DataSourceListWrapper>
             </div>
 
@@ -374,6 +388,11 @@ export function ResCreatePanel(props: ResCreateModalProps) {
         onCancel={() => setVisible(false)}
         onCreated={() => setVisible(false)}
       />
+      <CurlImportModal
+        open={curlModalVisible}
+        onCancel={() => setCurlModalVisible(false)}
+        onSuccess={handleCurlImportSuccess}
+      />
     </Wrapper>
   );
 }
diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
index 4f240f35f7..64122dabab 100644
--- a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
@@ -17,15 +17,15 @@ import { DEFAULT_THEMEID } from "comps/utils/themeUtil";
 import { NumberControl, RangeControl, StringControl } from "comps/controls/codeControl";
 import { IconControl } from "comps/controls/iconControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
-import { ApplicationCategoriesEnum } from "constants/applicationConstants";
+import { ApplicationCategoriesEnum, AppUILayoutType } from "constants/applicationConstants";
 import { BoolControl } from "../controls/boolControl";
-import { getNpmPackageMeta } from "../utils/remote";
 import { getPromiseAfterDispatch } from "@lowcoder-ee/util/promiseUtils";
 import type { AppState } from "@lowcoder-ee/redux/reducers";
 import { ColorControl } from "../controls/colorControl";
 import { DEFAULT_ROW_COUNT } from "@lowcoder-ee/layout/calculateUtils";
 import { AppSettingContext } from "../utils/appSettingContext";
-import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
+import { currentApplication, isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
+import { isAggregationApp } from "util/appUtils";
 
 const TITLE = trans("appSetting.title");
 const USER_DEFINE = "__USER_DEFINE";
@@ -234,6 +234,7 @@ type ChildrenInstance = RecordConstructorToComp<typeof childrenMap> & {
 };
 
 function AppGeneralSettingsModal(props: ChildrenInstance) {
+  const application = useSelector(currentApplication);
   const lowcoderCompsMeta = useSelector((state: AppState) => state.npmPlugin.packageMeta['lowcoder-comps']);
   const [lowcoderCompVersions, setLowcoderCompVersions] = useState(['latest']);
   const {
@@ -288,7 +289,8 @@ function AppGeneralSettingsModal(props: ChildrenInstance) {
           </div>
         </DivStyled>
       </BaseSection>
-      <BaseSection
+      {application && !isAggregationApp(AppUILayoutType[application.applicationType]) && 
+        <BaseSection
         name={"Lowcoder Comps"}
         width={288}
         noMargin
@@ -320,6 +322,7 @@ function AppGeneralSettingsModal(props: ChildrenInstance) {
           />
         </DivStyled>
       </BaseSection>
+      }
       <BaseSection
         name={"Shortcuts"}
         width={288}
@@ -520,7 +523,6 @@ export const AppSettingsComp = new MultiCompBuilder(childrenMap, (props) => {
     const { settingType } = useContext(AppSettingContext);
     const themeList = useSelector(getThemeList) || [];
     const defaultTheme = (useSelector(getDefaultTheme) || "").toString();
-
     return settingType === 'canvas'
       ? <AppCanvasSettingsModal {...children} themeList={themeList} defaultTheme={defaultTheme} />
       : <AppGeneralSettingsModal {...children} themeList={themeList} defaultTheme={defaultTheme} />;
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
index 70a8de5d83..a6d6f88890 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -21,6 +21,7 @@ import {
   ButtonCompWrapper,
   buttonRefMethods,
   ButtonStyleControl,
+  DisabledButtonStyleControl,
 } from "./buttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 import { Tooltip } from "antd";
@@ -133,6 +134,7 @@ const childrenMap = {
   prefixIcon: IconControl,
   suffixIcon: IconControl,
   style: ButtonStyleControl,
+  disabledStyle: DisabledButtonStyleControl,
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   viewRef: RefControl<HTMLElement>,
   tooltip: StringControl
@@ -173,6 +175,7 @@ const ButtonPropertyView = React.memo((props: {
             {props.children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
           </Section>
           <Section name={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
+          <Section name={trans("prop.disabledStyle")}>{props.children.disabledStyle.getPropertyView()}</Section>
         </>
       )}
     </>
@@ -212,6 +215,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
             <Button100
               ref={props.viewRef}
               $buttonStyle={props.style}
+              $disabledStyle={props.disabledStyle}
               loading={props.loading}
               disabled={
                 props.disabled ||
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
index 7a54ba4280..b878eabbdb 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -1,13 +1,13 @@
 import { default as Button } from "antd/es/button";
 import { styleControl } from "comps/controls/styleControl";
-import { ButtonStyleType, ButtonStyle } from "comps/controls/styleControlConstants";
+import { ButtonStyleType, ButtonStyle, DisabledButtonStyle, DisabledButtonStyleType } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import styled, { css } from "styled-components";
 import { genActiveColor, genHoverColor } from "lowcoder-design";
 import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
 
-export function getButtonStyle(buttonStyle: ButtonStyleType) {
+export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle: DisabledButtonStyleType = {} as any) {
   const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
   const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
   return css`
@@ -48,12 +48,23 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
             : buttonStyle.border} !important;
         }
       }
+
+      /* Disabled state styling */
+      &:disabled,
+      &.ant-btn-disabled {
+        color: ${disabledStyle.disabledText};
+        background: ${disabledStyle.disabledBackground};
+        cursor: not-allowed;
+      }
     }
   `;
 }
 
-export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
-  ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
+export const Button100 = styled(Button)<{ 
+  $buttonStyle?: ButtonStyleType; 
+  $disabledStyle?: DisabledButtonStyleType;
+}>`
+  ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)}
   width: 100%;
   height: auto;
   display: inline-flex;
@@ -73,13 +84,15 @@ export const ButtonCompWrapper = styled.div<{ $disabled: boolean }>`
 
   // The button component is disabled but can respond to drag & select events
   ${(props) =>
-    props.$disabled &&
-    `
-    cursor: not-allowed;
-    button:disabled {
-      pointer-events: none;
-    }
-  `};
+    props.$disabled
+      ? `
+        cursor: not-allowed;
+        button:disabled {
+          pointer-events: none;
+        }
+      `
+      : ""
+  }
 `;
 
 /**
@@ -103,6 +116,10 @@ function fixOldData(oldData: any) {
 const ButtonTmpStyleControl = styleControl(ButtonStyle, 'style');
 export const ButtonStyleControl = migrateOldData(ButtonTmpStyleControl, fixOldData);
 
+// Create disabled style control
+const DisabledButtonTmpStyleControl = styleControl(DisabledButtonStyle, 'disabledStyle');
+export const DisabledButtonStyleControl = migrateOldData(DisabledButtonTmpStyleControl, fixOldData);
+
 export const buttonRefMethods = refMethods<HTMLElement>([
   focusWithOptions,
   blurMethod,
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
index 811ed91be3..a4ecd85a6c 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -4,11 +4,10 @@ import {
   Button100,
   ButtonCompWrapper,
   buttonRefMethods,
+  ButtonStyleControl,
 } from "comps/comps/buttonComp/buttonCompConstants";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ScannerEventHandlerControl } from "comps/controls/eventHandlerControl";
-import { styleControl } from "comps/controls/styleControl";
-import { DropdownStyle } from "comps/controls/styleControlConstants";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { CustomModal, Section, sectionNames } from "lowcoder-design";
@@ -127,7 +126,7 @@ const ScannerTmpComp = (function () {
     maskClosable: withDefault(BoolControl, true),
     onEvent: ScannerEventHandlerControl,
     disabled: BoolCodeControl,
-    style: styleControl(DropdownStyle, "style"),
+    style: ButtonStyleControl,
     viewRef: RefControl<HTMLElement>,
   };
   return new UICompBuilder(childrenMap, (props) => {
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index 0184fb87ac..654ec6659d 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -12,7 +12,7 @@ import { trans } from "i18n";
 import styled from "styled-components";
 import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
-import { Button100, ButtonCompWrapper, buttonRefMethods } from "./buttonCompConstants";
+import { Button100, ButtonCompWrapper, buttonRefMethods, DisabledButtonStyleControl } from "./buttonCompConstants";
 import { IconControl } from "comps/controls/iconControl";
 import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
@@ -63,6 +63,7 @@ const ToggleTmpComp = (function () {
     iconPosition: LeftRightControl,
     alignment: AlignWithStretchControl,
     style: styleControl(ToggleButtonStyle , 'style'),
+    disabledStyle: DisabledButtonStyleControl,
     animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     showBorder: withDefault(BoolControl, true),
     viewRef: RefControl<HTMLElement>,
@@ -84,6 +85,7 @@ const ToggleTmpComp = (function () {
           <Button100
             ref={props.viewRef}
             $buttonStyle={props.style}
+            $disabledStyle={props.disabledStyle}
             loading={props.loading}
             disabled={props.disabled}
             onClick={() => {
@@ -153,6 +155,7 @@ const ToggleTmpComp = (function () {
           </>
           )}
         
+        <Section name={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
       </>
     ))
     .setExposeMethodConfigs(buttonRefMethods)
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx
new file mode 100644
index 0000000000..d26dce7b29
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx
@@ -0,0 +1,46 @@
+// client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx
+import { UICompBuilder } from "comps/generators";
+import { NameConfig, withExposingConfigs } from "comps/generators/withExposing";
+import { chatChildrenMap } from "./chatCompTypes";
+import { ChatView } from "./chatView";
+import { ChatPropertyView } from "./chatPropertyView";
+import { useEffect, useState } from "react";
+import { changeChildAction } from "lowcoder-core";
+
+// Build the component
+let ChatTmpComp = new UICompBuilder(
+  chatChildrenMap, 
+  (props, dispatch) => {
+    useEffect(() => {
+      if (Boolean(props.tableName)) return;
+
+      // Generate a unique database name for this ChatApp instance
+      const generateUniqueTableName = () => {
+        const timestamp = Date.now();
+        const randomId = Math.random().toString(36).substring(2, 15);
+        return `TABLE_${timestamp}`;
+      };
+      
+      const tableName = generateUniqueTableName();
+      dispatch(changeChildAction('tableName', tableName, true));
+    }, [props.tableName]);
+    
+    if (!props.tableName) {
+      return null; // Don't render until we have a unique DB name
+    }
+    return <ChatView {...props} chatQuery={props.chatQuery.value} />;
+  }
+)
+  .setPropertyViewFn((children) => <ChatPropertyView children={children} />)
+  .build();
+
+ChatTmpComp = class extends ChatTmpComp {
+  override autoHeight(): boolean {
+    return this.children.autoHeight.getView();
+  }
+};
+
+// Export the component
+export const ChatComp = withExposingConfigs(ChatTmpComp, [
+  new NameConfig("text", "Chat component text"),
+]);
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts b/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts
new file mode 100644
index 0000000000..87dca43a37
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts
@@ -0,0 +1,39 @@
+// client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts
+import { StringControl, NumberControl } from "comps/controls/codeControl";
+import { withDefault } from "comps/generators";
+import { BoolControl } from "comps/controls/boolControl";
+import { dropdownControl } from "comps/controls/dropdownControl";
+import QuerySelectControl from "comps/controls/querySelectControl";
+import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl";
+
+// Model type dropdown options
+const ModelTypeOptions = [
+  { label: "Direct LLM", value: "direct-llm" },
+  { label: "n8n Workflow", value: "n8n" },
+] as const;
+
+export const chatChildrenMap = {
+  text: withDefault(StringControl, "Chat Component Placeholder"),
+  modelType: dropdownControl(ModelTypeOptions, "direct-llm"),
+  modelHost: withDefault(StringControl, ""),
+  streaming: BoolControl.DEFAULT_TRUE,
+  systemPrompt: withDefault(StringControl, "You are a helpful assistant."),
+  agent: BoolControl,
+  maxInteractions: withDefault(NumberControl, 10),
+  chatQuery: QuerySelectControl,
+  autoHeight: AutoHeightControl,
+  tableName: withDefault(StringControl, ""),
+};
+
+export type ChatCompProps = {
+  text?: string;
+  chatQuery?: string;
+  modelType?: string;
+  streaming?: boolean;
+  systemPrompt?: string;
+  agent?: boolean;
+  maxInteractions?: number;
+  modelHost?: string;
+  autoHeight?: boolean;
+  tableName?: string;
+};
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx
new file mode 100644
index 0000000000..2a9143c4ae
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx
@@ -0,0 +1,35 @@
+// client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx
+import React from "react";
+import { Section, sectionNames } from "lowcoder-design";
+import { trans } from "i18n";
+
+export const ChatPropertyView = React.memo((props: any) => {
+  const { children } = props;
+
+  return (
+    <>
+      <Section name={sectionNames.basic}>
+        {children.modelType.propertyView({ label: "Model Type" })}
+        {children.modelHost.propertyView({ label: "Model Host" })}
+        {/* {children.text.propertyView({ label: "Text" })}
+        {children.chatQuery.propertyView({ label: "Chat Query" })} */}
+        {children.streaming.propertyView({ label: "Enable Streaming" })}
+        {children.systemPrompt.propertyView({ 
+          label: "System Prompt",
+          placeholder: "Enter system prompt...",
+          enableSpellCheck: false,
+        })}
+        {children.agent.propertyView({ label: "Enable Agent Mode" })}
+        {children.maxInteractions.propertyView({ 
+          label: "Max Interactions",
+          placeholder: "10",
+        })}
+      </Section>
+      <Section name={sectionNames.layout}>
+        {children.autoHeight.propertyView({ label: trans("prop.height") })}
+      </Section>
+    </>
+  );
+});
+
+ChatPropertyView.displayName = 'ChatPropertyView';
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx
new file mode 100644
index 0000000000..eca764ba6a
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx
@@ -0,0 +1,13 @@
+// client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx
+import React from "react";
+import { ChatCompProps } from "./chatCompTypes";
+import { ChatApp } from "./components/ChatApp";
+
+import "@assistant-ui/styles/index.css";
+import "@assistant-ui/styles/markdown.css";
+
+export const ChatView = React.memo((props: ChatCompProps) => {
+  return <ChatApp {...props} />;
+});
+
+ChatView.displayName = 'ChatView';
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx
new file mode 100644
index 0000000000..e8092a494b
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx
@@ -0,0 +1,16 @@
+import { ChatProvider } from "./context/ChatContext";
+import { ChatMain } from "./ChatMain";
+import { ChatCompProps } from "../chatCompTypes";
+import { useEffect, useState } from "react";
+
+export function ChatApp(props: ChatCompProps) {
+  if (!Boolean(props.tableName)) {
+    return null; // Don't render until we have a unique DB name
+  }
+  
+  return (
+    <ChatProvider>
+      <ChatMain {...props} />
+    </ChatProvider>
+  );
+}
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx
new file mode 100644
index 0000000000..14ba061ca7
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx
@@ -0,0 +1,255 @@
+import React, { useState } from "react";
+import {
+  useExternalStoreRuntime,
+  ThreadMessageLike,
+  AppendMessage,
+  AssistantRuntimeProvider,
+  ExternalStoreThreadListAdapter,
+} from "@assistant-ui/react";
+import { Thread } from "./assistant-ui/thread";
+import { ThreadList } from "./assistant-ui/thread-list";
+import { 
+  useChatContext, 
+  MyMessage, 
+  ThreadData, 
+  RegularThreadData, 
+  ArchivedThreadData 
+} from "./context/ChatContext";
+import styled from "styled-components";
+import { ChatCompProps } from "../chatCompTypes";
+
+const ChatContainer = styled.div<{ $autoHeight?: boolean }>`
+  display: flex;
+  height: ${props => props.$autoHeight ? '500px' : '100%'};
+
+  p {
+    margin: 0;
+  }
+
+  .aui-thread-list-root {
+    width: 250px;
+    background-color: #fff;
+    padding: 10px;
+  }
+
+  .aui-thread-root {
+    flex: 1;
+    background-color: #f9fafb;
+  }
+
+  .aui-thread-list-item {
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &[data-active="true"] {
+      background-color: #dbeafe;
+      border: 1px solid #bfdbfe;
+    }
+  }
+`;
+
+const generateId = () => Math.random().toString(36).substr(2, 9);
+
+const callYourAPI = async (params: {
+  text: string,
+  modelHost: string,
+  modelType: string,
+}) => {
+  const { text, modelHost, modelType } = params;
+
+  let url = modelHost;
+  if (modelType === "direct-llm") {
+    url = `${modelHost}/api/chat/completions`;
+  }
+
+  // Simulate API delay
+  await new Promise(resolve => setTimeout(resolve, 1500));
+  
+  // Simple responses
+  return {
+    content: "This is a mock response from your backend. You typed: " + text
+  };
+};
+
+export function ChatMain(props: ChatCompProps) {
+  const { state, actions } = useChatContext();
+  const [isRunning, setIsRunning] = useState(false);
+
+  console.log("STATE", state);
+
+  // Get messages for current thread
+  const currentMessages = actions.getCurrentMessages();
+
+  // Convert custom format to ThreadMessageLike
+  const convertMessage = (message: MyMessage): ThreadMessageLike => ({
+    role: message.role,
+    content: [{ type: "text", text: message.text }],
+    id: message.id,
+    createdAt: new Date(message.timestamp),
+  });
+
+  const onNew = async (message: AppendMessage) => {
+    // Extract text from AppendMessage content array
+    if (message.content.length !== 1 || message.content[0]?.type !== "text") {
+      throw new Error("Only text content is supported");
+    }
+
+    // Add user message in custom format
+    const userMessage: MyMessage = {
+      id: generateId(),
+      role: "user",
+      text: message.content[0].text,
+      timestamp: Date.now(),
+    };
+    
+    // Update current thread with new user message
+    await actions.addMessage(state.currentThreadId, userMessage);
+    setIsRunning(true);
+
+    try {
+      // Call mock API
+      const response = await callYourAPI({
+        text: userMessage.text,
+        modelHost: props.modelHost!,
+        modelType: props.modelType!,
+      });
+      
+      const assistantMessage: MyMessage = {
+        id: generateId(),
+        role: "assistant",
+        text: response.content,
+        timestamp: Date.now(),
+      };
+      
+      // Update current thread with assistant response
+      await actions.addMessage(state.currentThreadId, assistantMessage);
+    } catch (error) {
+      // Handle errors gracefully
+      const errorMessage: MyMessage = {
+        id: generateId(),
+        role: "assistant", 
+        text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        timestamp: Date.now(),
+      };
+      
+      await actions.addMessage(state.currentThreadId, errorMessage);
+    } finally {
+      setIsRunning(false);
+    }
+  };
+
+  // Add onEdit functionality
+  const onEdit = async (message: AppendMessage) => {
+    // Extract text from AppendMessage content array
+    if (message.content.length !== 1 || message.content[0]?.type !== "text") {
+      throw new Error("Only text content is supported");
+    }
+
+    // Find the index where to insert the edited message
+    const index = currentMessages.findIndex((m) => m.id === message.parentId) + 1;
+
+    // Keep messages up to the parent
+    const newMessages = [...currentMessages.slice(0, index)];
+
+    // Add the edited message in custom format
+    const editedMessage: MyMessage = {
+      id: generateId(),
+      role: "user",
+      text: message.content[0].text,
+      timestamp: Date.now(),
+    };
+    newMessages.push(editedMessage);
+
+    // Update messages using the new context action
+    await actions.updateMessages(state.currentThreadId, newMessages);
+    setIsRunning(true);
+
+    try {
+      // Generate new response
+      const response = await callYourAPI({
+        text: editedMessage.text,
+        modelHost: props.modelHost!,
+        modelType: props.modelType!,
+      });
+      
+      const assistantMessage: MyMessage = {
+        id: generateId(),
+        role: "assistant",
+        text: response.content,
+        timestamp: Date.now(),
+      };
+      
+      newMessages.push(assistantMessage);
+      await actions.updateMessages(state.currentThreadId, newMessages);
+    } catch (error) {
+      // Handle errors gracefully
+      const errorMessage: MyMessage = {
+        id: generateId(),
+        role: "assistant", 
+        text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        timestamp: Date.now(),
+      };
+      
+      newMessages.push(errorMessage);
+      await actions.updateMessages(state.currentThreadId, newMessages);
+    } finally {
+      setIsRunning(false);
+    }
+  };
+
+  // Thread list adapter for managing multiple threads
+  const threadListAdapter: ExternalStoreThreadListAdapter = {
+    threadId: state.currentThreadId,
+    threads: state.threadList.filter((t): t is RegularThreadData => t.status === "regular"),
+    archivedThreads: state.threadList.filter((t): t is ArchivedThreadData => t.status === "archived"),
+
+    onSwitchToNewThread: async () => {
+      const threadId = await actions.createThread("New Chat");
+      actions.setCurrentThread(threadId);
+    },
+
+    onSwitchToThread: (threadId) => {
+      actions.setCurrentThread(threadId);
+    },
+
+    onRename: async (threadId, newTitle) => {
+      await actions.updateThread(threadId, { title: newTitle });
+    },
+
+    onArchive: async (threadId) => {
+      await actions.updateThread(threadId, { status: "archived" });
+    },
+
+    onDelete: async (threadId) => {
+      await actions.deleteThread(threadId);
+    },
+  };
+
+  const runtime = useExternalStoreRuntime({
+    messages: currentMessages,
+    setMessages: (messages) => {
+      actions.updateMessages(state.currentThreadId, messages);
+    },
+    convertMessage,
+    isRunning,
+    onNew,
+    onEdit,
+    adapters: {
+      threadList: threadListAdapter,
+    },
+  });
+
+  if (!state.isInitialized) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ChatContainer $autoHeight={props.autoHeight}>
+        <ThreadList />
+        <Thread />
+      </ChatContainer>
+    </AssistantRuntimeProvider>
+  );
+}
+
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/markdown-text.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/markdown-text.tsx
new file mode 100644
index 0000000000..bbf2e5648a
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/markdown-text.tsx
@@ -0,0 +1,130 @@
+import "@assistant-ui/react-markdown/styles/dot.css";
+
+import {
+  CodeHeaderProps,
+  MarkdownTextPrimitive,
+  unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
+  useIsMarkdownCodeBlock,
+} from "@assistant-ui/react-markdown";
+import remarkGfm from "remark-gfm";
+import { FC, memo, useState } from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+
+import { TooltipIconButton } from "./tooltip-icon-button";
+import { cn } from "../../utils/cn";
+
+const MarkdownTextImpl = () => {
+  return (
+    <MarkdownTextPrimitive
+      remarkPlugins={[remarkGfm]}
+      className="aui-md"
+      components={defaultComponents}
+    />
+  );
+};
+
+export const MarkdownText = memo(MarkdownTextImpl);
+
+const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  const onCopy = () => {
+    if (!code || isCopied) return;
+    copyToClipboard(code);
+  };
+
+  return (
+    <div className="aui-code-header-root">
+      <span className="aui-code-header-language">{language}</span>
+      <TooltipIconButton tooltip="Copy" onClick={onCopy}>
+        {!isCopied && <CopyIcon />}
+        {isCopied && <CheckIcon />}
+      </TooltipIconButton>
+    </div>
+  );
+};
+
+const useCopyToClipboard = ({
+  copiedDuration = 3000,
+}: {
+  copiedDuration?: number;
+} = {}) => {
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  const copyToClipboard = (value: string) => {
+    if (!value) return;
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), copiedDuration);
+    });
+  };
+
+  return { isCopied, copyToClipboard };
+};
+
+const defaultComponents = memoizeMarkdownComponents({
+  h1: ({ className, ...props }) => (
+    <h1 className={cn("aui-md-h1", className)} {...props} />
+  ),
+  h2: ({ className, ...props }) => (
+    <h2 className={cn("aui-md-h2", className)} {...props} />
+  ),
+  h3: ({ className, ...props }) => (
+    <h3 className={cn("aui-md-h3", className)} {...props} />
+  ),
+  h4: ({ className, ...props }) => (
+    <h4 className={cn("aui-md-h4", className)} {...props} />
+  ),
+  h5: ({ className, ...props }) => (
+    <h5 className={cn("aui-md-h5", className)} {...props} />
+  ),
+  h6: ({ className, ...props }) => (
+    <h6 className={cn("aui-md-h6", className)} {...props} />
+  ),
+  p: ({ className, ...props }) => (
+    <p className={cn("aui-md-p", className)} {...props} />
+  ),
+  a: ({ className, ...props }) => (
+    <a className={cn("aui-md-a", className)} {...props} />
+  ),
+  blockquote: ({ className, ...props }) => (
+    <blockquote className={cn("aui-md-blockquote", className)} {...props} />
+  ),
+  ul: ({ className, ...props }) => (
+    <ul className={cn("aui-md-ul", className)} {...props} />
+  ),
+  ol: ({ className, ...props }) => (
+    <ol className={cn("aui-md-ol", className)} {...props} />
+  ),
+  hr: ({ className, ...props }) => (
+    <hr className={cn("aui-md-hr", className)} {...props} />
+  ),
+  table: ({ className, ...props }) => (
+    <table className={cn("aui-md-table", className)} {...props} />
+  ),
+  th: ({ className, ...props }) => (
+    <th className={cn("aui-md-th", className)} {...props} />
+  ),
+  td: ({ className, ...props }) => (
+    <td className={cn("aui-md-td", className)} {...props} />
+  ),
+  tr: ({ className, ...props }) => (
+    <tr className={cn("aui-md-tr", className)} {...props} />
+  ),
+  sup: ({ className, ...props }) => (
+    <sup className={cn("aui-md-sup", className)} {...props} />
+  ),
+  pre: ({ className, ...props }) => (
+    <pre className={cn("aui-md-pre", className)} {...props} />
+  ),
+  code: function Code({ className, ...props }) {
+    const isCodeBlock = useIsMarkdownCodeBlock();
+    return (
+      <code
+        className={cn(!isCodeBlock && "aui-md-inline-code", className)}
+        {...props}
+      />
+    );
+  },
+  CodeHeader,
+});
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread-list.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread-list.tsx
new file mode 100644
index 0000000000..54dcbc5089
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread-list.tsx
@@ -0,0 +1,114 @@
+import type { FC } from "react";
+import {
+  ThreadListItemPrimitive,
+  ThreadListPrimitive,
+} from "@assistant-ui/react";
+import { PencilIcon, PlusIcon, Trash2Icon } from "lucide-react";
+
+import { TooltipIconButton } from "./tooltip-icon-button";
+import { useThreadListItemRuntime } from "@assistant-ui/react";
+import { Button, Flex } from "antd";
+
+import styled from "styled-components";
+import { useChatContext } from "../context/ChatContext";
+
+const StyledPrimaryButton = styled(Button)`
+  // padding: 20px;
+  // margin-bottom: 20px;
+`;
+
+
+export const ThreadList: FC = () => {
+  return (
+    <ThreadListPrimitive.Root className="aui-root aui-thread-list-root">
+      <ThreadListNew />
+      <Flex vertical style={{flex: 1, overflow: 'auto', gap: 4}}>
+        <ThreadListItems />
+      </Flex>
+    </ThreadListPrimitive.Root>
+  );
+};
+
+const ThreadListNew: FC = () => {
+  return (
+    <ThreadListPrimitive.New asChild>
+      <StyledPrimaryButton size="middle" type="primary" icon={<PlusIcon size={16}/>}>
+        New Thread
+      </StyledPrimaryButton>
+    </ThreadListPrimitive.New>
+  );
+};
+
+const ThreadListItems: FC = () => {
+  return <ThreadListPrimitive.Items components={{ ThreadListItem }} />;
+};
+
+const ThreadListItem: FC = () => {
+  return (
+    <ThreadListItemPrimitive.Root className="aui-thread-list-item">
+      <ThreadListItemPrimitive.Trigger className="aui-thread-list-item-trigger">
+        <ThreadListItemTitle />
+      </ThreadListItemPrimitive.Trigger>
+      <ThreadListItemRename />
+      <ThreadListItemDelete />
+    </ThreadListItemPrimitive.Root>
+  );
+};
+
+const ThreadListItemTitle: FC = () => {
+  return (
+    <p className="aui-thread-list-item-title" style={{margin: 0}}>
+      <ThreadListItemPrimitive.Title fallback="New Chat" />
+    </p>
+  );
+};
+
+const ThreadListItemDelete: FC = () => {
+  return (
+    <ThreadListItemPrimitive.Delete asChild>
+      <TooltipIconButton
+        className="aui-thread-list-item-delete"
+        variant="ghost"
+        tooltip="Delete thread"
+      >
+        <Trash2Icon />
+      </TooltipIconButton>
+    </ThreadListItemPrimitive.Delete>
+  );
+};
+
+
+const ThreadListItemRename: FC = () => {
+  const runtime = useThreadListItemRuntime();
+  
+  const handleClick = async () => {
+    // runtime doesn't expose a direct `title` prop; read it from its state
+    let current = "";
+    try {
+      // getState is part of the public runtime surface
+      current = (runtime.getState?.() as any)?.title ?? "";
+    } catch {
+      // fallback – generate a title if the runtime provides a helper
+      if (typeof (runtime as any).generateTitle === "function") {
+        // generateTitle(threadId) in older builds, generateTitle() in newer ones
+        current = (runtime as any).generateTitle((runtime as any).threadId ?? undefined);
+      }
+    }
+
+    const next = prompt("Rename thread", current)?.trim();
+    if (next && next !== current) {
+      await runtime.rename(next);
+    }
+  };
+
+  return (
+    <TooltipIconButton
+      tooltip="Rename thread"
+      variant="ghost"
+      onClick={handleClick}
+      className="aui-thread-list-item-rename"
+    >
+      <PencilIcon />
+    </TooltipIconButton>
+  );
+};
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx
new file mode 100644
index 0000000000..ae3749fb77
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx
@@ -0,0 +1,283 @@
+import {
+    ActionBarPrimitive,
+    BranchPickerPrimitive,
+    ComposerPrimitive,
+    MessagePrimitive,
+    ThreadPrimitive,
+  } from "@assistant-ui/react";
+  import type { FC } from "react";
+  import {
+    ArrowDownIcon,
+    CheckIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    CopyIcon,
+    PencilIcon,
+    RefreshCwIcon,
+    SendHorizontalIcon,
+  } from "lucide-react";
+  import { cn } from "../../utils/cn";
+  
+  import { Button } from "../ui/button";
+  import { MarkdownText } from "./markdown-text";
+  import { TooltipIconButton } from "./tooltip-icon-button";
+  
+  export const Thread: FC = () => {
+    return (
+      <ThreadPrimitive.Root
+        className="aui-root aui-thread-root"
+        style={{
+          ["--thread-max-width" as string]: "42rem",
+        }}
+      >
+        <ThreadPrimitive.Viewport className="aui-thread-viewport">
+          <ThreadWelcome />
+  
+          <ThreadPrimitive.Messages
+            components={{
+              UserMessage: UserMessage,
+              EditComposer: EditComposer,
+              AssistantMessage: AssistantMessage,
+            }}
+          />
+  
+          <ThreadPrimitive.If empty={false}>
+            <div className="aui-thread-viewport-spacer" />
+          </ThreadPrimitive.If>
+  
+          <div className="aui-thread-viewport-footer">
+            <ThreadScrollToBottom />
+            <Composer />
+          </div>
+        </ThreadPrimitive.Viewport>
+      </ThreadPrimitive.Root>
+    );
+  };
+  
+  const ThreadScrollToBottom: FC = () => {
+    return (
+      <ThreadPrimitive.ScrollToBottom asChild>
+        <TooltipIconButton
+          tooltip="Scroll to bottom"
+          variant="outline"
+          className="aui-thread-scroll-to-bottom"
+        >
+          <ArrowDownIcon />
+        </TooltipIconButton>
+      </ThreadPrimitive.ScrollToBottom>
+    );
+  };
+  
+  const ThreadWelcome: FC = () => {
+    return (
+      <ThreadPrimitive.Empty>
+        <div className="aui-thread-welcome-root">
+          <div className="aui-thread-welcome-center">
+            <p className="aui-thread-welcome-message">
+              How can I help you today?
+            </p>
+          </div>
+          <ThreadWelcomeSuggestions />
+        </div>
+      </ThreadPrimitive.Empty>
+    );
+  };
+  
+  const ThreadWelcomeSuggestions: FC = () => {
+    return (
+      <div className="aui-thread-welcome-suggestions">
+        <ThreadPrimitive.Suggestion
+          className="aui-thread-welcome-suggestion"
+          prompt="What is the weather in Tokyo?"
+          method="replace"
+          autoSend
+        >
+          <span className="aui-thread-welcome-suggestion-text">
+            What is the weather in Tokyo?
+          </span>
+        </ThreadPrimitive.Suggestion>
+        <ThreadPrimitive.Suggestion
+          className="aui-thread-welcome-suggestion"
+          prompt="What is assistant-ui?"
+          method="replace"
+          autoSend
+        >
+          <span className="aui-thread-welcome-suggestion-text">
+            What is assistant-ui?
+          </span>
+        </ThreadPrimitive.Suggestion>
+      </div>
+    );
+  };
+  
+  const Composer: FC = () => {
+    return (
+      <ComposerPrimitive.Root className="aui-composer-root">
+        <ComposerPrimitive.Input
+          rows={1}
+          autoFocus
+          placeholder="Write a message..."
+          className="aui-composer-input"
+        />
+        <ComposerAction />
+      </ComposerPrimitive.Root>
+    );
+  };
+  
+  const ComposerAction: FC = () => {
+    return (
+      <>
+        <ThreadPrimitive.If running={false}>
+          <ComposerPrimitive.Send asChild>
+            <TooltipIconButton
+              tooltip="Send"
+              variant="default"
+              className="aui-composer-send"
+            >
+              <SendHorizontalIcon />
+            </TooltipIconButton>
+          </ComposerPrimitive.Send>
+        </ThreadPrimitive.If>
+        <ThreadPrimitive.If running>
+          <ComposerPrimitive.Cancel asChild>
+            <TooltipIconButton
+              tooltip="Cancel"
+              variant="default"
+              className="aui-composer-cancel"
+            >
+              <CircleStopIcon />
+            </TooltipIconButton>
+          </ComposerPrimitive.Cancel>
+        </ThreadPrimitive.If>
+      </>
+    );
+  };
+  
+  const UserMessage: FC = () => {
+    return (
+      <MessagePrimitive.Root className="aui-user-message-root">
+        <UserActionBar />
+  
+        <div className="aui-user-message-content">
+          <MessagePrimitive.Content />
+        </div>
+  
+        <BranchPicker className="aui-user-branch-picker" />
+      </MessagePrimitive.Root>
+    );
+  };
+  
+  const UserActionBar: FC = () => {
+    return (
+      <ActionBarPrimitive.Root
+        hideWhenRunning
+        autohide="not-last"
+        className="aui-user-action-bar-root"
+      >
+        <ActionBarPrimitive.Edit asChild>
+          <TooltipIconButton tooltip="Edit">
+            <PencilIcon />
+          </TooltipIconButton>
+        </ActionBarPrimitive.Edit>
+      </ActionBarPrimitive.Root>
+    );
+  };
+  
+  const EditComposer: FC = () => {
+    return (
+      <ComposerPrimitive.Root className="aui-edit-composer-root">
+        <ComposerPrimitive.Input className="aui-edit-composer-input" />
+  
+        <div className="aui-edit-composer-footer">
+          <ComposerPrimitive.Cancel asChild>
+            <Button variant="ghost">Cancel</Button>
+          </ComposerPrimitive.Cancel>
+          <ComposerPrimitive.Send asChild>
+            <Button>Send</Button>
+          </ComposerPrimitive.Send>
+        </div>
+      </ComposerPrimitive.Root>
+    );
+  };
+  
+  const AssistantMessage: FC = () => {
+    return (
+      <MessagePrimitive.Root className="aui-assistant-message-root">
+        <div className="aui-assistant-message-content">
+          <MessagePrimitive.Content components={{ Text: MarkdownText }} />
+        </div>
+  
+        <AssistantActionBar />
+  
+        <BranchPicker className="aui-assistant-branch-picker" />
+      </MessagePrimitive.Root>
+    );
+  };
+  
+  const AssistantActionBar: FC = () => {
+    return (
+      <ActionBarPrimitive.Root
+        hideWhenRunning
+        autohide="not-last"
+        autohideFloat="single-branch"
+        className="aui-assistant-action-bar-root"
+      >
+        <ActionBarPrimitive.Copy asChild>
+          <TooltipIconButton tooltip="Copy">
+            <MessagePrimitive.If copied>
+              <CheckIcon />
+            </MessagePrimitive.If>
+            <MessagePrimitive.If copied={false}>
+              <CopyIcon />
+            </MessagePrimitive.If>
+          </TooltipIconButton>
+        </ActionBarPrimitive.Copy>
+        <ActionBarPrimitive.Reload asChild>
+          <TooltipIconButton tooltip="Refresh">
+            <RefreshCwIcon />
+          </TooltipIconButton>
+        </ActionBarPrimitive.Reload>
+      </ActionBarPrimitive.Root>
+    );
+  };
+  
+  const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
+    className,
+    ...rest
+  }) => {
+    return (
+      <BranchPickerPrimitive.Root
+        hideWhenSingleBranch
+        className={cn("aui-branch-picker-root", className)}
+        {...rest}
+      >
+        <BranchPickerPrimitive.Previous asChild>
+          <TooltipIconButton tooltip="Previous">
+            <ChevronLeftIcon />
+          </TooltipIconButton>
+        </BranchPickerPrimitive.Previous>
+        <span className="aui-branch-picker-state">
+          <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
+        </span>
+        <BranchPickerPrimitive.Next asChild>
+          <TooltipIconButton tooltip="Next">
+            <ChevronRightIcon />
+          </TooltipIconButton>
+        </BranchPickerPrimitive.Next>
+      </BranchPickerPrimitive.Root>
+    );
+  };
+  
+  const CircleStopIcon = () => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        width="16"
+        height="16"
+      >
+        <rect width="10" height="10" x="3" y="3" rx="2" />
+      </svg>
+    );
+  };
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/tooltip-icon-button.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/tooltip-icon-button.tsx
new file mode 100644
index 0000000000..d2434babff
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/tooltip-icon-button.tsx
@@ -0,0 +1,42 @@
+import { ComponentPropsWithoutRef, forwardRef } from "react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+import { Button } from "../ui/button";
+import { cn } from "../../utils/cn";
+
+export type TooltipIconButtonProps = ComponentPropsWithoutRef<typeof Button> & {
+  tooltip: string;
+  side?: "top" | "bottom" | "left" | "right";
+};
+
+export const TooltipIconButton = forwardRef<
+  HTMLButtonElement,
+  TooltipIconButtonProps
+>(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            {...rest}
+            className={cn("", className)}
+            ref={ref}
+          >
+            {children}
+            <span className="aui-sr-only">{tooltip}</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side={side}>{tooltip}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+});
+
+TooltipIconButton.displayName = "TooltipIconButton";
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx
new file mode 100644
index 0000000000..41ef892af4
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx
@@ -0,0 +1,378 @@
+import React, { createContext, useContext, useReducer, useEffect, ReactNode } from "react";
+import { chatStorage, ThreadData as StoredThreadData } from "../../utils/chatStorage";
+
+// Define thread-specific message type
+export interface MyMessage {
+  id: string;
+  role: "user" | "assistant";
+  text: string;
+  timestamp: number;
+}
+
+// Thread data interfaces
+export interface RegularThreadData {
+  threadId: string;
+  status: "regular";
+  title: string;
+}
+
+export interface ArchivedThreadData {
+  threadId: string;
+  status: "archived";
+  title: string;
+}
+
+export type ThreadData = RegularThreadData | ArchivedThreadData;
+
+// Chat state interface
+interface ChatState {
+  isInitialized: boolean;
+  isLoading: boolean;
+  currentThreadId: string;
+  threadList: ThreadData[];
+  threads: Map<string, MyMessage[]>;
+  lastSaved: number; // Timestamp for tracking when data was last saved
+}
+
+// Action types
+type ChatAction =
+  | { type: "INITIALIZE_START" }
+  | { type: "INITIALIZE_SUCCESS"; threadList: ThreadData[]; threads: Map<string, MyMessage[]>; currentThreadId: string }
+  | { type: "INITIALIZE_ERROR" }
+  | { type: "SET_CURRENT_THREAD"; threadId: string }
+  | { type: "ADD_THREAD"; thread: ThreadData }
+  | { type: "UPDATE_THREAD"; threadId: string; updates: Partial<ThreadData> }
+  | { type: "DELETE_THREAD"; threadId: string }
+  | { type: "SET_MESSAGES"; threadId: string; messages: MyMessage[] }
+  | { type: "ADD_MESSAGE"; threadId: string; message: MyMessage }
+  | { type: "UPDATE_MESSAGES"; threadId: string; messages: MyMessage[] }
+  | { type: "MARK_SAVED" };
+
+// Initial state
+const initialState: ChatState = {
+  isInitialized: false,
+  isLoading: false,
+  currentThreadId: "default",
+  threadList: [{ threadId: "default", status: "regular", title: "New Chat" }],
+  threads: new Map([["default", []]]),
+  lastSaved: 0,
+};
+
+// Reducer function
+function chatReducer(state: ChatState, action: ChatAction): ChatState {
+  switch (action.type) {
+    case "INITIALIZE_START":
+      return {
+        ...state,
+        isLoading: true,
+      };
+
+    case "INITIALIZE_SUCCESS":
+      return {
+        ...state,
+        isInitialized: true,
+        isLoading: false,
+        threadList: action.threadList,
+        threads: action.threads,
+        currentThreadId: action.currentThreadId,
+        lastSaved: Date.now(),
+      };
+
+    case "INITIALIZE_ERROR":
+      return {
+        ...state,
+        isInitialized: true,
+        isLoading: false,
+      };
+
+    case "SET_CURRENT_THREAD":
+      return {
+        ...state,
+        currentThreadId: action.threadId,
+      };
+
+    case "ADD_THREAD":
+      return {
+        ...state,
+        threadList: [...state.threadList, action.thread],
+        threads: new Map(state.threads).set(action.thread.threadId, []),
+      };
+
+    case "UPDATE_THREAD":
+      return {
+        ...state,
+        threadList: state.threadList.map(thread =>
+          thread.threadId === action.threadId
+            ? { ...thread, ...action.updates }
+            : thread
+        ),
+      };
+
+    case "DELETE_THREAD":
+      const newThreads = new Map(state.threads);
+      newThreads.delete(action.threadId);
+      return {
+        ...state,
+        threadList: state.threadList.filter(t => t.threadId !== action.threadId),
+        threads: newThreads,
+        currentThreadId: state.currentThreadId === action.threadId 
+          ? "default" 
+          : state.currentThreadId,
+      };
+
+    case "SET_MESSAGES":
+      return {
+        ...state,
+        threads: new Map(state.threads).set(action.threadId, action.messages),
+      };
+
+    case "ADD_MESSAGE":
+      const currentMessages = state.threads.get(action.threadId) || [];
+      return {
+        ...state,
+        threads: new Map(state.threads).set(action.threadId, [...currentMessages, action.message]),
+      };
+
+    case "UPDATE_MESSAGES":
+      return {
+        ...state,
+        threads: new Map(state.threads).set(action.threadId, action.messages),
+      };
+
+    case "MARK_SAVED":
+      return {
+        ...state,
+        lastSaved: Date.now(),
+      };
+
+    default:
+      return state;
+  }
+}
+
+// Context type
+interface ChatContextType {
+  state: ChatState;
+  actions: {
+    // Initialization
+    initialize: () => Promise<void>;
+    
+    // Thread management
+    setCurrentThread: (threadId: string) => void;
+    createThread: (title?: string) => Promise<string>;
+    updateThread: (threadId: string, updates: Partial<ThreadData>) => Promise<void>;
+    deleteThread: (threadId: string) => Promise<void>;
+    
+    // Message management  
+    addMessage: (threadId: string, message: MyMessage) => Promise<void>;
+    updateMessages: (threadId: string, messages: MyMessage[]) => Promise<void>;
+    
+    // Utility
+    getCurrentMessages: () => MyMessage[];
+  };
+}
+
+// Create the context
+const ChatContext = createContext<ChatContextType | null>(null);
+
+// Chat provider component
+export function ChatProvider({ children }: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(chatReducer, initialState);
+
+  // Initialize data from storage
+  const initialize = async () => {
+    dispatch({ type: "INITIALIZE_START" });
+    
+    try {
+      await chatStorage.initialize();
+      
+      // Load all threads from storage
+      const storedThreads = await chatStorage.getAllThreads();
+      
+      if (storedThreads.length > 0) {
+        // Convert stored threads to UI format
+        const uiThreads: ThreadData[] = storedThreads.map(stored => ({
+          threadId: stored.threadId,
+          status: stored.status as "regular" | "archived",
+          title: stored.title,
+        }));
+        
+        // Load messages for each thread
+        const threadMessages = new Map<string, MyMessage[]>();
+        for (const thread of storedThreads) {
+          const messages = await chatStorage.getMessages(thread.threadId);
+          threadMessages.set(thread.threadId, messages);
+        }
+        
+        // Ensure default thread exists
+        if (!threadMessages.has("default")) {
+          threadMessages.set("default", []);
+        }
+        
+        // Find the most recently updated thread
+        const latestThread = storedThreads.sort((a, b) => b.updatedAt - a.updatedAt)[0];
+        const currentThreadId = latestThread ? latestThread.threadId : "default";
+        
+        dispatch({ 
+          type: "INITIALIZE_SUCCESS", 
+          threadList: uiThreads, 
+          threads: threadMessages, 
+          currentThreadId 
+        });
+      } else {
+        // Initialize with default thread
+        const defaultThread: StoredThreadData = {
+          threadId: "default",
+          status: "regular",
+          title: "New Chat",
+          createdAt: Date.now(),
+          updatedAt: Date.now(),
+        };
+        await chatStorage.saveThread(defaultThread);
+        
+        dispatch({ 
+          type: "INITIALIZE_SUCCESS", 
+          threadList: initialState.threadList, 
+          threads: initialState.threads, 
+          currentThreadId: "default" 
+        });
+      }
+    } catch (error) {
+      console.error("Failed to initialize chat data:", error);
+      dispatch({ type: "INITIALIZE_ERROR" });
+    }
+  };
+
+  // Thread management actions
+  const setCurrentThread = (threadId: string) => {
+    dispatch({ type: "SET_CURRENT_THREAD", threadId });
+  };
+
+  const createThread = async (title: string = "New Chat"): Promise<string> => {
+    const threadId = `thread-${Date.now()}`;
+    const newThread: ThreadData = {
+      threadId,
+      status: "regular",
+      title,
+    };
+    
+    // Update local state first
+    dispatch({ type: "ADD_THREAD", thread: newThread });
+    
+    // Save to storage
+    try {
+      const storedThread: StoredThreadData = {
+        threadId,
+        status: "regular",
+        title,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+      };
+      await chatStorage.saveThread(storedThread);
+      dispatch({ type: "MARK_SAVED" });
+    } catch (error) {
+      console.error("Failed to save new thread:", error);
+    }
+    
+    return threadId;
+  };
+
+  const updateThread = async (threadId: string, updates: Partial<ThreadData>) => {
+    // Update local state first
+    dispatch({ type: "UPDATE_THREAD", threadId, updates });
+    
+    // Save to storage
+    try {
+      const existingThread = await chatStorage.getThread(threadId);
+      if (existingThread) {
+        const updatedThread: StoredThreadData = {
+          ...existingThread,
+          ...updates,
+          updatedAt: Date.now(),
+        };
+        await chatStorage.saveThread(updatedThread);
+        dispatch({ type: "MARK_SAVED" });
+      }
+    } catch (error) {
+      console.error("Failed to update thread:", error);
+    }
+  };
+
+  const deleteThread = async (threadId: string) => {
+    // Update local state first
+    dispatch({ type: "DELETE_THREAD", threadId });
+    
+    // Delete from storage
+    try {
+      await chatStorage.deleteThread(threadId);
+      dispatch({ type: "MARK_SAVED" });
+    } catch (error) {
+      console.error("Failed to delete thread:", error);
+    }
+  };
+
+  // Message management actions
+  const addMessage = async (threadId: string, message: MyMessage) => {
+    // Update local state first
+    dispatch({ type: "ADD_MESSAGE", threadId, message });
+    
+    // Save to storage
+    try {
+      await chatStorage.saveMessage(message, threadId);
+      dispatch({ type: "MARK_SAVED" });
+    } catch (error) {
+      console.error("Failed to save message:", error);
+    }
+  };
+
+  const updateMessages = async (threadId: string, messages: MyMessage[]) => {
+    // Update local state first
+    dispatch({ type: "UPDATE_MESSAGES", threadId, messages });
+    
+    // Save to storage
+    try {
+      await chatStorage.saveMessages(messages, threadId);
+      dispatch({ type: "MARK_SAVED" });
+    } catch (error) {
+      console.error("Failed to save messages:", error);
+    }
+  };
+
+  // Utility functions
+  const getCurrentMessages = (): MyMessage[] => {
+    return state.threads.get(state.currentThreadId) || [];
+  };
+
+  // Auto-initialize on mount
+  useEffect(() => {
+    if (!state.isInitialized && !state.isLoading) {
+      initialize();
+    }
+  }, [state.isInitialized, state.isLoading]);
+
+  const actions = {
+    initialize,
+    setCurrentThread,
+    createThread,
+    updateThread,
+    deleteThread,
+    addMessage,
+    updateMessages,
+    getCurrentMessages,
+  };
+
+  return (
+    <ChatContext.Provider value={{ state, actions }}>
+      {children}
+    </ChatContext.Provider>
+  );
+}
+
+// Hook for accessing chat context
+export function useChatContext() {
+  const context = useContext(ChatContext);
+  if (!context) {
+    throw new Error("useChatContext must be used within ChatProvider");
+  }
+  return context;
+} 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ui/button.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ui/button.tsx
new file mode 100644
index 0000000000..4406b74e67
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ui/button.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+
+const buttonVariants = cva("aui-button", {
+  variants: {
+    variant: {
+      default: "aui-button-primary",
+      outline: "aui-button-outline",
+      ghost: "aui-button-ghost",
+    },
+    size: {
+      default: "aui-button-medium",
+      icon: "aui-button-icon",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ui/tooltip.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ui/tooltip.tsx
new file mode 100644
index 0000000000..ede610e327
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ui/tooltip.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "../../utils/cn";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn("aui-tooltip-content", className)}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/index.ts b/client/packages/lowcoder/src/comps/comps/chatComp/index.ts
new file mode 100644
index 0000000000..32064185b5
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/index.ts
@@ -0,0 +1,3 @@
+// client/packages/lowcoder/src/comps/comps/chatComp/index.ts
+export { ChatComp } from "./chatComp";
+export type { ChatCompProps } from "./chatCompTypes";
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorage.ts b/client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorage.ts
new file mode 100644
index 0000000000..edc68a0d93
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorage.ts
@@ -0,0 +1,281 @@
+import alasql from "alasql";
+import { MyMessage } from "../components/context/ChatContext";
+
+// Database configuration
+const DB_NAME = "ChatDB";
+const THREADS_TABLE = "threads";
+const MESSAGES_TABLE = "messages";
+
+// Thread data interface
+export interface ThreadData {
+  threadId: string;
+  status: "regular" | "archived";
+  title: string;
+  createdAt: number;
+  updatedAt: number;
+}
+
+// Initialize the database
+class ChatStorage {
+  private initialized = false;
+
+  async initialize() {
+    if (this.initialized) return;
+
+    try {
+      // Create database with localStorage backend
+      await alasql.promise(`CREATE LOCALSTORAGE DATABASE IF NOT EXISTS ${DB_NAME}`);
+      await alasql.promise(`ATTACH LOCALSTORAGE DATABASE ${DB_NAME}`);
+      await alasql.promise(`USE ${DB_NAME}`);
+
+      // Create threads table
+      await alasql.promise(`
+        CREATE TABLE IF NOT EXISTS ${THREADS_TABLE} (
+          threadId STRING PRIMARY KEY,
+          status STRING,
+          title STRING,
+          createdAt NUMBER,
+          updatedAt NUMBER
+        )
+      `);
+
+      // Create messages table
+      await alasql.promise(`
+        CREATE TABLE IF NOT EXISTS ${MESSAGES_TABLE} (
+          id STRING PRIMARY KEY,
+          threadId STRING,
+          role STRING,
+          text STRING,
+          timestamp NUMBER
+        )
+      `);
+
+      this.initialized = true;
+      console.log("Chat database initialized successfully");
+    } catch (error) {
+      console.error("Failed to initialize chat database:", error);
+      throw error;
+    }
+  }
+
+  // Thread operations
+  async saveThread(thread: ThreadData): Promise<void> {
+    await this.initialize();
+    
+    try {
+      // Insert or replace thread
+      await alasql.promise(`
+        DELETE FROM ${THREADS_TABLE} WHERE threadId = ?
+      `, [thread.threadId]);
+      
+      await alasql.promise(`
+        INSERT INTO ${THREADS_TABLE} VALUES (?, ?, ?, ?, ?)
+      `, [thread.threadId, thread.status, thread.title, thread.createdAt, thread.updatedAt]);
+    } catch (error) {
+      console.error("Failed to save thread:", error);
+      throw error;
+    }
+  }
+
+  async getThread(threadId: string): Promise<ThreadData | null> {
+    await this.initialize();
+    
+    try {
+      const result = await alasql.promise(`
+        SELECT * FROM ${THREADS_TABLE} WHERE threadId = ?
+      `, [threadId]) as ThreadData[];
+      
+      return result && result.length > 0 ? result[0] : null;
+    } catch (error) {
+      console.error("Failed to get thread:", error);
+      return null;
+    }
+  }
+
+  async getAllThreads(): Promise<ThreadData[]> {
+    await this.initialize();
+    
+    try {
+      const result = await alasql.promise(`
+        SELECT * FROM ${THREADS_TABLE} ORDER BY updatedAt DESC
+      `) as ThreadData[];
+      
+      return Array.isArray(result) ? result : [];
+    } catch (error) {
+      console.error("Failed to get threads:", error);
+      return [];
+    }
+  }
+
+  async deleteThread(threadId: string): Promise<void> {
+    await this.initialize();
+    
+    try {
+      // Delete thread and all its messages
+      await alasql.promise(`DELETE FROM ${THREADS_TABLE} WHERE threadId = ?`, [threadId]);
+      await alasql.promise(`DELETE FROM ${MESSAGES_TABLE} WHERE threadId = ?`, [threadId]);
+    } catch (error) {
+      console.error("Failed to delete thread:", error);
+      throw error;
+    }
+  }
+
+  // Message operations
+  async saveMessage(message: MyMessage, threadId: string): Promise<void> {
+    await this.initialize();
+    
+    try {
+      // Insert or replace message
+      await alasql.promise(`
+        DELETE FROM ${MESSAGES_TABLE} WHERE id = ?
+      `, [message.id]);
+      
+      await alasql.promise(`
+        INSERT INTO ${MESSAGES_TABLE} VALUES (?, ?, ?, ?, ?)
+      `, [message.id, threadId, message.role, message.text, message.timestamp]);
+    } catch (error) {
+      console.error("Failed to save message:", error);
+      throw error;
+    }
+  }
+
+  async saveMessages(messages: MyMessage[], threadId: string): Promise<void> {
+    await this.initialize();
+    
+    try {
+      // Delete existing messages for this thread
+      await alasql.promise(`DELETE FROM ${MESSAGES_TABLE} WHERE threadId = ?`, [threadId]);
+      
+      // Insert all messages
+      for (const message of messages) {
+        await alasql.promise(`
+          INSERT INTO ${MESSAGES_TABLE} VALUES (?, ?, ?, ?, ?)
+        `, [message.id, threadId, message.role, message.text, message.timestamp]);
+      }
+    } catch (error) {
+      console.error("Failed to save messages:", error);
+      throw error;
+    }
+  }
+
+  async getMessages(threadId: string): Promise<MyMessage[]> {
+    await this.initialize();
+    
+    try {
+      const result = await alasql.promise(`
+        SELECT id, role, text, timestamp FROM ${MESSAGES_TABLE} 
+        WHERE threadId = ? ORDER BY timestamp ASC
+      `, [threadId]) as MyMessage[];
+      
+      return Array.isArray(result) ? result : [];
+    } catch (error) {
+      console.error("Failed to get messages:", error);
+      return [];
+    }
+  }
+
+  async deleteMessages(threadId: string): Promise<void> {
+    await this.initialize();
+    
+    try {
+      await alasql.promise(`DELETE FROM ${MESSAGES_TABLE} WHERE threadId = ?`, [threadId]);
+    } catch (error) {
+      console.error("Failed to delete messages:", error);
+      throw error;
+    }
+  }
+
+  // Utility methods
+  async clearAllData(): Promise<void> {
+    await this.initialize();
+    
+    try {
+      await alasql.promise(`DELETE FROM ${THREADS_TABLE}`);
+      await alasql.promise(`DELETE FROM ${MESSAGES_TABLE}`);
+    } catch (error) {
+      console.error("Failed to clear all data:", error);
+      throw error;
+    }
+  }
+
+  async resetDatabase(): Promise<void> {
+    try {
+      // Drop the entire database
+      await alasql.promise(`DROP LOCALSTORAGE DATABASE IF EXISTS ${DB_NAME}`);
+      this.initialized = false;
+      
+      // Reinitialize fresh
+      await this.initialize();
+      console.log("✅ Database reset and reinitialized");
+    } catch (error) {
+      console.error("Failed to reset database:", error);
+      throw error;
+    }
+  }
+
+  async clearOnlyMessages(): Promise<void> {
+    await this.initialize();
+    
+    try {
+      await alasql.promise(`DELETE FROM ${MESSAGES_TABLE}`);
+      console.log("✅ All messages cleared, threads preserved");
+    } catch (error) {
+      console.error("Failed to clear messages:", error);
+      throw error;
+    }
+  }
+
+  async clearOnlyThreads(): Promise<void> {
+    await this.initialize();
+    
+    try {
+      await alasql.promise(`DELETE FROM ${THREADS_TABLE}`);
+      await alasql.promise(`DELETE FROM ${MESSAGES_TABLE}`); // Clear orphaned messages
+      console.log("✅ All threads and messages cleared");
+    } catch (error) {
+      console.error("Failed to clear threads:", error);
+      throw error;
+    }
+  }
+
+  async exportData(): Promise<{ threads: ThreadData[]; messages: any[] }> {
+    await this.initialize();
+    
+    try {
+      const threads = await this.getAllThreads();
+      const messages = await alasql.promise(`SELECT * FROM ${MESSAGES_TABLE}`) as any[];
+      
+      return { threads, messages: Array.isArray(messages) ? messages : [] };
+    } catch (error) {
+      console.error("Failed to export data:", error);
+      throw error;
+    }
+  }
+
+  async importData(data: { threads: ThreadData[]; messages: any[] }): Promise<void> {
+    await this.initialize();
+    
+    try {
+      // Clear existing data
+      await this.clearAllData();
+      
+      // Import threads
+      for (const thread of data.threads) {
+        await this.saveThread(thread);
+      }
+      
+      // Import messages
+      for (const message of data.messages) {
+        await alasql.promise(`
+          INSERT INTO ${MESSAGES_TABLE} VALUES (?, ?, ?, ?, ?)
+        `, [message.id, message.threadId, message.role, message.text, message.timestamp]);
+      }
+    } catch (error) {
+      console.error("Failed to import data:", error);
+      throw error;
+    }
+  }
+}
+
+// Export singleton instance
+export const chatStorage = new ChatStorage(); 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/utils/cn.ts b/client/packages/lowcoder/src/comps/comps/chatComp/utils/cn.ts
new file mode 100644
index 0000000000..5ba370c74d
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/chatComp/utils/cn.ts
@@ -0,0 +1,5 @@
+import { type ClassValue, clsx } from "clsx";
+
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs);
+}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
index 8068829d82..ea6f37f5a3 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -21,7 +21,7 @@ import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import {  AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import {
   disabledPropertyView,
@@ -81,6 +81,7 @@ const commonChildren = {
   format: StringControl,
   inputFormat: withDefault(StringControl, DATE_FORMAT),
   disabled: BoolCodeControl,
+  disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
   onEvent: eventHandlerControl(EventOptions),
   showTime: BoolControl,
   use12Hours: BoolControl,
@@ -179,11 +180,13 @@ export type DateCompViewProps = Pick<
   | "viewRef"
   | "timeZone"
   | "pickerMode"
+  | "disabledStyle"
 > & {
   onFocus: () => void;
   onBlur: () => void;
   $style: DateTimeStyleType;
   $childrenInputFieldStyle: ChildrenMultiSelectStyleType;
+  $disabledStyle?: DisabledInputStyleType;
   disabledTime: () => ReturnType<typeof disabledTime>;
   suffixIcon: ReactNode;
   placeholder?: string | [string, string];
@@ -264,6 +267,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
         $style={props.inputFieldStyle}
         $childrenInputFieldStyle={props.childrenInputFieldStyle}
+        $disabledStyle={props.disabledStyle}
         disabled={props.disabled}
         {...datePickerProps(props)}
         hourStep={props.hourStep}
@@ -285,6 +289,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         onBlur={() => props.onEvent("blur")}
         suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
         tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
+        disabledStyle={props.disabledStyle}
       />
     ),
     showValidationWhenEmpty: props.showValidationWhenEmpty,
@@ -366,6 +371,9 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
             <Section name={sectionNames.animationStyle} hasTooltip={true}>
               {children.animationStyle.getPropertyView()}
             </Section>
+            <Section name={trans("prop.disabledStyle")}>
+              {children.disabledStyle.getPropertyView()}
+            </Section>
           </>
         )}
       </>
@@ -457,6 +465,7 @@ let DateRangeTmpCmp = (function () {
         viewRef={props.viewRef}
         $style={props.inputFieldStyle}
         $childrenInputFieldStyle={props.childrenInputFieldStyle}
+        $disabledStyle={props.disabledStyle}
         disabled={props.disabled}
         {...datePickerProps(props)}
         start={tempStartValue?.isValid() ? tempStartValue : null}
@@ -482,6 +491,7 @@ let DateRangeTmpCmp = (function () {
         onBlur={() => props.onEvent("blur")}
         suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
         tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}      
+        disabledStyle={props.disabledStyle}
       />
     );
 
@@ -579,6 +589,9 @@ let DateRangeTmpCmp = (function () {
               <Section name={sectionNames.childrenInputFieldStyle}>
                 {children.childrenInputFieldStyle.getPropertyView()}
               </Section>
+              <Section name={trans("prop.disabledStyle")}>
+                {children.disabledStyle.getPropertyView()}
+              </Section>
             </>
           )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
index 63a030cdab..16bc634edf 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
@@ -85,8 +85,23 @@ export const getStyle = (style: DateTimeStyleType) => {
         color: ${style.text};
 
         &::-webkit-input-placeholder {
-          color: ${style.text};
-          opacity: 0.25;
+          color: ${style.placeholder};
+          opacity: 1;
+        }
+
+        &::-moz-placeholder {
+          color: ${style.placeholder};
+          opacity: 1;
+        }
+
+        &:-ms-input-placeholder {
+          color: ${style.placeholder};
+          opacity: 1;
+        }
+
+        &::placeholder {
+          color: ${style.placeholder};
+          opacity: 1;
         }
       }
 
@@ -132,6 +147,26 @@ export const getMobileStyle = (style: DateTimeStyleType) =>
     background-color: ${style.background};
     border-radius: ${style.radius};
     border-color: ${style.border};
+
+    &::-webkit-input-placeholder {
+      color: ${style.placeholder};
+      opacity: 1;
+    }
+
+    &::-moz-placeholder {
+      color: ${style.placeholder};
+      opacity: 1;
+    }
+
+    &:-ms-input-placeholder {
+      color: ${style.placeholder};
+      opacity: 1;
+    }
+
+    &::placeholder {
+      color: ${style.placeholder};
+      opacity: 1;
+    }
   `;
 
 export const dateRefMethods = refMethods<CommonPickerMethods>([focusMethod, blurMethod]);
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
index c56ddecb6f..65677b63bb 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
@@ -5,7 +5,7 @@ import { useUIView } from "../../utils/useUIView";
 import { checkIsMobile } from "util/commonUtils";
 import React, { useContext } from "react";
 import styled from "styled-components";
-import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
+import type { ChildrenMultiSelectStyleType, DateTimeStyleType, DisabledInputStyleType } from "../../controls/styleControlConstants";
 import { EditorContext } from "../../editorState";
 import { default as DatePicker } from "antd/es/date-picker";
 import { hasIcon } from "comps/utils";
@@ -16,11 +16,28 @@ import { timeZoneOptions } from "./timeZone";
 
 const { RangePicker } = DatePicker;
 
-const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType}>`
+const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType; $disabledStyle?: DisabledInputStyleType}>`
   width: 100%;
   box-shadow: ${(props) =>
     `${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
+
+  &.ant-picker-disabled {
+    cursor: not-allowed;
+    color: ${(props) => props.$disabledStyle?.disabledText};
+    background: ${(props) => props.$disabledStyle?.disabledBackground};
+    border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+
+    .ant-picker-input > input {
+      color: ${(props) => props.$disabledStyle?.disabledText};
+      background: ${(props) => props.$disabledStyle?.disabledBackground};
+    }
+    .ant-picker-suffix,
+    .ant-picker-clear,
+    .ant-picker-separator {
+      color: ${(props) => props.$disabledStyle?.disabledText};
+    }
+  }
 `;
 
 const StyledAntdSelect = styled(AntdSelect)`
@@ -46,6 +63,7 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
   onPanelChange: (value: any, mode: [string, string]) => void;
   onClickDateRangeTimeZone:(value:any)=>void;
   tabIndex?: number;
+  $disabledStyle?: DisabledInputStyleType;
 }
 
 export const DateRangeUIView = (props: DateRangeUIViewProps) => {
@@ -98,6 +116,7 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
           </StyledDiv>
         )
       )}
+      $disabledStyle={props.$disabledStyle}
     />
   );
 };
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
index a98a1eaa59..c66ac2a026 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
@@ -5,7 +5,7 @@ import { useUIView } from "../../utils/useUIView";
 import { checkIsMobile } from "util/commonUtils";
 import React, { useContext } from "react";
 import styled from "styled-components";
-import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
+import type { ChildrenMultiSelectStyleType, DateTimeStyleType, DisabledInputStyleType } from "../../controls/styleControlConstants";
 import { EditorContext } from "../../editorState";
 import { default as DatePicker } from "antd/es/date-picker";
 import type { DatePickerProps } from "antd/es/date-picker";
@@ -15,10 +15,28 @@ import { timeZoneOptions } from "./timeZone";
 import { default as AntdSelect } from "antd/es/select";
 import { omit } from "lodash";
 
-const DatePickerStyled = styled(DatePicker<Dayjs>)<{ $style: DateTimeStyleType }>`
+const DatePickerStyled = styled(DatePicker<Dayjs>)<{ $style: DateTimeStyleType; $disabledStyle?: DisabledInputStyleType; }>`
   width: 100%;
   box-shadow: ${props=>`${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
+
+  /* Disabled state styling */
+  &.ant-picker-disabled {
+    cursor: not-allowed;
+    color: ${(props) => props.$disabledStyle?.disabledText};
+    background: ${(props) => props.$disabledStyle?.disabledBackground};
+    border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+
+    .ant-picker-input > input {
+      color: ${(props) => props.$disabledStyle?.disabledText};
+      background: ${(props) => props.$disabledStyle?.disabledBackground};
+    }
+    .ant-picker-suffix,
+    .ant-picker-clear,
+    .ant-picker-separator {
+      color: ${(props) => props.$disabledStyle?.disabledText};
+    }
+  }
 `;
 
 const StyledDiv = styled.div`
@@ -40,6 +58,7 @@ export interface DataUIViewProps extends DateCompViewProps {
   onPanelChange: () => void;
   onClickDateTimeZone:(value:any)=>void;
   tabIndex?: number;
+  $disabledStyle?: DisabledInputStyleType;
 }
 
 const DateMobileUIView = React.lazy(() =>
@@ -54,6 +73,7 @@ export const DateUIView = (props: DataUIViewProps) => {
     <DateMobileUIView {...props} />,
     <DatePickerStyled
       {...omit(props, "format", "inputFormat", "pickerMode", "$childrenInputFieldStyle")}
+      $disabledStyle={props.$disabledStyle}
       multiple={false}
       format={props.inputFormat}
       ref={props.viewRef as any}
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index 0445c94039..543644b552 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -28,7 +28,7 @@ import {
 } from "../../generators/withExposing";
 import { IForm } from "../formComp/formDataConstants";
 import { SimpleNameComp } from "../simpleNameComp";
-import { Button100, ButtonStyleControl } from "./videobuttonCompConstants";
+import { Button100, ButtonStyleControl, DisabledButtonStyleControl } from "./videobuttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import {
@@ -195,6 +195,7 @@ const childrenMap = {
   aspectRatio: withDefault(StringControl, "1 / 1"),
   onEvent: ButtonEventHandlerControl,
   disabled: BoolCodeControl,
+  disabledStyle: DisabledButtonStyleControl,
   loading: BoolCodeControl,
   form: SelectFormControl,
   sourceMode: dropdownControl(ModeOptions, "standard"),
@@ -267,6 +268,7 @@ let ButtonTmpComp = (function () {
               <Tooltip title={props.tooltip}>
                 <Button100
                   ref={props.viewRef}
+                  $disabledStyle={props.disabledStyle}
                   $buttonStyle={props.style}
                   loading={props.loading}
                   style={
@@ -358,6 +360,9 @@ let ButtonTmpComp = (function () {
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
             </Section>
+            <Section name={trans("prop.disabledStyle")}>
+              {children.disabledStyle.getPropertyView()}
+            </Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
index 9a7a0d43b0..2ffa2e6cf3 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
@@ -1,5 +1,5 @@
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { ButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { ButtonStyle, DisabledButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
 import { refMethods } from "@lowcoder-ee/comps/generators/withMethodExposing";
 import { blurMethod, clickMethod, focusWithOptions } from "@lowcoder-ee/comps/utils/methodUtils";
@@ -8,7 +8,7 @@ import { genActiveColor, genHoverColor } from "components/colorSelect/colorUtils
 import styled, { css } from "styled-components";
 // import { genActiveColor, genHoverColor } from "lowcoder-design";
 
-export function getButtonStyle(buttonStyle: any) {
+export function getButtonStyle(buttonStyle: any, disabledStyle: any) {
   const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
   const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
   return css`
@@ -42,13 +42,20 @@ export function getButtonStyle(buttonStyle: any) {
             ? activeColor
             : buttonStyle.border};
         }
+      
+      }
+      &:disabled,
+      &.ant-btn-disabled {
+        color: ${disabledStyle.disabledText};
+        background: ${disabledStyle.disabledBackground};
+        cursor: not-allowed;
       }
     }
   `;
 }
 
-export const Button100 = styled(Button)<{ $buttonStyle?: any }>`
-  ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
+export const Button100 = styled(Button)<{ $buttonStyle?: any; $disabledStyle?: any }>`
+  ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)}
   width: 100%;
   height: auto;
   display: inline-flex;
@@ -98,6 +105,12 @@ export const ButtonStyleControl = migrateOldData(
   fixOldData
 );
 
+export const DisabledButtonTmpStyleControl = styleControl(DisabledButtonStyle);
+export const DisabledButtonStyleControl = migrateOldData(
+  DisabledButtonTmpStyleControl,
+  fixOldData
+);
+
 export const buttonRefMethods = refMethods([
   focusWithOptions,
   blurMethod,
diff --git a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx
index 6468422bfc..c758fc053b 100644
--- a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx
@@ -65,11 +65,12 @@ function ModuleLayoutView(props: IProps) {
   const defaultGrid = useContext(ThemeContext)?.theme?.gridColumns || "24"; //Added By Aqib Mirza
   const { readOnly } = useContext(ExternalEditorContext);
 
-  if (readOnly) {
-    return (
-      <ModulePreviewWrapper className={CNRootContainer}>{props.containerView}</ModulePreviewWrapper>
-    );
-  }
+  // Removed this so that module load with canvas view and app settings will apply
+  // if (readOnly) {
+  //   return (
+  //     <ModulePreviewWrapper className={CNRootContainer}>{props.containerView}</ModulePreviewWrapper>
+  //   );
+  // }
 
   const layout = {
     [moduleContainerId]: {
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index 7dbacf9005..15db21305f 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
 import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
 import { RefControl } from "../../controls/refControl";
 import { styleControl } from "comps/controls/styleControl";
-import {  AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, DisabledInputStyle, DisabledInputStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import {
   disabledPropertyView,
   hiddenPropertyView,
@@ -59,7 +59,6 @@ const getStyle = (style: InputLikeStyleType) => {
   return css`
     border-radius: ${style.radius};
     border-width:${style.borderWidth} !important;
-    // line-height: ${style.lineHeight} !important;
     // still use antd style when disabled
     &:not(.ant-input-number-disabled) {
       color: ${style.text};
@@ -75,11 +74,7 @@ const getStyle = (style: InputLikeStyleType) => {
       &:hover {
         border-color: ${style.accent};
       }
-
-      &::-webkit-input-placeholder {
-        color: ${style.text};
-        opacity: 0.4;
-      }
+  
       .ant-input-number {	
         margin: 0;	
         
@@ -93,6 +88,26 @@ const getStyle = (style: InputLikeStyleType) => {
         font-weight:${style.textWeight} !important;
         font-size:${style.textSize} !important;
         font-style:${style.fontStyle} !important;
+
+        &::-webkit-input-placeholder {
+          color: ${style.placeholder};
+          opacity: 1;
+        }
+
+        &::-moz-placeholder {
+          color: ${style.placeholder};
+          opacity: 1;
+        }
+
+        &:-ms-input-placeholder {
+          color: ${style.placeholder};
+          opacity: 1;
+        }
+
+        &::placeholder {
+          color: ${style.placeholder};
+          opacity: 1;
+        }
       }
 
       .ant-input-number-handler-wrap {
@@ -122,11 +137,27 @@ const getStyle = (style: InputLikeStyleType) => {
 
 const InputNumber = styled(AntdInputNumber)<{
   $style: InputLikeStyleType;
+  $disabledStyle?: DisabledInputStyleType;
 }>`
   box-shadow: ${(props) =>
     `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   width: 100%;
   ${(props) => props.$style && getStyle(props.$style)}
+  
+  /* Disabled state styling */
+  &:disabled,
+  &.ant-input-number-disabled {
+    color: ${(props) => props.$disabledStyle?.disabledText};
+    background: ${(props) => props.$disabledStyle?.disabledBackground};
+    border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+    cursor: not-allowed;
+    
+    .ant-input-number-input {
+      color: ${(props) => props.$disabledStyle?.disabledText};
+      background: ${(props) => props.$disabledStyle?.disabledBackground};
+    }
+    
+  }
 `;
 
 const FormatterOptions = [
@@ -266,6 +297,7 @@ const childrenMap = {
   animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   prefixIcon: IconControl,
   inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
+  disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
   // validation
   required: BoolControl,
   showValidationWhenEmpty: BoolControl,
@@ -382,6 +414,7 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
       stringMode={true}
       precision={props.precision}
       $style={props.inputFieldStyle}
+      $disabledStyle={props.disabledStyle}
       prefix={hasIcon(props.prefixIcon) ? props.prefixIcon : props.prefixText.value}
       tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
       onPressEnter={() => {
@@ -473,6 +506,9 @@ let NumberInputTmpComp = (function () {
           <Section name={sectionNames.inputFieldStyle}>
             {children.inputFieldStyle.getPropertyView()}
           </Section>
+                      <Section name={trans("prop.disabledStyle")}>
+              {children.disabledStyle.getPropertyView()}
+            </Section>
           <Section name={sectionNames.animationStyle} hasTooltip={true}>
             {children.animationStyle.getPropertyView()}
           </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
index 74b32347d2..48480bacd9 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
@@ -65,6 +65,7 @@ const RangeSliderBasicComp = (function () {
             range={true}
             value={[props.start.value, props.end.value]}
             $style={props.inputFieldStyle}
+            $disabledStyle={props.disabledSliderStyle}
             style={{ margin: 0 }}
             $vertical={Boolean(props.vertical) || false}
             tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
index e31117cdf3..a1156ec690 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
@@ -46,6 +46,7 @@ const SliderBasicComp = (function () {
             {...props}
             value={props.value.value}
             $style={props.inputFieldStyle}
+            $disabledStyle={props.disabledSliderStyle}
             style={{margin: 0}}
             $vertical={Boolean(props.vertical) || false}
             tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
index ae4c5abd88..c2a45c121a 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
 import { Section, lightenColor, sectionNames } from "lowcoder-design";
 import { RecordConstructorToComp } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
-import {  AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, heightCalculator, widthCalculator  } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, DisabledSliderStyle, DisabledSliderStyleType, heightCalculator, widthCalculator  } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { default as Slider } from "antd/es/slider";
 import { darkenColor, fadeColor } from "lowcoder-design";
@@ -15,7 +15,7 @@ import { trans } from "i18n";
 import { memo, useCallback, useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const getStyle = (style: SliderStyleType, vertical: boolean) => {
+const getStyle = (style: SliderStyleType, vertical: boolean, disabledStyle?: DisabledSliderStyleType) => {
   return css`
     &.ant-slider:not(.ant-slider-disabled) {
       &,
@@ -56,11 +56,30 @@ const getStyle = (style: SliderStyleType, vertical: boolean) => {
         margin: ${style.margin} auto !important;
       `}
     }
+    
+    /* Disabled state styling */
+    &.ant-slider-disabled {
+      .ant-slider-rail {
+        background-color: ${disabledStyle?.disabledTrack || lightenColor(style.track, 0.2)} !important;
+      }
+      .ant-slider-track {
+        background-color: ${disabledStyle?.disabledFill || lightenColor(style.fill, 0.3)} !important;
+      }
+      ${vertical && css`
+        width: auto;	
+        min-height: calc(300px - ${style.margin});
+        margin: ${style.margin} auto !important;
+      `}
+    }
   `;
 };
 
-export const SliderStyled = styled(Slider)<{ $style: SliderStyleType, $vertical: boolean }>`
-  ${(props) => props.$style && getStyle(props.$style, props.$vertical)}
+export const SliderStyled = styled(Slider)<{ 
+  $style: SliderStyleType, 
+  $vertical: boolean,
+  $disabledStyle?: DisabledSliderStyleType 
+}>`
+  ${(props) => props.$style && getStyle(props.$style, props.$vertical, props.$disabledStyle)}
 `;
 
 export const SliderWrapper = styled.div<{ $vertical: boolean }>`
@@ -88,6 +107,7 @@ export const SliderChildren = {
   prefixIcon: IconControl,
   suffixIcon: IconControl,
   inputFieldStyle: styleControl(SliderStyle, 'inputFieldStyle'),
+  disabledSliderStyle: styleControl(DisabledSliderStyle, 'disabledSliderStyle'),
   animationStyle: styleControl(AnimationStyle, 'animationStyle')
 };
 
@@ -132,6 +152,9 @@ const LayoutSection = memo(({ children }: { children: RecordConstructorToComp<ty
       <Section name={sectionNames.inputFieldStyle}>
         {children.inputFieldStyle.getPropertyView()}
       </Section>
+      <Section name={trans("prop.disabledStyle")}>
+        {children.disabledSliderStyle.getPropertyView()}
+      </Section>
       <Section name={sectionNames.animationStyle} hasTooltip={true}>
         {children.animationStyle.getPropertyView()}
       </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx
index 944b639760..35b6d84b09 100644
--- a/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx
@@ -1,375 +1 @@
-import { EmptyContent } from "components/EmptyContent";
-import { HelpText } from "components/HelpText";
-import { Tabs } from "components/Tabs";
-import {
-  clearMockWindow,
-  clearStyleEval,
-  ConstructorToComp,
-  evalFunc,
-  evalStyle,
-  RecordConstructorToComp,
-} from "lowcoder-core";
-import { CodeTextControl } from "comps/controls/codeTextControl";
-import SimpleStringControl from "comps/controls/simpleStringControl";
-import { MultiCompBuilder, withPropertyViewFn } from "comps/generators";
-import { list } from "comps/generators/list";
-import { BaseSection, CustomModal, PlusIcon, ScrollBar } from "lowcoder-design";
-import React, { useContext, useEffect, useState } from "react";
-import styled from "styled-components";
-import { ExternalEditorContext } from "util/context/ExternalEditorContext";
-import { runScriptInHost } from "util/commonUtils";
-import { getGlobalSettings } from "comps/utils/globalSettings";
-import { trans } from "i18n";
-import log from "loglevel";
-import { JSLibraryModal } from "components/JSLibraryModal";
-import { JSLibraryTree } from "components/JSLibraryTree";
-import { fetchJSLibrary } from "util/jsLibraryUtils";
-
-export interface ExternalPreload {
-  css?: string;
-  libs?: string[];
-  script?: string;
-  runJavaScriptInHost?: boolean;
-}
-
-interface RunAndClearable<T> {
-  run(id: string, externalPreload?: T): Promise<any>;
-
-  clear(): Promise<any>;
-}
-
-class LibsCompBase extends list(SimpleStringControl) implements RunAndClearable<string[]> {
-  success: Record<string, boolean> = {};
-  globalVars: Record<string, string[]> = {};
-  externalLibs: string[] = [];
-  runInHost: boolean = false;
-
-  getAllLibs() {
-    return this.externalLibs.concat(this.getView().map((i) => i.getView()));
-  }
-
-  async loadScript(url: string) {
-    if (this.success[url]) {
-      return;
-    }
-    return fetchJSLibrary(url).then((code) => {
-      evalFunc(
-        code,
-        {},
-        {},
-        {
-          scope: "function",
-          disableLimit: this.runInHost,
-          onSetGlobalVars: (v: string) => {
-            this.globalVars[url] = this.globalVars[url] || [];
-            if (!this.globalVars[url].includes(v)) {
-              this.globalVars[url].push(v);
-            }
-          },
-        }
-      );
-      this.success[url] = true;
-    });
-  }
-
-  async loadAllLibs() {
-    const scriptRunners = this.getAllLibs().map((url) =>
-      this.loadScript(url).catch((e) => {
-        log.warn(e);
-      })
-    );
-
-    try {
-      await Promise.all(scriptRunners);
-    } catch (e) {
-      log.warn("load preload libs error:", e);
-    }
-  }
-
-  async run(id: string, externalLibs: string[] = [], runInHost: boolean = false) {
-    this.externalLibs = externalLibs;
-    this.runInHost = runInHost;
-    return this.loadAllLibs();
-  }
-
-  async clear(): Promise<any> {
-    clearMockWindow();
-  }
-}
-
-const LibsComp = withPropertyViewFn(LibsCompBase, (comp) => {
-  useEffect(() => {
-    comp.loadAllLibs();
-  }, [comp.getView().length]);
-  return (
-    <ScrollBar style={{ height: "295px" }}>
-      {comp.getAllLibs().length === 0 && (
-        <EmptyContent text={trans("preLoad.jsLibraryEmptyContent")} style={{ margin: "0 16px" }} />
-      )}
-      <JSLibraryTree
-        mode={"column"}
-        libs={comp
-          .getView()
-          .map((i) => ({
-            url: i.getView(),
-            deletable: true,
-            exportedAs: comp.globalVars[i.getView()]?.[0],
-          }))
-          .concat(
-            comp.externalLibs.map((l) => ({
-              url: l,
-              deletable: false,
-              exportedAs: comp.globalVars[l]?.[0],
-            }))
-          )}
-        onDelete={(idx) => {
-          comp.dispatch(comp.deleteAction(idx));
-        }}
-      />
-    </ScrollBar>
-  );
-});
-
-function runScript(code: string, inHost?: boolean) {
-  if (inHost) {
-    runScriptInHost(code);
-    return;
-  }
-  try {
-    evalFunc(code, {}, {});
-  } catch (e) {
-    log.error(e);
-  }
-}
-
-class ScriptComp extends CodeTextControl implements RunAndClearable<string> {
-  runInHost: boolean = false;
-
-  runPreloadScript() {
-    const code = this.getView();
-    if (!code) {
-      return;
-    }
-    runScript(code, this.runInHost);
-  }
-
-  async run(id: string, externalScript: string = "", runInHost: boolean = false) {
-    this.runInHost = runInHost;
-    if (externalScript) {
-      runScript(externalScript, runInHost);
-    }
-    this.runPreloadScript();
-  }
-
-  async clear(): Promise<any> {
-    clearMockWindow();
-  }
-}
-
-class CSSComp extends CodeTextControl implements RunAndClearable<string> {
-  id = "";
-  externalCSS: string = "";
-
-  async applyAllCSS() {
-    const css = this.getView();
-    evalStyle(this.id, [this.externalCSS, css]);
-  }
-
-  async run(id: string, externalCSS: string = "") {
-    this.id = id;
-    this.externalCSS = externalCSS;
-    return this.applyAllCSS();
-  }
-
-  async clear() {
-    clearStyleEval(this.id);
-  }
-}
-
-class GlobalCSSComp extends CodeTextControl implements RunAndClearable<string> {
-  id = "";
-  externalCSS: string = "";
-
-  async applyAllCSS() {
-    const css = this.getView();
-    evalStyle(this.id, [this.externalCSS, css], true);
-  }
-
-  async run(id: string, externalCSS: string = "") {
-    this.id = id;
-    this.externalCSS = externalCSS;
-    return this.applyAllCSS();
-  }
-
-  async clear() {
-    clearStyleEval(this.id);
-  }
-}
-
-const childrenMap = {
-  libs: LibsComp,
-  script: ScriptComp,
-  css: CSSComp,
-  globalCSS: GlobalCSSComp,
-};
-
-type ChildrenInstance = RecordConstructorToComp<typeof childrenMap>;
-
-function JavaScriptTabPane(props: { comp: ConstructorToComp<typeof ScriptComp> }) {
-  useEffect(() => {
-    props.comp.runPreloadScript();
-  }, [props.comp]);
-
-  const codePlaceholder = `window.name = 'Tom';\nwindow.greet = () => "hello world";`;
-
-  return (
-    <>
-      <HelpText style={{ marginBottom: 20 }}>{trans("preLoad.jsHelpText")}</HelpText>
-      {props.comp.propertyView({
-        expandable: false,
-        styleName: "window",
-        codeType: "Function",
-        language: "javascript",
-        placeholder: codePlaceholder,
-      })}
-    </>
-  );
-}
-
-function CSSTabPane(props: { comp: CSSComp, isGlobal?: boolean }) {
-  useEffect(() => {
-    props.comp.applyAllCSS();
-  }, [props.comp]);
-
-  const codePlaceholder = `.top-header {\n  background-color: red; \n}`;
-
-  return (
-    <>
-      <HelpText style={{ marginBottom: 20 }}>{trans("preLoad.cssHelpText")}</HelpText>
-      {props.comp.propertyView({
-        expandable: false,
-        placeholder: codePlaceholder,
-        styleName: "window",
-        language: "css",
-      })}
-    </>
-  );
-}
-
-enum TabKey {
-  JavaScript = "js",
-  CSS = "css",
-  GLOBAL_CSS = "global_css",
-}
-
-function PreloadConfigModal(props: ChildrenInstance) {
-  const [activeKey, setActiveKey] = useState(TabKey.JavaScript);
-  const { showScriptsAndStyleModal, changeExternalState } = useContext(ExternalEditorContext);
-  
-  const tabItems = [
-    {
-      key: TabKey.JavaScript,
-      label: 'JavaScript',
-      children: <JavaScriptTabPane comp={props.script} />
-    },
-    {
-      key: TabKey.CSS,
-      label: 'CSS',
-      children: <CSSTabPane comp={props.css} />
-    },
-    {
-      key: TabKey.GLOBAL_CSS,
-      label: 'Global CSS',
-      children: <CSSTabPane comp={props.globalCSS} isGlobal />
-    },
-  ]
-  return (
-    <CustomModal
-      draggable
-      mask={activeKey !== TabKey.CSS}
-      open={showScriptsAndStyleModal}
-      title={trans("preLoad.scriptsAndStyles")}
-      destroyOnHidden
-      onCancel={() => changeExternalState?.({ showScriptsAndStyleModal: false })}
-      showOkButton={false}
-      showCancelButton={false}
-      width="600px"
-    >
-      <Tabs
-        onChange={(k) => setActiveKey(k as TabKey)}
-        style={{ marginBottom: 8, marginTop: 4 }}
-        activeKey={activeKey}
-        items={ tabItems }
-      >
-      </Tabs>
-    </CustomModal>
-  );
-}
-
-const PreloadCompBase = new MultiCompBuilder(childrenMap, () => {})
-  .setPropertyViewFn((children) => <PreloadConfigModal {...children} />)
-  .build();
-
-const AddJSLibraryButton = styled.div`
-  cursor: pointer;
-  margin-right: 16px;
-
-  g g {
-    stroke: #8b8fa3;
-  }
-
-  &:hover {
-    g g {
-      stroke: #222222;
-    }
-  }
-`;
-
-const JSLibraryWrapper = styled.div`
-  position: relative;
-`;
-
-export class PreloadComp extends PreloadCompBase {
-  async clear() {
-    return Promise.allSettled(Object.values(this.children).map((i) => i.clear()));
-  }
-
-  async run(id: string) {
-    const { orgCommonSettings = {} } = getGlobalSettings();
-    const { preloadCSS,preloadGlobalCSS, preloadJavaScript, preloadLibs, runJavaScriptInHost } = orgCommonSettings;
-    await this.children.css.run(id, preloadCSS || "");
-    await this.children.globalCSS.run('body', preloadGlobalCSS || "");
-    await this.children.libs.run(id, preloadLibs || [], !!runJavaScriptInHost);
-    await this.children.script.run(id, preloadJavaScript || "", !!runJavaScriptInHost);
-  }
-
-  getJSLibraryPropertyView() {
-    const libs = this.children.libs;
-    return (
-      <JSLibraryWrapper>
-        <BaseSection
-          name={trans("preLoad.jsLibrary")}
-          width={288}
-          noMargin
-          style={{
-            borderTop: "1px solid #e1e3eb",
-            backgroundColor: "#fff",
-          }}
-          additionalButton={
-            <AddJSLibraryButton>
-              <JSLibraryModal
-                runInHost={libs.runInHost}
-                trigger={<PlusIcon height={"46px"} />}
-                onCheck={(url) => !libs.getAllLibs().includes(url)}
-                onLoad={(url) => libs.loadScript(url)}
-                onSuccess={(url) => libs.dispatch(libs.pushAction(url))}
-              />
-            </AddJSLibraryButton>
-          }
-        >
-          {this.children.libs.getPropertyView()}
-        </BaseSection>
-      </JSLibraryWrapper>
-    );
-  }
-}
+export { PreloadComp } from "./preLoadComp/preLoadComp"; 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/ACTION_SYSTEM.md b/client/packages/lowcoder/src/comps/comps/preLoadComp/ACTION_SYSTEM.md
new file mode 100644
index 0000000000..a25f64d011
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/ACTION_SYSTEM.md
@@ -0,0 +1,199 @@
+## Architecture
+
+### Core Components
+
+1. **ActionConfig Interface** - Defines the structure of an action
+2. **ActionRegistry** - Central registry of all available actions
+3. **ActionInputSection** - Main UI component that renders based on action configurations
+
+### Key Benefits
+
+- **Scalable**: Add new actions by simply adding a configuration object
+- **Type Safe**: Full TypeScript support with proper interfaces
+- **Validation**: Built-in input validation support
+- **Categorized**: Actions are organized into logical categories
+- **Flexible**: Support for different input types and requirements
+
+## Adding New Actions
+
+### Step 1: Define the Action Configuration
+
+Add a new action configuration in `actionConfigs.ts`:
+
+```typescript
+const myNewAction: ActionConfig = {
+  key: 'my-new-action',
+  label: 'My New Action',
+  category: 'my-category',
+  requiresEditorComponentSelection: true, // if it needs a component from editor
+  requiresInput: true, // if it needs user input
+  inputPlaceholder: 'Enter your input here',
+  inputType: 'text', // 'text', 'number', 'textarea', 'json'
+  validation: (value: string) => {
+    if (!value.trim()) return 'Input is required';
+    return null; // null means no error
+  },
+  execute: async (params: ActionExecuteParams) => {
+    const { selectedEditorComponent, actionValue, editorState } = params;
+    
+    // Your action logic here
+    console.log('Executing my new action:', selectedEditorComponent, actionValue);
+    
+    // Show success message
+    message.success('Action executed successfully!');
+  }
+};
+```
+
+### Step 2: Add to Category
+
+Add your action to an existing category or create a new one:
+
+```typescript
+export const actionCategories: ActionCategory[] = [
+  // ... existing categories
+  {
+    key: 'my-category',
+    label: 'My Category',
+    actions: [myNewAction]
+  }
+];
+```
+
+### Step 3: Register the Action
+
+The action is automatically registered when added to a category, but you can also register it manually:
+
+```typescript
+actionRegistry.set('my-new-action', myNewAction);
+```
+
+## Action Configuration Options
+
+### Basic Properties
+
+- `key`: Unique identifier for the action
+- `label`: Display name in the UI
+- `category`: Category for organization
+
+### UI Requirements
+
+- `requiresComponentSelection`: Shows component dropdown for adding new components
+- `requiresEditorComponentSelection`: Shows dropdown of existing components in editor
+- `requiresInput`: Shows input field for user data
+- `inputPlaceholder`: Placeholder text for input field
+- `inputType`: Type of input ('text', 'number', 'textarea', 'json')
+
+### Validation
+
+- `validation`: Function that returns error message or null
+
+### Execution
+
+- `execute`: Async function that performs the actual action
+
+## Example Actions
+
+### Component Management
+- **Add Component**: Places new components in the editor
+- **Move Component**: Moves existing components
+- **Delete Component**: Removes components from editor
+- **Resize Component**: Changes component dimensions
+
+### Component Configuration
+- **Configure Component**: Updates component properties
+
+### Layout
+- **Change Layout**: Modifies the overall layout type
+
+### Data
+- **Bind Data**: Connects data sources to components
+
+### Events
+- **Add Event Handler**: Attaches event handlers to components
+
+### Styling
+- **Apply Style**: Applies CSS styles to components
+
+## Input Types
+
+### Text Input
+```typescript
+inputType: 'text'
+```
+
+### Number Input
+```typescript
+inputType: 'number'
+```
+
+### Textarea
+```typescript
+inputType: 'textarea'
+```
+
+### JSON Input
+```typescript
+inputType: 'json'
+validation: (value: string) => {
+  try {
+    JSON.parse(value);
+    return null;
+  } catch {
+    return 'Invalid JSON format';
+  }
+}
+```
+
+## Validation Examples
+
+### Required Field
+```typescript
+validation: (value: string) => {
+  if (!value.trim()) return 'This field is required';
+  return null;
+}
+```
+
+### Numeric Range
+```typescript
+validation: (value: string) => {
+  const num = parseInt(value);
+  if (isNaN(num) || num < 1 || num > 100) {
+    return 'Please enter a number between 1 and 100';
+  }
+  return null;
+}
+```
+
+### Custom Format
+```typescript
+validation: (value: string) => {
+  const pattern = /^[A-Za-z0-9]+$/;
+  if (!pattern.test(value)) {
+    return 'Only alphanumeric characters are allowed';
+  }
+  return null;
+}
+```
+
+## Best Practices
+
+1. **Use Descriptive Keys**: Make action keys self-documenting
+2. **Provide Clear Labels**: Use user-friendly action names
+3. **Validate Input**: Always validate user input when required
+4. **Handle Errors**: Provide meaningful error messages
+5. **Show Feedback**: Use success/error messages to inform users
+6. **Group Related Actions**: Use categories to organize actions logically
+
+## Migration from Old System
+
+The old hardcoded action handling has been replaced with the configuration-driven approach. All existing functionality is preserved, but now it's much easier to extend and maintain.
+
+## Future Enhancements
+
+- **Action History**: Track executed actions for undo/redo
+- **Action Templates**: Predefined action configurations
+- **Custom Validators**: Reusable validation functions
+- **Action Dependencies**: Actions that depend on other actions
+- **Batch Actions**: Execute multiple actions together 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/README.md b/client/packages/lowcoder/src/comps/comps/preLoadComp/README.md
new file mode 100644
index 0000000000..2e7b764ff0
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/README.md
@@ -0,0 +1,94 @@
+## File Structure
+
+```
+preLoadComp/
+├── index.ts                 # Main exports
+├── preLoadComp.tsx          # Main PreloadComp class
+├── types.ts                 # TypeScript interfaces and types
+├── styled.tsx               # Styled components
+├── utils.ts                 # Utility functions
+├── components.tsx           # Component classes (LibsComp, ScriptComp, etc.)
+├── tabPanes.tsx             # Tab pane components
+├── preloadConfigModal.tsx   # Modal configuration component
+├── actionInputSection.tsx   # Component placement functionality
+├── actionConfigs.ts         # Action configurations (scalable action system)
+├── ACTION_SYSTEM.md         # Action system documentation
+└── README.md               # This documentation
+```
+
+## Components
+
+### Core Components
+- **`preLoadComp.tsx`**: Main `PreloadComp` class that orchestrates all functionality
+- **`components.tsx`**: Contains all component classes (`LibsComp`, `ScriptComp`, `CSSComp`, `GlobalCSSComp`)
+
+### UI Components
+- **`preloadConfigModal.tsx`**: Modal with tabs for JavaScript, CSS, and Global CSS
+- **`tabPanes.tsx`**: Individual tab pane components for JavaScript and CSS
+- **`actionInputSection.tsx`**: Component placement functionality with dropdowns
+
+### Supporting Files
+- **`types.ts`**: TypeScript interfaces and enums
+- **`styled.tsx`**: Styled-components for consistent styling
+- **`utils.ts`**: Utility functions for component generation and script execution
+- **`index.ts`**: Centralized exports for easy importing
+
+## Key Features
+
+### Component Placement
+The `ActionInputSection` component provides:
+- Dropdown selection of available components
+- Categorized component listing
+- Automatic component placement in the editor
+- Success/error feedback
+
+### Scalable Action System
+The action system has been completely refactored to be configuration-driven:
+- **Easy to Extend**: Add new actions by simply adding configuration objects
+- **Type Safe**: Full TypeScript support with proper interfaces
+- **Validation**: Built-in input validation support
+- **Categorized**: Actions organized into logical categories
+- **Flexible**: Support for different input types and requirements
+
+See `ACTION_SYSTEM.md` for detailed documentation on adding new actions.
+
+### Script and Style Management
+- JavaScript library loading and management
+- CSS and Global CSS application
+- Script execution in host or sandbox environment
+
+### Modular Architecture
+- **Separation of Concerns**: Each file has a single responsibility
+- **Reusability**: Components can be imported and used independently
+- **Maintainability**: Easy to locate and modify specific functionality
+- **Type Safety**: Comprehensive TypeScript interfaces
+
+## Usage
+
+```typescript
+// Import the main component
+import { PreloadComp } from "./preLoadComp";
+
+// Import specific components
+import { ActionInputSection } from "./preLoadComp/actionInputSection";
+import { PreloadConfigModal } from "./preLoadComp/preloadConfigModal";
+
+// Import utilities
+import { generateComponentActionItems } from "./preLoadComp/utils";
+
+// Import types
+import type { ExternalPreload, RunAndClearable } from "./preLoadComp/types";
+```
+
+## Benefits of Restructuring
+
+1. **Maintainability**: Each file is focused and easier to understand
+2. **Reusability**: Components can be used independently
+3. **Testing**: Individual components can be tested in isolation
+4. **Collaboration**: Multiple developers can work on different parts simultaneously
+5. **Code Organization**: Clear separation of concerns
+6. **Type Safety**: Better TypeScript support with dedicated type files
+
+## Migration Notes
+
+The original `preLoadComp.tsx` file now simply exports from the new modular structure, ensuring backward compatibility while providing the benefits of the new organization. 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/actionConfigs.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/actionConfigs.ts
new file mode 100644
index 0000000000..02f0bbe736
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/actionConfigs.ts
@@ -0,0 +1,76 @@
+import { ActionCategory } from "./types";
+import {
+  addComponentAction,
+  moveComponentAction,
+  renameComponentAction,
+  deleteComponentAction,
+  resizeComponentAction,
+  configureComponentAction,
+  changeLayoutAction,
+  addEventHandlerAction,
+  applyStyleAction,
+  nestComponentAction
+} from "./actions";
+
+export const actionCategories: ActionCategory[] = [
+  {
+    key: 'component-management',
+    label: 'Component Management',
+    actions: [
+      addComponentAction, 
+      moveComponentAction, 
+      deleteComponentAction, 
+      resizeComponentAction,
+      renameComponentAction,
+      nestComponentAction
+    ]
+  },
+  {
+    key: 'component-configuration',
+    label: 'Component Configuration',
+    actions: [configureComponentAction]
+  },
+  {
+    key: 'layout',
+    label: 'Layout',
+    actions: [changeLayoutAction]
+  },
+  {
+    key: 'events',
+    label: 'Events',
+    actions: [addEventHandlerAction]
+  },
+  {
+    key: 'styling',
+    label: 'Styling',
+    actions: [applyStyleAction]
+  }
+];
+
+export const actionRegistry = new Map<string, any>();
+actionCategories.forEach(category => {
+  category.actions.forEach(action => {
+    actionRegistry.set(action.key, action);
+  });
+});
+
+export const getAllActionItems = () => {
+    return actionCategories.flatMap(category => {
+      if (category.actions.length === 1) {
+        const action = category.actions[0];
+        return [{
+          label: action.label,
+          key: action.key
+        }];
+      }
+  
+      return [{
+        label: category.label,
+        key: `category-${category.key}`,
+        children: category.actions.map(action => ({
+          label: action.label,
+          key: action.key
+        }))
+      }];
+    });
+  }; 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/actionInputSection.tsx b/client/packages/lowcoder/src/comps/comps/preLoadComp/actionInputSection.tsx
new file mode 100644
index 0000000000..a78ab6fb31
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/actionInputSection.tsx
@@ -0,0 +1,355 @@
+import React, { 
+  useContext, 
+  useState, 
+  useCallback, 
+  useRef, 
+  useMemo 
+} from "react";
+import { default as Button } from "antd/es/button";
+import { default as Input } from "antd/es/input";
+import { default as Menu } from "antd/es/menu";
+import { default as Space } from "antd/es/space";
+import { default as Flex } from "antd/es/flex";
+import type { InputRef } from 'antd';
+import { default as DownOutlined } from "@ant-design/icons/DownOutlined";
+import { BaseSection } from "lowcoder-design";
+import { EditorContext } from "comps/editorState";
+import { message } from "antd";
+import { CustomDropdown } from "./styled";
+import { generateComponentActionItems, getComponentCategories } from "./utils";
+import { actionRegistry, getAllActionItems } from "./actionConfigs";
+
+export function ActionInputSection() {
+  const [actionValue, setActionValue] = useState<string>("");
+  const [selectedActionKey, setSelectedActionKey] = useState<string | null>(null);
+  const [placeholderText, setPlaceholderText] = useState<string>("");
+  const [selectedComponent, setSelectedComponent] = useState<string | null>(null);
+  const [showComponentDropdown, setShowComponentDropdown] = useState<boolean>(false);
+  const [isNestedComponent, setIsNestedComponent] = useState<boolean>(false);
+  const [selectedNestComponent, setSelectedNestComponent] = useState<string | null>(null);
+  const [showEditorComponentsDropdown, setShowEditorComponentsDropdown] = useState<boolean>(false);
+  const [showStylingInput, setShowStylingInput] = useState<boolean>(false);
+  const [selectedEditorComponent, setSelectedEditorComponent] = useState<string | null>(null);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const inputRef = useRef<InputRef>(null);
+  const editorState = useContext(EditorContext);
+
+  const categories = useMemo(() => {
+    return getComponentCategories();
+  }, []);
+
+  const componentActionItems = useMemo(() => {
+    return generateComponentActionItems(categories);
+  }, [categories]);
+
+  const allActionItems = useMemo(() => {
+    return getAllActionItems();
+  }, []);
+
+  const editorComponents = useMemo(() => {
+    if (!editorState) return [];
+    
+    const compInfos = editorState.uiCompInfoList();
+    return compInfos.map(comp => ({
+      label: comp.name,
+      key: comp.name
+    }));
+  }, [editorState]);
+
+  const currentAction = useMemo(() => {
+    return selectedActionKey ? actionRegistry.get(selectedActionKey) : null;
+  }, [selectedActionKey]);
+
+  const handleActionSelection = useCallback((key: string) => {
+    if (key.startsWith('category-')) {
+      return;
+    }
+    
+    setSelectedActionKey(key);
+    setValidationError(null);
+    
+    const action = actionRegistry.get(key);
+    if (!action) {
+      console.warn(`Action not found: ${key}`);
+      return;
+    }
+
+    setShowComponentDropdown(false);
+    setShowEditorComponentsDropdown(false);
+    setShowStylingInput(false);
+    setSelectedComponent(null);
+    setSelectedEditorComponent(null);
+    setIsNestedComponent(false);
+    setSelectedNestComponent(null);
+    setActionValue("");
+
+    if (action.requiresComponentSelection) {
+      setShowComponentDropdown(true);
+      setPlaceholderText("Select a component to add");
+    } 
+    if (action.requiresEditorComponentSelection) {
+      setShowEditorComponentsDropdown(true);
+      setPlaceholderText(`Select a component to ${action.label.toLowerCase()}`);
+    }  
+    if (action.requiresInput) {
+      setPlaceholderText(action.inputPlaceholder || `Enter ${action.label.toLowerCase()} value`);
+    } else {
+      setPlaceholderText(`Execute ${action.label.toLowerCase()}`);
+    }
+    if (action.requiresStyle) {
+      setShowStylingInput(true);
+      setPlaceholderText(`Select a component to style`);
+    }
+    if (action.isNested) {
+      setIsNestedComponent(true);
+    }
+  }, []);
+
+  const handleComponentSelection = useCallback((key: string) => {
+    if (key.startsWith('comp-')) {
+      const compName = key.replace('comp-', '');
+      isNestedComponent ? setSelectedNestComponent(compName) : setSelectedComponent(compName);
+      setPlaceholderText(`Configure ${compName} component`);
+    }
+  }, [isNestedComponent]);
+
+  const handleEditorComponentSelection = useCallback((key: string) => {
+    setSelectedEditorComponent(key);
+    setPlaceholderText(`${currentAction?.label}`);
+  }, [currentAction]);
+
+
+  const validateInput = useCallback((value: string): string | null => {
+    if (!currentAction?.validation) return null;
+    return currentAction.validation(value);
+  }, [currentAction]);
+
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    const value = e.target.value;
+    setActionValue(value);
+    
+    if (validationError) {
+      setValidationError(null);
+    }
+  }, [validationError]);
+
+  const handleApplyAction = useCallback(async () => {
+    if (!editorState) {
+      message.error('Editor state not available');
+      return;
+    }
+
+    if (!selectedActionKey || !currentAction) {
+      message.error('No action selected');
+      return;
+    }
+
+    if (currentAction.requiresInput && currentAction.validation) {
+      const error = validateInput(actionValue);
+      if (error) {
+        setValidationError(error);
+        message.error(error);
+        return;
+      }
+    }
+
+    if (currentAction.requiresComponentSelection && !selectedComponent) {
+      message.error('Please select a component');
+      return;
+    }
+
+    if (currentAction.requiresEditorComponentSelection && !selectedEditorComponent) {
+      message.error('Please select a component from the editor');
+      return;
+    }
+
+    if(currentAction.isNested && !selectedNestComponent) {
+      message.error('Please select a component to nest');
+      return;
+    }
+
+    try {
+      await currentAction.execute({
+        actionKey: selectedActionKey,
+        actionValue,
+        selectedComponent,
+        selectedEditorComponent,
+        selectedNestComponent,
+        editorState
+      });
+
+      // Clear the form on success
+      setActionValue("");
+      setSelectedComponent(null);
+      setSelectedActionKey(null);
+      setShowComponentDropdown(false);
+      setShowEditorComponentsDropdown(false);
+      setSelectedEditorComponent(null);
+      setPlaceholderText("");
+      setValidationError(null);
+      setIsNestedComponent(false);
+      setSelectedNestComponent(null);
+
+    } catch (error) {
+      console.error('Error executing action:', error);
+      message.error('Failed to execute action. Please try again.');
+    }
+  }, [
+    selectedActionKey, 
+    actionValue, 
+    selectedComponent, 
+    selectedEditorComponent, 
+    selectedNestComponent,
+    editorState, 
+    currentAction, 
+    validateInput
+  ]);
+
+  const isApplyDisabled = useMemo(() => {
+    if (!selectedActionKey || !currentAction) return true;
+    
+    if (currentAction.requiresComponentSelection && !selectedComponent) return true;
+    if (currentAction.requiresEditorComponentSelection && !selectedEditorComponent) return true;
+    if (currentAction.requiresInput && !actionValue.trim()) return true;
+    
+    return false;
+  }, [selectedActionKey, currentAction, selectedComponent, selectedEditorComponent, actionValue]);
+
+  const shouldShowInput = useMemo(() => {
+    if (!currentAction) return false;
+    return currentAction.requiresInput && (
+      !currentAction.requiresEditorComponentSelection || selectedEditorComponent
+    );
+  }, [currentAction, selectedEditorComponent]);
+
+  return (
+    <BaseSection
+      name="Action Input"
+      width={288}
+      noMargin
+      style={{
+        borderTop: "1px solid #e1e3eb",
+        backgroundColor: "#fff",
+      }}
+    >
+      <div style={{ padding: "16px" }}>
+        <Flex gap="small" vertical>
+          <CustomDropdown
+            placement="bottomLeft"
+            overlayStyle={{ 
+              maxHeight: '400px',
+              overflow: 'auto',
+              zIndex: 9999
+            }}
+            popupRender={() => (
+              <Menu
+                items={allActionItems}
+                onClick={({ key }) => {
+                  handleActionSelection(key);
+                }}
+              />
+            )}
+          >
+            <Button size={"small"}>
+              <Space>
+                {currentAction ? currentAction.label : 'Select Action'} 
+                <DownOutlined />
+              </Space>
+            </Button>
+          </CustomDropdown>
+          
+          {(showComponentDropdown || isNestedComponent) && (
+            <CustomDropdown
+              overlayStyle={{ 
+                maxHeight: '400px',
+                overflow: 'auto',
+                zIndex: 9999
+              }}
+              popupRender={() => (
+                <Menu
+                  items={componentActionItems}
+                  onClick={({ key }) => {
+                    handleComponentSelection(key);
+                  }}
+                />
+              )}
+            >
+              <Button size={"small"}>
+                <Space>
+                  {
+                    selectedComponent 
+                    ? selectedComponent 
+                    : selectedNestComponent 
+                    ? selectedNestComponent 
+                    : 'New Component'
+                  }
+                  <DownOutlined />
+                </Space>
+              </Button>
+            </CustomDropdown>
+          )}
+          
+          {showEditorComponentsDropdown && (
+            <CustomDropdown
+              overlayStyle={{ 
+                maxHeight: '400px',
+                overflow: 'auto',
+                zIndex: 9999
+              }}
+              popupRender={() => (
+                <Menu
+                  items={editorComponents}
+                  onClick={({ key }) => {
+                    handleEditorComponentSelection(key);
+                  }}
+                />
+              )}
+            >
+              <Button size={"small"}>
+                <Space>
+                  {selectedEditorComponent ? selectedEditorComponent : 'Editor Component'} 
+                  <DownOutlined />
+                </Space>
+              </Button>
+            </CustomDropdown>
+          )}
+
+          {shouldShowInput && (
+            showStylingInput ? (
+              <Input.TextArea
+                ref={inputRef}
+                value={actionValue}
+                onChange={handleInputChange}
+                placeholder={placeholderText}
+                status={validationError ? 'error' : undefined}
+                autoSize={{ minRows: 1 }}
+              />
+            ) : (
+              <Input
+                ref={inputRef}
+                value={actionValue}
+                onChange={handleInputChange}
+                placeholder={placeholderText}
+                status={validationError ? 'error' : undefined}
+              />
+            )
+          )}
+
+          {validationError && (
+            <div style={{ color: '#ff4d4f', fontSize: '12px', marginTop: '-8px' }}>
+              {validationError}
+            </div>
+          )}
+          
+          <Button 
+            type="primary"
+            disabled={isApplyDisabled}
+            onClick={handleApplyAction}
+          >
+            Apply Action
+          </Button>
+        </Flex>
+      </div>
+    </BaseSection>
+  );
+} 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentConfiguration.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentConfiguration.ts
new file mode 100644
index 0000000000..2106b1eda9
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentConfiguration.ts
@@ -0,0 +1,34 @@
+import { message } from "antd";
+import { ActionConfig, ActionExecuteParams } from "../types";
+
+export const configureComponentAction: ActionConfig = {
+  key: 'configure-components',
+  label: 'Configure a component',
+  category: 'component-configuration',
+  requiresEditorComponentSelection: true,
+  requiresInput: true,
+  inputPlaceholder: 'Enter configuration (JSON format)',
+  inputType: 'json',
+  validation: (value: string) => {
+    if (!value.trim()) return 'Configuration is required';
+    try {
+      JSON.parse(value);
+      return null;
+    } catch {
+      return 'Invalid JSON format';
+    }
+  },
+  execute: async (params: ActionExecuteParams) => {
+    const { selectedEditorComponent, actionValue } = params;
+    
+    try {
+      const config = JSON.parse(actionValue);
+      console.log('Configuring component:', selectedEditorComponent, 'with config:', config);
+      message.info(`Configure action for component "${selectedEditorComponent}"`);
+      
+      // TODO: Implement actual configuration logic
+    } catch (error) {
+      message.error('Invalid configuration format');
+    }
+  }
+}; 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentEvents.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentEvents.ts
new file mode 100644
index 0000000000..cf007c5afa
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentEvents.ts
@@ -0,0 +1,20 @@
+import { message } from "antd";
+import { ActionConfig, ActionExecuteParams } from "../types";
+
+export const addEventHandlerAction: ActionConfig = {
+  key: 'add-event-handler',
+  label: 'Add event handler',
+  category: 'events',
+  requiresEditorComponentSelection: true,
+  requiresInput: true,
+  inputPlaceholder: 'Enter event handler code (JavaScript)',
+  inputType: 'textarea',
+  execute: async (params: ActionExecuteParams) => {
+    const { selectedEditorComponent, actionValue } = params;
+    
+    console.log('Adding event handler to component:', selectedEditorComponent, 'with code:', actionValue);
+    message.info(`Event handler added to component "${selectedEditorComponent}"`);
+    
+    // TODO: Implement actual event handler logic
+  }
+}; 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentLayout.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentLayout.ts
new file mode 100644
index 0000000000..e4afa15cab
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentLayout.ts
@@ -0,0 +1,19 @@
+import { message } from "antd";
+import { ActionConfig, ActionExecuteParams } from "../types";
+
+export const changeLayoutAction: ActionConfig = {
+  key: 'change-layout',
+  label: 'Change layout',
+  category: 'layout',
+  requiresInput: true,
+  inputPlaceholder: 'Enter layout type (grid, flex, absolute)',
+  inputType: 'text',
+  execute: async (params: ActionExecuteParams) => {
+    const { actionValue } = params;
+    
+    console.log('Changing layout to:', actionValue);
+    message.info(`Layout changed to: ${actionValue}`);
+    
+    // TODO: Implement actual layout change logic
+  }
+}; 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentManagement.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentManagement.ts
new file mode 100644
index 0000000000..669c77524b
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentManagement.ts
@@ -0,0 +1,560 @@
+import { message } from "antd";
+import { genRandomKey } from "comps/utils/idGenerator";
+import { parseCompType } from "comps/utils/remote";
+import { defaultLayout, GridItemDataType } from "comps/comps/gridItemComp";
+import { addMapChildAction } from "comps/generators/sameTypeMap";
+import { uiCompRegistry, UICompType } from "comps/uiCompRegistry";
+import { ActionConfig, ActionExecuteParams } from "../types";
+import { 
+    multiChangeAction, 
+    wrapActionExtraInfo, 
+    changeValueAction, 
+    wrapChildAction, 
+    deleteCompAction 
+} from "lowcoder-core";
+import { getEditorComponentInfo } from "../utils";
+
+export const addComponentAction: ActionConfig = {
+  key: 'add-components',
+  label: 'Place a component',
+  category: 'component-management',
+  requiresComponentSelection: true,
+  requiresInput: false,
+  execute: async (params: ActionExecuteParams) => {
+    const { selectedComponent, editorState } = params;
+    
+    if (!selectedComponent || !editorState) {
+      message.error('Component and editor state are required');
+      return;
+    }
+
+    try {
+      const uiComp = editorState.getUIComp();
+      const container = uiComp.getComp();
+      
+      if (!container) {
+        message.error('No container available to add component');
+        return;
+      }
+
+      const simpleContainer = container.realSimpleContainer();
+      if (!simpleContainer) {
+        message.error('No grid container available');
+        return;
+      }
+
+      const nameGenerator = editorState.getNameGenerator();
+      const compInfo = parseCompType(selectedComponent);
+      const compName = nameGenerator.genItemName(compInfo.compName);
+      const key = genRandomKey();
+
+      const manifest = uiCompRegistry[selectedComponent];
+      let defaultDataFn = undefined;
+
+      if (manifest?.lazyLoad) {
+        const { defaultDataFnName, defaultDataFnPath } = manifest;
+        if (defaultDataFnName && defaultDataFnPath) {
+          const module = await import(`../../../${defaultDataFnPath}.tsx`);
+          defaultDataFn = module[defaultDataFnName];
+        }
+      } else if (!compInfo.isRemote) {
+        defaultDataFn = manifest?.defaultDataFn;
+      }
+
+      const widgetValue: GridItemDataType = {
+        compType: selectedComponent,
+        name: compName,
+        comp: defaultDataFn ? defaultDataFn(compName, nameGenerator, editorState) : undefined,
+      };
+
+      const currentLayout = simpleContainer.children.layout.getView();
+      const layoutInfo = manifest?.layoutInfo || defaultLayout(selectedComponent as UICompType);
+      
+      let itemPos = 0;
+      if (Object.keys(currentLayout).length > 0) {
+        itemPos = Math.min(...Object.values(currentLayout).map((l: any) => l.pos || 0)) - 1;
+      }
+
+      const layoutItem = {
+        i: key,
+        x: 0,
+        y: 0,
+        w: layoutInfo.w || 6,
+        h: layoutInfo.h || 5,
+        pos: itemPos,
+        isDragging: false,
+      };
+
+      simpleContainer.dispatch(
+        wrapActionExtraInfo(
+          multiChangeAction({
+            layout: changeValueAction({
+              ...currentLayout,
+              [key]: layoutItem,
+            }, true),
+            items: addMapChildAction(key, widgetValue),
+          }),
+          { compInfos: [{ compName: compName, compType: selectedComponent, type: "add" }] }
+        )
+      );
+
+      editorState.setSelectedCompNames(new Set([compName]), "addComp");
+      
+      message.success(`Component "${manifest?.name || selectedComponent}" added successfully!`);
+    } catch (error) {
+      console.error('Error adding component:', error);
+      message.error('Failed to add component. Please try again.');
+    }
+  }
+};
+
+export const nestComponentAction: ActionConfig = {
+  key: 'nest-components',
+  label: 'Nest a component',
+  category: 'component-management',
+  requiresEditorComponentSelection: true,
+  requiresInput: false,
+  isNested: true,
+  execute: async (params: ActionExecuteParams) => {
+    const { selectedEditorComponent, selectedNestComponent, editorState } = params;
+    
+    if (!selectedEditorComponent || !selectedNestComponent || !editorState) {
+      message.error('Parent component, child component, and editor state are required');
+      return;
+    }
+
+    const parentComponentInfo = getEditorComponentInfo(editorState, selectedEditorComponent);
+    
+    if (!parentComponentInfo) {
+      message.error(`Parent component "${selectedEditorComponent}" not found`);
+      return;
+    }
+
+    const { componentKey: parentKey, items } = parentComponentInfo;
+    
+    if (!parentKey) {
+      message.error(`Parent component "${selectedEditorComponent}" not found in layout`);
+      return;
+    }
+
+    const parentItem = items[parentKey];
+    if (!parentItem) {
+      message.error(`Parent component "${selectedEditorComponent}" not found in items`);
+      return;
+    }
+
+    // Check if parent is a container
+    const parentCompType = parentItem.children.compType.getView();
+    const parentManifest = uiCompRegistry[parentCompType];
+    
+    if (!parentManifest?.isContainer) {
+      message.error(`Component "${selectedEditorComponent}" is not a container and cannot nest components`);
+      return;
+    }
+
+    try {
+
+      const nameGenerator = editorState.getNameGenerator();
+      const compInfo = parseCompType(selectedNestComponent);
+      const compName = nameGenerator.genItemName(compInfo.compName);
+      const key = genRandomKey();
+
+      const manifest = uiCompRegistry[selectedNestComponent];
+      let defaultDataFn = undefined;
+
+      if (manifest?.lazyLoad) {
+        const { defaultDataFnName, defaultDataFnPath } = manifest;
+        if (defaultDataFnName && defaultDataFnPath) {
+          const module = await import(`../../../${defaultDataFnPath}.tsx`);
+          defaultDataFn = module[defaultDataFnName];
+        }
+      } else if (!compInfo.isRemote) {
+        defaultDataFn = manifest?.defaultDataFn;
+      }
+
+      const widgetValue: GridItemDataType = {
+        compType: selectedNestComponent,
+        name: compName,
+        comp: defaultDataFn ? defaultDataFn(compName, nameGenerator, editorState) : undefined,
+      };
+
+      const parentContainer = parentItem.children.comp;
+      
+      const realContainer = parentContainer.realSimpleContainer();
+      if (!realContainer) {
+        message.error(`Container "${selectedEditorComponent}" cannot accept nested components`);
+        return;
+      }
+      
+      const currentLayout = realContainer.children.layout.getView();
+      const layoutInfo = manifest?.layoutInfo || defaultLayout(selectedNestComponent as UICompType);
+      
+      let itemPos = 0;
+      if (Object.keys(currentLayout).length > 0) {
+        itemPos = Math.max(...Object.values(currentLayout).map((l: any) => l.pos || 0)) + 1;
+      }
+
+      const layoutItem = {
+        i: key,
+        x: 0,
+        y: 0,
+        w: layoutInfo.w || 6,
+        h: layoutInfo.h || 5,
+        pos: itemPos,
+        isDragging: false,
+      };
+
+      realContainer.dispatch(
+        wrapActionExtraInfo(
+          multiChangeAction({
+            layout: changeValueAction({
+              ...currentLayout,
+              [key]: layoutItem,
+            }, true),
+            items: addMapChildAction(key, widgetValue),
+          }),
+          { compInfos: [{ compName: compName, compType: selectedNestComponent, type: "add" }] }
+        )
+      );
+
+      editorState.setSelectedCompNames(new Set([compName]), "nestComp");
+      
+      message.success(`Component "${manifest?.name || selectedNestComponent}" nested in "${selectedEditorComponent}" successfully!`);
+    } catch (error) {
+      console.error('Error nesting component:', error);
+      message.error('Failed to nest component. Please try again.');
+    }
+  }
+}
+
+export const deleteComponentAction: ActionConfig = {
+  key: 'delete-components',
+  label: 'Delete a component',
+  category: 'component-management',
+  requiresEditorComponentSelection: true,
+  requiresInput: false,
+  execute: async (params: ActionExecuteParams) => {
+    const { selectedEditorComponent, editorState } = params;
+    
+    if (!selectedEditorComponent || !editorState) {
+      message.error('Component and editor state are required');
+      return;
+    }
+
+    try {
+      const componentInfo = getEditorComponentInfo(editorState, selectedEditorComponent);
+      
+      if (!componentInfo) {
+        message.error(`Component "${selectedEditorComponent}" not found`);
+        return;
+      }
+
+      const { componentKey, currentLayout, simpleContainer, componentType } = componentInfo;
+
+      if (!componentKey || !currentLayout[componentKey]) {
+        message.error(`Component "${selectedEditorComponent}" not found in layout`);
+        return;
+      }
+
+      const newLayout = { ...currentLayout };
+      delete newLayout[componentKey];
+
+      simpleContainer.dispatch(
+        wrapActionExtraInfo(
+          multiChangeAction({
+            layout: changeValueAction(newLayout, true),
+            items: wrapChildAction(componentKey, deleteCompAction()),
+          }),
+          { 
+            compInfos: [{ 
+              compName: selectedEditorComponent, 
+              compType: componentType || 'unknown', 
+              type: "delete" 
+            }] 
+          }
+        )
+      );
+
+      editorState.setSelectedCompNames(new Set(), "deleteComp");
+      
+      message.success(`Component "${selectedEditorComponent}" deleted successfully`);
+    } catch (error) {
+      console.error('Error deleting component:', error);
+      message.error('Failed to delete component. Please try again.');
+    }
+  }
+};
+
+export const moveComponentAction: ActionConfig = {
+  key: 'move-components',
+  label: 'Move a component',
+  category: 'component-management',
+  requiresEditorComponentSelection: true,
+  requiresInput: true,
+  inputPlaceholder: 'Enter move parameters (e.g., x:100, y:200)',
+  inputType: 'text',
+  validation: (value: string) => {
+    if (!value.trim()) return 'Move parameters are required';
+    
+    const params = value.toLowerCase().split(',').map(p => p.trim());
+    for (const param of params) {
+      if (!param.includes(':')) {
+        return 'Invalid format. Use "x:value, y:value"';
+      }
+      const [key, val] = param.split(':').map(s => s.trim());
+      if (!['x', 'y'].includes(key)) {
+        return 'Only x and y parameters are supported';
+      }
+      const num = parseInt(val);
+      if (isNaN(num) || num < 0) {
+        return `${key} must be a positive number`;
+      }
+    }
+    return null;
+  },
+  execute: async (params: ActionExecuteParams) => {
+    const { selectedEditorComponent, actionValue, editorState } = params;
+
+    if (!selectedEditorComponent || !editorState) {
+      message.error('Component and editor state are required');
+      return;
+    }
+
+    try {
+      const moveParams: { x?: number; y?: number } = {};
+      const params = actionValue.toLowerCase().split(',').map(p => p.trim());
+      
+      for (const param of params) {
+        const [key, val] = param.split(':').map(s => s.trim());
+        if (['x', 'y'].includes(key)) {
+          moveParams[key as 'x' | 'y'] = parseInt(val);
+        }
+      }
+
+      if (!moveParams.x && !moveParams.y) {
+        message.error('No valid move parameters provided');
+        return;
+      }
+
+      const componentInfo = getEditorComponentInfo(editorState, selectedEditorComponent);
+      
+      if (!componentInfo) {
+        message.error(`Component "${selectedEditorComponent}" not found`);
+        return;
+      }
+
+      const { componentKey, currentLayout, simpleContainer } = componentInfo;
+
+      if (!componentKey || !currentLayout[componentKey]) {
+        message.error(`Component "${selectedEditorComponent}" not found in layout`);
+        return;
+      }
+
+      const currentLayoutItem = currentLayout[componentKey];
+      const items = simpleContainer.children.items.children;
+
+      const newLayoutItem = {
+        ...currentLayoutItem,
+        x: moveParams.x !== undefined ? moveParams.x : currentLayoutItem.x,
+        y: moveParams.y !== undefined ? moveParams.y : currentLayoutItem.y,
+      };
+
+      const newLayout = {
+        ...currentLayout,
+        [componentKey]: newLayoutItem,
+      };
+
+      simpleContainer.dispatch(
+        wrapActionExtraInfo(
+          multiChangeAction({
+            layout: changeValueAction(newLayout, true),
+          }),
+          { 
+            compInfos: [{ 
+              compName: selectedEditorComponent, 
+              compType: (items[componentKey] as any).children.compType.getView(), 
+              type: "layout" 
+            }] 
+          }
+        )
+      );
+
+      editorState.setSelectedCompNames(new Set([selectedEditorComponent]), "moveComp");
+      
+      const moveDescription = [];
+      if (moveParams.x !== undefined) moveDescription.push(`x: ${moveParams.x}`);
+      if (moveParams.y !== undefined) moveDescription.push(`y: ${moveParams.y}`);
+      
+      message.success(`Component "${selectedEditorComponent}" moved to ${moveDescription.join(', ')}`);
+    } catch (error) {
+      console.error('Error moving component:', error);
+      message.error('Failed to move component. Please try again.');
+    }
+  }
+};
+
+export const renameComponentAction: ActionConfig = {
+  key: 'rename-components',
+  label: 'Rename a component',
+  category: 'component-management',
+  requiresEditorComponentSelection: true,
+  requiresInput: true,
+  inputPlaceholder: 'Enter new name',
+  inputType: 'text',
+  validation: (value: string, params?: ActionExecuteParams) => {
+    if (!value.trim()) return 'Name is required';
+    
+    if (params?.editorState && params?.selectedEditorComponent) {
+      const error = params.editorState.checkRename(params.selectedEditorComponent, value);
+      return error || null;
+    }
+    return null;
+  },
+  execute: async (params: ActionExecuteParams) => {
+    const { selectedEditorComponent, actionValue, editorState } = params;
+    
+    if (!selectedEditorComponent || !actionValue) {
+      message.error('Component and name is required');
+      return;
+    }
+
+    try {
+      const componentInfo = getEditorComponentInfo(editorState, selectedEditorComponent);
+      
+      if (!componentInfo) {
+        message.error(`Component "${selectedEditorComponent}" not found`);
+        return;
+      }
+
+      const { componentKey, currentLayout, items } = componentInfo;
+
+      if (!componentKey) {
+        message.error(`Component "${selectedEditorComponent}" not found in layout`);
+        return;
+      }
+
+      const componentItem = items[componentKey];
+      if (!componentItem) {
+        message.error(`Component "${selectedEditorComponent}" not found in items`);
+        return;
+      }
+
+      if (editorState.rename(selectedEditorComponent, actionValue)) {
+        editorState.setSelectedCompNames(new Set([actionValue]), "renameComp");
+        message.success(`Component "${selectedEditorComponent}" renamed to "${actionValue}" successfully`);
+      } else {
+        message.error('Failed to rename component. The name might already exist or be invalid.');
+      }
+    } catch(error) {
+      console.error('Error renaming component:', error);
+      message.error('Failed to rename component. Please try again.');
+    }
+  }
+};
+
+export const resizeComponentAction: ActionConfig = {
+  key: 'resize-components',
+  label: 'Resize a component',
+  category: 'component-management',
+  requiresEditorComponentSelection: true,
+  requiresInput: true,
+  inputPlaceholder: 'Enter resize parameters (e.g., w:8, h:6)',
+  inputType: 'text',
+  validation: (value: string) => {
+    if (!value.trim()) return 'Resize parameters are required';
+    
+    const params = value.toLowerCase().split(',').map(p => p.trim());
+    for (const param of params) {
+      if (!param.includes(':')) {
+        return 'Invalid format. Use "w:value, h:value"';
+      }
+      const [key, val] = param.split(':').map(s => s.trim());
+      if (!['w', 'h'].includes(key)) {
+        return 'Only w (width) and h (height) parameters are supported';
+      }
+      const num = parseInt(val);
+      if (isNaN(num) || num < 1) {
+        return `${key} must be a positive number greater than 0`;
+      }
+    }
+    return null;
+  },
+  execute: async (params: ActionExecuteParams) => {
+    const { selectedEditorComponent, actionValue, editorState } = params;
+
+    if (!selectedEditorComponent || !editorState) {
+      message.error('Component and editor state are required');
+      return;
+    }
+
+    try {
+      const resizeParams: { w?: number; h?: number } = {};
+      const params = actionValue.toLowerCase().split(',').map(p => p.trim());
+      
+      for (const param of params) {
+        const [key, val] = param.split(':').map(s => s.trim());
+        if (['w', 'h'].includes(key)) {
+          resizeParams[key as 'w' | 'h'] = parseInt(val);
+        }
+      }
+
+      if (!resizeParams.w && !resizeParams.h) {
+        message.error('No valid resize parameters provided');
+        return;
+      }
+
+      const componentInfo = getEditorComponentInfo(editorState, selectedEditorComponent);
+      
+      if (!componentInfo) {
+        message.error(`Component "${selectedEditorComponent}" not found`);
+        return;
+      }
+
+      const { componentKey, currentLayout, simpleContainer, items } = componentInfo;
+
+      if (!componentKey || !currentLayout[componentKey]) {
+        message.error(`Component "${selectedEditorComponent}" not found in layout`);
+        return;
+      }
+
+      const currentLayoutItem = currentLayout[componentKey];
+      
+      const newLayoutItem = {
+        ...currentLayoutItem,
+        w: resizeParams.w !== undefined ? resizeParams.w : currentLayoutItem.w,
+        h: resizeParams.h !== undefined ? resizeParams.h : currentLayoutItem.h,
+      };
+
+      const newLayout = {
+        ...currentLayout,
+        [componentKey]: newLayoutItem,
+      };
+
+      simpleContainer.dispatch(
+        wrapActionExtraInfo(
+          multiChangeAction({
+            layout: changeValueAction(newLayout, true),
+          }),
+          { 
+            compInfos: [{ 
+              compName: selectedEditorComponent, 
+              compType: (items[componentKey] as any).children.compType.getView(), 
+              type: "layout" 
+            }] 
+          }
+        )
+      );
+
+      editorState.setSelectedCompNames(new Set([selectedEditorComponent]), "resizeComp");
+      
+      const resizeDescription = [];
+      if (resizeParams.w !== undefined) resizeDescription.push(`width: ${resizeParams.w}`);
+      if (resizeParams.h !== undefined) resizeDescription.push(`height: ${resizeParams.h}`);
+      
+      message.success(`Component "${selectedEditorComponent}" resized to ${resizeDescription.join(', ')}`);
+    } catch (error) {
+      console.error('Error resizing component:', error);
+      message.error('Failed to resize component. Please try again.');
+    }
+  }
+};
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentStyling.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentStyling.ts
new file mode 100644
index 0000000000..dbe6297a0b
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentStyling.ts
@@ -0,0 +1,113 @@
+import { message } from "antd";
+import { ActionConfig, ActionExecuteParams } from "../types";
+import { getEditorComponentInfo } from "../utils";
+
+// Fallback constant style object to apply
+// This wil be replaced by a JSON object returned by the AI model.
+const FALLBACK_STYLE_OBJECT = {
+  fontSize: "10px",
+  fontWeight: "500",
+  color: "#333333",
+  backgroundColor: "#ffffff",
+  padding: "8px",
+  borderRadius: "4px",
+  border: "1px solid #ddd"
+};
+
+export const applyStyleAction: ActionConfig = {
+  key: 'apply-style',
+  label: 'Apply style to component',
+  category: 'styling',
+  requiresEditorComponentSelection: true,
+  requiresStyle: true,
+  requiresInput: true,
+  inputPlaceholder: 'Enter CSS styles (JSON format)',
+  inputType: 'textarea',
+  validation: (value: string) => {
+    if (!value.trim()) return 'Styles are required'
+    else return null;
+  },
+  execute: async (params: ActionExecuteParams) => {
+    const { selectedEditorComponent, actionValue, editorState } = params;
+    
+    if (!selectedEditorComponent || !editorState) {
+      message.error('Component and editor state are required');
+      return;
+    }
+
+    // A fallback constant is currently used to style the component.
+    // This is a temporary solution and will be removed once we integrate the AI model with the component styling.
+    try {
+      let styleObject: Record<string, any> = {};
+      let usingFallback = false;
+      
+      try {
+        if (typeof actionValue === 'string') {
+          styleObject = JSON.parse(actionValue);
+        } else {
+          styleObject = actionValue;
+        }
+      } catch (e) {
+        styleObject = FALLBACK_STYLE_OBJECT;
+        usingFallback = true;
+      }
+      
+      const comp = editorState.getUICompByName(selectedEditorComponent);
+      
+      if (!comp) {
+        message.error(`Component "${selectedEditorComponent}" not found`);
+        return;
+      }
+
+      const appliedStyles: string[] = [];
+      
+      for (const [styleKey, styleValue] of Object.entries(styleObject)) {
+        try {
+          const { children } = comp.children.comp;
+          const compType = comp.children.compType.getView();
+
+          // This method is used in LeftLayersContent.tsx to style the component.
+          if (!children.style) {
+            if (children[compType]?.children?.style?.children?.[styleKey]) {
+              children[compType].children.style.children[styleKey].dispatchChangeValueAction(styleValue);
+              appliedStyles.push(styleKey);
+            } else if (children[compType]?.children?.[styleKey]) {
+              children[compType].children[styleKey].dispatchChangeValueAction(styleValue);
+              appliedStyles.push(styleKey);
+            } else {
+              console.warn(`Style property ${styleKey} not found in component ${selectedEditorComponent}`);
+            }
+          } else {
+            if (children.style.children?.[styleKey]) {
+              children.style.children[styleKey].dispatchChangeValueAction(styleValue);
+              appliedStyles.push(styleKey);
+            } else if (children.style[styleKey]) {
+              children.style[styleKey].dispatchChangeValueAction(styleValue);
+              appliedStyles.push(styleKey);
+            } else {
+              console.warn(`Style property ${styleKey} not found in style object`);
+            }
+          }
+        } catch (error) {
+          console.error(`Error applying style ${styleKey}:`, error);
+        }
+      }
+
+      if (appliedStyles.length > 0) {
+        editorState.setSelectedCompNames(new Set([selectedEditorComponent]), "applyStyle");
+        
+        if (usingFallback) {
+          message.success(`Applied ${appliedStyles.length} fallback style(s) to component "${selectedEditorComponent}": ${appliedStyles.join(', ')}`);
+        } else {
+          message.success(`Applied ${appliedStyles.length} style(s) to component "${selectedEditorComponent}": ${appliedStyles.join(', ')}`);
+        }
+      } else {
+        message.warning('No styles were applied. Check if the component supports styling.');
+      }
+      
+    } catch (error) {
+      console.error('Error applying styles:', error);
+      message.error('Failed to apply styles. Please try again.');
+    }
+  }
+}; 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/index.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/index.ts
new file mode 100644
index 0000000000..8400000505
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/index.ts
@@ -0,0 +1,14 @@
+// Component Management Actions
+export * from './componentManagement';
+
+// Component Configuration Actions
+export { configureComponentAction } from './componentConfiguration';
+
+// Layout Actions
+export { changeLayoutAction } from './componentLayout';
+
+// Event Actions
+export { addEventHandlerAction } from './componentEvents';
+
+// Styling Actions
+export { applyStyleAction } from './componentStyling'; 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/components.tsx b/client/packages/lowcoder/src/comps/comps/preLoadComp/components.tsx
new file mode 100644
index 0000000000..28f4629d95
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/components.tsx
@@ -0,0 +1,178 @@
+import {
+  clearMockWindow,
+  clearStyleEval,
+  ConstructorToComp,
+  evalFunc,
+  evalStyle,
+} from "lowcoder-core";
+import { CodeTextControl } from "comps/controls/codeTextControl";
+import SimpleStringControl from "comps/controls/simpleStringControl";
+import { MultiCompBuilder, withPropertyViewFn } from "comps/generators";
+import { list } from "comps/generators/list";
+import { ScrollBar } from "lowcoder-design";
+import { EmptyContent } from "components/EmptyContent";
+import React, { useEffect } from "react";
+import { trans } from "i18n";
+import log from "loglevel";
+import { JSLibraryTree } from "components/JSLibraryTree";
+import { fetchJSLibrary } from "util/jsLibraryUtils";
+import { RunAndClearable } from "./types";
+
+export class LibsCompBase extends list(SimpleStringControl) implements RunAndClearable<string[]> {
+  success: Record<string, boolean> = {};
+  globalVars: Record<string, string[]> = {};
+  externalLibs: string[] = [];
+  runInHost: boolean = false;
+
+  getAllLibs() {
+    return this.externalLibs.concat(this.getView().map((i) => i.getView()));
+  }
+
+  async loadScript(url: string) {
+    if (this.success[url]) {
+      return;
+    }
+    return fetchJSLibrary(url).then((code) => {
+      evalFunc(
+        code,
+        {},
+        {},
+        {
+          scope: "function",
+          disableLimit: this.runInHost,
+          onSetGlobalVars: (v: string) => {
+            this.globalVars[url] = this.globalVars[url] || [];
+            if (!this.globalVars[url].includes(v)) {
+              this.globalVars[url].push(v);
+            }
+          },
+        }
+      );
+      this.success[url] = true;
+    });
+  }
+
+  async loadAllLibs() {
+    const scriptRunners = this.getAllLibs().map((url) =>
+      this.loadScript(url).catch((e) => {
+        log.warn(e);
+      })
+    );
+
+    try {
+      await Promise.all(scriptRunners);
+    } catch (e) {
+      log.warn("load preload libs error:", e);
+    }
+  }
+
+  async run(id: string, externalLibs: string[] = [], runInHost: boolean = false) {
+    this.externalLibs = externalLibs;
+    this.runInHost = runInHost;
+    return this.loadAllLibs();
+  }
+
+  async clear(): Promise<any> {
+    clearMockWindow();
+  }
+}
+
+export const LibsComp = withPropertyViewFn(LibsCompBase, (comp) => {
+  useEffect(() => {
+    comp.loadAllLibs();
+  }, [comp.getView().length]);
+  return (
+    <ScrollBar style={{ height: "295px" }}>
+      {comp.getAllLibs().length === 0 && (
+        <EmptyContent text={trans("preLoad.jsLibraryEmptyContent")} style={{ margin: "0 16px" }} />
+      )}
+      <JSLibraryTree
+        mode={"column"}
+        libs={comp
+          .getView()
+          .map((i) => ({
+            url: i.getView(),
+            deletable: true,
+            exportedAs: comp.globalVars[i.getView()]?.[0],
+          }))
+          .concat(
+            comp.externalLibs.map((l) => ({
+              url: l,
+              deletable: false,
+              exportedAs: comp.globalVars[l]?.[0],
+            }))
+          )}
+        onDelete={(idx) => {
+          comp.dispatch(comp.deleteAction(idx));
+        }}
+      />
+    </ScrollBar>
+  );
+});
+
+export class ScriptComp extends CodeTextControl implements RunAndClearable<string> {
+  runInHost: boolean = false;
+
+  runPreloadScript() {
+    const code = this.getView();
+    if (!code) {
+      return;
+    }
+    // Import runScript from utils to avoid circular dependency
+    const { runScript } = require("./utils");
+    runScript(code, this.runInHost);
+  }
+
+  async run(id: string, externalScript: string = "", runInHost: boolean = false) {
+    this.runInHost = runInHost;
+    if (externalScript) {
+      const { runScript } = require("./utils");
+      runScript(externalScript, runInHost);
+    }
+    this.runPreloadScript();
+  }
+
+  async clear(): Promise<any> {
+    clearMockWindow();
+  }
+}
+
+export class CSSComp extends CodeTextControl implements RunAndClearable<string> {
+  id = "";
+  externalCSS: string = "";
+
+  async applyAllCSS() {
+    const css = this.getView();
+    evalStyle(this.id, [this.externalCSS, css]);
+  }
+
+  async run(id: string, externalCSS: string = "") {
+    this.id = id;
+    this.externalCSS = externalCSS;
+    return this.applyAllCSS();
+  }
+
+  async clear() {
+    clearStyleEval(this.id);
+  }
+}
+
+export class GlobalCSSComp extends CodeTextControl implements RunAndClearable<string> {
+  id = "";
+  externalCSS: string = "";
+
+  async applyAllCSS() {
+    const css = this.getView();
+    evalStyle(this.id, [this.externalCSS, css], true);
+  }
+
+  async run(id: string, externalCSS: string = "") {
+    this.id = id;
+    this.externalCSS = externalCSS;
+    return this.applyAllCSS();
+  }
+
+  async clear() {
+    clearStyleEval(this.id);
+  }
+} 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/index.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/index.ts
new file mode 100644
index 0000000000..15c3985569
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/index.ts
@@ -0,0 +1,43 @@
+// Main component
+export { PreloadComp } from "./preLoadComp";
+
+// Component classes
+export { LibsComp, ScriptComp, CSSComp, GlobalCSSComp } from "./components";
+
+// UI Components
+export { PreloadConfigModal } from "./preloadConfigModal";
+export { ActionInputSection } from "./actionInputSection";
+export { JavaScriptTabPane, CSSTabPane } from "./tabPanes";
+
+// Types and interfaces
+export type { 
+  ExternalPreload, 
+  RunAndClearable, 
+  ComponentActionState,
+  ActionConfig,
+  ActionExecuteParams,
+  ActionCategory,
+  ActionRegistry
+} from "./types";
+export { TabKey } from "./types";
+
+// Action configurations
+export { 
+  actionRegistry, 
+  getAllActionItems, 
+  actionCategories 
+} from "./actionConfigs";
+
+// Styled components
+export { 
+  CustomDropdown, 
+  AddJSLibraryButton, 
+  JSLibraryWrapper 
+} from "./styled";
+
+// Utility functions
+export { 
+  runScript, 
+  generateComponentActionItems, 
+  getComponentCategories 
+} from "./utils"; 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/preLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/preLoadComp/preLoadComp.tsx
new file mode 100644
index 0000000000..be106608c0
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/preLoadComp.tsx
@@ -0,0 +1,69 @@
+import { MultiCompBuilder } from "comps/generators";
+import { BaseSection, PlusIcon } from "lowcoder-design";
+import React from "react";
+import { getGlobalSettings } from "comps/utils/globalSettings";
+import { trans } from "i18n";
+import { JSLibraryModal } from "components/JSLibraryModal";
+import { LibsComp, ScriptComp, CSSComp, GlobalCSSComp } from "./components";
+import { PreloadConfigModal } from "./preloadConfigModal";
+import { AddJSLibraryButton, JSLibraryWrapper } from "./styled";
+import { ActionInputSection } from "./actionInputSection";
+
+const childrenMap = {
+  libs: LibsComp,
+  script: ScriptComp,
+  css: CSSComp,
+  globalCSS: GlobalCSSComp,
+};
+
+const PreloadCompBase = new MultiCompBuilder(childrenMap, () => {})
+  .setPropertyViewFn((children) => <PreloadConfigModal {...children} />)
+  .build();
+
+export class PreloadComp extends PreloadCompBase {
+  async clear() {
+    return Promise.allSettled(Object.values(this.children).map((i) => i.clear()));
+  }
+
+  async run(id: string) {
+    const { orgCommonSettings = {} } = getGlobalSettings();
+    const { preloadCSS, preloadGlobalCSS, preloadJavaScript, preloadLibs, runJavaScriptInHost } = orgCommonSettings;
+    await this.children.css.run(id, preloadCSS || "");
+    await this.children.globalCSS.run('body', preloadGlobalCSS || "");
+    await this.children.libs.run(id, preloadLibs || [], !!runJavaScriptInHost);
+    await this.children.script.run(id, preloadJavaScript || "", !!runJavaScriptInHost);
+  }
+
+  getJSLibraryPropertyView() {
+    const libs = this.children.libs;
+    return (
+      <>
+        <JSLibraryWrapper>
+          <BaseSection
+            name={trans("preLoad.jsLibrary")}
+            width={288}
+            noMargin
+            style={{
+              borderTop: "1px solid #e1e3eb",
+              backgroundColor: "#fff",
+            }}
+            additionalButton={
+              <AddJSLibraryButton>
+                <JSLibraryModal
+                  runInHost={libs.runInHost}
+                  trigger={<PlusIcon height={"46px"} />}
+                  onCheck={(url) => !libs.getAllLibs().includes(url)}
+                  onLoad={(url) => libs.loadScript(url)}
+                  onSuccess={(url) => libs.dispatch(libs.pushAction(url))}
+                />
+              </AddJSLibraryButton>
+            }
+          >
+            {this.children.libs.getPropertyView()}
+          </BaseSection>
+        </JSLibraryWrapper>
+        <ActionInputSection />
+      </>
+    );
+  }
+} 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/preloadConfigModal.tsx b/client/packages/lowcoder/src/comps/comps/preLoadComp/preloadConfigModal.tsx
new file mode 100644
index 0000000000..b420b240d3
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/preloadConfigModal.tsx
@@ -0,0 +1,60 @@
+import React, { useContext, useState } from "react";
+import { Tabs } from "components/Tabs";
+import { CustomModal } from "lowcoder-design";
+import { ExternalEditorContext } from "util/context/ExternalEditorContext";
+import { trans } from "i18n";
+import { RecordConstructorToComp } from "lowcoder-core";
+import { TabKey } from "./types";
+import { JavaScriptTabPane, CSSTabPane } from "./tabPanes";
+import { ScriptComp, CSSComp, GlobalCSSComp } from "./components";
+
+type ChildrenInstance = RecordConstructorToComp<{
+  libs: any;
+  script: typeof ScriptComp;
+  css: typeof CSSComp;
+  globalCSS: typeof GlobalCSSComp;
+}>;
+
+export function PreloadConfigModal(props: ChildrenInstance) {
+  const [activeKey, setActiveKey] = useState(TabKey.JavaScript);
+  const { showScriptsAndStyleModal, changeExternalState } = useContext(ExternalEditorContext);
+  
+  const tabItems = [
+    {
+      key: TabKey.JavaScript,
+      label: 'JavaScript',
+      children: <JavaScriptTabPane comp={props.script} />
+    },
+    {
+      key: TabKey.CSS,
+      label: 'CSS',
+      children: <CSSTabPane comp={props.css} />
+    },
+    {
+      key: TabKey.GLOBAL_CSS,
+      label: 'Global CSS',
+      children: <CSSTabPane comp={props.globalCSS} isGlobal />
+    },
+  ];
+
+  return (
+    <CustomModal
+      draggable
+      mask={activeKey !== TabKey.CSS}
+      open={showScriptsAndStyleModal}
+      title={trans("preLoad.scriptsAndStyles")}
+      destroyOnHidden
+      onCancel={() => changeExternalState?.({ showScriptsAndStyleModal: false })}
+      showOkButton={false}
+      showCancelButton={false}
+      width="600px"
+    >
+      <Tabs
+        onChange={(k) => setActiveKey(k as TabKey)}
+        style={{ marginBottom: 8, marginTop: 4 }}
+        activeKey={activeKey}
+        items={tabItems}
+      />
+    </CustomModal>
+  );
+} 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/styled.tsx b/client/packages/lowcoder/src/comps/comps/preLoadComp/styled.tsx
new file mode 100644
index 0000000000..ae13c2c3f8
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/styled.tsx
@@ -0,0 +1,32 @@
+import styled from "styled-components";
+import { default as Dropdown } from "antd/es/dropdown";
+
+export const CustomDropdown = styled(Dropdown)`
+  .ant-dropdown-menu-item-icon {
+    width: 14px !important;
+    height: 14px !important; 
+    max-width: 14px !important;
+    overflow: hidden !important;
+    white-space: nowrap;
+    text-overflow: hidden !important;
+  }
+`;
+
+export const AddJSLibraryButton = styled.div`
+  cursor: pointer;
+  margin-right: 16px;
+
+  g g {
+    stroke: #8b8fa3;
+  }
+
+  &:hover {
+    g g {
+      stroke: #222222;
+    }
+  }
+`;
+
+export const JSLibraryWrapper = styled.div`
+  position: relative;
+`; 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/tabPanes.tsx b/client/packages/lowcoder/src/comps/comps/preLoadComp/tabPanes.tsx
new file mode 100644
index 0000000000..a1229a96dc
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/tabPanes.tsx
@@ -0,0 +1,46 @@
+import { HelpText } from "components/HelpText";
+import React, { useEffect } from "react";
+import { trans } from "i18n";
+import { ConstructorToComp } from "lowcoder-core";
+import { ScriptComp, CSSComp } from "./components";
+
+export function JavaScriptTabPane(props: { comp: ConstructorToComp<typeof ScriptComp> }) {
+  useEffect(() => {
+    props.comp.runPreloadScript();
+  }, [props.comp]);
+
+  const codePlaceholder = `window.name = 'Tom';\nwindow.greet = () => "hello world";`;
+
+  return (
+    <>
+      <HelpText style={{ marginBottom: 20 }}>{trans("preLoad.jsHelpText")}</HelpText>
+      {props.comp.propertyView({
+        expandable: false,
+        styleName: "window",
+        codeType: "Function",
+        language: "javascript",
+        placeholder: codePlaceholder,
+      })}
+    </>
+  );
+}
+
+export function CSSTabPane(props: { comp: CSSComp, isGlobal?: boolean }) {
+  useEffect(() => {
+    props.comp.applyAllCSS();
+  }, [props.comp]);
+
+  const codePlaceholder = `.top-header {\n  background-color: red; \n}`;
+
+  return (
+    <>
+      <HelpText style={{ marginBottom: 20 }}>{trans("preLoad.cssHelpText")}</HelpText>
+      {props.comp.propertyView({
+        expandable: false,
+        placeholder: codePlaceholder,
+        styleName: "window",
+        language: "css",
+      })}
+    </>
+  );
+} 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/types.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/types.ts
new file mode 100644
index 0000000000..a33f0f8f16
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/types.ts
@@ -0,0 +1,62 @@
+export interface ExternalPreload {
+  css?: string;
+  libs?: string[];
+  script?: string;
+  runJavaScriptInHost?: boolean;
+}
+
+export interface RunAndClearable<T> {
+  run(id: string, externalPreload?: T): Promise<any>;
+  clear(): Promise<any>;
+}
+
+export enum TabKey {
+  JavaScript = "js",
+  CSS = "css",
+  GLOBAL_CSS = "global_css",
+}
+
+export interface ComponentActionState {
+  actionValue: string;
+  selectedActionKey: string | null;
+  placeholderText: string;
+  selectedComponent: string | null;
+  showComponentDropdown: boolean;
+  showEditorComponentsDropdown: boolean;
+  selectedEditorComponent: string | null;
+}
+
+export interface ActionConfig {
+  key: string;
+  label: string;
+  category?: string;
+  requiresComponentSelection?: boolean;
+  requiresEditorComponentSelection?: boolean;
+  requiresInput?: boolean;
+  requiresStyle?: boolean;
+  isNested?: boolean;
+  inputPlaceholder?: string;
+  inputType?: 'text' | 'number' | 'textarea' | 'json';
+  validation?: (value: string) => string | null; 
+  execute: (params: ActionExecuteParams) => Promise<void>;
+}
+
+export interface ActionExecuteParams {
+  actionKey: string;
+  actionValue: string;
+  selectedComponent: string | null;
+  selectedEditorComponent: string | null;
+  selectedNestComponent: string | null;
+  editorState: any;
+}
+
+export interface ActionCategory {
+  key: string;
+  label: string;
+  actions: ActionConfig[];
+}
+
+export interface ActionRegistry {
+  categories: ActionCategory[];
+  actions: Map<string, ActionConfig>;
+} 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/utils.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/utils.ts
new file mode 100644
index 0000000000..b30f02fb2b
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp/utils.ts
@@ -0,0 +1,139 @@
+import { evalFunc } from "lowcoder-core";
+import { runScriptInHost } from "util/commonUtils";
+import log from "loglevel";
+import { UICompCategory, UICompManifest, uiCompCategoryNames, uiCompRegistry } from "comps/uiCompRegistry";
+import { MenuProps } from "antd/es/menu";
+import React from "react";
+import { EditorState } from "@lowcoder-ee/comps/editorState";
+
+export function runScript(code: string, inHost?: boolean) {
+  if (inHost) {
+    runScriptInHost(code);
+    return;
+  }
+  try {
+    evalFunc(code, {}, {});
+  } catch (e) {
+    log.error(e);
+  }
+}
+
+export function generateComponentActionItems(categories: Record<string, [string, UICompManifest][]>) {
+  const componentItems: MenuProps['items'] = [];
+  
+  Object.entries(categories).forEach(([categoryKey, components]) => {
+    if (components.length) {
+      componentItems.push({
+        label: uiCompCategoryNames[categoryKey as UICompCategory],
+        key: `category-${categoryKey}`,
+        disabled: true,
+        style: { fontWeight: 'bold', color: '#666' }
+      });
+      
+      components.forEach(([compName, manifest]) => {
+        componentItems.push({
+          label: manifest.name,
+          key: `comp-${compName}`,
+          icon: React.createElement(manifest.icon, { width: 14, height: 14 })
+        });
+      });
+    }
+  });
+
+  return componentItems;
+}
+
+export function getComponentCategories() {
+  const cats: Record<string, [string, UICompManifest][]> = Object.fromEntries(
+    Object.keys(uiCompCategoryNames).map((cat) => [cat, []])
+  );
+  Object.entries(uiCompRegistry).forEach(([name, manifest]) => {
+    manifest.categories.forEach((cat) => {
+      cats[cat].push([name, manifest]);
+    });
+  });
+  return cats;
+} 
+export function getEditorComponentInfo(editorState: EditorState, componentName: string): {
+  componentKey: string | null;
+  currentLayout: any;
+  simpleContainer: any;
+  componentType?: string | null;
+  items: any;
+} | null {
+  try {
+    // Get the UI component container
+    if (!editorState || !componentName) {
+      return null;
+    }
+
+    const uiComp = editorState.getUIComp();
+    const container = uiComp.getComp();
+    if (!container) {
+      return null;
+    }
+
+    const uiCompTree = uiComp.getTree();
+
+    // Get the simple container (the actual grid container)
+    const simpleContainer = container.realSimpleContainer();
+    if (!simpleContainer) {
+      return null;
+    }
+
+    // Get current layout and items
+    const currentLayout = simpleContainer.children.layout.getView();
+    const items = getCombinedItems(uiCompTree);
+
+    // Find the component by name and get its key
+    let componentKey: string | null = null;
+    let componentType: string | null = null;
+
+    for (const [key, item] of Object.entries(items)) {
+      if ((item as any).children.name.getView() === componentName) {
+        componentKey = key;
+        componentType = (item as any).children.compType.getView();
+        break
+      }
+    }
+
+    return {
+      componentKey,
+      currentLayout,
+      simpleContainer,
+      componentType,
+      items,
+    };  
+  } catch(error) {
+    console.error('Error getting editor component key:', error);
+    return null;
+  }
+}
+
+interface Container {
+  items?: Record<string, any>; 
+}
+
+function getCombinedItems(uiCompTree: any) {
+  const combined: Record<string, any> = {};
+
+  if (uiCompTree.items) {
+    Object.entries(uiCompTree.items).forEach(([itemKey, itemValue]) => {
+      combined[itemKey] = itemValue;
+    });
+  }
+
+  if (uiCompTree.children) {
+    Object.entries(uiCompTree.children).forEach(([parentKey, container]) => {
+      const typedContainer = container as Container; 
+      if (typedContainer.items) {
+        Object.entries(typedContainer.items).forEach(([itemKey, itemValue]) => {
+          itemValue.parentContainer = parentKey;
+          combined[itemKey] = itemValue;
+        });
+      }
+    });
+  }
+
+  return combined;
+}
diff --git a/client/packages/lowcoder/src/comps/comps/rootComp.tsx b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
index 58ef58d15b..50fe1229ed 100644
--- a/client/packages/lowcoder/src/comps/comps/rootComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
@@ -82,7 +82,7 @@ const RootView = React.memo((props: RootViewProps) => {
     localDefaultTheme;
   
   const themeId = selectedTheme ? selectedTheme.id : (
-    previewTheme ? "preview-theme" : 'default-theme-id'
+    previewTheme?.previewTheme ? "preview-theme" : 'default-theme-id'
   ); 
 
   useEffect(() => {
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
index 925e9d0212..8380c56722 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
@@ -14,7 +14,7 @@ import { SelectInputInvalidConfig, useSelectInputValidate } from "./selectInputC
 
 import { PaddingControl } from "../../controls/paddingControl";	
 import { MarginControl } from "../../controls/marginControl";
-import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
+import { migrateOldData } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 
 let MultiSelectBasicComp = (function () {
@@ -35,6 +35,10 @@ let MultiSelectBasicComp = (function () {
       validateState,
       handleChange,
     ] = useSelectInputValidate(props);
+
+    const removeIllegalEntries = () => {
+      return props.value.value.filter?.((v) => valueSet.has(v))
+    }
     
     return props.label({
       required: props.required,
@@ -45,8 +49,8 @@ let MultiSelectBasicComp = (function () {
       children: (
         <SelectUIView
           {...props}
-          mode={"multiple"}
-          value={props.value.value.filter?.((v) => valueSet.has(v))}
+          mode={props.allowCustomTags ? "tags" : "multiple"}
+          value={props.allowCustomTags ? props.value.value : removeIllegalEntries()}
           onChange={handleChange}
           dispatch={dispatch}
         />
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index 0da2dce212..a5d55ca935 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -76,7 +76,8 @@ export const getStyle = (
       padding: ${style.padding};	
       height: auto;	
     }	
-    .ant-select-selection-search {	
+    .ant-select-selection-search {
+      min-width: 50px; 	
       padding: ${style.padding};
     }	
     .ant-select-selection-search-input,
@@ -268,9 +269,10 @@ export const SelectUIView = (
     placeholder={props.placeholder}
     value={props.value}
     showSearch={props.showSearch}
-    filterOption={(input, option) =>
-      option?.label.toLowerCase().includes(input.toLowerCase())
-    }
+    filterOption={(input, option) => {
+      if (!option) return false;
+      return String(option.label ?? option.value ?? "").toLowerCase().includes(input.toLowerCase());
+    }}
     popupRender={(originNode: ReactNode) => (
       <DropdownStyled $style={props.childrenInputFieldStyle as ChildrenMultiSelectStyleType}>
         {originNode}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx
index 75f275c3ca..290f3628d5 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx
@@ -19,6 +19,7 @@ import { blurMethod, focusWithOptions } from "comps/utils/methodUtils";
 export const SelectInputValidationChildren = {
   required: BoolControl,
   showValidationWhenEmpty: BoolControl,
+  allowCustomTags: BoolControl,
   customRule: CustomRuleControl,
 };
 type ValidationComp = RecordConstructorToComp<typeof SelectInputValidationChildren>;
@@ -126,6 +127,9 @@ export const SelectInputValidationSection = (children: ValidationComp) => (
     {children.showValidationWhenEmpty.propertyView({
       label: trans("prop.showEmptyValidation"),
     })}
+    {children.allowCustomTags.propertyView({
+      label: trans("prop.customTags") 
+    })}
     {children.customRule.propertyView({})}
   </Section>
 );
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
index ca24b74924..9fcfaa6216 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -5,7 +5,7 @@ import { stringExposingStateControl, numberExposingStateControl } from "comps/co
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { StepOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
-import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator, AnimationStyle, AnimationStyleType } from "comps/controls/styleControlConstants";
+import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator, AnimationStyle, AnimationStyleType, DisabledStepStyle, DisabledStepStyleType } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
@@ -98,11 +98,12 @@ const StepsChildrenMap = {
   animationStyle: styleControl(AnimationStyle ,'animationStyle' ),
   showScrollBars: withDefault(BoolControl, false),
   minHorizontalWidth: withDefault(RadiusControl, ''),
+  disabledStyle: styleControl(DisabledStepStyle, 'disabledStyle'),
 };
 
 let StepControlBasicComp = (function () {
   return new UICompBuilder(StepsChildrenMap, (props) => {
-    const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>`
+    const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType, $disabledStyle: DisabledStepStyleType }>`
     ${props=>props.$animationStyle}
       height: 100%;
       overflow-y: scroll;
@@ -124,6 +125,30 @@ let StepControlBasicComp = (function () {
       border: ${props.style.borderWidth} solid ${props.style.border};
       border-radius: ${props.style.radius};
       ${getBackgroundStyle(props.style)}
+      /* Disabled step styles */
+      .ant-steps-item-disabled {
+        .ant-steps-item-icon {
+          background: ${(props) => props.$disabledStyle?.disabledBackground};
+          border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+
+          /* When using icon as dot */
+          .ant-steps-icon-dot {
+            background: ${(props) => props.$disabledStyle?.disabledBackground};
+          }
+
+          /* Default icon or custom icon */
+          .ant-steps-icon,
+          > * {
+            color: ${(props) => props.$disabledStyle?.disabledText};
+          }
+        }
+
+        .ant-steps-item-title,
+        .ant-steps-item-subtitle,
+        .ant-steps-item-description {
+          color: ${(props) => props.$disabledStyle?.disabledText};
+        }
+      }
       .ant-steps-item { padding-top: 5px !important; }
       .ant-steps.ant-steps-label-vertical.ant-steps-small .ant-steps-item-icon { margin-top: 17px !important; }
       .ant-steps.ant-steps-label-vertical.ant-steps-default .ant-steps-item-icon { margin-top: 12px !important; }
@@ -172,7 +197,7 @@ let StepControlBasicComp = (function () {
               }
             }}
           >
-          <StyledWrapper style={props.style} $animationStyle={props.animationStyle}>
+          <StyledWrapper style={props.style} $animationStyle={props.animationStyle} $disabledStyle={props.disabledStyle}>
           <ScrollBar
             style={{
               height: props.autoHeight ? "auto" : "100%",
@@ -281,6 +306,9 @@ let StepControlBasicComp = (function () {
           <Section name={sectionNames.animationStyle} hasTooltip={true}>
             {children.animationStyle.getPropertyView()}
           </Section>
+          <Section name={trans("prop.disabledStyle")}>
+            {children.disabledStyle.getPropertyView()}
+          </Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx
index 8ec51c6a1a..f9bedc7549 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx
@@ -16,10 +16,11 @@ import { ToViewReturn } from "@lowcoder-ee/comps/generators/multi";
 import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
 import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
 import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
+import { isArray } from "lodash";
 
 export const fixOldActionData = (oldData: any) => {
   if (!oldData) return oldData;
-  if (Boolean(oldData.onClick)) {
+  if (Boolean(oldData.onClick && !isArray(oldData.onClick))) {
     return {
       ...oldData,
       onClick: [{
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index 73fa06c0da..86124c921c 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -407,7 +407,8 @@ class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContai
           },
         } as CompAction;
       }
-      if (value.type === "delete" && this.children.tabs.getView().length <= 1) {
+      const { path } = action;
+      if (value.type === "delete" && path[0] === 'tabs' && this.children.tabs.getView().length <= 1) {
         messageInstance.warning(trans("tabbedContainer.atLeastOneTabError"));
         // at least one tab
         return this;
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index cfbdfe0428..0a3ca6bf63 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -1,7 +1,7 @@
 import { Input, Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants";
 import {
   NameConfig,
   NameConfigPlaceHolder,
@@ -42,10 +42,22 @@ import { EditorContext } from "comps/editorState";
  * Input Comp
  */
 
-const InputStyle = styled(Input)<{$style: InputLikeStyleType}>`
+const InputStyle = styled(Input)<{
+  $style: InputLikeStyleType;
+  $disabledStyle?: DisabledInputStyleType;
+}>`
   box-shadow: ${(props) =>
     `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
+  
+  /* Disabled state styling */
+  &:disabled,
+  &.ant-input-disabled {
+    color: ${(props) => props.$disabledStyle?.disabledText};
+    background: ${(props) => props.$disabledStyle?.disabledBackground};
+    border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+    cursor: not-allowed;
+  }
 `;
 
 const childrenMap = {
@@ -59,6 +71,7 @@ const childrenMap = {
   suffixIcon: IconControl,
   inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle'),
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+  disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
   tabIndex: NumberControl,
 };
 
@@ -73,6 +86,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
         showCount={props.showCount}
         allowClear={props.allowClear}
         $style={props.inputFieldStyle}
+        $disabledStyle={props.disabledStyle}
         prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
         suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
         tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
@@ -114,6 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
             <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
+            <Section name={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
             <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
           </>
         )}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index 4347043874..4b9cf56389 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -26,7 +26,7 @@ import {
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import { styleControl } from "comps/controls/styleControl";
 import styled from "styled-components";
-import {  AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants";
 import {
   hiddenPropertyView,
   minLengthPropertyView,
@@ -46,10 +46,19 @@ import { NumberControl } from "comps/controls/codeControl";
 
 const PasswordStyle = styled(InputPassword)<{
   $style: InputLikeStyleType;
+  $disabledStyle?: DisabledInputStyleType;
 }>`
   box-shadow: ${(props) =>
     `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
+  
+  /* Disabled state styling */
+  &:disabled,
+  &.ant-input-disabled {
+    color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
+    background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+    cursor: not-allowed;
+  }
 `;
 
 let PasswordTmpComp = (function () {
@@ -64,6 +73,7 @@ let PasswordTmpComp = (function () {
     labelStyle: styleControl(LabelStyle,'labelStyle'),
     inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), 
     animationStyle: styleControl(AnimationStyle , 'animationStyle'),
+    disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
     tabIndex: NumberControl,
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
@@ -78,6 +88,7 @@ let PasswordTmpComp = (function () {
           ref={props.viewRef}
           visibilityToggle={props.visibilityToggle}
           $style={props.inputFieldStyle}
+          $disabledStyle={props.disabledInputStyle}
           tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
         />
       ),
@@ -124,6 +135,7 @@ let PasswordTmpComp = (function () {
               <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
               <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
               <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
+              <Section name={trans("prop.disabledStyle")}>{children.disabledInputStyle.getPropertyView()}</Section>
               <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
             </>
           )}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index c8a7582eb8..049d5d88d7 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -22,7 +22,7 @@ import {
 import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
 import { styleControl } from "comps/controls/styleControl";
 import styled from "styled-components";
-import {  AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants";
 import { TextArea } from "components/TextArea";
 import {
   allowClearPropertyView,
@@ -41,10 +41,20 @@ import { migrateOldData } from "comps/generators/simpleGenerators";
 
 const TextAreaStyled = styled(TextArea)<{
   $style: InputLikeStyleType;
+  $disabledStyle?: DisabledInputStyleType;
 }>`
   box-shadow: ${(props) =>
     `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
+  
+  /* Disabled state styling */
+  &:disabled,
+  &.ant-input-disabled {
+    color: ${(props) => props.$disabledStyle?.disabledText};
+    background: ${(props) => props.$disabledStyle?.disabledBackground};
+    border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+    cursor: not-allowed;
+  }
 `;
 
 const Wrapper = styled.div<{
@@ -82,6 +92,7 @@ let TextAreaTmpComp = (function () {
     textAreaScrollBar: withDefault(BoolControl, false),
     inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
     animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+    disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
     tabIndex: NumberControl
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -98,6 +109,7 @@ let TextAreaTmpComp = (function () {
             allowClear={props.allowClear}
             style={{ height: "100% !important", resize: "vertical" }}
             $style={props.inputFieldStyle}
+            $disabledStyle={props.disabledStyle}
             tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
           />
         </Wrapper>
@@ -141,6 +153,7 @@ let TextAreaTmpComp = (function () {
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
             <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
+            <Section name={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
             <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
           </>
         )}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
index fc25e03e75..bacb892bd8 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
@@ -11,7 +11,7 @@ import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { LabelControl } from "comps/controls/labelControl";
 import { InputLikeStyleType, LabelStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { Section, sectionNames, ValueFromOption } from "lowcoder-design";
-import { fromPairs } from "lodash";
+import { debounce, fromPairs } from "lodash";
 import { css } from "styled-components";
 import { EMAIL_PATTERN, URL_PATTERN } from "util/stringUtils";
 import { MultiBaseComp, RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
@@ -33,7 +33,7 @@ import {
   showDataLoadingIndicatorsPropertyView,
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { ChangeEvent, useEffect, useMemo, useRef, useState } from "react";
 import { refMethods } from "comps/generators/withMethodExposing";
 import { InputRef } from "antd/es/input";
 import {
@@ -199,7 +199,6 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
         },
       })
     );
-    propsRef.current.onEvent("change");
     changeRef.current = false;
   }, [localInputValue]);
 
@@ -216,11 +215,13 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
     );
   }, [props.customRule])
 
-  const onChangeRef = useRef(
-    (value: string) => {
-      props.value.onChange(value);
-    }
+  const debouncedOnChangeRef = useRef(
+    debounce(function (value: string, valueCtx: any) {
+      propsRef.current.value.onChange(value);
+      propsRef.current.onEvent("change");
+    }, 1000)
   );
+  
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
@@ -228,7 +229,7 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
 
     changeRef.current = true;
     touchRef.current = true;
-    onChangeRef.current?.(value);
+    debouncedOnChangeRef.current?.(value, propsRef.current.value);
   };
 
   // Cleanup refs on unmount
@@ -237,7 +238,7 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
       changeRef.current = false;
       touchRef.current = false;
       propsRef.current = null as any;
-      onChangeRef.current = null as any;
+      debouncedOnChangeRef.current.cancel();
     };
   }, []);
 
@@ -314,8 +315,23 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType)
       }
 
       &::-webkit-input-placeholder {
-        color: ${style.text};
-        opacity: 0.4;
+        color: ${style.placeholder};
+        opacity: 1;
+      }
+
+      &::-moz-placeholder {
+        color: ${style.placeholder};
+        opacity: 1;
+      }
+
+      &:-ms-input-placeholder {
+        color: ${style.placeholder};
+        opacity: 1;
+      }
+
+      &::placeholder {
+        color: ${style.placeholder};
+        opacity: 1;
       }
 
       .ant-input-show-count-suffix,
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 92b64b7eb4..176afbbfc9 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -244,9 +244,14 @@ export type DepColorConfig = CommonColorConfig & {
   transformer: (color: string, ...rest: string[]) => string;
 };
 
+export type PlaceholderConfig = CommonColorConfig & {
+  readonly placeholder?: string;
+};
+
 export type SingleColorConfig =
   | SimpleColorConfig
   | DepColorConfig
+  | PlaceholderConfig
   | RadiusConfig
   | BorderWidthConfig
   | RotationConfig
@@ -959,11 +964,101 @@ function replaceAndMergeMultipleStyles(
   return temp;
 }
 
+// Add disabled style constants
+const DISABLED_BACKGROUND = {
+  name: "disabledBackground",
+  label: trans("style.disabledBackground"),
+  color: SECOND_SURFACE_COLOR,
+} as const;
+
+
+
+const DISABLED_TEXT = {
+  name: "disabledText",
+  label: trans("style.disabledText"),
+  depName: "disabledBackground",
+  depType: DEP_TYPE.CONTRAST_TEXT,
+  transformer: (color: string) => lightenColor(color, 0.8),
+} as const;
+
+
+export const DISABLED_BORDER = {
+  name: "disabledBorder",
+  label: trans("style.disabledBorder"),
+  color: SECOND_SURFACE_COLOR,
+} as const;
+
+export const DISABLED_STYLE_FIELDS = [
+  DISABLED_BACKGROUND,
+  DISABLED_TEXT,
+  DISABLED_BORDER,
+] as const;
+
+// Add disabled style constants specifically for slider components
+const DISABLED_SLIDER_FILL = {
+  name: "disabledFill",
+  label: trans("style.disabledFill"),
+  depName: "fill",
+  transformer: (color: string) => lightenColor(color, 0.8),
+} as const;
+
+const DISABLED_SLIDER_TRACK = {
+  name: "disabledTrack",
+  label: trans("style.disabledTrack"),
+  depName: "track",
+  transformer: (color: string) => lightenColor(color, 0.8),
+} as const;
+
+const DISABLED_SLIDER_THUMB = {
+  name: "disabledThumb",
+  label: trans("style.disabledThumb"),
+  depName: "thumb",
+  transformer: (color: string) => lightenColor(color, 0.8),
+} as const;
+
+const DISABLED_SLIDER_THUMB_BORDER = {
+  name: "disabledThumbBorder",
+  label: trans("style.disabledThumbBorder"),
+  depName: "thumbBorder",
+  transformer: (color: string) => lightenColor(color, 0.8),
+} as const;
+
+// Re-export for reuse in slider components
+export const DISABLED_SLIDER_STYLE_FIELDS = [
+  DISABLED_SLIDER_FILL,
+  DISABLED_SLIDER_TRACK,
+] as const;
+
+// Helper to quickly create a component-specific disabled style list by
+// extending the two generic disabled tokens above.
+export const withDisabled = <Extra extends readonly SingleColorConfig[] = []>(
+  extra: Extra = [] as unknown as Extra,
+) => [...DISABLED_STYLE_FIELDS, ...extra] as const;
+
+
+export const withDisabledSlider = <Extra extends readonly SingleColorConfig[] = []>(
+  extra: Extra = [] as unknown as Extra,
+) => [...DISABLED_SLIDER_STYLE_FIELDS, ...extra] as const;
+
+
+export const DisabledSliderStyle = withDisabledSlider();
+
 export const ButtonStyle = [
   getBackground('primary'),
-  ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='lineHeight'),
+  ...STYLING_FIELDS_SEQUENCE,
 ] as const;
 
+// Create separate disabled style control
+export const DisabledButtonStyle = withDisabled();
+
+
+// For input components 
+export const DisabledInputStyle = withDisabled();
+
+// for step control
+export const DisabledStepStyle = withDisabled();
+
+
 export const DropdownStyle = [
   getBackground(),
   ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
@@ -1217,14 +1312,24 @@ export const SliderStyle = [
   PADDING,
 ] as const;
 
+
+const PLACEHOLDER = {
+  name: "placeholder",
+  label: "Placeholder",
+  depName: "text",
+  transformer: (color: string) => lightenColor(color, 0.4),
+} as const;
+
 export const InputLikeStyle = [
   getStaticBackground(SURFACE_COLOR),
   BOXSHADOW,
   BOXSHADOWCOLOR,
   ...STYLING_FIELDS_SEQUENCE.filter((style)=>style.name!=='rotation' && style.name!=='lineHeight'),
+  PLACEHOLDER,
   ...ACCENT_VALIDATE,
 ] as const;
 
+
 // added by Mousheng
 
 export const ColorPickerStyle = [
@@ -1786,6 +1891,7 @@ export const DateTimeStyle = [
   ...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
   getStaticBorder(SECOND_SURFACE_COLOR),
   TEXT,
+  PLACEHOLDER,
   MARGIN,
   PADDING,
   BORDER_STYLE,
@@ -2290,6 +2396,9 @@ export type InputFieldStyleType = StyleConfigType<typeof InputFieldStyle>;
 export type SignatureContainerStyleType = StyleConfigType<typeof SignatureContainerStyle>;
 export type ColorPickerStyleType = StyleConfigType<typeof ColorPickerStyle>;
 export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
+export type DisabledButtonStyleType = StyleConfigType<typeof DisabledButtonStyle>;
+export type DisabledInputStyleType = StyleConfigType<typeof DisabledInputStyle>;
+export type DisabledStepStyleType = StyleConfigType<typeof DisabledStepStyle>;
 export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
 export type TextStyleType = StyleConfigType<typeof TextStyle>;
 export type TextContainerStyleType = StyleConfigType<typeof TextContainerStyle>;
@@ -2305,6 +2414,7 @@ export type ContainerFooterStyleType = StyleConfigType<
   typeof ContainerFooterStyle
 >;
 export type SliderStyleType = StyleConfigType<typeof SliderStyle>;
+export type DisabledSliderStyleType = StyleConfigType<typeof DisabledSliderStyle>;
 export type RatingStyleType = StyleConfigType<typeof RatingStyle>;
 export type SwitchStyleType = StyleConfigType<typeof SwitchStyle>;
 export type SelectStyleType = StyleConfigType<typeof SelectStyle>;
@@ -2436,3 +2546,4 @@ export function marginCalculator(margin: string) {
 }
 
 export type {ThemeDetail};
+
diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
index 8a4e540a19..c7e0c9b3f6 100644
--- a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
@@ -217,8 +217,9 @@ const DrawerView = React.memo((
     body: {
       padding: 0,
       background: props.style.background
-    }
-  }), [props.style.background]);
+    },
+    mask: props.showMask ? undefined : { background: "transparent" }
+  }), [props.style.background, props.showMask]);
 
   const rootStyle = useMemo(() => 
     props.visible.value ? { overflow: "auto", pointerEvents: "auto" } : {},
@@ -232,7 +233,7 @@ const DrawerView = React.memo((
           resizable={resizable}
           onResizeStop={onResizeStop}
           rootStyle={rootStyle as any}
-          styles={drawerStyles}
+          styles={drawerStyles as any}
           title={props.title}
           $titleAlign={props.titleAlign}
           $drawerScrollbar={props.drawerScrollbar}
@@ -248,7 +249,7 @@ const DrawerView = React.memo((
           afterOpenChange={afterOpenChange}
           zIndex={Layers.drawer}
           maskClosable={props.maskClosable}
-          mask={props.showMask}
+          mask={true}
           className={clsx(`app-${appID}`, props.className)}
           data-testid={props.dataTestId as string}
         >
diff --git a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
index 5c98ddb89d..933495b5f8 100644
--- a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
@@ -13,7 +13,7 @@ import { CanvasContainerID } from "constants/domLocators";
 import { Layers } from "constants/Layers";
 import { HintPlaceHolder, Modal, Section, sectionNames } from "lowcoder-design";
 import { trans } from "i18n";
-import { changeChildAction } from "lowcoder-core";
+import { changeChildAction, DispatchType, RecordConstructorToComp } from "lowcoder-core";
 import { CSSProperties, useCallback, useEffect, useMemo, useRef } from "react";
 import { ResizeHandle } from "react-resizable";
 import styled, { css } from "styled-components";
@@ -26,6 +26,10 @@ import { SliderControl } from "../controls/sliderControl";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
 import clsx from "clsx";
 import { useApplicationId } from "util/hooks";
+import React from "react";
+import { ToViewReturn } from "../generators/multi";
+import { NewChildren } from "../generators/uiCompBuilder";
+import { SimpleContainerComp } from "../comps/containerBase/simpleContainerComp";
 
 const EventOptions = [
   { label: trans("modalComp.open"), value: "open", description: trans("modalComp.openDesc") },
@@ -96,199 +100,215 @@ function transToPxSize(size: string | number) {
   return isNumeric(size) ? size + "px" : (size as string);
 }
 
-let TmpModalComp = (function () {
-  return new ContainerCompBuilder(
-    {
-      visible: booleanExposingStateControl("visible"),
-      onEvent: eventHandlerControl(EventOptions),
-      width: StringControl,
-      height: StringControl,
-      horizontalGridCells: SliderControl,
-      autoHeight: AutoHeightControl,
-      title: StringControl,
-      titleAlign: HorizontalAlignmentControl,
-      modalScrollbar: withDefault(BoolControl, false),
-      style: styleControl(ModalStyle),
-      maskClosable: withDefault(BoolControl, true),
-      showMask: withDefault(BoolControl, true),
-      toggleClose:withDefault(BoolControl,true)
-    },
-    (props, dispatch) => {
-      const userViewMode = useUserViewMode();
-      const appID = useApplicationId();
-      const containerRef = useRef<HTMLElement | null>(null);
+type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>> & {
+  container: InstanceType<typeof SimpleContainerComp>
+};
 
-      useEffect(() => {
-        return () => {
-          containerRef.current = null;
-        };
-      }, []);
+const childrenMap = {
+  visible: booleanExposingStateControl("visible"),
+  onEvent: eventHandlerControl(EventOptions),
+  width: StringControl,
+  height: StringControl,
+  horizontalGridCells: SliderControl,
+  autoHeight: AutoHeightControl,
+  title: StringControl,
+  titleAlign: HorizontalAlignmentControl,
+  modalScrollbar: withDefault(BoolControl, false),
+  style: styleControl(ModalStyle),
+  maskClosable: withDefault(BoolControl, true),
+  showMask: withDefault(BoolControl, true),
+  toggleClose:withDefault(BoolControl,true)
+};
 
-      // Memoize body style
-      const bodyStyle = useMemo<CSSProperties>(() => ({ 
-        padding: 0,
-        overflow: props.autoHeight ? undefined : "hidden auto"
-      }), [props.autoHeight]);
+const ModalPropertyView = React.memo((props: {
+  children: ChildrenType
+}) => {
+  return (
+  <>
+    <Section name={sectionNames.basic}>
+      {props.children.title.propertyView({ label: trans("modalComp.title") })}
+      {props.children.title.getView() && props.children.titleAlign.propertyView({ label: trans("modalComp.titleAlign"), radioButton: true })}
+      {props.children.horizontalGridCells.propertyView({
+        label: trans('prop.horizontalGridCells'),
+      })}
+      {props.children.autoHeight.getPropertyView()}
+      {!props.children.autoHeight.getView() && 
+        props.children.modalScrollbar.propertyView({
+          label: trans("prop.modalScrollbar")
+        })}
+      {!props.children.autoHeight.getView() &&
+        props.children.height.propertyView({
+          label: trans("modalComp.modalHeight"),
+          tooltip: trans("modalComp.modalHeightTooltip"),
+          placeholder: DEFAULT_HEIGHT + "",
+        })}
+      {props.children.width.propertyView({
+        label: trans("modalComp.modalWidth"),
+        tooltip: trans("modalComp.modalWidthTooltip"),
+        placeholder: DEFAULT_WIDTH,
+      })}
+      {props.children.maskClosable.propertyView({
+        label: trans("prop.maskClosable"),
+      })}
+      {props.children.showMask.propertyView({
+        label: trans("prop.showMask"),
+      })}
+      {props.children.toggleClose.propertyView({
+        label: trans("prop.toggleClose"),
+      })}
+    </Section>
+    <Section name={sectionNames.interaction}>{props.children.onEvent.getPropertyView()}</Section>
+    <Section name={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
+  </>
+)});
 
-      // Memoize width and height
-      const width = useMemo(() => 
-        transToPxSize(props.width || DEFAULT_WIDTH),
-        [props.width]
-      );
+const ModalView = React.memo((
+  props: ToViewReturn<ChildrenType> & { dispatch: DispatchType }
+) => {
+  const userViewMode = useUserViewMode();
+  const appID = useApplicationId();
+  const containerRef = useRef<HTMLElement | null>(null);
 
-      const height = useMemo(() => 
-        !props.autoHeight ? transToPxSize(props.height || DEFAULT_HEIGHT) : undefined,
-        [props.autoHeight, props.height]
-      );
+  useEffect(() => {
+    return () => {
+      containerRef.current = null;
+    };
+  }, []);
 
-      // Memoize resize handles
-      const resizeHandles = useMemo<ResizeHandle[]>(() => {
-        if (userViewMode) return [];
-        const handles: ResizeHandle[] = ["w", "e"];
-        if (!props.autoHeight) {
-          handles.push("s");
-        }
-        return handles;
-      }, [userViewMode, props.autoHeight]);
+  // Memoize body style
+  const bodyStyle = useMemo<CSSProperties>(() => ({ 
+    padding: 0,
+    overflow: props.autoHeight ? undefined : "hidden auto"
+  }), [props.autoHeight]);
 
-      // Memoize resize handler
-      const onResizeStop = useCallback(
-        (
-          e: React.SyntheticEvent,
-          node: HTMLElement,
-          size: { width: number; height: number },
-          handle: ResizeHandle
-        ) => {
-          if (["w", "e"].includes(handle)) {
-            dispatch(changeChildAction("width", size.width, true));
-          } else if (["n", "s"].includes(handle)) {
-            dispatch(changeChildAction("height", size.height, true));
-          }
-        },
-        [dispatch]
-      );
+  // Memoize width and height
+  const width = useMemo(() => 
+    transToPxSize(props.width || DEFAULT_WIDTH),
+    [props.width]
+  );
 
-      // Memoize padding values
-      const paddingValues = useMemo(() => {
-        if (!props.style.padding) return [10, 10];
-        const extractedValues = extractMarginValues(props.style);
-        return extractedValues || [10, 10];
-      }, [props.style.padding]);
+  const height = useMemo(() => 
+    !props.autoHeight ? transToPxSize(props.height || DEFAULT_HEIGHT) : undefined,
+    [props.autoHeight, props.height]
+  );
 
-      // Memoize container getter
-      const getContainer = useCallback(() => {
-        containerRef.current = document.querySelector(`#${CanvasContainerID}`) || document.body;
-        return containerRef.current;
-      }, [CanvasContainerID]);
+  // Memoize resize handles
+  const resizeHandles = useMemo<ResizeHandle[]>(() => {
+    if (userViewMode) return [];
+    const handles: ResizeHandle[] = ["w", "e"];
+    if (!props.autoHeight) {
+      handles.push("s");
+    }
+    return handles;
+  }, [userViewMode, props.autoHeight]);
 
-      // Memoize event handlers
-      const handleCancel = useCallback((e: React.MouseEvent) => {
-        if (props.toggleClose) {
-          props.visible.onChange(false);
-        }
-      }, [props.toggleClose, props.visible]);
+  // Memoize resize handler
+  const onResizeStop = useCallback(
+    (
+      e: React.SyntheticEvent,
+      node: HTMLElement,
+      size: { width: number; height: number },
+      handle: ResizeHandle
+    ) => {
+      if (["w", "e"].includes(handle)) {
+        props.dispatch(changeChildAction("width", size.width, true));
+      } else if (["n", "s"].includes(handle)) {
+        props.dispatch(changeChildAction("height", size.height, true));
+      }
+    },
+    [props.dispatch]
+  );
 
-      const handleAfterClose = useCallback(() => {
-        if (props.toggleClose) {
-          props.onEvent("close");
-        }
-      }, [props.toggleClose, props.onEvent]);
+  // Memoize padding values
+  const paddingValues = useMemo(() => {
+    if (!props.style.padding) return [10, 10];
+    const extractedValues = extractMarginValues(props.style);
+    return extractedValues || [10, 10];
+  }, [props.style.padding]);
 
-      const handleAfterOpenChange = useCallback((open: boolean) => {
-        if (open) {
-          props.onEvent("open");
-        }
-      }, [props.onEvent]);
+  // Memoize container getter
+  const getContainer = useCallback(() => {
+    containerRef.current = document.querySelector(`#${CanvasContainerID}`) || document.body;
+    return containerRef.current;
+  }, [CanvasContainerID]);
 
-      // Memoize modal render function
-      const modalRender = useCallback((node: React.ReactNode) => (
-        <ModalStyled $style={props.style} $modalScrollbar={props.modalScrollbar}>
-          {node}
-        </ModalStyled>
-      ), [props.style, props.modalScrollbar]);
+  // Memoize event handlers
+  const handleCancel = useCallback((e: React.MouseEvent) => {
+    if (props.toggleClose) {
+      props.visible.onChange(false);
+    }
+  }, [props.toggleClose, props.visible]);
 
-      return (
-        <BackgroundColorContext.Provider value={props.style.background}>
-          <ModalWrapper>
-            <StyledModal
-              closable={props.toggleClose}
-              height={height}
-              resizeHandles={resizeHandles}
-              onResizeStop={onResizeStop}
-              open={props.visible.value}
-              maskClosable={props.maskClosable}
-              focusTriggerAfterClose={false}
-              getContainer={getContainer}
-              footer={null}
-              styles={{body: bodyStyle}}
-              title={props.title}
-              $titleAlign={props.titleAlign}
-              width={width}
-              onCancel={handleCancel}
-              afterClose={handleAfterClose}
-              afterOpenChange={handleAfterOpenChange}
-              zIndex={Layers.modal}
-              modalRender={modalRender}
-              mask={props.showMask}
-              className={clsx(`app-${appID}`, props.className)}
-              data-testid={props.dataTestId as string}
-              destroyOnHidden
-            >
-              <InnerGrid
-                {...props.container}
-                items={gridItemCompToGridItems(props.container.items)}
-                horizontalGridCells={props.horizontalGridCells}
-                autoHeight={props.autoHeight}
-                minHeight={paddingValues ? DEFAULT_HEIGHT - paddingValues[0] * 2 + "px" : ""}
-                containerPadding={paddingValues ? [paddingValues[0] ?? 0, paddingValues[1] ?? 0] : [24,24]}
-                hintPlaceholder={HintPlaceHolder}
-              />
-            </StyledModal>
-          </ModalWrapper>
-        </BackgroundColorContext.Provider>
-      );
+  const handleAfterClose = useCallback(() => {
+    if (props.toggleClose) {
+      props.onEvent("close");
     }
+  }, [props.toggleClose, props.onEvent]);
+
+  const handleAfterOpenChange = useCallback((open: boolean) => {
+    if (open) {
+      props.onEvent("open");
+    }
+  }, [props.onEvent]);
+
+  // Memoize modal render function
+  const modalRender = useCallback((node: React.ReactNode) => (
+    <ModalStyled $style={props.style} $modalScrollbar={props.modalScrollbar}>
+      {node}
+    </ModalStyled>
+  ), [props.style, props.modalScrollbar]);
+
+  return (
+    <BackgroundColorContext.Provider value={props.style.background}>
+      <ModalWrapper>
+        <StyledModal
+          closable={props.toggleClose}
+          height={height}
+          resizeHandles={resizeHandles}
+          onResizeStop={onResizeStop}
+          open={props.visible.value}
+          maskClosable={props.maskClosable}
+          focusTriggerAfterClose={false}
+          getContainer={() => document.querySelector(`#${CanvasContainerID}`) || document.body}
+          footer={null}
+          styles={{body: bodyStyle}}
+          title={props.title}
+          $titleAlign={props.titleAlign}
+          width={width}
+          onCancel={handleCancel}
+          afterClose={handleAfterClose}
+          afterOpenChange={handleAfterOpenChange}
+          zIndex={Layers.modal}
+          modalRender={modalRender}
+          mask={props.showMask}
+          className={clsx(`app-${appID}`, props.className)}
+          data-testid={props.dataTestId as string}
+          destroyOnHidden
+        >
+          <InnerGrid
+            {...props.container}
+            items={gridItemCompToGridItems(props.container.items)}
+            horizontalGridCells={props.horizontalGridCells}
+            autoHeight={props.autoHeight}
+            minHeight={paddingValues ? DEFAULT_HEIGHT - paddingValues[0] * 2 + "px" : ""}
+            containerPadding={paddingValues ? [paddingValues[0] ?? 0, paddingValues[1] ?? 0] : [24,24]}
+            hintPlaceholder={HintPlaceHolder}
+          />
+        </StyledModal>
+      </ModalWrapper>
+    </BackgroundColorContext.Provider>
+  );
+});
+
+const modalViewFn = (props: ToViewReturn<ChildrenType>, dispatch: DispatchType) => <ModalView {...props} dispatch={dispatch} />
+const modalPropertyViewFn = (children: ChildrenType) => <ModalPropertyView children={children} />
+
+let TmpModalComp = new ContainerCompBuilder(
+    childrenMap,
+    modalViewFn,
   )
-    .setPropertyViewFn((children) => (
-      <>
-        <Section name={sectionNames.basic}>
-          {children.title.propertyView({ label: trans("modalComp.title") })}
-          {children.title.getView() && children.titleAlign.propertyView({ label: trans("modalComp.titleAlign"), radioButton: true })}
-          {children.horizontalGridCells.propertyView({
-            label: trans('prop.horizontalGridCells'),
-          })}
-          {children.autoHeight.getPropertyView()}
-          {!children.autoHeight.getView() && 
-            children.modalScrollbar.propertyView({
-              label: trans("prop.modalScrollbar")
-            })}
-          {!children.autoHeight.getView() &&
-            children.height.propertyView({
-              label: trans("modalComp.modalHeight"),
-              tooltip: trans("modalComp.modalHeightTooltip"),
-              placeholder: DEFAULT_HEIGHT + "",
-            })}
-          {children.width.propertyView({
-            label: trans("modalComp.modalWidth"),
-            tooltip: trans("modalComp.modalWidthTooltip"),
-            placeholder: DEFAULT_WIDTH,
-          })}
-          {children.maskClosable.propertyView({
-            label: trans("prop.maskClosable"),
-          })}
-          {children.showMask.propertyView({
-            label: trans("prop.showMask"),
-          })}
-          {children.toggleClose.propertyView({
-            label: trans("prop.toggleClose"),
-          })}
-        </Section>
-        <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
-      </>
-    ))
-    .build();
-})();
+  .setPropertyViewFn(modalPropertyViewFn)
+  .build();
 
 TmpModalComp = class extends TmpModalComp {
   override autoHeight(): boolean {
diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
index 2395f4f290..b6eb5ad312 100644
--- a/client/packages/lowcoder/src/comps/index.tsx
+++ b/client/packages/lowcoder/src/comps/index.tsx
@@ -193,6 +193,7 @@ import { DrawerComp } from "./hooks/drawerComp";
 import { ModalComp } from "./hooks/modalComp";
 import { defaultCollapsibleContainerData } from "./comps/containerComp/collapsibleContainerComp";
 import { ContainerComp as FloatTextContainerComp } from "./comps/containerComp/textContainerComp";
+import { ChatComp } from "./comps/chatComp";
 
 type Registry = {
   [key in UICompType]?: UICompManifest;
@@ -544,6 +545,7 @@ export var uiCompMap: Registry = {
     categories: ["layout"],
     icon: ResponsiveLayoutCompIcon,
     keywords: trans("uiComp.responsiveLayoutCompKeywords"),
+    isContainer: true,
     comp: ResponsiveLayoutComp,
     withoutLoading: true,
     layoutInfo: {
@@ -559,6 +561,7 @@ export var uiCompMap: Registry = {
     categories: ["layout"],
     icon: PageLayoutCompIcon,
     keywords: trans("uiComp.pageLayoutCompKeywords"),
+    isContainer: true,
     comp: PageLayoutComp,
     withoutLoading: true,
     layoutInfo: {
@@ -576,6 +579,7 @@ export var uiCompMap: Registry = {
     categories: ["layout"],
     icon: ColumnLayoutCompIcon,
     keywords: trans("uiComp.responsiveLayoutCompKeywords"),
+    isContainer: true,
     comp: ColumnLayoutComp,
     withoutLoading: true,
     layoutInfo: {
@@ -591,6 +595,7 @@ export var uiCompMap: Registry = {
     categories: ["layout"],
     icon: SplitLayoutCompIcon,
     keywords: trans("uiComp.splitLayoutCompKeywords"),
+    isContainer: true,
     comp: SplitLayoutComp,
     withoutLoading: true,
     layoutInfo: {
@@ -606,6 +611,7 @@ export var uiCompMap: Registry = {
     categories: ["layout"],
     icon: FloatingTextCompIcon,
     keywords: trans("uiComp.floatTextContainerCompKeywords"),
+    isContainer: true,
     comp: FloatTextContainerComp,
     withoutLoading: true,
     layoutInfo: {
@@ -636,6 +642,7 @@ export var uiCompMap: Registry = {
     categories: ["layout"],
     icon: TabbedContainerCompIcon,
     keywords: trans("uiComp.tabbedContainerCompKeywords"),
+    isContainer: true,
     comp: TabbedContainerComp,
     withoutLoading: true,
     layoutInfo: {
@@ -652,6 +659,7 @@ export var uiCompMap: Registry = {
     categories: ["layout"],
     icon: CollapsibleContainerCompIcon,
     keywords: trans("uiComp.collapsibleContainerCompKeywords"),
+    isContainer: true,
     comp: ContainerComp,
     withoutLoading: true,
     layoutInfo: {
@@ -669,6 +677,7 @@ export var uiCompMap: Registry = {
     categories: ["layout"],
     icon: ContainerCompIcon,
     keywords: trans("uiComp.containerCompKeywords"),
+    isContainer: true,
     comp: ContainerComp,
     withoutLoading: true,
     layoutInfo: {
@@ -686,6 +695,7 @@ export var uiCompMap: Registry = {
     description: trans("uiComp.listViewCompDesc"),
     categories: ["layout"],
     keywords: trans("uiComp.listViewCompKeywords"),
+    isContainer: true,
     comp: ListViewComp,
     layoutInfo: {
       w: 12,
@@ -701,6 +711,7 @@ export var uiCompMap: Registry = {
     description: trans("uiComp.gridCompDesc"),
     categories: ["layout"],
     keywords: trans("uiComp.gridCompKeywords"),
+    isContainer: true,
     comp: GridComp,
     layoutInfo: {
       w: 12,
@@ -718,6 +729,7 @@ export var uiCompMap: Registry = {
     keywords: trans("uiComp.modalCompKeywords"),
     comp: ModalComp,
     withoutLoading: true,
+    isContainer: true,
   },
   drawer: {
     name: trans("uiComp.drawerCompName"),
@@ -728,6 +740,7 @@ export var uiCompMap: Registry = {
     keywords: trans("uiComp.drawerCompKeywords"),
     comp: DrawerComp,
     withoutLoading: true,
+    isContainer: true,
   },
   divider: {
     name: trans("uiComp.dividerCompName"),
@@ -941,6 +954,7 @@ export var uiCompMap: Registry = {
     categories: ["forms"],
     icon: FormCompIcon,
     keywords: trans("uiComp.formCompKeywords"),
+    isContainer: true,
     comp: FormComp,
     withoutLoading: true,
     layoutInfo: {
@@ -1669,6 +1683,19 @@ export var uiCompMap: Registry = {
       h: 20,
     },
   },
+  chat: {
+    name: "Chat",
+    enName: "Chat", 
+    description: "Chat Component",
+    categories: ["collaboration"],
+    icon: CommentCompIcon, // Use existing icon for now
+    keywords: "chat,conversation",
+    comp: ChatComp,
+    layoutInfo: {
+      w: 12,
+      h: 20,
+    },
+  },
 
   // Integration
 
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
index c40cb3cd6a..e47694f963 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
@@ -64,6 +64,7 @@ import {
 import { QueryContext } from "../../util/context/QueryContext";
 import { useFixedDelay } from "../../util/hooks";
 import { JSONObject, JSONValue } from "../../util/jsonTypes";
+import { processCurlData } from "../../util/curlUtils";
 import { BoolPureControl } from "../controls/boolControl";
 import { millisecondsControl } from "../controls/millisecondControl";
 import { paramsMillisecondsControl } from "../controls/paramsControl";
@@ -743,18 +744,42 @@ class QueryListComp extends QueryListTmpComp implements BottomResListComp {
     const name = this.genNewName(editorState);
     const compType = extraInfo?.compType || "js";
     const dataSourceId = extraInfo?.dataSourceId;
+    const curlData = extraInfo?.curlData;
+    console.log("CURL DATA", curlData);
+
+    // Build the basic payload
+    let payload: any = {
+      id: id,
+      name: name,
+      datasourceId: dataSourceId,
+      compType,
+      triggerType: manualTriggerResource.includes(compType) ? "manual" : "automatic",
+      isNewCreate: true,
+      order: Date.now(),
+    };
+
+    // If this is a REST API created from cURL, pre-populate the HTTP query fields
+    if (compType === "restApi" && curlData) {
+      const curlConfig = processCurlData(curlData);
+      if (curlConfig) {
+        payload = {
+          ...payload,
+          comp: {
+            httpMethod: curlConfig.method,
+            path: curlConfig.url,
+            headers: curlConfig.headers,
+            params: curlConfig.params,
+            bodyType: curlConfig.bodyType,
+            body: curlConfig.body,
+            bodyFormData: curlConfig.bodyFormData,
+          },
+        };
+      }
+    }
 
     this.dispatch(
       wrapActionExtraInfo(
-        this.pushAction({
-          id: id,
-          name: name,
-          datasourceId: dataSourceId,
-          compType,
-          triggerType: manualTriggerResource.includes(compType) ? "manual" : "automatic",
-          isNewCreate: true,
-          order: Date.now(),
-        }),
+        this.pushAction(payload),
         {
           compInfos: [
             {
diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
index 4c320de479..6e2f82c9eb 100644
--- a/client/packages/lowcoder/src/comps/uiCompRegistry.ts
+++ b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
@@ -51,6 +51,7 @@ export interface UICompManifest {
   lazyLoad?: boolean;
   compName?: string;
   compPath?: string;
+  isContainer?: boolean;
   defaultDataFn?: CompDefaultDataFunction;
   defaultDataFnName?: string;
   defaultDataFnPath?: string;
@@ -169,6 +170,7 @@ export type UICompType =
   | "columnLayout"
   | "ganttChart"
   | "kanban"
+  | "chat" // Added by Faran
   ;
 
 
diff --git a/client/packages/lowcoder/src/constants/applicationConstants.ts b/client/packages/lowcoder/src/constants/applicationConstants.ts
index 6e8fafa5ee..f685eeb8e6 100644
--- a/client/packages/lowcoder/src/constants/applicationConstants.ts
+++ b/client/packages/lowcoder/src/constants/applicationConstants.ts
@@ -62,7 +62,7 @@ export const AppUILayoutType: Record<AppTypeEnum, UiLayoutType> = {
 
 export type ApplicationDSLType = "editing" | "published" | "view_marketplace";
 export type ApplicationRoleType = "viewer" | "editor" | "owner";
-export type ApplicationPermissionType = "USER" | "GROUP" | "ORG_ADMIN";
+export type ApplicationPermissionType = "User" | "Group" | "ORG_ADMIN" | "USER" | "GROUP";
 
 export interface ApplicationExtra {
   moduleHeight?: number;
@@ -70,6 +70,18 @@ export interface ApplicationExtra {
   layers?: boolean;
 }
 
+export type GroupsMembersPermission = {
+  type: string
+  data: {
+    groupGid?: string
+    groupId?: string
+    userId?: string
+    groupName?: string
+    name?: string
+    avatarUrl?: string
+  }
+}
+
 export interface ApplicationMeta {
   name: string;
   applicationType: AppTypeEnum;
@@ -81,6 +93,7 @@ export interface ApplicationMeta {
   title?: string;
   description?: string;
   image?: string;
+  icon?: string;
   category?: ApplicationCategoriesEnum;
   showheader?: boolean;
   orgId: string;
diff --git a/client/packages/lowcoder/src/constants/orgConstants.ts b/client/packages/lowcoder/src/constants/orgConstants.ts
index a79608b92c..d46d9957bc 100644
--- a/client/packages/lowcoder/src/constants/orgConstants.ts
+++ b/client/packages/lowcoder/src/constants/orgConstants.ts
@@ -54,6 +54,8 @@ export type Org = {
   createdBy: string;
   commonSettings: CommonSettingResponseData;
   createTime?: string;
+  createdAt?: number;
+  updatedAt?: number;
 };
 
 export type OrgAndRole = {
diff --git a/client/packages/lowcoder/src/constants/reduxActionConstants.ts b/client/packages/lowcoder/src/constants/reduxActionConstants.ts
index aea840a5c6..821470ac56 100644
--- a/client/packages/lowcoder/src/constants/reduxActionConstants.ts
+++ b/client/packages/lowcoder/src/constants/reduxActionConstants.ts
@@ -11,6 +11,12 @@ export const ReduxActionTypes = {
   FETCH_API_KEYS_SUCCESS: "FETCH_API_KEYS_SUCCESS",
   MOVE_TO_FOLDER2_SUCCESS: "MOVE_TO_FOLDER2_SUCCESS",
 
+  /* workspace RELATED */
+  FETCH_WORKSPACES_INIT: "FETCH_WORKSPACES_INIT",
+  FETCH_WORKSPACES_SUCCESS: "FETCH_WORKSPACES_SUCCESS", 
+ 
+  
+
   /* plugin RELATED */
   FETCH_DATA_SOURCE_TYPES: "FETCH_DATA_SOURCE_TYPES",
   FETCH_DATA_SOURCE_TYPES_SUCCESS: "FETCH_DATA_SOURCE_TYPES_SUCCESS",
@@ -80,6 +86,7 @@ export const ReduxActionTypes = {
   UPDATE_USER_ORG_ROLE: "UPDATE_USER_ORG_ROLE",
   UPDATE_USER_GROUP_ROLE: "UPDATE_USER_GROUP_ROLE",
   FETCH_ORG_ALL_USERS: "FETCH_ORG_ALL_USERS",
+  FETCH_GROUP_POTENTIAL_MEMBERS: "FETCH_ORG_ALL_GROUP_MEMBERS",
   FETCH_ORG_ALL_USERS_SUCCESS: "FETCH_ORG_ALL_USERS_SUCCESS",
   FETCH_GROUP_USERS: "FETCH_GROUP_USERS",
   FETCH_GROUP_USERS_SUCCESS: "FETCH_GROUP_USERS_SUCCESS",
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index de24d5b64a..43bcb39868 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -229,11 +229,13 @@ export const en = {
     "className": "CSS Class name",
     "dataTestId": "Individual ID",
     "preventOverwriting": "Prevent overwriting styles",
+    "disabledStyle": "Disabled Style",
     "color": "Color",
     "horizontalGridCells": "Horizontal Grid Cells",
     "verticalGridCells": "Vertical Grid Cells",
     "timeZone": "TimeZone",
     "pickerMode": "Picker Mode",
+    "customTags": "Custom Tags"
   },
   "autoHeightProp": {
     "auto": "Auto",
@@ -510,6 +512,11 @@ export const en = {
     "tabAccent": "Tab Accent",
     "checkedBackground": "Checked Background Color",
     "uncheckedBackground": "Unchecked Background Color",
+    "disabledBackground": "Background Color",
+    "disabledBorder": "Border Color",
+    "disabledText": "Text Color",
+    "disabledTrack": "Track Color",
+    "disabledFill": "Fill Color",
     "uncheckedBorder": "Unchecked Border Color",
     "indicatorBackground": "Indicator Background Color",
     "tableCellText": "Cell Text",
@@ -3008,6 +3015,7 @@ export const en = {
     "deleteModalTitle": "Delete This Group",
     "deleteModalContent": "The Deleted Group Cannot Be Restored. Are You Sure to Delete the Group?",
     "addMember": "Add Members",
+    "searchMember": "Search Members",
     "nameColumn": "User Name",
     "joinTimeColumn": "Joining Time",
     "actionColumn": "Operation",
@@ -3060,7 +3068,9 @@ export const en = {
     "inviteSuccessMessage": "Join the Workspace Successfully",
     "inviteFailMessage": "Failed to Join Workspace",
     "uploadErrorMessage": "Upload Error",
-    "orgName": "Workspace Name"
+    "orgName": "Workspace Name",
+    "createdAt": "Created",
+    "updatedAt": "Updated"
   },
   "freeLimit": "Free Trial",
 
@@ -3639,6 +3649,7 @@ export const en = {
   "profile": {
     "orgSettings": "Workspace Settings",
     "switchOrg": "Switch Workspace",
+    "switchWorkspace": "Switch",
     "joinedOrg": "My Workspaces",
     "createOrg": "Create Workspace",
     "logout": "Log Out",
@@ -3931,6 +3942,10 @@ export const en = {
     "datasource": "Data Sources",
     "selectDatasourceType": "Select Data Source Type",
     "home": "Home",
+    "desc": "Description",
+    "renameApp": "Rename app",
+    "updateAppName": "Update Application Name",
+    "titleUpdateWarning": "The card displays the app title. Changing the app name will not update the card view.",
     "all": "All",
     "app": "App",
     "navigation": "Navigation",
@@ -4003,6 +4018,7 @@ export const en = {
     "orgName": "{orgName} admins",
     "addMember": "Add members",
     "addPermissionPlaceholder": "Please enter a name to search members",
+    "selectedUsersAndGroups":"Selected Users and Groups",
     "searchMemberOrGroup": "Search for members or groups: ",
     "addPermissionErrorMessage": "Failed to add permission, {message}",
     "copyModalTitle": 'Clone "{name}"',
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
index c07ac1c3a7..c953f0f801 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
@@ -469,7 +469,7 @@ export function HomeLayout(props: HomeLayoutProps) {
               title: e.title,
               description: e.description,
               category: e.category,
-              icon: e.image,
+              icon: e.icon,
               type: HomeResTypeEnum[HomeResTypeEnum[e.applicationType] as HomeResKey],
               creator: e?.creatorEmail ?? e.createBy,
               lastModifyTime: e.lastModifyTime,
@@ -630,7 +630,7 @@ export function HomeLayout(props: HomeLayoutProps) {
 
             <Divider />
 
-            <ContentWrapper>
+            <ContentWrapper>     
 
               {isFetching && resList.length === 0 ? (
                 <SkeletonStyle active paragraph={{ rows: 8, width: 648 }} title={false} />
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
index 04ef180dc0..db2758e737 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
@@ -1,5 +1,5 @@
-import { TacoButton } from "lowcoder-design/src/components/button"
-import { ReactNode, useState } from "react";
+import { TacoButton, CustomModal, Alert } from "lowcoder-design"
+import { useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { updateAppMetaAction } from "redux/reduxActions/applicationActions";
 import styled from "styled-components";
@@ -22,9 +22,14 @@ import history from "util/history";
 import { APPLICATION_VIEW_URL } from "constants/routesURL";
 import { TypographyText } from "../../components/TypographyText";
 import { useParams } from "react-router-dom";
-import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import {FolderIcon} from "icons";
 import { BrandedIcon } from "@lowcoder-ee/components/BrandedIcon";
+import { Typography } from "antd";
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
+import { default as AntdTypographyText } from "antd/es/typography/Text";
+import { MultiIconDisplay } from "@lowcoder-ee/comps/comps/multiIconDisplay";
+import { FormStyled } from "../setting/idSource/styledComponents";
 
 const ExecButton = styled(TacoButton)`
   width: 52px;
@@ -50,14 +55,16 @@ const ExecButton = styled(TacoButton)`
 `;
 
 const Wrapper = styled.div`
-  height: 67px;
   padding: 0 6px;
   border-radius: 8px;
-  margin-bottom: -1px;
-  margin-top: 1px;
-
+  margin-bottom: 2px;
+  margin-top: 2px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: #fcfcfc;
+  min-height: 100px;
   &:hover {
-    background-color: #f5f7fa;
+     background-color: #f5f5f6
   }
 `;
 
@@ -98,15 +105,8 @@ const CardInfo = styled.div`
   height: 100%;
   flex-grow: 1;
   cursor: pointer;
-  overflow: hidden;
   padding-right: 12px;
 
-  &:hover {
-    .ant-typography {
-      color: #315efb;
-    }
-  }
-
   .ant-typography {
     padding: 2px 2px 8px 2px;
   }
@@ -124,6 +124,7 @@ const AppTimeOwnerInfoLabel = styled.div`
 const OperationWrapper = styled.div`
   display: flex;
   align-items: center;
+  padding-right: 10px;
   @media screen and (max-width: 500px) {
     > svg {
       display: none;
@@ -131,11 +132,90 @@ const OperationWrapper = styled.div`
   }
 `;
 
+export const StyledTypographyText = styled(AntdTypographyText)`
+  font-size: 14px;
+  color: #333333;
+  line-height: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+
+  &:hover {
+  color: #315efb;
+  }
+  }
+`;
+
 const MONTH_MILLIS = 30 * 24 * 60 * 60 * 1000;
 
+interface UpdateAppModalProps {
+  visible: boolean;
+  onCancel: () => void;
+  onOk: (values: any) => void;
+  res: HomeRes;
+  folderId?: string;
+}
+
+export function UpdateAppModal({ visible, onCancel, onOk, res, folderId }: UpdateAppModalProps) {
+  const [detailsForm] = Form.useForm();
+
+  // Reset form values when res changes
+  useEffect(() => {
+    if (res && visible) {
+      detailsForm.setFieldsValue({
+        appName: res.name,
+        title: res.title
+      });
+    }
+  }, [res, visible, detailsForm]);
+
+  return (
+    <CustomModal
+      title={trans("home.updateAppName")}
+      open={visible}
+      destroyOnHidden
+      onCancel={onCancel}
+      showCancelButton={false}
+      showOkButton
+      width="440px"
+      okText={trans("finish")}
+      onOk={() => {
+        detailsForm.validateFields().then((values) => {
+          onOk(values);
+        }).catch((errorInfo) => {
+          console.error('Validation failed:', errorInfo);
+        });
+      }}
+    >
+      <FormStyled
+        form={detailsForm}
+        name="general"
+        layout="vertical"
+        style={{ maxWidth: '100%' }}
+        autoComplete="off"
+      >
+        {res.title && 
+          <Alert label={trans("home.titleUpdateWarning")} type="warning" />}
+        <br/>
+
+        <Form.Item label={trans("home.name")} name="appName">
+          <Input/>
+        </Form.Item>
+
+        {res.title && (
+          <Form.Item label={trans("title")} name="title">
+            <Input disabled />
+          </Form.Item>
+        )}
+
+      </FormStyled>
+    </CustomModal>
+  );
+}
+
 export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => void; setModify:any; modify: boolean }) {
   const { res, onMove, setModify, modify } = props;
-  const [appNameEditing, setAppNameEditing] = useState(false);
+  const [dialogVisible, setDialogVisible] = useState(false)
   const dispatch = useDispatch();
 
   const { folderId } = useParams<{ folderId: string }>();
@@ -161,96 +241,115 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
   else if (res.type === HomeResTypeEnum.NavLayout || res.type === HomeResTypeEnum.MobileTabLayout) {
     iconColor = "#af41ff";
   }
-
   const Icon = resInfo.icon;
 
+  const handleModalOk = (values: any) => {
+    res.type === HomeResTypeEnum.Folder &&
+      dispatch(updateFolder({ id: res.id, name: values.appName || res.name }))
+    dispatch(
+      updateAppMetaAction({ applicationId: res.id, name: values.appName || res.name, folderId: folderId })
+    );
+    
+    setDialogVisible(false);
+    setTimeout(() => {
+      setModify(!modify);
+    }, 200);
+  };
+
   return (
-    <Wrapper>
-      <Card>
-        {Icon && (
-          <BrandedIcon>
-            <Icon width={"42px"} height={"42px"} style={
-              { 
-                color: iconColor,
-                marginRight: "10px", 
-                flexShrink: 0 
-              }
-            } />
-          </BrandedIcon>
-        )}
-        <CardInfo
-          onClick={(e) => {
-            if (appNameEditing) {
-              return;
-            }
-            if (res.type === HomeResTypeEnum.Folder) {
-              handleFolderViewClick(res.id);
-            } else {
-              if (checkIsMobile(window.innerWidth)) {
-                history.push(APPLICATION_VIEW_URL(res.id, "view"));
-                return;
-              }
-              if(res.isMarketplace) {
-                handleMarketplaceAppViewClick(res.id);
-                return;
-              }
-              res.isEditable ? handleAppEditClick(e, res.id) : handleAppViewClick(res.id);
-            }
-          }}
-        >
-          <TypographyText
-            value={res.name}
-            editing={appNameEditing}
-            onChange={(value) => {
-              if (!value.trim()) {
-                messageInstance.warning(trans("home.nameCheckMessage"));
-                return;
-              }
+    <>
+      <UpdateAppModal
+        visible={dialogVisible}
+        onCancel={() => setDialogVisible(false)}
+        onOk={handleModalOk}
+        res={res}
+        folderId={folderId}
+      />
+
+      <Wrapper>
+        <Card>
+          {res.icon ? 
+            <MultiIconDisplay 
+            identifier={res.icon && typeof res.icon === 'string' ? res.icon : '/icon:antd/appstoreoutlined'} 
+            width="30px" 
+            height="30px" 
+            style={{ 
+              marginRight: "6px", 
+              flexShrink: 0, 
+              color: "#b766db" 
+              }} 
+            /> :
+            Icon && (
+              <BrandedIcon>
+                <Icon width={"42px"} height={"42px"} style={
+                  { 
+                    color: iconColor,
+                    marginRight: "10px", 
+                    flexShrink: 0 
+                  }
+                } />
+              </BrandedIcon>
+            )
+          }
+          <CardInfo
+            onClick={(e) => {
               if (res.type === HomeResTypeEnum.Folder) {
-                dispatch(updateFolder({ id: res.id, name: value }));
-                setTimeout(() => {
-                  setModify(!modify);
-                }, 200);
+                handleFolderViewClick(res.id);
               } else {
-                dispatch(
-                  updateAppMetaAction({ applicationId: res.id, name: value, folderId: folderId })
-                );
-                setTimeout(() => {
-                  setModify(!modify);
-                }, 200);
+                if (checkIsMobile(window.innerWidth)) {
+                  history.push(APPLICATION_VIEW_URL(res.id, "view"));
+                  return;
+                }
+                if(res.isMarketplace) {
+                  handleMarketplaceAppViewClick(res.id);
+                  return;
+                }
+                res.isEditable ? handleAppEditClick(e, res.id) : handleAppViewClick(res.id);
               }
-              setAppNameEditing(false);
             }}
-          />
-          <AppTimeOwnerInfoLabel title={subTitle}>{subTitle}</AppTimeOwnerInfoLabel>
-        </CardInfo>
-        <OperationWrapper>
-          {/* {res.isEditable && (
-            <EditButton onClick={(e) => handleAppEditClick(e, res.id)} buttonType="primary">
-              {trans("edit")}
-            </EditButton>
-          )} */}
-          <ExecButton
-            onClick={() =>
-              res.type === HomeResTypeEnum.Folder
-                ? handleFolderViewClick(res.id)
-                : res.isMarketplace
-                ? handleMarketplaceAppViewClick(res.id)
-                : handleAppViewClick(res.id)
-            }
           >
-            {trans("view")}
-          </ExecButton>
-          <HomeResOptions
-            res={res}
-            onRename={() => setAppNameEditing(true)}
-            onMove={(res) => onMove(res)}
-            setModify={setModify}
-            modify={modify}
-          />
-        </OperationWrapper>
-      </Card>
-    </Wrapper>
+            <StyledTypographyText> 
+              {res.title || res.name}
+            </StyledTypographyText>
+
+            {res?.description 
+              && <Typography.Text 
+                  type="secondary" 
+                  style={{ fontSize: 12, textWrap: "wrap"}}
+                  >
+                {res.description.length > 150 ? res.description.substring(0, 150) + '...' : res.description}
+            </Typography.Text>}
+
+            <AppTimeOwnerInfoLabel title={subTitle}>{subTitle}</AppTimeOwnerInfoLabel>
+          </CardInfo>
+          <OperationWrapper>
+            {/* {res.isEditable && (
+              <EditButton onClick={(e) => handleAppEditClick(e, res.id)} buttonType="primary">
+                {trans("edit")}
+              </EditButton>
+            )} */}
+            <ExecButton
+              onClick={() =>
+                res.type === HomeResTypeEnum.Folder
+                  ? handleFolderViewClick(res.id)
+                  : res.isMarketplace
+                  ? handleMarketplaceAppViewClick(res.id)
+                  : handleAppViewClick(res.id)
+              }
+            >
+              {trans("view")}
+            </ExecButton>
+            <HomeResOptions
+              res={res}
+              onRename={() => setDialogVisible(true)}
+              onMove={(res) => onMove(res)}
+              setModify={setModify}
+              modify={modify}
+            />
+          </OperationWrapper>
+        </Card>
+      </Wrapper>
+    </>
   );
 }
 
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx
index 0049ff1b6e..99244d7fcd 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx
@@ -53,7 +53,7 @@ export const HomeResOptions = (props: {
     if (res.isEditable) {
       options = [
         ...options,
-        { text: trans("rename"), onClick: () => onRename(res) },
+        { text: trans("home.renameApp"), onClick: () => onRename(res) },
         {
           text: trans("header.duplicate", { type: HomeResInfo[res.type].name.toLowerCase() }),
           onClick: () => {
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
index ff1ed815fe..ff9d725ab5 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
@@ -23,6 +23,8 @@ import { trans } from "../../i18n";
 import { useParams } from "react-router-dom";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { BrandedIcon } from "@lowcoder-ee/components/BrandedIcon";
+import { MultiIconDisplay } from "@lowcoder-ee/comps/comps/multiIconDisplay";
+import { StyledTypographyText, UpdateAppModal } from "./HomeResCard";
 
 const OperationWrapper = styled.div`
   display: flex;
@@ -47,21 +49,16 @@ const EditBtn = styled(TacoButton)`
   height: 24px;
 `;
 
-const TypographyText = styled(AntdTypographyText)`
-  margin: 0 !important;
-  left: 0 !important;
-  width: 100%;
-`;
-
 export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, modify?: boolean, mode?: string }) => {
   const {setModify, modify, resources, mode} = props
   const dispatch = useDispatch();
-
   const { folderId } = useParams<{ folderId: string }>();
 
   const [needRenameRes, setNeedRenameRes] = useState<HomeRes | undefined>(undefined);
   const [needDuplicateRes, setNeedDuplicateRes] = useState<HomeRes | undefined>(undefined);
   const [needMoveRes, setNeedMoveRes] = useState<HomeRes | undefined>(undefined);
+  const [updateModalVisible, setUpdateModalVisible] = useState(false);
+  const [currentRes, setCurrentRes] = useState<HomeRes | undefined>(undefined);
 
   const back: HomeRes = {
     key: "",
@@ -77,8 +74,37 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
     resources.unshift(back)
   }
 
+  const handleModalOk = (values: any) => {
+    if (currentRes) {
+      currentRes.type === HomeResTypeEnum.Folder &&
+        dispatch(updateFolder({ id: currentRes.id, name: values.appName || currentRes.name }))
+      dispatch(
+        updateAppMetaAction({ applicationId: currentRes.id, name: values.appName || currentRes.name, folderId: folderId })
+      );
+      
+      setUpdateModalVisible(false);
+      setTimeout(() => {
+        setModify(!modify);
+      }, 200);
+    }
+  };
+
+  const handleRenameClick = (res: HomeRes) => {
+    setCurrentRes(res);
+    setUpdateModalVisible(true);
+  };
+
   return (
     <>
+      {currentRes && 
+        <UpdateAppModal
+        visible={updateModalVisible}
+        onCancel={() => setUpdateModalVisible(false)}
+        onOk={handleModalOk}
+        res={currentRes}
+        folderId={folderId}
+      />}
+
       <Table
         style={{ padding: "0 24px 60px", color: "#8B8FA3" }}
         tableLayout={"auto"}
@@ -119,7 +145,17 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
               const Icon = HomeResInfo[item.type].icon;
               return (
                 <NameWrapper>
-                  {Icon && (
+                  {item?.icon ? 
+                    <MultiIconDisplay 
+                    identifier={item.icon && typeof item.icon === 'string' ? item.icon : '/icon:antd/appstoreoutlined'} 
+                    width="30px" 
+                    height="30px" 
+                    style={{ 
+                      marginRight: "6px", 
+                      flexShrink: 0, 
+                      color: "#b766db" 
+                      }} 
+                    /> : Icon && (
                     <BrandedIcon>
                       <Icon
                         width={"24px"}
@@ -128,43 +164,9 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
                       />
                     </BrandedIcon>
                   )}
-                  <TypographyText
-                    ellipsis={true}
-                    title={item.name}
-                    editable={{
-                      enterIcon: null,
-                      tooltip: false,
-                      editing: item.id === needRenameRes?.id,
-                      icon: null,
-                      triggerType: ["text"],
-                      onChange: (value) => {
-                        if (!value.trim()) {
-                          messageInstance.warning(trans("home.nameCheckMessage"));
-                          return;
-                        }
-                        if (item.type === HomeResTypeEnum.Folder) {
-                          dispatch(updateFolder({ id: item.id, name: value }));
-                          setTimeout(() => {
-                            setModify(!modify);
-                          }, 200);
-                        } else {
-                          dispatch(
-                            updateAppMetaAction({
-                              applicationId: item.id,
-                              name: value,
-                              folderId: folderId,
-                            })
-                          );
-                          setTimeout(() => {
-                            setModify(!modify);
-                          }, 200);
-                        }
-                        setNeedRenameRes(undefined);
-                      },
-                    }}
-                  >
-                    {item.name}
-                  </TypographyText>
+                  <StyledTypographyText> 
+                    {item.title || item.name}
+                  </StyledTypographyText>
                 </NameWrapper>
               );
             },
@@ -198,6 +200,19 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
             },
             render: (text) => <SubColumnCell>{text}</SubColumnCell>,
           },
+          {
+            title: trans("home.desc"),
+            dataIndex: "description",
+            ellipsis: true,
+            width: "250px",
+            sorter: (a: any, b: any) => {
+              if (a.creator === b.creator) {
+                return 0;
+              }
+              return a.type > b.type ? 1 : -1;
+            },
+            render: (text) => <SubColumnCell>{text}</SubColumnCell>,
+          },
           {
             title: trans("home.lastModified"),
             dataIndex: "lastModifyTime",
@@ -251,7 +266,7 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
                   <HomeResOptions
                     res={item}
                     onDuplicate={(res) => setNeedDuplicateRes(res)}
-                    onRename={(res) => setNeedRenameRes(res)}
+                    onRename={(res) => handleRenameClick(res)}
                     onMove={(res) => setNeedMoveRes(res)}
                     setModify={setModify}
                     modify={modify!}
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
index 4faaf6a3fb..5987d097d0 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -32,7 +32,7 @@ import {
   UserIcon,
 } from "lowcoder-design";
 import React, { useCallback, useEffect, useState, useMemo } from "react";
-import { fetchAllApplications, fetchHomeData } from "redux/reduxActions/applicationActions";
+import { fetchHomeData } from "redux/reduxActions/applicationActions";
 import { fetchSubscriptionsAction } from "redux/reduxActions/subscriptionActions";
 import { getHomeOrg, normalAppListSelector } from "redux/selectors/applicationSelector";
 import { DatasourceHome } from "../datasource";
@@ -125,18 +125,13 @@ export default function ApplicationHome() {
   }, [org, orgHomeId]);
 
   useEffect(() => {
-    if (allAppCount !== 0) {
-      return;
-    }
-    user.currentOrgId && dispatch(fetchAllApplications({}));
-  }, [dispatch, allAppCount, user.currentOrgId]);
-
-  useEffect(() => {
-    if (allFoldersCount !== 0) {
+    // Check if we need to fetch data (either no folders or no applications)
+    if (allFoldersCount !== 0 && allAppCount !== 0) {
       return;
     }
+    
     user.currentOrgId && dispatch(fetchFolderElements({}));
-  }, [dispatch, allFoldersCount, user.currentOrgId]);
+  }, [dispatch, allFoldersCount, allAppCount, user.currentOrgId]);
 
   if (fetchingUser || !isPreloadCompleted) {
     return <ProductLoading />;
diff --git a/client/packages/lowcoder/src/pages/common/WorkspaceSection.tsx b/client/packages/lowcoder/src/pages/common/WorkspaceSection.tsx
new file mode 100644
index 0000000000..f1cb0709f2
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/common/WorkspaceSection.tsx
@@ -0,0 +1,288 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
+import { Input, Pagination, Spin } from 'antd';
+import { User } from 'constants/userConstants';
+import { switchOrg, createOrgAction } from 'redux/reduxActions/orgActions';
+import { selectSystemConfig } from 'redux/selectors/configSelectors';
+import { showSwitchOrg } from '@lowcoder-ee/pages/common/customerService';
+import { useWorkspaceManager } from 'util/useWorkspaceManager';
+import { trans } from 'i18n';
+import {
+  AddIcon,
+  CheckoutIcon,
+  SearchIcon,
+} from 'lowcoder-design';
+import { ORGANIZATION_SETTING } from 'constants/routesURL';
+import history from 'util/history';
+import { Org } from 'constants/orgConstants';
+
+// Styled Components
+const WorkspaceSection = styled.div`
+  padding: 8px 0;
+`;
+
+const SectionHeader = styled.div`
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #8b8fa3;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const SearchContainer = styled.div`
+  padding: 8px 12px;
+  border-bottom: 1px solid #f0f0f0;
+`;
+
+const StyledSearchInput = styled(Input)`
+  .ant-input {
+    border: 1px solid #e1e3eb;
+    border-radius: 6px;
+    font-size: 13px;
+    
+    &:focus {
+      border-color: #4965f2;
+      box-shadow: 0 0 0 2px rgba(73, 101, 242, 0.1);
+    }
+  }
+`;
+
+const WorkspaceList = styled.div`
+  max-height: 200px;
+  overflow-y: auto;
+  
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 2px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
+`;
+
+const WorkspaceItem = styled.div<{ $isActive?: boolean }>`
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  background-color: ${props => props.$isActive ? '#f0f5ff' : 'transparent'};
+  
+  &:hover {
+    background-color: ${props => props.$isActive ? '#f0f5ff' : '#f8f9fa'};
+  }
+`;
+
+const WorkspaceName = styled.div`
+  flex: 1;
+  font-size: 13px;
+  color: #222222;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const ActiveIcon = styled(CheckoutIcon)`
+  width: 16px;
+  height: 16px;
+  color: #4965f2;
+  margin-left: 8px;
+`;
+
+const CreateWorkspaceItem = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-size: 13px;
+  color: #4965f2;
+  font-weight: 500;
+  
+  &:hover {
+    background-color: #f0f5ff;
+    color: #3651d4;
+  }
+  
+  svg {
+    width: 16px;
+    height: 16px;
+    margin-right: 10px;
+    color: #4965f2;
+  }
+  
+  &:hover svg {
+    color: #3651d4;
+  }
+`;
+
+const EmptyState = styled.div`
+  padding: 20px 16px;
+  text-align: center;
+  color: #8b8fa3;
+  font-size: 13px;
+`;
+
+const PaginationContainer = styled.div`
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: center;
+  
+  .ant-pagination {
+    margin: 0;
+    
+    .ant-pagination-item {
+      min-width: 24px;
+      height: 24px;
+      line-height: 22px;
+      font-size: 12px;
+      margin-right: 4px;
+    }
+    
+    .ant-pagination-prev,
+    .ant-pagination-next {
+      min-width: 24px;
+      height: 24px;
+      line-height: 22px;
+      margin-right: 4px;
+    }
+    
+    .ant-pagination-item-link {
+      font-size: 11px;
+    }
+  }
+`;
+
+const LoadingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 16px;
+`;
+
+// Component Props
+interface WorkspaceSectionProps {
+  user: User;
+  isDropdownOpen: boolean;
+  onClose: () => void;
+}
+
+// Main Component
+export default function WorkspaceSectionComponent({ 
+  user, 
+  isDropdownOpen, 
+  onClose 
+}: WorkspaceSectionProps) {
+  const dispatch = useDispatch();
+  const sysConfig = useSelector(selectSystemConfig);
+  
+  // Use our custom hook
+  const {
+    searchTerm,
+    currentPage,
+    totalCount,
+    isLoading,
+    displayWorkspaces,
+    handleSearchChange,
+    handlePageChange,
+    pageSize,
+  } = useWorkspaceManager({});
+
+  // Early returns for better performance
+  if (!showSwitchOrg(user, sysConfig)) return null;
+
+  // Event handlers
+  const handleOrgSwitch = (orgId: string) => {
+    if (user.currentOrgId !== orgId) {
+      dispatch(switchOrg(orgId));
+    }
+    onClose();
+  };
+
+  const handleCreateOrg = () => {
+    dispatch(createOrgAction(user.orgs));
+    history.push(ORGANIZATION_SETTING);
+    onClose();
+  };
+
+  return (
+    <WorkspaceSection>
+      <SectionHeader>{trans("profile.switchOrg")}</SectionHeader>
+
+      {/* Search Input - Only show if more than 3 workspaces */}
+        <SearchContainer>
+          <StyledSearchInput
+            placeholder="Search workspaces..."
+            value={searchTerm}
+            onChange={(e) => handleSearchChange(e.target.value)}
+            prefix={<SearchIcon style={{ color: "#8b8fa3" }} />}
+            size="small"
+          />
+        </SearchContainer>
+
+      {/* Workspace List */}
+      <WorkspaceList>
+        {isLoading ? (
+          <LoadingContainer>
+            <Spin size="small" />
+          </LoadingContainer>
+        ) : displayWorkspaces.length > 0 ? (
+          displayWorkspaces.map((org: Org) => (
+            <WorkspaceItem
+              key={org.id}
+              $isActive={user.currentOrgId === org.id}
+              onClick={() => handleOrgSwitch(org.id)}
+            >
+              <WorkspaceName title={org.name}>{org.name}</WorkspaceName>
+              {user.currentOrgId === org.id && <ActiveIcon />}
+            </WorkspaceItem>
+          ))
+        ) : (
+          <EmptyState>
+            {searchTerm.trim() 
+              ? "No workspaces found" 
+              : "No workspaces available"
+            }
+          </EmptyState>
+        )}
+      </WorkspaceList>
+
+      {/* Pagination - Only show when needed */}
+      {totalCount > pageSize && !isLoading && (
+        <PaginationContainer>
+          <Pagination
+            current={currentPage}
+            total={totalCount}
+            pageSize={pageSize}
+            size="small"
+            showSizeChanger={false}
+            showQuickJumper={false}
+            showTotal={(total, range) => 
+              `${range[0]}-${range[1]} of ${total}`
+            }
+            onChange={handlePageChange}
+            simple={totalCount > 100} // Simple mode for large datasets
+          />
+        </PaginationContainer>
+      )}
+
+      {/* Create Workspace Button */}
+      <CreateWorkspaceItem onClick={handleCreateOrg}>
+        <AddIcon />
+        {trans("profile.createOrg")}
+      </CreateWorkspaceItem>
+    </WorkspaceSection>
+  );
+}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/common/profileDropdown.tsx b/client/packages/lowcoder/src/pages/common/profileDropdown.tsx
index 4f083cc186..4414acb8de 100644
--- a/client/packages/lowcoder/src/pages/common/profileDropdown.tsx
+++ b/client/packages/lowcoder/src/pages/common/profileDropdown.tsx
@@ -1,260 +1,200 @@
 import { default as Dropdown } from "antd/es/dropdown";
-import { default as Menu, MenuItemProps } from "antd/es/menu";
 import { Org, OrgRoleInfo } from "constants/orgConstants";
-import { ORGANIZATION_SETTING } from "constants/routesURL";
 import { User } from "constants/userConstants";
+import { getCurrentOrg } from "redux/selectors/orgSelectors";
 import {
-  AddIcon,
-  CheckoutIcon,
-  CommonGrayLabel,
   CommonTextLabel,
-  CommonTextLabel2,
-  DropdownMenu,
-  DropDownSubMenu,
   EditIcon,
-  PackUpIcon,
 } from "lowcoder-design";
 import ProfileSettingModal from "pages/setting/profile";
-import React, { useMemo } from "react";
+import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { createOrgAction, switchOrg } from "redux/reduxActions/orgActions";
 import styled from "styled-components";
-import history from "util/history";
 import ProfileImage from "pages/common/profileImage";
 import { isProfileSettingModalVisible } from "redux/selectors/usersSelectors";
 import { logoutAction, profileSettingModalVisible } from "redux/reduxActions/userActions";
 import { trans } from "i18n";
-import { showSwitchOrg } from "@lowcoder-ee/pages/common/customerService";
 import { checkIsMobile } from "util/commonUtils";
-import { selectSystemConfig } from "redux/selectors/configSelectors";
-import type { ItemType } from "antd/es/menu/interface";
+import WorkspaceSectionComponent from "./WorkspaceSection";
 
-const { Item } = Menu;
+// Keep existing styled components for profile and actions
+const ProfileDropdownContainer = styled.div`
+  width: 280px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+  border: 1px solid #e1e3eb;
+  overflow: hidden;
+`;
 
-const ProfileWrapper = styled.div`
+const ProfileSection = styled.div`
   display: flex;
   align-items: center;
-  flex-direction: column;
-  gap: 10px;
-  padding: 4px 0 12px 0;
-
-  p {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    word-break: keep-all;
-  }
-
-  svg {
-    visibility: hidden;
-  }
-
-  :hover svg {
-    visibility: visible;
-
-    g g {
-      fill: #3377ff;
-    }
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  
+  &:hover {
+    background-color: #f8f9fa;
   }
 `;
 
-const StyledDropdown = styled(Dropdown)`
-  display: flex;
-  flex-direction: column;
+const ProfileInfo = styled.div`
+  margin-left: 12px;
+  flex: 1;
   min-width: 0;
-  align-items: end;
 `;
 
-const StyledPackUpIcon = styled(PackUpIcon)`
-  width: 20px;
-  height: 20px;
-  transform: rotate(90deg);
+const ProfileName = styled.div`
+  font-weight: 500;
+  font-size: 14px;
+  color: #222222;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
-const SelectDropMenuItem = styled((props: MenuItemProps) => <Item {...props} />)`
-  .ant-dropdown-menu-item-icon {
-    position: absolute;
-    right: 0;
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-  }
-
-  .ant-dropdown-menu-title-content {
-    color: #4965f2;
-    padding-right: 22px;
-  }
+const ProfileOrg = styled.div`
+  font-size: 12px;
+  color: #8b8fa3;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
-const StyledDropdownSubMenu = styled(DropDownSubMenu)`
-  min-width: 192px;
-
-  .ant-dropdown-menu-item {
-    height: 29px;
-  }
+const ProfileRole = styled.div`
+  font-size: 11px;
+  color: #4965f2;
+  background: #f0f5ff;
+  border: 1px solid #d6e4ff;
+  border-radius: 4px;
+  padding: 2px 6px;
+  display: inline-block;
+  max-width: fit-content;
+`;
 
-  .ant-dropdown-menu-item-divider,
-  .ant-dropdown-menu-submenu-title-divider {
-    background-color: #e1e3eb;
-  }
+const ActionsSection = styled.div`
+  border-top: 1px solid #f0f0f0;
 `;
 
-const StyledNameLabel = styled.div`
-  width: 160px;
-  text-align: center;
-  position: relative;
-  margin-top: -3px;
+const ActionItem = styled.div`
   display: flex;
-  justify-content: center;
-
-  p {
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 16px;
-    color: #222222;
-    padding-left: 16px;
+  align-items: center;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-size: 13px;
+  color: #222222;
+  
+  &:hover {
+    background-color: #f8f9fa;
+  }
+  
+  svg {
+    width: 16px;
+    height: 16px;
+    margin-right: 10px;
   }
 `;
 
-const OrgRoleLabel = styled.div`
-  font-size: 12px;
-  color: #4965f2;
-  line-height: 14px;
-  border: 1px solid #d6e4ff;
-  border-radius: 8px;
-  padding: 1px 5px;
+const StyledDropdown = styled(Dropdown)`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  align-items: end;
 `;
 
+// Component Props
 type DropDownProps = {
   onClick?: (text: string) => void;
   user: User;
   profileSide: number;
   fontSize?: number;
 };
+
+// Simplified Main Component
 export default function ProfileDropdown(props: DropDownProps) {
-  const { avatarUrl, username, orgs, currentOrgId } = props.user;
+  const { avatarUrl, username, currentOrgId } = props.user;
   const currentOrgRoleId = props.user.orgRoleMap.get(currentOrgId);
-  const currentOrg = useMemo(
-    () => props.user.orgs.find((o) => o.id === currentOrgId),
-    [props.user, currentOrgId]
-  );
+  const currentOrg = useSelector(getCurrentOrg);
   const settingModalVisible = useSelector(isProfileSettingModalVisible);
-  const sysConfig = useSelector(selectSystemConfig);
   const dispatch = useDispatch();
-  const handleClick = (e: any) => {
-    if (e.key === "profile") {
-      // click the profile, while not close the dropdown
-      if (checkIsMobile(window.innerWidth)) {
-        return;
-      }
-      dispatch(profileSettingModalVisible(true));
-    } else if (e.key === "logout") {
-      // logout
-      const organizationId = localStorage.getItem('lowcoder_login_orgId');
-      if (organizationId) {
-        localStorage.removeItem('lowcoder_login_orgId');
-      }
-      dispatch(logoutAction({
-        organizationId: organizationId || undefined,
-      }));
-    } else if (e.keyPath.includes("switchOrg")) {
-      if (e.key === "newOrganization") {
-        // create new organization
-        dispatch(createOrgAction(orgs));
-        history.push(ORGANIZATION_SETTING);
-      } else if (currentOrgId !== e.key) {
-        // switch org
-        dispatch(switchOrg(e.key));
-      }
+
+  // Simple state - only what we need
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+
+  // Event handlers
+  const handleProfileClick = () => {
+    if (checkIsMobile(window.innerWidth)) {
+      setDropdownVisible(false);
+      return;
+    }
+    dispatch(profileSettingModalVisible(true));
+    setDropdownVisible(false);
+  };
+
+  const handleLogout = () => {
+    const organizationId = localStorage.getItem('lowcoder_login_orgId');
+    if (organizationId) {
+      localStorage.removeItem('lowcoder_login_orgId');
     }
+    dispatch(logoutAction({
+      organizationId: organizationId || undefined,
+    }));
+    setDropdownVisible(false);
   };
 
-  let profileDropdownMenuItems:ItemType[] = [
-    {
-      key: 'profile',
-      label: (
-        <ProfileWrapper>
-          <ProfileImage source={avatarUrl} userName={username} side={48} />
-          <StyledNameLabel>
-            <CommonTextLabel2 title={username}>{username}</CommonTextLabel2>
-            {!checkIsMobile(window.innerWidth) && <EditIcon />}
-          </StyledNameLabel>
+  const handleDropdownClose = () => {
+    setDropdownVisible(false);
+  };
+
+  // Dropdown content
+  const dropdownContent = (
+    <ProfileDropdownContainer onClick={(e) => e.stopPropagation()}>
+      {/* Profile Section */}
+      <ProfileSection onClick={handleProfileClick}>
+        <ProfileImage source={avatarUrl} userName={username} side={40} />
+        <ProfileInfo>
+          <ProfileName title={username}>{username}</ProfileName>
           {currentOrg && (
-            <CommonGrayLabel
-              style={{
-                width: "130px",
-                textAlign: "center",
-                lineHeight: "15px",
-              }}
-            >
-              {currentOrg.name}
-            </CommonGrayLabel>
+            <ProfileOrg title={currentOrg.name}>{currentOrg.name}</ProfileOrg>
           )}
           {currentOrgRoleId && OrgRoleInfo[currentOrgRoleId] && (
-            <OrgRoleLabel>{OrgRoleInfo[currentOrgRoleId].name}</OrgRoleLabel>
+            <ProfileRole>{OrgRoleInfo[currentOrgRoleId].name}</ProfileRole>
           )}
-        </ProfileWrapper>
-      ),
-    },
-    {
-      key: 'logout',
-      label: trans("profile.logout"),
-    }
-  ]
-
-  if(orgs && orgs.length > 0 && showSwitchOrg(props.user, sysConfig)) {
-    const switchOrgSubMenu = orgs.map((org: Org) => ({
-      key: org.id,
-      icon: currentOrgId === org.id && <CheckoutIcon />,
-      label: org.name
-    }))
-
-    let addWorkSpace:ItemType[] = [];
-    if(!checkIsMobile(window.innerWidth)) {
-      addWorkSpace = [
-        { type: 'divider'},
-        {
-          key: 'newOrganization',
-          icon: <AddIcon />,
-          label: trans("profile.createOrg")
-        }
-      ]
-    }
-
-    const switchOrgMenu = {
-      key: 'switchOrg',
-      label: trans("profile.switchOrg"),
-      popupOffset: checkIsMobile(window.innerWidth) ? [-200, 36] : [4, -12],
-      children: [
-        {
-          key: 'joinedOrg',
-          label: (
-            <CommonTextLabel style={{ margin: "8px", color: "#B8B9BF" }}>
-              {trans("profile.joinedOrg")}
-            </CommonTextLabel>
-          ),
-          disabled: true,
-        },
-        ...switchOrgSubMenu,
-        ...addWorkSpace,
-      ]
-    }
-    profileDropdownMenuItems.splice(1, 0, switchOrgMenu);
-  }
-
-  const menu = (
-    <DropdownMenu
-      style={{ width: "192px" }}
-      onClick={handleClick}
-      expandIcon={<StyledPackUpIcon />}
-      items={profileDropdownMenuItems}
-    />
+        </ProfileInfo>
+        {!checkIsMobile(window.innerWidth) && (
+          <EditIcon style={{ color: "#8b8fa3" }} />
+        )}
+      </ProfileSection>
+
+      {/* Workspaces Section - Now extracted and clean! */}
+      <WorkspaceSectionComponent 
+        user={props.user}
+        isDropdownOpen={dropdownVisible}
+        onClose={handleDropdownClose}
+      />
+
+      {/* Actions Section */}
+      <ActionsSection>
+        <ActionItem onClick={handleLogout}>
+          {trans("profile.logout")}
+        </ActionItem>
+      </ActionsSection>
+    </ProfileDropdownContainer>
   );
+
   return (
     <>
       <StyledDropdown
-        popupRender={() => menu}
+        open={dropdownVisible}
+        onOpenChange={setDropdownVisible}
+        popupRender={() => dropdownContent}
         trigger={["click"]}
+        placement="bottomRight"
       >
         <div>
           <ProfileImage
@@ -269,4 +209,4 @@ export default function ProfileDropdown(props: DropDownProps) {
       {settingModalVisible && <ProfileSettingModal />}
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
index 0928438920..9bdf356755 100644
--- a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
+++ b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
@@ -92,7 +92,7 @@ const AppEditor = React.memo(() => {
 
   // Set global settings with cleanup
   useEffect(() => {
-    setGlobalSettings({ applicationId: selectors.applicationId, isViewMode: selectors.paramViewMode === "view" });
+    setGlobalSettings({ applicationId: selectors.applicationId, isViewMode: selectors.paramViewMode === "view" || selectors.paramViewMode === "view_marketplace" });
     return () => {
       clearGlobalSettings();
     };
diff --git a/client/packages/lowcoder/src/pages/editor/LeftContent.tsx b/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
index 126024d650..1b403d6823 100644
--- a/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
+++ b/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
@@ -446,7 +446,14 @@ export const LeftContent = (props: LeftContentProps) => {
         </span>
         {info?.show && data && (
           <Modal
-            title={data.name}
+            title={
+              <div>
+                <div>{data.name}</div>
+                <div style={{ fontSize: '12px', color: '#666', fontWeight: 'normal', marginTop: '4px' }}>
+                  <strong>Type:</strong> {data.type}
+                </div>
+              </div>
+            }
             open={info.show}
             onOk={() => setShowData([])}
             cancelButtonProps={{ style: { display: 'none' } }}
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx
index 820e83b120..c71364470b 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx
@@ -9,6 +9,14 @@ import { AppState } from "../../../redux/reducers";
 import { getUser } from "../../../redux/selectors/usersSelectors";
 import { connect } from "react-redux";
 import { Layers } from "constants/Layers";
+import Flex from "antd/es/flex";
+import type { MenuProps } from 'antd/es/menu';
+import { BuildOutlined, DatabaseOutlined } from "@ant-design/icons";
+import Menu from "antd/es/menu/menu";
+import { ChatView } from "@lowcoder-ee/comps/comps/chatComp/chatView";
+import { AIGenerate } from "lowcoder-design";
+
+type MenuItem = Required<MenuProps>['items'][number];
 
 const StyledResizableBox = styled(ResizableBox)`
   position: relative;
@@ -26,6 +34,32 @@ const StyledResizableBox = styled(ResizableBox)`
   }
 `;
 
+const StyledMenu = styled(Menu)`
+  width: 40px;
+  padding: 6px 0;
+
+  .ant-menu-item {
+    height: 30px;
+    line-height: 30px;
+  }
+`;
+
+const ChatHeader = styled.div`
+  flex: 0 0 35px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e1e3eb;
+  background: #fafafa;
+`;
+const ChatTitle = styled.h3`
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: #222222;
+`;
+
 const preventDefault = (e: any) => {
   e.preventDefault();
 };
@@ -49,6 +83,12 @@ function Bottom(props: any) {
   };
 
   const [bottomHeight, setBottomHeight] = useState(panelStyle.bottom.h);
+  const [currentOption, setCurrentOption] = useState("data");
+
+  const items: MenuItem[] = [
+    { key: 'data', icon: <DatabaseOutlined />, label: 'Data Queries' },
+    { key: 'ai', icon: <AIGenerate />, label: 'Lowcoder AI' },
+  ];
 
   return (
     <>
@@ -62,7 +102,34 @@ function Bottom(props: any) {
         onResizeStart={addListener}
         onResizeStop={resizeStop}
       >
-        <BottomContent />
+        <Flex style={{height: '100%'}}>
+          <StyledMenu
+            defaultSelectedKeys={[currentOption]}
+            mode="inline"
+            inlineCollapsed={true}
+            items={items}
+            onSelect={({key}) => {
+              setCurrentOption(key);
+            }}
+          />
+          { currentOption === "data" && <BottomContent /> }
+          { currentOption === "ai" && (
+            <Flex style={{height: '100%', flex: 1}} vertical>
+              <ChatHeader>
+                <ChatTitle>Lowcoder AI Assistant</ChatTitle>
+              </ChatHeader>
+              <ChatView
+                tableName="LC_AI"
+                modelType="n8n"
+                // streaming={true}
+                // systemPrompt="You are a helpful assistant."
+                // agent={true}
+                // maxInteractions={10}
+                modelHost="http://localhost:5678/webhook-test/9a363e76-d3a5-46d1-98c3-4359f7106d33"
+              />
+            </Flex>
+          )}
+        </Flex>
       </StyledResizableBox>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
index 70caf29d12..6f8a6f4d79 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
@@ -34,7 +34,7 @@ const Contain = styled.div`
   width: 100%;
   background-color: #ffffff;
 `;
-const Title = styled.div`
+export const Title = styled.div`
   flex-shrink: 0;
   height: 40px;
   width: 100%;
@@ -82,16 +82,17 @@ const AddIcon = styled(BluePlusIcon)`
   width: 12px;
   margin-right: 2px;
 `;
-const AddBtn = styled(TacoButton)`
+export const AddBtn = styled(TacoButton)`
   &&& {
     height: 24px;
     width: 64px;
-    padding: 4px 12px;
+    padding: 4px 10px;
     background-color: #fafbff;
     color: #4965f2;
     border-color: #c9d1fc;
     display: flex;
     align-items: center;
+    gap: 0;
     box-shadow: none;
   
     &:hover {
diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
index a931455d4b..d18705af10 100644
--- a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
@@ -306,4 +306,5 @@ export const CompStateIcon: {
   sunburstChart: <MemoizedIcon Icon={SunburstChartCompIconSmall} />,
   themeriverChart: <MemoizedIcon Icon={ThemeriverChartCompIconSmall} />,
   basicChart: <MemoizedIcon Icon={ChartCompIconSmall} />,
+  chat: <MemoizedIcon Icon={CommentCompIconSmall} />,
 } as const;
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
index 2c7f0de92e..c722f907f7 100644
--- a/client/packages/lowcoder/src/pages/editor/editorView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx
@@ -337,7 +337,11 @@ const aggregationSiderItems = [
   {
     key: SiderKey.Setting,
     icon: <LeftSettingIcon />,
-  }
+  },
+  {
+    key: SiderKey.JS,
+    icon: <LeftJSSettingIcon />,
+  },
 ];
 
 const DeviceWrapper = ({
@@ -706,9 +710,7 @@ function EditorView(props: EditorViewProps) {
                         <SettingsDiv>
                           <ScrollBar>
                             {application &&
-                              !isAggregationApp(
-                                AppUILayoutType[application.applicationType]
-                              ) && (
+                              (
                                 <>
                                   {appSettingsComp.getPropertyView()}
                                 </>
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
index cff8de9eb5..706c544b46 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
@@ -48,6 +48,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { Helmet } from "react-helmet";
 import {fetchQLPaginationByOrg} from "@lowcoder-ee/util/pagination/axios";
 import { isEmpty } from "lodash";
+import { processCurlData } from "../../util/curlUtils";
 
 const Wrapper = styled.div`
   display: flex;
@@ -145,6 +146,7 @@ export const QueryLibraryEditor = () => {
 
   useEffect(() => {
     if (orgId) {
+      dispatch(fetchDataSourceTypes({ organizationId: orgId }));
       dispatch(
         fetchDatasource({
           organizationId: orgId,
@@ -199,17 +201,39 @@ export const QueryLibraryEditor = () => {
   const newName = nameGenerator.genItemName(trans("queryLibrary.unnamed"));
 
   const handleAdd = (type: BottomResTypeEnum, extraInfo?: any) => {
+    // Build basic query DSL
+    let queryDSL: any = {
+      triggerType: "manual",
+      datasourceId: extraInfo?.dataSourceId,
+      compType: extraInfo?.compType,
+    };
+
+    // If it is a REST API created from cURL, pre-populate the HTTP query fields
+    if (extraInfo?.compType === "restApi" && extraInfo?.curlData) {
+      const curlConfig = processCurlData(extraInfo.curlData);
+      if (curlConfig) {
+        queryDSL = {
+          ...queryDSL,
+          comp: {
+            httpMethod: curlConfig.method,
+            path: curlConfig.url,
+            headers: curlConfig.headers,
+            params: curlConfig.params,
+            bodyType: curlConfig.bodyType,
+            body: curlConfig.body,
+            bodyFormData: curlConfig.bodyFormData,
+          },
+        };
+      }
+    }
+
     dispatch(
       createQueryLibrary(
         {
           name: newName,
           organizationId: orgId,
           libraryQueryDSL: {
-            query: {
-              triggerType: "manual",
-              datasourceId: extraInfo?.dataSourceId,
-              compType: extraInfo?.compType,
-            },
+            query: queryDSL,
           },
         },
         (resp) => {
@@ -218,7 +242,6 @@ export const QueryLibraryEditor = () => {
             setModify(!modify);
           }, 200);
           setCurrentPage(Math.ceil(elements.total / pageSize));
-
         },
         () => {}
       )
diff --git a/client/packages/lowcoder/src/pages/setting/branding/BrandingSetting.tsx b/client/packages/lowcoder/src/pages/setting/branding/BrandingSetting.tsx
index 12ce5e7a65..9a0b64296e 100644
--- a/client/packages/lowcoder/src/pages/setting/branding/BrandingSetting.tsx
+++ b/client/packages/lowcoder/src/pages/setting/branding/BrandingSetting.tsx
@@ -497,14 +497,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/24x24"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Logo.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
           </Card>
@@ -534,14 +534,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Main%20Branding%20Color.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
 
@@ -563,14 +563,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20App%20Header%20Color.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
 
@@ -592,14 +592,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Admin%20Sidebar%20Color.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
 
@@ -621,14 +621,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Admin%20Sidebar%20Font%20Color.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
 
@@ -650,14 +650,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Admin%20Sidebar%20Selected%20Item%20Backround%20Color.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
 
@@ -679,14 +679,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Admin%20Sidebar%20Selected%20Item%20Font%20Color.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
 
@@ -708,14 +708,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Editor%20Sidebar%20Color.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
 
@@ -737,14 +737,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Editor%20Sidebar%20Font%20Color.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
 
@@ -766,14 +766,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Editor%20Sidebar%20Selected%20Item%20Background%20Color.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
 
@@ -795,14 +795,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Editor%20Sidebar%20Selected%20Item%20Font%20Color.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
 
@@ -822,14 +822,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Font.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
           </Card>
@@ -850,36 +850,12 @@ export function BrandingSetting() {
                   onChange={(e) => updateSettings(SettingsEnum.ERROR_PAGE_TEXT, e.target.value)}
                 />
 
-                {/* {!Boolean(configOrgId) ? (
-                  <> */}
-                    <StyledSectionTitle style={{marginTop : "20px"}}>{trans("branding.errorPageImageUrl")}</StyledSectionTitle>
-                    <StyledInput
-                      placeholder={trans("branding.errorPageImageUrlPlaceholder")}
-                      value={brandingConfig?.config_set?.[SettingsEnum.ERROR_PAGE_IMAGE] || ""}
-                      onChange={(e) => updateSettings(SettingsEnum.ERROR_PAGE_IMAGE, e.target.value)}
-                    />
-                  {/* </>
-                ) : (
-                  <>
-                    <StyledSectionTitle style={{marginTop : "20px"}}>{trans("branding.errorPageImage")}</StyledSectionTitle>
-                    <StyledRectUploadContainer>
-                      <Upload
-                        name="errorPageImage"
-                        className="avatar-uploader"
-                        listType="picture-card"
-                        showUploadList={false}
-                        beforeUpload={beforeUpload}
-                        maxCount={1}
-                        customRequest={(options) => handleUpload(options, SettingsEnum.ERROR_PAGE_IMAGE)}
-                      >
-                        {Boolean(brandingConfig?.config_set?.[SettingsEnum.ERROR_PAGE_IMAGE])
-                          ? <img src={buildMaterialPreviewURL(brandingConfig?.config_set?.[SettingsEnum.ERROR_PAGE_IMAGE]!)} alt="error_page_image" />
-                          : uploadButton(loading[SettingsEnum.ERROR_PAGE_IMAGE])
-                        }
-                      </Upload>
-                    </StyledRectUploadContainer>
-                  </>
-                )} */}
+                <StyledSectionTitle style={{marginTop : "20px"}}>{trans("branding.errorPageImageUrl")}</StyledSectionTitle>
+                <StyledInput
+                  placeholder={trans("branding.errorPageImageUrlPlaceholder")}
+                  value={brandingConfig?.config_set?.[SettingsEnum.ERROR_PAGE_IMAGE] || ""}
+                  onChange={(e) => updateSettings(SettingsEnum.ERROR_PAGE_IMAGE, e.target.value)}
+                />
               </Col>
               <Col xs={24} md={8}>
                 <Paragraph type="secondary">
@@ -887,14 +863,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Error%20Page.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
             <StyledDivider />
@@ -906,52 +882,27 @@ export function BrandingSetting() {
                   value={brandingConfig?.config_set?.signUpPageText || ""}
                   onChange={(e) => updateSettings(SettingsEnum.SIGNUP_PAGE_TEXT, e.target.value)}
                 />
-
-                {/* {!Boolean(configOrgId) ? (
-                  <> */}
-                    <StyledSectionTitle style={{marginTop : "20px"}}>{trans("branding.signUpPageImageUrl")}</StyledSectionTitle>
-                    <StyledInput
-                      placeholder={trans("branding.signUpPageImageUrlPlaceholder")}
-                      value={brandingConfig?.config_set?.[SettingsEnum.SIGNUP_PAGE_IMAGE] || ""}
-                      onChange={(e) => updateSettings(SettingsEnum.SIGNUP_PAGE_IMAGE, e.target.value)}
-                    />
-                  {/* </>
-                ) : (
-                  <>
-                    <StyledSectionTitle style={{marginTop : "20px"}}>{trans("branding.signUpPageImage")}</StyledSectionTitle>
-                    <StyledRectUploadContainer>
-                      <Upload
-                        name="signUpPageImage"
-                        className="avatar-uploader"
-                        listType="picture-card"
-                        showUploadList={false}
-                        beforeUpload={beforeUpload}
-                        maxCount={1}
-                        customRequest={(options) => handleUpload(options, SettingsEnum.SIGNUP_PAGE_IMAGE)}
-                      >
-                        {Boolean(brandingConfig?.config_set?.[SettingsEnum.SIGNUP_PAGE_IMAGE])
-                          ? <img src={buildMaterialPreviewURL(brandingConfig?.config_set?.[SettingsEnum.SIGNUP_PAGE_IMAGE]!)} alt="signup_page_image" />
-                          : uploadButton(loading[SettingsEnum.SIGNUP_PAGE_IMAGE])
-                        }
-                      </Upload>
-                    </StyledRectUploadContainer>
-                  </>
-                )} */}
+                  <StyledSectionTitle style={{marginTop : "20px"}}>{trans("branding.signUpPageImageUrl")}</StyledSectionTitle>
+                  <StyledInput
+                    placeholder={trans("branding.signUpPageImageUrlPlaceholder")}
+                    value={brandingConfig?.config_set?.[SettingsEnum.SIGNUP_PAGE_IMAGE] || ""}
+                    onChange={(e) => updateSettings(SettingsEnum.SIGNUP_PAGE_IMAGE, e.target.value)}
+                  />
               </Col>
               <Col xs={24} md={8}>
                 <Paragraph type="secondary">
-                  {settingDescription[SettingsEnum.ERROR_PAGE_TEXT]}
+                  {settingDescription[SettingsEnum.SIGNUP_PAGE_TEXT]}
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Enterprise%20Edition%20%7C%20Branding%20%7C%20Whitelabel.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
             <StyledDivider />
@@ -980,14 +931,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20SEO.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
           </Card>
@@ -1028,14 +979,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Documentation%20Link.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
 
@@ -1066,14 +1017,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Whats%20New.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
 
@@ -1093,14 +1044,14 @@ export function BrandingSetting() {
                 </Paragraph>
               </Col>
               <Col xs={24} md={8} style={{textAlign: 'right'}}>
-                {/* <StyledImage
+                <StyledImage
                   width={200}
                   height={100}
-                  src="https://placehold.co/200x100"
+                  src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Branding%20%7C%20Allow%20Submit%20Issue.png"
                   alt="Color Preview"
                   preview
                   loading="lazy"
-                /> */}
+                />
               </Col>
             </StyledRow>
           </Card>
diff --git a/client/packages/lowcoder/src/pages/setting/organization/orgList.tsx b/client/packages/lowcoder/src/pages/setting/organization/orgList.tsx
index ba99bc7df9..c60f492ead 100644
--- a/client/packages/lowcoder/src/pages/setting/organization/orgList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/organization/orgList.tsx
@@ -1,7 +1,7 @@
 import { ADMIN_ROLE, SUPER_ADMIN_ROLE } from "constants/orgConstants";
-import { AddIcon, CustomModal, DangerIcon, EditPopover } from "lowcoder-design";
+import { AddIcon, CustomModal, DangerIcon, EditPopover, SearchIcon, CheckoutIcon } from "lowcoder-design";
 import { useDispatch, useSelector } from "react-redux";
-import { createOrgAction, deleteOrgAction } from "redux/reduxActions/orgActions";
+import { createOrgAction, deleteOrgAction, switchOrg } from "redux/reduxActions/orgActions";
 import styled from "styled-components";
 import { trans, transToNode } from "i18n";
 import { buildOrgId } from "constants/routesURL";
@@ -15,13 +15,18 @@ import { Table } from "components/Table";
 import history from "util/history";
 import { StyledOrgLogo } from "./styledComponents";
 import { Level1SettingPageContentWithList, Level1SettingPageTitleWithBtn } from "../styled";
-import { timestampToHumanReadable } from "util/dateTimeUtils";
 import { isSaasMode } from "util/envUtils";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
 import { default as Form } from "antd/es/form";
 import { default as Input } from "antd/es/input";
+import { Pagination, Spin, Tooltip } from "antd";
 import { getUser } from "redux/selectors/usersSelectors";
 import { getOrgCreateStatus } from "redux/selectors/orgSelectors";
+import { useWorkspaceManager } from "util/useWorkspaceManager";
+import { Org } from "constants/orgConstants";
+import { useState } from "react";
+import { SwapOutlined } from "@ant-design/icons";
+import dayjs from "dayjs";
 
 const OrgName = styled.div`
   display: flex;
@@ -47,12 +52,56 @@ const OrgName = styled.div`
   }
 `;
 
+// Icon to indicate the currently active organization
+const ActiveOrgIcon = styled(CheckoutIcon)`
+  width: 16px;
+  height: 16px;
+  color: #4965f2;
+  margin-left: 6px;
+`;
+
+// Button to switch to this organization
+const SwitchBtn = styled(EditBtn)`
+  min-width: auto;
+  margin-right: 8px;
+`;
+
 const TableStyled = styled(Table)`
   .ant-table-tbody > tr > td {
     padding: 11px 12px;
   }
 `;
 
+const SearchContainer = styled.div`
+  margin-bottom: 16px;
+  max-width: 320px;
+`;
+
+const StyledSearchInput = styled(Input)`
+  .ant-input {
+    border: 1px solid #e1e3eb;
+    border-radius: 6px;
+    font-size: 13px;
+    
+    &:focus {
+      border-color: #4965f2;
+      box-shadow: 0 0 0 2px rgba(73, 101, 242, 0.1);
+    }
+  }
+`;
+
+const PaginationContainer = styled.div`
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const LoadingContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+`;
+
 const Content = styled.div`
   &,
   .ant-form-item-label,
@@ -120,33 +169,54 @@ const Tip = styled.div`
 type DataItemInfo = {
   id: string;
   del: boolean;
-  createTime: string;
   orgName: string;
   logoUrl: string;
+  createdAt?: number;
+  updatedAt?: number;
 };
 
 function OrganizationSetting() {
   const user = useSelector(getUser);
-  const orgs = user.orgs;
-  const adminOrgs = orgs.filter((org) => {
-    const role = user.orgRoleMap.get(org.id);
-    return role === ADMIN_ROLE || role === SUPER_ADMIN_ROLE;
-  });
   const orgCreateStatus = useSelector(getOrgCreateStatus);
   const dispatch = useDispatch();
   const sysConfig = useSelector(selectSystemConfig);
   const [form] = Form.useForm();
 
-  const dataSource = adminOrgs.map((org) => ({
+  // Use the workspace manager hook for search and pagination
+  const {
+    searchTerm,
+    currentPage,
+    totalCount,
+    isLoading,
+    displayWorkspaces,
+    handleSearchChange,
+    handlePageChange,
+    pageSize,
+  } = useWorkspaceManager({ 
+    pageSize: 10 
+  });
+
+
+
+  // Filter to only show orgs where user has admin permissions
+  const adminOrgs = displayWorkspaces.filter((org: Org) => {
+    const role = user.orgRoleMap.get(org.id);
+    return role === ADMIN_ROLE || role === SUPER_ADMIN_ROLE;
+  });
+
+  const dataSource = adminOrgs.map((org: Org) => ({
     id: org.id,
     del: adminOrgs.length > 1,
-    createTime: org.createTime,
     orgName: org.name,
-    logoUrl: org.logoUrl,
+    logoUrl: org.logoUrl || "",
+    createdAt: org.createdAt,
+    updatedAt: org.updatedAt,
   }));
 
+
+
   return (
-    <Level1SettingPageContentWithList>
+    <Level1SettingPageContentWithList style={{ minWidth: "1000px" }}>
       <Level1SettingPageTitleWithBtn>
         {trans("settings.organization")}
         {isSaasMode(sysConfig) && (
@@ -154,131 +224,203 @@ function OrganizationSetting() {
             loading={orgCreateStatus === "requesting"}
             buttonType={"primary"}
             icon={<AddIcon />}
-            onClick={() => dispatch(createOrgAction(orgs))}
+            onClick={() => dispatch(createOrgAction(user.orgs))}
           >
             {trans("orgSettings.createOrg")}
           </CreateButton>
         )}
       </Level1SettingPageTitleWithBtn>
+      
+      {/* Search Input */}
+      <SearchContainer>
+        <StyledSearchInput
+          placeholder="Search organizations..."
+          value={searchTerm}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          prefix={<SearchIcon style={{ color: "#8b8fa3" }} />}
+          size="middle"
+        />
+      </SearchContainer>
+
       <div>
-        <TableStyled
-          tableLayout={"auto"}
-          scroll={{ x: "100%" }}
-          pagination={false}
-          onRow={(record) => ({
-            onClick: () => history.push(buildOrgId((record as DataItemInfo).id)),
-          })}
-          columns={[
-            {
-              title: trans("orgSettings.orgName"),
-              dataIndex: "orgName",
-              ellipsis: true,
-              render: (_, record: any) => {
-                return (
-                  <OrgName>
-                    <StyledOrgLogo source={record.logoUrl} orgName={record.orgName} />
-                    <span>{record.orgName}</span>
-                  </OrgName>
-                );
-              },
-            },
-            {
-              title: trans("memberSettings.createTime"),
-              dataIndex: "createTime",
-              ellipsis: true,
-              render: (value) => (
-                <span style={{ color: "#8B8FA3" }}>{timestampToHumanReadable(value)}</span>
-              ),
-            },
-            { title: " ", dataIndex: "operation", width: "208px" },
-          ]}
-          dataSource={dataSource.map((item, i) => ({
-            ...item,
-            key: i,
-            operation: (
-              <OperationWrapper>
-                <EditBtn
-                  className={"home-datasource-edit-button"}
-                  buttonType={"primary"}
-                  onClick={() => history.push(buildOrgId(item.id))}
-                >
-                  {trans("edit")}
-                </EditBtn>
-                {item.del && (
-                  <EditPopover
-                    del={() => {
-                      CustomModal.confirm({
-                        width: "384px",
-                        title: trans("orgSettings.deleteModalTitle"),
-                        bodyStyle: { marginTop: 0 },
-                        content: (
-                          <Content>
-                            <Tip>
-                              <DangerIcon />
-                              <span>
-                                {transToNode("orgSettings.deleteModalContent", {
-                                  permanentlyDelete: (
-                                    <b>{trans("orgSettings.permanentlyDelete")}</b>
-                                  ),
-                                  notRestored: <b>{trans("orgSettings.notRestored")}</b>,
-                                })}
-                              </span>
-                            </Tip>
-                            <Form layout="vertical" form={form}>
-                              <Form.Item
-                                name="name"
-                                label={transToNode("orgSettings.deleteModalLabel", {
-                                  name: (
-                                    <span style={{ color: "#4965F2", margin: "0 5px" }}>
-                                      {item.orgName}
-                                    </span>
-                                  ),
-                                })}
-                                rules={[
-                                  {
-                                    required: true,
-                                    message: trans("orgSettings.deleteModalTip"),
-                                  },
-                                ]}
-                              >
-                                <Input placeholder={trans("orgSettings.orgName")} />
-                              </Form.Item>
-                            </Form>
-                          </Content>
-                        ),
-                        onConfirm: () => {
-                          form.submit();
-                          return form.validateFields().then(() => {
-                            const name = form.getFieldValue("name");
-                            if (name === item.orgName) {
-                              dispatch(deleteOrgAction(item.id));
-                              form.resetFields();
-                            } else {
-                              form.setFields([
+        {isLoading ? (
+          <LoadingContainer>
+            <Spin size="large" />
+          </LoadingContainer>
+        ) : (
+          <>
+            <TableStyled
+              tableLayout={"auto"}
+              scroll={{ x: "100%" }}
+              pagination={false}
+              onRow={(record) => ({
+                onClick: () => history.push(buildOrgId((record as DataItemInfo).id)),
+              })}
+              columns={[
                                 {
-                                  name: "name",
-                                  errors: [trans("orgSettings.deleteModalErr")],
-                                },
-                              ]);
-                              throw new Error();
-                            }
+                  title: trans("orgSettings.orgName"),
+                  dataIndex: "orgName",
+                  ellipsis: true,
+                  render: (_, record: any) => {
+                    const isActiveOrg = record.id === user.currentOrgId;
+                    return (
+                      <OrgName>
+                        <StyledOrgLogo source={record.logoUrl} orgName={record.orgName} />
+                        <span>{record.orgName}</span>
+                        {isActiveOrg && <ActiveOrgIcon />}
+                      </OrgName>
+                    );
+                  },
+                },
+                {
+                  title: trans("orgSettings.createdAt"),
+                  dataIndex: "createdAt",
+                  width: "150px",
+                  render: (createdAt: number) => {
+                    if (!createdAt) return "-";
+                    return (
+                      <Tooltip title={dayjs.unix(createdAt).format("YYYY/MM/DD HH:mm:ss")}
+                               placement="bottom">
+                        <span style={{ color: "#8b8fa3" }}>{dayjs.unix(createdAt).fromNow()}</span>
+                      </Tooltip>
+                    );
+                  },
+                },
+                {
+                  title: trans("orgSettings.updatedAt"),
+                  dataIndex: "updatedAt", 
+                  width: "150px",
+                  render: (updatedAt: number) => {
+                    if (!updatedAt) return "-";
+                    return (
+                      <Tooltip title={dayjs.unix(updatedAt).format("YYYY/MM/DD HH:mm:ss")}
+                               placement="bottom">
+                        <span style={{ color: "#8b8fa3" }}>{dayjs.unix(updatedAt).fromNow()}</span>
+                        </Tooltip>
+                    );
+                  },
+                },
+                { title: " ", dataIndex: "operation", width: "208px" },
+              ]}
+              dataSource={dataSource.map((item, i) => ({
+                ...item,
+                key: i,
+                operation: (
+                  <OperationWrapper>
+                    {item.id !== user.currentOrgId && (
+                      <SwitchBtn
+                        className={"home-datasource-edit-button"}
+                        buttonType={"blue"}
+                        icon={<SwapOutlined />}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          dispatch(switchOrg(item.id));
+                        }}
+                      >
+                        {trans("profile.switchWorkspace")}
+                      </SwitchBtn>
+                    )}
+                    <EditBtn
+                      className={"home-datasource-edit-button"}
+                      buttonType={"primary"}
+                      onClick={() => history.push(buildOrgId(item.id))}
+                    >
+                      {trans("edit")}
+                    </EditBtn>
+                    {item.del && (
+                      <EditPopover
+                        del={() => {
+                          CustomModal.confirm({
+                            width: "384px",
+                            title: trans("orgSettings.deleteModalTitle"),
+                            bodyStyle: { marginTop: 0 },
+                            content: (
+                              <Content>
+                                <Tip>
+                                  <DangerIcon />
+                                  <span>
+                                    {transToNode("orgSettings.deleteModalContent", {
+                                      permanentlyDelete: (
+                                        <b>{trans("orgSettings.permanentlyDelete")}</b>
+                                      ),
+                                      notRestored: <b>{trans("orgSettings.notRestored")}</b>,
+                                    })}
+                                  </span>
+                                </Tip>
+                                <Form layout="vertical" form={form}>
+                                  <Form.Item
+                                    name="name"
+                                    label={transToNode("orgSettings.deleteModalLabel", {
+                                      name: (
+                                        <span style={{ color: "#4965F2", margin: "0 5px" }}>
+                                          {item.orgName}
+                                        </span>
+                                      ),
+                                    })}
+                                    rules={[
+                                      {
+                                        required: true,
+                                        message: trans("orgSettings.deleteModalTip"),
+                                      },
+                                    ]}
+                                  >
+                                    <Input placeholder={trans("orgSettings.orgName")} />
+                                  </Form.Item>
+                                </Form>
+                              </Content>
+                            ),
+                            onConfirm: () => {
+                              form.submit();
+                              return form.validateFields().then(() => {
+                                const name = form.getFieldValue("name");
+                                if (name === item.orgName) {
+                                  dispatch(deleteOrgAction(item.id));
+                                  form.resetFields();
+                                } else {
+                                  form.setFields([
+                                    {
+                                      name: "name",
+                                      errors: [trans("orgSettings.deleteModalErr")],
+                                    },
+                                  ]);
+                                  throw new Error();
+                                }
+                              });
+                            },
+                            onCancel: () => {
+                              form.resetFields();
+                            },
+                            confirmBtnType: "delete",
+                            okText: trans("orgSettings.deleteModalBtn"),
                           });
-                        },
-                        onCancel: () => {
-                          form.resetFields();
-                        },
-                        confirmBtnType: "delete",
-                        okText: trans("orgSettings.deleteModalBtn"),
-                      });
-                    }}
-                  >
-                    <PopoverIcon tabIndex={-1} />
-                  </EditPopover>
-                )}
-              </OperationWrapper>
-            ),
-          }))}
-        />
+                        }}
+                      >
+                        <PopoverIcon tabIndex={-1} />
+                      </EditPopover>
+                    )}
+                  </OperationWrapper>
+                ),
+              }))}
+            />
+
+            {/* Pagination */}
+            {totalCount > pageSize && (
+              <PaginationContainer>
+                <Pagination
+                  current={currentPage}
+                  total={totalCount}
+                  pageSize={pageSize}
+                  showSizeChanger={false}
+                  showQuickJumper={false}
+                  showTotal={(total, range) => 
+                    `${range[0]}-${range[1]} of ${total} organizations`
+                  }
+                  onChange={handlePageChange}
+                />
+              </PaginationContainer>
+            )}
+          </>
+        )}
       </div>
     </Level1SettingPageContentWithList>
   );
diff --git a/client/packages/lowcoder/src/pages/setting/permission/addGroupUserDialog.tsx b/client/packages/lowcoder/src/pages/setting/permission/addGroupUserDialog.tsx
index 8af0e3cecc..46cad16b67 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/addGroupUserDialog.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/addGroupUserDialog.tsx
@@ -1,11 +1,14 @@
 import Column from "antd/es/table/Column";
 import OrgApi from "api/orgApi";
 import { GroupUser, MEMBER_ROLE, OrgUser } from "constants/orgConstants";
-import { CheckBox, CustomModal } from "lowcoder-design";
-import { CSSProperties, ReactNode, useEffect, useRef, useState } from "react";
+import { CheckBox, CustomModal, Search } from "lowcoder-design";
+import { CSSProperties, ReactNode, useEffect, useRef, useState, useCallback } from "react";
 import { connect, useDispatch } from "react-redux";
 import { AppState } from "redux/reducers";
-import { fetchGroupUsersAction, fetchOrgUsersAction } from "redux/reduxActions/orgActions";
+import { fetchGroupUsersAction, 
+  fetchOrgUsersAction, 
+  fetchGroupPotentialMembersAction 
+} from "redux/reduxActions/orgActions";
 import styled from "styled-components";
 import { StyledTable, UserTableCellWrapper } from "./styledComponents";
 import { formatTimestamp } from "util/dateTimeUtils";
@@ -14,6 +17,7 @@ import { isGroupAdmin } from "util/permissionUtils";
 import { SuperUserIcon } from "lowcoder-design";
 import { EmptyContent } from "pages/common/styledComponent";
 import { trans } from "i18n";
+import { debounce } from "lodash";
 
 const TableWrapper = styled.div`
   margin-right: -16px;
@@ -40,7 +44,25 @@ function AddGroupUserDialog(props: {
   const addableUsers = orgUsers.filter((user) => !groupUserIdMap.has(user.userId));
   const toAddUserIdRecord = useRef<Record<string, boolean>>({});
   const [confirmLoading, setConfirmLoading] = useState(false);
+  const [searchValue, setSearchValue] = useState("")
   const dispatch = useDispatch();
+
+  const debouncedFetchPotentialMembers = useCallback(
+    debounce((searchVal: string) => {
+      dispatch(fetchGroupPotentialMembersAction(searchVal, groupId));
+    }, 500),
+    [dispatch, groupId]
+  );
+
+  useEffect(() => {
+    if (searchValue.length > 2 || searchValue === "") {
+      debouncedFetchPotentialMembers(searchValue);
+    }
+    return () => {
+      debouncedFetchPotentialMembers.cancel();
+    };
+  }, [searchValue, debouncedFetchPotentialMembers]);
+
   useEffect(() => {
     if (dialogVisible) {
       dispatch(fetchOrgUsersAction(orgId));
@@ -92,7 +114,18 @@ function AddGroupUserDialog(props: {
           setDialogVisible(false);
         }}
       >
-        {!addableUsers || addableUsers.length === 0 ? (
+        <Search
+          placeholder={trans("memberSettings.searchMember")}
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          style={{ 
+            width: "100%", 
+            height: "32px", 
+            paddingRight: "20px", 
+            marginBottom: "10px" 
+          }}
+        />
+        {(!addableUsers || addableUsers.length === 0) ? (
           <EmptyContent />
         ) : (
           <TableWrapper>
@@ -106,7 +139,7 @@ function AddGroupUserDialog(props: {
               scroll={{ y: 309 }}
             >
               <Column
-                width="170px"
+                width="200px"
                 title={trans("memberSettings.nameColumn")}
                 dataIndex="name"
                 key="name"
diff --git a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
index c8270eeb4d..1ce0155300 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
@@ -1,9 +1,9 @@
 import { GroupRoleInfo, GroupUser, OrgGroup, TacoRoles } from "constants/orgConstants";
 import { User } from "constants/userConstants";
-import { AddIcon, ArrowIcon, CustomSelect, PackUpIcon, SuperUserIcon } from "lowcoder-design";
+import { AddIcon, ArrowIcon, CustomSelect, PackUpIcon, Search, SuperUserIcon } from "lowcoder-design";
 import { trans } from "i18n";
 import ProfileImage from "pages/common/profileImage";
-import React, { useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch } from "react-redux";
 import {
   deleteGroupUserAction,
@@ -20,7 +20,6 @@ import {
   GroupNameView,
   HeaderBack,
   LAST_ADMIN_QUIT,
-  PermissionHeaderWrapper,
   QuestionTooltip,
   RoleSelectSubTitle,
   RoleSelectTitle,
@@ -31,6 +30,8 @@ import {
 import history from "util/history";
 import { PERMISSION_SETTING } from "constants/routesURL";
 import Column from "antd/es/table/Column";
+import { debounce } from "lodash";
+import { fetchGroupUsrPagination } from "@lowcoder-ee/util/pagination/axios";
 
 const StyledAddIcon = styled(AddIcon)`
   g path {
@@ -38,6 +39,26 @@ const StyledAddIcon = styled(AddIcon)`
   }
 `;
 
+const PermissionHeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 16px;
+`;
+
+const OptionsHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+
+type ElementsState = {
+  elements: any[];
+  total: number;
+  role: string;
+};
+
 type GroupPermissionProp = {
   group: OrgGroup;
   orgId: string;
@@ -47,11 +68,24 @@ type GroupPermissionProp = {
   setModify?: any;
   modify?: boolean;
   loading?: boolean;
+  setElements: React.Dispatch<React.SetStateAction<ElementsState>>;
 };
 
-function GroupUsersPermission(props: GroupPermissionProp) {
-  // const { Column } = TableStyled;
-  const { group, orgId, groupUsers, currentUserGroupRole, currentUser, setModify, modify, loading } = props;
+const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
+  const { 
+    group, 
+    orgId, 
+    groupUsers, 
+    currentUserGroupRole, 
+    currentUser, 
+    setModify, 
+    modify, 
+    loading,
+    setElements
+  } = props;
+  const [searchValue, setSearchValue] = useState("")
+  const dispatch = useDispatch();
+
   const adminCount = groupUsers.filter((user) => isGroupAdmin(user.role)).length;
   const sortedGroupUsers = useMemo(() => {
     return [...groupUsers].sort((a, b) => {
@@ -64,7 +98,31 @@ function GroupUsersPermission(props: GroupPermissionProp) {
       }
     });
   }, [groupUsers]);
-  const dispatch = useDispatch();
+
+  const debouncedFetchPotentialMembers = useCallback(
+    debounce((searchVal: string) => {
+      fetchGroupUsrPagination({groupId: group.groupId, search: searchVal})
+      .then(result => {  
+        if (result.success) {
+          setElements({
+            elements: result.data || [], 
+            total: result.total || 0,
+            role: result.visitorRole || ""
+          });
+        }
+      })
+    }, 500), [dispatch]
+  );
+
+  useEffect(() => {
+    if (searchValue.length > 2 || searchValue === "") {
+      debouncedFetchPotentialMembers(searchValue);
+    }
+    return () => {
+      debouncedFetchPotentialMembers.cancel();
+    };
+  }, [searchValue, debouncedFetchPotentialMembers]);
+
   return (
     <>
       <PermissionHeaderWrapper>
@@ -78,19 +136,31 @@ function GroupUsersPermission(props: GroupPermissionProp) {
           )}
         </HeaderBack>
         {isGroupAdmin(currentUserGroupRole) && !group.syncGroup && (
-          <AddGroupUserDialog
-            groupUsers={groupUsers}
-            orgId={orgId}
-            groupId={group.groupId}
-            setModify={setModify}
-            modify={modify}
-            trigger={
-              <AddMemberButton buttonType="primary" icon={<StyledAddIcon />}>
-                {trans("memberSettings.addMember")}
-              </AddMemberButton>
-            }
-            style={{ marginLeft: "auto" }}
-          />
+          <OptionsHeader>
+            <Search
+              placeholder={trans("memberSettings.searchMember")}
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              style={{ 
+                width: "20%", 
+                minWidth: "160px",
+                height: "32px", 
+                marginTop: 'auto'
+              }}
+            />
+            <AddGroupUserDialog
+              groupUsers={groupUsers}
+              orgId={orgId}
+              groupId={group.groupId}
+              setModify={setModify}
+              modify={modify}
+              trigger={
+                <AddMemberButton buttonType="primary" icon={<StyledAddIcon />}>
+                  {trans("memberSettings.addMember")}
+                </AddMemberButton>
+              }
+            />
+          </OptionsHeader>
         )}
       </PermissionHeaderWrapper>
       <TableStyled
diff --git a/client/packages/lowcoder/src/pages/setting/permission/permissionDetail.tsx b/client/packages/lowcoder/src/pages/setting/permission/permissionDetail.tsx
index 57eb1eb91d..db1bcc08e0 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/permissionDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/permissionDetail.tsx
@@ -3,9 +3,8 @@ import { useSelector } from "react-redux";
 import { getUser } from "redux/selectors/usersSelectors";
 import styled from "styled-components";
 import GroupPermission from "./groupUsersPermission";
-import UsersPermission from "./orgUsersPermission";
 import { useParams } from "react-router-dom";
-import {fetchGroupUsrPagination, fetchOrgGroups, fetchOrgUsrPagination} from "@lowcoder-ee/util/pagination/axios";
+import {fetchGroupUsrPagination, fetchOrgGroups } from "@lowcoder-ee/util/pagination/axios";
 import PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
 import {OrgGroup} from "@lowcoder-ee/constants/orgConstants";
 
@@ -19,13 +18,17 @@ const PermissionContent = styled.div`
   width: 100%;
 `;
 
+export enum GroupUserKey {
+  USERS = "users",
+  ALL_USERS = "All Users"
+}
+
 export default function PermissionSetting(props: {currentPageProp: number, pageSizeProp: number}) {
 
   const {currentPageProp, pageSizeProp} = props;
   const user = useSelector(getUser);
   const [elements, setElements] = useState<any>({ elements: [], total: 0, role: "" });
-  const [group, setGrouop] = useState<OrgGroup>();
-  const [orgMemberElements, setOrgMemberElements] = useState<any>({ elements: [], total: 0 })
+  const [group, setGroup] = useState<OrgGroup>();
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [modify, setModify] = useState(false);
@@ -44,7 +47,11 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
         }
       ).then(result => {
         if (result.success && !!result.data){
-          setGrouop(result.data.find(group => group.groupId === selectKey))
+          if(selectKey === GroupUserKey.USERS) {
+            setGroup(result.data.find(group => group.groupName == GroupUserKey.ALL_USERS))
+          } else {
+            setGroup(result.data.find(group => group.groupId === selectKey))
+          }
         }
         else
           console.error("ERROR: fetchFolderElements", result.error)
@@ -53,13 +60,13 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
   )
 
   useEffect( () => {
-    if (selectKey !== "users" && selectKey) {
+    if (selectKey && group) {
       setLoading(true);
       setError(null);
       
       fetchGroupUsrPagination(
         {
-          groupId: selectKey,
+          groupId: selectKey === GroupUserKey.USERS ? group.groupId : selectKey,
           pageNum: currentPage,
           pageSize: pageSize,
         }
@@ -79,33 +86,8 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
         setLoading(false);
         setError("Failed to load group users. Please try again.");
       });
-    } else {
-      setLoading(true);
-      setError(null);
-      
-      fetchOrgUsrPagination(
-        {
-          orgId: orgId,
-          pageNum: currentPage,
-          pageSize: pageSize,
-        }
-      ).then(result => {
-        setLoading(false);
-        if (result.success){
-          setOrgMemberElements({
-            elements: result.data || [], 
-            total: result.total || 0
-          });
-        }
-        else {
-          setError("Failed to load organization users. Please try again.");
-        }
-      }).catch(err => {
-        setLoading(false);
-        setError("Failed to load organization users. Please try again.");
-      });
-    }
-  }, [currentPage, pageSize, modify, selectKey, orgId]);
+    } 
+  }, [currentPage, pageSize, modify, selectKey, orgId, group]);
 
   if (!orgId) {
     return null;
@@ -118,36 +100,23 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
             {error}
           </div>
         )}
-        
-        {selectKey === "users" ? (
+        {elements && 
+            group && (
             <>
-              <UsersPermission
+              <GroupPermission
+                  group={group}
                   orgId={orgId}
-                  orgUsers={orgMemberElements.elements}
+                  groupUsers={elements.elements}
+                  currentUserGroupRole={elements.role}
                   currentUser={currentUser}
                   setModify={setModify}
                   modify={modify}
                   loading={loading}
+                  setElements={setElements}
               />
-              <PaginationComp setCurrentPage={setCurrentPage} setPageSize={setPageSize} currentPage={currentPage} pageSize={pageSize} total={orgMemberElements.total} />
+              <PaginationComp setCurrentPage={setCurrentPage} setPageSize={setPageSize} currentPage={currentPage} pageSize={pageSize} total={elements.total} />
             </>
-        ) : (
-          group && (
-                <>
-                  <GroupPermission
-                      group={group}
-                      orgId={orgId}
-                      groupUsers={elements.elements}
-                      currentUserGroupRole={elements.role}
-                      currentUser={currentUser}
-                      setModify={setModify}
-                      modify={modify}
-                      loading={loading}
-                  />
-                  <PaginationComp setCurrentPage={setCurrentPage} setPageSize={setPageSize} currentPage={currentPage} pageSize={pageSize} total={elements.total} />
-                </>
-            )
-        )}
+          )}
       </PermissionContent>
   );
 }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/redux/reducers/uiReducers/usersReducer.ts b/client/packages/lowcoder/src/redux/reducers/uiReducers/usersReducer.ts
index be4b3a1dd0..4146dfd625 100644
--- a/client/packages/lowcoder/src/redux/reducers/uiReducers/usersReducer.ts
+++ b/client/packages/lowcoder/src/redux/reducers/uiReducers/usersReducer.ts
@@ -1,3 +1,4 @@
+import { Org } from "@lowcoder-ee/constants/orgConstants";
 import {
   ReduxAction,
   ReduxActionErrorTypes,
@@ -21,6 +22,10 @@ const initialState: UsersReduxState = {
   rawCurrentUser: defaultCurrentUser,
   profileSettingModalVisible: false,
   apiKeys: [],
+  workspaces: {
+    items: [],
+    totalCount: 0,
+  }
 };
 
 const usersReducer = createReducer(initialState, {
@@ -190,6 +195,21 @@ const usersReducer = createReducer(initialState, {
     ...state,
     apiKeys: action.payload,
   }),
+
+  
+  [ReduxActionTypes.FETCH_WORKSPACES_SUCCESS]: (
+    state: UsersReduxState,
+    action: ReduxAction<{ items: Org[], totalCount: number, isLoadMore?: boolean }>
+  ) => ({
+    ...state,
+    workspaces: {
+      items: action.payload.isLoadMore 
+        ? [...state.workspaces.items, ...action.payload.items] // Append for load more
+        : action.payload.items, // Replace for new search/initial load
+      totalCount: action.payload.totalCount
+    }
+  }),
+  
 });
 
 export interface UsersReduxState {
@@ -205,6 +225,13 @@ export interface UsersReduxState {
   error: string;
   profileSettingModalVisible: boolean;
   apiKeys: Array<ApiKey>;
+
+  // NEW state for workspaces
+  // NEW: Separate workspace state
+  workspaces: {
+    items: Org[];           // Current page of workspaces
+    totalCount: number;     // Total workspaces available
+  };
 }
 
 export default usersReducer;
diff --git a/client/packages/lowcoder/src/redux/reduxActions/orgActions.ts b/client/packages/lowcoder/src/redux/reduxActions/orgActions.ts
index 196d7c1554..2bb8374ca9 100644
--- a/client/packages/lowcoder/src/redux/reduxActions/orgActions.ts
+++ b/client/packages/lowcoder/src/redux/reduxActions/orgActions.ts
@@ -81,6 +81,14 @@ export const deleteGroupUserAction = (payload: RemoveGroupUserPayload) => ({
   payload: payload,
 });
 
+export const fetchGroupPotentialMembersAction = (searchName: string, groupId: string) => ({
+  type: ReduxActionTypes.FETCH_GROUP_POTENTIAL_MEMBERS,
+  payload: {
+    searchName,
+    groupId
+  },
+});
+
 export type AddGroupUserPayload = {
   role: string;
   groupId: string;
@@ -191,4 +199,14 @@ export const fetchLastMonthAPIUsageActionSuccess = (payload: OrgLastMonthAPIUsag
     type: ReduxActionTypes.FETCH_ORG_LAST_MONTH_API_USAGE_SUCCESS,
     payload: payload,
   };
-};
\ No newline at end of file
+};
+
+export const fetchWorkspacesAction = (page: number = 1,pageSize: number = 20, search?: string, isLoadMore?: boolean) => ({
+  type: ReduxActionTypes.FETCH_WORKSPACES_INIT,
+  payload: { page, pageSize, search, isLoadMore }
+});
+
+export const loadMoreWorkspacesAction = (page: number, search?: string) => ({
+  type: ReduxActionTypes.FETCH_WORKSPACES_INIT,
+  payload: { page, search, isLoadMore: true }
+});
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/redux/sagas/folderSagas.ts b/client/packages/lowcoder/src/redux/sagas/folderSagas.ts
index 62b74659e8..9db0a1eee6 100644
--- a/client/packages/lowcoder/src/redux/sagas/folderSagas.ts
+++ b/client/packages/lowcoder/src/redux/sagas/folderSagas.ts
@@ -118,7 +118,19 @@ export function* fetchFolderElementsSaga(action: ReduxAction<FetchFolderElements
           type: ReduxActionTypes.FETCH_ALL_FOLDERS_SUCCESS,
           payload: response.data.data.filter((m) => m.folder),
         });
+
+        // filter out applications with NORMAL status
+        
+        const applications = response.data.data.filter((item): item is ApplicationMeta => 
+          !item.folder && item.applicationStatus === "NORMAL"
+        );
+        
+        yield put({
+          type: ReduxActionTypes.FETCH_ALL_APPLICATIONS_SUCCESS,
+          payload: applications,
+        });
       }
+      
       yield put({
         type: ReduxActionTypes.FETCH_FOLDER_ELEMENTS_SUCCESS,
         payload: { parentFolderId: action.payload.folderId, elements: response.data.data },
diff --git a/client/packages/lowcoder/src/redux/sagas/orgSagas.ts b/client/packages/lowcoder/src/redux/sagas/orgSagas.ts
index f4b2d3d3f2..f427eeb92b 100644
--- a/client/packages/lowcoder/src/redux/sagas/orgSagas.ts
+++ b/client/packages/lowcoder/src/redux/sagas/orgSagas.ts
@@ -25,11 +25,14 @@ import {
   fetchLastMonthAPIUsageActionSuccess,
   UpdateUserGroupRolePayload,
   UpdateUserOrgRolePayload,
+  fetchWorkspacesAction,
 } from "redux/reduxActions/orgActions";
 import { getUser } from "redux/selectors/usersSelectors";
 import { validateResponse } from "api/apiUtils";
 import { User } from "constants/userConstants";
 import { getUserSaga } from "redux/sagas/userSagas";
+import { GetMyOrgsResponse } from "@lowcoder-ee/api/userApi";
+import UserApi from "@lowcoder-ee/api/userApi";
 
 export function* updateGroupSaga(action: ReduxAction<UpdateGroupActionPayload>) {
   try {
@@ -104,11 +107,30 @@ export function* updateUserGroupRoleSaga(action: ReduxAction<UpdateUserGroupRole
   }
 }
 
+export function* fetchGroupPotentialMembersSaga(action: ReduxAction<{ searchName: string, groupId: string }>) {
+  try {
+    const response: AxiosResponse<OrgUsersResponse> = yield call(
+      OrgApi.fetchGroupPotentialMembers,
+      action.payload.searchName,
+      action.payload.groupId
+    );
+    const isValidResponse: boolean = validateResponse(response);
+    if (isValidResponse) {
+      yield put({
+        type: ReduxActionTypes.FETCH_ORG_ALL_USERS_SUCCESS,
+        payload: response.data.data,
+      });
+    }
+  } catch (error) {
+    log.error(error);
+  }
+}
+
 export function* fetchOrgUsersSaga(action: ReduxAction<{ orgId: string }>) {
   try {
     const response: AxiosResponse<OrgUsersResponse> = yield call(
       OrgApi.fetchOrgUsers,
-      action.payload.orgId
+      action.payload.orgId,
     );
     const isValidResponse: boolean = validateResponse(response);
     if (isValidResponse) {
@@ -268,6 +290,8 @@ export function* deleteOrgSaga(action: ReduxAction<{ orgId: string }>) {
           orgId: action.payload.orgId,
         },
       });
+      // Refetch workspaces to update the profile dropdown
+      yield put(fetchWorkspacesAction(1, 10));
     }
   } catch (error: any) {
     messageInstance.error(error.message);
@@ -281,6 +305,8 @@ export function* updateOrgSaga(action: ReduxAction<UpdateOrgPayload>) {
     const isValidResponse: boolean = validateResponse(response);
     if (isValidResponse) {
       yield put(updateOrgSuccess(action.payload));
+      // Refetch workspaces to update the profile dropdown
+      yield put(fetchWorkspacesAction(1, 10));
     }
   } catch (error: any) {
     messageInstance.error(error.message);
@@ -324,6 +350,44 @@ export function* fetchLastMonthAPIUsageSaga(action: ReduxAction<{
   }
 }
 
+// fetch my orgs
+// In userSagas.ts
+export function* fetchWorkspacesSaga(action: ReduxAction<{page: number, pageSize: number, search?: string, isLoadMore?: boolean}>) {
+  try {
+    const { page, pageSize, search, isLoadMore } = action.payload;
+    
+    const response: AxiosResponse<GetMyOrgsResponse> = yield call(
+      UserApi.getMyOrgs, 
+      page,        // pageNum
+      pageSize,           // pageSize (changed to 5 for testing)
+      search       // orgName
+    );
+    
+    if (validateResponse(response)) {
+      const apiData = response.data.data;
+      
+      // Transform orgId/orgName to match Org interface
+      const transformedItems = apiData.data.map(item => ({
+        id: item.orgId,
+        name: item.orgName,
+        createdAt: item.createdAt,
+        updatedAt: item.updatedAt,
+      }));
+        
+      yield put({
+        type: ReduxActionTypes.FETCH_WORKSPACES_SUCCESS,
+        payload: {
+          items: transformedItems,
+          totalCount: apiData.total,
+          isLoadMore: isLoadMore || false
+        }
+      });
+    }
+  } catch (error: any) {
+    console.error('Error fetching workspaces:', error);
+  }
+}
+
 export default function* orgSagas() {
   yield all([
     takeLatest(ReduxActionTypes.UPDATE_GROUP_INFO, updateGroupSaga),
@@ -334,6 +398,7 @@ export default function* orgSagas() {
     takeLatest(ReduxActionTypes.UPDATE_USER_ORG_ROLE, updateUserOrgRoleSaga),
     takeLatest(ReduxActionTypes.UPDATE_USER_GROUP_ROLE, updateUserGroupRoleSaga),
     takeLatest(ReduxActionTypes.FETCH_ORG_ALL_USERS, fetchOrgUsersSaga),
+    takeLatest(ReduxActionTypes.FETCH_GROUP_POTENTIAL_MEMBERS, fetchGroupPotentialMembersSaga),
     takeLatest(ReduxActionTypes.DELETE_ORG_USER, deleteOrgUserSaga),
     takeLatest(ReduxActionTypes.QUIT_GROUP, quitGroupSaga),
     takeLatest(ReduxActionTypes.QUIT_ORG, quitOrgSaga),
@@ -343,5 +408,8 @@ export default function* orgSagas() {
     takeLatest(ReduxActionTypes.UPDATE_ORG, updateOrgSaga),
     takeLatest(ReduxActionTypes.FETCH_ORG_API_USAGE, fetchAPIUsageSaga),
     takeLatest(ReduxActionTypes.FETCH_ORG_LAST_MONTH_API_USAGE, fetchLastMonthAPIUsageSaga),
+    takeLatest(ReduxActionTypes.FETCH_WORKSPACES_INIT, fetchWorkspacesSaga),
+
+
   ]);
 }
diff --git a/client/packages/lowcoder/src/redux/sagas/userSagas.ts b/client/packages/lowcoder/src/redux/sagas/userSagas.ts
index 5b980953fd..d0dfdba068 100644
--- a/client/packages/lowcoder/src/redux/sagas/userSagas.ts
+++ b/client/packages/lowcoder/src/redux/sagas/userSagas.ts
@@ -25,6 +25,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { AuthSearchParams } from "constants/authConstants";
 import { saveAuthSearchParams } from "pages/userAuth/authUtils";
 import { initTranslator } from "i18n";
+import { fetchWorkspacesAction } from "../reduxActions/orgActions";
 
 function validResponseData(response: AxiosResponse<ApiResponse>) {
   return response && response.data && response.data.data;
@@ -71,10 +72,13 @@ export function* getUserSaga() {
         orgs: orgs,
         orgRoleMap: orgRoleMap,
       };
+
       yield put({
         type: ReduxActionTypes.FETCH_USER_DETAILS_SUCCESS,
         payload: user,
       });
+      // fetch all workspaces and store in redux
+      yield put(fetchWorkspacesAction(1, 10));     
     }
   } catch (error: any) {
     yield put({
diff --git a/client/packages/lowcoder/src/redux/selectors/orgSelectors.ts b/client/packages/lowcoder/src/redux/selectors/orgSelectors.ts
index 2115f1499b..322f414f7b 100644
--- a/client/packages/lowcoder/src/redux/selectors/orgSelectors.ts
+++ b/client/packages/lowcoder/src/redux/selectors/orgSelectors.ts
@@ -1,4 +1,7 @@
+import { Org } from "@lowcoder-ee/constants/orgConstants";
+import { getUser } from "./usersSelectors";
 import { AppState } from "redux/reducers";
+import { getHomeOrg } from "./applicationSelector";
 
 export const getOrgUsers = (state: AppState) => {
   return state.ui.org.orgUsers;
@@ -27,3 +30,18 @@ export const getOrgApiUsage = (state: AppState) => {
 export const getOrgLastMonthApiUsage = (state: AppState) => {
   return state.ui.org.lastMonthApiUsage;
 }
+
+// Add to usersSelectors.ts
+export const getWorkspaces = (state: AppState) => state.ui.users.workspaces;
+
+export const getCurrentOrg = (state: AppState): Pick<Org, 'id' | 'name'> | undefined => {
+  const homeOrg = getHomeOrg(state);
+  if (!homeOrg) {
+    return undefined;
+  }
+  
+  return {
+    id: homeOrg.id,
+    name: homeOrg.name,
+  };
+};
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/util/context/EnterpriseContext.tsx b/client/packages/lowcoder/src/util/context/EnterpriseContext.tsx
index d377810687..ba8e911c97 100644
--- a/client/packages/lowcoder/src/util/context/EnterpriseContext.tsx
+++ b/client/packages/lowcoder/src/util/context/EnterpriseContext.tsx
@@ -1,8 +1,9 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
-import { fetchEnterpriseLicense, fetchEnvironments } from 'redux/reduxActions/enterpriseActions';
+import { fetchBrandingSetting, fetchEnterpriseLicense, fetchEnvironments } from 'redux/reduxActions/enterpriseActions';
 import { selectEnterpriseEditionStatus } from '@lowcoder-ee/redux/selectors/enterpriseSelectors';
 import { useDispatch, useSelector } from 'react-redux';
 import { isEEEnvironment } from "util/envUtils";
+import { getUser } from '@lowcoder-ee/redux/selectors/usersSelectors';
 
 interface EnterpriseContextValue {
     isEnterpriseActive: boolean;
@@ -18,18 +19,20 @@ export const EnterpriseProvider: React.FC<ProviderProps> = ({ children }) => {
     const dispatch = useDispatch();
     const isEnterpriseActiveRedux = useSelector(selectEnterpriseEditionStatus); // From Redux store
     const [isEnterpriseActive, setIsEnterpriseActive] = useState(false);
+    const user = useSelector(getUser);
   
     useEffect(() => {
       if (isEEEnvironment()) {
         // Fetch the enterprise license only if we're in an EE environment
         dispatch(fetchEnterpriseLicense());
         dispatch(fetchEnvironments());
+        dispatch(fetchBrandingSetting({ orgId: user.currentOrgId, fallbackToGlobal: true }))
       } else {
         // Set the state to false for non-EE environments
         // setEEActiveState(false);
         setIsEnterpriseActive(false);
       }
-    }, [dispatch]);
+    }, [dispatch, user.currentOrgId]);
   
     useEffect(() => {
       if (isEEEnvironment()) {
diff --git a/client/packages/lowcoder/src/util/curlUtils.ts b/client/packages/lowcoder/src/util/curlUtils.ts
new file mode 100644
index 0000000000..8e2fd24b71
--- /dev/null
+++ b/client/packages/lowcoder/src/util/curlUtils.ts
@@ -0,0 +1,114 @@
+/**
+ * Utility to convert parsed cURL data from @bany/curl-to-json library
+ * to the format expected by REST API query components
+ */
+
+// Body type mapping to match the dropdown values in httpQuery.tsx
+const CONTENT_TYPE_TO_BODY_TYPE: Record<string, string> = {
+  "application/json": "application/json",
+  "text/plain": "text/plain", 
+  "text/html": "text/plain",
+  "text/xml": "text/plain",
+  "application/xml": "text/plain",
+  "application/x-www-form-urlencoded": "application/x-www-form-urlencoded",
+  "multipart/form-data": "multipart/form-data",
+};
+
+/**
+ * Parse URL-encoded form data - handles both string and object input
+ */
+function parseUrlEncodedData(data: string | object): Array<{ key: string; value: string; type: string }> {
+  if (!data) {
+    return [{ key: "", value: "", type: "text" }];
+  }
+
+  try {
+    let result: Array<{ key: string; value: string; type: string }> = [];
+
+    if (typeof data === 'object') {
+      // @bany/curl-to-json already parsed it into an object
+      Object.entries(data).forEach(([key, value]) => {
+        result.push({
+          key: key,
+          value: decodeURIComponent(String(value).replace(/\+/g, ' ')), // Handle URL encoding
+          type: "text"
+        });
+      });
+    } else if (typeof data === 'string') {
+      // Raw URL-encoded string - use URLSearchParams
+      const params = new URLSearchParams(data);
+      params.forEach((value, key) => {
+        result.push({
+          key: key,
+          value: value,
+          type: "text"
+        });
+      });
+    }
+
+    return result.length > 0 ? result : [{ key: "", value: "", type: "text" }];
+  } catch (error) {
+    console.warn('Failed to parse URL-encoded data:', error);
+    return [{ key: "", value: "", type: "text" }];
+  }
+}
+
+export function processCurlData(curlData: any) {
+  if (!curlData) return null;
+
+
+  // Convert headers object to key-value array format expected by UI
+  const headers = curlData.header 
+    ? Object.entries(curlData.header).map(([key, value]) => ({ key, value }))
+    : [{ key: "", value: "" }];
+
+  // Convert query params object to key-value array format expected by UI
+  const params = curlData.params
+    ? Object.entries(curlData.params).map(([key, value]) => ({ key, value }))
+    : [{ key: "", value: "" }];
+
+  // Get request body - @bany/curl-to-json may use 'body' or 'data'
+  const bodyContent = curlData.body !== undefined ? curlData.body : curlData.data;
+
+  // Determine body type based on Content-Type header or content structure
+  let bodyType = "none";
+  let bodyFormData = [{ key: "", value: "", type: "text" }];
+  let processedBody = "";
+
+  if (bodyContent !== undefined && bodyContent !== "") {
+    const contentTypeHeader = curlData.header?.["Content-Type"] || curlData.header?.["content-type"];
+    
+    if (contentTypeHeader) {
+      // Extract base content type (remove charset, boundary, etc.)
+      const baseContentType = contentTypeHeader.split(';')[0].trim().toLowerCase();
+      bodyType = CONTENT_TYPE_TO_BODY_TYPE[baseContentType] || "text/plain";
+    } else {
+      // Fallback: infer from content structure
+      if (typeof bodyContent === "object") {
+        bodyType = "application/json";
+      } else {
+        bodyType = "text/plain";
+      }
+    }
+
+    // Handle different body types
+    if (bodyType === "application/x-www-form-urlencoded") {
+      bodyFormData = parseUrlEncodedData(bodyContent);
+      processedBody = ""; // Form data goes in bodyFormData, not body
+    } else if (typeof bodyContent === "object") {
+      processedBody = JSON.stringify(bodyContent, null, 2);
+    } else {
+      processedBody = bodyContent;
+    }
+  }
+
+  return {
+    method: curlData.method || "GET",
+    url: curlData.url || "",
+    headers,
+    params,
+    bodyType,
+    body: processedBody,
+    bodyFormData,
+  };
+} 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/util/pagination/axios.ts b/client/packages/lowcoder/src/util/pagination/axios.ts
index d03bf1800c..e59ccbfec1 100644
--- a/client/packages/lowcoder/src/util/pagination/axios.ts
+++ b/client/packages/lowcoder/src/util/pagination/axios.ts
@@ -102,6 +102,22 @@ export const fetchGroupUsrPagination = async (request: fetchGroupUserRequestType
     }
 }
 
+export const fetchAvailableGroupsMembers = async (applicationId: string, search: string) => {
+    try{
+        const response = await ApplicationApi.getAvailableGroupsMembers(applicationId, search)
+        return {
+            success: true,
+            data: response.data.data
+        }
+    } catch (error: any) {
+        console.error('Failed to fetch data: ', error)
+        return {
+            success: false,
+            error: error
+        }
+    }
+}
+
 export const fetchOrgUsrPagination = async (request: fetchOrgUserRequestType)=> {
     try {
         const response = await OrgApi.fetchOrgUsersPagination(request);
diff --git a/client/packages/lowcoder/src/util/pagination/type.ts b/client/packages/lowcoder/src/util/pagination/type.ts
index 3c449b7e11..870b35f0d9 100644
--- a/client/packages/lowcoder/src/util/pagination/type.ts
+++ b/client/packages/lowcoder/src/util/pagination/type.ts
@@ -87,6 +87,7 @@ export interface fetchGroupUserRequestType {
     groupId: string;
     pageNum?: number;
     pageSize?: number;
+    search?: string
 }
 
 export interface fetchQueryLibraryPaginationRequestType {
diff --git a/client/packages/lowcoder/src/util/useWorkspaceManager.ts b/client/packages/lowcoder/src/util/useWorkspaceManager.ts
new file mode 100644
index 0000000000..59732ac539
--- /dev/null
+++ b/client/packages/lowcoder/src/util/useWorkspaceManager.ts
@@ -0,0 +1,190 @@
+import { useReducer, useEffect, useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { debounce } from 'lodash';
+import { Org } from 'constants/orgConstants';
+import { getWorkspaces } from 'redux/selectors/orgSelectors';
+import UserApi from 'api/userApi';
+
+// State interface for the workspace manager
+interface WorkspaceState {
+  searchTerm: string;
+  currentPage: number;
+  currentPageWorkspaces: Org[];
+  totalCount: number;
+  isLoading: boolean;
+}
+
+// Action types for the reducer
+type WorkspaceAction =
+  | { type: 'SET_SEARCH_TERM'; payload: string }
+  | { type: 'SET_PAGE'; payload: number }
+  | { type: 'SET_LOADING'; payload: boolean }
+  | { type: 'SET_WORKSPACES'; payload: { workspaces: Org[]; total: number } }
+  | { type: 'RESET'; payload: { totalCount: number } };
+
+// Initial state
+const initialState: WorkspaceState = {
+  searchTerm: '',
+  currentPage: 1,
+  currentPageWorkspaces: [],
+  totalCount: 0,
+  isLoading: false,
+};
+
+// Reducer function - handles state transitions
+function workspaceReducer(state: WorkspaceState, action: WorkspaceAction): WorkspaceState {
+  switch (action.type) {
+    case 'SET_SEARCH_TERM':
+      return { 
+        ...state, 
+        searchTerm: action.payload,
+        currentPage: 1 , 
+        isLoading: Boolean(action.payload.trim())
+      };
+    case 'SET_PAGE':
+      return { ...state, currentPage: action.payload };
+    case 'SET_LOADING':
+      return { ...state, isLoading: action.payload };
+    case 'SET_WORKSPACES':
+      return {
+        ...state,
+        currentPageWorkspaces: action.payload.workspaces,
+        totalCount: action.payload.total,
+        isLoading: false,
+      };
+    case 'RESET':
+      return {
+        ...initialState,
+        totalCount: action.payload.totalCount,
+      };
+    default:
+      return state;
+  }
+}
+
+// Hook interface
+interface UseWorkspaceManagerOptions {
+  pageSize?: number;
+}
+
+// Main hook
+export function useWorkspaceManager({ 
+  pageSize = 10 
+}: UseWorkspaceManagerOptions) {
+  // Get workspaces from Redux
+  const workspaces = useSelector(getWorkspaces);
+  
+  // Initialize reducer with Redux total count
+  const [state, dispatch] = useReducer(workspaceReducer, {
+    ...initialState,
+    totalCount: workspaces.totalCount,
+  });
+
+
+  // API call to fetch workspaces (memoized for stable reference)
+  const fetchWorkspacesPage = useCallback(
+    async (page: number, search?: string) => {
+      dispatch({ type: 'SET_LOADING', payload: true });
+
+      try {
+        const response = await UserApi.getMyOrgs(page, pageSize, search);
+        if (response.data.success) {
+          const apiData = response.data.data;
+          const transformedItems = apiData.data.map(item => ({
+            id: item.orgId,
+            name: item.orgName,
+            createdAt: item.createdAt,
+            updatedAt: item.updatedAt,
+          }));
+
+          dispatch({
+            type: 'SET_WORKSPACES',
+            payload: {
+              workspaces: transformedItems as Org[],
+              total: apiData.total,
+            },
+          });
+        }
+      } catch (error) {
+        console.error('Error fetching workspaces:', error);
+        dispatch({ type: 'SET_WORKSPACES', payload: { workspaces: [], total: 0 } });
+      }
+    },
+    [dispatch, pageSize]
+  );
+
+  // Debounced search function (memoized to keep a single instance across renders)
+  const debouncedSearch = useMemo(() =>
+    debounce(async (term: string) => {
+      if (!term.trim()) {
+        // Clear search - reset to Redux data
+        dispatch({
+          type: 'SET_WORKSPACES',
+          payload: { workspaces: [], total: workspaces.totalCount },
+        });
+        return;
+      }
+
+      // Perform search
+      await fetchWorkspacesPage(1, term);
+    }, 500)
+  , [dispatch, fetchWorkspacesPage, workspaces.totalCount]);
+
+  // Cleanup debounce on unmount
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+
+  // Handle search input change
+  const handleSearchChange = (value: string) => {
+    dispatch({ type: 'SET_SEARCH_TERM', payload: value });
+    debouncedSearch(value);
+  };
+
+  // Handle page change
+  const handlePageChange = (page: number) => {
+    dispatch({ type: 'SET_PAGE', payload: page });
+    
+    if (page === 1 && !state.searchTerm.trim()) {
+      // Page 1 + no search = use Redux data
+      dispatch({ 
+        type: 'SET_WORKSPACES', 
+        payload: { workspaces: [], total: workspaces.totalCount } 
+      });
+    } else {
+      // Other pages or search = fetch from API
+      fetchWorkspacesPage(page, state.searchTerm.trim() || undefined);
+    }
+  };
+
+  // Determine which workspaces to display
+  const displayWorkspaces = (() => {
+    if (state.searchTerm.trim() || state.currentPage > 1) {
+      return state.currentPageWorkspaces; // API results
+    }
+    return workspaces.items; // Redux data for page 1
+  })();
+
+  // Determine current total count
+  const currentTotalCount = state.searchTerm.trim() 
+    ? state.totalCount 
+    : workspaces.totalCount;
+
+  return {
+    // State
+    searchTerm: state.searchTerm,
+    currentPage: state.currentPage,
+    isLoading: state.isLoading,
+    displayWorkspaces,
+    totalCount: currentTotalCount,
+    
+    // Actions
+    handleSearchChange,
+    handlePageChange,
+    
+    // Config
+    pageSize,
+  };
+}
\ No newline at end of file
diff --git a/client/yarn.lock b/client/yarn.lock
index d15e8a065b..e8357b3c08 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -45,6 +45,71 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ai-sdk/openai@npm:^1.3.22":
+  version: 1.3.22
+  resolution: "@ai-sdk/openai@npm:1.3.22"
+  dependencies:
+    "@ai-sdk/provider": 1.1.3
+    "@ai-sdk/provider-utils": 2.2.8
+  peerDependencies:
+    zod: ^3.0.0
+  checksum: 5572a349c93cb4953e4afcb837870eef876f022b8a931a52820a8d51106c67382cd77c1defc8725d43d8e03d5baf48c52d4b198c8fa68e1a724408567fc2d62a
+  languageName: node
+  linkType: hard
+
+"@ai-sdk/provider-utils@npm:2.2.8":
+  version: 2.2.8
+  resolution: "@ai-sdk/provider-utils@npm:2.2.8"
+  dependencies:
+    "@ai-sdk/provider": 1.1.3
+    nanoid: ^3.3.8
+    secure-json-parse: ^2.7.0
+  peerDependencies:
+    zod: ^3.23.8
+  checksum: 15487a4b4f1cc4eb72d7fc7afb71506f7bf439b538ef98b0c189a2b6d0dd72f10614c716c2206390b2624d6aeeb0799a0dad86010f6a505bbd9bd1b1d76adc60
+  languageName: node
+  linkType: hard
+
+"@ai-sdk/provider@npm:1.1.3, @ai-sdk/provider@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "@ai-sdk/provider@npm:1.1.3"
+  dependencies:
+    json-schema: ^0.4.0
+  checksum: 197b5907aaca7d96b0d114c3456d46fa1134e6d98bb22617c2bd28b3592c1ab79d524ea894209cedc0e74695ee250b2a32de7d084122fd047565b64cbba009bb
+  languageName: node
+  linkType: hard
+
+"@ai-sdk/react@npm:*, @ai-sdk/react@npm:1.2.12":
+  version: 1.2.12
+  resolution: "@ai-sdk/react@npm:1.2.12"
+  dependencies:
+    "@ai-sdk/provider-utils": 2.2.8
+    "@ai-sdk/ui-utils": 1.2.11
+    swr: ^2.2.5
+    throttleit: 2.1.0
+  peerDependencies:
+    react: ^18 || ^19 || ^19.0.0-rc
+    zod: ^3.23.8
+  peerDependenciesMeta:
+    zod:
+      optional: true
+  checksum: 2bb15f4e9416c6cf17e66581435497e9ed46d8e19be657a8e3507c847017f9aa0fb9c64b989890d5b9614468df6ee94e271bd96ef65212fd193e2e356a84c54b
+  languageName: node
+  linkType: hard
+
+"@ai-sdk/ui-utils@npm:*, @ai-sdk/ui-utils@npm:1.2.11":
+  version: 1.2.11
+  resolution: "@ai-sdk/ui-utils@npm:1.2.11"
+  dependencies:
+    "@ai-sdk/provider": 1.1.3
+    "@ai-sdk/provider-utils": 2.2.8
+    zod-to-json-schema: ^3.24.1
+  peerDependencies:
+    zod: ^3.23.8
+  checksum: 8ea01d026923aae73a06810f33ce24020fc7f001331ac0b801d2a8be576d42353abdd3344278dcfdb4eb43914c38b4fb7d3305354a6cd2ba0cb5359f1fd01a49
+  languageName: node
+  linkType: hard
+
 "@ampproject/remapping@npm:^2.2.0":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
@@ -143,6 +208,113 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@assistant-ui/react-ai-sdk@npm:^0.10.14":
+  version: 0.10.14
+  resolution: "@assistant-ui/react-ai-sdk@npm:0.10.14"
+  dependencies:
+    "@ai-sdk/react": "*"
+    "@ai-sdk/ui-utils": "*"
+    "@assistant-ui/react-edge": 0.2.12
+    "@radix-ui/react-use-callback-ref": ^1.1.1
+    "@types/json-schema": ^7.0.15
+    zod: ^3.25.64
+    zustand: ^5.0.5
+  peerDependencies:
+    "@assistant-ui/react": ^0.10.24
+    "@types/react": "*"
+    react: ^18 || ^19 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 1deb3310ca1cf3b901e4afe06e1fd7256759f2b55e8e658ec56a2075636bdd61a670cf373b3a1f2b9877674fc62df9c18c79852c0a3a05f97063cc57b15b9cf7
+  languageName: node
+  linkType: hard
+
+"@assistant-ui/react-edge@npm:0.2.12":
+  version: 0.2.12
+  resolution: "@assistant-ui/react-edge@npm:0.2.12"
+  dependencies:
+    "@ai-sdk/provider": ^1.1.3
+    assistant-stream: ^0.2.17
+    json-schema: ^0.4.0
+    zod: ^3.25.64
+    zod-to-json-schema: ^3.24.5
+  peerDependencies:
+    "@assistant-ui/react": "*"
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^18 || ^19 || ^19.0.0-rc
+    react-dom: ^18 || ^19 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 6d533f26e533b7d177689ce3aa8d6b6fe0077d1f77d9f5b3707bae09bf084b7ba629a242e92fdf7f99328edc7521f3d0845587e961f19bce55c820ece7bba828
+  languageName: node
+  linkType: hard
+
+"@assistant-ui/react-markdown@npm:^0.10.5":
+  version: 0.10.5
+  resolution: "@assistant-ui/react-markdown@npm:0.10.5"
+  dependencies:
+    "@radix-ui/react-primitive": ^2.1.3
+    "@radix-ui/react-use-callback-ref": ^1.1.1
+    "@types/hast": ^3.0.4
+    classnames: ^2.5.1
+    react-markdown: ^10.1.0
+  peerDependencies:
+    "@assistant-ui/react": ^0.10.24
+    "@types/react": "*"
+    react: ^18 || ^19 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 85991a87a04f34c68b0290dfa6061e760b90bdcef694f7b938138b34836eaafe7dd0159faa54e262c227007dd8b912e5cab53329a99c26561a91a0a17d14a2ac
+  languageName: node
+  linkType: hard
+
+"@assistant-ui/react@npm:^0.10.24":
+  version: 0.10.24
+  resolution: "@assistant-ui/react@npm:0.10.24"
+  dependencies:
+    "@radix-ui/primitive": ^1.1.2
+    "@radix-ui/react-compose-refs": ^1.1.2
+    "@radix-ui/react-context": ^1.1.2
+    "@radix-ui/react-popover": ^1.1.14
+    "@radix-ui/react-primitive": ^2.1.3
+    "@radix-ui/react-slot": ^1.2.3
+    "@radix-ui/react-use-callback-ref": ^1.1.1
+    "@radix-ui/react-use-escape-keydown": ^1.1.1
+    "@standard-schema/spec": ^1.0.0
+    assistant-cloud: 0.0.2
+    assistant-stream: ^0.2.17
+    json-schema: ^0.4.0
+    nanoid: 5.1.5
+    react-textarea-autosize: ^8.5.9
+    zod: ^3.25.64
+    zustand: ^5.0.5
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^18 || ^19 || ^19.0.0-rc
+    react-dom: ^18 || ^19 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 4f9483464ac24caf7271161683dc8a8ab17c2263b16ebb5f1a4da75ea1ecda93048f93c7b06c90202e76215d72beb190408d3833ab54e4d19bdbd0ee2523a5f3
+  languageName: node
+  linkType: hard
+
+"@assistant-ui/styles@npm:^0.1.13":
+  version: 0.1.13
+  resolution: "@assistant-ui/styles@npm:0.1.13"
+  checksum: edbe7f3aa144eb823830f662cc1f44cfe3a53fff05f1ec918a7e0a692cad86a276069c7834531102ff37125070cc42dfa84380c8daeee3cdbceae0d42c517f64
+  languageName: node
+  linkType: hard
+
 "@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.22.5, @babel/code-frame@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/code-frame@npm:7.27.1"
@@ -1682,6 +1854,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bany/curl-to-json@npm:^1.2.8":
+  version: 1.2.8
+  resolution: "@bany/curl-to-json@npm:1.2.8"
+  dependencies:
+    minimist: ^1.2.8
+  checksum: 4f2c095c3e3194e9e3e717cf766a66c8ca320c2f10b118d52a8d8d2b842b6760af656a966ec3ce9e9cf774909b2507a2d1417c7f3d98b6773f5ae935be9191b6
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -2172,6 +2353,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.7.2":
+  version: 1.7.2
+  resolution: "@floating-ui/core@npm:1.7.2"
+  dependencies:
+    "@floating-ui/utils": ^0.2.10
+  checksum: aea540ea0101daf83e5beb2769af81f0532dcb8514dbee9d4c0a06576377d56dbfd4e5c3b031359594a26649734d1145bbd5524e8a573a745a5fcadc6b307906
+  languageName: node
+  linkType: hard
+
 "@floating-ui/dom@npm:^1.4.2":
   version: 1.7.0
   resolution: "@floating-ui/dom@npm:1.7.0"
@@ -2182,6 +2372,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/dom@npm:^1.7.2":
+  version: 1.7.2
+  resolution: "@floating-ui/dom@npm:1.7.2"
+  dependencies:
+    "@floating-ui/core": ^1.7.2
+    "@floating-ui/utils": ^0.2.10
+  checksum: 232d6668693cfecec038f3fb1f5398eace340427a9108701b895136c18d303d8bdd6237dce224626abf56a5a4592db776fbd0d187aa0f72c729bfca14a474b65
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:^2.0.0":
+  version: 2.1.4
+  resolution: "@floating-ui/react-dom@npm:2.1.4"
+  dependencies:
+    "@floating-ui/dom": ^1.7.2
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: be2cc094b0c5cd7f6a06c6c58944e4f070e231bdc8d9f84fc8246eedf91e1545a8a9e6d8560664054de126aae6520da57a30b7d81433cb2625641a08eea8f029
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.10":
+  version: 0.2.10
+  resolution: "@floating-ui/utils@npm:0.2.10"
+  checksum: ffc4c24a46a665cfd0337e9aaf7de8415b572f8a0f323af39175e4b575582aed13d172e7f049eedeece9eaf022bad019c140a2d192580451984ae529bdf1285c
+  languageName: node
+  linkType: hard
+
 "@floating-ui/utils@npm:^0.2.9":
   version: 0.2.9
   resolution: "@floating-ui/utils@npm:0.2.9"
@@ -3128,6 +3347,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@opentelemetry/api@npm:1.9.0":
+  version: 1.9.0
+  resolution: "@opentelemetry/api@npm:1.9.0"
+  checksum: 9e88e59d53ced668f3daaecfd721071c5b85a67dd386f1c6f051d1be54375d850016c881f656ffbe9a03bedae85f7e89c2f2b635313f9c9b195ad033cdc31020
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -3149,6 +3375,423 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/primitive@npm:1.1.2, @radix-ui/primitive@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/primitive@npm:1.1.2"
+  checksum: 6cb2ac097faf77b7288bdfd87d92e983e357252d00ee0d2b51ad8e7897bf9f51ec53eafd7dd64c613671a2b02cb8166177bc3de444a6560ec60835c363321c18
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-arrow@npm:1.1.7":
+  version: 1.1.7
+  resolution: "@radix-ui/react-arrow@npm:1.1.7"
+  dependencies:
+    "@radix-ui/react-primitive": 2.1.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 6cdf74f06090f8994cdf6d3935a44ea3ac309163a4f59c476482c4907e8e0775f224045030abf10fa4f9e1cb7743db034429249b9e59354988e247eeb0f4fdcf
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-compose-refs@npm:1.1.2, @radix-ui/react-compose-refs@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-compose-refs@npm:1.1.2"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 9a91f0213014ffa40c5b8aae4debb993be5654217e504e35aa7422887eb2d114486d37e53c482d0fffb00cd44f51b5269fcdf397b280c71666fa11b7f32f165d
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-context@npm:1.1.2, @radix-ui/react-context@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-context@npm:1.1.2"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 6d08437f23df362672259e535ae463e70bf7a0069f09bfa06c983a5a90e15250bde19da1d63ef8e3da06df1e1b4f92afa9d28ca6aa0297bb1c8aaf6ca83d28c5
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dismissable-layer@npm:1.1.10":
+  version: 1.1.10
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.1.10"
+  dependencies:
+    "@radix-ui/primitive": 1.1.2
+    "@radix-ui/react-compose-refs": 1.1.2
+    "@radix-ui/react-primitive": 2.1.3
+    "@radix-ui/react-use-callback-ref": 1.1.1
+    "@radix-ui/react-use-escape-keydown": 1.1.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: c4f31e8e93ae979a1bcd60726f8ebe7b79f23baafcd1d1e65f62cff6b322b2c6ff6132d82f2e63737f9955a8f04407849036f5b64b478e9a5678747d835957d8
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-focus-guards@npm:1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-focus-guards@npm:1.1.2"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 618658e2b98575198b94ccfdd27f41beb37f83721c9a04617e848afbc47461124ae008d703d713b9644771d96d4852e49de322cf4be3b5f10a4f94d200db5248
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-focus-scope@npm:1.1.7":
+  version: 1.1.7
+  resolution: "@radix-ui/react-focus-scope@npm:1.1.7"
+  dependencies:
+    "@radix-ui/react-compose-refs": 1.1.2
+    "@radix-ui/react-primitive": 2.1.3
+    "@radix-ui/react-use-callback-ref": 1.1.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: bb642d192d3da8431f8b39f64959b493a7ba743af8501b76699ef93357c96507c11fb76d468824b52b0e024eaee130a641f3a213268ac7c9af34883b45610c9b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-id@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-id@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-use-layout-effect": 1.1.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 8d68e200778eb3038906870fc869b3d881f4a46715fb20cddd9c76cba42fdaaa4810a3365b6ec2daf0f185b9201fc99d009167f59c7921bc3a139722c2e976db
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-popover@npm:^1.1.14":
+  version: 1.1.14
+  resolution: "@radix-ui/react-popover@npm:1.1.14"
+  dependencies:
+    "@radix-ui/primitive": 1.1.2
+    "@radix-ui/react-compose-refs": 1.1.2
+    "@radix-ui/react-context": 1.1.2
+    "@radix-ui/react-dismissable-layer": 1.1.10
+    "@radix-ui/react-focus-guards": 1.1.2
+    "@radix-ui/react-focus-scope": 1.1.7
+    "@radix-ui/react-id": 1.1.1
+    "@radix-ui/react-popper": 1.2.7
+    "@radix-ui/react-portal": 1.1.9
+    "@radix-ui/react-presence": 1.1.4
+    "@radix-ui/react-primitive": 2.1.3
+    "@radix-ui/react-slot": 1.2.3
+    "@radix-ui/react-use-controllable-state": 1.2.2
+    aria-hidden: ^1.2.4
+    react-remove-scroll: ^2.6.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 50f146117ebf675944181ef2df4fbc2d7ca017c71a2ab78eaa67159eb8a0101c682fa02bafa2b132ea7744592b7f103d02935ace2c1f430ab9040a0ece9246c8
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-popper@npm:1.2.7":
+  version: 1.2.7
+  resolution: "@radix-ui/react-popper@npm:1.2.7"
+  dependencies:
+    "@floating-ui/react-dom": ^2.0.0
+    "@radix-ui/react-arrow": 1.1.7
+    "@radix-ui/react-compose-refs": 1.1.2
+    "@radix-ui/react-context": 1.1.2
+    "@radix-ui/react-primitive": 2.1.3
+    "@radix-ui/react-use-callback-ref": 1.1.1
+    "@radix-ui/react-use-layout-effect": 1.1.1
+    "@radix-ui/react-use-rect": 1.1.1
+    "@radix-ui/react-use-size": 1.1.1
+    "@radix-ui/rect": 1.1.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 1d672b8b635846501212eb0cd15273c8acdd31e76e78d2b9ba29ce29730d5a2d3a61a8ed49bb689c94f67f45d1dffe0d49449e0810f08c4e112d8aef8430e76d
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-portal@npm:1.1.9":
+  version: 1.1.9
+  resolution: "@radix-ui/react-portal@npm:1.1.9"
+  dependencies:
+    "@radix-ui/react-primitive": 2.1.3
+    "@radix-ui/react-use-layout-effect": 1.1.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: bd6be39bf021d5c917e2474ecba411e2625171f7ef96862b9af04bbd68833bb3662a7f1fbdeb5a7a237111b10e811e76d2cd03e957dadd6e668ef16541bfbd68
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-presence@npm:1.1.4":
+  version: 1.1.4
+  resolution: "@radix-ui/react-presence@npm:1.1.4"
+  dependencies:
+    "@radix-ui/react-compose-refs": 1.1.2
+    "@radix-ui/react-use-layout-effect": 1.1.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: d3b0976368fccdfa07100c1f07ca434d0092d4132d1ed4a5c213802f7318d77fc1fd61d1b7038b87e82912688fafa97d8af000a6cca4027b09d92c5477f79dd0
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-primitive@npm:2.1.3, @radix-ui/react-primitive@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "@radix-ui/react-primitive@npm:2.1.3"
+  dependencies:
+    "@radix-ui/react-slot": 1.2.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 01f82e4bad76b57767198762c905e5bcea04f4f52129749791e31adfcb1b36f6fdc89c73c40017d812b6e25e4ac925d837214bb280cfeaa5dc383457ce6940b0
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-slot@npm:1.2.3, @radix-ui/react-slot@npm:^1.2.3":
+  version: 1.2.3
+  resolution: "@radix-ui/react-slot@npm:1.2.3"
+  dependencies:
+    "@radix-ui/react-compose-refs": 1.1.2
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 2731089e15477dd5eef98a5757c36113dd932d0c52ff05123cd89f05f0412e95e5b205229185d1cd705cda4a674a838479cce2b3b46ed903f82f5d23d9e3f3c2
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-tooltip@npm:^1.2.7":
+  version: 1.2.7
+  resolution: "@radix-ui/react-tooltip@npm:1.2.7"
+  dependencies:
+    "@radix-ui/primitive": 1.1.2
+    "@radix-ui/react-compose-refs": 1.1.2
+    "@radix-ui/react-context": 1.1.2
+    "@radix-ui/react-dismissable-layer": 1.1.10
+    "@radix-ui/react-id": 1.1.1
+    "@radix-ui/react-popper": 1.2.7
+    "@radix-ui/react-portal": 1.1.9
+    "@radix-ui/react-presence": 1.1.4
+    "@radix-ui/react-primitive": 2.1.3
+    "@radix-ui/react-slot": 1.2.3
+    "@radix-ui/react-use-controllable-state": 1.2.2
+    "@radix-ui/react-visually-hidden": 1.2.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: aebb5c124c73dc236e9362899cb81bb0b1d4103d29205122f55dd64a9b9bdf4be7cc335964e1885098be3c570416a35899a317e0e6f373b6f9d39334699e4694
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-callback-ref@npm:1.1.1, @radix-ui/react-use-callback-ref@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: cde8c40f1d4e79e6e71470218163a746858304bad03758ac84dc1f94247a046478e8e397518350c8d6609c84b7e78565441d7505bb3ed573afce82cfdcd19faf
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-controllable-state@npm:1.2.2":
+  version: 1.2.2
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.2.2"
+  dependencies:
+    "@radix-ui/react-use-effect-event": 0.0.2
+    "@radix-ui/react-use-layout-effect": 1.1.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: b438ee199d0630bf95eaafe8bf4bce219e73b371cfc8465f47548bfa4ee231f1134b5c6696b242890a01a0fd25fa34a7b172346bbfc5ee25cfb28b3881b1dc92
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-effect-event@npm:0.0.2":
+  version: 0.0.2
+  resolution: "@radix-ui/react-use-effect-event@npm:0.0.2"
+  dependencies:
+    "@radix-ui/react-use-layout-effect": 1.1.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 5a1950a30a399ea7e4b98154da9f536737a610de80189b7aacd4f064a89a3cd0d2a48571d527435227252e72e872bdb544ff6ffcfbdd02de2efd011be4aaa902
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-escape-keydown@npm:1.1.1, @radix-ui/react-use-escape-keydown@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-use-callback-ref": 1.1.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 0eb0756c2c55ddcde9ff01446ab01c085ab2bf799173e97db7ef5f85126f9e8600225570801a1f64740e6d14c39ffe8eed7c14d29737345a5797f4622ac96f6f
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-layout-effect@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: bad2ba4f206e6255263582bedfb7868773c400836f9a1b423c0b464ffe4a17e13d3f306d1ce19cf7a19a492e9d0e49747464f2656451bb7c6a99f5a57bd34de2
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-rect@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-rect@npm:1.1.1"
+  dependencies:
+    "@radix-ui/rect": 1.1.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 116461bebc49472f7497e66a9bd413541181b3d00c5e0aaeef45d790dc1fbd7c8dcea80b169ea273306228b9a3c2b70067e902d1fd5004b3057e3bbe35b9d55d
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-size@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-size@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-use-layout-effect": 1.1.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 64e61f65feb67ffc80e1fc4a8d5e32480fb6d68475e2640377e021178dead101568cba5f936c9c33e6c142c7cf2fb5d76ad7b23ef80e556ba142d56cf306147b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-visually-hidden@npm:1.2.3":
+  version: 1.2.3
+  resolution: "@radix-ui/react-visually-hidden@npm:1.2.3"
+  dependencies:
+    "@radix-ui/react-primitive": 2.1.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 42296bde1ddf4af4e7445e914c35d6bc8406d6ede49f0a959a553e75b3ed21da09fda80a81c48d8ec058ed8129ce7137499d02ee26f90f0d3eaa2417922d6509
+  languageName: node
+  linkType: hard
+
+"@radix-ui/rect@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/rect@npm:1.1.1"
+  checksum: c1c111edeab70b14a735bca43601de6468c792482864b766ac8940b43321492e5c0ae62f92b156cecdc9265ec3c680c32b3fa0c8a90b5e796923a9af13c5dc20
+  languageName: node
+  linkType: hard
+
 "@rc-component/async-validator@npm:^5.0.3":
   version: 5.0.4
   resolution: "@rc-component/async-validator@npm:5.0.4"
@@ -3918,6 +4561,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@standard-schema/spec@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@standard-schema/spec@npm:1.0.0"
+  checksum: 2d7d73a1c9706622750ab06fc40ef7c1d320b52d5e795f8a1c7a77d0d6a9f978705092bc4149327b3cff4c9a14e5b3800d3b00dc945489175a2d3031ded8332a
+  languageName: node
+  linkType: hard
+
 "@supabase/auth-js@npm:2.69.1":
   version: 2.69.1
   resolution: "@supabase/auth-js@npm:2.69.1"
@@ -4507,6 +5157,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/diff-match-patch@npm:^1.0.36":
+  version: 1.0.36
+  resolution: "@types/diff-match-patch@npm:1.0.36"
+  checksum: 7d7ce03422fcc3e79d0cda26e4748aeb176b75ca4b4e5f38459b112bf24660d628424bdb08d330faefa69039d19a5316e7a102a8ab68b8e294c8346790e55113
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.7":
   version: 3.7.7
   resolution: "@types/eslint-scope@npm:3.7.7"
@@ -4639,7 +5296,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/hast@npm:^3.0.0":
+"@types/hast@npm:^3.0.0, @types/hast@npm:^3.0.4":
   version: 3.0.4
   resolution: "@types/hast@npm:3.0.4"
   dependencies:
@@ -5835,6 +6492,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ai@npm:^4.3.16":
+  version: 4.3.16
+  resolution: "ai@npm:4.3.16"
+  dependencies:
+    "@ai-sdk/provider": 1.1.3
+    "@ai-sdk/provider-utils": 2.2.8
+    "@ai-sdk/react": 1.2.12
+    "@ai-sdk/ui-utils": 1.2.11
+    "@opentelemetry/api": 1.9.0
+    jsondiffpatch: 0.6.0
+  peerDependencies:
+    react: ^18 || ^19 || ^19.0.0-rc
+    zod: ^3.23.8
+  peerDependenciesMeta:
+    react:
+      optional: true
+  checksum: 1c13e641f04440d5ea550435defda01508473f4c5e65b248df4d39911c5accb77dd17009563c16163097642a33fe9eb421c6bedbcf824835ace9dfd96c785061
+  languageName: node
+  linkType: hard
+
 "ajv-formats@npm:^2.1.0, ajv-formats@npm:^2.1.1":
   version: 2.1.1
   resolution: "ajv-formats@npm:2.1.1"
@@ -6121,6 +6798,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-hidden@npm:^1.2.4":
+  version: 1.2.6
+  resolution: "aria-hidden@npm:1.2.6"
+  dependencies:
+    tslib: ^2.0.0
+  checksum: 56409c55c43ad917607f3f3aa67748dcf30a27e8bb5cb3c5d86b43e38babadd63cd77731a27bc8a8c4332c2291741ed92333bf7ca45f8b99ebc87b94a8070a6e
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:5.1.3":
   version: 5.1.3
   resolution: "aria-query@npm:5.1.3"
@@ -6310,6 +6996,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"assistant-cloud@npm:0.0.2":
+  version: 0.0.2
+  resolution: "assistant-cloud@npm:0.0.2"
+  dependencies:
+    assistant-stream: ^0.2.17
+  checksum: 5a4df3ca6c40dad15eb38c3f974bffd321bf52859f41bc3459d75f912e37579211a07876a5d28ce462396407f87a863dc849034f9bc24e04c010ab31827c6f82
+  languageName: node
+  linkType: hard
+
+"assistant-stream@npm:^0.2.17":
+  version: 0.2.17
+  resolution: "assistant-stream@npm:0.2.17"
+  dependencies:
+    "@types/json-schema": ^7.0.15
+    nanoid: 5.1.5
+    secure-json-parse: ^4.0.0
+  checksum: 1b317f2e5c19ce013cb8673ff73461b5ba39fe80ff05c3d4b6e67704d89a70ab76337dac6974901962caedcffc45429e990856c3e551122de6a3b37649a2d8cb
+  languageName: node
+  linkType: hard
+
 "ast-types-flow@npm:^0.0.8":
   version: 0.0.8
   resolution: "ast-types-flow@npm:0.0.8"
@@ -7157,6 +7863,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chalk@npm:^5.3.0":
+  version: 5.4.1
+  resolution: "chalk@npm:5.4.1"
+  checksum: 0c656f30b782fed4d99198825c0860158901f449a6b12b818b0aabad27ec970389e7e8767d0e00762175b23620c812e70c4fd92c0210e55fc2d993638b74e86e
+  languageName: node
+  linkType: hard
+
 "char-regex@npm:^1.0.2":
   version: 1.0.2
   resolution: "char-regex@npm:1.0.2"
@@ -7249,6 +7962,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"class-variance-authority@npm:^0.7.1":
+  version: 0.7.1
+  resolution: "class-variance-authority@npm:0.7.1"
+  dependencies:
+    clsx: ^2.1.1
+  checksum: e05ba26ef9ec38f7c675047ce366b067d60af6c954dba08f7802af19a9460a534ae752d8fe1294fff99d0fa94a669b16ccebd87e8a20f637c0736cf2751dd2c5
+  languageName: node
+  linkType: hard
+
 "classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.3, classnames@npm:^2.2.5, classnames@npm:^2.2.6, classnames@npm:^2.3.1, classnames@npm:^2.3.2, classnames@npm:^2.5.1":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
@@ -7338,7 +8060,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^2.0.0":
+"clsx@npm:^2.0.0, clsx@npm:^2.1.1":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
   checksum: acd3e1ab9d8a433ecb3cc2f6a05ab95fe50b4a3cfc5ba47abb6cbf3754585fcb87b84e90c822a1f256c4198e3b41c7f6c391577ffc8678ad587fc0976b24fd57
@@ -8802,7 +9524,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"dequal@npm:^2.0.0":
+"dequal@npm:^2.0.0, dequal@npm:^2.0.3":
   version: 2.0.3
   resolution: "dequal@npm:2.0.3"
   checksum: 8679b850e1a3d0ebbc46ee780d5df7b478c23f335887464023a631d1b9af051ad4a6595a44220f9ff8ff95a8ddccf019b5ad778a976fd7bbf77383d36f412f90
@@ -8833,6 +9555,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"detect-node-es@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "detect-node-es@npm:1.1.0"
+  checksum: e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
+  languageName: node
+  linkType: hard
+
 "detect-node@npm:^2.0.4":
   version: 2.1.0
   resolution: "detect-node@npm:2.1.0"
@@ -8849,6 +9578,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"diff-match-patch@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "diff-match-patch@npm:1.0.5"
+  checksum: 841522d01b09cccbc4e4402cf61514a81b906349a7d97b67222390f2d35cf5df277cb23959eeed212d5e46afb5629cebab41b87918672c5a05c11c73688630e3
+  languageName: node
+  linkType: hard
+
 "diff-sequences@npm:^29.6.3":
   version: 29.6.3
   resolution: "diff-sequences@npm:29.6.3"
@@ -10754,6 +11490,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"get-nonce@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "get-nonce@npm:1.0.1"
+  checksum: e2614e43b4694c78277bb61b0f04583d45786881289285c73770b07ded246a98be7e1f78b940c80cbe6f2b07f55f0b724e6db6fd6f1bcbd1e8bdac16521074ed
+  languageName: node
+  linkType: hard
+
 "get-package-type@npm:^0.1.0":
   version: 0.1.0
   resolution: "get-package-type@npm:0.1.0"
@@ -13218,7 +13961,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"json-schema@npm:0.4.0":
+"json-schema@npm:0.4.0, json-schema@npm:^0.4.0":
   version: 0.4.0
   resolution: "json-schema@npm:0.4.0"
   checksum: 66389434c3469e698da0df2e7ac5a3281bcff75e797a5c127db7c5b56270e01ae13d9afa3c03344f76e32e81678337a8c912bdbb75101c62e487dc3778461d72
@@ -13268,6 +14011,19 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"jsondiffpatch@npm:0.6.0":
+  version: 0.6.0
+  resolution: "jsondiffpatch@npm:0.6.0"
+  dependencies:
+    "@types/diff-match-patch": ^1.0.36
+    chalk: ^5.3.0
+    diff-match-patch: ^1.0.5
+  bin:
+    jsondiffpatch: bin/jsondiffpatch.js
+  checksum: 27d7aa42c3b9f9359fd179bb49c621ed848f6095615014cd0acbd29c37e364c11cb5a19c3ef2c873631e7b5f7ba6d1465978a489efa28cb1dc9fba98b0498712
+  languageName: node
+  linkType: hard
+
 "jsonfile@npm:^6.0.1":
   version: 6.1.0
   resolution: "jsonfile@npm:6.1.0"
@@ -14094,7 +14850,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   version: 0.0.0-use.local
   resolution: "lowcoder@workspace:packages/lowcoder"
   dependencies:
+    "@ai-sdk/openai": ^1.3.22
     "@ant-design/icons": ^5.3.0
+    "@assistant-ui/react": ^0.10.24
+    "@assistant-ui/react-ai-sdk": ^0.10.14
+    "@assistant-ui/react-markdown": ^0.10.5
+    "@assistant-ui/styles": ^0.1.13
+    "@bany/curl-to-json": ^1.2.8
     "@codemirror/autocomplete": ^6.11.1
     "@codemirror/commands": ^6.3.2
     "@codemirror/lang-css": ^6.2.1
@@ -14115,6 +14877,8 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     "@jsonforms/core": ^3.5.1
     "@lottiefiles/dotlottie-react": ^0.13.0
     "@manaflair/redux-batch": ^1.0.0
+    "@radix-ui/react-slot": ^1.2.3
+    "@radix-ui/react-tooltip": ^1.2.7
     "@rjsf/antd": ^5.24.9
     "@rjsf/core": ^5.24.9
     "@rjsf/utils": ^5.24.9
@@ -14133,11 +14897,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     "@types/supercluster": ^7.1.3
     "@types/uuid": ^8.3.4
     "@vitejs/plugin-react": ^2.2.0
+    ai: ^4.3.16
     alasql: ^4.6.6
     animate.css: ^4.1.1
     antd: ^5.25.2
     axios: ^1.7.7
     buffer: ^6.0.3
+    class-variance-authority: ^0.7.1
     clsx: ^2.0.0
     cnchar: ^3.2.4
     coolshapes-react: lowcoder-org/coolshapes-react
@@ -14162,6 +14928,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     loglevel: ^1.8.0
     lowcoder-core: "workspace:^"
     lowcoder-design: "workspace:^"
+    lucide-react: ^0.525.0
     mime: ^3.0.0
     moment: ^2.29.4
     numbro: ^2.3.6
@@ -14199,7 +14966,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     regenerator-runtime: ^0.13.9
     rehype-raw: ^6.1.1
     rehype-sanitize: ^5.0.1
-    remark-gfm: ^4.0.0
+    remark-gfm: ^4.0.1
     resize-observer-polyfill: ^1.5.1
     rollup-plugin-terser: ^7.0.2
     rollup-plugin-visualizer: ^5.9.2
@@ -14264,6 +15031,15 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:^0.525.0":
+  version: 0.525.0
+  resolution: "lucide-react@npm:0.525.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: eef781bfcfd211dac1ca93d0e7c5830aec1bacef72f4af3994807ac04d2a0fe327aca1a77234daf7f13e06ea47e5585766c927c8e1f2e7dcb982e4dc55aeda5e
+  languageName: node
+  linkType: hard
+
 "lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
@@ -15476,7 +16252,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.2.0, minimist@npm:^1.2.6":
+"minimist@npm:^1.2.0, minimist@npm:^1.2.6, minimist@npm:^1.2.8":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 75a6d645fb122dad29c06a7597bddea977258957ed88d7a6df59b5cd3fe4a527e253e9bbf2e783e4b73657f9098b96a5fe96ab8a113655d4109108577ecf85b0
@@ -15675,6 +16451,15 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"nanoid@npm:5.1.5":
+  version: 5.1.5
+  resolution: "nanoid@npm:5.1.5"
+  bin:
+    nanoid: bin/nanoid.js
+  checksum: 6de2d006b51c983be385ef7ee285f7f2a57bd96f8c0ca881c4111461644bd81fafc2544f8e07cb834ca0f3e0f3f676c1fe78052183f008b0809efe6e273119f5
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.3.7, nanoid@npm:^3.3.8":
   version: 3.3.11
   resolution: "nanoid@npm:3.3.11"
@@ -17923,6 +18708,28 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"react-markdown@npm:^10.1.0":
+  version: 10.1.0
+  resolution: "react-markdown@npm:10.1.0"
+  dependencies:
+    "@types/hast": ^3.0.0
+    "@types/mdast": ^4.0.0
+    devlop: ^1.0.0
+    hast-util-to-jsx-runtime: ^2.0.0
+    html-url-attributes: ^3.0.0
+    mdast-util-to-hast: ^13.0.0
+    remark-parse: ^11.0.0
+    remark-rehype: ^11.0.0
+    unified: ^11.0.0
+    unist-util-visit: ^5.0.0
+    vfile: ^6.0.0
+  peerDependencies:
+    "@types/react": ">=18"
+    react: ">=18"
+  checksum: fa7ef860e32a18206c5b301de8672be609b108f46f0f091e9779d50ff8145bd63d0f6e82ffb18fc1b7aee2264cbdac1100205596ff10d2c3d2de6627abb3868f
+  languageName: node
+  linkType: hard
+
 "react-markdown@npm:^9.0.1":
   version: 9.1.0
   resolution: "react-markdown@npm:9.1.0"
@@ -18016,6 +18823,41 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"react-remove-scroll-bar@npm:^2.3.7":
+  version: 2.3.8
+  resolution: "react-remove-scroll-bar@npm:2.3.8"
+  dependencies:
+    react-style-singleton: ^2.2.2
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: c4663247f689dbe51c370836edf735487f6d8796acb7f15b09e8a1c14e84c7997360e8e3d54de2bc9c0e782fed2b2c4127d15b4053e4d2cf26839e809e57605f
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:^2.6.3":
+  version: 2.7.1
+  resolution: "react-remove-scroll@npm:2.7.1"
+  dependencies:
+    react-remove-scroll-bar: ^2.3.7
+    react-style-singleton: ^2.2.3
+    tslib: ^2.1.0
+    use-callback-ref: ^1.3.3
+    use-sidecar: ^1.1.3
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: c8b1988d473ca0b4911a0a42f09dc7806d5db998c3ec938ae2791a5f82d807c2cdebb78a1c58a0bab62a83112528dda2f20d509d0e048fe281b9dfc027c39763
+  languageName: node
+  linkType: hard
+
 "react-resizable@npm:^3.0.4, react-resizable@npm:^3.0.5":
   version: 3.0.5
   resolution: "react-resizable@npm:3.0.5"
@@ -18122,6 +18964,22 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"react-style-singleton@npm:^2.2.2, react-style-singleton@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "react-style-singleton@npm:2.2.3"
+  dependencies:
+    get-nonce: ^1.0.0
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: a7b0bf493c9231065ebafa84c4237aed997c746c561196121b7de82fe155a5355b372db5070a3ac9fe980cf7f60dc0f1e8cf6402a2aa5b2957392932ccf76e76
+  languageName: node
+  linkType: hard
+
 "react-test-renderer@npm:^18.1.0":
   version: 18.3.1
   resolution: "react-test-renderer@npm:18.3.1"
@@ -18135,7 +18993,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"react-textarea-autosize@npm:^8.3.2":
+"react-textarea-autosize@npm:^8.3.2, react-textarea-autosize@npm:^8.5.9":
   version: 8.5.9
   resolution: "react-textarea-autosize@npm:8.5.9"
   dependencies:
@@ -18524,7 +19382,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"remark-gfm@npm:^4.0.0":
+"remark-gfm@npm:^4.0.0, remark-gfm@npm:^4.0.1":
   version: 4.0.1
   resolution: "remark-gfm@npm:4.0.1"
   dependencies:
@@ -19281,6 +20139,20 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"secure-json-parse@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "secure-json-parse@npm:2.7.0"
+  checksum: d9d7d5a01fc6db6115744ba23cf9e67ecfe8c524d771537c062ee05ad5c11b64c730bc58c7f33f60bd6877f96b86f0ceb9ea29644e4040cb757f6912d4dd6737
+  languageName: node
+  linkType: hard
+
+"secure-json-parse@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "secure-json-parse@npm:4.0.0"
+  checksum: 5092d1385f242ae1a189a193eeb2f5ed1f00350270edefe209fbd35898a93745da58e7d8d4833a6da2235a89df7140d2959817ca4f2b1a4bfd135a812fab4f01
+  languageName: node
+  linkType: hard
+
 "select-hose@npm:^2.0.0":
   version: 2.0.0
   resolution: "select-hose@npm:2.0.0"
@@ -20392,6 +21264,18 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"swr@npm:^2.2.5":
+  version: 2.3.3
+  resolution: "swr@npm:2.3.3"
+  dependencies:
+    dequal: ^2.0.3
+    use-sync-external-store: ^1.4.0
+  peerDependencies:
+    react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 25b2ab03d0149951e4612fae8458d333d6fbe912298684495969250553176b5b5b731be119f406ebadf6e9c5dc39726dd2492cca9684f448aa1734274e2a4919
+  languageName: node
+  linkType: hard
+
 "symbol-tree@npm:^3.2.2, symbol-tree@npm:^3.2.4":
   version: 3.2.4
   resolution: "symbol-tree@npm:3.2.4"
@@ -20548,6 +21432,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"throttleit@npm:2.1.0":
+  version: 2.1.0
+  resolution: "throttleit@npm:2.1.0"
+  checksum: a2003947aafc721c4a17e6f07db72dc88a64fa9bba0f9c659f7997d30f9590b3af22dadd6a41851e0e8497d539c33b2935c2c7919cf4255922509af6913c619b
+  languageName: node
+  linkType: hard
+
 "thunky@npm:^1.0.2":
   version: 1.1.0
   resolution: "thunky@npm:1.1.0"
@@ -21468,6 +22359,21 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"use-callback-ref@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "use-callback-ref@npm:1.3.3"
+  dependencies:
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 4da1c82d7a2409cee6c882748a40f4a083decf238308bf12c3d0166f0e338f8d512f37b8d11987eb5a421f14b9b5b991edf3e11ed25c3bb7a6559081f8359b44
+  languageName: node
+  linkType: hard
+
 "use-composed-ref@npm:^1.3.0":
   version: 1.4.0
   resolution: "use-composed-ref@npm:1.4.0"
@@ -21506,7 +22412,23 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:^1.2.0":
+"use-sidecar@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "use-sidecar@npm:1.1.3"
+  dependencies:
+    detect-node-es: ^1.1.0
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 88664c6b2c5b6e53e4d5d987694c9053cea806da43130248c74ca058945c8caa6ccb7b1787205a9eb5b9d124633e42153848904002828acabccdc48cda026622
+  languageName: node
+  linkType: hard
+
+"use-sync-external-store@npm:^1.2.0, use-sync-external-store@npm:^1.4.0":
   version: 1.5.0
   resolution: "use-sync-external-store@npm:1.5.0"
   peerDependencies:
@@ -22731,6 +23653,22 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"zod-to-json-schema@npm:^3.24.1, zod-to-json-schema@npm:^3.24.5":
+  version: 3.24.6
+  resolution: "zod-to-json-schema@npm:3.24.6"
+  peerDependencies:
+    zod: ^3.24.1
+  checksum: 5f4d29597cfd88d8fb8a539f0169affb8705d67ee9cbe478aa01bb1d2554e0540ca713fa4ddeb2fd834e87e7cdff61fa396f6d1925a9006de70afe6cd68bf7d2
+  languageName: node
+  linkType: hard
+
+"zod@npm:^3.25.64":
+  version: 3.25.67
+  resolution: "zod@npm:3.25.67"
+  checksum: 56ab904d33b1cd00041ce64ae05b0628fcbfeb7e707fa31cd498a97b540135e4dfe685200c9c62aea307695ee132870b4bc34f035228ea728aa75cc96a4954cb
+  languageName: node
+  linkType: hard
+
 "zrender@npm:5.6.1, zrender@npm:^5.1.1":
   version: 5.6.1
   resolution: "zrender@npm:5.6.1"
@@ -22740,6 +23678,27 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"zustand@npm:^5.0.5":
+  version: 5.0.6
+  resolution: "zustand@npm:5.0.6"
+  peerDependencies:
+    "@types/react": ">=18.0.0"
+    immer: ">=9.0.6"
+    react: ">=18.0.0"
+    use-sync-external-store: ">=1.2.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    immer:
+      optional: true
+    react:
+      optional: true
+    use-sync-external-store:
+      optional: true
+  checksum: 1808cd7d49e8ba6777e0d8d524a858a918a4fd0bcbde88eb19ea3f4be9c8066276ecc236a8ed071623d3f13373424c56a5ddb0013be590b641ac99bf8f9b4e19
+  languageName: node
+  linkType: hard
+
 "zwitch@npm:^2.0.0":
   version: 2.0.4
   resolution: "zwitch@npm:2.0.4"
diff --git a/deploy/docker/Dockerfile b/deploy/docker/Dockerfile
index 5ecbbd579d..ba589dffab 100644
--- a/deploy/docker/Dockerfile
+++ b/deploy/docker/Dockerfile
@@ -263,7 +263,10 @@ COPY --chown=lowcoder:lowcoder --from=lowcoder-ce-node-service /lowcoder/node-se
 COPY --chown=lowcoder:lowcoder deploy/docker/all-in-one/etc /lowcoder/etc
 
 # Add startup script
-COPY --chown=lowcoder:lowcoder deploy/docker/all-in-one/entrypoint.sh /lowcoder/entrypoint.sh
+COPY --chown=lowcoder:lowcoder --chmod=0755 deploy/docker/all-in-one/entrypoint.sh /lowcoder/entrypoint.sh
+
+# Copy default environment properties
+COPY --chown=lowcoder:lowcoder deploy/docker/default.env /lowcoder/etc/default.env
 
 # Fixes for OpenShift compatibility (after all files are copied)
 RUN echo  \
diff --git a/deploy/docker/all-in-one/entrypoint.sh b/deploy/docker/all-in-one/entrypoint.sh
index 74403a08d1..c6e8802a7a 100644
--- a/deploy/docker/all-in-one/entrypoint.sh
+++ b/deploy/docker/all-in-one/entrypoint.sh
@@ -5,6 +5,18 @@ set -e
 export USER_ID=${LOWCODER_PUID:=9001}
 export GROUP_ID=${LOWCODER_PGID:=9001}
 
+# Set default variable values
+echo "Overriding default environment variables:"
+for line in `grep '^[ \t]*LOWCODER_.*$' /lowcoder/etc/default.env`; do
+    VARNAME=`echo ${line} | sed -e 's/^\([A-Z0-9_]\+\)\([ \t]*=[ \t]*\)\(.*\)$/\1/'`
+    if [ -z "$(eval echo \"\$$VARNAME\")" ]; then
+        export $(eval echo "${line}")
+    else
+        echo "    ${line}"
+    fi;
+done;
+echo "Done."
+
 # Update ID of lowcoder user if required
 if [ ! "$(id --user lowcoder)" -eq ${USER_ID} ]; then
     usermod --uid ${USER_ID} lowcoder
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java
index 3e15e9aa9a..3e2a7c2aea 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java
@@ -128,11 +128,20 @@ public boolean agencyProfile() {
     }
 
     public Mono<ApplicationQuery> getQueryByViewModeAndQueryId(boolean isViewMode, String queryId, ApplicationRecordService applicationRecordService) {
-        return getLiveQueries(applicationRecordService).map(liveQueries -> (isViewMode ? liveQueries : getEditingQueries())
-                .stream()
-                .filter(query -> queryId.equals(query.getId()) || queryId.equals(query.getGid()))
-                .findFirst()
-                .orElseThrow(() -> new BizException(BizError.QUERY_NOT_FOUND, "LIBRARY_QUERY_NOT_FOUND")));
+	return isViewMode ?
+		// Get Published Queries in View/View Marketplace Mode
+		getLiveQueries(applicationRecordService).map(liveQueries -> (liveQueries)
+		.stream()
+		.filter(query -> queryId.equals(query.getId()) || queryId.equals(query.getGid()))
+		.findFirst()
+		.orElseThrow(() -> new BizException(BizError.QUERY_NOT_FOUND, "LIBRARY_QUERY_NOT_FOUND")))
+		:
+		// Get Editing Queries in Edit/Preview Mode
+		Mono.just(getEditingQueries()
+		.stream()
+		.filter(query -> queryId.equals(query.getId()) || queryId.equals(query.getGid()))
+		.findFirst()
+		.orElseThrow(() -> new BizException(BizError.QUERY_NOT_FOUND, "LIBRARY_QUERY_NOT_FOUND")));
     }
 
     /**
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/group/service/GroupMemberService.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/group/service/GroupMemberService.java
index 813628d064..9f95a4d676 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/group/service/GroupMemberService.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/group/service/GroupMemberService.java
@@ -41,4 +41,6 @@ public interface GroupMemberService {
 
     Mono<Boolean> bulkRemoveMember(String groupId, Collection<String> userIds);
 
+    Mono<List<GroupMember>> getGroupMembersByIdAndRole(String groupId, String role);
+
 }
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/group/service/GroupMemberServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/group/service/GroupMemberServiceImpl.java
index 82de01adf4..a5c8f21b1b 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/group/service/GroupMemberServiceImpl.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/group/service/GroupMemberServiceImpl.java
@@ -35,6 +35,13 @@ public Mono<List<GroupMember>> getGroupMembers(String groupId) {
                 .collectList();
     }
 
+    @Override
+    public Mono<List<GroupMember>> getGroupMembersByIdAndRole(String groupId, String role) {
+        return biRelationService.getBySourceIdAndRelation(GROUP_MEMBER, groupId, role)
+                .map(GroupMember::from)
+                .collectList();
+    }
+
     @Override
     public Mono<Boolean> addMember(String orgId, String groupId, String userId, MemberRole memberRole) {
         return biRelationService.addBiRelation(GROUP_MEMBER, groupId,
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/model/Organization.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/model/Organization.java
index a0a28662b5..ee91be3a23 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/model/Organization.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/model/Organization.java
@@ -21,6 +21,7 @@
 import static java.util.Optional.ofNullable;
 import static org.apache.commons.lang3.ObjectUtils.firstNonNull;
 import static org.lowcoder.infra.util.AssetUtils.toAssetPath;
+import java.time.Instant;
 
 
 @Getter
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/repository/OrganizationRepository.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/repository/OrganizationRepository.java
index d6606fde20..9b8741ebe0 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/repository/OrganizationRepository.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/repository/OrganizationRepository.java
@@ -33,7 +33,6 @@ public interface OrganizationRepository extends ReactiveMongoRepository<Organiza
 
     Flux<Organization> findByOrganizationDomainIsNotNull();
     Mono<Boolean> existsBySlug(String slug);
-
-    Flux<Organization> findByIdInAndNameContainingIgnoreCase(List<String> ids, String name, Pageable pageable);
-    Mono<Long> countByIdInAndNameContainingIgnoreCase(List<String> ids, String name);
+    Flux<Organization> findByIdInAndNameContainingIgnoreCaseAndState(List<String> ids, String name, OrganizationState state, Pageable pageable);
+    Mono<Long> countByIdInAndNameContainingIgnoreCaseAndState(List<String> ids, String name, OrganizationState state);
 }
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/service/OrganizationServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/service/OrganizationServiceImpl.java
index 39c26d9906..aa34543e79 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/service/OrganizationServiceImpl.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/service/OrganizationServiceImpl.java
@@ -330,7 +330,7 @@ public Flux<Organization> findUserOrgs(String userId, String orgName, Pageable p
                     if (orgIds.isEmpty()) {
                         return Flux.empty();
                     }
-                    return repository.findByIdInAndNameContainingIgnoreCase(orgIds, orgName, pageable);
+                    return repository.findByIdInAndNameContainingIgnoreCaseAndState(orgIds, orgName, ACTIVE, pageable);
                 });
     }
 
@@ -344,7 +344,7 @@ public Mono<Long> countUserOrgs(String userId, String orgName) {
                     if (orgIds.isEmpty()) {
                         return Mono.just(0L);
                     }
-                    return repository.countByIdInAndNameContainingIgnoreCase(orgIds, filter);
+                    return repository.countByIdInAndNameContainingIgnoreCaseAndState(orgIds, filter, ACTIVE);
                 });
     }
 }
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/repository/UserRepository.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/repository/UserRepository.java
index 9536f52e78..896c278cd7 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/repository/UserRepository.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/repository/UserRepository.java
@@ -1,13 +1,16 @@
 package org.lowcoder.domain.user.repository;
 
 import java.util.Collection;
+import java.util.List;
 
 import org.lowcoder.domain.user.model.User;
+import org.springframework.data.domain.Pageable;
 import org.springframework.data.mongodb.repository.ReactiveMongoRepository;
 import org.springframework.stereotype.Repository;
 
 import reactor.core.publisher.Flux;
 import reactor.core.publisher.Mono;
+import org.springframework.data.mongodb.repository.Query;
 
 @Repository
 public interface UserRepository extends ReactiveMongoRepository<User, String> {
@@ -23,4 +26,10 @@ public interface UserRepository extends ReactiveMongoRepository<User, String> {
 
     //email1 and email2 should be equal
     Flux<User> findByEmailOrConnections_Email(String email1, String email2);
+
+    @Query("{ '_id': { $in: ?0 }, 'state': ?1, 'isEnabled': ?2, $or: [ { 'name': { $regex: ?3, $options: 'i' } }, { '_id': { $regex: ?3, $options: 'i' } } ] }")
+    Flux<User> findUsersByIdsAndSearchNameForPagination(Collection<String> ids, String state, boolean isEnabled, String searchRegex, Pageable pageable);
+
+    @Query(value = "{ '_id': { $in: ?0 }, 'state': ?1, 'isEnabled': ?2, $or: [ { 'name': { $regex: ?3, $options: 'i' } }, { '_id': { $regex: ?3, $options: 'i' } } ] }", count = true)
+    Mono<Long> countUsersByIdsAndSearchName(Collection<String> ids, String state, boolean isEnabled, String searchRegex);
 }
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/service/UserService.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/service/UserService.java
index 52a1ba05c5..e5057ab51a 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/service/UserService.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/service/UserService.java
@@ -3,12 +3,10 @@
 import java.util.Collection;
 import java.util.Map;
 
-import org.lowcoder.domain.user.model.AuthUser;
-import org.lowcoder.domain.user.model.Connection;
-import org.lowcoder.domain.user.model.User;
-import org.lowcoder.domain.user.model.UserDetail;
+import org.lowcoder.domain.user.model.*;
 import org.lowcoder.infra.annotation.NonEmptyMono;
 import org.lowcoder.infra.mongo.MongoUpsertHelper.PartialResourceWithId;
+import org.springframework.data.domain.Pageable;
 import org.springframework.http.codec.multipart.Part;
 import org.springframework.web.server.ServerWebExchange;
 
@@ -68,5 +66,7 @@ public interface UserService {
 
     Flux<User> findBySourceAndIds(String connectionSource, Collection<String> connectionSourceUuids);
 
-}
+    Flux<User> findUsersByIdsAndSearchNameForPagination(Collection<String> ids, String state, boolean isEnabled, String searchRegex, Pageable pageable);
 
+    Mono<Long> countUsersByIdsAndSearchName(Collection<String> ids, String state, boolean isEnabled, String searchRegex);
+}
\ No newline at end of file
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/service/UserServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/service/UserServiceImpl.java
index 1a8dcf566e..1df76dfccf 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/service/UserServiceImpl.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/service/UserServiceImpl.java
@@ -36,6 +36,7 @@
 import org.lowcoder.sdk.util.HashUtils;
 import org.lowcoder.sdk.util.LocaleUtils;
 import org.springframework.dao.DuplicateKeyException;
+import org.springframework.data.domain.Pageable;
 import org.springframework.http.codec.multipart.Part;
 import org.springframework.stereotype.Service;
 import org.springframework.web.server.ServerWebExchange;
@@ -473,4 +474,13 @@ public Flux<User> findBySourceAndIds(String connectionSource, Collection<String>
         return repository.findByConnections_SourceAndConnections_RawIdIn(connectionSource, connectionSourceUuids);
     }
 
+    @Override
+    public Flux<User> findUsersByIdsAndSearchNameForPagination(Collection<String> ids, String state, boolean isEnabled, String searchRegex, Pageable pageable) {
+        return repository.findUsersByIdsAndSearchNameForPagination(ids, state, isEnabled, searchRegex, pageable);
+    }
+
+    @Override
+    public Mono<Long> countUsersByIdsAndSearchName(Collection<String> ids, String state, boolean isEnabled, String searchRegex) {
+        return repository.countUsersByIdsAndSearchName(ids, state, isEnabled, searchRegex);
+    }
 }
diff --git a/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/birelation/BiRelationServiceImpl.java b/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/birelation/BiRelationServiceImpl.java
index ad98de0f95..56592e1d29 100644
--- a/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/birelation/BiRelationServiceImpl.java
+++ b/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/birelation/BiRelationServiceImpl.java
@@ -185,6 +185,9 @@ public Mono<Boolean> updateState(BiRelationBizType bizType, String sourceId, Str
 
     @Override
     public Flux<BiRelation> getBySourceIdAndRelation(BiRelationBizType bizType, String sourceId, String relation) {
+        if (relation == null || relation.isBlank()) {
+            return biRelationRepository.findByBizTypeAndSourceId(bizType, sourceId);
+        }
         Query query = new Query();
         query.addCriteria(where(BIZ_TYPE).is(bizType));
         query.addCriteria(where(SOURCE_ID).is(sourceId));
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiService.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiService.java
index fdb40cc04e..a1b655bbe9 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiService.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiService.java
@@ -15,6 +15,7 @@
 import reactor.core.publisher.Flux;
 import reactor.core.publisher.Mono;
 
+import java.util.List;
 import java.util.Set;
 
 public interface ApplicationApiService {
@@ -66,4 +67,6 @@ Mono<Boolean> grantPermission(String applicationId,
     Mono<Boolean> setApplicationAsAgencyProfile(String applicationId, boolean agencyProfile);
 
     Mono<Application> updateSlug(String applicationId, String slug);
+
+    Mono<List<Object>> getGroupsOrMembersWithoutPermissions(String appId);
 }
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiServiceImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiServiceImpl.java
index 89ff852d8c..ce40d6cc12 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiServiceImpl.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiServiceImpl.java
@@ -22,7 +22,11 @@
 import org.lowcoder.api.home.UserHomeApiService;
 import org.lowcoder.api.permission.PermissionHelper;
 import org.lowcoder.api.permission.view.PermissionItemView;
+import org.lowcoder.api.usermanagement.GroupApiService;
+import org.lowcoder.api.usermanagement.OrgApiService;
 import org.lowcoder.api.usermanagement.OrgDevChecker;
+import org.lowcoder.api.usermanagement.view.GroupView;
+import org.lowcoder.api.usermanagement.view.OrgMemberListView;
 import org.lowcoder.domain.application.model.*;
 import org.lowcoder.domain.application.service.ApplicationHistorySnapshotService;
 import org.lowcoder.domain.application.service.ApplicationRecordService;
@@ -30,7 +34,10 @@
 import org.lowcoder.domain.datasource.model.Datasource;
 import org.lowcoder.domain.datasource.service.DatasourceService;
 import org.lowcoder.domain.folder.service.FolderElementRelationService;
+import org.lowcoder.domain.group.model.Group;
+import org.lowcoder.domain.group.model.GroupMember;
 import org.lowcoder.domain.interaction.UserApplicationInteractionService;
+import org.lowcoder.domain.organization.model.OrgMember;
 import org.lowcoder.domain.organization.model.Organization;
 import org.lowcoder.domain.organization.service.OrgMemberService;
 import org.lowcoder.domain.organization.service.OrganizationService;
@@ -54,13 +61,11 @@
 import reactor.core.publisher.Flux;
 import reactor.core.publisher.Mono;
 import reactor.core.scheduler.Schedulers;
+import reactor.util.function.Tuple2;
 
 import java.time.Duration;
 import java.time.Instant;
-import java.util.HashSet;
-import java.util.List;
-import java.util.Map;
-import java.util.Set;
+import java.util.*;
 import java.util.stream.Collectors;
 
 import static org.lowcoder.domain.application.model.ApplicationStatus.NORMAL;
@@ -99,6 +104,8 @@ public class ApplicationApiServiceImpl implements ApplicationApiService {
     private final ApplicationHistorySnapshotService applicationHistorySnapshotService;
     private final ApplicationRecordService applicationRecordService;
     private final FolderElementRelationService folderElementRelationService;
+    private final GroupApiService groupApiService;
+    private final OrgApiService orgApiService;
 
     @Override
     public Mono<ApplicationView> create(CreateApplicationRequest createApplicationRequest) {
@@ -743,4 +750,62 @@ private Mono<Void> checkDatasourcePermissions(Application application) {
                     });
         });
     }
+
+    @Override
+    public Mono<List<Object>> getGroupsOrMembersWithoutPermissions(String appId) {
+        return applicationService.findById(appId)
+                .flatMap(application -> {
+                    String orgId = application.getOrganizationId();
+                    Mono<List<ResourcePermission>> applicationPermissions = resourcePermissionService.getByApplicationId(application.getId()).cache();
+
+                    Mono<List<PermissionItemView>> groupPermissionPairsMono = applicationPermissions
+                            .flatMap(permissionHelper::getGroupPermissions);
+
+                    Mono<List<PermissionItemView>> userPermissionPairsMono = applicationPermissions
+                            .flatMap(permissionHelper::getUserPermissions);
+                    Mono<OrgMemberListView> orgMemberListViewMono = orgApiService.getOrganizationMembers(orgId, 1, 0);
+                    Mono<List<GroupView>> groupsViewMono = groupApiService.getGroups();
+
+                    return Mono.zip(groupPermissionPairsMono, userPermissionPairsMono, orgMemberListViewMono, groupsViewMono)
+                            .map(tuple -> {
+                                List<PermissionItemView> groupPermissionPairs = tuple.getT1();
+                                List<PermissionItemView> userPermissionPairs = tuple.getT2();
+                                OrgMemberListView orgMemberListViews = tuple.getT3();
+                                List<GroupView> groupListViews = tuple.getT4();
+
+                                Set<String> groupIdsWithPerm = groupPermissionPairs.stream()
+                                    .map(PermissionItemView::getId)
+                      .collect(Collectors.toSet());
+
+                               List<Map<String, Object>> filteredGroups = groupListViews.stream()
+                                    .filter(group -> !groupIdsWithPerm.contains(group.getGroupId()))
+                                    .map(group -> {
+                                        Map<String, Object> map = new HashMap<>();
+                                        map.put("type", "Group");
+                                        map.put("data", group);
+                                        return map;
+                                    })
+                                   .toList();
+
+                               Set<String> userIdsWithPerm = userPermissionPairs.stream()
+                                        .map(PermissionItemView::getId)
+                                        .collect(Collectors.toSet());
+
+                               List<Map<String, Object>> filteredMembers = orgMemberListViews.getMembers().stream()
+                                        .filter(member -> !userIdsWithPerm.contains(member.getUserId()))
+                                        .map(member -> {
+                                            Map<String, Object> map = new HashMap<>();
+                                            map.put("type", "User");
+                                            map.put("data", member);
+                                            return map;
+                                        })
+                                        .toList();
+
+                               List<Object> result = new ArrayList<>();
+                                result.addAll(filteredGroups);
+                                result.addAll(filteredMembers);
+                                return result;
+                            });
+                });
+    }
 }
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationController.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationController.java
index 42ec869ec3..cfec54a132 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationController.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationController.java
@@ -27,6 +27,8 @@
 import static org.lowcoder.plugin.api.event.LowcoderEvent.EventType.*;
 import static org.lowcoder.sdk.exception.BizError.INVALID_PARAMETER;
 import static org.lowcoder.sdk.util.ExceptionUtils.ofError;
+import reactor.core.publisher.Flux;
+import java.util.Map;
 
 @RequiredArgsConstructor
 @RestController
@@ -298,5 +300,36 @@ public Mono<ResponseView<Boolean>> setApplicationAsAgencyProfile(@PathVariable S
                 .map(ResponseView::success));
     }
 
-
+    @Override
+    public Mono<ResponseView<List<Object>>> getGroupsOrMembersWithoutPermissions(
+            @PathVariable String applicationId,
+            @RequestParam(required = false) String search,
+            @RequestParam(required = false, defaultValue = "1") Integer pageNum,
+            @RequestParam(required = false, defaultValue = "1000") Integer pageSize) {
+
+        return gidService.convertLibraryQueryIdToObjectId(applicationId).flatMap(appId -> {
+            var flx = applicationApiService.getGroupsOrMembersWithoutPermissions(appId)
+                    .flatMapMany(Flux::fromIterable)
+                    .filter(item -> {
+                        if (search == null || search.isBlank()) return true;
+                        if (!(item instanceof Map map)) return false;
+                        Object type = map.get("type");
+                        Object data = map.get("data");
+                        if ("Group".equals(type) && data instanceof org.lowcoder.api.usermanagement.view.GroupView group) {
+                            return group.getGroupName() != null && group.getGroupName().toLowerCase().contains(search.toLowerCase());
+                        }
+                        if ("User".equals(type) && data instanceof org.lowcoder.api.usermanagement.view.OrgMemberListView.OrgMemberView user) {
+                            return user.getName() != null && user.getName().toLowerCase().contains(search.toLowerCase());
+                        }
+                        return false;
+                    })
+                    .cache();
+            var countMono = flx.count();
+            var flux1 = flx.skip((long) (pageNum - 1) * pageSize);
+            if (pageSize > 0) flux1 = flux1.take(pageSize);
+            return flux1.collectList()
+                    .zipWith(countMono)
+                    .map(tuple -> PageResponseView.success(tuple.getT1(), pageNum, pageSize, Math.toIntExact(tuple.getT2())));
+        });
+    }
 }
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationEndpoints.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationEndpoints.java
index 21615764c7..c3ee2c1dc9 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationEndpoints.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationEndpoints.java
@@ -245,6 +245,20 @@ public Mono<ResponseView<Boolean>> grantPermission(
     @GetMapping("/{applicationId}/permissions")
     public Mono<ResponseView<ApplicationPermissionView>> getApplicationPermissions(@PathVariable String applicationId);
 
+	@Operation(
+			tags = ApplicationEndpoints.TAG_APPLICATION_PERMISSIONS,
+			operationId = "listGroupsOrMembersWithoutPermissions",
+			summary = "Get groups or members without permissions",
+			description = "Retrieve the groups or members of a specific Lowcoder Application identified by its ID that do not have permissions."
+	)
+	@GetMapping("/{applicationId}/groups-members/available")
+	public Mono<ResponseView<List<Object>>> getGroupsOrMembersWithoutPermissions(
+			@PathVariable String applicationId,
+			@RequestParam(required = false) String search,
+			@RequestParam(required = false, defaultValue = "1") Integer pageNum,
+			@RequestParam(required = false, defaultValue = "1000") Integer pageSize
+	);
+
 	@Operation(
 			tags = TAG_APPLICATION_MANAGEMENT,
 		    operationId = "setApplicationAsPublic",
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupApiService.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupApiService.java
index 549d2105e7..7319309842 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupApiService.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupApiService.java
@@ -1,6 +1,7 @@
 package org.lowcoder.api.usermanagement;
 
 import org.lowcoder.api.usermanagement.view.*;
+import org.lowcoder.api.usermanagement.view.OrgMemberListView;
 import org.lowcoder.domain.group.model.Group;
 import reactor.core.publisher.Mono;
 
@@ -9,6 +10,8 @@
 public interface GroupApiService {
     Mono<GroupMemberAggregateView> getGroupMembers(String groupId, int page, int count);
 
+    Mono<GroupMemberAggregateView> getGroupMembersForSearch(String groupId, String search, String role, String sort, String order, Integer pageNum, Integer pageSize);
+
     Mono<Boolean> addGroupMember(String groupId, String newUserId, String roleName);
 
     Mono<Boolean> updateRoleForMember(String groupId, UpdateRoleRequest updateRoleRequest);
@@ -24,4 +27,6 @@ public interface GroupApiService {
     Mono<Boolean> update(String groupId, UpdateGroupRequest updateGroupRequest);
 
     Mono<Boolean> removeUser(String groupId, String userId);
+
+    Mono<OrgMemberListView> getPotentialGroupMembers(String groupId, String searchName, Integer pageNum, Integer pageSize);
 }
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupApiServiceImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupApiServiceImpl.java
index 55b5f2adb1..8b7fc20c94 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupApiServiceImpl.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupApiServiceImpl.java
@@ -9,9 +9,8 @@
 import static org.lowcoder.sdk.util.StreamUtils.collectList;
 import static org.lowcoder.sdk.util.StreamUtils.collectMap;
 
-import java.util.List;
-import java.util.Map;
-import java.util.Objects;
+import java.util.*;
+import java.util.regex.Pattern;
 import java.util.stream.Collectors;
 
 import com.github.f4b6a3.uuid.UuidCreator;
@@ -19,24 +18,22 @@
 import org.apache.commons.lang3.tuple.Pair;
 import org.lowcoder.api.bizthreshold.AbstractBizThresholdChecker;
 import org.lowcoder.api.home.SessionUserService;
-import org.lowcoder.api.usermanagement.view.CreateGroupRequest;
-import org.lowcoder.api.usermanagement.view.GroupMemberAggregateView;
-import org.lowcoder.api.usermanagement.view.GroupMemberView;
-import org.lowcoder.api.usermanagement.view.GroupView;
-import org.lowcoder.api.usermanagement.view.UpdateGroupRequest;
-import org.lowcoder.api.usermanagement.view.UpdateRoleRequest;
+import org.lowcoder.api.usermanagement.view.*;
 import org.lowcoder.domain.group.model.Group;
 import org.lowcoder.domain.group.model.GroupMember;
+import org.lowcoder.domain.user.model.UserState;
+import org.lowcoder.api.usermanagement.view.OrgMemberListView;
 import org.lowcoder.domain.group.service.GroupMemberService;
 import org.lowcoder.domain.group.service.GroupService;
 import org.lowcoder.domain.organization.model.MemberRole;
 import org.lowcoder.domain.organization.model.OrgMember;
 import org.lowcoder.domain.organization.service.OrgMemberService;
-import org.lowcoder.domain.organization.service.OrganizationService;
 import org.lowcoder.domain.user.model.User;
 import org.lowcoder.domain.user.service.UserService;
 import org.lowcoder.infra.util.TupleUtils;
 import org.lowcoder.sdk.exception.BizError;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.domain.PageRequest;
 import org.springframework.stereotype.Service;
 
 import reactor.core.publisher.Flux;
@@ -53,7 +50,6 @@ public class GroupApiServiceImpl implements GroupApiService {
     private final UserService userService;
     private final GroupService groupService;
     private final AbstractBizThresholdChecker bizThresholdChecker;
-    private final OrganizationService organizationService;
     private final OrgMemberService orgMemberService;
 
     @Override
@@ -115,6 +111,91 @@ public Mono<GroupMemberAggregateView> getGroupMembers(String groupId, int page,
                 });
     }
 
+    @Override
+    public Mono<GroupMemberAggregateView> getGroupMembersForSearch(String groupId, String search, String role, String sort, String order, Integer pageNum, Integer pageSize) {
+        Mono<Tuple2<GroupMember, OrgMember>> groupAndOrgMemberInfo = getGroupAndOrgMemberInfo(groupId).cache();
+
+        Mono<MemberRole> visitorRoleMono = groupAndOrgMemberInfo.flatMap(tuple -> {
+            GroupMember groupMember = tuple.getT1();
+            OrgMember orgMember = tuple.getT2();
+            if (groupMember.isSuperAdmin() || orgMember.isSuperAdmin()) {
+                return Mono.just(MemberRole.SUPER_ADMIN);
+            }
+            if (groupMember.isAdmin() || orgMember.isAdmin()) {
+                return Mono.just(MemberRole.ADMIN);
+            }
+            if (groupMember.isValid()) {
+                return Mono.just(MemberRole.MEMBER);
+            }
+            return ofError(BizError.NOT_AUTHORIZED, NOT_AUTHORIZED);
+        });
+
+        return groupAndOrgMemberInfo
+                .filter(this::hasReadPermission)
+                .switchIfEmpty(deferredError(BizError.NOT_AUTHORIZED, NOT_AUTHORIZED))
+                .flatMap(groupMember -> groupMemberService.getGroupMembersByIdAndRole(groupId, role))
+                .<Pair<List<GroupMemberView>, Integer>> flatMap(members -> {
+                    if (members.isEmpty()) {
+                        return Mono.just(Pair.of(emptyList(), 0));
+                    }
+
+                    List<String> userIds = collectList(members, GroupMember::getUserId);
+                    Mono<Map<String, User>> userMapMono = userService.getByIds(userIds);
+                    return userMapMono.map(map -> {
+                        var list = members.stream()
+                                .map(orgMember -> {
+                                    User user = map.get(orgMember.getUserId());
+                                    if (user == null) {
+                                        return null;
+                                    }
+                                    return new GroupMemberView(orgMember, user);
+                                })
+                                .filter(Objects::nonNull)
+                                .filter(view -> {
+                                    if (search == null || search.isBlank()) return true;
+                                    return view.getUserName() != null &&
+                                            view.getUserName().toLowerCase().contains(search.toLowerCase());
+                                })
+                                .toList();
+                        List<GroupMemberView> mutableList = new ArrayList<>(list);
+                        if (sort != null && !sort.isBlank()) {
+                            Comparator<GroupMemberView> comparator = null;
+                            if ("userName".equalsIgnoreCase(sort)) {
+                                comparator = Comparator.comparing(GroupMemberView::getUserName, Comparator.nullsLast(String::compareToIgnoreCase));
+                            } else if ("role".equalsIgnoreCase(sort)) {
+                                comparator = Comparator.comparing(GroupMemberView::getRole, Comparator.nullsLast(String::compareToIgnoreCase));
+                            } else if ("joinTime".equalsIgnoreCase(sort)) {
+                                comparator = Comparator.comparing(GroupMemberView::getJoinTime, Comparator.nullsLast(Long::compareTo));
+                            }
+                            if (comparator != null && "desc".equalsIgnoreCase(order)) {
+                                comparator = comparator.reversed();
+                            }
+                            if (comparator != null) {
+                                mutableList.sort(comparator);
+                            }
+                        }
+
+                        int pageTotal = mutableList.size();
+                        int fromIndex = Math.max(0, (pageNum - 1) * pageSize);
+                        int toIndex = pageSize == 0 ? pageTotal : Math.min(pageNum * pageSize, pageTotal);
+                        List<GroupMemberView> pagedList = fromIndex < toIndex ? mutableList.subList(fromIndex, toIndex) : emptyList();
+
+                        return Pair.of(pagedList, pageTotal);
+                    });
+                })
+                .zipWith(visitorRoleMono)
+                .map(tuple -> {
+                    Pair<List<GroupMemberView>, Integer> t1 = tuple.getT1();
+                    return GroupMemberAggregateView.builder()
+                            .members(t1.getLeft())
+                            .total(t1.getRight())
+                            .pageNum(pageNum)
+                            .pageSize(pageSize)
+                            .visitorRole(tuple.getT2().getValue())
+                            .build();
+                });
+    }
+
     private boolean hasReadPermission(Tuple2<GroupMember, OrgMember> tuple) {
         GroupMember groupMember = tuple.getT1();
         OrgMember orgMember = tuple.getT2();
@@ -311,4 +392,64 @@ public Mono<Boolean> removeUser(String groupId, String userId) {
                     return groupMemberService.removeMember(groupId, userId);
                 });
     }
+
+    @Override
+    public Mono<OrgMemberListView> getPotentialGroupMembers(String groupId, String searchName, Integer pageNum, Integer pageSize) {
+        return groupService.getById(groupId)
+                .flatMap(group -> {
+                    String orgId = group.getOrganizationId();
+                    Mono<List<OrgMember>> orgMemberUserIdsMono = orgMemberService.getOrganizationMembers(orgId).collectList();
+                    Mono<List<GroupMember>> groupMemberUserIdsMono = groupMemberService.getGroupMembers(groupId);
+
+                    return Mono.zip(orgMemberUserIdsMono, groupMemberUserIdsMono)
+                            .flatMap(tuple -> {
+                                List<OrgMember> orgMembers = tuple.getT1();
+                                List<GroupMember> groupMembers = tuple.getT2();
+
+                                Set<String> groupMemberUserIds = groupMembers.stream()
+                                        .map(GroupMember::getUserId)
+                                        .collect(Collectors.toSet());
+
+                                Collection<String> potentialUserIds = orgMembers.stream()
+                                        .map(OrgMember::getUserId)
+                                        .filter(uid -> !groupMemberUserIds.contains(uid))
+                                        .collect(Collectors.toList());
+
+                                if (potentialUserIds.isEmpty()) {
+                                    return Mono.just(OrgMemberListView.builder()
+                                            .members(List.of())
+                                            .total(0)
+                                            .pageNum(pageNum)
+                                            .pageSize(pageSize)
+                                            .build());
+                                }
+
+                                Pageable pageable = PageRequest.of(pageNum - 1, pageSize);
+                                String searchRegex = searchName != null && !searchName.isBlank() ? ".*" + Pattern.quote(searchName) + ".*" : ".*";
+
+                                return userService.findUsersByIdsAndSearchNameForPagination(
+                                                potentialUserIds, String.valueOf(UserState.ACTIVATED), true, searchRegex, pageable)
+                                        .collectList()
+                                        .zipWith(userService.countUsersByIdsAndSearchName(
+                                                potentialUserIds, String.valueOf(UserState.ACTIVATED), true, searchRegex))
+                                        .map(tupleUser -> {
+                                            List<User> users = tupleUser.getT1();
+                                            long total = tupleUser.getT2();
+                                            List<OrgMemberListView.OrgMemberView> memberViews = users.stream()
+                                                    .map(u -> OrgMemberListView.OrgMemberView.builder()
+                                                            .userId(u.getId())
+                                                            .name(u.getName())
+                                                            .build())
+                                                    .collect(Collectors.toList());
+                                            return OrgMemberListView.builder()
+                                                    .members(memberViews)
+                                                    .total((int) total)
+                                                    .pageNum(pageNum)
+                                                    .pageSize(pageSize)
+                                                    .build();
+                                        });
+                            });
+                });
+    }
+
 }
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupController.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupController.java
index 110a838378..0252bd4707 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupController.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupController.java
@@ -20,10 +20,8 @@
 import org.lowcoder.domain.organization.service.OrgMemberService;
 import org.lowcoder.sdk.exception.BizError;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
+import org.lowcoder.api.usermanagement.view.OrgMemberListView;
 
 import reactor.core.publisher.Mono;
 import reactor.util.function.Tuple2;
@@ -118,11 +116,16 @@ public Mono<GroupListResponseView<List<GroupView>>> getOrgGroups(@RequestParam(r
 
 
     @Override
-    public Mono<ResponseView<GroupMemberAggregateView>> getGroupMembers(@PathVariable String groupId,
-            @RequestParam(required = false, defaultValue = "1") int pageNum,
-            @RequestParam(required = false, defaultValue = "100") int pageSize) {
+    public Mono<ResponseView<GroupMemberAggregateView>> getGroupMembers(
+            @PathVariable String groupId,
+            @RequestParam(required = false) String search,
+            @RequestParam(required = false) String role,
+            @RequestParam(required = false) String sort,
+            @RequestParam(required = false) String order,
+            @RequestParam(required = false, defaultValue = "1") Integer pageNum,
+            @RequestParam(required = false, defaultValue = "100") Integer pageSize) {
         return gidService.convertGroupIdToObjectId(groupId).flatMap(objectId ->
-            groupApiService.getGroupMembers(objectId, pageNum, pageSize)
+            groupApiService.getGroupMembersForSearch(objectId, search, role, sort, order, pageNum, pageSize)
                 .map(ResponseView::success));
     }
 
@@ -180,4 +183,15 @@ public Mono<ResponseView<Boolean>> removeUser(@PathVariable String groupId,
                 .map(Tuple2::getT2)
                 .map(ResponseView::success));
     }
+
+    @Override
+    public Mono<ResponseView<OrgMemberListView>> searchPotentialGroupMembers(
+            @PathVariable String groupId,
+            @RequestParam(required = false) String searchName,
+            @RequestParam(required = false, defaultValue = "1") Integer pageNum,
+            @RequestParam(required = false, defaultValue = "1000") Integer pageSize) {
+        return gidService.convertGroupIdToObjectId(groupId).flatMap(id ->
+                groupApiService.getPotentialGroupMembers(id, searchName, pageNum, pageSize)
+                .map(ResponseView::success));
+    }
 }
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupEndpoints.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupEndpoints.java
index 89e294628d..b4530c1f61 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupEndpoints.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/GroupEndpoints.java
@@ -68,14 +68,20 @@ public Mono<GroupListResponseView<List<GroupView>>> getOrgGroups(@RequestParam(r
 
 	@Operation(
 			tags = TAG_GROUP_MEMBERS,
-		    operationId = "listGroupMembers",
-		    summary = "List User Group Members",
-		    description = "Retrieve a list of Users / Members within a specific User Group in Lowcoder, showing the group's composition."
+			operationId = "listGroupMembersWithSearchAndSort",
+			summary = "List User Group Members with Search and Sort",
+			description = "Retrieve a paginated, searchable, and sortable list of Users / Members within a specific User Group in Lowcoder."
 	)
-    @GetMapping("/{groupId}/members")
-    public Mono<ResponseView<GroupMemberAggregateView>> getGroupMembers(@PathVariable String groupId,
-            @RequestParam(required = false, defaultValue = "1") int pageNum,
-            @RequestParam(required = false, defaultValue = "100") int pageSize);
+	@GetMapping("/{groupId}/members")
+	public Mono<ResponseView<GroupMemberAggregateView>> getGroupMembers(
+			@PathVariable String groupId,
+			@RequestParam(required = false) String search,
+			@RequestParam(required = false) String role,
+			@RequestParam(required = false) String sort,
+			@RequestParam(required = false) String order,
+			@RequestParam(required = false, defaultValue = "1") Integer pageNum,
+			@RequestParam(required = false, defaultValue = "100") Integer pageSize
+	);
 
 	@Operation(
 			tags = TAG_GROUP_MEMBERS,
@@ -115,4 +121,19 @@ public Mono<ResponseView<Boolean>> updateRoleForMember(@RequestBody UpdateRoleRe
     @DeleteMapping("/{groupId}/remove")
     public Mono<ResponseView<Boolean>> removeUser(@PathVariable String groupId,
             @RequestParam String userId);
+
+	@Operation(
+			tags = TAG_GROUP_MEMBERS,
+			operationId = "searchPotentialGroupMembers",
+			summary = "Search Potential Group Members",
+			description = "Retrieve a list of users who are not currently members of the specified group within an organization."
+	)
+
+	@GetMapping("/{groupId}/potential-members")
+	public Mono<ResponseView<OrgMemberListView>> searchPotentialGroupMembers(
+			@PathVariable String groupId,
+			@RequestParam(required = false) String searchName,
+			@RequestParam(required = false, defaultValue = "1") Integer pageNum,
+			@RequestParam(required = false, defaultValue = "1000") Integer pageSize
+	);
 }
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrgApiService.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrgApiService.java
index c87732d35c..2901aeb0dc 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrgApiService.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrgApiService.java
@@ -53,7 +53,5 @@ public interface OrgApiService {
     Mono<ConfigView> getOrganizationConfigs(String orgId);
 
     Mono<Long> getApiUsageCount(String orgId, Boolean lastMonthOnly);
-
-    Mono<OrgMemberListView> getOrganizationMembersForSearch(String orgId, String searchMemberName, String searchGroupId, Integer pageNum, Integer pageSize);
 }
 
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrgApiServiceImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrgApiServiceImpl.java
index 2a5b0d0c30..2d2b6cd2d5 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrgApiServiceImpl.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrgApiServiceImpl.java
@@ -90,78 +90,6 @@ public Mono<OrgMemberListView> getOrganizationMembers(String orgId, int page, in
                 .then(getOrgMemberListView(orgId, page, count));
     }
 
-// Update getOrgMemberListViewForSearch to filter by group membership
-private Mono<OrgMemberListView> getOrgMemberListViewForSearch(String orgId, String searchMemberName, String searchGroupId, Integer page, Integer pageSize) {
-    return orgMemberService.getOrganizationMembers(orgId)
-            .collectList()
-            .flatMap(orgMembers -> {
-                List<String> userIds = orgMembers.stream()
-                        .map(OrgMember::getUserId)
-                        .collect(Collectors.toList());
-                Mono<Map<String, User>> users = userService.getByIds(userIds);
-
-                // If searchGroupId is provided, fetch group members
-                Mono<Set<String>> groupUserIdsMono = StringUtils.isBlank(searchGroupId)
-                        ? Mono.just(Collections.emptySet())
-                        : groupMemberService.getGroupMembers(searchGroupId)
-                        .map(list -> list.stream()
-                        .map(GroupMember::getUserId)
-                        .collect(Collectors.toSet()));
-
-                return Mono.zip(users, groupUserIdsMono)
-                        .map(tuple -> {
-                            Map<String, User> userMap = tuple.getT1();
-                            Set<String> groupUserIds = tuple.getT2();
-
-                            var list = orgMembers.stream()
-                                    .map(orgMember -> {
-                                        User user = userMap.get(orgMember.getUserId());
-                                        if (user == null) {
-                                            log.warn("user {} not exist and will be removed from the result.", orgMember.getUserId());
-                                            return null;
-                                        }
-                                        return buildOrgMemberView(user, orgMember);
-                                    })
-                                    .filter(Objects::nonNull)
-                                    .filter(orgMemberView -> {
-                                        // Filter by name
-                                        boolean matchesName = StringUtils.isBlank(searchMemberName) ||
-                                                StringUtils.containsIgnoreCase(orgMemberView.getName(), searchMemberName);
-
-                                        // Filter by group
-                                        boolean matchesGroup = StringUtils.isBlank(searchGroupId) ||
-                                                groupUserIds.contains(orgMemberView.getUserId());
-
-                                        return matchesName && matchesGroup;
-                                    })
-                                    .collect(Collectors.toList());
-                            var pageTotal = list.size();
-                            list = list.subList((page - 1) * pageSize, pageSize == 0 ? pageTotal : Math.min(page * pageSize, pageTotal));
-                            return Pair.of(list, pageTotal);
-                        });
-            })
-            .zipWith(sessionUserService.getVisitorOrgMemberCache())
-            .map(tuple -> {
-                List<OrgMemberView> memberViews = tuple.getT1().getLeft();
-                var pageTotal = tuple.getT1().getRight();
-                OrgMember orgMember = tuple.getT2();
-                return OrgMemberListView.builder()
-                        .members(memberViews)
-                        .total(pageTotal)
-                        .pageNum(page)
-                        .pageSize(pageSize)
-                        .visitorRole(orgMember.getRole().getValue())
-                        .build();
-            });
-    }
-    @Override
-    public  Mono<OrgMemberListView> getOrganizationMembersForSearch(String orgId, String searchMemberName, String searchGroupId, Integer page, Integer pageSize) {
-        return sessionUserService.getVisitorId()
-                .flatMap(visitorId -> orgMemberService.getOrgMember(orgId, visitorId))
-                .switchIfEmpty(deferredError(BizError.NOT_AUTHORIZED, "NOT_AUTHORIZED"))
-                .then(getOrgMemberListViewForSearch(orgId, searchMemberName, searchGroupId, page, pageSize));
-    }
-
     private Mono<OrgMemberListView> getOrgMemberListView(String orgId, int page, int count) {
         return orgMemberService.getOrganizationMembers(orgId)
                 .collectList()
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrganizationController.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrganizationController.java
index f73758127d..15637f364b 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrganizationController.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrganizationController.java
@@ -118,16 +118,6 @@ public Mono<ResponseView<OrgMemberListView>> getOrgMembers(@PathVariable String
             orgApiService.getOrganizationMembers(id, pageNum, pageSize)
                 .map(ResponseView::success));
     }
-    @Override
-    public Mono<ResponseView<OrgMemberListView>> getOrgMembersForSearch(@PathVariable String orgId,
-            @PathVariable String searchMemberName,
-            @PathVariable String searchGroupId,
-            @RequestParam(required = false, defaultValue = "1") int pageNum,
-            @RequestParam(required = false, defaultValue = "1000") int pageSize) {
-        return gidService.convertOrganizationIdToObjectId(orgId).flatMap(id ->
-            orgApiService.getOrganizationMembersForSearch(id, searchMemberName, searchGroupId, pageNum, pageSize)
-                .map(ResponseView::success));
-    }
 
     @Override
     public Mono<ResponseView<Boolean>> updateRoleForMember(@RequestBody UpdateRoleRequest updateRoleRequest,
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrganizationEndpoints.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrganizationEndpoints.java
index 6fee2a511f..86ed6888b2 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrganizationEndpoints.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/OrganizationEndpoints.java
@@ -98,13 +98,6 @@ public Mono<ResponseView<OrgMemberListView>> getOrgMembers(@PathVariable String
             @RequestParam(required = false, defaultValue = "1") int pageNum,
             @RequestParam(required = false, defaultValue = "1000") int pageSize);
 
-	@GetMapping("/{orgId}/{searchMemberName}/{searchGroupId}/members")
-	public Mono<ResponseView<OrgMemberListView>> getOrgMembersForSearch(@PathVariable String orgId,
-		   @PathVariable String searchMemberName,
-		   @PathVariable String searchGroupId,
-		   @RequestParam(required = false, defaultValue = "1") int pageNum,
-		   @RequestParam(required = false, defaultValue = "1000") int pageSize);
-
 	@Operation(
 			tags = TAG_ORGANIZATION_MEMBERS,
 		    operationId = "updateOrganizationMemberRole",
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/UserController.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/UserController.java
index f3485477e3..0cc4d89dfc 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/UserController.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/UserController.java
@@ -8,11 +8,13 @@
 import org.lowcoder.api.framework.view.ResponseView;
 import org.lowcoder.api.home.SessionUserService;
 import org.lowcoder.api.home.UserHomeApiService;
+import org.lowcoder.api.home.UserHomepageView;
 import org.lowcoder.api.usermanagement.view.OrgView;
 import org.lowcoder.api.usermanagement.view.UpdateUserRequest;
 import org.lowcoder.api.usermanagement.view.UserProfileView;
 import org.lowcoder.domain.organization.model.MemberRole;
 import org.lowcoder.domain.organization.model.OrgMember;
+import org.lowcoder.domain.organization.model.Organization;
 import org.lowcoder.domain.organization.service.OrgMemberService;
 import org.lowcoder.domain.organization.service.OrganizationService;
 import org.lowcoder.domain.user.constant.UserStatusType;
@@ -23,6 +25,7 @@
 import org.lowcoder.sdk.config.CommonConfig;
 import org.lowcoder.sdk.constants.AuthSourceConstants;
 import org.lowcoder.sdk.exception.BizError;
+import org.springframework.data.domain.Sort;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.codec.multipart.Part;
 import org.springframework.web.bind.annotation.*;
@@ -33,7 +36,10 @@
 import reactor.core.publisher.Flux;
 import reactor.core.publisher.Mono;
 
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
 
 import static org.lowcoder.sdk.exception.BizError.INVALID_USER_STATUS;
 import static org.lowcoder.sdk.util.ExceptionUtils.ofError;
@@ -80,15 +86,33 @@ public Mono<ResponseView<?>> getUserOrgs(ServerWebExchange exchange,
                                              @RequestParam(required = false, defaultValue = "10") Integer pageSize) {
         return sessionUserService.getVisitor()
                 .flatMap(user -> {
-                    Pageable pageable = PageRequest.of(pageNum - 1, pageSize);
+                    Pageable pageable = PageRequest.of(pageNum - 1, pageSize, Sort.by(Sort.Direction.DESC, "updatedAt"));
                     String filter = orgName == null ? "" : orgName;
+                    Mono<String> currentOrgIdMono = sessionUserService.getVisitorOrgMemberCache()
+                            .map(OrgMember::getOrgId);
                     return organizationService.findUserOrgs(user.getId(), filter, pageable)
                             .map(OrgView::new)
                             .collectList()
                             .zipWith(organizationService.countUserOrgs(user.getId(), filter))
-                            .map(tuple -> PageResponseView.success(
-                                    tuple.getT1(), pageNum, pageSize, tuple.getT2().intValue()
-                            ));
+                            .zipWith(currentOrgIdMono)
+                            .map(tuple -> {
+                                List<OrgView> orgViews = tuple.getT1().getT1();
+                                long total = tuple.getT1().getT2();
+                                String currentOrgId = tuple.getT2();
+
+                                // Create a list of maps each containing orgView and isCurrentOrg
+                                List<Map<String, Object>> resultList = orgViews.stream()
+                                        .map(orgView -> {
+                                            Map<String, Object> map = new HashMap<>();
+                                            map.put("orgView", orgView);
+                                            map.put("isCurrentOrg", orgView.getOrgId().equals(currentOrgId));
+                                            return map;
+                                        })
+                                        .sorted((a, b) -> Boolean.compare((Boolean) b.get("isCurrentOrg"), (Boolean) a.get("isCurrentOrg")))
+                                        .collect(Collectors.toList());
+
+                                return PageResponseView.success(resultList, pageNum, pageSize, (int) total);
+                            });
                 })
                 .map(ResponseView::success);
     }
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/view/OrgView.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/view/OrgView.java
index 965c9a9121..e2f2c24593 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/view/OrgView.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/usermanagement/view/OrgView.java
@@ -2,6 +2,7 @@
 
 import jakarta.annotation.Nonnull;
 import org.lowcoder.domain.organization.model.Organization;
+import java.time.Instant;
 
 public class OrgView {
 
@@ -19,5 +20,7 @@ public String getOrgName() {
         return organization.getName();
     }
 
+    public Instant getCreatedAt() { return organization.getCreatedAt(); }
 
+    public Instant getUpdatedAt() { return organization.getUpdatedAt(); }
 }