diff --git a/app/components/icons/chevron-double.tsx b/app/components/icons/chevron-double.tsx
new file mode 100644
index 0000000..db9cadf
--- /dev/null
+++ b/app/components/icons/chevron-double.tsx
@@ -0,0 +1,28 @@
+import type { JSX, SVGProps } from 'react'
+
+/**
+ * Note: `ChevronDoubleIcon` default mengarah ke kiri.
+ * Gunakan class `rotate-xx` untuk mengubah arah ikon.
+ */
+export const ChevronDoubleIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={20}
+      height={20}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={properties.className}
+      {...properties}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.512 4.427l-2.984 3.58 2.877 3.575a.667.667 0 01-1.04.836l-3.218-4a.667.667 0 01.007-.844l3.334-4a.667.667 0 011.024.853zm-5.69-.853a.667.667 0 011.023.853l-2.984 3.58 2.877 3.575a.667.667 0 01-1.039.836l-3.218-4a.666.666 0 01.007-.844l3.333-4z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/app/components/icons/chevron-down.tsx b/app/components/icons/chevron.tsx
similarity index 71%
rename from app/components/icons/chevron-down.tsx
rename to app/components/icons/chevron.tsx
index c242f04..4161d77 100644
--- a/app/components/icons/chevron-down.tsx
+++ b/app/components/icons/chevron.tsx
@@ -1,6 +1,9 @@
 import type { JSX, SVGProps } from 'react'
