diff --git a/app/layouts/admin/menu.ts b/app/layouts/admin/menu.ts
index 36f57b7..7705ac0 100644
--- a/app/layouts/admin/menu.ts
+++ b/app/layouts/admin/menu.ts
@@ -59,6 +59,11 @@ export const MENU: TMenu[] = [
         url: '/lg-admin/tags',
         icon: TagIcon,
       },
+      {
+        title: 'Subscribe Plan',
+        url: '/lg-admin/subscribe-plan',
+        icon: TagIcon,
+      },
     ],
   },
 ]
diff --git a/app/pages/dashboard-plan-subscribe/index.tsx b/app/pages/dashboard-plan-subscribe/index.tsx
new file mode 100644
index 0000000..512e87e
--- /dev/null
+++ b/app/pages/dashboard-plan-subscribe/index.tsx
@@ -0,0 +1,85 @@
+import DT from 'datatables.net-dt'
+import DataTable 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'
+
+export const SubscribePlanPage = () => {
+  const loaderData = useRouteLoaderData<typeof loader>(
+    'routes/_admin.lg-admin._dashboard',
+  )
+
+  DataTable.use(DT)
+  const dataTable = loaderData?.subscriptionsData
+
+  const dataColumns = [
+    {
+      title: 'No',
+      render: (
+        data: unknown,
+        type: unknown,
+        row: unknown,
+        meta: { row: number },
+      ) => {
+        return meta.row + 1
+      },
+    },
+    {
+      title: 'Nama',
+      data: 'name',
+    },
+    {
+      title: 'Kode',
+      data: 'code',
+    },
+    {
+      title: 'Action',
+      data: 'id',
+    },
+  ]
+
+  const dataSlot = {
+    3: (value: string) => (
+      <Button
+        as="a"
+        href={`/lg-admin/subscribe-plan/update/${value}`}
+        className="text-md rounded-md"
+        size="sm"
+      >
+        Update Subscribe Plan
+      </Button>
+    ),
+  }
+  return (
+    <div className="relative">
+      <TitleDashboard title="Subscribe Plan" />
+      <div className="mb-8 flex items-end justify-between">
+        <div className="flex-1">{/* TODO: Filter */}</div>
+        <Button
+          as={Link}
+          to="/lg-admin/subscribe-plan/create"
+          className="text-md h-[42px] rounded-md"
+          size="lg"
+        >
+          Buat Subscribe Plan
+        </Button>
+      </div>
+
+      <UiTable
+        data={dataTable}
+        columns={dataColumns}
+        slots={dataSlot}
+        options={{
+          paging: true,
+          searching: true,
+          ordering: true,
+          info: true,
+        }}
+        title=" Daftar Subscribe Plan"
+      />
+    </div>
+  )
+}
diff --git a/app/pages/dashboard-subscriptions/data.ts b/app/pages/dashboard-subscriptions/data.ts
index de4f1f2..93de337 100644
--- a/app/pages/dashboard-subscriptions/data.ts
+++ b/app/pages/dashboard-subscriptions/data.ts
@@ -8,15 +8,6 @@ type TSubscriptions = {
   status: string
 }
 
