diff --git a/REUSE.toml b/REUSE.toml
index 35feb1c0332..302c6380c0b 100644
--- a/REUSE.toml
+++ b/REUSE.toml
@@ -71,6 +71,12 @@ precedence = "aggregate"
 SPDX-FileCopyrightText = "2018-2025 Google LLC"
 SPDX-License-Identifier = "Apache-2.0"
 
+[[annotations]]
+path = "img/dashboard/**.png"
+precedence = "aggregate"
+SPDX-FileCopyrightText = "Nextcloud GmbH <https://nextcloud.com/trademarks/>"
+SPDX-License-Identifier = "LicenseRef-NextcloudTrademarks"
+
 [[annotations]]
 path = "img/emojis/**.gif"
 precedence = "aggregate"
diff --git a/img/dashboard/meetings.png b/img/dashboard/meetings.png
new file mode 100644
index 00000000000..5d5f9342c99
Binary files /dev/null and b/img/dashboard/meetings.png differ
diff --git a/img/dashboard/mentions.png b/img/dashboard/mentions.png
new file mode 100644
index 00000000000..73a642557bf
Binary files /dev/null and b/img/dashboard/mentions.png differ
diff --git a/img/dashboard/reminders.png b/img/dashboard/reminders.png
new file mode 100644
index 00000000000..3bf94746994
Binary files /dev/null and b/img/dashboard/reminders.png differ
diff --git a/img/dashboard/welcome.png b/img/dashboard/welcome.png
new file mode 100644
index 00000000000..8a056145fdb
Binary files /dev/null and b/img/dashboard/welcome.png differ
diff --git a/src/components/Dashboard/DashboardSection.vue b/src/components/Dashboard/DashboardSection.vue
new file mode 100644
index 00000000000..e522974cf7f
--- /dev/null
+++ b/src/components/Dashboard/DashboardSection.vue
@@ -0,0 +1,117 @@
+<!--
+	- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+	- SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { useIsMobile, useIsSmallMobile } from '@nextcloud/vue/composables/useIsMobile'
+
+const { wide = false, title = '', subtitle = '', description = '' } = defineProps<{
+	wide?: boolean
+	title?: string
+	subtitle?: string
+	description?: string
+}>()
+const isSmallMobile = useIsSmallMobile()
+const isMobile = useIsMobile()
+</script>
+
+<template>
+	<div class="dashboard-section"
+		:class="{
+			'dashboard-section--wide': wide && !isSmallMobile,
+			'dashboard-section--list': $slots.list,
+		}">
+		<div v-if="!isSmallMobile"
+			class="dashboard-section__bar"
+			:class="{
+				'dashboard-section__bar--narrow': $slots.list || isMobile,
+				gradient: !$slots.image || isMobile,
+				'image-container': $slots.image,
+			}">
+			<slot v-if="!($slots.list || isMobile)" name="image" />
+		</div>
+		<div class="dashboard-section__content">
+			<h3 class="dashboard-section__title">
+				{{ title }}
+			</h3>
+			<span class="dashboard-section__subtitle">{{ subtitle }}</span>
+			<span class="dashboard-section__description">{{ description }}</span>
+			<slot name="list" />
+			<div v-if="$slots.action" class="dashboard-section__action">
+				<slot name="action" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.dashboard-section {
+	display: flex;
+	border-radius: var(--border-radius-large);
+	overflow: hidden;
+	border: 2px solid var(--color-border);
+	height: 100%;
+
+	&--wide {
+		flex-direction: row;
+
+		.dashboard-section__content {
+			justify-content: center;
+		}
+	}
+
+	&__content {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		flex: auto;
+		min-height: 0;
+		padding: 0 calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 5);
+	}
+
+	&__bar {
+		flex: 0 0 200px;
+
+		&.gradient {
+			background: linear-gradient(78deg, var(--color-primary) 60%, var(--color-main-background) 120%);
+		}
+
+		&--narrow {
+			flex: 0 0 10px;
+		}
+
+		// Style for slotted images
+		:deep(img) {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			object-position: center;
+		}
+
+		&.image-container {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			overflow: hidden;
+		}
+	}
+
+	&__title {
+		font-size: 1.25rem;
+		font-weight: bold;
+	}
+
+	&__subtitle {
+		font-weight: bold;
+	}
+
+	&__action {
+		padding-block: calc(var(--default-grid-baseline) * 2);
+	}
+}
+
+h3 {
+	margin-block: calc(var(--default-grid-baseline) * 2);
+}
+</style>
diff --git a/src/components/Dashboard/EventCard.vue b/src/components/Dashboard/EventCard.vue
index 735cb8a437b..a8b293d90e8 100644
--- a/src/components/Dashboard/EventCard.vue
+++ b/src/components/Dashboard/EventCard.vue
@@ -246,7 +246,7 @@ function handleJoin({ call }: { call: boolean }) {
 	flex-direction: column;
 	flex: 0 0 100%;
 	max-width: 300px;
-	border: 3px solid var(--color-border);
+	border: 2px solid var(--color-border);
 	padding: calc(var(--default-grid-baseline) * 2);
 	border-radius: var(--border-radius-large);
 	background-color: var(--color-main-background);
@@ -255,7 +255,7 @@ function handleJoin({ call }: { call: boolean }) {
 		background-color: var(--color-primary-light);
 
 		&:not(.event-card--in-call) {
-			border-color: var(--color-primary-light) !important;
+			border-color: var(--color-primary-element-light-hover) !important;
 		}
 	}
 
diff --git a/src/components/Dashboard/TalkDashboard.vue b/src/components/Dashboard/TalkDashboard.vue
index 40c48c02f2e..233ec226695 100644
--- a/src/components/Dashboard/TalkDashboard.vue
+++ b/src/components/Dashboard/TalkDashboard.vue
@@ -6,18 +6,16 @@
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { isRTL, t } from '@nextcloud/l10n'
-import { generateUrl } from '@nextcloud/router'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { generateUrl, imagePath } from '@nextcloud/router'
+import { useIsMobile, useIsSmallMobile } from '@nextcloud/vue/composables/useIsMobile'
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcPopover from '@nextcloud/vue/components/NcPopover'
-import IconAlarm from 'vue-material-design-icons/Alarm.vue'
 import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import IconAt from 'vue-material-design-icons/At.vue'
 import IconCalendarBlankOutline from 'vue-material-design-icons/CalendarBlankOutline.vue'
 import IconList from 'vue-material-design-icons/FormatListBulleted.vue'
 import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
@@ -27,6 +25,7 @@ import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import ConversationsListVirtual from '../LeftSidebar/ConversationsList/ConversationsListVirtual.vue'
 import SearchMessageItem from '../RightSidebar/SearchMessages/SearchMessageItem.vue'
 import LoadingPlaceholder from '../UIShared/LoadingPlaceholder.vue'
+import DashboardSection from './DashboardSection.vue'
 import EventCard from './EventCard.vue'
 import { CONVERSATION } from '../../constants.ts'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
@@ -43,6 +42,8 @@ const canModerateSipDialOut = hasTalkFeature('local', 'sip-support-dialout')
 	&& getTalkConfig('local', 'call', 'can-enable-sip')
 const canStartConversations = getTalkConfig('local', 'conversations', 'can-create')
 const isDirectionRTL = isRTL()
+const isMobile = useIsMobile()
+const isSmallMobile = useIsSmallMobile()
 
 const store = useStore()
 const router = useRouter()
@@ -177,171 +178,190 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' })
 </script>
 
 <template>
-	<div class="talk-dashboard-wrapper">
-		<h2 class="talk-dashboard__header">
-			{{ t('spreed', 'Hello, {displayName}', { displayName: actorStore.displayName }, { escape: false }) }}
-		</h2>
-		<div class="talk-dashboard__actions">
-			<NcPopover v-if="canStartConversations"
-				popup-role="dialog">
-				<template #trigger>
-					<NcButton variant="primary">
-						<template #icon>
-							<IconVideoOutline />
-						</template>
-						{{ t('spreed', 'Start meeting now') }}
-					</NcButton>
-				</template>
-				<div role="dialog"
-					aria-labelledby="instant_meeting_dialog"
-					class="instant-meeting__dialog"
-					aria-modal="true">
-					<strong>{{ t('spreed', 'Give your meeting a title') }}</strong>
-					<NcInputField id="room-name"
-						v-model="conversationName"
-						:placeholder="t('spreed', 'Meeting')" />
-					<NcButton variant="primary"
-						@click="startMeeting">
-						{{ t('spreed', 'Create and copy link') }}
-					</NcButton>
-				</div>
-			</NcPopover>
-			<NcButton v-if="canStartConversations"
-				@click="EventBus.emit('new-conversation-dialog:show')">
-				<template #icon>
-					<IconPlus :size="20" />
-				</template>
-				{{ t('spreed', 'Create a new conversation') }}
-			</NcButton>
+	<div class="talk-dashboard-wrapper"
+		:class="{
+			'talk-dashboard-wrapper--mobile': isMobile,
+			'talk-dashboard-wrapper--small-mobile': isSmallMobile,
+		}">
+		<div class="talk-dashboard__menu">
+			<h2 class="talk-dashboard__header">
+				{{ t('spreed', 'Hello, {displayName}', { displayName: actorStore.displayName }, { escape: false }) }}
+			</h2>
+			<div class="talk-dashboard__actions">
+				<NcPopover v-if="canStartConversations"
+					popup-role="dialog">
+					<template #trigger>
+						<NcButton variant="primary">
+							<template #icon>
+								<IconVideoOutline />
+							</template>
+							{{ t('spreed', 'Start meeting now') }}
+						</NcButton>
+					</template>
+					<div role="dialog"
+						aria-labelledby="instant_meeting_dialog"
+						class="instant-meeting__dialog"
+						aria-modal="true">
+						<strong>{{ t('spreed', 'Give your meeting a title') }}</strong>
+						<NcInputField id="room-name"
+							v-model="conversationName"
+							:placeholder="t('spreed', 'Meeting')" />
+						<NcButton variant="primary"
+							@click="startMeeting">
+							{{ t('spreed', 'Create and copy link') }}
+						</NcButton>
+					</div>
+				</NcPopover>
+				<NcButton v-if="canStartConversations"
+					@click="EventBus.emit('new-conversation-dialog:show')">
+					<template #icon>
+						<IconPlus :size="20" />
+					</template>
+					{{ t('spreed', 'Create a new conversation') }}
+				</NcButton>
 
