diff --git a/app/components/app/material/entry-form.vue b/app/components/app/material/entry-form.vue
new file mode 100644
index 00000000..e8729829
--- /dev/null
+++ b/app/components/app/material/entry-form.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+const items = [
+  { value: 'item1', label: 'Item 1' },
+  { value: 'item2', label: 'Item 2' },
+]
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup :column="1">
+            <Label>Kode</Label>
+            <Field>
+              <Input v-model="data.code" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="1">
+            <Label>Nama</Label>
+            <Field>
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="1">
+            <Label>Item</Label>
+            <Field>
+              <Select v-model="data.type" :items="items" placeholder="Pilih item" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="1">
+            <Label>Satuan</Label>
+            <Field>
+              <Select v-model="data.type" :items="items" placeholder="Pilih item" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/flow/material/entry.vue b/app/components/flow/material/entry.vue
new file mode 100644
index 00000000..6259785e
--- /dev/null
+++ b/app/components/flow/material/entry.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: '',
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/tools-equipment-src/material')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // do something
+  }
+}
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-paint-bucket" class="me-2" />
+    <span class="font-semibold">Tambah</span> BMHP
+  </div>
+  <AppMaterialEntryForm v-model="data" />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/material/add.vue b/app/pages/(features)/tools-equipment-src/material/add.vue
new file mode 100644
index 00000000..56803533
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/material/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah User',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <FlowMaterialEntry />
+  </div>
+  <Error v-else :status-code="403" />
+</template>