diff --git a/cypress/e2e/list/list.spec.js b/cypress/e2e/list/list.spec.js
index 00f5b4f5..3a108a7d 100644
--- a/cypress/e2e/list/list.spec.js
+++ b/cypress/e2e/list/list.spec.js
@@ -98,4 +98,23 @@ describe('Lists', () => {
 		cy.location('pathname')
 			.should('equal', '/')
 	})
+	
+	it('Should archive a list', () => {
+		cy.visit(`/lists/${lists[0].id}`)
+		
+		cy.get('.list-title .dropdown')
+			.click()
+		cy.get('.list-title .dropdown .dropdown-menu .dropdown-item')
+			.contains('Archive')
+			.click()
+		cy.get('.modal-content')
+			.should('contain.text', 'Archive this list')
+		cy.get('.modal-content [data-cy=modalPrimary]')
+			.click()
+		
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
+			.should('not.contain', lists[0].title)
+		cy.get('main.app-content')
+			.should('contain.text', 'This list is archived. It is not possible to create new or edit tasks for it.')
+	})
 })
diff --git a/src/services/list.ts b/src/services/list.ts
index 02387003..dba90f95 100644
--- a/src/services/list.ts
+++ b/src/services/list.ts
@@ -26,11 +26,17 @@ export default class ListService extends AbstractService {
 	}
 
 	beforeUpdate(model) {
-		const taskService = new TaskService()
-		model.tasks = model.tasks.map(task => {
-			return taskService.beforeUpdate(task)
-		})
-		model.hexColor = colorFromHex(model.hexColor)
+		if(typeof model.tasks !== 'undefined') {
+			const taskService = new TaskService()
+			model.tasks = model.tasks.map(task => {
+				return taskService.beforeUpdate(task)
+			})
+		}
+		
+		if(typeof model.hexColor !== 'undefined') {
+			model.hexColor = colorFromHex(model.hexColor)
+		}
+		
 		return model
 	}
 
@@ -39,11 +45,6 @@ export default class ListService extends AbstractService {
 		return list
 	}
 
-	update(model) {
-		const newModel = { ... model }
-		return super.update(newModel)
-	}
-
 	async background(list) {
 		if (list.background === null) {
 			return ''
diff --git a/src/store/index.ts b/src/store/index.ts
index aff24495..c421cb03 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -60,7 +60,7 @@ export const store = createStore({
 			state.loadingModule = module
 		},
 		[CURRENT_LIST](state, currentList) {
-			// Server updates don't return the right. Therefore the right is reset after updating the list which is
+			// Server updates don't return the right. Therefore, the right is reset after updating the list which is
 			// confusing because all the buttons will disappear in that case. To prevent this, we're keeping the right
 			// when updating the list in global state.
 			if (typeof state.currentList.maxRight !== 'undefined' && (typeof currentList.maxRight === 'undefined' || currentList.maxRight === null)) {
diff --git a/src/views/list/settings/archive.vue b/src/views/list/settings/archive.vue
index 92e24d0f..b752448f 100644
--- a/src/views/list/settings/archive.vue
+++ b/src/views/list/settings/archive.vue
@@ -17,13 +17,11 @@ export default defineComponent({name: 'list-setting-archive'})
 </script>
 
 <script setup lang="ts">
-import {computed, shallowReactive} from 'vue'
+import {computed} from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
-import ListService from '@/services/list'
-
 import { success } from '@/message'
 import { useTitle } from '@/composables/useTitle'
 
@@ -35,16 +33,13 @@ const route = useRoute()
 const list = computed(() => store.getters['lists/getListById'](route.params.listId))
 useTitle(() => t('list.archive.title', {list: list.value.title}))
 
-const listService = shallowReactive(new ListService())
-
 async function archiveList() {
 	try {
-		const newList = await listService.update({
-			...list,
+		const newList = await store.dispatch('lists/updateList', {
+			...list.value,
 			isArchived: !list.value.isArchived,
 		})
 		store.commit('currentList', newList)
-		store.commit('namespaces/setListInNamespaceById', newList)
 		success({message: t('list.archive.success')})
 	} finally {
 		router.back()