-			<NcButton @click="EventBus.emit('open-conversations-list:show')">
-				<template #icon>
-					<IconList :size="20" />
-				</template>
-				{{ t('spreed', 'Join open conversations') }}
-			</NcButton>
+				<NcButton @click="EventBus.emit('open-conversations-list:show')">
+					<template #icon>
+						<IconList :size="20" />
+					</template>
+					{{ t('spreed', 'Join open conversations') }}
+				</NcButton>
 
-			<NcButton v-if="canModerateSipDialOut"
-				@click="EventBus.emit('call-phone-dialog:show')">
-				<template #icon>
-					<IconPhoneOutline :size="20" />
-				</template>
-				{{ t('spreed', 'Call a phone number') }}
-			</NcButton>
-			<NcButton variant="tertiary"
-				@click="emit('talk:media-settings:show', 'device-check')">
-				<template #icon>
-					<IconMicrophoneOutline :size="20" />
-				</template>
-				{{ t('spreed', 'Check devices') }}
-			</NcButton>
-		</div>
-		<h3 class="title">
-			{{ t('spreed', 'Upcoming meetings') }}
-		</h3>
-		<div v-if="eventsInitialised && eventRooms.length > 0"
-			class="talk-dashboard__event-cards-wrapper"
-			:class="{ 'forward-scrollable': forwardScrollable, 'backward-scrollable': backwardScrollable }">
-			<div ref="eventCardsWrapper"
-				class="talk-dashboard__event-cards"
-				@scroll.passive="updateScrollableFlags">
-				<EventCard v-for="eventRoom in eventRooms"
-					:key="eventRoom.eventLink"
-					:event-room="eventRoom"
-					class="talk-dashboard__event-card" />
-			</div>
-			<div class="talk-dashboard__event-cards__scroll-indicator">
-				<NcButton v-show="backwardScrollable"
-					class="button-slide backward"
-					variant="tertiary"
-					:title="t('spreed', 'Scroll backward')"
-					:aria-label="t('spreed', 'Scroll backward')"
-					@click="scrollEventCards({ direction: 'backward' })">
+				<NcButton v-if="canModerateSipDialOut"
+					@click="EventBus.emit('call-phone-dialog:show')">
 					<template #icon>
