diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue
index 47a40eca950..a148ef3097b 100644
--- a/apps/workflowengine/src/components/Operation.vue
+++ b/apps/workflowengine/src/components/Operation.vue
@@ -4,11 +4,9 @@
 		<div class="actions__item__description">
 			<h3>{{ operation.name }}</h3>
 			<small>{{ operation.description }}</small>
-			<div>
-				<button v-if="colored">
-					{{ t('workflowengine', 'Add new flow') }}
-				</button>
-			</div>
+			<Button v-if="colored">
+				{{ t('workflowengine', 'Add new flow') }}
+			</Button>
 		</div>
 		<div class="actions__item_options">
 			<slot />
@@ -17,8 +15,13 @@
 </template>
 
 <script>
+import Button from '@nextcloud/vue/dist/Components/Button'
+
 export default {
 	name: 'Operation',
+	components: {
+		Button,
+	},
 	props: {
 		operation: {
 			type: Object,
diff --git a/apps/workflowengine/src/styles/operation.scss b/apps/workflowengine/src/styles/operation.scss
index 89c105d58fe..d936c64e2de 100644
--- a/apps/workflowengine/src/styles/operation.scss
+++ b/apps/workflowengine/src/styles/operation.scss
@@ -24,6 +24,7 @@
 	flex-grow: 1;
 	display: flex;
 	flex-direction: column;
+	align-items: center;
 }
 .actions__item_options {
 	width: 100%;