diff --git a/frontend/src/components/CustomActions.vue b/frontend/src/components/CustomActions.vue
index e28dd5d3..7a674053 100644
--- a/frontend/src/components/CustomActions.vue
+++ b/frontend/src/components/CustomActions.vue
@@ -1,16 +1,55 @@
 <template>
   <Button
-    v-for="action in actions"
+    v-for="action in normalActions"
     :label="action.label"
     @click="action.onClick()"
-  />
+  >
+    <template v-if="action.icon" #prefix>
+      <FeatherIcon :name="action.icon" class="h-4 w-4" />
+    </template>
+  </Button>
+  <Dropdown v-if="groupedActions.length" :options="groupedActions">
+    <Button>
+      <template #icon>
+        <FeatherIcon name="more-horizontal" class="h-4 w-4" />
+      </template>
+    </Button>
+  </Dropdown>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { Dropdown, FeatherIcon } from 'frappe-ui'
+
 const props = defineProps({
   actions: {
     type: Object,
     required: true,
   },
 })
+
+const groupedActions = computed(() => {
+  const _actions = props.actions.filter((action) => action.group)
+  const groupedActions = {}
+
+  for (const action of _actions) {
+    if (!groupedActions[action.group]) {
+      groupedActions[action.group] = []
+    }
+
+    groupedActions[action.group].push(action)
+  }
+
+  let _groupedActions = [
+    ...Object.keys(groupedActions).map((group) => ({
+      group,
+      items: groupedActions[group],
+    })),
+  ]
+  return _groupedActions
+})
+
+const normalActions = computed(() => {
+  return props.actions.filter((action) => !action.group)
+})
 </script>