diff --git a/packages/common/business_components/src/ui/form_ui/index.tsx b/packages/common/business_components/src/ui/form_ui/index.tsx
new file mode 100644
index 000000000..bd9930c3c
--- /dev/null
+++ b/packages/common/business_components/src/ui/form_ui/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { FormControl, FormItem, FormLabel, FormMessage } from "../form";
+
+const FormUi = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {label:string|undefined}
+>(({children, label},ref)=>{
+    return (
+        <FormItem ref={ref}>
+            {label?<FormLabel className="text-xl">{label}</FormLabel>:<></>}
+            <FormControl>
+            {children}
+            </FormControl>
+            <FormMessage />
+        </FormItem>
+    )
+})
+FormUi.displayName = 'FormUi';
+export { FormUi };
diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts
index fba8a76ad..2791b2035 100644
--- a/packages/common/business_components/src/ui/index.ts
+++ b/packages/common/business_components/src/ui/index.ts
@@ -1,9 +1,11 @@
 export * from "./chart";
 export * from "./file-upload";
 export * from "./form";
+export * from "./form_ui";
+export * from "./scroll";
 export * from "./search_form";
 export * from "./search_input";
 export * from "./search_input_select";
 export * from "./select";
 export * from "./table";
-export * from "./scroll"
+