diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index 8cfe5a8902..86005dae26 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/apps/workflowengine/src/components/Check.vue
@@ -48,7 +48,7 @@
 			this.currentOption = Checks[this.check.class]
 			this.currentOperator = this.operators.find((operator) => operator.operator === this.check.operator)
 			this.$nextTick(() => {
-				this.$refs.checkSelector.$el.focus()
+				//this.$refs.checkSelector.$el.focus()
 			})
 		},
 		computed: {
diff --git a/apps/workflowengine/src/components/Event.vue b/apps/workflowengine/src/components/Event.vue
index caf5c7631b..7b39ea571f 100644
--- a/apps/workflowengine/src/components/Event.vue
+++ b/apps/workflowengine/src/components/Event.vue
@@ -28,12 +28,15 @@
 				required: true
 			}
 		},
+		mounted() {
+			this.updateEvent(this.currentEvent)
+		},
 		computed: {
 			currentEvent() {
-				if (typeof this.rule.event === 'undefined') {
+				if (!this.rule.event) {
 					return this.allEvents.length > 0 ? this.allEvents[0] : null
 				}
-				return this.allEvents.find(event => event.id === this.rule.event)
+				return this.allEvents.find(event => event.entity === this.rule.entity && event.event === this.rule.event)
 			},
 			allEvents() {
 				return this.operation.events.map((entityEventName) => {
@@ -45,7 +48,7 @@
 					return {
 						entity: entityId,
 						id: entityEventName,
-						event: eventName,
+						events: eventName,
 						name: Event.displayName,
 						icon: Entity.icon,
 						checks: Entity.checks,
@@ -58,8 +61,11 @@
 		},
 		methods: {
 			updateEvent(event) {
-				this.$set(this.rule, 'event', event.id)
-				this.$emit('update', this.rule)
+				if (this.rule.entity !== event.entity || this.rule.events !== '["' + event.event + '"]') {
+					this.$set(this.rule, 'entity', event.entity)
+					this.$set(this.rule, 'event', event.event)
+					this.$emit('update', this.rule)
+				}
 			}
 		}
 	}
diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue
index 3e5de3198c..30f26eb6ec 100644
--- a/apps/workflowengine/src/components/Operation.vue
+++ b/apps/workflowengine/src/components/Operation.vue
@@ -71,6 +71,12 @@
 		}
 	}
 
+	.actions__item:not(.colored) {
+		.icon {
+			filter: invert(1);
+		}
+	}
+
 	/* TODO: those should be provided by the backend, remove once ready */
 	.icon-block {
 		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' version='1.1' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='m10.203 2-8.203 8.203v11.594l8.203 8.203h11.594l8.203-8.203v-11.594l-8.203-8.203h-11.594zm11.097 5.3092 3.345 3.3448-5.346 5.346 5.346 5.346-3.299 3.299-5.346-5.346-5.346 5.346-3.2992-3.299 5.3462-5.346-5.3462-5.346 3.2992-3.2992 5.346 5.3462 5.3-5.3918z'/%3E%3C/svg%3E");
diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue
index 59d66e4309..d1f5a088f5 100644
--- a/apps/workflowengine/src/components/Rule.vue
+++ b/apps/workflowengine/src/components/Rule.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="section rule">
+	<div class="section rule" :style="{ borderLeftColor: operation.color }">
 		<!-- TODO: icon-confirm -->
 		<div class="trigger icon-confirm">
 			<p>
@@ -17,11 +17,11 @@
 		</div>
 		<div class="action">
 			<div class="buttons">
-				<button class="status-button icon" :class="ruleStatus.class" v-tooltip="ruleStatus.tooltip" @click="saveRule">{{ ruleStatus.title }}</button>
 				<Actions>
-					<ActionButton v-if="rule.id === -1" icon="icon-close" @click="$emit('cancel')">Cancel</ActionButton>
-					<ActionButton v-else icon="icon-delete" @click="deleteRule">Delete</ActionButton>
+					<ActionButton v-if="rule.id === -1" icon="icon-close" @click="$emit('cancel')">Cancel rule creation</ActionButton>
+					<ActionButton v-else icon="icon-close" @click="deleteRule">Remove rule</ActionButton>
 				</Actions>
+				<button class="status-button icon" :class="ruleStatus.class" v-tooltip="ruleStatus.tooltip" @click="saveRule">{{ ruleStatus.title }}</button>
 			</div>
 			<Operation :icon="operation.icon" :title="operation.title" :description="operation.description">
 				<component v-if="operation.options" :is="operation.options" v-model="operation.operation" @input="updateOperation" />
@@ -38,6 +38,7 @@
 	import { operationService } from '../services/Operation'
 	import axios from 'nextcloud-axios'
 	import confirmPassword from 'nextcloud-password-confirmation'
+	import {getApiUrl} from '../helpers/api';
 
 	export default {
 		name: 'Rule',
@@ -69,7 +70,7 @@
 			},
 			ruleStatus() {
 				if (this.error) {
-					return { title: 'Invalid', class: 'icon-close-white invalid', tooltip: { placement: 'bottom', show: true, content: escapeHTML(this.error.data) } }
+					return { title: 'Invalid', class: 'icon-close-white invalid', tooltip: { placement: 'bottom', show: true, content: escapeHTML(this.error) } }
 				}
 				if (!this.dirty || this.checking) {
 					return { title: 'Active', class: 'icon icon-checkmark' }
@@ -93,12 +94,13 @@
 					this.dirty = true
 				}
 				try {
-					let result = await axios.post(OC.generateUrl(`/apps/workflowengine/operations/test`), this.rule)
+					// TODO: add new verify endpoint
+					//let result = await axios.post(OC.generateUrl(`/apps/workflowengine/operations/test`), this.rule)
 					this.error = null
 					this.checking = false
 				} catch (e) {
-					console.error('Failed to update operation')
-					this.error = e.response
+					console.error('Failed to update operation', e)
+					this.error = e.response.ocs.meta.message
 					this.checking = false
 				}
 			},
@@ -107,23 +109,24 @@
 					await confirmPassword()
 					let result
 					if (this.rule.id === -1) {
-						result = await axios.post(OC.generateUrl(`/apps/workflowengine/operations`), this.rule)
-						this.rule.id = result.id
+						result = await axios.post(getApiUrl(''), {...this.rule, events: [this.rule.event]})
+						this.rule.id = result.data.ocs.data.id
 					} else {
-						result = await axios.put(OC.generateUrl(`/apps/workflowengine/operations/${this.rule.id}`), this.rule)
+						result = await axios.put(getApiUrl(`/${this.rule.id}`), {...this.rule, events: [this.rule.event]})
 					}
-					this.$emit('update', result.data)
+					this.$emit('update', this.rule)
 					this.dirty = false
 					this.error = null
 				} catch (e) {
-					console.error('Failed to update operation')
-					this.error = e.response
+					console.log(e.response.data.ocs.meta.message)
+					console.error('Failed to update operation', e)
+					this.error = e.response.data.ocs.meta.message
 				}
 			},
 			async deleteRule() {
 				try {
 					await confirmPassword()
-					await axios.delete(OC.generateUrl(`/apps/workflowengine/operations/${this.rule.id}`))
+					await axios.delete(getApiUrl(`/${this.rule.id}`))
 					this.$emit('delete')
 				} catch (e) {
 					console.error('Failed to delete operation')
@@ -164,17 +167,20 @@
 	.rule {
 		display: flex;
 		flex-wrap: wrap;
+		border-left: 5px solid #fff;
 
 		.trigger, .action {
 			flex-grow: 1;
 			min-height: 100px;
-			flex-basis: 50%;
+			max-width: 700px;
 		}
 		.action {
 			position: relative;
 			.buttons {
 				position: absolute;
 				right: 0;
+				display: flex;
+				z-index: 1;
 			}
 		}
 		.icon-confirm {
diff --git a/apps/workflowengine/src/components/Workflow.vue b/apps/workflowengine/src/components/Workflow.vue
index 918236ead8..0525722666 100644
--- a/apps/workflowengine/src/components/Workflow.vue
+++ b/apps/workflowengine/src/components/Workflow.vue
@@ -1,14 +1,15 @@
 <template>
-	<div>
+	<div id="workflowengine">
 		<div class="section">
 			<h2>{{ t('workflowengine', 'Workflows') }}</h2>
 
-			<div class="actions" v-if="!hasUnsavedRule">
+			<transition-group name="slide" tag="div" class="actions">
 				<Operation v-for="operation in getMainOperations" :key="operation.class"
 						   :icon="operation.icon" :title="operation.title" :description="operation.description" :color="operation.color"
 						   @click.native="createNewRule(operation)"></Operation>
-			</div>
-			<div class="actions__more" v-if="!hasUnsavedRule && hasMoreOperations">
+			</transition-group>
+
+			<div class="actions__more" v-if="hasMoreOperations">
 				<button class="icon" :class="showMoreOperations ? 'icon-triangle-n' : 'icon-triangle-s'"
 						@click="showMoreOperations=!showMoreOperations">
 					{{ showMoreOperations ? t('workflowengine', 'Show less') : t('workflowengine', 'Show more') }}
@@ -16,7 +17,7 @@
 			</div>
 		</div>
 
-		<transition-group name="slide">
+		<transition-group name="slide" v-if="rules.length > 0">
 			<Rule v-for="rule in rules" :key="rule.id" :rule="rule" @delete="removeRule(rule)" @cancel="removeRule(rule)" @update="updateRule"></Rule>
 		</transition-group>
 
@@ -28,6 +29,7 @@
 	import Operation from './Operation'
 	import { operationService } from '../services/Operation'
 	import axios from 'nextcloud-axios'
+	import { getApiUrl } from '../helpers/api';
 
 	const ACTION_LIMIT = 3
 
@@ -38,11 +40,12 @@
 			Rule
 		},
 		async mounted() {
-			const { data } = await axios.get(OC.generateUrl('/apps/workflowengine/operations'))
-			this.rules = data
+			const { data } = await axios.get(getApiUrl(''))
+			this.rules = Object.values(data.ocs.data).flat()
 		},
 		data() {
 			return {
+				scope: OCP.InitialState.loadState('workflowengine', 'scope'),
 				operations: operationService,
 				showMoreOperations: false,
 				rules: []
@@ -61,9 +64,6 @@
 			getMoreOperations() {
 				return Object.values(this.operations.getAll()).slice(ACTION_LIMIT)
 
-			},
-			hasUnsavedRule() {
-				return !!this.rules.find((rule) => rule.id === -1)
 			}
 		},
 		methods: {
@@ -82,6 +82,8 @@
 				this.rules.unshift({
 					id: -1,
 					class: operation.class,
+					entity: undefined,
+					event: undefined,
 					name: '', // unused in the new ui, there for legacy reasons
 					checks: [],
 					operation: operation.operation || ''
@@ -92,16 +94,19 @@
 </script>
 
 <style scoped lang="scss">
+	#workflowengine {
+		border-bottom: 1px solid var(--color-border);
+	}
 	.section {
 		max-width: 100vw;
 	}
 	.actions {
 		display: flex;
 		flex-wrap: wrap;
+		max-width: 900px;
 		.actions__item {
-			max-width: 300px;
-			min-width: 200px;
-			flex-basis: 200px;
+			max-width: 290px;
+			flex-basis: 250px;
 		}
 	}
 
@@ -145,5 +150,7 @@
 	.slide-enter, .slide-leave-to {
 		overflow: hidden;
 		max-height: 0;
+		padding-top: 0;
+		padding-bottom: 0;
 	}
 </style>
diff --git a/apps/workflowengine/src/services/Operation.js b/apps/workflowengine/src/services/Operation.js
index a24d97ef22..b2257b5545 100644
--- a/apps/workflowengine/src/services/Operation.js
+++ b/apps/workflowengine/src/services/Operation.js
@@ -65,11 +65,11 @@ operationService.registerOperation({
 	icon: 'icon-block',
 	color: 'var(--color-error)',
 	entites: [
-		'WorkflowEngine_Entity_File'
+		'OCA\\WorkflowEngine\\Entity\\File'
 	],
 	events: [
 		// TODO: this is probably handled differently since there is no regular event for files access control
-		'WorkflowEngine_Entity_File::postTouch'
+		'OCA\\WorkflowEngine\\Entity\\File::postTouch'
 	],
 	operation: 'deny'
 })