diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index fa7c9b7fe..dcf7f4aa4 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -30,6 +30,7 @@ type UiTableProps = {
   boldArray?: number[];
   resetSelection?: boolean;
   index?: number;
+  headButton?: React.ReactNode | undefined;
 };
 
 type UiHeadProps = {
@@ -53,6 +54,7 @@ export function UiTable({
   boldArray = [],
   resetSelection = false,
   index = -1,
+  headButton = undefined,
 }: UiTableProps) {
   const [cur, setCur] = useState<number>(1);
   const [idx, setIdx] = useState<number>(index);
@@ -100,9 +102,16 @@ export function UiTable({
   return (
     <>
       {headName ? (
-        <div className="card-header">
-          <h3 className="text-2xl font-medium text-label">{headName}</h3>
-        </div>
+        headButton ? (
+          <div className="card-header flex items-center justify-between">
+            <h3 className="text-2xl font-medium text-label">{headName}</h3>
+            <>{headButton}</>
+          </div>
+        ) : (
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">{headName}</h3>
+          </div>
+        )
       ) : (
         <></>
       )}