diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts
index 430d5edd9..d76c22861 100644
--- a/packages/common/business_components/src/ui/index.ts
+++ b/packages/common/business_components/src/ui/index.ts
@@ -14,4 +14,4 @@ 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";
\ 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/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>
   )