-						<IconArrowLeft class="bidirectional-icon" />
+						<IconPhoneOutline :size="20" />
 					</template>
+					{{ t('spreed', 'Call a phone number') }}
 				</NcButton>
-				<NcButton v-show="forwardScrollable"
-					class="button-slide forward"
-					variant="tertiary"
-					:title="t('spreed', 'Scroll forward')"
-					:aria-label="t('spreed', 'Scroll forward')"
-					@click="scrollEventCards({ direction: 'forward' })">
+				<NcButton variant="secondary"
+					@click="emit('talk:media-settings:show', 'device-check')">
 					<template #icon>
-						<IconArrowRight class="bidirectional-icon" />
+						<IconMicrophoneOutline :size="20" />
 					</template>
+					{{ t('spreed', 'Check devices') }}
 				</NcButton>
 			</div>
 		</div>
-		<LoadingPlaceholder v-else-if="!eventsInitialised"
-			type="event-cards" />
-		<div v-else class="talk-dashboard__empty-event-card">
-			<span class="title"> {{ t('spreed', 'You have no upcoming meetings') }}</span>
-			<span class="secondary_text">
-				{{ t('spreed', 'Schedule a meeting with a colleague from your calendar') }}
-			</span>
-			<NcButton class="talk-dashboard__calendar-button"
-				variant="secondary"
-				:href="generateUrl('apps/calendar')"
-				target="_blank">
-				<template #icon>
-					<IconCalendarBlankOutline :size="20" />
+		<div class="talk-dashboard__items">
+			<div class="event-section">
+				<template v-if="eventsInitialised && eventRooms.length > 0">
+					<h3 class="title">
+						{{ t('spreed', 'Upcoming meetings') }}
+					</h3>
+					<div class="talk-dashboard__event-cards-wrapper"
+						:class="{ 'forward-scrollable': forwardScrollable, 'backward-scrollable': backwardScrollable }">
+						<div ref="eventCardsWrapper"
+							class="talk-dashboard__event-cards"
+							@scroll.passive="updateScrollableFlags">
+							<EventCard v-for="eventRoom in eventRooms"
+								:key="eventRoom.eventLink"
+								:event-room="eventRoom"
+								class="talk-dashboard__event-card" />
+						</div>
+						<div class="talk-dashboard__event-cards__scroll-indicator">
+							<NcButton v-show="backwardScrollable"
+								class="button-slide backward"
+								variant="tertiary"
+								:title="t('spreed', 'Scroll backward')"
+								:aria-label="t('spreed', 'Scroll backward')"
+								@click="scrollEventCards({ direction: 'backward' })">
+								<template #icon>
+									<IconArrowLeft class="bidirectional-icon" />
+								</template>
+							</NcButton>
+							<NcButton v-show="forwardScrollable"
+								class="button-slide forward"
+								variant="tertiary"
+								:title="t('spreed', 'Scroll forward')"
+								:aria-label="t('spreed', 'Scroll forward')"
+								@click="scrollEventCards({ direction: 'forward' })">
+								<template #icon>
+									<IconArrowRight class="bidirectional-icon" />
+								</template>
+							</NcButton>
+						</div>
+					</div>
 				</template>
