diff --git a/app/app.css b/app/app.css
index f353a4a..f260295 100644
--- a/app/app.css
+++ b/app/app.css
@@ -1,8 +1,13 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import 'tailwindcss';
+
 @plugin "@tailwindcss/typography";
 
+@import 'datatables.net-dt';
+/* @import 'datatables.net-responsive-dt';
+@import 'datatables.net-select-dt'; */
+
 @theme {
   --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
diff --git a/app/pages/dashboard-contents/data.ts b/app/pages/dashboard-contents/data.ts
new file mode 100644
index 0000000..5ea50a8
--- /dev/null
+++ b/app/pages/dashboard-contents/data.ts
@@ -0,0 +1,102 @@
+type TContens = {
+  id: number
+  createdAt: string
+  author: string
+  title: string
+  tags: string
+  category: string
+  status: string
+}
+
+export const CONTENTS: TContens[] = [
+  {
+    id: 1,
+    createdAt: '24/10/2024',
+    author: 'John Doe',
+    title: 'Introduction to TypeScript',
+    tags: 'typescript, programming',
+    category: 'Education',
+    status: 'Published',
+  },
+  {
+    id: 2,
+    createdAt: '24/10/2024',
+    author: 'Jane Smith',
+    title: 'Advanced React Patterns',
+    tags: 'react, javascript',
+    category: 'Development',
+    status: 'Draft',
+  },
+  {
+    id: 3,
+    createdAt: '24/10/2024',
+    author: 'Alice Johnson',
+    title: 'Understanding Redux',
+    tags: 'redux, state management',
+    category: 'Development',
+    status: 'Published',
+  },
+  {
+    id: 4,
+    createdAt: '24/10/2024',
+    author: 'Bob Brown',
+    title: 'CSS Grid Layout',
+    tags: 'css, design',
+    category: 'Design',
+    status: 'Published',
+  },
+  {
+    id: 5,
+    createdAt: '24/10/2024',
+    author: 'Charlie Davis',
+    title: 'Node.js Best Practices',
+    tags: 'nodejs, backend',
+    category: 'Development',
+    status: 'Published',
+  },
+  {
+    id: 6,
+    createdAt: '24/10/2024',
+    author: 'Diana Evans',
+    title: 'GraphQL for Beginners',
+    tags: 'graphql, api',
+    category: 'Development',
+    status: 'Draft',
+  },
+  {
+    id: 7,
+    createdAt: '24/10/2024',
+    author: 'Evan Harris',
+    title: 'Building RESTful APIs',
+    tags: 'rest, api',
+    category: 'Development',
+    status: 'Published',
+  },
+  {
+    id: 8,
+    createdAt: '24/10/2024',
+    author: 'Fiona Green',
+    title: 'Introduction to Docker',
+    tags: 'docker, devops',
+    category: 'DevOps',
+    status: 'Published',
+  },
+  {
+    id: 9,
+    createdAt: '24/10/2024',
+    author: 'George King',
+    title: 'Microservices Architecture',
+    tags: 'microservices, architecture',
+    category: 'Development',
+    status: 'Draft',
+  },
+  {
+    id: 10,
+    createdAt: '24/10/2024',
+    author: 'Hannah Lee',
+    title: 'Kubernetes Essentials',
+    tags: 'kubernetes, devops',
+    category: 'DevOps',
+    status: 'Published',
+  },
+]
diff --git a/app/pages/dashboard-contents/index.tsx b/app/pages/dashboard-contents/index.tsx
new file mode 100644
index 0000000..066ce98
--- /dev/null
+++ b/app/pages/dashboard-contents/index.tsx
@@ -0,0 +1,36 @@
+import DT from 'datatables.net-dt'
+import DataTable from 'datatables.net-react'
+
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+
+import { CONTENTS } from './data'
+
+export const ContentsPage = () => {
+  DataTable.use(DT)
+  const columns = [
+    { title: 'No', data: 'id' },
+    { title: 'Tanggal Kontent', data: 'createdAt' },
+    { title: 'Nama Penulis', data: 'author' },
+    { title: 'Judul', data: 'title' },
+    { title: 'Kategori', data: 'category' },
+    { title: 'Tags', data: 'tags' },
+    { title: 'Action', data: 'id', render: () => 'Edit' },
+  ]
+
+  return (
+    <div className="relative">
+      <TitleDashboard title="Konten" />
+      <DataTable
+        className="cell-border"
+        data={CONTENTS}
+        columns={columns}
+        options={{
+          paging: true,
+          searching: true,
+          ordering: true,
+          info: true,
+        }}
+      ></DataTable>
+    </div>
+  )
+}
diff --git a/app/routes/_layout.admin.dashboard.contents.tsx b/app/routes/_layout.admin.dashboard.contents.tsx
index 477b9a4..081af43 100644
--- a/app/routes/_layout.admin.dashboard.contents.tsx
+++ b/app/routes/_layout.admin.dashboard.contents.tsx
@@ -1,4 +1,6 @@
+import { ContentsPage } from '~/pages/dashboard-contents'
+
 const DashboardContentsLayout = () => {
-  return <div>Contents Page</div>
+  return <ContentsPage />
 }
 export default DashboardContentsLayout