diff --git a/app/components/app/divison/list-cfg.ts b/app/components/app/divison/list-cfg.ts
new file mode 100644
index 00000000..45cfcd6f
--- /dev/null
+++ b/app/components/app/divison/list-cfg.ts
@@ -0,0 +1,80 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+
+export const cols: Col[] = [
+  {},
+  {},
+  {},
+  {},
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Id' },
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Kelompok' },
+  ],
+]
+
+export const keys = [
+  'id',
+  'cellphone',
+  'firstName',
+  'birth_place',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/divison/list.vue b/app/components/app/divison/list.vue
index d3a63407..3aecc2e8 100644
--- a/app/components/app/divison/list.vue
+++ b/app/components/app/divison/list.vue
@@ -1,54 +1,72 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  title: string
-}>()
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta?: PaginationMeta
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  (e: 'update', value: string): void
+  pageChange: [page: number]
 }>()
-// #endregion
 
-// #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(() => {
-  // init code
-  fetchData()
-})
-// #endregion
-
-// #region Functions
-async function fetchData() {
-  console.log('fetched')
+function handlePageChange(page: number) {
+  emit('pageChange', page)
 }
-// #endregion region
 
-// #region Utilities & event handlers
-function increment() {
-  count.value++
-}
-// #endregion
-
-// #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
+// Computed properties for formatted display
+const formattedRecordCount = computed(() => {
+  if (!props.paginationMeta) return '0'
+  const count = props.paginationMeta.recordCount
+  if (count == null || count === undefined) return '0'
+  return Number(count).toLocaleString('id-ID')
+})
+
+const startRecord = computed(() => {
+  if (!props.paginationMeta) return 1
+  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
+})
+
+const endRecord = computed(() => {
+  if (!props.paginationMeta) return 0
+  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
 })
-// #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+        />
+
+    <!-- Data info and pagination -->
+    <div v-if="paginationMeta" class="flex align-center justify-between">
+      <!-- Data info - always show -->
+      <div class="flex items-center justify-between px-2 mb-4">
+        <div class="flex-1 text-sm text-muted-foreground">
+          Menampilkan {{ startRecord }}
+          hingga {{ endRecord }}
+          dari {{ formattedRecordCount }} data
+        </div>
+      </div>
+
+      <!-- Pagination controls - only show when multiple pages -->
+      <div v-if="paginationMeta.totalPage > 1">
+        <PubCustomUiPagination
+          :pagination-meta="paginationMeta"
+          :show-info="false"
+          @page-change="handlePageChange"
+        />
+      </div>
+    </div>
   </div>
 </template>
-
-<style scoped>
-/* component style */
-</style>
diff --git a/app/components/flow/division/list.vue b/app/components/flow/division/list.vue
index d3a63407..28f514b6 100644
--- a/app/components/flow/division/list.vue
+++ b/app/components/flow/division/list.vue
@@ -1,51 +1,166 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  title: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update', value: string): void
-}>()
-// #endregion
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { refDebounced, useUrlSearchParams } from '@vueuse/core'
+import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { defaultQuery, querySchema } from './schema.query'
 
 // #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+// URL state management
+const queryParams = useUrlSearchParams('history', {
+  initialValue: defaultQuery,
+  removeFalsyValues: true,
+})
+
+const params = computed(() => {
+  const result = querySchema.safeParse(queryParams)
+  return result.data || defaultQuery
+})
+
+// Pagination state - computed from URL params
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: 0,
+  page: params.value.page,
+  pageSize: params.value.pageSize,
+  totalPage: 0,
+  hasNext: false,
+  hasPrev: false,
+})
+
+// Search model with debounce
+const searchInput = ref(params.value.q || '')
+const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
+
+const headerPrep: HeaderPrep = {
+  title: 'Divisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Divisi',
+    icon: 'i-lucide-send',
+    // todo: open modal form
+    onClick: () => navigateTo('/org-src/division/add'),
+  },
+}
+
+provide('table_data_loader', isLoading)
 // #endregion
 
 // #region Lifecycle Hooks
 onMounted(() => {
-  // init code
-  fetchData()
+  getDivisionList()
 })
 // #endregion
 
 // #region Functions
