diff --git a/css/deck.css b/css/deck.css
index ce15eb1f5..d1d92ea97 100644
--- a/css/deck.css
+++ b/css/deck.css
@@ -14,6 +14,7 @@
 
 input[type=submit].icon-confirm {
 	border-color: var(--color-border-maxcontrast) !important;
+	border-style: solid;
 	border-left: none;
 }
 
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 3f25d99dd..81f097e2d 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -276,18 +276,15 @@ export default {
 		position: relative;
 		width: 100%;
 		height: 100%;
-		max-height: calc(100vh - 50px);
 		display: flex;
 		flex-direction: column;
 	}
 
 	.board {
-		padding-left: $board-spacing;
 		position: relative;
-		max-height: calc(100% - var(--default-clickable-area));
-		overflow: hidden;
 		overflow-x: auto;
 		flex-grow: 1;
+		scrollbar-gutter: stable;
 	}
 
 	/**
@@ -297,11 +294,15 @@ export default {
 	.smooth-dnd-container.horizontal {
 		display: flex;
 		align-items: stretch;
+		gap: $board-gap;
+		padding: 0 $board-gap;
 		height: 100%;
 
 		&:deep(.stack-draggable-wrapper.smooth-dnd-draggable-wrapper) {
 			display: flex;
 			height: auto;
+			flex: 0 1 $card-max-width;
+			min-width: $card-min-width;
 
 			.stack {
 				display: flex;
@@ -309,16 +310,13 @@ export default {
 				position: relative;
 
 				.smooth-dnd-container.vertical {
-					flex-grow: 1;
+					$margin-x: calc($stack-gap * -1);
 					display: flex;
 					flex-direction: column;
-					// Margin left instead of padidng to avoid jumps on dropping a card
-					margin-left: $stack-spacing;
-					padding-right: $stack-spacing;
-					overflow-x: hidden;
+					gap: $stack-gap;
+					padding: $stack-gap;
+					margin: 0 $margin-x;
 					overflow-y: auto;
-					padding-top: 15px;
-					margin-top: -10px;
 					scrollbar-gutter: stable;
 				}
 
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 274ede74f..3d0753a08 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -14,10 +14,10 @@
 					{{ stack.title }}
 				</h3>
 				<h3 v-else-if="!editing"
-					title="stack.title"
 					dir="auto"
 					tabindex="0"
 					:aria-label="stack.title"
+					:title="stack.title"
 					class="stack__title"
 					@click="startEditing(stack)"
 					@keydown.enter="startEditing(stack)">
@@ -108,7 +108,7 @@
 		</Container>
 
 		<transition name="slide-bottom" appear>
-			<div v-show="showAddCard" class="stack__card-add">
+			<div v-if="showAddCard" class="stack__card-add">
 				<form :class="{ 'icon-loading-small': stateCardCreating }"
 					@submit.prevent.stop="clickAddCard()">
 					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
@@ -365,37 +365,31 @@ export default {
 	@import './../../css/variables';
 
 	.stack {
-		width: $stack-width + $stack-spacing * 3;
+		width: 100%;
 	}
 
 	.stack__header {
 		display: flex;
 		position: sticky;
 		top: 0;
+		height: var(--default-clickable-area);
 		z-index: 100;
-		padding-left: $card-spacing;
-		padding-right: $card-spacing;
-		margin: 6px;
 		margin-top: 0;
 		cursor: grab;
 		background-color: var(--color-main-background);
 
 		// Smooth fade out of the cards at the top
 		&:before {
-			content: ' ';
+			content: '';
 			display: block;
 			position: absolute;
-			width: calc(100% - 16px);
-			height: 20px;
-			top: 30px;
-			left: 0px;
+			width: 100%;
+			height: $stack-gap;
+			bottom: 0;
 			z-index: 99;
 			transition: top var(--animation-slow);
-
-			background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(255, 255, 255, 0) 100%);
-			body.theme--dark & {
-				background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(0, 0, 0, 0) 100%);
-			}
+			background-image: linear-gradient(180deg, var(--color-main-background) 0%, transparent 100%);
+			transform: translateY(100%);
 		}
 
 		& > * {
@@ -404,8 +398,10 @@ export default {
 		}
 
 		h3, form {
-			flex-grow: 1;
+			flex: 1 1 auto;
+			min-width: 0;
 			display: flex;
+			align-items: center;
 			cursor: inherit;
 			margin: 0;
 
@@ -418,9 +414,8 @@ export default {
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			max-width: calc($stack-width - 60px);
 			border-radius: 3px;
-			padding: 4px 4px;
+			padding: $card-padding;
 			font-size: var(--default-font-size);
 
 			&:focus-visible {
@@ -430,7 +425,6 @@ export default {
 		}
 
 		form {
-			margin: -4px;
 			input {
 				font-weight: bold;
 				padding: 0 6px;
@@ -453,14 +447,25 @@ export default {
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
-		margin-bottom: 5px;
-		padding-top: var(--default-grid-baseline);
+		padding-bottom: $stack-gap;
 		background-color: var(--color-main-background);
+		position: relative;
+
+		// Smooth fade out of the cards at the top
+		&:before {
+			content: '';
+			display: block;
+			position: absolute;
+			width: 100%;
+			height: $stack-gap;
+			z-index: 99;
+			transition: bottom var(--animation-slow);
+			background-image: linear-gradient(0deg, var(--color-main-background) 0%, transparent 100%);
+			transform: translateY(-100%);
+		}
 
 		form {
 			display: flex;
-			margin-left: $stack-spacing;
-			margin-right: $stack-spacing;
 			width: 100%;
 			border: 2px solid var(--color-border-maxcontrast);
 			border-radius: var(--border-radius-large);
@@ -481,7 +486,6 @@ export default {
 		input {
 			border: none;
 			margin: 0;
-			padding: 4px;
 		}
 	}
 
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 96f8c2c7c..4e989c6e5 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -101,6 +101,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+	@import './../../css/variables';
+
 	.badges {
 		display: flex;
 		width: 100%;
@@ -111,6 +113,7 @@ export default {
 		.icon-badge {
 			color: var(--color-text-maxcontrast);
 			display: flex;
+			align-items: center;
 			margin-right: 2px;
 
 			span,
@@ -125,6 +128,7 @@ export default {
 		flex-direction: row;
 		flex-wrap: wrap;
 		gap: 3px;
+		height: var(--default-clickable-area);
 	}
 
 	.badges .icon.due {
diff --git a/src/components/cards/CardCover.vue b/src/components/cards/CardCover.vue
index 67dc0a167..5d5c30f58 100644
--- a/src/components/cards/CardCover.vue
+++ b/src/components/cards/CardCover.vue
@@ -4,13 +4,10 @@
 -->
 
 <template>
-	<div v-if="referencePreview" class="card-cover">
-		<div class="image-wrapper rounded-left rounded-right" :style="{ backgroundImage: `url(${referencePreview})`}" />
-	</div>
-	<div v-else-if="cardId && ( attachments.length > 0 )" class="card-cover">
-		<div v-for="(attachment, index) in attachments"
+	<div v-if="cardId && ( attachments.length > 0 )" class="card-cover">
+		<div v-for="attachment in attachments"
 			:key="attachment.id"
-			:class="['image-wrapper', { 'rounded-left': index === 0 }, { 'rounded-right': index === attachments.length - 1 }]"
+			class="image-wrapper"
 			:style="{ backgroundImage: `url(${attachmentPreview(attachment)})` }" />
 	</div>
 </template>
@@ -77,9 +74,7 @@ export default {
 .card-cover {
 	height: 90px;
 	display: flex;
-	margin-top: -4px;
-	margin-left: -4px;
-	margin-right: -4px;
+	margin: $card-image-margin $card-image-margin 0;
 
 	.image-wrapper {
 		flex: 1;
@@ -87,12 +82,6 @@ export default {
 		background-size: cover;
 		background-repeat: no-repeat;
 		background-position: center center;
-		&.rounded-left {
-			border-top-left-radius: calc(var(--border-radius-large) - 1px);
-		}
-		&.rounded-right {
-			border-top-right-radius: calc(var(--border-radius-large) - 1px);
-		}
 	}
 }
 </style>
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index e0ae8d141..64f3a3505 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -6,7 +6,7 @@
 <template>
 	<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
 		<div :ref="`card${card.id}`"
-			:class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
+			:class="{'compact': compactMode, 'current-card': currentCard, 'no-labels': !hasLabels, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
 			tag="div"
 			:tabindex="0"
 			class="card"
@@ -331,12 +331,13 @@ export default {
 		border-radius: var(--border-radius-large);
 		font-size: 100%;
 		background-color: var(--color-main-background);
-		margin-bottom: $card-spacing;
-		padding: var(--default-grid-baseline) $card-padding;
+		padding: $card-padding;
 		border: 2px solid var(--color-border-dark);
 		width: 100%;
 		display: flex;
 		flex-direction: column;
+		gap: $card-gap;
+		overflow: hidden;
 
 		&:deep(*) {
 			cursor: pointer;
@@ -359,12 +360,10 @@ export default {
 			h4 {
 				font-weight: normal;
 				margin: 0;
-				padding: var(--default-grid-baseline);
 				flex-grow: 1;
 				font-size: 100%;
 				overflow: hidden;
 				word-wrap: break-word;
-				padding-left: 4px;
 				align-self: center;
 
 				:deep(a) {
@@ -374,9 +373,6 @@ export default {
 				&.editable {
 					span {
 						cursor: text;
-						padding-right: 8px;
-						padding-top: 3px;
-						padding-bottom: 3px;
 
 						&:focus, &:focus-visible {
 							outline: none;
@@ -385,6 +381,7 @@ export default {
 
 					&:focus-within {
 						outline: 2px solid var(--color-border-dark);
+						outline-offset: 4px;
 						border-radius: 3px;
 					}
 				}
@@ -427,8 +424,6 @@ export default {
 		.card-labels {
 			display: flex;
 			align-items: end;
-			padding-left: var(--default-grid-baseline);
-			padding-top: var(--default-grid-baseline);
 
 			.labels {
 				flex-wrap: wrap;
@@ -444,7 +439,7 @@ export default {
 
 	.card-related {
 		display: flex;
-		padding: 12px;
+		padding: 4px;
 		padding-bottom: 0px;
 		color: var(--color-text-maxcontrast);
 
@@ -469,8 +464,8 @@ export default {
 			height: 32px;
 			width: 32px;
 		}
-		&.has-labels {
-			padding-bottom: $card-padding;
+		&.no-labels {
+			padding-bottom: var(--default-grid-baseline);
 		}
 		.labels {
 			height: 6px;
diff --git a/src/components/overview/Overview.vue b/src/components/overview/Overview.vue
index 0b8269e20..703b27573 100644
--- a/src/components/overview/Overview.vue
+++ b/src/components/overview/Overview.vue
@@ -14,45 +14,25 @@
 		</div>
 
 		<div v-else-if="isValidFilter" class="overview">
-			<div class="dashboard-column">
-				<h3>{{ t('deck', 'Overdue') }}</h3>
-				<div v-for="card in sortCards('overdue')" :key="card.id">
-					<CardItem :id="card.id" />
+			<div v-for="columnProps in columnPropsList" :key="columnProps.title" class="dashboard-column">
+				<div class="dashboard-column__header">
+					<h3 class="dashboard-column__header-title"
+						:title="columnProps.title"
+						:aria-label="columnProps.title">
+						{{ t('deck', columnProps.title) }}
+					</h3>
 				</div>
-			</div>
-
-			<div class="dashboard-column">
-				<h3>{{ t('deck', 'Today') }}</h3>
-				<div v-for="card in sortCards('today')" :key="card.id">
-					<CardItem :id="card.id" />
-				</div>
-			</div>
-
-			<div class="dashboard-column">
-				<h3>{{ t('deck', 'Tomorrow') }}</h3>
-				<div v-for="card in sortCards('tomorrow')" :key="card.id">
-					<CardItem :id="card.id" />
-				</div>
-			</div>
-
-			<div class="dashboard-column">
-				<h3>{{ t('deck', 'Next 7 days') }}</h3>
-				<div v-for="card in sortCards('nextSevenDays')" :key="card.id">
-					<CardItem :id="card.id" />
-				</div>
-			</div>
-
-			<div class="dashboard-column">
-				<h3>{{ t('deck', 'Later') }}</h3>
-				<div v-for="card in sortCards('later')" :key="card.id">
-					<CardItem :id="card.id" />
-				</div>
-			</div>
-
-			<div class="dashboard-column">
-				<h3>{{ t('deck', 'No due') }}</h3>
-				<div v-for="card in assignedCardsDashboard.nodue" :key="card.id">
-					<CardItem :id="card.id" />
+				<div class="dashboard-column__list">
+					<template v-if="columnProps.sort === false">
+						<CardItem v-for="card in filterCards(columnProps.filter)"
+							:id="card.id"
+							:key="card.id" />
+					</template>
+					<template v-else>
+						<CardItem v-for="card in sortCards(filterCards(columnProps.filter))"
+							:id="card.id"
+							:key="card.id" />
+					</template>
 				</div>
 			</div>
 		</div>
@@ -73,6 +53,34 @@ const SUPPORTED_FILTERS = [
 	FILTER_UPCOMING,
 ]
 
+const COLUMN_PROPS_LIST = [
+	{
+		title: 'Overdue',
+		filter: 'overdue',
+	},
+	{
+		title: 'Today',
+		filter: 'today',
+	},
+	{
+		title: 'Tomorrow',
+		filter: 'tomorrow',
+	},
+	{
+		title: 'Next 7 days',
+		filter: 'nextSevenDays',
+	},
+	{
+		title: 'Later',
+		filter: 'later',
+	},
+	{
+		title: 'No due',
+		filter: 'nodue',
+		sort: false,
+	},
+]
+
 export default {
 	name: 'Overview',
 	components: {
@@ -89,6 +97,7 @@ export default {
 	data() {
 		return {
 			loading: true,
+			columnPropsList: COLUMN_PROPS_LIST,
 		}
 	},
 	computed: {
@@ -125,16 +134,16 @@ export default {
 			}
 			this.loading = false
 		},
-		sortCards(when) {
-			const cards = this.assignedCardsDashboard[when]
-
+		filterCards(when) {
+			return this.assignedCardsDashboard[when]
+		},
+		sortCards(cards) {
 			if (!cards) {
 				return null
 			} else {
 				return cards.toSorted((current, next) => {
 					const currentDueDate = new Date(current.duedate)
 					const nextDueDate = new Date(next.duedate)
-
 					return currentDueDate - nextDueDate
 				})
 			}
@@ -151,38 +160,75 @@ export default {
 	position: relative;
 	width: 100%;
 	height: 100%;
-	max-height: calc(100vh - 50px);
 	display: flex;
 	flex-direction: column;
 }
 
 .overview {
 	position: relative;
-	height: calc(100% - var(--default-clickable-area));
-	overflow-x: scroll;
+	overflow-x: auto;
+	flex-grow: 1;
+	scrollbar-gutter: stable;
 	display: flex;
 	align-items: stretch;
-	padding-left: $board-spacing;
-	padding-right: $board-spacing;
+	gap: $board-gap;
+	padding: 0 $board-gap;
 
 	.dashboard-column {
 		display: flex;
 		flex-direction: column;
-		min-width: $stack-width;
-		width: $stack-width;
-		margin-left: $stack-spacing;
-		margin-right: $stack-spacing;
+		flex: 0 1 $card-max-width;
+		min-width: $card-min-width;
 
-		h3 {
-			font-size: var(--default-font-size);
-			margin: -6px;
-			margin-bottom: 12px;
-			padding: 6px 13px;
+		.dashboard-column__header {
+			display: flex;
 			position: sticky;
 			top: 0;
+			height: var(--default-clickable-area);
 			z-index: 100;
+			margin-top: 0;
 			background-color: var(--color-main-background);
-			border: 1px solid var(--color-main-background);
+
+			// Smooth fade out of the cards at the top
+			&:before {
+				content: '';
+				display: block;
+				position: absolute;
+				width: 100%;
+				height: 20px;
+				top: 30px;
+				left: 0px;
+				z-index: 99;
+				transition: top var(--animation-slow);
+				background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(255, 255, 255, 0) 100%);
+
+				body.theme--dark & {
+					background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(0, 0, 0, 0) 100%);
+				}
+			}
+		}
+
+		.dashboard-column__header-title {
+			display: flex;
+			align-items: center;
+			height: var(--default-clickable-area);
+			margin: 0;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			padding: $card-padding;
+			font-size: var(--default-font-size);
+		}
+
+		.dashboard-column__list {
+			$margin-x: calc($stack-gap * -1);
+			display: flex;
+			flex-direction: column;
+			gap: $stack-gap;
+			padding: $stack-gap;
+			margin: 0 $margin-x;
+			overflow-y: auto;
+			scrollbar-gutter: stable;
 		}
 	}
 }
diff --git a/src/components/search/GlobalSearchResults.vue b/src/components/search/GlobalSearchResults.vue
index 12f0963e4..877277d10 100644
--- a/src/components/search/GlobalSearchResults.vue
+++ b/src/components/search/GlobalSearchResults.vue
@@ -4,16 +4,19 @@
 -->
 
 <template>
-	<div v-if="searchQuery!==''" class="global-search">
-		<h2>
-			<NcRichText :text="t('deck', 'Search for {searchQuery} in all boards')" :arguments="queryStringArgs" />
-			<div v-if="loading" class="icon-loading-small" />
-		</h2>
-		<NcActions>
-			<NcActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
-		</NcActions>
+	<section v-if="searchQuery!==''" class="global-search">
+		<header class="search-header">
+			<h2>
+				<NcRichText :text="$route.params.id ? t('deck', 'Search for {searchQuery} in other boards') : t('deck', 'Search for {searchQuery} in all boards')"
+					:arguments="queryStringArgs" />
+				<span v-if="loading" class="icon-loading-small" />
+			</h2>
+			<NcActions>
+				<NcActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
+			</NcActions>
+		</header>
 		<div class="search-wrapper">
-			<div v-if="loading || filteredResults.length > 0" class="search-results">
+			<template v-if="loading || filteredResults.length > 0">
 				<CardItem v-for="card in filteredResults"
 					:id="card.id"
 					:key="card.id"
@@ -26,12 +29,12 @@
 						{{ t('deck', 'No results found') }}
 					</div>
 				</InfiniteLoading>
-			</div>
-			<div v-else>
+			</template>
+			<template v-else>
 				<p>{{ t('deck', 'No results found') }}</p>
-			</div>
+			</template>
 		</div>
-	</div>
+	</section>
 </template>
 
 <script>
@@ -159,7 +162,7 @@ export default {
 
 .global-search {
 	width: 100%;
-	padding: $board-spacing + $stack-spacing;
+	padding: $board-gap;
 	padding-bottom: 0;
 	overflow: hidden;
 	min-height: 35vh;
@@ -169,17 +172,24 @@ export default {
 	border-top: 1px solid var(--color-border);
 	z-index: 1010;
 	position: relative;
+	display: flex;
+	flex-direction: column;
 
 	.action-item.icon-close {
 		position: absolute;
 		top: 10px;
 		right: 10px;
 	}
-	.search-wrapper {
-		overflow: scroll;
-		height: 100%;
-		position: relative;
-		padding: 10px;
+
+	.search-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+	}
+
+	h2 {
+		margin: 0;
+		padding: var(--default-grid-baseline) var(--default-grid-baseline) $board-gap;
 	}
 
 	h2 > div {
@@ -189,23 +199,24 @@ export default {
 			margin-right: 20px;
 		}
 	}
+
 	h2:deep(span) {
 		background-color: var(--color-background-dark);
 		padding: 3px;
 		border-radius: var(--border-radius);
 	}
 
-	.search-results {
+	.search-wrapper {
+		overflow: auto;
+		height: 100%;
+		position: relative;
 		display: flex;
-		flex-wrap: wrap;
+		gap: $stack-gap;
 
-		& > div {
-			flex-grow: 0;
+		& > .drop-upload--card {
+			flex: 0 1 $card-max-width;
+			min-width: $card-min-width;
 		}
 	}
-	&:deep(.card) {
-		width: $stack-width;
-		margin-right: $stack-spacing;
-	}
 }
 </style>
diff --git a/src/components/search/Placeholder.vue b/src/components/search/Placeholder.vue
index 0921891fd..be6041cde 100644
--- a/src/components/search/Placeholder.vue
+++ b/src/components/search/Placeholder.vue
@@ -62,14 +62,13 @@ export default {
 $clickable-area: var(--default-clickable-area);
 
 .card--placeholder {
-	width: $stack-width;
-	margin-right: $stack-spacing;
+	min-width: $card-min-width;
+	max-width: $card-min-width;
 	padding: $card-padding;
 	transition: box-shadow 0.1s ease-in-out;
 	box-shadow: 0 0 2px 0 var(--color-box-shadow);
 	border-radius: var(--border-radius-large);
 	font-size: 100%;
-	margin-bottom: $card-spacing;
 	height: 100px;
 }
 
diff --git a/src/css/variables.scss b/src/css/variables.scss
index 6d6714934..8f53aba5e 100644
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -2,8 +2,10 @@
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
- $card-spacing: 8px;
- $card-padding: 4px;
- $stack-spacing: 12px;
- $stack-width: 280px;
- $board-spacing: 16px;
+ $card-min-width: 216px;
+ $card-max-width: 300px;
+ $card-padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 2) var(--default-grid-baseline);
+ $card-gap: calc(var(--default-grid-baseline) * 3);
+ $card-image-margin: calc(var(--default-grid-baseline) * -2);
+ $stack-gap: calc(var(--default-grid-baseline) * 3);
+ $board-gap: calc(var(--default-grid-baseline) * 4);
diff --git a/src/store/card.js b/src/store/card.js
index 556a52a2e..eea4211db 100644
--- a/src/store/card.js
+++ b/src/store/card.js
@@ -189,7 +189,7 @@ export default {
 			card.assignedUsers = card.assignedUsers || []
 			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
-				const existingCard = state.cards.find(_card => _card.id === card.id)
+				const existingCard = state.cards[existingIndex]
 				Vue.set(state.cards, existingIndex, Object.assign({}, existingCard, card))
 			} else {
 				state.cards.push(card)