diff --git a/app/pages/dashboard-contents/index.tsx b/app/pages/dashboard-contents/index.tsx
index d45ac44..6815f60 100644
--- a/app/pages/dashboard-contents/index.tsx
+++ b/app/pages/dashboard-contents/index.tsx
@@ -2,7 +2,7 @@ import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
-import type { TAuthor, TCategories } from '~/apis/admin/get-news'
+import type { TCategories } from '~/apis/admin/get-news'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
@@ -20,7 +20,13 @@ export const ContentsPage = () => {
   const dataColumns = [
     { title: 'No', data: 'id' },
     { title: 'Tanggal Konten', data: 'live_at' },
-    { title: 'Nama Penulis', data: 'author' },
+    {
+      title: 'Nama Penulis',
+      //ignore the error below
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      render: (data: any, type: any, row: any) =>
+        `<span>${row.author.name}</span> <br> <span class="text-sm text-[#7C7C7C]">ID: ${row.id.slice(0, 12)}</span>`,
+    },
     { title: 'Judul', data: 'title' },
     { title: 'Kategori', data: 'categories' },
     {
@@ -41,7 +47,7 @@ export const ContentsPage = () => {
     1: (value: string) => {
       return formatDate(value)
     },
-    2: (value: TAuthor) => `${value.name}`,
+    // 2: (value: TAuthor) => `${value}`,
     4: (value: TCategories) => {
       const categories = value.map((item) => item.name).join(', ')
       return `${categories}`