diff --git a/packages/common/business_components/src/ui/alert_dialog_ui/index.tsx b/packages/common/business_components/src/ui/alert_dialog_ui/index.tsx
new file mode 100644
index 000000000..58b69cff6
--- /dev/null
+++ b/packages/common/business_components/src/ui/alert_dialog_ui/index.tsx
@@ -0,0 +1,33 @@
+import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@common/components";
+
+
+type ModalType={ 
+  bodyClass:string
+  butNm:string
+  title:string
+  body:React.ReactNode
+}
+export function UiModal({bodyClass,butNm,title ,body}:ModalType )  {
+  return (
+    <>
+      <Dialog >
+        <DialogTrigger asChild>
+          <Button className="mr-4 rounded-lg">{butNm}</Button>
+        </DialogTrigger>
+        <DialogContent className={bodyClass}>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>
+            </DialogDescription>
+          </DialogHeader>
+                        {body}
+
+                        
+          <DialogFooter className="sm:justify-start">
+           
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts
index 430d5edd9..e224086a0 100644
--- a/packages/common/business_components/src/ui/index.ts
+++ b/packages/common/business_components/src/ui/index.ts
@@ -14,4 +14,6 @@ export * from "./title";
 export * from "./search_form_left";
 export * from "./search_form_right";
 export * from "./table_div";
-export * from "./tab";
\ No newline at end of file
+export * from "./list_div";
+export * from "./tab";
+export * from "./alert_dialog_ui"
\ No newline at end of file
diff --git a/packages/common/business_components/src/ui/list_div/index.tsx b/packages/common/business_components/src/ui/list_div/index.tsx
new file mode 100644
index 000000000..a096a4c04
--- /dev/null
+++ b/packages/common/business_components/src/ui/list_div/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+function ListDiv(props: {children: React.ReactNode}) {
+  return (
+    <div className="card card-border">
+      {props.children}
+    </div>
+  )
+}
+
+export default ListDiv
\ No newline at end of file
diff --git a/packages/common/business_components/src/ui/main_content_div/index.tsx b/packages/common/business_components/src/ui/main_content_div/index.tsx
index f1f85fa9c..d1e818196 100644
--- a/packages/common/business_components/src/ui/main_content_div/index.tsx
+++ b/packages/common/business_components/src/ui/main_content_div/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default function MainContentDiv(props: {children: React.ReactNode}) {
+export default function MainDiv(props: {children: React.ReactNode}) {
   return (
     <div className="min-h-screen bg-gray-50 p-8">
         {props.children}
@@ -8,4 +8,4 @@ export default function MainContentDiv(props: {children: React.ReactNode}) {
   )
 }
 
-export { MainContentDiv };
\ No newline at end of file
+export { MainDiv };
\ No newline at end of file
diff --git a/packages/common/business_components/src/ui/search_form/index.tsx b/packages/common/business_components/src/ui/search_form/index.tsx
index 1f7950358..3bcd94171 100644
--- a/packages/common/business_components/src/ui/search_form/index.tsx
+++ b/packages/common/business_components/src/ui/search_form/index.tsx
@@ -1,6 +1,6 @@
 function SearchDiv ({children}:{ children: React.ReactNode; }) {
    return (
-      <div className="flex bg-white rounded-lg shadow-sm mb-6 p-6">
+      <div className="flex card card-border !mt-6">
         {children}   
       </div>
     )
diff --git a/packages/common/business_components/src/ui/search_input/index.tsx b/packages/common/business_components/src/ui/search_input/index.tsx
index 9b38b475a..0da6cffdc 100644
--- a/packages/common/business_components/src/ui/search_input/index.tsx
+++ b/packages/common/business_components/src/ui/search_input/index.tsx
@@ -9,7 +9,7 @@ const SearchInput = React.forwardRef<HTMLInputElement, {className:string, label:
     return (
         <div className={className+" flex items-center"} >
             {label && <Label className="w-20 text-base text-gray-600">{label}</Label>}
-            <Input className="flex-1 h-10 p-2 border rounded" value={textValue} onChange={changeText}></Input>
+            <Input className="flex-1 ml-8 w-3/4 h-10 border rounded" value={textValue} onChange={changeText}></Input>
         </div>
     )
 });
diff --git a/packages/common/business_components/src/ui/select/index.tsx b/packages/common/business_components/src/ui/select/index.tsx
index dc1ea6986..1f1294666 100644
--- a/packages/common/business_components/src/ui/select/index.tsx
+++ b/packages/common/business_components/src/ui/select/index.tsx
@@ -4,22 +4,28 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 
 /** 차트 기본 스타일 */
 interface SelectBox1 {
-  text:string|number,
+  text:string,
   val:string
 }
 
-
 const SelectBox = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {label:string, selectClass:string|undefined, className:string, selectArray:SelectBox1[], onSelectValue:(val:string)=>void , defaultValue:string|number|undefined }
->(({ label, className, selectClass, selectArray, onSelectValue, defaultValue }, ref)=>{
-  const placeHolder = defaultValue ? selectArray.find(item => defaultValue === item.val)?.text : selectArray?.[0]?.text;
+  React.HTMLAttributes<HTMLDivElement> & {
+    label:string, 
+    selectClass:string|undefined, 
+    className:string, 
+    selectArray:SelectBox1[], 
+    onSelectValue:(val:string)=>void,
+    value?: string
+  }
+>(({ label, className, selectClass, selectArray, onSelectValue, value }, ref)=>{
+  const placeHolder = selectArray?.[0]?.text ?? "";
 
   return (
     <div className={className+" flex items-center"} ref={ref}>
-      {label && <Label className="m-4 text-2xl w-1/4">{label}</Label>}
-      <Select onValueChange={onSelectValue}>
-        <SelectTrigger className={selectClass?selectClass:"ml-8 w-3/4 text-2xl"}>
+      {label && <Label className="w-20 text-base text-gray-600">{label}</Label>}
+      <Select onValueChange={onSelectValue} value={value}>
+        <SelectTrigger className={selectClass?selectClass:"flex-1 p-2 border rounded"}>
           <SelectValue placeholder={placeHolder} />
         </SelectTrigger>
         <SelectContent>
diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index c397e155d..d22a5835d 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -21,10 +21,10 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
 
   return (
     <>
-      {headName ? <div className="font-bold m-3">
+      {headName ? <div className="card-header">
           {headName}
         </div> : <></>}
-      <Table className="w-full">
+      <Table>
         <TableHeader>
           {children ? <>{children}</> : <TableRow>
             {headlist?.map((head) => (
diff --git a/packages/common/business_components/src/ui/table_div/index.tsx b/packages/common/business_components/src/ui/table_div/index.tsx
index ccadd99b1..b0e580b9c 100644
--- a/packages/common/business_components/src/ui/table_div/index.tsx
+++ b/packages/common/business_components/src/ui/table_div/index.tsx
@@ -2,7 +2,7 @@
 
 function ContentsDiv(props: {children: React.ReactNode}) {
   return (
-    <div className="bg-white rounded-lg shadow-sm mb-6 p-6">
+    <div className="card card-border !mt-6">
         {props.children}
     </div>
   )