-				{{ t('spreed', 'Open calendar') }}
-			</NcButton>
-		</div>
-		<div class="talk-dashboard__chats">
-			<div class="talk-dashboard__unread-mentions">
-				<h3 class="title">
-					{{ t('spreed', 'Unread mentions') }}
-				</h3>
-				<ConversationsListVirtual v-if="filteredConversations.length > 0 || !conversationsInitialised"
-					class="talk-dashboard__conversations-list"
-					:conversations="filteredConversations"
-					:loading="!conversationsInitialised" />
-				<NcEmptyContent v-else
-					class="talk-dashboard__empty-content"
-					:name="t('spreed', 'All caught up!')"
-					:description="t('spreed', 'You have no unread mentions')">
-					<template #icon>
-						<IconAt :size="40" />
+				<LoadingPlaceholder v-else-if="!eventsInitialised"
+					type="event-cards" />
+				<DashboardSection v-else
+					class="event-section--empty"
+					wide
+					:title="t('spreed', 'Schedule meetings')"
+					:subtitle="t('spreed', 'You don\'t have any upcoming meetings')"
+					:description="t('spreed', 'Schedule a meeting from your calendar. A Talk conversation needs to be set as location to show up here')">
+					<template #image>
+						<img :src="imagePath('spreed', 'dashboard/meetings.png')">
+					</template>
+					<template #action>
+						<NcButton
+							variant="secondary"
+							:href="generateUrl('apps/calendar')"
+							target="_blank">
+							<template #icon>
+								<IconCalendarBlankOutline :size="20" />
+							</template>
+							{{ t('spreed', 'Open calendar') }}
+						</NcButton>
 					</template>
