diff --git a/app/ui/view/molecule/list/list-root.tsx b/app/ui/view/molecule/list/list-root.tsx
index a12aacfb..2f171088 100644
--- a/app/ui/view/molecule/list/list-root.tsx
+++ b/app/ui/view/molecule/list/list-root.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@/app/utils/shadcn/utils';
 import { ReactNode } from 'react';
-import { twMerge } from 'tailwind-merge';
 
 export interface ListRow {
   id: number;
@@ -15,7 +15,7 @@ interface ListRootProps<T extends ListRow> {
 export function ListRoot<T extends ListRow>({ data, render, isScrollList = false, emptyDataRender }: ListRootProps<T>) {
   const hasNotData = emptyDataRender && data.length === 0;
   return (
-    <div className={twMerge('rounded-xl border-[1px] border-gray-300 w-full ', isScrollList && 'h-72 overflow-auto')}>
+    <div className={cn('rounded-xl border-[1px] border-gray-300 w-full ', isScrollList && 'h-72 overflow-auto')}>
       {data.map((item, index) => render(item, index))}
       {hasNotData ? emptyDataRender() : null}
     </div>