diff --git a/fe-admin/src/components/DataTable.tsx b/fe-admin/src/components/DataTable.tsx
index 4b49f37..ddc682f 100644
--- a/fe-admin/src/components/DataTable.tsx
+++ b/fe-admin/src/components/DataTable.tsx
@@ -66,16 +66,19 @@ export function DataTable<T>({
           </tr>
         </thead>
         <tbody>
-          {isLoading && (
-            <tr>
-              <td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
-                Đang tải…
-              </td>
-            </tr>
-          )}
+          {isLoading &&
+            Array.from({ length: 5 }).map((_, i) => (
+              <tr key={`sk-${i}`} className="border-t border-slate-100">
+                {columns.map(c => (
+                  <td key={c.key} className="px-3 py-3">
+                    <div className="h-3 animate-pulse rounded bg-slate-100" />
+                  </td>
+                ))}
+              </tr>
+            ))}
           {!isLoading && rows.length === 0 && (
             <tr>
-              <td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
+              <td colSpan={columns.length} className="px-3 py-10 text-center text-sm text-slate-400">
                 {empty ?? 'Không có dữ liệu'}
               </td>
             </tr>
diff --git a/fe-user/src/components/DataTable.tsx b/fe-user/src/components/DataTable.tsx
index 4b49f37..ddc682f 100644
--- a/fe-user/src/components/DataTable.tsx
+++ b/fe-user/src/components/DataTable.tsx
@@ -66,16 +66,19 @@ export function DataTable<T>({
           </tr>
         </thead>
         <tbody>
-          {isLoading && (
-            <tr>
-              <td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
-                Đang tải…
-              </td>
-            </tr>
-          )}
+          {isLoading &&
+            Array.from({ length: 5 }).map((_, i) => (
+              <tr key={`sk-${i}`} className="border-t border-slate-100">
+                {columns.map(c => (
+                  <td key={c.key} className="px-3 py-3">
+                    <div className="h-3 animate-pulse rounded bg-slate-100" />
+                  </td>
+                ))}
+              </tr>
+            ))}
           {!isLoading && rows.length === 0 && (
             <tr>
-              <td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
+              <td colSpan={columns.length} className="px-3 py-10 text-center text-sm text-slate-400">
                 {empty ?? 'Không có dữ liệu'}
               </td>
             </tr>