diff --git a/packages/common/business_components/src/ui/dialog_ui/index.tsx b/packages/common/business_components/src/ui/dialog_ui/index.tsx
index ef611fa40..0f14c211e 100644
--- a/packages/common/business_components/src/ui/dialog_ui/index.tsx
+++ b/packages/common/business_components/src/ui/dialog_ui/index.tsx
@@ -6,22 +6,40 @@ type ModalType = {
   body: React.ReactNode;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  noHeaderYn?: 'N' | 'Y';
+  noFooterYn?: 'N' | 'Y';
+  headerTitle?: string;
+  footerContent?: React.ReactNode;
 }
 
-export function UiModal({ bodyClass,  body, open, onOpenChange }: ModalType) {
+export function UiModal({ 
+  bodyClass,  
+  body, 
+  open, 
+  onOpenChange,
+  noHeaderYn = 'N',
+  noFooterYn = 'N',
+  headerTitle,
+  footerContent
+}: ModalType) {
  
   return (
     <>
         <Dialog open={open} onOpenChange={onOpenChange}>
           <DialogContent className={bodyClass}>
-            <DialogHeader>
-              <DialogDescription>
-              </DialogDescription>
-          
-            </DialogHeader>
-           {(open && body)} 
-            <DialogFooter className="sm:justify-start">
-            </DialogFooter>
+            {noHeaderYn === 'N' && (
+              <DialogHeader>
+                <DialogDescription>
+                  {headerTitle}
+                </DialogDescription>
+              </DialogHeader>
+            )}
+            {(open && body)} 
+            {noFooterYn === 'N' && (
+              <DialogFooter className="sm:justify-start">
+                {footerContent}
+              </DialogFooter>
+            )}
           </DialogContent>
         </Dialog>
     </>
diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index 368abc5cc..c8ba18765 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -12,29 +12,36 @@ type UiTableProps = {
   cellClick : ((index:number|undefined, headId:string)=>void   )| undefined;
   onPageChange: (page: number) => void;
   className?: string;
+  resetPageNo?: boolean;
 }
 
 type UiHeadProps = {
   id: string;
   title: string;
+  align?: string;
 }
 
-export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '' }: UiTableProps) {
+export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '', resetPageNo = false }: UiTableProps) {
   const [cur, setCur] = useState<number>(1);
   const [idx, setIdx] = useState<number>(-1);
+
+  useEffect(() => {
+    if (resetPageNo) {
+      setCur(1);
+      onPageChange(1);
+    }
+  }, [onPageChange, resetPageNo]);
+
   const handlePageChange = (page: number) => {
     setCur(page);
     onPageChange(page);
   }
 
-
   const handleCellClick = (index: number,headId:string )=> {
     if (cellClick) {
       cellClick(index,headId);
       setIdx(index);
     }
-
-
   };
 
   return (
@@ -43,8 +50,8 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
         <h3 className="text-2xl font-medium text-label">{headName}</h3>
         </div> : <></>}
       <div className={`card !m-[1.2rem] !p-0r ${className}`}>
-        <Table>
-          <TableHeader>
+        <Table variant="secondary">
+          <TableHeader >
           {children ? <>{children}</> : <TableRow>
             {headlist?.map((head) => (
               <TableHead key={head.id}>{head.title}</TableHead>
@@ -52,11 +59,19 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
           </TableRow>}
         </TableHeader>
         <TableBody className='text-center'>
-          {tableData?.map((el: { [key: string]: any}, index) => (
-            <TableRow key={index + "row"}    >
+          {tableData?.map((el: { [key: string]: string | number | boolean | object}, index) => (
+            <TableRow key={index + "row"}>
               {headlist?.map((head) => (
-                // <TableCell className={cellClick&&idx==index?"bg-black/10 cursor-pointer":cellClick?"cursor-pointer":""} onClick={()=>handleCellClick(index)} key={head.id + index}>{el[head.id]}</TableCell>
-                <TableCell className={cellClick&&idx==index?"opacity-40 cursor-pointer":cellClick?"cursor-pointer":""} onClick={(e)=>handleCellClick(index,head.id)}   key={head.id + index}>{el[head.id]}</TableCell>
+                <TableCell 
+                  className={`${head.align === 'right' ? 'text-right' : 'text-center'} ${
+                    cellClick && idx === index ? '!font-[1000] cursor-pointer' : 
+                    cellClick ? 'cursor-pointer' : ''
+                  }`}
+                  onClick={() => handleCellClick(index, head.id)}
+                  key={head.id + index}
+                >
+                  {String(el[head.id] ?? '')}
+                </TableCell>
               ))}
             </TableRow>
           ))}
diff --git a/packages/common/components/src/ui/table/index.tsx b/packages/common/components/src/ui/table/index.tsx
index 797f48dfd..082b2e33b 100644
--- a/packages/common/components/src/ui/table/index.tsx
+++ b/packages/common/components/src/ui/table/index.tsx
@@ -29,7 +29,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn("sticky top-0 bg-secondary [&_tr]:border-b", className)} {...props} />
 ));
 TableHeader.displayName = "TableHeader";