diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
index acd4b2d09..a99d5eaee 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -103,7 +103,7 @@ const childrenMap = {
   searchCompletePY: BoolControl,
   searchLabelOnly: BoolControl.DEFAULT_TRUE,
   valueOrLabel: dropdownControl(valueOrLabelOption, "label"),
-  autoCompleteType: dropdownControl(autoCompleteType, "AntDesign"),
+  autoCompleteType: dropdownControl(autoCompleteType, "normal"),
   autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
   componentSize: dropdownControl(componentSize, "small"),
   valueInItems: booleanExposingStateControl("valueInItems"),
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
index 290d873f2..c0602b4a4 100644
--- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -168,7 +168,7 @@ const childrenMap = {
   value: stringExposingStateControl("value"),
   hideToolbar: BoolControl,
   readOnly: BoolControl,
-  autoHeight: AutoHeightControl,
+  autoHeight: withDefault(AutoHeightControl, "fixed"),
   placeholder: withDefault(StringControl, trans("richTextEditor.placeholder")),
   toolbar: withDefault(StringControl, JSON.stringify(toolbarOptions)),
   onEvent: ChangeEventHandlerControl,
@@ -327,7 +327,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
           </Section>
         )}
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
           <>
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index 80c8c5900..6c043e30a 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -7,7 +7,7 @@ import {
 import { Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "../../controls/boolControl";
 import { AutoHeightControl } from "../../controls/autoHeightControl";
-import { UICompBuilder } from "../../generators";
+import { UICompBuilder, withDefault } from "../../generators";
 import { FormDataPropertyView } from "../formComp/formDataConstants";
 import {
   getStyle,
@@ -45,15 +45,19 @@ const TextAreaStyled = styled(TextArea)<{
 const Wrapper = styled.div<{
   $style: InputLikeStyleType;
 }>`
-  height: 100%;
+  height: 100% !important;
+
+  .ant-input { 
+    height:100% !important;
+  }
 
   .ant-input-clear-icon {
-    opacity: 0.45;
+    opacity: 0.75;
     color: ${(props) => props.$style.text};
     top: 10px;
 
     &:hover {
-      opacity: 0.65;
+      opacity: 0.9;
       color: ${(props) => props.$style.text};
     }
   }
@@ -64,7 +68,7 @@ let TextAreaTmpComp = (function () {
     ...textInputChildren,
     viewRef: RefControl<TextAreaRef>,
     allowClear: BoolControl,
-    autoHeight: AutoHeightControl,
+    autoHeight: withDefault(AutoHeightControl, "fixed"),
     style: styleControl(InputLikeStyle),
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -73,12 +77,11 @@ let TextAreaTmpComp = (function () {
       required: props.required,
       children: (
         <Wrapper $style={props.style}>
-          <TextAreaStyled
+          <TextAreaStyled 
             {...inputProps}
             ref={props.viewRef}
             allowClear={props.allowClear}
-            autoSize={props.autoHeight}
-            style={{ height: "100%", maxHeight: "100%", resize: "none" }}
+            style={{ height: "100% !important", resize: "vertical" }}
             $style={props.style}
           />
         </Wrapper>
@@ -105,7 +108,8 @@ let TextAreaTmpComp = (function () {
           <Section name={sectionNames.advanced}>
             {allowClearPropertyView(children)}
             {readOnlyPropertyView(children)}
-          </Section><TextInputValidationSection {...children} /></>
+          </Section>
+          <TextInputValidationSection {...children} /></>
         )}
 
         {useContext(EditorContext).editorModeStatus === "layout" && (
diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
index a14e4e682..45edf6636 100644
--- a/client/packages/lowcoder/src/comps/index.tsx
+++ b/client/packages/lowcoder/src/comps/index.tsx
@@ -5,10 +5,7 @@ import { ModalComp } from "comps/hooks/modalComp";
 import { ButtonComp } from "./comps/buttonComp/buttonComp";
 import { DropdownComp } from "./comps/buttonComp/dropdownComp";
 import { LinkComp } from "./comps/buttonComp/linkComp";
-import {
-  ContainerComp,
-  defaultContainerData,
-} from "./comps/containerComp/containerComp";
+import { ContainerComp, defaultContainerData } from "./comps/containerComp/containerComp";
 import { CustomComp } from "./comps/customComp/customComp";
 import { DatePickerComp, DateRangeComp } from "./comps/dateComp/dateComp";
 import { DividerComp } from "./comps/dividerComp";
@@ -37,6 +34,39 @@ import { InputComp } from "./comps/textInputComp/inputComp";
 import { PasswordComp } from "./comps/textInputComp/passwordComp";
 import { TextAreaComp } from "./comps/textInputComp/textAreaComp";
 import { TimePickerComp, TimeRangeComp } from "./comps/dateComp/timeComp";
+import { defaultFormData, FormComp } from "./comps/formComp/formComp";
+import { IFrameComp } from "./comps/iframeComp";
+import { defaultGridData, defaultListViewData, GridComp, ListViewComp,} from "./comps/listViewComp";
+import { ModuleComp } from "./comps/moduleComp/moduleComp";
+import { NavComp } from "./comps/navComp/navComp";
+import { TableComp } from "./comps/tableComp";
+import { registerComp, UICompManifest, UICompType } from "./uiCompRegistry";
+import { QRCodeComp } from "./comps/qrCodeComp";
+import { JsonExplorerComp } from "./comps/jsonComp/jsonExplorerComp";
+import { JsonEditorComp } from "./comps/jsonComp/jsonEditorComp";
+import { TreeComp } from "./comps/treeComp/treeComp";
+import { TreeSelectComp } from "./comps/treeComp/treeSelectComp";
+import { trans } from "i18n";
+import { remoteComp } from "./comps/remoteComp/remoteComp";
+import { AudioComp } from "./comps/mediaComp/audioComp";
+import { VideoComp } from "./comps/mediaComp/videoComp";
+import { DrawerComp } from "./hooks/drawerComp";
+import { CarouselComp } from "./comps/carouselComp";
+import { ToggleButtonComp } from "./comps/buttonComp/toggleButtonComp";
+import { defaultCollapsibleContainerData } from "./comps/containerComp/collapsibleContainerComp";
+import { RemoteCompInfo } from "types/remoteComp";
+import { ScannerComp } from "./comps/buttonComp/scannerComp";
+import { SignatureComp } from "./comps/signatureComp";
+import { TimeLineComp } from "./comps/timelineComp/timelineComp";
+import { CommentComp } from "./comps/commentComp/commentComp";
+import { MentionComp } from "./comps/textInputComp/mentionComp";
+import { AutoCompleteComp } from "./comps/autoCompleteComp/autoCompleteComp";
+import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp"; 
+import { ResponsiveLayoutComp } from "./comps/responsiveLayout";
+import { VideoMeetingStreamComp } from "./comps/meetingComp/videoMeetingStreamComp";
+import { ControlButton } from "./comps/meetingComp/controlButton";
+import { VideoMeetingControllerComp } from "./comps/meetingComp/videoMeetingControllerComp";
+import { VideoSharingStreamComp } from "./comps/meetingComp/videoSharingStreamComp";
 
 import {
   AudioCompIcon,
@@ -104,46 +134,6 @@ import {
   MermaidIcon,
 } from "lowcoder-design";
 
-import { defaultFormData, FormComp } from "./comps/formComp/formComp";
-import { IFrameComp } from "./comps/iframeComp";
-import {
-  defaultGridData,
-  defaultListViewData,
-  GridComp,
-  ListViewComp,
-} from "./comps/listViewComp";
-import { ModuleComp } from "./comps/moduleComp/moduleComp";
-import { NavComp } from "./comps/navComp/navComp";
-import { TableComp } from "./comps/tableComp";
-import { registerComp, UICompManifest, UICompType } from "./uiCompRegistry";
-import { QRCodeComp } from "./comps/qrCodeComp";
-import { JsonExplorerComp } from "./comps/jsonComp/jsonExplorerComp";
-import { JsonEditorComp } from "./comps/jsonComp/jsonEditorComp";
-import { TreeComp } from "./comps/treeComp/treeComp";
-import { TreeSelectComp } from "./comps/treeComp/treeSelectComp";
-import { trans } from "i18n";
-import { remoteComp } from "./comps/remoteComp/remoteComp";
-import { AudioComp } from "./comps/mediaComp/audioComp";
-import { VideoComp } from "./comps/mediaComp/videoComp";
-import { DrawerComp } from "./hooks/drawerComp";
-import { CarouselComp } from "./comps/carouselComp";
-import { ToggleButtonComp } from "./comps/buttonComp/toggleButtonComp";
-import { defaultCollapsibleContainerData } from "./comps/containerComp/collapsibleContainerComp";
-import { RemoteCompInfo } from "types/remoteComp";
-import { ScannerComp } from "./comps/buttonComp/scannerComp";
-import { SignatureComp } from "./comps/signatureComp";
-import { TimeLineComp } from "./comps/timelineComp/timelineComp";
-import { CommentComp } from "./comps/commentComp/commentComp";
-import { MentionComp } from "./comps/textInputComp/mentionComp";
-import { AutoCompleteComp } from "./comps/autoCompleteComp/autoCompleteComp";
-//Added by Aqib Mirza
-import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp";
-import { ResponsiveLayoutComp } from "./comps/responsiveLayout";
-import { VideoMeetingStreamComp } from "./comps/meetingComp/videoMeetingStreamComp";
-import { ControlButton } from "./comps/meetingComp/controlButton";
-import { VideoMeetingControllerComp } from "./comps/meetingComp/videoMeetingControllerComp";
-import { VideoSharingStreamComp } from "./comps/meetingComp/videoSharingStreamComp";
-
 type Registry = {
   [key in UICompType]?: UICompManifest;
 };
@@ -155,60 +145,68 @@ const builtInRemoteComps: Omit<RemoteCompInfo, "compName"> = {
 };
 
 const uiCompMap: Registry = {
-  input: {
-    name: trans("uiComp.inputCompName"),
-    enName: "Input",
-    description: trans("uiComp.inputCompDesc"),
-    categories: ["dataInputText", "common"],
-    icon: InputCompIcon,
-    keywords: trans("uiComp.inputCompKeywords"),
-    comp: InputComp,
-  },
-  textArea: {
-    name: trans("uiComp.textAreaCompName"),
-    enName: "Text Area",
-    description: trans("uiComp.textAreaCompDesc"),
-    categories: ["dataInputText"],
-    icon: TextAreaCompIcon,
-    keywords: trans("uiComp.textAreaCompKeywords"),
-    comp: TextAreaComp,
+
+  // Dashboards
+
+  chart: {
+    name: trans("uiComp.chartCompName"),
+    enName: "Chart",
+    description: trans("uiComp.chartCompDesc"),
+    categories: ["dashboards"],
+    icon: ChartCompIcon,
+    comp: remoteComp({ ...builtInRemoteComps, compName: "chart" }),
+    keywords: trans("uiComp.chartCompKeywords"),
+    layoutInfo: {
+      w: 12,
+      h: 40,
+    },
   },
-  password: {
-    name: trans("uiComp.passwordCompName"),
-    enName: "Password",
-    description: trans("uiComp.passwordCompDesc"),
-    categories: ["dataInputText"],
-    icon: PasswordCompIcon,
-    keywords: trans("uiComp.passwordCompKeywords"),
-    comp: PasswordComp,
+  mermaid: {
+    name: trans("uiComp.mermaidCompName"),
+    enName: "Mermaid Charts",
+    comp: remoteComp({ ...builtInRemoteComps, compName: "mermaid" }),
+    description: trans("uiComp.mermaidCompDesc"),
+    categories: ["dashboards"],
+    icon: MermaidIcon,
+    keywords: trans("uiComp.mermaidCompKeywords"),
+    layoutInfo: {
+      w: 12,
+      h: 40,
+    },
   },
-  richTextEditor: {
-    name: trans("uiComp.richTextEditorCompName"),
-    enName: "Rich Text Editor",
-    categories: ["dataInputText"],
-    description: trans("uiComp.richTextEditorCompDesc"),
-    icon: RichTextEditorCompIcon,
-    keywords: trans("uiComp.richTextEditorCompKeywords"),
-    comp: RichTextEditorComp,
+  timeline: {
+    name: trans("uiComp.timelineCompName"),
+    enName: "timeline",
+    description: trans("uiComp.timelineCompDesc"),
+    categories: ["dashboards"],
+    icon: TimeLineIcon,
+    keywords: trans("uiComp.timelineCompKeywords"),
+    comp: TimeLineComp,
     layoutInfo: {
-      w: 8,
-      h: 25,
+      w: 12,
+      h: 40,
     },
   },
-  numberInput: {
-    name: trans("uiComp.numberInputCompName"),
-    enName: "Number Input",
-    description: trans("uiComp.numberInputCompDesc"),
-    categories: ["dataInputNumber"],
-    icon: NumberInputCompIcon,
-    keywords: trans("uiComp.numberInputCompKeywords"),
-    comp: NumberInputComp,
+  table: {
+    name: trans("uiComp.tableCompName"),
+    enName: "Table",
+    description: trans("uiComp.tableCompDesc"),
+    categories: ["dashboards", "projectmanagement"],
+    icon: TableCompIcon,
+    keywords: trans("uiComp.tableCompKeywords"),
+    comp: TableComp,
+    layoutInfo: {
+      w: 15,
+      h: 40,
+    },
+    defaultDataFn: defaultTableData,
+    withoutLoading: true,
   },
   slider: {
     name: trans("uiComp.sliderCompName"),
     enName: "Slider",
     description: trans("uiComp.sliderCompDesc"),
-    categories: ["dataInputNumber"],
+    categories: ["dashboards"],
     icon: SliderCompIcon,
     keywords: trans("uiComp.sliderCompKeywords"),
     comp: SliderComp,
@@ -221,7 +219,7 @@ const uiCompMap: Registry = {
     name: trans("uiComp.rangeSliderCompName"),
     enName: "Range Slider",
     description: trans("uiComp.rangeSliderCompDesc"),
-    categories: ["dataInputNumber"],
+    categories: ["dashboards"],
     icon: RangeSliderCompIcon,
     keywords: trans("uiComp.rangeSliderCompKeywords"),
     comp: RangeSliderComp,
@@ -230,534 +228,643 @@ const uiCompMap: Registry = {
       h: 5,
     },
   },
-  rating: {
-    name: trans("uiComp.ratingCompName"),
-    enName: "Rating",
-    description: trans("uiComp.ratingCompDesc"),
-    categories: ["dataInputNumber"],
-    icon: RatingCompIcon,
-    keywords: trans("uiComp.ratingCompKeywords"),
-    comp: RatingComp,
-  },
-  switch: {
-    name: trans("uiComp.switchCompName"),
-    enName: "Switch",
-    description: trans("uiComp.switchCompDesc"),
-    categories: ["dataInputSelect"],
-    icon: SwitchCompIcon,
-    keywords: trans("uiComp.switchCompKeywords"),
-    comp: SwitchComp,
-  },
-  select: {
-    name: trans("uiComp.selectCompName"),
-    enName: "Select",
-    description: trans("uiComp.selectCompDesc"),
-    categories: ["dataInputSelect", "common"],
-    icon: SelectCompIcon,
-    keywords: trans("uiComp.selectCompKeywords"),
-    comp: SelectComp,
-  },
-  multiSelect: {
-    name: trans("uiComp.multiSelectCompName"),
-    enName: "Multiselect",
-    description: trans("uiComp.multiSelectCompDesc"),
-    categories: ["dataInputSelect"],
-    icon: MultiSelectCompIcon,
-    keywords: trans("uiComp.multiSelectCompKeywords"),
-    comp: MultiSelectComp,
+
+  // Layout
+
+  responsiveLayout: {
+    name: trans("uiComp.responsiveLayoutCompName"),
+    enName: "Responsive Layout",
+    description: trans("uiComp.responsiveLayoutCompDesc"),
+    categories: ["layout"],
+    icon: ResponsiveLayoutCompIcon,
+    keywords: trans("uiComp.responsiveLayoutCompKeywords"),
+    comp: ResponsiveLayoutComp,
+    withoutLoading: true,
     layoutInfo: {
-      w: 6,
-      h: 5,
+      w: 24,
+      h: 25,
+      delayCollision: true,
     },
   },
-  cascader: {
-    name: trans("uiComp.cascaderCompName"),
-    enName: "Cascader",
-    description: trans("uiComp.cascaderCompDesc"),
-    categories: ["dataInputSelect"],
-    icon: CascaderCompIcon,
-    keywords: trans("uiComp.cascaderCompKeywords"),
-    comp: CascaderWithDefault,
+  container: {
+    name: trans("uiComp.containerCompName"),
+    enName: "Container",
+    description: trans("uiComp.containerCompDesc"),
+    categories: ["layout"],
+    icon: ContainerCompIcon,
+    keywords: trans("uiComp.containerCompKeywords"),
+    comp: ContainerComp,
+    withoutLoading: true,
     layoutInfo: {
-      w: 9,
-      h: 5,
+      w: 12,
+      h: 25,
+      // static: true,
+      delayCollision: true,
     },
+    defaultDataFn: defaultContainerData,
   },
-  checkbox: {
-    name: trans("uiComp.checkboxCompName"),
-    enName: "Checkbox",
-    description: trans("uiComp.checkboxCompDesc"),
-    categories: ["dataInputSelect"],
-    icon: CheckboxCompIcon,
-    keywords: trans("uiComp.checkboxCompKeywords"),
-    comp: CheckboxComp,
+  tabbedContainer: {
+    name: trans("uiComp.tabbedContainerCompName"),
+    enName: "Tabbed Container",
+    description: trans("uiComp.tabbedContainerCompDesc"),
+    categories: ["layout"],
+    icon: TabbedContainerCompIcon,
+    keywords: trans("uiComp.tabbedContainerCompKeywords"),
+    comp: TabbedContainerComp,
+    withoutLoading: true,
     layoutInfo: {
-      w: 5,
-      h: 7,
+      w: 12,
+      h: 25,
+      // static: true,
+      delayCollision: true,
     },
   },
-  radio: {
-    name: trans("uiComp.radioCompName"),
-    enName: "Radio",
-    description: trans("uiComp.radioCompDesc"),
-    categories: ["dataInputSelect"],
-    icon: RadioCompIcon,
-    keywords: trans("uiComp.radioCompKeywords"),
-    comp: RadioComp,
+  collapsibleContainer: {
+    name: trans("uiComp.collapsibleContainerCompName"),
+    enName: "Collapsible Container",
+    description: trans("uiComp.collapsibleContainerCompDesc"),
+    categories: ["layout"],
+    icon: CollapsibleContainerCompIcon,
+    keywords: trans("uiComp.collapsibleContainerCompKeywords"),
+    comp: ContainerComp,
+    withoutLoading: true,
     layoutInfo: {
-      w: 5,
-      h: 7,
+      w: 12,
+      h: 25,
+      // static: true,
+      delayCollision: true,
     },
+    defaultDataFn: defaultCollapsibleContainerData,
   },
-  segmentedControl: {
-    name: trans("uiComp.segmentedControlCompName"),
-    enName: "Segmented Control",
-    description: trans("uiComp.segmentedControlCompDesc"),
-    categories: ["dataInputSelect"],
-    icon: SegmentedCompIcon,
-    keywords: trans("uiComp.segmentedControlCompKeywords"),
-    comp: SegmentedControlComp,
-  },
-  file: {
-    name: trans("uiComp.fileUploadCompName"),
-    enName: "File Upload",
-    description: trans("uiComp.fileUploadCompDesc"),
-    categories: ["dataInputSelect"],
-    icon: UploadCompIcon,
-    keywords: trans("uiComp.fileUploadCompKeywords"),
-    comp: FileComp,
-  },
-  date: {
-    name: trans("uiComp.dateCompName"),
-    enName: "Date",
-    description: trans("uiComp.dateCompDesc"),
-    categories: ["dataInputDate"],
-    icon: DateCompIcon,
-    keywords: trans("uiComp.dateCompKeywords"),
-    comp: DatePickerComp,
+  listView: {
+    name: trans("uiComp.listViewCompName"),
+    enName: "List View",
+    icon: ListViewIcon,
+    description: trans("uiComp.listViewCompDesc"),
+    categories: ["layout"],
+    keywords: trans("uiComp.listViewCompKeywords"),
+    comp: ListViewComp,
     layoutInfo: {
-      w: 6,
-      h: 5,
+      w: 12,
+      h: 40,
+      delayCollision: true,
     },
+    defaultDataFn: defaultListViewData,
   },
-  dateRange: {
-    name: trans("uiComp.dateRangeCompName"),
-    enName: "Date Range",
-    description: trans("uiComp.dateRangeCompDesc"),
-    categories: ["dataInputDate"],
-    icon: DateRangeCompIcon,
-    keywords: trans("uiComp.dateRangeCompKeywords"),
-    comp: DateRangeComp,
+  grid: {
+    name: trans("uiComp.gridCompName"),
+    enName: "Grid",
+    icon: GridCompIcon,
+    description: trans("uiComp.gridCompDesc"),
+    categories: ["layout"],
+    keywords: trans("uiComp.gridCompKeywords"),
+    comp: GridComp,
     layoutInfo: {
-      w: 9,
-      h: 5,
+      w: 12,
+      h: 40,
+      delayCollision: true,
     },
+    defaultDataFn: defaultGridData,
   },
-  time: {
-    name: trans("uiComp.timeCompName"),
-    enName: "Time",
-    description: trans("uiComp.timeCompDesc"),
-    categories: ["dataInputDate"],
-    icon: TimeCompIcon,
-    keywords: trans("uiComp.timeCompKeywords"),
-    comp: TimePickerComp,
-    layoutInfo: {
-      w: 6,
-      h: 5,
-    },
+  modal: {
+    name: trans("uiComp.modalCompName"),
+    enName: "Modal",
+    icon: ModalCompIcon,
+    description: trans("uiComp.modalCompDesc"),
+    categories: ["layout"],
+    keywords: trans("uiComp.modalCompKeywords"),
+    comp: ModalComp,
+    withoutLoading: true,
   },
-  timeRange: {
-    name: trans("uiComp.timeRangeCompName"),
-    enName: "Time Range",
-    categories: ["dataInputDate"],
-    description: trans("uiComp.timeRangeCompDesc"),
-    icon: TimeRangeCompIcon,
-    keywords: trans("uiComp.timeRangeCompKeywords"),
-    comp: TimeRangeComp,
+  drawer: {
+    name: trans("uiComp.drawerCompName"),
+    enName: "Drawer",
+    description: trans("uiComp.drawerCompDesc"),
+    categories: ["layout"],
+    icon: DrawerCompIcon,
+    keywords: trans("uiComp.drawerCompKeywords"),
+    comp: DrawerComp,
+    withoutLoading: true,
+  },
+  navigation: {
+    name: trans("uiComp.navigationCompName"),
+    enName: "Navigation",
+    description: trans("uiComp.navigationCompDesc"),
+    icon: NavComIcon,
+    categories: ["layout"],
+    keywords: trans("uiComp.navigationCompKeywords"),
+    comp: NavComp,
     layoutInfo: {
-      w: 9,
+      w: 24,
       h: 5,
     },
   },
-  button: {
-    name: trans("uiComp.buttonCompName"),
-    enName: "Button",
-    description: trans("uiComp.buttonCompDesc"),
-    categories: ["button", "common"],
-    icon: ButtonCompIcon,
-    keywords: trans("uiComp.buttonCompKeywords"),
-    comp: ButtonComp,
+  cascader: {
+    name: trans("uiComp.cascaderCompName"),
+    enName: "Cascader",
+    description: trans("uiComp.cascaderCompDesc"),
+    categories: ["layout"],
+    icon: CascaderCompIcon,
+    keywords: trans("uiComp.cascaderCompKeywords"),
+    comp: CascaderWithDefault,
     layoutInfo: {
-      w: 2,
+      w: 9,
       h: 5,
     },
-    withoutLoading: true,
   },
   link: {
     name: trans("uiComp.linkCompName"),
     enName: "Link",
     description: trans("uiComp.linkCompDesc"),
-    categories: ["button"],
+    categories: ["layout"],
     icon: LinkCompIcon,
     keywords: trans("uiComp.linkCompKeywords"),
     comp: LinkComp,
   },
-  dropdown: {
-    name: trans("uiComp.dropdownCompName"),
-    enName: "Dropdown",
-    description: trans("uiComp.dropdownCompDesc"),
-    categories: ["button"],
-    icon: DropdownCompIcon,
-    keywords: trans("uiComp.dropdownCompKeywords"),
-    comp: DropdownComp,
-  },
-  toggleButton: {
-    name: trans("uiComp.toggleButtonCompName"),
-    enName: "Toggle Button",
-    description: trans("uiComp.toggleButtonCompDesc"),
-    categories: ["button"],
-    icon: ToggleButtonCompIcon,
-    keywords: trans("uiComp.toggleButtonCompKeywords"),
-    comp: ToggleButtonComp,
-  },
-  text: {
-    name: trans("uiComp.textCompName"),
-    enName: "Text",
-    description: trans("uiComp.textCompDesc"),
-    categories: ["dataDisplay", "common"],
-    icon: TextCompIcon,
-    keywords: trans("uiComp.textCompKeywords"),
-    comp: TextComp,
-  },
-  table: {
-    name: trans("uiComp.tableCompName"),
-    enName: "Table",
-    description: trans("uiComp.tableCompDesc"),
-    categories: ["dataDisplay", "common"],
-    icon: TableCompIcon,
-    keywords: trans("uiComp.tableCompKeywords"),
-    comp: TableComp,
-    layoutInfo: {
-      w: 15,
-      h: 40,
-    },
-    defaultDataFn: defaultTableData,
-    withoutLoading: true,
-  },
-  image: {
-    name: trans("uiComp.imageCompName"),
-    enName: "Image",
-    description: trans("uiComp.imageCompDesc"),
-    categories: ["dataDisplay", "common"],
-    icon: ImageCompIcon,
-    keywords: trans("uiComp.imageCompKeywords"),
-    comp: ImageComp,
-    layoutInfo: {
-      w: 5,
-      h: 24,
-    },
-  },
-  progress: {
-    name: trans("uiComp.progressCompName"),
-    enName: "Progress",
-    description: trans("uiComp.progressCompDesc"),
-    categories: ["dataDisplay"],
-    icon: ProgressCompIcon,
-    keywords: trans("uiComp.progressCompKeywords"),
-    comp: ProgressComp,
-  },
-  progressCircle: {
-    name: trans("uiComp.progressCircleCompName"),
-    enName: "Process Circle",
-    description: trans("uiComp.progressCircleCompDesc"),
-    categories: ["dataDisplay"],
-    icon: ProcessCircleCompIcon,
-    keywords: trans("uiComp.progressCircleCompKeywords"),
-    comp: ProgressCircleComp,
-    layoutInfo: {
-      w: 4,
-      h: 19,
-    },
-  },
-  fileViewer: {
-    name: trans("uiComp.fileViewerCompName"),
-    enName: "File Viewer",
-    description: trans("uiComp.fileViewerCompDesc"),
-    categories: ["dataDisplay"],
-    icon: FileViewerCompIcon,
-    keywords: trans("uiComp.fileViewerCompKeywords"),
-    comp: FileViewerComp,
-  },
   divider: {
     name: trans("uiComp.dividerCompName"),
     enName: "Divider",
     description: trans("uiComp.dividerCompDesc"),
-    categories: ["dataDisplay"],
+    categories: ["layout"],
     icon: DividerCompIcon,
     keywords: trans("uiComp.dividerCompKeywords"),
     comp: DividerComp,
     layoutInfo: {
-      w: 14,
+      w: 12,
       h: 1,
     },
   },
-  qrCode: {
-    name: trans("uiComp.qrCodeCompName"),
-    enName: "QR Code",
-    description: trans("uiComp.qrCodeCompDesc"),
-    categories: ["dataDisplay"],
-    icon: QRCodeCompIcon,
-    keywords: trans("uiComp.qrCodeCompKeywords"),
-    comp: QRCodeComp,
-    layoutInfo: {
-      w: 4,
-      h: 19,
-    },
-  },
-  form: {
-    name: trans("uiComp.formCompName"),
-    enName: "Form",
-    description: trans("uiComp.formCompDesc"),
-    categories: ["container", "common"],
-    icon: FormCompIcon,
-    keywords: trans("uiComp.formCompKeywords"),
-    comp: FormComp,
-    withoutLoading: true,
-    layoutInfo: {
-      w: 9,
-      h: 31,
-      // static: true,
-      delayCollision: true,
-    },
-    defaultDataFn: defaultFormData,
-  },
-  jsonSchemaForm: {
-    name: trans("uiComp.jsonSchemaFormCompName"),
-    enName: "JSON Schema Form",
-    description: trans("uiComp.jsonSchemaFormCompDesc"),
-    categories: ["container"],
-    icon: JsonFormCompIcon,
-    keywords: trans("uiComp.jsonSchemaFormCompKeywords"),
-    comp: JsonSchemaFormComp,
-    layoutInfo: {
-      w: 8,
-      h: 50,
-    },
-  },
-  container: {
-    name: trans("uiComp.containerCompName"),
-    enName: "Container",
-    description: trans("uiComp.containerCompDesc"),
-    categories: ["container", "common"],
-    icon: ContainerCompIcon,
-    keywords: trans("uiComp.containerCompKeywords"),
-    comp: ContainerComp,
-    withoutLoading: true,
+
+  // Scheduling
+
+  calendar: {
+    name: trans("uiComp.calendarCompName"),
+    enName: "Calendar",
+    description: trans("uiComp.calendarCompDesc"),
+    categories: ["scheduling", "projectmanagement"],
+    icon: CalendarCompIcon,
+    keywords: trans("uiComp.calendarCompKeywords"),
+    comp: remoteComp({ ...builtInRemoteComps, compName: "calendar" }),
     layoutInfo: {
-      w: 9,
-      h: 25,
-      // static: true,
-      delayCollision: true,
+      w: 24,
+      h: 60,
     },
-    defaultDataFn: defaultContainerData,
   },
-  //ADDED BY FRED
+
+  // Collaboration
+
   sharingcomponent: {
     name: trans("meeting.sharingCompName"),
     enName: "Sharing",
     description: trans("meeting.sharingCompName"),
-    categories: ["meeting"],
+    categories: ["collaboration"],
     icon: VideoCompIcon,
     keywords: trans("meeting.meetingCompKeywords"),
     comp: VideoSharingStreamComp,
     withoutLoading: true,
+    layoutInfo: {
+      w: 12, 
+      h: 50,
+    }
   },
   videocomponent: {
     name: trans("meeting.videoCompName"),
     enName: "Video",
     description: trans("meeting.videoCompName"),
-    categories: ["meeting"],
+    categories: ["collaboration"],
     icon: VideoCompIcon,
     keywords: trans("meeting.meetingCompKeywords"),
     comp: VideoMeetingStreamComp,
     withoutLoading: true,
-  },
-  controlButton: {
-    name: trans("meeting.meetingControlCompName"),
-    enName: "Controls",
+    layoutInfo: {
+      w: 6, 
+      h: 32,
+    }
+  },
+  meeting: {
+    name: trans("meeting.meetingCompName"),
+    enName: "Drawer",
     description: trans("meeting.meetingCompDesc"),
-    categories: ["meeting"],
-    icon: ButtonCompIcon,
+    categories: ["collaboration"],
+    icon: DrawerCompIcon,
     keywords: trans("meeting.meetingCompKeywords"),
-    comp: ControlButton,
+    comp: VideoMeetingControllerComp,
     withoutLoading: true,
   },
-  //END
-  tabbedContainer: {
-    name: trans("uiComp.tabbedContainerCompName"),
-    enName: "Tabbed Container",
-    description: trans("uiComp.tabbedContainerCompDesc"),
-    categories: ["container", "common"],
-    icon: TabbedContainerCompIcon,
-    keywords: trans("uiComp.tabbedContainerCompKeywords"),
-    comp: TabbedContainerComp,
+  comment: {
+    name: trans("uiComp.commentCompName"),
+    enName: "comment",
+    description: trans("uiComp.commentCompDesc"),
+    categories: ["forms","collaboration"],
+    icon: CommentIcon,
+    keywords: trans("uiComp.commentCompKeywords"),
+    comp: CommentComp,
+    layoutInfo: {
+      w: 13,
+      h: 55,
+    },
+  },
+  mention: {
+    name: trans("uiComp.mentionCompName"),
+    enName: "mention",
+    description: trans("uiComp.mentionCompDesc"),
+    categories: ["forms","collaboration"],
+    icon: MentionIcon,
+    keywords: trans("uiComp.mentionCompKeywords"),
+    comp: MentionComp,
+  },
+
+  // Forms
+
+  form: {
+    name: trans("uiComp.formCompName"),
+    enName: "Form",
+    description: trans("uiComp.formCompDesc"),
+    categories: ["forms"],
+    icon: FormCompIcon,
+    keywords: trans("uiComp.formCompKeywords"),
+    comp: FormComp,
     withoutLoading: true,
     layoutInfo: {
-      w: 9,
-      h: 27,
+      w: 12,
+      h: 50,
       // static: true,
       delayCollision: true,
     },
+    defaultDataFn: defaultFormData,
   },
-  modal: {
-    name: trans("uiComp.modalCompName"),
-    enName: "Modal",
-    icon: ModalCompIcon,
-    description: trans("uiComp.modalCompDesc"),
-    categories: ["container", "common"],
-    keywords: trans("uiComp.modalCompKeywords"),
-    comp: ModalComp,
-    withoutLoading: true,
+  jsonSchemaForm: {
+    name: trans("uiComp.jsonSchemaFormCompName"),
+    enName: "JSON Schema Form",
+    description: trans("uiComp.jsonSchemaFormCompDesc"),
+    categories: ["forms"],
+    icon: JsonFormCompIcon,
+    keywords: trans("uiComp.jsonSchemaFormCompKeywords"),
+    comp: JsonSchemaFormComp,
+    layoutInfo: {
+      w: 12,
+      h: 50,
+    },
   },
-  listView: {
-    name: trans("uiComp.listViewCompName"),
-    enName: "List View",
-    icon: ListViewIcon,
-    description: trans("uiComp.listViewCompDesc"),
-    categories: ["container", "common"],
-    keywords: trans("uiComp.listViewCompKeywords"),
-    comp: ListViewComp,
+  jsonEditor: {
+    name: trans("uiComp.jsonEditorCompName"),
+    enName: "JSON Editor",
+    description: trans("uiComp.jsonEditorCompDesc"),
+    categories: ["forms"],
+    icon: JsonEditorCompIcon,
+    keywords: trans("uiComp.jsonEditorCompKeywords"),
+    comp: JsonEditorComp,
     layoutInfo: {
-      h: 47,
-      w: 10,
-      delayCollision: true,
+      w: 12,
+      h: 50,
     },
-    defaultDataFn: defaultListViewData,
   },
-  grid: {
-    name: trans("uiComp.gridCompName"),
-    enName: "Grid",
-    icon: GridCompIcon,
-    description: trans("uiComp.gridCompDesc"),
-    categories: ["container"],
-    keywords: trans("uiComp.gridCompKeywords"),
-    comp: GridComp,
+  jsonExplorer: {
+    name: trans("uiComp.jsonExplorerCompName"),
+    enName: "JSON Explorer",
+    description: trans("uiComp.jsonExplorerCompDesc"),
+    categories: ["forms"],
+    icon: JsonExplorerCompIcon,
+    keywords: trans("uiComp.jsonExplorerCompKeywords"),
+    comp: JsonExplorerComp,
     layoutInfo: {
-      h: 32,
-      w: 15,
-      delayCollision: true,
+      w: 12,
+      h: 50,
     },
-    defaultDataFn: defaultGridData,
   },
-  navigation: {
-    name: trans("uiComp.navigationCompName"),
-    enName: "Navigation",
-    description: trans("uiComp.navigationCompDesc"),
-    icon: NavComIcon,
-    categories: ["other"],
-    keywords: trans("uiComp.navigationCompKeywords"),
-    comp: NavComp,
+  richTextEditor: {
+    name: trans("uiComp.richTextEditorCompName"),
+    enName: "Rich Text Editor",
+    categories: ["forms"],
+    description: trans("uiComp.richTextEditorCompDesc"),
+    icon: RichTextEditorCompIcon,
+    keywords: trans("uiComp.richTextEditorCompKeywords"),
+    comp: RichTextEditorComp,
     layoutInfo: {
-      w: 13,
-      h: 5,
+      w: 12,
+      h: 50,
     },
   },
-  iframe: {
-    name: trans("uiComp.iframeCompName"),
-    enName: "IFrame",
-    description: trans("uiComp.iframeCompDesc"),
-    icon: IFrameCompIcon,
-    categories: ["other"],
-    keywords: trans("uiComp.iframeCompKeywords"),
-    comp: IFrameComp,
+  input: {
+    name: trans("uiComp.inputCompName"),
+    enName: "Input",
+    description: trans("uiComp.inputCompDesc"),
+    categories: ["forms"],
+    icon: InputCompIcon,
+    keywords: trans("uiComp.inputCompKeywords"),
+    comp: InputComp,
     layoutInfo: {
-      w: 13,
-      h: 52,
+      w: 6, 
+      h: 6,
+    }
+  },
+  password: {
+    name: trans("uiComp.passwordCompName"),
+    enName: "Password",
+    description: trans("uiComp.passwordCompDesc"),
+    categories: ["forms"],
+    icon: PasswordCompIcon,
+    keywords: trans("uiComp.passwordCompKeywords"),
+    comp: PasswordComp,
+    layoutInfo: {
+      w: 6, 
+      h: 6,
+    }
+  },
+  numberInput: {
+    name: trans("uiComp.numberInputCompName"),
+    enName: "Number Input",
+    description: trans("uiComp.numberInputCompDesc"),
+    categories: ["forms"],
+    icon: NumberInputCompIcon,
+    keywords: trans("uiComp.numberInputCompKeywords"),
+    comp: NumberInputComp,
+    layoutInfo: {
+      w: 6, 
+      h: 6,
+    }
+  },
+  textArea: {
+    name: trans("uiComp.textAreaCompName"),
+    enName: "Text Area",
+    description: trans("uiComp.textAreaCompDesc"),
+    categories: ["forms"],
+    icon: TextAreaCompIcon,
+    keywords: trans("uiComp.textAreaCompKeywords"),
+    comp: TextAreaComp,
+    layoutInfo: {
+      w: 6, 
+      h: 12,
+    }
+  },
+  switch: {
+    name: trans("uiComp.switchCompName"),
+    enName: "Switch",
+    description: trans("uiComp.switchCompDesc"),
+    categories: ["forms"],
+    icon: SwitchCompIcon,
+    keywords: trans("uiComp.switchCompKeywords"),
+    comp: SwitchComp,
+    layoutInfo: {
+      w: 6, 
+      h: 6,
+    }
+  },
+  checkbox: {
+    name: trans("uiComp.checkboxCompName"),
+    enName: "Checkbox",
+    description: trans("uiComp.checkboxCompDesc"),
+    categories: ["forms"],
+    icon: CheckboxCompIcon,
+    keywords: trans("uiComp.checkboxCompKeywords"),
+    comp: CheckboxComp,
+    layoutInfo: {
+      w: 6,
+      h: 6,
     },
   },
-  custom: {
-    name: trans("uiComp.customCompName"),
-    enName: "Custom Component",
-    description: trans("uiComp.customCompDesc"),
-    icon: CustomCompIcon,
-    categories: ["other"],
-    keywords: trans("uiComp.customCompKeywords"),
-    comp: CustomComp,
+  radio: {
+    name: trans("uiComp.radioCompName"),
+    enName: "Radio",
+    description: trans("uiComp.radioCompDesc"),
+    categories: ["forms"],
+    icon: RadioCompIcon,
+    keywords: trans("uiComp.radioCompKeywords"),
+    comp: RadioComp,
     layoutInfo: {
-      w: 9,
-      h: 26,
+      w: 6,
+      h: 6,
     },
   },
-  module: {
-    name: trans("uiComp.moduleCompName"),
-    enName: "Module",
-    icon: CustomCompIcon,
-    description: trans("uiComp.moduleCompDesc"),
-    categories: [],
-    keywords: trans("uiComp.moduleCompKeywords"),
-    comp: ModuleComp,
+  date: {
+    name: trans("uiComp.dateCompName"),
+    enName: "Date",
+    description: trans("uiComp.dateCompDesc"),
+    categories: ["forms", "scheduling"],
+    icon: DateCompIcon,
+    keywords: trans("uiComp.dateCompKeywords"),
+    comp: DatePickerComp,
     layoutInfo: {
-      w: 9,
-      h: 26,
+      w: 6,
+      h: 6,
     },
   },
-  jsonExplorer: {
-    name: trans("uiComp.jsonExplorerCompName"),
-    enName: "JSON Explorer",
-    description: trans("uiComp.jsonExplorerCompDesc"),
-    categories: ["dataDisplay"],
-    icon: JsonExplorerCompIcon,
-    keywords: trans("uiComp.jsonExplorerCompKeywords"),
-    comp: JsonExplorerComp,
+  dateRange: {
+    name: trans("uiComp.dateRangeCompName"),
+    enName: "Date Range",
+    description: trans("uiComp.dateRangeCompDesc"),
+    categories: ["forms", "scheduling"],
+    icon: DateRangeCompIcon,
+    keywords: trans("uiComp.dateRangeCompKeywords"),
+    comp: DateRangeComp,
     layoutInfo: {
-      w: 10,
-      h: 47,
+      w: 12,
+      h: 6,
     },
   },
-  jsonEditor: {
-    name: trans("uiComp.jsonEditorCompName"),
-    enName: "JSON Editor",
-    description: trans("uiComp.jsonEditorCompDesc"),
-    categories: ["dataInputText"],
-    icon: JsonEditorCompIcon,
-    keywords: trans("uiComp.jsonEditorCompKeywords"),
-    comp: JsonEditorComp,
+  time: {
+    name: trans("uiComp.timeCompName"),
+    enName: "Time",
+    description: trans("uiComp.timeCompDesc"),
+    categories: ["forms", "scheduling"],
+    icon: TimeCompIcon,
+    keywords: trans("uiComp.timeCompKeywords"),
+    comp: TimePickerComp,
     layoutInfo: {
-      w: 10,
-      h: 42,
+      w: 6,
+      h: 6,
     },
   },
-  tree: {
-    name: trans("uiComp.treeCompName"),
-    enName: "Tree",
-    description: trans("uiComp.treeCompDesc"),
-    categories: ["dataDisplay"],
-    icon: TreeIcon,
-    keywords: trans("uiComp.treeCompKeywords"),
-    comp: TreeComp,
+  timeRange: {
+    name: trans("uiComp.timeRangeCompName"),
+    enName: "Time Range",
+    categories: ["forms", "scheduling"],
+    description: trans("uiComp.timeRangeCompDesc"),
+    icon: TimeRangeCompIcon,
+    keywords: trans("uiComp.timeRangeCompKeywords"),
+    comp: TimeRangeComp,
+    layoutInfo: {
+      w: 12,
+      h: 6,
+    },
+  },
+  button: {
+    name: trans("uiComp.buttonCompName"),
+    enName: "Button",
+    description: trans("uiComp.buttonCompDesc"),
+    categories: ["forms"],
+    icon: ButtonCompIcon,
+    keywords: trans("uiComp.buttonCompKeywords"),
+    comp: ButtonComp,
+    layoutInfo: {
+      w: 6,
+      h: 6,
+    },
+    withoutLoading: true,
+  },
+  controlButton: {
+    name: trans("meeting.meetingControlCompName"),
+    enName: "Controls",
+    description: trans("meeting.meetingCompDesc"),
+    categories: ["forms", "collaboration"],
+    icon: ButtonCompIcon,
+    keywords: trans("meeting.meetingCompKeywords"),
+    comp: ControlButton,
+    withoutLoading: true,
+    layoutInfo: {
+      w: 3,
+      h: 6,
+    },
+  },
+  dropdown: {
+    name: trans("uiComp.dropdownCompName"),
+    enName: "Dropdown",
+    description: trans("uiComp.dropdownCompDesc"),
+    categories: ["forms"],
+    icon: DropdownCompIcon,
+    keywords: trans("uiComp.dropdownCompKeywords"),
+    comp: DropdownComp,
+    layoutInfo: {
+      w: 6,
+      h: 6,
+    },
+  },
+  toggleButton: {
+    name: trans("uiComp.toggleButtonCompName"),
+    enName: "Toggle Button",
+    description: trans("uiComp.toggleButtonCompDesc"),
+    categories: ["forms"],
+    icon: ToggleButtonCompIcon,
+    keywords: trans("uiComp.toggleButtonCompKeywords"),
+    comp: ToggleButtonComp,
+    layoutInfo: {
+      w: 3,
+      h: 6,
+    },
+  },
+  segmentedControl: {
+    name: trans("uiComp.segmentedControlCompName"),
+    enName: "Segmented Control",
+    description: trans("uiComp.segmentedControlCompDesc"),
+    categories: ["forms"],
+    icon: SegmentedCompIcon,
+    keywords: trans("uiComp.segmentedControlCompKeywords"),
+    comp: SegmentedControlComp,
+    layoutInfo: {
+      w: 6,
+      h: 6,
+    },
+  },
+  rating: {
+    name: trans("uiComp.ratingCompName"),
+    enName: "Rating",
+    description: trans("uiComp.ratingCompDesc"),
+    categories: ["forms"],
+    icon: RatingCompIcon,
+    keywords: trans("uiComp.ratingCompKeywords"),
+    comp: RatingComp,
+    layoutInfo: {
+      w: 6, 
+      h: 6,
+    }
+  },
+  autocomplete: {
+    name: trans("uiComp.autoCompleteCompName"),
+    enName: "autoComplete",
+    description: trans("uiComp.autoCompleteCompDesc"),
+    categories: ["forms","collaboration"],
+    icon: AutoCompleteCompIcon,
+    keywords: cnchar
+      .spell(trans("uiComp.autoCompleteCompName"), "first", "low")
+      .toString(),
+    comp: AutoCompleteComp,
+    layoutInfo: {
+      w: 7,
+      h: 5,
+    },
+  },
+
+  // Project Management
+
+  progress: {
+    name: trans("uiComp.progressCompName"),
+    enName: "Progress",
+    description: trans("uiComp.progressCompDesc"),
+    categories: ["dashboards", "projectmanagement"],
+    icon: ProgressCompIcon,
+    keywords: trans("uiComp.progressCompKeywords"),
+    comp: ProgressComp,
+  },
+  progressCircle: {
+    name: trans("uiComp.progressCircleCompName"),
+    enName: "Process Circle",
+    description: trans("uiComp.progressCircleCompDesc"),
+    categories: ["dashboards", "projectmanagement"],
+    icon: ProcessCircleCompIcon,
+    keywords: trans("uiComp.progressCircleCompKeywords"),
+    comp: ProgressCircleComp,
+    layoutInfo: {
+      w: 4,
+      h: 19,
+    },
+  },  
+
+
+  // Document handling
+  
+  file: {
+    name: trans("uiComp.fileUploadCompName"),
+    enName: "File Upload",
+    description: trans("uiComp.fileUploadCompDesc"),
+    categories: ["documents"],
+    icon: UploadCompIcon,
+    keywords: trans("uiComp.fileUploadCompKeywords"),
+    comp: FileComp,
+  },
+  fileViewer: {
+    name: trans("uiComp.fileViewerCompName"),
+    enName: "File Viewer",
+    description: trans("uiComp.fileViewerCompDesc"),
+    categories: ["documents"],
+    icon: FileViewerCompIcon,
+    keywords: trans("uiComp.fileViewerCompKeywords"),
+    comp: FileViewerComp,
+  },
+  
+  // Multimedia
+
+  image: {
+    name: trans("uiComp.imageCompName"),
+    enName: "Image",
+    description: trans("uiComp.imageCompDesc"),
+    categories: ["multimedia"],
+    icon: ImageCompIcon,
+    keywords: trans("uiComp.imageCompKeywords"),
+    comp: ImageComp,
     layoutInfo: {
-      w: 11,
-      h: 35,
+      w: 5,
+      h: 24,
     },
   },
-  treeSelect: {
-    name: trans("uiComp.treeSelectCompName"),
-    enName: "Tree Select",
-    description: trans("uiComp.treeSelectCompDesc"),
-    categories: ["dataInputSelect"],
-    icon: TreeSelectIcon,
-    keywords: trans("uiComp.treeSelectCompKeywords"),
-    comp: TreeSelectComp,
+  carousel: {
+    name: trans("uiComp.carouselCompName"),
+    enName: "Carousel",
+    description: trans("uiComp.carouselCompDesc"),
+    categories: ["multimedia"],
+    icon: CarouselCompIcon,
+    keywords: trans("uiComp.drawerCompKeywords"),
+    comp: CarouselComp,
+    withoutLoading: true,
     layoutInfo: {
-      w: 9,
-      h: 5,
+      w: 12,
+      h: 25,
     },
   },
   audio: {
     name: trans("uiComp.audioCompName"),
     enName: "Audio",
     description: trans("uiComp.audioCompDesc"),
-    categories: ["dataDisplay"],
+    categories: ["multimedia"],
     icon: AudioCompIcon,
     keywords: trans("uiComp.audioCompKeywords"),
     comp: AudioComp,
@@ -770,7 +877,7 @@ const uiCompMap: Registry = {
     name: trans("uiComp.videoCompName"),
     enName: "Video",
     description: trans("uiComp.videoCompDesc"),
-    categories: ["dataDisplay"],
+    categories: ["multimedia"],
     icon: VideoCompIcon,
     keywords: trans("uiComp.videoCompKeywords"),
     comp: VideoComp,
@@ -779,68 +886,17 @@ const uiCompMap: Registry = {
       h: 40,
     },
   },
-  drawer: {
-    name: trans("uiComp.drawerCompName"),
-    enName: "Drawer",
-    description: trans("uiComp.drawerCompDesc"),
-    categories: ["container"],
-    icon: DrawerCompIcon,
-    keywords: trans("uiComp.drawerCompKeywords"),
-    comp: DrawerComp,
-    withoutLoading: true,
-  },
-  meeting: {
-    name: trans("meeting.meetingCompName"),
-    enName: "Drawer",
-    description: trans("meeting.meetingCompDesc"),
-    categories: ["meeting"],
-    icon: DrawerCompIcon,
-    keywords: trans("meeting.meetingCompKeywords"),
-    comp: VideoMeetingControllerComp,
-    withoutLoading: true,
-  },
-  carousel: {
-    name: trans("uiComp.carouselCompName"),
-    enName: "Carousel",
-    description: trans("uiComp.carouselCompDesc"),
-    categories: ["dataDisplay"],
-    icon: CarouselCompIcon,
-    keywords: trans("uiComp.drawerCompKeywords"),
-    comp: CarouselComp,
-    withoutLoading: true,
-    layoutInfo: {
-      w: 11,
-      h: 25,
-    },
-  },
-  collapsibleContainer: {
-    name: trans("uiComp.collapsibleContainerCompName"),
-    enName: "Collapsible Container",
-    description: trans("uiComp.collapsibleContainerCompDesc"),
-    categories: ["container"],
-    icon: CollapsibleContainerCompIcon,
-    keywords: trans("uiComp.collapsibleContainerCompKeywords"),
-    comp: ContainerComp,
-    withoutLoading: true,
-    layoutInfo: {
-      w: 9,
-      h: 25,
-      // static: true,
-      delayCollision: true,
-    },
-    defaultDataFn: defaultCollapsibleContainerData,
-  },
-  chart: {
-    name: trans("uiComp.chartCompName"),
-    enName: "Chart",
-    description: trans("uiComp.chartCompDesc"),
-    categories: ["dataDisplay", "common"],
-    icon: ChartCompIcon,
-    comp: remoteComp({ ...builtInRemoteComps, compName: "chart" }),
-    keywords: trans("uiComp.chartCompKeywords"),
+  jsonLottie: {
+    name: trans("uiComp.jsonLottieCompName"),
+    enName: "Lottie Animation",
+    description: trans("uiComp.jsonLottieCompDesc"),
+    categories: ["multimedia"],
+    icon: LottieIcon,
+    keywords: trans("uiComp.jsonLottieCompKeywords"),
+    comp: JsonLottieComp,
     layoutInfo: {
-      w: 11,
-      h: 35,
+      w: 10,
+      h: 47,
     },
   },
   imageEditor: {
@@ -848,7 +904,7 @@ const uiCompMap: Registry = {
     enName: "Image Editor",
     comp: remoteComp({ ...builtInRemoteComps, compName: "imageEditor" }),
     description: trans("uiComp.imageEditorCompDesc"),
-    categories: ["dataDisplay"],
+    categories: ["multimedia"],
     icon: imageEditorIcon,
     keywords: trans("uiComp.imageEditorCompKeywords"),
     layoutInfo: {
@@ -856,46 +912,36 @@ const uiCompMap: Registry = {
       h: 60,
     },
   },
-  mermaid: {
-    name: trans("uiComp.mermaidCompName"),
-    enName: "Mermaid Charts",
-    comp: remoteComp({ ...builtInRemoteComps, compName: "mermaid" }),
-    description: trans("uiComp.mermaidCompDesc"),
-    categories: ["dataDisplay"],
-    icon: MermaidIcon,
-    keywords: trans("uiComp.mermaidCompKeywords"),
+
+  // item Handling
+
+  qrCode: {
+    name: trans("uiComp.qrCodeCompName"),
+    enName: "QR Code",
+    description: trans("uiComp.qrCodeCompDesc"),
+    categories: ["itemHandling", "documents"],
+    icon: QRCodeCompIcon,
+    keywords: trans("uiComp.qrCodeCompKeywords"),
+    comp: QRCodeComp,
     layoutInfo: {
-      w: 15,
-      h: 60,
+      w: 4,
+      h: 19,
     },
   },
   scanner: {
     name: trans("uiComp.scannerCompName"),
     enName: "Scanner",
     description: trans("uiComp.scannerCompDesc"),
-    categories: ["dataInputSelect"],
+    categories: ["itemHandling"],
     icon: ScannerIcon,
     keywords: trans("uiComp.scannerCompKeywords"),
     comp: ScannerComp,
   },
-  calendar: {
-    name: trans("uiComp.calendarCompName"),
-    enName: "Calendar",
-    description: trans("uiComp.calendarCompDesc"),
-    categories: ["dataInputDate"],
-    icon: CalendarCompIcon,
-    keywords: trans("uiComp.calendarCompKeywords"),
-    comp: remoteComp({ ...builtInRemoteComps, compName: "calendar" }),
-    layoutInfo: {
-      w: 24,
-      h: 60,
-    },
-  },
   signature: {
     name: trans("uiComp.signatureCompName"),
     enName: "Signature",
     description: trans("uiComp.signatureCompDesc"),
-    categories: ["dataInputSelect"],
+    categories: ["itemHandling"],
     icon: SignatureIcon,
     keywords: trans("uiComp.signatureCompKeywords"),
     comp: SignatureComp,
@@ -904,86 +950,109 @@ const uiCompMap: Registry = {
       h: 35,
     },
   },
-  //Added by Aqib Mirza
-  jsonLottie: {
-    name: trans("uiComp.jsonLottieCompName"),
-    enName: "Lottie Animation",
-    description: trans("uiComp.jsonLottieCompDesc"),
-    categories: ["dataDisplay"],
-    icon: LottieIcon,
-    keywords: trans("uiComp.jsonLottieCompKeywords"),
-    comp: JsonLottieComp,
+  select: {
+    name: trans("uiComp.selectCompName"),
+    enName: "Select",
+    description: trans("uiComp.selectCompDesc"),
+    categories: ["forms", "itemHandling"],
+    icon: SelectCompIcon,
+    keywords: trans("uiComp.selectCompKeywords"),
+    comp: SelectComp,
+  },
+  multiSelect: {
+    name: trans("uiComp.multiSelectCompName"),
+    enName: "Multiselect",
+    description: trans("uiComp.multiSelectCompDesc"),
+    categories: ["forms", "itemHandling"],
+    icon: MultiSelectCompIcon,
+    keywords: trans("uiComp.multiSelectCompKeywords"),
+    comp: MultiSelectComp,
     layoutInfo: {
-      w: 10,
-      h: 47,
+      w: 6,
+      h: 5,
     },
   },
-  timeline: {
-    name: trans("uiComp.timelineCompName"),
-    enName: "timeline",
-    description: trans("uiComp.timelineCompDesc"),
-    categories: ["dataDisplay"],
-    icon: TimeLineIcon,
-    keywords: trans("uiComp.timelineCompKeywords"),
-    comp: TimeLineComp,
+  tree: {
+    name: trans("uiComp.treeCompName"),
+    enName: "Tree",
+    description: trans("uiComp.treeCompDesc"),
+    categories: ["layout", "itemHandling"],
+    icon: TreeIcon,
+    keywords: trans("uiComp.treeCompKeywords"),
+    comp: TreeComp,
     layoutInfo: {
-      w: 13,
-      h: 55,
+      w: 11,
+      h: 35,
+    },
+  },
+  treeSelect: {
+    name: trans("uiComp.treeSelectCompName"),
+    enName: "Tree Select",
+    description: trans("uiComp.treeSelectCompDesc"),
+    categories: ["layout", "itemHandling"],
+    icon: TreeSelectIcon,
+    keywords: trans("uiComp.treeSelectCompKeywords"),
+    comp: TreeSelectComp,
+    layoutInfo: {
+      w: 9,
+      h: 5,
     },
   },
 
-  comment: {
-    name: trans("uiComp.commentCompName"),
-    enName: "comment",
-    description: trans("uiComp.commentCompDesc"),
-    categories: ["dataDisplay"],
-    icon: CommentIcon,
-    keywords: trans("uiComp.commentCompKeywords"),
-    comp: CommentComp,
+  // Integration
+
+  iframe: {
+    name: trans("uiComp.iframeCompName"),
+    enName: "IFrame",
+    description: trans("uiComp.iframeCompDesc"),
+    icon: IFrameCompIcon,
+    categories: ["integration"],
+    keywords: trans("uiComp.iframeCompKeywords"),
+    comp: IFrameComp,
     layoutInfo: {
       w: 13,
-      h: 55,
+      h: 52,
     },
   },
-  mention: {
-    name: trans("uiComp.mentionCompName"),
-    enName: "mention",
-    description: trans("uiComp.mentionCompDesc"),
-    categories: ["dataInputText"],
-    icon: MentionIcon,
-    keywords: trans("uiComp.mentionCompKeywords"),
-    comp: MentionComp,
-  },
-  autocomplete: {
-    name: trans("uiComp.autoCompleteCompName"),
-    enName: "autoComplete",
-    description: trans("uiComp.autoCompleteCompDesc"),
-    categories: ["dataInputText"],
-    icon: AutoCompleteCompIcon,
-    keywords: cnchar
-      .spell(trans("uiComp.autoCompleteCompName"), "first", "low")
-      .toString(),
-    comp: AutoCompleteComp,
+  custom: {
+    name: trans("uiComp.customCompName"),
+    enName: "Custom Component",
+    description: trans("uiComp.customCompDesc"),
+    icon: CustomCompIcon,
+    categories: ["integration"],
+    keywords: trans("uiComp.customCompKeywords"),
+    comp: CustomComp,
     layoutInfo: {
-      w: 7,
-      h: 5,
+      w: 9,
+      h: 26,
     },
   },
-  responsiveLayout: {
-    name: trans("uiComp.responsiveLayoutCompName"),
-    enName: "Responsive Layout",
-    description: trans("uiComp.responsiveLayoutCompDesc"),
-    categories: ["container", "common"],
-    icon: ResponsiveLayoutCompIcon,
-    keywords: trans("uiComp.responsiveLayoutCompKeywords"),
-    comp: ResponsiveLayoutComp,
-    withoutLoading: true,
+  module: {
+    name: trans("uiComp.moduleCompName"),
+    enName: "Module",
+    icon: CustomCompIcon,
+    description: trans("uiComp.moduleCompDesc"),
+    categories: [],
+    keywords: trans("uiComp.moduleCompKeywords"),
+    comp: ModuleComp,
     layoutInfo: {
-      w: 15,
-      h: 27,
-      delayCollision: true,
+      w: 9,
+      h: 26,
     },
   },
+
+  // mixed
+
+  text: {
+    name: trans("uiComp.textCompName"),
+    enName: "Text",
+    description: trans("uiComp.textCompDesc"),
+    categories: ["dashboards", "layout", "multimedia"],
+    icon: TextCompIcon,
+    keywords: trans("uiComp.textCompKeywords"),
+    comp: TextComp,
+  },
+  
 };
 
 export function loadComps() {
diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
index 54d0f5d2c..f015a46db 100644
--- a/client/packages/lowcoder/src/comps/uiCompRegistry.ts
+++ b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
@@ -23,16 +23,16 @@ export interface UICompLayoutInfo {
 }
 
 export const uiCompCategoryNames = {
-  common: trans("uiCompCategory.common"),
-  meeting: trans("meeting.meeting"),
-  dataInputText: trans("uiCompCategory.dataInputText"),
-  dataInputNumber: trans("uiCompCategory.dataInputNumber"),
-  dataInputSelect: trans("uiCompCategory.dataInputSelect"),
-  dataInputDate: trans("uiCompCategory.dataInputDate"),
-  button: trans("uiCompCategory.button"),
-  dataDisplay: trans("uiCompCategory.dataDisplay"),
-  container: trans("uiCompCategory.container"),
-  other: trans("uiCompCategory.other"),
+  dashboards: trans("uiCompCategory.dashboards"),
+  layout: trans("uiCompCategory.layout"),
+  forms: trans("uiCompCategory.forms"),
+  collaboration: trans("uiCompCategory.collaboration"),
+  projectmanagement: trans("uiCompCategory.projectmanagement"),
+  scheduling: trans("uiCompCategory.scheduling"),
+  documents: trans("uiCompCategory.documents"),
+  itemHandling: trans("uiCompCategory.itemHandling"),
+  multimedia: trans("uiCompCategory.multimedia"),
+  integration: trans("uiCompCategory.integration"),
 };
 
 export type UICompCategory = keyof typeof uiCompCategoryNames;
@@ -119,10 +119,10 @@ export type UICompType =
   | "calendar"
   | "signature"
   | "jsonLottie" //Added By Aqib Mirza
-  | "timeline"
-  | "comment"
-  | "mention"
-  | "autocomplete"
+  | "timeline" //Added By Mousheng
+  | "comment" //Added By Mousheng
+  | "mention" //Added By Mousheng
+  | "autocomplete" //Added By Mousheng
   | "responsiveLayout";
 
 export const uiCompRegistry = {} as Record<UICompType | string, UICompManifest>;
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index b7d9fda9f..a06f7cdf0 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -703,43 +703,46 @@ export const en = {
     contentTooltip: "Support for input text or HTML",
   },
   uiCompCategory: {
-    common: "Commonly used",
-    dataInputText: "Text inputs",
-    dataInputNumber: "Number inputs",
-    dataInputSelect: "Select inputs",
-    dataInputDate: "Date and time inputs",
-    button: "Buttons",
-    dataDisplay: "Data",
-    container: "Containers and forms",
-    other: "Other",
+    dashboards: "Dashboards & Reporting",
+    layout: "Layout & Navigation",
+    forms: "Data Collection and Forms",
+    collaboration: "Meeting & Collaboration",
+    projectmanagement: "Project Management",
+    scheduling: "Calendar and Scheduling",
+    documents: "Document and File Management",
+    itemHandling: "Item & Signature handling",
+    multimedia: "Multimedia & Animation",
+    integration: "Integration & Extension",
   },
   uiComp: {
+    autoCompleteCompName: "Auto Complete",
+    autoCompleteCompDesc: "Auto Complete input field",
     inputCompName: "Input",
-    inputCompDesc: "Input component",
-    inputCompKeywords: "text",
+    inputCompDesc: "Text Input field",
+    inputCompKeywords: "text, textinput, input",
     textAreaCompName: "Text Area",
-    textAreaCompDesc: "Text Area component",
+    textAreaCompDesc: "Text Area",
     textAreaCompKeywords: "",
     passwordCompName: "Password",
-    passwordCompDesc: "Password component",
+    passwordCompDesc: "Password field",
     passwordCompKeywords: "",
     richTextEditorCompName: "Rich Text Editor",
-    richTextEditorCompDesc: "Rich Text Editor component",
-    richTextEditorCompKeywords: "",
+    richTextEditorCompDesc: "Embeded Rich Text Editor",
+    richTextEditorCompKeywords: "Text editing, rich text, editor",
     numberInputCompName: "Number Input",
-    numberInputCompDesc: "Number Input component",
+    numberInputCompDesc: "Number Input field",
     numberInputCompKeywords: "",
     sliderCompName: "Slider",
     sliderCompDesc: "Slider component",
     sliderCompKeywords: "",
     rangeSliderCompName: "Range Slider",
-    rangeSliderCompDesc: "Range Slider component",
+    rangeSliderCompDesc: "Range Slider input",
     rangeSliderCompKeywords: "",
     ratingCompName: "Rating",
-    ratingCompDesc: "Rating component",
+    ratingCompDesc: "Rating display and input",
     ratingCompKeywords: "",
     switchCompName: "Switch",
-    switchCompDesc: "Switch component",
+    switchCompDesc: "Switch display and input",
     switchCompKeywords: "",
     selectCompName: "Select",
     selectCompDesc: "Select component",
@@ -774,7 +777,7 @@ export const en = {
     timeRangeCompName: "Time Range",
     timeRangeCompDesc: "Time Range component",
     timeRangeCompKeywords: "",
-    buttonCompName: "Button",
+    buttonCompName: "Form Button",
     buttonCompDesc: "Button component",
     buttonCompKeywords: "",
     linkCompName: "Link",
@@ -903,8 +906,6 @@ export const en = {
     mentionCompName: "mention",
     mentionCompDesc: "mention",
     mentionCompKeywords: "",
-    autoCompleteCompName: "autoComplete",
-    autoCompleteCompDesc: "autoComplete",
     autoCompleteCompKeywords: "",
     responsiveLayoutCompName: "Responsive Layout",
     responsiveLayoutCompDesc: "Responsive Layout",
@@ -1130,7 +1131,7 @@ export const en = {
     suffixIcon: "Suffix icon",
     icon: "Icon",
     iconSize: "Icon size",
-    button: "Button",
+    button: "Form Button",
     formToSubmit: "Form to submit",
     default: "Default",
     submit: "Submit",
@@ -1617,7 +1618,7 @@ export const en = {
   },
   formComp: {
     containerPlaceholder: "Drag components from the right pane or",
-    openDialogButton: "generate form from data",
+    openDialogButton: "Generate a Form from your data source",
     resetAfterSubmit: "Reset after successful submit",
     initialData: "Initial data",
     disableSubmit: "Disable submit",
@@ -1815,7 +1816,7 @@ export const en = {
     sliderLabel: "Slider",
     radioLabel: "Radio",
     checkboxLabel: "Checkbox",
-    buttonLabel: "Button",
+    buttonLabel: "Form Button",
     switch: "Switch",
     previewDate: "16/10/2022",
     previewEmail1: "ted.com",
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/index.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/index.tsx
index acb399e67..b8c23ef7f 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/index.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/index.tsx
@@ -18,7 +18,7 @@ type CompInfo = UICompManifest & { key: string };
 const groups: Partial<Record<UICompCategory, CompInfo[]>> = {};
 
 Object.entries(uiCompRegistry).forEach(([key, comp]) => {
-  const cat = comp.categories.find((c) => c !== "common");
+  const cat = comp.categories.find((c) => c !== "dashboards");
   if (cat === undefined) {
     return;
   }
diff --git a/client/packages/lowcoder/src/pages/ComponentPlayground/index.tsx b/client/packages/lowcoder/src/pages/ComponentPlayground/index.tsx
index fe0ca19a3..348fa63c0 100644
--- a/client/packages/lowcoder/src/pages/ComponentPlayground/index.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentPlayground/index.tsx
@@ -11,7 +11,7 @@ type CompInfo = UICompManifest & { key: string };
 const groups: Partial<Record<UICompCategory, CompInfo[]>> = {};
 
 Object.entries(uiCompRegistry).forEach(([key, comp]) => {
-  const cat = comp.categories.find((c) => c !== "common");
+  const cat = comp.categories.find((c) => c !== "dashboards");
   if (cat === undefined) {
     return;
   }
diff --git a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
index a63b04af0..6bb6dd8da 100644
--- a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
@@ -93,7 +93,7 @@ const stateCompName = 'UICompSections';
 const initialState: PropertySectionState = { [stateCompName]: {}};
 Object.keys(uiCompCategoryNames).forEach((cat) => {
   const key = uiCompCategoryNames[cat as UICompCategory];
-  initialState[stateCompName][key] = key === uiCompCategoryNames.common
+  initialState[stateCompName][key] = key === uiCompCategoryNames.dashboards
 })
 
 export const UICompPanel = () => {
@@ -145,7 +145,7 @@ export const UICompPanel = () => {
   const compList = useMemo(
     () =>
       Object.entries(categories)
-        .filter(([key]) => !(!isEmpty(searchValue) && (key as UICompCategory) === "common"))
+        .filter(([key]) => !(!isEmpty(searchValue) && (key as UICompCategory) === "dashboards"))
         .map(([key, value], index) => {
           let infos = value;
           if (!isEmpty(searchValue)) {