diff --git a/app/components/app/procedure-room/multi-opt-picker.vue b/app/components/app/procedure-room/multi-opt-picker.vue
index 9a84a699..47dcd6da 100644
--- a/app/components/app/procedure-room/multi-opt-picker.vue
+++ b/app/components/app/procedure-room/multi-opt-picker.vue
@@ -1,9 +1,22 @@
+<script setup lang="ts">
+import type { ProcedureRoom } from '~/models/procedure-room';
+
+defineProps<{
+  items: ProcedureRoom[]
+}>()
+
+// const model = defineModel<ProcedureRoom[]>()
+</script>
+
 <template>
   <div class="mb-5">
     <div class="font-semibold text-sm 2xl:text-base mb-2">
       Daftar Ruang Tindakan
     </div>
-    <div class="-mx-1 [&_button]:mx-1 ">
+    <div class="grid grid-cols-3 2xl:grid-cols-4 gap-2 2xl:gap-2">
+      <div>
+        <Button v-for="item in items">{{ item.infra?.name }}</Button>
+      </div>
     </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/app/handlers/procedure-room.handler.ts b/app/handlers/procedure-room.handler.ts
new file mode 100644
index 00000000..49ee40ec
--- /dev/null
+++ b/app/handlers/procedure-room.handler.ts
@@ -0,0 +1,17 @@
+import { genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/procedure-room.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})