diff --git a/packages/common/business_components/src/ui/select/index.tsx b/packages/common/business_components/src/ui/select/index.tsx
index 72f304caa..370ee52e8 100644
--- a/packages/common/business_components/src/ui/select/index.tsx
+++ b/packages/common/business_components/src/ui/select/index.tsx
@@ -7,12 +7,8 @@ const styles = {
       marginLeft : '2rem',
       display : 'flex'
     } as React.CSSProperties,
-    selectStyle : {
-      marginLeft: '1rem',
-      width:'8rem'
-    } as React.CSSProperties,
     labelStyle : {
-      margin:'0.8rem 0.8rem 0.8rem 0.8rem',
+      margin:'0.8rem 0.8rem 0.8rem 1rem',
       fontSize: '10px',
     } as React.CSSProperties
 }
@@ -22,14 +18,14 @@ interface SelectBox1 {
   val:string
 }
 
-function SelectBox(props: {label : string, selectArray: SelectBox1[]}){
-  const placeHolder = props.selectArray.length > 0 ? props.selectArray[0].text : "";
+function SelectBox(props: {label : string, selectArray: SelectBox1[], styleClassName : string, styleSelect : React.CSSProperties}){
+  const placeHolder = props.selectArray?.[0]?.text ?? "";
 
   return (
-    <div style={styles.selectBoxDiv}>
+    <div className={props.styleClassName+" flex"} >
       {props.label && <Label style={styles.labelStyle}>{props.label}</Label>}
-      <Select style={styles.selectStyle}>
-        <SelectTrigger style={styles.selectStyle} className="w-[180px]">
+      <Select>
+        <SelectTrigger style={props.styleSelect} className="">
           <SelectValue placeholder={placeHolder} />
         </SelectTrigger>
         <SelectContent>