-				</NcEmptyContent>
+				</DashboardSection>
 			</div>
-			<div v-if="supportsUpcomingReminders"
-				class="talk-dashboard__upcoming-reminders">
-				<h3 class="title">
-					{{ t('spreed', 'Upcoming reminders') }}
-				</h3>
-				<div v-if="upcomingReminders.length > 0" class="upcoming-reminders-list">
-					<SearchMessageItem v-for="reminder in upcomingReminders"
-						:key="reminder.messageId"
-						:message-id="reminder.messageId"
-						:title="reminder.actorDisplayName"
-						:subline="reminder.message"
-						:message-parameters="reminder.messageParameters"
-						:token="reminder.roomToken"
-						:to="{
-							name: 'conversation',
-							params: { token: reminder.roomToken },
-							hash: `#message_${reminder.messageId}`,
-						}"
-						:actor-id="reminder.actorId"
-						:actor-type="reminder.actorType"
-						:timestamp="reminder.reminderTimestamp"
-						is-reminder />
+			<div class="talk-dashboard__chats">
+				<div class="talk-dashboard__unread-mentions">
+					<DashboardSection v-if="filteredConversations.length > 0 || !conversationsInitialised"
+						:title="t('spreed', 'Unread mentions')">
+						<template #list>
+							<ConversationsListVirtual
+								class="talk-dashboard__conversations-list"
+								:conversations="filteredConversations"
+								:loading="!conversationsInitialised" />
+						</template>
+					</DashboardSection>
+					<DashboardSection v-else
+						:title="t('spreed', 'Unread mentions')"
+						:description="t('spreed', 'Messages where you were mentioned will show up here. You can mention people by typing @ followed by their name')">
+						<template #image>
+							<img :src="imagePath('spreed', 'dashboard/mentions.png')">
+						</template>
+					</DashboardSection>
+				</div>
+				<div v-if="supportsUpcomingReminders"
+					class="talk-dashboard__upcoming-reminders">
+					<DashboardSection v-if="upcomingReminders.length > 0 || !remindersInitialised"
+						:title="t('spreed', 'Upcoming reminders')">
+						<template #list>
+							<ul v-if="remindersInitialised" class="upcoming-reminders-list">
+								<SearchMessageItem v-for="reminder in upcomingReminders"
+									:key="reminder.messageId"
+									:message-id="reminder.messageId"
+									:title="reminder.actorDisplayName"
+									:subline="reminder.message"
+									:message-parameters="reminder.messageParameters"
+									:token="reminder.roomToken"
+									:to="{
+										name: 'conversation',
+										params: { token: reminder.roomToken },
+										hash: `#message_${reminder.messageId}`,
+									}"
+									:actor-id="reminder.actorId"
+									:actor-type="reminder.actorType"
+									:timestamp="reminder.reminderTimestamp"
+									is-reminder />
+							</ul>
+							<LoadingPlaceholder v-else
+								class="upcoming-reminders__loading-placeholder"
+								type="conversations" />
+						</template>
+					</DashboardSection>
+					<DashboardSection v-else
+						:title="t('spreed', 'Message reminders')"
+						:description="t('spreed', 'Set a reminder on a message to be notified')">
+						<template #image>
+							<img :src="imagePath('spreed', 'dashboard/reminders.png')">
+						</template>
+					</DashboardSection>
 				</div>