-type TSubSettings = {
-  id: number
-  createdAt: string
-  subscriber: 'Monthly' | 'Yearly' | 'Weekly' | 'Special'
-  price: string
-  length: '30' | '365' | '7' | '1'
-  status: string
-}
-
 export const SUBSCRIPTIONS: TSubscriptions[] = [
   {
     id: 1,
@@ -199,86 +190,3 @@ export const SUBSCRIPTIONS: TSubscriptions[] = [
     status: 'Draft',
   },
 ]
-
-export const SUBSETTINGS: TSubSettings[] = [
-  {
-    id: 1,
-    createdAt: '24/10/2024',
-    subscriber: 'Monthly',
-    price: '100',
-    length: '30',
-    status: 'active',
-  },
-  {
-    id: 2,
-    createdAt: '25/10/2024',
-    subscriber: 'Yearly',
-    price: '1000',
-    length: '365',
-    status: 'active',
-  },
-  {
-    id: 3,
-    createdAt: '26/10/2024',
-    subscriber: 'Weekly',
-    price: '25',
-    length: '7',
-    status: 'inactive',
-  },
-  {
-    id: 4,
-    createdAt: '27/10/2024',
-    subscriber: 'Monthly',
-    price: '100',
-    length: '30',
-    status: 'active',
-  },
-  {
-    id: 5,
-    createdAt: '28/10/2024',
-    subscriber: 'Yearly',
-    price: '1000',
-    length: '365',
-    status: 'inactive',
-  },
-  {
-    id: 6,
-    createdAt: '29/10/2024',
-    subscriber: 'Weekly',
-    price: '25',
-    length: '7',
-    status: 'active',
-  },
-  {
-    id: 7,
-    createdAt: '30/10/2024',
-    subscriber: 'Monthly',
-    price: '100',
-    length: '30',
-    status: 'inactive',
-  },
-  {
-    id: 8,
-    createdAt: '31/10/2024',
-    subscriber: 'Yearly',
-    price: '1000',
-    length: '365',
-    status: 'active',
-  },
-  {
-    id: 9,
-    createdAt: '01/11/2024',
-    subscriber: 'Weekly',
-    price: '25',
-    length: '7',
-    status: 'inactive',
-  },
-  {
-    id: 10,
-    createdAt: '02/11/2024',
-    subscriber: 'Monthly',
-    price: '100',
-    length: '30',
-    status: 'active',
-  },
-]
diff --git a/app/pages/dashboard-subscriptions/index.tsx b/app/pages/dashboard-subscriptions/index.tsx
index c1163b5..7afdbfc 100644
--- a/app/pages/dashboard-subscriptions/index.tsx
+++ b/app/pages/dashboard-subscriptions/index.tsx
@@ -1,18 +1,15 @@
 import { Field, Input, Label, Select } from '@headlessui/react'
 import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
-import { useState } from 'react'
 
 import { SearchIcon } from '~/components/icons/search'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 
-import { SUBSCRIPTIONS, SUBSETTINGS } from './data'
+import { SUBSCRIPTIONS } from './data'
 
 export const SubscriptionsPage = () => {
-  const [SubscribtionOpen, setSubscribtionOpen] = useState(true)
-  // const [SubSettingOpen, setSubSettingOpen] = useState(false)
   DataTable.use(DT)
   const colTableSubscription = [
     { title: 'No', data: 'id' },
@@ -28,158 +25,64 @@ export const SubscriptionsPage = () => {
       },
     },
   ]
-  const colTableSubSetting = [
-    { title: 'No', data: 'id' },
-    { title: 'Tanggal Pembuatan', data: 'createdAt' },
-    { title: 'Nama Subscription', data: 'subscriber' },
-    { title: 'Price', data: 'price' },
-    { title: 'Length', data: 'length' },
-    {
-      title: 'Status',
-      data: 'status',
-      render: (value: string) => {
-        return value == 'active'
-          ? `<span class="bg-[#DFE5FF] text-[#4C5CA0] px-2 py-1 rounded-md">${value}</span>`
-          : `<span class="bg-[#FFD1D1] text-[#FF4E4E] px-2 py-1 rounded-md">${value}</span>`
-      },
-    },
-  ]
-
-  const switchView = () => {
-    setSubscribtionOpen(!SubscribtionOpen)
-  }
 
   return (
     <div className="relative">
       <TitleDashboard title="Subscription" />
 
-      {SubscribtionOpen && (
-        <>
-          <div className="mb-8 flex items-end justify-between">
-            <div className="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 bg-white p-2 pr-10 pl-4 shadow 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 className="mb-8 flex items-end justify-between">
+        <div className="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 bg-white p-2 pr-10 pl-4 shadow 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>
-
-              <div className="w-[235px]">
-                <Field>
-                  <Label className="mb-2 block text-sm font-medium">
-                    Status
-                  </Label>
-                  <Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
-                    <option>Pilih Status</option>
-                    <option>Aktif</option>
-                    <option>Nonaktif</option>
-                  </Select>
-                </Field>
-              </div>
-            </div>
-
-            <Button
-              className="rounded-md"
-              size="lg"
-              onClick={switchView}
-            >
-              Subscription Settings
-            </Button>
+            </Field>
           </div>
 
-          <UiTable
-            data={SUBSCRIPTIONS}
-            columns={colTableSubscription}
-            options={{
-              paging: true,
-              searching: true,
-              ordering: true,
-              info: true,
-            }}
-            title="Daftar Subscription"
-          />
-        </>
-      )}
-
-      {!SubscribtionOpen && (
-        <>
-          <div className="mb-8 flex items-end justify-between">
-            <div className="flex items-end gap-5 rounded-lg bg-gray-50 text-[#363636]">
-              <div className="w-[300px]">
-                <Field>
-                  <Label className="mb-2 block text-sm font-medium">
-                    Subscription Name
-                  </Label>
-                  <div className="relative">
-                    <Input
-                      type="text"
-                      placeholder="Subscription Name"
-                      className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                    />
-                  </div>
-                </Field>
-              </div>
-              <div className="w-[300px]">
-                <Field>
-                  <Label className="mb-2 block text-sm font-medium">
-                    Subscription Price
-                  </Label>
-                  <div className="relative">
-                    <Input
-                      type="text"
-                      placeholder="Subscription Price"
-                      className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                    />
-                  </div>
-                </Field>
-              </div>
-
-              <div className="w-[300px]">
-                <Field>
-                  <Label className="mb-2 block text-sm font-medium">
-                    Subscription Length (Days)
-                  </Label>
-                  <Input
-                    type="text"
-                    placeholder="Subscription Length (Days)"
-                    className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                  ></Input>
-                </Field>
-              </div>
-            </div>
-            <Button
-              className="rounded-md"
-              size="lg"
-              onClick={switchView}
-            >
-              Save
-            </Button>
+          <div className="w-[235px]">
+            <Field>
+              <Label className="mb-2 block text-sm font-medium">Status</Label>
+              <Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
+                <option>Pilih Status</option>
+                <option>Aktif</option>
+                <option>Nonaktif</option>
+              </Select>
+            </Field>
           </div>
+        </div>
 
-          <UiTable
-            data={SUBSETTINGS}
-            columns={colTableSubSetting}
-            options={{
-              paging: true,
-              searching: true,
-              ordering: true,
-              info: true,
-            }}
-            title=" Daftar Subscription"
-          />
-        </>
-      )}
+        <Button
+          as="a"
+          className="rounded-md"
+          size="lg"
+          href="#"
+        >
+          Subscription Settings
+        </Button>
+      </div>
+
+      <UiTable
+        data={SUBSCRIPTIONS}
+        columns={colTableSubscription}
+        options={{
+          paging: true,
+          searching: true,
+          ordering: true,
+          info: true,
+        }}
+        title="Daftar Subscription"
+      />
     </div>
   )
 }
