diff --git a/app/apis/admin/create-category.ts b/app/apis/admin/create-category.ts
index 54fcd32..b18165b 100644
--- a/app/apis/admin/create-category.ts
+++ b/app/apis/admin/create-category.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { HttpServer } from '~/libs/http-server'
-import type { TCategorySchema } from '~/pages/category-create'
+import type { TCategorySchema } from '~/pages/dashboard-category-create'
 
 const categoryResponseSchema = z.object({
   data: z.object({
diff --git a/app/pages/dashboard-categories/index.tsx b/app/pages/dashboard-categories/index.tsx
new file mode 100644
index 0000000..e2c92a1
--- /dev/null
+++ b/app/pages/dashboard-categories/index.tsx
@@ -0,0 +1,85 @@
+import DataTable from 'datatables.net-dt'
+import DT from 'datatables.net-react'
+import { Link, useRouteLoaderData } from 'react-router'
+
+import { Button } from '~/components/ui/button'
+import { UiTable } from '~/components/ui/table'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+import type { loader } from '~/routes/_admin.lg-admin._dashboard.categories._index'
+export const CategoriesPage = () => {
+  const loaderData = useRouteLoaderData<typeof loader>(
+    'routes/_admin.lg-admin._dashboard.categories._index',
+  )
+  const dataTable = loaderData?.dataCategories
+
+  DataTable.use(DT)
+  const dataColumns = [
+    {
+      title: 'No',
+      render: (
+        data: unknown,
+        type: unknown,
+        row: unknown,
+        meta: { row: number },
+      ) => {
+        return meta.row + 1
+      },
+    },
+    {
+      title: 'Nama Kategori',
+      data: 'name',
+    },
+    {
+      title: 'Code Katgeori',
+      data: 'code',
+    },
+    {
+      title: 'Action',
+      data: 'id',
+    },
+  ]
+
+  const dataOptions = {
+    paging: true,
+    searching: true,
+    ordering: true,
+    info: true,
+  }
+
+  const dataSlot = {
+    3: (value: string) => (
+      <Button
+        as="a"
+        href={`/lg-admin/category/update/${value}`}
+        className="text-md rounded-md"
+        size="sm"
+      >
+        Lihat Detail
+      </Button>
+    ),
+  }
+  return (
+    <div className="relative">
+      <TitleDashboard title="Kategori" />
+      <div className="mb-8 flex items-end justify-between gap-5">
+        <div className="flex-1">{/* TODO: Filter */}</div>
+        <Button
+          as={Link}
+          to="/lg-admin/category/create"
+          className="text-md h-[42px] rounded-md"
+          size="lg"
+        >
+          Create New
+        </Button>
+      </div>
+
+      <UiTable
+        data={dataTable}
+        columns={dataColumns}
+        options={dataOptions}
+        slots={dataSlot}
+        title="Daftar Katgeori"
+      />
+    </div>
+  )
+}
diff --git a/app/pages/category-create/index.tsx b/app/pages/dashboard-category-create/index.tsx
similarity index 100%
rename from app/pages/category-create/index.tsx
rename to app/pages/dashboard-category-create/index.tsx
diff --git a/app/pages/dashboard-category-update/index.tsx b/app/pages/dashboard-category-update/index.tsx
new file mode 100644
index 0000000..ca8e173
--- /dev/null
+++ b/app/pages/dashboard-category-update/index.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const UpdateCategoryPage = () => {
+  return <div>UpdateCategoryPage</div>
+}
diff --git a/app/routes/_admin.lg-admin._dashboard.categories._index.tsx b/app/routes/_admin.lg-admin._dashboard.categories._index.tsx
new file mode 100644
index 0000000..e2b970e
--- /dev/null
+++ b/app/routes/_admin.lg-admin._dashboard.categories._index.tsx
@@ -0,0 +1,15 @@
+import { getCategories } from '~/apis/common/get-categories'
+import { handleCookie } from '~/libs/cookies'
+import { CategoriesPage } from '~/pages/dashboard-categories'
+
+import type { Route } from './+types/_admin.lg-admin._dashboard.categories._index'
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const { staffToken } = await handleCookie(request)
+  const { data: dataCategories } = await getCategories({
+    accessToken: staffToken,
+  })
+  return { dataCategories }
+}
+const DashboardCategoriesLayout = () => <CategoriesPage />
+export default DashboardCategoriesLayout
diff --git a/app/routes/_admin.lg-admin._dashboard.category.create.tsx b/app/routes/_admin.lg-admin._dashboard.category.create.tsx
index 896d09b..5f475e0 100644
--- a/app/routes/_admin.lg-admin._dashboard.category.create.tsx
+++ b/app/routes/_admin.lg-admin._dashboard.category.create.tsx
@@ -1,4 +1,4 @@
-import { CreateCategoryPage } from '~/pages/category-create'
+import { CreateCategoryPage } from '~/pages/dashboard-category-create'
 
 const DashboardCategoryLayout = () => <CreateCategoryPage />
 export default DashboardCategoryLayout
diff --git a/app/routes/_admin.lg-admin._dashboard.category.update.$slug.tsx b/app/routes/_admin.lg-admin._dashboard.category.update.$slug.tsx
new file mode 100644
index 0000000..2da33fd
--- /dev/null
+++ b/app/routes/_admin.lg-admin._dashboard.category.update.$slug.tsx
@@ -0,0 +1,4 @@
+import { UpdateCategoryPage } from '~/pages/dashboard-category-update'
+
+const DashboardCategoryUpdateLayout = () => <UpdateCategoryPage />
+export default DashboardCategoryUpdateLayout
diff --git a/app/routes/_admin.lg-admin._dashboard.settings.tsx b/app/routes/_admin.lg-admin._dashboard.settings.tsx
index 4e2632a..f4b9873 100644
--- a/app/routes/_admin.lg-admin._dashboard.settings.tsx
+++ b/app/routes/_admin.lg-admin._dashboard.settings.tsx
@@ -1,2 +1,34 @@
-const DashboardSettingsLayout = () => <div>Settings Page</div>
+import { Button } from '~/components/ui/button'
+
+const DashboardSettingsLayout = () => (
+  <div>
+    {/* action sementara kategory */}
+    <div className="flex space-x-2">
+      <Button
+        as="a"
+        href={`/lg-admin/categories`}
+        className="text-md rounded-md"
+        size="sm"
+      >
+        List Kategory
+      </Button>
+      <Button
+        as="a"
+        href={`/lg-admin/category/create`}
+        className="text-md rounded-md"
+        size="sm"
+      >
+        Create Category
+      </Button>
+      <Button
+        as="a"
+        href={`/lg-admin/category/update/1`}
+        className="text-md rounded-md"
+        size="sm"
+      >
+        Update Category
+      </Button>
+    </div>
+  </div>
+)
 export default DashboardSettingsLayout
diff --git a/app/routes/actions.admin.category.create.ts b/app/routes/actions.admin.category.create.ts
index 1f27a93..8dec87d 100644
--- a/app/routes/actions.admin.category.create.ts
+++ b/app/routes/actions.admin.category.create.ts
@@ -8,7 +8,7 @@ import { handleCookie } from '~/libs/cookies'
 import {
   createCategorySchema,
   type TCategorySchema,
-} from '~/pages/category-create'
+} from '~/pages/dashboard-category-create'
 
 import type { Route } from './+types/actions.register'