diff --git a/src/components/table/TableRowOptions.tsx b/src/components/table/TableRowOptions.tsx
index 4e2e2c93..6c92c928 100644
--- a/src/components/table/TableRowOptions.tsx
+++ b/src/components/table/TableRowOptions.tsx
@@ -1,6 +1,6 @@
 import { Icon } from '@iconify/react';
 import Button from '../Button';
-import { cn } from '@/lib/helper';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 interface TableRowOptionsProps {
   type?: 'dropdown' | 'collapse';
@@ -21,16 +21,7 @@ export const TableRowOptions = ({
   showEdit = true,
   showDelete = true,
 }: TableRowOptionsProps) => (
-  <div
-    tabIndex={type === 'dropdown' ? 0 : undefined}
-    className={cn(
-      {
-        'dropdown-content': type === 'dropdown',
-        'mt-2': type === 'collapse',
-      },
-      'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-    )}
-  >
+  <RowOptionsMenuWrapper type={type}>
     <Button
       href={`${basePath}/detail/?${queryParam}=${recordId}`}
       variant='ghost'
@@ -56,7 +47,7 @@ export const TableRowOptions = ({
         onClick={onDelete}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit justify-start text-sm'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='mdi:delete-outline'
@@ -67,5 +58,5 @@ export const TableRowOptions = ({
         Delete
       </Button>
     )}
-  </div>
+  </RowOptionsMenuWrapper>
 );