diff --git a/app/components/ui/color-badge.tsx b/app/components/ui/color-badge.tsx
new file mode 100644
index 0000000..ba90654
--- /dev/null
+++ b/app/components/ui/color-badge.tsx
@@ -0,0 +1,23 @@
+export type TColorBadge =
+  | 'baru'
+  | 'premium'
+  | 'pembayaran'
+  | 'active'
+  | 'inactive'
+  | 'expired'
+  | 1
+  | 0
+
+export const getStatusBadge = (status: TColorBadge) => {
+  const statusColors = {
+    baru: 'bg-[#DFE5FF] text-[#4C5CA0]',
+    premium: 'bg-[#FFFCAF] text-[#DBCA6E]',
+    pembayaran: 'bg-[#FEC4FF] text-[#CC6EDB]',
+    active: 'bg-[#D1FAE5] text-[#10B981]',
+    inactive: 'bg-[#FEE2E2] text-[#EF4444]',
+    expired: 'bg-[#FEC4FF] text-[#CC6EDB]',
+    1: 'bg-[#DFE5FF] text-[#4C5CA0]',
+    0: 'bg-[#FEE2E2] text-[#EF4444]',
+  }
+  return statusColors[status] || 'bg-gray-200 text-gray-700'
+}
diff --git a/app/pages/dashboard-plan-subscribe/index.tsx b/app/pages/dashboard-plan-subscribe/index.tsx
index 61a6fb6..9bd16ea 100644
--- a/app/pages/dashboard-plan-subscribe/index.tsx
+++ b/app/pages/dashboard-plan-subscribe/index.tsx
@@ -3,9 +3,11 @@ import DataTable from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
+import { getStatusBadge, type TColorBadge } from '~/components/ui/color-badge'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard.subscribe-plan._index'
+import { formatNumberWithPeriods } from '~/utils/formatter'
 
 export const SubscribePlanPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
@@ -14,6 +16,7 @@ export const SubscribePlanPage = () => {
 
   DataTable.use(DT)
   const { subscriptionsData: dataTable } = loaderData || {}
+
   const dataColumns = [
     {
       title: 'No',
@@ -34,13 +37,35 @@ export const SubscribePlanPage = () => {
       title: 'Kode',
       data: 'code',
     },
+    {
+      title: 'Length',
+      data: 'length',
+    },
+    {
+      title: 'Price',
+      data: 'price',
+    },
+    {
+      title: 'Status',
+      data: 'status',
+    },
     {
       title: 'Action',
       data: 'id',
     },
   ]
   const dataSlot = {
-    3: (value: string) => (
+    4: (value: number) => (
+      <div className="text-right">Rp. {formatNumberWithPeriods(value)}</div>
+    ),
+    5: (value: number) => (
+      <span
+        className={`rounded-lg px-2 text-sm ${getStatusBadge(value as TColorBadge)}`}
+      >
+        {value === 1 ? 'Active' : 'Inactive'}
+      </span>
+    ),
+    6: (value: string) => (
       <Button
         as="a"
         href={`/lg-admin/subscribe-plan/update/${value}`}