diff --git a/src/components/AccountSettings.vue b/src/components/AccountSettings.vue
index 8bed6e0838..d4a61327f6 100644
--- a/src/components/AccountSettings.vue
+++ b/src/components/AccountSettings.vue
@@ -111,7 +111,7 @@ import CertificateSettings from './CertificateSettings.vue'
 import SearchSettings from './SearchSettings.vue'
 import TrashRetentionSettings from './TrashRetentionSettings.vue'
 import logger from '../logger.js'
-import MailFilters from './MailFilters.vue'
+import MailFilters from './mailFilter/MailFilters.vue'
 
 export default {
 	name: 'AccountSettings',
diff --git a/src/components/MailFilterTest.vue b/src/components/MailFilterTest.vue
deleted file mode 100644
index 9ab67b457a..0000000000
--- a/src/components/MailFilterTest.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<div class="mail-filter-rows">
-		<div class="mail-filter-row">
-			<div class="mail-filter-column">
-				<NcSelect id="mail-filter-field"
-					:value="test.field"
-					:required="true"
-					:label-outside="true"
-					:options="['subject', 'to', 'from']"
-					@input="updateTest({ field: $event })" />
-			</div>
-			<div class="mail-filter-column">
-				<NcSelect id="mail-filter-operator"
-					:value="test.operator"
-					:required="true"
-					:label-outside="true"
-					:options="['is', 'contains', 'matches']"
-					@input="updateTest({ operator: $event })" />
-			</div>
-			<div class="mail-filter-column">
-				<NcButton aria-label="Delete action"
-					type="tertiary-no-background"
-					@click="deleteTest">
-					<template #icon>
-						<DeleteIcon :size="20" />
-					</template>
-					{{ t('mail', 'Delete test') }}
-				</NcButton>
-			</div>
-		</div>
-		<div class="mail-filter-row">
-			<div class="mail-filter-column values-list">
-				<div v-for="(value, index) in test.values" :key="index" class="values-list-item">
-					<NcChip :text="value"
-						@close="deleteValue(index)" />
-					<span v-if="(index + 1) < test.values.length">{{ t('mail', 'or') }}</span>
-				</div>
-			</div>
-		</div>
-		<div class="mail-filter-row">
-			<div class="mail-filter-column">
-				<NcTextField :value.sync="inputValue"
-					:label="t('mail', 'Value')" />
-			</div>
-			<div class="mail-filter-column">
-				<NcButton aria-label="Add value"
-					type="tertiary-no-background"
-					@click="addValue">
-					<template #icon>
-						<ReceiptTextPlusIcon :size="20" />
-					</template>
-					{{ t('mail', 'Add value') }}
-				</NcButton>
-			</div>
-		</div>
-	</div>
-</template>
-<script>
-import { NcActionButton, NcActions, NcButton, NcLoadingIcon, NcSelect, NcTextField } from '@nextcloud/vue'
-import DeleteIcon from 'vue-material-design-icons/Delete.vue'
-import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
-import CheckIcon from 'vue-material-design-icons/Check.vue'
-import ReceiptTextPlusIcon from 'vue-material-design-icons/ReceiptTextPlus.vue'
-
-export default {
-	name: 'MailFilterTest',
-	components: {
-		NcLoadingIcon,
-		NcActions,
-		NcActionButton,
-		NcButton,
-		NcTextField,
-		NcSelect,
-		DeleteIcon,
-		NcChip,
-		CheckIcon,
-		ReceiptTextPlusIcon,
-	},
-	props: {
-		test: {
-			type: Object,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			inputValue: '',
-		}
-	},
-	methods: {
-		updateTest(properties) {
-			this.$emit('update-test', { ...this.test, ...properties })
-		},
-		deleteTest() {
-			this.$emit('delete-test', this.test)
-		},
-		addValue() {
-			if (this.inputValue.length > 0) {
-				const values = this.test.values
-				values.push(this.inputValue)
-				values.sort((a, b) => a.localeCompare(b))
-				this.updateTest({ values })
-			}
-			this.inputValue = ''
-		},
-		deleteValue(index) {
-			const values = this.test.values
-			values.splice(index, 1)
-			this.updateTest({ values })
-		},
-	},
-}
-</script>
-<style lang="scss" scoped>
-.mail-filter-rows {
-	margin-bottom: calc(var(--default-grid-baseline) * 4);
-}
-.mail-filter-row {
-	display: flex;
-	gap: var(--default-grid-baseline);
-	align-items: baseline;
-}
-
-.values-list {
-	display: flex;
-	gap: var(--default-grid-baseline);
-	flex-wrap: wrap;
-}
-
-.values-list-item {
-	display: flex;
-	gap: var(--default-grid-baseline);
-}
-
-.mail-filter-column label {
-	display: block;
-}
-
-.mail-filter-values {
-	display: flex;
-}
-
-.form-group {
-	margin: calc(var(--default-grid-baseline) * 4) 0;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-}
-
-.external-label {
-	display: flex;
-	width: 100%;
-	margin-top: 1rem;
-}
-
-.external-label label {
-	padding-top: 7px;
-	padding-right: 14px;
-	white-space: nowrap;
-}
-</style>
diff --git a/src/components/MailFilterAction.vue b/src/components/mailFilter/MailFilterAction.vue
similarity index 80%
rename from src/components/MailFilterAction.vue
rename to src/components/mailFilter/MailFilterAction.vue
index b4ebf1f2f0..58f5bda10e 100644
--- a/src/components/MailFilterAction.vue
+++ b/src/components/mailFilter/MailFilterAction.vue
@@ -23,6 +23,7 @@
 			<NcButton aria-label="Delete action"
 				type="tertiary-no-background"
 				@click="deleteAction">
+				{{ t('mail', 'Delete action') }}
 				<template #icon>
 					<DeleteIcon :size="20" />
 				</template>
@@ -77,12 +78,6 @@ export default {
 		},
 	},
 	methods: {
-		// changeActionType(value) {
-		// 	this.changeAction({
-		// 		id: this.action.id,
-		// 		type: value,
-		// 	})
-		// },
 		updateAction(properties) {
 			this.$emit('update-action', { ...this.action, ...properties })
 		},
@@ -98,27 +93,4 @@ export default {
 	gap: 5px;
 	align-items: baseline;
 }
-//
-//.mail-filter-column label {
-//	display: block;
-//}
-//
-//.form-group {
-//	margin: calc(var(--default-grid-baseline) * 4) 0;
-//	display: flex;
-//	flex-direction: column;
-//	align-items: flex-start;
-//}
-//
-//.external-label {
-//	display: flex;
-//	width: 100%;
-//	margin-top: 1rem;
-//}
-//
-//.external-label label {
-//	padding-top: 7px;
-//	padding-right: 14px;
-//	white-space: nowrap;
-//}
 </style>
diff --git a/src/components/MailFilterActionAddflag.vue b/src/components/mailFilter/MailFilterActionAddflag.vue
similarity index 100%
rename from src/components/MailFilterActionAddflag.vue
rename to src/components/mailFilter/MailFilterActionAddflag.vue
diff --git a/src/components/MailFilterActionFileinto.vue b/src/components/mailFilter/MailFilterActionFileinto.vue
similarity index 94%
rename from src/components/MailFilterActionFileinto.vue
rename to src/components/mailFilter/MailFilterActionFileinto.vue
index b358edfb02..36609cdc18 100644
--- a/src/components/MailFilterActionFileinto.vue
+++ b/src/components/mailFilter/MailFilterActionFileinto.vue
@@ -11,7 +11,7 @@
 <script>
 
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
-import { mailboxHasRights } from '../util/acl.js'
+import { mailboxHasRights } from '../../util/acl.js'
 export default {
 	name: 'MailFilterActionFileinto',
 	components: {
diff --git a/src/components/MailFilterDeleteModal.vue b/src/components/mailFilter/MailFilterDeleteModal.vue
similarity index 100%
rename from src/components/MailFilterDeleteModal.vue
rename to src/components/mailFilter/MailFilterDeleteModal.vue
diff --git a/src/components/MailFilterOperator.vue b/src/components/mailFilter/MailFilterOperator.vue
similarity index 71%
rename from src/components/MailFilterOperator.vue
rename to src/components/mailFilter/MailFilterOperator.vue
index fc66074948..34af5ee0da 100644
--- a/src/components/MailFilterOperator.vue
+++ b/src/components/mailFilter/MailFilterOperator.vue
@@ -8,24 +8,20 @@
 			<p>{{ t('mail', 'Operator') }}</p>
 		</div>
 		<div class="mail-filter-row">
-			<NcCheckboxRadioSwitch :checked.sync="filter.operator"
+			<NcCheckboxRadioSwitch :checked="filter.operator"
 				value="allof"
 				name="sharing_permission_radio"
-				type="radio">
+				type="radio"
+				@update:checked="updateFilter('allof')">
 				{{ t('mail', 'allof') }}
 			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch :checked.sync="filter.operator"
+			<NcCheckboxRadioSwitch :checked="filter.operator"
 				value="anyof"
 				name="sharing_permission_radio"
-				type="radio">
+				type="radio"
+				@update:checked="updateFilter('anyof')">
 				{{ t('mail', 'anyof') }}
 			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch :checked.sync="filter.operator"
-				value="true"
-				name="sharing_permission_radio"
-				type="radio">
-				{{ t('mail', 'true') }}
-			</NcCheckboxRadioSwitch>
 		</div>
 	</div>
 </template>
@@ -43,6 +39,11 @@ export default {
 			required: true,
 		},
 	},
+	methods: {
+		updateFilter(operator) {
+			this.$emit('update:operator', operator)
+		},
+	},
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/mailFilter/MailFilterTest.vue b/src/components/mailFilter/MailFilterTest.vue
new file mode 100644
index 0000000000..bd4c2844f3
--- /dev/null
+++ b/src/components/mailFilter/MailFilterTest.vue
@@ -0,0 +1,125 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="mail-filter-rows">
+		<div class="mail-filter-rows__row">
+			<div class="mail-filter-rows__row__column">
+				<NcSelect id="mail-filter-field"
+					input-label="filed"
+					:value="test.field"
+					:required="true"
+					:label-outside="true"
+					:options="['subject', 'to', 'from']"
+					@input="updateTest({ field: $event })" />
+			</div>
+			<div class="mail-filter-rows__row__column">
+				<NcSelect id="mail-filter-operator"
+					input-label="operator"
+					:value="test.operator"
+					:required="true"
+					:label-outside="true"
+					:options="['is', 'contains', 'matches']"
+					@input="updateTest({ operator: $event })" />
+			</div>
+			<div class="mail-filter-rows__row__column">
+				<NcButton aria-label="Delete action"
+					type="tertiary-no-background"
+					@click="deleteTest">
+					<template #icon>
+						<DeleteIcon :size="20" />
+					</template>
+					{{ t('mail', 'Delete test') }}
+				</NcButton>
+			</div>
+		</div>
+		<div class="mail-filter-rows__row">
+			<NcSelect id="mail-filter-value"
+				v-model="localValues"
+				input-label="value"
+				class="mail-filter-rows__row__select"
+				:multiple="true"
+				:wrap="true"
+				:close-on-select="false"
+				:taggable="true"
+				@option:selected="updateTest({ values: localValues })"
+				@option:deselected="updateTest({ values: localValues })" />
+		</div>
+		<hr class="solid">
+	</div>
+</template>
+<script>
+import { NcActionButton, NcActions, NcButton, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
+import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+
+export default {
+	name: 'MailFilterTest',
+	components: {
+		NcLoadingIcon,
+		NcActions,
+		NcActionButton,
+		NcButton,
+		NcSelect,
+		DeleteIcon,
+	},
+	props: {
+		test: {
+			type: Object,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			inputValue: '',
+			localValues: [],
+		}
+	},
+	mounted() {
+		this.localValues = [...this.test.values]
+	},
+	methods: {
+		updateTest(properties) {
+			this.$emit('update-test', { ...this.test, ...properties })
+		},
+		deleteTest() {
+			this.$emit('delete-test', this.test)
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+.solid {
+	margin: calc(var(--default-grid-baseline) * 4) 0 0 0;
+}
+.mail-filter-rows {
+	margin-bottom: calc(var(--default-grid-baseline) * 4);
+	&__row {
+		display: flex;
+		gap: var(--default-grid-baseline);
+		align-items: baseline;
+		&__column {
+			display: block;
+			flex-grow: 1;
+		}
+		&__column *{
+			width: 100%;
+		}
+		&__select {
+			max-width: 100% !important;
+			width: 100%;
+		}
+
+	}
+}
+
+.values-list {
+	display: flex;
+	gap: var(--default-grid-baseline);
+	flex-wrap: wrap;
+	&__item {
+		display: flex;
+		gap: var(--default-grid-baseline);
+	}
+}
+</style>
diff --git a/src/components/MailFilterUpdateModal.vue b/src/components/mailFilter/MailFilterUpdateModal.vue
similarity index 82%
rename from src/components/MailFilterUpdateModal.vue
rename to src/components/mailFilter/MailFilterUpdateModal.vue
index 4c3f0a1565..63d64b6b64 100644
--- a/src/components/MailFilterUpdateModal.vue
+++ b/src/components/mailFilter/MailFilterUpdateModal.vue
@@ -3,11 +3,11 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal size="full"
+	<NcModal size="large"
 		:close-on-click-outside="false"
-		name="Name inside modal"
+		:name="t('mail','Update mail filter')"
 		@close="closeModal">
-		<div class="modal__content">
+		<form class="modal__content">
 			<div class="filter-name">
 				<NcTextField :value.sync="clone.name"
 					:label="t('mail', 'Filter name')"
@@ -15,7 +15,7 @@
 			</div>
 
 			<div class="filter-operator">
-				<MailFilterOperator :filter="clone" />
+				<MailFilterOperator :filter="clone" @update:operator="updateOperator" />
 			</div>
 
 			<div class="filter-tests">
@@ -49,37 +49,33 @@
 				</NcButton>
 			</div>
 
-			<div class="filter-priority">
-				<NcTextField :value.sync="clone.priority"
-					type="number"
-					:label="t('mail', 'Priority')"
-					:required="true" />
-			</div>
+			<NcTextField :value.sync="clone.priority"
+				type="number"
+				:label="t('mail', 'Priority')"
+				:required="true" />
 
-			<div>
-				<NcCheckboxRadioSwitch :checked.sync="clone.enable" type="switch">
-					{{ t('mail', 'Enable filter') }}
-				</NcCheckboxRadioSwitch>
-			</div>
+			<NcCheckboxRadioSwitch :checked.sync="clone.enable" type="switch">
+				{{ t('mail', 'Enable filter') }}
+			</NcCheckboxRadioSwitch>
 
 			<NcButton type="primary"
-				@click="updateFilter">
+				native-type="submit"
+				@click.prevent.stop="updateFilter">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="16" />
 					<IconCheck v-else :size="16" />
 				</template>
 				{{ t('mail', 'Save filter') }}
 			</NcButton>
-		</div>
+		</form>
 	</NcModal>
 </template>
 <script>
-import { NcButton, NcCheckboxRadioSwitch, NcModal, NcSelect, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcModal, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
 import MailFilterTest from './MailFilterTest.vue'
 import MailFilterOperator from './MailFilterOperator.vue'
-import { randomId } from '../util/randomId'
+import { randomId } from '../../util/randomId.js'
 import MailFilterAction from './MailFilterAction.vue'
-import logger from '../logger'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 
 export default {
@@ -93,7 +89,6 @@ export default {
 		NcCheckboxRadioSwitch,
 		NcLoadingIcon,
 		NcModal,
-		NcSelect,
 		NcTextField,
 	},
 	props: {
@@ -133,6 +128,9 @@ export default {
 			const index = this.clone.actions.findIndex((item) => item.id === action.id)
 			this.$set(this.clone.actions, index, action)
 		},
+		updateOperator(operator) {
+			this.clone.operator = operator
+		},
 		deleteAction(action) {
 			this.clone.actions = this.clone.actions.filter((item) => item.id !== action.id)
 		},
diff --git a/src/components/MailFilters.vue b/src/components/mailFilter/MailFilters.vue
similarity index 87%
rename from src/components/MailFilters.vue
rename to src/components/mailFilter/MailFilters.vue
index 08e0f8498b..43083ca539 100644
--- a/src/components/MailFilters.vue
+++ b/src/components/mailFilter/MailFilters.vue
@@ -25,7 +25,7 @@
 			</NcListItem>
 		</ul>
 		<NcButton class="app-settings-button"
-			type="secondary"
+			type="primary"
 			:aria-label="t('mail', 'New filter')"
 			@click.prevent.stop="createFilter">
 			{{ t('mail', 'New filter') }}
@@ -45,25 +45,21 @@
 </template>
 
 <script>
-import { NcButton as ButtonVue, NcLoadingIcon as IconLoading, NcActionButton, NcListItem, NcButton } from '@nextcloud/vue'
-import IconCheck from 'vue-material-design-icons/Check.vue'
-import IconLock from 'vue-material-design-icons/Lock.vue'
+import { NcLoadingIcon as IconLoading, NcActionButton, NcListItem, NcButton } from '@nextcloud/vue'
 import MailFilterUpdateModal from './MailFilterUpdateModal.vue'
-import { randomId } from '../util/randomId'
-import logger from '../logger'
+import { randomId } from '../../util/randomId.js'
+import logger from '../../logger.js'
 import { mapStores } from 'pinia'
-import useMailFilterStore from '../store/mailFilterStore'
+import useMailFilterStore from '../../store/mailFilterStore.js'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import MailFilterDeleteModal from './MailFilterDeleteModal.vue'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 
 export default {
 	name: 'MailFilters',
 	components: {
-		IconLock,
 		NcButton,
-		ButtonVue,
 		IconLoading,
-		IconCheck,
 		NcListItem,
 		NcActionButton,
 		MailFilterUpdateModal,
@@ -119,13 +115,14 @@ export default {
 			this.currentFilter = {
 				id: randomId(),
 				name: t('mail', 'New filter'),
-				enable: false,
+				enable: true,
 				operator: 'allof',
 				tests: [],
 				actions: [],
 				priority,
 			}
 			this.showUpdateModal = true
+			this.loading = false
 		},
 		openUpdateModal(filter) {
 			this.currentFilter = filter
@@ -138,7 +135,6 @@ export default {
 		},
 		async updateFilter(filter) {
 			this.loading = true
-
 			this.mailFilterStore.$patch((state) => {
 				const index = state.filters.findIndex((item) => item.id === filter.id)
 				logger.debug('update filter', { filter, index })
@@ -153,14 +149,16 @@ export default {
 			})
 
 			try {
-				await this.mailFilterStore.update(this.account.id)
+				await this.mailFilterStore.update(this.account.id).then(() => {
+					showSuccess(t('mail', 'Filter saved'))
+				})
+				await this.$store.dispatch('fetchActiveSieveScript', { accountId: this.account.id })
 			} catch (e) {
-				// TODO error toast
+				logger.error(e)
+				showError(t('mail', 'Could not save filter'))
 			} finally {
 				this.loading = false
 			}
-
-			await this.$store.dispatch('fetchActiveSieveScript', { accountId: this.account.id })
 		},
 		async deleteFilter(filter) {
 			this.loading = true
diff --git a/src/service/MailFilterService.js b/src/service/MailFilterService.js
index 5204196e7b..542fbab3fd 100644
--- a/src/service/MailFilterService.js
+++ b/src/service/MailFilterService.js
@@ -4,25 +4,17 @@
  */
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
-import { convertAxiosError } from '../errors/convert.js'
-import { randomId } from '../util/randomId'
 
 export async function getFilters(accountId) {
 	const url = generateUrl('/apps/mail/api/mailfilter/{accountId}', { accountId })
 
-	try {
-		return (await axios.get(url)).data
-	} catch (error) {
-		throw convertAxiosError(error)
-	}
+	const { data } = await axios.get(url)
+	return data.data
 }
 
 export async function updateFilters(accountId, filters) {
 	const url = generateUrl('/apps/mail/api/mailfilter/{accountId}', { accountId })
 
-	try {
-		return (await axios.put(url, { filters })).data
-	} catch (error) {
-		throw convertAxiosError(error)
-	}
+	const { data } = await axios.put(url, { filters })
+	return data.data
 }
diff --git a/src/store/mailFilterStore.js b/src/store/mailFilterStore.js
index b93f7a1399..447dc25b66 100644
--- a/src/store/mailFilterStore.js
+++ b/src/store/mailFilterStore.js
@@ -4,9 +4,8 @@
  */
 
 import { defineStore } from 'pinia'
-import * as OutboxService from '../service/OutboxService'
-import * as MailFilterService from '../service/MailFilterService'
-import { randomId } from '../util/randomId'
+import * as MailFilterService from '../service/MailFilterService.js'
+import { randomId } from '../util/randomId.js'
 
 export default defineStore('mailFilter', {
 	state: () => {
@@ -18,24 +17,26 @@ export default defineStore('mailFilter', {
 		async fetch(accountId) {
 			await this.$patch(async (state) => {
 				const filters = await MailFilterService.getFilters(accountId)
-				state.filters = filters.map((filter) => {
-					filter.id = randomId()
-					filter.tests.map((test) => {
-						test.id = randomId()
-						if (!test.hasOwnProperty('values')) {
-							test.values = [test.value]
+				if (filters) {
+					state.filters = filters.map((filter) => {
+						filter.id = randomId()
+						filter.tests.map((test) => {
+							test.id = randomId()
+							if (!test.hasOwnProperty('values')) {
+								test.values = [test.value]
+							}
+							return test
+						})
+						filter.actions.map((action) => {
+							action.id = randomId()
+							return action
+						})
+						if (!filter.hasOwnProperty('priority')) {
+							filter.priority = 0
 						}
-						return test
+						return filter
 					})
-					filter.actions.map((action) => {
-						action.id = randomId()
-						return action
-					})
-					if (!filter.hasOwnProperty('priority')) {
-						filter.priority = 0
-					}
-					return filter
-				})
+				}
 			})
 		},
 		async update(accountId) {