-async function fetchData() {
-  console.log('fetched')
+async function getDivisionList() {
+  isLoading.isTableLoading = true
+
+  try {
+    // Use current params from URL state
+    const currentParams = params.value
+
+    // Prepare query parameters for pagination and search
+    const urlParams = new URLSearchParams({
+      'page-number': currentParams.page.toString(),
+      'page-size': currentParams.pageSize.toString(),
+    })
+
+    if (currentParams.q) {
+      urlParams.append('search', currentParams.q)
+    }
+
+    const resp = await xfetch(`/api/v1/patient?${urlParams.toString()}`)
+
+    if (resp.success) {
+      const responseBody = resp.body as Record<string, any>
+      data.value = responseBody.data || []
+
+      const pager = responseBody.meta
+      // Update pagination meta from response
+      // Fallback if meta is not provided by API
+      paginationMeta.recordCount = pager.record_totalCount
+      paginationMeta.page = currentParams.page
+      paginationMeta.pageSize = currentParams.pageSize
+      paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
+      paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
+      paginationMeta.hasPrev = paginationMeta.page > 1
+    }
+  } catch (error) {
+    console.error('Error fetching division list:', error)
+    data.value = []
+    paginationMeta.recordCount = 0
+    paginationMeta.totalPage = 0
+    paginationMeta.hasNext = false
+    paginationMeta.hasPrev = false
+  } finally {
+    isLoading.isTableLoading = false
+  }
 }
+
+// Handle pagination page change
+function handlePageChange(page: number) {
+  // Update URL params - this will trigger watcher
+  queryParams.page = page
+}
+
 // #endregion region
 
 // #region Utilities & event handlers
-function increment() {
-  count.value++
-}
 // #endregion
 
 // #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
+// Watch for URL param changes and trigger refetch
+watch(params, (newParams) => {
+  // Sync search input with URL params (for back/forward navigation)
+  if (newParams.q !== searchInput.value) {
+    searchInput.value = newParams.q || ''
+  }
+  getDivisionList()
+}, { deep: true })
+
+// Handle search from header component
+function handleSearch(searchValue: string) {
+  // Update URL params - this will trigger watcher and refetch data
+  queryParams.q = searchValue
+  queryParams.page = 1 // Reset to first page when searching
+}
+
+// Watch debounced search and update URL params (keeping for backward compatibility)
+watch(debouncedSearch, (newValue) => {
+  // Only search if 3+ characters or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= 3) {
+    queryParams.q = newValue
+    queryParams.page = 1 // Reset to first page when searching
+  }
 })
 // #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
+  <div class="rounded-md border p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
 
diff --git a/app/components/flow/division/schema.query.ts b/app/components/flow/division/schema.query.ts
new file mode 100644
index 00000000..9b1a4606
--- /dev/null
+++ b/app/components/flow/division/schema.query.ts
@@ -0,0 +1,15 @@
+import * as z from 'zod'
+
+export const querySchema = z.object({
+  q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
+  page: z.coerce.number().int().min(1).default(1).catch(1),
+  pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
+})
+
+export const defaultQuery = {
+  q: '',
+  page: 1,
+  pageSize: 10,
+}
+
+export type QueryParams = z.infer<typeof querySchema>
diff --git a/app/components/pub/custom-ui/data/types.ts b/app/components/pub/custom-ui/data/types.ts
index c1dbe8d3..52f5753c 100644
--- a/app/components/pub/custom-ui/data/types.ts
+++ b/app/components/pub/custom-ui/data/types.ts
@@ -36,7 +36,7 @@ export interface Th {
 }
 
 export interface ButtonNav {
-  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'negative' | 'ghost' | 'link'
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
   classVal?: string
   classValExt?: string
   icon?: string
@@ -56,6 +56,12 @@ export interface QuickSearchNav {
 }
 
 export interface RefSearchNav {
+  modelValue?: string
+  placeholder?: string
+  minLength?: number
+  debounceMs?: number
+  inputClass?: string
+  showValidationFeedback?: boolean
   onInput: (val: string) => void
   onClick: () => void
   onClear: () => void
diff --git a/app/components/pub/custom-ui/nav-header/header.vue b/app/components/pub/custom-ui/nav-header/header.vue
index 2f8ebb4e..8b81d3f3 100644
--- a/app/components/pub/custom-ui/nav-header/header.vue
+++ b/app/components/pub/custom-ui/nav-header/header.vue
@@ -1,18 +1,140 @@
 <script setup lang="ts">
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { refDebounced } from '@vueuse/core'
 
 const props = defineProps<{
   prep: HeaderPrep
-  refSearchNav: RefSearchNav
+  modelValue?: string
 }>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'search': [value: string]
+}>()
+
+// Internal search state
+const searchInput = ref(props.modelValue || '')
+const debouncedSearch = refDebounced(searchInput, props.prep.refSearchNav?.debounceMs || 500)
+
+// Computed search model for v-model
+const searchModel = computed({
+  get: () => searchInput.value,
+  set: (value: string) => {
+    searchInput.value = value
+    emit('update:modelValue', value)
+  },
+})
+
+// Watch for external changes to modelValue
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== searchInput.value) {
+    searchInput.value = newValue || ''
+  }
+})
+
+// Watch debounced search and emit search event
+watch(debouncedSearch, (newValue) => {
+  const minLength = props.prep.refSearchNav?.minLength || 3
+  // Only search if meets minimum length or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= minLength) {
+    emit('search', newValue)
+    props.prep.refSearchNav?.onInput(newValue)
+  }
+})
+
+// Handle clear search
+function clearSearch() {
+  searchModel.value = ''
+  props.prep.refSearchNav?.onClear()
+}
 </script>
 
 <template>
   <header>