-				<LoadingPlaceholder v-else-if="!remindersInitialised"
-					class="upcoming-reminders__loading-placeholder"
-					type="conversations" />
-				<NcEmptyContent v-else
-					class="talk-dashboard__empty-content"
-					:name="t('spreed', 'No reminders scheduled')"
-					:description="t('spreed', 'You have no reminders scheduled')">
-					<template #icon>
-						<IconAlarm :size="40" />
-					</template>
-				</NcEmptyContent>
 			</div>
 		</div>
 	</div>
@@ -351,21 +371,38 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' })
 @import '../../assets/variables';
 
 .talk-dashboard-wrapper {
-	--title-height: calc(var(--default-clickable-area) + var(--default-grid-baseline) * 3); // '.title' height
-	--section-width: 300px;
-	--section-height: 300px;
-	--content-height: calc(100% - var(--title-height));
-	padding: 0 calc(var(--default-grid-baseline) * 3);
-	max-width: calc($messages-list-max-width + 400px); // FIXME: to change to a readable value
+	padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 3);
+	width: calc(100vw - 300px - var(--body-container-margin) * 2); // 300px for the left sidebar and body container margins
 	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	max-height: 800px;
+	max-width: 1200px;
+
+	&--mobile {
+		width: 100%;
+	}
+
+	&--small-mobile {
+		width: 100%;
+		height: auto;
+
+		.talk-dashboard__chats {
+			grid-template-columns: 1fr;
+			gap: calc(var(--default-grid-baseline) * 6);
+		}
+	}
+}
+
+.talk-dashboard__menu {
+	margin-bottom: calc(var(--default-grid-baseline) * 5);
 }
 
 .talk-dashboard__header {
 	font-size: 21px; // NcDialog header font size
 	font-weight: bold;
-	height: 51px; // top bar height
-	line-height: 51px;
-	margin: 0 auto;
+	margin: 0 auto calc(var(--default-grid-baseline) * 2);
 	padding-inline-start: calc(var(--default-clickable-area) + var(--default-grid-baseline)); // navigation button
 }
 
@@ -374,13 +411,29 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' })
 	gap: calc(var(--default-grid-baseline) * 3);
 	padding-block: var(--default-grid-baseline);
 	flex-wrap: wrap;
+	justify-content: space-evenly;
 
