diff --git a/src/components/home/ProjectsNavigationWrapper.vue b/src/components/home/ProjectsNavigationWrapper.vue
index de74de2e6..00615be93 100644
--- a/src/components/home/ProjectsNavigationWrapper.vue
+++ b/src/components/home/ProjectsNavigationWrapper.vue
@@ -19,8 +19,7 @@ await projectStore.loadProjects()
 
 const projects = computed({
 	get() {
-		return projectStore.projectsArray
-			.filter(p => p.parentProjectId === 0 && !p.isArchived)
+		return projectStore.notArchivedRootProjects
 			.sort((a, b) => a.position - b.position)
 	},
 	set() {	}, // Vue will complain about the component not being writable - but we never need to write here. The setter is only here to silence the warning.
diff --git a/src/stores/projects.ts b/src/stores/projects.ts
index d5126dadc..cfe610ff5 100644
--- a/src/stores/projects.ts
+++ b/src/stores/projects.ts
@@ -29,6 +29,8 @@ export const useProjectStore = defineStore('project', () => {
 	// The projects are stored as an object which has the project ids as keys.
 	const projects = ref<ProjectState>({})
 	const projectsArray = computed(() => Object.values(projects.value))
+	const notArchivedRootProjects = computed(() => projectsArray.value
+		.filter(p => p.parentProjectId === 0 && !p.isArchived))
 	const hasProjects = computed(() => projects.value ? true : false)
 
 	const getProjectById = computed(() => {
@@ -200,6 +202,7 @@ export const useProjectStore = defineStore('project', () => {
 		isLoading: readonly(isLoading),
 		projects: readonly(projects),
 		projectsArray: readonly(projectsArray),
+		notArchivedRootProjects: readonly(notArchivedRootProjects),
 		hasProjects: readonly(hasProjects),
 
 		getProjectById,
@@ -235,7 +238,7 @@ export function useProject(projectId: MaybeRef<IProject['id']>) {
 	)
 
 	const projectStore = useProjectStore()
-	
+
 	const parentProject = ref<IProject | null>(null)
 	watch(
 		() => project.parentProjectId,