-    <div class="flex items-center">
-      <div class="ml-3 text-lg font-bold text-gray-900">
-        <Icon :name="props.prep.icon!" class="mr-2 h-4 w-4 align-middle" />
-        {{ props.prep.title }}
+    <div class="flex items-center justify-between">
+      <div class="flex items-center">
+        <div class="ml-3 text-lg font-bold text-gray-900">
+          <Icon :name="props.prep.icon!" class="mr-2 size-4 md:size-6 align-middle" />
+          {{ props.prep.title }}
+        </div>
+      </div>
+
+      <div class="flex items-center">
+        <!-- Search Section -->
+        <div v-if="props.prep.refSearchNav" class="ml-3 text-lg text-gray-900 relative">
+          <div class="relative">
+            <Input
+              v-model="searchModel"
+              type="text"
+              class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
+              :class="[
+                props.prep.refSearchNav.inputClass,
+                {
+                  'border-amber-300 bg-amber-50': searchInput.length > 0 && searchInput.length < (props.prep.refSearchNav.minLength || 3),
+                  'border-green-300 bg-green-50': searchInput.length >= (props.prep.refSearchNav.minLength || 3),
+                },
+              ]"
+              :placeholder="props.prep.refSearchNav.placeholder || 'Cari (min. 3 karakter)...'"
+            />
+
+            <!-- Clear button -->
+            <button
+              v-if="searchInput.length > 0"
+              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+              type="button"
+              @click="clearSearch"
+            >
+              <Icon name="i-lucide-x" class="h-4 w-4" />
+            </button>
+
+            <!-- Validation feedback -->
+            <div
+              v-if="props.prep.refSearchNav.showValidationFeedback !== false && searchInput.length > 0 && searchInput.length < (props.prep.refSearchNav.minLength || 3)"
+              class="absolute -bottom-6 left-0 text-xs text-amber-600 whitespace-nowrap"
+            >
+              Minimal {{ props.prep.refSearchNav.minLength || 3 }} karakter untuk mencari
+            </div>
+          </div>
+        </div>
+
+        <!-- Add Button -->
+        <div v-if="props.prep.addNav" class="m-2 flex items-center">
+          <Button
+            class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm"
+            :class="props.prep.addNav.classVal"
+            :variant="(props.prep.addNav.variant as any) || 'default'"
+            @click="props.prep.addNav?.onClick"
+          >
+            <Icon :name="props.prep.addNav.icon || 'i-lucide-plus'" class="mr-2 h-4 w-4 align-middle" />
+            {{ props.prep.addNav.label }}
+          </Button>
+        </div>
+
+        <!-- Filter Button -->
+        <div v-if="props.prep.filterNav" class="m-2 flex items-center">
+          <Button
+            class="rounded-md border border-gray-300 px-4 py-2 sm:text-sm"
+            :class="props.prep.filterNav.classVal"
+            :variant="(props.prep.filterNav.variant as any) || 'default'"
+            @click="props.prep.filterNav?.onClick"
+          >
+            <Icon :name="props.prep.filterNav.icon || 'i-lucide-filter'" class="mr-2 h-4 w-4 align-middle" />
+            {{ props.prep.filterNav.label }}
+          </Button>
+        </div>
+
+        <!-- Print Button -->
+        <div v-if="props.prep.printNav" class="m-2 flex items-center">
+          <Button
+            class="rounded-md border border-gray-300 px-4 py-2 sm:text-sm"
+            :class="props.prep.printNav.classVal"
+            :variant="(props.prep.printNav.variant as any) || 'default'"
+            @click="props.prep.printNav?.onClick"
+          >
+            <Icon :name="props.prep.printNav.icon || 'i-lucide-printer'" class="mr-2 h-4 w-4 align-middle" />
+            {{ props.prep.printNav.label }}
+          </Button>
+        </div>
       </div>
     </div>
   </header>