diff --git a/app/routes/_admin.lg-admin._dashboard.subscribe-plan._index.tsx b/app/routes/_admin.lg-admin._dashboard.subscribe-plan._index.tsx
new file mode 100644
index 0000000..eb574ba
--- /dev/null
+++ b/app/routes/_admin.lg-admin._dashboard.subscribe-plan._index.tsx
@@ -0,0 +1,4 @@
+import { SubscribePlanPage } from '~/pages/dashboard-plan-subscribe'
+
+const DashboardSubscriptionsSettingsLayout = () => <SubscribePlanPage />
+export default DashboardSubscriptionsSettingsLayout
diff --git a/app/routes/_admin.lg-admin._dashboard.subscriptions.tsx b/app/routes/_admin.lg-admin._dashboard.subscriptions._index.tsx
similarity index 100%
rename from app/routes/_admin.lg-admin._dashboard.subscriptions.tsx
rename to app/routes/_admin.lg-admin._dashboard.subscriptions._index.tsx
diff --git a/app/routes/_admin.lg-admin._dashboard.tsx b/app/routes/_admin.lg-admin._dashboard.tsx
index 11b5ffc..72ed1cc 100644
--- a/app/routes/_admin.lg-admin._dashboard.tsx
+++ b/app/routes/_admin.lg-admin._dashboard.tsx
@@ -1,6 +1,7 @@
 import { Outlet } from 'react-router'
 
 import { getCategories } from '~/apis/common/get-categories'
+import { getSubscriptions } from '~/apis/common/get-subscriptions'
 import { getTags } from '~/apis/common/get-tags'
 import { AdminDashboardLayout } from '~/layouts/admin/dashboard'
 
@@ -9,10 +10,12 @@ import type { Route } from './+types/_admin.lg-admin._dashboard'
 export const loader = async ({}: Route.LoaderArgs) => {
   const { data: categoriesData } = await getCategories()
   const { data: tagsData } = await getTags()
+  const { data: subscriptionsData } = await getSubscriptions()
 
   return {
     categoriesData,
     tagsData,
+    subscriptionsData,
   }
 }