diff --git a/cypress/integration/list/list-view-list.spec.js b/cypress/integration/list/list-view-list.spec.js
index e1a4a0f69..fdb9dd178 100644
--- a/cypress/integration/list/list-view-list.spec.js
+++ b/cypress/integration/list/list-view-list.spec.js
@@ -51,7 +51,7 @@ describe('List View List', () => {
 		})
 		cy.visit(`/lists/${lists[1].id}/`)
 
-		cy.get('.list-title a.icon')
+		cy.get('.list-title .icon')
 			.should('not.exist')
 		cy.get('input.input[placeholder="Add a new task..."')
 			.should('not.exist')
diff --git a/cypress/integration/list/list.spec.js b/cypress/integration/list/list.spec.js
index 00f5b4f5e..b84ce3b01 100644
--- a/cypress/integration/list/list.spec.js
+++ b/cypress/integration/list/list.spec.js
@@ -52,9 +52,9 @@ describe('Lists', () => {
 		cy.get('.list-title h1')
 			.should('contain', 'First List')
 
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
 			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Edit')
 			.click()
 		cy.get('#title')
@@ -68,7 +68,7 @@ describe('Lists', () => {
 		cy.get('.list-title h1')
 			.should('contain', newListName)
 			.should('not.contain', lists[0].title)
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child')
 			.should('contain', newListName)
 			.should('not.contain', lists[0].title)
 		cy.visit('/')
@@ -80,9 +80,9 @@ describe('Lists', () => {
 	it('Should remove a list', () => {
 		cy.visit(`/lists/${lists[0].id}`)
 
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
 			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Delete')
 			.click()
 		cy.url()
@@ -93,7 +93,7 @@ describe('Lists', () => {
 
 		cy.get('.global-notification')
 			.should('contain', 'Success')
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
 			.should('not.contain', lists[0].title)
 		cy.location('pathname')
 			.should('equal', '/')
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index dbf3e2b61..6a2ecfa4e 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -51,10 +51,7 @@
 		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
 			<template v-for="(n, nk) in namespaces" :key="n.id">
 				<div class="namespace-title" :class="{'has-menu': n.id > 0}">
-					<!-- FIXME we shouldn't wrap with the clickable area and have another one inside aswell
-						@click should only be used on interactive elements
-					-->
-					<span
+					<BaseButton
 						@click="toggleLists(n.id)"
 						class="menu-label"
 						v-tooltip="namespaceTitles[nk]"
@@ -64,32 +61,25 @@
 							:style="{ backgroundColor: n.hexColor }"
 							class="color-bubble"
 						/>
-						<span class="name">
-							{{ namespaceTitles[nk] }}
-						</span>
-						<BaseButton
+						<span class="name">{{ namespaceTitles[nk] }}</span>
+						<div
 							class="icon is-small toggle-lists-icon pl-2"
 							:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
-							@click="toggleLists(n.id)"
 						>
 							<icon icon="chevron-down"/>
-						</BaseButton>
+						</div>
 						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
 							({{ namespaceListsCount[nk] }})
 						</span>
-					</span>
+					</BaseButton>
 					<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
 				</div>
-				<div
-					v-if="listsVisible[n.id] ?? true"
-					:key="n.id + 'child'"
-					class="more-container"
-				>
 					<!--
 						NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
 						triggered by the change needs to have access to the current namespace
 					-->
 					<draggable
+						v-if="listsVisible[n.id] ?? true"
 						v-bind="dragOptions"
 						:modelValue="activeLists[nk]"
 						@update:modelValue="(lists) => updateActiveLists(n, lists)"
@@ -114,46 +104,36 @@
 					>
 						<template #item="{element: l}">
 							<li
-								class="loader-container is-loading-small"
+								class="list-menu loader-container is-loading-small"
 								:class="{'is-loading': listUpdating[l.id]}"
 							>
-								<router-link
+								<BaseButton
 									:to="{ name: 'list.index', params: { listId: l.id} }"
-									v-slot="{ href, navigate, isActive }"
-									custom
+									class="list-menu-link"
+									:class="{'router-link-exact-active': currentList.id === l.id}"
 								>
-									<a
-										@click="navigate"
-										:href="href"
-										class="list-menu-link"
-										:class="{'router-link-exact-active': isActive || currentList?.id === l.id}"
-									>
-										<span class="icon handle">
-											<icon icon="grip-lines"/>
-										</span>
-										<span
-											:style="{ backgroundColor: l.hexColor }"
-											class="color-bubble"
-											v-if="l.hexColor !== ''">
-										</span>
-										<span class="list-menu-title">
-											{{ getListTitle(l) }}
-										</span>
-										<!-- FIXME: we shouldn't use a button inside a link This can be unwrapped by using CSS -->
-										<BaseButton
-											:class="{'is-favorite': l.isFavorite}"
-											@click.prevent.stop="toggleFavoriteList(l)"
-											class="favorite">
-											<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
-										</BaseButton>
-									</a>
-								</router-link>
+									<span class="icon handle">
+										<icon icon="grip-lines"/>
+									</span>
+									<span
+										:style="{ backgroundColor: l.hexColor }"
+										class="color-bubble"
+										v-if="l.hexColor !== ''">
+									</span>
+									<span class="list-menu-title">{{ getListTitle(l) }}</span>
+								</BaseButton>
+								<BaseButton
+									class="favorite"
+									:class="{'is-favorite': l.isFavorite}"
+									@click="toggleFavoriteList(l)"
+								>
+									<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
+								</BaseButton>
 								<list-settings-dropdown :list="l" v-if="l.id > 0"/>
 								<span class="list-setting-spacer" v-else></span>
 							</li>
 						</template>
 					</draggable>
-				</div>
 			</template>
 		</nav>
 		<PoweredByLink/>
@@ -339,7 +319,7 @@ $vikunja-nav-selected-width: 0.4rem;
 		}
 
 		.menu-label,
-		.menu-list span.list-menu-link,
+		.menu-list .list-menu-link,
 		.menu-list a {
 			display: flex;
 			align-items: center;
@@ -357,28 +337,21 @@ $vikunja-nav-selected-width: 0.4rem;
 				flex: 0 0 12px;
 			}
 
-			.favorite {
-				margin-left: .25rem;
-				transition: opacity $transition, color $transition;
-				opacity: 0;
+		}
+		.favorite {
+			margin-left: .25rem;
+			transition: opacity $transition, color $transition;
+			opacity: 0;
 
-				&:hover {
-					color: var(--warning);
-				}
-
-				&.is-favorite {
-					opacity: 1;
-					color: var(--warning);
-				}
+			&:hover,
+			&.is-favorite {
+				color: var(--warning);
 			}
+		}
 
-			&:hover .favorite {
-				opacity: 1;
-			}
-
-			&:hover {
-				background: transparent;
-			}
+		.favorite.is-favorite,
+		.list-menu:hover .favorite {
+			opacity: 1;
 		}
 
 		.menu-label {
@@ -397,6 +370,8 @@ $vikunja-nav-selected-width: 0.4rem;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
+			color: $vikunja-nav-color;
+			padding: 0 .25rem;
 
 			.menu-label {
 				margin-bottom: 0;
@@ -415,11 +390,6 @@ $vikunja-nav-selected-width: 0.4rem;
 				}
 			}
 
-			a:not(.dropdown-item) {
-				color: $vikunja-nav-color;
-				padding: 0 .25rem;
-			}
-
 			:deep(.dropdown-trigger) {
 				padding: .5rem;
 				cursor: pointer;
@@ -449,7 +419,7 @@ $vikunja-nav-selected-width: 0.4rem;
 
 		.menu-label,
 		.nsettings,
-		.menu-list span.list-menu-link,
+		.menu-list .list-menu-link,
 		.menu-list a {
 			color: $vikunja-nav-color;
 		}
@@ -488,7 +458,11 @@ $vikunja-nav-selected-width: 0.4rem;
 				}
 			}
 
-			span.list-menu-link, li > a {
+			a:hover {
+				background: transparent;
+			}
+
+			.list-menu-link, li > a {
 				padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
 				transition: all 0.2s ease;
 
@@ -560,7 +534,7 @@ $vikunja-nav-selected-width: 0.4rem;
 				font-family: $vikunja-font;
 			}
 
-			span.list-menu-link, li > a {
+			.list-menu-link, li > a {
 				padding-left: 2rem;
 				display: inline-block;
 
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index a6cb7fd30..f31ec0511 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="datepicker" :class="{'disabled': disabled}">
-		<BaseButton @click.stop="toggleDatePopup" class="show">
+	<div class="datepicker">
+		<BaseButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
 			{{ date === null ? chooseDateLabel : formatDateShort(date) }}
 		</BaseButton>
 
@@ -9,83 +9,63 @@
 
 				<BaseButton
 					v-if="(new Date()).getHours() < 21"
+					class="datepicker__quick-select-date"
 					@click.stop="setDate('today')"
 				>
-					<span class="icon">
-						<icon :icon="['far', 'calendar-alt']"/>
-					</span>
+					<span class="icon"><icon :icon="['far', 'calendar-alt']"/></span>
 					<span class="text">
-						<span>
-							{{ $t('input.datepicker.today') }}
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('today') }}
-						</span>
+						<span>{{ $t('input.datepicker.today') }}</span>
+						<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
 					</span>
 				</BaseButton>
-				<BaseButton @click.stop="() => setDate('tomorrow')">
-					<span class="icon">
-						<icon :icon="['far', 'sun']"/>
-					</span>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('tomorrow')"
+				>
+					<span class="icon"><icon :icon="['far', 'sun']"/></span>
 					<span class="text">
-						<span>
-							{{ $t('input.datepicker.tomorrow') }}
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('tomorrow') }}
-						</span>
+						<span>{{ $t('input.datepicker.tomorrow') }}</span>
+						<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
 					</span>
 				</BaseButton>
-				<BaseButton @click.stop="() => setDate('nextMonday')">
-					<span class="icon">
-						<icon icon="coffee"/>
-					</span>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('nextMonday')"
+				>
+					<span class="icon"><icon icon="coffee"/></span>
 					<span class="text">
-						<span>
-							{{ $t('input.datepicker.nextMonday') }}
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('nextMonday') }}
-						</span>
+						<span>{{ $t('input.datepicker.nextMonday') }}</span>
+						<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
 					</span>
 				</BaseButton>
-				<BaseButton @click.stop="() => setDate('thisWeekend')">
-					<span class="icon">
-						<icon icon="cocktail"/>
-					</span>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('thisWeekend')"
+				>
+					<span class="icon"><icon icon="cocktail"/></span>
 					<span class="text">
-						<span>
-							{{ $t('input.datepicker.thisWeekend') }}
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('thisWeekend') }}
-						</span>
+						<span>{{ $t('input.datepicker.thisWeekend') }}</span>
+						<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
 					</span>
 				</BaseButton>
-				<BaseButton @click.stop="() => setDate('laterThisWeek')">
-					<span class="icon">
-						<icon icon="chess-knight"/>
-					</span>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('laterThisWeek')"
+				>
+					<span class="icon"><icon icon="chess-knight"/></span>
 					<span class="text">
-						<span>
-							{{ $t('input.datepicker.laterThisWeek') }}
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('laterThisWeek') }}
-						</span>
+						<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
+						<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
 					</span>
 				</BaseButton>
-				<BaseButton @click.stop="() => setDate('nextWeek')">
-					<span class="icon">
-						<icon icon="forward"/>
-					</span>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('nextWeek')"
+				>
+					<span class="icon"><icon icon="forward"/></span>
 					<span class="text">
-						<span>
-							{{ $t('input.datepicker.nextWeek') }}
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('nextWeek') }}
-						</span>
+						<span>{{ $t('input.datepicker.nextWeek') }}</span>
+						<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
 					</span>
 				</BaseButton>
 