-	:deep(.button-vue) {
+	:deep(.button-vue),
+	:deep(.v-popper--theme-dropdown) {
 		height: var(--header-menu-item-height);
+		border-radius: var(--border-radius-large);
+		flex: 1;
+		width: 100%;
+	}
+
+	:deep(.button-vue) {
 		padding-inline: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 4);
 	}
 }
 
+.event-section {
+	margin-block-end: calc(var(--default-grid-baseline) * 6);
+
+	&--empty {
+		height: 225px;
+	}
+}
+
 .talk-dashboard__event-cards {
 	display: flex;
 	flex-wrap: nowrap;
@@ -434,92 +487,52 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' })
 	inset-inline-start: calc(var(--default-grid-baseline) * 2);
 }
 
-.talk-dashboard__chats {
+.talk-dashboard__items {
 	display: flex;
-	gap: calc(var(--default-grid-baseline) * 2);
-	padding-block-end: calc(var(--default-grid-baseline) * 2);
-	flex-wrap: wrap;
-}
-
-.talk-dashboard__unread-mentions {
-	height: var(--section-height);
-	width: var(--section-width);
-	flex-shrink: 0;
+	flex-direction: column;
+	justify-content: space-around;
+	min-width: 0;
+	flex-grow: 3;
 }
 
-.talk-dashboard__upcoming-reminders {
-	height: var(--section-height);
-	width: var(--section-width);
-	flex-shrink: 0;
+.talk-dashboard__chats {
+	display: grid;
+	gap: calc(var(--default-grid-baseline) * 8);
+	grid-template-columns: 1fr 1fr;
+	flex-grow: 1;
 
-	&-list {
-		overflow-y: auto;
-		height: var(--content-height);
+	&> div {
+		max-height: 360px;
 	}
 }
 
 .upcoming-reminders {
 	&-list {
 		overflow-y: auto;
-		height: var(--content-height);
 	}
 
 	&__loading-placeholder {
 		overflow: hidden;
-		height: var(--content-height);
 	}
 }
 
-.talk-dashboard__empty-content {
-	border-radius: var(--border-radius-large);
-	padding: calc(var(--default-grid-baseline) * 2);
-	margin: var(--default-grid-baseline) 0;
-	border: 3px solid var(--color-border);
-	height: var(--content-height);
-}
-
-.talk-dashboard__empty-event-card {
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	height: 225px;
-	width: var(--section-width);
-	border-radius: var(--border-radius-large);
-	border: 3px solid var(--color-border);
-	padding: calc(var(--default-grid-baseline) * 2);
-	margin-bottom: calc(var(--default-grid-baseline) * 2);
-}
-
 .talk-dashboard__conversations-list {
 	margin: var(--default-grid-baseline) 0;
-	height: var(--content-height);
+	height: 225px;
 	line-height: 20px;
 }
 
 .title {
-	font-weight: bold;
-	font-size: inherit;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: block;
-	height: var(--default-clickable-area);
-	margin-block: calc(var(--default-grid-baseline) * 2) var(--default-grid-baseline);
-	margin-inline: var(--default-grid-baseline);
-}
-
-.secondary_text {
-	color: var(--color-text-maxcontrast);
-	font-size: var(--font-size-small);
-	overflow: hidden;
-	text-overflow: ellipsis;
+	font-size: 1.25rem;
+    font-weight: bold;
+	margin-block: 0 calc(var(--default-grid-baseline) * 2);
 }
 
 .instant-meeting__dialog {
-	padding: 8px;
+	padding: calc(var(--default-grid-baseline) * 2);
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--default-grid-baseline) ;
 	align-items: center;
 }
 
@@ -528,7 +541,11 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' })
 	.talk-dashboard__actions {
 		:deep(.button-vue),
 		:deep(.v-popper--theme-dropdown) {
-			width: 100%;
+			flex: initial;
+		}
+
+		:deep(.button-vue) {
+			padding-inline-end: calc(var(--default-grid-baseline) * 2);
 		}
 	}
 }