diff --git a/app/components/pub/custom-ui/pagination/pagination.type.ts b/app/components/pub/custom-ui/pagination/pagination.type.ts
new file mode 100644
index 00000000..5c9d97f5
--- /dev/null
+++ b/app/components/pub/custom-ui/pagination/pagination.type.ts
@@ -0,0 +1,13 @@
+export interface PaginationMeta {
+  recordCount: number
+  // page : current pointer for viewing data
+  page: number
+  // pageSize: limit each page request
+  pageSize: number
+  // totalPage: recourdCount / pageSize
+  totalPage: number
+  // hasNext: check if there is next page
+  hasNext: boolean
+  // hasPrev: check if there is previous page
+  hasPrev: boolean
+}
diff --git a/app/components/pub/custom-ui/pagination/pagination.vue b/app/components/pub/custom-ui/pagination/pagination.vue
new file mode 100644
index 00000000..0c9f8596
--- /dev/null
+++ b/app/components/pub/custom-ui/pagination/pagination.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { PaginationMeta } from './pagination.type'
+import {
+  Pagination,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+} from '~/components/pub/ui/pagination'
+
+interface Props {
+  paginationMeta: PaginationMeta
+  onPageChange?: (page: number) => void
+  showInfo?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  onPageChange: undefined,
+  showInfo: true,
+})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  if (props.onPageChange) {
+    props.onPageChange(page)
+  }
+  emit('pageChange', page)
+}
+
+function handleFirst() {
+  if (props.paginationMeta.hasPrev) {
+    handlePageChange(1)
+  }
+}
+
+function handlePrev() {
+  if (props.paginationMeta.hasPrev) {
+    handlePageChange(props.paginationMeta.page - 1)
+  }
+}
+
+function handleNext() {
+  if (props.paginationMeta.hasNext) {
+    handlePageChange(props.paginationMeta.page + 1)
+  }
+}
+
+function handleLast() {
+  if (props.paginationMeta.hasNext) {
+    handlePageChange(props.paginationMeta.totalPage)
+  }
+}
+
+// Computed properties for formatted numbers
+const formattedRecordCount = computed(() => {
+  const count = props.paginationMeta.recordCount
+  if (count == null || count === undefined) return '0'
+  return Number(count).toLocaleString('id-ID')
+})
+
+const startRecord = computed(() => {
+  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
+})
+
+const endRecord = computed(() => {
+  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
+})
+</script>
+
+<template>
+  <div class="flex items-center justify-between px-2">
+    <!-- Info text -->
+    <div v-if="showInfo" class="flex-1 text-sm text-muted-foreground">
+      Menampilkan {{ startRecord }}
+      hingga {{ endRecord }}
+      dari {{ formattedRecordCount }} data
+    </div>
+    <div v-else class="flex-1"></div>
+
+    <!-- Pagination controls -->
+    <Pagination
+v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="paginationMeta.page"
+      :items-per-page="paginationMeta.pageSize" show-edges
+>
+      <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+        <PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
+        <PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />
+
+        <template v-for="(item, index) in items">
+          <PaginationListItem
+v-if="item.type === 'page'" :key="index" :value="item.value" as-child
+            @click="handlePageChange(item.value)"
+>
+            <Button class="w-9 h-9 p-0" :variant="item.value === page ? 'default' : 'outline'">
+              {{ item.value }}
+            </Button>
+          </PaginationListItem>
+          <PaginationEllipsis v-else :key="item.type" :index="index" />
+        </template>
+
+        <PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
+        <PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
+      </PaginationList>
+    </Pagination>
+  </div>
+</template>
diff --git a/app/pages/(features)/org-src/division/index.vue b/app/pages/(features)/org-src/division/index.vue
index 6e08748b..aa674b28 100644
--- a/app/pages/(features)/org-src/division/index.vue
+++ b/app/pages/(features)/org-src/division/index.vue
@@ -6,7 +6,7 @@ import Error from '~/components/pub/base/error/error.vue'
 definePageMeta({
   // middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'List Division',
+  title: 'Daftar Divisi',
   contentFrame: 'cf-full-width',
 })
 
@@ -34,7 +34,7 @@ const canRead = true
 <template>
   <div>
     <div v-if="canRead">
-      route division list
+      <FlowDivisionList />
     </div>
     <Error v-else :status-code="403" />
   </div>