@@ -96,7 +76,7 @@
 				/>
 
 				<x-button
-					class="is-fullwidth"
+					class="datepicker__close-button is-fullwidth"
 					:shadow="false"
 					@click="close"
 					v-cy="'closeDatepicker'"
@@ -264,68 +244,64 @@ export default defineComponent({
 	input.input {
 		display: none;
 	}
+}
 
-	&.disabled a {
-		cursor: default;
-	}
+.datepicker-popup {
+	position: absolute;
+	z-index: 99;
+	width: 320px;
+	background: var(--white);
+	border-radius: $radius;
+	box-shadow: $shadow;
 
-	.datepicker-popup {
-		position: absolute;
-		z-index: 99;
-		width: 320px;
-		background: var(--white);
-		border-radius: $radius;
-		box-shadow: $shadow;
-
-		@media screen and (max-width: ($tablet)) {
-			width: calc(100vw - 5rem);
-		}
-
-		a:not(.button) {
-			display: flex;
-			align-items: center;
-			padding: 0 .5rem;
-			width: 100%;
-			height: 2.25rem;
-			color: var(--text);
-			transition: all $transition;
-
-			&:first-child {
-				border-radius: $radius $radius 0 0;
-			}
-
-			&:hover {
-				background: var(--light);
-			}
-
-			.text {
-				width: 100%;
-				font-size: .85rem;
-				display: flex;
-				justify-content: space-between;
-				padding-right: .25rem;
-
-				.weekday {
-					color: var(--text-light);
-					text-transform: capitalize;
-				}
-			}
-
-			.icon {
-				width: 2rem;
-				text-align: center;
-			}
-		}
-
-		a.button {
-			margin: 1rem;
-			width: calc(100% - 2rem);
-		}
-
-		:deep(.flatpickr-calendar) {
-			margin: 0 auto 8px;
-			box-shadow: none;
-		}
+	@media screen and (max-width: ($tablet)) {
+		width: calc(100vw - 5rem);
 	}
 }
+
+.datepicker__quick-select-date {
+	display: flex;
+	align-items: center;
+	padding: 0 .5rem;
+	width: 100%;
+	height: 2.25rem;
+	color: var(--text);
+	transition: all $transition;
+
+	&:first-child {
+		border-radius: $radius $radius 0 0;
+	}
+
+	&:hover {
+		background: var(--light);
+	}
+
+	.text {
+		width: 100%;
+		font-size: .85rem;
+		display: flex;
+		justify-content: space-between;
+		padding-right: .25rem;
+
+		.weekday {
+			color: var(--text-light);
+			text-transform: capitalize;
+		}
+	}
+
+	.icon {
+		width: 2rem;
+		text-align: center;
+	}
+}
+	
+.datepicker__close-button {
+	margin: 1rem;
+	width: calc(100% - 2rem);
+}
+
+:deep(.flatpickr-calendar) {
+	margin: 0 auto 8px;
+	box-shadow: none;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue
index 365c695c3..d75cb5a02 100644
--- a/src/components/list/partials/list-card.vue
+++ b/src/components/list/partials/list-card.vue
@@ -15,20 +15,21 @@
 		<div
 			class="list-background background-fade-in"
 			:class="{'is-visible': background}"
-			:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
+			:style="{'background-image': background !== null ? `url(${background})` : undefined}"
+		/>
 		<div class="list-content">
-			<div class="is-archived-container">
-				<span class="is-archived" v-if="list.isArchived">
-					{{ $t('namespace.archived') }}
-				</span>
-				<BaseButton
-					:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
-					@click.stop="toggleFavoriteList(list)"
-					class="favorite"
-				>
-					<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
-				</BaseButton>
-			</div>
+			<span class="is-archived" v-if="list.isArchived">
+				{{ $t('namespace.archived') }}
+			</span>
+			<BaseButton
+				v-else
+				:class="{'is-favorite': list.isFavorite}"
+				@click.stop="toggleFavoriteList(list)"
+				class="favorite"
+			>
+				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
+			</BaseButton>
+
 			<div class="title">{{ list.title }}</div>
 		</div>
 	</router-link>
@@ -112,13 +113,14 @@ function toggleFavoriteList(list: ListModel) {
 		color: var(--light);
 	}
 
-	&.has-background, .list-background {
+	&.has-background,
+	.list-background {
 		background-size: cover;
 		background-repeat: no-repeat;
 		background-position: center;
 	}
 
-	&.has-background .list-content .title {
+	&.has-background .title {
 		text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
 		color: var(--white);
 	}
@@ -179,23 +181,35 @@ function toggleFavoriteList(list: ListModel) {
 
 	.list-content {
 		display: flex;
-		justify-content: space-between;
+		align-content: space-between;
 		flex-wrap: wrap;
 		padding: 1rem;
 		position: absolute;
 		height: 100%;
 		width: 100%;
 
-		.is-archived-container {
-			width: 100%;
-			text-align: right;
 
-			.is-archived {
-				font-size: .75rem;
-				float: left;
+		.is-archived {
+			font-size: .75rem;
+		}
+
+		.favorite {
+			margin-left: auto;
+			transition: opacity $transition, color $transition;
+			opacity: 0;
+			display: block;
+
+			&:hover,
+			&.is-favorite {
+				color: var(--warning);
 			}
 		}
 
+		.favorite.is-favorite,
+		&:hover .favorite {
+			opacity: 1;
+		}
+
 		.title {
 			align-self: flex-end;
 			font-family: $vikunja-font;
@@ -212,30 +226,6 @@ function toggleFavoriteList(list: ListModel) {
 			-webkit-line-clamp: 3;
 			-webkit-box-orient: vertical;
 		}
-
-		.favorite {
-			transition: opacity $transition, color $transition;
-			opacity: 0;
-
-			&:hover {
-				color: var(--warning);
-			}
-
-			&.is-archived {
-				display: none;
-			}
-
-			&.is-favorite {
-				display: inline-block;
-				opacity: 1;
-				color: var(--warning);
-			}
-		}
-
-		&:hover .favorite {
-			opacity: 1;
-		}
-
 	}
 }
 </style>
\ No newline at end of file
diff --git a/src/components/misc/api-config.vue b/src/components/misc/api-config.vue
index f900c4012..86ffb0957 100644
--- a/src/components/misc/api-config.vue
+++ b/src/components/misc/api-config.vue
@@ -27,7 +27,7 @@
 				<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
 			</i18n-t>
 			<br/>
-			<BaseButton @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</BaseButton>
+			<BaseButton class="api-config__change-button" @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</BaseButton>
 		</div>
 
 		<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
@@ -118,4 +118,9 @@ async function setApiUrl() {
 .url {
 	border-bottom: 1px dashed var(--primary);
 }
+
+.api-config__change-button {
+	display: inline-block;
+    color: var(--link);
+}
 </style>
\ No newline at end of file
diff --git a/src/components/misc/error.vue b/src/components/misc/error.vue
index 0015f0919..b2bdce378 100644
--- a/src/components/misc/error.vue
+++ b/src/components/misc/error.vue
@@ -2,7 +2,7 @@
 	<message variant="danger">
 		<i18n-t keypath="loadingError.failed">
 			<BaseButton @click="reload">{{ $t('loadingError.tryAgain') }}</BaseButton>
-			<a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a>
+			<BaseButton href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</BaseButton>
 		</i18n-t>
 	</message>
 </template>
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index b8600efb7..ad429e497 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -57,20 +57,23 @@
 					</p>
 					<p>
 						<BaseButton
+							class="attachment-info-meta-button"
 							@click.prevent.stop="downloadAttachment(a)"
 							v-tooltip="$t('task.attachment.downloadTooltip')"
 						>
 							{{ $t('misc.download') }}
 						</BaseButton>
 						<BaseButton
+							class="attachment-info-meta-button"
 							@click.stop="copyUrl(a)"
 							v-tooltip="$t('task.attachment.copyUrlTooltip')"
 						>
 							{{ $t('task.attachment.copyUrl') }}
 						</BaseButton>
 						<BaseButton
-							@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
 							v-if="editEnabled"
+							class="attachment-info-meta-button"
+							@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
 							v-tooltip="$t('task.attachment.deleteTooltip')"
 						>
 							{{ $t('misc.delete') }}
@@ -303,7 +306,7 @@ export default defineComponent({
           display: flex;
 
           > span:not(:last-child):after,
-          > a:not(:last-child):after {
+          > button:not(:last-child):after {
             content: '·';
             padding: 0 .25rem;
           }
@@ -383,7 +386,7 @@ export default defineComponent({
 		}
 
 		> span:not(:last-child):after,
-		> a:not(:last-child):after {
+		> button:not(:last-child):after {
 			display: none;
 		}
 
@@ -393,6 +396,10 @@ export default defineComponent({
 	}
 }
 
+.attachment-info-meta-button {
+	color: var(--link);
+}
+
 @keyframes bounce {
   from,
   20%,
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 2e40e6f47..0380c4800 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -41,6 +41,7 @@
 			/>
 			<BaseButton
 				v-if="+new Date(task.dueDate) > 0"
+				class="dueDate"
 				@click.prevent.stop="showDefer = !showDefer"
 				v-tooltip="formatDate(task.dueDate)"
 			>
@@ -254,6 +255,11 @@ export default defineComponent({
 		display: inline-block;
 		flex: 1 0 50%;
 
+		.dueDate {
+			display: inline-block;
+			margin-left: 5px;
+		}
+
 		.overdue {
 			color: var(--danger);
 		}