-
-export const ChevronDownIcon = (
+/**
+ * Note: `ChevronIcon` default mengarah ke bawah.
+ * Gunakan class `rotate-xx` untuk mengubah arah ikon.
+ */
+export const ChevronIcon = (
   properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) => {
   return (
@@ -10,6 +13,7 @@ export const ChevronDownIcon = (
       viewBox="0 0 21 21"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={properties.className}
       {...properties}
     >
       <path
diff --git a/app/components/ui/pagination.tsx b/app/components/ui/pagination.tsx
new file mode 100644
index 0000000..ddf5719
--- /dev/null
+++ b/app/components/ui/pagination.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { ChevronIcon } from '~/components/icons/chevron'
+import { ChevronDoubleIcon } from '~/components/icons/chevron-double'
+
+interface PaginationProperties {
+  currentPage: number
+  totalPages: number
+  onPageChange: (page: number) => void
+}
+
+export const Pagination: React.FC<PaginationProperties> = ({
+  currentPage = 1,
+  totalPages,
+  onPageChange,
+}) => {
+  const renderPageNumbers = () => {
+    const pages = []
+    for (let index = 1; index <= totalPages; index++) {
+      pages.push(
+        <button
+          key={index}
+          onClick={() => onPageChange(index)}
+          className={`rounded-lg px-3 py-1 ${
+            currentPage === index ? 'bg-[#2E2F7C] text-white' : 'text-gray-500'
+          }`}
+        >
+          {index}
+        </button>,
+      )
+    }
+    return pages
+  }
+
+  return (
+    <div className="flex items-center justify-center space-x-2 text-[#2E2F7C]">
+      <button
+        onClick={() => onPageChange(1)}
+        disabled={currentPage === 1}
+      >
+        <ChevronDoubleIcon />
+      </button>
+      <button
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+      >
+        <ChevronIcon className="rotate-90" />
+      </button>
+
+      {renderPageNumbers()}
+
+      <button
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+      >
+        <ChevronIcon className="rotate-270" />
+      </button>
+      <button
+        onClick={() => onPageChange(totalPages)}
+        disabled={currentPage === totalPages}
+      >
+        <ChevronDoubleIcon className="rotate-180" />
+      </button>
+    </div>
+  )
+}
diff --git a/app/layouts/admin/navbar.tsx b/app/layouts/admin/navbar.tsx
index 1e81d0c..19b3396 100644
--- a/app/layouts/admin/navbar.tsx
+++ b/app/layouts/admin/navbar.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router'
 
-import { ChevronDownIcon } from '~/components/icons/chevron-down'
+import { ChevronIcon } from '~/components/icons/chevron'
 import { NotificationIcon } from '~/components/icons/notification'
 import { useAdminContext } from '~/contexts/admin'
 import { APP } from '~/data/meta'
@@ -26,7 +26,7 @@ export const Navbar = () => {
             <div className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" />
             <span className="text-xs">{adminProfile.name}</span>
           </div>
-          <ChevronDownIcon className="opacity-10" />
+          <ChevronIcon className="opacity-50" />
         </div>
         <NotificationIcon
           className="text-[#B0C3CC]"
diff --git a/app/pages/dashboard-users/data.ts b/app/pages/dashboard-users/data.ts
new file mode 100644
index 0000000..82c7a5c
--- /dev/null
+++ b/app/pages/dashboard-users/data.ts
@@ -0,0 +1,42 @@
+export const USERS = [
+  {
+    id: 1,
+    date: '24/10/2024',
+    name: 'Ainun Wijaya',
+    email: 'ainun@gmail.com',
+    category: 'Pribadi',
+    status: 'Baru',
+  },
+  {
+    id: 2,
+    date: '24/10/2024',
+    name: 'Ainun Wijaya',
+    email: 'ainun@gmail.com',
+    category: 'Pribadi',
+    status: 'Premium',
+  },
+  {
+    id: 3,
+    date: '24/10/2024',
+    name: 'Ainun Wijaya',
+    email: 'ainun@gmail.com',
+    category: 'Pribadi',
+    status: 'Pembayaran',
+  },
+  {
+    id: 4,
+    date: '24/10/2024',
+    name: 'Ainun Wijaya',
+    email: 'ainun@gmail.com',
+    category: 'Pribadi',
+    status: 'Premium',
+  },
+  {
+    id: 5,
+    date: '24/10/2024',
+    name: 'Ainun Wijaya',
+    email: 'ainun@gmail.com',
+    category: 'Pribadi',
+    status: 'Baru',
+  },
+]
diff --git a/app/pages/dashboard-users/index.tsx b/app/pages/dashboard-users/index.tsx
new file mode 100644
index 0000000..7f30b38
--- /dev/null
+++ b/app/pages/dashboard-users/index.tsx
@@ -0,0 +1,111 @@
+import { Field, Input, Label, Select } from '@headlessui/react'
+
+import { SearchIcon } from '~/components/icons/search'
+import { Pagination } from '~/components/ui/pagination'
+
+import { USERS } from './data'
+
+export const UsersPage = () => {
+  type TColorBadge = 'Baru' | 'Premium' | 'Pembayaran'
+
+  const getStatusBadge = (status: TColorBadge) => {
+    const statusColors = {
+      Baru: 'bg-[#DFE5FF] text-[#4C5CA0]',
+      Premium: 'bg-[#FFFCAF] text-[#DBCA6E]',
+      Pembayaran: 'bg-[#FEC4FF] text-[#CC6EDB]',
+    }
+    return statusColors[status] || 'bg-gray-200 text-gray-700'
+  }
+
+  return (
+    <div className="relative">
+      <div className="container mx-auto">
+        <section className="mb-5 flex items-center justify-between">
+          <h1 className="text-xl font-bold">User</h1>
+        </section>
+      </div>
+      {/* filter section */}
+
+      <div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
+        <div className="w-[400px]">
+          <Field>
+            <Label className="mb-2 block text-sm font-medium">Cari User</Label>
+            <div className="relative">
+              <Input
+                type="text"
+                placeholder="Cari Nama"
+                className="w-full rounded-lg border bg-white p-2 pr-10 pl-4 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+              />
+              <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+                <SearchIcon className="h-5 w-5" />
+              </div>
+            </div>
+          </Field>
+        </div>
+
+        <div className="w-[235px]">
+          <Field>
+            <Label className="mb-2 block text-sm font-medium">Status</Label>
+            <Select className="w-full rounded-lg border bg-white p-2 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
+              <option>Pilih Status</option>
+              <option>Aktif</option>
+              <option>Nonaktif</option>
+            </Select>
+          </Field>
+        </div>
+      </div>
+
+      {/* table */}
+      <div className="overflow-x-auto">
+        <div className="rounded-lg bg-white px-6 py-8 shadow-sm">
+          <h2 className="text-xl font-bold text-[#4C5CA0]">Daftar User</h2>
+          <table className="min-w-full p-3">
+            <thead className="my-5 border-b-3 border-[#C2C2C2]">
+              <tr>
+                <th className="p-3">No</th>
+                <th>Tanggal Daftar</th>
+                <th>Nama User</th>
+                <th>Email</th>
+                <th>Kategori</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {USERS.map((user, index) => (
+                <tr
+                  key={user.id}
+                  className="border-b-1 border-gray-200 text-center"
+                >
+                  <td className="p-4">{index + 1}</td>
+                  <td>{user.date}</td>
+                  <td>
+                    {user.name}
+                    <div className="text-sm text-gray-500">id: 5512446588</div>
+                  </td>
+                  <td>{user.email}</td>
+                  <td>{user.category}</td>
+                  <td className="">
+                    <span
+                      className={`inline-block min-w-[100px] rounded-full px-2 py-1 text-sm ${getStatusBadge(user.status as TColorBadge)}`}
+                    >
+                      {user.status}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* pagination */}
+        <div className="float-end mt-6">
+          <Pagination
+            currentPage={1}
+            totalPages={5}
+            onPageChange={() => {}}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/routes/_layout.admin.dashboard.users.tsx b/app/routes/_layout.admin.dashboard.users.tsx
index 87ac591..e3edc82 100644
--- a/app/routes/_layout.admin.dashboard.users.tsx
+++ b/app/routes/_layout.admin.dashboard.users.tsx
@@ -1,4 +1,6 @@
+import { UsersPage } from '~/pages/dashboard-users'
+
 const DashboardUsersLayout = () => {
-  return <div>Users Page</div>
+  return <UsersPage />
 }
 export default DashboardUsersLayout